/* ════════════════════════════════════════════════════════════════════════
   E2 INK — production theme v1.0  (DEC-038, signed 2026-06-12)
   Contract: 07_UI_UX_SYSTEM/E2_INK_THEME.md §T1–T10.
   Absorbs Track B B1–B10. Extends the DEC-027 PREMIUM_FINISH family.

   Design language: ink = the permanent record · paper = the document ·
   cyan = the living intelligence. Evaluation test for any visual call:
   "archive-grade record, or admin template?"

   Structure: tokens → tenant hooks → base → focus/selection/scroll →
   component primitives → skeleton/surfaces → regions → motion.
   ════════════════════════════════════════════════════════════════════════ */

/* ── T1.1 — Ink · light (product default) ─────────────────────────────── */
:root {
    /* Surfaces */
    --ws-canvas:        #F6F5F3;   /* desk / body */
    --ws-paper:         #FFFFFF;   /* the document (chat column, artifact cards) */
    --ws-raised:        #FFFFFF;   /* overlay / popover / input hero */

    /* Ink text — warm near-blacks + warm-shifted muted/faint (LIVE were cool blue-gray) */
    --ws-text:          #1A1714;
    --ws-text-strong:   #120F0D;
    --ws-text-muted:    #6E6760;
    --ws-text-faint:    #9B948B;

    /* Hairlines — alpha so they sit on ANY surface (canvas, paper, raised, fill) */
    --ws-hairline:      rgba(18, 15, 13, .09);
    --ws-line-strong:   rgba(18, 15, 13, .18);

    /* Primary fill (ink) + its on-color + hover */
    --ws-fill:          #1B1815;
    --ws-fill-hover:    #120F0D;
    --ws-on-fill:       #FFFFFF;

    /* Soft tints — alpha ink; one for hover, one stronger for selected */
    --ws-tint:          rgba(27, 24, 21, .05);
    --ws-tint-strong:   rgba(27, 24, 21, .09);

    /* Living cyan — alive-only (A1.6). Ring is a dedicated focus color that
       clears WCAG 3:1 on light canvas (raw spark fails 3:1 on white). */
    --ws-spark:         #22D3EE;
    --ws-spark-soft:    rgba(34, 211, 238, .16);
    --ws-ring:          #0891B2;

    /* Roles */
    --ws-bubble-user:   #EFEDE9;   /* warm user pill (T4) */
    --ws-mat:           #EFEDEA;   /* T11.4d — artifact mat: one readable step deeper
                                      than canvas so the white document visibly floats */

    /* Warm-based elevation, 3 tiers (cards sh-1 · hero/pill sh-2 · overlays sh-3) */
    --ws-sh-1: 0 1px 2px rgba(18, 15, 13, .05);
    --ws-sh-2: 0 2px 6px rgba(18, 15, 13, .05), 0 8px 24px rgba(18, 15, 13, .07);
    --ws-sh-3: 0 16px 40px rgba(18, 15, 13, .14);

    /* ── T1.3 shared ────────────────────────────────────────────────── */
    --ws-radius-container: 16px;
    --ws-radius-card:      12px;
    --ws-radius-control:   10px;   /* NEW */
    --ws-radius-small:      8px;   /* = "row" */
    --ws-radius-row:        8px;
    --ws-radius-chip:       6px;
    --ws-radius-bubble:    14px;
    --ws-radius-pill:     999px;

    /* 8px spacing rhythm (DEC-027 §A1.1) */
    --ws-space-1:  4px;
    --ws-space-2:  8px;
    --ws-space-3: 12px;
    --ws-space-4: 16px;
    --ws-space-5: 24px;
    --ws-space-6: 32px;
    --ws-space-8: 48px;
    --ws-pad-card:   var(--ws-space-4);
    --ws-pad-inline: var(--ws-space-3);

    /* Inter (loaded App.razor, display=swap); system-ui paints frame 1 */
    --ws-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ws-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

    /* Type scale (anchored 14px body) */
    --ws-fs-caption: 11px;
    --ws-fs-small:   12px;
    --ws-fs-body:    14px;
    --ws-fs-lead:    16px;
    --ws-fs-h3:      18px;
    --ws-fs-h2:      22px;

    /* Motion (T1.3 / T6) */
    --ws-ease:   cubic-bezier(.2, .8, .2, 1);
    --ws-t-fast: 120ms;
    --ws-t-med:  200ms;
    --ws-t-slow: 320ms;

    /* ── Back-compat aliases — the ~900 lines of existing component rules
       reference these names; mapping them onto the v2 semantic tokens means
       they inherit the new values AND dark mode for free. ───────────────── */
    --ws-surface-app:    var(--ws-paper);
    --ws-surface-pane:   var(--ws-tint);
    --ws-surface-subtle: var(--ws-canvas);
    --ws-hover-fill:     var(--ws-tint);
    --ws-border:         var(--ws-hairline);
    --ws-border-strong:  var(--ws-line-strong);
    --ws-silver:         var(--ws-line-strong);
    --ws-ink-900:        var(--ws-fill-hover);
    --ws-ink-800:        var(--ws-fill);
    --ws-ink-700:        #2A2521;
    --ws-text-brand:     var(--ws-text-strong);
    --ws-active-fill:    var(--ws-fill);
    --ws-active-on:      var(--ws-on-fill);
    --ws-ink-800-tint:   var(--ws-tint-strong);
    --ws-active-soft:    var(--ws-tint-strong);
    --ws-brand:          var(--ws-spark);
    --ws-brand-soft:     var(--ws-spark-soft);
    --ws-elev-0: none;
    --ws-elev-1: var(--ws-sh-1);
    --ws-elev-2: var(--ws-sh-2);

    /* ── T11.1 (DEC-038-HF1) — Bootstrap variable bridge. The E2-INK rewrite
       dropped the pre-existing bridge; Bootstrap's !important utilities
       (.text-muted, .border, links…) then resolve to fixed LIGHT-theme
       constants → invisible on dark. Re-binding the --bs-* chain to ws tokens
       via var() means every Bootstrap utility auto-follows light/dark AND the
       tenant skins (resolution happens at usage, not here). The `-rgb`
       dependents can't var() into rgb() → set numerically per mode (light here,
       dark in the [data-ws-mode="dark"] block). */
    --bs-body-color:       var(--ws-text);
    --bs-body-bg:          var(--ws-canvas);
    --bs-secondary-color:  var(--ws-text-muted);    /* .text-muted */
    --bs-tertiary-color:   var(--ws-text-faint);
    --bs-emphasis-color:   var(--ws-text-strong);
    --bs-heading-color:    var(--ws-text-strong);
    --bs-border-color:     var(--ws-hairline);
    --bs-link-color:       var(--ws-text);
    --bs-link-hover-color: var(--ws-text-strong);
    --bs-primary:          var(--ws-fill);
    --bs-body-color-rgb:      26, 23, 20;    /* #1A1714 */
    --bs-emphasis-color-rgb:  18, 15, 13;    /* #120F0D */
    --bs-secondary-color-rgb: 110, 103, 96;  /* #6E6760 */
}

/* ── T1.2 — Ink · dark. Only the semantic tokens flip; aliases auto-follow. ── */
[data-ws-mode="dark"] {
    --ws-canvas:        #141110;
    --ws-paper:         #1B1816;
    --ws-raised:        #221E1B;
    --ws-text:          #ECE9E5;
    --ws-text-strong:   #FFFFFF;
    --ws-text-muted:    #A29A90;
    --ws-text-faint:    #766F66;
    --ws-hairline:      rgba(255, 255, 255, .09);
    --ws-line-strong:   rgba(255, 255, 255, .17);
    --ws-fill:          #ECE9E5;   /* primary INVERTS to light fill on dark */
    --ws-fill-hover:    #FFFFFF;
    --ws-on-fill:       #16120F;   /* dark text on the light fill */
    --ws-tint:          rgba(255, 255, 255, .06);
    --ws-tint-strong:   rgba(255, 255, 255, .10);
    --ws-spark:         #22D3EE;
    --ws-spark-soft:    rgba(34, 211, 238, .18);
    --ws-ring:          var(--ws-spark);   /* dark canvas clears 3:1 */
    --ws-bubble-user:   #262119;
    --ws-mat:           #0F0D0B;   /* T11.4d — one step deeper than the dark canvas */
    --ws-sh-1: 0 1px 2px rgba(0, 0, 0, .35);
    --ws-sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .40);
    --ws-sh-3: 0 18px 44px rgba(0, 0, 0, .55);
    --ws-ink-700: #C9C3BB;
    /* T11.1 — dark numerics for the --bs-* -rgb dependents (var() can't reach rgb()) */
    --bs-body-color-rgb:      236, 233, 229;  /* #ECE9E5 */
    --bs-emphasis-color-rgb:  255, 255, 255;
    --bs-secondary-color-rgb: 162, 154, 144;  /* #A29A90 */
}

/* ── T9 — tenant skins (archived, deployment-config only; NEVER a UI toggle).
   Activated per-tenant via data-ws-skin on <html>. Warm-ink is the fixed DNA;
   these are dormant hooks for a future deployment + its own acceptance pass. ── */
