/* ===================================================================
   Refúgio Tech — chat-widget.css
   Widget do agente conversacional "Bússola" (piloto Segmento A).
   Usa só os design tokens já definidos em styles.css (:root) — não
   redefine paleta/tipografia, só aplica.

   REDESIGN (rodada de UX): deixou de ser um painel flutuante escondido
   no canto da tela, só acessível depois de rolar a página toda. Agora
   mora embutido na própria hero de /bussola, em fluxo normal de
   documento (sem position:fixed) — o botão "Falar com a Bússola" já
   aparece no primeiro viewport e expande o chat ali mesmo. Visual
   inspirado nas telas de novo chat de produtos como Claude/ChatGPT/
   Gemini: card único, mensagens com bolhas, sugestões clicáveis no
   estado vazio, campo de texto fixo na base do card.

   REDESIGN (rodada 29, 2026-10-07) — alinhamento com o site institucional
   em construção (ver ativos/marca/propostas-site-2026-10/pagina-inicial-
   final-2026-10.html, repositório Consultoria, só leitura/referência):
   direção híbrida aprovada pelo fundador — claro por padrão (nenhuma
   mudança na paleta nem no layout geral do painel), com tratamento mono
   (--font-mono, JetBrains Mono, token novo em styles.css) só nos
   elementos que sinalizam "produto rodando" — rótulo de status no
   cabeçalho, rótulo "respondendo…" do indicador de digitação, label de
   sugestões (prefixo "//", mesmo idioma visual do eyebrow da seção
   escura do site institucional) e nome de arquivo do anexo (dado
   técnico). O CORPO DA CONVERSA (bolhas de mensagem) continua só em
   Roboto — mono fica reservado à "casca" do produto, nunca ao texto que
   o PME lê, para não prejudicar legibilidade. Ponto decorativo também
   alinhado: o dot de status do cabeçalho trocou de um verde solto
   (#6fbf8b, fora da paleta) para --amarelo-suave (acento da marca).
   Nenhuma mudança de funcionalidade (gate de escalonamento, chips,
   anexo, Turnstile, fullscreen mobile) — só CSS/JS de apresentação.
   =================================================================== */

.chat-widget {
  position: relative;
  font-family: var(--font-body, Roboto, sans-serif);
}

/* ---------- Estado 1: launcher (antes de abrir) ----------
   Desenhado para parecer um campo de entrada de chat já pronto para
   uso — comunica "é só escrever" com um clique, não "é um botão de
   abrir painel". */
.chat-widget__launcher {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-3);
  /* modernização rodada 6: raio maior, no mesmo registro das referências
     (campo de entrada em pílula bem arredondada). */
  border-radius: var(--radius-lg, 24px);
  border: 1px solid rgba(69, 82, 89, 0.16);
  background: #fff;
  color: var(--preto-antifragil);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-soft, 0 16px 40px rgba(38, 46, 51, 0.1));
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.chat-widget__launcher:hover,
.chat-widget__launcher:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(38, 46, 51, 0.16);
  border-color: var(--verde-pastel);
}

.chat-widget__launcher-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde-pastel);
  color: var(--preto-antifragil);
}

.chat-widget__launcher-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-widget__launcher-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--preto-antifragil);
}
.chat-widget__launcher-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px). Texto é mais longo ("Sem cadastro · conversa privada ·
     resposta na hora"); a 16px pode ocupar 2 linhas no launcher — aceitável
     (container é flex, cresce em altura; confirmado na checagem visual). */
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--cinza-chumbo);
  opacity: 0.8;
}

.chat-widget__launcher-arrow {
  flex: none;
  font-size: 1.1rem;
  color: var(--cinza-chumbo);
}

.chat-widget.is-open .chat-widget__launcher,
.chat-widget.is-closing .chat-widget__launcher {
  /* .is-closing (ver chat-widget.js, fecharPainel): mantém o launcher
     escondido durante todo o fade-out do painel, não só enquanto
     .is-open está presente. root.is-open sai IMEDIATAMENTE no início do
     fechamento (pra manter a lógica de abrir/fechar simples no resto do
     arquivo) — sem essa regra extra, o launcher reapareceria no fluxo do
     layout NO MEIO da transição de saída do painel, criando um salto de
     layout bem no momento que este ajuste existe pra evitar. */
  display: none;
}

