/* =========================================================================
   AKROS — Converse com a A.R.I.A. (09/10 · refeita 10/10)
   Pedido do dono, com o print: «uma aba em que o usuário pode conversar
   diretamente com a A.R.I.A. … um celular e a pessoa conversar como se
   fosse no WhatsApp, e de fato a A.R.I.A. vai responder (depois conectamos).
   Só deixe o layout profissional e impecável».
   10/10, com dois prints: «coloque uma dropdown flutuante no canto direito
   do celular. Diminua mais o celular para ele caber na tela toda. Remova
   essas mensagens de exemplo, para começar como se fosse uma conversa do
   zero. Remova esses textos do "Experimente". Não coloque na dropdown por
   nicho, mas empresas fictícias».

   A seção é preta como o print (um degrau abaixo do grafite das vizinhas),
   com o mosaico da marca nas bordas e um halo azul atrás do aparelho.
   No desktop (≥1181) ela ocupa UMA tela (100svh, como as vizinhas): o
   cabeçalho à esquerda e o aparelho à direita, e o tamanho do aparelho
   (--fs) sai da altura que sobra (a 1521×712 ele mede ~293×608).
   O aparelho é da mesma família do da seção A.R.I.A. (pipeline.css .phone):
   moldura fina e uniforme, ilha, barra de gesto, raios concêntricos
   (--r-fone). Dentro, o WhatsApp escuro recriado em HTML, todo em `em`
   (1em = o tamanho do aparelho, css .tel --fs): a tela escala inteira.
   A conversa começa vazia. A empresa fictícia sai do dropdown logo abaixo
   do título da seção (.conv__emp; 10/10, 2º pedido: «leve a dropdown para
   perto do título da seção»). O compositor é de verdade (js/converse.js).
   Só opacity nas animações.
   ========================================================================= */

/* 15/10, o dono: as faixas escuras seguidas têm de parecer UM fundo só —
   o chão sai do #060709 (com mosaico a .13) e fica no grafite das vizinhas */
#converse.bloco{background:var(--gr-a);height:auto;min-height:0;padding-bottom:clamp(44px,6.5vh,96px)}
#converse .sechead{max-width:800px;margin:0 auto clamp(22px,3.6vh,44px);text-align:center}
#converse .sechead__sub{margin:0 auto}

/* ---- o palco: aparelho no centro, halo atrás ---- */
.conv__palco{position:relative;display:flex;flex-direction:column;align-items:center}
.conv__palco::before{
  content:"";position:absolute;left:50%;top:46%;width:min(1100px,160%);height:92%;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,128,226,.22),rgba(10,128,226,.07) 46%,rgba(10,128,226,0) 74%);
}

/* ---- desktop: uma tela só, texto à esquerda e aparelho à direita (10/10: «caber na tela toda») ---- */
@media (min-width:1181px){
  #converse.bloco{
    /* 20/10, o dono: «separe mais do celular» — o aparelho encostava a 12px
       do pé (1536x700) no fundo novo dos planos. O respiro de baixo cresce e
       o aparelho, que é medido na altura que sobra (--fs abaixo), encolhe
       junto: continua cabendo na tela. Era clamp(12px,1.6vh,40px). */
    --conv-pb:clamp(40px,6vh,72px);
    height:100svh;min-height:0;
    padding-top:max(var(--nav-h),clamp(22px,2.8vh,60px));padding-bottom:var(--conv-pb);
  }
  #converse .conv__grid{
    flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,560px) auto;
    align-items:center;justify-content:center;column-gap:clamp(40px,6vw,120px);
    /* 10/10, do dono: «centralize melhor os dois blocos; está deslocado para a direita». As margens
       eram iguais (medido: 284/284 a 1521), mas o texto é leve e irregular à direita e o aparelho é
       pesado: o centro VISUAL caía ~48px à direita. O padding à direita puxa o par metade dele para
       a esquerda (medido a 1521: centro dos dois blocos de 808 para 760 = meio da tela). */
    padding-right:clamp(56px,7.5vw,110px);
  }
  #converse .sechead{max-width:none;margin:0;text-align:left}
  #converse .sechead__sub{margin:0}
  /* 46em de aparelho na altura que sobra entre os paddings (desde 20/10 o aparelho tem
     42em: a conta segue em 46, e ele ocupa ~91% dessa altura — mais baixo, como o dono pediu).
     Com o id porque a regra base de .tel vem depois neste arquivo (medido 10/10: sem ele, 15.5px e 713px) */
  #converse .tel{--fs:clamp(10.5px,calc((100svh - max(var(--nav-h),clamp(22px,2.8vh,60px)) - var(--conv-pb)) / 46),15.5px)}
}