[data-ws-skin="steel"] {
    --ws-canvas: #F3F5F8; --ws-paper: #FFFFFF; --ws-fill: #1B2735;
    --ws-fill-hover: #0F1822; --ws-spark: #3B82F6; --ws-ring: #2563EB;
    --ws-bubble-user: #E8EDF4;
}
[data-ws-skin="steel"][data-ws-mode="dark"] {
    --ws-canvas: #0E141C; --ws-paper: #151D27; --ws-raised: #1C2531;
    --ws-fill: #DCE6F2; --ws-on-fill: #0E141C; --ws-spark: #3B82F6; --ws-ring: var(--ws-spark);
}
[data-ws-skin="mono"] {
    --ws-canvas: #F6F6F7; --ws-paper: #FFFFFF; --ws-fill: #18181B;
    --ws-fill-hover: #09090B; --ws-spark: #22D3EE; --ws-ring: #0891B2;
    --ws-bubble-user: #ECECEE;
}
[data-ws-skin="mono"][data-ws-mode="dark"] {
    --ws-canvas: #0B0B0C; --ws-paper: #161618; --ws-raised: #202022;
    --ws-fill: #E9E9EB; --ws-on-fill: #0B0B0C; --ws-spark: #22D3EE; --ws-ring: var(--ws-spark);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html, body { height: 100%; }
html { color-scheme: light dark; }   /* native scrollbars/inputs follow mode */
body {
    background: var(--ws-canvas);     /* T2: desk, not flat white */
    color: var(--ws-text);
    font-family: var(--ws-font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ws-heading { letter-spacing: -0.01em; }

/* tabular numerals for metric/table contexts */
table, .metric-block, .ws-chip strong, .readback-chip strong,
.input-bar kbd, code, pre { font-feature-settings: "tnum" 1; }

/* ── T7 — Focus v3 (glow-hybrid) + selection + scrollbar takeover ─────────
   Keyboard-only (:focus-visible); mouse users never see it. The crisp 1.5px
   ≥3:1 line carries WCAG 2.4.11; the low-alpha 16px glow carries the
   "diffused light" the user chose. Glow-only is non-certifiable (rejected).
   This also KILLS the Bootstrap default blue focus ring app-wide. */
:focus { outline: none; }
:focus-visible {
    outline: none;
    border-radius: var(--ws-radius-control);
    box-shadow: 0 0 0 1.5px var(--ws-ring), 0 0 16px 4px var(--ws-spark-soft);
    animation: ws-ring-in 160ms var(--ws-ease);
}
@keyframes ws-ring-in {
    from { box-shadow: 0 0 0 1.5px transparent, 0 0 0 0 transparent; }
}
/* Bootstrap puts its own box-shadow ring on .btn/.form-control:focus — null it
   so only :focus-visible (keyboard) shows our ring. */
.btn:focus, .btn:active:focus, .form-control:focus, .nav-link:focus,
button:focus, a:focus, textarea:focus, input:focus { box-shadow: none; outline: none; }

::selection { background: var(--ws-spark-soft); }

* { scrollbar-width: thin; scrollbar-color: var(--ws-line-strong) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ws-line-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ws-text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   T3 — Component primitives (Bootstrap demoted to layout/utility only)
   ════════════════════════════════════════════════════════════════════════ */

/* ── .ws-btn — the one button primitive (solid / outline / quiet) ───────── */
.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ws-space-1);
    font-family: inherit;
    font-size: var(--ws-fs-small);
    font-weight: 500;
    line-height: 1;
    padding: 7px 14px;
    border-radius: var(--ws-radius-control);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ws-text);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--ws-t-fast) var(--ws-ease),
                border-color var(--ws-t-fast) var(--ws-ease),
                color var(--ws-t-fast) var(--ws-ease),
                transform var(--ws-t-fast) var(--ws-ease);
}
.ws-btn:active { transform: scale(.97); }
.ws-btn:disabled, .ws-btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.ws-btn .bi { font-size: var(--ws-fs-body); line-height: 1; }

.ws-btn.solid {
    background: var(--ws-fill);
    border-color: var(--ws-fill);
    color: var(--ws-on-fill);
}
.ws-btn.solid:hover { background: var(--ws-fill-hover); border-color: var(--ws-fill-hover); }

.ws-btn.outline {
    border-color: var(--ws-line-strong);
    color: var(--ws-text);
}
.ws-btn.outline:hover { background: var(--ws-tint); border-color: var(--ws-text); }

.ws-btn.quiet {
    color: var(--ws-text-muted);
    border-color: transparent;
}
.ws-btn.quiet:hover { background: var(--ws-tint); color: var(--ws-text); }

/* ── .ws-chip — one chip primitive (readback + contract identity chips) ─── */
.ws-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ws-space-1);
    background: var(--ws-tint);
    color: var(--ws-text);
    border: 0;
    border-radius: var(--ws-radius-chip);
    padding: 2px 8px;
    font-size: var(--ws-fs-small);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.ws-chip .ws-chip-label { color: var(--ws-text-muted); font-weight: 400; }
.ws-chip strong { font-weight: 600; }
.ws-chip-edit {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ws-text-faint);
    cursor: pointer;
    line-height: 1;
}
.ws-chip-edit:hover { color: var(--ws-text); }

/* ── .ws-sugg — suggestion pill (paper bg, hairline, hover tint) ────────── */
.ws-sugg {
    flex: 0 0 auto;
    border-radius: var(--ws-radius-pill);
    border: 1px solid var(--ws-hairline);
    background: var(--ws-paper);
    color: var(--ws-text);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ws-t-fast) var(--ws-ease),
                border-color var(--ws-t-fast) var(--ws-ease);
}
.ws-sugg:hover { background: var(--ws-tint); border-color: var(--ws-line-strong); }
.ws-sugg:active { transform: scale(.97); }

/* ── .ws-callout — replaces Bootstrap alert-* (boundary 3 tiers + tool error).
   Icon + bold first line + muted body; radius 10; NO full-frame alert box. ── */
.ws-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--ws-space-2);
    padding: var(--ws-space-2) var(--ws-space-3);
    border-radius: var(--ws-radius-control);
    border: 1px solid var(--ws-hairline);
    background: var(--ws-tint);
    font-size: 13px;
    margin-bottom: var(--ws-space-2);
}
.ws-callout > .bi { margin-top: 1px; color: var(--ws-text-muted); }
.ws-callout strong { font-weight: 600; color: var(--ws-text); }
.ws-callout .ws-callout-body { color: var(--ws-text-muted); }
/* KNOWN_DEFERRED = neutral tint */
.ws-callout.deferred { background: var(--ws-tint); border-color: var(--ws-hairline); }
/* SENSITIVE = amber (governance-reserved) */
.ws-callout.sensitive {
    background: rgba(185, 130, 29, .07);
    border-color: rgba(185, 130, 29, .22);
}
.ws-callout.sensitive > .bi { color: #B9821D; }
/* UNCATALOGUED = dashed hairline */
.ws-callout.uncatalogued {
    background: transparent;
    border-style: dashed;
    border-color: var(--ws-line-strong);
}
/* tool error = restrained BRICK (PD R0023, 2026-06-12). Failure must read
   distinct from deferred: "we FAILED to answer" ≠ "we CHOSE not to". Danger
   hue, NOT amber — amber stays governance. Closes the semantic palette:
   amber=governance · brick=failure · neutral=deferred/boundary · cyan=alive. */
.ws-callout.error { background: rgba(178, 68, 56, .07); border-color: rgba(178, 68, 56, .22); }
.ws-callout.error > .bi { color: #B24438; }
[data-ws-mode="dark"] .ws-callout.error > .bi { color: #D26A5F; }
.ws-callout .ws-callout-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--ws-text-faint);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}
.ws-callout .ws-callout-x:hover { color: var(--ws-text); }

/* ── .ws-thinking — 3-dot ink pulse (replaces spinner-grow) ─────────────── */
.ws-thinking { display: inline-flex; align-items: center; gap: 4px; }
.ws-thinking .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ws-text-faint);
    animation: ws-dot var(--ws-t-slow) var(--ws-ease) infinite;
}
.ws-thinking .dot:nth-child(2) { animation-delay: 120ms; }
.ws-thinking .dot:nth-child(3) { animation-delay: 240ms; }
@keyframes ws-dot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-2px); }
}

/* ── .ws-iconbtn — bare icon button (topbar hamburger, etc.) ────────────── */
.ws-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--ws-text-muted);
    padding: 4px; border-radius: var(--ws-radius-control); cursor: pointer;
    transition: background-color var(--ws-t-fast) var(--ws-ease), color var(--ws-t-fast) var(--ws-ease);
}
.ws-iconbtn:hover { background: var(--ws-tint); color: var(--ws-text); }

/* ── T8.1 — mode segmented control (System / Light / Dark) ───────────────── */
.ws-mode {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-tint);
    border: 1px solid var(--ws-hairline);
}
.ws-mode-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 24px;
    border: 0; background: transparent; color: var(--ws-text-faint);
    border-radius: var(--ws-radius-pill); cursor: pointer;
    font-size: var(--ws-fs-small);
    transition: background-color var(--ws-t-fast) var(--ws-ease), color var(--ws-t-fast) var(--ws-ease);
}
.ws-mode-btn:hover { color: var(--ws-text); }
.ws-mode-btn.is-active { background: var(--ws-paper); color: var(--ws-text); box-shadow: var(--ws-sh-1); }
/* (USER) phone-only single theme-cycle button (d-sm-none) — one icon = current
   mode, tap cycles System→Light→Dark. Matches the .ws-mode pill look. */
.ws-mode-cycle { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0; border: 1px solid var(--ws-hairline); background: var(--ws-tint); color: var(--ws-text); border-radius: var(--ws-radius-pill); cursor: pointer; font-size: var(--ws-fs-small); }
.ws-mode-cycle:hover { color: var(--ws-text-strong); border-color: var(--ws-line-strong); }

/* ════════════════════════════════════════════════════════════════════════
   T2 — Workspace skeleton + surface inversion
   ════════════════════════════════════════════════════════════════════════ */
.workspace {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--ws-canvas);
}

.workspace-topbar {
    flex: 0 0 auto;
    background: var(--ws-canvas);           /* sits on the desk, not a white bar */
    border-bottom: 1px solid var(--ws-hairline);
    padding: var(--ws-space-2) var(--ws-space-4);
    /* T11.5 — kill navbar default wrap + space-between so the bar stays ONE
       row on mobile (☰ · brand · spacer · mode · avatar). */
    flex-wrap: nowrap;
    justify-content: flex-start;
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;
}
.workspace-topbar .navbar-brand {
    font-weight: 600;
    font-size: 16px;
    color: var(--ws-text);
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
}
.workspace-topbar .navbar-brand strong {
    color: var(--ws-text-brand);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.workspace-topbar .navbar-brand .brand-mark {
    display: inline-block;
    width: 28px; height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

.workspace-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    /* T2: desk shows between regions */
    background: var(--ws-canvas);
    padding: 0;
}

@media (min-width: 992px) {
    /* left (260) | middle paper | divider (4) | right (resizable).
       Per A5.4: middle floor 480 matches pane-resizer.js max formula. */
    .workspace-body {
        grid-template-columns:
            260px
            minmax(480px, 1fr)
            4px
            var(--ws-right-width, 460px);
        gap: var(--ws-space-4);             /* T2: 16px desk gap between regions */
        padding: 0 var(--ws-space-4) var(--ws-space-4);
    }
}


/* T2: regions sit directly on canvas, NO pane border-separators. */
.workspace-left,
.workspace-right { overflow: hidden; background: transparent; }

/* ── Drag-resize divider (desktop ≥992px only) ─────────────────────────── */
.pane-divider { display: none; }
@media (min-width: 992px) {
    .pane-divider {
        display: block;
        cursor: col-resize;
        background: transparent;
        position: relative;
        z-index: 3;
        align-self: stretch;
        border-radius: 999px;
        transition: background-color var(--ws-t-fast) var(--ws-ease);
    }
    .pane-divider:hover,
    .pane-divider:active { background: var(--ws-line-strong); }
    .pane-divider::before {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: -4px; right: -4px;
    }
}

.workspace-middle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    /* T2: the middle chat column is ONE paper object on the desk */
    background: var(--ws-paper);
    border-radius: var(--ws-radius-container);
    box-shadow: var(--ws-sh-1);
}
/* R0096 #A — ambient cyan top-wash when the Deep Dive lane is engaged. Layers
   over the paper bg; gentle cyan top ~200px fading to paper; --ws-spark-soft
   flips per light/dark. */
