/**
 * Pure Email Design System - Entry Point
 *
 * This is the main entry point for the design system.
 * Import this file in main.js to load the entire design system.
 *
 * Import order is critical:
 * 1. Tokens (primitive values)
 * 2. Themes (semantic mappings)
 * 3. Base styles (resets, globals)
 * 4. Layout styles
 * 5. Component styles
 */

/* ========================================
   1. TOKENS - Primitive Design Values
   Load all design tokens first
   ======================================== */

/**
 * Color Tokens - Pure Email Design System
 *
 * This file contains:
 * 1. Primitive colors - Base palette (DO NOT use directly in components)
 * 2. These are used by theme files (theme-dark.css, theme-light.css)
 *
 * Always use semantic tokens from themes instead of primitives
 */

:root {
  /* ========================================
     PRIMITIVE COLORS - Grayscale
     Optimized for dark mode with extra dark tones
     ======================================== */

  /* Ultra dark tones (for dark theme backgrounds) */
  --color-gray-950: #0a0a0a;
  --color-gray-900: #0f0f0f;
  --color-gray-850: #151515;
  --color-gray-800: #1a1a1a;
  --color-gray-750: #1f1f1f;

  /* Dark tones (for dark theme UI elements) */
  --color-gray-700: #252525;
  --color-gray-600: #2a2a2a;
  --color-gray-500: #3a3a3a;
  --color-gray-400: #4a4a4a;

  /* Mid tones (neutral) */
  --color-gray-300: #6a6a6a;
  --color-gray-200: #9a9a9a;

  /* Light tones (for light theme) */
  --color-gray-100: #b0b0b0;
  --color-gray-50: #e0e0e0;
  --color-gray-25: #f5f5f5;
  --color-gray-10: #fafafa;

  /* Pure colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ========================================
     PRIMITIVE COLORS - Brand
     Purple/Indigo gradient for primary actions
     ======================================== */

  --color-brand-50: #f5f3ff;
  --color-brand-100: #ede9fe;
  --color-brand-200: #ddd6fe;
  --color-brand-300: #c4b5fd;
  --color-brand-400: #a78bfa;
  --color-brand-500: #9b87f5;  /* Primary brand color */
  --color-brand-600: #7c3aed;  /* Hover state */
  --color-brand-700: #6d28d9;
  --color-brand-800: #5b21b6;
  --color-brand-900: #4c1d95;

  /* ========================================
     PRIMITIVE COLORS - Semantic
     Success, Error, Warning, Info
     ======================================== */

  /* Success (Green) */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  /* Error (Red) */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  /* Warning (Amber/Yellow) */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Info (Blue) */
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;

  /* ========================================
     PRIMITIVE COLORS - Additional UI
     For specific UI needs
     ======================================== */

  /* Overlay/Backdrop */
  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.3);

  /* Focus ring */
  --color-focus-ring: #9b87f5;
  --color-focus-ring-offset: #1a1a1a;
}

/**
 * Spacing Tokens - Pure Email Design System
 *
 * 4pt Grid System (base unit: 4px)
 * All spacing values are multiples of 4 for visual harmony
 *
 * Usage:
 * - padding: var(--space-4);
 * - margin-bottom: var(--space-6);
 * - gap: var(--space-3);
 */

:root {
    /* ========================================
     SPACING SCALE - 4pt Grid
     ======================================== */

    /* Extra small spacing */
    --space-0: 0;
    --space-0-5: 0.125rem;
    /* 2px - rarely used */
    --space-1: 0.25rem;
    /* 4px */
    --space-1-5: 0.375rem;
    /* 6px */
    --space-2: 0.5rem;
    /* 8px */
    --space-2-5: 0.625rem;
    /* 10px */
    --space-3: 0.75rem;
    /* 12px */

    /* Small spacing */
    --space-3-5: 0.875rem;
    /* 14px */
    --space-4: 1rem;
    /* 16px - base unit */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */

    /* Medium spacing */
    --space-7: 1.75rem;
    /* 28px */
    --space-8: 2rem;
    /* 32px */
    --space-9: 2.25rem;
    /* 36px */
    --space-10: 2.5rem;
    /* 40px */

    /* Large spacing */
    --space-12: 3rem;
    /* 48px */
    --space-14: 3.5rem;
    /* 56px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */

    /* Extra large spacing */
    --space-32: 8rem;
    /* 128px */
    --space-40: 10rem;
    /* 160px */
    --space-48: 12rem;
    /* 192px */
    --space-56: 14rem;
    /* 224px */
    --space-64: 16rem;
    /* 256px */

    /* ========================================
     COMPONENT-SPECIFIC SPACING
     Common spacing patterns for consistency
     ======================================== */

    /* Padding presets */
    --padding-btn-sm: var(--space-1-5) var(--space-3);
    --padding-btn-md: var(--space-2-5) var(--space-5);
    /* Increased for comfort */
    --padding-btn-lg: var(--space-3) var(--space-6);

    --padding-input: var(--space-2-5) var(--space-3);
    --padding-card: var(--space-5);
    /* Increased for breathing room */
    --padding-modal: var(--space-6);
    --padding-panel: var(--space-5);

    /* Gap presets (for flexbox/grid) */
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-3);
    --gap-lg: var(--space-4);
    --gap-xl: var(--space-6);

    /* Layout spacing */
    --sidebar-width: 16rem;
    /* 256px */
    --email-list-width: 22rem;
    /* 352px */
    --header-height: 3.5rem;
    /* 56px */
}

/**
 * Typography Tokens - Pure Email Design System
 *
 * Type scale based on 1.2 ratio for harmonious scaling
 * Base size: 14px (optimal for email clients)
 *
 * Usage:
 * - font-size: var(--font-size-base);
 * - font-weight: var(--font-weight-medium);
 * - line-height: var(--line-height-normal);
 */

:root {
  /* ========================================
     FONT FAMILIES
     ======================================== */

  /* System font stack for optimal performance */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';

  /* Monospace for code/technical content */
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
    Consolas, 'Courier New', monospace;

  /* ========================================
     FONT SIZES - Type Scale (ratio 1.2)
     ======================================== */

  /* Extra small */
  --font-size-2xs: 0.625rem;   /* 10px */
  --font-size-xs: 0.75rem;     /* 12px */

  /* Small */
  --font-size-sm: 0.8125rem;   /* 13px */

  /* Base (most common for body text) */
  --font-size-base: 0.875rem;  /* 14px - primary size */

  /* Medium */
  --font-size-md: 0.9375rem;   /* 15px */
  --font-size-lg: 1rem;        /* 16px */

  /* Large */
  --font-size-xl: 1.125rem;    /* 18px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2rem;       /* 32px */
  --font-size-5xl: 2.5rem;     /* 40px */
  --font-size-6xl: 3rem;       /* 48px */

  /* ========================================
     FONT WEIGHTS
     ======================================== */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ========================================
     LINE HEIGHTS
     ======================================== */

  /* Tight (for headings) */
  --line-height-tight: 1.15;
  --line-height-snug: 1.25;

  /* Normal (for body text) */
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Loose (for large text blocks) */
  --line-height-loose: 1.75;
  --line-height-extra-loose: 2;

  /* ========================================
     LETTER SPACING
     ======================================== */

  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ========================================
     TEXT STYLES - Common Presets
     For consistent text patterns
     ======================================== */

  /* Heading styles */
  --text-h1-size: var(--font-size-4xl);
  --text-h1-weight: var(--font-weight-bold);
  --text-h1-line-height: var(--line-height-tight);

  --text-h2-size: var(--font-size-3xl);
  --text-h2-weight: var(--font-weight-bold);
  --text-h2-line-height: var(--line-height-snug);

  --text-h3-size: var(--font-size-2xl);
  --text-h3-weight: var(--font-weight-semibold);
  --text-h3-line-height: var(--line-height-snug);

  --text-h4-size: var(--font-size-xl);
  --text-h4-weight: var(--font-weight-semibold);
  --text-h4-line-height: var(--line-height-normal);

  /* Body styles */
  --text-body-size: var(--font-size-base);
  --text-body-weight: var(--font-weight-normal);
  --text-body-line-height: var(--line-height-normal);

  --text-body-sm-size: var(--font-size-sm);
  --text-body-sm-weight: var(--font-weight-normal);
  --text-body-sm-line-height: var(--line-height-normal);

  /* Label styles */
  --text-label-size: var(--font-size-sm);
  --text-label-weight: var(--font-weight-medium);
  --text-label-line-height: var(--line-height-normal);

  /* Caption styles */
  --text-caption-size: var(--font-size-xs);
  --text-caption-weight: var(--font-weight-normal);
  --text-caption-line-height: var(--line-height-normal);

  /* Code styles */
  --text-code-size: var(--font-size-sm);
  --text-code-weight: var(--font-weight-normal);
  --text-code-line-height: var(--line-height-relaxed);
}

/**
 * Border Tokens - Pure Email Design System
 *
 * Border radius and width tokens for consistent UI elements
 *
 * Usage:
 * - border-radius: var(--radius-md);
 * - border: var(--border-width-1) solid var(--border-primary);
 */

:root {
    /* ========================================
     BORDER RADIUS
     Progressive scale for different UI elements
     ======================================== */

    /* No radius */
    --radius-none: 0;

    /* Small radius (tags, badges, small buttons) */
    --radius-sm: 0.25rem;
    /* 4px */

    /* Base radius (inputs, buttons) */
    --radius-base: 0.5rem;
    /* 8px - most common, increased for modern feel */

    /* Medium radius (cards, panels) */
    --radius-md: 0.625rem;
    /* 10px - increased for softer appearance */

    /* Large radius (modals, large cards) */
    --radius-lg: 0.75rem;
    /* 12px - increased for premium feel */

    /* Extra large radius (special cards, containers) */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */

    /* Full radius (circular elements, pills) */
    --radius-full: 9999px;

    /* ========================================
     BORDER WIDTHS
     ======================================== */

    --border-width-0: 0;
    --border-width-1: 1px;
    /* Default border */
    --border-width-2: 2px;
    /* Emphasized border */
    --border-width-4: 4px;
    /* Strong emphasis */
    --border-width-8: 8px;
    /* Very strong (rare) */

    /* ========================================
     COMPONENT-SPECIFIC BORDERS
     Common border patterns
     ======================================== */

    /* Button borders */
    --border-btn: var(--border-width-1);
    --border-btn-focus: var(--border-width-2);

    /* Input borders */
    --border-input: var(--border-width-1);
    --border-input-focus: var(--border-width-2);

    /* Card borders */
    --border-card: var(--border-width-1);
    --border-card-hover: var(--border-width-1);

    /* Divider */
    --border-divider: var(--border-width-1);

    /* Focus ring (outline) */
    --border-focus-ring: var(--border-width-2);
    --border-focus-ring-offset: 2px;
}

