:root {
  --bg: #090b10;
  --panel: #10131a;
  --panel2: #151924;
  --line: #252b38;
  --text: #f3f5f8;
  --muted: #9199aa;
  --accent: #6e7cff;
  --accent2: #9c6cff;
  --danger: #ff647c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.3em; margin-top: 12px; font-size: 14px; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 20%, #192040 0, #0b0d13 36%, #090b10 70%); }
.auth-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: rgba(16,19,26,.9); box-shadow: 0 28px 90px rgba(0,0,0,.45); }
.auth-card h1 { margin: 16px 0 6px; font-size: 32px; }
.brand-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 900; font-size: 25px; background: linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow: 0 10px 30px rgba(110,124,255,.2); }
.brand-mark.small { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.brand-mark.hero { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px; }
.auth-tabs { display: flex; gap: 6px; margin: 26px 0 18px; padding: 4px; background: #0b0e14; border-radius: 12px; }
.auth-tabs button { flex:1; border:0; color:var(--muted); background:transparent; padding:10px; border-radius:9px; }
.auth-tabs button.active { background:var(--panel2); color:var(--text); }
label { display:block; color:var(--muted); font-size:13px; margin:12px 0; }
input, textarea, select { width:100%; color:var(--text); background:#0b0e14; border:1px solid var(--line); border-radius:12px; outline:none; }
input { padding:12px 13px; margin-top:6px; }
input:focus, textarea:focus, select:focus { border-color:#6674db; box-shadow:0 0 0 3px rgba(110,124,255,.12); }
.primary { border:0; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:white; padding:11px 14px; border-radius:11px; font-weight:700; }
.auth-card .primary { width:100%; margin-top:10px; }
.wide { width:100%; }
.ghost { border:1px solid var(--line); background:transparent; color:var(--text); padding:10px 12px; border-radius:11px; }
.app { height:100vh; display:grid; grid-template-columns:280px 1fr; overflow:hidden; }
.sidebar { background:#0d1016; border-right:1px solid var(--line); padding:16px; display:flex; flex-direction:column; min-width:0; }
.brand { display:flex; align-items:center; gap:11px; margin:3px 4px 18px; }
.side-title { color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.12em; margin:22px 8px 8px; }
.conversation-list { overflow:auto; flex:1; }
.conv { display:flex; gap:6px; align-items:center; border-radius:10px; padding:3px; margin-bottom:3px; }
.conv.active { background:var(--panel2); }
.conv button.title { min-width:0; flex:1; border:0; background:transparent; color:#cbd1dc; text-align:left; padding:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv .delete { visibility:hidden; }
.conv:hover .delete { visibility:visible; }
.sidebar-bottom { border-top:1px solid var(--line); padding-top:12px; display:grid; gap:8px; }
.user-row { display:flex; justify-content:space-between; align-items:center; color:var(--muted); padding:6px 4px 0; }
.icon-btn { border:0; background:transparent; color:var(--muted); font-size:20px; padding:5px 8px; border-radius:8px; }
.icon-btn:hover { background:var(--panel2); color:var(--text); }
.main { min-width:0; display:grid; grid-template-rows:auto 1fr auto; background:radial-gradient(circle at 70% 0%, rgba(110,124,255,.08), transparent 28%), var(--bg); }
.topbar { min-height:72px; border-bottom:1px solid rgba(37,43,56,.65); display:flex; align-items:center; justify-content:space-between; padding:12px 22px; gap:20px; }
.chat-title { font-weight:700; }
.status { font-size:12px; color:var(--muted); margin-top:3px; }
.status.good { color:#77d6a2; }
.status.bad { color:#ffb264; }
.controls { display:flex; gap:9px; }
.controls select { width:auto; max-width:210px; padding:9px 34px 9px 11px; }
.messages { overflow:auto; padding:34px max(24px, calc((100% - 880px)/2)); }
.welcome { max-width:700px; margin:11vh auto 0; text-align:center; color:var(--muted); }
.welcome h2 { color:var(--text); font-size:30px; margin:8px 0; }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:25px; }
.chips button { border:1px solid var(--line); color:#cbd1dc; background:var(--panel); border-radius:999px; padding:10px 14px; }
.message { max-width:840px; margin:0 auto 24px; display:grid; grid-template-columns:38px 1fr; gap:12px; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--panel2); font-size:12px; font-weight:800; }
.message.assistant .avatar { background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.message .body { white-space:pre-wrap; line-height:1.62; color:#e7eaf0; overflow-wrap:anywhere; }
.message.user .body { color:#f5f6f8; }
.context-note { font-size:12px; color:var(--muted); margin-top:8px; }
.composer-wrap { padding:12px max(24px, calc((100% - 880px)/2)) 17px; background:linear-gradient(transparent, var(--bg) 18%); }
.composer { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:10px; box-shadow:0 12px 44px rgba(0,0,0,.28); }
.composer textarea { resize:none; border:0; background:transparent; padding:9px 10px; min-height:44px; max-height:190px; }
.composer textarea:focus { box-shadow:none; }
.send { border:0; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:white; width:42px; height:42px; border-radius:12px; font-size:17px; }
.send:disabled { opacity:.4; cursor:not-allowed; }
.footnote { text-align:center; color:#666e7e; font-size:11px; margin-top:8px; }
dialog { width:min(650px, calc(100% - 32px)); color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 24px 80px rgba(0,0,0,.6); }
dialog::backdrop { background:rgba(0,0,0,.66); backdrop-filter:blur(4px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; }
.dialog-head h3 { margin:0; }
.inline-form { display:grid; grid-template-columns:1fr auto; gap:8px; margin:18px 0; }
.inline-form input { margin:0; }
.stack { display:grid; gap:8px; margin-top:14px; max-height:360px; overflow:auto; }
.card-row { border:1px solid var(--line); background:#0d1016; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:start; gap:12px; }
.card-row .meta { font-size:11px; color:var(--muted); margin-top:4px; }
.dropzone { border:1px dashed #4a5267; border-radius:14px; padding:22px; text-align:center; margin:16px 0 10px; background:#0d1016; }
.dropzone input { display:none; }
#toast { position:fixed; right:18px; bottom:18px; z-index:50; background:#171c27; color:white; border:1px solid var(--line); border-radius:11px; padding:11px 14px; opacity:0; pointer-events:none; transition:.2s; }
#toast.show { opacity:1; }
@media(max-width:800px){ .app{grid-template-columns:1fr}.sidebar{display:none}.topbar{padding:10px 14px}.controls{max-width:52%}.messages,.composer-wrap{padding-left:14px;padding-right:14px}.message{grid-template-columns:32px 1fr}.welcome{margin-top:5vh} }