.workspace-middle.dd-on {
    background-image: linear-gradient(to bottom, var(--ws-spark-soft), transparent 200px);
}
@media (max-width: 991.98px) {
    /* mobile: paper fills, no desk margins */
    .workspace-middle { border-radius: 0; box-shadow: none; }
}

/* ── Left context pane ─────────────────────────────────────────────────── */
.left-context { height: 100%; padding: var(--ws-space-4) var(--ws-space-2) var(--ws-space-4) 0; overflow: auto; }
/* R0178 #5 — Insight (ASK) left pane / drawer: a consistent left gutter so the
   content doesn't hug the drawer edge, and headers align to the same left
   text-edge as the rows (the admin card edge lands on the rows' fill edge).
   Scoped :not(.review-queue) — the Action queue pane is left untouched. */
.left-context:not(.review-queue) { padding-left: var(--ws-space-2); }
.left-context:not(.review-queue) section h6 { padding-left: var(--ws-space-2); }
.left-context section + section { padding-top: 20px; }
.left-context section h6 {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ws-text-faint);
    font-weight: 600;
    margin-bottom: 10px;
}
/* row buttons (Contracts / Recent / Pending) — full-width, hover tint */
.left-context .ws-row {
    color: var(--ws-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    border-radius: var(--ws-radius-row);
    transition: background-color var(--ws-t-fast) var(--ws-ease);
    cursor: pointer;
    text-align: left;
}
.left-context .ws-row:hover,
.left-context .ws-row:focus-visible { background: var(--ws-tint); color: var(--ws-text); }
.left-context ul { padding: 0; margin: 0; }
.left-context li { list-style: none; padding: 0; }
.left-context .text-muted { color: var(--ws-text-muted) !important; }

/* B9 code-first 2-line contract row */
.left-context .contract-btn { min-width: 0; line-height: 1.25; }
.left-context .contract-btn .contract-code { color: var(--ws-text); font-weight: 500; }
.left-context .contract-btn .contract-name {
    color: var(--ws-text-muted);
    font-size: var(--ws-fs-small);
    font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* B9.1 contract chip → ws-chip primitive (kept as alias class) */
.contract-chip {
    display: inline-block;
    background: var(--ws-tint);
    color: var(--ws-text);
    border: 0;
    border-radius: var(--ws-radius-chip);
    padding: 1px 8px;
    font-size: var(--ws-fs-small);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.recent-row-meta { min-width: 0; }
/* R0140 (PD A_PD_1819): weather sits on line 1 after the WDNo. number — muted
   (NOT a colour change), inherits the line-1 .small size. The old line-2
   .recent-row-meta-text wrapper is gone (weather moved up). */
.recent-weather { margin-left: 4px; color: var(--ws-text-muted); }
/* R0141 (PD A_PD_1849): uniform line-1 lead. .left-context .ws-row forces
   weight:500 + ink on the whole row, so date(ink/500) ≠ "WDNo."(muted/500) ≠
   number(ink/700) read as different fonts. Override: the whole lead is muted
   /400, and the <b> number is the lone ink-bold anchor (matches PP's mock). */
.recent-row-l1   { font-weight: 400; color: var(--ws-text-muted); }
.recent-row-l1 b { font-weight: 700; color: var(--ws-text); }

.v2-deferred {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--ws-text-muted);
    padding: 6px 8px;
    border-radius: var(--ws-radius-row);
}

/* admin "All contracts" placeholder — paper card, no Bootstrap card/bg-light */
.admin-placeholder {
    background: var(--ws-tint);
    border: 1px solid var(--ws-hairline);
    border-radius: var(--ws-radius-card);
    padding: var(--ws-space-2) var(--ws-space-3);
    font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════════
   T4 — Chat thread + de-box (assistant writes on paper, user floats in a pill)
   ════════════════════════════════════════════════════════════════════════ */
.chat-thread-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.chat-thread { flex: 1 1 auto; min-height: 0; padding: 24px; }
.chat-thread::after { content: ""; display: block; height: 24px; flex-shrink: 0; }

/* B8 jump pill — ink fill (NOT cyan: nav control = ink, A1.6) */
.chat-jump-pill {
    position: absolute;
    right: var(--ws-space-4);
    bottom: var(--ws-space-4);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: var(--ws-space-1);
    padding: 6px 12px;
    border: 0;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-fill);
    color: var(--ws-on-fill);
    font-size: var(--ws-fs-small);
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--ws-sh-2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity var(--ws-t-fast) var(--ws-ease), transform var(--ws-t-fast) var(--ws-ease),
                background-color var(--ws-t-fast) var(--ws-ease);
}
.chat-jump-pill.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chat-jump-pill:hover { background: var(--ws-fill-hover); }
.chat-jump-pill .bi { font-size: var(--ws-fs-body); line-height: 1; }

.message-row.is-user      { display: flex; justify-content: flex-end; }
.message-row.is-assistant { display: flex; justify-content: flex-start; }
.message-row { animation: ws-msg-in var(--ws-t-med) var(--ws-ease); }
@keyframes ws-msg-in { from { opacity: 0; transform: translateY(4px); } }

/* base bubble — minimal; role rules below decide box vs paper */
.message-bubble {
    max-width: min(680px, 96%);
    word-wrap: break-word;
}
/* assistant: writes on the paper — NO shell box */
.bubble-assistant {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: var(--ws-space-2) 0;
    max-width: min(720px, 100%);
}
/* user: soft warm ink pill */
.bubble-user {
    max-width: 78%;
    padding: var(--ws-space-3) var(--ws-space-4);
    background: var(--ws-bubble-user);
    border: 0;
    border-radius: 14px 14px 4px 14px;
}

/* meta row: assistant = alive-dot + "E2" + time */
.message-role { color: var(--ws-text-muted); font-size: var(--ws-fs-small); }
.message-role .e2-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ws-spark);
    display: inline-block; flex: 0 0 auto;
}
.message-role .e2-label { font-weight: 600; color: var(--ws-text); letter-spacing: .02em; }

/* §A3 reading column: cap assistant prose ~68ch */
.message-body { color: var(--ws-text); font-size: var(--ws-fs-body); max-width: 68ch; }

/* B9.3 Markdown-rendered prose spacing */
.message-body p              { margin-top: 0; margin-bottom: 0.5em; }
.message-body p:last-child   { margin-bottom: 0; }
.message-body ul,
.message-body ol             { padding-left: 1.4em; margin-top: 0.25em; margin-bottom: 0.25em; }
.message-body ul:last-child,
.message-body ol:last-child  { margin-bottom: 0; }
.message-body li             { margin: 0.15em 0; }
.message-body li > p         { margin: 0; }
.message-body strong         { font-weight: 600; }
.message-body code {
    background: var(--ws-tint);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: var(--ws-mono);
}
/* R0077 #1 — GFM tables (Markdig .UsePipeTables). E2-INK pass: hairline rows,
   muted uppercase header, tnum already applied via the global `table` rule. */
.message-body table { width: 100%; border-collapse: collapse; font-size: var(--ws-fs-small); margin: 0.4em 0; }
.message-body th, .message-body td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--ws-hairline); vertical-align: top; }
.message-body th { color: var(--ws-text-muted); font-weight: 600; font-size: var(--ws-fs-caption); text-transform: uppercase; letter-spacing: .03em; }
.message-body table tbody tr:last-child td { border-bottom: 0; }

.message-actions .ws-btn { font-size: var(--ws-fs-small); }
/* T11.3 (DEC-038-HF1) — functional action buttons get a resting TINT fill;
   pure `quiet` (transparent) proved too invisible (first-time users missed
   both actions). Still chrome-quiet, no border. */
.message-actions .ws-btn.quiet { background: var(--ws-tint); color: var(--ws-text); }
.message-actions .ws-btn.quiet:hover { background: var(--ws-tint-strong); color: var(--ws-text); }
/* T11.3.2 — Refine = future-feature grammar (not a live control this version):
   match the left-rail v2-deferred dim, no resting fill, no hover affordance. */
.message-actions .ws-btn.is-future,
.message-actions .ws-btn.is-future:hover {
    background: transparent;
    color: var(--ws-text-muted);
    opacity: .55;
    cursor: default;
}
/* §A4.1 provenance/action band spacing */
.bubble-assistant .message-body + .trace-strip,
.bubble-assistant .trace-strip + .source-footnote { margin-top: var(--ws-space-2); }
.bubble-assistant .source-footnote + .message-actions,
.bubble-assistant .message-body + .message-actions { margin-top: var(--ws-space-3); }
.bubble-assistant .readback-row + .message-body,
.bubble-assistant .readback-row + .ask-back,
.bubble-assistant .readback-row + .streaming-placeholder {
    border-top: 1px solid var(--ws-hairline);
    padding-top: var(--ws-space-2);
    margin-top: var(--ws-space-2);
}

.streaming-placeholder { color: var(--ws-text-muted); }
.streaming-cursor {
    display: inline-block;
    margin-left: 2px;
    color: var(--ws-spark);                 /* the only perpetual motion */
    animation: ws-blink 1.1s steps(2, start) infinite;
}
@keyframes ws-blink { to { visibility: hidden; } }

/* ── Readback chip row ─────────────────────────────────────────────────── */
.readback-row { font-size: 13px; }
.readback-chip {
    padding: 3px 10px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-tint);
    color: var(--ws-text);
    font-weight: 500;
    font-size: 12px;
}
.readback-chip strong { font-weight: 600; }

