:root {
            /* Dark theme (default) */
            --bg-primary: #1a1b26;
            --bg-secondary: #24283b;
            --bg-tertiary: #414868;
            --text-primary: #c0caf5;
            /* Both were below WCAG AA on the surfaces they are actually used
               on. Measured before: --text-muted 2.76:1 on --bg-primary and
               2.35:1 on --bg-secondary (session path, last-activity);
               --text-secondary 4.23:1 on --bg-tertiary (card action buttons).
               Raised to clear 4.5:1 there — muted is now 5.77 / 4.92, and
               secondary is 4.78 on tertiary. The light theme already passed
               (7.24 / 6.15) and is unchanged. */
            --text-secondary: #b5bce0;
            --text-muted: #8b94bf;
            /* --text-muted is also used as a FILL (the stopped status pill,
               tab status dots), where brightening it drops the label on top
               from 5.91:1 to 2.83:1. Text colour and fill colour are separate
               roles: this keeps the fill at the original tone so raising the
               text tone cannot regress anything painted with it. */
            --surface-muted: #565f89;
            /* Destructive actions sit on --bg-tertiary, where the global
               --error is only 3.38:1. This is per-theme on purpose: a single
               hardcoded value readable on the dark button is 1.59:1 on the
               light one. */
            --danger-on-tertiary: #ff9db0;
            --accent: #7aa2f7;
            --accent-hover: #89b4fa;
            --primary: #7aa2f7;
            --success: #9ece6a;
            --warning: #e0af68;
            --error: #f7768e;
            --border: #414868;
            --text-on-accent: #111827;
            --text-on-success: #111827;
            --text-on-warning: #111827;
            --text-on-error: #111827;
            --text-on-muted: #f8fafc;
            /* Wait-badge staleness ramp (readable on dark --bg-tertiary #414868) */
            --wait-fresh: #8b949e;
            --wait-mid: #c0caf5;
            --wait-warn: #e0af68;
            --wait-stale: #f7768e;
            --update-banner-height: 44px;
        }

        /* Light theme */
        :root.light-theme {
            --bg-primary: #f8fafc;
            --bg-secondary: #ffffff;
            --bg-tertiary: #e2e8f0;
            --text-primary: #0f172a;
            --text-secondary: #334155;
            --text-muted: #475569;
            /* Light theme already cleared AA, so both roles keep its existing
               tone; the split exists so the dark theme can move one without
               the other. */
            --surface-muted: #475569;
            /* #dc2626 is only 3.92:1 on the light --bg-tertiary #e2e8f0. */
            --danger-on-tertiary: #c81e1e;
            --accent: #2563eb;
            --accent-hover: #1d4ed8;
            --primary: #2563eb;
            --success: #15803d;
            --warning: #a16207;
            --error: #dc2626;
            --border: #cbd5e1;
            --text-on-accent: #ffffff;
            --text-on-success: #ffffff;
            --text-on-warning: #ffffff;
            --text-on-error: #ffffff;
            --text-on-muted: #ffffff;
            /* Wait-badge staleness ramp (darkened for contrast on light --bg-tertiary #e2e8f0) */
            --wait-fresh: #475569;
            --wait-mid: #0f172a;
            --wait-warn: #92400e;
            --wait-stale: #b91c1c;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Shared count badges and dropdown menus use theme tokens.
           Badges use tabular numerals; menus open with .show. */

        .ui-count {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 600;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        /* Tone carries the meaning, so a count never depends on its position
           to be read: attn wants a human, ok is healthy, danger has failed.
           Each pairs with its own --text-on-* token rather than a fixed
           foreground, because the light theme inverts the fills. */
        .ui-count-attn {
            background: var(--warning);
            border-color: var(--warning);
            color: var(--text-on-warning);
        }

        .ui-count-ok {
            background: var(--success);
            border-color: var(--success);
            color: var(--text-on-success);
        }

        .ui-count-danger {
            background: var(--error);
            border-color: var(--error);
            color: var(--text-on-error);
        }

        .ui-menu {
            position: absolute;
            z-index: 1000;
            display: none;
            flex-direction: column;
            gap: 2px;
            min-width: 200px;
            padding: 6px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .ui-menu.show {
            display: flex;
        }

        .ui-menu-item {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 7px 10px;
            border: none;
            border-radius: 4px;
            background: none;
            color: var(--text-secondary);
            font: inherit;
            font-size: 0.82rem;
            text-align: left;
            cursor: pointer;
        }

        .ui-menu-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .ui-menu-item:disabled,
        .ui-menu-item:disabled:hover {
            background: none;
            color: var(--text-muted);
            cursor: not-allowed;
        }

        .ui-menu-item-danger:hover {
            color: var(--danger-on-tertiary);
        }

        /* A separator and a group label, so one menu can hold unrelated groups
           without them reading as one list. */
        .ui-menu-sep {
            height: 1px;
            margin: 4px 6px;
            background: var(--border);
        }

        .ui-menu-label {
            padding: 6px 10px 2px;
            color: var(--text-muted);
            font-size: 0.68rem;
            letter-spacing: 0.02em;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
        }

        /* Header */
        header {
            background: var(--bg-secondary);
            padding: 10px 24px;
            display: flex;
            gap: 24px;
            align-items: center;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .logo { font-size: 1rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
        .header-actions { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
        .header-actions button { border: 0; border-radius: 5px; font: inherit; font-size: 13px; cursor: pointer; }
        #header-overflow-destinations { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
        #workspace-menu .header-reviews-btn { display: flex; width: 100%; max-width: none; justify-content: space-between; }
        #header-overflow-destinations .ui-count { margin-left: 0; }
        #header-overflow-destinations .active { background: var(--bg-tertiary); color: var(--text-primary); }
        .header-actions #header-new-session-btn {
            flex: 0 0 auto; padding: 7px 12px; height: 34px; gap: 4px;
            background: var(--accent); color: var(--text-on-accent); white-space: nowrap;
            display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
        }
        .header-actions #header-open-unopened-tabs-btn {
            flex: 0 0 auto; padding: 7px 12px; height: 34px; min-width: 58px;
            background: transparent; color: var(--text-primary);
            border: 1px solid var(--border); white-space: nowrap;
            display: inline-flex; align-items: center; justify-content: center;
            box-sizing: border-box; gap: 5px;
        }
        .header-actions #header-open-unopened-tabs-btn:hover {
            background: var(--bg-tertiary); color: var(--text-primary);
        }
        .open-unopened-tabs-btn { align-items: center; justify-content: center; gap: 5px; min-width: 58px; }
        /* The way back to the session you left. First in the bar and the one
           that gives way: it shrinks to an ellipsis before anything else
           moves, but never below the arrow and a few letters. */
        .header-actions #header-return-session-btn {
            display: inline-flex; align-items: center; gap: 6px;
            flex: 0 1 auto; min-width: 64px; max-width: 360px; height: 34px;
            margin-right: auto; padding: 0 12px; box-sizing: border-box;
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            border: 1px solid var(--accent); color: var(--text-primary);
            font-weight: 600; white-space: nowrap;
        }
        .header-actions #header-return-session-btn[hidden] { display: none; }
        .header-actions #header-return-session-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
        .header-return-arrow { flex: 0 0 auto; color: var(--accent); font-size: 15px; }
        .header-return-session-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .header-menu { position: relative; flex: 0 0 auto; }
        .header-actions .header-menu-btn {
            width: 34px; min-width: 34px; height: 34px; padding: 0;
            color: var(--text-secondary); background: transparent; font-size: 16px;
        }
        .header-actions .header-menu-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .settings-menu-label { display: none; }
        .header-actions #header-owner-requests-btn {
            position: relative; display: inline-flex; align-items: center; justify-content: center;
            flex: 0 0 38px; width: 38px; min-width: 38px; height: 34px; padding: 0;
            border: 1px solid var(--border); border-radius: 5px; background: var(--bg-tertiary);
            color: var(--warning); font-size: 17px; font-weight: 700;
        }
        .header-actions #header-owner-requests-btn[hidden] { display: none; }
        #header-owner-requests-btn[aria-expanded="true"] { border-color: var(--warning); }
        #header-owner-requests-count {
            position: absolute; top: -5px; right: -4px; margin: 0; height: 15px;
            min-width: 15px; padding: 0 3px; font-size: 10px; pointer-events: none;
        }
        .owner-request-heading { display: block; margin: -8px -16px 8px; padding: 8px 16px; position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); }
        .owner-request-heading-inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; width: 100%; margin: 0; }
        .owner-request-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
        .owner-request-heading-actions .owner-request-actions { max-width: none; }
        .owner-request-actions { flex-wrap: wrap; max-width: 420px; }
        .owner-request-actions textarea { width: 100%; box-sizing: border-box; background: var(--bg-secondary); color: var(--text-primary); }
        .owner-questions-open .owner-request-heading { margin: 0; padding: 0 0 6px; flex: 0 0 auto; position: static; background: transparent; }
        .owner-questions-open .owner-request-heading-inner { width: 100%; gap: 6px 12px; }
        .owner-questions-open .owner-request-heading strong { font-size: 0.82rem; }
        .owner-request-navigation { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; white-space: nowrap; }
        .owner-request-navigation button { min-width: 32px; }
        #owner-request-panel button:disabled { opacity: 0.45; cursor: default; }
        #owner-request-panel button[hidden] { display: none; }
        #owner-request-panel .owner-request-hide { font-size: 18px; padding: 0; width: 32px; min-width: 32px; }
        .owner-request-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
        #owner-request-panel .owner-request-row.is-question { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); align-items: start; width: 100%; }
        .owner-request-row.is-question > .message-approval-main { display: grid; gap: 6px; }
        .owner-request-row.is-question .message-approval-kicker { color: var(--warning); }
        .owner-request-row.is-question .message-approval-main > button { justify-self: start; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
        .owner-request-row.is-question .owner-request-actions { min-width: 0; max-width: none; }
        .owner-request-actions textarea { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 5px; font: inherit; resize: vertical; }
        #owner-request-panel .owner-request-row.is-question .owner-request-actions button { white-space: normal; overflow-wrap: anywhere; text-align: left; }
        #owner-request-panel .owner-request-row.is-question .owner-request-actions > button { flex: 1; text-align: center; }
        .owner-answer-options { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
        .owner-request-row { align-items: flex-start; }
        #owner-request-panel .owner-request-row {
            width: 100%; margin: 0; padding: 12px; box-sizing: border-box;
            border: 1px solid var(--border); border-radius: 7px;
            background: var(--bg-secondary); min-width: 0;
        }
        #owner-request-panel .owner-request-row + .owner-request-row { margin-top: 10px; }
        .owner-request-row.has-sql-group > .message-approval-main,
        .owner-request-row.has-sql-group > .owner-sql-group,
        .owner-request-row.has-sql-group > .owner-sql-decision { width: 100%; }
        .owner-request-row.has-sql-group { flex-direction: column; align-items: stretch; }
        /* Buttons only. A long question stuck with them covered the plans. */
        .owner-sql-decision { display: flex; justify-content: flex-end; position: sticky; top: var(--owner-request-heading-offset, 0px); z-index: 1; padding: 4px 0; background: var(--bg-secondary); }
        .owner-sql-group-plan,
        .owner-sql-group-plan > summary,
        .owner-sql-group-plan .message-approval-reason,
        .owner-sql-group-plan pre { scroll-margin-top: calc(var(--owner-request-heading-offset, 0px) + var(--owner-sql-decision-offset, 0px)); }
        .owner-sql-group { display: flex; flex-direction: column; min-width: 0; }
        .owner-sql-group-plan { border-top: 1px solid color-mix(in srgb, var(--border), transparent 45%); min-width: 0; }
        .owner-sql-group-plan > summary { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px; cursor: pointer; list-style: none; color: var(--text-primary); font-size: 0.84rem; }
        .owner-sql-group-plan > summary::-webkit-details-marker { display: none; }
        .owner-sql-group-plan > summary::marker { content: ''; }
        .owner-sql-group-plan > summary::before { content: '▸'; flex: 0 0 auto; width: 0.8em; color: var(--text-muted); font-size: 0.75rem; }
        .owner-sql-group-plan[open] > summary::before { content: '▾'; }
        .owner-sql-plan-label { font-weight: 600; min-width: 0; }
        .owner-sql-plan-where { margin-left: auto; color: var(--text-muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
        .owner-sql-plan-status { color: var(--warning); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
        .owner-sql-group-plan .message-approval-reason,
        .owner-sql-group-plan pre { margin: 0 0 8px 1.4em; }
        .owner-request-row pre { max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
        .owner-request-row .message-approval-reason { white-space: pre-line; }
        .header-dropdown { top: calc(100% + 8px); right: 0; width: 260px; z-index: 1900; }
        .header-dropdown.show { display: flex; }
        #settings-menu {
            max-height: calc(100dvh - 70px - var(--update-banner-height, 0px));
            overflow-y: auto; overscroll-behavior: contain;
        }
        #settings-menu > * { flex-shrink: 0; }
        .header-dropdown .ui-menu-item { min-height: 36px; text-decoration: none; }
        .header-toggle-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; padding: 8px 10px; border-radius: 4px;
            color: var(--text-secondary); font-size: 13px; cursor: pointer;
        }
        .header-toggle-row:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .header-toggle-row input { width: 16px; height: 16px; accent-color: var(--accent); }
        .workspace-admin:not(:has(#restart-server-btn:not([style*="display: none"]))) { display: none; }
        .header-dropdown .push-btn.active { color: var(--success); background: transparent; }
        #header-overflow-destinations button:focus-visible, .header-menu-btn:focus-visible,
        .agent-filter-pill:focus-visible, .sidebar-usage-button:focus-visible {
            outline: 2px solid var(--accent); outline-offset: -2px;
        }

        .push-btn {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .push-btn:hover {
            background: var(--bg-tertiary);
            filter: brightness(1.2);
        }

        .push-btn.active {
            background: var(--success);
            color: var(--text-on-success);
        }

        .push-btn.active:hover {
            filter: brightness(0.9);
        }

        /* Mobile: compact header */
        @media (max-width: 768px) {
            :root {
                --mobile-menu-bg: #111827;
                --mobile-menu-item-bg: #1f2937;
                --mobile-menu-item-active: #263348;
                --mobile-menu-border: #56627a;
                --mobile-menu-text: #f8fafc;
                --mobile-menu-muted: #d6deee;
            }

            :root.light-theme {
                --mobile-menu-bg: #ffffff;
                --mobile-menu-item-bg: #f1f5f9;
                --mobile-menu-item-active: #dbeafe;
                --mobile-menu-border: #94a3b8;
                --mobile-menu-text: #0f172a;
                --mobile-menu-muted: #334155;
            }

            .push-btn {
                font-size: 0.7rem;
                padding: 6px 8px;
            }

            header {
                padding: 8px 12px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .header-actions {
                gap: 4px;
                flex-wrap: wrap;
            }

            .header-actions button {
                padding: 6px 10px;
                font-size: 0.8rem;
            }

            .header-dropdown { width: min(300px, calc(100vw - 20px)); }
            .workspace-menu .header-dropdown { width: min(300px, calc(100vw - 72px)); max-height: calc(100dvh - 70px); overflow-y: auto; }
            .header-dropdown .ui-menu-item, .header-toggle-row { min-height: 44px; }

            /* Hide notification button text on mobile, show only icon */
            #push-toggle .btn-text { display: inline; }

            /* Hide desktop-only buttons on mobile */
            .desktop-only {
                display: none !important;
            }
        }

        /* Main content */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0; /* Allow shrinking */
            overflow: hidden;
        }

        /* Sessions list view */
        #sessions-view {
            padding: 16px;
            flex: 1;
            overflow-y: auto;
        }

        #artifacts-view {
            padding: 16px;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .artifacts-page-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }

        .artifacts-heading {
            min-width: 0;
            flex: 1;
        }

        .artifacts-heading h2 {
            margin: 0;
            font-size: 1.05rem;
            color: var(--text-primary);
            font-weight: 650;
        }

        .artifacts-subtitle {
            margin-top: 2px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            overflow-wrap: anywhere;
        }

        .artifacts-refresh-btn {
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-radius: 6px;
            padding: 8px 12px;
            cursor: pointer;
        }

        .artifacts-refresh-btn:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .artifacts-filters {
            display: grid;
            grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
            gap: 10px;
            align-items: end;
            margin-bottom: 12px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
        }

        .artifacts-filters label {
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 0;
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .artifacts-filters input {
            width: 100%;
            min-width: 0;
            height: 34px;
            padding: 7px 9px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 0.86rem;
            text-transform: none;
            letter-spacing: 0;
        }

        .artifacts-filters input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .artifacts-filter-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .artifacts-filter-actions button {
            height: 34px;
            padding: 0 12px;
            border: 1px solid var(--accent);
            border-radius: 6px;
            background: var(--accent);
            color: var(--text-on-accent);
            cursor: pointer;
            font-weight: 600;
        }

        .artifacts-filter-actions button.secondary {
            border-color: var(--border);
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .artifacts-status {
            min-height: 20px;
            margin: 8px 0 12px;
            color: var(--text-secondary);
            font-size: 0.86rem;
        }

        .artifacts-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px;
            padding-bottom: 18px;
        }

        .artifact-card {
            display: grid;
            grid-template-rows: auto 1fr;
            min-width: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
        }

        .artifact-preview {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 16 / 10;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
            text-decoration: none;
        }

        .artifact-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .artifact-preview-empty {
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        .artifact-card-body {
            display: flex;
            flex-direction: column;
            gap: 7px;
            min-width: 0;
            padding: 11px;
        }

        .artifact-card-title {
            color: var(--text-primary);
            font-weight: 650;
            font-size: 0.95rem;
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .artifact-card-meta {
            color: var(--text-muted);
            font-size: 0.78rem;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .artifact-link-row {
            width: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--text-secondary);
            text-align: left;
            font-size: 0.78rem;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .artifact-link-row:hover {
            color: var(--accent);
        }

        .artifact-card-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: auto;
            padding-top: 4px;
        }

        .artifact-card-actions a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 5px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            text-decoration: none;
            font-size: 0.78rem;
            font-weight: 600;
        }

        .artifact-card-actions a:hover {
            border-color: var(--accent);
        }

        .artifacts-empty {
            grid-column: 1 / -1;
            padding: 36px 16px;
            border: 1px dashed var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            text-align: center;
        }

        .artifacts-empty h3 {
            margin: 0 0 6px;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .artifacts-empty p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.88rem;
        }

        .artifacts-empty.error {
            border-color: var(--error);
        }

        @media (max-width: 1100px) {
            .artifacts-filters {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .artifacts-filter-actions {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 640px) {
            .artifacts-page-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .artifacts-filters {
                grid-template-columns: 1fr;
            }

            .artifacts-filter-actions {
                width: 100%;
            }

            .artifacts-filter-actions button {
                flex: 1;
            }

            .artifacts-list {
                grid-template-columns: 1fr;
            }
        }

        /* Reviews are a first-class page. Lifecycle state is intentionally
           rendered here instead of in fixed cards over the session UI. */
        #reviews-view {
            padding: 16px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .reviews-page-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .reviews-heading {
            min-width: 0;
            flex: 1;
        }

        .reviews-heading h2 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1.2rem;
        }

        .reviews-subtitle {
            margin-top: 2px;
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        .reviews-refresh-btn,
        .reviews-filter,
        .review-page-action,
        .review-list-item,
        .review-mobile-back {
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-radius: 7px;
            cursor: pointer;
        }

        .reviews-refresh-btn {
            padding: 8px 12px;
        }

        .reviews-page-message {
            display: none;
            margin: 0 0 12px;
            padding: 9px 11px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 0.84rem;
        }

        .reviews-page-message.visible { display: block; }
        .reviews-page-message.success { border-color: var(--success); color: var(--success); }
        .reviews-page-message.error { border-color: var(--error); color: var(--error); }
        .reviews-page-message.attention { border-color: var(--warning); color: var(--warning); }

        .reviews-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 10px;
        }

        .reviews-filter {
            padding: 7px 10px;
            font-size: 0.8rem;
            font-weight: 650;
        }

        .reviews-filter.active {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent), transparent 82%);
            color: var(--accent);
        }

        .reviews-layout {
            display: grid;
            grid-template-columns: minmax(280px, 0.8fr) minmax(0, 2fr);
            min-height: 520px;
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg-secondary);
        }

        .reviews-list-pane {
            min-width: 0;
            border-right: 1px solid var(--border);
            background: color-mix(in srgb, var(--bg-secondary), var(--bg-primary) 24%);
        }

        .reviews-list {
            display: flex;
            flex-direction: column;
        }

        .review-list-item {
            width: 100%;
            min-width: 0;
            padding: 12px;
            border: 0;
            border-bottom: 1px solid var(--border);
            border-radius: 0;
            background: transparent;
            text-align: left;
        }

        .review-list-item:hover,
        .review-list-item.selected {
            background: var(--bg-tertiary);
        }

        .review-list-item.selected {
            box-shadow: inset 3px 0 0 var(--accent);
        }

        .review-list-topline,
        .review-detail-title-row,
        .review-detail-actions,
        .review-finding-head,
        .review-record-head {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .review-list-identity {
            min-width: 0;
            flex: 1;
            overflow: hidden;
            color: var(--text-primary);
            font-weight: 750;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .review-list-title {
            margin-top: 5px;
            overflow: hidden;
            color: var(--text-secondary);
            font-size: 0.84rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .review-list-meta {
            margin-top: 6px;
            color: var(--text-muted);
            font-size: 0.74rem;
        }

        .review-status-badge,
        .review-finding-badge {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            min-height: 22px;
            padding: 3px 7px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-primary);
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 750;
            line-height: 1;
            text-transform: uppercase;
        }

        .review-status-badge.attention,
        .review-finding-badge.blocking { border-color: var(--warning); color: var(--warning); }
        .review-status-badge.complete { border-color: var(--success); color: var(--success); }
        .review-status-badge.failed { border-color: var(--error); color: var(--error); }
        .review-status-badge.active { border-color: var(--accent); color: var(--accent); }

        /* CI state rides in the row meta line, so it reads as one more fact
           about the review rather than competing with the lifecycle badge. */
        .review-ci-chip {
            display: inline-flex;
            align-items: center;
            padding: 1px 6px;
            border: 1px solid var(--border);
            border-radius: 999px;
            font-size: 0.68rem;
            font-weight: 750;
            line-height: 1.5;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            white-space: nowrap;
            color: var(--text-secondary);
        }

        .review-ci-chip.ok { border-color: var(--success); color: var(--success); }
        .review-ci-chip.warn { border-color: var(--warning); color: var(--warning); }
        .review-ci-chip.bad { border-color: var(--error); color: var(--error); }

        .review-detail-pane {
            min-width: 0;
            background: var(--bg-secondary);
        }

        .review-detail {
            min-width: 0;
            padding: 16px;
        }

        .review-detail-empty,
        .reviews-empty {
            padding: 36px 18px;
            color: var(--text-secondary);
            text-align: center;
        }

        .review-detail-title-row {
            align-items: flex-start;
            margin-bottom: 4px;
        }

        .review-detail-title {
            min-width: 0;
            flex: 1;
            color: var(--text-primary);
            font-size: 1.15rem;
            font-weight: 760;
            overflow-wrap: anywhere;
        }

        .review-detail-subtitle {
            color: var(--text-secondary);
            font-size: 0.88rem;
            overflow-wrap: anywhere;
        }

        .review-detail-subtitle a { color: var(--accent); }

        .review-detail-actions {
            flex-wrap: wrap;
            margin: 14px 0;
        }

        .review-page-action {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 7px 10px;
            font-size: 0.78rem;
            font-weight: 700;
            text-decoration: none;
        }

        .review-page-action.primary {
            border-color: var(--accent);
            background: var(--accent);
            color: var(--text-on-accent);
        }

        .review-page-action.success {
            border-color: var(--success);
            background: color-mix(in srgb, var(--success), var(--bg-secondary) 72%);
            color: var(--text-primary);
        }

        .review-page-action.warning {
            border-color: var(--warning);
            background: color-mix(in srgb, var(--warning), var(--bg-secondary) 84%);
            color: color-mix(in srgb, var(--warning), white 28%);
        }

        .review-page-action.danger { border-color: var(--error); color: var(--error); }
        .review-page-action:disabled { opacity: 0.5; cursor: not-allowed; }
        .review-page-action.success:disabled { opacity: 0.82; }

        .review-page-action[aria-busy="true"],
        .session-context-action[aria-busy="true"],
        .session-context-menu-action[aria-busy="true"],
        .review-action-alert-actions button[aria-busy="true"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }

        .session-context-menu-action[aria-busy="true"] {
            justify-content: flex-start;
        }

        .review-detail-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 16px;
        }

        .review-detail-field {
            min-width: 0;
            padding: 9px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--bg-primary);
        }

        .review-detail-field-label {
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .review-detail-field-value {
            margin-top: 4px;
            overflow-wrap: anywhere;
            color: var(--text-primary);
            font-size: 0.8rem;
        }

        .review-detail-section {
            margin-top: 16px;
        }

        .review-detail-section h3 {
            margin: 0 0 8px;
            color: var(--text-primary);
            font-size: 0.9rem;
        }

        .review-finding,
        .review-record,
        .review-event {
            margin-top: 7px;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--bg-primary);
        }

        .review-finding-title,
        .review-record-title {
            min-width: 0;
            flex: 1;
            color: var(--text-primary);
            font-size: 0.84rem;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .review-finding-detail,
        .review-record-body,
        .review-event-meta {
            margin-top: 6px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            line-height: 1.45;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .review-event summary {
            cursor: pointer;
            color: var(--text-primary);
            font-size: 0.8rem;
            font-weight: 650;
        }

        .review-event pre {
            margin-top: 8px;
            overflow-x: auto;
            color: var(--text-secondary);
            font-size: 0.72rem;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .review-mobile-back { display: none; }

        @media (max-width: 900px) {
            .reviews-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .reviews-layout { grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr); }
            .review-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 640px) {
            #reviews-view { padding: 10px; }
            .reviews-page-header { align-items: flex-start; flex-wrap: wrap; }
            .reviews-heading { order: -1; flex-basis: 100%; }
            .reviews-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .reviews-layout { display: block; min-height: 0; }
            .reviews-list-pane { border-right: 0; }
            .review-detail-pane { display: none; }
            .reviews-layout.mobile-detail-open .reviews-list-pane { display: none; }
            .reviews-layout.mobile-detail-open .review-detail-pane { display: block; }
            .review-detail { padding: 12px; }
            .review-detail-grid { grid-template-columns: 1fr; }
            .review-mobile-back {
                display: inline-flex;
                margin-bottom: 12px;
                padding: 7px 10px;
            }
        }

        /* Durable session schedules intentionally mirror the review page's
           list/detail layout while keeping execution state easy to scan. */
        #scheduled-view {
            padding: 16px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        #background-tasks-view {
            padding: 16px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            --task-track: color-mix(in srgb, var(--bg-tertiary) 55%, var(--bg-primary));
        }
        .background-tasks-page { max-width: 1180px; margin: 0 auto; }
        .background-tasks-refresh {
            padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
            background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer;
        }
        .background-tasks-summary {
            display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px;
        }
        .background-tasks-summary:empty { display: none; }
        .background-tasks-tile {
            min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
            background: var(--bg-secondary); color: var(--text-primary); text-align: left; cursor: pointer; font: inherit;
        }
        .background-tasks-tile:hover { border-color: var(--accent); }
        .background-tasks-tile .tile-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
        .background-tasks-tile .tile-v { margin-top: 2px; font-size: 1.45rem; font-weight: 650; }
        .background-tasks-tile .tile-s { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .background-tasks-tile.attn .tile-v { color: var(--warning); }
        .background-tasks-toolbar {
            position: sticky; top: -16px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
            background: var(--bg-primary);
        }
        .background-tasks-toolbar input, .background-tasks-toolbar select {
            padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px;
            background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.84rem;
        }
        .background-tasks-toolbar input { flex: 1; min-width: 160px; }
        .background-tasks-toolbar select { max-width: 230px; }
        .background-tasks-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
        .background-tasks-seg button {
            padding: 5px 11px; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 0.84rem;
        }
        .background-tasks-seg button + button { border-left: 1px solid var(--border); }
        .background-tasks-seg button.active { background: var(--accent); color: var(--text-on-accent); font-weight: 600; }
        .background-tasks-seg .seg-n { margin-left: 4px; opacity: 0.75; font-size: 0.78rem; }
        #background-tasks-message:not(:empty) { margin-top: 10px; color: var(--error); font-size: 0.84rem; }
        .background-task-group { margin-top: 16px; }
        .background-task-group-head {
            display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px 2px;
            font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
        }
        .background-task-group-head .group-name { color: var(--text-secondary); font-weight: 650; font-size: 0.88rem; text-transform: none; letter-spacing: 0; }
        .background-task-group-head button.group-name { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; font-family: inherit; }
        .background-task-subhead { margin: 8px 0 6px 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
        .background-task-cols, .background-task-row {
            display: grid; grid-template-columns: 22px minmax(0, 2.3fr) minmax(170px, 1.5fr) 118px 110px 72px;
            gap: 14px; align-items: center;
        }
        .background-task-cols { padding: 0 12px 4px; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
        .background-task-cols .r, .background-task-row .r { text-align: right; }
        .background-task-rows { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        .background-task-card + .background-task-card { border-top: 1px solid var(--border); }
        .background-task-row { padding: 9px 12px; background: var(--bg-secondary); cursor: pointer; }
        .background-task-row:hover { background: color-mix(in srgb, var(--bg-tertiary) 30%, var(--bg-secondary)); }
        .background-task-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
        .background-task-card.attn .background-task-row { box-shadow: inset 3px 0 0 var(--warning); }
        .background-task-card.failed .background-task-row { box-shadow: inset 3px 0 0 var(--error); }
        .background-task-dot { display: grid; place-items: center; width: 18px; height: 18px; font-size: 12px; font-weight: 700; }
        .background-task-dot.running::before {
            content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
        }
        .background-task-dot.paused { color: var(--text-secondary); } .background-task-dot.paused::before { content: "Ⅱ"; }
        .background-task-dot.completed { color: var(--success); } .background-task-dot.completed::before { content: "✓"; }
        .background-task-dot.failed { color: var(--error); } .background-task-dot.failed::before { content: "✕"; }
        .background-task-dot.cancelled { color: var(--text-muted); } .background-task-dot.cancelled::before { content: "–"; }
        .background-task-dot.attn::before {
            content: "!"; display: grid; place-items: center; width: 14px; height: 14px; font-size: 10px;
            border: 1.5px solid var(--warning); border-radius: 50%; color: var(--warning); background: none; box-shadow: none;
        }
        .background-task-name { min-width: 0; }
        .background-task-name .name-t { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .background-task-name .name-sub, .background-task-name .name-note {
            font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .background-task-name .name-sub { color: var(--text-muted); }
        .background-task-name .name-note { color: var(--text-secondary); }
        .background-task-name .name-note.warn { color: var(--warning); }
        .background-task-session { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
        .session-task-strip {
            --task-track: color-mix(in srgb, var(--bg-tertiary) 55%, var(--bg-primary));
            display: flex; align-items: flex-start; gap: 8px;
            padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--border);
            background: var(--bg-secondary); font-size: 0.76rem;
        }
        .session-task-strip[hidden] { display: none; }
        /* One grid for all rows (each row is a subgrid), so every bar starts
           and ends at the same x whatever its figures say. */
        .session-task-rows {
            flex: 1 1 auto; min-width: 0; display: grid; row-gap: 4px; column-gap: 10px;
            grid-template-columns: minmax(0, 14rem) minmax(4rem, 1fr) auto;
        }
        .session-task-row {
            grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
            align-items: center; min-height: 22px; cursor: pointer; border-radius: 4px;
        }
        .session-task-row:hover, .session-task-row:focus-visible { background: var(--bg-tertiary); outline: none; }
        .session-task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
        .session-task-row .background-task-bar { height: 8px; }
        .session-task-figures { justify-self: end; white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
        .session-task-figures b { color: var(--text-primary); font-weight: 600; }
        .session-task-attn, .session-task-done { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0; }
        .session-task-status-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .session-task-attn { color: var(--warning); }
        .session-task-row.failed .session-task-attn { color: var(--error); }
        .session-task-done { color: var(--success); }
        .session-task-done.cancelled { color: var(--text-muted); }
        .session-task-dismiss {
            flex: 0 0 auto; margin-left: 8px; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px;
            background: var(--bg-secondary); color: var(--text-secondary); font: inherit; font-size: 0.92em; cursor: pointer;
        }
        .session-task-dismiss:hover, .session-task-dismiss:focus-visible { color: var(--text-primary); border-color: var(--text-muted); }
        /* One row for every category clear. They used to each span the grid,
           so two short labels stacked even when the strip had room. */
        .session-task-dismiss-row {
            grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
            gap: 6px; min-width: 0;
        }
        .session-task-dismiss-all { margin-left: 0; min-height: 28px; }
        .session-task-dismiss-all:disabled { opacity: 0.6; cursor: wait; }
        .session-task-hide {
            flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
            background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer;
        }
        .session-task-hide:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        @media (max-width: 640px) {
            .session-task-rows { grid-template-columns: minmax(0, 1fr) auto; }
            .session-task-row { row-gap: 2px; }
            .session-task-row .background-task-bar { grid-column: 1 / -1; grid-row: 2; }
        }
        .background-task-bar { position: relative; height: 10px; border-radius: 5px; overflow: hidden; background: var(--task-track); }
        .background-task-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--accent); }
        .background-task-fill.completed { background: var(--success); }
        .background-task-fill.failed { background: var(--error); }
        .background-task-fill.cancelled, .background-task-fill.paused { background: var(--text-muted); }
        .background-task-bar.indeterminate .background-task-fill {
            width: 30%; background: repeating-linear-gradient(90deg, var(--task-track) 0 6px, var(--bg-tertiary) 6px 12px);
        }
        .background-task-bar-label { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); }
        .background-task-bar-label b { color: var(--text-primary); font-weight: 600; }
        .background-task-bar-label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .background-task-left .left-big { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
        .background-task-left .left-big.soon { color: var(--success); }
        .background-task-left .left-big.long { color: var(--warning); }
        .background-task-left .left-big.none { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); text-transform: capitalize; }
        .background-task-left .left-sm { font-size: 0.74rem; color: var(--text-muted); }
        .background-task-rate { font-size: 0.82rem; color: var(--text-secondary); }
        .background-task-updated { font-size: 0.8rem; color: var(--text-muted); }
        .background-task-updated.overdue { color: var(--warning); font-weight: 600; }
        .background-task-detail {
            display: none; padding: 10px 12px 12px 48px; border-top: 1px dashed var(--border);
            background: var(--bg-primary); font-size: 0.84rem;
        }
        .background-task-card.open .background-task-detail { display: block; }
        .background-task-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0 0 8px; }
        .background-task-detail dt { color: var(--text-muted); }
        .background-task-detail dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
        .background-task-detail dd.warn { color: var(--warning); }
        .background-task-detail-actions { display: flex; gap: 8px; }
        .background-task-detail-actions button {
            padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px;
            background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font: inherit; font-size: 0.8rem;
        }
        .background-tasks-empty { margin-top: 16px; padding: 20px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; color: var(--text-muted); }
        @media (max-width: 760px) {
            .background-tasks-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .background-tasks-toolbar { position: static; }
            .background-tasks-toolbar select { max-width: none; }
            .background-task-cols { display: none; }
            .background-task-row {
                grid-template-columns: 22px minmax(0, 1fr) auto;
                grid-template-areas: "dot name left" "dot prog prog" "dot rate updated";
                gap: 4px 10px;
            }
            .background-task-row > .background-task-dot { grid-area: dot; align-self: start; margin-top: 2px; }
            .background-task-row > .background-task-name { grid-area: name; }
            .background-task-row > .background-task-progress { grid-area: prog; }
            .background-task-row > .background-task-left { grid-area: left; }
            .background-task-row > .background-task-rate { grid-area: rate; text-align: left; }
            .background-task-row > .background-task-updated { grid-area: updated; }
            .background-task-detail { padding-left: 12px; }
        }
        .tab-task-indicator { color: var(--accent); cursor: pointer; white-space: nowrap; font-size: 0.72rem; }
        .tab-task-indicator.overdue { color: var(--warning); }
        .tab-task-indicator.failed { color: var(--error); }
        .fleet-row .tab-task-indicator {
            flex: 0 0 auto; padding: 2px 4px; border-radius: 4px;
            background: color-mix(in srgb, var(--accent) 16%, transparent);
            font-size: 0.75rem; font-weight: 700; line-height: 1.1;
        }
        .fleet-row .tab-task-indicator.overdue { background: color-mix(in srgb, var(--warning) 18%, transparent); }
        .fleet-row .tab-task-indicator.failed { background: color-mix(in srgb, var(--error) 18%, transparent); }
        .fleet-row .tab-task-indicator.finished:not(.failed) {
            color: var(--success); background: color-mix(in srgb, var(--success) 18%, transparent);
        }

        .scheduled-page-header,
        .scheduled-card-top,
        .scheduled-detail-header,
        .scheduled-detail-actions,
        .scheduled-run {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .scheduled-page-header { margin-bottom: 12px; }
        .scheduled-heading { min-width: 0; flex: 1; }
        .scheduled-heading h2 { margin: 0; color: var(--text-primary); font-size: 1.2rem; }
        .scheduled-subtitle { margin-top: 2px; color: var(--text-secondary); font-size: 0.8rem; }

        .scheduled-page-message {
            display: none;
            margin-bottom: 12px;
            padding: 9px 11px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 0.84rem;
        }

        .scheduled-page-message.visible { display: block; }
        .scheduled-page-message:not(:empty) { display: block; }
        .scheduled-page-message.success { border-color: var(--success); color: var(--success); }
        .scheduled-page-message.error { border-color: var(--error); color: var(--error); }

        .scheduled-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 10px;
        }

        .scheduled-filter,
        .scheduled-detail-actions button,
        .scheduled-inline-link {
            padding: 7px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 650;
        }

        .scheduled-filter.active {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent), transparent 82%);
            color: var(--accent);
        }

        .scheduled-layout {
            display: grid;
            grid-template-columns: minmax(280px, 0.8fr) minmax(0, 2fr);
            min-height: 520px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg-secondary);
        }

        .scheduled-list-pane {
            min-width: 0;
            border-right: 1px solid var(--border);
            background: color-mix(in srgb, var(--bg-secondary), var(--bg-primary) 24%);
        }

        .scheduled-list { display: flex; flex-direction: column; }

        .scheduled-card {
            width: 100%;
            min-width: 0;
            padding: 12px;
            border: 0;
            border-bottom: 1px solid var(--border);
            background: transparent;
            color: var(--text-primary);
            text-align: left;
            cursor: pointer;
        }

        .scheduled-card:hover,
        .scheduled-card.selected { background: var(--bg-tertiary); }
        .scheduled-card.selected { box-shadow: inset 3px 0 0 var(--accent); }
        .scheduled-card-top strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .scheduled-next { display: block; margin-top: 7px; color: var(--text-primary); font-size: 0.83rem; }
        .scheduled-meta { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.73rem; }

        .scheduled-status {
            display: inline-flex;
            flex: 0 0 auto;
            min-height: 22px;
            padding: 3px 7px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 750;
            line-height: 1;
            text-transform: uppercase;
        }

        .scheduled-status.active { border-color: var(--accent); color: var(--accent); }
        .scheduled-status.paused,
        .scheduled-status.pending_confirmation { border-color: var(--warning); color: var(--warning); }
        .scheduled-status.completed { border-color: var(--success); color: var(--success); }
        .scheduled-status.cancelled,
        .scheduled-status.failed { border-color: var(--error); color: var(--error); }

        .scheduled-detail { min-width: 0; padding: 16px; }
        .scheduled-detail-header { align-items: flex-start; }
        .scheduled-detail-header > div:first-child { min-width: 0; flex: 1; }
        .scheduled-detail-header h3 { margin: 0 0 6px; color: var(--text-primary); overflow-wrap: anywhere; }
        .scheduled-detail-actions { flex-wrap: wrap; margin: 14px 0; }
        .scheduled-detail-actions .danger { border-color: var(--error); color: var(--error); }

        .scheduled-confirmation-note {
            margin: 12px 0;
            padding: 10px;
            border: 1px solid var(--warning);
            border-radius: 7px;
            background: color-mix(in srgb, var(--warning), transparent 90%);
            color: var(--text-primary);
            font-size: 0.82rem;
            line-height: 1.45;
        }

        .scheduled-facts {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin: 0 0 16px;
        }

        .scheduled-facts > div,
        .scheduled-task-copy,
        .scheduled-run {
            min-width: 0;
            padding: 9px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--bg-primary);
        }

        .scheduled-facts dt { color: var(--text-muted); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; }
        .scheduled-facts dd { margin: 4px 0 0; color: var(--text-primary); font-size: 0.8rem; overflow-wrap: anywhere; }
        .scheduled-error { margin-top: 4px; color: var(--error); }
        .scheduled-task-copy { margin-bottom: 14px; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
        .scheduled-runs-title { margin: 16px 0 8px; color: var(--text-primary); }
        .scheduled-runs { display: flex; flex-direction: column; gap: 7px; }
        .scheduled-run { align-items: flex-start; color: var(--text-secondary); font-size: 0.78rem; }
        .scheduled-run > :first-child { min-width: 96px; color: var(--text-primary); font-weight: 700; }
        .scheduled-run > :nth-child(2) { min-width: 0; flex: 1; }
        .scheduled-inline-link { padding: 3px 7px; color: var(--accent); }
        .scheduled-empty { padding: 36px 18px; color: var(--text-secondary); text-align: center; }

        .schedule-modal label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; color: var(--text-secondary); font-size: 0.78rem; }
        .schedule-modal input,
        .schedule-modal select,
        .schedule-modal textarea { width: 100%; }
        .schedule-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
        .schedule-source-summary,
        .schedule-modal-note { margin-bottom: 12px; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.4; }
        .schedule-modal-note { padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-tertiary); }

        @media (max-width: 900px) {
            .scheduled-layout { grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr); }
            .scheduled-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 640px) {
            #scheduled-view { padding: 10px; }
            .scheduled-page-header { align-items: flex-start; flex-wrap: wrap; }
            .scheduled-heading { order: -1; flex-basis: 100%; }
            .scheduled-layout { display: block; min-height: 0; }
            .scheduled-list-pane { border-right: 0; }
            .scheduled-facts,
            .schedule-modal-grid { grid-template-columns: 1fr; }
            .scheduled-run { flex-wrap: wrap; }
        }

        .sessions-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .agent-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .agent-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 4px;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .agent-icon {
            font-size: 16px;
        }

        .agent-name {
            font-weight: 600;
            color: var(--text-primary);
        }

        .agent-session-count {
            color: var(--text-secondary);
            font-size: 12px;
        }

        .agent-sessions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-left: 8px;
            border-left: 2px solid var(--border);
        }

        .session-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: border-color 0.2s, transform 0.1s;
        }

        /* Sessions list: stacked host groups and a separate owner triage queue.
           Keep the existing stacked mobile cards and their metadata/actions. */
        .agent-group {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            gap: 0;
        }
        .agent-header { padding: 10px 14px; flex-wrap: wrap; }
        .agent-group-toggle {
            display: flex; align-items: center; gap: 10px;
            min-width: 0; padding: 0; border: 0; background: none;
            color: inherit; font: inherit; cursor: pointer;
        }
        .agent-chevron { font-size: 10px; }
        .agent-group.collapsed .agent-chevron { transform: rotate(-90deg); }
        .agent-sessions[hidden] { display: none; }
        .agent-state-counts {
            display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto;
            font-size: 12px; color: var(--text-muted);
        }
        #sessions-list .agent-header .agent-open-all-btn { margin-left: 0; }
        .agent-state-counts > span { display: inline-flex; align-items: center; gap: 5px; }
        .agent-offline-label {
            font-size: 11px; color: var(--text-muted); padding: 1px 6px;
            border-radius: 8px; box-shadow: inset 0 0 0 1px var(--surface-muted);
        }
        #session-state-filter-bar {
            display: flex; flex-wrap: wrap; gap: 3px; width: fit-content;
            margin: 12px 0; padding: 3px; border: 1px solid var(--border);
            border-radius: 7px; background: var(--bg-secondary);
        }
        .session-state-filter {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 10px; border: 0; border-radius: 5px;
            background: none; color: var(--text-secondary); font: inherit;
            font-size: 12px; cursor: pointer;
        }
        .session-state-filter.active, .session-state-filter:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .session-triage { margin-bottom: 24px; }
        .session-triage[hidden] { display: none; }
        .session-triage-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
        .session-triage-header h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
        .session-triage-next, .session-triage-more {
            background: none; border: 1px solid var(--border); border-radius: 6px;
            color: var(--text-secondary); padding: 6px 12px; font: inherit;
            font-size: 12px; cursor: pointer;
        }
        .session-triage-next { margin-left: auto; color: var(--wait-warn); }
        .session-triage-more { border: 0; margin-top: 4px; }
        .session-triage-queue { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        .session-triage-item {
            display: grid; grid-template-columns: 86px minmax(0, 1fr) 12px;
            align-items: center; gap: 18px; width: 100%; padding: 13px 16px;
            border: 0; border-left: 3px solid var(--warning); border-bottom: 1px solid var(--border);
            background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 12%, var(--bg-secondary)), var(--bg-secondary) 55%);
            color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
        }
        .session-triage-item:last-child { border-bottom: 0; }
        .session-triage-item:hover { filter: brightness(1.08); }
        .session-triage-age { display: flex; flex-direction: column; gap: 3px; }
        .session-triage-age strong { font: 600 20px ui-monospace, monospace; color: var(--wait-warn); }
        .session-triage-age small { font-size: 10px; color: var(--text-muted); }
        .session-triage-body { min-width: 0; }
        .session-triage-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
        .session-triage-title strong { font: 600 13px ui-monospace, monospace; overflow-wrap: anywhere; }
        .session-triage-title > span { font-size: 12px; color: var(--wait-warn); }
        .session-triage-context { display: block; margin-top: 3px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .session-card-menu { position: relative; }
        .session-menu-toggle { display: none; }
        .session-card:focus-visible, .agent-group-toggle:focus-visible,
        .session-state-filter:focus-visible, .session-triage button:focus-visible,
        .session-menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        @media (min-width: 769px) {
            #sessions-list { display: flex; flex-direction: column; gap: 8px; }
            .agent-sessions { gap: 0; padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
            .session-card {
                display: grid;
                grid-template-columns: minmax(180px, 240px) minmax(80px, 1fr) max-content 88px max-content;
                align-items: center; gap: 12px; height: 40px; padding: 0 14px;
                border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
            }
            .session-card:last-child { border-bottom: 0; }
            .session-card:hover { background: var(--bg-tertiary); }
            .session-card .session-header, .session-card .session-summary-row { display: contents; }
            .session-card .session-identity {
                grid-column: 1; grid-row: 1; display: flex; align-items: center;
                gap: 8px; min-width: 0; overflow: hidden;
            }
            .session-card .session-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 12px ui-monospace, monospace; }
            .session-card .session-summary-status { font-size: 9px; margin: 0; flex: none; }
            .session-card .session-summary-text {
                grid-column: 2; grid-row: 1; display: block; min-width: 0;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-style: normal;
            }
            .session-list-needs_you .session-summary-text { color: var(--wait-warn); }
            .session-card .session-metadata-badges {
                grid-column: 3; grid-row: 1; display: flex; align-items: center;
                flex-wrap: nowrap; gap: 12px; max-width: none;
            }
            .session-card .session-metadata-badges > * { flex: 0 0 auto; white-space: nowrap; }
            /* Preserve the Phase 1 tooltip relocation for secondary metadata. */
            .session-card .session-owner-badge, .session-card .session-work-badge,
            .session-card .session-usage, .session-card .session-open-badge,
            .session-card .session-path { display: none; }
            .session-card .session-provider { background: none; padding: 0; font: 11px ui-monospace, monospace; color: var(--text-muted); }
            .session-card .session-status { padding: 0; background: none; color: var(--text-secondary); font-size: 11px; }
            .session-card .session-status.status-running { color: var(--success); }
            .session-card .session-status.status-waiting { color: var(--wait-warn); }
            .session-card .session-status.status-offline { color: var(--text-muted); box-shadow: none; }
            .session-card .session-last-activity {
                grid-column: 4; grid-row: 1; display: block; margin: 0; font-size: 10px;
                white-space: nowrap; text-align: right;
            }
            .session-card-menu, .session-card > .session-card-actions { grid-column: 5; grid-row: 1; }
            .session-menu-toggle {
                display: block; width: 28px; height: 28px; border: 0; border-radius: 5px;
                background: none; color: var(--text-secondary); font: inherit; cursor: pointer;
            }
            .session-menu-toggle:hover { background: var(--bg-primary); }
            .session-card .session-card-actions { display: flex; gap: 3px; }
            .session-card .session-card-actions button { font-size: 11px; padding: 3px 5px; }
            .session-card-menu .session-card-actions {
                display: none; position: absolute; right: 0; top: 30px;
                width: max-content; min-width: 150px; padding: 5px;
            }
            .session-card-menu .session-card-actions button {
                display: block; width: 100%; padding: 7px 10px; text-align: left;
                background: none; font-size: 12px;
            }
        }
        @media (max-width: 768px) {
            .session-triage-item { grid-template-columns: 54px minmax(0, 1fr) 10px; gap: 10px; padding: 12px 10px; }
            .session-triage-age strong { font-size: 17px; }
            .session-state-filter { padding: 6px; }
            .session-card-menu .session-card-actions.ui-menu {
                display: flex !important; flex-direction: row; position: static; box-shadow: none;
                padding: 0; border: 0; background: none; min-width: 0;
            }
            .session-card-menu .ui-menu-item { width: auto; }
            /* A live card has no inline actions: its ⋯ opens the session menu,
               the same one as a tab or a rail row, so it has to be tappable. */
            .session-card-menu-live { display: flex; justify-content: flex-end; margin-top: 6px; }
            .session-card-menu-live > .session-menu-toggle-live {
                display: block; min-width: 44px; min-height: 32px; padding: 0 10px;
                border: 1px solid var(--border); border-radius: 5px;
                background: var(--bg-tertiary); color: var(--text-secondary); font: inherit; cursor: pointer;
            }
            #sessions-list .agent-group { gap: 0; }
            #sessions-list .agent-header { padding: 10px; }
            #sessions-list .agent-sessions { gap: 0; }
        }

        .agent-open-all-btn {
            font-size: 0.7rem;
            padding: 2px 8px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
        }

        .agent-header .agent-open-all-btn {
            margin-left: auto;
        }

        .agent-open-all-btn:disabled {
            opacity: 0.4;
            cursor: default;
        }

        .agent-open-all-btn:hover:not(:disabled) {
            filter: brightness(1.2);
        }

        /* Keep the desktop host column in the viewport while each pane scrolls. */
        #sessions-view { position: relative; min-height: 0; overflow-y: hidden; }
        .sessions-content { margin-left: 248px; min-width: 0; height: 100%; overflow-y: auto; }
        #sessions-sidebar {
            position: absolute; top: 0; bottom: 0; left: 0; width: 224px;
            border-right: 1px solid var(--border); padding: 8px 16px 24px;
            display: flex; flex-direction: column; gap: 28px;
            overflow-y: auto; scrollbar-width: thin;
        }
        #sessions-sidebar h2 { font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 0 8px 10px; }
        #agent-filter-bar { display: flex; flex-direction: column; gap: 3px; }
        #agent-filter-bar .agent-filter-pill {
            display: flex; align-items: center; gap: 8px; width: 100%;
            padding: 8px; border: 0; border-radius: 6px; font-size: 13px;
            background: transparent; color: var(--text-secondary); text-align: left;
        }
        #agent-filter-bar .agent-filter-pill:hover, #agent-filter-bar .agent-filter-pill.active {
            background: var(--bg-tertiary); color: var(--text-primary);
        }
        .host-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .host-counts { display: flex; gap: 5px; margin-left: auto; }
        .sidebar-usage-button {
            background: none; color: var(--accent); border: 0; padding: 10px 8px;
            text-align: left; font: inherit; font-size: 12px; cursor: pointer;
        }
        .quota-empty { color: var(--text-muted); font-size: 12px; margin: 8px; }
        .quota-strip:not(:empty) + .quota-empty { display: none; }

        #session-origin-filter-bar {
            display: flex;
            gap: 7px;
            padding: 4px 0 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .session-origin-filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        .session-origin-filter-pill:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .session-origin-filter-pill.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .session-origin-filter-count {
            min-width: 1.25em;
            padding: 1px 5px;
            border-radius: 10px;
            background: rgba(127, 127, 127, 0.2);
            font-size: 10px;
            text-align: center;
        }

        .agent-filter-pill {
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }

        .agent-filter-pill:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .agent-filter-pill.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .session-work-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
            border-radius: 10px;
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
        }

        .session-work-badge.unread {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 18%, transparent);
            color: var(--text-primary);
        }

        .session-work-badge.agent-created,
        .session-work-badge.muted {
            color: var(--text-muted);
            border-color: var(--border);
        }

        .session-work-badge.sync-error {
            color: var(--error);
            border-color: var(--error);
        }

        .recover-all-btn {
            font-size: 0.7rem;
            padding: 2px 8px;
            background: var(--warning, #e6a817);
            color: #000;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: auto;
            font-weight: 600;
        }

        .recover-all-btn:hover {
            filter: brightness(1.1);
        }

        .session-card:hover {
            border-color: var(--accent);
        }

        .session-card:active {
            transform: scale(0.98);
        }

        .session-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 8px;
        }

        .session-identity {
            display: flex;
            align-items: flex-start;
            min-width: 0;
            flex: 1 1 auto;
        }

        .session-metadata-badges {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 0 1 auto;
            flex-wrap: wrap;
            gap: 4px;
            min-width: 0;
            max-width: 62%;
        }

        .session-name {
            min-width: 0;
            font-weight: 600;
            font-size: 1rem;
        }

        .session-provider {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            background: var(--bg-tertiary);
            /* Muted on --bg-tertiary measured 1.44:1 — effectively invisible,
               so you could not tell Claude sessions from Codex ones at a
               glance. No "muted" value can reach 4.5:1 against #414868 (the
               brightest tested, #959ec9, still only manages 3.41), so the chip
               takes --text-secondary instead: 4.78:1 on the same background,
               with the chip still distinct from the --bg-secondary card. */
            color: var(--text-secondary);
            text-transform: capitalize;
        }

        .session-usage {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            background: var(--bg-tertiary);
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            cursor: help;
        }
        .session-usage.usage-warm { color: var(--warning); }
        .session-usage.usage-hot  { color: var(--error); }

        .session-compactions {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            flex: 0 0 auto;
            font-size: 10px;
            line-height: 1;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            color: var(--warning);
            white-space: nowrap;
        }

        .quota-strip { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
        .quota-strip:empty { display: none; }
        .quota-provider { display: flex; flex-direction: column; gap: 2px; }
        .quota-provider-name { margin: 0 8px 2px; font-size: 12px; font-weight: 600; color: var(--text-primary); }
        .quota-row {
            display: flex; align-items: center; gap: 6px; padding: 4px 8px;
            border: 1px solid transparent; border-radius: 6px; color: var(--text-secondary);
            cursor: help; font-variant-numeric: tabular-nums; white-space: nowrap;
        }
        .quota-row:hover { background: var(--bg-secondary); }
        .quota-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
        .quota-identity { display: flex; flex-direction: column; min-width: 0; }
        .quota-account-email { overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
        .quota-account-email + .quota-hosts { font-size: 11px; color: var(--text-muted); }
        .quota-hosts { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .quota-value { margin-left: auto; font-weight: 600; color: var(--text-primary); }
        .quota-row .quota-status { margin-left: 0; }
        .quota-ok .quota-dot { background: var(--success); }
        .quota-low .quota-dot, .quota-paid .quota-dot { background: var(--warning); }
        .quota-low .quota-value, .quota-paid .quota-value { color: var(--warning); }
        .quota-out .quota-dot { background: var(--error); }
        .quota-out .quota-value { color: var(--error); }
        .quota-row.quota-stale .quota-value { color: var(--text-muted); }

        .quota-status {
            border: 0;
            padding: 0;
            background: transparent;
            color: var(--warning);
            font: inherit;
            line-height: 1;
            cursor: pointer;
        }
        .quota-status:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 50%;
        }

        .usage-totals {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }
        @media (max-width: 600px) {
            .usage-totals { grid-template-columns: repeat(2, 1fr); }
        }
        .usage-total-card {
            background: var(--bg-tertiary);
            padding: 10px 14px;
            border-radius: 8px;
        }
        .usage-total-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .usage-total-value {
            font-size: 1.4rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            margin-top: 2px;
        }
        .usage-tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 12px;
        }
        .usage-tab {
            background: transparent;
            border: none;
            padding: 8px 14px;
            color: var(--text-muted);
            font-size: 0.85rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }
        .usage-tab.active {
            color: var(--text-primary);
            border-bottom-color: var(--accent);
        }
        .usage-tab:hover { color: var(--text-primary); }
        .usage-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
            font-variant-numeric: tabular-nums;
        }
        .usage-table th, .usage-table td {
            padding: 6px 10px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        .usage-table th { color: var(--text-muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; }
        .usage-table td.num, .usage-table th.num { text-align: right; }
        .usage-table .session-link {
            color: var(--accent);
            cursor: pointer;
        }
        .usage-table .path-cell {
            color: var(--text-muted);
            font-size: 0.8rem;
            max-width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .session-status {
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
        }

        .status-running { background: var(--accent); color: var(--text-on-accent); }
        .status-waiting { background: var(--warning); color: var(--text-on-warning); }
        .status-stopped { background: var(--surface-muted); color: var(--text-on-muted); }
        .status-offline { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--surface-muted); }
        .status-error { background: var(--error); color: var(--text-on-error); }
        .status-starting { background: var(--success); color: var(--text-on-success); }

        .session-open-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;
            background: rgba(99, 102, 241, 0.15);
            color: var(--accent);
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .session-path {
            font-size: 0.875rem;
            color: var(--text-muted);
            word-break: break-all;
        }

        .session-summary-status {
            font-size: 1rem;
            margin-right: 8px;
        }

        .session-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            min-height: 1.2em;
        }

        .session-summary-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-style: italic;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .session-last-activity {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 12px;
            white-space: nowrap;
        }

        .empty-state {
            text-align: center;
            padding: 48px 16px;
            color: var(--text-muted);
        }

        .empty-state h2 {
            font-size: 1.25rem;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        /* Session detail view */
        #session-view {
            display: none;
            flex-direction: column;
            flex: 1;
            min-height: 0; /* Allow shrinking */
            overflow: hidden;
        }

        .session-toolbar {
            background: var(--bg-secondary);
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            gap: 16px;
        }

        /* Live latency indicator */
        .latency-indicator {
            font-size: 0.7rem;
            font-family: monospace;
            padding: 2px 6px;
            border-radius: 3px;
            background: var(--bg-primary);
            color: var(--text-muted);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .latency-indicator.visible { opacity: 1; }
        .latency-indicator.ok { color: var(--success); }
        .latency-indicator.warn { color: var(--warning); }
        .latency-indicator.slow { color: var(--error); }

        /* Git status panel */
        .git-panel {
            background: var(--bg-secondary);
            padding: 8px 16px;
            border-bottom: 1px solid var(--border);
            display: none;
            align-items: center;
            gap: 12px;
            font-size: 0.85rem;
        }

        .git-panel.visible {
            display: flex;
        }

        .git-branch {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--accent);
            font-weight: 500;
        }

        .git-branch svg {
            width: 14px;
            height: 14px;
        }

        .git-stats {
            display: flex;
            gap: 12px;
            color: var(--text-muted);
        }

        .git-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .git-stat.staged { color: var(--success); }
        .git-stat.modified { color: var(--warning); }
        .git-stat.untracked { color: var(--text-muted); }

        .git-toggle {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 0.75rem;
        }

        .git-toggle:hover {
            color: var(--text-primary);
        }

        .git-files {
            display: none;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .git-files.visible {
            display: block;
        }

        .git-file {
            padding: 6px 16px;
            font-size: 0.8rem;
            font-family: monospace;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .git-file:hover {
            background: var(--bg-secondary);
        }

        .git-file-status {
            font-family: monospace;
            font-weight: bold;
            width: 16px;
            flex-shrink: 0;
            text-align: center;
        }

        .git-file-status.staged { color: var(--success); }
        .git-file-status.modified { color: var(--warning); }
        .git-file-status.untracked { color: var(--text-muted); }

        .git-file-name {
            font-family: monospace;
            font-size: 0.85rem;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* File explorer panel */
        .file-explorer {
            display: none;
            width: 220px;
            min-width: 150px;
            max-width: 400px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }

        .file-explorer.visible {
            display: flex;
            flex-direction: column;
        }

        .file-explorer-header {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-tertiary);
        }

        .file-explorer-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .file-explorer-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1rem;
            line-height: 1;
        }

        .file-explorer-close:hover {
            color: var(--text-primary);
        }

        .file-explorer-tree {
            flex: 1;
            overflow-y: auto;
            padding: 4px 0;
        }

        .file-tree-item {
            display: flex;
            align-items: center;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 0.8rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-tree-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .file-tree-item.directory {
            color: var(--accent);
        }

        .file-tree-icon {
            width: 16px;
            margin-right: 6px;
            flex-shrink: 0;
            text-align: center;
        }

        .file-tree-name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-tree-loading {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
        }

        .file-tree-empty {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-style: italic;
        }

        .file-tree-error {
            padding: 12px;
            text-align: center;
            color: var(--error);
            font-size: 0.8rem;
        }

        /* Performance metrics panel */
        .perf-panel {
            display: none;
            width: 260px;
            min-width: 200px;
            max-width: 400px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }

        .perf-panel.visible {
            display: flex;
            flex-direction: column;
        }

        .perf-panel-header {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-tertiary);
        }

        .perf-panel-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .perf-panel-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1rem;
            line-height: 1;
        }

        .perf-panel-close:hover {
            color: var(--text-primary);
        }

        .perf-panel-body {
            flex: 1;
            overflow-y: auto;
            font-size: 0.75rem;
        }

        .perf-section {
            border-bottom: 1px solid var(--border);
            padding: 8px 12px;
        }

        .perf-section-title {
            text-transform: uppercase;
            font-size: 0.65rem;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .perf-stat-row {
            display: flex;
            justify-content: space-between;
            padding: 1px 0;
        }

        .perf-stat-label {
            color: var(--text-muted);
        }

        .perf-stat-value {
            color: var(--text-primary);
            font-family: monospace;
        }

        .perf-stat-value.slow { color: var(--error); }
        .perf-stat-value.warn { color: #e0af68; }
        .perf-stat-value.ok { color: var(--success); }

        .perf-bar {
            display: flex;
            height: 14px;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 4px;
            gap: 1px;
        }

        .perf-bar-seg {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            color: #fff;
            min-width: 0;
            overflow: hidden;
        }

        .perf-actions {
            padding: 8px 12px;
            display: flex;
            gap: 4px;
        }

        .perf-actions button {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            cursor: pointer;
        }

        .perf-actions button:hover {
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        .perf-no-data {
            padding: 20px 12px;
            text-align: center;
            color: var(--text-muted);
            font-style: italic;
        }

        /* File preview modal */
        .file-preview-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .file-preview-modal.visible {
            display: flex;
        }

        .file-preview-content {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            width: 100%;
            max-width: 900px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .file-preview-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-secondary);
        }

        .file-preview-path {
            font-family: monospace;
            font-size: 0.85rem;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-preview-info {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 12px;
            flex-shrink: 0;
        }

        .file-preview-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            font-size: 1.2rem;
            line-height: 1;
            margin-left: 12px;
        }

        .file-preview-close:hover {
            color: var(--text-primary);
        }

        .file-preview-body {
            flex: 1;
            overflow: auto;
            padding: 12px 16px;
        }

        .file-preview-code {
            font-family: monospace;
            font-size: 0.8rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-all;
            color: var(--text-primary);
            margin: 0;
        }

        .file-preview-error {
            color: var(--error);
            text-align: center;
            padding: 20px;
        }

        .file-preview-truncated {
            padding: 8px 16px;
            background: var(--bg-tertiary);
            color: var(--warning);
            font-size: 0.75rem;
            text-align: center;
        }

        /* Terminal area with optional file explorer */
        .terminal-area {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .back-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 0.875rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border-radius: 6px;
            transition: all 0.15s;
        }

        .back-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        .session-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            flex: 1;
            text-align: center;
        }

        /* Which agent and which provider is answering, next to the session
           title. Sized to lose the agent name before the provider name and
           the provider name before the badges, so the most identifying part
           is the last to go as the header narrows. */
        .session-setup {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            /* Shrinks here, not on a phone. The dense desktop toolbar is a
               fixed-width rail, and a pill that refuses to shrink drove the
               session title to zero width and made the row scroll. On
               desktop the tooltip is the fallback, so the pill gives way; on
               mobile there is no hover at all, so the rule below pins it and
               the title -- which ellipsizes gracefully everywhere already --
               gives way instead. */
            flex: 0 1 auto;
            max-width: 58%;
            min-width: 0;
            padding: 2px 7px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-primary);
            color: var(--text-secondary);
            font-size: 0.72rem;
            line-height: 1.5;
            white-space: nowrap;
        }

        .session-setup .tab-agent {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: #0f0f0f;
            background: #a0a0b0;
            flex: 0 0 auto;
        }

        /* Never clipped: it is two syllables, and half of it is not a
           provider. If anything inside the pill has to give, it is the host
           name beside it. */
        .session-setup-provider {
            flex: 0 0 auto;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
        }

        .session-setup-agent {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .session-setup-agent::before {
            content: "·";
            margin-right: 5px;
        }

        .session-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            position: relative;
        }

        .session-actions button {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }

        .session-actions button:hover {
            background: var(--bg-primary);
            border-color: var(--text-muted);
        }

        /* Session ownership / foreign-write safety. */
        .session-owner-banner {
            display: none;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 6px 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--warning), var(--border) 42%);
            background: color-mix(in srgb, var(--warning), var(--bg-primary) 88%);
            color: var(--text-primary);
            font-size: 0.8rem;
        }

        .session-owner-banner.visible { display: flex; }

        /* The viewed session's provider is out of quota on its agent. */
        .session-quota-banner,
        .session-crash-banner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
            padding: 6px 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--error), var(--border) 42%);
            background: color-mix(in srgb, var(--error), var(--bg-primary) 90%);
            color: var(--text-primary);
            font-size: 0.8rem;
        }
        /* The display above would otherwise override the hidden attribute. */
        .session-quota-banner[hidden] { display: none; }
        .session-crash-banner[hidden] { display: none; }
        .session-quota-actions { display: flex; flex-wrap: wrap; gap: 6px; }
        .session-quota-restart {
            padding: 3px 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.76rem;
            cursor: pointer;
        }
        .session-quota-restart:hover { background: var(--bg-tertiary); }
        .tab-dropdown-item.provider-quota-blocked,
        .selection-context-menu .tab-dropdown-item.provider-quota-blocked {
            white-space: normal;
            line-height: 1.35;
        }
        .provider-quota-note {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 0.72rem;
        }
        .session-owner-banner.system-owner {
            border-bottom-color: color-mix(in srgb, var(--accent), var(--border) 58%);
            background: color-mix(in srgb, var(--accent), var(--bg-primary) 91%);
        }
        .session-owner-icon {
            display: inline-grid;
            place-items: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--warning), transparent 74%);
            color: var(--warning);
            font-weight: 800;
        }
        .system-owner .session-owner-icon {
            background: color-mix(in srgb, var(--accent), transparent 78%);
            color: var(--accent);
        }
        .session-owner-message {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 550;
        }
        .session-write-toggle {
            display: none;
            flex: 0 0 auto;
            align-items: center;
            gap: 7px;
            color: var(--text-secondary);
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
        }
        .session-write-toggle.visible { display: inline-flex; }
        .session-write-toggle input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .session-write-toggle-track {
            position: relative;
            width: 34px;
            height: 19px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-tertiary);
            transition: background 0.15s, border-color 0.15s;
        }
        .session-write-toggle-track > span {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: var(--surface-muted);
            transition: transform 0.15s, background 0.15s;
        }
        .session-write-toggle input:checked + .session-write-toggle-track {
            border-color: var(--error);
            background: color-mix(in srgb, var(--error), var(--bg-tertiary) 62%);
        }
        .session-write-toggle input:checked + .session-write-toggle-track > span {
            transform: translateX(15px);
            background: #fff;
        }
        .session-write-toggle input:focus-visible + .session-write-toggle-track {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .session-write-toggle input:disabled + .session-write-toggle-track {
            opacity: 0.55;
            cursor: wait;
        }
        .session-owner-badge,
        .tab-owner-badge {
            display: inline-flex;
            align-items: center;
            max-width: 130px;
            padding: 1px 6px;
            border: 1px solid color-mix(in srgb, var(--warning), var(--border) 40%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--warning), transparent 86%);
            color: color-mix(in srgb, var(--warning), var(--text-primary) 20%);
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .session-owner-badge.system,
        .tab-owner-badge.system {
            border-color: color-mix(in srgb, var(--accent), var(--border) 56%);
            background: color-mix(in srgb, var(--accent), transparent 90%);
            color: color-mix(in srgb, var(--accent), var(--text-primary) 18%);
        }
        .tab-owner-badge {
            justify-content: center;
            width: 14px;
            height: 14px;
            max-width: none;
            padding: 0;
            border-radius: 3px;
            font-size: 0.62rem;
            line-height: 1;
            flex: 0 0 14px;
        }
        body.session-readonly-active .terminal-container {
            border-color: color-mix(in srgb, var(--warning), var(--border) 38%);
        }
        body.session-readonly-active .sdk-input-bar,
        body.session-readonly-active .stream-input-container,
        body.session-readonly-active .mobile-input-bar,
        body.session-readonly-active .mobile-toolbar {
            opacity: 0.62;
        }

        .session-actions > button:first-child {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        .session-actions > button:first-child:hover {
            filter: brightness(1.1);
        }

        .session-actions .open-unopened-tabs-btn {
            background: color-mix(in srgb, var(--accent), var(--bg-tertiary) 30%);
            border-color: color-mix(in srgb, var(--accent), #fff 12%);
            color: white;
            padding: 6px 10px;
        }

        .session-actions .open-unopened-tabs-btn:hover {
            filter: brightness(1.08);
        }

        .session-actions button.warning {
            background: transparent;
            border-color: var(--warning);
            color: var(--warning);
        }

        .session-actions button.warning:hover {
            background: var(--warning);
            color: white;
        }

        .session-actions .btn-icon {
            margin-right: 4px;
        }

        .session-tools-menu {
            position: relative;
        }

        #session-tools-btn {
            min-width: 86px;
        }

        /* On mobile: hide text, show icon only, hide non-essential buttons. */
        @media (max-width: 768px) {
            .session-actions > button:not(:first-child) {
                display: none;
            }
        }

        .session-actions button.danger {
            background: transparent;
            border-color: var(--error);
            color: var(--error);
        }

        .session-actions button.danger:hover {
            background: var(--error);
            color: white;
        }

        /* Session tabs */
        .session-tabs-container {
            display: flex;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
            position: relative;
        }

        .session-tabs {
            display: flex;
            background: var(--bg-primary);
            overflow-x: auto;
            overflow-y: visible;
            scrollbar-width: thin;
            position: relative;
            flex: 1;
            min-width: 0;
        }

        /* Multi-line tabs on wide screens */
        @media (min-width: 1680px) {
            .session-tabs {
                flex-wrap: wrap;
                overflow-x: visible;
                width: 100%;
            }
            .session-tab {
                flex: 1 0 calc(100% / var(--session-tab-columns, 8));
                min-width: 0;
                border-bottom: 2px solid transparent;
            }
            .session-tab.active {
                border-bottom: 2px solid var(--accent);
            }
            .tab-overflow-btn {
                display: none !important;
            }
        }

        .tab-overflow-btn {
            display: none;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: none;
            border-left: 1px solid var(--border);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.875rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .tab-overflow-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .tab-overflow-btn.visible {
            display: flex;
        }

        .tab-overflow-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1000;
            width: clamp(320px, 34vw, 520px);
            max-width: calc(100vw - 24px);
            max-height: min(420px, 70vh);
            overflow-y: auto;
            display: none;
        }

        .tab-overflow-dropdown.show {
            display: block;
        }

        .tab-overflow-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 9px 14px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-muted);
        }

        .tab-overflow-item-grouped {
            background: var(--tab-group-bg);
        }

        .tab-overflow-item-grouped::before {
            content: "";
            position: absolute;
            left: 5px;
            top: 6px;
            bottom: 6px;
            width: 3px;
            border-radius: 999px;
            background: var(--tab-group-color);
            pointer-events: none;
        }

        .tab-overflow-link-marker {
            flex: 0 0 auto;
            font-size: 0.78rem;
            line-height: 1;
            opacity: 0.9;
        }

        .tab-overflow-text {
            display: flex;
            min-width: 0;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 1px;
        }

        .tab-overflow-name,
        .tab-overflow-linked-parent {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tab-overflow-linked-parent {
            font-size: 0.7rem;
            line-height: 1.15;
            color: var(--text-muted);
            opacity: 0.8;
        }

        .tab-overflow-item:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .tab-overflow-item.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-left: 2px solid var(--accent);
        }

        .tab-overflow-item .tab-status {
            flex-shrink: 0;
        }

        .tab-overflow-item .tab-overflow-provider {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            pointer-events: none;
            background: var(--surface-muted);
        }
        .tab-overflow-item .tab-overflow-provider[data-provider="claude"] { background: #f2a15a; }
        .tab-overflow-item .tab-overflow-provider[data-provider="codex"] { background: #64c3ff; }
        .tab-overflow-item .tab-overflow-provider[data-provider="openai"] { background: #64c3ff; }
        .tab-overflow-item .tab-overflow-provider[data-provider="cursor"] { background: #d7c36a; }
        .tab-overflow-item .tab-overflow-provider[data-provider="gemini"] { background: #7ad38b; }
        .tab-overflow-item .tab-overflow-provider[data-provider="antigravity"] { background: #ff7aa8; }
        .tab-overflow-item .tab-overflow-provider[data-provider="grok"] { background: #b08cf2; }
        .tab-overflow-item .tab-overflow-provider[data-provider="qwen"] { background: #7b6dff; }

        /* In the row's flow, after the name. Positioned over a fixed padding
           it covered up to 32px of the name whenever the chip ("NEEDS OK 3h20m")
           was wider than the space reserved for it. */
        .tab-overflow-wait {
            flex: 0 0 auto;
            margin-left: auto;
            white-space: nowrap;
            font-size: 0.7rem;
            color: var(--text-muted);
            opacity: 0.75;
            border: 1px solid transparent;
            border-radius: 4px;
            padding: 1px 5px;
            /* Hit-testable so the title tooltip (auto-yes state) is reachable on hover.
               Clicks still bubble to the .tab-overflow-item onclick that switches tabs. */
            background: color-mix(in srgb, var(--bg-primary), var(--bg-secondary) 15%);
        }

        .tab-overflow-item:hover .tab-overflow-wait,
        .tab-overflow-item.active .tab-overflow-wait {
            background: color-mix(in srgb, var(--bg-primary), var(--bg-tertiary) 20%);
        }
        /* Auto-yes state is now shown by .wait-ay-dot, not by recoloring the
           whole badge (badge color encodes staleness). */

        .session-tab {
            display: flex;
            flex-direction: column;
            padding: 6px 12px 4px;
            background: var(--bg-secondary);
            border: none;
            border-right: 1px solid var(--border);
            border-bottom: 2px solid transparent;
            color: var(--text-muted);
            cursor: pointer;
            white-space: nowrap;
            font-size: 0.875rem;
            transition: background 0.2s, color 0.2s;
            position: relative;
        }

        .tab-main-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .session-activity-btn {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 7px;
            padding: 2px 4px;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: var(--text-secondary);
            font: inherit;
            font-size: 0.68rem;
            line-height: 1.4;
            cursor: pointer;
        }

        .session-activity-btn > span { display: inline-flex; align-items: center; gap: 3px; }
        .session-activity-btn:hover,
        .session-activity-btn[aria-expanded="true"] { background: var(--bg-tertiary); color: var(--accent); }
        .session-activity-btn svg,
        .session-activity-pr svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: 0 0 auto; }

        .session-activity-popover {
            position: fixed;
            z-index: 11000;
            width: min(360px, calc(100vw - 16px));
            max-height: min(560px, calc(100dvh - 16px));
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            box-shadow: 0 8px 28px #0004;
            font-size: 0.8rem;
        }

        .session-activity-heading { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
        .session-activity-popover:focus { outline: none; }
        .session-activity-heading strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .session-activity-heading button { padding: 0 4px; border: 0; background: transparent; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; }
        .session-activity-popover section { border-top: 1px solid var(--border); padding: 10px 12px 4px; }
        .session-activity-popover h3 { display: flex; gap: 6px; margin: 0 0 6px; color: var(--text-muted); font-size: 0.68rem; font-weight: 600; }
        .session-activity-popover h3 span { font-weight: 400; }
        .session-activity-item { padding: 5px 0 10px; min-width: 0; }
        .session-activity-pr { display: flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; }
        .session-activity-pr strong { overflow-wrap: anywhere; }
        .session-activity-pr:hover strong { text-decoration: underline; }
        .session-activity-pr > span { margin-left: auto; color: var(--text-muted); }
        .session-activity-title { margin-top: 4px; overflow-wrap: anywhere; line-height: 1.4; }
        .session-activity-note { margin-top: 3px; color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; overflow-wrap: anywhere; }
        .session-activity-popover > .session-activity-note,
        .session-activity-error { padding: 0 12px 10px; }
        .session-activity-error { color: var(--error); }
        .session-activity-message { display: flex; gap: 12px; align-items: flex-start; }
        .session-activity-message > div { flex: 1; min-width: 0; }
        .session-activity-message-name { display: block; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
        .session-activity-message-name:hover { text-decoration: underline; }
        .session-message-cancel { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: 0.7rem; cursor: pointer; }
        .session-message-cancel:hover { color: var(--error); border-color: var(--error); }
        .session-message-cancel:disabled { opacity: 0.5; cursor: wait; }
        @media (pointer: coarse) {
            .session-activity-btn,
            .session-message-cancel,
            .session-activity-heading button,
            .session-activity-message-name { min-height: 32px; }
        }

        @media (max-width: 1679px) {
            .session-tab {
                flex: 0 0 clamp(180px, 16vw, 280px);
                min-width: 0;
                max-width: min(280px, 80vw);
                overflow: hidden;
            }

            .tab-main-row {
                min-width: 0;
                gap: 4px;
            }

            /* #646: in this range every tab has a fixed width and only its
               name can shrink, so each fixed-width mark came out of the name
               -- 9px of it on a 180px linked tab owned by someone else. Marks
               that are not showing stop holding space; the width no longer
               depends on content, which is all reserving it was for. */
            .session-tab .attention-indicator.is-reserved,
            .session-tab .auto-yes-indicator:not(.visible) {
                display: none;
            }
        }

        .tab-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .repotr-report-link,
        .current-session-report-link,
        .repotr-output-link {
            color: inherit;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 2px;
        }

        .repotr-report-link:hover,
        .current-session-report-link:hover,
        .repotr-output-link:hover {
            color: var(--accent);
            text-decoration-style: solid;
        }

        .tab-new-badge,
        .tab-overflow-new-badge {
            flex: 0 0 auto;
            padding: 1px 5px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--success), var(--bg-primary) 78%);
            border: 1px solid color-mix(in srgb, var(--success), var(--border) 35%);
            color: var(--success);
            font-size: 0.64rem;
            font-weight: 800;
            line-height: 1.15;
            text-transform: uppercase;
        }

        .tab-overflow-new-badge {
            margin-left: auto;
        }

        /* Dashboard session-card child marker (vertical list — nesting reads fine) */
        .session-child-marker {
            color: var(--text-secondary);
            opacity: 0.7;
            font-size: 0.85em;
        }
        /* Tab-bar parent/child clusters: a per-group colored left edge (color set
           inline from the group hue) + a 🔗 marker on children. No indentation —
           adjacency + color carries grouping in the wrapping multi-row bar. */
        .session-tab-grouped {
            border-left: 3px solid transparent;
        }
        .tab-link-marker {
            font-size: 0.8em;
            opacity: 0.85;
            margin-right: 1px;
        }

        .tab-subtitle {
            font-size: 0.7rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
            line-height: 1.3;
            padding-top: 2px;
        }

        .session-tab:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .session-tab.dragging {
            opacity: 0.5;
        }

        .session-tab.drag-over {
            border-left: 2px solid var(--accent);
        }

        .session-tab.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-bottom: 2px solid var(--accent);
        }

        .session-tab .tab-menu-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            opacity: 0.6;
        }

        .session-tab .tab-menu-btn:hover {
            opacity: 1;
            background: var(--bg-secondary);
        }

        .session-tab.tab-zombie {
            border-bottom-color: var(--error);
            background: color-mix(in srgb, var(--error), var(--bg-secondary) 86%);
        }

        .session-tab.tab-zombie.active {
            border-bottom-color: var(--error);
            background: color-mix(in srgb, var(--error), var(--bg-tertiary) 80%);
        }

        .session-tab.tab-zombie .tab-status,
        .tab-overflow-item.tab-zombie .tab-status {
            background: var(--error);
            animation: none;
        }

        .tab-zombie-close,
        .tab-overflow-zombie-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
            border: 1px solid color-mix(in srgb, var(--error), #fff 18%);
            border-radius: 5px;
            background: var(--error);
            color: #fff;
            font-size: 16px;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
        }

        .tab-zombie-close:hover,
        .tab-overflow-zombie-close:hover {
            filter: brightness(1.08);
        }

        .tab-overflow-zombie-close {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .tab-overflow-item.tab-zombie .tab-overflow-wait {
            right: 42px;
        }

        .tab-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1000;
            width: auto;
            min-width: 220px;
            max-width: 320px;
            display: none;
        }

        .tab-dropdown.show {
            display: block;
        }

        .tab-dropdown-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.8rem;
            white-space: nowrap;
        }

        .tab-dropdown-item:hover {
            background: var(--bg-tertiary);
        }

        .tab-dropdown-item.warning {
            color: var(--warning);
        }

        .tab-dropdown-item.danger {
            color: var(--error);
        }

        .tab-dropdown-item.tab-link-parent-item {
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 240px;
            overflow: hidden;
        }

        .tab-link-parent-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tab-link-parent-meta {
            flex: 0 0 auto;
            color: var(--text-muted);
            font-size: 0.7rem;
        }

        .tab-dropdown-item.disabled {
            color: var(--text-muted);
            cursor: default;
        }

        .tab-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 2px 0;
        }

        .tab-dropdown-item.has-submenu {
            position: relative;
            padding-right: 22px;
        }

        .tab-dropdown-item.has-submenu .submenu-arrow {
            position: absolute;
            right: 8px;
            top: 6px;
            opacity: 0.7;
        }

        .tab-dropdown-submenu {
            position: absolute;
            top: 0;
            left: calc(100% + 4px);
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            min-width: 140px;
            max-width: min(300px, calc(100vw - 24px));
            display: none;
            z-index: 1001;
        }

        /* A provider's full model catalogue: scroll it rather than run off
           the screen. The scroll box is an inner list, because overflow on
           the submenu itself clips its ::before hover bridge and the menu
           closes while the pointer crosses the gap. */
        .launch-more-models-list {
            max-height: min(60vh, 520px);
            overflow-y: auto;
        }

        /* Invisible bridge to cover the gap between parent item and submenu */
        .tab-dropdown-submenu::before {
            content: '';
            position: absolute;
            top: 0;
            right: 100%;
            width: 8px;
            height: 100%;
        }

        .tab-dropdown[data-align="right"] .tab-dropdown-submenu {
            left: auto;
            right: calc(100% + 4px);
        }

        .tab-dropdown[data-align="right"] .tab-dropdown-submenu::before {
            right: auto;
            left: 100%;
        }

        .tab-dropdown-submenu.align-left {
            left: auto;
            right: calc(100% + 4px);
        }

        .tab-dropdown-submenu.align-left::before {
            right: auto;
            left: 100%;
        }

        /* Force a leftward-opening submenu (right-pinned menu) back rightward
           when it would clip the left edge. Scoped under data-align="right" too
           so it outranks that rule's specificity. */
        .tab-dropdown[data-align="right"] .tab-dropdown-submenu.align-right,
        .tab-dropdown-submenu.align-right {
            left: calc(100% + 4px);
            right: auto;
        }

        .tab-dropdown[data-align="right"] .tab-dropdown-submenu.align-right::before,
        .tab-dropdown-submenu.align-right::before {
            left: auto;
            right: 100%;
        }

        .tab-dropdown-item.has-submenu:hover > .tab-dropdown-submenu,
        .tab-dropdown-item.has-submenu.show-submenu > .tab-dropdown-submenu {
            display: block;
        }

        .tab-dropdown-item.has-submenu.show-submenu,
        .selection-context-menu .tab-dropdown-item.has-submenu.show-submenu {
            background: var(--accent);
            color: var(--text-on-accent);
        }

        .tab-dropdown-item.has-submenu.show-submenu > .submenu-arrow,
        .selection-context-menu .tab-dropdown-item.has-submenu.show-submenu > .submenu-arrow {
            color: var(--text-on-accent);
            opacity: 1;
        }

        /* Selection context menu (right-click on selected text) */
        .selection-toolbar {
            position: fixed;
            display: flex;
            gap: 1px;
            z-index: 1099;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            border: 1px solid var(--border);
            opacity: 0.85;
            transition: opacity 0.1s;
        }
        .selection-toolbar:hover { opacity: 1; }
        .selection-toolbar-btn {
            width: 22px;
            height: 22px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            border: none;
            padding: 0;
        }
        .selection-toolbar-btn:hover {
            background: var(--bg-tertiary);
        }
        .selection-toolbar-btn.copied {
            color: var(--accent, #4ade80);
        }
        /* Legacy class kept for mouseup ignore check */
        .selection-gear {
            /* marker class only */
        }

        .line-copy-btn {
            position: fixed;
            z-index: 1098;
            width: 20px;
            height: 18px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
            border-radius: 3px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.12s;
            pointer-events: none;
            box-shadow: 0 1px 4px rgba(0,0,0,0.25);
        }
        .line-copy-btn.visible {
            opacity: 0.7;
            pointer-events: auto;
        }
        .line-copy-btn:hover {
            opacity: 1;
            background: var(--bg-tertiary);
        }
        .line-copy-btn.copied {
            color: var(--accent, #4ade80);
        }
        .line-copy-btn.link-copy {
            width: auto;
            min-width: 20px;
            padding: 0 6px;
            font: 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            white-space: nowrap;
        }

        .url-copy-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            margin-left: 4px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 3px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            cursor: pointer;
            vertical-align: text-bottom;
        }
        .url-copy-btn:hover,
        .url-copy-btn.copied {
            color: var(--accent, #4ade80);
        }

        .pr-review-gear {
            cursor: pointer;
            font-size: 12px;
            color: var(--text-muted);
            /* Belt to the U+FE0E braces in the markup: where this property is
               supported it keeps the glyph monochrome even if a variation
               selector is ever dropped. An emoji-presentation gear is ~36%
               wider than the text form and overruns the slot beside the PR
               number, which is invisible on Linux and obvious on Windows. */
            font-variant-emoji: text;
        }
        .pr-review-gear:hover {
            color: var(--text-primary);
        }

        .selection-context-menu {
            position: fixed;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1100;
            min-width: 140px;
            max-width: 220px;
        }
        .selection-context-menu .tab-dropdown-item {
            padding: 6px 10px;
            cursor: pointer;
            font-size: 0.8rem;
            white-space: nowrap;
        }
        .selection-context-menu .tab-dropdown-item:hover {
            background: var(--bg-tertiary);
        }
        .selection-context-menu .tab-dropdown-divider {
            height: 1px;
            background: var(--border);
            margin: 2px 0;
        }
        .selection-context-menu .tab-dropdown-item.has-submenu {
            position: relative;
            padding-right: 22px;
        }
        .selection-context-menu .tab-dropdown-item.has-submenu .submenu-arrow {
            position: absolute;
            right: 8px;
            top: 6px;
            opacity: 0.7;
        }
        .selection-context-menu .tab-dropdown-submenu {
            position: absolute;
            top: 0;
            left: calc(100% + 4px);
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            min-width: 140px;
            max-width: 220px;
            display: none;
            z-index: 1101;
        }
        .selection-context-menu .tab-dropdown-submenu::before {
            content: '';
            position: absolute;
            top: 0;
            right: 100%;
            width: 8px;
            height: 100%;
        }
        .selection-context-menu .tab-dropdown-item.has-submenu:hover > .tab-dropdown-submenu,
        .selection-context-menu .tab-dropdown-item.has-submenu.show-submenu > .tab-dropdown-submenu {
            display: block;
        }

        @media (max-width: 768px), (hover: none), (pointer: coarse) {
            .tab-dropdown,
            .selection-context-menu {
                max-width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .tab-dropdown-item.has-submenu .submenu-arrow,
            .selection-context-menu .tab-dropdown-item.has-submenu .submenu-arrow {
                top: 0;
                right: 0;
                width: 34px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-primary);
                opacity: 0.9;
            }

            .tab-dropdown-submenu,
            .selection-context-menu .tab-dropdown-submenu {
                position: fixed;
                left: auto;
                right: auto;
                top: auto;
                min-width: 170px;
                max-width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                background: var(--bg-secondary);
                border-color: var(--accent);
                border-radius: 6px;
                box-shadow: 0 8px 24px rgba(0,0,0,0.45);
                z-index: 1102;
            }

            .tab-dropdown-submenu::before,
            .selection-context-menu .tab-dropdown-submenu::before {
                display: none;
            }

            .tab-dropdown-submenu .tab-dropdown-item,
            .selection-context-menu .tab-dropdown-submenu .tab-dropdown-item {
                padding: 8px 10px;
            }
        }

        .tab-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transform-origin: center;
        }

        @keyframes tab-status-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.7); }
        }

        .tab-status.running {
            background: var(--accent);
            animation: tab-status-pulse 1.3s ease-in-out infinite;
        }
        .tab-status.waiting { background: var(--warning); }
        .tab-status.stopped { background: var(--surface-muted); }
        .tab-status.starting,
        .tab-status.unknown { background: var(--surface-muted); }
        .tab-status.offline {
            background: transparent;
            box-shadow: inset 0 0 0 1.5px var(--surface-muted);
        }

        @media (prefers-reduced-motion: reduce) {
            .tab-status.running { animation: none; }
        }

        .session-tab .tab-provider,
        .tab-provider {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            color: var(--text-muted);
        }
        .tab-provider svg {
            width: 14px;
            height: 14px;
            display: block;
        }
        .tab-provider[data-provider="claude"] { color: #f2a15a; }
        .tab-provider[data-provider="codex"] { color: #64c3ff; }
        .tab-provider[data-provider="openai"] { color: #64c3ff; }
        .tab-provider[data-provider="cursor"] { color: #d7c36a; }
        .tab-provider[data-provider="gemini"] { color: #7ad38b; }
        .tab-provider[data-provider="antigravity"] { color: #ff7aa8; }
        .tab-provider[data-provider="grok"] { color: #b08cf2; }
        .tab-provider[data-provider="qwen"] { color: #7b6dff; }

        .session-tab .tab-agent,
        .tab-overflow-item .tab-agent {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: #0f0f0f;
            background: #a0a0b0;
            flex: 0 0 auto;
        }

        /* Attention indicator for tabs needing user attention */
        .session-tab.needs-attention {
            border-color: var(--warning);
            animation: pulse-attention 2s infinite;
        }
        .session-tab .attention-indicator {
            color: var(--warning);
            font-weight: bold;
            font-size: 0.9rem;
            margin-right: 2px;
        }
        @keyframes pulse-attention {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Auto-yes indicator — always reserves space to prevent tab width changes */
        .session-tab .auto-yes-indicator {
            color: var(--success);
            font-weight: bold;
            font-size: 0.9rem;
            margin-left: 4px;
            visibility: hidden;
        }
        .session-tab .auto-yes-indicator.visible {
            visibility: visible;
        }

        /* Waiting duration badge on tabs — positioned absolute so it never changes tab width */
        .session-tab .wait-badge {
            font-size: 0.68rem;
            font-weight: 650;
            line-height: 1.15;
            padding: 1px 5px;
            border-radius: 4px;
            margin-left: 0;
            background: color-mix(in srgb, var(--bg-primary), var(--bg-secondary) 15%);
            border: 1px solid color-mix(in srgb, var(--border), var(--text-secondary) 24%);
            color: var(--text-primary);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
            white-space: nowrap;
            position: absolute;
            right: 7px;
            bottom: 5px;
        }
        .session-tab .wait-badge.connection-issue-badge {
            position: static;
            flex: 0 0 auto;
        }
        .session-tab:has(.wait-badge) .tab-subtitle {
            box-sizing: border-box;
            padding-right: 88px;
        }
        /* Wait-badge staleness ramp. Color/weight come from theme-aware
           --wait-* tokens so light theme stays legible (dark-theme hexes baked
           into markup were invisible on the light badge). Parent-scoped
           so they beat the base `.session-tab .wait-badge` / overflow color. */
        .session-tab .wait-badge.wait-age-fresh,
        .tab-overflow-item .tab-overflow-wait.wait-age-fresh { color: var(--wait-fresh); opacity: 1; font-weight: 650; }
        .session-tab .wait-badge.wait-age-mid,
        .tab-overflow-item .tab-overflow-wait.wait-age-mid { color: var(--wait-mid); opacity: 1; font-weight: 700; }
        .session-tab .wait-badge.wait-age-warn,
        .tab-overflow-item .tab-overflow-wait.wait-age-warn { color: var(--wait-warn); opacity: 1; font-weight: 750; }
        .session-tab .wait-badge.wait-age-stale,
        .tab-overflow-item .tab-overflow-wait.wait-age-stale { color: var(--wait-stale); opacity: 1; font-weight: 800; }

        /* Auto-yes accepted/blocked dot appended after the duration (badge text
           color itself encodes staleness). Theme-aware via --success/--error. */
        .wait-ay-dot {
            font-size: 0.7em;
            margin-left: 3px;
            vertical-align: middle;
        }
        .wait-ay-accepted { color: var(--success); }
        .wait-ay-blocked { color: var(--error); }

        .wait-kind {
            display: inline-block;
            margin-right: 4px;
            letter-spacing: 0;
            font-size: 0.78em;
            font-weight: 800;
        }

        /* NEEDS OK — a permission prompt waiting on the human. Amber, the
           colour the old APPROVE badge used, because this is the state that
           badge actually described. */
        .session-tab .wait-badge.wait-kind-needsok,
        .tab-overflow-item .tab-overflow-wait.wait-kind-needsok {
            background: color-mix(in srgb, var(--warning), var(--bg-primary) 80%);
            border-color: color-mix(in srgb, var(--warning), var(--border) 35%);
        }

        /* BLOCKED — auto-yes read the prompt and declined it. */
        .session-tab .wait-badge.wait-kind-blocked,
        .tab-overflow-item .tab-overflow-wait.wait-kind-blocked {
            background: color-mix(in srgb, var(--error), var(--bg-primary) 82%);
            border-color: color-mix(in srgb, var(--error), var(--border) 25%);
        }

        /* STALLED — auto-yes is on and has stopped working this prompt.
           Reads hotter than BLOCKED on purpose: a refusal is a decision
           someone made, this is a session nothing will ever answer. */
        .session-tab .wait-badge.wait-kind-stalled,
        .tab-overflow-item .tab-overflow-wait.wait-kind-stalled {
            background: color-mix(in srgb, var(--error), var(--bg-primary) 62%);
            border-color: var(--error);
        }

        /* AUTO — auto-yes answered it; the badge is on its way out. */
        .session-tab .wait-badge.wait-kind-auto,
        .tab-overflow-item .tab-overflow-wait.wait-kind-auto {
            background: color-mix(in srgb, var(--success), var(--bg-primary) 84%);
            border-color: color-mix(in srgb, var(--success), var(--border) 30%);
        }

        .session-tab .wait-badge.wait-kind-choice,
        .tab-overflow-item .tab-overflow-wait.wait-kind-choice {
            background: color-mix(in srgb, var(--accent), var(--bg-primary) 84%);
            border-color: color-mix(in srgb, var(--accent), var(--border) 30%);
        }

        /* FAILED / TASK! — its own task needs the owner. */
        .session-tab .wait-badge.wait-kind-task-attention,
        .tab-overflow-item .tab-overflow-wait.wait-kind-task-attention {
            background: color-mix(in srgb, var(--error), var(--bg-primary) 78%);
            border-color: var(--error);
            color: var(--error);
        }

        /* MERGE / TASK / BUSY / LIMIT / HELD — waiting on a maintainer's merge, its
           own running task, work it said it is waiting on, or put off by
           you: not waiting on you now, so muted and never age-coloured. */
        .session-tab .wait-badge.wait-kind-merge,
        .session-tab .wait-badge.wait-kind-task,
        .session-tab .wait-badge.wait-kind-ci,
        .session-tab .wait-badge.wait-kind-draft,
        .session-tab .wait-badge.wait-kind-recap,
        .session-tab .wait-badge.wait-kind-child,
        .session-tab .wait-badge.wait-kind-declared,
        .session-tab .wait-badge.wait-kind-limit,
        .session-tab .wait-badge.wait-kind-held,
        .tab-overflow-item .tab-overflow-wait.wait-kind-merge,
        .tab-overflow-item .tab-overflow-wait.wait-kind-task,
        .tab-overflow-item .tab-overflow-wait.wait-kind-ci,
        .tab-overflow-item .tab-overflow-wait.wait-kind-draft,
        .tab-overflow-item .tab-overflow-wait.wait-kind-recap,
        .tab-overflow-item .tab-overflow-wait.wait-kind-child,
        .tab-overflow-item .tab-overflow-wait.wait-kind-declared,
        .tab-overflow-item .tab-overflow-wait.wait-kind-limit,
        .tab-overflow-item .tab-overflow-wait.wait-kind-held {
            background: color-mix(in srgb, var(--text-muted), var(--bg-primary) 88%);
            border-color: color-mix(in srgb, var(--text-muted), var(--border) 40%);
            color: var(--text-secondary);
        }

        .session-tab .wait-badge.wait-kind-idle,
        .session-tab .wait-badge.wait-kind-unknown,
        .tab-overflow-item .tab-overflow-wait.wait-kind-idle,
        .tab-overflow-item .tab-overflow-wait.wait-kind-unknown {
            background: color-mix(in srgb, var(--bg-primary), var(--bg-secondary) 15%);
            border-color: color-mix(in srgb, var(--border), var(--text-secondary) 24%);
        }

        /* YOLO is a standing grant on a real machine — the menu row says so
           at a glance rather than reading like any other toggle. */
        .tab-dropdown-item.tab-dropdown-item-yolo-on,
        #session-yolo-toggle.tab-dropdown-item-yolo-on {
            color: var(--error);
            font-weight: 700;
        }

        /* Tab markers for a session running in YOLO, and one muted. */
        .tab-yolo-flag,
        .tab-muted-flag {
            margin-left: 4px;
            font-size: 0.8em;
            vertical-align: middle;
        }
        .session-yolo-flag {
            flex: 0 0 auto;
            margin-left: 4px;
            font-size: 0.8em;
            line-height: 1;
        }
        .session-yolo-flag[hidden] { display: none; }

        /* Auto-yes history panel */
        .autoyes-panel {
            display: none;
            width: 280px;
            min-width: 220px;
            max-width: 400px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }
        .autoyes-panel.visible {
            display: flex;
            flex-direction: column;
        }
        .autoyes-panel-header {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-tertiary);
        }
        .autoyes-panel-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .autoyes-panel-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1rem;
            line-height: 1;
        }
        .autoyes-panel-close:hover {
            color: var(--text-primary);
        }
        .autoyes-panel-body {
            flex: 1;
            overflow-y: auto;
            font-size: 0.75rem;
            padding: 0;
        }
        .autoyes-entry {
            padding: 6px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .autoyes-entry:first-child {
            background: var(--bg-tertiary);
        }
        .autoyes-entry-header {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .autoyes-entry-icon {
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .autoyes-entry-icon.triggered { color: var(--success); }
        .autoyes-entry-icon.blocked { color: #e0af68; }
        .autoyes-entry-label {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text-primary);
        }
        .autoyes-entry-time {
            color: var(--text-muted);
            font-size: 0.65rem;
            flex-shrink: 0;
        }
        .autoyes-entry-reason {
            color: var(--text-muted);
            font-size: 0.65rem;
            padding-left: 20px;
        }
        .autoyes-live-badge {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 4px;
            vertical-align: middle;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .autoyes-live-badge.triggered { background: var(--success); opacity: 1; }
        .autoyes-live-badge.blocked { background: #e0af68; opacity: 1; }

        /* Terminal container - use absolute positioning to get exact dimensions */
        .terminal-container {
            flex: 1 1 0;
            min-height: 0;
            position: relative;
            overflow: hidden;
        }
        #terminals-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #terminals-wrapper > div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 4px; /* Small gap to prevent toolbar overlap */
            padding: 8px;
            box-sizing: border-box;
            visibility: hidden;
            z-index: 0;
        }
        #terminals-wrapper > div.active-terminal {
            visibility: visible;
            z-index: 1;
        }

        /* Mobile-friendly plain text output */
        .mobile-output {
            display: none;
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            margin: 0;
            padding: 8px;
            overflow-y: auto;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: Menlo, Monaco, "Courier New", monospace;
            font-size: 12px;
            line-height: 1.4;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .mobile-dead-session-notice {
            display: block;
            margin-top: 8px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--error), var(--border) 35%);
            border-radius: 6px;
            background: color-mix(in srgb, var(--error), var(--bg-primary) 86%);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 0.85rem;
            font-weight: 650;
            line-height: 1.35;
            white-space: normal;
        }

        .path-link {
            text-decoration: underline;
            text-decoration-style: dotted;
            cursor: pointer;
        }
        .path-link:hover {
            text-decoration-style: solid;
            color: var(--accent);
        }
        .path-link.copied {
            text-decoration-style: solid;
            color: var(--success);
        }
        .url-link {
            color: var(--accent);
            text-decoration: underline;
            text-decoration-style: dotted;
        }

        @media (max-width: 768px) {
            #terminals-wrapper {
                display: none !important;
            }

            .mobile-output {
                display: block !important;
            }

            /* Hide mobile-output when stream-view is active */
            .mobile-output.stream-active {
                display: none !important;
            }
        }

        /* Stream session view (structured progress) */
        .stream-view {
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            padding: 12px;
            overflow-y: auto;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 14px;
            -webkit-overflow-scrolling: touch;
        }

        .stream-header {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .stream-header .stream-status {
            color: var(--accent);
            font-weight: 500;
        }

        .stream-header .stream-status.running {
            color: var(--warning);
        }

        .stream-header .stream-status.done {
            color: var(--success);
        }

        .stream-header .stream-status.error {
            color: var(--error);
        }

        .stream-history {
            font-family: Menlo, Monaco, "Courier New", monospace;
            font-size: 12px;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color, #333);
        }

        .stream-history:empty {
            display: none;
        }

        .stream-history-line {
            padding: 1px 0;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .stream-history-spacer {
            height: 8px;
        }

        .stream-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .stream-action {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            padding: 6px 10px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-family: Menlo, Monaco, "Courier New", monospace;
            font-size: 12px;
        }

        .stream-action .action-icon {
            flex-shrink: 0;
            width: 16px;
            text-align: center;
        }

        .stream-action .action-icon.running { color: var(--warning); }
        .stream-action .action-icon.done { color: var(--success); }
        .stream-action .action-icon.error { color: var(--error); }

        .stream-action .action-text {
            flex: 1;
            word-break: break-word;
        }

        .stream-user-message {
            margin: 8px 0;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border-left: 3px solid var(--text-muted, #6c7086);
            font-size: 13px;
            line-height: 1.5;
            word-break: break-word;
        }

        .permission-prompt {
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid #f59e0b;
            border-radius: 8px;
            padding: 12px 16px;
            margin: 8px 0;
        }
        .permission-header {
            font-weight: bold;
            color: #f59e0b;
            margin-bottom: 8px;
            font-size: 13px;
        }
        .permission-tool {
            font-family: var(--font-mono, monospace);
            font-size: 12px;
            color: var(--text-secondary, #d1d5db);
            margin-bottom: 12px;
            word-break: break-all;
            max-height: 120px;
            overflow-y: auto;
        }
        .permission-buttons {
            display: flex;
            gap: 8px;
        }
        .btn-allow {
            background: #059669;
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
        }
        .btn-allow:hover { background: #047857; }
        .btn-deny {
            background: #dc2626;
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
        }
        .btn-deny:hover { background: #b91c1c; }

        .stream-answer {
            margin-top: 16px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border-left: 3px solid var(--accent);
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 13px;
            line-height: 1.5;
        }

        .stream-answer h4 {
            margin: 0 0 8px 0;
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .stream-input-container {
            margin-top: 16px;
            display: flex;
            gap: 8px;
            align-items: flex-end;
        }

        .stream-input-container textarea {
            flex: 1;
            min-height: 44px;
            max-height: 150px;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
            outline: none;
        }

        .stream-input-container textarea:focus {
            border-color: var(--accent);
        }

        .stream-input-container textarea::placeholder {
            color: var(--text-muted);
        }

        .stream-input-container button {
            padding: 10px 20px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            flex-shrink: 0;
        }

        .stream-input-container button:hover {
            background: var(--accent-hover);
        }

        .stream-input-container button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .session-context-actions {
            position: relative;
            display: none;
            flex: 0 0 auto;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
            padding: 7px 12px;
            overflow-x: visible;
            background: color-mix(in srgb, var(--bg-secondary), var(--bg-primary) 8%);
            border-top: 1px solid var(--border);
        }

        .session-context-actions.visible {
            display: flex;
        }

        .session-context-actions-label {
            flex: 0 0 auto;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .session-context-action {
            flex: 0 0 auto;
            padding: 7px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 650;
            white-space: nowrap;
        }

        .session-context-action:hover:not(:disabled) {
            border-color: var(--text-muted);
            background: color-mix(in srgb, var(--bg-tertiary), var(--text-primary) 7%);
        }

        .session-context-action.review-merge-close {
            border-color: color-mix(in srgb, var(--warning), var(--border) 35%);
            background: color-mix(in srgb, var(--warning), var(--bg-secondary) 84%);
            color: color-mix(in srgb, var(--warning), white 28%);
        }

        .session-context-action.review-merge-state {
            border-color: color-mix(in srgb, var(--success), var(--border) 30%);
            background: color-mix(in srgb, var(--success), var(--bg-secondary) 80%);
            color: color-mix(in srgb, var(--success), white 24%);
        }

        .session-context-action:disabled {
            cursor: not-allowed;
            opacity: 0.62;
        }

        .session-context-action.review-merge-state:disabled {
            opacity: 0.82;
        }

        .session-context-more {
            position: static;
            flex: 0 0 auto;
        }

        .session-context-more > summary {
            list-style: none;
        }

        .session-context-more > summary::-webkit-details-marker {
            display: none;
        }

        .session-context-more[open] > summary {
            border-color: var(--accent);
        }

        .session-context-menu {
            position: absolute;
            right: 0;
            bottom: calc(100% + 6px);
            z-index: 190;
            display: flex;
            width: max-content;
            min-width: 220px;
            max-width: calc(100vw - 16px);
            flex-direction: column;
            gap: 4px;
            padding: 6px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
        }

        .session-context-menu-action {
            width: 100%;
            min-height: 36px;
            padding: 8px 10px;
            border: 1px solid transparent;
            border-radius: 6px;
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 650;
            text-align: left;
            white-space: normal;
        }

        .session-context-menu-action:hover:not(:disabled) {
            border-color: var(--border);
            background: var(--bg-tertiary);
        }

        .session-context-menu-action.review-merge-close {
            color: color-mix(in srgb, var(--warning), white 28%);
        }

        .session-context-menu-action.danger {
            color: var(--error);
        }

        .session-context-menu-action:disabled {
            cursor: not-allowed;
            opacity: 0.62;
        }

        /* Floating scroll to bottom button */
        .scroll-to-bottom-btn {
            position: absolute;
            bottom: 80px;
            right: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--accent);
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 100;
            opacity: 0.9;
        }

        .scroll-to-bottom-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        /* Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 200;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }

        .modal {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 24px;
            width: 100%;
            max-width: 400px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Cascade-close (parent + children) chooser */
        .cascade-close-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 300;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }
        .cascade-close-modal {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 24px;
            width: 100%;
            max-width: 420px;
        }
        .cascade-close-modal h3 { margin: 0 0 12px; }
        .cascade-close-modal p { margin: 0 0 8px; color: var(--text-secondary); }
        .cascade-close-children {
            background: var(--bg-primary);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 16px;
            font-size: 0.85rem;
            line-height: 1.5;
            max-height: 180px;
            overflow-y: auto;
        }
        .cascade-close-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }
        .cascade-btn {
            padding: 8px 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        .cascade-btn-all {
            background: var(--error);
            color: #fff;
        }
        .cascade-btn-self {
            background: var(--accent);
            color: #fff;
        }

        .maintainers-help {
            color: var(--text-muted);
            font-size: 0.85rem;
            margin-bottom: 16px;
        }
        #maintainers-status { margin-bottom: 12px; font-size: 0.85rem; }
        #maintainers-list { margin-bottom: 16px; }
        .maintainer-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .maintainer-identity { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
        .maintainer-actions { display: flex; flex: 0 0 auto; gap: 8px; }
        .maintainer-login { color: var(--text-muted); font-size: 0.85rem; }
        .maintainer-row button {
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .maintainer-row button:disabled { opacity: 0.5; cursor: default; }

        .modal h2 {
            margin-bottom: 16px;
        }

        .modal input {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 12px;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 12px;
        }

        .modal input[type="checkbox"] {
            width: auto;
            margin: 0 8px 0 0;
            padding: 0;
            border: none;
        }

        .modal input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .agent-select {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 12px;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 12px;
            cursor: pointer;
        }

        .agent-select:focus {
            outline: none;
            border-color: var(--accent);
        }

        .agent-select option {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .modal-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 16px;
        }

        .modal-actions button {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 0.875rem;
            cursor: pointer;
            border: none;
        }

        .modal-actions .cancel {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .modal-actions .confirm {
            background: var(--accent);
            color: var(--text-on-accent);
        }

        .count-badge {
            background: var(--accent);
            color: var(--text-on-accent);
            border-radius: 999px;
            padding: 2px 6px;
            font-size: 0.7rem;
            margin-left: 6px;
            line-height: 1;
        }

        .agents-section {
            margin-top: 16px;
        }

        .agents-section-title {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .agents-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .agent-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .agent-card.agent-disabled {
            opacity: 0.55;
        }

        .agent-card.agent-disabled .agent-status-dot {
            background: var(--surface-muted);
        }

        .agent-providers {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .agent-provider-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82rem;
        }

        .agent-provider-row.is-disabled {
            opacity: 0.55;
        }

        .agent-provider-name {
            flex: 1;
            color: var(--text-primary);
        }

        .agent-provider-slug {
            color: var(--text-muted);
            font-family: monospace;
            font-size: 0.72rem;
        }

        .agent-provider-toggle {
            padding: 2px 8px;
            font-size: 0.72rem;
        }

        .agent-card-enable-btn {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .agent-card-enable-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .agent-card-enable-btn.is-disabled {
            border-color: var(--accent);
            color: var(--accent);
        }

        .agent-card-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .agent-card-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .agent-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
        }

        .agent-card-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .agent-llm-warning {
            color: var(--warning);
            font-weight: 600;
            cursor: help;
        }

        .agent-card-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .agent-update-badge {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(245, 158, 11, 0.2);
            color: var(--warning);
            border: 1px solid rgba(245, 158, 11, 0.4);
        }

        .agent-step {
            display: flex;
            gap: 12px;
            padding: 12px;
            border-radius: 8px;
            background: var(--bg-secondary);
            border: 1px dashed var(--border);
            margin-bottom: 10px;
        }

        .agent-step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--accent);
            color: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            flex-shrink: 0;
        }

        .agent-step-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-primary);
        }

        .agent-step-body {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .agent-command {
            font-size: 0.85rem;
            background: var(--bg-primary);
            padding: 10px;
            border-radius: 6px;
            color: var(--accent);
            font-weight: 500;
            word-break: break-all;
        }

        .agent-download-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 0.8rem;
            text-decoration: none;
            cursor: pointer;
        }

        .agent-download-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .info-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 8px;
            font-size: 0.85rem;
            color: var(--text-primary);
            margin-top: 12px;
        }

        /* In-flow strip above the header. Never position:fixed at top:0 —
           that covered the single-row header. Sticky so it stays visible
           while scrolling, with the header offset underneath it. */
        .update-banner {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            z-index: 3000;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 14px;
            min-height: 44px;
            padding: 8px 16px;
            background: var(--accent);
            color: var(--text-on-accent);
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        body.update-available header {
            top: var(--update-banner-height);
        }
        /* Desktop session-detail parks the action cluster 4px from the top of
           the identity row. Keep that inset once the banner has pushed the
           row down; the phone rule below overrides to a flush full-width bar. */
        body.update-available.session-detail-active header {
            top: calc(4px + var(--update-banner-height));
        }
        body.update-available.session-detail-active #session-view::before {
            top: var(--update-banner-height);
        }
        body.update-available.session-detail-active #session-view::after {
            top: calc(var(--update-banner-height) + var(--session-toolbar-height));
        }
        body.update-available.fleet-layout .fleet-sidebar {
            top: var(--update-banner-height);
        }
        .update-banner-btn {
            background: #fff;
            color: var(--accent);
            border: none;
            border-radius: 6px;
            padding: 5px 14px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
        }
        .update-banner-btn:hover { opacity: 0.9; }
        .update-banner-btn:disabled { opacity: 0.55; cursor: default; }

        .terminal-input-held {
            flex: 0 0 auto;
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 4px var(--session-content-gutter-x, 8px);
            padding: 4px 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--warning);
            border-radius: 6px;
            font-size: 0.85rem;
        }
        .terminal-input-held > span {
            flex: 1 1 220px;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .terminal-input-held.automatic {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
        }
        .terminal-input-held-content {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .terminal-input-held-preview {
            margin: 4px 0 0;
            max-height: min(120px, 20dvh);
            overflow-y: auto;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            font: 0.9em/1.4 var(--font-mono, monospace);
            user-select: text;
        }
        .terminal-input-held button {
            min-height: 36px;
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font: inherit;
            cursor: pointer;
        }

        .review-request-panel {
            flex: 0 0 auto;
            padding: 8px 16px;
            border-bottom: 1px solid color-mix(in srgb, var(--warning), var(--border) 55%);
            background: color-mix(in srgb, var(--warning), var(--bg-secondary) 90%);
        }

        .review-action-alert {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            min-width: 0;
        }

        /* A session asking to reach outside its family line. Deliberately
           louder than the review bar: it is a containment decision, and the
           reason text is the whole point of showing it. */
        .message-approval-panel {
            flex: 0 0 auto;
            padding: 8px 16px;
            border-bottom: 1px solid color-mix(in srgb, var(--danger), var(--border) 55%);
            background: color-mix(in srgb, var(--danger), var(--bg-secondary) 92%);
        }

        .message-approval-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: min(1120px, 100%);
            margin: 0 auto;
            padding: 4px 0;
        }

        .message-approval-row + .message-approval-row {
            border-top: 1px solid color-mix(in srgb, var(--border), transparent 40%);
        }

        .message-approval-main {
            min-width: 0;
            flex: 1;
        }

        .message-approval-kicker {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--danger);
        }

        .message-approval-pair {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .message-approval-reason {
            font-size: 0.82rem;
            color: var(--text-secondary);
            overflow-wrap: anywhere;
        }

        .message-approval-notice {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            width: min(1120px, 100%);
            margin: 0 auto 6px;
            font-size: 0.82rem;
            color: var(--text-secondary);
        }

        .message-approval-notice span {
            flex: 1;
            min-width: 0;
        }

        .message-approval-notice-undo {
            flex: 0 0 auto;
            padding: 2px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
        }

        .message-approval-notice-undo:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .message-approval-notice-dismiss {
            flex: 0 0 auto;
            padding: 0 6px;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.2;
            cursor: pointer;
        }

        .message-approval-notice-dismiss:hover {
            background: color-mix(in srgb, var(--border), transparent 40%);
            color: var(--text-primary);
        }

        .message-approval-actions {
            display: flex;
            gap: 8px;
            flex: 0 0 auto;
        }

        @media (max-width: 768px) {
            .message-approval-panel { padding: 7px 8px; }
            .message-approval-row { flex-direction: column; align-items: stretch; }
            .message-approval-actions button { flex: 1; }
        }

        .review-action-alert-main {
            min-width: 0;
            flex: 0 0 auto;
        }

        .review-action-alert-kicker {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            /* Belt and braces with the floor above: the label is a fixed
               phrase, so let it clip rather than stack vertically if anything
               else ever squeezes this column. */
            min-width: 0;
            color: var(--warning);
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* The meta line is hidden on narrow screens, so the CI chip sits in
           the kicker row where it survives the mobile layout. */
        .review-action-alert-kicker .review-ci-chip {
            font-size: 0.62rem;
            letter-spacing: 0.03em;
            /* The chip is the reason the row exists on a merge prompt, so it
               must never be the thing that wraps or gets clipped. */
            flex: 0 0 auto;
        }

        .review-action-alert-kicker > span:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pr-icon-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 24px;
            height: 24px;
            border-radius: 5px;
            color: var(--text-secondary);
        }

        .pr-icon-link:hover,
        .pr-icon-link:focus-visible {
            background: var(--bg-tertiary);
            color: var(--accent);
        }

        .pr-icon-link svg {
            width: 14px;
            height: 14px;
        }

        /* Sized to the title's line, so the link never makes the bar taller. */
        .review-action-alert-pr-link {
            width: 20px;
            height: 20px;
        }

        /* The title ellipsizes; the link beside it never does. */
        .review-action-alert-title {
            display: flex;
            align-items: center;
            gap: 2px;
            min-width: 0;
        }

        .review-action-alert-text {
            min-width: 0;
            margin-top: 2px;
            overflow: hidden;
            color: var(--text-primary);
            font-size: 0.94rem;
            font-weight: 650;
            text-overflow: ellipsis;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .review-action-alert-meta {
            margin-top: 2px;
            overflow: hidden;
            color: var(--text-secondary);
            font-size: 0.73rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .review-action-alert-navigation {
            display: flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
        }

        .review-action-alert-navigation button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
        }

        .review-action-alert-navigation button:disabled {
            opacity: 0.35;
            cursor: default;
        }

        .review-action-alert-position {
            min-width: 56px;
            color: var(--text-secondary);
            font-size: 0.73rem;
            font-variant-numeric: tabular-nums;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
        }

        /* Decisions have their own wrapping row, separate from the review
           identity and the fixed queue navigation above it. */
        .review-action-alert-actions {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 6px;
            flex: 0 0 auto;
        }

        .review-action-alert-buttons {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
            flex-wrap: wrap;
            min-width: 0;
        }

        /* The four jumps -- parent, reviewer, review record, PR -- share one
           menu. Inline they took 379px, which alone put a nine-control bar
           on two rows in the fleet layout at 1600px. The decisions stay
           inline: they are what the bar is asking for. */
        .review-action-alert-links {
            position: relative;
            flex: 0 0 auto;
        }

        .review-action-alert-links > summary {
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.76rem;
            font-weight: 700;
            list-style: none;
            white-space: nowrap;
        }

        .review-action-alert-links > summary::-webkit-details-marker {
            display: none;
        }

        .review-action-alert-links[open] > summary {
            border-color: var(--accent);
        }

        .review-action-alert-links-menu {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            z-index: 60;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 100%;
            padding: 4px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        }

        .review-action-alert-actions .review-action-alert-links-menu button,
        .review-action-alert-actions .review-action-alert-links-menu a {
            justify-content: flex-start;
            border-color: transparent;
            background: transparent;
        }

        .review-action-alert-actions .review-action-alert-links-menu button:hover,
        .review-action-alert-actions .review-action-alert-links-menu a:hover {
            background: var(--bg-tertiary);
        }

        .review-action-alert-actions button,
        .review-action-alert-actions a {
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.76rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }

        .review-action-alert-actions button.primary {
            border-color: var(--accent);
            background: var(--accent);
            color: var(--text-on-accent);
        }

        .review-action-alert-actions button:disabled {
            cursor: not-allowed;
            opacity: 0.58;
        }


        #review-request-approve-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-width: 92px;
        }

        #review-request-approve-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .review-request-spinner {
            width: 12px;
            height: 12px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: review-request-spin 0.7s linear infinite;
            flex: 0 0 auto;
        }

        @keyframes review-request-spin {
            to { transform: rotate(360deg); }
        }

        .review-request-modal-grid {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr);
            gap: 8px 12px;
            margin-bottom: 14px;
        }

        .review-request-modal-label,
        .review-request-field-label {
            color: var(--text-secondary);
            font-size: 0.76rem;
            font-weight: 700;
        }

        .review-request-modal-value {
            color: var(--text-primary);
            font-size: 0.84rem;
            word-break: break-word;
        }

        .review-request-note {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.84rem;
            padding: 10px 12px;
            margin-bottom: 14px;
            white-space: pre-wrap;
        }

        .review-request-field-label {
            display: block;
            margin: 0 0 6px;
        }

        .review-request-route-status {
            min-height: 18px;
            color: var(--warning);
            font-size: 0.78rem;
        }

        @media (max-width: 640px) {
            .review-request-panel {
                padding: 7px 8px;
            }
            .review-action-alert {
                position: relative;
                align-items: stretch;
                flex-direction: column;
                gap: 6px;
            }
            .review-action-alert-text {
                white-space: normal;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .review-action-alert-meta { display: none; }
            .review-action-alert-navigation {
                align-self: flex-start;
            }
            .review-action-alert-navigation button {
                width: 34px;
                height: 34px;
            }
            .review-action-alert-actions {
                width: 100%;
            }
            /* Five controls no longer fit one narrow row; wrapping keeps
               every one of them reachable instead of clipping the merge. */
            .review-action-alert-buttons {
                width: 100%;
            }
            .review-action-alert-links > summary {
                min-height: 34px;
                padding: 6px 8px;
            }
            .review-action-alert-actions button,
            .review-action-alert-actions a {
                min-height: 34px;
                padding: 6px 8px;
            }
        }

        .link-button {
            background: transparent;
            border: none;
            color: var(--accent);
            cursor: pointer;
            font-weight: 600;
            padding: 0;
        }

        .clone-summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .integrations-section {
            margin-top: 16px;
            padding: 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            border: 1px solid var(--border);
        }

        .integration-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .integration-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .integration-badge {
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .integration-badge.active {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.4);
        }

        .integration-fields label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .integration-fields input {
            margin-bottom: 10px;
        }

        .integration-fields select,
        .integration-fields textarea {
            width: 100%;
            margin-bottom: 10px;
        }

        .integration-fields textarea {
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 6px 8px;
            font-family: inherit;
            font-size: 0.85rem;
            resize: vertical;
        }

        .integration-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }

        .integration-actions button {
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            padding: 8px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .integration-actions .secondary {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        /* Token management */
        .tokens-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .token-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .token-prefix {
            font-family: monospace;
            color: var(--text-primary);
        }

        .token-revoke {
            background: #dc3545;
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
        }

        .token-revoke:hover {
            background: #c82333;
        }

        /* Running sessions section */
        .running-section h3 {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin: 0 auto 0 0;
        }

        .section-header {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }

        .section-header button {
            font-size: 0.75rem;
            padding: 4px 10px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            border-radius: 4px;
            cursor: pointer;
        }

        .section-header button:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .section-header .section-primary-btn {
            min-height: 32px;
            padding: 6px 14px;
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .section-header .section-primary-btn:hover {
            background: var(--accent-hover);
            color: white;
        }

        /* Session history */
        .history-section {
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }

        .history-header {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }

        .history-section h3 {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin: 0 auto 0 0;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border-radius: 6px;
            margin-bottom: 8px;
            border: 1px solid var(--border);
        }

        .history-item:hover {
            border-color: var(--accent);
        }

        .history-info {
            flex: 1;
            min-width: 0;
        }

        .history-name {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .history-path {
            font-size: 0.75rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .history-agent {
            font-size: 0.65rem;
            color: var(--accent);
            margin-top: 2px;
        }

        .history-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .history-provider {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            text-transform: capitalize;
        }

        .history-active {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: rgba(255, 183, 77, 0.18);
            border: 1px solid rgba(255, 183, 77, 0.4);
            color: var(--warning);
            text-transform: uppercase;
        }

        .history-open-with {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.7rem;
        }

        .history-open-with:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .history-launch {
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            margin-left: 12px;
        }

        .history-launch:hover {
            filter: brightness(1.1);
        }

        .no-history {
            color: var(--text-secondary);
            font-size: 0.85rem;
            text-align: center;
            padding: 16px;
        }

        .history-remove {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 1rem;
            line-height: 1;
        }

        .history-remove:hover {
            background: var(--error);
            color: white;
        }

        .history-actions {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        /* Autocomplete styles */
        .autocomplete-container {
            position: relative;
        }

        .autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10;
            display: none;
        }

        .autocomplete-list.show {
            display: block;
        }

        .autocomplete-item {
            padding: 10px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.875rem;
        }

        .autocomplete-item:hover,
        .autocomplete-item.selected {
            background: var(--accent);
            color: var(--bg-primary);
        }

        .autocomplete-item .path-icon {
            color: var(--text-muted);
        }

        .autocomplete-item:hover .path-icon,
        .autocomplete-item.selected .path-icon {
            color: var(--bg-primary);
        }

        /* Session card actions */
        .session-card-actions {
            display: flex;
            gap: 4px;
            margin-top: 8px;
        }

        .session-card-actions button {
            background: var(--bg-tertiary);
            border: none;
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            cursor: pointer;
        }

        .session-card-actions button:hover {
            background: var(--accent);
            color: var(--bg-primary);
        }

        /* User menu - inline in header */
        .user-menu {
            display: none;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            margin-left: 12px;
            padding-left: 12px;
            border-left: 1px solid var(--border);
        }

        .user-menu span {
            color: var(--text-secondary);
        }

        .user-menu button {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.8rem;
        }

        .user-menu button:hover {
            background: var(--bg-tertiary);
        }

        .user-menu a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 4px 8px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.8rem;
        }

        .user-menu a:hover {
            color: var(--error);
            border-color: var(--error);
        }

        /* Mobile: compact user menu */
        @media (max-width: 768px) {
            .user-menu {
                margin-left: 8px;
                padding-left: 8px;
                gap: 4px;
                font-size: 0.7rem;
            }

            .user-menu span {
                max-width: 50px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .user-menu button, .user-menu a {
                padding: 2px 6px;
                font-size: 0.7rem;
            }

            /* On mobile, hide logout text and show icon */
            .user-menu .logout-link .link-text {
                display: none;
            }
        }

        /* Desktop: hide logout icon, show text */
        @media (min-width: 769px) {
            .user-menu .logout-link .link-icon {
                display: none;
            }
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            cursor: help;
        }

        .status-dot.connected { background: var(--success); }
        .status-dot.disconnected { background: var(--error); }
        .status-dot.connecting { background: var(--warning); }

        /* Responsive */
        @media (max-width: 480px) {
            .terminal-container {
                min-height: 150px;
            }
        }

        /* Mobile flickering fixes */
        .terminal-container {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Let xterm handle scrolling natively */
        .xterm-viewport {
            touch-action: pan-y !important;
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior: contain;
            overflow-y: scroll !important;
        }

        .xterm-screen {
            touch-action: pan-y !important;
        }

        /* Force proper touch scrolling on mobile */
        @media (max-width: 768px) {
            .xterm-viewport {
                scroll-behavior: auto !important;
            }
        }

        /* Mobile layout adjustments */
        @media (max-width: 768px) {
            html {
                height: -webkit-fill-available;
            }

            body {
                min-height: -webkit-fill-available;
            }

            .mobile-toolbar {
                display: flex !important;
            }

            body.session-zombie-active #mobile-toolbar,
            body.session-zombie-active #mobile-input-bar,
            body.session-zombie-active #number-pad,
            body.session-zombie-active #more-actions {
                display: none !important;
            }

            .session-context-actions {
                align-items: stretch;
                gap: 6px;
                padding: 6px 8px;
            }

            .session-context-actions-label {
                display: none;
            }

            .session-context-action {
                flex: 1 1 calc(50% - 3px);
                min-width: 0;
                min-height: 38px;
                padding: 7px 8px;
                white-space: normal;
            }

            .session-context-more {
                flex: 1 1 calc(50% - 3px);
                min-width: 0;
            }

            /* The PR link shares the first row instead of taking a slot of
               the two-per-row grid: every action gives up 18px for it. */
            .session-context-pr-link {
                width: 30px;
                height: auto;
            }

            .session-context-actions:has(> .session-context-pr-link) > .session-context-action,
            .session-context-actions:has(> .session-context-pr-link) > .session-context-more {
                flex-basis: calc(50% - 21px);
            }

            .session-context-more > .session-context-action {
                width: 100%;
                height: 100%;
            }
        }

        /* Action toolbar (visible on all screen sizes) */
        .mobile-toolbar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 6px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 4px;
            flex-wrap: nowrap;
            position: relative;
            z-index: 100;
        }

        .toolbar-btn {
            flex: 1;
            padding: 10px 4px;
            font-size: 1.1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            cursor: pointer;
            min-width: 40px;
            max-width: 60px;
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
            touch-action: manipulation;
        }

        .toolbar-btn:active {
            background: var(--primary);
        }

        /* Mobile input bar - fixed at bottom to stay above keyboard */
        .mobile-input-bar {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 8px;
            padding-bottom: env(safe-area-inset-bottom, 8px);
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 8px;
            z-index: 200;
        }

        .mobile-text-input {
            flex: 1;
            padding: 12px;
            font-size: 16px; /* Prevents iOS zoom */
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            outline: none;
        }

        .mobile-text-input:focus {
            border-color: var(--primary);
        }

        .mobile-send-btn {
            padding: 12px 20px;
            font-size: 1rem;
            background: var(--primary);
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
        }

        .mobile-close-btn {
            padding: 12px 16px;
            font-size: 1rem;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .mobile-history-btn {
            padding: 12px 14px;
            font-size: 1rem;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        /* SDK session input bar - always visible at bottom for SDK sessions */
        .sdk-input-bar {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 12px;
        }

        .sdk-input-label {
            color: var(--primary);
            font-weight: bold;
            font-size: 1.1rem;
        }

        .sdk-input {
            flex: 1;
            padding: 10px 14px;
            font-size: 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            outline: none;
        }

        .sdk-input:focus {
            border-color: var(--primary);
        }

        .sdk-send-btn {
            padding: 10px 20px;
            font-size: 14px;
            background: var(--primary);
            border: none;
            border-radius: 6px;
            color: white;
            cursor: pointer;
        }

        .sdk-send-btn:hover {
            opacity: 0.9;
        }

        .mobile-history-btn:active {
            background: var(--primary);
            color: white;
        }

        .history-menu {
            position: fixed;
            bottom: 70px;
            left: 10px;
            right: 10px;
            max-height: 200px;
            overflow-y: auto;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            z-index: 1001;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
        }

        .history-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            font-family: var(--font-mono);
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .history-item:active {
            background: var(--primary);
            color: white;
        }

        .history-empty {
            padding: 16px;
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
        }

        /* Number pad */
        .number-pad {
            display: flex;
            justify-content: space-around;
            padding: 8px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 8px;
        }

        .numpad-btn {
            flex: 1;
            padding: 8px 4px;
            font-size: 1.25rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            cursor: pointer;
            min-width: 50px;
            text-align: center;
            line-height: 1.2;
        }

        .numpad-btn:active {
            background: var(--primary);
        }

        .numpad-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        @media (min-width: 769px) {
            #number-pad {
                display: none !important;
            }
        }

        /* More actions menu */
        .more-actions {
            display: flex;
            flex-direction: column;
            padding: 8px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            gap: 4px;
        }

        .action-btn {
            padding: 12px;
            font-size: 0.9rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
        }

        .action-btn:active {
            background: var(--primary);
        }

        @media (max-width: 768px) {
            .mobile-toolbar {
                background: var(--mobile-menu-bg);
                border-top-color: var(--mobile-menu-border);
                box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.38);
            }

            .toolbar-btn {
                background: var(--mobile-menu-item-bg);
                border-color: var(--mobile-menu-border);
                color: var(--mobile-menu-text);
                font-weight: 750;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
            }

            .toolbar-btn:active {
                background: var(--accent);
                color: #fff;
            }

            .mobile-input-bar {
                background: var(--mobile-menu-bg);
                border-top-color: var(--mobile-menu-border);
                box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.5);
            }

            .mobile-text-input {
                background: var(--mobile-menu-item-bg);
                border-color: var(--mobile-menu-border);
                color: var(--mobile-menu-text);
                font-weight: 600;
            }

            .mobile-close-btn,
            .mobile-history-btn {
                background: var(--mobile-menu-item-bg);
                color: var(--mobile-menu-text);
                border: 1px solid var(--mobile-menu-border);
                font-weight: 700;
            }

            .mobile-send-btn {
                background: var(--accent);
                color: #fff;
                font-weight: 700;
            }

            .history-menu,
            .number-pad,
            .more-actions {
                background: var(--mobile-menu-bg);
                border: 1px solid var(--mobile-menu-border);
                box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.56);
            }

            .history-menu {
                bottom: calc(58px + env(safe-area-inset-bottom, 0px));
                left: 8px;
                right: 8px;
                max-height: min(320px, 42vh);
            }

            .history-item {
                min-height: 46px;
                padding: 13px 14px;
                color: var(--mobile-menu-text);
                border-bottom-color: var(--mobile-menu-border);
                font-size: 0.95rem;
                font-weight: 600;
            }

            .history-empty {
                color: var(--mobile-menu-muted);
                font-size: 0.95rem;
            }

            .number-pad {
                position: static;
                left: auto;
                right: auto;
                bottom: auto;
                z-index: auto;
                flex: 0 0 auto;
                margin: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
                padding: 10px;
                gap: 8px;
                border-radius: 8px;
                box-sizing: border-box;
            }

            .numpad-btn {
                min-height: 48px;
                background: var(--mobile-menu-item-bg);
                border-color: var(--mobile-menu-border);
                color: var(--mobile-menu-text);
                font-size: 1.35rem;
                font-weight: 800;
            }

            .more-actions,
            body.session-detail-active .more-actions {
                position: absolute;
                left: 8px;
                right: 8px;
                bottom: calc(52px + env(safe-area-inset-bottom, 0px));
                z-index: 1002;
                max-height: min(470px, 58vh);
                overflow-y: auto;
                padding: 10px;
                gap: 8px;
                border-radius: 8px;
            }

            .action-btn {
                min-height: 46px;
                padding: 12px 14px;
                background: var(--mobile-menu-item-bg);
                border-color: var(--mobile-menu-border);
                color: var(--mobile-menu-text);
                font-size: 0.98rem;
                font-weight: 650;
            }

            .action-btn:active {
                background: var(--accent);
                color: #fff;
            }

            .more-actions label,
            #llm-metrics {
                color: var(--mobile-menu-muted) !important;
                font-size: 0.88rem !important;
            }

            #llm-model-select.agent-select {
                margin-bottom: 0;
                padding: 10px 12px !important;
                background: var(--mobile-menu-item-bg);
                border-color: var(--mobile-menu-border);
                color: var(--mobile-menu-text);
                font-size: 0.95rem !important;
                font-weight: 650;
            }
        }

        /* Modal session list items */
        .modal-session-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            margin-bottom: 6px;
            cursor: pointer;
        }

        .modal-history-tab {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
        }

        .modal-history-tab.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--accent);
        }

        #modal-stopped-tools {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 8px;
        }

        #modal-stopped-tools[hidden] {
            display: none;
        }

        #modal-stopped-search {
            width: 100%;
            box-sizing: border-box;
            padding: 6px 8px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 0.8rem;
        }

        #modal-stopped-pager {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        #modal-stopped-pager[hidden] {
            display: none;
        }

        #modal-stopped-pager button {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
            border-radius: 6px;
            padding: 3px 8px;
            cursor: pointer;
        }

        #modal-stopped-pager button:disabled {
            opacity: 0.4;
            cursor: default;
        }

        .modal-session-item.history-only {
            cursor: default;
        }

        .modal-session-item.history-only:hover {
            background: var(--bg-tertiary);
            color: inherit;
        }

        .modal-session-item:hover {
            background: var(--accent);
            color: var(--bg-primary);
        }

        /* Recent sessions - not clickable as a whole row */
        .modal-session-item.recent {
            cursor: default;
            padding: 10px 12px;
        }

        .modal-session-item.recent:hover {
            background: var(--bg-tertiary);
            color: inherit;
        }

        .modal-session-item.recent .session-path {
            color: var(--text-muted);
        }

        .modal-session-item.recent:hover .session-path {
            color: var(--text-muted);
        }

        /* Editable session-name field in Common/Recent rows. Defaults to the
           project folder name; the row's ▶ launches with whatever's typed. */
        .modal-session-item.recent .recent-name-input {
            width: 100%;
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--text-primary);
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 4px 6px;
            margin-bottom: 4px;
        }

        .modal-session-item.recent .recent-name-input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .modal-session-item.recent .session-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .modal-session-item.recent .action-btn {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .modal-session-item.recent .action-btn.open {
            background: var(--accent);
            color: var(--bg-primary);
        }

        .modal-session-item.recent .action-btn.menu {
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .modal-session-item.recent .menu-wrapper {
            position: relative;
        }

        .modal-session-item.recent .recent-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 44px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            min-width: 180px;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            padding: 4px 0;
        }

        .modal-session-item.recent .menu-divider {
            border-top: 1px solid var(--border);
            margin: 4px 0;
        }

        .modal-session-item.recent .menu-item,
        .modal-session-item.recent .recent-menu button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px 16px;
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.85rem;
        }

        .modal-session-item.recent .menu-item:hover,
        .modal-session-item.recent .recent-menu button:hover {
            background: var(--bg-tertiary);
        }

        .modal-session-item.recent .menu-item.danger {
            color: var(--error);
        }

        .modal-session-item .session-info {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .modal-session-item .session-name {
            font-weight: 500;
            font-size: 0.9rem;
        }

        .modal-session-item .session-path {
            font-size: 0.75rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .modal-session-item:hover .session-path {
            color: var(--bg-secondary);
        }

        /* Chips keep their own height and wrap as whole chips: stretched to
           the tallest item, the agent chip became a tall block whenever the
           stopped age wrapped onto two lines. */
        .modal-session-item .session-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 6px;
            margin: 2px 0;
        }

        .modal-session-item .session-meta > * {
            white-space: nowrap;
        }

        .modal-session-item .session-stopped-age {
            font-size: 0.7rem;
            color: var(--text-secondary);
        }

        .modal-session-item .session-agent {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: var(--accent);
            color: var(--bg-primary);
            font-weight: 500;
        }

        .modal-session-item .session-provider {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            text-transform: capitalize;
        }

        .modal-session-item .session-active-badge {
            font-size: 0.65rem;
            padding: 1px 5px;
            border-radius: 6px;
            background: rgba(255, 183, 77, 0.18);
            border: 1px solid rgba(255, 183, 77, 0.4);
            color: var(--warning);
            text-transform: uppercase;
        }

        .modal-session-item .session-status {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 8px;
            margin-left: 8px;
        }

        .modal-session-item .session-actions {
            display: flex;
            gap: 4px;
            margin-left: 8px;
        }

        .modal-session-item .session-action-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.7rem;
            background: var(--bg-secondary);
            color: var(--text-primary);
            opacity: 0.7;
            transition: opacity 0.15s;
        }

        .modal-session-item .session-action-btn:hover {
            opacity: 1;
        }

        .modal-session-item .session-action-btn.duplicate { background: var(--primary); color: white; }
        .modal-session-item .session-action-btn.restart { background: #f59e0b; color: white; }
        .modal-session-item .session-action-btn.stop { background: #ef4444; color: white; }
        .modal-session-item .session-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

        .modal-no-items {
            color: var(--text-muted);
            font-size: 0.85rem;
            padding: 8px;
        }

        /* Splash screen */
        .splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
        }

        .splash-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .splash-logo {
            font-size: 3rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 2rem;
            letter-spacing: -0.02em;
        }

        .splash-logo span {
            color: var(--text-primary);
        }

        .splash-loader {
            display: flex;
            gap: 8px;
        }

        .splash-loader .dot {
            width: 12px;
            height: 12px;
            background: var(--accent);
            border-radius: 50%;
            animation: splash-bounce 1.4s ease-in-out infinite;
        }

        .splash-loader .dot:nth-child(1) { animation-delay: 0s; }
        .splash-loader .dot:nth-child(2) { animation-delay: 0.2s; }
        .splash-loader .dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes splash-bounce {
            0%, 80%, 100% {
                transform: scale(0.6);
                opacity: 0.4;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .splash-status {
            margin-top: 1.5rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        /* Landing page for unauthenticated users */
        .landing-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            z-index: 9000;
            overflow-y: auto;
        }

        .landing-content {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 24px;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .landing-hero {
            text-align: center;
            margin-bottom: 48px;
        }

        .landing-title {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 12px;
            letter-spacing: -0.02em;
        }

        .landing-title span {
            color: var(--text-primary);
        }

        .landing-tagline {
            font-size: 1.5rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
            font-weight: 500;
        }

        .landing-description {
            font-size: 1.1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .landing-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 48px;
        }

        .landing-feature {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            text-align: center;
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
        }

        .landing-feature h3 {
            font-size: 1.1rem;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .landing-feature p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .landing-cta {
            text-align: center;
        }

        .landing-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #24292e;
            color: white;
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .landing-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .landing-note {
            margin-top: 12px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        @media (max-width: 768px) {
            .landing-content {
                padding: 40px 16px;
            }

            .landing-title {
                font-size: 2.5rem;
            }

            .landing-tagline {
                font-size: 1.2rem;
            }

            .landing-description {
                font-size: 1rem;
            }

            .landing-features {
                grid-template-columns: 1fr;
            }
        }

        /* Session detail chrome: keep tabs readable while using the top row for active controls and status. */
        body.session-detail-active {
            --session-toolbar-height: 52px;
            --session-header-reserved-right: 176px;
            --session-content-gutter-x: 12px;
            --session-content-gutter-y: 10px;
        }

        body.session-detail-active header {
            position: fixed; top: 4px; right: 8px;
            width: auto;
            padding: 0; background: transparent; border: 0; z-index: 2000;
        }
        body.session-detail-active header .logo { display: none; }
        body.session-detail-active .header-actions { gap: 3px; }
        body.session-detail-active .user-menu { flex: 0 0 auto; margin: 0; padding: 0 4px; min-height: 34px; }
        body.session-detail-active #user-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
        body.session-detail-active .header-menu-btn { width: 30px; min-width: 30px; height: 34px; }
        /* The overlay is a fixed-width cluster; keep + New's label and drop
           only the unopened "Open" word so the count still fits beside it. */
        body.session-detail-active #header-open-unopened-tabs-btn .open-unopened-label { display: none; }
        body.session-detail-active #header-open-unopened-tabs-btn {
            min-width: 34px; width: auto; padding: 0 8px; height: 34px;
            background: var(--bg-tertiary); border: 0; color: var(--text-primary);
        }
        body.session-detail-active #header-open-unopened-tabs-btn .open-unopened-count {
            min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0;
            background: transparent; color: var(--text-primary);
            font-size: 13px; font-weight: 700; line-height: 1;
        }

        body.session-detail-active #session-view {
            display: grid !important;
            position: relative;
            isolation: isolate;
            grid-template-columns:
                minmax(0, 1fr)
                var(--session-header-reserved-right);
            grid-template-rows:
                auto
                auto
                auto
                auto
                auto
                auto
                auto
                auto
                auto
                auto
                auto
                minmax(0, 1fr)
                auto
                auto
                auto
                auto;
            min-height: 0;
        }

        body.session-detail-active #session-view::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--session-toolbar-height);
            background: var(--bg-secondary);
            border-bottom: 1px solid color-mix(in srgb, var(--border), var(--text-secondary) 24%);
            z-index: 0;
            pointer-events: none;
        }

        body.session-detail-active #session-view::after {
            content: "";
            position: fixed;
            top: var(--session-toolbar-height);
            left: 0;
            right: 0;
            height: 1px;
            background: color-mix(in srgb, var(--border), var(--text-secondary) 28%);
            z-index: 1700;
            pointer-events: none;
        }

        body.session-detail-active .session-toolbar {
            grid-column: 1;
            grid-row: 1;
            z-index: 1;
            width: auto;
            min-width: 0;
            min-height: var(--session-toolbar-height);
            height: auto;
            padding: 8px 6px 8px 12px;
            gap: 10px;
            justify-content: flex-start;
            background: transparent;
            border-right: 0;
            border-bottom: 0;
        }

        body.session-detail-active .back-btn {
            width: 36px;
            min-width: 36px;
            height: 34px;
            padding: 0;
            overflow: hidden;
            color: transparent;
            font-size: 0;
            justify-content: center;
            border-radius: 5px;
        }

        body.session-detail-active .back-btn::before {
            content: "←";
            color: var(--text-primary);
            font-size: 15px;
        }

        body.session-detail-active .session-title {
            flex: 1 1 0;
            margin-left: 0;
            min-width: 0;
            max-width: none;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.95rem;
            font-weight: 600;
        }

        /* The dense toolbar is a fixed-width rail, so everything in it
           comes straight out of the session title beside it: with the agent
           name and the provider variant also drawn,
           "analytics-fee-accrual-state" rendered in 36px. Hover works at
           every size this layout is used at except a phone, so both live in
           the tooltip here and the pill stays 69-91px. The phone rules
           restore the variant, and the host name for the one case that has
           neither hover nor a number. */
        body.session-detail-active .session-setup-agent,
        body.session-detail-active .session-setup-variant {
            display: none;
        }

        body.session-detail-active .latency-indicator {
            padding: 2px 6px;
            font-size: 0.72rem;
            background: var(--bg-primary);
        }



        body.session-detail-active .session-tools-menu {
            order: 0;
        }



        body.session-detail-active .session-tabs-container {
            grid-column: 1 / -1;
            grid-row: 6;
            border-top: 1px solid color-mix(in srgb, var(--border), var(--text-secondary) 22%);
            border-bottom: 1px solid color-mix(in srgb, var(--border), var(--text-secondary) 28%);
        }

        body.session-detail-active .session-owner-banner {
            grid-column: 1 / -1;
            grid-row: 7;
            z-index: 1;
        }

        body.session-detail-active .session-work-item-strip {
            grid-column: 1 / -1;
            grid-row: 8;
            z-index: 1;
            min-width: 0;
            width: 100%;
        }

        /* Like every other child here it needs its own row: an unplaced child
           is auto-placed into the toolbar's row, in the header-controls
           column, and stretches the toolbar to its own height. It sits just
           above the terminal it warns about. */
        body.session-detail-active .session-crash-banner {
            grid-column: 1 / -1;
            grid-row: 9;
            z-index: 1;
            min-width: 0;
        }

        body.session-detail-active .session-quota-banner {
            grid-column: 1 / -1;
            grid-row: 10;
            z-index: 1;
            min-width: 0;
        }

        body.session-detail-active:has(#header-owner-requests-btn:not([hidden])) {
            --session-header-reserved-right: 218px;
        }
        @media (max-width: 768px) {
            #owner-request-panel .owner-request-row.is-question { grid-template-columns: minmax(0, 1fr); gap: 10px; }
            .owner-answer-options button { flex: 1 1 100%; }
            .owner-request-heading { gap: 4px 8px; }
            .owner-request-heading-actions { flex-wrap: wrap; }
            #owner-request-panel button { min-height: 44px; }
            .owner-sql-group-plan > summary { min-height: 44px; align-items: center; flex-wrap: wrap; }
            .owner-sql-plan-where { margin-left: 1.4em; white-space: normal; }
            .owner-request-heading-actions { width: 100%; }
            .owner-questions-open .owner-request-heading-actions { width: auto; }
            .owner-request-heading-actions .owner-request-actions,
            .owner-sql-decision .owner-request-actions { flex: 1; max-width: none; }
        }

        body.session-detail-active .session-tab {
            padding: 7px 12px 5px;
            color: color-mix(in srgb, var(--text-secondary), var(--text-primary) 10%);
            font-size: 0.9rem;
            line-height: 1.2;
            background: color-mix(in srgb, var(--bg-secondary), var(--bg-primary) 5%);
            border-right-color: color-mix(in srgb, var(--border), var(--text-secondary) 10%);
            border-bottom: 2px solid color-mix(in srgb, var(--border), var(--text-secondary) 26%);
        }

        body.session-detail-active .session-tab .tab-name {
            color: color-mix(in srgb, var(--text-primary), var(--text-secondary) 8%);
            font-weight: 520;
        }

        body.session-detail-active .session-tab .tab-subtitle {
            color: color-mix(in srgb, var(--text-secondary), var(--text-primary) 16%);
            font-size: 0.72rem;
            opacity: 0.96;
        }

        body.session-detail-active .session-tab.active {
            background: color-mix(in srgb, var(--bg-tertiary), var(--bg-secondary) 26%);
            border-bottom-color: var(--accent);
        }

        body.session-detail-active .session-tab.active .tab-name {
            color: var(--text-primary);
            font-weight: 620;
        }

        body.session-detail-active .session-tab.active .tab-subtitle {
            color: var(--text-secondary);
            opacity: 1;
        }

        body.session-detail-active .session-tab .tab-menu-btn {
            color: var(--text-secondary);
            opacity: 0.78;
        }

        body.session-detail-active .tab-overflow-dropdown {
            width: clamp(440px, 42vw, 760px);
            max-height: min(520px, 72vh);
        }

        body.session-detail-active .tab-overflow-item {
            min-height: 42px;
            padding: 10px 16px;
            font-size: 0.88rem;
        }

        body.session-detail-active .git-panel {
            grid-column: 2;
            grid-row: 1;
            z-index: 1;
            min-width: 0;
            min-height: var(--session-toolbar-height);
            height: auto;
            padding: 6px 12px 6px 6px;
            column-gap: 12px;
            row-gap: 1px;
            font-size: 0.88rem;
            background: transparent;
            border-right: 0;
        }

        body.session-detail-active .git-panel.visible {
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                auto
                auto
                auto;
            grid-template-rows: auto auto;
            align-items: center;
            align-content: center;
            justify-content: stretch;
        }

        body.session-detail-active .git-branch {
            grid-column: 1;
            grid-row: 1;
            min-width: 0;
            max-width: min(360px, 28vw);
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.15;
        }

        body.session-detail-active #git-branch-name {
            min-width: 0;
            max-width: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        body.session-detail-active #git-pr-container {
            grid-column: 2;
            grid-row: 1;
            /* Not `min-width: 0`. That waives a grid item's automatic minimum
               size, so this `auto` track shrinks below the badge's own
               min-content and the badge overflows it -- into the stats column
               to its right, which is why a staged/modified count appeared to
               sit on the gear. Measured at its worst: a 32.4px track holding a
               71.6px badge, overlapping the stats by 27.3px.

               The badge is small, fixed-width content that cannot usefully be
               narrowed -- "PR #12345" plus a gear -- so it keeps its size and
               the row gives way elsewhere: the path owns row 2, and the stats
               beside it already clip themselves at `max-width: 96px`. */
            min-width: max-content;
            justify-self: start;
        }

        body.session-detail-active .git-stats {
            grid-column: 3;
            grid-row: 1 / 3;
            flex: 0 0 auto;
            align-self: center;
            gap: 8px;
            min-width: 0;
            max-width: 96px;
            overflow: hidden;
            color: var(--text-secondary);
            font-weight: 500;
        }

        body.session-detail-active .git-stat {
            display: block;
            min-width: 0;
            max-width: 3.6ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        body.session-detail-active .git-toggle {
            grid-column: 4;
            grid-row: 1 / 3;
            align-self: stretch;
            margin-left: 0;
            padding: 5px 8px;
            border-left: 1px solid var(--border);
        }

        body.session-detail-active .git-files {
            grid-column: 1 / -1;
            grid-row: 3;
        }

        body.session-detail-active .session-task-strip {
            grid-column: 1 / -1;
            grid-row: 11;
            z-index: 1;
            min-width: 0;
        }

        body.session-detail-active .terminal-area {
            grid-column: 1 / -1;
            grid-row: 12;
            min-height: 0;
            padding: var(--session-content-gutter-y) var(--session-content-gutter-x) 0;
            background: color-mix(in srgb, var(--bg-primary), var(--bg-secondary) 12%);
            border-top: 1px solid color-mix(in srgb, var(--border), var(--text-secondary) 24%);
        }

        body.session-detail-active .terminal-container {
            border: 1px solid color-mix(in srgb, var(--border), var(--text-secondary) 24%);
            border-radius: 6px;
            background: var(--bg-primary);
            box-shadow:
                0 0 0 1px color-mix(in srgb, var(--bg-primary), var(--text-muted) 18%),
                inset 0 0 0 1px rgba(255, 255, 255, 0.018);
        }

        body.session-detail-active #terminals-wrapper > div {
            bottom: 0;
            padding: 12px 14px;
            /* xterm's FitAddon sizes the grid from this element's computed
               width and height and does not subtract its padding. Under the
               global border-box that computed size includes the padding, so
               the grid came out ~3.5 columns and ~1.5 rows larger than the
               visible viewport: the right edge drew under the scrollbar and
               right-aligned provider text wrapped. Content-box makes the
               computed size the room the grid actually has. */
            box-sizing: content-box;
        }

        body.session-detail-active #sdk-input-bar {
            grid-column: 1 / -1;
            grid-row: 15;
        }

        body.session-detail-active .session-context-actions {
            grid-column: 1 / -1;
            grid-row: 14;
        }

        body.session-detail-active .terminal-input-held {
            grid-column: 1 / -1;
            grid-row: 13;
        }

        body.session-detail-active .mobile-toolbar {
            grid-column: 1 / -1;
            grid-row: 16;
        }

        @media (min-width: 769px) {
            body.session-detail-active .mobile-toolbar {
                justify-self: center;
                width: auto;
                margin: 0 0 8px;
                padding: 6px;
                gap: 6px;
                border: 1px solid var(--border);
                border-radius: 8px;
                background: color-mix(in srgb, var(--bg-secondary), var(--bg-primary) 8%);
                box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
            }

            body.session-detail-active .toolbar-btn {
                flex: 0 0 44px;
                width: 44px;
                min-width: 44px;
                max-width: 44px;
                height: 34px;
                padding: 0;
                font-size: 1rem;
            }

            body.session-detail-active .more-actions {
                position: absolute;
                right: calc(50% - 204px);
                bottom: 62px;
                z-index: 1500;
                width: min(360px, calc(100vw - 24px));
                padding: 8px;
                border: 1px solid var(--border);
                border-radius: 8px;
                box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
            }

            #mobile-schedule-followup {
                display: none;
            }
        }

        @media (max-width: 1120px) {
            body.session-detail-active {
                --session-toolbar-height: 50px;
                --session-content-gutter-x: 10px;
                --session-content-gutter-y: 8px;
            }

            body.session-detail-active .git-branch {
                max-width: min(230px, 26vw);
            }

            body.session-detail-active #git-pr-container {
                max-width: 82px;
                overflow: hidden;
            }

            body.session-detail-active .git-stats {
                max-width: 76px;
                gap: 6px;
            }

            body.session-detail-active .tab-overflow-dropdown {
                width: clamp(380px, 56vw, 620px);
            }
        }

        @media (max-width: 768px) {
            body.session-detail-active {
                --session-mobile-header-height: 43px;
                --session-toolbar-height: 38px;
                --session-content-gutter-x: 6px;
                --session-content-gutter-y: 6px;
            }

            body.session-detail-active header {
                top: 0;
                right: 0;
                left: 0;
                width: auto;
                min-height: var(--session-mobile-header-height);
                padding: 4px 10px;
                background: var(--bg-secondary);
                border-bottom: 1px solid var(--border);
            }
            body.update-available.session-detail-active header {
                top: var(--update-banner-height);
            }

            body.session-detail-active header .logo {
                display: block;
                font-size: 0.9rem;
            }

            body.session-detail-active .header-menu-btn {
                width: 34px;
                min-width: 34px;
                height: 34px;
            }

            body.session-detail-active #session-view {
                display: flex !important;
                flex-direction: column;
                isolation: auto;
            }

            body.session-detail-active #session-view::before {
                display: none;
            }

            body.session-detail-active #session-view::after {
                display: none;
            }

            body.session-detail-active .session-toolbar {
                min-height: var(--session-toolbar-height);
                height: var(--session-toolbar-height);
                width: auto;
                margin-top: var(--session-mobile-header-height);
                padding: 4px 10px;
                border-right: 0;
                gap: 6px;
                background: var(--bg-secondary);
                border-bottom: 1px solid var(--border);
            }

            body.session-detail-active .session-title {
                font-size: 0.8rem;
                flex: 1 1 auto;
                margin-left: 0;
                max-width: none;
                text-align: left;
            }

            /* This is the surface the marker exists for -- no tab bar, no
               hover, so the badge and the provider name are the only answer
               to "whose agent is this?" available here. Kept, shrunk, and
               pinned: letting it compete with a long session title rendered
               "Cod… · workstati…" at 430px, which identifies neither. Half
               the row at most, so the session name always keeps the rest. */
            body.session-detail-active .session-setup {
                font-size: 0.66rem;
                padding: 1px 6px;
                gap: 4px;
                flex: 0 0 auto;
                max-width: 50%;
            }

            /* With a single enabled agent -- or with the running one disabled
               and so absent from the cache -- there is no number, and this is
               the one size with no hover to fall back on. Dropping the name
               here left the header naming a provider and no host at all, with
               the answer only in a tooltip no phone can open
               (fnd-008a2bc93f86). */
            body.session-detail-active .session-setup.is-unnumbered
                .session-setup-agent {
                display: block;
            }

            /* Every pixel of the pill here is host name: 3px, not 4-5px, of
               space around the dot keeps a letter of it readable at 360px
               with the Linux fallback fonts as well as Segoe UI. */
            body.session-detail-active .session-setup.is-unnumbered {
                gap: 3px;
            }
            body.session-detail-active .session-setup.is-unnumbered
                .session-setup-agent::before {
                margin-right: 3px;
            }

            /* The variant is the difference between Claude Code and Claude
               Code (Unsafe Auto). That is worth six characters on the one
               surface where the tooltip carrying it cannot be opened. */
            body.session-detail-active .session-setup-variant {
                display: inline;
            }

            body.session-detail-active .session-owner-banner {
                min-height: 32px;
                padding: 5px 8px;
                gap: 6px;
                font-size: 0.72rem;
            }
            body.session-detail-active .session-owner-icon {
                width: 18px;
                height: 18px;
            }
            body.session-detail-active .session-write-toggle {
                gap: 5px;
                font-size: 0.7rem;
            }

            body.session-detail-active .session-tools-menu {
                order: 0;
            }

            body.session-detail-active .git-panel.visible {
                display: flex;
                min-height: 30px;
                height: auto;
                padding: 0;
                gap: 6px;
                overflow: hidden;
                flex-wrap: nowrap;
                justify-content: flex-start;
            }

            body.session-detail-active .git-branch {
                grid-column: auto;
                grid-row: auto;
                min-width: 0;
                flex: 1 1 auto;
            }

            body.session-detail-active #git-branch-name {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }


            body.session-detail-active #git-pr-container,
            body.session-detail-active .git-stats {
                grid-column: auto;
                grid-row: auto;
                flex: 0 0 auto;
                max-width: 68px;
                gap: 6px;
            }

            body.session-detail-active .git-toggle {
                grid-column: auto;
                grid-row: auto;
                flex: 0 0 auto;
                margin-left: 0;
            }
        }
