/* Anything marked hidden stays hidden, whatever display a class sets. */
  [hidden] { display: none !important; }
  :root {
    --bg: #f3f6f9; --panel: #ffffff; --ink: #0b1622; --muted: #5a6878;
    --line: #dbe3eb; --accent: #08739a; --accent-ink: #ffffff;
    --user-bg: #e2f1f8; --tool-bg: #edf1f5; --err: #b3372b;
    --radius: 12px;
    /* The icon's cyan as a tint and a glow; dark mode glows harder. */
    --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --glow: 0 1px 4px rgba(8, 115, 154, .25);
    --glow-strong: 0 2px 10px rgba(8, 115, 154, .35);
    /* Notepad colours (public/js/notepad.js): pens, then highlighters. */
    --pad-red: #d62828; --pad-blue: #1d4ed8; --pad-green: #15803d; --pad-orange: #ea580c; --pad-purple: #7c3aed; --pad-grey: #6b7280;
    --pad-hl-yellow: #facc15; --pad-hl-green: #4ade80; --pad-hl-pink: #f472b6; --pad-hl-blue: #60a5fa; --pad-hl-orange: #fb923c;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #070d14; --panel: #0d1620; --ink: #e4edf5; --muted: #8798ab;
      --line: #1c2a39; --accent: #3fd0ff; --accent-ink: #04121c;
      --user-bg: #10283a; --tool-bg: #0b1520; --err: #ff7b6b;
      --glow: 0 0 12px rgba(63, 208, 255, .28);
      --glow-strong: 0 0 20px rgba(63, 208, 255, .45);
      --pad-red: #ff6b6b; --pad-blue: #6ea8ff; --pad-green: #4ade80; --pad-orange: #fb923c; --pad-purple: #b794ff; --pad-grey: #9ca3af;
      --pad-hl-yellow: #fde047; --pad-hl-green: #86efac; --pad-hl-pink: #f9a8d4; --pad-hl-blue: #93c5fd; --pad-hl-orange: #fdba74;
    }
  }
  /*
   * E-ink display: black on white whatever the system's dark mode, greys only
   * where a state must show (selected, own message), and nothing that moves:
   * every repaint ghosts on e-paper.
   */
  :root[data-display="eink"] {
    color-scheme: light;
    --bg: #ffffff; --panel: #ffffff; --ink: #000000; --muted: #333333;
    --line: #000000; --accent: #000000; --accent-ink: #ffffff;
    --user-bg: #e8e8e8; --tool-bg: #f4f4f4; --err: #000000;
    --accent-soft: #d8d8d8;
    --glow: none; --glow-strong: none;
    /* No colour on e-paper: pens are black, highlighters grey. */
    --pad-red: #000; --pad-blue: #000; --pad-green: #000; --pad-orange: #000; --pad-purple: #000; --pad-grey: #555;
    --pad-hl-yellow: #bbb; --pad-hl-green: #bbb; --pad-hl-pink: #bbb; --pad-hl-blue: #bbb; --pad-hl-orange: #bbb;
    --pad-hl-alpha: .6;
  }
  /*
   * Colour e-ink (Kaleido and the like): light whatever the system says and
   * nothing that moves, as above, but in colour. E-paper mutes colours, so
   * they're strong and saturated; lines stay black for contrast.
   */
  :root[data-display="eink-color"] {
    color-scheme: light;
    --bg: #ffffff; --panel: #ffffff; --ink: #000000; --muted: #333333;
    --line: #000000; --accent: #0047c8; --accent-ink: #ffffff;
    --user-bg: #d6e4ff; --tool-bg: #f0f0f0; --err: #d00000;
    --accent-soft: #c9dbff;
    --glow: none; --glow-strong: none;
    --pad-red: #e00000; --pad-blue: #0040ff; --pad-green: #008a00; --pad-orange: #ff7000; --pad-purple: #8a00d4; --pad-grey: #555555;
    --pad-hl-yellow: #ffe600; --pad-hl-green: #4dff4d; --pad-hl-pink: #ff4dc4; --pad-hl-blue: #4dc3ff; --pad-hl-orange: #ffa020;
    /* Highlighters less see-through: pale colours vanish on e-paper. */
    --pad-hl-alpha: .6;
  }
  :root[data-display="eink-color"] .err, :root[data-display="eink-color"] .overdue { font-weight: 700; }
  :root:is([data-display="eink"], [data-display="eink-color"]) *, :root:is([data-display="eink"], [data-display="eink-color"]) *::before, :root:is([data-display="eink"], [data-display="eink-color"]) *::after {
    animation: none !important; transition: none !important;
    box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important;
    scroll-behavior: auto !important;
  }
  /* Errors can't be red: bold instead. Coloured text (stars, file states, severity) would be pale grey: black. */
  :root[data-display="eink"] .err, :root[data-display="eink"] .overdue { font-weight: 700; }
  :root[data-display="eink"] :is(.starred, .tree-file, .tree-dir, .tree-file .st, .sev-high) { color: #000000 !important; }
  :root[data-display="eink"] :is(.banner.sev-high, .notif-item.sev-high) { border-left-color: #000000; }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--bg); color: var(--ink);
    font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex; flex-direction: column;
  }
  header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--line);
    background: var(--panel); position: sticky; top: 0; z-index: 5;
  }
  header h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: .01em; }
  /* Conversations (threads) of the agent on screen: the switcher and its list. */
  .thread-wrap { position: relative; min-width: 0; }
  #thread-btn { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 5px 10px; }
  .thread-item { display: flex; gap: 6px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
  .thread-item:hover, .thread-item.on { background: var(--accent-soft); }
  .thread-item .main { flex: 1; min-width: 0; }
  .thread-item .t { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .thread-item .m { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .thread-item button { padding: 2px 6px; font-size: 12px; border: none; background: none; box-shadow: none; opacity: .6; }
  .thread-item button:hover { opacity: 1; }
  .thread-item button.starred, #thread-star.starred { opacity: 1; color: #e0a800; }
  .thread-wrap { display: inline-flex; gap: 4px; align-items: center; }
  .conv-link .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .conv-link .conv-star { border: none; background: none; box-shadow: none; padding: 0 4px; font-size: 13px; opacity: 0; color: var(--muted); }
  .conv-link:hover .conv-star, .conv-link .conv-star.starred { opacity: 1; }
  .conv-link .conv-star.starred { color: #e0a800; }
  .conv-more { font-size: 12px; color: var(--muted); background: none; border: none; box-shadow: none; padding: 4px 12px; text-align: left; cursor: pointer; }
  .conv-more:hover { color: var(--accent); }
  /* The Conversations page. */
  .conv-tools { display: flex; gap: 10px; margin: 16px 0 6px; flex-wrap: wrap; }
  .conv-tools input { flex: 1; min-width: 200px; }
  .conv-section { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .conv-section > h2 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .conv-section > h2 .count { font-size: 11px; font-weight: 600; background: var(--tool-bg); border-radius: 10px; padding: 1px 7px; letter-spacing: 0; }
  .conv-card { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: border-color .15s; }
  .conv-card:hover { border-color: var(--accent); }
  .conv-card .conv-star { opacity: 1; font-size: 18px; line-height: 1; padding: 2px 2px 0; }
  .conv-card .body { min-width: 0; }
  .conv-card .name { font-size: 15px; font-weight: 600; font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-card .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 3px; }
  .conv-card .preview { font-size: 13px; color: var(--muted); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .conv-card .acts { display: flex; gap: 6px; }
  .conv-card .acts button { font-size: 12px; padding: 3px 10px; }
  @media (max-width: 600px) { .conv-card { grid-template-columns: auto 1fr; } .conv-card .acts { grid-column: 1 / -1; justify-content: flex-end; } }
  .agent-pick { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; min-width: 220px; }
  .agent-pick button { display: flex; gap: 8px; width: 100%; text-align: left; border: none; background: none; box-shadow: none; padding: 7px 10px; border-radius: 6px; }
  .agent-pick button:hover { background: var(--accent-soft); }
  @media (max-width: 600px) { #thread-btn { max-width: 140px; } }
  header .spacer { flex: 1; }
  /* Thin cyan line under the header, fading out at the edges like the icon's rings. */
  header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: .45;
  }
  .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--glow);
  }
  /* Element rules skip Monaco (the Code page's editor): it styles its own hidden textarea and widgets. */
  button:where(:not(.monaco-editor *)) {
    font: inherit; font-size: 13px; color: var(--ink); background: transparent;
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
    cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
  }
  button:where(:not(.monaco-editor *)):hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
  button:where(:not(.monaco-editor *)):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  main {
    flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px 8px;
    display: flex; flex-direction: column; gap: 16px;
    max-width: var(--chat-width, 820px); width: 100%; margin: 0 auto;
  }
  .msg { display: flex; flex-direction: column; gap: 4px; }
  .msg .who { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .bubble { padding: 11px 14px; border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; }
  .user .bubble { background: var(--user-bg); align-self: flex-end; max-width: 85%; }
  .user .who { align-self: flex-end; }
  .msg .who .read-aloud { margin-left: 6px; padding: 0 4px; border: none; background: none; font-size: 12px; line-height: 1; cursor: pointer; opacity: .35; vertical-align: middle; }
  .msg:hover .who .read-aloud, .msg .who .read-aloud:focus-visible { opacity: .8; }
  .msg .who .read-aloud.on { opacity: 1; color: var(--accent); }
  @media (hover: none) { .msg .who .read-aloud { opacity: .6; } }
  .msg.pending .bubble { opacity: .65; outline: 1px dashed var(--accent); outline-offset: -1px; }
  .msg.pending .who { color: var(--accent); }
  .assistant .bubble { background: var(--panel); border: 1px solid var(--line); }
  .bubble pre { background: var(--tool-bg); padding: 10px; border-radius: 8px; overflow-x: auto; }
  .bubble code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
  /* Markdown (render in markdown.js): chat bubbles, notifications, the editor's agent. */
  .md > :first-child { margin-top: 0; }
  .md > :last-child { margin-bottom: 0; }
  .md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table, .md hr { margin: 0 0 .7em; }
  .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1em 0 .4em; line-height: 1.3; }
  .md h1 { font-size: 1.3em; } .md h2 { font-size: 1.18em; } .md h3 { font-size: 1.06em; }
  .md h4, .md h5, .md h6 { font-size: 1em; }
  .md ul, .md ol { padding-left: 1.5em; }
  .md li > ul, .md li > ol { margin: .2em 0 0; }
  .md li + li { margin-top: .2em; }
  .md li.task { list-style: none; margin-left: -1.3em; }
  .md li.task input { margin: 0 .35em 0 0; vertical-align: -1px; }
  .md blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
  .md pre { white-space: pre; }
  .md :not(pre) > code { background: var(--tool-bg); padding: 1px 5px; border-radius: 5px; }
  .md hr { border: 0; border-top: 1px solid var(--line); }
  .md a { color: var(--accent); }
  .md .md-table { overflow-x: auto; }
  .md table { border-collapse: collapse; font-size: .95em; }
  .md th, .md td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top; }
  .md th { background: var(--tool-bg); }
  .md .al-center { text-align: center; } .md .al-right { text-align: right; }
  .tools { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; align-items: flex-start; }
  .tools-toggle {
    font-size: 12px; color: var(--muted); padding: 2px 9px; border-radius: 999px;
    font-family: ui-monospace, Menlo, monospace;
  }
  .tools-list { display: flex; flex-direction: column; gap: 3px; }
  .tools[hidden], .tools-list[hidden] { display: none; }
  .tool {
    font-size: 12px; color: var(--muted); background: var(--tool-bg);
    border-radius: 7px; padding: 4px 9px; align-self: flex-start;
    font-family: ui-monospace, Menlo, monospace;
  }
  .error .bubble { border-color: var(--err); color: var(--err); }
  .note {
    font-size: 12px; color: var(--muted); text-align: center;
    border-top: 1px dashed var(--line); padding-top: 10px;
  }
  .banner {
    background: var(--tool-bg); border: 1px solid var(--accent);
    border-radius: var(--radius); padding: 10px 14px; font-size: 14px;
  }
  .layout { flex: 1; display: flex; min-height: 0; }
  .chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  /* Installed app on a notched phone: keep clear of the status bar and home indicator. */
  header { padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .offline { font-size: 12px; color: var(--err); border: 1px solid var(--err); border-radius: 999px; padding: 2px 9px; }
  .offline[hidden] { display: none; }
  #sidebar {
    width: 300px; flex-shrink: 0; overflow-y: auto;
    background: var(--panel); border-right: 1px solid var(--line);
    padding: 16px 14px; display: flex; flex-direction: column; gap: 22px;
  }
  #sidebar { transition: width .18s ease, padding .18s ease; }
  /* Hidden sidebar: on phones it goes away entirely (it's an overlay there);
     on wider screens it collapses to an icon rail, with names in tooltips. */
  @media (max-width: 760px) { body.sidebar-hidden #sidebar { display: none; } }
  @media (min-width: 761px) {
    body.sidebar-hidden #sidebar { width: 64px; padding: 14px 8px; gap: 14px; overflow-x: hidden; }
    body.sidebar-hidden #sidebar .label, body.sidebar-hidden .side-label .side-text { display: none; }
    body.sidebar-hidden .side-label { justify-content: center; padding: 0; margin-bottom: -6px; }
    body.sidebar-hidden .nav-link { justify-content: center; padding: 9px 0; gap: 0; position: relative; }
    body.sidebar-hidden .nav-link .count { position: absolute; top: 1px; right: 3px; margin: 0; font-size: 9px; padding: 0 5px; }
    body.sidebar-hidden .agent-link .busy, body.sidebar-hidden .project-link .busy { position: absolute; top: 6px; right: 9px; margin: 0; }
  }
  .push-box { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
  .push-box .state { color: var(--muted); }
  .push-box .state strong { color: var(--ink); font-weight: 600; }
  .push-box .btns { display: flex; gap: 6px; flex-wrap: wrap; }
  .push-box .btns button { font-size: 12px; padding: 4px 10px; }
  .settings { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
  .settings section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
  .settings h3 { font-size: 14px; margin: 0 0 10px; }
  /* Signing in: covers the app until there's a session. */
  .auth-screen { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; }
  .auth-screen[hidden] { display: none; }
  .auth-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
  .auth-card h2 { margin: 0; font-size: 20px; }
  .auth-card label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
  .auth-card input { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
  .auth-card input:focus { outline: none; border-color: var(--accent); }
  .auth-card .err { color: var(--err); font-size: 13px; min-height: 1em; }
  .auth-card button { padding: 9px; }
  /* What only an admin sees. */
  body.role-user .admin-only { display: none !important; }
  .user-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .user-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
  .user-list .name { font-weight: 600; flex: 1; min-width: 120px; }
  .user-list .meta { color: var(--muted); font-size: 12px; }
  .user-list select, .user-list button { font-size: 12px; padding: 3px 8px; }
  .settings h4 { margin: 8px 0 0; font-size: 13px; }
  .plan-usage { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .limit-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
  .limit-row .meter { height: 8px; border-radius: 4px; background: var(--tool-bg); overflow: hidden; }
  .limit-row .meter > span { display: block; height: 100%; background: var(--accent); }
  .limit-row.warning .meter > span { background: #e0a030; }
  .limit-row.critical .meter > span { background: var(--err); }
  .limit-row .when { font-size: 12px; color: var(--muted); white-space: nowrap; }
  @media (max-width: 520px) { .limit-row { grid-template-columns: 1fr auto; } .limit-row .meter { grid-column: 1 / -1; grid-row: 2; } }
  .usage-head { display: flex; align-items: center; gap: 8px; }
  .usage-head .tabs { flex: 1; margin-bottom: 0; }
  .usage-head select { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; max-width: 220px; }
  /* A provider's card (Settings → Agents → Providers): signing in, below its status. */
  .provider-actions { margin-top: 8px; justify-content: flex-start; }
  .provider-login { margin: 8px 0 0; }
  .usage-chart svg { width: 100%; height: 180px; display: block; }
  .usage-chart .in { fill: var(--accent); }
  .usage-chart .out { fill: #b08cff; }
  /* Cache in (written) and cache out (read) apart: an expensive write, cheap reads. */
  .usage-chart .cache-in { fill: #4fb0a5; }
  .usage-chart .cache-out { fill: var(--muted); opacity: .35; }
  .usage-chart text { fill: var(--muted); font-size: 10px; }
  .usage-legend { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
  .usage-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
  .usage-legend .sw.in { background: var(--accent); } .usage-legend .sw.out { background: #b08cff; }
  .usage-legend .sw.cache-in { background: #4fb0a5; } .usage-legend .sw.cache-out { background: var(--muted); opacity: .35; }
  .ollama-models { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .ollama-models h4 { margin: 0; font-size: 13px; }
  .ollama-pull { display: flex; gap: 8px; }
  .ollama-pull input { flex: 1; }
  .ollama-pull-row { display: grid; grid-template-columns: minmax(0, 12em) 1fr minmax(0, 18em); gap: 8px; align-items: center; font-size: 12px; }
  .ollama-pull-row progress { width: 100%; }
  .model-table { display: flex; flex-direction: column; gap: 4px; font-size: 12px; overflow-x: auto; }
  .model-row { display: grid; grid-template-columns: minmax(10em, 1fr) repeat(6, 5.6em) auto; gap: 8px; align-items: center; min-width: 640px; }
  .model-row.head { color: var(--muted); font-weight: 600; }
  .model-row .n { text-align: right; font-variant-numeric: tabular-nums; }
  .model-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .model-row .actions { display: flex; gap: 4px; justify-content: flex-end; }
  .usage-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 10px; font-size: 12px; }
  .usage-breakdown h5 { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
  .usage-breakdown div.r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 3.4em); gap: 6px; align-items: baseline; }
  .usage-breakdown div.r.head { margin-bottom: 4px; }
  .usage-breakdown div.r.head .n { color: var(--muted); }
  .usage-breakdown .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usage-breakdown .n { text-align: right; font-variant-numeric: tabular-nums; }
  .settings .item-form { border: none; padding: 0; margin: 0; background: none; }
  /* A provider's (and a voice service's) form stands in for its card in the list (as on the other pages): framed like them. */
  .settings #provider-form, .settings #vs-form { border: 1px solid var(--accent); border-radius: var(--radius); padding: 14px; margin: 12px 0 0; background: var(--panel); }
  .settings .hint-text { font-size: 12px; color: var(--muted); }
  .claude-login { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
  .claude-login .actions { justify-content: flex-start; }
  .claude-login ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
  .claude-login ol a { color: var(--accent); }
  .settings select {
    font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  }
  .settings .ok { color: var(--accent); font-size: 13px; }
  #integrations { margin-top: 18px; }
  .audit-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 12px; }
  .audit-filters select, .audit-filters input {
    font: inherit; font-size: 13px; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px;
  }
  .audit-filters input { flex: 1; min-width: 180px; }
  .audit-filters input:focus, .audit-filters select:focus { outline: none; border-color: var(--accent); }
  .audit-list { display: flex; flex-direction: column; gap: 6px; }
  .audit-entry { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 14px; font-size: 13px; }
  .audit-entry .line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  .audit-entry .when { color: var(--muted); font-size: 12px; min-width: 110px; }
  .audit-entry .what { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
  .audit-entry .who { color: var(--muted); font-size: 12px; margin-left: auto; }
  .audit-entry .sum { color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audit-entry details { margin-top: 6px; }
  .audit-entry summary { cursor: pointer; font-size: 12px; color: var(--muted); }
  .audit-entry pre { background: var(--tool-bg); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
  .badge.ok-badge { background: var(--accent-soft); color: var(--accent); }
  .badge.err-badge { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
  #audit-more { margin: 12px auto 0; display: block; }
  #audit-more[hidden] { display: none; }
  .integration-group { display: flex; flex-direction: column; gap: 8px; }
  /* Collapsed card: one line (name, type, state); everything else on click. */
  .integration.collapsible > .head { cursor: pointer; user-select: none; }
  .integration.collapsible > .head .chevron { width: 14px; flex-shrink: 0; color: var(--muted); transition: transform .15s; }
  .integration.collapsible:not(.collapsed) > .head .chevron { transform: rotate(90deg); }
  .integration.collapsed { padding: 10px 16px; }
  .integration.collapsed > .integration-body { display: none; }
  .integration-body { margin-top: 10px; }
  .om-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0; }
  .om-qr .code { width: min(280px, 70vw); background: #fff; padding: 10px; border-radius: 12px; }
  .om-qr .code svg { display: block; width: 100%; height: auto; }
  .om-qr .emoji { font-size: 64px; line-height: 1.1; }
  .om-log { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--muted); background: var(--tool-bg); border-radius: 8px; padding: 6px 8px; white-space: pre-wrap; max-height: 140px; overflow: auto; }
  .om-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
  .integration-body .manage { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .integration-group + .integration-group { margin-top: 4px; }
  .page-view .integration-group > h2 {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  }
  .page-view .integration-group > h2 .count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--tool-bg); border-radius: 10px; padding: 1px 7px; letter-spacing: 0; }
  .integration { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
  .integration .head { display: flex; align-items: center; gap: 10px; }
  .integration .head h3 { margin: 0; font-size: 15px; flex: 1; }
  .integration .head h3 .type-name { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 8px; }
  .integration .head button { font-size: 12px; padding: 2px 9px; }
  #integration-form { margin-bottom: 14px; }
  #integrations-message:empty, #projects-message:empty { display: none; }
  .integration .actions.manage { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .project-agent { margin-top: 10px; }
  .project-agent .item-form { margin: 8px 0; }
  .project-agent .run { margin-top: 8px; }
  .item-form label.inline { flex-direction: row; align-items: center; gap: 6px; }
  .item-form label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
  .badge { font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 9px; background: var(--tool-bg); color: var(--muted); }
  .badge.on { background: var(--accent); color: var(--accent-ink); }
  .integration .desc { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
  .integration ol { font-size: 13px; padding-left: 20px; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 6px; }
  .integration ol a { color: var(--accent); }
  .copy-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
  .copy-row code { background: var(--tool-bg); padding: 3px 7px; border-radius: 6px; font-size: 12px; word-break: break-all; }
  .copy-row button { font-size: 11px; padding: 2px 8px; }
  .integration .warn { font-size: 13px; color: var(--err); margin: 8px 0; }
  .integration .item-form { border: none; padding: 0; margin: 0 0 8px; background: none; }
  .integration .actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
  .clickable { cursor: pointer; }
  /* An account's services (Google's, Teams'): a tick each, and what a ticked one gives. */
  .services { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
  .service { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
  .service .service-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .service .service-head .hint-text { margin-left: auto; }
  .service .service-body { margin-top: 6px; }
  .cal-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
  .cal-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .cal-list .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; align-self: center; background: var(--line); }
  .cal-list .name { font-weight: 600; }
  .cal-list .meta { color: var(--muted); font-size: 12px; }
  .cal-list code { font-size: 11px; color: var(--muted); word-break: break-all; }
  .cal-tools { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 6px; }
  .model-row { display: flex; gap: 6px; } .model-row input, .model-row .combo { flex: 1; }
  /* Model pickers: type any id, or pick from a scrollable list (comboPicker). */
  .combo { position: relative; display: flex; min-width: 0; }
  .combo input { flex: 1; min-width: 0; padding-right: 30px; }
  .combo > button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: none; background: none; box-shadow: none; padding: 4px 8px; color: var(--muted); }
  .combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); padding: 4px; }
  .combo-list div { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
  .combo-list div .sub { color: var(--muted); font-size: 12px; }
  .combo-list div.on, .combo-list div:hover { background: var(--accent-soft); }
  .combo-list div.current { font-weight: 600; }
  .combo-list .none { color: var(--muted); cursor: default; background: none; }
  .range-row { display: flex; gap: 10px; align-items: center; }
  .range-row input[type=range] { flex: 1; accent-color: var(--accent); }
  .check-row { display: flex; gap: 8px; align-items: center; font-size: 14px; }
  .lang-checks { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 4px 0; }
  .check-row input { accent-color: var(--accent); }
  .runs { margin-top: 8px; }
  .run-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .run { border-left: 3px solid var(--line); padding-left: 10px; }
  .run.ok { border-color: var(--accent); }
  .run.error { border-color: var(--err); }
  .run.running { border-color: var(--accent); margin-top: 8px; animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { border-color: var(--line); } }
  .run-output { font-size: 13px; white-space: pre-wrap; word-wrap: break-word; }
  .card .title .badge { font-size: 11px; vertical-align: middle; }
  .reply-chip {
    max-width: var(--chat-width, 820px); margin: 0 auto 8px; display: flex; gap: 8px; align-items: center;
    font-size: 13px; color: var(--muted); background: var(--tool-bg); border-radius: 8px; padding: 6px 10px;
  }
  .reply-chip[hidden] { display: none; }
  .reply-chip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reply-chip strong { color: var(--ink); font-weight: 500; }
  .reply-chip button { border: none; padding: 0 4px; }
  .banner { display: flex; flex-direction: column; gap: 6px; }
  .banner .b-title { font-weight: 600; }
  .banner .b-body { white-space: pre-wrap; }
  .banner .b-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .banner .b-actions button { font-size: 12px; padding: 3px 10px; }
  .side-label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 10px; margin-bottom: -16px;
  }
  .icon-btn { border: none; padding: 2px 8px; font-size: 15px; line-height: 1; color: var(--muted); }
  .icon-btn:hover { color: var(--accent); box-shadow: none; }
  .agent-link { display: flex; gap: 8px; align-items: center; }
  .side-link { color: inherit; text-decoration: none; }
  .side-link:hover { color: var(--accent); }
  .project-page-card .head h3 { font-size: 18px; }
  .project-page-head { margin-bottom: 10px; }
  .project-page-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
  .project-page-head p { margin: 4px 0 0; }
  .project-page-card { margin-bottom: 14px; }
  .code-view { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .code-bar label.inline { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
  .code-bar select, .code-comments select {
    max-width: 260px; font: inherit; font-size: 13px; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px;
  }
  .code-comments select { max-width: none; width: 100%; }
  .code-edit-tools { display: inline-flex; gap: 6px; align-items: center; }
  /* The editor's agent panel (beside the comments). */
  .code-pane-tabs { margin-bottom: 6px; }
  .code-agent { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
  .code-agent[hidden] { display: none; }
  .code-agent-top { display: flex; gap: 6px; }
  .code-agent-top select { flex: 1; min-width: 0; }
  .code-agent-log { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
  .code-agent-log .m { padding: 7px 10px; border-radius: 8px; word-wrap: break-word; }
  .code-agent-log .m.user { background: var(--user-bg); align-self: flex-end; max-width: 90%; white-space: pre-wrap; }
  .code-agent-log .m.assistant { background: var(--tool-bg); }
  .code-agent-log .m pre { overflow-x: auto; font-size: 12px; }
  .code-agent-log .m p { margin: 4px 0; }
  .code-agent-log .tool { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
  .code-agent-log .err { font-size: 12px; }
  .code-agent-ctx { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .code-agent-ctx label { display: inline-flex; gap: 4px; align-items: center; }
  /* Dragging the corner sets their height: as flex items (flex: 1 from the global textarea rule) they'd ignore it. */
  .code-agent textarea, .code-comments textarea { flex: none; resize: vertical; min-height: 60px; max-height: 60vh; }
  .code-agent textarea { font-size: 13px; resize: none; }
  /* Above the agent's message box: drag it up to make the box taller (code.js). */
  .code-agent .grip { height: 8px; margin: -4px 0; cursor: ns-resize; touch-action: none; position: relative; flex: none; }
  .code-agent .grip::after { content: ""; position: absolute; left: 50%; top: 2px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
  .code-agent .grip:hover::after { background: var(--accent); }
  /* Changes against the last commit, in the editor's gutter (click: the original lines, Revert). */
  .dirty-add, .dirty-mod { width: 4px !important; margin-left: 4px; cursor: pointer; }
  .dirty-add { background: #3fa856; } .dirty-mod { background: #d08a10; }
  .dirty-del { cursor: pointer; margin-left: 2px; width: 0 !important; height: 0 !important; border-left: 6px solid var(--err); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-top: -5px; }
  .dirty-peek { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 12px ui-monospace, "SF Mono", Menlo, monospace; overflow: auto; }
  .dirty-peek .bar { display: flex; gap: 8px; align-items: center; padding: 3px 8px; font-family: inherit; background: var(--tool-bg); }
  .dirty-peek .bar span { flex: 1; color: var(--muted); }
  .dirty-peek .bar button { font-size: 11px; padding: 1px 8px; }
  .dirty-peek pre { margin: 0; padding: 2px 8px 4px 8px; white-space: pre; background: rgba(220, 70, 70, .12); color: var(--ink); line-height: 19px; }
  .code-edit-tools #code-dirty { color: var(--accent); }
  .code-bar select:focus, .code-comments select:focus { outline: none; border-color: var(--accent); }
  .code-bar .grow { flex: 1; }
  .code-bar #code-ref-info { font-size: 12px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .code-ide { display: flex; gap: 6px; flex-wrap: wrap; }
  .code-main { flex: 1; display: grid; grid-template-columns: 260px 1fr 360px; min-height: 0; }
  .code-side, .code-comments { overflow: auto; padding: 10px; font-size: 13px; border-right: 1px solid var(--line); }
  .code-comments { border-right: none; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  #code-comments-pane { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  #code-comments-pane[hidden] { display: none; }
  .code-comments h4 { margin: 0; font-size: 13px; }
  .code-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .code-path { flex-shrink: 0; padding: 6px 12px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); min-height: 14px; }
  .code-editor { flex: 1; min-height: 0; }
  .code-empty { padding: 20px; }
  .code-tree-level { list-style: none; margin: 0; padding-left: 12px; }
  #code-tree > .code-tree-level { padding-left: 0; }
  .code-tree-level li > ul { display: none; }
  .code-tree-level li.open > ul { display: block; }
  .tree-dir, .tree-file { display: block; padding: 2px 4px; border-radius: 4px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tree-dir::before { content: "▸ "; color: var(--muted); }
  li.open > .tree-dir::before { content: "▾ "; }
  .tree-file:hover, .tree-dir:hover { background: var(--tool-bg); }
  .tree-file.active { background: var(--accent-soft); color: var(--accent); }
  .tree-file .st { display: inline-block; width: 16px; font-weight: 700; }
  /* The working copy: new, changed, deleted (and folders with changes in them). */
  .tree-file.wt-A { color: #3fa856; } .tree-file.wt-M { color: #d08a10; } .tree-file.wt-D { color: var(--err); text-decoration: line-through; opacity: .8; cursor: default; }
  .tree-dir.wt-M { color: #d08a10; }
  .tree-dir.wt-M::after, .tree-file.wt-A::after, .tree-file.wt-M::after { content: " ●"; font-size: 9px; vertical-align: middle; }
  .tree-file.status-A .st { color: #5fbf6f; } .tree-file.status-D .st { color: var(--err); } .tree-file.status-M .st { color: #e0a030; } .tree-file.status-R .st { color: #b08cff; }
  .code-comment { border-left: 3px solid var(--accent); padding: 4px 8px; display: flex; flex-direction: column; gap: 3px; }
  .code-comment.sent { border-color: #b08cff; } .code-comment.resolved { border-color: var(--line); opacity: .6; }
  .code-comment .where { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); }
  .code-comment .body { white-space: pre-wrap; }
  .code-comment .actions { display: flex; gap: 6px; } .code-comment .actions button { font-size: 11px; padding: 2px 8px; }
  .code-comments .item-form { margin: 0; padding: 10px; }
  .code-commented { background: rgba(80, 160, 255, .12); }
  .code-comment-glyph::before { content: "💬"; font-size: 12px; }
  @media (max-width: 1000px) { .code-main { grid-template-columns: 200px 1fr; } .code-comments { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); max-height: 40vh; } }
  /* Phones: one column that scrolls as a page (tree, file, comments) instead of squeezing the editor. */
  @media (max-width: 700px) {
    .code-view { overflow-y: auto; }
    .code-main { flex: none; grid-template-columns: 1fr; }
    .code-side { max-height: 30vh; border-right: none; border-bottom: 1px solid var(--line); }
    .code-editor { flex: none; height: 65vh; }
  }
  .agent-link .busy, .project-link .busy { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1s step-end infinite; }
  .agent-log { display: flex; flex-direction: column; gap: 16px; }
  .agent-log[hidden] { display: none; }
  /* Its own look also when it opens in the list, in place of a card (.settings strips forms). */
  #agent-form { margin: 16px 0 0; background: var(--panel); border: 1px solid var(--accent); padding: 14px; }
  .settings > #agent-form { margin: 0; }
  #agent-form h3 { margin: 0 0 4px; font-size: 16px; }
  .agent-card .head h3 a { color: inherit; text-decoration: none; }
  .agent-card .head h3 a:hover { color: var(--accent); }
  .agent-card .facts { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
  fieldset.access { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
  fieldset.access legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
  .check-grid { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 24px; font-size: 13px; }
  .check-grid label { display: flex; gap: 6px; align-items: center; }
  .check-grid input, fieldset.access input { accent-color: var(--accent); }
  .policy-grid { display: grid; grid-template-columns: 1fr minmax(0, 220px); gap: 6px 12px; align-items: center; font-size: 13px; }
  .policy-grid h5 { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; }
  .policy-grid h5:first-child { margin-top: 0; }
  .policy-grid .sub { color: var(--muted); font-size: 12px; }
  .policy-grid select.custom { border-color: var(--accent); }
  .scratch { display: flex; flex-direction: column; gap: 10px; height: 100%; }
  .scratch-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .scratch-bar input[type=date] {
    font: inherit; font-size: 13px; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
  }
  .scratch-day { font-weight: 600; margin-left: 6px; }
  #scratch-text {
    min-height: 55vh; flex: 1; resize: vertical; font: inherit; font-size: 15px; line-height: 1.6;
    color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  }
  #scratch-text:focus { outline: none; border-color: var(--accent); }
  /* Notepad: a page drawn on with a pen (public/js/notepad.js). */
  /* The page is endless: the canvas fills the view, nothing scrolls. */
  #view-notepad { overflow: hidden; padding-bottom: 12px; display: flex; flex-direction: column; }
  .notepad { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; width: 100%; }
  .notepad-bar, .notepad-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .notepad-bar select {
    max-width: 260px; font: inherit; font-size: 13px; color: var(--ink); background: var(--panel);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  }
  #notepad-zoom-level { min-width: 4.2em; font-variant-numeric: tabular-nums; }
  .notepad-tools .tool-group { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
  .notepad-tools .tool-group button { border: none; background: none; padding: 5px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
  .notepad-tools .tool-group button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .notepad-tools .tool-group button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
  .notepad-tools .size-dot { display: inline-block; border-radius: 50%; background: currentColor; }
  .notepad-tools .tool-group button { padding: 5px 8px; }
  .notepad-tools .size-0 { width: 3px; height: 3px; }
  .notepad-tools .size-1 { width: 5px; height: 5px; }
  .notepad-tools .size-2 { width: 8px; height: 8px; }
  .notepad-tools .size-3 { width: 12px; height: 12px; }
  .notepad-tools .size-4 { width: 16px; height: 16px; }
  .notepad-tools .swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
  .notepad-tools .swatch.c-ink { background: var(--ink); }
  .notepad-tools .swatch.c-red { background: var(--pad-red); }
  .notepad-tools .swatch.c-blue { background: var(--pad-blue); }
  .notepad-tools .swatch.c-green { background: var(--pad-green); }
  .notepad-tools .swatch.c-orange { background: var(--pad-orange); }
  .notepad-tools .swatch.c-purple { background: var(--pad-purple); }
  .notepad-tools .swatch.c-grey { background: var(--pad-grey); }
  .notepad-tools .swatch.c-hl-yellow { background: var(--pad-hl-yellow); }
  .notepad-tools .swatch.c-hl-green { background: var(--pad-hl-green); }
  .notepad-tools .swatch.c-hl-pink { background: var(--pad-hl-pink); }
  .notepad-tools .swatch.c-hl-blue { background: var(--pad-hl-blue); }
  .notepad-tools .swatch.c-hl-orange { background: var(--pad-hl-orange); }
  .notepad-tools #notepad-colors button[aria-pressed="true"] .swatch { outline: 2px solid var(--accent); outline-offset: 1px; }
  .notepad-tools .tool-group .ico { display: inline-flex; }
  .notepad-sheet {
    position: relative; flex: 1; min-height: 240px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    /* Dots that move and scale with the page (notepad.js sets where). */
    background-color: var(--panel);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 35%, transparent) 1px, transparent 1.2px);
    background-size: var(--grid, 40px) var(--grid, 40px);
    background-position: var(--grid-x, 0) var(--grid-y, 0);
  }
  /* E-ink: the sheet white whatever the theme. */
  :root:is([data-display="eink"], [data-display="eink-color"]) .notepad-sheet { background-color: #ffffff; }
  .notepad-hint { margin: 0; }
  /* Settings → Current device → Pen pressure: the test area. */
  .pen-test { display: block; width: 100%; height: 150px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); touch-action: none; cursor: crosshair; margin: 6px 0; }
  .pen-reading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .pen-reading meter { flex: 1; min-width: 120px; height: 10px; }
  .settings .row-btns .grow { flex: 1; }
  .pen-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
  @media (max-width: 760px) { .notepad-hint { display: none; } }
  .notepad-sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
  .notepad-sheet #notepad-overlay { pointer-events: none; }
  /* Moved and scaled as a whole while the page moves (notepad.js), by the GPU. */
  #notepad-canvas { transform-origin: 0 0; will-change: transform; }
  /* A highlighter stroke being drawn: solid on the overlay, the overlay see-through (as it will look). */
  .notepad-sheet.see-through #notepad-overlay { opacity: var(--pad-hl-alpha, .35); }
  .notepad-sheet[data-tool="eraser"] canvas { cursor: cell; }
  .notepad-sheet[data-tool="lasso"] canvas { cursor: alias; }
  .notepad-sheet[data-tool="move"] canvas { cursor: grab; }
  .notepad-sheet.moving canvas { cursor: grabbing; }
  #scratch-days { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
  #scratch-days a {
    display: flex; gap: 12px; padding: 5px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13px;
  }
  #scratch-days a:hover { background: var(--tool-bg); }
  #scratch-days a.current { background: var(--user-bg); }
  #scratch-days .d { width: 110px; flex-shrink: 0; font-weight: 600; }
  #scratch-days .p { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #scratch-conflict { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
  .tab { border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 12px; font-size: 14px; color: var(--muted); }
  .tab:hover { background: none; box-shadow: none; }
  .tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
  .tab .count { font-size: 11px; color: var(--muted); margin-left: 4px; }
  .card .person-name { flex: 1; font-weight: 600; font-size: 15px; }
  .card .contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; }
  .card .contacts a { color: var(--accent); text-decoration: none; }
  .card .contacts a:hover { text-decoration: underline; }
  .memory-search {
    width: 100%; margin-top: 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  }
  .memory-search:focus { outline: none; border-color: var(--accent); }
  .card .fact-key { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 600; word-break: break-all; }
  .card .fact-value { font-size: 14px; margin-top: 6px; white-space: pre-wrap; word-wrap: break-word; }
  .card .fact-meta { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .card mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 2px; }
  .auth-choice { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; font-size: 14px; }
  .auth-choice label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
  .auth-choice label.disabled { opacity: .5; cursor: default; }
  .auth-choice input { accent-color: var(--accent); }
  .settings .actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
  .status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
  .status-list li { display: flex; gap: 10px; align-items: baseline; }
  .status-list .label { width: 120px; flex-shrink: 0; font-weight: 600; }
  #push-devices { margin-top: 10px; }
  #push-devices li { flex-wrap: wrap; }
  #push-devices .label { width: auto; min-width: 180px; }
  #push-devices button { font-size: 12px; padding: 2px 9px; }
  .status-list .val { color: var(--muted); }
  .status-list .on { color: var(--accent); font-weight: 600; }
  .settings .row-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .settings a.button {
    font-size: 13px; color: var(--ink); text-decoration: none;
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
  }
  .settings a.button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
  .empty { font-size: 13px; color: var(--muted); }
  .nav-link .count {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted);
    background: var(--tool-bg); border-radius: 10px; padding: 1px 7px; margin-top: 2px;
  }
  .page-top .filter { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .page-top .filter button { border: none; border-radius: 0; padding: 5px 12px; box-shadow: none; }
  .page-top .filter button.on { background: var(--accent-soft); font-weight: 600; color: var(--accent); }
  .card .row input[type=checkbox] { accent-color: var(--accent); cursor: pointer; align-self: center; }
  .card.done .title { text-decoration: line-through; color: var(--muted); }
  .card .title { flex: 1; font-weight: 600; font-size: 14px; word-wrap: break-word; min-width: 0; }
  .card .meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
  .card .meta .overdue { color: var(--err); }
  .item-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Triggers: the form's pickers and notes, a kind's ticked options, and one that's switched off. */
  .trigger-form select { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; width: 100%; min-width: 0; }
  .trigger-form select:focus { outline: none; border-color: var(--accent); }
  .trigger-form .hint-text { font-size: 12px; color: var(--muted); margin: 0; }
  .trigger-field { display: flex; flex-direction: column; gap: 4px; }
  .trigger-field .field-label { font-size: 12px; color: var(--muted); }
  .trigger-field .check-grid { padding-left: 0; }
  .trigger-field .check-grid label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
  .card.disabled > :not(.row) { opacity: .6; }
  .trigger-interval { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 8px; font-size: 13px; color: var(--muted); }
  .trigger-interval input { width: 90px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
  @media (max-width: 520px) { .item-form .two { grid-template-columns: 1fr; } .page-top { flex-wrap: wrap; } }
  .views { display: flex; flex-direction: column; gap: 2px; }
  .nav-link {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
    color: var(--ink); text-decoration: none; font-size: 14px;
  }
  .nav-link:hover { background: var(--tool-bg); }
  .nav-ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
  .nav-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .agent-emoji { font-size: 16px; line-height: 1; }
  .project-icon { margin-right: 6px; }
  .name-icon { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
  .name-icon .icon-input { text-align: center; font-size: 18px; }
  .icon-picks { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 0; }
  .icon-pick { font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
  .pi { display: inline-flex; align-items: center; justify-content: center; }
  .pi-img { width: 1.15em; height: 1.15em; object-fit: contain; border-radius: 4px; }
  .nav-ico .pi-img, .nav-ico.pi .pi-img { width: 18px; height: 18px; }
  .icon-image { display: flex; flex-direction: column; gap: 6px; }
  .icon-image .label-text { font-size: 13px; color: var(--muted); }
  .icon-image-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .icon-preview { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 10px; }
  .icon-preview img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
  .icon-url { display: flex; gap: 6px; flex: 1; min-width: 240px; }
  .icon-url input { flex: 1; }
  .nav-link:hover .nav-ico, .nav-link.active .nav-ico { color: var(--accent); }
  /* Active item: cyan tint plus a rounded bar on the left, echoing the icon's waveform bars. */
  .nav-link.active { background: var(--accent-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
  .view[hidden] { display: none !important; }
  .page-view { flex: 1; overflow-y: auto; padding: 24px 20px 48px; }
  /* Pages use the whole width beside the sidebar (lists, tables, the audit log). */
  .page-view .inner { margin: 0 auto; }
  .page-view .intro { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
  .page-view h2 {
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin: 28px 0 10px;
  }
  .skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  /* The notifications page: one in full, then the latest ones. */
  .notif-detail { margin-bottom: 22px; }
  .notif-detail .notif-meta { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
  .notif-detail h2 { margin: 0; font-size: 20px; }
  .notif-detail .assistant .bubble { padding: 0; }
  .notif-detail form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .notif-detail textarea { min-height: 70px; }
  .notif-item { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; color: inherit; text-decoration: none; }
  .notif-item:hover, .notif-item.on { border-color: var(--accent); background: var(--accent-soft); }
  .notif-item .t { font-weight: 600; font-size: 14px; }
  .notif-item .m { font-size: 12px; color: var(--muted); }
  .notif-item .b { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .banner .b-title.link { cursor: pointer; }
  /* Severity (notifications): high and critical stand out. */
  .sev { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; border: 1px solid currentColor; }
  .sev-low { color: var(--muted); }
  .sev-high { color: #c27a00; }
  .sev-critical { color: var(--err); }
  .banner.sev-high { border-left: 3px solid #c27a00; }
  .banner.sev-critical { border-left: 3px solid var(--err); }
  .notif-item.sev-high { border-left: 3px solid #c27a00; }
  .notif-item.sev-critical { border-left: 3px solid var(--err); }
  .banner .b-title.link:hover { text-decoration: underline; }
  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px;
  }
  .card .name { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 600; }
  .card .desc { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .page-top { display: flex; align-items: center; gap: 12px; }
  .page-top .intro { flex: 1; margin: 0; }
  .item-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .task-section { display: flex; flex-direction: column; gap: 10px; }
  .page-view .task-section > h2 { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }
  .page-view .task-section:first-child > h2 { margin-top: 0; }
  .task-section > h2 .count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--tool-bg); border-radius: 10px; padding: 1px 7px; letter-spacing: 0; }
  .card .row { display: flex; align-items: baseline; gap: 8px; }
  .card .row .name { flex: 1; }
  .card .row button { font-size: 12px; padding: 2px 9px; }
  .card .body {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
    background: var(--tool-bg); border-radius: 8px; padding: 8px 10px; margin-top: 8px;
    white-space: pre-wrap; word-wrap: break-word; max-height: 160px; overflow: auto;
  }
  .item-form {
    background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
    padding: 14px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px;
  }
  .item-form label, .item-form .field { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
  .item-form input, .item-form textarea {
    font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; resize: vertical;
  }
  .item-form textarea.notes { min-height: 90px; }
  .item-form textarea.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; min-height: 180px; }
  .item-form input:focus, .item-form textarea:focus { outline: none; border-color: var(--accent); }
  .item-form .actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
  .item-form .err { flex: 1; color: var(--err); font-size: 13px; }
  .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; box-shadow: var(--glow); }
  .primary:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow-strong); filter: brightness(1.08); }
  details.builtins { margin-top: 32px; }
  details.builtins summary {
    cursor: pointer; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
  }
  @media (max-width: 760px) {
    #sidebar {
      position: fixed; top: 53px; bottom: 0; left: 0; z-index: 10;
      box-shadow: 4px 0 20px rgba(0,0,0,.15); width: min(300px, 85vw);
    }
  }
  footer {
    border-top: 1px solid var(--line); background: var(--panel);
    padding: 12px 20px 16px;
  }
  .composer { max-width: var(--chat-width, 820px); margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
  textarea:where(:not(.monaco-editor *)) {
    flex: 1; resize: none; font: inherit; color: var(--ink);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 11px 13px; min-height: 46px; max-height: 200px;
  }
  textarea:where(:not(.monaco-editor *)):focus { outline: none; border-color: var(--accent); }
  /* Text fields get a soft cyan ring on focus, on top of the accent border set above. */
  textarea:where(:not(.monaco-editor *)):focus, select:focus,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):where(:not(.monaco-editor *)):focus { box-shadow: 0 0 0 3px var(--accent-soft); }
  .send {
    background: var(--accent); color: var(--accent-ink); border: none;
    border-radius: 999px; padding: 12px 20px; font-weight: 600; box-shadow: var(--glow);
  }
  .send:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow-strong); filter: brightness(1.08); }
  .send:disabled { opacity: .45; cursor: default; box-shadow: none; filter: none; }
  /* The composer's microphone: turns the voice conversation on and off, or held to talk. */
  .mic {
    flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  }
  .mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mic:hover { color: var(--accent); border-color: var(--accent); }
  .mic[data-state]:not([data-state="off"]):not([data-state="error"]) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
  .mic[data-state="recording"] { color: var(--err); border-color: var(--err); animation: blink 1s step-end infinite; }
  .mic[data-state="error"] { color: var(--err); border-color: var(--err); }
  /* Held, not clicked: no text selection or callout on a long press. */
  .mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  /* Push-to-talk: the icon goes red, so the mode is plain at a glance (no dot). */
  .mic[data-mode="hold"] { color: var(--err); border-color: var(--err); }
  .mic[data-mode="hold"]:hover { color: var(--err); border-color: var(--err); filter: brightness(1.1); }
  .mic[data-mode="hold"][data-state]:not([data-state="off"]) { color: var(--err); border-color: var(--err); background: transparent; box-shadow: none; }
  .hint { max-width: var(--chat-width, 820px); margin: 7px auto 0; font-size: 11px; color: var(--muted); }
  .cursor::after {
    content: "▍"; color: var(--accent);
    animation: blink 1.1s step-end infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  /* "New version" bar, floating above the composer. */
  .update-bar {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
    bottom: calc(96px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
    max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; font-size: 14px;
    background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: 999px;
    box-shadow: var(--glow-strong), 0 8px 24px rgba(0, 0, 0, .25);
  }
  .update-bar[hidden] { display: none; }
  .update-bar button { font-size: 13px; }
  @media (max-width: 520px) { .update-bar { border-radius: var(--radius); padding: 10px 12px; } }

  /* ---- voice test page (/voice-test) ---- */
  body.vt { display: block; overflow: auto; height: auto; min-height: 100vh; }
  .vt-page { max-width: 1100px; margin: 0 auto; padding: 20px 20px 48px; display: flex; flex-direction: column; gap: 14px; }
  .vt-top { display: flex; align-items: center; gap: 12px; }
  .vt-top h1 { margin: 0; font-size: 20px; }
  .vt-page .intro { color: var(--muted); font-size: 14px; margin: 0; }
  .vt-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .vt-box h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .vt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .vt-settings label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
  .vt-settings select, .vt-row input:not([type]) { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
  .vt-check input { accent-color: var(--accent); }
  .vt-row .grow { flex: 1; min-width: 200px; }
  .vt-box .hint-text { font-size: 12px; color: var(--muted); margin: 0; }
  .vt-state { font-family: ui-monospace, monospace; font-size: 13px; padding: 3px 10px; border-radius: 10px; background: var(--tool-bg); color: var(--muted); }
  .vt-state[data-state="conversation"] { background: var(--accent-soft); color: var(--accent); }
  .vt-state[data-state="recording"], .vt-state[data-state="error"] { color: var(--err); }
  .vt-state[data-state="speaking"] { color: var(--accent); }
  .vt-graph { width: 100%; height: 160px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
  .vt-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
  .vt-sw { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; }
  .vt-sw.level { background: var(--muted); } .vt-sw.vad { background: var(--accent); }
  .vt-reply { font-size: 14px; }
  .vt-live { margin: 0; white-space: pre-wrap; }
  .vt-turns { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
  .vt-turns th, .vt-turns td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
  .vt-turns th { color: var(--muted); font-weight: 600; }
  .vt-turns .said { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vt-log { margin: 0; max-height: 320px; overflow: auto; font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }