:root { --bg:#0a0a0c; --panel:#141418; --accent:#e0457b; --text:#f3f3f5; --muted:#9a9aa5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,system-ui,sans-serif; height:100vh; overflow:hidden; }
.screen { display:none; flex-direction:column; align-items:center; justify-content:center; height:100vh; padding:24px; gap:16px; }
.screen.active { display:flex; }
.hidden { display:none !important; }
.err { color:#ff6b6b; }
.card,.companion-card { background:var(--panel); border-radius:20px; padding:28px; width:100%; max-width:380px; text-align:center; }
input,textarea { width:100%; padding:14px; border-radius:12px; border:1px solid #2a2a30; background:#0f0f12; color:var(--text); font-size:16px; }
button { cursor:pointer; border:none; border-radius:999px; padding:14px 22px; font-size:16px; font-weight:600; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-ghost { background:#26262c; color:var(--text); }
.btn-danger { background:#e02f3f; color:#fff; }
.link { background:none; color:var(--muted); text-decoration:underline; }
.actions { display:flex; gap:12px; justify-content:center; margin-top:16px; }
.portrait { width:160px; height:160px; border-radius:24px; margin:0 auto 16px; background:radial-gradient(circle at 30% 30%, #5b1f3a, #1a1020); }
.orb { width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--accent), #3a1024); transition:transform .2s; }
.orb[data-state="listening"] { box-shadow:0 0 0 0 rgba(224,69,123,.5); animation:pulse 1.4s infinite; }
.orb[data-state="speaking"] { transform:scale(1.08); animation:pulse .7s infinite; }
.orb[data-state="thinking"] { opacity:.6; }
.last-line { color:var(--muted); max-width:340px; text-align:center; min-height:1.2em; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(224,69,123,.45);} 70%{box-shadow:0 0 0 28px rgba(224,69,123,0);} 100%{box-shadow:0 0 0 0 rgba(224,69,123,0);} }
@media (prefers-reduced-motion: reduce) { .orb { animation:none !important; } }
/* Chat screen */
#chat { justify-content:flex-start; padding-top:24px; }
.chat-log { width:100%; max-width:480px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:8px 0; }
.msg { max-width:80%; padding:10px 14px; border-radius:16px; line-height:1.35; white-space:pre-wrap; word-wrap:break-word; }
.msg-user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.msg-mira { align-self:flex-start; background:#26262c; color:var(--text); border-bottom-left-radius:4px; }
.chat-input-row { width:100%; max-width:480px; display:flex; gap:8px; align-items:center; }
.chat-input-row input { flex:1; }