/* ---------- Estado 2: painel aberto ----------
   Ajuste de UX (pedido do fundador pós-revisão em produção, pós-deploy do
   commit 917a4da): abrir/fechar trocava de estado instantaneamente (o
   [hidden] nativo some/aparece sem transição — display:none não anima).
   Agora o painel só ganha [hidden] (sai do layout de vez) DEPOIS que a
   transição de SAÍDA termina (ver chat-widget.js: fecharPainel remove a
   classe .is-open do painel na hora, mas só aplica hidden=true no fim —
   onPanelFechouTransicao/finalizarFechamentoPainel). Enquanto o painel
   está fechado mas ainda sem [hidden] (ou, de forma simétrica, assim que
   hidden é removido na abertura, antes da classe .is-open ser aplicada
   num segundo passo), ele fica com opacity:0 + leve scale/translateY e
   pointer-events:none — presente no DOM, invisível e não-interativo, que
   é exatamente o que permite a transição de FECHAR aparecer (um elemento
   que já virou display:none não tem como animar sua própria saída).
   Propriedades animadas: opacity + transform (scale 0.97→1, translateY
   6px→0). Duração: 0.26s (dentro da faixa 200–300ms pedida), num só
   easing (--ease, já usado no resto do site). Funciona igual no modo
   embutido (home) e no modo launcher flutuante — a classe .is-open vai
   no PRÓPRIO painel (não no elemento raiz .chat-widget), porque no modo
   launcher o painel é reparentado para <body> em telas <1024px (ver
   .chat-widget__panel--fullscreen abaixo) e um seletor dependente do
   ancestral .chat-widget não acompanharia esse reparenting.
   Acessibilidade: não precisa de media query própria aqui — já existe uma
   regra global em styles.css (@media prefers-reduced-motion: reduce)
   que força transition-duration/animation-duration para 0.01ms em TODO
   elemento do site, então quem tem essa preferência do sistema já recebe
   a troca praticamente instantânea automaticamente. chat-widget.js checa
   a mesma preferência de novo, em paralelo, só para pular a espera do
   fallback/timeout e aplicar o estado final sem depender de nenhum
   evento de transição. */
.chat-widget__panel[hidden] {
  display: none;
}

.chat-widget__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 440px;
  max-height: 72vh;
  background: #fff;
  border: 1px solid rgba(69, 82, 89, 0.14);
  border-radius: var(--radius-lg, 24px);
  box-shadow: var(--shadow-lift, 0 24px 64px rgba(38, 46, 51, 0.16));
  overflow: hidden;

  opacity: 0;
  transform: scale(0.97) translateY(6px);
  pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}

.chat-widget__panel.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.chat-widget__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: var(--preto-antifragil);
  color: var(--off-white);
}
.chat-widget__header-id {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.chat-widget__header-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.chat-widget__header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Rótulo técnico, estilo "modo produto" do site institucional (eyebrow
   mono em caixa alta) — só aparece aqui, no cabeçalho do produto rodando,
   nunca dentro das mensagens da conversa em si (ver branding.md, direção
   híbrida). */
.chat-widget__header-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.6875rem (11px) — subido para
     1rem (16px). */
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.68);
  margin: 0;
}
/* Pedido direto do fundador pós-revisão visual (commit 1321d0e, 2026-10-08):
   voltar o dot pra VERDE. A rodada 29 (comentário no topo do arquivo) tinha
   trocado o verde solto (#6fbf8b, fora da paleta) por --amarelo-suave, pra
   alinhar com os tokens da marca — mas o fundador julgou que amarelo não
   comunica "sessão ativa/online" com clareza (convenção universal de UI é
   verde = online). Testado visualmente (screenshot local, 8px sobre o fundo
   escuro do header, --preto-antifragil): --verde-pastel (#B2C2B9) é um
   verde-acinzentado/claro demais pra essa função — em 8px lê como um ponto
   cinza-claro, não "sinal verde de online". Optei por um verde convencional
   de indicador de status (#4CAF50, mesma família do Material Design usado
   em badges "online/ativo") — prioriza a função de sinalização clara sobre
   a aderência estrita à paleta da marca, exatamente como o fundador pediu. */
