/* =========================================================
       TOPBAR
       ========================================================= */
    /* ─── COMPACT SUPPLIER STRIP ──────────────────────────────────────────
       The five supplier cards (Claude / Gemini / Ollama / Workers / Tools)
       occupy a single horizontal flex row. Inactive cards show only:
       icon · model name · mini progress bar. The active card expands and
       reveals model selector, agent button, open/settings button, and a
       full-width usage line.

       Wraps to 2 rows on narrow screens. Click an inactive card's icon
       area to activate it (replaces the old AGENT button). The expanded
       card shows the AGENT button label inside for clarity.
    ──────────────────────────────────────────────────────────────────── */
    /* Accumulator — theme-aware badge and active tab colors
       Dark mode: light blue background, black text (easy on Protanopia eyes)
       Light mode: light yellow background, black text */
    .acc-badge {
        position: absolute;
        top: -5px; right: -5px;
        border-radius: 9px;
        font-size: 9px; font-weight: 800;
        padding: 0 4px;
        line-height: 15px; min-width: 15px;
        text-align: center;
        border: 1px solid rgba(0,0,0,0.3);
        color: #000;
        display: none;
    }
    .acc-tab-active {
        color: #000 !important;
        font-weight: 700 !important;
    }
    /* Plain-text count chip — a delicate rectangle that holds a readable
       number beneath a button (Jobs / Accum) or inline (pending proposals).
       Colour-blind friendly: meaning is carried by the number, not colour. */
    .count-chip {
        display: none;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        padding: 1px 7px;
        border: 1px solid var(--border-mid);
        border-radius: 4px;
        background: var(--bg-darker, rgba(255,255,255,0.03));
        color: var(--text-base);
        text-align: center;
        min-width: 16px;
        white-space: nowrap;
    }

    /* Info-bar chips (project kind, project goal): a tinted fill + accent border, but the text stays the
       theme's own text colour, so they read on every theme, dark or light. An empty goal is a dashed outline. */
    .ck-chip {
        display: inline-flex; align-items: center; gap: 3px;
        font-family: var(--font-ui); font-size: 10px; font-weight: 600; line-height: 1.3;
        padding: 1px 8px; border-radius: 10px; cursor: pointer; white-space: nowrap;
        color: var(--text-primary);
        border: 1px solid var(--chip-accent, var(--ui-accent));
        background: color-mix(in srgb, var(--chip-accent, var(--ui-accent)) 16%, var(--bg-base));
    }
    .ck-chip:hover { background: color-mix(in srgb, var(--chip-accent, var(--ui-accent)) 28%, var(--bg-base)); }
    .ck-chip-kind { --chip-accent: var(--ui-accent); }
    .ck-chip-goal { --chip-accent: var(--warm); max-width: 38ch; overflow: hidden; text-overflow: ellipsis; }
    .ck-chip-desc { --chip-accent: var(--accent-cyan); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
    .ck-chip-desc.empty { border-style: dashed; background: color-mix(in srgb, var(--chip-accent) 6%, var(--bg-base)); font-weight: 500; }
    .ck-chip-goal.empty { border-style: dashed; background: color-mix(in srgb, var(--chip-accent) 6%, var(--bg-base)); font-weight: 500; }

    /* Theme status bar marquee — only applied when the content is wider than
       its column (see tsbMarqueeCheck()). Scrolls the text within its own
       label instead of overflowing the page or clipping silently. */
    #tsb-track.tsb-marquee {
        animation: tsb-scroll linear infinite;
        animation-duration: var(--tsb-marquee-duration, 6s);
    }
    @keyframes tsb-scroll {
        0%   { transform: translateX(0); }
        15%  { transform: translateX(0); }
        85%  { transform: translateX(var(--tsb-marquee-distance, -40px)); }
        100% { transform: translateX(var(--tsb-marquee-distance, -40px)); }
    }
    /* Small icon control with a delicate rectangle — used for the per-project
       "new chat" add button, the expand/collapse chevron, and the agent-order
       arrows. Slightly larger icon + bordered box = easier to see and hit. */
    .mini-ctrl {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
        padding: 1px;
        border: 1px solid var(--border-mid);
        border-radius: 4px;
        cursor: pointer;
        vertical-align: middle;
        transition: background 0.12s, border-color 0.12s;
    }
    .mini-ctrl:hover { background: var(--bg-hover); border-color: var(--border-bright); }
    .attach-chip:hover { background: var(--bg-hover); border-color: var(--border-bright); }
    /* Dark theme */
    body[data-theme-mode="dark"] .acc-badge     { background: #7ecfff; }
    body[data-theme-mode="dark"] .acc-tab-active { background: #7ecfff !important; }
    /* Light theme */
    body[data-theme-mode="light"] .acc-badge     { background: #ffe066; }
    body[data-theme-mode="light"] .acc-tab-active { background: #ffe066 !important; }
    /* Default (before theme loads) — same as dark */
    body:not([data-theme-mode]) .acc-badge      { background: #7ecfff; }
    body:not([data-theme-mode]) .acc-tab-active { background: #7ecfff !important; }
    /* Mixed mode: same as dark (dark sidebars) */
    body[data-theme-mode="mixed"] .acc-badge      { background: #7ecfff; }
    body[data-theme-mode="mixed"] .acc-tab-active { background: #7ecfff !important; }
    .sup-card {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 5px 8px;
        border: 1px solid var(--border-dim);
        border-radius: 4px;
        background: var(--bg-base);
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s, box-shadow 0.18s;
        flex: 0 0 110px;
        width: 110px;
        height: 104px;        /* tall enough for all rows including detail */
        overflow: hidden;
        position: relative;
    }
    .sup-card:hover {
        border-color: var(--border-bright);
        background: var(--bg-hover);
    }
    /* Active card: wider, same height */
    .sup-card.sup-active {
        flex: 0 0 525px;
        width: 525px;
        height: 104px;
        cursor: default;
        background: var(--bg-base);
        overflow: visible; /* dropdown panel is position:absolute + resize:both —
                               clipped by the 104px card box otherwise, capping
                               vertical (and, once wide enough, horizontal) resize */
    }
    /* Active card border tinted by agent color, plus a faint inner glow
       and a subtle background tint in the supplier's accent. The tint is
       a translucent overlay on top of --bg-base, kept low-opacity ("finesse",
       not loud). Border bumped 1px→2px for a cleaner accent outline.
       The two-stop linear-gradient produces a flat translucent color layer
       that the bg-base shows through, equivalent to rgba(accent, 0.06). */
    .sup-card.sup-active.sup-claude  {
        border-color: var(--claude);
        border-width: 2px;
        box-shadow: inset 3px 0 0 var(--claude), 0 0 8px -3px var(--claude);
        background:
            linear-gradient(var(--claude-dim), var(--claude-dim)) center / 100% 100% no-repeat,
            var(--bg-base);
        background-blend-mode: soft-light;
    }
    .sup-card.sup-active.sup-gemini  {
        border-color: var(--gemini);
        border-width: 2px;
        box-shadow: inset 3px 0 0 var(--gemini), 0 0 8px -3px var(--gemini);
        background:
            linear-gradient(var(--gemini-dim), var(--gemini-dim)) center / 100% 100% no-repeat,
            var(--bg-base);
        background-blend-mode: soft-light;
    }
    .sup-card.sup-active.sup-ollama  {
        border-color: var(--ollama);
        border-width: 2px;
        box-shadow: inset 3px 0 0 var(--ollama), 0 0 8px -3px var(--ollama);
        background:
            linear-gradient(var(--ollama-dim), var(--ollama-dim)) center / 100% 100% no-repeat,
            var(--bg-base);
        background-blend-mode: soft-light;
    }
    .sup-card.sup-active.sup-workers {
        border-color: var(--workers);
        border-width: 2px;
        box-shadow: inset 3px 0 0 var(--workers), 0 0 8px -3px var(--workers);
        background:
            linear-gradient(var(--workers-dim), var(--workers-dim)) center / 100% 100% no-repeat,
            var(--bg-base);
        background-blend-mode: soft-light;
    }
    .sup-card.sup-active.sup-tools   {
        border-color: var(--tools);
        border-width: 2px;
        box-shadow: inset 3px 0 0 var(--tools), 0 0 8px -3px var(--tools);
        background:
            linear-gradient(var(--tools-dim), var(--tools-dim)) center / 100% 100% no-repeat,
            var(--bg-base);
        background-blend-mode: soft-light;
    }

    /* The supplier-name label that goes ON TOP of inactive cards
       (Phase 2b 2026-05-09 addition). Hidden on the active card because
       the active card already has its own larger header. */
    .sup-label-top {
        display: block;
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.85;
    }
    /* Each supplier's top-label uses a readable agent color, not text-muted */
    .sup-claude  .sup-label-top { color: var(--claude);  opacity: 0.9; }
    .sup-gemini  .sup-label-top { color: var(--gemini);  opacity: 0.9; }
    .sup-ollama  .sup-label-top { color: var(--ollama);  opacity: 0.9; }
    .sup-workers .sup-label-top { color: var(--workers); opacity: 0.9; }
    .sup-tools   .sup-label-top { color: var(--tools);   opacity: 0.9; }
    /* Active card hides the small top-label since it has its own header */
    .sup-card.sup-active .sup-label-top { display: none; }

    /* Top row — icon, name/label, optional badge */
    .sup-head {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex-shrink: 0;
    }
    .sup-icon {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
    }
    .sup-card.sup-active .sup-icon { width: 26px; height: 26px; }
    /* Each agent's icon is tinted by its color */
    .sup-claude  .sup-icon { color: var(--claude); }
    .sup-gemini  .sup-icon { color: var(--gemini); }
    .sup-ollama  .sup-icon { color: var(--ollama); }
    .sup-workers .sup-icon { color: var(--workers); }
    .sup-tools   .sup-icon { color: var(--tools); }
    .sup-icon svg { width: 100%; height: 100%; }

    .sup-name {
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--text-base);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    .sup-card.sup-active .sup-name {
        font-size: 12px;            /* 11.5 → 12: marginally larger for visual weight */
        font-weight: 800;            /* 700 → 800: heavier emphasis */
        color: var(--text-primary);
        letter-spacing: 0.06em;      /* 0.05 → 0.06: tiny breathing room */
        text-transform: uppercase;
        font-family: var(--font-ui);
    }
    /* Active card adds AGENT label suffix in muted color */
    .sup-card.sup-active .sup-name-sub {
        font-size: 9.5px;
        font-weight: 400;
        opacity: 0.55;
        margin-left: 4px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Mini progress bar inside inactive cards */
    .sup-bar-mini {
        height: 3px;
        background: var(--border-dim);
        border-radius: 1.5px;
        overflow: hidden;
    }
    .sup-bar-mini-fill {
        height: 100%;
        transition: width 0.25s;
    }
    .sup-claude  .sup-bar-mini-fill { background: var(--claude-dim); }
    .sup-gemini  .sup-bar-mini-fill { background: var(--gemini-dim); }
    .sup-ollama  .sup-bar-mini-fill { background: var(--ollama-dim); }
    .sup-workers .sup-bar-mini-fill { background: var(--workers); }
    .sup-tools   .sup-bar-mini-fill { background: var(--tools); }

    /* Expanded card body (only shown when sup-active) */
    .sup-body {
        display: none;
        flex-direction: column;
        gap: 2px;
        margin-top: 2px;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .sup-card.sup-active .sup-body { display: flex; }

    .sup-controls {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;   /* all buttons stay visible (wrap to a 2nd row) rather than clipping off the card edge */
        flex-shrink: 0;
    }
    .sup-controls > select,
    .sup-controls > .custom-select-wrapper {
        flex: 1;
        min-width: 0;
    }
    /* Active card hides the inactive-only mini bar */
    .sup-card.sup-active .sup-bar-mini { display: none; }

    /* Full-width usage line at bottom of expanded card */
    .sup-usage {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 9px;
        color: var(--text-muted);
        flex-shrink: 0;
    }
    .sup-usage-bar {
        flex: 1;
        height: 3px;
        background: var(--border-dim);
        border-radius: 2px;
        overflow: hidden;
    }
    .sup-usage-bar-fill {
        height: 100%;
        transition: width 0.25s;
    }
    .sup-claude  .sup-usage-bar-fill { background: var(--claude-dim); }
    .sup-gemini  .sup-usage-bar-fill { background: var(--gemini-dim); }
    .sup-ollama  .sup-usage-bar-fill { background: var(--ollama-dim); }
    .sup-workers .sup-usage-bar-fill { background: var(--workers); }
    .sup-tools   .sup-usage-bar-fill { background: var(--tools); }

    /* Compact single-row detail — I: O: C: R: */
    .sup-detail-row {
        display: none;
        align-items: center;
        gap: 6px;
        font-size: 9px;
        flex-shrink: 0;
        white-space: nowrap;
        overflow: hidden;
    }
    .sup-card.sup-active .sup-detail-row { display: flex; }
    .sup-detail-val { font-weight: 600; margin-left: 1px; }

    /* Brand block — sits to the left of the supplier strip */
    .topbar-brand-block {
        display: flex;
        flex-direction: column;          /* logo row, then licence status below */
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        padding: 4px 13px 4px 2px;   /* 2026-09-16: 4px narrower; 2026-10-02: -8 left, -6 right to fit 1920 */
        border-right: 1px solid var(--border-dim);
        flex-shrink: 0;
    }
    .cockpit-brand-name {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.02em;
    }
    .cockpit-brand-ver {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--gemini);
        letter-spacing: 0.04em;
        margin-top: 1px;
    }

    /* Top-level topbar wrapper — flex with brand · suppliers · session */
    .topbar-flex {
        display: flex;
        align-items: stretch;
        gap: 6px;
        padding: 4px 6px;
        min-height: 64px;
        /* 2026-10-16: the whole bar used to be forced to max-content (about 1820 px), so below that Help, Theme, About, Tour, Profile and
           Exit sat beyond the right edge behind a 3 px scrollbar. Now the supplier strip (already scrollable on its own) is the part that
           gives way and the controls on the right stay on screen; the strip keeps a usable minimum. */
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .sup-strip {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        min-width: 0;
        gap: 4px;
        align-items: stretch;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: thin;
        scrollbar-color: var(--border-bright) transparent;
    }
    .sup-strip::-webkit-scrollbar { height: 3px; }
    .sup-strip::-webkit-scrollbar-track { background: transparent; }
    .sup-strip::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
    .topbar-session {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 6px;
        border-left: 1px solid var(--border-dim);
        flex-shrink: 0;
    }

    /* Right info block (project · chat · path) sits below the supplier strip
       at full width, since it's no longer competing for space. */
    .topbar-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 10px;
        font-size: 10px;
        background: var(--bg-darker);
        border-top: 1px solid var(--border-dim);
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* When the strip wraps to 2 rows the brand stays at top-left of row 1 */
    @media (max-width: 1100px) {
        .sup-card        { flex: 0 0 100px; width: 100px; height: 104px; }
        .sup-card.sup-active { flex: 0 0 425px; width: 425px; height: 104px; }
    }

    /* ────────────────────────────────────────────────────────────────── */

    .topbar {
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-dim);
        flex-shrink: 0;
        z-index: 10;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--border-bright) transparent;
    }
    .topbar::-webkit-scrollbar { height: 3px; }
    .topbar::-webkit-scrollbar-track { background: transparent; }
    .topbar::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
    /* Table fills full width, columns auto-size to content */
    .topbar-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
    }
    /* Row 1: controls — 42px tall */
    .topbar-row1 td { height: 42px; vertical-align: middle; }
    /* Row 2: meters — 28px tall, NO visible top border */
    .topbar-row2 td {
        height: 28px;
        vertical-align: middle;
        border-top: none;
    }
    /* Toggle column — now hosts the AI Cockpit brand mark */
    .tb-toggle { padding: 4px 10px 4px 12px; white-space: nowrap; }
    .cockpit-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }
    .cockpit-brand svg { flex-shrink: 0; }
    .cockpit-brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    /* "by Dario Ruggi" subtitle lives in the row 2 spacer cell */
    .cockpit-brand-by {
        font-size: 8.5px;
        color: var(--text-muted);
        font-style: italic;
        text-align: center;
        padding: 2px 4px;
        white-space: nowrap;
    }
    /* Agent columns — flex container keeps all controls on one line */
    .tb-agent  {
        padding: 0 10px;
        white-space: nowrap;
        min-width: 340px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }
    /* Right column — takes all remaining space */
    .tb-right  { padding: 0 8px; width: 100%; }
    /* Separator column — 1px line */
    .tb-sep { width: 1px; min-width: 1px; padding: 0; background: var(--border-dim); }
    /* Meter cells — match agent column */
    .tb-meter {
        padding: 2px 10px;
        cursor: default;
        white-space: nowrap;
        overflow: visible;
    }
    .tb-meter-spacer {
        padding: 0;
        width: 1px;
        min-width: 1px;
    }
    /* Separators in row2 use the border-dim color */
    .topbar-row2 .tb-sep,
    .topbar-row2 .tb-meter-spacer { background: var(--border-dim); }
    /* First and last spacer in row2 are transparent */
    .topbar-row2 td:first-child { background: transparent; }
    .topbar-row2 td:last-child  { background: transparent; }
    .topbar-row2 .tb-meter-blank { background: transparent !important; border: none !important; }
    /* Each meter block — aligned under its agent section in row1 */
    .usage-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 8px;
        gap: 2px;
        position: relative;
        overflow: hidden;
    }
    /* Claude block: same flex basis as Claude section in row1 */
    .usage-block.ub-claude { flex: 0 0 auto; padding-left: 0; }
    /* Gemini block: same flex basis as Gemini section in row1 */
    .usage-block.ub-gemini { flex: 0 0 auto; }
    /* Ollama block: same flex basis as Ollama section in row1 */
    .usage-block.ub-ollama { flex: 0 0 auto; }
    /* Right filler — takes remaining space like .topbar-right in row1 */
    .usage-block.ub-right  { flex: 1; border-right: none; padding-right: 12px; }
    .usage-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .usage-label {
        font-family: var(--font-ui);
        font-size: 9.5px;
        color: var(--text-muted);
        white-space: nowrap;
        letter-spacing: 0.03em;
    }
    .usage-value {
        font-family: var(--font-mono);
        font-size: 9px;
        color: var(--text-dim);
        white-space: nowrap;
    }
    .usage-reset {
        font-family: var(--font-ui);
        font-size: 9px;
        color: var(--text-muted);
        white-space: nowrap;
        font-style: italic;
    }
    /* Progress bar */
    .usage-bar-track {
        height: 3px;
        background: var(--border-dim);
        border-radius: 2px;
        overflow: hidden;
        margin-top: 1px;
    }
    .usage-bar-fill {
        height: 100%;
        border-radius: 2px;
        transition: width 0.5s ease, background 0.3s;
        background: var(--gemini-dim);
    }
    .usage-bar-fill.claude { background: var(--claude-dim); }
    .usage-bar-fill.gemini { background: var(--gemini-dim); }
    .usage-bar-fill.ollama { background: var(--ollama-dim); }
    /* Warning at 70%+ */
    .usage-bar-fill.warn   { background: #b07820; }
    /* Critical at 90%+ */
    .usage-bar-fill.crit   { background: #b04020; }

    /* Agent buttons */
    .agent-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border: 1px solid var(--border-mid);
        background: var(--bg-active);
        color: var(--text-base);
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        border-radius: 3px;
        transition: all 0.15s;
    }
    .agent-btn:hover { background: var(--bg-hover); border-color: var(--border-bright); color: var(--text-primary); }
    .agent-btn.active-claude { border-color: var(--claude-dim); color: var(--claude); background: var(--claude-glow); }
    .agent-btn.active-gemini { border-color: var(--gemini-dim); color: var(--gemini); background: var(--gemini-glow); }
    .agent-btn.active-ollama { border-color: var(--ollama-dim); color: var(--ollama); background: var(--ollama-glow); }
    .agent-btn.active-workers { border-color: var(--workers-dim); color: #b3a8f0; background: var(--workers-glow); }
    .agent-btn.active-tools   { border-color: var(--tools-dim); color: #92d5b5; background: var(--tools-glow); }

    /* Open tmux button — small icon button next to each agent */
    .open-btn {
        padding: 3px 4px;
        border: 1px solid var(--border-mid);
        background: transparent;
        color: var(--text-base);
        cursor: pointer;
        border-radius: 3px;
        font-size: 14px;
        line-height: 1;
        transition: all 0.15s;
        display: flex;
        align-items: center;
    }
    .open-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-bright); }
    .open-btn .material-symbols-rounded { font-size: 14px; color: inherit; }
    /* Per-supplier power toggle: icon + readable ON/OFF text (colour is only a
       secondary cue, for colour-vision-deficient accessibility). */
    .sup-power-btn { gap: 3px; padding: 3px 6px; }
    .sup-power-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1;
        color: inherit;
    }

    /* Every <select>: themed, never the engine's default white. WebKitGTK (the
       native window) paints an unstyled select white with its own arrow and a
       GTK popup; Chromium was lenient. appearance:none + our own arrow gives one
       look everywhere; the popup list itself is native and follows the GTK theme. */
    select {
        -webkit-appearance: none; appearance: none;
        background-color: var(--bg-active);
        color: var(--text-base);
        border: 1px solid var(--border-mid);
        border-radius: 3px;
        padding: 2px 6px;
        padding-right: 18px !important;   /* room for the arrow; inline paddings would otherwise cover it */
        font-family: var(--font-ui);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23999'/></svg>");
        background-repeat: no-repeat;
        background-position: right 5px center;
    }
    select:disabled { opacity: 0.55; }
    option, optgroup { background-color: var(--bg-panel); color: var(--text-base); }

    /* Ollama model selector */
    .model-select {
        background: var(--bg-active);
        color: var(--text-dim);
        border: 1px solid var(--border-mid);
        padding: 4px 6px;
        font-family: var(--font-ui);
        font-size: 11px;
        border-radius: 3px;
        cursor: pointer;
        max-width: 160px;
    }
    .model-select:focus { outline: none; }
    #claude-model:focus  { border-color: var(--claude-dim); }
    #gemini-model:focus  { border-color: var(--gemini-dim); }
    #ollama-select:focus { border-color: var(--ollama-dim); }
    /* Tier labels in Ollama dropdown */
    option.tier1  { color: var(--ollama);  }
    option.tier2  { color: var(--text-dim); }
    option.tier3  { color: var(--text-muted); font-style: italic; }
    option.embed  { color: var(--text-muted); font-style: italic; }

    /* Custom Ollama dropdown */
    .custom-select-wrapper {
        position: relative;
        display: inline-block;
    }
    .custom-select-trigger {
        display: flex;
        align-items: center;
        gap: 5px;
        background: var(--bg-active);
        color: var(--text-dim);
        border: 1px solid var(--border-mid);
        /* Slightly more vertical padding than .model-select to match the
           browser-rendered native select height (which includes the arrow
           area). 5px vs 4px is the minimum that visually equalizes them. */
        padding: 5px 8px;
        font-family: var(--font-ui);
        font-size: 11px;
        border-radius: 3px;
        cursor: pointer;
        min-width: 160px;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.15s;
        user-select: none;
    }
    .custom-select-trigger:hover { border-color: var(--border-bright); color: var(--text-primary); }
    .custom-select-trigger.open  { border-color: var(--ollama-dim); color: var(--ollama); }
    .custom-select-trigger .arrow {
        margin-left: auto;
        flex-shrink: 0;
        font-size: 9px;
        opacity: 0.5;
        transition: transform 0.15s;
    }
    .custom-select-trigger.open .arrow { transform: rotate(180deg); }

    .custom-select-panel {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 320px;
        background: var(--bg-panel);
        border: 1px solid var(--border-mid);
        border-radius: 4px;
        z-index: 1000;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;                 /* as tall as the list; only the ceiling is imposed (2026-10-05) */
        max-height: min(70vh, 520px);
        scrollbar-width: thin;
        scrollbar-color: var(--border-mid) transparent;
        resize: both;
    }
    .custom-select-panel.open { display: block; }

    /* Slim fixed title bar pinned to the top of an open dropdown panel —
       stays visible while the panel's own rows scroll underneath it. */
    .cs-panel-title {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--bg-panel);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        padding: 6px 10px;
        border-bottom: 1px solid var(--border-mid);
    }

    .cs-sort-combo {
        float: right;
        font-size: 9px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        background: var(--bg-darker, var(--bg-codeblock));
        color: var(--text-dim);
        border: 1px solid var(--border-dim);
        border-radius: 3px;
        padding: 1px 4px;
        cursor: pointer;
        margin-top: -2px;
    }

    .cs-group-header {
        padding: 7px 12px 4px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
        border-top: 1px solid var(--border-dim);
        background: var(--bg-sidebar);
    }
    .cs-group-header:first-child { border-top: none; }
    /* a group's header floats on the top row while its items scroll past (below the filter box when there is one) */
    .cs-group-header:not([id$="-filterbox"]) { position: sticky; top: var(--cs-stick, 0px); z-index: 3; }

    .cs-option {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 5px 12px 5px 18px;
        cursor: pointer;
        transition: background 0.1s;
    }
    .cs-option:hover { background: var(--bg-hover); }
    .cs-option.selected { background: var(--ollama-glow); }
    .cs-option.disabled {
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
        font-style: italic;
    }
    .cs-option-name {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--text-primary);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .cs-option-name.t1 { color: var(--ollama); }
    .cs-option-name.t2 { color: var(--text-dim); }
    .cs-option-name.t3 { color: var(--text-muted); }
    .cs-option-desc {
        font-family: var(--font-ui);
        font-size: 10px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cs-option-badge {
        margin-left: auto;
        font-size: 9px;
        padding: 1px 4px;
        border-radius: 2px;
        flex-shrink: 0;
    }
    .badge-star  { background: var(--ollama-glow); color: var(--ollama); border: 1px solid var(--ollama-dim); }
    .badge-slow  { background: rgba(80,80,80,0.3); color: var(--text-muted); border: 1px solid var(--border-dim); }
    .badge-tiny  { background: rgba(80,80,80,0.2); color: var(--text-muted); border: 1px solid var(--border-dim); }
    .badge-embed { background: rgba(80,80,80,0.2); color: var(--text-muted); border: 1px solid var(--border-dim); }

    /* Separator */
    .topbar-sep {
        width: 1px;
        height: 20px;
        background: var(--border-dim);
        flex-shrink: 0;
    }

    /* Topbar right: project info + rig info */
    .topbar-right {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: flex-end;
        width: 100%;
    }
    .topbar-project {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--text-dim);
        font-size: 11px;
    }
    .topbar-project span.label { color: var(--text-muted); }
    .topbar-project span.value { color: var(--text-primary); }
    .topbar-project span.path  { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; }
    .topbar-rig {
        color: var(--text-muted);
        font-size: 10px;
        letter-spacing: 0.03em;
    }

    /* =========================================================
       STATUS BAR (below topbar)
       ========================================================= */
    .statusbar {
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border-dim);
        padding: 0 12px;
        height: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }
    .status-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10.5px;
    }
    .status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--text-muted);
        flex-shrink: 0;
        transition: background 0.3s;
    }
    .status-dot.ok-claude  { background: var(--claude); box-shadow: 0 0 4px var(--claude-dim); }
    .status-dot.ok-gemini  { background: var(--gemini); box-shadow: 0 0 4px var(--gemini-dim); }
    .status-dot.ok-ollama  { background: var(--ollama); box-shadow: 0 0 4px var(--ollama-dim); }
    .status-dot.fail       { background: #555; }
    .status-label { color: var(--text-dim); font-size: 10.5px; }


/* Runtime indicator in the status bar: what is really running behind each agent (js/core/status.js, updateRuntime) */
.rt-tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); border: 1px solid var(--border-dim); border-radius: 3px; padding: 0 4px; margin-left: 4px; line-height: 14px; white-space: nowrap; }
.rt-tag.native { color: var(--text-primary); border-color: var(--border-bright); font-weight: 700; }

/* An open picker list is shown in the top layer (js/core/dropdown.js): undo the popover's own centring so the list stays where the picker put it */
.custom-select-panel[popover] { margin: 0; inset: auto; padding: 0; color: var(--text-primary); }
.custom-select-panel[popover]:not(:popover-open) { display: none; }

/* The account card (Sandbox/profile, Slots, Apps) sits at the end of the scrollable supplier strip. When the strip is narrower than its cards
   (windows under ~1800 px) it used to scroll out of sight, so Profile looked missing or covered by the clock. It now stays pinned at the strip's
   right edge while the supplier cards scroll underneath. */
.sup-strip > .sup-account-card { position: sticky; right: 0; z-index: 3; background: var(--bg-panel); box-shadow: -8px 0 8px -4px var(--bg-panel); }

/* Very long project / chat names (found 2026-10-17, 180-character project name): the path in the status line wrapped onto three lines and ran over the row below, and the name pushed the chat name and chips out of the bar. Each is cut with an ellipsis; the tooltip has the whole text. */
#project-name, #chat-name { display:inline-block; max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
#statusbar-path { display:inline-block; max-width:min(34vw, 360px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }