/* Minimal global dark mode:
   - Auto via OS/browser: prefers-color-scheme
   - Optional manual force (useful for QA): set html[data-theme="dark"]
*/

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* App custom vars (used heavily by application.bootstrap.css / welcome.css / items.css) */
    --color-background: #0b1220;
    --color-text: #e5e7eb;
    --color-text-light: #9ca3af;
    --color-white: #0f172a;
    --navbar-shadow: rgba(0, 0, 0, 0.35);
    --color-primary: var(--button-text-dark); /* brighter brand blue for dark backgrounds */
    --color-primary-light: #bfdbfe;

    /* Bootstrap 5.3 variables (works even without setting data-bs-theme) */
    --bs-body-bg: #0b1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-body-color: #e5e7eb;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-secondary-color: #9ca3af;
    --bs-tertiary-bg: #111827;
    --bs-tertiary-bg-rgb: 17, 24, 39;
    --bs-border-color: rgba(255, 255, 255, 0.12);
    --bs-border-color-rgb: 255, 255, 255;
    --bs-link-color: var(--button-text-dark);
    --bs-link-hover-color: #bfdbfe;
  }

  /* Hard overrides for layouts that set explicit light colors */
  body { background: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
  .app-container, .main-content, .main-container { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
  h1, h2, h3, h4, h5, h6 { color: var(--bs-body-color) !important; }
  .text-muted { color: var(--bs-secondary-color) !important; }

  /* Common “surface” blocks used across bootstrap layouts + chat_v2_full */
  .navbar,
  .dropdown-menu,
  .sliding-panel,
  .auth-card,
  .feature-card,
  .memori-card,
  .videochat-tile,
  .item-header,
  .header { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; }

  .memori-pagination {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
  }

  .memori-pagination .page-link {
    border-color: var(--bs-border-color) !important;
    color: var(--bs-link-color) !important;
    text-decoration: none !important;
  }

  .memori-pagination .page-link:hover,
  .memori-pagination .page-link:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  .memori-pagination .page-item.active .page-link {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: var(--bs-body-color) !important;
    font-weight: 700 !important;
  }

  .feature-card p { color: var(--bs-body-color) !important; }

  .dropdown-item { color: var(--bs-body-color) !important; }
  .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06) !important; }

  /* Links (pre-login pages were too dim) */
  a { color: var(--bs-link-color) !important; }
  a:hover { color: var(--bs-link-hover-color) !important; }
  .navbar-nav .nav-link { color: var(--color-primary) !important; }

  /* Form controls across bootstrap + custom chat inputs */
  .form-control, .form-select, input, textarea, select, .chat-input-field {
    background-color: #0f172a !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
  }
  .form-control::placeholder, .chat-input-field::placeholder { color: rgba(229, 231, 235, 0.6) !important; }

  /* Alerts (bootstrap) */
  .alert-danger { background-color: rgba(185, 28, 28, 0.25) !important; color: #fecaca !important; }
  .alert-success { background-color: rgba(22, 163, 74, 0.2) !important; color: #bbf7d0 !important; }

  /* Speaker select / identify speakers page (items.css is light by default) */
  .item-content { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
  .item-footer { background-color: var(--bs-tertiary-bg) !important; border-color: var(--bs-border-color) !important; }
  .memori-detail { background: var(--bs-body-bg) !important; }
  .memori-detail .text-muted { color: var(--bs-secondary-color) !important; }
  .audio-player { background: var(--bs-tertiary-bg) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; }
  .content-area {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  }
  .content-area .card-header {
    background-color: var(--bs-tertiary-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
  }
  .content-area .card-body { color: var(--bs-body-color) !important; }
  .content-area .section-content { color: var(--bs-body-color) !important; }
  .content-area .empty-state { color: var(--bs-secondary-color) !important; }
  .content-area .tab-button { color: var(--bs-secondary-color) !important; }
  .content-area .tab-button:hover,
  .content-area .tab-button:hover a {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--bs-body-color) !important;
  }
  .content-area .timestamp-link { color: var(--bs-link-color) !important; }

  .speaker-select-container { background: rgba(17, 24, 39, 0.88) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; }
  .speaker-select-container.confirmed { background: rgba(22, 163, 74, 0.18) !important; border-color: rgba(22, 163, 74, 0.35) !important; }
  .speaker-select-container.unconfirmed { background: rgba(220, 38, 38, 0.16) !important; border-color: rgba(220, 38, 38, 0.35) !important; }

  .speaker-wizard-card { background: rgba(17, 24, 39, 0.88) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; }
  .speaker-wizard-card.speaker-wizard-reviewed { background: rgba(22, 163, 74, 0.18) !important; border-color: rgba(22, 163, 74, 0.35) !important; }
  .speaker-wizard-card.speaker-wizard-unreviewed { background: rgba(234, 179, 8, 0.16) !important; border-color: rgba(234, 179, 8, 0.35) !important; }

  /* Tom Select (speaker wizard typeahead): the internal <input> isn't a bootstrap form-control */
  .speaker-wizard .ts-control {
    background-color: #0f172a !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
  }
  .speaker-wizard .ts-control input,
  .speaker-wizard .ts-control .item {
    color: var(--bs-body-color) !important;
  }
  .speaker-wizard .ts-control input::placeholder {
    color: rgba(229, 231, 235, 0.6) !important;
  }
  .speaker-wizard .ts-dropdown,
  .speaker-wizard .ts-dropdown .option,
  .speaker-wizard .ts-dropdown .no-results {
    background-color: #111827 !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
  }
  .speaker-wizard .ts-dropdown .option.active,
  .speaker-wizard .ts-dropdown .option:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--bs-body-color) !important;
  }

  /* speaker transcript styles are scoped below with html[data-theme="dark"] */

  /* Videochat transcript panel (application.bootstrap.css sets it to light) */
  .videochat-transcript { background: rgba(17, 24, 39, 0.85) !important; color: var(--bs-body-color) !important; }
  .videochat-transcript-panel,
  .item_transcription_container.videochat-transcript-panel {
    background: rgba(17, 24, 39, 0.85) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
  }
  .videochat-transcript-panel a { color: var(--bs-link-color) !important; }
  .videochat-transcript-panel p { color: var(--bs-body-color) !important; }

  /* Item edit/new form card (items.css is light by default) */
  .item-form-container {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  }
  .item-form-container hr { border-color: var(--bs-border-color) !important; opacity: 1; }
  .item-form-container label,
  .item-form-container .form-label { color: var(--bs-body-color) !important; }
  .item-form-container .text-muted { color: var(--bs-secondary-color) !important; }
  .item-form-container input[type="text"],
  .item-form-container textarea {
    background-color: #0f172a !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
  }
  .item-form-container input[type="text"]::placeholder,
  .item-form-container textarea::placeholder { color: rgba(229, 231, 235, 0.6) !important; }
  .item-form-container .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
  }

  /* Chat v2 (chat_layout_full + chat_v2_full.css) */
  .wrapper, .container { background-color: transparent !important; }
  .content { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
  .footer {
    background-color: var(--bs-tertiary-bg) !important;
    border-top-color: var(--bs-border-color) !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25) !important;
  }

  .chat-header-title { color: var(--bs-link-color) !important; }
  .chat-header-subtitle { color: var(--bs-secondary-color) !important; }
  .chat-header-meta { color: var(--bs-secondary-color) !important; }
  .chat-header-logo {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--bs-border-color) !important;
  }
  .chat-header-back {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-link-color) !important;
  }
  .chat-header-back:hover,
  .chat-header-back:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  .content .chat-messages .message.assistant-message {
    --message-text: #e7edf7;
    --message-heading: #f8fbff;
    --message-strong: #ffffff;
    --message-link: #9cc3ff;
    --message-icon: rgba(231, 237, 247, 0.78);
    --message-marker: #b9c8de;
    --message-code-bg: rgba(148, 163, 184, 0.16);
    --message-code-text: #f8fbff;
    --message-pre-bg: rgba(15, 23, 42, 0.42);
    --message-pre-border: rgba(148, 163, 184, 0.18);
    --message-quote-bg: rgba(96, 165, 250, 0.08);
    --message-quote-border: rgba(148, 163, 184, 0.28);
    --message-quote-text: #d9e4f3;
    --message-divider: rgba(148, 163, 184, 0.18);
    --message-table-border: rgba(148, 163, 184, 0.18);
    --message-table-head-bg: rgba(255, 255, 255, 0.04);
    --message-border: rgba(148, 163, 184, 0.18);
    --message-bg: linear-gradient(180deg, rgba(25, 34, 54, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  }
  .content .chat-messages .message.user-message { color: #ffffff !important; }

  .chat-form-global .form-control.auto-resize,
  .prompt-select .form-select {
    background-color: #0f172a !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
  }
  .chat-form-global .form-control.auto-resize:focus,
  .prompt-select .form-select:focus {
    border-color: rgba(147, 197, 253, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.12) !important;
  }

  .font-adjust-btn {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
  }
  .font-adjust-btn:hover,
  .font-adjust-btn:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  #message_info_frame {
    background-color: rgba(17, 24, 39, 0.92) !important;
    color: var(--bs-body-color) !important;
  }
  #message_info_frame a { color: var(--bs-secondary-color) !important; }

  #transcript-overlay {
    background-color: rgba(17, 24, 39, 0.96) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
  }
  #transcript-overlay-title { color: var(--bs-body-color) !important; }
  #transcript-overlay-close { color: var(--bs-secondary-color) !important; }
}

