/* FYI Software Branding - CSS Variables */
:root {
    /* ═══════════════════════════════════════════════════════════════
       PRIMARY BRAND COLORS
       ═══════════════════════════════════════════════════════════════ */
    --color-primary: #80C936;
    --color-primary-hover: #9AD856;
    --color-primary-dark: #6FB028;
    --color-primary-rgb: 128, 201, 54;

    /* ═══════════════════════════════════════════════════════════════
       TEXT COLORS
       ═══════════════════════════════════════════════════════════════ */
    --color-text-primary: #2F2F2F;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-muted: #6C757D;
    --color-text-inverse: #FFFFFF;

    /* ═══════════════════════════════════════════════════════════════
       BACKGROUND COLORS
       ═══════════════════════════════════════════════════════════════ */
    --color-bg-white: #FFFFFF;
    --color-bg-light: #F8F9FA;
    --color-bg-subtle: #F5F5F5;
    --color-bg-muted: #FAFAFA;
    --color-bg-filter: #EBEBEB;
    --color-bg-primary-light: #E8F5D9;
    --color-bg-primary-subtle: #F0F8E8;

    /* ═══════════════════════════════════════════════════════════════
       BORDER COLORS
       ═══════════════════════════════════════════════════════════════ */
    --color-border-default: #E0E0E0;
    --color-border-light: #DEE2E6;
    --color-border-primary: #D4ECC4;
    --color-border-focus: #80C936;

    /* ═══════════════════════════════════════════════════════════════
       STATUS COLORS
       ═══════════════════════════════════════════════════════════════ */
    --color-success: #80C936;
    --color-success-dark: #6FB028;
    --color-warning: #FFC107;
    --color-error: #DC3545;
    --color-error-dark: #D32F2F;
    --color-info: #17A2B8;
    --color-info-alt: #2196F3;
    --color-orange: #FF9800;

    /* ═══════════════════════════════════════════════════════════════
       SHADOWS
       ═══════════════════════════════════════════════════════════════ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 2px 8px rgba(128, 201, 54, 0.3);
    --shadow-card-hover: 0 4px 12px rgba(128, 201, 54, 0.15);

    /* ═══════════════════════════════════════════════════════════════
       FONT FAMILY
       ═══════════════════════════════════════════════════════════════ */
    --font-family-base: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ═══════════════════════════════════════════════════════════════
       FONT SIZES
       ═══════════════════════════════════════════════════════════════ */
    --font-size-base: 16px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;
    --font-size-display-lg: 64px;
    --font-size-display-xl: 80px;

    /* ═══════════════════════════════════════════════════════════════
       FONT WEIGHTS
       ═══════════════════════════════════════════════════════════════ */
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;

    /* ═══════════════════════════════════════════════════════════════
       LINE HEIGHTS
       ═══════════════════════════════════════════════════════════════ */
    --line-height-tight: 1.0;
    --line-height-snug: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.7;

    /* ═══════════════════════════════════════════════════════════════
       SPACING SCALE
       ═══════════════════════════════════════════════════════════════ */
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;

    /* Named spacing tokens */
    --spacing-xs: 6px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;

    /* ═══════════════════════════════════════════════════════════════
       BORDER RADIUS
       ═══════════════════════════════════════════════════════════════ */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ═══════════════════════════════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════════════════════════════ */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Legacy aliases for backward compatibility */
    --color-text: var(--color-text-primary);
    --color-bg-light: var(--color-bg-filter);
    --font-family: var(--font-family-base);
    --line-height-base: var(--line-height-relaxed);
    --spacing-s: var(--spacing-sm);
    --spacing-m: var(--spacing-md);
    --spacing-l: var(--spacing-lg);
}

/* ═══════════════════════════════════════════════════════════════
   BASE ELEMENT STYLES
   ═══════════════════════════════════════════════════════════════ */

html, body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Hide body scrollbar on analysis pages — content area has its own */
body:has(.analysis-page-container) {
    overflow: hidden;
}


/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    margin-top: 0;
}

h1 {
    font-size: var(--font-size-4xl);  /* 48px */
    line-height: var(--line-height-snug);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

h1:focus {
    outline: none;
}

h2 {
    font-size: var(--font-size-3xl);  /* 36px */
    line-height: 1.3;
}

h3 {
    font-size: var(--font-size-2xl);  /* 24px */
    line-height: var(--line-height-normal);
}

h4 {
    font-size: var(--font-size-xl);   /* 20px */
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--font-size-lg);   /* 18px */
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--font-size-md);   /* 16px */
    line-height: var(--line-height-normal);
}

/* Paragraph Styles */
p {
    margin-bottom: 1rem;
    margin-top: 0;
    line-height: var(--line-height-relaxed);
}

/* Link Styles */
a, .btn-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--transition-normal);
}

a:hover, .btn-link:hover {
    opacity: 0.85;
    color: var(--color-primary-hover);
}

/* ═══════════════════════════════════════════════════════════════
   TEXT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* Font Size Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* Font Weight Utilities */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-brand { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

/* Line Height Utilities */
.line-tight { line-height: var(--line-height-tight); }
.line-snug { line-height: var(--line-height-snug); }
.line-normal { line-height: var(--line-height-normal); }
.line-relaxed { line-height: var(--line-height-relaxed); }
.line-loose { line-height: var(--line-height-loose); }

/* ═══════════════════════════════════════════════════════════════
   BUTTON STYLES
   ═══════════════════════════════════════════════════════════════ */

.btn-primary {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    font-weight: var(--font-weight-medium);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-primary:active {
    background-color: var(--color-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(128, 201, 54, 0.2);
    border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Main Layout */
.main-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header Styles */
.header {
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-s) var(--spacing-m);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}

.header-left .menu-toggle {
    color: var(--color-text-secondary);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}

.logo-image {
    height: 40px;
    width: auto;
}

.app-name {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
}

.nav {
    display: flex;
    gap: var(--spacing-m);
}

.nav-link {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    padding: var(--spacing-xs) var(--spacing-s);
    transition: color 0.3s ease;
    cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

/* Header Toggle Button */
.header-toggle {
    background: transparent;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-toggle:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}

/* Collapsed Header - Slim Bar */
.header.collapsed {
    padding: 0;
}

.header-collapsed-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-m);
    height: 36px;
}

.logo-collapsed {
    gap: 0;
}

.logo-image-collapsed {
    height: 24px;
    width: auto;
}

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
    display: block;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding-top: 4px;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    min-width: 180px;
    z-index: 1000;
}

.nav-dropdown-item {
    display: block;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    padding: var(--spacing-s) var(--spacing-m);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--color-bg-light);
}

.nav-dropdown-item:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.nav-dropdown-item:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

/* Drawer Styles */
.k-drawer-container {
    flex: 1;
    display: flex;
}

.drawer-separator {
    padding: 16px 16px 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-separator-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 16px 16px 8px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
}

.drawer-separator-toggle:hover {
    color: var(--color-primary);
}

.drawer-separator-toggle:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
    border-radius: 2px;
}

.drawer-separator-toggle svg {
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.nav-toolbar {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.nav-toolbar .nav-toolbar-btn,
.nav-toolbar .k-button {
    font-size: 11px;
    padding: 2px 6px;
    min-width: 0;
}

.drawer-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    cursor: pointer;
    color: #212529;
    transition: background-color 0.15s ease;
}

.drawer-item:hover {
   /*  background-color: rgba(128, 201, 54, 0.12); */
    color: var(--color-primary);
}

.drawer-item.selected {
   /*  background-color: rgba(128, 201, 54, 0.12); */
    color: var(--color-primary);
    font-weight: 500;
}

.drawer-item-text {
    margin-left: 12px;
}

/* Override Telerik Drawer Selected Item Styles */
.k-drawer-item.k-selected,
.k-drawer-item.k-state-selected,
.k-drawer .k-drawer-item.k-selected,
.k-drawer .k-drawer-item.k-state-selected {
    background-color: rgba(128, 201, 54, 0.15) !important;
    color: var(--color-primary) !important;
}

.k-drawer-item.k-selected:hover,
.k-drawer-item.k-state-selected:hover,
.k-drawer .k-drawer-item.k-selected:hover,
.k-drawer .k-drawer-item.k-state-selected:hover {
    background-color: rgba(128, 201, 54, 0.20) !important;
    color: var(--color-primary-dark) !important;
}

/* Remove the red/coral selection indicator bar */
.k-drawer-item.k-selected::before,
.k-drawer-item.k-state-selected::before,
.k-drawer .k-drawer-item.k-selected::before,
.k-drawer .k-drawer-item.k-state-selected::before {
    background-color: var(--color-primary) !important;
}

/* Ensure drawer item text inherits selection color */
.k-drawer-item.k-selected .k-item-text,
.k-drawer-item.k-state-selected .k-item-text,
.k-drawer-item.k-selected .drawer-item-text,
.k-drawer-item.k-state-selected .drawer-item-text {
    color: var(--color-primary) !important;
}

/* Override any icon colors in selected drawer items */
.k-drawer-item.k-selected .k-svg-icon,
.k-drawer-item.k-state-selected .k-svg-icon,
.k-drawer-item.k-selected svg,
.k-drawer-item.k-state-selected svg {
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

/* ───────────────────────────────────────────────────────────────
   Issue #639: keep selected nav item in view — scrollable drawer
   with pinned (sticky) section headers + expand/collapse toolbar.
   Scoped to .telli-nav-drawer (the DrawerNav marker class) so it
   does NOT leak onto other TelerikDrawer instances (EndUserLayout,
   AnalysisLayout). NOTE: relies on Telerik-internal class names
   (.k-drawer-items, .k-drawer-item) — re-verify on a Telerik upgrade. */

/* Keep the long nav menu scrollable within its own container */
.telli-nav-drawer .k-drawer-items {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

/* Pin section headers + the expand/collapse-all toolbar while items scroll beneath */
.telli-nav-drawer .k-drawer-item:has(.drawer-separator-toggle),
.telli-nav-drawer .k-drawer-item:has(.drawer-separator),
.telli-nav-drawer .k-drawer-item:has(.nav-toolbar) {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg-white, #fff);
}

/* Toolbar stacks above the section headers */
.telli-nav-drawer .k-drawer-item:has(.nav-toolbar) {
    z-index: 3;
}

/* Content Area */
.content {
    padding: 24px;
    background-color: #f8f9fa;
    min-height: 100%;
    overflow-y: auto;
}

/* Dashboard Cards */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.entity-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

.entity-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* Dashboard Error */
.dashboard-error {
    background: #fff;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.dashboard-error p {
    color: #dc3545;
    margin-bottom: 16px;
}

.entity-card .card-icon {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.entity-card .card-title {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
}

.entity-card .card-count {
    font-size: 32px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 12px;
}

.entity-card .card-action {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.entity-card .card-action:hover {
    text-decoration: underline;
}

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #212529;
}

.page-header h4 {
    margin: 0;
    font-size: var(--font-size-xl, 20px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
}

.page-header-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
}

.session-id-badge {
    padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    color: var(--color-primary-dark, #6FB028);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 600);
}

.page-description {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
    background: linear-gradient(135deg, rgba(128, 201, 54, 0.08) 0%, rgba(128, 201, 54, 0.02) 100%);
    border-left: 2px solid var(--color-primary, #80C936);
    border-radius: 0 4px 4px 0;
}

.page-description sup {
    font-size: 8px;
    vertical-align: super;
    margin-left: -2px;
}

/* Form Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-primary);
}

.invalid {
    outline: 1px solid #dc3545;
}

.validation-message {
    color: #dc3545;
}

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

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

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

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

/* Loading Progress */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--color-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* Card Component Styles */
.card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    background-color: var(--color-bg-primary-subtle);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.card-accent {
    border-left: 4px solid var(--color-primary);
}

.card-body {
    padding: var(--spacing-4);
}

.card-footer {
    background-color: var(--color-bg-light);
    padding: var(--spacing-3);
    border-top: 1px solid var(--color-border-light);
}

/* Button Component Styles */
.btn {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    user-select: none;
}

.btn-secondary {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.btn-secondary:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border-primary);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--color-bg-primary-subtle);
}

.btn-small {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.btn-large {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-lg);
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Form Component Styles */
.form-input,
.form-select {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    transition: var(--transition-normal);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(128, 201, 54, 0.1);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-group {
    margin-bottom: var(--spacing-4);
}

.form-error .form-input,
.form-error .form-select {
    border-color: var(--color-error);
}

.form-error .form-label {
    color: var(--color-error);
}

.form-success .form-input,
.form-success .form-select {
    border-color: var(--color-success);
}

/* Navigation Component Styles */
.nav-sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-white);
    border-right: 1px solid var(--color-border-light);
}

.nav-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
}

.nav-item:hover {
    background-color: var(--color-bg-primary-subtle);
    color: var(--color-primary);
}

.nav-item.active {
    background-color: var(--color-bg-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    border-left: 3px solid var(--color-primary);
}

.navbar {
    display: flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-decoration: none;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-left: auto;
}

/* Badge Component Styles */
.badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-align: center;
    white-space: nowrap;
    border-radius: var(--radius-full);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-text-primary);
}

.badge-error {
    background-color: var(--color-error);
    color: var(--color-text-inverse);
}

.badge-info {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}

.badge-orange {
    background-color: var(--color-orange);
    color: var(--color-text-inverse);
}

/* Panel Component Styles */
.panel {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.panel-header {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border-default);
}

.panel-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.panel-body {
    padding: var(--spacing-4);
}

.panel-footer {
    background-color: var(--color-bg-light);
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-border-light);
}

/* Sync History Panel - override dark panel-header */
.sync-history-panel .panel-header {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 1000px;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        max-height: 1000px;
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes typing {
    0%, 100% {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-primary);
    }
}

/* Animation Utility Classes */
.animate-fade-in {
    animation: fadeIn 300ms ease-in;
}

.animate-fade-in-up {
    animation: fadeInUp 300ms ease-in;
}

.animate-slide-down {
    animation: slideDown 300ms ease-in;
}

.animate-slide-up {
    animation: slideUp 300ms ease-in;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.transition-all {
    transition: all 300ms ease;
}

.transition-colors {
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* ═══════════════════════════════════════════════════════════════
   QUERY STRING WARNING BANNER (T029)
   ═══════════════════════════════════════════════════════════════ */

.query-string-warning-banner {
    margin-bottom: var(--spacing-6);
    border-left: 4px solid var(--color-warning);
    background-color: #fff3cd;
    box-shadow: var(--shadow-sm);
}

.query-string-warning-banner .warning-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: rgba(255, 193, 7, 0.1);
}

.query-string-warning-banner .warning-icon {
    color: var(--color-warning);
    font-size: var(--font-size-xl);
}

.query-string-warning-banner .warning-title {
    flex: 1;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.query-string-warning-banner .dismiss-button {
    color: var(--color-text-secondary);
}

.query-string-warning-banner .dismiss-button:hover {
    color: var(--color-text-primary);
}

.query-string-warning-banner .warning-list {
    margin: 0;
    padding-left: var(--spacing-6);
    color: var(--color-text-primary);
}

.query-string-warning-banner .warning-list li {
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-relaxed);
}

.query-string-warning-banner .warning-list li:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN GRID STYLES
   ═══════════════════════════════════════════════════════════════ */

.grid-container {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.grid-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-12);
    text-align: center;
}

.grid-error p {
    color: var(--color-error);
    margin: 0;
}

.grid-actions {
    display: flex;
    gap: var(--spacing-1);
    align-items: center;
}

.no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    text-align: center;
    color: var(--color-text-secondary);
}