/* Reports & Feedback workspace */
.work-items-page-header,
.work-item-detail-header,
.session-work-item-strip,
.session-work-item-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.work-items-page-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.work-items-heading { flex: 1; min-width: 0; }
.work-items-heading h2 { margin: 0; }
.work-items-subtitle,
.work-item-muted { color: var(--text-muted); font-size: 0.82rem; }

.work-items-source-state,
.work-items-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
}

.work-item-source-chip,
.work-item-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    line-height: 1.45;
}

.work-item-source-chip.available { border-color: var(--success); }
.work-item-source-chip.unavailable,
.work-item-pill.error,
.work-item-pill.attention { border-color: var(--warning); color: var(--warning); }
.work-item-pill.source-status { font-weight: 650; }
.work-item-pill.status-last_known {
    border-color: var(--warning);
    color: var(--warning);
}
.work-item-pill.status-unknown {
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.work-item-pill.unread { background: var(--accent); color: white; border-color: var(--accent); }
.work-item-pill.deleted { opacity: 0.68; }
.session-work-badge.delegated { border-color: var(--accent); }
.session-work-badge.status-last_known,
.session-work-badge.status-unknown { border-color: var(--warning); color: var(--warning); }

.work-items-filters label {
    display: grid;
    gap: 3px;
    min-width: 120px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.work-items-filters input,
.work-items-filters select {
    min-height: 32px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
}

.work-items-layout {
    display: grid;
    grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
    height: calc(100vh - 245px);
    min-height: 440px;
}

.work-items-list-pane,
.work-item-detail-pane { overflow: auto; }
.work-items-list-pane { border-right: 1px solid var(--border); }
.work-items-list { display: grid; }

.work-item-row {
    display: grid;
    gap: 7px;
    width: 100%;
    padding: 13px 15px;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

.work-item-row:hover,
.work-item-row.selected { background: var(--bg-tertiary); }
.work-item-row.unread { box-shadow: inset 3px 0 var(--accent); }
.work-item-row-top,
.work-item-row-session { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.72rem; }
.work-item-row-badges { display: flex; flex-wrap: wrap; gap: 5px; }

.work-item-detail { padding: 18px; }
.work-item-detail-header { align-items: flex-start; justify-content: space-between; }
.work-item-detail-header h3 { margin: 4px 0 0; overflow-wrap: anywhere; }
.work-item-eyebrow { color: var(--accent); font-size: 0.75rem; text-transform: uppercase; }
.work-item-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.work-item-session-action { border-color: var(--accent); color: var(--accent); }
.work-item-detail-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.work-item-external-link { color: var(--accent); }
.work-item-mobile-back { display: none; margin-bottom: 8px; }

.work-item-trust-notice,
.work-item-deleted-state,
.work-item-source-warning {
    margin: 14px 0;
    padding: 9px 11px;
    border: 1px solid var(--warning);
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.work-item-source-warning {
    display: grid;
    gap: 3px;
    color: var(--warning);
}
.work-item-source-warning span { color: var(--text-muted); }

.work-item-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 14px 0;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.work-item-info-grid > div { background: var(--bg-secondary); padding: 9px 11px; min-width: 0; }
.work-item-info-grid dt { color: var(--text-muted); font-size: 0.69rem; text-transform: uppercase; }
.work-item-info-grid dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.work-item-session-link { padding: 0; color: var(--accent); background: none; border: 0; }
.work-item-conversation h4 { margin: 18px 0 10px; }

.work-item-message {
    margin-bottom: 9px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.work-item-message header { display: flex; justify-content: space-between; gap: 10px; font-size: 0.76rem; }
.work-item-message header span { color: var(--text-muted); text-align: right; }
.work-item-message-body { margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.work-item-message.deleted { opacity: 0.72; }
.work-item-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.work-item-attachment { color: var(--accent); font-size: 0.76rem; }
.work-item-loading,
.work-item-empty,
.work-item-error { padding: 22px; color: var(--text-muted); }
.work-item-error { color: var(--error); }
.work-items-more { display: block; margin: 10px auto; }

.session-work-item-strip {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
    font-size: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.session-work-item-summary,
.session-work-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.session-work-item-summary { min-width: 0; }
.session-work-item-actions { margin-left: auto; }

.session-work-item-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 5px 10px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 7px;
    font: inherit;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.session-work-item-action.primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.session-work-item-action:hover { border-color: var(--accent); }
.session-work-item-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.session-work-item-sidebar {
    display: none;
    flex: 0 0 min(380px, 42vw);
    min-width: 280px;
    overflow: hidden;
    border-left: 1px solid var(--border);
    background: var(--bg-primary);
}

.session-work-item-sidebar.open { display: flex; flex-direction: column; }
.session-work-item-sidebar-header { justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--border); }
.session-work-item-sidebar-body { overflow: auto; padding: 10px; }
.work-item-sidebar-meta { display: grid; gap: 5px; margin-bottom: 8px; }
.work-item-sidebar-meta span { color: var(--text-muted); font-size: 0.76rem; }
.work-item-sidebar-meta a { color: var(--accent); font-size: 0.78rem; }

@media (max-width: 768px) {
    #header-work-items-btn { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    .work-items-page-header { padding: 10px; }
    .work-items-subtitle { display: none; }
    .work-items-source-state,
    .work-items-filters { padding: 8px 10px; }
    .work-items-filters { flex-wrap: nowrap; overflow-x: auto; }
    .work-items-filters label { min-width: 126px; }
    .work-items-layout { display: block; height: calc(100vh - 220px); }
    .work-items-list-pane { height: 100%; border-right: 0; }
    .work-item-detail-pane {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 80;
        background: var(--bg-primary);
    }
    .work-item-detail-pane.mobile-open { display: block; }
    .work-item-detail { padding: 12px; }
    .work-item-mobile-back { display: block; }
    .work-item-info-grid { grid-template-columns: 1fr; }
    .session-work-item-sidebar {
        position: fixed;
        inset: 48px 0 0;
        z-index: 85;
        min-width: 0;
        width: 100%;
        border-left: 0;
    }
    .session-work-item-strip {
        gap: 6px;
        overflow: visible;
        flex-wrap: wrap;
    }
    .session-work-item-summary {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .session-work-item-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: nowrap;
    }
    .session-work-item-action {
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        padding: 7px 8px;
    }
}

/* Dashboard mobile layout: header and session cards use deliberate rows so
   identity, navigation, and metadata never compete for the same width. */
@media (max-width: 768px) {
    body:not(.session-detail-active) header {
        display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px;
    }
    body:not(.session-detail-active) header .logo { font-size: 1rem; }
    body:not(.session-detail-active) .user-menu { margin-left: auto; padding: 0; font-size: 12px; }
    body:not(.session-detail-active) #user-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
    body:not(.session-detail-active) .header-dropdown { top: calc(100% + 6px); }

    body:not(.session-detail-active) #sessions-view {
        width: 100%;
        min-width: 0;
        padding: 10px;
        overflow-x: hidden;
    }

    body:not(.session-detail-active) .sessions-list,
    body:not(.session-detail-active) .agent-group,
    body:not(.session-detail-active) .agent-sessions {
        width: 100%;
        min-width: 0;
    }

    body:not(.session-detail-active) .sessions-list { gap: 10px; }
    body:not(.session-detail-active) .agent-group { gap: 6px; }
    body:not(.session-detail-active) .agent-sessions {
        gap: 8px;
        padding-left: 0;
        border-left: 0;
    }

    body:not(.session-detail-active) .agent-header {
        min-width: 0;
        padding: 6px 2px;
    }

    body:not(.session-detail-active) .agent-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.session-detail-active) .session-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 10px;
        overflow: hidden;
    }

    body:not(.session-detail-active) .session-card.session-child {
        width: calc(100% - 4px);
        margin-left: 4px !important;
    }

    body:not(.session-detail-active) .session-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        width: 100%;
        min-width: 0;
        margin-bottom: 8px;
    }

    body:not(.session-detail-active) .session-identity {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
    }

    body:not(.session-detail-active) .session-summary-status {
        flex: 0 0 auto;
        margin-right: 7px;
    }

    body:not(.session-detail-active) .session-name {
        display: -webkit-box;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        font-size: 0.95rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body:not(.session-detail-active) .session-metadata-badges {
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 4px;
        overflow: hidden;
    }

    body:not(.session-detail-active) .session-metadata-badges > * {
        flex: 0 1 auto;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.session-detail-active) .session-work-badge,
    body:not(.session-detail-active) .session-owner-badge,
    body:not(.session-detail-active) .session-provider,
    body:not(.session-detail-active) .session-usage,
    body:not(.session-detail-active) .session-open-badge,
    body:not(.session-detail-active) .session-status {
        min-height: 20px;
        padding: 3px 6px;
        font-size: 0.66rem;
        line-height: 1.1;
    }

    body:not(.session-detail-active) .session-summary-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        width: 100%;
        min-width: 0;
        margin-bottom: 7px;
    }

    body:not(.session-detail-active) .session-summary-text,
    body:not(.session-detail-active) .session-last-activity {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.session-detail-active) .session-summary-text {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    body:not(.session-detail-active) .session-last-activity {
        margin-left: 0;
        font-size: 0.68rem;
        line-height: 1.2;
    }

    body:not(.session-detail-active) .session-path {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        font-size: 0.74rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
    }

    body:not(.session-detail-active) .session-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
        min-width: 0;
        margin-top: 8px;
        overflow: hidden;
    }

    body:not(.session-detail-active) .session-card-actions button {
        flex: 0 1 auto;
        max-width: 100%;
        min-width: 0;
        min-height: 30px;
        padding: 4px 8px;
        overflow: hidden;
        font-size: 0.7rem;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Fleet layout uses a side rail on desktop and a queue on phones.
   index.js toggles body.fleet-layout with orientation and viewport changes. */

.fleet-sidebar {
    display: none;
}

.back-label-list { display: none; }
.fleet-list-edge-btn { display: none; }

body.fleet-layout {
    /* The custom width is the owner's drag of the rail's edge (index.js keeps
       it within bounds); collapsing still overrides the result below. */
    --fleet-sidebar-width: var(--fleet-sidebar-custom-width, 320px);
}

.fleet-rail-resize { display: none; }

@media (min-width: 769px) {
    body.fleet-layout .session-tabs-container {
        display: none !important;
    }

    body.fleet-layout #session-view {
        padding-left: var(--fleet-sidebar-width);
    }

    /* The dense-chrome header bands are fixed and span the viewport; keep
       them off the rail. */
    body.fleet-layout.session-detail-active #session-view::before,
    body.fleet-layout.session-detail-active #session-view::after {
        left: var(--fleet-sidebar-width);
    }

    body.fleet-layout .fleet-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--fleet-sidebar-width);
        background: var(--bg-secondary);
        border-right: 1px solid var(--border);
        z-index: 1710;
        overflow: hidden;
        font-size: 0.875rem;
    }
}