html[data-theme="dark"] {
  --color-background: #0b1220;
  --color-text: #e5e7eb;
  --color-text-light: #9ca3af;
  --color-white: #0f172a;
  --navbar-shadow: rgba(0, 0, 0, 0.35);
  --color-primary: var(--button-text-light);
  --color-primary-light: #bfdbfe;

  --bs-body-bg: #0b1220;
  --bs-body-bg-rgb: 11, 18, 32;
  --bs-body-color: #e5e7eb;
  --bs-body-color-rgb: 229, 231, 235;
  --bs-secondary-color: #9ca3af;
  --bs-tertiary-bg: #111827;
  --bs-tertiary-bg-rgb: 17, 24, 39;
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-border-color-rgb: 255, 255, 255;
  --bs-link-color: var(--button-text-light);
  --bs-link-hover-color: #bfdbfe;
}

html[data-theme="dark"] body { background: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .main-container { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--bs-body-color) !important; }

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .sliding-panel,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .memori-card,
html[data-theme="dark"] .videochat-tile,
html[data-theme="dark"] .item-header,
html[data-theme="dark"] .header { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; }

html[data-theme="dark"] .feature-card p { color: var(--bs-body-color) !important; }

html[data-theme="dark"] .dropdown-item { color: var(--bs-body-color) !important; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06) !important; }

