/**
 * Lila UI/UX v4.0 - CSS Variables System (2026 Redesign)
 * EK-4: Intelligent Sidebar Panel Architecture
 *
 * Design tokens: spatial depth, spring physics, glassmorphism 3.0,
 * fluid typography, neomorphism, AI-native UX.
 */

:root {
    /* ============================================================
     PANEL DIMENSIONS - Adaptive Modes
     ============================================================ */

    /* Current active mode width (dynamically set by JavaScript) */
    --lila-panel-width: 0px;

    /* Mode 0: The Orb - Minimal presence when idle */
    --lila-mode-orb: 48px;

    /* Mode 1: Split View - Standard chat interface (30-40% of screen) */
    --lila-mode-split: 420px;

    /* Mode 2: Command Center - Expanded for complex tasks (60-80% of screen) */
    --lila-mode-command: clamp(800px, 60vw, 1200px);

    /* Safe maximum on smaller screens */
    --lila-max-width: min(var(--lila-panel-width), calc(100vw - 300px));


    /* ============================================================
     EXTENDED PURPLE PALETTE (2026)
     ============================================================ */

    --lila-purple-50:  #faf5ff;
    --lila-purple-100: #f3e8ff;
    --lila-purple-200: #e9d5ff;
    --lila-purple-300: #d8b4fe;
    --lila-purple-400: #c084fc;
    --lila-purple-500: #a855f7;
    --lila-purple-600: #9333ea;
    --lila-purple-700: #7e22ce;

    /* Accent tones */
    --lila-accent-warm: #e879f9;
    --lila-accent-cool: #818cf8;


    /* ============================================================
     GLASSMORPHISM 3.0 - Frosted Glass
     ============================================================ */

    /* Light Mode (Default) */
    --lila-glass-bg: rgba(255, 255, 255, 0.78);
    --lila-glass-bg-secondary: rgba(255, 255, 255, 0.65);
    --lila-glass-bg-frosted: rgba(255, 255, 255, 0.92);
    --lila-glass-blur: 24px;
    --lila-glass-border: rgba(255, 255, 255, 0.18);
    --lila-glass-shadow: -4px 0 24px rgba(139, 92, 246, 0.06), 0 0 64px rgba(0,0,0,0.04);

    /* Text Colors */
    --lila-text-primary: #1e293b;
    --lila-text-secondary: #64748b;
    --lila-text-muted: #94a3b8;


    /* ============================================================
     COLOR PALETTE - Brand & Functional
     ============================================================ */

    /* Primary Brand Colors */
    /* Lila Purple — pastel uyum: doygunluk azaltıldı */
    --lila-primary: #9B8AFB;
    --lila-primary-hover: #9333EA;
    --lila-secondary: #3B82F6;
    /* Electric Blue */
    --lila-secondary-hover: #2563EB;

    /* Gradients (Enhanced 2026) */
    --lila-gradient: linear-gradient(135deg, #a855f7 0%, #818cf8 50%, #3b82f6 100%);
    --lila-gradient-vertical: linear-gradient(180deg, var(--lila-primary), var(--lila-secondary));
    --lila-gradient-subtle: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(129,140,248,0.06) 100%);
    --lila-gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(168,85,247,0.15) 0%, transparent 50%),
                          radial-gradient(ellipse at 80% 80%, rgba(59,130,246,0.1) 0%, transparent 50%);

    /* Functional Colors */
    --lila-success: #22c55e;
    --lila-warning: #f59e0b;
    --lila-error: #ef4444;
    --lila-info: #3b82f6;

    /* Neutral Palette */
    --lila-bg-primary: #ffffff;
    --lila-bg-secondary: #f8fafc;
    --lila-bg-tertiary: #f1f5f9;
    --lila-border: #e2e8f0;
    --lila-border-light: #f0f0f0;


    /* ============================================================
     TYPOGRAPHY - Fluid (2026)
     ============================================================ */

    --lila-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lila-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --lila-font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --lila-font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --lila-font-size-base: clamp(0.875rem, 0.825rem + 0.25vw, 0.95rem);
    --lila-font-size-lg: 1.125rem;
    /* 18px */
    --lila-font-size-xl: 1.25rem;
    /* 20px */


    /* ============================================================
     SPACING & LAYOUT
     ============================================================ */

    --lila-spacing-xs: 4px;
    --lila-spacing-sm: 8px;
    --lila-spacing-md: 16px;
    --lila-spacing-lg: 24px;
    --lila-spacing-xl: 32px;

    /* Radii — organic 2026 curves */
    --lila-radius-xs: 6px;
    --lila-radius-sm: 10px;
    --lila-radius-md: 14px;
    --lila-radius-lg: 20px;
    --lila-radius-xl: 28px;
    --lila-radius-full: 9999px;

    /* Z-index layers */
    /* Navbar is 1040, Modals are 1055. Lila should be below Navbar dropdowns but above specific content. */
    --lila-z-orb: 1035;
    --lila-z-panel: 1035;
    --lila-z-stage: 1036;
    --lila-z-tooltip: 1037;


    /* ============================================================
     ANIMATION — Spring Physics & Easing (2026)
     ============================================================ */

    --lila-transition-fast: 0.15s;
    --lila-transition-base: 0.3s;
    --lila-transition-slow: 0.4s;
    --lila-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Spring physics easings */
    --lila-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lila-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --lila-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --lila-ease-decel: cubic-bezier(0, 0, 0.2, 1);


    /* ============================================================
     SPATIAL DEPTH — Shadow System (2026)
     ============================================================ */

    --lila-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --lila-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --lila-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --lila-shadow-lg: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(139,92,246,0.08);
    --lila-shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(139,92,246,0.1);
    --lila-shadow-glow: 0 0 24px rgba(168,85,247,0.3);

    /* Neomorphism tokens */
    --lila-neo-raised: 6px 6px 12px rgba(0,0,0,0.06), -4px -4px 10px rgba(255,255,255,0.9);
    --lila-neo-inset: inset 3px 3px 6px rgba(0,0,0,0.05), inset -2px -2px 5px rgba(255,255,255,0.8);


    /* ============================================================
     COMPONENT-SPECIFIC TOKENS
     ============================================================ */

    /* The Stage (Media/Visual Area) */
    --lila-stage-max-height: 40vh;
    --lila-stage-bg: rgba(0, 0, 0, 0.02);

    /* The Dialogue (Chat Stream) */
    --lila-dialogue-spacing: 20px;

    /* Multi-Thread Tabs */
    --lila-tab-bg: transparent;
    --lila-tab-bg-active: #ffffff;
    --lila-tab-border-active: var(--lila-primary);

    /* Status Bar */
    --lila-status-bg: rgba(0, 0, 0, 0.03);
    --lila-status-border: rgba(0, 0, 0, 0.05);
}


