/* ──────────────────────────────────────────────────────────────────────────
 * Cyber-luxe restyle for the Continuum admin UI (compose chooser, in-flight
 * display, loading shim, Seedance Library folders + drill-in). Scoped to
 * Continuum-specific selectors so the rest of the admin chrome is untouched.
 *
 * Theme primitives (mirror the WWP cyber-luxe system):
 *   - Display font  : "Orbitron"
 *   - Body font     : "Rajdhani"
 *   - Gold accent   : var(--cs-gold)
 *   - Gold dim      : rgba(255,215,0, .55)
 *   - Ink           : #07070d
 *   - Notched corner clip-path on cards / buttons
 * ────────────────────────────────────────────────────────────────────────── */
/* Tokens (--cs-*, --cx-*, --cs-ink-*, etc.) live in cyberlux-shared.css.
   This file consumes those shared tokens directly; no per-surface
   palette re-definitions remain. */

/* ── Task #542: Reserve right-side gutter on the admin Continuum
 * conversation surface so the Producer Mix widget + Transmission dock
 * (both pinned bottom-right) never sit on top of the Sender Cockpit /
 * Hand Raised cards / chat thread. The widgets toggle a body data
 * attribute and write the live measured width into
 * --corner-widget-gutter; we apply that as right padding. */
body[data-corner-widgets] #compose-conversation-panel {
    padding-right: calc(18px + var(--corner-widget-gutter, 360px)) !important;
    transition: padding-right 180ms ease-out;
}
@media (max-width: 640px) {
    body[data-corner-widgets] #compose-conversation-panel {
        padding-right: 18px !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Task #510 — Shared cyberlux under-glass panel
 *
 * One reusable base class (`.cs-glass-panel`) carries the cyberlux
 * under-glass treatment introduced piecemeal in #382 / #503 / #507:
 * notched gold bezel, soft scanline + faint vertical grid, animated
 * diagonal glare strip above the glass but below text, gold hairline
 * border + outer glow, prefers-reduced-motion fallback.
 *
 * The two pre-existing surface-specific classes
 * (`.continuum-session-glass` for the post-submit production session
 * panel, `.architect-chat-glass` for the Architect Live Session chat)
 * inherit from this base via selector grouping so the bezel + scanline
 * + glare + reduced-motion live in one place. Their per-class
 * overrides (header eyebrow, message cards, hint-glow state) remain in
 * their original blocks further down this file unchanged.
 *
 * The shared class is also applied to the rest of the Continuum
 * experience here so every panel a producer or member touches during a
 * session reads as one continuous monitor surface:
 *
 *   #compose-conversation-panel  — the outer wrapper around the
 *                                  Sender Cockpit + Architect Live
 *                                  Session + production session messages
 *   #continuum-tier-panel        — paid-tier picker + cost estimate
 *   #continuum-recent-strip      — recent-session resume strip
 *   .continuum-ref-player        — persistent reference-track mini player
 *   #continuum-notif-dropdown    — header notifications dropdown
 *   .continuum-prefs-modal       — sender preferences modal
 *
 * `#continuum-starter-loading` and `#continuum-starter-chooser` already
 * carry the notched bezel + scanline from earlier passes; they're added
 * here so they pick up the missing glare layer + reduced-motion fallback
 * without re-declaring the bezel.
 *
 * Future Continuum panels opt in by adding `.cs-glass-panel` to their
 * markup (or extending this selector list) rather than re-declaring the
 * bezel, scanline, glare, and reduced-motion fallback every time.
 * ────────────────────────────────────────────────────────────────────── */
.cs-glass-panel,
.continuum-session-glass,
.architect-chat-glass,
#compose-conversation-panel,
#continuum-tier-panel,
#continuum-recent-strip,
.continuum-ref-player,
#continuum-notif-dropdown,
.continuum-prefs-modal,
#continuum-starter-loading,
#continuum-starter-chooser,
#continuum-plan-nodes,
#continuum-energy-curve,
#continuum-interval-list,
.cs-library,
#continuum-manual-flow {
    position: relative;
    background: linear-gradient(135deg, #050505 0%, #0d0d12 65%, #050505 100%) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    border-radius: 0 !important;
    clip-path: polygon(var(--cs-notch) 0, 100% 0, 100% calc(100% - var(--cs-notch)), calc(100% - var(--cs-notch)) 100%, 0 100%, 0 var(--cs-notch));
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.08) inset,
        0 18px 60px -28px rgba(255, 215, 0, 0.25);
    overflow: hidden !important;
    isolation: isolate;
    font-family: var(--cs-font-body);
}

/* Scanline + faint vertical grid below text. */
.cs-glass-panel::before,
.continuum-session-glass::before,
.architect-chat-glass::before,
#compose-conversation-panel::before,
#continuum-tier-panel::before,
#continuum-recent-strip::before,
.continuum-ref-player::before,
#continuum-notif-dropdown::before,
.continuum-prefs-modal::before,
#continuum-starter-loading::before,
#continuum-starter-chooser::before,
#continuum-plan-nodes::before,
#continuum-energy-curve::before,
#continuum-interval-list::before,
.cs-library::before,
#continuum-manual-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 215, 0, 0.035) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 215, 0, 0.018) 24px 25px);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: 0.85;
}

/* Animated diagonal glare strip — purely decorative, never blocks input. */
.cs-glass-panel::after,
.continuum-session-glass::after,
.architect-chat-glass::after,
#compose-conversation-panel::after,
#continuum-tier-panel::after,
#continuum-recent-strip::after,
.continuum-ref-player::after,
#continuum-notif-dropdown::after,
.continuum-prefs-modal::after,
#continuum-starter-loading::after,
#continuum-starter-chooser::after,
#continuum-plan-nodes::after,
#continuum-energy-curve::after,
#continuum-interval-list::after,
.cs-library::after,
#continuum-manual-flow::after {
    content: '';
    position: absolute;
    top: -40%; left: -30%;
    width: 60%; height: 220%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0) 35%,
        rgba(255, 240, 200, 0.06) 48%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 240, 200, 0.06) 52%,
        rgba(255, 255, 255, 0.0) 65%,
        transparent 100%);
    transform: rotate(8deg) translateX(0);
    pointer-events: none;
    z-index: 1;
    animation: cx-screen-glare 11s ease-in-out infinite;
    filter: blur(2px);
    mix-blend-mode: screen;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .cs-glass-panel::after,
    .continuum-session-glass::after,
    .architect-chat-glass::after,
    #compose-conversation-panel::after,
    #continuum-tier-panel::after,
    #continuum-recent-strip::after,
    .continuum-ref-player::after,
    #continuum-notif-dropdown::after,
    .continuum-prefs-modal::after,
    #continuum-starter-loading::after,
    #continuum-starter-chooser::after,
    #continuum-plan-nodes::after,
    #continuum-energy-curve::after,
    #continuum-interval-list::after,
    .cs-library::after,
    #continuum-manual-flow::after {
        animation: none;
        transform: rotate(8deg) translateX(60%);
        opacity: 0.35;
    }
}

/* Real content sits above the glare layer. */
.cs-glass-panel > *,
.continuum-session-glass > *,
.architect-chat-glass > *,
#compose-conversation-panel > *,
#continuum-tier-panel > *,
#continuum-recent-strip > *,
.continuum-ref-player > *,
#continuum-notif-dropdown > *,
.continuum-prefs-modal > *,
#continuum-starter-loading > *,
#continuum-starter-chooser > *,
#continuum-plan-nodes > *,
#continuum-energy-curve > *,
#continuum-interval-list > *,
.cs-library > *,
#continuum-manual-flow > * {
    position: relative;
    z-index: 2;
}

