/*
================================================================================
RESEARCH CRONY - MAIN STYLESHEET
================================================================================
This CSS file controls all visual styling for the ResearchCrony application.

FILE LOCATION: static/css/research.css
LOADED BY: research.html via <link rel="stylesheet">

================================================================================
TABLE OF CONTENTS (Search for section names to jump to them)
================================================================================
1. FONTS & RESET ................ Lines ~30-70
2. CSS VARIABLES (THEME) ........ Lines ~70-160
3. BODY & BACKGROUND ............ Lines ~160-200
4. HEADER BAR ................... Lines ~200-340
5. MAIN LAYOUT .................. Lines ~340-400
6. WELCOME SCREEN ............... Lines ~400-470
7. CHAT MESSAGES ................ Lines ~470-650
8. CHAT INPUT AREA .............. Lines ~650-800
9. LOADING & ANIMATIONS ......... Lines ~800-950
10. TOAST NOTIFICATIONS ......... Lines ~950-1000
11. SEARCH ENGINE TAB ........... Lines ~1000-1100
12. AIRPLANE ANIMATION .......... Lines ~1100-1280
13. PDF UPLOAD MODAL ............ Lines ~1280-1520
14. WEB SEARCH PANEL ............ Lines ~1520-1750
15. RESPONSIVE DESIGN ........... Lines ~1750-1900

================================================================================
HOW TO CHANGE COLORS (THEME)
================================================================================
All colors are defined as CSS variables in the :root section below.
To change the theme:
1. Find the :root { } block (around line 70)
2. Modify the variable values
3. Changes apply site-wide automatically

EXAMPLE - Change primary red to blue:
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --accent: #2563eb;

================================================================================
*/

/*
============================================================================
SECTION 1: GOOGLE FONTS IMPORT
============================================================================
Loads two font families from Google Fonts CDN:

1. Inter - Primary UI font (clean, modern sans-serif)
   Weights: 300 (light), 400 (normal), 500 (medium), 600 (semibold), 700 (bold), 800 (extrabold)

2. JetBrains Mono - Code/monospace font (for code blocks)
   Weights: 400 (normal), 500 (medium), 600 (semibold)

TO CHANGE FONTS:
1. Visit https://fonts.google.com
2. Select your fonts and copy the @import URL
3. Replace the URL below
4. Update font-family in body {} and code {} sections
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/*
============================================================================
SECTION 2: CSS RESET
============================================================================
Resets browser default styles for consistent cross-browser appearance.

* { } applies to ALL elements
box-sizing: border-box means padding/border are included in width/height
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
============================================================================
SECTION 3: CSS VARIABLES (COLOR THEME)
============================================================================
CSS Custom Properties (variables) define all colors used throughout the site.
Variables are referenced with var(--variable-name) syntax.

TO CHANGE THE THEME:
- Modify values below, all uses update automatically
- Colors use hex (#RRGGBB) or rgb() format

CURRENT THEME: Dark Red (Fortinet-inspired)
============================================================================
*/
:root {
    /*
    PRIMARY COLORS - Main brand/accent colors
    =========================================
    These are the "red" accent colors used for buttons, highlights, etc.

    TO CHANGE TO BLUE THEME:
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --primary-light: #3b82f6;
      --accent: #2563eb;
      --accent-hover: #1d4ed8;
    */
    --primary: #c92a2a;            /* Dark red (primary accent) */
    --primary-dark: #991b1b;       /* Darker red - used for hover states */
    --primary-light: #e03131;      /* Lighter red - used for active states */
    --accent: #c92a2a;             /* Alias for primary (used interchangeably) */
    --accent-hover: #991b1b;       /* Accent color on hover */

    /*
    BACKGROUND COLORS - Dark grey palette
    =====================================
    Creates depth through subtle grey variations.

    TO MAKE DARKER:
      --bg-primary: #121212;
      --bg-secondary: #1a1a1a;
      --bg-tertiary: #242424;

    TO MAKE LIGHTER:
      --bg-primary: #2a2a2a;
      --bg-secondary: #3a3a3a;
      --bg-tertiary: #4a4a4a;
    */
    --bg-primary: #1e1e1e;         /* Darkest - main page background */
    --bg-secondary: #2d2d2d;       /* Medium - header, input areas */
    --bg-tertiary: #3a3a3a;        /* Lightest - cards, buttons, inputs */
    --surface: #2d2d2d;            /* General surface color */
    --surface-hover: #3a3a3a;      /* Surface on hover */
    --card-bg: #2d2d2d;            /* Card background */
    --card-hover: #3a3a3a;         /* Card on hover */

    /*
    TEXT COLORS
    ===========
    Three levels of text visibility for hierarchy.

    TO INCREASE CONTRAST:
      --text-primary: #ffffff;
      --text-secondary: #b0b0b0;
    */
    --text-primary: #e0e0e0;       /* Main text - headings, body */
    --text-secondary: #a0a0a0;     /* Secondary text - labels, hints */
    --text-muted: #6b6b6b;         /* Muted text - timestamps, placeholders */

    /*
    BORDER COLORS
    =============
    Subtle borders for visual separation.
    */
    --border: #404040;             /* Standard borders */
    --border-light: #505050;       /* Lighter borders for less emphasis */

    /*
    MESSAGE BUBBLE COLORS
    =====================
    User messages have red tint, AI messages are neutral grey.

    TO CHANGE USER MESSAGE COLOR:
      --user-message-bg: #2e4a2e;  (green tint)
      --user-message-bg: #2e3a4a;  (blue tint)
    */
    --user-message-bg: #7a2e2e;    /* Red-tinted user message bubbles */
    --ai-message-bg: #2d2d2d;      /* Neutral AI message bubbles */

    /*
    STATUS COLORS
    =============
    Semantic colors for feedback (success, warning, error, info).
    */
    --success: #10b981;            /* Green - success messages */
    --warning: #ffa500;            /* Orange - warning messages */
    --error: #ef4444;              /* Red - error messages */
    --info: #c92a2a;               /* Uses accent color for info */
}

/*
============================================================================
SECTION 3B: LIGHT THEME
============================================================================
Light theme activated by adding class="light-theme" to <body>
Toggle via theme button or respects system preference.
============================================================================
*/
body.light-theme {
    /* Primary colors stay the same */
    --primary: #c92a2a;
    --primary-dark: #991b1b;
    --primary-light: #e03131;
    --accent: #c92a2a;
    --accent-hover: #991b1b;

    /* Light backgrounds */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8e8e8;
    --surface: #ffffff;
    --surface-hover: #f0f0f0;
    --card-bg: #ffffff;
    --card-hover: #f5f5f5;

    /* Dark text for light background */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #808080;

    /* Lighter borders */
    --border: #d0d0d0;
    --border-light: #e0e0e0;

    /* Message bubbles */
    --user-message-bg: #fde8e8;
    --ai-message-bg: #f5f5f5;

    /*
    GRADIENTS
    =========
    Linear gradients for buttons and special elements.
    Format: linear-gradient(angle, color1 0%, color2 100%)
    */
    --gradient-primary: linear-gradient(135deg, #c92a2a 0%, #991b1b 100%);
    --gradient-secondary: linear-gradient(135deg, #e03131 0%, #c92a2a 100%);
    --gradient-accent: linear-gradient(135deg, #c92a2a 0%, #e03131 100%);

    /*
    BOX SHADOWS
    ===========
    Three shadow intensities for depth/elevation.
    Higher shadow = more elevated/prominent element.
    */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);    /* Subtle shadow */
    --shadow-md: 0 4px 8px rgba(0,0,0,0.4);    /* Medium shadow */
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.5);   /* Large shadow (modals, dropdowns) */
}

/*
============================================================================
SECTION 4: BODY STYLES
============================================================================
Base styles for the entire page.
*/
body {
    font-family: 'Inter', sans-serif;  /* Primary font from Google Fonts */
    background: var(--bg-primary);      /* Dark background */
    color: var(--text-primary);         /* Light text */
    min-height: 100vh;                  /* Full viewport height minimum */
    overflow: hidden;                   /* Prevents page scroll (chat scrolls instead) */
    line-height: 1.6;                   /* Comfortable line spacing */
    position: relative;                 /* For positioned children */
}

/*
============================================================================
SECTION 5: NETWORK BACKGROUND ANIMATION
============================================================================
The SVG element that contains the animated particle/network effect.
Positioned behind all content with z-index: -1.

TO DISABLE ANIMATION:
1. Remove the <svg id="bu_network-svg"> from research.html
2. Or set display: none here
*/
#bu_network-svg {
    position: fixed;                    /* Stays in place during scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;                        /* Behind all content */
    background: var(--bg-primary);      /* Fallback background color */
}

