/* FuelFox Analytics Assistant - Modern Styles */

/* ============================================
   DESIGN TOKENS - FoxBot Design System
   Created: 2025-12-19
   8px spacing scale, standardized colors, comprehensive dark mode
   ============================================ */

:root {
    /* ============================================
       SPACING SCALE (8px base)
       ============================================ */
    --space-0: 0;
    --space-1: 8px;      /* Replaces: 6px, 8px, 10px */
    --space-2: 16px;     /* Replaces: 12px, 14px, 16px, 18px, 20px */
    --space-3: 24px;     /* Replaces: 24px, 28px */
    --space-4: 32px;     /* Replaces: 32px, 40px */
    --space-5: 40px;     /* Replaces: 40px, 48px */
    --space-6: 48px;     /* Replaces: 48px, 60px */
    --space-8: 64px;     /* New tier */
    --space-10: 80px;    /* Replaces: 80px */

    /* ============================================
       COLORS - LIGHT MODE (DEFAULT)
       ============================================ */
    /* Backgrounds */
    --bg-primary: #F5F3ED;           /* Main page background */
    --bg-secondary: #fafaf8;         /* Alternate rows, secondary surfaces */
    --bg-card: #ffffff;              /* Cards, modals, elevated content */
    --bg-hover: #f0ede5;             /* Hover states */

    /* Text */
    --text-primary: #2d2d2d;         /* Headings, primary content */
    --text-secondary: #6b6b6b;       /* Secondary content, labels */
    --text-tertiary: #9b9b9b;        /* Tertiary content, disabled */
    --text-muted: #b0a8a0;           /* Placeholders, hints */

    /* Brand Colors */
    --primary-red: #c7342c;          /* FuelFox brand red */
    --primary-red-hover: #d83e34;    /* Hover state - slightly lighter */
    --primary-red-active: #b02d25;   /* Active/pressed state - slightly darker */

    /* Borders */
    --border-light: #e9e7df;         /* Subtle borders, dividers */
    --border-medium: #e0ddd3;        /* Standard borders */
    --border-dark: #d0cdc3;          /* Emphasized borders */

    /* Semantic States */
    --success: #00aa00;              /* Success, positive */
    --warning: #856404;              /* Warning, caution */
    --error: #c33;                   /* Error, negative */
    --info: #0066cc;                 /* Info, neutral */

    /* Fuel Type Colors (FuelFox Standard) */
    --fuel-87: #c7342c;              /* 87 Octane - Red */
    --fuel-93: #b30000;              /* 93 Octane - Dark Red */
    --fuel-diesel: #00aa00;          /* Diesel - Green */
    --fuel-dyed-diesel: #9b30ff;     /* Dyed Diesel - Purple */
    --fuel-def: #b8860b;             /* DEF - Goldenrod */

    /* Focus States */
    --focus-ring: var(--primary-red);
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;

    /* ============================================
       BORDER RADIUS (standardized)
       ============================================ */
    --radius-sm: 4px;    /* Small elements (badges, inputs) */
    --radius-md: 8px;    /* Medium elements (cards, buttons) */
    --radius-lg: 12px;   /* Large containers */
    --radius-xl: 16px;   /* Extra large (main container) */
    --radius-2xl: 20px;  /* Modals, overlays */
    --radius-3xl: 24px;  /* Hero elements */
    --radius-full: 50%;  /* Circular (avatars, icons) */

    /* ============================================
       SHADOWS (5 elevation levels + focus)
       ============================================ */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.05);                          /* Subtle */
    --shadow-2: 0 2px 8px rgba(0,0,0,0.06);                          /* Card */
    --shadow-3: 0 4px 12px rgba(0,0,0,0.1);                          /* Elevated */
    --shadow-4: 0 4px 16px rgba(0,0,0,0.12);                         /* Floating */
    --shadow-5: 0 10px 40px rgba(0,0,0,0.3);                         /* Modal */
    --shadow-focus: 0 0 0 var(--focus-ring-width) rgba(199,52,44,0.1); /* Focus ring shadow */
    --shadow-primary: 0 6px 20px rgba(199,52,44,0.4);                /* Brand element shadow */

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;

    /* Font Sizes */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 32px;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ============================================
       Z-INDEX LAYERS
       ============================================ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-tooltip: 500;
    --z-modal: 1000;
    --z-flag-btn: 10000;  /* User feedback flag button - must be above all modals */
}

/* ============================================
   DARK MODE OVERRIDES
   Theme managed via data-theme="dark" attribute on <html>
   ============================================ */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #1a1a1a;           /* Deep charcoal */
    --bg-secondary: #2d2d2d;         /* Elevated surfaces */
    --bg-card: #3a3a3a;              /* Lighter than secondary for depth */
    --bg-hover: #404040;             /* Lighter for hover feedback */

    /* Text */
    --text-primary: #e8e6e3;         /* Off-white for reduced eye strain */
    --text-secondary: #b8b5b0;       /* Muted */
    --text-tertiary: #8a8784;        /* More muted */
    --text-muted: #6a6764;           /* Very muted */

    /* Brand - Adjusted for dark backgrounds */
    --primary-red: #e63c30;          /* Brighter red (WCAG AA on dark) */
    --primary-red-hover: #ff4d40;    /* Even brighter on hover */
    --primary-red-active: #cc3428;   /* Slightly darker than hover */

    /* Borders - Lighter for dark mode */
    --border-light: #404040;
    --border-medium: #4d4d4d;
    --border-dark: #5a5a5a;

    /* States - Brightened for dark backgrounds */
    --success: #00cc00;              /* Brighter green */
    --warning: #ffb84d;              /* Brighter orange */
    --error: #ff6b6b;                /* Brighter red */
    --info: #4da6ff;                 /* Brighter blue */

    /* Fuel Type Colors - Brightened for visibility */
    --fuel-87: #e63c30;              /* Brighter red */
    --fuel-93: #d93030;              /* Brighter dark red */
    --fuel-diesel: #00cc00;          /* Brighter green */
    --fuel-dyed-diesel: #b350ff;     /* Brighter purple */
    --fuel-def: #daa520;             /* Brighter goldenrod */

    /* Focus - Keep brand red */
    --focus-ring: #e63c30;

    /* Shadows - Adjusted for dark backgrounds */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-3: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-4: 0 4px 16px rgba(0,0,0,0.6);
    --shadow-5: 0 10px 40px rgba(0,0,0,0.8);
    --shadow-focus: 0 0 0 var(--focus-ring-width) rgba(230,60,48,0.3);
    --shadow-primary: 0 6px 20px rgba(230,60,48,0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    height: 100vh;
    padding: var(--space-4) 20px 0 80px; /* 60px drawer + 20px gap */
    overflow: hidden; /* Prevent body scroll - page-content handles all scrolling */
    overflow-x: hidden; /* Prevent horizontal scroll specifically */
    transition: padding-left 0.3s ease;
}

/* Adjust body padding when drawer is open */
body.drawer-open {
    padding-left: 280px; /* 260px drawer + 20px gap */
}

.hidden {
    display: none !important;
}

.container {
    max-width: 1000px;
    width: 100%; /* Ensure container fills available space */
    min-width: 0; /* Allow container to shrink below content width */
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 84px);
    max-height: calc(100vh - 84px);
    overflow-x: hidden; /* Prevent horizontal overflow from children */
}

