:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --page:#f8fafc;
  --surface:#fff;
  --surface-soft:#f1f5f9;
  --text:#151d2f;
  --body-text:#1e293b;
  --muted:#536477;
  --border:#dfe6ef;
  --accent:#1f6f8f;
  --accent-hover:#3a9bc2;
  --button-text:#fff;
  --active:#5bb8d91a;
  --shadow:#151d2f14;
  --code:#151d2f;
  --code-toolbar:#1e293b;
  --code-text:#f8fafc;
  --focus:#1f6f8f;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0f1724;
  --surface:#172132;
  --surface-soft:#202d42;
  --text:#f2f6fc;
  --body-text:#d8e2ef;
  --muted:#a9b8ca;
  --border:#34455c;
  --accent:#5bb8d9;
  --accent-hover:#85d2e9;
  --button-text:#102030;
  --active:#5bb8d92b;
  --shadow:#0000004d;
  --code:#0f1724;
  --code-toolbar:#142035;
  --code-text:#f0f6fd;
  --focus:#85d2e9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --page:#0f1724;
    --surface:#172132;
    --surface-soft:#202d42;
    --text:#f2f6fc;
    --body-text:#d8e2ef;
    --muted:#a9b8ca;
    --border:#34455c;
    --accent:#5bb8d9;
    --accent-hover:#85d2e9;
    --button-text:#102030;
    --active:#5bb8d92b;
    --shadow:#0000004d;
    --code:#0f1724;
    --code-toolbar:#142035;
    --code-text:#f0f6fd;
    --focus:#85d2e9;
  }
}

* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; background:var(--page); color:var(--body-text); }
.shell { width:100%; max-width:1080px; min-height:100vh; min-height:100dvh; height:100vh; height:100dvh; max-height:100dvh; margin:0 auto; padding:32px 20px; display:flex; flex-direction:column; }
.shell.shell-wide { max-width:1600px; }
.shell.chat-active { padding:16px 20px; }
.landing-brand { display:flex; flex:none; align-items:center; margin-bottom:28px; color:var(--text); }
.landing-brand h1, .landing-brand p { margin:0; }
.landing-brand p { color:var(--muted); font-size:14px; }
.shell.chat-active .landing-brand { display:none; }

.card { max-width:520px; margin:80px auto; padding:32px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:0 12px 40px var(--shadow); }
.card h2 { margin-top:0; color:var(--text); }
label { display:grid; gap:8px; color:var(--body-text); font-weight:650; }
input, textarea { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--body-text); font:inherit; resize:vertical; }
button { border:0; border-radius:10px; padding:12px 18px; background:var(--accent); color:var(--button-text); font:inherit; font-weight:700; cursor:pointer; }
button:hover { background:var(--accent-hover); color:var(--button-text); }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
button:disabled { cursor:default; opacity:0.55; }
.card button { width:100%; margin-top:16px; }
.secondary { background:var(--surface-soft); color:var(--body-text); }
.secondary:hover { background:var(--border); color:var(--text); }
.compact { padding:7px 11px; }
.status { min-height:1.4em; color:var(--muted); }
.hidden { display:none !important; }

.workspace { display:grid; grid-template-columns:260px minmax(0, 1fr); flex:1 1 auto; min-height:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:0 12px 40px var(--shadow); }
aside { display:flex; flex-direction:column; min-height:0; padding:16px 20px; border-right:1px solid var(--border); background:var(--page); }
.aside-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.aside-brand-copy { min-width:0; }
.aside-brand-copy strong, .aside-brand-copy span { display:block; }
.aside-brand-copy strong { color:var(--text); font-size:14px; }
.aside-brand-copy span { color:var(--muted); font-size:11px; line-height:1.25; }
.icon-button { display:grid; flex:none; width:34px; height:34px; padding:0; place-items:center; }
.icon-button svg, .message-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.aside-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.aside-head h2 { margin:0; color:var(--text); font-size:18px; }
.aside-head-actions { display:flex; align-items:center; gap:6px; }
#dialogs { display:grid; flex:1; min-height:0; overflow-y:auto; align-content:start; gap:7px; }
.dialog { padding:10px; background:transparent; color:var(--body-text); text-align:left; }
.dialog:hover { background:var(--surface-soft); color:var(--text); }
.dialog.active { background:var(--active); color:var(--text); }

