/* Fonts. Loaded via CDN to match the existing index.html dependencies
     (marked, dompurify, lucide on jsdelivr). Switching to self-hosted woff2
     under static/fonts/ is a one-section change if/when we drop CDNs.
     Switzer: refined humanist neogrotesque, free via Fontshare.
     Fraunces: variable serif with SOFT + opsz axes for editorial display.
     JetBrains Mono: variable mono for code and tool rows. */
  @import url("https://api.fontshare.com/v2/css?f[]=switzer@1,2&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..700,0..100&family=JetBrains+Mono:wght@400..600&display=swap");

  :root {
    color-scheme: light;

    /* ─── Foundation tokens (typography, spacing, radii, focus). Layered
       on top of the surface/text/accent tokens below so component CSS can
       move off magic numbers. ─── */

    /* Type stacks. Switzer carries UI text. Fraunces is reserved for
       editorial moments — assistant headings, welcome state. JetBrains
       Mono replaces the bare ui-monospace fallback. */
    --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    /* ss01 = single-storey a; cv11 = humanist tail on l; cv09 = open 4.
       Disambiguates Asana GIDs, channel IDs, ports. */
    --font-feature-default: "ss01", "cv11", "cv09";
    /* Compatibility aliases for feature pages added before Ezra's font pass. */
    --font-body: var(--font-sans);
    --font-display: var(--font-serif);

    /* Space scale (4px base). */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;

    /* Radius scale. */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Surfaces */
    --bg: #fafafa;
    --bg-elevated: #ffffff;
    --bg-tool: #f6f6f6;
    --bg-code: #f0f0f0;
    --bg-pre: #f4f4f4;
    --bg-hover: #f0f0f0;
    --bg-sidebar: #f3f3f3;
    --bg-row-hover: #ebebeb;
    --bg-table-header: #f6f7f9;
    --bg-table-zebra: #fafafa;
    --bg-divider: #fafafa;

    /* Text */
    --fg: #1a1a1a;
    --fg-secondary: #555;
    --fg-muted: #888;
    --fg-subtle: #aaa;
    --fg-tool-summary: #555;
    --fg-tool-row: #444;
    --chat-url-fg: #626262;

    /* Accent (link blue) */
    --accent: #1a56db;
    --accent-bg-soft: #f0f5ff;
    --accent-bg-strong: #e7efff;
    --accent-fg-strong: #1a3a7a;

    /* Borders */
    --border: #eaeaea;
    --border-strong: #ccc;
    --border-stronger: #d0d0d0;
    --border-subtle: #f0f0f0;
    --border-table: #e2e2e2;
    --border-divider: #e6e6e6;

    /* AskQ palette (warning yellow, theme-inverting) */
    --askq-bg: #fffaf0;
    --askq-bg-static: #fcf6e6;
    --askq-bg-hover: #fff3d6;
    --askq-bg-pill: #fff3d6;
    --askq-border: #f0d290;
    --askq-border-strong: #e6c97a;
    --askq-border-subtle: #eedfb8;
    --askq-fg-header: #8a6a1a;
    --askq-fg-desc: #6a5a3a;
    --askq-fg-bullet: #a08040;
    --askq-fg-pill: #5a4310;

    /* Status colors */
    --danger: #c62828;
    --danger-hover: #a51e1e;
    --danger-bg-soft: #fdecea;
    --danger-fg: #8a1a1a;
    --warning-fg: #b85a00;
    --success-bg-soft: #e7f5ec;
    --success-fg: #1a8a3a;
    --success-fg-strong: #1a6b3a;
    --success-border: #b6e3c2;
    --success-tool-fg: #2a6e2a;

    /* Buttons */
    --button-primary-bg: #1a1a1a;
    --button-primary-bg-hover: #2a2a2a;
    --button-primary-fg: #ffffff;
    --button-disabled-bg: #aaa;

    /* Translucent surfaces (theme-inverting) */
    --header-bg: rgba(250,250,250,0.95);
    --form-bg: rgba(250,250,250,0.97);
    --copy-btn-bg: rgba(255,255,255,0.85);
    --copy-btn-bg-hover: #ffffff;
    --drop-overlay-bg: rgba(231,239,255,0.85);
    --drop-overlay-fg: #1a3a7a;
    --shadow-popover: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);

    /* Queued-message + queue button (slate blue, distinct from accent) */
    --queue-bg: #5a6a8a;
    --queue-bg-hover: #4a5a7a;
    --queued-border: #c0d0f0;
    --queued-border-hover: #9bb6e6;
    --queued-bg-hover: rgba(231,239,255,0.4);
    --queued-fg: #5a6a8a;
    --queued-label-fg: #8090b0;
    --queued-attach-fg: #7a8aaa;
    --queued-edit-border: #ccd8ee;

    /* Tool-row icon fallback (when no inline path or simpleicons match) */
    --tool-fallback-bg: #888;
    --tool-fallback-fg: #fff;

    /* Chat density */
    --chat-gap: 10px;
    --chat-font-size: 14px;
    --msg-pad-y: 10px;
    --msg-pad-x: 14px;
    --msg-radius: 10px;
    --msg-line-height: 1.55;
    --thinking-pad-y: 4px;
    --thinking-pad-x: 14px;
    --spinner-pad-y: 6px;
    --spinner-pad-x: 14px;
    --tool-font-size: 12.5px;
    --tool-summary-pad-y: 8px;
    --tool-summary-pad-x: 12px;
    --tool-list-pad-y: 8px;
    --tool-list-pad-x: 12px;
    --tool-row-pad-y: 4px;

    /* Workspace file viewer */
    --workspace-file-font-size: 15px;
    --workspace-file-line-height: 1.55;
    --workspace-file-block-spacing: 0.9em;
    --workspace-file-cell-pad-y: 7px;
    --workspace-file-cell-pad-x: 12px;
  }

  :root[data-color-mode="dark"] {
    color-scheme: dark;
    --bg: #1a1a1a;
    --bg-elevated: #242424;
    --bg-tool: #222;
    --bg-code: #2a2a2a;
    --bg-pre: #2a2a2a;
    --bg-hover: #2e2e2e;
    --bg-sidebar: #1f1f1f;
    --bg-row-hover: #2a2a2a;
    --bg-table-header: #2c2c2c;
    --bg-table-zebra: #1f1f1f;
    --bg-divider: #1f1f1f;

    --fg: #eee;
    --fg-secondary: #ddd;
    --fg-muted: #aaa;
    --fg-subtle: #888;
    --fg-tool-summary: #aaa;
    --fg-tool-row: #bbb;
    --chat-url-fg: #c7c7c7;

    --accent: #6ea8ff;
    --accent-bg-soft: #2a3046;
    --accent-bg-strong: #2a3f6b;
    --accent-fg-strong: #cfe0ff;

    --border: #333;
    --border-strong: #444;
    --border-stronger: #4a4a4a;
    --border-subtle: #333;
    --border-table: #3a3a3a;
    --border-divider: #303030;

    --askq-bg: #2a230f;
    --askq-bg-static: #251f0c;
    --askq-bg-hover: #3a3018;
    --askq-bg-pill: #3a3018;
    --askq-border: #5c481c;
    --askq-border-strong: #5c481c;
    --askq-border-subtle: #4a3a18;
    --askq-fg-header: #d6b86a;
    --askq-fg-desc: #b9a878;
    --askq-fg-bullet: #b9a878;
    --askq-fg-pill: #f0d690;

    --danger-bg-soft: #3a1a1a;
    --danger-fg: #f4a3a3;
    --warning-fg: #f0ad55;
    --success-bg-soft: #173322;
    --success-fg: #6ed18b;
    --success-fg-strong: #8ee0a6;
    --success-border: #2f5a3c;
    --success-tool-fg: #88c188;

    --button-primary-bg: #eee;
    --button-primary-bg-hover: #fff;
    --button-primary-fg: #1a1a1a;
    --button-disabled-bg: #444;

    --header-bg: rgba(26,26,26,0.95);
    --form-bg: rgba(26,26,26,0.97);
    --copy-btn-bg: rgba(36,36,36,0.85);
    --copy-btn-bg-hover: #2c2c2c;
    --drop-overlay-bg: rgba(42,48,70,0.85);
    --drop-overlay-fg: #cfe0ff;
    --shadow-popover: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);

    --queue-bg: #6a7a9a;
    --queue-bg-hover: #7a8ab0;
    --queued-border: #3a4a6a;
    --queued-border-hover: #5a6a8a;
    --queued-bg-hover: rgba(42,63,107,0.25);
    --queued-fg: #8a9ab0;
    --queued-label-fg: #6a7a9a;
    --queued-attach-fg: #6a7a9a;
    --queued-edit-border: #3a4a6a;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) {
      color-scheme: dark;
      --bg: #1a1a1a;
      --bg-elevated: #242424;
      --bg-tool: #222;
      --bg-code: #2a2a2a;
      --bg-pre: #2a2a2a;
      --bg-hover: #2e2e2e;
      --bg-sidebar: #1f1f1f;
      --bg-row-hover: #2a2a2a;
      --bg-table-header: #2c2c2c;
      --bg-table-zebra: #1f1f1f;
      --bg-divider: #1f1f1f;

      --fg: #eee;
      --fg-secondary: #ddd;
      --fg-muted: #aaa;
      --fg-subtle: #888;
      --fg-tool-summary: #aaa;
      --fg-tool-row: #bbb;
      --chat-url-fg: #c7c7c7;

      --accent: #6ea8ff;
      --accent-bg-soft: #2a3046;
      --accent-bg-strong: #2a3f6b;
      --accent-fg-strong: #cfe0ff;

      --border: #333;
      --border-strong: #444;
      --border-stronger: #4a4a4a;
      --border-subtle: #333;
      --border-table: #3a3a3a;
      --border-divider: #303030;

      --askq-bg: #2a230f;
      --askq-bg-static: #251f0c;
      --askq-bg-hover: #3a3018;
      --askq-bg-pill: #3a3018;
      --askq-border: #5c481c;
      --askq-border-strong: #5c481c;
      --askq-border-subtle: #4a3a18;
      --askq-fg-header: #d6b86a;
      --askq-fg-desc: #b9a878;
      --askq-fg-bullet: #b9a878;
      --askq-fg-pill: #f0d690;

      --danger-bg-soft: #3a1a1a;
      --danger-fg: #f4a3a3;
      --warning-fg: #f0ad55;
      --success-bg-soft: #173322;
      --success-fg: #6ed18b;
      --success-fg-strong: #8ee0a6;
      --success-border: #2f5a3c;
      --success-tool-fg: #88c188;

      --button-primary-bg: #eee;
      --button-primary-bg-hover: #fff;
      --button-primary-fg: #1a1a1a;
      --button-disabled-bg: #444;

      --header-bg: rgba(26,26,26,0.95);
      --form-bg: rgba(26,26,26,0.97);
      --copy-btn-bg: rgba(36,36,36,0.85);
      --copy-btn-bg-hover: #2c2c2c;
      --drop-overlay-bg: rgba(42,48,70,0.85);
      --drop-overlay-fg: #cfe0ff;
      --shadow-popover: 0 8px 24px rgba(0,0,0,0.4);
      --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);

      --queue-bg: #6a7a9a;
      --queue-bg-hover: #7a8ab0;
      --queued-border: #3a4a6a;
      --queued-border-hover: #5a6a8a;
      --queued-bg-hover: rgba(42,63,107,0.25);
      --queued-fg: #8a9ab0;
      --queued-label-fg: #6a7a9a;
      --queued-attach-fg: #6a7a9a;
      --queued-edit-border: #3a4a6a;
    }
  }

  * { box-sizing: border-box; }
  html[data-chat-density="compact"] {
    --chat-gap: 6px;
    --chat-font-size: 13px;
    --msg-pad-y: 6px;
    --msg-pad-x: 10px;
    --msg-radius: 8px;
    --msg-line-height: 1.42;
    --thinking-pad-y: 2px;
    --thinking-pad-x: 10px;
    --spinner-pad-y: 4px;
    --spinner-pad-x: 10px;
    --tool-font-size: 12px;
    --tool-summary-pad-y: 6px;
    --tool-summary-pad-x: 10px;
    --tool-list-pad-y: 6px;
    --tool-list-pad-x: 10px;
    --tool-row-pad-y: 2px;
  }
  html[data-chat-density="spacious"] {
    --chat-gap: 14px;
    --chat-font-size: 15px;
    --msg-pad-y: 13px;
    --msg-pad-x: 16px;
    --msg-radius: 10px;
    --msg-line-height: 1.65;
    --thinking-pad-y: 6px;
    --thinking-pad-x: 16px;
    --spinner-pad-y: 8px;
    --spinner-pad-x: 16px;
    --tool-font-size: 13px;
    --tool-summary-pad-y: 10px;
    --tool-summary-pad-x: 14px;
    --tool-list-pad-y: 10px;
    --tool-list-pad-x: 14px;
    --tool-row-pad-y: 5px;
  }
  body {
    font: 14px/1.55 var(--font-sans);
    font-feature-settings: var(--font-feature-default);
    margin: 0;
    padding: 56px 16px 160px;
    background-color: var(--bg);
    color: var(--fg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Editorial display in assistant prose. Fraunces handles h1–h3 and
     blockquotes — the moments where the markdown surface should read as
     written, not generated. SOFT axis softens the contrast; opsz tunes
     for ~24–36px display sizes. */
  .assistant h1,
  .assistant h2,
  .assistant h3,
  .assistant blockquote {
    font-family: var(--font-serif);
    font-feature-settings: "ss01";
    font-variation-settings: "SOFT" 30, "opsz" 32;
    letter-spacing: -0.005em;
  }
  .assistant h1 { font-weight: 600; font-variation-settings: "SOFT" 30, "opsz" 48; }
  .assistant h2 { font-weight: 600; }
  .assistant h3 { font-weight: 600; }
  .assistant blockquote {
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "SOFT" 50, "opsz" 24;
  }
  /* Tabular numerals everywhere we render numbers in tables — column
     alignment falls apart otherwise. */
  .assistant table,
  .workspace-file table,
  .msg-time { font-variant-numeric: tabular-nums; }
  #log, body[data-page="chat"] form > .row, #attachments, header > .inner { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* Sidebar — present at all widths. Mobile baseline: slides in from the
     left as an overlay. Desktop opens it as a static rail (see @1024px
     media query). The body classes `sidebar-open` / `sidebar-closed`
     drive visibility and content offsets at both widths. */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-divider);
    z-index: 8;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  /* Mobile sidebar gets a drop shadow when open so it reads as an overlay. */
  @media (max-width: 1023px) {
    body.sidebar-open #sidebar { box-shadow: var(--shadow-popover); }
  }
  /* Backdrop only matters on mobile (sidebar is overlaid). Desktop keeps
     it hidden so the rail is non-modal. */
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 7;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  @media (min-width: 1024px) { .sidebar-backdrop { display: none; } }
  /* Toggle button — fixed to the top-left of the viewport at all widths
     so the affordance is always reachable. Sits above the sidebar's
     z-index so it's clickable when the sidebar is open. */
  .sidebar-toggle {
    position: fixed; top: 10px; left: 10px;
    z-index: 10;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    cursor: pointer; padding: 0;
    box-shadow: var(--shadow-card);
  }
  .sidebar-toggle:hover { background: var(--accent-bg-soft); color: var(--accent); }
  .sidebar-toggle svg { width: 18px; height: 18px; display: block; }

  /* Sidebar content zones. */
  .sb-head {
    padding: 12px 12px 12px 52px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-divider);
  }
  .sb-head .pmos-logo-link { display: inline-flex; align-items: center; height: 32px; padding: 0 4px; }
  .sb-head .pmos-logo { width: 60px; height: 22px; display: block; }
  :root[data-color-mode="dark"] .sb-head .pmos-logo { content: url("/static/pm-os-flat-logo-dark.png"); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) .sb-head .pmos-logo {
      content: url("/static/pm-os-flat-logo-dark.png");
    }
  }
  .sb-new {
    font: inherit; font-size: 12.5px;
    background: var(--bg-elevated); color: var(--fg);
    border: 1px solid var(--border-stronger); border-radius: 6px;
    height: 32px; box-sizing: border-box;
    display: inline-flex; align-items: center;
    padding: 0 10px; cursor: pointer;
  }
  .sb-new:hover { background: var(--bg-hover); border-color: var(--border-strong); }
  .sb-nav {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 8px 4px;
  }
  .sb-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--fg-secondary);
    text-decoration: none;
  }
  .sb-nav-link:hover { background: var(--bg-row-hover); color: var(--fg); }
  .sb-nav-link.is-current {
    background: var(--accent-bg-soft);
    color: var(--accent);
    font-weight: 500;
  }
  .sb-nav-link svg,
  .sb-nav-link i[data-lucide] { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; }
  /* Reserve space for lucide icon placeholders before the SVG renders, so
     navigation labels don't shift left when the icons swap in. */
  i[data-lucide] { display: inline-block; width: 1em; height: 1em; line-height: 1; }
  .sb-nav-link u { text-underline-offset: 2px; }
  .meta-routine {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--accent-fg-strong);
    text-decoration: none;
    font-size: 10.5px;
    line-height: 1.4;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .meta-routine:hover {
    background: var(--accent-bg-soft);
    text-decoration: none;
  }
  .meta-routine img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .sb-routine-row {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .sb-routine-row .meta-routine {
    margin-left: 0;
    max-width: 100%;
  }
  .sb-section-label {
    padding: 10px 14px 4px;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .sb-pal-toggle { user-select: none; }
  .sb-pal-toggle:hover { color: var(--fg-secondary); }
  /* Pal-fired rows render a touch dimmer so the eye lands on user chats
     first when the section is expanded. */
  .sb-row--pal { opacity: 0.82; }
  .sb-row--pal:hover { opacity: 1; }
  .sb-session-section[hidden] { display: none; }
  .sb-foot {
    border-top: 1px solid var(--border-divider);
    padding: 8px;
  }
  /* Mono ledger signature — small typographic mark across every page foot.
     Editorial workshop detail; reads as a quiet stamp, not a header. */
  .sb-foot::before {
    content: "PM·OS";
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    padding: 2px 10px 8px;
  }
  .sb-foot-btn {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    background: transparent; border: 0; border-radius: 6px;
    font: inherit; font-size: 13px; color: var(--fg-secondary);
    cursor: pointer; text-align: left;
  }
  .sb-foot-btn:hover { background: var(--bg-row-hover); color: var(--fg); }
  .sb-foot-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

  header {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--header-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    z-index: 5;
    transition: transform 0.18s ease;
  }
  header.hidden { transform: translateY(-100%); }
  header > .inner {
    padding: 10px 4px 10px 56px;
    display: flex; align-items: center; gap: 12px;
  }
  header h1 { font-size: 14px; margin: 0; font-weight: 600; flex: 0 0 auto; }
  header .hdr-mobile-btn {
    font: inherit; font-size: 13px;
    color: var(--accent); background: transparent;
    border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer;
  }
  header .hdr-mobile-btn:hover { background: var(--accent-bg-soft); }
  header #status {
    font-size: 12px; color: var(--fg-muted); margin: 0;
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pmos-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 33px;
    padding: 0 6px;
    flex: 0 0 auto;
  }
  .pmos-logo-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .pmos-logo {
    display: block;
    width: 60px;
    height: 22px;
    object-fit: contain;
  }
  header p { font-size: 12px; color: var(--fg-muted); margin: 0; flex: 1; }
  header nav { display: flex; gap: 4px; align-items: center; }
  header nav a, header nav button {
    font: inherit; font-size: 13px;
    color: var(--accent); text-decoration: none; background: transparent;
    padding: 4px 8px; border: 0; border-radius: 6px; cursor: pointer;
  }
  header nav a:hover, header nav button:hover { background: var(--accent-bg-soft); }

  #sessions-panel {
    position: fixed; top: 44px; left: 50%; transform: translateX(-50%);
    max-width: 720px; width: calc(100% - 32px);
    background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px;
    box-shadow: var(--shadow-popover);
    max-height: 60vh; overflow-y: auto;
    display: none; z-index: 7;
  }
  #sessions-panel.show { display: block; }
  #sessions-panel .sess-row {
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 2px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  #sessions-panel .sess-row:hover { background: var(--accent-bg-soft); }
  #sessions-panel .sess-row.current { background: var(--accent-bg-soft); }
  #sessions-panel .sess-row.current::after {
    content: " (current)"; color: var(--accent); font-size: 11px;
  }
  #sessions-panel .sess-title-row {
    display: flex; align-items: flex-start; gap: 7px; min-width: 0;
  }
  #sessions-panel .sess-prompt {
    flex: 1; min-width: 0;
    font-size: 13px; color: var(--fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #sessions-panel .sess-subtitle {
    font-size: 12px; color: var(--fg-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #sessions-panel .sess-meta {
    font-size: 11px; color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }
  #sessions-panel .sess-empty { padding: 14px; color: var(--fg-muted); font-size: 13px; text-align: center; }
  #hover-zone {
    position: fixed; top: 0; left: 0; right: 0; height: 24px;
    z-index: 4; pointer-events: auto;
  }
  #log {
    display: flex;
    flex-direction: column;
    gap: var(--chat-gap);
    font-size: var(--chat-font-size);
  }
  .new-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 48px 4px 8px;
    animation: new-chat-empty-fade 320ms ease-out both;
  }
  @keyframes new-chat-empty-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .new-chat-greeting {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
    line-height: 1.15;
  }
  .new-chat-tagline {
    font-size: 16px;
    color: var(--fg-secondary);
    line-height: 1.3;
  }
  .new-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  .new-chat-chip {
    appearance: none;
    background: var(--bg-elevated, var(--bg-row-hover));
    color: var(--fg);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 999px;
    padding: 7px 14px 7px 11px;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: transform 80ms ease, background 120ms ease, border-color 120ms ease;
  }
  .new-chat-chip:hover {
    background: var(--bg-row-hover);
    border-color: var(--accent, currentColor);
  }
  .new-chat-chip:active { transform: translateY(1px); }
  .new-chat-chip i, .new-chat-chip svg {
    width: 14px;
    height: 14px;
    color: var(--fg-secondary);
  }
  .msg {
    padding: var(--msg-pad-y) var(--msg-pad-x);
    border-radius: var(--msg-radius);
    word-wrap: break-word;
    line-height: var(--msg-line-height);
    position: relative;
  }
  .user { background: var(--accent-bg-strong); align-self: flex-end; max-width: 85%; white-space: pre-wrap; }
  .user-inline-image {
    display: block;
    max-width: min(360px, 100%);
    max-height: 260px;
    object-fit: contain;
    border-radius: 8px;
    margin: 6px 0;
  }
  .user-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .user-attachment-thumb {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent-fg-strong) 22%, transparent);
    background: var(--accent-bg-soft);
  }
  .user-attachment-text {
    font-size: 12px;
    color: var(--accent-fg-strong);
    margin-top: 4px;
    font-style: italic;
  }
  .msg a {
    color: var(--chat-url-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .msg-time {
    color: var(--fg-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  html[data-chat-timestamps="hidden"] .msg-time { display: none; }
  html[data-chat-timestamps="always"] .msg-time {
    display: block;
    margin-top: 6px;
    text-align: right;
  }
  html[data-chat-timestamps="hover"] .msg-time {
    position: absolute;
    right: 8px;
    bottom: -18px;
    z-index: 2;
    display: block;
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
  }
  html[data-chat-timestamps="hover"] .msg:hover > .msg-time,
  html[data-chat-timestamps="hover"] .msg:focus-within > .msg-time {
    opacity: 1;
    visibility: visible;
  }
  .nudge-wrap {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .nudge-wrap.fading {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }
  .nudge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    font-size: 13px;
    box-shadow: var(--shadow-card);
  }
  /* "Plain" nudge variant — label as ambient text and the action as a
     subtle inline button. Reads as a hint rather than a toggle. */
  .nudge-plain {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--fg-muted);
    font-size: 13px;
  }
  .nudge-plain .nudge-action {
    background: transparent;
    color: var(--accent);
    padding: 0;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .nudge-plain .nudge-action:hover { background: transparent; color: var(--accent-fg-strong); }
  .nudge-action {
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--accent-bg-strong);
    color: var(--accent-fg-strong);
    cursor: pointer;
  }
  .nudge-action:hover { background: var(--accent-bg-soft); }
  .nudge-action:disabled {
    cursor: default;
    opacity: 0.7;
  }
  /* Assistant: render as voice on the page canvas, not as a card.
     Removes the tile border + background; padding stays so code blocks
     and copy button keep their offsets. User bubble keeps its bubble. */
  .assistant {
    background: transparent;
    border: 0;
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
  }
  .assistant .copy-btn {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-table); background: var(--copy-btn-bg);
    border-radius: 6px; cursor: pointer; color: var(--fg-secondary);
    opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
    padding: 0;
  }
  .assistant:hover > .copy-btn,
  .assistant:focus-within > .copy-btn { opacity: 1; }
  .assistant .copy-btn:hover { color: var(--fg); background: var(--copy-btn-bg-hover); }
  .assistant .copy-btn.copied { opacity: 1; color: var(--success-fg); border-color: var(--success-border); }
  .assistant .copy-btn svg { width: 14px; height: 14px; }
  .assistant p:first-child { margin-top: 0; }
  .assistant p:last-child,
  .assistant p:has(+ .msg-time),
  .assistant p:has(+ .copy-btn + .msg-time) { margin-bottom: 0; }
  .msg-context-menu {
    position: fixed;
    z-index: 2000;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-popover);
  }
  .msg-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 7px 9px;
    cursor: pointer;
  }
  .msg-context-item svg,
  .msg-context-item i {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
  .msg-context-label { flex: 1; }
  .msg-context-item:hover { background: var(--accent-bg-soft); }
  .msg-context-item.danger { color: var(--danger-fg); }
  .msg-context-item:disabled { cursor: default; opacity: 0.7; }
  .assistant pre {
    background: var(--bg-pre);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12.5px;
    position: relative;
  }
  .assistant code { background: var(--bg-code); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
  .assistant pre code { background: transparent; padding: 0; }
  .assistant ul, .assistant ol { padding-left: 22px; }
  .assistant blockquote { border-left: 3px solid var(--border-strong); padding: 2px 12px; color: var(--fg-secondary); margin: 8px 0; }
  .assistant .copy-scoped-btn {
    top: 6px;
    right: 6px;
  }
  .assistant pre:hover > .copy-scoped-btn,
  .assistant pre:focus-within > .copy-scoped-btn,
  .assistant .table-wrap:hover > .copy-scoped-btn,
  .assistant .table-wrap:focus-within > .copy-scoped-btn {
    opacity: 1;
  }
  .assistant .table-wrap { overflow-x: auto; max-width: 100%; margin: 8px 0; border: 1px solid var(--border-table); border-radius: 6px; position: relative; }
  .assistant table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
  .assistant table th, .assistant table td {
    border: 1px solid var(--border-table);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
  }
  .assistant table th { background: var(--bg-table-header); font-weight: 600; }
  .assistant table tr:nth-child(even) td { background: var(--bg-table-zebra); }
  .thinking {
    color: var(--fg-secondary);
    font-style: italic;
    font-size: 13px;
    background: transparent;
    padding: var(--thinking-pad-y) var(--thinking-pad-x);
  }
  .task-notification {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-secondary);
    font-size: 13px;
    background: transparent;
    padding: var(--thinking-pad-y) var(--thinking-pad-x);
  }
  .task-notification-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fg-subtle);
    flex: 0 0 auto;
  }
  .task-notification-dot[data-status="completed"] { background: #2e9e5b; }
  .task-notification-dot[data-status="failed"],
  .task-notification-dot[data-status="error"] { background: #c84a4a; }
  .error { background: var(--danger-bg-soft); color: var(--danger-fg); }
  .pending { color: var(--fg-muted); font-style: italic; }
  .spinner {
    display: flex; align-items: center; gap: 10px;
    color: var(--fg-secondary); font-style: italic; font-size: 13px;
    padding: var(--spinner-pad-y) var(--spinner-pad-x);
    width: 100%;
  }
  .spinner::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: spinner-pulse 1.3s ease-in-out infinite;
    flex: 0 0 auto;
  }
  .spinner-verb { flex: 0 1 auto; }
  .spinner-timer {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted); font-size: 12px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .scroll-bottom-btn {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 1;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateX(-50%);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--fg);
    box-shadow: var(--shadow-popover);
    cursor: pointer;
  }
  .scroll-bottom-btn[hidden],
  body.viewing-settings .scroll-bottom-btn { display: none; }
  .scroll-bottom-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-stronger);
  }
  .scroll-bottom-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .scroll-bottom-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke-width: 2.4;
  }
  @keyframes spinner-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
  }

  details.tools {
    background: var(--bg-tool);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--tool-font-size);
  }
  html[data-hide-finished-tools="1"] details.tools.finished { display: none; }
  details.tools > summary {
    cursor: pointer;
    padding: var(--tool-summary-pad-y) var(--tool-summary-pad-x);
    color: var(--fg-tool-summary);
    font-family: var(--font-mono);
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  details.tools > summary::-webkit-details-marker { display: none; }
  /* Chevron via masked SVG — inherits currentColor and animates rotation
     instead of swapping a glyph. Replaces the legacy "▸ / ▾" text arrows. */
  details.tools > summary::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
    transition: transform 0.18s ease;
    opacity: 0.65;
  }
  details.tools[open] > summary::before { transform: rotate(90deg); }
  details.tools > summary:hover::before { opacity: 1; }
  details.tools .tool-list {
    border-top: 1px solid var(--border);
    padding: var(--tool-list-pad-y) var(--tool-list-pad-x);
    font-family: var(--font-mono);
    color: var(--fg-tool-row);
  }
  details.tools .tool-row { padding: var(--tool-row-pad-y) 0; white-space: pre-wrap; word-break: break-word; }
  details.tools .tool-row.use { color: var(--fg-tool-row); }
  details.tools .tool-row.result { color: var(--success-tool-fg); }

  .tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    margin: 0 6px 0 2px;
    vertical-align: -3px;
    flex: 0 0 auto;
    border-radius: 3px;
    font-style: normal;
    font-family: var(--font-body);
  }
  .tool-icon img { display: block; width: 14px; height: 14px; }
  .tool-icon.tool-icon-emoji { font-size: 13px; line-height: 1; }
  .tool-icon.tool-icon-fallback {
    background: var(--tool-fallback-bg); color: var(--tool-fallback-fg);
    font-size: 10px; font-weight: 700; line-height: 1;
    width: 14px; height: 14px;
    /* No padding here — the parent already does flex centering. A 1px top
       padding used to sit on this rule and pushed the glyph below the icon
       row, making letter chips look low next to SVG siblings. */
  }
  details.tools > summary .tool-icon { vertical-align: -2px; }

  #askq-dock {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: var(--form-bg);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(6px);
    display: none;
    z-index: 6;
    max-height: 70vh;
    overflow-y: auto;
  }
  #askq-dock.show { display: block; }

  /* Cross-session "PM is asking you in another chat" nudge.
     Anchored bottom-center so it doesn't fight the dock or composer for the
     same edge — and easy to spot regardless of which side the sidebar is on. */
  #askq-attention-badge {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-bg-strong);
    color: var(--accent-fg-strong);
    border: 1px solid var(--accent);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 7;
    cursor: pointer;
    line-height: 1.3;
    max-width: min(540px, calc(100% - 32px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #askq-attention-badge[hidden] { display: none; }
  #askq-attention-badge:hover { filter: brightness(1.05); }
  #askq-attention-badge:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  #askq-dock > .askq { max-width: 760px; margin: 0 auto; }
  body[data-page="chat"] form.hidden { display: none; }
  .askq {
    border: 1px solid var(--askq-border);
    background: var(--askq-bg);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .askq-q { font-weight: 600; margin-bottom: 4px; }
  .askq-header { font-size: 12px; color: var(--askq-fg-header); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .askq-question + .askq-question { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--askq-border-subtle); }
  .askq-options { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
  .askq-option {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    cursor: pointer;
  }
  .askq-option:hover { background: var(--askq-bg-hover); }
  .askq-option input { margin-top: 3px; flex: 0 0 auto; }
  .askq-option-text { display: flex; flex-direction: column; gap: 2px; }
  .askq-option-label { font-weight: 500; }
  .askq-option-desc { font-size: 12px; color: var(--askq-fg-desc); line-height: 1.4; }
  .askq-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
  .askq-actions button {
    font: inherit; font-size: 13px;
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
  }
  .askq-skip { background: var(--bg-elevated); color: var(--fg-tool-row); border: 1px solid var(--border-strong); }
  .askq-submit { background: var(--button-primary-bg); color: var(--button-primary-fg); border: 0; }
  .askq-submit:hover:not(:disabled) { background: var(--button-primary-bg-hover); }
  .askq-submit:disabled { background: var(--button-disabled-bg); cursor: not-allowed; }
  .askq.answered { opacity: 0.75; }
  .askq.answered .askq-option { cursor: default; }
  .askq-static { background: var(--askq-bg-static); }
  .askq-option-static { cursor: default; align-items: flex-start; }
  .askq-option-static:hover { background: transparent; }
  .askq-option-selected {
    background: var(--askq-bg-pill);
    border: 1px solid var(--askq-border-strong);
    color: var(--askq-fg-pill);
  }
  .askq-option-selected:hover { background: var(--askq-bg-pill); }
  .askq-option-bullet {
    color: var(--askq-fg-bullet); flex: 0 0 auto;
    width: 14px; text-align: center;
    line-height: 1.4;
  }
  .askq-answer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .askq-answer-pill {
    display: inline-block;
    background: var(--askq-bg-pill); border: 1px solid var(--askq-border-strong);
    color: var(--askq-fg-pill); font-weight: 500;
    padding: 3px 10px; border-radius: 999px; font-size: 13px;
  }
  .askq-answer-empty { color: var(--askq-fg-header); font-size: 13px; font-style: italic; }

  body[data-page="chat"] form {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 6px;
    background: var(--form-bg);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(6px);
  }
  body[data-page="chat"] form > .row {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "input input input input"
      "plus  .     mic   send";
    column-gap: 4px;
    row-gap: 2px;
    align-items: end;
    padding: 6px 6px 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  body[data-page="chat"] form > .row > #plus { grid-area: plus; justify-self: start; }
  body[data-page="chat"] form > .row > #i { grid-area: input; }
  body[data-page="chat"] form > .row > #micBtn { grid-area: mic; justify-self: end; }
  body[data-page="chat"] form > .row > #b { grid-area: send; justify-self: end; }
  body[data-page="chat"] form > .row:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 6px 20px rgba(0,0,0,0.06);
  }
  textarea,
  #i {
    padding: 8px 6px 4px;
    font: inherit;
    border: 0;
    border-radius: 0;
    resize: none;
    min-height: 36px;
    max-height: 200px;
    background: transparent;
    color: var(--fg);
  }
  #i {
    position: relative;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline: none;
  }
  #i:focus { box-shadow: none; }
  #i[data-empty="true"]::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 6px;
    top: 8px;
    color: var(--fg-muted);
    pointer-events: none;
  }
  #i a.composer-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: text;
  }
  .composer-link-popover {
    position: fixed;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(520px, calc(100vw - 16px));
    padding: 5px 6px 5px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    box-shadow: var(--shadow-popover);
    font-size: 12px;
    line-height: 1.2;
  }
  .composer-link-popover[hidden] { display: none; }
  .composer-link-popover-url {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
  }
  .composer-link-popover-clear {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
  }
  .composer-link-popover-clear:hover {
    background: var(--bg-hover);
    color: var(--fg);
    border-color: var(--border);
  }
  .composer-link-popover-clear svg {
    width: 14px;
    height: 14px;
  }
  .icon-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    font-size: 18px; line-height: 1;
    background: transparent; color: var(--fg-secondary);
    border: 0; border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
  }
  .icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
  .icon-btn svg { width: 16px; height: 16px; display: block; }
  .icon-btn.recording {
    color: var(--fg);
  }
  .icon-btn.recording svg { color: var(--fg); }

  /* Voice input is OFF by default. The mic button + recording bar only
     show when the user enables 'Voice input in the composer' in Settings,
     which sets data-voice-enabled on the body. */
  body[data-page="chat"]:not([data-voice-enabled]) #micBtn,
  body[data-page="chat"]:not([data-voice-enabled]) #voice-recording-bar {
    display: none !important;
  }
  body[data-page="chat"]:not([data-voice-enabled]) form > .row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "input input input"
      "plus  .     send";
  }
  @keyframes micPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.85; }
  }

  /* Voice recording bar — always rendered, fades in/out via body.voice-recording.
     Spans the entire bottom row. Buttons underneath fade out concurrently so
     the transition cross-dissolves rather than popping. */
  body[data-page="chat"] form > .row > .voice-recording-bar {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex !important; /* override [hidden] when present */
    align-items: center;
    gap: 8px;
    padding: 0;
    opacity: 0;
    transform: translateY(3px) scale(0.985);
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body[data-page="chat"].voice-recording form > .row > .voice-recording-bar {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Normal bottom-row controls fade out concurrently. They sit in the same
     grid cells as the bar above them; the bar's opaque pill bg covers them
     once fade-in completes. */
  body[data-page="chat"] form > .row > #plus,
  body[data-page="chat"] form > .row > #micBtn,
  body[data-page="chat"] form > .row > #b {
    transition: opacity 0.22s ease;
  }
  body[data-page="chat"].voice-recording form > .row > #plus,
  body[data-page="chat"].voice-recording form > .row > #micBtn,
  body[data-page="chat"].voice-recording form > .row > #b {
    opacity: 0;
    pointer-events: none;
  }

  body[data-page="chat"].voice-recording form > .row > #i { color: var(--fg-muted); }
  body[data-page="chat"].voice-recording form > .row > #i:empty::before {
    content: "Listening…";
    color: var(--fg-muted);
    font-style: italic;
  }

  /* Brief acknowledgement animation when the user clicks ✓ */
  .voice-confirm:active { transform: scale(0.94); }
  .voice-confirm.committing {
    animation: voiceConfirmCommit 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes voiceConfirmCommit {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); background: var(--button-primary-bg-hover); }
    100% { transform: scale(1); }
  }

  /* Respect users' motion preferences — kill the bar fade, button pulse,
     and confirm-click animation when prefers-reduced-motion is set. */
  @media (prefers-reduced-motion: reduce) {
    body[data-page="chat"] form > .row > .voice-recording-bar,
    body[data-page="chat"] form > .row > #plus,
    body[data-page="chat"] form > .row > #micBtn,
    body[data-page="chat"] form > .row > #b,
    .voice-action,
    .icon-btn.recording {
      transition: none !important;
      animation: none !important;
    }
    .voice-confirm.committing {
      animation: none !important;
    }
    .icon-btn.recording {
      /* Drop the micPulse animation too */
      animation: none !important;
    }
  }

  /* Pill that contains timer + waveform. Neutral / matches pm-os-web's
     existing design language (no purple). */
  .voice-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    height: 32px;
    box-sizing: border-box;
  }
  .voice-timer {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
  }
  .voice-waveform {
    flex: 1;
    min-width: 0;
    height: 20px;
    display: block;
  }

  /* X cancel and ✓ confirm buttons on the right */
  .voice-action {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
  }
  .voice-action svg { width: 16px; height: 16px; }
  .voice-cancel {
    background: transparent;
    color: var(--fg-muted);
  }
  .voice-cancel:hover { background: var(--bg-hover); color: var(--fg); }
  .voice-confirm {
    background: var(--button-primary-bg);
    color: var(--button-primary-fg);
  }
  .voice-confirm:hover { background: var(--button-primary-bg-hover); }
  .voice-confirm svg { color: var(--button-primary-fg); }
  .pmos-toast-host {
    position: fixed;
    left: 50%;
    bottom: var(--pmos-toast-bottom, 36px);
    z-index: 12000;
    transform: translateX(-50%);
    pointer-events: none;
  }
  body[data-page="chat"] { --pmos-toast-bottom: 92px; }
  .pmos-toast {
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--fg);
    box-shadow: var(--shadow-popover);
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 220ms ease;
  }
  .pmos-toast.is-shown { opacity: 1; transform: translateY(0); }
  .pmos-toast-error {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong));
    background: var(--danger-bg-soft);
    color: var(--danger-fg);
  }
  @media (prefers-reduced-motion: reduce) {
    .pmos-toast { transition: none; }
  }
  button.send {
    padding: 0 16px; height: 32px; min-width: 64px;
    font: inherit; font-weight: 500;
    background: var(--button-primary-bg); color: var(--button-primary-fg);
    border: 0; border-radius: 999px; cursor: pointer;
    transition: background 140ms ease, color 140ms ease,
                transform 80ms ease, box-shadow 140ms ease,
                opacity 140ms ease;
    display: inline-flex; align-items: center; justify-content: center;
  }
  button.send.icon-only {
    width: 32px; min-width: 32px; height: 32px; padding: 0;
  }
  button.send.icon-only svg {
    width: 16px; height: 16px; display: block;
    transition: transform 140ms ease;
  }
  button.send:active:not(:disabled) { transform: scale(0.94); }
  button.send:focus-visible {
    outline: 2px solid var(--accent, #4a90e2);
    outline-offset: 2px;
  }

  /* Empty composer — no message to send yet. The button stays visible but
     fades back so it doesn't compete with the placeholder text. Hovering it
     still gives feedback so users know it's interactive. */
  button.send.is-empty {
    background: var(--bg-row-hover, #efefef);
    color: var(--fg-muted);
    cursor: default;
  }
  button.send.is-empty:hover {
    background: var(--bg-hover, #e5e5e5);
    color: var(--fg-secondary);
  }
  button.send.is-empty:active { transform: none; }

  /* Ready to send — composer has content. Solid primary, gains a small lift
     on hover that reads as "press me". */
  button.send.is-ready {
    background: var(--button-primary-bg);
    color: var(--button-primary-fg);
  }
  button.send.is-ready:hover {
    background: var(--button-primary-bg-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  button.send.is-ready:hover svg { transform: translateY(-1px); }

  /* Uploading — disabled and spinning. */
  button.send:disabled { cursor: not-allowed; }
  button.send.is-uploading {
    background: var(--bg-row-hover, #efefef);
    color: var(--fg-muted);
    opacity: 0.9;
  }
  button.send.is-uploading svg {
    animation: send-spin 1s linear infinite;
  }
  @keyframes send-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Stop — soft danger surface, not a fire alarm. Filled red still reads
     "destructive" without being loud. */
  button.send.stop {
    background: var(--danger);
    color: #ffffff;
  }
  button.send.stop:hover {
    background: var(--danger-hover);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.25);
  }
  button.send.stop svg {
    /* `square` lucide is hollow by default; fill it so it reads as a stop
       button at this small size. */
    fill: currentColor;
    width: 12px; height: 12px;
  }

  /* Queue — friendlier than Stop, soft accent surface. */
  button.send.queue {
    background: var(--queue-bg);
    color: #ffffff;
  }
  button.send.queue:hover {
    background: var(--queue-bg-hover);
    box-shadow: 0 2px 8px rgba(90, 106, 138, 0.25);
  }

  /* Tab-to-accept hint for Haiku-predicted next-message ghost text. Floats
     above the composer row, mirroring the context donut's vertical placement
     but on the left so the two never collide. Visible only while a prediction
     is loaded — toggled via the [hidden] attribute by app.js. */
  .predict-hint {
    position: absolute;
    left: 14px; bottom: calc(100% + 8px);
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg-muted);
    font-size: 11px; line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .predict-hint:not([hidden]) { opacity: 0.85; }
  .predict-hint kbd {
    font: inherit; font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--fg);
  }
  /* Hide the hint on narrow viewports — there isn't enough horizontal room
     above the form, and the placeholder still does the heavy lifting. */
  @media (max-width: 1023px) { .predict-hint { display: none !important; } }

  /* Tiny donut showing per-turn context-window usage. Floats just above the
     form's top edge so it reads as part of the chat area rather than the
     input row. `bottom: 100% + gap` places it relative to the form's box. */
  .ctx-donut {
    position: absolute;
    right: 14px; bottom: calc(100% + 8px);
    width: 22px; height: 22px;
    color: var(--fg-muted);
    cursor: default;
  }
  .ctx-donut[hidden] { display: none; }
  .ctx-donut svg { display: block; }
  .ctx-donut-track { stroke: var(--border); }
  .ctx-donut-fill {
    stroke: currentColor;
    transition: stroke-dashoffset 0.4s ease, stroke 0.2s ease;
    stroke-linecap: round;
  }
  .ctx-donut.lvl-warn  { color: #d18b1a; }
  .ctx-donut.lvl-high  { color: var(--danger); }
  .ctx-donut-tip {
    position: absolute;
    bottom: calc(100% + 6px); right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px; line-height: 1.4;
    color: var(--fg);
    white-space: nowrap;
    box-shadow: var(--shadow-popover);
    opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease;
  }
  .ctx-donut:hover .ctx-donut-tip,
  .ctx-donut:focus-visible .ctx-donut-tip { opacity: 1; }
  /* On narrow viewports the centered .row stretches to the form's right edge
     and the donut would sit on top of the Send button — hide it instead. */
  @media (max-width: 1023px) { .ctx-donut { display: none !important; } }

  .sources-pill {
    position: absolute;
    right: 44px;
    bottom: calc(100% + 7px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    box-shadow: var(--shadow-popover);
    font: inherit;
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
  }
  .sources-pill[hidden] { display: none; }
  .sources-pill:hover,
  .sources-pill[aria-expanded="true"] {
    background: var(--bg-hover);
    color: var(--fg);
  }
  .sources-pill.is-empty {
    color: var(--fg-muted);
    opacity: 0.8;
  }
  .sources-pill-count {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-code);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }
  .sources-popover {
    position: fixed;
    z-index: 9000;
    box-sizing: border-box;
    max-height: min(520px, calc(100vh - 24px));
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg-elevated);
    color: var(--fg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    font-size: 12.5px;
  }
  .sources-popover[hidden] { display: none; }
  .sources-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }
  .sources-popover-title {
    font-weight: 600;
    font-size: 13px;
  }
  .sources-popover-close {
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 5px;
  }
  .sources-popover-close:hover {
    background: var(--bg-hover);
    color: var(--fg);
  }
  .sources-empty,
  .sources-mode,
  .sources-note {
    color: var(--fg-muted);
    font-size: 12px;
    line-height: 1.4;
  }
  .sources-group + .sources-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-divider);
  }
  .sources-group-title {
    margin: 0 0 6px;
    color: var(--fg-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sources-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .sources-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
  }
  .sources-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
  }
  .sources-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sources-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sources-item-meta,
  .sources-item-note {
    color: var(--fg-muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .sources-item-note {
    display: block;
    max-width: none;
    text-align: left;
  }
  .sources-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-divider);
  }
  @media (max-width: 1023px) {
    .sources-pill,
    .sources-popover {
      display: none !important;
    }
  }

  /* Tiny status the auto-save timer surfaces ("Saving context…" → "Saved …").
     Lives in the same spot as the donut so it reads as ambient state for the
     chat area rather than a chat bubble. */
  .auto-save-indicator {
    position: absolute;
    right: 132px; bottom: calc(100% + 10px);
    font-size: 12px;
    color: var(--fg-muted);
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .auto-save-indicator[hidden] { display: none; }
  .auto-save-indicator.is-fading { opacity: 0; }
  @media (max-width: 1023px) { .auto-save-indicator { display: none !important; } }

  .msg.queued {
    background: transparent;
    border: 1px dashed var(--queued-border);
    color: var(--queued-fg);
    position: relative;
    padding: 10px 14px;
    align-self: flex-end;
    max-width: 85%;
    white-space: pre-wrap;
  }
  .msg.queued:hover {
    background: var(--queued-bg-hover);
    border-color: var(--queued-border-hover);
  }
  .queued-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--queued-label-fg);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .queued-attachments {
    font-size: 12px;
    color: var(--queued-attach-fg);
    margin-top: 4px;
    font-style: italic;
  }
  .queued-edit {
    position: absolute;
    top: 6px; right: 6px;
    font: inherit; font-size: 12px;
    background: var(--bg-elevated);
    color: var(--accent);
    border: 1px solid var(--queued-edit-border);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
  }
  .queued-edit:hover { background: var(--accent-bg-soft); }
  .msg.queued:hover .queued-edit,
  .msg.queued:focus-within .queued-edit { opacity: 1; }

  #drop-overlay {
    position: fixed; inset: 0;
    background: var(--drop-overlay-bg);
    backdrop-filter: blur(4px);
    border: 3px dashed var(--accent);
    display: none;
    align-items: center; justify-content: center;
    z-index: 100;
    pointer-events: none;
    color: var(--drop-overlay-fg);
    font-size: 18px;
    font-weight: 500;
  }
  #drop-overlay.show { display: flex; }

  #attachments { max-width: 760px; margin: 0 auto 8px; display: flex; flex-wrap: wrap; gap: 6px; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-bg-strong); color: var(--accent-fg-strong);
    padding: 4px 8px 4px 10px; border-radius: 14px; font-size: 12px;
  }
  .chip.is-image { padding-left: 4px; }
  .chip-thumb {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--accent-bg-soft);
    flex: 0 0 auto;
  }
  .chip button {
    background: transparent; border: 0; color: var(--accent-fg-strong);
    cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
  }

  /* Context-attachment pill (chip variant for tracker → chat handoff). */
  .ctx-pill { gap: 6px; }
  .ctx-pill-label { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ctx-pop {
    position: fixed; z-index: 50;
    max-width: 360px; padding: 10px 12px;
    background: var(--bg-elevated); color: var(--fg);
    border: 1px solid var(--border-strong); border-radius: 8px;
    box-shadow: var(--shadow-popover);
    font-size: 12.5px; line-height: 1.45;
  }
  .ctx-pop h4 { margin: 0 0 4px; font-size: 13px; }
  .ctx-pop .ctx-pop-meta { color: var(--fg-muted); font-size: 11.5px; margin-top: 6px; }
  .ctx-pop .ctx-pop-summary { color: var(--fg-secondary); margin-top: 4px; white-space: pre-wrap; }
  .ctx-pop .ctx-pop-fu { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .ctx-pop[hidden] { display: none; }

  #picker {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    max-width: 720px; width: calc(100% - 32px);
    background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px;
    box-shadow: var(--shadow-popover);
    max-height: 320px; overflow-y: auto;
    display: none; z-index: 10;
  }
  #picker.show { display: block; }
  .pick-item { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--border-subtle); }
  .pick-item:last-child { border-bottom: 0; }
  .pick-item.active { background: var(--accent-bg-soft); }
  .pick-item.disabled { cursor: not-allowed; opacity: 0.6; }
  .pick-item.disabled .pick-name { color: var(--fg-muted); }
  .pick-item.disabled.active { background: transparent; }
  .pick-name { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 500; }
  .pick-desc { font-size: 12px; color: var(--fg-secondary); line-height: 1.4; max-height: 2.8em; overflow: hidden; }
  .pick-divider {
    padding: 6px 12px;
    font-size: 11px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-divider);
    border-bottom: 1px solid var(--border-subtle);
    border-top: 1px solid var(--border-subtle);
  }

  @media (min-width: 1024px) {
    /* Desktop chat: when sidebar is open, content shifts right; when
       collapsed, content takes the full viewport width. The toggle button
       stays fixed top-left in both states. */
    body[data-page="chat"].sidebar-open {
      padding: 56px 24px 160px 304px;
    }
    body[data-page="chat"].sidebar-closed {
      padding: 56px 24px 160px 60px;
    }
    body[data-page="chat"].sidebar-open form,
    body[data-page="chat"].sidebar-open #askq-dock { left: 280px; }
    body[data-page="chat"].sidebar-open #picker { left: calc(50% + 140px); }
    /* Header at desktop: hide the mobile-only buttons; just show #status. */
    body[data-page="chat"] header .hdr-mobile-btn { display: none; }
    body[data-page="chat"] header > .inner { padding-left: 56px; }
    body[data-page="chat"].sidebar-open header > .inner { padding-left: 296px; }
    #sessions-panel { display: none !important; }
  }

  /* Sessions list rows — used in the chat sidebar at all widths now. */
  .sb-list { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; }
  .sb-list-pinned {
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: 2px;
  }
  .sb-row {
    position: relative;
    padding: 10px 12px;
    margin: 2px 8px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    border-radius: 10px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .sb-row:hover { background: var(--bg-row-hover); }
  .sb-row.pinned-draggable { cursor: grab; }
  .sb-row.pinned-draggable:active { cursor: grabbing; }
  .sb-row.dragging { opacity: 0.55; }
  .sb-row.drop-before::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--accent);
    pointer-events: none;
  }
  .sb-list-pinned.drop-end {
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  .sb-row.current {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-card);
  }
  .sb-title-row {
    display: flex; align-items: flex-start; gap: 7px; min-width: 0;
  }
  .sb-prompt {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 500;
    color: var(--fg); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .sb-row.current .sb-prompt { font-weight: 600; }
  .sb-subtitle {
    font-size: 12px; color: var(--fg-secondary); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sb-meta { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .sb-empty { padding: 14px; color: var(--fg-muted); font-size: 12px; text-align: center; }
  .sb-day-divider {
    padding: 14px 14px 4px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fg-muted);
    opacity: 0.75;
    user-select: none;
  }
  .sb-day-divider:first-child { padding-top: 6px; }
  .sb-row-draft .sb-prompt {
    color: var(--fg);
  }
  .sb-row-draft .sb-meta {
    color: var(--fg-muted);
  }
  .pmos-find-bar {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 200;
    width: max-content;
    max-width: calc(100vw - 36px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    border-radius: 10px;
    background: var(--bg-elevated, #ffffff);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
  }
  .pmos-find-bar[hidden] { display: none; }
  .pmos-find-leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--fg-muted);
    flex: 0 0 auto;
  }
  .pmos-find-leading svg { width: 14px; height: 14px; display: block; }
  .pmos-find-input {
    flex: 1 1 220px;
    min-width: 140px;
    max-width: 280px;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--fg);
    font: inherit;
    height: 26px;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .pmos-find-input::placeholder { color: var(--fg-muted); }
  .pmos-find-status {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--fg-muted);
    padding: 0 6px 0 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .pmos-find-status:empty { display: none; }
  .pmos-find-bar.no-match .pmos-find-input { color: var(--danger, #b00); }
  .pmos-find-bar.no-match .pmos-find-status { color: var(--danger, #b00); }
  .pmos-find-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--fg-secondary);
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .pmos-find-btn:hover { background: var(--bg-row-hover); color: var(--fg); }
  .pmos-find-btn:focus-visible {
    outline: 2px solid var(--accent, #4a90e2);
    outline-offset: 1px;
  }
  .pmos-find-btn svg { width: 14px; height: 14px; display: block; }
  .pmos-find-bar.no-match .pmos-find-btn { color: var(--danger, #b00); }
  .sess-section-label {
    padding: 8px 12px 3px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  /* Design-system primitives shared by the static pages. Keep these after
     chat's desktop media rules so page shells can opt out of chat-only
     header/sidebar behavior with explicit page selectors. */
  .app-shell {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--fg);
    display: flex;
    flex-direction: column;
  }
  .app-main {
    flex: 1;
    display: flex;
    min-height: 0;
  }
  .app-main.with-header-offset { padding-top: 48px; }
  .app-header {
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--header-bg);
    backdrop-filter: blur(8px);
  }
  .app-header-fixed {
    position: fixed;
    top: 0;
    transition: transform 0.18s ease;
  }
  .app-header-sticky {
    position: sticky;
    top: 0;
  }
  .app-header.hidden { transform: translateY(-100%); }
  body[data-page="tracker"] header#hdr.app-header { display: flex; }
  .app-title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    font-weight: 600;
  }
  .app-spacer { flex: 1; }
  .page-crumbs {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--fg-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
  }
  .page-crumbs a {
    color: var(--accent);
    text-decoration: none;
  }
  .page-crumbs a:hover { text-decoration: underline; }

  .workspace-text-controls {
    position: relative;
    width: 74px;
    height: 36px;
    flex: 0 0 auto;
    outline: none;
  }
  .workspace-text-trigger,
  .workspace-text-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 36px;
    transition: opacity 0.12s ease, visibility 0.12s ease;
  }
  .workspace-text-trigger {
    pointer-events: none;
  }
  .workspace-text-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .workspace-text-controls:hover .workspace-text-trigger,
  .workspace-text-controls:focus-within .workspace-text-trigger {
    opacity: 0;
    visibility: hidden;
  }
  .workspace-text-controls:hover .workspace-text-actions,
  .workspace-text-controls:focus-within .workspace-text-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .workspace-text-controls:focus-visible .workspace-text-actions {
    box-shadow: 0 0 0 2px var(--accent-bg-strong);
    border-radius: 6px;
  }
  .workspace-text-btn {
    color: var(--fg-secondary);
  }
  .workspace-text-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }
  .workspace-text-btn:disabled:hover {
    background: transparent;
    color: var(--fg-secondary);
  }

  .btn {
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    text-decoration: none;
  }
  .btn:hover:not(:disabled) {
    background: var(--accent-bg-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
    color: var(--accent-fg-strong);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-bg-strong);
  }
  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }
  .btn-sm {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
  }
  .btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }
  .btn-primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-fg);
    border-color: transparent;
  }
  .btn-primary:hover:not(:disabled) {
    background: var(--button-primary-bg-hover);
    color: var(--button-primary-fg);
  }
  .btn-secondary {
    background: var(--bg-elevated);
    color: var(--fg-secondary);
    border-color: var(--border-strong);
  }
  .btn-danger {
    color: var(--danger);
    border-color: var(--border-strong);
  }
  .btn-danger:hover {
    background: var(--danger-bg-soft);
    color: var(--danger);
  }
  .btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--fg-muted);
  }
  .btn-quiet:hover {
    background: var(--bg-row-hover);
    color: var(--fg);
  }
  .btn-icon-sm {
    width: 28px;
    height: 28px;
    padding: 0;
  }
  .btn-icon-sm svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .segmented-control {
    display: inline-flex;
    background: var(--bg-sidebar);
    border-radius: 8px;
    padding: 2px;
  }
  .segmented-control button {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-secondary);
    cursor: pointer;
    border-radius: 6px;
  }
  .segmented-control button:hover:not(.active) { color: var(--fg); }
  .segmented-control button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-bg-strong);
  }
  .segmented-control button.active {
    background: var(--bg-elevated);
    color: var(--fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }

  .card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.12s, transform 0.12s;
  }
  .card.is-interactive { cursor: pointer; }
  .card.is-interactive:hover { border-color: var(--border-strong); }
  .card.selected,
  .card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-strong);
  }
  .card-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
  }
  .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
    font-size: 11.5px;
  }
  .card-summary {
    font-size: 12px;
    color: var(--fg-secondary);
    margin-top: 6px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .routine-banner {
    width: min(720px, calc(100vw - 32px));
    margin: 12px auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--fg-muted);
    font-size: 12.5px;
  }
  .routine-banner svg,
  .routine-banner img {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }
  .routine-banner a {
    color: var(--accent-fg-strong);
    text-decoration: none;
    font-weight: 600;
  }
  .routine-banner a:hover { text-decoration: underline; }

  .pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .pill.status-active { background: var(--success-bg-soft); color: var(--success-fg-strong); }
  .pill.status-watching { background: var(--accent-bg-soft); color: var(--accent-fg-strong); }
  .pill.status-parked,
  .pill.status-paused { background: var(--bg-hover); color: var(--fg-muted); }
  .pill.status-waiting,
  .pill.status-stale { background: var(--askq-bg-pill); color: var(--askq-fg-pill); }
  .pill.status-archived { background: var(--bg-tool); color: var(--fg-muted); }
  .tag {
    background: var(--bg-tool);
    color: var(--fg-secondary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
  }
  .badge-stale {
    background: var(--askq-bg-pill);
    color: var(--askq-fg-pill);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
  }
  .due {
    font-variant-numeric: tabular-nums;
    color: var(--fg-secondary);
  }
  .due.overdue {
    color: var(--danger);
    font-weight: 600;
  }
  .fu-count {
    color: var(--fg-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }
  .fu-count strong { color: var(--fg); }
  .related-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .related-chip {
    background: var(--accent-bg-soft);
    color: var(--accent-fg-strong);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11.5px;
    cursor: pointer;
  }
  .related-chip:hover { background: var(--accent-bg-strong); }
  .is-muted { opacity: 0.5; }
  .empty-state,
  .placeholder {
    padding: 40px;
    text-align: center;
    color: var(--fg-muted);
    font-size: 13px;
  }
  .placeholder {
    padding: 0;
    text-align: left;
    font-style: italic;
  }
  .workspace-placeholder {
    padding: 64px 32px;
    text-align: center;
    font-style: normal;
    max-width: 480px;
    margin: 0 auto;
  }
  .workspace-placeholder-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
    margin: 0 0 6px;
  }
  .workspace-placeholder-hint {
    font-size: 13px;
    color: var(--fg-muted);
    margin: 0;
  }
  .sess-empty kbd,
  .sb-empty kbd,
  .workspace-placeholder kbd {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.85em;
    padding: 1px 5px;
    border: 1px solid var(--border, rgba(0,0,0,0.15));
    border-radius: 4px;
    background: var(--bg-elevated, rgba(0,0,0,0.04));
    color: var(--fg);
  }

  .markdown-content {
    font-size: var(--workspace-file-font-size);
    line-height: var(--workspace-file-line-height);
    color: var(--fg);
  }
  .markdown-content p,
  .markdown-content ul,
  .markdown-content ol,
  .markdown-content blockquote,
  .markdown-content pre,
  .markdown-content table {
    margin-top: var(--workspace-file-block-spacing);
    margin-bottom: var(--workspace-file-block-spacing);
  }
  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3 {
    margin-top: 1.4em;
    font-family: var(--font-serif);
    font-feature-settings: "ss01";
    font-variation-settings: "SOFT" 30, "opsz" 32;
    letter-spacing: -0.005em;
    font-weight: 600;
  }
  .markdown-content h1 {
    font-variation-settings: "SOFT" 30, "opsz" 48;
    font-size: 1.7em;
    line-height: 1.15;
    margin-top: 0.4em;
  }
  .markdown-content h2 {
    font-size: 1.3em;
    line-height: 1.25;
  }
  .markdown-content h3 {
    font-size: 1.08em;
    line-height: 1.3;
    margin-top: 1.6em;
  }
  .markdown-content pre {
    background: var(--bg-pre);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
  }
  .markdown-content code {
    background: var(--bg-code);
    padding: 1px 5px;
    border-radius: 4px;
  }
  .markdown-content pre code {
    background: transparent;
    padding: 0;
  }
  .markdown-content a { color: var(--accent); }
  .markdown-content blockquote {
    border-left: 2px solid var(--border-strong);
    padding: 6px 14px;
    color: var(--fg-secondary);
    margin: 12px 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-variation-settings: "SOFT" 50, "opsz" 24;
  }
  .markdown-content blockquote p { margin: 0; }
  .markdown-content table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    width: 100%;
  }
  .markdown-content th,
  .markdown-content td {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--workspace-file-cell-pad-y) var(--workspace-file-cell-pad-x);
    text-align: left;
    vertical-align: top;
  }
  .markdown-content thead th {
    border-bottom: 1px solid var(--border-strong);
    font-weight: 600;
    color: var(--fg-secondary);
    font-size: 0.92em;
    letter-spacing: 0.01em;
  }
  .markdown-content tbody tr:hover { background: var(--bg-row-hover); }
  .markdown-content tbody tr:last-child td { border-bottom: none; }

  /* Sidebar list buttons (used by tracker for view switcher). */
  .sb-list.sb-static { flex: 0 0 auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; }
  .sb-list-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    background: transparent; border: 0; border-radius: 6px;
    font: inherit; font-size: 13px; color: var(--fg-secondary);
    cursor: pointer; text-align: left;
  }
  .sb-list-btn:hover { background: var(--bg-row-hover); color: var(--fg); }
  .sb-list-btn.current { background: var(--accent-bg-soft); color: var(--accent); font-weight: 500; }
  .sb-list-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

  /* Routines layout offsets when sidebar is open / closed. */
  body[data-page="routines"].sidebar-open .app-main { min-width: 0; padding-left: 280px; transition: padding-left 0.22s ease; }
  body[data-page="routines"].sidebar-closed .app-main { min-width: 0; padding-left: 56px; transition: padding-left 0.22s ease; }
  @media (max-width: 1023px) {
    body[data-page="routines"].sidebar-open .app-main,
    body[data-page="routines"].sidebar-closed .app-main {
      padding-left: 56px;
    }
  }

  /* Tracker layout offsets when sidebar is open / closed. */
  body[data-page="tracker"].sidebar-open .app-main { padding-left: 280px; }
  body[data-page="tracker"].sidebar-closed .app-main { padding-left: 56px; }
  body[data-page="tracker"].sidebar-open #hdr { padding-left: 296px; }
  body[data-page="tracker"].sidebar-closed #hdr { padding-left: 56px; }
  @media (max-width: 1023px) {
    body[data-page="tracker"].sidebar-open .app-main,
    body[data-page="tracker"].sidebar-closed .app-main,
    body[data-page="tracker"].sidebar-open #hdr,
    body[data-page="tracker"].sidebar-closed #hdr {
      padding-left: 56px;
    }
  }

  body[data-page="workspace"] .workspace-main { padding-top: 57px; }
  body[data-page="workspace"].sidebar-open .workspace-main { padding-left: 280px; }
  body[data-page="workspace"].sidebar-closed .workspace-main { padding-left: 56px; }
  /* Header on workspace also shifts so its title doesn't sit under the sidebar. */
  body[data-page="workspace"].sidebar-open #hdr { padding-left: 296px; }
  body[data-page="workspace"].sidebar-closed #hdr { padding-left: 56px; }
  /* On mobile, the sidebar is overlaid — content stays full-width. */
  @media (max-width: 1023px) {
    body[data-page="workspace"].sidebar-open .workspace-main,
    body[data-page="workspace"].sidebar-closed .workspace-main,
    body[data-page="workspace"].sidebar-open #hdr,
    body[data-page="workspace"].sidebar-closed #hdr {
      padding-left: 56px;
    }
  }
  body[data-page="workspace"] #sidebar-files .row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
    user-select: none;
  }
  body[data-page="workspace"] #sidebar-files .row:hover { background: var(--bg-row-hover); }
  body[data-page="workspace"] #sidebar-files .row.active {
    background: var(--accent-bg-strong);
    color: var(--accent-fg-strong);
  }
  body[data-page="workspace"] #sidebar-files .row .icon {
    width: 16px;
    flex: 0 0 16px;
    color: var(--fg-muted);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="workspace"] #sidebar-files .row .icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }
  body[data-page="workspace"] #sidebar-files .row .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-page="workspace"] #sidebar-files .row .size {
    font-size: 11px;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }
  body[data-page="workspace"] #sidebar-files .row.dir .icon { color: #d4a017; }
  body[data-page="workspace"] #sidebar-files .row.up { color: var(--fg-secondary); }
  body[data-page="workspace"] #sidebar-files .empty {
    padding: 16px;
    color: var(--fg-muted);
    font-size: 13px;
  }
  .quick-switcher {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 9vh 16px 16px;
    box-sizing: border-box;
  }
  .quick-switcher[hidden] { display: none; }
  .quick-switcher-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
  }
  .quick-switcher-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: min(560px, 76vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-popover);
  }
  .quick-switcher-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .quick-switcher-search-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--fg-muted);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }
  .quick-switcher-search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .quick-switcher-file-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  #quick-switcher-input,
  #palette-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 15px;
  }
  #quick-switcher-input::placeholder,
  #palette-input::placeholder { color: var(--fg-muted); }
  .quick-switcher-results {
    overflow-y: auto;
    padding: 6px;
  }
  .quick-switcher-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .quick-switcher-item.active,
  .quick-switcher-item:hover {
    background: var(--accent-bg-soft);
  }
  .quick-switcher-file-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--fg-muted);
    flex: 0 0 auto;
    margin-top: 1px;
  }
  .quick-switcher-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .quick-switcher-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .quick-switcher-path {
    font-size: 12px;
    line-height: 1.35;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .quick-switcher-empty {
    padding: 18px 12px;
    font-size: 13px;
    color: var(--fg-muted);
  }
  .quick-switcher-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border-muted, var(--border, rgba(0,0,0,0.08)));
    font-size: 11px;
    color: var(--fg-muted);
    display: flex;
    justify-content: flex-end;
  }
  .quick-switcher-footer:empty { display: none; }
  .palette-section {
    padding: 10px 14px 4px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    user-select: none;
  }
  .palette-section:not(:first-child) { padding-top: 14px; }
  .palette-section-empty {
    padding: 4px 14px 8px;
    font-size: 12px;
    color: var(--fg-muted);
    font-style: italic;
  }
  .palette-hint { font-size: 11px; color: var(--fg-muted); }
  .viewer {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    min-width: 0;
  }
  .viewer-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    font-size: 12px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .viewer-meta .viewer-meta-path {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .viewer-meta-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
    font-family: var(--font-sans);
  }
  .viewer-meta-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
    overflow: hidden;
    white-space: nowrap;
  }
  .workspace-copy-btn {
    white-space: nowrap;
  }
  .workspace-copy-btn svg {
    width: 14px;
    height: 14px;
    display: block;
  }
  .workspace-copy-btn.is-copied {
    color: var(--success-fg);
    border-color: var(--success-border);
  }
  .viewer-meta .truncated {
    color: var(--warning-fg);
    flex: 0 0 auto;
  }
  .viewer-copy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--border-stronger);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--fg);
    font: inherit;
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
  }
  .viewer-copy-btn:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    border-color: var(--accent);
  }
  .viewer-copy-btn.copied {
    color: var(--success-fg, var(--accent));
    border-color: var(--success-fg, var(--accent));
  }
  .viewer-copy-btn svg {
    width: 13px;
    height: 13px;
    display: block;
  }
  .plain-text {
    font-family: var(--font-mono);
    font-size: var(--workspace-file-font-size);
    line-height: var(--workspace-file-line-height);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    color: var(--fg);
  }
  .html-frame {
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 540px;
    border: 1px solid var(--border-table);
    border-radius: 8px;
    background: var(--bg-elevated);
    color-scheme: light;
  }
  :root[data-color-mode="dark"] .html-frame {
    color-scheme: dark;
    filter: invert(0.92) hue-rotate(180deg);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) .html-frame {
      color-scheme: dark;
      filter: invert(0.92) hue-rotate(180deg);
    }
  }
  .csv-viewer {
    max-width: 100%;
    min-width: 0;
  }
  .csv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .csv-summary {
    color: var(--fg-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .csv-table-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border-table);
    border-radius: 8px;
    background: var(--bg-elevated);
  }
  .csv-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--workspace-file-font-size);
    line-height: var(--workspace-file-line-height);
  }
  .csv-table th,
  .csv-table td {
    max-width: 360px;
    padding: var(--workspace-file-cell-pad-y) var(--workspace-file-cell-pad-x);
    border-right: 1px solid var(--border-table);
    border-bottom: 1px solid var(--border-table);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .csv-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-table-header);
    color: var(--fg);
    font-weight: 600;
  }
  .csv-table tr:nth-child(even) td { background: var(--bg-table-zebra); }
  .csv-table th:last-child,
  .csv-table td:last-child { border-right: 0; }
  .csv-table tbody tr:last-child td { border-bottom: 0; }
  .csv-table a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .markdown-shell {
    display: grid;
    grid-template-columns: minmax(0, 800px) minmax(220px, 280px);
    gap: 24px;
    align-items: start;
    max-width: 1120px;
    position: relative;
  }
  .markdown-shell .markdown-content {
    max-width: none;
    min-width: 0;
  }
  .comment-highlight {
    background: color-mix(in srgb, var(--askq-bg-pill) 82%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--askq-bg-pill) 70%, transparent);
    border-radius: 3px;
  }
  .comment-gutter {
    position: relative;
    min-height: 160px;
  }
  .comment-card {
    position: absolute;
    left: 0;
    right: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-stronger);
    border-radius: 8px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-card);
    font-size: 12.5px;
    line-height: 1.4;
  }
  .comment-card.stale { opacity: 0.72; }
  .comment-card::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 14px;
    width: 14px;
    border-top: 1px solid var(--border-stronger);
  }
  .comment-card.stale::before { display: none; }
  .comment-quote {
    color: var(--fg-muted);
    font-size: 11.5px;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .comment-card.stale .comment-quote { text-decoration: line-through; }
  .comment-text {
    color: var(--fg);
    white-space: pre-wrap;
  }
  .comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  .comment-time {
    color: var(--fg-muted);
    font-size: 11px;
  }
  .comment-delete {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }
  .comment-delete:hover {
    background: var(--danger-bg-soft);
    color: var(--danger);
  }
  .comment-delete i {
    font-style: normal;
    line-height: 1;
  }
  .comment-delete svg {
    width: 12px;
    height: 12px;
    display: block;
  }
  .comment-composer textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    font: inherit;
    font-size: 12.5px;
    padding: 7px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg);
    color: var(--fg);
  }
  .comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
  }
  .comment-actions .btn { padding: 4px 9px; }
  @media (max-width: 900px) {
    .markdown-shell { grid-template-columns: minmax(0, 1fr); }
    .comment-gutter { min-height: 0; }
    .comment-card {
      position: static;
      margin: 10px 0;
    }
    .comment-card::before { display: none; }
  }
  .comment-pill {
    position: fixed;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-stronger);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--fg);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    box-shadow: var(--shadow-card);
    cursor: pointer;
  }
  .comment-pill[hidden] { display: none; }
  .comment-pill:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    border-color: var(--accent);
  }
  .comment-pill svg {
    width: 13px;
    height: 13px;
    display: block;
  }


  /* Status dot conventions in the sidebar / sessions panel:
       .running           → live activity, pulsing ring
       .awaiting          → needs your input, gentle opacity breathing
       .waiting            → snoozing, muted still
       .unread             → finished while you were away, still accent dot
     Idle sessions don't get a dot at all (added back as noise on every row). */
  .sess-state, .sb-state {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 6px;
    background: var(--accent);
    position: relative;
  }
  .sess-state.running, .sb-state.running,
  .sess-state.awaiting, .sb-state.awaiting {
    animation: session-state-breath 1.8s ease-in-out infinite;
  }
  .sess-state.running::after, .sb-state.running::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
    pointer-events: none;
    animation: session-state-pulse-ring 1.8s ease-out infinite;
  }
  .sess-state.awaiting, .sb-state.awaiting {
    background: var(--askq-fg-header);
  }
  .sess-state.waiting, .sb-state.waiting {
    background: var(--fg-muted);
    opacity: 0.6;
  }
  .sess-state.unread, .sb-state.unread {
    background: var(--accent);
  }
  @keyframes session-state-breath {
    0%, 100% { opacity: 0.68; }
    50% { opacity: 1; }
  }
  @keyframes session-state-pulse-ring {
    0% { opacity: 0.58; transform: scale(0.58); }
    70%, 100% { opacity: 0; transform: scale(1.55); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sess-state.running, .sb-state.running,
    .sess-state.awaiting, .sb-state.awaiting {
      animation: none;
      opacity: 1;
    }
    .sess-state.running::after, .sb-state.running::after {
      animation: none;
      opacity: 0.36;
      transform: none;
    }
  }

  .meta-draft, .meta-pin, .meta-queued, .meta-done {
    display: inline-flex; align-items: center;
    margin-left: 6px;
    color: var(--fg-muted);
    vertical-align: middle;
  }
  .meta-draft svg, .meta-pin svg, .meta-queued svg, .meta-done svg { width: 11px; height: 11px; display: block; }
  .meta-pin { color: var(--accent, var(--fg-secondary)); }
  .meta-done { color: var(--accent, var(--fg-secondary)); }
  .meta-queued { color: var(--accent, var(--fg-secondary)); gap: 2px; }
  .meta-queued svg { animation: recap-spin 1s linear infinite; }
  .meta-queued-count {
    font-size: 10px; line-height: 1; font-weight: 600;
    margin-left: 1px;
  }

  /* Right-click context menu on session rows. Sits above #settings-panel
     (z-index 8). Position is set inline at the click coords. */
  .ctx-menu {
    position: fixed; z-index: 9; min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-popover);
    padding: 4px 0;
    font-size: 13px;
    color: var(--fg);
  }
  .ctx-menu-item {
    display: flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px;
    cursor: pointer; user-select: none;
    color: inherit;
  }
  .ctx-menu-item:hover { background: var(--bg-row-hover); }
  .ctx-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
  .ctx-menu-label { flex: 1; }
  .ctx-menu-item.danger { color: var(--danger); }
  .ctx-menu-item.danger:hover { background: var(--danger-bg-soft); }
  .ctx-menu-item.confirming {
    background: var(--danger-bg-soft);
    color: var(--danger-fg);
    font-weight: 500;
  }
  .ctx-menu-item.copied { color: var(--accent, inherit); }
  .ctx-menu-divider {
    height: 1px; margin: 4px 0;
    background: var(--border-subtle, var(--border-strong));
  }
  .ctx-menu.renaming { padding: 8px; min-width: 220px; }
  .ctx-rename-input {
    width: 100%; box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--fg);
    font-family: inherit;
    font-size: 13px;
    outline: none;
  }
  .ctx-rename-input:focus { border-color: var(--accent, var(--border-stronger)); }
  .ctx-rename-hint {
    font-size: 11px; color: var(--fg-muted);
    margin-top: 6px;
  }

  /* Wallpaper layers — only rendered when [data-wallpaper="1"] is set on
     <html> by the boot script or applyTheme(). The scrim sits between the
     wallpaper and content so existing surfaces stay legible. */
  #wallpaper, #wallpaper-scrim {
    position: fixed; inset: 0; pointer-events: none;
    display: none;
  }
  #wallpaper {
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  #wallpaper-scrim {
    z-index: -1;
    background: var(--bg);
    opacity: 0.82;
  }
  html[data-wallpaper="1"] #wallpaper,
  html[data-wallpaper="1"] #wallpaper-scrim { display: block; }
  html[data-wallpaper="1"] body { background: transparent; }
  html[data-wallpaper="1"] #sidebar { background: color-mix(in srgb, var(--bg-sidebar) 88%, transparent); }
  html[data-wallpaper="1"] header { background: color-mix(in srgb, var(--bg) 88%, transparent); }

  .sb-icon-btn {
    font: inherit; font-size: 22px; line-height: 1;
    background: transparent; color: var(--fg-secondary);
    border: 0; border-radius: 8px; cursor: pointer;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    flex: 0 0 auto;
  }
  .sb-icon-btn:hover { background: var(--accent-bg-soft); color: var(--accent); }
  .sb-icon-btn svg { width: 18px; height: 18px; display: block; }
  .icon-btn svg { width: 18px; height: 18px; display: block; }
  .chip button svg { width: 12px; height: 12px; display: block; }

  /* Settings as a full-pane "page" — when open, it replaces the chat
     content area to the right of the sidebar. No modal/popover styling. */
  #settings-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    display: none; z-index: 4;
    overflow: hidden;
  }
  #settings-panel.show { display: flex; }
  /* On desktop, settings page sits to the right of the visible sidebar. */
  @media (min-width: 1024px) {
    body.sidebar-open #settings-panel { left: 280px; }
    body.sidebar-closed #settings-panel { left: 56px; }
  }
  body.viewing-settings #log,
  body.viewing-settings form,
  body.viewing-settings #askq-dock,
  body.viewing-settings #sources-pill,
  body.viewing-settings #sources-popover,
  body.viewing-settings #ctx-donut,
  body.viewing-settings header#hdr { display: none !important; }
  #settings-panel .settings-rail {
    width: 180px; flex: 0 0 auto;
    border-right: 1px solid var(--border-divider);
    background: var(--bg-sidebar);
    padding: 16px 0;
  }
  /* Mobile rail behavior lives further down in the mobile-specific block —
     the rail turns into a horizontal tab bar rather than disappearing. */
  #settings-panel .settings-rail-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
  }
  #settings-panel .settings-rail-item:hover { background: var(--bg-row-hover); }
  #settings-panel .settings-rail-item.current {
    background: var(--accent-bg-strong);
    border-left-color: var(--accent);
    color: var(--accent-fg-strong);
  }
  #settings-panel .settings-pane {
    flex: 1; min-width: 0;
    padding: 28px 36px 60px;
    overflow-y: auto;
    max-width: 760px;
  }
  #settings-panel .settings-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
  }
  #settings-panel .settings-title { font-size: 20px; font-weight: 600; }
  #settings-panel .settings-close {
    font: inherit; font-size: 13px; line-height: 1;
    background: transparent; border: 1px solid var(--border-divider); cursor: pointer;
    color: var(--fg-secondary); padding: 6px 12px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  #settings-panel .settings-close:hover { background: var(--bg-row-hover); color: var(--fg); border-color: var(--border-strong); }
  #settings-panel .settings-close svg { width: 14px; height: 14px; display: block; }
  #settings-panel .settings-section { margin-bottom: 28px; }
  #settings-panel .settings-section:last-child { margin-bottom: 0; }
  #settings-panel .settings-section-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--fg-muted); margin-bottom: 8px;
  }
  #settings-panel .settings-presets {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  #settings-panel .settings-preset {
    width: 64px; height: 44px;
    border-radius: 8px;
    border: 2px solid var(--border);
    cursor: pointer;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0;
  }
  #settings-panel .settings-preset:hover { border-color: var(--border-strong); }
  #settings-panel .settings-preset.current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-strong);
  }
  #settings-panel .settings-preset.current::after {
    content: "✓";
    position: absolute; top: 2px; right: 4px;
    color: white; font-size: 11px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  #settings-panel .settings-preset-none {
    background: var(--bg-code);
    background-image:
      linear-gradient(to top right,
        transparent calc(50% - 1px),
        var(--border-strong) calc(50% - 1px),
        var(--border-strong) calc(50% + 1px),
        transparent calc(50% + 1px));
  }
  #settings-panel .settings-preset-none.current::after {
    color: var(--fg);
    text-shadow: none;
  }
  #settings-panel .settings-current-bg {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-code);
  }
  #settings-panel .settings-current-bg-preview {
    width: 44px; height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background-size: cover; background-position: center;
    flex: 0 0 auto;
  }
  #settings-panel .settings-current-bg-text {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--fg-secondary);
  }
  #settings-panel .settings-row {
    display: flex; gap: 8px; align-items: center;
  }
  #settings-panel .settings-row-stacked { margin-top: 10px; }
  #settings-panel .settings-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-code);
  }
  #settings-panel .settings-segment-btn {
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--fg-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 8px;
    text-align: center;
  }
  #settings-panel .settings-segment-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
  }
  #settings-panel .settings-segment-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #settings-panel .settings-segment-btn:hover {
    background: var(--bg-hover);
    color: var(--fg);
  }
  #settings-panel .settings-segment-btn.current {
    background: var(--bg-elevated);
    color: var(--fg);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  }
  #settings-panel .settings-segment-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  #settings-panel .settings-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    min-height: 36px;
    cursor: pointer;
  }
  #settings-panel .settings-toggle-stack {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  #settings-panel .settings-toggle-text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--fg);
  }
  #settings-panel .settings-toggle-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--fg-muted);
  }
  #settings-panel .settings-requires-key {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
    color: var(--fg-muted);
    cursor: help;
  }
  #settings-panel .settings-requires-key svg {
    width: 12px;
    height: 12px;
    display: block;
  }
  #settings-panel .settings-toggle-row:has(input:disabled) {
    cursor: default;
  }
  #settings-panel .settings-switch input:disabled + .settings-switch-track {
    opacity: 0.45;
    cursor: not-allowed;
  }
  #settings-panel .settings-switch {
    position: relative;
    display: inline-flex;
    width: 40px; height: 24px;
    flex: 0 0 auto;
  }
  #settings-panel .settings-switch input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
  }
  #settings-panel .settings-switch-track {
    position: relative;
    width: 40px; height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border-stronger);
    background: var(--bg-code);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  #settings-panel .settings-switch-track::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg-elevated);
    box-shadow: 0 1px 2px rgba(0,0,0,0.24);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  #settings-panel .settings-switch input:checked + .settings-switch-track {
    background: var(--accent);
    border-color: var(--accent);
  }
  #settings-panel .settings-switch input:checked + .settings-switch-track::after {
    transform: translateX(16px);
    background: #fff;
  }
  #settings-panel .settings-switch input:focus-visible + .settings-switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  #settings-panel .settings-input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border-stronger);
    border-radius: 6px;
    background: var(--bg-elevated); color: var(--fg);
  }
  #settings-panel .settings-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-color: transparent;
  }
  #settings-panel .settings-btn {
    font: inherit; font-size: 13px;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-stronger);
    background: var(--bg-elevated); color: var(--fg);
    flex: 0 0 auto;
  }
  #settings-panel .settings-btn:hover:not(:disabled) { background: var(--bg-hover); }
  #settings-panel .settings-btn-primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-fg);
    border-color: transparent;
  }
  #settings-panel .settings-btn-primary:hover:not(:disabled) {
    background: var(--button-primary-bg-hover);
    color: var(--button-primary-fg);
  }
  #settings-panel .settings-btn-danger { color: var(--danger); }
  #settings-panel .settings-msg {
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-muted);
  }
  #settings-panel .settings-msg.error { background: none; color: var(--danger); }
  #settings-panel .settings-msg.ok { color: var(--success-fg); }
  #settings-panel .settings-update-files {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-stronger);
    font-size: 12px;
    color: var(--fg-muted);
  }
  #settings-panel .settings-update-files li { margin: 0; padding: 2px 0; }
  #settings-panel .settings-update-files code {
    font-size: 12px;
    background: transparent;
    padding: 0;
  }
  #settings-panel .settings-update-summary {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-stronger);
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #settings-panel .settings-update-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
  }
  #settings-panel .settings-update-summary-text { color: var(--fg); }
  #settings-panel .settings-update-summary-loading,
  #settings-panel .settings-update-summary-hint {
    color: var(--fg-muted);
    font-size: 12px;
  }
  #settings-panel .settings-update-summary-commits-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    margin-top: 4px;
  }
  #settings-panel .settings-update-summary-commits {
    list-style: disc;
    margin: 0;
    padding-left: 18px;
    color: var(--fg);
    font-size: 12px;
    line-height: 1.5;
  }
  #settings-panel .settings-update-summary-commits li { margin: 0; padding: 1px 0; }

  @media (max-width: 1023px) {
    #settings-panel { flex-direction: column; }
    #settings-panel .settings-rail {
      width: 100%; border-right: 0;
      border-bottom: 1px solid var(--border-divider);
      padding: 6px 0;
      display: flex;
    }
    #settings-panel .settings-rail-item { border-left: 0; border-bottom: 3px solid transparent; }
    #settings-panel .settings-rail-item.current { border-left: 0; border-bottom-color: var(--accent); }
  }

  /* Session recap popover (hover summaries via Haiku). Positioned in
     fixed coordinates next to the hovered session row in the sidebar. */
  .recap-popover {
    position: fixed;
    z-index: 9000;
    max-width: 380px;
    padding: 9px 12px;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }
  .recap-popover.loading {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .recap-popover .recap-body {
    font-style: italic;
  }
  .recap-popover .recap-body.muted {
    color: var(--fg-muted);
  }
  .recap-popover .recap-error {
    color: var(--danger);
    font-style: italic;
  }
  .recap-popover .recap-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--border-divider);
    border-top-color: var(--fg-muted);
    animation: recap-spin 0.7s linear infinite;
    vertical-align: middle;
  }
  .recap-popover .recap-spinner.inline { margin-left: 8px; }
  @keyframes recap-spin {
    to { transform: rotate(360deg); }
  }

  /* New-user welcome tour (Driver.js, themed for PM OS). */
  .pmos-welcome-popover.driver-popover {
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    max-width: 380px;
    padding: 18px 18px 14px;
    font-family: inherit;
  }
  .pmos-welcome-popover .driver-popover-title {
    color: var(--fg);
    font-size: 16px;
    font-weight: 600;
    margin: 0 24px 6px 0;
  }
  .pmos-welcome-popover .driver-popover-description {
    color: var(--fg-secondary);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .pmos-welcome-popover .driver-popover-description a {
    color: var(--accent);
    text-decoration: underline;
  }
  .pmos-welcome-popover .driver-popover-close-btn {
    color: var(--fg-muted);
    top: 8px;
    right: 10px;
    font-size: 18px;
  }
  .pmos-welcome-popover .driver-popover-close-btn:hover {
    color: var(--fg);
  }
  .pmos-welcome-popover .driver-popover-arrow {
    border-color: var(--bg-elevated);
  }
  .pmos-welcome-popover .driver-popover-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .pmos-welcome-popover .driver-popover-progress-text {
    color: var(--fg-muted);
    font-size: 12px;
    margin-right: auto;
  }
  .pmos-welcome-popover .driver-popover-prev-btn,
  .pmos-welcome-popover .driver-popover-next-btn {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    text-shadow: none;
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .pmos-welcome-popover .driver-popover-prev-btn:hover,
  .pmos-welcome-popover .driver-popover-prev-btn:focus {
    background: var(--bg-row-hover);
    color: var(--fg);
  }
  .pmos-welcome-popover .driver-popover-next-btn {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .pmos-welcome-popover .driver-popover-next-btn:hover,
  .pmos-welcome-popover .driver-popover-next-btn:focus {
    background: var(--accent);
    color: #fff;
    filter: brightness(0.95);
  }
  .pmos-welcome-popover .driver-popover-prev-btn.driver-popover-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Mobile composer + nudge polish. Phone screens can't spare the room
     that desktop padding/labels assume — this block tightens the bottom
     row and gives the Continue affordance a real tap target. */
  @media (max-width: 1023px) {
    .icon-btn { width: 28px; height: 28px; }
    button.send {
      padding: 0 14px; height: 32px;
      min-width: 56px;
    }
    button.send.icon-only { width: 32px; min-width: 32px; padding: 0; }
    textarea, #i {
      min-height: 38px;
      line-height: 1.4;
      overflow-wrap: break-word;
      word-break: normal;
    }
    /* iOS Safari zooms in when a focused input has font-size < 16px.
       Scope the bump to actual touch devices so narrow desktop windows
       (Coder, side-by-side) keep the 14px body size. */
    @media (pointer: coarse) {
      textarea, #i { font-size: 16px; }
      #i[data-empty="true"]::before { font-size: 16px; }
    }
    body[data-page="chat"] form { padding: 6px 6px calc(20px + env(safe-area-inset-bottom)); }
    body[data-page="chat"] form > .row { column-gap: 4px; row-gap: 2px; }
  }

  /* ─── Desktop-native chrome (Electron on macOS only). ───
     Gated by [data-platform="mac-electron"] which preload.js sets on
     <html>. Adds enough horizontal padding in the sidebar header so the
     logo clears the macOS traffic-light controls drawn by hiddenInset,
     and makes the title-bar strip draggable so the window moves like a
     native app. NO transparency / vibrancy — the existing layout assumes
     opaque surfaces and breaks visually when the desktop bleeds through. */

  /* Push sb-head content past the traffic lights. The default 52px
     ends inside the ~66px-wide control cluster (x=14 → x=66), so the
     logo overlaps the green light. 84px clears them with a small gap. */
  html[data-platform="mac-electron"] .sb-head {
    padding-left: 84px;
  }

  /* Sidebar toggle button: at default top:10 left:10 it sits ON the
     traffic lights. Two cases:
       — Desktop (sidebar persistent + ⌘\ shortcut): hide it entirely;
         the native controls and ⌘\ cover the affordance.
       — Narrow (sidebar overlays + no persistent rail): keep it visible
         but shift right past the controls. */
  html[data-platform="mac-electron"] .sidebar-toggle {
    top: 14px;
    left: 84px;
  }
  @media (min-width: 1024px) {
    html[data-platform="mac-electron"] .sidebar-toggle { display: none; }
  }

  /* Drag region in the title-bar strip — the natural place a user
     grabs to move the window. Buttons and links inside opt back out
     via -webkit-app-region: no-drag so they stay clickable. */
  html[data-platform="mac-electron"] header,
  html[data-platform="mac-electron"] .sb-head {
    -webkit-app-region: drag;
  }
  html[data-platform="mac-electron"] header button,
  html[data-platform="mac-electron"] header a,
  html[data-platform="mac-electron"] header form,
  html[data-platform="mac-electron"] header input,
  html[data-platform="mac-electron"] .sb-head .pmos-logo-link,
  html[data-platform="mac-electron"] .sb-head .sb-new,
  html[data-platform="mac-electron"] .sidebar-toggle {
    -webkit-app-region: no-drag;
  }

  /* Full-width drag strip across the very top of the window. Without it the
     only grabbable region on the chat page (at >=1024px, where #hdr is
     hidden) is the sidebar header — frustrating for a Mac user expecting to
     move the window from anywhere along the top. Sits under headers
     (app-header z=5) and the sidebar toggle button (z=10) so existing
     interactive chrome stays clickable; the strip just claims the empty
     space at the top of the main pane. */
  .title-bar-drag { display: none; }
  html[data-platform="mac-electron"] .title-bar-drag {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 3;
    -webkit-app-region: drag;
  }
  /* Profile tab — workspace/config.yaml view + live connector report. */
  #settings-panel .profile-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    margin-bottom: 12px;
  }
  #settings-panel .profile-card:last-child { margin-bottom: 0; }
  #settings-panel .profile-card-head {
    margin-bottom: 10px;
  }
  #settings-panel .profile-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
  }
  #settings-panel .profile-subtitle {
    font-size: 12px;
    color: var(--fg-muted);
    margin-top: 2px;
  }
  #settings-panel .profile-card-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--fg-muted);
    margin-bottom: 8px;
  }
  #settings-panel .profile-grid {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 4px 16px;
    row-gap: 6px;
  }
  #settings-panel .profile-field {
    display: contents;
  }
  #settings-panel .profile-field-label {
    font-size: 12px;
    color: var(--fg-muted);
  }
  #settings-panel .profile-field-value {
    font-size: 13px;
    color: var(--fg);
    overflow-wrap: anywhere;
  }
  #settings-panel .profile-projects {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #settings-panel .profile-projects li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
  }
  #settings-panel .profile-project-name {
    font-weight: 500;
    color: var(--fg);
  }
  #settings-panel .profile-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  #settings-panel .profile-chip {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-code);
    color: var(--fg-secondary);
    border: 1px solid var(--border);
  }

  #settings-panel .settings-connectors {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #settings-panel .connector-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
  }
  #settings-panel .connector-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 999px;
    background: var(--bg-code);
    color: var(--fg-muted);
  }
  #settings-panel .connector-status svg { width: 14px; height: 14px; display: block; }
  #settings-panel .connector-ok .connector-status { background: var(--accent-bg, rgba(46, 160, 67, 0.12)); color: var(--accent, #2ea043); }
  #settings-panel .connector-warn .connector-status { background: rgba(214, 153, 25, 0.15); color: #b58210; }
  #settings-panel .connector-error .connector-status { background: rgba(229, 83, 75, 0.12); color: #cf373d; }
  #settings-panel .connector-body {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
  }
  #settings-panel .connector-name {
    font-size: 13px; font-weight: 600; color: var(--fg);
  }
  #settings-panel .connector-desc {
    font-size: 12px; color: var(--fg-muted);
  }
  #settings-panel .connector-detail {
    font-size: 11px; color: var(--fg-muted); margin-top: 2px;
    overflow-wrap: anywhere;
  }
  #settings-panel .connector-pill {
    font-size: 11px;
    color: var(--fg-secondary);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-code);
    border: 1px solid var(--border);
    white-space: nowrap;
  }
  #settings-panel .connector-ok .connector-pill { color: var(--accent, #2ea043); border-color: rgba(46, 160, 67, 0.4); }
  #settings-panel .connector-warn .connector-pill { color: #b58210; border-color: rgba(214, 153, 25, 0.4); }
  #settings-panel .connector-error .connector-pill { color: #cf373d; border-color: rgba(229, 83, 75, 0.4); }