/*
============================================================================
SECTION 6: TOP HEADER BAR
============================================================================
The fixed bar at the top containing logo, buttons, and selectors.

HEIGHT: 60px (also referenced in .main-container calc)

TO CHANGE HEADER HEIGHT:
1. Modify height here
2. Update calc(100vh - 60px) in .main-container
============================================================================
*/
.header {
    height: 60px;                       /* Fixed header height */
    background: var(--bg-secondary);    /* Slightly lighter than body */
    backdrop-filter: blur(10px);        /* Blur effect for semi-transparent look */
    padding: 0 24px;                    /* Horizontal padding */
    display: flex;                      /* Flexbox layout */
    justify-content: space-between;     /* Space items across full width */
    align-items: center;                /* Vertically center items */
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;                   /* Sticks to top on scroll */
    top: 0;
    z-index: 100;                       /* Above other content */
    flex-shrink: 0;                     /* Don't shrink in flex container */
}

/*
LOGO SECTION
============
Contains logo image and site name text.

TO CHANGE LOGO SIZE:
- Modify width/height in .logo img below
- Or change the img width/height in research.html
*/
.logo {
    display: flex;
    align-items: center;
    gap: 12px;                          /* Space between image and text */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;                     /* Don't shrink */
}

.logo img {
    height: auto;                       /* Maintain aspect ratio */
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/*
HEADER CONTROLS
===============
Right side of header - buttons and dropdowns.
*/
.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;                          /* Space between controls */
    flex-shrink: 0;
}

/*
PROVIDER SELECTOR DROPDOWN
==========================
Styled select box with gradient background.

TO CHANGE PROVIDER BUTTON STYLE:
- Modify background, border-radius, padding here
*/
.provider-selector {
    background: var(--gradient-primary);  /* Red gradient background */
    color: white;
    border: 1px solid var(--primary-dark);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;          /* Smooth hover transition */
}

.provider-selector:hover {
    background: var(--gradient-secondary);
    border-color: var(--primary-light);
}

.provider-selector:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.2);  /* Focus ring */
}

/* Dropdown options styling */
.provider-selector option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.provider-selector option:disabled {
    color: var(--text-muted);
}

/*
MODEL SELECTOR DROPDOWN
=======================
Secondary dropdown for model selection.
Simpler styling than provider selector.
*/
.model-selector {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    min-width: 150px;                   /* Minimum width for readability */
}

.model-selector:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

.model-selector:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.1);
}

.model-selector option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/*
NEW CHAT BUTTON
===============
Button to start a fresh conversation.
*/
.new-chat-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;                           /* Space between icon and text */
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.new-chat-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/*
NAVIGATION LINK (Home icon)
===========================
*/
.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

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

/*
============================================================================
SECTION 6B: FLOATING NAVIGATION ELEMENTS
============================================================================
Modern floating UI design - replaces traditional header bar.
All elements are position: fixed and remain visible on scroll.
*/

/* CSS Variables for floating nav */
:root {
    --floating-z: 500;
    --floating-spacing: 16px;
    --floating-radius: 12px;
    --floating-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Hide old header (if still present) */
.header {
    display: none !important;
}

/* --- Brand Menu (Top-Left) --- */
.floating-brand-menu {
    position: fixed;
    top: var(--floating-spacing);
    left: var(--floating-spacing);
    z-index: var(--floating-z);
}

.brand-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--floating-radius);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    font-family: inherit;
}

.brand-menu-btn:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.brand-menu-btn img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.brand-menu-btn .brand-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.brand-menu-btn .fa-chevron-down {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.floating-brand-menu.open .fa-chevron-down {
    transform: rotate(180deg);
}

.brand-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--floating-radius);
    box-shadow: var(--floating-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    padding: 6px 0;
}

.floating-brand-menu.open .brand-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Settings Menu (Top-Right) --- */
.floating-settings-menu {
    position: fixed;
    top: var(--floating-spacing);
    right: var(--floating-spacing);
    z-index: var(--floating-z);
}

.settings-menu-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--floating-radius);
    cursor: pointer;
    backdrop-filter: blur(10px);
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.settings-menu-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.settings-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--floating-radius);
    box-shadow: var(--floating-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    padding: 6px 0;
}

.floating-settings-menu.open .settings-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Dropdown Items (shared) --- */
.brand-dropdown .dropdown-item,
.settings-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    font-family: inherit;
}

.brand-dropdown .dropdown-item:hover,
.settings-dropdown .dropdown-item:hover {
    background: var(--bg-tertiary);
}

.brand-dropdown .dropdown-divider,
.settings-dropdown .dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* --- LLM Controls (Top-Center-Right) --- */
.floating-llm-controls {
    position: fixed;
    top: var(--floating-spacing);
    right: 76px; /* settings btn (44) + spacing (16) + gap (16) */
    z-index: var(--floating-z);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--floating-radius);
    backdrop-filter: blur(10px);
}

.floating-select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.floating-select:hover,
.floating-select:focus {
    border-color: var(--accent);
}

.floating-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.floating-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.floating-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* --- Search Bar (Top-Center) --- */
.floating-search-container {
    position: fixed;
    top: var(--floating-spacing);
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--floating-z) - 1);
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
}

.floating-search-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 10px 10px 10px 20px;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
}

.floating-search-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.15);
}

.floating-search-wrapper .search-icon {
    color: var(--text-muted);
    margin-right: 12px;
    font-size: 1rem;
}

.floating-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.05rem;
    outline: none;
    font-family: inherit;
    min-width: 0;
    padding: 4px 0;
}

.floating-search-input::placeholder {
    color: var(--text-muted);
}

.floating-search-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    font-size: 1rem;
}

.floating-search-btn:hover {
    background: var(--primary-light);
}

/* --- Floating Nav Responsive --- */
@media (max-width: 900px) {
    .floating-search-container {
        max-width: 280px;
    }

    .floating-llm-controls {
        top: 70px;
        right: var(--floating-spacing);
    }

    .main-container {
        padding-top: 120px;
    }
}

@media (max-width: 600px) {
    .brand-menu-btn .brand-name {
        display: none;
    }

    .floating-search-container {
        top: 70px;
        left: var(--floating-spacing);
        right: var(--floating-spacing);
        transform: none;
        max-width: none;
        width: auto;
    }

    .floating-llm-controls {
        top: 120px;
    }

    .floating-select {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .main-container {
        padding-top: 170px;
    }
}

/*
============================================================================
SECTION 7: MAIN LAYOUT
============================================================================
The container below the header that holds the chat interface.
*/
.main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;                      /* Full viewport height */
    padding-top: 70px;                  /* Space for floating nav */
    overflow: hidden;
    width: 100%;
}

/* Legacy sidebar - completely hidden */
.sidebar {
    display: none !important;
}

