/* =========================================
   Gemini Dark Mode
   Activated via body.chat-dark-mode
   ========================================= */

body.chat-dark-mode {
    /* Dark Mode Palette */
    --gem-bg-body: #131314;
    --gem-bg-sidebar: #1e1f20;
    --gem-bg-hover: #2e2f31;
    --gem-bg-active: #3c4043; 
    --gem-text-primary: #e3e3e3;
    --gem-text-secondary: #c4c7c5;
    --gem-text-tertiary: #8e918f;
    --gem-accent: #a8c7fa; /* Lighter accent for dark mode */
    
    --gem-user-bubble: #2e2f31;
    
    /* Scrollbar specifics */
    --scrollbar-thumb: #444746;
    --scrollbar-track: #1e1f20;
}

/* Specific Element Overrides because some might not use vars fully or need adjustments */

/* Input Area */
body.chat-dark-mode .input-area-wrapper {
    background: #1e1f20;
}

body.chat-dark-mode .chat-input-container {
    background: #2e2f31;
    border: none; /* remove border in dark mode usually looks cleaner */
}

body.chat-dark-mode #chatInput {
    color: #e3e3e3;
}
body.chat-dark-mode #chatInput::placeholder {
    color: #8e918f;
}

/* Buttons */
body.chat-dark-mode .btn-input-tool {
    background: transparent;
    color: #c4c7c5;
}
body.chat-dark-mode .btn-input-tool:hover {
    background: #3c4043;
    color: #e3e3e3;
}

/* Navigation Items */
body.chat-dark-mode .nav-item {
    color: #c4c7c5;
}
body.chat-dark-mode .nav-item:hover {
    background: var(--gem-bg-hover);
    color: #e3e3e3;
}
body.chat-dark-mode .nav-item.active {
    background: #004a77; /* Darker blue active background */
    color: #c2e7ff;
}

/* Markdown Styling for Dark Mode */
body.chat-dark-mode .markdown-body {
    color: #e3e3e3;
}
body.chat-dark-mode .markdown-body h1,
body.chat-dark-mode .markdown-body h2,
body.chat-dark-mode .markdown-body h3,
body.chat-dark-mode .markdown-body strong {
    color: #e3e3e3;
}

body.chat-dark-mode .markdown-body pre {
    background: #1e1f20 !important;
    border-color: #444746;
}

body.chat-dark-mode .markdown-body pre::before {
    background: #2e2f31;
    border-bottom: 1px solid #444746;
    color: #c4c7c5;
}

body.chat-dark-mode .markdown-body pre code {
    color: #e3e3e3;
}

/* Inline code */
body.chat-dark-mode .markdown-body code:not(pre code) {
    background: #2e2f31;
    color: #f28b82; /* Light red/pink for inline code */
}

/* Table */
body.chat-dark-mode .markdown-body table,
body.chat-dark-mode .markdown-body th,
body.chat-dark-mode .markdown-body td {
    border-color: #444746;
}
body.chat-dark-mode .markdown-body th {
    background: #1e1f20;
}
body.chat-dark-mode .markdown-body td {
    border-bottom-color: #2e2f31;
}

/* Dropdowns */
body.chat-dark-mode .dropdown-menu {
    background: #1e1f20;
    border-color: #444746;
}
body.chat-dark-mode .dropdown-item {
    color: #c4c7c5;
}
body.chat-dark-mode .dropdown-item:hover {
    background: #2e2f31;
    color: #e3e3e3;
}

/* Model Selector */
body.chat-dark-mode .btn-model-trigger {
    background: #1e1f20;
    border: 1px solid #444746;
    color: #e3e3e3;
}
body.chat-dark-mode .btn-model-trigger:hover {
    background: #2e2f31;
}
body.chat-dark-mode .model-dropdown-menu {
    border-color: #444746;
}

/* Sidebar History Headers */
body.chat-dark-mode .history-label {
    background: var(--gem-bg-sidebar); 
    color: #8e918f;
    border-bottom: 1px solid #444746;
}

/* --- FIX: Main Content White Background --- */
body.chat-dark-mode .chat-main {
    background: #131314 !important; /* Force dark background */
    box-shadow: none; /* Remove shadow to look flat like Gemini */
    border: none;
}