/* Top Navigation Bar */
.top-nav {
    background: var(--bg-card);
    padding: var(--space-2) 32px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Prevent overflow */
    box-sizing: border-box; /* Include padding in width calculation */
}

.nav-left {
    display: flex;
    align-items: center;
}

.nav-logo {
    height: 45px;
    width: auto;
}

/* Theme-aware logo switching */
.nav-logo-dark {
    display: none;
}

[data-theme="dark"] .nav-logo-light {
    display: none;
}

[data-theme="dark"] .nav-logo-dark {
    display: block;
}

.nav-center {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.nav-link {
    padding: var(--space-1) 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

.nav-link:hover {
    background: var(--bg-secondary);
}

.nav-link.active {
    background: var(--primary-red);
    color: var(--bg-card);
    border: 2px solid var(--primary-red-active);
}

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

.nav-dropdown-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-dropdown-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-btn::after,
.nav-dropdown.open .nav-dropdown-btn::after {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    min-width: 200px;
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: block;
    width: 100%;
    padding: var(--space-2) 16px;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.nav-dropdown-item:first-child {
    border-top: 1px solid #e9e7df;
}

.nav-dropdown-item:hover {
    background: #f5f3ed;
}

.nav-dropdown-item.active {
    background: #fff3f1;
    color: var(--primary-red);
    border-left: 3px solid #c7342c;
    padding-left: 13px;
}

/* Quick Query Items */
.nav-quick-query {
    cursor: pointer;
}

.nav-quick-query:hover {
    background: #fff3f1;
    color: var(--primary-red);
}

/* Page Header */
.page-header {
    background: var(--bg-card);
    padding: var(--space-2) 32px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-header h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-header-controls {
    display: none; /* Hidden by default, shown only on chat page */
    align-items: center;
    gap: var(--space-2);
}

.page-content {
    flex: 1;
    min-height: 0;
    min-width: 0; /* Allow shrinking below content width */
    display: flex;
    flex-direction: column;
    border-radius: 0 0 16px 16px;
    /* Allow scrolling for dashboard pages with long content */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.beta-badge {
    font-size: 14px;
    font-weight: 600;
    color: #8b7355;
    background: #f5f3ed;
    border: 1.5px solid #d4cfc3;
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ==================== Page Loading (Initial Load) ==================== */

#page-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#page-loading.hidden {
    display: none;
}

.page-loading-content {
    text-align: center;
}

.page-loading-content p {
    margin-top: var(--space-2);
    font-size: var(--font-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.spinner-large {
    border: 4px solid var(--border-light);
    border-top: 4px solid var(--primary-red);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

/* ==================== Splash Screen (Empty State) ==================== */

#splash-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) 32px;
    background: var(--bg-secondary);
}

#splash-screen.hidden {
    display: none;
}

.splash-content {
    text-align: center;
    max-width: 600px;
    animation: fadeIn 0.6s ease-out;
}

.splash-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    opacity: 0.9;
}

.splash-greeting {
    font-size: 32px;
    font-weight: 500;
    color: #5c5c5c;
    margin-bottom: 32px;
    letter-spacing: -0.5px;
}

.splash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.splash-chips .chip {
    background: var(--bg-card);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-3xl);
    padding: var(--space-1) 20px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-weight: 500;
}

.splash-chips .chip:hover {
    background: var(--primary-red);
    color: var(--bg-card);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 52, 44, 0.2);
}

/* Position input area in splash screen */
#splash-input-placeholder {
    width: 100%;
    max-width: 840px;
    margin: 0 auto 32px auto;
}


.chip {
    background: var(--bg-card);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-3xl);
    padding: var(--space-1) 18px;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-weight: 500;
}

.chip:hover {
    background: var(--primary-red);
    color: var(--bg-card);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 52, 44, 0.2);
}

#chat-container {
    flex: 1;
    min-width: 0; /* Allow shrinking below content width */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
    padding: var(--space-4);
    background: var(--bg-secondary);
}

#messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0; /* Allow shrinking below content width */
    max-width: 100%; /* Prevent overflow */
}

.message {
    display: flex;
    gap: var(--space-2);
    animation: fadeIn 0.4s ease-out;
}

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

.message.user {
    flex-direction: row-reverse;
}

/* Make assistant messages block-level (no flex, no avatar) */
.message.assistant {
    display: block;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 15px;
}

/* Only user avatars are displayed now */
.message.user .avatar {
    background: linear-gradient(135deg, #c7342c 0%, var(--primary-red-active) 100%);
    color: var(--bg-card);
}

.message-content {
    line-height: 1.6;
}

/* User message content - keep bubble style */
.message.user .message-content {
    max-width: 85%;
    padding: var(--space-2) 16px;
    background: #fcdede;
    color: var(--text-primary);
    border-radius: 14px 14px 4px 14px;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Dark mode user message - darker background with better contrast */
[data-theme="dark"] .message.user .message-content {
    background: #3d2828;
    color: #e8e6e3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Assistant message content - inline document style */
.message.assistant .message-content {
    max-width: 100%; /* Respect parent container bounds */
    padding: var(--space-2) 0;
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-wrap: break-word; /* Break long words if needed */
    word-wrap: break-word; /* Legacy support */
}

.message-content p {
    margin-top: 0;
    margin-bottom: 10px;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content ul,
.message-content ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 1.5em;
}

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

.message-content li:last-child {
    margin-bottom: 0;
}

.message-content strong {
    font-weight: 600;
}

/* Chat Message Headings (Dark Mode Aware) */
.chat-heading-2 {
    margin: 16px 0 10px 0;
    font-size: 1.2em;
    font-weight: 700;
    color: #2c3e50;
}

.chat-heading-3 {
    margin: 14px 0 8px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #2c3e50;
}

.chat-heading-4 {
    margin: 12px 0 6px 0;
    font-size: 1em;
    font-weight: 600;
    color: #2c3e50;
}

.chat-heading-5 {
    margin: 10px 0 6px 0;
    font-size: 0.95em;
    font-weight: 600;
    color: #2c3e50;
}

/* Dark mode headings with better contrast */
[data-theme="dark"] .chat-heading-2,
[data-theme="dark"] .chat-heading-3,
[data-theme="dark"] .chat-heading-4,
[data-theme="dark"] .chat-heading-5 {
    color: #e8e6e3; /* Off-white for high contrast */
}

/* Inline Code (Dark Mode Aware) */
.chat-inline-code {
    background: #e9ecef;
    color: #1a1a1a;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.9em;
}

/* Dark mode inline code with better contrast */
[data-theme="dark"] .chat-inline-code {
    background: #3a3a3a;
    color: #e8e6e3;
}

/* Code Blocks */
.chat-code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0;
    white-space: pre;
}

.chat-code-block code {
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Light mode code blocks */
[data-theme="light"] .chat-code-block {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
}

.tool-calls {
    margin-top: 14px;
    padding: var(--space-2) 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border-left: 3px solid #c7342c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tool-calls-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-red);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-calls-header svg {
    flex-shrink: 0;
}

.tool-call {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 5px 0;
}

.tool-call code {
    background: #e8e5dc;
    color: #1a1a1a;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 500;
}

/* Dark mode tool calls with better contrast */
[data-theme="dark"] .tool-call code {
    background: #3a3a3a;
    color: #e8e6e3;
}

/* Flag Button */
.btn-flag {
    margin-top: 10px;
    padding: var(--space-1) 10px;
    font-size: 13px;
    background: none;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: visible; /* Ensure tooltip isn't clipped */
    z-index: 1; /* Create stacking context */
}

.btn-flag svg {
    transition: all 0.2s ease;
}

.btn-flag:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-red);
    color: var(--primary-red);
    transform: translateY(-1px);
}

.btn-flag:hover .flag-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

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

/* Flag Tooltip */
.flag-tooltip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: var(--space-1) 12px;
    background: #2d2d2d;
    color: var(--bg-card);
    font-size: 12px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 10000; /* Very high z-index to appear above all content */
}