/* ── Trace strip ───────────────────────────────────────────────────────── */
.trace-strip { color: var(--ws-text-muted); font-size: 12px; }
.trace-strip summary { cursor: pointer; }
.trace-strip summary:hover { color: var(--ws-text); }
.trace-strip code { color: var(--ws-text-muted); background: transparent; font-size: 12px; }

/* ── Source footnote ───────────────────────────────────────────────────── */
.source-footnote,
.source-footnote.text-muted {
    color: var(--ws-text-muted) !important;
    font-size: 12px;
    font-style: italic;
}
.source-footnote .bi-shield-check { color: var(--ws-text-muted); }

/* ── Report-lookup card (DEC-036 §36b) — paper-tint card inside bubble ──── */
.report-card {
    background: var(--ws-tint);
    border: 1px solid var(--ws-hairline);
    border-radius: var(--ws-radius-card);
    padding: var(--ws-space-3) var(--ws-space-4);
}
.report-card-heading { font-weight: 600; color: var(--ws-text); font-size: var(--ws-fs-body); line-height: 1.4; }
.report-card-table-wrap { overflow-x: auto; }
.report-card-table { width: 100%; border-collapse: collapse; font-size: var(--ws-fs-small); color: var(--ws-text); }
.report-card-table th,
.report-card-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--ws-hairline); vertical-align: top; }
.report-card-table th { color: var(--ws-text-muted); font-weight: 500; }
.report-card-table tbody tr:last-child td { border-bottom: 0; }
.report-card-footnote .bi-shield-check { color: var(--ws-text-muted); }

/* ── Boundary callouts now use .ws-callout (markup swept). Legacy class kept
   as a thin shim in case any stray .boundary-badge remains. ────────────── */
.boundary-badge { margin-bottom: var(--ws-space-2); }

/* ── Ask-back option pills ─────────────────────────────────────────────── */
.ask-back .ws-btn.outline {
    border-radius: var(--ws-radius-pill);
    padding: 5px 14px;
    font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════════
   Suggestion chips row
   ════════════════════════════════════════════════════════════════════════ */
.suggestion-chips {
    padding: 8px 24px 12px;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--ws-paper);
}

/* ════════════════════════════════════════════════════════════════════════
   T5 — Input hero
   ════════════════════════════════════════════════════════════════════════ */
.input-bar {
    background: var(--ws-paper);
    padding: 8px 24px 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.input-bar .input-group {
    background: var(--ws-raised);
    border: 1px solid var(--ws-hairline);
    border-radius: var(--ws-radius-bubble);
    box-shadow: var(--ws-sh-2);
    padding: 8px 8px 8px 16px;
    align-items: end;
    flex-wrap: nowrap;   /* T11.2 — keep textarea + send on one line */
    transition: border-color var(--ws-t-med) var(--ws-ease), box-shadow var(--ws-t-med) var(--ws-ease);
}
/* "ready to listen" — the one resting cyan whisper (A1.6-sanctioned here) */
.input-bar .input-group:focus-within {
    border-color: var(--ws-line-strong);
    box-shadow: var(--ws-sh-2), 0 0 0 4px var(--ws-spark-soft);
}
.input-bar-text {
    /* T11.2 — Bootstrap .input-group only auto-flexes .form-control members;
       this textarea dropped that class in the T3 sweep, so it collapsed to its
       intrinsic ~20-col width (the stray "↕" was its overflow scrollbar).
       Restore the flex grow explicitly. */
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    resize: none;
    max-height: 200px;
    border: 0 !important;
    background: transparent !important;
    padding: 6px 0 !important;
    font-size: 14px;
    color: var(--ws-text);
    box-shadow: none !important;
    outline: none !important;
    scrollbar-width: thin;
}
.input-bar-text::placeholder { color: var(--ws-text-faint); }
/* the wrapper IS the focus indicator — suppress the global ring on the inner field */
.input-bar-text:focus-visible { box-shadow: none; animation: none; outline: none; }

/* circular send button */
.ws-send {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--ws-radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ws-fill);
    color: var(--ws-on-fill);
    cursor: pointer;
    transition: background-color var(--ws-t-fast) var(--ws-ease), color var(--ws-t-fast) var(--ws-ease), transform var(--ws-t-fast) var(--ws-ease);
}
.ws-send:hover { background: var(--ws-fill-hover); }
.ws-send:active { transform: scale(.94); }
.ws-send:disabled {
    background: var(--ws-tint);
    color: var(--ws-text-faint);
    cursor: default;
}
.ws-send .bi { font-size: 16px; }

/* T11.2.3 — kbd chips to contract skin (shipped solid-ink chips were off-spec) */
.input-bar .text-muted kbd {
    background: var(--ws-tint);
    border: 1px solid var(--ws-hairline);
    color: var(--ws-text-muted);
    border-radius: 4px;
    font-size: 10px;
    padding: 2px 5px;
}

/* ════════════════════════════════════════════════════════════════════════
   Right artifact pane (single document-panel, PD-blessed 2026-06-12)
   ════════════════════════════════════════════════════════════════════════ */
.right-artifact {
    min-height: 0;
    height: 100%;
    background: var(--ws-paper);
    border-radius: var(--ws-radius-container);
    box-shadow: var(--ws-sh-1);
    overflow: hidden;
}
@media (max-width: 991.98px) {
    .right-artifact { border-radius: 0; box-shadow: none; }
}
.right-artifact-header { padding: var(--ws-space-4); }
.right-artifact-header strong { font-weight: 600; font-size: var(--ws-fs-body); }
.ws-count {
    display: inline-flex; align-items: center;
    background: var(--ws-tint);
    color: var(--ws-text-muted);
    border-radius: var(--ws-radius-pill);
    padding: 1px 8px;
    font-size: var(--ws-fs-small);
    font-weight: 500;
}

/* file list rows */
/* T11.4b (DEC-038) — unify right-panel content gutter on 16px (--ws-space-4)
   so filename pill / tab label / document edge / download buttons share ONE
   vertical line; the mat becomes an even 16px frame. */
.artifact-files {
    gap: 2px;
    padding: 8px var(--ws-space-4);
    /* §I (R0048) — cap the Files list (~5 rows) + internal scroll so a growing
       list never pushes the preview/map off the pane; the new/selected row
       scrolls into view on arrival (RightArtifactPane → scrollSelectedIntoView). */
    max-height: 184px;
    overflow-y: auto;
}
.artifact-files .ws-file {
    border: 0;
    border-radius: var(--ws-radius-row);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ws-text);
    background: transparent;
    text-decoration: none;
    transition: background-color var(--ws-t-fast) var(--ws-ease);
    width: 100%;
    text-align: left;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--ws-space-1);
}
.artifact-files .ws-file:hover { background: var(--ws-tint); color: var(--ws-text); }
/* selected = ink-form (soft tint fill + weight 500), no bar (A1.6) */
.artifact-files .ws-file.is-selected { background: var(--ws-tint-strong); color: var(--ws-text); font-weight: 500; }

/* artifact arrival cyan pulse (D1 cyan scope) */
@keyframes ws-arrive {
      0% { box-shadow: 0 0 0 0 var(--ws-spark-soft); background: var(--ws-spark-soft); }
     30% { box-shadow: 0 0 0 6px var(--ws-spark-soft); background: var(--ws-spark-soft); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); background: transparent; }
}
.artifact-files .ws-file.arriving { animation: ws-arrive 1.4s ease-out 1; }

