/* ════════════════════════════════════════════════════════════════════════
   fc_oc_client — Global Stylesheet
   ════════════════════════════════════════════════════════════════════════

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────────
   01 · Global Reset & Base
   02 · App Layout (shell, page wrapper, footer)
   03 · Surfaces & Glass Effects (frosted, dialogs, gradient box)
   04 · Theme Variables (Radzen ↔ MudBlazor mappings)
   05 · Backgrounds (nebula, static nebula, stars)
   06 · Utilities (visibility, transparent)
   07 · Header Variants (styles, light/dark, shapes, layouts)
   08 · Side-Drawer Nav Tree (nm-tree)
   09 · Navigation Colors (drawer, nav links, active)
   10 · Chat Component
   11 · MudBlazor Overrides
   12 · Syncfusion Overrides (accordion, diagram)
   13 · Component Tweaks
   14 · Responsive & Mobile
   15 · Safari Performance Optimizations
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   01 · GLOBAL RESET & BASE
   ════════════════════════════════════════════════════════════════════════ */

*:focus-visible {
    outline: none;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height for mobile */
    min-height: -webkit-fill-available;
    /* iOS Safari fallback */
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

html {
    /* Fix for iOS Safari 100vh issue */
    height: -webkit-fill-available;
}

body {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height for mobile */
    min-height: -webkit-fill-available;
}

/* ════════════════════════════════════════════════════════════════════════
   02 · APP LAYOUT (SHELL, PAGE WRAPPER, FOOTER)
   ════════════════════════════════════════════════════════════════════════ */

.mud-appbar .mud-toolbar-appbar {
    height: 64px;
}

.mud-main-content {
    position: relative;
    z-index: 1;
    padding: 0 !important;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page wrapper for sticky footer layout */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.page-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: calc(var(--mud-appbar-height) + env(safe-area-inset-top, 0px));
}

.site-footer {
    flex-shrink: 0;
}

.app-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height for mobile */
    min-height: -webkit-fill-available;
}

/* ════════════════════════════════════════════════════════════════════════
   03 · SURFACES & GLASS EFFECTS (FROSTED, DIALOGS, GRADIENT BOX)
   ════════════════════════════════════════════════════════════════════════ */



/* Animated gradient box */
.g {
    background-color: color-mix(in srgb, var(--mud-palette-background) 80%, transparent);
    border-radius: var(--mud-default-borderradius);
    position: relative;
    aspect-ratio: 1 / 1;
}

@property --deg {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.gradient-box::before,
.gradient-box::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: conic-gradient(from var(--deg) at center,
            var(--mud-palette-primary),
            var(--mud-palette-secondary),
            var(--mud-palette-tertiary),
            var(--mud-palette-primary));
    border-radius: inherit;
    z-index: -2;
    padding: 2px;
    animation: autoRotate 2s linear infinite;
}

.gradient-box::after {
    filter: blur(10px);
}