.flag-tooltip::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-right-color: var(--text-primary);
}

/* Feedback Modal - Splash-inspired Design */
.feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.feedback-modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.feedback-modal-header {
    padding: var(--space-3) 28px 20px 28px;
    background: linear-gradient(180deg, #edebe5 0%, #f8f6f0 100%);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feedback-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}

.feedback-modal-header .modal-close {
    font-size: 28px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.feedback-modal-header .modal-close:hover {
    color: var(--text-secondary);
}

.feedback-modal-body {
    padding: var(--space-3);
}

.feedback-form {
    width: 100%;
}

.feedback-input-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    transition: all 0.2s ease;
}

.feedback-input-wrapper:focus-within {
    border-color: var(--primary-red);
    background: var(--bg-card);
    box-shadow: 0 4px 16px rgba(199, 52, 44, 0.1);
}

.feedback-textarea {
    flex: 1;
    border: none;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    color: var(--text-primary);
    resize: none;
    outline: none;
    line-height: 1.5;
    min-height: 80px;
    max-height: 200px;
}

.feedback-textarea::placeholder {
    color: #a0a0a0;
}

.feedback-submit-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #c7342c 0%, var(--primary-red-active) 100%);
    color: var(--bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    align-self: flex-end;
}

.feedback-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(199, 52, 44, 0.4);
}

.feedback-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(199, 52, 44, 0.3);
}

.feedback-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.feedback-message {
    margin-top: 16px;
    padding: var(--space-2) 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    text-align: center;
}

.feedback-message.success {
    background: #e6f4ea;
    color: #137333;
    border: 1px solid #b7e4c7;
}

.feedback-message.error {
    background: #ffebe9;
    color: var(--primary-red);
    border: 1px solid #f5c6cb;
}

/* Download Modal */
.download-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.download-modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
    overflow: hidden;
}

.download-modal-header {
    padding: var(--space-3) 28px 20px 28px;
    background: linear-gradient(180deg, #edebe5 0%, #f8f6f0 100%);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.download-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}

.download-modal-header .modal-close {
    font-size: 28px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.download-modal-header .modal-close:hover {
    color: var(--text-secondary);
}

.download-modal-body {
    padding: var(--space-3);
}

.download-description {
    margin: 0 0 var(--space-3) 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.download-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.download-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.download-option:hover {
    border-color: var(--primary-red);
    background: var(--bg-card);
    box-shadow: 0 4px 16px rgba(199, 52, 44, 0.1);
}

.download-option:active {
    transform: scale(0.98);
}

.format-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.download-option:hover .format-icon {
    color: var(--primary-red);
}

.format-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.format-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.format-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Conversation Management Modal */
.conv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.conv-modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
    overflow: hidden;
}

.conv-modal-header {
    padding: var(--space-3) 28px 20px 28px;
    background: linear-gradient(180deg, #edebe5 0%, #f8f6f0 100%);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conv-modal-header.danger {
    background: linear-gradient(180deg, rgba(199, 52, 44, 0.08) 0%, rgba(199, 52, 44, 0.04) 100%);
    border-bottom-color: rgba(199, 52, 44, 0.25);
}

.conv-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}

.conv-modal-header.danger h2 {
    color: var(--primary-red);
}

.conv-modal-header .modal-close {
    font-size: 28px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.conv-modal-header .modal-close:hover {
    color: var(--text-secondary);
}

.conv-modal-body {
    padding: var(--space-3);
}

.conv-section {
    margin-bottom: var(--space-3);
}

.conv-input-wrapper {
    position: relative;
}

.conv-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: 15px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.conv-input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(199, 52, 44, 0.1);
}

.conv-input::placeholder {
    color: var(--text-tertiary);
}

.conv-confirm-message {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.conv-confirm-message.danger {
    color: #8b2920;
}

.conv-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

.conv-btn {
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.conv-btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.conv-btn-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.conv-btn-primary {
    background: var(--primary-red);
    color: white;
}

.conv-btn-primary:hover {
    background: #b02d26;
    box-shadow: 0 4px 12px rgba(199, 52, 44, 0.3);
}

.conv-btn-primary:active {
    transform: scale(0.98);
}

.conv-btn-danger {
    background: var(--primary-red);
    color: white;
}

.conv-btn-danger:hover {
    background: #a82a24;
    box-shadow: 0 4px 12px rgba(199, 52, 44, 0.3);
}

/* Dark mode for conversation modal */
[data-theme="dark"] .conv-modal-header {
    background: linear-gradient(180deg, #2d2d2d 0%, #262626 100%);
}

[data-theme="dark"] .conv-modal-header.danger {
    background: linear-gradient(180deg, rgba(199, 52, 44, 0.15) 0%, rgba(199, 52, 44, 0.08) 100%);
    border-bottom-color: rgba(199, 52, 44, 0.4);
}

[data-theme="dark"] .conv-modal-header.danger h2 {
    color: #e57871;
}

[data-theme="dark"] .conv-confirm-message.danger {
    color: #e57871;
}

.input-area {
    padding: var(--space-2) 32px 24px 32px;
    background: var(--bg-secondary);
    border-top: none;
    border-radius: 0 0 16px 16px;
    overflow: visible; /* Allow tooltips to overflow */
}

/* Input area styling when in splash screen */
#splash-input-placeholder .input-area {
    background: transparent;
    border-top: none;
    border-radius: 0;
    padding: 0;
}

#splash-input-placeholder .input-area #chat-form {
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-3xl);
    padding: var(--space-1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#chat-form {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    background: var(--bg-card);
    border-radius: var(--radius-3xl);
    padding: var(--space-1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#user-input {
    flex: 1;
    padding: var(--space-2) 20px;
    border: none;
    border-radius: var(--radius-3xl);
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    transition: opacity 0.2s ease;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    resize: none;
    overflow-y: auto;
    min-height: 48px;
    max-height: 150px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#user-input::-webkit-scrollbar {
    display: none;
}

#user-input:focus {
    background: transparent;
}

#send-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    background: linear-gradient(135deg, #c7342c 0%, var(--primary-red-active) 100%);
    color: var(--bg-card);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#send-btn svg {
    width: 20px;
    height: 20px;
}

#send-btn:hover {
    transform: translateY(-1px) scale(1.03);
}

#send-btn:active {
    transform: translateY(0) scale(1);
}

#send-btn:disabled {
    background: #d0d0d0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    padding: var(--space-1) 24px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-3xl);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.btn-secondary:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Tertiary Button - Text only, minimal styling */
.btn-tertiary {
    padding: var(--space-1) var(--space-2);
    background: transparent;
    color: var(--primary-red);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-tertiary:hover {
    background: rgba(199, 52, 44, 0.1);
    color: var(--primary-red-active);
}

.btn-tertiary:active {
    background: rgba(199, 52, 44, 0.15);
}

/* Danger Button - For destructive actions */
.btn-danger {
    padding: var(--space-1) 24px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: var(--bg-card);
    border: none;
    border-radius: var(--radius-3xl);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
    white-space: nowrap;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

/* Ghost Button - Transparent with border */
.btn-ghost {
    padding: var(--space-1) 24px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-3xl);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    border-color: var(--border-dark);
    transform: translateY(-1px);
}

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

/* Dark mode adjustments for new button styles */
[data-theme="dark"] .btn-secondary {
    background: var(--bg-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .btn-tertiary:hover {
    background: rgba(230, 60, 48, 0.15);
}

[data-theme="dark"] .btn-ghost {
    border-color: var(--border-light);
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-medium);
}

.loading {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: var(--space-2) 0 0 0;
    position: relative; /* For tooltip positioning */
    overflow: visible; /* Allow tooltips to overflow */
}

.loading.hidden {
    display: none;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--bg-hover);
    border-top: 2.5px solid #c7342c;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Stop button for loading indicator */
.stop-btn {
    width: 20px;
    height: 20px;
    background: var(--primary-red);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(199, 52, 44, 0.3);
    flex-shrink: 0;
    position: relative; /* For tooltip positioning */
}

.stop-btn:hover {
    background: var(--primary-red-active);
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(199, 52, 44, 0.4);
}

.stop-btn:active {
    transform: scale(0.95);
}

/* Stop icon as actual element (not pseudo-element to avoid tooltip conflicts) */
.stop-icon {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--bg-card);
    border-radius: 1px;
    pointer-events: none; /* Don't interfere with button clicks */
}

.error-message {
    background: #fef2f2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
    padding: var(--space-2) 18px;
    border-radius: var(--radius-md);
    margin-top: 14px;
    font-weight: 500;
}

/* Scrollbar styling */
#chat-container::-webkit-scrollbar {
    width: 10px;
}

#chat-container::-webkit-scrollbar-track {
    background: #f5f3ed;
}

