/* ── Workspace CSS — M3 visual pass + color audit (2026-05-24) ──
   Every decision below cites a screenshot in _design/notes.md.
   2026-05-24 color audit: indigo (#5B5FC7) removed entirely — MiniMax is
   fully monochrome (black/gray/white). Hover/selected = light gray fill.
   Do not edit colors / radii / spacing without updating notes.md. */

:root {
    /* Surfaces */
    --ws-surface-app:    #FFFFFF;
    --ws-surface-pane:   #F7F7F8;
    --ws-surface-subtle: #FAFAFB;

    /* Hover / selected — single shared token (MiniMax pattern: same fill for both states) */
    --ws-hover-fill:     #F0F1F3;

    /* Borders */
    --ws-border:         #E5E7EB;
    --ws-border-strong:  #D1D5DB;

    /* Text — body register: neutral premium near-black #0A0A0A (no blue lean).
       Brand wordmark register: pure black #000 (premium "stamp" — Apple-style
       wordmark on light). Tried electric blue (#0066FF) and a blue→cyan gradient
       on 2026-05-24; both rejected by user as "低级" (too consumer/garish). The
       cyan logo carries the brand color; the wordmark stays understated by
       contrast. Used ONLY on the topbar wordmark <strong>; NOT promoted elsewhere. */
    --ws-text:           #0A0A0A;
    --ws-text-brand:     #000000;
    --ws-text-muted:     #6B7280;
    --ws-text-faint:     #9CA3AF;

    /* Active fill (send button "primed", focus visible) — match new body register */
    --ws-active-fill:    #0A0A0A;
    --ws-active-on:      #FFFFFF;

    /* Brand cyan — pulled from the favicon/logo art (neon electric cyan).
       Used ONLY in two ephemeral/identity moments:
         1. The streaming cursor (signals "AI is alive" while tokens stream).
         2. The favicon image is shown as topbar logo (carries the gradient + glow natively).
       NOT used as a general accent — that would re-create the indigo mistake. */
    --ws-brand:          #22D3EE;

    /* Radii */
    --ws-radius-container: 16px;
    --ws-radius-bubble:    14px;
    --ws-radius-card:      12px;
    --ws-radius-small:     8px;
    --ws-radius-row:       6px;
    --ws-radius-pill:      999px;

    /* Spacing scale (4px base) */
    --ws-pad-card:    16px;
    --ws-pad-inline:  12px;

    /* Type */
    --ws-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
    background: var(--ws-surface-app);
    color: var(--ws-text);
    font-family: var(--ws-font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Override Bootstrap link color so .btn-link et al stop being blue */
:root {
    --bs-link-color:                var(--ws-text);
    --bs-link-color-rgb:            10, 10, 10;
    --bs-link-hover-color:          var(--ws-text);
    --bs-link-hover-color-rgb:      10, 10, 10;
    --bs-primary:                   var(--ws-text);
    --bs-primary-rgb:               10, 10, 10;
    --bs-secondary-color:           var(--ws-text-muted);
    --bs-secondary-color-rgb:       107, 114, 128;
}

/* Primary button = dark fill (matches MiniMax active send button) */
.btn-primary {
    --bs-btn-bg: var(--ws-active-fill);
    --bs-btn-border-color: var(--ws-active-fill);
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
}

/* Focus ring: subtle dark outline, no colored halo */
:focus-visible {
    outline: 2px solid var(--ws-text);
    outline-offset: 2px;
}

/* ── Workspace skeleton ─────────────────────────────────────── */
.workspace {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--ws-surface-app);
}

.workspace-topbar {
    flex: 0 0 auto;
    background: var(--ws-surface-app);
    border-bottom: 1px solid var(--ws-border);
    /* 4px vertical padding + 36px logo → 44px total topbar height.
       Bootstrap utility classes (px-3 py-2) removed from markup so my padding
       wins cleanly without !important. Compact navbar register. */
    padding: 4px 16px;
    /* Bootstrap .navbar default has its own padding — null it out */
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;
}
.workspace-topbar .navbar-brand {
    font-weight: 600;
    font-size: 16px;
    color: var(--ws-text);
    /* Bootstrap .navbar-brand default has padding-top/bottom 0.3125rem (+10px)
       and margin-right 1rem — null all three so my topbar padding rules apply. */
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
}

/* Brand wordmark — pure black + heaviest weight for "stamp" effect.
   The only place that uses --ws-text-brand and weight 700.
   2026-05-24 iteration history (kept here so this rule doesn't get re-tried):
     - tried solid electric blue (#0066FF) → felt isolated from the cyan logo
     - tried 3-stop gradient blue → cyan → silver → silver felt muddy/dated
     - tried 2-stop gradient blue → cyan → user feedback "低级" (consumer/garish)
   Conclusion: brand color stays on the cyan logo mark; wordmark stays
   black-stamp understated. The contrast (vivid cyan mark + black stamp) is
   the premium register. */
.workspace-topbar .navbar-brand strong {
    color: var(--ws-text-brand);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.workspace-topbar .navbar-brand .brand-mark {
    /* Native favicon image carries the brand cyan + neon glow + AI badge.
       Sized 36px (iterated 24 → 32 → 40 → 36 on 2026-05-24, user landed on 36
       as the comfortable middle). AI badge readable, doesn't dominate the bar.
       With current 4px topbar padding, total topbar height = 44px (compact). */
    display: inline-block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 auto;
}
.workspace-topbar .badge {
    font-weight: 500; font-size: 12px;
    background: var(--ws-surface-pane) !important;
    color: var(--ws-text) !important;
    border: 1px solid var(--ws-border);
}

.workspace-body {
    flex: 1 1 auto;
    /* min-height: 0 lets this flex item shrink below its content size — required
       so the grid row inside doesn't push past the viewport. Without it, when
       chat-thread fills with messages the grid row grows, dragging chips +
       input bar off the bottom of the visible area (clipped by overflow hidden). */
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* minmax(0, 1fr) on row constrains row height to container, prevents
       content-driven row growth. minmax(0, ...) allows row to shrink to 0
       so chat-thread's overflow-auto can take over and scroll internally. */
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}

@media (min-width: 992px) {
    /* 4 columns: left (fixed 260) | middle (flex) | divider (4px) | right (resizable).
       Per 2026-05-24 scope narrowing: only the RIGHT pane is drag-resizable —
       the left pane is fixed nav-style content. Right width is custom-property
       driven (pane-resizer.js updates --ws-right-width live + persists). */
    .workspace-body {
        grid-template-columns:
            260px
            minmax(0, 1fr)
            4px
            var(--ws-right-width, 420px);
    }
}

.workspace-left,
.workspace-right { overflow: hidden; background: var(--ws-surface-app); }
/* Left pane: fixed 260px, needs its own right-border for visual separator
   (no divider element between left and middle anymore). */
.workspace-left  { border-right: 1px solid var(--ws-border); }
/* Right pane: visual separator is the .pane-divider element to its left;
   no own border needed (would double-stroke). */

/* ── Drag-resize dividers (desktop ≥992px only) ───────────────── */
.pane-divider { display: none; }
@media (min-width: 992px) {
    .pane-divider {
        display: block;
        cursor: col-resize;
        background: var(--ws-border);
        position: relative;
        z-index: 3;
        transition: background-color 0.12s ease;
    }
    .pane-divider:hover,
    .pane-divider:active {
        background: var(--ws-text-faint);
    }
    /* Expand pointer hit area beyond the visible 4px without affecting layout. */
    .pane-divider::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -3px;
        right: -3px;
    }
}

.workspace-middle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Same pattern as workspace-body: must allow shrink-below-content so the
       inner chat-thread (flex-grow-1) can constrain itself and scroll, instead
       of pushing chips + input bar off the bottom. */
    min-height: 0;
    overflow: hidden;
    background: var(--ws-surface-app);
}

