/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero (orbe) + conversa · theme: custom "oráculo" (tinta quente, acento ouro pálido) · nav: N9 · footer: compositor fixo */
:root {
  --color-paper: oklch(14% 0.008 70);
  --color-paper-2: oklch(19% 0.01 70);
  --color-paper-3: oklch(24% 0.012 70);
  --color-ink: oklch(94% 0.015 85);
  --color-ink-2: oklch(76% 0.02 80);
  --color-ink-3: oklch(58% 0.02 75);
  --color-rule: oklch(29% 0.012 70);
  --color-accent: oklch(84% 0.11 85);
  --color-accent-ink: oklch(20% 0.03 70);
  --color-claude: oklch(74% 0.12 45);
  --color-codex: oklch(74% 0.11 165);
  --color-vigia: oklch(80% 0.13 95);
  --color-alex: oklch(72% 0.1 255);
  --color-erro: oklch(70% 0.17 25);
  --color-ok: oklch(76% 0.15 150);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --raio: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; height: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 8px; }

.botao { border: 0; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; padding: 0.85rem 1.4rem; transition: transform 150ms var(--ease-out), filter 150ms var(--ease-out); }
.botao:hover { filter: brightness(1.06); }
.botao:active { transform: scale(0.97); }
.botao:disabled { opacity: 0.55; cursor: progress; }
.erro { color: var(--color-erro); min-height: 1.4em; font-size: 0.9rem; }

/* ── entrada ── */
.entrada { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.25rem; text-align: center; }
.entrada h1 { font: 600 clamp(2.4rem, 9vw, 3.6rem)/1 var(--font-display); letter-spacing: -0.02em; margin: 0.5rem 0 0; }
.entrada-texto { margin: 0 0 0.75rem; color: var(--color-ink-2); max-width: 32ch; }
.form-codigo { display: grid; gap: 0.6rem; justify-items: center; }
.form-codigo label { color: var(--color-ink-3); font-size: 0.85rem; }
.form-codigo input { width: 10ch; text-align: center; font: 500 1.8rem/1 var(--font-mono); letter-spacing: 0.2em; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 12px; padding: 0.7rem; }
.orbe--entrada { width: 180px; height: 180px; }

/* ── oráculo ── */
.oraculo { height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.topo { display: flex; align-items: center; gap: 0.75rem; padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.5rem; }
.marca { display: flex; align-items: center; gap: 0.5rem; font: 600 1.15rem/1 var(--font-display); letter-spacing: -0.01em; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-3); }
.ponto.ok { background: var(--color-ok); box-shadow: 0 0 0 4px oklch(76% 0.15 150 / 0.15); }
.ponto.falha { background: var(--color-erro); }
.estado { margin-right: auto; font: 500 0.72rem/1 var(--font-mono); color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.icone { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--color-rule); background: var(--color-paper-2); display: grid; place-items: center; flex-shrink: 0; }
.icone[aria-pressed="false"] { opacity: 0.45; }

.palco { display: grid; justify-items: center; padding: 0.25rem 1rem 0.5rem; }
.orbe { width: min(46vw, 210px); aspect-ratio: 1; height: auto; }
.legenda { margin: 0.4rem 0 0; min-height: 1.5em; max-width: 36ch; text-align: center; color: var(--color-ink-2); font-size: 0.92rem; }
.oraculo.conversando .orbe { width: min(26vw, 120px); }
.orbe { transition: width 400ms var(--ease-out); }

.conversa { list-style: none; margin: 0; padding: 0.5rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.85rem; }
.msg { max-width: min(92%, 44rem); display: grid; gap: 0.2rem; animation: entrar 300ms var(--ease-out) both; }
.msg.minha { align-self: flex-end; }
.msg-quem { font: 500 0.72rem/1 var(--font-mono); color: var(--cor, var(--color-ink-3)); display: flex; gap: 0.5rem; align-items: center; }
.msg-quem time { color: var(--color-ink-3); }
.msg-texto { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-left: 3px solid var(--cor, var(--color-rule)); border-radius: 4px var(--raio) var(--raio) var(--raio); padding: 0.65rem 0.85rem; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 0.95rem; }
.msg.minha .msg-texto { background: var(--color-paper-3); border-left-color: var(--color-alex); border-radius: var(--raio) 4px var(--raio) var(--raio); }
.msg-texto a { color: var(--color-accent); }
.msg-texto code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-paper); padding: 0.05em 0.3em; border-radius: 4px; }
.msg-ouvir { justify-self: start; background: none; border: 0; padding: 0; font-size: 0.78rem; color: var(--color-ink-3); }
.msg-ouvir:hover { color: var(--color-accent); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.compositor { border-top: 1px solid var(--color-rule); background: var(--color-paper); padding: 0.6rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); display: grid; gap: 0.55rem; }
.atalhos { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.atalhos::-webkit-scrollbar { display: none; }
.atalhos button { flex-shrink: 0; white-space: nowrap; border: 1px solid var(--color-rule); background: var(--color-paper-2); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.82rem; color: var(--color-ink-2); transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.atalhos button:hover { border-color: var(--color-accent); color: var(--color-ink); }
.atalhos button.liberado { border-color: var(--color-ok); color: var(--color-ok); }
.linha { display: flex; align-items: flex-end; gap: 0.5rem; }
.linha textarea { flex: 1; min-width: 0; resize: none; max-height: 8rem; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 1.4rem; padding: 0.7rem 1rem; line-height: 1.4; }
.enviar { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--color-rule); background: var(--color-paper-2); flex-shrink: 0; }
.microfone { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 0; background: var(--color-accent); color: var(--color-accent-ink); display: grid; place-items: center; flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.microfone:active, .microfone.gravando { transform: scale(1.08); background: var(--color-erro); color: var(--color-ink); }
.microfone:disabled { opacity: 0.5; }

@media (min-width: 900px) {
  .oraculo { max-width: 860px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}