/* ── Skírnir design tokens — Runestave brand system ─────────────────────────────
   Dark-first, terminal-native: warm neutral ramp on near-black, amber as the single
   accent (mark, primary actions, live states). Space Grotesk for display/UI, IBM Plex
   Sans for prose, JetBrains Mono for code/meta. See the brand handoff / style guide.

   Dark is the base; a light reversal applies via prefers-color-scheme unless the user
   set an explicit data-theme, which wins in both directions.

   Fonts are self-hosted (no Google Fonts dependency). */

/* ── Space Grotesk ─────────────────────────────────────────────────────────── */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 500 600 700; font-display:swap; src:url('/fonts/SpaceGrotesk-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 500 600 700; font-display:swap; src:url('/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 500 600 700; font-display:swap; src:url('/fonts/SpaceGrotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── IBM Plex Sans ─────────────────────────────────────────────────────────── */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-greek.woff2') format('woff2'); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── JetBrains Mono ────────────────────────────────────────────────────────── */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-greek.woff2') format('woff2'); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
    /* accent ramp — amber is the ONLY brand accent, used sparingly */
    --accent: #F2A33C;         /* brand, mark, primary actions, live states */
    --accent-hover: #FFB454;   /* hover / glow */
    --accent-deep: #C97A1E;    /* pressed */
    --accent-contrast: #1A1208;
    --accent-tint: rgba(242, 163, 60, 0.12);
     /* surfaces — warm neutral ramp, dark-first */
     --bg: #0E0C0A;             /* page background (BG Base) */
     --bg-panel: #1A1510;       /* cards / panels (Surface) */
     --bg-subtle: #261F17;      /* raised surfaces (Elevated) */
     --bg-elevated: #261F17;    /* floating popovers / menus (opaque, above panel) */
     --bg-hover: #241D14;
     --bg-terminal: #0A0907;    /* terminal blocks — deepest surface */
    --border: #38301F;         /* 1px borders */
    --border-subtle: #2A2117;
    /* text ramp */
    --text: #F7F0E4;           /* headings / primary (Text High) */
    --text-strong: #D8CDB9;    /* checkbox/label rows — brighter than mid, below high */
    --text-muted: #B3A793;     /* body / secondary (Text Mid) */
    --text-low: #7C7160;       /* meta / disabled labels (Text Low) */
    --text-faint: #8E8371;     /* group labels / faintest meta */
    /* semantic states */
    --status-run: #F2A33C;     /* running / live — amber */
    --status-wait: #FFB454;
    --status-ok: #8FBF7F;      /* merged / success */
    --status-err: #E8734A;     /* alert / destructive (Ember) */
    --status-neutral: #7C7160;
    --merge-merged: #8FBF7F;
    --diff-add-bg: rgba(143, 191, 127, 0.12);
    --diff-add-text: #8FBF7F;
    --diff-del-bg: rgba(232, 115, 74, 0.12);
    --diff-del-text: #E8734A;
    /* private chat mode — a cool indigo wash, deliberately off-brand so an unsaved
       ("incognito") thread is unmistakable against the warm amber-on-umber base */
    --private: #8E9BD8;
    --private-tint: rgba(126, 140, 216, 0.10);
    --private-border: rgba(126, 140, 216, 0.40);
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --radius: 9px;             /* buttons / inputs */
    --radius-card: 14px;       /* cards / panels */
    --shadow-tile: 0 8px 22px rgba(0, 0, 0, 0.4);
}

/* Light reversal — mirrors the on-light logo treatment (parchment surface, dark ink,
   amber preserved as accent). The brand is dark-first, so light is opt-in via the manual
   theme toggle (data-theme="light") rather than applied from system preference. */
:root[data-theme="light"] {
    --accent: #C97A1E;
    --accent-hover: #F2A33C;
    --accent-deep: #A5620F;
    --accent-contrast: #F7F0E4;
    --accent-tint: rgba(201, 122, 30, 0.12);
    --text-strong: #3A3427;
    --text-faint: #8E8371;
    --bg: #F7F0E4;
    --bg-panel: #FFFDF8;
    --bg-subtle: #EFE7D6;
    --bg-elevated: #FFFDF8;
    --bg-hover: #E8DFCC;
    --bg-terminal: #1A1510;
    --border: #D8CDB6;
    --border-subtle: #E4DAC6;
    --text: #13100B;
    --text-muted: #5C5442;
    --text-low: #8E8371;
    --status-run: #C97A1E;
    --status-wait: #B5730C;
    --status-ok: #4F7A3F;
    --status-err: #C4502A;
    --status-neutral: #8E8371;
    --merge-merged: #4F7A3F;
    --diff-add-bg: rgba(79, 122, 63, 0.14);
    --diff-add-text: #3C6030;
    --diff-del-bg: rgba(196, 80, 42, 0.14);
    --diff-del-text: #A5401F;
    --private: #4C5AA8;
    --private-tint: rgba(76, 90, 168, 0.08);
    --private-border: rgba(76, 90, 168, 0.35);
}

::selection { background: rgba(242, 163, 60, 0.28); }

/* ── scrollbars — themed thin rails so nested scroll regions (transcript, tool groups,
   payloads, diffs) don't render the OS default over the dark brand surfaces ── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 8px;
    border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-low); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── base ── */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; margin: 0; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 8px; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--text-muted); }

/* ── shell ── */
/* Pin the app to the viewport so nothing pushes the page taller than the screen: the
   sidenav (its recents region) and .content each scroll internally instead. Without a
   fixed height here the whole shell grows and the *body* scrolls — an outer scrollbar. */
.shell { display: flex; height: 100vh; overflow: hidden; }
.sidenav {
    /* Width is user-draggable: the resizer writes --sidenav-width onto :root and it's
        persisted to localStorage (bootstrapped pre-paint in App.razor). 200px is the
        default when nothing is stored. */
    width: var(--sidenav-width, 200px); flex-shrink: 0;
    border-right: 1px solid rgba(247, 240, 228, 0.035);
    padding: 20px 12px;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh;
    min-width: 0;
    /* Above the topbar (z:10) so the workspace switcher's dropdown, which overflows the sidebar's
       right edge into the main content, paints over it. Still below modals/toasts (z:100+). */
    z-index: 15;
}
:root[data-theme="light"] .sidenav {
    border-right-color: var(--border);
}
/* Drag handle straddling the sidebar's right border. A hairline highlight appears on
   hover/drag; double-click resets to the default width. Hidden on the mobile rail. */
.sidenav-resizer {
    position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
    cursor: col-resize; z-index: 5; touch-action: none;
    background: transparent; border: none; padding: 0;
}
.sidenav-resizer::after {
    content: ""; position: absolute; top: 0; right: 3px; width: 2px; height: 100%;
    background: var(--accent); opacity: 0; transition: opacity 0.12s ease;
}
.sidenav-resizer:hover::after, .sidenav-resizer.dragging::after { opacity: 0.6; }
/* While dragging, kill text selection and force the resize cursor everywhere. */
body.sidenav-resizing { cursor: col-resize; user-select: none; }

/* ── collapsed rail — user-toggled slim rail on desktop ──
   Opt-in: the `sidenav-collapsed` class is set on :root by skirnirSidebar (persisted to localStorage,
   re-applied pre-paint in App.razor) and flipped by the header toggle button. Collapsed, only the
   toggle shows in a thin rail; the sidebar floats out of flow (position:fixed) with the main pane
   holding a matching left margin so nothing reflows. Hovering the rail temporarily reveals the full
   menu as an overlay that slides over the content — see the :hover rule below. Desktop-only: below the
   760px breakpoint the toggle is hidden and the rail is always icon-only, so this feature is scoped
   out (the mobile block keeps the rail sticky and the nav visible regardless of the collapsed flag). */
@media (min-width: 761px) {
    :root.sidenav-collapsed .sidenav {
        position: fixed; top: 0; left: 0; height: 100vh;
        width: 56px; padding: 20px 8px; overflow: hidden;
        z-index: 40; transition: width 0.15s ease;
        /* Collapsed the rail carries no right border — just the toggle floating in a thin gutter
           (a hairline would read as an empty divider); on hover-reveal the box-shadow separates it. */
        border-right: none;
    }
    /* Reserve the rail's width so the main pane sits beside it, not under it. */
    :root.sidenav-collapsed .main { margin-left: 56px; }
    :root.sidenav-collapsed .sidenav-resizer { display: none; }
    /* Collapsed & idle: only the collapse toggle shows; centre it in the thin rail. The idle look also
       applies while `sidenav-hover-suppressed` is set — the moment right after the user clicks hide,
       when the pointer is still over the rail. Without it the :hover reveal would fire immediately and
       the sidebar would appear not to collapse at all (see skirnirSidebar.setCollapsed). The class is
       cleared on the next pointerleave, so a later hover reveals the menu as usual. */
    :root.sidenav-collapsed .sidenav:not(:hover) > *:not(.sidenav-head),
    :root.sidenav-collapsed .sidenav.sidenav-hover-suppressed > *:not(.sidenav-head) { display: none; }
    :root.sidenav-collapsed .sidenav:not(:hover) .sidenav-head,
    :root.sidenav-collapsed .sidenav.sidenav-hover-suppressed .sidenav-head { justify-content: center; margin-bottom: 0; }
    :root.sidenav-collapsed .sidenav:not(:hover) .sidenav-head > *:not(.sidenav-toggle),
    :root.sidenav-collapsed .sidenav.sidenav-hover-suppressed .sidenav-head > *:not(.sidenav-toggle) { display: none; }
    /* Idle centres the toggle in the thin rail — give it symmetric padding so the icon sits dead-centre
       (the expanded header instead insets it to the sidebar icon line; see .sidenav-toggle below). */
    :root.sidenav-collapsed .sidenav:not(:hover) .sidenav-toggle,
    :root.sidenav-collapsed .sidenav.sidenav-hover-suppressed .sidenav-toggle { padding: 8px; }
    /* Hover: float the full-width menu over the content (no reflow — the rail's margin is unchanged).
       Nothing else to restyle — with the collapse overrides gone on hover, the sidebar renders exactly
       like the expanded rail. Suppressed right after a click so the collapse actually takes. */
    :root.sidenav-collapsed .sidenav:hover:not(.sidenav-hover-suppressed) {
        width: var(--sidenav-width, 200px); overflow: visible;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.4);
    }
}
/* Icon-only sidebar-collapse toggle, leading the sidebar header: a plain affordance with no button
   chrome at all — no background in any state, the hover only lightens the icon colour (mirrors the
   section switcher next door). It's the one control that survives when the rail is collapsed. The
   icon matches the Chat / Code section switcher (16px) and is inset 10px so its left edge sits on the
   same line as the nav-row icons.
   (Collapsed & idle overrides this to symmetric padding so it centres in the rail; see above.) */
.sidenav-toggle {
    display: inline-flex; align-items: center; padding: 8px 8px 8px 10px; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); transition: color 0.12s ease;
}
.sidenav-toggle:hover { color: var(--text); }
.sidenav-toggle .nav-icon { width: 16px; height: 16px; }
/* Header row — the collapse toggle (far left), the wordmark lockup (fills the middle), and the icon
   Chat / Code section switcher (far right), all on one line. Both the toggle and the switcher were
   relocated here out of the removed app top-bar / the old below-brand segmented control. The bottom
   margin that used to sit on .brand lives on the row so the three share the line. */
.sidenav-head { display: flex; align-items: center; gap: 4px; margin-bottom: 22px; }
/* Brand lockup — Runestave mark + wordmark. The accent lands on the mark and the í. */
.brand {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0; overflow: hidden;
    padding: 2px 10px;
    color: var(--text) !important;
    text-decoration: none !important;
}
.brand-mark { flex-shrink: 0; display: block; color: var(--accent); }
/* Yield to the icon switcher on its right when the rail is narrow — clip the wordmark rather than
   pushing the switcher off the row. */
.brand-word {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.nav-primary { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius);
    font-family: var(--font-display); font-size: 14px;
    color: var(--text-muted) !important; text-decoration: none !important;
    background: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text) !important; }
/* Active page indicator: raised umber fill + an inset amber bar down the leading edge (mirrors
   the design's active nav treatment and the recents-row active state). */
.nav-item.active { background: var(--bg-hover); color: var(--text) !important; font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
/* Brand line-icons: 24px grid, 2px stroke, round caps/joins, inheriting the row's text colour. */
.nav-icon {
    width: 18px; height: 18px; flex-shrink: 0;
}
.sidenav-section-label {
    margin: 18px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Flexible spacer between the scoped nav and the pinned footer (replaces the old recents region's
   flex:1). Keeps the footer pinned to the bottom without an always-visible list. */
.sidenav-spacer { flex: 1; min-height: 8px; }

/* ── section switcher — icon-only Chat / Code control, inline at the right of the header ────────────
   Two icon buttons sharing the brand row (the brand's flex:1 pins the pair to the right edge). One
   active pill (raised accent fill), the other muted; mirrors the workspace-switcher's surface tokens
   so the stacked controls read as one system. */
.sidenav-switcher {
    display: flex; gap: 2px; flex-shrink: 0;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); padding: 2px;
}
.sidenav-seg {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px; border: none; background: none; cursor: pointer;
    color: var(--text-muted); border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.sidenav-seg .nav-icon { width: 16px; height: 16px; }
.sidenav-seg:hover { color: var(--text); }
.sidenav-seg.active {
    background: var(--accent); color: var(--accent-contrast);
}

/* ── Chat section — standalone conversations ───────────────────────────────────────
   Fills the sidebar between the switcher and the footer; the list scrolls on its own. Reuses the
   nav row treatment so a chat row reads like the rest of the nav. */
.sidebar-chats { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidebar-chats-new {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; border-radius: var(--radius);
    background: var(--accent); color: var(--accent-contrast) !important;
    font-family: var(--font-display); font-size: 14px; font-weight: 600;
    text-decoration: none !important;
}
.sidebar-chats-new:hover { background: var(--accent-hover); }
.sidebar-chats-act-del:hover { color: var(--danger, #d9534f); }
.sidebar-chats-search {
    display: flex; align-items: center; gap: 6px; margin: 10px 0 4px;
    padding: 6px 8px; border: 1px solid var(--border-subtle);
    background: var(--bg-terminal); border-radius: var(--radius);
}
.sidebar-chats-search-ic { flex-shrink: 0; color: var(--text-faint); }
.sidebar-chats-search-input {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    color: var(--text); font-family: var(--font-display); font-size: 13px;
}
/* Projects — a first-class, visible section (not a hidden filter menu): the header's + creates one,
   each row filters the chat list to its chats and reveals rename/delete on hover, and "All chats"
   clears the filter. Sits between the search box and the scrolling chat list; caps its own height and
   scrolls internally when a user keeps many projects, so it never crowds out the chat list. */
.sidebar-projects { flex-shrink: 0; margin: 8px 0 2px; }
.sidebar-projects-head {
    display: flex; align-items: center; justify-content: space-between; margin: 0 8px 2px;
}
.sidebar-projects-title {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.16em; color: var(--text-faint);
}
.sidebar-projects-new {
    display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border: none; background: none; color: var(--text-faint); border-radius: 5px; cursor: pointer;
}
.sidebar-projects-new:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-projects-list { max-height: 30vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sidebar-proj-item {
    display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    padding: 6px 10px; border: none; border-radius: var(--radius); background: none; cursor: pointer;
    color: var(--text-muted); font-size: 13px; margin-bottom: 1px;
}
.sidebar-proj-item:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-proj-item.active { color: var(--text); background: var(--bg-hover); box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-proj-ic { flex-shrink: 0; color: var(--text-faint); }
.sidebar-proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-proj-count { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
/* Per-project rename/delete: hidden until the row is hovered, so the count shows in the calm state. */
.sidebar-proj-actions { display: none; flex-shrink: 0; gap: 2px; }
.sidebar-proj-item:hover .sidebar-proj-actions { display: flex; }
.sidebar-proj-item:hover .sidebar-proj-count { display: none; }

/* Per-chat "Move to project" — a small popover listing the caller's projects (plus "No project"), so a
   chat can be filed from the list, not only from the open chat. Anchored to the *row*, not the trigger
   icon: the icon sits at the row's right edge and the list scrolls, so a menu right-anchored to the
   icon would reach past the sidebar's left edge, off the viewport and clipped by the list's overflow.
   Right-anchored to the row with its width clamped to the row's, it always opens fully on-screen,
   just below the row. */
.sidebar-chats-move-wrap { display: flex; }
.sidebar-chats-act.on { color: var(--accent); }
.sidebar-chats-move-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 190px; max-width: 100%;
    max-height: 260px; overflow-y: auto; padding: 6px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-elevated); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.sidebar-chats-move-head {
    padding: 2px 6px 5px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.14em; color: var(--text-faint);
}
.sidebar-chats-move-item {
    display: flex; align-items: center; width: 100%; text-align: left; padding: 6px 8px; border: none;
    border-radius: 6px; background: none; cursor: pointer; color: var(--text-muted); font-size: 13px;
}
.sidebar-chats-move-item:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-chats-move-item.active { color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-chats-move-empty { padding: 4px 8px; margin: 0; font-size: 12px; color: var(--text-faint); }
.sidebar-chats-list { flex: 1; min-height: 0; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px; }
.sidebar-chats-empty { padding: 8px 8px 4px; font-size: 12px; }
.sidebar-chats-group {
    margin: 12px 8px 4px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.16em; color: var(--text-faint);
}
.sidebar-chats-group:first-child { margin-top: 4px; }
/* position: relative — containing block for the row's "Move to project" popover (see above), which
   anchors to the row's right edge rather than the small trigger icon. */
.sidebar-chats-item {
    position: relative;
    display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: var(--radius);
    margin-bottom: 1px; color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.sidebar-chats-item:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-chats-item.active {
    background: var(--bg-hover); color: var(--text); box-shadow: inset 2px 0 0 var(--accent);
}
.sidebar-chats-item-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Row actions: hidden until the row is hovered (or is the active chat), like the former rail. */
.sidebar-chats-item-actions { display: none; flex-shrink: 0; gap: 2px; }
.sidebar-chats-item:hover .sidebar-chats-item-actions,
.sidebar-chats-item.active .sidebar-chats-item-actions,
.sidebar-chats-item.menu-open .sidebar-chats-item-actions { display: flex; }
.sidebar-chats-act {
    border: none; background: none; color: var(--text-faint); cursor: pointer;
    padding: 2px 4px; border-radius: 5px; font-size: 12px; line-height: 1;
}
.sidebar-chats-act:hover { background: var(--bg-subtle); color: var(--text); }
.sidebar-chats-act.sidebar-chats-act-del:hover { color: var(--danger, #d9534f); }

/* ── Code section — recent jobs ────────────────────────────────────────────────────
   The workspace's recent jobs below the Jobs / Repos / Pull-requests nav, laid out like the Chat
   section's list (it reuses the .sidebar-chats-* search/group/row treatment); a row adds the job's
   status dot, merge glyph and a hover pin. Fills the remaining height and scrolls on its own. */
.sidebar-jobs { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidebar-jobs .sidebar-chats-search { margin-top: 2px; }
.sidebar-jobs-item { gap: 8px; text-decoration: none !important; color: var(--text-muted) !important; }
.sidebar-jobs-item:hover, .sidebar-jobs-item.active { color: var(--text) !important; }

/* ── workspace switcher ──────────────────────────────────────────────────────────
   The single control that names the current workspace and, on click, drops a searchable
   Pinned/Recent picker. Replaces the old always-visible recents block. */
.wsw { position: relative; margin: 0 0 6px; }
.wsw-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-subtle);
    background: var(--bg-panel); color: var(--text); cursor: pointer; text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.wsw-btn:hover { background: var(--bg-hover); }
.wsw-btn-empty { color: var(--text-muted); }
.wsw-avatar {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center; color: #1A1208;
    font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.wsw-avatar-sm { width: 20px; height: 20px; font-size: 10px; }
.wsw-avatar-empty { background: var(--bg-subtle); color: var(--text-faint); font-weight: 600; }
.wsw-name {
    flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; font-weight: 500; color: var(--text-strong);
}
.wsw-chevron { flex-shrink: 0; display: flex; color: var(--text-faint); }

/* dropdown */
.wsw-overlay { position: fixed; inset: 0; z-index: 50; }
.wsw-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 51; width: 264px; max-width: calc(100vw - 24px);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.wsw-search { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border-subtle); }
.wsw-search-ic { flex-shrink: 0; color: var(--text-faint); }
.wsw-search-input {
    flex: 1; min-width: 0; border: 1px solid var(--border-subtle); background: var(--bg-terminal); color: var(--text);
    font-family: var(--font-ui); font-size: 12.5px; border-radius: 8px; padding: 7px 10px; outline: none;
}
.wsw-search-input:focus { border-color: var(--accent); }
.wsw-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.wsw-group-label {
    padding: 8px 8px 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-faint);
}
.wsw-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.wsw-row:hover { background: var(--bg-hover); }
.wsw-row.active { background: var(--bg-hover); }
.wsw-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--text-strong); }
.wsw-check { flex-shrink: 0; display: flex; color: var(--accent); }
.wsw-empty { padding: 10px 8px; font-size: 12.5px; }
.wsw-footer { border-top: 1px solid var(--border-subtle); padding: 6px; }
.wsw-newrow {
    display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px;
    color: var(--text-muted); font-size: 12.5px; text-decoration: none; cursor: pointer;
}
.wsw-newrow:hover { background: var(--bg-hover); color: var(--text); }

/* ── sidebar recents — pinned + recent chats/workspaces/jobs, one scroll region ── */
/* Long row labels are already clamped with ellipsis, so the region must never scroll
   sideways (overflow-x: hidden — with overflow-y: auto the x-axis would otherwise
   compute to auto and show a stray horizontal rail). The vertical scrollbar auto-hides:
   the thumb is transparent at rest and only fades in while the region is hovered. */
.recents {
    flex: 1; min-height: 0; margin: 12px -2px 0; min-width: 0;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-color: transparent transparent;
}
.recents:hover { scrollbar-color: var(--border) transparent; }
.recents::-webkit-scrollbar-thumb { background: transparent; }
.recents:hover::-webkit-scrollbar-thumb { background: var(--border); background-clip: padding-box; }
.recents:hover::-webkit-scrollbar-thumb:hover { background: var(--text-low); background-clip: padding-box; }
.recents-group { padding-top: 16px; }
.recents-group:first-child { padding-top: 0; }
.recents-label {
    margin: 0 10px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.recents-empty { padding: 2px 10px; font-size: 12px; }
.recents-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    color: var(--text-muted) !important; text-decoration: none !important;
    font-size: 13px;
}
.recents-row:hover { background: var(--bg-hover); color: var(--text) !important; }
.recents-row.active { background: var(--bg-hover); color: var(--text) !important; box-shadow: inset 2px 0 0 var(--accent); }
.recents-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recents-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }
.recents-chevron { flex-shrink: 0; color: var(--text-low); font-size: 13px; }
/* Nested recent-jobs list no longer owns its own scroll — the whole recents region scrolls. */
.sidenav-jobs { margin: 0 -2px; }

/* Hover-reveal pin toggle on job / workspace rows (★ when pinned, ☆ on hover otherwise). */
.sidenav-pin {
    flex-shrink: 0; margin-left: 2px; padding: 0 2px;
    background: none; border: none; cursor: pointer; line-height: 1;
    font-size: 12px; color: var(--text-low); opacity: 0;
}
.sidenav-pin.pinned { color: var(--accent); opacity: 1; }
.sidenav-job:hover .sidenav-pin, .recents-row:hover .sidenav-pin,
.sidebar-jobs-item:hover .sidenav-pin, .sidebar-jobs-item.active .sidenav-pin { opacity: 1; }
.sidenav-pin:hover { color: var(--accent-hover); }
.sidenav-jobs-empty { padding: 2px 10px; font-size: 12.5px; }
.sidenav-group { margin-bottom: 2px; }
.sidenav-group-head {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; list-style: none; user-select: none;
}
.sidenav-group-head::-webkit-details-marker { display: none; }
.sidenav-group-head::before {
    content: "▸"; font-size: 9px; transition: transform 0.12s ease; color: var(--text-muted);
}
.sidenav-group[open] > .sidenav-group-head::before { transform: rotate(90deg); }
.sidenav-group-head:hover { background: var(--bg-hover); }
.sidenav-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-group-count {
    flex-shrink: 0; font-size: 10.5px; font-weight: 600;
    background: var(--bg-subtle); color: var(--text-muted);
    border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center;
}
.sidenav-job {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 20px; border-radius: var(--radius);
    color: var(--text-muted) !important; text-decoration: none !important;
    font-family: var(--font-mono); font-size: 12px;
}
.sidenav-job:hover { color: var(--text) !important; }
.sidenav-job.active { color: var(--text) !important; }
.sidenav-job:hover { background: var(--bg-hover); }
.sidenav-job.active { background: var(--bg-subtle); font-weight: 600; }
.sidenav-job-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }
.sidenav-job-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-job-more {
    display: block; padding: 3px 10px 3px 20px;
    font-size: 11.5px; color: var(--text-muted) !important; text-decoration: none !important;
}
.sidenav-job-more:hover { color: var(--text) !important; }
.dot-queued, .dot-provisioning { background: var(--status-neutral); }
/* Queued-but-blocked: neutral dot that pulses so a waiting job stands out in the recents list. */
.dot-waiting { background: var(--status-neutral); animation: pulse 1.4s infinite; }
.dot-running, .dot-pushing { background: var(--status-run); }
.dot-awaitinginput { background: var(--status-wait); }
.dot-done { background: var(--status-ok); }
.dot-failed, .dot-timedout { background: var(--status-err); }
.dot-cancelled { background: var(--status-neutral); }
/* Compact PR merge-state glyph, pushed to the right edge of the sidebar job row. */
.sidenav-job-merge {
    flex-shrink: 0; margin-left: auto; padding-left: 6px;
    font-size: 11px; line-height: 1; font-weight: 700;
}
.merge-open { color: var(--status-ok); }
.merge-conflict { color: var(--status-wait); }
.merge-merged { color: var(--merge-merged); }
.merge-closed { color: var(--status-neutral); }
/* Pinned footer — Settings nav then the account row, fenced off from recents by a hairline. */
.sidenav-footer {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bg-hover);
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
/* Positioning context for the account popup, which is absolutely anchored to this row. */
.sidenav-account {
    position: relative;
    display: flex; align-items: center;
    padding: 4px 0 0; margin-top: 2px;
    min-width: 0;
}
.sidenav-avatar {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); color: var(--text);
    font-family: var(--font-display); font-size: 12px; font-weight: 600;
}
.sidenav-user {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: var(--text-muted);
    text-align: left;
}
/* The account row is now a button that opens the footer popup menu (Account / Agents /
   Settings / Logout). Reads as plain text until hovered/open, when it lifts to a hover chip. */
.sidenav-account-link {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    padding: 6px 10px; border-radius: var(--radius);
    background: none; border: none; cursor: pointer; font: inherit;
    color: inherit; text-decoration: none;
}
.sidenav-account-link:hover, .sidenav-account-link.open { background: var(--bg-hover); }
.sidenav-account-link:hover .sidenav-user, .sidenav-account-link.open .sidenav-user { color: var(--text); }
.sidenav-account-chevron { flex-shrink: 0; display: flex; color: var(--text-low); }
.sidenav-account-link:hover .sidenav-account-chevron, .sidenav-account-link.open .sidenav-account-chevron { color: var(--text-muted); }

/* Footer account popup — mirrors the workspace switcher's dropdown, but opens UPWARD since the row
   is pinned to the very bottom of the sidebar. */
.sidenav-account-overlay { position: fixed; inset: 0; z-index: 50; }
.sidenav-account-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 51;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); overflow: hidden;
    padding: 6px;
}
.sidenav-account-menu .sidenav-account-logoutform { display: block; }
.sidenav-account-menuitem {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border-radius: 8px;
    background: none; border: none; cursor: pointer; font: inherit; text-align: left;
    color: var(--text-muted); text-decoration: none; font-size: 13px;
}
.sidenav-account-menuitem:hover { background: var(--bg-hover); color: var(--text); }
.link-button {
    background: none; border: none; padding: 0;
    color: var(--text-low); cursor: pointer; font: inherit; font-size: 12.5px;
}
.link-button:hover { color: var(--text); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Generic flex spacer, reused by page-level headers across the app (Design, Jobs, …). The former
   app top-bar that this once belonged to is gone; the utility stays. */
.topbar-spacer { flex: 1; }
/* The single scroll region for page content: fills the .main column (flex: 1) and scrolls
   internally (min-height: 0 lets it shrink so overflow: auto engages). */
.content { flex: 1; min-height: 0; padding: 20px 24px 60px; max-width: 1320px; width: 100%; margin: 0 auto; overflow: auto; }

.running-indicator {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px 12px;
    color: var(--text); cursor: pointer;
    font-family: var(--font-mono); font-size: 12px;
}
.running-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--status-run);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
/* The "N waiting" twin of the running indicator: muted text + a neutral (non-accent) pulsing
   dot, so it reads as "queued behind work" rather than "actively running". */
.running-indicator.waiting { color: var(--text-muted); }
.waiting-dot { background: var(--status-neutral); }

/* ── buttons & inputs ──
   Secondary is the default .btn: 1px amber border, amber text, tinted hover.
   Primary (.btn-accent): solid amber. Ghost: borderless muted text. Danger: ember. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent); border-radius: var(--radius);
    padding: 8px 16px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Inline line-icons inside buttons/rows — inherit the current text colour by default. */
.ic { width: 16px; height: 16px; flex-shrink: 0; display: block;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ic-mini { width: 15px; height: 15px; stroke: var(--text-faint); }
.btn:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }
.btn:disabled {
    background: var(--bg-hover); color: var(--text-low);
    border-color: var(--bg-hover); cursor: not-allowed;
}
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); text-decoration: none; }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }
.btn-accent:active { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-contrast); }
.btn-danger { color: var(--status-err); border-color: var(--status-err); background: transparent; text-decoration: none; }
.btn-danger:hover { background: rgba(232, 115, 74, 0.12); color: var(--status-err); }
.btn-ghost {
    color: var(--text-muted); border-color: transparent; background: transparent; text-decoration: none;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-small { padding: 5px 12px; font-size: 12.5px; }

.input {
    width: 100%; background: var(--bg-terminal); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 11px 13px; font-family: var(--font-ui); font-size: 14px; margin-bottom: 4px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.input::placeholder { color: var(--text-low); }
/* Light mode: fields follow the parchment surface — the terminal block stays dark by
   design for code, but a form field with dark ink on it would be unreadable. */
:root[data-theme="light"] .input { background: var(--bg-subtle); }
.input-compact { width: auto; margin: 0; padding: 6px 8px; font-size: 13px; }
/* Field labels: mono caps at readable mid contrast (was near-invisible low-contrast brown).
   Inline units / "write-only" hints step down to low contrast via .field-hint. */
.field-label {
    display: block; margin: 12px 0 9px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--text-muted);
}
.field-hint { color: var(--text-low); }
.check-label {
    display: flex; align-items: center; gap: 8px; margin: 10px 0; cursor: pointer;
    font-size: 14px; color: var(--text-strong);
}
.form { max-width: 620px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.form-error { color: var(--status-err); }
.advanced { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px; }
.advanced summary { cursor: pointer; color: var(--text-muted); }

/* ── multi-repo ── */
.repo-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; margin: 10px 0; }
.repo-item:hover { text-decoration: none !important; }
.repo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.repo-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.repo-outcomes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── status pills ──
   Tinted-background pill with a matching leading dot, per the brand's status-tag spec. */
.pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--status-neutral); background: transparent;
    border: 1px solid transparent;
}
.pill::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.pill-queued, .pill-provisioning { color: var(--status-neutral); border-color: var(--border); }
/* Waiting = Queued but blocked behind running work. Same neutral as Queued, but the dot pulses
   so "stuck in line" reads distinctly from "about to start" (and from amber "Needs input"). */