.artifact-detail .nav-tabs { border-bottom: 1px solid var(--ws-hairline); padding: 8px var(--ws-space-4) 0; gap: var(--ws-space-4); }
.artifact-detail .nav-tabs .nav-link {
    color: var(--ws-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 6px 2px;            /* T11.4b — label aligns to the 16px gutter, gap carries spacing */
    font-size: 13px;
    font-weight: 500;
    background: transparent;
}
.artifact-detail .nav-tabs .nav-link.active {
    color: var(--ws-text-strong);
    border-bottom-color: var(--ws-fill);
    background: transparent;
}
.artifact-detail pre { background: var(--ws-tint); color: var(--ws-text); border-radius: 0; font-size: var(--ws-fs-small); }

/* §A5-S2 iframe shell. T8.2 paper-stays-paper: artifact bodies are renderer-
   owned and STAY light in dark; the desk dims via a subtle brightness cut to
   reduce night glare (B7 dark variants = optional future, NOT in scope). */
/* T11.4 (DEC-038-HF1) — "document on a mat". The preview/code region becomes a
   canvas mat; the artifact body becomes the document floating on it (was
   white-on-white: the white iframe merged into the white paper panel).
   Renderer HTML untouched; paper-stays-paper intact. */
.artifact-detail .ws-artifact-mat {
    /* T11.4d (DEC-038, signed option A): mat = one step deeper than canvas
       (#F6F5F3 → #EFEDEA light / #141110 → #0F0D0B dark) so the #FFF document
       visibly floats instead of merging into the panel. Padding/alignment from
       T11.4b unchanged. Tenant skins (T9, dormant) inherit this ink mat until
       their own acceptance pass derives a one-step-deeper value per skin —
       NOT inventing unsigned tenant hexes here. */
    background: var(--ws-mat);
    /* T11.4e (DEC-038) — full-bleed TRIAL: document spans the panel edge-to-edge;
       mat keeps top/bottom bands only (sides → 0). REVERT to T11.4d side-frame =
       restore `padding: var(--ws-space-3) var(--ws-space-4)` here + the border-x/
       radius lines on .artifact-iframe and .ws-artifact-mat pre below. */
    padding: var(--ws-space-3) 0;
}
.artifact-iframe {
    background: #FFFFFF;
    border: 1px solid var(--ws-hairline);
    /* T11.4e full-bleed: keep top/bottom hairlines against the mat bands; sides flush.
       REVERT (T11.4d): border-left/right 1px solid var(--ws-hairline) + border-radius var(--ws-radius-small). */
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: var(--ws-sh-1);
}
[data-ws-mode="dark"] .artifact-iframe { filter: brightness(.94); }
.artifact-detail .ws-artifact-mat pre {
    border: 1px solid var(--ws-hairline);
    /* T11.4e full-bleed (matches iframe). REVERT (T11.4d): border-left/right hairline + border-radius var(--ws-radius-small). */
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: var(--ws-sh-1);
    margin: 0;
}
.artifact-detail .border-top { border-color: var(--ws-hairline) !important; }
.artifact-detail .ws-download-row {
    border-top: 1px solid var(--ws-hairline);
    padding: var(--ws-space-3) var(--ws-space-4);
    gap: var(--ws-space-2);
    display: flex;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
    background: transparent;
    border: 0;
    text-align: center;
    padding: 48px 16px;
    color: var(--ws-text-muted);
}
.empty-state .bi { color: var(--ws-text-faint); }
.chat-thread .empty-state:only-child { padding-top: 96px; }

/* ── Mobile bottom tabs ────────────────────────────────────────────────── */
.mobile-bottom-tabs {
    flex: 0 0 auto;
    background: var(--ws-paper);
    border-top: 1px solid var(--ws-hairline);
}
.mobile-bottom-tabs .ws-tab {
    flex: 1 1 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    color: var(--ws-text-muted);
    border-radius: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: color var(--ws-t-fast) var(--ws-ease);
}
.mobile-bottom-tabs .ws-tab.is-active { color: var(--ws-text); }
.mobile-bottom-tabs .ws-tab:hover { color: var(--ws-text); }

/* ── Offcanvas drawer ──────────────────────────────────────────────────── */
.offcanvas.show-when-open { transition: transform var(--ws-t-med) var(--ws-ease); background: var(--ws-paper); }
.offcanvas.show-when-open:not(.show) { transform: translateX(-100%); }
.offcanvas .offcanvas-header { border-bottom-color: var(--ws-hairline) !important; }

/* ── Default Blazor error UI (framework banner; only on circuit failure) ── */
#blazor-error-ui {
    background: #FEF3C7;
    color: #120F0D;
    bottom: 0;
    border-top: 1px solid #F59E0B;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
    font-size: 13px;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ── Identity pill (DEC-027 §A6) ───────────────────────────────────────── */
.identity-pill {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ws-space-2);
    padding: var(--ws-space-1) var(--ws-space-3);
    border-radius: var(--ws-radius-pill);
    background: var(--ws-tint);
    border: 1px solid var(--ws-hairline);
    font-size: var(--ws-fs-small);
    line-height: 1.4;
    color: var(--ws-text-muted);
    cursor: default;
    user-select: none;
    max-width: 100%;
    min-width: 0;
}
.identity-pill .identity-pill-icon { color: var(--ws-text-muted); align-self: center; font-size: var(--ws-fs-body); }
.identity-pill .identity-pill-name {
    color: var(--ws-text);
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.identity-pill .identity-pill-caption {
    color: var(--ws-text-muted);
    font-size: var(--ws-fs-caption);
    font-weight: 400;
    border-left: 1px solid var(--ws-hairline);
    padding-left: var(--ws-space-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* R0094 (PD) — unify the 3 top-bar controls to one shared height (they computed
   30/29/27px intrinsically). Placed AFTER the .identity-pill rules so the
   align-items override (baseline → center) wins the cascade. CSS-only; keeps
   each control's own horizontal padding/border/radius — only vertical sizing
   is shared. border-box: content area absorbs each control's padding; switch
   (15) / mode buttons (24) / identity icon+name all centre, nothing clips. */
:root { --ws-control-h: 30px; }   /* shared top-bar control height */

.dd-toggle,
.identity-pill,
.ws-mode,
.ws-mode-cycle {
    height: var(--ws-control-h);
    box-sizing: border-box;
    align-items: center;
}

/* ── T10 — brand slogan (sign-in + expired landing only; never the workspace) ── */
.ws-slogan {
    color: var(--ws-text-faint);
    font-size: var(--ws-fs-small);
    letter-spacing: .02em;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════
   DEC-040 — Deep Dive (VIP lane). Built to DEEP_DIVE_MOCK.html v2; every rule
   uses the live E2-INK --ws-* tokens (inherits light/dark/tenant). Cyan
   (--ws-spark) = the living-intelligence accent (alive-only law). The lone
   new token --dd-infer is a SEMANTIC honesty colour (inferred/status-only),
   NOT a theme colour.
   ════════════════════════════════════════════════════════════════════════ */
:root            { --dd-infer: #9A6B00; }   /* amber caution — inferred */
[data-ws-mode="dark"] { --dd-infer: #D9A441; }

/* ── C1 toggle ── */
/* R0083 v2 #1b (PD) — chip neutral BOTH states; the slim switch is the ONLY
   ON signal (cyan). VIP tag dropped; switch back inside the chip. */
.dd-toggle {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 12px;
    border: 1px solid var(--ws-hairline); border-radius: var(--ws-radius-pill);
    background: var(--ws-tint); color: var(--ws-text); font-size: 12.5px; font-weight: 600; line-height: 1;  /* R0089 #7 — match .ws-mode / .identity-pill tint (was --ws-paper) */
    cursor: pointer; user-select: none; transition: border-color var(--ws-t-fast) var(--ws-ease);
}
.dd-toggle:hover { border-color: var(--ws-line-strong); }
.dd-toggle .dd-ico { font-size: 13px; color: var(--ws-text-muted); }
.dd-switch {
    width: 26px; height: 15px; border-radius: 999px; flex: none; background: var(--ws-line-strong);
    position: relative; transition: background-color var(--ws-t-med) var(--ws-ease);
}
.dd-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
    border-radius: 50%; background: #fff; transition: left var(--ws-t-med) var(--ws-ease);
}
.dd-toggle.on .dd-switch { background: var(--ws-spark); }
.dd-toggle.on .dd-switch::after { left: 13px; }

/* R0091 (PD) — Deep Dive chip + right cluster: phone de-crowd.
   At sm the chip drops its word label to icon + switch (the `:not(.dd-switch)`
   selector hides the bare "Deep Dive" <span> without touching markup); the
   right cluster tightens its gap so chip + theme switcher + identity icon
   sit on one row at ~375px. 576px+ keeps the full chip. */
@media (max-width: 575.98px) {
    /* (USER) phone Deep Dive = icon-only: no word, no switch — the ✦ icon carries
       state (grey OFF via the base .dd-ico rule, cyan ON). */
    .dd-toggle { padding: 4px 7px; gap: 0; }
    .dd-toggle > span:not(.dd-switch) { display: none; }   /* hide "Deep Dive" word */
    .dd-toggle .dd-switch { display: none; }               /* hide the slim switch */
    .dd-toggle .dd-ico { font-size: 15px; }
    .dd-toggle.on .dd-ico { color: var(--ws-spark); }      /* cyan ON */
    .workspace-topbar .ms-auto { gap: var(--ws-space-2); } /* 16 → 8, only on phone */
}

/* ── thread + messages ── */
/* R0090 #8 — positioned wrap so the shared .chat-jump-pill anchors to the
   Deep Dive thread's bottom-right (parity with .chat-thread-wrap). */
.dd-thread-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.dd-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.dd-msg { max-width: 92%; margin-bottom: 16px; }
.dd-msg.user { margin-left: auto; width: fit-content; background: var(--ws-bubble-user); border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 13.5px; }
/* R0085 (PD) — de-box the AI reply: it was a box-in-box (framed bubble wrapping
   the already-framed .dd-trace + .dd-answer cards). Match the main chat E2-INK
   de-box law (.bubble-assistant{background:transparent;border:0}) → .dd-who sits
   directly on the thread; trace + answer float as the two clean cards. The
   .dd-who mb:8 / .dd-trace mb:13 / .dd-answer mt:4 margins carry the spacing. */
.dd-msg.ai { background: transparent; border: 0; box-shadow: none; padding: 0; }
/* R0096 #B — Deep Dive entry empty-state (ON, before the first ask). */
.dd-empty { text-align: center; padding: 64px 24px 0; color: var(--ws-text-muted); }
.dd-empty .bi { font-size: 28px; color: var(--ws-ring); }
.dd-empty-title { font-size: var(--ws-fs-lead); font-weight: 700; color: var(--ws-text); margin: 10px 0 4px; }
.dd-empty p { font-size: var(--ws-fs-small); max-width: 46ch; margin: 0 auto; }
.dd-who { font-size: 11px; color: var(--ws-text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.dd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ws-spark); box-shadow: 0 0 6px var(--ws-spark); }
.dd-who-label { font-weight: 600; color: var(--ws-text); }
.dd-engaged { margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--ws-ring); border: 1px solid var(--ws-ring); border-radius: 999px; padding: 0 8px; }

/* ── C3 thinking trace ── */
.dd-trace { border: 1px solid var(--ws-hairline); border-radius: var(--ws-radius-card); background: var(--ws-canvas); overflow: hidden; margin-bottom: 13px; }
.dd-trace-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; cursor: pointer; }
.dd-ic { color: var(--ws-spark); font-size: 13px; }   /* R0079 #3 — bi-stars trace head */
.dd-tt { font-weight: 600; font-size: 12.5px; }
.dd-meta { margin-left: auto; font-size: 10.5px; color: var(--ws-text-faint); font-family: var(--ws-mono); }
.dd-chev { color: var(--ws-text-faint); transition: transform var(--ws-t-fast) var(--ws-ease); }
.dd-trace.collapsed .dd-chev { transform: rotate(-90deg); }
.dd-trace.collapsed .dd-trace-body { display: none; }
.dd-trace-body { padding: 2px 0 8px; }
.dd-step { display: flex; gap: 11px; padding: 6px 15px; align-items: flex-start; position: relative; }
.dd-rail { position: absolute; left: 22px; top: 0; bottom: 0; width: 1.5px; background: var(--ws-hairline); }
/* R0083 v2 #2 (PD) — trace nodes = small muted icons on the thin rail (was
   heavy 3-coloured bordered circles that upstaged the answer). Retry keeps the
   one calm amber accent (COORD call — genuine caution signal). */
.dd-node { width: 16px; height: 16px; flex: none; margin-top: 1px; z-index: 1;
    display: grid; place-items: center; background: var(--ws-canvas); color: var(--ws-text-faint); border: 0; }
.dd-node .bi { font-size: 11px; line-height: 1; }
.dd-node.retry { color: var(--dd-infer); }
.dd-step-body { flex: 1; min-width: 0; }
.dd-think { color: var(--ws-text-muted); font-style: italic; font-size: 12.5px; }
.dd-call { font-family: var(--ws-mono); font-size: 12px; background: var(--ws-paper); border: 1px solid var(--ws-hairline); border-radius: 8px; padding: 5px 9px; display: inline-block; color: var(--ws-text); }
.dd-fn { color: var(--ws-ring); font-weight: 600; }
.dd-arg { color: var(--ws-text-muted); }
.dd-callmeta { font-size: 10.5px; color: var(--ws-text-faint); margin-top: 3px; font-family: var(--ws-mono); }
.dd-pill { font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; margin-left: 5px; }
.dd-pill.ok { color: var(--ws-ring); background: var(--ws-spark-soft); }
.dd-pill.warn { color: var(--dd-infer); background: rgba(154, 107, 0, .12); }
/* R0089 #3b — active-node radial spinner (the horizontal dots clashed with the
   vertical rail). Cyan = active/in-progress; reverts to the muted static icon
   on settle (#2). prefers-reduced-motion freezes it to a static partial ring. */
.dd-spinner { width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid var(--ws-spark-soft); border-top-color: var(--ws-ring);
    animation: dd-spin .7s linear infinite; }
@keyframes dd-spin { to { transform: rotate(360deg); } }

/* ── C4 answer card (archive-grade) ── */
.dd-answer { border: 1px solid var(--ws-hairline); border-radius: var(--ws-radius-card); background: var(--ws-paper); overflow: hidden; box-shadow: var(--ws-sh-1); margin-top: 4px; }
.dd-ans-body { padding: 12px 15px; font-size: var(--ws-fs-body); color: var(--ws-text); }
.dd-ans-body p { margin: 0 0 .5em; } .dd-ans-body p:last-child { margin-bottom: 0; }
.dd-ans-body ul, .dd-ans-body ol { padding-left: 1.4em; margin: .25em 0; }
.dd-ans-body strong { font-weight: 600; }
.dd-ans-body code { background: var(--ws-tint); padding: 1px 4px; border-radius: 4px; font-size: .9em; font-family: var(--ws-mono); }
/* R0089 #5a — reply headings as compact bold sub-labels (no h1/h2/h3 rules =
   oversized browser defaults). Pairs with S1's #5b prompt steer. */
.dd-ans-body h1, .dd-ans-body h2, .dd-ans-body h3 { line-height: 1.3; }
.dd-ans-body h1 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.dd-ans-body h2 { font-size: 13px; font-weight: 700; margin: 14px 0 4px; }
.dd-ans-body h3 { font-size: 12.5px; font-weight: 600; color: var(--ws-text-muted); margin: 12px 0 3px; }
.dd-ans-body h1:first-child, .dd-ans-body h2:first-child, .dd-ans-body h3:first-child { margin-top: 0; }
.dd-ans-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.dd-ans-body th, .dd-ans-body td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--ws-hairline); }
.dd-ans-body th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ws-text-muted); font-weight: 600; }
.dd-legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 11px; color: var(--ws-text-muted); margin: 0 15px; padding: 11px 0 0; }
.dd-legend span { display: flex; align-items: center; gap: 6px; }
.dd-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.dd-sw.fact { background: var(--ws-text); } .dd-sw.infer { background: var(--dd-infer); } .dd-sw.none { background: var(--ws-text-faint); }
.dd-grounded { margin: 11px 15px 0; font-size: 12px; color: var(--ws-text-muted); background: var(--ws-spark-soft); border-left: 3px solid var(--ws-ring); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.dd-infer-text { color: var(--dd-infer); }
.dd-meter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 15px; margin-top: 11px; border-top: 1px solid var(--ws-hairline); background: var(--ws-mat); font-size: 11px; color: var(--ws-text-muted); font-family: var(--ws-mono); }
.dd-meter b { color: var(--ws-text); font-weight: 700; } .dd-meter .cache { color: var(--ws-ring); } .dd-meter .lane { margin-left: auto; color: var(--ws-ring); font-weight: 700; font-family: var(--ws-font); }