.fleet-sidebar-head {
    flex: 0 0 auto;
    padding: 8px 10px 7px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}

.fleet-sidebar-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fleet-sidebar-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.fleet-layout-switch {
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.fleet-layout-switch:hover {
    color: var(--accent);
}

.fleet-sidebar-counts {
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.fleet-sidebar-list {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.fleet-section-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px 5px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fleet-section-head.needs {
    color: var(--wait-stale);
}

.fleet-section-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.fleet-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marks name meta";
    align-items: center;
    column-gap: 5px;
    padding: 6px 8px 6px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 45%);
    cursor: pointer;
    border-left: 3px solid transparent;
}

.fleet-row:hover {
    background: color-mix(in srgb, var(--bg-primary), var(--text-primary) 6%);
}

.fleet-row.active {
    background: color-mix(in srgb, var(--accent), transparent 82%);
}

.fleet-row.active .fleet-row-name {
    color: var(--text-primary);
}

.fleet-row-marks {
    grid-area: marks;
    display: flex;
    align-items: center;
    gap: 3px;
}

.fleet-row-name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-weight: 600;
}

.fleet-row-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.fleet-row .attention-indicator {
    color: var(--error);
    font-weight: 800;
}

.fleet-row .fleet-wait {
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.fleet-row .fleet-wait .wait-kind {
    margin-right: 3px;
    opacity: 0.75;
    font-size: 0.85em;
}

.fleet-row .fleet-wait.wait-age-fresh { color: var(--wait-fresh); font-weight: 650; }
.fleet-row .fleet-wait.wait-age-mid { color: var(--wait-mid); font-weight: 700; }
.fleet-row .fleet-wait.wait-age-warn { color: var(--wait-warn); font-weight: 750; }
.fleet-row .fleet-wait.wait-age-stale { color: var(--wait-stale); font-weight: 800; }
.fleet-row .fleet-wait.wait-age-busy { color: var(--text-muted); font-weight: 500; }
.fleet-row .fleet-wait.wait-kind-task-attention { color: var(--error); font-weight: 750; }

.fleet-row .tab-menu-btn {
    opacity: 0;
    font-size: 0.75rem;
}

.fleet-row:hover .tab-menu-btn,
.fleet-row.active .tab-menu-btn {
    opacity: 0.75;
}

/* The gear stays in the button. While the pointer is in the link zone it
   takes no space and the link mark is drawn in its place, so leaving the
   zone puts the gear back without rewriting the row. */
.session-tab.drag-link .tab-menu-btn,
.fleet-row.drag-link .tab-menu-btn,
body.session-detail-active .session-tab.drag-link .tab-menu-btn {
    font-size: 0;
    opacity: 1;
    color: var(--accent);
}
.session-tab.drag-link .tab-menu-btn::before,
.fleet-row.drag-link .tab-menu-btn::before,
body.session-detail-active .session-tab.drag-link .tab-menu-btn::before {
    content: '🔗';
    font-size: 14px;
    line-height: 1;
}

/* A parent and the sessions it spawned share a hue, the same way the top
   tab bar colours a cluster, so a rolled-up family reads as one thing. */
.fleet-row.fleet-row-grouped {
    border-left-color: var(--fleet-group-color, transparent);
}

.fleet-row.fleet-row-grouped:not(.active) {
    background: color-mix(in srgb, var(--fleet-group-color) 11%, transparent);
}

/* Room for the connector to turn into the name. */
.fleet-row.fleet-row-child .fleet-row-name {
    padding-left: var(--fleet-indent, 16px);
}

/* In every category, emphasize its own members only while unread. Relatives
   brought along with the family still recede, even with an unread update. */
.fleet-row.fleet-row-category-member.fleet-row-unread .fleet-row-name {
    color: var(--text-primary);
    font-weight: 750;
}

.fleet-row.fleet-row-bystander:not(.active) .fleet-row-name {
    color: var(--text-muted);
    font-weight: 500;
}

/* A session that ended while the page was not listening. Its tab is closed on
   the next snapshot, so what wears this is the tab being read, which is kept
   on purpose. Dimmed rather than tinted like the tab bar's zombie: on the rail
   the section already says Quiet, and an error-coloured row would pull the eye
   to the one thing on the page that needs nothing. */
.fleet-row.fleet-row-ended .fleet-row-name {
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--text-muted), transparent 50%);
}