/* Header Fixes */
body.chat-dark-mode .chat-custom-header {
    background: var(--gem-bg-body);
}

/* Fix Logo - Invert Colors to make it white */
body.chat-dark-mode .header-brand img {
    filter: brightness(0) invert(1);
}
body.chat-dark-mode .header-brand {
    color: #e3e3e3;
}

/* Fix Home Icon & Header Links */
body.chat-dark-mode .header-link {
    color: #c4c7c5;
}
body.chat-dark-mode .header-link:hover {
    background: #2e2f31;
    color: #e3e3e3;
}

/* Sidebar History Items (Chat Titles) */
body.chat-dark-mode .nav-item {
    color: #e3e3e3; /* Much brighter text */
}
body.chat-dark-mode .nav-item:hover {
    background: #2e2f31;
}

/* Input Area - Make wrapper transparent, only input container dark */
body.chat-dark-mode .input-area-wrapper {
    background: #131314; /* Match main bg, effectively transparent visually */
}
body.chat-dark-mode .chat-input-container {
    background: #1e1f20; /* Dark Grey Input Box */
    border: 1px solid #444746; /* Subtle border */
    border-radius: 28px; /* Ensure rounded */
}

/* Fix Input Icons (Send, Attach) */
body.chat-dark-mode .btn-input-tool,
body.chat-dark-mode #sendMessageBtn {
    color: #c4c7c5;
}
body.chat-dark-mode .btn-input-tool:hover,
body.chat-dark-mode #sendMessageBtn:not(:disabled):hover {
    color: #e3e3e3;
    background: rgba(255,255,255,0.1);
}

/* Prompt Chips */
body.chat-dark-mode .prompt-chip {
    background: #1e1f20;
    border: 1px solid #444746;
    color: #e3e3e3;
}
body.chat-dark-mode .prompt-chip:hover {
    background: #2e2f31;
    border-color: #e3e3e3;
}

/* Welcome Screen */
body.chat-dark-mode .welcome-screen h1 {
    /* Gradient usually looks fine on dark, but let's ensure text fill works */
}
body.chat-dark-mode .welcome-screen .subtitle {
    color: #c4c7c5;
}

/* Prompt Chips */
body.chat-dark-mode .prompt-chip {
    background: #1e1f20;
    border-color: #444746;
    color: #e3e3e3;
}
body.chat-dark-mode .prompt-chip:hover {
    background: #333537;
    border-color: #5e5e5e;
}

/* Upgrade Card */
body.chat-dark-mode .upgrade-card-premium {
    background: linear-gradient(135deg, #1e1f20 0%, #2e2f31 100%);
    border-color: #444746;
    color: #e3e3e3;
}
body.chat-dark-mode .upgrade-card-premium .title {
    color: #e3e3e3;
}

/* New Chat Button */
body.chat-dark-mode .btn-new-chat {
    background: #2e2f31;
    color: #c4c7c5;
}
body.chat-dark-mode .btn-new-chat:hover {
    background: #3c4043;
    color: #e3e3e3;
}

/* Sidebar Toggle */
body.chat-dark-mode .btn-sidebar-toggle {
    color: #c4c7c5;
}
body.chat-dark-mode .btn-sidebar-toggle:hover {
    background: rgba(255,255,255,0.1);
}

/* Message Bubble fixes if needed */
body.chat-dark-mode .user-message .message-content {
    background: #2e2f31; /* Dark user bubble */
    color: #e3e3e3;
}

body.chat-dark-mode .ai-message .message-content {
    color: #e3e3e3;
}

/* Scrollbar Fixes */
body.chat-dark-mode ::-webkit-scrollbar-thumb {
    background: #444746;
}
body.chat-dark-mode ::-webkit-scrollbar-track {
    background: #1e1f20;
}

/* Dark Mode Shimmer Loader - Electric Pulse (Cyberpunk) */
body.chat-dark-mode .shimmer-line {
    background: #2e2f31;
    background-image: linear-gradient(
        270deg,
        #2e2f31,
        #512da8, /* Deep Purple */
        #0097a7, /* Cyan */
        #7c4dff, /* Violet */
        #2e2f31
    );
    background-size: 400% 400%;
    animation: electricFlow 4s ease infinite;
    background-repeat: no-repeat;
}