/* ── Left context pane — MiniMax pattern: hover = light gray fill, no dividers ── */
.left-context { height: 100%; padding: 16px; }
.left-context section + section { padding-top: 20px; }    /* spacing replaces dividers */
.left-context section h6 {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ws-text-faint);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Row buttons — full-width clickable region with hover fill (matches Task History pattern) */
.left-context .btn-link {
    color: var(--ws-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: block;
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--ws-radius-row);
    transition: background-color .12s ease;
}
.left-context .btn-link:hover,
.left-context .btn-link:focus-visible {
    background: var(--ws-hover-fill);
    color: var(--ws-text);                       /* NO color shift on hover */
}
.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; }

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

/* ── Chat thread + bubbles ────────────────────────────────── */
.chat-thread { min-height: 0; padding: 24px; }
/* Browser quirk: padding-bottom on overflow:auto containers is NOT respected
   when scrolled to the bottom — content scrolls past it, last message touches
   the chips strip with no breathing room. Workaround: add a transparent
   ::after spacer that participates in scrolling, reserving the bottom gap. */
.chat-thread::after {
    content: "";
    display: block;
    height: 24px;
    flex-shrink: 0;
}

.message-row.is-user      { display: flex; justify-content: flex-end; }
.message-row.is-assistant { display: flex; justify-content: flex-start; }