/**
 * Shadow Tokens - Pure Email Design System
 *
 * Elevation/depth system using shadows
 * Note: Shadow values will be overridden in theme files
 * Dark theme uses more subtle shadows with higher opacity
 * Light theme uses more pronounced shadows with lower opacity
 *
 * Usage:
 * - box-shadow: var(--shadow-md);
 * - box-shadow: var(--shadow-card-hover);
 */

:root {
  /* ========================================
     BASE SHADOWS - General Purpose
     These are base values, themes will override
     ======================================== */

  /* No shadow */
  --shadow-none: none;

  /* Small elevation (tooltips, small dropdowns) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  /* Medium elevation (cards, buttons) */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Large elevation (dropdowns, popovers) */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Extra large elevation (modals, dialogs) */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* 2XL elevation (drawers, major overlays) */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ========================================
     COMPONENT-SPECIFIC SHADOWS
     Common shadow patterns for consistency
     ======================================== */

  /* Cards */
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);

  /* Dropdowns and menus */
  --shadow-dropdown: var(--shadow-lg);

  /* Modals and dialogs */
  --shadow-modal: var(--shadow-2xl);

  /* Popovers and tooltips */
  --shadow-popover: var(--shadow-lg);
  --shadow-tooltip: var(--shadow-md);

  /* Buttons */
  --shadow-btn: var(--shadow-sm);
  --shadow-btn-hover: var(--shadow-md);

  /* Focus states */
  --shadow-focus: 0 0 0 3px rgba(155, 135, 245, 0.3);

  /* ========================================
     INNER SHADOWS
     For inset effects
     ======================================== */

  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-inner-strong: inset 0 2px 4px 0 rgba(0, 0, 0, 0.12);

  /* ========================================
     COLORED SHADOWS
     For special effects (brand color glow, etc)
     ======================================== */

  --shadow-brand-sm: 0 1px 2px 0 rgba(155, 135, 245, 0.2);
  --shadow-brand-md: 0 4px 6px -1px rgba(155, 135, 245, 0.3),
    0 2px 4px -1px rgba(155, 135, 245, 0.2);
  --shadow-brand-lg: 0 10px 15px -3px rgba(155, 135, 245, 0.3),
    0 4px 6px -2px rgba(155, 135, 245, 0.2);
}

/**
 * Transition Tokens - Pure Email Design System
 *
 * Timing functions and durations for smooth, consistent animations
 *
 * Usage:
 * - transition: all var(--transition-fast) var(--ease-out);
 * - transition: var(--transition-colors);
 */

:root {
  /* ========================================
     DURATIONS
     ======================================== */

  /* Extra fast (micro-interactions) */
  --duration-instant: 75ms;

  /* Fast (hover states, simple transitions) */
  --duration-fast: 150ms;

  /* Normal (most common) */
  --duration-normal: 200ms;
  --duration-moderate: 250ms;

  /* Slow (complex animations, modals) */
  --duration-slow: 300ms;
  --duration-slower: 400ms;

  /* Extra slow (page transitions, major changes) */
  --duration-slowest: 500ms;

  /* ========================================
     EASING FUNCTIONS
     Based on natural motion curves
     ======================================== */

  /* Linear (constant speed, use sparingly) */
  --ease-linear: linear;

  /* Ease (default browser easing) */
  --ease: ease;

  /* Ease-in (starts slow, speeds up) */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);

  /* Ease-out (starts fast, slows down) - Most natural for UI */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Ease-in-out (smooth acceleration and deceleration) */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Spring-like easing (bouncy, playful) */
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
     COMMON TRANSITION PATTERNS
     Pre-composed transitions for common use cases
     ======================================== */

  /* All properties (use sparingly, can cause performance issues) */
  --transition-all: all var(--duration-normal) var(--ease-out);
  --transition-all-fast: all var(--duration-fast) var(--ease-out);
  --transition-all-slow: all var(--duration-slow) var(--ease-out);

  /* Colors (backgrounds, borders, text) */
  --transition-colors: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);

  /* Opacity (fades) */
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-opacity-fast: opacity var(--duration-fast) var(--ease-out);

  /* Transform (movement, scale, rotate) */
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-transform-fast: transform var(--duration-fast) var(--ease-out);
  --transition-transform-slow: transform var(--duration-slow) var(--ease-out);

  /* Shadow (elevation changes) */
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-out);
  --transition-shadow-fast: box-shadow var(--duration-fast) var(--ease-out);

  /* Combined transitions for specific components */
  --transition-button: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);

  --transition-input: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);

  --transition-card: box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);

  --transition-modal: opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);

  --transition-dropdown: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);

  /* ========================================
     ANIMATION DELAYS
     For staggered animations
     ======================================== */

  --delay-0: 0ms;
  --delay-1: 75ms;
  --delay-2: 150ms;
  --delay-3: 225ms;
  --delay-4: 300ms;
  --delay-5: 375ms;
}

/**
 * Z-Index Tokens - Pure Email Design System
 *
 * Centralized z-index scale to prevent stacking conflicts
 * Values are organized by layer hierarchy
 *
 * Usage:
 * - z-index: var(--z-modal);
 * - z-index: var(--z-dropdown);
 */

:root {
  /* ========================================
     Z-INDEX SCALE
     Organized from lowest to highest layer
     ======================================== */

  /* Base layer (default stacking context) */
  --z-base: 0;
  --z-hide: -1;

  /* Content layers */
  --z-content: 1;
  --z-content-elevated: 10;

  /* UI Component layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-popover: 400;
  --z-tooltip: 500;

  /* Overlay layers */
  --z-modal-backdrop: 600;
  --z-modal: 700;
  --z-drawer: 800;

  /* Top layers (always on top) */
  --z-notification: 900;
  --z-toast: 1000;

  /* Maximum (use only for critical overlays) */
  --z-maximum: 9999;

  /* ========================================
     COMPONENT-SPECIFIC Z-INDEX
     Named z-index for specific components
     ======================================== */

  /* Email list and viewer */
  --z-email-list: var(--z-content);
  --z-email-viewer: var(--z-content);
  --z-email-header: var(--z-sticky);

  /* Sidebar */
  --z-sidebar: var(--z-content);
  --z-sidebar-overlay: var(--z-modal-backdrop);

  /* Modals and dialogs */
  --z-snooze-modal: var(--z-modal);
  --z-settings-modal: var(--z-modal);
  --z-compose-modal: var(--z-modal);

  /* Dropdowns and menus */
  --z-context-menu: var(--z-dropdown);
  --z-tag-dropdown: var(--z-dropdown);
  --z-user-menu: var(--z-dropdown);

  /* Overlays */
  --z-loading-overlay: var(--z-modal-backdrop);
  --z-search-overlay: var(--z-modal);

  /* Notifications */
  --z-error-notification: var(--z-notification);
  --z-success-toast: var(--z-toast);
}

/* ========================================
   2. THEMES - Semantic Token Mappings
   Dark and light theme definitions
   ======================================== */

/**
 * Dark Theme - Pure Email Design System
 *
 * Semantic color tokens for dark mode (default theme)
 * These tokens map primitive colors to meaningful purposes
 *
 * Applied when: <html data-theme="dark">
 */