/* Per-station inner padding so the new bezel has breathing room
 * around the canvas/list content inside #continuum-manual-flow. */
#continuum-plan-nodes,
#continuum-energy-curve,
#continuum-interval-list {
    padding: 12px 14px !important;
}
.cs-library,
#continuum-manual-flow {
    padding: 18px 18px 22px !important;
}

/* Inner glass panels nested inside #continuum-manual-flow lose their
   outer notch + gold border + outer glow so they read as inner
   sections of the same monitor surface (same approach used for the
   compose conversation wrapper above). Their scanline, glare, header
   eyebrows, and inner content are kept intact. */
#continuum-manual-flow #continuum-recent-strip,
#continuum-manual-flow #continuum-tier-panel,
#continuum-manual-flow #continuum-plan-nodes,
#continuum-manual-flow #continuum-energy-curve,
#continuum-manual-flow #continuum-interval-list,
#continuum-manual-flow .continuum-ref-player {
    border-color: transparent !important;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4) !important;
    clip-path: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.18)) !important;
}

/* Sender Cockpit (.convo-cockpit) — sits as the first child inside
 * #compose-conversation-panel. Replace its legacy gray rounded chrome
 * with a notched gold-hairline frame so it reads as content on the
 * new under-glass surface (no double bezel — we use a hairline border
 * + inner shadow instead of the wrapper's full bezel + outer glow). */
.convo-cockpit {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.32)) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.04), inset 0 0 60px rgba(0, 0, 0, 0.4) !important;
}
.convo-cockpit-title {
    color: var(--cs-gold-dim) !important;
    font-family: var(--cs-font-display) !important;
}

/* Per-interval cards (.continuum-interval-panel) inside
 * #continuum-interval-list — replace the rounded violet-tinted card
 * with a notched cyberlux row so each interval reads as a station on
 * the same monitor. State-color borders (active/rendering/anchored/
 * pending) are preserved further down in admin-panel.css via more
 * specific selectors. */
.continuum-interval-panel {
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.28)) !important;
    border-color: var(--cs-gold-hair) !important;
}
.continuum-interval-panel.is-active   { border-color: var(--cs-gold) !important; box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18); }
.continuum-interval-panel.is-rendering{ border-color: rgba(127, 119, 221, 0.55) !important; }
.continuum-interval-panel.is-anchored { border-color: rgba(29, 158, 117, 0.55) !important; }
.continuum-interval-panel-num {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-gold-dim) !important;
}

/* Notification badge — promote from a plain pill to a notched
 * cyberlux chip so it matches the new gold dropdown header below it. */
.continuum-notif-badge {
    border: 1px solid var(--cs-gold) !important;
    border-radius: 0 !important;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    box-shadow: 0 0 8px -2px rgba(255, 215, 0, 0.6);
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.08em;
}

/* ─── Per-surface tweaks for the newly-themed panels ─────────────────── */

/* The outer Sender Cockpit wrapper carries some inline padding from
   admin.html. Bump the inner padding so the cockpit + inner glass
   panels sit comfortably on the new monitor surface. */
#compose-conversation-panel {
    padding: 18px !important;
    margin-top: 24px !important;
}
/* Inner glass panels (.architect-chat-glass + .continuum-session-glass)
   nested inside the conversation panel: drop their outer bezel notch +
   gold border + outer glow so they read as inner sections of the same
   monitor surface instead of glass tiles inside a glass frame. The
   header eyebrows, scanline, glare, message cards, and hint-glow state
   inside each panel are all kept intact. */
#compose-conversation-panel .architect-chat-glass,
#compose-conversation-panel .continuum-session-glass {
    border-color: transparent !important;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4) !important;
    clip-path: none !important;
    margin-top: 14px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.18)) !important;
}
/* The hint-glow state on the nested Architect chat keeps the gold
   pulse but applies it as an inset accent rather than the outer
   bezel glow that fights with the wrapper. */
#compose-conversation-panel #architect-chat-wrap.architect-chat-glass.architect-hint-glow {
    border-color: rgba(255, 215, 0, 0.45) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.18),
        inset 0 0 60px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(255, 215, 0, 0.18) !important;
}

/* Tier panel inner content cleanup — the violet-tinted box was
   replaced by the gold glass; keep the violet eyebrow accent on the
   "Continuum tier" label so the persona color persists. */
#continuum-tier-panel {
    padding: 16px 18px !important;
}
#continuum-tier-panel > .admin-form-label,
#continuum-tier-panel > div:first-child > .admin-form-label {
    color: var(--cs-continuum) !important;
    font-family: var(--cs-font-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
#continuum-tier-panel #continuum-cost-estimate {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.32)) !important;
    border: 1px solid rgba(255, 215, 0, 0.10);
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* Recent-strip — keep the teal accent on its inner cards while the
   wrapper picks up the gold glass. */
#continuum-recent-strip {
    padding: 12px 14px !important;
}

/* Reference-track mini player — retain the architect-amber accent
   colour on its inner controls while the outer panel becomes glass. */
.continuum-ref-player {
    margin: 12px 0 16px !important;
}
.continuum-ref-player .cref-head {
    background: linear-gradient(180deg, rgba(186, 117, 23, 0.10), rgba(0, 0, 0, 0.25)) !important;
    border-bottom: 1px solid rgba(186, 117, 23, 0.28) !important;
}

/* Header notification dropdown — replace the rounded violet card
   chrome with the cyberlux glass while keeping the per-sender
   accent on individual items. */
#continuum-notif-dropdown {
    width: 380px !important;
    max-height: 560px !important;
    padding: 0 !important;
    /* Fold up the radial corners; the notch is the new shape. */
}
#continuum-notif-dropdown .continuum-notif-head {
    background: linear-gradient(180deg, #07070d 0%, #0a0a14 100%) !important;
    border-bottom: 1px solid var(--cs-gold-hair) !important;
    padding: 12px 16px !important;
}
#continuum-notif-dropdown .continuum-notif-title {
    font-family: var(--cs-font-display);
    color: var(--cs-gold) !important;
    letter-spacing: 0.28em !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
#continuum-notif-dropdown .continuum-notif-list {
    background: linear-gradient(180deg, #07070d 0%, #0a0a14 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
}

/* Sender-preferences modal — same treatment so the modal that opens
   from the gear in the notification dropdown and the in-session
   thread reads as one continuous cyberlux surface. */
.continuum-prefs-modal {
    width: min(560px, 92vw) !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    padding: 0 !important;
}
.continuum-prefs-modal .continuum-prefs-head {
    background: linear-gradient(180deg, #07070d 0%, #0a0a14 100%) !important;
    border-bottom: 1px solid var(--cs-gold-hair) !important;
}
.continuum-prefs-modal .continuum-prefs-title {
    font-family: var(--cs-font-display);
    color: var(--cs-gold) !important;
    letter-spacing: 0.24em !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}

/* The starter loading + chooser cards are part of the shared selector
   list above. Re-assert their padding here so the bezel notch sits
   cleanly around their existing content. */
#continuum-starter-loading {
    padding: 18px 22px !important;
}
#continuum-starter-chooser {
    padding: 22px !important;
}

/* Member-side under-glass parity (cs-headline / cs-gate / cs-deny-banner
 * / cs-timeline-wrap / cs-switches-card) lives in submission-flow.css
 * because that's the stylesheet work-with-pub.html actually loads. */