.message-bubble {
    max-width: min(640px, 92%);
    padding: 12px 14px;
    border-radius: var(--ws-radius-bubble);
    background: var(--ws-surface-app);
    border: 1px solid var(--ws-border);
    word-wrap: break-word;
    box-shadow: none;
}

/* User bubble: subtle gray fill (NOT indigo) — differentiation via tone only */
.bubble-user {
    background: var(--ws-hover-fill);
    border-color: var(--ws-hover-fill);
    border-bottom-right-radius: 4px;
}
.bubble-assistant { border-bottom-left-radius: 4px; }

.message-role { color: var(--ws-text-muted); font-size: 12px; }
.message-body { color: var(--ws-text); font-size: 14px; }
.message-actions .btn { font-size: 12px; }

.streaming-placeholder { color: var(--ws-text-muted); }
.streaming-cursor {
    display: inline-block;
    margin-left: 2px;
    color: var(--ws-brand);                     /* brand cyan — only ephemeral "AI is alive" signal */
    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: 5px 12px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-surface-pane) !important;
    border-color: var(--ws-border) !important;
    color: var(--ws-text) !important;
    font-weight: 500;
    font-size: 12px;
}
.readback-chip strong { font-weight: 600; }
.readback-chip .btn-link {
    color: var(--ws-text-muted);
    padding: 0;
    display: inline;
    width: auto;
}
.readback-chip .btn-link:hover {
    background: transparent;                    /* was indigo color shift — now nothing */
    color: var(--ws-text);
}

/* ── 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); }   /* was indigo */
.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); }    /* was indigo */

/* ── Boundary badges ──────────────────────────────────────── */
.boundary-badge {
    border-radius: var(--ws-radius-small);
    border: 1px solid var(--ws-border);
    font-size: 13px;
    margin-bottom: 8px;
}
.boundary-badge.alert-warning { border-color: rgba(217, 119, 6, 0.25); }
.boundary-badge.alert-secondary { background: var(--ws-surface-pane); }

/* ── Ask-back ─────────────────────────────────────────────── */
.ask-back .btn-outline-primary {
    --bs-btn-color: var(--ws-text);
    --bs-btn-border-color: var(--ws-border-strong);
    --bs-btn-hover-bg: var(--ws-hover-fill);
    --bs-btn-hover-color: var(--ws-text);
    --bs-btn-hover-border-color: var(--ws-text);
    --bs-btn-active-bg: var(--ws-text);
    --bs-btn-active-color: var(--ws-active-on);
    border-radius: var(--ws-radius-pill);
    padding: 4px 14px;
    font-size: 13px;
}

/* ── Suggestion chips row ─────────────────────────────────── */
.suggestion-chips {
    padding: 8px 24px 4px;
    gap: 8px;
    scrollbar-width: thin;
    /* Anchor at natural height regardless of chat-thread content pressure.
       Without flex-shrink: 0, a tall chat-thread can compress this row
       (chips appear clipped/short). z-index + background = belt-and-suspenders
       so chips visually occlude anything spilling from above. */
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--ws-surface-app);
}
.suggestion-chips .btn {
    border-radius: var(--ws-radius-pill);
    border: 1px solid var(--ws-border);
    background: var(--ws-surface-app);
    color: var(--ws-text);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
}
.suggestion-chips .btn:hover {
    background: var(--ws-hover-fill);
    border-color: var(--ws-border-strong);
    color: var(--ws-text);                      /* no color shift */
}