.pill-waiting { color: var(--status-neutral); border-color: var(--border); }
.pill-waiting::before { animation: pulse 1.4s infinite; }
.pill-running, .pill-pushing { color: var(--status-run); background: var(--accent-tint); }
.pill-awaitinginput { color: var(--status-wait); background: rgba(255, 180, 84, 0.12); }
.pill-awaitinginput::before { animation: pulse 1.4s infinite; }
.pill-done { color: var(--status-ok); background: rgba(143, 191, 127, 0.12); }
.pill-failed, .pill-timedout { color: var(--status-err); background: rgba(232, 115, 74, 0.12); }
.pill-cancelled { color: var(--status-neutral); border-color: var(--border); }
/* PR merge-state pill — colour keyed off the .merge-* class (same tokens as the sidebar glyph). */
.merge-pill { border-color: currentColor; }

/* ── jobs dashboard ── */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.job-list { display: flex; flex-direction: column; gap: 10px; }
.job-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 14px 18px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.job-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.job-row-main { flex: 1; min-width: 0; }
.job-row-top { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.job-ws { color: var(--text-low); font-family: var(--font-mono); font-size: 12px; }
.job-ws-link { color: inherit; text-decoration: none; }
.job-ws-link:hover { color: var(--text); text-decoration: underline; }
.job-elapsed { color: var(--text-low); font-family: var(--font-mono); font-size: 12px; margin-left: auto; }
.job-prompt {
    margin: 5px 0 2px; font-family: var(--font-display); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job-ticker {
    font-family: var(--font-mono); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Compact rows for the workspace's own job list (tighter padding, prompt on one line). */
.job-row-compact { padding: 10px 16px; }
.job-row-compact .job-prompt { margin: 3px 0 0; font-size: 14px; }
.job-row-compact .job-row-top { gap: 6px; }
.job-row-compact .job-ws { font-size: 11px; }
.job-row-compact .job-elapsed { font-size: 11px; }

/* ── jobs overview (redesign) ──
   The full /jobs list: a title + stat strip, a segmented status control with live counts,
   workspace/search filters, and rich run cards. Everything is keyed off the brand tokens so it
   themes in both light and dark. (The compact .job-row list above is still used by the workspace
   and routine detail pages — this block is scoped to the standalone /jobs page.) */
@keyframes jobs-spin { to { transform: rotate(360deg); } }

.jobs-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.jobs-head h1 { margin: 0; }
.jobs-subtitle { font-size: 14px; color: var(--text-faint); margin: 9px 0 0; max-width: 60ch; }
.jobs-stats { display: flex; gap: 9px; flex-shrink: 0; }
.jobs-stat {
    min-width: 78px; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 11px; padding: 10px 14px;
}
.jobs-stat-val { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; }
.jobs-stat-val.stat-active { color: var(--accent); }
.jobs-stat-val.stat-merged { color: var(--status-ok); }
.jobs-stat-val.stat-total { color: var(--text); }
.jobs-stat-label {
    display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--text-faint); margin-top: 6px; text-transform: uppercase;
}

.jobs-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
/* Segmented status control — a pill group; the active tab lifts onto an elevated surface. */
.seg {
    display: inline-flex; background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 4px; gap: 3px;
}
.seg-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: none;
    border-radius: 7px; background: transparent; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted);
    transition: color 0.12s ease, background 0.12s ease;
}
.seg-tab:hover { color: var(--text); }
.seg-tab.is-active { color: var(--text); background: var(--bg-subtle); }
.seg-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.seg-tab.is-active .seg-count { color: var(--accent); }

.jobs-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jobs-select { min-width: 170px; }
.jobs-search {
    display: flex; align-items: center; gap: 9px; background: var(--bg-terminal);
    border: 1px solid var(--border-subtle); border-radius: 9px; padding: 8px 12px; min-width: 230px;
    transition: border-color 0.12s ease;
}
.jobs-search:focus-within { border-color: var(--accent); }
.jobs-search svg { flex-shrink: 0; color: var(--text-low); }
.jobs-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text);
    font-family: var(--font-ui); font-size: 13px;
}
.jobs-search input::placeholder { color: var(--text-low); }
.jobs-search .kbd {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-low);
    border: 1px solid var(--border-subtle); border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
}
/* Light mode: the field follows the parchment surface — the terminal block stays dark by
   design for code, but a search field with dark ink on it would be unreadable. */
:root[data-theme="light"] .jobs-search { background: var(--bg-subtle); }

/* Compact job list — a single rounded panel of dense rows (replaces the old tall run cards so
   many more jobs fit on screen). Rows are direct children; separation is a top divider on each
   row but the first, and running jobs carry an inset amber left bar. */
.job-list-panel {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.job-row {
    display: flex; align-items: center; gap: 13px; padding: 10px 16px; cursor: pointer;
    border-top: 1px solid var(--bg-hover); transition: background 0.12s ease;
}
.job-row:first-child { border-top-color: transparent; }
/* The older card-style `.job-row` rule (used by the workspace/routine lists) is an unscoped
   selector, so its `border-radius` + full box border leak in here and round every row. Reset
   them: inside the panel the only rounded corners come from the panel's own clipped edge, and
   rows separate by a top divider — not per-row boxes. */
.job-list-panel .job-row {
    border-radius: 0; background: transparent;
    border-left: 0; border-right: 0; border-bottom: 0;
}
.job-row:hover { background: var(--bg-subtle); }
.job-row:hover .job-row-title { color: var(--accent-hover); }
.job-row.is-running { box-shadow: inset 2px 0 0 var(--accent); }

.job-row-icon { display: flex; flex-shrink: 0; }
.job-row-icon svg { display: block; width: 16px; height: 16px; }
.job-row-icon.ic-run { color: var(--accent); }
.job-row-icon.ic-run svg { animation: jobs-spin 0.9s linear infinite; }
.job-row-icon.ic-done { color: var(--status-ok); }
.job-row-icon.ic-wait { color: var(--status-wait); }
.job-row-icon.ic-fail { color: var(--status-err); }
.job-row-icon.ic-closed { color: var(--text-faint); }

/* Reuse the shared status pill (.pill) as a compact, dotless, fixed-width chip in the row. The
   PR badge (.merge-pill) keeps its dot but shrinks to match. */
.job-row .pill { font-size: 10px; }
.job-row .pill:not(.merge-pill) {
    flex-shrink: 0; min-width: 62px; justify-content: center; padding: 2px 6px;
}
.job-row .pill:not(.merge-pill)::before { display: none; }
.job-row .merge-pill { flex-shrink: 0; gap: 5px; padding: 2px 8px; }
.job-row .merge-pill::before { width: 6px; height: 6px; }

.job-row-title {
    flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
    color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.12s ease;
}
.job-row-ws {
    flex-shrink: 0; width: 120px; text-align: right; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
}
.job-row-dur {
    flex-shrink: 0; width: 72px; display: inline-flex; align-items: center; justify-content: flex-end;
    gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}
.job-row-dur svg { flex-shrink: 0; color: var(--text-faint); }

/* Actions are revealed on hover (or keyboard focus) to keep rows clean and dense. The column
   holds its width even while hidden so the meta columns stay aligned across rows. */
.job-row-actions {
    flex-shrink: 0; width: 118px; display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; opacity: 0; transition: opacity 0.12s ease;
}
.job-row:hover .job-row-actions, .job-row:focus-within .job-row-actions { opacity: 1; }

/* Ghost action buttons — PR (accent) and neutral/danger delete. */
.job-btn {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display);
    font-weight: 600; font-size: 11.5px; background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); padding: 5px 10px; border-radius: 7px; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.job-btn:hover { color: var(--text); border-color: var(--border); }
.job-btn-pr { color: var(--accent); }
.job-btn-pr:hover { color: var(--accent-hover); background: var(--accent-tint); border-color: var(--accent); }
.job-btn-del:hover {
    color: var(--status-err); background: rgba(232, 115, 74, 0.12);
    border-color: rgba(232, 115, 74, 0.5);
}

/* Pager — a slim footer bar under the list panel: the current range on the left, a page-size
   select and prev/next chevrons on the right. Reuses the toolbar's control styling. */
.jobs-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-top: 14px;
}
.jobs-pager-info { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.jobs-pager-controls { display: flex; align-items: center; gap: 10px; }
.jobs-pager-size { min-width: 118px; }
.jobs-pager-nav { display: inline-flex; align-items: center; gap: 6px; }
.jobs-pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); color: var(--text-muted);
    transition: color 0.12s ease, border-color 0.12s ease;
}
.jobs-pager-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
.jobs-pager-btn:disabled { opacity: 0.4; cursor: default; }
/* Light mode: pager buttons follow the parchment surface, not the (deliberately dark) terminal. */
:root[data-theme="light"] .jobs-pager-btn { background: var(--bg-subtle); }
.jobs-pager-count {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
    min-width: 44px; text-align: center;
}
.jobs-pager-sep { color: var(--text-low); margin: 0 2px; }

/* Empty state — a filled card (not the dashed generic .empty-state) matching the run cards. */
.jobs-empty {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 14px; padding: 56px 24px; text-align: center;
}
.jobs-empty-icon {
    width: 52px; height: 52px; border-radius: 14px; background: var(--bg-terminal);
    border: 1px solid var(--border-subtle); display: grid; place-items: center;
    margin: 0 auto 16px; color: var(--text-low);
}
.jobs-empty-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.jobs-empty-copy { font-size: 13.5px; color: var(--text-faint); margin: 8px auto 20px; max-width: 360px; line-height: 1.6; }
.jobs-empty .btn { display: inline-block; }

/* Section heading above an inline list/form on a detail page. */
.section-head { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
.empty-state {
    text-align: center; padding: 70px 20px;
    border: 1px dashed var(--border); border-radius: var(--radius-card);
}
.empty-state .btn { margin-top: 12px; display: inline-block; }

/* ── home / index ──
   The landing view: a greeting, the open sessions and open PRs, and an inline composer that
   picks a workspace and starts a job without leaving the page. */
.home { max-width: 820px; margin: 0 auto; }
.home-greeting { margin-bottom: 24px; }
.home-greeting-emoji { font-style: normal; margin-left: 4px; }
.home-section { margin-bottom: 28px; }
.home-section-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px;
}
.home-section-head h2 { font-size: 16px; margin: 0; }
.home-more { font-family: var(--font-mono); font-size: 12px; }
.home-empty { padding: 14px 2px; }
.home-list { display: flex; flex-direction: column; gap: 8px; }
.home-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 11px 16px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.home-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.home-row-main { flex: 1; min-width: 0; }
.home-row-title {
    font-family: var(--font-display); font-weight: 500; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-row-sub {
    font-family: var(--font-mono); font-size: 12px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-row-num, .home-row-meta, .home-row-time { font-size: 12px; color: var(--text-low); flex-shrink: 0; }
.home-row-time { min-width: 52px; text-align: right; }

.home-composer {
    margin-top: 8px; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 14px 16px;
}
.home-composer-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.home-ws-select { max-width: 260px; }
.home-composer-prompt { resize: vertical; min-height: 60px; font-family: var(--font-ui); }
.home-composer-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px;
}
.home-hint { font-size: 12px; }

/* ── Home dashboard ──
   The landing view: a time-of-day greeting, a KPI strip, and a two-column body (active jobs +
   issues on the left, wiki + activity on the right). Max 1220px, centered in the app shell. */
.dash { max-width: 1220px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; min-height: calc(100vh - 100px); }

.dash-greeting {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.dash-greeting h1 {
    font-family: var(--font-display); font-weight: 600; font-size: 30px;
    letter-spacing: -0.02em; margin: 0;
}
.dash-greeting-actions { display: flex; gap: 9px; }
.dash-greeting-actions .btn { color: var(--text-muted); border-color: var(--border); background: var(--bg-panel); }
.dash-greeting-actions .btn:hover { color: var(--text); border-color: var(--text-low); background: var(--bg-subtle); }

/* Prompt bar — start a Chat or kick off a Job straight from Home. A mode-toggle pill row over a
   borderless textarea, with a workspace chip (job mode) and the primary CTA in the footer. */
.dash-prompt {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px 18px 14px;
    box-shadow: 0 0 0 1px rgba(242, 163, 60, 0.05), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.dash-prompt-wrap { margin-top: auto; }
.dash-prompt-modes { display: flex; gap: 6px; margin-bottom: 10px; }
.dash-prompt-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
    padding: 6px 13px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-subtle); background: transparent; color: var(--text-faint);
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.dash-prompt-pill:hover { color: var(--text-muted); border-color: var(--border); }
.dash-prompt-pill.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.dash-prompt-pill .ic-mini { width: 15px; height: 15px; stroke: currentColor; }
.dash-prompt-input {
    width: 100%; resize: none; background: transparent; border: none; outline: none;
    color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; padding: 2px 0;
}
.dash-prompt-input::placeholder { color: var(--text-low); }
.dash-prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.dash-prompt-ws {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-subtle); border-radius: 8px; padding: 5px 10px;
    color: var(--text-faint); cursor: pointer;
}
.dash-prompt-ws:hover { border-color: var(--border); }
.dash-prompt-ws svg { width: 15px; height: 15px; color: var(--text-faint); }
.dash-prompt-ws select {
    border: none; background: transparent; outline: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
}
.dash-prompt-cta {
    display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--accent-contrast); background: var(--accent); border: none;
    padding: 9px 16px; border-radius: 9px; cursor: pointer;
    transition: background 0.12s ease;
}
.dash-prompt-cta:hover { background: var(--accent-hover); }
.dash-prompt-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* dash prompt split button — immediate "Run job" with a caret for the config dialog */
.dash-prompt-split { position: relative; display: inline-flex; margin-left: auto; }
.dash-prompt-primary {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--accent-contrast); background: var(--accent); border: none;
    padding: 9px 16px; cursor: pointer; transition: background 0.12s ease;
}
.dash-prompt-primary:hover { background: var(--accent-hover); }
.dash-prompt-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.dash-prompt-caret {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.22); padding-left: 10px; padding-right: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--accent-contrast); background: var(--accent); border: none;
    cursor: pointer; transition: background 0.12s ease;
}
.dash-prompt-caret:hover { background: var(--accent-hover); }
.dash-prompt-caret:disabled { opacity: 0.5; cursor: not-allowed; }
.dash-prompt-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 280px;
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.dash-prompt-option {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 8px; padding: 9px 11px; color: var(--text);
}
.dash-prompt-option:hover { background: var(--bg-hover); }
.dash-prompt-option-label { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.dash-prompt-option-desc { font-size: 12px; color: var(--text-muted); }

/* File attachment pill in prompt bar */
.dash-prompt-attach { display: inline-flex; align-items: center; gap: 8px; }
.dash-prompt-attach-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; border: none; background: none;
    color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.dash-prompt-attach-btn:hover { background: var(--bg-hover); color: var(--text); }
.dash-prompt-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0,0,0,0); }
.dash-prompt-attach-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--accent); background: var(--accent-tint);
    border-radius: 6px; padding: 3px 8px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-prompt-attach-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; border: none; background: none;
    color: var(--accent); cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
}
.dash-prompt-attach-remove:hover { background: rgba(0,0,0,0.08); }
.dash-prompt-attach-uploading { font-size: 12px; color: var(--text-muted); }

/* KPI strip — four stat cards: big number, mini icon, delta/breakdown sub-line. */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.dash-kpi {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 18px 20px;
}
.dash-kpi-head { display: flex; align-items: center; justify-content: space-between; }
.dash-kpi-head span {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-faint);
}
.dash-kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin-top: 10px; }
.dash-kpi-sub { font-size: 12px; margin-top: 4px; }
.dash-kpi-ok { color: var(--status-ok); }
.dash-kpi-attention { color: var(--status-wait); }

/* Two-column body — 1.55fr / 1fr, collapsing to one column on narrow viewports. */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.dash-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.dash-sec-title { display: flex; align-items: baseline; gap: 10px; }
.dash-sec-head h2, .dash-sec-solo { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0; }
.dash-sec-solo { margin-bottom: 13px; }
.dash-sec-count { font-size: 11px; color: var(--text-faint); }
.dash-sec-more { font-size: 13px; color: var(--text-faint); }
.dash-sec-more:hover { color: var(--accent); text-decoration: none; }
.dash-empty { padding: 14px 2px; }

/* Active jobs list — status pill, title, repo/session id, duration. */
.dash-list { display: flex; flex-direction: column; gap: 10px; }
.dash-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 13px 16px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.dash-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.dash-row-main { min-width: 0; flex: 1; }
.dash-row-title {
    font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }

/* Compact active-jobs variant on the Home page — tighter spacing, smaller rows. */
.dash-list-compact { gap: 6px; }
.dash-row-compact { gap: 10px; padding: 9px 12px; border-radius: 10px; }
.dash-row-compact .dash-row-title { font-size: 13px; }
.dash-jobs-compact .dash-sec-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.dash-run-spinner { display: flex; flex-shrink: 0; color: var(--accent); }
.dash-run-spinner svg { display: block; width: 16px; height: 16px; animation: jobs-spin 0.9s linear infinite; }
.dash-jobs-compact .dash-empty { padding: 8px 2px; font-size: 13px; }

/* Open-PR strip below the active jobs — a hairline-separated sub-section of the same card. */
.dash-prs-compact { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-subtle); }
.dash-prs-compact .dash-sec-head { margin-bottom: 9px; }
.dash-prs-compact .dash-sec-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted); }
/* PR rows are real links (job rows are onclick divs) — keep them reading as plain rows. */
a.dash-row { text-decoration: none; color: inherit; }

/* A bordered panel that groups stacked rows (issues, wiki, activity). */
.dash-panel { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; }
.dash-panel--pad { padding: 6px; }

/* Issues table rows. */
.dash-irow {
    display: flex; align-items: center; gap: 13px; padding: 13px 16px;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    transition: background 0.12s ease; text-decoration: none; color: inherit;
}
.dash-irow:last-child { border-bottom: none; }
.dash-irow:hover { background: var(--bg-subtle); text-decoration: none; }
.dash-irow-title { font-size: 14px; color: var(--text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-itype { display: flex; flex-shrink: 0; }
.dash-itype svg { width: 17px; height: 17px; }
.dash-itype--open svg { color: var(--status-ok); }
.dash-itype--prog svg { color: var(--status-wait); }

/* Label pill — colour keyed to a curated label set, neutral fallback for anything else. */
.lbl { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
/* Labels are workspace-defined and carry their own color (rendered as an inline style, see
   IssueLabelStyle). This neutral class is the fallback for a label name with no matching label. */
.lbl-default { color: var(--text-faint); background: rgba(142, 131, 113, 0.12); }

/* Assignee avatar chip. */
.dash-avatar {
    width: 22px; height: 22px; border-radius: 6px; background: var(--bg-subtle);
    display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 10px; color: var(--accent);
}

/* Wiki recent-pages rows. */
.dash-wrow {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px;
    cursor: pointer; transition: background 0.12s ease; text-decoration: none; color: inherit;
}
.dash-wrow:hover { background: var(--bg-subtle); text-decoration: none; }
.dash-wrow-ic { stroke: var(--accent); margin-top: 1px; }
.dash-wrow-title { font-size: 14px; color: var(--text-strong); }

/* Activity timeline — a coloured dot per event kind, connected by a rail. */
.dash-act { display: flex; gap: 13px; padding: 4px 12px 4px; text-decoration: none; color: inherit; }
.dash-act:hover { text-decoration: none; }
.dash-act:hover .dash-act-text { color: var(--text); }
.dash-act-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: var(--text-low); }
.dash-dot--ok { background: var(--status-ok); }
.dash-dot--attention { background: var(--accent); }
.dash-dot--err { background: var(--status-err); }
.dash-dot--neutral { background: var(--text-muted); }
.dash-act-line { flex: 1; width: 1px; background: var(--border-subtle); margin-top: 5px; }
.dash-act-body { min-width: 0; flex: 1; padding-bottom: 16px; }
.dash-act:last-child .dash-act-body { padding-bottom: 6px; }
.dash-act-text { font-size: 13.5px; color: var(--text-strong); line-height: 1.5; }

/* Sidebar nav count badge (open issues). */
.nav-badge {
    margin-left: auto; font-family: var(--font-mono); font-size: 10px;
    color: var(--status-wait); background: rgba(255, 180, 84, 0.12);
    padding: 1px 7px; border-radius: 999px;
}

/* Prevent the .content container from scrolling when the home dashboard overflows its min-height. */
.content:has(.dash) { overflow: hidden; }

/* Collapse the dashboard to a single column on narrow viewports. */
@media (max-width: 900px) {
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-cols { grid-template-columns: minmax(0, 1fr); }
    .dash { min-height: auto; }
    .dash-prompt-wrap { margin-top: 10px; }
}

/* ── job view — the chat's full-bleed shell ──
   A .view-shell with the shared ViewTopbar (title / breadcrumb left; elapsed, PR, Cancel/Retry and
   the ⋯ More menu right), the transcript in the chat's centred 912px column, and the follow-up
   composer docked beneath it as the same card as the chat composer. Diff / Screenshots / Details
   open from the More menu into the shared .view-scroll/.view-column reading column. */
.job-detail .view-topbar-title { font-size: 15px; }
.job-detail .view-topbar .job-elapsed { margin: 0 4px 0 0; display: inline-flex; align-items: center; gap: 5px; }
.job-crumb { max-width: 360px; }
.job-notice { flex-shrink: 0; margin: 10px 24px 0; }

/* ⋯ More menu — drops down from the top bar's trailing edge. */
.job-more { position: relative; display: flex; }
.job-more-catcher { position: fixed; inset: 0; z-index: 19; }
.job-more-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 230px;
    padding: 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.job-more-head {
    padding: 6px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-low);
}
.job-more-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
    border: 0; border-radius: 7px; background: none; cursor: pointer; text-align: left;
    font: inherit; font-size: 13.5px; color: var(--text-muted);
}
.job-more-item:hover { background: var(--bg-hover); color: var(--text); }
.job-more-item.on { color: var(--text); }
.job-more-label { flex: 1; min-width: 0; }
.job-more-meta { font-size: 11px; color: var(--text-low); }
.job-more-check { color: var(--accent); flex-shrink: 0; }
.job-more-sep { height: 1px; margin: 6px 4px; background: var(--border-subtle); }

