/* Arte da hero de Atendimento com IA: uma CONVERSA acontecendo, num aparelho.
   Carregado SÓ nesta página (inc/head.php).
   ⚠️ O que a régua cobra é o TOTAL por página, style.css mais este.

   ── O DESENHO ──────────────────────────────────────────────────────────────
   Três coisas que a primeira versão errou, e que Ronaldo apontou:
     1. os balões flutuavam soltos no palco - "parece que voando". Agora há um
        APARELHO, e ele sai pela borda de baixo da hero em vez de terminar;
     2. dois tons de balão não dizem quem fala. Cada mensagem passou a ter
        cabeçalho com ícone e nome;
     3. o espaçamento parecia irregular, "como se não fosse a mesma conversa" -
        e era: o "digitando" ocupava uma LINHA PRÓPRIA entre alguns pares de
        mensagens e não entre outros. Agora ele divide a célula com o balão que
        vem depois, que é onde ele aparece num aplicativo de verdade. */

/* ── O aparelho ───────────────────────────────────────────────────────────
   Sem borda embaixo e sem cantos inferiores: ele CONTINUA para fora, e quem
   corta é o `overflow: hidden` da .hero. Fechado, viraria um cartão solto no
   meio do nada - que é justamente a sensação que estamos tirando. */
.fone {
  position: relative;
  z-index: 1;
  width: min(24rem, 93%);
  margin-inline: auto;
  padding: var(--e4) var(--e4) 0;
  border: 1px solid rgb(255 255 255 / .14);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, rgb(19 43 66 / .82), rgb(13 30 46 / .92));
  box-shadow: 0 -10px 60px -30px rgb(0 0 0 / .9);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fone {
    background: linear-gradient(180deg, rgb(19 43 66 / .58), rgb(13 30 46 / .72));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
  }
}
/* ── A casca do aparelho ──────────────────────────────────────────────────
   Um segundo contorno POR FORA, para o que está dentro ler como TELA e não
   como um cartão com borda. É o que separa "moldura" de "retângulo": sem a
   casca, o balão mais externo parece encostar na borda do mundo. */
.fone::after {
  content: "";
  position: absolute;
  inset: -7px -7px 0;
  border: 1px solid rgb(255 255 255 / .09);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  pointer-events: none;
}
/* o traço do alto-falante */
.fone::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin: 0 auto var(--e3);
  border-radius: 999px;
  background: rgb(255 255 255 / .16);
}

/* ── A barra de estado ────────────────────────────────────────────────────
   Não informa nada: existe para o olho reconhecer um telefone antes de ler as
   palavras. O relógio não marca hora de verdade e os sinais são desenho -
   qualquer número ali seria dado inventado (invariante 4). */
.fone__estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--e2) var(--e3);
  color: var(--navy-200);
}
.fone__hora {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.fone__sinais { display: inline-flex; align-items: center; gap: 5px; }
.fone__sinais svg { height: 9px; width: auto; display: block; opacity: .75; }

/* ── A conversa ───────────────────────────────────────────────────────────
   Uma linha por mensagem. O "digitando" NÃO tem linha própria: ele divide a
   célula com o balão que vem depois (grid-row), e por isso o espaço entre as
   mensagens é sempre o mesmo. */
/* ⚠️⚠️ `grid-template-columns: 1fr` NÃO É OPCIONAL, e a falta dela foi o
   defeito que custou três rodadas de tentativa.
   O "digitando" e o balão do agente dividem a MESMA LINHA (grid-row), mas eu
   nunca disse em qual COLUNA. Sem isso, o auto-placement do grid põe o segundo
   item numa SEGUNDA COLUNA - e o grid passou a ter duas trilhas de verdade
   (medido: `164px 162px` numa tela de 350). Cada balão ficava preso a metade
   da tela, e nenhum ajuste de `max-width` no balão podia consertar isso: o
   teto dele era a coluna, não a tela.
   Era literalmente "duas colunas", que foi a palavra que Ronaldo usou desde a
   primeira vez. Eu procurei o defeito no balão três vezes; ele estava no
   contêiner. */
.fone__tela {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, auto);
  gap: var(--e5);
  /* respiro depois da última fala: sem isso a conversa termina
     encostada na borda de baixo do aparelho */
  padding-bottom: var(--e9);
}
/* ⚠️ A conversa é UMA COLUNA com cinco LINHAS - nunca duas colunas. Cada
   mensagem ocupa a linha inteira e só é ALINHADA a um lado.
   O que fazia parecer duas colunas era o TETO do balão: com ~50% de cada lado,
   nenhuma fala entrava no espaço da outra e ficavam duas faixas paralelas.

   ⚠️ E a primeira correção errou de elemento: pus `min-width` no CONTÊINER
   (.msg), não no balão. O contêiner esticava, o <p> dentro dele continuava
   encolhendo ao texto - e, pior, as falas longas passaram a ocupar 100% da
   tela, o que não é conversa, é bloco.

   O certo é o do aplicativo de verdade: o balão ENCOLHE ao conteúdo, com um
   teto generoso. A invasão do espaço do outro lado vem da diferença de tamanho
   entre as falas - uma longa à direita cobre o meio da tela e cruza com a
   curta da esquerda. */