#chat-container::-webkit-scrollbar-thumb {
    background: #d0cdc3;
    border-radius: 5px;
}

#chat-container::-webkit-scrollbar-thumb:hover {
    background: #b8b5ab;
}

/* Table styling for markdown tables */
.chat-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-2) 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 14px;
    border: 1px solid var(--border-medium);
    table-layout: fixed;
}

.chat-table-wrapper {
    overflow-x: auto;
    margin: var(--space-2) 0;
}

.chat-table thead {
    background: #6b6b6b;
    color: var(--bg-card);
}

.chat-table th {
    padding: var(--space-2) 18px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid #5a5a5a;
}

.chat-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

/* Zebra striping (except fuel type rows) */
.chat-table tbody tr:nth-child(even):not(.fuel-type-row) {
    background-color: var(--bg-secondary);
}

.chat-table tbody tr:hover {
    background-color: var(--bg-secondary);
}

.chat-table tbody tr.fuel-type-row:hover {
    opacity: 0.9;
    background-color: inherit;
}

.chat-table tbody tr:last-child {
    border-bottom: none;
}

.chat-table td {
    padding: var(--space-2) 18px;
    color: var(--text-primary);
    vertical-align: top;
}

.chat-table td:first-child {
    font-weight: 500;
    color: #1a1a1a;
}

/* Override for fuel type rows - handled by more comprehensive rule below */

/* Handle emojis in tables */
.chat-table td .emoji {
    font-size: 16px;
}

/* Make numbers stand out */
.chat-table td strong {
    font-weight: 600;
}

/* White numbers in fuel type rows - handled by comprehensive rule below */

/* Numeric column styling */
.chat-table .numeric-column {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Fuel Type Color Coding (FuelFox standard colors) */
.fuel-type-row {
    font-weight: 500;
}

.fuel-type-87-octane {
    background-color: var(--primary-red) !important;
    color: white !important;
}

.fuel-type-93-octane {
    background-color: #b30000 !important;
    color: white !important;
}

.fuel-type-diesel {
    background-color: #00aa00 !important;
    color: white !important;
}

.fuel-type-dyed-diesel {
    background-color: #9b30ff !important;
    color: white !important;
}

.fuel-type-def {
    background-color: #b8860b !important;
    color: white !important;
}

.fuel-type-unknown {
    background-color: var(--text-secondary) !important;
    color: white !important;
}

/* Ensure all cells in fuel type rows have white text */
.fuel-type-row td {
    color: white !important;
    font-weight: 500;
}

/* Force white text for ALL content within fuel type row cells (including spans, inline styles, etc.) */
.fuel-type-row td,
.fuel-type-row td *,
.fuel-type-row td span,
.fuel-type-row td strong,
.fuel-type-row td em {
    color: white !important;
}

/* ==================== Text Selection Quote Tooltip ==================== */

/* Selection tooltip container */
.selection-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #c7342c 0%, var(--primary-red-active) 100%);
    color: var(--bg-card);
    padding: var(--space-1) 18px;
    border-radius: var(--radius-2xl);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(199, 52, 44, 0.4);
    z-index: 10000;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
}

/* Visible state with animation */
.selection-tooltip.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hover effect */
.selection-tooltip:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(199, 52, 44, 0.5);
}

/* Active/click state */
.selection-tooltip:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(199, 52, 44, 0.4);
}

/* Small arrow pointing to selected text */
.selection-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #c7342c;
}

/* Placeholder Content */
.dashboards-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: var(--bg-secondary);
    overflow-y: auto;
}

.placeholder-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) 32px;
    background: var(--bg-secondary);
}

.placeholder-message {
    text-align: center;
    max-width: 500px;
}

.placeholder-message h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.placeholder-message p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.placeholder-message p:last-of-type {
    margin-bottom: 32px;
}

/* Dashboard Links */
.dashboard-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    width: 100%;
}

.dashboard-link {
    display: block;
    padding: var(--space-2);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashboard-link:hover {
    border-color: var(--primary-red);
    box-shadow: 0 4px 12px rgba(199, 52, 44, 0.15);
    transform: translateY(-2px);
}

.dashboard-link h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-link p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Logout Page */
.logout-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) 32px;
    background: var(--bg-secondary);
}

.logout-message {
    text-align: center;
    max-width: 500px;
}

.logout-icon {
    font-size: 72px;
    margin-bottom: 24px;
    animation: wave 0.6s ease-in-out;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
}

.logout-message h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.logout-message p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.logout-message p:last-of-type {
    margin-bottom: 36px;
}