/* Transcript: the scroller fills the pane (its scrollbar at the window edge, like the chat thread)
   and the cards sit in the chat's centred column. The "↓ N new" pill floats over its bottom edge. */
.job-thread-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.job-thread { flex: 1; min-height: 0; overflow-y: auto; }
.job-thread .transcript {
    overflow: visible; flex: none; max-width: 912px; margin: 0 auto; padding: 28px 24px 12px;
    gap: 12px;
}
.job-thread-wrap .jump-latest {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 5;
}

/* Composer — the chat's docked card; the footer's left carries the job state as chips. */
.job-composer-dock { padding-top: 8px; }
.job-composer-hint { max-width: 912px; margin: 0 auto 8px; }
.job-composer-dock .form-error.job-composer-hint { margin: 8px auto 0; }
.job-composer-foot-only { margin-top: 0; padding-top: 0; border-top: 0; }
.job-composer .chat-composer-ctx { gap: 8px; }
.job-composer .chat-chip { min-width: 0; max-width: 100%; }
.job-composer .chat-chip-text { max-width: 260px; min-width: 0; }
.job-chip-link { cursor: pointer; text-decoration: none; }
a.job-chip-link { color: var(--accent); }
.job-chip-link:hover { border-color: var(--text-low); color: var(--text); text-decoration: none; }
.job-todo-btn { width: auto; min-width: 30px; gap: 5px; padding: 0 7px; }
.job-todo-btn svg { flex-shrink: 0; }
.job-composer .chat-input:disabled { cursor: not-allowed; }
/* Narrow screens: the bar keeps the actions — drop the elapsed clock and tighten the crumb. */
@media (max-width: 640px) {
    .job-detail .view-topbar { padding: 8px 12px; }
    .job-detail .view-topbar .job-elapsed { display: none; }
    .job-crumb { max-width: 110px; }
    .job-thread .transcript { padding: 20px 14px 10px; }
    .job-composer-dock { padding: 8px 12px 14px; }
    .job-composer .chat-chip-text { max-width: 150px; }
}

/* Retry — an accent ghost button (mirrors the design's header action). */
.btn-retry { color: var(--accent); text-decoration: none; }
.btn-retry:hover { color: var(--accent-hover); border-color: var(--accent); background: var(--accent-tint); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 14px; cursor: pointer;
    font-family: var(--font-display); font-size: 14px; color: var(--text-muted);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* ── transcript ── */
.tt-badge { font-size: 11px; font-family: var(--font-mono); line-height: 1; }

/* ── Todo drawer (the job's plan, slid in from the right) ── */
.todo-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(8, 6, 3, 0.4); }
.todo-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
    width: 340px; max-width: calc(100vw - 32px);
    display: flex; flex-direction: column;
    background: var(--bg-panel); border-left: 1px solid var(--border-subtle);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.28);
    transform: translateX(100%); transition: transform 0.18s ease;
    visibility: hidden;
}
.todo-drawer.open { transform: translateX(0); visibility: visible; }
.todo-drawer-head {
    display: flex; align-items: center; gap: 8px; flex: none;
    padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text);
}
.todo-drawer-title { font-weight: 600; font-size: 14px; }
.todo-drawer-progress {
    font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
}
.todo-drawer-close {
    margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px;
    border: none; border-radius: 6px; background: transparent; color: var(--text-muted);
    cursor: pointer; transition: color 0.12s ease, background 0.12s ease;
}
.todo-drawer-close:hover { color: var(--text); background: var(--bg-hover); }
.todo-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 6px; }
.todo-drawer-empty { padding: 8px 12px; font-size: 13px; }
.transcript {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; padding: 4px;
    min-width: 0;
}
.event { border-radius: var(--radius); }
/* Assistant prose sits directly on the page — no card chrome. The compact transcript
   reads like a conversation: text paragraphs with quiet tool-summary lines between. */
.event-assistant { padding: 2px 2px; }
.event-md { overflow-wrap: break-word; }
.event-md p:first-child { margin-top: 0; }
.event-md p:last-child { margin-bottom: 0; }
.event-md ul, .event-md ol { padding-left: 1.4em; margin: 0.4em 0; }
.event-md li { margin: 0.2em 0; }
.event-md li > ul, .event-md li > ol { margin: 0.15em 0; }
.event-md pre {
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px;
    overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
.event-md code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-subtle); border-radius: 4px; padding: 1px 5px; }
.event-md pre code { background: none; padding: 0; }
/* Syntax highlighting (highlight.js) for fenced code blocks. Applied client-side by
   skirnir.enhanceCode after render (see skirnir.js); highlight.js adds the `hljs`
   class and wraps tokens in `hljs-*` spans. The code surface (--bg-terminal) is dark in
   BOTH themes, so a single warm-on-dark palette — tuned to the amber-on-umber brand —
   works everywhere and needs no light/dark variant. Token classes only ever appear on
   highlighted blocks, so the rules are safe to scope globally. */
.hljs { color: var(--text); background: none; }
.hljs-comment, .hljs-quote { color: var(--text-low); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-section,
.hljs-doctag, .hljs-meta .hljs-keyword { color: #F2A33C; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-char.escape_ { color: #8FBF7F; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-link { color: #FFB454; }
.hljs-built_in, .hljs-type, .hljs-class .hljs-title, .hljs-title.class_,
.hljs-attr, .hljs-attribute, .hljs-selector-class, .hljs-selector-id { color: #7FBFB0; }
.hljs-title, .hljs-title.function_, .hljs-function .hljs-title { color: #E8C48D; }
.hljs-variable, .hljs-template-variable, .hljs-selector-pseudo,
.hljs-deletion, .hljs-property { color: #E8734A; }
.hljs-meta, .hljs-operator, .hljs-punctuation, .hljs-params { color: var(--text-muted); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
/* Tables — assistant markdown (chat + transcript) had no table chrome, so pipe tables read
   as borderless text. Subtle cell borders + a raised header row make the column structure
   legible without the wiki's (.markdown-body) heavier full-border look. Wide tables scroll
   horizontally inside the narrow bubble instead of clipping. */
.event-md table {
    border-collapse: collapse; margin: 0.75em 0; display: block; overflow-x: auto;
    width: max-content; max-width: 100%;
}
.event-md th, .event-md td { border: 1px solid var(--border-subtle); padding: 6px 10px; text-align: left; }
.event-md th { background: var(--bg-subtle); font-weight: 600; }

.event-tool { background: var(--bg-subtle); border: 1px solid var(--border); }
.event-tool-error { border-color: var(--status-err); }
.tool-header {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; padding: 7px 12px;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
    cursor: pointer; text-align: left;
}
.tool-chevron { color: var(--text-muted); width: 12px; }
.tool-name { font-weight: 600; }
.tool-detail {
    color: var(--text-muted); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-state { color: var(--text-muted); margin-left: auto; flex: none; }
.tool-payload {
    margin: 0; padding: 10px 12px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 12px;
    overflow-x: auto; max-height: 320px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word;
}

/* ── reasoning — the model's chain-of-thought (thinking-mode models), a muted collapsible
   card so thinking stays visible but subordinate to the final answer. ── */
.event-reasoning { border-left: 2px solid var(--border); }
.event-reasoning .tool-name { font-weight: 500; color: var(--text-muted); font-style: italic; }
.reasoning-body {
    padding: 2px 12px 8px 32px; color: var(--text-muted);
    font-style: italic; overflow-wrap: break-word;
}
.reasoning-body p:first-child { margin-top: 0; }
.reasoning-body p:last-child { margin-bottom: 0; }

/* ── tool group — a run of consecutive tool calls folded into one quiet summary line
   ("Ran a command, read 3 files, searched code ›") with no box chrome; the details
   box only appears when the line is clicked open. ── */
.tool-group { min-width: 0; }
.tool-group-error .tool-group-summary { color: var(--status-err); }
.tool-group-header {
    display: flex; align-items: center; gap: 8px; max-width: 100%;
    background: none; border: none; padding: 1px 2px;
    font: inherit; font-size: 13.5px; color: var(--text-muted);
    cursor: pointer; text-align: left;
}
.tool-group-header:hover { color: var(--text); }
.tool-group-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-group-running { color: var(--status-run); font-size: 11.5px; flex: none; }
.tool-group-failed { color: var(--status-err); font-size: 11.5px; flex: none; }
.tool-group-chevron { color: var(--text-low); flex: none; }
/* Cap the revealed run so a 30-call group can't balloon the page — it scrolls instead. */
.tool-group-body {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 420px; overflow-y: auto;
    margin-top: 6px; padding: 8px;
    background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ── agent question (interactive answer form) ── */
.event-question {
    background: var(--bg-panel); border: 1px solid var(--accent);
    border-radius: var(--radius); padding: 12px 14px;
}
.question-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.question-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: var(--accent-contrast);
    font-weight: 700; font-size: 13px; flex: none;
}
.question-label { font-weight: 600; }
.question-answered {
    margin-left: auto; font-size: 12px; color: var(--status-ok);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.question-item { padding: 8px 0; border-top: 1px solid var(--border); }
.question-item:first-of-type { border-top: none; }
.question-item-head { font-weight: 600; margin-bottom: 4px; }
.question-item-body { font-size: 13.5px; margin-bottom: 8px; }
.question-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.question-option {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    background: var(--bg-subtle); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 10px; cursor: pointer; font-size: 13px;
}
.question-option:hover:not(:disabled) { border-color: var(--accent); }
.question-option.selected { border-color: var(--accent); background: var(--bg-panel); }
.question-option:disabled { opacity: 0.6; cursor: default; }
.question-option-desc { color: var(--text-muted); font-size: 12px; }
.question-answer { margin: 0; resize: vertical; min-height: 40px; }
.question-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.question-raw-toggle {
    margin-top: 8px; background: none; border: none; padding: 0;
    color: var(--text-muted); font-size: 12px; cursor: pointer;
}

/* ── plan card (agent's todowrite tool) ── */
.event-plan {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); overflow: hidden;
}
.plan-header {
    display: flex; align-items: center; gap: 8px; max-width: 100%;
    width: 100%; background: none; border: none; padding: 10px 14px;
    font: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.plan-header:hover { background: var(--bg-hover); }
.plan-title {
    font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 6px;
}
.plan-title::before {
    content: "📋"; font-size: 14px;
}
.plan-progress {
    margin-left: auto; font-size: 12px; color: var(--text-muted);
    font-family: var(--font-mono);
}
.plan-items {
    padding: 0 14px 12px; display: flex; flex-direction: column; gap: 2px;
}
.plan-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 8px; border-radius: 5px; font-size: 13.5px;
    color: var(--text); line-height: 1.45;
}
.plan-item:hover { background: var(--bg-subtle); }
.plan-checkbox {
    flex: none; width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--text-low); border-radius: 4px;
    font-size: 12px; color: var(--text-muted); margin-top: 1px;
}
.plan-item-done .plan-checkbox {
    border-color: var(--status-ok); color: var(--status-ok);
    background: var(--diff-add-bg);
}
.plan-item-done .plan-text {
    text-decoration: line-through; color: var(--text-low);
}
.plan-item-progress .plan-checkbox {
    border-color: var(--accent); color: var(--accent);
    background: var(--accent-tint);
}
.plan-item-cancelled .plan-checkbox {
    border-color: var(--text-low); color: var(--text-low);
    background: var(--bg-subtle);
}
.plan-item-cancelled .plan-text {
    text-decoration: line-through; color: var(--text-low);
}
.plan-text { flex: 1; min-width: 0; }

/* Lifecycle status lines are context, not content — keep them quiet: small, dimmed, and
   left-aligned like the rest of the transcript, with no flanking rules so they read as a
   compact aside between turns rather than a divider that dominates the transcript. */
.event-status {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--text-low); font-size: 11px;
    padding: 1px 6px;
}
.status-line { font-family: var(--font-mono); }
.status-time { font-family: var(--font-mono); }

/* Bottom-of-transcript "agent is working" pulse: a blinking block cursor + live elapsed time. */
.transcript-running {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 4px; color: var(--text-muted);
}
.running-cursor {
    display: inline-block; width: 8px; height: 15px;
    background: var(--accent); border-radius: 1px;
    animation: cursor-blink 1.1s step-end infinite;
}
.running-elapsed { font-size: 12px; color: var(--text-muted); }
@keyframes cursor-blink { 50% { opacity: 0; } }
.event-error {
    background: var(--diff-del-bg); color: var(--diff-del-text);
    border: 1px solid var(--status-err);
    padding: 10px 14px; font-family: var(--font-mono); font-size: 13px;
}
.event-raw { background: transparent; border: 1px dashed var(--border); opacity: 0.8; }

/* Boot diagnostics: a start failure surfaced inline in the transcript. Framed like an error
   (it is one) but the body is the runner's boot log, so it gets a scrollable monospace pre. */
.event-diagnostics {
    border: 1px solid var(--status-err); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow: hidden;
}
.diagnostics-head {
    color: var(--diff-del-text); background: var(--diff-del-bg);
    border-bottom: 1px solid var(--status-err);
    padding: 8px 14px; font-size: 13px; font-weight: 600;
}
.diagnostics-body {
    margin: 0; padding: 12px 14px; overflow: auto; max-height: 360px;
    font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word; min-width: 0;
}

.jump-latest {
    position: sticky; bottom: 14px; margin: 8px auto 0; display: block;
    background: var(--accent); color: var(--accent-contrast);
    border: none; border-radius: 999px; padding: 6px 16px;
    cursor: pointer; font: inherit; font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── toaster ── */
.toaster {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
    width: min(340px, calc(100vw - 36px));
}
.toast {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-left-width: 4px; border-radius: var(--radius);
    padding: 10px 32px 10px 14px; position: relative; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.toast:hover { background: var(--bg-hover); }
.toast-info { border-left-color: var(--status-run); }
.toast-warning { border-left-color: var(--status-wait); }
.toast-error { border-left-color: var(--status-err); }
.toast-title { font-weight: 600; font-size: 13.5px; }
.toast-body {
    font-size: 12.5px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toast-close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.toast-close:hover { color: var(--text); }

/* ── job composer state chips (diff stat, TTL, context gauge) — see "job view" above ── */
.composer-diff { font-size: 12px; }
.composer-diff .add { color: var(--status-ok); }
.composer-diff .del { color: var(--status-err); }
.composer-ttl { font-size: 11px; }
/* Live context-window gauge: a thin fill meter + token/limit label. Fills accent normally,
   flips to the alert color once the window is nearly full (ctx-high). */
.composer-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-low); }
.composer-ctx .ctx-meter { width: 46px; height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; flex-shrink: 0; }
.composer-ctx .ctx-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.composer-ctx.ctx-high { color: var(--status-err); }
.composer-ctx.ctx-high .ctx-fill { background: var(--status-err); }
/* JS owns the height of an auto-growing textarea (skirnirAutogrow), so the manual
   resize grip would just fight it — drop it wherever data-autogrow is set. */
textarea[data-autogrow] { resize: none; }
.followup-hint {
    margin: 0 0 8px; padding: 8px 10px; border-radius: 6px;
    background: var(--bg-subtle); color: var(--status-wait);
    font-size: 13px;
}

/* Inline button styled as a link — used inside prose like the follow-up hint so a
   one-click action reads as part of the sentence rather than a separate control. */
.linkish {
    padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
    color: var(--accent); text-decoration: underline;
}
.linkish:hover { color: var(--accent-hover); }

/* ── diff ── */
.diff-file { border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 14px; }
.diff-file-header {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border);
    padding: 7px 12px; font-family: var(--font-mono); font-size: 12.5px;
}
.diff-counts .add { color: var(--status-ok); }
.diff-counts .del { color: var(--status-err); }
.diff-body {
    margin: 0; padding: 0; overflow-x: auto;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
    background: var(--bg-panel);
}
.diff-body span { display: block; padding: 0 12px; white-space: pre; transition: background 0.12s ease; }
.diff-body span.diff-add:hover { background: color-mix(in srgb, var(--diff-add-bg) 60%, var(--bg-subtle)); }
.diff-body span.diff-del:hover { background: color-mix(in srgb, var(--diff-del-bg) 60%, var(--bg-subtle)); }
.diff-body span.diff-ctx:hover,
.diff-body span.diff-meta:hover,
.diff-body span.diff-hunk:hover { background: var(--bg-hover); }
.diff-add { background: var(--diff-add-bg); color: var(--diff-add-text); }
.diff-del { background: var(--diff-del-bg); color: var(--diff-del-text); }
.diff-hunk { color: var(--status-run); background: var(--bg-subtle); }
.diff-meta { color: var(--text-muted); }
.diff-ctx { color: var(--text); }

/* ── review diff (per-line commenting) ── */
.review-diff-body {
    margin: 0; overflow-x: auto;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
    background: var(--bg-panel);
}
.review-diff-row { display: flex; align-items: stretch; white-space: pre; }
.review-diff-lno {
    flex: 0 0 auto; min-width: 40px; padding: 0 6px; text-align: right;
    color: var(--text-low); background: var(--bg-subtle); user-select: none;
}
.review-diff-add {
    flex: 0 0 auto; width: 20px; padding: 0; border: none; background: transparent;
    color: var(--accent); cursor: pointer; text-align: center; user-select: none;
}
button.review-diff-add:hover { background: var(--accent); color: #fff; }
.review-diff-code { flex: 1 1 auto; padding: 0 10px; transition: background 0.12s ease; }
.review-diff-row.diff-add .review-diff-code { background: var(--diff-add-bg); color: var(--diff-add-text); }
.review-diff-row.diff-del .review-diff-code { background: var(--diff-del-bg); color: var(--diff-del-text); }
.review-diff-row.diff-hunk .review-diff-code { color: var(--status-run); background: var(--bg-subtle); }
.review-diff-row.diff-meta .review-diff-code { color: var(--text-muted); }
.review-diff-row.diff-add:hover .review-diff-code { background: color-mix(in srgb, var(--diff-add-bg) 60%, var(--bg-subtle)); }
.review-diff-row.diff-del:hover .review-diff-code { background: color-mix(in srgb, var(--diff-del-bg) 60%, var(--bg-subtle)); }
.review-diff-row.diff-ctx:hover .review-diff-code,
.review-diff-row.diff-hunk:hover .review-diff-code,
.review-diff-row.diff-meta:hover .review-diff-code { background: var(--bg-hover); }

.review-comment {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 10px 14px; margin: 8px 0;
}
.review-comment-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.review-comment-author { font-weight: 600; }
.review-comment-anchor { font-size: 12px; margin-bottom: 4px; }
.review-comment-del { font-size: 12px; margin-left: auto; }
.review-comment-body { font-size: 14px; overflow-wrap: anywhere; }
.review-comment-body :first-child { margin-top: 0; }
.review-comment-body :last-child { margin-bottom: 0; }
.review-composer { margin: 8px 0 12px; }
.review-outdated { padding: 12px; }

/* ── review ergonomics: toolbar, file nav, split view, word diff, threads ── */
.review-toolbar {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.review-toolbar-modes { display: flex; gap: 6px; align-items: center; }
.review-file-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.review-file-chip {
    display: inline-flex; gap: 8px; align-items: baseline;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text);
}
.review-file-chip:hover { border-color: var(--accent); }
.review-file-chip.is-viewed { opacity: 0.55; text-decoration: line-through; }
.review-file-toggle {
    display: inline-flex; gap: 8px; align-items: baseline; border: none; background: transparent;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text); cursor: pointer; padding: 0;
}
.review-file-chevron { color: var(--text-low); width: 12px; }
.review-file-viewed {
    display: inline-flex; gap: 5px; align-items: center; margin-left: 12px;
    font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
}
.diff-word-add, .diff-word-del { border-radius: 2px; }
.diff-word-add { background: rgba(143, 191, 127, 0.35); }
.diff-word-del { background: rgba(232, 115, 74, 0.35); }

/* ── inline diff view (JetBrains-style) ──
   Shows the file in its current state with additions highlighted in green, deletions as
   red ghost text, and modifications showing both old (ghost) and new (highlighted) text. */
.review-inline-body {
    margin: 0; overflow-x: auto;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
    background: var(--bg-panel);
}
.review-inline-row {
    display: flex; align-items: baseline; white-space: pre; min-height: 1.6em;
}
.review-inline-lno {
    flex: 0 0 auto; min-width: 40px; padding: 0 6px; text-align: right;
    color: var(--text-low); background: var(--bg-subtle); user-select: none;
    font-size: 11px;
}
.review-inline-code {
    flex: 1 1 auto; padding: 0 10px; position: relative;
}
.review-inline-ctx { color: var(--text); }
.review-inline-add { background: var(--diff-add-bg); }
.review-inline-add .review-inline-code { color: var(--diff-add-text); }
.review-inline-del { background: var(--diff-del-bg); }
.review-inline-del .review-inline-code {
    color: var(--diff-del-text); opacity: 0.7; text-decoration: line-through;
    text-decoration-color: var(--diff-del-text);
}
.review-inline-modified {
    background: color-mix(in srgb, var(--diff-add-bg) 50%, var(--diff-del-bg) 50%);
}

/* Inline fragment highlights */
.inline-equal { color: inherit; }
.inline-add {
    background: rgba(143, 191, 127, 0.4); color: var(--diff-add-text);
    border-radius: 2px; padding: 1px 0;
}
.inline-del {
    background: rgba(232, 115, 74, 0.25); color: var(--diff-del-text);
    border-radius: 2px; padding: 1px 0; text-decoration: line-through;
    text-decoration-color: var(--diff-del-text); opacity: 0.8;
}
.inline-modified {
    background: rgba(143, 191, 127, 0.3); color: var(--diff-add-text);
    border-radius: 2px; padding: 1px 0;
}

/* Ghost text for deleted lines — renders the deleted content as a faint overlay */
.review-inline-ghost {
    position: absolute; right: 12px; top: 0;
    color: var(--diff-del-text); opacity: 0.35;
    text-decoration: line-through; pointer-events: none;
    font-size: 11px; white-space: pre;
}

/* Hover states */
.review-inline-row:hover .review-inline-code { background: var(--bg-hover); }
.review-inline-add:hover .review-inline-code { background: color-mix(in srgb, var(--diff-add-bg) 60%, var(--bg-hover)); }
.review-inline-del:hover .review-inline-code { background: color-mix(in srgb, var(--diff-del-bg) 60%, var(--bg-hover)); }

/* Inline diff action buttons (accept/revert per line) */
.review-inline-action {
    flex: 0 0 auto; width: 20px; padding: 0; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; text-align: center; user-select: none;
    font-size: 12px; line-height: 1.6; opacity: 0; transition: opacity 0.15s ease;
}
.review-inline-row:hover .review-inline-action { opacity: 1; }
.review-inline-action:hover { color: var(--accent); background: var(--bg-hover); }
.review-inline-action.is-accepted { opacity: 1; color: var(--status-ok); }
.review-split-row { display: flex; align-items: stretch; white-space: pre; }
.review-split-cell {
    display: flex; align-items: stretch; flex: 1 1 50%; min-width: 0; overflow: hidden;
}
.review-split-cell + .review-split-cell { border-left: 1px solid var(--border); }
.review-split-cell.diff-add .review-diff-code { background: var(--diff-add-bg); color: var(--diff-add-text); }
.review-split-cell.diff-del .review-diff-code { background: var(--diff-del-bg); color: var(--diff-del-text); }
.review-split-cell.diff-empty { background: var(--bg-subtle); }
.review-split-row:hover .review-split-cell.diff-add .review-diff-code { background: color-mix(in srgb, var(--diff-add-bg) 60%, var(--bg-subtle)); }
.review-split-row:hover .review-split-cell.diff-del .review-diff-code { background: color-mix(in srgb, var(--diff-del-bg) 60%, var(--bg-subtle)); }
.review-split-row:hover .review-split-cell.diff-empty { background: var(--bg-hover); }
.review-split-full { display: block; padding: 0 12px; }
.review-thread { margin: 8px 12px; }
.review-thread .review-comment { margin: 6px 0; }
.review-thread-bar {
    display: flex; gap: 10px; align-items: baseline; font-size: 13px;
    background: var(--bg-panel); border: 1px dashed var(--border);
    border-radius: var(--radius-card); padding: 6px 14px;
}
.review-thread-actions { display: flex; gap: 12px; font-size: 12px; margin: 2px 2px 8px; }
.review-comment.is-pending { border-style: dashed; }
.review-pending-badge {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--status-run); border: 1px solid var(--status-run);
    border-radius: 999px; padding: 0 8px;
}
.review-verdict-badge {
    font-size: 12px; border: 1px solid var(--border); border-radius: 999px;
    padding: 1px 10px; color: var(--text-muted); white-space: nowrap;
}
.review-verdict-badge.verdict-approve { color: var(--status-ok); border-color: var(--status-ok); }
.review-verdict-badge.verdict-changes { color: var(--status-err); border-color: var(--status-err); }
.review-verdict-badge.verdict-open { color: var(--status-run); border-color: var(--status-run); }
.pr-review-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pr-review-form { margin-bottom: 16px; }
.pr-review-verdicts { display: flex; gap: 16px; margin-bottom: 8px; }
.pr-merge-blockers { margin: 0 0 8px; padding-left: 18px; }
.pr-review-item { border-left: 3px solid var(--border); }

/* ── PR review page (tabbed rebuild) ──
   Header + Conversation/Files-changed tabs over a two-column body (main + a persistent metadata
   sidebar that shows only on Conversation). Both tab panes stay mounted — the inactive one is
   display:none, not unmounted — so switching tabs never reloads or loses scroll position. */
.pr-page { min-width: 0; }
.pr-header { margin-bottom: 12px; }
.pr-back { display: inline-block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.pr-back:hover { color: var(--accent); text-decoration: none; }
.pr-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pr-number { color: var(--text-low); font-size: 20px; }
.pr-title { font-size: 27px; }
.pr-submeta { margin-top: 8px; font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }

.pr-tabs { margin-bottom: 18px; }
.tab-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
    padding: 0 6px; margin-left: 6px; height: 18px; border-radius: 999px;
    background: var(--bg-subtle); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.tab.active .tab-badge { background: var(--accent-tint); color: var(--accent); }

.pr-body { display: grid; grid-template-columns: 1fr minmax(220px, 260px); gap: 24px; align-items: start; min-width: 0; }
/* Files tab renders no sidebar → the main column takes the full width. */
.pr-body:not(:has(.pr-sidebar)) { grid-template-columns: 1fr; }
.pr-main { min-width: 0; }
.pr-tabpane { min-width: 0; }
.pr-tabpane.is-hidden { display: none; }

/* ── Files-changed full-width breakout ──
   Diffs need the full viewport width to be readable, so on the Files tab the page
   breaks out of .content's centered 1320px column. The header and tabs stay in the
   normal centered column (re-constrained below); only the diff pane below them widens. */
.content:has(.pr-page-files) { max-width: none; }
.pr-page-files .pr-header,
.pr-page-files .pr-tabs { max-width: 1320px; margin-left: auto; margin-right: auto; }

.pr-card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 14px; min-width: 0;
}
.pr-description .review-comment-body { margin-top: 4px; }

/* comment head + author avatar (initials square) */
.pr-comment-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 13px; }
.pr-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.pr-avatar-sm { width: 20px; height: 20px; border-radius: 5px; font-size: 9.5px; }
.pr-badge {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}

/* checks list — one hairline-separated row per CI check */
.pr-checks-card { padding: 0; overflow: hidden; }
.pr-check-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.pr-check-row:last-child { border-bottom: none; }
.pr-check-row:hover { background: var(--bg-hover); }
.pr-check-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700;
    border: 1.5px solid currentColor;
}
.pr-check-icon.check-ok { color: var(--status-ok); }
.pr-check-icon.check-fail { color: var(--status-err); }
.pr-check-icon.check-run { color: var(--status-run); }
.pr-check-icon.check-neutral { color: var(--status-neutral); }
.pr-check-name { font-weight: 600; font-size: 13.5px; }
.pr-check-meta { color: var(--text-low); font-size: 12px; }
.pr-check-log { margin-left: auto; font-size: 12.5px; white-space: nowrap; }

/* merge card */
.pr-merge-warning { color: var(--status-err); margin: 0 0 8px; font-size: 13.5px; }
.pr-merge-clean { color: var(--status-ok); margin: 0 0 8px; }
.pr-merge-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* merge split button: primary label (reflects the picked strategy) + caret that opens the menu */
.merge-split { position: relative; display: inline-flex; }
.merge-split-primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.merge-split-caret {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.22); padding-left: 10px; padding-right: 10px;
}
.merge-split-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 320px;
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.merge-split-option {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 8px; padding: 9px 11px; color: var(--text);
}
.merge-split-option:hover { background: var(--bg-hover); }
.merge-split-option.is-selected { background: var(--accent-tint); }
.merge-split-option-label { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.merge-split-option.is-selected .merge-split-option-label { color: var(--accent); }
.merge-split-option-desc { font-size: 12px; color: var(--text-muted); }
/* Invisible full-viewport catcher so a click anywhere closes the strategy menu. */
.menu-backdrop { position: fixed; inset: 0; z-index: 20; }

/* composer */
.pr-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.pr-hint { font-size: 12px; }

/* right metadata sidebar */
.pr-sidebar {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 4px 16px; min-width: 0;
    position: sticky; top: 16px;
}
.pr-sidebar-section { padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.pr-sidebar-section:last-child { border-bottom: none; }
.pr-sidebar-label {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-faint); margin-bottom: 5px;
}
.pr-sidebar-value { font-size: 13px; color: var(--text-strong); overflow-wrap: anywhere; }
.pr-sidebar-author { display: flex; align-items: center; gap: 7px; }

/* ── PR detail — labels, reviewers, title edit, modal, issue links ── */
.pr-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pr-label {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; line-height: 1.4;
    border: 1px solid var(--border); color: var(--text-low); background: var(--bg-subtle);
}
.pr-label-feature { color: var(--status-ok); border-color: var(--status-ok); background: rgba(69,183,103,0.08); }
.pr-label-bugfix { color: var(--status-err); border-color: var(--status-err); background: rgba(234,87,87,0.08); }
.pr-label-breaking { color: var(--status-warn); border-color: var(--status-warn); background: rgba(234,179,8,0.08); }
.pr-label-docs { color: var(--accent); border-color: var(--accent); background: rgba(99,102,241,0.08); }
.pr-add-label {
    font-family: var(--font-mono); font-size: 11px; padding: 2px 8px;
    border: 1px dashed var(--border-subtle); border-radius: 999px;
    color: var(--text-faint); background: none; cursor: pointer; line-height: 1.4;
}
.pr-add-label:hover { color: var(--text-low); border-color: var(--border); }
.pr-label-remove {
    font-size: 14px; padding: 0 2px; margin-left: 4px; line-height: 1;
    color: var(--text-faint); opacity: 0.6;
}
.pr-label-remove:hover { opacity: 1; color: var(--text); }
.pr-add-label-input {
    font-family: var(--font-mono); font-size: 11px; padding: 2px 8px;
    border: 1px solid var(--accent); border-radius: 999px;
    color: var(--text); background: var(--bg); outline: none; width: 110px;
}

.pr-reviewer-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 1px;
    border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    font-size: 12px; color: var(--text); line-height: 1.5; vertical-align: middle;
}
.pr-reviewer-approved { border-color: var(--status-ok); }

.pr-icon-btn { padding: 4px 6px; margin-left: 4px; }

.pr-title-editable {
    font-family: var(--font-display); font-weight: 600; font-size: 20px;
    background: var(--bg-subtle); border: 1px solid var(--accent); border-radius: 6px;
    padding: 3px 8px; color: var(--text-strong); outline: none;
}

/* ── PR merge confirmation modal ──
   Uses the shared dialog shape (.modal-backdrop / .modal / .modal-title / .modal-actions,
   defined under "── modal ──" below); only the detail list is bespoke. Horizontal padding
   lives on .modal itself, so nothing here re-indents its own content — the old bespoke
   variant added a second 22px inset to the title and inputs only, which is what left titles
   and fields out of alignment across the dialogs sharing the .modal class. */
.merge-confirm-details {
    padding: 12px 0; font-size: 13px; line-height: 1.6; color: var(--text);
}
.merge-confirm-details > div { padding: 2px 0; }

.pr-issue-link {
    display: inline-block; font-family: var(--font-mono); font-size: 12px;
    color: var(--accent); text-decoration: none; padding: 2px 6px; border-radius: 4px; margin: 2px 4px 2px 0;
}
.pr-issue-link:hover { background: var(--bg-subtle); text-decoration: underline; }

/* ── review diff — Files-changed sidebar layout ──
   A sticky 220px file list beside the selected file's diff panel (the PR "Files changed" tab). */
.review-sidebar-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; min-width: 0; }
.review-file-sidebar {
    position: sticky; top: 16px; align-self: start;
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow: hidden; max-height: calc(100vh - 200px); overflow-y: auto;
}
.review-file-sidebar-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-faint);
}
.review-file-item {
    display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-bottom: 1px solid var(--border-subtle);
    padding: 8px 12px; color: var(--text);
}
.review-file-item:last-child { border-bottom: none; }
.review-file-item:hover { background: var(--bg-hover); }
.review-file-item.is-selected { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.review-file-item-counts { font-family: var(--font-mono); font-size: 11px; }
.review-file-item-name {
    font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-file-panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); overflow: hidden; }