.chat-widget__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  flex: none;
}
.chat-widget__header-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  margin: 0;
}
.chat-widget__close {
  background: transparent;
  border: none;
  color: var(--off-white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.chat-widget__close:hover { opacity: 0.8; }

.chat-widget__body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}

.chat-widget__messages {
  flex: 1 1 auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-widget__messages:empty { padding-bottom: 0; }

.chat-widget__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  /* Auditoria de acessibilidade rodada 19 (achado 1, alta severidade):
     era 0.9375rem (15px fixo) — texto da conversa em si, não um rótulo.
     Subiu para 1rem (16px). */
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-widget__bubble--agente {
  align-self: flex-start;
  background: #fff;
  color: var(--preto-antifragil);
  border: 1px solid var(--verde-pastel);
  border-bottom-left-radius: 4px;
}
.chat-widget__bubble--pme {
  align-self: flex-end;
  background: var(--cinza-chumbo);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-widget__bubble--sistema {
  align-self: center;
  background: transparent;
  color: var(--cinza-chumbo);
  /* Correção 4 (2026-10-08): era 0.82rem (~13px) — são mensagens reais da
     conversa (ex.: confirmações, erros), corpo de texto nunca abaixo de
     16px (decisão de acessibilidade permanente). Mesmo tamanho das
     demais bolhas (.chat-widget__bubble), já em 1rem. */
  font-size: 1rem;
  text-align: center;
}

.chat-widget__typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 var(--sp-3);
}
.chat-widget__typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-widget__typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cinza-chumbo);
  opacity: 0.5;
  animation: chat-widget-typing 1.1s ease-in-out infinite;
}
.chat-widget__typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-widget__typing-dots span:nth-child(3) { animation-delay: 0.3s; }
/* Rótulo mono — mesmo princípio do header: tratamento técnico só nos
   momentos em que o produto está "rodando" de verdade (aqui, gerando a
   resposta), nunca no texto da conversa já entregue. */
.chat-widget__typing-label {
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px). */
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--cinza-chumbo);
  /* Correção 4 (2026-10-08): era 0.75 — contraste real medido de 3.92:1
     sobre --off-white, abaixo do mínimo AA (4.5:1). Subido para 0.85,
     medido e confirmado em 4.96:1. */
  opacity: 0.85;
}
@keyframes chat-widget-typing {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-3px); }
}

/* ---------- Etapa de avaliação da Bússola, parte A (2026-10-06):
   pergunta de satisfação (👍/👎) depois do handoff. Opcional — visual
   discreto, mesma bolha do agente, não parece um bloqueio/formulário. ---------- */
