/* --- Dark mode visual refresh (ChatGPT-like), non-breaking overrides --- */
/* Updated palette (overrides earlier :root) */
:root {
    --dark-bg-primary: #212121;   /* page background */
    --dark-bg-secondary: #303030; /* panels/surfaces */
    --dark-bg-tertiary: #414141;  /* hovers/pressed */
    --dark-bg-elevated: #181818;  /* cards/inputs */
    --dark-border: #ffffff26;     /* outlines */
    --dark-border-muted: #575757;
    --dark-text-primary: #fff;
    --dark-text-secondary: #f3f3f3;
    --dark-text-muted: #afafaf;
    --dark-accent: #238636;
    --dark-accent-hover: #2ea043;
    --dark-danger: #da3633;
    --dark-warning: #fb8500;
    --dark-info: #60a5fa;         /* blue-400 */
    --dark-shadow: rgba(13, 13, 13, 0.5);
    --dark-shadow-elevated: rgba(13, 13, 13, 0.65);
}

/* Hint UA components (forms, scrollbars) */
html.dark, body.dark-mode { color-scheme: dark; }

/* Base body treatment */
body.dark-mode {
    background: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Brand marks (logo text variants) */
body.dark-mode .logo-brand span:first-child,
body.dark-mode #navbar-logo span:first-child,
body.dark-mode #main-logo span:first-child {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .logo-brand span:last-child,
body.dark-mode #navbar-logo span:last-child,
body.dark-mode #main-logo span:last-child {
    color: #FF6C42 !important;
}

/* Navbar - translucent glass with subtle border */
body.dark-mode nav {
    background: var(--dark-bg-secondary) !important;
    backdrop-filter: saturate(120%) blur(12px);
    -webkit-backdrop-filter: saturate(120%) blur(12px);
    border-bottom: 1px solid var(--dark-border) !important;
}

/* Tailwind-friendly utility tokens */
.dark\:bg-dark-primary { background-color: var(--dark-bg-primary); }
.dark\:bg-dark-secondary { background-color: var(--dark-bg-secondary); }
.dark\:bg-dark-tertiary { background-color: var(--dark-bg-tertiary); }
.dark\:bg-dark-elevated { background-color: var(--dark-bg-elevated); }
.dark\:text-dark-primary { color: var(--dark-text-primary); }
.dark\:text-dark-secondary { color: var(--dark-text-secondary); }
.dark\:text-dark-muted { color: var(--dark-text-muted); }
.dark\:border-dark { border-color: var(--dark-border); }
.dark\:border-dark-muted { border-color: var(--dark-border-muted); }

/* Cards/containers */
body.dark-mode .bg-white {
    background-color: var(--dark-bg-primary);
    border-color: var(--dark-border-muted);
}

body.dark-mode .card,
body.dark-mode .panel {
    background-color: var(--dark-bg-elevated) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .modal-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .modal-card-head,
body.dark-mode .modal-card-body,
body.dark-mode .modal-card-foot {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

body.dark-mode #give-feedback-modal .modal-card-head,
body.dark-mode #give-feedback-modal .modal-card-body,
body.dark-mode #give-feedback-modal .modal-card-foot {
    background-color: var(--dark-bg-secondary);
}

body.dark-mode #give-feedback-modal .rating-box {
    border-color: var(--dark-border);
    background-color: var(--dark-bg-tertiary);
}

body.dark-mode #give-feedback-modal .rating-option input[type="radio"]:checked + .rating-box {
    border-color: #4F4FC8;
    background-color: #2a2a4a;
}

body.dark-mode #give-feedback-modal .rating-box:hover {
    background-color: #2a2a4a;
}

body.dark-mode .bg-gray-50 { background-color: var(--dark-bg-primary) !important; }
body.dark-mode .bg-gray-100 { background-color: var(--dark-bg-elevated) !important; }
body.dark-mode .bg-gray-200 { background-color: var(--dark-border) !important; }

body.dark-mode .text-black { color: var(--dark-text-primary) !important; }
body.dark-mode .text-gray-800 { color: var(--dark-text-primary) !important; }

body.dark-mode .border-gray-300 { border-color: var(--dark-border) !important; }
body.dark-mode .border-gray-200 { border-color: var(--dark-border-muted) !important; }

/* Inputs & textareas */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode .input,
body.dark-mode .input-rounded {
    background-color: var(--dark-bg-elevated) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted) !important;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode .input:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent) !important;
}

