/* Light Theme Variables */
:root {
    --primary-color: #1a1a1a;
    --secondary-color: #333;
    --accent-color: #0066cc;
    --text-color: #333;
    --border-color: #e2e8f0;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --bg-color: #ffffff;
    --hover-color: #f5f5f5;
    --card-bg: #ffffff;
    --content-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --header-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d3748 50%, #4a5568 100%);
    --sidebar-gradient: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    --input-bg-color: #ffffff;
    --text-color-light: #6c757d;
    --submenu-text-color: var(--text-color);
    
    /* Code styling colors for light theme */
    --code-bg: #f8f9fa;
    --code-border: #e9ecef;
    --code-text: #495057;
    --code-keyword: #d73a49;
    --code-string: #032f62;
    --code-comment: #6a737d;
    --code-function: #6f42c1;
    --code-number: #005cc5;
    
    /* Danger zone colors */
    --danger-bg: #fff5f5;
    --danger-border: #fed7d7;
    --danger-text: #c53030;
    --danger-icon: #e53e3e;
    
    /* Notification zone colors */
    --info-bg: #ebf8ff;
    --info-border: #bee3f8;
    --info-text: #2b6cb0;
    --info-icon: #3182ce;
    
    --success-bg: #f0fff4;
    --success-border: #c6f6d5;
    --success-text: #276749;
    --success-icon: #38a169;
    
    --warning-bg: #fffbeb;
    --warning-border: #fbd38d;
    --warning-text: #b7791f;
    --warning-icon: #d69e2e;
}

/* Dark Theme Variables (Inspired by Tailwind's Slate Palette) */
[data-theme="dark"] {
    --primary-color: #e2e8f0;      /* slate-200 */
    --secondary-color: #94a3b8;    /* slate-400 */
    --accent-color: #38bdf8;        /* sky-400 */
    --text-color: #e2e8f0;          /* slate-200 */
    --text-color-light: #94a3b8;    /* slate-400 */
    --submenu-text-color: #f1f5f9;      /* slate-100 */
    --border-color: #334155;        /* slate-700 */
    --bg-color: #0f172a;            /* slate-900 */
    --shadow-color: rgba(0, 0, 0, 0.2);
    --hover-color: #1e293b;         /* slate-800 */
    --card-bg: #1e293b;             /* slate-800 */
    --content-bg: #1e293b;          /* slate-800 */
    --sidebar-bg: #0f172a;          /* slate-900 */
    --input-bg-color: #1e293b;      /* slate-800 */
    --header-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --sidebar-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

    /* Code styling colors for dark theme */
    --code-bg: #1e293b;             /* slate-800 */
    --code-border: #334155;         /* slate-700 */
    --code-text: #cbd5e1;           /* slate-300 */
    --code-keyword: #f472b6;        /* pink-400 */
    --code-string: #a5b4fc;         /* indigo-300 */
    --code-comment: #64748b;        /* slate-500 */
    --code-function: #818cf8;       /* indigo-400 */
    --code-number: #f87171;         /* red-400 */

    /* Danger zone colors for dark theme */
    --danger-bg: #3f1a23;
    --danger-border: #7f1d1d;
    --danger-text: #fca5a5;
    --danger-icon: #ef4444;

    /* Notification zone colors for dark theme */
    --info-bg: #1e3a8a;
    --info-border: #1d4ed8;
    --info-text: #93c5fd;
    --info-icon: #60a5fa;

    --success-bg: #14532d;
    --success-border: #166534;
    --success-text: #86efac;
    --success-icon: #4ade80;

    --warning-bg: #78350f;
    --warning-border: #9a3412;
    --warning-text: #fcd34d;
    --warning-icon: #fbbf24;
}

/* Theme Toggle Button */
.sidebar-header {
    position: relative;
}

.theme-toggle {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--hover-color);
    transform: translateY(-50%) scale(1.1);
}

.theme-toggle i {
    font-size: 1.2rem;
    position: absolute;
    transition: opacity 0.3s ease;
}

.theme-toggle .fa-sun {
    display: none;
}

.theme-toggle .fa-moon {
    display: block;
}

/* Theme-specific updates for existing elements */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar {
    background: var(--sidebar-gradient);
    border-left-color: var(--border-color);
}

.content-header {
    background: var(--header-gradient);
}

.card, .feature-item, .content-section {
   
    margin-top: unset!important;
}

.search-results-container {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.search-results-container::before {
    background: var(--card-bg);
    border-top-color: var(--border-color);
    border-left-color: var(--border-color);
}

/* Code block theme updates */
[data-theme="dark"] .code-block {
    background: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .code-header {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border-bottom-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .code-content {
    background: #1e1e1e;
    color: #e0e0e0;
}

[data-theme="dark"] code {
    background: #2d2d2d;
    border-color: #444;
    color: #00d4ff;
}

/* Light theme code blocks */
[data-theme="light"] .code-block {
    background: #f8f9fa;
    border-color: #e9ecef;
}

[data-theme="light"] .code-header {
    background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    border-bottom-color: #e9ecef;
    color: #495057;
}

[data-theme="light"] .code-content {
    background: #ffffff;
    color: #212529;
}

[data-theme="light"] code {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #e83e8c;
}

/* Syntax highlighting updates */
[data-theme="dark"] .keyword { color: #ff79c6; }
[data-theme="dark"] .string { color: #f1fa8c; }
[data-theme="dark"] .comment { color: #6272a4; }
[data-theme="dark"] .function { color: #50fa7b; }
[data-theme="dark"] .number { color: #bd93f9; }
[data-theme="dark"] .operator { color: #ff79c6; }
[data-theme="dark"] .variable { color: #f8f8f2; }

[data-theme="light"] .keyword { color: #d73a49; }
[data-theme="light"] .string { color: #032f62; }
[data-theme="light"] .comment { color: #6a737d; }
[data-theme="light"] .function { color: #6f42c1; }
[data-theme="light"] .number { color: #005cc5; }
[data-theme="light"] .operator { color: #d73a49; }
[data-theme="light"] .variable { color: #24292e; }

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.code-block, .code-header, .code-content {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Dark Mode Styles for Input Area using CSS Variables */
[data-theme="dark"] #input-area {
    background-color: var(--sidebar-bg); /* استفاده از رنگ پس‌زمینه سایدبار برای نوار اصلی */
    border-top-color: var(--border-color);
}

[data-theme="dark"] #query {
    background-color: var(--input-bg-color); /* استفاده از متغیر اختصاصی پس‌زمینه اینپوت */
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] #query::placeholder {
    color: var(--text-color-light); /* استفاده از رنگ متن روشن‌تر برای راهنما */
}

[data-theme="dark"] #query:focus {
    border-color: var(--accent-color); /* استفاده از رنگ تأکیدی برای حالت فوکوس */
}
  
[data-theme="dark"] #loader {
    color: var(--text-color-light);
}
[data-theme="dark"] #query:focus {
    border-color: var(--accent-color);
    background-color: var(--hover-color); 
}
/* Dark Mode Styles for Chat Bubbles */
[data-theme="dark"] .message.assistant .bubble {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}
[data-theme="dark"] .sources-container a {
    color: var(--accent-color);
}
[data-theme="dark"] .content {
  scrollbar-color: #475569 #1e293b; /* thumb و track در حالت تاریک */
}

[data-theme="dark"] .content::-webkit-scrollbar-track {
  background: #1e293b;
}

[data-theme="dark"] .content::-webkit-scrollbar-thumb {
  background-color: #475569;
}

[data-theme="dark"] .content::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}