.chat-widget__satisfacao {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.chat-widget__satisfacao-texto {
  margin: 0;
  /* Correção 4 (2026-10-08): era 0.9375rem (15px) — pergunta real da
     conversa, corpo de texto nunca abaixo de 16px. */
  font-size: 1rem;
}
.chat-widget__satisfacao-botoes {
  display: flex;
  gap: 8px;
}
.chat-widget__satisfacao-btn {
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px 16px;
  border: 1px solid rgba(69, 82, 89, 0.2);
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.chat-widget__satisfacao-btn:hover:not(:disabled),
.chat-widget__satisfacao-btn:focus-visible:not(:disabled) {
  border-color: var(--verde-pastel);
  background: var(--off-white);
  transform: translateY(-1px);
}
.chat-widget__satisfacao-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Feature NOVA (rodada 29, 2026-10-07): preview de solução,
   NÃO publicada em produção — ver docs/agente-conversacional-
   descoberta.md (repositório Consultoria, seção 37) e functions/index.js
   (/previewSolucao) para as restrições que este visual segue. Mesmo
   registro visual do convite de satisfação (bolha do agente), card
   próprio para o mockup/esboço depois de gerado. ---------- */
.chat-widget__preview-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.chat-widget__preview-prompt-texto {
  margin: 0;
}
.chat-widget__preview-prompt-btn {
  align-self: flex-start;
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.8125rem (13px) — subido para
     1rem (16px). */
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--preto-antifragil);
  background: var(--amarelo-suave);
  border: none;
  border-radius: var(--radius-pill, 999px);
  padding: 8px 18px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.chat-widget__preview-prompt-btn:hover:not(:disabled) { transform: translateY(-1px); }
.chat-widget__preview-prompt-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.chat-widget__preview-card {
  align-self: flex-start;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--verde-pastel);
  border-radius: var(--radius-md, 18px);
  background: #fff;
}
.chat-widget__preview-card-label {
  margin: 0;
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.6875rem (11px) — subido para
     1rem (16px). Contraste (cinza-chumbo @0.85 sobre branco, 5.39:1, ver
     comentário abaixo) não muda com o tamanho — já estava acima de AA. */
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cinza-chumbo);
  /* Correção 4 (2026-10-08): era 0.7 — contraste real medido de 3.72:1
     sobre o branco do card, abaixo do mínimo AA (4.5:1). Subido para
     0.85, medido e confirmado em 5.39:1. */
  opacity: 0.85;
}
/* AJUSTE DE UX (2026-10-08, pedido do fundador pós-revisão em produção,
   pós-deploy 89550de): label + botão de expandir (ver chat-widget.js,
   addPreviewCard) agora vivem numa linha de cabeçalho própria, com o
   botão no canto — antes só existia o label sozinho. */
.chat-widget__preview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
}
.chat-widget__preview-card-header .chat-widget__preview-card-label {
  margin: 0;
}
.chat-widget__preview-card-expand {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(69, 82, 89, 0.2);
  border-radius: var(--radius-sm, 12px);
  background: var(--off-white);
  color: var(--cinza-chumbo);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}
.chat-widget__preview-card-expand:hover,
.chat-widget__preview-card-expand:focus-visible {
  border-color: var(--verde-pastel);
  color: var(--preto-antifragil);
  transform: translateY(-1px);
}
.chat-widget__preview-frame {
  width: 100%;
  height: 260px;
  border: 1px solid rgba(69, 82, 89, 0.18);
  border-radius: var(--radius-sm, 12px);
  background: #fff;
}
.chat-widget__preview-card-esboco {
  margin: 0;
  /* Correção 4 (2026-10-08): era 0.9375rem (15px) — conteúdo real gerado
     pra leitura, corpo de texto nunca abaixo de 16px. */
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--preto-antifragil);
}

/* ---------- AJUSTE DE UX (2026-10-08, pedido do fundador pós-revisão em
   produção, pós-deploy 89550de): modal de tela cheia do preview de
   solução (botão .chat-widget__preview-card-expand acima abre, via
   abrirPreviewModal em chat-widget.js). MESMO iframe sandboxed do card
   pequeno (allow-same-origin, SEM allow-scripts — nunca muda), só maior.

   Transição: reaproveita a MESMA receita visual do painel principal
   (commit 89550de, ver .chat-widget__panel acima) — opacity 0→1 no
   overlay + scale/translateY no próprio dialog, 0.26s, --ease, via
   classe .is-open. Nenhuma media query própria pra prefers-reduced-
   motion: a regra global já existente em styles.css zera a duração de
   toda transição do site nesse caso (chat-widget.js checa a mesma
   preferência em paralelo só pra pular a espera do evento/timeout, ver
   abrirPreviewModal/fecharPreviewModal). ---------- */
.chat-widget__preview-modal[hidden] {
  display: none;
}

