:root {
    /* ── BehavioralHealth field accent tokens ────────────────── */
    --bh-illness-selected-bg:    #0891B2;
    --bh-illness-selected-fg:    #FFFFFF;
    --bh-illness-idle-bg:        #A5F3FC;
    --bh-illness-idle-fg:        #0E4A5A;

    --bh-exam-selected-bg:       #4F46E5;
    --bh-exam-selected-fg:       #FFFFFF;
    --bh-exam-idle-bg:           #C7D2FE;
    --bh-exam-idle-fg:           #2E1D82;

    --bh-medical-selected-bg:    #D97706;
    --bh-medical-selected-fg:    #FFFFFF;
    --bh-medical-idle-bg:        #FDE68A;
    --bh-medical-idle-fg:        #7A3A00;

    --bh-diagnosis-selected-bg:  #BE123C;
    --bh-diagnosis-selected-fg:  #FFFFFF;
    --bh-diagnosis-idle-bg:      #FECDD3;
    --bh-diagnosis-idle-fg:      #6B0020;

    --bh-documents-selected-bg:  #7E22CE;
    --bh-documents-selected-fg:  #FFFFFF;
    --bh-documents-idle-bg:      #E9D5FF;
    --bh-documents-idle-fg:      #4A0094;

    /* ── CaClaim field accent tokens ─────────────────────────── */
    --ca-injury-selected-bg:    #E08B00;
    --ca-injury-selected-fg:    #FFFFFF;
    --ca-injury-idle-bg:        #FDDEA0;
    --ca-injury-idle-fg:        #7A4A00;

    --ca-exam-selected-bg:      #2563EB;
    --ca-exam-selected-fg:      #FFFFFF;
    --ca-exam-idle-bg:          #B8D0FA;
    --ca-exam-idle-fg:          #1240A0;

    --ca-imaging-selected-bg:   #7C3AED;
    --ca-imaging-selected-fg:   #FFFFFF;
    --ca-imaging-idle-bg:       #D4BAFB;
    --ca-imaging-idle-fg:       #4A1D96;

    --ca-diagnosis-selected-bg: #0284C7;
    --ca-diagnosis-selected-fg: #FFFFFF;
    --ca-diagnosis-idle-bg:     #A5D8F5;
    --ca-diagnosis-idle-fg:     #025A8A;

    --ca-treatment-selected-bg: #059669;
    --ca-treatment-selected-fg: #FFFFFF;
    --ca-treatment-idle-bg:     #99DFC8;
    --ca-treatment-idle-fg:     #035C40;

    --ca-documents-selected-bg:  #C026D3;
    --ca-documents-selected-fg:  #FFFFFF;
    --ca-documents-idle-bg:      #F5B8E8;
    --ca-documents-idle-fg:      #86198F;

    /* ── Neutral / gray scale ────────────────────────────────────
       Use for borders, placeholders, divider lines, decorative
       backgrounds — anywhere a chromatic token would be wrong.
       Values match Tailwind's `gray-*` scale (well-tested for
       contrast); the closest analogues to legacy literals are:
         #f5f5f5  → --neutral-100
         #bdbdbd  → --neutral-400
         #888     → --neutral-500
    */
    --neutral-50:  #F9FAFB;
    --neutral-100: #F3F4F6;
    --neutral-200: #E5E7EB;
    --neutral-300: #D1D5DB;
    --neutral-400: #9CA3AF;
    --neutral-500: #6B7280;
    --neutral-600: #4B5563;
    --neutral-700: #374151;
    --neutral-800: #1F2937;
    --neutral-900: #111827;

    /* Translucent white for divider lines drawn on dark surfaces
       (e.g., MudTooltip with Color.Dark). A solid neutral grey
       wouldn't alpha-blend with whatever sits beneath the surface. */
    --divider-on-dark: rgba(255, 255, 255, 0.3);
}

/* Contextual aliases — consumed by component CSS.
   --focus-* aliases are used by the shared Focus components in Components/Shared/Focus/. */
