/* ==========================================================================
   A CONVERSA ACONTECENDO — estados da montagem bolha por bolha.
   Regra: o estado escondido SÓ existe quando o JS marcou data-pronto="0".
   Sem JS, sem CSS de animação, ou com falha do script, tudo fica visível.
   ========================================================================== */

/* no hero as anotações não cabem: a primeira dobra é curta e a conversa já diz isso.
   Elas continuam inteiras na seção de prova. */
.hero .conversa__notas { display: none; }
/* o balão do hero tinha 12px de texto — abaixo do piso de 14px do texto que decide
   (tokens.css) e um segundo tamanho para o mesmo componente. O fio já rola por dentro. */

.conversa__relogio {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--t-peq);
  color: var(--acento-claro);
  letter-spacing: 0.01em;
}
.conversa__escala {
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-4);
}

/* ESTADO DE ESPERA: a bolha que ainda não entrou NÃO OCUPA ESPAÇO.
   Antes ela ficava em opacity 0 guardando a altura final: o cartão nascia com
   1.000px+ de vazio e quem rolava devagar via caixas em branco — a animação só
   preenchia depois, e só para quem esperasse. Agora o cartão nasce com o
   cabeçalho e a primeira bolha e CRESCE conforme as bolhas entram, como uma
   conversa de verdade. O que se evita é o pulo da página abaixo, e disso cuida
   a ancoragem de rolagem do navegador; vazio nunca é o estado de repouso.
   Só vale com data-pronto (o JS marcou): sem JS tudo aparece inteiro. */
.conversa[data-pronto] .balao:not([data-entrou="1"]),
.conversa[data-pronto] .salto:not([data-entrou="1"]),
.conversa[data-pronto] .conversa__notas li:not([data-entrou="1"]) { display: none; }

.conversa .balao[data-entrou="1"] {
  animation: balaoEntrando 460ms var(--curva-entrada) both;
}
.conversa .conversa__notas li[data-entrou="1"] {
  animation: entrarComBlur 520ms var(--curva-entrada) both;
}
/* já tocou: tudo à mostra, sem depender de animação */
.conversa[data-tocou="1"] .balao,
.conversa[data-tocou="1"] .conversa__notas li { opacity: 1; }

/* sem altura reservada: o fio cresce com as bolhas (ver o bloco de espera acima) */
.conversa__fio { align-content: start; }

/* indicador de digitação entre as bolhas */
.digitando {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 12px 16px;
  border-radius: var(--raio-controle);
  background: var(--green-2);
  justify-self: end;
}
.digitando[data-lado="cliente"] {
  justify-self: start;
  background: var(--cream);
}
.digitando span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage-soft);
  animation: digitando 1.1s ease-in-out infinite;
}
.digitando[data-lado="cliente"] span { background: var(--muted, #6f7c77); }
.digitando span:nth-child(2) { animation-delay: 160ms; }
.digitando span:nth-child(3) { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .conversa[data-pronto="0"] .balao,
  .conversa[data-pronto="1"] .balao,
  .conversa[data-pronto="0"] .conversa__notas li,
  .conversa[data-pronto="1"] .conversa__notas li { opacity: 1 !important; animation: none !important; }
  .digitando { display: none !important; }
  .digitando span { animation: none !important; }
}

/* ==========================================================================
   A DOR PRIMEIRO — uma linha acima de cada conversa, na língua do empresário
   ========================================================================== */
.conversa__dor {
  margin: 0 0 var(--esp-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--acento-claro);
}

/* ==========================================================================
   O SALTO — o recorte não é contínuo, e diz quanto pulou e o que ficou fora
   ========================================================================== */
.salto {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-block: 2px;
  padding-block: 6px;
  color: var(--texto-4);
}
.salto::before, .salto::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--borda), transparent);
}
.salto__tempo {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda-sutil);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texto-3);
  white-space: nowrap;
}
/* [12] com flex:none o resumo nao encolhia e a linha do salto transbordava a
   conversa em 17px. Ele pode encolher e quebrar; quem nao encolhe e a pilula
   do tempo, que e curta e precisa ficar inteira. */
.salto__resumo {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--t-micro);
  line-height: 1.35;
  color: var(--texto-4);
  max-width: 20ch;
}
@media (max-width: 639px) {
  .salto { flex-wrap: wrap; justify-content: center; text-align: center; }
  .salto::before, .salto::after { flex-basis: 100%; }
  .salto__resumo { max-width: none; }
}

/* o salto entra junto com o resto da montagem (escondido: bloco de espera acima) */
.conversa .salto[data-entrou="1"] { animation: entrarComBlur 420ms var(--curva-entrada) both; }

@media (prefers-reduced-motion: reduce) {
  .conversa[data-pronto="0"] .salto,
  .conversa[data-pronto="1"] .salto { opacity: 1 !important; animation: none !important; }
}