/* ⚠️⚠️ A LINHA OCUPA A LARGURA TODA, e quem encolhe é o BALÃO.
   Parece detalhe e não é: com `justify-self` no .msg, ele vira um item de
   largura INDEFINIDA (encolhe ao conteúdo) - e aí o `max-width: 82%` do balão
   pede 82% de uma largura que depende do próprio balão. Dependência circular,
   e cada navegador a resolve de um jeito: o mesmo CSS deu balão largo aqui e
   estreito na tela de Ronaldo, com o texto quebrando em sete linhas.
   Com `width: 100%` na linha, o percentual passa a se resolver contra uma
   largura DEFINIDA, e o resultado é o mesmo em qualquer navegador. */
.msg { display: grid; gap: var(--e2); width: 100%; }
.msg__texto { max-width: 82%; }
.msg, .digita { grid-column: 1; }   /* todos na única coluna, sempre */
.msg--1 { grid-row: 1; }
.msg--2 { grid-row: 2; }
.msg--3 { grid-row: 3; }
.msg--4 { grid-row: 4; }
.msg--5 { grid-row: 5; }
/* ⚠️ O AGENTE FICA À DIREITA, e isso é uma decisão de ponto de vista.
   Num aplicativo, a direita é de quem está com o aparelho na mão. A primeira
   versão pôs o CLIENTE à direita - ou seja, mostrava a tela do celular do
   cliente final. Mas quem lê esta página é o DONO DO NEGÓCIO, e para ele o
   agente é o SEU lado: a tela tem de mostrar o atendimento como ele veria. */
/* ⚠️ Só `justify-items` (alinha o conteúdo DENTRO da linha). Nada de
   `justify-self` aqui: ele encolheria a linha e traria de volta a
   circularidade acima. */
.msg--agente  { justify-items: end; }
.msg--cliente { justify-items: start; }

/* quem está falando. Sem isto, dois tons de balão são só dois tons. */
.msg__quem {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-200);
}
.msg__quem svg { width: .875rem; height: .875rem; }
.msg--agente .msg__quem { color: var(--pink-300); }

.msg__texto {
  margin: 0;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-2);
  font-size: var(--t1);
  line-height: 1.45;
}
.msg--cliente .msg__texto {
  border: 1px solid rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .06);
  color: var(--navy-200);
  border-bottom-left-radius: var(--raio-1);
}
.msg--agente .msg__texto {
  border: 1px solid color-mix(in srgb, var(--pink-500) 40%, transparent);
  background: color-mix(in srgb, var(--pink-500) 16%, rgb(13 30 46 / .7));
  color: #FFFFFF;
  border-bottom-right-radius: var(--raio-1);
}
/* a última fala do agente vem emendada na anterior: mesma pessoa, sem repetir
   o cabeçalho - é o que um aplicativo de conversa faz */
.msg--5 { margin-top: calc(var(--e5) * -1 + var(--e2)); }

/* "digitando…" na MESMA célula do balão que vem depois */
.digita {
  align-self: start;
  justify-self: end;      /* o mesmo lado do agente, que é quem está digitando */
  display: inline-flex;
  gap: 5px;
  margin-top: 1.35rem;          /* alinha com o balão, abaixo do cabeçalho */
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-2);
  border: 1px solid rgb(255 255 255 / .1);
  background: rgb(255 255 255 / .05);
}
.digita--1 { grid-row: 2; }
.digita--2 { grid-row: 4; }
.digita i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-200); display: block; }

/* ── O estado inicial mora AQUI DENTRO, e só aqui ─────────────────────────
   Fora do @supports + @media, um `opacity: 0` faria a conversa sumir para quem
   não tem suporte ou pediu menos movimento - a assinatura exata do defeito que
   a invariante 8 impede. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation: none) {
    .msg, .digita { opacity: 0; }
    .msg--1 { animation: fala1 13s ease-out infinite; }
    .msg--2 { animation: fala2 13s ease-out infinite; }
    .msg--3 { animation: fala3 13s ease-out infinite; }
    .msg--4 { animation: fala4 13s ease-out infinite; }
    .msg--5 { animation: fala5 13s ease-out infinite; }
    .digita--1 { animation: digita1 13s ease-out infinite; }
    .digita--2 { animation: digita2 13s ease-out infinite; }
    .digita i { animation: pontinho 1.1s ease-in-out infinite; }
    .digita i:nth-child(2) { animation-delay: .18s; }
    .digita i:nth-child(3) { animation-delay: .36s; }
  }
}
/* Sem animação, "digitando" não indica nada: dois pares de pontinhos parados
   na conversa só confundem. Mesmo tratamento da capa de entrada. */
@media (prefers-reduced-motion: reduce) {
  .digita { display: none; }
}

