/* 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-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;
}

/* 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 {
    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: 72px; /* Below header (estimated) */
    bottom: 0;
    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;
}

/* 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;
}

/* 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);
}

.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;
}

.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 .fullscreen-button,
.session-chat-panel.analysis-session-chat .popout-button {
    margin-left: auto;
}

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

.session-chat-panel.analysis-session-chat .popout-button {
    margin-left: var(--spacing-1, 4px);
    margin-right: 0;
}

.session-chat-panel.analysis-session-chat .toggle-button {
    margin-left: var(--spacing-1, 4px);
}

/* ═══════════════════════════════════════════════════════════════
   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;
}

/* 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 */
.chat-file-drop-zone .file-drop-zone-content {
    padding: 0 12px 8px;
    background: var(--color-bg-light, #F8F9FA);
}

.chat-file-drop-zone .file-drop-zone {
    min-height: 48px;
}

.chat-file-drop-zone .k-dropzone {
    min-height: 48px;
    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;
    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;
    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;
}

.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);
}

/* 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;
    }
}