.no-data-message p {
    margin: 0;
    font-size: var(--font-size-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD CHARTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Charts Grid - Two per row */
/* Expand Button — Chart header expand/collapse toggle */
.expand-btn,
.expand-btn.k-button {
    opacity: 0.5;
    transition: opacity 0.2s ease;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.expand-btn:hover,
.expand-btn.k-button:hover {
    opacity: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.expand-btn:focus,
.expand-btn:active,
.expand-btn.k-focus,
.expand-btn.k-active,
.expand-btn.k-button:focus,
.expand-btn.k-button:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.expand-btn .k-button-icon {
    color: var(--color-text-tertiary, #999);
}

.expand-btn:hover .k-button-icon {
    color: var(--color-text-secondary, #666);
}

/* Chart expand dialog — force chart to fill window */
.chart-expand-dialog .k-window-content {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-expand-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
}

.chart-expand-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chart-expand-body .chart-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.chart-expand-body .chart-card .chart-header {
    display: none;
}

.chart-expand-body .chart-card .chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.chart-expand-body .telerik-chart-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chart-expand-body .telerik-chart-wrapper .k-chart {
    flex: 1;
    min-height: calc(85vh - 170px);
    height: calc(85vh - 170px);
}

.chart-expand-body .chart-reasoning-panel {
    display: none;
}

/* Ensure rotated labels have enough space in expand dialog */
.chart-expand-body .k-chart .k-chart-surface {
    overflow: visible;
}

.chart-expand-body .telerik-chart-wrapper .k-chart {
    padding-bottom: 1.5rem;
}

.charts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.chart-column {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
    min-width: 0;
    transition: flex 0.3s ease, max-width 0.3s ease;
}

.chart-column-expanded {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.chart-column-expanded .chart-body {
    min-height: 500px;
}

.chart-column-expanded .telerik-chart-wrapper,
.chart-column-expanded .k-chart {
    min-height: 480px;
}

.chart-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Chart Card */
.chart-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 100%;
}

/* Chart Header */
.chart-card .chart-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-default, #e5e7eb);
}

.chart-card .chart-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
    line-height: 1.4;
}

.chart-card .chart-timestamp {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
}

/* Chart Body */
.chart-card .chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    min-height: 300px;
}

/* Telerik Chart Wrapper */
.chart-card .telerik-chart-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

/* Ensure Telerik chart fills the container */
.chart-card .telerik-chart-wrapper .k-chart {
    flex: 1;
    min-height: 280px;
}

/* No Data State */
.chart-card .chart-no-data {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: var(--color-bg-subtle, #f9fafb);
    border-radius: 8px;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* Mobile Responsiveness for Charts */
@media (max-width: 1024px) {
    .chart-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .chart-card .chart-header {
        padding: 1rem;
    }

    .chart-card .chart-body {
        padding: 0.75rem 1rem 1rem 1rem;
        min-height: 250px;
    }

    .chart-card .telerik-chart-wrapper {
        min-height: 230px;
    }

    .chart-card .telerik-chart-wrapper .k-chart {
        min-height: 230px;
    }
}

/* Chart Reasoning Panel */
.chart-reasoning-panel {
    padding: 0.75rem 1.5rem 1rem 1.5rem;
    border-top: 1px solid var(--color-border-default, #e5e7eb);
}

.reasoning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-subtle, #f5f5f5);
    border: 1px solid var(--color-border-default, #e0e0e0);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary, #666666);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reasoning-toggle:hover {
    background: var(--color-bg-filter, #ebebeb);
    color: var(--color-text-primary, #2f2f2f);
}

.reasoning-toggle.expanded {
    background: var(--color-bg-primary-light, #e8f5d9);
    border-color: var(--color-border-primary, #d4ecc4);
    color: var(--color-primary-dark, #6fb028);
}

.reasoning-toggle .toggle-icon {
    font-size: 0.625rem;
    line-height: 1;
}

.reasoning-content {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-subtle, #f9fafb);
    border-radius: 0.5rem;
    border-left: 3px solid var(--color-primary, #80c936);
}

.reasoning-content p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-secondary, #666666);
}

/* ═══════════════════════════════════════════════════════════════
   SESSION DETAIL DIALOG
   ═══════════════════════════════════════════════════════════════ */

.k-window .detail-content {
    background: transparent;
    padding: 0;
}

.detail-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border-light, #dee2e6);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    flex: 0 0 130px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary, #666666);
}

.detail-value {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-text-primary, #2f2f2f);
    word-break: break-word;
}

.detail-value--name {
    font-weight: 600;
}

.detail-value--boxed {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}

.detail-value--mono {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #666666);
}

.detail-value .tag-pill {
    display: inline-block;
    background: var(--color-bg-primary-subtle, #f0f8e8);
    color: var(--color-primary-dark, #6fb028);
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-right: 0.375rem;
    margin-bottom: 0.25rem;
}

.detail-value .no-tags {
    color: var(--color-text-tertiary, #999999);
    font-style: italic;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   SESSION CHAT PANEL - ANALYSIS PAGE INTEGRATION
   ═══════════════════════════════════════════════════════════════ */

/* Analysis Page Container - Flex Layout for Content + Chat Panel */
.analysis-page-container {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(100vh - 72px);
    background-color: var(--color-bg-subtle, #F5F5F5);
}

/* Analysis Content - Main scrollable area */
.analysis-content {
    box-sizing: border-box;
    flex: 1;
    height: calc(100vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-6, 24px);
    padding-right: 6px;
    margin-right: 400px; /* Width of expanded chat panel */
}

/* Analysis Dashboard - Compatibility with existing styles */
.analysis-dashboard {
    width: 100%;
}

/* Session Chat Panel - Fixed positioning on right side */
.session-chat-panel.analysis-session-chat {
    position: fixed;
    right: 0;
    top: 92px;
    bottom: 0;
    transition: top 300ms ease, transform 300ms ease, width 300ms ease;
    width: 400px;
    z-index: 900;
    background-color: var(--color-bg-white, #FFFFFF);
    border-left: 1px solid var(--color-border-default, #E0E0E0);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
    transition: transform 300ms ease, width 300ms ease;
    display: flex;
    flex-direction: column;
}

/* Collapsed State - Minimal width on right */
.session-chat-panel.analysis-session-chat.collapsed {
    width: 60px;
    transform: translateX(0);
}

/* Expanded State */
.session-chat-panel.analysis-session-chat.expanded {
    width: 400px;
}

/* Track page header collapse — chat panel slides up with the header */
body:has(.header.collapsed) .session-chat-panel.analysis-session-chat {
    top: 36px;
}

/* Adjust content margin when chat is collapsed */
.analysis-page-container:has(.session-chat-panel.collapsed) .analysis-content {
    margin-right: 60px; /* Collapsed width */
}

/* Session Chat Header - Sticky at top of panel */
.session-chat-panel.analysis-session-chat .session-chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-bg-white, #FFFFFF);
    border-bottom: 1px solid var(--color-border-light, #DEE2E6);
    padding: var(--spacing-4, 16px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
}

.session-chat-panel.analysis-session-chat .header-title {
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
    transition: opacity 300ms ease;
}

/* Hide title when collapsed */
.session-chat-panel.analysis-session-chat.collapsed .header-title {
    display: none;
}

/* Toggle Button */
.session-chat-panel.analysis-session-chat .toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--color-bg-white, #FFFFFF);
    color: var(--color-text-secondary, #666666);
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: all 200ms ease;
}

.session-chat-panel.analysis-session-chat .toggle-button:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

.session-chat-panel.analysis-session-chat .toggle-button:focus {
    outline: 2px solid var(--color-border-focus, #80C936);
    outline-offset: 2px;
}

/* Session Chat Body - Scrollable messages + input */
.session-chat-panel.analysis-session-chat .session-chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Messages Area */
.session-chat-panel.analysis-session-chat .session-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-4, 16px);
    background-color: var(--color-bg-subtle, #F5F5F5);
}

/* Chat Messages */
.session-chat-panel.analysis-session-chat .chat-message {
    display: flex;
    gap: var(--spacing-3, 12px);
    margin-bottom: var(--spacing-4, 16px);
    animation: fadeInUp 300ms ease;
}

.session-chat-panel.analysis-session-chat .message-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-chat-panel.analysis-session-chat .telli-avatar-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.session-chat-panel.analysis-session-chat .message-content {
    flex: 1;
    min-width: 0;
}

.session-chat-panel.analysis-session-chat .message-text {
    background-color: var(--color-bg-white, #FFFFFF);
    padding: var(--spacing-3, 12px);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-relaxed, 1.6);
    color: var(--color-text-primary, #2F2F2F);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* User Messages */
.session-chat-panel.analysis-session-chat .chat-message.user .message-text {
    background-color: var(--color-bg-primary-light, #E8F5D9);
    border-left: 3px solid var(--color-primary, #80C936);
}

/* Assistant Messages */
.session-chat-panel.analysis-session-chat .chat-message.assistant .message-text {
    border-left: 3px solid var(--color-info, #17A2B8);
}

/* Markdown Headings in Messages - scaled down for chat context */
.message-text h1,
.message-body h1 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin: 12px 0 8px 0 !important;
    color: #2F2F2F;
}

.message-text h2,
.message-body h2 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 12px 0 8px 0 !important;
    color: #2F2F2F;
}

.message-text h3,
.message-body h3 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    margin: 8px 0 4px 0 !important;
    color: #2F2F2F;
}

.message-text h4,
.message-text h5,
.message-text h6,
.message-body h4,
.message-body h5,
.message-body h6 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin: 8px 0 4px 0 !important;
    color: #666666;
}

/* Markdown Tables in Messages */
.message-text table,
.message-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
    font-size: 0.875rem;
}

.message-text th,
.message-text td,
.message-body th,
.message-body td {
    border: 1px solid #E0E0E0;
    padding: 8px;
    text-align: left;
}

.message-text th,
.message-body th {
    background-color: #F5F5F5;
    font-weight: 600;
}

.message-text tr:nth-child(even),
.message-body tr:nth-child(even) {
    background-color: #F5F5F5;
}

/* Message Copy Button */
.message-copy-btn {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.message-copy-btn .k-button {
    min-width: 20px;
    height: 20px;
    padding: 2px;
    border: none;
    background: transparent !important;
}

.message-copy-btn .k-button .k-svg-icon {
    width: 18px;
    height: 18px;
}

.message-copy-btn .k-button .k-svg-icon,
.message-copy-btn .k-button svg {
    color: #aaa !important;
    fill: #aaa !important;
}

.message-copy-btn .k-button:hover .k-svg-icon,
.message-copy-btn .k-button:hover svg {
    color: #1a73e8 !important;
    fill: #1a73e8 !important;
}

.session-chat-panel.analysis-session-chat .icon-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;
}

.session-chat-panel.analysis-session-chat .icon-button:disabled:hover {
    background-color: transparent;
    border-color: var(--color-border-light, #DEE2E6);
}

/* Welcome Message */
.session-chat-panel.analysis-session-chat .chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
    text-align: center;
    color: var(--color-text-secondary, #666666);
}

.session-chat-panel.analysis-session-chat .welcome-avatar {
    margin-bottom: var(--spacing-4, 16px);
}

.session-chat-panel.analysis-session-chat .welcome-avatar .telli-avatar-image {
    width: 64px;
    height: 64px;
}

.session-chat-panel.analysis-session-chat .welcome-text h4 {
    margin: 0 0 var(--spacing-2, 8px) 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
}

.session-chat-panel.analysis-session-chat .welcome-text p {
    margin: 0;
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #666666);
}

/* Typing/Streaming Indicators */
.session-chat-panel.analysis-session-chat .typing-indicator,
.session-chat-panel.analysis-session-chat .streaming-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.session-chat-panel.analysis-session-chat .typing-indicator span,
.session-chat-panel.analysis-session-chat .streaming-indicator span {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary, #80C936);
    border-radius: var(--radius-full, 9999px);
    animation: pulse 1.4s infinite;
}

.session-chat-panel.analysis-session-chat .typing-indicator span:nth-child(2),
.session-chat-panel.analysis-session-chat .streaming-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.session-chat-panel.analysis-session-chat .typing-indicator span:nth-child(3),
.session-chat-panel.analysis-session-chat .streaming-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Tool-calling indicator (transient banner above streaming bubble) */
/* margin-left 64px aligns the banner with assistant message content (past the avatar). */
.chat-tool-indicator {
    font-size: 0.85em;
    color: var(--muted-text-color, #6b7280);
    background: var(--muted-bg-color, rgba(0, 0, 0, 0.04));
    border-radius: 6px;
    padding: 4px 12px;
    margin: 4px 16px 8px 64px;
    font-style: italic;
    display: inline-block;
    align-self: flex-start;
}

/* ── Evolved Thinking Indicator (global — applies to all chat surfaces) ──── */

@keyframes thinking-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.thinking-indicator-row {
    /* inherits .chat-message flex layout from whichever container it lives in */
}

.thinking-status-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--muted-text-color, #6b7280);
    font-size: 0.9em;
    padding: 6px 0;
}

/* Compact variant — embedded inside StreamingMessageBubble below the streaming text */
.thinking-status-line--compact {
    margin-top: 4px;
    padding: 2px 0 4px;
}

/* Three-dot pulse — reuses --color-primary, staggered delays */
.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.thinking-dots span {
    width: 7px;
    height: 7px;
    background-color: var(--color-primary, #80C936);
    border-radius: 9999px;
    animation: pulse 1.4s infinite;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Shimmer gradient on the rotating gerund word */
.thinking-word {
    font-style: italic;
    background: linear-gradient(
        90deg,
        #5a9426 0%,
        var(--color-primary, #80C936) 40%,
        #a8e05a 60%,
        #5a9426 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: thinking-shimmer 2.4s linear infinite;
}

/* Elapsed timer — tabular numerals, more muted */
.thinking-elapsed {
    font-size: 0.85em;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Tool history tree shown above the status line */
.thinking-tool-tree {
    font-size: 0.8em;
    color: #9ca3af;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thinking-tool-tree-item {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.tree-connector {
    color: #c4c9d0;
    font-family: ui-monospace, monospace;
    margin-right: 5px;
    font-size: 0.95em;
}

/* Input Area */
.session-chat-panel.analysis-session-chat .session-chat-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2, 8px);
    padding: var(--spacing-4, 16px);
    background-color: var(--color-bg-white, #FFFFFF);
    border-top: 1px solid var(--color-border-light, #DEE2E6);
    align-items: flex-end;
}

.session-chat-panel.analysis-session-chat .session-chat-input textarea {
    flex: 1;
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-normal, 1.4);
    color: var(--color-text-primary, #2F2F2F);
    resize: vertical;
    min-height: 40px;
    max-height: 120px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.session-chat-panel.analysis-session-chat .session-chat-input textarea:focus {
    outline: none;
    border-color: var(--color-border-focus, #80C936);
    box-shadow: 0 0 0 3px rgba(128, 201, 54, 0.15);
}

.session-chat-panel.analysis-session-chat .session-chat-input textarea:disabled {
    background-color: var(--color-bg-subtle, #F5F5F5);
    cursor: not-allowed;
    opacity: 0.6;
}

.session-chat-panel.analysis-session-chat .send-button {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background-color: #80C936 !important;
    color: #FFFFFF !important;
    cursor: pointer;
    transition: all 200ms ease;
}

.session-chat-panel.analysis-session-chat .send-button:hover:not(:disabled) {
    background-color: var(--color-primary-hover, #9AD856);
    transform: translateY(-1px);
}

.session-chat-panel.analysis-session-chat .send-button:active:not(:disabled) {
    transform: translateY(0);
}

.session-chat-panel.analysis-session-chat .send-button:disabled {
    background-color: var(--color-border-default, #E0E0E0);
    color: var(--color-text-tertiary, #999999);
    cursor: not-allowed;
}

.session-chat-panel .send-button.cancel-streaming,
.session-chat-panel.analysis-session-chat .send-button.cancel-streaming {
    background-color: #DC3545;
    color: #FFFFFF;
}

.session-chat-panel .send-button.cancel-streaming:hover,
.session-chat-panel.analysis-session-chat .send-button.cancel-streaming:hover {
    background-color: #c82333;
}

/* Loading/Error States */
.session-chat-panel.analysis-session-chat .chat-loading,
.session-chat-panel.analysis-session-chat .chat-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px);
    text-align: center;
}

.session-chat-panel.analysis-session-chat .chat-loading p,
.session-chat-panel.analysis-session-chat .chat-error p {
    margin: var(--spacing-3, 12px) 0;
    color: var(--color-text-secondary, #666666);
    font-size: var(--font-size-sm, 14px);
}

.session-chat-panel.analysis-session-chat .chat-error p {
    color: var(--color-error, #DC3545);
}

.session-chat-panel.analysis-session-chat .retry-button {
    margin-top: var(--spacing-3, 12px);
    padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-white, #FFFFFF);
    color: var(--color-text-primary, #2F2F2F);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-medium, 600);
    cursor: pointer;
    transition: all 200ms ease;
}

.session-chat-panel.analysis-session-chat .retry-button:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

/* Message Footer (tokens + rating) */
.session-chat-panel.analysis-session-chat .message-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-1, 4px);
}

/* Message Meta (token count) */
.session-chat-panel.analysis-session-chat .message-meta {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-tertiary, #999999);
}

/* Message Feedback (rating buttons) */
.session-chat-panel.analysis-session-chat .message-feedback {
    display: inline-flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE RATING COMPONENT
   ═══════════════════════════════════════════════════════════════ */
.message-rating {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.message-rating.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.message-rating .k-button {
    min-width: 20px;
    height: 20px;
    padding: 2px;
    border: none !important;
    background: transparent !important;
}

.message-rating .k-button .k-svg-icon {
    width: 18px;
    height: 18px;
}

.message-rating .k-button:hover {
    background: transparent !important;
}

.message-rating .rating-positive,
.message-rating .rating-positive .k-svg-icon,
.message-rating .rating-positive svg {
    color: #aaa !important;
    fill: #aaa !important;
}

.message-rating .rating-negative,
.message-rating .rating-negative .k-svg-icon,
.message-rating .rating-negative svg {
    color: #aaa !important;
    fill: #aaa !important;
}

.message-rating .rating-positive:hover,
.message-rating .rating-positive:hover .k-svg-icon,
.message-rating .rating-positive:hover svg,
.message-rating .rating-positive.rating-active,
.message-rating .rating-positive.rating-active .k-svg-icon,
.message-rating .rating-positive.rating-active svg {
    color: #28a745 !important;
    fill: #28a745 !important;
}

.message-rating .rating-negative:hover,
.message-rating .rating-negative:hover .k-svg-icon,
.message-rating .rating-negative:hover svg,
.message-rating .rating-negative.rating-active,
.message-rating .rating-negative.rating-active .k-svg-icon,
.message-rating .rating-negative.rating-active svg {
    color: #dc3545 !important;
    fill: #dc3545 !important;
}

/* Screen Reader Only */
.session-chat-panel.analysis-session-chat .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BEHAVIOR FOR SESSION CHAT PANEL
   ═══════════════════════════════════════════════════════════════ */

/* Tablet (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
    .session-chat-panel.analysis-session-chat.expanded {
        width: 340px;
    }

    .analysis-content {
        margin-right: 360px;
    }

    .analysis-page-container:has(.session-chat-panel.collapsed) .analysis-content {
        margin-right: 80px;
    }
}

/* Mobile (<768px) - Overlay Mode */
@media (max-width: 767px) {
    .analysis-content {
        margin-right: 0;
        padding: var(--spacing-4, 16px);
    }

    .session-chat-panel.analysis-session-chat {
        position: fixed;
        top: 60px; /* Mobile header height */
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 360px;
        transform: translateX(100%);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 1100;
    }

    .session-chat-panel.analysis-session-chat.expanded {
        transform: translateX(0);
    }

    .session-chat-panel.analysis-session-chat.collapsed {
        width: 50px;
        transform: translateX(calc(100% - 50px));
    }

    /* Mobile: Always show toggle button */
    .session-chat-panel.analysis-session-chat .toggle-button {
        width: 36px;
        height: 36px;
    }

    /* Add backdrop overlay when chat is open on mobile */
    .analysis-page-container:has(.session-chat-panel.expanded)::before {
        content: '';
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1050;
        animation: fadeIn 300ms ease;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Session Chat Conversation List Overlay
   ═══════════════════════════════════════════════════════════════════════════════ */

.session-chat-panel.analysis-session-chat .conversation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-white, #FFFFFF);
    z-index: 20;
    display: flex;
    flex-direction: column;
    animation: slideInFromLeft 0.2s ease-out;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.session-chat-panel.analysis-session-chat .overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4, 16px);
    border-bottom: 1px solid var(--color-border-light, #DEE2E6);
    background-color: var(--color-bg-white, #FFFFFF);
    min-height: 56px;
    box-sizing: border-box;
}

.session-chat-panel.analysis-session-chat .overlay-header h4 {
    line-height: 1.2;
}

.session-chat-panel.analysis-session-chat .overlay-header h4 {
    margin: 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
}

.session-chat-panel.analysis-session-chat .overlay-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2, 8px) 0;
}

/* Override the GeneratedFileList 240px default cap when hosted inside the overlay
   so the list fills full overlay height. */
.session-chat-panel.analysis-session-chat .overlay-content .generated-file-list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.session-chat-panel.analysis-session-chat .overlay-content .generated-file-list-body {
    max-height: none;
    flex: 1;
    min-height: 0;
}

.session-chat-panel.analysis-session-chat .icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    background-color: transparent;
    color: var(--color-text-secondary, #666666);
    cursor: pointer;
    transition: all 150ms ease;
}

.session-chat-panel.analysis-session-chat .icon-button:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

.session-chat-panel.analysis-session-chat .menu-button {
    margin-right: var(--spacing-2, 8px);
}

/* Session Conversation List Component Styles */
.session-conversation-list {
    display: flex;
    flex-direction: column;
}

.session-conversation-list .new-conversation-btn {
    margin: var(--spacing-2, 8px) var(--spacing-4, 16px);
}

.session-conversation-list .conversation-items {
    display: flex;
    flex-direction: column;
}

.session-conversation-list .conversation-item {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light, #DEE2E6);
    transition: background-color 150ms ease;
}

.session-conversation-list .conversation-item:hover {
    background-color: var(--color-bg-subtle, #F5F5F5);
}

.session-conversation-list .conversation-item.active {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-left: 3px solid var(--color-primary, #80C936);
}

.session-conversation-list .conversation-title {
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #2F2F2F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--spacing-1, 4px);
}

.session-conversation-list .conversation-item.active .conversation-title {
    color: var(--color-primary-dark, #5A8F26);
    font-weight: var(--font-weight-bold, 700);
}

.session-conversation-list .conversation-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-tertiary, #999999);
}

.session-conversation-list .empty-state,
.session-conversation-list .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
    text-align: center;
    color: var(--color-text-secondary, #666666);
}

.session-conversation-list .empty-state p,
.session-conversation-list .loading-state p {
    margin: var(--spacing-3, 12px) 0 0 0;
    font-size: var(--font-size-sm, 14px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Session Chat Panel - Fullscreen Mode
   ═══════════════════════════════════════════════════════════════════════════════ */

.session-chat-panel.analysis-session-chat.fullscreen {
    position: fixed;
    top: 72px;
    left: 240px; /* Left navigation width */
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    z-index: 1200;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.2);
    transition: all 300ms ease;
}

/* Fullscreen mode on mobile - full screen */
@media (max-width: 767px) {
    .session-chat-panel.analysis-session-chat.fullscreen {
        left: 0;
        top: 60px;
    }
}

/* Header buttons positioning */
.session-chat-panel.analysis-session-chat .session-chat-header {
    gap: var(--spacing-2, 8px);
}

.session-chat-panel.analysis-session-chat .session-chat-header .menu-button + .menu-button {
    margin-left: calc(var(--spacing-2, 8px) * -1 + 2px);
}

.session-chat-panel.analysis-session-chat .popout-button {
    margin-left: auto;
    margin-right: 0;
}

.session-chat-panel.analysis-session-chat .fullscreen-button {
    margin-left: 2px;
    margin-right: 0;
}

.session-chat-panel.analysis-session-chat .session-chat-header .header-export-menu {
    margin-left: calc(var(--spacing-2, 8px) * -1 + 2px);
}

.session-chat-panel.analysis-session-chat .toggle-button {
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SESSION CARD - UNIFORM HEIGHT FIX
   ═══════════════════════════════════════════════════════════════ */

/* Ensure all session cards have uniform height in grid */
.session-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.session-card-list > [role="listitem"] {
    display: flex;
    height: 100%;
}

.session-card {
    height: 100%;
    min-height: 280px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.session-card .session-card-body {
    flex: 1;
}

.session-card .session-card-footer {
    margin-top: auto;
}

.session-card .session-name {
    font-size: 1rem;
    line-height: 1.3;
}

.session-card .pin-star--active,
.session-grid .pin-star--active {
    color: var(--color-warning, #ffc107);
}

.session-card .pin-star--active svg,
.session-grid .pin-star--active svg {
    fill: var(--color-warning, #ffc107);
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHT QUESTION DIALOG (KEY INSIGHTS COMPONENT)
   ═══════════════════════════════════════════════════════════════ */

.insight-question-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 16px);
    padding: var(--spacing-2, 8px);
}

.insight-question-prompt {
    margin: 0;
    font-size: var(--font-size-md, 16px);
    font-weight: var(--font-weight-medium, 600);
    color: var(--color-text-primary, #2F2F2F);
}

.insight-question-context {
    padding: var(--spacing-3, 12px);
    background-color: var(--color-bg-subtle, #F5F5F5);
    border-left: 3px solid var(--color-primary, #80C936);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #666666);
    line-height: var(--line-height-relaxed, 1.6);
}

.insight-question-context strong {
    color: var(--color-text-primary, #2F2F2F);
}

.insight-question-input {
    width: 100%;
    min-height: 80px;
}

.insight-question-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2, 8px);
    padding-top: var(--spacing-2, 8px);
}

/* ═══════════════════════════════════════════════════════════════
   KEY INSIGHTS — MARKDOWN LIST & BLOCK CONTENT STYLES
   ═══════════════════════════════════════════════════════════════ */

.insight-description ul,
.insight-description ol,
.insight-action-section ul,
.insight-action-section ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.insight-description ul,
.insight-action-section ul {
    list-style: disc;
}

.insight-description ol,
.insight-action-section ol {
    list-style: decimal;
}

.insight-description li,
.insight-action-section li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

/* Compact paragraph rendering inside insights - no block-level carriage returns */
.insight-description p,
.insight-action-text p {
    margin: 0;
    display: inline;
}

/* Add space between consecutive paragraphs without block spacing */
.insight-description p + p::before,
.insight-action-text p + p::before {
    content: " ";
}

/* ═══════════════════════════════════════════════════════════════
   ASK QUESTION DIALOG (DASHBOARD COMPONENTS)
   ═══════════════════════════════════════════════════════════════ */

.ask-question-dialog .context-display {
    padding: 1rem;
    background-color: var(--color-bg-subtle, #f5f5f5);
    border-radius: var(--radius-md, 6px);
    margin-bottom: 1rem;
}

.ask-question-dialog .context-display strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary, #333);
}

.ask-question-dialog .context-display p {
    margin: 0;
    color: var(--color-text-secondary, #666);
    font-size: var(--font-size-sm, 0.9rem);
    line-height: var(--line-height-normal, 1.4);
}

.ask-question-dialog .context-summary {
    margin: 0;
    color: var(--color-text-secondary, #666);
    font-size: var(--font-size-sm, 0.9rem);
    line-height: var(--line-height-relaxed, 1.6);
}

.ask-question-dialog .context-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-light, #e0e0e0);
    color: var(--color-text-secondary, #666);
    font-size: var(--font-size-sm, 0.9rem);
    line-height: var(--line-height-relaxed, 1.6);
}

.ask-question-dialog .dialog-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-default, #e0e0e0);
}

.ask-question-dialog .error-message {
    color: var(--color-error, #d32f2f);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--color-bg-subtle, #ffebee);
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ask-question-dialog .k-window-content {
    padding: 1rem;
}

.ask-question-dialog .k-textarea {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   ASK QUESTION BUTTON - Shared styling for all "Ask" buttons
   Translucent icon only, no background
   ═══════════════════════════════════════════════════════════════ */
.ask-question-btn,
.ask-question-btn.k-button {
    opacity: 0.5;
    transition: opacity 0.2s ease;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ask-question-btn:hover,
.ask-question-btn.k-button:hover {
    opacity: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ask-question-btn:focus,
.ask-question-btn:active,
.ask-question-btn.k-focus,
.ask-question-btn.k-active,
.ask-question-btn.k-button:focus,
.ask-question-btn.k-button:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.ask-question-btn .k-button-icon {
    color: var(--color-text-tertiary, #999);
}

.ask-question-btn:hover .k-button-icon {
    color: var(--color-text-secondary, #666);
}

/* ACTION BUTTON - Shared styling for Copy/Regenerate buttons
   Translucent icon only, no background */
.action-btn,
.action-btn.k-button {
    opacity: 0.5;
    transition: opacity 0.2s ease;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.action-btn:hover,
.action-btn.k-button:hover {
    opacity: 1;
    background: transparent !important;
    background-color: transparent !important;
}

.action-btn:focus,
.action-btn:active,
.action-btn.k-focus,
.action-btn.k-active,
.action-btn.k-button:focus,
.action-btn.k-button:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.action-btn .k-button-icon,
.action-btn .k-svg-icon,
.action-btn svg {
    color: var(--color-text-secondary, #777);
    fill: currentColor;
}

.action-btn:hover .k-button-icon,
.action-btn:hover .k-svg-icon,
.action-btn:hover svg {
    color: var(--color-text-primary, #444);
}

/* ═══════════════════════════════════════════════════════════════
   SESSION CARD GRID
   ═══════════════════════════════════════════════════════════════ */
.session-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.session-card-list > [role="listitem"] {
    display: flex;
    width: 350px;
    height: 100%;
}

.session-card-list > [role="listitem"] > .k-card {
    flex: 1;
    width: 350px;
    display: flex;
    flex-direction: column;
}

.session-card-list > [role="listitem"] > .k-card > .k-card-body {
    flex: 1;
}

@media (min-width: 768px) {
    .session-card-list {
        grid-template-columns: repeat(2, 350px);
        justify-content: start;
    }
}

@media (min-width: 1200px) {
    .session-card-list {
        grid-template-columns: repeat(3, 350px);
    }
}

/* ===============================================================
   MEMORY ADMIN STYLES
   =============================================================== */

/* Page Layout */
.memory-admin-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.memory-admin-page .header-actions {
    display: flex;
    gap: var(--spacing-3);
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-12);
}

/* Statistics Card */
.memory-stats-container {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.stats-loading {
    display: flex;
    justify-content: center;
    padding: var(--spacing-8);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.stat-card {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    text-align: center;
}

.stat-card.total {
    border-left: 4px solid var(--color-info);
}

.stat-card.active {
    border-left: 4px solid var(--color-success);
}

.stat-card.disabled {
    border-left: 4px solid var(--color-warning);
}

.stat-card.expired {
    border-left: 4px solid var(--color-error);
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
}

.stats-details {
    display: flex;
    gap: var(--spacing-8);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border-default);
}

.category-breakdown h4,
.stats-metadata h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
    text-transform: uppercase;
}

.category-items {
    display: flex;
    gap: var(--spacing-4);
}

.category-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
}

.category-item.preference {
    border-left: 3px solid #6366f1;
}

.category-item.conversation {
    border-left: 3px solid #10b981;
}

.category-item.suggestion {
    border-left: 3px solid #f59e0b;
}

.category-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.category-count {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.stats-metadata {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.metadata-item {
    font-size: var(--font-size-sm);
}

.metadata-label {
    color: var(--color-text-secondary);
    margin-right: var(--spacing-2);
}

.metadata-value {
    color: var(--color-text-primary);
}

.stats-empty {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--color-text-secondary);
}

/* Search Component */
.memory-search-container {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.filter-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.search-group {
    flex: 1;
    min-width: 300px;
}

.search-input-wrapper {
    display: flex;
    gap: var(--spacing-2);
}

.filter-actions {
    margin-left: auto;
}

.search-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-primary-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Grid Container */
.memory-grid-container {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.grid-loading,
.grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    color: var(--color-text-secondary);
}

.grid-empty-hint {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
}

.grid-actions {
    display: flex;
    gap: var(--spacing-1);
}

/* Status and Category Badges */
.status-badge,
.category-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.status-badge.status-active {
    background: #dcfce7;
    color: #166534;
}

.status-badge.status-disabled {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-expired {
    background: #fee2e2;
    color: #991b1b;
}

.category-badge.category-preference,
.category-badge.preference {
    background: #e0e7ff;
    color: #3730a3;
}

.category-badge.category-conversation,
.category-badge.conversation {
    background: #d1fae5;
    color: #065f46;
}

.category-badge.category-suggestion,
.category-badge.suggestion {
    background: #fef3c7;
    color: #92400e;
}

/* Relevance Bar */
.relevance-bar {
    position: relative;
    height: 20px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.relevance-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-success-dark), var(--color-success));
    transition: width var(--transition-normal);
}

.relevance-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Similarity Badges */
.similarity-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.similarity-badge.similarity-high {
    background: #dcfce7;
    color: #166534;
}

.similarity-badge.similarity-medium {
    background: #fef3c7;
    color: #92400e;
}

.similarity-badge.similarity-low {
    background: #fee2e2;
    color: #991b1b;
}

/* Search Results Section */
.search-results-section {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    background: var(--color-bg-primary-subtle);
    border-bottom: 1px solid var(--color-border-primary);
}

.search-results-header h3 {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

/* Bulk Actions */
.bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-filter);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-4);
}

.bulk-actions span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Dialog Styles */
.memory-detail-dialog .k-window-content,
.memory-delete-dialog .k-window-content {
    padding: var(--spacing-6);
}

.memory-detail-dialog .form-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.memory-detail-dialog .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.memory-detail-dialog .form-row label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.memory-detail-dialog .form-row-group {
    display: flex;
    gap: var(--spacing-4);
}

.memory-detail-dialog .form-row.half {
    flex: 1;
}

.memory-detail-dialog .readonly-info {
    background: var(--color-bg-subtle);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.memory-detail-dialog .info-label {
    color: var(--color-text-secondary);
    margin-right: var(--spacing-2);
}

.memory-detail-dialog .info-value {
    color: var(--color-text-primary);
    font-family: monospace;
}

.memory-detail-dialog .char-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: right;
}

.memory-detail-dialog .field-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Delete Confirmation Dialog */
.memory-delete-dialog .delete-confirm-content {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
    margin-bottom: var(--spacing-4);
}

.memory-delete-dialog .warning-icon {
    color: var(--color-error);
    flex-shrink: 0;
}

.memory-delete-dialog .warning-message p {
    margin: 0 0 var(--spacing-2) 0;
}

.memory-delete-dialog .memory-preview {
    background: var(--color-bg-subtle);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.memory-delete-dialog .preview-label {
    color: var(--color-text-secondary);
    margin-right: var(--spacing-2);
}

.memory-delete-dialog .preview-value {
    color: var(--color-text-primary);
}

.memory-delete-dialog .bulk-preview {
    background: var(--color-bg-subtle);
    padding: var(--spacing-3);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-3);
}

.memory-delete-dialog .bulk-preview ul {
    margin: 0;
    padding-left: var(--spacing-4);
    font-size: var(--font-size-sm);
}

.memory-delete-dialog .bulk-preview li {
    margin-bottom: var(--spacing-1);
    color: var(--color-text-secondary);
}

.memory-delete-dialog .delete-type-selection {
    border-top: 1px solid var(--color-border-default);
    padding-top: var(--spacing-4);
}

.memory-delete-dialog .delete-type-selection h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}

.memory-delete-dialog .permanent-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: #92400e;
}

.memory-delete-dialog .permanent-warning .k-svg-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Dialog Footer */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
}

/* Content Preview in Grid */
.content-preview {
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   AUTHENTICATION STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Authentication container for login/logout pages */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--spacing-6);
}

.auth-message {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 400px;
}

.auth-message p {
    margin: var(--spacing-4) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.auth-message .k-icon {
    font-size: 48px;
    color: var(--color-primary);
}

.auth-message.auth-error .k-icon {
    color: var(--color-error);
}

.auth-message.auth-success .k-icon {
    color: var(--color-success);
}

.auth-message .k-button {
    margin-top: var(--spacing-4);
}

/* Login display in header */
.login-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.login-display .user-name {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   LANDING PAGE STYLES
   Unauthenticated login page with split layout
   ============================================================ */

/* Landing Page Variables */
.landing-container {
    --landing-primary: var(--color-primary, #80C936);
    --landing-primary-dark: #6ba82e;
    --landing-secondary: #58585a;
    --landing-accent: #00a1e4;
}

/* T003: Base Container - CSS Grid split panel layout */
.landing-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 100vh;
    width: 100%;
}

/* T004: Empty Layout base styles */
.empty-layout {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* T005: Hero Panel (left side) - green gradient with dot pattern */
.landing-hero {
    background: linear-gradient(135deg, var(--landing-primary) 0%, var(--landing-primary-dark) 50%, var(--landing-secondary) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

/* Dot pattern overlay */
.landing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Radial glow overlay */
.landing-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.landing-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 500px;
}

/* Telli mascot image */
.telli-mascot {
    max-width: 280px;
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
}

/* Landing page tagline */
.landing-tagline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
}

/* T006: Sign-in Panel (right side) - white background */
.landing-signin {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.landing-signin-content {
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.landing-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 2rem;
}

.landing-welcome {
    font-size: 2rem;
    font-weight: 700;
    color: var(--landing-secondary);
    margin-bottom: 0.5rem;
}

.landing-subtitle {
    font-size: 1rem;
    color: #888;
    margin-bottom: 2rem;
}

/* T007: Sign-in Button styles */
.sign-in-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--landing-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(128, 201, 54, 0.3);
}

.sign-in-btn:hover {
    background: var(--landing-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(128, 201, 54, 0.4);
}

.sign-in-btn:active {
    transform: translateY(0);
}

.sign-in-btn:focus {
    outline: 2px solid var(--landing-primary);
    outline-offset: 2px;
}

.sign-in-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.sign-in-btn svg {
    width: 20px;
    height: 20px;
}

/* Help link */
.landing-help-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--landing-accent);
    text-decoration: none;
    font-size: 0.875rem;
}

.landing-help-link:hover {
    text-decoration: underline;
}

/* Error message */
.landing-error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* Loading spinner */
.landing-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================================
   TELLI BRANDING STYLES (Phase 4 - US2)
   ============================================================ */

/* T033: Telli mascot container and image */
.telli-container {
    margin-bottom: 2rem;
}

.telli-mascot {
    width: 180px;
    height: auto;
    animation: telli-float 3s ease-in-out infinite;
}

/* T034: Telli floating animation */
@keyframes telli-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* T035: Feature pills container */
.feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* T036: Individual feature pill badge */
.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--landing-secondary, #58585a);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feature-pill svg {
    color: var(--landing-primary, #80C936);
}

/* T037: Landing tagline text styles (override for Phase 4) */
.landing-hero .landing-tagline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

/* ============================================================
   RESPONSIVE LANDING PAGE STYLES (Phase 5 - US4)
   ============================================================ */

/* T042: Tablet breakpoint (max-width: 1024px) */
@media (max-width: 1024px) {
    .landing-container {
        grid-template-columns: 1fr 1fr;
    }

    .landing-hero {
        padding: 2rem;
    }

    .landing-signin {
        padding: 2rem;
    }

    .landing-tagline {
        font-size: 2rem;
    }

    .telli-mascot {
        width: 150px;
    }
}

/* T043: Mobile breakpoint (max-width: 768px) - stacked layout */
@media (max-width: 768px) {
    .landing-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .landing-hero {
        padding: 2rem 1.5rem;
        min-height: auto;
    }

    .landing-hero::after {
        width: 300px;
        height: 300px;
    }

    .landing-signin {
        padding: 2rem 1.5rem;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .landing-signin-content {
        max-width: 100%;
    }

    /* T044: Mobile Telli mascot size */
    .telli-mascot {
        width: 120px;
    }

    .landing-tagline {
        font-size: 1.5rem;
    }

    /* T045: Mobile feature pills - wrap and smaller gap */
    .feature-pills {
        gap: 0.5rem;
    }

    .feature-pill {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .feature-pill svg {
        width: 14px;
        height: 14px;
    }

    .landing-welcome {
        font-size: 1.5rem;
    }

    .landing-subtitle {
        font-size: 0.875rem;
    }

    .landing-logo {
        max-width: 150px;
        margin-bottom: 1.5rem;
    }
    

    /* T046: Mobile sign-in button - full width */
    .sign-in-btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* Extra small devices (max-width: 480px) */
@media (max-width: 480px) {
    .landing-hero {
        padding: 1.5rem 1rem;
    }

    .landing-signin {
        padding: 1.5rem 1rem;
    }

    .telli-mascot {
        width: 100px;
    }

    .landing-tagline {
        font-size: 1.25rem;
    }

    .feature-pills {
        flex-direction: column;
        align-items: center;
    }

    .feature-pill {
        width: auto;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .telli-mascot {
        animation: none;
    }

    .sign-in-btn,
    .feature-pill {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .landing-hero {
        background: var(--landing-secondary, #58585a);
    }

    .sign-in-btn {
        border: 2px solid #ffffff;
    }

    .feature-pill {
        border: 1px solid var(--landing-secondary, #58585a);
    }
}

/* ==========================================================================
   Admin Grid Compact Styling
   ========================================================================== */

/* Compact admin grid typography */
.admin-grid .k-grid-table,
.admin-grid .k-grid-header {
    font-size: 12px;
}

.admin-grid .k-grid-header th {
    font-size: 11px;
    font-weight: 600;
}

/* Increased row padding for breathing room */
.admin-grid .k-grid-table td {
    padding: 10px 12px;
}

.admin-grid .k-grid-header th {
    padding: 12px;
}

/* ==========================================================================
   Export Components Styling
   ========================================================================== */

/* Export Menu */
.export-menu {
    display: inline-flex;
    align-items: center;
}

.export-dropdown-button {
    min-width: auto;
}

.export-dropdown-button .export-button-text {
    margin-left: 6px;
}

.export-dropdown-button .k-loader {
    margin-left: 8px;
}

/* Export Menu Items */
.export-menu .k-menu-popup .menu-item-text {
    margin-left: 8px;
}

.export-menu .k-menu-popup .disabled-badge {
    margin-left: auto;
    padding: 2px 8px;
    background: #e0e0e0;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
}

.export-menu .k-menu-popup .disabled-item {
    opacity: 0.7;
}

/* Export Preview Dialog */
.export-preview-dialog .k-window-content {
    padding: 24px;
}

.export-preview-dialog .dialog-title-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-preview-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.export-preview-content .preview-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-preview-content .preview-section h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #666);
}

.export-preview-content .preview-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary, #333);
    margin: 0;
}

.export-preview-content .preview-summary {
    padding: 12px;
    background: var(--color-bg-subtle, #f5f5f5);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text-secondary, #666);
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.export-preview-content .metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.export-preview-content .metadata-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-preview-content .metadata-label {
    font-size: 12px;
    color: var(--color-text-tertiary, #999);
}

.export-preview-content .metadata-value {
    font-size: 14px;
    color: var(--color-text-primary, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-preview-dialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ============================================================
   Export Progress Indicator Styles
   ============================================================ */

.export-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}

.export-progress-content {
    background: white;
    padding: 32px 48px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 280px;
}

.export-status-text {
    margin: 0;
    font-size: 16px;
    color: #333;
    text-align: center;
}

.export-progress-overlay .cancel-button {
    margin-top: 8px;
}

/* ============================================================
   Export Options Panel Styles
   ============================================================ */

.export-options-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.export-options-panel.compact {
    gap: 12px;
}

.export-options-panel .option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-options-panel .option-label {
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

.export-options-panel .toggles-group {
    gap: 8px;
}

.export-options-panel .toggle-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-options-panel .toggle-option label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.export-options-panel.compact .option-group {
    gap: 6px;
}

.export-options-panel.compact .option-label {
    font-size: 13px;
}

.export-options-panel.compact .toggle-option label {
    font-size: 13px;
}

/* ============================================================
   Export Preview Error Styles
   ============================================================ */

.export-preview-error {
    padding: 24px;
    text-align: center;
    color: var(--color-text-secondary, #666);
}

/* ============================================================
   HTML Code Block Action Buttons
   ============================================================ */

.code-block-container {
    position: relative;
    background-color: #1a1d27;
    border-radius: 8px;
    margin: 0.75rem 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.code-block-container pre {
    background-color: #1a1d27;
    color: #e6edf3;
    padding: 1rem;
    margin: 0;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.code-block-container pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.6;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #252830;
    border-bottom: 1px solid #2a2e3d;
}

.code-language {
    font-size: 0.75rem;
    font-weight: 500;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-block-actions {
    display: flex;
    gap: 4px;
}

.code-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: #8b949e;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-action-btn:hover {
    background-color: #30363d;
    color: #e6edf3;
}

.code-action-btn.toggle-btn:hover {
    color: #58a6ff;
}

.code-action-btn.preview-btn:hover {
    color: #3fb950;
}

.code-action-btn.download-btn:hover {
    color: #d29922;
}

.html-action-buttons {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.html-action-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.html-action-btn:hover {
    opacity: 1;
    background: #fff;
}

.code-block-container:hover .html-action-btn {
    opacity: 1;
}

.code-generating-indicator {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    background-color: #F8F9FA;
    border: 1px dashed #DEE2E6;
    border-radius: 8px;
    color: #666666;
    font-size: 13px;
    font-weight: 500;
    animation: fadeInUp 300ms ease;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.code-generating-indicator:hover {
    background-color: #EEF0F2;
    border-color: #CED4DA;
}

.code-generating-indicator.expanded {
    border-style: solid;
    border-color: #ADB5BD;
    background-color: #F1F3F5;
}

.code-generating-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expand-chevron {
    margin-left: auto;
    font-size: 11px;
    color: #999999;
    transition: transform 200ms ease;
}

.code-generating-preview {
    margin-top: 4px;
    border-top: 1px solid #DEE2E6;
    padding-top: 8px;
}

.code-generating-preview pre {
    margin: 0;
    padding: 12px;
    background-color: #1E1E1E;
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
}

.code-generating-preview code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: #D4D4D4;
    white-space: pre-wrap;
    word-break: break-word;
}

.preview-btn:hover {
    border-color: #2196f3;
}

.download-btn:hover {
    border-color: #4caf50;
}

/* =====================================================================
   FILE DROP ZONE COMPONENT (TelerikDropZone + TelerikFileSelect)
   ===================================================================== */

/* Wrapper for the entire upload component */
.file-drop-zone-wrapper {
    display: contents;
}

/* Paperclip toggle button */
.file-upload-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-white, #FFFFFF);
    color: var(--color-text-secondary, #666666);
    cursor: pointer;
    transition: all 200ms ease;
    flex-shrink: 0;
    order: -1;
    align-self: center;
}

.file-upload-toggle:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

.file-upload-toggle[aria-expanded="true"] {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

/* File count badge on paperclip */
.file-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--color-primary, #80C936);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Drop zone content area - spans full width below the input row */
.file-drop-zone-content {
    width: 100%;
    order: 99;
}

/* Session chat input wrapper for file upload integration */
.session-chat-input-wrapper {
    border-top: 1px solid var(--color-border-light, #DEE2E6);
    background-color: var(--color-bg-white, #FFFFFF);
}

/* Customize TelerikDropZone appearance */
.file-drop-zone-wrapper .file-drop-zone.k-dropzone {
    border: 2px dashed var(--color-border-default);
    border-radius: 8px;
    background-color: var(--color-bg-muted);
    transition: all 0.2s ease-in-out;
}

.file-drop-zone-wrapper .file-drop-zone.k-dropzone:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-primary-subtle);
}

/* Drag Over State (applied by TelerikDropZone via DragOverClass) */
.file-drop-zone-wrapper .file-drop-zone.k-dropzone.drag-over {
    border: 2px solid var(--color-primary);
    background-color: var(--color-bg-primary-subtle);
    animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: var(--color-primary);
    }
    50% {
        border-color: var(--color-primary-hover);
    }
}

/* Drop zone hint text styling */
.file-drop-zone-wrapper .k-dropzone-hint {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.file-drop-zone-wrapper .k-dropzone-note {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 8px;
}

/* FileSelect integration - hide default UI when linked to DropZone */
.file-drop-zone-wrapper .file-select-integrated {
    margin-top: 8px;
}

.file-drop-zone-wrapper .file-select-integrated .k-fileselect {
    border: none;
    background: transparent;
}

/* Hide Telerik FileSelect's built-in file list — custom .file-list renders below */
.file-drop-zone-wrapper .file-select-integrated .k-upload-files,
.file-drop-zone-wrapper .file-select-integrated .k-upload-status {
    display: none;
}

/* Accessibility - hidden screen reader text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   FILE LIST
   ===================================================================== */

.file-drop-zone-wrapper .file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* File List Item */
.file-drop-zone-wrapper .file-list-item {
    padding: 12px 16px;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    background-color: var(--color-bg-white);
    transition: border-color 0.2s ease-in-out;
}

.file-drop-zone-wrapper .file-list-item:hover {
    border-color: var(--color-border-primary);
}

.file-drop-zone-wrapper .file-list-item.success {
    border-color: var(--color-success);
    background-color: var(--color-bg-primary-subtle);
}

.file-drop-zone-wrapper .file-list-item.error {
    border-color: var(--color-error);
    background-color: rgba(220, 53, 69, 0.05);
}

.file-drop-zone-wrapper .file-list-item.uploading {
    border-color: var(--color-primary);
}

/* File Info Row */
.file-drop-zone-wrapper .file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-drop-zone-wrapper .file-type-icon {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

/* File Details */
.file-drop-zone-wrapper .file-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-drop-zone-wrapper .file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-drop-zone-wrapper .file-size {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* File Status */
.file-drop-zone-wrapper .file-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.file-drop-zone-wrapper .status-text {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.file-drop-zone-wrapper .status-text.success {
    color: var(--color-success);
    font-weight: 500;
}

.file-drop-zone-wrapper .status-text.error {
    color: var(--color-error);
    font-weight: 500;
}

.file-drop-zone-wrapper .status-icon {
    flex-shrink: 0;
}

.file-drop-zone-wrapper .status-icon.success {
    color: var(--color-success);
}

.file-drop-zone-wrapper .status-icon.error {
    color: var(--color-error);
}

/* Remove Button */
.file-drop-zone-wrapper .remove-button {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}

.file-drop-zone-wrapper .remove-button:hover {
    color: var(--color-error);
}

/* =====================================================================
   UPLOAD PROGRESS
   ===================================================================== */

.file-drop-zone-wrapper .upload-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.file-drop-zone-wrapper .upload-progress .progress-bar {
    flex: 1;
}

.file-drop-zone-wrapper .progress-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    min-width: 36px;
    text-align: right;
}

/* =====================================================================
   ERROR MESSAGES
   ===================================================================== */

.file-drop-zone-wrapper .file-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: rgba(220, 53, 69, 0.05);
    color: var(--color-error);
    font-size: 12px;
}

.file-drop-zone-wrapper .file-error .retry-button {
    margin-left: auto;
    flex-shrink: 0;
}

/* =====================================================================
   RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 768px) {
    .file-drop-zone-wrapper .file-list-item {
        padding: 10px 12px;
    }

    .file-drop-zone-wrapper .file-info {
        gap: 8px;
    }

    .file-drop-zone-wrapper .file-name {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .file-drop-zone-wrapper .file-info {
        flex-wrap: wrap;
    }

    .file-drop-zone-wrapper .file-status {
        width: 100%;
        justify-content: flex-start;
        margin-top: 6px;
    }
}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */

/* Focus Indicators */
.file-drop-zone-wrapper .file-drop-zone:focus-within {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .file-drop-zone-wrapper .file-drop-zone.k-dropzone,
    .file-drop-zone-wrapper .file-list-item {
        transition: none;
    }

    .file-drop-zone-wrapper .file-drop-zone.k-dropzone.drag-over {
        animation: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .file-drop-zone-wrapper .file-drop-zone.k-dropzone {
        border-width: 3px;
    }

    .file-drop-zone-wrapper .file-list-item {
        border-width: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE FILE CHIP STYLES
   Compact file chip for displaying file attachments in chat messages.
   ═══════════════════════════════════════════════════════════════ */

.message-file-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    max-width: 200px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    cursor: pointer;
    transition: all 200ms ease;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    text-decoration: none;
    outline: none;
}

.message-file-chip:hover {
    background: var(--color-bg-light);
    border-color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.message-file-chip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* File chip - icon */
.message-file-chip .file-chip-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
}

/* File chip - name */
.message-file-chip .file-chip-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* File chip - status indicator */
.message-file-chip .file-chip-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.message-file-chip .file-chip-status .status-pending {
    opacity: 0.6;
}

.message-file-chip .file-chip-status .status-processing {
    color: var(--color-info);
}

.message-file-chip .file-chip-status .status-completed {
    color: var(--color-success);
}

.message-file-chip .file-chip-status .status-failed {
    color: var(--color-error);
}

.message-file-chip .file-chip-status .status-skipped {
    color: var(--color-text-tertiary);
}

/* File chip - remove button */
.message-file-chip .file-chip-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: var(--spacing-1);
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 150ms ease;
}

.message-file-chip .file-chip-remove:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-error);
}

.message-file-chip .file-chip-remove:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Processing status modifier classes on the chip container */
.message-file-chip.chip-status-pending {
    border-color: var(--color-border-default);
    background: var(--color-bg-light);
}

.message-file-chip.chip-status-processing {
    border-color: var(--color-info);
    background: rgba(23, 162, 184, 0.04);
}

.message-file-chip.chip-status-completed {
    border-color: var(--color-border-default);
}

.message-file-chip.chip-status-failed {
    border-color: var(--color-error);
    background: rgba(220, 53, 69, 0.04);
    cursor: not-allowed;
    opacity: 0.8;
}

.message-file-chip.chip-status-skipped {
    border-color: var(--color-border-default);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE FILE LIST STYLES
   Horizontal flex-wrap layout for multiple file chips on a message.
   ═══════════════════════════════════════════════════════════════ */

.message-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--color-border-light);
}

.message-file-list:empty {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE FILE CHIP - RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .message-file-chip {
        max-width: 160px;
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-2);
    }

    .message-file-list {
        gap: var(--spacing-1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE FILE CHIP - REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .message-file-chip {
        transition: none;
    }

    .message-file-chip .file-chip-remove {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE FILE CHIP - HIGH CONTRAST
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
    .message-file-chip {
        border-width: 2px;
    }

    .message-file-chip.chip-status-failed {
        border-width: 2px;
    }

    .message-file-chip.chip-status-processing {
        border-width: 2px;
    }
}

/* ===============================================================
   CHAT FILE INTEGRATION STYLES
   Styles for the file upload/attachment integration within the
   ChatContainer input area.
   =============================================================== */

/* Pending attachments bar - displayed above the chat input */
.chat-pending-attachments {
    padding: 8px 12px 0;
    background: var(--color-bg-light, #F8F9FA);
}

.chat-pending-attachments .message-file-list {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* FileDropZone within the chat input area - compact mode */
/* The chat panel (.chat-container) is a fixed-height flex column with overflow:hidden.
   The expanded upload area (Telerik's 180px drop area + the "Select files..." button +
   the file list) grew the input wrapper past the panel edge, clipping the button. Cap the
   content region and let it scroll internally so the button is always reachable, and shrink
   the drop area itself so it fits without scrolling in the common case. The collapsed state
   renders no content, so it is unaffected. */
.chat-file-drop-zone .file-drop-zone-content {
    padding: 0 12px 8px;
    background: var(--color-bg-light, #F8F9FA);
    max-height: 320px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Override Telerik's inline 180px/100px drop-area height in the compact chat context. */
.chat-file-drop-zone .file-drop-zone,
.chat-file-drop-zone .k-external-dropzone {
    height: auto !important;
    min-height: 48px;
    max-height: 130px;
}

.chat-file-drop-zone .k-dropzone {
    min-height: 48px;
    max-height: 130px;
    padding: 8px;
}

.chat-file-drop-zone .k-dropzone .k-dropzone-hint {
    font-size: var(--font-size-sm, 0.8125rem);
}

.chat-file-drop-zone .k-dropzone .k-dropzone-note {
    font-size: var(--font-size-xs, 0.75rem);
}

/* Style the Telerik FileSelect browse button in chat */
.chat-file-drop-zone .file-select-integrated .k-upload-button-wrap {
    margin-top: 4px;
}

/* Upload error notification bar */
.chat-upload-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 12px 8px;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 6px;
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--color-error, #DC3545);
}

.chat-upload-error span {
    flex: 1;
}

.upload-error-dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-error, #DC3545);
    cursor: pointer;
    transition: background 150ms ease;
}

.upload-error-dismiss:hover {
    background: rgba(220, 53, 69, 0.15);
}

/* Responsive: compact drop zone on small screens */
@media (max-width: 768px) {
    .chat-file-drop-zone .k-dropzone {
        min-height: 40px;
        padding: 6px;
    }

    .chat-pending-attachments {
        padding: 6px 8px 0;
    }

    .chat-upload-error {
        margin: 0 8px 6px;
        font-size: var(--font-size-xs, 0.75rem);
    }
}

/* =====================================================================
   CHAT CONTAINER (ChatContainer component - full-page & embedded)
   Styles for the unified Chat components used by ChatPage, EmbeddedChatPanel,
   and TelliUserChatWidget. Mirrors SessionChat styling adapted for these
   contexts.
   ===================================================================== */

/* Chat Container - flex column to fill available space */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-white, #FFFFFF);
}

/* Chat Loading State */
.chat-container .chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--spacing-8, 32px);
    text-align: center;
}

.chat-container .chat-loading p {
    margin: var(--spacing-3, 12px) 0;
    color: var(--color-text-secondary, #666666);
    font-size: var(--font-size-sm, 14px);
}

/* Chat Empty State (no conversation selected) */
.chat-container .chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0; /* allow shrink so the input area (esp. expanded upload) stays fully visible */
    overflow-y: auto;
    padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
    text-align: center;
    color: var(--color-text-secondary, #666666);
}

.chat-container .empty-state-logo {
    margin-bottom: var(--spacing-4, 16px);
}

.chat-container .telli-logo-large {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.chat-container .empty-state-title {
    margin: 0 0 var(--spacing-2, 8px) 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
}

.chat-container .empty-state-text {
    margin: 0;
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #666666);
}

.chat-container .empty-state-example {
    margin: var(--spacing-3, 12px) 0 0;
    font-size: var(--font-size-sm, 14px);
    font-style: italic;
    color: var(--color-text-tertiary, #999999);
}

/* Conversation Header */
.chat-container .chat-header {
    flex-shrink: 0;
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    background-color: var(--color-bg-white, #FFFFFF);
    border-bottom: 1px solid var(--color-border-light, #DEE2E6);
}

.chat-container .conversation-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
}

.chat-container .conversation-title {
    margin: 0;
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-container .agent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-xs, 12px);
    color: var(--color-primary-dark, #5A9826);
    white-space: nowrap;
}

/* Messages Scroller - scrollable message area */
.chat-container .messages-scroller {
    flex: 1;
    min-height: 0; /* allow the scroller to yield height so the expanded upload area is not clipped */
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-container .chat-messages {
    padding: var(--spacing-4, 16px);
    background-color: var(--color-bg-white, #FFFFFF);
    min-height: 100%;
}

/* Chat Message Bubbles (inside chat-container) */
.chat-container .chat-message {
    display: flex;
    gap: var(--spacing-3, 12px);
    margin-bottom: var(--spacing-4, 16px);
    animation: fadeInUp 300ms ease;
}

.chat-container .message-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-container .telli-avatar-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.chat-container .message-content {
    flex: 1;
    min-width: 0;
}

.chat-container .message-text {
    background-color: var(--color-bg-white, #FFFFFF);
    padding: var(--spacing-3, 12px);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-relaxed, 1.6);
    color: var(--color-text-primary, #2F2F2F);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* User Messages */
.chat-container .chat-message.user .message-text {
    background-color: var(--color-bg-primary-light, #E8F5D9);
    border-left: 3px solid var(--color-primary, #80C936);
}

/* Assistant Messages */
.chat-container .chat-message.assistant .message-text {
    border-left: 3px solid var(--color-info, #17A2B8);
}

/* Welcome Message in chat-container */
.chat-container .chat-welcome-message .message-avatar {
    width: 48px;
    height: 48px;
}

.chat-container .chat-welcome-message .telli-avatar-image {
    width: 40px;
    height: 40px;
}

.chat-container .chat-welcome-message .message-header {
    margin-bottom: var(--spacing-2, 8px);
}

.chat-container .chat-welcome-message .sender-name {
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-base, 16px);
    color: var(--color-text-primary, #2F2F2F);
}

.chat-container .chat-welcome-message .message-body {
    background-color: var(--color-bg-white, #FFFFFF);
    padding: var(--spacing-3, 12px);
    border-radius: var(--radius-md, 8px);
    border-left: 3px solid var(--color-info, #17A2B8);
}

.chat-container .welcome-header {
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
    margin-bottom: var(--spacing-2, 8px);
}

.chat-container .welcome-subtext {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #666666);
    margin-bottom: var(--spacing-2, 8px);
}

.chat-container .welcome-example {
    font-size: var(--font-size-sm, 14px);
    font-style: italic;
    color: var(--color-text-tertiary, #999999);
}

/* Typing Indicator */
.chat-container .typing-indicator .typing-dots,
.chat-container .typing-dots {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.chat-container .typing-dots span {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary, #80C936);
    border-radius: var(--radius-full, 9999px);
    animation: pulse 1.4s infinite;
}

.chat-container .typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-container .typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Streaming Indicator */
.chat-container .streaming-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.chat-container .streaming-indicator span {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary, #80C936);
    border-radius: var(--radius-full, 9999px);
    animation: pulse 1.4s infinite;
}

.chat-container .streaming-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-container .streaming-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Message Footer (tokens + rating) */
.chat-container .message-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-1, 4px);
}

/* Message Meta (token count) */
.chat-container .message-meta {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-tertiary, #999999);
}

/* Message Feedback (rating buttons) */
.chat-container .message-feedback {
    display: inline-flex;
    align-items: center;
}

/* Screen Reader Only */
.chat-container .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   CHAT INPUT AREA (ChatInputArea component)
   ===================================================================== */

/* Input Wrapper */
.chat-input-wrapper {
    border-top: 1px solid var(--color-border-light, #DEE2E6);
    background-color: var(--color-bg-white, #FFFFFF);
}

/* Input Row - flex layout with textarea and send button */
.chat-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2, 8px);
    padding: var(--spacing-4, 16px);
    background-color: var(--color-bg-white, #FFFFFF);
    align-items: flex-end;
}

.chat-input textarea {
    flex: 1;
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-normal, 1.4);
    color: var(--color-text-primary, #2F2F2F);
    resize: vertical;
    min-height: 40px;
    max-height: 120px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.chat-input textarea:focus {
    outline: none;
    border-color: var(--color-border-focus, #80C936);
    box-shadow: 0 0 0 3px rgba(128, 201, 54, 0.15);
}

.chat-input textarea:disabled {
    background-color: var(--color-bg-subtle, #F5F5F5);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Send Button */
.chat-input .send-button {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background-color: #80C936 !important;
    color: #FFFFFF !important;
    cursor: pointer;
    transition: all 200ms ease;
}

.chat-input .send-button:hover:not(:disabled) {
    background-color: var(--color-primary-hover, #9AD856) !important;
    transform: translateY(-1px);
}

.chat-input .send-button:active:not(:disabled) {
    transform: translateY(0);
}

.chat-input .send-button:disabled {
    background-color: var(--color-border-default, #E0E0E0) !important;
    color: var(--color-text-tertiary, #999999) !important;
    cursor: not-allowed;
}

.chat-input .send-button.cancel-streaming {
    background-color: #DC3545 !important;
    color: #FFFFFF !important;
}

.chat-input .send-button.cancel-streaming:hover {
    background-color: #c82333 !important;
}

/* ============================================================
   Session Creation UX - Shared Styles
   ============================================================ */

/* Tag chip/pill styling */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary-dark);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.tag-chip .tag-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    margin-left: 2px;
}

.tag-chip .tag-remove:hover {
    opacity: 1;
}

/* Expand/collapse toggle */
.expand-collapse-toggle {
    cursor: pointer;
    color: var(--color-primary-dark);
    font-weight: 500;
    font-size: 14px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.expand-collapse-toggle:hover {
    text-decoration: underline;
}

/* Selection display patterns */
.selection-inline {
    font-size: 14px;
    color: #2c3e50;
    line-height: 1.5;
}

.selection-collapsible {
    margin-top: 8px;
    padding: 10px 14px;
    background: #f9faf9;
    border-radius: 4px;
    border-left: 3px solid #e0e0e0;
}

.selection-collapsible ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selection-collapsible li {
    padding: 4px 0;
    font-size: 13px;
    color: #2c3e50;
    line-height: 1.5;
}

.selection-collapsible li + li {
    border-top: 1px solid #eee;
}

/* Tag input container for free-form tags */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 36px;
}

.tag-input-field {
    flex: 1;
    min-width: 150px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: white;
    outline: none;
}

.tag-input-field:focus {
    border-color: var(--color-primary);
}

.tag-input-field::placeholder {
    color: #999;
}

/* ============================================================
   Session Card - Option A Revised Design
   ============================================================ */

.session-card {
    width: 380px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}

.session-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
}

.session-card--busy {
    opacity: 0.7;
    pointer-events: none;
}

/* Green gradient header */
.session-card-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-card-star {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.session-card-star .pin-star--active {
    color: #FFD700;
}

.session-card-star .pin-star--active svg {
    fill: #FFD700;
}

.session-card-star:disabled {
    opacity: 0.5;
    cursor: default;
}

.session-card-name {
    color: white;
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-card-share {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.9;
    padding: 4px;
    display: flex;
    align-items: center;
}

.session-card-share:hover {
    opacity: 1;
}

/* Card body */
.session-card-body {
    padding: 20px;
}

/* Type + ID row */
.session-card-type-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.session-card-type {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary, #7f8c8d);
    font-weight: 500;
    font-size: 14px;
}

.session-card-id {
    font-family: 'Courier New', monospace;
    color: #95a5a6;
    font-size: 13px;
}

/* Field groups */
.session-card-fields {
    padding: 16px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.session-card-field-group {
    margin-bottom: 12px;
}

.session-card-field-group:last-child {
    margin-bottom: 0;
}

.session-card-field-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #95a5a6;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.session-card-field-value {
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact inline metadata */
.session-card-metadata {
    padding: 12px 0 0 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 11px;
    color: #95a5a6;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-card-meta-divider {
    color: #bdc3c7;
}

.session-card-privacy-icon {
    font-size: 14px;
    opacity: 0.7;
}

/* Gray footer actions */
.session-card-actions {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
}

.session-card-actions .k-button {
    flex: 1;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    background: white !important;
    color: #555 !important;
    font-weight: 500 !important;
}

.session-card-actions .k-button:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-dark) !important;
    background: rgba(var(--color-primary-rgb), 0.05) !important;
}

.session-card-actions .k-button.k-button-solid-primary {
    border-color: var(--color-primary) !important;
    background: white !important;
    color: var(--color-primary-dark) !important;
}

.session-card-actions .k-button.k-button-solid-primary:hover {
    background: var(--color-primary) !important;
    color: white !important;
}

/* ==========================================================================
   Application Tour Styles
   ========================================================================== */

/* Tour overlay - dims and blocks interaction with background when tour is active */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20000;
    pointer-events: auto;
    transition: opacity 200ms ease-in-out;
}

/* Tour highlight - applied to target element via JS interop */
.tour-highlight {
    position: relative !important;
    z-index: 21000 !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.8),
                0 0 16px 8px rgba(0, 102, 204, 0.4);
    border-radius: 4px;
    transition: box-shadow 200ms ease-in-out;
    pointer-events: auto;
}

/* Tour highlight for elements inside dialogs - no position change to avoid layout disruption */
.tour-highlight-dialog {
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.8),
                0 0 16px 8px rgba(0, 102, 204, 0.4);
    border-radius: 4px;
    transition: box-shadow 200ms ease-in-out;
}

/* Tour popover - positioned via JS interop near the highlighted element */
.tour-popover {
    position: fixed;
    z-index: 21001;
    max-width: 380px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

/* Tour step title */
.tour-step-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #212529;
}

/* Tour step content */
.tour-step-content {
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
}

/* Tour step counter */
.tour-step-counter {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 500;
}

/* Tour navigation buttons */
.tour-nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* Tour button base */
.tour-btn {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background-color: #fff;
    color: #495057;
    transition: background-color 150ms, border-color 150ms;
}

.tour-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

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

.tour-btn-primary {
    background-color: #6ab344;
    border-color: #6ab344;
    color: #fff;
}

.tour-btn-primary:hover {
    background-color: #5a9a3a;
    border-color: #5a9a3a;
}

.tour-btn-skip {
    border: none;
    background: transparent;
    color: #6c757d;
}

.tour-btn-skip:hover {
    color: #495057;
    background: transparent;
}

/* Tour trigger button (? icon in header) */
.tour-trigger-button {
    color: #495057;
    transition: color 150ms ease-in-out;
}

.tour-trigger-button:hover {
    color: #0066cc;
}

.tour-trigger-button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .tour-popover {
        max-width: calc(100vw - 32px);
        padding: 16px;
    }

    .tour-nav-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .tour-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Pipeline Admin Pages - Schema Management & Drift
   ═══════════════════════════════════════════════════════════════ */
/* severity-high/medium/low/none removed — these generic class names collide with
   DashboardHealthAndRisk risk-factor-card severity classes (display:inline-flex
   overrides card layout). DriftDashboard pages already define these in their own
   scoped <style> blocks so these global copies are not needed. */
.confidence-high { color: #6fb028; font-weight: 600; }
.confidence-medium { color: #d39e00; font-weight: 600; }
.confidence-low { color: #dc3545; font-weight: 600; }
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: white; border: 1px solid var(--color-border-default, #dee2e6); border-radius: 6px; flex-wrap: wrap; }
.match-rate-bar-container { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.match-rate-bar { flex: 1; height: 12px; border-radius: 6px; border: none; background-color: #e9ecef; }
.match-rate-bar::-webkit-progress-bar { background-color: #e9ecef; border-radius: 6px; }
.match-rate-bar::-webkit-progress-value { background-color: #80C936; border-radius: 6px; }
.match-rate-bar::-moz-progress-bar { background-color: #80C936; border-radius: 6px; }
.match-rate-label { font-size: 14px; font-weight: 600; min-width: 48px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT DIALOG
   ═══════════════════════════════════════════════════════════════ */
.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
    gap: 0.75rem;
}

.about-logo {
    max-width: 160px;
    height: auto;
}

.about-product-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.about-version-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.about-version {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-family: monospace;
}

.about-build-date {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
}

.about-copyright {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    margin: 0.5rem 0 0;
}

/* About Page — standalone routable page layout */
.about-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

/* Provider Auth Type UI */
.connection-hint {
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-left: 3px solid #0d6efd;
    border-radius: 0 4px 4px 0;
}

.connection-hint code {
    background: #e9ecef;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

/* Override detail dialog — scrollable content */
.override-detail-dialog .k-window-content {
    overflow-y: auto;
}

/* Session Traceability - Dialog scrolling */
.bullet-detail-dialog .k-window-content { overflow-y: auto; }

/* ===== Shared Admin Badge & Label Styles ===== */

.assessment-badge {
    font-weight: 600;
    font-size: 13px;
}

.assessment-helpful { color: #2e7d32; }
.assessment-neutral { color: #f57c00; }
.assessment-harmful { color: #c62828; }
.assessment-not_assessed { color: #757575; }
.assessment-injected { color: #1565c0; }
.assessment-created { color: #1565c0; }
.assessment-disabled { color: #9e9e9e; }

.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.type-preflight {
    background-color: rgba(21, 101, 192, 0.12);
    color: #1565c0;
}

.type-postflight {
    background-color: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.type-replace {
    background-color: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.section-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.section-strategies {
    background-color: rgba(21, 101, 192, 0.12);
    color: #1565c0;
}

.section-mistakes {
    background-color: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.section-edge {
    background-color: rgba(245, 124, 0, 0.12);
    color: #e65100;
}

.section-domain {
    background-color: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.section-api {
    background-color: rgba(106, 27, 154, 0.12);
    color: #6a1b9a;
}

.section-company {
    background-color: rgba(0, 131, 143, 0.12);
    color: #00838f;
}

.score-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.score-high {
    background-color: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.score-mid {
    background-color: rgba(245, 124, 0, 0.12);
    color: #e65100;
}

.score-low {
    background-color: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.empty-state {
    padding: 32px;
    text-align: center;
    color: #757575;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.summary-label {
    font-size: 11px;
    font-weight: 600;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: 14px;
    color: #212529;
}

.summary-count {
    font-size: 20px;
    font-weight: 700;
}

.section-container {
    margin-bottom: 32px;
}

.section-container h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}

.override-link,
a.override-link,
.k-grid a.override-link {
    color: #1565c0;
    text-decoration: none;
}

.override-link:hover,
a.override-link:hover,
.k-grid a.override-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.section-header h2 {
    margin: 0;
}

/* Analysis layout - constrain drawer sidebar to viewport */
.drawer-sidebar-content {
    height: calc(100vh - 75px) !important;
    max-height: calc(100vh - 75px) !important;
    overflow: hidden !important;
}

.drawer-sidebar-content > .report-selection-viewer {
    flex-shrink: 0;
}

.drawer-sidebar-content > .timeline-scroll-container {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.drawer-sidebar-content > .timeline-scroll-container > .timeline {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: none;
}

.drawer-sidebar-content > .timeline-scroll-container > .timeline::-webkit-scrollbar {
    display: none;
}

.scroll-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 300ms ease-in-out;
    z-index: 1;
}

.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-indicator.hidden .k-svg-icon,
.scroll-indicator.hidden .scroll-indicator-label {
    animation-play-state: paused;
}

.scroll-indicator .k-svg-icon {
    color: #80c936;
}

.scroll-indicator-bottom {
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.98) 60%);
    justify-content: flex-end;
    padding-bottom: 6px;
}

.scroll-indicator-bottom .k-svg-icon {
    animation: bounce-down 1.2s ease-in-out infinite;
}

.scroll-indicator-label {
    font-size: 0.65rem;
    color: #80c936;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.scroll-indicator-top {
    top: 0;
    background: linear-gradient(to top, transparent 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.98) 60%);
    justify-content: flex-start;
    padding-top: 6px;
}

.scroll-indicator-top .k-svg-icon {
    animation: bounce-up 1.2s ease-in-out infinite;
}

@keyframes bounce-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* Source Badge Clickable - navigates to source analysis section */
.source-badge-clickable {
    border: none;
    background: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.source-badge-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

.source-badge-clickable:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ===== FileDropZone Responsive (T12 - #69) ===== */

@media (max-width: 1440px) {
    .file-drop-zone-wrapper .k-dropzone-hint {
        font-size: 13px;
    }

    .file-drop-zone-wrapper .k-dropzone-note {
        font-size: 11px;
    }

    .file-drop-zone-wrapper .file-list {
        gap: 4px;
    }

    .file-drop-zone-wrapper .file-list-item {
        padding: 4px 8px;
    }

    .chat-file-drop-zone .k-dropzone {
        min-height: 44px;
    }

    .chat-input-wrapper {
        padding: 12px;
    }
}

@media (max-width: 1280px) {
    .file-drop-zone-wrapper .k-dropzone-hint {
        font-size: 13px;
    }

    .file-drop-zone-wrapper .file-size,
    .file-drop-zone-wrapper .file-status {
        font-size: 11px;
    }

    .file-drop-zone-wrapper .file-drop-zone.k-dropzone {
        max-height: 140px !important;
        height: auto !important;
    }

    .file-drop-zone-wrapper .file-list-item {
        padding: 3px 6px;
    }

    .file-drop-zone-wrapper .file-info {
        gap: 4px;
    }

    .chat-input-wrapper {
        padding: 10px;
        gap: 6px;
    }
}

@media (max-height: 800px) {
    .file-drop-zone-wrapper .file-drop-zone.k-dropzone {
        max-height: 120px;
    }

    .file-drop-zone-wrapper .file-list {
        max-height: 150px;
        overflow-y: auto;
        margin-top: 8px;
    }

    .file-drop-zone-wrapper .file-list-item {
        padding: 3px 6px;
    }

    .file-drop-zone-wrapper .k-dropzone-hint {
        font-size: 12px;
    }

    .file-drop-zone-wrapper .k-dropzone-note {
        font-size: 10px;
        margin-top: 2px;
    }

    .chat-input-wrapper {
        padding: 8px;
    }

    .chat-pending-attachments {
        max-height: 80px;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE MENU
   ═══════════════════════════════════════════════════════════════ */

/* Profile menu container */
.profile-menu-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Avatar circle button */
.user-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #80C936;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
    user-select: none;
}

.user-avatar-btn:hover {
    background-color: #6ba82e;
    box-shadow: 0 0 0 3px rgba(128, 201, 54, 0.3);
}

.user-avatar-btn:focus-visible {
    outline: 2px solid #80C936;
    outline-offset: 2px;
}

/* Overlay to catch outside clicks */
.profile-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* Dropdown panel */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: #fff;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px 0;
    overflow: hidden;
    animation: profileDropdownFadeIn 0.15s ease;
}

@keyframes profileDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header section with name + email */
.profile-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-email {
    font-size: 12px;
    color: var(--color-text-secondary, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Divider */
.profile-divider {
    height: 1px;
    background: var(--color-border, #e0e0e0);
    margin: 4px 0;
}

/* Menu items */
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-primary, #1a1a1a);
    text-align: left;
    transition: background-color 0.1s ease;
}

.profile-menu-item:hover {
    background-color: var(--color-bg-hover, #f5f5f5);
}

.profile-menu-item:focus-visible {
    outline: 2px solid #80C936;
    outline-offset: -2px;
}

.profile-menu-item-danger:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

.profile-menu-item-danger:hover .profile-menu-icon {
    color: #dc2626;
}

.profile-version {
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
    margin-top: 2px;
}

/* SVG icons in menu items */
.profile-menu-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary, #666);
}

/* Header credits pill badge */
.credits-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: rgba(128, 201, 54, 0.12);
    border: 1px solid rgba(128, 201, 54, 0.4);
    color: #3f5e1d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.credits-badge:hover {
    background-color: rgba(128, 201, 54, 0.22);
    box-shadow: 0 1px 4px rgba(128, 201, 54, 0.3);
    text-decoration: none;
    color: #3f5e1d;
}

.credits-badge:focus-visible {
    outline: 2px solid #80C936;
    outline-offset: 2px;
}

/* Credits row inside the profile dropdown header */
.profile-credits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    margin-top: 4px;
    font-size: 13px;
    text-decoration: none;
    color: var(--color-text-primary, #1a1a1a);
    border-radius: 4px;
    transition: background-color 0.1s ease;
}

.profile-credits-row:hover {
    background-color: var(--color-bg-hover, #f5f5f5);
    text-decoration: none;
}

.profile-credits-label {
    color: var(--color-text-secondary, #666);
    font-size: 12px;
}

.profile-credits-value {
    font-weight: 600;
    font-size: 13px;
    color: #3f5e1d;
}

/* Support dialog styles */
.support-content {
    text-align: center;
    padding: 16px 8px;
}

.support-content p {
    margin: 0 0 12px 0;
    color: var(--color-text-secondary, #666);
}

.support-email-link {
    font-size: 16px;
    font-weight: 600;
    color: #80C936;
    text-decoration: none;
}

.support-email-link:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   SESSION CHAT — MAIN CHAT REDIRECT HINT
   ═══════════════════════════════════════════════════════════════ */

.session-chat-main-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 8px;
    background-color: #E8F4FD;
    border: 1px solid #B3D9F2;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-primary, #2F2F2F);
}

.session-chat-main-hint a {
    color: var(--color-primary-dark, #6FB028);
    font-weight: 600;
    text-decoration: underline;
}

.session-chat-main-hint a:hover {
    color: var(--color-primary, #80C936);
}

.session-chat-main-hint .main-hint-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--color-text-secondary, #666666);
    display: flex;
    align-items: center;
}

.session-chat-main-hint .main-hint-dismiss:hover {
    color: var(--color-text-primary, #2F2F2F);
}

/* ═══════════════════════════════════════════════════════════════
   SUGGESTED PROMPTS
   ═══════════════════════════════════════════════════════════════ */

.suggested-prompts {
    margin-top: var(--spacing-4, 16px);
    padding: 0 var(--spacing-4, 16px);
}

.suggested-prompts-label {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #666666);
    margin-bottom: var(--spacing-2, 8px);
    text-align: center;
}

.suggested-prompts-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2, 8px);
    justify-content: center;
}

.suggested-prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1, 4px);
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-surface, #ffffff);
    color: var(--color-text-primary, #333333);
    font-size: var(--font-size-sm, 14px);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.suggested-prompt-chip:hover {
    background-color: var(--color-primary-light, #f0f9e0);
    border-color: var(--color-primary, #80C936);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.suggested-prompt-chip:active {
    background-color: var(--color-primary-lighter, #e5f5cc);
    transform: scale(0.98);
}

.suggested-prompt-chip .k-svg-icon {
    color: var(--color-primary, #80C936);
    flex-shrink: 0;
}

/* ===================================
   DashboardHealthAndRisk Component
   (moved from scoped CSS for reliability)
   =================================== */

.dashboard-health-and-risk {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

/* Header */
.combined-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.combined-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cache-badge, .fresh-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.cache-badge {
    background: var(--warning-bg, #fef3c7);
    color: var(--warning-text, #92400e);
}

.fresh-badge {
    background: var(--success-bg, #d1fae5);
    color: var(--success-text, #065f46);
}

.combined-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Two-column header grid */
.har-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Gauge Panels */
.gauge-panel {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.panel-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border, #e5e7eb);
}

.risk-panel .panel-title {
    border-bottom-color: #d32f2f;
}

.health-panel .panel-title {
    border-bottom-color: #388e3c;
}

.gauge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}

/* Header Badge (status in title) */
.header-badge {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

.header-badge.risk-critical,
.header-badge.risk-high {
    background: #d32f2f;
}

.header-badge.risk-moderate {
    background: #f57c00;
}

.header-badge.risk-low {
    background: #fbc02d;
    color: #333;
}

.header-badge.risk-minimal {
    background: #388e3c;
}

.header-badge.grade-a,
.header-badge.grade-b {
    background: #388e3c;
}

.header-badge.grade-c {
    background: #f57c00;
}

.header-badge.grade-d,
.header-badge.grade-f {
    background: #d32f2f;
}

.header-badge.grade-unknown {
    background: #757575;
}

/* Chat Icon Button */
.chat-icon-btn {
    margin-left: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.chat-icon-btn:hover {
    opacity: 1;
}

/* Health Grade Center Label */
.health-grade-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.grade-letter-circular {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

.grade-description-circular {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Combined Summary */
.combined-summary {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
    border-radius: 0.75rem;
    border-left: 4px solid #3b82f6;
}

.summary-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Risk Factors Section */
.risk-factors-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.risk-factors-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.risk-factor-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.risk-factor-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.risk-factor-card.severity-high {
    border-left: 4px solid #d32f2f;
}

.risk-factor-card.severity-medium {
    border-left: 4px solid #f57c00;
}

.risk-factor-card.severity-low {
    border-left: 4px solid #388e3c;
}

.factor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

.factor-header:hover {
    background: var(--surface-alt, #f9fafb);
}

.factor-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.factor-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-alt, #f3f4f6);
}

.factor-title-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.factor-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.factor-severity-badge {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

/* Right-side score section for risk factors */
.factor-score-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.factor-score {
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.05);
}

/* Risk score color classes */
.factor-score.score-critical {
    color: #c62828;
}

.factor-score.score-high {
    color: #d32f2f;
}

.factor-score.score-moderate {
    color: #f57c00;
}

.factor-score.score-low {
    color: #fbc02d;
}

.factor-score.score-minimal {
    color: #388e3c;
}

.expand-icon {
    color: var(--text-secondary, #6b7280);
    transition: transform 0.2s;
}

.factor-body {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border, #e5e7eb);
    background: var(--surface-alt, #f9fafb);
}

.factor-section {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.7;
}

.factor-section h6 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Health Indicators Section */
.health-indicators-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.health-indicators-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.health-indicator-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.health-indicator-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.health-indicator-card.status-excellent {
    border-left: 4px solid #2e7d32;
}

.health-indicator-card.status-good {
    border-left: 4px solid #388e3c;
}

.health-indicator-card.status-fair {
    border-left: 4px solid #f57c00;
}

.health-indicator-card.status-poor {
    border-left: 4px solid #e64a19;
}

.health-indicator-card.status-critical {
    border-left: 4px solid #c62828;
}

.indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

.indicator-header:hover {
    background: var(--surface-alt, #f9fafb);
}

.indicator-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.indicator-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-alt, #f3f4f6);
}

.indicator-title-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.indicator-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.indicator-status-badge {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

/* Right-side score section for health indicators */
.indicator-score-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.indicator-score {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 36px;
    text-align: center;
}

.indicator-grade {
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Health score color classes */
.indicator-score.health-score-excellent {
    color: #2e7d32;
}

.indicator-score.health-score-good {
    color: #388e3c;
}

.indicator-score.health-score-fair {
    color: #f57c00;
}

.indicator-score.health-score-poor {
    color: #e64a19;
}

.indicator-score.health-score-critical {
    color: #c62828;
}

/* Health grade color classes */
.indicator-grade.grade-a {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.1);
}

.indicator-grade.grade-b {
    color: #388e3c;
    background: rgba(56, 142, 60, 0.1);
}

.indicator-grade.grade-c {
    color: #f57c00;
    background: rgba(245, 124, 0, 0.1);
}

.indicator-grade.grade-d {
    color: #e64a19;
    background: rgba(230, 74, 25, 0.1);
}

.indicator-grade.grade-f {
    color: #c62828;
    background: rgba(198, 40, 40, 0.1);
}

.indicator-grade.grade-unknown {
    color: #757575;
    background: rgba(117, 117, 117, 0.1);
}

.indicator-body {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border, #e5e7eb);
    background: var(--surface-alt, #f9fafb);
}

.indicator-section {
    margin-top: 0.75rem;
}

.indicator-section h6 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.section-content {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Footer */
.combined-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e5e7eb);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Placeholder */
.combined-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.combined-placeholder p {
    margin: 1rem 0;
    font-size: 0.875rem;
}

/* Skeleton States */
.health-risk-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
}

.dual-gauges-skeleton {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.skeleton-gauge-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skeleton-section {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--surface-alt, #f9fafb);
}

.skeleton-line {
    height: 1rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin-bottom: 0.5rem;
}

.skeleton-line.short {
    width: 40%;
}

.skeleton-line.medium {
    width: 80%;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .har-header-grid {
        grid-template-columns: 1fr;
    }

    .combined-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .footer-actions {
        width: 100%;
        justify-content: center;
    }

    .grade-letter-circular {
        font-size: 3.5rem;
    }

    .grade-description-circular {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .dashboard-health-and-risk {
        padding: 1rem;
    }

    .combined-header h2 {
        font-size: 1.1rem;
    }

    .panel-title {
        font-size: 1rem;
    }

    .grade-letter-circular {
        font-size: 2.5rem;
    }

    .grade-description-circular {
        font-size: 0.625rem;
    }

    .factor-title-section,
    .indicator-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .factor-icon,
    .indicator-icon {
        display: none;
    }
}

/* Schema Detail Page Enhancements */
.schema-params-preview {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.schema-params-preview pre {
    margin: 0;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.schema-row-grid {
    border-left: 3px solid #0d6efd;
    margin-left: 8px;
    padding-left: 8px;
}

.header-pattern-text {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.edited-row {
    background-color: #fff9e6 !important;
}

/* Report Structure Preview */
.report-preview {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-height: 70vh;
    overflow-y: auto;
}

.report-preview-header {
    padding: 16px 20px 12px;
    border-bottom: 2px solid #212529;
}

.report-preview-title {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
}

.report-preview-subtitle {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.report-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.report-preview-table thead th {
    padding: 8px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.report-preview-col-code {
    width: 80px;
    color: #6c757d;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
}

.report-preview-col-label {
    text-align: left;
}

.report-preview-col-amount {
    width: 110px;
    text-align: right;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: #495057;
}

.report-preview-section-header td {
    padding: 10px 8px 4px;
    font-weight: 700;
    font-size: 14px;
    color: #212529;
    border-bottom: 1px solid #adb5bd;
    background: #f8f9fa;
}

.report-preview-row-data td {
    padding: 3px 8px;
    border-bottom: 1px solid #f1f3f5;
}

.report-preview-row-subtotal td {
    padding: 4px 8px;
    font-weight: 600;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.report-preview-row-total td {
    padding: 5px 8px;
    font-weight: 700;
    border-top: 2px solid #212529;
    border-bottom: 2px double #212529;
}

.report-preview-label-total {
    font-weight: 700;
}

.report-preview-label-subtotal {
    font-weight: 600;
    padding-left: 12px !important;
}

.report-preview-row-data .report-preview-col-label {
    padding-left: 20px;
}

.report-preview-footer {
    display: flex;
    gap: 16px;
    padding: 8px 20px;
    font-size: 11px;
    color: #adb5bd;
    border-top: 1px solid #dee2e6;
}

.info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.info-card-actions {
    display: flex;
    gap: 8px;
}

/* ============================================================
   Generated File Status Badges (Bolt 12 - unit-chat-ui-integration)
   Rendered by DocumentStatusBadge.razor / GeneratedFileListItem.razor.
   All contrast pairs exceed WCAG AAA for normal text (7:1 target).
   ============================================================ */

.generated-file-list-container {
    border-top: 1px solid #dee2e6;
    background: #fafbfc;
}

.generated-file-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease;
}

.generated-file-list-header:hover {
    background-color: #f0f0f0;
}

.generated-file-list-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.generated-file-list-chevron {
    display: flex;
    align-items: center;
    transition: transform 200ms ease;
    color: #6c757d;
}

.generated-file-list-chevron.expanded {
    transform: rotate(90deg);
}

.generated-file-list-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.generated-file-list-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #80C936;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.generated-file-list-body {
    max-height: 240px;
    overflow-y: auto;
    padding: 0 16px 12px;
}

.generated-file-list-empty {
    padding: 12px 0;
    font-size: 13px;
    color: #6c757d;
    text-align: center;
}

.generated-file-list-refresh,
.generated-file-list-retry {
    background: transparent;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    color: #495057;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.generated-file-list-refresh:hover,
.generated-file-list-retry:hover {
    background: #e9ecef;
}

.generated-file-list-loading,
.generated-file-list-error {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6c757d;
    padding: 8px 0;
}

.generated-file-list-error {
    color: #842029;
}

.generated-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.generated-file-list-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.generated-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.generated-file-icon {
    flex: 0 0 auto;
    color: #495057;
}

.generated-file-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.generated-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.generated-file-sub {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.generated-file-format {
    text-transform: uppercase;
    font-weight: 500;
}

.generated-file-status-slot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- Badge base styles (shared by all statuses) --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    line-height: 1.4;
}

.status-badge-icon,
.status-badge-spinner {
    display: inline-flex;
    align-items: center;
}

.status-badge-text {
    white-space: nowrap;
}

/* --- Per-state colors (Bolt 12 color spec, AAA contrast) --- */
.status-badge-queued {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffc107;
}

.status-badge-generating {
    background: #cfe2ff;
    color: #084298;
    border-color: #2196f3;
}

.status-badge-ready {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #4caf50;
}

.status-badge-failed {
    background: #f8d7da;
    color: #842029;
    border-color: #f44336;
}

/* --- Ready-state inline download link --- */
.status-badge-download {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    background: #0f5132;
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge-download:hover,
.status-badge-download:focus {
    background: #0a3f27;
    color: #ffffff;
    outline: 2px solid #0f5132;
    outline-offset: 2px;
}

/* --- Failed-state error panel --- */
.status-badge-error-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #fff5f5;
    border: 1px solid #f8d7da;
    border-radius: 4px;
    margin-top: 4px;
}

.status-badge-error-message {
    margin: 0;
    font-size: 13px;
    color: #842029;
    line-height: 1.4;
}

.status-badge-error-actions {
    display: flex;
    gap: 6px;
}

.status-badge-action-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #ffffff;
    color: #842029;
    border: 1px solid #f44336;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.status-badge-action-button:hover,
.status-badge-action-button:focus {
    background: #842029;
    color: #ffffff;
    outline: 2px solid #842029;
    outline-offset: 2px;
}

.status-badge-error-details {
    margin: 4px 0 0 0;
    padding: 6px;
    font-size: 11px;
    background: #ffffff;
    border: 1px solid #f8d7da;
    border-radius: 3px;
    color: #495057;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* --- Session chat panel host --- */
.session-chat-generated-files {
    flex: 0 0 auto;
}

/* --- Inline file chips rendered inside assistant message bubbles --- */
.session-chat-inline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.session-chat-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--telli-border, #d0d5dd);
    border-radius: 16px;
    background: var(--telli-surface, #f8fafc);
    font-size: 0.85rem;
    max-width: 100%;
}

.session-chat-inline-chip .chip-icon {
    display: inline-flex;
    align-items: center;
}

.session-chat-inline-chip .chip-name {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-chat-inline-chip .chip-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.session-chat-inline-chip .chip-download-error {
    color: var(--telli-danger, #dc2626);
    font-size: 0.75rem;
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* --- Conversation list + Generated Files divider --- */
.conversation-list-divider {
    height: 1px;
    background: var(--telli-border, #e5e7eb);
    margin: 12px 0;
}

.overlay-section-heading {
    margin: 0 12px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--telli-text-muted, #6b7280);
}

/* --- Responsive: narrow panels stack the status slot beneath the row --- */
@media (max-width: 400px) {
    .generated-file-list-item {
        flex-direction: column;
    }

    .status-badge-download-text {
        display: none;
    }
}

/* Notification Toast (Bolt 7 - OnScreen Notifications) */
.notification-toast-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    pointer-events: none;
}

.notification-toast {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    animation: toast-slide-in 0.3s ease-out;
    pointer-events: auto;
}

.notification-toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.notification-toast-header strong {
    font-size: 14px;
    color: #212529;
}

.notification-toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.notification-toast-close:hover {
    color: #212529;
}

.notification-toast-body {
    font-size: 13px;
    color: #495057;
}

.notification-toast-syncfailed {
    border-left: 4px solid #dc3545;
}

.notification-toast-synccompleted {
    border-left: 4px solid #28a745;
}

.notification-toast-thresholdbreached {
    border-left: 4px solid #ffc107;
}

.notification-toast-systemalert {
    border-left: 4px solid #17a2b8;
}

.notification-toast-userinvited,
.notification-toast-useraccepted {
    border-left: 4px solid #6f42c1;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION ADMIN PAGES (Bolt 12)
   ═══════════════════════════════════════════════════════════════ */

/* Notification Rules — form dialog */
.notification-rule-form .form-group {
    margin-bottom: 16px;
}

.notification-rule-form .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.875rem;
}

.notification-rule-form .form-group-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-rule-form .form-group-inline label {
    margin-bottom: 0;
}

.optional {
    font-weight: 400;
    color: var(--color-text-muted, #6c757d);
    font-size: 0.8125rem;
}

.form-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 8px;
}

/* Notification Config — form dialog */
.notification-config-form .form-group {
    margin-bottom: 16px;
}

.notification-config-form .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.875rem;
}

.page-description {
    color: var(--color-text-muted, #6c757d);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* Notification Templates — two-panel layout */
.notification-templates-layout {
    display: flex;
    gap: 24px;
    height: calc(100vh - 180px);
    min-height: 500px;
}

.notification-templates-sidebar {
    width: 240px;
    flex-shrink: 0;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 4px;
    overflow-y: auto;
    padding: 12px;
}

.notification-templates-sidebar h3 {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted, #6c757d);
    margin: 0 0 8px 0;
}

.delivery-type-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.delivery-type-list li {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-type-list li:hover {
    background: var(--color-hover, #f5f5f5);
}

.delivery-type-list li.selected {
    background: var(--color-primary, #0076D7);
    color: #fff;
}

.delivery-type-list .delivery-type-name {
    font-weight: 600;
}

.delivery-type-list .delivery-type-enum {
    font-size: 0.75rem;
    opacity: 0.7;
    font-family: var(--font-monospace, monospace);
}

/* Channel picker (chip-style buttons) */
.channel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px 0;
}

.channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--color-border, #dee2e6);
    background: var(--color-surface, #fff);
    color: var(--color-text, #212529);
    border-radius: 999px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.channel-chip:hover {
    background: var(--color-hover, #f5f5f5);
}

.channel-chip.mandatory {
    font-weight: 700;
}

.channel-chip.mandatory::after {
    content: "*";
    color: var(--color-danger, #d9534f);
    margin-left: 2px;
}

.channel-chip.selected {
    background: var(--color-primary, #0076D7);
    border-color: var(--color-primary, #0076D7);
    color: #fff;
}

.channel-chip.selected.mandatory::after {
    color: #fff;
}

/* Template variable chips (read-only) */
.variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
}

.variable-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-hover, #f5f5f5);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: var(--font-monospace, monospace);
    color: var(--color-text-muted, #495057);
}

.variable-chip.empty {
    color: var(--color-text-muted, #6c757d);
    font-style: italic;
    font-family: inherit;
}

.channel-picker-label,
.variables-label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 4px;
}

.notification-templates-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-text-muted, #6c757d);
    border: 1px dashed var(--color-border, #dee2e6);
    border-radius: 4px;
}

.preview-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-controls h3 {
    margin: 0;
    font-size: 1rem;
}

.sample-variables {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sample-variables label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.preview-iframe-container {
    flex: 1;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 4px;
    overflow: hidden;
}

.preview-iframe {
    display: block;
    border: none;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION USER PAGES (Bolt 13)
   ═══════════════════════════════════════════════════════════════ */

/* Notification Preferences page */
.notification-preferences-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
}

.notification-preference-group {
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 6px;
    padding: 16px;
}

.notification-preference-group h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.notification-preference-channels {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-preference-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.mandatory-icon {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6c757d);
    font-style: italic;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.875rem;
}

/* Notification History page */
.notification-history-filters {
    margin-bottom: 16px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-success {
    background: #d4edda;
    color: #155724;
}

.status-error {
    background: #f8d7da;
    color: #721c24;
}

.status-warning {
    background: #fff3cd;
    color: #856404;
}

.error-text {
    color: #dc3545;
    font-size: 0.8125rem;
    cursor: help;
}

/* Notification Detail Dialog (from task-add-notificationlog-body-20260421-001) */
.notification-detail-dialog .detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.notification-detail-dialog .detail-label {
    font-weight: 600;
    color: var(--telli-text-muted, #6b7280);
}

.notification-detail-dialog .detail-copyable {
    cursor: pointer;
    text-decoration: underline dotted;
}

.notification-detail-dialog .detail-section-header {
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
    color: var(--telli-text-muted, #6b7280);
}

.notification-detail-dialog .detail-body-block {
    white-space: pre-wrap;
    font-family: var(--font-monospace, monospace);
    background: #f8f9fb;
    border: 1px solid #e1e4e8;
    padding: 10px;
    border-radius: 4px;
    max-height: 320px;
    overflow: auto;
}

.notification-detail-dialog .detail-error-block {
    white-space: pre-wrap;
    font-family: var(--font-monospace, monospace);
    background: #fff4f4;
    border: 1px solid #f0caca;
    padding: 8px;
    border-radius: 4px;
    max-height: 240px;
    overflow: auto;
}

/* ===== Profile Page (P3 branded mockup) ===== */
.profile-page {
    --pp-color-primary: #80C936;
    --pp-color-primary-hover: #9AD856;
    --pp-color-primary-dark: #6FB028;
    --pp-color-primary-rgb: 128, 201, 54;
    --pp-color-text-primary: #2F2F2F;
    --pp-color-text-secondary: #666666;
    --pp-color-text-tertiary: #999999;
    --pp-color-text-muted: #6C757D;
    --pp-color-bg-white: #FFFFFF;
    --pp-color-bg-subtle: #F5F5F5;
    --pp-color-bg-muted: #FAFAFA;
    --pp-color-bg-primary-subtle: #F0F8E8;
    --pp-color-border-default: #E0E0E0;
    --pp-color-border-light: #DEE2E6;
    --pp-color-border-primary: #D4ECC4;
    --pp-color-border-focus: #80C936;
    --pp-color-success: #80C936;
    --pp-color-warning: #FFC107;
    --pp-color-error: #DC3545;
    --pp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --pp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --pp-shadow-primary: 0 2px 8px rgba(128, 201, 54, 0.3);
    --pp-radius-sm: 4px;
    --pp-radius-md: 8px;
    --pp-radius-pill: 999px;

    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pp-color-text-primary);
    padding: 24px 32px 140px;
    box-sizing: border-box;
}
.profile-page *, .profile-page *::before, .profile-page *::after { box-sizing: border-box; }

.profile-page .page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 12px;
    gap: 16px;
}
/* ---------------------------------------------------------------------------
   Chat page height model (fixes the clipped upload area / off-screen input row).
   The chat page renders its own <div class="profile-page"> containing a variable-
   height .page-head (breadcrumbs + title + subtitle) followed by .chat-page. The
   scoped rule .chat-page { height: calc(100vh - 120px) } assumed a fixed 120px of
   chrome, but the real chrome is the sticky header PLUS that page-head block (~258px
   measured), so .chat-page was taller than the space available and its bottom (the
   expanded upload area / input row) fell below the fold with the document scrolling.

   Fix: bound the chat page's .profile-page to the viewport below stable chrome only
   (sticky header + .content vertical padding), make it a flex column, and let
   .chat-page flex to fill whatever the page-head leaves. The page-head height is now
   irrelevant, so no magic constant tracks the title block. Scoped to the chat page via
   :has(> .chat-page) so every other .profile-page (settings, workspace, etc.) is
   untouched. Higher specificity than the scoped .chat-page rule, so it wins reliably.
   Popouts (ChatPopout/SessionChatPopout) use their own 100vh flex layouts and are
   unaffected. */
.profile-page:has(> .chat-page) {
    /* stable chrome only: sticky header (90px) + .content padding top/bottom (2 x 24px) */
    --chat-chrome: 138px;
    height: calc(100vh - var(--chat-chrome));
    padding-bottom: 24px; /* not a scrolling page — drop the 140px scroll gutter */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header collapses to a 36px slim bar — recompute the offset so the chat still fills. */
body:has(.header.collapsed) .profile-page:has(> .chat-page) {
    --chat-chrome: 84px; /* collapsed header (36px) + .content padding (2 x 24px) */
}

.profile-page:has(> .chat-page) > .page-head {
    flex-shrink: 0;
}

.profile-page:has(> .chat-page) > .chat-page {
    flex: 1 1 auto;
    min-height: 0;
    height: auto; /* override the fragile scoped calc(100vh - 120px) */
}

@media (max-width: 768px) {
    .profile-page:has(> .chat-page) {
        /* mobile .content padding is 16px (see .content @media 768) */
        --chat-chrome: 122px; /* header (90px) + .content padding (2 x 16px) */
    }
}

.profile-page .breadcrumbs { font-size: 12px; color: var(--pp-color-text-muted); margin-bottom: 6px; }
.profile-page .breadcrumbs a { color: var(--pp-color-text-muted); text-decoration: none; }
.profile-page .breadcrumbs a:hover { color: var(--pp-color-primary-dark); }
.profile-page h1.page-title {
    font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
    text-transform: none; line-height: 1.2;
    margin: 0; color: var(--pp-color-text-primary);
}
.profile-page .powered-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    color: var(--pp-color-primary-dark);
    text-transform: uppercase; letter-spacing: .06em;
    padding: 6px 12px;
    background: var(--pp-color-bg-primary-subtle);
    border: 1px solid var(--pp-color-border-primary);
    border-radius: var(--pp-radius-sm);
    white-space: nowrap;
}

.profile-page .section-nav {
    position: sticky; top: 12px;
    background: rgba(243, 244, 246, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pp-color-border-default);
    border-radius: var(--pp-radius-pill);
    padding: 5px;
    display: inline-flex; gap: 2px;
    margin-bottom: 22px;
    z-index: 5;
}
.profile-page .section-nav a,
.profile-page .section-nav .section-nav-link {
    padding: 7px 16px;
    border-radius: var(--pp-radius-pill);
    color: var(--pp-color-text-secondary);
    text-decoration: none;
    font-size: 13px; font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.profile-page .section-nav a:hover,
.profile-page .section-nav .section-nav-link:hover {
    color: var(--pp-color-text-primary);
    background: rgba(0, 0, 0, 0.04);
}
.profile-page .section-nav a.active,
.profile-page .section-nav .section-nav-link.active {
    background: var(--pp-color-primary);
    color: #fff;
    box-shadow: var(--pp-shadow-primary);
}

/* ── Workspace pill-bar split: primary work pills left, setup pills muted-right ──
   Scoped to .workspace-page so other .profile-page .section-nav bars are unaffected. */
.workspace-page .section-nav {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}
.workspace-page .section-nav-group {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}
.workspace-page .section-nav-spacer {
    flex: 1 1 auto;
    min-width: 16px;
}
/* Muted setup pills — demoted (lighter, lower-emphasis) but fully clickable. */
.workspace-page .section-nav .section-nav-link--muted {
    color: var(--pp-color-text-secondary);
    font-weight: 500;
    opacity: .72;
}
.workspace-page .section-nav .section-nav-link--muted:hover {
    opacity: 1;
    color: var(--pp-color-text-primary);
    background: rgba(0, 0, 0, 0.04);
}
/* A selected setup pill still reads as secondary (subtle fill), not the bold primary fill. */
.workspace-page .section-nav .section-nav-link--muted.active {
    opacity: 1;
    background: var(--pp-color-bg-primary-subtle);
    color: var(--pp-color-primary-dark);
    box-shadow: none;
}
@media (max-width: 720px) {
    .workspace-page .section-nav { flex-wrap: wrap; }
    .workspace-page .section-nav-spacer { flex-basis: 100%; min-width: 0; }
}

/* ── Workspace Upload tab — inert "coming soon" placeholder ──────────────────── */
.workspace-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 56px 24px;
    color: var(--pp-color-text-secondary);
}
.workspace-upload-placeholder-icon {
    font-size: 40px;
    line-height: 1;
    opacity: .45;
    color: var(--pp-color-primary);
}
.workspace-upload-placeholder-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pp-color-text-primary);
}
.workspace-upload-placeholder-body {
    margin: 0;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.5;
}

.profile-page .card {
    background: var(--pp-color-bg-white);
    border: 1px solid var(--pp-color-border-default);
    border-radius: var(--pp-radius-md);
    box-shadow: var(--pp-shadow-sm);
}

.profile-page h2.section-title {
    font-size: 16px; font-weight: 700;
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 10px;
    color: var(--pp-color-text-primary);
}
.profile-page .count-pill {
    font-size: 11px; font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-color-bg-primary-subtle);
    color: var(--pp-color-primary-dark);
}
.profile-page .section-head-inner {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.profile-page .view-all {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--pp-color-primary-dark);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
}
.profile-page .view-all:hover { color: var(--pp-color-primary); }

/* Hero */
.profile-page .hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
}
@media (max-width: 1100px) { .profile-page .hero { grid-template-columns: 1fr; } }

.profile-page .hero-account {
    padding: 22px 24px;
    display: flex; align-items: center; gap: 18px;
}
.profile-page .avatar-lg {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pp-color-primary), var(--pp-color-primary-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    flex: none;
    box-shadow: var(--pp-shadow-primary);
    object-fit: cover;
}
.profile-page img.avatar-lg { background: none; }
.profile-page .hero-account .name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.profile-page .hero-account .email { color: var(--pp-color-text-secondary); font-size: 13px; font-weight: 600; margin-top: 2px; }
.profile-page .hero-account .meta {
    color: var(--pp-color-text-muted);
    font-size: 12px; margin-top: 8px;
    display: flex; align-items: center; gap: 6px;
}
.profile-page .meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-color-success); display: inline-block; }

.profile-page .hero-footprint {
    padding: 20px 22px;
    background: linear-gradient(135deg, var(--pp-color-bg-primary-subtle) 0%, #fff 100%);
    border-color: var(--pp-color-border-primary);
    position: relative;
    overflow: hidden;
}
.profile-page .hero-footprint::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(128, 201, 54, 0.18), transparent 70%);
    pointer-events: none;
}
.profile-page .hero-footprint .label-sm {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--pp-color-primary-dark); font-weight: 700;
}
.profile-page .hero-footprint .label-sm::before {
    content: "\2728";
    font-size: 12px;
    color: var(--pp-color-primary);
}
.profile-page .hero-footprint .title {
    font-size: 15px; font-weight: 700; margin: 6px 0 14px;
    letter-spacing: -0.005em;
}
.profile-page .hero-footprint .metrics {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; margin-bottom: 14px;
}
.profile-page .metric {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--pp-color-border-primary);
    border-radius: var(--pp-radius-sm);
    padding: 10px 12px;
}
.profile-page .metric .n { font-size: 23px; font-weight: 700; color: var(--pp-color-text-primary); letter-spacing: -0.01em; }
.profile-page .metric .n.small { font-size: 13px; font-weight: 600; padding-top: 6px; }
.profile-page .metric .l { font-size: 11px; color: var(--pp-color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.profile-page .deeplink {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--pp-color-primary-dark);
    font-weight: 700; font-size: 13px;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.profile-page .deeplink:hover { color: var(--pp-color-primary); }
.profile-page .deeplink .arrow { transition: transform .15s; }
.profile-page .deeplink:hover .arrow { transform: translateX(3px); }

.profile-page .section { margin-top: 28px; }

/* Preferences */
.profile-page .prefs { padding: 6px 24px; }
.profile-page .pref-row {
    display: grid;
    grid-template-columns: 230px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--pp-color-border-light);
}
.profile-page .pref-row:last-child { border-bottom: none; }
.profile-page .pref-row .label { font-weight: 700; font-size: 13px; }
.profile-page .pref-row .hint { font-size: 12px; color: var(--pp-color-text-muted); margin-top: 3px; font-weight: 400; }

.profile-page .select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--pp-color-border-default);
    border-radius: var(--pp-radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--pp-color-text-primary);
    min-width: 300px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.profile-page .select:hover { border-color: var(--pp-color-text-tertiary); }
.profile-page .select:focus {
    outline: none;
    border-color: var(--pp-color-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--pp-color-primary-rgb), 0.15);
}
.profile-page .select:disabled {
    background: var(--pp-color-bg-subtle);
    color: var(--pp-color-text-muted);
    cursor: not-allowed;
}

.profile-page .chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    font-size: 11px; font-weight: 700;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-color-bg-primary-subtle);
    color: var(--pp-color-primary-dark);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.profile-page .chip.muted { background: var(--pp-color-bg-subtle); color: var(--pp-color-text-muted); }

/* Quiet hours */
.profile-page .quiet-card {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    background: linear-gradient(135deg, #FFF8E1 0%, #fff 100%);
    border-color: #FFE18C;
}
.profile-page .quiet-card .label-sm {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: #B8860B; font-weight: 700;
}
.profile-page .quiet-card .label-sm::before { content: "\1F319"; font-size: 12px; }
.profile-page .quiet-card .title { font-size: 15px; font-weight: 700; margin: 6px 0 3px; }
.profile-page .quiet-card .desc { color: var(--pp-color-text-secondary); font-size: 12px; }
.profile-page .quiet-card .controls { display: flex; gap: 10px; align-items: center; }

/* Switch */
.profile-page .switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; vertical-align: middle; cursor: pointer; }
.profile-page .switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.profile-page .slider {
    position: absolute; inset: 0;
    background: #D1D5DB;
    border-radius: var(--pp-radius-pill);
    transition: .2s; cursor: pointer;
}
.profile-page .slider::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.profile-page .switch input:checked + .slider { background: var(--pp-color-primary); }
.profile-page .switch input:checked + .slider::before { transform: translateX(16px); }
.profile-page .switch input:disabled + .slider { opacity: 0.55; cursor: not-allowed; }

/* Notifications matrix */
.profile-page .notif-card { padding: 4px 24px 18px; }
.profile-page .notification-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.profile-page .notification-matrix th,
.profile-page .notification-matrix td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--pp-color-border-light);
    text-align: left;
}
.profile-page .notification-matrix tr:last-child td { border-bottom: none; }
.profile-page .notification-matrix th {
    font-weight: 700; font-size: 11px;
    color: var(--pp-color-text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.profile-page .notification-matrix td.center,
.profile-page .notification-matrix th.center { text-align: center; }
.profile-page .notification-matrix tbody tr:hover { background: var(--pp-color-bg-muted); }
.profile-page .notif-type-cell { font-weight: 600; }
.profile-page .notif-type-cell small {
    display: block; font-weight: 400;
    color: var(--pp-color-text-muted);
    font-size: 11px; margin-top: 2px;
}

/* History */
.profile-page .history-card { padding: 4px 24px 18px; }
.profile-page .history-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--pp-color-border-light);
    margin-bottom: 4px;
}
.profile-page .history-search {
    flex: 1;
    max-width: 320px;
    min-width: 0;
}
.profile-page .history-summary {
    color: var(--pp-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}
.profile-page .history-footer {
    display: flex; justify-content: center;
    padding: 14px 0 4px;
}
.profile-page .history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.profile-page .history-table th,
.profile-page .history-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--pp-color-border-light);
    text-align: left;
}
.profile-page .history-table tr:last-child td { border-bottom: none; }
.profile-page .history-table th {
    font-weight: 700; font-size: 11px;
    color: var(--pp-color-text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.profile-page .history-table tbody tr:hover { background: var(--pp-color-bg-muted); }
.profile-page .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.profile-page .status .dot { width: 8px; height: 8px; border-radius: 50%; }
.profile-page .status.delivered { color: var(--pp-color-primary-dark); }
.profile-page .status.delivered .dot { background: var(--pp-color-success); }
.profile-page .status.failed { color: var(--pp-color-error); }
.profile-page .status.failed .dot { background: var(--pp-color-error); }
.profile-page .channel-tag {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    font-size: 11px; font-weight: 600;
    border-radius: var(--pp-radius-sm);
    background: var(--pp-color-bg-subtle);
    color: var(--pp-color-text-secondary);
}

/* Sticky save bar — fixed at viewport bottom for visibility. Prominent
   green-accented bar with strong shadow so unsaved changes can't be missed. */
.profile-page .save-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(820px, calc(100vw - 48px));
    margin-top: 0;
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border: 2px solid var(--pp-color-primary);
    border-radius: var(--pp-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(128, 201, 54, 0.12);
    align-items: center;
    z-index: 50;
    animation: save-bar-slide-in 0.2s ease-out;
}
@keyframes save-bar-slide-in {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.profile-page .save-bar .dirty-note {
    margin-right: auto;
    color: var(--pp-color-primary-dark);
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    text-transform: none;
}
.profile-page .save-bar .dirty-note .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--pp-color-primary);
    animation: profile-pulse 1.6s ease-in-out infinite;
}
@keyframes profile-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.15); }
}
.profile-page .btn {
    height: 38px; padding: 0 18px;
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-color-border-default);
    background: #fff; color: var(--pp-color-text-primary);
    font-family: inherit;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.profile-page .btn:hover { background: var(--pp-color-bg-subtle); border-color: var(--pp-color-text-tertiary); }
.profile-page .btn.primary {
    background: var(--pp-color-primary);
    color: #fff;
    border-color: var(--pp-color-primary);
    box-shadow: var(--pp-shadow-primary);
}
.profile-page .btn.primary:hover { background: var(--pp-color-primary-hover); border-color: var(--pp-color-primary-hover); }

/* Save-status toast — transient confirmation after any auto-save. */
.profile-page .save-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    padding: 12px 22px;
    border-radius: var(--pp-radius-pill);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    z-index: 60;
    animation: save-toast-in 0.18s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.profile-page .save-toast::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.profile-page .save-toast-info {
    background: #fff;
    color: var(--pp-color-text-secondary);
    border: 1px solid var(--pp-color-border-default);
}
.profile-page .save-toast-success {
    background: var(--pp-color-primary);
    color: #fff;
    border: 1px solid var(--pp-color-primary-dark);
}
.profile-page .save-toast-error {
    background: var(--pp-color-error);
    color: #fff;
    border: 1px solid var(--pp-color-error);
}
@keyframes save-toast-in {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Section error boundary */
.profile-page .section-error {
    background: #fff4f4;
    border: 1px solid #f0caca;
    border-radius: var(--pp-radius-sm);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.profile-page .section-error-message { margin: 0; color: var(--pp-color-error); font-size: 13px; font-weight: 600; }
.profile-page .section-error-retry {
    height: 30px; padding: 0 12px;
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-color-error);
    background: #fff; color: var(--pp-color-error);
    font-size: 12px; font-weight: 700; cursor: pointer;
}
.profile-page .section-error-retry:hover { background: var(--pp-color-error); color: #fff; }

.profile-page .profile-loading,
.profile-page .profile-empty {
    padding: 18px 4px; color: var(--pp-color-text-muted); font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════
   MEMORIES PAGE (/memories) — extends .profile-page styling
   ═══════════════════════════════════════════════════════════════ */

.profile-page .page-subtitle {
    margin: 6px 0 0;
    color: var(--pp-color-text-secondary);
    font-size: 13px;
    max-width: 720px;
}

.memories-page .tab-card,
.workspace-page .tab-card {
    padding: 22px 24px;
    margin-bottom: 24px;
}

.memories-page .tab-card-head,
.workspace-page .tab-card-head {
    margin-bottom: 16px;
}

.memories-page .tab-card-head h2.section-title,
.workspace-page .tab-card-head h2.section-title {
    margin: 0 0 4px;
}

.memories-page .tab-card-subtitle,
.workspace-page .tab-card-subtitle {
    margin: 0;
    color: var(--pp-color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.memories-page .tab-toolbar,
.workspace-page .tab-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--pp-color-border-default);
}

.memories-page .tab-toolbar-filters,
.workspace-page .tab-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.workspace-page .tab-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cal-name-cell {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.memories-page .ask-telli-btn,
.workspace-page .ask-telli-btn {
    border-radius: var(--pp-radius-pill) !important;
    box-shadow: var(--pp-shadow-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.memories-page .ask-telli-spark,
.workspace-page .ask-telli-spark {
    margin-right: 4px;
    font-size: 12px;
}

.ask-telli-btn .k-svg-icon {
    color: #FACC15;
    transition: color 0.15s ease, filter 0.15s ease;
}

.ask-telli-btn:hover .k-svg-icon {
    color: gold;
    filter: drop-shadow(0 0 4px #FACC15);
}

.memories-page .empty-state,
.workspace-page .empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--pp-color-text-muted);
    background: var(--pp-color-bg-muted);
    border: 1px dashed var(--pp-color-border-default);
    border-radius: var(--pp-radius-md);
}

.memories-page .empty-state p,
.workspace-page .empty-state p {
    margin: 0 0 14px;
    font-size: 13px;
}

.memories-page .memories-grid,
.memories-page .prompt-overrides-grid,
.memories-page .bullets-grid,
.workspace-page .memories-grid {
    border-radius: var(--pp-radius-md);
    overflow: hidden;
}

.memories-page .status-badge,
.workspace-page .status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--pp-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.memories-page .status-badge.status-active,
.workspace-page .status-badge.status-active {
    background: var(--pp-color-bg-primary-subtle);
    color: var(--pp-color-primary-dark);
}

.memories-page .status-badge.status-disabled,
.workspace-page .status-badge.status-disabled {
    background: var(--pp-color-bg-subtle);
    color: var(--pp-color-text-muted);
}

@media (max-width: 720px) {
    .memories-page .tab-toolbar,
    .workspace-page .tab-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .memories-page .ask-telli-btn,
    .workspace-page .ask-telli-btn {
        align-self: flex-end;
    }
}

/* Workspace tree panels */
.workspace-page .org-tree,
.workspace-page .folder-tree {
    --kendo-tree-item-padding-y: 4px;
}

.workspace-page .tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.15s;
    min-width: 260px;
}

.workspace-page .tree-node:hover {
    background-color: #f8f9fa;
}

.workspace-page .node-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-page .node-name {
    font-weight: 500;
    color: #212529;
}

.workspace-page .node-code {
    font-size: 12px;
    color: #6c757d;
    font-family: monospace;
}

.workspace-page .node-meta {
    font-size: 12px;
    color: #6c757d;
}

.workspace-page .node-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.workspace-page .children-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #6c757d;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.workspace-page .level-badge {
    padding: 2px 7px;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #495057;
}

.workspace-page .tree-node.disabled-node {
    opacity: 0.55;
}

/* Memories page — hero card (privacy reassurance + Ask Telli CTA) */
.memories-page .hero-card {
    position: relative;
    overflow: hidden;
    padding: 22px 28px 22px;
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 95% 50%, rgba(128, 201, 54, 0.18) 0%, rgba(128, 201, 54, 0) 55%),
        var(--pp-color-bg-primary-subtle);
    border: 1px solid var(--pp-color-border-primary);
}

.memories-page .hero-eyebrow,
.workspace-page .hero-eyebrow,
.sync-page .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--pp-color-primary-dark);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.memories-page .hero-spark,
.workspace-page .hero-spark,
.sync-page .hero-spark {
    font-size: 14px;
    line-height: 1;
}

.memories-page .hero-title,
.workspace-page .hero-title,
.sync-page .hero-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--pp-color-text-primary);
    letter-spacing: -0.005em;
}

.memories-page .hero-body,
.workspace-page .hero-body,
.sync-page .hero-body {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pp-color-text-secondary);
    max-width: 820px;
}

.memories-page .hero-body strong,
.workspace-page .hero-body strong,
.sync-page .hero-body strong {
    color: var(--pp-color-text-primary);
    font-weight: 700;
}

.memories-page .hero-ask-btn,
.workspace-page .hero-ask-btn,
.sync-page .hero-ask-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px 9px 16px;
    background: var(--pp-color-primary);
    color: #fff;
    border: none;
    border-radius: var(--pp-radius-pill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--pp-shadow-primary);
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}

.memories-page .hero-ask-btn:hover,
.workspace-page .hero-ask-btn:hover,
.sync-page .hero-ask-btn:hover {
    background: var(--pp-color-primary-hover);
}

.memories-page .hero-ask-btn:active,
.workspace-page .hero-ask-btn:active,
.sync-page .hero-ask-btn:active {
    transform: translateY(1px);
}

.memories-page .hero-ask-btn:focus-visible,
.workspace-page .hero-ask-btn:focus-visible,
.sync-page .hero-ask-btn:focus-visible {
    outline: 2px solid var(--pp-color-primary-dark);
    outline-offset: 2px;
}

.memories-page .hero-ask-icon,
.workspace-page .hero-ask-icon,
.sync-page .hero-ask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.memories-page .hero-ask-dot,
.workspace-page .hero-ask-dot,
.sync-page .hero-ask-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF6B6B;
    border: 2px solid var(--pp-color-bg-white);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Session chat popout — promoted from inline <style> */
/* Scoped under .session-chat-popout-container so rules reach DOM rendered by child components (SessionChatMessageBubble, ConversationListOverlay, etc.) where scoped CSS attribute hashing does not apply. */

.session-chat-popout-container .chat-message {
    display: flex;
    gap: var(--spacing-3, 12px);
    margin-bottom: var(--spacing-4, 16px);
    animation: fadeInUp 300ms ease;
}

.session-chat-popout-container .message-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-chat-popout-container .telli-avatar-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.session-chat-popout-container .message-content {
    flex: 1;
    min-width: 0;
}

.session-chat-popout-container .message-text {
    background-color: var(--color-bg-white, #FFFFFF);
    padding: var(--spacing-3, 12px);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-relaxed, 1.6);
    color: var(--color-text-primary, #2F2F2F);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.session-chat-popout-container .chat-message.user .message-text {
    background-color: var(--color-bg-primary-light, #E8F5D9);
    border-left: 3px solid var(--color-primary, #80C936);
}

.session-chat-popout-container .chat-message.assistant .message-text {
    border-left: 3px solid var(--color-info, #17A2B8);
}

.session-chat-popout-container .chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
    text-align: center;
    color: var(--color-text-secondary, #666666);
}

.session-chat-popout-container .welcome-avatar {
    margin-bottom: var(--spacing-4, 16px);
}

.session-chat-popout-container .welcome-avatar .telli-avatar-image {
    width: 80px;
    height: 80px;
}

.session-chat-popout-container .welcome-text h4 {
    margin: 0 0 var(--spacing-2, 8px) 0;
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #2F2F2F);
}

.session-chat-popout-container .welcome-text p {
    margin: 0;
    font-size: var(--font-size-md, 16px);
    color: var(--color-text-secondary, #666666);
}

.session-chat-popout-container .typing-indicator,
.session-chat-popout-container .streaming-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.session-chat-popout-container .typing-indicator span,
.session-chat-popout-container .streaming-indicator span {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary, #80C936);
    border-radius: var(--radius-full, 9999px);
    animation: pulse 1.4s infinite;
}

.session-chat-popout-container .typing-indicator span:nth-child(2),
.session-chat-popout-container .streaming-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.session-chat-popout-container .typing-indicator span:nth-child(3),
.session-chat-popout-container .streaming-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

.session-chat-popout-container .message-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-1, 4px);
}

.session-chat-popout-container .message-meta {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-tertiary, #999999);
}

.session-chat-popout-container .message-feedback {
    display: inline-flex;
    align-items: center;
}

.session-chat-popout-container .chat-loading,
.session-chat-popout-container .chat-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px);
    text-align: center;
}

.session-chat-popout-container .chat-loading p,
.session-chat-popout-container .chat-error p {
    margin: var(--spacing-3, 12px) 0;
    color: var(--color-text-secondary, #666666);
    font-size: var(--font-size-sm, 14px);
}

.session-chat-popout-container .chat-error p {
    color: var(--color-error, #DC3545);
}

.session-chat-popout-container .retry-button {
    margin-top: var(--spacing-3, 12px);
    padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-white, #FFFFFF);
    color: var(--color-text-primary, #2F2F2F);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-medium, 600);
    cursor: pointer;
    transition: all 200ms ease;
}

.session-chat-popout-container .retry-button:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

.session-chat-popout-container .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.session-chat-popout-container .conversation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-white, #FFFFFF);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.session-chat-popout-container .overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4, 16px);
    border-bottom: 1px solid var(--color-border-light, #DEE2E6);
}

.session-chat-popout-container .overlay-header h4 {
    margin: 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
}

.session-chat-popout-container .overlay-content {
    flex: 1;
    overflow-y: auto;
}

/* Session chat popout — input area, send/cancel buttons, retry button (mirrors .session-chat-panel.analysis-session-chat rules at ~line 2046) */
.session-chat-popout-container .session-chat-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2, 8px);
    padding: var(--spacing-4, 16px);
    background-color: var(--color-bg-white, #FFFFFF);
    border-top: 1px solid var(--color-border-light, #DEE2E6);
    align-items: flex-end;
}

.session-chat-popout-container .session-chat-input textarea {
    flex: 1;
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm, 14px);
    line-height: var(--line-height-normal, 1.4);
    color: var(--color-text-primary, #2F2F2F);
    resize: vertical;
    min-height: 40px;
    max-height: 120px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.session-chat-popout-container .session-chat-input textarea:focus {
    outline: none;
    border-color: var(--color-border-focus, #80C936);
    box-shadow: 0 0 0 3px rgba(128, 201, 54, 0.15);
}

.session-chat-popout-container .session-chat-input textarea:disabled {
    background-color: var(--color-bg-subtle, #F5F5F5);
    cursor: not-allowed;
    opacity: 0.6;
}

.session-chat-popout-container .send-button {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background-color: #80C936 !important;
    color: #FFFFFF !important;
    cursor: pointer;
    transition: all 200ms ease;
}

.session-chat-popout-container .send-button:hover:not(:disabled) {
    background-color: var(--color-primary-hover, #9AD856);
    transform: translateY(-1px);
}

.session-chat-popout-container .send-button:active:not(:disabled) {
    transform: translateY(0);
}

.session-chat-popout-container .send-button:disabled {
    background-color: var(--color-border-default, #E0E0E0);
    color: var(--color-text-tertiary, #999999);
    cursor: not-allowed;
}

.session-chat-popout-container .send-button.cancel-streaming {
    background-color: #DC3545 !important;
}

.session-chat-popout-container .send-button.cancel-streaming:hover {
    background-color: #c82333 !important;
}

.session-chat-popout-container .retry-button {
    margin-top: var(--spacing-3, 12px);
    padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-white, #FFFFFF);
    color: var(--color-text-primary, #2F2F2F);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-medium, 600);
    cursor: pointer;
    transition: all 200ms ease;
}

.session-chat-popout-container .retry-button:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

/* Session chat popout — icon buttons inside overlays (mirrors .session-chat-panel.analysis-session-chat .icon-button at ~line 2401) */
.session-chat-popout-container .icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: var(--radius-md, 8px);
    background-color: transparent;
    color: var(--color-text-secondary, #666666);
    cursor: pointer;
    transition: all 150ms ease;
}

.session-chat-popout-container .icon-button:hover {
    background-color: var(--color-bg-primary-subtle, #F0F8E8);
    border-color: var(--color-primary, #80C936);
    color: var(--color-primary, #80C936);
}

.session-chat-popout-container .icon-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;
}

.session-chat-popout-container .menu-button {
    margin-right: var(--spacing-2, 8px);
}


/* ==========================================================================
   Workspace page — /workspace chrome styles
   Shared chrome rules (page-subtitle, tab-card, tab-card-head, hero-*) are
   widened in the .memories-page selectors above so /memories rendering stays
   byte-identical and /workspace inherits the same visual language.
   Only workspace-specific overrides live here.
   ========================================================================== */

/* Hero card — workspace variant */
.workspace-page .workspace-hero-card {
    background: linear-gradient(135deg, #f0f8e8 0%, #e8f5d9 100%);
    border: 1px solid rgba(128, 201, 54, 0.15);
    padding: 28px 32px;
    border-radius: 12px;
    margin-bottom: 22px;
}

/* Sync page — hero card (data-sync info card matching memories/workspace) */
.sync-page .sync-hero-card {
    position: relative;
    overflow: hidden;
    padding: 22px 28px 22px;
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 95% 50%, rgba(128, 201, 54, 0.18) 0%, rgba(128, 201, 54, 0) 55%),
        var(--pp-color-bg-primary-subtle);
    border: 1px solid var(--pp-color-border-primary);
}

.sync-page .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.sync-page .hero-ask-btn--secondary {
    background: var(--pp-color-bg-white);
    color: var(--pp-color-primary-dark);
    border: 1px solid var(--pp-color-border-primary);
    box-shadow: none;
}

.sync-page .hero-ask-btn--secondary:hover {
    background: var(--pp-color-bg-primary-subtle);
}

.sync-launch-dialog .sync-launch-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sync-launch-dialog .sync-launch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--pp-color-border-subtle, #eee);
}

.sync-launch-dialog .sync-launch-row:last-child {
    border-bottom: none;
}

.sync-launch-dialog .sync-launch-name {
    font-weight: 600;
    color: var(--pp-color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   Workspace CRUD tab styles — Bolt 5
   All Workspace tab content uses these global classes (scoped CSS unreliable).
   ═══════════════════════════════════════════════════════════════ */

/* Tab content wrapper */
.workspace-tab-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}


.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #e9ecef;
    color: #495057;
}

.type-badge--monthly {
    background: #d4edda;
    color: #155724;
}

.type-badge--retail444,
.type-badge--retail544,
.type-badge--retail454,
.type-badge--retail445 {
    background: #cce5ff;
    color: #004085;
}

/* Provider badge */
.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #e9ecef;
    color: #495057;
}

.provider-badge--file {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.provider-badge-icon {
    font-size: 13px;
}

/* Org node hierarchy indentation */
.org-node-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.org-indent-icon {
    color: #adb5bd;
    font-size: 12px;
}

/* Detail list in modals */
.detail-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}

.detail-list dt {
    font-weight: 600;
    color: #495057;
}

.detail-list dd {
    margin: 0;
    color: #212529;
    word-break: break-word;
}

/* Workspace TelerikWindow modal */
.workspace-modal .k-window-content {
    padding: 20px 24px;
    overflow-y: auto;
}

.workspace-modal .k-window-actions {
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
    gap: 8px;
    justify-content: flex-end;
}

/* Full-screen modal on mobile */
@media (max-width: 768px) {
    .workspace-modal.k-window {
        width: 100vw !important;
        height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        max-width: 100vw !important;
    }
}

/* Form fields within workspace modals */
.workspace-modal .form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.workspace-modal .form-row {
    display: flex;
    gap: 16px;
}

.workspace-modal .form-row.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.workspace-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workspace-modal .form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.workspace-modal .checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
}

.workspace-modal .checkbox-group label {
    font-weight: normal;
}

.workspace-modal .muted-note {
    font-size: 12px;
    color: var(--pp-color-text-muted);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--pp-color-bg-muted);
    border-radius: 6px;
}

.workspace-modal .readonly-display {
    padding: 6px 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #6c757d;
    font-size: 14px;
}

@media (max-width: 768px) {
    .workspace-modal .form-row.two-columns {
        grid-template-columns: 1fr;
    }

    .workspace-modal .checkbox-group {
        padding-top: 0;
    }

}

/* =========================================================================
   WORKSPACE DIALOG — MODERN POLISH (Bolt 5 Phase 2)
   Modern visual layer applied via .workspace-dialog class on TelerikWindow.
   Uses pp- design tokens; pill chips replace chunky bordered inputs for
   read-only metadata; rounded corners, soft shadows, generous whitespace.
   ========================================================================= */

.workspace-dialog .k-window {
    border-radius: var(--pp-radius-md, 8px);
    box-shadow: var(--pp-shadow-md, 0 6px 24px rgba(0, 0, 0, 0.12));
    overflow: hidden;
}

.workspace-dialog .k-window-titlebar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pp-color-border-light);
    padding: 14px 18px;
    box-shadow: inset 0 -2px 0 var(--pp-color-bg-primary-subtle);
}

.workspace-dialog .k-window-content {
    padding: 18px 20px 20px;
    background: #FFFFFF;
}

.workspace-dialog .dialog-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.workspace-dialog .dialog-header > span:first-child {
    font-size: 16px;
    font-weight: 600;
    color: var(--pp-color-text-primary);
}

.workspace-dialog .dialog-subtitle {
    font-size: 13px;
    color: var(--pp-color-text-muted);
    font-weight: 400;
}

.workspace-dialog .field-section {
    background: var(--pp-color-bg-muted, #FAFAFA);
    border: 1px solid var(--pp-color-border-light);
    border-radius: var(--pp-radius-md, 8px);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.workspace-dialog .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.workspace-dialog .chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--pp-radius-pill, 999px);
    padding: 4px 12px;
    background: var(--pp-color-bg-primary-subtle, #F0F8E8);
    color: var(--pp-color-primary-dark, #6FB028);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.workspace-dialog .chip--neutral {
    background: var(--pp-color-bg-subtle, #F5F5F5);
    color: var(--pp-color-text-secondary);
}

.workspace-dialog .chip--mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0;
}

.workspace-dialog .field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pp-color-text-tertiary, #999999);
    margin-bottom: 4px;
}

.workspace-dialog .field-value {
    font-size: 14px;
    color: var(--pp-color-text-primary);
}

.workspace-dialog .toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-dialog .toggle-row label {
    margin: 0;
    font-size: 14px;
    color: var(--pp-color-text-primary);
    cursor: pointer;
}

.workspace-dialog .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--pp-color-border-light);
}

.workspace-dialog .btn-pill,
.workspace-dialog .btn-pill.k-button {
    border-radius: var(--pp-radius-pill, 999px);
    font-weight: 600;
    padding-left: 18px;
    padding-right: 18px;
}

.workspace-dialog .inline-error {
    color: var(--pp-color-error, #DC3545);
    font-size: 13px;
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    border: none;
    line-height: 1.4;
}

.workspace-dialog .info-note {
    background: var(--pp-color-bg-primary-subtle, #F0F8E8);
    border-left: 3px solid var(--pp-color-primary, #80C936);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--pp-color-text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.workspace-dialog .extend-card {
    background: #FFFFFF;
    border: 1px solid var(--pp-color-border-light);
    border-radius: var(--pp-radius-md, 8px);
    padding: 14px 16px;
    margin-top: 16px;
}

.workspace-dialog .extend-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--pp-color-text-primary);
}

.workspace-dialog .success-toast {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: var(--pp-radius-pill, 999px);
    background: var(--pp-color-bg-primary-subtle, #F0F8E8);
    color: var(--pp-color-primary-dark, #6FB028);
    font-size: 12px;
    font-weight: 600;
}

.workspace-dialog .mono-input input {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Workspace Schemas tab + shared selector hooks
   Hooks referenced from WorkspaceSchemasTab.razor and the shared
   WorkspaceProviderSelector component (Components/Selectors).
   ────────────────────────────────────────────────────────────────────────────── */

/* Skeleton placeholder shown while the provider list is loading.
   Width matches the resolved TelerikDropDownList (200px); height matches Telerik k-input. */
.filter-skeleton {
    width: 200px;
    height: 32px;
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: filter-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes filter-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Provenance subtitle above the schema grid: "Last inferred from upload v3 on Apr 2, 2026". */
.schema-provenance {
    margin: 8px 0 12px;
}

.schema-provenance-text {
    margin: 0;
    color: var(--pp-color-text-secondary, #6b7280);
    font-size: 12px;
    font-style: italic;
}

/* Wrapper around the read-only schema grid — adds a touch of breathing room. */
.schema-grid {
    margin-top: 4px;
}

/* Version-history accordion shown via Telerik DetailTemplate on the Reports grid. */
.version-history-accordion {
    background: var(--pp-color-bg-subtle, #f9fafb);
    padding: 12px 16px;
    border-left: 3px solid var(--pp-color-primary, #6FB028);
}

.version-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.version-history-table thead th {
    text-align: left;
    padding: 6px 12px;
    border-bottom: 1px solid var(--pp-color-border, #e5e7eb);
    font-weight: 600;
    color: var(--pp-color-text-primary, #111827);
}

.version-history-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--pp-color-border-subtle, #f3f4f6);
    color: var(--pp-color-text-primary, #111827);
}

.version-history-table tbody tr:last-child td {
    border-bottom: none;
}

/* Per-version download anchor — match the app's link styling. */
.version-download-link {
    color: var(--pp-color-primary, #6FB028);
    text-decoration: none;
    font-weight: 500;
}

.version-download-link:hover {
    text-decoration: underline;
}

button.version-download-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* =====================================================================
   WORKSPACE UPLOAD CARD (Bolt 7)
   ===================================================================== */

.upload-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--color-bg-white, #FFFFFF);
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: 8px;
    margin-bottom: 24px;
}

.upload-card-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.upload-picker-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #666666);
}

.upload-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

/* Progress bar — indeterminate animation triggered while _isUploading is true */
@keyframes indeterminate-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.upload-card .upload-progress {
    height: 4px;
    background: var(--color-bg-filter, #EBEBEB);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.upload-card .upload-progress .progress-bar {
    height: 100%;
    background: var(--color-primary, #80C936);
    border-radius: 2px;
}

.upload-error-message {
    color: var(--color-error, #DC3545);
    font-size: 13px;
    margin: 0;
    padding: 6px 10px;
    background: #FFF5F5;
    border-left: 3px solid var(--color-error, #DC3545);
    border-radius: 4px;
}

/* =====================================================================
   WORKSPACE OVERWRITE DIALOG (Bolt 7)
   ===================================================================== */

.overwrite-dialog-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.overwrite-intro {
    margin: 0;
    color: var(--color-text-primary, #2F2F2F);
    font-size: 14px;
}

.overwrite-prior-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
}

.overwrite-prior-details dt {
    color: var(--color-text-secondary, #666666);
    font-weight: 500;
}

.overwrite-prior-details dd {
    margin: 0;
    color: var(--color-text-primary, #2F2F2F);
    font-weight: 600;
}

.overwrite-prior-uploader {
    color: var(--color-primary-dark, #6FB028) !important;
}

.overwrite-prior-date {
    font-variant-numeric: tabular-nums;
}

.overwrite-consequence {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary, #666666);
    padding: 8px 12px;
    background: var(--color-bg-subtle, #F5F5F5);
    border-radius: 4px;
}

.ask-telli-what-changed-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-primary-dark, #6FB028);
    text-decoration: none;
    font-weight: 500;
}

.ask-telli-what-changed-link:hover {
    text-decoration: underline;
    color: var(--color-primary, #80C936);
}

.form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════
   FIRST-UPLOAD WIZARD (Bolt 11 — workspace-clickthrough)
   Global CSS used because scoped CSS is unreliable in this project.
   ═══════════════════════════════════════════════════════════════ */

.wizard-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wizard-header {
    margin-bottom: 8px;
}

.wizard-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}

.wizard-subtitle {
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.wizard-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wizard-card-preview {
    border-color: var(--color-primary);
    border-width: 2px;
}

.wizard-step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.wizard-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 8px 0 4px;
}

.wizard-field-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.wizard-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.wizard-label-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.wizard-hint {
    font-weight: normal;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.wizard-samples-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wizard-sample-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}

.wizard-sample-index {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 60px;
}

.wizard-actions,
.wizard-confirm-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.wizard-alert {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.wizard-alert-error {
    background: #fff5f5;
    border: 1px solid #fca5a5;
    color: #b91c1c;
}

.wizard-alert-warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.wizard-alert-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.wizard-warning-list {
    margin: 4px 0 0 16px;
    padding: 0;
}

.wizard-manifest-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    padding: 10px;
    background: #f5f5f5;
    border-radius: 6px;
}

.wizard-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wizard-fingerprint {
    font-family: monospace;
    font-size: 0.8rem;
}

.wizard-manifest-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.wizard-table th,
.wizard-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #e8e8e8;
}

.wizard-table th {
    background: #f5f5f5;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.wizard-section-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
    line-height: 1.8;
}

.wizard-marker {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: monospace;
    margin-left: 6px;
}

.wizard-empty {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin: 4px 0;
}


/* Workspace Schemas master/detail */
.workspace-schemas-detail {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #dee2e6;
}

.schema-status-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
}
.schema-status-badge.valid { background: #d4edda; color: #155724; }
.schema-status-badge.invalid { background: #fff3cd; color: #856404; }
.schema-status-badge.noschema { background: #e2e3e5; color: #6c757d; }

/* ──────────────────────────────────────────────────────────────────────────
 * Credits page — mirrors memories-page/workspace-page hero-card chrome.
 * ────────────────────────────────────────────────────────────────────────── */
.credits-page .hero-card {
    position: relative;
    overflow: hidden;
    padding: 22px 28px 22px;
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 95% 50%, rgba(128, 201, 54, 0.18) 0%, rgba(128, 201, 54, 0) 55%),
        var(--pp-color-bg-primary-subtle);
    border: 1px solid var(--pp-color-border-primary);
}

.credits-page .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--pp-color-primary-dark);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.credits-page .hero-spark {
    font-size: 14px;
    line-height: 1;
}

.credits-page .hero-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--pp-color-text-primary);
}

.credits-page .hero-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pp-color-text-secondary);
    max-width: 760px;
}

.credits-page .credits-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.credits-page .credits-toolbar .month-picker-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--pp-color-text-secondary);
}

.credits-page h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 10px;
    color: var(--pp-color-text-primary);
}

/* Gamification — "#1" leader badge in the Daily / User / Model grids. */
.credits-page .credits-leader-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #6b4f00;
    background: linear-gradient(135deg, #fff2a8 0%, #ffd84d 55%, #f0a800 100%);
    border: 1px solid #d49a00;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(212, 154, 0, 0.35);
    vertical-align: middle;
    line-height: 1;
}

/* =============================
   MultiReportPicker
   ============================= */

/* Container */
.mr-picker {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Two-column layout: list + preview */
.mr-picker-columns {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
}

/* Scrollable report list */
.mr-picker-list {
    border: 1px solid var(--kendo-color-border, #ced4da);
    border-radius: 4px;
    max-height: 320px;
    overflow-y: auto;
}

/* Individual report row */
.mr-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--kendo-color-border, #ced4da);
    transition: background-color 0.15s;
}

.mr-picker-row:last-child {
    border-bottom: none;
}

.mr-picker-row:hover,
.mr-picker-row:focus-within {
    background-color: var(--kendo-color-base-hover, #f0f4ff);
    outline: 2px solid var(--kendo-color-primary, #0078d4);
    outline-offset: -2px;
}

.mr-picker-row--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mr-picker-row label {
    display: flex;
    flex-direction: column;
    flex: 1;
    cursor: pointer;
}

.mr-picker-name {
    font-weight: 500;
    font-size: 14px;
}

.mr-picker-meta {
    font-size: 12px;
    color: var(--kendo-color-subtle, #6c757d);
}

/* Preview panel */
.mr-picker-preview {
    border: 1px solid var(--kendo-color-border, #ced4da);
    border-radius: 4px;
    padding: 12px;
    background: var(--kendo-color-base-subtle, #f8f9fa);
    min-height: 120px;
}

/* Selection counter */
.mr-picker-counter {
    font-size: 13px;
    font-weight: 500;
    color: var(--kendo-color-on-base, #212529);
}

.mr-picker-counter--warning {
    color: #b45309; /* amber-700 — WCAG AA on white */
}

/* Boundary banner */
.mr-picker-boundary-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    font-size: 13px;
}

/* Selected context list */
.mr-picker-context h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.mr-picker-selected-list {
    list-style: decimal inside;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mr-picker-selected-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 8px;
    background: var(--kendo-color-base-subtle, #f8f9fa);
    border-radius: 3px;
}

/* Skill hint text */
.mr-skill-hint {
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Skill dropdown item */
.mr-skill-item {
    display: flex;
    flex-direction: column;
}

.mr-skill-name {
    font-weight: 500;
}

.mr-skill-desc {
    font-size: 11px;
    color: var(--kendo-color-subtle, #6c757d);
}

/* Run Analysis button hint */
.mr-run-hint {
    font-size: 12px;
    color: var(--kendo-color-subtle, #6c757d);
    margin-top: 6px;
    display: block;
}

/* Submitting overlay */
.mr-picker-submitting-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    border-radius: 4px;
}

/* Responsive: collapse to single column on narrow viewport */
@media (max-width: 640px) {
    .mr-picker-columns {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================== */
/* Cohort attribution chips (multi-report analysis)                       */
/* Rendered only when cohort data is present; absent for single-report.   */
/* ===================================================================== */

.cohort-reports-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px 0;
    padding: 8px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.cohort-reports-strip-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-right: 4px;
}

.cohort-report-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    white-space: nowrap;
}

.cohort-report-chip-date {
    font-size: 10px;
    color: #6366f1;
}

.cohort-source-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.cohort-source-chips-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-right: 2px;
}

.cohort-source-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.4;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    white-space: nowrap;
}

/* ===========================================================================
   Multi-report analysis dashboards (US1): PortfolioScorecard, CrossReportVariance,
   NarrativeCorrelation. Reuse .cohort-* chip classes above where helpful.
   =========================================================================== */

/* --- Shared grade / risk / strength badges --- */
.portfolio-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    font-weight: 700;
    border-radius: 6px;
    color: #fff;
}

.portfolio-grade-badge.grade-a { background: #16a34a; }
.portfolio-grade-badge.grade-b { background: #65a30d; }
.portfolio-grade-badge.grade-c { background: #f59e0b; }
.portfolio-grade-badge.grade-d { background: #ea580c; }
.portfolio-grade-badge.grade-f { background: #dc2626; }

.portfolio-risk-badge,
.variance-baseline-badge,
.variance-category-badge,
.correlation-strength-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: none;
}

.portfolio-risk-badge.risk-critical { background: #fee2e2; color: #991b1b; }
.portfolio-risk-badge.risk-high { background: #ffedd5; color: #9a3412; }
.portfolio-risk-badge.risk-medium { background: #fef9c3; color: #854d0e; }
.portfolio-risk-badge.risk-low { background: #dcfce7; color: #166534; }

/* --- Multi-report panel base wrappers --- */
.dashboard-portfolio-scorecard,
.dashboard-cross-report-variance,
.dashboard-narrative-correlation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

/* --- Portfolio Scorecard --- */
.dashboard-portfolio-scorecard .portfolio-header,
.dashboard-cross-report-variance .variance-header,
.dashboard-narrative-correlation .correlation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.portfolio-rollup-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.portfolio-gauge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 4px;
}

.portfolio-gauge-grid .grade-letter-circular {
    font-size: 3rem;
}

.portfolio-gauge-grid .grade-description-circular {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.composite-panel .panel-title {
    border-bottom-color: #2563eb;
}

.growth-panel .panel-title {
    border-bottom-color: #0891b2;
}

@media (max-width: 1100px) {
    .portfolio-gauge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portfolio-gauge-grid {
        grid-template-columns: 1fr;
    }
}

.portfolio-rollup-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.portfolio-score-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portfolio-score-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.portfolio-score-value {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
}

.portfolio-score-sub {
    font-size: 13px;
    color: #475569;
}

.portfolio-narrative {
    margin-top: 12px;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}

/* Markdown <strong> and <p> styling for narrative/rich-text blocks */
.portfolio-narrative strong, .variance-narrative strong, .variance-baseline-why strong,
.portfolio-strengths strong, .portfolio-concerns strong, .variance-top-drivers strong {
    font-weight: 700;
    color: #1e293b;
}

.portfolio-narrative p, .variance-narrative p, .variance-baseline-why p {
    margin: 0 0 8px;
}

.portfolio-narrative p:last-child, .variance-narrative p:last-child, .variance-baseline-why p:last-child {
    margin-bottom: 0;
}

.portfolio-per-report-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portfolio-per-report-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}

.portfolio-per-report-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.09), 0 4px 16px rgba(0,0,0,0.07);
}

.portfolio-per-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
}

.portfolio-per-report-card.expanded .portfolio-per-report-head {
    background: #f8fafc;
}

.portfolio-per-report-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portfolio-per-report-name {
    font-weight: 600;
    color: #1e293b;
}

.portfolio-per-report-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portfolio-contribution {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.portfolio-per-report-detail {
    padding: 10px 12px 14px;
    border-top: 1px solid #f1f5f9;
}

.portfolio-per-report-scores {
    display: flex;
    gap: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

.portfolio-detail-label,
.variance-top-drivers-label,
.correlation-detail-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 6px;
}

.portfolio-strengths ul,
.portfolio-concerns ul,
.variance-top-drivers ul {
    margin: 0 0 4px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #1e293b;
}

.portfolio-strengths li,
.portfolio-concerns li,
.variance-top-drivers li {
    margin-bottom: 5px;
}

/* Color-cue the section labels so strengths/concerns are scannable at a glance */
.portfolio-strengths .portfolio-detail-label { color: #15803d; }
.portfolio-concerns .portfolio-detail-label { color: #b91c1c; }

/* Strengths & Concerns side-by-side panels */
.portfolio-sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.portfolio-sc-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.portfolio-sc-panel.portfolio-strengths { border-left: 3px solid #15803d; }
.portfolio-sc-panel.portfolio-concerns { border-left: 3px solid #b91c1c; }
@media (max-width: 700px) {
    .portfolio-sc-grid { grid-template-columns: 1fr; }
}

/* --- Cross-Report Variance --- */
.variance-baseline-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.variance-baseline-strategy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.variance-baseline-label,
.variance-net-impact {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.variance-baseline-source {
    font-size: 13px;
    color: #475569;
}

.variance-baseline-why {
    margin-top: 6px;
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
}

.variance-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.variance-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

.variance-filter-chip {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.variance-filter-chip:hover {
    background: #e2e8f0;
}

.variance-filter-chip.is-active {
    background: #1e293b;
    color: #ffffff;
    border-color: #1e293b;
}

.variance-filter-chip.is-positive.is-active,
.variance-filter-chip.is-negative.is-active {
    background: #0f766e;
    border-color: #0f766e;
}

.variance-filter-chip.favorability-favorable.is-active {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.variance-filter-chip.favorability-unfavorable.is-active {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.variance-filter-chip.favorability-neutral.is-active {
    background: #64748b;
    border-color: #64748b;
    color: #ffffff;
}

.variance-filter-spacer {
    flex: 1 1 auto;
}

.variance-expand-toggle {
    font-size: 12.5px;
    font-weight: 600;
    color: #2563eb;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px 6px;
}

.variance-expand-toggle:hover {
    text-decoration: underline;
}

.variance-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.variance-item {
    border: 1px solid #e2e8f0;
    border-left: 3px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}

/*
 * US4/FR-013: the variance card now colors by FAVORABILITY, sharing the US1 .favorability-*
 * palette (favorable #15803d green / unfavorable #b91c1c red / neutral #64748b grey) instead of
 * the old sign-based teal (#0f766e, which colored both +/- the same). The razor emits
 * .favorability-{value} on the line-item elements; the ▲/▼ glyph + bar width stay factual.
 */
.variance-item.favorability-favorable {
    border-left-color: #15803d;
}

.variance-item.favorability-unfavorable {
    border-left-color: #b91c1c;
}

.variance-item.favorability-neutral {
    border-left-color: #64748b;
}

.variance-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.09), 0 4px 16px rgba(0,0,0,0.07);
}

.variance-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    user-select: none;
}

.variance-item.is-collapsed {
    padding: 8px 14px;
}

.variance-item.is-collapsed .variance-item-head {
    margin-bottom: 0;
}

.variance-expand-chevron {
    color: #94a3b8;
    font-size: 11px;
    width: 12px;
    flex: 0 0 auto;
    transition: color 0.15s ease;
}

.variance-item-head:hover .variance-expand-chevron {
    color: #475569;
}

.variance-line-item {
    font-weight: 600;
    color: #1e293b;
}

.variance-category-badge {
    background: #e0e7ff;
    color: #3730a3;
}

.variance-net-impact {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    text-transform: none;
    letter-spacing: 0;
}

/* Net-impact text hue follows favorability (shares the US1 palette). */
.variance-net-impact.favorability-favorable {
    color: #15803d;
}

.variance-net-impact.favorability-unfavorable {
    color: #b91c1c;
}

.variance-net-impact.favorability-neutral {
    color: #64748b;
}

.variance-bar-track {
    width: 100%;
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    margin: 6px 0 8px;
    overflow: hidden;
}

.variance-bar-fill {
    height: 4px;
    border-radius: 2px;
    background: #94a3b8;
    transition: width 0.3s ease;
}

/* Bar-fill hue follows favorability; width stays factual (set inline from absolute NetImpact). */
.variance-bar-fill.favorability-favorable {
    background: #15803d;
}

.variance-bar-fill.favorability-unfavorable {
    background: #b91c1c;
}

.variance-bar-fill.favorability-neutral {
    background: #64748b;
}

.variance-baseline-value {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.variance-baseline-pill {
    display: inline-block;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
}

.variance-net-impact-pct {
    font-size: 13px;
    font-weight: 600;
    margin-left: 6px;
}

/* Net-impact percent hue follows favorability. */
.variance-net-impact-pct.favorability-favorable {
    color: #15803d;
}

.variance-net-impact-pct.favorability-unfavorable {
    color: #b91c1c;
}

.variance-net-impact-pct.favorability-neutral {
    color: #64748b;
}

.variance-contributions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.variance-contribution {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.variance-contribution-report {
    font-weight: 600;
    color: #475569;
}

.variance-contribution-delta {
    font-weight: 600;
    color: #1e293b;
}

.variance-contribution-delta.is-positive,
.variance-contribution-pct.is-positive,
.variance-contribution-delta.is-negative,
.variance-contribution-pct.is-negative {
    color: #0f766e;
}

.variance-contribution-pct {
    color: #64748b;
}

.variance-contribution-driver {
    color: #475569;
}

.variance-narrative {
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
    background: #eef2ff;
    border-left: 3px solid #c7d2fe;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 8px;
}

.variance-top-drivers {
    margin-top: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.variance-top-drivers-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    margin-bottom: 10px;
}

.variance-top-drivers ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variance-top-drivers li {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.55;
}

.variance-driver-arrow.is-positive,
.variance-driver-arrow.is-negative {
    color: #0f766e;
    font-weight: 600;
}

/* --- Variance Waterfall Chart --- */

.variance-waterfall-chart {
    margin: 8px 0 4px;
    border-radius: 6px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 0 0;
}

.variance-waterfall-title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    padding: 0 8px;
}

/* Keep series labels legible at small font size */
.variance-waterfall-chart .k-chart-series-labels {
    font-size: 10px;
}

/* --- Variance Item Two-Column Body --- */

.variance-item-body {
    display: grid;
    grid-template-columns: minmax(260px, 42%) 1fr;
    gap: 20px;
    align-items: stretch;
    margin-top: 4px;
}

.variance-item-diagram {
    min-width: 0;
    display: flex;
}

.variance-item-detail {
    min-width: 0;
}

@media (max-width: 760px) {
    .variance-item-body {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --- Variance Trend Sparkline (zero-centered) --- */

.variance-sparkline {
    margin: 0 0 4px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 8px 6px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.variance-sparkline-columns {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 auto;
}

.variance-sparkline-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* Track is split into two equal halves by a center (zero) line.
   Positive bars grow up from the center; negative bars grow down. */
.variance-sparkline-track {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 96px;
    display: flex;
    flex-direction: column;
}

.variance-sparkline-track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed #cbd5e1;
    pointer-events: none;
}

.variance-sparkline-half {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    width: 100%;
}

.variance-sparkline-half.is-top {
    align-items: flex-end;
}

.variance-sparkline-half.is-bottom {
    align-items: flex-start;
}

.variance-sparkline-bar {
    width: 70%;
    max-width: 30px;
    transition: opacity 0.15s ease;
    min-height: 2px;
}

.variance-sparkline-half.is-top .variance-sparkline-bar {
    border-radius: 3px 3px 0 0;
}

.variance-sparkline-half.is-bottom .variance-sparkline-bar {
    border-radius: 0 0 3px 3px;
}

/* Sparkline bar hue follows the line item's favorability; up/down position stays factual. */
.variance-sparkline-bar.favorability-favorable {
    background: #15803d;
}

.variance-sparkline-bar.favorability-unfavorable {
    background: #b91c1c;
}

.variance-sparkline-bar.favorability-neutral {
    background: #64748b;
}

.variance-sparkline-bar:hover {
    opacity: 0.75;
}

/* Neutral marker straddling the center line for the baseline column */
.variance-sparkline-baseline-marker {
    width: 70%;
    max-width: 30px;
    height: 5px;
    margin-top: -2.5px;
    background: #94a3b8;
    border-radius: 2px;
}

.variance-sparkline-label {
    font-size: 10px;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 4px;
    line-height: 1.3;
}

.variance-sparkline-pct {
    font-size: 9px;
    color: #94a3b8;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

/* Sparkline percent-label hue follows favorability. */
.variance-sparkline-pct.favorability-favorable {
    color: #15803d;
}

.variance-sparkline-pct.favorability-unfavorable {
    color: #b91c1c;
}

.variance-sparkline-pct.favorability-neutral {
    color: #64748b;
}

/* --- Variance Trend Chart (Telerik combo: column movement + smooth cumulative line) --- */

.variance-trend-chart {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    min-height: 200px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px;
    box-sizing: border-box;
}

.variance-trend-chart .k-chart {
    flex: 1 1 auto;
    width: 100%;
    min-height: 192px;
}

/* --- Variance Waterfall Chart (CSS step chart) --- */

.variance-waterfall-columns {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 90px;
}

.variance-waterfall-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.variance-waterfall-track {
    flex: 1 1 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2px;
}

.variance-waterfall-spacer {
    flex-shrink: 0;
}

.variance-waterfall-bar {
    width: 70%;
    border-radius: 2px;
    transition: opacity 0.15s ease;
}

/* Waterfall step hue follows the line item's favorability (shares the US1 palette);
   step position/height stay factual. Baseline/neutral greys are left intact. */
.variance-waterfall-bar.favorability-favorable {
    background: #15803d;
}

.variance-waterfall-bar.favorability-unfavorable {
    background: #b91c1c;
}

.variance-waterfall-bar.favorability-neutral {
    background: #64748b;
}

.variance-waterfall-bar.is-baseline {
    background: #94a3b8;
    border-radius: 2px;
    align-self: flex-end;
}

.variance-waterfall-bar.is-neutral {
    background: #94a3b8;
}

.variance-waterfall-col:hover .variance-waterfall-bar {
    opacity: 0.75;
}

.variance-waterfall-label {
    font-size: 10px;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 3px;
    line-height: 1.3;
}

.variance-waterfall-pct {
    font-size: 9px;
    color: #94a3b8;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

/* --- Narrative Correlation --- */

/* Executive summary callout box */
.correlation-executive-summary {
    margin-bottom: 20px;
}

.correlation-executive-summary .summary-content ul {
    margin: 0;
    padding-left: 1.25rem;
}

.correlation-executive-summary .summary-content li {
    margin-bottom: 0.4rem;
}

.correlation-executive-summary .summary-content li:last-child {
    margin-bottom: 0;
}

.correlation-executive-summary .summary-content p {
    margin: 0 0 0.5rem;
}

.correlation-executive-summary .summary-content p:last-child {
    margin-bottom: 0;
}

/* Chain cards list */
.correlation-chains {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual chain card */
.correlation-chain-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.correlation-chain-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.09), 0 4px 16px rgba(0,0,0,0.07);
}

.correlation-chain-card.expanded {
    box-shadow: 0 2px 8px rgba(0,0,0,0.09), 0 4px 16px rgba(0,0,0,0.07);
}

/* Chain card header row */
.correlation-chain-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

.correlation-chain-card.expanded .correlation-chain-card-header {
    border-bottom-color: #e2e8f0;
    background: #f1f5f9;
}

.correlation-chain-card-header:hover {
    background: #f1f5f9;
}

.correlation-chain-card-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.correlation-chain-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.correlation-chain-description {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.correlation-chain-card-header-right {
    flex-shrink: 0;
    color: #94a3b8;
    margin-top: 2px;
}

.correlation-chain-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
}

/* Strength badges */
.correlation-strength-badge.strength-strong {
    background: #c7d2fe;
    color: #312e81;
    border: 1px solid #a5b4fc;
}
.correlation-strength-badge.strength-moderate {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}
.correlation-strength-badge.strength-weak {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Chain card body */
.correlation-chain-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

/* Signals — side-by-side panels */
.correlation-signals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.correlation-signal-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
}

.correlation-signal-leading {
    border-left-color: #2563eb;
}

.correlation-signal-coincident {
    border-left-color: #7e22ce;
}

.correlation-signal-lagging {
    border-left-color: #c2410c;
}

.correlation-signal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Role badges */
.correlation-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: capitalize;
    white-space: nowrap;
}

.correlation-role-leading {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.correlation-role-coincident {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.correlation-role-lagging {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

/* Fallback for any other role value */
.correlation-role-badge:not(.correlation-role-leading):not(.correlation-role-coincident):not(.correlation-role-lagging) {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.correlation-signal-report-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
}

.correlation-signal-observation {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
}

/* Sub-sections: Interpretation, Caveats, Recommended Action */
.correlation-subsection {
    border-radius: 6px;
    padding: 10px 12px;
}

.correlation-subsection-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.correlation-subsection-body {
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.correlation-subsection-body p {
    margin: 0 0 4px;
}

.correlation-subsection-body p:last-child {
    margin-bottom: 0;
}

/* Interpretation — neutral tint */
.correlation-interpretation {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.correlation-interpretation .correlation-subsection-label {
    color: #475569;
}

/* Caveats — muted gray, de-emphasized */
.correlation-caveats {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.correlation-caveats .correlation-subsection-label {
    color: #94a3b8;
}

.correlation-caveats .correlation-subsection-body {
    color: #64748b;
    font-size: 12px;
}

/* Recommended Action — green, emphasized as the key takeaway */
.correlation-recommended-action {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    padding: 14px 16px;
}

.correlation-recommended-action .correlation-subsection-label {
    color: #15803d;
    font-size: 12px;
}

.correlation-recommended-action .correlation-subsection-body {
    color: #14532d;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

/* ===== User Intake Welcome (User Story 1) ===== */
.welcome-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 16px;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

/* The global `.chat-container .chat-messages { min-height: 100% }` forces the
   message content taller than its scroller (with padding), producing a spurious
   scrollbar on the near-empty welcome chat. Override it just here. */
.welcome-page .chat-container .chat-messages {
    min-height: 0;
}

.welcome-page-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.welcome-page-chat .chat-container {
    flex: 1 1 auto;
    min-height: 0;
}

.welcome-page-review {
    flex: 0 0 auto;
    max-height: 50vh;
    overflow-y: auto;
}

.welcome-page-confirmation {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #14532d;
    font-weight: 600;
    text-align: center;
}

.welcome-page-nav {
    flex: 0 0 auto;
    display: flex;
}

.welcome-back-home {
    appearance: none;
    background: transparent;
    border: none;
    padding: 6px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.welcome-back-home:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.welcome-page-skip {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 4px 0 8px;
}

.welcome-skip-now,
.welcome-skip-forever {
    appearance: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* "Skip for now" — secondary/ghost button */
.welcome-skip-now {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.welcome-skip-now:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* "Don't remind me again" — quieter, text-style tertiary */
.welcome-skip-forever {
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
}

.welcome-skip-forever:hover {
    color: #334155;
    background: #f1f5f9;
}

/* Company-website crawl step (Phase 3b) — card matching the review panel */
.welcome-page-website {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.welcome-website-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #334155;
}

.welcome-website-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.welcome-website-url {
    flex: 1 1 240px;
    min-width: 0;
    padding: 9px 12px;
    font-size: 14px;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.welcome-website-url:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

.welcome-website-url:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.welcome-website-approve,
.welcome-website-skip {
    appearance: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* "Approve" — primary/brand button */
.welcome-website-approve {
    background: var(--color-primary);
    border: 1px solid var(--color-primary-dark);
    color: #ffffff;
}

.welcome-website-approve:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.welcome-website-approve:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* "Skip" — secondary/ghost button */
.welcome-website-skip {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.welcome-website-skip:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
}

.welcome-website-skip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.welcome-website-error {
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
}

.intake-review-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.intake-review-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}

.intake-review-subtitle {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13px;
}

.intake-review-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.intake-review-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.intake-review-card.is-rejected {
    opacity: 0.5;
    border-style: dashed;
}

.intake-review-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.intake-chip {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}

.intake-chip-kind { background: #e0e7ff; color: #3730a3; }
.intake-chip-scope { background: #dcfce7; color: #166534; }
.intake-chip-category { background: #fef9c3; color: #854d0e; }

.intake-content {
    font-size: 14px;
    line-height: 1.5;
    color: #1e293b;
    white-space: pre-wrap;
}

.intake-rationale {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

.intake-edit-textarea {
    width: 100%;
}

.intake-review-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.intake-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.intake-review-count {
    font-size: 13px;
    color: #64748b;
}

.intake-review-empty {
    color: #94a3b8;
    font-size: 14px;
}
/* =====================================================================
   Time-Series (single report, multiple periods) — DashboardTimeSeries
   ===================================================================== */
.dashboard-time-series {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

.dashboard-time-series .time-series-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.time-series-periods-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.time-series-periods-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.time-series-period-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 13px;
    color: #334155;
}

.time-series-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-series-metric {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    background: #f8fafc;
}

.time-series-metric-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.time-series-metric-name {
    font-weight: 600;
    color: #0f172a;
}

.time-series-category-badge {
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
}

.time-series-trend-direction {
    font-weight: 600;
    font-size: 13px;
    text-transform: capitalize;
}

/*
 * Shared favorability color classes (US1 Time Series; reused by US4/Variance later).
 * Color now comes from FAVORABILITY, not raw trend direction — the ▼/▲ glyph stays factual.
 * Reuses the existing time-series green/red/grey palette.
 */
.favorability-favorable { color: #15803d; }   /* green */
.favorability-unfavorable { color: #b91c1c; } /* red */
.favorability-neutral { color: #64748b; }     /* grey — also the null/old-cached fallback */

/* Color-independent reason chip (FR-014): perceivable without hue via text + retained glyph. */
.favorability-chip {
    font-size: .7rem;
    padding: .1rem .4rem;
    border-radius: .5rem;
    border: 1px solid currentColor;
    white-space: nowrap;
}

/* Subtle per-variant background tints; border/text color inherit from .favorability-* on the same span. */
.favorability-chip-favorable { color: #15803d; background: rgba(21, 128, 61, 0.08); }
.favorability-chip-unfavorable { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
.favorability-chip-neutral { color: #64748b; background: rgba(100, 116, 139, 0.08); }

/*
 * Legacy raw-direction text classes repurposed to neutral. The Time Series card now applies
 * the .favorability-* classes above (the razor emits favorability-{value}); these are kept
 * neutral so any stale markup no longer hard-codes color by raw direction.
 */
.time-series-trend-up { color: #64748b; }
.time-series-trend-down { color: #64748b; }
.time-series-trend-flat { color: #64748b; }

.time-series-trend-shape {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

.time-series-trend-magnitude {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.time-series-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.time-series-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    border-radius: 8px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.time-series-point.is-gap {
    background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #eef2f6 4px, #eef2f6 8px);
    border-style: dashed;
    color: #94a3b8;
}

.time-series-point-period {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
}

.time-series-point-value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.time-series-point-gap {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

/* Sparkline: inline SVG trajectory with flanking endpoint labels */
.time-series-sparkline-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-series-spark-endpoint {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    flex-shrink: 0;
}

.time-series-spark-endpoint-start {
    text-align: right;
}

.time-series-sparkline {
    flex: 1 1 auto;
    width: 100%;
    max-width: 320px;
    height: 48px;
    overflow: visible;
}

.time-series-spark-line {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.time-series-spark-dot {
    stroke: #ffffff;
    stroke-width: 1;
}

/*
 * Sparkline line + dot color now follows FAVORABILITY (shared .favorability-* classes; reused
 * by US4/Variance later), not the raw trend direction. Null/old-cached metrics resolve to
 * .favorability-neutral (grey). The ▼/▲ glyph remains factual and is unaffected by hue.
 */
.time-series-sparkline.favorability-favorable .time-series-spark-line { stroke: #15803d; }
.time-series-sparkline.favorability-favorable .time-series-spark-dot { fill: #15803d; }
.time-series-sparkline.favorability-unfavorable .time-series-spark-line { stroke: #b91c1c; }
.time-series-sparkline.favorability-unfavorable .time-series-spark-dot { fill: #b91c1c; }
.time-series-sparkline.favorability-neutral .time-series-spark-line { stroke: #64748b; }
.time-series-sparkline.favorability-neutral .time-series-spark-dot { fill: #64748b; }

/* Legacy raw-direction sparkline variants repurposed to neutral grey (no longer hue-by-direction). */
.time-series-sparkline.time-series-trend-up .time-series-spark-line,
.time-series-sparkline.time-series-trend-down .time-series-spark-line,
.time-series-sparkline.time-series-trend-flat .time-series-spark-line { stroke: #64748b; }
.time-series-sparkline.time-series-trend-up .time-series-spark-dot,
.time-series-sparkline.time-series-trend-down .time-series-spark-dot,
.time-series-sparkline.time-series-trend-flat .time-series-spark-dot { fill: #64748b; }

/* Gap markers: hollow, dashed — never connected across */
.time-series-spark-gap {
    fill: #ffffff;
    stroke: #94a3b8;
    stroke-width: 1.5;
    stroke-dasharray: 2 2;
}

/* Compact period-axis ticks under the sparkline */
.time-series-spark-axis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
}

.time-series-spark-tick {
    font-size: 11px;
    color: #64748b;
}

.time-series-spark-tick.is-gap {
    color: #94a3b8;
    font-style: italic;
}

.time-series-gap-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.time-series-gap-note-text {
    font-style: italic;
}

.time-series-narrative {
    margin-top: 10px;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}

.time-series-top-trends {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.time-series-top-trends-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.time-series-top-trends ul {
    margin: 8px 0 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.time-series-top-trends li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.time-series-top-trend-why {
    color: #475569;
    font-size: 14px;
}

.time-series-notes {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    color: #92400e;
    font-size: 14px;
}

.time-series-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px;
    color: #64748b;
    text-align: center;
}

/* =====================================================================================
   Dashboard Forecast (type-1 deterministic forecast; issue #548). Mirrors the time-series
   card styling. Honesty/uncertainty guards (insufficient history, stable, low confidence,
   gap caveat) are surfaced as visible badges/notes (US2).
   ===================================================================================== */
.dashboard-forecast {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

.dashboard-forecast .forecast-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-forecast .forecast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.forecast-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.forecast-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.forecast-summary-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forecast-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.forecast-periods-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.forecast-periods-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forecast-period-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 13px;
    color: #334155;
}

.forecast-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forecast-metric {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    background: #f8fafc;
}

.forecast-metric-insufficient {
    border-style: dashed;
    background: #fffbeb;
}

.forecast-metric-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.forecast-metric-name {
    font-weight: 600;
    color: #0f172a;
}

.forecast-category-badge {
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
}

.forecast-method-badge {
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.forecast-confidence-badge {
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.forecast-confidence-high { background: #dcfce7; color: #15803d; }
.forecast-confidence-medium { background: #fef9c3; color: #854d0e; }
.forecast-confidence-low { background: #fee2e2; color: #b91c1c; }

.forecast-params {
    font-size: 12px;
    color: #64748b;
}

.forecast-series {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forecast-historical,
.forecast-projected {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.forecast-series-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forecast-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forecast-historical-point,
.forecast-projected-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
    border-radius: 8px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.forecast-projected-point {
    border-style: dashed;
    border-color: #93c5fd;
    background: #eff6ff;
}

.forecast-point-period {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
}

.forecast-point-value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.forecast-projected-band {
    font-size: 11px;
    color: #2563eb;
    margin-top: 2px;
    white-space: nowrap;
}

.forecast-insufficient {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
}

.forecast-metric-note {
    margin-top: 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    font-style: italic;
}

.forecast-top-movers {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.forecast-top-movers-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forecast-top-movers ul {
    margin: 8px 0 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forecast-top-mover {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.forecast-mover-up { color: #15803d; }
.forecast-mover-down { color: #b91c1c; }
.forecast-mover-flat { color: #64748b; }

.forecast-mover-magnitude {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.forecast-mover-why {
    color: #475569;
    font-size: 14px;
}

.forecast-notes {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    color: #92400e;
    font-size: 14px;
}

.forecast-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px;
    color: #64748b;
    text-align: center;
}

/* ── Chat-Feedback Grounding admin page ──────────────────────────────────── */
.chat-grounding-help {
    margin: 12px 0;
    color: #64748b;
}

.chat-grounding-preview-panel {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.chat-grounding-preview-help {
    margin: 4px 0 12px;
    color: #64748b;
}

.chat-grounding-preview-result {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-grounding-preview-label {
    font-weight: 600;
    margin-right: 6px;
}

.chat-grounding-disabled-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #94a3b8;
    cursor: not-allowed;
}

.chat-grounding-field-hint {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
}

/* Status-badge color modifiers used by the chat-grounding admin grids
   (green success / red error, matching the existing pill badge look). */
.status-badge.success {
    background: #dcfce7;
    color: #166534;
}

.status-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

/* Evaluations (processed-signal results) section */
.chat-grounding-evaluations-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.chat-grounding-action-result {
    margin-bottom: 12px;
    color: #334155;
    font-weight: 500;
}

.chat-grounding-toolbar-hint {
    margin: 4px 0 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #64748b;
    max-width: 900px;
}

.chat-grounding-signal-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px;
}

.chat-grounding-detail-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-grounding-delta-list {
    margin: 4px 0 0;
    padding-left: 18px;
}

.chat-grounding-delta-list li {
    color: #334155;
    margin-bottom: 4px;
}

/* Moved-bullet content snippet (full text on hover via the li title attribute). */
.eval-bullet-content {
    white-space: normal;
    overflow-wrap: anywhere;
}

.eval-bullet-content-missing {
    color: #94a3b8;
    font-style: italic;
}

/* Secondary, muted human-readable bullet id rendered after the content snippet. */
.eval-bullet-id {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.78em;
}

/* ── Moved-bullet assessment color cues (Evaluations page) ────────────────── */
/* Each moved-bullet line gets a left-border accent + a colored dot keyed to the
   reflector's assessment: helpful=green, harmful=red, neutral/other=muted gray. */
.eval-assessment-list {
    list-style: none;
    padding-left: 0;
}

.eval-assessment-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 8px;
    border-left: 3px solid #cbd5e1;
    border-radius: 3px;
    margin-bottom: 6px;
    background: #f8fafc;
}

.eval-assessment-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    align-self: center;
}

.eval-assessment-helpful {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.eval-assessment-helpful .eval-assessment-dot {
    background: #16a34a;
}

.eval-assessment-harmful {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.eval-assessment-harmful .eval-assessment-dot {
    background: #dc2626;
}

.eval-assessment-neutral {
    border-left-color: #cbd5e1;
    background: #f8fafc;
}

.eval-assessment-neutral .eval-assessment-dot {
    background: #94a3b8;
}

/* ── Scoring dry-run collapsible toggle (policy page) ─────────────────────── */
.chat-grounding-dryrun-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
}

.chat-grounding-dryrun-toggle:hover {
    color: #0f172a;
}

/* ── Conversation drill-in thread (Evaluations dialog) ───────────────────── */
/* Readable bubbles — generous sizing so a non-technical auditor can actually read it. */
.eval-conversation-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 6px 4px;
}

.eval-msg {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    background: #ffffff;
    max-width: 92%;
}

.eval-msg-user {
    background: #f1f5f9;
    border-color: #e2e8f0;
    align-self: flex-start;
}

.eval-msg-assistant {
    background: #ffffff;
    border-color: #dbeafe;
    align-self: flex-end;
}

/* The exact turn the signal came from — highlighted so the admin spots it instantly. */
.eval-msg-signal {
    border-left: 5px solid #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #bfdbfe inset;
}

.eval-msg-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.eval-msg-role {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9rem;
}

.eval-msg-time {
    color: #94a3b8;
    font-size: 0.78rem;
}

/* Banner above the signal turn's content making the "this is the answer" point unmissable. */
.eval-msg-signal-banner {
    font-weight: 700;
    color: #1d4ed8;
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.eval-msg-content {
    color: #1e293b;
    font-size: 0.97rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Raw-mode view: monospace source text so the auditor sees the literal stored content. */
.eval-msg-content-raw {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.85rem;
    color: var(--text-secondary, #444);
}

/* Toolbar above the conversation thread housing the Formatted/Raw toggle. */
.eval-conversation-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px 8px;
}

/* ── Plain-English explainer + legend (always visible, top of page) ───────── */
.eval-explainer {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 0.85rem;
}

.eval-explainer-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.eval-explainer-lead {
    margin: 0 0 10px;
    color: #334155;
    line-height: 1.5;
}

.eval-legend {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
}

.eval-legend dt {
    font-weight: 700;
    color: #0f172a;
}

.eval-legend dd {
    margin: 0;
    color: #475569;
    line-height: 1.45;
}

.eval-legend-up {
    color: #166534;
    font-weight: 600;
}

.eval-legend-down {
    color: #991b1b;
    font-weight: 600;
}

/* ── Feedback column badge (Source + Polarity, plain English) ─────────────── */
.eval-feedback-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.eval-feedback-badge.positive {
    background: #dcfce7;
    color: #166534;
}

.eval-feedback-badge.negative {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Outcome column badge (plain-English lifecycle) ───────────────────────── */
.eval-outcome-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.eval-outcome-badge.success {
    background: #dcfce7;
    color: #166534;
}

.eval-outcome-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.eval-outcome-badge.neutral {
    background: #e2e8f0;
    color: #475569;
}

/* ── Answer cell + per-row plain-English narration ────────────────────────── */
.eval-answer-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eval-answer-snippet {
    color: #1e293b;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eval-narration {
    color: #475569;
    line-height: 1.45;
}

.eval-narration-subtitle {
    font-size: 0.8rem;
    color: #64748b;
}

.eval-narration-detail {
    font-size: 0.92rem;
    font-weight: 500;
    color: #0f172a;
    margin: 0 0 6px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-radius: 6px;
}

/* Plain-English verdict prefix on each moved-bullet line. */
.eval-assessment-verdict {
    font-weight: 700;
}

.eval-assessment-helpful .eval-assessment-verdict {
    color: #166534;
}

.eval-assessment-harmful .eval-assessment-verdict {
    color: #991b1b;
}

.eval-assessment-neutral .eval-assessment-verdict {
    color: #64748b;
}

.eval-no-deltas {
    color: #64748b;
    font-style: italic;
}

/* =====================================================================
   Import Data — detect-first import UI (US1/MVP)
   ===================================================================== */

/* ── Page chrome ─────────────────────────────────────────── */
.import-page {
    /* Page chrome (padding, page-head, title, subtitle) now inherited from .profile-page
       so this page matches the standard frontend layout (e.g. Memories). */
}

/* ── ImportStagingTray ────────────────────────────────────── */
.import-staging-tray {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.import-drop-zone-wrapper {
    position: relative;
}

.import-drag-over .k-upload-dropzone {
    border-color: var(--kendo-color-primary, #ff6358) !important;
    background-color: var(--kendo-color-primary-subtle, #fff0ef) !important;
}

.import-file-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.import-staging-error {
    color: #dc2626;
    font-size: 13px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

/* ── ImportFileRow ────────────────────────────────────────── */
.import-file-row {
    padding: 14px 16px;
    border: 1px solid var(--kendo-color-border, #ced4da);
    border-radius: 6px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s;
}

.import-file-row--ready {
    border-left: 3px solid #16a34a;
}

.import-file-row--needs-review {
    border-left: 3px solid #d97706;
}

.import-file-row--read-error {
    border-left: 3px solid #dc2626;
}

.import-file-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-color-text-primary);
}

.import-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

.import-file-relative-path {
    font-size: 12px;
    font-weight: 400;
    color: var(--pp-color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.import-file-row-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-status-text {
    font-size: 13px;
    color: var(--pp-color-text-secondary);
}

.import-status-detail {
    font-size: 12px;
    color: #dc2626;
}

/* ── Ready-state badges ───────────────────────────────────── */
.import-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.import-badge--ready {
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}

.import-badge--needs-review {
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #fcd34d;
}

.import-badge--read-error {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

/* Neutral "Pending" — still processing, no reason token yet (silent-blank guard) */
.import-badge--pending {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Clickable "Needs review" badge — opens the resolve/edit dialog */
.library-badge-action {
    cursor: pointer;
    font-family: inherit;
    line-height: 1.6;
}

.library-badge-action:hover {
    filter: brightness(0.97);
    box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.45);
}

.library-badge-action:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 1px;
}

/* "What needs fixing" panel in the edit dialog */
.library-edit-reasons {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.library-edit-reasons strong {
    display: block;
    margin-bottom: 6px;
}

.library-edit-reasons ul {
    margin: 0;
    padding-left: 18px;
}

.library-edit-reasons li {
    margin: 2px 0;
}

/* ── Detection dimensions ─────────────────────────────────── */
.import-file-row-detection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--kendo-color-border, #ced4da);
}

.import-detection-dimension {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.import-detection-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pp-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 55px;
}

.import-detection-value {
    font-size: 13px;
    color: var(--pp-color-text-primary);
}

.import-detection-unknown {
    font-size: 12px;
    color: #dc2626;
    font-style: italic;
}

.import-correction-dropdown {
    margin-left: auto;
}

/* Two-level type→definition correction group */
.import-correction-type-group {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* A single labelled correction control (caption above the dropdown). */
.import-correction-field {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.import-correction-field-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pp-color-text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* One-line "what to do" helper shown on a file that needs review. */
.import-correction-hint {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--pp-color-text-secondary, #6c757d);
}

.import-correction-hint strong {
    color: var(--pp-color-text-primary, #212529);
    font-weight: 600;
}

/* Inline "Create new definition" panel */
.import-inline-create-panel {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--kendo-color-base-subtle, #f8f9fa);
    border: 1px solid var(--kendo-color-border, #ced4da);
    border-radius: 4px;
    width: 100%;
}

.import-inline-create-hint {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle, #6c757d);
}

.import-inline-create-error {
    font-size: 12px;
    color: #dc2626;
}

/* ── ConfidenceDots ────────────────────────────────────────── */
.import-confidence-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}

/* Dots share a base size; color varies by band */
.import-confidence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Green band: all three dots filled */
.import-confidence-dots--green .import-confidence-dot {
    background: #16a34a;
}

/* Amber band: first two filled, third muted */
.import-confidence-dots--amber .import-confidence-dot--1,
.import-confidence-dots--amber .import-confidence-dot--2 {
    background: #d97706;
}

.import-confidence-dots--amber .import-confidence-dot--3 {
    background: #e5e7eb;
}

/* Red band: only first filled */
.import-confidence-dots--red .import-confidence-dot--1 {
    background: #dc2626;
}

.import-confidence-dots--red .import-confidence-dot--2,
.import-confidence-dots--red .import-confidence-dot--3 {
    background: #e5e7eb;
}

/* Color-independent shape glyph */
.import-confidence-shape {
    font-size: 10px;
    margin-left: 2px;
    line-height: 1;
}

.import-confidence-dots--green .import-confidence-shape { color: #16a34a; }
.import-confidence-dots--amber .import-confidence-shape { color: #d97706; }
.import-confidence-dots--red   .import-confidence-shape { color: #dc2626; }

/* ── DetectionWhyPopover ───────────────────────────────────── */
.import-why-popover {
    display: inline-flex;
    align-items: center;
}

.import-why-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--kendo-color-primary, #ff6358);
    list-style: none;
    padding: 2px 6px;
    border-radius: 4px;
}

.import-why-trigger::-webkit-details-marker { display: none; }

.import-why-trigger:hover {
    background: var(--kendo-color-primary-subtle, #fff0ef);
}

.import-why-label {
    font-weight: 600;
}

.import-why-content {
    position: absolute;
    z-index: 1000;
    background: #1e293b;
    color: #f8fafc;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    margin-top: 4px;
}

.import-why-kind {
    font-weight: 700;
    text-transform: capitalize;
}

.import-why-detail {
    font-weight: 400;
    line-height: 1.4;
}

/* ── Readiness reasons ────────────────────────────────────── */
.import-readiness-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--kendo-color-border, #ced4da);
}

.import-readiness-reason-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #78350f;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 2px 10px;
}

/* ── CalendarCoverageEmptyState ───────────────────────────── */
.import-calendar-empty-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 13px;
    color: #1e40af;
}

.import-calendar-empty-message {
    flex: 1;
}

.import-calendar-empty-cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--kendo-color-primary, #ff6358);
    text-decoration: none;
    white-space: nowrap;
}

.import-calendar-empty-cta:hover {
    text-decoration: underline;
}

/* ── File-row remove affordance ──────────────────────────── */
.import-file-remove {
    margin-left: auto;
    color: var(--kendo-color-on-base, #424242);
    opacity: 0.6;
}

.import-file-remove:hover {
    opacity: 1;
    color: #dc2626;
}

.import-skip-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: var(--kendo-color-on-base, #424242);
}

/* ── Import settings loading ──────────────────────────────────────────────── */

.import-settings-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    color: var(--pp-color-text-secondary);
    font-size: 14px;
}

/* ── MultiEntityPrompt + Resume/discard import prompt (#729) ─────────────────
   The resume/discard prompt shares its card/icon/title/actions/button layout with
   MultiEntityPrompt via combined selectors below; only genuinely distinct rules
   (.import-multi-entity-hint/-error, .import-resume-prompt-body's tighter margin — this
   prompt has no separate hint line) stay in their own single-selector rule. ── */

.import-multi-entity-error {
    color: #dc2626;
    font-size: 13px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    margin-bottom: 16px;
}

.import-multi-entity-hint {
    font-size: 13px;
    color: var(--pp-color-text-secondary, #6b7280);
    margin: 0 0 24px;
}

.import-multi-entity-body {
    font-size: 15px;
    color: var(--pp-color-text-secondary, #374151);
    line-height: 1.55;
    margin: 0 0 8px;
}

.import-multi-entity-prompt,
.import-resume-prompt {
    display: flex;
    justify-content: center;
    padding: 48px 24px;
}

.import-multi-entity-prompt-inner,
.import-resume-prompt-inner {
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.import-multi-entity-icon,
.import-resume-prompt-icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: var(--pp-color-primary, #0f62fe);
}

.import-multi-entity-title,
.import-resume-prompt-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--pp-color-text, #111827);
    margin: 0 0 12px;
}

.import-resume-prompt-body {
    font-size: 15px;
    color: var(--pp-color-text-secondary, #374151);
    line-height: 1.55;
    margin: 0 0 24px;
}

.import-multi-entity-actions,
.import-resume-prompt-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.import-multi-entity-btn,
.import-resume-prompt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.import-multi-entity-btn--yes,
.import-resume-prompt-btn--continue {
    background: var(--pp-color-primary, #0f62fe);
    color: #fff;
    border-color: var(--pp-color-primary, #0f62fe);
}

.import-multi-entity-btn--yes:hover:not(:disabled),
.import-resume-prompt-btn--continue:hover:not(:disabled) {
    background: #0353e9;
    border-color: #0353e9;
}

.import-multi-entity-btn--no,
.import-resume-prompt-btn--start-new {
    background: #fff;
    color: var(--pp-color-text, #111827);
    border-color: #d1d5db;
}

.import-multi-entity-btn--no:hover:not(:disabled),
.import-resume-prompt-btn--start-new:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
}

.import-multi-entity-btn:disabled,
.import-multi-entity-btn--loading,
.import-resume-prompt-btn:disabled,
.import-resume-prompt-btn--loading {
    opacity: 0.65;
    cursor: not-allowed;
}

/* -- Report Structure Review (US3 / T057) --------------------------------- */

.import-schema-review {
    margin-top: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.import-schema-review-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    color: #6b7280;
    font-size: 14px;
}

.import-schema-review-error {
    padding: 12px 24px;
    background: #fef2f2;
    color: #dc2626;
    border-left: 4px solid #dc2626;
    font-size: 14px;
    margin: 12px 24px;
    border-radius: 4px;
}

.import-schema-review-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 24px;
    font-size: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.import-schema-review-banner--newfingerprint {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}

.import-schema-review-banner--drift {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}

.import-schema-review-banner-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.import-schema-review-confidence-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 2px 8px;
}

.import-schema-drift-entries {
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fffbeb;
}

.import-schema-drift-title {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 8px;
}

.import-schema-drift-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.import-schema-drift-entry {
    font-size: 13px;
    color: #78350f;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.import-schema-drift-type {
    font-weight: 600;
}

.import-schema-drift-location {
    color: #92400e;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

.import-schema-drift-detail {
    color: #92400e;
}

.import-schema-review-stale-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #fffbeb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #92400e;
}

.import-schema-section {
    border-bottom: 1px solid #e5e7eb;
}

.import-schema-section--approved {
    background: #f0fdf4;
}

.import-schema-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.import-schema-section--approved .import-schema-section-header {
    background: #dcfce7;
}

.import-schema-section-label {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    flex: 1;
}

.import-schema-section-count {
    font-size: 12px;
    color: #9ca3af;
}

.import-schema-section-approved-badge {
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.import-schema-rows-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.import-schema-rows-table thead tr {
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}

.import-schema-rows-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.import-schema-rows-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}

.import-schema-row--total td {
    font-weight: 700;
    background: #f9fafb;
}

.import-schema-row--subtotal td {
    font-weight: 600;
}

.import-schema-col-code { width: 130px; }
.import-schema-col-label { min-width: 200px; }
.import-schema-col-type { width: 110px; }
.import-schema-col-strategy { width: 70px; }
.import-schema-col-confidence { width: 90px; }
.import-schema-col-provenance { width: 80px; }
.import-schema-col-actions { width: 160px; text-align: right; }

.import-schema-account-code {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    background: #f3f4f6;
    border-radius: 3px;
    padding: 1px 5px;
    color: #374151;
}

.import-schema-no-code { color: #d1d5db; }

.import-schema-label--total  { font-weight: 700; }
.import-schema-label--subtotal { font-weight: 600; }

.import-schema-match-strategy {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 3px;
    padding: 1px 6px;
}

.import-schema-row-type-badge {
    font-size: 11px;
    border-radius: 10px;
    padding: 2px 7px;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
}

.import-schema-row-type-badge--subtotal { background: #ede9fe; color: #5b21b6; }
.import-schema-row-type-badge--grand_total,
.import-schema-row-type-badge--total    { background: #dbeafe; color: #1d4ed8; }
.import-schema-row-type-badge--metric   { background: #fef9c3; color: #854d0e; }

.import-schema-provenance-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

.import-schema-provenance-chip--rule  { background: #f3f4f6; color: #6b7280; }
.import-schema-provenance-chip--telli { background: #ede9fe; color: #6d28d9; }
.import-schema-provenance-chip--user  { background: #d1fae5; color: #065f46; }

.import-schema-edit-input,
.import-schema-edit-select {
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.import-schema-edit-input:focus,
.import-schema-edit-select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 0;
    border-color: #3b82f6;
}

.import-schema-review-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    padding: 14px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.import-schema-review-approving {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

.import-schema-review-footer-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
}

.import-schema-review-override-count {
    font-size: 12px;
    font-weight: 600;
    color: #065f46;
    background: #d1fae5;
    border-radius: 10px;
    padding: 2px 8px;
}

.import-schema-review-fingerprint {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #9ca3af;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── File Library (US4) ─────────────────────────────────────────────────── */

.library-page {
    /* Page chrome (padding, page-head, title, subtitle) now inherited from .profile-page
       so this page matches the standard frontend layout (e.g. Memories). */
}

/* ── Success banner ─────────────────────────────────────────────────────── */

.library-success-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 20px;
    color: #065f46;
    font-size: 14px;
    font-weight: 500;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.library-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.library-search-wrap {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 340px;
}

.library-search-input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.library-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.library-archived-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Loading / error ────────────────────────────────────────────────────── */

.library-loading {
    display: flex;
    justify-content: center;
    padding: 48px;
}

.library-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 16px;
    color: #991b1b;
    font-size: 14px;
}

/* ── Grid container ─────────────────────────────────────────────────────── */

.library-grid-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.library-total-hint {
    font-size: 12px;
    color: #6b7280;
    text-align: right;
    margin-top: 8px;
}

/* ── Filename + version chip ────────────────────────────────────────────── */

.library-filename {
    font-weight: 500;
    color: #111827;
}

/* Report name cell: primary identifier; the original file name shows on hover (title). */
.library-reportname {
    font-weight: 500;
    color: #111827;
    cursor: help;
}

.library-version-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #e0e7ff;
    color: #3730a3;
    vertical-align: middle;
}

/* ── Lifecycle chips ────────────────────────────────────────────────────── */

.library-lifecycle-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.library-lifecycle-chip--staged {
    background: #fef3c7;
    color: #92400e;
}

.library-lifecycle-chip--committed {
    background: #d1fae5;
    color: #065f46;
}

.library-lifecycle-chip--archived {
    background: #f3f4f6;
    color: #6b7280;
}

/* ── Download link ──────────────────────────────────────────────────────── */

.library-download-link {
    display: inline-flex;
    align-items: center;
    color: #4f46e5;
    text-decoration: none;
}

.library-download-link:hover {
    color: #3730a3;
}

/* ── Detail window ──────────────────────────────────────────────────────── */

.library-detail-reasons {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #92400e;
}

.library-reason-list {
    margin: 6px 0 0 18px;
    padding: 0;
}

.library-reason-list li {
    margin-bottom: 4px;
}

/* ── Re-upload panel ────────────────────────────────────────────────────── */

.library-reupload-body {
    padding: 8px 0;
}

.library-reupload-body p {
    font-size: 14px;
    color: #374151;
    margin-bottom: 14px;
}

.library-reupload-input {
    display: block;
    margin-bottom: 12px;
}

.library-reupload-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #991b1b;
    margin-top: 8px;
}

.library-reupload-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    margin-top: 10px;
}

/* ── Archive confirm + Edit classification dialogs ──────────────────────── */

.library-confirm-body {
    padding: 8px 0;
}

.library-confirm-body p {
    font-size: 14px;
    color: #374151;
    margin: 0;
}

.library-edit-body {
    padding: 8px 0;
}

.library-edit-hint {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

.library-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.library-edit-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.library-edit-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #991b1b;
    margin-top: 8px;
}

.library-dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── File Library loading inline ─────────────────────────────────────── */
.library-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* ── Canonical Data Viewer ───────────────────────────────────────────── */
.cdv-schema-selector {
    margin-top: 8px;
}

.cdv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.cdv-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cdv-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.cdv-filter-checkbox {
    justify-content: flex-end;
}

.cdv-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* U3 Parse-Quality badge states — import readiness */
.parse-quality-rejected-badge {
    background-color: #f8d7da;
    color: #721c24;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

.parse-quality-warning-badge {
    background-color: #fff3cd;
    color: #856404;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

/* Schema Management surface parse-quality verdict */
.schema-parse-quality-rejected {
    background-color: #f8d7da;
    color: #721c24;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 8px;
    display: block;
}

.schema-parse-quality-warning {
    background-color: #fff3cd;
    color: #856404;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 8px;
    display: block;
}

/* ── U5 Decomposition Confirm Surface ───────────────────────────────────── */
.decomposition-confirm {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 24px;
    margin: 16px 0;
    max-width: 680px;
}

.decomposition-confirm__headline {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin-bottom: 16px;
}

.decomposition-confirm__outputs {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.decomposition-output-line {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color-subtle, #f0f0f0);
    color: var(--text-secondary, #555);
    font-size: 0.95rem;
}

.decomposition-output-line:last-child {
    border-bottom: none;
}

.decomposition-confidence-hint {
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.decomposition-confidence-hint--green {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.decomposition-confidence-hint--amber {
    background: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}

.decomposition-confirm__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.decomposition-confirm__loading {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-secondary, #555);
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   Import Wizard — Screen 1 (UploadScreen.razor)
   Global (not scoped): scoped CSS is unreliable in this project.
   ═══════════════════════════════════════════════════════════════ */
.upload-screen {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upload-screen-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload-screen-heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.upload-screen-instructions {
    margin: 0;
    color: var(--text-secondary, #555);
    font-size: 0.95rem;
}

.upload-screen-staged-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-screen-staged-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: var(--surface-bg, #fff);
}

.upload-screen-file-icon {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.upload-screen-file-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1a1a1a);
}

.upload-screen-file-chip {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.upload-screen-file-chip.chip-neutral {
    background: var(--chip-neutral-bg, #eef2f7);
    color: var(--chip-neutral-fg, #41506b);
}

.upload-screen-file-chip.chip-skip {
    background: var(--chip-skip-bg, #f5f0e6);
    color: var(--chip-skip-fg, #8a6d2f);
}

.upload-screen-remove-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary, #777);
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}

.upload-screen-remove-btn:hover {
    background: var(--hover-bg, #f0f0f0);
    color: var(--text-primary, #1a1a1a);
}

.upload-screen-size-hint {
    margin: 0;
    color: var(--text-secondary, #777);
    font-size: 0.85rem;
}

.upload-screen-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary, #555);
    font-size: 0.95rem;
}

.upload-screen-spinner-glyph {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #d0d0d0);
    border-top-color: var(--accent-color, #2b6cb0);
    border-radius: 50%;
    animation: upload-screen-spin 0.8s linear infinite;
}

@keyframes upload-screen-spin {
    to { transform: rotate(360deg); }
}

.upload-screen-actions {
    display: flex;
    justify-content: flex-end;
}

.upload-screen-primary-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    background: var(--accent-color, #2b6cb0);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.upload-screen-primary-btn:disabled {
    background: var(--disabled-bg, #c8d2dd);
    cursor: not-allowed;
}

.upload-screen-primary-btn:not(:disabled):hover {
    background: var(--accent-color-hover, #245a94);
}

/* DecompositionConfirmSurface D2 */
.decomp-grid-surface { display: flex; flex-direction: column; gap: 1rem; }
.decomp-shared-dims { background: #f8f9fa; border-radius: 4px; padding: 0.75rem 1rem; font-size: 0.875rem; }
.decomp-shared-dims__label { font-weight: 600; margin-right: 0.5rem; }
.decomp-ai-badge { display: inline-block; font-size: 0.7rem; background: #e8f4fd; color: #0d6efd; border-radius: 3px; padding: 1px 5px; margin-left: 4px; }
.decomp-grid-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.decomp-gate-hint { margin-top: 0; }

/* ── Multi-tab decomposition: shared (header) dims block ─────────────── */
.decomp-shared-block { background: #f8f9fa; border: 1px solid #e6e8eb; border-radius: 6px; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.decomp-shared-title { font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .02em; }
.decomp-shared-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.decomp-inline-create { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Multi-tab decomposition: per-tab grid (prototype .presplit-table) ── */
.presplit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.presplit-table thead th { text-align: left; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #555; border-bottom: 2px solid #e0e0e0; background: #fafafa; }
.presplit-table tbody td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.presplit-table tbody tr.row-resolved { background: #f6fbf6; }
.presplit-table .tab-name { font-weight: 600; color: #222; }

.type-cell { display: flex; flex-direction: column; gap: 6px; }
.type-cell-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.type-cell-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.status-confirmed { color: #2e7d32; font-weight: 600; }
.status-check { color: #a85a00; font-weight: 600; }
.detected-value { color: #222; font-weight: 500; }
.text-green { color: #2e7d32; }

.decomp-btn { border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.decomp-btn:disabled { opacity: .5; cursor: default; }
.decomp-btn-primary { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.decomp-btn-secondary { background: #fff; color: #2e7d32; border-color: #a5d6a7; }
.decomp-btn-ghost { background: none; color: #555; border-color: #d0d0d0; }

/* ── A3: Self-review line ────────────────────────────────────────────────── */
.import-self-review-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}
.import-self-review-line--ok {
    color: #15803d; /* green-700 */
}
.import-self-review-line--warning {
    color: #b45309; /* amber-700 */
}
.import-self-review-line__icon {
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ── A3: AI-check chip ───────────────────────────────────────────────────── */
.ai-check-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.ai-check-chip--consistent {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.ai-check-chip--drifted {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── A3: Confirm screen AI chip row ─────────────────────────────────────── */
.import-summary-ai-chips {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.import-summary-ai-chip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}
.import-summary-ai-chip-filename {
    color: #374151;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

/* ── A3: Before you import callout ──────────────────────────────────────── */
.import-before-you-import {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    padding: 0.625rem 0.875rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}
.import-before-you-import__heading {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 0.375rem;
}
.import-before-you-import__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.import-before-you-import__item {
    font-size: 0.8125rem;
    color: #78350f;
    display: flex;
    gap: 0.375rem;
    align-items: baseline;
}
.import-before-you-import__item-name {
    font-weight: 500;
    flex-shrink: 0;
}
.import-before-you-import__item-note {
    color: #92400e;
}

/* ─── Screen 2: Review ─────────────────────────────────── */
.import-review-screen { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem; }
.import-review-heading { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.import-review-intro { color: #555; margin-bottom: 1.5rem; }
.import-review-section { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 6px; background: #f9f9f9; }
.import-review-section-label { font-weight: 600; margin-bottom: 0.25rem; }
.import-review-file-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.import-review-file-list li { padding: 0.25rem 0; }
.import-review-cant-import { color: #c0392b; }
.import-review-needs-check { color: #e67e22; }
.import-review-self-review-group { margin-top: 0.5rem; }
.import-review-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* ─── Review: confidence dots (ported from prototype styles.css 408-422, 2034-2047) ── */
.dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
    line-height: 14px;
}
.dot-green { background: #43a047; }
/* Deepened for WCAG contrast with white glyph (#fff on #a85a00 = 5.09:1) */
.dot-amber { background: #a85a00; }
.dot-red   { background: #e53935; }
.dot-glyph {
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    display: inline-block;
    user-select: none;
    pointer-events: none;
}

/* ─── Review: detection summary rows (ported from prototype styles.css 1466-1499) ──── */
.detect-summary-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e8f5e9;
    align-items: flex-start;
}
.detect-summary-row:last-child { border-bottom: none; }
.detect-summary-label {
    flex: 0 0 180px;
    font-size: 13px;
    font-weight: 700;
    color: #1b5e20;
    padding-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.detect-summary-value {
    flex: 1;
    font-size: 14px;
    color: #212529;
    line-height: 1.5;
}
.detect-summary-check .detect-summary-label { color: #b45309; }
.detect-summary-cant  .detect-summary-label { color: #b71c1c; }
.detect-summary-list {
    margin: 4px 0 0 16px;
    padding: 0;
    font-size: 13px;
    color: #333;
    line-height: 1.7;
}
.detect-summary-list li { margin-bottom: 2px; }

/* ─── Review: open-original link (ported from prototype styles.css 1741-1748) ──────── */
.open-original-link {
    font-size: 12px;
    color: #5c6bc0;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 8px;
}
.open-original-link:hover { text-decoration: underline; color: #3949ab; }

/* ─── Review: inline source-row preview panel (ported from prototype styles.css 2063-2082) */
.preview-panel {
    display: none;
    margin-top: 8px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 14px;
}
.preview-panel.open { display: block; }
.preview-panel-row {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    color: #555;
    padding: 2px 0;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.preview-panel-row + .preview-panel-row { border-top: 1px solid #f0f0f0; }

/* ─── Screen 3: Classify ───────────────────────────────── */
.import-classify-screen { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.import-classify-heading { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.import-classify-intro { color: #555; margin-bottom: 1rem; }
.import-classify-filter-chips { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.import-classify-chip { padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid #ccc; cursor: pointer; background: #fff; font-size: 0.875rem; }
.import-classify-chip--active { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.import-classify-progress { margin-bottom: 1rem; color: #555; font-size: 0.875rem; }
.import-classify-file-list { display: flex; flex-direction: column; gap: 1rem; }
.import-classify-file-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem; }
.import-classify-file-card--needs-review { border-color: #e67e22; background: #fffbf0; }
.import-classify-ready-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; background: #27ae60; color: #fff; font-size: 0.8rem; }

/* Collapsible multi-tab decomposition cards (Classify) */
.import-classify-file-card-header--toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 4px 2px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.import-classify-file-card-header--toggle:hover { color: #b9651b; }
.import-classify-file-card-header--toggle:hover .import-classify-collapse-chevron { color: #b9651b; }
.import-classify-file-card-header--toggle:focus-visible { outline: 2px solid #e67e22; outline-offset: 2px; border-radius: 4px; }
.import-classify-collapse-chevron { flex: 0 0 auto; width: 14px; font-size: 12px; line-height: 1; color: #e67e22; }
.import-classify-tab-count { color: #777; font-size: 13px; }
.import-classify-unresolved-badge { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.import-classify-unresolved-badge--open { background: #fdecea; color: #b9651b; }
.import-classify-unresolved-badge--ok { background: #e8f5e9; color: #2e7d32; }
.import-classify-file-card-body { margin-top: 10px; }
.import-classify-file-card-body--collapsed { display: none; }
.import-classify-collapse-all { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.import-classify-collapse-all-btn { background: none; border: 1px solid #d8d8d8; border-radius: 6px; padding: 4px 12px; font-size: 12px; color: #555; cursor: pointer; }
.import-classify-collapse-all-btn:hover { background: #f5f5f5; border-color: #bbb; }
.import-classify-collapse-all-btn:focus-visible { outline: 2px solid #e67e22; outline-offset: 2px; }
.import-classify-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* ─── Screen 4: Confirm & Import ──────────────────────── */
.import-confirm-screen { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.import-confirm-heading { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.import-confirm-intro { color: #555; margin-bottom: 1rem; }
.import-confirm-count-bar { font-size: 1rem; font-weight: 500; margin-bottom: 1rem; }
.import-confirm-disclosure { margin-bottom: 1rem; }
.import-confirm-disclosure-toggle { background: none; border: none; cursor: pointer; font-size: 0.9rem; color: #1a73e8; padding: 0.25rem 0; }
.import-confirm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.import-confirm-table th, .import-confirm-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #eee; }
.import-confirm-table th { background: #f5f5f5; font-weight: 600; }
.import-confirm-table tr.import-confirm-flagged td { background: #fffdf7; }
.import-confirm-table tr.import-confirm-child td:nth-child(2) { padding-left: 1.75rem; }
.import-confirm-ai-badge { display: inline-block; font-size: 0.75rem; color: #6c757d; background: #f0f0f0; border-radius: 3px; padding: 0.1rem 0.3rem; margin-left: 0.25rem; }
.import-confirm-not-importing { margin-top: 1rem; padding: 0.75rem 1rem; background: #f9f9f9; border-radius: 6px; }
.import-confirm-not-importing-label { font-weight: 600; margin-bottom: 0.25rem; }
.import-confirm-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }
.import-confirm-edit-link { background: none; border: none; cursor: pointer; color: #1a73e8; text-decoration: underline; padding: 0; font-size: 0.875rem; }
.import-confirm-error { color: #c0392b; padding: 0.5rem; margin-bottom: 0.5rem; }
.import-confirm-import-btn { padding: 0.75rem 2rem; background: #1a73e8; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; }
.import-confirm-import-btn:disabled { background: #b0c4de; cursor: not-allowed; }

/* ─── Screen 5: Done ──────────────────────────────────── */
.import-done-screen { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.import-done-heading { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; }
.import-done-summary { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem; }
.import-done-helper { color: #6c757d; font-size: 0.875rem; margin-bottom: 1.5rem; }
.import-done-section { margin-bottom: 2rem; }
.import-done-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.25rem; }
.receipt-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 13px; }
.receipt-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #777; text-align: left; padding: 8px 12px; border-bottom: 2px solid #e0e0e0; background: #fafafa; }
.receipt-table td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; color: #222; }
.receipt-table tr:last-child td { border-bottom: none; }
.receipt-table tr.receipt-ready td { background: #fff; }
.receipt-open-link { font-size: 12px; color: #2e7d32; font-weight: 600; text-decoration: none; border: 1.5px solid #a5d6a7; border-radius: 4px; padding: 2px 8px; white-space: nowrap; display: inline-block; }
.receipt-open-link:hover { background: #e8f5e9; text-decoration: none; }
.import-done-next-steps { color: #555; font-size: 0.875rem; margin-top: 0.75rem; }
.import-done-actions { margin-top: 1rem; }

/* ─── Screen 5: Done — hero, audit, receipt (ported from prototype styles.css) ──── */
.done-hero { text-align: center; padding: 40px 24px; }
.done-icon { font-size: 56px; margin-bottom: 16px; display: block; }
.done-title { font-size: 22px; font-weight: 700; color: #1b5e20; margin-bottom: 8px; }
.done-subtitle { font-size: 14px; color: #555; margin-bottom: 28px; }
.done-summary-para { font-size: 15px; color: #212529; line-height: 1.65; margin: 0 0 16px 0; }
.done-audit-line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #444; background: #f5f5f5; border-left: 3px solid #9e9e9e; border-radius: 0 4px 4px 0; padding: 10px 14px; margin-bottom: 14px; line-height: 1.55; }
.done-audit-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.done-verify-callout { font-size: 14px; color: #1b5e20; background: #e8f5e9; border: 1.5px solid #a5d6a7; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; line-height: 1.55; }
.done-section-heading { font-size: 15px; font-weight: 700; color: #212529; margin: 20px 0 10px 0; border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; }
.done-not-imported { margin-top: 4px; }
.done-not-group { margin-bottom: 14px; }
.done-not-group-label { font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.done-not-list { margin: 0; padding-left: 20px; font-size: 14px; color: #333; line-height: 1.6; }
.done-not-list li { margin-bottom: 6px; }
.done-next-steps { background: #e8f5e9; border-left: 4px solid #43a047; border-radius: 0 6px 6px 0; padding: 10px 16px; font-size: 13px; color: #1b5e20; font-weight: 500; max-width: 700px; margin: 0 auto 24px; text-align: left; }
.inwizard-link { color: #2e7d32; font-weight: 600; text-decoration: none; cursor: pointer; }
.inwizard-link:hover { text-decoration: underline; }

/* ── Import wizard: highlighted per-step header ─────────────────────────────
   Mirrors the active sidebar nav item (Memories / Workspace / Import Data): a
   light-green tint + primary-green accent. Wraps each screen's "Step X of Y"
   heading and its description so the current step reads as "selected". Shared by
   all five step screens (Upload / Review / Classify / Confirm / Done). */
.import-step-header {
  background-color: rgba(128, 201, 54, 0.15);
  border-left: 4px solid var(--color-primary);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.import-step-header > h2,
.import-step-header > .done-title {
  color: var(--color-primary);
  margin: 0 0 6px 0;
}
.import-step-header > p,
.import-step-header > .done-subtitle {
  color: #444;
  margin: 0;
}

/* ---- Stepper ---- */
/* Standard stepper: each step is an equal-width column with its circle centred
   and label centred below. A single connector line runs through the circle
   centres, drawn behind the circles (which have a solid background that masks
   it) — so the line is continuous and gap-free, and all five steps read as
   evenly centred regardless of label length. */
.stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 0;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;                 /* circle vertical centre (30px circle + 2px border) */
  left: 50%;                 /* this circle's centre */
  width: 100%;               /* one equal segment → reaches the next circle's centre */
  height: 2px;
  background: #e0e0e0;
  z-index: 0;
}

.stepper-step.active:not(:last-child)::after,
.stepper-step.done:not(:last-child)::after {
  background: #43a047;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;                /* sits above the connector line so its bg masks it */
  /* No transition: a fade on the circle's background made a just-completed step
     render mid-animation as solid green (matching the active step) during a
     navigation. Without it each circle snaps to its correct static state, so
     every .done circle is uniformly light-green and only .active is solid. */
}

.stepper-step.active .step-circle {
  border-color: #43a047;
  background: #43a047;
  color: #fff;
}

.stepper-step.done .step-circle {
  border-color: #43a047;
  background: #e8f5e9;
  color: #2e7d32;
}

.step-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}

.stepper-step.active .step-label { color: #2e7d32; font-weight: 600; }
.stepper-step.done .step-label { color: #2e7d32; }

/* ── Stepper: Done terminal marker (non-numbered) ─────────────────── */
.stepper-done-marker .step-circle-done {
  background: #e8f5e9;
  color: #2e7d32;
  border: 2px solid #2e7d32;
  font-size: 14px;
}
.stepper-done-marker.active .step-circle-done,
.stepper-done-marker.done .step-circle-done {
  background: #2e7d32;
  color: #fff;
}

/* ── Import classify: worklist cards (attention items) ─────────────── */
.worklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.worklist-empty { font-size: 14px; color: #555; padding: 16px 0; }
/* NOTE: .worklist-card and all .wcard-* layout rules moved to the scoped
   WorklistCard.razor.css (single-tab Classify card was refactored into four
   self-contained dimension components). They are no longer global. */

/* ── Clean inline override controls (.dim-select — shared with DecompositionConfirmSurface) ── */
select.dim-select { border: 1px solid #d0d0d0; border-radius: 4px; padding: 4px 8px; font-size: 13px; color: #222; background: #fff; cursor: pointer; min-width: 150px; }
select.dim-select:focus { outline: none; border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.15); }
.dim-textbox { border: 1px solid #d0d0d0; border-radius: 4px; padding: 4px 8px; font-size: 13px; color: #222; min-width: 180px; }
.dim-textbox:focus { outline: none; border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,.15); }
.text-amber { color: #a85a00; font-weight: 600; }

/* NOTE: .wcard-create-skip / .wcard-inline-create / .wcard-action* / .wcard-reasons
   moved to scoped WorklistCard.razor.css + the Dimensions/*.razor.css components. */

/* ── AI badge (shared with DecompositionConfirmSurface) ────────────── */
.ai-badge { display: inline-flex; align-items: center; gap: 3px; background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ai-badge.hidden { display: none; }

/* ── Detection cell ─────────────────────────────────────────────────── */
.detection-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Amber hint ─────────────────────────────────────────────────────── */
.amber-hint { font-size: 12px; color: #7b3f00; margin-top: 6px; background: #fff3e0; border-radius: 4px; padding: 4px 8px; }

/* NOTE: .gate-trace* and .suspect-ack* moved to scoped WorklistCard.razor.css
   (WorklistCard-only; no longer global). */

/* ── Progress tracker (real counts + bar) ───────────────────────────── */
.triage-progress-bar-wrap { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 14px; }
.triage-progress-label { font-size: 14px; color: #333; margin-bottom: 8px; }
.triage-progress-bar { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.triage-progress-fill { height: 100%; background: #2e7d32; border-radius: 4px; transition: width 0.3s ease; }
.triage-progress-allset { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #e8f5e9; border: 1.5px solid #2e7d32; border-radius: 6px; font-size: 15px; font-weight: 700; color: #1b5e20; }
.triage-allset-icon { font-size: 20px; }
@keyframes pulse-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,125,50,0.4); } 50% { box-shadow: 0 0 0 6px rgba(46,125,50,0); } }
.btn-pulse { animation: pulse-btn 1.5s infinite; }
/* Issue #690: "ready to confirm" affordances on the Check & fix step */
.import-classify-continue-hint { margin-left: 10px; font-size: 0.8125rem; color: #555; align-self: center; }
.decomp-ready-hint { color: #2e7d32; background: #e8f5e9; border-radius: 4px; padding: 4px 8px; font-size: 12px; }
.triage-progress-allset--confirm { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }

/* ── Ready collapsed group ──────────────────────────────────────────── */
.ready-collapsed-group { margin-bottom: 12px; }
.ready-group-toggle { width: 100%; text-align: left; padding: 10px 14px; background: #f1f8e9; border: 1.5px solid #c8e6c9; border-radius: 6px; font-size: 14px; color: #1b5e20; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ready-group-toggle:hover { background: #e8f5e9; }
.ready-group-list { border: 1px solid #c8e6c9; border-top: none; border-radius: 0 0 6px 6px; background: #fafff9; padding: 4px 0; }
.ready-item { padding: 8px 14px; font-size: 13px; color: #212529; border-bottom: 1px solid #e8f5e9; }
.ready-item:last-child { border-bottom: none; }
.ready-item-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.ready-caret { margin-left: auto; }

/* ── Ready expand/edit header (lazy-mounts WorklistCard for an auto-passed file) ── */
.ready-edit-header { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.ready-edit-header .rcard-status { margin-left: auto; }
.ready-edit-header .import-classify-collapse-chevron { color: #2e7d32; flex: 0 0 auto; }
.ready-edit-hint { font-size: 12px; color: #2e7d32; white-space: nowrap; }
.ready-edit-header:hover .ready-edit-hint { text-decoration: underline; color: #1b5e20; }
.ready-excluded-label { color: #9e9e9e; font-size: 0.8rem; }
.ready-edit-body { margin-top: 8px; }

/* ── Ready expanded cards ───────────────────────────────────────────── */
.ready-expanded-list { display: flex; flex-direction: column; gap: 10px; }
.ready-card { border: 1.5px solid #c8e6c9; border-radius: 8px; padding: 12px 14px; background: #fafff9; }
.ready-card.rcard-excluded { opacity: 0.55; border-color: #e0e0e0; background: #f5f5f5; }
.rcard-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rcard-status { margin-left: auto; white-space: nowrap; }
.rcard-dims { font-size: 13px; color: #555; margin-bottom: 6px; }
.rcard-dim { margin-right: 4px; }
.rcard-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

/* ── Detection-settled guard placeholder (single-tab classify) ──────────
   Shown in place of the WorklistCard while a NeedsReview file's detection
   is still Pending/Running, so the user never sees a half-empty dim card. */
.import-classify-detecting { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fafafa; font-size: 13px; color: #555; }
.import-classify-detecting-text strong { color: #222; font-weight: 600; }
.import-classify-detecting-spinner { width: 14px; height: 14px; border: 2px solid #c8e6c9; border-top-color: #2e7d32; border-radius: 50%; animation: import-classify-detecting-spin 0.8s linear infinite; flex: 0 0 auto; }
@keyframes import-classify-detecting-spin { to { transform: rotate(360deg); } }

/* ── Skip buttons — global fallback (wcard-skip-btn is also in WorklistCard.razor.css scoped;
      this global rule ensures the class renders correctly when used outside WorklistCard) ── */
.wcard-skip-btn { border-radius: 4px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: none; color: #2e7d32; border: 1px solid #a5d6a7; }
.wcard-skip-btn:hover { background: #f1f8e9; }
/* Skip button inside the "detecting" placeholder — push it to the right, keep it inline */
.import-classify-detecting-skip { margin-left: auto; flex-shrink: 0; }
/* Skip button on the decomposition confirm card — align right below the toggle header */
.import-classify-decomp-skip { display: block; margin: 4px 0 0 auto; }

/* ── Don't import toggle ────────────────────────────────────────────── */
.dont-import-link { background: none; border: none; font-size: 12px; color: #b71c1c; cursor: pointer; padding: 0; text-decoration: underline; }
.dont-import-link:hover { color: #7f0000; }
.dont-import-active { color: #9e9e9e !important; }

/* ── Can't import list ──────────────────────────────────────────────── */
.cant-list { display: flex; flex-direction: column; gap: 10px; }
.cant-item { border: 1.5px solid #ffcdd2; border-radius: 6px; padding: 10px 14px; background: #fff8f8; }
.cant-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cant-icon { color: #b71c1c; font-size: 14px; }
.cant-reason { font-size: 13px; color: #555; margin-bottom: 4px; }
.cant-next { font-size: 13px; color: #333; }
.cant-preview { font-size: 12px; color: #555; font-style: italic; margin-top: 4px; }
.remove-link { margin-left: auto; font-size: 12px; color: #999; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.remove-link:hover { color: #b71c1c; }

/* ── Dimension create affordance (shared: DimReportDefinitionSelect, DimEntitySelect) ──
   "Create New Report" / "Create New Organization" render as a small button to the RIGHT
   of their dropdown on the same row. */
.dim-create-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dim-create-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid #a5d6a7; border-radius: 4px;
    background: #f1f8e9; color: #2e7d32;
    font-size: 12px; font-weight: 600; cursor: pointer;
    padding: 6px 12px; white-space: nowrap;
}
.dim-create-btn:hover { background: #e8f5e9; border-color: #81c784; color: #1b5e20; }

/* ── Create*Modal (GLOBAL — scoped CSS is unreliable for dialogs/modals) ────────────────
   Shared by CreateOrgModal (.org-modal-*) and CreateReportModal (.report-modal-*). Fixed
   backdrop + centred card. ✕ (header) and Cancel are ALWAYS visible, including the no-root /
   load-error states, so the user is never trapped. Grouped selectors keep a single source of
   truth; each modal gets a distinct class so it can be targeted independently (e.g. by E2E). */
.org-modal-backdrop,
.report-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
.org-modal-card,
.report-modal-card {
    width: 420px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    display: flex; flex-direction: column; overflow: hidden;
}
.org-modal-header,
.report-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eee;
}
.org-modal-title,
.report-modal-title { font-size: 15px; font-weight: 700; color: #222; }
.org-modal-close,
.report-modal-close {
    background: none; border: none; font-size: 16px; line-height: 1;
    color: #888; cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.org-modal-close:hover,
.report-modal-close:hover { background: #f2f2f2; color: #333; }
.org-modal-body,
.report-modal-body { padding: 18px; }
.org-modal-intro,
.report-modal-intro { font-size: 13px; color: #666; margin: 0 0 14px; }
.org-modal-info {
    font-size: 13px; color: #1b5e20; margin: 0 0 14px;
    padding: 10px; background: #f1f8e9; border: 1px solid #c8e6c9; border-radius: 4px;
}
.org-modal-label,
.report-modal-label {
    display: block; font-size: 12px; font-weight: 600; color: #555;
    margin-bottom: 5px; margin-top: 12px;
}
.org-modal-label:first-of-type,
.report-modal-label:first-of-type { margin-top: 0; }
.org-modal-input {
    width: 100%; border: 1px solid #d0d0d0; border-radius: 4px;
    padding: 8px 10px; font-size: 14px; color: #222; box-sizing: border-box;
}
.org-modal-input:focus { outline: none; border-color: #43a047; box-shadow: 0 0 0 2px rgba(67, 160, 71, .15); }
.org-modal-error,
.report-modal-error { font-size: 13px; color: #b71c1c; margin-top: 6px; }
.org-modal-root-error,
.report-modal-root-error {
    font-size: 13px; color: #b71c1c; padding: 10px;
    background: #fff5f5; border-radius: 4px; border: 1px solid #ffcdd2;
}
.org-modal-actions,
.report-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 18px; border-top: 1px solid #eee; background: #fafafa;
}
.org-modal-btn,
.report-modal-btn {
    border-radius: 4px; padding: 7px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
}
.org-modal-btn:disabled,
.report-modal-btn:disabled { opacity: .5; cursor: default; }
.org-modal-btn-primary,
.report-modal-btn-primary { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.org-modal-btn-ghost,
.report-modal-btn-ghost { background: #fff; color: #444; border-color: #d0d0d0; }
.org-modal-btn-ghost:hover,
.report-modal-btn-ghost:hover { background: #f2f2f2; }

/* ── ImportHelpModal (GLOBAL) ────────────────────────────────────────────────────────────
   Long-form "How importing works" help modal. Shares the backdrop/header/footer treatment of
   the Create*Modal family but uses a WIDER card and a SCROLLABLE body because the content is
   long-form. Content-only — no inputs. */
.help-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
.help-modal-card {
    width: 640px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    background: #fff; border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    display: flex; flex-direction: column; overflow: hidden;
}
.help-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eee; flex: 0 0 auto;
}
.help-modal-title { font-size: 15px; font-weight: 700; color: #222; }
.help-modal-close {
    background: none; border: none; font-size: 16px; line-height: 1;
    color: #888; cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.help-modal-close:hover { background: #f2f2f2; color: #333; }
.help-modal-body {
    padding: 18px 20px; overflow-y: auto; flex: 1 1 auto;
    font-size: 13px; color: #444; line-height: 1.55;
}
.help-modal-section { margin-bottom: 18px; }
.help-modal-section:last-child { margin-bottom: 0; }
.help-modal-h3 {
    font-size: 13px; font-weight: 700; color: #1b5e20;
    margin: 0 0 6px; text-transform: none;
}
.help-modal-body p { margin: 0 0 8px; }
.help-modal-body p:last-child { margin-bottom: 0; }
.help-modal-list { margin: 0 0 4px; padding-left: 18px; }
.help-modal-list li { margin-bottom: 4px; }
.help-modal-dl { margin: 0; }
.help-modal-dl dt { font-weight: 700; color: #222; margin-top: 8px; }
.help-modal-dl dt:first-child { margin-top: 0; }
.help-modal-dl dd { margin: 2px 0 0 0; color: #555; }
.help-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 18px; border-top: 1px solid #eee; background: #fafafa; flex: 0 0 auto;
}
.help-modal-btn {
    border-radius: 4px; padding: 7px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
}
.help-modal-btn-primary { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.help-modal-btn-primary:hover { background: #276b2b; }

/* ── "How this works" header link (Import page) ──────────────────────────────────────────── */
.import-help-link {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 10px; padding: 2px 8px;
    background: none; border: 1px solid transparent; border-radius: 4px;
    color: #1a73e8; font-size: 12px; font-weight: 600; cursor: pointer;
    vertical-align: baseline;
}
.import-help-link:hover { background: #eef4fe; border-color: #cfe0fb; }
.import-help-icon { font-size: 13px; line-height: 1; }

/* Classify subtitle — accountant-friendly description under the Step 3 heading. */
.import-classify-subtitle { color: #555; margin: 0 0 1rem; line-height: 1.5; }

/* ── Import progress narrator — animated phase line (Issue #691) ────────────────────────── */
.import-progress-narrator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary, #555);
    font-size: .95rem;
}

/* ═══════════════════════════════════════════════════════════════
   Report Library — Source badges (T055)
   Class hooks: .source-badge  +  .source-uploaded | .source-imported | .source-synced
   ═══════════════════════════════════════════════════════════════ */

/* Base pill — mirrors .import-badge rhythm (11px, uppercase, pill radius) */
.source-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 12px;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* Uploaded — primary/green (brand color, mirrors .import-badge--ready) */
.source-badge.source-uploaded {
    background: var(--color-bg-primary-light, #E8F5D9);
    color: #14532d;
    border: 1px solid var(--color-border-primary, #D4ECC4);
}

/* Imported — amber/in-progress (mirrors .import-badge--needs-review) */
.source-badge.source-imported {
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #fcd34d;
}

/* Synced — info-blue (mirrors .status-badge-generating) */
.source-badge.source-synced {
    background: #cfe2ff;
    color: #084298;
    border: 1px solid var(--color-info-alt, #2196F3);
}

/* ═══════════════════════════════════════════════════════════════
   Report Library — Synced detail panel (T055)
   Class hooks: .synced-report-detail  .synced-pq-reasons  .report-library-detail-loading
   ═══════════════════════════════════════════════════════════════ */

/* Outer panel — mirrors the prototype's .detail + .detail-inner (green rail, indented). */
.synced-report-detail {
    background: #f8faf7;
    border-left: 3px solid var(--color-primary, var(--fyi-green, #6AA84F));
    padding: 14px 18px 16px 50px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Section heading — "Source & sync details". */
.synced-detail-heading {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

/* Metadata card — auto-fill 3-up grid, label ABOVE value (prototype .meta-grid). */
.synced-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 28px;
    background: #fff;
    border: 1px solid var(--color-border-default, #E0E0E0);
    border-radius: 6px;
    padding: 14px 18px;
    max-width: 760px;
}

.synced-meta-grid .k {
    font-size: 11px;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.synced-meta-grid .v {
    font-weight: 600;
    margin-top: 2px;
    color: var(--color-text-primary, #2F2F2F);
    word-break: break-word;
}

/* External-source note — italic, muted (prototype .note). */
.synced-detail-note {
    color: var(--color-text-secondary, #6b7280);
    font-size: 12px;
    margin-top: 8px;
    font-style: italic;
}

/* Parse-quality reasons list */
.synced-pq-reasons {
    margin: 8px 0 0 0;
    max-width: 760px;
    font-size: 12px;
    color: #78350f;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 8px 8px 8px 28px;
}

.synced-pq-reasons li {
    margin: 2px 0;
    line-height: 1.5;
}

/* Loading shimmer — matches the spinner idiom used elsewhere */
.report-library-detail-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--color-text-secondary, #666);
    background: var(--pp-color-bg-subtle, #f9fafb);
    border-left: 3px solid var(--color-border-default, #E0E0E0);
}