/* =========================================================================
   THEME.CSS — PREMIUM DESIGN SYSTEM OVERRIDES
   This file introduces a modern, minimal, and premium design system,
   overriding the legacy variables and layout rules in style.css.
   ========================================================================= */

/* === 1. DESIGN TOKENS (LIGHT MODE) === */
:root {
    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F7F8;
    --bg-tertiary: #EFEFF1;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.65);
    --bg-glass-hover: rgba(255, 255, 255, 0.8);
    
    /* Borders */
    --border-primary: rgba(0, 0, 0, 0.08);
    --border-secondary: rgba(0, 0, 0, 0.04);
    --border-accent: rgba(0, 0, 0, 0.15);
    
    /* Text */
    --text-primary: #111111;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-inverse: #FFFFFF;
    
    /* Accents (Premium Monochrome / Minimal Blue) */
    --accent-primary: #000000;
    --accent-secondary: #333333;
    --accent-gradient: linear-gradient(135deg, #111111 0%, #333333 100%);
    --accent-gradient-hover: linear-gradient(135deg, #333333 0%, #555555 100%);
    --accent-glow: rgba(0, 0, 0, 0.05);
    
    /* Status Colors */
    --danger: #FF3B30;
    --success: #34C759;
    --warning: #FF9500;
    
    /* Chat Specific */
    --msg-user-bg: #F0F0F0;
    --msg-user-text: #111111;
    --msg-assistant-bg: transparent;
    --msg-assistant-text: #111111;
    --input-bg: rgba(255, 255, 255, 0.9);
    --code-bg: #F7F7F8;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Geometry */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;
    
    /* Shadows (Premium diffused shadows) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(0, 0, 0, 0.03);
    
    /* Layout */
    --sidebar-width: 260px;
    --content-max: 800px;
    --topbar-height: 56px;
}

/* === 2. DESIGN TOKENS (DARK MODE) === */
[data-theme="dark"] {
    /* Backgrounds - Deep True Black */
    --bg-primary: #000000;
    --bg-secondary: #0A0A0A;
    --bg-tertiary: #141414;
    --bg-card: rgba(15, 15, 15, 0.85);
    --bg-card-hover: rgba(20, 20, 20, 0.95);
    --bg-glass: rgba(20, 20, 20, 0.65);
    --bg-glass-hover: rgba(25, 25, 25, 0.85);
    
    /* Borders */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.05);
    --border-accent: rgba(255, 255, 255, 0.2);
    
    /* Text */
    --text-primary: #EDEDED;
    --text-secondary: #A0A0A0;
    --text-tertiary: #666666;
    --text-inverse: #000000;
    
    /* Accents (Premium Monochrome) */
    --accent-primary: #FFFFFF;
    --accent-secondary: #E5E5E5;
    --accent-gradient: linear-gradient(135deg, #FFFFFF 0%, #A0A0A0 100%);
    --accent-gradient-hover: linear-gradient(135deg, #E5E5E5 0%, #888888 100%);
    --accent-glow: rgba(255, 255, 255, 0.05);
    
    /* Chat Specific */
    --msg-user-bg: #1F1F1F;
    --msg-user-text: #EDEDED;
    --msg-assistant-bg: transparent;
    --msg-assistant-text: #EDEDED;
    --input-bg: rgba(20, 20, 20, 0.9);
    --code-bg: #0A0A0A;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.03);
}

/* === 3. GLOBAL CLEANUP === */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* Remove cheesy animated backgrounds */
.bg-grid, .bg-glow {
    display: none !important;
}

/* Base Glassmorphism (Cleaner) */
.glass-panel {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* === 4. SIDEBAR REDESIGN === */
.sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-primary) !important;
    padding: 16px !important;
}

.new-chat-btn {
    background: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
    padding: 12px 20px !important;
    box-shadow: var(--shadow-sm) !important;
    border: none !important;
    transition: var(--transition-fast) !important;
}
.new-chat-btn:hover {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
}

/* === 5. MESSAGE BUBBLES REDESIGN === */
.message {
    padding: 24px 0 !important;
    border-bottom: 1px solid transparent !important;
}
.message:hover {
    background: var(--bg-secondary) !important;
}
.message-content {
    max-width: var(--content-max) !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 16px !important;
}

.message.user .message-inner {
    background: var(--msg-user-bg) !important;
    color: var(--msg-user-text) !important;
    padding: 12px 18px !important;
    border-radius: var(--radius-xl) !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: var(--shadow-sm) !important;
    display: inline-block !important;
}

.message.assistant .message-inner {
    background: transparent !important;
    color: var(--msg-assistant-text) !important;
    padding: 4px 0 !important;
}

/* User avatar cleanup */
.avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-tertiary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* === 6. INPUT COMPOSER REDESIGN === */
.input-container {
    background: transparent !important;
    border-top: none !important;
    padding: 0 20px 24px 20px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: var(--content-max) !important;
    margin: 0 auto !important;
    z-index: 100 !important;
}

.input-wrapper {
    background: var(--bg-card) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-xl) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-base) !important;
}

.input-wrapper:focus-within {
    border-color: var(--border-accent) !important;
    box-shadow: var(--shadow-lg) !important;
}

#messageInput {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-height: 200px !important;
    padding: 0 !important;
    resize: none !important;
    width: 100% !important;
}
#messageInput::placeholder {
    color: var(--text-tertiary) !important;
}

.send-btn, .attach-btn, .voice-btn {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
}
.send-btn:hover:not(:disabled), .attach-btn:hover, .voice-btn:hover {
    background: var(--text-primary) !important;
    color: var(--bg-primary) !important;
}
.send-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* === 7. TOPBAR REDESIGN === */
.topbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 0 20px !important;
    height: var(--topbar-height) !important;
    backdrop-filter: none !important;
}

.model-selector {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* === 8. MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -100% !important;
        z-index: 999 !important;
        transition: left 0.3s ease !important;
        width: 80% !important;
        max-width: 320px !important;
    }
    .sidebar.open {
        left: 0 !important;
        box-shadow: var(--shadow-lg) !important;
    }
    
    .input-container {
        padding: 0 12px 12px 12px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    
    .input-wrapper {
        border-radius: var(--radius-lg) !important;
        padding: 10px 12px !important;
    }
    
    .message-content {
        padding: 0 16px !important;
    }
}