.fleet-row-ended-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Touch target: the rail is the whole session list on a phone. */
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--error), transparent 55%);
    border-radius: 5px;
    background: color-mix(in srgb, var(--error), transparent 80%);
    color: var(--error);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.fleet-row-ended-close:hover {
    background: var(--error);
    color: #fff;
}

/* Only shown when the session being waited on is not itself on the rail, so
   the curve cannot say it. */
/* In the marks cell, not the name: the name ellipsizes, and a marker after a
   long name is laid out past the clip and never seen. */
.fleet-row-blocked {
    flex: 0 0 auto;
    color: var(--wait-warn);
    opacity: 0.85;
}

.fleet-connectors {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}

.fleet-connectors path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.55;
}


.fleet-hidden-owners {
    display: block;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
}

.fleet-hidden-owners:hover {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-primary), var(--text-primary) 6%);
}

.fleet-empty {
    padding: 14px 10px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.fleet-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.fleet-empty-actions .fleet-chip {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* The desktop rail sits beside the session toolbar and its back arrow. */
.fleet-dashboard-link {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
}

.fleet-dashboard-link:hover {
    color: var(--accent);
}

/* Collapse the rail when the terminal cannot share the width at a readable
   font size. Keep the handle outside the collapsed 14px strip. */

.fleet-rail-toggle {
    display: none;
}

@media (min-width: 769px) {
    body.fleet-layout .fleet-rail-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: var(--fleet-sidebar-width);
        transform: translate(-50%, -50%);
        width: 16px;
        height: 46px;
        padding: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 0 4px 4px 0;
        color: var(--text-muted);
        font-size: 0.8rem;
        line-height: 1;
        cursor: pointer;
        z-index: 1711;
    }

    body.fleet-layout .fleet-rail-toggle:hover {
        color: var(--text-primary);
        background: var(--bg-primary);
    }

    /* Painted over the rail's right edge. After the rail in the DOM at the
       same z-index, so it sits above it; the collapse toggle (1711) sits
       above both. */
    body.fleet-layout .fleet-rail-resize {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(var(--fleet-sidebar-width) - 3px);
        width: 6px;
        z-index: 1710;
        cursor: col-resize;
        touch-action: none;
    }

    body.fleet-layout .fleet-rail-resize:hover,
    body.fleet-layout .fleet-rail-resize:focus-visible,
    body.fleet-rail-resizing .fleet-rail-resize {
        background: color-mix(in srgb, var(--accent) 45%, transparent);
        outline: none;
    }

    body.fleet-layout.fleet-rail-collapsed .fleet-rail-resize {
        display: none;
    }

    body.fleet-rail-resizing,
    body.fleet-rail-resizing * {
        cursor: col-resize !important;
        user-select: none !important;
    }

    /* Collapsed: the rail keeps a sliver so the edge stays visible and the
       handle has something to sit against. */
    body.fleet-layout.fleet-rail-collapsed {
        --fleet-sidebar-width: 14px;
    }

    body.fleet-layout.fleet-rail-collapsed .fleet-sidebar-head,
    body.fleet-layout.fleet-rail-collapsed .fleet-sidebar-list {
        display: none;
    }

    body.fleet-layout.fleet-rail-collapsed .fleet-sidebar {
        border-right: 1px solid var(--border);
    }
}

/* --- Rail controls: search, sort, grouping ---------------------------- */

.fleet-search {
    width: 100%;
    margin-top: 6px;
    padding: 4px 7px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8rem;
}

.fleet-search::placeholder {
    color: var(--text-muted);
}

.fleet-search:focus {
    outline: none;
    border-color: var(--accent);
}

.fleet-sidebar-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.fleet-sidebar-controls .fleet-sidebar-counts {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-chip {
    flex: 0 0 auto;
    padding: 2px 6px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.7rem;
    line-height: 1.5;
    cursor: pointer;
}

.fleet-chip:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.fleet-chip.on {
    color: var(--accent);
    border-color: var(--accent);
}

/* Manual order drags on the rail as it does on the bar. */
.fleet-row.dragging { opacity: 0.5; }

/* The tab bar exposes the rail's list options in a dropdown.
   Its count shows how many open tabs the options hide. */
.tab-list-menu-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 10px;
    background: var(--bg-secondary);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
}
.tab-list-menu-btn:hover,
.tab-list-menu-btn[aria-expanded="true"] { background: var(--bg-tertiary); color: var(--text-primary); }
.tab-list-menu-btn.filtered { color: var(--accent); }
.tab-list-hidden-chip {
    flex-shrink: 0;
    align-self: center;
    margin: 0 6px;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 10px;
    color: var(--accent);
    font: inherit;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
}
.tab-list-hidden-chip[hidden] { display: none; }
.tab-list-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 260px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 0.8rem;
}
.tab-list-menu.show { display: flex; flex-direction: column; gap: 8px; }
.tab-list-menu .fleet-search { margin-top: 0; }
.tab-list-menu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-muted); }
.tab-list-menu-row > span { margin-right: 2px; }
.tab-orientation-choice { display: inline-flex; gap: 4px; }

