:root {
    /* --- Nordic base palette --- */
    --nordic-primary: #7A8A99;
    --nordic-primary-dark: #5A6A79;
    --nordic-primary-light: #C5CDD6;
    --nordic-primary-pale: #F0F2F5;
    --nordic-text-primary: #1a2332;
    --nordic-text-secondary: #6a7a8a;
    --nordic-text-muted: #8a9aaa;
    --nordic-bg-body: #ffffff;
    --nordic-bg-surface: #FAFAFA;
    --nordic-bg-tertiary: #e2e8f0;
    --nordic-border-light: #E0E5EB;
    --nordic-border-medium: #C5CDD6;
    --nordic-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --nordic-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
    --nordic-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --nordic-radius-sm: 3px;
    --nordic-radius-md: 6px;
    --nordic-radius-lg: 8px;
    --nordic-transition-fast: 200ms ease;
    --nordic-transition-normal: 300ms ease;

    /* --- Vivid pop colors (hover/selected) --- */
    --vivid-green: #4CAF50;
    --vivid-orange: #FF9800;
    --vivid-red: #F44336;
    --vivid-blue: #42A5F5;
    --vivid-purple: #AB47BC;

    /* --- 5W1H dimension colors --- */
    --dim-why: #8b5cf6;
    --dim-what: #ec4899;
    --dim-how: #f59e0b;
    --dim-who: #22c55e;
    --dim-when: #3b82f6;
    --dim-where: #06b6d4;

    /* --- Selection & interaction --- */
    --nordic-selection: #42A5F5;
    --nordic-selection-bg: rgba(66, 165, 245, 0.1);
    --nordic-selection-glow: rgba(66, 165, 245, 0.4);
    --nordic-grid: #E0E5EB;

    /* --- Confidence badge semantic --- */
    --badge-high-bg: rgba(122, 158, 126, 0.15);
    --badge-high-fg: #5A7E5E;
    --badge-medium-bg: rgba(217, 164, 106, 0.15);
    --badge-medium-fg: #B07A3A;
    --badge-low-bg: rgba(200, 90, 84, 0.15);
    --badge-low-fg: #A04A44;

    /* --- Sticky note resting (muted Nordic) --- */
    --sticky-orange: #D9A46A;
    --sticky-blue: #7A9ABB;
    --sticky-yellow: #E8D88C;
    --sticky-yellow-large: #F0E5B0;
    --sticky-pink: #C89AA0;
    --sticky-purple: #9B8CB8;
    --sticky-green: #8CB89C;
    --sticky-red: #C07070;

    /* --- Sticky note vivid (hover/selected) --- */
    --sticky-orange-vivid: #ffb84d;
    --sticky-blue-vivid: #4d9fff;
    --sticky-yellow-vivid: #ffeb3b;
    --sticky-yellow-large-vivid: #fff176;
    --sticky-pink-vivid: #ff80ab;
    --sticky-purple-vivid: #b388ff;
    --sticky-green-vivid: #69f0ae;
    --sticky-red-vivid: #ff5252;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nordic-primary: #92A4B4;
        --nordic-primary-dark: #7A8A9A;
        --nordic-primary-light: #A0B0C0;
        --nordic-text-primary: #E8ECF0;
        --nordic-text-secondary: #A0B0C0;
        --nordic-bg-body: #1a2332;
        --nordic-bg-surface: #242E3E;
        --nordic-bg-tertiary: #2E3848;
        --nordic-border-light: #374151;
        --nordic-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --nordic-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
        --nordic-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

body {
    margin: 0;
    padding: 0;
}

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

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

.unfold-app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--mud-palette-background);
}

.unfold-content {
    width: 100%;
    height: 100%;
}

.chat-panel {
    height: calc(100vh - 48px);
    min-height: 400px;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.chat-panel-with-tool {
    width: 50%;
}

.cursor-pointer {
    cursor: pointer;
}

/* --- Breadcrumb: fade until a segment is hovered --- */
.breadcrumb-bar {
    opacity: 0.15;
    transition: opacity 0.3s ease-in-out;
}

.breadcrumb-bar:has(:hover) {
    opacity: 1;
}

/* --- Right-side drawers: fixed overlay (no MudLayout) --- */
.mud-drawer-pos-right.mud-drawer-clipped-always {
    position: fixed;
    top: 0;
    right: 0;
    height: calc(100vh - 100px) !important;
    z-index: 9999;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

@media (max-width: 600px) {
    .mud-drawer-pos-right.mud-drawer-clipped-always {
        width: 100% !important;
    }
}

/* ==============================
   MudBlazor Component Overrides
   ============================== */

/* --- Elevation / Shadows --- */
.mud-elevation-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; }
.mud-elevation-2 { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; }
.mud-elevation-3,
.mud-elevation-4 { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; }

/* --- Buttons: muted resting, vivid on hover --- */
.mud-button-filled-primary {
    background-color: var(--nordic-primary) !important;
    transition: background-color 200ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.mud-button-filled-primary:hover {
    background-color: var(--nordic-primary-dark) !important;
    transform: scale(1.02);
    box-shadow: var(--nordic-shadow-md);
}

.mud-button-filled-primary:active {
    transform: scale(0.98);
}

.mud-button-filled-success {
    background-color: #7A9E7E !important;
    transition: background-color 200ms ease, transform 150ms ease;
}
.mud-button-filled-success:hover {
    background-color: #4CAF50 !important;
}

.mud-button-filled-error {
    background-color: #C85A54 !important;
}
.mud-button-filled-error:hover {
    background-color: #F44336 !important;
}

/* --- Cards: border-pop on hover --- */
.mud-card {
    border: 1px solid var(--nordic-border-light);
    box-shadow: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.mud-card:hover {
    border-color: var(--nordic-primary);
    box-shadow: var(--nordic-shadow-sm);
}

.mud-card.clickable:hover {
    border-color: var(--vivid-blue);
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.15);
}

/* --- Inputs: border overrides --- */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--nordic-border-medium) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--nordic-primary) !important;
}

/* --- Chips: muted resting, vivid hover/selected --- */
.mud-chip-success {
    background-color: rgba(122, 158, 126, 0.15) !important;
    color: #5A7E5E !important;
    transition: background-color 200ms ease, color 200ms ease;
}
.mud-chip-success:hover {
    background-color: rgba(76, 175, 80, 0.25) !important;
    color: #2E7D32 !important;
}
.mud-chip-success.selected {
    background-color: #4CAF50 !important;
    color: white !important;
}

.mud-chip-warning {
    background-color: rgba(217, 164, 106, 0.15) !important;
    color: #B07A3A !important;
}
.mud-chip-warning:hover {
    background-color: rgba(255, 152, 0, 0.25) !important;
    color: #E65100 !important;
}

.mud-chip-error {
    background-color: rgba(200, 90, 84, 0.15) !important;
    color: #A04A44 !important;
}
.mud-chip-error:hover {
    background-color: rgba(244, 67, 54, 0.25) !important;
    color: #C62828 !important;
}

.mud-chip-primary {
    background-color: var(--nordic-primary-pale) !important;
    color: var(--nordic-primary-dark) !important;
}
.mud-chip-primary:hover {
    background-color: rgba(66, 165, 245, 0.25) !important;
    color: #1565C0 !important;
}