:root{
  --bg:#05070f; --bg2:#0a1128; --panel:#0d1430; --line:#1c2450;
  --text:#f2f5ff; --muted:#8b93b8; --accent:#5b7cff; --accent2:#9b6bff;
  --glow:0 0 24px rgba(91,124,255,.35); --radius:16px;
  --sidebar-w:280px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#14205a 0%,var(--bg) 55%) fixed,var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.app{display:flex;height:100vh;overflow:hidden}
/* Sidebar */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:rgba(8,12,30,.92);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:margin .25s ease}
.app.collapsed .sidebar{margin-left:calc(-1 * var(--sidebar-w))}
.side-top{padding:16px 14px 8px}
.brand{font-weight:700;font-size:18px;letter-spacing:.3px;margin-bottom:12px}
.brand-star{color:var(--accent);text-shadow:var(--glow)}
.btn-new{width:100%;padding:10px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(135deg,#1a2456,#121a40);color:var(--text);cursor:pointer;transition:.2s}
.btn-new:hover{box-shadow:var(--glow);border-color:var(--accent)}
.search-box{margin-top:10px}
.search-box input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#0a1030;color:var(--text);outline:none}
.side-label{padding:8px 16px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.chat-list{flex:1;overflow:auto;padding:0 8px 12px}
.chat-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;cursor:pointer;color:#cfd6f5}
.chat-item:hover{background:#131b45}
.chat-item.active{background:#18225a;border:1px solid #2a3770}
.chat-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-actions{opacity:0;transition:.15s}
.chat-item:hover .chat-actions{opacity:1}
.icon-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:8px}
.icon-btn:hover{color:var(--text);background:#1a2350}
.side-bottom{border-top:1px solid var(--line);padding:12px 14px}
.user-row{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:700}
.uname{flex:1;overflow:hidden;text-overflow:ellipsis}
/* Main */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
.top-title{font-weight:600}
.burger{display:none}
.hero{text-align:center;margin:auto;padding:20px;animation:fade .4s ease}
.hero-star{font-size:44px;color:var(--accent);text-shadow:var(--glow)}
.hero h1{margin:6px 0;font-size:40px;letter-spacing:.5px}
.hero-sub{color:var(--muted);font-size:18px}
.messages{flex:1;overflow:auto;padding:24px;max-width:860px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.msg{max-width:100%;animation:fade .25s ease}
.msg-user{align-self:flex-end;background:linear-gradient(135deg,#22306e,#1a2456);border:1px solid #2b3a80;border-radius:14px 14px 4px 14px;padding:10px 14px;max-width:75%}
.msg-assistant{align-self:flex-start;width:100%;background:rgba(13,20,48,.6);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.msg-body{white-space:normal;word-wrap:break-word}
.msg-body pre{background:#070b22;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;position:relative}
.msg-body code{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.msg-body table{border-collapse:collapse;width:100%;margin:8px 0}
.msg-body th,.msg-body td{border:1px solid var(--line);padding:6px 10px}
.msg-body blockquote{border-left:3px solid var(--accent);margin:8px 0;padding:4px 12px;color:#c6cdf2}
.msg-tools{opacity:0;transition:.15s;margin-top:6px;display:flex;gap:8px}
.msg-assistant:hover .msg-tools{opacity:1}
.mini-btn{background:#141c4a;border:1px solid var(--line);color:#cfd6f5;border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12px}
.mini-btn:hover{border-color:var(--accent)}
.copy-code{float:right;font-size:11px}
/* Composer */
.composer-wrap{padding:14px;max-width:860px;width:100%;margin:0 auto}
.composer{display:flex;gap:10px;align-items:flex-end;background:#0b1132;border:1px solid #2a3770;border-radius:20px;padding:10px 10px 10px 18px;box-shadow:var(--glow)}
.composer textarea{flex:1;background:transparent;border:0;outline:none;color:var(--text);resize:none;max-height:160px;font-size:15px}
.send-btn{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:17px}
.send-btn:disabled{opacity:.35;cursor:default}
.hint{color:var(--muted);font-size:12px;text-align:center;margin-top:6px}
.typing{color:var(--muted);font-size:13px;margin-bottom:8px}
.typing .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:4px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;width:360px;box-shadow:var(--glow)}
.auth-logo{font-size:24px;font-weight:800}
.auth-sub{color:var(--muted);margin:4px 0 16px}
.auth-card input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0a1030;color:var(--text);margin-bottom:4px}
.btn-primary{width:100%;padding:11px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;cursor:pointer;font-weight:600}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a2350;border:1px solid var(--accent);padding:10px 18px;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}
.backdrop{display:none}
@media(max-width:860px){
  .sidebar{position:fixed;z-index:20;height:100vh;transform:translateX(-100%);transition:.25s;margin-left:0!important}
  .app.open .sidebar{transform:none}
  .app.collapsed .sidebar{transform:translateX(-100%)}
  .burger{display:block}
  .collapse-btn{display:none}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10}
  .app.open .backdrop{display:block}
  .msg-user{max-width:92%}
  .messages{padding:14px}
  body{overflow-x:hidden}
}