:root {
  color-scheme: light;
  --bg: #f7f8fb; --sidebar: #fff; --panel: #fff; --ink: #172033; --muted: #69758a;
  --line: #e4e9f2; --hover: #eef4ff; --blue: #1677e8; --teal: #18b8a6;
  --danger: #bb3636; --shadow: 0 16px 40px rgba(50, 70, 110, .10);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); background: var(--bg); }
button, textarea { font: inherit; } button { color: inherit; } button:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22,119,232,.32); outline-offset: 2px; }
.app-shell { height: 100vh; display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; }
.sidebar { min-height: 0; display: flex; flex-direction: column; gap: 15px; padding: 18px 14px; background: var(--sidebar); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; height: 58px; padding: 6px 10px; text-decoration: none; }
.brand img { width: 178px; max-width: 100%; height: auto; display: block; }
.nav-list, .history-list { display: grid; gap: 7px; }
.nav-item, .history-item { width: 100%; min-height: 44px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.nav-item { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 10px; font-weight: 650; }
.nav-item:hover, .nav-item.active, .history-item:hover { background: var(--hover); }
.icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); font-weight: 800; }
.model-card { display: grid; gap: 8px; padding: 13px; border: 1px solid #d5e6ff; border-radius: 12px; background: linear-gradient(135deg,#f6faff,#f4fffc); }
.model-card strong { font-size: 14px; }.model-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.42; }
.progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e6edf7; }.progress-track > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--teal)); transition: width .2s ease; }
.model-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.model-actions button, .primary-cta { min-height: 36px; border: 0; border-radius: 8px; cursor: pointer; color: #fff; background: linear-gradient(135deg,var(--blue),var(--teal)); font-size: 12px; font-weight: 700; }.model-actions .secondary { color: #2762aa; background: #e8f2ff; }
.history-panel { min-height: 0; display: grid; align-content: start; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); overflow: auto; }.history-panel h2 { margin: 0 10px 6px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }.history-item { padding: 8px 10px; color: #2b354a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.history-item.active { background: var(--hover); color: #0f52bf; font-weight: 650; }.history-empty { margin: 4px 10px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.chat-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: radial-gradient(circle at 80% 12%,rgba(22,119,232,.08),transparent 32%),radial-gradient(circle at 24% 86%,rgba(24,184,166,.08),transparent 30%),var(--bg); }
.chat-header { min-height: 64px; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 12px; padding: 10px 22px; }.chat-header strong,.chat-header span { display:block; }.chat-header span { margin-top:2px; color:var(--muted); font-size:13px; }
.menu-button,.profile-button,.tool-button,.send-button { border:0; cursor:pointer; display:grid; place-items:center; }.menu-button,.profile-button { width:40px; height:40px; border-radius:50%; background:var(--panel); box-shadow:0 8px 20px rgba(50,70,110,.08); }.profile-button { justify-self:end; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--blue),var(--teal)); }
.chat-stage { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); justify-items:center; gap:24px; padding:44px 24px 24px; overflow:auto; }.empty-state { width:min(720px,100%); display:grid; justify-items:center; gap:20px; padding-top:26px; text-align:center; }.empty-state.hidden { display:none; }.empty-state img { width:min(260px,74vw); height:auto; display:block; mix-blend-mode:multiply; }.empty-state h1 { margin:0; font-size:clamp(32px,5vw,48px); line-height:1.05; font-weight:760; }.empty-state p { max-width:590px; margin:-6px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }.empty-state .privacy-note { margin-top:-11px; font-size:12px; }.primary-cta { min-width:190px; padding:0 16px; font-size:14px; }
.messages { width:min(820px,100%); display:grid; align-content:start; gap:18px; }.message { display:grid; gap:8px; line-height:1.55; }.message p { margin:0; white-space:pre-wrap; }.message.user { justify-self:end; max-width:min(620px,88%); padding:12px 15px; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--teal)); box-shadow:var(--shadow); }.message.assistant { justify-self:start; max-width:min(900px,98%); grid-template-columns:34px minmax(0,1fr); align-items:start; }.message.assistant img { width:34px; height:34px; object-fit:contain; border-radius:8px; }.assistant-bubble { padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.88); box-shadow:0 10px 28px rgba(50,70,110,.08); }.message.pending .assistant-bubble { color:var(--muted); }.assistant-bubble .notice { display:block; margin-top:9px; color:#64728a; font-size:12px; }.assistant-bubble.error { border-color:#f1c9c9; color:#8d3030; background:#fffafa; }
.composer { width:min(860px,calc(100% - 32px)); min-height:62px; justify-self:center; display:grid; grid-template-columns:42px minmax(0,1fr) 46px; align-items:end; gap:8px; margin:0 16px 20px; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 18px 44px rgba(50,70,110,.12); }.composer textarea { min-width:0; max-height:160px; height:40px; resize:none; border:0; outline:0; padding:9px 0; color:var(--ink); background:transparent; line-height:1.35; }.composer textarea::placeholder { color:#8a95a8; }.tool-button,.send-button { width:40px; height:40px; border-radius:50%; }.tool-button { color:var(--muted); background:#f2f5fa; font-size:18px; }.send-button { color:#fff; background:linear-gradient(135deg,var(--blue),var(--teal)); font-size:19px; }.noscript { padding:16px; text-align:center; }
@media (max-width:760px) { .app-shell { grid-template-columns:1fr; height:auto; min-height:100vh; overflow:visible; }.sidebar { display:none; position:fixed; z-index:5; inset:0 16% 0 0; overflow:auto; box-shadow:20px 0 50px rgba(23,32,51,.22); }.sidebar.open { display:flex; }.chat-workspace { min-height:100vh; }.chat-stage { padding:30px 16px 18px; }.composer { width:calc(100% - 20px); margin:0 10px 10px; }.history-panel { min-height:160px; }.empty-state { padding-top:8px; }.empty-state img { width:min(220px,65vw); } }