/* On phones, show either the queue or the selected terminal at full width.
   #session-view clips overflow, so constrain the queue to the available height
   and scroll its list internally to keep every row reachable. */
@media (max-width: 768px) {
    /* Keep the global header and push-health warning above the phone queue.
       The session view already starts below in-flow alerts. */
    body.fleet-layout.fleet-queue-open .fleet-sidebar {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: var(--session-mobile-header-height, 43px) 0 0;
        width: 100%;
        max-width: 100%;
        background: var(--bg-secondary);
        border-right: 0;
        overflow: hidden;
        font-size: 0.875rem;
        z-index: 1900;
    }

    /* The scrolling region. min-height: 0 is what actually lets it shrink
       inside the flex column instead of pushing the rail taller than its
       own bounds. */
    body.fleet-layout.fleet-queue-open .fleet-sidebar-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Detail mode: the queue is gone and the session has the whole screen.
       The base rule already hides .fleet-sidebar; this says so where the
       mode is decided, so a later rule that reveals the rail generally
       cannot quietly put it back on top of a terminal. */
    body.fleet-layout:not(.fleet-queue-open) .fleet-sidebar {
        display: none;
    }

    /* The top tab bar stays hidden in both modes: the queue replaces it, and
       showing both would put two competing session lists on a 390px screen. */
    body.fleet-layout .session-tabs-container {
        display: none !important;
    }

    /* No sidebar gutter to reserve when the rail is not beside anything. */
    body.fleet-layout #session-view {
        padding-left: 0;
    }

    /* Collapsing is a desktop affordance for reclaiming width from a
       terminal beside the rail. There is no terminal beside it here. The
       way between the list and a session on a phone is back and the edge
       button below, which sits mid-edge because a bottom-left float once
       covered the toolbar's first button. */
    body.fleet-layout .fleet-rail-toggle {
        display: none;
    }

    /* The queue starts below the global header and covers the session
       toolbar, back arrow included, so it carries its own way out. */
    body.fleet-layout .fleet-dashboard-link {
        display: inline;
        padding: 4px 0;
    }

    /* A phone always draws the list down the side, so the rail's "tabs on
       top" would do nothing here. The settings row stays: it is the
       preference a wider window will use, and every setting stays reachable
       at every width. */
    body.fleet-layout .fleet-layout-switch {
        display: none;
    }

    /* Center the queue control on the screen edge to clear the fixed header
       and bottom toolbar without covering their buttons. */
    body.fleet-layout:not(.fleet-queue-open) .fleet-list-edge-btn,
    body.fleet-layout.fleet-queue-open.fleet-edge-can-return .fleet-list-edge-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 30px;
        min-height: 64px;
        padding: 6px 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-right: 0;
        border-radius: 10px 0 0 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        color: var(--text-primary);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        /* Above the list (1900) so it stays on its edge while the list is
           open; below row menus (1950) and modals (1960). */
        z-index: 1920;
    }
    body.fleet-layout.list-button-left .fleet-list-edge-btn {
        right: auto;
        left: 0;
        border-right: 1px solid var(--border);
        border-left: 0;
        border-radius: 0 10px 10px 0;
    }
    .fleet-list-edge-back { display: none; }
    body.fleet-queue-open .fleet-list-edge-open,
    body.fleet-queue-open .fleet-list-edge-btn .ui-count { display: none; }
    body.fleet-queue-open .fleet-list-edge-back { display: inline; color: var(--accent); }
    /* The tab sits over the list's edge, so the rows give it that strip
       rather than slide their wait badges and gears underneath it. */
    body.fleet-layout.fleet-queue-open.fleet-edge-can-return .fleet-sidebar-list { padding-right: 30px; }
    body.fleet-layout.fleet-queue-open.fleet-edge-can-return.list-button-left .fleet-sidebar-list { padding-right: 0; padding-left: 30px; }
    .fleet-list-edge-btn .ui-count { font-size: 0.65rem; }
    .fleet-list-edge-btn .ui-count[hidden] { display: none; }

        /* From a session the arrow goes back to the list, and says so. */
    body.fleet-layout .session-toolbar .back-label-dashboard { display: none; }
    body.fleet-layout .session-toolbar .back-label-list { display: inline; }
}