/* ── Input bar — the MiniMax card ─────────────────────────── */
.input-bar {
    background: var(--ws-surface-app);
    padding: 8px 24px 16px;
    /* Same anchoring as .suggestion-chips: flex-shrink: 0 + z-index so
       this stays at full natural height and visually occludes any chat
       content that might extend behind it. */
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    /* (Bootstrap utilities px-3 py-2 border-top removed from markup — my
       padding is now source of truth; no top border, the input-group's own
       border provides the visual separation.) */
}
.input-bar .input-group {
    background: var(--ws-surface-app);
    border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-container);
    padding: 8px 8px 8px 16px;
    align-items: end;
    transition: border-color .15s ease;
}
.input-bar .input-group:focus-within {
    border-color: var(--ws-border-strong);      /* subtle dark border, no glow ring */
}
.input-bar-text {
    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;
}
.input-bar-text::placeholder { color: var(--ws-text-faint); }

/* Send button — MiniMax pattern: light gray inactive (always visible arrow),
   pure dark active (white arrow on black). NO indigo anywhere. */
.input-bar .input-group .btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--ws-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    transition: background-color .15s ease, color .15s ease;
}
.input-bar .input-group .btn-primary {
    background: var(--ws-active-fill);
    color: var(--ws-active-on);
}
.input-bar .input-group .btn-primary:hover {
    background: #000000;
    color: var(--ws-active-on);
}
.input-bar .input-group .btn-primary:disabled {
    background: var(--ws-surface-pane);         /* light gray, always looks "ready" */
    color: var(--ws-text-muted);                /* visible darker arrow */
    opacity: 1;                                 /* override Bootstrap .65 opacity */
    cursor: default;
}
.input-bar .input-group .btn-primary .bi { font-size: 16px; }

.input-bar .text-muted kbd {
    background: var(--ws-text);
    color: var(--ws-surface-app);
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 6px;
}

/* ── Right artifact pane ──────────────────────────────────── */
.right-artifact { min-height: 0; }
/* Files header — match LEFT pane convention: no divider line, just spacing.
   Markup uses .right-artifact-header (renamed from generic .border-bottom). */
.right-artifact-header {
    padding: 14px 16px;
}
.right-artifact-header strong { font-weight: 600; font-size: 14px; }
.right-artifact .badge.text-bg-light {
    background: var(--ws-surface-pane) !important;
    color: var(--ws-text-muted) !important;
    border: 1px solid var(--ws-border);
}

/* File list rows — MiniMax Files-panel pattern: hover/selected = light gray fill,
   rounded, no left-border, no bold, no color */
.artifact-files { gap: 2px; padding: 8px; }
.artifact-files .btn {
    border-radius: var(--ws-radius-row);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ws-text);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: background-color .12s ease;
    width: 100%;
    text-align: left;
    font-weight: 400;                           /* was 500 on selected — now no weight shift */
}
.artifact-files .btn:hover {
    background: var(--ws-hover-fill);
    color: var(--ws-text);
}
.artifact-files .btn.btn-secondary {           /* selected = same fill as hover */
    background: var(--ws-hover-fill);
    color: var(--ws-text);
    border: 0;
}

.artifact-detail .nav-tabs {
    border-bottom: 1px solid var(--ws-border);
    padding: 8px 12px 0;
    gap: 4px;
}
.artifact-detail .nav-tabs .nav-link {
    color: var(--ws-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
}
.artifact-detail .nav-tabs .nav-link.active {
    color: var(--ws-text);                      /* was indigo — now dark text */
    border-bottom-color: var(--ws-text);        /* was indigo — now dark underline */
    background: transparent;
}
.artifact-detail pre {
    background: var(--ws-surface-pane);
    color: var(--ws-text);
    border-radius: 0;
}
.artifact-iframe { background: var(--ws-surface-app); }
.artifact-detail .border-top { border-color: var(--ws-border) !important; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
    background: transparent !important;
    border: 0;
    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-surface-app);
    border-top: 1px solid var(--ws-border);
}
.mobile-bottom-tabs .btn-link {
    text-decoration: none;
    color: var(--ws-text-muted);
    border-radius: 0;
    padding: 8px 0 !important;
    width: auto;
    display: block;
}
.mobile-bottom-tabs .btn-link.active,
.mobile-bottom-tabs .btn-link.text-primary {
    color: var(--ws-text) !important;          /* was indigo */
    background: transparent;
}
.mobile-bottom-tabs .btn-link:hover { background: transparent; color: var(--ws-text); }

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

/* ── Default Blazor error UI ──────────────────────────────── */
#blazor-error-ui {
    background: #FEF3C7;
    color: var(--ws-text);
    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; }