/* ════════════════════════════════════════════════════════════════════════
   T6 — Motion: global reduced-motion kill-switch (B8 precedent)
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   DEC-041 — aiStudio Review & Approve (EXECUTE mode). Ports REVIEW_APPROVE_MOCK
   v4 / MODE_SWITCH_MOCK onto the E2-INK token system. `--review-ai` (green) is
   the free-text/clarity accent from the approved mock; structure uses --ws-*.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --review-ai: #10b981; --review-ok: #047857; --review-ok-bg: #ecfdf5;
    --review-warn: #b45309; --review-warn-bg: #fff7ed; --review-was: #dc2626;
}
[data-ws-mode="dark"] {
    --review-ai: #34d399; --review-ok: #34d399; --review-ok-bg: #0c2b22;
    --review-warn: #fbbf24; --review-warn-bg: #2a210f; --review-was: #f87171;
}

/* Topbar mode switch — R0175 §1: LEFT next to the brand (no auto-centre);
   active = E2-INK warm fill (was an undefined --ws-accent → navy #0f3a5d). */
.studio-modesw {
    display: flex; gap: 2px;
    background: var(--ws-tint); border: 1px solid var(--ws-hairline);
    border-radius: 9px; padding: 3px;
}
.studio-modesw button {
    border: 0; background: none; border-radius: 7px; padding: 5px 13px;
    cursor: pointer; color: var(--ws-text-muted); font-weight: 600;
    font-size: var(--ws-fs-small); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.studio-modesw button.on { background: var(--ws-fill); color: var(--ws-on-fill); }
/* R0176 §1 — brand │ switch separator (1px×20px hairline, ~12px gap). */
.studio-modesw-divider {
    flex: none; align-self: center; display: inline-block;
    width: 1px; height: 20px; margin: 0 12px;
    background: var(--ws-line-strong);
}
/* Deep Dive is an ASK sub-mode → its chip hides in EXECUTE (mock parity). */
.workspace.mode-exec .dd-toggle { display: none; }
@media (max-width: 780px) { .studio-modesw button span { display: none; } }

/* Shared empty/loading state for the review panes. */
.review-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 24px; gap: 4px;
}
.review-empty .bi { font-size: 26px; opacity: .6; }

/* LEFT — review queue. */
.review-queue { padding: var(--ws-space-3) var(--ws-space-3); width: 100%; }
.review-q-row { width: 100%; text-align: left; display: block; margin-bottom: 2px; }
.review-q-row.sel { background: var(--ws-tint); border-color: var(--ws-hairline); }
.review-q-l1 { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.review-q-rto { font-weight: 600; color: var(--ws-text); }
.review-q-meta { font-size: var(--ws-fs-small); margin-top: 2px; }
.review-pc { border-radius: 999px; font-size: 10.5px; padding: 1px 8px; white-space: nowrap; }
.review-pc.warn { background: var(--review-warn-bg); color: var(--review-warn); }
.review-pc.ok { background: var(--review-ok-bg); color: var(--review-ok); }
.review-q-note { font-size: 10.5px; line-height: 1.5; }

/* CENTER — review conversation. */
.review-convo { height: 100%; }
.review-thread { padding: var(--ws-space-4); }
.review-msg { max-width: 94%; margin-bottom: 13px; }
.review-msg.user {
    margin-left: auto; width: fit-content; background: var(--ws-tint);
    border-radius: 12px 12px 4px 12px; padding: 8px 13px; color: var(--ws-text);
}
.review-msg.ai {
    background: var(--ws-surface, var(--ws-bg)); border: 1px solid var(--ws-hairline);
    border-radius: 12px 12px 12px 4px; padding: 11px 14px; color: var(--ws-text);
}
.review-who { font-size: 11px; color: var(--ws-text-muted); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.review-fn { font-size: 11px; color: var(--ws-text-muted); font-style: italic; margin-top: 8px; border-top: 1px solid var(--ws-hairline); padding-top: 6px; }
.review-fix { margin-top: 7px; background: var(--ws-tint); border: 1px solid var(--ws-hairline); border-radius: 8px; padding: 7px 10px; font-size: var(--ws-fs-small); }
.review-fix.done { opacity: .6; }
.review-fix-lbl { font-size: 10.5px; text-transform: uppercase; margin-bottom: 2px; }
.review-was { color: var(--review-was); text-decoration: line-through; }
.review-now { color: var(--review-ok); font-weight: 600; }
.review-fix-reason { font-style: italic; }
.review-applied { color: var(--review-ok); }
.review-clr { color: var(--ws-text-muted); font-size: var(--ws-fs-small); margin-top: 8px; }
.review-clr-ok { color: var(--review-ok); }
.review-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* R0180 — inline Accept = a distinct SMALL micro-button (v4 `.mini`,
   REVIEW_APPROVE_MOCK.html:72): smaller font + tighter radius + a left gap, so
   it reads a tier below the normal-size "Accept all" outline button. Supersedes
   the R0178 .review-mini rule. */
.review-mini { font-size: 11px; padding: 3px 9px; border-radius: 7px; margin-left: 6px; }
/* R0181 — the 3 review buttons ONLY: slightly less round (10→8; mini stays 7)
   + a clean soft-tint hover (NO border-darken). Scoped to .review-acts /
   .review-mini — the global --ws-radius-control + .ws-btn.outline:hover are
   untouched. NOTE: the mini-hover selector carries .ws-btn.outline so it
   out-specifies the global .ws-btn.outline:hover (a bare .review-mini:hover
   would lose to it → the mini would still darken). */
.review-acts .ws-btn { border-radius: 8px; }
.review-acts .ws-btn.outline:hover,
.review-mini.ws-btn.outline:hover { border-color: var(--ws-line-strong); background: var(--ws-tint); }
.review-perm { font-size: 11.5px; color: var(--ws-text-muted); margin-top: 9px; }

/* RIGHT — report artifact. */
.review-report { height: 100%; }
.review-phead { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid var(--ws-hairline); }
.review-phead b { font-size: 13px; color: var(--ws-text); }
.review-phead-meta { font-size: 11.5px; }
.review-pbody { padding: 13px 15px; }
.review-rh h1 { font-size: 16px; margin: 0 0 3px; color: var(--ws-text); }
.review-rh-sub { font-size: var(--ws-fs-small); }
.review-rchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.review-rchip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--ws-tint); color: var(--ws-text-muted); }
.review-rchip.warn { background: var(--review-warn-bg); color: var(--review-warn); }
.review-rchip.appr { background: var(--review-ok-bg); color: var(--review-ok); }
.review-sect { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin: 15px 0 6px; }
.review-free { color: var(--review-ai); text-transform: none; letter-spacing: 0; }
.review-table-wrap { overflow-x: auto; }
.review-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--ws-text); }
.review-table th, .review-table td { padding: 7px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ws-hairline); }
.review-table th { font-size: 9.5px; text-transform: uppercase; color: var(--ws-text-muted); }
.review-free-th { color: var(--review-ai); }
.review-free-td { background: rgba(16, 185, 129, .06); }
.review-actname { font-weight: 600; }
.review-ext { font-size: 11px; margin-left: 4px; }
.review-rsl { color: var(--ws-text-muted); }
.review-note-cell { margin-bottom: 4px; }
.review-note-cell:last-child { margin-bottom: 0; }
.review-edit-input { width: 100%; font-size: 12px; padding: 3px 6px; border: 1px solid var(--review-ai); border-radius: 4px; background: var(--ws-bg); color: var(--ws-text); }
.review-edit-acts { display: flex; gap: 6px; margin-top: 4px; }
.review-edited { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--review-ai); border: 1px solid var(--review-ai); border-radius: 999px; padding: 0 6px; }
.review-eb { cursor: pointer; color: var(--ws-text-muted); font-size: 11px; border: 1px solid var(--ws-hairline); border-radius: 6px; padding: 0 5px; margin-left: 6px; background: var(--ws-bg); }
.review-eb:hover { color: var(--ws-text); }
.review-thumbs { display: flex; gap: 4px; flex-wrap: wrap; }
.review-thumb { width: 34px; height: 25px; padding: 0; border-radius: 4px; border: 1px solid var(--ws-hairline); cursor: pointer; background-size: cover; background-position: center; display: inline-block; }
.review-thumb:hover { outline: 2px solid var(--review-ai); }
.review-foot { color: var(--ws-text-muted); font-size: 10.5px; font-style: italic; margin: 14px 0 22px; }