/* ─── Loading shim ───────────────────────────────────────────────────────── */
/* Bezel + scanline + glare moved to the shared `.cs-glass-panel` block at
   the top of this file (Task #510). Only text styling is kept here. */
#continuum-starter-loading > div {
    color: var(--cs-text-dim) !important;
    font-family: var(--cs-font-body) !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

/* ─── Starter chooser ────────────────────────────────────────────────────── */
/* Bezel + scanline + glare moved to the shared `.cs-glass-panel` block at
   the top of this file (Task #510). The original ::before scanline override
   here was removed so the shared scanline + grid texture can apply. */
#continuum-starter-chooser > div:first-child > span:first-child {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-gold) !important;
    letter-spacing: 0.32em !important;
    font-weight: 700 !important;
}
#continuum-starter-chooser > div:first-child > span:last-child {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-text) !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
}
#continuum-starter-chooser .admin-form-hint {
    font-family: var(--cs-font-body);
    color: var(--cs-text-dim) !important;
    letter-spacing: 0.04em;
}
#continuum-starter-chooser button.admin-btn {
    background: linear-gradient(135deg, var(--cs-ink-3), var(--cs-ink-2)) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: transform 120ms ease, border-color 160ms ease, box-shadow 160ms ease;
    font-family: var(--cs-font-body);
}
#continuum-starter-chooser button.admin-btn:hover:not([data-inflight-disabled]) {
    transform: translateY(-2px);
    border-color: var(--cs-gold) !important;
    box-shadow: 0 12px 32px -16px rgba(255, 215, 0, 0.55);
}
#continuum-starter-chooser button.admin-btn span:first-child {
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.06em;
    color: var(--cs-text) !important;
}
#continuum-starter-chooser button.admin-btn span:last-child {
    color: var(--cs-text-dim) !important;
    font-family: var(--cs-font-body) !important;
    letter-spacing: 0.03em;
}
#continuum-starter-chooser.continuum-inflight-locked button {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── In-flight display (rendered by renderContinuumInflightDisplay) ────── */
#continuum-inflight-display,
#compose-resume-banner {
    font-family: var(--cs-font-body);
    letter-spacing: 0.04em;
}

/* ─── Seedance Library ───────────────────────────────────────────────────── */
.cs-library,
#continuum-manual-flow {
    font-family: var(--cs-font-body);
}
.cs-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cs-gold-hair);
}
.cs-library-eyebrow {
    font-family: var(--cs-font-display);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--cs-gold-dim);
    font-weight: 700;
    text-transform: uppercase;
}
.cs-library-title {
    font-family: var(--cs-font-display);
    font-weight: 700;
    color: var(--cs-text);
    margin: 4px 0 0;
    font-size: 18px;
    letter-spacing: 0.06em;
}
.cs-library-controls,
.cs-library-detail-controls {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.cs-library-detail-controls {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cs-library-input {
    background: var(--cs-ink) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    color: var(--cs-text) !important;
    font-family: var(--cs-font-body) !important;
    font-size: 13px !important;
    letter-spacing: 0.06em;
    padding: 10px 12px !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    outline: none;
}
.cs-library-input:focus {
    border-color: var(--cs-gold) !important;
    box-shadow: 0 0 0 1px var(--cs-gold);
}

.cs-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Manila-folder card with a notched corner + scanline */
.cs-folder {
    --cs-folder-accent: var(--cs-gold);
    position: relative;
    background: linear-gradient(135deg, var(--cs-ink-2), var(--cs-ink-3));
    border: 1px solid var(--cs-gold-hair);
    border-top: 0;
    border-radius: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--cs-text);
    font-family: var(--cs-font-body);
    transition: transform 140ms ease, border-color 160ms ease, box-shadow 160ms ease;
    overflow: hidden;
    clip-path: polygon(0 14px, 14px 0, 60% 0, calc(60% + 18px) 14px, 100% 14px, 100% 100%, 0 100%);
}
.cs-folder:hover {
    transform: translateY(-3px);
    border-color: var(--cs-folder-accent);
    box-shadow: 0 18px 42px -18px var(--cs-folder-accent);
}
.cs-folder-tab {
    height: 6px;
    background: linear-gradient(90deg, var(--cs-folder-accent), transparent 70%);
}
.cs-folder-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.cs-folder-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 215, 0, 0.018) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
.cs-folder-eyebrow {
    font-family: var(--cs-font-display);
    font-size: 9px;
    letter-spacing: 0.34em;
    color: var(--cs-folder-accent);
    font-weight: 700;
    text-transform: uppercase;
}
.cs-folder-title {
    font-family: var(--cs-font-display);
    font-size: 14px;
    color: var(--cs-text);
    line-height: 1.35;
    letter-spacing: 0.04em;
    font-weight: 600;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-folder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cs-folder-pill {
    font-family: var(--cs-font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--cs-text-dim);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cs-folder-pill-gold { background: var(--cs-gold-soft); color: var(--cs-gold); border-color: var(--cs-gold-hair); }
.cs-folder-pill-good { background: rgba(78, 205, 196, 0.12); color: var(--cs-good); border-color: rgba(78, 205, 196, 0.3); }
.cs-folder-pill-warn { background: rgba(255, 215, 0, 0.1);  color: var(--cs-warn); border-color: var(--cs-gold-hair); }
.cs-folder-pill-bad  { background: rgba(255, 107, 107, 0.12); color: var(--cs-bad); border-color: rgba(255, 107, 107, 0.3); }

.cs-folder-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--cs-text-dim);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--cs-font-display);
}

/* ─── Project drill-in ───────────────────────────────────────────────────── */
.cs-library-detail {
    background: linear-gradient(135deg, var(--cs-ink), var(--cs-ink-3));
    border: 1px solid var(--cs-gold-hair);
    padding: 22px;
    margin-top: 8px;
    clip-path: polygon(var(--cs-notch) 0, 100% 0, 100% calc(100% - var(--cs-notch)), calc(100% - var(--cs-notch)) 100%, 0 100%, 0 var(--cs-notch));
    position: relative;
}
.cs-library-detail-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cs-gold-hair);
}
.cs-library-detail-meta { display: flex; flex-direction: column; gap: 4px; }
.cs-library-detail-title {
    font-family: var(--cs-font-display);
    color: var(--cs-text);
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.05em;
}
.cs-library-back {
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    border-color: var(--cs-gold-hair) !important;
    color: var(--cs-gold) !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ─── Cyberlux confirm modal (deletes, wipes, critical actions) ────────── */
.cx-confirm-backdrop {
    position: fixed; inset: 0; z-index: 99999;
    background: radial-gradient(ellipse at center, rgba(8,8,14,0.86), rgba(0,0,0,0.94));
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: cxConfirmFadeIn 180ms ease-out;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cx-confirm-backdrop::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,215,0,0.04) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen; opacity: 0.55;
}
@keyframes cxConfirmFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes cxConfirmRise { from { opacity: 0; transform: translateY(14px) scale(0.985) } to { opacity: 1; transform: translateY(0) scale(1) } }