.btn-primary {
    display: inline-block;
    padding: var(--space-2) 32px;
    background: linear-gradient(135deg, #c7342c 0%, var(--primary-red-active) 100%);
    color: var(--bg-card);
    border: none;
    border-radius: var(--radius-3xl);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(199, 52, 44, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(199, 52, 44, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(199, 52, 44, 0.2);
}

/* Page Footer */
.page-footer {
    background: transparent;
    padding: 12px 32px;
    max-width: 1000px;
    width: 100%; /* Ensure footer fills available space */
    margin: 0 auto;
}

/* Hide footer on chat page for cleaner chat interface */
body.chat-page .page-footer {
    display: none;
}

/* Extend container on chat page since footer is hidden */
body.chat-page .container {
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
}

/* Reduce bottom spacing on chat page since footer is hidden */
body.chat-page .input-area {
    padding-bottom: 12px;
}

/* Show header controls on chat page */
body.chat-page .page-header-controls {
    display: flex;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 20px;
}

.copyright {
    font-weight: 400;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--primary-red);
}

.version {
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================
   THEME TOGGLE (Dark Mode)
   ============================================ */
.footer-content {
    flex-wrap: wrap;
    gap: var(--space-2);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
    width: 36px;
    height: 36px;
    position: relative;
}

.theme-toggle-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
    background: var(--bg-secondary);
}

.theme-toggle-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base);
}

.theme-icon svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.theme-toggle-btn:hover .theme-icon svg {
    color: var(--primary-red);
}

/* Show/hide icons based on theme */
.theme-icon-light {
    display: block;
}

.theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: block;
}

/* ============================================
   FOCUS STATES (WCAG 2.1 AA Compliant)
   ============================================ */

/* Navigation Focus States */
.nav-link:focus-visible,
.nav-dropdown-btn:focus-visible,
.nav-dropdown-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Button Focus States */
.chip:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-flag:focus-visible,
.btn-send:focus-visible,
.btn-clear:focus-visible,
.btn-delete:focus-visible,
.btn-resolve:focus-visible,
.btn-unresolve:focus-visible,
.btn-view-details:focus-visible,
.btn-edit:focus-visible,
.btn-generate:focus-visible,
.btn-download:focus-visible,
.btn-close:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Pagination Focus States */
.pagination-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Conversation & Tab Focus States */
.conversation-item:focus-visible,
.tab-btn:focus-visible,
.menu-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Link Focus States */
.footer-link:focus-visible,
.version-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Theme Toggle Focus State */
.theme-toggle-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Drawer Controls Focus States */
.drawer-hamburger:focus-visible,
.drawer-close:focus-visible,
.drawer-new-conversation:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Form Input Focus States (use box-shadow for better visibility) */
/* Note: #user-input excluded - it's inside a styled pill and has no border */
.search-input:focus,
.form-control:focus,
.date-input:focus,
.metro-select:focus,
.per-page-select:focus,
.resolve-textarea:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: var(--shadow-focus);
}

/* Select/Dropdown Focus States */
select:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Checkbox Focus States */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Modal & Overlay Focus States */
.modal-close:focus-visible,
.feedback-btn-close:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Table Row Focus States (for keyboard navigation) */
.results-table tbody tr:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: -2px;
}

/* Login Footer */
.login-footer {
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-2) 0;
    font-size: 0.85rem;
    margin-top: auto;
}

.login-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive design */
@media (max-width: 768px) {
    body {
        padding: var(--space-2) 12px 16px 62px; /* 50px drawer + 12px gap */
    }

    body.drawer-open {
        padding-left: 272px; /* 260px drawer + 12px gap */
    }

    .container {
        height: calc(100vh - 32px);
        border-radius: var(--radius-lg);
    }

    .top-nav {
        padding: var(--space-2) 20px;
    }

    .nav-logo {
        height: 40px;
    }

    .nav-link {
        padding: var(--space-1) 16px;
        font-size: 14px;
    }

    .page-header {
        padding: var(--space-2);
    }

    .page-header h1 {
        font-size: 24px;
    }

    .beta-badge {
        font-size: 12px;
        padding: 3px 10px;
    }

    #chat-container {
        padding: var(--space-2);
    }

    .input-area {
        padding: var(--space-2) 20px 20px 20px;
    }

    .message-content {
        max-width: 85%;
    }

    /* Feedback Modal Responsive */
    .feedback-modal-content {
        width: 95%;
        max-width: 400px;
        border-radius: var(--radius-xl);
    }

    .feedback-modal-header {
        padding: var(--space-2) 20px 16px 20px;
    }

    .feedback-modal-header h2 {
        font-size: 16px;
    }

    .feedback-modal-header .modal-close {
        font-size: 24px;
    }

    .feedback-modal-body {
        padding: var(--space-2);
    }

    .feedback-input-wrapper {
        padding: var(--space-2);
        gap: var(--space-1);
    }

    .feedback-textarea {
        font-size: 14px;
        min-height: 60px;
    }

    .feedback-submit-btn {
        width: 44px;
        height: 44px;
    }

    .dashboards-content {
        padding: var(--space-2);
    }

    .dashboard-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .placeholder-content {
        padding: var(--space-5) 20px;
    }

    .placeholder-message h2 {
        font-size: 26px;
    }

    .logout-content {
        padding: var(--space-5) 20px;
    }

    .logout-icon {
        font-size: 60px;
    }

    .logout-message h2 {
        font-size: 28px;
    }

    .page-footer {
        padding: var(--space-2) 20px 16px 20px;
    }

    .footer-content {
        font-size: 12px;
    }

    .version {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Toast notifications mobile */
    .toast-container {
        top: 70px;
        right: 12px;
        left: 12px;
        max-width: 100%;
    }

    .toast {
        min-width: 0;
        max-width: 100%;
        padding: 12px 16px;
    }

    .toast-title {
        font-size: 13px;
    }

    .toast-message {
        font-size: 12px;
    }

    /* Validation messages mobile */
    .validation-message {
        font-size: 12px;
        padding: 6px 10px;
    }

    .validation-message svg {
        width: 14px;
        height: 14px;
    }

    /* Character counters mobile */
    .char-counter {
        font-size: 11px;
    }

    /* Empty states mobile */
    .empty-state-icon {
        width: 40px;
        height: 40px;
    }

    .empty-state-title {
        font-size: 14px;
    }
}

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

    .toast {
        padding: 10px 12px;
    }

    .toast-actions {
        flex-direction: column;
    }

    .toast-btn {
        width: 100%;
    }
}

/* ==================== Release Notes Modal ==================== */