/*
CHAT CONTAINER
==============
The centered chat area with max-width constraint.

TO CHANGE CHAT WIDTH:
- Modify max-width value below
- Wider = more horizontal space for messages
*/
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 900px;                   /* Maximum width - centered */
    margin: 0 auto;                     /* Center horizontally */
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
}

/*
============================================================================
SECTION 8: WELCOME SCREEN
============================================================================
The initial screen shown before any messages.
Hidden after first message via JavaScript.
*/
.welcome-screen {
    flex: 1;
    display: flex;
    align-items: center;                /* Center vertically */
    justify-content: center;            /* Center horizontally */
    padding: 40px;
}

.welcome-content {
    text-align: center;
    max-width: 600px;
}

/* Welcome icon styling (if using Font Awesome) */
.welcome-icon {
    font-size: 4rem;
    color: var(--accent);
    margin-bottom: 24px;
    display: block;
}

.welcome-content h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.welcome-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 32px;
}

/*
FEATURE ITEMS
=============
The three feature icons shown on welcome screen.
*/
.welcome-features {
    display: flex;
    justify-content: center;
    gap: 32px;                          /* Space between features */
    margin-top: 32px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.feature-item i {
    font-size: 1.5rem;
    color: var(--accent);               /* Red icons */
}

/*
============================================================================
SECTION 9: CHAT MESSAGES AREA
============================================================================
The scrollable container where chat messages appear.
*/
.chat-messages {
    flex: 1;
    overflow-y: auto;                   /* Vertical scroll */
    overflow-x: hidden;                 /* No horizontal scroll */
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;                          /* Space between messages */
    scroll-behavior: smooth;            /* Smooth scroll animation */
    min-height: 0;                      /* Required for flex scroll */
}

/*
MESSAGE CONTAINER
=================
Each message has avatar + content.
User messages are reversed (avatar on right).
*/
.message {
    display: flex;
    gap: 12px;
    animation: fadeInUp 0.3s ease;      /* Fade-in animation */
}

.message.user {
    flex-direction: row-reverse;        /* Avatar on right for user */
}

/*
MESSAGE AVATAR
==============
The circular avatar icon/image next to messages.
*/
.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;                 /* Circular */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;                     /* Don't shrink */
    font-size: 0.9rem;
}

.message.assistant .message-avatar {
    background: transparent;
    color: var(--text-primary);
}

.message.user .message-avatar {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/*
MESSAGE CONTENT BUBBLE
======================
The actual message text container.

TO CHANGE MESSAGE WIDTH:
- Modify max-width percentage below
*/
.message-content {
    background: var(--ai-message-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 70%;                     /* Maximum width of bubble */
    line-height: 1.6;
    position: relative;                 /* For copy button positioning */
}

/*
COPY MESSAGE BUTTON
===================
Appears on hover to copy message text.
*/
.copy-message-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    opacity: 0;                         /* Hidden by default */
    transition: all 0.2s ease;
    font-size: 0.85rem;
    color: var(--text-secondary);
    z-index: 10;
}

.message-content:hover .copy-message-btn {
    opacity: 1;                         /* Show on hover */
}

.copy-message-btn:hover {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--accent);
    transform: scale(1.05);
}

.copy-message-btn.copied {
    color: var(--success);
    border-color: var(--success);
}

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

/* Duplicate selector - user avatar (second declaration) */
.message.user .message-avatar {
    background: transparent;
    color: var(--text-primary);
}

/*
MESSAGE TEXT STYLING
====================
*/
.message-content p {
    margin: 0 0 8px 0;
}

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

/*
CODE STYLING IN MESSAGES
========================
Inline code: Single backticks `code`
Code blocks: Triple backticks ```code```
*/
.message-content code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* Code blocks (pre > code) */
.message-content pre {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;                   /* Horizontal scroll for long lines */
    overflow-y: hidden;
    margin: 8px 0;
    max-width: 100%;
    min-height: 40px;                   /* Prevent flicker during streaming */
}

.message-content pre code {
    background: none;                   /* Remove inline code background */
    padding: 0;
    display: block;
    white-space: pre;                   /* Preserve whitespace */
    word-wrap: normal;
    overflow-wrap: normal;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-tertiary);
}

/* Code block scrollbar styling (WebKit browsers) */
.message-content pre::-webkit-scrollbar {
    height: 8px;
}

.message-content pre::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.message-content pre::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.message-content pre::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/*
TYPING INDICATOR
================
Three animated dots shown while AI is "thinking".

TO CHANGE DOT COLOR:
- Modify background in .typing-dot
*/
.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 8px 0;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);          /* Red dots */
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/*
JUMP TO BOTTOM BUTTON
=====================
Floating button that appears when user scrolls up.
*/
.jump-to-bottom {
    position: absolute;
    bottom: 80px;
    right: 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;                 /* Circular */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all 0.2s ease;
    z-index: 10;
}

.jump-to-bottom:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(201, 42, 42, 0.4);
}

.jump-to-bottom.hidden {
    display: none;
}

/*
============================================================================
SECTION 10: CHAT INPUT AREA
============================================================================
The bottom section with options and text input.
*/
.chat-input-area {
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    background: var(--bg-secondary);
    flex-shrink: 0;                     /* Don't shrink */
}

/*
CHAT OPTIONS (Checkboxes)
=========================
The row of options above the input field.
*/
.chat-options {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    flex-wrap: wrap;                    /* Wrap on small screens */
    align-items: center;
}

.option-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    user-select: none;                  /* Prevent text selection */
}

.option-checkbox:hover {
    color: var(--text-primary);
}

.option-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);        /* Red checkbox color */
}

.option-checkbox span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Number input option (Top K) */
.option-number {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.option-number input[type="number"] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    width: 60px;
    font-size: 0.9rem;
    outline: none;
}

.option-number input[type="number"]:focus {
    border-color: var(--accent);
}

/*
ATTACHMENT PREVIEW (Images + PDFs)
==================================
Preview container that appears when user attaches a file.
Supports both images (thumbnail) and PDFs (icon).
Shows filename, metadata, and remove button.
*/
.attachment-preview-container {
    padding: 0 24px;
    margin-bottom: 12px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border);
    border-radius: 12px;
    margin-left: 24px;
    margin-right: 24px;
    padding: 12px;
}

.attachment-preview-container.hidden {
    display: none;
}

.attachment-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.attachment-preview-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.attachment-preview-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 10px;
}

.attachment-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

/* Individual attachment item */
.attachment-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    transition: border-color 0.2s ease;
    max-width: 200px;
}

.attachment-preview-item:hover {
    border-color: var(--accent);
}

/* Image thumbnail preview */
.attachment-preview-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* PDF icon preview */
.attachment-preview-pdf-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent) 0%, #8b1a1a 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attachment-preview-pdf-icon i {
    font-size: 1.2rem;
    color: white;
}

/* PCAP network capture icon preview */
.attachment-preview-pcap-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attachment-preview-pcap-icon i {
    font-size: 1.2rem;
    color: white;
}

/* PCAP stream selector dropdown */
.pcap-stream-selector {
    width: 100%;
    padding: 4px 8px;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.pcap-stream-selector:focus {
    outline: none;
    border-color: var(--accent);
}

.pcap-stream-selector:hover {
    border-color: var(--accent);
}

.pcap-stream-selector option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.attachment-preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attachment-preview-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-preview-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.attachment-preview-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.attachment-preview-remove:hover {
    background: var(--error);
    color: white;
}

/*
MESSAGE ATTACHMENTS (Images + PDFs in chat)
===========================================
Styles for attachment indicators in chat messages.
*/
.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.message-attachment {
    margin-bottom: 8px;
}

.message-image-attachment {
    display: inline-block;
}

.message-image-thumbnail {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.message-image-thumbnail:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

/* PDF indicator in message */
.message-pdf-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(201, 42, 42, 0.15);
    border: 1px solid rgba(201, 42, 42, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
}

.message-pdf-indicator i {
    color: var(--accent);
    font-size: 1.1rem;
}

.message-pdf-indicator .pdf-name {
    color: var(--text-primary);
    font-weight: 500;
}

.message-pdf-indicator .pdf-pages {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* PCAP indicator in message */
.message-pcap-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
}

.message-pcap-indicator i {
    color: #2ecc71;
    font-size: 1.1rem;
}

.message-pcap-indicator span {
    color: var(--text-primary);
    font-weight: 500;
}

.message.user .message-attachment {
    text-align: right;
}

/*
INPUT WRAPPER
=============
Container for attach button, textarea, and send button.
*/
.input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    transition: border-color 0.2s ease;
}

.input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.1);  /* Focus ring */
}

