/* FlowerCore Blue Jay Theme — Dark Mode Only */

:root {
    color-scheme: dark;

    /* Primary palette */
    --fc-primary-navy: #1a2744;
    --fc-primary-navy-light: #243456;
    --fc-primary-navy-dark: #111b30;
    --fc-accent-glow: #8ec8ff;
    --fc-accent-glow-dim: rgba(142, 200, 255, 0.4);
    --fc-jay-tail: #2f6fd6;
    --fc-jay-tail-dim: rgba(47, 111, 214, 0.35);

    /* Surface colors */
    --fc-surface: #1e2d47;
    --fc-surface-raised: #253751;
    --fc-surface-overlay: #2c4060;
    --fc-surface-border: #364b6b;

    /* Text — WCAG 2.1 AA contrast baseline (FlowerCore accessibility standard, 2026-06-03).
       Every text token must clear 4.5:1 against the surface tokens it sits on (3:1 for large
       text). --fc-text-muted was #6b839e (~3.1:1 on --fc-surface-raised #253751 → FAILED AA,
       the "hard to read" muted/description text the operator flagged). Raised to #8fa6c2:
       4.8:1 on --fc-surface-raised, 5.5:1 on --fc-surface — readable for low-vision users while
       still visibly de-emphasized below --fc-text-primary / --fc-text-secondary. */
    --fc-text-primary: #e8edf4;   /* ~13:1 on surfaces */
    --fc-text-secondary: #9ab0cc; /* ~5.5:1 on --fc-surface-raised */
    --fc-text-muted: #8fa6c2;     /* AA: 4.8:1 raised / 5.5:1 base (was #6b839e ≈ 3.1:1) */

    /* Accent colors — Blue Jay signature gold + purple */
    --fc-gold: #FFB300;
    --fc-gold-light: #FFCA40;
    --fc-gold-dim: #CC8F00;
    --fc-gold-bg: rgba(255, 179, 0, 0.12);
    --fc-purple: #9B7ED8;
    --fc-purple-light: #B39DE6;
    --fc-purple-bg: rgba(155, 126, 216, 0.12);

    /* Semantic colors */
    --fc-success: #4ade80;
    --fc-success-bg: rgba(74, 222, 128, 0.12);
    --fc-warning: #fbbf24;
    --fc-warning-bg: rgba(251, 191, 36, 0.12);
    --fc-error: #f87171;
    --fc-error-bg: rgba(248, 113, 113, 0.12);
    --fc-info: #60a5fa;
    --fc-info-bg: rgba(96, 165, 250, 0.12);

    /* Header gradient — holiday/theme overlays swap these stops without
       rewriting the shared shell rule. */
    --fc-header-gradient-start: rgba(36, 52, 86, 0.98);
    --fc-header-gradient-mid: rgba(43, 87, 145, 0.96);
    --fc-header-gradient-end: rgba(142, 200, 255, 0.30);

    /* Spacing */
    --fc-space-xs: 0.25rem;
    --fc-space-sm: 0.5rem;
    --fc-space-md: 1rem;
    --fc-space-lg: 1.5rem;
    --fc-space-xl: 2rem;

    /* Border radius */
    --fc-radius-sm: 4px;
    --fc-radius-md: 6px;
    --fc-radius-lg: 8px;

    /* Transitions */
    --fc-transition-fast: 150ms ease;
    --fc-transition-normal: 250ms ease;

    /* Shadows */
    --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --fc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --fc-shadow-glow: 0 0 12px var(--fc-accent-glow-dim);

    /* Stacking — fleet z-index scale. Page content tops out ~100; modals/reconnect
       sit at 1040-1050. Popovers/flyouts (FcAppChrome gear + compact menu) sit between
       the two so they float above page body but never cover a modal. Added Phase 13
       (2026-05-30) after the chrome gear pop-out rendered behind/clipped by page content. */
    --fc-z-popover: 900;

    /* Font */
    --fc-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    --fc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fc-brand-font-sans: var(--fc-font-sans);
    --fc-brand-font-display: var(--fc-font-sans);
    --fc-brand-wordmark-color: var(--fc-text-primary);
    --fc-brand-tagline-color: var(--fc-text-secondary);
    --fc-brand-primary: #3B7BC0;
    --fc-brand-secondary: #2B5A8A;
    --fc-brand-accent: #FFB300;
    --fc-brand-logo-primary: #3B7BC0;
    --fc-brand-logo-secondary: #2B5A8A;
    --fc-brand-logo-tertiary: #5BA3FF;
    --fc-brand-logo-highlight: #C8DFFF;
    --fc-brand-logo-bloom: #FFB300;
    --fc-brand-logo-bloom-light: #FFCA40;
    --fc-brand-logo-outline: #0d1520;
    --fc-brand-logo-shadow: #364b6b;
    --fc-brand-logo-contrast: #ffffff;
    --fc-jay-tail-fill: var(--fc-jay-tail);

    /* Card aliases (FcInlineCard / FcCard / holiday-theme override target).
       Holiday packs (Lane I) override these aliases without touching the
       underlying surface tokens — keeps shared cards on canonical surfaces
       while letting seasonal palettes swap card backgrounds independently. */
    --fc-surface2: #162844;
    --fc-surface-hover: #1C3354;
    --fc-dark-bg: #0d1520;
    --fc-card-bg: var(--fc-surface);
    --fc-card-bg-raised: var(--fc-surface-raised);
    --fc-card-border: var(--fc-surface-border);
    --fc-card-glow: var(--fc-accent-glow);

    /* Seasonal aliases. App shells consume these stable names so holiday
       overlays can swap palette values through [data-theme] without local
       site.css overrides drifting away from the shared Blue Jay tokens. */
    --fc-season-background: var(--fc-primary-navy);
    --fc-season-background-light: var(--fc-primary-navy-light);
    --fc-season-background-dark: var(--fc-primary-navy-dark);
    --fc-season-surface: var(--fc-surface);
    --fc-season-surface-raised: var(--fc-surface-raised);
    --fc-season-surface-overlay: var(--fc-surface-overlay);
    --fc-season-border: var(--fc-surface-border);
    --fc-season-accent: var(--fc-accent-glow);
    --fc-season-accent-dim: var(--fc-accent-glow-dim);
    --fc-season-gold: var(--fc-gold);
    --fc-season-gold-light: var(--fc-gold-light);
    --fc-season-gold-bg: var(--fc-gold-bg);
    --fc-season-purple: var(--fc-purple);
    --fc-season-purple-light: var(--fc-purple-light);
    --fc-season-purple-bg: var(--fc-purple-bg);
    --fc-season-header-gradient-start: var(--fc-header-gradient-start);
    --fc-season-header-gradient-mid: var(--fc-header-gradient-mid);
    --fc-season-header-gradient-end: var(--fc-header-gradient-end);
}

/* Base component styles */
.fc-component {
    font-family: var(--fc-font-sans);
    color: var(--fc-text-primary);
    box-sizing: border-box;
    color-scheme: inherit;
}

.fc-component *,
.fc-component *::before,
.fc-component *::after {
    box-sizing: inherit;
}

/* Branded Blazor circuit error banner. This is intentionally global because
   #blazor-error-ui is rendered by host layouts, often outside a Razor component
   scope, while the shared theme is still loaded by every FlowerCore web app. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 1rem 1rem 1rem;
    z-index: 1060;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: var(--fc-radius-lg, 8px);
    background:
        radial-gradient(circle at top left, rgba(255, 179, 0, 0.16), transparent 12rem),
        linear-gradient(145deg, rgba(53, 23, 23, 0.98), rgba(17, 27, 48, 0.98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
    color: var(--fc-text-primary, #e8edf4);
    font-family: var(--fc-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

#blazor-error-ui[style*="display: block"],
#blazor-error-ui[style*="display:block"] {
    display: flex !important;
}

#blazor-error-ui .fc-blazor-error-ui__content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

#blazor-error-ui .fc-blazor-error-ui__logo {
    flex: 0 0 auto;
}

#blazor-error-ui .fc-blazor-error-ui__copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

#blazor-error-ui .fc-blazor-error-ui__copy strong {
    color: var(--fc-gold-light, #FFCA40);
    font-size: 0.94rem;
}

#blazor-error-ui .fc-blazor-error-ui__copy span,
#blazor-error-ui {
    color: var(--fc-text-secondary, #9ab0cc);
    font-size: 0.9rem;
    line-height: 1.35;
}

#blazor-error-ui .fc-blazor-error-ui__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.75rem;
    border-radius: var(--fc-radius-md, 6px);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
}

#blazor-error-ui .reload {
    border: 1px solid var(--fc-gold, #FFB300);
    background: var(--fc-gold, #FFB300);
    color: var(--fc-primary-navy-dark, #111b30);
}

#blazor-error-ui .dismiss {
    border: 1px solid rgba(142, 200, 255, 0.22);
    background: rgba(142, 200, 255, 0.08);
    color: var(--fc-text-primary, #e8edf4);
    cursor: pointer;
}

#blazor-error-ui .reload:focus-visible,
#blazor-error-ui .dismiss:focus-visible {
    outline: 3px solid var(--fc-accent-glow, #8ec8ff);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    #blazor-error-ui {
        align-items: stretch;
        flex-direction: column;
    }

    #blazor-error-ui .fc-blazor-error-ui__actions {
        width: 100%;
    }

    #blazor-error-ui .reload,
    #blazor-error-ui .dismiss {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #blazor-error-ui .reload,
    #blazor-error-ui .dismiss {
        transition: none;
    }
}

/* Holiday-aware marquee hardware presets.
   Keep these global: Blazor scoped CSS does not survive ProjectReference RCL
   bundle publish consistently enough for cross-app marquee baselines. */
.fc-marquee[data-holiday-palette] {
    --fc-marquee-bg: var(--fc-primary-navy-dark) !important;
    --fc-marquee-fg: var(--fc-gold-light) !important;
    --fc-marquee-border-color: var(--fc-accent-glow) !important;
    --fc-marquee-bulb-color: var(--fc-gold) !important;
    background: var(--fc-marquee-bg, #000) !important;
    color: var(--fc-marquee-fg, #fff) !important;
    border-color: var(--fc-marquee-border-color, currentColor) !important;
}

[data-theme="halloween"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="halloween"][data-holiday-palette] {
    --fc-marquee-bg: #0f0814 !important;
    --fc-marquee-fg: #FFCA40 !important;
    --fc-marquee-border-color: #FF6700 !important;
    --fc-marquee-bulb-color: #FFB300 !important;
}

[data-theme="christmas"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="christmas"][data-holiday-palette] {
    --fc-marquee-bg: #091F16 !important;
    --fc-marquee-fg: #FFE066 !important;
    --fc-marquee-border-color: #5AB07A !important;
    --fc-marquee-bulb-color: #FFD700 !important;
}

[data-theme="valentines"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="valentines"][data-holiday-palette] {
    --fc-marquee-bg: #1F0814 !important;
    --fc-marquee-fg: #FFD4DC !important;
    --fc-marquee-border-color: #FF6B9D !important;
    --fc-marquee-bulb-color: #FFC1CC !important;
}

[data-theme="st-patricks"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="st-patricks"][data-holiday-palette] {
    --fc-marquee-bg: #06200F !important;
    --fc-marquee-fg: #FFE066 !important;
    --fc-marquee-border-color: #4ECDC4 !important;
    --fc-marquee-bulb-color: #FFD700 !important;
}

[data-theme="easter"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="easter"][data-holiday-palette] {
    --fc-marquee-bg: #1E1626 !important;
    --fc-marquee-fg: #FFF1D6 !important;
    --fc-marquee-border-color: #B0E0E6 !important;
    --fc-marquee-bulb-color: #FFE4B5 !important;
}

[data-theme="independence-day"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="independence-day"][data-holiday-palette] {
    --fc-marquee-bg: #111B30 !important;
    --fc-marquee-fg: #FFE066 !important;
    --fc-marquee-border-color: #FF4D4D !important;
    --fc-marquee-bulb-color: #FFD700 !important;
}

[data-theme="thanksgiving"] .fc-marquee[data-holiday-palette],
.fc-marquee[data-theme="thanksgiving"][data-holiday-palette] {
    --fc-marquee-bg: #1E1408 !important;
    --fc-marquee-fg: #F2C44C !important;
    --fc-marquee-border-color: #D4A574 !important;
    --fc-marquee-bulb-color: #D98A43 !important;
}

.fc-marquee[data-holiday-palette].fc-marquee--modern {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-marquee-border-color) 55%, transparent);
}

.fc-marquee[data-holiday-palette].fc-marquee--led {
    text-shadow:
        0 0 8px var(--fc-marquee-fg),
        0 0 16px var(--fc-marquee-fg),
        0 0 32px color-mix(in srgb, var(--fc-marquee-fg) 50%, transparent) !important;
}