.ca-injury {
    --focus-color:       var(--ca-injury-selected-bg);
    --focus-selected-bg: var(--ca-injury-selected-bg);
    --focus-selected-fg: var(--ca-injury-selected-fg);
    --focus-idle-bg:     var(--ca-injury-idle-bg);
    --focus-idle-fg:     var(--ca-injury-idle-fg);
}
.ca-exam {
    --focus-color:       var(--ca-exam-selected-bg);
    --focus-selected-bg: var(--ca-exam-selected-bg);
    --focus-selected-fg: var(--ca-exam-selected-fg);
    --focus-idle-bg:     var(--ca-exam-idle-bg);
    --focus-idle-fg:     var(--ca-exam-idle-fg);
}
.ca-imaging {
    --focus-color:       var(--ca-imaging-selected-bg);
    --focus-selected-bg: var(--ca-imaging-selected-bg);
    --focus-selected-fg: var(--ca-imaging-selected-fg);
    --focus-idle-bg:     var(--ca-imaging-idle-bg);
    --focus-idle-fg:     var(--ca-imaging-idle-fg);
}
.ca-diagnosis {
    --focus-color:       var(--ca-diagnosis-selected-bg);
    --focus-selected-bg: var(--ca-diagnosis-selected-bg);
    --focus-selected-fg: var(--ca-diagnosis-selected-fg);
    --focus-idle-bg:     var(--ca-diagnosis-idle-bg);
    --focus-idle-fg:     var(--ca-diagnosis-idle-fg);
}
.ca-treatment {
    --focus-color:       var(--ca-treatment-selected-bg);
    --focus-selected-bg: var(--ca-treatment-selected-bg);
    --focus-selected-fg: var(--ca-treatment-selected-fg);
    --focus-idle-bg:     var(--ca-treatment-idle-bg);
    --focus-idle-fg:     var(--ca-treatment-idle-fg);
}
.ca-documents {
    --focus-color:       var(--ca-documents-selected-bg);
    --focus-selected-bg: var(--ca-documents-selected-bg);
    --focus-selected-fg: var(--ca-documents-selected-fg);
    --focus-idle-bg:     var(--ca-documents-idle-bg);
    --focus-idle-fg:     var(--ca-documents-idle-fg);
}

.bh-illness {
    --focus-color:       var(--bh-illness-selected-bg);
    --focus-selected-bg: var(--bh-illness-selected-bg);
    --focus-selected-fg: var(--bh-illness-selected-fg);
    --focus-idle-bg:     var(--bh-illness-idle-bg);
    --focus-idle-fg:     var(--bh-illness-idle-fg);
}
.bh-exam {
    --focus-color:       var(--bh-exam-selected-bg);
    --focus-selected-bg: var(--bh-exam-selected-bg);
    --focus-selected-fg: var(--bh-exam-selected-fg);
    --focus-idle-bg:     var(--bh-exam-idle-bg);
    --focus-idle-fg:     var(--bh-exam-idle-fg);
}
.bh-medical {
    --focus-color:       var(--bh-medical-selected-bg);
    --focus-selected-bg: var(--bh-medical-selected-bg);
    --focus-selected-fg: var(--bh-medical-selected-fg);
    --focus-idle-bg:     var(--bh-medical-idle-bg);
    --focus-idle-fg:     var(--bh-medical-idle-fg);
}
.bh-diagnosis {
    --focus-color:       var(--bh-diagnosis-selected-bg);
    --focus-selected-bg: var(--bh-diagnosis-selected-bg);
    --focus-selected-fg: var(--bh-diagnosis-selected-fg);
    --focus-idle-bg:     var(--bh-diagnosis-idle-bg);
    --focus-idle-fg:     var(--bh-diagnosis-idle-fg);
}
.bh-documents {
    --focus-color:       var(--bh-documents-selected-bg);
    --focus-selected-bg: var(--bh-documents-selected-bg);
    --focus-selected-fg: var(--bh-documents-selected-fg);
    --focus-idle-bg:     var(--bh-documents-idle-bg);
    --focus-idle-fg:     var(--bh-documents-idle-fg);
}

/* Advanced-mode field card chrome. Global (not scoped) because it's shared by both the shared
   AdvancedFieldCard component and the per-page Supporting Documents card. The colored left
   marker is set per-field below, using the source --*-selected-bg variables directly (a
   `.adv-field-card.<field>` selector, specificity 0-2-0, beats the base rule) — no inline style
   and no reliance on the --focus-color alias. */