.review-file-panel-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-subtle);
}
.review-file-panel-head .diff-file-name { font-size: 13px; }
.review-file-panel-head .review-toolbar-modes { margin-left: auto; }
.review-file-panel .review-diff-body { border: none; border-radius: 0; margin: 0; }

/* ── details ── */
.details {
    display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 18px 22px; margin-bottom: 16px;
    min-width: 0;
}
.details dt { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.details dd { margin: 0; overflow-wrap: anywhere; }
/* Job-detail key/value table — the redesign's spec: 150px uppercase mono keys, mono values. */
.job-detail .details { grid-template-columns: 150px 1fr; gap: 10px 18px; }
.job-detail .details dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
}
.job-detail .details dd { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); }
.prompt-full {
    margin: 0; white-space: pre-wrap; font-family: var(--font-ui);
    background: var(--bg-subtle); border-radius: 6px; padding: 10px;
}

/* ── files tab ── */
.files-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px; font-size: 13px;
}
.files-newfile { display: flex; align-items: center; gap: 8px; }
.files-newfile .input-compact { min-width: 180px; }
.files-newfile-status { margin: -4px 0 10px; }
.files-layout {
    display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 12px; align-items: start;
    min-width: 0;
}
.files-list {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow-y: auto;
    max-height: calc(100vh - 320px);
    min-width: 0;
}
.files-list-solo { max-width: 620px; }
.file-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; border-bottom: 1px solid var(--border);
    padding: 6px 10px; cursor: pointer; text-align: left;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: var(--bg-hover); }
.file-item.active { background: var(--bg-subtle); font-weight: 600; }
.file-path { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-counts { white-space: nowrap; font-size: 11.5px; }
.file-counts .add { color: var(--status-ok); }
.file-counts .del { color: var(--status-err); }
.files-viewer {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow: auto; min-width: 0;
}
.files-viewer-header {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border);
    padding: 7px 12px; font-size: 12.5px;
}
.file-content {
    margin: 0; padding: 12px; overflow: auto;
    max-height: calc(100vh - 360px);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
    white-space: pre;
}
.files-empty { padding: 14px; margin: 0; }
.file-editor {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    min-height: calc(100vh - 400px); padding: 12px; border: none;
    background: var(--bg-panel); color: var(--text);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
    white-space: pre; overflow: auto;
}
.file-editor:focus { outline: none; }
.files-editor-actions {
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid var(--border); padding: 8px 12px;
}
.files-file-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border); padding: 8px 12px;
}
.files-file-actions .input-compact { min-width: 180px; flex: 1 1 220px; }
/* Scrollable monospace log block — the self-update status log (UpdatePage). */
.logs-body {
    margin: 0; padding: 14px; overflow: auto;
    max-height: calc(100vh - 300px);
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word;
    min-width: 0;
}
/* Light mode: the log inherits dark ink, so a dark terminal block would be unreadable —
   follow the parchment surface instead. */
:root[data-theme="light"] .logs-body { background: var(--bg-subtle); }

/* ── settings — two-pane master/detail ──
   Left sub-nav swaps a single right-hand panel; each column scrolls on its own so the page
   itself never grows past one panel's worth. */
.settings-shell { display: flex; gap: 0; height: calc(100vh - 120px); }
.settings-nav {
    flex: 0 0 216px; overflow-y: auto;
    border-right: 1px solid var(--bg-hover); padding-right: 16px;
}
.settings-navgroup { margin-bottom: 18px; }
.settings-navgroup-label {
    margin: 0 0 6px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.settings-navitem {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; padding: 7px 10px; border-radius: 8px;
    font-family: var(--font-ui); font-size: 13.5px; color: var(--text-muted);
}
.settings-navitem:hover { background: var(--bg-hover); color: var(--text); }
.settings-navitem.active {
    background: var(--bg-subtle); color: var(--text); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
}
.settings-panel { flex: 1; min-width: 0; max-width: 640px; padding: 0 4px 40px 28px; overflow-y: auto; }
.settings-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.settings-panel-title {
    font-family: var(--font-display); font-weight: 600; font-size: 24px;
    letter-spacing: -0.01em; margin: 0;
}
.settings-panel-desc { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }
.settings-panel-actions { flex-shrink: 0; display: flex; gap: 8px; }
.settings-form h2 { margin-top: 26px; }
.settings-form h2:first-child { margin-top: 0; }
.settings-host-title { margin-top: 34px; margin-bottom: 12px; }
.override-badge {
    display: inline-block; margin-left: 8px; padding: 0 7px;
    border: 1px solid var(--accent); border-radius: 999px;
    color: var(--accent); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle;
}
.form-saved { color: var(--status-ok); }

/* ── workspaces ── */
.ws-list { display: flex; flex-direction: column; gap: 10px; }
.ws-row {
    display: block; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: 12px;
    padding: 14px 18px; color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ws-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.ws-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ws-repo { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; margin: 2px 0; }

/* ── routines ── */
.routine-state {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    border: 1px solid var(--border); color: var(--text-muted);
}
.routine-state-active { color: var(--status-ok); border-color: var(--status-ok); }
.routine-state-paused { color: var(--text-muted); }
.routine-state-ended { color: var(--status-err); border-color: var(--status-err); }
.routine-preview { font-size: 12.5px; margin-top: 4px; font-family: var(--font-mono); }

/* Routine detail view — header, fact grid, prompt box, then the recent-jobs list. */
.routine-detail-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.routine-detail-title h1 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.routine-back {
    font-size: 20px; line-height: 1; color: var(--text-muted);
    text-decoration: none; flex-shrink: 0;
}
.routine-back:hover { color: var(--text); }
.routine-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.routine-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 24px; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 20px;
}
.routine-meta-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.routine-meta-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-faint);
}
.routine-meta-val { font-size: 13.5px; color: var(--text); word-break: break-word; }
.routine-detail-section { margin-bottom: 22px; }
.routine-prompt-box {
    margin: 8px 0 0; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 14px 16px; font-family: var(--font-mono); font-size: 13px;
    line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--text);
}

/* ── modal ── */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh; z-index: 100;
}
.modal {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 22px 24px;
    width: min(560px, 92vw); max-height: 80vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.modal-title { font-family: var(--font-display); margin-bottom: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.composer-prompt { resize: vertical; min-height: 110px; font-family: var(--font-ui); }

/* ── image lightbox ── */
.lightbox-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; padding: 2rem;
}
.lightbox-content {
    position: relative; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center;
}
.lightbox-content img {
    max-width: 92vw; max-height: 85vh; object-fit: contain; border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5); display: block;
}
.lightbox-close {
    position: fixed; top: 1rem; right: 1rem; background: rgba(0,0,0,0.6); color: #fff;
    border: none; border-radius: 8px; width: 40px; height: 40px; display: grid; place-items: center;
    cursor: pointer; z-index: 201;
}
.lightbox-close:hover { background: rgba(0,0,0,0.8); }
.lightbox-caption {
    color: var(--text-muted); font-size: 0.85rem; margin-top: 0.75rem; text-align: center; max-width: 92vw;
}

/* Markdown images are clickable — they open in the lightbox. */
.markdown-body img { cursor: pointer; }

/* Page-header helper — a title + subtitle row with a trailing spacer. Shared: the Design
   index page reuses it (.chat-head / .chat-sub) for its own header. */
.chat-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.chat-head h1 { margin: 0; }
.chat-sub { color: var(--text-muted); font-size: 13px; }

/* ── full-bleed views — the shared shell the chat view introduced ─────────────
   A .view-shell breaks out of .content's centred 1100px column and fills the pane: the shared
   ViewTopbar (title / breadcrumb left, actions right) on top, then a .view-body holding an optional
   side panel and a .view-scroll region with a centred .view-column — the same 912px measure as the
   chat thread, so reading a wiki page and reading a conversation feel like the same app. */
.content:has(.view-shell) { max-width: none; padding: 0; overflow: hidden; }
.view-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); }
.view-topbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 48px;
    padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.view-topbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.view-topbar-actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.view-topbar-title {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 600;
}
/* Breadcrumb ancestors before the title — quiet, truncating, never wrapping the bar. */
.view-crumb {
    flex-shrink: 1; min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-muted); font-size: 13.5px; text-decoration: none;
}
a.view-crumb:hover { color: var(--text); text-decoration: none; }
.view-crumb-sep { flex-shrink: 0; color: var(--text-faint); font-size: 13px; }
/* Square icon-only button for the bar (panel toggles, delete, preview): ghost until hovered. */
.view-icon-btn {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 30px; height: 30px;
    border: 0; border-radius: var(--radius-input, 8px); background: transparent; cursor: pointer;
    color: var(--text-muted); text-decoration: none;
}
.view-icon-btn:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }
.view-icon-btn.on { color: var(--accent); }
.view-icon-btn.danger:hover { color: var(--status-err); }
.view-icon-btn .ic { width: 16px; height: 16px; }
/* Borderless title field for a bar that edits its own title (the wiki editor); lights up on focus. */
.view-topbar-input {
    flex: 1; min-width: 0; max-width: 560px; padding: 5px 8px; margin: -5px 0;
    border: 1px solid transparent; border-radius: var(--radius-input, 8px); background: transparent;
    color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 600; outline: none;
}
.view-topbar-input:hover { background: var(--bg-subtle); }
.view-topbar-input:focus { border-color: var(--accent); background: var(--bg-panel); }
.view-topbar-input::placeholder { color: var(--text-low); font-weight: 500; }
.view-body { flex: 1; min-height: 0; display: flex; }
.view-scroll { flex: 1; min-width: 0; overflow-y: auto; }
.view-column { max-width: 912px; margin: 0 auto; padding: 28px 24px 60px; }
.view-column.view-column-wide { max-width: 1320px; }
/* Centred empty state — the chat's mark + heading, reused. */
.view-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: 12px; min-height: 100%; padding: 40px 24px;
}
.view-empty p { max-width: 56ch; margin: 0; }
.view-empty .filters { justify-content: center; margin-top: 6px; }

/* ── chat — full-height two-pane layout ──────────────────────────────────────
   Like the design studio, the chat shell breaks out of .content's centered 1100px
   column and fills the viewport: a fixed history rail on the left + a conversation
   column (header · scrolling thread · docked composer) on the right. Colours are
   driven by the brand tokens so the page reverses correctly under the light theme. */
.content:has(.chat-shell) { max-width: none; padding: 0; overflow: hidden; }
.chat-shell { display: flex; position: relative; height: 100%; min-height: 0; background: var(--bg); }
/* The chat history browser (start / search / project-filter / rename-delete) moved out of this page
   and into the sidebar's Chat section (see .sidebar-chats) — the page is just the conversation now. */

/* conversation column — the context controls live in the composer footer; the only header is the
   .chat-topbar below, shown once a chat is saved so its title (also the browser tab name) is visible
   and renameable in place. */
.chat-conv { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Top bar — the saved conversation's title in the shared .view-topbar (see "full-bleed views"
   above), pinned above the scrolling thread. Clicking the title swaps it for an inline input (see
   .chat-topbar-input); the pencil is a hover affordance. */
.chat-topbar-title {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    border: 0; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: var(--radius-input, 8px);
    cursor: pointer; color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 600;
}
.chat-topbar-title:hover { background: var(--bg-subtle); }
.chat-topbar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-topbar-edit {
    width: 14px; height: 14px; flex-shrink: 0; color: var(--text-low); opacity: 0; transition: opacity 0.12s;
}
.chat-topbar-title:hover .chat-topbar-edit { opacity: 1; }
.chat-topbar-input {
    width: 100%; max-width: 480px; padding: 5px 8px;
    border: 1px solid var(--accent); border-radius: var(--radius-input, 8px); background: var(--bg-panel);
    color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 600; outline: none;
}
.chat-chip, .chat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
    background: var(--bg-panel);
}
.chat-chip-icon { width: 13px; height: 13px; color: var(--text-low); }
.chat-chip-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Model picker — the chip wraps a bare <select> so it reads as one control. */
.chat-model { cursor: pointer; padding-right: 7px; }
.chat-model:hover:not(:has(select:disabled)) { border-color: var(--text-low); }
.chat-model-select {
    border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
    font-family: var(--font-mono); font-size: 12px; max-width: 200px;
    padding: 0 2px; margin: 0; outline: none;
}
.chat-model-select:disabled { cursor: not-allowed; opacity: 0.6; }
.chat-model-select option { color: var(--text); background: var(--bg-panel); }
.chat-pill { cursor: pointer; }
.chat-pill:hover:not(:disabled) { border-color: var(--text-low); color: var(--text); }
.chat-pill:disabled { cursor: not-allowed; opacity: 0.6; }
.chat-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-low); }
.chat-pill.on { color: var(--private); border-color: var(--private-border); background: var(--private-tint); }
.chat-pill.on .chat-pill-dot { background: var(--private); }

/* ── header context: "+ Add context" + value pills + the workspace/privacy tag ── */
/* Value pills (agent / project) reuse the chip look but are clickable buttons that open the menu. */
.chat-ctx-pill { cursor: pointer; }
.chat-ctx-pill:hover:not(:disabled) { border-color: var(--text-low); color: var(--text); }
.chat-ctx { position: relative; display: flex; }
.chat-ctx-add {
    cursor: pointer; gap: 4px; color: var(--text-muted);
}
.chat-ctx-add:hover:not(:disabled) { border-color: var(--text-low); color: var(--text); }
.chat-ctx-add:disabled { cursor: not-allowed; opacity: 0.6; }
.chat-ctx-add.on { border-color: var(--text-low); color: var(--text); }
.chat-ctx-plus { font-size: 14px; line-height: 1; }
/* Menu opens UP from the composer footer (like the "/" quick-access popover beside it). */
.chat-ctx-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 260px;
    padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.chat-ctx-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px;
}
.chat-ctx-row:hover { background: var(--bg-hover); }
.chat-ctx-row-label {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 92px;
    font-size: 12px; color: var(--text-muted);
}
.chat-ctx-row .chat-model-select { flex: 1; min-width: 0; max-width: none; }
.chat-ctx-ws {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--bg-panel);
}

.chat-notice {
    margin: 14px 24px 0; padding: 12px 16px; font-size: 13px; color: var(--text-muted);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.chat-notice code {
    font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-subtle);
    border-radius: 4px; padding: 1px 5px;
}

/* scrolling thread — centered 912px column of turns */
.chat-thread { flex: 1; min-height: 0; overflow-y: auto; }
.chat-thread-inner {
    max-width: 912px; min-height: 100%; margin: 0 auto; padding: 28px 24px 12px;
    display: flex; flex-direction: column; gap: 26px;
}
.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.chat-msg.chat-user { justify-content: flex-end; }
.chat-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.chat-avatar-user {
    background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    border: 1px solid rgba(242, 163, 60, 0.22);
}
.chat-avatar-mark { background: var(--bg-subtle); border: 1px solid var(--border); color: var(--accent); }
.chat-avatar-mark svg { width: 17px; height: 17px; }
.chat-bubble-user {
    max-width: 74%; padding: 10px 14px;
    background: var(--accent-tint); border: 1px solid rgba(242, 163, 60, 0.22);
    border-radius: 14px 14px 4px 14px; color: var(--text);
    white-space: pre-wrap; overflow-wrap: break-word;
    font-size: 15.5px; line-height: 1.6;
}
.chat-bubble-assistant { min-width: 0; flex: 1; }
.chat-bubble-assistant .event-md { color: #E6DCC9; overflow-wrap: break-word; font-size: 15.5px; line-height: 1.6; }
:root[data-theme="light"] .chat-bubble-assistant .event-md { color: var(--text); }
/* Streaming indicator: the pixel-viking mascot "thinking" at the tail of the live assistant turn
   (replaces the old blinking cursor). The self-contained SVG carries its own animation; here it
   just sits on its own line under the partial reply. */
.chat-thinking { margin-top: 4px; }
.chat-error {
    align-self: flex-start; max-width: 90%;
    background: var(--diff-del-bg); color: var(--diff-del-text);
    border-radius: var(--radius); padding: 9px 13px; font-size: 13px;
}

/* inline code — amber mono chips (code inside a panel is reset below) */
.chat-bubble-assistant .event-md code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: var(--accent-tint); color: var(--accent);
    border-radius: 5px; padding: 1px 5px;
}
/* code block — deep panel with a header strip (language + copy), built by skirnir.enhanceCode */
.event-md .sk-code {
    margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.sk-code-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.sk-code-lang {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.sk-code-copy {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 4px; border-radius: 5px;
    color: var(--text-muted);
}
.sk-code-copy svg { width: 15px; height: 15px; display: block; }
.sk-code-copy:hover { background: var(--bg-hover); color: var(--text); }
.sk-code-copy.copied { color: var(--status-ok); }
.event-md .sk-code pre {
    margin: 0; border: 0; border-radius: 0; background: var(--bg-terminal);
}
/* Chat code reads a touch larger than the shared transcript default (12.5px) — the chat font is
   bumped overall, so match it here (inline code scales with the surrounding em). */
.chat-bubble-assistant .event-md pre { font-size: 14px; }
.chat-bubble-assistant .event-md .sk-code pre code {
    background: none; color: var(--text-muted); padding: 0;
}

/* empty state — a vertically- and horizontally-centred column in the space under the header:
   the mark + heading lead (.chat-empty), the composer directly below, then a one-line helper
   foot (.chat-empty-foot). No scrolling thread exists yet, so the three stack as siblings of
   .chat-conv and are centred as a group by .chat-conv-empty's auto margins (below). */
.chat-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; margin: 0 auto; padding: 0 20px 4px; max-width: 460px;
}
/* .chat-empty-mark / -title are shared: the wiki's empty states (.view-empty) reuse them. */
.chat-empty-mark {
    width: 54px; height: 54px; border-radius: 14px; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border); color: var(--accent);
}
.chat-empty-mark svg { width: 30px; height: 30px; }
.chat-empty-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.chat-empty-desc { margin: 0; color: var(--text-muted); font-size: 14px; }
.chat-empty-foot {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; margin: 0 auto; padding: 4px 20px 0; max-width: 560px;
}
/* Centre the mark + composer in the space under the header, independent of the helper foot: the
   lead's top margin and the composer's bottom margin absorb the free space above and below the
   pair equally, so the composer holds its position whether or not the foot carries text. The foot
   is taken out of that flow — pinned to the bottom of the pane — so showing the private-mode note
   (or an error) never nudges the composer upward. The composer keeps its single, unduplicated
   markup — it just isn't docked to the bottom here. */
.chat-conv-empty { position: relative; }
.chat-conv-empty .chat-empty { margin-top: auto; }
.chat-conv-empty .chat-composer-dock { margin-bottom: auto; }
.chat-conv-empty .chat-empty-foot {
    position: absolute; left: 0; right: 0; bottom: 20px;
}

/* ── New-job composer specifics — the "New job" page (/jobs/new) reuses the chat composer's card,
   pills and popover; these cover the parts a chat has no equal for. The advanced knobs live in an
   "Options" popover that is taller than the chat context menu, so it caps its height and scrolls;
   the GUI-test fields and the attachment badge sit inside the composer card. */
.newjob-opts { width: 340px; max-height: min(70vh, 560px); overflow-y: auto; }
.newjob-opts .field-label:first-child { margin-top: 0; }
.newjob-gui { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.newjob-gui-hint { font-size: 12px; line-height: 1.45; margin: 0; }
.newjob-attach { margin-top: 10px; }
.newjob-error { margin: 10px 2px 0; }

/* composer — a centered card docked at the bottom of the conversation column */
.chat-composer-dock { flex-shrink: 0; padding: 12px 24px 20px; }
.chat-composer {
    max-width: 912px; margin: 0 auto;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 12px 14px 10px;
}
/* Composer: a full-width input over a footer row. The footer's left carries the conversation's
   context controls (agent/project/knowledge, model, privacy — relocated from the removed chat
   header); its right carries the attach + "/" tools and Send. A hairline separates them from the
   input, as in the mockup. */
.chat-input {
    width: 100%;
    margin: 0; border: none; background: none; resize: none;
    color: var(--text); font-family: var(--font-ui); font-size: 15.5px; line-height: 1.5;
    min-height: 24px; max-height: 220px;
}
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--text-low); }
.chat-input:disabled { color: var(--text-low); }
.chat-composer-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle);
}
/* Context cluster takes the free width so the tools + Send sit at the trailing edge (mockup layout). */
.chat-composer-ctx { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.chat-composer-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chat-tool {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: none; border: none; color: var(--text-low);
}
.chat-tool svg { width: 17px; height: 17px; }
.chat-tool:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.chat-tool:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-tool.on { color: var(--accent); }
.chat-tool.on:hover:not(:disabled) { color: var(--accent-hover); }

/* MCP tool-server / reference picker rows (now folded into the "/" quick-access menu) */
.chat-mcp-count {
    position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--accent); color: var(--accent-contrast);
    font-family: var(--font-mono); font-size: 9px; line-height: 14px; text-align: center;
}
.chat-mcp-menu-head {
    font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-low);
    padding: 2px 6px 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.chat-mcp-empty { font-size: 12px; color: var(--text-low); padding: 4px 6px; margin: 0; }