.cx-confirm-panel {
    position: relative;
    width: min(560px, 100%);
    background: linear-gradient(135deg, var(--cs-ink-2, #0c0c14), var(--cs-ink-3, #0a0a12));
    border: 1px solid var(--cs-gold-hair, rgba(255,215,0,0.32));
    color: var(--cs-text, #f3f1e8);
    font-family: var(--cs-font-body, 'Rajdhani', sans-serif);
    clip-path: polygon(var(--cs-notch, 14px) 0, 100% 0, 100% calc(100% - var(--cs-notch, 14px)), calc(100% - var(--cs-notch, 14px)) 100%, 0 100%, 0 var(--cs-notch, 14px));
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,215,0,0.08);
    animation: cxConfirmRise 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cx-confirm-panel.cx-danger { box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,90,90,0.18), 0 0 60px -20px rgba(255,90,90,0.35); border-color: rgba(255,120,120,0.45); }
.cx-confirm-panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,215,0,0.022) 0 1px, transparent 1px 3px);
}
.cx-confirm-tab {
    height: 6px;
    background: linear-gradient(90deg, var(--cs-gold, #ffd700), transparent 70%);
}
.cx-danger .cx-confirm-tab {
    background: linear-gradient(90deg, #ff5e5e, #ff9f4a 55%, transparent 88%);
}
.cx-confirm-body { padding: 22px 26px 22px; position: relative; }
.cx-confirm-eyebrow {
    font-family: var(--cs-font-display, 'Orbitron', sans-serif);
    font-size: 10px; letter-spacing: 0.36em; font-weight: 700;
    color: var(--cs-gold, #ffd700);
    text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.cx-danger .cx-confirm-eyebrow { color: #ff8a8a; }
.cx-confirm-eyebrow::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cs-gold, #ffd700);
    box-shadow: 0 0 10px var(--cs-gold, #ffd700);
    animation: cxConfirmPulse 1.4s ease-in-out infinite;
}
.cx-danger .cx-confirm-eyebrow::before { background: #ff6e6e; box-shadow: 0 0 12px #ff6e6e; }
@keyframes cxConfirmPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
.cx-confirm-title {
    font-family: var(--cs-font-display, 'Orbitron', sans-serif);
    font-size: 22px; line-height: 1.2; letter-spacing: 0.04em;
    color: var(--cs-text, #f3f1e8);
    margin: 0 0 10px;
}
.cx-confirm-subtitle {
    font-size: 14px; line-height: 1.55;
    color: var(--cs-text-dim, #c8c4b3);
    margin: 0 0 18px;
    letter-spacing: 0.02em;
}
.cx-confirm-target {
    display: block; padding: 10px 12px; margin: 0 0 18px;
    border-left: 3px solid var(--cs-gold, #ffd700);
    background: rgba(255,215,0,0.04);
    font-family: var(--cs-font-display, 'Orbitron', sans-serif);
    font-size: 12px; letter-spacing: 0.06em;
    color: var(--cs-text, #f3f1e8);
    word-break: break-word;
}
.cx-danger .cx-confirm-target { border-left-color: #ff6e6e; background: rgba(255,90,90,0.05); }
.cx-confirm-review {
    border: 1px solid var(--cs-gold-hair, rgba(255,215,0,0.22));
    padding: 14px 14px 12px;
    margin: 0 0 18px;
    background: rgba(0,0,0,0.32);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cx-confirm-review-head {
    font-family: var(--cs-font-display, 'Orbitron', sans-serif);
    font-size: 9px; letter-spacing: 0.32em; font-weight: 700;
    color: var(--cs-gold, #ffd700); text-transform: uppercase;
    margin-bottom: 8px;
}
.cx-danger .cx-confirm-review-head { color: #ffb37a; }
.cx-confirm-review-list { list-style: none; margin: 0; padding: 0; }
.cx-confirm-review-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 0; font-size: 13px; line-height: 1.4;
    color: var(--cs-text, #f3f1e8); letter-spacing: 0.01em;
}
.cx-confirm-review-list li .cx-icon {
    flex: 0 0 16px; font-family: var(--cs-font-display, 'Orbitron', sans-serif);
    font-weight: 700; font-size: 13px; line-height: 1.4;
}
.cx-confirm-review-list li.cx-loss .cx-icon { color: #ff6e6e; }
.cx-confirm-review-list li.cx-keep .cx-icon { color: #4ECDC4; }
.cx-confirm-review-list li.cx-warn .cx-icon { color: #ff9f4a; }
.cx-confirm-ack {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; margin: 0 0 18px;
    background: rgba(255,90,90,0.06);
    border: 1px dashed rgba(255,120,120,0.35);
    cursor: pointer; user-select: none;
    font-size: 13px; line-height: 1.4; color: var(--cs-text, #f3f1e8);
    letter-spacing: 0.02em;
}
.cx-confirm-ack input { margin-top: 2px; accent-color: #ff6e6e; cursor: pointer; }
.cx-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.cx-btn {
    font-family: var(--cs-font-display, 'Orbitron', sans-serif);
    font-size: 12px; letter-spacing: 0.18em; font-weight: 700;
    padding: 11px 18px; cursor: pointer;
    background: transparent; color: var(--cs-text, #f3f1e8);
    border: 1px solid var(--cs-gold-hair, rgba(255,215,0,0.32));
    text-transform: uppercase;
    transition: all 140ms ease;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cx-btn:hover { border-color: var(--cs-gold, #ffd700); color: var(--cs-gold, #ffd700); }
.cx-btn-cancel { /* default ghost */ }
.cx-btn-confirm {
    background: var(--cs-gold, #ffd700); color: #0a0a0a; border-color: var(--cs-gold, #ffd700);
}
.cx-btn-confirm:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(255,215,0,0.4); }
.cx-danger .cx-btn-confirm {
    background: linear-gradient(135deg, #ff5e5e, #ff8a8a);
    color: #1a0a0a; border-color: #ff6e6e;
}
.cx-danger .cx-btn-confirm:hover { box-shadow: 0 0 22px rgba(255,90,90,0.55); }
.cx-btn-confirm[disabled] {
    opacity: 0.4; cursor: not-allowed;
    background: rgba(120,120,120,0.18); color: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.12); box-shadow: none; filter: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Submission queue (Task #405)
 * Themed surfaces + mobile-responsive layout for the Continuum
 * Submission queue admin page. Replaces the legacy rounded "tile" look
 * (border-radius:8px, soft cards) with the cyberlux notched/sharp
 * tokens already used elsewhere in the Continuum admin, and collapses
 * the hardcoded two-column layout into a single stacked column at
 * mobile widths with a back-to-list affordance + tap-friendly reorder
 * buttons so the queue stays usable on a phone.
 * ───────────────────────────────────────────────────────────────────── */
.cs-queue-page {
    font-family: var(--cs-font-body);
    color: var(--cs-text);
}
.cs-queue-page * { box-sizing: border-box; }

/* Filter chip strip — notched, sharp, gold-on-void. */
.cs-queue-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    align-items: center;
}
.cs-queue-page .filter-btn,
.cs-queue-filters .admin-btn {
    background: linear-gradient(135deg, var(--cs-ink-3), var(--cs-ink-2));
    color: var(--cs-gold);
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    font-family: var(--cs-font-display);
    font-size: 0.78em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 9px 16px;
    min-height: 40px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 160ms ease;
}
.cs-queue-page .filter-btn:hover,
.cs-queue-filters .admin-btn:hover {
    border-color: var(--cs-gold);
    color: var(--cs-gold);
    box-shadow: var(--cs-glow-soft);
}
.cs-queue-page .filter-btn.active {
    background: linear-gradient(135deg, var(--cs-gold), var(--cs-gold-dim));
    color: #0a0a0a;
    border-color: var(--cs-gold);
    box-shadow: var(--cs-glow-soft);
}

/* Stat tiles — notched, gold eyebrow. */
.cs-queue-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cs-queue-stat {
    flex: 1 1 180px;
    min-width: 160px;
    background: linear-gradient(135deg, var(--cs-ink-2), var(--cs-ink-3));
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    padding: 12px 14px;
    position: relative;
}
.cs-queue-stat::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 215, 0, 0.022) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
.cs-queue-stat-label {
    font-family: var(--cs-font-display);
    color: var(--cs-gold-dim);
    font-size: 0.7em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}
.cs-queue-stat-value {
    color: var(--cs-gold);
    font-family: var(--cs-font-display);
    font-size: 1.35em;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.04em;
    line-height: 1.1;
    word-break: break-word;
}
.cs-queue-stat-sub {
    color: var(--cs-text-dim);
    font-size: 0.82em;
    margin-top: 4px;
    letter-spacing: 0.04em;
}

/* Two-column layout (collapses to single column on mobile). */
.cs-queue-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 2fr);
    gap: 16px;
}
.cs-queue-list-pane,
.cs-queue-detail-pane {
    background: linear-gradient(135deg, var(--cs-ink-2), var(--cs-ink-3));
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    clip-path: polygon(var(--cs-notch) 0, 100% 0, 100% calc(100% - var(--cs-notch)), calc(100% - var(--cs-notch)) 100%, 0 100%, 0 var(--cs-notch));
    max-height: 75vh;
    overflow-y: auto;
}
.cs-queue-list-pane {
    display: flex;
    flex-direction: column;
}
.cs-queue-detail-pane {
    padding: 18px;
}
.cs-queue-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--cs-text-dim);
    font-family: var(--cs-font-body);
    letter-spacing: 0.04em;
}

/* Queue rows — sharp, notched left edge accent on selected. */
.cs-queue-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cs-gold-hair);
    cursor: pointer;
    color: var(--cs-text);
    transition: background 140ms ease;
    min-height: 56px;
}
.cs-queue-row:hover {
    background: rgba(255, 215, 0, 0.04);
}
.cs-queue-row.cs-queue-row-selected {
    background: var(--cs-gold-soft);
    border-left: 3px solid var(--cs-gold);
}
.cs-queue-row-session {
    background: rgba(90, 176, 255, 0.05);
    border-left: 3px solid var(--cs-signal);
}
.cs-queue-row-session:hover {
    background: rgba(90, 176, 255, 0.1);
}
.cs-queue-row-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}
.cs-queue-row-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.cs-queue-row-handle {
    color: var(--cs-gold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--cs-font-display);
    letter-spacing: 0.04em;
    font-weight: 600;
}
.cs-queue-row-id {
    font-size: 0.78em;
    color: var(--cs-text-dim);
    flex-shrink: 0;
    font-family: var(--cs-font-display);
    letter-spacing: 0.08em;
}
.cs-queue-row-session-tag {
    color: var(--cs-signal);
    font-family: var(--cs-font-display);
    font-size: 0.66em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid rgba(90, 176, 255, 0.3);
    background: rgba(90, 176, 255, 0.08);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.cs-queue-row-title {
    color: var(--cs-text);
    font-weight: 600;
    font-size: 0.95em;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-queue-row-meta {
    color: var(--cs-text-dim);
    font-size: 0.86em;
    margin-top: 4px;
    letter-spacing: 0.03em;
}
.cs-queue-row-snippet {
    color: var(--cs-text-mute, rgba(244,244,255,0.42));
    font-size: 0.8em;
    margin-top: 2px;
}
.cs-queue-handle {
    cursor: grab;
    color: var(--cs-gold);
    font-size: 0.8em;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border: 1px solid var(--cs-gold-hair);
    background: var(--cs-gold-soft);
    user-select: none;
    font-family: var(--cs-font-display);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    flex-shrink: 0;
}

/* Mobile up/down reorder buttons — only visible on small screens. */
.cs-queue-row-reorder {
    display: none;
    gap: 6px;
    margin-top: 8px;
}
.cs-queue-reorder-btn {
    flex: 1;
    background: var(--cs-gold-soft);
    border: 1px solid var(--cs-gold-hair);
    color: var(--cs-gold);
    font-family: var(--cs-font-display);
    font-size: 0.74em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 8px;
    min-height: 44px;
    cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: background 140ms ease, border-color 140ms ease;
}
.cs-queue-reorder-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.18);
    border-color: var(--cs-gold);
}
.cs-queue-reorder-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Detail panel content — eyebrow header, themed cards. */
.cs-queue-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--cs-gold-soft);
    border: 1px solid var(--cs-gold-hair);
    color: var(--cs-gold);
    font-family: var(--cs-font-display);
    font-size: 0.78em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 14px;
    min-height: 44px;
    cursor: pointer;
    margin-bottom: 12px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cs-queue-back-btn:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: var(--cs-gold);
}
.cs-queue-detail-title {
    margin: 0 0 8px;
    color: var(--cs-gold);
    font-family: var(--cs-font-display);
    letter-spacing: 0.04em;
    font-size: 1.1em;
    word-break: break-word;
}
.cs-queue-detail-meta {
    color: var(--cs-text-dim);
    font-size: 0.9em;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}
.cs-queue-card {
    background: var(--cs-ink);
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    padding: 14px;
    margin-bottom: 12px;
}
.cs-queue-card-eyebrow {
    color: var(--cs-gold);
    font-family: var(--cs-font-display);
    font-size: 0.72em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}
.cs-queue-card-eyebrow.signal     { color: var(--cs-signal); }
.cs-queue-card-eyebrow.architect  { color: var(--cs-architect); }
.cs-queue-card-eyebrow.continuum  { color: var(--cs-continuum); }
.cs-queue-card-eyebrow.danger     { color: #ff9090; }
.cs-queue-card-eyebrow.good       { color: #7ed8a3; }
.cs-queue-card-body {
    color: var(--cs-text);
    white-space: pre-wrap;
    margin-top: 6px;
    line-height: 1.5;
    word-break: break-word;
}
.cs-queue-card-body-dim {
    color: var(--cs-text-dim);
    font-size: 0.92em;
}
.cs-queue-card.danger {
    border-color: #c63a3a;
    background: rgba(198, 58, 58, 0.06);
}
.cs-queue-card.good {
    border-color: #46a06b;
    background: rgba(70, 160, 107, 0.08);
}

/* Action buttons row inside detail. */
.cs-queue-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cs-queue-action-btn {
    background: linear-gradient(135deg, var(--cs-ink-3), var(--cs-ink-2));
    border: 1px solid var(--cs-gold-hair);
    color: var(--cs-gold);
    font-family: var(--cs-font-display);
    font-size: 0.8em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 11px 18px;
    min-height: 44px;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.cs-queue-action-btn:hover:not(:disabled) {
    border-color: var(--cs-gold);
    box-shadow: var(--cs-glow-soft);
}
.cs-queue-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cs-queue-action-btn.primary {
    background: linear-gradient(135deg, var(--cs-gold), var(--cs-gold-dim));
    color: #0a0a0a;
    border-color: var(--cs-gold);
}
.cs-queue-action-btn.signal {
    background: linear-gradient(135deg, rgba(90,176,255,0.85), rgba(90,176,255,0.55));
    color: #06121f;
    border-color: var(--cs-signal);
}
.cs-queue-action-btn.danger {
    background: linear-gradient(135deg, #ff5b5b, #c63a3a);
    color: #fff;
    border-color: #c63a3a;
}

/* Deny panel. */
.cs-queue-deny-panel {
    background: rgba(198, 58, 58, 0.06);
    border: 1px solid #c63a3a;
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    padding: 14px;
    margin-top: 12px;
}
.cs-queue-deny-textarea {
    width: 100%;
    min-height: 80px;
    background: var(--cs-ink);
    color: var(--cs-text);
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    padding: 10px 12px;
    margin-top: 8px;
    font-family: var(--cs-font-body);
    font-size: 0.96em;
    resize: vertical;
}
.cs-queue-deny-textarea:focus {
    outline: none;
    border-color: var(--cs-gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.18);
}
.cs-queue-deny-step2 { margin-top: 14px; }
.cs-queue-deny-help {
    color: var(--cs-text-dim);
    font-size: 0.9em;
    margin-top: 8px;
    line-height: 1.5;
}

/* ─── Mobile (≤640px): stack into single column with toggle. ───────── */
@media (max-width: 640px) {
    .cs-queue-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cs-queue-list-pane,
    .cs-queue-detail-pane {
        max-height: none;
    }
    .cs-queue-detail-pane {
        padding: 14px;
    }
    /* When a submission is selected on mobile, swap views: hide list,
       show detail. The back button then returns to the list. */
    .cs-queue-page.has-selected .cs-queue-list-pane { display: none; }
    .cs-queue-page:not(.has-selected) .cs-queue-detail-pane { display: none; }
    .cs-queue-page.has-selected .cs-queue-back-btn { display: inline-flex; }

    /* Drag handles can't be used on touch; show tap-to-reorder buttons
       instead so admins can still order pending submissions on a phone. */
    .cs-queue-row[draggable="true"] { cursor: pointer; }
    .cs-queue-row .cs-queue-handle { cursor: default; }
    .cs-queue-row-reorder { display: flex; }

    .cs-queue-stats { gap: 8px; }
    .cs-queue-stat { flex: 1 1 100%; min-width: 0; }
    .cs-queue-filters {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: wrap;
    }
    .cs-queue-page .filter-btn,
    .cs-queue-filters .admin-btn {
        font-size: 0.72em;
        padding: 9px 12px;
        letter-spacing: 0.12em;
    }
    .cs-queue-row { padding: 14px 14px; }
    .cs-queue-row-handle { font-size: 0.98em; }
    .cs-queue-detail-title { font-size: 1em; }
    .cs-queue-actions { flex-direction: column; }
    .cs-queue-action-btn { width: 100%; }
}

/* ─── Cyberlux overrides for the rest of #seedance-generator-tab ───────────
 * Scoped under #seedance-generator-tab so they only apply to the Continuum
 * admin tab (Compose / Generate / Extend / Edit / Entities) and don't leak
 * into other admin tabs. Higher-specificity #id rules above (chooser,
 * loading shim, library detail, queue) still win where applicable.
 * ────────────────────────────────────────────────────────────────────────── */

#seedance-generator-tab {
    font-family: var(--cs-font-body);
    color: var(--cs-text);
}

/* Tab header — give the eyebrow + subtitle the cyberlux display font */
#seedance-generator-tab > .admin-tab-body > h3 {
    font-family: var(--cs-font-display);
    color: var(--cs-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
#seedance-generator-tab > .admin-tab-body > .section-subtitle,
#seedance-generator-tab > .admin-tab-body > p.section-subtitle {
    font-family: var(--cs-font-body);
    color: var(--cs-text-dim);
    letter-spacing: 0.06em;
}

/* Subtab nav — bring the Compose/Generate/Extend/Edit/Entities buttons in
   line with the Orbitron eyebrow used elsewhere. Underline already gold. */
#seedance-generator-tab .seedance-subtab {
    font-family: var(--cs-font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.78em;
    color: var(--cs-text-dim);
}
#seedance-generator-tab .seedance-subtab:hover { color: var(--cs-gold); }
#seedance-generator-tab .seedance-subtab.active {
    color: var(--cs-gold);
    border-bottom-color: var(--cs-gold);
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}

/* Generic notched panel — replace the legacy rounded .admin-card tile.
   Higher-specificity overrides on #continuum-starter-chooser /
   #continuum-starter-loading still win because they use !important. */
#seedance-generator-tab .admin-card {
    background: linear-gradient(135deg, var(--cs-ink-2), var(--cs-ink-3));
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    clip-path: polygon(var(--cs-notch) 0, 100% 0, 100% calc(100% - var(--cs-notch)), calc(100% - var(--cs-notch)) 100%, 0 100%, 0 var(--cs-notch));
    padding: 22px;
    position: relative;
    font-family: var(--cs-font-body);
}
#seedance-generator-tab .admin-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 215, 0, 0.022) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
#seedance-generator-tab .admin-card > * { position: relative; }
#seedance-generator-tab .admin-card h4 {
    font-family: var(--cs-font-display);
    color: var(--cs-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}
#seedance-generator-tab .admin-form-label {
    font-family: var(--cs-font-display);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cs-gold-dim);
    font-weight: 700;
}
#seedance-generator-tab .admin-form-hint,
#seedance-generator-tab .admin-muted-text {
    font-family: var(--cs-font-body);
    color: var(--cs-text-dim);
    letter-spacing: 0.04em;
}

/* Inputs / textareas / selects — sharp notched fields. */
#seedance-generator-tab .admin-input-dark,
#seedance-generator-tab .admin-form-input,
#seedance-generator-tab textarea.admin-input-dark,
#seedance-generator-tab textarea.admin-form-input,
#seedance-generator-tab select.admin-input-dark,
#seedance-generator-tab select.admin-form-input,
#seedance-generator-tab input.admin-input-dark,
#seedance-generator-tab input.admin-form-input {
    background: var(--cs-ink);
    border: 1px solid var(--cs-gold-hair);
    color: var(--cs-text);
    font-family: var(--cs-font-body);
    letter-spacing: 0.04em;
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    outline: none;
}
#seedance-generator-tab .admin-input-dark:focus,
#seedance-generator-tab .admin-form-input:focus {
    border-color: var(--cs-gold);
    box-shadow: 0 0 0 1px var(--cs-gold);
}
/* Range inputs are bars, not panels — keep them flat and ungated by clip. */
#seedance-generator-tab input[type="range"].admin-input-dark,
#seedance-generator-tab input[type="range"].admin-form-input {
    clip-path: none;
    background: var(--cs-ink-3);
    border: 1px solid var(--cs-gold-hair);
}

/* Provider toggle — tighten corners + cyberlux hover/active. */
#seedance-generator-tab .seedance-provider-toggle {
    background: var(--cs-ink);
    border: 1px solid var(--cs-gold-hair);
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
#seedance-generator-tab .seedance-provider-toggle .provider-btn {
    font-family: var(--cs-font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.78em;
}
#seedance-generator-tab .seedance-provider-toggle .provider-btn.active {
    background: rgba(255, 215, 0, 0.12);
    color: var(--cs-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Compose-style chips (Cinematic / Tense / Mysterious / etc.) */
#seedance-generator-tab .compose-setting-chip {
    border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    border: 1px solid var(--cs-gold-hair);
    background: var(--cs-ink);
    color: var(--cs-text-dim);
    font-family: var(--cs-font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 10px;
    padding: 6px 12px;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
#seedance-generator-tab .compose-setting-chip:hover {
    border-color: var(--cs-gold);
    color: var(--cs-text);
}
#seedance-generator-tab .compose-setting-chip.active {
    border-color: var(--cs-gold);
    background: rgba(255, 215, 0, 0.12);
    color: var(--cs-gold);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
}
#seedance-generator-tab .compose-setting-chip-auto {
    border-color: rgba(127, 119, 221, 0.35) !important;
    color: rgba(206, 203, 246, 0.7) !important;
}
#seedance-generator-tab .compose-setting-chip-auto.active {
    border-color: rgba(127, 119, 221, 0.75) !important;
    background: rgba(127, 119, 221, 0.18) !important;
    color: #CECBF6 !important;
    box-shadow: 0 0 0 1px rgba(127, 119, 221, 0.45) !important;
}

/* admin-btn buttons — sharp + notched. Inline border/background rules in
   admin.html still win for the colored starter buttons (script/song/manual).
   This handles plain ◀ Back, ↻ Refresh, etc. */
#seedance-generator-tab button.admin-btn {
    border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    font-family: var(--cs-font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Dropzones (entity source upload, entity ref upload) — soften the legacy
   rounded dashed boxes in the Entities subtab to match the rest. */
#seedance-generator-tab #char-source-dropzone,
#seedance-generator-tab #entity-ref-dropzone,
#seedance-generator-tab #entity-studio-results,
#seedance-generator-tab #entity-variant-picker,
#seedance-generator-tab #entity-studio,
#seedance-generator-tab #continuum-recent-strip {
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Generic in-flight banners not already targeted by name. */
#seedance-generator-tab [id$="-banner"],
#seedance-generator-tab .compose-resume-banner,
#seedance-generator-tab .composer-banner {
    font-family: var(--cs-font-body);
    letter-spacing: 0.04em;
    border-radius: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Task #417 — Cold-start wizards (script + song)
 * The outer .admin-card surfaces of #seedance-subtab-cold-start and
 * #seedance-subtab-cold-start-song already inherit cyberlux styling from
 * #seedance-generator-tab .admin-card. These rules clean up the *inner*
 * chrome inside each wizard step (pacing panels, count inputs, the
 * gen-card panel, lyrics blocks, and the inline-styled STEP eyebrows)
 * so nothing inside the wizards reads as legacy rounded tile chrome.
 * ───────────────────────────────────────────────────────────────────── */

/* STEP NN eyebrows + section labels — Orbitron, gold-spaced. */
#seedance-subtab-cold-start [id^="cs-step-"] > div:first-child > span:first-child,
#seedance-subtab-cold-start-song [id^="css-step-"] > div:first-child > span:first-child {
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.32em !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}
#seedance-subtab-cold-start [id^="cs-step-"] > div:first-child > span:last-child,
#seedance-subtab-cold-start-song [id^="css-step-"] > div:first-child > span:last-child {
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.06em !important;
    color: var(--cs-text) !important;
    font-weight: 700 !important;
}

/* Inner panels with leftover rounded chrome — flatten + notch. */
#seedance-subtab-cold-start #cs-review-pacing,
#seedance-subtab-cold-start #cs-gen-card,
#seedance-subtab-cold-start #cs-gen-image-wrap,
#seedance-subtab-cold-start-song #css-lyrics-generated,
#seedance-subtab-cold-start-song #css-lyrics-diff-body {
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background: linear-gradient(135deg, var(--cs-ink-2), var(--cs-ink-3)) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    font-family: var(--cs-font-body) !important;
}
#seedance-subtab-cold-start #cs-gen-image-wrap {
    background: var(--cs-ink) !important;
}

/* "Generate first" count inputs — sharp, gold-hair border. */
#seedance-subtab-cold-start #cs-count-characters,
#seedance-subtab-cold-start #cs-count-locations {
    border-radius: 0 !important;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    background: var(--cs-ink) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    color: var(--cs-text) !important;
    font-family: var(--cs-font-body) !important;
}
#seedance-subtab-cold-start #cs-count-characters:focus,
#seedance-subtab-cold-start #cs-count-locations:focus {
    border-color: var(--cs-gold) !important;
    outline: none;
    box-shadow: 0 0 0 1px var(--cs-gold);
}

/* Audio players — sharpen the rounded native chrome edges. */
#seedance-subtab-cold-start-song #css-audio-preview,
#seedance-subtab-cold-start-song #css-markers-audio {
    border-radius: 0 !important;
    background: var(--cs-ink-2);
    border: 1px solid var(--cs-gold-hair);
}

/* Defensive sweep — any remaining inline rounded children inside the
   wizards (chip rows, marker rows rendered by JS) read as flat. */
#seedance-subtab-cold-start [style*="border-radius"],
#seedance-subtab-cold-start-song [style*="border-radius"] {
    border-radius: 0 !important;
}

/* Mobile-friendly: collapse the gen-card grid so it stacks on narrow widths. */
@media (max-width: 640px) {
    #seedance-subtab-cold-start #cs-gen-card {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
    #seedance-subtab-cold-start #cs-gen-image-wrap {
        min-height: 200px !important;
    }
}