/* R0175 §3 — queue role-scope text + Approved-today row */
.review-q-scope { font-weight: 400; letter-spacing: 0; text-transform: none; }
.review-approved-row { opacity: .55; cursor: default; }

/* R0175 §4 — EXECUTE input bar FUTURE PLACEHOLDER (disabled + Coming-soon chip) */
.review-inbar { flex: 0 0 auto; border-top: 1px solid var(--ws-hairline); padding: 11px 16px; display: flex; align-items: center; gap: 9px; }
.review-inbox { flex: 1; border: 1px dashed var(--ws-line-strong); border-radius: 12px; padding: 10px 13px; color: var(--ws-text-faint); background: var(--ws-tint); font-size: var(--ws-fs-small); opacity: .7; cursor: not-allowed; user-select: none; }
.review-soon { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ws-text-muted); border: 1px solid var(--ws-line-strong); border-radius: 999px; padding: 2px 9px; opacity: .7; white-space: nowrap; }

/* R0175 §5 — Download placeholder · timesheet stats grid · photo lightbox */
.review-dl { margin-left: auto; border: 1px solid var(--ws-line-strong); background: transparent; color: var(--ws-text); border-radius: 8px; padding: 5px 11px; font-size: 11.5px; display: inline-flex; gap: 4px; align-items: center; }
.review-ts { display: flex; gap: 18px; flex-wrap: wrap; background: var(--ws-tint); border: 1px solid var(--ws-hairline); border-radius: var(--ws-radius-card); padding: 11px 13px; font-size: 12.5px; margin-top: 7px; }
.review-ts-kv { color: var(--ws-text); }
.review-ts-kv b { display: block; color: var(--ws-text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; font-weight: 600; }
.review-lightbox { position: fixed; inset: 0; z-index: 6000; background: rgba(10, 8, 6, .82); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; outline: none; }
.review-lightbox img { max-width: 78vw; max-height: 74vh; border-radius: 10px; box-shadow: var(--ws-sh-3); cursor: default; }
.review-lightbox-cap { color: #ece9e5; font-size: 13px; }
.review-lightbox-x { position: absolute; top: 16px; right: 22px; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; background: none; border: 0; }

/* ════════════════════════════════════════════════════════════════════════
   DEC-044 — Specialist "War Room" (internal advisory lane). E2-INK chrome
   (warm-ink, --ws-* tokens); content keeps meaning-colour — amber (--review-warn)
   = internal/rehearsal-only + graceful deflection; cyan (--ws-spark) = alive dot.
   PRESENTATION-ONLY scaffold; the SAMPLE ribbon shows until S1's wire lands.
   ════════════════════════════════════════════════════════════════════════ */
.workspace.mode-warroom .dd-toggle { display: none; }

/* shared: cyan alive dot + internal/rehearsal-only tag */
.wr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ws-spark); display: inline-block; flex: 0 0 auto; }
.wr-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--ws-radius-pill); padding: 1px 7px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.wr-tag.redteam { color: var(--review-warn); background: var(--review-warn-bg); border: 1px solid var(--review-warn); }
.wr-tag.deflect { color: var(--review-warn); background: var(--review-warn-bg); border: 1px solid var(--review-warn); }
.wr-err { font-size: var(--ws-fs-small); margin-top: 8px; }

/* R0231 — sanitized markdown rendered inside War Room surfaces (shared renderer). */
.wr-md > :first-child { margin-top: 0; }
.wr-md > :last-child { margin-bottom: 0; }
.wr-md p { margin: 0 0 7px; }
.wr-md ul, .wr-md ol { margin: 5px 0; padding-left: 18px; }
.wr-md li { margin-bottom: 3px; }
.wr-md h1, .wr-md h2, .wr-md h3, .wr-md h4, .wr-md h5 { font-size: 13.5px; font-weight: 700; color: var(--ws-text-strong); margin: 10px 0 4px; }
.wr-md hr { border: 0; border-top: 1px solid var(--ws-hairline); margin: 9px 0; }
.wr-md strong, .wr-md b { font-weight: 600; color: var(--ws-text-strong); }
.wr-md em { font-style: italic; }
.wr-md code { font-size: .92em; background: var(--ws-tint); padding: 1px 4px; border-radius: 4px; }
.wr-md table { border-collapse: collapse; margin: 6px 0; font-size: .95em; }
.wr-md th, .wr-md td { border: 1px solid var(--ws-hairline); padding: 3px 7px; text-align: left; }
.wr-md a { color: var(--ws-text); text-decoration: underline; }
/* battlecard list items, inline question, live bottom line: keep injected <p> tight + inline */
.wr-bc-section li.wr-md p, .wr-bc-q .wr-md p, .wr-bottomline-text.wr-md p { display: inline; margin: 0; }
.wr-bc-a.wr-md p { margin: 0; }

/* ── Center: War Room conversation ─────────────────────────────────────── */
.wr-convo { height: 100%; }
.wr-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ws-hairline); flex-wrap: wrap; }
.wr-head-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wr-brand { font-weight: 600; color: var(--ws-text); letter-spacing: .02em; }
.wr-head-sub { font-size: var(--ws-fs-small); }
.studio-modesw.wr-subsw { padding: 2px; }
.studio-modesw.wr-subsw button { padding: 4px 11px; }

.wr-sample { flex: 0 0 auto; margin: 10px 16px 0; padding: 7px 12px; font-size: var(--ws-fs-small); color: var(--review-warn); background: var(--review-warn-bg); border: 1px solid var(--review-warn); border-radius: var(--ws-radius-small); }
.wr-sample b { font-weight: 700; letter-spacing: .03em; }

.wr-body { padding: var(--ws-space-4); }
.wr-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 22px; max-width: 46ch; margin: 0 auto; }
.wr-idle .bi { font-size: 30px; opacity: .5; }

/* composer (ONE structure for both sub-modes — R0253) */
.wr-composer { margin-bottom: 14px; }
.wr-composer-lbl { display: block; font-size: var(--ws-fs-small); margin-bottom: 6px; }
.wr-textarea { width: 100%; resize: vertical; border: 1px solid var(--ws-line-strong); border-radius: var(--ws-radius-control); background: var(--ws-paper); color: var(--ws-text); padding: 10px 13px; font: inherit; font-size: var(--ws-fs-body); }
.wr-textarea:focus-visible { outline: none; border-color: var(--ws-ring); box-shadow: 0 0 0 1.5px var(--ws-ring), 0 0 16px 4px var(--ws-spark-soft); }
.wr-composer-acts { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.wr-composer-hint { font-size: var(--ws-fs-small); }

/* takes container + thinking (shared by Rehearsal AND LIVE) */
.wr-thinking { display: flex; align-items: center; margin-bottom: 12px; }
.wr-takes { display: flex; flex-direction: column; gap: 12px; }

/* R0248/R0253 — shared TakeCard DNA (Rehearsal + LIVE). One card + header (avatar ·
   name · role · tags) + body, rendered by both modes (same component + classes) so
   they cannot drift. Only CONTENT differs (LIVE has no headline). */
.take-card { background: var(--ws-paper); border: 1px solid var(--ws-hairline); border-radius: var(--ws-radius-card); padding: 12px 14px; }
.take-card.redteam { border-color: var(--review-warn); background: var(--review-warn-bg); }
.take-card.deflect { border-style: dashed; }
.take-card.errored { opacity: .7; }
.take-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.take-card-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ws-tint-strong); color: var(--ws-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.take-card.redteam .take-card-avatar { background: var(--review-warn); color: var(--ws-on-fill); }
.take-card-name { font-weight: 600; color: var(--ws-text); font-size: var(--ws-fs-body); }
.take-card-role { font-size: var(--ws-fs-small); }
.take-card-headline { font-weight: 600; color: var(--ws-text-strong); margin-bottom: 3px; }
.take-card-body { color: var(--ws-text); font-size: var(--ws-fs-body); line-height: 1.5; max-width: 70ch; }

/* @follow-up placeholder (future) */
.wr-followup { margin-top: 14px; display: flex; align-items: center; gap: 9px; }
.wr-followup-box { flex: 1; border: 1px dashed var(--ws-line-strong); border-radius: var(--ws-radius-control); padding: 9px 13px; color: var(--ws-text-faint); background: var(--ws-tint); font-size: var(--ws-fs-small); opacity: .7; user-select: none; }
.wr-soon, .wr-bc-soon { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ws-text-muted); border: 1px solid var(--ws-line-strong); border-radius: var(--ws-radius-pill); padding: 2px 9px; opacity: .7; white-space: nowrap; }