/*
ATTACH BUTTON (Paperclip)
=========================
Opens file picker for PDFs/images.
*/
.attach-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

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

/* Active state when image is attached */
.attach-btn.has-attachment {
    color: var(--accent);
    background: rgba(201, 42, 42, 0.1);
    position: relative;
}

.attach-btn.has-attachment::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
}

/*
FILE CONTEXT INDICATOR
======================
Shows when uploaded files are persisted as context for the chat session
*/
.file-context-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 12px;
    font-size: 0.75rem;
    color: #4caf50;
    margin-right: 8px;
}

.file-context-indicator.hidden {
    display: none;
}

.file-context-indicator i {
    font-size: 0.7rem;
}

.file-context-indicator span {
    font-weight: 600;
}

.clear-context-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-context-btn:hover {
    opacity: 1;
    color: var(--error, #dc3545);
}

.clear-context-btn i {
    font-size: 0.65rem;
}

/*
CHAT INPUT TEXTAREA
===================
The main text input for typing messages.

TO CHANGE MAX HEIGHT:
- Modify max-height value below
*/
#chatInput {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    font-size: 1rem;
    resize: none;                       /* No manual resize */
    max-height: 120px;                  /* Maximum height before scroll */
    outline: none;
    font-family: inherit;
    line-height: 1.5;
}

#chatInput::placeholder {
    color: var(--text-muted);
}

/*
SEND BUTTON
===========
Sends the message. Changes to stop button during streaming.
*/
.send-btn {
    background: var(--accent);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
}

.send-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/*
STOP BUTTON STYLING
===================
When streaming, send button shows stop icon with pulsing animation.
:has() selector checks if button contains stop icon.
*/
.send-btn:has(.fa-stop) {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    animation: pulse-red 2s infinite;
}

.send-btn:has(.fa-stop):hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: scale(1.1);
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

/*
============================================================================
SECTION 11: LOADING INDICATOR
============================================================================
Full-screen overlay with spinner (shown during long operations).
*/
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   /* Center on screen */
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent);    /* Red spinning part */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

#loadingText {
    color: var(--text-primary);
    font-weight: 500;
}

/*
CHAT MESSAGES SCROLLBAR STYLING
===============================
Custom scrollbar for chat area (WebKit browsers).
*/
.chat-messages::-webkit-scrollbar {
    width: 10px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 5px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
    border: 2px solid var(--bg-primary);
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/*
============================================================================
SECTION 12: ANIMATIONS
============================================================================
*/

/* Fade in from bottom - used for new messages */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
============================================================================
SECTION 13: TOAST NOTIFICATIONS
============================================================================
Popup notifications in top-right corner.
Types: success, error, info
*/
.toast {
    position: fixed;
    top: 80px;                          /* Below header */
    right: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 300px;
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    animation: slideInRight 0.3s ease;
}

.toast.error {
    border-left: 4px solid var(--error);     /* Red left border */
}

.toast.success {
    border-left: 4px solid var(--success);   /* Green left border */
}

.toast.info {
    border-left: 4px solid var(--accent);    /* Accent left border */
}

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

/*
============================================================================
SECTION 14: SEARCH ENGINE TAB
============================================================================
Alternative search interface (hidden by default).
*/
.tab-content {
    padding: 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin: 16px;
}

.tab-content.hidden {
    display: none;
}

.search-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 250px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
}

.search-input:focus {
    border-color: var(--accent);
}

/* Generic button styling */
.btn {
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--surface-hover);
}

/*
============================================================================
SECTION 15: RESPONSIVE DESIGN
============================================================================
Adjustments for different screen sizes.

BREAKPOINTS:
- 768px: Tablets and smaller
- 480px: Mobile phones
*/
@media (max-width: 768px) {
    .header {
        padding: 0 16px;
    }

    .chat-container {
        max-width: 100%;
    }

    .chat-input-area {
        padding: 12px 16px;
    }

    .chat-options {
        font-size: 0.85rem;
        gap: 12px;
    }

    .message-content {
        max-width: 85%;                 /* Wider bubbles on mobile */
    }

    .welcome-features {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 0.9rem;
    }

    .provider-selector,
    .model-selector {
        font-size: 0.85rem;
        padding: 6px 12px;
        min-width: 100px;
    }

    .header-controls {
        gap: 8px;
    }

    .chat-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

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

/*
============================================================================
SECTION 16: UTILITY CLASSES
============================================================================
Reusable helper classes.
*/
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 16px;
}

.mb-4 {
    margin-bottom: 16px;
}

/*
STREAMING CURSOR
================
Blinking cursor shown while AI is typing.
*/
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: var(--accent);
    margin-left: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/*
CHARACTER COUNTER
=================
Shows input length above the chat input.
*/
.char-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    padding: 0 8px 4px 0;
    transition: color 0.2s ease;
}

/*
THINKING INDICATOR
==================
Animated dots shown while waiting for AI response.
*/
.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
}

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: thinking-bounce 1.4s ease-in-out infinite;
}

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

@keyframes thinking-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/*
KEYBOARD FOCUS INDICATORS
=========================
Enhanced focus styles for accessibility.
*/
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(201, 42, 42, 0.2);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.15);
}

.attach-btn:focus-visible,
.send-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transform: scale(1.05);
}

.new-chat-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--accent);
    color: white;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/*
DRAG & DROP ZONE
================
Visual overlay shown when dragging files over the chat area.
*/
.drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(201, 42, 42, 0.1);
    border: 3px dashed var(--accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    transition: all 0.2s ease;
}

.drop-zone.hidden {
    display: none;
}

.drop-zone.active {
    background: rgba(201, 42, 42, 0.2);
    border-color: var(--primary-light);
}

.drop-zone-content {
    text-align: center;
    color: var(--accent);
}

.drop-zone-content i {
    font-size: 3rem;
    margin-bottom: 12px;
    display: block;
    animation: bounce-gentle 1s ease-in-out infinite;
}

