:root { --bg:#0e0b14; --fg:#ece8f4; --muted:#9a90b0; --accent:#7c4dff; --card:#1a1424; --err:#ff6b6b; }
* { box-sizing: border-box; }
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); }
.orb-placeholder { font-size:4rem; margin-bottom:.5rem; }
.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; }
.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; }

/* 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; }