/* ==========================================================================
   ft-fone.css — carcacas de telefone com a UI dos apps (Instagram, TikTok,
   Telegram, WhatsApp), portadas 1:1 da landing de afiliados do dono.
   Regra de tema: o INTERIOR do phone NAO e tematizado (um telefone e preto
   nos dois temas) — cores literais dos apps; so a casca (sombra) e a
   legenda usam tokens. Zero imagem de moldura, zero JS.
   ESPELHO: frontend/fone.css (dashboard) — sincronizar na mao.
   ========================================================================== */

/* ------------------------------------------------------------ casca */
.ft-fone {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 36px;
  background: linear-gradient(160deg, #2f373b, #13181a);
  box-shadow: 0 32px 70px -34px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .09);
}
body.ft-body.light-theme .ft-fone {
  box-shadow: 0 24px 48px -28px rgba(20, 40, 50, .45),
              inset 0 1px 0 rgba(255, 255, 255, .09);
}
.ft-fone-tela {
  position: relative;
  border-radius: 29px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
/* TV box sem aspect-ratio: caixa por padding-bottom (conteudo absoluto) */
@supports not (aspect-ratio: 9 / 19) {
  .ft-fone-tela { display: block; height: 0; padding-bottom: 211%; }
  .ft-fone-tela > .ft-fone-abs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
}
@supports (aspect-ratio: 9 / 19) {
  .ft-fone-abs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
}
.ft-fone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 64px;
  height: 17px;
  margin-left: -32px;
  border-radius: 10px;
  background: #000;
  z-index: 6;
}
.ft-fone-legenda {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ft-fraco);
}