.fc-marquee[data-holiday-palette].fc-marquee--fliptile {
    background: var(--fc-marquee-bg, #000) !important;
}

.fc-marquee[data-holiday-palette].fc-marquee--fliptile .fc-marquee__flap {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fc-marquee-border-color) 24%, #111 76%) 0%,
            color-mix(in srgb, var(--fc-marquee-border-color) 18%, #111 82%) 48%,
            #050505 48%,
            #050505 52%,
            color-mix(in srgb, var(--fc-marquee-bg) 70%, #222 30%) 52%,
            color-mix(in srgb, var(--fc-marquee-bg) 82%, #333 18%) 100%) !important;
    color: var(--fc-marquee-fg, #fff) !important;
}

.fc-marquee[data-holiday-palette].fc-marquee--bulb {
    background: var(--fc-marquee-bg, #000) !important;
    text-shadow:
        0 0 6px var(--fc-marquee-bulb-color),
        0 0 12px var(--fc-marquee-border-color),
        0 0 24px color-mix(in srgb, var(--fc-marquee-border-color) 55%, transparent) !important;
}

.fc-marquee[data-holiday-palette].fc-marquee--dotmatrix {
    text-shadow:
        0 0 4px var(--fc-marquee-fg),
        0 0 8px color-mix(in srgb, var(--fc-marquee-fg) 35%, transparent) !important;
}

.fc-marquee[data-holiday-palette].fc-marquee--dotmatrix-led {
    background: var(--fc-marquee-bg, #000) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-marquee-border-color) 40%, transparent);
}

/* Headings — Blue Jay gold h2, purple h3 signature */
.fc-component h1,
.fc-component h4 {
    font-weight: 700;
    color: var(--fc-text-primary);
    margin: 0 0 var(--fc-space-sm) 0;
}

.fc-component h2 {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--fc-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--fc-gold-bg);
    padding-bottom: var(--fc-space-sm);
    margin: var(--fc-space-lg) 0 var(--fc-space-md) 0;
}

.fc-component h3 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--fc-purple-light);
    margin: var(--fc-space-md) 0 var(--fc-space-sm) 0;
}

/* Glow hover effect */
.fc-glow-hover {
    transition: box-shadow var(--fc-transition-normal);
}

.fc-glow-hover:hover {
    box-shadow: var(--fc-shadow-glow);
}

/* Panel base */
.fc-panel {
    background: var(--fc-surface);
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-lg);
    padding: var(--fc-space-md);
}

/* App shell primitives */
.fc-app-frame {
    min-height: 100vh;
}

.fc-app-header {
    align-items: center;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 16rem),
        linear-gradient(135deg, var(--fc-header-gradient-start) 0%, var(--fc-header-gradient-mid) 62%, var(--fc-header-gradient-end) 100%);
    display: grid;
    gap: var(--fc-space-md) var(--fc-space-lg);
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: var(--fc-space-lg) auto 0;
    max-width: 1360px;
    /* overflow MUST stay visible so the FcAppChrome gear / compact pop-out menus,
       which anchor at top:100% of the chrome bar and hang below the header, are not
       clipped. The radial/linear gradient backgrounds are still clipped to the rounded
       border-box by border-radius, so removing overflow:hidden does not let the
       decoration bleed. Changed Phase 13 (2026-05-30) — was overflow:hidden, which made
       the gear pop-out render invisible ("behind"). */
    overflow: visible;
    padding: var(--fc-space-md) 1.25rem;
    position: relative;
}

.fc-app-header::after {
    background: linear-gradient(90deg, transparent, var(--fc-brand-accent, rgba(255, 202, 64, 0.65)), transparent);
    content: "";
    height: 1px;
    left: 1.25rem;
    opacity: 0.75;
    position: absolute;
    right: 1.25rem;
    top: 0;
}

.fc-app-brand {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    min-width: 0;
}

.fc-app-brand__mark {
    flex-shrink: 0;
}

.fc-app-brand__copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.fc-app-brand__title {
    color: var(--fc-brand-wordmark-color);
    font-family: var(--fc-brand-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.fc-app-brand__title:hover {
    color: var(--fc-brand-logo-contrast, #ffffff);
    text-decoration: none;
}

.fc-app-brand__tagline {
    color: var(--fc-brand-tagline-color);
    font-family: var(--fc-brand-font-sans);
    margin: 0;
}

.fc-brand-mark__image {
    display: block;
    object-fit: contain;
}

.fc-app-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.fc-app-nav a {
    border: 1px solid transparent;
    border-radius: var(--fc-radius-md);
    color: var(--fc-text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.65rem 0.95rem;
    text-decoration: none;
    transition: background var(--fc-transition-fast), border-color var(--fc-transition-fast), color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-app-nav a:hover,
.fc-app-nav a.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(142, 200, 255, 0.24);
    box-shadow: 0 0 0 1px rgba(142, 200, 255, 0.08);
    color: var(--fc-text-primary);
    text-decoration: none;
}

.fc-app-status {
    display: grid;
    gap: 0.75rem;
    justify-items: end;
    min-width: 0;
}

.fc-app-main {
    margin: 0 auto;
    max-width: 1360px;
    padding: var(--fc-space-lg);
    width: 100%;
}

.fc-theme-picker {
    display: grid;
    gap: 0.55rem;
    width: 100%;
}

.fc-theme-picker__status {
    color: var(--fc-text-secondary);
    font-size: 0.82rem;
    margin: 0;
}

.fc-theme-picker__status strong {
    color: var(--fc-text-primary);
}

.fc-theme-picker__status-note {
    color: var(--fc-text-muted);
    display: block;
    font-size: 0.76rem;
    margin-top: 0.15rem;
}

/* Badge */
.fc-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--fc-space-xs) var(--fc-space-sm);
    border-radius: var(--fc-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.fc-badge--info { background: var(--fc-info-bg); color: var(--fc-info); }
.fc-badge--success { background: var(--fc-success-bg); color: var(--fc-success); }
.fc-badge--warning { background: var(--fc-warning-bg); color: var(--fc-warning); }
.fc-badge--error { background: var(--fc-error-bg); color: var(--fc-error); }
.fc-badge--danger { background: var(--fc-error-bg); color: var(--fc-error); }
.fc-badge--muted { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.fc-badge--orange { background: rgba(251, 146, 60, 0.12); color: #fb923c; }

/* Button base */
.fc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.05rem;
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-md);
    box-sizing: border-box;
    background: var(--fc-surface-raised);
    color: var(--fc-text-primary);
    font-family: var(--fc-font-sans);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--fc-transition-fast);
}

.fc-btn--sm {
    min-height: 2.25rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
}

.fc-btn--lg {
    min-height: 3rem;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}

.fc-btn--icon-only {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    min-width: 2.75rem;
    padding: 0.6rem;
}

.fc-btn:hover {
    background: var(--fc-surface-overlay);
    border-color: var(--fc-accent-glow-dim);
}

.fc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fc-btn--primary {
    background: var(--fc-accent-glow);
    color: var(--fc-primary-navy-dark);
    border-color: var(--fc-accent-glow);
    font-weight: 600;
}

.fc-btn--primary:hover {
    box-shadow: var(--fc-shadow-glow);
}

.fc-btn--danger {
    background: var(--fc-error);
    color: var(--fc-primary-navy-dark);
    border-color: var(--fc-error);
    font-weight: 600;
}

.fc-btn--danger:hover {
    background: var(--fc-error);
    border-color: var(--fc-error);
    box-shadow: 0 0 0 3px var(--fc-error-bg);
}

.fc-btn--outline {
    background: transparent;
    border-color: var(--fc-surface-border);
    color: var(--fc-text-primary);
}

.fc-btn--outline:hover {
    background: var(--fc-surface-overlay);
    border-color: var(--fc-accent-glow-dim);
}

/* Combined: outline variant of danger — transparent bg + red border/text. */
.fc-btn--outline.fc-btn--danger {
    background: transparent;
    border-color: var(--fc-error);
    color: var(--fc-error);
}

.fc-btn--outline.fc-btn--danger:hover {
    background: var(--fc-error-bg);
    color: var(--fc-error);
    box-shadow: none;
}

/* ============================================================================
   FcAppChrome pop-out panels — GLOBAL opacity safety net (2026-06-03)
   The Help / About / Advanced (gear) pop-out panels are styled in the shared RCL's
   SCOPED stylesheet (FcAppChrome.razor.css). On a deployed consumer the scoped
   {Assembly}.styles.css bundle can drift / go stale (chronic in this fleet —
   see feedback_blazor_rcl_bundle_drift_publish / feedback_blazor_rcl_css_links_
   need_cache_busting), leaving the gear pop-out rendering SEE-THROUGH over page
   content (operator-reported 2026-06-03). These GLOBAL rules (matched by class
   name, no [b-xxx] scope attribute) guarantee the panels stay opaque + readable
   regardless of scoped-bundle state. !important on the background defeats a
   stale/translucent scoped rule if one is somehow live. Shared RCL chrome belongs
   in global CSS (feedback_blazor_scoped_css_breaks_with_projectreference_rcls). */
.fc-app-chrome__panel {
    background-color: var(--fc-surface-raised) !important;
    border: 1px solid var(--fc-surface-border);
    color: var(--fc-text-primary);
}
.fc-app-chrome__panel--advanced {
    background-color: var(--fc-surface-overlay) !important;
    box-shadow: var(--fc-shadow-md);
}
.fc-app-chrome__panel--advanced .fc-app-chrome__links li a {
    background-color: var(--fc-surface);
}
/* ============================================================================ */

/* Action rows and code-like controls - Sprint 49 Cx-3 control spacing standard. */
.fc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fc-action-gap, 0.75rem);
}

.fc-actions--end {
    justify-content: flex-end;
}

.fc-actions--between {
    justify-content: space-between;
}

.fc-actions--stacked {
    align-items: stretch;
    flex-direction: column;
}

.fc-actions--compact {
    --fc-action-gap: 0.5rem;
}

.fc-component input.fc-code-input,
.fc-component textarea.fc-code-input,
.fc-component .fc-input--code .fc-input__field,
.fc-component .fc-input--hex .fc-input__field {
    font-family: var(--fc-font-mono, "Cascadia Code", "Consolas", monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.fc-component input.fc-hex-input,
.fc-component .fc-input--hex .fc-input__field {
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .fc-actions--stack-mobile {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Form primitives */
.fc-component input,
.fc-component select,
.fc-component textarea {
    accent-color: var(--fc-accent-glow);
    color: var(--fc-text-primary);
    font: inherit;
    transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast), background var(--fc-transition-fast);
}

.fc-component input:not([type="checkbox"]):not([type="radio"]),
.fc-component select,
.fc-component textarea {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-md);
}

.fc-component input:not([type="checkbox"]):not([type="radio"]),
.fc-component select {
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
}

.fc-component textarea {
    min-height: 6.5rem;
    padding: 0.75rem 0.85rem;
}

.fc-component input[type="checkbox"],
.fc-component input[type="radio"] {
    inline-size: 1rem;
    block-size: 1rem;
}

.fc-component input::placeholder,
.fc-component textarea::placeholder {
    color: var(--fc-text-muted);
}

.fc-component textarea {
    resize: vertical;
}

.fc-component select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--fc-accent-glow) 50%),
        linear-gradient(135deg, var(--fc-accent-glow) 50%, transparent 50%);
    background-position:
        calc(100% - 1rem) calc(50% - 0.1rem),
        calc(100% - 0.7rem) calc(50% - 0.1rem);
    background-repeat: no-repeat;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    color-scheme: dark;
    padding-right: 2.25rem;
}

.fc-component select option,
.fc-component select optgroup {
    background: var(--fc-surface);
    color: var(--fc-text-primary);
}

.fc-component input:focus,
.fc-component select:focus,
.fc-component textarea:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(142, 200, 255, 0.65);
    box-shadow: 0 0 0 0.18rem rgba(142, 200, 255, 0.14);
    outline: none;
}

/* ── Fleet form-control groups (Phase 11, 2026-05-28) ──────────────────────────
   Reusable control-group / radio / checkbox / field primitives. Applied via class
   on any .fc-component page so every product gets consistent group padding, per-line
   graphical radios, and styled checkboxes — mirrors how .fc-btn / .fc-panel /
   .fc-bulleted-list are fleet CSS classes (not components). Custom indicators use
   appearance:none on the REAL input so it stays keyboard-focusable + screen-reader
   native (no decoy spans). Touch targets meet WCAG 2.5.5 (>=2.75rem). */

/* Vertical rhythm between stacked sections/panels — fixes cramped inter-group spacing. */
.fc-component .fc-section-stack {
    display: flex;
    flex-direction: column;
    gap: var(--fc-space-xl);
}

/* A labelled control group — replaces a bare <fieldset> with consistent padding + a gold legend. */
.fc-component .fc-control-group {
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-lg);
    background: var(--fc-surface-raised);
    padding: var(--fc-space-lg);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fc-space-md);
    min-inline-size: 0; /* let it shrink inside grids without overflowing */
}
.fc-component .fc-control-group > legend,
.fc-component .fc-control-group__legend {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-gold);
    padding: 0;
    margin: 0 0 var(--fc-space-xs) 0;
}

/* Label-over-control field (default) or inline label/control row. */
.fc-component .fc-field {
    display: flex;
    flex-direction: column;
    gap: var(--fc-space-xs);
}
.fc-component .fc-field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc-space-md);
    flex-wrap: wrap;
}
.fc-component .fc-field__label {
    font-size: 0.85rem;
    color: var(--fc-text-secondary);
}

/* Radio group — per-line graphical options (NOT text-in-a-row). */
.fc-component .fc-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--fc-space-xs);
}
.fc-component .fc-radio-group--cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--fc-space-xs);
}
.fc-component .fc-radio-option,
.fc-component .fc-checkbox {
    display: flex;
    align-items: center;
    gap: var(--fc-space-sm);
    min-height: 2.75rem;
    padding: var(--fc-space-sm) var(--fc-space-md);
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.012) 100%);
    cursor: pointer;
    transition: border-color var(--fc-transition-fast), background var(--fc-transition-fast);
    user-select: none;
}
.fc-component .fc-radio-option:hover,
.fc-component .fc-checkbox:hover {
    border-color: var(--fc-accent-glow-dim);
    background: rgba(142, 200, 255, 0.06);
}
.fc-component .fc-radio-option:has(input:checked),
.fc-component .fc-checkbox:has(input:checked) {
    border-color: var(--fc-accent-glow);
    background: var(--fc-gold-bg);
}
.fc-component .fc-radio-option:has(input:focus-visible),
.fc-component .fc-checkbox:has(input:focus-visible) {
    box-shadow: 0 0 0 0.18rem rgba(142, 200, 255, 0.18);
}
.fc-component .fc-radio-option:has(input:disabled),
.fc-component .fc-checkbox:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom radio dot. */
.fc-component .fc-radio-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: 0 0 auto;
    border: 2px solid var(--fc-text-muted);
    border-radius: 50%;
    background: transparent;
    display: grid;
    place-content: center;
    margin: 0;
}
.fc-component .fc-radio-option input[type="radio"]::before {
    content: "";
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: 50%;
    background: var(--fc-gold);
    transform: scale(0);
    transition: transform var(--fc-transition-fast);
}
.fc-component .fc-radio-option input[type="radio"]:checked {
    border-color: var(--fc-gold);
}
.fc-component .fc-radio-option input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Custom checkbox box + checkmark. */
.fc-component .fc-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: 0 0 auto;
    border: 2px solid var(--fc-text-muted);
    border-radius: var(--fc-radius-sm);
    background: transparent;
    display: grid;
    place-content: center;
    margin: 0;
}
.fc-component .fc-checkbox input[type="checkbox"]::before {
    content: "";
    inline-size: 0.62rem;
    block-size: 0.38rem;
    border-left: 2px solid var(--fc-primary-navy-dark);
    border-bottom: 2px solid var(--fc-primary-navy-dark);
    margin-top: -0.12rem;
    transform: rotate(-45deg) scale(0);
    transition: transform var(--fc-transition-fast);
}
.fc-component .fc-checkbox input[type="checkbox"]:checked {
    background: var(--fc-gold);
    border-color: var(--fc-gold);
}
.fc-component .fc-checkbox input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}