/* Menus appended to body sit outside the rail's stacking context.
   Raise fleet menus above the queue, and their modals above the menus,
   so the queue cannot intercept clicks intended for either overlay. */
body.fleet-layout .tab-dropdown {
    z-index: 1950;
}

body.fleet-layout .modal-overlay {
    z-index: 1960;
}

/* Shared tokens and treatments for controls and menus. */
.session-tab, body.session-detail-active .session-tab { background: var(--bg-secondary); color: var(--text-secondary); }
.session-tab:hover, body.session-detail-active .session-tab:hover,
.session-tab.active, body.session-detail-active .session-tab.active,
.tab-overflow-item.active, .fleet-row.active { background: var(--bg-tertiary); color: var(--text-primary); }
body.session-detail-active .session-tab { border-right-color: var(--border); }
body.session-detail-active .session-tab .tab-name { color: var(--text-primary); }
body.session-detail-active .session-tab .tab-subtitle { color: var(--text-secondary); }
.ui-tab-mark { border-radius: 4px; }
.tab-agent.ui-tab-mark, .tab-owner-badge.ui-tab-mark {
    background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border);
}
.attention-indicator.ui-count {
    min-width: 14px; width: 14px; height: 14px; padding: 0;
    color: var(--text-on-warning); background: var(--warning); border-color: var(--warning);
    font-size: 10px; animation: none;
}
.fleet-section-count.ui-count { opacity: 1; height: 16px; }
.fleet-section-head { text-transform: none; letter-spacing: 0.02em; }
.fleet-row:hover { background: var(--bg-tertiary); }
.tab-dropdown.ui-menu, .tab-dropdown-submenu.ui-menu { padding: 0; }
.tab-dropdown-item.ui-menu-item { display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; font-size: 0.8rem; }
a.tab-dropdown-item.ui-menu-item { text-decoration: none; }
button.tab-dropdown-item.ui-menu-item:disabled { color: var(--text-muted); cursor: default; background: none; }
.tab-session-menu .tab-menu-label .latency-indicator { display: inline; padding: 0; background: transparent; font: inherit; }
/* One menu holds every session action, so with a mouse its rows are desktop
   menu height; a finger keeps the taller rows. */