.drop-zone-content span {
    font-size: 1.2rem;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.drop-zone-content small {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/*
KEYBOARD SHORTCUTS MODAL
========================
Modal showing available keyboard shortcuts.
*/
.shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.shortcuts-modal.hidden {
    display: none;
}

.shortcuts-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

.shortcuts-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    border-radius: 12px 12px 0 0;
}

.shortcuts-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.shortcuts-modal-header h3 i {
    color: var(--accent);
}

.shortcuts-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

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

.shortcuts-modal-body {
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.shortcut-item:last-child {
    border-bottom: none;
}

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

kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    box-shadow: 0 2px 0 var(--border);
}

/*
COPY CODE BUTTON
================
Button to copy code block contents.
*/
.code-block-wrapper {
    position: relative;
}

.copy-code-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

pre:hover .copy-code-btn,
.code-block-wrapper:hover .copy-code-btn {
    opacity: 1;
}

.copy-code-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.copy-code-btn.copied {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/*
MATH RENDERING (KaTeX)
======================
Styles for LaTeX math expressions.
*/
.math-block {
    display: block;
    text-align: center;
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-family: 'KaTeX_Main', 'Times New Roman', serif;
    font-size: 1.1rem;
    overflow-x: auto;
}

.math-inline {
    font-family: 'KaTeX_Main', 'Times New Roman', serif;
}

.math-error {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* KaTeX display mode styling */
.katex-display {
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow-x: auto;
}

.katex {
    font-size: 1.1em;
}

/*
SEARCH RESULT SELECTION
=======================
Checkboxes and controls for selecting which results to use as context.
*/
.search-results-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.search-select-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.search-select-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.search-selected-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Search Groups - for accumulated searches */
.search-group {
    border-bottom: 2px solid var(--border);
    margin-bottom: 8px;
}

.search-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.search-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    font-size: 0.85rem;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.search-group-header i {
    color: var(--accent);
    font-size: 0.8rem;
}

.search-group-query {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-group-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-group-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-group-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.search-group-results {
    /* Container for results within a group */
}

.search-result-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background: var(--bg-tertiary);
}

.search-result-item.selected {
    background: rgba(201, 42, 42, 0.05);
    border-left: 3px solid var(--accent);
}

.search-result-item.highlighted {
    background: rgba(201, 42, 42, 0.15);
    animation: highlight-pulse 0.5s ease;
}

@keyframes highlight-pulse {
    0%, 100% { background: rgba(201, 42, 42, 0.15); }
    50% { background: rgba(201, 42, 42, 0.25); }
}

.search-result-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.search-result-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.result-number {
    color: var(--accent);
    font-weight: 600;
    margin-right: 4px;
}

/*
SEARCH HISTORY DROPDOWN
=======================
Dropdown showing recent searches when focusing the search input.
*/
.search-history-dropdown {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.search-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.search-history-header button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.search-history-header button:hover {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.search-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-history-item:hover {
    background: var(--bg-tertiary);
}

.search-history-item i {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.search-history-item span {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-history-item small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/*
SETTINGS MODAL
==============
Modal for system prompts and other settings.
*/
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.settings-modal.hidden {
    display: none;
}

.settings-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

.settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.settings-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-modal-header h3 i {
    color: var(--accent);
}

.settings-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

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

.settings-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.settings-section {
    margin-bottom: 24px;
}

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

.settings-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.settings-hint {
    margin: 0 0 16px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.settings-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 16px;
    cursor: pointer;
}

.settings-select:focus {
    outline: none;
    border-color: var(--accent);
}

.settings-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 16px;
}

.settings-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.settings-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.settings-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.settings-btn.primary {
    background: var(--accent);
    color: white;
    border: none;
}

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

.settings-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

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

/*
SETTINGS BUTTON (Header)
========================
*/
button.settings-btn#settingsBtn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

button.settings-btn#settingsBtn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent);
}

/*
CITATION LINKS
==============
Clickable citation links in AI responses.
*/
.citation-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.citation-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

/*
FILE UPLOAD DISPLAY
===================
Shows attached file preview (currently not heavily used).
*/
.attached-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(201, 42, 42, 0.15);
    border: 1px solid rgba(201, 42, 42, 0.4);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.attached-file-remove {
    color: var(--error);
    cursor: pointer;
    font-size: 1rem;
}

/*
============================================================================
SECTION 17: AIRPLANE TAKEOFF ANIMATION
============================================================================
Fun animation when sending messages.
The airplane flies up from the send button.

TO DISABLE:
- Comment out triggerAirplaneTakeoff() call in research.js
============================================================================
*/

/* Airplane element */
.airplane-animation {
    position: fixed;
    width: 60px;
    height: 60px;
    pointer-events: none;               /* Click-through */
    z-index: 9999;
    transition: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Smoke trail particles */
.smoke-trail {
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, rgba(150, 150, 150, 0) 70%);
    pointer-events: none;
    z-index: 9998;
}

@keyframes smoke-dissipate {
    0% {
        transform: scale(0.5);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.smoke-puff {
    animation: smoke-dissipate 1.5s ease-out forwards;
}

/*
AIRPLANE TRAJECTORIES
=====================
Five different flight paths for variety.
*/

/* Trajectory 1: Straight ascent */
@keyframes takeoff-straight {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(10px, -50vh) rotate(0deg) scale(1.15);
        opacity: 1;
    }
    100% {
        transform: translate(20px, -120vh) rotate(0deg) scale(0.8);
        opacity: 0;
    }
}

/* Trajectory 2: Curve left */
@keyframes takeoff-curve-left {
    0% {
        transform: translate(0, 0) rotate(-5deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: translate(-15px, -30vh) rotate(-15deg) scale(1.1);
        opacity: 1;
    }
    70% {
        transform: translate(-5px, -70vh) rotate(-10deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(10px, -120vh) rotate(-20deg) scale(0.7);
        opacity: 0;
    }
}

/* Trajectory 3: Curve right */
@keyframes takeoff-curve-right {
    0% {
        transform: translate(0, 0) rotate(-5deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: translate(30px, -30vh) rotate(-8deg) scale(1.1);
        opacity: 1;
    }
    70% {
        transform: translate(50px, -70vh) rotate(-15deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(40px, -120vh) rotate(-22deg) scale(0.7);
        opacity: 0;
    }
}

/* Trajectory 4: Zigzag */
@keyframes takeoff-zigzag {
    0% {
        transform: translate(0, 0) rotate(-5deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translate(-20px, -25vh) rotate(-12deg) scale(1.08);
        opacity: 1;
    }
    50% {
        transform: translate(20px, -50vh) rotate(-8deg) scale(1.12);
        opacity: 1;
    }
    75% {
        transform: translate(-10px, -75vh) rotate(-16deg) scale(0.95);
        opacity: 1;
    }
    100% {
        transform: translate(15px, -120vh) rotate(-20deg) scale(0.75);
        opacity: 0;
    }
}

/* Trajectory 5: Spiral */
@keyframes takeoff-spiral {
    0% {
        transform: translate(0, 0) rotate(-5deg) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(25px, -20vh) rotate(5deg) scale(1.05);
        opacity: 1;
    }
    40% {
        transform: translate(-15px, -40vh) rotate(-18deg) scale(1.1);
        opacity: 1;
    }
    60% {
        transform: translate(30px, -60vh) rotate(-5deg) scale(1.05);
        opacity: 1;
    }
    80% {
        transform: translate(0px, -80vh) rotate(-20deg) scale(0.9);
        opacity: 1;
    }
    100% {
        transform: translate(20px, -120vh) rotate(-25deg) scale(0.7);
        opacity: 0;
    }
}

/* Apply trajectory classes */
.airplane-straight {
    animation: takeoff-straight var(--duration, 2s) ease-in-out forwards;
}

.airplane-curve-left {
    animation: takeoff-curve-left var(--duration, 2.2s) ease-in-out forwards;
}

.airplane-curve-right {
    animation: takeoff-curve-right var(--duration, 2.2s) ease-in-out forwards;
}

.airplane-zigzag {
    animation: takeoff-zigzag var(--duration, 2.5s) ease-in-out forwards;
}

.airplane-spiral {
    animation: takeoff-spiral var(--duration, 2.8s) ease-in-out forwards;
}

/*
============================================================================
SECTION 18: PDF UPLOAD MODAL
============================================================================
Popup dialog for uploading PDFs with name/description/skip pages.
Three views: Form, Progress, Error
============================================================================
*/

/* Modal Overlay - Dark background */
.pdf-upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);    /* 75% black overlay */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.pdf-upload-modal-overlay.hidden {
    display: none;
}

/* Modal Container */
.pdf-upload-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
    overflow: hidden;
}

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

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

/* Modal Header */
.pdf-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.pdf-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-modal-header h3 i {
    color: var(--accent);
}

.pdf-modal-header.error h3 {
    color: var(--error);
}

.pdf-modal-header.error h3 i {
    color: var(--error);
}

/* Modal Body */
.pdf-modal-body {
    padding: 24px;
}

/* Filename Display */
.pdf-filename-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pdf-filename-display i {
    color: var(--accent);
}

.pdf-filename-display span {
    word-break: break-all;              /* Break long filenames */
}

/* Form Groups */
.pdf-form-group {
    margin-bottom: 20px;
}

.pdf-form-group:last-child {
    margin-bottom: 0;
}

.pdf-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.pdf-form-group .required {
    color: var(--error);                /* Red asterisk */
}

.pdf-form-group .optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.pdf-form-group input[type="text"],
.pdf-form-group input[type="number"],
.pdf-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
}

.pdf-form-group input[type="number"] {
    width: 100px;
    resize: none;
}

.pdf-form-group input[type="text"]:focus,
.pdf-form-group input[type="number"]:focus,
.pdf-form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.15);
}

.pdf-form-group input[type="text"]::placeholder,
.pdf-form-group input[type="number"]::placeholder,
.pdf-form-group textarea::placeholder {
    color: var(--text-muted);
}

.pdf-form-group input[type="text"].error,
.pdf-form-group input[type="number"].error,
.pdf-form-group textarea.error {
    border-color: var(--error);
}

.pdf-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Modal Footer */
.pdf-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg-tertiary);
}

/* Progress Container */
.pdf-progress-container {
    margin-bottom: 20px;
}

.pdf-progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.pdf-progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    width: 0%;
    animation: progressIndeterminate 2s ease-in-out infinite;
}

@keyframes progressIndeterminate {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 60%;
        margin-left: 20%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

.pdf-progress-status {
    text-align: center;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.pdf-progress-details {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Error Message */
.pdf-error-message {
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: var(--error);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Modal View States */
.pdf-modal-form.hidden,
.pdf-modal-progress.hidden,
.pdf-modal-error.hidden {
    display: none;
}

/*
============================================================================
SECTION 19: WEB SEARCH PANEL
============================================================================
Google-style search interface with two states:
1. Centered search bar (initial)
2. Results panel with top search bar

TO CHANGE SEARCH PANEL HEIGHT:
- Modify max-height in .search-results-panel
============================================================================
*/

/* Search Panel Container */
.search-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

/* Centered Search (Google-style homepage look) */
.search-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    transition: all 0.3s ease;
}

.search-centered.hidden {
    display: none;
}

/* Search Bar Wrapper */
.search-bar-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 24px;                /* Pill shape */
    padding: 12px 20px;
    width: 100%;
    max-width: 600px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.15);
}

.search-bar-wrapper.compact {
    padding: 8px 16px;
    max-width: 100%;
    border-radius: 12px;
}

.search-icon {
    color: var(--text-muted);
    margin-right: 12px;
    font-size: 1rem;
}

.web-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
}

.web-search-input::placeholder {
    color: var(--text-muted);
}

.web-search-btn {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.web-search-btn:hover {
    background: #a82424;
}

/* Top Search Bar (when results exist) */
.search-bar-top {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.search-bar-top.hidden {
    display: none;
}

/* Search Results Panel */
.search-results-panel {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    height: var(--search-panel-height, 300px);  /* Dynamic height via JS */
    min-height: 150px;
    max-height: calc(100vh - 250px);    /* Leave room for chat input */
    display: flex;
    flex-direction: column;
    transition: height 0.1s ease;
    position: relative;
}

.search-results-panel.hidden {
    display: none;
}

.search-results-panel.collapsed {
    max-height: 48px;                   /* Just header when collapsed */
    overflow: hidden;
}

.search-results-panel.collapsed .search-results-body {
    display: none;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.results-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: 500;
}

.results-title i {
    color: var(--accent);
}

#searchQueryLabel {
    color: var(--accent);
    font-style: italic;
}

.results-actions {
    display: flex;
    gap: 8px;
}

.results-toggle,
.results-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.results-toggle:hover,
.results-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--accent);
}

.results-clear:hover {
    color: var(--error);
    border-color: var(--error);
}

/* Collapsed state toggle icon rotation */
.search-results-panel.collapsed .results-toggle i {
    transform: rotate(180deg);
}

.results-toggle i {
    transition: transform 0.2s ease;
}

/* Search Results Body (scrollable) */
.search-results-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px 20px 24px;  /* Extra bottom padding for resize handle */
    min-height: 0;
}

/* Resize Handle for Search Results Panel */
.search-results-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    user-select: none;
}