.chat-mcp-item {
    display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px; cursor: pointer;
    font-size: 13px; color: var(--text);
}
.chat-mcp-item:hover:not(.disabled) { background: var(--bg-hover); }
.chat-mcp-item.disabled { cursor: not-allowed; color: var(--text-low); }
.chat-mcp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mcp-tag {
    margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-low);
    border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}

/* Slash-command menu — mirrors the MCP popover */
.chat-slash { position: relative; display: flex; }
.chat-slash-menu {
    position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20; width: 280px;
    padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.chat-slash-item {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    padding: 6px; border: none; border-radius: 7px; background: none; cursor: pointer; color: var(--text);
}
.chat-slash-item:hover:not(:disabled) { background: var(--bg-hover); }
.chat-slash-item:disabled { cursor: not-allowed; opacity: 0.5; }
.chat-slash-usage { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); }
.chat-slash-desc { font-size: 12px; color: var(--text-low); }
/* The "/" quick-access menu folds in tool servers, references, commands and wiki, so it can grow —
   cap its height and scroll. Section heads after the first get a hairline top rule for separation. */
.chat-quick-menu { max-height: min(60vh, 460px); overflow-y: auto; }
.chat-quick-menu .chat-mcp-menu-head:not(:first-child) {
    margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border);
}

/* Floating context menu shown when text is selected in the chat transcript (skirnirSelectionMenu).
   position:fixed — placed in viewport coords at the selection; hidden until measured/positioned. */
.sk-selmenu {
    position: fixed; z-index: 60; display: none; gap: 2px; padding: 3px;
    border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.sk-selmenu-item {
    border: none; background: none; cursor: pointer; color: var(--text);
    font-family: var(--font-display); font-size: 12.5px; font-weight: 500;
    padding: 5px 10px; border-radius: 6px; white-space: nowrap;
}
.sk-selmenu-item:hover { background: var(--bg-hover); }
.sk-selmenu-item.copied { color: var(--accent); }

/* Result line for a slash command, above the composer */
.chat-cmd-notice {
    display: flex; align-items: center; gap: 8px; margin: 0 auto 8px; max-width: 912px;
    padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
    font-size: 13px; color: var(--text);
}
.chat-cmd-notice span { flex: 1; }
.chat-cmd-notice-link { color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
.chat-cmd-notice-link:hover { color: var(--accent-hover); text-decoration: underline; }
.chat-cmd-notice-x {
    border: none; background: none; cursor: pointer; color: var(--text-low); font-size: 12px; padding: 2px 4px;
}
.chat-cmd-notice-x:hover { color: var(--text); }

/* Tool-call trace inside an assistant bubble */
.chat-tools-trace { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-tool-call {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px;
    font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border);
    background: var(--bg-subtle); color: var(--text-low);
}
.chat-tool-call-icon { font-size: 11px; }
.chat-tool-start { border-color: var(--accent); color: var(--accent); }
.chat-tool-start .chat-tool-call-icon { animation: chat-tool-spin 1.4s linear infinite; }
.chat-tool-done { color: var(--text-low); }
.chat-tool-error { border-color: var(--danger, #d9534f); color: var(--danger, #d9534f); }
@keyframes chat-tool-spin { to { transform: rotate(360deg); } }
.chat-send {
    padding: 7px 18px; border-radius: 9px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    background: var(--bg-subtle); color: var(--text-low); border: 1px solid var(--border);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.chat-send.ready { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.chat-send.ready:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chat-send:disabled { cursor: not-allowed; }

/* private mode — a cool indigo wash over the conversation marks a thread that never
   touches history (deliberately off-brand against the warm amber base) */
.chat-shell.chat-private .chat-thread { background: var(--private-tint); }
.chat-shell.chat-private .chat-composer { border-color: var(--private-border); }
.chat-shell.chat-private .chat-avatar-mark,
.chat-shell.chat-private .chat-empty-mark { color: var(--private); }

/* ── image attachments ── preview strip above textarea, file picker, message images ── */
.chat-file-input { display: none; }

.chat-attachments-preview {
    display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 8px;
}
.chat-attachment-chip {
    position: relative; display: inline-block; width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.chat-attachment-thumb {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-attachment-remove {
    position: absolute; top: 1px; right: 1px; width: 18px; height: 18px;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff;
    font-size: 10px; line-height: 1; cursor: pointer; padding: 0; display: flex;
    align-items: center; justify-content: center;
}
.chat-attachment-remove:hover { background: rgba(0,0,0,0.9); }

.chat-msg-images {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.chat-msg-image {
    max-width: 240px; max-height: 180px; border-radius: 8px; object-fit: contain;
    display: block; cursor: pointer;
}

/* ── document (text/PDF) attachments — composer chips + message chips ── */
.chat-attachment-file {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    max-width: 220px; height: 56px; padding: 0 26px 0 10px; box-sizing: border-box;
    border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel);
}
.chat-attachment-file-icon { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.chat-attachment-file-name {
    font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; word-break: break-all;
}
.chat-attachment-file-remove {
    position: absolute; top: 1px; right: 1px; width: 18px; height: 18px;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff;
    font-size: 10px; line-height: 1; cursor: pointer; padding: 0; display: flex;
    align-items: center; justify-content: center;
}
.chat-attachment-file-remove:hover { background: rgba(0,0,0,0.9); }

.chat-msg-files {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.chat-msg-file {
    display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
    padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: rgba(0,0,0,0.04); font-size: 12px;
}
.chat-msg-file-icon { flex: none; width: 16px; height: 16px; opacity: 0.8; }
.chat-msg-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bubble-user-inner {
    display: flex; flex-direction: column; gap: 0;
}
/* Column that stacks the user bubble and its quick-action row: the actions live
   BELOW the bubble (not inside it), so they add no padding to the amber bubble. */
.chat-user-col {
    display: flex; flex-direction: column; align-items: flex-end;
    min-width: 0; max-width: 74%;
}
.chat-user-col .chat-bubble-user { max-width: 100%; }
.chat-msg-text {
    white-space: pre-wrap; word-break: break-word;
}
/* Code in user messages (Markdown.RenderUserText): inline `spans` and fenced ``` blocks. The bubble
   already tints amber, so code sits on a subtly deeper panel to read as code without fighting it. */
.chat-msg-text code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: rgba(0, 0, 0, 0.16); border-radius: 5px; padding: 1px 5px;
}
.chat-msg-text pre.chat-user-code {
    margin: 8px 0; padding: 10px 12px; border-radius: 8px;
    background: var(--bg-terminal); border: 1px solid var(--border);
    white-space: pre; overflow-x: auto;
}
.chat-msg-text pre.chat-user-code code {
    background: none; padding: 0; font-size: 13.5px; color: var(--text-muted);
}

/* ── per-message quick actions — Recreate/Send-again + Copy icon buttons ──
   A subtle icon row under each message. Hidden until the message row is hovered (or a button is
   focused for keyboard use), so the transcript stays clean but the actions are one hover away.
   User actions sit under the bubble aligned to the right edge (chat-user-col), assistant to the left. */
.chat-msg-actions {
    display: flex; gap: 2px; margin-top: 6px;
    opacity: 0; transition: opacity 0.12s ease;
}
.chat-msg-actions-user { align-self: flex-end; }
.chat-msg:hover .chat-msg-actions,
.chat-msg-actions:focus-within { opacity: 1; }
.chat-msg-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: none; border-radius: 6px; background: none; cursor: pointer;
    color: var(--text-low);
    transition: background 0.12s ease, color 0.12s ease;
}
.chat-msg-action:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.chat-msg-action:disabled { opacity: 0.4; cursor: default; }
.chat-msg-action svg { width: 15px; height: 15px; }

/* ── assistant-generated files (create_file) — download chips under the reply ── */
.chat-gen-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chat-gen-file {
    display: inline-flex; align-items: stretch; max-width: 300px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel);
    overflow: hidden;
}
.chat-gen-file:hover { border-color: var(--text-low); }
.chat-gen-file.on { border-color: var(--accent); }
.chat-gen-file-open {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
    padding: 8px 12px; border: 0; background: none; color: var(--text);
    cursor: pointer; text-align: left; font: inherit;
}
.chat-gen-file-open:hover { background: var(--bg-hover); }
.chat-gen-file-icon { flex: none; width: 20px; height: 20px; color: var(--accent); }
.chat-gen-file-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-gen-file-name {
    font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-gen-file-sub {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}
.chat-gen-file-dl {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; border: 0; border-left: 1px solid var(--border); background: none;
    color: var(--text-muted); cursor: pointer;
}
.chat-gen-file-dl:hover { background: var(--bg-hover); color: var(--text); }
.chat-gen-file-dl svg { width: 16px; height: 16px; }

/* ── generated-file preview drawer — right-hand column of the chat shell ── */
.chat-file-drawer {
    flex: 0 0 clamp(320px, 34vw, 560px); min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--border-subtle); background: var(--bg-panel);
}
.chat-file-drawer-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
}
.chat-file-drawer-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-file-drawer-icon { flex: none; width: 20px; height: 20px; color: var(--accent); }
.chat-file-drawer-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-file-drawer-name {
    font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-file-drawer-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.chat-file-drawer-actions { flex: none; display: flex; gap: 4px; }
.chat-file-drawer-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-muted);
    cursor: pointer;
}
.chat-file-drawer-btn:hover { border-color: var(--text-low); color: var(--text); }
.chat-file-drawer-btn svg { width: 16px; height: 16px; }
.chat-file-drawer-body { flex: 1; min-height: 0; overflow: auto; }
.chat-file-preview {
    margin: 0; padding: 14px; min-height: 100%; box-sizing: border-box;
    background: var(--bg-terminal); color: var(--text);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
    white-space: pre; tab-size: 4;
}
.chat-file-preview code { background: none; padding: 0; white-space: pre; }

/* On a narrow viewport the drawer overlays the conversation instead of squeezing it. */
@media (max-width: 900px) {
    .chat-file-drawer {
        position: absolute; top: 0; right: 0; bottom: 0; z-index: 40;
        flex-basis: min(88vw, 460px); box-shadow: -8px 0 28px rgba(0, 0, 0, 0.32);
    }
}

/* ── login ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 36px 40px; width: min(360px, 90vw);
    text-align: center;
}
.login-card .brand { justify-content: center; margin-bottom: 10px; padding: 0; }
.login-card .brand-word { font-size: 26px; }
.login-sub {
    color: var(--text-low); margin: 0 0 22px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.login-error { color: var(--status-err); }
.login-card input {
    width: 100%; background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 12px; font: inherit; margin-bottom: 12px;
}
.login-card button {
    width: 100%; background: var(--accent); color: var(--accent-contrast);
    border: none; border-radius: var(--radius); padding: 10px;
    font: inherit; font-weight: 600; cursor: pointer;
}

/* ── Blazor circuit error / disconnect dialog ──
   Hidden until the framework unhides it when a circuit error / disconnect occurs.
   Without this element a failed circuit leaves a silent blank page. Rendered as a
   centred modal overlay (not a bottom banner) to match the rest of the UI. */
#blazor-error-ui {
    display: none;
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0, 0, 0, 0.55);
    align-items: center; justify-content: center;
}
#blazor-error-ui .blazor-error-content {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 28px 24px;
    width: min(460px, 92vw); text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
#blazor-error-ui .blazor-error-icon {
    color: var(--status-wait); margin-bottom: 12px;
}
#blazor-error-ui .blazor-error-title {
    font-family: var(--font-display); font-weight: 600; font-size: 17px;
    margin: 0 0 10px;
}
#blazor-error-ui .blazor-error-message {
    color: var(--text-muted); font-size: 14px; line-height: 1.5;
    margin: 0 0 18px;
}
#blazor-error-ui .reload {
    text-decoration: none;
}

/* ── Blazor reconnect overlay (shown during reconnection phase) ──
   The Blazor JS client creates a reconnect modal with inline styles. These rules
   override the white-background defaults to match our dark theme. The framework
   injects a dialog into the #blazor-error-ui element, or creates a separate overlay.
   We target both: the element-by-id approach AND the class-based selectors the
   framework may use. */
#blazor-error-ui .reconnect-modal,
.blazor-reconnect-modal {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    width: min(460px, 92vw);
}
#blazor-error-ui .reconnect-modal button,
.blazor-reconnect-modal button {
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    border-radius: var(--radius);
    padding: 8px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}
#blazor-error-ui .reconnect-modal button:hover,
.blazor-reconnect-modal button:hover {
    background: var(--accent-hover);
}
#blazor-error-ui .reconnect-modal p,
.blazor-reconnect-modal p {
    color: var(--text-muted);
    margin: 8px 0;
}

/* "+ New job" — the Work-section action button in the sidebar (mirrors .sidebar-chats-new); the
   app top-bar that used to host it is gone. */
.sidenav-newjob {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin: 0 0 12px; padding: 8px 10px; cursor: pointer;
    border: none; border-radius: var(--radius);
    background: var(--accent); color: var(--accent-contrast);
    font-family: var(--font-display); font-size: 14px; font-weight: 600;
}
.sidenav-newjob:hover { background: var(--accent-hover); }

/* Operational signals relocated from the removed app top-bar into the sidebar footer. Both children
   render nothing when idle (no running/queued jobs, no captured error), so the row takes no space. */
.sidenav-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sidenav-error { color: var(--status-err) !important; }
.sidenav-error:hover { background: var(--bg-hover); }


/* Account → Appearance: the relocated theme control (was an app-bar toggle). */
.theme-toggle { display: flex; gap: 8px; }

/* ── error dialog ── */
.err-dialog-backdrop {
    z-index: 200;
}
.err-dialog {
    width: min(680px, 92vw);
}
.err-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.err-dialog-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; }
.err-dialog-body { max-height: 60vh; overflow-y: auto; }
.err-type {
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    color: var(--status-err); margin-bottom: 4px;
}
.err-message {
    font-size: 14px; margin-bottom: 14px; line-height: 1.4;
}
.err-stack {
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
    font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
    color: var(--text-muted); margin: 0; max-height: 40vh; overflow-y: auto;
}

/* ── badges ── */
.badge {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; vertical-align: middle;
    background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.badge-danger { color: var(--status-err); border-color: var(--status-err); background: transparent; }

/* ── two-column field grid (model editor) ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-2 .field-label { margin-top: 10px; }

/* ── stats dashboard ── */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 24px;
}
.stat-tile {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 18px 20px;
}
.stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.1em; }
.stat-value { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; margin: 8px 0 4px; letter-spacing: -0.02em; }
.stat-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.stat-section { margin: 26px 0; }
.stat-h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 12px; }
.stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.bar-chart {
    display: flex; align-items: flex-end; gap: 3px; height: 140px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.bar-col { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 3px; }
.bar-stack { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; border-radius: 2px 2px 0 0; min-height: 1px; }
.bar-cost { background: var(--accent); opacity: 0.85; }
.bar-col:hover .bar-cost { opacity: 1; }
.bar-axis { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 4px; }

.stat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stat-table th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px solid var(--border); padding: 6px 10px 6px 0;
}
.stat-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--bg-subtle); }
.stat-table th:not(:first-child), .stat-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.stat-table tbody tr:hover td { background: var(--bg-hover); }

/* ── responsive ── */
@media (max-width: 760px) {
    /* Fixed icon rail: the draggable width and its handle don't apply here. The
       collapse toggle is redundant too — the rail is always collapsed at this width. */
    .sidenav, :root.sidenav-collapsed .sidenav { width: 60px; padding: 16px 6px; }
    .sidenav-resizer { display: none; }
    .sidenav-toggle { display: none; }
    /* Stack the header on the narrow rail: mark on top, the icon switcher beneath it (the collapse
       toggle is hidden here). */
    .sidenav-head { flex-direction: column; gap: 8px; margin-bottom: 14px; }
    .sidenav .brand { justify-content: center; padding: 2px 4px; gap: 0; }
    /* Collapsed rail — wordmark hides, the mark alone stands in (min-size 16px). */
    .sidenav .brand-word { display: none; }
    .nav-item { font-size: 12px; padding: 8px 6px; justify-content: center; }
    /* Icon-only rail: labels drop, only the brand line-icons remain. */
    .nav-item span { display: none; }
    .nav-item .nav-badge { display: none; }
    /* Icon-only new-job; the status pills carry text that doesn't fit the rail, so hide them. */
    .sidenav-newjob { padding: 8px 6px; }
    .sidenav-newjob span { display: none; }
    .sidenav-status { display: none; }
    /* Icon-only rail: the switcher shrinks to its avatar; the picker still opens on tap. */
    .wsw-btn { justify-content: center; padding: 8px 6px; }
    .wsw-name, .wsw-chevron { display: none; }
    /* Too narrow for prompt text — hide the section label and account name on small screens;
       the account collapses to the avatar with Sign out stacked beneath it. */
    .recents, .sidenav-section-label, .sidenav-user, .sidenav-account-chevron { display: none; }
    /* Icon rail: the Chat/Code scroll lists don't fit — hide them. The icon switcher stays (stacked
       vertically in the header), so section-switching still works. */
    .sidebar-chats, .sidebar-jobs { display: none; }
    .sidenav-switcher { flex-direction: column; gap: 3px; }
    .sidenav-account { flex-direction: column; gap: 6px; align-items: center; padding: 6px 0 0; }
    .sidenav-account-link { flex: none; justify-content: center; padding: 6px; }
    /* Icon-only rail is too narrow to host the popup edge-to-edge — let it size to its content. */
    .sidenav-account-menu { right: auto; min-width: 180px; }
    .sidenav-footer { margin-top: auto; }
    /* Two-pane settings stacks: the sub-nav collapses into one horizontally scrollable
       chip row so the panel starts right beneath it — a full vertical list would push
       the panel a whole screen below the fold. */
    .settings-shell { flex-direction: column; height: auto; }
    .settings-nav {
        display: flex; align-items: center; gap: 4px;
        flex-basis: auto; overflow-x: auto; overflow-y: hidden;
        border-right: none; border-bottom: 1px solid var(--bg-hover);
        padding: 0 0 10px; margin-bottom: 16px;
    }
    .settings-navgroup { display: contents; }
    .settings-navgroup-label { display: none; }
    .settings-navitem {
        width: auto; flex: 0 0 auto; white-space: nowrap;
        border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
    }
    .settings-navitem.active { box-shadow: none; border-color: var(--accent); }
    .settings-panel { max-width: none; padding: 0 0 40px; overflow-y: visible; }
    .settings-panel-head { flex-wrap: wrap; }
    .chat-thread-inner { padding: 20px 14px 10px; }
    .view-topbar { padding: 8px 14px; }
    .view-column { padding: 20px 14px 40px; }
    .view-crumb { max-width: 110px; }
    .chat-composer-dock { padding: 10px 14px 16px; }
    .content { padding: 14px 12px 60px; }
    .details { grid-template-columns: 1fr; gap: 2px 0; }
    .details dt { margin-top: 8px; }
    .files-layout { grid-template-columns: 1fr; }
    .files-list { max-height: 40vh; }
    .stat-cols { grid-template-columns: 1fr; gap: 0; }
    .grid-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ── Actions (local CI) ──
   Pipeline view: needs-levels as columns, one card per workflow job; below it the selected
   job's steps expand into streamed logs. Status colours reuse the pill tokens. */
.ci-pipeline { display: flex; gap: 26px; align-items: flex-start; overflow-x: auto; margin: 18px 0; }
.ci-stage { display: flex; flex-direction: column; gap: 10px; position: relative; }
.ci-stage + .ci-stage::before {
    content: "→"; position: absolute; left: -20px; top: 18px;
    color: var(--text-low); font-size: 14px;
}
.ci-job {
    text-align: left; cursor: pointer; min-width: 180px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 10px 14px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ci-job:hover { background: var(--bg-subtle); border-color: var(--border); }
.ci-job.selected { border-color: var(--accent); }
.ci-job-name { font-family: var(--font-display); font-weight: 500; margin-bottom: 6px; }
.ci-job-sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; color: var(--text-low); font-family: var(--font-mono); font-size: 11.5px; }
.ci-job-detail { margin-top: 8px; }
.ci-step { border: 1px solid var(--border-subtle); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ci-step-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; cursor: pointer; padding: 9px 14px;
    font-family: var(--font-display); font-size: 13.5px; color: var(--text);
}
.ci-step-head:hover { background: var(--bg-subtle); }
.ci-step-chevron { color: var(--text-low); width: 12px; }
.ci-step-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ci-step-dot.ok { background: var(--status-ok); }
.ci-step-dot.err { background: var(--status-err); }
.ci-step-dot.run { background: var(--status-run); animation: pulse 1.4s infinite; }
.ci-step-dot.neutral { background: var(--status-neutral); }
.ci-step-name { flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-step-time { color: var(--text-low); font-family: var(--font-mono); font-size: 11.5px; }
.ci-log {
    margin: 0; padding: 10px 14px; max-height: 420px; overflow: auto;
    background: var(--bg-subtle); border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word; color: var(--text-muted);
}
.ci-log-line { display: block; }
/* Checks strip on the PR page: one row per latest run per workflow. */
.pr-checks { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.pr-check {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 12px;
    color: var(--text); text-decoration: none;
}
.pr-check:hover { background: var(--bg-subtle); }
.pr-check .mono { color: var(--text-low); font-size: 12px; }

/* ── workspace wiki ── */
/* Tabs are anchors here (real URLs); keep them looking like the button tabs. */
.tab { text-decoration: none; }
.tab:hover { text-decoration: none; }

/* The wiki view is a .view-shell (see "full-bleed views"): ViewTopbar on top, then this pages panel
   as a full-height, independently scrolling rail beside the centred reading column. The panel can be
   hidden from the top bar (a per-browser preference), leaving just the document. */

/* ── Pages panel (left rail) ── */
.wiki-index {
    flex-shrink: 0; width: 260px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0;
    padding: 14px 12px 24px 16px; border-right: 1px solid var(--border-subtle);
}
.wiki-index-foot { display: flex; gap: 12px; padding: 10px 6px 0; }
.wiki-index-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
    padding: 6px 0 8px;
}
.wiki-index-count {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    background: var(--bg-subtle); color: var(--text-muted);
    border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}

/* Page list: document icon + title + kebab button per row. */
.wiki-tree-list { list-style: none; margin: 0; padding: 0; }
.wiki-tree-list .wiki-tree-list { padding-left: 12px; border-left: 1px solid var(--border-subtle); margin-left: 6px; }
.wiki-tree-node { margin: 1px 0; }

/* Section header */
.wiki-tree-sec {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 6px; border-radius: var(--radius);
}
.wiki-tree-sec:hover { background: #1F1912; }
:root[data-theme="light"] .wiki-tree-sec:hover { background: var(--bg-hover); }
.wiki-tree-sec-title {
    flex: 1; min-width: 0; font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Page row: icon + title + kebab. */
.wiki-tree-page {
    display: flex; align-items: center; gap: 6px;
    border-radius: var(--radius); padding: 4px 6px;
    cursor: pointer;
}
.wiki-tree-page:hover { background: #1F1912; }
:root[data-theme="light"] .wiki-tree-page:hover { background: var(--bg-hover); }
.wiki-tree-page.active {
    background: #241C11;
    box-shadow: inset 0 0 0 1px #38301F;
}
:root[data-theme="light"] .wiki-tree-page.active {
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--border);
}
.wiki-page-icon {
    flex-shrink: 0; width: 16px; height: 16px; display: block;
    stroke: var(--text-low); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.wiki-tree-page.active .wiki-page-icon { stroke: var(--accent); }
.wiki-tree-link {
    flex: 1; min-width: 0; padding: 3px 0; font-size: 14px;
    color: var(--text) !important; text-decoration: none !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiki-tree-page.active .wiki-tree-link {
    color: #F0E8DA !important; font-weight: 500;
}
:root[data-theme="light"] .wiki-tree-page.active .wiki-tree-link {
    color: var(--accent) !important;
}

/* Kebab button: quiet, no strong hover treatment. */
.wiki-kebab {
    flex-shrink: 0; display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 6px;
    border: none; background: transparent; cursor: pointer;
    color: #5A4B32; font-size: 16px; line-height: 1; padding: 0;
    transition: color 0.1s ease;
}
:root[data-theme="light"] .wiki-kebab { color: var(--text-low); }
.wiki-kebab:hover { color: var(--text-muted); background: transparent; }
.wiki-kebab.active { color: var(--text); }

/* "Move to" dropdown: appears below a page row when kebab is clicked. */
.wiki-move-menu {
    margin: 4px 0 2px; padding: 0 4px;
}
.wiki-move-menu select {
    width: 100%; font-size: 12px; font-family: var(--font-ui);
    padding: 4px 8px; border-radius: var(--radius);
    background: var(--bg-panel); border: 1px solid var(--border);
    color: var(--text);
}

/* Section/page edit actions: take no room until the row is hovered (or keyboard-focused), so they
   never truncate the section or page title at rest. */
.wiki-tree-actions { display: none; gap: 1px; flex-shrink: 0; }
.wiki-tree-sec:hover .wiki-tree-actions, .wiki-tree-sec:focus-within .wiki-tree-actions,
.wiki-tree-page:hover .wiki-tree-actions, .wiki-tree-page:focus-within .wiki-tree-actions { display: flex; }
.wiki-tree-actions .link-button { font-size: 12px; padding: 0 3px; color: var(--text-muted); }
.wiki-tree-actions .link-button:disabled { opacity: 0.3; cursor: default; }
.wiki-tree-root-actions .link-button { font-size: 12px; color: var(--accent); }
.wiki-tree-reparent { padding: 2px 4px 4px 6px; }
.wiki-tree-reparent select { font-size: 12px; max-width: 100%; }

/* /wiki forest: one group per workspace + the Personal group. */
.wiki-forest-intro { margin: 0 0 24px; max-width: 62ch; }
.wiki-forest-group { margin-bottom: 22px; }
.wiki-forest-head {
    display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle);
}
.wiki-forest-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text) !important; text-decoration: none !important; }
a.wiki-forest-title:hover { color: var(--accent) !important; }
.wiki-forest-empty { margin: 4px 0 0 6px; font-size: 13px; }

/* ── Reading column ── the page is prose on the page background, like a chat reply: no card, the
   title lives in the top bar, and the last-updated stamp is a quiet footer under the document. */
.wiki-doc { padding-top: 36px; }
.wiki-meta {
    margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low);
}

/* ── Editor ── */
/* Editor header: the "Content (Markdown)" label with the show/hide-preview toggle beside it. */
.wiki-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 9px; }
.wiki-editor-head .field-label { margin: 0; }

/* Formatting toolbar: icon buttons for bold/italic/list/link. */
.wiki-editor-toolbar {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 8px; border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-panel); border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.wiki-editor-toolbar + .wiki-editor-input {
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
    min-height: 400px;
}
.wiki-tb-btn {
    display: grid; place-items: center; width: 30px; height: 30px;
    border: none; border-radius: 6px; background: transparent; cursor: pointer;
    color: var(--text-muted); transition: background 0.1s ease, color 0.1s ease;
}
.wiki-tb-btn:hover { background: var(--bg-subtle); color: var(--text); }
.wiki-tb-btn svg { width: 15px; height: 15px; display: block; }
.wiki-tb-sep { width: 1px; height: 18px; background: var(--border-subtle); margin: 0 4px; }

/* Split editor: markdown source on the left, live preview on the right. The preview is optional —
   hiding it collapses the grid to a single full-width column (.wiki-editor-solo). */
.wiki-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.wiki-editor.wiki-editor-solo { grid-template-columns: 1fr; }
.wiki-editor-input {
    resize: vertical; line-height: 1.7; min-height: 400px;
    font-family: var(--font-mono); font-size: 13px;
}
.wiki-editor-preview {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 14px 16px; min-height: 360px; overflow-x: auto;
    background: var(--bg-panel);
}
.wiki-editor-preview-head {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}

/* Save status, shown in the editor's top bar beside its actions. */
.wiki-autosave {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
    margin-right: 6px;
}
/* Editor body: an optional section picker, then toolbar + split editor filling the column; the
   Markdown hint rides the toolbar's right edge instead of a paragraph of its own. */
.wiki-edit { padding-top: 20px; }
.wiki-edit .form-error { margin: 0 0 12px; }
.wiki-edit-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wiki-edit-meta .field-label { margin: 0; }
.wiki-edit-meta .input { max-width: 320px; }
.wiki-tb-hint { margin-left: auto; font-size: 12px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-edit-foot { margin: 10px 0 0; font-size: 12px; color: var(--text-low); }
.wiki-edit-foot .ic { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }

/* Rendered markdown prose — used by wiki pages and the editor preview. */
.markdown-body { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.markdown-body :first-child { margin-top: 0; }
.markdown-body :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
    font-family: var(--font-display); font-weight: 600; line-height: 1.3;
    margin: 1.4em 0 0.5em; letter-spacing: -0.01em;
}
.markdown-body h1 { font-size: 1.7em; }
.markdown-body h2 { font-size: 1.35em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border-subtle); }
.markdown-body h3 { font-size: 1.12em; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote { margin: 0 0 1em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body a { color: var(--accent); text-decoration: underline; }
/* Wikilinks: dashed underline, amber, distinct from regular links. [[Page]] expands to a plain link to
   a sibling page (raw HTML is disabled, so no wrapper class), so match on that in-wiki href. */
.markdown-body a[href^="/workspaces/"][href*="/wiki/"] { color: var(--accent); text-decoration: underline dashed; text-underline-offset: 3px; }
/* FocusOnNavigate focuses the first h1 after a route change; inside rendered prose that's the
   document's own heading, which shouldn't wear a focus ring it never received from the keyboard. */
.markdown-body h1:focus { outline: none; }
.markdown-body blockquote {
    border-left: 3px solid var(--border); padding-left: 14px; color: var(--text-muted); margin-left: 0;
}
.markdown-body code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--bg-subtle); border-radius: 4px; padding: 1px 5px;
}
.markdown-body pre {
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 12px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
.markdown-body pre code { background: none; padding: 0; font-size: inherit; }
.markdown-body table { border-collapse: collapse; margin: 0 0 1em; display: block; overflow-x: auto; width: max-content; max-width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.markdown-body th { background: var(--bg-subtle); font-weight: 700; }
.markdown-body img { max-width: 100%; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }

@media (max-width: 780px) {
    /* Narrow screens stack the pages panel above the document instead of beside it. */
    .wiki-shell .view-body { flex-direction: column; }
    .wiki-index { width: auto; max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .wiki-editor { grid-template-columns: 1fr; }
    .wiki-tb-hint { display: none; }
}

/* ── Design module ─────────────────────────────────────────────────────────
   The Design index (a decluttered project grid; creation lives behind a modal)
   and the studio (a narrow chat sidebar + a full-bleed sandboxed preview
   canvas). The index breaks out of .content's centered column for its own
   top-bar row; the studio breaks out so the canvas can use the full size. */

/* A generic bordered icon-button — shared by the index modal close, the studio
   back/settings/reload/external controls. Ghost until hover. */
.dsx-icon-btn {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid transparent; border-radius: var(--radius); padding: 0;
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.dsx-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.dsx-icon-btn.dsx-icon-btn-bordered { border-color: var(--border-subtle); }
.dsx-icon-btn svg {
    width: 17px; height: 17px; display: block;
}

/* ── index ── */
.content:has(.dsx) { max-width: none; padding: 0; overflow: hidden; display: flex; }
.dsx { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.dsx-topbar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 34px; border-bottom: 1px solid var(--border-subtle);
    background: var(--bg); position: sticky; top: 0; z-index: 5;
}
.dsx-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-faint);
}
.dsx-eyebrow-mark {
    width: 16px; height: 16px; display: block; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.dsx-new { padding: 10px 17px; }

/* The rest of the index scrolls within a centered column. */
.dsx-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.dsx-inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 34px 34px 0; }
.dsx-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dsx-header-copy { min-width: 0; }
.dsx-header-copy h1 { font-size: 30px; }
.dsx-sub { font-size: 14px; color: var(--text-faint); margin: 9px 0 0; max-width: 520px; line-height: 1.55; }
.dsx-search {
    display: flex; align-items: center; gap: 9px; min-width: 240px;
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px;
}
.dsx-search:focus-within { border-color: var(--accent); }
.dsx-search-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--text-low); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsx-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 13px; }
.dsx-search input::placeholder { color: var(--text-low); }
/* Light mode: the field follows the parchment surface, not the (deliberately dark) terminal. */
:root[data-theme="light"] .dsx-search { background: var(--bg-subtle); }

/* Right-hand header cluster: the workspace-scope segmented toggle beside the search field. */
.dsx-header-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dsx-scope {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px;
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: var(--radius);
}
:root[data-theme="light"] .dsx-scope { background: var(--bg-subtle); }
.dsx-scope-btn {
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: none; background: transparent; cursor: pointer; color: var(--text-low);
    font-family: var(--font-ui); font-size: 13px; padding: 5px 12px; border-radius: calc(var(--radius) - 3px);
}
.dsx-scope-btn:hover { color: var(--text); }
.dsx-scope-btn.active { background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

.dsx-section { display: flex; align-items: center; gap: 10px; margin-top: 28px; margin-bottom: 16px; }
.dsx-section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-faint); }
.dsx-section-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.dsx-section-rule { flex: 1; height: 1px; background: var(--border-subtle); }