@media (pointer: fine) {
    .tab-session-menu > .tab-dropdown-item.ui-menu-item { padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    /* Keep the popup compact even when both horizontal insets are set. */
    .tab-session-menu {
        width: 260px;
        min-width: 0;
        max-width: calc(100vw - 16px);
        overscroll-behavior: contain;
    }
}
.tab-dropdown-item.ui-menu-item.disabled { color: var(--text-muted); }
.tab-dropdown-item.ui-menu-item.danger { color: var(--danger-on-tertiary); }
body.session-detail-active .session-toolbar, body.session-detail-active .git-panel {
    background: var(--bg-secondary); border-color: var(--border);
}
body.session-detail-active .session-toolbar button {
    box-shadow: none; border-color: var(--border); background: var(--bg-tertiary); color: var(--text-primary);
}
body.session-detail-active .header-dropdown,
body.session-detail-active .tab-overflow-dropdown { border-radius: 6px; }
@media (max-width: 768px) {
    body.session-detail-active header { width: auto; flex-wrap: nowrap; align-items: center; gap: 8px; }
    body.session-detail-active .header-actions { flex-wrap: nowrap; align-items: center; }

}
@media (max-width: 1120px) {
    #sessions-view { overflow-y: auto; }
    .sessions-content { margin-left: 0; height: auto; overflow: visible; }
    #sessions-sidebar {
        position: static; width: auto; overflow: visible; border-right: 0;
        border-bottom: 1px solid var(--border); padding: 0 0 12px; margin-bottom: 16px; gap: 14px;
    }
    #agent-filter-bar { flex-direction: row; overflow-x: auto; }
    #agent-filter-bar .agent-filter-pill { width: auto; flex: 0 0 auto; }
    .quota-strip { flex-direction: row; overflow-x: auto; gap: 10px; }
    .quota-provider { min-width: 200px; flex: 0 0 200px; }
    .sidebar-usage-button { padding: 8px; }
}

/* Reviews: put the decision ahead of the evidence, and the raw record last.
   The existing action elements and mobile list/detail transition are retained. */