/* ─── Mobile (≤640px) — keep the Continuum tab functional on phones ─── */
@media (max-width: 640px) {
    #seedance-generator-tab .admin-card {
        padding: 16px 14px;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
    #seedance-generator-tab .seedance-subtab {
        padding: 10px 12px;
        font-size: 0.72em;
        letter-spacing: 0.12em;
    }
    #seedance-generator-tab .compose-setting-chip {
        font-size: 9px;
        padding: 5px 10px;
        letter-spacing: 0.1em;
    }
    #seedance-generator-tab .seedance-provider-toggle .provider-btn {
        font-size: 0.7em;
        padding: 7px 10px;
        letter-spacing: 0.1em;
    }
    /* Storyboard report header stacks instead of stretching off-screen */
    #seedance-generator-tab #storyboard-decision-report-card > div:first-child {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Task #503 — Post-submit production session panel under glass
 *
 * The wrapper around #continuum-session-thread sat in flat dark-tile
 * chrome that did not match the Sender Cockpit directly above it. This
 * block restyles the wrapper, header, message cards, and the mirrored
 * "Summarized thoughts — processing banter" card so they all read as one
 * continuous cyberlux surface (notched bezel, soft scanline + grid
 * texture, animated diagonal glare above the glass but below text, gold
 * border + glow). Per-persona accent colors and unread / pulse-highlight
 * states are preserved.
 * ───────────────────────────────────────────────────────────────────── */