/* ── project chip row (horizontal filter over the canvas gallery) ── */
.dsx-chips {
    display: flex; align-items: center; gap: 10px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin;
}
.dsx-chip {
    --dsx-accent: var(--accent);
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: var(--bg-panel); border: 1px solid var(--border-subtle); color: var(--text-muted);
    font-family: var(--font-ui); font-size: 13px;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.dsx-chip:hover { color: var(--text); border-color: var(--border); }
.dsx-chip.active {
    color: var(--text); background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.dsx-chip-mark { display: inline-flex; color: var(--dsx-accent); }
.dsx-chip.active .dsx-chip-mark { color: var(--text); }
.dsx-chip-mark-svg {
    width: 13px; height: 13px; display: block; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.dsx-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dsx-chip-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.dsx-chip.active .dsx-chip-count { color: var(--accent); }
.dsx-chip-new { border-style: dashed; color: var(--text-faint); }
.dsx-chip-new:hover { border-color: var(--accent); color: var(--text); }
.dsx-chip-plus { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── canvas gallery (one card per artwork) ── */
.dsx-canvas-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px;
    padding-bottom: 56px; align-content: start;
}
.dsx-canvas-card {
    --dsx-accent: var(--accent);
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
    transition: border-color .14s ease, transform .14s ease;
}
.dsx-canvas-card:hover { border-color: var(--border); transform: translateY(-2px); }
.dsx-canvas-card:hover .dsx-canvas-name { color: var(--accent-hover); }
.dsx-canvas-thumb {
    position: relative; height: 158px; display: grid; place-items: center; overflow: hidden;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--bg);
    background-image:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--dsx-accent) 7%, transparent) 0 1px, transparent 1px 9px),
        linear-gradient(150deg, color-mix(in srgb, var(--dsx-accent) 16%, transparent), transparent 65%);
}
.dsx-canvas-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dsx-canvas-mark { color: var(--dsx-accent); opacity: 0.9; }
.dsx-canvas-mark svg { width: 44px; height: 44px; display: block; }
.dsx-canvas-tag {
    position: absolute; top: 10px; left: 12px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-low);
    background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 2px 6px; border-radius: 5px;
}
.dsx-canvas-body { display: flex; flex-direction: column; padding: 14px 16px 15px; flex: 1; }
.dsx-canvas-name {
    font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s ease;
}
.dsx-canvas-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dsx-canvas-project {
    flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsx-canvas-updated { flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }

/* empty / no-results states in the gallery area */
.dsx-noresults { padding-bottom: 40px; }
.dsx-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    max-width: 440px; margin: 20px auto 56px; padding: 40px 24px; color: var(--text-muted);
}
.dsx-empty-mark { color: var(--text-low); }


.dsx-empty-lead { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); margin: 6px 0 0; }
.dsx-empty p.muted { font-size: 13.5px; line-height: 1.55; margin: 0; }
.dsx-empty-actions { display: flex; gap: 10px; margin-top: 6px; }

/* index modal — a touch wider than the generic .modal, brand header + footer. */
.dsx-modal { width: min(520px, 92vw); padding: 0; overflow: hidden; }
.dsx-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--border-subtle);
}
.dsx-modal-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.dsx-modal-icon { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsx-modal-body { padding: 6px 22px 4px; }
.dsx-modal-body .field-label:first-child { margin-top: 16px; }
.dsx-modal .modal-actions { padding: 4px 22px 22px; margin-top: 8px; }

/* ── studio ── */
.content:has(.design-studio) { max-width: none; padding: 0; overflow: hidden; }
.design-studio { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.design-studio-missing { display: flex; flex-direction: column; gap: 12px; padding: 40px; align-items: flex-start; }

.design-topbar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg);
}
.design-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.design-back { flex-shrink: 0; text-decoration: none; }
.design-topbar-heading { min-width: 0; }
.design-topbar-titlerow { display: flex; align-items: center; gap: 9px; }
.design-title {
    font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-topbar-subline { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); margin-top: 2px; }
.design-status {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.design-status.busy { color: var(--accent); background: rgba(242, 163, 60, 0.10); border-color: rgba(242, 163, 60, 0.24); }
.design-status.ok { color: var(--status-ok); background: rgba(143, 191, 127, 0.12); border-color: rgba(143, 191, 127, 0.24); }
.design-status.bad { color: var(--status-err); background: rgba(232, 115, 74, 0.12); border-color: rgba(232, 115, 74, 0.24); }
.design-topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.design-export { padding: 9px 17px; }

.design-viewports {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: var(--radius);
}
.design-vp {
    display: grid; place-items: center; width: 32px; height: 28px; padding: 0;
    background: transparent; border: none; border-radius: 6px; color: var(--text-faint); cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.design-vp:hover { color: var(--text); }
.design-vp.active { color: var(--accent); background: var(--bg-hover); }
.design-vp svg { width: 16px; height: 16px; }

.design-body { flex: 1; min-height: 0; display: flex; }

/* chat — a fixed, capped narrow column so the preview canvas keeps the bulk of the width.
   flex-grow/shrink are 0, so 392px is a hard max: the rail never widens on big screens. */
.design-chat {
    flex: 0 0 392px; max-width: 392px; display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--border-subtle); background: var(--bg-panel);
    position: relative;   /* anchors the file drop overlay */
}
.design-chat-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.design-chat-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.design-chat-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.design-chat-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); }
.design-settings-btn { width: 28px; height: 28px; }
.design-settings-btn svg { width: 16px; height: 16px; }

.design-transcript { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.design-empty { padding: 8px 2px; }
.design-empty-lead { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.design-empty p.muted { font-size: 13px; line-height: 1.55; margin: 0; }

.design-composer {
    flex-shrink: 0; border-top: 1px solid var(--border-subtle); padding: 14px 16px 16px;
    display: flex; flex-direction: column;
}
.design-composer-field { position: relative; }
.design-input { display: block; resize: none; min-height: 76px; padding-bottom: 44px; margin: 0; }
.design-send { position: absolute; right: 8px; bottom: 8px; padding: 7px 13px; font-size: 12.5px; }
.design-send svg { width: 13px; height: 13px; }
.design-composer-error { margin-top: 8px; }

/* composer tools — the attach-files affordance + upload status. */
.design-composer-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.design-attach {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12px; color: var(--text-low); padding: 4px 8px; border-radius: 6px;
    border: 1px dashed var(--border-subtle); transition: color .12s, border-color .12s, background .12s;
}
.design-attach:hover { color: var(--text); border-color: var(--accent); background: var(--bg-panel-2, transparent); }
.design-attach svg { width: 13px; height: 13px; }
.design-attach.disabled { opacity: .5; pointer-events: none; }
/* The <InputFile>'s <input> is the drop conduit + click target — kept in the DOM but visually hidden. */
.design-attach-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.design-upload-note { font-size: 11.5px; color: var(--text-faint); }
.design-upload-note.ok { color: var(--status-ok); }

/* File drop overlay — hidden until skirnirDrop adds `.drag-over` to the chat rail on a file drag. */
.design-drop-overlay {
    position: absolute; inset: 0; z-index: 20; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
    backdrop-filter: blur(1px); pointer-events: none;
}
.design-chat.drag-over .design-drop-overlay { display: flex; }
.design-drop-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 24px 20px; border-radius: 12px; border: 2px dashed var(--accent);
    background: var(--bg-panel); color: var(--text); font-size: 13px; font-weight: 500;
}
.design-drop-card svg { width: 30px; height: 30px; color: var(--accent); }

/* preview */
.design-canvas { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg-terminal); }
.design-toolbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.design-toolbar-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-faint); }
.design-toolbar-dims { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.design-reload { width: 30px; height: 30px; }
.design-reload svg { width: 15px; height: 15px; }
.design-rendered { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--status-ok); }
.design-rendered-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-ok); }

.design-preview-frame {
    flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 40px;
    background-image: radial-gradient(var(--accent-tint) 1px, transparent 1px); background-size: 22px 22px;
}
.design-preview-viewport {
    width: 100%; height: 100%; background: #fff;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
    overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); transition: max-width .22s ease;
}
.design-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.dsx-icon-btn.active { color: var(--accent); background: var(--bg-hover); }

/* ── chat history rail ── */
.design-history {
    flex-shrink: 0; max-height: 45%; display: flex; flex-direction: column; min-height: 0;
    border-bottom: 1px solid var(--border-subtle); background: var(--bg-terminal);
}
.design-history-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px;
}
.design-history-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); }
.design-history-new { padding: 4px 10px; font-size: 11.5px; }
.design-history-empty { padding: 4px 16px 14px; font-size: 12.5px; margin: 0; }
.design-history-list { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.design-history-item {
    display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
    padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--text); cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.design-history-item:hover { background: var(--bg-hover); }
.design-history-item.active { background: var(--bg-hover); border-color: var(--border); }
.design-history-item-title {
    font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-history-item-meta {
    display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low);
}
.design-history-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.design-history-dot.busy { background: var(--accent); }
.design-history-dot.ok { background: var(--status-ok); }
.design-history-dot.bad { background: var(--status-err); }

/* ── canvas mode toggle (preview / files) ── */
.design-modes {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.design-mode {
    padding: 4px 12px; border: none; border-radius: 6px; background: transparent;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint);
    cursor: pointer; transition: color .12s ease, background .12s ease;
}
.design-mode:hover { color: var(--text); }
.design-mode.active { color: var(--accent); background: var(--bg-hover); }

/* ── file browser ── */
.design-files { flex: 1; min-height: 0; display: flex; }
.design-files-list {
    flex: 0 0 300px; max-width: 300px; overflow-y: auto; padding: 8px;
    border-right: 1px solid var(--border-subtle); background: var(--bg-panel);
    display: flex; flex-direction: column; gap: 1px;
}
.design-files-empty { padding: 14px; font-size: 12.5px; margin: 0; }
.design-file-row {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--text); cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.design-file-row:hover { background: var(--bg-hover); }
.design-file-row.active { background: var(--bg-hover); border-color: var(--border); }
.design-file-ic { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--text-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.design-file-path {
    flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left;
}
.design-file-size { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.design-file-view { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.design-file-viewbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.design-file-viewname {
    font-family: var(--font-mono); font-size: 12px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-file-iframe { background: #fff; }
.design-file-placeholder { flex: 1; display: grid; place-items: center; }

@media (max-width: 900px) {
    .dsx-topbar { padding: 12px 16px; }
    .dsx-inner { padding-left: 16px; padding-right: 16px; }
    .design-body { flex-direction: column; }
    .design-chat { flex: 0 0 45%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .design-files { flex-direction: column; }
    .design-files-list { flex: 0 0 40%; max-width: none; border-right: none; border-bottom: 1px solid var(--border-subtle); }
}

/* Issue tracker — the redesigned workspace views: a segmented List / Board toggle over the same
   issue set. Board columns are Backlog → Todo → In progress → In review → Done; the Done column is
   the closed state. Cards drag between columns. Detail-page form styles (.issue-new,
   .issue-detail-body) live at the bottom of this block. */

.issue-new { margin: 16px 0 8px; }
.issue-detail-body { margin: 4px 0 8px; }


.iss-lede { margin: -4px 0 18px; font-size: 14px; }

/* toolbar row: view toggle + filter tabs on the left, search on the right */
.iss-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 20px; flex-shrink: 0;
}
.iss-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* segmented control (shared shape for the view toggle and the open/closed filter) */
.iss-toggle, .iss-ftabs {
    display: inline-flex; gap: 3px; padding: 4px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 10px;
}
:root[data-theme="light"] .iss-toggle,
:root[data-theme="light"] .iss-ftabs { background: var(--bg-subtle); }
.iss-toggle-btn, .iss-ftab {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    border: none; background: transparent; border-radius: 7px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted);
    transition: color 0.12s, background 0.12s;
}
.iss-toggle-btn:hover, .iss-ftab:hover { color: var(--text); }
.iss-toggle-btn.active, .iss-ftab.active { color: var(--text); background: var(--bg-subtle); }
:root[data-theme="light"] .iss-toggle-btn.active,
:root[data-theme="light"] .iss-ftab.active { background: var(--bg-panel); }
.iss-ftab-count { margin-left: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.iss-ftab.active .iss-ftab-count { color: var(--accent); }

.iss-search {
    display: flex; align-items: center; gap: 9px; min-width: 210px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: 9px; padding: 8px 12px;
}
:root[data-theme="light"] .iss-search { background: var(--bg-subtle); }
.iss-search:focus-within { border-color: var(--accent); }
.iss-search svg { color: var(--text-low); flex-shrink: 0; }
.iss-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    color: var(--text); font-family: var(--font-ui); font-size: 13px;
}

/* ── list view ── */
.iss-list {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); overflow: hidden;
}
.iss-row {
    display: flex; align-items: center; gap: 14px; padding: 15px 18px 15px 12px;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    text-decoration: none; color: inherit; transition: background 0.12s;
}
.iss-row:last-child { border-bottom: none; }
.iss-row:hover { background: var(--bg-subtle); text-decoration: none; }
.iss-row:hover .iss-row-title { color: var(--accent-hover); }
.iss-status { display: flex; flex-shrink: 0; }
.iss-status svg { display: block; }
.iss-status--open { stroke: var(--status-ok); }
.iss-status--closed { stroke: #B08A6A; }
:root[data-theme="light"] .iss-status--closed { stroke: var(--text-muted); }
.iss-row-main { min-width: 0; flex: 1; }
.iss-row-titleline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.iss-row-title { font-size: 14.5px; font-weight: 500; color: var(--text-strong); transition: color 0.12s; }
.iss-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }
.iss-prio-wrap { display: flex; flex-shrink: 0; }
.iss-prio { display: block; }
.iss-comments {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
}
.iss-comment-ic { stroke: var(--text-faint); }

/* empty state */
.iss-empty {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 56px 24px; text-align: center;
}
.iss-empty-ic {
    width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    display: grid; place-items: center;
}
.iss-empty-ic svg { color: var(--text-low); }
.iss-empty-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.iss-empty-sub { font-size: 13.5px; color: var(--text-faint); margin: 8px auto 20px; max-width: 360px; line-height: 1.6; }

/* ── board view ── the .content container flips to a flex column so the board fills the
   remaining height, scrolls horizontally, and each column scrolls internally. */
.content:has(.iss-board) { display: flex; flex-direction: column; overflow: hidden; max-width: none; }
.iss-board {
    flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 8px;
}
.iss-col {
    width: 288px; flex-shrink: 0; display: flex; flex-direction: column;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); transition: background 0.12s, border-color 0.12s;
}
:root[data-theme="light"] .iss-col { background: var(--bg-subtle); }
.iss-col.drag-over { background: var(--accent-tint); border-color: var(--accent); }
.iss-col-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 12px; flex-shrink: 0; }
.iss-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.iss-col-name { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.iss-col-count {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
    background: var(--bg); border: 1px solid var(--border-subtle);
    padding: 1px 8px; border-radius: 999px;
}
.iss-col-add {
    margin-left: auto; display: flex; padding: 0; border: none; background: none;
    color: var(--text-low); cursor: pointer;
}
.iss-col-add:hover { color: var(--text); }
.iss-col-cards {
    flex: 1; min-height: 0; overflow-y: auto; padding: 2px 12px 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.iss-card {
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: 11px; padding: 13px 13px 12px; cursor: grab;
    transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}
:root[data-theme="light"] .iss-card { background: var(--bg-panel); }
.iss-card:hover { border-color: var(--text-low); background: var(--bg-hover); }
.iss-card:active { cursor: grabbing; }
.iss-card.dragging { opacity: 0.4; }
.iss-card-top { display: flex; align-items: flex-start; gap: 8px; }
.iss-card-title {
    flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text-strong); line-height: 1.4;
    overflow-wrap: anywhere;
}
.iss-card-top .iss-prio-wrap { margin-top: 2px; }
.iss-card-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.iss-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.iss-card-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.iss-card-meta .iss-comments { font-size: 10.5px; }
.iss-card-av { margin-left: auto; }
.iss-drop {
    border: 1px dashed var(--border); border-radius: 11px; padding: 18px;
    text-align: center; font-size: 12px; color: var(--text-low);
}

/* ── new-issue modal ── */
.iss-modal-overlay {
    position: fixed; inset: 0; z-index: 40; display: flex;
    align-items: flex-start; justify-content: center; padding: 80px 24px;
    background: rgba(8, 6, 3, 0.66); backdrop-filter: blur(4px);
}
.iss-modal {
    width: 100%; max-width: 560px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.iss-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--border-subtle);
}
.iss-modal-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; }
.iss-modal-close {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    border: none; background: none; color: var(--text-faint); cursor: pointer;
}
.iss-modal-close:hover { color: var(--text); background: var(--bg-subtle); }
.iss-modal-body { padding: 22px; }
.iss-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iss-field { margin-bottom: 16px; }
.iss-field-grid .iss-field { margin-bottom: 0; }
.iss-field-grid { margin-bottom: 16px; }

/* Composer image-upload affordance (new issue / edit description / comment). */
.iss-composer-tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.iss-attach { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--accent); }
.iss-attach:hover { color: var(--accent-strong, var(--accent)); }
.iss-attach-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low); }
.iss-label-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.iss-label-toggle {
    border-style: solid; border-width: 1px; border-color: transparent;
    cursor: pointer; opacity: 0.55; transition: opacity 0.12s, border-color 0.12s;
    font-family: var(--font-mono); font-size: 11px;
}
.iss-label-toggle:hover { opacity: 0.85; }
.iss-label-toggle.on { opacity: 1; border-color: currentColor; }

/* ── label manager (modal) ── define/rename/recolor/delete a workspace's issue labels. */
.lblmgr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.lblmgr-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.lblmgr-row:last-child { border-bottom: none; }
.lblmgr-spacer { flex: 1; }
.lblmgr-del { color: var(--status-err); }
.lblmgr-form { border-top: 1px solid var(--border); padding-top: 14px; }
.lblmgr-form-head { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.lblmgr-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lblmgr-swatch { width: 22px; height: 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.lblmgr-swatch:hover { opacity: 0.85; }
.lblmgr-swatch.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--bg) inset; }
.lblmgr-color { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.lblmgr-preview { margin-top: 10px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.isd-sec-manage { float: right; font-size: 11px; font-weight: 400; color: var(--accent); }
.iss-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 6px; }

/* Read-only label chips on the issue detail page. */
.iss-detail-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 720px) {
    .iss-field-grid { grid-template-columns: 1fr; }
}

/* ── issue detail (redesign) ──────────────────────────────────────────────────
   The single-issue view: a back link, an issue header (status pill + meta + title,
   with a primary/secondary action bar), then a two-column body — description card +
   threaded comment composer on the left, a compact metadata sidebar on the right.
   Collapses to one column when narrow. Everything is tokenized so light theme works. */
.isd { max-width: 1000px; margin: 0 auto; }

.isd-back {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.12s;
}
.isd-back:hover { color: var(--text); text-decoration: none; }
.isd-back svg { flex-shrink: 0; }