/* Make version badge clickable */
.version-link {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.version-link:hover {
    background: var(--bg-hover);
    border-color: var(--primary-red);
    color: var(--primary-red);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(199, 52, 44, 0.2);
}

.version-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Release Notes Modal Container */
.release-notes-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

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

/* Release Notes Modal Content */
.release-notes-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Release Notes Modal Header */
.release-notes-header {
    padding: var(--space-2) 8px;
    background: linear-gradient(135deg, #edebe5 0%, #f8f6f0 100%);
    color: rgb(95, 95, 95);
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.release-notes-header h2 {
    padding-left: 20px;
    font-size: 16px;
    font-weight: 400;
}

/* Release Notes Close Button */
.release-notes-close {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.release-notes-close svg {
    color: var(--primary-red);
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
}

.release-notes-close:hover,
.release-notes-close:focus {
    opacity: 1;
    transform: scale(1.1);
}

.release-notes-close:hover svg,
.release-notes-close:focus svg {
    color: var(--primary-red-hover, #b02c24);
}

/* Release Notes Modal Body */
.release-notes-body {
    padding: var(--space-4);
    overflow-y: auto;
    flex: 1;
    background: var(--bg-secondary);
}

/* Release Notes Content Styling */
.release-notes-body h1 {
    color: #565656;
    font-size: 28px;
    margin: 0 0 0 0;
    padding-bottom: 12px;

}

.release-notes-body h2 {
    color: #4c4c4c;
    font-size: 22px;
    margin: 0px 0 0 0;
    margin: 18px 0 0 0;
    border-radius: var(--radius-sm);
}

.release-notes-body h3 {
    color: var(--text-primary);
    font-size: 18px;
    margin: var(--space-3) 0 12px 0;
    font-weight: 600;
}

.release-notes-body p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: var(--space-2) 0;
}

.release-notes-body ul {
    margin: var(--space-2) 0;
    padding-left: 24px;
}

.release-notes-body ul ul {
    margin: var(--space-1) 0;
    padding-left: 20px;
}

.release-notes-body li {
    color: var(--text-primary);
    line-height: 1.6;
    margin: var(--space-1) 0;
}

.release-notes-body strong {
    color: var(--primary-red);
    font-weight: 600;
}

.release-notes-body hr {
    border: none;
    border-top: 2px solid #e0ddd3;
    margin: var(--space-4) 0;
}

.release-notes-body code {
    background: #f5f3ed;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
    color: var(--primary-red);
}

.release-notes-body pre {
    background: #2d2d2d;
    color: #f5f3ed;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-2) 0;
}

.release-notes-body pre code {
    background: none;
    color: #f5f3ed;
    padding: 0;
}

/* Loading and Error States */
.release-notes-body .loading {
    text-align: center;
    padding: var(--space-6) 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

.release-notes-body .loading::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #c7342c;
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.release-notes-body .error {
    text-align: center;
    padding: var(--space-6) 20px;
    color: var(--primary-red);
    font-size: 16px;
    background: #fff5f5;
    border: 1px solid #ffebeb;
    border-radius: var(--radius-md);
}

/* Responsive Release Notes Modal */
@media (max-width: 768px) {
    .release-notes-content {
        width: 95%;
        margin: 10px auto;
        max-height: 90vh;
    }

    .release-notes-header {
        padding: var(--space-2) 24px;
    }

    .release-notes-header h2 {
        font-size: 20px;
    }

    .release-notes-body {
        padding: var(--space-3) 20px;
    }

    .release-notes-body h1 {
        font-size: 24px;
    }

    .release-notes-body h2 {
        font-size: 20px;
    }

    .release-notes-body h3 {
        font-size: 16px;
    }
}

/* ==================== Multi-Conversation Drawer ==================== */

/* Conversation Drawer - Expands from 60px to 260px */
.conversation-drawer {
    position: fixed;
    left: 0;
    top: 0;
    width: 60px;
    height: 100vh;
    background: #FAFAF8;
    border-right: 1px solid #e9e7df;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: width 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    cursor: pointer;
}

.conversation-drawer:hover {
    background: var(--bg-primary);
}

.conversation-drawer.open {
    width: 260px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
    cursor: default;
}

/* Hamburger Icon Container (visible when closed) */
.drawer-hamburger {
    position: absolute;
    top: 20px;
    left: 18px;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.conversation-drawer.open .drawer-hamburger {
    opacity: 0;
    pointer-events: none;
}

/* Hamburger Icon */
.hamburger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background: #2d2d2d;
    border-radius: 2px;
}

/* Drawer Content (visible when open) */
.drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background: #FAFAF8;
}

.conversation-drawer.open .drawer-content {
    opacity: 1;
    pointer-events: auto;
}

/* Close Button (X) at top of drawer */
.drawer-close-btn {
    align-self: flex-end;
    margin: var(--space-2) var(--space-2) 0 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.drawer-close-btn svg {
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.drawer-close-btn:hover {
    background: rgba(199, 52, 44, 0.05);
}

.drawer-close-btn:hover svg {
    color: var(--primary-red);
    transform: scale(1.1);
}

.drawer-close-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Container remains centered with margin: 0 auto (defined above)
   Body padding adjusts for drawer, so no explicit margins needed here */

/* Search Bar */
.drawer-search {
    padding: var(--space-2) 16px 0 16px;
    position: relative;
    flex-shrink: 0;
    min-width: 260px;
}

.drawer-search input {
    width: 100%;
    padding: var(--space-1) 16px 10px 36px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
}

.drawer-search input:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(199, 52, 44, 0.1);
}

.drawer-search input::placeholder {
    color: var(--text-tertiary);
}

/* Filter Tabs (at bottom) */
.drawer-filters {
    display: flex;
    padding: var(--space-2) 16px;
    gap: var(--space-1);
    border-top: 1px solid #e9e7df;
    flex-shrink: 0;
    min-width: 260px;
}

.filter-tab {
    flex: 1;
    padding: var(--space-1) 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-tab:hover {
    background: var(--bg-secondary);
}

.filter-tab.active {
    background: var(--primary-red);
    color: var(--bg-card);
    border-color: var(--primary-red);
}

/* New Conversation Button */
.btn-new-conversation {
    margin: var(--space-2);
    padding: var(--space-1) 16px;
    background: #e0ddd3;
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.btn-new-conversation:hover {
    background: #d4cfc3;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-new-conversation .plus-icon {
    font-size: 20px;
    line-height: 1;
}

/* Conversation List */
.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px 8px;
    min-width: 260px;
}

.conversation-item {
    padding: var(--space-2) 16px;
    margin-bottom: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

/* Raise z-index when dropdown is active */
.conversation-item:has(.conversation-menu-dropdown.active) {
    z-index: 10001;
}

.conversation-item:hover {
    background: var(--bg-secondary);
}

.conversation-item.active {
    background: #fff3f1;
    border-left: 3px solid #c7342c;
    padding-left: 13px;
}

.conversation-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.conversation-item-main {
    flex: 1;
    min-width: 0;
}

.conversation-title-row {
    margin-bottom: 4px;
}

.conversation-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search highlighting in conversation titles */
.conversation-title .search-highlight {
    background: rgba(255, 235, 59, 0.4);
    color: var(--text-primary);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 2px;
}

.conversation-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-tertiary);
}

.conversation-date {
    flex-shrink: 0;
}

.conversation-count {
    flex-shrink: 0;
    margin-left: 8px;
}

.conversation-item-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Three-dot menu button */
.conversation-menu {
    position: relative;
    flex-shrink: 0;
}

.conversation-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    opacity: 0;
}

.conversation-item:hover .conversation-menu-btn {
    opacity: 1;
}

/* Keep menu button visible when dropdown is active */
.conversation-menu:has(.conversation-menu-dropdown.active) .conversation-menu-btn {
    opacity: 1;
    background: #e9e7df;
}

.conversation-menu-btn:hover {
    background: #e9e7df;
}

.conversation-menu-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.conversation-menu-btn .dot {
    width: 4px;
    height: 4px;
    background: #6b6b6b;
    border-radius: var(--radius-full);
}

/* Dropdown menu */
.conversation-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.conversation-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.menu-item {
    width: 100%;
    padding: var(--space-1) 14px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.2s ease;
    text-align: left;
}

.menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.menu-item:hover {
    background: #f5f3ed;
}

.menu-item-danger:hover {
    background: #ffebe9;
    color: var(--primary-red);
}

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.menu-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.menu-item:hover .menu-icon svg {
    color: var(--text-primary);
}

.menu-item-danger:hover .menu-icon svg {
    color: var(--primary-red);
}

.menu-label {
    flex: 1;
    font-weight: 500;
}

/* Pagination */
.sidebar-pagination {
    padding: var(--space-2) 20px;
    border-top: 1px solid #e9e7df;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    min-width: 260px;
}

.sidebar-pagination .pagination-btn {
    padding: var(--space-1) 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-pagination .pagination-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--primary-red);
}

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

.sidebar-pagination .page-info {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Loading State */
.sidebar-loading {
    padding: var(--space-5) 20px;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 260px;
}

.sidebar-loading .spinner {
    width: 24px;
    height: 24px;
}

/* Empty State */
.sidebar-empty {
    padding: var(--space-5) 20px;
    text-align: center;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-empty .empty-state-icon {
    color: var(--text-tertiary);
    opacity: 0.5;
    margin-bottom: var(--space-1);
}

.sidebar-empty .empty-state-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

/* Sidebar Error */
.sidebar-error {
    padding: var(--space-2);
    text-align: center;
    color: var(--primary-red);
    font-size: 14px;
    background: #fff5f5;
    border: 1px solid #ffebeb;
    border-radius: var(--radius-md);
    margin: var(--space-2);
}

/* Responsive */
@media (max-width: 768px) {
    .conversation-drawer {
        width: 50px;
    }

    .conversation-drawer.open {
        width: 260px;
    }

    .drawer-content {
        width: 260px;
    }
}

/* ============================================
   MICRO-INTERACTIONS & ANIMATIONS
   ============================================ */

/* Button Press Animation */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-send:active,
.btn-clear:active,
.btn-edit:active,
.pagination-btn:active,
.chip:active {
    transform: scale(0.98);
}

/* Hover Scale Effect for Interactive Elements */
.chip:hover,
.user-card:hover,
.feedback-card:hover,
.conversation-item:hover {
    transform: translateY(-2px);
}

/* Success Checkmark Animation */
@keyframes checkmark {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(-45deg);
    }
}

.success-checkmark {
    animation: checkmark 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Slide-in Toasts/Notifications */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.toast-enter {
    animation: slideInRight 0.3s ease-out;
}

.toast-exit {
    animation: slideOutRight 0.3s ease-in;
}

/* Fade-in Animation for New Content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Skeleton Pulse for Loading States */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Smooth Page Transitions */
@keyframes pageTransition {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter {
    animation: pageTransition 0.4s ease-out;
}

/* Bounce Animation for Success/Error Icons */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bounce {
    animation: bounce 0.6s;
}

/* Shake Animation for Errors */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s;
}

/* Ripple Effect (for future use) */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Rotate Animation for Loading Spinners (already exists but enhanced) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Glow Effect for Active Elements */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--primary-red);
    }
    50% {
        box-shadow: 0 0 20px var(--primary-red), 0 0 30px rgba(199, 52, 44, 0.5);
    }
}

.glow-pulse {
    animation: glow 2s ease-in-out infinite;
}

/* Modal Fade-in */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.release-notes-content,
.shortcuts-content,
.feedback-modal-content {
    animation: modalFadeIn 0.2s ease-out;
}

/* Smooth Hover Transitions - Apply to all interactive elements */
.btn,
.btn-primary,
.btn-secondary,
.btn-send,
.btn-clear,
.btn-edit,
.btn-flag,
.chip,
.nav-link,
.nav-dropdown-item,
.pagination-btn,
.conversation-item,
.user-card,
.feedback-card {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Add smooth transform transitions */
.chip,
.user-card,
.feedback-card,
.conversation-item {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Enhanced hover states with subtle lift */
.user-card:hover,
.feedback-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Conversation item active state */
.conversation-item.active {
    animation: fadeIn 0.3s ease-out;
}

/* Success/Error Message Animations */
.success-message {
    animation: slideInRight 0.3s ease-out, bounce 0.6s 0.3s;
}

.error-message {
    animation: slideInRight 0.3s ease-out, shake 0.5s 0.3s;
}

/* ============================================
   FORM VALIDATION & FEEDBACK
   ============================================ */

/* Input Validation States */
input.error,
textarea.error,
select.error {
    border-color: var(--primary-red) !important;
    background-color: #fff5f5;
}

input.success,
textarea.success,
select.success {
    border-color: #4caf50 !important;
    background-color: #f1f8f4;
}

input.error:focus,
textarea.error:focus,
select.error:focus {
    box-shadow: 0 0 0 3px rgba(199, 52, 44, 0.1) !important;
}

input.success:focus,
textarea.success:focus,
select.success:focus {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

/* Validation Messages */
.validation-message {
    font-size: 13px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideDown 0.2s ease;
}

.validation-message.error {
    color: var(--primary-red);
}

.validation-message.success {
    color: #4caf50;
}

.validation-message svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Form Group with Validation */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: var(--primary-red);
    background-color: #fff5f5;
}

.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
    border-color: #4caf50;
    background-color: #f1f8f4;
}

/* Required Field Indicator */
.required-indicator {
    color: var(--primary-red);
    margin-left: 2px;
}

/* Character Counter */
.char-counter {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: right;
}

.char-counter.warning {
    color: #ff9800;
}

.char-counter.error {
    color: var(--primary-red);
}

/* ============================================
   TOOLTIPS
   ============================================ */

[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Buttons and clickable elements with tooltips should keep pointer cursor, not help cursor */
button[data-tooltip],
.btn[data-tooltip],
.version-link[data-tooltip] {
    cursor: pointer;
}

/* Tooltip bubble */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-card);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 200px;
    width: max-content;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* Tooltip arrow */
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* Show tooltip on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
}

/* Tooltip positioning variants */
[data-tooltip-pos="top"]::before {
    bottom: calc(100% + 8px);
    top: auto;
}

[data-tooltip-pos="top"]::after {
    bottom: calc(100% + 2px);
    top: auto;
    border-top-color: var(--text-primary);
    border-bottom-color: transparent;
}

[data-tooltip-pos="bottom"]::before {
    top: calc(100% + 8px);
    bottom: auto;
}

[data-tooltip-pos="bottom"]::after {
    top: calc(100% + 2px);
    bottom: auto;
    border-bottom-color: var(--text-primary);
    border-top-color: transparent;
}

[data-tooltip-pos="left"]::before {
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

[data-tooltip-pos="left"]::after {
    right: calc(100% + 2px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-left-color: var(--text-primary);
    border-top-color: transparent;
}

[data-tooltip-pos="right"]::before {
    left: calc(100% + 8px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

[data-tooltip-pos="right"]::after {
    left: calc(100% + 2px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-right-color: var(--text-primary);
    border-top-color: transparent;
}

/* Multi-line tooltips */
[data-tooltip-multiline]::before {
    white-space: normal;
    max-width: 200px;
    text-align: center;
}

/* Tooltip delay (for less aggressive tooltips) */
[data-tooltip-delay]::before,
[data-tooltip-delay]::after {
    transition-delay: 0.5s;
}

/* Dark mode adjustments */
[data-theme="dark"] [data-tooltip]::before {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] [data-tooltip]::after {
    border-top-color: var(--bg-secondary);
}

[data-theme="dark"] [data-tooltip-pos="bottom"]::after {
    border-bottom-color: var(--bg-secondary);
    border-top-color: transparent;
}

[data-theme="dark"] [data-tooltip-pos="left"]::after {
    border-left-color: var(--bg-secondary);
}

[data-theme="dark"] [data-tooltip-pos="right"]::after {
    border-right-color: var(--bg-secondary);
}

/* Disabled state tooltips (show why disabled) */
button:disabled[data-tooltip]::before,
.btn:disabled[data-tooltip]::before {
    background: var(--text-muted);
}

/* ============================================
   KEYBOARD SHORTCUTS MODAL
   ============================================ */
.keyboard-shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcuts-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.shortcuts-content {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 10001;
}

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.shortcuts-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.shortcuts-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.shortcuts-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.shortcuts-close:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.shortcuts-body {
    padding: var(--space-4);
}

.shortcuts-section {
    margin-bottom: var(--space-4);
}

.shortcuts-section:last-child {
    margin-bottom: 0;
}

.shortcuts-section h3 {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    font-weight: 600;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.shortcut-item kbd {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-primary);
    box-shadow: 0 2px 0 var(--border-medium);
    min-width: 32px;
    text-align: center;
    display: inline-block;
}

.shortcut-item span {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* Dark mode adjustments for keyboard shortcuts */
[data-theme="dark"] .shortcuts-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .shortcut-item kbd {
    background: var(--bg-primary);
    border-color: var(--border-medium);
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.1);
}

/* Dark mode: Conversation Drawer */
[data-theme="dark"] .conversation-drawer {
    background: var(--bg-primary);
    border-right-color: var(--border-light);
}

[data-theme="dark"] .conversation-drawer:hover {
    background: var(--bg-primary);
}

[data-theme="dark"] .drawer-content {
    background: var(--bg-primary);
}

[data-theme="dark"] .conversation-list {
    background: var(--bg-primary);
}

[data-theme="dark"] .hamburger-icon span {
    background: var(--text-primary);
}

[data-theme="dark"] .drawer-close-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .drawer-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .drawer-search input {
    background-color: var(--bg-secondary);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23b8b5b0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
    border-color: var(--border-medium);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-new-conversation {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-new-conversation:hover {
    background: #4d4d4d;
}

[data-theme="dark"] .conversation-item.active {
    background: rgba(230, 60, 48, 0.15);
    border-left-color: var(--primary-red);
}

[data-theme="dark"] .conversation-menu-btn:hover,
[data-theme="dark"] .conversation-menu:has(.conversation-menu-dropdown.active) .conversation-menu-btn {
    background: var(--bg-hover);
}

[data-theme="dark"] .conversation-menu-dropdown {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .conversation-menu-item:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .drawer-filters {
    border-top-color: var(--border-light);
}

[data-theme="dark"] .sidebar-pagination {
    border-top-color: var(--border-light);
}

/* Dark mode: Splash Screen */
[data-theme="dark"] .splash-greeting {
    color: var(--text-primary);
}

[data-theme="dark"] .chip {
    color: var(--text-primary);
}

/* Dark mode: Beta Badge */
[data-theme="dark"] .beta-badge {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .shortcuts-content {
        width: 95%;
        max-height: 90vh;
    }

    .shortcuts-header {
        padding: var(--space-3);
    }

    .shortcuts-body {
        padding: var(--space-3);
    }

    .shortcut-item {
        flex-wrap: wrap;
    }
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    min-width: 300px;
    max-width: 400px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    pointer-events: auto;
    animation: slideInRight 0.3s ease;
    border-left: 4px solid var(--primary-red);
}

.toast.success {
    border-left-color: #4caf50;
}

.toast.error {
    border-left-color: var(--primary-red);
}

.toast.warning {
    border-left-color: #ff9800;
}

.toast.info {
    border-left-color: #2196f3;
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.toast.success .toast-icon {
    color: #4caf50;
}

.toast.error .toast-icon {
    color: var(--primary-red);
}

.toast.warning .toast-icon {
    color: #ff9800;
}

.toast.info .toast-icon {
    color: #2196f3;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
}

.toast-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.toast-actions {
    display: flex;
    gap: var(--space-1);
    margin-top: 6px;
}

.toast-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.toast-btn-primary {
    background: var(--primary-red);
    color: var(--bg-card);
}

.toast-btn-primary:hover {
    background: #a82825;
}

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

.toast-btn-secondary:hover {
    background: #e0ddd3;
}

.toast-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.toast-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.toast-close svg {
    width: 16px;
    height: 16px;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.removing {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ============================================
   QUICKBOOKS AUTH BANNER (Admin Only)
   Persistent warning banner for token expiry
   ============================================ */

.qb-auth-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border-top: 3px solid #ff9800;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    animation: slideUpBanner 0.3s ease;
}

@keyframes slideUpBanner {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.qb-auth-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.qb-auth-banner-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #856404;
}

.qb-auth-banner-text {
    flex: 1;
    font-size: var(--font-sm);
    color: #856404;
    font-weight: 500;
}

.qb-auth-banner-text strong {
    font-weight: 700;
    color: #664d03;
}

.qb-auth-banner-btn {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    background: #ff9800;
    color: white;
    font-size: var(--font-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
}

.qb-auth-banner-btn:hover {
    background: #f57c00;
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4);
    transform: translateY(-1px);
}

.qb-auth-banner-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
}

.qb-auth-banner-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #856404;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    margin-left: var(--space-1);
}

.qb-auth-banner-dismiss:hover {
    background: rgba(133, 100, 4, 0.1);
    color: #664d03;
}

.qb-auth-banner-dismiss svg {
    width: 16px;
    height: 16px;
}

/* Dark mode for QB Auth Banner */
[data-theme="dark"] .qb-auth-banner {
    background: linear-gradient(135deg, #3d3200 0%, #4d4000 100%);
    border-top-color: #ffb300;
}

[data-theme="dark"] .qb-auth-banner-icon {
    color: #ffc107;
}

[data-theme="dark"] .qb-auth-banner-text {
    color: #ffc107;
}

[data-theme="dark"] .qb-auth-banner-text strong {
    color: #ffd54f;
}

[data-theme="dark"] .qb-auth-banner-btn {
    background: #ffb300;
    color: #1a1a1a;
}

[data-theme="dark"] .qb-auth-banner-btn:hover {
    background: #ffc107;
}

[data-theme="dark"] .qb-auth-banner-dismiss {
    color: #ffc107;
}

[data-theme="dark"] .qb-auth-banner-dismiss:hover {
    background: rgba(255, 193, 7, 0.15);
    color: #ffd54f;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .qb-auth-banner-content {
        flex-wrap: wrap;
        gap: var(--space-1);
        padding: var(--space-2);
    }

    .qb-auth-banner-text {
        flex-basis: calc(100% - 50px);
        order: 1;
    }

    .qb-auth-banner-icon {
        order: 0;
    }

    .qb-auth-banner-dismiss {
        order: 2;
        margin-left: auto;
    }

    .qb-auth-banner-btn {
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: var(--space-1);
    }
}