/* =========================================================================
   ATENDENTE — bolinha flutuante + janela de conversa
   -------------------------------------------------------------------------
   O widget nasceu num checkout de tema VERDE e fala nos tokens de lá
   (`--verde`, `--texto`, `--fundo`). Esta página tem outra paleta, e uma
   atendente com a cara de outro produto é a coisa mais rápida de notar.

   Em vez de reescrever o arquivo inteiro — e criar uma segunda versão dele
   para manter —, a ponte abaixo APELIDA os tokens desta LP com os nomes que
   o widget espera. Trocar a cor da marca aqui muda a atendente junto, sem
   ninguém lembrar de vir neste arquivo.
   ========================================================================= */
:root{
  --verde:var(--acao-forte);      /* o tom firme: cabeçalho e balão do lead */
  --verde-vivo:var(--acao);       /* o tom vivo: bolinha e pontinho de online */
  --verde-esc:var(--tinta);       /* o fim do gradiente do cabeçalho */
  --texto:var(--tinta);
  --fundo:var(--papel-2);
  /* As sombras e o pulso do "online" estavam em rgba() cravado — mesmo
     problema, um passo mais escondido, porque cor cravada não aparece numa
     busca por `--verde`. */
  --at-sombra:rgba(232,68,63,.42);
  --at-sombra-forte:rgba(232,68,63,.52);
  --at-pulso:rgba(232,68,63,.5);
  /* Tons claros de apoio: o widget os usava com fallback verde no
     próprio `var()`, que a ponte não alcança — fallback só entra quando
     o token NÃO existe, e existir com o valor errado é pior. */
  --verde-neve:var(--acao-clara);
  --verde-luz:var(--acao-clara);
  --valor:var(--acao);
}