/* ---- o aparelho ---- */
.tel{
  --fs:clamp(12px,4vw,15.5px);
  /* 20/10, o dono: «diminua um pouco a altura do celular, e coloque a
     carcaça dele meio prata». A altura cai de 46em para 42em (a largura
     fica: a conversa continua com a mesma letra) e a carcaça vira um
     alumínio escovado, prata sem chegar ao espelho. Era o grafite
     #3B414B → #1E2229 → #15181E. */
  position:relative;flex:none;font-size:var(--fs);width:22em;height:42em;
  padding:.45em;border-radius:calc(2.7em * var(--r-fone));
  background:linear-gradient(158deg,#CDD2D8 0%,#9AA0A8 30%,#6A7078 58%,#858B93 80%,#B4B9C0 100%);
  box-shadow:
    0 60px 90px -36px rgba(0,0,0,.9),
    0 14px 30px -14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
/* os botões físicos: silêncio, volume (2) e o de ligar */
.tel__bt{position:absolute;width:.22em;border-radius:.11em;background:linear-gradient(90deg,#A7ADB5,#626870)}
.tel__bt--m{left:-.22em;top:7.4em;height:1.5em}
.tel__bt--vu{left:-.22em;top:10em;height:3em}
.tel__bt--vd{left:-.22em;top:13.6em;height:3em}
.tel__bt--p{right:-.22em;top:11.2em;height:4.6em;background:linear-gradient(270deg,#A7ADB5,#626870)}
.tel__ecra{
  position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:#0B141A;border-radius:calc(2.25em * var(--r-fone));
  color:#E9EDEF;font-family:var(--sans);line-height:1.35;
}
.tel__ilha{
  position:absolute;z-index:6;top:.7em;left:50%;transform:translateX(-50%);
  width:6em;height:1.7em;border-radius:1em;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.tel__gesto{
  position:absolute;z-index:6;bottom:.55em;left:50%;transform:translateX(-50%);
  width:32%;height:.3em;border-radius:1em;background:rgba(233,237,239,.6);
}

/* ---- a barra de status e o cabeçalho da conversa ---- */
.tel__status,.tel__top{background:#1F2C34;flex:none}
.tel__status{display:flex;align-items:center;justify-content:space-between;height:3em;padding:.9em 1.55em 0 1.75em}
.tel__hora{font-size:.82em;font-weight:600;letter-spacing:.01em}
.tel__sinais{display:inline-flex;align-items:center;gap:.35em}
.tel__sinais svg{height:.8em;width:auto;display:block}
.tel__top{display:flex;align-items:center;gap:.4em;padding:.3em .5em .55em .2em;border-bottom:1px solid rgba(255,255,255,.06)}
.tel__ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2em;height:2em;border:0;background:none;padding:0;color:#AEBAC1;cursor:default;font:inherit;
}
.tel__ico svg{width:1.35em;height:1.35em}
/* o avatar é a EMPRESA (iniciais, matiz --h por empresa): no WhatsApp o cliente fala com o negócio.
   3.08em × .78em = os mesmos 2.4em do aparelho */
.tel__avatar{
  --h:212;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:3.08em;height:3.08em;border-radius:50%;
  font-size:.78em;font-weight:700;letter-spacing:.02em;color:#FFFFFF;
  background:linear-gradient(150deg,hsl(var(--h) 62% 48%),hsl(var(--h) 60% 30%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.tel__quem{flex:1;min-width:0}
.tel__nome{margin:0;display:flex;align-items:center;gap:.3em;font-size:.94em;font-weight:600;color:#E9EDEF;letter-spacing:.01em;line-height:1.2;white-space:nowrap;overflow:hidden}
.tel__nome span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tel__nome svg{flex:none;width:1em;height:1em;color:#53BDEB}
.tel__estado{margin:0;font-size:.74em;color:#8696A0;line-height:1.2;transition:color .3s}
.tel__estado.is-dig{color:#00A884}
.tel__acoes{display:inline-flex;align-items:center;color:#AEBAC1}
.tel__acoes svg{width:1.25em;height:1.25em;margin:0 .14em}

/* ---- as mensagens ---- */
.tel__chat{
  flex:1;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:.6em .7em .5em;
  background:#0B141A radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.3px) 0 0/1.15em 1.15em;
  /* a conversa começa rolada até o fim: o que sobra em cima some em degradê, em vez de
     aparecer cortado na borda do cabeçalho */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 1.6em);
          mask-image:linear-gradient(to bottom,transparent 0,#000 1.6em);
}
.tel__chat::-webkit-scrollbar{display:none}
/* margin-top:auto encosta a conversa no rodapé e ainda rola certo (o
   justify-content:flex-end cortaria o topo quando a lista transborda) */
.tel__fluxo{margin-top:auto;display:flex;flex-direction:column;gap:.3em}
.tel__pill{
  align-self:center;margin:.15em 0 .35em;padding:.32em .6em;border-radius:.5em;
  background:#182229;color:#8696A0;font-size:.68em;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.tel__pill--cripto{
  display:flex;align-items:center;gap:.45em;max-width:94%;text-align:center;line-height:1.3;
  text-transform:none;letter-spacing:0;color:#FFD279;
}
.tel__pill--cripto svg{flex:none;width:1.1em;height:1.1em}
.tel__pill--conta{margin-top:0}

.bl{
  position:relative;max-width:85%;padding:.42em .6em .32em;border-radius:.65em;
  font-size:.9em;line-height:1.38;color:#E9EDEF;box-shadow:0 1px .5px rgba(0,0,0,.3);
}
.bl::after{content:"";display:block;clear:both}
.bl p{margin:0}
.bl b{font-weight:600;color:#FFFFFF}
.bl--in{align-self:flex-start;background:#202C33;border-top-left-radius:.15em}
.bl--out{align-self:flex-end;background:#005C4B;border-top-right-radius:.15em}
/* o rabinho, só na primeira bolha de cada lado */
.bl--in::before{content:"";position:absolute;top:0;left:-.45em;width:0;height:0;border-top:.55em solid #202C33;border-left:.5em solid transparent}
.bl--out::before{content:"";position:absolute;top:0;right:-.45em;width:0;height:0;border-top:.55em solid #005C4B;border-right:.5em solid transparent}
.bl--in + .bl--in{border-top-left-radius:.65em}
.bl--out + .bl--out{border-top-right-radius:.65em}
.bl--in + .bl--in::before,.bl--out + .bl--out::before{display:none}
.bl__quem{display:flex;align-items:center;gap:.3em;margin:0 0 .15em;font-size:.8em;font-weight:600;color:#6CB8FF;line-height:1.2}
.bl__quem svg{width:1em;height:1em;color:#C4B5FD}
.bl__quem span{font-weight:400;color:#8696A0}
.bl__meta{
  float:right;margin:.5em 0 0 .7em;display:inline-flex;align-items:center;gap:.25em;
  font-size:.66em;line-height:1;color:#8696A0;
}
.bl--out .bl__meta{color:rgba(233,237,239,.62)}
.bl__meta svg{width:1.3em;height:1.3em;color:rgba(233,237,239,.62)}
.bl__meta svg.lido{color:#53BDEB}

/* o cartão (proposta, agenda, pagamento): branco dentro da bolha, como no print.
   Chama-se .cvcard porque .card é o cartão flutuante da hero (hero.css): com o
   nome genérico ele herdava animação, hover e grade (medido 09/10) */
.bl--card{padding:.32em;max-width:88%;width:19em}
.cvcard{background:#FFFFFF;color:#111B21;border-radius:.5em;padding:.75em .85em .7em}
.cvcard__eye{
  display:flex;justify-content:space-between;align-items:center;gap:.5em;margin:0 0 .4em;
  font-family:var(--mono);font-size:.64em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#667781;
}
.cvcard__eye em{font-style:normal;color:#008069;padding:.2em .5em;border-radius:.3em;background:rgba(0,128,105,.1)}
.cvcard__v{margin:0;font-family:var(--titulo);font-size:1.55em;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#111B21}
.cvcard__s{margin:.2em 0 .65em;font-size:.72em;color:#667781}
.cvcard__bt{
  display:flex;align-items:center;justify-content:center;width:100%;height:2.3em;
  border:0;border-radius:.4em;background:#008069;color:#FFFFFF;
  font:inherit;font-size:.84em;font-weight:600;letter-spacing:.01em;cursor:default;
}
.cvcard__pe{
  display:flex;align-items:center;gap:.45em;margin:.65em 0 0;padding-top:.6em;
  border-top:1px solid #E9EDEF;font-size:.72em;line-height:1.3;color:#54656F;
}
.cvcard__pe svg{flex:none;width:1.55em;height:1.55em;color:#D23F31}
.cvcard__pe svg.verde{color:#008069}
.cvcard__pe b{color:#111B21;font-weight:600}

/* «digitando…»: três pontos, só opacity */
.bl--dig{display:inline-flex;align-items:center;gap:.3em;padding:.6em .7em}
.bl--dig i{width:.45em;height:.45em;border-radius:50%;background:#8696A0;opacity:.25;animation:cv-dig 1.2s infinite}
.bl--dig i:nth-child(2){animation-delay:.2s}
.bl--dig i:nth-child(3){animation-delay:.4s}
@keyframes cv-dig{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---- o compositor (funciona de verdade) ---- */
.tel__comp{display:flex;align-items:center;gap:.4em;flex:none;padding:.45em .55em 1.45em .35em;background:#1F2C34;border-top:1px solid rgba(255,255,255,.06)}
.tel__campo{
  flex:1;min-width:0;display:flex;align-items:center;gap:.45em;height:2.5em;
  padding:0 .6em 0 .65em;border-radius:1.3em;background:#2A3942;color:#8696A0;
  transition:box-shadow .25s;
}
.tel__campo:focus-within{box-shadow:0 0 0 1px rgba(0,168,132,.55)}
.tel__campo svg{flex:none;width:1.3em;height:1.3em}
.tel__campo input{
  flex:1;min-width:0;border:0;background:none;padding:0;outline:none;
  color:#E9EDEF;font:inherit;font-size:.92em;
}
.tel__campo input::placeholder{color:#8696A0}
.tel__envia{
  position:relative;flex:none;width:2.5em;height:2.5em;border:0;border-radius:50%;padding:0;
  background:#00A884;color:#0B141A;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s;
}
.tel__envia:hover{background:#06CF9C}
.tel__envia svg{position:absolute;width:1.3em;height:1.3em;transition:opacity .2s}
.tel__envia .send{opacity:0;transform:translateX(.05em)}
.tel--texto .tel__envia .mic{opacity:0}
.tel--texto .tel__envia .send{opacity:1}

/* ---- o dropdown da empresa fictícia, logo abaixo do título da seção (10/10, 2º pedido do dono) ----
   Abre e fecha só com opacity (visibility acompanha, para não receber foco nem clique fechado).
   A lista abre para baixo, centrada no botão; quando não cabe embaixo mas cabe em cima, o js põe
   .is-up (no desktop o botão fica no meio da tela). No desktop as doze ficam em duas colunas. */
.conv__emp{position:relative;z-index:8;display:inline-block;margin-top:clamp(18px,2.6vh,30px);font-family:var(--sans);font-size:13px;line-height:1.15;color:var(--ink);text-align:left}
.conv__emp__bt{
  appearance:none;display:inline-flex;align-items:center;gap:9px;max-width:min(260px,72vw);
  /* 20/10, o dono: «destaque os contornos da dropdown com dourado para as
     pessoas verem melhor a proposta de simular empresas diferentes». O fio
     é o ouro dos rótulos (--ouro, #D9B45F), com um halo dourado fraco; ao
     passar o mouse ou abrir, o fio acende inteiro. Era branco a 16% e azul. */
  padding:6px 11px 6px 6px;border-radius:999px;border:1px solid rgba(217,180,95,.72);
  background:rgba(19,23,29,.94);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 0 0 3px rgba(217,180,95,.10),0 0 22px -4px rgba(217,180,95,.30),
    0 18px 40px -14px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.conv__emp__bt:hover,.conv__emp.is-open .conv__emp__bt{
  border-color:var(--ouro,#D9B45F);background:rgba(23,29,38,.97);
  box-shadow:0 0 0 3px rgba(217,180,95,.18),0 0 28px -2px rgba(217,180,95,.42),
    0 18px 40px -14px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.conv__emp__bt:focus-visible{outline:2px solid var(--ouro,#D9B45F);outline-offset:3px}
.conv__emp__ini{
  --h:212;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#FFFFFF;
  background:linear-gradient(150deg,hsl(var(--h) 62% 48%),hsl(var(--h) 60% 30%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.conv__emp__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.conv__emp__txt small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.conv__emp__txt b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv__emp__chev{flex:none;width:14px;height:14px;color:var(--ouro,#D9B45F);transition:transform .25s}
.conv__emp.is-open .conv__emp__chev{transform:rotate(180deg)}
.conv__emp__menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(280px,calc(100vw - 40px));max-height:min(calc(100svh - 160px),560px);
  overflow:auto;margin:0;padding:6px;list-style:none;border-radius:14px;outline:none;
  border:1px solid rgba(217,180,95,.55);background:rgba(17,20,26,.98);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  /* visibility vira na hora ao abrir e só depois do fade ao fechar (o delay): animada junto com a
     opacity ela ficou presa em «hidden» no Chromium (medido 10/10, 550 ms depois do clique) */
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s;
}
.conv__emp.is-open .conv__emp__menu{opacity:1;visibility:visible;transition-delay:0s}
.conv__emp__cab{padding:7px 10px 5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.conv__emp__op{
  display:flex;align-items:center;gap:10px;padding:7px 10px 7px 7px;border-radius:9px;
  color:var(--ink-soft);cursor:pointer;transition:background .2s;
}
.conv__emp__op:hover,.conv__emp__op.is-foco{background:rgba(255,255,255,.07)}
.conv__emp__op[aria-selected="true"]{color:var(--ink)}
.conv__emp__op .conv__emp__ini{width:28px;height:28px;font-size:11px}
.conv__emp__op > span:not(.conv__emp__ini){display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.conv__emp__op b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv__emp__op small{font-size:11px;color:var(--faint)}
.conv__emp__op svg{flex:none;width:14px;height:14px;color:#0A80E2;opacity:0;transition:opacity .2s}
.conv__emp__op[aria-selected="true"] svg{opacity:1}
.conv__emp.is-up .conv__emp__menu{top:auto;bottom:calc(100% + 8px)}
/* 20/10, o dono: «aqui tá cortando». A lista aberta passava do pé da seção e
   a seção de baixo (#planos, mesmo z-index 5 e depois no documento) pintava
   por cima dela. Com a lista aberta o #converse sobe um degrau. */
#converse:has(.conv__emp.is-open){z-index:6}
@media (min-width:1181px){
  .conv__emp__menu{left:0;transform:none;width:min(540px,calc(100vw - 40px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px;align-content:start}
  .conv__emp__cab{grid-column:1/-1}
}

@media (max-width:600px){
  /* o iOS aproxima a tela quando o campo tem menos de 16px */
  .tel__campo input{font-size:max(.92em,16px)}
}
@media (prefers-reduced-motion:reduce){
  .bl--dig i{animation:none;opacity:.7}
  .conv__emp__menu,.conv__emp__chev,.conv__emp__op,.conv__emp__op svg{transition:none}
}