/* LIVE synthesis — the "Say this now" box, rendered in the shared right-pane shell
   (BattleCardPane, R0255). Not a live-only fork; it's the LIVE analog of the Battle Card. */
.wr-bottomline { padding: 13px 16px; border-radius: var(--ws-radius-card); background: var(--ws-fill); color: var(--ws-on-fill); }
.wr-bottomline-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; opacity: .7; margin-bottom: 3px; }
.wr-bottomline-text { font-size: 18px; font-weight: 600; line-height: 1.45; }

/* ── Left: roster ──────────────────────────────────────────────────────── */
.wr-roster-scope { color: var(--ws-text-faint); font-weight: 600; }

/* R0237 — shared PersonaChip (Rehearsal roster row + LIVE picker pill). Identical
   internals (avatar · name · role · selected-check) so the two surfaces can't
   drift; only the WRAPPER differs (--row full-width list / --chip compact pill). */
.persona-chip { display: flex; align-items: center; gap: 9px; border: 1px solid transparent; background: none; color: var(--ws-text); cursor: pointer; text-align: left; font: inherit; }
.persona-chip-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ws-tint-strong); color: var(--ws-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.persona-chip-avatar.chair { background: var(--ws-fill); color: var(--ws-on-fill); }
.persona-chip-text { display: flex; flex-direction: column; min-width: 0; }
.persona-chip-name { font-weight: 500; color: var(--ws-text); font-size: 13px; line-height: 1.3; }
.persona-chip-role { font-size: var(--ws-fs-small); font-weight: 400; color: var(--ws-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.persona-chip-check { color: var(--ws-text-faint); flex: 0 0 auto; }
.persona-chip.on .persona-chip-check { color: var(--review-ok); }
.persona-chip.off { opacity: .5; }
/* --row : full-width roster list item */
.left-context .persona-chip--row { width: 100%; padding: 8px 10px; border-radius: var(--ws-radius-row); }
.left-context .persona-chip--row .persona-chip-text { flex: 1; }
.left-context .persona-chip--row:hover,
.left-context .persona-chip--row:focus-visible { background: var(--ws-tint); }
/* --chip : compact LIVE pill — surfaces the role as a 2nd line; same selected-check */
.persona-chip--chip { border: 1px solid var(--ws-line-strong); background: var(--ws-paper); border-radius: var(--ws-radius-card); padding: 5px 11px 5px 7px; gap: 7px; }
.persona-chip--chip .persona-chip-avatar { width: 22px; height: 22px; font-size: 12px; }
.persona-chip--chip .persona-chip-role { font-size: 10.5px; }
.persona-chip--chip .persona-chip-check { font-size: 12px; }
.persona-chip--chip:hover { border-color: var(--ws-text); }
.persona-chip--chip.on { background: var(--ws-tint); }

.wr-roster-acts { margin-top: 10px; }
.wr-team-btn { font-size: var(--ws-fs-small); }
.wr-chair-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ws-hairline); }
.wr-roster-foot { line-height: 1.45; }

/* ── Right: Battle Card ────────────────────────────────────────────────── */
.wr-battlecard { height: 100%; padding: var(--ws-space-4); }
.wr-bc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.wr-bc-title { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ws-text-strong); }
.wr-bc-title .bi { font-size: 17px; }
.wr-bc-sub { font-size: var(--ws-fs-small); font-weight: 400; }
.wr-bc-acts { display: flex; gap: 6px; }
.wr-bc-mini { font-size: 11.5px; padding: 4px 10px; border-radius: var(--ws-radius-small); }
.wr-bc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; max-width: 38ch; margin: 0 auto; }
.wr-bc-empty .bi { font-size: 28px; opacity: .5; }
.wr-bc-body { display: flex; flex-direction: column; gap: 16px; }
.wr-bc-section h6 { display: flex; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ws-text-muted); margin-bottom: 6px; }
.wr-bc-section p { color: var(--ws-text); font-size: var(--ws-fs-body); line-height: 1.55; margin: 0; }
.wr-bc-section ul { margin: 0; padding-left: 18px; }
.wr-bc-section li { color: var(--ws-text); font-size: var(--ws-fs-body); line-height: 1.5; margin-bottom: 4px; }
.wr-bc-section.play p { font-weight: 500; color: var(--ws-text-strong); }
.wr-bc-qa { margin-bottom: 9px; padding: 9px 11px; border-radius: var(--ws-radius-small); background: var(--ws-tint); border: 1px solid var(--ws-hairline); }
.wr-bc-qa.redteam { background: var(--review-warn-bg); border-color: var(--review-warn); }
.wr-bc-q { font-weight: 600; color: var(--ws-text-strong); font-size: var(--ws-fs-small); margin-bottom: 3px; }
.wr-bc-a { color: var(--ws-text); font-size: var(--ws-fs-small); line-height: 1.5; }
.wr-bc-section.guard li { color: var(--ws-text-muted); }
.wr-bc-foot { font-size: var(--ws-fs-small); font-style: italic; padding-top: 8px; border-top: 1px solid var(--ws-hairline); }

@media (max-width: 780px) { .wr-bottomline-text { font-size: 16px; } }

/* ════════════════════════════════════════════════════════════════════════
   DEC-045 (b) — Specialist Knowledge admin (W-SPADMIN). Standalone route
   (/specialist-admin) on the E2-INK token system; list + edit/add form.
   ════════════════════════════════════════════════════════════════════════ */
.admin-page { min-height: 100vh; background: var(--ws-canvas); color: var(--ws-text); display: flex; flex-direction: column; }
.admin-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--ws-hairline); background: var(--ws-paper); }
.admin-top-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ws-radius-control); color: var(--ws-text); text-decoration: none; flex: 0 0 auto; }
.admin-back:hover { background: var(--ws-tint); color: var(--ws-text); }
.admin-title { font-size: 17px; font-weight: 600; color: var(--ws-text-strong); display: flex; align-items: center; }
.admin-sub { font-size: var(--ws-fs-small); }

.admin-gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 60px 22px; }
.admin-gate .bi { font-size: 30px; opacity: .5; }
.admin-gate a { color: var(--ws-text); }

.admin-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; }
.admin-list { border-right: 1px solid var(--ws-hairline); overflow-y: auto; padding: 10px; background: var(--ws-paper); }
.admin-muted { color: var(--ws-text-muted); font-size: var(--ws-fs-small); padding: 10px; }
.admin-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--ws-text); cursor: pointer; padding: 9px 10px; border-radius: var(--ws-radius-row); }
.admin-row:hover { background: var(--ws-tint); }
.admin-row.sel { background: var(--ws-tint-strong); border-color: var(--ws-line-strong); }
.admin-row.inactive { opacity: .55; }
.admin-row-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ws-tint-strong); color: var(--ws-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.admin-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-row-name { font-weight: 500; color: var(--ws-text); font-size: 13.5px; display: flex; align-items: center; gap: 5px; }
.admin-row-lock { font-size: 10px; color: var(--ws-text-faint); }
.admin-row-meta { font-size: var(--ws-fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row-flags { display: flex; gap: 4px; flex: 0 0 auto; }
.admin-pill { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: var(--ws-radius-pill); padding: 1px 7px; white-space: nowrap; }
.admin-pill.off { color: var(--ws-text-muted); background: var(--ws-tint-strong); border: 1px solid var(--ws-line-strong); }
.admin-pill.warn { color: var(--review-warn); background: var(--review-warn-bg); border: 1px solid var(--review-warn); }
.admin-pill.lock { color: var(--ws-text-muted); background: var(--ws-tint-strong); border: 1px solid var(--ws-line-strong); display: inline-flex; align-items: center; }

.admin-form-wrap { overflow-y: auto; padding: 22px; }
.admin-form-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ws-text-muted); max-width: 40ch; margin: 0 auto; }
.admin-form-empty .bi { font-size: 28px; opacity: .5; }
.admin-form { max-width: 760px; }
.admin-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.admin-form-title { font-size: 20px; font-weight: 600; color: var(--ws-text-strong); margin: 0; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.admin-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.admin-grid .admin-field { margin-bottom: 0; }
.admin-field label { font-size: var(--ws-fs-small); font-weight: 600; color: var(--ws-text-muted); }
.admin-req { color: var(--review-warn); }
.admin-input { width: 100%; border: 1px solid var(--ws-line-strong); border-radius: var(--ws-radius-control); background: var(--ws-paper); color: var(--ws-text); padding: 8px 12px; font: inherit; font-size: var(--ws-fs-body); }
.admin-input:focus-visible { outline: none; border-color: var(--ws-ring); box-shadow: 0 0 0 1.5px var(--ws-ring), 0 0 16px 4px var(--ws-spark-soft); }
.admin-input:disabled { background: var(--ws-tint); color: var(--ws-text-muted); cursor: not-allowed; }
.admin-area { resize: vertical; line-height: 1.55; }
.admin-hint { font-size: var(--ws-fs-small); color: var(--ws-text-faint); font-weight: 400; }
.admin-locked { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px dashed var(--ws-line-strong); border-radius: var(--ws-radius-control); background: var(--ws-tint); color: var(--ws-text-muted); font-size: var(--ws-fs-body); }

.admin-toggles { display: flex; flex-wrap: wrap; gap: 18px; margin: 6px 0 16px; }
.admin-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: var(--ws-fs-body); color: var(--ws-text); }
.admin-toggle input { width: 16px; height: 16px; accent-color: var(--ws-fill); cursor: pointer; }

.admin-msg { font-size: var(--ws-fs-small); padding: 8px 12px; border-radius: var(--ws-radius-small); margin-bottom: 12px; }
.admin-msg.err { color: var(--review-was); background: var(--review-warn-bg); border: 1px solid var(--review-was); }
.admin-msg.ok { color: var(--review-ok); background: var(--review-ok-bg); border: 1px solid var(--review-ok); }

.admin-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--ws-hairline); margin-top: 4px; }
.admin-actions-sp { margin-left: auto; }
.admin-confirm { font-size: var(--ws-fs-small); }
.admin-danger { color: var(--review-was); border-color: var(--review-was); }
.admin-danger:hover { background: var(--review-warn-bg); border-color: var(--review-was); color: var(--review-was); }

@media (max-width: 860px) {
    .admin-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .admin-list { border-right: 0; border-bottom: 1px solid var(--ws-hairline); max-height: 38vh; }
    .admin-grid { grid-template-columns: 1fr; }
}