html[data-theme="dark"] a { color: var(--bs-link-color) !important; }
html[data-theme="dark"] a:hover { color: var(--bs-link-hover-color) !important; }
html[data-theme="dark"] .navbar-nav .nav-link { color: var(--color-primary) !important; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .chat-input-field {
  background-color: #0f172a !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .chat-input-field::placeholder { color: rgba(229, 231, 235, 0.6) !important; }

html[data-theme="dark"] .alert-danger { background-color: rgba(185, 28, 28, 0.25) !important; color: #fecaca !important; }
html[data-theme="dark"] .alert-success { background-color: rgba(22, 163, 74, 0.2) !important; color: #bbf7d0 !important; }

html[data-theme="dark"] .item-content { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
html[data-theme="dark"] .item-footer { background-color: var(--bs-tertiary-bg) !important; border-color: var(--bs-border-color) !important; }
html[data-theme="dark"] .memori-detail { background: var(--bs-body-bg) !important; }
html[data-theme="dark"] .memori-detail .text-muted { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .audio-player { background: var(--bs-tertiary-bg) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; }
html[data-theme="dark"] .content-area {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .content-area .card-header {
  background-color: var(--bs-tertiary-bg) !important;
  border-bottom-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .content-area .card-body { color: var(--bs-body-color) !important; }
html[data-theme="dark"] .content-area .section-content { color: var(--bs-body-color) !important; }
html[data-theme="dark"] .content-area .empty-state { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .content-area .tab-button { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .content-area .tab-button:hover,
html[data-theme="dark"] .content-area .tab-button:hover a {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--bs-body-color) !important;
}
html[data-theme="dark"] .content-area .timestamp-link { color: var(--bs-link-color) !important; }

html[data-theme="dark"] .speaker-select-container { background: rgba(17, 24, 39, 0.88) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; }
html[data-theme="dark"] .speaker-select-container.confirmed { background: rgba(22, 163, 74, 0.18) !important; border-color: rgba(22, 163, 74, 0.35) !important; }
html[data-theme="dark"] .speaker-select-container.unconfirmed { background: rgba(220, 38, 38, 0.16) !important; border-color: rgba(220, 38, 38, 0.35) !important; }

html[data-theme="dark"] .speaker-transcription-container { background: #0f172a !important; border-color: var(--bs-border-color) !important; }
html[data-theme="dark"] .transcription-entry:hover { background-color: rgba(147, 197, 253, 0.08) !important; }
html[data-theme="dark"] .transcription-entry.active-entry { background-color: rgba(147, 197, 253, 0.12) !important; border-left-color: var(--bs-link-color) !important; }
html[data-theme="dark"] .transcription-entry .time,
html[data-theme="dark"] .transcription-entry .duration { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .transcription-entry .text { color: var(--bs-body-color) !important; }

html[data-theme="dark"] .videochat-transcript { background: rgba(17, 24, 39, 0.85) !important; color: var(--bs-body-color) !important; }
html[data-theme="dark"] .videochat-transcript-panel,
html[data-theme="dark"] .item_transcription_container.videochat-transcript-panel {
  background: rgba(17, 24, 39, 0.85) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .videochat-transcript-panel a { color: var(--bs-link-color) !important; }
html[data-theme="dark"] .videochat-transcript-panel p { color: var(--bs-body-color) !important; }

html[data-theme="dark"] .item-form-container {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .item-form-container hr { border-color: var(--bs-border-color) !important; opacity: 1; }
html[data-theme="dark"] .item-form-container label,
html[data-theme="dark"] .item-form-container .form-label { color: var(--bs-body-color) !important; }
html[data-theme="dark"] .item-form-container .text-muted { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .item-form-container input[type="text"],
html[data-theme="dark"] .item-form-container textarea {
  background-color: #0f172a !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .item-form-container input[type="text"]::placeholder,
html[data-theme="dark"] .item-form-container textarea::placeholder { color: rgba(229, 231, 235, 0.6) !important; }
html[data-theme="dark"] .item-form-container .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* Forced dark mode (cookie): duplicate chat v2 overrides for non-dark OS */
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .container { background-color: transparent !important; }
html[data-theme="dark"] .content { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
html[data-theme="dark"] .footer {
  background-color: var(--bs-tertiary-bg) !important;
  border-top-color: var(--bs-border-color) !important;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .chat-header-title { color: var(--bs-link-color) !important; }
html[data-theme="dark"] .chat-header-subtitle { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .chat-header-meta { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] .chat-header-logo {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .chat-header-back {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-link-color) !important;
}
html[data-theme="dark"] .chat-header-back:hover,
html[data-theme="dark"] .chat-header-back:focus {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="dark"] .content .chat-messages .message.assistant-message {
  --message-text: #e7edf7;
  --message-heading: #f8fbff;
  --message-strong: #ffffff;
  --message-link: #9cc3ff;
  --message-icon: rgba(231, 237, 247, 0.78);
  --message-marker: #b9c8de;
  --message-code-bg: rgba(148, 163, 184, 0.16);
  --message-code-text: #f8fbff;
  --message-pre-bg: rgba(15, 23, 42, 0.42);
  --message-pre-border: rgba(148, 163, 184, 0.18);
  --message-quote-bg: rgba(96, 165, 250, 0.08);
  --message-quote-border: rgba(148, 163, 184, 0.28);
  --message-quote-text: #d9e4f3;
  --message-divider: rgba(148, 163, 184, 0.18);
  --message-table-border: rgba(148, 163, 184, 0.18);
  --message-table-head-bg: rgba(255, 255, 255, 0.04);
  --message-border: rgba(148, 163, 184, 0.18);
  --message-bg: linear-gradient(180deg, rgba(25, 34, 54, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
}
html[data-theme="dark"] .content .chat-messages .message.user-message { color: #ffffff !important; }
html[data-theme="dark"] .chat-form-global .form-control.auto-resize,
html[data-theme="dark"] .prompt-select .form-select {
  background-color: #0f172a !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
html[data-theme="dark"] .chat-form-global .form-control.auto-resize:focus,
html[data-theme="dark"] .prompt-select .form-select:focus {
  border-color: rgba(147, 197, 253, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.12) !important;
}
html[data-theme="dark"] .font-adjust-btn {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}
html[data-theme="dark"] .font-adjust-btn:hover,
html[data-theme="dark"] .font-adjust-btn:focus {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="dark"] #message_info_frame {
  background-color: rgba(17, 24, 39, 0.92) !important;
  color: var(--bs-body-color) !important;
}
html[data-theme="dark"] #message_info_frame a { color: var(--bs-secondary-color) !important; }
html[data-theme="dark"] #transcript-overlay {
  background-color: rgba(17, 24, 39, 0.96) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}
html[data-theme="dark"] #transcript-overlay-title { color: var(--bs-body-color) !important; }
html[data-theme="dark"] #transcript-overlay-close { color: var(--bs-secondary-color) !important; }

/* ── SPA chat footer: explicit dark/light colours ── */
/* Scoped to .spa-chat-frame-inner so these only affect the in-SPA chat panel */

/* Dark via OS */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .spa-chat-frame-inner .footer {
    background-color: #161b27 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
  }
  :root:not([data-theme="light"]) .spa-chat-frame-inner .chat-form-global {
    background-color: #161b27 !important;
    color: #e2e8f0 !important;
  }
  :root:not([data-theme="light"]) .spa-chat-frame-inner .chat-input-container,
  :root:not([data-theme="light"]) .spa-chat-frame-inner .chat-controls {
    background-color: #161b27 !important;
    color: #e2e8f0 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
  }
  :root:not([data-theme="light"]) .spa-chat-frame-inner .chat-form-global .form-control.auto-resize,
  :root:not([data-theme="light"]) .spa-chat-frame-inner .prompt-select .form-select {
    background-color: #1e2535 !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  :root:not([data-theme="light"]) .spa-chat-frame-inner .chat-form-global .form-control.auto-resize::placeholder {
    color: rgba(148, 163, 184, 0.7) !important;
  }
  :root:not([data-theme="light"]) .spa-chat-frame-inner .prompt-select .form-select {
    color: #94a3b8 !important;
  }
}

/* Dark via forced cookie */
html[data-theme="dark"] .spa-chat-frame-inner .footer {
  background-color: #161b27 !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .spa-chat-frame-inner .chat-form-global {
  background-color: #161b27 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .spa-chat-frame-inner .chat-input-container,
html[data-theme="dark"] .spa-chat-frame-inner .chat-controls {
  background-color: #161b27 !important;
  color: #e2e8f0 !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .spa-chat-frame-inner .chat-form-global .form-control.auto-resize,
html[data-theme="dark"] .spa-chat-frame-inner .prompt-select .form-select {
  background-color: #1e2535 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .spa-chat-frame-inner .chat-form-global .form-control.auto-resize::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
}
html[data-theme="dark"] .spa-chat-frame-inner .prompt-select .form-select {
  color: #94a3b8 !important;
}

/* Light: reset when OS is dark but user forced light */
html[data-theme="light"] .spa-chat-frame-inner .footer {
  background-color: #f4f4f4 !important;
  border-top-color: rgba(32, 53, 128, 0.12) !important;
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .spa-chat-frame-inner .chat-form-global .form-control.auto-resize,
html[data-theme="light"] .spa-chat-frame-inner .prompt-select .form-select {
  background-color: #fff !important;
  color: #0f172a !important;
  border-color: rgba(32, 53, 128, 0.18) !important;
}
html[data-theme="light"] .spa-chat-frame-inner .chat-form-global .form-control.auto-resize::placeholder {
  color: rgba(15, 23, 42, 0.4) !important;
}

/* General light-mode form reset (non-SPA pages) */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: #fff !important;
  color: #0f172a !important;
  border-color: rgba(32, 53, 128, 0.18) !important;
}
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] textarea::placeholder { color: rgba(15, 23, 42, 0.4) !important; }
html[data-theme="light"] .chat-form-global .form-control.auto-resize,
html[data-theme="light"] .prompt-select .form-select {
  background-color: #fff !important;
  color: #0f172a !important;
  border-color: rgba(32, 53, 128, 0.18) !important;
}

/* ── SPA light mode ─────────────────────────────────────────────────── */
/* Override the dark-only --spa-* tokens when light mode is active.
   Forced cookie: html[data-theme="light"]
   Auto (OS):     @media (prefers-color-scheme: light) */

html[data-theme="light"] {
  --spa-bg:       #f8fafc;
  --spa-bg-2:     #f1f5f9;
  --spa-bg-3:     #e2e8f0;
  --spa-border:   #e2e8f0;
  --spa-border-2: #cbd5e1;
  --spa-text:     #0f172a;
  --spa-text-2:   #334155;
  --spa-text-3:   #64748b;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --spa-bg:       #f8fafc;
    --spa-bg-2:     #f1f5f9;
    --spa-bg-3:     #e2e8f0;
    --spa-border:   #e2e8f0;
    --spa-border-2: #cbd5e1;
    --spa-text:     #0f172a;
    --spa-text-2:   #334155;
    --spa-text-3:   #64748b;
  }
}

/* SPA elements with hardcoded dark colours need explicit light overrides */
html[data-theme="light"] .spa-body { background: var(--spa-bg) !important; color: var(--spa-text) !important; }
html[data-theme="light"] .spa-header { background: rgba(248,250,252,0.92) !important; border-bottom-color: var(--spa-border) !important; }
html[data-theme="light"] .spa-chat-row-title,
html[data-theme="light"] .spa-memory-row-title { color: #1e293b !important; }
html[data-theme="light"] .spa-chat-row,
html[data-theme="light"] .spa-memory-row { border-bottom-color: rgba(0,0,0,0.05) !important; }
html[data-theme="light"] .spa-chat-row:hover,
html[data-theme="light"] .spa-chat-row.active,
html[data-theme="light"] .spa-memory-row:hover { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .spa-sidebar-search input,
html[data-theme="light"] .spa-memories-search input { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .spa-domain-btn { background: rgba(0,0,0,0.02) !important; }
html[data-theme="light"] .spa-chat-delete { color: #94a3b8 !important; }
html[data-theme="light"] .spa-item-pane { background: var(--spa-bg) !important; }
html[data-theme="light"] .spa-item-toolbar { background: rgba(248,250,252,0.92) !important; border-bottom-color: var(--spa-border) !important; }
html[data-theme="light"] .spa-item-toolbar-title { color: var(--spa-text) !important; }
html[data-theme="light"] .spa-item-meta { color: var(--spa-text-3) !important; }
html[data-theme="light"] .spa-item-summary { color: var(--spa-text) !important; }
html[data-theme="light"] .spa-item-notes-label { color: var(--spa-text-2) !important; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .spa-body { background: var(--spa-bg) !important; color: var(--spa-text) !important; }
  :root:not([data-theme="dark"]) .spa-header { background: rgba(248,250,252,0.92) !important; border-bottom-color: var(--spa-border) !important; }
  :root:not([data-theme="dark"]) .spa-chat-row-title,
  :root:not([data-theme="dark"]) .spa-memory-row-title { color: #1e293b !important; }
  :root:not([data-theme="dark"]) .spa-chat-row,
  :root:not([data-theme="dark"]) .spa-memory-row { border-bottom-color: rgba(0,0,0,0.05) !important; }
  :root:not([data-theme="dark"]) .spa-chat-row:hover,
  :root:not([data-theme="dark"]) .spa-chat-row.active,
  :root:not([data-theme="dark"]) .spa-memory-row:hover { background: rgba(0,0,0,0.04) !important; }
  :root:not([data-theme="dark"]) .spa-sidebar-search input,
  :root:not([data-theme="dark"]) .spa-memories-search input { background: rgba(0,0,0,0.04) !important; }
  :root:not([data-theme="dark"]) .spa-domain-btn { background: rgba(0,0,0,0.02) !important; }
  :root:not([data-theme="dark"]) .spa-chat-delete { color: #94a3b8 !important; }
  :root:not([data-theme="dark"]) .spa-item-pane { background: var(--spa-bg) !important; }
  :root:not([data-theme="dark"]) .spa-item-toolbar { background: rgba(248,250,252,0.92) !important; border-bottom-color: var(--spa-border) !important; }
  :root:not([data-theme="dark"]) .spa-item-toolbar-title { color: var(--spa-text) !important; }
  :root:not([data-theme="dark"]) .spa-item-meta { color: var(--spa-text-3) !important; }
  :root:not([data-theme="dark"]) .spa-item-summary { color: var(--spa-text) !important; }
  :root:not([data-theme="dark"]) .spa-item-notes-label { color: var(--spa-text-2) !important; }
}

/* ── SPA badges — light mode ── */
/* Speaker badge: dark green text on soft green bg */
html[data-theme="light"] .spa-badge-speaker {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}
/* Tag badge: dark indigo text on soft indigo bg */
html[data-theme="light"] .spa-badge-tag {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4338ca !important;
  border-color: rgba(99, 102, 241, 0.28) !important;
}
/* Status badges */
html[data-theme="light"] .spa-badge-status-pending {
  background: rgba(217, 119, 6, 0.1) !important;
  color: #b45309 !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
}
html[data-theme="light"] .spa-badge-status-processing {
  background: rgba(71, 85, 105, 0.1) !important;
  color: #475569 !important;
  border-color: rgba(71, 85, 105, 0.22) !important;
}
html[data-theme="light"] .spa-badge-status-ready {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

/* Amber pending banner & section header — darken text for legibility */
html[data-theme="light"] .spa-pending-banner {
  background: rgba(217, 119, 6, 0.08) !important;
  border-bottom-color: rgba(217, 119, 6, 0.2) !important;
  color: #92400e !important;
}
html[data-theme="light"] .spa-pending-banner:hover {
  background: rgba(217, 119, 6, 0.14) !important;
}
html[data-theme="light"] .spa-pending-section-header {
  background: rgba(217, 119, 6, 0.07) !important;
  border-bottom-color: rgba(217, 119, 6, 0.18) !important;
  color: #92400e !important;
}
html[data-theme="light"] .spa-pending-section-header:hover {
  background: rgba(217, 119, 6, 0.13) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .spa-badge-speaker {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
  }
  :root:not([data-theme="dark"]) .spa-badge-tag {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4338ca !important;
    border-color: rgba(99, 102, 241, 0.28) !important;
  }
  :root:not([data-theme="dark"]) .spa-badge-status-pending {
    background: rgba(217, 119, 6, 0.1) !important;
    color: #b45309 !important;
    border-color: rgba(217, 119, 6, 0.28) !important;
  }
  :root:not([data-theme="dark"]) .spa-badge-status-processing {
    background: rgba(71, 85, 105, 0.1) !important;
    color: #475569 !important;
    border-color: rgba(71, 85, 105, 0.22) !important;
  }
  :root:not([data-theme="dark"]) .spa-badge-status-ready {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
  }
  :root:not([data-theme="dark"]) .spa-pending-banner {
    background: rgba(217, 119, 6, 0.08) !important;
    border-bottom-color: rgba(217, 119, 6, 0.2) !important;
    color: #92400e !important;
  }
  :root:not([data-theme="dark"]) .spa-pending-banner:hover {
    background: rgba(217, 119, 6, 0.14) !important;
  }
  :root:not([data-theme="dark"]) .spa-pending-section-header {
    background: rgba(217, 119, 6, 0.07) !important;
    border-bottom-color: rgba(217, 119, 6, 0.18) !important;
    color: #92400e !important;
  }
  :root:not([data-theme="dark"]) .spa-pending-section-header:hover {
    background: rgba(217, 119, 6, 0.13) !important;
  }
}