.search-results-resize-handle:hover {
    background: var(--accent);
}

.search-results-resize-handle i {
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-results-resize-handle:hover i {
    color: white;
}

/* Active resize state */
.search-results-panel.resizing {
    transition: none;
    user-select: none;
}

.search-results-panel.resizing .search-results-resize-handle {
    background: var(--accent);
}

/* Individual Search Result */
.search-result-item {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent);  /* Red left border */
    transition: background 0.2s ease;
}

.search-result-item:last-child {
    margin-bottom: 0;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-result-title {
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-result-title a {
    color: var(--accent);
    text-decoration: none;
}

.search-result-title a:hover {
    text-decoration: underline;
}

.search-result-url {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;            /* Truncate long URLs */
}

.search-result-snippet {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Loading state for search */
.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-secondary);
    gap: 12px;
}

.search-loading .spinner {
    width: 20px;
    height: 20px;
}

/* Responsive adjustments for search panel */
@media (max-width: 768px) {
    .search-centered {
        padding: 24px 16px;
    }

    .search-bar-wrapper {
        padding: 10px 16px;
    }

    .search-results-panel {
        max-height: 250px;
    }

    .search-results-body {
        padding: 12px 16px;
    }
}

/*
============================================================================
SECTION 19B: ENHANCED SEARCH RESULTS PANEL
============================================================================
Advanced features: dock positions, draggable, favicons, highlighting,
filters, sorting, keyboard navigation, quick actions, etc.
*/

/* Dock positions */
.search-results-panel.docked-left {
    position: fixed;
    left: 0;
    top: 120px;
    width: 380px;
    height: calc(100vh - 200px);
    max-height: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.search-results-panel.docked-right {
    position: fixed;
    right: 0;
    top: 120px;
    width: 380px;
    height: calc(100vh - 200px);
    max-height: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.search-results-panel.docked-left .resize-right,
.search-results-panel.docked-right .resize-right {
    display: flex;
}

.search-results-panel.docked-left .resize-bottom,
.search-results-panel.docked-right .resize-bottom {
    display: none;
}

/* Draggable header */
.search-results-header {
    cursor: grab;
    user-select: none;
}

.search-results-header:active {
    cursor: grabbing;
}

.search-results-panel.dragging {
    opacity: 0.9;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Dock buttons */
.dock-buttons {
    display: flex;
    gap: 2px;
    margin-right: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 2px;
}

.dock-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

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

.dock-btn.active {
    background: var(--accent);
    color: white;
}

/* Minimize button */
.results-minimize {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.results-minimize:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* Minimized bar */
.search-minimized-bar {
    display: flex;
    justify-content: center;
    padding: 8px;
}

.search-minimized-bar.hidden {
    display: none;
}

.minimized-restore-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.minimized-restore-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.minimized-count {
    font-weight: 600;
    color: var(--accent);
}

.minimized-restore-btn:hover .minimized-count {
    color: white;
}

/* Toolbar */
.search-results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Sort/Filter dropdowns */
.sort-dropdown,
.filter-dropdown {
    position: relative;
}

.sort-menu,
.filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 200;
    min-width: 150px;
    overflow: hidden;
}

.sort-menu.hidden,
.filter-menu.hidden {
    display: none;
}

.sort-option,
.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    transition: all 0.2s ease;
}

.sort-option:hover,
.filter-option:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.sort-option.active,
.filter-option.active {
    background: var(--accent);
    color: white;
}

.filter-option .domain-count {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Selection badge */
.selection-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--accent);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Keyboard hint */
.keyboard-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.6;
}

/* Right resize handle */
.resize-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    transition: background 0.2s ease;
}

.resize-right:hover {
    background: var(--accent);
}

.resize-right i {
    font-size: 10px;
    color: var(--text-muted);
}

.resize-right:hover i {
    color: white;
}

/* Enhanced search result item */
.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.search-result-item.selected {
    border-left-color: var(--accent);
    background: rgba(201, 42, 42, 0.1);
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.search-result-item.keyboard-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Checkbox styling */
.search-result-checkbox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 2px;
}

.search-result-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Result content */
.search-result-content {
    flex: 1;
    min-width: 0;
}

/* Favicon and title */
.search-result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 4px;
}