/* Optional stacked label + hint inside an option row. */
.fc-component .fc-radio-option__label,
.fc-component .fc-checkbox__label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
}
.fc-component .fc-radio-option__hint,
.fc-component .fc-checkbox__hint {
    font-size: 0.78rem;
    color: var(--fc-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .fc-component .fc-radio-option input[type="radio"]::before,
    .fc-component .fc-checkbox input[type="checkbox"]::before {
        transition: none;
    }
}

/* Scrollbar styling */
.fc-component ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fc-component ::-webkit-scrollbar-track {
    background: var(--fc-primary-navy-dark);
}

.fc-component ::-webkit-scrollbar-thumb {
    background: var(--fc-surface-border);
    border-radius: 4px;
}

.fc-component ::-webkit-scrollbar-thumb:hover {
    background: var(--fc-text-muted);
}

@media (max-width: 980px) {
    .fc-app-header {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .fc-app-status {
        justify-items: start;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .fc-app-main {
        padding: var(--fc-space-md);
    }

    .fc-app-header {
        margin-top: var(--fc-space-md);
    }
}

/* ===== Navigation primitives (used by FcNavMenu and sidebar layouts) ===== */

.fc-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-nav__section {
    list-style: none;
    display: block;
    padding: 0.6rem 1rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fc-gold);
}

.fc-nav__section-header {
    display: block;
    padding: 0.6rem 1rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fc-gold);
}

.fc-nav__section-header--collapsible {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    transition: color 150ms ease;
}

.fc-nav__section-header--collapsible:hover {
    color: var(--fc-text-secondary);
}

.fc-nav__section-arrow {
    font-size: 0.6rem;
    transition: transform 200ms ease;
    color: var(--fc-text-muted);
}

.fc-nav__section-arrow--open {
    transform: rotate(90deg);
}

.fc-nav__item {
    list-style: none;
}

.fc-nav__section-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fc-nav__item--nested {
    padding-left: 0.75rem;
}

.fc-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    color: var(--fc-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.fc-nav__link:hover {
    background: rgba(142, 200, 255, 0.06);
    color: var(--fc-text-primary);
    border-left-color: rgba(142, 200, 255, 0.3);
    text-decoration: none;
}

.fc-nav__link.active {
    color: var(--fc-accent-glow);
    font-weight: 600;
    border-left-color: var(--fc-accent-glow);
    background: rgba(142, 200, 255, 0.08);
}

.fc-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.7;
}

.fc-nav__icon svg {
    width: 16px;
    height: 16px;
}

.fc-nav__link.active .fc-nav__icon {
    opacity: 1;
}

.fc-nav__badge {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    background: var(--fc-accent-glow-dim);
    color: var(--fc-primary-navy-dark);
}

.fc-nav__search {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--fc-surface-border);
}

.fc-nav__search input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--fc-surface);
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-md);
    color: var(--fc-text-primary);
    font-size: 0.82rem;
    font-family: var(--fc-font-sans);
    transition: border-color 150ms ease;
}

.fc-nav__search input::placeholder {
    color: var(--fc-text-muted);
}

.fc-nav__search input:focus {
    outline: none;
    border-color: var(--fc-accent-glow);
    box-shadow: 0 0 0 2px rgba(142, 200, 255, 0.15);
}

/* ===== App footer ===== */

.fc-app-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--fc-primary-navy);
    border-top: 1px solid var(--fc-surface-border);
    color: var(--fc-text-muted);
    font-size: 0.8rem;
}

.fc-app-footer--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

/* ===== Environment banner strip ===== */

.fc-env-strip {
    text-align: center;
    padding: 2px 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    z-index: 100;
    flex-shrink: 0;
}