[data-theme='dark'] {
   /* ========================================
     BACKGROUND COLORS
     Layered from deepest to highest
     ======================================== */

   /* Primary backgrounds (main surfaces) */
   --bg-primary: var(--color-gray-800);
   /* #1a1a1a - Main app background */
   --bg-secondary: var(--color-gray-850);
   /* #151515 - Secondary panels */
   --bg-tertiary: var(--color-gray-900);
   /* #0f0f0f - Deepest backgrounds */

   /* Surface backgrounds (cards, panels, elevated surfaces) */
   --surface-base: var(--color-gray-800);
   /* #1a1a1a - Card background */
   --surface-raised: var(--color-gray-750);
   /* #1f1f1f - Elevated cards */
   --surface-overlay: var(--color-gray-700);
   /* #252525 - Modals, overlays */

   /* Interactive backgrounds */
   --bg-hover: var(--color-gray-700);
   /* #252525 - Hover states */
   --bg-active: var(--color-gray-600);
   /* #2a2a2a - Active/pressed states */
   --bg-selected: rgba(155, 135, 245, 0.15);
   /* Brand tint - Selected items */

   /* Sidebar specific */
   --sidebar-hover: var(--color-gray-700);
   /* Hover state for sidebar items */
   --sidebar-active: rgba(155, 135, 245, 0.2);
   /* Active/selected sidebar item - slightly more visible than bg-selected */

   /* Input backgrounds */
   --bg-input: var(--color-gray-750);
   /* #1f1f1f - Input fields */
   --bg-input-hover: var(--color-gray-700);
   /* #252525 - Input hover */
   --bg-input-focus: var(--color-gray-700);
   /* #252525 - Input focus */
   --bg-input-disabled: var(--color-gray-850);
   /* #151515 - Disabled inputs */

   /* ========================================
     TEXT COLORS
     From most prominent to least
     ======================================== */

   /* Primary text (headings, main content) */
   --text-primary: var(--color-gray-50);
   /* #e0e0e0 - Main text */
   --text-secondary: var(--color-gray-100);
   /* #b0b0b0 - Secondary text */
   --text-tertiary: var(--color-gray-200);
   /* #9a9a9a - Tertiary text */
   --text-quaternary: var(--color-gray-300);
   /* #6a6a6a - Least prominent */

   /* Inverse text (on dark backgrounds) */
   --text-inverse: var(--color-gray-800);
   /* #1a1a1a - Text on light backgrounds */

   /* Disabled text */
   --text-disabled: var(--color-gray-300);
   /* #6a6a6a - Disabled state */

   /* Link text */
   --text-link: var(--color-brand-400);
   /* #a78bfa - Links */
   --text-link-hover: var(--color-brand-300);
   /* #c4b5fd - Link hover */

   /* Placeholder text */
   --text-placeholder: var(--color-gray-300);
   /* #6a6a6a - Input placeholders */

   /* ========================================
     BORDER COLORS
     ======================================== */

   /* Standard borders */
   --border-primary: #3a3a3a;
   /* Softer gray - Main borders */
   --border-secondary: #2f2f2f;
   /* Very subtle - Subtle borders */
   --border-tertiary: #252525;
   /* Almost invisible - Very subtle */

   /* Interactive borders */
   --border-hover: var(--color-gray-500);
   /* #3a3a3a - Hover borders */
   --border-focus: var(--color-brand-500);
   /* #9b87f5 - Focus borders */
   --border-active: var(--color-brand-600);
   /* #7c3aed - Active borders */

   /* Input borders */
   --border-input: var(--color-gray-600);
   /* #2a2a2a - Input default */
   --border-input-hover: var(--color-gray-500);
   /* #3a3a3a - Input hover */
   --border-input-focus: var(--color-brand-500);
   /* #9b87f5 - Input focus */
   --border-input-error: var(--color-error-500);
   /* Error state */

   /* Dividers */
   --border-divider: var(--color-gray-700);
   /* #252525 - Dividing lines */

   /* ========================================
     ACCENT/BRAND COLORS
     ======================================== */

   /* Primary accent */
   --accent-primary: var(--color-brand-500);
   /* #9b87f5 - Primary brand */
   --accent-primary-hover: var(--color-brand-600);
   /* #7c3aed - Hover */
   --accent-primary-active: var(--color-brand-700);
   /* #6d28d9 - Active */

   /* Secondary accent */
   --accent-secondary: var(--color-brand-400);
   /* #a78bfa - Secondary */
   --accent-secondary-hover: var(--color-brand-500);
   /* Hover */

   /* Accent on dark (for buttons, badges) */
   --accent-on-dark: var(--color-brand-400);
   /* #a78bfa */

   /* ========================================
     SEMANTIC COLORS
     Success, Error, Warning, Info
     ======================================== */

   /* Success */
   --color-success: var(--color-success-500);
   /* #22c55e */
   --color-success-hover: var(--color-success-600);
   /* #16a34a */
   --color-success-bg: rgba(34, 197, 94, 0.1);
   /* Success background */
   --color-success-border: var(--color-success-700);
   /* Success border */

   /* Error */
   --color-error: var(--color-error-500);
   /* #ef4444 */
   --color-error-hover: var(--color-error-600);
   /* #dc2626 */
   --color-error-bg: rgba(239, 68, 68, 0.1);
   /* Error background */
   --color-error-border: var(--color-error-700);
   /* Error border */

   /* Warning */
   --color-warning: var(--color-warning-500);
   /* #f59e0b */
   --color-warning-hover: var(--color-warning-600);
   /* #d97706 */
   --color-warning-bg: rgba(245, 158, 11, 0.1);
   /* Warning background */
   --color-warning-border: var(--color-warning-700);
   /* Warning border */

   /* Info */
   --color-info: var(--color-info-500);
   /* #3b82f6 */
   --color-info-hover: var(--color-info-600);
   /* #2563eb */
   --color-info-bg: rgba(59, 130, 246, 0.1);
   /* Info background */
   --color-info-border: var(--color-info-700);
   /* Info border */

   /* ========================================
     OVERLAY & BACKDROP
     ======================================== */

   --overlay-backdrop: rgba(0, 0, 0, 0.6);
   /* Modal backdrop */
   --overlay-backdrop-light: rgba(0, 0, 0, 0.4);
   /* Lighter backdrop */

   /* ========================================
     SHADOWS - Dark Theme Specific
     More subtle with higher opacity
     ======================================== */

   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
      0 2px 4px -1px rgba(0, 0, 0, 0.2);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
      0 4px 6px -2px rgba(0, 0, 0, 0.2);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
      0 10px 10px -5px rgba(0, 0, 0, 0.2);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

   /* Component shadows */
   --shadow-card: var(--shadow-sm);
   --shadow-card-hover: var(--shadow-md);
   --shadow-dropdown: var(--shadow-lg);
   --shadow-modal: var(--shadow-2xl);

   /* ========================================
     SPECIAL PURPOSE COLORS
     ======================================== */

   /* Color scheme for native inputs (date, time, etc.) */
   --color-scheme: dark;

   /* Scrollbar */
   --scrollbar-track: var(--color-gray-800);
   /* #1a1a1a */
   --scrollbar-thumb: var(--color-gray-600);
   /* #2a2a2a */
   --scrollbar-thumb-hover: var(--color-gray-500);
   /* #3a3a3a */

   /* Selection */
   --selection-bg: rgba(155, 135, 245, 0.3);
   /* Text selection */
   --selection-text: var(--color-white);

   /* Focus ring */
   --focus-ring: rgba(155, 135, 245, 0.5);
   --focus-ring-offset: var(--color-gray-800);

   /* Code blocks */
   --code-bg: var(--color-gray-900);
   /* #0f0f0f */
   --code-text: var(--color-gray-100);
   /* #b0b0b0 */
   --code-border: var(--color-gray-700);
   /* #252525 */

   /* Skeleton loading */
   --color-skeleton-base: rgba(255, 255, 255, 0.06);
   --color-skeleton-shine: rgba(255, 255, 255, 0.12);
}

/**
 * Light Theme - Pure Email Design System
 *
 * Semantic color tokens for light mode
 * These tokens map primitive colors to meaningful purposes
 *
 * Applied when: <html data-theme="light">
 */

[data-theme='light'] {
    /* ========================================
     BACKGROUND COLORS
     Layered from lightest to deepest
     ======================================== */

    /* Primary backgrounds (main surfaces) */
    --bg-primary: var(--color-white);
    /* #ffffff - Main app background */
    --bg-secondary: #f9fafb;
    /* Warmer off-white - Secondary panels */
    --bg-tertiary: #f3f4f6;
    /* Light gray - Tertiary backgrounds */

    /* Surface backgrounds (cards, panels, elevated surfaces) */
    --surface-base: var(--color-white);
    /* #ffffff - Card background */
    --surface-raised: #f9fafb;
    /* Warmer off-white - Elevated cards */
    --surface-overlay: var(--color-white);
    /* #ffffff - Modals, overlays */

    /* Interactive backgrounds */
    --bg-hover: #f3f4f6;
    /* Light gray - Hover states */
    --bg-active: #e5e7eb;
    /* Medium gray - Active/pressed states */
    --bg-selected: rgba(155, 135, 245, 0.08);
    /* Brand tint - Selected items */

    /* Sidebar specific */
    --sidebar-hover: #f3f4f6;
    /* Hover state for sidebar items */
    --sidebar-active: rgba(155, 135, 245, 0.12);
    /* Active/selected sidebar item */

    /* Input backgrounds */
    --bg-input: var(--color-white);
    /* #ffffff - Input fields */
    --bg-input-hover: var(--color-gray-10);
    /* #fafafa - Input hover */
    --bg-input-focus: var(--color-white);
    /* #ffffff - Input focus */
    --bg-input-disabled: var(--color-gray-25);
    /* #f5f5f5 - Disabled inputs */

    /* ========================================
     TEXT COLORS
     From most prominent to least
     ======================================== */

    /* Primary text (headings, main content) */
    --text-primary: var(--color-gray-900);
    /* #0f0f0f - Main text */
    --text-secondary: var(--color-gray-700);
    /* #252525 - Secondary text */
    --text-tertiary: #6b7280;
    /* Modern gray - Tertiary text */
    --text-quaternary: #9ca3af;
    /* Lighter gray - Least prominent */

    /* Inverse text (on light backgrounds) */
    --text-inverse: var(--color-white);
    /* #ffffff - Text on dark backgrounds */

    /* Disabled text */
    --text-disabled: var(--color-gray-400);
    /* #4a4a4a - Disabled state */

    /* Link text */
    --text-link: var(--color-brand-600);
    /* #7c3aed - Links */
    --text-link-hover: var(--color-brand-700);
    /* #6d28d9 - Link hover */

    /* Placeholder text */
    --text-placeholder: var(--color-gray-400);
    /* #4a4a4a - Input placeholders */

    /* ========================================
     BORDER COLORS
     ======================================== */

    /* Standard borders */
    --border-primary: #e5e7eb;
    /* Light gray - Main borders */
    --border-secondary: #f3f4f6;
    /* Very light gray - Subtle borders */
    --border-tertiary: #f9fafb;
    /* Almost invisible - Very subtle */

    /* Interactive borders */
    --border-hover: #d1d5db;
    /* Medium-light gray - Hover borders */
    --border-focus: var(--color-brand-500);
    /* #9b87f5 - Focus borders */
    --border-active: var(--color-brand-600);
    /* #7c3aed - Active borders */

    /* Input borders */
    --border-input: #e5e7eb;
    /* Light gray - Input default */
    --border-input-hover: #d1d5db;
    /* Medium-light gray - Input hover */
    --border-input-focus: var(--color-brand-500);
    /* #9b87f5 - Input focus */
    --border-input-error: var(--color-error-500);
    /* Error state */

    /* Dividers */
    --border-divider: #f3f4f6;
    /* Very light gray - Dividing lines */

    /* ========================================
     ACCENT/BRAND COLORS
     ======================================== */

    /* Primary accent */
    --accent-primary: var(--color-brand-600);
    /* #7c3aed - Primary brand */
    --accent-primary-hover: var(--color-brand-700);
    /* #6d28d9 - Hover */
    --accent-primary-active: var(--color-brand-800);
    /* #5b21b6 - Active */

    /* Secondary accent */
    --accent-secondary: var(--color-brand-500);
    /* #9b87f5 - Secondary */
    --accent-secondary-hover: var(--color-brand-600);
    /* Hover */

    /* Accent on light (for buttons, badges) */
    --accent-on-dark: var(--color-brand-500);
    /* #9b87f5 */

    /* ========================================
     SEMANTIC COLORS
     Success, Error, Warning, Info
     ======================================== */

    /* Success */
    --color-success: var(--color-success-600);
    /* #16a34a */
    --color-success-hover: var(--color-success-700);
    /* #15803d */
    --color-success-bg: rgba(34, 197, 94, 0.1);
    /* Success background */
    --color-success-border: var(--color-success-300);
    /* Success border */

    /* Error */
    --color-error: var(--color-error-600);
    /* #dc2626 */
    --color-error-hover: var(--color-error-700);
    /* #b91c1c */
    --color-error-bg: rgba(239, 68, 68, 0.1);
    /* Error background */
    --color-error-border: var(--color-error-300);
    /* Error border */

    /* Warning */
    --color-warning: var(--color-warning-600);
    /* #d97706 */
    --color-warning-hover: var(--color-warning-700);
    /* #b45309 */
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    /* Warning background */
    --color-warning-border: var(--color-warning-300);
    /* Warning border */

    /* Info */
    --color-info: var(--color-info-600);
    /* #2563eb */
    --color-info-hover: var(--color-info-700);
    /* #1d4ed8 */
    --color-info-bg: rgba(59, 130, 246, 0.1);
    /* Info background */
    --color-info-border: var(--color-info-300);
    /* Info border */

    /* ========================================
     OVERLAY & BACKDROP
     ======================================== */

    --overlay-backdrop: rgba(0, 0, 0, 0.3);
    /* Modal backdrop */
    --overlay-backdrop-light: rgba(0, 0, 0, 0.2);
    /* Lighter backdrop */

    /* ========================================
     SHADOWS - Light Theme Specific
     More pronounced with lower opacity
     ======================================== */

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04),
        0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06),
        0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 20px -5px rgba(0, 0, 0, 0.08),
        0 4px 8px -3px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 30px -8px rgba(0, 0, 0, 0.1),
        0 10px 15px -5px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);

    /* Component shadows */
    --shadow-card: var(--shadow-sm);
    --shadow-card-hover: var(--shadow-md);
    --shadow-dropdown: var(--shadow-lg);
    --shadow-modal: var(--shadow-2xl);

    /* ========================================
     SPECIAL PURPOSE COLORS
     ======================================== */

    /* Color scheme for native inputs (date, time, etc.) */
    --color-scheme: light;

    /* Scrollbar */
    --scrollbar-track: var(--color-gray-25);
    /* #f5f5f5 */
    --scrollbar-thumb: var(--color-gray-200);
    /* #9a9a9a */
    --scrollbar-thumb-hover: var(--color-gray-300);
    /* #6a6a6a */

    /* Selection */
    --selection-bg: rgba(155, 135, 245, 0.2);
    /* Text selection */
    --selection-text: var(--color-gray-900);

    /* Focus ring */
    --focus-ring: rgba(155, 135, 245, 0.4);
    --focus-ring-offset: var(--color-white);

    /* Code blocks */
    --code-bg: var(--color-gray-25);
    /* #f5f5f5 */
    --code-text: var(--color-gray-800);
    /* #1a1a1a */
    --code-border: var(--color-gray-200);
    /* #9a9a9a */

    /* Skeleton loading */
    --color-skeleton-base: rgba(0, 0, 0, 0.06);
    --color-skeleton-shine: rgba(0, 0, 0, 0.12);
}