/* -------------------------------------------------------- status bar */
.ft-fone-status {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 0;
  flex: 0 0 auto;
}
.ft-fone-hora { font-size: 11px; font-weight: 700; color: #fff; }
.ft-fone-status-icones { display: flex; align-items: center; gap: 4px; }
.ft-fone-sinal { display: flex; align-items: flex-end; gap: 1.5px; }
.ft-fone-sinal i { display: block; width: 3px; border-radius: .5px; background: #fff; }
.ft-fone-sinal i:nth-child(1) { height: 4px; }
.ft-fone-sinal i:nth-child(2) { height: 6px; }
.ft-fone-sinal i:nth-child(3) { height: 8px; }
.ft-fone-sinal i:nth-child(4) { height: 10px; }
.ft-fone-bateria {
  display: block;
  width: 18px;
  height: 9px;
  border-radius: 3px;
  border: 1.2px solid rgba(255, 255, 255, .85);
  padding: 1.2px;
}
.ft-fone-bateria i { display: block; width: 78%; height: 100%; border-radius: 1px; background: #fff; }

/* --------------------------------------------------- midia do criativo */
.ft-fone-midia { flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0a0a0a; }
.ft-fone-midia img,
.ft-fone-midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-fone-midia-vazia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #0f2a33, #05131a);
  color: #00d5ed;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
}

/* grade das redes na pagina — visualizacao SIMULTANEA (pedido do dono):
   em tela larga as 4 simulacoes ficam lado a lado; o auto-fit degrada
   sozinho para 2 colunas no notebook e 1 no celular */
.ft-afi-redes { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) {
  .ft-afi-redes { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; }
}
.ft-afi-rede {
  background: var(--ft-afi-card-fundo, var(--ft-card));
  border: 1px solid var(--ft-afi-card-borda, var(--ft-borda));
  border-radius: var(--ft-raio-principal, 18px);
  padding: 18px 16px 16px;
}
.ft-afi-rede-cabeca { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.ft-afi-rede-nome { font-size: 15px; font-weight: 700; margin: 0; }
.ft-afi-rede-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; flex: 0 0 auto; }
.ft-afi-rede-dot--ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.ft-afi-rede-dot--tt { background: linear-gradient(135deg, #25F4EE, #FE2C55); }
.ft-afi-rede-dot--tg { background: #2AABEE; }
.ft-afi-rede-dot--wa { background: #25D366; }
.ft-afi-fone-copiar { display: block; width: 100%; max-width: 250px; margin: 12px auto 0; text-align: center; }

/* ============================================================ Instagram */
.ft-ig-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px 7px;
  flex: 0 0 auto;
}
.ft-ig-marca {
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.02em;
  color: #fff;
}
.ft-ig-icones { display: flex; gap: 12px; color: #fff; }
.ft-ig-icones svg { display: block; }
.ft-ig-stories {
  display: flex;
  gap: 10px;
  padding: 2px 13px 9px;
  flex: 0 0 auto;
  overflow: hidden;
}
.ft-ig-story { flex: 0 0 auto; width: 44px; text-align: center; }
.ft-ig-story-anel {
  display: block; /* span inline ignora width/height — o anel colapsava */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF);
  box-sizing: border-box;
}
.ft-ig-story-miolo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
  box-sizing: border-box;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00d5ed;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}
.ft-ig-story-anel--cinza { background: #2a2a2a; }
.ft-ig-story-miolo--tarja { background: repeating-linear-gradient(135deg, #2a2a2a 0 5px, #1e1e1e 5px 10px); }
.ft-ig-story-nome {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  color: #c8c8c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-ig-acoes { display: flex; gap: 12px; padding: 9px 13px 6px; color: #fff; flex: 0 0 auto; }
.ft-ig-acoes svg { display: block; }
.ft-ig-acoes .ft-ig-salvar { margin-left: auto; }
.ft-ig-legenda { padding: 0 13px 8px; flex: 0 0 auto; }
.ft-ig-curtidas { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.ft-ig-legenda p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #e9e9e9;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-ig-comentarios { display: block; margin-top: 3px; font-size: 11px; color: #7a7a7a; }
.ft-ig-nav {
  display: flex;
  justify-content: space-around;
  padding: 9px 0 13px;
  border-top: 1px solid #1c1c1c;
  color: #fff;
  flex: 0 0 auto;
  margin-top: auto;
}

/* ============================================================== TikTok */
.ft-tt-fundo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.ft-tt-fundo img,
.ft-tt-fundo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-tt-fundo .ft-fone-midia-vazia { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.ft-tt-veu {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 13%,
              transparent 27%, transparent 44%, rgba(0,0,0,.9) 100%);
}
.ft-tt-conteudo { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.ft-tt-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 7px 13px 0;
  flex: 0 0 auto;
}
.ft-tt-tab { font-size: 12px; color: rgba(255, 255, 255, .6); }
.ft-tt-tab--ativa { color: #fff; font-weight: 700; position: relative; }
.ft-tt-tab--ativa::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 22px;
  height: 2.5px;
  margin-left: -11px;
  border-radius: 2px;
  background: #fff;
}
.ft-tt-corpo { flex: 1 1 auto; display: flex; align-items: flex-end; min-height: 0; }
.ft-tt-caption { flex: 1 1 auto; min-width: 0; padding: 0 8px 12px 13px; }
.ft-tt-user { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.ft-tt-caption p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.42;
  color: #f2f2f2;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-tt-rail {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 0 6px 14px 0;
  color: #fff;
}
.ft-tt-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: linear-gradient(150deg, #0f2a33, #05131a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00d5ed;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 3px;
}
.ft-tt-avatar i {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border-radius: 50%;
  background: #FE2C55;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}
.ft-tt-conta { font-size: 10px; font-weight: 600; margin-top: -8px; }
.ft-tt-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ft-tt-item svg { display: block; }
.ft-tt-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0 12px;
  background: rgba(0, 0, 0, .6);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 8.5px;
  color: #ddd;
}
/* o botao de criar do TikTok: pilula branca com as abas ciano/vermelha */
.ft-tt-mais {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 20px;
  border-radius: 7px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: -3px 0 0 #25F4EE, 3px 0 0 #FE2C55;
}

/* ======================================== doodle (Telegram + WhatsApp) */
.ft-fone-doodle {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(40, 60, 70, .05) 0 7px, transparent 8px),
    radial-gradient(circle at 68% 9%,  rgba(40, 60, 70, .045) 0 5px, transparent 6px),
    radial-gradient(circle at 33% 41%, rgba(40, 60, 70, .05) 0 6px, transparent 7px),
    radial-gradient(circle at 87% 33%, rgba(40, 60, 70, .04) 0 7px, transparent 8px),
    radial-gradient(circle at 9% 66%,  rgba(40, 60, 70, .055) 0 5px, transparent 6px),
    radial-gradient(circle at 55% 58%, rgba(40, 60, 70, .04) 0 8px, transparent 9px),
    radial-gradient(circle at 78% 72%, rgba(40, 60, 70, .05) 0 5px, transparent 6px),
    radial-gradient(circle at 24% 88%, rgba(40, 60, 70, .045) 0 6px, transparent 7px),
    radial-gradient(circle at 64% 92%, rgba(40, 60, 70, .05) 0 4px, transparent 5px),
    radial-gradient(circle at 44% 12%, rgba(40, 60, 70, .04) 0 4px, transparent 5px),
    radial-gradient(circle at 93% 55%, rgba(40, 60, 70, .05) 0 4px, transparent 5px),
    radial-gradient(circle at 5% 40%,  rgba(40, 60, 70, .045) 0 5px, transparent 6px);
  background-size: 176px 176px, 124px 124px, 150px 150px, 176px 176px,
                   124px 124px, 176px 176px, 150px 150px, 124px 124px,
                   81px 81px, 81px 81px, 124px 124px, 150px 150px;
  background-repeat: repeat;
}

/* ============================================================ Telegram */
.ft-tg-tela { background-color: #e4ebd6; color: #1f1f1f; }
/* nos apps de fundo claro a status bar senta sobre a cor do header */
.ft-tg-tela .ft-fone-status { background: #4a76a8; padding-bottom: 6px; }
.ft-wa-tela .ft-fone-status { background: #075e54; padding-bottom: 6px; }
.ft-tg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #4a76a8;
  color: #fff;
  flex: 0 0 auto;
}
.ft-tg-header svg { display: block; flex: 0 0 auto; }
.ft-tg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(150deg, #0f2a33, #05131a);
  color: #00d5ed;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ft-tg-titulo { flex: 1 1 auto; min-width: 0; }
.ft-tg-nome { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tg-sub { display: block; font-size: 10px; color: rgba(255, 255, 255, .72); }
.ft-tg-fixada {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid #e2e6e9;
  flex: 0 0 auto;
}
.ft-tg-fixada-regua { width: 2px; height: 24px; border-radius: 1px; background: #4a76a8; flex: 0 0 auto; }
.ft-tg-fixada-textos { flex: 1 1 auto; min-width: 0; }
.ft-tg-fixada-titulo { display: block; font-size: 10px; font-weight: 700; color: #4a76a8; }
.ft-tg-fixada-preview { display: block; font-size: 10.5px; color: #7b8994; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tg-chat { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 10px; }
.ft-tg-bolha {
  max-width: 96%;
  border-radius: 9px 9px 9px 2px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.ft-tg-bolha-midia { height: 96px; overflow: hidden; background: #dfe6ea; }
.ft-tg-bolha-midia img,
.ft-tg-bolha-midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-tg-bolha-texto {
  margin: 0;
  padding: 7px 9px 4px;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-line; /* \n do texto real quebra; sem nl2br (dobraria) */
  color: #1f1f1f;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-tg-bolha-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 9px 6px;
  font-size: 10px;
  color: #8a9aa5;
}
.ft-tg-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 11px;
  background: #fff;
  color: #98a6b0;
  font-size: 12px;
  flex: 0 0 auto;
  margin-top: auto;
}

/* ============================================================ WhatsApp */
.ft-wa-tela { background-color: #efe7de; color: #111b21; }
.ft-wa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #075e54;
  color: #fff;
  flex: 0 0 auto;
}
.ft-wa-chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ft-wa-bolha {
  position: relative;
  margin-right: 6px;
  max-width: 96%;
  border-radius: 8px 0 8px 8px;
  background: #dcf8c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .14);
  padding: 3px;
}
.ft-wa-bolha::before {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  width: 7px;
  height: 12px;
  background: #dcf8c6;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ft-wa-bolha-midia { height: 110px; overflow: hidden; border-radius: 6px; background: #cfe6c0; }
.ft-wa-bolha-midia img,
.ft-wa-bolha-midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-wa-bolha-texto {
  margin: 0;
  padding: 5px 6px 2px;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-line;
  color: #111b21;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-wa-bolha-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 6px 4px;
  font-size: 10px;
  color: #667781;
}
.ft-wa-check { display: block; }
.ft-wa-rodape { padding: 7px 10px 11px; flex: 0 0 auto; margin-top: auto; }
.ft-wa-input {
  height: 32px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  color: #98a6b0;
}

/* ==========================================================================
   Adaptacao ao dash de afiliados (as linhas 1-516 acima sao ESPELHO byte a
   byte de painel/css/ft-fone.css — teste-guarda compara por bytes;
   sincronizar na mao, como o outro espelho frontend/fone.css). O dash nao
   tem os tokens ft-*: mapeiam aqui para os tokens do styles.css (mesma
   pagina, mesmo :root). ZERO hex novo neste bloco — a varredura de paleta
   deste arquivo permite exatamente os hex do canonico.
   ========================================================================== */
:root {
  --ft-afi-card-fundo: var(--sub2);
  --ft-afi-card-borda: var(--borda-ctl);
  --ft-raio-principal: 18px;
  --ft-fraco: var(--deep);
}