/* header: title block on the left, action bar (wraps) on the right */
.isd-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.isd-header-main { min-width: 0; flex: 1; }
.isd-metarow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.isd-meta-ws { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.isd-meta-sep { color: var(--text-low); }
.isd-meta-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.isd-title {
    font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.02em;
    line-height: 1.25; margin: 0; text-wrap: pretty; color: var(--text);
}
.isd-actions { display: flex; gap: 9px; flex-shrink: 0; flex-wrap: wrap; }
.isd-actions .btn svg { flex-shrink: 0; }
/* icon-only ghost buttons (edit / delete) */
.isd-iconbtn { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }
/* positive ghost (Close / Close & comment) */
.isd-btn-positive { color: var(--status-ok); border-color: rgba(143, 191, 127, 0.42); }
.isd-btn-positive:hover { color: var(--status-ok); background: rgba(143, 191, 127, 0.12); border-color: var(--status-ok); }

/* status pill (concentric-ring icon + label); color modifiers match the board dots */
.isd-spill {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.isd-spill svg { flex-shrink: 0; }
.st-backlog    { color: var(--text-faint); background: rgba(142, 131, 113, 0.12); border-color: rgba(142, 131, 113, 0.28); }
.st-todo       { color: #8F9FBF; background: rgba(143, 159, 191, 0.10); border-color: rgba(143, 159, 191, 0.24); }
:root[data-theme="light"] .st-todo       { color: #4A6090; background: rgba(74, 96, 144, 0.10); border-color: rgba(74, 96, 144, 0.24); }
.st-inprogress { color: var(--accent); background: var(--accent-tint); border-color: rgba(242, 163, 60, 0.28); }
.st-review     { color: #B58FBF; background: rgba(181, 143, 191, 0.10); border-color: rgba(181, 143, 191, 0.24); }
:root[data-theme="light"] .st-review     { color: #7B4F8A; background: rgba(123, 79, 138, 0.10); border-color: rgba(123, 79, 138, 0.24); }
.st-done       { color: var(--status-ok); background: rgba(143, 191, 127, 0.10); border-color: rgba(143, 191, 127, 0.24); }

/* two-column body */
.isd-grid {
    display: grid; grid-template-columns: 1fr 268px; gap: 28px;
    margin-top: 28px; align-items: start;
}
.isd-left { min-width: 0; }

/* description card */
.isd-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); overflow: hidden;
}
.isd-card-head {
    display: flex; align-items: center; gap: 9px; padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.isd-card-head svg { color: var(--text-faint); flex-shrink: 0; }
.isd-card-head-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-strong); }
.isd-card-edit { margin-left: auto; font-size: 12.5px; color: var(--text-faint); padding: 0; }
.isd-card-edit:hover { color: var(--text); }
.isd-desc-body { padding: 18px 18px 20px; font-size: 14.5px; line-height: 1.68; color: var(--text-muted); }
.isd-desc-empty { padding: 18px; font-size: 14px; color: var(--text-faint); }
.isd-edit { max-width: none; margin: 0; }

/* comments heading + count badge */
.isd-comments-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 16px; }
.isd-comments-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; }
.isd-jobs-head { margin-top: 24px; }
.isd-count {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    padding: 2px 9px; border-radius: 999px;
}

/* comment thread */
.isd-comment-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.isd-comment { display: flex; gap: 12px; }
.isd-avatar {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 600; font-size: 12px;
    background: var(--bg-subtle); color: var(--text-strong); flex-shrink: 0;
}
.isd-avatar-accent { background: var(--accent-tint); color: var(--accent); }
.isd-avatar-sm { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.isd-bubble {
    flex: 1; min-width: 0; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; border-top-left-radius: 4px; overflow: hidden;
}
.isd-bubble-head {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 15px 9px; border-bottom: 1px solid var(--border-subtle);
}
.isd-bubble-author { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.isd-bubble-time, .isd-bubble-edited { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.isd-bubble-actions { margin-left: auto; display: flex; gap: 8px; }
.isd-bubble-actions .link-button { font-size: 12px; }
.isd-bubble-body { padding: 12px 15px 14px; font-size: 14px; line-height: 1.62; color: var(--text-muted); }
.isd-bubble-edit { padding: 12px 15px 14px; }
.isd-bubble-edit .form-actions { margin-top: 10px; }

/* new-comment composer */
.isd-composer { display: flex; gap: 12px; }
.isd-composer-main { flex: 1; min-width: 0; }
.isd-textarea { min-height: 96px; resize: vertical; line-height: 1.6; margin-bottom: 0; }
.isd-composer-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.isd-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low); }
.isd-composer-actions { display: flex; gap: 10px; }

/* metadata sidebar */
.isd-side {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 6px 4px;
}
.isd-sec { padding: 12px 14px 10px; }
.isd-sec-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px;
}
.isd-hair { height: 1px; background: var(--border-subtle); margin: 2px 12px; }
.isd-select { width: 100%; margin-bottom: 0; cursor: pointer; }
.isd-chip {
    display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-strong);
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: 9px; padding: 8px 13px;
}
.isd-chip-muted { color: var(--text-faint); }
.isd-chip .iss-prio { display: block; }
.isd-assignee { display: flex; align-items: center; gap: 10px; }
.isd-assignee-name { font-size: 13.5px; color: var(--text-strong); }
.isd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.isd-side .iss-label-toggles { gap: 6px; }

/* timestamps */
.isd-times { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.isd-time-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.isd-time-k { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.isd-time-v { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

/* stack to one column on narrow viewports — sidebar drops below the thread */
@media (max-width: 880px) {
    .isd-grid { grid-template-columns: 1fr; gap: 20px; }
    .isd-side { order: 2; }
}

/* ── workspace overview ───────────────────────────────────────────────────────
   The landing shown when a workspace is opened: breadcrumb + header + meta chips,
   then a two-column body (main column + right rail) that collapses to one column
   when narrow. All colours/fonts/radii come from the shared tokens. */
.ov-page { max-width: 1080px; margin: 0 auto; }

.ov-crumb {
    font-family: var(--font-mono); font-size: 12px; color: var(--text-low); margin-bottom: 16px;
}
.ov-crumb a { color: var(--accent); }

.ov-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ov-mark {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    background: var(--bg-subtle);
    display: inline-flex; align-items: center; justify-content: center;
}
.ov-mark-icon {
    width: 22px; height: 22px; fill: none;
    stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ov-headings { flex: 1; min-width: 0; }
.ov-name {
    font-family: var(--font-display); font-weight: 600; font-size: 34px;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-repopath {
    font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Shared line-icon sizing: stroke inherits the element's colour; fill stays on the SVG's own
   attributes so dot-filled glyphs (overflow, issue action) still render. */
.ov-icon {
    width: 16px; height: 16px; flex-shrink: 0;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Overflow menu — a native <details> popover so it needs no JS. */
.ov-overflow { position: relative; }
.ov-overflow-btn {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius);
    background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-muted);
}
.ov-overflow-btn::-webkit-details-marker { display: none; }
.ov-overflow-btn::marker { content: ""; }
.ov-overflow-btn:hover { color: var(--text); background: var(--bg-hover); }
.ov-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 184px;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 6px; box-shadow: var(--shadow-tile);
    display: flex; flex-direction: column;
}
.ov-menu a {
    padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
    color: var(--text) !important; text-decoration: none !important;
}
.ov-menu a:hover { background: var(--bg-hover); }
.ov-menu-btn {
    padding: 8px 10px; border-radius: 8px; font-size: 13.5px; text-align: left;
    color: var(--text); background: none; border: none; cursor: pointer; width: 100%;
}
.ov-menu-btn:hover { background: var(--bg-hover); }

hr.sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 4px; }

/* Migrate-to-local-forge confirm panel + result banner */
.ov-migrate-panel {
    border: 1px solid var(--border); background: var(--bg-panel);
    border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 18px;
}
.ov-migrate-panel p { margin: 0 0 8px; }
.ov-migrate-list { margin: 4px 0 14px; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.ov-migrate-list li { margin: 2px 0; }
.ov-migrate-actions { display: flex; gap: 8px; }
.ov-migrate-result {
    border-radius: var(--radius-card); padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px;
    border: 1px solid var(--border);
}
.ov-migrate-result.is-ok { border-color: var(--ok, #2ea043); color: var(--text); }
.ov-migrate-result.is-error { border-color: var(--danger, #d1242f); color: var(--text); }

.ov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ov-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-panel);
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.ov-chip .ov-icon { width: 13px; height: 13px; color: var(--text-low); }
.ov-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex-shrink: 0; }
.ov-chip-sync {
    color: var(--status-ok); border-color: rgba(143, 191, 127, 0.35);
    background: rgba(143, 191, 127, 0.10);
}
.ov-chip-sync .ov-icon { color: var(--status-ok); }

.ov-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start;
}
.ov-main, .ov-rail { min-width: 0; display: flex; flex-direction: column; gap: 26px; }

/* Quick actions — 3-up card grid. */
.ov-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ov-action {
    display: flex; flex-direction: column; gap: 8px; min-height: 96px; padding: 14px;
    border-radius: 13px; border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ov-action:hover { border-color: var(--accent); background: var(--bg-subtle); }
.ov-action-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.ov-action-icon { width: 20px; height: 20px; color: var(--accent); }
.ov-action-label { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.ov-action-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.ov-count-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Section eyebrow + trailing link (recent jobs, open issues). */
.ov-section { display: flex; flex-direction: column; gap: 10px; }
.ov-eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ov-eyebrow {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low);
}
.ov-eyebrow-link { font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
.ov-empty { color: var(--text-low); font-size: 14px; margin: 0; padding: 4px 2px; }

/* Right-rail stat strip — three rows split by hairlines. */
.ov-stats {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); overflow: hidden;
}
.ov-stat { padding: 14px 16px; }
.ov-stat + .ov-stat { border-top: 1px solid var(--border); }
.ov-stat-value {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    line-height: 1.1; letter-spacing: -0.01em; color: var(--text);
}
.ov-stat-label {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-low); margin-top: 3px;
}
.ov-stat-ok .ov-stat-value { color: var(--status-ok); }

/* Open-issues preview card — the whole card links to the board. */
.ov-issues {
    display: block; padding: 2px 14px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ov-issues:hover { border-color: var(--border); background: var(--bg-subtle); }
.ov-issue { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.ov-issue + .ov-issue { border-top: 1px solid var(--border-subtle); }
.ov-issue-dot {
    flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--status-ok); box-sizing: border-box;
}
.ov-issue-title {
    flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 14.5px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-issue-meta { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.ov-issue-pill {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 10px;
    padding: 2px 8px; border-radius: 999px;
}
.ov-pill-active { color: var(--accent); background: var(--accent-tint); }

/* Todo list on the workspace overview — inline composer + checkbox rows. */
.todo-composer {
    display: flex; gap: 8px; align-items: center;
}
.todo-input {
    flex: 1; min-width: 0;
    padding: 8px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text); font-family: var(--font-ui); font-size: 14px;
}
.todo-input:focus { outline: none; border-color: var(--accent); }
.todo-list { display: flex; flex-direction: column; gap: 2px; }
.todo-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius);
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.todo-row:hover { border-color: var(--border); background: var(--bg-subtle); }
.todo-row.is-editing { flex-wrap: wrap; gap: 8px; }
.todo-check {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    cursor: pointer; margin: 0;
}
.todo-check input[type="checkbox"] {
    flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent);
    cursor: pointer;
}
.todo-title {
    font-family: var(--font-ui); font-size: 14px; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-title.is-done {
    text-decoration: line-through; color: var(--text-low);
}
.todo-edit-input {
    flex: 1; min-width: 0;
    padding: 6px 10px; border-radius: var(--radius);
    border: 1px solid var(--accent); background: var(--bg-panel);
    color: var(--text); font-family: var(--font-ui); font-size: 14px;
}
.todo-edit-input:focus { outline: none; }
.todo-actions {
    flex-shrink: 0; display: flex; align-items: center; gap: 4px;
}
.todo-btn {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 6px;
    color: var(--text-low); cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}
.todo-btn:hover { color: var(--text); background: var(--bg-hover); }
.todo-btn .ov-icon { width: 14px; height: 14px; }

/* Repos list (multi-repo workspaces) — one row per repo, each linking to its own destination
   (local forge browser or the external remote), so rows are individual anchors inside a plain card. */
.ov-repos {
    padding: 2px 14px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.ov-repo-row {
    display: flex; align-items: center; gap: 10px; padding: 11px 0;
    color: var(--text) !important; text-decoration: none !important;
}
.ov-repo-row + .ov-repo-row { border-top: 1px solid var(--border-subtle); }
.ov-repo-name {
    flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-repo-row:hover .ov-repo-name { color: var(--accent); }
.ov-repo-type {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-low);
}
.ov-repo-type.is-local { color: var(--accent); background: var(--accent-tint); border-color: transparent; }
.ov-repo-branch, .ov-repo-sync {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}
.ov-repo-warn {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--danger, #d1242f);
}

@media (max-width: 900px) {
    .ov-body { grid-template-columns: 1fr; }
    .ov-name { font-size: 28px; }
}

/* ── Workspaces overview (redesign) ────────────────────────────────────────────
   The /workspaces landing: a display header + primary action, then org groups —
   each a mono eyebrow with a count pill over a stack of workspace cards. Colours,
   fonts and radii all resolve from the shared tokens, so the page reverses under
   the light theme like the rest of the shell. */
.wsx-page { max-width: 1060px; margin: 0 auto; }
.wsx-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 30px; flex-wrap: wrap;
}
.wsx-title {
    font-family: var(--font-display); font-weight: 600; font-size: 32px;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.wsx-sub { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; max-width: 60ch; }
.wsx-head .btn { flex-shrink: 0; }

.wsx-group { margin-bottom: 26px; }
.wsx-group-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.wsx-group-name {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.wsx-group-count {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--text-muted); background: var(--bg-subtle);
    border-radius: 999px; padding: 1px 9px; min-width: 20px; text-align: center;
}

.wsx-cards { display: flex; flex-direction: column; gap: 10px; }
.wsx-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 14px 16px;
    color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.wsx-card:hover { background: var(--bg-subtle); border-color: var(--border); }
.wsx-card-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.12s ease;
}
.wsx-card:hover .wsx-card-icon { border-color: var(--border); }
.wsx-card-icon svg {
    width: 20px; height: 20px; fill: none; stroke: var(--accent);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wsx-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wsx-card-top { display: flex; align-items: center; gap: 10px; }
.wsx-card-name {
    font-family: var(--font-display); font-weight: 600; font-size: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.wsx-run {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    color: var(--accent); background: var(--accent-tint);
}
.wsx-run-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    animation: pulse 1.6s ease-in-out infinite;
}
.wsx-card-src {
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wsx-card-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2px; }
.wsx-stat {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low);
}
.wsx-stat svg {
    width: 13px; height: 13px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wsx-card-chevron {
    flex-shrink: 0; width: 18px; height: 18px; color: var(--text-low);
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.wsx-card:hover .wsx-card-chevron { opacity: 1; transform: translateX(0); }
.wsx-card-chevron svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Repository detail (redesign) ──────────────────────────────────────────────
   The /repos/{id} page: an .ov-style breadcrumb + header + meta chips, the shared
   underlined tab bar (now with mono count badges), and — on the PR tab — a
   segmented Open/Merged/Closed/All filter with a search box, a card list of PRs,
   centered empty states, and the "New pull request" composer card. */
.rpx-page { max-width: 1060px; margin: 0 auto; }

/* Mono count badge riding the shared .tab bar. */
.tab-count {
    margin-left: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--text-low); background: var(--bg-subtle);
    border-radius: 999px; padding: 0 7px;
}
.tab.active .tab-count { color: var(--accent); background: var(--accent-tint); }
/* Spec calls for an inset underline on the active tab (matches the border-bottom the
   shared .tab already draws, but explicit so the two never drift apart). */
.tab.active { box-shadow: inset 0 -2px 0 var(--accent); }

/* Segmented filter + right-aligned search. */
.rpx-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 10px;
}
.seg-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 7px;
    font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--text-muted);
    transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--bg-subtle); color: var(--text); }
.seg-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.seg-btn.active .seg-count { color: var(--accent); }

.rpx-search { position: relative; margin-left: auto; }
.rpx-search svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round; pointer-events: none;
}
.rpx-search input {
    width: 220px; max-width: 100%; background: var(--bg-terminal); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px 8px 32px;
    font-family: var(--font-ui); font-size: 13px;
}
.rpx-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rpx-search input::placeholder { color: var(--text-low); }
/* Light mode: the field follows the parchment surface, not the (deliberately dark) terminal. */
:root[data-theme="light"] .rpx-search input { background: var(--bg-subtle); }

/* PR list — a single rounded panel of dense divider rows (matches the compact Jobs list). Rows
   separate by a top divider on each but the first; no per-row card border/gap. */
.prx-list {
    display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.prx-row {
    display: flex; align-items: center; gap: 13px;
    border-top: 1px solid var(--bg-hover); padding: 9px 16px;
    color: var(--text) !important; text-decoration: none !important;
    transition: background 0.12s ease;
}
.prx-row:first-child { border-top-color: transparent; }
.prx-row:hover { background: var(--bg-subtle); }
.prx-status { flex-shrink: 0; display: inline-flex; }
.prx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prx-title {
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prx-meta {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prx-side { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.prx-author { display: inline-flex; align-items: center; gap: 7px; }
.prx-avatar {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border);
    font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.prx-author-name { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* Mono branch pill (inset surface + git-branch glyph). Used in PR rows and the meta row. */
.branch-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-panel);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap;
}
.branch-pill svg { width: 12px; height: 12px; color: var(--text-low); }

/* Centered empty state — icon tile + heading + helper copy. */
.prx-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 56px 20px;
}
.prx-empty-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border);
}
.prx-empty-icon svg { width: 26px; height: 26px; color: var(--accent); }
.prx-empty h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }
.prx-empty p { color: var(--text-muted); font-size: 14px; margin: 0; max-width: 44ch; }

/* "New pull request" composer card. */
.prx-newpr {
    margin-top: 24px; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 20px 22px;
}
.prx-newpr h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.prx-newpr-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.prx-branchgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.prx-branchgrid .field-label { margin-top: 0; }
.prx-branchgrid .input { margin-bottom: 0; }
.prx-arrow { display: flex; align-items: center; justify-content: center; height: 44px; color: var(--text-low); }
.prx-arrow svg { width: 20px; height: 20px; }
.prx-newpr-actions { display: flex; gap: 10px; margin-top: 18px; }
.rpx-newbtn { margin-left: auto; flex-shrink: 0; }
.rpx-toolbar .rpx-search { margin-left: 0; }
/* Cross-repo /pulls inbox reuses the toolbar but has no "New PR" button, so let the search
   reclaim the trailing space and sit flush right. */
.rpx-toolbar-inbox .rpx-search { margin-left: auto; }
/* Tab links (the tab bar is <a> links now — keyboard-focusable, real navigation). */
.tabs { align-items: center; flex-wrap: wrap; }
.tabs .tab { display: inline-flex; align-items: center; text-decoration: none; }
.tabs .tab:hover { text-decoration: none; }

/* ── Code view (GitHub-style) ── */
.rc-controls {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.rc-branchsel { min-width: 160px; margin: 0; }
.rc-refstat { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.rc-refstat a { color: var(--text-muted); }
.rc-refstat a:hover { color: var(--accent); text-decoration: none; }
.rc-dot { color: var(--text-low); margin: 0 4px; }
.rc-search { position: relative; }
.rc-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round; pointer-events: none;
}
.rc-search input {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 7px 12px 7px 30px; font-family: var(--font-ui); font-size: 13px;
    width: 220px;
}
.rc-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rc-clone { position: relative; margin-left: auto; }
.rc-clone > summary { list-style: none; cursor: pointer; }
.rc-clone > summary::-webkit-details-marker { display: none; }
.rc-clone-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.rc-clone-row { display: flex; gap: 8px; align-items: center; }
.rc-clone-row .input { margin: 0; }
.rc-clone-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-low); }
.rc-clone-warn { margin: 6px 0 0; font-size: 12px; color: var(--status-wait); }
.rc-clone-pop .field-label { margin-top: 12px; }
.rc-clone-pop .field-label:first-child { margin-top: 0; }
.rc-clone-dl { display: inline-flex; align-items: center; gap: 6px; }
.rc-clone-dl svg { width: 14px; height: 14px; fill: none; }

.rc-crumbs { font-family: var(--font-mono); font-size: 13px; margin-bottom: 12px; }
.rc-crumbs a { color: var(--accent); }
.rc-crumb-cur { color: var(--text); }