/* ========================================
   3. BASE STYLES
   Reset, normalize, and global styles
   ======================================== */

/**
 * CSS Reset - Pure Email Design System
 *
 * Modern CSS reset based on best practices
 * Normalizes browser inconsistencies and sets sensible defaults
 */

/* ========================================
   Box Sizing - Use border-box everywhere
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========================================
   Document & Root
   ======================================== */

html {
  /* Prevent font size adjustments on orientation change */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Smooth scrolling */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  /* Use design system tokens */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);

  /* Text rendering optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Theme colors */
  background-color: var(--bg-primary);
  color: var(--text-primary);

  /* Prevent horizontal scroll */
  overflow-x: hidden;
}

/* ========================================
   Typography Reset
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
}

p {
  margin: 0;
  padding: 0;
}

/* ========================================
   Lists
   ======================================== */

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ========================================
   Links
   ======================================== */

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  text-decoration: none;
}

/* ========================================
   Forms
   ======================================== */

button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

button:disabled {
  cursor: not-allowed;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

textarea {
  resize: vertical;
}

/* ========================================
   Tables
   ======================================== */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ========================================
   Media Elements
   ======================================== */

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ========================================
   Miscellaneous
   ======================================== */

hr {
  margin: 0;
  padding: 0;
  border: none;
  border-top: var(--border-width-1) solid var(--border-divider);
}

/* Remove default spacing on common elements */

blockquote,
figure,
pre {
  margin: 0;
  padding: 0;
}

/* ========================================
   Selection
   ======================================== */

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* ========================================
   Focus Visible (Modern Focus States)
   ======================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--border-focus-ring) solid var(--border-focus);
  outline-offset: var(--border-focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ========================================
   Scrollbar (Webkit)
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ========================================
   Root App Container
   ======================================== */

#app {
  min-height: 100vh;
  width: 100%;
}

/**
 * Global Styles - Pure Email Design System
 *
 * Base styles for HTML elements using design tokens
 * These establish the foundation for all components
 */

/* ========================================
   Typography - Headings
   ======================================== */

h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line-height);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

h5, h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* ========================================
   Typography - Body Text
   ======================================== */

p {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

p:last-child {
  margin-bottom: 0;
}

small {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

strong, b {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

em, i {
  font-style: italic;
}

/* ========================================
   Links
   ======================================== */

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: var(--border-focus-ring) solid var(--border-focus);
  outline-offset: var(--border-focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ========================================
   Code
   ======================================== */

code {
  font-family: var(--font-family-mono);
  font-size: var(--text-code-size);
  padding: var(--space-1) var(--space-2);
  background-color: var(--code-bg);
  color: var(--code-text);
  border: var(--border-width-1) solid var(--code-border);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-family-mono);
  font-size: var(--text-code-size);
  line-height: var(--text-code-line-height);
  padding: var(--space-4);
  background-color: var(--code-bg);
  color: var(--code-text);
  border: var(--border-width-1) solid var(--code-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

pre code {
  padding: 0;
  background: none;
  border: none;
}

/* ========================================
   Horizontal Rule
   ======================================== */

hr {
  margin: var(--space-6) 0;
  border: none;
  border-top: var(--border-width-1) solid var(--border-divider);
}

/* ========================================
   Blockquote
   ======================================== */

blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: var(--border-width-4) solid var(--border-primary);
  color: var(--text-secondary);
  font-style: italic;
}

/* ========================================
   Lists
   ======================================== */

ul, ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
  color: var(--text-secondary);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--space-2);
}

li:last-child {
  margin-bottom: 0;
}

/* ========================================
   Tables
   ======================================== */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

thead {
  background-color: var(--bg-secondary);
}

th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  border-bottom: var(--border-width-2) solid var(--border-primary);
}

td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background-color: var(--bg-hover);
}

/* ========================================
   Utility Classes
   ======================================== */

/* Text alignment */

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

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

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

/* Text colors */

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

.text-secondary { color: var(--text-secondary); }

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

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

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

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

/* Font weights */

.font-normal { font-weight: var(--font-weight-normal); }

.font-medium { font-weight: var(--font-weight-medium); }

.font-semibold { font-weight: var(--font-weight-semibold); }

.font-bold { font-weight: var(--font-weight-bold); }

/* Truncate text */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Screen reader only */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* @import './base/utilities.css'; */

/* ========================================
   4. LAYOUTS
   Application layout structures
   ======================================== */

/**
 * App Layout - Pure Email Design System
 *
 * Main application layout structure
 * 3-column layout: Sidebar | Email List | Email Viewer
 */

/* ========================================
   Root App Container
   ======================================== */

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ========================================
   Main Layout Container
   ======================================== */

.app-layout {
  display: flex;
  height: 100%;
  width: 100%;
  font-family: var(--font-family-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

/* ========================================
   Column Structure
   ======================================== */

/* Column 1: Sidebar */

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
  z-index: var(--z-sidebar);
}

.sidebar.collapsed {
  width: 60px;
}

/* Column 2: Email List */

.email-list-col {
  width: var(--email-list-width);
  border-right: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  flex-shrink: 0;
  z-index: var(--z-email-list);
}

/* Column 3: Email Viewer */

.email-view-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
  z-index: var(--z-email-viewer);
}

/* ========================================
   Empty State (No Email Selected)
   ======================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

.empty-text {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/* For smaller screens, allow email list to be toggled */

@media (max-width: 1024px) {
  .email-list-col {
    position: absolute;
    left: var(--sidebar-width);
    height: 100vh;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
  }

  .email-list-col.hidden {
    display: none;
  }
}

/* For very small screens, allow sidebar to be toggled */

@media (max-width: 768px) {
  .sidebar {
    position: absolute;
    left: 0;
    height: 100vh;
    z-index: var(--z-sidebar-overlay);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.hidden {
    transform: translateX(-100%);
  }

  .email-list-col {
    left: 0;
  }
}

/**
 * Sidebar Layout - Pure Email Design System
 *
 * Sidebar navigation with inbox selector and menu items
 */

/* ========================================
   Sidebar Header
   ======================================== */

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-tertiary);
  height: var(--header-height);
  flex-shrink: 0;
}

/* Inbox Selector */

.inbox-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: default;
  flex: 1;
  min-width: 0;
}

.inbox-icon {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  flex-shrink: 0;
}

.inbox-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-icon {
  font-size: 10px;
  opacity: 0.6;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Sidebar Actions */

.sidebar-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* ========================================
   Navigation Menu
   ======================================== */

.nav-menu {
  padding: var(--space-2);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Nav Items */

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  cursor: default;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-1);
  border-left: 3px solid transparent;
  transition: var(--transition-colors);
}

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

.nav-item.active {
  background-color: rgba(155, 135, 245, 0.1);
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
  font-weight: var(--font-weight-semibold);
}

.nav-item .icon {
  margin-right: var(--space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item .label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge (unread count, etc) */

.badge {
  background: var(--bg-hover);
  font-size: var(--font-size-xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

/* ========================================
   Nav Sections
   ======================================== */

.nav-section {
  margin-top: var(--space-4);
}

.section-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-quaternary);
  padding: var(--space-3) var(--space-3) var(--space-1-5) var(--space-3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
}

/* ========================================
   SVG Icons in Nav
   ======================================== */

.nav-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================================
   Icon Buttons in Sidebar
   ======================================== */

.icon-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: default;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-colors);
}

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

/* ========================================
   Dropdown Menu (Inbox Selector)
   ======================================== */

.dropdown-menu {
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  background: var(--surface-overlay);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-dropdown);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: var(--space-2-5) var(--space-3);
  cursor: default;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: var(--transition-colors);
}

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

.dropdown-item.active {
  background: var(--bg-active);
  color: var(--text-primary);
}

.dropdown-item-icon {
  font-size: var(--font-size-lg);
  margin-right: var(--space-2-5);
  flex-shrink: 0;
}

.dropdown-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.dropdown-item-logout:hover {
  color: var(--color-danger, #ef4444);
}

.dropdown-item-chevron {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.dropdown-item-chevron .chevron-svg {
  width: 14px;
  height: 14px;
}

.help-submenu-fixed {
  min-width: 190px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-primary, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 99999;
  overflow: hidden;
}

.help-submenu-fixed .dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  transition: background-color 0.1s;
}

.help-submenu-fixed .dropdown-item:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-primary, #1e293b);
}