.result-favicon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 2px;
}

.result-favicon-placeholder {
    width: 16px;
    height: 16px;
    background: var(--bg-secondary);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
}

.result-number {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}

.search-result-title a {
    color: var(--accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-title a:hover {
    text-decoration: underline;
}

/* Result type badge */
.result-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.result-type-badge.type-news {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.result-type-badge.type-wiki {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.result-type-badge.type-blog {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.result-type-badge.type-academic {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* URL with freshness */
.search-result-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.search-result-url {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.freshness-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.freshness-badge.fresh {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

/* Snippet with highlighting */
.search-result-snippet {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.search-result-snippet mark {
    background: rgba(201, 42, 42, 0.3);
    color: var(--text-primary);
    padding: 0 2px;
    border-radius: 2px;
}

/* Expandable snippet */
.snippet-expanded {
    max-height: none;
}

.snippet-collapsed {
    max-height: 60px;
    overflow: hidden;
    position: relative;
}

.snippet-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, var(--bg-tertiary));
    pointer-events: none;
}

.search-result-item:hover .snippet-collapsed::after {
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.08));
}

/* Quick actions */
.result-quick-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-result-item:hover .result-quick-actions {
    opacity: 1;
}

.quick-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.quick-action-btn.pinned {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Pinned result indicator */
.search-result-item.pinned {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.search-result-item.pinned .result-number::before {
    content: '\f08d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 4px;
    color: #f59e0b;
}

/* Search groups styling */
.search-group {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.search-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.search-group-header i {
    color: var(--accent);
}

.search-group-query {
    color: var(--accent);
    font-weight: 500;
}

.search-group-count {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.search-group-remove {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.search-group-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.search-group-results {
    padding: 12px;
}

/* Collapsed panel hides toolbar too */
.search-results-panel.collapsed .search-results-toolbar {
    display: none;
}

/* Mobile responsive for enhanced features */
@media (max-width: 768px) {
    .dock-buttons {
        display: none;
    }

    .search-results-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .search-results-panel.docked-left,
    .search-results-panel.docked-right {
        position: relative;
        width: 100%;
        height: auto;
        max-height: 300px;
        border-radius: 0;
        box-shadow: none;
    }

    .result-quick-actions {
        opacity: 1;
    }
}

/*
============================================================================
SECTION 20: THEME TOGGLE
============================================================================
Button and styles for switching between dark and light themes.
*/
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.theme-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent);
}

.theme-toggle-btn i {
    transition: transform 0.3s ease;
}

body.light-theme .theme-toggle-btn i.fa-moon {
    display: inline;
}

body.light-theme .theme-toggle-btn i.fa-sun {
    display: none;
}

body:not(.light-theme) .theme-toggle-btn i.fa-moon {
    display: none;
}

body:not(.light-theme) .theme-toggle-btn i.fa-sun {
    display: inline;
}

/* Light theme specific overrides */
body.light-theme .header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.light-theme pre {
    background: #f0f0f0;
    border: 1px solid var(--border);
}

body.light-theme code {
    background: #e8e8e8;
}

body.light-theme .drop-zone {
    background: rgba(201, 42, 42, 0.05);
}

body.light-theme .search-history-dropdown,
body.light-theme .shortcuts-modal-content,
body.light-theme .settings-modal-content {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/*
============================================================================
SECTION 21: VOICE INPUT
============================================================================
Microphone button and recording state styles.
*/
.voice-input-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.voice-input-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.voice-input-btn.recording {
    color: var(--error);
    animation: pulse-recording 1s ease-in-out infinite;
}

@keyframes pulse-recording {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.voice-input-btn.recording::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--error);
    animation: ripple 1s ease-out infinite;
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.voice-not-supported {
    display: none;
}

/*
============================================================================
SECTION 22: PROMPT TEMPLATES
============================================================================
Quick-insert buttons for common prompts.
*/
.prompt-templates-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
    margin-bottom: 8px;
}

.prompt-template-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.prompt-template-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.prompt-template-btn i {
    font-size: 0.75rem;
}

/*
============================================================================
SECTION 23: ANALYTICS DASHBOARD
============================================================================
Stats and metrics display for usage tracking.
*/
.analytics-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.analytics-modal.hidden {
    display: none;
}

.analytics-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.analytics-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.analytics-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-modal-header h3 i {
    color: var(--accent);
}

.analytics-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.analytics-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
}

.analytics-card-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.analytics-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analytics-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.analytics-bar-label {
    width: 100px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: right;
}

.analytics-bar {
    flex: 1;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.analytics-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--primary-light));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.analytics-bar-value {
    width: 50px;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

/*
============================================================================
SECTION 24: ENHANCED MOBILE RESPONSIVENESS
============================================================================
Additional mobile-specific styles for better UX on small screens.
*/
@media (max-width: 600px) {
    /* Header adjustments */
    .header {
        padding: 8px 12px;
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .logo {
        flex: 1;
    }

    .logo img {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: 1rem;
    }

    .header-controls {
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
    }

    .new-chat-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    .provider-selector,
    .model-selector {
        max-width: 100px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .docs-btn {
        display: none;  /* Hide on mobile */
    }

    /* Settings and theme buttons */
    button.settings-btn#settingsBtn,
    .theme-toggle-btn {
        padding: 6px 8px;
    }

    /* Chat container */
    .chat-container {
        padding: 12px;
    }

    /* Messages */
    .message {
        padding: 12px;
        gap: 10px;
    }

    .message-avatar img {
        width: 36px;
        height: 36px;
    }

    .message-content {
        font-size: 0.95rem;
    }

    /* Input area */
    .chat-input-area {
        padding: 12px;
    }

    .input-wrapper {
        gap: 8px;
    }

    #chatInput {
        font-size: 0.95rem;
        padding: 10px 12px;
    }

    .send-btn,
    .attach-btn {
        width: 40px;
        height: 40px;
    }

    /* Attachment preview */
    .attachment-preview-container {
        padding: 10px;
    }

    .attachment-preview-item {
        width: 60px;
    }

    /* Search panel */
    .search-bar-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .web-search-input {
        width: 100%;
    }

    .web-search-btn {
        width: 100%;
    }

    /* Modals */
    .shortcuts-modal-content,
    .settings-modal-content,
    .analytics-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .shortcut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Character counter */
    .char-counter {
        font-size: 0.7rem;
    }

    /* Prompt templates - horizontal scroll on mobile */
    .prompt-templates-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .prompt-template-btn {
        flex-shrink: 0;
    }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
    .search-result-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .copy-code-btn {
        padding: 8px 12px;
        opacity: 1;  /* Always visible on touch devices */
    }

    .copy-message-btn {
        opacity: 1;
    }

    button, .btn {
        min-height: 44px;
    }
}

/*
================================================================================
SECTION 21: AUTHENTICATION UI
================================================================================
Styles for authentication button, user menu, login modal, and forms.
================================================================================
*/

/* Auth Button (Header) */
.auth-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-btn:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

.auth-btn i {
    font-size: 0.85rem;
}

/* User Menu (Logged in state) */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.user-menu-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
}

.user-display-name {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-btn .fa-chevron-down {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

/* User Dropdown Menu */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.dropdown-item:first-child {
    border-radius: 11px 11px 0 0;
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
}

.dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}

.dropdown-item.logout-btn {
    color: var(--error);
}

.dropdown-item.logout-btn i {
    color: var(--error);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Auth Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

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

.auth-modal-content {
    width: 90%;
    max-width: 420px;
    padding: 32px;
}

.auth-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-modal-header h2 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.auth-modal-header p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.auth-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

.auth-tab:hover:not(.active) {
    color: var(--text-primary);
}

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form.hidden {
    display: none;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.15);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.error-message {
    color: var(--error);
    font-size: 0.85rem;
    min-height: 20px;
}

.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.auth-submit-btn:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

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

/* Hide auth elements when auth is disabled */
[data-auth-disabled="true"] .auth-btn,
[data-auth-disabled="true"] .user-menu {
    display: none !important;
}

/* =============================================================================
   IMAGE SIDEBAR (LEFT PANEL)
   =============================================================================
   Collapsible left sidebar for displaying image search results.
   Shows thumbnails in a grid with selection checkboxes.
*/

/* Image Sidebar Container */
.image-sidebar {
    position: fixed;
    left: 0;
    top: 70px;
    bottom: 0;
    width: 280px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s ease, width 0.3s ease;
}

.image-sidebar.collapsed {
    transform: translateX(-240px);
}

.image-sidebar.collapsed .image-sidebar-body,
.image-sidebar.collapsed .image-sidebar-controls {
    opacity: 0;
    pointer-events: none;
}

.image-sidebar.collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

/* Sidebar Header */
.image-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    min-height: 48px;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-title i {
    color: var(--accent);
}

.image-count {
    background: var(--accent);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

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

.sidebar-toggle-btn i {
    transition: transform 0.3s ease;
}

/* Sidebar Controls */
.image-sidebar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    transition: opacity 0.2s;
}

.image-select-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.image-select-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.image-selected-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Sidebar Body (Image Grid) */
.image-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    transition: opacity 0.2s;
}

/* Image Grid */
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Image Item */
.image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    transition: all 0.2s;
}

.image-item:hover {
    transform: scale(1.02);
    border-color: var(--accent);
}

.image-item.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.3);
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
}

.image-item:hover .image-item-overlay {
    opacity: 1;
}

/* Image Checkbox */
.image-checkbox {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.image-item:hover .image-checkbox,
.image-item.selected .image-checkbox {
    opacity: 1;
}

.image-item.selected .image-checkbox {
    background: var(--accent);
    border-color: var(--accent);
}

.image-checkbox i {
    color: white;
    font-size: 0.7rem;
}

/* Image Title Overlay */
.image-item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    font-size: 0.65rem;
    color: white;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-item:hover .image-item-title {
    opacity: 1;
}

/* Empty State */
.image-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.image-sidebar-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.image-sidebar-empty span {
    font-size: 0.9rem;
}

/* Loading State */
.image-sidebar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

/* Image sidebar is now floating/independent - no layout shift for chat container */

/* =============================================================================
   LIGHTBOX MODAL
   =============================================================================
   Full-screen image preview with navigation.
*/

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

.lightbox-overlay.hidden {
    display: none;
}

.lightbox-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 85vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
    margin-top: 16px;
    text-align: center;
    color: white;
}

.lightbox-title {
    font-size: 1rem;
    margin-bottom: 8px;
    max-width: 600px;
    line-height: 1.4;
}

.lightbox-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s;
}

.lightbox-source:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px 12px;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 6px;
}

.lightbox-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 20px 16px;
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.2s;
}

.lightbox-nav:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

.lightbox-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responsive adjustments for image sidebar */
@media (max-width: 1024px) {
    .image-sidebar {
        width: 240px;
    }

    .image-sidebar.collapsed {
        transform: translateX(-200px);
    }

    .lightbox-prev {
        left: -50px;
    }

    .lightbox-next {
        right: -50px;
    }
}

@media (max-width: 768px) {
    /* On mobile, sidebar becomes a bottom sheet */
    .image-sidebar {
        width: 100%;
        height: auto;
        max-height: 45vh;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-right: none;
        border-top: 1px solid var(--border);
        transform: translateY(calc(100% - 48px));
        border-radius: 16px 16px 0 0;
    }

    .image-sidebar.collapsed {
        transform: translateY(calc(100% - 48px));
    }

    .image-sidebar:not(.collapsed) {
        transform: translateY(0);
    }

    .image-sidebar-header {
        border-radius: 16px 16px 0 0;
    }

    /* Sidebar is floating - no layout changes to chat container */

    .image-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lightbox-nav {
        padding: 12px;
        font-size: 1.2rem;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-content img {
        max-width: 95vw;
        max-height: 70vh;
    }
}

/* Light theme adjustments for image sidebar */
body.light-theme .image-sidebar {
    background: var(--bg-secondary);
}

body.light-theme .image-checkbox {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border);
}

body.light-theme .image-item.selected .image-checkbox {
    background: var(--accent);
    border-color: var(--accent);
}

body.light-theme .lightbox-overlay {
    background: rgba(0, 0, 0, 0.9);
}

/*
================================================================================
SECTION: FREE TIER USAGE INDICATOR
================================================================================
Shows remaining free searches and queries for anonymous users.
Positioned in the header area near the auth buttons.
*/

/* Usage indicator in dropdown */
#usageIndicator {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: default;
}

#usageIndicator.usage-indicator-dropdown {
    background: transparent;
    border: none;
}