/* Bezel + scanline + glare + reduced-motion fallback now live in the
   shared selector group at the top of this file (Task #510). The
   per-class block below keeps only what's specific to the production
   session panel: the inner padding it needs to wrap its header +
   thread cleanly. */
.continuum-session-glass {
    padding: 6px;
}
/* Header bar — monitor-eyebrow look matching the cockpit above. */
.continuum-session-glass .continuum-session-thread-head {
    background:
        radial-gradient(ellipse 140% 100% at 50% 110%, rgba(255, 215, 0, 0.04), transparent 70%),
        linear-gradient(180deg, #07070d 0%, #0a0a14 100%);
    border-bottom: 1px solid var(--cs-gold-hair);
    padding: 10px 14px;
}
.continuum-session-glass .continuum-session-thread-head > div:first-child > span:first-child {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-gold) !important;
    letter-spacing: 0.32em !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
/* Inner thread — dark glass interior, generous padding. */
.continuum-session-glass .continuum-session-thread {
    background:
        radial-gradient(ellipse 140% 100% at 50% 110%, rgba(255, 215, 0, 0.03), transparent 70%),
        linear-gradient(180deg, #07070d 0%, #0a0a14 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
    padding: 12px 14px;
}

/* Per-message cards — sit cleanly inside the glass without losing the
   per-persona accent border or the unread / pulse-highlight states. */
.continuum-session-glass .continuum-msg-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.32)) !important;
    border: 1px solid rgba(255, 215, 0, 0.10) !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    padding: 11px 14px;
}
/* Unread first so the per-sender left accent below wins over the gold
   border-color shorthand (preserves original behavior from admin-panel.css). */
