:root{--bg:#0b0c11;--surface:#141826;--border:#262b40;--gold:#c9a256;--gold-lite:#e8c97a;--green:#3ecf6e;--text:#ede9df;--text2:#8c8a84;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;overflow:hidden}
.app{max-width:560px;margin:0 auto;height:100dvh;padding:0 16px 76px;display:flex;flex-direction:column}
.screen{display:none;flex:1;flex-direction:column;min-height:0}
.screen.active{display:flex}
.topo{display:flex;align-items:center;justify-content:space-between;padding:18px 2px 6px}
.modo-label{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}
.icon-btn{background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:6px 10px;font-size:16px;cursor:pointer}

/* ── Waveform ── */
.wave-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:140px}
#wave{width:100%;max-height:240px}
.status-dot{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--text2);opacity:.5;transition:.3s}
.status-dot.listening{background:var(--green);opacity:1;box-shadow:0 0 12px var(--green)}
.status-dot.thinking{background:var(--gold);opacity:1;animation:blink 1s infinite}
.status-dot.speaking{background:var(--gold-lite);opacity:1;box-shadow:0 0 14px var(--gold)}
@keyframes blink{50%{opacity:.25}}

.legenda{min-height:74px;max-height:130px;overflow-y:auto;text-align:center;color:var(--text);font-size:17px;padding:4px 6px}
.legenda .voce{color:var(--text2);font-size:14px;display:block;margin-top:6px}

.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px 0}
.chip{font:inherit;font-size:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:9px 14px;cursor:pointer}
.chip.active{border-color:var(--gold);color:var(--gold)}

/* ── Mic ── */
.mic-area{display:flex;justify-content:center;align-items:center;gap:22px;padding:14px 0 20px}
.side-btn{font-size:20px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.texto-row{display:flex;gap:8px;padding:0 0 16px}
.texto-row input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:999px;color:var(--text);padding:12px 18px;font:inherit;outline:none}
.texto-row input:focus{border-color:var(--gold)}
.enviar{border:0;border-radius:50%;width:48px;height:48px;background:var(--gold);color:#1a1407;font-size:18px;cursor:pointer}
.mic{width:84px;height:84px;border-radius:50%;border:0;background:radial-gradient(circle at 30% 30%,var(--gold-lite),var(--gold));color:#1a1407;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 30px rgba(201,162,86,.35);transition:transform .15s}
.mic:active{transform:scale(.94)}
.mic.rec{background:radial-gradient(circle at 30% 30%,#ff8a8a,#e04444);color:#fff;animation:pulse 1.2s infinite}
.mic.busy{opacity:.45;pointer-events:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,68,68,.5)}70%{box-shadow:0 0 0 22px rgba(224,68,68,0)}100%{box-shadow:0 0 0 0 rgba(224,68,68,0)}}

/* ── Cards / listas ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:14px 0;overflow-y:auto}
.muted{color:var(--text2);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.mission{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;margin:8px 0;font-size:16px}
.perfil-bloco{margin:10px 0}
.perfil-bloco b{color:var(--gold);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.perfil-bloco p{font-size:15px;margin-top:2px}

/* ── Nav ── */
.nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px max(8px, env(safe-area-inset-bottom))}
.nav button{background:transparent;border:0;color:var(--text2);font:inherit;font-size:13px;padding:8px 16px;cursor:pointer}
.nav button.active{color:var(--gold)}

.toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);background:#23283b;border:1px solid var(--border);padding:10px 16px;border-radius:10px;opacity:0;transition:.3s;pointer-events:none;z-index:50;max-width:90%;text-align:center}
.toast.show{opacity:1}