:root {
    --bg: #1a1b26;
    --bg-light: #24283b;
    --bg-lighter: #2f3349;
    --bg-card: #24283b;
    --bg-panel: #1f2335;
    --bg-elevated: #2b3045;
    --surface-1: var(--bg-panel);
    --surface-2: var(--bg-elevated);
    --stream-tooltip-bg: var(--bg-elevated);
    --stream-tooltip-shadow: 0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.02) inset;
    --stream-tooltip-divider: rgba(125,134,170,0.18);
    --conversation-bg: var(--surface-1);
    --conversation-card-bg: rgba(36, 40, 59, 0.36);
    --conversation-card-border: rgba(65, 72, 104, 0.75);
    --conversation-card-shadow: none;
    --conversation-prompt-bg: rgba(122, 162, 247, 0.07);
    --conversation-prompt-border: var(--accent);
    --conversation-setup-bg: rgba(187, 154, 247, 0.035);
    --conversation-response-border: rgba(65, 72, 104, 0.45);
    --conversation-chip-bg: rgba(0, 0, 0, 0.10);
    --conversation-chip-fg: var(--fg-dim);
    --conversation-chip-border: var(--border);
    --conversation-load-bg: var(--surface-2);
    --conversation-load-fg: var(--fg-dim);
    --conversation-load-border: var(--border);
    --bg-input: #1a1b26;
    --bg-hover: rgba(255,255,255,0.06);
    --code-bg: rgba(122,162,247,0.12);
    --fg: #c0caf5;
    --fg-dim: #565f89;
    --fg-muted: #8b94bd;
    --accent: #7aa2f7;
    --accent-hover: #89b4fa;
    --accent-fg: #0d1117;
    --accent-soft: rgba(122,162,247,0.13);
    --green: #9ece6a;
    --success-soft: rgba(158,206,106,0.14);
    --red: #f7768e;
    --danger-soft: rgba(247,118,142,0.14);
    --yellow: #e0af68;
    --warning-soft: rgba(224,175,104,0.14);
    --purple: #bb9af7;
    --remote-accent: #7c3aed;
    --remote-accent-soft: rgba(124,58,237,0.16);
    --border: #3b4261;
    --focus-ring: rgba(122,162,247,0.32);
    --shadow-color: rgba(0,0,0,0.35);
    --overlay-bg: rgba(5,8,15,0.72);
    --text: var(--fg);
    --text-dim: var(--fg-dim);
    --theme-color-scheme: dark;
    --terminal-bg: #1a1b26;
    --terminal-fg: #c0caf5;
    --terminal-cursor: #c0caf5;
    --terminal-selection-bg: #b4d5fe;
    --terminal-selection-fg: #000000;
    --tab-height: 38px;
    --sidebar-width: 260px;
    --session-tray-height: 26px;
  }
  html[data-theme="light"] {
    /* Background layers — bg is the recessed page surface, cards lift to white. */
    --bg: #f6f7f9;            /* page / app shell (slate-50ish) */
    --bg-light: #ffffff;       /* cards, elevated content */
    --bg-lighter: #eceef2;     /* deeper recessed (sidebar gutters, code well) */
    --bg-card: #ffffff;        /* primary card surface */
    --bg-panel: #fafbfc;       /* secondary panel (slightly off-white) */
    --bg-elevated: #ffffff;    /* modals, popovers, dropdowns */
    --surface-1: var(--bg-panel);
    --surface-2: var(--bg-elevated);
    --conversation-bg: #f6f7f9;
    --conversation-card-bg: #ffffff;
    --conversation-card-border: rgba(15,23,42,0.14);
    --conversation-card-shadow: 0 8px 22px rgba(15,23,42,0.045);
    --conversation-prompt-bg: #f7f9ff;
    --conversation-prompt-border: rgba(59,102,224,0.52);
    --conversation-setup-bg: #fbf8ff;
    --conversation-response-border: rgba(15,23,42,0.10);
    --conversation-chip-bg: #f1f5f9;
    --conversation-chip-fg: #475569;
    --conversation-chip-border: rgba(15,23,42,0.10);
    --conversation-load-bg: #eef2ff;
    --conversation-load-fg: #2c54c8;
    --conversation-load-border: rgba(59,102,224,0.20);
    --stream-tooltip-bg: #ffffff;
    --stream-tooltip-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 8px 20px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
    --stream-tooltip-divider: rgba(15,23,42,0.10);
    --stream-tooltip-pill-running-bg: rgba(21,128,61,0.10);
    --stream-tooltip-pill-running-fg: #166534;
    --stream-tooltip-pill-running-border: rgba(21,128,61,0.28);
    --stream-tooltip-pill-waiting-bg: rgba(146,64,14,0.10);
    --stream-tooltip-pill-waiting-fg: #92400e;
    --stream-tooltip-pill-waiting-border: rgba(146,64,14,0.28);
    --stream-tooltip-pill-idle-bg: rgba(71,85,105,0.10);
    --stream-tooltip-pill-idle-fg: #475569;
    --stream-tooltip-pill-idle-border: rgba(71,85,105,0.24);
    --stream-tooltip-pill-intent-bg: rgba(59,102,224,0.10);
    --stream-tooltip-pill-intent-fg: #2c54c8;
    --stream-tooltip-pill-intent-border: rgba(59,102,224,0.26);
    --stream-tooltip-pill-fallback-bg: rgba(146,64,14,0.10);
    --stream-tooltip-pill-fallback-fg: #92400e;
    --stream-tooltip-pill-fallback-border: rgba(146,64,14,0.26);
    --stream-tooltip-pill-progress-bg: rgba(15,118,110,0.10);
    --stream-tooltip-pill-progress-fg: #0f766e;
    --stream-tooltip-pill-progress-border: rgba(15,118,110,0.26);
    --bg-input: #ffffff;       /* inputs read as white with border */
    --bg-hover: rgba(15,23,42,0.045);  /* neutral hover, ~4.5% slate */
    --code-bg: rgba(15,23,42,0.06);
    /* Foreground tiers — slate scale, tuned for readability on white. */
    --fg: #0f172a;            /* slate-900: primary text, ~17:1 on white */
    --fg-dim: #3d4b5e;         /* slate-650: secondary text, ~9.5:1 on white (AAA) */
    --fg-muted: #52606f;       /* slate-550: tertiary text, ~6.1:1 on white (AAA-large, AA-strong) */
    /* Accent — vivid indigo-blue inspired by Linear/GitHub; high saturation reads as branded, not muddy. */
    --accent: #3b66e0;
    --accent-hover: #2c54c8;
    --accent-fg: #ffffff;
    --accent-soft: rgba(59,102,224,0.10);
    /* Semantic colors — keep contrast on white. */
    --green: #15803d;          /* emerald-700 */
    --success-soft: rgba(21,128,61,0.10);
    --red: #b91c1c;            /* red-700 */
    --danger-soft: rgba(185,28,28,0.10);
    --yellow: #92400e;         /* amber-800, readable on light */
    --warning-soft: rgba(146,64,14,0.10);
    --purple: #7c3aed;         /* violet-600 */
    /* Borders — opacity-based slate, visible on both white and the off-white app bg. */
    --border: rgba(15,23,42,0.10);
    --focus-ring: rgba(59,102,224,0.32);
    --shadow-color: rgba(15,23,42,0.08);
    --overlay-bg: rgba(15,23,42,0.40);
    --text: var(--fg);
    --text-dim: var(--fg-dim);
    --theme-color-scheme: light;
    /* Terminal — pure white surface, deep slate text, accent cursor. */
    --terminal-bg: #ffffff;
    --terminal-fg: #1e293b;
    --terminal-cursor: #3b66e0;
    --terminal-selection-bg: #dbeafe;
    --terminal-selection-fg: #0f172a;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--fg);
    /* Track the ACTUAL visible viewport, not the large viewport. `100vh` does not shrink when dynamic
       browser chrome (an extension infobar like "Claude started debugging this browser") steals ~35px,
       which pushed the bottom xterm rows (the agent composer) off-screen. --app-height is pinned from JS
       (window.innerHeight, which DOES reflect the infobar); 100dvh is the pre-JS / fallback default. */
    height: var(--app-height, 100dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top: 0 solid transparent;
  }
  body.remote-instance {
    border-top-width: 3px;
    border-top-color: var(--remote-accent);
  }
  html[data-theme="light"] body {
    background: var(--bg);
  }
  html[data-theme="light"] #topbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  }
  html[data-theme="light"] #topbar .topbar-nav {
    background: #f1f3f6;
    border-color: rgba(15,23,42,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  html[data-theme="light"] #sidebar {
    background: #f1f3f6;
    border-right: 1px solid rgba(15,23,42,0.06);
  }
  html[data-theme="light"] #tabbar {
    background: #ebeef2;
    border-bottom: 1px solid rgba(15,23,42,0.06);
  }
  html[data-theme="light"] .tab {
    background: transparent;
    color: var(--fg-dim);
  }
  html[data-theme="light"] .tab:hover {
    background: rgba(15,23,42,0.04);
    color: var(--fg);
  }
  html[data-theme="light"] .tab.active {
    background: #ffffff;
    color: var(--fg);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 -2px 0 var(--accent) inset;
  }

  /* ── Light-theme content overrides ──────────────────────────────────────────
     The conversation/review/thought-group CSS was authored for the dark theme
     and relies on (a) very low-alpha RGB tints and (b) opacity multipliers to
     fade non-primary content. Neither works on light bg — RGB tints with dark
     colors barely show, and opacity on text against white = washed-out gray.
     Override here with light-friendly tints and full opacity + explicit muted
     color for fading effects. */
  html[data-theme="light"] .thought-group,
  html[data-theme="light"] .thought-group:hover,
  html[data-theme="light"] .thought-group.expanded,
  html[data-theme="light"] .review-msg.summary,
  html[data-theme="light"] .review-msg.summary.expanded { opacity: 1; }
  html[data-theme="light"] .thought-group .thought-group-label,
  html[data-theme="light"] .thought-group .thought-group-preview,
  html[data-theme="light"] .thought-group .thought-group-time,
  html[data-theme="light"] .thought-group .thought-group-count {
    color: var(--fg-muted);
  }
  html[data-theme="light"] .thought-group.tool-activity-group .thought-group-label {
    color: var(--yellow);
  }
  html[data-theme="light"] .thought-group.codex-warning-group .thought-group-label,
  html[data-theme="light"] .codex-warning-item .msg-role {
    color: var(--yellow);
  }
  html[data-theme="light"] .thought-group .tool-result-item .msg-text {
    color: var(--fg);  /* tool output is content, not metadata — full contrast */
  }
  html[data-theme="light"] .review-info .info-label { opacity: 1; color: var(--fg-muted); }

  /* Structured-capture cards in light theme */
  html[data-theme="light"] .review-msg.tool-card,
  html[data-theme="light"] .review-msg.thinking-block,
  html[data-theme="light"] .review-msg.compact-summary { opacity: 1; }
  html[data-theme="light"] .review-msg.tool-card .msg-header,
  html[data-theme="light"] .review-msg.tool-card .thought-preview,
  html[data-theme="light"] .review-msg.tool-card .tool-card-status,
  html[data-theme="light"] .review-msg.thinking-block .msg-header,
  html[data-theme="light"] .review-msg.thinking-block .thought-preview,
  html[data-theme="light"] .compact-divider-label {
    color: var(--fg-muted);
  }
  html[data-theme="light"] .review-msg.thinking-block {
    background: rgba(124, 58, 237, 0.04);
  }
  html[data-theme="light"] .msg-raw-json {
    background: rgba(15, 23, 42, 0.05);
    color: var(--fg-muted);
  }
  html[data-theme="light"] .mr-diff-file-header { background: var(--surface-2, #f1f5f9); }

  /* Conversation tab shell: prompt-turn containers were still dark-mode cards. */
  html[data-theme="light"] .conversation-view {
    background: var(--conversation-bg);
    color: var(--fg);
  }
  html[data-theme="light"] .conversation-chrome {
    background: var(--conversation-load-bg) !important;
    color: var(--conversation-load-fg) !important;
    border-color: var(--conversation-load-border) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  }
  html[data-theme="light"] .prompt-turn {
    background: var(--conversation-card-bg);
    border-color: var(--conversation-card-border);
    border-left-color: var(--accent);
    box-shadow: var(--conversation-card-shadow);
  }
  html[data-theme="light"] .prompt-turn.running-prompt-turn {
    border-left-color: var(--green);
  }
  html[data-theme="light"] .prompt-turn.setup-turn {
    background: var(--conversation-setup-bg);
    border-color: rgba(124,58,237,0.20);
    border-left-color: var(--purple);
  }
  html[data-theme="light"] .prompt-turn-header:hover {
    background: rgba(15,23,42,0.035);
  }
  html[data-theme="light"] .prompt-turn-prompt.review-msg {
    background: var(--conversation-prompt-bg);
    border-left-color: var(--conversation-prompt-border);
  }
  html[data-theme="light"] .prompt-turn-prompt .msg-text {
    color: var(--fg);
  }
  html[data-theme="light"] .prompt-turn-chevron,
  html[data-theme="light"] .prompt-turn-empty {
    color: var(--fg-muted);
  }
  html[data-theme="light"] .prompt-turn-setup-title {
    color: var(--purple);
  }
  html[data-theme="light"] .prompt-turn-response {
    border-top-color: var(--conversation-response-border);
  }
  html[data-theme="light"] .prompt-turn-badge {
    background: var(--conversation-chip-bg);
    color: var(--conversation-chip-fg);
    border-color: var(--conversation-chip-border);
  }
  html[data-theme="light"] .prompt-turn-badge.prompt-turn-recency-badge.latest {
    background: rgba(59,102,224,0.08);
    color: var(--accent);
    border-color: rgba(59,102,224,0.28);
  }
  html[data-theme="light"] .prompt-turn-badge.prompt-turn-recency-badge.running {
    background: rgba(21,128,61,0.09);
    color: var(--green);
    border-color: rgba(21,128,61,0.30);
  }

  /* Message-type tints: replace dark-mode RGBA hardcoded colors with palette tokens. */
  html[data-theme="light"] .review-msg.user {
    background: rgba(59,102,224,0.06);
    border-left-color: var(--accent);
  }
  html[data-theme="light"] .review-msg.assistant {
    background: rgba(21,128,61,0.05);
    border-left-color: var(--green);
  }
  html[data-theme="light"] .review-msg.walle-error-msg {
    background: rgba(185,28,28,0.06);
    border-left-color: var(--red);
  }
  html[data-theme="light"] .review-msg.walle-error-msg .msg-role {
    color: var(--red);
  }
  html[data-theme="light"] .thought-group {
    background: rgba(21,128,61,0.025);
    border-left-color: rgba(21,128,61,0.22);
  }
  html[data-theme="light"] .thought-group.tool-activity-group {
    background: rgba(146,64,14,0.04);
    border-left-color: rgba(146,64,14,0.32);
  }
  html[data-theme="light"] .thought-group.combined-activity-group {
    background: rgba(146,64,14,0.04);
    border-left-color: rgba(146,64,14,0.34);
  }
  html[data-theme="light"] .thought-group.combined-activity-group .thought-group-label {
    color: var(--yellow);
  }
  html[data-theme="light"] .thought-group.codex-warning-group {
    background: rgba(146,64,14,0.035);
    border-left-color: rgba(146,64,14,0.28);
  }
  html[data-theme="light"] .thought-group .thought-group-items .review-msg {
    background: rgba(21,128,61,0.025);
  }
  html[data-theme="light"] .thought-group.tool-activity-group .thought-group-items .review-msg {
    background: rgba(146,64,14,0.025);
  }
  html[data-theme="light"] .thought-group.codex-warning-group .thought-group-items .review-msg,
  html[data-theme="light"] .review-msg.codex-warning-item {
    background: rgba(146,64,14,0.028);
  }
  html[data-theme="light"] .review-msg.summary {
    background: rgba(124,58,237,0.05);
    border-left-color: rgba(124,58,237,0.32);
  }

  /* Code blocks: lift onto a distinct surface so the block is visually bounded. */
  html[data-theme="light"] .review-msg .msg-text pre {
    background: #f1f3f6;
    border-color: rgba(15,23,42,0.08);
  }
  html[data-theme="light"] .review-msg .msg-text code {
    background: rgba(15,23,42,0.06);
    color: #1a1f36;  /* warmer near-black for monospaced text */
  }
  /* Striped table rows in light mode — the dark-mode rule uses near-white-on-white. */
  html[data-theme="light"] .review-msg .msg-text tr:nth-child(even) td {
    background: rgba(15,23,42,0.025);
  }
  /* Link underline opacity tuned for the new accent. */
  html[data-theme="light"] .review-msg .msg-text a {
    text-decoration-color: rgba(59,102,224,0.40);
  }
  html[data-theme="light"] .review-msg .msg-text a:hover { text-decoration-color: var(--accent); }

  /* Top bar - 3-column grid keeps nav centered regardless of side content */
  #topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 44px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding: 0 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 4000;
    overflow: visible;
    -webkit-app-region: drag;
  }
  #topbar .topbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-app-region: no-drag;
    justify-self: start;
  }
  #topbar .logo {
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    white-space: nowrap;
    margin-right: 4px;
  }
  #topbar .app-version {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--fg-dim);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: 5px;
    padding: 3px 6px;
    background: var(--accent-soft);
    cursor: pointer;
    appearance: none;
    margin: 0;
    -webkit-app-region: no-drag;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
  }
  #topbar .app-version:hover {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-light));
  }
  #topbar .app-version:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
  }
  #topbar .app-version:active {
    transform: translateY(1px);
  }
  #topbar .app-version.update-available {
    color: #ffd28a;
    border-color: rgba(224, 175, 104, 0.62);
    background:
      linear-gradient(135deg, rgba(224, 175, 104, 0.18), rgba(122, 162, 247, 0.10)),
      rgba(224, 175, 104, 0.08);
    box-shadow: 0 0 0 1px rgba(224, 175, 104, 0.08), 0 4px 14px rgba(224, 175, 104, 0.10);
  }
  #topbar .app-version-update-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 5px;
    color: #1a1b26;
    background: linear-gradient(135deg, #ffd28a, #ff9e64);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  #topbar .app-version-update-tag[hidden] {
    display: none;
  }
  html[data-theme="light"] #topbar .app-version.update-available {
    color: #8a4d00;
    border-color: rgba(180, 102, 0, 0.34);
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.92), rgba(219, 234, 254, 0.75));
    box-shadow: 0 3px 12px rgba(180, 102, 0, 0.08);
  }
  #topbar .instance-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    -webkit-app-region: no-drag;
  }
  #topbar .instance-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 140px;
    height: 23px;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg-muted);
    background: color-mix(in srgb, var(--bg-light) 72%, var(--bg) 28%);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    font-family: inherit;
    cursor: pointer;
    -webkit-app-region: no-drag;
  }
  body.remote-instance #topbar .instance-badge.hosted,
  body.remote-instance #topbar .instance-badge.tunnel,
  body.remote-instance #topbar .instance-badge.edge {
    border-color: color-mix(in srgb, var(--remote-accent) 72%, var(--border));
    color: color-mix(in srgb, var(--remote-accent) 28%, var(--fg));
    background: var(--remote-accent-soft);
  }
  #topbar .instance-badge:hover,
  #topbar .instance-badge:focus-visible {
    color: var(--fg);
    border-color: var(--accent);
    outline: none;
  }
  #topbar .instance-badge[hidden] { display: none; }
  #topbar .instance-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fg-dim);
    flex: 0 0 auto;
  }
  #topbar .instance-badge-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #topbar .instance-badge.local .instance-badge-dot { background: var(--green); }
  #topbar .instance-badge.hosted .instance-badge-dot { background: var(--accent); }
  #topbar .instance-badge.tunnel .instance-badge-dot,
  #topbar .instance-badge.hosted .instance-badge-dot,
  #topbar .instance-badge.edge .instance-badge-dot { background: var(--remote-accent); }
  #topbar .instance-badge.mirror .instance-badge-dot { background: var(--fg-muted); }
  #topbar .instance-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 3200;
    width: min(380px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 76px));
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    color: var(--fg);
    font-size: 12px;
    -webkit-app-region: no-drag;
  }
  #topbar .instance-profile-menu[hidden] { display: none; }
  #topbar .instance-profile-menu-header,
  #topbar .instance-profile-row,
  #topbar .instance-profile-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #topbar .instance-profile-menu-header {
    justify-content: space-between;
    margin-bottom: 8px;
  }
  #topbar .instance-profile-menu-title {
    font-size: 12px;
    font-weight: 750;
    color: var(--fg);
  }
  #topbar .instance-profile-current,
  #topbar .instance-proof-panel,
  #topbar .instance-source-ledger,
  #topbar .instance-profile-readiness,
  #topbar .instance-profile-form,
  #topbar .instance-profile-list {
    border-top: 1px solid var(--border);
    padding-top: 9px;
    margin-top: 9px;
  }
  #topbar .instance-profile-kicker {
    color: var(--fg-dim);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
  }
  #topbar .instance-profile-name {
    color: var(--fg);
    font-size: 13px;
    font-weight: 750;
  }
  #topbar .instance-profile-meta,
  #topbar .instance-profile-url,
  #topbar .instance-profile-sync,
  #topbar .instance-profile-status-line {
    color: var(--fg-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #topbar .instance-profile-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
  }
  #topbar .instance-profile-status-pill {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 6px;
    background: var(--bg-light);
    color: var(--fg-muted);
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  #topbar .instance-profile-status-pill strong {
    display: block;
    color: var(--fg);
    font-size: 11px;
    font-weight: 750;
  }
  #topbar .instance-profile-status-pill.warning strong { color: var(--yellow); }
  #topbar .instance-profile-status-pill.error strong { color: var(--red); }
  #topbar .instance-profile-status-pill.planned strong { color: var(--fg-muted); }
  #topbar .instance-profile-row {
    justify-content: space-between;
    padding: 7px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
  #topbar .instance-profile-row:first-child { border-top: 0; }
  #topbar .instance-profile-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
  }
  #topbar .instance-profile-btn {
    min-height: 24px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    color: var(--fg);
    background: var(--bg-light);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }
  #topbar .instance-profile-btn:hover,
  #topbar .instance-profile-btn:focus-visible {
    border-color: var(--accent);
    outline: none;
  }
  #topbar .instance-profile-btn.danger {
    color: var(--red);
  }
  #topbar .instance-profile-input {
    width: 100%;
    min-height: 27px;
    margin: 5px 0 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 7px;
    color: var(--fg);
    background: var(--bg-dark);
    font: inherit;
    font-size: 12px;
  }
  #topbar .instance-profile-input:focus {
    border-color: var(--accent);
    outline: none;
  }
  #topbar .instance-profile-empty {
    color: var(--fg-muted);
    font-size: 11px;
    padding: 6px 0 2px;
  }
  .identity-mismatch-banner {
    position: fixed;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4200;
    width: min(780px, calc(100vw - 24px));
    border: 1px solid color-mix(in srgb, var(--red) 70%, var(--border));
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--red) 13%, var(--bg));
    color: var(--fg);
    box-shadow: 0 12px 38px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }
  .identity-mismatch-banner strong { color: var(--red); }
  .identity-mismatch-banner button {
    margin-left: auto;
    min-height: 26px;
    border: 1px solid color-mix(in srgb, var(--red) 65%, var(--border));
    border-radius: 6px;
    padding: 3px 8px;
    color: var(--fg);
    background: var(--bg-light);
    font: inherit;
    cursor: pointer;
  }
  @media (max-width: 640px) {
    #topbar .instance-profile-menu {
      position: fixed;
      top: 48px;
      left: 12px;
      right: 12px;
      width: auto;
      max-height: calc(100vh - 64px);
    }
  }
  .setup-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-dim);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    background: var(--accent-soft);
    white-space: nowrap;
  }
  .sidebar-toggle {
    background: none;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    transition: all 0.15s;
  }
  .sidebar-toggle:hover { color: var(--fg); background: var(--bg-lighter); }
  .app-menu-item { padding:6px 12px; font-size:12px; color:var(--fg); cursor:pointer; white-space:nowrap; }
  .app-menu-item:hover { background:var(--accent-soft); }

  /* Service control panel */
  .svc-panel { padding:8px 12px; }
  .svc-panel-title { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--fg-dim); margin-bottom:8px; }
  .svc-row { display:flex; align-items:center; gap:8px; padding:6px 0; }
  .svc-row + .svc-row { border-top:1px solid var(--border); padding-top:8px; }
  .svc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; transition:background 0.3s; }
  .svc-dot.running { background:var(--green); box-shadow:0 0 6px var(--green); }
  .svc-dot.stopped { background:var(--red); box-shadow:0 0 6px var(--red); }
  .svc-dot.checking { background:var(--yellow); animation:pulse 1s infinite; }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
  .svc-name { flex:1; font-size:12px; color:var(--fg); font-weight:500; }
  .svc-name small { display:block; font-size:10px; color:var(--fg-dim); font-weight:normal; }
  .svc-actions { display:flex; gap:4px; }
  .svc-btn { font-size:10px; padding:3px 8px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--fg-dim); cursor:pointer; transition:all 0.15s; }
  .svc-btn:hover { color:var(--fg); border-color:var(--fg-dim); background:var(--bg-lighter); }
  .svc-btn.danger:hover { color:var(--red); border-color:var(--red); }
  .svc-btn:disabled { opacity:0.3; cursor:default; }
  .svc-btn:disabled:hover { color:var(--fg-dim); border-color:var(--border); background:transparent; }

  /* FSM-derived connection status: a full-viewport dim with the spinner centered (restart /
     reconnect), but never an interaction layer -- the mask is visual only, clicks pass through. */
  #reconnect-overlay {
    display:none; position:fixed; inset:0; background:var(--overlay-bg);
    z-index:9999; align-items:center; justify-content:center; flex-direction:column; gap:12px;
    pointer-events:none;
  }
  #reconnect-overlay.active { display:flex; }
  #reconnect-overlay .spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
  #boot-error-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--fg);
  }
  #boot-error-overlay.active { display: flex; }
  #boot-error-content {
    width: min(440px, calc(100vw - 40px));
    padding: 24px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
  }
  #boot-error-content h1 { margin: 0 0 8px; font-size: 18px; }
  #boot-error-content p { margin: 0 0 16px; color: var(--fg-muted); line-height: 1.5; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .boot-status-banner {
    display: none;
    align-items: center;
    min-height: 32px;
    gap: 8px;
    padding: 5px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--fg-muted);
    font-size: 12px;
  }
  .boot-status-banner.active { display: flex; }
  .boot-status-banner strong { color: var(--fg); }
  .boot-status-banner .boot-status-action {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }
  #prefs-load-error {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    padding: 5px 7px;
    border-left: 2px solid var(--yellow);
    background: var(--warning-soft);
    color: var(--fg-muted);
    font-size: 10px;
  }
  #prefs-load-error.active { display: flex; }
  #prefs-load-error button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
  }
  #lifecycle-pressure-banner {
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    box-sizing: border-box;
    padding: 5px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--yellow) 38%, var(--border));
    background: color-mix(in srgb, var(--yellow) 10%, var(--bg-light));
    color: var(--fg-muted);
    font-size: 12px;
  }
  #lifecycle-pressure-banner strong { color: var(--yellow); }
  #lifecycle-pressure-message { min-width: 0; flex: 1 1 auto; }
  #lifecycle-pressure-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }
  #lifecycle-pressure-candidate {
    max-width: min(330px, 34vw);
    min-height: 25px;
    border: 1px solid color-mix(in srgb, var(--yellow) 42%, var(--border));
    border-radius: 5px;
    background: var(--bg-light);
    color: var(--fg);
    font: inherit;
    font-size: 11px;
  }
  #lifecycle-pressure-action {
    min-height: 25px;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--yellow) 58%, var(--border));
    border-radius: 5px;
    background: transparent;
    color: var(--yellow);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    max-width: min(280px, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #lifecycle-pressure-action:hover:not(:disabled) { background: var(--warning-soft); }
  #lifecycle-pressure-action:disabled { opacity: 0.5; cursor: default; }
  #lifecycle-pressure-dismiss {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--fg-muted);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  #lifecycle-pressure-dismiss:hover { background: var(--warning-soft); color: var(--fg); }
  @media (max-width: 640px) {
    #lifecycle-pressure-banner { padding: 6px 10px; flex-wrap: wrap; }
    #lifecycle-pressure-actions { width: 100%; margin-left: 0; }
    #lifecycle-pressure-candidate { flex: 1 1 150px; max-width: none; min-width: 0; }
    #lifecycle-pressure-action { flex: 0 1 auto; max-width: 46vw; }
  }

  /* Navigation pills */
  #topbar .topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-self: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    position: relative;
    overflow: visible;
    -webkit-app-region: no-drag;
  }
  .nav-pill {
    background: none;
    border: none;
    color: var(--fg-dim);
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    position: relative;
  }
  .nav-pill:hover { color: var(--fg); background: rgba(122, 162, 247, 0.08); }
  .nav-pill.active { color: #fff; background: var(--accent); }
  .nav-pill .pill-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
  }
  #nav-more-wrap {
    position: relative;
    display: inline-block;
    -webkit-app-region: no-drag;
  }
  #nav-more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 4100;
    min-width: 156px;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.36), 0 3px 12px rgba(0,0,0,0.24);
  }
  html[data-theme="light"] #nav-more-dropdown {
    box-shadow: 0 18px 42px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.10);
  }
  #nav-more-dropdown .nav-pill {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    border-radius: 7px;
    padding: 8px 12px;
    text-align: left;
  }
  #nav-more-dropdown .nav-pill:hover {
    background: var(--accent-soft);
  }
  #nav-more-dropdown .nav-pill.active {
    color: var(--fg);
    background: var(--accent-soft);
  }
  #nav-more-button.nav-more-has-active {
    color: var(--fg);
    background: var(--accent-soft);
  }

  .setup-backup-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  .backup-settings-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }
  .backup-settings-hero h2 {
    margin: 0 0 4px;
  }
  .backup-settings-hero p {
    margin: 0;
    max-width: 760px;
    color: var(--fg-dim);
    font-size: 12px;
    line-height: 1.5;
  }
  .setup-backup-folder {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 10px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
      var(--bg-light);
    padding: 12px;
  }
  .setup-backup-folder .input-row { margin-bottom: 8px; }
  .setup-backup-folder-actions,
  .backup-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .setup-backup-folder-status {
    min-height: 18px;
    margin-top: 8px;
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.45;
  }
  .setup-storage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
  }
  .setup-storage-card {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 10px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%),
      color-mix(in srgb, var(--bg-light) 92%, #000 8%);
    padding: 12px;
  }
  .setup-storage-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .setup-storage-card h3 {
    margin: 0;
    color: var(--fg);
    font-size: 14px;
    font-weight: 850;
  }
  .setup-storage-card p {
    margin: 3px 0 0;
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.35;
  }
  .setup-storage-pill {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    text-transform: uppercase;
  }
  .setup-storage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
  }
  .setup-storage-actions .setup-btn {
    min-height: 34px;
  }
  .setup-storage-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding-right: 8px;
    color: var(--fg-dim);
    font-size: 12px;
  }
  .setup-storage-check input {
    width: 15px;
    height: 15px;
  }
  .setup-storage-status {
    min-height: 18px;
    color: var(--fg-dim);
    font-size: 12px;
    line-height: 1.45;
  }
  .setup-storage-status.error {
    color: var(--danger);
  }
  .setup-storage-status.ok {
    color: var(--success);
  }
  .setup-storage-path-picker .ns-path-input-row input {
    width: 100%;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .setup-storage-path-picker.path-picker-open {
    z-index: 180;
  }
  .setup-storage-path-picker .ns-path-suggestions {
    max-height: min(320px, 38vh);
    z-index: 420;
  }
  .setup-storage-path-picker .ns-path-validation {
    margin-top: 5px;
  }
  .setup-storage-plan {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 90%, #000 10%);
    padding: 12px;
    color: var(--fg);
    font-size: 12px;
    line-height: 1.45;
  }
  .setup-storage-plan h3 {
    margin: 0 0 8px;
    color: var(--fg);
    font-size: 13px;
  }
  .setup-storage-plan ul {
    margin: 6px 0 0 18px;
    padding: 0;
  }
  .setup-btn-danger {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    color: color-mix(in srgb, var(--danger) 72%, var(--fg));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
  }
  .setup-btn-danger:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--danger) 65%, var(--border));
    color: var(--fg);
    background: color-mix(in srgb, var(--danger) 18%, var(--bg-light));
  }
  .setup-phone-url-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 12px 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 12px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
      color-mix(in srgb, var(--bg-light) 88%, #000 12%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .setup-phone-url-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    color: var(--fg-dim);
    font-size: 13px;
    line-height: 1.4;
  }
  .setup-phone-url-label {
    color: color-mix(in srgb, var(--fg) 70%, var(--fg-dim));
    font-weight: 800;
  }
  .setup-phone-url-value {
    max-width: min(100%, 720px);
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 86%, #000 14%);
    color: var(--fg);
    font-size: 12px;
    line-height: 1.35;
    word-break: break-all;
  }
  .setup-copy-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
    border-radius: 999px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
      color-mix(in srgb, var(--bg-light) 88%, #000 12%);
    color: color-mix(in srgb, var(--accent) 72%, var(--fg));
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.01em;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 140ms ease;
  }
  .setup-copy-chip:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-light));
    color: var(--fg);
    transform: translateY(-1px);
  }
  .setup-copy-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }
  .setup-copy-chip.is-copied {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border));
    background: color-mix(in srgb, var(--success) 15%, var(--bg-light));
    color: color-mix(in srgb, var(--success) 72%, var(--fg));
  }
  .setup-copy-glyph {
    position: relative;
    width: 13px;
    height: 13px;
    display: inline-block;
  }
  .setup-copy-glyph::before,
  .setup-copy-glyph::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
  }
  .setup-copy-glyph::before {
    left: 1px;
    top: 4px;
    opacity: 0.72;
  }
  .setup-copy-glyph::after {
    right: 1px;
    top: 1px;
    background: color-mix(in srgb, var(--bg-light) 75%, transparent);
  }
  @media (max-width: 760px) {
    .setup-phone-url-card {
      align-items: stretch;
      flex-direction: column;
    }
    .setup-copy-chip {
      width: 100%;
    }
  }
  .backup-db-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .backup-db-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-light) 86%, #000 14%);
    padding: 12px;
  }
  .backup-db-card-title {
    color: var(--fg);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 7px;
  }
  .backup-copy-path {
    min-width: 0;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 4px;
  }
  .backup-copy-path span {
    color: var(--accent);
    overflow-wrap: anywhere;
  }
  .backup-copy-path:hover span { text-decoration: underline; }
  .backup-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
  }
  .backup-section-header h3 {
    flex: 1;
    margin: 0;
    color: var(--fg);
    font-size: 13px;
    font-weight: 800;
  }
  .backup-retention-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 8px; margin: 4px 0 8px; font-size: 12px;
  }
  .backup-retention-row input[type=number] { width: 64px; }
  .backup-retention-hint { color: var(--fg-dim); }
  .backup-expiring-tag { margin-left: 8px; font-size: 11px; color: var(--yellow, #e0af68); opacity: .9; }
  .backup-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
  }
  .backup-table th,
  .backup-table td {
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
  }
  .backup-table tr:first-child th { border-top: 0; }
  .backup-table th {
    color: var(--fg-dim);
    background: color-mix(in srgb, var(--bg-light) 88%, #000 12%);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .backup-table td { color: var(--fg); }
  .backup-table td.muted { color: var(--fg-dim); }
  .backup-table tr.selected td {
    background: rgba(88,166,255,0.06);
  }
  .backup-table-actions {
    text-align: right;
    white-space: nowrap;
  }
  .backup-empty {
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--fg-dim);
    font-size: 12px;
    padding: 14px;
  }
  @media (max-width: 980px) {
    .backup-settings-hero {
      flex-direction: column;
    }
    .setup-backup-summary,
    .setup-storage-grid,
    .backup-db-grid {
      grid-template-columns: 1fr;
    }
  }

  #topbar .topbar-right {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-self: end;
    -webkit-app-region: no-drag;
  }
  .topbar-util-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--fg-dim);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .topbar-util-btn:hover { color: var(--fg); background: var(--bg-lighter); border-color: var(--border); }
  .topbar-util-btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
  #global-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--fg);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
  }
  #global-feedback-btn:hover,
  #global-feedback-btn:focus-visible {
    color: var(--fg);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    box-shadow: 0 0 0 2px var(--focus-ring);
    outline: none;
  }
  .topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
  }

  .btn {
    background: var(--bg-lighter);
    border: 1px solid var(--border);
    color: var(--fg);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
  }
  .btn:hover { background: var(--border); }
  .btn[aria-disabled="true"],
  .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .btn[aria-disabled="true"]:hover,
  .btn:disabled:hover {
    background: var(--bg-lighter);
  }
  .pe-copilot-tab.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .pe-copilot-tab.active:hover { background: var(--accent-hover); }
  .btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .btn.primary:hover { background: var(--accent-hover); }
  .btn.danger { color: var(--red); }
  .btn.danger:hover { background: rgba(247, 118, 142, 0.15); }
  .theme-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
  }
  .theme-setting-copy {
    min-width: 0;
  }
  .theme-setting-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 3px;
  }
  .theme-setting-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--fg-dim);
  }
  .theme-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
  }
  .theme-option {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--fg-dim);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    min-width: 64px;
    padding: 7px 10px;
    cursor: pointer;
  }
  .theme-option:hover,
  .theme-option:focus-visible {
    color: var(--fg);
    border-color: var(--border);
    outline: none;
  }
  .theme-option.active {
    color: var(--accent-fg);
    background: var(--accent);
    border-color: var(--accent);
  }
  .theme-option.active:hover,
  .theme-option.active:focus-visible {
    color: var(--accent-fg);
    background: var(--accent-hover);
  }
  #setup-appearance-theme-status {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--fg-dim);
  }

  /* Main layout */
  #main {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  #models-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #models-panel.active { display: flex; }
  .models-panel-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .models-panel-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
  }
  /* Sidebar */
  #sidebar {
    width: var(--sidebar-width);
    background: var(--bg-light);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
  }
  /* Workspace visibility outranks the persisted inline desktop width. Keeping
     the inline value lets Sessions restore the preference without another read. */
  #sidebar.collapsed { width: 0 !important; min-width: 0; border: none; }
  #sidebar-resize {
    width: 4px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s;
    z-index: 10;
  }
  #sidebar-resize:hover, #sidebar-resize.dragging {
    background: var(--accent);
  }
  .sidebar-section {
    padding: 10px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-section h3 {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--fg-dim);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .session-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    gap: 6px;
    margin-bottom: 2px;
    transition: background 0.1s;
    border-left: 2px solid transparent;
    min-width: 0;
  }
  .session-item:hover { background: var(--bg-lighter); }
  .session-item.active { background: var(--accent); color: var(--accent-fg); }
  /* Agent type left border colors — peripheral cue paired with the per-row provider icon. */
  .session-item[data-agent="claude"] { border-left-color: #D97757; }
  .session-item[data-agent="walle"] { border-left-color: #f59e0b; }
  .session-item[data-agent="codex"] { border-left-color: #22c55e; }
  .session-item[data-agent="gemini"] { border-left-color: #3b82f6; }
  /* WP-7 (S-58): DeepSeek Harness — DeepSeek's signature blue. */
  .session-item[data-agent="dsh"] { border-left-color: #4D6BFE; }
  .session-item[data-agent="opencode"] { border-left-color: #a78bfa; }
  .session-item[data-agent="cursor"] { border-left-color: #6b7280; }
  .session-item[data-agent="shell"] { border-left-color: #6b7280; }
  .session-item.active[data-agent] { border-left-color: color-mix(in srgb, var(--accent-fg) 38%, transparent); }
  /* Provider icon: monochrome SVG; color comes from currentColor.
     The session-item sets the color per-agent so icon (and any other currentColor
     cells) inherit. On the active row, parent forces text/icon to dark for contrast. */
  .session-item .provider-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
  }
  /* Per-agent provider-icon hues. Claude uses #D97757 — the official copper
     from Anthropic's brand mark (matches the icon path in providerIconSvg). */
  .session-item[data-agent="claude"] .provider-icon { color: #D97757; }
  .session-item[data-agent="walle"]  .provider-icon { color: #f59e0b; }
  .session-item[data-agent="codex"]  .provider-icon { color: #22c55e; }
  .session-item[data-agent="gemini"] .provider-icon { color: #3b82f6; }
  /* WP-7 (S-58): dsh renders brandIconSvg's .brand-icon wrapper; tint both class names. */
  .session-item[data-agent="dsh"] .provider-icon,
  .session-item[data-agent="dsh"] .brand-icon { color: #4D6BFE; }
  .session-item[data-agent="opencode"] .provider-icon { color: #a78bfa; }
  /* Cursor's mark is monochrome — track the theme's text color so the cube reads
     near-black on light (the chosen brand tint) and light on the dark sidebar. */
  .session-item[data-agent="cursor"] .provider-icon { color: var(--fg); }
  .session-item[data-agent="shell"]  .provider-icon { color: #9ca3af; }
  .session-item.active .provider-icon { color: var(--accent-fg); opacity: 0.9; }
  /* Tab header icon — inherits the same per-agent color. */
  .tab .provider-icon { color: #D97757; flex-shrink: 0; }
  .tab[data-agent="claude"] .provider-icon { color: #D97757; }
  .tab[data-agent="walle"]  .provider-icon { color: #f59e0b; }
  .tab[data-agent="codex"]  .provider-icon { color: #22c55e; }
  .tab[data-agent="gemini"] .provider-icon { color: #3b82f6; }
  .tab[data-agent="dsh"] .provider-icon,
  .tab[data-agent="dsh"] .brand-icon { color: #4D6BFE; }
  /* WP-7b: the shared agent composer under a conv-only (no-CLI) tab's Conv view. Wall-E's composer
     rules are scoped to .walle-session; flex-shrink:0 keeps a long transcript from collapsing it. */
  .term-container > .conv-only-composer { display:grid; gap:8px; flex-shrink:0; padding:10px 16px; border-top:1px solid var(--border, #37415f); min-width:0; }
  .conv-only-composer .agent-ui-composer-input { width:100%; resize:vertical; min-height:64px; border:1px solid var(--border, #37415f); border-radius:10px; padding:10px; color:inherit; background:var(--surface, #171c2a); font:inherit; }
  .conv-only-composer .agent-ui-composer-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
  .conv-only-composer .agent-ui-button { min-width:44px; min-height:36px; border:1px solid var(--border, #37415f); border-radius:8px; padding:6px 12px; color:inherit; background:var(--surface-raised, #222a3d); cursor:pointer; }
  .conv-only-composer .agent-ui-button.primary { background:#779cf3; color:#101522; border-color:#779cf3; }
  .conv-only-composer .agent-ui-button.danger { color:#ff9c9c; }
  .conv-only-composer [hidden] { display:none !important; }
  .tab[data-agent="opencode"] .provider-icon { color: #a78bfa; }
  .tab[data-agent="cursor"] .provider-icon { color: var(--fg); }
  .tab[data-agent="shell"]  .provider-icon { color: #9ca3af; }
  .tab.active .provider-icon { color: var(--fg); opacity: 0.95; }
  .session-item .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--fg-dim);
    flex-shrink: 0;
    opacity: 0.4;
  }
  .session-item.running .dot { background: var(--green); opacity: 1; }
  .session-item.resuming .dot { background: var(--yellow, #e0af68); opacity: 0.95; }
  .session-item.stale .dot { background: var(--yellow, #e0af68); opacity: 0.7; }
  .session-mem-chip {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    padding: 1px 5px;
    color: var(--fg-dim);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .session-lifecycle-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 88px;
    min-height: 16px;
    padding: 1px 5px;
    border: 1px solid color-mix(in srgb, var(--fg-dim) 34%, transparent);
    border-radius: 4px;
    color: var(--fg-muted);
    background: color-mix(in srgb, var(--bg-lighter) 72%, transparent);
    font-size: 9px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
  }
  .session-lifecycle-chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }
  .session-lifecycle-chip.parked { color: var(--yellow); }
  .session-lifecycle-chip.deferred { color: #7aa2f7; }
  .session-lifecycle-chip.exited { color: var(--fg-dim); }
  .session-lifecycle-chip.parking,
  .session-lifecycle-chip.waking { color: #7dcfff; }
  .session-lifecycle-chip.parking::before,
  .session-lifecycle-chip.waking::before {
    background: transparent;
    border: 1px solid currentColor;
    border-top-color: transparent;
    animation: resuming-spin 1s linear infinite;
  }
  .session-lifecycle-chip.pinned::after { content: 'pin'; opacity: 0.72; }
  .session-item.active .session-lifecycle-chip {
    color: var(--accent-fg);
    border-color: color-mix(in srgb, var(--accent-fg) 35%, transparent);
    background: color-mix(in srgb, var(--accent-fg) 14%, transparent);
  }
  .tab .session-lifecycle-chip { max-width: 74px; margin-left: 2px; }
  .session-lifecycle-banner {
    position: absolute;
    z-index: 14;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--yellow) 44%, var(--border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    color: var(--yellow);
    box-shadow: 0 5px 18px var(--shadow-color);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .session-lifecycle-banner[data-lifecycle-state="resume-blocked"] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .session-lifecycle-banner-action {
    flex: none;
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--yellow) 60%, var(--border));
    border-radius: 3px;
    background: transparent;
    color: var(--yellow);
    font: inherit;
    cursor: pointer;
  }
  .session-lifecycle-banner-action:hover { background: color-mix(in srgb, var(--yellow) 16%, transparent); }
  .session-lifecycle-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 24px;
    background: color-mix(in srgb, var(--terminal-bg) 54%, transparent);
    pointer-events: none;
  }
  .session-lifecycle-overlay[data-lifecycle-state="waking"] {
    display: block;
    padding: 0;
    background: color-mix(in srgb, var(--terminal-bg) 18%, transparent);
    pointer-events: none;
  }
  .session-lifecycle-overlay-card {
    width: min(440px, calc(100% - 24px));
    box-sizing: border-box;
    padding: 22px 24px 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, var(--terminal-bg));
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
    color: var(--fg);
    text-align: center;
  }
  .session-lifecycle-overlay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    color: var(--yellow);
    font-size: 20px;
    line-height: 1;
  }
  .session-lifecycle-overlay-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }
  .session-lifecycle-overlay-detail {
    margin: 8px auto 16px;
    max-width: 370px;
    color: var(--fg-muted);
    font-size: 12px;
    line-height: 1.55;
  }
  .session-lifecycle-overlay[data-blocked="true"] .session-lifecycle-overlay-detail {
    color: var(--yellow);
  }
  .session-lifecycle-resume {
    min-height: 34px;
    padding: 6px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-fg);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
  }
  .session-lifecycle-resume:hover { background: var(--accent-hover); }
  .session-lifecycle-resume:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .session-lifecycle-resume:disabled { opacity: 0.62; cursor: wait; }
  .session-lifecycle-overlay-hint {
    margin-top: 10px;
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.4;
  }
  @media (max-width: 640px) {
    .session-lifecycle-overlay { padding: 14px; }
    .session-lifecycle-overlay-card { width: 100%; padding: 18px 16px 16px; }
  }
  .session-item .label {
    /* Size to the title's content (not a fixed 9ch floor) so a short title
       releases its slack to the branch badge — the badge then shows in full
       whenever the row has room. flex-shrink:1 + the 7ch floor lets a very long
       title give way gracefully (so the row never overflows), while the badge's
       much larger shrink (below) means the branch yields first and the title
       stays readable. */
    flex: 1 1 auto;
    min-width: 7ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Active-filter match highlight: tint the matched run in the title, no layout shift. */
  .session-item .label .rs-match {
    background: var(--accent-soft, rgba(88, 166, 255, 0.22));
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
  }
  .session-item .status-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.85;
  }
  .session-owner-chip {
    max-width: 104px;
    border: 1px solid color-mix(in srgb, var(--remote-accent) 38%, var(--border));
    border-radius: 999px;
    padding: 1px 6px;
    color: color-mix(in srgb, var(--remote-accent) 42%, var(--fg));
    background: var(--remote-accent-soft);
    font-size: 9px;
    line-height: 1.35;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
  }
  .session-item.active .session-owner-chip {
    color: var(--accent-fg);
    border-color: color-mix(in srgb, var(--accent-fg) 36%, transparent);
    background: color-mix(in srgb, var(--accent-fg) 16%, transparent);
  }
  .status-tag.running {
    background: rgba(115, 218, 202, 0.15);
    color: var(--green);
  }
  .session-item.active .status-tag.running {
    background: color-mix(in srgb, var(--accent-fg) 18%, transparent);
    color: var(--accent-fg);
  }
  .status-tag.running::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 3px;
    vertical-align: middle;
    animation: pulse-dot 1.5s ease-in-out infinite;
  }
  /* Codex background-terminal "running": grouped with Running but visually distinct (cyan +
     spinning ring) so it reads as detached background work, not an active model turn. */
  /* D-15: the bg pill texts are short (bg shell / bg ×N); never let the row's flex squeeze them to an ellipsis. */
  .session-item .status-tag.bg-terminal { flex-shrink: 0; }
  .status-tag.running.bg-terminal {
    background: rgba(125, 207, 255, 0.16);
    color: #7dcfff;
  }
  .session-item.active .status-tag.running.bg-terminal {
    background: color-mix(in srgb, var(--accent-fg) 16%, transparent);
    color: color-mix(in srgb, var(--accent-fg) 70%, #7dcfff);
  }
  .status-tag.running.bg-terminal::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    border-top-color: transparent;
    margin-right: 3px;
    vertical-align: -1px;
    animation: resuming-spin 1s linear infinite;
  }
  /* WP-V4 (walle-interrupted-visibility-resume-design-2026-07-17.html §6):
     a walle "Running" chip past the quiet-time threshold degrades to this
     amber-ish variant ("Running? · quiet Nm") — display-only, grouping/sort
     stay in the "running" bucket (cls is unchanged). */
  .status-tag.running.walle-quiet {
    background: rgba(224, 175, 104, 0.15);
    color: var(--yellow);
  }
  .session-item.active .status-tag.running.walle-quiet {
    background: color-mix(in srgb, var(--accent-fg) 18%, transparent);
    color: var(--accent-fg);
  }
  .status-tag.resuming {
    background: rgba(224, 175, 104, 0.15);
    color: var(--yellow);
  }
  .session-item.active .status-tag.resuming {
    background: color-mix(in srgb, var(--accent-fg) 16%, transparent);
    color: color-mix(in srgb, var(--accent-fg) 82%, var(--yellow));
  }
  .status-tag.resuming::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    border: 1px solid currentColor;
    border-top-color: transparent;
    margin-right: 3px;
    vertical-align: -1px;
    animation: resuming-spin 1s linear infinite;
  }
  @keyframes resuming-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .status-tag.idle {
    background: rgba(192, 202, 245, 0.08);
    color: var(--fg-dim);
  }
  .session-item.active .status-tag.idle {
    background: color-mix(in srgb, var(--accent-fg) 14%, transparent);
    color: color-mix(in srgb, var(--accent-fg) 72%, transparent);
  }
  .status-tag.waiting {
    background: rgba(224, 175, 104, 0.15);
    color: var(--yellow);
  }
  .status-tag.stalled {
    background: rgba(224, 175, 104, 0.2);
    color: var(--yellow);
    box-shadow: inset 0 0 0 1px rgba(224, 175, 104, 0.22);
  }
  .session-item.active .status-tag.waiting {
    background: color-mix(in srgb, var(--accent-fg) 18%, transparent);
    color: var(--accent-fg);
  }
  .session-item.active .status-tag.stalled {
    background: rgba(224, 175, 104, 0.22);
    color: var(--yellow);
  }
  /* D-9: a verdict older than 9 s is Stale (dashed grey, never green); Sending... is a label, not a verdict. */
  .status-tag.stale {
    background: transparent;
    color: var(--fg-dim);
    box-shadow: inset 0 0 0 1px var(--border);
    border-style: dashed;
  }
  .status-tag.sending {
    font-style: italic;
    opacity: 0.85;
  }
  .status-tag.exited {
    background: rgba(120, 130, 170, 0.12);
    color: var(--fg-dim);
  }
  .session-item.active .status-tag.exited {
    background: color-mix(in srgb, var(--accent-fg) 14%, transparent);
    color: color-mix(in srgb, var(--accent-fg) 70%, transparent);
  }
  .session-attention-dismiss {
    /* Hidden = display:none (not opacity:0) so it reserves NO layout space on the
       row when idle — otherwise its ~70px box leaves a permanent empty gap to the
       right of the "Needs You" tag. It reveals in-flow only on hover/focus. */
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 6px;
    border: 1px solid rgba(224, 175, 104, 0.35);
    border-radius: 4px;
    background: rgba(224, 175, 104, 0.12);
    color: var(--yellow);
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .session-item:hover .session-attention-dismiss,
  .session-item:focus-within .session-attention-dismiss,
  .session-attention-dismiss:focus-visible {
    display: inline-flex;
  }
  .session-item.active .session-attention-dismiss {
    color: var(--accent-fg);
    border-color: color-mix(in srgb, var(--accent-fg) 42%, transparent);
    background: color-mix(in srgb, var(--accent-fg) 16%, transparent);
  }
  .session-item .close-btn {
    opacity: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
  }
  .session-item:hover .close-btn { opacity: 0.6; }
  .session-item .close-btn:hover { opacity: 1; }
  #session-list { overflow-y: auto; padding: 6px; min-height: 40px; }
  .session-group { margin-bottom: 1px; }
  /* Group separator label (only rendered in "By activity" sort mode) */
  .session-group-sep {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fg-dim);
    padding: 4px 6px 2px;
    user-select: none;
  }
  .session-group-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
  }
  /* "By project" group headers: real directory names read better mixed-case. */
  .session-group-sep.project-sep {
    width: calc(100% - 4px);
    min-height: 29px;
    margin: 7px 2px 4px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 6px;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      color-mix(in srgb, var(--bg-light) 92%, #000 8%);
    color: color-mix(in srgb, var(--fg) 88%, var(--accent));
    text-transform: none;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    appearance: none;
    text-align: left;
  }
  .session-group-sep.project-sep::after { display: none; }
  .session-group-sep.project-sep:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%),
      var(--bg-lighter);
  }
  .session-group-sep.project-sep:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .session-group-sep.project-sep.has-active {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    color: var(--fg);
  }
  .session-group-sep.project-sep.collapsed {
    color: var(--fg-dim);
    background: color-mix(in srgb, var(--bg-light) 86%, #000 14%);
  }
  .session-group-sep.project-sep svg { flex: 0 0 auto; opacity: 0.95; }
  .project-sep-chevron {
    flex: 0 0 auto;
    color: var(--fg-dim);
    font-size: 10px;
    transition: transform 0.12s ease;
  }
  .project-sep.collapsed .project-sep-chevron { transform: rotate(-90deg); }
  .project-sep-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .project-sep-count {
    flex: 0 0 auto;
    min-width: 23px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
  }
  .project-sep.collapsed .project-sep-count {
    background: color-mix(in srgb, var(--fg-dim) 16%, transparent);
    color: var(--fg-dim);
  }
  #active-sort.computer-filtered { border-color: var(--accent); }
  .computer-filter-chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:1px 6px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); cursor:pointer; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .computer-filter-chip:focus-visible { outline:2px solid var(--accent); }
  /* Collapsed expander row (>6 active sessions) */
  .active-list-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    width: calc(100% - 16px);
    min-height: 26px;
    padding: 4px 8px;
    margin: 4px 8px 6px;
    font-size: 11px;
    font-weight: 650;
    color: var(--accent);
    background: rgba(122, 162, 247, 0.08);
    border: 1px solid rgba(122, 162, 247, 0.22);
    border-radius: 6px;
    user-select: none;
    font-family: inherit;
    line-height: 1.2;
  }
  .active-list-more:hover {
    background: rgba(122, 162, 247, 0.14);
    border-color: rgba(122, 162, 247, 0.36);
    color: var(--fg);
  }
  .active-list-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .active-list-more .qd-arrow {
    font-size: 10px;
    opacity: 0.85;
  }
  .session-prompts {
    display: none;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px 8px 6px 23px;
  }
  .session-group.active .session-prompts,
  .session-group:hover .session-prompts { display: flex; }
  /* (Removed: .session-last-prompt and #session-prompt-popover — replaced by stream tooltip) */
  /* Hide agent badge in sidebar — agent type shown via left border */
  #session-list .agent-badge { display: none; }
  /* WP-4 (delegated-implementation-workers-2026-09-24.html §5 S-24): a worker session row
     rendered as a sibling row directly below its parent (data-agent="…", CSS indent), not
     literally nested inside the parent's DOM subtree — that would force the parent's own DOM
     node to rebuild on every child status change and reintroduce the hover-blink the keyed
     reconcile exists to prevent (see _groupWorkerUnits' comment). `.nested` is added only when
     the parent's own row is actually present in the visible list (AC-4a/4b); the AC-4c fallback
     (parent not visible) renders flat, without indentation, with a "worker of …" tooltip. */
  .session-item.worker.nested {
    margin-left: 23px;
    position: relative;
  }
  .session-item.worker.nested::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
  }
  /* WP-2 (native-subagent-sidebar-rows-2026-10-12.html §5 D-7): a nested native subagent steps
     in one level per `data-depth`, so a sub-subagent reads as deeper than its parent row. */
  .session-item.worker.nested.native[data-depth="2"] { margin-left: 35px; }
  .session-item.worker.nested.native[data-depth="3"] { margin-left: 47px; }
  /* Lifecycle WP-6 (§5 D-3, §9 S-26): the parent-group toggle row rendered by
     _workerParentToggleHtml -- same 23px indent as .session-item.worker.nested (it sits
     directly below the parent, above its children) so the chevron/count reads as the
     group header for the rows underneath it. .worker-badge is retired: nesting under this
     toggle already says "worker" (D-3). */
  .worker-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 23px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--fg-dim);
    cursor: pointer;
    user-select: none;
  }
  .worker-toggle:hover, .worker-toggle:focus-visible {
    color: var(--fg);
    background: var(--hover-bg, rgba(148, 163, 184, 0.08));
  }
  .worker-toggle.has-failed { color: var(--danger, #f87171); }
  .worker-toggle-arrow { font-size: 9px; opacity: 0.8; }
  .worker-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
  }
  .worker-clear:hover, .worker-clear:focus-visible { color: var(--accent); }
  .model-chip {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 9px;
    background: rgba(122, 162, 247, 0.12);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 8px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    flex: 0 1 auto;
  }
  .session-item.active .model-chip {
    background: rgba(255, 255, 255, 0.22);
    color: var(--accent-fg);
  }
  /* Branch badge */
  .branch-badge {
    display: inline-block;
    /* Cap is generous so the full branch name shows whenever the row has slack
       (short session title). The scoped, faster shrink on .session-item below
       (plus min-width: 0) still truncates the branch first when the row is
       crowded, so the title is never starved. */
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    background: rgba(125, 211, 252, 0.15);
    color: #7dd3fc;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 2px;
  }
  /* In the sidebar rows the branch should give way well before the session
     title: shrink it much faster than the title so a crowded row truncates the
     branch, not the title. */
  .session-item .branch-badge { flex-shrink: 20; }
  .session-item.has-worktree-attn .branch-badge { max-width: 96px; }
  .session-item.active .branch-badge {
    color: #111827;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
    font-weight: 700;
  }
  .branch-badge.namespaced {
    border: 1px solid rgba(125, 211, 252, 0.18);
  }
  .workspace-tracking-details {
    position: absolute; z-index: 25; right: 4px; top: calc(100% + 4px); width: min(320px, calc(100vw - 24px));
    padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-light); color: var(--fg);
    box-shadow: 0 8px 20px rgba(0,0,0,.28); font-size: 11px; white-space: normal;
  }
  .workspace-tracking-details > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 6px; padding: 2px 0; }
  .workspace-tracking-details span { overflow-wrap: anywhere; color: var(--fg-dim); }
  .workspace-tracking-details .workspace-history { display: block; color: var(--fg-dim); }
  .session-item { position: relative; }
  .worktree-attn-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 48px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #f6c177;
    padding: 1px 5px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
  }
  .worktree-attn-badge .wt-part {
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }
  /* Ahead-arrow styling by net-content. wt-ahead-real = merging would change main (solid).
     wt-ahead-noop = commits exist but merging changes nothing (integrated/superseded) → dimmed,
     so the count is visibly distinguishable from genuine unmerged work. */
  .worktree-attn-badge .wt-ahead-noop {
    opacity: 0.42;
    font-weight: 500;
  }
  /* WP-3b: the landing-queue part of the same badge: `wt-landing` is the queue position/ETA
     (`⇡#2/3 · 23m`), in this file's accent token. */
  .worktree-attn-badge .wt-landing {
    color: var(--accent, #7aa2f7);
  }
  .session-item.active .worktree-attn-badge {
    background: rgba(245, 158, 11, 0.28);
    border-color: rgba(120, 53, 15, 0.22);
    color: #3f2a05;
  }
  /* On the selected row the badge switches to dark text on the blue highlight; the light accent
     of the landing part would sit blue-on-blue there, so it takes the badge's dark text too. */
  .session-item.active .worktree-attn-badge .wt-landing {
    color: inherit;
  }
  /* cwd conflict banner */
  .cwd-conflict-banner {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    padding: 6px 10px;
    margin: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cwd-conflict-banner .dismiss { cursor: pointer; margin-left: auto; opacity: 0.6; }
  .cwd-conflict-banner .dismiss:hover { opacity: 1; }
  .prompt-badge {
    font-size: 9px;
    background: rgba(187, 154, 247, 0.15);
    color: #bb9af7;
    padding: 1px 6px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .prompt-badge:hover { background: rgba(187, 154, 247, 0.3); }
  #sidebar-v-resize {
    height: 12px;
    cursor: row-resize;
    background: linear-gradient(180deg, transparent, rgba(125, 134, 170, 0.06), transparent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s;
    outline: none;
  }
  #sidebar-v-resize::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 1px;
    background: var(--border);
    opacity: 0.82;
  }
  .sidebar-v-resize-grip {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(125, 134, 170, 0.56);
    box-shadow: 0 0 0 3px var(--bg-light);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  }
  #sidebar-v-resize:hover, #sidebar-v-resize.dragging {
    background: rgba(122, 162, 247, 0.1);
  }
  #sidebar-v-resize:hover .sidebar-v-resize-grip,
  #sidebar-v-resize.dragging .sidebar-v-resize-grip,
  #sidebar-v-resize:focus-visible .sidebar-v-resize-grip {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg-light), 0 0 0 5px rgba(122, 162, 247, 0.2);
    transform: scaleX(1.08);
  }
  #sidebar-v-resize:focus-visible {
    background: rgba(122, 162, 247, 0.12);
  }
  .recent-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    margin-bottom: 2px;
    transition: background 0.15s, border-color 0.15s;
    border-left: 3px solid transparent;
  }
  .recent-item:hover { background: var(--bg-lighter); }
  .recent-item.reviewing {
    background: var(--bg-lighter);
    border-left-color: var(--accent);
  }
  .recent-item.active-session {
    background: linear-gradient(90deg, rgba(116, 215, 199, 0.08), rgba(116, 215, 199, 0.015) 42%, transparent);
  }
  .recent-item.active-session:not(.reviewing):not(.pinned) {
    border-left-color: rgba(116, 215, 199, 0.72);
  }
  .recent-item.pinned {
    border-left-color: var(--yellow);
    border-top: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s, border-top-color 0.15s;
  }
  .recent-item.pinned .pin-icon {
    display: inline;
    color: var(--yellow);
    font-size: 10px;
    margin-right: 3px;
  }
  .recent-item .pin-icon { display: none; }
  .recent-item .recent-msg {
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    margin-bottom: 2px;
  }
  .recent-item .recent-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 3px;
    color: var(--fg-dim);
    font-size: 10px;
    min-width: 0;
  }
  .recent-item .recent-meta .project {
    color: var(--accent);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The branch chip reuses .branch-badge; the meta row manages spacing with its
     own gap, so drop the badge's default margin to keep gaps even. */
  .recent-item .recent-meta .branch-badge { margin-left: 0; }
  .recent-item .recent-model-provider {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    max-width: 116px;
    min-width: 0;
    height: 16px;
    padding: 0 5px;
    border: 1px solid rgba(122, 162, 247, 0.28);
    border-radius: 999px;
    background: rgba(122, 162, 247, 0.10);
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.01em;
  }
  .recent-item .recent-model-provider svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
  }
  .recent-item .recent-model-provider-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recent-item .recent-model-provider-anthropic {
    color: #d97757;
    background: rgba(217, 119, 87, 0.11);
    border-color: rgba(217, 119, 87, 0.30);
  }
  .recent-item .recent-model-provider-openai {
    color: #74d7c7;
    background: rgba(116, 215, 199, 0.10);
    border-color: rgba(116, 215, 199, 0.27);
  }
  .recent-item .recent-model-provider-google {
    color: #8ab4f8;
    background: rgba(138, 180, 248, 0.11);
    border-color: rgba(138, 180, 248, 0.30);
  }
  .recent-item .recent-model-provider-deepseek {
    color: #7aa2ff;
    background: rgba(77, 107, 254, 0.13);
    border-color: rgba(77, 107, 254, 0.34);
  }
  .recent-item .recent-model-provider-moonshot {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.34);
  }
  .recent-item .recent-model-provider-ollama,
  .recent-item .recent-model-provider-mlx {
    color: #a6e3a1;
    background: rgba(166, 227, 161, 0.10);
    border-color: rgba(166, 227, 161, 0.25);
  }
  .recent-item .recent-model-provider-openrouter,
  .recent-item .recent-model-provider-cursor,
  .recent-item .recent-model-provider-xai {
    color: #c0caf5;
    background: rgba(192, 202, 245, 0.09);
    border-color: rgba(192, 202, 245, 0.22);
  }
  .recent-item .recent-model-provider-walle {
    color: #f5a742;
    background: rgba(245, 158, 66, 0.12);
    border-color: rgba(245, 158, 66, 0.32);
  }
  .recent-item .recent-model-provider-opencode {
    color: #e0af68;
    background: rgba(224, 175, 104, 0.11);
    border-color: rgba(224, 175, 104, 0.30);
  }
  .recent-item .recent-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(116, 215, 199, 0.36);
    background: rgba(116, 215, 199, 0.12);
    color: #74d7c7;
    font-size: 9px;
    font-weight: 800;
    line-height: 14px;
    letter-spacing: 0.01em;
  }
  .recent-item .recent-active-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 8px rgba(116, 215, 199, 0.70);
  }

  /* Session group view */
  .session-group {
    margin-bottom: 2px;
  }
  /* Filter toolbar */
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .filter-bar .filter-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--fg-dim);
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
  }
  .filter-bar .filter-chip:hover { color: var(--fg); border-color: var(--accent); }
  .filter-bar .filter-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .recent-refreshing-chip {
    padding: 1px 5px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 4px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
  }
  .filter-bar .sort-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
  .filter-select-native {
    display: none;
  }
  .project-filter-combo {
    position: relative;
    min-width: 0;
    flex: 1 1 118px;
    max-width: 190px;
  }
  .filter-select-button {
    width: 100%;
    min-width: 0;
    background: var(--bg);
    color: var(--fg-dim);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 10px;
    line-height: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .filter-select-button:hover,
  .filter-select-button[aria-expanded="true"] {
    color: var(--fg);
    border-color: var(--accent);
    background: rgba(122, 162, 247, 0.08);
  }
  .project-filter-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filter-select-caret {
    color: var(--fg-dim);
    font-size: 9px;
    flex-shrink: 0;
  }
  .project-filter-popover {
    position: fixed;
    width: min(420px, calc(100vw - 20px));
    max-width: none;
    max-height: calc(100dvh - 20px);
    z-index: 1200;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .project-filter-popover[hidden] {
    display: none;
  }
  .project-filter-search-wrap {
    margin-bottom: 6px;
  }
  .project-filter-search {
    width: 100%;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--accent);
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 12px;
    outline: none;
  }
  .project-filter-results {
    min-height: 0;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 2px;
  }
  .project-filter-option {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--fg);
    border-radius: 7px;
    padding: 7px 8px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .project-filter-option:hover,
  .project-filter-option.highlighted {
    background: rgba(122, 162, 247, 0.14);
  }
  .project-filter-option.selected {
    background: rgba(122, 162, 247, 0.22);
  }
  .project-filter-option-main {
    min-width: 0;
  }
  .project-filter-option-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: var(--fg);
  }
  .project-filter-option-path {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: var(--fg-dim);
  }
  .project-filter-option-count {
    flex-shrink: 0;
    border: 1px solid rgba(122, 162, 247, 0.28);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(122, 162, 247, 0.08);
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 800;
  }
  .project-filter-empty {
    color: var(--fg-dim);
    font-size: 12px;
    padding: 12px 8px;
  }
  /* Provider-card accordion (collapse-by-default, click-to-expand, one-at-a-time). */
  .pcard-header { cursor: pointer; user-select: none; border-radius: 6px; padding: 4px 6px; margin: -4px -6px; transition: background 0.12s; }
  .pcard-header:hover { background: rgba(255, 255, 255, 0.04); }
  .pcard-header:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pcard-chevron { display: inline-block; font-size: 11px; color: var(--fg-dim); width: 10px; transition: transform 0.18s ease; flex-shrink: 0; }
  .pcard-header[aria-expanded="true"] .pcard-chevron { transform: rotate(90deg); }
  .search-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
  }
  .search-row input { flex: 1; padding-right: 64px; }
  .search-input-wrap { position: relative; flex: 1; display: flex; }
  .search-input-wrap input { flex: 1; }
  .search-count-badge,
  #search-count-badge {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    font-size: 9px; color: var(--fg-dim); pointer-events: none;
    letter-spacing: 0.02em; opacity: 0.75;
  }
  .search-degraded-note,
  #search-degraded-note {
    display: block;
    color: var(--fg-dim);
    font-size: 10px;
    opacity: 0.75;
    margin: -2px 0 6px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Hide the browser-native type="search" clear "X" — we render our own .search-clear-btn */
  .search-input-wrap input[type="search"]::-webkit-search-cancel-button,
  .search-input-wrap input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
  .search-clear-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--fg-dim); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 2px 4px; display: none;
    border-radius: 3px; transition: color 0.15s, background 0.15s;
  }
  .search-clear-btn:hover { color: var(--fg); background: rgba(255,255,255,0.08); }
  .search-row .ai-toggle {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--fg-dim);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .search-row .ai-toggle:hover { color: var(--fg); border-color: var(--accent); }
  .search-row .ai-toggle.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .ai-searching {
    padding: 8px;
    font-size: 11px;
    color: var(--accent);
    text-align: center;
  }
  .search-match-ctx {
    font-size: 10px;
    color: var(--fg-dim);
    padding: 1px 0 1px 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-match-ctx .match-field {
    color: var(--accent);
    font-weight: 600;
    margin-right: 4px;
  }
  .search-match-ctx .match-filter-note {
    color: var(--yellow);
    margin-right: 4px;
  }
  .search-msg-snippet {
    font-size: 10px;
    color: var(--fg-dim);
    padding: 1px 0 1px 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
  }
  .search-msg-snippet .msg-role {
    margin-right: 3px;
  }
  .recent-item mark {
    background: rgba(122, 162, 247, 0.25);
    color: var(--fg);
    border-radius: 2px;
    padding: 0 1px;
  }
  .display-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
  }
  .display-toggle label {
    font-size: 10px;
    color: var(--fg-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .display-toggle input[type="checkbox"] {
    width: auto;
    margin: 0;
  }

  /* Session review panel */
  #review-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  #review-panel.active { display: flex; }

  /* Review header with session info */
  .review-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-light);
  }
  .review-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    min-width: 0;
  }
  .review-header-top .review-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    flex: 0 1 180px;
    min-width: 72px;
  }
  .review-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    min-width: 0;
  }
  .review-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .review-actions .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--fg-dim);
    transition: all 0.15s;
  }
  .review-actions .action-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
  .review-actions .action-btn.primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    font-weight: 600;
  }
  .review-actions .action-btn.primary:hover { opacity: 0.85; }
  .review-actions .action-btn.danger:hover { color: var(--red); border-color: var(--red); }
  .review-actions .action-btn.pinned-active { color: var(--yellow); border-color: var(--yellow); }
  .review-actions .action-btn.active-mode { color: var(--accent); border-color: var(--accent); background: rgba(122,162,247,0.12); }
  .review-actions .review-more-wrap {
    position: relative;
    display: inline-flex;
  }
  .review-actions .review-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-light);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    z-index: 20;
  }
  .review-actions .review-more-wrap.open .review-more-menu {
    display: grid;
    gap: 4px;
  }
  .review-actions .review-more-menu .action-btn {
    width: 100%;
    justify-content: flex-start;
    border-color: transparent;
    background: transparent;
  }
  .review-actions .review-more-menu .action-btn:hover {
    background: rgba(122,162,247,0.12);
    border-color: var(--border);
  }

	  /* Truncate mode */
	  #review-messages.truncate-mode .prompt-turn:not(.setup-turn) .prompt-turn-header,
	  #review-messages.truncate-mode .review-msg.user .msg-header,
	  #review-messages.truncate-mode .review-msg.user.key-msg .msg-header {
	    position: relative;
	    cursor: pointer;
	  }
	  #review-messages.truncate-mode .prompt-turn:not(.setup-turn) .prompt-turn-header::after,
	  #review-messages.truncate-mode .review-msg.user .msg-header::after {
	    content: '✂ Cut from here';
	    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--fg-dim);
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
  }
	  #review-messages.truncate-mode .review-msg.user .msg-header:hover::after {
	    opacity: 1;
	  }
	  #review-messages.truncate-mode .prompt-turn:not(.setup-turn) .prompt-turn-header:hover::after {
	    opacity: 1;
	  }
	  #review-messages.truncate-mode .prompt-turn:not(.setup-turn) .prompt-turn-header:hover,
	  #review-messages.truncate-mode .review-msg.user .msg-header:hover {
	    background: rgba(122,162,247,0.08);
	  }
  /* Marked-for-deletion state */
  #review-messages .review-msg.truncate-remove {
    opacity: 0.3;
    position: relative;
  }
  #review-messages .review-msg.truncate-remove::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(247,118,118,0.06);
    pointer-events: none;
    border-radius: 4px;
  }
  #review-messages .thought-group.truncate-remove {
    opacity: 0.3;
  }
  /* Cut line */
  #review-messages .truncate-cut-line {
    border-top: 2px dashed var(--red);
    margin: 0 18px;
    position: relative;
  }
  #review-messages .truncate-cut-line::after {
    content: '✂ Everything below will be deleted';
    position: absolute;
    top: -10px;
    left: 8px;
    font-size: 10px;
    color: var(--red);
    background: var(--bg);
    padding: 0 6px;
  }
  /* Slash-command invocation row — small badge + the args as the user msg */
  .review-msg.command-invocation .msg-cmd-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(217, 119, 87, 0.15);
    color: #D97757;
    font-size: 11px;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.01em;
    flex-shrink: 0;
  }
  .review-msg.command-invocation .msg-empty {
    color: var(--fg-dim);
    font-style: italic;
    opacity: 0.7;
  }
  /* Skill body / local-cmd output — collapsed-by-default context pill */
  .review-msg.skill-body,
  .review-msg.local-cmd {
    background: var(--bg-light);
    border-left: 2px solid var(--fg-dim);
    cursor: pointer;
    padding: 4px 10px;
    margin: 4px 0;
    font-size: 11px;
    border-radius: 4px;
  }
  .review-msg.skill-body .msg-header,
  .review-msg.local-cmd .msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-dim);
  }
  .review-msg.skill-body .thought-preview,
  .review-msg.local-cmd .thought-preview {
    color: var(--fg-dim);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .review-msg.skill-body .thought-chevron,
  .review-msg.local-cmd .thought-chevron {
    transition: transform 0.15s;
    display: inline-block;
    margin-right: 4px;
    font-size: 9px;
  }
  .review-msg.skill-body.expanded .thought-chevron,
  .review-msg.local-cmd.expanded .thought-chevron {
    transform: rotate(90deg);
  }
  .review-msg.skill-body .msg-text,
  .review-msg.local-cmd .msg-text {
    display: none;
    margin-top: 6px;
    font-size: 12px;
  }
  .review-msg.skill-body.expanded .msg-text,
  .review-msg.local-cmd.expanded .msg-text {
    display: block;
  }
  /* Context-note card (WP-3 §5 R3: skill_load/peer/task_notification/
     harness_context/interrupted/subagent/local_command) — same collapsed-
     by-default contract as the skill-body/local-cmd pills above: the
     multi-KB body (a skill_load card can carry 10–35 KB) is hidden until
     the header is clicked; renderContextNoteHtml already toggles
     .expanded, the chevron rotates with it. */
  .review-msg.context-note .msg-text {
    display: none;
    margin-top: 6px;
    font-size: 12px;
  }
  .review-msg.context-note.expanded .msg-text {
    display: block;
  }
  .review-msg.context-note .thought-chevron {
    transition: transform 0.15s;
    display: inline-block;
    margin-right: 4px;
    font-size: 9px;
  }
  .review-msg.context-note.expanded .thought-chevron {
    transform: rotate(90deg);
  }
  /* Structured-capture tool cards — collapsed-by-default call+result card */
  .review-msg.tool-card {
    background: var(--bg-light);
    border-left: 2px solid var(--fg-dim);
    cursor: pointer;
    padding: 4px 10px;
    margin: 4px 0;
    font-size: 11px;
    border-radius: 4px;
  }
  .review-msg.tool-card .msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-dim);
  }
  .review-msg.tool-card .tool-card-name { font-weight: 600; }
  .review-msg.tool-card .thought-preview {
    color: var(--fg-dim);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .review-msg.tool-card .thought-chevron {
    transition: transform 0.15s;
    display: inline-block;
    margin-right: 4px;
    font-size: 9px;
  }
  .review-msg.tool-card.expanded .thought-chevron { transform: rotate(90deg); }
  .review-msg.tool-card .msg-text { display: none; margin-top: 6px; font-size: 12px; }
  .review-msg.tool-card.expanded .msg-text { display: block; cursor: auto; }
  .review-msg.tool-card .tool-card-status {
    font-size: 10px;
    flex-shrink: 0;
    color: var(--fg-dim);
  }
  /* status dot before the tool name */
  .review-msg.tool-card .tool-card-name::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 1px;
    background: var(--fg-dim);
    opacity: 0.5;
  }
  .review-msg.tool-card[data-status="ok"] .tool-card-name::before { background: var(--green, #4caf50); opacity: 1; }
  .review-msg.tool-card[data-status="error"] .tool-card-name::before { background: var(--red, #f77676); opacity: 1; }
  .review-msg.tool-card[data-status="error"] .tool-card-status { color: var(--red, #f77676); }
  .tool-card-section { margin: 4px 0; }
  .tool-card-section-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    margin-bottom: 2px;
  }
  .tool-card-section pre {
    margin: 0;
    max-height: 280px;
    overflow: auto;
  }
  /* Per-turn token chip (from assistant usage metadata) */
  .prompt-turn-badge.token-chip {
    color: var(--accent, #7aa2f7);
    border-color: rgba(122,162,247,0.35);
  }
  /* Thinking (reasoning) pill — distinct from .thought-group narration */
  .review-msg.thinking-block {
    background: rgba(187, 154, 247, 0.05);
    border-left: 2px dashed var(--purple, #bb9af7);
    cursor: pointer;
    padding: 4px 10px;
    margin: 4px 0;
    font-size: 11px;
    border-radius: 4px;
  }
  .review-msg.thinking-block .msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-dim);
  }
  .review-msg.thinking-block .thought-preview {
    color: var(--fg-dim);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .review-msg.thinking-block .thought-chevron {
    transition: transform 0.15s;
    display: inline-block;
    margin-right: 4px;
    font-size: 9px;
  }
  .review-msg.thinking-block.expanded .thought-chevron { transform: rotate(90deg); }
  .review-msg.thinking-block .msg-text {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    font-style: italic;
    color: var(--fg-dim);
  }
  .review-msg.thinking-block.expanded .msg-text { display: block; cursor: auto; }
  .review-msg.thinking-block.encrypted { cursor: default; opacity: 0.7; }
  /* Compaction divider — full-width separator, not a message bubble */
  .compact-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    user-select: none;
  }
  .compact-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
  }
  .compact-divider-label {
    font-size: 10px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  /* Structured-capture diffs (apply_patch / structuredPatch inside tool cards) */
  .mr-diff-file {
    border: 1px solid var(--border);
    border-radius: 4px;
    margin: 4px 0;
    overflow: hidden;
  }
  .mr-diff-file-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-light);
    cursor: pointer;
    font-size: 11px;
  }
  .mr-diff-op {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(122,162,247,0.15);
    color: var(--accent, #7aa2f7);
  }
  .mr-diff-op.add { background: rgba(158,206,106,0.15); color: var(--green, #9ece6a); }
  .mr-diff-op.delete { background: rgba(247,118,142,0.15); color: var(--red, #f7768e); }
  .mr-diff-path {
    flex: 1;
    font-family: var(--mono, monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .mr-diff-stat { font-size: 10px; color: var(--fg-dim); flex-shrink: 0; }
  .mr-diff-file.collapsed .cr-diff-table { display: none; }
  .mr-diff-file .cr-diff-table { font-size: 11px; }
  /* Structured-capture cards: raw-JSON inspector (hover-revealed {} button) */
  .msg-raw-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--fg-dim);
    font-size: 9px;
    font-family: var(--mono, monospace);
    padding: 0 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
  }
  .review-msg:hover .msg-raw-btn,
  .msg-raw-btn:focus { opacity: 1; }
  .msg-raw-json {
    margin: 6px 0 2px;
    padding: 6px 8px;
    background: var(--bg-dark, rgba(0,0,0,0.25));
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
    color: var(--fg-dim);
  }
  .msg-raw-json.hidden { display: none; }
  .msg-truncation-note {
    color: var(--fg-dim);
    font-style: italic;
    font-size: 10px;
    margin-top: 2px;
  }
  /* Confirm bar */
  #truncate-confirm {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(247,118,118,0.1);
    border-top: 1px solid var(--red);
    font-size: 12px;
    color: var(--fg);
  }
  #truncate-confirm.active { display: flex; }
  #truncate-confirm .truncate-info { flex: 1; }
  #truncate-confirm .truncate-info strong { color: var(--red); }

  .review-info {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    font-size: 11px;
    color: var(--fg-dim);
  }
  .review-info .info-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .review-info .info-item:first-child {
    flex: 1 1 180px;
  }
  .review-info .info-label {
    color: var(--fg-dim);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
  }
  .review-info .info-value { color: var(--fg-dim); }
  .review-info .info-value.path {
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .review-info .info-value.branch { color: var(--green); }

  /* Messages area */
  .review-search-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 18px;
    background: var(--bg-lighter);
    border-top: 1px solid var(--border);
  }
  .review-search-bar input {
    flex: 1;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    outline: none;
  }
  .review-search-bar input:focus { border-color: var(--accent); }
  .review-search-bar button {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-dim);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .review-search-bar button:hover { background: var(--bg); color: var(--fg); }
  .review-search-count { font-size: 11px; color: var(--fg-dim); white-space: nowrap; min-width: 50px; text-align: center; }
  .review-search-highlight { background: rgba(255, 200, 50, 0.35); border-radius: 2px; }
  .review-search-highlight.current { background: rgba(255, 160, 0, 0.6); outline: 1px solid rgba(255, 160, 0, 0.8); }

  #review-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scroll-behavior: smooth;
  }
  #review-messages::-webkit-scrollbar { width: 6px; }
	  #review-messages::-webkit-scrollbar-track { background: transparent; }
	  #review-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
	  #review-messages::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }

	  .conversation-view > .prompt-turn,
	  .conversation-view > .review-msg,
	  .conversation-view > .thought-group,
	  .conversation-view > [data-conversation-state] {
	    flex: 0 0 auto;
	  }
	  .conversation-scroll-viewport,
	  .conversation-turn-list,
	  .conversation-sentinel,
	  .conversation-history-edge-status {
	    flex: 0 0 auto;
	    min-width: 0;
	  }
	  .conversation-scroll-viewport {
	    display: flex;
	    flex-direction: column;
	    min-height: 100%;
	  }
	  .conversation-turn-list {
	    display: flex;
	    flex-direction: column;
	    gap: 0;
	  }
	  .conversation-sentinel {
	    width: 100%;
	    height: 1px;
	    margin-bottom: -1px;
	    pointer-events: none;
	  }
	  .conversation-sentinel[hidden],
	  .conversation-history-edge-status[hidden] {
	    display: none;
	  }
	  /* R9/R10 (docs/conversation-view-provenance-turns-and-scroller-truth-2026-09-19.html
	     §6.6): chrome lives OUTSIDE the scroller as a flex sibling above
	     .conversation-view, and the older-history lane's own sentinel/placeholder
	     replace the estimated-height gap spacer inside .conversation-turn-list. */
	  .conversation-chrome {
	    flex: 0 0 auto;
	    display: flex;
	    flex-direction: column;
	    gap: 6px;
	  }
	  .conversation-chrome:empty {
	    display: none;
	  }
	  /* `display:flex` above beats the UA `[hidden]` rule and this sheet has no
	     global `[hidden] { display: none }`, so without this the
	     `chrome.hidden = true` written when the conversation surface is hidden
	     is inert and the chrome stays pinned above the TERMINAL view. */
	  .conversation-chrome[hidden] {
	    display: none;
	  }
	  .conversation-older-sentinel {
	    flex: 0 0 auto;
	    width: 100%;
	    height: 1px;
	    margin-bottom: -1px;
	    overflow-anchor: none;
	    pointer-events: none;
	  }
	  .conversation-older-placeholder {
	    flex: 0 0 auto;
	    width: 100%;
	    height: 72px;
	    overflow-anchor: none;
	    pointer-events: none;
	    background: linear-gradient(90deg, var(--bg-elevated, rgba(255,255,255,.04)) 25%, rgba(255,255,255,.08) 37%, var(--bg-elevated, rgba(255,255,255,.04)) 63%);
	  }
	  .conversation-older-placeholder[hidden] {
	    display: none;
	  }
	  .conversation-older-failed-banner {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 8px;
	    padding: 8px 12px;
	    font-size: 12px;
	    color: var(--fg-dim);
	  }
	  .conversation-older-failed-banner[hidden] {
	    display: none;
	  }
	  .conversation-older-failed-retry {
	    background: var(--bg-light);
	    border: 1px solid var(--border);
	    border-radius: 6px;
	    color: var(--accent);
	    cursor: pointer;
	    font: inherit;
	    min-height: 28px;
	    padding: 3px 10px;
	  }
	  .conversation-older-failed-retry:focus-visible {
	    outline: 2px solid var(--accent);
	    outline-offset: 2px;
	  }
	  .conversation-history-edge-status {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 8px;
	    min-height: 32px;
	    padding: 4px 10px;
	    color: var(--fg-dim);
	    font-size: 11px;
	    line-height: 16px;
	  }
	  .conversation-history-edge-status[data-state="beginning"] {
	    min-height: 24px;
	    opacity: .72;
	  }
	  .conversation-overflow-load {
	    display: block;
	    margin-top: 10px;
	    padding: 5px 9px;
	    border: 1px solid var(--border);
	    border-radius: 6px;
	    background: var(--bg-light);
	    color: var(--accent);
	    font: inherit;
	    font-size: 11px;
	    cursor: pointer;
	  }
	  .conversation-overflow-load:hover { border-color: var(--accent); color: var(--fg); }
	  .conversation-overflow-load:disabled { cursor: wait; color: var(--fg-dim); }
	  .conversation-loading-spinner {
	    width: 16px;
	    height: 16px;
	    border: 2px solid rgba(122, 162, 247, 0.24);
	    border-top-color: var(--accent, #7aa2f7);
	    border-radius: 50%;
	    animation: spin 0.8s linear infinite;
	    flex: 0 0 auto;
	  }
	  .conversation-loading-label {
	    overflow-wrap: anywhere;
	  }
	  .conversation-loading-heading {
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    gap: 10px;
	  }
	  .conversation-loading-skeleton {
	    display: grid;
	    width: min(720px, calc(100vw - 96px));
	    gap: 8px;
	    margin-top: 12px;
	  }
	  .conversation-loading-skeleton-row {
	    display: block;
	    height: 38px;
	    border: 1px solid var(--border);
	    border-radius: 6px;
	    background: var(--bg-light);
	    opacity: 0.55;
	  }
	  .conversation-loading-skeleton-row:nth-child(2) { width: 88%; }
	  .conversation-loading-skeleton-row:nth-child(3) { width: 72%; }
	  .conversation-prompt-jump-layer {
	    position: absolute;
	    z-index: 12;
	    display: none;
	    justify-content: flex-end;
	    box-sizing: border-box;
	    padding: 0 20px;
	    pointer-events: none;
	  }
	  .conversation-prompt-jump-layer.visible {
	    display: flex;
	  }
	  .conversation-prompt-jump {
	    display: grid;
	    grid-template-columns: auto auto minmax(0, 1fr);
	    align-items: center;
	    gap: 8px;
	    min-width: 0;
	    max-width: min(620px, calc(100% - 16px));
	    min-height: 34px;
	    padding: 6px 10px 6px 8px;
	    border: 1px solid rgba(122, 162, 247, 0.42);
	    border-radius: 7px;
	    background: color-mix(in srgb, var(--bg-panel, #1a1b26) 91%, var(--accent, #7aa2f7) 9%);
	    color: var(--fg, #c0caf5);
	    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	    backdrop-filter: blur(10px);
	    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	    line-height: 1.25;
	    text-align: left;
	    cursor: pointer;
	    pointer-events: auto;
	    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
	  }
	  .conversation-prompt-jump:hover {
	    border-color: rgba(122, 162, 247, 0.72);
	    background: color-mix(in srgb, var(--bg-panel, #1a1b26) 84%, var(--accent, #7aa2f7) 16%);
	    transform: translateY(-1px);
	  }
	  .conversation-prompt-jump:focus-visible {
	    outline: 2px solid var(--accent, #7aa2f7);
	    outline-offset: 2px;
	  }
	  .conversation-prompt-jump-icon {
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    width: 20px;
	    height: 20px;
	    border-radius: 5px;
	    background: color-mix(in srgb, var(--accent, #7aa2f7) 18%, transparent);
	    color: var(--accent, #7aa2f7);
	    font-size: 14px;
	    font-weight: 800;
	    line-height: 1;
	  }
	  .conversation-prompt-jump-label {
	    color: var(--accent, #7aa2f7);
	    font-size: 10px;
	    font-weight: 800;
	    letter-spacing: 0;
	    text-transform: uppercase;
	  }
	  .conversation-prompt-jump-preview {
	    min-width: 0;
	    overflow: hidden;
	    color: var(--fg, #c0caf5);
	    font-size: 11.5px;
	    font-weight: 600;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	  }
	  .conversation-prompt-jump-layer.compact .conversation-prompt-jump-preview {
	    display: none;
	  }
	  .conversation-prompt-jump-layer.compact .conversation-prompt-jump {
	    grid-template-columns: auto auto;
	  }
	  html[data-theme="light"] .conversation-prompt-jump {
	    border-color: rgba(59, 102, 224, 0.34);
	    background: rgba(255, 255, 255, 0.96);
	    color: #172033;
	    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	  }
	  html[data-theme="light"] .conversation-prompt-jump:hover {
	    border-color: rgba(59, 102, 224, 0.58);
	    background: #f7f9ff;
	  }
	  html[data-theme="light"] .conversation-prompt-jump-preview {
	    color: #172033;
	  }
	  @media (max-width: 720px) {
	    .conversation-prompt-jump-layer { padding-inline: 12px; }
	    .conversation-prompt-jump { max-width: calc(100% - 8px); }
	    .conversation-prompt-jump-preview { display: none; }
	    .conversation-prompt-jump { grid-template-columns: auto auto; }
	  }
	  @media (prefers-reduced-motion: reduce) {
	    .conversation-loading-spinner { animation: none; }
	    .conversation-prompt-jump { transition: none; }
	  }

	  .prompt-turn {
	    margin-bottom: 14px;
	    border: 1px solid rgba(65, 72, 104, 0.75);
	    border-left: 3px solid var(--accent);
	    border-radius: 8px;
	    background: rgba(36, 40, 59, 0.36);
	    overflow: hidden;
	  }
	  .prompt-turn.running-prompt-turn {
	    border-left-color: var(--green, #9ece6a);
	  }
	  .prompt-turn.setup-turn {
	    border-left-color: var(--purple, #bb9af7);
	    background: rgba(187, 154, 247, 0.035);
	  }
	  .prompt-turn-header {
	    display: grid;
	    grid-template-columns: auto minmax(0, 1fr) auto;
	    align-items: start;
	    gap: 8px;
	    padding: 8px 10px 8px 8px;
	    cursor: pointer;
	    user-select: none;
	  }
	  .prompt-turn-header:hover { background: rgba(255,255,255,0.025); }
	  .prompt-turn-header:focus-visible {
	    outline: 2px solid var(--accent);
	    outline-offset: -2px;
	  }
	  .prompt-turn-chevron {
	    display: inline-block;
	    margin-top: 17px;
	    color: var(--fg-dim);
	    font-size: 10px;
	    transition: transform 0.15s;
	  }
	  .prompt-turn.expanded .prompt-turn-chevron { transform: rotate(90deg); }
	  .prompt-turn-head-main { min-width: 0; }
	  .prompt-turn-prompt.review-msg {
	    margin: 0;
	    padding: 8px 10px;
	    border-left-width: 2px;
	    border-radius: 6px;
	    background: rgba(122, 162, 247, 0.07);
	  }
	  .prompt-turn-prompt.review-msg.subagent-prompt {
	    border-color: color-mix(in srgb, var(--yellow) 46%, var(--border));
	    background: color-mix(in srgb, var(--yellow) 9%, var(--bg-panel));
	  }
	  .prompt-turn-header .prompt-turn-prompt,
	  .prompt-turn-header .prompt-turn-prompt .msg-text,
	  .prompt-turn-header .prompt-turn-prompt .msg-text * {
	    cursor: text;
	    user-select: text;
	    -webkit-user-select: text;
	  }
	  .prompt-turn-header .prompt-turn-chevron,
	  .prompt-turn-header .prompt-turn-meta,
	  .prompt-turn-header .prompt-turn-prompt .msg-header {
	    cursor: pointer;
	    user-select: none;
	    -webkit-user-select: none;
	  }
	  .prompt-turn-prompt .msg-header { margin-bottom: 5px; }
	  .prompt-turn-meta {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-end;
	    gap: 4px;
	    min-width: 118px;
	    padding-top: 5px;
	  }
	  .prompt-turn-badge {
	    display: inline-flex;
	    align-items: center;
	    min-height: 18px;
	    padding: 1px 7px;
	    border: 1px solid var(--border);
	    border-radius: 999px;
	    color: var(--fg-dim);
	    background: rgba(0, 0, 0, 0.10);
	    font-size: 10.5px;
	    white-space: nowrap;
	  }
	  .prompt-turn-badge.prompt-turn-recency-badge.latest {
	    color: var(--accent, #7aa2f7);
	    border-color: rgba(122, 162, 247, 0.46);
	    background: rgba(122, 162, 247, 0.10);
	  }
	  .prompt-turn-badge.prompt-turn-recency-badge.running {
	    color: var(--green, #9ece6a);
	    border-color: rgba(158, 206, 106, 0.50);
	    background: rgba(158, 206, 106, 0.12);
	  }
	  .prompt-turn-alert.warning {
	    color: var(--yellow);
	    border-color: rgba(224, 175, 104, 0.48);
	    background: rgba(224, 175, 104, 0.08);
	  }
	  .prompt-turn-alert.error {
	    color: var(--red);
	    border-color: rgba(247, 118, 118, 0.55);
	    background: rgba(247, 118, 118, 0.08);
	  }
	  .prompt-turn-response {
	    display: none;
	    padding: 0 12px 12px 29px;
	    border-top: 1px solid rgba(65, 72, 104, 0.45);
	  }
	  .prompt-turn.expanded .prompt-turn-response { display: block; }
	  .prompt-turn-response > .review-msg,
	  .prompt-turn-response > .thought-group {
	    margin-top: 8px;
	    margin-bottom: 0;
	  }
	  .prompt-turn-empty,
	  .prompt-turn-setup-title {
	    color: var(--fg-dim);
	    font-size: 12px;
	    padding: 8px 10px;
	  }
	  .prompt-turn-setup-title {
	    color: var(--purple, #bb9af7);
	    font-weight: 600;
	  }
	  /* A turn whose prompt entry is missing from its record (or rendered to nothing) says so: the
	     header is never empty (design D-7a). Muted like .prompt-turn-empty. */
	  .prompt-turn-prompt-unavailable {
	    color: var(--fg-dim);
	    font-size: 12px;
	    font-style: italic;
	    padding: 8px 10px;
	  }
	  .prompt-turn-empty.dim { opacity: 0.7; font-style: italic; }
	  .prompt-turn-empty.running { color: var(--green, #9ece6a); }
	  /* D-6: every turn card keeps its DOM node but the browser skips rendering it offscreen. */
	  .prompt-turn {
	    content-visibility: auto;
	    contain-intrinsic-size: auto 120px;
	  }
	  /* D-6: the elided middle of a huge turn is one row, never a silent drop. */
	  .conversation-elided-row {
	    display: block;
	    margin: 8px 0 0;
	    padding: 6px 10px;
	    width: 100%;
	    text-align: left;
	    color: var(--fg-dim);
	    background: transparent;
	    border: 1px dashed var(--border);
	    border-radius: 6px;
	    font: inherit;
	    font-size: 12px;
	    cursor: pointer;
	  }
	  .conversation-elided-row:hover { color: var(--fg); border-color: var(--accent, #7aa2f7); }
	  .conversation-elided-row[disabled] { cursor: progress; opacity: 0.6; }
	  /* D-8: compaction is a boundary in the timeline, not a turn card. */
	  .conversation-compaction {
	    margin: 6px 0 18px;
	    content-visibility: auto;
	    contain-intrinsic-size: auto 48px;
	  }
	  .conversation-compaction-divider {
	    display: flex;
	    align-items: center;
	    gap: 10px;
	    color: var(--fg-dim);
	    font-size: 11.5px;
	    letter-spacing: 0.02em;
	  }
	  .conversation-compaction-divider::before,
	  .conversation-compaction-divider::after {
	    content: '';
	    flex: 1 1 auto;
	    border-top: 1px solid var(--border);
	  }
	  .conversation-compaction-summary { margin: 6px 0 0; font-size: 12px; color: var(--fg-dim); }
	  .conversation-compaction-summary > summary { cursor: pointer; width: fit-content; margin: 0 auto; }
	  .conversation-compaction-summary-body {
	    margin-top: 8px;
	    padding: 8px 12px;
	    border: 1px solid var(--border);
	    border-radius: 8px;
	    color: var(--fg);
	    background: rgba(36, 40, 59, 0.36);
	  }
	  .conversation-compaction-truncated { margin-top: 6px; font-style: italic; color: var(--fg-dim); }
	  .conversation-compaction-extra > .review-msg { margin-top: 8px; }
	  .conversation-compaction-inline { margin: 10px 0; }
	  /* D-9: the turn outline panel lives in the chrome, outside the scroller. */
	  .conversation-outline { border-bottom: 1px solid var(--border); font-size: 12px; }
	  .conversation-outline > summary { cursor: pointer; padding: 4px 10px; color: var(--fg-dim); }
	  .conversation-outline-list {
	    list-style: none;
	    margin: 0;
	    padding: 0 4px 6px;
	    max-height: 220px;
	    overflow-y: auto;
	  }
	  .conversation-outline-row {
	    display: flex;
	    gap: 8px;
	    width: 100%;
	    padding: 3px 8px;
	    background: transparent;
	    border: 0;
	    border-radius: 4px;
	    color: var(--fg);
	    font: inherit;
	    text-align: left;
	    cursor: pointer;
	  }
	  .conversation-outline-row:hover { background: rgba(122, 162, 247, 0.10); }
	  .conversation-outline-row .outline-ordinal { flex: 0 0 34px; color: var(--fg-dim); text-align: right; }
	  .conversation-outline-row .outline-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	  .conversation-outline-row .outline-time { flex: 0 0 auto; color: var(--fg-dim); }
	  .conversation-outline-row.compaction .outline-preview { font-style: italic; color: var(--fg-dim); }

	  /* Scroll to bottom button */
	  .scroll-bottom-btn {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent, #7aa2f7);
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
  }
  .scroll-bottom-btn:hover { transform: scale(1.1); }
  .scroll-bottom-btn.visible { display: flex; }

  .terminal-current-prompt-chip {
    position: absolute;
    left: 50%;
    top: 10px;
    z-index: 12;
    display: none;
    align-items: center;
    gap: 8px;
    max-width: min(760px, calc(100% - 48px));
    min-width: min(260px, calc(100% - 48px));
    padding: 0;
    border: 1px solid rgba(122, 162, 247, 0.42);
    border-radius: 7px;
    background: rgba(20, 22, 36, 0.95);
    color: var(--fg, #c0caf5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    transform: translateX(-50%);
    font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    backdrop-filter: blur(8px);
    user-select: none;
  }
  .terminal-current-prompt-chip.visible { display: flex; }
  .terminal-current-prompt-chip:hover {
    border-color: rgba(122, 162, 247, 0.68);
    background: rgba(27, 30, 48, 0.97);
  }
  .terminal-current-prompt-primary {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }
  .terminal-current-prompt-primary:focus-visible {
    outline: 2px solid var(--accent, #7aa2f7);
    outline-offset: -2px;
  }
  .terminal-current-prompt-label {
    flex: 0 0 auto;
    color: var(--accent, #7aa2f7);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .terminal-current-prompt-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;
  }
  .terminal-current-prompt-pos {
    flex: 0 0 auto;
    color: var(--fg-dim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .terminal-current-prompt-jump {
    flex: 0 0 auto;
    padding-left: 8px;
    border-left: 1px solid rgba(122, 162, 247, 0.22);
    color: var(--fg-dim);
    font-size: 11px;
  }
  .terminal-current-prompt-latest {
    flex: 0 0 auto;
    margin-right: 7px;
    padding: 3px 5px;
    border: 1px solid rgba(122, 162, 247, 0.28);
    border-radius: 4px;
    background: transparent;
    color: var(--accent, #7aa2f7);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
  }
  .terminal-current-prompt-latest:hover,
  .terminal-current-prompt-latest:focus-visible {
    border-color: rgba(122, 162, 247, 0.62);
    background: rgba(122, 162, 247, 0.12);
    outline: none;
  }

  /* Prompt navigation */
  .prompt-nav {
    display: inline-flex; align-items: center; gap: 2px; height: 24px;
  }
  .prompt-nav-btn {
    height: 24px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border); color: var(--fg);
    font-size: 11px; padding: 0 6px; border-radius: 4px; cursor: pointer;
    line-height: 1;
  }
  .prompt-nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .prompt-nav-btn:disabled { opacity: 0.25; cursor: default; }
  .prompt-nav-btn:disabled:hover { background: none; color: var(--fg); }
  .prompt-nav-badge {
    height: 24px; display: inline-flex; align-items: center;
    font-size: 11px; color: var(--fg); padding: 0 8px; cursor: pointer;
    border-radius: 4px; white-space: nowrap; user-select: none;
  }
  .prompt-nav-badge:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .prompt-nav-list {
    position: absolute; top: 100%; right: 0; z-index: 50;
    background: var(--bg-light); border: 1px solid var(--border); border-radius: 6px;
    max-height: 300px; overflow-y: auto; min-width: 260px; max-width: 400px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4); padding: 4px 0;
  }
  .prompt-nav-list-item {
    padding: 5px 10px; font-size: 11px; color: var(--fg); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .prompt-nav-list-item:hover { background: rgba(255,255,255,0.06); }
  .prompt-nav-list-item.current { color: var(--accent); font-weight: 600; }
  .prompt-nav-list-item.not-in-buffer { color: var(--fg-dim); cursor: default; }
  .prompt-nav-list-item.not-in-buffer:hover { background: rgba(255,255,255,0.03); }
  .prompt-nav-list-item.latest-unmapped { color: var(--fg); cursor: pointer; }
  .prompt-nav-list-status {
    padding: 10px 12px; font-size: 11px; color: var(--fg-dim);
    white-space: nowrap;
  }
  .prompt-nav-badge-unreachable {
    display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
    background: rgba(224,175,104,0.12); color: #e0af68; vertical-align: baseline;
    letter-spacing: 0.03em; margin-right: 4px; flex-shrink: 0;
  }
  .prompt-nav-badge-latest {
    display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
    background: rgba(122,162,247,0.14); color: var(--accent); vertical-align: baseline;
    letter-spacing: 0.03em; margin-right: 4px; flex-shrink: 0;
  }
  .prompt-nav-list-item.not-in-buffer .prompt-text { color: var(--fg-dim); }

  .review-msg {
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.65;
    word-wrap: break-word;
    position: relative;
  }
  .review-msg.user {
    background: rgba(122, 162, 247, 0.06);
    border-left: 3px solid var(--accent);
  }
  .review-msg.assistant {
    background: rgba(158, 206, 106, 0.04);
    border-left: 3px solid var(--green);
  }

  /* Thought group: consecutive self-thought messages collapsed into one row */
  .thought-group {
    background: rgba(158, 206, 106, 0.015);
    border-left: 3px solid rgba(158, 206, 106, 0.2);
    border-radius: 8px;
    margin-bottom: 4px;
    opacity: 0.6;
  }
  .thought-group:hover { opacity: 0.8; }
  .thought-group.tool-activity-group {
    background: rgba(224, 175, 104, 0.025);
    border-left-color: rgba(224, 175, 104, 0.32);
  }
  .thought-group.tool-activity-group .thought-group-label {
    color: var(--yellow);
  }
  .thought-group.tool-activity-group .thought-group-preview {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 10.5px;
  }
  .thought-group.combined-activity-group {
    background: rgba(224, 175, 104, 0.025);
    border-left-color: rgba(224, 175, 104, 0.36);
  }
  .thought-group.combined-activity-group .thought-group-label {
    color: var(--yellow);
  }
  .thought-group.combined-activity-group .thought-group-preview {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 10.5px;
  }
  .thought-group.codex-warning-group {
    background: rgba(224, 175, 104, 0.025);
    border-left-color: rgba(224, 175, 104, 0.32);
  }
  .thought-group.codex-warning-group .thought-group-label {
    color: var(--yellow);
  }
  .thought-group.codex-warning-group .thought-group-preview {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 10.5px;
  }
  .thought-group.system-activity-group {
    background: rgba(187, 154, 247, 0.025);
    border-left-color: rgba(187, 154, 247, 0.28);
  }
  .thought-group.system-activity-group .thought-group-label {
    color: var(--purple, #bb9af7);
  }
  .thought-group.system-activity-group .thought-group-preview {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 10.5px;
  }
  .thought-group.system-activity-group .thought-group-items .review-msg {
    background: rgba(187, 154, 247, 0.025);
  }
  .thought-group .thought-group-header {
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  .thought-group .thought-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--green);
  }
  .thought-group .thought-group-count {
    font-size: 10px;
    color: var(--fg-dim);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 8px;
  }
  .thought-group .thought-group-preview {
    font-size: 11px;
    color: var(--fg-dim);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .thought-group .thought-group-time {
    font-size: 10px;
    color: var(--fg-dim);
    white-space: nowrap;
    margin-left: 12px;
  }
  .thought-group .thought-chevron {
    font-size: 9px;
    margin-right: 4px;
    display: inline-block;
    transition: transform 0.15s;
  }
  .thought-group.expanded { opacity: 0.85; }
  .thought-group.expanded .thought-chevron { transform: rotate(90deg); }
  .thought-group .thought-group-items {
    display: none;
    padding: 0 8px 8px;
  }
  .thought-group.expanded .thought-group-items { display: block; }
  .thought-group .thought-group-items .review-msg {
    margin-bottom: 2px;
    border-left: none;
    background: rgba(158, 206, 106, 0.02);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
  }
  .thought-group .thought-group-items .review-msg .msg-header {
    margin-bottom: 2px;
  }
  .thought-group.tool-activity-group .thought-group-items .review-msg {
    background: rgba(224, 175, 104, 0.025);
  }
  .thought-group.codex-warning-group .thought-group-items .review-msg {
    background: rgba(224, 175, 104, 0.025);
  }
  .codex-warning-item .msg-role {
    color: var(--yellow);
  }
  .codex-warning-item .msg-header {
    gap: 8px;
  }
  .codex-warning-item .thought-preview {
    color: var(--fg-dim);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .codex-warning-repeat {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(224, 175, 104, 0.14);
    border: 1px solid rgba(224, 175, 104, 0.28);
    color: var(--yellow);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }
  .thought-group .tool-result-item .msg-text {
    color: var(--fg-dim);
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 11.5px;
  }

  /* Summary/system messages */
  .review-msg.summary {
    background: rgba(187, 154, 247, 0.04);
    border-left: 3px solid rgba(187, 154, 247, 0.3);
    opacity: 0.65;
    margin-bottom: 4px;
    padding: 0;
  }
  .review-msg.summary .msg-header {
    margin-bottom: 0;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
  }
  .review-msg.summary .msg-header:hover { opacity: 1; }
  .review-msg.summary .msg-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 4px;
  }
  .review-msg.summary .msg-role { color: var(--purple, #bb9af7); }
  .review-msg.summary .msg-text {
    display: none;
    padding: 0 12px 8px;
    font-size: 12px;
    opacity: 0.85;
  }
  .review-msg.summary.expanded { opacity: 0.85; }
  .review-msg.summary.expanded .msg-text { display: block; }
  .review-msg.summary .thought-preview {
    font-size: 11px;
    color: var(--fg-dim);
    font-style: italic;
    margin-left: 8px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
    display: inline-block;
    vertical-align: middle;
  }
  .review-msg.summary .thought-chevron {
    font-size: 9px;
    margin-right: 4px;
    display: inline-block;
    transition: transform 0.15s;
  }
  .review-msg.summary.expanded .thought-chevron { transform: rotate(90deg); }

  /* Key conversation: user + substantial Claude responses */
  .review-msg.user.key-msg {
    background: rgba(122, 162, 247, 0.10);
    border-left: 4px solid var(--accent);
  }
  .review-msg.assistant.key-msg {
    background: rgba(158, 206, 106, 0.07);
    border-left: 4px solid var(--green);
  }
  .review-msg.walle-error-msg {
    background: rgba(247, 118, 142, 0.08);
    border-left: 4px solid var(--red);
  }
  .review-msg.walle-error-msg .msg-role {
    color: var(--red);
  }

  .review-msg .msg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  .review-msg .msg-role {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .review-msg.user .msg-role { color: var(--accent); }
  .review-msg.subagent-prompt .msg-role { color: var(--yellow); }
  .review-msg.assistant .msg-role { color: var(--green); }
  /* WP-3 (§5 R3): context-note card label chip (peer/task_notification/
     local_command/skill_load/compaction/interrupted/harness_context/subagent). */
  .review-msg.context-note .context-note-label { font-weight: 600; }
  /* WP-3 (§5 R4): reasoning_hidden's inert pill copy — same visual treatment
     as the encrypted variant it reuses (.thinking-block.encrypted), styled
     so its (non-clickable) preview text isn't mistaken for the expandable
     one. */
  .review-msg.thinking-block.encrypted .thought-preview { font-style: italic; }
  .review-msg .msg-time {
    font-size: 10px;
    color: var(--fg-dim);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  .review-msg .msg-copy-btn {
    appearance: none;
    margin: 0 0 0 auto;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--fg-dim);
    font: 500 10px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
  }
  .review-msg .msg-copy-btn + .msg-time { margin-left: 8px; }
  .review-msg:hover .msg-copy-btn,
  .review-msg:focus-within .msg-copy-btn,
  .review-msg .msg-copy-btn.copied,
  .review-msg .msg-copy-btn.failed { opacity: 1; }
  .review-msg .msg-copy-btn:hover,
  .review-msg .msg-copy-btn:focus-visible {
    color: var(--fg);
    border-color: var(--border);
    background: var(--bg-hover);
    outline: none;
  }
  .review-msg .msg-copy-btn:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .review-msg .msg-copy-btn.copied { color: var(--green); }
  .review-msg .msg-copy-btn.failed { color: var(--red); }
  @media (hover: none) {
    .review-msg .msg-copy-btn { opacity: 1; }
  }
  .review-msg .msg-text {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    color: var(--fg);
    user-select: text;
    -webkit-user-select: text;
  }
  .review-msg .msg-text img {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    max-height: min(68vh, 720px);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 8px 0;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .review-msg .msg-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .review-msg .msg-image-attachment {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    width: min(220px, 100%);
    max-width: 100%;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    color: var(--fg);
    text-decoration: none;
    line-height: 1.2;
  }
  .review-msg .msg-image-attachment:hover {
    border-color: rgba(122,162,247,0.55);
    background: rgba(122,162,247,0.08);
  }
  .review-msg .msg-image-attachment img {
    width: 100%;
    height: 156px;
    border-radius: 6px;
    object-fit: contain;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .review-msg .msg-image-attachment span {
    min-width: 0;
    overflow: hidden;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .review-msg .msg-image-attachment .msg-image-attachment-status {
    display: none;
    color: var(--fg-dim);
    font-weight: 500;
  }
  .review-msg .msg-image-attachment.restoring {
    cursor: progress;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }
  .review-msg .msg-image-attachment.restoring img {
    opacity: 0.42;
  }
  .review-msg .msg-image-attachment.restoring .msg-image-attachment-status {
    display: block;
  }
  .review-msg .msg-text > p:first-child { margin-top: 0; }
  .review-msg .msg-text > p:last-child { margin-bottom: 0; }
  .review-msg .msg-text p { margin: 0.5em 0; }
  .review-msg .msg-text h1, .review-msg .msg-text h2, .review-msg .msg-text h3,
  .review-msg .msg-text h4, .review-msg .msg-text h5 {
    color: var(--fg);
    margin: 1em 0 0.4em;
    font-weight: 600;
    line-height: 1.3;
  }
  .review-msg .msg-text h1 { font-size: 1.3em; }
  .review-msg .msg-text h2 { font-size: 1.15em; }
  .review-msg .msg-text h3 { font-size: 1.05em; }
  .review-msg .msg-text h4 { font-size: 1em; color: var(--fg-dim); }
  .review-msg .msg-text ul, .review-msg .msg-text ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
  }
  .review-msg .msg-text li { margin: 0.2em 0; }
  .review-msg .msg-text li > p { margin: 0.2em 0; }
  /* Tables */
  .review-msg .msg-text table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    display: block;
  }
  .review-msg .msg-text th, .review-msg .msg-text td {
    border: 1px solid var(--border);
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
  }
  .review-msg .msg-text th {
    background: var(--bg-lighter);
    font-weight: 600;
    color: var(--fg);
  }
  .review-msg .msg-text td {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 11.5px;
  }
  .review-msg .msg-text tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
  /* Blockquote */
  .review-msg .msg-text blockquote {
    border-left: 3px solid var(--border);
    margin: 0.5em 0;
    padding: 0.3em 0.8em;
    color: var(--fg-dim);
  }
  /* Links */
  .review-msg .msg-text a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(122, 162, 247, 0.4);
  }
  .review-msg .msg-text a:hover { text-decoration-color: var(--accent); }
  /* Horizontal rule */
  .review-msg .msg-text hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1em 0;
  }
  /* Collapsible long messages */
  .review-msg .msg-text.collapsed {
    max-height: 300px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 240px, transparent 300px);
    mask-image: linear-gradient(to bottom, black 240px, transparent 300px);
  }
  .review-msg .msg-expand {
    display: none;
    margin-top: 6px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  .review-msg .msg-expand:hover { text-decoration: underline; }
  .review-msg .msg-expand.visible { display: inline-block; }
  /* Inline code */
  .review-msg .msg-text code {
    background: var(--bg-lighter);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
  }
  /* Code blocks */
  .review-msg .msg-text pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
    line-height: 1.5;
  }
  .review-msg .msg-text pre code {
    background: none;
    padding: 0;
    font-size: 12px;
  }
  /* Tool use badges */
  .tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-lighter);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--yellow);
    font-family: 'SF Mono', monospace;
    margin: 3px 0;
  }
  /* Message counter pill */
  .review-msg-counter {
    text-align: center;
    padding: 4px;
    font-size: 10px;
    color: var(--fg-dim);
    opacity: 0.5;
  }

  /* Insights panel */
  #insights-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
  #insights-panel.active { display: flex; }
  .insights-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
  }
  .insights-toolbar h3 { font-size: 14px; flex: 1; }
  #insights-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
  }
  .insight-section {
    margin-bottom: 24px;
  }
  .insight-section h4 {
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .insight-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
  }
  .insight-card .card-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
  }
  .insight-card .card-desc {
    font-size: 12px;
    color: var(--fg-dim);
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .insight-card .card-meta {
    font-size: 10px;
    color: var(--fg-dim);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .insight-card .card-meta .tag {
    background: var(--bg-lighter);
    padding: 1px 6px;
    border-radius: 3px;
  }
  .group-card {
    border-left: 3px solid var(--accent);
  }
  .group-card .card-count {
    background: var(--accent);
    color: #1a1b26;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
  }
  .skill-card {
    border-left: 3px solid var(--green);
  }
  .skill-card.priority-high { border-left-color: var(--red); }
  .skill-card.priority-medium { border-left-color: var(--yellow); }
  .skill-card .priority-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: 6px;
  }
  .skill-card .priority-badge.high { background: rgba(247,118,142,0.2); color: var(--red); }
  .skill-card .priority-badge.medium { background: rgba(224,175,104,0.2); color: var(--yellow); }
  .skill-card .priority-badge.low { background: rgba(158,206,106,0.2); color: var(--green); }
  .skill-card .create-skill-btn {
    background: var(--green);
    color: #1a1b26;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-top: 8px;
  }
  .skill-card .create-skill-btn:hover { opacity: 0.85; }
  .insight-bullet {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg);
    border-left: 2px solid var(--fg-dim);
    margin-bottom: 6px;
    background: var(--bg);
    border-radius: 0 4px 4px 0;
  }
  .progress-log {
    padding: 10px;
    font-family: 'SF Mono', monospace;
    font-size: 11px;
    color: var(--fg-dim);
    line-height: 1.8;
  }
  .progress-log .line { color: var(--accent); }
  .progress-log .line::before { content: '> '; color: var(--fg-dim); }
  .insights-toggle {
    font-size: 11px;
    color: var(--fg-dim);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
  }
  .insights-toggle input { margin: 0; cursor: pointer; }
  .insights-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
  }
  .stat-card {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
  }
  .stat-card .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
  }
  .stat-card .stat-label {
    font-size: 10px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  .rec-card {
    border-left: 3px solid var(--cyan, var(--accent));
  }
  .rec-card.impact-high { border-left-color: var(--red); }
  .rec-card.impact-medium { border-left-color: var(--yellow); }
  .rec-card.impact-low { border-left-color: var(--green); }
  .rec-card .impact-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: 6px;
  }
  .rec-card .impact-badge.high { background: rgba(247,118,142,0.2); color: var(--red); }
  .rec-card .impact-badge.medium { background: rgba(224,175,104,0.2); color: var(--yellow); }
  .rec-card .impact-badge.low { background: rgba(158,206,106,0.2); color: var(--green); }
  .rec-card .rec-type {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-lighter);
    margin-right: 6px;
  }
  .rec-card .rec-actionable {
    font-size: 11px;
    color: var(--accent);
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(122,162,247,0.08);
    border-radius: 4px;
  }
  .internal-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(128,128,128,0.2);
    color: var(--fg-dim);
    margin-left: 6px;
  }
  .insight-card.is-internal {
    opacity: 0.7;
    border-left-color: var(--fg-dim);
  }

  /* Tab bar */
  #tabbar {
    display: flex;
    height: var(--tab-height);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    align-items: flex-end;
  }
  #tabbar-pinned-start {
    display: flex;
    align-items: flex-end;
    height: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }
  #tabbar-scroll {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    align-items: flex-end;
    height: 100%;
    scroll-behavior: smooth;
  }
  /* Soft edge fade: tabs dissolve to transparent at a scrollable edge via a
     mask gradient — replacing the old boxed ‹ › chevrons + accent inner-shadow,
     which created a hard seam against the rounded tabs. Navigation: wheel/
     trackpad scroll + the ⊞ N ▾ jump-to-tab dropdown. The mask is anchored to
     the visible box, so the fade stays at the edges as content scrolls under it. */
  #tabbar-scroll.can-scroll-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
    mask-image: linear-gradient(to right, transparent 0, #000 32px);
  }
  #tabbar-scroll.can-scroll-right {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
    mask-image: linear-gradient(to left, transparent 0, #000 32px);
  }
  #tabbar-scroll.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
  #tabbar-scroll::-webkit-scrollbar { height: 0; }
  .tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 32px;
    font-size: 12px;
    color: var(--fg-dim);
    background: var(--bg);
    border: 1px solid transparent;
    border-bottom: none;
    cursor: pointer;
    white-space: nowrap;
    /* Sprint 2: bump min-width 60→120 so tabs always have ~16 chars of
       readable title before truncation. Below 120 the tab strip falls back
       to horizontal scroll (#tabbar-scroll), which is preferable to
        unreadable 78–87px crushed labels. */
    min-width: 120px;
    max-width: 240px;
    flex-shrink: 0.4;
    border-radius: 6px 6px 0 0;
    /* Keep selection a paint-only transition. Animating flex/width while the
       active tab changes leaves a sibling's visual label over the target tab's
       pointer hitbox for a frame. */
    transition: color 0.1s, background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
  }
  .tab .tab-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .tab > .branch-badge { max-width: 64px; }
  .tab.tab-title-clipped > .branch-badge { display: none; }
  .tab.pinned-tab {
    flex: 0 0 auto;
    min-width: 86px;
  }
  .tab.pinned-tab::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0.75;
    flex: 0 0 auto;
  }
  .tab.pinned-tab .tab-label { flex: 0 0 auto; }
  .tab:hover { color: var(--fg); background: var(--bg-light); }
  .tab.active {
    color: var(--fg);
    background: var(--bg-light);
    border-color: var(--border);
    /* The session you are IN is the one title that must stay readable. Every tab
       shares the 120px floor above, of which the icon, lifecycle chip and close
       button leave ~29px — a single character. So the active tab sizes to its own
       content instead of shrinking with the rest; it is still capped by the shared
       max-width, and the strip scrolls, which this file already prefers over
       unreadable crushed labels. Deliberately NOT `overflow: visible` on the label
       (see below): that paints the title over the tab's own chip and its
       neighbour instead of giving it room. */
    flex: 0 0 auto;
  }
  .tab.active .tab-label {
    /* An active label is still a tab child, not a floating overlay. */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tab.running,
  .tab.resuming,
  .tab.waiting {
    border-color: color-mix(in srgb, var(--tab-status-color, var(--yellow)) 42%, var(--border));
  }
  .tab.running::before,
  .tab.resuming::before,
  .tab.waiting::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    flex: 0 0 auto;
  }
  .tab.running {
    --tab-status-color: var(--green);
  }
  .tab.running::before {
    background: var(--green);
    animation: dot-blink 1.5s ease-in-out infinite;
  }
  .tab.resuming {
    --tab-status-color: var(--yellow);
  }
  .tab.resuming::before {
    width: 7px;
    height: 7px;
    background: transparent;
    border: 1px solid var(--yellow);
    border-top-color: transparent;
    animation: resuming-spin 1s linear infinite;
  }
  .tab.stale {
    --tab-status-color: var(--fg-dim);
    border-style: dashed;
    border-color: var(--border);
  }
  .tab.stale::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px dashed var(--fg-dim);
  }
  .tab.waiting {
    --tab-status-color: var(--yellow);
    animation: tab-pulse 2s ease-in-out infinite;
  }
  .tab.waiting::before {
    background: var(--yellow);
    animation: dot-blink 1.5s ease-in-out infinite;
  }
  @keyframes tab-pulse {
    0%, 100% { border-color: var(--border); }
    50% { border-color: var(--yellow); }
  }
  @keyframes dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .tab[draggable="true"] { cursor: grab; }
  .tab[draggable="true"]:active { cursor: grabbing; }
  .tab.tab-drag-over { border-left: 2px solid var(--accent); }
  .tab.tab-drop-after { border-right: 2px solid var(--accent); }
  .tab .tab-icon {
    color: var(--green, #9ece6a);
    font-size: 10px;
    flex-shrink: 0;
  }
  /* Declutter: fold the separate status dot into ONE agent glyph (tinted by status)
     and calm the active tab (subtle bottom accent instead of a loud colored border). */
  .tab.running::before, .tab.resuming::before, .tab.waiting::before { display: none !important; }
  .tab.running, .tab.resuming, .tab.waiting { border-color: var(--border); }
  .tab.waiting { animation: none; }
  .tab.running .provider-icon { color: var(--green) !important; }
  .tab.waiting .provider-icon,
  .tab.resuming .provider-icon { color: var(--yellow) !important; animation: dot-blink 1.6s ease-in-out infinite; }
  .tab.active { position: relative; box-shadow: none; }
  .tab.active::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
  }
  .tab .close-tab {
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.1s, opacity 0.1s;
  }
  .tab:hover .close-tab { opacity: 0.5; }
  .tab .close-tab:hover { opacity: 1; background: rgba(255,255,255,0.1); }
  .tab-add {
    width: 28px;
    height: 24px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    border-radius: 6px;
    /* Ghost style to match the ‹ › scroll chevrons (box only on hover) so the
       right edge of the tab nav reads as one calm group, not boxed buttons. */
    border: 1px solid transparent;
    transition: all 0.15s;
  }
  .tab-add:hover { color: var(--fg); background: rgba(255,255,255,0.08); border-color: var(--border); }
  .tab-context-menu {
    position: fixed;
    z-index: 200;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    min-width: 170px;
    padding: 4px 0;
  }
  .tab-context-menu .ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--fg-dim);
    cursor: pointer;
    white-space: nowrap;
  }
  .tab-context-menu .ctx-item:hover { background: rgba(255,255,255,0.08); color: var(--fg); }
  .tab-context-menu .ctx-item .ctx-key {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.4;
  }
  .tab-context-menu .ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
  }
  /* Tab-count / jump-to-tab chip. Lives in the left tab-navigation group (next to
     Overview), so the divider sits on its RIGHT to separate the pinned nav from the
     scrolling tabs. Bottom-aligned to the tab baseline; compact for the ⊞ N ▾ form. */
  .tab-overflow-btn {
    padding: 0 8px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    gap: 4px;
    color: var(--fg-dim);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border);
    margin-right: 2px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
  }
  .tab-overflow-btn:hover { color: var(--fg); background: var(--bg-light); }
  .tab-overflow-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .tab-overflow-btn.visible { display: flex; }
  .tab-overflow-icon {
    color: var(--fg-dim);
    font-size: 13px;
    line-height: 1;
  }
  #tab-overflow-count {
    color: var(--fg);
    font-weight: 700;
  }
  .tab-overflow-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 220px;
    max-width: 340px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
  }
  .tab-overflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--fg-dim);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tab-overflow-item:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
  .tab-overflow-item.active { color: var(--accent); font-weight: 600; }
  .tab-overflow-item .overflow-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  }
  .tab-overflow-item .overflow-label {
    overflow: hidden; text-overflow: ellipsis; flex: 1;
  }
  .tab-overflow-item .overflow-close {
    opacity: 0; font-size: 14px; padding: 0 2px; flex-shrink: 0;
  }
  .tab-overflow-item:hover .overflow-close { opacity: 0.6; }
  .tab-overflow-item .overflow-close:hover { opacity: 1; }

  /* Terminal container */
  #terminal-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    overflow: hidden;
    position: relative;
  }
  .term-container {
    flex: 1;
    display: none;
    overflow: hidden;
    min-height: 0;
    background: var(--terminal-bg);
    position: relative; /* containing block for .session-esc-banner overlay */
  }
  .term-container.active { display: flex; flex-direction: column; }
  .term-container.warm-retained-hidden {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
  .term-container.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  /* Fit-the-pane (default): the agent grid narrows to the pane, so overflow-x is
     HIDDEN — no horizontal scrollbar. The legacy pin path (CTM_FIT_AGENT_PANE=false)
     re-enables overflow-x:auto on the element from JS so the pinned-wide grid can
     scroll horizontally. overflow-y stays hidden — vertical scrollback is handled by
     xterm 6's .xterm-scrollable-element. */
  /* reader-native-scroller D-1: the live Terminal is opened into .ctm-term-scroller, an in-flow flex item that takes the
     slot .xterm used to fill (so closed == pixel-identical; .xterm keeps flex:1;height:0 below, matched by descendant).
     Open: history-scroller.js adds a .ctm-history-spacer (ordered first) above .xterm and gives .xterm height:100%. The
     scroller is the ONE native scroller of the reader; nothing in the pane ever gets a transform for it. */
  .term-container .ctm-term-scroller {
    flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; overflow-anchor: none; overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .term-container .ctm-term-scroller::-webkit-scrollbar { display: none; }
  /* reader-pinned-prompt-header D-6/D-8: one absolute row over the reader's top row showing the prompt that governs the row under it. It takes no pointer events at all (wheel,
     selection and mousedown reach the reader under it; the click-to-land is a container listener); the right inset leaves the unified scrollbar's 8px lane free. */
  .ctm-reader-prompt-header {
    position: absolute; top: 0; left: 0; right: 8px; z-index: 40; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    pointer-events: none; user-select: none; -webkit-user-select: none; padding-left: 6px; box-sizing: border-box;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Menlo', monospace;
    color: var(--fg-dim, #9a9a9a); background: #3a3a3a;
  }
  .ctm-reader-prompt-header[hidden] { display: none; }
  .ctm-reader-prompt-header-glyph { font-weight: 700; margin-right: 1ch; }
  .ctm-reader-prompt-header-text { overflow: hidden; text-overflow: ellipsis; }
  .ctm-reader-prompt-header-on .ctm-history-affordance-chip { top: calc(var(--ctm-reader-prompt-header-h, 0px) + 6px); }
  /* Conversation view hides the terminal by display:none on .xterm (stream-view.js) -- the empty scroller must not keep its flex share. */
  .term-container .ctm-term-scroller:has(> .xterm[style*="display: none"]) { display: none; }
  /* clip, unlike hidden, is not a scroll container, so focusing xterm's hidden input past the right edge cannot scroll the pane. */
  .term-container .xterm { flex: 1; height: 0; min-height: 0; overflow: clip; background: var(--terminal-bg); }
  .term-container .xterm::-webkit-scrollbar { height: 8px; }
  .term-container .xterm::-webkit-scrollbar-track { background: transparent; }
  .term-container .xterm::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .term-container .xterm::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }
  .term-container .xterm,
  .term-container .xterm-scrollable-element,
  .term-container .xterm-screen {
    color-scheme: var(--theme-color-scheme, dark);
    background: var(--terminal-bg);
  }
  .term-container .xterm-viewport { background: var(--terminal-bg); }
  .term-container.term-grid-overflow .xterm {
    margin-top: auto;
  }
  .term-container .xterm-helper-textarea {
    opacity: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    caret-color: transparent !important;
    resize: none !important;
    overflow: hidden !important;
  }
  #session-attachment-tray {
    flex: 0 0 auto;
    height: var(--session-tray-height, 26px);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
  }
  #tray-provider-slot {
    min-width: 0;
    max-width: min(360px, 42%);
    overflow: hidden;
    color: var(--fg-dim);
    font: 11px/20px 'SF Mono', 'Fira Code', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tray-provider-slot:empty { display: none; }
  #tray-chip-region {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #tray-chip-region:empty { display: none; }
  #tray-chip-region::-webkit-scrollbar { display: none; }
  html[data-theme="light"] #session-attachment-tray { background: var(--bg-panel); }
  html[data-theme="light"] #tray-provider-slot { color: var(--fg-dim); }
  .tray-provider-status[data-state="incomplete"] { color: var(--yellow); }
  .tray-provider-status[data-state="starting"] { color: var(--fg-dim); }
  .tray-attachment-chip {
    display: flex;
  }
  .terminal-attachment-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 158px;
    min-width: 158px;
    height: 20px;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated, var(--bg-light));
    overflow: hidden;
    cursor: pointer;
  }
  .terminal-attachment-chip[data-status="failed"],
  .terminal-attachment-chip[data-status="indeterminate"] {
    border-color: var(--red, #f7768e);
  }
  .terminal-attachment-chip[data-status="unconfirmed"] {
    border-color: var(--yellow, #e0af68);
  }
  .terminal-attachment-chip[data-waiting="true"] {
    border-color: var(--accent);
  }
  .terminal-attachment-chip[data-status="failed"] {
    width: 158px;
  }
  .terminal-attachment-chip[data-confirming="1"] .terminal-attachment-state {
    opacity: 0.78;
  }
  .terminal-attachment-retry {
    min-height: 18px;
    padding: 3px 4px;
    border: 0;
    border-radius: 3px;
    background: rgba(247,118,142,0.95);
    color: #fff;
    font: 700 9px/12px system-ui, sans-serif;
    text-align: center;
    cursor: pointer;
  }
  .terminal-attachment-finalize {
    min-height: 18px;
    padding: 3px 4px;
    border: 0;
    border-radius: 3px;
    background: rgba(247,118,142,0.95);
    color: #fff;
    font: 700 9px/12px system-ui, sans-serif;
    cursor: pointer;
  }
  .terminal-attachment-actions {
    display: none;
    position: fixed;
    z-index: 41;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated, var(--bg-panel));
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
  }
  .terminal-attachment-actions .terminal-attachment-retry,
  .terminal-attachment-actions .terminal-attachment-copy-error,
  .terminal-attachment-remove {
    position: static;
    flex: 1 1 0;
    min-width: 0;
  }
  .terminal-attachment-remove,
  .terminal-attachment-copy-error,
  .terminal-attachment-dismiss {
    min-height: 18px;
    padding: 3px 4px;
    border: 0;
    border-radius: 3px;
    background: rgba(35, 39, 52, 0.94);
    color: #fff;
    font: 700 9px/12px system-ui, sans-serif;
    cursor: pointer;
  }
  .terminal-attachment-dismiss {
    flex: 0 0 16px;
    width: 16px;
    min-height: 16px;
    padding: 0;
    font-size: 12px;
  }
  .terminal-attachment-dismiss:disabled {
    cursor: not-allowed;
    opacity: 0.42;
  }
  .terminal-attachment-reason {
    display: none;
    position: fixed;
    z-index: 41;
    width: max-content;
    min-width: 160px;
    max-width: min(320px, 70vw);
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated, var(--bg-panel));
    color: var(--fg);
    font: 11px/15px system-ui, sans-serif;
    white-space: normal;
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
  }
  .terminal-attachment-inline-reason {
    display: none;
  }
  .tray-attachment-preview {
    display: none;
    position: fixed;
    z-index: 40;
    width: max-content;
    min-width: 160px;
    max-width: min(240px, 70vw);
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated, var(--bg-panel));
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
    pointer-events: none;
  }
  .tray-attachment-preview img {
    display: block;
    width: 100%;
    max-height: min(240px, 40vh);
    object-fit: contain;
  }
  .terminal-attachment-chip:hover .terminal-attachment-actions,
  .terminal-attachment-chip:focus-within .terminal-attachment-actions {
    display: flex;
  }
  .terminal-attachment-chip:hover .tray-attachment-preview,
  .terminal-attachment-chip:focus-within .tray-attachment-preview {
    display: block;
  }
  .terminal-attachment-chip:hover .terminal-attachment-reason,
  .terminal-attachment-chip:focus-within .terminal-attachment-reason {
    display: block;
  }
  .terminal-attachment-chip[data-status="uploading"]::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: terminal-attachment-progress 1s linear infinite;
  }
  @keyframes terminal-attachment-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }
  .terminal-attachment-retry:focus-visible,
  .terminal-attachment-copy-error:focus-visible,
  .terminal-attachment-finalize:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .terminal-attachment-thumb {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    background: var(--bg);
  }
  .terminal-attachment-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
  }
  .terminal-attachment-token,
  .terminal-attachment-state {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .terminal-attachment-token {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--fg);
    font: 600 11px/18px system-ui, sans-serif;
  }
  .terminal-attachment-state {
    flex: 0 0 auto;
    color: var(--fg-muted, var(--muted));
    font: 600 11px/18px system-ui, sans-serif;
  }
  .terminal-attachment-state[data-kind="ok"] { color: var(--green, #9ece6a); }
  .terminal-attachment-state[data-kind="warn"] { color: var(--yellow, #e0af68); }
  .terminal-attachment-state[data-kind="error"] { color: var(--red, #f7768e); }
  .codex-terminal-affordance-layer {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: none;
    pointer-events: none;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Menlo', monospace;
  }
  .codex-terminal-affordance-layer.visible {
    display: block;
  }
  .codex-last-prompt-chip,
  .codex-jump-bottom-chip {
    border: 1px solid rgba(143, 178, 255, 0.34);
    background:
      linear-gradient(135deg, rgba(36, 45, 72, 0.96), rgba(20, 23, 37, 0.92));
    color: var(--fg, #c0caf5);
    box-shadow: 0 12px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
  }
  .codex-last-prompt-chip {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(760px, calc(100% - 48px));
    min-width: min(360px, calc(100% - 48px));
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    text-align: left;
  }
  .codex-last-prompt-chip.visible {
    display: flex;
  }
  .codex-last-prompt-chip:disabled {
    cursor: default;
    opacity: 0.86;
  }
  .codex-last-prompt-chip:hover,
  .codex-jump-bottom-chip:hover {
    border-color: rgba(143, 178, 255, 0.56);
    background:
      linear-gradient(135deg, rgba(48, 61, 96, 0.98), rgba(26, 30, 49, 0.96));
  }
  .codex-last-prompt-chip:disabled:hover {
    border-color: rgba(143, 178, 255, 0.34);
    background:
      linear-gradient(135deg, rgba(36, 45, 72, 0.96), rgba(20, 23, 37, 0.92));
  }
  .codex-last-prompt-label {
    flex: 0 0 auto;
    color: #8fb2ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .codex-last-prompt-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg, #c0caf5);
    font-size: 12px;
    font-weight: 650;
  }
  .codex-jump-bottom-wrap {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: none;
    pointer-events: auto;
  }
  .codex-jump-bottom-wrap.visible {
    display: block;
  }
  .codex-jump-bottom-wrap .codex-jump-bottom-chip {
    position: static;
    transform: none;
  }
  .codex-jump-bottom-chip {
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }
  .codex-jump-bottom-chip.visible {
    display: flex;
  }
  .codex-jump-bottom-chip:disabled {
    cursor: default;
    opacity: 0.86;
  }
  .codex-jump-bottom-chip kbd {
    padding: 1px 5px;
    border: 1px solid rgba(143, 178, 255, 0.28);
    border-radius: 5px;
    background: rgba(12, 14, 24, 0.55);
    color: var(--fg-dim, #9aa5ce);
    font: inherit;
    font-size: 10px;
  }
  .ctm-local-echo-overlay {
    position: absolute;
    z-index: 9;
    display: none;
    pointer-events: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--terminal-fg, #c0caf5);
    background: color-mix(in srgb, var(--terminal-bg, #1a1b26) 76%, transparent);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.2;
  }
  .ctm-local-echo-overlay.codex-native-pending {
    background: var(--terminal-bg, #1a1b26);
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  }
  .ctm-local-echo-overlay.codex-native-pending .ctm-local-echo-token-skill {
    color: #5fafff;
  }
  .ctm-local-echo-overlay.codex-native-pending .ctm-local-echo-token-image {
    color: #ffd700;
  }
  .ctm-local-echo-overlay.codex-native-pending[data-show-cursor="1"]::after {
    content: '';
    display: inline-block;
    width: 0.62em;
    height: 1.05em;
    background: var(--fg, #c0caf5);
    opacity: 0.78;
    vertical-align: -0.16em;
  }
  /* Prevent macOS elastic overscroll from hijacking trackpad scroll inside terminal */
  .term-container .xterm-scrollable-element { overscroll-behavior: contain; }
  /* D-9 (terminal-wheel-delta-scaling-reader-wheel-single-scrollbar-2026-09-25 §5): xterm 6
     draws its scrollbar as a DOM widget (div.scrollbar.vertical inside
     .xterm-scrollable-element, VS Code ScrollableElement), not a native overflow
     scrollbar -- the ::-webkit-scrollbar / scrollbar-width rules below only cover the
     native fallback and never touched the widget (two thumbs overlapped, live 2026-09-25).
     xterm's ScrollableElement still owns wheel + drag-select auto-scroll inside the
     buffer; the unified scrollbar (.ctm-unified-scrollbar, public/js/unified-scrollbar.js)
     is the one visible affordance per pane (unified-terminal-history-scroll D-2). */
  .term-container .xterm-scrollable-element::-webkit-scrollbar { display: none; }
  .term-container .xterm-scrollable-element { scrollbar-width: none; }
  .term-container .xterm-scrollable-element > .scrollbar { display: none; }
  /* Loading overlay for tab-switch snapshot restore */
  .snapshot-loading-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    box-sizing: border-box; padding: clamp(24px, 6vh, 56px) 24px;
    background: rgba(8, 10, 18, 0.94);
    backdrop-filter: blur(3px) saturate(0.72);
    -webkit-backdrop-filter: blur(3px) saturate(0.72);
    pointer-events: none;
  }
  .snapshot-loading-overlay::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: rgba(0, 0, 0, 0.16);
  }
  .snapshot-loading-text {
    position: relative; z-index: 1; display: block;
    box-sizing: border-box; width: min(560px, calc(100% - 24px));
    min-height: 82px; padding: 18px 20px 34px;
    color: var(--fg, #c0caf5); font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    text-align: left; white-space: pre-line; line-height: 1.55;
    background: rgba(27, 32, 52, 0.96);
    border: 1px solid rgba(122, 162, 247, 0.28);
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .snapshot-loading-text::after {
    content: ''; position: absolute; left: 20px; bottom: 16px;
    width: 38%; height: 3px; border-radius: 999px;
    background: var(--accent, #7aa2f7);
    box-shadow: 0 0 14px rgba(122,162,247,0.34);
    animation: snapshot-loading-bar 1.35s ease-in-out infinite;
  }
  /* WI-1: non-blocking resume status chip. Sits top-right of the terminal container while a
     resume is in progress; the terminal content (cached L0 frame, then live bytes) is fully
     visible underneath at all times — this never covers anything. Reuses the same panel/border
     tokens as .snapshot-loading-text so it reads as part of the same design language. */
  .resume-chip {
    position: absolute; top: 8px; right: 10px; z-index: 6;
    display: inline-flex; align-items: center; gap: 6px; max-width: min(320px, calc(100% - 20px));
    box-sizing: border-box; padding: 4px 10px; border-radius: 999px;
    font: 11px/1.3 'SF Mono', 'Fira Code', monospace;
    color: var(--fg, #c0caf5);
    background: rgba(27, 32, 52, 0.92);
    border: 1px solid rgba(122, 162, 247, 0.32);
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    cursor: pointer; pointer-events: auto;
    transition: opacity 200ms ease, background 150ms ease;
  }
  .resume-chip-icon { flex: none; }
  .resume-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .resume-chip.rs-chip-streaming { opacity: 0.72; } /* "Almost ready" fades per the UX spec */
  .resume-chip.rs-chip-awaiting_user { border-color: rgba(224, 175, 104, 0.55); }
  .resume-chip.rs-chip-stalled,
  .resume-chip.rs-chip-error { border-color: rgba(214, 69, 69, 0.5); }
  .resume-chip-flyout {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    width: min(360px, 80vw); box-sizing: border-box; padding: 10px 12px;
    background: rgba(20, 24, 40, 0.98); color: var(--fg, #c0caf5);
    border: 1px solid rgba(122, 162, 247, 0.3); border-radius: 8px;
    font: 12px/1.5 'SF Mono', 'Fira Code', monospace; white-space: pre-line;
    box-shadow: 0 14px 34px rgba(0,0,0,0.4); cursor: default;
  }
  .resume-chip.rs-chip-expanded .resume-chip-flyout { display: block; }
  .resume-chip-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
  html[data-theme="light"] .resume-chip {
    background: rgba(255, 255, 255, 0.94); color: #1a1a1a; border-color: rgba(11, 98, 214, 0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  }
  html[data-theme="light"] .resume-chip-flyout {
    background: rgba(255, 255, 255, 0.98); color: #1a1a1a; border-color: rgba(11, 98, 214, 0.3);
  }
  /* Resume skeleton preview — a dimmed, read-only glimpse of the prior conversation shown
     INSTEAD of a blank terminal while the live session reconnects. Rendered as plain DOM
     (decoupled from the xterm buffer — no seeding, so none of the scatter/ghost/blank-on-seed
     corruption family applies). Fades with the overlay when the live terminal paints. */
  .snapshot-loading-preview {
    position: relative; z-index: 1;
    pointer-events: none; width: min(560px, calc(100% - 24px)); box-sizing: border-box;
    max-height: min(30vh, 180px); overflow: hidden;
    padding: 14px 18px; display: flex; flex-direction: column; gap: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: rgba(18, 23, 38, 0.86);
    border: 1px solid rgba(122, 162, 247, 0.16);
    border-radius: 8px;
  }
  .snapshot-loading-preview .rs-skel-header {
    color: rgba(192, 202, 245, 0.82); font-size: 11px; letter-spacing: 0.04em;
    text-transform: none; margin-bottom: 4px;
    border-bottom: 1px solid rgba(122, 162, 247, 0.14); padding-bottom: 6px;
  }
  .snapshot-loading-preview .rs-skel-line {
    color: rgba(192, 202, 245, 0.58); font-size: 12px; line-height: 1.6;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Action buttons in the codex resume-loading state. The overlay itself is
     pointer-events:none (so it never steals clicks from a live terminal); the
     actions row re-enables pointer events for just the buttons. */
  .snapshot-loading-actions {
    position: relative; z-index: 1;
    pointer-events: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    width: min(560px, calc(100% - 24px));
  }
  /* D-14: the identity line ("branches · Codex · ~/ws/tools · last active 10/14/2026") names the
     session the card is about, above the headline. D-11: the third recovery option is a text link,
     not a fourth equal button. D-12: the paths live in one collapsed Details row. */
  .resume-blocked-identity {
    position: relative; z-index: 1; box-sizing: border-box;
    width: min(560px, calc(100% - 24px));
    color: var(--fg-dim, #565f89); font-size: 11px; line-height: 1.5; text-align: center;
    overflow-wrap: anywhere;
  }
  .resume-blocked-link {
    font-size: 12px; padding: 6px 4px; cursor: pointer;
    background: none; border: none; color: var(--accent, #7aa2f7);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .resume-blocked-link:hover { filter: brightness(1.15); }
  /* The overlay is pointer-events:none, so Details opts back in like the actions row — without it
     a click on the summary falls through to the terminal and Details never opens. */
  .resume-blocked-details {
    position: relative; z-index: 1; box-sizing: border-box; pointer-events: auto;
    width: min(560px, calc(100% - 24px));
    color: var(--fg-muted, #8b94bd); font-size: 11px; line-height: 1.6;
  }
  .resume-blocked-details > summary {
    cursor: pointer; color: var(--fg-dim, #565f89); font-size: 11px; text-align: center;
  }
  .resume-blocked-detail-line { overflow-wrap: anywhere; }
  .snapshot-loading-input-hint,
  .snapshot-loading-detail {
    position: relative; z-index: 1; box-sizing: border-box;
    width: min(560px, calc(100% - 24px));
    margin: 0; padding: 9px 12px; border-radius: 6px;
    font: 12px/1.45 'SF Mono', 'Fira Code', monospace;
  }
  .snapshot-loading-input-hint {
    color: rgba(192, 202, 245, 0.82);
    background: rgba(122, 162, 247, 0.1);
    border: 1px solid rgba(122, 162, 247, 0.22);
  }
  .snapshot-loading-detail {
    max-height: 9.2em; overflow: auto; white-space: pre-wrap; word-break: break-word;
    color: rgba(192, 202, 245, 0.76);
    background: rgba(8, 10, 18, 0.72);
    border: 1px solid rgba(224, 175, 104, 0.28);
  }
  .snapshot-loading-btn {
    font-size: 12px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
    background: var(--bg-lighter, #2a2a3e); color: var(--fg, #c0caf5);
    border: 1px solid var(--border, rgba(255,255,255,0.15)); transition: background 0.15s, border-color 0.15s;
  }
  .snapshot-loading-btn:hover { background: var(--bg, #1a1b26); border-color: var(--accent, #7aa2f7); }
  .snapshot-loading-btn.primary {
    background: var(--accent, #7aa2f7); color: #fff; border-color: var(--accent, #7aa2f7);
  }
  .snapshot-loading-btn.primary:hover { filter: brightness(1.08); }
  .resume-option-strip {
    position: absolute; left: 10px; bottom: 8px; z-index: 13;
    display: flex; align-items: center; gap: 8px;
    max-width: min(60%, 640px); padding: 6px 10px; box-sizing: border-box;
    overflow-x: auto; overflow-y: hidden;
    background: var(--bg-secondary, #1b2034);
    border: 1px solid var(--border, #3b4261); border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
  }
  .resume-option-chip {
    flex: 0 0 auto; min-height: 32px; padding: 5px 10px;
    color: var(--fg, #c0caf5); background: var(--bg-tertiary, #24283b);
    border: 1px solid rgba(122, 162, 247, 0.42); border-radius: 6px;
    cursor: pointer; white-space: nowrap;
  }
  .resume-option-chip:hover,
  .resume-option-chip:focus-visible {
    border-color: var(--accent, #7aa2f7); background: rgba(122, 162, 247, 0.13);
    outline: none;
  }
  .resume-option-chip[disabled] { opacity: 0.62; cursor: progress; }
  /* WI-5: resume_blocked is a STATIC informational/warning card, not a "still loading" spinner —
     no progress bar, and a tone-appropriate border (blue = expected/cross-host, amber = needs
     action) instead of the neutral loading-overlay border. Deliberately NOT red: the enumerated
     deterministic cases are not errors in the alarming sense, just facts about this host. */
  .snapshot-loading-text.is-static::after { display: none; }
  .snapshot-loading-overlay.is-resume-blocked-info .snapshot-loading-text {
    border-color: rgba(122, 162, 247, 0.5);
  }
  .snapshot-loading-overlay.is-resume-blocked-warn .snapshot-loading-text {
    border-color: rgba(224, 175, 104, 0.55);
  }
  @keyframes snapshot-loading-bar {
    0% { transform: translateX(0); opacity: 0.45; }
    50% { transform: translateX(118%); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.45; }
  }
  /* Right-click context menu for terminal copy/paste */
  .term-context-menu {
    position: fixed; z-index: 10000; background: var(--bg-lighter, #2a2a3e);
    border: 1px solid var(--border); border-radius: 6px; padding: 4px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4); min-width: 140px;
  }
  .term-ctx-item {
    padding: 6px 16px; cursor: pointer; font-size: 13px; color: var(--fg, #c0caf5);
  }
  .term-ctx-item:hover { background: var(--accent, #7aa2f7); color: #fff; }
  .term-ctx-item.disabled { opacity: 0.4; pointer-events: none; }

  /* Split pane system */
  .split-container { display: flex; flex: 1; overflow: hidden; }
  .pane-leaf { display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 200px; min-height: 100px; border: 2px solid transparent; transition: border-color 0.15s; }
  .pane-leaf.focused { border-color: var(--accent, #7aa2f7); }
  .pane-leaf > .term-container { display: flex !important; flex-direction: column; flex: 1; }
  .pane-leaf > .term-container.active { display: flex !important; }
  .pane-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--fg-dim); font-size: 13px; background: var(--bg); }
  .pane-close-btn {
    position: absolute; top: 2px; right: 2px; z-index: 20;
    background: rgba(30,30,46,0.85); border: 1px solid rgba(255,255,255,0.15); color: var(--fg-dim);
    width: 20px; height: 20px; border-radius: 3px; cursor: pointer;
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    opacity: 0.7; transition: opacity 0.15s, background 0.15s;
    backdrop-filter: blur(4px);
  }
  .pane-close-btn:hover { opacity: 1; background: rgba(247,118,142,0.8); color: #fff; border-color: rgba(247,118,142,0.5); }
  .pane-divider { flex-shrink: 0; background: var(--border); z-index: 5; }
  .pane-divider.vertical { width: 4px; cursor: col-resize; }
  .pane-divider.horizontal { height: 4px; cursor: row-resize; }
  .pane-divider:hover, .pane-divider:active { background: var(--accent, #7aa2f7); }
  .term-search-bar {
    position: absolute; top: 38px; right: 12px; z-index: 100;
    display: flex; align-items: center; gap: 4px;
    background: var(--bg-lighter); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  .term-search-bar input {
    background: var(--bg); color: var(--fg); border: 1px solid var(--border);
    border-radius: 4px; padding: 3px 8px; font-size: 12px; width: 200px;
    outline: none; font-family: inherit;
  }
  .term-search-bar input:focus { border-color: var(--accent); }
  .term-search-bar .search-count {
    font-size: 11px; color: var(--fg-dim); min-width: 40px; text-align: center;
  }
  .term-search-bar button {
    background: none; border: 1px solid var(--border); color: var(--fg-dim);
    border-radius: 4px; width: 26px; height: 26px; cursor: pointer;
    font-size: 13px; display: flex; align-items: center; justify-content: center;
  }
  .term-search-bar button:hover { background: var(--bg); color: var(--fg); }
  .session-toolbar {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px;
    background: color-mix(in srgb, var(--bg-light) 76%, transparent); border-bottom: 1px solid var(--border);
    flex-shrink: 0; position: relative; z-index: 10;
  }
  .session-intervention-chip {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 420px;
    margin-left: auto; padding-left: 8px; border-left: 1px solid rgba(224,175,104,0.35);
  }
  .session-intervention-status {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--yellow); font-size: 11px;
  }
  .session-intervention-action {
    flex: 0 0 auto; border: 1px solid rgba(224,175,104,0.55); border-radius: 5px;
    padding: 3px 9px; background: rgba(224,175,104,0.14); color: var(--fg); cursor: pointer;
    font-size: 11px; font-weight: 600;
  }
  .session-intervention-action:hover,
  .session-intervention-action:focus-visible { background: rgba(224,175,104,0.28); outline: none; }
  #tabbar-session-controls .session-intervention-status { max-width: 190px; }
  .session-recovery-dialog {
    width: min(560px, calc(100vw - 32px)); color: var(--fg); background: var(--bg-light);
    border: 1px solid var(--border); border-radius: 10px; padding: 20px;
    box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  }
  .session-recovery-dialog::backdrop { background: rgba(8,10,16,0.68); backdrop-filter: blur(2px); }
  .session-recovery-dialog h2 { margin: 0 0 10px; font-size: 17px; color: var(--fg); }
  .session-recovery-status { margin: 0 0 16px; color: var(--fg-muted); line-height: 1.45; }
  .session-recovery-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .session-recovery-controls button {
    border: 1px solid var(--border); border-radius: 6px; padding: 6px 11px;
    background: var(--bg-lighter); color: var(--fg); cursor: pointer;
  }
  .session-recovery-controls button:disabled { opacity: 0.55; cursor: not-allowed; }
  .session-recovery-controls .session-recovery-primary { border-color: rgba(158,206,106,0.6); background: rgba(158,206,106,0.16); }
  .session-recovery-controls .session-recovery-danger { border-color: rgba(247,118,142,0.6); background: rgba(247,118,142,0.14); }
  /* Option B: the active session's toolbar reparented onto the tab strip (single-pane).
     Strip its row chrome so it reads as part of the tab bar, not a second row. */
  /* Sit in the same vertical band as the tabs (the strip is align-items:flex-end,
     so a fixed height bottom-aligns to the tab baseline) and separate the cluster
     from the scrolling tabs with a divider — mirroring the .tab-overflow-btn on the
     right edge, so the controls read as a distinct, intentional group. */
  #tabbar-session-controls { display: flex; align-items: center; flex: 0 0 auto; height: 32px; gap: 5px; padding: 0 6px 0 10px; margin-left: 2px; border-left: 1px solid var(--border); }
  #tabbar-session-controls:empty { display: none; }
  #tabbar-session-controls .session-toolbar {
    background: transparent; border-bottom: none; padding: 0; z-index: auto;
  }
  /* Wall-E coding sessions hoist their whole `.walle-session-header` here (same
     reparent as the Claude/Codex `.session-toolbar` above). Shed the full-width
     band chrome — background, bottom border, 44px min-height, padding — so it
     reads as an inline control cluster (cwd · msgs · model chip · nav · ⋯) on
     the tab strip instead of a band. The inner `.walle-header-right` already
     carries the chip/nav styling. */
  #tabbar-session-controls .walle-session-header {
    background: transparent; border-bottom: none; border-top: none;
    padding: 0; min-height: 0; height: 100%; gap: 0; flex: 0 0 auto;
  }
  #tabbar-session-controls .walle-session-header-shared {
    display: flex; align-items: center; flex-wrap: nowrap;
    min-width: 0; height: 100%; flex: 0 1 auto;
  }
  #tabbar-session-controls .walle-session-header .walle-header-right { margin-left: 0; }
  /* The cwd · msgs meta is a touch smaller/dimmer on the dense tab strip. */
  #tabbar-session-controls .walle-session-header .session-meta { font-size: 11px; }
  /* Compact density to match the approved mock: when merged onto the tab strip,
     the view toggle abbreviates to Term | Conv. The
     split-pane (in-container) toolbar keeps the full labels (this is scoped to
     #tabbar-session-controls). */
  #tabbar-session-controls .stream-view-icon { display: none; }
  #tabbar-session-controls .stream-view-label { display: none; }
  #tabbar-session-controls .stream-view-btn { padding: 4px 9px; }
  #tabbar-session-controls .stream-view-btn[data-view="terminal"]::after { content: 'Term'; }
  #tabbar-session-controls .stream-view-btn[data-view="web"]::after { content: 'Web'; }
  #tabbar-session-controls .stream-view-btn[data-view="conversation"]::after { content: 'Conv'; }
  /* Active segment = solid accent pill with dark text (matches the mock),
     stronger than the faint default fill used in the split-pane toolbar. */
  #tabbar-session-controls .stream-view-btn.active {
    background: var(--accent);
    color: #0b0e17;
    font-weight: 600;
  }
  html[data-theme="light"] #tabbar-session-controls .stream-view-btn.active { color: #fff; }
  .session-toolbar-review-action {
    height: 24px; display: inline-flex; align-items: center;
    background: rgba(122,162,247,0.10); border: 1px solid rgba(122,162,247,0.28);
    color: #7aa2f7; font-size: 11px; padding: 0 10px; border-radius: 4px; cursor: pointer;
    font-weight: 600; transition: background 0.15s, border-color 0.15s; white-space: nowrap;
    line-height: 1;
  }
  .session-toolbar-review-action:hover { background: rgba(122,162,247,0.20); border-color: rgba(122,162,247,0.55); }
  /* Session model chip for Claude/Codex tabs (docs/lead-and-delegate-model-picker-ux-2026-10-08.html
     §R2, R2-U1): ONE pop-up button that opens the shared picker, [ lead · effort  ⇢ delegate · effort ⌄ ]
     [→ usage]. The lead span is the CLI-reported model + observed effort only (D-3, R2-U6); a pending
     switch is the separate .model-request-note. Wall-E has its own chip, handled separately. */
  .model-switch-control {
    display: inline-flex; align-items: center; height: 24px; margin-left: auto;
  }
  .model-switch-chip {
    height: 24px; display: inline-flex; align-items: center; box-sizing: border-box;
    background: var(--bg-input); color: var(--fg); border: 1px solid var(--border);
    font: inherit; font-size: 11px; padding: 0 8px; border-radius: 4px; cursor: pointer;
    max-width: 260px; margin-left: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; user-select: none;
  }
  .model-switch-chip:hover { background: var(--bg-light); }
  .model-switch-chip:focus-visible,
  .model-request-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .model-switch-chip::after {
    content: '\2304'; margin-left: 5px; color: var(--fg-dim, #7a82a8); font-size: 12px; line-height: 1;
    flex-shrink: 0;
  }
  .model-switch-control .model-switch-chip { border-radius: 4px 0 0 4px; }
  /* WP-1 (docs/session-model-header-truth-and-space-2026-10-25.html §8 WP-1, D-4): the lead row is
     [ label ][ tag* ][ token badge ] and ONLY the model name yields width. The name was one clipping
     span shared with the tag and the badge, so a long id ellipsized the context count and percentage
     away first. Each trailing fact keeps its own box (flex: 0 0 auto) inside the same 260px cap. */
  .model-switch-chip .model-chip-lead {
    min-width: 0; display: inline-flex; align-items: center; overflow: hidden;
  }
  .model-switch-chip .model-chip-label {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .model-request-note {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; box-sizing: border-box; padding: 0 8px;
    border: 1px solid var(--border); border-left: 0; background: var(--bg-input); color: var(--accent);
    font-size: 11px; white-space: nowrap;
  }
  .model-request-note[hidden] { display: none; }
  .model-request-note.model-request-dim { opacity: 0.65; }
  .model-request-cancel {
    border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 0 2px; line-height: 1;
  }
  .model-request-cancel[hidden] { display: none; }
  .model-request-cancel:hover { color: var(--fg); }
  .model-usage-arrow {
    width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center;
    justify-content: center; flex: 0 0 24px; border: 1px solid var(--border); border-left: 0;
    border-radius: 0 4px 4px 0; background: var(--bg-input); color: var(--fg-dim);
    cursor: pointer; font: inherit; font-size: 14px; line-height: 1; text-decoration: none;
  }
  .model-usage-arrow:hover { background: var(--bg-light); color: var(--fg); }
  .model-usage-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .model-switch-chip .model-token-badge {
    color: var(--fg-dim, #7a82a8); font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .model-switch-chip .model-chip-tag {
    color: var(--fg-dim, #7a82a8); font-size: 10px; line-height: 1;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 1px 5px; margin-left: 5px; flex-shrink: 0; white-space: nowrap;
  }
  .model-switch-chip.model-stale::after {
    content: '•';
    color: var(--warning, #e0af68);
    margin-left: 5px;
    flex-shrink: 0;
  }
  .model-switch-chip .model-token-badge.ctx-warn {
    color: var(--warning, #e0af68);
  }
  .model-switch-chip .model-token-badge.ctx-full {
    color: var(--danger, #f7768e);
  }
  .model-switch-chip .model-token-badge.ctx-estimate {
    color: var(--fg-muted, var(--fg-dim, #7a82a8));
    font-style: italic;
  }
  .task-route-search-select {
    position: relative;
    min-width: 0;
    width: 100%;
  }
  .task-route-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .task-route-combo-trigger {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border, #414868);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg, #1a1b26) 92%, var(--accent, #7aa2f7) 8%);
    color: var(--fg, #c0caf5);
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
  }
  .task-route-combo-trigger:hover {
    border-color: rgba(122,162,247,0.52);
    background: color-mix(in srgb, var(--bg, #1a1b26) 86%, var(--accent, #7aa2f7) 14%);
  }
  .task-route-combo-trigger:focus-visible {
    outline: none;
    border-color: var(--accent, #7aa2f7);
    box-shadow: 0 0 0 2px rgba(122,162,247,0.24);
  }
  .task-route-search-select.disabled .task-route-combo-trigger {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .task-route-combo-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .task-route-combo-caret {
    color: var(--fg-dim, #565f89);
    flex: 0 0 auto;
    font-size: 11px;
  }
  .task-route-combo-popover {
    position: absolute;
    z-index: 9000;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    border: 1px solid rgba(122,162,247,0.45);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-card, #24283b) 96%, #000 4%);
    box-shadow: 0 18px 44px rgba(0,0,0,0.42);
    padding: 8px;
  }
  .task-route-combo-popover[hidden] { display: none; }
  .task-route-combo-search {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border, #414868);
    border-radius: 8px;
    background: var(--bg, #1a1b26);
    color: var(--fg, #c0caf5);
    padding: 0 10px;
    font-size: 13px;
    outline: none;
  }
  .task-route-combo-search:focus {
    border-color: var(--accent, #7aa2f7);
    box-shadow: 0 0 0 2px rgba(122,162,247,0.18);
  }
  .task-route-combo-list {
    margin-top: 7px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .task-route-combo-option,
  .task-route-combo-empty {
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--fg, #c0caf5);
    padding: 8px 9px;
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
  }
  .task-route-combo-option {
    cursor: pointer;
  }
  .task-route-combo-option:hover,
  .task-route-combo-option:focus-visible {
    outline: none;
    background: rgba(122,162,247,0.14);
  }
  .task-route-combo-option[aria-selected="true"] {
    background: rgba(122,162,247,0.20);
    color: var(--accent, #7aa2f7);
    font-weight: 700;
  }
  .task-route-combo-empty {
    color: var(--fg-dim, #565f89);
    cursor: default;
  }
  html[data-theme="light"] .task-route-combo-popover {
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15,23,42,0.18);
  }
  .stream-view-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    flex-shrink: 0;
  }
  .stream-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 24px;
    padding: 1px;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .stream-view-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 22px;
    padding: 0 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--fg-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
  }
  .stream-view-btn:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
  .stream-view-btn:focus-visible,
  .stream-export-trigger:focus-visible {
    outline: 2px solid rgba(122,162,247,0.75);
    outline-offset: 1px;
  }
  .stream-view-btn.active {
    background: rgba(122,162,247,0.16);
    color: var(--fg);
    font-weight: 600;
  }
  .stream-view-icon { display: none; }
  .stream-view-label {
    display: inline-block;
    white-space: nowrap;
  }
  .stream-export-menu {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
  }
  .stream-export-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--fg-dim);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .stream-export-trigger:hover,
  .stream-export-menu.open .stream-export-trigger {
    background: rgba(255,255,255,0.06);
    color: var(--fg);
    border-color: rgba(122,162,247,0.45);
  }
  .stream-export-icon { font-size: 14px; line-height: 1; }
  .stream-export-caret { display: none; }
  .stream-export-menu-items {
    display: none;
    /* Positioned via JS (fixed, viewport-relative) so the dropdown escapes the
       #tabbar { overflow:hidden } clip when the controls are merged onto the tab
       strip. top/left are set on open by _buildExportMenu's positionMenu(). */
    position: fixed;
    min-width: 168px;
    padding: 4px;
    background: #1a1b2f;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    z-index: 3000;
  }
  .stream-export-menu.open .stream-export-menu-items { display: block; }
  .stream-export-item {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
  }
  .stream-export-item:hover,
  .stream-export-item:focus-visible {
    background: rgba(122,162,247,0.13);
    outline: none;
  }
  .stream-export-item:disabled,
  .stream-export-item[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .stream-export-item:disabled:hover,
  .stream-export-item[aria-disabled="true"]:hover {
    background: transparent;
  }
  .stream-export-section {
    padding: 4px 10px 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .stream-export-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
  }
  .stream-export-shortcut {
    margin-left: 12px;
    color: var(--fg-dim);
    font-size: 10px;
    float: right;
  }
  /* Absolute overlay inside .term-container (position:relative) rather than an
     in-flow band -- its insert/remove no longer changes the .xterm height, so the idle
     compact hint never triggers a SIGWINCH / duplicate-scrollback flap. Keep it docked
     to the right so left-aligned terminal status text and prompts remain readable. */
  .compact-banner {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(620px, calc(100% - 20px));
    min-height: 28px;
    padding: 4px 5px 4px 10px;
    background: rgba(30, 29, 38, 0.96);
    background: color-mix(in srgb, var(--terminal-bg, #1a1b26) 86%, rgba(224, 175, 104, 0.24));
    border: 1px solid rgba(224, 175, 104, 0.36);
    border-radius: 7px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    font-size: 11px;
    line-height: 1.25;
    color: var(--yellow, #e0af68);
    pointer-events: auto;
  }
  .compact-banner .compact-msg {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compact-banner button {
    background: none;
    border: 1px solid rgba(224, 175, 104, 0.4);
    color: var(--yellow, #e0af68);
    flex: 0 0 auto;
    height: 20px;
    padding: 0 9px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 18px;
  }
  .compact-banner button:hover { background: rgba(224, 175, 104, 0.15); }
  .compact-banner .compact-dismiss {
    border: none;
    opacity: 0.6;
    width: 20px;
    padding: 0;
    font-size: 13px;
  }
  .compact-banner .compact-dismiss:hover { opacity: 1; }
  @media (max-width: 720px) {
    .compact-banner {
      left: 8px;
      right: 8px;
      max-width: none;
    }
  }

  /* Rules editor panel */
  #rules-panel {
    display: none;
    flex: 1;
    flex-direction: row;
    overflow: hidden;
  }
  #rules-panel.active { display: flex; }
  #rules-sidebar {
    width: 260px;
    min-width: 200px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg);
  }
  #rules-sidebar .rules-sidebar-header {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rules-group {
    border-bottom: 1px solid var(--border);
  }
  .rules-group-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .rules-group-header:hover { background: rgba(255,255,255,0.04); }
  .rules-group-path {
    padding: 0 12px 4px;
    font-size: 10px;
    color: var(--fg-dim);
    opacity: 0.7;
  }
  .rules-file {
    padding: 6px 12px 6px 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg);
  }
  .rules-file:hover { background: var(--bg-lighter); }
  .rules-file.active { background: var(--accent); color: #1a1b26; }
  .rules-file.not-exists { opacity: 0.5; font-style: italic; }
  .rules-file .rules-file-icon { font-size: 11px; flex-shrink: 0; }
  .rules-file .rules-file-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rules-file .rules-file-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .rules-file .rules-file-badge.exists { background: rgba(158,206,106,0.2); color: var(--green); }
  .rules-file .rules-file-badge.empty { background: rgba(255,255,255,0.08); color: var(--fg-dim); }
  #rules-editor-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #rules-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    min-height: 38px;
  }
  #rules-editor-toolbar .rules-filepath {
    flex: 1;
    font-size: 11px;
    color: var(--fg-dim);
    font-family: 'SF Mono', 'Fira Code', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #rules-editor-toolbar .rules-unsaved {
    font-size: 10px;
    color: var(--yellow);
    font-weight: 600;
    display: none;
  }
  #rules-editor {
    flex: 1;
    background: var(--bg);
    color: var(--fg);
    border: none;
    padding: 14px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    outline: none;
    tab-size: 2;
  }
  #rules-editor:focus { outline: none; }
  #rules-editor-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-dim);
    font-size: 13px;
    text-align: center;
    padding: 40px;
    line-height: 1.8;
  }
  #rules-status {
    padding: 6px 14px;
    font-size: 11px;
    color: var(--fg-dim);
    border-top: 1px solid var(--border);
  }

  /* Welcome */
  #welcome {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1;
    gap: 12px;
    overflow: auto;
    padding: 18px;
    color: var(--fg-dim);
  }
  #welcome h1,
  #welcome h2 { color: var(--fg); font-size: 18px; font-weight: 600; }
  #welcome p { font-size: 13px; max-width: 400px; text-align: center; line-height: 1.6; }
  .standup-dashboard {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }
  .standup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--border);
    background: rgba(122,162,247,0.045);
    border-radius: 8px;
    padding: 18px 20px;
  }
  .standup-heading {
    min-width: 0;
    display: flex;
    align-items: center;
  }
  #welcome .standup-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: 0;
    color: var(--fg);
  }
  .standup-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
  }
  .standup-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .standup-count {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 7px;
    background: var(--bg-light);
    color: var(--fg);
    font-size: 11px;
    white-space: nowrap;
  }
  .standup-count strong {
    font-size: 13px;
    margin-right: 4px;
  }
  .standup-updated {
    font-size: 11px;
    color: var(--fg-dim);
    white-space: nowrap;
  }
  .standup-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .standup-action-btn {
    background: var(--bg-light);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 12px;
    cursor: pointer;
    min-height: 30px;
  }
  .standup-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .standup-action-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    font-weight: 700;
  }
  .standup-search {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.018);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .standup-search.has-query {
    border-color: rgba(122,162,247,0.42);
    background: rgba(122,162,247,0.055);
  }
  .standup-search-box {
    position: relative;
    flex: 1 1 320px;
    min-width: 220px;
  }
  .standup-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--fg-dim);
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
  }
  .standup-search-input {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-light);
    color: var(--fg);
    padding: 7px 36px 7px 32px;
    font-size: 13px;
    outline: none;
  }
  .standup-search-input::placeholder {
    color: var(--fg-dim);
  }
  .standup-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(122,162,247,0.16);
  }
  .standup-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--fg-dim);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }
  .standup-search.has-query .standup-search-clear {
    display: flex;
  }
  .standup-search-clear:hover {
    color: var(--fg);
    border-color: var(--border);
    background: rgba(255,255,255,0.04);
  }
  .standup-search-status {
    color: var(--fg-dim);
    font-size: 11px;
    white-space: nowrap;
    min-width: max-content;
  }
  /* WP-B2: scope chips (Active/History) — hidden until a search is active. */
  .standup-scope-chips {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
  }
  .standup-scope-chip {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--fg-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 9px;
    background: transparent;
    cursor: pointer;
  }
  .standup-scope-chip.is-on {
    color: var(--accent);
    border-color: rgba(122,162,247,0.42);
    background: rgba(122,162,247,0.09);
  }
  .standup-scope-chip:hover { border-color: var(--accent); }
  /* WP-B3: escalation one-liner shown instead of a bare "0 matches" when history has hits. */
  .standup-search-escalation {
    color: var(--fg-dim);
    font-size: 12px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin-bottom: 4px;
  }
  /* WP-B2: "History matches" section — reuses .standup-card for individual rows. */
  .standup-history {
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
  .standup-history-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }
  .standup-history-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .standup-history-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-dim);
    font-size: 12px;
    padding: 4px 2px;
  }
  .standup-history-loading-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fg-dim);
    animation: standupHistoryLoadingPulse 1.1s ease-in-out infinite;
  }
  .standup-history-loading-dot:nth-child(2) { animation-delay: 0.15s; }
  .standup-history-loading-dot:nth-child(3) { animation-delay: 0.3s; }
  @keyframes standupHistoryLoadingPulse {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
  }
  .standup-search-match-server .standup-search-match-label {
    color: var(--accent);
  }
  .standup-attention {
    display: none;
    border: 1px solid rgba(224, 175, 104, 0.35);
    background: rgba(224, 175, 104, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--fg);
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }
  .standup-attention.active { display: flex; }
  .standup-service-alerts {
    display: none;
    margin: 0;
    border-color: rgba(224, 175, 104, 0.35);
    background: rgba(224, 175, 104, 0.08);
  }
  .standup-service-alerts.active {
    display: block;
  }
  .standup-service-alerts .we-service-alerts-title {
    color: var(--yellow);
  }
  .standup-service-alerts .we-service-alert-item {
    padding: 6px 0;
  }
  .standup-service-alerts .we-service-alert-text {
    color: var(--fg);
  }
  .standup-attention-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
  }
  .standup-attention-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--yellow);
  }
  .standup-attention-body {
    font-size: 12px;
    color: var(--fg-dim);
    overflow-wrap: anywhere;
  }
  .standup-attention-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  .standup-dismiss-btn {
    width: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--fg-dim);
  }
  .standup-dismiss-btn:hover {
    color: var(--fg);
    border-color: var(--fg-dim);
  }
  .standup-lanes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    align-items: start;
  }
  .standup-lane {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.018);
    min-width: 0;
    overflow: hidden;
  }
  .standup-lane-header {
    padding: 10px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  .standup-lane-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--fg);
    font-weight: 700;
    font-size: 13px;
  }
  .standup-lane-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--fg-dim);
  }
  .standup-lane[data-lane="needs_user"] .standup-lane-dot { background: var(--yellow); }
  .standup-lane[data-lane="ready_review"] .standup-lane-dot { background: var(--green); }
  .standup-lane[data-lane="running"] .standup-lane-dot { background: var(--blue); }
  .standup-lane[data-lane="continue_later"] .standup-lane-dot { background: var(--purple); }
  .standup-lane-count {
    color: var(--fg-dim);
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--bg);
  }
  .standup-lane-count.is-filtered {
    color: var(--accent);
    border-color: rgba(122,162,247,0.35);
  }
  .standup-lane-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .standup-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-light);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .standup-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }
  .standup-card-title {
    min-width: 0;
    color: var(--fg);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .standup-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    min-width: 0;
  }
  .standup-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    max-width: 118px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 6px;
    background: rgba(255,255,255,0.025);
    color: var(--fg-dim);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .standup-provider-badge svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
  }
  .standup-provider-badge span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .standup-provider-openai { color: #9ece6a; border-color: rgba(158,206,106,0.34); background: rgba(158,206,106,0.07); }
  .standup-provider-anthropic { color: #ff9e64; border-color: rgba(255,158,100,0.34); background: rgba(255,158,100,0.07); }
  .standup-provider-google { color: #7aa2f7; border-color: rgba(122,162,247,0.34); background: rgba(122,162,247,0.07); }
  .standup-provider-deepseek { color: #4d6bfe; border-color: rgba(77,107,254,0.38); background: rgba(77,107,254,0.08); }
  .standup-provider-moonshot { color: #a78bfa; border-color: rgba(167,139,250,0.38); background: rgba(167,139,250,0.08); }
  .standup-provider-ollama,
  .standup-provider-mlx { color: #bb9af7; border-color: rgba(187,154,247,0.34); background: rgba(187,154,247,0.07); }
  .standup-provider-walle { color: var(--yellow); border-color: rgba(224,175,104,0.34); background: rgba(224,175,104,0.07); }
  .standup-provider-shell,
  .standup-provider-unknown { color: var(--fg-dim); border-color: rgba(255,255,255,0.12); background: rgba(0,0,0,0.12); }
  .standup-card-subtitle {
    color: var(--fg-dim);
    font-size: 11px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .standup-badge {
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
    color: var(--fg-dim);
    background: var(--bg);
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .standup-badge.status-running { color: var(--blue); border-color: rgba(122,162,247,0.45); }
  .standup-badge.status-waiting,
  .standup-badge.status-waiting_input { color: var(--yellow); border-color: rgba(224,175,104,0.45); }
  .standup-badge.status-idle { color: var(--green); border-color: rgba(158,206,106,0.35); }
  .standup-card-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--fg-dim);
    overflow-wrap: anywhere;
  }
  .standup-card-text strong {
    color: var(--fg);
    font-weight: 600;
  }
  .standup-card-signals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .standup-card-line {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
  }
  .standup-card-line-label {
    color: var(--fg-dim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    padding-top: 1px;
    white-space: nowrap;
  }
  .standup-card-line-text {
    color: var(--fg);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .standup-card-line.is-muted .standup-card-line-text {
    color: var(--fg-dim);
  }
  .standup-card-recommendation {
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .standup-search-match {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 7px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--fg-dim);
    overflow-wrap: anywhere;
  }
  .standup-search-match-label {
    color: var(--yellow);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 5px;
  }
  .standup-search-hit {
    background: rgba(224,175,104,0.92);
    color: var(--bg);
    border-radius: 3px;
    padding: 0 1px;
  }
  .standup-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .standup-chip {
    font-size: 10px;
    color: var(--fg-dim);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.14);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .standup-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .standup-card-actions .standup-action-btn {
    padding: 5px 8px;
    min-height: 28px;
    font-size: 11px;
  }
  .standup-empty,
  .standup-loading,
  .standup-error {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: var(--fg-dim);
    font-size: 13px;
    background: rgba(255,255,255,0.018);
  }
  .standup-error { color: var(--red); border-color: rgba(247,118,142,0.45); }
  @media (max-width: 760px) {
    #welcome { padding: 12px; }
    .standup-header {
      flex-direction: column;
      align-items: stretch;
      padding: 16px;
    }
    #welcome .standup-title { font-size: 24px; }
    .standup-meta { justify-content: flex-start; }
    .standup-search {
      flex-direction: column;
      align-items: stretch;
    }
    .standup-search-box {
      min-width: 0;
    }
    .standup-search-status {
      min-width: 0;
      white-space: normal;
    }
    .standup-service-alerts .we-service-alert-item {
      align-items: flex-start;
    }
    .standup-attention { align-items: flex-start; flex-direction: column; }
    .standup-attention-actions { width: 100%; justify-content: flex-end; }
  }
  .shortcut-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 20px;
    font-size: 12px;
    margin-top: 8px;
  }
  .shortcut-grid kbd {
    background: var(--bg-lighter);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
  }

  /* Queue Status Bar */
  /* Overlay anchored just below the tabbar instead of an in-flow band, so toggling the
     queue bar never changes #terminal-area's height (no SIGWINCH / duplicate-scrollback
     flap). It covers the top scrollback row(s) of the terminal only while a queue runs. */
  #queue-bar {
    position: absolute;
    top: var(--tab-height, 38px);
    left: 0;
    right: 0;
    z-index: 11;          /* above terminal content; below modals */
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding: 5px 12px;
    font-size: 12px;
  }
  #queue-bar .queue-bar-left,
  #queue-bar .queue-bar-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #queue-bar .queue-bar-left { float: left; }
  #queue-bar .queue-bar-right { float: right; }
  .queue-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--bg-lighter);
    color: var(--fg-dim);
  }
  .queue-badge.running { background: rgba(158, 206, 106, 0.2); color: var(--green); }
  .queue-badge.paused { background: rgba(224, 175, 104, 0.2); color: var(--yellow); }
  .queue-badge.done { background: rgba(122, 162, 247, 0.15); color: var(--accent); }
  .queue-badge.auto { background: rgba(158, 206, 106, 0.2); color: var(--green); }
  .queue-progress { color: var(--fg-dim); font-size: 11px; }
  .queue-current { color: var(--fg); font-size: 11px; font-weight: 500; }
  .queue-btn {
    background: var(--bg-lighter);
    border: 1px solid var(--border);
    color: var(--fg-dim);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .queue-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
  .queue-btn:disabled { opacity: 0.4; cursor: default; }
  .queue-btn-danger:hover { color: var(--red); border-color: var(--red); }
  .queue-items-list {
    clear: both;
    padding-top: 8px;
    max-height: 200px;
    overflow-y: auto;
  }
  .queue-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    font-size: 11px;
    border-radius: 3px;
  }
  .queue-item-row:hover { background: var(--bg-lighter); }
  .queue-item-icon { width: 16px; text-align: center; flex-shrink: 0; }
  .queue-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .queue-item-row.sent .queue-item-icon { color: var(--green); }
  .queue-item-row.sending .queue-item-icon { color: var(--yellow); }
  .queue-item-row.skipped .queue-item-icon { color: var(--fg-dim); }
  .queue-item-row.pending .queue-item-icon { color: var(--fg-dim); }

  /* Modal */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  .modal-overlay.hidden { display: none; }
  .modal {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    min-width: 420px;
    max-width: 90vw;
  }
  .modal h3 { margin-bottom: 14px; font-size: 15px; }
  .modal label {
    display: block;
    font-size: 12px;
    color: var(--fg-dim);
    margin-bottom: 4px;
    margin-top: 10px;
  }
  .modal input, .modal select {
    width: 100%;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 13px;
    outline: none;
  }
  .modal input:focus, .modal select:focus { border-color: var(--accent); }
  .modal .btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
  }
  #coding-agent-upgrade-modal {
    z-index: 9999;
    background: rgba(4, 6, 14, 0.72);
    backdrop-filter: blur(5px);
  }
  .agent-upgrade-meter {
    height: 6px;
    background: rgba(122,162,247,0.16);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(122,162,247,0.22);
  }
  .agent-upgrade-meter span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(122,162,247,0.25), rgba(122,162,247,0.95), rgba(122,162,247,0.25));
    animation: agentUpgradeSlide 1.15s ease-in-out infinite;
  }
  .agent-upgrade-meter.done span {
    width: 100%;
    transform: none;
    animation: none;
    background: var(--green);
  }
  .agent-upgrade-meter.failed span {
    width: 100%;
    transform: none;
    animation: none;
    background: var(--red);
  }
  .agent-upgrade-console {
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--fg);
    font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .agent-upgrade-console .stderr { color: var(--yellow); }
  .agent-upgrade-console .system { color: var(--fg-dim); }
  .agent-upgrade-batch-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }
  .agent-upgrade-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    padding: 10px 12px;
    min-width: 0;
  }
  .agent-upgrade-row-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .agent-upgrade-row-title {
    color: var(--fg);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
  }
  .agent-upgrade-row-subtitle {
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 2px;
  }
  .agent-upgrade-row-status {
    font-size: 10px;
    font-weight: 750;
    border-radius: 999px;
    padding: 3px 8px;
    border: 1px solid rgba(122,162,247,0.42);
    color: var(--accent);
    background: rgba(122,162,247,0.10);
    white-space: nowrap;
  }
  .agent-upgrade-row-status.done {
    border-color: rgba(158,206,106,0.48);
    color: var(--green);
    background: rgba(158,206,106,0.10);
  }
  .agent-upgrade-row-status.failed {
    border-color: rgba(247,118,142,0.48);
    color: var(--red);
    background: rgba(247,118,142,0.10);
  }
  .agent-upgrade-row .agent-upgrade-console {
    max-height: 108px;
    margin-top: 8px;
  }
  @keyframes agentUpgradeSlide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
  }
  #wt-progress-modal {
    z-index: 260;
    background: rgba(4, 6, 14, 0.72);
    backdrop-filter: blur(5px);
  }
  .wt-progress-modal {
    width: min(640px, calc(100vw - 32px));
    padding: 0;
    overflow: hidden;
    border-color: rgba(122,162,247,0.42);
    box-shadow: 0 26px 80px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .wt-progress-head {
    padding: 18px 20px 14px;
    background:
      radial-gradient(circle at 14% 0%, rgba(122,162,247,0.20), transparent 35%),
      linear-gradient(135deg, rgba(122,162,247,0.08), rgba(10,14,25,0));
    border-bottom: 1px solid rgba(122,162,247,0.18);
  }
  .wt-progress-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 800;
  }
  .wt-progress-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(122,162,247,0.85);
    animation: wtPulse 1.4s ease-in-out infinite;
  }
  .wt-progress-modal h3 {
    margin: 8px 0 6px;
    font-size: 18px;
    line-height: 1.25;
  }
  .wt-progress-subtitle {
    color: var(--fg-dim);
    font-size: 12px;
    line-height: 1.45;
  }
  .wt-progress-body {
    padding: 16px 20px 18px;
  }
  .wt-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .wt-progress-stat {
    border: 1px solid rgba(122,162,247,0.18);
    border-radius: 10px;
    background: rgba(13,17,30,0.54);
    padding: 9px 10px;
  }
  .wt-progress-label {
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 9px;
    font-weight: 800;
    margin-bottom: 5px;
  }
  .wt-progress-value {
    color: var(--fg);
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wt-progress-meter {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: rgba(122,162,247,0.14);
    overflow: hidden;
    margin: 2px 0 14px;
  }
  .wt-progress-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #9ece6a, var(--accent));
    animation: wtSlide 1.25s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(122,162,247,0.35);
  }
  .wt-progress-message {
    border: 1px solid rgba(224,175,104,0.28);
    background: rgba(224,175,104,0.07);
    color: var(--fg);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .wt-progress-log {
    max-height: 168px;
    overflow: auto;
    margin: 0;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid rgba(122,162,247,0.16);
    background: rgba(7,10,19,0.56);
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
  }
  .wt-progress-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }
  .wt-progress-hint {
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.35;
    flex: 1;
  }
  .wt-progress-actions .btn-row {
    margin: 0;
    flex-shrink: 0;
  }
  @keyframes wtSlide {
    0% { transform: translateX(-80%); }
    55% { transform: translateX(170%); }
    100% { transform: translateX(170%); }
  }
  @keyframes wtPulse {
    0%, 100% { transform: scale(0.82); opacity: 0.65; }
    50% { transform: scale(1.12); opacity: 1; }
  }
  .resource-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 122;
    background: rgba(5, 7, 18, 0.66);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
  }
  .resource-map-modal {
    width: min(1180px, calc(100vw - 36px));
    max-height: min(780px, calc(100vh - 36px));
    border: 1px solid rgba(122,162,247,0.28);
    border-radius: 18px;
    background:
      radial-gradient(circle at 18% 0%, rgba(122,162,247,0.15), transparent 28%),
      radial-gradient(circle at 90% 6%, rgba(158,206,106,0.10), transparent 24%),
      var(--bg-light);
    box-shadow: 0 26px 80px rgba(0,0,0,0.48);
    color: var(--fg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .resource-map-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
  }
  .resource-map-kicker {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 5px;
  }
  .resource-map-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .resource-map-subtitle {
    margin-top: 6px;
    color: var(--fg-dim);
    font-size: 12px;
    line-height: 1.45;
  }
  .resource-map-close {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--fg-dim);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 18px;
  }
  .resource-map-close:hover { color: var(--fg); border-color: var(--accent); }
  .resource-map-body {
    padding: 14px;
    overflow: auto;
  }
  .resource-map-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1.25fr);
    gap: 12px;
  }
  .resource-map-section {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
    min-width: 0;
    overflow: hidden;
  }
  .resource-map-section h4 {
    margin: 0;
    padding: 12px 13px 9px;
    color: var(--fg);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
  }
  .resource-map-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }
  .resource-map-card {
    text-align: left;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,12,26,0.42);
    border-radius: 12px;
    padding: 10px 11px;
    color: var(--fg);
    cursor: pointer;
    min-width: 0;
  }
  .resource-map-card:hover { border-color: rgba(122,162,247,0.55); background: rgba(122,162,247,0.09); }
  .resource-map-card-title {
    font-weight: 750;
    font-size: 13px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }
  .resource-map-card-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .resource-map-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg-dim);
    background: var(--bg);
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.3;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .resource-map-empty {
    color: var(--fg-dim);
    font-size: 12px;
    padding: 13px;
    line-height: 1.45;
  }
  .resource-map-node-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
  }
  .resource-map-node {
    border: 1px solid rgba(122,162,247,0.26);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--fg);
    background: rgba(122,162,247,0.08);
    font-size: 11px;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .resource-map-node[data-type="session"] { border-color: rgba(122,162,247,0.45); }
  .resource-map-node[data-type="prompt"] { border-color: rgba(158,206,106,0.45); background: rgba(158,206,106,0.08); }
  .resource-map-edge-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .resource-map-edge {
    color: var(--fg-dim);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .resource-map-loading {
    padding: 34px;
    color: var(--fg-dim);
    font-size: 13px;
  }
  html[data-theme="light"] .resource-map-overlay { background: rgba(227,233,246,0.64); }
  html[data-theme="light"] .resource-map-modal {
    background:
      radial-gradient(circle at 18% 0%, rgba(61,106,225,0.11), transparent 30%),
      radial-gradient(circle at 90% 8%, rgba(69,150,117,0.10), transparent 25%),
      var(--bg-light);
    box-shadow: 0 24px 72px rgba(37,47,76,0.22);
  }
  html[data-theme="light"] .resource-map-card { background: rgba(255,255,255,0.72); border-color: rgba(93,108,148,0.22); }
  html[data-theme="light"] .resource-map-card:hover { background: rgba(61,106,225,0.08); }
  @media (max-width: 960px) {
    .resource-map-grid { grid-template-columns: 1fr; }
    .resource-map-modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  }
  .update-wizard-overlay { z-index: 130; }
  .update-wizard-modal {
    width: min(520px, 92vw);
    min-width: 0;
    padding: 0;
    overflow: hidden;
  }
  .update-wizard-head {
    display: flex;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(122,162,247,0.14), rgba(187,154,247,0.07));
  }
  .update-wizard-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--accent);
    color: #1a1b26;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
  }
  .update-wizard-title h3 { margin: 0 0 4px; font-size: 16px; }
  .update-wizard-title p { margin: 0; color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
  .update-wizard-body { padding: 16px 20px 18px; }
  .update-version-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .update-version-cell {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg);
  }
  .update-version-cell span {
    display: block;
    color: var(--fg-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .update-version-cell strong {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--fg);
    font-size: 13px;
  }
  .update-wizard-note {
    color: var(--fg-dim);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
  }
  .update-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
  }
  @media (max-width: 520px) {
    .update-version-grid { grid-template-columns: 1fr; }
    .update-wizard-actions { flex-wrap: wrap; }
    .update-wizard-actions .btn { flex: 1 1 auto; }
  }
  .restart-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    min-height: 32px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, #2a2417, #33301e);
    color: #e0af68;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .restart-banner.active { display: flex; }
  .restart-banner-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .restart-banner-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
  .restart-banner-actions button {
    height: 22px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: #e0af68;
    color: #1a1b26;
  }
  #restart-banner-dismiss { background: none; color: var(--fg-dim); opacity: 0.6; font-size: 14px; padding: 0 4px; }
  /* Restart split button: default "Restart" (all) + caret menu "Restart CTM" / "Restart Wall-E". */
  .restart-banner-restart-group { position: relative; display: inline-flex; align-items: stretch; }
  .restart-banner-restart-group[hidden] { display: none; }
  #restart-banner-restart { border-radius: 4px 0 0 4px; }
  #restart-banner-restart-caret {
    border-radius: 0 4px 4px 0;
    border-left: 1px solid rgba(26, 27, 38, 0.35);
    padding: 0 6px;
    font-size: 10px;
    line-height: 1;
  }
  .restart-banner-restart-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 150px;
    padding: 4px 0;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 500;
    flex-direction: column;
    white-space: nowrap;
  }
  .restart-banner-restart-group.open .restart-banner-restart-menu { display: flex; }
  .restart-banner-restart-menu button {
    height: auto;
    padding: 7px 12px;
    border-radius: 0;
    background: none;
    color: var(--fg);
    font-weight: 500;
    text-align: left;
  }
  .restart-banner-restart-menu button:hover { background: var(--bg-lighter); }

  /* Agent Picker Grid */
  .ns-agent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 6px 0 4px;
  }
  .ns-agent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 12px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    position: relative;
  }
  .ns-agent-card:hover {
    border-color: var(--fg-dim);
    background: color-mix(in srgb, var(--bg-light) 80%, var(--fg) 4%);
  }
  .ns-agent-card.selected {
    border-color: var(--ns-card-accent, var(--accent));
    background: color-mix(in srgb, var(--bg) 92%, var(--ns-card-accent, var(--accent)) 8%);
    box-shadow: 0 0 0 1px var(--ns-card-accent, var(--accent));
  }
  .ns-agent-card.unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }
  .ns-agent-card.not-detected {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--warning, #e0af68) 55%, var(--border));
  }
  .ns-agent-card.not-detected .ns-card-sub {
    color: var(--warning, #e0af68);
  }
  .ns-agent-card.not-detected.selected {
    border-style: solid;
    border-color: var(--ns-card-accent, var(--accent));
  }
  .ns-agent-card .ns-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .ns-agent-card .ns-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
    text-align: center;
    line-height: 1.2;
  }
  .ns-agent-card .ns-card-sub {
    font-size: 10px;
    color: var(--fg-dim);
    text-align: center;
    line-height: 1.2;
  }
  .new-session-modal {
    width: min(680px, calc(100vw - 32px));
    max-width: min(680px, calc(100vw - 32px)) !important;
  }
  .ns-path-picker {
    position: relative;
  }
  .ns-path-input-row {
    position: relative;
  }
  .ns-path-input-row input {
    padding-right: 108px;
    font-family: 'SF Mono', 'Fira Code', monospace;
  }
  .ns-path-hotkey {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-dim);
    font-size: 10px;
    pointer-events: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 7px;
    background: color-mix(in srgb, var(--bg) 88%, var(--bg-light) 12%);
  }
  .ns-path-validation {
    min-height: 16px;
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--fg-dim);
    line-height: 1.35;
  }
  .ns-path-validation.warning { color: var(--yellow,#e0af68); }
  .ns-path-validation.good { color: var(--green,#9ece6a); }
  .ns-path-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 140;
    max-height: min(360px, 44vh);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
    border-top-color: color-mix(in srgb, var(--accent) 68%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-light) 96%, #000 4%);
    box-shadow: 0 4px 0 rgba(122,162,247,0.10), 0 22px 54px rgba(0,0,0,0.48);
    padding: 6px;
  }
  .ns-path-suggestions.hidden { display: none; }
  .ns-path-section {
    padding: 7px 8px 4px;
    color: var(--fg-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ns-path-option {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--fg);
    display: grid;
    grid-template-columns: 16px 18px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    padding: 8px 9px;
    text-align: left;
    cursor: pointer;
  }
  .ns-path-option:hover,
  .ns-path-option.active {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  }
  /* Disclosure twisty (projects) + tree guide (worktrees) */
  .ns-path-twisty {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--fg-dim);
    border-radius: 5px;
    align-self: center;
  }
  .ns-path-twisty[data-ns-twisty]:hover {
    color: var(--fg);
    background: color-mix(in srgb, var(--accent) 24%, transparent);
  }
  .ns-path-twisty-empty { visibility: hidden; }
  .ns-path-wt-guide { color: color-mix(in srgb, var(--fg-dim) 60%, transparent); font-size: 12px; }
  .ns-path-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.92;
  }
  .ns-path-icon-wt { font-size: 12px; opacity: 0.8; }
  /* Project rows read as the primary level; worktrees indent + dim slightly */
  .ns-path-option.ns-project .ns-path-title { font-weight: 800; }
  .ns-path-option.ns-worktree { padding-left: 22px; }
  .ns-path-option.ns-worktree .ns-path-title { font-weight: 650; color: color-mix(in srgb, var(--fg) 88%, var(--fg-dim)); }
  .ns-path-option.ns-worktree .ns-path-subtitle { opacity: 0.85; }
  .ns-path-option.ns-more { padding-left: 22px; }
  .ns-path-option.ns-more .ns-path-title { font-weight: 650; font-size: 11px; color: var(--accent); }
  .ns-path-option-main {
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  .ns-path-title {
    display: block;
    font-size: 12px;
    font-weight: 750;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-path-subtitle {
    display: block;
    font-size: 11px;
    color: var(--fg-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Mono', 'Fira Code', monospace;
  }
  .ns-path-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 230px;
  }
  .ns-path-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg-dim);
    background: var(--bg);
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .ns-path-chip.good { color: var(--green,#9ece6a); border-color: color-mix(in srgb, var(--green,#9ece6a) 45%, var(--border)); }
  .ns-path-chip.warn { color: var(--yellow,#e0af68); border-color: color-mix(in srgb, var(--yellow,#e0af68) 45%, var(--border)); }
  .ns-path-empty {
    padding: 10px 9px;
    color: var(--fg-dim);
    font-size: 12px;
    line-height: 1.4;
  }
  @media (max-width: 640px) {
    .new-session-modal {
      width: calc(100vw - 20px);
      min-width: 0 !important;
      padding: 16px;
    }
    .ns-path-input-row input { padding-right: 10px; }
    .ns-path-hotkey { display: none; }
    .ns-path-option {
      grid-template-columns: 16px 18px minmax(0, 1fr);
    }
    .ns-path-badges {
      grid-column: 1 / -1;
      justify-content: flex-start;
      max-width: none;
      padding-left: 41px;
    }
  }

  /* Permissions Panel */
  #permissions-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
  #permissions-panel.active { display: flex; }
  #models-panel {
    flex: 1;
    min-height: 0;
  }
  #models-panel.active { display: flex; }
  .models-scroll {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .models-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
  }
  .perm-split {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }
  .perm-split > .perm-content {
    flex: 1;
    min-width: 200px;
    overflow-y: auto;
  }
  .perm-split-handle {
    width: 5px;
    cursor: col-resize;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
  }
  .perm-split-handle:hover, .perm-split-handle.dragging {
    background: var(--accent);
  }
  .perm-split:has(.ar-panel.collapsed) > .perm-split-handle { display: none; }
  .perm-split > .ar-panel {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: min-width 0.25s ease, flex 0.25s ease;
  }
  .perm-split > .ar-panel.collapsed {
    flex: 0 0 38px;
    min-width: 38px;
    max-width: 38px;
    cursor: pointer;
  }
  .perm-split > .ar-panel.collapsed .ar-header,
  .perm-split > .ar-panel.collapsed .ar-tabs,
  .perm-split > .ar-panel.collapsed .ar-content {
    display: none;
  }
  .ar-collapsed-bar {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 10px;
    height: 100%;
    background: var(--bg-light);
    border-left: 1px solid var(--border);
    transition: background 0.15s;
  }
  .ar-collapsed-bar:hover {
    background: rgba(122,162,247,0.08);
  }
  .perm-split > .ar-panel.collapsed .ar-collapsed-bar {
    display: flex;
  }
  .ar-collapsed-bar .ar-collapsed-icon {
    width: 26px; height: 26px; border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), #bb9af7);
    color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .ar-collapsed-bar .ar-collapsed-label {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 11px; font-weight: 600; color: var(--fg-dim);
    letter-spacing: 0.5px; white-space: nowrap;
  }
  .ar-collapsed-bar .ar-collapsed-badge {
    background: var(--red); color: #fff; font-size: 9px;
    border-radius: 8px; padding: 1px 5px; min-width: 14px;
    text-align: center; line-height: 16px; font-weight: 700;
  }
  .perm-split > .ar-panel .ar-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .perm-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
  }
  .perm-toolbar h3 { font-size: 14px; flex: 1; }
  .perm-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
  }
  .perm-section {
    margin-bottom: 20px;
  }
  .perm-section-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fg);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
  }
  .perm-section-header[onclick] {
    cursor: pointer;
  }
  .perm-section-header[onclick]:hover {
    background: rgba(122,162,247,0.1);
    border-color: var(--accent);
  }
  .perm-section-header .chevron {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 14px;
    color: var(--accent);
    margin-left: auto;
  }
  .perm-section-header .chevron.open {
    transform: rotate(90deg);
  }
  .perm-section-header .count-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
  }
  .perm-section .collapsed { display: none; }
  .perm-active-rules.collapsed { display: none; }
  .perm-tool-group {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .perm-tool-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .perm-tool-header:hover { background: var(--bg-lighter); }
  .perm-tool-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
  }
  .perm-tool-count {
    font-size: 10px;
    color: var(--fg-dim);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 10px;
  }
  .perm-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--bg-lighter);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .perm-toggle.on {
    background: var(--green);
    border-color: var(--green);
  }
  .perm-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: left 0.2s;
  }
  .perm-toggle.on::after { left: 18px; }
  .perm-patterns {
    display: none;
    padding: 0 14px 10px;
    font-size: 11px;
    color: var(--fg-dim);
  }
  .perm-patterns.open { display: block; }
  .perm-pattern-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--border);
  }
  .perm-pattern-item:first-child { border-top: none; }
  .perm-pattern-item code {
    flex: 1;
    font-family: 'SF Mono', monospace;
    font-size: 11px;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .perm-scope-select {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    outline: none;
    cursor: pointer;
  }
  .perm-scope-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .perm-scope-badge.global { background: rgba(122, 162, 247, 0.15); color: var(--accent); }
  .perm-scope-badge.project { background: rgba(187, 154, 247, 0.15); color: #bb9af7; }
  .perm-risk { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
  .perm-risk.high { background: rgba(247, 118, 142, 0.2); color: #f7768e; }
  .perm-risk.medium { background: rgba(224, 175, 104, 0.2); color: #e0af68; }
  .perm-risk.low { background: rgba(115, 218, 202, 0.2); color: #73daca; }
  .perm-bulk-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    border-bottom: 1px solid var(--border); background: var(--bg-light); flex-shrink: 0;
  }
  .perm-bulk-bar .btn { font-size: 11px; padding: 3px 10px; }
  .perm-search-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0;
  }
  .perm-search-bar input {
    flex: 1; background: var(--bg-lighter); color: var(--fg); border: 1px solid var(--border);
    padding: 5px 10px; border-radius: 5px; font-size: 12px; outline: none;
  }
  .perm-search-bar select {
    background: var(--bg-lighter); color: var(--fg); border: 1px solid var(--border);
    padding: 5px 8px; border-radius: 5px; font-size: 11px; outline: none; cursor: pointer;
  }
  .perm-tool-group.hidden-by-filter { display: none; }
  .perm-always-ask {
    font-size: 9px; padding: 2px 7px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg); color: var(--fg-dim);
    white-space: nowrap; user-select: none; transition: all 0.15s;
  }
  .perm-always-ask.locked {
    background: rgba(247, 118, 142, 0.15); color: #f7768e; border-color: rgba(247, 118, 142, 0.3);
  }
  .perm-always-ask:hover { opacity: 0.8; }
  .perm-variants { display: none; padding: 4px 8px 8px 36px; }
  .perm-variants.open { display: block; }
  .perm-variant-row {
    display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 11px;
    border-radius: 4px; margin: 2px 0;
  }
  .perm-variant-row:hover { background: var(--bg-lighter); }
  .perm-variant-row code { font-size: 10px; font-family: 'SF Mono', monospace; color: var(--fg-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .perm-expand-btn {
    font-size: 10px; color: var(--fg-dim); cursor: pointer; padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--bg); white-space: nowrap; user-select: none;
  }
  .perm-expand-btn:hover { background: var(--bg-lighter); }
  .perm-ai-input {
    display: flex; gap: 6px; align-items: center; padding: 8px 14px;
    border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0;
  }
  .perm-ai-input input {
    flex: 1; background: var(--bg-lighter); color: var(--fg); border: 1px solid var(--border);
    padding: 7px 12px; border-radius: 8px; font-size: 12px; outline: none;
  }
  .perm-ai-input input:focus { border-color: var(--accent); }
  .perm-ai-input input::placeholder { color: var(--fg-dim); }
  .perm-ai-response {
    padding: 8px 14px; font-size: 12px; color: var(--fg); background: rgba(122,162,247,0.05);
    border-bottom: 1px solid var(--border); line-height: 1.5;
  }
  .perm-ai-response code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
  .perm-ai-response .ai-rule-add {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px;
    background: var(--accent); color: #fff; font-size: 11px; cursor: pointer; border: none; margin: 2px;
  }
  .perm-ai-response .ai-rule-add:hover { opacity: 0.85; }
  .perm-ai-response .ai-deny-add {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px;
    background: #f7768e; color: #fff; font-size: 11px; cursor: pointer; border: none; margin: 2px;
  }
  .perm-ai-response .ai-deny-add:hover { opacity: 0.85; }
  .perm-ai-response .ai-rule-add code,
  .perm-ai-response .ai-deny-add code { background: rgba(0,0,0,0.2); color: #fff; }
  .perm-exceptions { display: none; padding: 4px 8px 8px 36px; }
  .perm-exceptions.open { display: block; }
  .perm-exception-row {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 11px;
    border-radius: 4px; margin: 2px 0; background: rgba(247, 118, 142, 0.06); border: 1px solid rgba(247, 118, 142, 0.15);
  }
  .perm-exception-row code { font-size: 10px; font-family: 'SF Mono', monospace; color: #f7768e; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .perm-exception-row .remove-exception { color: var(--fg-dim); cursor: pointer; font-size: 13px; opacity: 0.6; }
  .perm-exception-row .remove-exception:hover { opacity: 1; color: #f7768e; }
  .perm-exception-add {
    display: flex; align-items: center; gap: 4px; margin-top: 4px;
  }
  .perm-exception-add input {
    flex: 1; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
    padding: 4px 8px; border-radius: 4px; font-size: 11px; outline: none;
  }
  .perm-exception-add input:focus { border-color: rgba(247, 118, 142, 0.5); }
  .perm-exception-add input::placeholder { color: var(--fg-dim); font-size: 10px; }
  .perm-exception-add .btn { font-size: 10px; padding: 3px 8px; }
  .perm-exception-ai-response {
    margin-top: 4px; padding: 4px 8px; font-size: 11px; background: rgba(247, 118, 142, 0.04);
    border-radius: 4px; color: var(--fg); line-height: 1.4;
  }
  .perm-exception-ai-response .ai-deny-add {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 3px;
    background: #f7768e; color: #fff; font-size: 10px; cursor: pointer; border: none; margin: 2px;
  }
  .perm-exception-ai-response .ai-deny-add:hover { opacity: 0.85; }
  .perm-exception-ai-response .ai-deny-add code { background: rgba(0,0,0,0.2); color: #fff; }
  .perm-exception-btn {
    font-size: 9px; color: #f7768e; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    border: 1px solid rgba(247, 118, 142, 0.25); background: rgba(247, 118, 142, 0.06);
    white-space: nowrap; user-select: none;
  }
  .perm-exception-btn:hover { background: rgba(247, 118, 142, 0.12); }
  /* Deny-rule rows + their green ALLOW "except" entries (opposite of the red
     exception chips above, which are child deny rules). */
  .perm-deny-rules { margin-top: 6px; }
  .perm-deny-rules.collapsed { max-height: 0; overflow: hidden; }
  .perm-deny-rule { border-bottom: 1px solid rgba(255,255,255,0.04); }
  .perm-deny-rule-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
  .perm-deny-rule-head code { flex: 1; font-size: 11px; font-family: 'SF Mono', monospace; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .perm-except-btn {
    font-size: 9px; color: var(--green); cursor: pointer; padding: 2px 7px; border-radius: 4px;
    border: 1px solid rgba(158,206,106,0.3); background: rgba(158,206,106,0.07);
    white-space: nowrap; user-select: none; font-weight: 600;
  }
  .perm-except-btn:hover { background: rgba(158,206,106,0.15); }
  .perm-except-panel { display: none; padding: 2px 8px 8px 34px; }
  .perm-except-panel.open { display: block; }
  .perm-except-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
  .perm-except-kind { flex-shrink: 0; font-size: 11px; opacity: 0.85; }
  .perm-except-row code { font-size: 10px; font-family: 'SF Mono', monospace; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .perm-except-row code.path { color: var(--green); }
  .perm-except-note { font-size: 9px; color: var(--fg-dim); opacity: 0.7; flex: 1; }
  .perm-except-row .remove-except { margin-left: auto; color: var(--fg-dim); cursor: pointer; font-size: 13px; opacity: 0.6; }
  .perm-except-row .remove-except:hover { opacity: 1; color: var(--green); }
  .perm-except-add { display: flex; gap: 6px; margin-top: 5px; }
  .perm-except-add input {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    color: var(--fg); font-size: 10px; padding: 4px 7px; font-family: 'SF Mono', monospace;
  }
  .perm-except-add input:focus { border-color: rgba(158,206,106,0.5); outline: none; }
  .perm-except-add input::placeholder { color: var(--fg-dim); font-size: 10px; font-family: inherit; }
  .perm-except-add .btn { font-size: 10px; padding: 3px 10px; font-weight: 600; }
  .perm-except-ai-response { margin-top: 6px; font-size: 11px; }
  .perm-except-ai-response .ai-allow-add {
    display: inline-flex; align-items: center; gap: 4px; background: var(--green); color: #1a1b26;
    border: none; border-radius: 4px; padding: 4px 9px; margin: 3px 4px 0 0; cursor: pointer; font-size: 11px; font-weight: 600;
  }
  .perm-except-ai-response .ai-allow-add:hover { opacity: 0.85; }
  .perm-except-ai-response .ai-allow-add code { background: rgba(0,0,0,0.2); color: #fff; padding: 1px 4px; border-radius: 3px; }
  .perm-active-rules {
    margin-top: 6px;
  }
  .perm-active-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 12px;
  }
  .perm-active-rule code { flex: 1; font-family: 'SF Mono', monospace; font-size: 11px; }
  .perm-active-rule .remove-rule {
    color: var(--red);
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
  }
  .perm-active-rule .remove-rule:hover { opacity: 1; }

  /* Shadow Approver */
  .ar-panel { }
  .ar-header {
    padding: 12px 12px 10px; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .ar-header-icon {
    width: 28px; height: 28px; border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), #bb9af7);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; color: #fff;
  }
  .ar-header-text h3 { font-size: 13px; font-weight: 600; margin: 0; color: var(--fg); }
  .ar-header-text p { font-size: 10px; color: var(--fg-dim); margin: 2px 0 0; line-height: 1.3; }
  .ar-header-actions { margin-left: auto; display: flex; gap: 6px; }
  .ar-tabs {
    display: flex; border-bottom: 1px solid var(--border); padding: 0 8px;
    background: var(--bg-lighter); flex-shrink: 0; position: relative; z-index: 3;
  }
  .ar-tab {
    padding: 7px 10px; font-size: 11px; font-weight: 500; color: var(--fg-dim);
    cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
    position: relative; white-space: nowrap;
  }
  .ar-tab:hover { color: var(--fg); }
  .ar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .ar-tab .badge {
    display: inline-block; margin-left: 5px; vertical-align: middle;
    font-size: 9px; font-weight: 600;
    background: var(--red); color: #fff; border-radius: 8px;
    padding: 0 5px; min-width: 16px; height: 15px; line-height: 15px;
    text-align: center;
  }
  .ar-content { padding: 12px; box-sizing: border-box; }
  .ar-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 6px; transition: border-color 0.15s; overflow: hidden;
  }
  .ar-card:hover { border-color: var(--accent); }
  .ar-card.disabled { opacity: 0.5; }
  .ar-card-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    cursor: pointer; user-select: none;
  }
  .ar-card-header .expand-arrow {
    font-size: 10px; color: var(--fg-dim); transition: transform 0.2s;
    flex-shrink: 0; width: 16px; text-align: center;
  }
  .ar-card.expanded .expand-arrow { transform: rotate(90deg); }
  .ar-risk {
    font-size: 9px; padding: 2px 7px; border-radius: 8px;
    white-space: nowrap; flex-shrink: 0; font-weight: 600; text-transform: uppercase;
  }
  .ar-risk.low { background: rgba(158,206,106,0.15); color: var(--green); }
  .ar-risk.medium { background: rgba(224,175,104,0.15); color: var(--yellow); }
  .ar-risk.high { background: rgba(247,118,142,0.15); color: var(--red); }
  .ar-risk.unknown { background: rgba(192,192,192,0.15); color: var(--fg-dim); }
  .ar-card-label { flex: 1; font-weight: 500; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ar-card-meta { font-size: 10px; color: var(--fg-dim); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
  .ar-card-detail {
    display: none; padding: 0 12px 12px; font-size: 11px; border-top: 1px solid var(--border);
  }
  .ar-card.expanded .ar-card-detail { display: block; }
  .ar-detail-row { margin-top: 8px; }
  .ar-detail-row label { font-weight: 600; color: var(--fg-dim); font-size: 10px; text-transform: uppercase; display: block; margin-bottom: 2px; }
  .ar-detail-row pre {
    background: var(--bg-lighter); border: 1px solid var(--border); border-radius: 4px;
    padding: 8px 10px; font-size: 11px; white-space: pre-wrap; word-break: break-all;
    max-height: 200px; overflow-y: auto; margin: 0; color: var(--fg);
    font-family: 'SF Mono', 'Menlo', monospace;
  }
  .ar-detail-row .reasoning {
    color: var(--fg-dim); font-style: italic; padding: 4px 0;
  }
  .ar-toggle {
    width: 32px; height: 18px; border-radius: 10px; position: relative;
    background: var(--bg-lighter); border: 1px solid var(--border); cursor: pointer;
    transition: all 0.2s; flex-shrink: 0;
  }
  .ar-toggle::after {
    content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
    background: var(--fg-dim); top: 1px; left: 1px; transition: all 0.2s;
  }
  .ar-toggle.on { background: var(--green); border-color: var(--green); }
  .ar-toggle.on::after { background: #fff; left: 15px; }
  .ar-remove {
    color: var(--fg-dim); cursor: pointer; font-size: 14px; opacity: 0.3;
    flex-shrink: 0; line-height: 1;
  }
  .ar-remove:hover { opacity: 1; color: var(--red); }
  .ar-escalated {
    border-left: 3px solid var(--yellow);
  }
  .ar-escalated-actions { display: flex; gap: 6px; margin-top: 8px; }
  /* Grouped escalation review inside the Shadow Approver "Pending" tab */
  .ar-escalation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ar-escalation-list .ar-card {
    margin-bottom: 0;
  }
  .ar-esc-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 38px;
    padding: 8px 10px; margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    position: sticky; top: 0; z-index: 4;
    background: color-mix(in srgb, var(--bg-light, #1f2335) 96%, #000 4%);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
    box-sizing: border-box;
  }
  .ar-esc-head-title { flex: 1; font-size: 12px; font-weight: 700; color: var(--fg); min-width: 0; }
  /* Bulk actions for the whole pending pile — positive (green) Approve all next to
     a subdued Dismiss all, mirroring the per-row ✓ / ⛔ colour language. */
  .ar-esc-head-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
  .esc-bulk {
    font-size: 10px; line-height: 1; padding: 4px 9px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--bg-lighter); color: var(--fg);
    cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .esc-bulk-approve { border-color: rgba(158,206,106,0.5); color: var(--green); font-weight: 600; }
  .esc-bulk-approve:hover { background: rgba(158,206,106,0.15); border-color: var(--green); }
  .esc-bulk-dismiss { color: var(--fg-dim); }
  .esc-bulk-dismiss:hover { color: var(--fg); border-color: var(--fg-dim); }
  /* One-tap whitelist/block on a group's collapsed header row */
  .esc-quick-actions { display: inline-flex; gap: 4px; margin-left: 8px; }
  .esc-quick {
    font-size: 12px; line-height: 1; padding: 3px 8px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--bg-lighter); color: var(--fg);
    cursor: pointer;
  }
  .esc-quick-ok { border-color: rgba(158,206,106,0.5); color: var(--green); }
  .esc-quick-ok:hover { background: rgba(158,206,106,0.15); }
  .esc-quick-block { border-color: rgba(247,118,142,0.5); color: var(--red); }
  .esc-quick-block:hover { background: rgba(247,118,142,0.15); }
  /* Per-session escalation banner — absolute overlay; never reflows the xterm grid */
  .session-esc-banner {
    display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 30;
    align-items: center; gap: 10px;
    padding: 7px 12px; font-size: 12px;
    color: var(--fg);
    background: rgba(40,17,24,0.96); backdrop-filter: blur(2px);
    border-bottom: 1px solid var(--red);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  }
  .session-esc-icon { font-size: 14px; }
  .session-esc-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .session-esc-text strong { font-family: var(--mono, monospace); }
  .session-esc-review {
    font-size: 11px; padding: 3px 10px; border-radius: 5px; white-space: nowrap;
    border: 1px solid rgba(122,162,247,0.55); background: rgba(122,162,247,0.18); color: var(--fg); cursor: pointer;
  }
  .session-esc-review:hover { background: rgba(122,162,247,0.3); }
  .session-esc-x {
    font-size: 16px; line-height: 1; padding: 0 4px; border: none;
    background: none; color: var(--fg-dim); cursor: pointer;
  }
  .session-esc-x:hover { color: var(--fg); }
  /* App-level Full Disk Access banner — fixed top bar. Shown only when macOS FDA is
     missing AND there is at least one network/Dropbox-backed session (so it never nags
     users who don't need it). One grant stops the repeating "network volume" prompt. */
  .fda-capability-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4100;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; font-size: 12.5px; color: var(--fg);
    background: rgba(45,37,15,0.97); backdrop-filter: blur(3px);
    border-top: 1px solid var(--yellow);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
  }
  .fda-banner-icon { font-size: 15px; }
  .fda-banner-text { flex: 1; }
  .fda-banner-text strong { font-family: var(--mono, monospace); }
  .fda-capability-banner button { font-size: 11px; padding: 4px 11px; border-radius: 5px; white-space: nowrap; cursor: pointer; border: 1px solid transparent; }
  .fda-banner-grant { border-color: rgba(158,206,106,0.6); background: rgba(158,206,106,0.2); color: var(--fg); }
  .fda-banner-grant:hover { background: rgba(158,206,106,0.34); }
  .fda-banner-later { border-color: rgba(122,162,247,0.5); background: rgba(122,162,247,0.14); color: var(--fg); }
  .fda-banner-later:hover { background: rgba(122,162,247,0.28); }
  .fda-banner-never { border: none; background: none; color: var(--fg-dim); }
  .fda-banner-never:hover { color: var(--fg); text-decoration: underline; }
  .term-container[data-terminal-input="locked"] .xterm-cursor-layer { opacity: 0.25; }
  .ar-decision-badge {
    font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 600;
  }
  .ar-decision-badge.approved { background: rgba(158,206,106,0.15); color: var(--green); }
  .ar-decision-badge.escalated { background: rgba(224,175,104,0.15); color: var(--yellow); }
  .ar-decision-badge.denied { background: rgba(247,118,142,0.15); color: var(--red); }
  .ar-empty {
    padding: 20px; text-align: center; color: var(--fg-dim); font-size: 12px;
  }
  .ar-timeline-time { font-size: 10px; color: var(--fg-dim); white-space: nowrap; }
  /* Legacy auto-approval cards (from history scan) */
  .aa-section { padding: 12px; }
  .aa-section-header {
    font-size: 12px; font-weight: 600; color: var(--fg-dim); margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .aa-suggestion {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    background: rgba(122,162,247,0.04); border: 1px dashed var(--border); border-radius: 6px;
    margin-bottom: 4px; font-size: 12px;
  }
  .aa-suggestion .btn { font-size: 10px; padding: 3px 10px; white-space: nowrap; }
  .aa-category {
    font-size: 9px; padding: 2px 7px; border-radius: 8px;
    background: rgba(122,162,247,0.1); color: var(--accent);
    white-space: nowrap; flex-shrink: 0;
  }
  .aa-example {
    font-size: 10px; color: var(--fg-dim); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px;
  }
  .aa-pattern {
    font-size: 10px; color: var(--fg-dim); font-family: 'SF Mono', monospace;
    margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .aa-count {
    font-size: 10px; color: var(--fg-dim); white-space: nowrap;
  }

  /* Responsive */
  @media (max-width: 768px) {
    #sidebar { position: fixed; z-index: 50; height: 100%; top: 44px; }
    #sidebar.collapsed { display: none; }
    :root { --sidebar-width: 240px; }
    /* The narrow sidebar is an overlay drawer, so the terminal keeps the full viewport width.
       Keep actionable resume UI inside the uncovered pane while that drawer is open. */
    #sidebar:not(.collapsed) + #sidebar-resize + div .snapshot-loading-overlay.resume-awaiting-user {
      left: var(--sidebar-width);
    }
  }

  /* Toast notification system */
  #toast-container {
    position: fixed; top: 52px; right: 20px; z-index: 10000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; max-width: 420px;
  }
  .toast {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bg-light); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none; cursor: default;
    transform: translateX(120%); opacity: 0;
    transition: transform 0.35s cubic-bezier(0.21,1.02,0.73,1), opacity 0.35s ease;
    max-width: 420px; min-width: 280px;
  }
  .toast.show { transform: translateX(0); opacity: 1; }
  .toast.hide { transform: translateX(120%); opacity: 0; }
  .toast.interactive { pointer-events: auto; cursor: pointer; }
  .toast-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
  }
  .toast-icon.success { background: rgba(158,206,106,0.15); color: var(--green); }
  .toast-icon.error { background: rgba(247,118,142,0.15); color: var(--red); }
  .toast-icon.warning { background: rgba(224,175,104,0.15); color: var(--yellow); }
  .toast-icon.info { background: rgba(122,162,247,0.15); color: var(--accent); }
  .toast-body { flex: 1; min-width: 0; }
  .toast-title { font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
  .toast-msg { font-size: 11px; color: var(--fg-dim); line-height: 1.4; word-break: break-word; }
  .toast-count {
    display: inline-flex; margin-top: 5px; padding: 1px 5px;
    border: 1px solid var(--border); border-radius: 4px;
    color: var(--fg-muted); font-size: 10px; font-variant-numeric: tabular-nums;
  }
  .toast-close {
    width: 24px; height: 24px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; color: var(--fg-dim); cursor: pointer;
    font-size: 18px; padding: 0; line-height: 1; flex-shrink: 0;
    pointer-events: auto;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .toast-close:hover,
  .toast-close:focus-visible {
    background: rgba(255,255,255,0.06);
    border-color: var(--border);
    color: var(--fg);
    outline: none;
  }
  .toast-progress {
    position: absolute; bottom: 0; left: 0; height: 2px;
    border-radius: 0 0 12px 12px; transition: width linear;
  }
  .toast-progress.success { background: var(--green); }
  .toast-progress.error { background: var(--red); }
  .toast-progress.warning { background: var(--yellow); }
  .toast-progress.info { background: var(--accent); }

  /* Screenshot Tool */
  #screenshot-editor {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 100001; display: none; background: rgba(0,0,0,0.85);
    flex-direction: column; align-items: center; justify-content: center;
  }
  #screenshot-editor.active { display: flex; }
  #screenshot-editor .ss-toolbar {
    display: flex; gap: 4px; padding: 6px 10px; background: var(--bg-light);
    border-radius: 8px; margin-bottom: 8px; align-items: center;
    border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  #screenshot-editor .ss-toolbar button {
    background: none; border: 1px solid transparent; color: var(--fg-dim);
    padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; gap: 4px;
  }
  #screenshot-editor .ss-toolbar button:hover { background: var(--bg-lighter); color: var(--fg); }
  #screenshot-editor .ss-toolbar button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  #screenshot-editor .ss-toolbar .ss-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
  #screenshot-editor .ss-toolbar input[type=color] {
    width: 24px; height: 24px; border: none; background: none; cursor: pointer;
    padding: 0; border-radius: 4px;
  }
  #screenshot-editor .ss-toolbar select {
    background: var(--bg); color: var(--fg); border: 1px solid var(--border);
    padding: 2px 4px; border-radius: 4px; font-size: 11px;
  }
  #screenshot-editor .ss-canvas-wrap {
    position: relative; border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    max-width: 90vw; max-height: calc(100vh - 80px); overflow: auto;
  }
  #screenshot-editor .ss-canvas-wrap canvas { display: block; }

  /* ── WP-5 machine surfaces (docs/remote-machine-hub-sessions-2026-10-22.html §6.6, D-11) ──
     The machine chip is the branch badge's twin: same inline-block/ellipsis behaviour, its own
     hue so the two never read as one badge. A local session renders NO chip at all. */
  .machine-chip {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    background: color-mix(in srgb, var(--purple) 15%, transparent);
    color: var(--purple);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 2px;
  }
  /* Unreachable is a STATE, not a different badge: the chip keeps its place and says the row is
     showing another machine's last known state. */
  .machine-chip.unreachable {
    background: color-mix(in srgb, var(--yellow) 16%, transparent);
    color: var(--yellow);
    border: 1px dashed color-mix(in srgb, var(--yellow) 40%, transparent);
  }
  /* Sidebar rows: the machine chip NAMES where the session runs, so in a row that carries one,
     every other shrinkable item shrinks 5x faster than the chip (their ratios to each other are
     unchanged: the branch badge still yields 20x faster than the title). The chip keeps its name
     until the title reaches its 7ch floor. No min-width floor is added and the chip's factor stays
     1, so no row's minimum width changes and no row overflows that does not overflow today — a
     factor below 1 would under-shrink once the chip is the last item shrinking (CSS Flexbox
     §9.7 step 4c). docs/sidebar-machine-chip-readable-2026-10-23.html D-1. */
  .session-item .machine-chip { flex-shrink: 1; max-width: 96px; }
  .session-item:has(.machine-chip) .label,
  .session-item:has(.machine-chip) .session-owner-chip,
  .session-item:has(.machine-chip) .session-lifecycle-chip,
  .session-item:has(.machine-chip) .worktree-attn-badge,
  .session-item:has(.machine-chip) .status-tag:not(.bg-terminal) { flex-shrink: 5; }
  .session-item:has(.machine-chip) .branch-badge { flex-shrink: 100; }
  .session-item.active .machine-chip {
    color: #111827;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
    font-weight: 700;
  }
  /* The recent-item meta row manages its own gap. */
  .recent-item .recent-meta .machine-chip { margin-left: 0; }
  /* Tabs: a clipped title still hides the branch badge, but the machine chip never hides — it
     keeps a glyph floor (docs/sidebar-machine-chip-readable-2026-10-23.html D-3). */
  .tab > .machine-chip { max-width: 64px; min-width: 2.6em; }

  /* New-session machine cards: the agent grid's twin, auto-fitting so one machine does not
     stretch across three columns. WP-4 (S-20/D-1): the track is capped at a third of the grid, so
     the row can never exceed three columns — and therefore never exceeds two rows for the five cards
     D-1 allows. No max-height hack; `auto-fit` still lets a single machine fill the row. */
  .ns-machine-grid {
    grid-template-columns: repeat(auto-fit, minmax(max(132px, calc((100% - 16px) / 3)), 1fr));
  }
  .ns-machine-card {
    border-style: dashed;
  }
  .ns-machine-card.selected {
    border-style: solid;
  }
  .ns-machine-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .ns-machine-card .ns-card-sub {
    overflow-wrap: anywhere;
  }
  /* WP-4 (D-1/AC-4e): a long name ellipsizes on one line; the same name is in the card's title, so
     nothing is lost to the clip (the lesson from docs/sidebar-machine-chip-readable-2026-10-23.md). */
  .ns-machine-card .ns-card-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* WP-4 (D-12): the box's live numbers are the card's third line. */
  .ns-machine-card .ns-card-load {
    font-size: 10px;
    color: var(--fg-dim);
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  /* WP-4 (item 7): the "Manage machines" link under the grid, mounted by the renderer. */
  .ns-machine-manage {
    display: inline-block;
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--accent, #7aa2f7);
    text-decoration: none;
    cursor: pointer;
  }
  .ns-machine-manage:hover { text-decoration: underline; }
  .ns-machine-hint {
    font-size: 11px;
    color: var(--fg-dim);
    margin: 2px 0 6px;
    line-height: 1.4;
  }
  .ns-machine-hint.warn { color: var(--yellow); }

  /* Machines page — WP-5 (docs/machine-pool-picker-pairing-dashboard-2026-10-24.html D-14/S-20).
     Replaces the old Settings → Machines card. The card grid scrolls; nothing here caps a height. */
  .machines-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .machines-page-header h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
  .machines-page-header p { margin: 0; font-size: 12px; color: var(--fg-dim); line-height: 1.5; max-width: 62ch; }
  .machines-page-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .machines-page-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; }
  .machines-page-error { padding: 10px 12px; border: 1px solid var(--red); border-radius: 8px; color: var(--red); font-size: 12px; }
  .machines-page-loading, .machines-page-note { padding: 8px 2px; font-size: 12px; color: var(--fg-dim); }
  .machines-page-toast { display: none; padding: 8px 20px; font-size: 12px; color: var(--fg-dim); border-top: 1px solid var(--border); }
  .machines-page-toast.show { display: block; }

  .machine-page-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-panel, var(--bg));
    padding: 10px 12px;
  }
  .machine-page-self { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .mpc-head { display: flex; align-items: center; gap: 8px; }
  .mpc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); }
  .mpc-dot[data-health="reachable"] { background: var(--green); }
  .mpc-dot[data-health="unreachable"] { background: var(--red); }
  .mpc-dot[data-health="unhealthy"] { background: var(--yellow); }
  /* A rename is a free-text field on the card itself — it must stay legible at every width, so it
     ellipsizes on one line and carries the same name in its title (wp-4 D-1 lesson). */
  .mpc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--fg);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
  }
  .mpc-name:hover { border-color: var(--border); }
  .mpc-name:focus { border-color: var(--accent); outline: none; background: var(--bg); }
  .mpc-cred { flex: 0 0 auto; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--fg-dim) 15%, transparent); color: var(--fg-dim); }
  .mpc-cred[data-cred="pool"] { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
  .mpc-cred[data-cred="env"] { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
  .mpc-cred[data-cred="missing"] { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
  .mpc-meta { margin: 4px 0 8px; font-size: 11px; color: var(--fg-dim); }
  /* WP-3: the box's update status line, next to the meta line it belongs with. Same size, no new
     colours — every tone comes from the theme variables the card already uses (dot/health tokens). */
  .mpc-fleet { margin: 0 0 8px; font-size: 11px; overflow-wrap: anywhere; }
  .mpc-fleet[data-fleet-tone="ok"] { color: var(--green); }
  .mpc-fleet[data-fleet-tone="pending"] { color: var(--yellow); }
  .mpc-fleet[data-fleet-tone="warn"] { color: var(--red); }
  .mpc-fleet[data-fleet-tone="muted"] { color: var(--fg-dim); }
  .mpc-stale { margin-left: 6px; padding: 0 4px; border-radius: 3px; background: var(--warning-soft); color: var(--yellow); }
  .mpc-sparks { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
  .mpc-spark { display: flex; align-items: center; gap: 6px; }
  .mpc-spark-label { font-size: 10px; color: var(--fg-dim); width: 2.4em; }
  .mpc-spark-val { font-size: 11px; color: var(--fg); width: 3em; text-align: right; }
  .machine-spark { display: block; }
  .machine-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .mpc-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; }
  .mpc-fact { display: flex; gap: 6px; font-size: 11px; min-width: 0; }
  .mpc-fact dt { color: var(--fg-dim); }
  .mpc-fact dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
  .mpc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .mpc-btn {
    font-size: 11px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
  }
  .mpc-btn:hover { background: var(--bg-hover); }
  .mpc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .mpc-primary { border-color: var(--accent); color: var(--accent); }
  .mpc-danger { border-color: var(--red); color: var(--red); }
  .mpc-fav[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
  /* hub bridge (R-13): who may use this Mac, open asks, grants and recent use, per card. */
  .mpc-access { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--fg); }
  .mpc-access-head { display: flex; align-items: center; gap: 8px; }
  .mpc-trust { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); }
  /* reverse reach (WP-R4): the grant dialog's two choice rows, and the "Through a link" chip. */
  .mpc-reach-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; }
  .mpc-reach-choices .mpc-trust { font-size: 12px; color: var(--fg); cursor: pointer; }
  .mpc-cred[data-cred="reach"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
  [data-reach-section] .mpc-access-list { font-size: 12px; }
  [data-reach-section] .mpc-grant { flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
  [data-reach-section] .mpc-grant > * { flex: 0 0 auto; max-width: 100%; word-break: normal; overflow-wrap: break-word; }
  [data-reach-section] [data-reach-state="connected"] { color: var(--green); }
  .mpc-trust-select { font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); }
  .mpc-trust-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); cursor: pointer; }
  .mpc-access-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
  .mpc-pending, .mpc-grant, .mpc-audit { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mpc-pending { color: var(--yellow); }
  .mpc-audit { color: var(--fg-dim); }
  /* WP-7 D-13: the audit list is a collapsed <details>; only the failure verdict takes the danger
     colour, so a card with one denied call still reads at a glance. */
  .mpc-audit-log { margin-top: 6px; }
  .mpc-audit-summary { cursor: pointer; color: var(--fg-dim); }
  .mpc-audit-fail, .mpc-audit-failed { color: var(--red); }
  .mpc-access-text { overflow-wrap: anywhere; }
  .mpc-access-btn { padding: 2px 8px; }
  /* The hub-bridge approval ask (docs/hub-bridge-approval-banner-cutoff-2026-10-31.html, redesigned by
     docs/hub-bridge-approval-scopes-2026-11-01.html §6.5). An absolute overlay in the asking session's
     .term-container, like .compact-banner. It never lives in the toolbar / tab strip (it crushed the
     tabs and clipped its own buttons), and it never takes terminal rows (no SIGWINCH). The sentence and
     its detail line WRAP: they are the thing being approved, so they are never ellipsized. */
  .hub-bridge-banner {
    position: absolute; top: 8px; right: 10px; z-index: 12; box-sizing: border-box;
    width: min(440px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px 10px; background: var(--bg-light); color: var(--fg);
    border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: 10px;
    box-shadow: 0 12px 32px var(--shadow-color); font-size: 13px; line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  }
  .hbb-btn, .hbb-deny { font-family: inherit; }
  .hbb-head { display: flex; gap: 10px; align-items: flex-start; }
  .hbb-icon {
    flex: 0 0 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
    background: var(--warning-soft); color: var(--yellow);
  }
  .hub-bridge-banner-text { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .hub-bridge-banner-text b { font-weight: 600; }
  .hbb-tier {
    flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--yellow); background: var(--warning-soft); border-radius: 999px; padding: 2px 8px;
  }
  .hbb-detail {
    margin-left: 32px; padding: 5px 8px; border-radius: 6px; background: var(--code-bg); color: var(--fg-muted);
    font: 11.5px/1.45 var(--font-mono, "SF Mono", Menlo, monospace); white-space: pre-wrap; overflow-wrap: anywhere;
  }
  /* Three columns (label | this session | all sessions); each pair is a subgrid, so the two rows'
     buttons line up even though the primary's bold label is wider. */
  .hbb-grants { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 6px 10px; align-items: center; margin-left: 32px; }
  .hbb-label { font-size: 11px; color: var(--fg-muted); white-space: nowrap; }
  .hbb-seg { display: grid; grid-column: 2 / span 2; grid-template-columns: subgrid; column-gap: 0; }
  .hbb-btn {
    font-size: 12px; line-height: 1; padding: 7px 12px; border: 1px solid var(--border);
    background: var(--bg-lighter); color: var(--fg); cursor: pointer;
  }
  .hbb-seg .hbb-btn:first-child { border-radius: 7px 0 0 7px; }
  .hbb-seg .hbb-btn + .hbb-btn { border-left: 0; border-radius: 0 7px 7px 0; }
  .hbb-btn:hover { background: var(--bg-hover); }
  .hbb-btn.hbb-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
  .hbb-btn.hbb-primary:hover { background: var(--accent-hover); }
  .hbb-btn:focus-visible, .hbb-deny:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  .hbb-foot { display: flex; justify-content: space-between; align-items: center; margin-left: 32px; }
  .hbb-note { font-size: 11px; color: var(--fg-dim); }
  .hbb-deny {
    font-size: 12px; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--fg-muted); cursor: pointer;
  }
  .hbb-deny:hover { color: var(--red); background: var(--danger-soft); }
  /* The Machines-page Access block's pending row reuses the same grant groups, with no 32 px indent
     (the row already carries the card's own text and its own Deny). */
  .mpc-access .hbb-grants { margin-left: 0; flex: 1 1 240px; min-width: 0; }
  .term-container > .session-toolbar ~ .hub-bridge-banner { top: 42px; }
  .term-container:has(> .hub-bridge-banner) > .compact-banner { display: none; }
  @media (max-width: 720px) {
    .hub-bridge-banner { left: 8px; right: 8px; width: auto; }
    .hbb-grants { grid-template-columns: 1fr; margin-left: 0; }
    .hbb-detail, .hbb-foot { margin-left: 0; }
    .hbb-seg { display: flex; grid-column: auto; } .hbb-seg .hbb-btn { flex: 1 1 0; }
  }

  /* The Add-machine / show-a-code dialogs. */
  .machine-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    z-index: 400;
  }
  .machine-modal {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated, var(--bg));
    box-shadow: 0 18px 46px var(--shadow-color);
  }
  .machine-modal h3 { margin: 0 0 4px; font-size: 14px; }
  .machine-modal-sub { margin: 0 0 10px; font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
  .machine-modal-label { display: block; font-size: 11px; color: var(--fg-dim); margin-bottom: 4px; }
  .machine-modal-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--fg);
    font-size: 12px;
    padding: 6px 8px;
    font-family: inherit;
  }
  .machine-modal-or { margin: 10px 0; font-size: 11px; color: var(--fg-dim); text-align: center; }
  .machine-modal-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .machine-modal-row .machine-modal-input { flex: 1 1 180px; width: auto; min-width: 140px; }
  .machine-pair-preview { margin-top: 6px; font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
  .machine-pair-preview.good { color: var(--green); }
  .machine-pair-preview.bad { color: var(--red); }
  .machine-modal-error { margin-top: 8px; font-size: 12px; color: var(--red); }
  .machine-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
  .machine-modal-legacy { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
  .machine-modal-legacy summary { font-size: 11px; color: var(--fg-dim); cursor: pointer; }
  .machine-modal-legacy .machine-modal-row { margin-top: 8px; }
  .machine-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--accent);
    text-align: center;
    padding: 10px 0;
    user-select: all;
  }

  /* WP-9 (§9 S-9): the row's one Skills line and the Review dialog it opens. */
  .mpc-skills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .mpc-skills-line { font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
  .mpc-skills-review { flex: 0 0 auto; }
  /* WP-3 (§8 WP-3): the row's one Models line, its /delegate warnings, and the Review button. */
  .mpc-models { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .mpc-models-line { font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
  .mpc-models-sep { font-size: 11px; color: var(--fg-dim); }
  .mpc-models-review { flex: 0 0 auto; }
  .mpc-models-warn { flex-basis: 100%; font-size: 11px; color: var(--red); overflow-wrap: anywhere; }
  .mpc-review-modal { width: min(760px, calc(100vw - 32px)); }
  .mpc-review-section { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
  .mpc-review-section h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
  .mpc-review-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .mpc-review-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
  .mpc-review-name { font-weight: 600; }
  .mpc-review-meta, .mpc-review-where, .mpc-review-note { font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
  .mpc-review-note { margin: 6px 0 0; }
  .mpc-review-note.bad { color: var(--red); }
  .mpc-review-empty { font-size: 11px; color: var(--fg-dim); }
  .mpc-review-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  /* WP-4 (§8 WP-4): the unreachable rows' one control — the tick, then the button under the list. */
  .mpc-review-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .mpc-review-pick input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
  .mpc-review-models-remove { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  /* WP-5 (§8 WP-5): "From this hub" — a heading level under the Models one, one button per row. */
  .mpc-review-from-hub { margin-top: 10px; }
  .mpc-review-from-hub h5 { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--fg-dim); }
  .mpc-review-plugins { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
  .mpc-review-plugin { display: flex; align-items: center; gap: 6px; }
  .mpc-review-diff {
    flex: 1 1 100%;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.45;
  }
  .mpc-diff { display: flex; flex-direction: column; }
  .mpc-diff span { white-space: pre-wrap; overflow-wrap: anywhere; }
  .mpc-diff-file { margin: 8px 0 2px; font-size: 11px; font-weight: 600; }
  .mpc-diff-binary { margin: 0 0 4px; font-size: 11px; color: var(--fg-dim); }
  .mpc-diff-add { color: var(--green); }
  .mpc-diff-del { color: var(--red); }
  .mpc-diff-eq { color: var(--fg-dim); }