.reviews-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); background: var(--bg-primary); }
.reviews-list-pane, .review-detail-pane { background: var(--bg-primary); }
.reviews-list { padding: 12px; gap: 8px; }
.review-list-item { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); }
.review-list-item.needs-decision { border-left: 3px solid var(--warning); }
.review-list-item.selected { border-color: var(--accent); box-shadow: none; }
.review-list-identity { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.review-list-title { white-space: normal; line-height: 1.4; font-weight: 600; color: var(--text-primary); }
.review-list-topline { flex-wrap: wrap; }
.review-list-decision { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 0.75rem; color: var(--text-secondary); }
.needs-decision .review-list-decision { color: var(--warning); }
.review-round-meter { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.review-round-meter i { width: 7px; height: 7px; border-radius: 2px; background: var(--border); }
.review-round-meter i.used { background: var(--accent); }
.review-round-meter i.gated { background: transparent; border: 1px dashed var(--text-muted); }
.review-round-meter > span { margin-left: 4px; font-variant-numeric: tabular-nums; font-size: 0.68rem; }
.review-status-badge, .review-finding-badge, .review-ci-chip { text-transform: none; letter-spacing: normal; border-radius: 4px; font-weight: 600; }
.reviews-filter { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-secondary); font-weight: 500; }
.review-detail { padding: 22px; }
.review-detail-title { font-size: 1.25rem; font-weight: 600; }
.review-detail-subtitle { font-size: 0.78rem; margin: 8px 0 18px; }
.review-decision-bar { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-secondary); }
.review-decision-main { padding: 18px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.review-verdict { flex: 1 1 200px; min-width: 0; display: grid; gap: 6px; }
.review-verdict strong { font-size: 1rem; font-weight: 600; }
.review-verdict > span { font-size: 0.8rem; color: var(--text-secondary); }
.review-decision-main .review-detail-actions { flex: 1 1 300px; margin: 0; justify-content: flex-end; }
.review-detail-actions .primary { order: -1; }
.review-page-action { font-weight: 600; background: var(--bg-secondary); }
.review-page-action.danger { color: var(--error); border-color: var(--border); }
.review-page-action:hover:not(:disabled) { border-color: var(--accent); }
.review-decision-gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.review-gate { padding: 12px 16px; min-width: 0; border-right: 1px solid var(--border); overflow-wrap: anywhere; }
.review-gate:last-child { border-right: 0; }
.review-gate > span { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 6px; }
.review-gate > div { font-size: 0.82rem; }
.review-gate small { display: block; margin-top: 6px; font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary); }
.review-gate .ok { color: var(--success); }
.review-gate .warn { color: var(--warning); }
.review-gate .bad { color: var(--error); }
.review-decision-note { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--warning); overflow-wrap: anywhere; }
.review-detail-section { margin-top: 24px; }
.review-detail-section h3 { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.review-pipeline { list-style: none; display: flex; overflow-x: auto; padding: 6px 0 10px; }
.review-pipeline-step { position: relative; flex: 1 0 110px; min-width: 0; text-align: center; font-size: 0.7rem; color: var(--text-secondary); padding: 0 8px; }
.review-pipeline-step::before { content: ''; position: absolute; height: 1px; background: var(--border); top: 9px; left: -50%; width: 100%; }
.review-pipeline-step:first-child::before { display: none; }
.review-pipeline-dot { position: relative; display: block; width: 18px; height: 18px; border: 2px solid var(--text-muted); border-radius: 50%; background: var(--bg-primary); margin: 0 auto 8px; }
.review-pipeline-step.report .review-pipeline-dot { border-color: var(--accent); }
.review-pipeline-step small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 0.65rem; }
.review-finding { padding: 14px; background: var(--bg-secondary); }
.review-finding-head { flex-wrap: wrap; }
.review-finding-title { flex-basis: 160px; font-weight: 600; }
.review-finding-detail { line-height: 1.6; }
.review-thread { border-left: 1px solid var(--border); margin-left: 6px; padding-left: 18px; }
.review-turn { position: relative; padding: 12px 14px; margin-top: 12px; background: var(--bg-secondary); }
.review-turn::before { content: ''; position: absolute; top: 15px; left: -24px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.review-turn.event::before { background: var(--text-muted); }
.review-turn .review-record-head { flex-wrap: wrap; align-items: baseline; }
.review-turn-who { font-size: 0.75rem; color: var(--text-primary); overflow-wrap: anywhere; }
.review-turn .review-record-title { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.review-turn time { margin-left: auto; font-size: 0.68rem; color: var(--text-muted); }
.review-turn .review-event { border: 0; padding: 0; background: transparent; }
.review-turn .review-event summary { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.review-full-record { margin-top: 24px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); }
.review-full-record > summary { cursor: pointer; font-size: 0.82rem; color: var(--text-secondary); }
.review-full-record .review-detail-grid { margin: 16px 0 0; }
.review-full-record .review-detail-field { background: transparent; }
.review-full-record .review-detail-field-label { text-transform: none; letter-spacing: normal; }
@media (max-width: 1000px) {
    .review-decision-gates { grid-template-columns: 1fr; }
    .review-gate { border-right: 0; border-bottom: 1px solid var(--border); }
    .review-gate:last-child { border-bottom: 0; }
    .review-decision-main .review-detail-actions { justify-content: flex-start; }
}
@media (max-width: 900px) {
    .reviews-layout { grid-template-columns: 1fr; }
    .review-detail { padding: 14px; }
}

/* The remaining destinations share the session chrome's tokens and small
   labels. Their layout tracks, breakpoints, menus and actions stay in place. */
#agents-modal .modal, #usage-modal .modal { background: var(--bg-primary); border-color: var(--border); }
#agents-modal h2, #usage-modal h2, .work-items-heading h2,
.artifacts-heading h2, .scheduled-heading h2 { font-weight: 600; }
.agents-section-title, .usage-total-label, .usage-table th,
.work-item-eyebrow, .work-item-info-grid dt { text-transform: none; letter-spacing: normal; }
.agent-card, .usage-total-card { background: var(--bg-secondary); border-color: var(--border); border-radius: 8px; }
.agent-status-dot { background: var(--success); }
.agent-step-number { color: var(--text-on-accent); }
.agent-card-enable-btn, .agent-download-btn { background: var(--bg-secondary); }
.agent-card-enable-btn:hover, .agent-download-btn:hover { background: var(--bg-tertiary); border-color: var(--accent); }
.agent-provider-slug { font-variant-numeric: tabular-nums; }
.usage-tab { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary); color: var(--text-secondary); }
.usage-tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)); border-color: var(--accent); }
.usage-table th { background: var(--bg-secondary); }
.usage-table tbody tr:hover { background: var(--bg-secondary); }
.usage-total-value { font-variant-numeric: tabular-nums; font-weight: 600; }
body.fleet-layout .fleet-sidebar { background: var(--bg-primary); }
.fleet-section-head { color: var(--text-muted); font-weight: 600; }
.fleet-row { border-bottom-color: var(--border); }
.work-item-row { background: var(--bg-secondary); }
.work-item-row strong, .scheduled-card-top strong { font-weight: 600; }
.work-item-source-chip, .work-item-pill, .scheduled-status { border-radius: 4px; }
.work-item-pill.unread { color: var(--text-on-accent); }
.work-item-message, .work-item-info-grid, .artifact-card { border-radius: 8px; border-color: var(--border); }
.work-item-message header { background: transparent; }
.artifact-card { box-shadow: none; }
.artifact-card-title { font-weight: 600; }
.artifact-card-actions a, .artifacts-filter-actions .secondary,
.scheduled-filter, .scheduled-refresh-btn { background: var(--bg-secondary); color: var(--text-secondary); }
.scheduled-filter { font-weight: 500; }
.scheduled-filter.active { background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)); color: var(--accent); }
.scheduled-card { background: var(--bg-secondary); }
.scheduled-status { text-transform: none; letter-spacing: normal; font-weight: 600; }
.work-items-page-header > button, .work-items-filters > button,
.work-item-detail-actions > button, .schedule-approval-panel button, #owner-request-panel button,
#usage-modal .modal-actions > button {
    font-family: inherit; font-size: 0.8rem; font-weight: 500;
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
}
.work-items-page-header > button:hover, .work-items-filters > button:hover,
.work-item-detail-actions > button:hover, .schedule-approval-panel button:hover, #owner-request-panel button:hover,
#usage-modal .modal-actions > button:hover { border-color: var(--accent); }
.schedule-approval-panel .primary, #owner-request-panel .primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.schedule-approval-panel .message-approval-kicker { text-transform: none; letter-spacing: normal; color: var(--text-muted); }

/* Push health stays visible while the Settings menu is closed. */
.push-health-warning { display: flex; gap: 12px; align-items: center; padding: 8px 16px; background: var(--bg-secondary); color: var(--text-primary); border-bottom: 2px solid #c98b28; font-size: 13px; flex-shrink: 0; }
.push-health-warning[hidden] { display: none; }
.push-health-warning button { flex-shrink: 0; padding: 4px 8px; cursor: pointer; }
.settings-menu-btn.push-warning, #settings-menu-btn.push-warning { box-shadow: inset 0 -2px #c98b28; }
.push-device-health { max-width: 300px; white-space: normal; font-size: 11px; padding: 0 12px; }
.push-device-health div { margin: 8px 0; }

body.session-detail-active .push-health-warning { min-height: 43px; padding-right: var(--session-header-reserved-right); }
@media (max-width: 768px) {
    body.session-detail-active .push-health-warning { margin-top: var(--session-mobile-header-height); padding-right: 16px; }
    body.session-detail-active:has(.push-health-warning:not([hidden])) .session-toolbar { margin-top: 0; }
}

/* Permanent places/settings menus and session identity. No width measurement or
   DOM relocation: only text tracks shrink, while actions keep their hit area. */
.header-actions { justify-content: flex-end; flex-wrap: nowrap; }
#workspace-menu-btn, #settings-menu-btn { position: relative; }
#workspace-menu-btn.needs-attention::after, #settings-menu-btn.disconnected::after {
    content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--warning);
}
#settings-menu-btn.disconnected::after { background: var(--error); }
.settings-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 10px; }
body .settings-account #user-menu { margin: 0; padding: 0; border: 0; min-width: 0; }
body .settings-account #user-name { max-width: none; overflow-wrap: anywhere; white-space: normal; }
.settings-account #connection-dot { flex-shrink: 0; }
.settings-account .logout-link { width: auto; flex-shrink: 0; }
#settings-menu .ui-menu-item { background: transparent; box-shadow: none; border: 0; }
#workspace-menu .ui-menu-item:hover, #settings-menu .ui-menu-item:hover { background: var(--bg-tertiary); }
body.session-detail-active .session-toolbar { position: relative; gap: 10px; }
body.session-detail-active .session-tools-menu { display: block; flex: 0 0 auto; min-width: 0; max-width: min(32vw, calc(100% - 540px)); }
body.session-detail-active #session-tools-btn {
    display: flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%;
    padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--text-secondary);
}
body.session-detail-active #current-session-name { flex: 0 1 auto; font-size: 0.95rem; }
body.session-detail-active #session-tools-btn > [aria-hidden] { flex-shrink: 0; color: var(--text-muted); }
body.session-detail-active #session-folder { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
/* Reserve a readable path tail plus the icon, including while feedback shows. */
body.session-detail-active #session-folder:has(#session-folder-copy-status:not(:empty)) { min-width: 158px; }
body.session-detail-active #session-folder[hidden] { display: none; }
#session-folder-copy { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 5px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
#session-folder-copy:hover { background: var(--bg-tertiary); color: var(--text-primary); }
#session-folder-copy svg { width: 16px; height: 16px; }
#session-folder-copy-status { flex: 1 0 60px; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
#session-folder-copy-status:empty { display: none; }
body.session-detail-active #git-repo-path {
    display: block; flex: 0 1 auto; min-width: 0; width: auto; max-width: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left;
    padding: 0; border: 0; background: transparent; color: var(--text-secondary);
    font: 0.8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: text; user-select: text; -webkit-user-select: text;
}
body.session-detail-active #git-repo-path[hidden] { display: none; }
/* Keep the project visible when a long worktree label needs truncation. */
body.session-detail-active #git-repo-path.is-worktree { direction: ltr; }
#git-repo-path bdi { direction: ltr; }
body.session-detail-active .session-setup { flex: 0 0 auto; }
body.session-detail-active .git-panel.visible { flex: 0 1 auto; min-width: 0; min-height: 34px; padding: 0; max-width: clamp(200px, 20vw, 360px); grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: auto; }
body.session-detail-active .git-stats, body.session-detail-active .git-toggle { grid-row: 1; }
body.session-detail-active .session-toolbar #git-toggle { background: transparent; }
body.session-detail-active #header-new-session-btn { display: inline-flex; }

#session-activity-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
#session-activity-controls[hidden] { display: none; }
#session-activity-controls .session-activity-btn {
    min-height: 30px; padding: 4px 8px; gap: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary); font-size: 0.75rem;
}
#session-activity-controls .session-activity-btn:hover,
#session-activity-controls .session-activity-btn[aria-expanded="true"] { background: var(--bg-tertiary); color: var(--accent); }
.tab-session-menu .session-activity-menu-item { display: flex; align-items: center; gap: 8px; }
.session-activity-menu-item > span:not(.ui-count) { flex: 1; }
.session-activity-menu-item svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (max-width: 768px) {
    #session-activity-controls { display: none; }
    .tab-session-menu .session-activity-menu-item { min-height: 44px; }
}

@media (min-width: 769px) {
    /* Keep health text readable without moving the desktop identity row. */
    body.session-detail-active .push-health-warning { order: 1; position: relative; z-index: 1750; padding-right: 16px; }
    body.fleet-layout.session-detail-active .push-health-warning { margin-left: var(--fleet-sidebar-width); }
}
@media (max-width: 1120px) and (min-width: 769px) {
    /* The full-width header sits above the rail on compact desktops. */
    body.fleet-layout .session-toolbar { margin-left: calc(-1 * var(--fleet-sidebar-width)); }
    body.fleet-layout .fleet-sidebar { top: var(--session-toolbar-height); }
    body.update-available.fleet-layout .fleet-sidebar {
        top: calc(var(--session-toolbar-height) + var(--update-banner-height));
    }
}
@media (max-width: 768px) {
    body > header {
        flex-wrap: nowrap; align-items: center; gap: 8px;
        padding: 4px 10px; min-height: 43px;
    }
    body > header .logo { font-size: 0.9rem; }
    body > header .header-actions {
        display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
    }
    #header-new-session-btn .header-new-label,
    #header-open-unopened-tabs-btn .open-unopened-label { display: none; }
    .header-actions #header-return-session-btn { padding: 0 8px; gap: 4px; max-width: none; }
    .header-actions #header-new-session-btn,
    .header-actions .header-menu-btn {
        width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        box-sizing: border-box;
    }
    #header-new-session-btn .header-new-plus {
        font-size: 20px; line-height: 1; font-weight: 650;
    }
    .header-actions #header-open-unopened-tabs-btn {
        width: auto; min-width: 34px; height: 34px; min-height: 34px; padding: 0 8px;
        background: var(--bg-tertiary); color: var(--text-primary); border: 0;
        box-sizing: border-box; gap: 0;
    }
    .header-actions #header-open-unopened-tabs-btn .open-unopened-count {
        min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0;
        background: transparent; color: var(--text-primary);
        font-size: 13px; font-weight: 700; line-height: 1;
    }
    /* One row: back, name, host/provider, PR, details toggle. The folder, branch
       and file counts are a second row that exists only while the toggle is
       open, or when there is no toggle to open it (not a repo, or no git status
       yet). A permanent second row cut the branch to "s…" and the path to a
       hash, and cost the terminal 37px to say it. The git panel's children are
       placed on this grid directly, so its PR link and toggle share row 1 with
       the session identity instead of claiming a row of their own.
       The name's floor is ~12 characters, not 150px: the chip grows toward its
       content before the name takes more. With a 150px floor the chip was the
       only column left to give, and at 360px it shrank to 39px -- "unsafe" cut
       in half and the host name gone on the one surface with no tooltip. */
    body.session-detail-active .session-toolbar {
        display: grid; grid-template-columns: 36px minmax(min(96px, 26vw), 1fr) minmax(0, max-content) auto minmax(40px, auto);
        grid-template-rows: 44px; height: auto; min-height: 0; gap: 0 6px;
        padding: 0 10px 0 8px; align-items: center;
    }
    body.session-detail-active .session-toolbar .back-btn { grid-column: 1; grid-row: 1; width: 36px; height: 44px; }
    body.session-detail-active .git-panel.visible { display: contents; }
    body.session-detail-active #git-pr-container { grid-column: 4; grid-row: 1; }
    body.session-detail-active .session-toolbar #git-toggle {
        position: relative; grid-column: 5; grid-row: 1; justify-self: end;
        width: 40px; height: 44px; border: 0;
    }
    /* Uncommitted changes are still visible while the counts are folded away. */
    body.session-detail-active .session-toolbar #git-toggle[data-changes]::after {
        content: ''; position: absolute; top: 11px; right: 8px; width: 6px; height: 6px;
        border-radius: 50%; background: var(--warning);
    }
    body.session-detail-active #session-folder,
    body.session-detail-active #git-branch-section,
    body.session-detail-active #git-stats-section { grid-row: 2; }
    body.session-detail-active #session-folder { grid-column: 1 / 3; }
    body.session-detail-active #git-branch-section { grid-column: 3 / 5; min-width: 0; }
    body.session-detail-active #git-stats-section { grid-column: 5; justify-self: end; }
    body.session-detail-active #git-stats-section[data-clean] { display: none; }
    /* showGitStatus hides the toggle inline when there is nothing to expand. */
    body.session-detail-active:has(.git-panel.visible #git-toggle:not([style*="none"])):not(:has(#git-files.visible))
        :is(#session-folder, #git-branch-section, #git-stats-section) { display: none; }
    body.session-detail-active .session-tools-menu { grid-column: 2; grid-row: 1; max-width: 100%; }
    body.session-detail-active #session-tools-btn {
        width: 100%; min-width: 44px; height: 44px; padding: 0 3px;
        gap: 3px; border: 1px solid var(--border); border-radius: 6px;
        background: var(--bg-tertiary); box-sizing: border-box;
    }
    body.session-detail-active #session-tools-btn:hover,
    body.session-detail-active #session-tools-btn[aria-expanded="true"] {
        border-color: var(--accent);
    }
    body.session-detail-active #session-tools-btn > [aria-hidden] {
        margin-left: auto; font-size: 18px; color: var(--text-primary);
    }
    body.session-detail-active #current-session-name { font-size: 0.82rem; }
    body.session-detail-active #session-folder { min-width: 0; height: 32px; overflow: hidden; }
    body.session-detail-active #session-folder:has(#session-folder-copy-status:not(:empty)) { min-width: 0; }
    body.session-detail-active .session-toolbar:not(:has(.git-panel.visible)) #session-folder {
        grid-column: 1 / -1;
    }
    body.session-detail-active #git-repo-path { font-size: 0.72rem; }
    #session-folder-copy { flex-basis: 32px; width: 32px; height: 32px; }
    /* The name keeps its minimum first; the chip clips to its badge and icon. */
    body.session-detail-active .session-setup { grid-column: 3; grid-row: 1; min-width: 0; max-width: 132px; overflow: hidden; }
    /* The icon already names the provider; the variant is what a phone must keep. */
    body.session-detail-active .session-setup.has-variant :is(.session-setup-provider-name, .session-setup-sep) { display: none; }
    body.session-detail-active .session-setup.is-unsafe .session-setup-variant { color: var(--error); }
    body.session-detail-active .session-setup.is-unsafe { border-color: var(--error); }
    @media (max-width: 340px) {
        /* Tighter gaps before anything else gives way; the chip keeps its badge and icon. */
        body.session-detail-active .session-toolbar {
            grid-template-columns: 36px minmax(96px, 1fr) minmax(52px, max-content) auto minmax(36px, auto);
            gap: 0 4px; padding: 0 6px;
        }
        body.session-detail-active .session-toolbar #git-toggle { width: 36px; }
        body.session-detail-active .session-setup.has-variant .session-setup-variant { display: none; }
    }
    #workspace-menu-btn.needs-attention::after { top: 7px; right: 5px; }
    body .settings-account #user-menu { display: flex; }
    .header-dropdown .ui-menu-item, .header-toggle-row { min-height: 44px; }
}

#running-section > .section-header { flex-wrap: wrap; }

/* Progress of an image pasted into a session: it uploads to the session's
   host before its path reaches the terminal, so the wait needs a word. */
#paste-image-status {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
#paste-image-status[hidden] { display: none; }

/* Reserve space below the phone app, outside <main>'s session grid. Desktop
   floats clear of controls to avoid refitting the shared terminal on notices. */
#session-close-progress-banner {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    max-height: min(20vh, 120px);
    padding: 8px 12px;
    border-top: 1px solid color-mix(in srgb, var(--warning), var(--border) 45%);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
}
.session-close-progress-message {
    flex: 1;
    min-width: 0;
    max-height: calc(min(20vh, 120px) - 17px);
    overflow-y: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
#session-close-progress-banner button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
@media (min-width: 769px) {
    #session-close-progress-banner {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 3000;
        max-width: min(420px, calc(100vw - 32px));
        border: 1px solid color-mix(in srgb, var(--warning), var(--border) 45%);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    body.fleet-layout.session-detail-active #session-close-progress-banner {
        max-width: min(420px, calc(100vw - var(--fleet-sidebar-width) - 32px));
    }
}
#paste-image-status.is-error { border-color: var(--error); color: var(--error); }

/* Persistent action feedback, clear of the composer and above modal overlays.
   The bounded stack scrolls; long messages and older failures stay readable. */
#app-notices {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 11001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(430px, calc(100vw - 32px));
    max-height: 35vh;
    max-height: 35dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#app-notices:empty { display: none; }
.app-notice {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--error);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.app-notice.tone-warning { border-left-color: var(--warning); }
.app-notice.tone-success { border-left-color: var(--success); }
.app-notice.tone-info { border-left-color: var(--accent); }
.app-notice-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-notice-message { margin-top: 4px; white-space: pre-wrap; }
.app-notice-count { color: var(--text-secondary); }
.app-question-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font: inherit;
}
.app-question-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.app-notice-dismiss {
    flex: none;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.app-notice-dismiss:hover { border-color: var(--accent); }
.app-notice-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 768px) {
    #app-notices { top: calc(64px + env(safe-area-inset-top, 0px)); }
}

/* Who pinged, and why. Bottom right on desktop, clear of the centred toolbar;
   across the top on a phone, where the toolbar and input bar own the bottom. */
#wait-alert-toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 3001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    /* Every card stays reachable on a short window. placeWaitAlertToasts
       tightens this to the room left above the bottom controls. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#wait-alert-toasts:empty { display: none; }
.wait-alert-toast {
    /* A bounded stack scrolls; its cards must not shrink to fit. */
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.wait-alert-toast.kind-session_blocked { border-left-color: var(--error); }
.wait-alert-toast-open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.wait-alert-toast-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wait-alert-toast-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wait-alert-toast-at { flex: none; color: var(--text-muted); font-size: 0.75rem; }
.wait-alert-toast-why {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.wait-alert-toast-close {
    flex: none;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.wait-alert-toast-open:hover .wait-alert-toast-name { text-decoration: underline; }
.wait-alert-toast-close:hover { color: var(--text-primary); }
@media (max-width: 768px) {
    #wait-alert-toasts {
        top: max(calc(8px + env(safe-area-inset-top, 0px)), var(--app-notices-bottom, 0px));
        bottom: auto;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100dvh - max(8px, var(--app-notices-bottom, 0px)) - 16px);
    }
    /* Cards stay until handled, and on a phone they sit over the header, so
       keep them to the two newest and two lines each. */
    #wait-alert-toasts .wait-alert-toast:nth-child(n + 3) { display: none; }
    .wait-alert-toast-why { -webkit-line-clamp: 2; }
}

/* What the session is doing, or what became of the last message, above the
   phone's input bar -- visible with the keyboard up, which covers the pane. */
#mobile-input-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    padding: 6px 12px;
    font-size: 0.8rem;
    line-height: 1.3;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mobile-input-status[hidden] { display: none; }
#mobile-input-status.is-warn { color: var(--warning, #e0af68); }
#mobile-input-status.is-error { color: var(--error); white-space: normal; }
#mobile-input-status.is-ok { color: var(--success); }

        .review-followup-bulk {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            border: 1px solid var(--border);
            border-radius: 8px;
        }
        .review-followup-bulk span { flex: 1 1 14rem; min-width: 0; }
.session-tab.tab-keyboard-selected,
.fleet-row.tab-keyboard-selected,
.tab-overflow-item.tab-keyboard-selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.session-file-dragover {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

/* Persistent incident history, including constrained phone layouts. */
.ui-incidents-dialog {
    margin: auto;
    width: min(1120px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.5;
}
.ui-incidents-dialog::backdrop { background: #0009; }
.ui-incidents-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-incidents-header h2 { margin: 0; flex: 1; font-size: 1.1rem; }
.ui-incidents-dialog button {
    cursor: pointer; padding: 8px 12px; font: inherit;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 4px;
}
.ui-incidents-dialog button:hover { border-color: var(--accent); }
.ui-incidents-dialog p { margin: 10px 0; }
.ui-incidents-body { overflow: auto; max-height: 75dvh; margin-top: 16px; overflow-wrap: anywhere; }
.ui-incidents-body > a { margin-left: 16px; color: var(--accent); }
.ui-incident-row { display: block; width: 100%; text-align: left; margin: 8px 0; white-space: normal; }
.ui-incidents-body table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.ui-incidents-body th, .ui-incidents-body td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
@media (max-width: 600px) {
    .ui-incidents-dialog { padding: 12px; }
    .ui-incidents-header { gap: 6px; }
    .ui-incidents-header h2 { flex-basis: 100%; }
    .ui-incidents-body table { min-width: 620px; }
}

/* One owner-notification surface; typed panels below contain only their form. */
#notification-panel {
    flex: 0 0 auto; flex-direction: column; gap: 10px; min-width: 0; min-height: 0;
    max-height: min(52dvh, 480px); padding: 8px 16px; box-sizing: border-box;
    border-bottom: 1px solid var(--border); background: var(--bg-secondary);
}
#notification-panel[hidden] { display: none; }
body.session-detail-active #notification-panel { grid-column: 1 / -1; grid-row: 2; }
#notification-panel button {
    min-height: 32px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px;
    background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 0.78rem;
    font-weight: 600; cursor: pointer;
}
#notification-panel button:hover { border-color: var(--accent); }
#notification-panel button:disabled { opacity: 0.45; cursor: default; }
#notification-panel button.primary { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.notification-heading { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-width: 0; }
.notification-heading > strong { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; }
.notification-navigation { display: flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.notification-position { min-width: 56px; text-align: center; font-size: 0.73rem; font-variant-numeric: tabular-nums; }
#notification-panel .notification-navigation button,
#notification-panel .notification-hide { flex: 0 0 32px; width: 32px; padding: 0; }
#notification-panel .notification-hide { font-size: 18px; }
.notification-picker { display: none; }
.notification-body { display: grid; grid-template-columns: minmax(190px, 26%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; flex: 0 1 auto; min-height: 176px; max-height: min(40dvh, 360px); overflow: hidden; }
.notification-queue { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; height: 176px; max-height: 176px; padding-right: 6px; overflow: auto; overscroll-behavior: contain; }
.notification-queue[hidden] { display: none; }
#notification-panel .notification-queue-item { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; padding: 8px 10px; border-color: transparent; background: transparent; text-align: left; }
#notification-panel .notification-queue-item:hover { background: var(--bg-tertiary); }
#notification-panel .notification-queue-item[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)); }
.notification-queue-identity { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.notification-queue-status { color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.notification-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-primary); }
#notification-panel .review-request-panel,
#notification-panel .message-approval-panel { padding: 0; margin: 0; border: 0; background: transparent; max-height: none; overflow: visible; }
#notification-panel .message-approval-row { width: 100%; margin: 0; padding: 0; flex-direction: column; align-items: stretch; gap: 12px; }
#notification-panel #owner-request-panel .owner-request-row { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
#notification-panel .message-approval-main { min-width: 0; width: 100%; }
#notification-panel .message-approval-kicker { color: var(--warning); }
#notification-panel .message-approval-actions { flex-wrap: wrap; }
#notification-panel .message-approval-notice { width: 100%; margin: 0; }
#notification-panel .review-action-alert-links-menu { position: fixed; z-index: 2000; min-width: max-content; max-width: calc(100vw - 8px); max-height: calc(100dvh - 8px); overflow: auto; }
#notification-panel .review-action-alert-links-menu button { border-color: transparent; background: transparent; text-align: left; }
#notification-panel .review-action-alert-links-menu button:hover { background: var(--bg-tertiary); }
#notification-panel .notification-jump { display: inline-flex; align-items: center; gap: 4px; }
#notification-empty[hidden] { display: none; }
.notification-content { flex: 1 1 auto; min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; }
.notification-action-footer { flex: 0 0 auto; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg-primary); }
.notification-action-footer:empty { display: none; }
#notification-panel .notification-action-footer > .message-approval-actions { max-width: none; }
#notification-panel .notification-action-footer.has-question .owner-request-actions { display: flex; width: 100%; }
#notification-panel .notification-action-footer.has-question button { flex: 1; text-align: center; }
#notification-panel .message-approval-kicker,
#notification-panel .review-action-alert-kicker { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; font-weight: 700; }
#notification-panel .review-action-alert-identity { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); }
#notification-panel .review-action-alert-text { font-size: 1.04rem; font-weight: 650; }
@media (max-width: 768px), (max-height: 500px) {
    #notification-panel { gap: 8px; }
    .notification-heading { flex-wrap: wrap; gap: 8px; }
    .notification-heading > strong { font-size: 0.8rem; }
    .notification-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .notification-queue { display: none; }
    .notification-picker { display: block; order: 1; flex: 1 0 100%; width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 0.8rem; }
}
@media (max-width: 768px) {
    #notification-panel { padding: 7px 8px; }
    .notification-content { padding: 8px; }
    .notification-action-footer { padding: 6px 8px; }
    #notification-panel .review-action-alert { gap: 6px; }
    #notification-panel .review-action-alert-actions button { min-height: 34px; padding: 6px 8px; }
    #notification-panel .notification-action-footer.has-question button { min-height: 44px; }
}
@media (max-height: 500px) {
    #notification-panel { max-height: 35dvh; }
    .notification-content { padding: 4px 8px; }
    .notification-action-footer { padding: 4px 8px; }
    #notification-panel .review-action-alert { gap: 6px; }
    #notification-panel .review-action-alert-meta,
    #notification-panel .review-action-alert-kicker,
    #notification-panel .review-action-alert-identity { display: none; }
    #notification-panel .review-action-alert-text { font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
}
@media (max-width: 599px) and (max-height: 500px) {
    #notification-panel { max-height: 44dvh; }
}
@media (min-width: 600px) and (max-height: 500px) {
    .notification-heading { flex-wrap: nowrap; }
    .notification-picker { order: 0; flex: 1 1 0; width: 0; }
}