/* ============================================================
   DARK MODE OVERRIDE
   ============================================================ */

@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    :root {
        /* Glassmorphism */
        --lila-glass-bg: rgba(17, 24, 39, 0.82);
        --lila-glass-bg-secondary: rgba(31, 41, 55, 0.65);
        --lila-glass-bg-frosted: rgba(17, 24, 39, 0.94);
        --lila-glass-border: rgba(255, 255, 255, 0.1);
        --lila-glass-shadow: -4px 0 24px rgba(139, 92, 246, 0.12), 0 0 64px rgba(0,0,0,0.2);

        /* Text Colors */
        --lila-text-primary: #f1f5f9;
        --lila-text-secondary: #cbd5e1;
        --lila-text-muted: #94a3b8;

        /* Brand Colors (Deeper in dark mode) */
        --lila-primary: hsl(270, 85%, 65%);
        --lila-primary-hover: hsl(270, 85%, 60%);
        --lila-secondary: hsl(217, 91%, 60%);
        --lila-secondary-hover: hsl(217, 91%, 55%);

        /* Backgrounds */
        --lila-bg-primary: #f7fbfd;
        --lila-bg-secondary: #e8f4fb;
        --lila-bg-tertiary: #e8f7ed;
        --lila-border: #d7ecf3;
        --lila-border-light: #b8dff1;

        /* Stage */
        --lila-stage-bg: rgba(255, 255, 255, 0.02);

        /* Status Bar */
        --lila-status-bg: rgba(255, 255, 255, 0.03);
        --lila-status-border: rgba(255, 255, 255, 0.05);

        /* Tabs */
        --lila-tab-bg-active: rgba(255, 255, 255, 0.05);

        /* Dark purple palette adjustments */
        --lila-purple-50: #1e1333;
        --lila-purple-100: #2d1b4e;
        --lila-purple-200: #3d2466;

        /* Neomorphism dark mode (inverted) */
        --lila-neo-raised: 6px 6px 12px rgba(0,0,0,0.25), -4px -4px 10px rgba(255,255,255,0.04);
        --lila-neo-inset: inset 3px 3px 6px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.03);

        /* Shadows in dark */
        --lila-shadow-lg: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(139,92,246,0.15);
        --lila-shadow-xl: 0 16px 48px rgba(0,0,0,0.35), 0 4px 16px rgba(139,92,246,0.18);
        --lila-shadow-glow: 0 0 24px rgba(168,85,247,0.4);
    }
}


/* ============================================================
   LOW POWER MODE - Disable Heavy Effects
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Disable blur for performance */
        --lila-glass-blur: 0px;

        /* Faster transitions */
        --lila-transition-fast: 0s;
        --lila-transition-base: 0s;
        --lila-transition-slow: 0s;

        /* Flatten spring easings */
        --lila-ease-spring: ease;
        --lila-ease-bounce: ease;
    }

    /* Disable all animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet and below: Reduce panel width */