.help-submenu-fixed .dropdown-item-logout:hover {
  color: var(--color-danger, #ef4444);
}

.help-submenu-fixed .dropdown-item-icon {
  margin-right: 10px;
  flex-shrink: 0;
}

.help-submenu-fixed .version-item {
  cursor: default !important;
  pointer-events: none;
  opacity: 0.5;
  padding: 8px 14px;
}

.help-submenu-fixed .version-label {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
}

/* ========================================
   Collapsed Sidebar State
   ======================================== */

.sidebar.collapsed .inbox-label,
.sidebar.collapsed .dropdown-icon,
.sidebar.collapsed .nav-item .label,
.sidebar.collapsed .badge,
.sidebar.collapsed .section-title {
  display: none;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: var(--space-2);
  border-left: none;
}

.sidebar.collapsed .nav-item .icon {
  margin-right: 0;
}

/**
 * Email List Layout - Pure Email Design System
 *
 * Email list column with header and email cards
 */

/* ========================================
   List Header
   ======================================== */

.list-header {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  flex-shrink: 0;
  gap: var(--space-2);
}

.list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.list-title h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: var(--space-1);
}

/* ========================================
   Filter Pills Row
   ======================================== */

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

.filter-pills {
  display: flex;
  gap: var(--space-1-5);
}

.filter-pill {
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-colors);
  white-space: nowrap;
}

.filter-pill:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.filter-pill.active {
  background: var(--bg-active);
  border-color: var(--border-active);
  color: var(--text-primary);
}

/* Filter More Menu Button */

.filter-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: var(--transition-colors);
}

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

.filter-more-btn .icon-svg-sm {
  width: 14px;
  height: 14px;
}

/* Filter Dropdown Menu */

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
}

.filter-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2-5);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.filter-menu-item:hover {
  background: var(--bg-hover);
}

.filter-menu-item.active {
  background: var(--bg-active);
  color: var(--accent-primary);
}

.filter-menu-item.active .filter-menu-icon {
  color: var(--accent-primary);
}

.filter-menu-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-tertiary);
}

.filter-menu-check {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent-primary);
  margin-left: auto;
}

/* ========================================
   Email Scroll Area
   ======================================== */

.email-scroll-area {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: var(--space-3);
  background: var(--bg-tertiary);
}

/* ========================================
   Email Card
   ======================================== */

.email-card {
  display: flex;
  padding: var(--space-4);
  cursor: default;
  position: relative;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  border: 1px solid transparent;
  transition: var(--transition-card);
  overflow: hidden;
  background-color: transparent;
}

.email-card:hover {
  background-color: var(--bg-hover);
}

.email-card.selected {
  background-color: rgba(155, 135, 245, 0.08);
  border-color: rgba(155, 135, 245, 0.3);
  box-shadow: 0 1px 3px 0 rgba(155, 135, 245, 0.1);
}

/* Card Content */

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

.card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
  gap: var(--space-2);
}

/* ========================================
   Email Card - Participants
   ======================================== */

.participants {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.email-card.unread .participants {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

/* ========================================
   Email Card - Time
   ======================================== */

.time {
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
  flex-shrink: 0;
}

/* ========================================
   Email Card - Subject
   ======================================== */

.card-subject {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-subject-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.email-card.unread .card-subject {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ========================================
   Email Card - Attachment Icon
   ======================================== */

.attachment-icon {
  font-size: var(--font-size-base);
  color: var(--text-quaternary);
  flex-shrink: 0;
  opacity: 0.8;
}

/* ========================================
   Email Card - Preview
   ======================================== */

.card-preview {
  font-size: var(--font-size-sm);
  color: var(--text-quaternary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   Email Card - Unread Indicator
   ======================================== */

.email-card.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background-color: var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/**
 * Email Viewer Layout - Pure Email Design System
 *
 * Email detail view with header, messages, attachments, and reply box
 */

/* ========================================
   Email Detail Container
   ======================================== */

.email-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ========================================
   Detail Header
   ======================================== */

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-5);
  height: var(--header-height);
  background: var(--bg-tertiary);
  flex-shrink: 0;
  z-index: var(--z-email-header);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.subject-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

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

/* Action Buttons in Header */

.action-btn {
  background: var(--bg-hover);
  border: var(--border-width-1) solid var(--border-secondary);
  color: var(--text-primary);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-base);
  cursor: default;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  white-space: nowrap;
  transition: var(--transition-button);
}

.action-btn:hover {
  background: var(--bg-active);
}

/* ========================================
   Participants Bar
   ======================================== */

.participants-bar {
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.participant-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.from-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

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

.avatar {
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
}

.add-participant {
  width: 24px;
  height: 24px;
  background: var(--bg-hover);
  border: var(--border-width-1) dashed var(--border-secondary);
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-participant:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ========================================
   Detail Body (Messages Container)
   ======================================== */

.detail-body {
  padding: var(--space-5);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* ========================================
   Messages (Thread)
   ======================================== */

.message-wrapper {
  margin-bottom: var(--space-5);
}

.message-item {
  transition: var(--transition-all);
}

/* Email Message Box */

.message-wrapper.is-email .message-item {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--border-primary);
}

/* ========================================
   Email Details Header (Inside Message)
   ======================================== */

.email-details-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  transition: var(--transition-all);
}

.email-details-header.clickable {
  cursor: default;
}

.email-details-header.clickable:hover {
  background: var(--bg-hover);
  margin: 0 calc(var(--space-4) * -1);
  padding: 0 var(--space-4) var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.email-details-content {
  display: flex;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

/* ========================================
   Message Avatar & Info
   ======================================== */

.detail-avatar {
  width: 40px;
  height: 40px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.detail-info {
  flex: 1;
  min-width: 0;
}

.detail-from {
  margin-bottom: var(--space-1);
}

.from-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-right: var(--space-1-5);
}

.from-email {
  font-size: var(--font-size-sm);
  color: var(--text-quaternary);
}

.detail-preview {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* To/Cc Labels */

.detail-label {
  color: var(--text-quaternary);
  margin-right: var(--space-1);
}

.detail-label-inline {
  color: var(--text-quaternary);
  margin-left: var(--space-2);
  margin-right: var(--space-1);
}

.detail-value {
  color: var(--text-secondary);
}

.detail-expanded {
  font-size: var(--font-size-sm);
}

.detail-line {
  margin-bottom: var(--space-1-5);
  display: flex;
  gap: var(--space-2);
}

.detail-line:last-child {
  margin-bottom: 0;
}

.detail-line .detail-label {
  color: var(--text-quaternary);
  min-width: 50px;
  flex-shrink: 0;
}

.detail-value-full {
  color: var(--text-secondary);
  flex: 1;
  word-wrap: break-word;
}

/* ========================================
   Message Actions & Metadata
   ======================================== */

.detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

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

.message-time {
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
}

.message-actions {
  display: flex;
  gap: var(--space-1);
}

.icon-btn-sm {
  background: none;
  border: none;
  color: var(--text-quaternary);
  cursor: default;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  transition: var(--transition-colors);
}

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

/* ========================================
   Message Content
   ======================================== */

.message-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.message-content p {
  margin-bottom: var(--space-3);
}

.message-preview {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  font-style: italic;
}

/* ========================================
   Attachments Section
   ======================================== */

.attachments-section {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--border-primary);
}

.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2-5);
}

.attachments-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.download-all {
  font-size: var(--font-size-sm);
  color: var(--text-link);
  text-decoration: none;
  cursor: default;
  transition: var(--transition-colors);
}

.download-all:hover {
  text-decoration: underline;
  color: var(--text-link-hover);
}

/* ========================================
   Comments Section
   ======================================== */

.comment-wrapper {
  margin-bottom: var(--space-3);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.comment-sender-info {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

.avatar-sm {
  width: 32px;
  height: 32px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.comment-sender-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

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

.comment-time {
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
}

.comment-content-wrapper {
  margin-left: 42px;
}

.comment-content {
  display: inline-block;
  background: var(--surface-raised);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

/* ========================================
   Reply Box
   ======================================== */

.reply-box-fixed {
  border-top: var(--border-width-1) solid var(--border-primary);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.reply-input {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  outline: none;
}

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

.reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-top: var(--border-width-1) solid var(--border-primary);
}

.reply-hint {
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
}

.reply-actions {
  display: flex;
  gap: var(--space-1);
}

/**
 * Compose Email Layout - Pure Email Design System
 *
 * Compose/reply email modal window styles
 */

/* ========================================
   Modal Overlay
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    backdrop-filter: blur(2px);
}

/* ========================================
   Compose Window
   ======================================== */

.compose-window {
    width: 680px;
    max-width: 90vw;
    max-height: 85vh;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-secondary);
}

/* ========================================
   Compose Header
   ======================================== */

.compose-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-secondary);
    cursor: move;
}

.compose-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.compose-controls {
    display: flex;
    gap: var(--space-1);
}

.win-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: var(--transition-colors);
}

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

.win-btn.close-btn:hover {
    background: var(--color-error);
    color: white;
}

/* ========================================
   Personal Draft Bar
   ======================================== */

.compose-draft-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
}

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

.draft-bar-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 2;
}

.draft-bar-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.draft-bar-hint {
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
}

.draft-bar-action {
    font-size: var(--font-size-sm);
    color: var(--accent-primary);
    cursor: pointer;
    transition: var(--transition-colors);
}

.draft-bar-action:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* ========================================
   Compose Body
   ======================================== */

.compose-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Compose Fields (From, To, Cc, Bcc, Subject)
   ======================================== */

.compose-field {
    display: flex;
    align-items: center;
    padding: var(--space-2-5) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    min-height: 44px;
    gap: var(--space-2);
}

.compose-field.subject-field {
    border-bottom: 1px solid var(--border-secondary);
}

.field-prefix {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    min-width: 55px;
    flex-shrink: 0;
}

.chips-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.email-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.chip-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: var(--font-size-base);
    line-height: 1;
}

.chip-remove:hover {
    opacity: 1;
}

.field-input {
    flex: 1;
    min-width: 100px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    outline: none;
}

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

.field-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.link-btn {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-colors);
}

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

/* From Field Specific */

.from-selector-container {
    position: relative;
    flex: 1;
}

.from-selector {
    cursor: pointer;
}

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

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

.from-inbox-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.from-inbox-email {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.from-email-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2-5);
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.from-chevron {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 2;
    transition: transform var(--duration-fast);
}

.from-chevron.rotated {
    transform: rotate(180deg);
}

.from-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    background: var(--surface-raised);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    z-index: 1000;
    padding: var(--space-1);
    max-height: 400px;
    overflow-y: auto;
}

.from-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-colors);
}

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

.from-dropdown-item.selected {
    background: var(--bg-active);
}

