/* Default: Dark Theme */
:root {
    /* Primary Colors - Orange chaleureux */
    --primary: #E07712;
    --primary-dark: #C46610;
    --primary-light: #F59035;
    --primary-glow: rgba(224, 119, 18, 0.35);

    /* Background Colors */
    --bg-body: #0d0d1a;
    --bg-sidebar: linear-gradient(180deg, #141428 0%, #0d0d1a 100%);
    --bg-panel: #12121f;
    --bg-card: rgba(30, 30, 47, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 0.05);
    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-tooltip: #1e1e36;
    --bg-header-blur: rgba(26, 26, 42, 0.6);
    --bg-button-glass: rgba(255, 255, 255, 0.05);
    --bg-chat-area: linear-gradient(180deg, rgba(30, 30, 47, 0.9) 0%, rgba(26, 26, 42, 0.95) 100%);
    --bg-message-input: rgba(18, 18, 31, 0.9);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #5a5a7a;
    --text-inverse: #0d0d1a;

    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.05);
    --border-primary: rgba(248, 132, 20, 0.1);
    --border-primary-strong: rgba(248, 132, 20, 0.2);

    /* Status Colors */
    --status-online: #22c55e;
    --status-offline: #64748b;
    --status-error: #ef4444;

    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-primary: 0 4px 20px rgba(248, 132, 20, 0.4);

    /* Message Bubbles */
    --bg-message-sent: linear-gradient(135deg, #F88414, #E07010);
    --bg-message-received: rgba(255, 255, 255, 0.06);
    --text-message-sent: #ffffff;
    --text-message-received: #ffffff;
}

/* Light Theme */
[data-theme="light"] {
    /* Primary Colors - keep orange */
    --primary: #F88414;
    --primary-dark: #E07010;
    --primary-light: #FFA040;
    --primary-glow: rgba(248, 132, 20, 0.2);

    /* Background Colors */
    --bg-body: #f5f5f7;
    --bg-sidebar: linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%);
    --bg-panel: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(248, 132, 20, 0.05);
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-tooltip: #1e1e36;
    --bg-header-blur: rgba(255, 255, 255, 0.8);
    --bg-button-glass: rgba(0, 0, 0, 0.05);
    --bg-chat-area: #ffffff;
    --bg-message-input: #ffffff;

    /* Text Colors */
    --text-primary: #1a1a2e;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-light: rgba(0, 0, 0, 0.08);
    --border-primary: rgba(248, 132, 20, 0.2);
    --border-primary-strong: rgba(248, 132, 20, 0.3);

    /* Status Colors - same */
    --status-online: #22c55e;
    --status-offline: #94a3b8;
    --status-error: #ef4444;

    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-primary: 0 4px 20px rgba(248, 132, 20, 0.3);

    /* Message Bubbles */
    --bg-message-sent: linear-gradient(135deg, #F88414, #E07010);
    --bg-message-received: rgba(0, 0, 0, 0.05);
    --text-message-sent: #ffffff;
    --text-message-received: #1a1a2e;
}

/* Theme Toggle Button */
.theme-toggle {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1000; /* Ensure clickable */
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
}

.theme-toggle:hover {
    color: var(--primary);
    background: rgba(248, 132, 20, 0.1);
}

/* Sun icon for dark mode, moon for light */
.theme-toggle .sun-icon {
    display: block;
}

.theme-toggle .moon-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
    display: block;
}