:root { --bg:#0e0b14; --fg:#ece8f4; --muted:#9a90b0; --accent:#7c4dff; --card:#1a1424; --err:#ff6b6b; }
* { box-sizing: border-box; }
/* O atributo `hidden` SEMPRE vence — senão regras como `.recbar{display:flex}`
   derrotam o `[hidden]` do user-agent e o elemento nasce/fica visível. */
[hidden] { display: none !important; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
.muted, .muted a { color:var(--muted); }

/* login + landing */
.login, .landing { min-height:100vh; display:grid; place-items:center; }
.login-card, .landing-card { background:var(--card); padding:2rem; border-radius:16px; width:min(92vw,360px); text-align:center; }
.login-card input { display:block; width:100%; margin:.5rem 0; padding:.7rem; border-radius:10px; border:1px solid #2c2438; background:#120d1a; color:var(--fg); }
.login-card button, .cta { display:inline-block; margin-top:.5rem; padding:.7rem 1.2rem; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; font-size:1rem; }
.err { color:var(--err); }
/* landing-orb: o orb (3D ou fallback) em tela cheia é o portal pro chat */
body.landing-orb { margin:0; width:100vw; height:100vh; height:100dvh; background:#08060f; overflow:hidden; }
body.landing-orb #maia-orb { position:fixed; inset:0; width:100%; height:100%; display:block; cursor:pointer; outline:none; z-index:1; }
/* fallback estático (sem WebGL): orb CSS com a paleta da Maia, atrás do canvas */
.orb-fallback { display:none; }
body.orb-fallback .orb-fallback {
  display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:66vmin; height:66vmin; max-width:340px; max-height:340px; border-radius:50%;
  background:radial-gradient(circle at 42% 36%, #e6ecff 0%, #a78bfa 30%, #7c3aed 66%, #3730a3 100%);
  box-shadow:0 0 72px 8px rgba(124,77,237,.45);
  pointer-events:none; z-index:0;
}
.orb-hint { position:fixed; left:0; right:0; bottom:12%; bottom:calc(12% + env(safe-area-inset-bottom,0px)); text-align:center; color:#c7d2fe; opacity:.55; font-size:.95rem; letter-spacing:.02em; pointer-events:none; z-index:2; }
.orb-hint.hint-error { color:#ffd479; opacity:.9; }
/* "ouvi: …" — transcrição do 1b: DISCRETA (menor, tom sutil) e some sozinha
   em ~2,5s com fade (o timer vive no voice.js; aqui só o visual + a transição) */
.voice-heard { position:fixed; left:0; right:0; bottom:22%; bottom:calc(22% + env(safe-area-inset-bottom,0px)); text-align:center; color:#a79fbf; font-size:.82rem; line-height:1.35; letter-spacing:.01em; padding:0 1.4rem; max-width:620px; margin:0 auto; z-index:2; pointer-events:none; opacity:0; transition:opacity 420ms ease; }
.voice-heard.show { opacity:.5; }                      /* discreto: meia opacidade */
.voice-heard.heard-err { color:#c9b48a; }              /* erro: âmbar SUTIL */
body.voice-listening .voice-heard { display:none; }    /* enquanto ouvindo, esconde a transcrição antiga */
@media (prefers-reduced-motion: reduce) { .voice-heard { transition:none; } }
/* 1c-i: resposta da Maia (texto streaming) — discreta, legível, PERSISTE até o próximo turno */
.voice-reply { position:fixed; left:0; right:0; bottom:34%; bottom:calc(34% + env(safe-area-inset-bottom,0px)); text-align:center; color:#e7e3f2; opacity:.9; font-size:.95rem; line-height:1.45; padding:0 1.4rem; max-width:640px; margin:0 auto; z-index:2; pointer-events:none; }
body.voice-listening .voice-reply { display:none; }    /* novo turno: esconde a resposta anterior */
/* "pensando…": cue textual + respiração levemente esmaecida no orb (sem tocar o WebGL) */
body.voice-thinking .orb-hint { color:#c7b8f0; opacity:.85; animation:voicehint 1.4s ease-in-out infinite; }
body.voice-thinking #maia-orb { animation:thinkbreath 2.4s ease-in-out infinite; }
@keyframes thinkbreath { 0%,100% { opacity:1; } 50% { opacity:.74; } }
@media (prefers-reduced-motion: reduce) { body.voice-thinking #maia-orb, body.voice-thinking .orb-hint { animation:none !important; } }
/* 1c-ii: "falando" — tint distinto no orb (filtro CSS no canvas; WebGL intocado) */
body.voice-speaking #maia-orb { filter:hue-rotate(28deg) saturate(1.12); }
body.voice-speaking .orb-hint { color:#bfead8; opacity:.85; animation:voicehint 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.voice-speaking .orb-hint { animation:none !important; } }
/* link pro chat escrito (clicável; o resto da tela é o orb/voz) */
.chat-link { position:fixed; left:0; right:0; bottom:6%; bottom:calc(6% + env(safe-area-inset-bottom,0px)); text-align:center; color:var(--accent); opacity:.8; font-size:.85rem; text-decoration:none; z-index:2; }
.chat-link:hover { opacity:1; }
/* ✕ pra sair do modo escuta (só visível ouvindo; [hidden] some pela regra global) */
.voice-exit { position:fixed; top:calc(16px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; border:0; background:rgba(44,36,56,.82); color:#e6e1f4; font-size:.95rem; line-height:1; cursor:pointer; z-index:4; display:flex; align-items:center; justify-content:center; }
/* enquanto ouvindo: esconde o link do chat e dá um cue pulsante (texto + fallback) */
body.voice-listening .chat-link { display:none; }
body.voice-listening .orb-hint { color:#c7d2fe; opacity:.85; animation:voicehint 1.6s ease-in-out infinite; }
@keyframes voicehint { 0%,100% { opacity:.5; } 50% { opacity:.9; } }
/* fallback (sem WebGL): o orb estático ganha um pulso CSS suave ao ouvir */
body.voice-listening.orb-fallback .orb-fallback { animation:voicepulse 1.5s ease-in-out infinite; }
@keyframes voicepulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .orb-hint, body.voice-listening.orb-fallback .orb-fallback { animation:none !important; } }
.logout-corner { position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:16px; color:#9a90b0; opacity:.4; font-size:.8rem; text-decoration:none; z-index:3; }
.logout-corner:hover { opacity:.75; }
.offline-banner { position:fixed; top:0; left:0; right:0; z-index:50; text-align:center; padding:.5rem; background:#3a2a00; color:#ffd479; font-size:.85rem; }

/* chat layout */
.chat { display:flex; flex-direction:column; height:100vh; height:100dvh; }
.chat-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1rem; background:var(--card); flex:0 0 auto; }
.chat-header .title { font-weight:600; }
.chat-header .back { font-size:1.3rem; }

.messages { flex:1 1 auto; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }

.msg { padding:.6rem .9rem; border-radius:14px; max-width:80%; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.35; }
.msg.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.msg.assistant { align-self:flex-start; background:var(--card); border-bottom-left-radius:4px; }
.listen-btn { display:block; width:fit-content; margin-top:.45rem; padding:.18rem .55rem; border:0; border-radius:8px; background:#2c2438; color:var(--accent); font-size:.74rem; cursor:pointer; }
.listen-btn:disabled { opacity:.6; cursor:default; }
.msg.streaming::after { content:'▋'; margin-left:2px; opacity:.6; animation:blink 1s steps(2,start) infinite; }
@keyframes blink { to { visibility:hidden; } }

.tool-marker { align-self:center; color:var(--muted); font-size:.78rem; font-style:italic; padding:.1rem .4rem; }

/* apagar mensagem: feedback de long-press + modal de confirmação */
.msg { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.msg.pressing { outline:2px solid var(--accent); opacity:.85; transition:opacity .1s; }
.modal-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.modal-card { background:var(--card); border-radius:16px; padding:1.3rem; width:min(90vw,340px); box-shadow:0 10px 40px rgba(0,0,0,.5); }
.modal-msg { margin:0 0 1.1rem; line-height:1.45; }
.modal-actions { display:flex; gap:.6rem; justify-content:flex-end; }
.modal-btn { padding:.6rem 1.1rem; border:0; border-radius:10px; cursor:pointer; font-size:.95rem; }
.modal-btn.cancel { background:#2c2438; color:var(--fg); }
.modal-btn.danger { background:var(--err); color:#fff; font-weight:600; }

/* status line (digitando / erro) */
.status { flex:0 0 auto; padding:.35rem 1rem; font-size:.82rem; color:var(--muted); background:transparent; }
.status.err { color:var(--err); }

/* composer */
.composer { flex:0 0 auto; display:flex; gap:.5rem; padding:.7rem; background:var(--card); }
.composer-input { flex:1; padding:.75rem .9rem; border-radius:22px; border:1px solid #2c2438; background:#120d1a; color:var(--fg); font-size:1rem; }
.composer-input:disabled { opacity:.55; }
.composer-send { flex:0 0 auto; width:44px; border:0; border-radius:50%; background:var(--accent); color:#fff; font-size:1.1rem; cursor:pointer; }
.composer-send:disabled { opacity:.45; cursor:default; }
.composer-mic { flex:0 0 auto; width:44px; border:0; border-radius:50%; background:#2c2438; color:var(--fg); font-size:1.1rem; cursor:pointer; }
.composer-mic:disabled { opacity:.45; cursor:default; }

/* barra de gravação (substitui o composer enquanto grava) */
.recbar { flex:0 0 auto; display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; background:var(--card); }
.recbar .rec-dot { width:11px; height:11px; border-radius:50%; background:var(--err); animation:recpulse 1s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity:.25; } }
.recbar .rec-time { font-variant-numeric:tabular-nums; min-width:3ch; }
.recbar .rec-label { color:var(--muted); flex:1; }
.rec-btn { border:0; border-radius:10px; padding:.5rem .8rem; cursor:pointer; font-size:.95rem; }
.rec-btn.cancel { background:#2c2438; color:var(--fg); }
.rec-btn.stop { background:var(--accent); color:#fff; font-weight:600; }