.fc-env-strip--development {
    background: var(--fc-info, #60a5fa);
}

.fc-env-strip--staging {
    background: var(--fc-warning, #fbbf24);
    color: #1a2744;
}

.fc-env-strip--test {
    background: var(--fc-purple, #9B7ED8);
}

/* ===== Secondary page utilities ===== */

.fc-page {
    display: grid;
    gap: var(--fc-space-lg);
}

.fc-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc-space-lg);
    flex-wrap: wrap;
}

.fc-page__title-group {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.fc-page__eyebrow {
    margin: 0;
    color: var(--fc-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fc-page__title {
    margin: 0;
    color: var(--fc-text-primary);
    font-size: clamp(1.95rem, 3vw, 2.6rem);
    line-height: 1.1;
}

.fc-page__lede {
    margin: 0;
    color: var(--fc-text-secondary);
    max-width: 62rem;
}

.fc-page__actions,
.fc-page__tabs,
.fc-page__inline-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fc-page__actions {
    align-items: center;
}

.fc-page__tabs {
    align-items: center;
}

.fc-page__toolbar {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fc-page__toolbar > * {
    min-width: 0;
}

.fc-page__toolbar .fc-page__field--grow {
    flex: 1 1 16rem;
}

.fc-page__field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.fc-page__field > label,
.fc-page__field > span {
    color: var(--fc-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.fc-page__form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.fc-page__field--wide {
    grid-column: 1 / -1;
}

.fc-page__field--grow {
    flex: 1 1 16rem;
}

.fc-page__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--fc-text-secondary);
    font-weight: 600;
}

.fc-page__checkbox input {
    margin-top: 0.2rem;
}

.fc-page__supporting,
.fc-page__empty,
.fc-page__helper,
.fc-page__muted {
    margin: 0;
    color: var(--fc-text-secondary);
}

.fc-page__empty {
    padding: 0.35rem 0;
}

.fc-page__split {
    display: grid;
    gap: var(--fc-space-lg);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.fc-page__stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.fc-page__stat-card {
    height: 100%;
}

.fc-page__stat-card .fc-card__body {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    height: 100%;
}

.fc-page__stat-card .fc-page__stat {
    text-align: left;
}

.fc-page__stat {
    text-align: center;
}

.fc-page__stat-value {
    color: var(--fc-text-primary);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.fc-page__stat-value--success {
    color: var(--fc-success);
}

.fc-page__stat-value--warning {
    color: var(--fc-warning);
}

.fc-page__stat-value--danger {
    color: var(--fc-error);
}

.fc-page__stat-value--info {
    color: var(--fc-info);
}

.fc-page__stat-value--gold {
    color: var(--fc-gold);
}

.fc-page__stat-label {
    color: var(--fc-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
    text-transform: uppercase;
}

.fc-page__stat-detail {
    margin: 0;
    color: var(--fc-text-secondary);
}

.fc-page__detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.fc-page__table-shell {
    overflow-x: auto;
}

.fc-page__table {
    width: 100%;
    border-collapse: collapse;
}

.fc-page__table th,
.fc-page__table td {
    padding: 0.75rem 0.85rem;
    text-align: left;
    vertical-align: top;
}

.fc-page__table th {
    border-bottom: 1px solid var(--fc-surface-border);
    color: var(--fc-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fc-page__table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fc-page__table tbody tr {
    transition: background var(--fc-transition-fast);
}

.fc-page__table tbody tr:hover {
    background: rgba(142, 200, 255, 0.05);
}

.fc-page__table--compact th,
.fc-page__table--compact td {
    padding: 0.55rem 0.7rem;
}

.fc-page__table-row--interactive {
    cursor: pointer;
}

.fc-page__table-row--selected {
    background: rgba(142, 200, 255, 0.08);
}

.fc-page__table-row--warning {
    background: rgba(251, 191, 36, 0.08);
}

.fc-page__table-row--danger {
    background: rgba(248, 113, 113, 0.08);
}

.fc-page__table-row--success {
    background: rgba(74, 222, 128, 0.08);
}

.fc-page__table-cell--mono {
    font-family: var(--fc-font-mono);
}

.fc-page__table-cell--muted {
    color: var(--fc-text-secondary);
}

.fc-page__table-cell--success {
    color: var(--fc-success);
    font-weight: 700;
}

.fc-page__table-cell--warning {
    color: var(--fc-warning);
    font-weight: 700;
}

.fc-page__table-cell--danger {
    color: var(--fc-error);
    font-weight: 700;
}

.fc-page__table-cell--info {
    color: var(--fc-info);
    font-weight: 700;
}

.fc-page__table-actions {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .fc-page__header {
        gap: 1rem;
    }

    .fc-page__table th,
    .fc-page__table td {
        padding: 0.65rem;
    }
}
/* ============================== */
/* FlowerCore AI Components CSS   */
/* Moved from scoped to global    */
/* to fix scope ID mismatch with  */
/* ProjectReference RCL builds    */
/* ============================== */


/* --- FcAiChat --- */
/* FcAiChat — Blue Jay theme conversational AI chat */

.fc-ai-chat {
    display: flex;
    flex-direction: column;
    background: var(--fc-surface, #111D33);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 8px;
    overflow: hidden;
}

.fc-ai-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
    background: linear-gradient(90deg, rgba(30, 58, 95, 0.95), rgba(17, 29, 51, 0.95));
}

.fc-ai-chat__session {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fc-text, #E8EDF5);
}

.fc-ai-chat__new {
    background: var(--fc-gold-bg, rgba(255, 179, 0, 0.12));
    border: 1px solid var(--fc-gold-dim, #CC8F00);
    border-radius: 999px;
    color: var(--fc-gold-light, #FFCA40);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    transition: background var(--fc-transition-fast, 150ms ease), border-color var(--fc-transition-fast, 150ms ease), color var(--fc-transition-fast, 150ms ease);
}

.fc-ai-chat__new:hover {
    background: rgba(255, 179, 0, 0.22);
    border-color: var(--fc-gold, #FFB300);
    color: var(--fc-gold, #FFB300);
}

.fc-ai-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    min-height: 200px;
}

/* Empty state */
.fc-ai-chat__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--fc-text-muted, #8899B3);
    text-align: center;
}
/* Replace default unicode speech-bubble with a branded SVG via CSS mask so the
   icon renders consistently across OSes (emoji fonts vary between Windows/Linux). */
.fc-ai-chat__empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0;
    margin-bottom: 0.5rem;
    opacity: 0.55;
    display: inline-block;
    background-color: var(--fc-accent-glow, #8ec8ff);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/><circle cx='9' cy='11' r='0.8' fill='black'/><circle cx='12' cy='11' r='0.8' fill='black'/><circle cx='15' cy='11' r='0.8' fill='black'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/><circle cx='9' cy='11' r='0.8' fill='black'/><circle cx='12' cy='11' r='0.8' fill='black'/><circle cx='15' cy='11' r='0.8' fill='black'/></svg>") center/contain no-repeat;
}
.fc-ai-chat__empty p { font-size: 0.875rem; margin: 0; }

/* Messages */
.fc-ai-chat__message { display: flex; flex-direction: column; max-width: 85%; }
.fc-ai-chat__message--user { align-self: flex-end; }
.fc-ai-chat__message--assistant { align-self: flex-start; }

.fc-ai-chat__bubble {
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
}
.fc-ai-chat__message--user .fc-ai-chat__bubble {
    background: #2B8AFF;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}
.fc-ai-chat__message--assistant .fc-ai-chat__bubble {
    background: var(--fc-surface2, #162844);
    color: var(--fc-text, #E8EDF5);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-bottom-left-radius: 4px;
}

.fc-ai-chat__message--pending .fc-ai-chat__bubble {
    box-shadow: 0 0 0 1px rgba(142, 200, 255, 0.08);
}

.fc-ai-chat__message--errored .fc-ai-chat__bubble {
    border-color: rgba(232, 69, 69, 0.45);
}

/* Markdown-rendered content inside chat bubbles (Markdig output via FcAiChat). Global,
   not scoped — this is shared-RCL chrome and scoped CSS does not survive ProjectReference. */
.fc-ai-chat__bubble > :first-child { margin-top: 0; }
.fc-ai-chat__bubble > :last-child { margin-bottom: 0; }
.fc-ai-chat__bubble p { margin: 0 0 0.5rem; }
.fc-ai-chat__bubble ul,
.fc-ai-chat__bubble ol { margin: 0 0 0.5rem; padding-left: 1.4rem; }
.fc-ai-chat__bubble li { margin: 0.15rem 0; }
.fc-ai-chat__bubble h1,
.fc-ai-chat__bubble h2,
.fc-ai-chat__bubble h3,
.fc-ai-chat__bubble h4 { margin: 0.5rem 0 0.35rem; line-height: 1.25; font-weight: 700; }
.fc-ai-chat__bubble h1 { font-size: 1.15rem; }
.fc-ai-chat__bubble h2 { font-size: 1.05rem; }
.fc-ai-chat__bubble h3 { font-size: 0.98rem; }
.fc-ai-chat__bubble h4 { font-size: 0.9rem; }
.fc-ai-chat__bubble a { color: #8EC8FF; text-decoration: underline; }
.fc-ai-chat__message--user .fc-ai-chat__bubble a { color: #ffffff; }
.fc-ai-chat__bubble code {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.85em;
    background: rgba(127, 170, 230, 0.16);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.fc-ai-chat__bubble pre {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--fc-surface3, #0f1d33);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 8px;
    overflow-x: auto;
}
.fc-ai-chat__bubble pre code {
    background: none;
    padding: 0;
    font-size: 0.82rem;
}
.fc-ai-chat__bubble blockquote {
    margin: 0 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--fc-border, #1E3A5F);
    color: rgba(233, 240, 252, 0.85);
}
.fc-ai-chat__bubble table { border-collapse: collapse; margin: 0 0 0.5rem; }
.fc-ai-chat__bubble th,
.fc-ai-chat__bubble td { border: 1px solid var(--fc-border, #1E3A5F); padding: 0.3rem 0.5rem; }

.fc-ai-chat__speaker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    color: rgba(233, 240, 252, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fc-ai-chat__speaker-team {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(43, 138, 255, 0.14);
    color: rgba(169, 208, 255, 0.9);
    font-size: 0.72rem;
    font-weight: 600;
}

.fc-ai-chat__text { white-space: pre-wrap; }

/* Sprint E Phase 1B — reasoning expander above the final answer for
   thinking-capable models (qwen3, deepseek-r1, phi4-reasoning). */
.fc-ai-chat__thinking {
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 0.4rem;
    font-size: 0.85rem;
}

.fc-ai-chat__thinking-summary {
    color: var(--fc-text-secondary, #9fb0c4);
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    list-style: none;
    user-select: none;
}

.fc-ai-chat__thinking-summary::-webkit-details-marker { display: none; }

.fc-ai-chat__thinking-summary::before {
    content: "▶ ";
    display: inline-block;
    transition: transform 120ms ease;
    transform-origin: center;
    font-size: 0.62rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fc-ai-chat__thinking[open] .fc-ai-chat__thinking-summary::before {
    transform: rotate(90deg);
}

.fc-ai-chat__thinking-body {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    color: var(--fc-text-secondary, #9fb0c4);
    font-style: italic;
    font-family: var(--fc-font-mono, "Cascadia Code", "Consolas", monospace);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.fc-ai-chat__pending-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.fc-ai-chat__pending-tools--live {
    justify-content: space-between;
    width: 100%;
}

.fc-ai-chat__pending-state {
    align-items: center;
    display: flex;
    flex: 1 1 10rem;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.fc-ai-chat__pending-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-left: auto;
}

.fc-ai-chat__pending-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.fc-ai-chat__message--assistant .fc-ai-chat__pending-label {
    color: var(--fc-text-secondary, #9ab0cc);
}

.fc-ai-chat__pending-action {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
}

.fc-ai-chat__pending-action:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fc-ai-chat__message--assistant .fc-ai-chat__pending-action {
    background: rgba(142, 200, 255, 0.08);
    border-color: rgba(142, 200, 255, 0.18);
    color: var(--fc-accent-glow, #8FC2FF);
}

.fc-ai-chat__message--assistant .fc-ai-chat__pending-action:hover {
    background: rgba(142, 200, 255, 0.16);
}

.fc-ai-chat__pending-action--danger {
    background: rgba(232, 69, 69, 0.16);
    border-color: rgba(232, 69, 69, 0.34);
    color: #FFE0E0;
}

.fc-ai-chat__pending-action--danger:hover {
    background: rgba(232, 69, 69, 0.26);
}

.fc-ai-chat__tool-call {
    margin-top: 0.5rem;
    color: #8FC2FF;
    font-size: 0.75rem;
    font-weight: 600;
}

.fc-ai-chat__tool-panel {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.fc-ai-chat__tool-summary {
    color: var(--fc-text-secondary, #9ab0cc);
    font-size: 0.78rem;
}

.fc-ai-chat__tool-args {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.fc-ai-chat__tool-arg {
    align-items: center;
    background: rgba(12, 24, 41, 0.62);
    border: 1px solid rgba(143, 194, 255, 0.14);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
}

.fc-ai-chat__tool-arg-name {
    color: #8FC2FF;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-ai-chat__tool-arg-value {
    color: var(--fc-text, #E8EDF5);
    font-size: 0.72rem;
}

.fc-ai-chat__tool-details {
    background: rgba(12, 24, 41, 0.52);
    border: 1px solid rgba(143, 194, 255, 0.1);
    border-radius: 10px;
    color: var(--fc-text, #E8EDF5);
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 0.7rem 0.8rem;
}

.fc-ai-chat__preview {
    margin-top: 0.5rem;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--fc-border, #1E3A5F);
}

/* Action tags — DEPRECATED 2026-04-29 (Lane F L2 migration to FcInlineCard).
   The FcAiChat action chip now renders via <FcInlineCard Variant="Action" />.
   These rules are retained as no-ops so any third-party theme that overrides
   them does not break; scheduled for deletion in Blue Jay v2.0. */
.fc-ai-chat__action-tag,
.fc-ai-chat__action-name,
.fc-ai-chat__action-btn { /* superseded by .fc-inline-card--action */ }

/* Meta */
.fc-ai-chat__meta {
    display: flex;
    gap: 0.5rem;
    padding: 2px 4px;
    font-size: 0.7rem;
    color: var(--fc-text-muted, #8899B3);
    opacity: 0.7;
}
.fc-ai-chat__message--user .fc-ai-chat__meta { justify-content: flex-end; }

/* Pending activity indicator */
.fc-ai-chat__typing {
    display: flex;
    gap: 4px;
    align-items: center;
}

.fc-ai-chat__typing--inline {
    gap: 3px;
}

.fc-ai-chat__dot {
    width: 6px; height: 6px;
    background: var(--fc-text-muted, #8899B3);
    border-radius: 50%;
    animation: fc-ai-dot-pulse 1.2s ease-in-out infinite;
}

.fc-ai-chat__typing--inline .fc-ai-chat__dot {
    width: 5px;
    height: 5px;
}

.fc-ai-chat__message--user .fc-ai-chat__typing--inline .fc-ai-chat__dot {
    background: rgba(255, 255, 255, 0.82);
}

.fc-ai-chat__dot:nth-child(2) { animation-delay: 0.15s; }
.fc-ai-chat__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes fc-ai-dot-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.fc-ai-chat__elapsed {
    font-size: 0.7rem;
    color: var(--fc-text-muted, #8899B3);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.fc-ai-chat__elapsed--inline {
    color: rgba(255, 255, 255, 0.78);
    margin-left: 0;
}

/* Input area */
.fc-ai-chat__input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--fc-border, #1E3A5F);
    background: var(--fc-surface2, #162844);
}

.fc-ai-chat__input {
    flex: 1;
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--fc-text, #E8EDF5);
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}
.fc-ai-chat__input:focus { border-color: #2B8AFF; }
.fc-ai-chat__input::placeholder { color: var(--fc-text-muted, #8899B3); opacity: 0.6; }
.fc-ai-chat__input:disabled { opacity: 0.5; }

.fc-ai-chat__send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: #2B8AFF;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.fc-ai-chat__send:hover:not(:disabled) { background: #5BA3FF; }
.fc-ai-chat__send:disabled { opacity: 0.4; cursor: not-allowed; }

.fc-ai-chat__spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: fc-ai-spin 0.6s linear infinite;
}
@keyframes fc-ai-spin { to { transform: rotate(360deg); } }

/* --- FcAiStatusPanel --- */
/* FcAiStatusPanel — Blue Jay theme AI backend status display */

.fc-ai-status {
    background: var(--fc-surface, #111D33);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fc-ai-status--compact {
    padding: 0.5rem 0.75rem;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* Connection status */
.fc-ai-status__connection {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fc-ai-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fc-ai-status__dot--connected {
    background: #3DB86A;
    box-shadow: 0 0 6px rgba(61, 184, 106, 0.5);
    animation: fc-ai-status-pulse 2s ease-in-out infinite;
}
.fc-ai-status__dot--disconnected {
    background: #E84545;
}
@keyframes fc-ai-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.fc-ai-status__state {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--fc-text, #E8EDF5);
}

.fc-ai-status__latency {
    font-size: 0.75rem;
    color: var(--fc-text-muted, #8899B3);
    padding: 1px 6px;
    background: var(--fc-code-bg, #0C1829);
    border-radius: 4px;
}

/* Model info */
.fc-ai-status__model {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fc-ai-status__label {
    font-size: 0.75rem;
    color: var(--fc-text-muted, #8899B3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.fc-ai-status__value {
    font-size: 0.85rem;
    color: #FFB300;
    font-weight: 600;
}

.fc-ai-status__quant {
    font-size: 0.7rem;
    padding: 1px 5px;
    background: rgba(155, 126, 216, 0.12);
    color: #9B7ED8;
    border-radius: 4px;
    border: 1px solid rgba(155, 126, 216, 0.25);
}

/* Metrics grid */
.fc-ai-status__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.fc-ai-status__metric {
    text-align: center;
    padding: 0.5rem;
    background: var(--fc-surface2, #162844);
    border-radius: 6px;
}

.fc-ai-status__metric-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--fc-text-heading, #FFFFFF);
}

.fc-ai-status__metric-label {
    font-size: 0.7rem;
    color: var(--fc-text-muted, #8899B3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* URL */
.fc-ai-status__url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fc-ai-status__url code {
    font-size: 0.78rem;
    background: var(--fc-code-bg, #0C1829);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--fc-code-text, #FFB300);
    border: 1px solid var(--fc-border, #1E3A5F);
}

/* Empty */
.fc-ai-status__empty {
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
}

/* --- FcAiQuickActions --- */
/* FcAiQuickActions — Blue Jay theme tabbed AI action panel */

.fc-ai-actions {
    background: var(--fc-surface, #111D33);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 8px;
    overflow: hidden;
}

/* Tabs */
.fc-ai-actions__tabs {
    display: flex;
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
    background: var(--fc-surface2, #162844);
    overflow-x: auto;
}

.fc-ai-actions__tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.fc-ai-actions__tab:hover { color: var(--fc-text, #E8EDF5); }
.fc-ai-actions__tab--active {
    color: #2B8AFF;
    border-bottom-color: #2B8AFF;
}
.fc-ai-actions__count {
    font-size: 0.7rem;
    background: rgba(43,138,255,0.1);
    color: var(--fc-text-muted, #8899B3);
    padding: 1px 6px;
    border-radius: 8px;
}
.fc-ai-actions__tab--active .fc-ai-actions__count {
    background: rgba(43,138,255,0.2);
    color: #2B8AFF;
}

/* Action items */
.fc-ai-actions__panel {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.25rem;
}

.fc-ai-actions__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    color: var(--fc-text, #E8EDF5);
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
}
.fc-ai-actions__item:hover:not(:disabled) {
    background: rgba(43, 138, 255, 0.06);
    border-color: var(--fc-border, #1E3A5F);
}
.fc-ai-actions__item:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-ai-actions__item--executing { background: rgba(43, 138, 255, 0.08); border-color: #2B8AFF; }

.fc-ai-actions__icon { width: 1.25rem; height: 1.25rem; color: #FFB300; flex-shrink: 0; }

.fc-ai-actions__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fc-ai-actions__name { font-weight: 600; font-size: 0.85rem; }
.fc-ai-actions__desc { font-size: 0.78rem; color: var(--fc-text-muted, #8899B3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fc-ai-actions__shortcut {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 3px;
    color: var(--fc-text-muted, #8899B3);
    font-family: monospace;
}

.fc-ai-actions__spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(43,138,255,0.3);
    border-top-color: #2B8AFF;
    border-radius: 50%;
    animation: fc-ai-actions-spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes fc-ai-actions-spin { to { transform: rotate(360deg); } }

/* Empty state */
.fc-ai-actions__empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.85rem;
}

/* Result display */
.fc-ai-actions__result {
    margin: 0.5rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.fc-ai-actions__result--success {
    background: rgba(61,184,106,0.08);
    border: 1px solid rgba(61,184,106,0.2);
}
.fc-ai-actions__result--error {
    background: rgba(232,69,69,0.08);
    border: 1px solid rgba(232,69,69,0.2);
}
.fc-ai-actions__result-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.fc-ai-actions__result--success .fc-ai-actions__result-header { color: #3DB86A; }
.fc-ai-actions__result--error .fc-ai-actions__result-header { color: #E84545; }
.fc-ai-actions__result-time { font-weight: 400; color: var(--fc-text-muted, #8899B3); }
.fc-ai-actions__result-message { color: var(--fc-text, #E8EDF5); }
.fc-ai-actions__result-error { color: #E84545; margin-top: 0.3rem; font-size: 0.8rem; }
.fc-ai-actions__result-preview {
    margin-top: 0.5rem;
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid var(--fc-border, #1E3A5F);
}

/* --- FcAiProfilePicker --- */
/* FcAiProfilePicker — Blue Jay theme prompt profile picker */

.fc-ai-profile-picker {
    --fc-ai-profile-picker-accent: var(--fc-accent-gold, #FFB300);
    --fc-ai-profile-picker-accent-blue: var(--fc-accent-blue, #2B8AFF);
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fc-ai-profile-picker__label {
    color: var(--fc-ai-profile-picker-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.fc-ai-profile-picker__select {
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    color: var(--fc-text, #E8EDF5);
    font-family: inherit;
    font-size: 0.82rem;
    min-width: 12rem;
    outline: none;
    padding: 0.4rem 0.65rem;
}

.fc-ai-profile-picker__select:focus {
    border-color: var(--fc-ai-profile-picker-accent-blue);
}

/* --- FcAiModelSelector --- */
/* FcAiModelSelector — Blue Jay theme model switcher */

.fc-ai-model-selector {
    --fc-ai-model-selector-accent: var(--fc-accent-gold, #FFB300);
    --fc-ai-model-selector-accent-blue: var(--fc-accent-blue, #2B8AFF);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fc-ai-model-selector__label {
    color: var(--fc-ai-model-selector-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.fc-ai-model-selector__controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.fc-ai-model-selector__select {
    min-width: 12rem;
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    color: var(--fc-text, #E8EDF5);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 0.4rem 0.65rem;
    outline: none;
}

.fc-ai-model-selector__select:focus {
    border-color: var(--fc-ai-model-selector-accent-blue);
}

.fc-ai-model-selector__select:disabled {
    opacity: 0.6;
    cursor: wait;
}

.fc-ai-model-selector__refresh {
    background: transparent;
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    color: var(--fc-text-muted, #8899B3);
    cursor: pointer;
    font-size: 0.9rem;
    min-height: 2rem;
    min-width: 2rem;
    padding: 0;
}

.fc-ai-model-selector__refresh:hover:not(:disabled),
.fc-ai-model-selector__refresh:focus-visible {
    border-color: var(--fc-ai-model-selector-accent-blue);
    color: var(--fc-ai-model-selector-accent);
}

.fc-ai-model-selector__refresh:disabled {
    cursor: wait;
    opacity: 0.6;
}

.fc-ai-model-selector__meta {
    color: var(--fc-text-muted, #8899B3);
    flex-basis: 100%;
    font-size: 0.72rem;
    line-height: 1.35;
}

/* --- FcAiFeedback --- */
/* FcAiFeedback — Blue Jay theme inline message rating controls */

.fc-ai-feedback {
    --fc-ai-feedback-accent: var(--fc-accent-gold, #FFB300);
    --fc-ai-feedback-accent-rgb: var(--fc-accent-gold-rgb, 255, 179, 0);
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.fc-ai-feedback__buttons {
    display: inline-flex;
    gap: 4px;
}

.fc-ai-feedback__btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--fc-text-muted, #8899B3);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    height: 20px;
    justify-content: center;
    padding: 0;
    width: 20px;
}

.fc-ai-feedback__btn:hover,
.fc-ai-feedback__btn:focus-visible {
    border-color: var(--fc-border, #1E3A5F);
    color: var(--fc-text, #E8EDF5);
}

.fc-ai-feedback__btn--active {
    background: rgba(var(--fc-ai-feedback-accent-rgb), 0.2);
    color: var(--fc-ai-feedback-accent);
}

.fc-ai-feedback__note {
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    color: var(--fc-text, #E8EDF5);
    font-family: inherit;
    font-size: 0.75rem;
    min-width: 12rem;
    padding: 0.35rem 0.55rem;
}

.fc-ai-feedback__note:focus {
    border-color: var(--fc-ai-feedback-accent);
    outline: none;
}

/* --- FcAiFeedbackReview --- */
/* FcAiFeedbackReview — Blue Jay theme feedback browser */

.fc-ai-feedback-review {
    --fc-ai-feedback-review-accent: var(--fc-accent-gold, #FFB300);
    --fc-ai-feedback-review-accent-rgb: var(--fc-accent-gold-rgb, 255, 179, 0);
    background: var(--fc-surface, #111D33);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 8px;
    overflow: hidden;
}

.fc-ai-feedback-review__toolbar {
    align-items: center;
    background: var(--fc-surface2, #162844);
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.75rem;
}

.fc-ai-feedback-review__filters {
    display: inline-flex;
    gap: 0.5rem;
}

.fc-ai-feedback-review__filter,
.fc-ai-feedback-review__page-btn {
    background: transparent;
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    color: var(--fc-text-muted, #8899B3);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
}

.fc-ai-feedback-review__filter:hover,
.fc-ai-feedback-review__filter:focus-visible,
.fc-ai-feedback-review__page-btn:hover:not(:disabled),
.fc-ai-feedback-review__page-btn:focus-visible {
    border-color: var(--fc-ai-feedback-review-accent);
    color: var(--fc-text, #E8EDF5);
}

.fc-ai-feedback-review__filter--active {
    background: rgba(var(--fc-ai-feedback-review-accent-rgb), 0.14);
    border-color: rgba(var(--fc-ai-feedback-review-accent-rgb), 0.4);
    color: var(--fc-ai-feedback-review-accent);
}

.fc-ai-feedback-review__count,
.fc-ai-feedback-review__page-state {
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.78rem;
}

.fc-ai-feedback-review__list {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   FcHostCard / FcServiceCard — infocard chip + popover
   All selectors use fc-host-card or fc-service-card prefix.
   No scoped .razor.css — see feedback_blazor_rcl_bundle_drift_publish.
   ============================================================ */

/* ---- Shared chip base ---- */
.fc-host-card--chip,
.fc-service-card--chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--fc-radius-sm, 4px);
    background: var(--fc-surface-raised, #253751);
    border: 1px solid var(--fc-surface-border, #364b6b);
    color: var(--fc-accent-glow, #8ec8ff);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}

.fc-host-card--chip:hover,
.fc-service-card--chip:hover,
.fc-host-card--chip:focus-visible,
.fc-service-card--chip:focus-visible {
    background: var(--fc-surface-overlay, #2c4060);
    border-color: var(--fc-accent-glow, #8ec8ff);
    outline: 2px solid var(--fc-accent-glow, #8ec8ff);
    outline-offset: 2px;
}

/* ---- Chip label ---- */
.fc-host-card__chip-label,
.fc-service-card__chip-label {
    line-height: 1;
}

/* ---- Status dot ---- */
.fc-host-card__status-dot,
.fc-service-card__status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fc-success, #4ade80);
    flex-shrink: 0;
}

/* ---- Inline variant ---- */
.fc-host-card--inline,
.fc-service-card--inline {
    color: var(--fc-accent-glow, #8ec8ff);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
}

.fc-host-card--inline:hover,
.fc-service-card--inline:hover {
    color: var(--fc-accent-glow-dim, rgba(142,200,255,0.7));
}

/* ---- Popover ---- */
.fc-host-card__popover,
.fc-service-card__popover {
    display: none;
    position: absolute;
    z-index: 1050;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-width: 340px;
    background: var(--fc-surface, #1e2d47);
    border: 1px solid var(--fc-surface-border, #364b6b);
    border-radius: var(--fc-radius-md, 6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    padding: var(--fc-space-sm, 0.5rem);
}

.fc-host-card__popover--open,
.fc-service-card__popover--open {
    display: block;
}

/* Close button inside popover */
.fc-host-card__popover-close,
.fc-service-card__popover-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--fc-text-muted, #6b839e);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    line-height: 1;
}

.fc-host-card__popover-close:hover,
.fc-service-card__popover-close:hover {
    color: var(--fc-text-primary, #e8edf4);
}

/* ---- Card header (shared by chip popover + expanded variant) ---- */
.fc-host-card__header,
.fc-service-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-right: 1.5rem; /* room for close button */
    margin-bottom: var(--fc-space-xs, 0.25rem);
}

.fc-host-card__name,
.fc-service-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fc-text-primary, #e8edf4);
}

.fc-host-card__role,
.fc-service-card__ns {
    font-size: 0.75rem;
    color: var(--fc-text-secondary, #9ab0cc);
}

/* ---- Meta line (IP, tags) ---- */
.fc-host-card__meta,
.fc-service-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: var(--fc-space-xs, 0.25rem);
}

.fc-host-card__ip,
.fc-host-card__puppet-role,
.fc-service-card__url {
    font-size: 0.75rem;
    color: var(--fc-text-muted, #6b839e);
}

.fc-service-card__url {
    color: var(--fc-accent-glow, #8ec8ff);
    text-decoration: none;
    word-break: break-all;
}

.fc-host-card__tag,
.fc-service-card__tag {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--fc-gold-bg, rgba(255,179,0,0.12));
    color: var(--fc-gold, #FFB300);
    font-weight: 600;
}

/* ---- Link button row ---- */
.fc-host-card__link-row,
.fc-service-card__link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: var(--fc-space-xs, 0.25rem);
    border-top: 1px solid var(--fc-surface-border, #364b6b);
    margin-top: var(--fc-space-xs, 0.25rem);
}

.fc-host-card__link-btn,
.fc-service-card__link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--fc-radius-sm, 4px);
    background: var(--fc-surface-raised, #253751);
    border: 1px solid var(--fc-surface-border, #364b6b);
    color: var(--fc-text-secondary, #9ab0cc);
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.fc-host-card__link-btn:hover,
.fc-service-card__link-btn:hover,
.fc-host-card__link-btn:focus-visible,
.fc-service-card__link-btn:focus-visible {
    background: var(--fc-accent-glow-dim, rgba(142,200,255,0.15));
    border-color: var(--fc-accent-glow, #8ec8ff);
    color: var(--fc-accent-glow, #8ec8ff);
    outline: 2px solid var(--fc-accent-glow, #8ec8ff);
    outline-offset: 1px;
}

/* ---- Unknown / no registry entry ---- */
.fc-host-card__unknown,
.fc-service-card__unknown {
    font-size: 0.8rem;
    color: var(--fc-text-muted, #6b839e);
    padding: var(--fc-space-xs, 0.25rem) 0;
}

/* ---- Expanded variant ---- */
.fc-host-card--expanded,
.fc-service-card--expanded {
    background: var(--fc-surface, #1e2d47);
    border: 1px solid var(--fc-surface-border, #364b6b);
    border-radius: var(--fc-radius-md, 6px);
    padding: var(--fc-space-sm, 0.5rem) var(--fc-space-md, 1rem);
}

.fc-ai-feedback-review__item {
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
}

.fc-ai-feedback-review__item:last-child {
    border-bottom: none;
}

.fc-ai-feedback-review__summary {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr auto;
    padding: 0.75rem;
    text-align: left;
    width: 100%;
}

.fc-ai-feedback-review__summary:hover,
.fc-ai-feedback-review__summary:focus-visible {
    background: var(--fc-surface-hover, #1C3354);
}

.fc-ai-feedback-review__icon {
    font-size: 1rem;
}

.fc-ai-feedback-review__text {
    color: var(--fc-text, #E8EDF5);
    font-size: 0.84rem;
    line-height: 1.4;
}

.fc-ai-feedback-review__meta {
    color: var(--fc-text-muted, #8899B3);
    display: flex;
    flex-direction: column;
    font-size: 0.74rem;
    gap: 0.15rem;
    text-align: right;
}

.fc-ai-feedback-review__details {
    background: rgba(var(--fc-ai-feedback-review-accent-rgb), 0.04);
    border-top: 1px solid var(--fc-border, #1E3A5F);
    color: var(--fc-text, #E8EDF5);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.fc-ai-feedback-review__full-text {
    line-height: 1.5;
    white-space: pre-wrap;
}

.fc-ai-feedback-review__note {
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 6px;
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.78rem;
    padding: 0.5rem 0.65rem;
}

.fc-ai-feedback-review__pager {
    align-items: center;
    border-top: 1px solid var(--fc-border, #1E3A5F);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
}

.fc-ai-feedback-review__page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fc-ai-feedback-review__empty {
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.85rem;
    padding: 1.5rem;
    text-align: center;
}

/* --- FcAiInteractionLog --- */
/* FcAiInteractionLog — Blue Jay theme AI interaction history */

.fc-ai-log {
    background: var(--fc-surface, #111D33);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 8px;
    overflow: hidden;
}

/* Analytics summary */
.fc-ai-log__analytics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
    background: var(--fc-surface2, #162844);
}

.fc-ai-log__stat {
    text-align: center;
}
.fc-ai-log__stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--fc-text-heading, #FFFFFF);
}
.fc-ai-log__stat-label {
    font-size: 0.7rem;
    color: var(--fc-text-muted, #8899B3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Toolbar */
.fc-ai-log__toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
    align-items: center;
}

.fc-ai-log__filter {
    flex: 1;
    background: var(--fc-code-bg, #0C1829);
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    color: var(--fc-text, #E8EDF5);
    font-size: 0.8rem;
    font-family: inherit;
    outline: none;
}
.fc-ai-log__filter:focus { border-color: #2B8AFF; }
.fc-ai-log__filter::placeholder { color: var(--fc-text-muted, #8899B3); opacity: 0.6; }

.fc-ai-log__export,
.fc-ai-log__clear {
    background: none;
    border: 1px solid var(--fc-border, #1E3A5F);
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
}
.fc-ai-log__export:hover,
.fc-ai-log__clear:hover {
    border-color: #2B8AFF;
    color: var(--fc-text, #E8EDF5);
}
.fc-ai-log__clear { color: #E84545; }
.fc-ai-log__clear:hover { border-color: #E84545; }

/* Table */
.fc-ai-log__table-wrap {
    overflow-x: auto;
}

.fc-ai-log__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.fc-ai-log__table th {
    background: var(--fc-surface2, #162844);
    color: #FFB300;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
}

.fc-ai-log__table td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--fc-border, #1E3A5F);
    color: var(--fc-text, #E8EDF5);
}

.fc-ai-log__table tr:hover {
    background: var(--fc-surface-hover, #1C3354);
}

.fc-ai-log__row--error {
    background: rgba(232, 69, 69, 0.04);
}

.fc-ai-log__time { color: var(--fc-text-muted, #8899B3); font-family: monospace; font-size: 0.78rem; }
.fc-ai-log__action { font-weight: 600; }
.fc-ai-log__model { color: var(--fc-text-muted, #8899B3); font-size: 0.78rem; }
.fc-ai-log__duration { font-family: monospace; font-size: 0.78rem; }

/* Status badges */
.fc-ai-log__badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
}
.fc-ai-log__badge--ok { background: rgba(61,184,106,0.12); color: #3DB86A; }
.fc-ai-log__badge--err { background: rgba(232,69,69,0.12); color: #E84545; }

/* Empty */
.fc-ai-log__empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--fc-text-muted, #8899B3);
    font-size: 0.85rem;
}

/* --- FcAiActionExecutor --- */
/* FcAiActionExecutor — Blue Jay theme action dispatch with preview */

.fc-ai-executor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Preview */
.fc-ai-executor__preview {
    background: var(--fc-surface, #111D33);
    border: 1px solid #FFB300;
    border-radius: 8px;
    overflow: hidden;
}

.fc-ai-executor__preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 179, 0, 0.08);
    border-bottom: 1px solid rgba(255, 179, 0, 0.2);
    font-weight: 600;
    font-size: 0.85rem;
    color: #FFB300;
}

.fc-ai-executor__preview-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fc-ai-executor__dry-run-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(255, 179, 0, 0.15);
    border: 1px solid rgba(255, 179, 0, 0.3);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fc-ai-executor__preview-img {
    max-width: 100%;
    padding: 0.75rem;
}

.fc-ai-executor__preview-text {
    padding: 0.75rem 0.85rem;
    font-size: 0.85rem;
    color: var(--fc-text, #E8EDF5);
    white-space: pre-wrap;
}

.fc-ai-executor__preview-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--fc-border, #1E3A5F);
}

/* Buttons */
.fc-ai-executor__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background 0.15s;
}

.fc-ai-executor__btn--confirm {
    background: #2B8AFF;
    color: #ffffff;
}
.fc-ai-executor__btn--confirm:hover:not(:disabled) { background: #5BA3FF; }
.fc-ai-executor__btn--confirm:disabled { opacity: 0.5; cursor: not-allowed; }

.fc-ai-executor__btn--cancel {
    background: none;
    color: var(--fc-text-muted, #8899B3);
    border-color: var(--fc-border, #1E3A5F);
}
.fc-ai-executor__btn--cancel:hover { border-color: #2B8AFF; color: var(--fc-text, #E8EDF5); }

.fc-ai-executor__btn--retry {
    background: none;
    color: #FFB300;
    border-color: rgba(255, 179, 0, 0.3);
    margin-top: 0.5rem;
}
.fc-ai-executor__btn--retry:hover { background: rgba(255, 179, 0, 0.08); }

/* Progress */
.fc-ai-executor__progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem;
    background: rgba(43, 138, 255, 0.06);
    border: 1px solid rgba(43, 138, 255, 0.15);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--fc-text-muted, #8899B3);
}

.fc-ai-executor__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(43, 138, 255, 0.3);
    border-top-color: #2B8AFF;
    border-radius: 50%;
    animation: fc-ai-exec-spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes fc-ai-exec-spin { to { transform: rotate(360deg); } }

/* Result */
.fc-ai-executor__result {
    padding: 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.fc-ai-executor__result--success {
    background: rgba(61, 184, 106, 0.06);
    border: 1px solid rgba(61, 184, 106, 0.2);
}
.fc-ai-executor__result--error {
    background: rgba(232, 69, 69, 0.06);
    border: 1px solid rgba(232, 69, 69, 0.2);
}

.fc-ai-executor__result-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.fc-ai-executor__result-status { font-weight: 700; }
.fc-ai-executor__result--success .fc-ai-executor__result-status { color: #3DB86A; }
.fc-ai-executor__result--error .fc-ai-executor__result-status { color: #E84545; }
.fc-ai-executor__result-time { color: var(--fc-text-muted, #8899B3); font-size: 0.78rem; }

.fc-ai-executor__result-message { color: var(--fc-text, #E8EDF5); }
.fc-ai-executor__result-error { color: #E84545; font-size: 0.8rem; margin-top: 0.3rem; }
.fc-ai-executor__result-img {
    max-width: 100%;
    margin-top: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--fc-border, #1E3A5F);
}

/* History */
.fc-ai-executor__history {
    font-size: 0.82rem;
    color: var(--fc-text-muted, #8899B3);
}
.fc-ai-executor__history summary {
    cursor: pointer;
    padding: 0.4rem 0;
    font-weight: 600;
}
.fc-ai-executor__history-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.fc-ai-executor__history-ok { color: #3DB86A; }
.fc-ai-executor__history-err { color: #E84545; }
.fc-ai-executor__history-action { color: var(--fc-text, #E8EDF5); }
.fc-ai-executor__history-time { font-family: monospace; font-size: 0.75rem; }

.fc-ai-executor__confidence {
    border-radius: 4px;
    font-size: 0.7rem;
    padding: 1px 6px;
}

.fc-ai-executor__confidence--high {
    background: rgba(61, 184, 106, 0.15);
    color: #3DB86A;
}

.fc-ai-executor__confidence--medium {
    background: rgba(255, 179, 0, 0.15);
    color: #FFB300;
}

.fc-ai-executor__confidence--low {
    background: rgba(232, 69, 69, 0.15);
    color: #E84545;
}

/* --- FcSidebarLayout --- */
/* FcSidebarLayout — shared sidebar shell for admin dashboards */

.fc-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fc-primary-navy-dark, #111b30);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

/* ===== Desktop sidebar ===== */
.fc-sidebar {
    display: none;
    flex-direction: column;
    background: linear-gradient(180deg, var(--fc-primary-navy, #1a2744) 0%, var(--fc-primary-navy-dark, #111b30) 100%);
    border-right: 1px solid var(--fc-surface-border, #364b6b);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 10;
}

.fc-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--fc-surface-border, #364b6b);
    flex-shrink: 0;
}

.fc-sidebar__brand-text {
    min-width: 0;
    overflow: hidden;
}

.fc-sidebar__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fc-text-primary, #e8edf4);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-sidebar__tagline {
    font-size: 0.72rem;
    color: var(--fc-text-secondary, #9fb0c4);
    margin: 0.15rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.fc-sidebar__nav::-webkit-scrollbar { width: 4px; }
.fc-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.fc-sidebar__nav::-webkit-scrollbar-thumb { background: var(--fc-surface-border, #364b6b); border-radius: 2px; }

.fc-sidebar__footer {
    border-top: 1px solid var(--fc-surface-border, #364b6b);
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

.fc-sidebar__footer ::deep a {
    color: var(--fc-text-muted, #6b839e);
    text-decoration: none;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 150ms ease;
}

.fc-sidebar__footer ::deep a:hover {
    color: var(--fc-accent-glow, #8ec8ff);
}

.fc-sidebar__close {
    background: none;
    border: none;
    color: var(--fc-text-muted, #6b839e);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-sidebar__footer ::deep a:hover {
    color: var(--fc-accent-glow, #8ec8ff);
}

.fc-sidebar__account {
    border-top: 1px solid var(--fc-surface-border, #364b6b);
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

.fc-sidebar__close {
    background: none;
    border: none;
    color: var(--fc-text-muted, #6b839e);
    cursor: pointer;
    padding: 0.25rem;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.fc-sidebar__close:hover {
    color: var(--fc-text-primary, #e8edf4);
}

/* ===== Mobile sidebar (offcanvas) ===== */
.fc-sidebar--mobile {
    display: flex;
    position: fixed;
    top: env(safe-area-inset-top);
    left: env(safe-area-inset-left);
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform 250ms ease;
    z-index: 1050;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

.fc-sidebar--mobile-open {
    transform: translateX(0);
}

.fc-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 250ms ease;
}

.fc-sidebar-overlay--visible {
    display: block;
    opacity: 1;
}

/* ===== Main content ===== */
.fc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
}

.fc-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
    background: var(--fc-primary-navy, #1a2744);
    border-bottom: 1px solid var(--fc-surface-border, #364b6b);
    position: sticky;
    top: 0;
    z-index: 5;
}

.fc-topbar__hamburger {
    background: none;
    border: 1px solid var(--fc-surface-border, #364b6b);
    border-radius: var(--fc-radius-md, 6px);
    color: var(--fc-text-primary, #e8edf4);
    cursor: pointer;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, border-color 150ms ease;
}

.fc-topbar__hamburger:hover {
    background: var(--fc-surface, #1e2d47);
    border-color: var(--fc-accent-glow, #8ec8ff);
}

.fc-topbar__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--fc-text-primary, #e8edf4);
}

.fc-topbar__tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: var(--fc-z-popover, 900);
}

.fc-content {
    flex: 1;
}

/* ==========================================================================
   FcAccountMenu - shared account/auth chrome.
   Global rather than scoped so ProjectReference RCL consumers do not hit scoped
   CSS bundle drift.
   ========================================================================== */
.fc-account-menu {
    position: relative;
    color: var(--fc-text-primary, #e8edf4);
    min-width: 0;
}

.fc-account-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    max-width: 100%;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--fc-surface-border, #364b6b);
    border-radius: var(--fc-radius-md, 8px);
    background: rgba(15, 25, 45, 0.72);
    color: var(--fc-text-primary, #e8edf4);
    cursor: pointer;
}

.fc-account-menu__trigger:hover {
    border-color: var(--fc-accent-glow, #8ec8ff);
    background: rgba(43, 138, 255, 0.12);
}

.fc-account-menu__trigger:focus-visible,
.fc-account-menu__item:focus-visible {
    outline: 2px solid var(--fc-accent-glow, #8ec8ff);
    outline-offset: 2px;
}

.fc-account-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    background: var(--fc-gold, #ffb300);
    color: var(--fc-primary-navy-dark, #111b30);
}

.fc-account-menu__summary {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    text-align: left;
}

.fc-account-menu__summary strong {
    font-size: 0.86rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-account-menu__eyebrow,
.fc-account-menu__label,
.fc-account-menu__hint {
    font-size: 0.72rem;
    color: var(--fc-text-muted, #6b839e);
}

.fc-account-menu__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: var(--fc-z-popover, 900);
    width: min(20rem, calc(100vw - 1rem));
    padding: 0.75rem;
    border: 1px solid var(--fc-surface-border, #364b6b);
    border-radius: var(--fc-radius-md, 8px);
    background: rgba(17, 27, 48, 0.98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.fc-account-menu__identity {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem 0.6rem 0.7rem;
    border: 1px solid var(--fc-border-subtle, #1d3a5f);
    border-radius: var(--fc-radius-sm, 4px);
    background: rgba(13, 21, 32, 0.45);
}

.fc-account-menu__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fc-account-menu__role {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--fc-gold-bg, rgba(255, 179, 0, 0.12));
    color: var(--fc-gold-light, #ffca40);
    font-size: 0.76rem;
    font-weight: 700;
}

.fc-account-menu__role--none {
    background: transparent;
    color: var(--fc-text-muted, #6b839e);
    padding-left: 0;
    font-style: italic;
}

.fc-account-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--fc-radius-sm, 4px);
    background: transparent;
    color: var(--fc-text-primary, #e8edf4);
    text-align: left;
    text-decoration: none;
}

.fc-account-menu__item:hover {
    border-color: var(--fc-surface-border, #364b6b);
    background: rgba(142, 200, 255, 0.08);
}

.fc-account-menu__item--danger {
    color: var(--fc-danger, #ff6b6b);
}

.fc-account-menu__item--button {
    cursor: pointer;
}

.fc-account-menu__item--button small {
    color: var(--fc-text-muted, #6b839e);
    font-size: 0.72rem;
}

.fc-account-menu__item--button:disabled,
.fc-account-menu__item--button[aria-disabled="true"] {
    cursor: not-allowed;
    color: var(--fc-text-muted, #6b839e);
    opacity: 0.65;
}

.fc-account-menu__impersonation {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--fc-surface-border, #364b6b);
}

.fc-account-menu__banner {
    margin: 0 0 0.5rem;
}

.fc-sidebar__account .fc-account-menu__trigger {
    width: 100%;
}

.fc-sidebar__account .fc-account-menu__panel {
    left: 0;
    right: auto;
}

@media (max-width: 640px) {
    .fc-account-menu__summary {
        display: none;
    }

    .fc-account-menu__panel {
        right: 0;
        width: min(20rem, calc(100vw - 1.5rem));
    }
}

.fc-content {
    flex: 1;
    padding: 1.5rem;
}

/* ===== Responsive ===== */
@media (min-width: 992px) {
    .fc-sidebar:not(.fc-sidebar--mobile) {
        display: flex;
    }

    .fc-sidebar--mobile,
    .fc-sidebar-overlay,
    .fc-topbar {
        display: none !important;
    }
}

/* ===== Scrollbar on main ===== */
.fc-main::-webkit-scrollbar { width: 6px; }
.fc-main::-webkit-scrollbar-track { background: var(--fc-primary-navy-dark, #111b30); }
.fc-main::-webkit-scrollbar-thumb { background: var(--fc-surface-border, #364b6b); border-radius: 3px; }
.fc-main::-webkit-scrollbar-thumb:hover { background: var(--fc-text-muted, #6b839e); }

  /* ===== FcAutocomplete - generic typeahead primitive ===== */
  .fc-autocomplete {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
      color: var(--fc-text-primary, #d6e3f4);
      font-family: var(--fc-font-sans, system-ui, sans-serif);
      font-size: 13px;
  }

  .fc-autocomplete__label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--fc-text-muted, #6b839e);
  }

  .fc-autocomplete__field {
      position: relative;
      display: flex;
      align-items: center;
      background: var(--fc-card-surface, #141e30);
      border: 1px solid var(--fc-border-subtle, #2c3a55);
      border-radius: 4px;
      transition: border-color 120ms ease;
  }

  .fc-autocomplete__field:focus-within {
      border-color: var(--fc-gold, #f1c440);
  }

  .fc-autocomplete__input {
      flex: 1 1 auto;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: none;
      padding: 8px 10px;
      color: inherit;
      font-family: inherit;
      font-size: inherit;
  }

  .fc-autocomplete__input::placeholder {
      color: var(--fc-text-muted, #6b839e);
  }

  .fc-autocomplete__refresh {
      flex: 0 0 auto;
      background: transparent;
      color: var(--fc-gold, #f1c440);
      border: 0;
      padding: 0 10px;
      height: 28px;
      cursor: pointer;
      font-size: 13px;
  }

  .fc-autocomplete__refresh:hover {
      color: var(--fc-ice, #8ec8ff);
  }

  .fc-autocomplete__refresh:disabled {
      cursor: not-allowed;
      opacity: 0.55;
  }

  .fc-autocomplete__indicator {
      flex: 0 0 auto;
      color: var(--fc-gold, #f1c440);
      padding: 0 10px;
      font-size: 11px;
      user-select: none;
  }

  .fc-autocomplete__list {
      list-style: none;
      margin: 4px 0 0 0;
      padding: 4px;
      background: var(--fc-card-surface, #141e30);
      border: 1px solid var(--fc-border-subtle, #2c3a55);
      border-radius: 4px;
      max-height: 320px;
      overflow-y: auto;
      box-shadow: 0 6px 18px rgba(4, 8, 18, 0.45);
      z-index: 10;
  }

  .fc-autocomplete__empty {
      padding: 10px;
      color: var(--fc-text-muted, #6b839e);
      text-align: center;
      font-style: italic;
  }

  .fc-autocomplete__row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 3px;
      cursor: pointer;
      color: inherit;
  }

  .fc-autocomplete__row.is-highlighted {
      background: var(--fc-dark-bg, #0d1520);
  }

  .fc-autocomplete__row.is-selected {
      background: var(--fc-royal, #243b6a);
      color: var(--fc-ice, #8ec8ff);
  }

  .fc-autocomplete__row-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
  }

  /* ===== FcVoiceSelector (Track M Phase 3) — global per scoped-CSS-drift memory ===== */
.fc-voice-selector {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--fc-text-primary, #d6e3f4);
    font-family: var(--fc-font-sans, system-ui, sans-serif);
    font-size: 13px;
}

.fc-voice-selector__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fc-text-muted, #6b839e);
}

.fc-voice-selector__field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--fc-card-surface, #141e30);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    border-radius: 4px;
    transition: border-color 120ms ease;
}

.fc-voice-selector__field:focus-within {
    border-color: var(--fc-gold, #f1c440);
}

.fc-voice-selector__input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: none;
    padding: 8px 10px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.fc-voice-selector__input::placeholder {
    color: var(--fc-text-muted, #6b839e);
}

.fc-voice-selector__indicator {
    flex: 0 0 auto;
    color: var(--fc-gold, #f1c440);
    padding: 0 10px;
    font-size: 11px;
    user-select: none;
}

.fc-voice-selector__list {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px;
    background: var(--fc-card-surface, #141e30);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    border-radius: 4px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(4, 8, 18, 0.45);
    z-index: 10;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.fc-voice-selector__empty {
    padding: 10px;
    color: var(--fc-text-muted, #6b839e);
    text-align: center;
    font-style: italic;
}

.fc-voice-selector__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    color: inherit;
}

.fc-voice-selector__row.is-highlighted {
    background: var(--fc-dark-bg, #0d1520);
}

.fc-voice-selector__row.is-selected {
    background: var(--fc-royal, #243b6a);
    color: var(--fc-ice, #8ec8ff);
}

.fc-voice-selector__row-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fc-voice-selector__row-name {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-voice-selector__row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
    color: var(--fc-text-muted, #6b839e);
    font-size: 11px;
}

.fc-voice-selector__row-engine {
    font-family: var(--fc-font-mono, Consolas, "Cascadia Mono", monospace);
}

.fc-voice-selector__row-base {
    font-family: var(--fc-font-mono, Consolas, "Cascadia Mono", monospace);
    color: var(--fc-text-muted, #6b839e);
}

.fc-voice-selector__row-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--fc-dark-bg, #0d1520);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fc-text-muted, #6b839e);
}

.fc-voice-selector__row-pill--clone {
    border-color: var(--fc-gold, #f1c440);
    color: var(--fc-gold, #f1c440);
}

.fc-voice-selector__row-pill--pending {
    border-color: var(--fc-warning, #fbbf24);
    color: var(--fc-warning, #fbbf24);
}

.fc-voice-selector__row-sample {
    flex: 0 0 auto;
    background: transparent;
    color: var(--fc-gold, #f1c440);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}

.fc-voice-selector__row-sample:hover {
    background: var(--fc-dark-bg, #0d1520);
}

.fc-voice-selector__row-sample:focus-visible {
    outline: 2px solid var(--fc-gold, #f1c440);
    outline-offset: 2px;
}

/* ===== FcModelSelector (Track M Phase 3) — global per scoped-CSS-drift memory ===== */
.fc-model-selector {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--fc-text-primary, #d6e3f4);
    font-family: var(--fc-font-sans, system-ui, sans-serif);
    font-size: 13px;
}

.fc-model-selector__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fc-text-muted, #6b839e);
}

.fc-model-selector__field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--fc-card-surface, #141e30);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    border-radius: 4px;
    transition: border-color 120ms ease;
}

.fc-model-selector__field:focus-within {
    border-color: var(--fc-gold, #f1c440);
}

.fc-model-selector__input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: none;
    padding: 8px 10px;
    color: inherit;
    font-family: var(--fc-font-mono, Consolas, "Cascadia Mono", monospace);
    font-size: 13px;
}

.fc-model-selector__input::placeholder {
    color: var(--fc-text-muted, #6b839e);
    font-family: var(--fc-font-sans, system-ui, sans-serif);
}

.fc-model-selector__refresh {
    flex: 0 0 auto;
    background: transparent;
    color: var(--fc-gold, #f1c440);
    border: 0;
    padding: 0 10px;
    height: 28px;
    cursor: pointer;
    font-size: 13px;
}

.fc-model-selector__refresh:hover {
    color: var(--fc-ice, #8ec8ff);
}

.fc-model-selector__indicator {
    flex: 0 0 auto;
    color: var(--fc-gold, #f1c440);
    padding: 0 10px;
    font-size: 11px;
    user-select: none;
}

.fc-model-selector__list {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px;
    background: var(--fc-card-surface, #141e30);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    border-radius: 4px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(4, 8, 18, 0.45);
    z-index: 10;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.fc-model-selector__empty {
    padding: 10px;
    color: var(--fc-text-muted, #6b839e);
    text-align: center;
    font-style: italic;
}

.fc-model-selector__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    color: inherit;
}

.fc-model-selector__row.is-highlighted {
    background: var(--fc-dark-bg, #0d1520);
}

.fc-model-selector__row.is-selected {
    background: var(--fc-royal, #243b6a);
    color: var(--fc-ice, #8ec8ff);
}

.fc-model-selector__row-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fc-model-selector__row-id {
    font-family: var(--fc-font-mono, Consolas, "Cascadia Mono", monospace);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-model-selector__row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
    color: var(--fc-text-muted, #6b839e);
    font-size: 11px;
}

.fc-model-selector__row-family,
.fc-model-selector__row-role,
.fc-model-selector__row-context,
.fc-model-selector__row-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--fc-dark-bg, #0d1520);
    border: 1px solid var(--fc-border-subtle, #2c3a55);
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.fc-model-selector__row-family {
    color: var(--fc-ice, #8ec8ff);
}

.fc-model-selector__row-role {
    color: var(--fc-text-primary, #d6e3f4);
}

.fc-model-selector__row-context {
    color: var(--fc-text-muted, #6b839e);
    font-family: var(--fc-font-mono, Consolas, "Cascadia Mono", monospace);
}

.fc-model-selector__row-tag {
    color: var(--fc-text-muted, #6b839e);
}

.fc-model-selector__row-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--fc-dark-bg, #0d1520);
    border: 1px solid var(--fc-gold, #f1c440);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fc-gold, #f1c440);
}

/* ============================================================
   FcInlineCard — cross-app inline card primitive
   Variants: Snippet, Barcode, QrCode, Image, Citation, Action,
             MoodAnnotation
   See docs/standards/fc-inline-card-design.md (Lane F L2).
   Card chrome lives here in global theme so:
     - Holiday-theme overrides (Lane I) attach via the alias tokens.
     - Other RCLs can compose with the same selectors.
     - We avoid the Blazor RCL bundle scope-ID drift class
       (memory: feedback_blazor_rcl_bundle_drift_publish).
   ============================================================ */
.fc-inline-card {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 3px 8px;
    background: var(--fc-card-bg);
    border: 1px solid var(--fc-card-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--fc-text-primary);
    cursor: pointer;
    user-select: none;
    transition: background var(--fc-transition-fast),
                border-color var(--fc-transition-fast),
                transform var(--fc-transition-fast);
    vertical-align: baseline;
}

.fc-inline-card:hover { border-color: var(--fc-card-glow); }
.fc-inline-card:focus-visible {
    outline: 2px solid var(--fc-card-glow);
    outline-offset: 2px;
}

.fc-inline-card--expanded {
    display: block;
    width: 100%;
    padding: 0.85rem 1.15rem;
    background: var(--fc-card-bg-raised);
    cursor: default;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.fc-inline-card--errored {
    border-color: var(--fc-error);
    background: var(--fc-error-bg);
}

.fc-inline-card--loading {
    background: var(--fc-card-bg);
    color: var(--fc-text-muted);
    pointer-events: none;
}

.fc-inline-card__error {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fc-error);
}

.fc-inline-card__error-retry {
    background: transparent;
    border: 1px solid var(--fc-error);
    color: var(--fc-error);
    border-radius: 4px;
    padding: 1px 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}

.fc-inline-card__error-retry:hover { background: var(--fc-error-bg); }

.fc-inline-card__skeleton {
    display: inline-block;
    width: 96px;
    height: 1em;
    background: var(--fc-card-bg-raised);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.fc-inline-card__skeleton-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--fc-card-bg) 0%,
        var(--fc-card-bg-raised) 50%,
        var(--fc-card-bg) 100%);
    animation: fc-inline-card-skeleton 1.4s linear infinite;
}

@keyframes fc-inline-card-skeleton {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .fc-inline-card { transition: none; }
    .fc-inline-card__skeleton-bar { animation: none; }
}

/* Variant accents — token-driven so Lane I holiday packs swap them */
.fc-inline-card--action          { --_fc-card-accent: var(--fc-gold); }
.fc-inline-card--barcode         { --_fc-card-accent: var(--fc-text-primary); }
.fc-inline-card--qrcode          { --_fc-card-accent: var(--fc-accent-glow); }
.fc-inline-card--citation        { --_fc-card-accent: var(--fc-purple); }
.fc-inline-card--image           { --_fc-card-accent: var(--fc-info); }
.fc-inline-card--moodannotation  { --_fc-card-accent: var(--fc-purple); }
.fc-inline-card--snippet         { --_fc-card-accent: var(--fc-text-secondary); }

.fc-inline-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.fc-inline-card__chip-icon {
    color: var(--_fc-card-accent);
    font-weight: 600;
}

.fc-inline-card__chip-label {
    color: var(--_fc-card-accent);
    font-weight: 600;
}

.fc-inline-card__chip-confidence {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--fc-gold-bg);
    color: var(--fc-gold);
}

.fc-inline-card__chip-confidence--high   { background: var(--fc-success-bg); color: var(--fc-success); }
.fc-inline-card__chip-confidence--medium { background: var(--fc-gold-bg);    color: var(--fc-gold);    }
.fc-inline-card__chip-confidence--low    { background: var(--fc-warning-bg); color: var(--fc-warning); }

.fc-inline-card__chip-kind {
    font-size: 0.65rem;
    color: var(--fc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-inline-card--expanded .fc-inline-card__chip-icon,
.fc-inline-card--expanded .fc-inline-card__title {
    color: var(--_fc-card-accent);
    font-weight: 600;
}

.fc-inline-card__title {
    display: block;
    color: var(--_fc-card-accent);
    font-weight: 600;
    margin: 0 0 0.3rem 0;
}

.fc-inline-card__subtitle {
    display: block;
    color: var(--fc-text-secondary);
    font-style: italic;
    margin: 0 0 0.4rem 0;
}

.fc-inline-card__caption {
    display: block;
    color: var(--fc-text-muted);
    font-size: 0.75rem;
    margin-top: 0.4rem;
}

.fc-inline-card__hint {
    color: var(--fc-text-muted);
    font-size: 0.75rem;
    margin-top: 0.4rem;
    font-style: italic;
}

.fc-inline-card__reference {
    color: var(--fc-text-secondary);
    font-family: var(--fc-font-mono);
    font-size: 0.8rem;
    margin: 0.2rem 0 0.4rem 0;
}

.fc-inline-card__excerpt {
    border-left: 3px solid var(--fc-purple);
    margin: 0.5rem 0;
    padding: 0.2rem 0.7rem;
    color: var(--fc-text-secondary);
    font-style: italic;
}

.fc-inline-card__params {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    margin: 0.3rem 0;
    font-size: 0.75rem;
}

.fc-inline-card__params dt {
    color: var(--fc-text-secondary);
    font-weight: 600;
}

.fc-inline-card__params dd {
    color: var(--fc-text-primary);
    margin: 0;
    font-family: var(--fc-font-mono);
}

.fc-inline-card__confidence {
    color: var(--fc-text-secondary);
    font-size: 0.75rem;
    margin-top: 0.3rem;
}

.fc-inline-card__confidence-value {
    color: var(--fc-gold);
    font-weight: 600;
}

.fc-inline-card__barcode-payload,
.fc-inline-card__qr-payload {
    margin: 0.2rem 0;
    padding: 0.4rem 0.6rem;
    background: var(--fc-primary-navy-dark);
    border-radius: 4px;
    color: var(--fc-text-primary);
    font-family: var(--fc-font-mono);
    font-size: 0.8rem;
    word-break: break-all;
    white-space: pre-wrap;
}

.fc-inline-card__hri {
    color: var(--fc-text-secondary);
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.2rem;
    font-family: var(--fc-font-mono);
}

.fc-inline-card__barcode-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fc-text, #E8EDF5);
    font-family: var(--fc-font-mono);
    word-break: break-all;
    margin-bottom: 0.25rem;
}

.fc-inline-card__barcode-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fc-inline-card__barcode-type {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--_fc-card-accent);
}

.fc-inline-card__qr-meta {
    display: flex;
    gap: 0.8rem;
    color: var(--fc-text-muted);
    font-size: 0.7rem;
    margin-top: 0.3rem;
}

.fc-inline-card__image-thumb {
    max-width: 24px;
    max-height: 24px;
    border-radius: 3px;
    object-fit: cover;
}

.fc-inline-card__image-full {
    display: block;
    border-radius: 6px;
    margin: 0.3rem 0;
    max-width: 100%;
}

.fc-inline-card__mood-token {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: lowercase;
    margin: 0 1px;
}

.fc-inline-card__mood-token--tone   { background: var(--fc-purple-bg); color: var(--fc-purple); }
.fc-inline-card__mood-token--volume { background: var(--fc-gold-bg);   color: var(--fc-gold);   }
.fc-inline-card__mood-token--pace   { background: var(--fc-info-bg);   color: var(--fc-info);   }

.fc-inline-card__mood-marker {
    display: block;
    background: var(--fc-primary-navy-dark);
    color: var(--fc-text-primary);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-family: var(--fc-font-mono);
    font-size: 0.78rem;
    margin: 0.2rem 0 0.4rem 0;
}

.fc-inline-card__mood-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.fc-inline-card__mood-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--fc-text-secondary);
}

.fc-inline-card__mood-axis {
    color: var(--fc-text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

.fc-inline-card__mood-duration {
    color: var(--fc-text-muted);
    font-size: 0.7rem;
    margin-top: 0.4rem;
}

.fc-inline-card__code {
    display: block;
    background: var(--fc-primary-navy-dark);
    border: 1px solid var(--fc-card-border);
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    margin: 0.2rem 0;
    overflow-x: auto;
    font-family: var(--fc-font-mono);
    font-size: 0.8rem;
    color: var(--fc-text-primary);
}

.fc-inline-card__quote {
    border-left: 3px solid var(--fc-purple);
    margin: 0;
    padding: 0.2rem 0.7rem;
    color: var(--fc-text-secondary);
    font-style: italic;
}

.fc-inline-card__paragraph {
    margin: 0.2rem 0;
    color: var(--fc-text-primary);
}

/* Action toolbar */
.fc-inline-card__actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.fc-inline-card__action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    background: var(--fc-card-bg);
    border: 1px solid var(--fc-card-border);
    color: var(--fc-text-primary);
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    transition: background var(--fc-transition-fast),
                border-color var(--fc-transition-fast);
}

.fc-inline-card__action:hover {
    background: var(--fc-card-bg-raised);
    border-color: var(--fc-card-glow);
}

.fc-inline-card__action:focus-visible {
    outline: 2px solid var(--fc-card-glow);
    outline-offset: 2px;
}

/* Action variant Execute button — gold accent to preserve parity with the legacy
   .fc-ai-chat__action-btn rule (DEPRECATED 2026-04-29 - moved to FcInlineCard). */
.fc-inline-card__action[data-action="execute"] {
    background: var(--fc-gold-bg);
    border-color: var(--fc-gold);
    color: var(--fc-gold);
    font-weight: 600;
}

.fc-inline-card__action[data-action="execute"]:hover {
    background: rgba(255, 179, 0, 0.25);
}

.fc-theme-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.fc-theme-picker__status {
    margin: 0;
    color: var(--fc-text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}

.fc-theme-picker__status strong {
    color: var(--fc-text-primary);
    font-weight: 700;
}

.fc-theme-picker__status-note {
    display: block;
    margin-top: 0.25rem;
    color: var(--fc-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   Log viewer chrome — used by FcLogViewer (UI.Components) and the
   per-app /logs Razor pages (MySQL / PHP / Signage / Telephony / Intranet).
   Lifted to the RCL global theme in 1.4.2 (Claude 2 lane) so future
   adopters do not need to copy the styles into each app's site.css.
   ════════════════════════════════════════════════════════════════════════ */

.fc-log-panel {
    background: var(--fc-primary-navy-dark);
    border-radius: var(--fc-radius-lg, 8px);
    border: 1px solid var(--fc-surface-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fc-log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--fc-surface);
    border-bottom: 1px solid var(--fc-surface-border);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fc-log-toolbar__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fc-text-primary);
}

.fc-log-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fc-log-toolbar .fc-btn {
    background: var(--fc-surface-raised);
    color: var(--fc-text-secondary, var(--fc-text-primary));
    border: 1px solid var(--fc-surface-border);
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

.fc-log-toolbar .fc-btn:hover {
    background: var(--fc-surface-overlay, var(--fc-surface-raised));
    color: var(--fc-text-primary);
}

.fc-log-filter {
    background: var(--fc-surface-raised);
    color: var(--fc-text-secondary, var(--fc-text-primary));
    border: 1px solid var(--fc-surface-border);
    border-radius: 4px;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.fc-log-container {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 600px;
    font-family: var(--fc-font-mono, 'Cascadia Code', 'Fira Code', 'Consolas', monospace);
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 0.25rem;
}

.fc-log-empty {
    padding: 2rem;
    text-align: center;
    color: var(--fc-text-muted);
}

.fc-log-line {
    display: flex;
    gap: 0.75rem;
    padding: 2px 0.5rem;
    border-radius: 2px;
    white-space: nowrap;
}

.fc-log-line:hover {
    background: var(--fc-surface-raised);
}

.fc-log-time {
    color: var(--fc-text-muted);
    flex-shrink: 0;
}

.fc-log-level {
    width: 7ch;
    flex-shrink: 0;
    font-weight: 600;
    text-transform: uppercase;
}

.fc-log-line--info    .fc-log-level { color: var(--fc-info, var(--fc-accent-glow)); }
.fc-log-line--warning .fc-log-level { color: var(--fc-warning, #E89D3E); }
.fc-log-line--error   .fc-log-level { color: var(--fc-error, #E84545); }
.fc-log-line--fatal   .fc-log-level { color: #ff4444; }
.fc-log-line--debug   .fc-log-level { color: var(--fc-text-muted); }
.fc-log-line--verbose .fc-log-level { color: var(--fc-surface-overlay, var(--fc-text-muted)); }

.fc-log-source {
    color: var(--fc-accent-glow);
    flex-shrink: 0;
}

.fc-log-msg {
    color: var(--fc-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-log-status {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--fc-text-muted);
    background: var(--fc-surface);
    border-top: 1px solid var(--fc-surface-border);
}

.fc-livestatus-indicator {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fc-surface-border);
    border-radius: var(--fc-radius-sm, 4px);
    background: var(--fc-surface-raised, var(--fc-surface));
    color: var(--fc-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.fc-livestatus-indicator__dot {
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 0.625rem;
    border-radius: 50%;
    background: var(--fc-info, #60a5fa);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-info, #60a5fa) 18%, transparent);
}

.fc-livestatus-indicator__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fc-livestatus--fresh .fc-livestatus-indicator__dot {
    background: var(--fc-success, #4ade80);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-success, #4ade80) 18%, transparent);
}

.fc-livestatus--stale .fc-livestatus-indicator__dot {
    background: var(--fc-warning, #fbbf24);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-warning, #fbbf24) 18%, transparent);
}

.fc-livestatus--disconnected .fc-livestatus-indicator__dot {
    background: var(--fc-danger, var(--fc-error, #f87171));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-danger, var(--fc-error, #f87171)) 18%, transparent);
}

.fc-settings-row {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fc-surface-border);
}

.fc-settings-row__label {
    color: var(--fc-text-primary);
    font-weight: 600;
}

.fc-settings-row__control {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fc-settings-row__input,
.fc-settings-row__checkbox,
.fc-settings-row__save,
.fc-settings-row__help {
    min-width: 44px;
    min-height: 44px;
}

.fc-settings-row__input {
    flex: 1 1 12rem;
    max-width: 24rem;
    border: 1px solid var(--fc-surface-border);
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    background: var(--fc-surface);
    color: var(--fc-text-primary);
}

.fc-settings-row__source {
    border: 1px solid var(--fc-surface-border);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    color: var(--fc-text-secondary, var(--fc-text-muted));
    background: var(--fc-surface-raised);
    font-size: 0.8125rem;
}

.fc-settings-row__hint,
.fc-settings-row__description {
    grid-column: 2 / -1;
    color: var(--fc-text-muted);
    font-size: 0.875rem;
}

.fc-settings-row__save,
.fc-settings-row__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fc-surface-border);
    border-radius: 4px;
    background: var(--fc-surface-raised);
    color: var(--fc-text-primary);
}

@media (max-width: 640px) {
    .fc-settings-row {
        grid-template-columns: 1fr;
    }

    .fc-settings-row__hint,
    .fc-settings-row__description {
        grid-column: 1;
    }
}

/* ==========================================================================
   Auth UX surfaces (ADR-178) — shared FcLoginPage / FcAccessDeniedPage /
   FcSignedOutPage. Global (not scoped) so the three siblings share .fc-auth*
   markup and survive RCL scope-ID drift. Air-gap safe; theme-token driven.
   ========================================================================== */
.fc-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    padding: 2rem 1rem;
}

.fc-auth__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    padding: 2.25rem 2rem;
    text-align: center;
    border: 1px solid var(--fc-border, #1d3a5f);
    border-radius: 12px;
    background: var(--fc-panel, #0f2540);
}

.fc-auth__icon {
    margin-bottom: 1.25rem;
    opacity: 0.95;
}

.fc-auth__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fc-ice, #8ec8ff);
    line-height: 1.2;
}

.fc-auth__subtitle {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: var(--fc-text-secondary, #9ab0cc);
    line-height: 1.5;
}

.fc-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.5rem;
    background: var(--fc-gold, #FFB300);
    color: var(--fc-dark-bg, #0d1520);
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.fc-auth__btn:hover {
    background: var(--fc-gold-light, #FFCA40);
    transform: translateY(-1px);
}

.fc-auth__btn:active {
    transform: translateY(0);
}

.fc-auth__btn:focus-visible {
    outline: 3px solid var(--fc-ice, #8ec8ff);
    outline-offset: 2px;
}

.fc-auth__btn--ghost {
    background: transparent;
    color: var(--fc-text-secondary, #9ab0cc);
    border-color: var(--fc-border, #1d3a5f);
}

.fc-auth__btn--ghost:hover {
    background: rgba(142, 200, 255, 0.08);
    color: var(--fc-ice, #8ec8ff);
}

.fc-auth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.fc-auth__diagnostic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: var(--fc-text-muted, #6b839e);
}

.fc-auth__identity {
    margin: 0 0 1.5rem;
    padding: 1rem;
    text-align: left;
    border: 1px solid var(--fc-border-subtle, #1d3a5f);
    border-radius: 8px;
    background: rgba(13, 21, 32, 0.4);
}

.fc-auth__identity dt {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fc-text-muted, #6b839e);
}

.fc-auth__identity dt:first-child {
    margin-top: 0;
}

.fc-auth__identity dd {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    color: var(--fc-text-secondary, #9ab0cc);
    word-break: break-word;
}

.fc-auth__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fc-auth__role {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--fc-gold-bg, rgba(255, 179, 0, 0.12));
    color: var(--fc-gold-light, #FFCA40);
}

.fc-auth__role--none {
    background: transparent;
    color: var(--fc-text-muted, #6b839e);
    font-weight: 500;
    font-style: italic;
    padding-left: 0;
}

.fc-auth__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 480px) {
    .fc-auth__card {
        padding: 1.75rem 1.25rem;
    }

    .fc-auth__actions {
        flex-direction: column;
    }

    .fc-auth__btn {
        width: 100%;
    }
}

/* ====================================================================================================
   FcReconnectModal — circuit reconnect/pause chrome (GLOBAL on purpose).
   The components-reconnect-* state gating must work even in apps that forget their per-app scoped
   styles bundle: a missing bundle once rendered every state message stacked at once (Divoom,
   2026-06-10). Includes the Blue Jay flight scene; reduced-motion users get a static bird.
   ==================================================================================================== */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .fc-reconnect-modal__actions {
    display: flex;
}

#components-reconnect-modal {
    background:
        radial-gradient(circle at top right, rgba(255, 179, 0, 0.14), transparent 12rem),
        linear-gradient(150deg, var(--fc-surface, #1e2d47), var(--fc-primary-navy-dark, #111b30));
    color: var(--fc-text-primary, #e8edf4);
    width: min(26rem, calc(100vw - 2rem));
    margin: 18vh auto;
    padding: 1.8rem 1.6rem 1.6rem;
    border: 1px solid rgba(142, 200, 255, 0.28);
    border-radius: var(--fc-radius-lg, 10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    z-index: 1050;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: fc-reconnect-fade-out 0.5s both;
}

#components-reconnect-modal[open] {
    animation: fc-reconnect-slide-up 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
               fc-reconnect-fade-in 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background: rgba(8, 13, 26, 0.86);
    backdrop-filter: blur(2px);
    animation: fc-reconnect-fade-in 0.5s ease-in-out;
    opacity: 1;
}

.fc-reconnect-modal__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}

.fc-reconnect-modal__title {
    margin: 0;
    color: var(--fc-gold, #FFB300);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---- The flight scene: clouds drift one way, the Blue Jay glides + bobs the other -------------- */

.fc-reconnect-modal__sky {
    position: relative;
    width: 100%;
    height: 4.4rem;
    overflow: hidden;
    border-radius: var(--fc-radius-md, 8px);
    background: linear-gradient(180deg, rgba(28, 78, 168, 0.35), rgba(8, 18, 38, 0.65));
    border: 1px solid rgba(142, 200, 255, 0.16);
}

.fc-reconnect-modal__bird {
    position: absolute;
    top: 0.9rem;
    left: calc(50% - 20px);
    line-height: 0;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    animation: fc-reconnect-bird-glide 7s ease-in-out infinite;
}

.fc-reconnect-modal__cloud {
    position: absolute;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(232, 237, 244, 0.22);
    box-shadow: 0.9rem -0.25rem 0 0 rgba(232, 237, 244, 0.14);
}

.fc-reconnect-modal__cloud--one {
    width: 2.6rem;
    top: 0.8rem;
    animation: fc-reconnect-cloud-drift 12s linear infinite;
}

.fc-reconnect-modal__cloud--two {
    width: 1.9rem;
    top: 2.3rem;
    animation: fc-reconnect-cloud-drift 17s linear -6s infinite;
}

.fc-reconnect-modal__cloud--three {
    width: 3.2rem;
    top: 3.3rem;
    animation: fc-reconnect-cloud-drift 21s linear -12s infinite;
}

@keyframes fc-reconnect-bird-glide {
    0%   { transform: translate(-4.4rem, 0.45rem) rotate(-4deg); }
    25%  { transform: translate(-2.2rem, -0.35rem) rotate(3deg); }
    50%  { transform: translate(0rem, 0.35rem) rotate(-3deg); }
    75%  { transform: translate(2.2rem, -0.45rem) rotate(4deg); }
    100% { transform: translate(4.4rem, 0.25rem) rotate(-2deg); }
}

@keyframes fc-reconnect-cloud-drift {
    0%   { left: 105%; }
    100% { left: -30%; }
}

@keyframes fc-reconnect-slide-up {
    0% { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

@keyframes fc-reconnect-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fc-reconnect-fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Copy + actions ----------------------------------------------------------------------------- */

.fc-reconnect-modal__lead {
    margin: 0;
    color: var(--fc-text-primary, #e8edf4);
    font-weight: 700;
    font-size: 1rem;
}

.fc-reconnect-modal__detail {
    display: block;
    margin-top: 0.35rem;
    color: var(--fc-text-secondary, #9ab0cc);
    font-weight: 400;
    font-size: 0.86rem;
    line-height: 1.45;
}

.fc-reconnect-modal__auto-status {
    display: block;
    margin-top: 0.3rem;
    color: var(--fc-accent-glow, #8ec8ff);
    font-variant-numeric: tabular-nums;
}

.fc-reconnect-modal__actions {
    display: none; /* shown by the failed state */
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

#components-reconnect-modal button {
    background: var(--fc-gold, #FFB300);
    color: var(--fc-primary-navy-dark, #111b30);
    border: none;
    border-radius: var(--fc-radius-md, 6px);
    min-height: 44px;
    padding: 0.6rem 1.4rem;
    font-weight: 800;
    cursor: pointer;
}

#components-reconnect-modal button:hover {
    background: #ffca40;
}

#components-reconnect-modal button:focus-visible {
    outline: 2px solid var(--fc-accent-glow, #8ec8ff);
    outline-offset: 2px;
}

#components-reconnect-modal .fc-reconnect-modal__button--ghost {
    background: transparent;
    color: var(--fc-text-primary, #e8edf4);
    border: 1px solid rgba(142, 200, 255, 0.45);
}

#components-reconnect-modal .fc-reconnect-modal__button--ghost:hover {
    background: rgba(142, 200, 255, 0.14);
}

@media (max-width: 480px) {
    #components-reconnect-modal {
        margin: 10vh auto;
        padding: 1.4rem 1rem 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal,
    #components-reconnect-modal[open],
    #components-reconnect-modal::backdrop {
        animation: none !important;
        transition: none !important;
        opacity: 1;
    }

    .fc-reconnect-modal__bird,
    .fc-reconnect-modal__cloud {
        animation: none !important;
    }
}

/* ============================================================================
   Proof Jay companion (FcProofJayAssistant) — global chrome.
   Lifted into the RCL global stylesheet (not a scoped .razor.css) to avoid the
   Blazor RCL scope-ID drift class. The fc-proof-jay.js runtime sets the sprite
   width/height/background-size/position; these rules own placement + balloon.
   ============================================================================ */
.fc-proof-jay {
    --fc-proof-jay-scale: 0.55;
    position: fixed;
    z-index: 1100;
    display: block;
    pointer-events: none;
}

.fc-proof-jay--inline {
    position: relative;
    z-index: auto;
}

.fc-proof-jay--bottom-right { right: 16px; bottom: 16px; }
.fc-proof-jay--bottom-left { left: 16px; bottom: 16px; }
.fc-proof-jay--top-right { right: 16px; top: 16px; }
.fc-proof-jay--top-left { left: 16px; top: 16px; }

.fc-proof-jay__stage {
    position: relative;
    transform: scale(var(--fc-proof-jay-scale));
    transform-origin: bottom right;
    pointer-events: auto;
}

.fc-proof-jay--bottom-left .fc-proof-jay__stage,
.fc-proof-jay--top-left .fc-proof-jay__stage {
    transform-origin: bottom left;
}

.fc-proof-jay__sprite {
    display: block;
    background-repeat: no-repeat;
    image-rendering: auto;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.32));
}

.fc-proof-jay__pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--fc-gold, #ffb100);
    box-shadow: 0 0 12px var(--fc-gold, #ffb100);
    opacity: 0;
    pointer-events: none;
}

.fc-proof-jay__balloon {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    max-width: 280px;
    min-width: 160px;
    padding: 12px 36px 12px 14px;
    border-radius: var(--fc-radius-md, 10px);
    border: 1px solid var(--fc-surface-border, var(--fc-border, #3978ca));
    background: var(--fc-surface-raised, var(--fc-surface, #10223a));
    color: var(--fc-text, #eef6ff);
    box-shadow: var(--fc-shadow-md, 0 12px 32px rgba(0, 0, 0, 0.32));
    pointer-events: auto;
    font-size: 0.95rem;
    line-height: 1.4;
}

.fc-proof-jay--bottom-left .fc-proof-jay__balloon,
.fc-proof-jay--top-left .fc-proof-jay__balloon {
    right: auto;
    left: 0;
}

/* Top placements anchor near the viewport top, so the balloon drops BELOW the sprite. */
.fc-proof-jay--top-right .fc-proof-jay__balloon,
.fc-proof-jay--top-left .fc-proof-jay__balloon {
    top: calc(100% + 8px);
    bottom: auto;
}

.fc-proof-jay__balloon-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fc-proof-jay__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--fc-radius-sm, 6px);
    background: transparent;
    color: var(--fc-text-muted, #a9bdd6);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.fc-proof-jay__close:hover,
.fc-proof-jay__close:focus-visible {
    border-color: var(--fc-gold, #ffb100);
    color: var(--fc-text, #eef6ff);
}

/* Non-color-dependent focus ring (WCAG 2.4.7) distinct from the gold hover border. */
.fc-proof-jay__close:focus-visible {
    outline: 3px solid var(--fc-jay-tail, #5aa2ff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fc-proof-jay__pointer {
        transition: none !important;
        animation: none !important;
    }
}