/* ---------- bolinha ------------------------------------------------------ */
.at-bolha{
  position:fixed;right:16px;z-index:9990;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  /* Cor da MARCA da oferta, não verde fixo: o widget nasceu no LotoApp e
     levava o verde dele para o checkout coral e para o neon do BTV — uma
     atendente com a cara de outro produto. */
  background:linear-gradient(160deg,var(--verde-vivo,#22c55e),var(--verde,#15803d));
  box-shadow:0 6px 20px var(--at-sombra), 0 2px 6px rgba(0,0,0,.2);
  cursor:grab;touch-action:none;                 /* touch-action: o arraste é nosso */
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, opacity .18s;
}
.at-bolha:hover{transform:scale(1.06)}
/* Escondida enquanto o formulário de doação está na tela. `visibility` junto
   de `opacity` para o botão não continuar clicável enquanto invisível — só a
   opacidade deixaria um alvo fantasma por cima do campo de e-mail. */
.at-bolha.at-oculta{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.8) translateX(12px);
}
.at-bolha:active{cursor:grabbing}
.at-bolha.arrastando{transition:none;transform:scale(1.1);box-shadow:0 10px 30px var(--at-sombra-forte)}
.at-bolha img{width:100%;height:100%;border-radius:50%;object-fit:cover;padding:3px}

/* pontinho verde de "online" */
.at-online{
  position:absolute;right:2px;bottom:2px;width:15px;height:15px;border-radius:50%;
  background:var(--verde-vivo,#22c55e);border:2.5px solid #fff;
}
.at-online::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--at-pulso);animation:at-pulso 2s ease-out infinite;
}
@keyframes at-pulso{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* balãozinho que chama na primeira vez */
/* O balão é posicionado pelo CENTRO da bolinha: o JS manda o centro em `top`
   e o translateY(-50%) desconta a própria altura. Posicionar pelo topo (como
   antes) jogava o balão para baixo da bolinha, porque a altura dele varia com
   o texto e com a quebra de linha em cada idioma. */
.at-isca{
  position:fixed;right:86px;z-index:9989;max-width:186px;
  transform:translateY(-50%);
  background:var(--papel,#fff);color:var(--texto,#1c2620);
  padding:10px 13px;border-radius:14px;
  font-size:13px;font-weight:650;line-height:1.35;
  box-shadow:0 6px 22px rgba(15,23,19,.18);
  animation:at-entra .3s cubic-bezier(.22,1,.36,1) both;
}
/* bico apontando para a bolinha, sempre na altura do meio do balão */
.at-isca::after{
  content:'';position:absolute;right:-6px;top:50%;
  width:12px;height:12px;background:inherit;
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
}
/* a animação precisa CARREGAR o translateY(-50%): um `transform:none` no fim
   do keyframe apagaria a centralização e o balão saltaria para baixo. */
@keyframes at-entra{
  from{opacity:0;transform:translate(10px,-50%) scale(.94)}
  to{opacity:1;transform:translateY(-50%)}
}

/* ---------- janela ------------------------------------------------------- */
.at-fundo{
  position:fixed;inset:0;z-index:9995;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;
  background:rgba(6,20,12,.45);backdrop-filter:blur(5px);
  animation:at-fade .2s ease-out both;
}
@keyframes at-fade{from{opacity:0}to{opacity:1}}

/* ALTURA — a janela usa a tela, em vez de um teto fixo.
   Era `min(560px, 86vh)`: num celular de 844px o calculo dava min(560, 726) e
   os 560 sempre ganhavam. A janela nunca crescia, por maior que fosse a tela —
   e conversa de venda em caixinha pequena obriga o lead a rolar para reler o
   que ela acabou de dizer (preco, prazo, o que vem no kit).

   `dvh` e nao `vh`: no iPhone o `vh` ignora a barra do navegador, entao a
   folha nasce maior que o espaco visivel e o rodape com o campo de digitar
   fica FORA da tela. A primeira linha e o fallback para navegador antigo. */
.at-janela{
  display:flex;flex-direction:column;width:100%;max-width:392px;
  height:min(760px, calc(100vh - 32px));
  height:min(760px, calc(100dvh - 32px));
  background:var(--papel,#fff);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.4);
  animation:at-sobe .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes at-sobe{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

.at-topo{
  display:flex;align-items:center;gap:11px;padding:13px 14px;
  background:linear-gradient(160deg,var(--verde,#15803d),var(--verde-esc,#0b4a24));color:#fff;flex:0 0 auto;
}
.at-avatar{width:42px;height:42px;border-radius:50%;position:relative;flex:0 0 auto}
.at-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3)}
.at-topo-txt{flex:1;min-width:0}
.at-topo-nome{font-size:15px;font-weight:800;line-height:1.2}
.at-topo-status{
  font-size:12px;color:rgba(255,255,255,.82);display:flex;align-items:center;gap:5px;margin-top:1px;
}
.at-ponto{width:7px;height:7px;border-radius:50%;background:#4ade80;flex:0 0 auto}
.at-fechar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);flex:0 0 auto;
}
.at-fechar:hover{color:#fff;background:rgba(255,255,255,.22)}

/* ---------- mensagens ---------------------------------------------------- */
.at-corpo{
  flex:1;overflow-y:auto;padding:16px 14px;
  background:var(--fundo,#f7f9f8);
  display:flex;flex-direction:column;gap:9px;
  overscroll-behavior:contain;
}
/* Mensagens ancoradas EMBAIXO, como em qualquer app de conversa. Com a janela
   alta, a saudacao sozinha ficava colada no topo com um vazio de 400px ate o
   campo de digitar — parecia conversa abandonada, no lugar de comeco de papo.

   O espacador com `margin-top:auto` faz isso sem `justify-content:flex-end`,
   que em caixa rolavel deixa as mensagens antigas inalcancaveis quando o
   conteudo passa da altura: o topo some e nao ha como rolar ate ele. */
.at-corpo::before{ content:''; margin-top:auto }
.at-msg{
  max-width:82%;padding:10px 13px;font-size:14.2px;line-height:1.45;
  border-radius:16px;animation:at-msg .22s ease-out both;word-wrap:break-word;
}
@keyframes at-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.at-msg.dela{
  align-self:flex-start;background:var(--papel,#fff);color:var(--texto,#1c2620);
  border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(15,23,19,.07);
}
.at-msg.minha{
  align-self:flex-end;background:var(--verde,#15803d);color:#fff;
  border-bottom-right-radius:5px;
}
.at-msg.erro{align-self:center;background:#fef2f2;color:#991b1b;font-size:13px;text-align:center}

/* "digitando" */
.at-digita{
  align-self:flex-start;display:flex;gap:4px;padding:13px 15px;
  background:var(--papel,#fff);border-radius:16px;border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(15,23,19,.07);
}
.at-digita i{
  width:7px;height:7px;border-radius:50%;background:#9aa8a0;display:block;
  animation:at-salta 1.3s ease-in-out infinite;
}
.at-digita i:nth-child(2){animation-delay:.16s}
.at-digita i:nth-child(3){animation-delay:.32s}
@keyframes at-salta{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* atalhos de pergunta */
/* Faixa TRANSPARENTE. Ela usava `var(--fundo)` — token que não existe neste
   design system — e caía no fallback branco, desenhando uma tira clara atrás
   dos atalhos que aparecia em qualquer tema, e gritava no escuro. */
/* A faixa dos atalhos pertence ao RODAPÉ, não à conversa: leva a mesma cor da
   barra de envio e se separa do corpo por uma linha. Com o fundo igual ao da
   conversa, as pílulas pareciam mensagens soltas no fim do papo. */
.at-atalhos{
  display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px 4px;
  background:var(--papel,#fff);border-top:1px solid var(--linha,#e4e9e5);
}
.at-atalho{
  padding:8px 12px;border-radius:999px;font-size:12.8px;font-weight:650;
  /* o próprio botão também não pinta fundo sólido: acompanha a bolha do chat
     em vez de recortar um retângulo claro sobre ela */
  background:var(--papel,#fff);border:1px solid var(--linha,#e4e9e5);color:var(--texto,#1c2620);
  transition:border-color .16s,background .16s;
}
.at-atalho:hover{border-color:var(--verde,#15803d);background:var(--acao-clara)}

/* ---------- barra de envio ----------------------------------------------- */
.at-pe{
  display:flex;align-items:flex-end;gap:8px;padding:11px 12px;flex:0 0 auto;
  background:var(--papel,#fff);
}
/* sem atalhos na tela, o rodapé precisa da própria linha de separação */
.at-atalhos:empty + .at-pe,
.at-corpo + .at-pe{ border-top:1px solid var(--linha,#e4e9e5) }
.at-atalhos:empty{ display:none }
.at-input{
  flex:1;min-height:42px;max-height:96px;padding:11px 14px;
  border:1.5px solid var(--linha,#e4e9e5);border-radius:20px;resize:none;
  font-size:16px;font-family:inherit;line-height:1.35;background:var(--papel,#fff);
}
.at-input:focus{outline:none;border-color:var(--verde,#15803d);box-shadow:0 0 0 3px var(--acao-clara)}
.at-enviar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--verde,#15803d);color:#fff;transition:opacity .16s,transform .12s;
}
.at-enviar:disabled{opacity:.4}
.at-enviar:not(:disabled):active{transform:scale(.93)}

.at-rodape{
  padding:0 14px 9px;font-size:10.8px;color:var(--suave,#5b6b62);
  text-align:center;background:var(--papel,#fff);
}

@media(min-width:900px){
  .at-fundo{background:rgba(6,20,12,.3);padding:22px}
  /* No desktop a janela nao encosta no topo de proposito: ela flutua sobre o
     checkout, e o lead precisa continuar vendo o produto e o total atras dela.
     Mais alta que antes, sem virar uma coluna que toma a tela inteira. */
  .at-janela{ height:min(720px, calc(100dvh - 44px)) }
}
@media(prefers-reduced-motion:reduce){
  .at-fundo,.at-janela,.at-msg,.at-isca{animation:none}
  .at-online::after{animation:none}
}

/* Atalho sugerido pela atendente. Fica como bolha própria, alinhada à
   esquerda (é dela), com cara de ação e não de mensagem — o lead precisa
   distinguir "ela disse" de "eu posso clicar". */
.at-acao{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  margin:-2px 0 4px; padding:8px 14px;
  border-radius:999px;
  background:var(--acao); color:#fff;
  font-size:13px; font-weight:800; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  transition:filter .18s, transform .14s;
}
.at-acao:hover{ filter:brightness(1.08) }
.at-acao:active{ transform:scale(.97) }

/* =========================================================================
   CARDS DENTRO DA CONVERSA
   -------------------------------------------------------------------------
   Cupons, opções de entrega e kits aparecem AQUI, não numa folha atrás do
   chat. O lead pediu para a atendente: é ela quem tem que responder, com o
   que dá para clicar na mesma tela.

   Alinhados à esquerda como as falas dela — são conteúdo da resposta, e não
   um menu do sistema. Por isso o mesmo recuo das bolhas.
   ========================================================================= */
.at-cards{
  display:flex; flex-direction:column; gap:7px;
  align-self:flex-start; max-width:88%; margin:2px 0 4px;
}
.at-card{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 13px; border-radius:14px; text-align:left;
  background:var(--papel); border:1.5px solid var(--linha);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:border-color .18s, transform .16s cubic-bezier(.22,1,.36,1), box-shadow .18s;
}
.at-card:hover:not(:disabled){ border-color:var(--verde); transform:translateY(-1px);
                               box-shadow:0 4px 12px rgba(0,0,0,.09) }
.at-card:active:not(:disabled){ transform:translateY(0) scale(.99) }
.at-card:focus-visible{ outline:2px solid var(--verde); outline-offset:2px }

.at-card-tx{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0 }
.at-card-tx b{ font-size:14px; font-weight:750; color:var(--texto); line-height:1.25 }
.at-card-det{ font-size:12.2px; color:var(--suave); line-height:1.3 }

/* O valor é o que decide a escolha: peso e cor de dinheiro, sempre verde,
   como manda o padrão do checkout. */
.at-card-val{ flex:0 0 auto; font-size:14px; font-weight:800; color:var(--valor,var(--verde)) }
.at-card-val.forte{ font-size:16px }

.at-card-tag{
  flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 7px; border-radius:999px;
  background:var(--verde-luz); color:var(--verde);
}

/* Já escolhido: fica na lista, marcado, em vez de sumir — o lead precisa ver
   qual é o atual para decidir se troca. */
.at-card.atual{ border-color:var(--verde); background:var(--verde-neve) }

/* Bloqueado (cupom com mínimo não atingido, por exemplo): continua VISÍVEL e
   diz o porquê. Esconder o cupom que ele quase alcançou joga fora o melhor
   motivo que existe para ele aumentar o carrinho. */
.at-card.bloq{ opacity:.62; cursor:not-allowed }
.at-card.bloq:hover{ transform:none; box-shadow:0 1px 2px rgba(0,0,0,.05) }
.at-card-motivo{ font-size:11.5px; font-weight:700; color:var(--ambar,#b45309) }

@media (prefers-reduced-motion: reduce){ .at-card{ transition:none } }