.rc-commitbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 10px 10px 0 0; border-bottom: none;
    font-size: 13px;
}
.rc-commit-author { font-weight: 600; color: var(--text); }
.rc-commit-msg { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rc-commit-sha { color: var(--text-low); }
.rc-commit-time { color: var(--text-low); font-size: 12px; }
.rc-commit-count {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.rc-commit-count svg { width: 14px; height: 14px; color: var(--text-low); }
.rc-commit-count:hover { color: var(--accent); text-decoration: none; }

.rc-files {
    border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: hidden;
}
.rc-file {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-top: 1px solid var(--border-subtle); font-size: 13.5px; color: var(--text);
}
.rc-files > .rc-file:first-child { border-top: none; }
a.rc-file:hover { background: var(--bg-subtle); text-decoration: none; }
.rc-file-icon { display: inline-flex; width: 18px; flex-shrink: 0; color: var(--text-low); }
.rc-file-icon svg { width: 18px; height: 18px; }
.rc-icon-dir { color: var(--accent); }
.rc-file-name { flex-shrink: 0; min-width: 160px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rc-file .rc-file-name { color: var(--text); }
a.rc-file:hover .rc-file-name { color: var(--accent); }
.rc-file-msg { flex: 1; min-width: 0; color: var(--text-low); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-file-time { flex-shrink: 0; color: var(--text-low); font-family: var(--font-mono); font-size: 11.5px; }
.rc-file-up .rc-file-icon { font-size: 16px; align-items: center; justify-content: center; }
.rc-empty { padding: 30px 0; }

/* ── Commits sub-view — a dense, GitHub-style history list grouped by calendar day ─────────
   A sub-view of Code (Code tab stays highlighted); surfaces/borders track the theme tokens. */
.rcm-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.rcm-toolbar-left, .rcm-toolbar-right { display: flex; align-items: center; gap: 12px; }
.rcm-branch { position: relative; display: inline-flex; align-items: center; }
.rcm-branch-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; stroke: var(--text-muted); stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.rcm-branch-sel {
    appearance: none; -webkit-appearance: none;
    background: var(--bg-panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 30px 7px 32px; font-family: var(--font-display); font-weight: 600; font-size: 13px;
    cursor: pointer;
    /* chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3A793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
.rcm-branch-sel:hover { border-color: var(--text-low); }
.rcm-branch-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rcm-count { font-size: 12.5px; color: var(--text-low); white-space: nowrap; }

.rcm-search { position: relative; }
.rcm-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round; pointer-events: none;
}
.rcm-search input {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 7px 12px 7px 30px; font-family: var(--font-ui); font-size: 13px;
    width: 220px;
}
.rcm-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.btn-outline {
    color: var(--text-muted); border-color: var(--border); background: transparent; text-decoration: none;
}
.btn-outline:hover { background: var(--bg-subtle); border-color: var(--text-low); color: var(--text); }

/* Day group — a small date header outside the card, then one bordered card of rows. */
.rcm-group { margin-bottom: 20px; }
.rcm-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 4px; }
.rcm-node {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
}
.rcm-node svg {
    width: 18px; height: 18px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round;
}
.rcm-group-date { font-size: 12px; color: var(--text-faint); }

.rcm-card {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    background: var(--bg-panel);
}
.rcm-row {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 7px 14px;
    border-top: 1px solid var(--border-subtle);
    transition: background 0.1s ease;
}
.rcm-card > .rcm-row:first-child { border-top: none; }
.rcm-row:hover { background: var(--bg-subtle); }
/* Stretched row link — covers the whole row so it's all clickable, without nesting <a>s
   (the action buttons sit above it via a higher z-index). */
.rcm-rowlink { position: absolute; inset: 0; z-index: 0; }
.rcm-avatar {
    position: relative; z-index: 1; pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.rcm-row:hover .rcm-avatar { background: var(--bg-hover); }
.rcm-main { position: relative; z-index: 1; pointer-events: none; min-width: 0; flex: 1; }
.rcm-msg-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rcm-msg {
    font-size: 13.5px; font-weight: 500; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.rcm-row:hover .rcm-msg { color: var(--accent); }
.rcm-merge {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    color: #B58FBF; background: rgba(181, 143, 191, 0.12);
    border-radius: 5px; padding: 1px 6px; line-height: 1.5;
}
:root[data-theme="light"] .rcm-merge {
    color: #7B4F8A; background: rgba(123, 79, 138, 0.12);
}
.rcm-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-low); }
.rcm-side {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.rcm-sha {
    font-size: 11.5px; color: var(--text-muted);
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    border-radius: 6px; padding: 2px 7px;
}
.rcm-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: var(--text-low); cursor: pointer;
    opacity: 0; transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.rcm-iconbtn svg { width: 15px; height: 15px; }
.rcm-iconbtn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); text-decoration: none; }
.rcm-row:hover .rcm-iconbtn, .rcm-iconbtn:focus-visible { opacity: 1; }
.rcm-more { display: flex; justify-content: center; margin: 8px 0 4px; }

@media (max-width: 640px) {
    .rcm-search input { width: 150px; }
    .rcm-iconbtn { opacity: 1; } /* no hover on touch — keep actions visible */
}

.rc-readme {
    margin-top: 22px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.rc-readme-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 16px;
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
}
.rc-readme-head svg { width: 16px; height: 16px; color: var(--text-low); }
.rc-readme-body { padding: 20px 24px; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }
.rc-readme-body h1, .rc-readme-body h2, .rc-readme-body h3 { font-family: var(--font-display); color: var(--text); margin: 1.2em 0 0.5em; }
.rc-readme-body h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.rc-readme-body h2 { font-size: 18px; }
.rc-readme-body h3 { font-size: 15.5px; }
.rc-readme-body :first-child { margin-top: 0; }
.rc-readme-body code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; }
.rc-readme-body pre { background: var(--bg-terminal); padding: 14px 16px; border-radius: 8px; overflow-x: auto; }
.rc-readme-body pre code { background: none; padding: 0; }
.rc-readme-body a { color: var(--accent); }
.rc-readme-body ul, .rc-readme-body ol { padding-left: 1.4em; }
.rc-readme-body table { border-collapse: collapse; }
.rc-readme-body th, .rc-readme-body td { border: 1px solid var(--border); padding: 6px 10px; }

/* ── File view ── */
.rc-fheader {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: var(--bg-panel); border: 1px solid var(--border); border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.rc-fheader-name { flex: 1; color: var(--text); font-size: 13.5px; font-weight: 500; }
.rc-fheader-size { color: var(--text-low); font-size: 12px; }
.rc-fileview {
    margin: 0; border: 1px solid var(--border); border-radius: 0 0 10px 10px;
    background: var(--bg-terminal); overflow-x: auto; padding: 16px 20px;
    font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
    tab-size: 4; -moz-tab-size: 4;
}
.rc-fileview-code { white-space: pre; }
.rc-fileview-code span { display: block; transition: background 0.12s ease; }
.rc-fileview-code span:hover { background: var(--bg-hover); }
.rc-fileview-binary {
    border: 1px solid var(--border); border-radius: 0 0 10px 10px;
    padding: 40px 20px; text-align: center;
}

/* ── File editor (in-browser edit + commit) ── */
.rfe-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 20px; max-width: 70ch; }
.rfe-editor { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rfe-pathbar {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.rfe-pathprefix { color: var(--text-low); font-size: 13px; }
.rfe-pathfixed { color: var(--text); font-size: 13px; }
.rfe-pathinput { margin: 0; flex: 1; max-width: 420px; font-size: 13px; }
.rfe-textarea {
    display: block; width: 100%; box-sizing: border-box; border: none; resize: vertical;
    background: var(--bg-terminal); color: var(--text); padding: 16px 20px;
    font-size: 13px; line-height: 1.6; tab-size: 4; -moz-tab-size: 4;
}
.rfe-textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.rfe-commit {
    margin-top: 20px; padding: 18px 20px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 12px;
}
.rfe-commit-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.rfe-target { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rfe-radio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }
.rfe-radio input { margin: 0; }
.rfe-branchinput { margin: 2px 0 0 24px; max-width: 320px; font-size: 13px; }
.rfe-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.rfe-delete { margin-left: auto; }
.rfe-confirm { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* ── Actions view ── */
.ract-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ract-card {
    position: relative; padding: 16px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 12px;
}
.ract-card-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.ract-card-rate { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin-top: 10px; color: var(--text); line-height: 1; }
.ract-card-rate.is-ok { color: var(--status-ok); }
.ract-card-rate.is-bad { color: var(--status-err); }
.ract-card-sub { font-size: 11.5px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.ract-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.ract-run { position: absolute; top: 14px; right: 14px; }
.ract-h { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 12px; }
/* Recent-runs list — same compact panel-of-divider-rows as the Jobs list. */
.ract-list {
    display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.ract-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-top: 1px solid var(--bg-hover); transition: background 0.12s ease;
}
.ract-row:first-child { border-top-color: transparent; }
.ract-row:hover { background: var(--bg-subtle); text-decoration: none; }
.ract-row-status { flex-shrink: 0; display: inline-flex; }
.ract-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ract-row-title { font-weight: 600; color: var(--text); font-size: 13px; }
.ract-row-meta { font-size: 11.5px; color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ract-row-dur { flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); }
.ract-row-time { flex-shrink: 0; font-size: 11.5px; color: var(--text-low); min-width: 64px; text-align: right; }

/* ── Branches view ── */
/* Single compact divider row per branch (matches the Jobs list): name · divergence · updated ·
   hover-revealed actions — replaces the old three-tier card so the list packs tightly. */
.rbr-list {
    display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.rbr-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 16px;
    border-top: 1px solid var(--bg-hover); transition: background 0.12s ease;
}
.rbr-row:first-child { border-top-color: transparent; }
.rbr-row:hover { background: var(--bg-subtle); }
.rbr-name { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.rbr-updated { margin-left: auto; font-size: 11.5px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbr-diverge { display: flex; align-items: center; gap: 10px; width: 220px; flex-shrink: 0; }
.rbr-counts { display: flex; align-items: center; gap: 8px; font-size: 11.5px; flex-shrink: 0; }
.rbr-behind { color: var(--text-muted); }
.rbr-ahead { color: var(--status-ok); }
.rbr-base { color: var(--text-low); }
.rbr-bar { flex: 1; display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--bg-subtle); min-width: 60px; }
.rbr-bar-behind { background: var(--text-low); }
.rbr-bar-ahead { background: var(--status-ok); }
/* Actions sit on the right and reveal on hover/focus; they keep their layout width even while
   hidden so row height stays constant across the list. */
.rbr-actions {
    flex-shrink: 0; display: flex; gap: 6px;
    opacity: 0; transition: opacity 0.12s ease;
}
.rbr-row:hover .rbr-actions, .rbr-row:focus-within .rbr-actions { opacity: 1; }

/* ── New PR page ── */
.npr-form { max-width: 720px; }

@media (max-width: 760px) {
    .wsx-title { font-size: 26px; }
    .rpx-search { margin-left: 0; width: 100%; }
    .rpx-search input { width: 100%; }
    .prx-side { display: none; }
    .prx-branchgrid { grid-template-columns: 1fr; }
    .prx-arrow { height: auto; transform: rotate(90deg); margin: -2px 0; }
    .rc-search, .rc-search input { width: 100%; }
    .rc-clone { margin-left: 0; }
    .rpx-newbtn { margin-left: 0; }
    .rc-file-name { min-width: 0; max-width: 50%; }
    .rc-file-msg { display: none; }
    .ract-row-meta { white-space: normal; }
}

/* ── Repos overview + New repo ─────────────────────────────────────────────
   The local-forge landing (/repos) and its dedicated create page (/repos/new).
   Cards, the section divider and the accordion form all key off the shared
   token vars, so both light and dark themes track without hardcoded hexes. */
.repos-page { max-width: 960px; margin: 0 auto; }
.repos-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
}
.repos-head-text { min-width: 0; }
.repos-title {
    font-family: var(--font-display); font-weight: 600; font-size: 32px;
    letter-spacing: -0.02em; margin: 0;
}
.repos-intro {
    font-size: 14.5px; color: var(--text-muted); line-height: 1.65;
    margin: 12px 0 0; max-width: 600px;
}
.repos-intro strong { color: var(--text-strong); font-weight: 500; }

/* Section divider: mono eyebrow + count pill + a hairline that fills the row. */
.repos-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; }
.repos-divider-label {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-faint);
}
.repos-divider-count {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
    background: var(--bg-subtle); padding: 1px 8px; border-radius: 999px;
}
.repos-divider-rule { flex: 1; height: 1px; background: var(--border-subtle); }

/* Hosted-repo cards — clickable rows into the repo detail page. */
.repos-list { display: flex; flex-direction: column; gap: 12px; }
.repo-item {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 14px; padding: 18px 20px; cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.repo-item:hover { background: var(--bg-subtle); border-color: var(--border); }
.repo-item-tile {
    width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 11px;
}
.repo-item-tile svg {
    width: 22px; height: 22px; stroke: var(--accent); stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.repo-item-body { min-width: 0; flex: 1; }
.repo-item-name {
    font-family: var(--font-display); font-weight: 600; font-size: 16px;
    color: var(--text); transition: color 0.12s ease;
}
.repo-item:hover .repo-item-name { color: var(--accent); }
.repo-item-meta { display: flex; align-items: center; gap: 14px; margin-top: 7px; flex-wrap: wrap; }
.repo-item-branch {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.repo-item-branch svg {
    width: 13px; height: 13px; stroke: var(--text-muted); stroke-width: 1.8;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.repo-item-prs { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.repo-item-chevron {
    flex-shrink: 0; width: 16px; height: 16px; color: var(--text-low);
    stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Mirror / sync status pill on a repo card — neutral by default, tinted per state. */
.repo-mirror {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 11.5px; padding: 5px 11px;
    border-radius: 999px; border: 1px solid var(--border-subtle);
    background: var(--bg-terminal); color: var(--text-faint);
}
.repo-mirror svg {
    width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.7;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.repo-mirror-ok { color: var(--status-ok); background: rgba(143, 191, 127, 0.10); border-color: rgba(143, 191, 127, 0.22); }
.repo-mirror-err { color: var(--status-err); background: rgba(232, 115, 74, 0.10); border-color: rgba(232, 115, 74, 0.22); }
/* Light mode: the neutral "no mirror" state follows the parchment surface. The :not() keeps
   the tinted ok/err washes, which read fine on light. */
:root[data-theme="light"] .repo-mirror:not(.repo-mirror-ok):not(.repo-mirror-err) { background: var(--bg-subtle); }

/* ── New repo (dedicated page) ── */
.repos-new-page { max-width: 720px; margin: 0 auto; }
.repos-new-title {
    font-family: var(--font-display); font-weight: 600; font-size: 28px;
    letter-spacing: -0.02em; margin: 0;
}
.repos-new-sub {
    font-size: 14px; color: var(--text-faint); line-height: 1.6;
    margin: 10px 0 0; max-width: 560px;
}
.repos-form-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 16px; padding: 26px 28px; margin-top: 26px;
}
.repos-field { margin-bottom: 22px; }
.repos-field + .repos-field { margin-bottom: 24px; }
/* Reset the shared field-label top margin — the first field hugs the card top. */
.repos-form-card .field-label { margin-top: 0; }
.repos-form-card .input { margin-bottom: 0; }

/* Collapsible remote sections — native <details>, custom chevron rotation. */
.repos-acc {
    border: 1px solid var(--border-subtle); border-radius: 11px; overflow: hidden;
    margin-bottom: 12px; transition: border-color 0.12s ease;
}
.repos-acc:hover { border-color: var(--border); }
/* The last accordion (Mirror) carries extra space before the action row. */
.repos-acc:last-of-type { margin-bottom: 26px; }
.repos-acc > summary {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px;
    cursor: pointer; list-style: none;
}
.repos-acc > summary::-webkit-details-marker { display: none; }
.repos-acc > summary::marker { content: ""; }
.repos-acc-chevron {
    width: 16px; height: 16px; flex-shrink: 0; color: var(--text-faint);
    stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.15s ease;
}
.repos-acc[open] .repos-acc-chevron { transform: rotate(90deg); }
.repos-acc-icon {
    width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.repos-acc-icon-pull { stroke: var(--private); }
.repos-acc-icon-mirror { stroke: var(--status-ok); }
.repos-acc-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.repos-acc-tag {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low);
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    padding: 2px 9px; border-radius: 999px; margin-left: 6px;
}
.repos-acc-body { padding: 4px 16px 18px; border-top: 1px solid var(--border-subtle); }
.repos-acc-body .field-label { margin-top: 0; }
.repos-acc-field { margin: 16px 0; }
.repos-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.repos-acc-note { font-size: 12.5px; color: var(--text-low); line-height: 1.55; margin: 14px 0 0; }
.repos-acc .check-label { margin: 0; }
.repos-acc .check-label input { accent-color: var(--accent); width: 16px; height: 16px; }

@media (max-width: 640px) {
    .repos-acc-grid { grid-template-columns: 1fr; }
}

/* ── Mascot ────────────────────────────────────────────────────────────────────
   The 8-bit sprite (see assets/mascot/build_mascot.py). The animation lives inside
   each SVG, so all this layer does is size it: the art is a 32x32 pixel grid, and
   `pixelated` keeps the edges hard if a caller picks a non-multiple size. */
.mascot { display: block; image-rendering: pixelated; user-select: none; }

.mascot-page { max-width: 940px; }
.mascot-intro {
    font-size: 14px; line-height: 1.65; color: var(--text-muted);
    max-width: 68ch; margin: 0 0 26px;
}

/* Hero: the sprite beside the pitch. */
.mascot-hero {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 20px;
}
.mascot-stage-hero { padding: 16px; margin-bottom: 0; flex: none; }
.mascot-hero-text { flex: 1; min-width: 260px; }
.mascot-hero-name {
    font-family: var(--font-display); font-weight: 600; font-size: 19px;
    letter-spacing: -0.01em; color: var(--text); margin: 0 0 8px;
}
.mascot-hero .mascot-intro { margin: 0; }

.mascot-divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 16px; }
.mascot-divider-label {
    font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted);
}
.mascot-divider-rule { flex: 1; height: 1px; background: var(--border-subtle); }

/* State gallery. */
.mascot-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.mascot-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 16px; text-align: center;
}
.mascot-stage {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); padding: 12px; margin-bottom: 12px;
}
.mascot-stage .mascot { margin: 0 auto; }
.mascot-card-name {
    font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text);
}
.mascot-card-when { font-size: 12.5px; line-height: 1.5; color: var(--text-low); margin: 4px 0 9px; }
.mascot-card-code {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--accent);
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    padding: 2px 8px; border-radius: 999px;
}

/* Size ladder. */
.mascot-scale {
    display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 20px;
}
.mascot-scale-item { display: grid; justify-items: center; gap: 8px; }
.mascot-scale-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.mascot-note {
    flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.6;
    color: var(--text-low); margin: 0;
}
.mascot-note code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

/* ── Social feeds ─────────────────────────────────────────────────────────────
   The workspace Social tab: channels, composer, and the publish queue. Uses the
   shared tokens (accent/border/panel/status) so it tracks light + dark themes. */
.card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 18px 20px; margin: 16px 0;
}
.card h2 { margin: 0 0 12px; font-size: 16px; }
.form-ok { color: var(--status-ok); }
.social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.social-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.social-name { font-weight: 600; }
.social-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
    border: 1px solid var(--border); color: var(--text-muted);
}
.social-mastodon { border-color: #6364FF; color: #6364FF; }
.social-facebookpage { border-color: #1877F2; color: #1877F2; }
.social-instagrambusiness { border-color: #C13584; color: #C13584; }
.social-status { font-size: 12px; color: var(--text-muted); }
.social-status-connected, .social-status-published { color: var(--status-ok); }
.social-status-needsreauth, .social-status-failed, .social-status-needsattention { color: var(--status-err); }
.social-status-disabled, .social-status-cancelled { color: var(--text-muted); }
.social-status-scheduled, .social-status-queued, .social-status-publishing, .social-status-pendingapproval { color: var(--accent); }
.social-connect { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.social-connect-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.social-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.social-thumb { width: 160px; display: flex; flex-direction: column; gap: 6px; }
.social-thumb img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.social-post { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.social-post-head { display: flex; gap: 10px; align-items: center; }
.social-post-status { font-weight: 600; font-size: 12.5px; }
.social-post-text { white-space: pre-wrap; }
.social-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.social-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.social-post-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================================
   Design canvas — the Canva-style direct-manipulation graphic editor
   (DesignCanvasPage / DesignCanvasGalleryPage + wwwroot/js/design-canvas.js).
   Like the agent design studio, these surfaces go full-bleed.
   ============================================================================ */
.content:has(.dc-page), .content:has(.dc-gallery) { max-width: none; padding: 0; overflow: hidden; }
.dc-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dc-host { flex: 1; min-height: 0; display: flex; }

/* ── editor shell ─────────────────────────────────────────────────────────────
   A Canva-style layout, all owned by the JS editor (skirnirCanvas): a slim top bar,
   then a body of icon-rail · collapsible side panel · dot-grid stage · contextual
   properties panel. The side and properties panels are `display:none` until needed
   so the artboard reclaims the full remaining width. */
.dc-root { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; background: var(--bg); }
.dc-fatal { margin: auto; color: var(--diff-del-text); font-size: 14px; }
.dc-scroll { scrollbar-color: var(--border) transparent; }
.dc-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.dc-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* ── top bar (56px) ─────────────────────────────────────────────────────────── */
.dc-topbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
    border-bottom: 1px solid var(--border-subtle); background: var(--bg);
}
.dc-topbar-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dc-title-input {
    border: none; outline: none; background: transparent; color: var(--text);
    font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
    width: 170px; padding: 4px 4px; border-radius: 6px;
}
.dc-title-input:hover { background: var(--bg-hover); }
.dc-title-input:focus { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border); }
.dc-dims { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-low); white-space: nowrap; }
.dc-savestate { flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.dc-topbar-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.dc-spacer { flex: 1; }
.dc-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.dc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 13px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1;
    font-family: var(--font-display); font-weight: 600; font-size: 12.5px; text-decoration: none;
    transition: color .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.dc-btn:hover { background: var(--bg-hover); color: var(--text); }
.dc-btn-icon { width: 32px; height: 32px; padding: 0; color: var(--text-faint); flex-shrink: 0; }
.dc-btn-icon:hover { color: var(--text); background: var(--bg-hover); }
.dc-btn-icon.active { color: var(--text); background: var(--bg-hover); }
.dc-btn-icon.disabled { opacity: 0.35; pointer-events: none; }
.dc-btn.disabled { opacity: 0.55; pointer-events: none; }
.dc-btn-ghost { border-color: var(--border-subtle); color: var(--text-muted); }
.dc-btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.dc-btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.dc-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }
.dc-btn-tiny { height: 30px; padding: 0 9px; font-size: 12px; border-color: var(--border-subtle); color: var(--text-muted); }
.dc-btn-tiny:hover { background: var(--bg-hover); color: var(--text); }
.dc-btn-tiny.active { background: var(--accent-tint); border-color: var(--accent); color: var(--text); }
.dc-btn-wide { width: 100%; }
.dc-file { display: none; }

/* zoom pill */
.dc-zoom {
    display: flex; align-items: center; gap: 2px; padding: 3px; flex-shrink: 0;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
}
.dc-zoom-btn { width: 26px; height: 24px; color: var(--text-muted); }
.dc-zoom-label {
    width: 46px; text-align: center; border: none; background: transparent; cursor: pointer;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
}
.dc-zoom-label:hover { color: var(--text); }

/* export popover */
.dc-export-wrap { position: relative; }
.dc-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 210px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.dc-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.dc-select {
    height: 30px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--bg-terminal); color: var(--text); font-size: 12.5px; padding: 0 6px;
}
.dc-select-wide { width: 100%; }

/* ── body: rail · side panel · stage · props ──────────────────────────────── */
.dc-body { flex: 1; min-height: 0; display: flex; position: relative; }

/* ── page bar (bottom): the design's pages ──────────────────────────────────── */
.dc-pagebar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
    border-top: 1px solid var(--border-subtle); background: var(--bg);
}
.dc-pagebar-label {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint);
}


.dc-page-strip {
    display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 6px 2px; min-width: 0;
}
.dc-page-chip {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; max-width: 200px;
    height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-terminal); color: var(--text-low); cursor: pointer;
    font-family: var(--font-ui); font-size: 13px;
}
:root[data-theme="light"] .dc-page-chip { background: var(--bg-subtle); }
.dc-page-chip:hover { color: var(--text); border-color: var(--border-strong, var(--border)); }
.dc-page-chip.active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.dc-page-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 5px; background: var(--bg-panel);
    font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}
.dc-page-chip.active .dc-page-num { background: var(--accent); color: #13100B; }
.dc-page-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-page-rename {
    width: 120px; border: 1px solid var(--accent); outline: none; border-radius: 5px;
    background: var(--bg-panel); color: var(--text); font-family: var(--font-ui); font-size: 12px; padding: 2px 6px;
}
.dc-page-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dc-page-del:not(.disabled):hover { color: var(--diff-del-text); }
.dc-page-add { flex-shrink: 0; }

/* icon rail */
.dc-rail {
    width: 64px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 0; background: var(--bg); border-right: 1px solid var(--border-subtle);
}
.dc-rail-btn {
    width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 0; border: none; border-radius: 9px; background: transparent; cursor: pointer;
    color: var(--text-faint); transition: color .12s ease, background .12s ease;
}
.dc-rail-btn:hover { color: var(--text); }
.dc-rail-btn.active { color: var(--accent); background: var(--bg-hover); }
.dc-rail-ic { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-rail-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em; }

/* side panel (rail flyout) + properties panel share the head/body chrome */
.dc-sidepanel { flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-panel); border-right: 1px solid var(--border-subtle); min-height: 0; }
.dc-propspanel { position: absolute; right: 0; top: 0; bottom: 0; width: 244px; display: flex; flex-direction: column; background: var(--bg-panel); border-left: 1px solid var(--border-subtle); min-height: 0; z-index: 10; }
.dc-panel-head {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 10px 16px;
}
.dc-panel-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text); }
.dc-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 16px; }
.dc-empty { color: var(--text-low); font-size: 12.5px; line-height: 1.6; margin: 8px 2px; }
.dc-hint { color: var(--text-low); font-size: 12.5px; margin: 2px 0 0; }
.dc-section-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--text-faint); margin: 2px 0 9px; }

/* elements + text panels */
.dc-shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.dc-tile {
    aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-muted);
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.dc-tile:hover { border-color: var(--accent); background: var(--bg-hover); color: var(--text); }


.dc-text-tile { aspect-ratio: auto; display: block; text-align: left; padding: 14px; margin-bottom: 8px; }
.dc-text-sample { color: var(--text); }
.dc-text-heading { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.dc-text-body { font-size: 14px; color: var(--text-strong); }

/* assets panel */
.dc-upload {
    justify-content: center; gap: 7px; margin-bottom: 12px; padding: 11px;
    border: 1px dashed var(--border); background: var(--bg-subtle); color: var(--text-strong);
}
.dc-upload:hover { border-color: var(--accent); color: var(--text); }
.dc-import-svg, .dc-import-pdf {
    justify-content: center; gap: 7px; margin: -4px 0 6px; padding: 11px;
    border: 1px dashed var(--border); background: var(--bg-subtle); color: var(--text-strong);
}
.dc-import-svg:hover, .dc-import-pdf:hover { border-color: var(--accent); color: var(--text); }
.dc-search {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 10px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-faint);
}
.dc-search:focus-within { border-color: var(--accent); }
.dc-search svg { flex-shrink: 0; }
.dc-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 12.5px; }
.dc-asset-groups { display: flex; flex-direction: column; }
.dc-asset-groups .dc-section-label { margin-top: 6px; }
.dc-asset-groups .dc-section-label:first-child { margin-top: 0; }
.dc-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dc-asset { padding: 0; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-subtle); cursor: pointer; overflow: hidden; aspect-ratio: 1; display: block; width: 100%; }
.dc-asset:hover { border-color: var(--accent); }
.dc-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* managed assets: a hover strip of rename / move / delete over the thumbnail */
.dc-asset-wrap { position: relative; }
.dc-asset-actions { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s ease; }
.dc-asset-wrap:hover .dc-asset-actions, .dc-asset-wrap:focus-within .dc-asset-actions { opacity: 1; }
.dc-asset-act {
    width: 22px; height: 22px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel); color: var(--text-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dc-asset-act:hover { color: var(--text); border-color: var(--accent); }
.dc-asset-act:last-child:hover { color: var(--diff-del-text); border-color: var(--diff-del-text); }
/* inline rename / group input + delete confirm, over the bottom of the thumbnail (no native dialogs) */
.dc-asset-edit {
    position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 3px;
    padding: 3px; border-radius: 7px; background: var(--bg-panel); border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.dc-asset-edit-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text);
    font-family: var(--font-ui); font-size: 11px; padding: 2px 3px;
}
.dc-asset-editbtn {
    width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: none; border-radius: 5px; background: transparent; color: var(--text-muted);
}
.dc-asset-editbtn:hover { color: var(--text); background: var(--bg-hover); }
.dc-asset-editbtn.dc-danger:hover { color: var(--diff-del-text); }
.dc-asset-confirm-q { flex: 1; min-width: 0; font-size: 11px; color: var(--text-strong); padding-left: 4px; }

/* layers panel */
.dc-layers-list { display: flex; flex-direction: column; gap: 5px; }
.dc-layer {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px;
    cursor: pointer; border: 1px solid transparent; background: transparent;
}
.dc-layer:hover { background: var(--bg-hover); }
.dc-layer.active { background: var(--bg-hover); border-color: var(--border); }
.dc-layer-ic { flex-shrink: 0; color: var(--text-faint); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-layer-name { flex: 1; font-size: 12.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-layer-vis { width: 26px; height: 26px; padding: 0; color: var(--text-faint); }
.dc-layer-vis:hover { background: var(--bg-subtle); color: var(--text); }
.dc-layer-rename { flex: 1; height: 26px; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12.5px; padding: 0 6px; }

/* stage / artboard */
.dc-stage {
    flex: 1; min-width: 0; overflow: auto; display: grid; place-items: center; padding: 48px;
    background-color: var(--bg-terminal);
    background-image: radial-gradient(var(--accent-tint) 1px, transparent 1px); background-size: 24px 24px;
}
:root[data-theme="light"] .dc-stage { background-color: #E8DFCC; }
/* Checkerboard on the artboard itself, so transparent regions read as transparent; Fabric's
   background colour (when set) paints over it. Fabric's own .canvas-container stays transparent. */
.dc-canvas-wrap {
    position: relative; box-shadow: 0 0 0 1px var(--border), 0 30px 70px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e7e7e7 25%, transparent 25%),
        linear-gradient(-45deg, #e7e7e7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e7e7e7 75%),
        linear-gradient(-45deg, transparent 75%, #e7e7e7 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.dc-canvas-wrap .canvas-container { background: transparent; }

/* properties */
.dc-props { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.dc-field { display: flex; flex-direction: column; gap: 6px; }
.dc-field-label { font-size: 11px; color: var(--text-muted); }
.dc-mono-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-faint); }
.dc-input {
    height: 30px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-terminal); color: var(--text); font-size: 13px; padding: 0 8px; width: 100%;
}
.dc-input-sm { width: 64px; height: 28px; padding: 0 6px; }
.dc-textarea { height: auto; padding: 6px 8px; resize: vertical; font-family: inherit; }
.dc-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-axis { font-size: 11px; color: var(--text-faint); width: 12px; }
.dc-range { width: 100%; accent-color: var(--accent); }
.dc-color { width: 40px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; }
.dc-style-row { gap: 4px; }
/* brand quick-pick swatch row on colour fields */
.dc-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.dc-swatch { width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 2px solid var(--border-subtle); cursor: pointer; transition: transform .1s ease; }
.dc-swatch:hover { transform: scale(1.08); }
.dc-swatch.active { border-color: var(--accent); }
/* destructive "Delete element" row */
.dc-delete-row {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
    border: 1px solid var(--border-subtle); border-radius: 8px; background: transparent;
    color: var(--status-err); font-size: 12.5px; cursor: pointer;
}
.dc-delete-row:hover { background: var(--bg-hover); border-color: var(--status-err); }

/* ── gallery ──────────────────────────────────────────────────────────────── */
.dc-gallery { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; }
.dc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px; padding: 24px;
}
.dc-card { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); overflow: hidden; display: flex; flex-direction: column; }
.dc-card-thumb {
    display: grid; place-items: center; background: var(--bg-subtle); overflow: hidden;
    max-height: 260px;
}
.dc-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dc-card-noimg { color: var(--text-low); }
.dc-card-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); }
.dc-card-name { flex: 1; font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-card-name:hover { color: var(--accent); }
.dc-card-dims { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.dc-card-del { opacity: 0.6; }
.dc-card-del:hover { opacity: 1; color: var(--diff-del-text); }
.dc-gallery-empty { margin: auto; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); padding: 60px 24px; }
.dc-gallery-empty-lead { font-size: 17px; color: var(--text); margin: 6px 0 0; }

/* ── create modal (template / size picker) ────────────────────────────────── */
.dc-create-modal { max-width: 620px; width: 92vw; }
.dc-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 12px; max-height: 340px; overflow-y: auto; }
.dc-template {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); cursor: pointer;
}
.dc-template:hover { border-color: var(--accent); }
.dc-template.active { border-color: var(--accent); background: var(--accent-tint); }
.dc-template-preview { height: 48px; display: grid; place-items: center; }
.dc-template-box { display: block; background: var(--bg); border: 1px solid var(--text-low); border-radius: 2px; }
.dc-template-name { font-size: 12px; color: var(--text); text-align: center; line-height: 1.2; }
.dc-template-dims { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.dc-custom-size { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dc-num { width: 100px; }