/* Entram em sequência; somem todos juntos, no fim do ciclo.
   ⚠️ Uma animação só com `animation-delay` diferente NÃO serve em loop: o
   ciclo de cada balão ficaria deslocado e o primeiro reapareceria com o último
   ainda na tela. Por isso sete blocos com a MESMA duração. */
@keyframes fala1 {
  0%, 2%    { opacity: 0; transform: translateY(8px); }
  6%, 92%   { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes fala2 {
  0%, 17%   { opacity: 0; transform: translateY(8px); }
  21%, 92%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes fala3 {
  0%, 27%   { opacity: 0; transform: translateY(8px); }
  31%, 92%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes fala4 {
  0%, 45%   { opacity: 0; transform: translateY(8px); }
  49%, 92%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes fala5 {
  0%, 56%   { opacity: 0; transform: translateY(8px); }
  60%, 92%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes digita1 {
  0%, 9%    { opacity: 0; }
  12%, 16%  { opacity: 1; }
  18%, 100% { opacity: 0; }
}
@keyframes digita2 {
  0%, 36%   { opacity: 0; }
  39%, 44%  { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes pontinho {
  0%, 60%, 100% { transform: none;             opacity: .45; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

@media (max-width: 1023px) {
  .palco--conversa { display: grid; }
  .fone { width: min(22rem, 94%); margin-top: var(--e8); }
}
@media (min-width: 1024px) {
  /* ⚠️ `align-content: end`, não `center`: o aparelho tem de descer até PASSAR
     da borda de baixo da hero, para ser cortado por ela. Centrado, ele parava
     69 px antes e a moldura fechava dentro da tela - virava um cartão flutuando,
     que é exatamente o que estamos consertando.
     Só o eixo vertical: centrar no horizontal faria a trilha do grid encolher,
     e a largura em % passaria a se resolver contra ela. */
  .palco--conversa { display: grid; align-content: end; }
  /* ⚠️ Quanto ele desce NÃO PODE SER UM NÚMERO FIXO. O palco é centrado na
     hero, então a distância entre a base dele e a base da tela cresce com a
     altura da janela - medido: 80 px numa janela de 760 e 286 px numa de 1200,
     metade do espaço que sobra. Com margem fixa, o aparelho ora não alcançava
     a borda (janela alta) ora afogava a última fala (janela baixa).
     A conta abaixo mantém a base do aparelho ~24 px além da borda em qualquer
     altura: a distância é `50svh - 314px`, e somamos os 24 px do corte. */
  .fone { margin-bottom: calc(290px - 50svh); }
}

/* ── O menu que volta ao começo (seção "A diferença") ─────────────────────
   Peça de corpo, só desta página. O `lead` diz que os robôs comuns "repetem
   menu (…) e não sabem a hora de chamar gente": é isso, desenhado — por isso
   `aria-hidden`. Sem ponto percorrendo o traço: é a assinatura de Tráfego
   pago (SISTEMA-VISUAL §7). Três faixas: opções · calha · cabeça; as duas
   últimas atravessam as três linhas, então têm a mesma altura. O traço
   inclinado é a cunha do "X". Sem rosa: é o robô genérico que a seção
   critica. */
.contraste { display: grid; gap: var(--e7); }
.volta {
  display: grid;
  grid-template-columns: 7rem 2.5rem 6.5rem;
  grid-template-rows: repeat(3, auto);   /* explícitas: sem elas o `1 / -1` do
     laço e do robô prende os dois na primeira linha, e ela incha */
  column-gap: var(--e5);
  row-gap: var(--e3);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.volta__op {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--divisoria-cor);
  border-radius: var(--raio-1);
  background: var(--claro);
  color: color-mix(in srgb, var(--navy-900) 62%, #FFFFFF);
  font-size: var(--t1);
  font-variant-numeric: tabular-nums;
}
.volta__op::before {
  content: "";
  width: 4px; height: 14px;
  background: var(--divisoria-cor);
  transform: skewX(-38deg);
}
.volta__laco, .volta__bot { grid-row: 1 / -1; margin-block: 1.5rem; }
.volta__laco {
  grid-column: 2;
  position: relative;
  border: 2px solid var(--pink-500);
  border-left: 0;
  border-radius: 0 var(--raio-2) var(--raio-2) 0;
}
.volta__laco::after {   /* a seta, voltando para a primeira opção */
  content: "";
  position: absolute;
  top: -2px; left: -1px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--pink-500);
  border-left: 2px solid var(--pink-500);
  transform: rotate(-45deg);
  transform-origin: top left;
}
.volta__bot {
  grid-column: 3;
  align-self: stretch;
  width: 100%;
  height: auto;
  color: var(--divisoria-cor);   /* o mesmo traço da borda dos quadros */
}
@media (min-width: 1024px) {
  .contraste {
    grid-template-columns: var(--leitura) 1fr;
    align-items: center;
    gap: var(--e8);
  }
  .contraste .prosa { margin-top: 0; }
}