#usageDivider {
    display: none;
}

#usageIndicator .usage-icon {
    color: var(--accent);
    font-size: 0.8rem;
}

#usageIndicator #usageText {
    color: var(--text-secondary);
    font-weight: 500;
}

#usageIndicator.usage-low {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

#usageIndicator.usage-low #usageText {
    color: var(--warning);
}

#usageIndicator.usage-exhausted {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

#usageIndicator.usage-exhausted #usageText {
    color: var(--error);
}

/*
================================================================================
SECTION: UPGRADE MODAL
================================================================================
Modal displayed when free tier limits are reached.
Prompts users to sign up or login for unlimited access.
*/

.upgrade-modal-content {
    max-width: 480px;
    text-align: center;
}

.upgrade-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.upgrade-icon i {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.upgrade-modal-content h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.upgrade-message {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 20px;
}

.usage-summary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.usage-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.usage-bar:last-child {
    margin-bottom: 0;
}

.usage-label {
    flex: 0 0 100px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.usage-progress {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.usage-count {
    flex: 0 0 50px;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.upgrade-benefits {
    text-align: left;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.upgrade-benefits h3 {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.upgrade-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upgrade-benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.upgrade-benefits li:last-child {
    margin-bottom: 0;
}

.upgrade-benefits li i {
    color: var(--success);
    font-size: 0.75rem;
}

.upgrade-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.upgrade-actions .btn {
    flex: 1;
    max-width: 180px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.upgrade-actions .btn-primary {
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    color: var(--text-primary);
}

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

.upgrade-actions .btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--primary));
    border: none;
    color: white;
}

.upgrade-actions .btn-accent:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.reset-notice {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 8px;
}

/* Light theme adjustments */
body.light-theme #usageIndicator {
    background: var(--bg-secondary);
}

body.light-theme .upgrade-modal-content {
    background: var(--bg-primary);
}

body.light-theme .usage-summary,
body.light-theme .upgrade-benefits {
    background: var(--bg-secondary);
}

/*
================================================================================
END OF STYLESHEET
================================================================================
*/