/* Primary action buttons keep brand accent */
body.dark-mode .btn-accent { background-color: var(--accent-color) !important; color: #fff !important; }
body.dark-mode .btn-accent:hover { background-color: var(--accent-color-hover) !important; }

/* Typography & links */
body.dark-mode a { color: var(--dark-info); }
body.dark-mode a:hover { color: color-mix(in srgb, var(--dark-info) 85%, #fff); }

/* Prose (Tailwind typography-like) */
body.dark-mode .prose, 
body.dark-mode .message-content {
    color: var(--dark-text-secondary);
}
body.dark-mode .prose h1, 
body.dark-mode .prose h2, 
body.dark-mode .prose h3, 
body.dark-mode .prose h4, 
body.dark-mode .prose h5, 
body.dark-mode .prose h6,
body.dark-mode .message-content h1,
body.dark-mode .message-content h2,
body.dark-mode .message-content h3,
body.dark-mode .message-content h4 { color: var(--dark-text-primary); }
body.dark-mode .prose strong,
body.dark-mode .message-content strong { color: var(--dark-text-primary); }

/* Code blocks */
body.dark-mode .message-content pre,
body.dark-mode pre {
    background-color: #181818 !important;
    color: #f3f3f3 !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 10px !important;
    padding: 0.9rem 1rem !important;
    overflow: auto;
}
body.dark-mode .message-content code,
body.dark-mode code { background-color: #212121; color: #f3f3f3; border-radius: 6px; padding: 0.1rem 0.35rem; }

/* Blockquotes & dividers */
body.dark-mode blockquote { border-left: 3px solid #414141; background: rgba(65, 65, 65, 0.15); color: var(--dark-text-secondary); }
body.dark-mode hr { border-color: var(--dark-border); }

/* Message container polish */
body.dark-mode .message, /* legacy */
body.dark-mode .assistant-message,
body.dark-mode .user-message {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--dark-shadow);
}

/* Scrollbars */
body.dark-mode *::-webkit-scrollbar { width: 10px; height: 10px; }
body.dark-mode *::-webkit-scrollbar-thumb { background-color: #414141; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
body.dark-mode *::-webkit-scrollbar-track { background: transparent; }

/* Inputs footer bar (chat prompt area) */
body.dark-mode .input-area-center,
body.dark-mode #input-container-bottom {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border) !important;
    box-shadow: 0 -8px 24px var(--dark-shadow);
}

/* Chat prompt containers (center + bottom) */
body.dark-mode #input-container-center > div.rounded-lg,
body.dark-mode #input-container-bottom {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 36px -18px var(--dark-shadow);
    backdrop-filter: saturate(130%) blur(8px);
    -webkit-backdrop-filter: saturate(130%) blur(8px);
}

body.dark-mode #input-container-bottom {
    border-radius: 1.5rem;
}

body.dark-mode #input-container-center > div.rounded-lg {
    border-radius: 1rem;
}

body.dark-mode #input-container-center textarea,
body.dark-mode #input-container-bottom textarea {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--dark-text-primary) !important;
    box-shadow: none !important;
}

body.dark-mode #input-container-center textarea:focus,
body.dark-mode #input-container-bottom textarea:focus {
    border-color: var(--accent-color) !important;
}

body.dark-mode #input-container-bottom .attach-button,
body.dark-mode #input-container-center .attach-button {
    color: var(--dark-text-muted) !important;
}

body.dark-mode #input-container-bottom .attach-button:hover,
body.dark-mode #input-container-center .attach-button:hover {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-mode #input-container-bottom a.bg-black {
    background-color: #f5f5f5 !important;
    color: #111111 !important;
    box-shadow: 0 8px 20px -10px var(--dark-shadow);
}

body.dark-mode #input-container-bottom a.bg-black:hover {
    background-color: #e7e7e7 !important;
    color: #000000 !important;
}

body.dark-mode .send-button {
    background-color: #f5f5f5 !important;
    color: #111111 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 6px 18px -6px var(--dark-shadow);
}

body.dark-mode .send-button:hover {
    background-color: #e7e7e7 !important;
    color: #000000 !important;
}

/* Markdown rich text */
body.dark-mode .markdown-content {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

body.dark-mode .markdown-content code {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-secondary);
}

/* Tables inside markdown */
body.dark-mode .markdown-content table { background: var(--dark-bg-elevated); }
body.dark-mode .markdown-content th { background: var(--dark-bg-tertiary); }
body.dark-mode .markdown-content td, 
body.dark-mode .markdown-content th { border-color: var(--dark-border); }

/* Chips/pills */
body.dark-mode .badge, 
body.dark-mode .chip { background: var(--dark-bg-tertiary); color: var(--dark-text-secondary); border: 1px solid var(--dark-border); }

/* Learning UI widgets */
body.dark-mode .subtopic-card,
body.dark-mode .comm-box {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-secondary);
}

body.dark-mode .approach-container {
    background-color: var(--dark-bg-tertiary);
    border-left-color: var(--dark-info);
}

body.dark-mode .approach-container h3 { color: var(--dark-text-primary); }
body.dark-mode .approach-container p { color: var(--dark-text-secondary); }

body.dark-mode .comm-text { color: var(--dark-text-muted); }
body.dark-mode .comm-text strong { color: var(--dark-text-primary); }

body.dark-mode .learn-more-btn { color: var(--dark-info); }
body.dark-mode .learn-more-btn:hover { background-color: var(--dark-bg-tertiary); }

body.dark-mode .loading-text { color: var(--dark-text-primary); }
body.dark-mode .loader {
    border-color: var(--dark-border-muted);
    border-top-color: var(--dark-info);
}

/* Small utility helpers */
body.dark-mode .hover\:bg-gray-50:hover { background-color: var(--dark-bg-tertiary) !important; }
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800 { color: var(--dark-text-primary) !important; }
body.dark-mode .text-gray-700 { color: var(--dark-text-secondary) !important; }
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 { color: var(--dark-text-muted) !important; }