/* ===========================================================================
   Chat vendedor — a tela.
   Contrato: Code/chat-vendedor-contrato.md (12/10/2026).

   A tela imprime o que recebe. Nenhuma regra de negocio mora aqui: preco,
   data, prazo, total e link chegam prontos do sistema. O CSS abaixo so
   decide aparencia, e os unicos numeros que ele conhece sao de layout.

   Herda os tokens de styles.css (--accent, --paper, --surface-dark...).
   =========================================================================== */

.chat {
  --chat-largura: 400px;
  --chat-altura: 620px;
  --chat-fundo: #141414;
  --chat-superficie: #1E1E1E;
  --chat-borda: #343434;
  --chat-texto: var(--paper, #FAF9F6);
  --chat-texto-fraco: #A8A8A8;
  --chat-raio: 14px;

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  font-family: var(--font-body, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.chat *,
.chat *::before,
.chat *::after { box-sizing: border-box; }

/* --- o botao fechado ---------------------------------------------------- */

.chat__gatilho {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-left: auto;
  border: 0;
  border-radius: 16px;
  background: var(--accent, #1B54E0);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(27, 84, 224, 0.35);
  transition: transform 160ms var(--ease, ease), background 160ms var(--ease, ease);
}

.chat__gatilho:hover { background: var(--accent-hover, #103FB4); transform: translateY(-2px); }
.chat__gatilho:focus-visible { outline: 3px solid var(--accent-light, #5C93FF); outline-offset: 3px; }
.chat__gatilho svg { width: 26px; height: 26px; }

/* --- o convite ---------------------------------------------------------- */

.chat__convite {
  position: relative;
  width: 320px;
  margin: 0 0 14px auto;
  padding: 18px 40px 18px 20px;
  border-radius: var(--chat-raio);
  background: #fff;
  color: #1A1A1A;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: chat-sobe 280ms var(--ease, ease) both;
}

@keyframes chat-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat__convite { animation: none; } }

.chat__convite-titulo { margin: 0 0 6px; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.chat__convite-texto { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.5; color: #4A4A4A; }

.chat__convite-acao {
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  background: var(--accent, #1B54E0);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.chat__convite-acao:hover { background: var(--accent-hover, #103FB4); }

.chat__convite-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: #6A6A6A;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.chat__convite-x:hover { background: #ECECEC; color: #1A1A1A; }

/* --- a janela ----------------------------------------------------------- */

.chat__janela {
  display: flex;
  flex-direction: column;
  width: var(--chat-largura);
  height: var(--chat-altura);
  max-height: calc(100vh - 48px);
  border: 1px solid var(--chat-borda);
  border-radius: var(--chat-raio);
  background: var(--chat-fundo);
  color: var(--chat-texto);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

/* O TOPO: so o escudo e "Atendimento automatico" (decisao de 12/10/2026). O
   mockup trazia "Atendimento automatico" sobre "Benassi Protecao de Marcas";
   o combinado final e o escudo sozinho. */
.chat__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 12px 14px;
  border-bottom: 1px solid var(--chat-borda);
  background: var(--chat-superficie);
}

.chat__escudo { width: 26px; height: 26px; flex: none; color: var(--chat-texto); }
.chat__escudo svg { width: 100%; height: 100%; display: block; }
.chat__titulo { font-size: 0.9rem; font-weight: 600; margin: 0; line-height: 1.15; }

.chat__topo-acoes { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
/* O TITULO CEDE O ESPACO: sem isto o X, o ultimo da fila, saia da janela de 400px e ninguem o via
   (medido com o chat aberto no computador). */
.chat__titulo { min-width: 0; }

.chat__x {
  width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--chat-texto);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat__x:hover { background: #2C2C2C; }
.chat__x:focus-visible { outline: 3px solid var(--accent-light, #5C93FF); outline-offset: 1px; }

/* --- a conversa --------------------------------------------------------- */

.chat__conversa {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

/* FLEX-SHRINK ZERO EM TUDO O QUE ENTRA NA CONVERSA. Sem isto o cartao vira uma
   faixa de 2px assim que a conversa passa da altura da janela: item de flex
   encolhe por padrao, e `align-self: stretch` so governa a largura. Medido na
   bancada, nao deduzido -- o cartao estava no DOM, com 358px de filhos, e 2px
   de altura. */
.chat__conversa > * { flex: none; }

.chat__msg { max-width: 86%; font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__msg--casa { align-self: flex-start; color: var(--chat-texto); }

.chat__msg--pessoa {
  align-self: flex-start;
  color: var(--chat-texto);
  border-left: 2px solid var(--accent-light, #5C93FF);
  padding-left: 10px;
}

.chat__msg--eu {
  align-self: flex-end;
  background: var(--accent, #1B54E0);
  color: #fff;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
}

.chat__aguardando { display: flex; align-items: center; gap: 8px; color: var(--chat-texto-fraco); font-size: 0.88rem; }
.chat__pontos { display: inline-flex; gap: 3px; }
.chat__pontos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: chat-pisca 1.2s infinite; }
.chat__pontos i:nth-child(2) { animation-delay: 0.18s; }
.chat__pontos i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-pisca { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat__pontos i { animation: none; opacity: 0.6; } }

.chat__erro {
  align-self: stretch;
  border: 1px solid #6A4A1E;
  background: #2A2113;
  color: #F0D7A8;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.87rem;
  line-height: 1.5;
}

/* --- cartoes ------------------------------------------------------------ */

.chat__cartao {
  align-self: stretch;
  border: 1px solid var(--chat-borda);
  border-radius: 10px;
  background: var(--chat-superficie);
  overflow: hidden;
}

.chat__cartao-topo { padding: 13px 14px 11px; border-bottom: 1px solid var(--chat-borda); }
.chat__cartao-etiqueta { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-light, #5C93FF); font-weight: 700; }
.chat__cartao-titulo { margin: 4px 0 0; font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }
.chat__cartao-sub { font-size: 0.8rem; color: var(--chat-texto-fraco); margin-top: 2px; }
.chat__cartao-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* resultado da consulta */
.chat__quantos { font-size: 0.86rem; color: var(--chat-texto-fraco); }

.chat__achado { border-left: 2px solid var(--chat-borda); padding: 2px 0 2px 10px; }
.chat__achado--aberto { border-left-color: #E0A526; }
.chat__achado-marca { font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.chat__achado-linha { font-size: 0.82rem; color: var(--chat-texto-fraco); margin-top: 1px; }
.chat__prazo { font-size: 0.82rem; margin-top: 3px; }
.chat__prazo--aberto { color: #E0A526; font-weight: 600; }
.chat__prazo--encerrado { color: var(--chat-texto-fraco); }

.chat__aviso { font-size: 0.78rem; line-height: 1.5; color: var(--chat-texto-fraco); border-left: 2px solid var(--chat-borda); padding-left: 10px; }

/* ativacao */
.chat__preco { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.chat__preco-valor { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
.chat__preco-nota { font-size: 0.82rem; color: var(--chat-texto-fraco); }
.chat__marcas { font-size: 0.86rem; color: var(--chat-texto-fraco); }
.chat__total { font-size: 0.92rem; font-weight: 600; }

.chat__oferta { border: 1px solid var(--accent-tint-border, rgba(92,147,255,0.42)); background: var(--accent-tint-bg, rgba(92,147,255,0.1)); border-radius: 8px; padding: 10px 12px; font-size: 0.86rem; line-height: 1.5; }

.chat__termos { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; line-height: 1.5; color: var(--chat-texto-fraco); }

/* whatsapp */
.chat__resumo { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; line-height: 1.5; }
.chat__numero { font-size: 0.9rem; font-weight: 600; }

/* --- botoes ------------------------------------------------------------- */

.chat__botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.chat__botao {
  border: 1px solid var(--chat-borda);
  border-radius: 8px;
  padding: 9px 14px;
  background: transparent;
  color: var(--chat-texto);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}
.chat__botao:hover { background: #2C2C2C; }
.chat__botao:disabled { opacity: 0.5; cursor: default; }

.chat__botao--destaque, .chat__cta {
  border-color: transparent;
  background: var(--accent, #1B54E0);
  color: #fff;
  font-weight: 600;
}
.chat__botao--destaque:hover, .chat__cta:hover { background: var(--accent-hover, #103FB4); }

.chat__cta { display: block; width: 100%; text-align: center; padding: 12px 16px; text-decoration: none; font-size: 0.93rem; }

/* --- o pe --------------------------------------------------------------- */

.chat__pe { border-top: 1px solid var(--chat-borda); background: var(--chat-superficie); padding: 10px 14px 12px; }

.chat__campo { display: flex; gap: 8px; align-items: flex-end; }

.chat__entrada {
  flex: 1;
  border: 1px solid var(--chat-borda);
  border-radius: 9px;
  background: #121212;
  color: var(--chat-texto);
  font: inherit;
  font-size: 0.9rem;
  padding: 11px 12px;
  resize: none;
  max-height: 120px;
  line-height: 1.45;
}
.chat__entrada::placeholder { color: #767676; }
.chat__entrada:focus-visible { outline: 2px solid var(--accent-light, #5C93FF); outline-offset: 1px; }

.chat__etiqueta { display: block; font-size: 0.78rem; color: var(--chat-texto-fraco); margin-bottom: 6px; }

.chat__enviar {
  flex: none;
  width: 42px; height: 42px;
  border: 0; border-radius: 9px;
  background: var(--accent, #1B54E0); color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat__enviar:hover { background: var(--accent-hover, #103FB4); }
.chat__enviar:disabled { opacity: 0.45; cursor: default; }
.chat__enviar svg { width: 18px; height: 18px; }

.chat__linha-fixa { margin-top: 9px; font-size: 0.72rem; line-height: 1.45; color: #8A8A8A; text-align: center; }
.chat__cnpj { display: block; margin-top: 2px; }

.chat__aviso-equipe { margin-top: 7px; font-size: 0.78rem; line-height: 1.45; color: var(--chat-texto-fraco); }

/* --- o aviso do aceite --------------------------------------------------- */
/*
   ELE FICA NO PE, ACIMA DO CAMPO, e nao no meio da conversa. Posto como bolha,
   ele rolaria para cima com o resto e a pessoa voltaria a digitar sem ve-lo --
   e um aviso que sai de vista nao e "em destaque", que e o que o artigo 33 da
   LGPD pede do consentimento da transferencia.

   SEM FUNDO DE ALERTA, sem amarelo, sem icone de perigo. Isto nao e um erro: e
   uma informacao que a pessoa precisa ler uma vez. Pintar de alarme ensinaria
   que o chat e perigoso, e ele nao e.
*/
.chat__aceite {
  margin-bottom: 10px;
  padding: 12px 13px;
  border: 1px solid var(--chat-borda);
  border-radius: 10px;
  background: var(--chat-fundo);
}

.chat__aceite-texto {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--chat-texto);
}

/* Cada paragrafo do aviso e uma linha propria (v3, 14/10/2026). O do envio a Anthropic ("sai do
   Brasil") vem em negrito: a transferencia internacional tem de estar a vista, distinta das outras
   frases (LGPD, art. 33, VIII). */
.chat__aceite-texto + .chat__aceite-texto { margin-top: 8px; }
.chat__aceite-destaque { font-weight: 700; }

.chat__aceite-politica {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--chat-texto-fraco);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat__aceite-politica:hover { color: var(--chat-texto); }

.chat__aceite-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.chat__aceite-sim, .chat__aceite-pessoa {
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.chat__aceite-sim {
  flex: 1 1 auto;
  border: 1px solid transparent;
  background: var(--accent, #1B54E0);
  color: #fff;
  font-weight: 600;
}
.chat__aceite-sim:hover { background: var(--accent-hover, #103FB4); }

/* O SEGUNDO CAMINHO TEM DE PARECER UM CAMINHO. Ele e a prova de que o aceite e
   livre: sem uma saida visivel, o "sim" nao e escolha, e consentimento que nao
   e livre nao vale (LGPD, art. 8). Por isso ele e um botao de verdade, com a
   mesma altura, e nao um link cinza no rodape. */
.chat__aceite-pessoa {
  flex: 1 1 auto;
  border: 1px solid var(--chat-borda);
  background: transparent;
  color: var(--chat-texto);
}
.chat__aceite-pessoa:hover { background: #2C2C2C; }

.chat__aceite-sim[disabled], .chat__aceite-pessoa[disabled] { opacity: 0.55; cursor: default; }

/* --- celular ------------------------------------------------------------ */

@media (max-width: 560px) {
  .chat { right: 14px; bottom: 14px; left: 14px; }
  /* O BOTAO DO CHAT AO LADO DO BOTAO DA PAGINA (celular, desenho do Ederson em 13/10/2026). So vale
     numa pagina que marca o botao com `data-chat-ao-lado` e so quando o chat.js mediu que ele cabe
     inteiro na primeira tela. O botao da pagina termina 58px antes da borda (50 do chat + 8 de vao
     + 5 da margem do chat, que e 19 contra os 24 da coluna: medido no desenho), o chat fica na
     mesma linha, com a MESMA ALTURA do botao (o chat.js a le do botao), o mesmo azul e o mesmo canto.
     A POSICAO E A DA PAGINA NO TOPO: com a rolagem o botao do chat fica onde esta, como todo botao
     flutuante. */
  .chat--ao-lado { right: 19px; left: 14px; }
  .chat--ao-lado .chat__gatilho {
    width: 50px;
    border-radius: var(--radius, 10px);
    background: var(--accent, #1B54E0);
    box-shadow: none;
  }
  .chat--ao-lado .chat__gatilho svg { width: 24px; height: 24px; }
  body.chat-ao-lado [data-chat-ao-lado].btn {
    /* termina 8px antes do chat: borda da tela - 19 (margem do chat) - 50 (chat) - 8 (vao) = 77px, e a
       coluna comeca a 24px */
    width: min(100%, calc(100vw - 101px));
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }
  /* `.btn` NA REGRA: a regra da pagina (`.hero--with-visual .hero__aside .btn`, 3 classes) fixava o tamanho da
     letra e o respiro e vencia a nossa; com `.btn[data-chat-ao-lado]` a nossa tem 3 classes e vem depois. */
  /* A 320px o botao tem 219px e o texto, a 15px, pede ~243 com o respiro: sem isto ele quebra em duas
     linhas. Abaixo de 344px a letra desce para 13.5px (e o respiro para 8px), o suficiente para uma linha. */
  @media (max-width: 343px) {
    body.chat-ao-lado [data-chat-ao-lado].btn { font-size: 13.5px; padding-left: 8px; padding-right: 8px; }
  }
  .chat__convite { width: auto; }
  .chat__janela {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  /* no celular o topo e disputado: o rotulo encolhe para "Atendimento automatico"
     caber numa linha so. Medido a 375px. */
  .chat__topo { padding: 8px 6px 8px 10px; gap: 8px; }
  /* O titulo pode quebrar em duas linhas: o X precisa de 44px de area de toque. */
  .chat__titulo { font-size: 0.9rem; }
  .chat__x { width: 44px; height: 44px; font-size: 28px; }
  /* A 375px os dois botoes do aceite lado a lado deixam cada um com 150px, e
     "Falar com uma pessoa" quebra em tres linhas. Empilhados, cada um fica
     inteiro e o "Aceito e continuar" continua sendo o primeiro que o polegar
     alcanca. */
  .chat__aceite-acoes { flex-direction: column; }
  .chat__aceite-sim, .chat__aceite-pessoa { width: 100%; }
}

.chat--aberto .chat__gatilho { display: none; }
.chat[hidden] { display: none; }

/* `display: flex` do autor VENCE o `display: none` que o atributo `hidden`
   traz da folha do navegador. Sem esta linha a janela fechada aparecia como um
   retangulo preto vazio por cima da pagina -- visto na bancada, nao deduzido. */
.chat__janela[hidden] { display: none; }