@media (max-width: 1200px) {
    :root {
        --lila-mode-split: 340px;
        --lila-mode-command: clamp(600px, 70vw, 900px);
    }
}

/* Mobile: Force bottom sheet mode (handled by JavaScript) */
@media (max-width: 767.98px) {
    :root {
        --lila-panel-width: 0px !important;
        --lila-mode-split: 100%;
        --lila-mode-command: 100%;
        --lila-max-width: 100%;
        --lila-stage-max-height: min(44vh, 320px);

        /* Reduce blur for mobile GPU */
        --lila-glass-blur: 16px;
    }
}


/* ============================================================
   UTILITY CLASSES (Optional, for quick prototyping)
   ============================================================ */

.lila-glass {
    background: var(--lila-glass-bg);
    -webkit-backdrop-filter: blur(var(--lila-glass-blur));
    backdrop-filter: blur(var(--lila-glass-blur));
    border: 1px solid var(--lila-glass-border);
}

.lila-gradient-bg {
    background: var(--lila-gradient);
}

.lila-text-gradient {
    background: var(--lila-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   PRODUCTION PASTEL PASS - 2026-07
   Lila keeps its identity, but uses the platform light palette.
   ============================================================ */

:root {
    --lila-purple-50: #f4f0fb;
    --lila-purple-100: #ede7f7;
    --lila-purple-200: #ddd3ee;
    --lila-purple-300: #c9bce3;
    --lila-purple-400: #aa98cd;
    --lila-purple-500: #7f6ead;
    --lila-purple-600: #675990;
    --lila-purple-700: #4d426f;
    --lila-accent-warm: #d9b7c8;
    --lila-accent-cool: #8fb8cc;

    --lila-primary: #6f84b7;
    --lila-primary-hover: #526a9d;
    --lila-secondary: #4d93a6;
    --lila-secondary-hover: #357888;
    --lila-gradient: linear-gradient(135deg, #dbe8f1 0%, #e9e1f2 52%, #f4e8df 100%);
    --lila-gradient-vertical: linear-gradient(180deg, #e8f4fb 0%, #f4eef8 100%);
    --lila-gradient-subtle: linear-gradient(135deg, rgba(77, 147, 166, 0.10) 0%, rgba(217, 183, 200, 0.12) 100%);
    --lila-gradient-mesh: radial-gradient(ellipse at 18% 45%, rgba(77, 147, 166, 0.10) 0%, transparent 52%),
                          radial-gradient(ellipse at 82% 78%, rgba(217, 183, 200, 0.12) 0%, transparent 54%);

    --lila-success: #4f956c;
    --lila-warning: #b78034;
    --lila-error: #b55e63;
    --lila-info: #4d93a6;

    --lila-glass-bg: rgba(255, 255, 255, 0.88);
    --lila-glass-bg-secondary: rgba(248, 252, 255, 0.86);
    --lila-glass-bg-frosted: rgba(255, 255, 255, 0.96);
    --lila-glass-border: rgba(151, 184, 198, 0.34);
    --lila-glass-shadow: -8px 0 30px rgba(47, 111, 132, 0.10), 0 16px 42px rgba(31, 54, 69, 0.08);

    --lila-text-primary: #183445;
    --lila-text-secondary: #5f7480;
    --lila-text-muted: #7b919c;
    --lila-bg-primary: #ffffff;
    --lila-bg-secondary: #f8fcff;
    --lila-bg-tertiary: #eef8fb;
    --lila-border: #d7ecf3;
    --lila-border-light: #eaf4f7;
    --lila-stage-bg: #f4fafc;
    --lila-status-bg: #eef8fb;
    --lila-status-border: #d7ecf3;
    --lila-tab-bg-active: #ffffff;

    --lila-radius-xs: 6px;
    --lila-radius-sm: 8px;
    --lila-radius-md: 8px;
    --lila-radius-lg: 8px;
    --lila-radius-xl: 8px;
    --radius-2026: 8px;
    --radius-2026-btn: 8px;

    --lila-shadow-xs: 0 1px 2px rgba(24, 52, 69, 0.06);
    --lila-shadow-sm: 0 4px 12px rgba(24, 52, 69, 0.07);
    --lila-shadow-md: 0 8px 22px rgba(24, 52, 69, 0.08);
    --lila-shadow-lg: 0 14px 34px rgba(24, 52, 69, 0.10);
    --lila-shadow-xl: 0 18px 46px rgba(24, 52, 69, 0.12);
    --lila-shadow-glow: 0 0 0 4px rgba(77, 147, 166, 0.12);
    --lila-neo-raised: 0 8px 18px rgba(24, 52, 69, 0.08);
    --lila-neo-inset: inset 0 0 0 1px rgba(215, 236, 243, 0.9);
}