.adv-field-card {
    background-color: var(--mud-palette-surface);
    border-left: 4px solid #888;
    border-radius: 8px;
    padding: 16px 20px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.adv-field-card.ca-injury    { border-left-color: var(--ca-injury-selected-bg); }
.adv-field-card.ca-exam      { border-left-color: var(--ca-exam-selected-bg); }
.adv-field-card.ca-imaging   { border-left-color: var(--ca-imaging-selected-bg); }
.adv-field-card.ca-diagnosis { border-left-color: var(--ca-diagnosis-selected-bg); }
.adv-field-card.ca-treatment { border-left-color: var(--ca-treatment-selected-bg); }
.adv-field-card.ca-documents { border-left-color: var(--ca-documents-selected-bg); }
.adv-field-card.bh-illness   { border-left-color: var(--bh-illness-selected-bg); }
.adv-field-card.bh-exam      { border-left-color: var(--bh-exam-selected-bg); }
.adv-field-card.bh-medical   { border-left-color: var(--bh-medical-selected-bg); }
.adv-field-card.bh-diagnosis { border-left-color: var(--bh-diagnosis-selected-bg); }
.adv-field-card.bh-documents { border-left-color: var(--bh-documents-selected-bg); }

.adv-field-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.adv-field-card__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #F4F4F1;
}

/* MudBlazor colors active nav links with --mud-palette-primary, which equals DrawerBackground.
   Override so active items remain visible against the blue drawer. */
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-drawer-text) !important;
}

/* Sidebar nav structure — MainLayout uses these for section labels and sub-nav indentation.
   Lives in app.css (NOT scoped *.razor.css) because MudText/MudNavLink render their own
   subtree, where Blazor's per-component scope attribute doesn't propagate and ::deep
   selectors silently fail to match. */
/* MudBlazor wraps drawer children in .mud-drawer-content (flex column, height:100%).
   Make it the scroll container so the sticky clinic switcher pins to its bottom and
   nav items scroll past behind it. overflow-x:hidden keeps the mini-drawer width
   animation from briefly showing a horizontal scrollbar. */
.mud-drawer-content {
    overflow-y: auto;
    overflow-x: hidden;
}
.mud-drawer .mud-navmenu {
    padding-top: 4px;
}
/* Small brand label at the top of the drawer header — fills the space the AppBar
   gave up when its title became the current page name. */
