:root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: var(--surface-2);          /* hover/raised surface */
    --border: #30363d;
    --text: #c9d1d9;
    --text-muted: #8b949e;
    --text-secondary: #8b949e;  /* alias for --text-muted; legacy var name still in use */
    /* Muted slate-blue per the Omnara look — the previous #58a6ff was a
       full-saturation github-blue that made every pill / "+ New session"
       button / IN GROUP CHAT label / active-state badge in the sidebar
       read as a bright spotlight. The new value is the same hue family
       but desaturated and one step darker so it still reads as "the
       accent" without dominating the page. */
    --accent: #6e8caf;
    --green: #3fb950;
    --orange: #d29922;
    --purple: #bc8cff;
    --red: #f85149;
    --cyan: #39d2c0;
    --accent-contrast: #ffffff;     /* readable text/icon color on var(--accent) */
    --status-rail-width: 260px;
    /* Inter primary, system stack fallback. Inter is loaded from Google Fonts
       in index.html with `display=swap`, so the system font paints first and
       Inter takes over once it's fetched. The Omnara-style geometric look
       (Linear, Notion, Vercel) comes from Inter — apply it everywhere, not
       just in the standalone PWA window. */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }
  :root[data-theme="light"] {
    --bg: #ffffff;
    --surface: #f6f8fa;
    --surface-2: #eaeef2;
    --border: #d0d7de;
    --text: #1f2328;
    --text-muted: #57606a;
    --text-secondary: #57606a;
    --accent: #0969da;
    --green: #1a7f37;
    --orange: #9a6700;
    --purple: #8250df;
    --red: #cf222e;
    --cyan: #0e7490;
  }
  :root[data-font="mono"] {
    --font-ui: 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: var(--font-ui);
    /* Inter-specific OpenType features. These are no-ops for the system
       fallback stack but make Inter look the way it's supposed to —
       contextual alternates, kerning, ligatures, and the stylistic set
       that gives the round dotted-circle 'i' and tighter letter shapes. */
    font-feature-settings: "kern", "liga", "calt", "ss01";
    /* Inter at 13–15px reads slightly looser than SF Pro; pull it in
       by half a hair to match the Omnara-style density. */
    letter-spacing: -0.005em;
    background: var(--bg); color: var(--text);
    display: flex; height: 100vh; overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
  }
  /* Keyboard-nav focus ring — only shown when focusing via keyboard */
  :focus { outline: none; }
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  .kanban-card:focus-visible,
  .conv-item:focus-visible,
  .tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Sidebar */
  .sidebar {
    width: 380px; min-width: 240px; max-width: calc(100vw - 200px);
    background: var(--surface);
    display: flex; flex-direction: column; overflow: hidden;
    flex-shrink: 0;
    container-type: inline-size; container-name: sidebar;
  }
  .sidebar-resizer {
    width: 6px; cursor: col-resize; flex-shrink: 0;
    background: var(--border);
    transition: background 0.15s;
    position: relative;
  }
  .sidebar-resizer:hover,
  .sidebar-resizer.dragging {
    background: var(--accent);
  }
  .sidebar-resizer::before {
    content: ''; position: absolute;
    left: -4px; right: -4px; top: 0; bottom: 0;
  }
  body.resizing { cursor: col-resize; user-select: none; }
  body.resizing * { pointer-events: none; }
  .sidebar-header {
    padding: 16px; border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .sidebar-header .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .log-list { overflow-y: auto; padding: 8px; flex: 0 1 auto; max-height: 50vh; }

  /* Tool filters */
  .tool-filters {
    border-top: 1px solid var(--border); padding: 10px 12px;
    overflow-y: auto; min-height: 0; flex-shrink: 0;
  }
  .tool-filters-header {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .tool-filters-header .toggle-all {
    font-size: 10px; cursor: pointer; color: var(--accent);
    font-weight: 400; text-transform: none;
  }
  .tool-filters-header .toggle-all:hover { text-decoration: underline; }
  .tool-filter-item {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 0; font-size: 12px; cursor: pointer;
  }
  .tool-filter-item input { accent-color: var(--orange); cursor: pointer; }
  .tool-filter-item .tool-label { color: var(--text); }
  .tool-filter-item .tool-count { color: var(--text-muted); font-size: 10px; margin-left: auto; }

  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  /* Vercel deploy status — compact pill in the global topbar. The "not
     configured" / state details live in the pill's title attribute (hover
     tooltip) so the conversation sidebar stays focused on conversations. */
  .deploy-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted); display: inline-block;
  }
  .deploy-dot.ready { background: var(--green); }
  .deploy-dot.error { background: var(--red); }
  .deploy-dot.building { background: #FBCA04; animation: pulse 2s infinite; }
  .sh-btn-deploy {
    display: inline-flex; align-items: center; gap: 5px;
    text-decoration: none;
  }
  .sh-btn-deploy .deploy-label {
    font-size: 11px; color: var(--text-muted);
  }
  .sh-btn-deploy:hover .deploy-label { color: var(--text); }

  .log-item {
    padding: 10px 12px; border-radius: 6px; cursor: pointer;
    margin-bottom: 4px; transition: background 0.15s;
  }
  .log-item:hover { background: var(--surface-2); }
  .log-item.active { background: var(--surface-2); border-left: 3px solid var(--accent); }
  .log-item .issue { font-weight: 600; color: var(--accent); font-size: 14px; }
  .log-item .meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

  /* Main */
  /* min-width: 0 lets the main column shrink below its content's intrinsic
     width — without it, the toolbar's non-wrapping buttons set a floor that
     prevents the sidebar resizer from making the conversation pane narrow. */
  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
  .conv-pane.has-conv-bg {
    --bg: var(--conv-bg);
    --surface: var(--conv-surface);
    --surface-2: var(--conv-surface-2);
    --border: var(--conv-border);
    --text: var(--conv-text);
    --text-muted: var(--conv-text-muted);
    --text-secondary: var(--conv-text-muted);
    --accent: var(--conv-accent);
    background: var(--conv-bg);
    color: var(--conv-text);
  }
  .conv-pane.has-conv-bg .conversations-view {
    background: var(--conv-bg);
  }
  .toolbar {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 8px;
    background: var(--surface); font-size: 13px;
  }
  /* #1 — Collapse the conv toolbar to zero height when JS marks it
     `.is-empty`. Toggled by an observer that watches for visible
     children; cleaner and more reliable than a :has() selector that
     doesn't pick up dynamic display:none toggles. */
  .toolbar.is-empty {
    padding: 0 !important; border-bottom: none !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }
  body.conversation-popout .sidebar,
  body.conversation-popout #sidebarResizer,
  body.conversation-popout #kanbanLayout,
  body.conversation-popout .pwa-install-banner {
    display: none !important;
  }
  body.conversation-popout .main {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
    width: 100vw;
    height: 100vh;
    flex: 1 1 auto;
  }
  body.conversation-popout .toolbar {
    display: none !important;
  }
  body.conversation-popout .ccc-topbar,
  body.conversation-popout .font-size-controls,
  body.conversation-popout #mobileBackBtn,
  body.conversation-popout .conv-pane-drop-overlay {
    display: none !important;
  }
  body.conversation-popout #convSplit {
    min-height: 0;
    height: 100%;
  }
  body.conversation-popout .conversations-view {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* #2 — Mobile-back button: only show on narrow viewports. The button
     is captured into the rail's _railSet, but we don't want it visually
     leaking into desktop. Hide unless the viewport is mobile-narrow. */
  .mobile-back-btn,
  #mobileBackBtn { display: none !important; }
  @media (max-width: 720px) {
    .mobile-back-btn,
    #mobileBackBtn { display: inline-flex !important; }
  }
  .toolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-muted); }
  .toolbar input[type="checkbox"] { accent-color: var(--accent); }
  .toolbar .status { margin-left: auto; color: var(--text-muted); }
  .toolbar .resume-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    background: rgba(57, 210, 192, 0.12); color: var(--cyan);
    border: 1px solid rgba(57, 210, 192, 0.3);
    font-size: 12px; font-weight: 600; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
  }
  .toolbar .resume-btn:hover { background: rgba(57, 210, 192, 0.2); }
  .toolbar .resume-btn:active { transform: scale(0.97); }
  .toolbar .resume-btn.copied {
    background: rgba(63, 185, 80, 0.2); color: var(--green);
    border-color: rgba(63, 185, 80, 0.4);
  }
  .toolbar .resume-btn.stale {
    background: rgba(210, 153, 34, 0.12); color: var(--orange);
    border-color: rgba(210, 153, 34, 0.35);
  }
  .toolbar .resume-btn.stale:hover { background: rgba(210, 153, 34, 0.2); }
  .toolbar .resume-btn.stale.copied {
    background: rgba(63, 185, 80, 0.2); color: var(--green);
    border-color: rgba(63, 185, 80, 0.4);
  }
  .toolbar .resume-btn .resume-icon { font-size: 10px; }
  .toolbar .jump-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    background: rgba(188, 140, 255, 0.12); color: var(--purple);
    border: 1px solid rgba(188, 140, 255, 0.35);
    font-size: 12px; font-weight: 600; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
  }
  .toolbar .jump-btn:hover { background: rgba(188, 140, 255, 0.22); }
  .toolbar .jump-btn:active { transform: scale(0.97); }
  .toolbar .jump-btn.pulsing {
    animation: pulse 2s infinite;
  }
  .toolbar .jump-btn .jump-icon { font-size: 13px; line-height: 1; }
  .launch-split {
    display: inline-flex; align-items: stretch;
    position: relative;
  }
  .toolbar .launch-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    background: rgba(88, 166, 255, 0.12); color: var(--accent);
    border: 1px solid rgba(88, 166, 255, 0.35);
    font-size: 12px; font-weight: 600; font-family: inherit;
    transition: background 0.15s, transform 0.1s;
  }
  .toolbar .launch-btn:hover { background: rgba(88, 166, 255, 0.22); }
  .toolbar .launch-btn:active { transform: scale(0.97); }
  .toolbar .launch-btn.launching { opacity: 0.6; }
  .toolbar .launch-btn.opening { opacity: 0.6; }
  .toolbar .launch-split .launch-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .launch-choice-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 8px; margin-left: -1px;
    border-radius: 0 6px 6px 0; cursor: pointer;
    background: rgba(88, 166, 255, 0.12); color: var(--accent);
    border: 1px solid rgba(88, 166, 255, 0.35);
    font-size: 11px; font-weight: 700; font-family: inherit;
    line-height: 1;
    transition: background 0.15s, transform 0.1s;
  }
  .launch-choice-btn:hover { background: rgba(88, 166, 255, 0.22); }
  .launch-choice-menu {
    display: none;
    position: absolute; left: 0; top: calc(100% + 4px);
    min-width: 170px; padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 60;
  }
  .launch-choice-menu.open { display: block; }
  .launch-choice-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 7px 12px;
    background: transparent; border: none; border-radius: 0;
    color: var(--text); cursor: pointer;
    font-size: 13px; font-family: inherit; text-align: left;
    white-space: nowrap;
  }
  .launch-choice-item:hover { background: var(--surface-2); }
  .launch-choice-item:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.58;
  }
  .launch-choice-item:disabled:hover { background: transparent; }
  .launch-choice-hint {
    color: var(--text-muted);
    font-size: 11px;
  }
  /* Close & announce — full ship+broadcast flow. Lives in convToolbar so
     it's available without the user having to scroll up to the sticky
     "Original ask" header. */
  .toolbar .announce-btn-conv {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    background: var(--purple); color: #fff;
    border: 1px solid var(--purple);
    font-size: 12px; font-weight: 600; font-family: inherit;
    transition: opacity 0.15s, transform 0.1s;
  }
  .toolbar .announce-btn-conv:hover { opacity: 0.9; }
  .toolbar .announce-btn-conv:active { transform: scale(0.97); }
  .toolbar .announce-btn-conv:disabled { opacity: 0.6; cursor: default; }
  /* "⋯" overflow menu on the right side of the conv toolbar — currently
     surfaces "Move to repo…" but designed to grow other per-session
     actions later. */
  .conv-overflow-wrap { position: relative; }
  .conv-overflow-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 16px; line-height: 1;
    padding: 2px 9px; border-radius: 4px; cursor: pointer;
    margin-left: 6px;
  }
  .conv-overflow-btn:hover { color: var(--text); background: var(--surface-2); }
  .conv-overflow-menu {
    display: none;
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    min-width: 220px; max-width: 320px;
    z-index: 50;
    padding: 6px 0;
  }
  .conv-overflow-menu.open { display: block; }
  .conv-overflow-menu .com-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    padding: 4px 12px;
  }
  .conv-overflow-menu .com-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 12px;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--text);
    text-align: left;
  }
  .conv-overflow-menu .com-item:hover { background: var(--surface-2); }
  .conv-overflow-menu .com-item.com-current {
    color: var(--text-muted); cursor: default;
  }
  .conv-overflow-menu .com-item.com-current:hover { background: transparent; }
  .conv-overflow-menu .com-divider {
    height: 1px; background: var(--border); margin: 6px 0;
  }
  .conv-overflow-menu .com-repo-path {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 11px; color: var(--text-muted); margin-left: auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
  }
  .content {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    scroll-behavior: smooth;
  }
  .empty-state {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); font-size: 15px;
  }

  /* Events */
  .event { margin-bottom: 12px; padding: 10px 14px; border-radius: 6px; border-left: 3px solid transparent; }

  .event.system {
    background: rgba(56, 139, 253, 0.08); border-left-color: var(--accent);
    font-size: 13px; color: var(--text-muted);
  }
  .event.system .label { color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 11px; }

  .event.assistant { background: rgba(188, 140, 255, 0.06); border-left-color: var(--purple); }
  .event.tool_result { display: none; } /* hide tool results - they're noise */

  .event.user_text.pending {
    font-style: italic; opacity: 0.62;
  }
  .event.user_text.pending .label::after {
    content: ' · sending…'; font-style: normal; font-weight: 400;
    color: var(--text-muted); text-transform: none; letter-spacing: 0;
    font-size: 10px; margin-left: 4px;
  }
  .event.user_text {
    background: rgba(63, 185, 80, 0.08); border-left-color: var(--green);
  }
  .event.user_text .label { color: var(--green); font-weight: 600; font-size: 11px; text-transform: uppercase; }
  .event.user_text .user-msg { margin-top: 6px; white-space: pre-wrap; font-size: 15px; }
  .task-notification-card {
    display: grid;
    gap: 6px;
    white-space: normal;
    color: var(--text);
    font-family: var(--font-ui);
  }
  .task-notification-card .tn-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .task-notification-card .tn-kind {
    color: var(--orange);
    font-weight: 700;
    text-transform: none;
  }
  .task-notification-card .tn-summary {
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
  }
  .task-notification-card .tn-event {
    padding-left: 10px;
    border-left: 2px solid rgba(210, 153, 34, 0.45);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
  }
  .task-notification-card .tn-meta {
    color: var(--text-muted);
    font-size: 11px;
  }
  .task-notification-card .tn-meta code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--accent);
    background: rgba(110, 118, 129, 0.16);
    border-radius: 4px;
    padding: 1px 5px;
  }
  .msg-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(480px, 100%);
    max-height: 360px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 6px 0;
    object-fit: contain;
    cursor: zoom-in;
  }
  .img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
  .img-lightbox.open { display: flex; }
  .img-lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 6px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); }

  .event.result {
    background: rgba(57, 210, 192, 0.08); border-left-color: var(--cyan);
    font-size: 12px;
  }
  .event.result .label { color: var(--cyan); font-weight: 600; text-transform: uppercase; font-size: 11px; }
  .event.result .stats { margin-top: 4px; }
  .event.result .stats span { margin-right: 16px; }

  .tool-call {
    display: flex; align-items: flex-start; gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0; font-size: 14px;
  }
  .tool-call .arrow { color: var(--orange); font-weight: bold; }
  .tool-call .tool-name { color: var(--orange); font-weight: 600; }
  .tool-call.tool-call-ok .tool-name::after {
    content: ' ok';
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
  }
  .tool-call .tool-detail {
    color: var(--text-muted); font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    flex: 1 1 280px;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .tool-call.tool-command .tool-detail {
    color: var(--text);
  }
  .tool-call.tool-file .tool-detail {
    color: var(--text);
  }
  .hide-tools .tool-call { display: none !important; }
  .hide-tools .event.tool-only { display: none !important; }
  a.path-link { color: var(--accent); text-decoration: underline dotted; cursor: pointer; }
  a.path-link:hover { text-decoration: underline; }
  .conv-sticky-header .tools-toggle {
    position: absolute; top: 10px; right: 12px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 11px; padding: 3px 8px;
    border-radius: 4px; cursor: pointer;
  }
  .conv-sticky-header .tools-toggle:hover { color: var(--text); background: var(--surface-2); }
  .conv-sticky-header .tools-toggle.active { color: var(--accent); border-color: rgba(88,166,255,0.4); }

  .conv-sticky-header .conv-sticky-header__close {
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-muted); font-size: 16px; cursor: pointer;
    line-height: 1; padding: 0;
    opacity: 0.6; z-index: 10;
  }
  .conv-sticky-header .conv-sticky-header__close:hover { opacity: 1; color: var(--red); }

  .assistant-text {
    font-size: 15px; padding: 4px 0;
    line-height: 1.5;
  }
  /* <session-state> block — slightly muted, italic body, with breathing
     room between rows. Each row keeps a small uppercase label
     (DID / INSIGHT / NEXT STEP USER) so it reads consistently. */
  .session-state-block {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 2px solid var(--border);
    color: var(--text-muted);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.9;
  }
  .session-state-block .ssb-row { margin: 0 0 10px; }
  .session-state-block .ssb-row:last-child { margin-bottom: 0; }
  .session-state-block .ssb-key {
    display: inline-block; min-width: 96px; margin-right: 10px;
    color: var(--text-muted); font-style: normal;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.75;
  }
  .session-state-block .ssb-next {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
  .md-table {
    border-collapse: collapse; margin: 8px 0; font-size: 13px;
    border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  }
  .md-table th, .md-table td {
    padding: 6px 10px; border: 1px solid var(--border);
    text-align: left; vertical-align: top;
  }
  .md-table th { background: var(--surface); font-weight: 600; color: var(--text); }
  .md-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
  .md-code {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    background: rgba(110,118,129,0.2); padding: 1px 5px;
    border-radius: 3px; font-size: 0.9em;
    color: var(--cyan);
  }
  .md-h {
    margin: 12px 0 6px; font-weight: 600;
    color: var(--text);
  }
  h1.md-h { font-size: 20px; }
  h2.md-h { font-size: 17px; }
  h3.md-h { font-size: 15px; }
  .assistant-text a { color: var(--accent); }

  /* Fenced code blocks (```lang ... ```). Rounded container with a tiny
     header strip for language label + copy button. Long lines wrap inside
     the transcript so code blocks do not become a second horizontal scroll
     surface while the user is trying to scroll the conversation. */
  .cb-wrap {
    margin: 8px 0; border-radius: 8px; overflow: hidden;
    background: #0b1016; border: 1px solid var(--border);
  }
  .cb-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 10px; background: rgba(255,255,255,0.025);
    border-bottom: 1px solid var(--border);
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 11px; color: var(--text-muted);
  }
  .cb-lang { letter-spacing: 0.04em; }
  .cb-lang.cb-lang-plain { opacity: 0.55; }
  .cb-copy {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-family: inherit;
    font-size: 10px; padding: 2px 8px; border-radius: 4px;
    cursor: pointer; opacity: 0.6;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  }
  .cb-copy:hover { opacity: 1; color: var(--text); border-color: var(--text-muted); }
  .cb-copy.copied { color: var(--green); border-color: rgba(63,185,80,0.5); opacity: 1; }
  pre.cb {
    margin: 0; padding: 12px 14px; overflow-x: hidden;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 13px; line-height: 1.5; color: var(--text);
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    tab-size: 2;
  }
  pre.cb code { background: transparent; padding: 0; font: inherit; color: inherit; }
  .tok-comment  { color: #768390; font-style: italic; }
  .tok-string   { color: #a5d6ff; }
  .tok-keyword  { color: #ff7b72; }
  .tok-number   { color: #79c0ff; }
  .tok-type     { color: #ffa657; }
  .tok-function { color: #d2a8ff; }
  .tok-variable { color: #ffa657; }
  .tok-key      { color: #7ee787; }

  .thinking-block {
    font-size: 12px; color: var(--text-muted); padding: 4px 8px;
    border-left: 2px solid var(--border); margin: 4px 0;
    font-style: italic;
  }
  .thinking-toggle {
    cursor: pointer; font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; font-weight: 600;
    user-select: none;
  }
  .thinking-toggle:hover { color: var(--text); }
  .t-body { white-space: pre-wrap; max-height: 400px; overflow-y: auto; }

  .line-num { font-size: 10px; color: var(--text-muted); opacity: 0.5; float: right; }
  .msg-ts { font-size: 10px; color: var(--text-muted); opacity: 0.4; float: right; margin-right: 8px; font-variant-numeric: tabular-nums; }

  /* Tabs */
  .tab-bar {
    display: flex; gap: 0; border-bottom: 1px solid var(--border);
    background: var(--surface); padding: 0 16px;
  }
  .tab {
    padding: 10px 16px; font-size: 13px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--text); border-bottom-color: var(--accent); }
  .tab .badge {
    display: inline-block; background: var(--accent); color: var(--accent-contrast);
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
    margin-left: 6px; vertical-align: middle;
  }

  /* Issues dashboard */
  .issues-view { flex: 1; overflow-y: auto; padding: 16px 20px; }
  .issues-view.hidden { display: none; }
  .issue-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 6px; margin-bottom: 6px;
    background: var(--surface); border: 1px solid var(--border);
    transition: border-color 0.15s;
  }
  .issue-row:hover { border-color: var(--text-muted); }
  .issue-row .issue-num {
    font-weight: 600; color: var(--accent); font-size: 13px;
    min-width: 44px; cursor: pointer;
  }
  .issue-row .issue-num:hover { text-decoration: underline; }
  .issue-row .issue-title { flex: 1; font-size: 13px; }
  .issue-row .issue-labels { display: flex; gap: 4px; flex-wrap: wrap; }
  .issue-label {
    font-size: 10px; padding: 2px 6px; border-radius: 10px;
    font-weight: 600; white-space: nowrap;
  }
  .issue-label.claude-fix { background: #0E8A16; color: #fff; }
  .issue-label.claude-in-progress { background: #FBCA04; color: #000; }
  .issue-label.claude-failed { background: #D93F0B; color: #fff; }
  .issue-label.other { background: var(--border); color: var(--text-muted); }

  .issue-status {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; white-space: nowrap;
  }
  .issue-status.in_progress { background: rgba(251, 202, 4, 0.15); color: #FBCA04; animation: pulse 2s infinite; }
  .issue-status.queued { background: rgba(14, 138, 22, 0.15); color: var(--green); }
  .issue-status.failed { background: rgba(248, 81, 73, 0.15); color: var(--red); }
  .issue-status.open { background: rgba(139, 148, 158, 0.1); color: var(--text-muted); }
  .issue-status.closed { background: rgba(188, 140, 255, 0.1); color: var(--purple); }

  .issue-actions { display: flex; gap: 6px; }
  .issue-action-btn {
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    border: 1px solid var(--border); cursor: pointer;
    background: transparent; color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
  }
  .issue-action-btn:hover { background: var(--border); color: var(--text); }
  .issue-action-btn.fix { color: var(--green); border-color: rgba(63, 185, 80, 0.3); }
  .issue-action-btn.fix:hover { background: rgba(63, 185, 80, 0.15); }
  .issue-action-btn.spawn-fix-btn { color: var(--accent); border-color: rgba(88, 166, 255, 0.3); }
  .issue-action-btn.spawn-fix-btn:hover { background: rgba(88, 166, 255, 0.15); }
  .issue-action-btn.log { color: var(--accent); border-color: rgba(88, 166, 255, 0.3); }
  .issue-action-btn.log:hover { background: rgba(88, 166, 255, 0.15); }
  .issue-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .issue-summary {
    margin: 4px 0 0 56px; padding: 8px 12px;
    background: var(--bg); border-radius: 4px;
    font-size: 12px; color: var(--text-muted); line-height: 1.5;
    white-space: pre-wrap; max-height: 150px; overflow-y: auto;
    display: none;
  }
  .issue-summary.visible { display: block; }

  .issues-section-header {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); padding: 12px 0 6px; margin-top: 8px;
    border-bottom: 1px solid var(--border);
  }
  .issues-section-header:first-child { margin-top: 0; }

  /* Conversation split layout */
  .conv-split {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column; /* unsplit = single child fills the column */
  }
  .conv-split[data-orientation="vertical"] { flex-direction: row; }
  .conv-split[data-orientation="horizontal"] { flex-direction: column; }
  .conv-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    position: relative; /* drop overlay anchor */
  }
  /* Place the input bar ABOVE the status-context strip in top mode (the
     status with branch/cost/model is reference info, the input is the
     primary action). Right-rail mode uses CSS Grid which does its own
     ordering — `order` is ignored there, so this rule is harmless in
     both modes. DOM order kept the historical "context above input"
     layout for back-compat with anything that queried by index. */
  .conv-pane > .conv-input-bar     { order: 1; }
  .conv-pane > .conv-input-hint    { order: 1; }
  .conv-pane > .conv-input-context { order: 2; }
  .conv-pane > .conv-input-context.is-new-session {
    order: 0;
    border-top: 0;
    border-bottom: 1px solid var(--border);
  }
  .conv-pane.is-codex-session {
    box-shadow: inset 4px 0 0 rgba(88, 166, 255, 0.72);
  }
  .conv-pane-header {
    display: none;            /* shown when a pane has title chrome */
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 5px 8px 5px 12px;
    border-bottom: 1px solid var(--border, #2a2a2a);
    background: color-mix(in srgb, var(--surface) 82%, var(--bg));
  }
  .conv-pane.has-pane-title > .conv-pane-header,
  body.conversation-popout .conv-pane > .conv-pane-header,
  .conv-split[data-orientation="vertical"] .conv-pane-header,
  .conv-split[data-orientation="horizontal"] .conv-pane-header {
    display: flex;
  }
  .conv-pane-titlebar {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .conv-pane-category {
    flex: 0 1 auto;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg) 70%, var(--surface));
    font-size: 11px;
    line-height: 1.2;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  }
  .conv-pane-category:empty { display: none; }
  .conv-pane-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
  }
  .conv-split[data-orientation="vertical"] .conv-pane.is-active,
  .conv-split[data-orientation="horizontal"] .conv-pane.is-active {
    box-shadow: inset 0 0 0 1px var(--accent, #4ea1ff);
  }
  .conv-split[data-orientation="vertical"] .conv-pane.is-active.is-codex-session,
  .conv-split[data-orientation="horizontal"] .conv-pane.is-active.is-codex-session {
    box-shadow:
      inset 0 0 0 1px rgba(88, 166, 255, 0.72),
      inset 4px 0 0 rgba(88, 166, 255, 0.88);
  }
  .conv-pane-close {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
  }
  .conv-pane-close:hover { color: var(--text, #eee); background: var(--bg-hover, rgba(255,255,255,0.06)); }

  .conv-split-divider {
    flex: 0 0 4px;
    background: var(--border, #2a2a2a);
    cursor: col-resize;
    transition: background 0.1s ease;
  }
  .conv-split-divider:hover { background: var(--accent, #4ea1ff); }
  .conv-split[data-orientation="horizontal"] .conv-split-divider {
    cursor: row-resize;
  }

  .conv-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-overlay, rgba(20,20,24,0.95));
    color: var(--text, #eee);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
  }
  .conv-toast.visible { opacity: 1; }

  .conv-pane-drop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    display: none;
  }
  .conv-pane-drop-overlay.active { display: block; }
  .conv-pane-drop-overlay .drop-zone {
    position: absolute;
    pointer-events: auto;
    border: 1px dashed var(--accent, #4ea1ff);
    background: rgba(78, 161, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #4ea1ff);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.08s ease;
  }
  .conv-pane-drop-overlay .drop-zone.right  { right: 0; top: 0; bottom: 0; width: 22%; }
  .conv-pane-drop-overlay .drop-zone.bottom { left: 0; right: 0; bottom: 0; height: 22%; }
  .conv-pane-drop-overlay .drop-zone.over   { background: rgba(78, 161, 255, 0.18); }
  /* Suppress overlay below 900px viewport (split is unsupported there). */
  @media (max-width: 900px) {
    .conv-pane-drop-overlay { display: none !important; }
  }

  .conv-scroll-end-btn {
    position: absolute;
    right: 20px;
    bottom: 96px;
    z-index: 12;
    height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.14s ease, transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  }
  .conv-scroll-end-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .conv-scroll-end-btn:hover {
    border-color: var(--accent);
    background: var(--surface-2);
  }
  .conv-scroll-end-btn svg { flex: none; }
  .conv-scroll-end-btn span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }

  /* Conversations view */
  .conversations-view { flex: 1; overflow-y: auto; padding: 0 20px 16px; position: relative; }
  .conv-sticky-header {
    /* Sits at top:0 of conversations-view (its scroll container). The
       :has() rule below pushes it to top:30px when the live-tool strip
       is also stuck above it, so they don't overlap. No negative margins
       — those caused the top half to render above the scroll origin
       (clipped by overflow:hidden) and made absolute children appear to
       hide behind .toolbar. */
    position: sticky; top: 0; z-index: 5;
    padding: 12px 12px 12px; margin: 0 -12px 8px;
    background: #10151c;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 8px rgba(0,0,0,0.45);
    display: flex; flex-direction: column;
    box-sizing: border-box;
  }
  .conv-sticky-header .user-msg {
    font-size: 14px; color: var(--text); line-height: 1.4;
    flex: 1 1 auto; min-height: 0;
  }
  .conv-sticky-header .label { color: var(--green); font-weight: 600; font-size: 11px; text-transform: uppercase; margin-bottom: 4px; }
  .conv-sticky-header__resize-handle {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 10px; cursor: ns-resize;
    display: flex; align-items: center; justify-content: center;
    z-index: 6; touch-action: none; user-select: none;
    background: transparent;
    transition: background 0.12s;
  }
  .conv-sticky-header__resize-handle::before {
    content: ''; display: block;
    width: 40px; height: 3px; border-radius: 2px;
    background: rgba(139,148,158,0.45);
    transition: background 0.12s, width 0.12s;
  }
  .conv-sticky-header__resize-handle:hover::before,
  .conv-sticky-header__resize-handle.is-dragging::before {
    background: var(--accent);
    width: 60px;
  }
  .conv-sticky-header__resize-handle:hover,
  .conv-sticky-header__resize-handle.is-dragging {
    background: rgba(88,166,255,0.08);
  }
  /* Expand chevron — small tab anchored at the bottom-center of the
     sticky header. Click toggles `.is-expanded`, which grows the panel
     from its default 170px to half the viewport height for a closer
     read of the asks + activity. State is ephemeral (per-conversation,
     resets on conv switch). */
  .conv-sticky-header__collapse {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -10px;
    width: 32px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    background: #10151c;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    color: var(--text-muted);
    font-size: 11px; font-family: inherit;
    cursor: pointer; padding: 0; line-height: 1;
    z-index: 7;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
  }
  .conv-sticky-header__collapse:hover {
    color: var(--accent);
    border-color: rgba(88,166,255,0.4);
    background: #141b25;
  }
  .conv-pane.has-conv-bg .conv-sticky-header,
  .conv-pane.has-conv-bg .conv-sticky-header__collapse {
    background: var(--conv-surface);
    box-shadow: 0 4px 10px var(--conv-shadow);
  }
  .conv-pane.has-conv-bg .conv-sticky-header__collapse:hover {
    background: var(--conv-surface-2);
  }
  .conv-sticky-header__collapse-icon { display: inline-block; line-height: 1; }
  /* When expanded, the unified panel grows to half the viewport height.
     The fixed-height rule in `.csh-row` is overridden here. */
  .conv-sticky-header.is-expanded .csh-row {
    height: 50vh;
  }
  .conversations-view .event { margin-bottom: 12px; padding: 10px 14px; border-radius: 6px; border-left: 3px solid transparent; }
  /* Assistant rows — Claude-Desktop-style clean prose. No background fill,
     no left border, subtle metadata so the eye lands on the prose itself. */
  .conversations-view .event.assistant { background: transparent; border: none; padding: 6px 0; }
  .conversations-view .event.assistant .line-num,
  .conversations-view .event.assistant .msg-ts { opacity: 0.35; font-size: 10px; }
  .conversations-view .event.assistant .assistant-text {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
  }
  /* User bubble — Claude-Desktop-style chat bubble. No label, no left
     border, rounded corners, constrained width, subtle blue tint. */
  .conversations-view .event.user_text {
    background: rgba(88, 166, 255, 0.10);
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    max-width: 85%;
  }
  .conversations-view .event.user_text .label { display: none; }
  .conversations-view .event.user_text .line-num,
  .conversations-view .event.user_text .msg-ts { display: none; }
  .conversations-view .event.user_text .user-msg {
    margin-top: 0;
    white-space: pre-wrap;
    font-size: 16px;
    line-height: 1.6;
    color: var(--accent);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
  }
  .conv-pane.has-conv-bg .conversations-view .event.user_text {
    background: var(--conv-user-bg);
  }
  .conv-pane.has-conv-bg .conversations-view .event.user_text .user-msg {
    color: var(--conv-user-text);
  }
  .conversations-view .event.user_text.task-notification-event {
    max-width: min(720px, 92%);
    background: rgba(110, 140, 175, 0.08);
    border: 1px solid rgba(110, 140, 175, 0.18);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .conversations-view .event.user_text.task-notification-event::before {
    color: var(--text-muted);
    opacity: 0.65;
  }
  .conversations-view .event.user_text .task-notification-card {
    margin-top: 6px;
    white-space: normal;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.45;
  }
  /* The first user message is pinned in the sticky header as "Original ask".
     Hide its in-conversation chat bubble so the same text isn't shown twice
     (sticky + bubble) when no scrolling has occurred yet. */
  .conversations-view .event.user_text.is-pinned-in-sticky { display: none; }
  /* Later user messages mirrored into the sticky header's "Earlier ask" slot
     must keep their layout space. Removing them with display:none changes
     scrollHeight mid-scroll and makes the transcript jump under the cursor. */
  .conversations-view .event.user_text.is-dynamic-pinned-in-sticky {
    visibility: hidden;
    pointer-events: none;
  }
  .conversations-view .event.tool_result { display: none; }
  /* Tool-call group — fused "Ran N commands ▾" container. */
  .conversations-view .tool-call-group {
    margin: 8px 0 12px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
  }
  .conversations-view .tool-call-group-header {
    cursor: pointer; user-select: none;
    padding: 8px 12px;
    font-size: 13px; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  }
  .conversations-view .tool-call-group-header:hover { background: var(--surface-2); border-radius: 6px; }
  .conversations-view .tool-call-group-header .tcg-arrow {
    display: inline-block; transition: transform 0.15s; font-size: 10px; color: var(--orange);
  }
  .conversations-view .tool-call-group:not(.collapsed) .tool-call-group-header .tcg-arrow { transform: rotate(90deg); }
  .conversations-view .tool-call-group.collapsed .tool-call-group-body { display: none; }
  .conversations-view .tool-call-group-body { padding: 4px 12px 10px; border-top: 1px solid var(--border); }
  /* Sticky-header unified panel — Ask | Activity inside a single bordered
     box. Fixed height; each column scrolls independently if its content
     overflows. Saves the inner padding/border that two side-by-side
     panels used to spend. */
  .conv-sticky-header .csh-row {
    display: flex; gap: 0; align-items: stretch;
    flex: 0 0 auto;
    height: 170px;
    background: #161c25;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .conv-sticky-header .csh-col {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    min-height: 0;
  }
  .conv-sticky-header .csh-col-ask {
    flex: 5 1 0; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; gap: 0;
    overflow: hidden;
    border-right: 1px solid var(--border);
  }
  /* Both ask sub-blocks are permanent slots — original on top, earlier
     on bottom. Each takes half the column height and scrolls internally
     if its body overflows; labels stay pinned at the top of each slot. */
  .conv-sticky-header .csh-ask-original,
  .conv-sticky-header .csh-ask-earlier {
    flex: 1 1 0;
    min-height: 0;
    display: flex; flex-direction: column;
  }
  .conv-sticky-header .csh-ask-original > .label,
  .conv-sticky-header .csh-ask-earlier > .label { flex: 0 0 auto; }
  .conv-sticky-header .csh-ask-original > .user-msg,
  .conv-sticky-header .csh-ask-earlier > .user-msg {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
  }
  /* Earlier-ask sub-block — separator + orange label so it reads as a
     distinct slot from the original. The dashed separator only applies
     when stacked inside .csh-col-ask; when promoted to the activity
     column (no session activity to show) it sits flush like a peer
     panel, no top divider. */
  .conv-sticky-header .csh-col-ask > .csh-ask-earlier {
    border-top: 1px dashed var(--border);
    padding-top: 6px;
    margin-top: 6px;
  }
  .conv-sticky-header .csh-ask-earlier .label { color: var(--orange); }
  .conv-sticky-header .csh-col-activity {
    flex: 5 1 0; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    padding: 8px 12px;
    overflow-y: auto;
  }
  /* Original ask: first sentence at default size, rest small + grey,
     always wraps (no horizontal scroll). Each ask body scrolls inside its
     fixed-height slot so long summaries do not clip under the sticky header. */
  .conv-sticky-header .csh-col-ask .user-msg {
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
    max-height: none; overflow-x: hidden; overflow-y: auto;
  }
  .conv-sticky-header .csh-col-ask .ask-first,
  .conv-sticky-header .csh-col-ask .earlier-first {
    display: block;
    color: var(--accent);
    font-size: 14px;
    line-height: 1.45;
  }
  .conv-sticky-header .csh-col-ask .ask-rest {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.85;
  }
  .conv-sticky-header .csh-col-ask .msg-image {
    max-width: 100%;
    max-height: 220px;
    margin-top: 8px;
  }
  /* Workspace context strip — single row above the conv input bar,
     Claude-Desktop-style: "⎇ branch ← base · ↑N · ↓M · ⚠ co-tenants".
     Visible only when a session has a resolvable cwd. Wraps onto a
     second line if needed — never scrolls horizontally. */
  .conv-input-context {
    display: none;
    align-items: center; gap: 10px 12px;
    /* Single line — wrap was producing a 2-row strip when the path was long.
       Anything that doesn't fit gets clipped with ellipsis. The full path is
       still recoverable via the title attribute on the kind chip. */
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 12px; color: var(--text-muted);
    background: transparent;
    border-top: 1px solid var(--border);
  }
  .conv-input-context > * {
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* The path is the longest item — let it shrink and ellipsis. */
  .conv-input-context .wp-path {
    flex: 0 1 auto;
    min-width: 0;
  }
  .conv-input-context.visible { display: flex; }
  .conv-input-context .wp-icon { opacity: 0.7; font-size: 11px; }
  .conv-input-context .wp-branch {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 13px; color: var(--accent);
    background: rgba(88,166,255,0.10); padding: 2px 7px; border-radius: 3px;
    word-break: break-all; overflow-wrap: anywhere;
  }
  .conv-input-context .wp-base { color: var(--text-muted); }
  .conv-input-context .wp-arrow { opacity: 0.4; }
  .conv-input-context .wp-kind {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 3px; font-weight: 600;
  }
  .conv-input-context .wp-kind-worktree { color: var(--accent); background: rgba(88,166,255,0.10); }
  .conv-input-context .wp-kind-clone { color: var(--orange); background: rgba(210,153,34,0.10); }
  /* Usage pill — sits at the right end of the input-context row. The
     wp-usage wrapper is a flex item with margin-left:auto so the pill
     hugs the right edge regardless of how much workspace info renders. */
  .conv-input-context .wp-usage {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 11px;
  }
  .conv-input-context .wp-usage-pill {
    padding: 2px 7px; border-radius: 3px; font-weight: 600;
    color: var(--text-muted); background: rgba(139,148,158,0.10);
  }
  .conv-input-context .wp-usage-pill.wp-usage-warm { color: var(--orange); background: rgba(210,153,34,0.12); }
  .conv-input-context .wp-usage-pill.wp-usage-hot  { color: var(--red);    background: rgba(248,81,73,0.14); }
  .conv-input-context .wp-usage-pill.wp-usage-missing { color: var(--text-muted); background: rgba(139,148,158,0.10); }
  .conv-input-context .wp-usage-clickable { cursor: pointer; user-select: none; }
  .conv-input-context .wp-usage-clickable:hover { filter: brightness(1.2); }
  .conv-input-context .wp-usage-pct { opacity: 0.7; font-weight: 400; }
  .conv-input-context .wp-usage-peak { color: var(--text-muted); font-size: 10px; opacity: 0.7; }
  .conv-input-context .wp-cost-pill {
    padding: 2px 7px; border-radius: 3px; font-weight: 600;
    color: var(--text-muted); background: rgba(139,148,158,0.06);
    cursor: help;
  }
  /* Model badge — shown next to the context/cost pills so you can tell
   * which model produced the latest turn. The 1M sub-pill lights up
   * when a turn provably exceeded 200k tokens (only possible on the 1M
   * beta variant, since the model name doesn't carry the variant). */
  .conv-input-context .wp-model-pill {
    padding: 2px 7px; border-radius: 3px; font-weight: 600;
    color: var(--text-muted); background: rgba(88,166,255,0.10);
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 10px;
    border: none;
  }
  .conv-input-context .wp-model-pill:hover { background: rgba(88,166,255,0.18); }
  .conv-input-context .wp-model-1m {
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 2px;
    background: var(--accent, #58a6ff);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
  }
  /* "→ next" chip — shown when an override is queued (Codex/Gemini, or
     dormant Claude). The override applies on the next ask/resume. */
  .conv-input-context .wp-model-pending {
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 2px;
    background: rgba(218,165,32,0.18);
    color: #d6a13b;
    font-size: 9px;
    font-weight: 700;
  }
  /* Model picker popover — anchored under the wp-model-pill button. */
  .model-picker-pop {
    position: fixed; z-index: 9000;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px;
    min-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    display: none; flex-direction: column; gap: 2px;
    font-size: 13px;
  }
  .model-picker-pop.open { display: flex; }
  .model-picker-pop .mp-header {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    padding: 4px 6px;
  }
  .model-picker-pop .mp-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 4px;
    background: transparent; border: none; color: var(--text);
    cursor: pointer; text-align: left; font-family: inherit; font-size: 13px;
    width: 100%;
  }
  .model-picker-pop .mp-row:hover { background: var(--surface-2); }
  .model-picker-pop .mp-row.active {
    color: var(--accent); background: rgba(88,166,255,0.10); font-weight: 600;
  }
  .model-picker-pop .mp-1m-toggle {
    margin-left: auto; font-size: 10px;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(88,166,255,0.10); color: var(--text-muted);
    cursor: pointer; user-select: none;
  }
  .model-picker-pop .mp-1m-toggle.on {
    background: var(--accent); color: #fff;
  }
  .model-picker-pop .mp-1m-toggle.disabled {
    opacity: 0.35; cursor: not-allowed;
  }
  .model-picker-pop .mp-divider {
    height: 1px; background: var(--border); margin: 4px 2px;
  }
  .model-picker-pop .mp-other {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
  }
  .model-picker-pop .mp-other input {
    flex: 1; min-width: 0;
    padding: 4px 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 3px; color: var(--text); font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
  }
  .model-picker-pop .mp-other button {
    padding: 4px 10px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 3px; cursor: pointer;
    font-size: 12px; font-weight: 600;
  }
  .model-picker-pop .mp-reset {
    color: var(--text-muted); font-size: 12px;
  }
  .model-picker-pop .mp-reset:hover { color: var(--text); }
  .model-picker-pop .mp-status {
    padding: 4px 8px; font-size: 11px; color: var(--text-muted);
  }
  .model-picker-pop .mp-status.ok { color: var(--green); }
  .model-picker-pop .mp-status.err { color: var(--red); }
  .conv-input-context .wp-ahead { color: var(--green); }
  .conv-input-context .wp-behind { color: var(--orange); }
  .conv-input-context .wp-even { color: var(--text-muted); opacity: 0.6; }
  .conv-input-context .wp-cotenants { color: var(--red); margin-left: auto; font-weight: 500; }
  .conv-input-context.hide-cotenants .wp-cotenants { display: none; }

  /* Spawn cwd picker — appears in the context strip ONLY when in
   * new-session mode (currentConversation === '__new__'). Replaces the
   * passive workspace pill the strip shows for an existing session.
   * Without this, the user can't tell where the new session will land
   * from the All-repos folder filter. */
  .conv-input-context .spawn-cwd-row {
    display: none;
    align-items: center; gap: 6px;
    font-size: 12px;
  }
  .conv-input-context.is-new-session {
    position: relative;
    z-index: 80;
    overflow: visible;
  }
  .conv-input-context.visible.is-new-session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "chips chips"
      "cwd worktree";
    align-items: center;
    gap: 7px 12px;
    white-space: normal;
  }
  .conv-input-context.is-new-session .spawn-cwd-row {
    display: inline-flex;
    grid-area: cwd;
    justify-self: start;
    overflow: visible;
  }
  .conv-input-context .spawn-cwd-quick-chips {
    display: none;
    align-items: center;
    gap: 5px;
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;
  }
  .conv-input-context.is-new-session .spawn-cwd-quick-chips {
    display: flex;
    grid-area: chips;
    max-width: none;
  }
  .conv-input-context .spawn-cwd-chip {
    display: inline-flex;
    align-items: center;
    max-width: min(260px, 100%);
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(139,148,158,0.08);
    color: var(--text-muted);
    font: 600 11px/1.2 ui-monospace, SFMono-Regular, "SF Mono", monospace;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conv-input-context .spawn-cwd-chip:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: rgba(88,166,255,0.10);
  }
  .conv-input-context .spawn-cwd-chip.active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
    background: rgba(88,166,255,0.16);
  }
  /* Worktree toggle, sibling to spawn-cwd-row. Same visibility gating: only
     shown when the strip is in new-session mode. Matches the 🌿 toggle in
     the kanban-toolbar new-session modal so both spawn paths look the same. */
  .conv-input-context .spawn-worktree-row {
    display: none;
    align-items: center; gap: 4px;
    font-size: 12px; color: var(--text);
    cursor: pointer; user-select: none;
  }
  .conv-input-context.is-new-session .spawn-worktree-row {
    display: inline-flex;
    grid-area: worktree;
    justify-self: end;
  }
  .conv-input-context .spawn-worktree-row input[type="checkbox"] { margin: 0; cursor: pointer; }
  /* Hide the regular workspace + usage pills in new-session mode —
     they reflect a live session's state and have nothing to say about
     a not-yet-spawned session. The strip stays visible because the
     spawn-cwd-row needs to render. */
  .conv-input-context.is-new-session .wp-row,
  .conv-input-context.is-new-session .wp-usage { display: none; }
  .conv-input-context .spawn-cwd-row .spawn-cwd-label {
    color: var(--text-muted); text-transform: uppercase;
    font-size: 10px; letter-spacing: 0.05em; font-weight: 600;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-combo {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    overflow: visible;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-picker {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px 0 0 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    max-width: 360px;
    min-width: 220px;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-picker:hover { border-color: var(--accent); }
  .conv-input-context .spawn-cwd-row .spawn-cwd-picker:focus { outline: none; border-color: var(--accent); }
  .conv-input-context .spawn-cwd-row .spawn-cwd-picker:focus + .spawn-cwd-menu-btn {
    border-color: var(--accent);
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-menu-btn,
  .conv-input-context .spawn-cwd-row .spawn-cwd-browse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 11px;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-browse-btn {
    width: 30px;
    border-radius: 0 4px 4px 0;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-menu-btn:hover,
  .conv-input-context .spawn-cwd-row .spawn-cwd-menu-btn[aria-expanded="true"],
  .conv-input-context .spawn-cwd-row .spawn-cwd-browse-btn:hover {
    color: var(--text);
    border-color: var(--accent);
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-browse-btn:disabled {
    opacity: 0.55;
    cursor: wait;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-menu {
    display: none;
    position: absolute;
    z-index: 1200;
    top: auto;
    bottom: calc(100% + 6px);
    left: 0;
    width: min(560px, calc(100vw - 80px));
    max-height: min(520px, 70vh);
    overflow: auto;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-menu.open { display: grid; gap: 2px; }
  .conv-input-context .spawn-cwd-row .spawn-cwd-option {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 7px 9px;
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-option:hover,
  .conv-input-context .spawn-cwd-row .spawn-cwd-option:focus {
    outline: none;
    background: var(--surface-2);
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-option-label {
    font-size: 12px;
    font-weight: 600;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-option-path {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .conv-input-context .spawn-cwd-row .spawn-cwd-menu-empty {
    padding: 9px;
    color: var(--text-muted);
    font-size: 12px;
  }
  @media (max-width: 720px) {
    .conv-input-context.is-new-session .spawn-cwd-quick-chips {
      display: none;
    }
    .conv-input-context.visible.is-new-session {
      display: flex;
      white-space: nowrap;
    }
  }
  .conv-input-context .wp-path {
    margin-left: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 12px; color: var(--text-muted); opacity: 0.7;
    word-break: break-all; overflow-wrap: anywhere;
  }
  .conv-input-context .wp-cotenants ~ .wp-path { margin-left: 8px; }
  .conv-input-context.hide-cotenants .wp-cotenants ~ .wp-path { margin-left: auto; }
  .conv-input-context .wp-eff-divider {
    flex: 0 0 100%;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
    margin: 4px 0 2px;
  }
  .conv-input-context .wp-eff-tag {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 3px; font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    border: 1px dashed var(--border);
  }
  .conv-input-context .wp-worktrees {
    font-size: 12px; padding: 2px 7px; border-radius: 3px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    cursor: pointer;
    white-space: pre;
    font-family: inherit;
    appearance: none;
    transition: filter 0.12s ease-out, background 0.12s ease-out;
  }
  .conv-input-context .wp-worktrees:hover { filter: brightness(1.25); background: rgba(255,255,255,0.07); }
  .conv-input-context .wp-worktrees:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .conv-input-context .wp-worktrees-agent {
    color: var(--orange);
    background: rgba(210,153,34,0.10);
    border-color: rgba(210,153,34,0.30);
  }
  .conv-input-context .wp-worktrees-agent:hover { background: rgba(210,153,34,0.16); }

  /* ── Worktrees modal ─────────────────────────────────────────
     Opens when the user clicks the 🌿 worktrees pill in the input-
     context strip. Lists each sibling worktree (path · branch · tag)
     in a scrollable, copyable form. Reuses .upd-overlay/.upd-dialog
     shells. */
  .wt-summary {
    font-size: 12px; color: var(--text-muted);
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .wt-summary strong { color: var(--text); font-weight: 600; }
  .wt-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 50vh; overflow-y: auto;
    padding: 2px;
  }
  .wt-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px; align-items: center;
    padding: 8px 10px; border-radius: 6px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 12px;
  }
  .wt-row-agent { border-color: rgba(210,153,34,0.30); }
  .wt-row-path {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    color: var(--text); word-break: break-all; overflow-wrap: anywhere;
    min-width: 0;
  }
  .wt-row-branch {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .wt-row-branch .wt-icon { opacity: 0.6; margin-right: 3px; }
  .wt-tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 3px; font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    white-space: nowrap;
  }
  .wt-tag-agent { color: var(--orange); background: rgba(210,153,34,0.10); border-color: rgba(210,153,34,0.30); }
  .wt-tag-locked { color: var(--accent); background: rgba(88,166,255,0.10); border-color: rgba(88,166,255,0.30); }
  .wt-tag-detached { color: var(--red); background: rgba(248,81,73,0.10); border-color: rgba(248,81,73,0.30); }
  .wt-tag-dirty { color: var(--orange); background: rgba(210,153,34,0.10); border-color: rgba(210,153,34,0.30); }
  .wt-tag-pr {
    color: #a371f7; background: rgba(163,113,247,0.10);
    border-color: rgba(163,113,247,0.30);
    text-decoration: none;
  }
  .wt-tag-pr:hover { background: rgba(163,113,247,0.18); }
  .wt-tag-pr-draft { opacity: 0.7; }
  .wt-row-dirty { border-left: 3px solid var(--orange); }
  .wt-empty {
    padding: 16px; text-align: center; color: var(--text-muted);
    font-size: 13px;
  }
  .wt-lock-reason {
    grid-column: 1 / -1;
    font-size: 11px; color: var(--text-muted);
    font-style: italic;
    padding-top: 2px;
  }
  /* "PRs without a worktree" section appended below the worktree list
     in the topbar modal. Same row visual language as the worktree rows
     so the eye groups them, but with a faint heading separator. */
  .wt-section-heading {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
    padding: 10px 2px 4px; border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  .wt-pr-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; align-items: center;
    padding: 8px 10px; border-radius: 6px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 12px;
  }
  .wt-pr-num {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    color: #a371f7; font-weight: 600;
    text-decoration: none;
  }
  .wt-pr-num:hover { text-decoration: underline; }
  .wt-pr-title {
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .wt-pr-branch {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    color: var(--text-muted); font-size: 11px;
    white-space: nowrap;
  }

  /* ── Live badge + streaming bubble ─────────────────────────────
     Shown when CCC is tailing a spawn log for the active session.
     The badge sits next to the Launch/Jump buttons; the bubble
     anchors at the bottom of the conv view and renders block-level
     events as they land. Both disappear when the headless agent
     finishes the turn (`result` event in stream-json) or the user
     switches conversations. */
  .live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(63,185,80,0.10);
    border: 1px solid rgba(63,185,80,0.35);
    color: var(--green, #3fb950);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap;
  }
  .live-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green, #3fb950);
    box-shadow: 0 0 0 0 rgba(63,185,80,0.5);
    animation: live-pulse 1.4s ease-out infinite;
  }
  @keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(63,185,80,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(63,185,80,0);   }
    100% { box-shadow: 0 0 0 0 rgba(63,185,80,0);     }
  }
  .stream-bubble {
    margin: 8px 0; padding: 10px 12px;
    border-radius: 8px;
    background: rgba(63,185,80,0.05);
    border: 1px dashed rgba(63,185,80,0.35);
    font-size: 13px; line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap; word-break: break-word;
  }
  .stream-bubble-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--green, #3fb950);
    margin-bottom: 6px; opacity: 0.85;
  }
  .stream-bubble-blocks { display: flex; flex-direction: column; gap: 8px; }
  .stream-block-text { white-space: pre-wrap; }
  .stream-block-tool {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 12px; color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 4px; padding: 3px 8px;
    align-self: flex-start;
  }
  .stream-block-tool .stream-tool-name { color: var(--accent); font-weight: 600; }
  .stream-block-thinking {
    font-size: 11px; color: var(--text-muted);
    font-style: italic; opacity: 0.7;
  }
  .stream-bubble-settled {
    border-style: solid;
    opacity: 0.8;
    transition: opacity 0.4s ease-out;
  }
  /* Live dot — sits to the left of the per-row timestamp on .conv-item
   * rows whose session is currently live (sidecar marker exists). Distinct
   * from the live-tool pill in the title row; this just signals "this row
   * is being actively polled, its state can change in real time" so the
   * user knows where the freshness comes from. */
  .conv-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent, #58a6ff);
    box-shadow: 0 0 0 0 rgba(88,166,255,0.55);
    margin-right: 4px;
    flex-shrink: 0;
    vertical-align: middle;
    animation: ccc-live-dot-pulse 2.4s ease-out infinite;
  }
  @keyframes ccc-live-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(88,166,255,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(88,166,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); }
  }

  /* Per-event timestamps prefixed to each conversation row. Sourced from
     the JSONL event's own `ts` (when the message was actually written),
     not the render time. `[S …]` marks events that arrived first via the
     stdout stream; `[J …]` marks events read back from the JSONL tail. */
  .stream-block-text[data-render-ts]::before,
  .stream-block-tool[data-render-ts]::before,
  .stream-block-thinking[data-render-ts]::before {
    content: '[S ' attr(data-render-ts) ']';
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 10px; color: var(--accent); opacity: 0.75;
    margin-right: 6px;
  }
  .conversations-view .event[data-render-ts]::before {
    content: '[J ' attr(data-render-ts) ']';
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 10px; color: var(--text-muted); opacity: 0.75;
    margin-right: 6px; display: inline-block;
  }
  .tool-call-group-header[data-render-ts]::before {
    content: '[J ' attr(data-render-ts) ']';
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 10px; color: var(--text-muted); opacity: 0.75;
    margin-right: 6px;
  }
  .stream-bubble-settled .stream-bubble-header span:last-child::after {
    content: ' · settled';
    opacity: 0.7;
  }
  .stream-bubble-settled .live-badge-dot { animation: none; opacity: 0.5; }
  .conv-sticky-header .csh-col-activity .session-timeline {
    margin-top: 0;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  /* When the timeline has no events, drop it out of the flex flow so a
     promoted Earlier-ask block sitting next to it gets the full column
     height and renders top-aligned (instead of being pushed into the
     bottom half by the empty timeline's `flex: 1 1 auto`). */
  .conv-sticky-header .csh-col-activity .session-timeline:empty {
    display: none;
  }
  .conv-sticky-header .csh-col-activity .session-timeline .stl-body {
    min-height: 0; flex: 1 1 auto;
  }
  /* Session-activity timeline — chronological commit / push / PR strip
     in the right column of the sticky header. */
  .session-timeline {
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px;
  }
  .session-timeline .stl-header {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
  }
  .session-timeline .stl-title { font-weight: 600; }
  .session-timeline .stl-counter { font-weight: 400; opacity: 0.7; }
  .session-timeline .stl-toggle {
    margin-left: auto; background: transparent; border: none; color: var(--text-muted);
    cursor: pointer; padding: 2px 6px; font-size: 11px; border-radius: 3px;
  }
  .session-timeline .stl-toggle:hover { background: var(--surface-2); color: var(--text); }
  .session-timeline.collapsed .stl-body { display: none; }
  .session-timeline .stl-body {
    display: flex; flex-direction: column; gap: 2px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  }
  .session-timeline .stl-row {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 4px; border-radius: 4px;
  }
  .session-timeline .stl-row:hover { background: var(--surface-2); }
  .session-timeline .stl-turn {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 10px; color: var(--text-muted);
    background: var(--bg); padding: 1px 6px; border-radius: 3px;
    min-width: 36px; text-align: center;
  }
  .session-timeline .stl-icon { font-size: 11px; opacity: 0.85; min-width: 12px; text-align: center; }
  .session-timeline .stl-commit .stl-icon { color: var(--green); }
  .session-timeline .stl-push   .stl-icon { color: var(--accent); }
  .session-timeline .stl-pr     .stl-icon { color: var(--purple); }
  .session-timeline .stl-failed .stl-icon { color: var(--red); }
  .session-timeline .stl-text { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  .session-timeline .stl-text code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 11px; background: var(--bg); padding: 1px 4px; border-radius: 2px;
    color: var(--orange);
  }
  .session-timeline .stl-gap {
    color: var(--text-muted); font-size: 10px; opacity: 0.6;
    padding-left: 14px;
  }
  .session-timeline .stl-gap.stl-final { font-style: italic; }

  /* Inline tool_result output preview, attached under .tool-call */
  .tool-result-output {
    margin: 4px 0 0 18px;
    padding: 6px 10px;
    background: var(--bg);
    border-left: 2px solid var(--border);
    border-radius: 0 4px 4px 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    max-height: 200px;
    overflow-y: auto;
  }
  .tool-result-output.is-error { border-left-color: var(--red); color: var(--red); }
  .tool-result-code-preview {
    margin: 6px 0 4px 18px;
    max-width: min(100%, 980px);
    background: var(--bg);
  }
  .tool-result-code-preview .tool-result-code-title {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-muted);
  }
  .tool-result-code-preview .tool-result-code-title code {
    color: var(--cyan);
    background: transparent;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-result-code-preview pre.cb {
    max-height: 360px;
    overflow-y: auto;
  }
  .conversations-view .tool-call-group-body .event { margin: 4px 0; padding: 2px 0; background: transparent; border: none; }
  .conversations-view .tool-call-group-body .event .line-num,
  .conversations-view .tool-call-group-body .event .msg-ts { display: none; }
  /* When the user has "Hide tools" toggled on (which normally hides
     every .event.tool-only and .tool-call), still show them inside an
     expanded group — the whole point of expanding is to see them. */
  .hide-tools .conversations-view .tool-call-group-body .event.tool-only,
  .conversations-view.hide-tools .tool-call-group-body .event.tool-only { display: block !important; }
  .hide-tools .conversations-view .tool-call-group-body .tool-call,
  .conversations-view.hide-tools .tool-call-group-body .tool-call { display: block !important; }
  .conversations-view .event.result { background: rgba(57, 210, 192, 0.08); border-left-color: var(--cyan); font-size: 12px; }
  .conversations-view .event.result .label { color: var(--cyan); font-weight: 600; text-transform: uppercase; font-size: 11px; }
  .conversations-view .event.result .stats { margin-top: 4px; }
  .conversations-view .event.result .stats span { margin-right: 16px; }
  .font-size-controls {
    display: flex; gap: 2px; align-items: center;
  }
  .font-size-btn {
    width: 28px; height: 28px;
    border-radius: 4px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
  }
  .font-size-btn:hover { color: var(--text); background: var(--surface-2); }
  .conv-item {
    --conv-dot-col: 16px;
    --conv-time-col: 43px;
    /* Bumped vertical padding (4 → 6) and tightened the row left/right
       (10 → 12) for the Omnara-style breathing room — rows feel less
       cramped without losing scannable density. */
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    margin-bottom: 0; transition: background 0.15s;
    border-left: 3px solid transparent;
  }
  .conv-item:hover { background: var(--surface-2); }
  .conv-item.active { background: var(--surface-2); border-left-color: var(--purple); }
  .conv-item.is-history-match { border-left-color: rgba(120, 168, 255, 0.5); }
  .conv-history-badge {
    display: inline-block; margin-left: 6px; padding: 1px 5px;
    font-size: 9px; font-weight: 500; line-height: 1.4;
    color: rgba(120, 168, 255, 0.95);
    background: rgba(120, 168, 255, 0.12);
    border: 1px solid rgba(120, 168, 255, 0.35);
    border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: middle;
  }
  .conv-history-snippet {
    margin: 2px 0 4px 14px; padding: 4px 8px;
    font-size: 11px; line-height: 1.4;
    color: var(--muted); background: rgba(255,255,255,0.025);
    border-left: 2px solid rgba(120, 168, 255, 0.25);
    border-radius: 0 4px 4px 0;
    white-space: pre-wrap; word-break: break-word;
    overflow: hidden; max-height: 3.5em;
  }
  .conv-history-snippet mark {
    background: rgba(255, 213, 100, 0.3); color: var(--text);
    padding: 0 2px; border-radius: 2px;
  }
  /* Worktree-origin badge: shown when a session came from a sibling
     worktree dir (e.g. claude-command-center-wt-gemini). */
  .conv-wt-badge {
    display: inline-block; margin-left: 6px; padding: 1px 5px;
    font-size: 9px; font-weight: 500; line-height: 1.4;
    color: rgba(100, 210, 180, 0.9);
    background: rgba(100, 210, 180, 0.10);
    border: 1px solid rgba(100, 210, 180, 0.30);
    border-radius: 3px; letter-spacing: 0.03em;
    vertical-align: middle;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Semantic match — slightly different hue + label to make it visible
     when results came via the vector path (vs lexical BM25). */
  .conv-history-badge.is-semantic {
    color: rgba(180, 140, 255, 0.95);
    background: rgba(180, 140, 255, 0.14);
    border-color: rgba(180, 140, 255, 0.40);
  }
  .conv-item.is-history-match.is-semantic-match {
    border-left-color: rgba(180, 140, 255, 0.55);
  }
  /* Topbar history-index status pill. */
  .hi-status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer; user-select: none;
  }
  .hi-status-pill .hi-pill-icon { opacity: 0.85; }
  .hi-status-pill .hi-pill-sem { color: rgba(180,140,255,0.9); font-size: 10px; }
  .hi-status-pill.is-indexing .hi-pill-icon { animation: hi-spin 1.4s linear infinite; }
  .hi-status-pill.is-stale { color: rgba(255, 180, 100, 0.95); }
  @keyframes hi-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  /* OOBE prompt — inline ribbon under convSearch the first time the user
     types a query while no index exists. Single CTA, dismissible. */
  .hi-oobe {
    margin: 6px 0; padding: 8px 10px;
    font-size: 11px; line-height: 1.45;
    color: var(--text);
    background: rgba(120, 168, 255, 0.08);
    border: 1px solid rgba(120, 168, 255, 0.25);
    border-radius: 6px;
  }
  .hi-oobe .hi-oobe-title {
    font-weight: 600; margin-bottom: 4px;
  }
  .hi-oobe .hi-oobe-actions {
    display: flex; gap: 6px; margin-top: 6px;
  }
  .hi-oobe button {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text); cursor: pointer;
  }
  .hi-oobe button.primary {
    background: rgba(120, 168, 255, 0.18);
    border-color: rgba(120, 168, 255, 0.45);
  }
  .hi-oobe button:hover { filter: brightness(1.15); }
  .conv-item .conv-title-row {
    display: flex;
    min-width: 0;
  }
  .conv-item .conv-main-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    width: 100%;
  }
  /* Row-end slot — Omnara-style. Holds the time at rest, swaps to action
     buttons (merge / start / archive) on hover. The two share the same
     screen real estate via `position: absolute` on the actions, so the
     row stays narrow and there's no layout shift between hover states. */
  .conv-item .conv-row-end {
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 36px;     /* ~"13h" or "13m" — enough for the time */
    min-height: 18px;    /* matches action-button height for clean swap */
  }
  .conv-item .conv-row-actions {
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    background: inherit;  /* hide the time underneath when actions show */
  }
  .conv-item .conv-row-actions:empty { display: none; }
  /* On hover (or focus-within for keyboard users), swap: time fades out,
     actions fade in. Only applied when actions are non-empty so rows
     without any actions just keep showing the time. */
  .conv-item:hover .conv-row-actions:not(:empty),
  .conv-item:focus-within .conv-row-actions:not(:empty) {
    opacity: 1;
    pointer-events: auto;
  }
  .conv-item:hover .conv-row-end > .conv-rel,
  .conv-item:focus-within .conv-row-end > .conv-rel {
    opacity: 0;
  }
  .conv-item .conv-row-end > .conv-rel {
    flex: 0 0 auto;            /* override the column-width flex from the base rule */
    transition: opacity 0.12s ease;
  }
  .conv-item .conv-session-icon {
    width: var(--conv-dot-col);
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--conv-dot-col);
    vertical-align: middle;
  }
  .conv-session-icon svg {
    width: 13px;
    height: 13px;
    display: block;
  }
  .conv-item .conv-title {
    /* Omnara-style: slightly larger and looser line-height than the old
       13/1.2, weight stays at 400 — the difference reads as "designed
       breathing room" rather than "denser is better". */
    font-size: 13.5px; font-weight: 400; color: var(--text);
    line-height: 1.4; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    word-break: keep-all;
    letter-spacing: -0.005em;
  }
  .conv-item .conv-row-meta {
    display: grid;
    grid-template-columns: 64px max-content max-content 12px;
    align-items: center;
    column-gap: 0;
    justify-content: end;
    flex: 0 0 auto;
    min-width: 0;
  }
  .conv-item .conv-meta-inline {
    font-size: 10px; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
  }
  .conv-item .conv-status-slot,
  .conv-item .conv-branch-slot,
  .conv-item .conv-engine-slot {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
  }
  .conv-item .conv-status-slot {
    min-width: max-content;
    overflow: visible;
  }
  .conv-item .conv-branch-slot,
  .conv-item .conv-engine-slot {
    overflow: hidden;
  }
  .conv-item .conv-status-slot { justify-content: flex-end; }
  .conv-item .conv-branch-slot { justify-content: flex-end; }
  .conv-item .conv-engine-slot { justify-content: flex-end; }
  .conv-item .conv-status-slot:empty,
  .conv-item .conv-branch-slot:empty,
  .conv-item .conv-engine-slot:empty { display: none; }
  .conv-item .conv-status-slot .conv-live-tool { max-width: none; }
  .conv-item .conv-meta-inline .sep,
  .conv-item .conv-meta-inline .source-badge { display: none; }
  .conv-item .conv-meta-inline .sep { opacity: 0.4; }
  .conv-item .conv-rel {
    /* Time chip — bumped 10 → 11.5px for legibility (Omnara's looks
       around this size); tabular-nums keeps the column visually aligned
       across "9m" / "13h" / "2d" / "1w" without monospace font. */
    font-size: 11.5px; color: var(--text-muted);
    flex: 0 0 var(--conv-time-col);
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.75;
  }
  /* Date-gap separator — slim labelled rule between cards whose
     modified-times are far apart. Visual cue that you're crossing a
     work session boundary in the list. */
  .conv-gap-separator {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 6px 8px;
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    opacity: 0.55;
  }
  .conv-gap-line {
    flex: 1 1 auto; height: 1px; background: var(--border);
  }
  .compact-rows .conv-gap-separator { margin: 8px 6px 4px; }
  /* Inline twin of .kanban-live-tool — fits in the row's title line so
     "what is the agent doing right now" is visible at a glance even in
     compact-rows mode. Same yellow→blue tint pattern as kanban: yellow
     for "last completed", blue for "currently in flight". */
  .conv-item .conv-live-tool {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto; min-width: max-content;
    max-width: none;
    font-size: 10px;
    color: #FBCA04;
    background: rgba(251,202,4,0.10);
    border-left: 2px solid rgba(251,202,4,0.6);
    padding: 1px 4px; border-radius: 3px;
    white-space: nowrap;
    animation: pulse 2s infinite;
  }
  .conv-item .conv-live-tool .conv-live-name { font-weight: 600; }
  .conv-item .conv-live-tool .conv-live-file { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
  .conv-item .conv-live-tool .conv-live-file.is-command {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  }
  .conv-item .conv-live-tool.in-flight {
    color: #58a6ff;
    background: rgba(88,166,255,0.10);
    border-left-color: rgba(88,166,255,0.6);
    animation: pulse 1.2s infinite;
  }
  .conv-item .conv-live-tool.is-question {
    color: #58a6ff;
    background: rgba(88,166,255,0.12);
    border-left-color: rgba(88,166,255,0.7);
  }
  /* Compact rows — toggle on the conv list. Forces every card to a
     single line: truncate the title with ellipsis and hide the ask
     preview. Meta + signals stay so you can still scan state. The
     selector targets `.compact-rows` directly so the rule fires whether
     the parent is `.log-list`, `.conv-list`, or any other wrapper. */
  .compact-rows .conv-item {
    padding: 4px 10px;
    margin-bottom: 0;
  }
  .compact-rows .conv-item .conv-title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    word-break: keep-all;
    line-height: 1.2;
  }
  .compact-rows .conv-item .conv-last { display: none; }
  .compact-rows .conv-item .conv-title-row {
    gap: 0;
  }
  .conv-folder-group .conv-item.is-grouped-row {
    /* Grouped project lists need to stay dense; the folder header already
       provides the visual break, so rows should not carry extra air. */
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 4px;
  }
  .conv-folder-group .conv-item.is-grouped-row .conv-title {
    flex: 0 1 auto;
    line-height: 1.15;
  }
  .conv-folder-group .conv-item.is-grouped-row .conv-main-row {
    gap: 3px;
  }
  .conv-folder-group .conv-item.is-grouped-row .conv-row-meta {
    margin-left: 6px;
  }
  .conv-folder-group .conv-item.is-grouped-row .conv-meta-inline {
    min-width: 0;
  }
  .conv-folder-group .conv-item.is-grouped-row .conv-status-slot,
  .conv-folder-group .conv-item.is-grouped-row .conv-branch-slot,
  .conv-folder-group .conv-item.is-grouped-row .conv-engine-slot {
    flex: 0 0 auto;
  }
  @container sidebar (max-width: 760px) {
    .conv-item .conv-meta-inline {
      display: none;
    }
    .conv-item .conv-row-meta {
      grid-template-columns: max-content max-content 12px;
    }
  }
  @container sidebar (max-width: 640px) {
    .conv-item .conv-engine-slot {
      display: none !important;
    }
    .conv-item .conv-row-meta {
      grid-template-columns: max-content max-content;
    }
  }
  @container sidebar (max-width: 560px) {
    .conv-item .conv-branch-slot {
      display: none !important;
    }
    .conv-item .conv-row-meta {
      grid-template-columns: max-content;
    }
  }
  @container sidebar (max-width: 500px) {
    .conv-folder-chip {
      max-width: 104px;
    }
  }
  .conv-item .conv-title.untitled {
    font-weight: 500; color: var(--text-muted); font-style: italic;
  }
  /* Teal marker: "I renamed this from the command center" */
  /* Renamed sessions used to render their title in cyan, but the colour
     change made the list noisier without adding scannable signal — you
     usually know which sessions you renamed because you renamed them.
     Inheriting the default `--text` keeps every row visually equal, and
     the rename state is still recoverable through the rename button /
     hover affordance. */
  .conv-item .conv-title.user-renamed { color: inherit; }
  .conv-item .conv-edit-btn {
    opacity: 0; font-size: 13px; cursor: pointer;
    background: none; border: none; color: var(--text-muted);
    padding: 2px 2px; border-radius: 3px; flex-shrink: 0;
    margin-right: -2px;  /* pull title closer than the row's gap */
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    transform: scaleX(-1);  /* mirror so the pencil tip points back at the title */
  }
  .conv-item:hover .conv-edit-btn { opacity: 0.7; }
  .conv-item .conv-edit-btn:hover { opacity: 1; color: var(--accent); background: rgba(88,166,255,0.12); }
  .conv-item .conv-archive-btn {
    opacity: 0; font-size: 13px; cursor: pointer;
    background: none; border: none; color: var(--text-muted);
    padding: 2px 4px; border-radius: 3px; flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
  }
  .conv-item:hover .conv-archive-btn,
  .conv-item.active .conv-archive-btn,
  .conv-item .conv-archive-btn:focus-visible { opacity: 0.7; }
  .conv-item .conv-archive-btn:hover { opacity: 1; color: var(--orange); background: rgba(255,166,87,0.12); }
  .conv-item .conv-merge-btn {
    opacity: 0; font-size: 13px; cursor: pointer;
    background: none; border: none; color: var(--text-muted);
    padding: 2px 4px; border-radius: 3px; flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
  }
  .conv-item:hover .conv-merge-btn,
  .conv-item.active .conv-merge-btn,
  .conv-item .conv-merge-btn:focus-visible { opacity: 0.7; }
  .conv-item .conv-merge-btn:hover { opacity: 1; color: var(--green); background: rgba(63,185,80,0.12); }
  .conv-item .conv-merge-btn:disabled { cursor: progress; opacity: 0.5; }
  /* Backlog row action buttons stay icon-sized: this column is cramped, and
     the titles need every character they can get. */
  .conv-item .conv-start-btn {
    opacity: 0;
    width: 22px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; cursor: pointer;
    padding: 0; border-radius: 3px; flex-shrink: 0;
    border: 1px solid rgba(63,185,80,0.3);
    background: rgba(63,185,80,0.1); color: var(--green);
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  }
  .conv-item:hover .conv-start-btn,
  .conv-item.active .conv-start-btn,
  .conv-item .conv-start-btn:focus-visible { opacity: 0.9; }
  .conv-item .conv-start-btn:hover { background: rgba(63,185,80,0.2); border-color: rgba(63,185,80,0.55); }
  .conv-item .conv-start-btn:disabled { cursor: progress; opacity: 0.6; }
  .conv-item .conv-archive-btn.is-close {
    opacity: 0; font-size: 12px; font-weight: 600;
    width: 22px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 3px;
    border: 1px solid var(--border); background: transparent;
  }
  .conv-item:hover .conv-archive-btn.is-close,
  .conv-item.active .conv-archive-btn.is-close,
  .conv-item .conv-archive-btn.is-close:focus-visible { opacity: 0.7; }
  .conv-item .conv-archive-btn.is-close:hover { opacity: 1; color: var(--orange); background: rgba(255,166,87,0.12); border-color: rgba(255,166,87,0.4); }
  .conv-item .conv-title-input {
    flex: 1; font-size: 15px; font-weight: 600; color: var(--text);
    background: var(--bg); border: 1px solid var(--accent);
    border-radius: 4px; padding: 4px 6px; outline: none;
    font-family: inherit;
  }
  .conv-item .conv-last {
    font-size: 14px; color: var(--text-muted); margin-top: 4px;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .conv-item .conv-last .label { color: var(--text-muted); opacity: 0.7; margin-right: 4px; }
  .conv-item .meta {
    font-size: 13px; color: var(--text-muted); margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
  }
  .conv-item .meta .sep { opacity: 0.4; }
  .conv-item .branch-badge {
    display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px;
    background: rgba(188, 140, 255, 0.15); color: var(--purple);
    flex-shrink: 0;
    line-height: 1.1;
    max-width: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Worktree-flavoured branch pill — orange palette + 🌿 leaf so
     the row can be scanned at a glance for "is this session editing in
     a worktree?". Same shape as the default badge. */
  .conv-item .branch-badge.is-worktree {
    background: rgba(210, 153, 34, 0.15);
    color: var(--orange, #d29922);
  }
  /* Archived section header at the bottom of the sidebar list. The
     button is the entire row; click toggles the .collapsed class on
     the parent .conv-archived-section, which hides .conv-archived-list
     via the rule below. Caret rotates without an animation — keep it
     boring, the section is supposed to be quiet. */
  #convList .conv-archived-section,
  #convList .conv-ghissues-section,
  #convList .conv-readytomerge-section,
  #convList .conv-inprogress-section { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 6px; }
  /* The first section in the list (whichever it is — typically GH Issues,
   * but the next section takes the spot if earlier ones are empty) loses
   * its divider so the list doesn't start with an empty stripe. */
  #convList > .conv-ghissues-section:first-child,
  #convList > .conv-readytomerge-section:first-child,
  #convList > .conv-inprogress-section:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
  /* Ready-to-merge label gets a subtle green tint so the bucket reads as
   * "action required" at a glance, separate from the muted neutrality of
   * the other section labels. */
  #convList .conv-readytomerge-label { color: var(--green); }
  #convList .conv-readytomerge-count {
    background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.35);
    color: var(--green);
  }
  #convList .conv-archived-header,
  #convList .conv-ghissues-header,
  #convList .conv-readytomerge-header,
  #convList .conv-inprogress-header {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted); font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600;
  }
  #convList .conv-archived-header:hover,
  #convList .conv-ghissues-header:hover,
  #convList .conv-readytomerge-header:hover,
  #convList .conv-inprogress-header:hover { color: var(--text); }
  #convList .conv-archived-arrow,
  #convList .conv-ghissues-arrow,
  #convList .conv-readytomerge-arrow,
  #convList .conv-inprogress-arrow { font-size: 11px; opacity: 0.7; }
  #convList .conv-archived-count,
  #convList .conv-ghissues-count,
  #convList .conv-readytomerge-count,
  #convList .conv-inprogress-count {
    margin-left: auto;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 1px 8px; font-size: 11px;
    color: var(--text-muted); font-weight: 600;
  }
  #convList .conv-archived-section.collapsed .conv-archived-list,
  #convList .conv-ghissues-section.collapsed .conv-ghissues-list,
  #convList .conv-readytomerge-section.collapsed .conv-readytomerge-list,
  #convList .conv-inprogress-section.collapsed .conv-inprogress-list { display: none; }
  .conv-item .live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); animation: pulse 2s infinite;
    display: inline-block; flex-shrink: 0;
  }
  .conv-engine-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: 4px;
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }
  .conv-engine-icon.codex {
    color: #3dd68c;
    background: rgba(61, 214, 140, 0.12);
    border: 1px solid rgba(61, 214, 140, 0.45);
  }
  .conv-engine-icon.gemini {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.45);
  }
  .conv-signal {
    font-size: 10px; padding: 1px 5px; border-radius: 3px;
    font-weight: 600; white-space: nowrap; flex: 0 0 auto;
    line-height: 1.1;
  }
  .conv-signal.stage { background: rgba(188,140,255,0.15); color: var(--purple); }
  .conv-signal.committed { background: rgba(63,185,80,0.15); color: var(--green); }
  .conv-signal.pushed { background: rgba(57,210,192,0.15); color: var(--cyan); }
  /* "uncommitted" — `git status --porcelain` against the effective worktree.
   * Outranks committed/pushed/PR on a worktree row because it means there
   * are unstaged changes since the last recorded commit. */
  .conv-signal.uncommitted {
    background: rgba(240,136,62,0.18); color: #F0883E;
  }
  .conv-signal.pr-open    { background: rgba(57,210,192,0.15); color: var(--cyan); }
  .conv-signal.pr-merged  { background: rgba(163,113,247,0.18); color: #c4a8ff; }
  .conv-signal.pr-closed  { background: rgba(139,148,158,0.15); color: var(--text-muted); }
  .conv-signal.pr-note { background: rgba(251,202,4,0.15); color: #FBCA04; }
  .conv-signal.pr-note-danger { background: rgba(248,81,73,0.16); color: var(--red); }
  .conv-signal.activity-working { background: rgba(251,202,4,0.15); color: #FBCA04; animation: pulse 2s infinite; }
  .conv-signal.activity-waiting { background: rgba(88,166,255,0.1); color: var(--accent); }
  .conv-signal.activity-idle { background: rgba(139,148,158,0.08); color: var(--text-muted); }
  .conv-signal.activity-blocked { background: rgba(248,81,73,0.15); color: var(--red); animation: pulse 2s infinite; }
  .conv-signal.pkood-running { background: rgba(63,185,80,0.15); color: var(--green); }
  .conv-signal.pkood-idle { background: rgba(88,166,255,0.1); color: var(--accent); }
  .conv-signal.no-edits { background: rgba(88,166,255,0.1); color: var(--accent); }
  .conv-signal.read-only { background: rgba(139,148,158,0.12); color: var(--text-muted); }
  .conv-signal.pkood-blocked { background: rgba(248,81,73,0.15); color: var(--red); animation: pulse 2s infinite; }
  .conv-signal.pkood-stuck { background: rgba(248,81,73,0.25); color: var(--red); font-weight: 700; }
  /* "#N" issue-link chip on sidebar rows tied to a GH issue. Muted on
   * purpose — it's an identifier, not a state — so it doesn't compete
   * with the lifecycle chip (committed/pushed/PR/uncommitted) on the
   * same row. */
  .conv-signal.gh-link { background: rgba(139,148,158,0.12); color: var(--text-muted); font-weight: 600; }
  .conv-item .source-badge.pkood { background: rgba(210,153,34,0.2); color: var(--orange); }
  .conv-item .source-badge.codex { background: rgba(88,166,255,0.18); color: #79c0ff; }
  .conv-item .source-badge.gemini { background: rgba(122,162,255,0.16); color: #9bb7ff; }
  .pkood-tail-output {
    white-space: pre-wrap; word-break: break-word; font-family: 'SF Mono',SFMono-Regular,Consolas,monospace;
    font-size: 13px; line-height: 1.5; padding: 16px 20px; color: var(--text);
  }
  .pkood-kill-btn {
    padding: 4px 10px; font-size: 12px; border-radius: 6px; border: 1px solid var(--red);
    background: rgba(248,81,73,0.1); color: var(--red); cursor: pointer; font-weight: 600;
  }
  .pkood-kill-btn:hover { background: rgba(248,81,73,0.25); }
  .pkood-toggle-label {
    font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
  }
  .pkood-toggle-label input { margin: 0; cursor: pointer; }

  /* Inject input box — Omnara-style single rounded card. The whole row
     reads as one panel: rounded border, soft focus-within ring, no
     inner-input border. Mirrors `.cpi-wrap` (kanban variant) so the two
     surfaces feel consistent. */
  .conv-input-bar {
    display: none; /* shown via JS when live */
    padding: 10px 20px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .conv-input-bar.visible {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 14px;
    margin: 6px 14px 10px; padding: 8px 8px 8px 14px;
    background: var(--bg);
    transition: border-color 0.15s, box-shadow 0.15s;
    border-top: 1px solid var(--border);
  }
  .conv-input-bar.visible:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(110,140,175,0.16);
  }
  .conv-input-bar input,
  .conv-input-bar textarea {
    flex: 1; padding: 6px 4px;
    border: none; outline: none;
    background: transparent;
    /* Brighter than --text (#c9d1d9) so the prompt has the same legibility
       as Claude Desktop's input. Light-mode override below keeps it dark. */
    color: #f0f6fc;
    font-size: 15px; font-weight: 500; font-family: inherit;
  }
  .conv-input-bar textarea {
    /* Single-row by default; autosize JS grows the height as the user
       types. Cap at ~10 rows then scroll internally. `resize: none` hides
       the OS resize-handle (the grip in the bottom-right corner). */
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    min-height: 24px;
    max-height: 240px;
  }
  .conv-pane.has-conv-bg .conv-input-bar input,
  .conv-pane.has-conv-bg .conv-input-bar textarea {
    color: var(--conv-text);
  }
  :root[data-theme="light"] .conv-input-bar input,
  :root[data-theme="light"] .conv-input-bar textarea { color: #1f2328; }
  :root[data-theme="light"] .conv-pane.has-conv-bg .conv-input-bar input,
  :root[data-theme="light"] .conv-pane.has-conv-bg .conv-input-bar textarea { color: var(--conv-text); }
  .conv-input-bar input::placeholder,
  .conv-input-bar textarea::placeholder { color: var(--text-muted); opacity: 0.6; font-weight: 400; }
  .slash-command-menu {
    position: fixed;
    z-index: 10000;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.38);
  }
  .slash-command-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }
  .slash-command-item:hover,
  .slash-command-item.selected {
    background: var(--surface-2);
    border-color: rgba(88,166,255,0.35);
  }
  .slash-command-item.disabled {
    cursor: default;
    opacity: 0.72;
  }
  .slash-command-item.disabled .slash-command-name {
    color: var(--text-muted);
  }
  .slash-command-name {
    color: var(--accent);
    font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
  }
  .slash-command-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 12px;
  }
  /* Bar uses align-items:center for single-line; flip to flex-end so the
     send button stays anchored to the bottom row when the textarea grows. */
  .conv-input-bar.visible { align-items: flex-end; }
  .conv-input-bar .send-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    background: var(--accent); color: #fff;
    line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 0.15s, transform 0.05s;
  }
  .conv-input-bar .send-btn:hover { opacity: 0.9; }
  .conv-input-bar .send-btn:active { transform: translateY(1px); }
  .conv-input-bar .send-btn:disabled {
    background: transparent; color: var(--text-muted);
    border-color: var(--border); cursor: not-allowed; opacity: 0.5;
  }
  .conv-input-bar .send-btn svg { display: block; }
  .conv-input-bar .tts-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 999px; border: 1px solid var(--border); cursor: pointer;
    background: transparent; color: var(--text-muted);
    line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  }
  .conv-input-bar .tts-btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .conv-input-bar .tts-btn:active { transform: translateY(1px); }
  .conv-input-bar .tts-btn.speaking {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.28),
      0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: translateY(1px);
  }
  .conv-input-bar .tts-btn.failed {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 55%, transparent);
  }
  .conv-input-bar .tts-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .conv-input-bar .tts-btn svg { display: block; }
  /* Demoted Esc — borderless ghost so it stops competing visually with
     the send button. Same hover/state cues, just less prominent at rest. */
  .conv-input-bar .esc-btn {
    height: 28px; padding: 0 8px; flex-shrink: 0;
    border-radius: 6px; border: 1px solid transparent; cursor: pointer;
    background: transparent; color: var(--text-muted);
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .conv-input-bar .esc-btn:hover { background: var(--surface-2); color: var(--text); }
  .conv-input-bar .esc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .conv-input-bar .esc-btn.sent { background: var(--accent); color: #fff; border-color: var(--accent); }
  .conv-input-bar .esc-btn.failed { color: #f85149; border-color: #f85149; }
  /* Tty label — moved out of the input row into a muted footer underneath
     the card so it doesn't take horizontal space on the input row. */
  .conv-input-hint {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 22px 0;
    margin-top: -2px;
    font-size: 10px; color: var(--text-muted); opacity: 0.6;
  }
  .conv-input-hint:empty,
  .conv-input-hint:has(.tty-label:empty):not(:has(.conv-input-kbd)) { display: none; }
  .conv-input-hint .tty-label {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  }
  .conv-input-hint .conv-input-kbd {
    margin-left: auto;
    font-family: inherit;
  }
  .conv-input-hint kbd {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 3px; padding: 0 4px; font-size: 9px;
  }
  /* Legacy in-row tty-label kept for any hidden code paths that still query
     it; the new footer span is what's actually visible. */
  .conv-input-bar > .tty-label {
    font-size: 10px; color: var(--text-muted); opacity: 0.6;
    white-space: nowrap;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    flex: 0 0 auto;
  }
  .conv-item.dragging {
    opacity: 0.4; transform: scale(0.98);
  }
  .conv-item.drop-above {
    box-shadow: inset 0 2px 0 0 var(--accent);
  }
  .conv-item.drop-below {
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }
  /* Drag-to-pin: highlight the destination folder group header while the
     dragged row hovers over it. */
  .conv-folder-group-header.drop-target {
    background: rgba(88, 166, 255, 0.12);
    box-shadow: inset 0 0 0 1px var(--accent);
    border-radius: 4px;
  }
  /* Pin indicator on rows whose repo bucket the user overrode. The
     button doubles as the unpin affordance. */
  .conv-repo-pin {
    background: transparent; border: none; cursor: pointer; padding: 0 2px;
    font-size: 11px; line-height: 1; opacity: 0.85;
    color: var(--text-muted);
  }
  .conv-repo-pin:hover { opacity: 1; color: var(--accent); }
  .conv-item.is-repo-pinned .conv-folder-chip {
    outline: 1px dashed var(--accent); outline-offset: 1px;
  }
  .conv-item .drag-handle {
    display: none;
    position: absolute; left: 2px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted); opacity: 0.5;
    font-size: 14px; cursor: grab; user-select: none;
  }
  .conv-item { position: relative; }
  .conv-item:hover .drag-handle { display: block; }
  .conv-item.dragging .drag-handle { cursor: grabbing; }

  .conv-list-panel {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    border-top: 1px solid var(--border);
  }
  /* Conversation list header with search + refresh */
  .conv-list-header {
    display: flex; gap: 6px; align-items: center;
    padding: 8px 12px 0;
  }
  .conv-list-header .search-wrap { flex: 1; position: relative; }
  .conv-search-input {
    width: 100%;
    padding: 6px 30px 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    outline: none;
  }
  .conv-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
  }
  .search-wrap.has-value .conv-search-clear { display: flex; }
  .conv-search-clear:hover,
  .conv-search-clear:focus-visible {
    background: var(--surface-2);
    color: var(--text);
  }
  .conv-refresh-btn {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 4px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.4s;
  }
  .conv-refresh-btn:hover { color: var(--text); background: var(--surface-2); }
  .conv-refresh-btn.spinning { transform: rotate(360deg); }
  .conv-sort-btn {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 4px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .conv-sort-btn:hover { color: var(--text); background: var(--surface-2); }
  .conv-sort-btn.active { color: var(--accent); border-color: rgba(88,166,255,0.4); }
  .conv-archive-toggle {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 4px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .conv-archive-toggle:hover { color: var(--text); background: var(--surface-2); }
  .conv-archive-toggle.active { color: var(--orange); border-color: rgba(255,166,87,0.4); }

  .conv-item .source-badge {
    display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px;
    background: rgba(210, 153, 34, 0.15); color: var(--orange);
    font-weight: 600; white-space: nowrap; flex-shrink: 0;
  }
  .source-badge svg {
    width: 100%; height: 100%; display: block;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

  /* ── Kanban board (vertical stacked columns in sidebar) ── */
  /* Sizing comes from .sh-btn (padding-based) so the " Board" label fits;
     keep the flex centering so the ☷ glyph + text line up. */
  .conv-kanban-toggle {
    flex-shrink: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    transition: background 0.15s, color 0.15s;
  }
  .conv-kanban-toggle.active { color: var(--accent); border-color: rgba(88,166,255,0.4); }

  .kanban-board {
    display: flex; gap: 12px; padding: 8px;
    flex: 1; min-height: 0; overflow-x: auto;
  }
  .kanban-column {
    min-width: 260px; flex: 1;
    display: flex; flex-direction: column; min-height: 0;
  }
  .kanban-board-split .kanban-column { min-width: 280px; }
  /* Subtle per-column background tints */
  .kanban-column { border-radius: 8px; padding: 4px; transition: background 0.2s; }
  /* Cards pick up a matching tint on top of their default surface */
  .kanban-column.backlog  .kanban-card { background: linear-gradient(rgba(139,148,158,0.10), rgba(139,148,158,0.10)), var(--surface); }
  .kanban-column.needs-attention .kanban-card { background: linear-gradient(rgba(248,81,73,0.16), rgba(248,81,73,0.16)), var(--surface); }
  .kanban-org-header {
    font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--text-muted); padding: 6px 4px 2px; margin-top: 4px;
    border-top: 1px solid var(--border);
  }
  .kanban-cards > .kanban-org-header:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
  .kanban-column.icebox   .kanban-card { background: linear-gradient(rgba(188,140,255,0.14), rgba(188,140,255,0.14)), var(--surface); }
  .kanban-column.working  .kanban-card { background: linear-gradient(rgba(210,153,34,0.16), rgba(210,153,34,0.16)), var(--surface); }
  .kanban-column.review   .kanban-card { background: linear-gradient(rgba(57,210,192,0.14), rgba(57,210,192,0.14)), var(--surface); }
  .kanban-column.testing  .kanban-card { background: linear-gradient(rgba(251,202,4,0.14), rgba(251,202,4,0.14)), var(--surface); }
  .kanban-column.verified .kanban-card { background: linear-gradient(rgba(63,185,80,0.16), rgba(63,185,80,0.16)), var(--surface); }
  .kanban-column.archived .kanban-card { background: linear-gradient(rgba(139,148,158,0.04), rgba(139,148,158,0.04)), var(--surface); }
  .kanban-column-header { cursor: grab; }
  .kanban-column-header.dragging-header { opacity: 0.5; }
  .kanban-column-header.drop-target-header { background: rgba(88,166,255,0.18); outline: 1px dashed var(--accent); }
  .kanban-column-header {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; cursor: pointer; user-select: none;
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); border-radius: 4px;
    transition: background 0.15s;
  }
  .kanban-column-header:hover { background: var(--surface-2); }
  .kanban-column-header .arrow { font-size: 10px; transition: transform 0.2s; }
  .kanban-column-header.collapsed .arrow { transform: rotate(-90deg); }
  .kanban-column-header .count {
    font-size: 10px; padding: 1px 6px; border-radius: 10px;
    background: var(--border); color: var(--text-muted);
    font-weight: 700;
  }
  /* Column-specific header colors */
  .kanban-column.blocked .kanban-column-header { color: var(--red); }
  .kanban-column.blocked .count { background: rgba(248,81,73,0.2); color: var(--red); }
  .kanban-column.working .kanban-column-header { color: #FBCA04; }
  .kanban-column.working .count { background: rgba(251,202,4,0.2); color: #FBCA04; }
  .kanban-column.needs-attention .kanban-column-header { color: var(--red); }
  .kanban-column.needs-attention .count { background: rgba(248,81,73,0.2); color: var(--red); }
  .kanban-column.waiting .kanban-column-header { color: var(--accent); }
  .kanban-column.waiting .count { background: rgba(88,166,255,0.15); color: var(--accent); }
  .kanban-column.idle .kanban-column-header { color: var(--text-muted); }
  .kanban-column.icebox   .kanban-column-header { color: var(--purple); }
  .kanban-column.icebox   .count { background: rgba(188,140,255,0.2); color: var(--purple); }
  .kanban-column.coding .kanban-column-header { color: var(--orange); }
  .kanban-column.coding .count { background: rgba(210,153,34,0.2); color: var(--orange); }
  .kanban-column.review .kanban-column-header { color: var(--cyan); }
  .kanban-column.review .count { background: rgba(57,210,192,0.2); color: var(--cyan); }
  .kanban-column.backlog .kanban-column-header { color: var(--text-muted); }
  .kanban-column.backlog .count { background: rgba(139,148,158,0.15); color: var(--text-muted); }
  .kanban-column.testing .kanban-column-header { color: #FBCA04; }
  .kanban-column.testing .count { background: rgba(251,202,4,0.2); color: #FBCA04; }
  .kanban-column.archived .kanban-column-header { color: var(--text-muted); opacity: 0.6; }
  .kanban-column.archived .count { background: rgba(139,148,158,0.1); color: var(--text-muted); }
  .kanban-column.verified .kanban-column-header { color: var(--green); }
  .kanban-column.verified .count { background: rgba(63,185,80,0.2); color: var(--green); }

  /* Animated glow on Working column cards */
  @keyframes working-glow {
    0%, 100% {
      border-color: rgba(251,202,4,0.4) !important;
      box-shadow: 0 0 6px rgba(251,202,4,0.2);
    }
    50% {
      border-color: rgba(251,202,4,0.9) !important;
      box-shadow: 0 0 18px rgba(251,202,4,0.55);
    }
  }
  .kanban-card.truly-active {
    animation: working-glow 1.6s ease-in-out infinite !important;
    border: 1px solid rgba(251,202,4,0.4) !important;
  }
  /* "no edits" attribute: shown on cards whose Claude has never edited a file
     (live or dead — liveness doesn't matter). Renders as a small lowercase
     blue chip next to the stage chip. No card-level dimming so cards stay
     scannable. */
  /* Pending (optimistic placeholder while /api/sessions/spawn is in flight)
     and recently-born (the real session that replaced it, or any session
     that first appeared during a live poll) share one shimmer style so the
     visual state is continuous across the swap. Only the iteration count
     differs: pending shimmers forever until the placeholder is replaced;
     recently-born stops itself after ~28s via the bounded count. */
  .kanban-card.pending-spawn,
  .kanban-card.recently-born:not(.pending-spawn) {
    border: 1px dashed rgba(88,166,255,0.6) !important;
    background: linear-gradient(90deg, var(--surface) 0%, rgba(88,166,255,0.08) 50%, var(--surface) 100%);
    background-size: 200% 100%;
    animation: pending-shimmer 1.4s linear infinite;
    position: relative;
  }
  .kanban-card.recently-born:not(.pending-spawn) {
    /* Bounded iteration count — shimmer stops itself after ~28s and the
       `.recently-born` class comes off on the next render via isRecentlyBorn. */
    animation-iteration-count: 20;
  }
  .kanban-card.pending-spawn .kanban-card-title::after {
    content: ' · spawning...';
    font-weight: 400; color: var(--accent); font-size: 11px;
  }
  @keyframes pending-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .kanban-cards {
    padding: 4px 0; overflow-y: auto; flex: 1; min-height: 0;
  }
  .kanban-column.collapsed .kanban-cards { display: none; }
  .kanban-column.collapsed { flex: 0; min-width: auto; }

  .kanban-card {
    padding: 10px 12px; margin-bottom: 6px; border-radius: 6px;
    background: var(--surface); border: 1px solid var(--border);
    cursor: pointer;
    /* Soft transitions so column/state changes feel continuous rather than
       snap-to. .just-moved handles the big flash when a card actually changes
       column; these cover the subtler per-field shifts. */
    transition: border-color 0.15s, background-color 0.25s, box-shadow 0.25s;
  }
  /* Fade-in when a card appears for the first time (placeholder swap, a new
     session showing up mid-session, or a freshly-loaded board). Paired with
     the JS that only stamps this class on inserts, not re-renders. */
  @keyframes card-enter {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .kanban-card.card-enter { animation: card-enter 0.22s ease-out; }
  .kanban-card:hover { border-color: var(--text-muted); }
  .kanban-card.active { border-color: var(--accent); }
  .kanban-card .kanban-card-title {
    font-size: 13px; font-weight: 500; color: var(--text);
    line-height: 1.35; word-break: break-word;
    /* No right-padding — titles fill the full card width. The action-icon
       cluster is opacity:0 by default and only fades in on :hover, so a
       permanent gutter for it wasted card real estate. On hover the icons
       float over the title's right edge with their own bg, which reads as
       a normal floating-button pattern (Notion / GitHub / etc.). */
    padding-right: 0;
  }
  /* State badges (GH #NNN, open/closed, needs-attention, Desktop) live on
     their own row above the title so the title can use the full card width. */
  .kanban-card .kanban-card-badges {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 0; margin-bottom: 4px;
    padding-right: 0;
  }
  .kanban-card .kanban-card-desc {
    font-size: 12px; color: var(--text-muted);
    line-height: 1.4; margin-top: 4px; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* See `.conv-item .conv-title.user-renamed` above — same reasoning,
     applied to the kanban-card view so the two surfaces stay consistent. */
  .kanban-card .kanban-card-title.user-renamed { color: inherit; }
  .kanban-card .kanban-card-actions {
    display: flex; gap: 4px; position: absolute; top: 6px; right: 6px; opacity: 0;
    transition: opacity 0.15s;
  }
  .kanban-card { position: relative; cursor: grab; }
  .kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
  .kanban-card.selected {
    box-shadow: 0 0 0 2px var(--accent) !important;
    background: rgba(88,166,255,0.08) !important;
  }
  .kanban-column.drag-over { background: rgba(88,166,255,0.08); outline: 2px dashed var(--accent); outline-offset: -2px; }
  .kanban-card.drop-link-target { outline: 2px dashed var(--green); outline-offset: 2px; }
  @keyframes cardJustMoved {
    0%   { box-shadow: 0 0 0 0 rgba(88,166,255,0.0); background-color: rgba(88,166,255,0.28); }
    40%  { box-shadow: 0 0 18px 4px rgba(88,166,255,0.55); background-color: rgba(88,166,255,0.18); }
    100% { box-shadow: 0 0 0 0 rgba(88,166,255,0.0); background-color: inherit; }
  }
  .kanban-card.just-moved { animation: cardJustMoved 2.2s ease-out; }
  /* Spawning feedback on a backlog card while a new session is being created. */
  .kanban-card.spawning {
    pointer-events: none;
    opacity: 0.55;
    animation: spawnPulse 1.4s ease-in-out infinite;
    position: relative;
  }
  .kanban-card.spawning::after {
    content: 'Spawning…';
    position: absolute; top: 8px; right: 10px;
    font-size: 11px; font-weight: 600;
    color: var(--accent);
    background: rgba(88,166,255,0.15);
    border: 1px solid rgba(88,166,255,0.4);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.3px;
  }
  @keyframes spawnPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
  }
  .kanban-card:hover .kanban-card-actions { opacity: 1; }
  .kanban-card .kanban-action-btn {
    width: 22px; height: 22px; border-radius: 3px; border: none;
    background: var(--bg); color: var(--text-muted); cursor: pointer;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
  }
  .kanban-card .kanban-action-btn:hover { color: var(--text); background: var(--border); }
  .kanban-card .kanban-card-meta {
    font-size: 11px; color: var(--text-muted); margin-top: 3px;
  }
  .kanban-card .kanban-card-interacted {
    font-size: 10px; color: var(--text-muted); opacity: 0.7;
    margin-top: 2px; font-style: italic;
  }
  .kanban-card .kanban-card-stage {
    display: inline-block; margin-top: 4px;
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    font-weight: 600;
  }
  .kanban-card .kanban-card-stage.stage { background: rgba(188,140,255,0.15); color: var(--purple); }
  .kanban-card .kanban-card-stage.committed { background: rgba(63,185,80,0.15); color: var(--green); }
  .kanban-card .kanban-card-stage.testing { background: rgba(251,202,4,0.15); color: #FBCA04; }
  .kanban-card .kanban-card-stage.no-edits { background: rgba(88,166,255,0.1); color: var(--accent); margin-left: 4px; }
  .kanban-card .kanban-card-stage.read-only { background: rgba(139,148,158,0.12); color: var(--text-muted); margin-left: 4px; }
  .kanban-issue-badge {
    display: inline-block; font-size: 11px; padding: 1px 6px;
    border-radius: 3px; margin-right: 6px; font-weight: 600;
    background: rgba(63,185,80,0.18); color: var(--green);
    vertical-align: middle; letter-spacing: 0.3px;
  }
  /* Inline GH-issue reference inside a title — used when the AI title
     preserves a "#NNN" but the card itself isn't linked to a GH issue
     in metadata. Subtler than the badge; just gives the number signal. */
  .kanban-issue-ref {
    color: var(--green);
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
  }
  .kanban-gh-state {
    display: inline-block; font-size: 10px; padding: 1px 6px;
    border-radius: 3px; margin-right: 6px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle;
  }
  .kanban-gh-state.gh-open {
    background: rgba(63,185,80,0.18); color: var(--green);
  }
  .kanban-gh-state.gh-closed {
    background: rgba(188,140,255,0.18); color: var(--purple);
  }
  .kanban-gh-wip {
    display: inline-block; font-size: 10px; padding: 1px 6px;
    border-radius: 3px; margin-right: 6px; font-weight: 700;
    background: rgba(251,202,4,0.22); color: #FBCA04;
    text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle;
  }
  .kanban-desktop-badge {
    display: inline-block; font-size: 10px; padding: 1px 6px;
    border-radius: 3px; margin-right: 6px; font-weight: 700;
    background: rgba(188,140,255,0.18); color: var(--purple);
    text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle;
  }
  .kanban-na-chip {
    display: inline-block; font-size: 10px; padding: 1px 6px;
    border-radius: 3px; margin-right: 6px; font-weight: 700;
    background: rgba(248,81,73,0.2); color: var(--red);
    text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle;
  }
  /* Needs-approval badge — Notification hook signal. Sits above the title
     on cards parked in the Waiting column. Pulses gently to draw the eye. */
  .kanban-needs-approval-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    padding: 4px 8px; margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(88,166,255,0.18); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.35);
    animation: kanban-needs-approval-pulse 2s ease-in-out infinite;
  }
  .kanban-needs-approval-icon { font-size: 13px; line-height: 1; }
  .kanban-needs-approval-label { text-transform: uppercase; letter-spacing: 0.5px; }
  .kanban-needs-approval-msg {
    font-weight: 400; font-size: 10px; opacity: 0.85;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
  }
  .kanban-needs-approval-badge.is-question {
    color: #58a6ff;
    background: rgba(88,166,255,0.14);
    border-color: rgba(88,166,255,0.35);
  }
  @keyframes kanban-needs-approval-pulse {
    0%, 100% { background: rgba(88,166,255,0.18); }
    50%      { background: rgba(88,166,255,0.32); }
  }
  /* The GH #NNN badge on backlog cards is also a click target (opens the
     issue on GitHub). Show that affordance. */
  .kanban-card.backlog-card .kanban-issue-badge[data-action="view-issue"] {
    cursor: pointer;
  }
  .kanban-card.backlog-card .kanban-issue-badge[data-action="view-issue"]:hover {
    background: rgba(63,185,80,0.32);
  }
  .kanban-card .kanban-card-stage.pushed { background: rgba(57,210,192,0.15); color: var(--cyan); }
  .kanban-show-all {
    padding: 6px 12px; font-size: 11px; color: var(--accent);
    cursor: pointer; text-align: center;
  }
  .kanban-show-all:hover { text-decoration: underline; }

  /* ── Split Kanban Layout (Tasks 6-9) ── */
  #kanbanLayout {
    /* Topbar was merged into #convToolbar (no longer a separate fixed row),
       so the body has no padding-top — kanban can take the full viewport. */
    display: none; height: 100vh; overflow: hidden;
  }
  #kanbanLayout.active { display: flex; }
  body.kanban-split .sidebar { display: none !important; }
  body.kanban-split #sidebarResizer { display: none !important; }
  body.kanban-split .main { display: none !important; }

  .kanban-panel {
    flex: 3; display: flex; flex-direction: column;
    background: var(--surface); overflow: hidden; min-width: 400px;
    border-right: 1px solid var(--border);
  }
  .kanban-panel-toolbar {
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: var(--surface);
  }
  .kanban-panel-toolbar input[type="text"] {
    padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 12px; outline: none;
  }
  .kanban-panel-toolbar .kpt-search { width: 180px; }
  .kanban-panel-toolbar .kpt-new-session { flex: 0 1 260px; min-width: 120px; }
  .hide-descs .kanban-card-desc { display: none !important; }
  .kanban-panel-toolbar button {
    padding: 5px 10px; font-size: 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    cursor: pointer; white-space: nowrap;
  }
  .kanban-panel-toolbar button:hover { background: var(--surface-2); }
  .kanban-panel-toolbar button.active { color: var(--accent); border-color: rgba(88,166,255,0.4); }
  .kanban-panel-toolbar .kpt-label {
    font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; cursor: pointer;
  }
  .kanban-panel .kanban-board-split {
    display: flex; gap: 12px; padding: 12px;
    flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden;
  }
  .nsm-overlay { position: fixed; inset: 0; z-index: 9999; display: flex;
    align-items: center; justify-content: center; }
  .nsm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px); }
  .nsm-dialog { position: relative; width: min(900px, 80vw);
    max-height: 85vh; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
  .nsm-header { display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
  .nsm-header span:first-child { font-size: 16px; color: var(--text); font-weight: 600; }
  .nsm-hint { font-size: 11px; }
  #nsmBody { font-size: 15px; padding: 14px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 6px; color: var(--text);
    outline: none; min-height: 320px; resize: vertical; font-family: inherit;
    line-height: 1.5; }
  #nsmBody:focus { border-color: var(--accent); }
  .nsm-actions { display: flex; gap: 8px; align-items: center; }
  .nsm-pkood { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; cursor: pointer; }
  .nsm-btn { padding: 8px 16px; font-size: 13px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    cursor: pointer; }
  .nsm-btn:hover { background: var(--surface-2); }
  .nsm-primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
  .nsm-primary:hover { opacity: 0.9; background: var(--accent); }
  .nsm-primary:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Template gallery — card grid rendered above the prompt textarea when
     the modal opens with an empty body. Driven by static/templates.json.
     Cards are buttons (keyboard-focusable, click-to-fill). */
  .nsm-gallery {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    max-height: 220px; overflow-y: auto;
    padding: 2px;
  }
  .nsm-gallery-card {
    text-align: left; cursor: pointer;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color 0.12s, background 0.12s;
    font-family: inherit;
  }
  .nsm-gallery-card:hover { border-color: var(--accent); background: var(--surface-2); }
  .nsm-gallery-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .nsm-gallery-card.is-selected { border-color: var(--accent); background: var(--surface-2); }
  .nsm-gallery-card-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
  .nsm-gallery-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
  .nsm-gallery-card-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
  .nsm-gallery-chip {
    font-size: 10px; color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 3px; padding: 1px 6px;
  }
  .nsm-gallery-chip.is-wt { color: var(--green); }

  /* --- Files-from-conversation (pill + modal) ----------------------- */
  /* Pill lives inside the sticky header's fixed-height activity column; only
     rendered when count > 0. Keeping it inside .csh-row avoids changing the
     sticky header's outer height after the async files request resolves. */
  .ffc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; margin: 0 0 6px 0;
    border: 1px solid var(--border, #30363d);
    border-radius: 999px;
    background: var(--surface-2, #161b22);
    color: var(--text, #c9d1d9);
    font-size: 11px; font-weight: 500; cursor: pointer;
    line-height: 1.4;
  }
  .conv-sticky-header .csh-col-activity > .ffc-pill {
    flex: 0 0 auto;
    align-self: flex-start;
  }
  .ffc-pill:hover { border-color: var(--accent, #58a6ff); color: var(--accent, #58a6ff); }
  .ffc-pill[hidden] { display: none !important; }
  .ffc-pill-count { opacity: 0.7; }

  /* Modal — modeled on .nsm- pattern. */
  .ffc-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
  }
  .ffc-overlay[hidden] { display: none !important; }
  .ffc-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.65);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .ffc-dialog {
    position: relative;
    background: var(--surface, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    width: min(640px, 92vw);
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 16px 64px rgba(0,0,0,0.5);
  }
  .ffc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #30363d);
  }
  .ffc-title { font-size: 14px; font-weight: 600; color: var(--text, #c9d1d9); }
  .ffc-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #8b949e); font-size: 18px; line-height: 1;
    padding: 4px 8px; border-radius: 4px;
  }
  .ffc-close:hover { background: var(--surface-2, #161b22); color: var(--text, #c9d1d9); }
  .ffc-body {
    overflow-y: auto; padding: 8px 16px 16px;
  }
  .ffc-section { margin-top: 12px; }
  .ffc-section:first-child { margin-top: 0; }
  .ffc-section-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted, #8b949e); margin-bottom: 6px;
  }
  .ffc-row {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 6px;
    cursor: pointer;
  }
  .ffc-row:hover { background: var(--surface-2, #161b22); }
  .ffc-row-label {
    display: flex; align-items: center; gap: 8px;
    color: var(--text, #c9d1d9); font-size: 13px;
  }
  .ffc-row-icon { width: 18px; text-align: center; }
  .ffc-row-target {
    color: var(--text-muted, #8b949e); font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
    cursor: copy;
  }
  .ffc-row-target:hover { color: var(--text, #c9d1d9); }
  .ffc-row-toast {
    color: #f85149; font-size: 11px; margin-top: 2px;
  }
  .ffc-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border, #30363d);
    color: var(--text-muted, #8b949e); font-size: 11px;
  }
  .ffc-empty {
    color: var(--text-muted, #8b949e); padding: 16px; text-align: center;
  }

  /* ── Repo picker modal ─────────────────────────────────────────────
     Opened when the user selects "Pick a repo…" from the dropdown.
     Shares the nsm-* overlay pattern for visual consistency. */
  .rpm-overlay { position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center; }
  .rpm-overlay.open { display: flex; }
  .rpm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px); }
  .rpm-dialog { position: relative; width: min(620px, 92vw);
    max-height: 80vh; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
  .rpm-header { display: flex; justify-content: space-between; align-items: baseline; }
  .rpm-header-title { font-size: 16px; font-weight: 600; color: var(--text); }
  .rpm-header-hint { font-size: 11px; color: var(--text-muted); }
  .rpm-section-label { font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
    margin-top: 4px; }
  .rpm-list { display: flex; flex-direction: column; gap: 2px;
    max-height: 220px; overflow-y: auto; border: 1px solid var(--border);
    border-radius: 6px; padding: 4px; background: var(--bg); }
  .rpm-item { display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 4px; cursor: pointer;
    background: transparent; border: none; color: var(--text); text-align: left; }
  .rpm-item:hover { background: var(--surface-2); }
  .rpm-item.active { background: rgba(88,166,255,0.12); }
  .rpm-item .rpm-item-label { font-size: 13px; font-weight: 500; }
  .rpm-item .rpm-item-path { font-size: 11px; color: var(--text-muted);
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rpm-item .rpm-item-current { font-size: 10px; color: var(--accent); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; }
  .rpm-empty { padding: 12px; color: var(--text-muted); font-size: 12px;
    font-style: italic; text-align: center; }
  .rpm-divider { height: 1px; background: var(--border); margin: 2px 0; }
  .rpm-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
  .rpm-browse-btn { padding: 8px 14px; font-size: 13px; border-radius: 6px;
    border: 1px solid var(--accent); background: transparent; color: var(--accent);
    cursor: pointer; font-weight: 500; }
  .rpm-browse-btn:hover { background: rgba(88,166,255,0.1); }
  .rpm-browse-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .rpm-cancel-btn { padding: 8px 14px; font-size: 13px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    cursor: pointer; margin-left: auto; }
  .rpm-cancel-btn:hover { background: var(--surface-2); }
  .rpm-error { font-size: 12px; color: var(--red);
    background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3);
    border-radius: 6px; padding: 8px 10px; display: none; }
  .rpm-error.visible { display: block; }

  /* ── In-app update pill + modal ──────────────────────────────────
     Subtle "Update available" pill that appears in the topbar when
     the local __version__ is behind GitHub's latest release tag.
     Clicking the pill opens the .upd-overlay modal. */
  .upd-pill {
    display: none; align-items: center; gap: 6px;
    padding: 3px 10px; margin-left: 8px;
    background: rgba(88,166,255,0.12); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.35); border-radius: 999px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    letter-spacing: 0.2px; white-space: nowrap;
    transition: background 0.12s ease-out;
  }
  .upd-pill.visible { display: inline-flex; }
  .upd-pill:hover { background: rgba(88,166,255,0.22); }
  .upd-pill .upd-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 0 rgba(88,166,255,0.4);
    animation: upd-pulse 2.4s ease-out infinite;
  }
  @keyframes upd-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(88,166,255,0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(88,166,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); }
  }
  .upd-overlay { position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center; }
  .upd-overlay.open { display: flex; }
  .upd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px); }
  .upd-dialog { position: relative; width: min(500px, 92vw);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
  .upd-title { font-size: 16px; font-weight: 600; color: var(--text); }
  .upd-versions { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
  .upd-versions strong { color: var(--text); font-weight: 600; }
  .upd-compare-link { font-size: 12px; color: var(--accent); text-decoration: none; }
  .upd-compare-link:hover { text-decoration: underline; }
  .upd-warning { font-size: 11px; color: var(--text-muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px; line-height: 1.5; }
  .upd-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .upd-btn { padding: 8px 16px; font-size: 13px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    cursor: pointer; font-family: inherit; }
  .upd-btn:hover { background: var(--surface-2); }
  .upd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .upd-primary { background: var(--accent); color: #fff;
    border-color: var(--accent); font-weight: 600; }
  .upd-primary:hover { opacity: 0.9; background: var(--accent); }
  .upd-error { font-size: 12px; color: var(--red);
    background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3);
    border-radius: 6px; padding: 8px 10px; display: none;
    white-space: pre-wrap; word-break: break-word; }
  .upd-error.visible { display: block; }

  /* ── Bug-report link + modal ─────────────────────────────────
     Subtle "Report a bug" link in the topbar. Opens a modal that
     reuses the .upd-overlay / .upd-dialog / .upd-btn shells. */
  .bug-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; margin-left: 8px;
    background: transparent; color: var(--text-muted);
    border: 1px solid transparent; border-radius: 999px;
    font-size: 11px; font-family: inherit; cursor: pointer;
    letter-spacing: 0.2px; white-space: nowrap;
    transition: background 0.12s ease-out, color 0.12s ease-out;
  }
  .bug-link:hover { background: rgba(255,255,255,0.04); color: var(--text); }
  .bug-input { width: 100%; box-sizing: border-box;
    padding: 7px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font-family: inherit; font-size: 13px;
    outline: none; }
  .bug-input:focus { border-color: var(--accent); }
  .bug-textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
  .bug-label { font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 6px; display: block; }
  .bug-meta { font-size: 11px; color: var(--text-muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px; line-height: 1.5;
    word-break: break-all; }
  .bug-meta code { font-family: 'SF Mono',SFMono-Regular,Consolas,monospace;
    font-size: 10.5px; color: var(--text); }
  .bug-success { font-size: 12px; color: var(--green, #3fb950);
    background: rgba(63,185,80,0.1); border: 1px solid rgba(63,185,80,0.3);
    border-radius: 6px; padding: 8px 10px; display: none; }
  .bug-success.visible { display: block; }
  .bug-fallback {
    font-size: 12px; color: var(--text-muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px; display: none;
    white-space: pre-wrap; word-break: break-word;
    max-height: 180px; overflow: auto;
    font-family: 'SF Mono',SFMono-Regular,Consolas,monospace;
  }
  .bug-fallback.visible { display: block; }
  .bug-shot-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .bug-shot-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 6px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border);
    font-family: inherit; font-size: 12px; cursor: pointer;
    transition: background 0.12s ease-out, border-color 0.12s ease-out;
  }
  .bug-shot-btn:hover { background: rgba(255,255,255,0.04); border-color: var(--accent); }
  .bug-shot-btn:disabled { opacity: 0.6; cursor: progress; }
  .bug-shot-btn .bug-shot-ico {
    display: inline-block; width: 12px; height: 12px;
    border: 1.5px solid currentColor; border-radius: 2px;
    position: relative;
  }
  .bug-shot-btn .bug-shot-ico::after {
    content: ""; position: absolute;
    top: 1.5px; left: 3px; right: 3px; height: 1.5px;
    background: currentColor; border-radius: 1px;
  }
  .bug-shot-help {
    font-size: 10.5px; color: var(--text-muted);
    margin-top: 6px; line-height: 1.45;
  }
  .bug-shot-preview {
    margin-top: 8px; display: none;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px; background: var(--bg);
  }
  .bug-shot-preview.visible { display: block; }
  .bug-shot-preview img {
    display: block; max-width: 100%; max-height: 200px;
    border-radius: 4px; margin: 0 auto 8px;
    background: rgba(0,0,0,0.2);
  }
  .bug-shot-preview-actions {
    display: flex; justify-content: flex-end; gap: 6px;
  }

  /* Backlog column — no longer sticky, scrolls with the rest */
  /* Reuse kanban column/card styles in split mode */
  .kanban-board-split .kanban-column,
  .kanban-board-split .kanban-column-header,
  .kanban-board-split .kanban-cards,
  .kanban-board-split .kanban-card,
  .kanban-board-split .kanban-card-title,
  .kanban-board-split .kanban-card-meta,
  .kanban-board-split .kanban-card-stage,
  .kanban-board-split .kanban-card-actions,
  .kanban-board-split .kanban-action-btn,
  .kanban-board-split .kanban-show-all {
    /* Inherited from main kanban styles above */
  }

  .split-resizer {
    width: 6px; cursor: col-resize; background: var(--border);
    flex-shrink: 0; transition: background 0.15s;
  }
  .split-resizer:hover { background: var(--accent); }
  .split-resizer.dragging { background: var(--accent); }

  .conv-panel {
    flex: none; width: 680px;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden; min-width: 40px;
    /* Container query scope so the toolbar can squeeze buttons / hide the
       session UUID when the user drags this pane narrow. */
    container-type: inline-size; container-name: convpane;
  }
  .conv-panel-toolbar {
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    background: var(--surface); display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap;
  }
  /* Squeeze toolbar contents as the conv-pane narrows. UUID is the first to
     go (least useful when space is tight, copyable from the session anyway);
     then buttons drop padding so more fit on one row before wrapping. */
  @container convpane (max-width: 520px) {
    .conv-panel-toolbar .cpt-session-id { display: none; }
  }
  @container convpane (max-width: 380px) {
    .conv-panel-toolbar { padding: 8px 10px; gap: 4px; }
    .conv-panel-toolbar button { padding: 4px 6px; font-size: 11px; }
    /* Hide the font-size A-/A+ controls — least useful when squeezed. */
    .conv-panel-toolbar #cpFontMinus,
    .conv-panel-toolbar #cpFontPlus { display: none; }
  }
  @container convpane (max-width: 260px) {
    /* At very narrow widths, drop the live "live" badge and launch menu
       label area. Keep only the essentials (Jump / Launch / Kill / Close). */
    .conv-panel-toolbar #cpLiveBadge,
    .conv-panel-toolbar .cp-launch-split .launch-choice-btn { display: none !important; }
    .conv-panel-toolbar { padding: 6px 8px; }
    .conv-panel-view { padding: 12px 12px; }
  }
  .conv-panel-toolbar button {
    padding: 5px 10px; font-size: 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    cursor: pointer; white-space: nowrap;
  }
  .conv-panel-toolbar button:hover { background: var(--surface-2); }
  .conv-panel-toolbar .cp-launch-split {
    display: inline-flex;
    position: relative;
  }
  .conv-panel-toolbar .cp-launch-split #cpLaunchBtn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .conv-panel-toolbar .cp-launch-split .launch-choice-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 5px 7px;
  }
  .conv-panel-toolbar .launch-choice-menu .launch-choice-item {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 7px 12px;
    background: transparent;
    color: var(--text);
  }
  .conv-panel-toolbar .launch-choice-menu .launch-choice-item:hover {
    background: var(--surface-2);
  }
  .conv-panel-toolbar .launch-choice-menu .launch-choice-item:disabled:hover {
    background: transparent;
  }
  .conv-panel-toolbar .cpt-session-id {
    font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    opacity: 0.6; cursor: pointer; user-select: all; margin-left: auto;
  }
  #convSessionId.copied,
  .conv-panel-toolbar .cpt-session-id.copied { color: var(--green); opacity: 1; }
  .conv-panel-view {
    flex: 1; overflow-y: auto; padding: 16px 20px;
  }
  .conv-panel-view .empty-state {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); font-size: 14px;
  }
  /* ── Conversation-pane input (Claude-Desktop-style) ──
     Pill container wraps the textarea + send button; focus-within gives a
     subtle ring. Textarea auto-resizes up to a cap (see cpInputAutoResize).
     The tty label sits below as a muted footer so the input itself is the
     visual anchor. */
  .conv-panel-input {
    display: none; padding: 10px 14px 12px; border-top: 1px solid var(--border);
    background: var(--surface); flex-direction: column; gap: 4px;
  }
  .conv-panel-input.visible { display: flex; }
  .cpi-wrap {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 10px 10px 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border); border-radius: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .cpi-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88,166,255,0.14);
  }
  .conv-panel-input textarea {
    flex: 1; min-height: 22px; max-height: 160px;
    border: none; outline: none; resize: none;
    background: transparent; color: var(--text);
    font-family: inherit; font-size: 14px; line-height: 1.5;
    padding: 0; overflow-y: auto;
  }
  .conv-panel-input textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
  .conv-panel-input .cpi-send {
    flex: none; width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--accent); color: #fff; cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
  }
  .conv-panel-input .cpi-send:hover:not(:disabled) { opacity: 0.9; }
  .conv-panel-input .cpi-send:active:not(:disabled) { transform: translateY(1px); }
  .conv-panel-input .cpi-send:disabled {
    background: transparent; color: var(--text-muted);
    border-color: var(--border); cursor: not-allowed; opacity: 0.5;
  }
  .conv-panel-input .cpi-send svg { display: block; }
  .conv-panel-input .cpi-hint {
    font-size: 10px; color: var(--text-muted); opacity: 0.6;
    padding: 0 6px; display: flex; gap: 10px; align-items: center;
  }
  .conv-panel-input .cpi-hint .tty-label {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  }
  .conv-panel-input .cpi-hint .cpi-enter-hint { margin-left: auto; }
  .conv-panel-input .cpi-hint kbd {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 3px; padding: 0 4px; font-size: 10px;
  }

  /* ── Task 7: Inline input on waiting cards ── */
  .kanban-inline-input {
    display: flex; gap: 4px; margin-top: 6px; align-items: center;
  }
  .kanban-inline-input input {
    flex: 1; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 11px; outline: none;
    min-width: 0;
  }
  .kanban-inline-input input:focus { border-color: var(--accent); }
  .kanban-inline-input button {
    padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); cursor: pointer; font-size: 11px;
    white-space: nowrap;
  }
  .kanban-inline-input button:hover { background: var(--surface-2); }

  /* ── Task 8: Approve/Deny buttons ── */
  .kanban-tool-info {
    font-size: 11px; color: var(--text-muted); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Live "what is Claude doing right now" badge on Working cards */
  .kanban-live-tool {
    font-size: 11px; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #FBCA04;
    background: rgba(251,202,4,0.10);
    border-left: 2px solid rgba(251,202,4,0.6);
    padding: 3px 6px; border-radius: 3px;
    animation: pulse 2s infinite;
  }
  .kanban-live-tool .kanban-live-name { font-weight: 600; }
  .kanban-live-tool .kanban-live-file { color: var(--text-muted); }
  .kanban-live-tool .kanban-live-file.is-command {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  }
  .kanban-live-tool .kanban-live-age { color: var(--text-muted); font-size: 10px; margin-left: 4px; }
  /* In-flight: tool is actively running right now (PreToolUse marker) */
  .kanban-live-tool.in-flight {
    color: #58a6ff;
    background: rgba(88,166,255,0.10);
    border-left-color: rgba(88,166,255,0.6);
    animation: pulse 1.2s infinite;
  }
  /* Live "what's running" strip in the conversation detail pane.
     Background layers the yellow/blue tint over an opaque `--bg` so
     conversation events scrolling underneath the sticky strip stay hidden
     instead of bleeding through (an 8% rgba alone is essentially see-through). */
  .conv-live-tool-strip {
    display: flex; align-items: flex-start; gap: 8px;
    flex-wrap: wrap;
    padding: 6px 12px; font-size: 12px;
    color: #FBCA04;
    background: linear-gradient(rgba(251,202,4,0.08), rgba(251,202,4,0.08)), var(--bg);
    border-bottom: 1px solid rgba(251,202,4,0.25);
    position: sticky; top: 0; z-index: 9;
  }
  .conv-live-tool-strip .cl-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #FBCA04; box-shadow: 0 0 6px rgba(251,202,4,0.7);
    animation: pulse 1.4s infinite;
    flex: 0 0 8px;
  }
  .conv-live-tool-strip .cl-tool { font-weight: 600; }
  .conv-live-tool-strip .cl-file { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .conv-live-tool-strip .cl-file.is-command {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    flex: 1 1 320px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .conv-live-tool-strip .cl-age { color: var(--text-muted); font-size: 11px; margin-left: auto; flex: 0 0 auto; }
  .conv-live-tool-strip.in-flight {
    color: #58a6ff;
    background: linear-gradient(rgba(88,166,255,0.08), rgba(88,166,255,0.08)), var(--bg);
    border-bottom-color: rgba(88,166,255,0.30);
  }
  .conv-live-tool-strip.in-flight .cl-pulse {
    background: #58a6ff; box-shadow: 0 0 6px rgba(88,166,255,0.7);
    animation: pulse 1.0s infinite;
  }
  .conv-live-tool-strip.is-question {
    color: #58a6ff;
    background: linear-gradient(rgba(88,166,255,0.10), rgba(88,166,255,0.10)), var(--bg);
    border-bottom-color: rgba(88,166,255,0.35);
  }
  .conv-live-tool-strip.is-question .cl-pulse {
    background: #58a6ff; box-shadow: 0 0 6px rgba(88,166,255,0.7);
  }
  /* Inline twin of the sticky strip — appended after the last rendered
     event so the user can see "agent is still working" without having
     to scroll up to the sticky strip. Shows whenever the strip shows;
     hidden the moment status flips back to idle. */
  .conv-live-tool-inline {
    display: flex; align-items: flex-start; gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px; margin: 12px 0;
    font-size: 12px; color: #FBCA04;
    background: linear-gradient(rgba(251,202,4,0.10), rgba(251,202,4,0.10)), var(--bg);
    border: 1px solid rgba(251,202,4,0.30);
    border-radius: 6px;
  }
  .conv-live-tool-inline.in-flight {
    color: #58a6ff;
    background: linear-gradient(rgba(88,166,255,0.10), rgba(88,166,255,0.10)), var(--bg);
    border-color: rgba(88,166,255,0.35);
  }
  .conv-live-tool-inline.is-question {
    color: #58a6ff;
    background: linear-gradient(rgba(88,166,255,0.12), rgba(88,166,255,0.12)), var(--bg);
    border-color: rgba(88,166,255,0.4);
  }
  .conv-live-tool-inline .cl-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #FBCA04; box-shadow: 0 0 6px rgba(251,202,4,0.7);
    animation: pulse 1.4s infinite;
    flex: 0 0 8px;
  }
  .conv-live-tool-inline.in-flight .cl-pulse {
    background: #58a6ff; box-shadow: 0 0 6px rgba(88,166,255,0.7);
    animation: pulse 1.0s infinite;
  }
  .conv-live-tool-inline .cl-tool { font-weight: 600; }
  .conv-live-tool-inline .cl-file { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .conv-live-tool-inline .cl-file.is-command {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    flex: 1 1 320px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .conv-live-tool-inline .cl-age { color: var(--text-muted); font-size: 11px; margin-left: auto; flex: 0 0 auto; }
  /* When the live-tool strip is present above the sticky header, push the
     header down so they don't both stick at y=0 and overlap.
     `top: 24px` deliberately *underlaps* the strip's bottom edge by a few
     pixels — the strip is z-index 9 and opaque, so its lower border paints
     over the header's top, while guaranteeing no transparent gap exposes
     the conversation events scrolling underneath. (Strip height varies
     with the user-agent's default line-height for 12px text, ~26-32px.) */
  .conversations-view:has(.conv-live-tool-strip) .conv-sticky-header {
    top: var(--live-strip-offset, 24px);
  }
  .kanban-approve-deny {
    display: flex; gap: 4px; margin-top: 4px;
  }
  .kanban-approve {
    padding: 3px 10px; border-radius: 4px; border: 1px solid rgba(63,185,80,0.4);
    background: rgba(63,185,80,0.1); color: var(--green); cursor: pointer;
    font-size: 11px; font-weight: 600;
  }
  .kanban-approve:hover { background: rgba(63,185,80,0.25); }
  .kanban-deny {
    padding: 3px 10px; border-radius: 4px; border: 1px solid rgba(248,81,73,0.4);
    background: rgba(248,81,73,0.1); color: var(--red); cursor: pointer;
    font-size: 11px; font-weight: 600;
  }
  .kanban-deny:hover { background: rgba(248,81,73,0.25); }

  /* ── Task 9: Review card actions ── */
  .kanban-review-info {
    font-size: 11px; color: var(--text-muted); margin-top: 4px;
  }
  .kanban-review-actions {
    display: flex; gap: 4px; margin-top: 4px;
  }
  .kanban-review-actions button {
    padding: 3px 10px; border-radius: 4px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); cursor: pointer;
    font-size: 11px;
  }
  .kanban-review-actions button:hover { background: var(--surface-2); }
  .kanban-sendback {
    color: var(--accent) !important; border-color: rgba(88,166,255,0.4) !important;
  }
  .kanban-archive-btn {
    color: var(--text-muted) !important;
  }
  .kanban-verify-btn {
    color: var(--green) !important; border-color: rgba(63,185,80,0.4) !important;
    background: rgba(63,185,80,0.1) !important; font-weight: 600 !important;
  }
  .kanban-verify-btn:hover { background: rgba(63,185,80,0.2) !important; }

  /* ── Mobile MVP (≤ 768px) ─────────────────────────────────────────
     Two overlay patterns:
       - Classic layout: tapping a card slides `.main` in from the right
         over the full-width sidebar. `.mobile-back-btn` slides it out.
       - Kanban-split: tapping a card slides `.conv-panel` up from the
         bottom over the full-width board. cpCloseBtn slides it down.
     Both toggled via body classes (`mobile-show-main`, `mobile-conv-open`).
  */
  .mobile-back-btn { display: none; }
  .mobile-reload-btn { display: none; }  /* legacy floating button — no longer used */

  /* Reload button anchored to the bottom-right of the kanban panel itself,
     so it's in reach whether the conv-panel is open, closed, or resized, and
     doesn't float over the conv pane. */
  .kanban-panel { position: relative; }
  .kanban-reload-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 50;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(13,17,23,0.85);
    border: 1px solid var(--border);
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-family: inherit;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .kanban-reload-btn:hover { opacity: 1; background: var(--surface); }
  .kanban-reload-btn:active { background: var(--accent); color: #fff; }

  /* ── Layout-agnostic top bar (repo picker + setup banner) ──────────────
   * position:fixed so it floats above BOTH list and kanban-split modes.
   * Body is display:flex (row) — embedding it in flow would make it
   * stretch full-height. The fixed positioning sidesteps that.
   * Side-nav (52px, also fixed) sits to the left, so we offset accordingly.
   * Body padding-top below makes room for the topbar. */
  /* The .ccc-topbar lives inside the main toolbar (#convToolbar) — it was
     originally a separate fixed-position row above the sidebar/main, but
     was merged into the toolbar to recover ~33px of vertical space.
     `margin-left: auto` on the wrapper (set inline in HTML) pushes it to
     the right side of the toolbar. */
  .ccc-topbar {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px;
    box-sizing: border-box;
  }
  body { box-sizing: border-box; }

  /* Folder chip rendered inside .conv-title-row for archive entries (and
   * later for any row that wants to surface its source folder). The hue is
   * set inline via --chip-hue from a stable hash of the folder label, so
   * the same folder always gets the same color. Translucent fill so it
   * reads on both light and dark themes. */
  .conv-folder-chip {
    --chip-hue: 0;
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    background: hsla(var(--chip-hue), 60%, 50%, 0.18);
    color: hsl(var(--chip-hue), 55%, 65%);
    border: 1px solid hsla(var(--chip-hue), 55%, 50%, 0.35);
    /* Fixed width so the column reads as a clean stack instead of a
       ragged-right edge. Long folder names ellipsize; the full name is
       still recoverable via the title-attribute tooltip the renderer
       emits on every chip. */
    width: 130px; max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    text-align: center;
  }
  /* Muted palette — flipped on by `body.chips-muted` (toggled from the
     sidebar header). All chromatic chips and pills collapse to a uniform
     neutral so the column reads as visual rhythm instead of a rainbow.
     This was previously auto-applied in standalone (PWA) mode with
     `!important`; moved here so it's a manual toggle that works in both
     browser and PWA contexts. */
  body.chips-muted .conv-folder-chip,
  body.chips-muted .conv-folder-group-chip,
  body.chips-muted .conv-item .conv-signal,
  body.chips-muted .conv-item .branch-badge,
  body.chips-muted .conv-item .branch-badge.is-worktree,
  body.chips-muted .conv-item .wt-tag,
  body.chips-muted .kanban-card .kanban-card-stage {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
  }
  .conv-folder-chip.is-orphan {
    opacity: 0.55;
    font-style: italic;
  }
  /* Folder group header + divider used by the In Progress section in
   * multi-repo mode: cards from the last 24h are grouped under a small
   * folder chip header so "what's hot in chuck right now" reads as a
   * cluster. Older cards drop below a divider and resume the flat chrono
   * list with gap separators. */
  .conv-folder-group-header {
    --chip-hue: 0;
    --conv-dot-col: 9px;
    --conv-time-col: 43px;
    display: grid;
    grid-template-columns: var(--conv-dot-col) var(--conv-time-col) auto auto minmax(0, 1fr);
    column-gap: 3px;
    align-items: center;
    padding: 2px 10px 1px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    border-left: 3px solid transparent;
    user-select: none;
    margin-top: 3px;
    border-top: 1px solid rgba(139,148,158,0.12);
  }
  .conv-folder-group-header:first-child { margin-top: 0; border-top: none; }
  .conv-folder-group-header:hover { background: rgba(139,148,158,0.08); color: var(--text); }
  /* Separator before a standalone (ungrouped) session that follows a group */
  .conv-folder-group + .conv-item,
  .conv-item + .conv-folder-group {
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(139,148,158,0.12);
  }
  .conv-folder-group-arrow {
    grid-column: 1;
    width: var(--conv-dot-col);
    text-align: center;
    font-size: 10px;
    opacity: 0.7;
  }
  .conv-folder-group-chip {
    grid-column: 2 / 4;
    justify-self: start;
    min-width: 0;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: hsla(var(--chip-hue), 60%, 50%, 0.18);
    color: hsl(var(--chip-hue), 55%, 65%);
    border: 1px solid hsla(var(--chip-hue), 55%, 50%, 0.35);
    white-space: nowrap;
  }
  .conv-folder-group-chip.is-orphan { opacity: 0.55; font-style: italic; }
  .conv-folder-group + .conv-folder-group {
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 2px;
  }
  .conv-folder-group-count {
    grid-column: 4;
    justify-self: start;
    color: var(--text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  #convList .conv-folder-group.collapsed > .conv-item,
  #convList .conv-folder-group.collapsed > .conv-gap-separator,
  #convList .conv-folder-group.collapsed > .conv-ghissues-more { display: none; }
  .conv-ghissues-more {
    display: flex;
    padding: 2px 10px 3px calc(10px + var(--conv-dot-col, 9px) + var(--conv-time-col, 43px) + 6px);
  }
  .conv-ghissues-more-btn {
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    padding: 2px 0;
  }
  .conv-ghissues-more-btn:hover { color: var(--cyan); text-decoration: underline; }
  .conv-folder-group-divider {
    padding: 12px 12px 4px;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }
  /* In Progress section's by-project / by-time toggle. Lives inside the
   * section header next to the count, only shown when there are folder
   * chips (i.e. multi-repo mode). Each opt is a span (not a button) to
   * avoid nested-button HTML; clicks are stopPropagation'd so they don't
   * collapse the section. */
  .conv-grouping-toggle {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
  }
  .conv-grouping-toggle .grouping-opt {
    padding: 1px 7px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
  }
  .conv-grouping-toggle .grouping-opt:hover:not(.is-active) {
    background: var(--surface-2);
    color: var(--text);
  }
  .conv-grouping-toggle .grouping-opt.is-active {
    background: var(--accent);
    color: #fff;
  }
  .conv-inprogress-tools,
  .conv-ghissues-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .conv-inprogress-tools .conv-grouping-toggle,
  .conv-ghissues-tools .conv-grouping-toggle { margin-left: 0; }
  .conv-ghissues-refresh {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
  }
  .conv-ghissues-refresh:hover,
  .conv-ghissues-refresh:focus-visible {
    background: var(--surface-2);
    color: var(--accent);
  }
  .conv-ghissues-refresh.is-spinning {
    color: var(--accent);
    animation: ccc-spin 0.8s linear infinite;
  }
  .archive-empty-state {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
  }

  /* ── Full-page loading overlay ──────────────────────────────────────────
   * Shown on initial load and during repo-switch. Covers everything so the
   * user sees a clear "we're working" signal instead of staring at an empty
   * dark page wondering if the app is broken. Fades out once the first
   * /api/sessions response renders. */
  .ccc-loading-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
    transition: opacity 0.25s ease-out;
    pointer-events: all;
  }
  .ccc-loading-overlay.fade-out { opacity: 0; pointer-events: none; }
  .ccc-loading-overlay.gone { display: none; }
  .ccc-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(88,166,255,0.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ccc-spin 0.8s linear infinite;
  }
  @keyframes ccc-spin { to { transform: rotate(360deg); } }
  .ccc-loading-label {
    color: var(--text-muted); font-size: 13px; letter-spacing: 0.3px;
    text-align: center; max-width: 440px; line-height: 1.4;
  }
  .ccc-loading-label strong { color: var(--text); font-weight: 600; }
  .ccc-loading-detail {
    font-size: 11px; color: var(--text-muted); opacity: 0.6;
    margin-top: 2px;
  }
  .ccc-loading-breakdown {
    margin-top: 12px;
    display: grid;
    gap: 5px;
    min-width: min(380px, calc(100vw - 48px));
    text-align: left;
  }
  .ccc-loading-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .ccc-loading-row-label {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ccc-loading-row-detail {
    min-width: 0;
    opacity: 0.72;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ccc-loading-count {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    opacity: 0.82;
  }
  .ccc-loading-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    background: var(--border);
  }
  .ccc-loading-row[data-state="running"] .ccc-loading-status { background: var(--accent); }
  .ccc-loading-row[data-state="done"] .ccc-loading-status { background: var(--green); }
  .ccc-loading-row[data-state="error"] .ccc-loading-status { background: var(--red); }
  .ccc-topbar-label {
    align-self: center;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600;
  }
  .conv-list-header #convFolderFilter {
    flex: 0 1 190px; padding: 6px 24px 6px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 12px; outline: none; min-width: 86px; max-width: 240px;
  }
  .conv-list-header #convFolderFilter.needs-repo-attention {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(248,81,73,0.18);
  }
  /* Generic action button in the layout-agnostic topbar (Titles, View …).
     Matches the size of the repo picker so the row reads as one strip. */
  .ccc-topbar .topbar-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 11px; cursor: pointer; white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
  }
  .ccc-topbar .topbar-btn:hover { background: var(--surface-2); }
  .ccc-topbar .topbar-btn.active { color: var(--accent); border-color: rgba(88,166,255,0.4); }
  /* Subagent-worktree alert dot. Triggered when superpowers / orchestration
     skills have spawned locked agent worktrees (worktrees_agent_count > 0
     from /api/repo/worktrees). Pulls attention to the topbar Worktrees
     button without each session row repeating the count. */
  .ccc-topbar .topbar-btn.has-agent-worktrees { position: relative; }
  .ccc-topbar .topbar-btn.has-agent-worktrees::after {
    content: ''; position: absolute; top: 2px; right: 2px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--orange, #d29922);
    box-shadow: 0 0 0 1.5px var(--bg);
  }
  /* Right-aligned action cluster on the sidebar's title row. Keep this
     focused on navigation state: all-repos, repo picker, and board view. */
  .sidebar-header-actions {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto; flex-wrap: wrap; row-gap: 4px;
    justify-content: flex-end;
  }
  .sidebar-header-actions .sh-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 11px; font-family: inherit;
    padding: 3px 8px; border-radius: 4px; cursor: pointer; line-height: 1.4;
  }
  .sidebar-header-actions .sh-btn:hover { background: var(--surface-2); color: var(--text); }
  .sidebar-header-actions .sh-btn.active { color: var(--accent); border-color: rgba(88,166,255,0.4); }
  #convList .conv-ghissues-tools + .conv-ghissues-count { margin-left: 0; }
  .ccc-setup-banner {
    flex: 1; display: none; align-items: center;
    padding: 0 10px; border-left: 1px solid var(--border);
    font-size: 11px; line-height: 1.3; min-width: 0;
    overflow: hidden;
  }
  .ccc-setup-banner.has-issues { display: flex; }
  .ccc-setup-banner.is-ok { color: var(--text-muted); opacity: 0.8; }
  .ccc-setup-banner-rows { display: flex; gap: 14px; flex-wrap: wrap; }
  .ccc-setup-row { display: flex; align-items: center; gap: 4px; }
  .ccc-setup-row .icon { font-weight: 700; }
  .ccc-setup-row.ok .icon { color: var(--green); }
  .ccc-setup-row.warn .icon { color: var(--orange); }
  .ccc-setup-row.error .icon { color: var(--red); }

  /* ── Attention panel (bottom-mounted, opens upward on demand) ───────────
   * Lives BELOW the kanban so the kanban gets the prime real estate by
   * default. Collapsed by default — the user expands it when they want
   * to triage. The drag handle is on TOP of the panel; dragging up grows
   * the panel (and shrinks the kanban above). */
  .attention-panel {
    flex: 0 0 auto;
    max-height: 25vh;
    padding: 6px 12px 8px;
    background: linear-gradient(rgba(248,81,73,0.04), rgba(248,81,73,0.04)), var(--surface);
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: relative;
    box-sizing: border-box;
  }
  .attention-panel[style*="height"] { max-height: none; }
  .attention-panel.collapsed { max-height: 32px; height: 32px !important; overflow: hidden; padding-top: 0; padding-bottom: 0; }
  .attention-panel.collapsed .attention-list { display: none; }
  .attention-panel.collapsed .attention-resize-handle { display: none; }
  /* Collapsed bar gets a subtle hover affordance so users know they can click it. */
  .attention-panel.collapsed .attention-header { cursor: pointer; }
  .attention-panel.collapsed:hover { background: linear-gradient(rgba(248,81,73,0.08), rgba(248,81,73,0.08)), var(--surface); }
  .attention-resize-handle {
    position: absolute; left: 0; right: 0; top: 0;
    height: 10px; cursor: ns-resize;
    display: flex; align-items: center; justify-content: center;
    z-index: 6; touch-action: none; user-select: none;
    background: transparent;
    transition: background 0.12s;
  }
  .attention-resize-handle::before {
    content: ''; display: block;
    width: 40px; height: 3px; border-radius: 2px;
    background: rgba(139,148,158,0.45);
    transition: background 0.12s, width 0.12s;
  }
  .attention-resize-handle:hover::before,
  .attention-resize-handle.is-dragging::before {
    background: var(--accent);
    width: 60px;
  }
  .attention-resize-handle:hover,
  .attention-resize-handle.is-dragging {
    background: rgba(88,166,255,0.08);
  }
  .attention-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.5px;
    padding: 4px 0; position: sticky; top: 0;
    background: var(--surface);
  }
  .att-count {
    background: rgba(248,81,73,0.18); color: var(--red);
    font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 700;
  }
  .att-count:empty { display: none; }
  .att-toggle {
    margin-left: auto; background: transparent; border: none; color: var(--text-muted);
    font-size: 12px; cursor: pointer; padding: 2px 6px;
  }
  .attention-panel.collapsed .att-toggle { transform: rotate(-90deg); }
  .attention-list {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
  }
  .attention-row {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
    padding: 8px 10px; border-radius: 6px;
    background: var(--bg); border: 1px solid var(--border);
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
    align-items: start;
  }
  .attention-row:hover { border-color: var(--accent); background: var(--surface-2); }
  .attention-row .att-kind {
    grid-column: 2; grid-row: 1; justify-self: end;
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
  }
  .attention-row .att-kind.k-pending_tool         { background: rgba(248,81,73,0.22); color: var(--red); }
  .attention-row .att-kind.k-sidecar_waiting      { background: rgba(210,153,34,0.22); color: var(--orange); }
  .attention-row .att-kind.k-pushed_open          { background: rgba(57,210,192,0.22); color: var(--cyan); }
  .attention-row .att-kind.k-uncommitted_edits    { background: rgba(210,153,34,0.22); color: var(--orange); }
  .attention-row .att-kind.k-committed_not_pushed { background: rgba(57,210,192,0.18); color: var(--cyan); }
  .attention-row .att-kind.k-needs_attention_label{ background: rgba(248,81,73,0.18); color: var(--red); }
  .attention-row .att-kind.k-open_backlog         { background: rgba(139,148,158,0.18); color: var(--text-muted); }
  .attention-row .att-col-debug {
    grid-column: 2; grid-row: 2; justify-self: end;
    font-size: 10px; color: var(--text-muted);
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    background: rgba(139,148,158,0.12); padding: 1px 6px; border-radius: 3px;
    white-space: nowrap;
  }
  .attention-row .att-name {
    grid-column: 1; grid-row: 1;
    font-size: 13px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .attention-row .att-sid {
    display: inline-block; margin-right: 6px;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 10px; font-weight: 500; color: var(--text-muted);
    background: rgba(139,148,158,0.12); padding: 1px 5px; border-radius: 3px;
    cursor: pointer; user-select: all; vertical-align: middle;
  }
  .attention-row .att-sid:hover { background: rgba(88,166,255,0.18); color: var(--accent); }
  .attention-row .att-sid.copied { background: rgba(63,185,80,0.22); color: var(--green); }
  .attention-row .att-where {
    grid-column: 1 / span 2; grid-row: 2;
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .attention-row .att-did,
  .attention-row .att-insight {
    grid-column: 1 / span 2;
    font-size: 12px; color: var(--text-muted); line-height: 1.35;
  }
  .attention-row .att-did    { grid-row: 3; }
  .attention-row .att-insight{ grid-row: 4; color: var(--purple); opacity: 0.85; }
  .attention-row .att-verify-btn {
    grid-column: 2; grid-row: 5; justify-self: end;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    background: rgba(63,185,80,0.12); color: var(--green);
    border: 1px solid rgba(63,185,80,0.4); border-radius: 4px;
    cursor: pointer; transition: background 0.12s, transform 0.08s;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .attention-row .att-verify-btn:hover { background: rgba(63,185,80,0.22); }
  .attention-row .att-verify-btn:active { transform: scale(0.96); }
  .attention-row .att-verify-btn:disabled { opacity: 0.5; cursor: wait; }
  .attention-row .att-next {
    grid-column: 1 / span 2; grid-row: 5;
    font-size: 12px; color: var(--accent); font-weight: 600; line-height: 1.35;
  }
  .attention-row .att-next::before { content: '→ '; opacity: 0.7; }
  .attention-empty { padding: 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
  @media (max-width: 768px) {
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* --- Classic (sidebar + main) --- */
    .sidebar {
      width: 100% !important; min-width: 0 !important; max-width: none !important;
    }
    .sidebar-resizer { display: none !important; }

    body:not(.kanban-split) .main {
      position: fixed; inset: 0; z-index: 800; background: var(--bg);
      transform: translateX(100%); transition: transform 0.2s ease-out;
    }
    body:not(.kanban-split).mobile-show-main .main {
      transform: translateX(0);
    }

    .mobile-back-btn {
      display: inline-flex !important;
      align-items: center; gap: 4px;
      background: transparent; border: none; color: var(--accent);
      font-size: 14px; padding: 8px 12px; cursor: pointer;
      font-family: inherit;
    }
    .mobile-back-btn:active { opacity: 0.6; }

    /* Hide non-essential controls in classic main toolbar */
    .toolbar .font-size-controls { display: none !important; }
    #convSessionId { display: none !important; }

    /* Controls that don't make sense on phones */
    .sh-btn-deploy { display: none !important; }

    /* --- Kanban-split --- */
    #kanbanLayout.active { flex-direction: column; }
    .kanban-panel {
      flex: 1 !important; width: 100% !important; min-width: 0 !important;
      border-right: none;
    }
    .split-resizer { display: none !important; }

    .conv-panel {
      position: fixed !important;
      top: 0; left: 0; right: 0; bottom: auto;
      /* Use the dynamic viewport so the panel resizes with iOS Safari's
         URL bar and on-screen keyboard — otherwise the input bar slides
         off-screen and the user can't see "Send to terminal…". */
      height: 100vh; height: 100dvh;
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: border-box;
      z-index: 900;
      width: 100% !important; min-width: 0 !important;
      background: var(--bg);
      transform: translateY(100%); transition: transform 0.2s ease-out;
      display: flex !important;
    }
    body.mobile-conv-open .conv-panel { transform: translateY(0); }

    /* Compact kanban-split toolbar: keep search + Run + close (back), drop the rest */
    .kanban-panel-toolbar {
      padding: 8px; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .kanban-panel-toolbar .kpt-search {
      width: 120px !important; min-width: 100px; flex-shrink: 1;
    }
    .kanban-panel-toolbar .kpt-new-session,
    .kanban-panel-toolbar #kptRunBtn,
    .kanban-panel-toolbar #kptRecentBtn,
    .kanban-panel-toolbar #kptToolbarEngineSelect,
    .kanban-panel-toolbar #kptToolbarEngineSelectCustom,
    .kanban-panel-toolbar #kptGitOnlyToggle,
    .kanban-panel-toolbar #kptDescToggle,
    .kanban-panel-toolbar .kpt-label,
    .kanban-panel-toolbar #kptListViewBtn,
    .kanban-panel-toolbar #kptOpenConvBtn,
    .kanban-panel-toolbar #kptReloadPageBtn,
    .kanban-panel-toolbar #kptDeployStatus { display: none !important; }

    /* Floating reload visible on mobile only */
    .mobile-reload-btn {
      display: inline-flex !important;
      position: fixed;
      bottom: calc(env(safe-area-inset-bottom) + 12px);
      right: 12px;
      z-index: 1500;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(13,17,23,0.85);
      border: 1px solid var(--border);
      color: var(--text);
      align-items: center; justify-content: center;
      font-size: 20px; line-height: 1; cursor: pointer;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      font-family: inherit;
      touch-action: manipulation;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .mobile-reload-btn:active { background: var(--accent); color: #fff; }

    /* Narrower board gutter + magnetic center-snap on horizontal swipe */
    .kanban-board-split {
      padding: 8px 4px !important;
      gap: 8px !important;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 50%;
    }
    .kanban-board-split .kanban-column {
      min-width: 300px !important; width: 300px !important;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

    /* Show more of the outcome on phones — summaries often need 5–7 lines */
    .kanban-card .kanban-card-desc {
      -webkit-line-clamp: 8 !important;
    }
    /* The "Hide desc" button is a desktop power-user toggle. On mobile the
       summary IS the card — always show it regardless of that setting. */
    body.hide-descs .kanban-card .kanban-card-desc {
      display: -webkit-box !important;
    }
    /* Tighter card padding on mobile so the description gets more real estate */
    .kanban-card { padding: 8px 10px !important; }

    /* Conv-panel toolbar controls */
    #cpFontMinus, #cpFontPlus { display: none !important; }
    .conv-panel-toolbar .cpt-session-id { display: none !important; }
    /* Jump/Launch only affect the host's Terminal.app — useless when the UI is
       viewed from a remote/mobile context. Hide to avoid the "clicked, nothing
       happened" UX. */
    #cpJumpBtn, #cpLaunchSplit,
    #jumpBtnConv, #launchWrapConv,
    .toolbar .resume-btn { display: none !important; }

    /* Kill iOS double-tap-to-click on cards (hover states triggered first tap) */
    .kanban-card {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(88,166,255,0.15);
    }
    /* Card action buttons: always visible on touch, pinned bottom-right so they
       sit next to the stage chip instead of covering the title. */
    .kanban-card .kanban-card-actions {
      opacity: 1 !important;
      top: auto !important;
      left: auto !important;
      bottom: 4px !important;
      right: 4px !important;
    }

    /* The unified sticky panel handles its own scroll per column —
       no per-message cap needed on mobile. */

    /* Floating reload button — bottom-right to avoid overlap with conv-panel X.
       (Safe-area padding keeps it above the home indicator.) */
    .mobile-reload-btn {
      display: inline-flex !important;
      position: fixed;
      bottom: calc(env(safe-area-inset-bottom) + 12px);
      right: 12px;
      z-index: 1500;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(13,17,23,0.85);
      border: 1px solid var(--border);
      color: var(--text);
      align-items: center; justify-content: center;
      font-size: 20px; line-height: 1; cursor: pointer;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      font-family: inherit;
      touch-action: manipulation;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .mobile-reload-btn:active { background: var(--accent); color: #fff; }
  }

  /* Prominent "+ New session" button — sits in the slot the Vercel
     deploy panel used to occupy (just below the sidebar header). The
     deploy indicator now lives in the global topbar, freeing this slot
     for the primary CTA. */
  .new-session-panel {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .new-session-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 12px; border-radius: 6px;
    background: rgba(88, 166, 255, 0.10);
    border: 1px solid rgba(88, 166, 255, 0.35);
    color: var(--accent);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; line-height: 1.2;
    transition: background 0.12s, border-color 0.12s;
  }
  .new-session-btn:hover { background: rgba(88, 166, 255, 0.18); border-color: rgba(88, 166, 255, 0.55); }
  .new-session-btn .plus { font-weight: 700; }

  /* Sidebar footer strip — appearance + settings (Claude-Desktop pattern) */
  .sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
  }
  .sidebar-footer-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); cursor: pointer; font-family: inherit;
    transition: background 0.12s, color 0.12s;
  }
  .sidebar-footer-btn:hover { background: var(--surface-2); color: var(--text); }
  .sidebar-footer-btn svg { width: 16px; height: 16px; display: block; }
  .sidebar-footer-spacer { flex: 1; }
  .conv-bg-palette {
    display: grid;
    grid-template-columns: repeat(12, 14px);
    grid-auto-rows: 14px;
    gap: 3px;
    align-items: center;
  }
  .conv-bg-palette:empty { display: none; }
  .conv-bg-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-muted) 50%, transparent);
    background: var(--swatch-color);
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  .conv-bg-swatch:hover {
    transform: scale(1.12);
    border-color: var(--text);
  }
  .conv-bg-swatch.active {
    border-color: var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.18),
      0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  }

  /* Generic dropdown popover (used by appearance + settings menus) */
  .desktop-popover {
    position: absolute; z-index: 200;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    display: none; flex-direction: column; gap: 2px;
  }
  .desktop-popover.open { display: flex; }
  .desktop-popover .pop-section-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    padding: 6px 8px 2px;
  }
  .desktop-popover .pop-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 4px;
    background: transparent; border: none; color: var(--text);
    font-size: 13px; cursor: pointer; text-align: left; font-family: inherit;
    width: 100%;
    text-decoration: none;
  }
  .desktop-popover .pop-item:hover { background: var(--surface-2); }
  .desktop-popover .pop-item.active { color: var(--accent); background: rgba(88,166,255,0.10); }
  .desktop-popover .pop-item .pop-check {
    width: 12px; color: var(--accent); font-weight: 700;
  }
  .desktop-popover .pop-item .pop-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
  }
  .desktop-popover .pop-divider {
    height: 1px; background: var(--border); margin: 4px 2px;
  }
  .desktop-popover .pop-submenu { position: relative; }
  .desktop-popover .pop-submenu summary { list-style: none; }
  .desktop-popover .pop-submenu summary::-webkit-details-marker { display: none; }
  .desktop-popover .pop-submenu .pop-chevron {
    margin-left: auto;
    color: var(--text-muted);
  }
  .desktop-popover .pop-submenu[open] .pop-chevron { transform: rotate(90deg); }
  .desktop-popover .pop-submenu-panel {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 22px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
  }
  .desktop-popover .pop-submenu[open] .pop-submenu-panel { display: flex; }

  /* ── Cmd+K search modal (shares nsm-* visual language) ──
     A scrollable list of sessions filtered live by display_name /
     first_message. ↑/↓ to move, Enter to select, Esc to close. */
  .cmdk-overlay { position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 12vh; }
  .cmdk-overlay.open { display: flex; }
  .cmdk-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px); }
  .cmdk-dialog {
    position: relative; width: min(620px, 92vw);
    max-height: 70vh; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .cmdk-input-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
  }
  .cmdk-input-wrap .cmdk-search-icon {
    width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0;
  }
  #cmdkInput {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-size: 15px; font-family: inherit;
  }
  #cmdkInput::placeholder { color: var(--text-muted); }
  .cmdk-hint {
    font-size: 10px; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 1px 5px; font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    flex-shrink: 0;
  }
  #cmdkList {
    overflow-y: auto; padding: 6px; flex: 1; min-height: 60px;
  }
  .cmdk-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 6px;
    cursor: pointer; user-select: none;
    border: 1px solid transparent;
  }
  .cmdk-item:hover { background: var(--surface-2); }
  .cmdk-item.selected {
    background: var(--surface-2);
    border-color: var(--accent);
  }
  .cmdk-item .cmdk-title {
    font-size: 13px; color: var(--text); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cmdk-item .cmdk-meta {
    font-size: 11px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cmdk-empty {
    padding: 24px; text-align: center; color: var(--text-muted);
    font-size: 13px;
  }
  .cmdk-footer {
    display: flex; gap: 12px; align-items: center;
    padding: 6px 14px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-muted);
  }
  .cmdk-footer .cmdk-hint { background: var(--bg); }

  /* Unified conversation-pane toggle button (used in both kanban-panel and
     conv-panel toolbars). Same glyph in both places so the user always
     recognises it as "show/hide the chat pane". */
  .panel-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    padding: 0 !important;
    color: var(--text-muted);
  }
  .panel-toggle-btn svg { width: 16px; height: 16px; display: block; }
  .panel-toggle-btn:hover { color: var(--text); }

  /* ── Usage stats overlay ─────────────────────────────────────
     Triggered from the "Stats" button in the topbar. Reuses the
     .upd-overlay backdrop pattern but with a wider dialog so the
     8-card grid + 7×24 heatmap fit comfortably. */
  .stats-dialog { position: relative; width: min(900px, 94vw);
    max-height: 90vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
  .stats-header { display: flex; align-items: center; gap: 6px; }
  .stats-tab {
    padding: 6px 14px; border-radius: 8px; font-size: 13px;
    border: 1px solid transparent; background: transparent;
    color: var(--text-muted); cursor: pointer; font-family: inherit;
  }
  .stats-tab:hover { color: var(--text); }
  .stats-tab.active {
    background: var(--surface-2); color: var(--text);
    border-color: var(--border);
  }
  .stats-range { margin-left: auto; display: flex; gap: 4px; }
  .stats-range button {
    padding: 4px 10px; border-radius: 6px; font-size: 12px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); cursor: pointer; font-family: inherit;
  }
  .stats-range button:hover { color: var(--text); }
  .stats-range button.active {
    background: var(--surface-2); border-color: var(--border);
    color: var(--text);
  }
  .stats-close {
    margin-left: 6px; width: 28px; height: 28px;
    border-radius: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0;
  }
  .stats-close:hover { background: var(--surface-2); color: var(--text); }

  .stats-cards {
    display: grid; gap: 10px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 720px) {
    .stats-cards { grid-template-columns: repeat(2, 1fr); }
  }
  .stats-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 64px;
  }
  .stats-card .label { font-size: 11px; color: var(--text-muted); }
  .stats-card .value { font-size: 22px; font-weight: 700; color: var(--text); }
  .stats-card .value.muted { font-weight: 600; font-size: 16px; }

  .stats-heatmap-wrap { padding: 4px 0; }
  .stats-heatmap {
    display: grid; gap: 3px;
    grid-template-columns: repeat(24, 1fr);
    grid-auto-rows: 1fr;
  }
  .stats-heatmap-cell {
    aspect-ratio: 1; border-radius: 3px;
    background: var(--surface-2);
  }
  .stats-heatmap-cell.lvl-0 { background: var(--surface-2); opacity: 0.55; }
  .stats-heatmap-cell.lvl-1 { background: rgba(96, 137, 230, 0.45); }
  .stats-heatmap-cell.lvl-2 { background: rgba(96, 137, 230, 0.65); }
  .stats-heatmap-cell.lvl-3 { background: rgba(96, 137, 230, 0.85); }
  .stats-heatmap-cell.lvl-4 { background: rgba(96, 137, 230, 1.0); }

  .stats-comparison {
    font-size: 13px; color: var(--text-muted);
    padding-top: 4px;
  }
  .stats-loading { font-size: 13px; color: var(--text-muted); }
  .stats-models-list {
    display: flex; flex-direction: column; gap: 8px;
    padding: 4px 2px;
  }
  .stats-models-row {
    display: grid; grid-template-columns: 140px 1fr 80px;
    align-items: center; gap: 12px; font-size: 13px;
  }
  .stats-models-row .name { color: var(--text); font-weight: 600; }
  .stats-models-row .bar {
    height: 8px; border-radius: 4px; background: var(--surface-2);
    overflow: hidden; position: relative;
  }
  .stats-models-row .bar-fill {
    position: absolute; inset: 0 auto 0 0;
    background: rgba(96, 137, 230, 0.85);
  }
  .stats-models-row .pct { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

  /* ======================================================================
     History search — right-side drawer + click-through detail pane.
     Read-only window onto ~/.claude-index/index.db. Class prefix: .hsd-
     ====================================================================== */
  .hsd-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.42);
    display: flex; justify-content: flex-end;
    opacity: 0; pointer-events: none;
    transition: opacity 160ms ease;
  }
  .hsd-overlay[data-open="1"] { opacity: 1; pointer-events: auto; }
  .hsd-overlay[hidden] { display: none !important; }

  .hsd-drawer {
    width: min(820px, 96vw); height: 100vh;
    background: var(--bg, #0f1115);
    color: var(--text, #e6e6e6);
    border-left: 1px solid var(--border, #2a2d33);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  .hsd-overlay[data-open="1"] .hsd-drawer { transform: translateX(0); }

  .hsd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #2a2d33);
  }
  .hsd-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
  .hsd-close {
    background: transparent; color: var(--text-muted, #9aa0aa);
    border: none; font-size: 22px; cursor: pointer; line-height: 1;
    padding: 4px 8px;
  }
  .hsd-close:hover { color: var(--text, #fff); }

  .hsd-controls { padding: 12px 18px 8px; }
  .hsd-input {
    width: 100%; padding: 9px 12px; box-sizing: border-box;
    background: var(--surface, #1a1d23); color: var(--text, #e6e6e6);
    border: 1px solid var(--border, #2a2d33); border-radius: 6px;
    font-size: 14px;
  }
  .hsd-input:focus { outline: none; border-color: var(--accent, #4ea1ff); }
  .hsd-filters {
    display: flex; align-items: center; gap: 12px; margin-top: 8px;
    font-size: 12px; color: var(--text-muted, #9aa0aa);
  }
  .hsd-since {
    background: var(--surface, #1a1d23); color: var(--text, #e6e6e6);
    border: 1px solid var(--border, #2a2d33); border-radius: 4px;
    padding: 4px 6px; font-size: 12px;
  }
  .hsd-repo-only { display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .hsd-status { min-height: 16px; font-size: 11px; color: var(--text-muted, #9aa0aa); margin-top: 4px; }
  .hsd-status.is-error { color: #e07a7a; }

  .hsd-body {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(280px, 42%) 1fr;
    gap: 1px; background: var(--border, #2a2d33);
  }
  .hsd-results {
    margin: 0; padding: 0; list-style: none;
    background: var(--bg, #0f1115);
    overflow-y: auto;
  }
  .hsd-result {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #2a2d33);
    cursor: pointer;
    font-size: 12px;
  }
  .hsd-result:hover { background: var(--surface, #1a1d23); }
  .hsd-result.is-selected { background: var(--surface-2, #20232a); border-left: 2px solid var(--accent, #4ea1ff); padding-left: 12px; }
  .hsd-result-meta {
    display: flex; gap: 10px; font-size: 11px; color: var(--text-muted, #9aa0aa);
    margin-bottom: 4px; align-items: baseline;
  }
  .hsd-result-meta .role { font-weight: 600; color: var(--text, #e6e6e6); }
  .hsd-result-meta .ts { font-variant-numeric: tabular-nums; }
  .hsd-result-cwd {
    font-size: 11px; color: var(--text-muted, #9aa0aa);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    direction: rtl; text-align: left;
  }
  .hsd-result-snippet {
    font-size: 12px; line-height: 1.45; margin-top: 4px;
    color: var(--text, #e6e6e6);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hsd-result-snippet mark {
    background: rgba(255, 209, 102, 0.32); color: inherit;
    padding: 0 2px; border-radius: 2px;
  }

  .hsd-detail {
    background: var(--bg, #0f1115);
    overflow-y: auto;
    padding: 14px 18px;
    font-size: 13px; line-height: 1.5;
  }
  .hsd-detail-empty {
    color: var(--text-muted, #9aa0aa); font-style: italic; margin-top: 12px;
  }
  .hsd-detail-meta {
    display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px;
    font-size: 11px; color: var(--text-muted, #9aa0aa);
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--border, #2a2d33);
  }
  .hsd-detail-meta dt { color: var(--text-muted, #9aa0aa); }
  .hsd-detail-meta dd { margin: 0; color: var(--text, #e6e6e6); word-break: break-all; }
  .hsd-detail-content {
    white-space: pre-wrap; word-break: break-word;
    font-family: inherit;
  }

  .hsd-empty-state {
    padding: 30px 18px; text-align: center;
    color: var(--text-muted, #9aa0aa); font-size: 13px;
  }

  @media (max-width: 720px) {
    .hsd-body { grid-template-columns: 1fr; grid-template-rows: 50% 50%; }
  }

/* ── Multi-session coordination ─────────────────────────────────────── */
.conv-item.list-selected { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.conv-item.active.list-selected { border-left-color: var(--purple); }
.coord-toolbar { display:none; position:sticky; bottom:0; z-index:20; background:var(--surface); border-top:1px solid var(--border); padding:8px 12px; gap:8px; align-items:center; font-size:12px; color:var(--text-muted); flex-shrink:0; }
.coord-toolbar.visible { display:flex; }
.coord-toolbar .coord-count { flex:1; }
.coord-toolbar .coord-btn { padding:4px 10px; font-size:12px; background:var(--accent); color:#fff; border:none; border-radius:4px; cursor:pointer; }
.coord-toolbar .coord-clear-btn { padding:4px 8px; font-size:13px; background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:4px; cursor:pointer; line-height:1; }
.coord-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; align-items:center; justify-content:center; }
.coord-modal-backdrop.visible { display:flex; }
.coord-modal { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; width:420px; max-width:calc(100vw - 32px); box-shadow:0 8px 32px rgba(0,0,0,0.5); display:flex; flex-direction:column; gap:14px; }
.coord-modal h3 { margin:0; font-size:14px; font-weight:600; color:var(--text); }
.coord-modal label { font-size:12px; color:var(--text-muted); display:block; margin-bottom:4px; }
.coord-modal input[type="text"] { width:100%; box-sizing:border-box; padding:6px 8px; background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:13px; }
.coord-modal .mode-row { display:flex; gap:16px; font-size:13px; }
.coord-modal .mode-hint { font-size:11px; color:var(--text-muted); margin-top:2px; }
.coord-modal .participants-list { display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
.coord-modal .participant-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.coord-modal .participant-row .p-name { font-weight:500; color:var(--text); }
.coord-modal .participant-row .p-cwd { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.coord-modal .modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.coord-modal .modal-cancel { padding:6px 14px; background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:4px; cursor:pointer; font-size:13px; }
.coord-modal .modal-start { padding:6px 14px; background:var(--accent); color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-weight:500; }
.coord-modal .modal-error { font-size:12px; color:var(--red); display:none; }
.coord-modal .modal-error.visible { display:block; }
.gc-reader { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.gc-reader-header { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.gc-reader-header .gc-topic { font-weight:600; font-size:13px; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-reader-header .gc-mode-badge { font-size:11px; padding:2px 6px; border-radius:10px; background:var(--surface-2); color:var(--text-muted); flex-shrink:0; }
.gc-reader-header .gc-close { background:var(--surface-2); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:12px; font-weight:500; padding:3px 10px; border-radius:4px; flex-shrink:0; }
.gc-reader-header .gc-close:hover { background:var(--border); }
.gc-reader-body { flex:1; overflow-y:auto; padding:14px; font-size:13px; line-height:1.55; color:var(--text); }
.gc-reader-body .gc-poll-error { color:var(--red); font-size:12px; padding:6px 0; }
/* Group-chat reader input — matches the convo `.conv-input-bar` shape:
   single rounded card, soft focus-within ring, no inner-input border,
   round arrow send button. Textarea autosizes from 1 row up to ~10. */
.gc-reader-input-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 6px 14px 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg);
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gc-reader-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110,140,175,0.16);
}
.gc-reader-input-row textarea,
.gc-reader-input-row input {
  flex: 1;
  padding: 6px 4px;
  border: none; outline: none;
  background: transparent;
  color: #f0f6fc;
  font-size: 14px; font-weight: 500; font-family: inherit;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  min-height: 24px;
  max-height: 240px;
}
:root[data-theme="light"] .gc-reader-input-row textarea,
:root[data-theme="light"] .gc-reader-input-row input { color: #1f2328; }
.gc-reader-input-row textarea::placeholder,
.gc-reader-input-row input::placeholder {
  color: var(--text-muted); opacity: 0.6; font-weight: 400;
}
.gc-reader-input-row .gc-send-btn,
.gc-reader-input-row button {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff; cursor: pointer;
  line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 0.15s, transform 0.05s;
  font-size: 0;
}
.gc-reader-input-row button:hover { opacity: 0.9; }
.gc-reader-input-row button:active { transform: translateY(1px); }
.gc-reader-input-row button svg { display: block; }

/* In Group Chat section — sessions currently in an active coordination */
#convList .conv-ingroupchat-section { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
#convList .conv-ingroupchat-header {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; color: var(--text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
  cursor: pointer; user-select: none;
}
#convList .conv-ingroupchat-header:hover { background: rgba(139,148,158,0.08); }
#convList .conv-ingroupchat-arrow {
  display: inline-block; font-size: 9px; opacity: 0.7; flex-shrink: 0;
  width: 10px; text-align: center;
}
/* Collapsed state hides the list while keeping the header (and its count
   badge) visible so the user can re-expand from the same affordance.
   Drop the bottom padding too so the header reads as a single bar. */
#convList .conv-ingroupchat-section.collapsed .conv-ingroupchat-list {
  display: none;
}
#convList .conv-ingroupchat-section.collapsed { padding-bottom: 0; }
#convList .conv-ingroupchat-icon { font-size: 13px; }
#convList .conv-ingroupchat-label { color: var(--accent); }
#convList .conv-ingroupchat-topic { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
#convList .conv-ingroupchat-count {
  margin-left: auto; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 8px; font-size: 11px;
  color: var(--text-muted); font-weight: 600; flex-shrink: 0;
}

/* In Group Chat rows — one row per chat (active or recently closed). */
#convList .conv-ingroupchat-list { display: flex; flex-direction: column; }
#convList .conv-ingroupchat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; cursor: pointer; font-size: 12px;
  color: var(--text);
}
#convList .conv-ingroupchat-row:hover { background: var(--row-hover, rgba(255,255,255,0.04)); }
#convList .conv-ingroupchat-row-icon { font-size: 12px; flex-shrink: 0; opacity: 0.85; }
#convList .conv-ingroupchat-row-topic {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#convList .conv-ingroupchat-row-closed {
  opacity: 0.55;
  filter: saturate(0.7);
}
#convList .conv-ingroupchat-row-closed .conv-ingroupchat-row-topic { color: var(--text-muted); }
#convList .conv-ingroupchat-status-pill {
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-muted); text-transform: lowercase;
  letter-spacing: 0.3px; flex-shrink: 0;
}
#convList .conv-ingroupchat-partcount {
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
  background: transparent; color: var(--text-muted);
  flex-shrink: 0;
}
#convList .conv-ingroupchat-archive-btn,
#convList .conv-ingroupchat-rename-btn,
#convList .conv-ingroupchat-clear-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 12px; padding: 2px 4px; opacity: 0;
  color: var(--text-muted); flex-shrink: 0;
  transition: opacity 0.1s ease-in;
}
#convList .conv-ingroupchat-row:hover .conv-ingroupchat-archive-btn,
#convList .conv-ingroupchat-row:hover .conv-ingroupchat-rename-btn,
#convList .conv-ingroupchat-row:hover .conv-ingroupchat-clear-btn { opacity: 0.85; }
#convList .conv-ingroupchat-archive-btn:hover,
#convList .conv-ingroupchat-rename-btn:hover,
#convList .conv-ingroupchat-clear-btn:hover { opacity: 1; }

/* "+" affordance on the section header — create an empty chat. */
#convList .conv-ingroupchat-new-btn {
  margin-left: auto; background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  width: 18px; height: 18px; line-height: 16px; padding: 0;
  border-radius: 4px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
#convList .conv-ingroupchat-new-btn:hover {
  background: rgba(88, 166, 255, 0.12); color: var(--accent); border-color: rgba(88, 166, 255, 0.4);
}

/* Drop-target highlight while dragging a session row over a chat row. */
#convList .conv-ingroupchat-row.gc-drop-target {
  outline: 2px dashed var(--accent); outline-offset: -3px;
  background: rgba(88, 166, 255, 0.08);
}

/* Empty section: collapse the bottom padding so the lone header reads
   as a single bar rather than a half-empty container. */
#convList .conv-ingroupchat-section.is-empty { padding-bottom: 0; }

/* Indented participant list under each chat row. */
#convList .conv-ingroupchat-participants {
  display: flex; flex-direction: column;
  padding: 2px 14px 6px 28px;  /* hanging indent under the 💬 icon */
  gap: 1px;
}
#convList .conv-ingroupchat-participant {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px; cursor: pointer;
  font-size: 11px; color: var(--text-muted);
  border-radius: 3px;
  transition: background 0.1s ease, color 0.1s ease;
}
#convList .conv-ingroupchat-participant:hover {
  background: rgba(88, 166, 255, 0.08); color: var(--text);
}
#convList .conv-ingroupchat-participant-bullet {
  opacity: 0.5; flex-shrink: 0;
}
#convList .conv-ingroupchat-participant-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
#convList .conv-ingroupchat-participant-hash {
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 10px; opacity: 0.55;
  flex-shrink: 0; padding: 0 4px;
}
#convList .conv-ingroupchat-participant-when {
  font-size: 10px; opacity: 0.6; flex-shrink: 0;
  white-space: nowrap;
}
#convList .conv-ingroupchat-waiting-chip {
  font-size: 10px; padding: 0 5px; border-radius: 8px;
  background: rgba(88, 166, 255, 0.14);
  color: var(--accent);
  border: 1px solid rgba(88, 166, 255, 0.35);
  flex-shrink: 0; line-height: 14px;
}
#convList .conv-ingroupchat-row-when {
  font-size: 10px; opacity: 0.55; flex-shrink: 0;
  white-space: nowrap;
}
#convList .conv-ingroupchat-row-waiting {
  padding: 0 14px 4px 28px;
  font-size: 10px; opacity: 0.7;
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#convList .conv-ingroupchat-participant-remove {
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; line-height: 1;
  color: var(--text-muted); flex-shrink: 0;
  padding: 0 4px; opacity: 0;
  transition: opacity 0.1s ease, color 0.1s ease;
}
#convList .conv-ingroupchat-participant:hover .conv-ingroupchat-participant-remove {
  opacity: 0.65;
}
#convList .conv-ingroupchat-participant-remove:hover {
  opacity: 1; color: var(--red);
}
#convList .conv-ingroupchat-chat-closed .conv-ingroupchat-participant {
  opacity: 0.55;
}

/* "IN GROUP CHAT" badge on participating rows in the main list. */
.conv-signal.in-group-chat {
  background: rgba(88, 166, 255, 0.14);
  color: var(--accent);
  border: 1px solid rgba(88, 166, 255, 0.35);
  font-weight: 600; letter-spacing: 0.3px;
}

/* Archived group chat rows — interleaved with regular archived sessions. */
#convList .conv-item-archived-gc {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; cursor: pointer; font-size: 12px;
  color: var(--text-muted);
}
#convList .conv-item-archived-gc:hover { background: var(--row-hover, rgba(255,255,255,0.04)); }
#convList .archive-row-gc-icon { font-size: 12px; flex-shrink: 0; opacity: 0.85; }
#convList .archive-row-gc-topic {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#convList .archive-row-gc-partcount {
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
  background: transparent; color: var(--text-muted);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Standalone-mode polish (PWA "Add to Dock" / "Install app")
   ---------------------------------------------------------------------------
   Only applies when CCC is launched in its own window via the PWA install
   path. Goal: close the visual gap with native dashboards (Omnara et al.)
   without changing the in-browser UX one pixel. Three deliberate moves:

     1) Color restraint — demote chromatic workspace badges to a neutral
        surface tone in standalone mode. The accent (purple/coral active
        state) remains so the eye still has one place to land.
     2) Type rhythm — slightly tighter tabular-nums for timestamps, a touch
        more line-height in conversation titles for breathing room.
     (Row-padding bump was tried and reverted — the dense layout is
     deliberate and any vertical breathing on conv rows felt too spacious.)

   Everything is additive, scoped under @media (display-mode: standalone).
   Browser users see the unchanged dense-but-information-rich layout they
   already rely on. PWA users get the calmer, focused feel.
   -------------------------------------------------------------------------- */

@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
  /* Chip muting moved out of standalone-only and gated on the explicit
     `body.chips-muted` toggle (sidebar header). Standalone mode no longer
     auto-mutes — the user controls it. The chip toggle's own rules at
     ~line 3443+ handle `.conv-folder-chip`. The other pills below stay
     scoped to standalone-only so the in-row status pills, branch pills,
     etc. still pick up the calmer treatment when the PWA window is open
     — except when chips-muted is OFF, where they keep their colors.
     Bottom line: opt-in via the toggle, no `!important`. */

  /* Sidebar header — let it breathe a touch more so the app title doesn't
     sit right against the live-dot. */
  .sidebar-header {
    padding-top: 18px;
    padding-bottom: 18px;
    letter-spacing: 0.01em;
  }

  /* Subtle: thinner border between sidebar and main pane. Native apps
     usually use a 1px hairline at lower contrast. */
  .sidebar {
    border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }

  /* Hide the optional Morning plugin's left rail (`.ccc-side-nav`, 52px)
     in standalone mode. We also guard this in index.html by skipping the
     script load entirely in standalone, but keep the CSS as belt-and-
     suspenders. Reset the layout offsets the rail installs so the main
     pane reclaims the full width. The core repo rail was deleted entirely;
     no rule is needed for it. */
  .ccc-side-nav { display: none !important; }
  body,
  body.has-side-nav { padding-left: 0 !important; }
  body.has-side-nav #termPanel { left: 0 !important; }

  /* Resize handle — visually killed entirely. The slight bg step between
     the sidebar (`--surface` #161b22) and the main pane (`--bg` #0d1117)
     is the divider you perceive; no separate gray bar is needed. We keep
     the element at width:1px (not 0) so it still occupies a layout slot
     in the flex row, and the existing ::before in the base rule extends
     the drag hit area by 4px on each side — so dragging continues to
     work invisibly across a 9px target zone. Hover affordance: the bar
     fades in subtly so the user can find the grab point. */
  .sidebar-resizer {
    width: 1px;
    background: transparent;
  }
  .sidebar-resizer:hover,
  .sidebar-resizer.dragging {
    background: color-mix(in srgb, var(--accent) 50%, transparent);
  }

  /* Hide scrollbars throughout — keep the scrolling behaviour, just make
     the chrome invisible. Trackpad / wheel / keyboard scrolling all still
     work; only the visible track + thumb go away. WebKit (Safari, Chrome)
     uses ::-webkit-scrollbar; Firefox uses scrollbar-width.

     Targets the four scroll containers we have:
       #convList                 → sidebar conversation list
       .conversations-view       → main pane transcript
       .log-list, .tool-filters  → secondary sidebar panes (stats, filters)
     plus a generic *-overflow:auto safety net so any newly-added scroller
     gets the same treatment without us hunting for it. */
  #convList,
  .conversations-view,
  .log-list,
  .tool-filters,
  .sidebar [style*="overflow"],
  .main [style*="overflow"] {
    scrollbar-width: none;
  }
  #convList::-webkit-scrollbar,
  .conversations-view::-webkit-scrollbar,
  .log-list::-webkit-scrollbar,
  .tool-filters::-webkit-scrollbar,
  .sidebar [style*="overflow"]::-webkit-scrollbar,
  .main [style*="overflow"]::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Topbar gets a thin draggable region hint when the platform supports
     window-controls-overlay. Pure visual cue — the actual draggability
     comes from the platform when WCO is active. No-op elsewhere. */
  @supports (-webkit-app-region: drag) {
    body { -webkit-app-region: no-drag; }
    .sidebar-header,
    .topbar { -webkit-app-region: drag; }
    .sidebar-header *,
    .topbar button,
    .topbar input,
    .topbar a { -webkit-app-region: no-drag; }
  }
}

/* ---------------------------------------------------------------------------
   Conversation pane typography — universal (browser + standalone)
   ---------------------------------------------------------------------------
   Targets the rendered assistant message body (`.assistant-text`). Goal: the
   Omnara-style Inter look applied to whatever the model writes — bigger
   structural headers, bolder <strong>, italic blockquotes with a hairline
   left rule, comfortable list spacing, capped reading width. Mirrors what
   Inter as `--font-ui` already buys us in the surrounding chrome.
   -------------------------------------------------------------------------- */
.assistant-text {
  font-size: 15px;
  line-height: 1.6;
  /* No max-width cap — when the user widens the conversation pane they want
     the text to use it. Earlier I clamped to 72ch for "comfortable reading
     width", but in a 1400px-wide pane that strands ~700px of empty space on
     the right. Trust the user's pane sizing instead. */
}
/* Headers — boosted sizes + bigger top margin so they break visually
   from the preceding paragraph. The previous values (22/18/15) were too
   subtle: at 15px body the h2 jump felt like emphasis, not structure.
   Now h1=28, h2=22, h3=17 with `font-weight: 800` so Inter's heavy weight
   actually carries. The pseudo-header (model emits `**Title**` on its own
   line) is treated as h3-equivalent so it stays one rung below explicit
   `##` headers. */
.assistant-text h1.md-h { font-size: 28px; font-weight: 800; margin: 24px 0 10px; letter-spacing: -0.02em; }
.assistant-text h2.md-h { font-size: 22px; font-weight: 800; margin: 22px 0 8px;  letter-spacing: -0.015em; }
.assistant-text h3.md-h { font-size: 17px; font-weight: 700; margin: 18px 0 6px;  letter-spacing: -0.01em; }
.assistant-text h3.md-h-pseudo { font-size: 16px; font-weight: 700; margin: 16px 0 4px; }
.assistant-text strong { font-weight: 700; color: var(--text); }
.assistant-text ol,
.assistant-text ul {
  padding-left: 22px;
  margin: 8px 0;
}
.assistant-text ol li,
.assistant-text ul li { margin: 6px 0; }
/* ---------------------------------------------------------------------------
   Archive-loading stages
   ---------------------------------------------------------------------------
   Replaces the bare "Loading archive…" placeholder with a vertical stage
   list during /api/conversations/all. Each stage has a glyph (○ pending,
   ● running, ✓ done, ! error, – skipped) plus a label and optional detail.
   Polled at ~250ms; once the archive renders real rows the stages get
   wiped by the regular renderer.
   -------------------------------------------------------------------------- */
.archive-loading-stages {
  padding: 18px 16px;
  font-size: 13px;
  color: var(--text);
}
.archive-loading-stages .als-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 10px 22px;
}
.archive-loading-stages .als-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 0 8px;
  padding: 5px 0;
}
.archive-loading-stages .als-glyph {
  font-size: 13px; line-height: 1.2;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
}
.archive-loading-stages .als-pending { color: var(--text-muted); opacity: 0.5; }
.archive-loading-stages .als-running {
  color: var(--accent);
  /* Soft pulse so the running stage reads as live without a spinner GIF. */
  animation: als-pulse 1s ease-in-out infinite;
}
@keyframes als-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.archive-loading-stages .als-done    { color: var(--green); }
.archive-loading-stages .als-error   { color: var(--orange); }
.archive-loading-stages .als-skipped { color: var(--text-muted); opacity: 0.6; }
.archive-loading-stages .als-label   { color: var(--text); }
.archive-loading-stages .als-state-pending .als-label,
.archive-loading-stages .als-state-skipped .als-label {
  color: var(--text-muted);
}
.archive-loading-stages .als-count {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
  font-size: 12px; color: var(--text-muted);
}
.archive-loading-stages .als-detail {
  grid-column: 2 / 4;
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Status-position: right rail
   ---------------------------------------------------------------------------
   Default layout keeps the sticky-header (Original ask + Earlier ask +
   Session activity) as a horizontal panel at the top of the conv pane.
   When `body.status-pos-right` is set, the conv-pane re-flows into a
   2-column CSS grid: main content on the left, a resizable status rail on
   the right. JS (`_applyStatusRailLayout`) moves `.csh-ask-original` and
   `.csh-col-activity` from inside the sticky into the rail; the sticky
   header's `.csh-row` collapses to just `.csh-ask-earlier` at the top.

   Body class is restored before paint by the inline script in index.html
   so there's no first-paint flash. */
/* The right rail is conditional. In TOP mode (default) it's removed
   entirely — no rail column eats horizontal space. In RIGHT mode the
   conv-pane re-flows into a 2-column grid and the rail is visible.
   Important for mobile + narrow windows where 260px is a real cost.

   Status row order in right-rail mode: header → conversation → INPUT BAR
   → keyboard hint → status row. Input reads as the primary action; the
   status (worktree / context / cost / model) is reference info underneath. */
body.status-pos-right .conv-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--status-rail-width, 260px);
  grid-template-rows: auto 1fr auto auto auto;
  grid-template-areas:
    "header  rail"
    "conv    rail"
    "input   rail"
    "hint    rail"
    "context rail";
  min-height: 0;
}
body.status-pos-right .conv-pane:has(> .conv-input-context.is-new-session) {
  grid-template-areas:
    "header  rail"
    "conv    rail"
    "context rail"
    "input   rail"
    "hint    rail";
}
body.status-pos-right .conv-pane > .conv-pane-header   { grid-area: header;  min-width: 0; }
body.status-pos-right .conv-pane > .conversations-view { grid-area: conv;    min-width: 0; min-height: 0; }
body.status-pos-right .conv-pane > .conv-input-bar     { grid-area: input;   min-width: 0; }
body.status-pos-right .conv-pane > .conv-input-hint    { grid-area: hint;    min-width: 0; }
body.status-pos-right .conv-pane > .conv-input-context { grid-area: context; min-width: 0; }
body.status-pos-right .conv-pane > .status-rail {
  grid-area: rail;
  display: flex; flex-direction: column;
  position: relative;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  overflow-y: auto;
  min-height: 0;
}
body.status-pos-right .status-rail .conv-bg-palette {
  align-self: flex-end;
  margin: auto 12px 12px auto;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  justify-content: end;
}
/* Default (top mode): rail completely hidden. JS also moves its children
   back to their original toolbar slots in this mode so no functionality
   is lost. */
.status-rail { display: none; }
.status-rail-resizer {
  position: absolute;
  left: -6px; top: 0; bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
}
.status-rail-resizer::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 4px; height: 44px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  opacity: 0.55;
  transition: background 0.12s, opacity 0.12s;
}
.status-rail-resizer:hover::before,
.status-rail-resizer.dragging::before {
  background: var(--accent);
  opacity: 0.95;
}
body.status-rail-resizing {
  cursor: col-resize;
  user-select: none;
}
body.status-rail-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.status-rail-restore {
  display: none;
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 58px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 7px 0 0 7px;
  background: color-mix(in srgb, var(--surface) 82%, var(--bg));
  color: var(--text-muted);
  cursor: pointer;
  z-index: 5;
  box-shadow: -4px 0 14px rgba(0,0,0,0.18);
}
.status-rail-restore:hover {
  color: var(--accent);
  background: var(--surface-2);
}
body.status-pos-right.status-rail-collapsed .conv-pane {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "conv"
    "input"
    "hint"
    "context";
}
body.status-pos-right.status-rail-collapsed .conv-pane:has(> .conv-input-context.is-new-session) {
  grid-template-areas:
    "header"
    "conv"
    "context"
    "input"
    "hint";
}
body.status-pos-right.status-rail-collapsed .conv-pane > .status-rail {
  display: none;
}
body.status-pos-right.status-rail-collapsed .conv-pane > .status-rail-restore {
  display: inline-flex;
}

/* Rail-actions row at the top of the rail — vertical stack of session-
   level buttons. Buttons are re-parented here at boot from `.ccc-topbar`
   and the conv toolbar; their original styles were scoped to those
   parents (e.g. `.toolbar .launch-btn`, `.ccc-topbar .topbar-btn`) so
   they pick up no styling once moved. We re-declare the look here. */
.rail-actions {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
}
.rail-actions:empty { display: none; }
.rail-actions > *,
.rail-actions .launch-btn,
.rail-actions .launch-choice-btn,
.rail-actions .topbar-btn,
.rail-actions .upd-pill,
.rail-actions .bug-link,
.rail-actions .announce-btn-conv {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px; font-weight: 500; font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rail-actions > *:hover { background: var(--surface-2); }
/* Launch-split is two adjacent buttons; keep them visually joined. */
.rail-actions .launch-split { display: flex; gap: 0; padding: 0; border: none; }
.rail-actions .launch-split .launch-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1 1 auto; }
.rail-actions .launch-split .launch-choice-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding: 6px 8px; flex: 0 0 auto; width: auto; }
/* The deploy pill is an <a>; keep the deploy-dot color cue. */
.rail-actions #deployPill .deploy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); flex: 0 0 auto;
}
/* Override default selectable text-cursor on conv-overflow / font controls
   so the row reads as one button per row. */
.rail-actions .conv-overflow-wrap,
.rail-actions .font-size-controls { padding: 0; border: none; gap: 4px; }
.rail-actions .conv-overflow-wrap > .conv-overflow-btn,
.rail-actions .font-size-controls > .font-size-btn {
  flex: 1 1 auto; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text); font-size: 12px;
  cursor: pointer;
}
.rail-actions .font-size-controls { display: flex; }

/* Top-left alerts strip — sits in the sidebar header next to the title.
   Hosts always-visible app-level signals (Update pill primarily).
   Compacted to icon-only by default so the title row stays single-line.
   The alerts collapse to a small bullet with the version on hover/title. */
.sidebar-top-alerts {
  display: flex; align-items: center; gap: 6px;
  margin: 0 6px;
  flex: 0 1 auto; min-width: 0;
}
.sidebar-top-alerts:empty { display: none; }
.sidebar-top-alerts > * {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(110,140,175,0.12);
  border: 1px solid rgba(110,140,175,0.35);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* #7 — Sidebar header on a single row. The sidebar-header is already
   `display: flex` but with three children that wrap on narrow widths
   (title + alerts + action-buttons), it currently stacks to ~84px.
   Force a single row, let the title shrink + ellipsis if needed. */
.sidebar-header {
  flex-wrap: nowrap !important;
  min-height: 0;
}
.sidebar-header > a:first-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-header-actions {
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

/* #5 — Session ID styling in the rail. Renders as
   "Session 2f1b1e0e 📋" — a labeled, scannable affordance. */
#convSessionId {
  display: flex !important; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  font-family: inherit;
}
#convSessionId:hover { background: var(--surface-2); }
#convSessionId .sid-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 10px;
  opacity: 0.7;
}
#convSessionId .sid-short {
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: var(--text);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}
#convSessionId .sid-copy {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.55;
}
#convSessionId:hover .sid-copy { opacity: 0.9; }

/* #10 — Rail visual structure. Add a 1px hairline between the three
   sections (original-ask, actions, activity) so the rail reads as
   organized blocks instead of one long stack. */
.status-rail > .csh-ask-original {
  border-bottom: 1px solid var(--border) !important;
}
.status-rail > .rail-actions {
  border-top: none;
}

/* Settings-menu slot — items moved from the toolbar into the gear popover
   (Terminal toggle, History indexing pill, Worktrees, Stats, Report a bug,
   font A-/A+). Force the existing buttons into the .pop-item visual
   shape so they read as menu items, not loose buttons. */
.settings-menu-slot {
  display: flex; flex-direction: column;
  gap: 0;
}
.settings-menu-slot:empty { display: none; }
.settings-menu-slot > *,
.settings-menu-slot > a,
.settings-menu-slot > button,
.settings-menu-slot > .topbar-btn,
.settings-menu-slot > .bug-link,
.settings-menu-slot > .upd-pill,
.settings-menu-slot > .hi-status-pill {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px; font-weight: 500; font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.settings-menu-slot > *:hover { background: var(--surface-2); }
/* #11 — Force inner spans (icon + label inside .upd-pill, .hi-status-pill,
   etc.) to inherit the menu-item text color so the items don't carry
   leftover blue/orange/etc. from their original toolbar styling. */
.settings-menu-slot > * > * {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
/* Font A-/A+ are two side-by-side buttons; let them share a row. */
.settings-menu-slot > .font-size-controls {
  display: flex; gap: 6px; padding: 4px 12px;
}
.settings-menu-slot > .font-size-controls .font-size-btn {
  flex: 1 1 0; padding: 6px 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 12px;
}
.settings-menu-slot > .font-size-controls .font-size-btn:hover {
  background: var(--surface-2);
}

/* Sidebar global-actions — hosts buttons that aren't conversation-scoped
   (History indexing pill, Stats, Report a bug, Worktrees). Same re-style
   logic as rail-actions: the original scoped styles don't reach here. */
.sidebar-global-actions {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-global-actions:empty { display: none; padding: 0; border-top: none; }
.sidebar-global-actions > *,
.sidebar-global-actions .topbar-btn,
.sidebar-global-actions .bug-link {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px; font-weight: 500; font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sidebar-global-actions > *:hover { background: var(--surface-2); }
.sidebar-global-actions #historyStatusPill[style*="display:none"] { display: none !important; }

/* When `.csh-ask-original` and `.csh-col-activity` are mounted inside the
   rail, drop the borders/flex sizing they had inside `.csh-row` (they
   were sized to share a horizontal panel). In the rail they're stacked,
   each taking its own height, separated by a hairline divider. */
body.status-pos-right .status-rail > .csh-ask-original,
body.status-pos-right .status-rail > .csh-col-activity {
  flex: 0 0 auto;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  background: transparent;
  display: flex; flex-direction: column;
}
body.status-pos-right .status-rail > .csh-col-activity {
  flex: 1 1 auto;        /* activity feed gets the remaining vertical space */
  min-height: 0;
  overflow-y: auto;
  border-bottom: none;
}
body.status-pos-right .status-rail > .csh-ask-original .user-msg {
  max-height: 30vh;       /* original ask scrolls inside the rail too */
  overflow-y: auto;
}

/* Mirror the in-sticky styling rules onto the rail so original-ask keeps
   its uppercase-green label, accent-blue body color, and the small/grey
   continuation. The base rules (lines 739, 743, 925-946) are scoped under
   `.conv-sticky-header`, which doesn't match once the node has been moved
   into the rail. Re-declare with `.status-rail` parent.

   Visual goal: the boxed "ORIGINAL ASK / is main clean?" look (Image 10),
   not the unstyled text-only render (Image 11). */
.status-rail .csh-ask-original > .label {
  color: var(--green); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.status-rail .csh-ask-original .user-msg {
  font-size: 14px; color: var(--text); line-height: 1.4;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.status-rail .csh-ask-original .ask-first {
  display: block; color: var(--accent); font-size: 14px; line-height: 1.45;
}
.status-rail .csh-ask-original .ask-rest {
  display: block; margin-top: 6px;
  color: var(--text-muted); font-size: 12px; line-height: 1.5; opacity: 0.85;
}
.status-rail .csh-ask-original .msg-image {
  max-width: 100%;
  max-height: 240px;
  margin-top: 8px;
}

/* Earlier-ask label: hide it everywhere — the user said "just show the
   earlier ask, no need to announce it". The orange "EARLIER ASK" header
   was decorative; the message itself carries the meaning. Applies in
   both top mode (sticky panel) and right-rail mode. */
.csh-ask-earlier > .label { display: none; }

/* When the original-ask and activity are pulled out of `.csh-row`, the
   sticky header's `.csh-col-ask` no longer needs to share width with an
   activity column — let the row collapse to just the earlier-ask slot.
   The bordered frame stays so earlier-ask reads as a panel at the top.
   Padding is added so the earlier-ask body breathes inside the box and
   doesn't sit flush against the close button at top-right. */
body.status-pos-right .conv-sticky-header .csh-row {
  height: auto;
  min-height: 0;
  padding: 4px 0;
}
body.status-pos-right .conv-sticky-header .csh-col-ask {
  border-right: none;
  flex: 1 1 auto;
  padding: 6px 36px 6px 12px;  /* right padding clears the × button */
}
/* The dashed top-divider on `.csh-ask-earlier` is only relevant when
   stacked under `.csh-ask-original`. With the original gone, drop it.
   And override the inherited `flex: 1 1 0`: in top mode the parent
   `.csh-row` is 170px so `flex: 1 1 0` resolves to half that; in
   right-rail mode the row is auto-height so the same flex resolves to
   ZERO and the earlier-ask paints with height 0 — invisible. Switch to
   `flex: 0 0 auto` so it sizes to its content. */
body.status-pos-right .conv-sticky-header .csh-col-ask > .csh-ask-earlier {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  flex: 0 0 auto;
  min-height: 0;
}
/* The earlier-ask body is the actual text container. In top mode its
   parent had a fixed height so the body could `flex: 1 1 auto`; in
   right-rail mode there's no fixed height to flex against, so let the
   body be auto-height too. Cap at 5 lines with an ellipsis — earlier-ask
   is a quick-reference cue, not the place to read the full prompt. */
body.status-pos-right .conv-sticky-header .csh-ask-earlier > .user-msg {
  flex: 0 0 auto;
  overflow: hidden;
}
body.status-pos-right .conv-sticky-header .csh-ask-earlier .earlier-first {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Issue-view layout — when an issue row is selected, the conv-input-context
   strip (workspace pill / branch / cost / model) is irrelevant: the issue
   isn't a session, you're not editing a working tree. Hide it. The issue
   title + GH link + close-action buttons are moved into the right rail by
   JS, and the rail's "Original ask" slot is replaced with an issue-header. */
body.is-issue-view .conv-input-context { display: none !important; }

/* Issue header in the rail — replaces the regular "Original ask" panel
   when viewing an issue. Same shape as `.csh-ask-original`, but with
   issue-specific styling for the #N badge and the GitHub link. */
.status-rail .csh-ask-original.is-issue-header .label { color: var(--orange); }
.status-rail .csh-ask-original.is-issue-header .ask-first {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.status-rail .csh-ask-original.is-issue-header .issue-num {
  color: var(--text-muted);
  font-weight: 400;
}
.status-rail .csh-ask-original.is-issue-header .ask-rest {
  color: var(--accent) !important;
  font-style: normal;
  text-decoration: none;
  margin-top: 8px;
  font-size: 12px;
  opacity: 1;
}
.status-rail .csh-ask-original.is-issue-header .ask-rest:hover {
  text-decoration: underline;
}

/* Issue close-action buttons inside the rail. They were styled inline
   with green/grey ghost-button look; in the rail context we want them to
   read as a stacked group of actions, not loose buttons. Override the
   inline styles so they take the full rail width and align as a vertical
   stack like the other rail-actions buttons. */
#railActions #issueCloseActions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
#railActions #issueCloseActions button {
  width: 100% !important;
  padding: 7px 10px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 12px !important;
}
#railActions #issueCloseActions [data-close-status] {
  font-size: 11px;
  margin-top: 4px;
}

/* Toggle button visual state — pressed when in right-rail mode. */
.sidebar-header-actions #statusPosToggle[aria-pressed="true"] {
  background: rgba(88,166,255,0.10);
  color: var(--accent);
}

/* #6 — Cap the sticky-header height in right-rail mode. Was reaching
   ~96px; tighten to 60px max with internal scrolling, recovering vertical
   space for the conversation. The 5-line earlier-ask clamp still applies;
   on shorter ask text the panel collapses to fit content. */
body.status-pos-right .conv-sticky-header { max-height: 60px; }
body.status-pos-right .conv-sticky-header .csh-row { padding: 0; }
body.status-pos-right .conv-sticky-header .csh-col-ask {
  padding: 4px 36px 4px 12px;
}

/* ---------------------------------------------------------------------------
   PWA install banner
   ---------------------------------------------------------------------------
   Surfaced as a dismissible toast in the bottom-right when the page is
   running in a tab (not standalone). Per-platform copy + an Install
   button on Chrome/Edge wired to a stashed `beforeinstallprompt` event.
   -------------------------------------------------------------------------- */
.pwa-install-banner {
  position: fixed;
  bottom: 18px; right: 18px;
  width: 340px; max-width: calc(100vw - 36px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 36px 14px 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 9999;
  font-size: 13px;
  color: var(--text);
  animation: pwa-slide-up 0.35s ease-out;
}
@keyframes pwa-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.pwa-install-banner__close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none; color: var(--text-muted);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.pwa-install-banner__close:hover { color: var(--text); }
.pwa-install-banner__title {
  font-weight: 700; font-size: 14px; margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.pwa-install-banner__body {
  color: var(--text-muted); line-height: 1.5; font-size: 12.5px;
}
.pwa-install-banner__body strong {
  color: var(--text); font-weight: 600;
}
.pwa-install-banner__body kbd {
  font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; font-size: 11px;
  color: var(--text);
}
.pwa-install-banner__actions {
  margin-top: 10px;
  display: flex; gap: 8px; align-items: center;
}
.pwa-install-banner__cta {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 7px 16px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.pwa-install-banner__cta:hover { opacity: 0.9; }

/* Quote blocks — italic with a hairline left rule, à la Omnara: the italic
   reads as "this is the quoted source", and the rule signals structure
   without dominating. Text stays at the normal `--text` color (Omnara
   doesn't dim quotes either — the italic alone carries the signal). */
.assistant-text blockquote {
  margin: 10px 0;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--border);
  color: var(--text);
  font-style: italic;
}
/* Inner paragraphs (multi-paragraph blockquotes are rendered as
   <blockquote><p>…</p><p>…</p></blockquote>): tight margins so the
   paragraph break reads as a small gap, not a full line of empty space. */
.assistant-text blockquote p {
  margin: 0 0 8px 0;
}
.assistant-text blockquote p:last-child {
  margin-bottom: 0;
}

/* Custom select dropdown styling */
.custom-select-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.custom-select-trigger {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background-color 0.15s;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  height: 24px;
  line-height: 1;
}
.custom-select-trigger:hover {
  border-color: var(--accent, var(--text-muted));
  background: var(--surface, rgba(255, 255, 255, 0.02));
}
.custom-select-trigger-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.custom-select-trigger-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.custom-select-trigger-icon svg,
.custom-select-option-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.custom-select-trigger-icon.claude,
.custom-select-option-icon.claude {
  color: #e28767;
}
.custom-select-trigger-icon.codex,
.custom-select-option-icon.codex {
  color: #3dd68c;
}
.custom-select-trigger-icon.gemini,
.custom-select-option-icon.gemini {
  color: #c084fc;
}
.custom-select-trigger-icon.antigravity,
.custom-select-option-icon.antigravity {
  color: #f2cc60;
}
.custom-select-trigger-label {
  display: inline-block;
}
.custom-select-arrow {
  margin-left: 2px;
  font-size: 9px;
  opacity: 0.6;
  display: inline-block;
  transform: translateY(0.5px);
}
.custom-select-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 140px;
  padding: 4px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 2px;
}
.custom-select-container.open .custom-select-menu {
  display: flex;
}

/* Placement rules based on element location */
.conv-input-bar .custom-select-container .custom-select-menu {
  bottom: calc(100% + 4px);
  right: 0;
}
.kanban-panel-toolbar .custom-select-container .custom-select-menu {
  top: calc(100% + 4px);
  right: 0;
}
.nsm-actions .custom-select-container .custom-select-menu {
  bottom: calc(100% + 4px);
  left: 0;
}

.custom-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.15s, color 0.15s;
  user-select: none;
  color: var(--text-muted);
}
.custom-select-option:hover {
  background: var(--surface-2, rgba(255, 255, 255, 0.05));
  color: var(--text);
}
.custom-select-option.selected {
  color: var(--text);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.02);
}
.custom-select-option-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.custom-select-option-label {
  flex-grow: 1;
  text-align: left;
}
.custom-select-option-check {
  color: var(--green, #3dd68c);
  font-weight: bold;
  font-size: 11px;
  margin-left: 4px;
}
.custom-select-option.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}