.continuum-session-glass .continuum-msg-card.unread {
    border-color: rgba(255, 215, 0, 0.55) !important;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.06), rgba(0, 0, 0, 0.34)) !important;
}
.continuum-session-glass .continuum-msg-card[data-sender="signal"]    { border-left: 3px solid #5ab0ff !important; }
.continuum-session-glass .continuum-msg-card[data-sender="architect"] { border-left: 3px solid #ba7517 !important; }
.continuum-session-glass .continuum-msg-card[data-sender="continuum"] { border-left: 3px solid #c88cff !important; }
.continuum-session-glass .continuum-msg-card .continuum-msg-text {
    color: #e8e0c8;
    font-family: var(--cs-font-body);
}
.continuum-session-glass .continuum-msg-card .continuum-msg-sender-label {
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.22em;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* "Summarized thoughts — processing banter" card (mirrored from the
   Continuum dialogue endpoint into #convo-thread). Restyled so it reads
   as part of the same under-glass surface as the message cards above
   instead of a flat purple-bordered tile floating on a plain dark pane.
   We keep the violet persona tint as a subtle inner glow and on the
   left accent strip so producers can still tell at a glance these are
   overheard banter, not direct narrative addressed to them. */
#convo-thread .convo-msg-thought .convo-thought-wrap {
    position: relative;
    background:
        radial-gradient(ellipse 140% 100% at 50% 110%, rgba(180, 130, 255, 0.05), transparent 70%),
        linear-gradient(180deg, #07070d 0%, #0a0a14 100%) !important;
    border: 1px solid var(--cs-gold-hair) !important;
    border-left: 3px solid rgba(180, 130, 255, 0.55) !important;
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(140, 90, 255, 0.10) !important;
    padding: 12px 14px 14px;
}
/* Replace the cosmic-drift radial wash with the same scanline texture
   used on the panel above, so the banter card visually belongs to the
   same monitor surface. The diagonal glare strip stays a panel-level
   effect; the card itself just gets the screen grid. */
#convo-thread .convo-msg-thought .convo-thought-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 215, 0, 0.028) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 215, 0, 0.014) 24px 25px);
    animation: none !important;
    opacity: 0.85;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}
#convo-thread .convo-msg-thought .convo-thought-wrap > * {
    position: relative;
    z-index: 2;
}
#convo-thread .convo-msg-thought .convo-thought-label {
    font-family: var(--cs-font-display) !important;
    letter-spacing: 0.32em !important;
    color: var(--cs-gold) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
    margin-bottom: 8px;
}
#convo-thread .convo-msg-thought .convo-thought-label::before {
    color: var(--cs-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
#convo-thread .convo-msg-thought .convo-thought-turn {
    color: #e8e0c8;
    border-left: 1px solid rgba(255, 215, 0, 0.22);
    font-family: var(--cs-font-body);
}

/* ─── Task #541 — per-turn "Voice synthesizing…" pill ────────────────────
 * Mirrors the pending-state pattern from submission-flow.css's
 * `.cs-dialog-audio-pending` so producers recognize it as the same
 * "voice is on its way" affordance they already see on PUB submission
 * cards. Kept faint and inline so it doesn't dominate the turn text;
 * pulses gently so it reads as live rather than stuck. Clears via
 * convoMirrorDialogueMessages once `audio_generated` flips true (or
 * the sender is muted / switched to text). */
#convo-thread .convo-msg-thought .convo-thought-turn-pending {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px dashed rgba(255, 215, 0, 0.30);
    border-left: 2px solid rgba(255, 210, 51, 0.65);
    background: rgba(0, 0, 0, 0.30);
    color: rgba(255, 215, 0, 0.65);
    font-family: var(--cs-font-display);
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: 2px;
    vertical-align: middle;
    animation: convoThoughtPendingPulse 1.6s ease-in-out infinite;
}
@keyframes convoThoughtPendingPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
    #convo-thread .convo-msg-thought .convo-thought-turn-pending {
        animation: none;
        opacity: 0.75;
    }
}