article { min-width:0; min-height:0; padding:26px; }
.empty { display:grid; min-height:0; height:100%; place-content:center; color:var(--muted); text-align:center; }
.conversation { display:grid; grid-template-rows:auto minmax(0, 1fr) auto; min-height:0; height:100%; }
.conversation-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 8px 14px; }
.conversation-head h2 { min-width:0; margin:0; color:var(--text); overflow-wrap:anywhere; }
.conversation-actions { display:flex; flex:none; align-items:center; gap:6px; }
.conversation-actions .icon-button { border:1px solid var(--border); }
.chat-width-toggle[aria-pressed="true"], .theme-toggle[aria-pressed="true"] { background:var(--accent); color:var(--button-text); }
.theme-sun { display:none; }
.theme-moon { display:block; }
.theme-toggle[aria-pressed="true"] .theme-sun { display:block; }
.theme-toggle[aria-pressed="true"] .theme-moon { display:none; }

#history { min-height:0; overflow-y:auto; padding:8px; }
.message { max-width:78%; margin:10px 0; padding:11px 14px; border-radius:14px; white-space:pre-wrap; }
.user { margin-left:auto; background:var(--accent); color:var(--button-text); }
.assistant { background:var(--surface-soft); color:var(--body-text); white-space:normal; }
.assistant.message-has-table { width:100%; max-width:100%; }
.working-status { padding:8px 10px; color:var(--muted); font-size:14px; }

.markdown > :first-child { margin-top:0; }
.markdown > :last-child { margin-bottom:0; }
.markdown-paragraph { margin:0.65em 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.markdown-heading { margin:0.8em 0 0.4em; font-size:1.04em; }
.markdown-list { margin:0.65em 0; padding-left:1.35em; }
.markdown-inline-code { padding:0.12em 0.32em; border-radius:4px; background:var(--border); font:0.92em ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-code-block { max-width:100%; margin:0.75em 0; overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--code); color:var(--code-text); }
.markdown-code-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; background:var(--code-toolbar); }
.markdown-code-language { color:var(--code-text); font:12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-copy { flex:none; padding:5px 8px; border:1px solid var(--muted); border-radius:6px; background:var(--surface); color:var(--text); font-size:12px; }
.markdown-copy:hover { background:var(--border); color:var(--text); }
.markdown-code { max-width:100%; margin:0; padding:12px; overflow:auto; white-space:pre; font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-code code { font:inherit; }
.markdown-table-wrap { max-width:100%; margin:0.75em 0; overflow-x:auto; overscroll-behavior-inline:contain; }
.markdown-table { width:max-content; min-width:100%; border-collapse:collapse; }
.markdown-table th, .markdown-table td { padding:7px 9px; border:1px solid var(--border); vertical-align:top; }
.markdown-table th { background:var(--surface-soft); }
.markdown-table-align-left { max-width:min(40ch, 55vw); overflow-wrap:anywhere; text-align:left; }
.markdown-table-align-right { min-width:9ch; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.markdown-table-align-center { text-align:center; }
.markdown-truncated { color:var(--muted); font-size:0.9em; }

#message-form { padding-top:10px; border-top:1px solid var(--border); }
.composer { position:relative; }
.message-resize-handle { display:grid; height:12px; place-items:center; cursor:ns-resize; touch-action:none; }
.message-resize-handle span { width:36px; height:3px; border-radius:999px; background:var(--border); }
.message-resize-handle:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.message-resize-handle:hover span { background:var(--muted); }
#message-input { min-height:84px; max-height:280px; padding:10px 94px 10px 14px; resize:none; }
.composer-actions { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; }
.message-action { display:grid; width:38px; height:38px; padding:0; place-items:center; }
.message-action.secondary { border:1px solid var(--border); }

@media (max-width:720px) {
  .shell.shell-wide { max-width:1080px; }
  .shell.chat-active { padding:10px; }
  .chat-width-toggle { display:none; }
  .workspace { grid-template-columns:1fr; grid-template-rows:minmax(0, auto) minmax(0, 1fr); }
  aside { max-height:210px; max-height:min(210px, 32dvh); border-right:0; border-bottom:1px solid var(--border); }
  article { padding:16px; }
}