/* ═══════════════════════════════════════════════════════════
   DRAVEN AI — Custom Theme System
   When body has class .theme-custom, EVERYTHING becomes
   the chosen accent color. No dark/light bleeding.
   The JS sets all CSS vars below via inline style on :root.
═══════════════════════════════════════════════════════════ */

/*
  HOW IT WORKS:
  - JS sets --custom-h, --custom-s, --custom-l from chosen hex
  - All custom-theme overrides derive their palette from these
  - body.theme-custom activates this stylesheet section
  - body.theme-dark / body.theme-light are NOT tinted at all
*/

/* ── Custom palette generation ──────────────────────────── */
/*
  The JS (theme-system.js) already sets:
    --accent, --accent-2, --accent-dim, --accent-dim-2, --accent-glow
    --bg, --surface, --surface-2, --surface-3, --surface-4
    --border, --border-2, --border-3
    --text, --text-2, --text-3, --text-4
    --grad-brand, --shadow-accent, --grad-glow
  ...on :root when theme === 'custom'.

  This CSS file provides deeper overrides for elements that
  use hardcoded values or need extra tinting beyond CSS vars.
*/

/* ── GLOBAL: only activate inside theme-custom ──────────── */
body.theme-custom {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── APP SHELL ──────────────────────────────────────────── */
body.theme-custom .app {
  background: var(--bg) !important;
}

/* ── SIDEBAR ────────────────────────────────────────────── */
body.theme-custom .sidebar {
  background: var(--surface) !important;
  border-right-color: var(--border) !important;
}

body.theme-custom .sidebar-top {
  border-bottom-color: var(--border) !important;
  background: var(--surface) !important;
}

body.theme-custom .sidebar-footer {
  border-top-color: var(--border) !important;
  background: var(--surface) !important;
}

body.theme-custom .chats-section-label {
  color: var(--text-3) !important;
}

body.theme-custom .chat-item {
  color: var(--text-2) !important;
  border-color: transparent !important;
  background: transparent !important;
}
body.theme-custom .chat-item:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body.theme-custom .chat-item.active {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}

/* The hardcoded popup menu in sidebar */
body.theme-custom .menu-popup {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom .menu-popup .menu-item {
  color: var(--text-2) !important;
}
body.theme-custom .menu-popup .menu-item:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}
body.theme-custom .menu-popup .menu-item svg {
  color: var(--text-3) !important;
}

body.theme-custom .user-name-small {
  color: var(--text-2) !important;
}
body.theme-custom .footer-btn {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.theme-custom .footer-btn:hover {
  background: var(--surface-4) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

/* ── TOPBAR ─────────────────────────────────────────────── */
body.theme-custom .topbar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
body.theme-custom .icon-btn {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.theme-custom .icon-btn:hover {
  background: var(--surface-4) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

/* ── MAIN / CHAT AREA ───────────────────────────────────── */
body.theme-custom .main {
  background: var(--bg) !important;
}
body.theme-custom .chat-container {
  background: var(--bg) !important;
}

/* User message bubble */
body.theme-custom .message.user .message-box {
  border-color: var(--accent) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 2px 12px var(--accent-dim-2), 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Bot message */
body.theme-custom .message.bot .message-box {
  background: transparent !important;
}

body.theme-custom .message-content {
  color: var(--text) !important;
}

/* Code blocks */
body.theme-custom .message-content pre,
body.theme-custom .message-content code {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.theme-custom .code-header {
  background: var(--surface-3) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Tables */
body.theme-custom .message-content table {
  border-color: var(--border) !important;
}
body.theme-custom .message-content th {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}
body.theme-custom .message-content td {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.theme-custom .message-content tbody tr:hover {
  background: var(--surface-2) !important;
}

/* Lists markers */
body.theme-custom .message-content ul li::marker,
body.theme-custom .message-content ol li::marker {
  color: var(--accent-2) !important;
}

/* Links in chat */
body.theme-custom .message-content a {
  color: var(--accent-2) !important;
}

/* ── INPUT AREA ─────────────────────────────────────────── */
body.theme-custom .input-wrapper {
  background: transparent !important;
}
body.theme-custom .input-box {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom .input-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow) !important;
}
body.theme-custom textarea {
  background: transparent !important;
  color: var(--text) !important;
  caret-color: var(--accent) !important;
}
body.theme-custom textarea::placeholder {
  color: var(--text-3) !important;
}

/* Send button */
body.theme-custom .send-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.theme-custom .send-btn:hover {
  background: var(--accent-2) !important;
}
body.theme-custom .send-btn:disabled {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-3) !important;
}

/* Model selector / dropdowns in input */
body.theme-custom .model-btn,
body.theme-custom .attach-btn,
body.theme-custom .web-btn {
  color: var(--text-2) !important;
}
body.theme-custom .model-btn:hover,
body.theme-custom .attach-btn:hover,
body.theme-custom .web-btn:hover {
  color: var(--accent) !important;
}

/* ── WELCOME SCREEN ─────────────────────────────────────── */
body.theme-custom .welcome-screen-inline {
  background: var(--grad-glow) !important;
}
body.theme-custom .welcome-logo {
  background: var(--grad-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
body.theme-custom .welcome-subtitle,
body.theme-custom .welcome-desc {
  color: var(--text-2) !important;
}
body.theme-custom .suggestion-chip {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}
body.theme-custom .suggestion-chip:hover {
  background: var(--surface-3) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* ── MODALS ─────────────────────────────────────────────── */
body.theme-custom .modal-overlay {
  background: rgba(0,0,0,0.7) !important;
}
body.theme-custom .modal,
body.theme-custom .modal-card,
body.theme-custom [class*="modal-"] {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}
body.theme-custom .modal-header,
body.theme-custom .modal-footer {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
body.theme-custom ::-webkit-scrollbar-thumb {
  background: var(--border-3) !important;
}
body.theme-custom ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dim-2) !important;
}

/* ── GENERIC BUTTONS ────────────────────────────────────── */
body.theme-custom .btn-primary,
body.theme-custom [class*="btn-primary"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.theme-custom .btn,
body.theme-custom button:not([class*="btn-primary"]):not(.send-btn):not(.icon-btn):not(.footer-btn) {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}
body.theme-custom .btn:hover {
  background: var(--surface-4) !important;
  border-color: var(--border-3) !important;
  color: var(--text) !important;
}

/* ── SETTINGS PAGE SPECIFIC ─────────────────────────────── */
body.theme-custom .group-card,
body.theme-custom .settings-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
body.theme-custom .settings-row {
  border-bottom-color: var(--border) !important;
}
body.theme-custom .group-label {
  color: var(--text-3) !important;
}
body.theme-custom .row-label {
  color: var(--text) !important;
}
body.theme-custom .row-desc {
  color: var(--text-3) !important;
}
body.theme-custom .nav-item {
  color: var(--text-2) !important;
}
body.theme-custom .nav-item:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
body.theme-custom .nav-item.active {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

/* ── TOASTS / ALERTS ────────────────────────────────────── */
body.theme-custom .toast,
body.theme-custom [class*="toast"] {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

/* ── DONATE PAGE ────────────────────────────────────────── */
body.theme-custom .donate-card,
body.theme-custom .plan-card,
body.theme-custom [class*="card"] {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
}

/* ── LOGIN PAGE ─────────────────────────────────────────── */
body.theme-custom .login-card,
body.theme-custom .auth-card,
body.theme-custom [class*="login"],
body.theme-custom [class*="auth-"] {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom input[type="email"],
body.theme-custom input[type="password"],
body.theme-custom input[type="text"],
body.theme-custom input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}
body.theme-custom input::placeholder {
  color: var(--text-3) !important;
}
body.theme-custom input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-dim) !important;
}

/* ── SELECTION ──────────────────────────────────────────── */
body.theme-custom ::selection {
  background: var(--accent-dim-2) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════
   CHAT.CSS HARDCODED OVERRIDES — custom theme full coverage
   Fixes all elements that still use hardcoded dark values
═══════════════════════════════════════════════════════════ */

/* ── Message links border (rgba(100,116,248,...)) ─────────── */
body.theme-custom .message-content a {
  border-bottom-color: var(--accent-dim-2) !important;
}

/* ── Mermaid diagram background fallback ──────────────────── */
body.theme-custom .mermaid-wrapper {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

/* ── Avatar initials box-shadow ──────────────────────────── */
body.theme-custom .avatar-initials {
  box-shadow: 0 0 0 1.5px var(--accent-dim-2) !important;
}

/* ── Input box focus glow ────────────────────────────────── */
body.theme-custom .input-box:focus-within {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-dim) !important;
}

/* ── Message time color (was rgba(255,255,255,0.38)) ─────── */
body.theme-custom .msg-time {
  color: var(--text-3) !important;
}

/* ── Message check (tick) colors (were hardcoded blue) ───── */
body.theme-custom .msg-check {
  color: var(--accent) !important;
}
body.theme-custom .msg-check.seen {
  color: var(--accent-2) !important;
}

/* ── Table even rows (was rgba(255,255,255,0.02)) ────────── */
body.theme-custom .message-content tbody tr:nth-child(even),
body.theme-custom .md-table-wrap tbody tr:nth-child(even) {
  background: var(--surface-2) !important;
}

/* ── User image thumb border (was rgba(255,255,255,0.10)) ── */
body.theme-custom .user-img-thumb {
  border-color: var(--border-2) !important;
}

/* ── White text on accent buttons — keep white ───────────── */
/* (send-btn, search-ask-yes, etc. already have color:#fff which is correct) */

/* ── Code block copy button ──────────────────────────────── */
body.theme-custom .copy-btn,
body.theme-custom .code-copy-btn {
  color: var(--text-3) !important;
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
}
body.theme-custom .copy-btn:hover,
body.theme-custom .code-copy-btn:hover {
  color: var(--text) !important;
  background: var(--surface-4) !important;
}

/* ── Code header (language label) ───────────────────────── */
body.theme-custom .code-lang {
  color: var(--text-3) !important;
}

/* ── Search indicator & web search UI ───────────────────── */
body.theme-custom .search-indicator {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.theme-custom .search-indicator svg {
  color: var(--accent) !important;
}
body.theme-custom .search-ask-card {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom .search-ask-no {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}

/* ── Typing indicator dots ───────────────────────────────── */
body.theme-custom .typing-dot,
body.theme-custom .thinking-dot {
  background: var(--accent) !important;
}

/* ── Message action buttons (copy/regenerate row) ────────── */
body.theme-custom .msg-actions button,
body.theme-custom .message-actions button {
  color: var(--text-3) !important;
}
body.theme-custom .msg-actions button:hover,
body.theme-custom .message-actions button:hover {
  color: var(--accent) !important;
  background: var(--surface-2) !important;
}

/* ── Bot avatar icon ─────────────────────────────────────── */
body.theme-custom .bot-avatar,
body.theme-custom .message.bot .avatar {
  border-color: var(--border-2) !important;
  background: var(--surface-3) !important;
}

/* ── Attachment chips ────────────────────────────────────── */
body.theme-custom .attachment-chip {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}

/* ── Model name in bot header ────────────────────────────── */
body.theme-custom .model-name {
  color: var(--text-3) !important;
}

/* ── Inline code tag ─────────────────────────────────────── */
body.theme-custom .message-content code:not(pre code) {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--accent-2) !important;
}

/* ── Blockquote ──────────────────────────────────────────── */
body.theme-custom .message-content blockquote {
  background: var(--surface-2) !important;
  border-left-color: var(--accent) !important;
  color: var(--text-2) !important;
}

/* ── HR separator ────────────────────────────────────────── */
body.theme-custom .message-content hr {
  background: linear-gradient(to right, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent) !important;
}

/* ── Table header border ─────────────────────────────────── */
body.theme-custom .md-table-wrap th,
body.theme-custom .message-content th {
  border-bottom-color: var(--border-2) !important;
}
body.theme-custom .md-table-wrap,
body.theme-custom .md-table-wrap table {
  border-color: var(--border-2) !important;
  box-shadow: 0 2px 12px var(--accent-dim) !important;
}

/* ── Heading underline borders ───────────────────────────── */
body.theme-custom .message-content h1 {
  border-bottom-color: var(--border-2) !important;
}
body.theme-custom .message-content h2 {
  border-bottom-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════
   PURE CUSTOM COLOR OVERRIDES
   Forces ALL backgrounds to use the custom color palette.
   No dark/transparent bleed anywhere.
═══════════════════════════════════════════════════════════ */

/* ── Full-page backgrounds ───────────────────────────────── */
body.theme-custom,
body.theme-custom .app,
body.theme-custom .main,
body.theme-custom .chat-container,
body.theme-custom .chat-messages-inner,
body.theme-custom .messages-list,
body.theme-custom .page-content,
body.theme-custom .content-area {
  background: var(--bg) !important;
}

/* Allow chat bg image to show in custom theme — only apply solid bg when no image is set */
body.theme-custom #chatMessages:not([data-has-bg="1"]) {
  background: var(--bg) !important;
}

/* ── Bot message box: no bubble, keep transparent ───────── */
body.theme-custom .message.bot .message-box {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Chat input area full bg ─────────────────────────────── */
body.theme-custom .input-area,
body.theme-custom .input-section,
body.theme-custom .chat-input-wrap,
body.theme-custom .chat-bottom,
body.theme-custom .bottom-bar {
  background: var(--bg) !important;
}

/* ── Welcome screen full bg ──────────────────────────────── */
body.theme-custom .welcome-screen,
body.theme-custom .welcome-screen-inline,
body.theme-custom .welcome-container {
  background: var(--bg) !important;
}

/* ── Topbar full bg ──────────────────────────────────────── */
body.theme-custom .topbar,
body.theme-custom header,
body.theme-custom .top-bar,
body.theme-custom .nav-bar {
  background: var(--surface) !important;
}

/* ── Sidebar full bg ─────────────────────────────────────── */
body.theme-custom .sidebar,
body.theme-custom .sidebar-top,
body.theme-custom .sidebar-footer,
body.theme-custom .sidebar-content,
body.theme-custom .side-nav {
  background: var(--surface) !important;
}

/* ── Model selector popup ────────────────────────────────── */
body.theme-custom .model-dropdown,
body.theme-custom .model-list,
body.theme-custom .dropdown-menu,
body.theme-custom .select-popup {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom .model-dropdown .model-item,
body.theme-custom .model-list .model-item {
  color: var(--text) !important;
}
body.theme-custom .model-dropdown .model-item:hover,
body.theme-custom .model-list .model-item:hover {
  background: var(--surface-3) !important;
}

/* ── Message user bubble solid custom color ──────────────── */
body.theme-custom .message.user .message-box {
  background: var(--surface-3) !important;
  border-color: var(--accent) !important;
}

/* ── Code blocks: slightly lighter surface ───────────────── */
body.theme-custom .message-content pre,
body.theme-custom .message-content pre code,
body.theme-custom pre {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}
body.theme-custom .code-header,
body.theme-custom .code-block-header {
  background: var(--surface-4) !important;
}

/* ── Input box ───────────────────────────────────────────── */
body.theme-custom .input-box,
body.theme-custom .chat-input,
body.theme-custom .message-input {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
}

/* ── Settings page backgrounds ───────────────────────────── */
body.theme-custom .settings-page,
body.theme-custom .settings-content,
body.theme-custom .settings-main,
body.theme-custom .settings-container {
  background: var(--bg) !important;
}
body.theme-custom .settings-nav,
body.theme-custom .settings-sidebar {
  background: var(--surface) !important;
}

/* ── Gradient fade at bottom of chat ─────────────────────── */
body.theme-custom .chat-fade,
body.theme-custom .bottom-fade {
  background: linear-gradient(to top, var(--bg) 65%, transparent) !important;
}

/* ── Scrollbar track ─────────────────────────────────────── */
body.theme-custom ::-webkit-scrollbar-track {
  background: var(--surface) !important;
}

/* ── Selection ───────────────────────────────────────────── */
body.theme-custom ::selection {
  background: var(--accent-dim-2) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   HARDCODED COLOR FIXES — All remaining dark/hardcoded values
   that leak through when using custom theme
═══════════════════════════════════════════════════════════ */

/* ── msg-time: was rgba(255,255,255,0.38) hardcoded ──────── */
body.theme-custom .msg-time {
  color: var(--text-3) !important;
}

/* ── msg-check: was #2563EB / #60a5fa hardcoded blue ─────── */
body.theme-custom .msg-check {
  color: var(--accent) !important;
}
body.theme-custom .msg-check.seen {
  color: var(--accent-2) !important;
}

/* ── user image thumb border: was rgba(255,255,255,0.10) ─── */
body.theme-custom .user-img-thumb {
  border-color: var(--border-2) !important;
  box-shadow: 0 2px 10px var(--accent-dim) !important;
}

/* ── attachment card shadow ──────────────────────────────── */
body.theme-custom .attachment-card {
  box-shadow: 0 2px 8px var(--accent-dim) !important;
}

/* ── attachment remove button shadow ─────────────────────── */
body.theme-custom .attachment-remove {
  box-shadow: 0 1px 4px var(--accent-dim) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}

/* ── input box focus: was rgba(100,116,248,0.08) hardcoded ─ */
body.theme-custom .input-box:focus-within {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-dim) !important;
  border-color: var(--accent) !important;
}

/* ── user message box-shadow: was rgba(100,116,248,0.18) ─── */
body.theme-custom .message.user .message-box {
  box-shadow: 0 2px 12px var(--accent-dim-2), var(--shadow-sm) !important;
}

/* ── avatar initials glow: was rgba(100,116,248,0.2) ─────── */
body.theme-custom .avatar-initials {
  box-shadow: 0 0 0 1.5px var(--accent-dim-2) !important;
}

/* ── code header border: was rgba(100,116,248,0.3) ──────────  */
body.theme-custom .code-header {
  border-bottom-color: var(--border-2) !important;
}

/* ── mermaid fallback bg: was hardcoded #1a1a2e ─────────── */
body.theme-custom .mermaid-wrapper {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

/* ── table even rows: was rgba(255,255,255,0.02) ────────── */
body.theme-custom .message-content tbody tr:nth-child(even),
body.theme-custom .md-table-wrap tbody tr:nth-child(even) {
  background: var(--surface-2) !important;
}

/* ── md-table-wrap shadow: was rgba(0,0,0,0.18) ─────────── */
body.theme-custom .md-table-wrap {
  box-shadow: 0 2px 12px var(--accent-dim) !important;
}

/* ── Bot message box: transparent, no bubble ─────────────── */
body.theme-custom .message.bot .message-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── action-btn (copy/regenerate): was transparent ───────── */
body.theme-custom .action-btn {
  background: transparent !important;
  color: var(--text-3) !important;
}
body.theme-custom .action-btn:hover {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
}

/* ── Scroll to bottom button ─────────────────────────────── */
body.theme-custom .scroll-to-bottom-btn {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}
body.theme-custom .scroll-to-bottom-btn:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

/* ── Model selector button in topbar ─────────────────────── */
body.theme-custom .model-selector-btn,
body.theme-custom .model-select-btn,
body.theme-custom [class*="model-btn"] {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

/* ── Topbar icon buttons ─────────────────────────────────── */
body.theme-custom .topbar-btn,
body.theme-custom .nav-btn {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* ── Input textarea: was transparent (shows dark bg) ─────── */
body.theme-custom textarea {
  background: transparent !important;
  color: var(--text) !important;
  caret-color: var(--accent) !important;
}
body.theme-custom textarea::placeholder {
  color: var(--text-3) !important;
}

/* ── Input area wrapper ──────────────────────────────────── */
body.theme-custom .input-area,
body.theme-custom .chat-input-wrap,
body.theme-custom .input-wrapper,
body.theme-custom .input-section {
  background: var(--bg) !important;
}

/* ── Bottom fade gradient: matches bg ───────────────────── */
body.theme-custom .chat-fade,
body.theme-custom .bottom-fade,
body.theme-custom .fade-overlay {
  background: linear-gradient(to top, var(--bg) 65%, transparent) !important;
}

/* ── Reasoning block ─────────────────────────────────────── */
body.theme-custom .reasoning-wrapper {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
body.theme-custom .reasoning-header {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
}
body.theme-custom .reasoning-header:hover {
  background: var(--surface-4) !important;
}
body.theme-custom .reasoning-content {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
}

/* ── Citations ───────────────────────────────────────────── */
body.theme-custom .citations-wrapper {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
body.theme-custom .citations-header {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
}
body.theme-custom .citations-header:hover {
  background: var(--surface-4) !important;
}
body.theme-custom .citation-item {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.theme-custom .citation-item:hover {
  background: var(--surface-4) !important;
}

/* ── Search ask card (web search) ────────────────────────── */
body.theme-custom .search-ask-card {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom .search-ask-yes {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.theme-custom .search-ask-no {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}
body.theme-custom .search-ask-no:hover {
  background: var(--surface-4) !important;
  color: var(--text) !important;
}

/* ── Attach options popup ────────────────────────────────── */
body.theme-custom .attach-options,
body.theme-custom .attach-menu {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  box-shadow: 0 2px 12px var(--accent-dim) !important;
}
body.theme-custom .attach-option {
  color: var(--text-2) !important;
}
body.theme-custom .attach-option:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

/* ── All generic dark backgrounds on any element ─────────── */
body.theme-custom [style*="background: #0"],
body.theme-custom [style*="background:#0"],
body.theme-custom [style*="background: rgb(0"],
body.theme-custom [style*="background-color: #0"] {
  background: var(--surface) !important;
}

/* ── Typing / thinking dots ──────────────────────────────── */
body.theme-custom .typing-dot,
body.theme-custom .thinking-dot,
body.theme-custom .dot {
  background: var(--accent) !important;
}

/* ── Message header (bot name + model) ───────────────────── */
body.theme-custom .message-header {
  background: transparent !important;
}
body.theme-custom .bot-name {
  color: var(--text) !important;
}
body.theme-custom .model-name,
body.theme-custom .model-label {
  color: var(--text-3) !important;
}

/* ── Input box (full) ────────────────────────────────────── */
body.theme-custom .input-box {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
}

/* ── Left-action buttons inside input ────────────────────── */
body.theme-custom .left-actions .action-btn {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.theme-custom .left-actions .action-btn:hover {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
body.theme-custom .left-actions .action-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ── Sidebar mobile overlay (stays semi-dark for usability) ─ */
body.theme-custom .sidebar-overlay {
  background: rgba(0,0,0,0.45) !important;
}

/* ── Model info / warning modals ─────────────────────────── */
body.theme-custom .model-info-modal,
body.theme-custom .warning-modal {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}
body.theme-custom .model-info-overlay,
body.theme-custom .warning-overlay {
  backdrop-filter: blur(8px) !important;
}

/* ── Welcome/suggestion chips ───────────────────────────── */
body.theme-custom .welcome-screen,
body.theme-custom .welcome-container {
  background: var(--bg) !important;
}

/* ── Message header bot avatar ───────────────────────────── */
body.theme-custom .message.bot .avatar,
body.theme-custom .bot-avatar {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
}
body.theme-custom .avatar-img,
body.theme-custom .bot-icon {
  background: var(--surface-3) !important;
}

/* ── Grad surface (used in some sections) ────────────────── */
body.theme-custom [style*="--grad-surface"] {
  background: var(--surface) !important;
}

/* ── Any remaining element with explicit dark bg ─────────── */
body.theme-custom .code-block {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
}