.from-dropdown-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.from-dropdown-inbox-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.from-dropdown-inbox-email {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.from-dropdown-badge {
    font-size: var(--font-size-xs);
    color: var(--accent-primary);
    background: rgba(155, 135, 245, 0.15);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-top: 2px;
    display: inline-block;
    width: fit-content;
}

.from-dropdown-check {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 2;
}

/* Subject Input */

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

/* ========================================
   Attachments Section (Inside Compose)
   ======================================== */

.attachments-section-compose {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    max-height: 120px;
    overflow-y: auto;
}

.attachments-grid-compose {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.attachment-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    max-width: 200px;
}

.attachment-chip-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 2;
    flex-shrink: 0;
}

.attachment-chip-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.attachment-chip-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-chip-size {
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
}

.attachment-chip-remove {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition-colors);
    flex-shrink: 0;
}

.attachment-chip-remove:hover {
    background: var(--bg-hover);
    color: var(--color-error);
}

/* ========================================
   Editor Container
   ======================================== */

.editor-container {
    flex: 1;
    min-height: 200px;
    padding: var(--space-4);
}

.editor-content {
    min-height: 180px;
    outline: none;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

.editor-content:empty::before {
    content: attr(placeholder);
    color: var(--text-placeholder);
    pointer-events: none;
}

/* ========================================
   Add Signature
   ======================================== */

.add-signature-row {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-primary);
}

.add-signature-btn {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-colors);
}

.add-signature-btn:hover {
    color: var(--accent-primary);
}

/* ========================================
   Compose Footer
   ======================================== */

.compose-footer {
    border-top: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
}

/* Top Toolbar - Formatting */

.compose-toolbar-top {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    border-bottom: 1px solid var(--border-primary);
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--border-secondary);
    margin: 0 var(--space-1);
}

.toolbar-select {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    outline: none;
}

.toolbar-select:hover {
    background: var(--bg-hover);
}

.toolbar-select-sm {
    width: 60px;
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-colors);
}

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

.toolbar-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.tool-btn-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.toolbar-more {
    margin-left: auto;
}

/* Bottom Toolbar - Actions */

.compose-toolbar-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
}

.toolbar-actions-left {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

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

/* ========================================
   Send Button Group
   ======================================== */

.send-btn-group {
    display: flex;
    position: relative;
}

.btn-send-main {
    padding: var(--space-2) var(--space-4);
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-base) 0 0 var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-button);
}

.btn-send-main:hover {
    background: var(--accent-secondary);
}

.btn-send-split {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    background: var(--accent-primary);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    cursor: pointer;
    transition: var(--transition-button);
}

.btn-send-split:hover {
    background: var(--accent-secondary);
}

.send-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background: var(--surface-raised);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: var(--space-1);
    z-index: var(--z-dropdown);
}

.send-option {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-colors);
}

.send-option:hover {
    background: var(--bg-hover);
}

/* ========================================
   Confirmation Dialog
   ======================================== */

.confirmation-dialog {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    background: var(--surface-raised);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    font-weight: var(--font-weight-semibold);
}

.dialog-close-x {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}

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

.dialog-body {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--border-primary);
}

.btn-secondary {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-button);
}

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

.btn-primary {
    padding: var(--space-2) var(--space-3);
    background: var(--accent-primary);
    border: none;
    color: white;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-button);
}

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

/* ========================================
   5. COMPONENTS
   Reusable component styles
   ======================================== */

/**
 * Buttons Component - Pure Email Design System
 *
 * Complete button system with variants, sizes, and states
 */

/* ========================================
   Base Button
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--padding-btn-md);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: var(--border-btn) solid transparent;
    border-radius: var(--radius-base);
    cursor: default;
    user-select: none;
    transition: var(--transition-button);
    outline: none;
}

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

/* ========================================
   Button Variants
   ======================================== */

/* Primary Button */

.btn-primary {
    background-color: var(--accent-primary);
    color: var(--color-white);
    border-color: var(--accent-primary);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-primary:active {
    background-color: var(--accent-primary-active);
    border-color: var(--accent-primary-active);
    transform: translateY(0);
}

/* Secondary Button (Outlined) */

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

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

.btn-secondary:active {
    background-color: var(--bg-active);
}

/* Ghost Button (No border) */

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

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

.btn-ghost:active {
    background-color: var(--bg-active);
}

/* Danger Button (Destructive actions) */

.btn-danger {
    background-color: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
}

.btn-danger:hover {
    background-color: var(--color-error-hover);
    border-color: var(--color-error-hover);
}

.btn-danger:active {
    background-color: var(--color-error-hover);
    opacity: 0.9;
}

/* Success Button */

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

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

/* ========================================
   Button Sizes
   ======================================== */

/* Small */

.btn-sm {
    padding: var(--padding-btn-sm);
    font-size: var(--font-size-xs);
    gap: var(--space-1);
}

/* Medium (default) */

.btn-md {
    padding: var(--padding-btn-md);
    font-size: var(--font-size-sm);
    gap: var(--space-2);
}

/* Large */

.btn-lg {
    padding: var(--padding-btn-lg);
    font-size: var(--font-size-base);
    gap: var(--space-2);
}

/* Icon Only Button */

.btn-icon {
    padding: var(--space-2);
    aspect-ratio: 1;
}

.btn-icon-sm {
    padding: var(--space-1);
    aspect-ratio: 1;
}

.btn-icon-lg {
    padding: var(--space-3);
    aspect-ratio: 1;
}

/* ========================================
   Button States
   ======================================== */

/* Disabled */

.btn:disabled,
.btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Loading */

.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Button Groups
   ======================================== */

.btn-group {
    display: inline-flex;
    gap: var(--space-1);
}

.btn-group .btn {
    flex: 0 0 auto;
}

/* Connected buttons */

.btn-group-connected {
    display: inline-flex;
}

.btn-group-connected .btn {
    border-radius: 0;
    margin-left: -1px;
}

.btn-group-connected .btn:first-child {
    border-radius: var(--radius-base) 0 0 var(--radius-base);
    margin-left: 0;
}

.btn-group-connected .btn:last-child {
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

/* ========================================
   Full Width Button
   ======================================== */

.btn-block {
    display: flex;
    width: 100%;
}

/**
 * Forms Component - Pure Email Design System
 *
 * Form inputs, textareas, selects, checkboxes, and radio buttons
 */

/* ========================================
   Base Input Styles
   ======================================== */

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-3-5);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-base);
    transition: var(--transition-input);
    outline: none;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-placeholder);
}

/* ========================================
   Input States
   ======================================== */

/* Hover */

.input:hover,
.textarea:hover,
.select:hover {
    background-color: var(--bg-input-hover);
    border-color: var(--border-input-hover);
}

/* Focus */

.input:focus,
.textarea:focus,
.select:focus {
    background-color: var(--bg-input-focus);
    border-color: var(--border-input-focus);
    box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}

/* Disabled */

.input:disabled,
.textarea:disabled,
.select:disabled {
    background-color: var(--bg-input-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Error */

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

.input.error:focus,
.textarea.error:focus,
.select.error:focus {
    border-color: var(--border-input-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* ========================================
   Textarea Specific
   ======================================== */

.textarea {
    resize: vertical;
    min-height: 80px;
}

.textarea.no-resize {
    resize: none;
}

/* ========================================
   Select Specific
   ======================================== */

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* ========================================
   Input Sizes
   ======================================== */

.input-sm,
.textarea-sm,
.select-sm {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--font-size-sm);
}

.input-lg,
.textarea-lg,
.select-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-lg);
}

/* ========================================
   Form Group
   ======================================== */

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

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

/* ========================================
   Label
   ======================================== */

.label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    color: var(--text-primary);
}

.label.required::after {
    content: ' *';
    color: var(--color-error);
}

/* ========================================
   Help Text
   ======================================== */

.help-text {
    display: block;
    margin-top: var(--space-1-5);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.help-text.error {
    color: var(--color-error);
}

/* ========================================
   Checkbox & Radio
   ======================================== */

.checkbox,
.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkbox input[type='checkbox'],
.radio input[type='radio'] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-mark,
.radio-mark {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--bg-input);
    border: var(--border-width-2) solid var(--border-input);
    border-radius: var(--radius-sm);
    margin-right: var(--space-2);
    transition: var(--transition-all);
}

.radio-mark {
    border-radius: var(--radius-full);
}

/* Hover */

.checkbox:hover .checkbox-mark,
.radio:hover .radio-mark {
    border-color: var(--border-input-hover);
}

/* Checked */

.checkbox input[type='checkbox']:checked~.checkbox-mark,
.radio input[type='radio']:checked~.radio-mark {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Checkmark */

.checkbox-mark::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox input[type='checkbox']:checked~.checkbox-mark::after {
    display: block;
}

/* Radio dot */

.radio-mark::after {
    content: '';
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: white;
}

.radio input[type='radio']:checked~.radio-mark::after {
    display: block;
}

/* Focus */

.checkbox input[type='checkbox']:focus~.checkbox-mark,
.radio input[type='radio']:focus~.radio-mark {
    box-shadow: var(--shadow-focus);
}

/* Disabled */

.checkbox input[type='checkbox']:disabled~.checkbox-mark,
.radio input[type='radio']:disabled~.radio-mark {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox input[type='checkbox']:disabled~.checkbox-label,
.radio input[type='radio']:disabled~.radio-label {
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Label */

.checkbox-label,
.radio-label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* ========================================
   Input with Icon
   ======================================== */

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-tertiary);
    pointer-events: none;
}

.input-group .input {
    padding-left: var(--space-10);
}

.input-icon-right {
    position: absolute;
    right: var(--space-3);
    color: var(--text-tertiary);
}

.input-group .input.has-icon-right {
    padding-right: var(--space-10);
}

/* ========================================
   Search Input
   ======================================== */

.search-input {
    padding-left: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left var(--space-3) center;
    background-size: 16px;
}

/**
 * Toggles Component - Pure Email Design System
 *
 * Toggle switches for boolean settings
 */

/* Toggle Container */

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* Hidden Checkbox */

.toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Toggle Track */

.toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--bg-hover);
  border: var(--border-width-2) solid var(--border-primary);
  border-radius: var(--radius-full);
  transition: var(--transition-all);
}

/* Toggle Thumb */

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: var(--transition-transform);
  box-shadow: var(--shadow-sm);
}

/* Checked State */

.toggle input[type='checkbox']:checked ~ .toggle-track {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.toggle input[type='checkbox']:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

/* Focus */

.toggle input[type='checkbox']:focus ~ .toggle-track {
  box-shadow: var(--shadow-focus);
}

/* Disabled */

.toggle input[type='checkbox']:disabled ~ .toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle input[type='checkbox']:disabled ~ .toggle-label {
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Toggle Label */

.toggle-label {
  margin-left: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

/**
 * Cards Component - Pure Email Design System
 *
 * Card containers for content grouping
 */

/* Base Card */

.card {
    background-color: var(--surface-base);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--padding-card);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-card);
}

/* Hoverable Card */

.card-hoverable {
    cursor: pointer;
}

.card-hoverable:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-primary);
    transform: translateY(-2px);
}

