:root {
  --bg-page: #eef4fb;
  --bg-sidebar: #f7f9fc;
  --bg-main: #ffffff;
  --bg-hover: #eef2f8;
  --bg-card: #f4f6f8;
  --border: #e3e9f2;
  --text-1: #1c2330;
  --text-2: #5a6779;
  --text-3: #93a0b4;
  --brand: #2f6df6;
  --brand-soft: #e8f0ff;
  --btn-primary: #1a1a1a;
  --ok: #17a673;
  --warn: #e8873a;
  --danger: #dc3d4a;
  --info: #2563eb;
  --radius: 10px;
  --radius-lg: 14px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 56px;
  /* The chat reading column. Grows with the window instead of sitting at a
     fixed width, but stays capped: past ~1400px a line of prose is hard to
     track back to the next one. The body and the composer must read the same
     value or the input box stops lining up with the answers above it. */
  --chat-col: clamp(720px, 78vw, 1400px);
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-1);
  background: linear-gradient(var(--bg-page), var(--bg-main));
}

h1, h2, h3 { margin: 0 0 12px; font-weight: 600; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 8px; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

textarea { font-family: inherit; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#view:focus { outline: none; }

.muted { color: var(--text-3); }