/* =====================================================================
   A AJUDA COM A IA NA PÁGINA INICIAL (23/10/2026). Usa os tokens --s- do site.css.
   Regras do site: o ciano é só do botão principal ("Começar", "Enviar", "Enviar avaliação"); verde é estado; nada de fonte de fora.
   ===================================================================== */
/* Os tokens --s- vêm do site.css na página inicial; as páginas de resgate (Netflix, Disney+...) não carregam o site.css, então valem estes (os mesmos). */
.ia-dlg, .ia-bolha, .ia-chamada {
  --s-card: #131B27; --s-card-hover: #172131; --s-sunk: #0D131D; --s-field: #0B111A; --s-line: #22303F; --s-line-2: #2C3C50; --s-line-3: #3A4D63; --s-rule: #16202D;
  --s-text: #E6EDF6; --s-muted: #96A6BB; --s-cyan: #33E7FF; --s-cyan-hover: #6BEFFF; --s-on-cyan: #04141A; --s-warn: #E8A33D; --s-danger: #F2545B; --s-danger-bg: rgba(242, 84, 91, .12);
  --s-f-display: Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", system-ui, sans-serif;
  --s-f-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
.ia-dlg {
  width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 760px);
  padding: 0; border: 1px solid var(--s-line-2); border-radius: 16px;
  background: var(--s-card); color: var(--s-text); font-family: var(--s-f-ui);
}
.ia-dlg::backdrop { background: rgba(4, 8, 14, .72); }
.ia-dlg *, .ia-dlg *::before, .ia-dlg *::after { box-sizing: border-box; }
.ia-dlg-in { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.ia-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--s-rule); }
.ia-bar b { font-size: 14px; font-weight: 600; color: var(--s-muted); letter-spacing: .02em; }
.ia-x { min-height: 44px; min-width: 44px; background: transparent; border: 1px solid var(--s-line-2); border-radius: 10px; color: var(--s-text); font: inherit; font-size: 14px; cursor: pointer; padding: 0 14px; }
.ia-x:hover { background: #1A2433; }
.ia-corpo { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.ia-titulo { margin: 0; font-family: var(--s-f-display); font-size: 22px; font-weight: 600; }
.ia-sub { margin: 4px 0 0; font-size: 14px; color: var(--s-muted); line-height: 1.45; }
.ia-aviso { margin: 0; font-size: 13px; color: var(--s-warn); }
.ia-horario { margin: 0; font-size: 13px; color: var(--s-muted); padding: 8px 10px; border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-sunk); }
.ia-passo { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.ia-dica { margin: 0; font-size: 13px; color: var(--s-muted); }
.ia-erro { margin: 0; font-size: 14px; color: var(--s-danger); background: var(--s-danger-bg); border-radius: 10px; padding: 8px 10px; }

.ia-opcoes { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.ia-opcoes.ia-dois { grid-template-columns: 1fr 1fr; }
.ia-op {
  min-height: 48px; padding: 10px 14px; text-align: left; font: inherit; font-size: 15px; line-height: 1.3;
  background: var(--s-sunk); color: var(--s-text); border: 1px solid var(--s-line-2); border-radius: 12px; cursor: pointer;
}
.ia-op:hover { background: var(--s-card-hover); border-color: var(--s-line-3); }
.ia-op.on { border-color: var(--s-text); background: #1A2433; }
.ia-op.ia-fecha { grid-column: 1 / -1; text-align: center; }
.ia-voltar {
  align-self: flex-start; min-height: 44px; padding: 0 6px; background: transparent; border: 0; color: var(--s-muted);
  font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer;
}
.ia-voltar:hover { color: var(--s-text); }
.ia-primario {
  min-height: 48px; padding: 0 22px; background: var(--s-cyan); color: var(--s-on-cyan); border: 0; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ia-primario:hover { background: var(--s-cyan-hover); }
.ia-primario:disabled, .ia-op:disabled { opacity: .55; cursor: wait; }

.ia-campo {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--s-text);
  background: var(--s-field); border: 1px solid var(--s-line-2); border-radius: 12px;
}
.ia-texto { resize: vertical; min-height: 84px; }

.ia-chat { display: flex; flex-direction: column; gap: 8px; min-height: 160px; max-height: 38vh; overflow-y: auto; padding: 4px 2px; }
.ia-msg { max-width: 88%; padding: 10px 12px; border-radius: 12px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ia-msg.eu { align-self: flex-end; background: #1A2433; border: 1px solid var(--s-line-2); }
.ia-msg.ia { align-self: flex-start; background: var(--s-sunk); border: 1px solid var(--s-line); }
.ia-msg.ia-espera { color: var(--s-muted); font-style: italic; }
.ia-msg.ia-pessoa { border-color: var(--s-warn); }
.ia-msg.ia-falha { border-color: var(--s-danger); color: var(--s-text); }
.ia-restam { margin: 0; font-size: 13px; color: var(--s-muted); }
.ia-form { display: flex; flex-direction: column; gap: 8px; }

.ia-notas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ia-nota {
  min-height: 52px; font: inherit; font-size: 20px; font-weight: 700; color: var(--s-text);
  background: var(--s-sunk); border: 1px solid var(--s-line-2); border-radius: 12px; cursor: pointer;
}
.ia-nota:hover { background: var(--s-card-hover); }
.ia-nota.on { border-color: var(--s-text); background: #1A2433; }
.ia-baixa { display: flex; flex-direction: column; gap: 10px; }

/* a bolinha (canto inferior esquerdo, acompanha a tela). Neutra de propósito: o ciano é só do botão principal da janela. */
.ia-bolha {
  position: fixed; left: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 18px 0 14px; border-radius: 99px; cursor: pointer;
  background: var(--s-card); color: var(--s-text); border: 1px solid var(--s-line-3);
  font: 600 14px/1 var(--s-f-ui); box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
.ia-bolha svg { width: 22px; height: 22px; flex: 0 0 auto; }
.ia-bolha:hover { background: var(--s-card-hover); }
.ia-bolha:focus-visible { outline: 2px solid var(--s-text); outline-offset: 2px; }
.ia-bolha[hidden], .ia-chamada[hidden] { display: none !important; }
.ia-fora { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-sunk); color: var(--s-muted); font-size: 14px; max-width: 560px; }
.ia-fora[hidden] { display: none !important; }

/* o botão da página (fora da janela) */
.ia-chamada { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; padding: 14px 16px; border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-sunk); }
.ia-chamada span { flex: 1 1 220px; font-size: 14px; color: var(--s-muted); }

@media (max-width: 520px) {
  .ia-bolha { left: 12px; bottom: 12px; width: 54px; min-height: 54px; padding: 0; justify-content: center; }
  .ia-bolha span { display: none; }
  .ia-opcoes { grid-template-columns: 1fr; }
  .ia-opcoes.ia-dois { grid-template-columns: 1fr 1fr; }
  .ia-msg { max-width: 94%; }
  .ia-chat { max-height: 34vh; }
}
@media (prefers-reduced-motion: no-preference) { .ia-dlg[open] { animation: ia-sobe .18s ease-out; } }
@keyframes ia-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }