/* Light Theme (default) */
.theme-light {
    /* Colors */
    --bg-color: #ffffff;
    --text-color: #333333;
    --text-muted: #666666;
    --title-color: #222222;
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #dbeafe;
    --primary-text: #ffffff;
    --secondary-color: #6c757d;
    --secondary-hover: #5a6268;
    --secondary-text: #ffffff;
    --danger-color: #dc3545;
    --danger-hover: #bb2d3b;
    --danger-text: #ffffff;
    
    /* UI Components */
    --border-color: #e2e8f0;
    --sidebar-bg: #f8fafc;
    --header-bg: #ffffff;
    --tools-bg: #f8fafc;
    --input-area-bg: #ffffff;
    --input-bg: #ffffff;
    --hover-bg: #f1f5f9;
    --active-bg: #e2e8f0;
    
    /* Message bubbles */
    --user-msg-bg: #dbeafe;
    --user-msg-text: #1e3a8a;
    --assistant-msg-bg: #f1f5f9;
    --assistant-msg-text: #333333;
    
    /* Other components */
    --switch-bg: #cbd5e1;
    --switch-handle: #ffffff;
    --btn-icon-bg: #f1f5f9;
    --btn-icon-hover: #e2e8f0;
    --action-btn-bg: rgba(255, 255, 255, 0.8);
    --action-btn-color: #333333;
    --attachment-bg: #f1f5f9;
    --tool-btn-bg: #ffffff;
    --tool-btn-hover: #f1f5f9;
    --tool-item-bg: #ffffff;
    --file-preview-bg: #f8fafc;
    
    /* Modals */
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;
    --label-color: #333333;
    
    /* Code blocks */
    --code-bg: #1e293b;
    --code-text: #e2e8f0;
}

/* Dark Theme */
.theme-dark {
    /* Colors */
    --bg-color: #0f172a;
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --title-color: #f8fafc;
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #1e3a8a;
    --primary-text: #ffffff;
    --secondary-color: #64748b;
    --secondary-hover: #475569;
    --secondary-text: #ffffff;
    --danger-color: #ef4444;
    --danger-hover: #b91c1c;
    --danger-text: #ffffff;
    
    /* UI Components */
    --border-color: #1e293b;
    --sidebar-bg: #0f172a;
    --header-bg: #1e293b;
    --tools-bg: #0f172a;
    --input-area-bg: #0f172a;
    --input-bg: #1e293b;
    --hover-bg: #1e293b;
    --active-bg: #334155;
    
    /* Message bubbles */
    --user-msg-bg: #1e3a8a;
    --user-msg-text: #dbeafe;
    --assistant-msg-bg: #334155;
    --assistant-msg-text: #f1f5f9;
    
    /* Other components */
    --switch-bg: #475569;
    --switch-handle: #f1f5f9;
    --btn-icon-bg: #1e293b;
    --btn-icon-hover: #334155;
    --action-btn-bg: rgba(30, 41, 59, 0.8);
    --action-btn-color: #f1f5f9;
    --attachment-bg: #1e293b;
    --tool-btn-bg: #1e293b;
    --tool-btn-hover: #334155;
    --tool-item-bg: #1e293b;
    --file-preview-bg: #1e293b;
    
    /* Modals */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: #1e293b;
    --label-color: #f1f5f9;
    
    /* Code blocks */
    --code-bg: #0f172a;
    --code-text: #e2e8f0;
}

/* Auto theme (based on system preference) */
@media (prefers-color-scheme: dark) {
    .theme-auto {
        /* Colors */
        --bg-color: #0f172a;
        --text-color: #e2e8f0;
        --text-muted: #94a3b8;
        --title-color: #f8fafc;
        --primary-color: #3b82f6;
        --primary-hover: #2563eb;
        --primary-light: #1e3a8a;
        --primary-text: #ffffff;
        --secondary-color: #64748b;
        --secondary-hover: #475569;
        --secondary-text: #ffffff;
        --danger-color: #ef4444;
        --danger-hover: #b91c1c;
        --danger-text: #ffffff;
        
        /* UI Components */
        --border-color: #1e293b;
        --sidebar-bg: #0f172a;
        --header-bg: #1e293b;
        --tools-bg: #0f172a;
        --input-area-bg: #0f172a;
        --input-bg: #1e293b;
        --hover-bg: #1e293b;
        --active-bg: #334155;
        
        /* Message bubbles */
        --user-msg-bg: #1e3a8a;
        --user-msg-text: #dbeafe;
        --assistant-msg-bg: #334155;
        --assistant-msg-text: #f1f5f9;
        
        /* Other components */
        --switch-bg: #475569;
        --switch-handle: #f1f5f9;
        --btn-icon-bg: #1e293b;
        --btn-icon-hover: #334155;
        --action-btn-bg: rgba(30, 41, 59, 0.8);
        --action-btn-color: #f1f5f9;
        --attachment-bg: #1e293b;
        --tool-btn-bg: #1e293b;
        --tool-btn-hover: #334155;
        --tool-item-bg: #1e293b;
        --file-preview-bg: #1e293b;
        
        /* Modals */
        --modal-overlay: rgba(0, 0, 0, 0.7);
        --modal-bg: #1e293b;
        --label-color: #f1f5f9;
        
        /* Code blocks */
        --code-bg: #0f172a;
        --code-text: #e2e8f0;
    }
}

@media (prefers-color-scheme: light) {
    .theme-auto {
        /* Colors */
        --bg-color: #ffffff;
        --text-color: #333333;
        --text-muted: #666666;
        --title-color: #222222;
        --primary-color: #2563eb;
        --primary-hover: #1d4ed8;
        --primary-light: #dbeafe;
        --primary-text: #ffffff;
        --secondary-color: #6c757d;
        --secondary-hover: #5a6268;
        --secondary-text: #ffffff;
        --danger-color: #dc3545;
        --danger-hover: #bb2d3b;
        --danger-text: #ffffff;
        
        /* UI Components */
        --border-color: #e2e8f0;
        --sidebar-bg: #f8fafc;
        --header-bg: #ffffff;
        --tools-bg: #f8fafc;
        --input-area-bg: #ffffff;
        --input-bg: #ffffff;
        --hover-bg: #f1f5f9;
        --active-bg: #e2e8f0;
        
        /* Message bubbles */
        --user-msg-bg: #dbeafe;
        --user-msg-text: #1e3a8a;
        --assistant-msg-bg: #f1f5f9;
        --assistant-msg-text: #333333;
        
        /* Other components */
        --switch-bg: #cbd5e1;
        --switch-handle: #ffffff;
        --btn-icon-bg: #f1f5f9;
        --btn-icon-hover: #e2e8f0;
        --action-btn-bg: rgba(255, 255, 255, 0.8);
        --action-btn-color: #333333;
        --attachment-bg: #f1f5f9;
        --tool-btn-bg: #ffffff;
        --tool-btn-hover: #f1f5f9;
        --tool-item-bg: #ffffff;
        --file-preview-bg: #f8fafc;
        
        /* Modals */
        --modal-overlay: rgba(0, 0, 0, 0.5);
        --modal-bg: #ffffff;
        --label-color: #333333;
        
        /* Code blocks */
        --code-bg: #1e293b;
        --code-text: #e2e8f0;
    }
}

/* Apply theme to body */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Make code blocks readable in both themes */
pre, code {
    color: var(--code-text);
}