:root {
    color-scheme: dark;
    --bg:#101319; --panel:#171c25; --panel2:#1d2430;
    --border:#2b3442; --text:#e8edf5; --muted:#929dad;
    --accent:#668cf5; --accent-hover:#7da0ff;
    --danger:#d96b70;
}
* { box-sizing:border-box; }
body {
    margin:0; background:var(--bg); color:var(--text);
    font:14px/1.55 Inter,system-ui,-apple-system,sans-serif;
}
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.app { display:flex; height:100vh; min-height:500px; }
.sidebar {
    width:270px; flex:0 0 270px; display:flex; flex-direction:column;
    background:#141922; border-right:1px solid var(--border);
}
.sidebar-top { padding:20px 15px 12px; }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:650; }
.brand-icon {
    display:grid; place-items:center; width:31px; height:31px;
    border-radius:9px; background:var(--accent); color:white;
    font-size:13px; font-weight:800;
}
.new-chat {
    margin-top:22px; width:100%; padding:10px; border:1px solid var(--border);
    background:var(--panel2); color:var(--text); border-radius:9px; text-align:left;
}
.new-chat:hover,.icon-button:hover { background:#293448; }
.chat-list { flex:1; overflow:auto; padding:8px; }
.chat-item {
    display:flex; align-items:center; gap:5px; padding:9px 10px;
    border-radius:8px; margin-bottom:3px; color:#c8d0dc;
}
.chat-item.active { background:#263249; color:white; }
.chat-title { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.chat-actions { display:flex; gap:3px; }
.chat-actions button {
    border:0; background:transparent; color:var(--muted);
    padding:3px 5px; border-radius:5px;
}
.chat-actions button:hover { background:#384356; color:white; }
.sidebar-bottom {
    border-top:1px solid var(--border); padding:13px 16px;
    display:flex; align-items:center; justify-content:space-between;
}
.logout { border:0; background:transparent; color:var(--muted); }
.main { min-width:0; flex:1; display:flex; flex-direction:column; }
.topbar {
    min-height:65px; padding:12px 22px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.model-settings { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.model-settings label { color:var(--muted); font-size:12px; }
select,input,textarea {
    color:var(--text); background:var(--panel2);
    border:1px solid var(--border); border-radius:8px; padding:8px;
}
#modelSelect { max-width:min(340px,40vw); }
#temperature { width:65px; }
.status { color:var(--muted); font-size:12px; white-space:nowrap; }
.status.online { color:#65c995; }
.status.offline { color:var(--danger); }
.icon-button {
    border:1px solid var(--border); background:var(--panel);
    color:var(--text); border-radius:8px; padding:7px 11px;
}
.conversation { flex:1; overflow:auto; padding:28px 18px; }
.welcome { text-align:center; margin:12vh auto 0; color:var(--muted); }
.welcome h1 { color:var(--text); font-size:27px; font-weight:600; }
.welcome-icon { font-size:36px; color:var(--accent); }
.messages { max-width:900px; margin:0 auto; }
.message { display:flex; gap:14px; padding:20px 12px; border-bottom:1px solid #242b36; }
.avatar {
    flex:0 0 31px; width:31px; height:31px; border-radius:9px;
    display:grid; place-items:center; background:#29364b; color:#a9c0ff;
    font-weight:700;
}
.message.user .avatar { background:#34463e; color:#a8dfbd; }
.message-content { min-width:0; flex:1; overflow-wrap:anywhere; }
.message-content p { margin:0 0 12px; }
.message-content pre {
    overflow:auto; padding:14px; background:#0b0e13;
    border:1px solid var(--border); border-radius:8px;
}
.message-content code {
    font-family:ui-monospace,monospace; background:#242c39;
    padding:2px 4px; border-radius:4px;
}
.message-content pre code { padding:0; background:transparent; }
.message-content table { border-collapse:collapse; display:block; overflow:auto; }
.message-content th,.message-content td {
    border:1px solid var(--border); padding:7px 10px; text-align:left;
}
.message-content blockquote {
    border-left:3px solid var(--accent); margin:10px 0; padding:3px 12px; color:var(--muted);
}
.message-content a { color:#91adff; }
.composer-wrap { padding:12px 20px 10px; }
.composer {
    max-width:900px; margin:0 auto; border:1px solid #3a4556;
    background:var(--panel); border-radius:13px; padding:12px;
}
.composer textarea {
    width:100%; border:0; outline:0; resize:none; background:transparent;
    min-height:42px; max-height:200px; padding:5px;
}
.composer-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hint,.footer-note { color:var(--muted); font-size:11px; }
.footer-note { text-align:center; margin:8px 0 0; }
.primary,.stop {
    border:0; border-radius:8px; padding:9px 15px; color:white;
    background:var(--accent); font-weight:600;
}
.primary:hover { background:var(--accent-hover); }
.primary:disabled { opacity:.5; cursor:not-allowed; }
.stop { background:#9e454c; margin-right:6px; }
.full { width:100%; margin-top:20px; }
.mobile-menu { display:none; background:transparent; border:0; color:white; font-size:20px; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card {
    width:min(390px,100%); padding:30px; background:var(--panel);
    border:1px solid var(--border); border-radius:15px;
}
.login-card h1 { margin:28px 0 3px; font-size:23px; }
.muted { color:var(--muted); }
.login-card label { display:block; margin:17px 0 6px; color:#c5ceda; }
.login-card input { width:100%; padding:11px; }
.error { margin-top:15px; padding:10px; color:#ffb1b1; background:#48272c; border-radius:8px; }
[hidden] { display:none !important; }
@media(max-width:700px) {
    .sidebar { position:fixed; z-index:5; inset:0 auto 0 0; transform:translateX(-100%); transition:.2s; }
    .sidebar.open { transform:translateX(0); }
    .mobile-menu { display:block; }
    .topbar { padding:10px; align-items:flex-start; }
    .model-settings { gap:6px; }
    .model-settings label { display:none; }
    #modelSelect { max-width:48vw; }
    .status { display:none; }
    .conversation { padding:12px 7px; }
    .composer-wrap { padding:8px; }
    .hint { display:none; }
}