/* Card Header */

.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width-1) solid var(--border-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Card Body */

.card-body {
    padding: var(--space-5);
}

/* Card Footer */

.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-width-1) solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Attachment Card (from email viewer) */

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
}

.attachment-card {
    position: relative;
    background: var(--surface-base);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-base);
    padding: var(--space-2-5) var(--space-3);
    transition: var(--transition-all);
    cursor: default;
    height: 64px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.attachment-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-primary);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.attachment-card:hover .attachment-download-icon {
    opacity: 1;
}

.attachment-card-content {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex: 1;
    min-width: 0;
}

.attachment-icon {
    font-size: var(--font-size-md);
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.attachment-details {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.attachment-name {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-0-5);
}

.attachment-size {
    font-size: var(--font-size-2xs);
    color: var(--text-quaternary);
}

.attachment-download-icon {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: default;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    opacity: 0;
    transition: var(--transition-opacity);
    flex-shrink: 0;
}

.attachment-download-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/**
 * Modals Component - Pure Email Design System
 *
 * Modal dialogs with overlay, container, header, body, and footer
 */

/* ========================================
   Modal Overlay (Backdrop)
   ======================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  padding: var(--space-4);
  overflow-y: auto;
  backdrop-filter: blur(8px);
}

/* Animation */

.modal-overlay.fade-enter-active,
.modal-overlay.fade-leave-active {
  transition: var(--transition-modal);
}

.modal-overlay.fade-enter-from,
.modal-overlay.fade-leave-to {
  opacity: 0;
}

/* ========================================
   Modal Container
   ======================================== */

.modal {
  position: relative;
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -8px rgba(0, 0, 0, 0.15);
  z-index: var(--z-modal);
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-8));
}

/* Modal Sizes */

.modal-sm {
  max-width: 400px;
}

.modal-md {
  max-width: 600px;
}

.modal-lg {
  max-width: 800px;
}

.modal-xl {
  max-width: 1200px;
}

.modal-full {
  max-width: 95vw;
  max-height: 95vh;
}

/* Modal Animation */

.modal.fade-enter-active,
.modal.fade-leave-active {
  transition: var(--transition-modal);
}

.modal.fade-enter-from,
.modal.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}

/* ========================================
   Modal Header
   ======================================== */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: var(--transition-colors);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ========================================
   Modal Body
   ======================================== */

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  color: var(--text-secondary);
}

.modal-body p {
  margin-bottom: var(--space-3);
}

.modal-body p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Modal Footer
   ======================================== */

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-width-1) solid var(--border-primary);
  flex-shrink: 0;
}

.modal-footer.centered {
  justify-content: center;
}

.modal-footer.space-between {
  justify-content: space-between;
}

/* ========================================
   Modal Variants
   ======================================== */

/* Danger Modal */

.modal.modal-danger .modal-header {
  background-color: var(--color-error-bg);
  border-bottom-color: var(--color-error-border);
}

.modal.modal-danger .modal-title {
  color: var(--color-error);
}

/* Success Modal */

.modal.modal-success .modal-header {
  background-color: var(--color-success-bg);
  border-bottom-color: var(--color-success-border);
}

.modal.modal-success .modal-title {
  color: var(--color-success);
}

/* ========================================
   Confirmation Dialog
   ======================================== */

.modal-overlay:has(.confirmation-dialog) {
  overflow-y: hidden;
  z-index: 10000;
}

.modal:has(.confirmation-dialog) {
  border: none;
}

.confirmation-dialog {
  padding: var(--space-6) var(--space-6) var(--space-5);
}

.confirmation-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.confirmation-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.confirmation-icon.error {
  color: var(--color-error);
}

.confirmation-icon.success {
  color: var(--color-success);
}

.confirmation-icon.warning {
  color: var(--color-warning);
}

.confirmation-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.confirmation-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height: var(--line-height-relaxed);
}

.confirmation-actions {
  display: flex;
  gap: var(--space-3);
}

.confirmation-actions .btn {
  flex: 1;
  justify-content: center;
  padding-top: var(--space-2-5, 10px);
  padding-bottom: var(--space-2-5, 10px);
}

/* ========================================
   Bottom Sheet (Mobile Alternative)
   ======================================== */

@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal.bottom-sheet {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 90vh;
    width: 100%;
    max-width: 100%;
  }

  .modal.bottom-sheet.fade-enter-from,
  .modal.bottom-sheet.fade-leave-to {
    transform: translateY(100%);
  }
}

/**
 * Avatars Component - Pure Email Design System
 *
 * Avatar circles and badge indicators
 */

/* Base Avatar */

.avatar {
  width: 32px;
  height: 32px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

/* Avatar Sizes */

.avatar-xs {
  width: 20px;
  height: 20px;
  font-size: var(--font-size-2xs);
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
}

.avatar-md {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.avatar-lg {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-base);
}

.avatar-xl {
  width: 48px;
  height: 48px;
  font-size: var(--font-size-lg);
}

/* Avatar with Image */

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* Avatar Group (Overlapping) */

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--bg-primary);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* Away / Time-Off Indicator */

.avatar-away {
  position: relative;
}

.avatar-away::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--color-warning, #f59e0b);
  border: 2px solid var(--bg-primary, #fff);
  border-radius: var(--radius-full);
}

.avatar-away.avatar-xs::after {
  width: 6px;
  height: 6px;
  border-width: 1px;
}

.avatar-away.avatar-sm::after {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}

.avatar-away.avatar-lg::after,
.avatar-away.avatar-xl::after {
  width: 12px;
  height: 12px;
}

/**
 * Scrollbar Component - Pure Email Design System
 *
 * Custom scrollbar styles for webkit browsers
 */

/* Scrollbar (overrides reset.css for specific areas) */

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  transition: var(--transition-colors);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Thin Scrollbar Variant */

.thin-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* Hidden Scrollbar (but still scrollable) */

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/**
 * Theme switching is handled via data-theme attribute on <html>
 * Default theme: dark
 *
 * Example usage in JavaScript:
 *
 * // Set theme
 * document.documentElement.setAttribute('data-theme', 'dark')
 * document.documentElement.setAttribute('data-theme', 'light')
 *
 * // Toggle theme
 * const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark'
 * const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
 * document.documentElement.setAttribute('data-theme', newTheme)
 * localStorage.setItem('theme', newTheme)
 *//* apps/client/src/renderer/src/assets/main.css */

/* --- RESET & GLOBAL --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

#app {
  height: 100%;
  width: 100%;
}

/* --- LAYOUT GENERAL --- */
.app-layout {
  display: flex;
  height: 100%;
  width: 100%;
  font-family: var(--font-family-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

/* --- COLUMNA 1: SIDEBAR --- */
.sidebar {
  width: 220px;
  background-color: var(--bg-tertiary);
  border-right: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
  flex-shrink: 0;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-secondary);
  height: 48px;
  flex-shrink: 0;
}

.inbox-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  flex: 1;
}

.inbox-icon {
  font-size: 16px;
}

.inbox-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.dropdown-icon {
  font-size: 10px;
  opacity: 0.6;
}

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

.icon-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: default;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.nav-menu {
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-2);
  cursor: default;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius-base);
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  transition: var(--transition-colors);
}

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

.nav-item.active {
  background-color: var(--bg-active);
  color: var(--text-primary);
  border-left-color: var(--accent-primary);
}

.nav-item .icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item .label {
  flex: 1;
}

.badge {
  background: var(--surface-raised);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-weight: 500;
}

.nav-section {
  margin-top: 16px;
}

.section-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-quaternary);
  padding: var(--space-2) var(--space-2) var(--space-1) var(--space-2);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* CLASE MAGICA PARA LOS SVGS */
.nav-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- COLUMNA 2: LISTA DE EMAILS --- */
.email-list-col {
  width: 380px;
  border-right: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.list-header {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  flex-shrink: 0;
  gap: var(--space-2);
}

.list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

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

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

.email-scroll-area {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 8px;
  background: var(--bg-tertiary);
}

.email-card {
  display: flex;
  padding: var(--space-3);
  cursor: default;
  position: relative;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
  border: 1px solid transparent;
  transition: var(--transition-card);
  overflow: hidden;
}

.email-card:hover {
  background-color: var(--bg-hover);
}

.email-card.selected {
  background-color: var(--bg-selected);
  border-color: var(--accent-primary);
}

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

.card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.participants {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.email-card.unread .participants {
  font-weight: 700;
  color: var(--text-primary);
}

.time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.card-subject {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-subject-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.email-card.unread .card-subject {
  font-weight: 600;
  color: var(--text-primary);
}

.attachment-icon {
  font-size: 14px;
  color: var(--text-quaternary);
  flex-shrink: 0;
  opacity: 0.8;
}

.card-preview {
  font-size: 13px;
  color: var(--text-quaternary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- COLUMNA 3: VISTA DE EMAIL --- */
.email-view-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
}

.email-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-5);
  height: 48px;
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

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

.header-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.action-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  cursor: default;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: var(--transition-button);
}

.action-btn:hover {
  background: var(--bg-active);
}

.participants-bar {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-secondary);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.participant-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.from-label {
  font-size: 13px;
  color: var(--text-tertiary);
}

.avatars {
  display: flex;
  gap: 4px;
  align-items: center;
}

.avatar {
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
}

.add-participant {
  width: 24px;
  height: 24px;
  background: var(--bg-hover);
  border: 1px dashed var(--border-hover);
  color: var(--text-tertiary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}

.add-participant:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.detail-body {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* --- MENSAJES (THREADS) --- */
.message-wrapper {
  margin-bottom: 20px;
}

.message-item {
  transition: all 0.2s;
}

/* Estilo caja de email */
.message-wrapper.is-email .message-item {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--border-secondary);
  box-shadow: var(--shadow-sm);
}

/* Cabecera interna del mensaje */
.email-details-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-tertiary);
  transition: all 0.2s;
}

.email-details-header.clickable {
  cursor: default;
}

.email-details-header.clickable:hover {
  background: var(--bg-hover);
  margin: 0 -16px;
  padding: 0 16px 12px 16px;
}

.email-details-content {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.detail-avatar {
  width: 40px;
  height: 40px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.detail-info {
  flex: 1;
  min-width: 0;
}

.detail-from {
  margin-bottom: 4px;
}

.from-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 6px;
}

.from-email {
  font-size: 13px;
  color: var(--text-tertiary);
}

.detail-preview {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Etiquetas To/Cc */
.detail-label {
  color: var(--text-quaternary);
  margin-right: 4px;
}

.detail-label-inline {
  color: var(--text-quaternary);
  margin-left: 8px;
  margin-right: 4px;
}

.detail-value {
  color: var(--text-secondary);
}

.detail-expanded {
  font-size: 13px;
}

.detail-line {
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
}

.detail-line:last-child {
  margin-bottom: 0;
}

.detail-line .detail-label {
  color: var(--text-quaternary);
  min-width: 50px;
  flex-shrink: 0;
}

.detail-value-full {
  color: var(--text-secondary);
  flex: 1;
  word-wrap: break-word;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.detail-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

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

.icon-btn-sm {
  background: none;
  border: none;
  color: var(--text-quaternary);
  cursor: default;
  padding: 4px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

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

.message-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-top: 8px;
}

.message-content p {
  margin-bottom: 12px;
}

.message-preview {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin-top: 8px;
  font-style: italic;
}

/* --- ADJUNTOS --- */
.attachments-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-secondary);
}

.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.attachments-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.download-all {
  font-size: 13px;
  color: var(--accent-primary);
  text-decoration: none;
  cursor: default;
}

.download-all:hover {
  text-decoration: underline;
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.attachment-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 8px 10px;
  transition: all 0.2s;
  cursor: default;
  height: 60px;
  display: flex;
  align-items: center;
}

.attachment-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-secondary);
}