.chat-widget__preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(38, 46, 51, 0.72);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s var(--ease);
}
.chat-widget__preview-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.chat-widget__preview-modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  max-height: 900px;
  background: #fff;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-lift, 0 24px 64px rgba(38, 46, 51, 0.16));

  transform: scale(0.97) translateY(6px);
  transition: transform 0.26s var(--ease);
}
.chat-widget__preview-modal.is-open .chat-widget__preview-modal-dialog {
  transform: scale(1) translateY(0);
}
.chat-widget__preview-modal-dialog:focus-visible {
  outline: none;
}

.chat-widget__preview-modal-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid rgba(69, 82, 89, 0.12);
  background: var(--off-white);
}
.chat-widget__preview-modal-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cinza-chumbo);
  opacity: 0.85;
}
.chat-widget__preview-modal-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(69, 82, 89, 0.2);
  border-radius: var(--radius-sm, 12px);
  background: #fff;
  color: var(--cinza-chumbo);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chat-widget__preview-modal-close:hover,
.chat-widget__preview-modal-close:focus-visible {
  border-color: var(--verde-pastel);
  color: var(--preto-antifragil);
}

.chat-widget__preview-modal-frame {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: #fff;
}

/* Mobile (ex.: 390px): a modal ocupa a viewport inteira — sem margem de
   overlay nem cantos arredondados, igual ao painel em modo fullscreen
   mobile (.chat-widget__panel--fullscreen, mais abaixo). */
@media (max-width: 680px) {
  .chat-widget__preview-modal {
    padding: 0;
  }
  .chat-widget__preview-modal-dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

/* ---------- Sugestões de início (estado vazio, antes da 1ª mensagem) ---------- */
.chat-widget__suggestions {
  padding: var(--sp-1) var(--sp-3) var(--sp-3);
}
.chat-widget__suggestions[hidden] { display: none; }

.chat-widget__suggestions-label {
  font-family: var(--font-mono);
  font-weight: 600;
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px). */
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-chumbo);
  /* Correção 4 (2026-10-08): era 0.75 — contraste real medido de 3.92:1
     sobre --off-white, abaixo do mínimo AA (4.5:1). Subido para 0.85,
     medido e confirmado em 4.96:1. */
  opacity: 0.85;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-widget__suggestions-label::before {
  content: "//";
  color: var(--amarelo-suave);
  font-weight: 700;
}

.chat-widget__chips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
/* Rodada 27 (variante de abertura, ângulo seguranca/receita): só um dos
   grupos de chips fica visível por vez (ver chat-widget.js) — sem esta
   regra, o atributo `hidden` nativo seria sobrescrito pela regra
   `display: flex` acima (mesma classe, mesma especificidade; regra de
   autor sempre vence a folha padrão do navegador). Mesmo padrão já usado
   em `.chat-widget__suggestions[hidden]` acima. */
.chat-widget__chips[hidden] { display: none; }

.chat-widget__chip {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  /* Correção 4 (2026-10-08): era 0.9375rem (15px) — frases completas que
     o visitante lê e escolhe, corpo de texto nunca abaixo de 16px. */
  font-size: 1rem;
  color: var(--preto-antifragil);
  background: #fff;
  border: 1px solid rgba(69, 82, 89, 0.18);
  border-radius: var(--radius-pill, 999px);
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.chat-widget__chip:hover,
.chat-widget__chip:focus-visible {
  border-color: var(--amarelo-suave);
  background: var(--off-white);
}
.chat-widget__chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bug 1 (teste real do fundador, rodada 7): o widget do Turnstile ficava
   ocupando espaço pra sempre depois de validado. Agora colapsa (altura e
   opacidade animadas até zero) assim que o callback de sucesso do widget
   dispara — ver .is-collapsed, aplicada via JS em chat-widget.js. */
.chat-widget__turnstile {
  flex: none;
  padding: 0 var(--sp-3);
  min-height: 2px;
  max-height: 100px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease), padding 0.3s var(--ease), margin 0.3s var(--ease);
}
.chat-widget__turnstile.is-collapsed {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Bug 2 (anexos, rodada 7): preview do arquivo selecionado, entre o
   Turnstile e o campo de texto — mesma pílula visual dos chips. */
.chat-widget__anexo-preview {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--sp-3) var(--sp-1);
  padding: 6px 10px;
  border: 1px solid rgba(69, 82, 89, 0.18);
  border-radius: var(--radius-pill, 999px);
  background: var(--off-white);
  /* Correção 3 adicional (2026-10-08): era 0.8125rem (13px) — subido para
     1rem (16px). Contraste (preto-antifragil sobre off-white, 12.33:1)
     não muda com o tamanho — já estava acima de AA. */
  font-size: 1rem;
  color: var(--preto-antifragil);
}
.chat-widget__anexo-preview[hidden] { display: none; }
.chat-widget__anexo-preview-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.chat-widget__anexo-remover {
  flex: none;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--cinza-chumbo);
  cursor: pointer;
  padding: 0 4px;
}