@keyframes autoRotate {
    to {
        --deg: 360deg;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   04 · THEME VARIABLES (RADZEN ↔ MUDBLAZOR MAPPINGS)
   ════════════════════════════════════════════════════════════════════════ */

/* Override Radzen CSS variables with MudBlazor theme colors */
:root {
    /* Primary colors */
    --rz-primary: var(--mud-palette-primary);
    --rz-primary-light: var(--mud-palette-primary-lighten);
    --rz-primary-lighter: var(--mud-palette-primary-lighten);
    --rz-primary-dark: var(--mud-palette-primary-darken);
    --rz-primary-darker: var(--mud-palette-primary-darken);

    /* Secondary colors */
    --rz-secondary: var(--mud-palette-secondary);
    --rz-secondary-light: var(--mud-palette-secondary-lighten);
    --rz-secondary-lighter: var(--mud-palette-secondary-lighten);
    --rz-secondary-dark: var(--mud-palette-secondary-darken);
    --rz-secondary-darker: var(--mud-palette-secondary-darken);

    /* Success colors */
    --rz-success: var(--mud-palette-success);
    --rz-success-light: var(--mud-palette-success-lighten);
    --rz-success-lighter: var(--mud-palette-success-lighten);
    --rz-success-dark: var(--mud-palette-success-darken);
    --rz-success-darker: var(--mud-palette-success-darken);

    /* Info colors */
    --rz-info: var(--mud-palette-info);
    --rz-info-light: var(--mud-palette-info-lighten);
    --rz-info-lighter: var(--mud-palette-info-lighten);
    --rz-info-dark: var(--mud-palette-info-darken);
    --rz-info-darker: var(--mud-palette-info-darken);

    /* Warning colors */
    --rz-warning: var(--mud-palette-warning);
    --rz-warning-light: var(--mud-palette-warning-lighten);
    --rz-warning-lighter: var(--mud-palette-warning-lighten);
    --rz-warning-dark: var(--mud-palette-warning-darken);
    --rz-warning-darker: var(--mud-palette-warning-darken);

    /* Danger/Error colors */
    --rz-danger: var(--mud-palette-error);
    --rz-danger-light: var(--mud-palette-error-lighten);
    --rz-danger-lighter: var(--mud-palette-error-lighten);
    --rz-danger-dark: var(--mud-palette-error-darken);
    --rz-danger-darker: var(--mud-palette-error-darken);

    /* Base colors */
    --rz-base-background-color: var(--mud-palette-background);
    --rz-base-foreground-color: var(--mud-palette-text-primary);
    --rz-text-color: var(--mud-palette-text-primary);
    --rz-text-secondary-color: var(--mud-palette-text-secondary);

    /* Surface colors */
    --rz-surface-background-color: var(--mud-palette-surface);
    --rz-content-background-color: var(--mud-palette-background);

    /* Border colors */
    --rz-border-color: var(--mud-palette-lines-default);
    --rz-border-disabled-color: var(--mud-palette-lines-inputs);

    /* Divider colors */
    --rz-divider-color: var(--mud-palette-divider);

    /* Disabled state */
    --rz-disabled-background-color: var(--mud-palette-action-disabled-background);
    --rz-disabled-color: var(--mud-palette-action-disabled);

    /* Hover states */
    --rz-hover-background-color: var(--mud-palette-action-default-hover);

    /* Selection/Active states */
    --rz-selection-background-color: var(--mud-palette-primary);
    --rz-selection-color: var(--mud-palette-primary-text);

    /* Tertiary colors (if MudBlazor has them) */
    --rz-tertiary: var(--mud-palette-tertiary, var(--mud-palette-primary));

    /* Dark mode support */
    --rz-series-1: var(--mud-palette-primary);
    --rz-series-2: var(--mud-palette-secondary);
    --rz-series-3: var(--mud-palette-tertiary, var(--mud-palette-info));
    --rz-series-4: var(--mud-palette-success);
    --rz-series-5: var(--mud-palette-warning);
    --rz-series-6: var(--mud-palette-error);
    --rz-scheduler-event-background-color: var(--mud-palette-primary);
    --rz-scheduler-view-selected-background-color: var(--mud-palette-surface);
    --rz-scheduler-view-selected-color: var(--mud-palette-tertiary);
    --rz-scheduler-toolbar-background-color: transparent;
    --rz-scheduler-header-background-color: transparent;
    --rz-scheduler-prev-next-button-background-color: transparent;
    --rz-scheduler-view-selected-background-color: transparent;
    --rz-scheduler-view-button-background-color: transparent;
    --rz-scheduler-toolbar-title-color: initial;
    --rz-editor-content-background-color: transparent;
    --rz-editor-button-background-color: #00000015;
    --rz-editor-toolbar-background-color: transparent;
    --rz-editor-button-selected-background-color: var(--mud-palette-primary);
    --rz-editor-button-selected-color: var(--mud-palette-primary-text);


    --mud-palette-divider: rgb(from var(--mud-palette-primary) r g b / 0.1) !important;
    --mud-palette-lines-default: var(--mud-palette-divider) !important;
    --mud-palette-lines-inputs: var(--mud-palette-divider) !important;
    --mud-palette-overlay-dark: rgb(12 13 13 / 91%) !important;

    --vscode-editorStickyScroll-background: var(--mud-palette-overlay-dark);
    --vscode-editorStickyScroll-shadow: var(--mud-palette-primary-hover);
}

/* Theme-scoped dropdown surface */
.light-theme,
.dark-theme {
    --rz-dropdown-open-background-color: var(--mud-palette-surface);
}

/* Chart gridlines legibility in light theme */
.light-theme .mud-charts-gridlines-yaxis path {
    stroke: rgb(0 0 0) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   05 · BACKGROUNDS (NEBULA, STATIC NEBULA, STARS)
   ════════════════════════════════════════════════════════════════════════ */

.dark-theme .nebula-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height - works better on mobile */
    height: -webkit-fill-available;
    /* iOS Safari fallback */
    /* z-index 0 (not -1): -1 paints behind the <body> background and hides the nebula. */
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    /* Force GPU acceleration for better mobile rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Removed will-change for Safari performance - it causes layer explosion */
    contain: strict;
}

/* Animation paused state - completely disable animations */
.nebula-svg.animation-paused,
.nebula-svg.animation-paused * {
    animation: none !important;
    animation-play-state: paused !important;
}

/* Animate the entire SVG container - only when not paused */
.dark-theme .nebula-svg:not(.animation-paused) {
    animation: nebula-drift 30s ease-in-out infinite alternate,
        nebula-color-shift 45s linear infinite;
}

/* Reduce animation complexity on mobile for better performance */
@media (max-width: 768px),
(hover: none) {
    .dark-theme .nebula-svg {
        /* Simpler animation for mobile - less transform changes */
        animation: nebula-drift-mobile 30s ease-in-out infinite alternate,
            nebula-color-shift 45s linear infinite;
    }
}

@keyframes nebula-drift-mobile {
    0% {
        transform: scale(1.1) translateZ(0);
    }

    50% {
        transform: scale(1.15) translateZ(0);
    }

    100% {
        transform: scale(1.1) translateZ(0);
    }
}

@keyframes nebula-drift {
    0% {
        transform: scale(1.2) translate(0, 0) rotate(0deg);
    }

    33% {
        transform: scale(1.4) translate(2%, -2%) rotate(3deg);
    }

    66% {
        transform: scale(1.3) translate(-2%, 2%) rotate(-2deg);
    }

    100% {
        transform: scale(1.2) translate(0, 0) rotate(0deg);
    }
}

@keyframes nebula-color-shift {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        filter: hue-rotate(20deg) brightness(1.1);
    }

    50% {
        filter: hue-rotate(0deg) brightness(1);
    }

    75% {
        filter: hue-rotate(-20deg) brightness(0.9);
    }

    100% {
        filter: hue-rotate(0deg) brightness(1);
    }
}

.stars-layer {
    animation: stars-twinkle 3s ease-in-out infinite;
}

@keyframes stars-twinkle {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Static nebula — light theme */
.light-theme .static-nebula-bg {
    pointer-events: visible;
    /* background:
        radial-gradient(ellipse 80% 60% at 30% 30%, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 70% 70% at 70% 60%, color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 80%, color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent) 0%, transparent 70%),
        var(--mud-palette-appbar-background); */
    background-color: var(--mud-palette-surface);
    background-attachment: fixed;
    background-size: cover;
}

/* Static nebula — dark theme */
.dark-theme .static-nebula-bg {
    pointer-events: visible;
    /* background:
        radial-gradient(ellipse 80% 60% at 30% 30%, color-mix(in srgb, var(--mud-palette-primary) 40%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 70% 70% at 70% 60%, color-mix(in srgb, var(--mud-palette-tertiary) 35%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 80%, color-mix(in srgb, var(--mud-palette-secondary) 30%, transparent) 0%, transparent 70%),
        var(--mud-palette-background); */
    background-color: var(--mud-palette-surface);
    background-attachment: fixed;
    background-size: cover;
}

/* ════════════════════════════════════════════════════════════════════════
   06 · UTILITIES (VISIBILITY, TRANSPARENT)
   ════════════════════════════════════════════════════════════════════════ */

/* Scroll to top button visibility */
.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.visible.absolute {
    position: fixed !important;
    bottom: 32px;
    right: 32px;
    z-index: 2000;
}

.invisible {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.background-transparent {
    background-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════
   07 · HEADER VARIANTS
   ════════════════════════════════════════════════════════════════════════ */


/* ── Header Style Variants ── */
.header-transparent {
    background: transparent !important;
    box-shadow: none !important;
}

.header-frosted {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

.light-theme .header-frosted {
    background: rgba(255, 255, 255, 0.55) !important;
}

.dark-theme .header-frosted {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* ── Header Light Theme (dark text on light/transparent backgrounds) ── */
.header-light .mud-appbar {
    color: rgba(0, 0, 0, 0.87) !important;
}

.header-light .mud-appbar .mud-icon-button,
.header-light .mud-appbar .mud-button,
.header-light .mud-appbar .mud-link {
    color: rgba(0, 0, 0, 0.87) !important;
}

.header-light .hn-root {
    --hn-top-link-color: rgba(0, 0, 0, 0.87);
    --hn-top-link-focus-ring: rgba(0, 0, 0, 0.12);
}

.header-light .mud-drawer {
    color: rgba(0, 0, 0, 0.87);
}

.header-light .mud-nav-link,
.header-light .mud-navmenu .mud-nav-link {
    color: rgba(0, 0, 0, 0.67);
}

.header-light .mud-nav-link:hover,
.header-light .mud-navmenu .mud-nav-link:hover {
    color: rgba(0, 0, 0, 0.87);
}

.header-light .mud-nav-link.active,
.header-light .mud-navmenu .mud-nav-link.active {
    color: var(--mud-palette-primary);
}

.header-light .mud-nav-group-title {
    color: rgba(0, 0, 0, 0.87);
}

/* ── Header Dark Theme (light text on dark backgrounds) ── */
.header-dark .mud-appbar {
    color: #ffffff !important;
}

.header-dark .mud-appbar .mud-icon-button,
.header-dark .mud-appbar .mud-button,
.header-dark .mud-appbar .mud-link {
    color: #ffffff !important;
}

.header-dark .hn-root {
    --hn-top-link-color: #ffffff;
    --hn-top-link-focus-ring: rgba(255, 255, 255, 0.25);
}

.header-dark .mud-drawer {
    color: #ffffff;
}

.header-dark .mud-nav-link,
.header-dark .mud-navmenu .mud-nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.header-dark .mud-nav-link:hover,
.header-dark .mud-navmenu .mud-nav-link:hover {
    color: #ffffff;
}

.header-dark .mud-nav-link.active,
.header-dark .mud-navmenu .mud-nav-link.active {
    color: var(--mud-palette-primary);
}

.header-dark .mud-nav-group-title {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Mobile side drawer ──
   Make the inner nav menu transparent so the drawer's header-matching
   background (theme nebula or custom color) shows through. */
.header-drawer .mud-drawer-content,
.header-drawer .nm-tree {
    background-color: transparent !important;
}

/* ── Header Opacity (value set via inline style --header-opacity) ── */
.light-theme .header-opacity {
    background: rgba(var(--mud-palette-primary-rgb, 69, 54, 207), var(--header-opacity, 0.85)) !important;
}

.dark-theme .header-opacity {
    background: rgba(var(--mud-palette-surface-rgb, 30, 30, 30), var(--header-opacity, 0.85)) !important;
}

/* ── Header Gradient ── */
.header-gradient {
    /* gradient value set via inline style */
    box-shadow: none !important;
}

/* Transparent & Frosted headers overlay page content */
.header-transparent,
.header-frosted {
    position: relative;
    z-index: 1100;
}

/* Fix text color for frosted/transparent headers in light mode */
.light-theme .header-frosted .mud-appbar {
    color: var(--mud-palette-text-primary);
}

/* ── Header Shape Variants ── */
.header-floating {
    margin: 12px 16px 0 !important;
    border-radius: var(--mud-default-borderradius) !important;
    width: calc(100% - 32px) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
}

.header-contained {
    max-width: 1400px !important;
    margin: 0 auto !important;
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius) !important;
}

.header-bordered {
    border-bottom: 3px solid var(--mud-palette-primary) !important;
    box-shadow: none !important;
}

/* ── Header Layout Variants ── */
.header-layout-center .mud-appbar {
    justify-content: center;
}

.header-layout-center .header-menu-section {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-layout-stacked .mud-toolbar,
.header-layout-stackedlogo .mud-toolbar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
    position: relative;
}

.header-layout-stacked .header-logo-section,
.header-layout-stackedlogo .header-logo-section {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.25rem 0;
}

.header-layout-stacked .header-menu-section,
.header-layout-stackedlogo .header-menu-section {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.25rem 0;
}

.header-layout-stacked .header-actions-section,
.header-layout-stackedlogo .header-actions-section {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-layout-split .header-menu-left,
.header-layout-split .header-menu-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-layout-split .header-menu-left {
    justify-content: flex-end;
}

.header-layout-split .header-menu-right {
    justify-content: flex-start;
}

.header-layout-split .header-logo-section {
    padding: 0 1rem;
    flex-shrink: 0;
}

/* ── Minimal Header ── */
.header-minimal .mud-appbar {
    min-height: 56px;
}

/* ── Sticky Scroll-Shrink ── */
.header-shrunk {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-shrunk .mud-appbar {
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-shrunk .mud-appbar img {
    height: 28px !important;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-shrunk .hn-link-top {
    font-size: 0.82rem;
    padding: 0.35rem 0.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-not-shrunk .mud-appbar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-not-shrunk .mud-appbar img {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-not-shrunk .hn-link-top {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════════
   08 · SIDE-DRAWER NAV TREE (CUSTOM RECURSIVE COMPONENT)
   ════════════════════════════════════════════════════════════════════════ */

.nm-tree {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.nm-controls {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    padding: 2px 8px 6px 8px;
    opacity: 0.7;
}

.nm-controls:hover {
    opacity: 1;
}

.nm-controls-shared {
    padding: 8px 12px 4px 12px;
}

.nm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-right: 12px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    margin: 1px 6px;
    transition: background-color 120ms ease;
}

.nm-row:hover {
    background-color: rgba(127, 127, 127, 0.12);
}

.nm-chevron,
.nm-chevron-spacer {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease;
}

.nm-chevron-open {
    transform: rotate(90deg);
}

.nm-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-icon .mud-icon-root {
    font-size: 1.15rem;
}

.nm-text {
    flex: 1 1 auto;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Theme-aware coloring (header-dark / header-light wrap the drawer). */
.header-dark .nm-tree,
.header-dark .nm-tree .mud-icon-root {
    color: rgba(255, 255, 255, 0.92);
}

.header-dark .nm-row:hover {
    background-color: rgba(255, 255, 255, 0.10);
}

.header-light .nm-tree,
.header-light .nm-tree .mud-icon-root {
    color: rgba(0, 0, 0, 0.78);
}

.header-light .nm-row:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* ════════════════════════════════════════════════════════════════════════
   09 · NAVIGATION COLORS (DRAWER, NAV LINKS, ACTIVE)
   ════════════════════════════════════════════════════════════════════════ */

/* Light theme drawer and menu text colors */
.light-theme .mud-drawer {
    color: var(--mud-palette-drawer-text);
}

.light-theme .mud-nav-link,
.light-theme .mud-navmenu .mud-nav-link {
    color: var(--mud-palette-drawer-text);
}

.light-theme .mud-nav-link:hover,
.light-theme .mud-navmenu .mud-nav-link:hover {
    color: var(--mud-palette-text-primary);
}

.light-theme .mud-nav-link.active,
.light-theme .mud-navmenu .mud-nav-link.active {
    color: var(--mud-palette-primary);
}

.light-theme .mud-nav-group-title {
    color: var(--mud-palette-text-primary);
}

/* Light theme menu/popover text colors */
.light-theme .mud-menu .mud-list-item,
.light-theme .mud-popover .mud-list-item {
    color: var(--mud-palette-text-primary);
}

.mud-nav-link-active {
    background-color: var(--mud-palette-primary-hover);
}

/* ════════════════════════════════════════════════════════════════════════
   10 · CHAT COMPONENT
   ════════════════════════════════════════════════════════════════════════ */

/* ── Chat Icon & Badge ── */
.chat-icon-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.chat-badge {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

/* ── Chat Window Overlay ── */
.chat-window-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1300;
    backdrop-filter: blur(2px);
}

/* ── Chat Window ── */
.chat-window {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
    height: 600px;
    max-height: calc(100vh - 100px);
    min-height: 300px;
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 1301;
    overflow: hidden;
}

/* Medium screens - adjust positioning */
@media (max-width: 900px) {
    .chat-window {
        right: 10px;
        width: 350px;
        max-width: calc(100vw - 20px);
    }
}

/* Smaller screens - take more space */
@media (max-width: 768px) {
    .chat-window {
        top: 60px;
        right: 5px;
        left: 5px;
        width: auto;
        max-width: none;
        height: calc(100vh - 70px);
        max-height: none;
    }
}

/* ── Chat Header ── */
.chat-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

.chat-header-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── Chat Body ── */
.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ── Chat Groups List ── */
.chat-groups-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-group-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 10px;
}

.chat-group-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.chat-group-item.has-unread {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.chat-group-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-group-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.chat-group-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-group-member-count {
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
}

.chat-group-avatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chat-list-avatar-container {
    position: relative;
    margin-left: -6px;
}

.chat-list-avatar-container:first-child {
    margin-left: 0;
}

.chat-list-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.55rem !important;
    border: 1.5px solid var(--mud-palette-surface);
}

.chat-list-avatar.more-avatar {
    background-color: var(--mud-palette-action-default-hover) !important;
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.5rem !important;
    margin-left: -6px;
}

.chat-list-avatar-indicator {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-surface);
}

.chat-list-avatar-indicator.online {
    background-color: #4caf50;
}

.chat-list-avatar-indicator.away {
    background-color: #ff9800;
}

.chat-list-avatar-indicator.offline {
    background-color: #9e9e9e;
}

.chat-group-members {
    opacity: 0.7;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unread-chip {
    flex-shrink: 0;
}

/* ── Chat Conversation ── */
.chat-conversation {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-conversation-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    gap: 6px;
    flex-shrink: 0;
}

.chat-conversation-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 150px;
}

.chat-conversation-title .MudText-root:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem !important;
    line-height: 1.2;
}

.chat-conversation-title .chat-header-info {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ── Chat Messages ── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    min-height: 0;
}

.chat-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 80%;
}

.message-bubble {
    position: relative;
    background: var(--mud-palette-background);
    padding: 8px 10px 8px 40px;
    border-radius: var(--mud-default-borderradius);
    word-wrap: break-word;
    word-break: break-word;
}

.message-avatar-container {
    position: absolute;
    top: 8px;
    left: 8px;
    flex-shrink: 0;
}

.message-avatar-container.own {
    left: auto;
    right: 8px;
}

.message-avatar-container.own .message-avatar {
    background-color: var(--mud-palette-primary-darken) !important;
}

.message-avatar {
    font-size: 0.75rem;
}

.avatar-status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
}

.avatar-status-indicator.online {
    background-color: #4caf50;
}

.avatar-status-indicator.away {
    background-color: #ff9800;
}

.avatar-status-indicator.offline {
    background-color: #9e9e9e;
}

/* Presence Status in Header */
.presence-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.presence-status .presence-indicator {
    font-size: 8px !important;
    width: 8px;
    height: 8px;
}

.presence-status.online {
    color: #4caf50;
}

.presence-status.online .presence-indicator {
    color: #4caf50;
}

.presence-status.away {
    color: #ff9800;
}

.presence-status.away .presence-indicator {
    color: #ff9800;
}

.presence-status.offline {
    color: #9e9e9e;
}

.presence-status.offline .presence-indicator {
    color: #9e9e9e;
}

/* Chat Header Info */
.chat-header-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.member-count {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
}

/* Chat Header Avatars */
.chat-header-avatars {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.header-avatar-container {
    position: relative;
    display: inline-block;
    margin-left: -6px;
}

.header-avatar-container:first-child {
    margin-left: 0;
}

.header-avatar {
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 26px !important;
    height: 26px !important;
    font-size: 0.6rem !important;
    border: 2px solid var(--mud-palette-surface);
}

.header-avatar:hover {
    transform: scale(1.1);
    z-index: 1;
}

.header-avatar-indicator {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-surface);
}

.header-avatar-indicator.online {
    background-color: #4caf50;
}

.header-avatar-indicator.away {
    background-color: #ff9800;
}

.header-avatar-indicator.offline {
    background-color: #9e9e9e;
}

.more-members-button {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 50%;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin-left: -6px;
}

/* Member List Dialog */
.member-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    width: 100%;
}

.member-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.member-avatar-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
}

.member-avatar-indicator.online {
    background-color: #4caf50;
}

.member-avatar-indicator.away {
    background-color: #ff9800;
}

.member-avatar-indicator.offline {
    background-color: #9e9e9e;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-info .MudText-root:first-child {
    font-weight: 500;
}

.message-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.chat-message.own {
    align-items: flex-end;
    align-self: flex-end;
}

.chat-message.system {
    align-items: center;
    align-self: center;
    max-width: 100%;
    margin: 8px 0;
}

.system-message-text {
    opacity: 0.6;
    font-style: italic;
}

.message-sender {
    margin-bottom: 4px;
    opacity: 0.7;
}

.chat-message.own .message-bubble {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 8px 40px 8px 10px;
}

.message-content {
    margin-bottom: 4px;
}

.message-content a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.9;
}

.message-content a:hover {
    opacity: 1;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    opacity: 0.7;
}

.message-time {
    font-size: 0.75rem;
}

/* ── Chat Input ── */
.chat-input-container {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 12px;
    background: var(--mud-palette-background);
    flex-shrink: 0;
}

.chat-input-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.chat-input-row .flex-grow-1 {
    flex: 1;
}

.chat-input-button {
    margin-top: 4px;
}

.chat-message-input {
    width: 100%;
}

.chat-message-input textarea {
    max-height: 120px !important;
    /* Approximately 5 lines */
    overflow-y: auto !important;
    resize: none !important;
}

/* ── Emoji Picker ── */
.emoji-picker {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    padding: 12px;
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--mud-default-borderradius);
    transition: background-color 0.2s;
}

.emoji-button:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Mobile Responsive - Full screen chat */
@media (max-width: 600px) {
    .chat-window {
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
    }

    .emoji-picker {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   11 · MUDBLAZOR OVERRIDES
   ════════════════════════════════════════════════════════════════════════ */

.mud-table-empty-row {
    background-color: transparent !important;
}

/* ── Theme sizing bindings ──────────────────────────────────────────────
   MudBlazor bakes fixed sizes into its size variants and several text
   styles (helpers, chips, avatars, badges, …), so they would otherwise
   ignore Settings → Theme. ThemeService emits, via MainLayout:
     --mudc-text-scale       Base Size type-ramp scale (.875rem reference)
     --mudc-component-scale  the Component Scale setting
   Every rule below re-creates MudBlazor's original value × the combined
   factor, so at the defaults (both scales = 1) the rendering is unchanged. */
:root {
    --mudc-scale: calc(var(--mudc-text-scale, 1) * var(--mudc-component-scale, 1));
}

/* Helper & validation text (MudBlazor hardcodes the caption values) */
.mud-input-helper-text {
    font-size: var(--mud-typography-caption-size, .75rem);
    line-height: var(--mud-typography-caption-lineheight, 1.66);
    letter-spacing: var(--mud-typography-caption-letterspacing, .03333em);
}

.mud-input-control>.mud-input-control-input-container>.mud-input-label-inputcontrol {
    font-size: var(--mud-typography-body1-family);
}

/* Buttons: small/large variants of filled/outlined/text (medium follows the theme) */
.mud-button-filled-size-small { font-size: calc(.8125rem * var(--mudc-scale)); padding: calc(4px * var(--mudc-scale)) calc(10px * var(--mudc-scale)); }
.mud-button-filled-size-large { font-size: calc(.9375rem * var(--mudc-scale)); padding: calc(8px * var(--mudc-scale)) calc(22px * var(--mudc-scale)); }
.mud-button-outlined-size-small { font-size: calc(.8125rem * var(--mudc-scale)); padding: calc(3px * var(--mudc-scale)) calc(9px * var(--mudc-scale)); }
.mud-button-outlined-size-large { font-size: calc(.9375rem * var(--mudc-scale)); padding: calc(7px * var(--mudc-scale)) calc(21px * var(--mudc-scale)); }
.mud-button-text-size-small { font-size: calc(.8125rem * var(--mudc-scale)); padding: calc(4px * var(--mudc-scale)) calc(5px * var(--mudc-scale)); }
.mud-button-text-size-large { font-size: calc(.9375rem * var(--mudc-scale)); padding: calc(8px * var(--mudc-scale)) calc(11px * var(--mudc-scale)); }

/* Button start icons */
.mud-button-icon-size-small > *:first-child { font-size: calc(18px * var(--mudc-scale)); }
.mud-button-icon-size-medium > *:first-child { font-size: calc(20px * var(--mudc-scale)); }
.mud-button-icon-size-large > *:first-child { font-size: calc(22px * var(--mudc-scale)); }

/* Icon buttons */
.mud-icon-button { padding: calc(12px * var(--mudc-scale)); font-size: calc(1.5rem * var(--mudc-scale)); }
.mud-icon-button-size-small { padding: calc(3px * var(--mudc-scale)); font-size: calc(1.125rem * var(--mudc-scale)); }
.mud-icon-button-size-large.mud-button > .mud-icon-button-label > .mud-icon-size-large { font-size: calc(2rem * var(--mudc-scale)); }

/* Button groups (BlockEditor toolbar etc.) */
.mud-button-group-root.mud-button-group-filled-size-small .mud-button-root { font-size: calc(.8125rem * var(--mudc-scale)); padding: calc(4px * var(--mudc-scale)) calc(10px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-filled-size-large .mud-button-root { font-size: calc(.9375rem * var(--mudc-scale)); padding: calc(8px * var(--mudc-scale)) calc(22px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-outlined-size-small .mud-button-root { font-size: calc(.8125rem * var(--mudc-scale)); padding: calc(3px * var(--mudc-scale)) calc(9px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-outlined-size-large .mud-button-root { font-size: calc(.9375rem * var(--mudc-scale)); padding: calc(7px * var(--mudc-scale)) calc(21px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-text-size-small .mud-button-root { font-size: calc(.8125rem * var(--mudc-scale)); padding: calc(4px * var(--mudc-scale)) calc(5px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-text-size-large .mud-button-root { font-size: calc(.9375rem * var(--mudc-scale)); padding: calc(8px * var(--mudc-scale)) calc(11px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-filled-size-small .mud-button-root.mud-icon-button { padding: calc(4px * var(--mudc-scale)) calc(10px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-filled-size-large .mud-button-root.mud-icon-button { padding: calc(8px * var(--mudc-scale)) calc(16px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-outlined-size-small .mud-button-root.mud-icon-button { padding: calc(3px * var(--mudc-scale)) calc(9px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-outlined-size-large .mud-button-root.mud-icon-button { padding: calc(7px * var(--mudc-scale)) calc(15px * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-filled-size-small .mud-button-root.mud-icon-button .mud-icon-root,
.mud-button-group-root.mud-button-group-outlined-size-small .mud-button-root.mud-icon-button .mud-icon-root,
.mud-button-group-root.mud-button-group-text-size-small .mud-button-root.mud-icon-button .mud-icon-root { font-size: calc(1.422rem * var(--mudc-scale)); }
.mud-button-group-root.mud-button-group-filled-size-large .mud-button-root.mud-icon-button .mud-icon-root,
.mud-button-group-root.mud-button-group-outlined-size-large .mud-button-root.mud-icon-button .mud-icon-root,
.mud-button-group-root.mud-button-group-text-size-large .mud-button-root.mud-icon-button .mud-icon-root { font-size: calc(1.641rem * var(--mudc-scale)); }

/* Chips */
.mud-chip.mud-chip-size-small { font-size: calc(12px * var(--mudc-scale)); height: calc(24px * var(--mudc-scale)); border-radius: calc(12px * var(--mudc-scale)); padding: 0 calc(8px * var(--mudc-scale)); }
.mud-chip.mud-chip-size-medium { font-size: calc(14px * var(--mudc-scale)); height: calc(32px * var(--mudc-scale)); border-radius: calc(16px * var(--mudc-scale)); }
.mud-chip.mud-chip-size-large { font-size: calc(16px * var(--mudc-scale)); height: calc(40px * var(--mudc-scale)); border-radius: calc(20px * var(--mudc-scale)); padding: 0 calc(16px * var(--mudc-scale)); }
.mud-chip.mud-chip-size-small .mud-avatar { width: calc(18px * var(--mudc-scale)); height: calc(18px * var(--mudc-scale)); font-size: calc(.625rem * var(--mudc-scale)); }
.mud-chip.mud-chip-size-medium .mud-avatar { width: calc(24px * var(--mudc-scale)); height: calc(24px * var(--mudc-scale)); font-size: calc(.75rem * var(--mudc-scale)); }
.mud-chip.mud-chip-size-large .mud-avatar { width: calc(32px * var(--mudc-scale)); height: calc(32px * var(--mudc-scale)); font-size: calc(1rem * var(--mudc-scale)); }
.mud-chip.mud-chip-size-small .mud-icon-root { font-size: calc(1.125rem * var(--mudc-scale)); }
.mud-chip.mud-chip-size-large .mud-chip-icon { font-size: calc(1.5rem * var(--mudc-scale)); }

/* Avatars */
.mud-avatar.mud-avatar-small { width: calc(24px * var(--mudc-scale)); height: calc(24px * var(--mudc-scale)); font-size: calc(.75rem * var(--mudc-scale)); }
.mud-avatar.mud-avatar-medium { width: calc(40px * var(--mudc-scale)); height: calc(40px * var(--mudc-scale)); font-size: calc(1.25rem * var(--mudc-scale)); }
.mud-avatar.mud-avatar-large { width: calc(56px * var(--mudc-scale)); height: calc(56px * var(--mudc-scale)); font-size: calc(1.5rem * var(--mudc-scale)); }

/* Badges */
.mud-badge { font-size: calc(12px * var(--mudc-scale)); height: calc(20px * var(--mudc-scale)); min-width: calc(20px * var(--mudc-scale)); padding: calc(4px * var(--mudc-scale)) calc(6px * var(--mudc-scale)); border-radius: calc(10px * var(--mudc-scale)); }
.mud-badge.mud-badge-icon { width: calc(20px * var(--mudc-scale)); height: calc(20px * var(--mudc-scale)); }
.mud-badge.mud-badge-icon .mud-icon-badge { font-size: calc(12px * var(--mudc-scale)); }
.mud-badge.mud-badge-dot { width: calc(9px * var(--mudc-scale)); height: calc(9px * var(--mudc-scale)); }

/* Icons (MudIcon size classes; default = medium) */
.mud-icon-size-small { font-size: calc(1.25rem * var(--mudc-scale)); }
.mud-icon-size-medium { font-size: calc(1.5rem * var(--mudc-scale)); }
.mud-icon-size-large { font-size: calc(2.25rem * var(--mudc-scale)); }

/* Floating action buttons (MudScrollToTop etc.) */
.mud-fab-size-small { width: calc(40px * var(--mudc-scale)); height: calc(40px * var(--mudc-scale)); }
.mud-fab-size-medium { width: calc(48px * var(--mudc-scale)); height: calc(48px * var(--mudc-scale)); }
.mud-fab-size-large { width: calc(56px * var(--mudc-scale)); height: calc(56px * var(--mudc-scale)); }
.mud-fab-extended.mud-fab-size-small { height: calc(34px * var(--mudc-scale)); min-width: calc(34px * var(--mudc-scale)); padding: 0 calc(12px * var(--mudc-scale)); border-radius: calc(17px * var(--mudc-scale)); }
.mud-fab-extended.mud-fab-size-medium { height: calc(40px * var(--mudc-scale)); min-width: calc(40px * var(--mudc-scale)); padding: 0 calc(16px * var(--mudc-scale)); border-radius: calc(20px * var(--mudc-scale)); }
.mud-fab-extended.mud-fab-size-large { height: calc(48px * var(--mudc-scale)); min-width: calc(48px * var(--mudc-scale)); padding: 0 calc(16px * var(--mudc-scale)); border-radius: calc(24px * var(--mudc-scale)); }

/* Expansion panels */
.mud-expand-panel .mud-expand-panel-header { font-size: calc(.9375rem * var(--mudc-scale)); }

/* ── Tabs: traditional editor-style tabs (VS Code look), app-wide ────────
   Every MudTabs instance gets: a lightly tinted strip with a hairline under
   it, sentence-case tabs with rounded top corners, and an active tab that
   merges into the panel below (surface fill + thin primary accent on top,
   covering the hairline beneath it). Vertical tab bars keep the sliding
   indicator and receive matching typography plus an active highlight. */

.mud-tabs-tabbar {
    background-color: var(--mud-palette-surface);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
}

/* Horizontal strips */
.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) {
    padding: 6px 8px 0;
    border: none;
    box-shadow: none;
}

.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tabs-tabbar-inner {
    min-height: 0;
    /* Hairline at the strip's bottom edge; the opaque active tab covers it. */
    box-shadow: inset 0 -1px 0 0 var(--mud-palette-lines-default);
}

.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tabs-tabbar-wrapper {
    gap: 2px;
}

.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tab {
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 6px 6px 0 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: calc(0.8125rem * var(--mudc-scale));
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* The bottom slider is replaced by the merged active tab. */
.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tab-slider {
    display: none;
}

.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tab:hover {
    background-color: rgba(128, 128, 128, 0.14);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tab.mud-tab-active,
.mud-tabs-tabbar:not(.mud-tabs-vertical):not(.mud-tabs-vertical-reverse) .mud-tab.mud-tab-active:hover {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 1px 0 0 var(--mud-palette-primary);
}

/* Vertical tab bars: matching typography and an active highlight. */
.mud-tabs-tabbar.mud-tabs-vertical .mud-tab,
.mud-tabs-tabbar.mud-tabs-vertical-reverse .mud-tab {
    min-height: 40px;
    padding: 8px 14px;
    text-transform: none;
    letter-spacing: normal;
    font-size: calc(0.8125rem * var(--mudc-scale));
    color: var(--mud-palette-text-secondary);
}

.mud-tabs-tabbar.mud-tabs-vertical .mud-tab.mud-tab-active,
.mud-tabs-tabbar.mud-tabs-vertical-reverse .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.mud-tabs-tabbar.mud-tabs-vertical .mud-tab.mud-tab-active:hover,
.mud-tabs-tabbar.mud-tabs-vertical-reverse .mud-tab.mud-tab-active:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}

/* Make disabled field text more readable */
.mud-disabled .mud-input > input.mud-input-root,
.mud-disabled div.mud-input-slot.mud-input-root {
    color: var(--mud-palette-text-secondary) !important;
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root .mud-disabled div.mud-input-slot.mud-input-root::placeholder {
    color: var(--mud-palette-text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   12 · SYNCFUSION OVERRIDES (ACCORDION, DIAGRAM)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Accordion ── */
.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    color: var(--mud-palette-primary) !important;
}

.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
    color: var(--mud-palette-tertiary) !important;
}

.e-accordion {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: var(--mud-palette-surface);
    border: none;
    border-radius: 0;
}

/* ── Diagram selection visuals - more prominent ── */
.e-diagram .e-diagram-resize-handle {
    fill: var(--mud-palette-primary) !important;
    stroke: var(--mud-palette-primary-darken) !important;
    stroke-width: 2px !important;
}

.e-diagram .e-diagram-border {
    stroke: var(--mud-palette-primary) !important;
    stroke-width: 2px !important;
    stroke-dasharray: 5, 3 !important;
}

.e-diagram .e-diagram-selector {
    stroke: var(--mud-palette-primary) !important;
    stroke-width: 2px !important;
}

.e-diagram .e-diagram-pivot-line {
    stroke: var(--mud-palette-primary) !important;
}

.e-diagram .e-diagram-rotate-handle {
    fill: var(--mud-palette-secondary) !important;
    stroke: var(--mud-palette-secondary-darken) !important;
}

/* Lane selection highlight */
.e-diagram .e-lane-selector,
.e-diagram .e-swimlane-selector {
    stroke: var(--mud-palette-tertiary) !important;
    stroke-width: 3px !important;
    stroke-dasharray: 8, 4 !important;
}

/* Connector selection */
.e-diagram .e-connector-selector {
    stroke: var(--mud-palette-primary) !important;
    stroke-width: 2px !important;
}

/* Bezier control handles */
.e-diagram .e-bezier-handle {
    fill: var(--mud-palette-warning) !important;
    stroke: var(--mud-palette-warning-darken, #e65100) !important;
    stroke-width: 2px !important;
    r: 6 !important;
}

.e-diagram .e-bezier-line {
    stroke: var(--mud-palette-warning) !important;
    stroke-width: 1.5px !important;
    stroke-dasharray: 4, 2 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   13 · COMPONENT TWEAKS
   ════════════════════════════════════════════════════════════════════════ */

.greeting-center .mud-avatar-large {
    width: 100px !important;
    height: 100px !important;
    padding: 3px;
}

.greeting-center .mud-avatar-large img {
    border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════════════════
   14 · RESPONSIVE & MOBILE
   ════════════════════════════════════════════════════════════════════════ */

/* Mobile: all popup dialogs become full-screen */
@media (max-width: 959px) {
    .mud-dialog {
        width: 100vw;
        min-height: 100% !important;
    }

    /* ─── Resource Form Dialog: research panel stacks vertically ─── */
    .resource-form-container {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .research-results-panel {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        position: static !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   15 · SAFARI PERFORMANCE OPTIMIZATIONS
   ════════════════════════════════════════════════════════════════════════ */

@supports (-webkit-touch-callout: none) {


    .nebula-svg {
        /* Disable animations completely on Safari for better input performance */
        animation: none !important;
    }

    .nebula-svg * {
        animation: none !important;
    }

    .stars-layer {
        animation: none !important;
    }

    .chat-window-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Reduce will-change usage which causes layer explosion in Safari */
    .nebula-svg {
        will-change: auto;
    }

    /* Optimize input focus performance */
    input:focus,
    textarea:focus,
    .mud-input-control:focus-within {
        will-change: auto;
    }
}


.x6-graph-background {
    background: transparent !important;
}

.workflow-left-panel .mud-expand-panel {
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blazor reconnection UI
   blazor.web.js finds #components-reconnect-modal (Components/App.razor) on the
   first disconnect and thereafter only toggles state classes on it, filling in
   the attempt counters by id. Everything below is our themed presentation of
   those states, driven entirely by the MudBlazor palette variables so it follows
   the tenant's light/dark theme. If the element is absent the framework injects
   its own shadow-DOM dialog with hardcoded light colors instead.
   ═══════════════════════════════════════════════════════════════════════════ */
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Theme-aware scrim, but capped at ~55% so the app stays visible behind the dialog
       (the theme's overlay-dark is ~91% opaque and would black the screen out). */
    background: color-mix(in srgb, var(--mud-palette-overlay-dark, rgba(0, 0, 0, 0.5)) 60%, transparent);
    animation: oc-reconnect-fade-in 0.15s ease-out;
}

#components-reconnect-modal.components-reconnect-hide { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
}

.oc-reconnect-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: min(90vw, 460px);
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.12));
    background: var(--mud-palette-surface, #1e1e20);
    color: var(--mud-palette-text-primary, #f2f2f3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.oc-reconnect-spinner {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border-top-color: var(--mud-palette-primary);
    animation: oc-reconnect-spin 0.8s linear infinite;
}

.oc-reconnect-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.oc-reconnect-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.oc-reconnect-status {
    margin-top: 3px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary, #b9b9bd);
}

/* Text swaps are pure CSS — one span per state, revealed by the class Blazor sets. */
.oc-rc-title,
.oc-rc-status { display: none; }

/* live states (initial attempt + automatic retries) */
#components-reconnect-modal.components-reconnect-show .oc-rc-title.oc-rc-live,
#components-reconnect-modal.components-reconnect-retrying .oc-rc-title.oc-rc-live { display: inline; }
#components-reconnect-modal.components-reconnect-show .oc-rc-status.oc-rc-live { display: inline; }
#components-reconnect-modal.components-reconnect-retrying .oc-rc-status.oc-rc-live { display: none; }
#components-reconnect-modal.components-reconnect-retrying .oc-rc-status.oc-rc-retrying { display: inline; }

/* terminal states */
#components-reconnect-modal.components-reconnect-failed .oc-rc-title.oc-rc-error,
#components-reconnect-modal.components-reconnect-rejected .oc-rc-title.oc-rc-error,
#components-reconnect-modal.components-reconnect-resume-failed .oc-rc-title.oc-rc-error { display: inline; }
#components-reconnect-modal.components-reconnect-paused .oc-rc-title.oc-rc-paused { display: inline; }
#components-reconnect-modal.components-reconnect-failed .oc-rc-status.oc-rc-error,
#components-reconnect-modal.components-reconnect-rejected .oc-rc-status.oc-rc-rejected,
#components-reconnect-modal.components-reconnect-paused .oc-rc-status.oc-rc-paused,
#components-reconnect-modal.components-reconnect-resume-failed .oc-rc-status.oc-rc-resume-failed { display: inline; }

/* the spinner only makes sense while an attempt is actually running */
#components-reconnect-modal.components-reconnect-failed .oc-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .oc-reconnect-spinner,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-spinner,
#components-reconnect-modal.components-reconnect-resume-failed .oc-reconnect-spinner { display: none; }

.oc-reconnect-actions {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

#components-reconnect-modal.components-reconnect-failed .oc-reconnect-actions,
#components-reconnect-modal.components-reconnect-rejected .oc-reconnect-actions,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-actions,
#components-reconnect-modal.components-reconnect-resume-failed .oc-reconnect-actions { display: flex; }

/* Each action is opt-in per state. */
.oc-reconnect-action { display: none; }

#components-reconnect-modal.components-reconnect-failed .oc-reconnect-retry,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-resume,
#components-reconnect-modal.components-reconnect-failed .oc-reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .oc-reconnect-reload,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-reload,
#components-reconnect-modal.components-reconnect-resume-failed .oc-reconnect-reload {
    display: inline-flex;
}

/* ── Terminal states (MUST stay after the opt-in rules above: equal specificity, so the later
   rule wins). The server no longer knows this session — it restarted, or the circuit was
   evicted — so retrying cannot succeed and keeping those buttons only hides the way out.
   The watchdog in App.razor also reloads automatically once the server answers again. ── */
#components-reconnect-modal.components-reconnect-failed .oc-reconnect-retry,
#components-reconnect-modal.components-reconnect-failed .oc-reconnect-resume,
#components-reconnect-modal.components-reconnect-rejected .oc-reconnect-retry,
#components-reconnect-modal.components-reconnect-rejected .oc-reconnect-resume,
#components-reconnect-modal.components-reconnect-resume-failed .oc-reconnect-retry,
#components-reconnect-modal.components-reconnect-resume-failed .oc-reconnect-resume,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-retry,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-resume { display: none; }

#components-reconnect-modal.components-reconnect-failed .oc-reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .oc-reconnect-reload,
#components-reconnect-modal.components-reconnect-resume-failed .oc-reconnect-reload,
#components-reconnect-modal.components-reconnect-paused .oc-reconnect-reload {
    opacity: 1;
    font-weight: 600;
}

.oc-reconnect-action {
    align-items: center;
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#components-reconnect-modal .oc-reconnect-action:hover { background: var(--mud-palette-primary-darken); }

/* Reload is the escape hatch — keep it secondary next to the primary retry/resume. */
.oc-reconnect-muted {
    background: transparent;
    border-color: var(--mud-palette-lines-default, rgba(255, 255, 255, 0.2));
    color: var(--mud-palette-text-secondary, #b9b9bd);
}

#components-reconnect-modal .oc-reconnect-muted:hover {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}

@keyframes oc-reconnect-spin {
    to { transform: rotate(360deg); }
}

@keyframes oc-reconnect-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}