:root { color-scheme: dark; --bg:#0b0c0f; --panel:#12141a; --line:#242833; --text:#f5f6f8; --muted:#9299a8; --accent:#ff5a36; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:"Alexandria",system-ui,sans-serif; }
body { min-height:100dvh; background:radial-gradient(circle at 50% -20%,#2a1a1a 0,transparent 35%),var(--bg); }
button, textarea { font:inherit; }
button { color:inherit; }
.shell { width:min(920px,100%); min-height:100dvh; margin:auto; display:grid; grid-template-rows:auto 1fr auto; }
.topbar { position:sticky; top:0; z-index:4; display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(11,12,15,.82); backdrop-filter:blur(18px); }
.brand,.actions,.status { display:flex; align-items:center; gap:11px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; font-weight:800; background:linear-gradient(135deg,#ff7b4d,var(--accent)); box-shadow:0 8px 30px #ff5a3633; }
.brand div { display:flex; flex-direction:column; gap:2px; }
.brand strong { font-size:14px; letter-spacing:.06em; }
.brand div span { color:var(--muted); font-size:10px; }
.status { color:#aeb4bf; font-size:11px; }
.status i { width:7px; height:7px; border-radius:50%; background:#55d68b; box-shadow:0 0 12px #55d68b; }
.status.off i { background:#f05d5d; box-shadow:none; }
.ghost { border:1px solid var(--line); background:#15171d; border-radius:10px; padding:9px 12px; cursor:pointer; font-size:11px; }
.chat { min-height:0; overflow-y:auto; padding:32px 24px 160px; scroll-behavior:smooth; }
.welcome { min-height:55vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.orb { width:82px; height:82px; padding:1px; border-radius:26px; background:linear-gradient(145deg,#ff9a70,#712416); box-shadow:0 24px 80px #ff5a3625; transform:rotate(7deg); }
.orb span { width:100%; height:100%; display:grid; place-items:center; border-radius:25px; background:#16171c; font-size:30px; font-weight:800; transform:rotate(-7deg); }
.welcome h1 { margin:26px 0 9px; font-size:clamp(26px,5vw,40px); letter-spacing:-.05em; }
.welcome>p { width:min(540px,100%); margin:0; color:var(--muted); font-size:13px; line-height:2; }
.suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.suggestions button { border:1px solid var(--line); border-radius:999px; background:#111319; color:#c5c9d2; padding:10px 14px; cursor:pointer; font-size:11px; transition:.2s; }
.suggestions button:hover { border-color:#ff5a3677; color:#fff; transform:translateY(-2px); }
.messages { display:flex; flex-direction:column; gap:24px; }
.message { display:flex; align-items:flex-start; gap:12px; max-width:86%; animation:in .25s ease-out; }
.message.user { align-self:flex-start; flex-direction:row; }
.message.assistant { align-self:flex-end; }
.avatar { flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#21242c; font-size:11px; font-weight:700; }
.assistant .avatar { background:var(--accent); }
.bubble { padding:13px 16px; border-radius:17px; background:#171920; color:#e8eaf0; font-size:13px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.user .bubble { background:#232630; }
.assistant .bubble { background:transparent; padding-top:5px; }
.cursor::after { content:""; display:inline-block; width:7px; height:15px; margin-right:4px; vertical-align:-2px; background:var(--accent); animation:blink .8s infinite; }
.composer-wrap { position:fixed; z-index:5; bottom:0; left:50%; transform:translateX(-50%); width:min(920px,100%); padding:20px 24px 14px; background:linear-gradient(transparent,var(--bg) 28%); }
.composer { display:flex; align-items:flex-end; gap:10px; padding:9px 10px 9px 14px; border:1px solid #2b303a; border-radius:18px; background:#15171d; box-shadow:0 16px 50px #0008; }
textarea { flex:1; resize:none; max-height:160px; padding:10px 4px; border:0; outline:0; background:transparent; color:#fff; line-height:1.6; font-size:13px; }
textarea::placeholder { color:#6f7581; }
.send { flex:0 0 auto; width:41px; height:41px; display:grid; place-items:center; border:0; border-radius:13px; background:var(--accent); cursor:pointer; transition:.2s; }
.send:hover { transform:scale(1.04); }
.send:disabled { opacity:.55; cursor:not-allowed; }
.send svg { width:19px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.composer-wrap>p { margin:9px 0 0; text-align:center; color:#646a76; font-size:9px; }
@keyframes in { from { opacity:0; transform:translateY(8px); } }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:600px) { .topbar,.chat { padding-left:15px; padding-right:15px; } .status span { display:none; } .ghost { padding:8px 10px; } .message { max-width:94%; } .composer-wrap { padding-left:12px; padding-right:12px; } }