.mud-drawer .drawer-brand {
    display: block;
    color: var(--mud-palette-drawer-text);
    opacity: 0.7;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Animated collapse for sub-links, section labels, and the drawer brand when the
   mini drawer narrows to its 56px rail. Animating max-height + opacity in sync
   with MudDrawer's ~200ms width transition makes the whole gesture feel like one
   motion instead of items popping out. max-height ceilings are generous enough
   to fit current content; bump them if sub-link heights ever grow. */
.mud-drawer .drawer-brand,
.mud-drawer .nav-section-label,
.mud-drawer .nav-sublink {
    overflow: hidden;
    transition: max-height 200ms ease, opacity 200ms ease, margin 200ms ease, padding 200ms ease;
}
.mud-drawer .drawer-brand {
    max-height: 48px;
}
.mud-drawer .nav-section-label {
    max-height: 56px;
}
.mud-drawer .nav-sublink {
    max-height: 48px;
}
.mud-drawer-mini.mud-drawer--closed .drawer-brand,
.mud-drawer-mini.mud-drawer--closed .nav-section-label,
.mud-drawer-mini.mud-drawer--closed .nav-sublink {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* When the mini drawer collapses, the brand text is hidden (rule above) but the
   logo remains. Force the header to fill the rail's width then center the logo. */
.mud-drawer-mini.mud-drawer--closed .drawer-header {
    width: 100%;
    padding: 0;
    justify-content: center;
}
/* The brand text's max-height:0 hides it vertically but it still claims flex
   width (white-space:nowrap content) — that leaves the flex row with no free
   space to distribute, so justify-content:center on the parent is a no-op.
   Collapse the text's width too so the logo can actually center. */
.mud-drawer-mini.mud-drawer--closed .drawer-brand {
    width: 0;
    min-width: 0;
}
.mud-drawer .nav-section-label {
    display: block;
    color: var(--mud-palette-drawer-text);
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    opacity: 0.7;
}
/* Sub-links sit under hub links and carry their own small icon. Parent
   .mud-nav-link uses padding-left 16px + 24px icon + 12px text margin → text at
   x=52. Sub-link icons line up under the parent's *text* column (x=52), so
   padding-left = 52px. The sub-link icon is 18px and the text margin is 12px,
   putting sub-text at x=82.
   MudNavLink 9.4.0 applies Class= to the outer .mud-nav-item wrapper, not the
   inner <a>, so we target the descendant link. */
.mud-drawer .nav-sublink .mud-nav-link {
    padding-left: 52px !important;
    padding-inline-start: 52px !important;
    font-size: 0.85rem;
    min-height: 36px;
    color: var(--mud-palette-drawer-text);
    opacity: 0.75;
}
.mud-drawer .nav-sublink .mud-nav-link .mud-nav-link-icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}
.mud-drawer .nav-sublink .mud-nav-link.active:not(.mud-nav-link-disabled) {
    opacity: 1;
}

/* Always use surface color as input background so transparent containers don't bleed through */
.mud-input.mud-input-outlined,
.mud-input.mud-input-filled {
    background-color: var(--mud-palette-surface);
}

/* Admin usage tables — utility classes for cell alignment and wrapping.
   These live in app.css (NOT scoped *.razor.css) because MudTable renders the
   actual <th>/<td> inside its own component subtree, where Blazor's per-component
   scope attribute doesn't propagate and ::deep selectors silently fail to match.
   Used by UsageBreakdownTable, UsageSessions, UsageSessionDetail. */
/* Numeric columns: right-aligned data + no-wrap + collapsed to header width.
   The `width: 1%` trick (with nowrap content) converges to the minimum content
   width in table-layout: auto, leaving slack for unconstrained columns. */
.usage-col-num {
    text-align: right;
    white-space: nowrap;
}
.usage-table th.usage-col-num {
    width: 1%;
}
.usage-col-label {
    white-space: nowrap;
}
.usage-table th {
    white-space: nowrap;
}
/* GitHub/Linear/Stripe pattern: put the sort indicator on the LEFT of the
   header text so the visible text sits flush-right against the column edge,
   visually aligned with the right-aligned data below. Without this, the
   invisible-but-laid-out sort icon to the right of the text shoves the
   visible header label off-center to the left of its column. */
.usage-table th.usage-col-num .mud-table-sort-label {
    flex-direction: row-reverse;
}
/* Subtle hover affordance on the Total cell inside UsageBreakdownTable — the value
   shows a per-deployment breakdown tooltip on hover. Span is rendered inside a
   MudTooltip slot, so global rather than scoped (same reason as the cell rules). */
.usage-hoverable-total {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* Usage-by-Type report. Global (not scoped) for the same reason as the rules above:
   the .usage-row-idle class lands on a MudSimpleTable <tr>, whose scope attribute
   doesn't propagate. The controls/select rules pair with MudBlazor component roots. */
.usage-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.usage-sort-select {
    min-width: 220px;
}
/* Idle rows (zero usage in the window) are kept but de-emphasized so the active
   rows read first. */
.usage-row-idle td {
    color: var(--mud-palette-text-secondary);
}

/* Chat input action button (SessionChatShell), which sits below the field and is
   right-aligned. Global (not scoped) because the class lands on a MudButton whose
   rendered <button> doesn't carry the component's CSS-isolation scope attribute. Fixed
   min-width keeps Send and Stop the same size as they swap. */
.chat-input-action {
    min-width: 90px;
}

/* Q&A / Forms history: the first question is the primary column (the only meaningful
   identifier these sessions have), wrapped and clamped to two lines so the row stays
   compact while showing far more than a single truncated line. One normal <tr> per
   session — native hover/row-click, no colspan/child-row tricks. Global (not scoped)
   because these land on MudTable's rendered <td>, which don't carry the page's
   CSS-isolation scope attribute. */
.history-q-col {
    /* Pin the question column so wrapping is predictable; the metadata columns share
       the rest. The long question wraps within this width instead of ballooning the
       table. */
    width: 50%;
}
.history-q-cell {
    /* Mirror the narrative table's primary-column accent/padding for visual consistency. */
    border-left: 3px solid transparent;
    padding-left: 12px;
}
.history-q-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.history-q-empty {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}
/* Date columns shouldn't break mid-value when the 50% question column squeezes them.
   nowrap keeps each value on one line; Last Modified intentionally stacks date over
   time as two block lines (two <p>s), each kept whole by this rule. */
.history-meta-nowrap {
    white-space: nowrap;
}
/* Compact trailing actions (⋮) column. Replaces a per-cell inline style. */
.history-actions-cell {
    width: 40px;
    padding: 0 4px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Scrollbar hidden until the user hovers the panel — keep the gutter reserved
   so content doesn't shift on hover. Firefox uses scrollbar-color; WebKit uses
   ::-webkit-scrollbar-thumb. */
.hover-scrollbar {
    scrollbar-gutter: stable;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}
.hover-scrollbar:hover {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.hover-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.hover-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.hover-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.hover-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}
/* Card stretched to row height so grid layouts stay aligned regardless of
   per-card content length. Used by /admin/reports and the /dashboard module
   grid. Defined globally because scoped CSS doesn't pierce MudCard's root
   (same gotcha that drove the Phase 11f .usage-table rules into this file).
   Width is intentionally not set — MudGrid items already enforce column
   widths via their breakpoint classes. */
.fill-height-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fill-height-card-grow {
    flex-grow: 1;
}

/* Single-line truncation with ellipsis at ~220px — used for recent-session
   labels in the dashboard module cards. */
.dashboard-session-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* PromptInspectorPanel styles. Lives here (not in a scoped .razor.css) because the
   classes are applied to MudBlazor child components — MudText, MudPaper — whose
   rendered root elements don't carry the parent component's CSS-isolation marker,
   so a scoped sheet would not match them. */
.prompt-inspector {
    border-color: var(--mud-palette-warning);
    border-width: 2px;
}
.prompt-inspector-prewrap {
    white-space: pre-wrap;
}
.prompt-inspector-monospace {
    white-space: pre-wrap;
    font-family: monospace;
}

/* Impersonation banner — when ImpersonationBanner sets body.has-impersonation-banner
   (via JS interop in OnAfterRenderAsync), shift the MudBlazor chrome down by the
   banner's height so the fixed-position banner doesn't overlap the AppBar, Drawer,
   or main content. The 48px default matches ImpersonationBanner.razor.css. */
body.has-impersonation-banner {
    --banner-height: 48px;
}
body.has-impersonation-banner .mud-appbar {
    top: var(--banner-height) !important;
}
body.has-impersonation-banner .mud-drawer {
    top: var(--banner-height) !important;
    height: calc(100vh - var(--banner-height)) !important;
}
body.has-impersonation-banner .mud-main-content {
    /* 48px matches MainLayout.razor's pt-12 (Dense MudAppBar height). */
    padding-top: calc(48px + var(--banner-height)) !important;
}

/* Flex-column wrapper used by NarrativeNewSessionShell. Fills the viewport below
   the dense MudAppBar so a footer with margin-top:auto pushes to the bottom of
   the screen on short pages while still flowing naturally on long ones. */
.shell-flex {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 48px);
}
body.has-impersonation-banner .shell-flex {
    min-height: calc(100vh - 48px - var(--banner-height));
}

/* Reserves layout space for the "saved @ HH:MM" indicator before the first
   autosave occurs, so the row doesn't jump when the first save lands. */
.saved-at-empty {
    visibility: hidden;
}

/* Scrollable container for rendered legal documents (ToS / BAA) on the
   onboarding and admin pages. Replaces former inline max-height styles. */
.legal-doc-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* Tighten the rendered-markdown body so headings/lists/paragraphs read as a
   compact legal document rather than full-size article spacing. */
.legal-doc-body :first-child { margin-top: 0; }
.legal-doc-body :last-child { margin-bottom: 0; }
.legal-doc-body h1, .legal-doc-body h2, .legal-doc-body h3 {
    font-size: 1rem;
    margin: 0.75rem 0 0.35rem;
}
.legal-doc-body p, .legal-doc-body ul, .legal-doc-body ol {
    font-size: 0.875rem;
    margin: 0.35rem 0;
}

/* Unauthenticated landing page (Home.razor) — centered brand card. */
.home-card {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
}
.home-logo {
    width: 88px;
    height: 88px;
}

/* Landing page fills the viewport so the card centers vertically (no app bar here). */
.home-viewport {
    min-height: 100vh;
}

/* Fixed-width table columns (Admin → AI Models registry). Avoids inline styles on MudTh. */
.owcp-col-w130 { width: 130px; }
.owcp-col-w100 { width: 100px; }
.owcp-col-w60 { width: 60px; }