.attachment-card:hover .attachment-download-icon {
  opacity: 1;
}

.attachment-card-content {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.attachment-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.attachment-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.attachment-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.attachment-size {
  font-size: 11px;
  color: var(--text-tertiary);
}

.attachment-download-icon {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: default;
  padding: 4px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.attachment-download-icon:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* --- COMENTARIOS --- */
.comment-wrapper {
  margin-bottom: 12px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-sender-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.comment-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.comment-content-wrapper {
  margin-left: 42px;
}

.comment-content {
  display: inline-block;
  background: var(--surface-raised);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
}

/* --- REPLY BOX --- */
.reply-box-fixed {
  border-top: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.reply-input {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

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

.reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  border-top: 1px solid var(--border-primary);
}

.reply-hint {
  font-size: 11px;
  color: var(--text-quaternary);
}

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

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 10px;
  opacity: 0.3;
}

/* SCROLLBARS */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}


/* --- DROPDOWN NAVIGATION --- */
.dropdown-menu {
  position: absolute;
  top: 48px;
  left: 0;
  width: 220px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: default;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.2s;
}

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

.dropdown-item.active {
  background: var(--bg-active);
  color: var(--text-primary);
}

.dropdown-item-icon {
  font-size: 16px;
  margin-right: 10px;
}

.dropdown-item-label {
  flex: 1;
}

/* --- FULL WIDTH VIEWS --- */
.full-width-view {
  flex: 1;
  display: flex;
  background: var(--bg-secondary);
}

.placeholder-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-tertiary);
}

.placeholder-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.4;
}

.placeholder-view h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.placeholder-view p {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* Actualizar sidebar-header para posicionamiento relativo */
.sidebar-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-primary);
  height: 48px;
  flex-shrink: 0;
}

.message-attachment-indicator {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* --- SVG ICONS --- */
.header-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-svg-sm {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-svg-inline {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-right: 6px;
}

.icon-svg-inline-small {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-right: 6px;
}

.icon-svg-tiny {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chevron-svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chevron-svg-small {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-left: 4px;
}

.attachment-icon-svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.8;
}

.attachment-icon-svg-large {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-attachment-indicator-svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-tertiary);
}

.empty-icon-svg {
  width: 80px;
  height: 80px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
  margin-bottom: 20px;
}

.placeholder-icon-svg {
  width: 80px;
  height: 80px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  margin-bottom: 20px;
}

/* Actualizar estilos existentes */
.attachment-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.message-attachment-indicator {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* --- SUBJECT EDITABLE --- */
.subject-display {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
  flex: 1;
  min-width: 0;
}

.subject-display:hover {
  background: var(--bg-hover);
}

.subject-display:hover .edit-subject-btn {
  opacity: 1;
}

.edit-subject-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: default;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.subject-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.subject-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--accent-primary);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  font-family: inherit;
  min-width: 0;
}

/* ========================================
   ATTACHMENTS - MODERN UI
   ======================================== */

/* Sección de attachments en viewer */
.attachments-section {
  margin: 16px 0;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.attachments-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-header-icon {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  stroke-width: 2;
}

.attachments-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

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

.download-all-btn svg {
  width: 14px;
  height: 14px;
}

.download-all-btn:hover {
  background: var(--bg-hover);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Grid de attachments en viewer */
.attachments-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 125px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Scrollbar personalizada para attachments viewer */
.attachments-grid-modern::-webkit-scrollbar {
  width: 8px;
}

.attachments-grid-modern::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.attachments-grid-modern::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.attachments-grid-modern::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .attachments-grid-modern {
    grid-template-columns: 1fr;
  }
}

/* Sección de attachments en composer */
.attachments-section-compose {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.attachments-header-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-primary);
}

.attachments-count-compose {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* Grid de attachments en composer */
.attachments-grid-compose {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 4px 0 0;
}

/* Scrollbar personalizada para attachments composer */
.attachments-grid-compose::-webkit-scrollbar {
  width: 6px;
}

.attachments-grid-compose::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

.attachments-grid-compose::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

.attachments-grid-compose::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

@media (max-width: 600px) {
  .attachments-grid-compose {
    grid-template-columns: 1fr;
  }
}

/* Uploading state for attachments */
.attachment-card.uploading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.attachment-card.uploading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-primary, #667eea);
  border-radius: 50%;
  animation: attachment-spin 0.8s linear infinite;
}

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

/* ==============================================
   SKELETON LOADING ANIMATIONS
   ============================================== */

/* Base skeleton element */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-skeleton-base, rgba(200, 200, 200, 0.2)) 0%,
    var(--color-skeleton-shine, rgba(200, 200, 200, 0.4)) 50%,
    var(--color-skeleton-base, rgba(200, 200, 200, 0.2)) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

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

/* Skeleton variants */
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton-text-sm {
  height: 12px;
  margin-bottom: 6px;
}

.skeleton-text-lg {
  height: 18px;
  margin-bottom: 10px;
}

.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Email card skeleton (Column 2) */
.skeleton-email-card {
  padding: 16px;
  border-radius: 8px;
  background: var(--card-bg, var(--surface-raised));
  margin-bottom: 2px;
}

.skeleton-email-card .skeleton-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.skeleton-email-card .skeleton-row:last-child {
  margin-bottom: 0;
}

/* Email detail skeleton (Column 3) */
.skeleton-email-detail {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.skeleton-detail-header {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.skeleton-message {
  display: flex;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: 12px;
}

.skeleton-message-content {
  flex: 1;
}

.skeleton-message-body {
  margin-top: 16px;
}
.attachment-card[data-v-46b2b826] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-base);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-md);
  transition: var(--transition-card);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-width: 320px;
}
.attachment-card[data-v-46b2b826]:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.attachment-card-compose[data-v-46b2b826] {
  cursor: default;
}

/* --- ESTADO DE DRAG --- */
.attachment-card.is-dragging[data-v-46b2b826] {
  opacity: 0.5;
  cursor: grabbing !important;
  transform: scale(0.98);
}
.attachment-card.can-drag[data-v-46b2b826] {
  cursor: grab;
  user-select: none;
}
.attachment-card.can-drag[data-v-46b2b826]:active {
  cursor: grabbing;
}

/* Drag en modo view */
.attachment-card[draggable="true"][data-v-46b2b826] {
  cursor: grab;
  user-select: none;
}
.attachment-card[draggable="true"][data-v-46b2b826]:active {
  cursor: grabbing;
}

/* --- ESTILOS DEL ICONO --- */
.icon-wrapper[data-v-46b2b826] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-icon-svg[data-v-46b2b826] {
  width: 22px;
  height: 22px;
}

/* IMPORTANTE: Configuramos el SVG para que se pinte de blanco sólido */
.file-icon-svg path[data-v-46b2b826] {
  fill: white;
  stroke: none;
}

/* --- COLORES DE FONDO POR TIPO (Ajustados a la imagen) --- */
.bg-pdf[data-v-46b2b826] { background-color: #e53935;
} /* Rojo intenso */
.bg-word[data-v-46b2b826] { background-color: #1e88e5;
} /* Azul */
.bg-excel[data-v-46b2b826] { background-color: #43a047;
} /* Verde */
.bg-ppt[data-v-46b2b826] { background-color: #fb8c00;
} /* Naranja */
.bg-image[data-v-46b2b826] { background-color: #8e24aa;
} /* Violeta/Púrpura intenso */
.bg-zip[data-v-46b2b826] { background-color: #fdd835; color: rgba(0,0,0,0.8)
} /* Amarillo (icono oscuro) */
.bg-music[data-v-46b2b826] { background-color: #d81b60;
} /* Rosa fuerte */
.bg-video[data-v-46b2b826] { background-color: #00acc1;
} /* Cian */
.bg-text[data-v-46b2b826] { background-color: #757575;
} /* Gris medio */
.bg-default[data-v-46b2b826] { background-color: #546e7a;
} /* Gris azulado */

/* Ajuste para icono negro en fondo amarillo */
.bg-zip .file-icon-svg path[data-v-46b2b826] {
   fill: rgba(0,0,0,0.7);
}


/* --- INFO TEXT --- */
.attachment-info[data-v-46b2b826] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.attachment-name[data-v-46b2b826] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-0-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachment-size[data-v-46b2b826] {
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
  font-weight: var(--font-weight-normal);
}

/* --- ACTION BUTTONS --- */
.attachment-action[data-v-46b2b826] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: var(--transition-all);
  background: transparent;
  opacity: 0.6;
  color: var(--text-secondary);
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.attachment-action svg[data-v-46b2b826] {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.attachment-action svg[data-v-46b2b826] * {
  pointer-events: none;
}
.attachment-action[data-v-46b2b826]:hover {
  opacity: 1;
  background: var(--bg-hover);
  color: var(--text-primary);
}
.attachment-download[data-v-46b2b826]:hover {
  color: var(--color-success);
  background: var(--color-success-bg);
}
.attachment-remove[data-v-46b2b826]:hover {
  color: var(--color-error);
  background: var(--color-error-bg);
}

/* Animación de entrada */
@keyframes slideIn-46b2b826 {
from {
    opacity: 0;
    transform: translateX(-10px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.attachment-card[data-v-46b2b826] {
  animation: slideIn-46b2b826 var(--duration-normal) var(--ease-out);
}