/* ─── Task #507 — Architect Live Session under-glass treatment ──────────
 *
 * The Architect Live Session chat (#architect-chat-wrap) sat between the
 * Sender Cockpit and the post-submit production session panel in older
 * flat dark-tile chrome (gold-tinted thin border, rounded corners, no
 * scanline / glare). Task #503 brought the production session panel
 * (.continuum-session-glass) under the cyberlux glass treatment, which
 * left this chat panel reading as the odd one out when the producer
 * scans the column top-to-bottom. This block mirrors that same surface
 * — notched bezel, soft scanline + grid texture, animated diagonal
 * glare above the glass but below text, gold border + glow — onto the
 * Architect chat wrapper, and re-eyebrows the header in Orbitron so the
 * three panels read as one continuous monitor surface. The pulse-on-
 * proposed-changes state (.architect-hint-glow from admin-panel.css) is
 * preserved as a brighter gold border + outer glow, layered over the
 * glass instead of replacing the gradient backdrop.
 * ───────────────────────────────────────────────────────────────────── */
/* Bezel + scanline + glare + reduced-motion fallback now live in the
   shared selector group at the top of this file (Task #510). The
   per-class block below keeps only the Architect chat header /
   eyebrow / hint-glow overrides specific to this surface. */
/* Header bar — monitor-eyebrow look matching the cockpit + session panel. */
.architect-chat-glass > #architect-chat-header {
    background:
        radial-gradient(ellipse 140% 100% at 50% 110%, rgba(255, 215, 0, 0.04), transparent 70%),
        linear-gradient(180deg, #07070d 0%, #0a0a14 100%);
    border-bottom: 1px solid var(--cs-gold-hair) !important;
    padding: 10px 14px !important;
}
/* "The Architect — Live Session" eyebrow — Orbitron, bright gold. */
.architect-chat-glass #architect-chat-header > div:first-child > span:not(#architect-chat-badge) {
    font-family: var(--cs-font-display) !important;
    color: var(--cs-gold) !important;
    letter-spacing: 0.32em !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
/* "Talk to The Architect while nodes render" helper — same Orbitron eyebrow,
   dimmer so it reads as a secondary subtitle, not a competing title. */
.architect-chat-glass #architect-chat-header > div:last-child > span:first-child {
    font-family: var(--cs-font-display) !important;
    color: rgba(255, 215, 0, 0.55) !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    font-size: 9px !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.15);
}
/* Chat thread interior — dark glass to match the production session thread. */
.architect-chat-glass #architect-chat-thread {
    background:
        radial-gradient(ellipse 140% 100% at 50% 110%, rgba(255, 215, 0, 0.03), transparent 70%),
        linear-gradient(180deg, #07070d 0%, #0a0a14 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
}
/* Preserve the pulse-on-proposed-changes hint state from admin-panel.css.
   Re-asserted here because our gold-hair border + gradient background use
   !important and would otherwise out-rank the original .architect-hint-glow
   declarations from earlier in the cascade. */
#architect-chat-wrap.architect-chat-glass.architect-hint-glow {
    border-color: rgba(255, 215, 0, 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.10) inset,
        0 0 22px rgba(255, 215, 0, 0.22),
        0 18px 60px -28px rgba(255, 215, 0, 0.30) !important;
}