.chat-widget__form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid rgba(69, 82, 89, 0.12);
  background: #fff;
}
.chat-widget__file-input { display: none; }
.chat-widget__attach {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(69, 82, 89, 0.2);
  border-radius: var(--radius-md, 18px);
  background: var(--off-white);
  color: var(--cinza-chumbo);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chat-widget__attach:hover,
.chat-widget__attach:focus-visible {
  border-color: var(--verde-pastel);
  color: var(--preto-antifragil);
}
.chat-widget__input {
  flex: 1 1 auto;
  border: 1px solid rgba(69, 82, 89, 0.2);
  border-radius: var(--radius-md, 18px);
  padding: 10px 14px;
  /* Auditoria de acessibilidade rodada 19 (achado 1, alta severidade):
     era 0.9375rem (15px fixo). Abaixo de 16px num <textarea>/<input> é
     também o gatilho conhecido do zoom automático do Safari/iOS ao focar
     o campo — fix reconhecido pra esse problema é justamente font-size
     >= 16px (não só estética). Subiu para 1rem (16px). */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  /* Ajuste de UX (relatado pelo fundador): altura crescia fixa em 1 linha
     e o texto só rolava escondido dentro da caixa pequena conforme
     quebrava linha. Agora a altura é calculada em JS (chat-widget.js,
     autoResizeInput) a cada tecla, até um teto de ~6 linhas — o
     max-height abaixo precisa ficar em sincronia com INPUT_MAX_HEIGHT lá.
     Só depois do teto o campo passa a rolar internamente (overflow-y). */
  min-height: 42px;
  max-height: 148px;
  overflow-y: auto;
  background: var(--off-white);
}
.chat-widget__input:focus-visible {
  outline: none;
  border-color: var(--cinza-chumbo);
  box-shadow: 0 0 0 3px rgba(69, 82, 89, 0.16);
}
/* Correção 4 (2026-10-08): placeholder explícito — sem esta regra, o
   navegador usa um cinza padrão (UA-dependente, não auditável). Cor
   escolhida e medida: preto-antifragil a 0.72 de opacidade sobre
   --off-white (fundo real do campo) dá 5.29:1, acima do mínimo AA
   (4.5:1). Também é o convite real ("Me conte o seu problema…", ver
   index.html — texto trocado a pedido do fundador em 2026-10-08, pós-commit
   1321d0e; era "Pergunte alguma coisa sobre o seu negócio…") que substitui
   o selo "produto ao vivo" removido na Correção 2 — parte da comunicação
   por affordance, não por rótulo. */
.chat-widget__input::placeholder {
  color: rgba(38, 46, 51, 0.72);
}
.chat-widget__send {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-md, 18px);
  background: var(--amarelo-suave);
  color: var(--preto-antifragil);
  cursor: pointer;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.chat-widget__send:hover:not(:disabled) { transform: translateY(-1px); }
.chat-widget__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Confiança/segurança (microcópia sob o launcher) ---------- */
.chat-widget__trust {
  margin-top: var(--sp-2);
  /* Correção 3 adicional (2026-10-08): era 0.8125rem (13px) — subido para
     1rem (16px). Contraste (cinza-chumbo solid sobre branco, 8.06:1) não
     muda com o tamanho — já estava acima de AA. */
  font-size: 1rem;
  color: var(--cinza-chumbo);
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 600px) {
  .chat-widget__chips { flex-direction: row; flex-wrap: wrap; }
  .chat-widget__chip { width: auto; flex: 1 1 calc(50% - var(--sp-1)); }
}

@media (min-width: 1024px) {
  .chat-widget__panel { min-height: 480px; }
}

/* ===================================================================
   PROPOSTA — Opção 3: variação diferente das opções 1/2. Em vez de
   cobrir a viewport inteira por cima do header, o painel ocupa tela
   cheia "abaixo do header" — o .site-header do site continua visível
   (não usa display:none), funcionando como uma barra de contexto/saída
   fixa no topo (o visitante nunca perde de vista que está no site da
   Refúgio Tech, e pode, por exemplo, tocar em "Fale com a gente" para
   sair do chat). Troca: um pouco menos imersivo que as opções 1/2
   (sobra uma faixa de ~64px do header no topo), mas mantém mais
   contexto de navegação — mais "âncora" pra quem está menos
   acostumado com apps de chat em tela cheia.

   top: var(--chat-fs-header-h) é calculado em JS (chat-widget.js,
   mede .site-header.offsetHeight) e cai num custom property no
   <html> — evita cravar um valor de altura de header em px fixo no
   CSS (frágil a qualquer mudança futura no header).

   Botão de fechar também redesenhado: pílula com texto "Fechar"
   visível ao lado do ×, mais fácil de notar/ler do que um × solto
   (ideia sugerida no briefing: "botão de fechar mais proeminente").
   Sem transição de entrada/saída (igual à opção 1 — instantâneo).

   BUG 1 (celular real, fundador): os seletores abaixo eram
   `.chat-widget.is-open .chat-widget__panel` / `...__close`, dependentes
   do painel continuar DENTRO de `#refugio-chat-widget`. Causa raiz real
   (confirmada via CDP, elementFromPoint + screenshot, em produção):
   `.bussola-hero` (overflow:hidden) e `<body>` (overflow:hidden enquanto
   aberto) são ancestrais do painel, e o Chrome/Blink recorta um
   descendente `position:fixed` pelos ancestrais com overflow:hidden —
   a partir de ~metade do painel pra baixo, a área não pintava nem
   recebia toque, vazando pro conteúdo de fundo (isso é o que conflitava
   com o teclado ao focar o campo, perto dessa região). Correção: o JS
   (chat-widget.js) agora move o painel pra ser filho direto de <body>
   nesse breakpoint, escapando de QUALQUER ancestral com overflow:hidden.
   Como o painel deixa de estar dentro de `.chat-widget.is-open`, os
   seletores abaixo passaram a usar a classe própria
   `.chat-widget__panel--fullscreen` (aplicada pelo JS no mesmo momento
   do reparenting), que não depende de onde o painel está no DOM. */
@media (max-width: 1023px) {
  body.is-chat-fullscreen-open {
    overflow: hidden;
    height: 100%;
  }

  .chat-widget__panel--fullscreen {
    position: fixed;
    top: var(--chat-fs-header-h, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    border: none;
  }

  .chat-widget__panel--fullscreen .chat-widget__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 40px;
    padding: 0 16px 0 12px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.15rem;
  }
  .chat-widget__panel--fullscreen .chat-widget__close::after {
    content: "Fechar";
    font-family: var(--font-body);
    font-weight: 500;
    /* Correção 3 adicional (2026-10-08): era 0.875rem (14px) — subido para
       1rem (16px), último dos 17 seletores abaixo do piso. Contraste
       (off-white sobre o fundo composto do botão, rgba(255,255,255,0.14)
       sobre o header #262E33) medido em 7.89:1 — não muda com o tamanho,
       já estava bem acima de AA. */
    font-size: 1rem;
    line-height: 1;
  }
}