/* ============================================================
   FUROBOX — CENTRALIZED DARK MODE SYSTEM

   HOW IT WORKS:
   - Light mode values live in :root
   - Dark mode overrides live in body.dark
   - Use var(--token-name) everywhere in your other CSS files
   - To change ANY color app-wide: edit ONE value here
   ============================================================ */



/* ============================================================
   DARK MODE OVERRIDES — body.dark
   Change any value here → reflects entire app instantly
   ============================================================ */
body.dark {

  /* --- Backgrounds --- */
  --bg-base:          #212121;
  --bg-surface:       #212121;
  --bg-surface-2:     #1a2332;
  --bg-surface-3:     #374151;
  --bg-input:         #212121;
  --bg-sidebar:       #212121;
  --bg-header:        #212121;
  --bg-overlay:       rgba(0,0,0,0.65);
  --bg-code:          #1e2a3b;

  /* --- Text --- */
  --text-primary:     #f9fafb;
  --text-secondary:   #d1d5db;
  --text-muted:       #9ca3af;
  --text-disabled:    rgba(249,250,251,0.35);
  --text-inverse:     #212121;
  --text-link:        #60a5fa;
  --text-danger:      #f87171;
  --text-success:     #34d399;
  --text-warning:     #fbbf24;

  /* --- Borders --- */
  --border-base:      #374151;
  --border-subtle:    #2d3748;
  --border-focus:     rgba(96,165,250,0.5);
  --border-danger:    #f87171;

  /* --- Brand / Accent --- */
  --accent-primary:   #60a5fa;
  --accent-primary-d: #93c5fd;
  --accent-hover:     #60a5fa;
  --accent-blue-soft: rgba(96,165,250,0.1);

  /* --- Interactive States --- */
  --hover-bg:         #374151;
  --hover-bg-blue:    rgba(96,165,250,0.1);
  --active-bg:        #4b5563;

  /* --- Shadows --- */
  --shadow-sm:        0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:        0 20px 60px rgba(0,0,0,0.6);

  /* --- Scrollbar --- */
  --scrollbar-thumb:  rgba(96,165,250,0.3);
  --scrollbar-hover:  rgba(96,165,250,0.5);

  /* --- Sidebar specific --- */
  --sidebar-item-hover: rgba(96,165,250,0.08);
  --sidebar-item-active: rgba(96,165,250,0.15);
  --sidebar-text:     #d1d5db;
  --sidebar-text-muted: #9ca3af;

  /* --- Chat --- */
  --chat-user-bg:     #1e2d45;
  --chat-ai-bg:       #212121;
  --chat-input-bg:    #212121;
  --chat-border:      rgba(255,255,255,0.07);

  /* --- Navbar --- */
  --navbar-bg:        #212121;
  --navbar-border:    rgba(255,255,255,0.07);

  /* --- Dropdown --- */
  --dropdown-bg:      #212121;
  --dropdown-border:  #374151;
  --dropdown-shadow:  0 8px 24px rgba(0,0,0,0.5);
  --dropdown-item-hover: #374151;

  /* --- Settings Modal --- */
  --settings-sidebar-bg:  #212121;
  --settings-content-bg:  #212121;
  --settings-tab-active:  #60a5fa;
  --settings-row-border:  #374151;

  /* --- Toggle / Switch --- */
  --toggle-off:       #4b5563;
  --toggle-on:        #1b91f8;
  --toggle-thumb:     #ffffff;

  /* --- Usage Bars --- */
  --usage-bar-bg:     #374151;
  --usage-bar-fill:   #60a5fa;

  /* --- Toast --- */
  --toast-success-bg: rgba(16,185,129,0.15);
  --toast-success-text: #34d399;
  --toast-success-border: #34d399;
  --toast-error-bg:   rgba(239,68,68,0.15);
  --toast-error-text: #f87171;
  --toast-error-border: #f87171;
  --toast-warning-bg: rgba(245,158,11,0.15);
  --toast-warning-text: #fbbf24;
  --toast-warning-border: #fbbf24;
  --toast-info-bg:    rgba(59,130,246,0.15);
  --toast-info-text:  #93c5fd;
  --toast-info-border: #60a5fa;

  /* --- Code Highlighting --- */
  --hljs-bg:          #1e2a3b;
  --hljs-text:        #e2e8f0;
}


/* ============================================================
   GLOBAL DARK MODE ELEMENT RULES
   All rules below use the tokens above.
   These cover the elements common to ALL pages.
   ============================================================ */

/* Body */
body.dark {
  background-color: var(--bg-base) !important;
  color: var(--text-secondary) !important;
}

/* ---- Navbar / Header ---- */
body.dark .navbar,
body.dark nav.navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom-color: var(--navbar-border) !important;
}

body.dark .ai-custom-header {
  background: var(--bg-header) !important;
  border-bottom-color: var(--chat-border) !important;
}

body.dark .navbar .nav-link,
body.dark .navbar-brand,
body.dark .navbar a {
  color: var(--text-secondary) !important;
}

body.dark .navbar .nav-link:hover {
  color: var(--accent-hover) !important;
}

/* ---- Sidebar ---- */
body.dark .sidebar,
body.dark #sidebar {
  background: var(--bg-sidebar) !important;
  border-right-color: var(--border-base) !important;
}

body.dark .sidebar-item,
body.dark .sidebar-link,
body.dark .nav-item a {
  color: var(--sidebar-text) !important;
}

body.dark .sidebar-item:hover,
body.dark .sidebar-link:hover {
  background: var(--sidebar-item-hover) !important;
  color: var(--text-primary) !important;
}

body.dark .sidebar-item.active,
body.dark .sidebar-link.active {
  background: var(--sidebar-item-active) !important;
  color: var(--accent-primary) !important;
}

/* ---- Main Content ---- */
body.dark .main-content-wrapper,
body.dark #mainContentWrapper,
body.dark .app-shell,
body.dark .app-page,
body.dark main {
  background-color: var(--bg-base) !important;
}

/* ---- Cards & Surfaces ---- */
body.dark .card,
body.dark .modal-content,
body.dark .settings-modal,
body.dark .dropdown-menu,
body.dark .popover {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-base) !important;
  color: var(--text-secondary) !important;
}

/* ---- Typography ---- */
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6 {
  color: var(--text-primary) !important;
}

body.dark p,
body.dark span:not([class*="badge"]):not([class*="capsule"]) {
  color: var(--text-secondary);
}

body.dark label,
body.dark .form-label {
  color: var(--text-primary) !important;
}

body.dark small,
body.dark .text-muted,
body.dark .form-text {
  color: var(--text-muted) !important;
}

body.dark a {
  color: var(--text-link);
}

body.dark a:hover {
  color: var(--accent-hover);
}

/* ---- Form Controls ---- */
body.dark input,
body.dark textarea,
body.dark select,
body.dark .form-control,
body.dark .form-select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-base) !important;
  color: var(--text-primary) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: var(--text-disabled) !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus,
body.dark .form-control:focus,
body.dark .form-select:focus {
  background-color: var(--bg-input) !important;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
  color: var(--text-primary) !important;
}

body.dark input:disabled,
body.dark .form-control:disabled {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* ---- Dropdowns ---- */
body.dark .dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
}

body.dark .dropdown-item {
  color: var(--text-secondary) !important;
}

body.dark .dropdown-item:hover {
  background-color: #212121 !important;
  color: var(--text-primary) !important;
}

body.dark .dropdown-divider {
  border-color: var(--border-base) !important;
}

/* ---- Modals ---- */
body.dark .modal-header {
  background-color: var(--bg-surface) !important;
  border-bottom-color: var(--border-base) !important;
}

body.dark .modal-title {
  color: var(--text-primary) !important;
}

body.dark .modal-body {
  background-color: var(--bg-surface) !important;
}

body.dark .modal-footer {
  background-color: var(--bg-surface) !important;
  border-top-color: var(--border-base) !important;
}

body.dark .btn-close {
  filter: invert(1) grayscale(1);
}

/* ---- Buttons ---- */
body.dark .btn-primary {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}

body.dark .btn-primary:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

body.dark .btn-outline-danger {
  color: var(--text-danger) !important;
  border-color: var(--text-danger) !important;
  background: transparent !important;
}

body.dark .btn-outline-danger:hover {
  background-color: rgba(248,113,113,0.1) !important;
}

body.dark .btn-secondary,
body.dark .btn-outline-secondary {
  background-color: var(--bg-surface-3) !important;
  border-color: var(--border-base) !important;
  color: var(--text-secondary) !important;
}

/* Action modal buttons */
body.dark .action-modal .btn-secondary-action {
  background: transparent !important;
  border-color: var(--border-base) !important;
  color: var(--text-secondary) !important;
}

body.dark .action-modal .btn-secondary-action:hover {
  border-color: var(--border-focus) !important;
}

body.dark .action-modal .btn-primary-action {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

/* ---- Tables ---- */
body.dark .table {
  color: var(--text-secondary) !important;
  border-color: var(--border-base) !important;
}

body.dark .table th,
body.dark .table td {
  border-color: var(--border-subtle) !important;
}

body.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
}

body.dark .table-hover > tbody > tr:hover > * {
  background-color: var(--hover-bg) !important;
}

/* ---- Scrollbars ---- */
body.dark * {
  scrollbar-color: var(--scrollbar-thumb) transparent !important;
}

body.dark *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}

body.dark *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover) !important;
}

/* ---- Dividers / HR ---- */
body.dark hr {
  border-color: var(--border-base) !important;
  opacity: 1 !important;
}

/* ---- Alerts ---- */
body.dark .alert {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-base) !important;
  color: var(--text-secondary) !important;
}

/* ---- Badges ---- */
body.dark .badge {
  filter: brightness(0.85);
}

/* ---- Accordion ---- */
body.dark .accordion-item,
body.dark .accordion-body,
body.dark .accordion-header {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-base) !important;
  color: var(--text-secondary) !important;
}

body.dark .accordion-button {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

body.dark .accordion-button:not(.collapsed) {
  background-color: var(--hover-bg-blue) !important;
  color: var(--accent-primary) !important;
}

/* ---- Toasts ---- */
body.dark .toast-success { background-color: var(--toast-success-bg) !important; color: var(--toast-success-text) !important; border-color: var(--toast-success-border) !important; }
body.dark .toast-error   { background-color: var(--toast-error-bg) !important;   color: var(--toast-error-text) !important;   border-color: var(--toast-error-border) !important; }
body.dark .toast-warning { background-color: var(--toast-warning-bg) !important; color: var(--toast-warning-text) !important; border-color: var(--toast-warning-border) !important; }
body.dark .toast-info    { background-color: var(--toast-info-bg) !important;    color: var(--toast-info-text) !important;    border-color: var(--toast-info-border) !important; }

/* ---- Code Blocks ---- */
body.dark pre,
body.dark code,
body.dark .hljs {
  background-color: var(--hljs-bg) !important;
  color: var(--hljs-text) !important;
}

body.dark code:not(pre code) {
  background-color: var(--bg-code) !important;
  color: var(--text-danger) !important;
  padding: 2px 5px;
  border-radius: 4px;
}

/* ---- Settings Modal ---- */
body.dark .settings-modal {
  background: var(--bg-surface) !important;
}

body.dark .settings-modal .modal-header {
  background: var(--bg-surface) !important;
  border-bottom-color: var(--border-base) !important;
}

body.dark .settings-modal .modal-title {
  color: var(--text-primary) !important;
}

body.dark .settings-sidebar {
  background-color: var(--settings-sidebar-bg) !important;
  border-right-color: var(--border-base) !important;
}

body.dark .settings-tab-btn {
  color: var(--text-secondary) !important;
}

body.dark .settings-tab-btn:hover {
  color: var(--text-primary) !important;
}

body.dark .settings-tab-btn.active {
  color: var(--settings-tab-active) !important;
}

body.dark .settings-content {
  background: var(--settings-content-bg) !important;
}

body.dark .settings-row {
  border-bottom-color: var(--settings-row-border) !important;
}

body.dark .settings-row-label,
body.dark .notification-label,
body.dark .delete-section-title,
body.dark .usage-title,
body.dark .usage-item-name,
body.dark .persona-title,
body.dark .persona-field-label,
body.dark .profile-section-title,
body.dark .profile-field-label {
  color: var(--text-primary) !important;
}

body.dark .settings-row-value,
body.dark .delete-section-description,
body.dark .usage-date,
body.dark .usage-values,
body.dark .persona-description,
body.dark .persona-helper-text {
  color: var(--text-muted) !important;
}

/* ---- Profile Fields ---- */
body.dark .profile-field-value-wrapper {
  background: var(--bg-input) !important;
  border-color: var(--border-base) !important;
}

body.dark .profile-field-value-wrapper:has(input:focus) {
  background: var(--bg-surface) !important;
  border-color: var(--accent-primary) !important;
}

body.dark .profile-field-value,
body.dark .profile-field-input {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

body.dark .profile-danger-title {
  color: var(--text-primary) !important;
}

body.dark .profile-danger-text,
body.dark .profile-helper-text {
  color: var(--text-muted) !important;
}

/* ---- Toggle Switches ---- */
body.dark .form-check-input {
  background-color: var(--toggle-off) !important;
}

body.dark .form-check-input:checked {
  background-color: var(--toggle-on) !important;
}

/* ---- Usage Bars ---- */
body.dark .usage-progress {
  background-color: var(--usage-bar-bg) !important;
  border-color: transparent !important;
}

body.dark .usage-progress-bar {
  background-color: var(--usage-bar-fill) !important;
}

/* ---- Chat Interface ---- */
body.dark .chat-container,
body.dark .messages-container {
  background-color: var(--bg-base) !important;
}

body.dark .message.user .message-content,
body.dark .user-message {
  background-color: var(--chat-user-bg) !important;
  color: var(--text-primary) !important;
}

body.dark .message.assistant .message-content,
body.dark .ai-message {
  background-color: var(--chat-ai-bg) !important;
  color: var(--text-primary) !important;
}

body.dark .chat-input-wrapper,
body.dark .input-box,
body.dark .message-input-area {
  background-color: var(--chat-input-bg) !important;
  border-color: var(--border-base) !important;
}

/* ============================================================
   MODEL DROPDOWN
   ============================================================ */

/* Selector button */
body.dark .model-selector {
  border-color: transparent !important;
}

body.dark .model-selector:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  background-color: transparent !important;
}

body.dark .current-model {
  color: #d1d5db !important;
}

body.dark .model-selector i {
  color: #9ca3af !important;
}

/* Main dropdown + menu wrapper */
body.dark .model-dropdown,
body.dark .mmx-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 8px 25px rgba(0,0,0,0.3) !important;
}

/* Scrollable body */
body.dark .mmx-body {
  background: #212121 !important;
  border-color: #374151 !important;
}

/* Auto card option */
body.dark .mmx-auto-card .mmx-option {
  border-bottom-color: #374151 !important;
}

body.dark .mmx-auto-card .mmx-option:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  background: transparent !important;
}

/* Provider rows */
body.dark .mmx-provider {
  border-color: transparent !important;
}

body.dark .mmx-provider:hover {
  border-color: rgba(96, 165, 250, 0.1) !important;
  background: transparent !important;
}

body.dark .mmx-group.is-open .mmx-provider,
body.dark .mmx-group.is-hovering .mmx-provider,
body.dark .mmx-group.is-pinned .mmx-provider {
  border-color: rgba(96, 165, 250, 0.5) !important;
}

body.dark .mmx-provider-text {
  color: #d1d5db !important;
}

body.dark .mmx-chev,
body.dark .mmx-chev i {
  color: #9ca3af !important;
}

/* Tier labels */
body.dark .mmx-tier-label {
  color: #6b7280 !important;
  border-bottom-color: #374151 !important;
}

/* Model options */
body.dark .mmx-option,
body.dark .model-option {
  border-color: transparent !important;
}

body.dark .mmx-option:hover:not(.is-locked):not(.disabled),
body.dark .model-option:hover:not(.disabled):not(.is-locked) {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .mmx-option.active,
body.dark .model-option.active {
  background: transparent !important;
}

/* Model name + description */
body.dark .mmx-name {
  color: #f9fafb !important;
}

body.dark .mmx-desc {
  color: #9ca3af !important;
}

/* Tier badge chips */
body.dark .mmx-chip.tier-core {
  background: rgba(24, 128, 71, 0.15) !important;
  color: #34d399 !important;
}

body.dark .mmx-chip.tier-elite {
  background: rgba(122, 63, 241, 0.15) !important;
  color: #a78bfa !important;
}

body.dark .mmx-chip.tier-eliteplus {
  background: rgba(154, 107, 0, 0.15) !important;
  color: #fbbf24 !important;
}

body.dark .mmx-chip-smart {
  background: rgba(59, 109, 246, 0.15) !important;
  color: #93c5fd !important;
}

/* Flyout panel */
body.dark .mmx-flyout {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

body.dark .mmx-flyout-item {
  border-color: transparent !important;
}

body.dark .mmx-flyout-item:hover {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Locked / incompatible models */
body.dark .mmx-option.is-file-incompatible {
  background: #212121 !important;
}

body.dark .mmx-option.is-failed-model .mmx-desc {
  color: #f87171 !important;
}

/* Guest section */
body.dark .mmx-guest-section {
  border-top-color: rgba(255,255,255,0.08) !important;
}

body.dark .mmx-guest-title {
  color: #f9fafb !important;
}

body.dark .mmx-guest-desc {
  color: #9ca3af !important;
}

body.dark .mmx-guest-login-btn {
  background: #3b82f6 !important;
  color: #fff !important;
  border-color: #3b82f6 !important;
}

body.dark .mmx-guest-login-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* ---- Header Chat Title ---- */
body.dark .header-chat-title-wrapper {
  border-color: transparent !important;
}

body.dark .header-chat-title-wrapper:hover {
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .chat-title {
  color: var(--text-primary) !important;
}

/* ---- Footer ---- */
body.dark .footer {
  background-color: #0a1628 !important;
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* Search bar container */
body.dark .search-bar {
  background: #212121 !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .search-bar textarea.form-control {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
body.dark .furo-input-shell textarea {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark .furo-input-shell textarea:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Textarea */
body.dark .search-bar textarea.form-control {
  background: transparent !important;
  color: #f9fafb !important;
}

body.dark .search-bar textarea.form-control::placeholder {
  color: rgba(249, 250, 251, 0.4) !important;
}

/* Icon buttons (attach, mic) */
body.dark .search-bar .icon-btn {
  background: #212121 !important;
}

body.dark .search-bar .icon-btn .home-icon {
  color: #d1d5db !important;
}

body.dark .search-bar .icon-btn:hover::before {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Send button */
body.dark .search-bar .icon-btn1 {
  background: #3b82f6 !important;
}

body.dark .search-bar .icon-btn1 .home-icon {
  color: #ffffff !important;
}

body.dark .search-bar .icon-btn1:hover {
  background: #2563eb !important;
}

body.dark .search-bar .icon-btn1:active {
  background: #1d4ed8 !important;
}

/* Logo — override hardcoded SVG fill on wordmark paths */
body.dark .logo-icon1 svg path[fill="#0B2F4E"] {
  fill: #f9fafb !important;
}

/* File chip */
body.dark .image-chip {
  background: #212121 !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .file-placeholder {
  background: transparent !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .file-placeholder span {
  color: #d1d5db !important;
}

body.dark .chip-remove {
  background: #4b5563 !important;
  color: #f9fafb !important;
}

body.dark .chip-remove:hover {
  background: #6b7280 !important;
}

/* Disclaimer footer */
body.dark .ai-disclaimer-footer {
  color: #6b7280 !important;
}

body.dark .ai-disclaimer-footer a {
  color: #9ca3af !important;
}

body.dark .ai-disclaimer-footer a:hover {
  color: #d1d5db !important;
}

/* Alert messages on home */
body.dark .message-container .alert {
  background-color: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

/* Image modal overlay */
body.dark .home-image-modal {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Guest toast */
body.dark .guest-toast {
  background: #212121 !important;
  border: 1px solid #374151;
  color: #f9fafb !important;
}

body.dark .guest-toast a {
  color: #93c5fd !important;
}

/* Voice listening state */
body.dark .icon-btn.listening {
  --icon-color: #60a5fa;
}

body.dark .icon-btn.listening::before {
  background: #212121;
  box-shadow: inset 0 0 0 1px #60a5fa;
}

/* ============================================================
   AI ASSISTANT CHAT PAGE (ai_assistant_detail)
   ============================================================ */

/* Chat container + messages */
body.dark .chat-container {
  background: #212121 !important;
}

body.dark .messages-container {
  background: #212121 !important;
}

/* Bot bubble */
body.dark .message.bot .bubble-furobox {
  background: #212121 !important;
  color: #f9fafb !important;
}

/* User bubble */
body.dark .message.user .bubble,
body.dark .message.user .bubble-furobox,
body.dark .user-bubble {
  background: #1e2d45 !important;
  color: #f9fafb !important;
}

body.dark .user-message-text {
  color: #f9fafb !important;
}

/* Model indicator badge */
body.dark .model-indicator {
  color: #9ca3af !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Copy / Edit icon images — invert to white in dark mode */
body.dark .message-action-inline img,
body.dark .user-action-btn img,
body.dark .code-copy-btn img,
body.dark .email-copy-btn img {
  filter: invert(1) brightness(2) !important;
}
  color: #9ca3af !important;
  border-color: transparent !important;
}

body.dark .message-action-inline:hover {
  color: #f9fafb !important;
  border-color: rgba(96,165,250,0.4) !important;
}

/* Model selector pill (Auto button in input bar) */
body.dark .model-selector {
  background: transparent !important;
  border-color: transparent !important;
  color: #d1d5db !important;
}

body.dark .model-selector .current-model {
  color: #d1d5db !important;
}

body.dark .model-selector i {
  color: #9ca3af !important;
}

body.dark .model-selector:hover {
  border-color: rgba(96,165,250,0.4) !important;
}

/* Sidebar Recent — chat name active/highlighted box */
body.dark .chat-item.active {
  background: transparent !important;
  border-color: rgba(96,165,250,0.4) !important;
  color: #93c5fd !important;
}

body.dark .chat-item.active .chat-title {
  color: #93c5fd !important;
}

/* Pending chat item in sidebar */
body.dark .ai-chat-item.pending a.pending-link {
  background: #212121 !important;
  color: #6b7280 !important;
}
body.dark .bubble .md {
  color: #f9fafb !important;
}

body.dark .bubble .md p,
body.dark .bubble .md li,
body.dark .bubble .md td,
body.dark .bubble .md th {
  color: #e5e7eb !important;
}

body.dark .bubble .md h1,
body.dark .bubble .md h2,
body.dark .bubble .md h3,
body.dark .bubble .md h4,
body.dark .bubble .md h5,
body.dark .bubble .md h6 {
  color: #f9fafb !important;
  border-bottom-color: #374151 !important;
}

body.dark .bubble .md a {
  color: #60a5fa !important;
}

body.dark .bubble .md blockquote {
  border-left-color: #3b82f6 !important;
  background: rgba(59,130,246,0.1) !important;
  color: #9ca3af !important;
}

body.dark .bubble .md code {
  background: #374151 !important;
  color: #fbbf24 !important;
}

body.dark .bubble .md pre {
  background: #1e2a3b !important;
  border-color: #374151 !important;
}

body.dark .bubble .md pre code {
  background: transparent !important;
  color: #e2e8f0 !important;
}

body.dark .bubble .md table {
  border-color: #374151 !important;
}

body.dark .bubble .md th {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .bubble .md td {
  border-color: #374151 !important;
}

/* Code block container */
body.dark .code-block-container {
  background: #1e2a3b !important;
  border-color: #374151 !important;
}

body.dark .code-copy-btn {
  background: rgba(31,41,55,0.9) !important;
  color: #d1d5db !important;
}

body.dark .code-copy-btn:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

/* KaTeX math blocks */
body.dark .bubble .md .katex-display {
  background: #212121 !important;
  border-color: #374151 !important;
}

/* Model indicator */
body.dark .model-indicator {
  color: #9ca3af !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Inline copy button */
body.dark .message-action-inline {
  color: #9ca3af !important;
}

body.dark .message-action-inline:hover {
  color: #f9fafb !important;
  border-color: rgba(96,165,250,0.4) !important;
}

/* User action buttons (copy/edit) */
body.dark .user-action-btn {
  background: #212121 !important;
  color: #9ca3af !important;
  border-color: transparent !important;
}

body.dark .user-action-btn:hover {
  color: #f9fafb !important;
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .user-action-btn img {
  filter: invert(1) brightness(1.5);
}

/* Edit mode */
body.dark .user-bubble.editing {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .edit-textarea {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .edit-textarea:focus {
  border-color: rgba(96,165,250,0.5) !important;
}

body.dark .edit-btn-save {
  background: #3b82f6 !important;
  color: #fff !important;
}

body.dark .edit-btn-cancel {
  color: #d1d5db !important;
  border-color: #374151 !important;
}

body.dark .edit-btn-cancel:hover {
  border-color: rgba(96,165,250,0.4) !important;
}

/* Typing indicator */
body.dark .typing-indicator .bubble {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .typing-dots span {
  background: #6b7280 !important;
}

body.dark .typing-indicator .typing-text {
  color: #9ca3af !important;
}

/* Input container + shell */
body.dark .input-container {
  background: transparent !important;
}

body.dark .furo-input-shell {
  background: #212121 !important;
  border-color: rgba(96,165,250,0.35) !important;
}

body.dark .furo-input-shell textarea,
body.dark #messageInput {
  background: transparent !important;
  color: #f9fafb !important;
}

body.dark .furo-input-shell textarea::placeholder,
body.dark #messageInput::placeholder {
  color: rgba(249,250,251,0.4) !important;
}

/* Bottom scrim */
body.dark .bottom-scrim {
  background: #212121 !important;
}

/* AI disclaimer */
body.dark .ai-disclaimer {
  color: #6b7280 !important;
}

/* Upload dropdown */
body.dark .upload-dropdown {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .upload-dropdown .upload-option {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .upload-dropdown .upload-option:hover {
  background: #374151 !important;
}

body.dark .upload-option-title {
  color: #f9fafb !important;
}

body.dark .upload-option-desc {
  color: #9ca3af !important;
}

/* Input icon buttons (attach, voice) */
body.dark .furo-icon-btn,
body.dark #uploadButton,
body.dark #voiceButton {
  background: #212121 !important;
  color: #d1d5db !important;
}

body.dark .furo-icon-btn .home-icon,
body.dark #uploadButton .home-icon,
body.dark #voiceButton .home-icon {
  color: #d1d5db !important;
}

/* Send button */
body.dark .furo-icon-btn-primary,
body.dark #sendButton {
  background: #3b82f6 !important;
}

body.dark .furo-icon-btn-primary .home-icon,
body.dark #sendButton .home-icon {
  color: #fff !important;
}

/* Scroll to bottom button */
body.dark .scroll-to-bottom {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

body.dark .scroll-to-bottom:hover {
  background: #374151 !important;
}

body.dark .scroll-to-bottom i {
  color: #d1d5db !important;
}

/* Image modal */
body.dark .image-modal {
  background-color: rgba(0,0,0,0.95) !important;
}

/* Tool cards (quota/limit replies) */
body.dark .tool-card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .tool-card .tc-title {
  color: #f9fafb !important;
}

body.dark .tool-card .tc-desc {
  color: #9ca3af !important;
}

body.dark .tool-card .tc-btn {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark .tool-card .tc-btn:hover {
  background: #4b5563 !important;
}

/* File attachments in messages */
body.dark .file-attachment {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .file-attachment:hover {
  background: #374151 !important;
  border-color: #4b5563 !important;
}

body.dark .file-name {
  color: #f9fafb !important;
}

body.dark .file-meta {
  color: #9ca3af !important;
}

body.dark .file-download-icon {
  color: #9ca3af !important;
}

/* Image chips in input area */
body.dark .image-chip {
  background: transparent !important;
}

body.dark .chip-remove,
body.dark .remove-image {
  background: #4b5563 !important;
  color: #f9fafb !important;
}

body.dark .chip-remove:hover,
body.dark .remove-image:hover {
  background: #6b7280 !important;
}

/* Email container */
body.dark .email-container {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .email-subject {
  color: #93c5fd !important;
  border-bottom-color: #374151 !important;
}

body.dark .email-body {
  color: #e5e7eb !important;
}

body.dark .email-body strong {
  color: #f9fafb !important;
}

body.dark .email-copy-btn,
body.dark .email-menu-btn {
  background: #374151 !important;
  color: #d1d5db !important;
}

body.dark .email-copy-btn:hover,
body.dark .email-menu-btn:hover {
  background: #4b5563 !important;
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .email-dropdown {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

body.dark .email-dropdown-item {
  color: #d1d5db !important;
  border-color: transparent !important;
}

body.dark .email-dropdown-item:hover {
  border-color: rgba(96,165,250,0.4) !important;
}

/* Error + connection error messages */
body.dark .error-message {
  background: rgba(248,113,113,0.1) !important;
  border-color: rgba(248,113,113,0.3) !important;
  color: #f87171 !important;
}

body.dark .bubble-error {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .error-text strong {
  color: #f9fafb !important;
}

body.dark .error-text p {
  color: #9ca3af !important;
}

body.dark .retry-message-btn {
  background: #ef4444 !important;
  color: #fff !important;
}

body.dark .retry-message-btn:hover {
  background: #b91c1c !important;
}

/* Voic listening */
body.dark #voiceButton.listening {
  background: rgba(96,165,250,0.1) !important;
}

/* Business header */
body.dark .business-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d1f40 100%) !important;
}

/* Chat nav */
body.dark .chat-nav {
  background: rgba(17,24,39,0.92) !important;
  border-bottom-color: #374151 !important;
}

body.dark .chat-nav-title {
  color: #f9fafb !important;
}

body.dark .nav-btn {
  background: #212121 !important;
  color: #9ca3af !important;
  border-color: #374151 !important;
}

body.dark .nav-btn:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

/* Container */
body.dark .projectdetail-container {
  background: transparent !important;
}

/* Header */
body.dark .projectdetail-header h1 {
  color: #f9fafb !important;
}

body.dark .projectdetail-btn {
  background: #3b82f6 !important;
  color: #fff !important;
}

body.dark .projectdetail-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* Input bar (new chat textarea) */
body.dark .furo-input-bar .furo-input-shell,
body.dark .furo-input-shell,
body.dark .furo-input-bar {
  background: #212121 !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .furo-input-bar textarea,
body.dark .furo-input-shell textarea {
  background: transparent !important;
  color: #f9fafb !important;
}

body.dark .furo-input-bar textarea::placeholder,
body.dark .furo-input-shell textarea::placeholder {
  color: rgba(249, 250, 251, 0.4) !important;
}

/* Input bar icon buttons */
body.dark .furo-icon-btn {
  background: #212121 !important;
  color: #d1d5db !important;
}

body.dark .furo-icon-btn .home-icon {
  color: #d1d5db !important;
}

body.dark .furo-icon-btn:hover {
  background: #374151 !important;
}

/* Send button */
body.dark .furo-icon-btn-primary {
  background: #3b82f6 !important;
  color: #fff !important;
}

body.dark .furo-icon-btn-primary .home-icon {
  color: #fff !important;
}

body.dark .furo-icon-btn-primary:hover {
  background: #2563eb !important;
}

/* Files section */
body.dark .files-section {
  background: #212121 !important;
}

body.dark .files-header h3,
body.dark #fileCountLabel {
  color: #f9fafb !important;
}

/* File cards */
body.dark .file-card {
  background: transparent !important;
  border-color: #374151 !important;
}

body.dark .file-card:hover {
  background: #374151 !important;
  border-color: #60a5fa !important;
}

body.dark .file-name {
  color: #d1d5db !important;
}

body.dark .file-remove {
  color: #9ca3af !important;
}

body.dark .file-remove:hover {
  background: rgba(248,113,113,0.15) !important;
  color: #f87171 !important;
}

/* Chat items in project */
body.dark .projectdetail-chat-item {
  background: transparent !important;
  border-color: transparent !important;
}

body.dark .projectdetail-chat-item:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  background: transparent !important;
}

body.dark .projectdetail-chat-title {
  color: #f9fafb !important;
}

body.dark .projectdetail-chat-preview {
  color: #9ca3af !important;
}

body.dark .projectdetail-chat-date {
  color: #6b7280 !important;
}

/* Three-dot menu button */
body.dark .projectdetail-menu-wrapper .chat-menu-btn {
  color: #9ca3af !important;
  background: transparent !important;
}

body.dark .projectdetail-menu-wrapper .chat-menu-btn:hover {
  background: #374151 !important;
  color: #d1d5db !important;
}

/* Chat dropdown */
body.dark .projectdetail-menu-wrapper .dropdown-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

body.dark .projectdetail-menu-wrapper .dropdown-item {
  color: #d1d5db !important;
}

body.dark .projectdetail-menu-wrapper .dropdown-item:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

body.dark .projectdetail-menu-wrapper .dropdown-item.text-danger {
  color: #f87171 !important;
}

body.dark .projectdetail-menu-wrapper .dropdown-item.text-danger:hover {
  background: rgba(248,113,113,0.1) !important;
}

body.dark .projectdetail-menu-wrapper .dropdown-divider {
  border-color: #374151 !important;
}

/* Deleting state */
body.dark .projectdetail-chat-item.deleting {
  background: rgba(248,113,113,0.08) !important;
}

body.dark .projectdetail-chat-item.deleting:hover {
  background: rgba(248,113,113,0.08) !important;
}

/* Empty state */
body.dark .projectdetail-empty {
  background: transparent !important;
}

body.dark .projectdetail-empty h2 {
  color: #f9fafb !important;
}

body.dark .projectdetail-empty p {
  color: #9ca3af !important;
}

/* Pagination (inline styles on this page — override via parent) */
body.dark .projectdetail-container .page-link,
body.dark .projectdetail-container a[style*="background: var(--bg-primary)"] {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .projectdetail-container a[style*="background: var(--accent)"],
body.dark .projectdetail-container span[style*="background: var(--accent)"] {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}

/* Image modal */
body.dark .home-image-modal {
  background: rgba(0,0,0,0.95) !important;
}

/* Attach zone chips */
body.dark .furo-file-chip {
  background: transparent !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .furo-file-placeholder span {
  color: #d1d5db !important;
}

body.dark .furo-chip-remove {
  color: #9ca3af !important;
}

body.dark .furo-chip-remove:hover {
  background: rgba(248,113,113,0.15) !important;
  color: #f87171 !important;
}

/* Pin highlight animation override */
body.dark .projectdetail-chat-item[style*="background: rgb(219, 234, 254)"],
body.dark .projectdetail-chat-item[style*="background: #dbeafe"] {
  background: rgba(96, 165, 250, 0.12) !important;
}

/* Container */
body.dark .allprojects-container {
  background: transparent !important;
}

/* Header */
body.dark .allprojects-header h1 {
  color: #f9fafb !important;
}

body.dark .allprojects-new-btn {
  background: #3b82f6 !important;
  color: #fff !important;
}

body.dark .allprojects-new-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* Search */
body.dark .allprojects-search-input {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .allprojects-search-input::placeholder {
  color: #6b7280 !important;
}

body.dark .allprojects-search-input:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2) !important;
  color: #f9fafb !important;
}

body.dark .allprojects-search-icon {
  color: #6b7280 !important;
}

/* Project items */
body.dark .allprojects-item {
  background: transparent !important;
  border-color: transparent !important;
}

body.dark .allprojects-item:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  background: transparent !important;
}

body.dark .allprojects-title {
  color: #f9fafb !important;
}

body.dark .allprojects-description {
  color: #9ca3af !important;
}

body.dark .allprojects-meta {
  color: #6b7280 !important;
}

/* Pin badge in title */
body.dark .project-pin-badge {
  color: #9ca3af !important;
}

/* Three-dot menu button */
body.dark .allprojects-menu-wrapper .chat-menu-btn {
  color: #9ca3af !important;
  background: transparent !important;
}

body.dark .allprojects-menu-wrapper .chat-menu-btn:hover {
  background: #374151 !important;
  color: #d1d5db !important;
}

/* Dropdown menu */
body.dark .allprojects-menu-wrapper .dropdown-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

body.dark .allprojects-menu-wrapper .dropdown-item {
  color: #d1d5db !important;
}

body.dark .allprojects-menu-wrapper .dropdown-item:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

body.dark .allprojects-menu-wrapper .dropdown-item.text-danger {
  color: #f87171 !important;
}

body.dark .allprojects-menu-wrapper .dropdown-item.text-danger:hover {
  background: rgba(248,113,113,0.1) !important;
}

body.dark .allprojects-menu-wrapper .dropdown-divider {
  border-color: #374151 !important;
}

/* Deleting state */
body.dark .allprojects-item.deleting {
  background: rgba(248,113,113,0.08) !important;
}

body.dark .allprojects-item.deleting:hover {
  background: rgba(248,113,113,0.08) !important;
}

/* Pin highlight animation */
body.dark .allprojects-item[style*="background: rgb(219, 234, 254)"] {
  background: rgba(96, 165, 250, 0.15) !important;
}

/* Empty state */
body.dark .allprojects-empty {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .allprojects-empty h2 {
  color: #f9fafb !important;
}

body.dark .allprojects-empty p {
  color: #9ca3af !important;
}

/* Container background */
body.dark .all-tools-container {
  background: transparent !important;
}

/* Header */
body.dark .all-tools-header h1 {
  color: #f9fafb !important;
}

/* Search input */
body.dark .all-tools-search input {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .all-tools-search input::placeholder {
  color: #6b7280 !important;
}

body.dark .all-tools-search input:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2) !important;
  color: #f9fafb !important;
}

body.dark .all-tools-search .search-icon {
  color: #6b7280 !important;
}

/* Category tabs */
body.dark .tools-tab {
  color: #9ca3af !important;
  border-color: transparent !important;
}

body.dark .tools-tab:hover {
  color: #f9fafb !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .tools-tab.active {
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Tool card wrapper — remove white background */
body.dark .tool-card {
  background: transparent !important;
  border-color: transparent !important;
}

/* Tool card titles */
body.dark .tool-card-title {
  color: #d1d5db !important;
}

body.dark .tool-card:hover .tool-card-title {
  color: #f9fafb !important;
}

/* Tool card image border on hover */
body.dark .tool-card:hover .tool-card-image {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Card background colors — darken each tint slightly for dark mode */
body.dark .tool-card.meeting-agent .tool-card-image  { background: #2d1f40 !important; }
body.dark .tool-card.meeting-import .tool-card-image  { background: #1a3040 !important; }
body.dark .tool-card.meeting-live .tool-card-image    { background: #1a2e3d !important; }
body.dark .tool-card.smart-business .tool-card-image  { background: #3d1f2d !important; }
body.dark .tool-card.smart-writing .tool-card-image   { background: #1a2d38 !important; }
body.dark .tool-card.career-tools .tool-card-image    { background: #1a3028 !important; }
body.dark .tool-card.productivity .tool-card-image    { background: #3a2a10 !important; }

/* Dot pattern inside cards — lighten slightly */
body.dark .tool-card-icon-wrapper::before {
  background-image: radial-gradient(circle, rgba(200, 210, 230, 0.12) 1px, transparent 1px) !important;
}

/* Category label shown during search */
body.dark .category-label {
  color: #6b7280 !important;
}

/* No results */
body.dark .no-results {
  color: #6b7280 !important;
}

body.dark .no-results i {
  color: #6b7280 !important;
}

body.dark .no-results p {
  color: #6b7280 !important;
}

/* ============================================================
   ALL CHATS PAGE (ai_assistant_home)
   ============================================================ */

/* Page background */
body.dark .chat-list-container {
  background: var(--bg-base) !important;
}

/* Header */
body.dark .chat-header h1 {
  color: #f9fafb !important;
}

body.dark .new-chat-btn {
  background: #3b82f6 !important;
  color: #fff !important;
}

body.dark .new-chat-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* Search */
body.dark .search-input {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .search-input::placeholder {
  color: #6b7280 !important;
}

body.dark .search-input:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2) !important;
  color: #f9fafb !important;
}

body.dark .search-icon {
  color: #6b7280 !important;
}

/* Controls row */
body.dark .search-tip {
  color: #6b7280 !important;
}

body.dark .sort-label {
  color: #6b7280 !important;
}

body.dark .sort-select {
  color: #9ca3af !important;
  background-color: transparent !important;
  border-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

body.dark .sort-select:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .sort-select option {
  background: #212121 !important;
  color: #f9fafb !important;
}

/* Chat items */
body.dark .all-chat-item {
  background: transparent !important;
  border-color: transparent !important;
}

body.dark .all-chat-item:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  background: transparent !important;
}

body.dark .title {
  color: #f9fafb !important;
}

body.dark .chat-preview {
  color: #9ca3af !important;
}

body.dark .chat-date {
  color: #6b7280 !important;
}

/* Three-dot menu button */
body.dark .chat-list-container .chat-menu-btn {
  color: #9ca3af !important;
  background: transparent !important;
}

body.dark .chat-list-container .chat-menu-btn:hover {
  background: #374151 !important;
  color: #d1d5db !important;
}

/* Dropdown menu on chat items */
body.dark .allchats-menu-wrapper .dropdown-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

body.dark .allchats-menu-wrapper .dropdown-item {
  color: #d1d5db !important;
}

body.dark .allchats-menu-wrapper .dropdown-item:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

body.dark .allchats-menu-wrapper .dropdown-item.text-danger {
  color: #f87171 !important;
}

body.dark .allchats-menu-wrapper .dropdown-item.text-danger:hover {
  background: rgba(248,113,113,0.1) !important;
}

body.dark .allchats-menu-wrapper .dropdown-divider {
  border-color: #374151 !important;
}

/* Deleting state */
body.dark .all-chat-item.deleting {
  background: rgba(248,113,113,0.08) !important;
}

body.dark .all-chat-item.deleting:hover {
  background: rgba(248,113,113,0.08) !important;
}

/* Empty state */
body.dark .empty-state {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .empty-state h2 {
  color: #f9fafb !important;
}

body.dark .empty-state p {
  color: #9ca3af !important;
}

/* Pagination */
body.dark .page-link {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .page-link:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

body.dark .page-link.current {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
}

/* Search highlight */
body.dark .search-highlight {
  background-color: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
}

/* No results message */
body.dark .no-results-message {
  color: #6b7280 !important;
}

body.dark .no-results-message p {
  color: #6b7280 !important;
}

/* Hint icon */
body.dark .hint-icon {
  filter: invert(1) brightness(1.5);
}

/* Modal shell */
body.dark .settings-modal {
  background: #212121 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}

body.dark .settings-modal .modal-content {
  background: #212121 !important;
  border-color: #374151 !important;
}

/* Header */
body.dark .settings-modal > .d-flex,
body.dark .settings-modal .modal-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark .settings-modal .modal-title,
body.dark #settingsModalLabel {
  color: #f9fafb !important;
}

body.dark .settings-modal .btn-close {
  filter: invert(1) grayscale(1);
}

/* Left sidebar tabs */
body.dark .settings-sidebar {
  background: #212121 !important;
}

body.dark .settings-tab-btn {
  color: #d1d5db !important;
  border-color: transparent !important;
}

body.dark .settings-tab-btn:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .settings-tab-btn.active {
  color: #60a5fa !important;
}

/* Content area */
body.dark .settings-content {
  background: #212121 !important;
}

body.dark .settings-modal .modal-body {
  background: #212121 !important;
}

/* --- General Tab --- */
body.dark .settings-row-label {
  color: #f9fafb !important;
}

body.dark .settings-row-value {
  color: #9ca3af !important;
}

/* Theme/Language selects */
body.dark .settings-modal .form-select,
body.dark .settings-modal .form-select1 {
  background-color: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  /* Keep the chevron arrow visible on dark */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body.dark .settings-modal .form-select:focus,
body.dark .settings-modal .form-select1:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* Notifications section */
body.dark .notifications-section .settings-row-label,
body.dark .notification-label {
  color: #f9fafb !important;
}

body.dark .form-check-input {
  background-color: #4b5563 !important;
}

body.dark .form-check-input:checked {
  background-color: #1b91f8 !important;
}

/* Delete section */
body.dark .delete-section-title {
  color: #f9fafb !important;
}

body.dark .delete-section-description {
  color: #9ca3af !important;
}

body.dark .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background: transparent !important;
}

body.dark .btn-outline-danger:hover {
  background: rgba(248,113,113,0.1) !important;
  color: #f87171 !important;
}

/* --- Usage Tab --- */
body.dark .usage-title {
  color: #f9fafb !important;
}

body.dark .usage-date {
  color: #9ca3af !important;
}

body.dark .usage-item-name {
  color: #d1d5db !important;
}

body.dark .usage-percentage {
  color: #f9fafb !important;
}

body.dark .usage-values {
  color: #6b7280 !important;
}

body.dark .usage-progress {
  background-color: #374151 !important;
  border-color: transparent !important;
}

body.dark .usage-progress-bar {
  background-color: #60a5fa !important;
}

body.dark .usage-divider {
  border-top-color: #374151 !important;
}

/* --- Persona Tab --- */
body.dark .persona-title {
  color: #f9fafb !important;
}

body.dark .persona-description {
  color: #9ca3af !important;
}

body.dark .persona-field-label {
  color: #f9fafb !important;
}

body.dark .persona-helper-text,
body.dark .persona-helper-text-1 {
  color: #6b7280 !important;
}

body.dark .persona-textarea,
body.dark .settings-modal .form-control,
body.dark .settings-modal .form-control1 {
  background-color: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .persona-textarea::placeholder,
body.dark .settings-modal .form-control::placeholder {
  color: rgba(249,250,251,0.3) !important;
}

body.dark .persona-textarea:focus,
body.dark .settings-modal .form-control:focus,
body.dark .settings-modal .form-control1:focus {
  border-color: rgba(96,165,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
  color: #f9fafb !important;
}

/* Persona save button */
body.dark .persona-save-btn {
  background: #3b82f6 !important;
  color: #fff !important;
}

/* Saved persona items */
body.dark .persona-item {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .persona-item-name {
  color: #f9fafb !important;
}

body.dark .persona-item-description {
  color: #9ca3af !important;
}

/* Choices.js (persona multi-select) */
body.dark .persona-choices .choices__inner {
  background-color: #212121 !important;
  border-color: #374151 !important;
}

body.dark .persona-choices.is-focused .choices__inner {
  border-color: rgba(96,165,250,0.5) !important;
}

body.dark .persona-choices .choices__input {
  background-color: transparent !important;
  color: #f9fafb !important;
}

body.dark .persona-choices .choices__input::placeholder {
  color: rgba(249,250,251,0.3) !important;
}

body.dark .persona-choices .choices__list--multiple .choices__item {
  color: #60a5fa !important;
}

body.dark .persona-choices .choices__list--dropdown {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}

body.dark .persona-choices .choices__list--dropdown .choices__item {
  color: #d1d5db !important;
}

body.dark .persona-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #374151 !important;
  border-color: rgba(96,165,250,0.4) !important;
}

/* Choices dropdown arrow on dark */
body.dark .persona-choices .choices__inner::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* --- Subscription Tab --- */
body.dark .subscription-page-title {
  color: #f9fafb !important;
}

body.dark .subscription-card,
body.dark .auto-renew-card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .subscription-plan-name,
body.dark .auto-renew-title {
  color: #f9fafb !important;
}

body.dark .plan-period,
body.dark .date-text,
body.dark .renew-text,
body.dark .renew-date {
  color: #9ca3af !important;
}

body.dark .renew-date strong {
  color: #f9fafb !important;
}

body.dark .badge-enabled,
body.dark .badge-disabled {
  background: #212121 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark .btn-receipt {
  background: #212121 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark .btn-receipt:hover {
  background: #374151 !important;
}

body.dark .btn-auto-renew-disable,
body.dark .btn-auto-renew-enable,
body.dark .btn-upgrade {
  background-color: #3b82f6 !important;
  color: #fff !important;
}

body.dark .btn-auto-renew-disable:hover,
body.dark .btn-auto-renew-enable:hover,
body.dark .btn-upgrade:hover {
  background-color: #2563eb !important;
}

body.dark .auto-renew-status {
  color: #9ca3af !important;
}

body.dark .verification-banner {
  background-color: rgba(96,165,250,0.1) !important;
  border-color: rgba(96,165,250,0.2) !important;
  color: #93c5fd !important;
}

/* --- Profile Tab --- */
body.dark .profile-section-title {
  color: #f9fafb !important;
}

body.dark .profile-field-label {
  color: #9ca3af !important;
}

body.dark .profile-security-values {
  color: #6b7280 !important;
}

body.dark .profile-field-value-wrapper {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .profile-field-value-wrapper:has(input:focus) {
  border-color: rgba(96,165,250,0.5) !important;
  background: #212121 !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
}

body.dark .profile-field-value {
  color: #f9fafb !important;
}

body.dark .profile-field-input {
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
  background: transparent !important;
}

body.dark .profile-field-input::placeholder {
  color: rgba(249,250,251,0.3) !important;
}

body.dark .profile-field-input:disabled {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

body.dark .profile-helper-text {
  color: #6b7280 !important;
}

/* Edit icon — invert so it's visible */
body.dark .profile-edit-btn img.edit-icon {
  filter: invert(1) brightness(2);
}

/* Danger section */
body.dark .profile-danger-title {
  color: #f9fafb !important;
}

body.dark .profile-danger-text {
  color: #9ca3af !important;
}

/* Change password button */
body.dark .profile-change-password-btn {
  background: #3b82f6 !important;
  color: #fff !important;
}

/* Password toggle icon */
body.dark .toggle-password-icon {
  color: #9ca3af !important;
}

body.dark .toggle-password-icon:hover {
  color: #f9fafb !important;
}

/* --- Furobox custom selects inside settings --- */
body.dark .settings-content .furobox-select button {
  background: #212121 !important;
  color: #f9fafb !important;
}

body.dark .settings-content .furobox-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}

body.dark .settings-content .furobox-option {
  color: #d1d5db !important;
}

body.dark .settings-content .furobox-option:hover {
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .settings-content .furobox-option.selected {
  color: #60a5fa !important;
}

body.dark .settings-content .furobox-option.focused {
  background-color: #374151 !important;
}

body.dark .settings-content .furobox-select .chevron {
  color: #f9fafb !important;
}

/* --- Mobile settings menu --- */
body.dark .mobile-settings-menu {
  background: #212121 !important;
}

body.dark .mobile-settings-item {
  background: #212121 !important;
  border-bottom-color: #212121 !important;
  color: #d1d5db !important;
}

body.dark .mobile-settings-item:active {
  background: #212121 !important;
}

body.dark .mobile-settings-item-label {
  color: #d1d5db !important;
}

body.dark .mobile-settings-item-icon {
  color: #6b7280 !important;
}

body.dark .mobile-settings-item-desc {
  color: #6b7280 !important;
}

body.dark .mobile-settings-item-arrow {
  color: #4b5563 !important;
}

body.dark .mobile-menu-divider {
  background: #212121 !important;
}

body.dark .mobile-logout-item,
body.dark .mobile-logout-item .mobile-settings-item-label,
body.dark .mobile-logout-item .mobile-settings-item-icon {
  color: #f87171 !important;
}

body.dark .mobile-logout-item:active {
  background: rgba(248,113,113,0.08) !important;
}

/* Mobile section header (back button) */
body.dark .mobile-section-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark .mobile-section-header:active {
  background: #212121 !important;
}

body.dark .mobile-back-arrow,
body.dark .mobile-section-title {
  color: #f9fafb !important;
}

/* Mobile tab active state */
body.dark #settingsModal.show-section .settings-tab.active {
  background: #212121 !important;
}

/* Settings modal header on mobile */
body.dark .settings-modal .modal-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark .settings-modal .modal-title {
  color: #f9fafb !important;
}

/* Mobile close button */
body.dark .mobile-close-btn i {
  color: #d1d5db !important;
}

body.dark .mobile-close-btn:active {
  background: #374151 !important;
}

/* --- Change Password Modal --- */
body.dark #changePasswordModal .modal-content {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark #changePasswordModal .modal-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark #changePasswordModal .modal-title {
  color: #f9fafb !important;
}

body.dark #changePasswordModal .form-label {
  color: #d1d5db !important;
}

body.dark #changePasswordModal .form-control,
body.dark #changePasswordModal .form-control1 {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #changePasswordModal .form-control:focus {
  border-color: rgba(96,165,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
}

body.dark #changePasswordModal .text-muted {
  color: #6b7280 !important;
}

/* --- Delete All Chats / Action Modals --- */
body.dark .action-modal .modal-content {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .action-modal .modal-header {
  background: #212121 !important;
  border-bottom-color: transparent !important;
}

body.dark .action-modal .modal-title {
  color: #f9fafb !important;
}

body.dark .action-modal .modal-body {
  background: #212121 !important;
}

body.dark .action-modal .modal-footer {
  background: #212121 !important;
  border-top-color: transparent !important;
}

body.dark .action-modal .modal-description {
  color: #9ca3af !important;
}

body.dark .action-modal .modal-description strong {
  color: #f9fafb !important;
}

body.dark .action-modal .form-control {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .action-modal .form-control:focus {
  border-color: rgba(96,165,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
}

body.dark .action-modal .form-help-text {
  color: #6b7280 !important;
}

body.dark .action-modal .btn-secondary-action {
  background: transparent !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .action-modal .btn-secondary-action:hover {
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .action-modal .btn-primary-action {
  background: #3b82f6 !important;
  color: #fff !important;
}

body.dark .action-modal .btn-primary-action:hover {
  background: #2563eb !important;
}

body.dark .action-modal .btn-danger-action {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background: transparent !important;
}

body.dark .action-modal .btn-danger-action:hover {
  outline-color: #f87171 !important;
  border-color: #f87171 !important;
  background: rgba(248,113,113,0.08) !important;
}

/* Delete account modal specifics */
body.dark #deleteAccountModal .alert-danger {
  background: rgba(248,113,113,0.1) !important;
  border-color: rgba(248,113,113,0.3) !important;
  color: #f87171 !important;
}

body.dark #deleteAccountModal ul li {
  color: #9ca3af !important;
}

body.dark #deleteAccountModal code {
  background: #374151 !important;
  color: #f87171 !important;
}

body.dark #deleteAccountModal .field-error {
  color: #f87171 !important;
}

/* Edit persona modal */
body.dark #editPersonaModal .modal-content {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark #editPersonaModal .modal-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark #editPersonaModal .modal-title,
body.dark #editPersonaModal .form-label {
  color: #f9fafb !important;
}

body.dark #editPersonaModal .form-control,
body.dark #editPersonaModal .form-control1 {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

/* Verify Email/Phone modals */
body.dark #verifyEmailModal .modal-content,
body.dark #verifyPhoneModal .modal-content {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark #verifyEmailModal .modal-header,
body.dark #verifyPhoneModal .modal-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark #verifyEmailModal .modal-title,
body.dark #verifyPhoneModal .modal-title {
  color: #f9fafb !important;
}

body.dark #verifyEmailModal .modal-body,
body.dark #verifyPhoneModal .modal-body {
  background: #212121 !important;
}

body.dark #verifyEmailModal .modal-footer,
body.dark #verifyPhoneModal .modal-footer {
  background: #212121 !important;
  border-top-color: transparent !important;
}

body.dark #verifyEmailModal .modal-description,
body.dark #verifyPhoneModal .modal-description {
  color: #9ca3af !important;
}

body.dark #verifyEmailModal .modal-description strong,
body.dark #verifyPhoneModal .modal-description strong {
  color: #f9fafb !important;
}

body.dark #verifyEmailModal .form-control,
body.dark #verifyPhoneModal .form-control {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #verifyEmailModal .form-help-text,
body.dark #verifyPhoneModal .form-help-text {
  color: #6b7280 !important;
}

body.dark #verifyEmailModal .field-error,
body.dark #verifyPhoneModal .field-error {
  color: #f87171 !important;
}

body.dark #resendOtpBtn,
body.dark #resendPhoneOtpModalBtn {
  color: #60a5fa !important;
}

/* Country selector in phone modal */
body.dark .country-selector-btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .country-dropdown {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .country-search {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .country-item {
  color: #d1d5db !important;
}

body.dark .country-item:hover {
  background: #374151 !important;
}

/* --- HR dividers inside settings --- */
body.dark .settings-modal hr {
  border-top-color: #374151 !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

/* Base */
body.dark .sidebar {
  background: #212121 !important;
  border-right-color: #212121 !important;
}

body.dark .sidebar-inner {
  background: #212121 !important;
}

body.dark .sidebar-bottom {
  background: #212121 !important;
  border-top: 1px solid var(--border-base) !important;
}

/* Logo shuttle buttons */


body.dark .sidebar-shuttle:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* Shuttle icon - invert so it's visible on dark */
body.dark .sidebar-shuttle img,
body.dark .sidebar-shuttle-hover img {
  filter: invert(1) brightness(2);
}

/* Nav icons */
body.dark .sidebar-nav .nav-link-sidebar img,
body.dark .sidebar-nav-scrollable .nav-link-sidebar img {
  filter: invert(1) brightness(2);
}

/* Nav links */
body.dark .nav-link-sidebar {
  color: #d1d5db !important;
  border-color: transparent !important;
}

body.dark .nav-link-sidebar:hover {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .nav-label {
  color: #d1d5db !important;
}

/* Projects toggle arrow */
body.dark .nav-arrow {
  filter: invert(1) brightness(2);
}

/* Recent toggle */
body.dark .recent-toggle {
  color: #6b7280 !important;
  border-color: transparent !important;
}

body.dark .recent-toggle:hover {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .recent-arrow {
  color: #6b7280 !important;
}

/* Chat items */
body.dark .chat-item {
  color: #d1d5db !important;
  border-color: transparent !important;
}

body.dark .chat-item:hover {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .chat-title {
  color: #d1d5db !important;
}

body.dark .chat-item.active {
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #93c5fd !important;
}

body.dark .chat-item.active .chat-title {
  color: #93c5fd !important;
}

body.dark .chat-item.active:hover {
  background: rgba(96, 165, 250, 0.08) !important;
}

/* Three-dot menu button */
body.dark .chat-menu-btn {
  color: #9ca3af !important;
}

body.dark .chat-menu-btn:hover {
  background: #374151 !important;
  color: #d1d5db !important;
}

/* No chats text */
body.dark .no-chats span {
  color: #6b7280 !important;
}

/* Bottom divider */
body.dark .bottom-divider {
  background: #212121 !important;
}

/* User profile button */
body.dark .user-profile {
  border-color: transparent !important;
}

body.dark .user-profile:hover {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .user-name {
  color: #f9fafb !important;
}

body.dark .user-plan {
  color: #9ca3af !important;
}

/* User avatar initial */
body.dark .user-avatar {
  background: #212121 !important;
}

body.dark .user-initial {
  background: #212121 !important;
  color: #f9fafb !important;
}

/* Login button (guest) */
body.dark .login-section .user-avatar {
  background: #212121 !important;
}

body.dark .login-section .user-name {
  color: #d1d5db !important;
}

/* Login icon invert */
body.dark .login-section .user-avatar img {
  filter: invert(1) brightness(2);
}

/* Profile dropdown (expanded sidebar) */
body.dark #profileDropdownExpanded,
body.dark .profile-dropdown-collapsed {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark #profileDropdownExpanded .dropdown-item,
body.dark .profile-dropdown-collapsed .dropdown-item {
  color: #d1d5db !important;
}

body.dark #profileDropdownExpanded .dropdown-item:hover,
body.dark .profile-dropdown-collapsed .dropdown-item:hover {
  color: #f9fafb !important;
}

body.dark #profileDropdownExpanded .dropdown-item i,
body.dark .profile-dropdown-collapsed .dropdown-item i {
  color: #9ca3af !important;
}

body.dark #profileDropdownExpanded .dropdown-divider,
body.dark .profile-dropdown-collapsed .dropdown-divider {
  border-color: #374151 !important;
}

/* Projects list */
body.dark .project-header {
  color: #d1d5db !important;
  border-color: transparent !important;
}

body.dark .project-header:hover {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .project-icon {
  color: #9ca3af !important;
}

body.dark .project-name {
  color: #d1d5db !important;
}

body.dark .project-chevron {
  color: #6b7280 !important;
}

body.dark .project-pin-icon {
  color: #6b7280 !important;
}

body.dark .project-no-chats,
body.dark .project-loading {
  color: #6b7280 !important;
}

/* Project chat items */
body.dark .project-chat-item {
  color: #d1d5db !important;
}

body.dark .project-chat-item:hover {
  background: rgba(96, 165, 250, 0.08) !important;
}

body.dark .project-chat-item.active {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #93c5fd !important;
}

/* Sidebar tooltips */
body.dark .sidebar:not(.expanded) .nav-item::after,
body.dark .sidebar:not(.expanded) .user-profile::after {
  background: #374151 !important;
  color: #f9fafb !important;
}

/* Scrollbar */
body.dark .sidebar-scrollable-section::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.2) !important;
}

body.dark .sidebar-scrollable-section::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.35) !important;
}

/* Sidebar chat item context dropdowns */
body.dark .chat-menu-wrapper .dropdown-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark .chat-menu-wrapper .dropdown-item {
  color: #d1d5db !important;
}

body.dark .chat-menu-wrapper .dropdown-item:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

body.dark .chat-menu-wrapper .dropdown-item.text-danger {
  color: #f87171 !important;
}

body.dark .chat-menu-wrapper .dropdown-item.text-danger:hover {
  background: rgba(248, 113, 113, 0.1) !important;
}

body.dark .chat-menu-wrapper .dropdown-divider {
  border-color: #374151 !important;
}

/* Rename chat input */
body.dark #renameChatInput {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #renameChatInput:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  color: #f9fafb !important;
}

/* Deleting state */
body.dark .chat-item.deleting {
  background: rgba(248, 113, 113, 0.08) !important;
}

/* Move to project modal list */
body.dark .project-option {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .project-option:hover {
  background: #374151 !important;
  border-color: #60a5fa !important;
}

body.dark .project-option i,
body.dark .project-option span {
  color: #d1d5db !important;
}

body.dark .project-option.create-new i,
body.dark .project-option.create-new span {
  color: #60a5fa !important;
}

/* Modal description strong */
body.dark .modal-description strong {
  color: #f9fafb !important;
}

/* Delete account modal code tag */
body.dark #deleteAccountModal code {
  background: #374151 !important;
  color: #f87171 !important;
}

/* ---- Persona (Choices.js) ---- */
body.dark .persona-choices .choices__inner {
  background-color: var(--bg-input) !important;
  border-color: var(--border-base) !important;
}

body.dark .persona-choices.is-focused .choices__inner {
  border-color: var(--accent-primary) !important;
}

body.dark .persona-choices .choices__list--multiple .choices__item {
  background-color: var(--hover-bg-blue) !important;
  color: var(--accent-primary) !important;
}

body.dark .persona-choices .choices__list--dropdown {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}

body.dark .persona-choices .choices__list--dropdown .choices__item {
  color: var(--text-primary) !important;
}

body.dark .persona-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--hover-bg) !important;
}

body.dark .persona-item {
  background: var(--bg-input) !important;
  border-color: var(--border-base) !important;
}

body.dark .persona-item-name {
  color: var(--text-primary) !important;
}

body.dark .persona-item-description {
  color: var(--text-muted) !important;
}

/* ============================================================
   PLANS PAGE — DARK MODE
   Paste this at the bottom of dark_mode.css
   ============================================================ */

/* ---- Page Background & Header ---- */
body.dark .main-box {
  background: transparent !important;
}

body.dark .plans-title {
  color: #f9fafb !important;
}

body.dark .plans-subtitle {
  color: #60a5fa !important;
}

/* ---- Billing Switch ---- */
body.dark .billing-switch {
  background: #212121 !important;
  border: 1px solid #374151 !important;
}

body.dark .switch-labels label {
  color: #d1d5db !important;
}

body.dark #monthly:checked ~ .switch-labels label[for="monthly"],
body.dark #yearly:checked ~ .switch-labels label[for="yearly"] {
  color: #f9fafb !important;
}

body.dark .switch-slider {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* ---- Currency Notice ---- */
body.dark .currency-notice {
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
  color: #9ca3af !important;
}

/* ---- Plan Cards ---- */
body.dark .plan-card,
body.dark .plan-card-horizontal,
body.dark .go-plan-card {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark .plan-card:hover,
body.dark .plan-card-horizontal:hover,
body.dark .go-plan-card:hover {
  box-shadow: 0 4px 16px rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark .plan-card.current-plan,
body.dark .plan-card-horizontal.current-plan,
body.dark .go-plan-card.current-plan {
  border-color: #60a5fa !important;
  background: linear-gradient(145deg, #1a2a40, #212121) !important;
  box-shadow: 0 4px 16px rgba(96, 165, 250, 0.2) !important;
}

body.dark .plan-card.current-plan::before,
body.dark .plan-card-horizontal.current-plan::before {
  background: #2563eb !important;
}

/* ---- Plan Titles & Text ---- */
body.dark .go-title,
body.dark .plan-name {
  color: #60a5fa !important;
}

body.dark .free-for-year {
  color: #60a5fa !important;
}

body.dark .go-subtext,
body.dark .plan-desc {
  color: #9ca3af !important;
}

body.dark .plan-desc1 {
  color: #fbbf24 !important;
}

/* ---- Price ---- */
body.dark .price-amount,
body.dark .currency-symbol-large,
body.dark .go-price {
  color: #f9fafb !important;
}

body.dark .price-period,
body.dark .currency-symbol {
  color: #9ca3af !important;
}

body.dark .price {
  color: #9ca3af !important;
}

body.dark .price span {
  color: #f9fafb !important;
}

/* ---- Most Popular Badge ---- */
body.dark .most-popular-badge {
  color: #f9fafb !important;
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.2) !important;
}

/* ---- Token Link ---- */
body.dark .token-link {
  color: #60a5fa !important;
}

/* ---- Token Pill / Info Badge ---- */
body.dark .token-pill {
  background: rgba(96, 165, 250, 0.1) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
  color: #93c5fd !important;
}

body.dark .info-badge {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

body.dark .info-dot {
  background: #1e3a5f !important;
  color: #93c5fd !important;
}

/* ---- Models Block ---- */
body.dark .models-title {
  color: #d1d5db !important;
}

body.dark .model-brand-list .model-brand-row {
  color: #d1d5db !important;
}

body.dark .model-brand-row:hover {
  background: #374151 !important;
}

body.dark .brand-left span {
  color: #d1d5db !important;
}

body.dark .brand-arrow {
  color: #60a5fa !important;
}

body.dark .brand-models .brand-model-item {
  color: #9ca3af !important;
}

body.dark .model-chip {
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
  color: #93c5fd !important;
}

body.dark .brand-name-inline {
  color: #d1d5db !important;
}

/* Invert brand icons for dark bg */
body.dark .brand-icon,
body.dark .model-icon,
body.dark .brand-logo-item {
  filter: invert(1) brightness(1.8) !important;
  opacity: 0.85 !important;
}

/* ---- Features ---- */
body.dark .features-title {
  color: #f9fafb !important;
}

body.dark .feature-list li,
body.dark .feature-parent {
  color: #d1d5db !important;
}

body.dark .feature-list li::before,
body.dark .feature-parent::before {
  color: #60a5fa !important;
}

body.dark .feature-sub {
  color: #9ca3af !important;
}

body.dark .feature-title {
  color: #d1d5db !important;
}

body.dark .info-dot-small {
  color: #9ca3af !important;
}

body.dark .cap-note {
  color: #6b7280 !important;
}

body.dark .cap-note a {
  color: #60a5fa !important;
}

/* ---- Tooltip ---- */
body.dark .has-tip .tip {
  background: #212121 !important;
  border: 1px solid #374151 !important;
  color: #d1d5db !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark .has-tip .tip::before {
  border-bottom-color: #212121 !important;
}

/* ---- Choose / Config Buttons ---- */
body.dark .choose-btn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .choose-btn:hover:not(:disabled) {
  background: #1d4ed8 !important;
}

body.dark .choose-btn.current,
body.dark .choose-btn:disabled {
  background: #374151 !important;
  color: #9ca3af !important;
}

body.dark .current-btn {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
}

body.dark .flex-config-btn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .flex-config-btn:hover {
  background: #1d4ed8 !important;
}

body.dark .configure-btn {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.6), rgba(30, 41, 55, 0.6)) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #93c5fd !important;
}

body.dark .configure-btn:hover {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.8), rgba(30, 41, 55, 0.8)) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* ---- Divider ---- */
body.dark .current-plan-divider {
  border-top-color: #374151 !important;
}

/* ---- Free Year Badge ---- */
body.dark .free-year-badge {
  background: linear-gradient(135deg, #065f46, #047857) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

/* ---- Cancellation Notice ---- */
body.dark .cancellation-notice {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

/* ---- Flex Config Section ---- */
body.dark .flex-config-section {
  border-top-color: rgba(96, 165, 250, 0.2) !important;
}

/* ---- Flex Token Input Area ---- */
body.dark .flex-token-label {
  color: #d1d5db !important;
}

body.dark .flex-token-input {
  background: transparent !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}

body.dark .flex-token-unit {
  background: transparent !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}

body.dark .flex-step {
  background: #374151 !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
}

body.dark .flex-step:hover {
  background: #4b5563 !important;
}

body.dark .flex-quick-picks .qp {
  background: #212121 !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
  color: #93c5fd !important;
}

body.dark .flex-quick-picks .qp:hover {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* ---- Brand Select Row ---- */
body.dark .brand-select {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .brand-select:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .brand-select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body.dark .add-to-mix {
  background: #374151 !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
}

body.dark .add-to-mix:hover {
  background: #4b5563 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* ---- Mix Box ---- */
body.dark #mixBox,
body.dark .mix-box {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .mix-head {
  border-bottom-color: #374151 !important;
}

body.dark .mix-title {
  color: #f9fafb !important;
}

body.dark .mix-note {
  color: #9ca3af !important;
}

body.dark .mix-btn {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark .mix-btn:hover {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
}

body.dark .mix-btn--clear {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  background: transparent !important;
}

body.dark .mix-btn--clear:hover {
  background: rgba(248, 113, 113, 0.1) !important;
}

/* ---- Mix Rows ---- */
body.dark .mix-row {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .mix-row:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 2px 6px rgba(96, 165, 250, 0.08) !important;
}

body.dark .mix-model-name {
  color: #f9fafb !important;
}

body.dark .mix-rate-badge {
  color: #9ca3af !important;
  background: #374151 !important;
}

body.dark .mix-pct {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .mix-pct:focus {
  border-color: #60a5fa !important;
  background: #212121 !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body.dark .mix-percent-symbol {
  color: #6b7280 !important;
}

body.dark .mix-slider {
  background: #374151 !important;
}

body.dark .mix-slider::-webkit-slider-thumb {
  background: #3b82f6 !important;
}

body.dark .mix-slider::-moz-range-thumb {
  background: #3b82f6 !important;
}

body.dark .mix-token-amount {
  background: rgba(96, 165, 250, 0.1) !important;
  color: #60a5fa !important;
}

body.dark .mix-remove {
  color: #f87171 !important;
}

body.dark .mix-remove:hover {
  background: rgba(248, 113, 113, 0.15) !important;
}

body.dark .single-model-token-badge {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.5), rgba(30, 42, 69, 0.5)) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #93c5fd !important;
}

body.dark .mix-token-amount-single {
  color: #60a5fa !important;
}

body.dark .mix-single-helper {
  color: #6b7280 !important;
  background: #212121 !important;
}

/* ---- Cost Breakdown ---- */
body.dark #flexCostBox,
body.dark .flex-cost {
  background: transparent !important;
}

body.dark .flex-cost-title {
  color: #f9fafb !important;
}

body.dark .flex-cost-note {
  color: #9ca3af !important;
}

body.dark .flex-cost-line span {
  color: #d1d5db !important;
}

/* ---- Extras Section ---- */
body.dark .extras-section {
  background: #212121 !important;
  border-color: #374151 !important;
  border-radius: 8px !important;
}

body.dark .tools-heading strong {
  color: #f9fafb !important;
}

body.dark .tools-subnote {
  color: #9ca3af !important;
}

body.dark .extra-item {
  border-bottom-color: rgba(96, 165, 250, 0.1) !important;
}

body.dark .extra-label {
  color: #d1d5db !important;
}

body.dark .extra-rate {
  color: #9ca3af !important;
}

body.dark .extra-input {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .extra-input:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body.dark .extra-unit {
  color: #9ca3af !important;
}

/* ---- FX Select (Currency Dropdown) ---- */
body.dark .fxsel .fx-btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .fxsel .fx-btn:focus {
  outline-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .fxsel .fx-caret {
  color: #9ca3af !important;
}

body.dark .fxsel .fx-panel,
body.dark .fx-panel {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark .fxsel .fx-search,
body.dark .fx-panel .fx-search {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .fxsel .fx-opt,
body.dark .fx-opt {
  color: #d1d5db !important;
}

body.dark .fxsel .fx-opt:hover,
body.dark .fx-opt:hover {
  background: #374151 !important;
}

body.dark .fxsel .fx-opt[aria-selected="true"],
body.dark .fx-opt[aria-selected="true"] {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93c5fd !important;
}

body.dark .fxsel .fx-muted,
body.dark .fx-muted {
  color: #6b7280 !important;
}

body.dark .fxsel .fx-empty,
body.dark .fx-empty {
  color: #6b7280 !important;
}

/* ---- Tools Inline ---- */
body.dark .tools-inline {
  color: #d1d5db !important;
}

body.dark .tools-heading strong {
  color: #f9fafb !important;
}

/* ---- Category / Tool Toggles ---- */
body.dark .tools-tab {
  color: #9ca3af !important;
  border-color: transparent !important;
}

body.dark .tools-tab:hover {
  color: #f9fafb !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .tools-tab.active {
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* ---- Badges ---- */
body.dark .badge-active {
  background: #065f46 !important;
}

body.dark .badge-cancelled {
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fbbf24 !important;
}

body.dark .badge-expired {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

body.dark .badge-inactive {
  background: #374151 !important;
  color: #9ca3af !important;
}

body.dark .auto-renew-enabled {
  color: #34d399 !important;
}

body.dark .auto-renew-disabled {
  color: #f87171 !important;
}

/* ---- Error / Success Messages ---- */
body.dark .error-message {
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  color: #f87171 !important;
}

body.dark .success-message {
  background: rgba(52, 211, 153, 0.1) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  color: #34d399 !important;
}

/* ---- Furobox Select ---- */
body.dark .furobox-select button {
  background: #212121 !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}

body.dark .furobox-select button:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* ============================================================
   BILLING SUMMARY PAGE — DARK MODE
   Paste this at the bottom of dark_mode.css (after Plans section)
   ============================================================ */

/* ---- Lightbar Wrapper ---- */
body.dark .plans-lightbar-wrapper {
  box-shadow: none !important;
}

body.dark .plans-lightbar {
  background-color: #1a2332 !important;
  box-shadow: none !important;
}

/* ---- White Right Section ---- */
body.dark .plans-right-section {
  background-color: #212121 !important;
  color: var(--text-secondary) !important;
}

/* ---- Security Badge ---- */
body.dark .plans-right-section > div:first-child span {
  color: #f9fafb !important;
}

/* ---- Terms & Conditions ---- */
body.dark .plans-right-section p {
  color: #9ca3af !important;
}

body.dark .plans-right-section p strong {
  color: #f9fafb !important;
}

body.dark .plans-right-section p a {
  color: #60a5fa !important;
}

body.dark .plans-right-section p a:hover {
  color: #93c5fd !important;
}

/* ---- Plan Includes Box ---- */
body.dark .plans-right-section > div:nth-child(3) {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .plans-right-section > div:nth-child(3) h1 {
  color: #f9fafb !important;
}

body.dark .plans-right-section > div:nth-child(3) span {
  color: #d1d5db !important;
}

/* Checkmark items inside plan includes */
body.dark .plans-right-section > div:nth-child(3) > div > div span {
  color: #d1d5db !important;
}

/* Flex breakdown table */
body.dark .plans-right-section > div:nth-child(3) table th {
  color: #9ca3af !important;
}

body.dark .plans-right-section > div:nth-child(3) table td {
  color: #d1d5db !important;
}

body.dark .plans-right-section > div:nth-child(3) > div[style*="font-size:9px"],
body.dark .plans-right-section > div:nth-child(3) > div[style*="font-size: 9px"] {
  color: #6b7280 !important;
}

/* Category chips */
body.dark .plans-right-section span[style*="background:#e8f2fc"] {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #93c5fd !important;
}

body.dark .plans-right-section span[style*="background:#f3f4f6"] {
  background: #374151 !important;
  color: #9ca3af !important;
}

/* ---- Billing Details Card ---- */
body.dark .plans-right-section > div:nth-child(4) > div:first-child {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .plans-right-section > div:nth-child(4) > div:first-child h3,
body.dark .plans-right-section > div:nth-child(4) > div:nth-child(2) h3 {
  background: #1a2d45 !important;
  color: #f9fafb !important;
  border-bottom-color: #374151 !important;
}

/* ---- Billing Form ---- */
body.dark #billingForm {
  background: transparent !important;
}

body.dark #billingForm label {
  color: #d1d5db !important;
}

body.dark #billingForm input {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #billingForm input[readonly],
body.dark #billingForm input[readonly]:hover,
body.dark #billingForm input[readonly]:focus {
  background: #0d1929 !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

body.dark #billingForm input::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark #billingForm input:not([readonly]):focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
  background: #212121 !important;
}

/* Required asterisk note */
body.dark #billingForm div[style*="margin-top: 8px"],
body.dark #billingForm div[style*="margin-top:8px"] {
  color: #6b7280 !important;
}

/* ---- Summary Card ---- */
body.dark .plans-right-section > div:nth-child(4) > div:nth-child(2) > div:first-child {
  background: #212121 !important;
  border-color: #374151 !important;
}

/* Summary table rows */
body.dark .plans-right-section table td {
  color: #d1d5db !important;
  border-color: #374151 !important;
}

/* "Plan", "Billing Cycle" etc. labels */
body.dark .plans-right-section table td:first-child {
  color: #9ca3af !important;
}

/* "Plan name", amounts - right side values */
body.dark .plans-right-section table td:last-child {
  color: #f9fafb !important;
}

/* Divider row inside table */
body.dark .plans-right-section table td[colspan="2"] {
  border-top-color: #374151 !important;
}

/* Grand total row */
body.dark .plans-right-section table tr:last-child td {
  color: #f9fafb !important;
}

/* Discount applied */
body.dark .plans-right-section span[style*="color: #10b981"],
body.dark .plans-right-section span[style*="color:#10b981"] {
  color: #34d399 !important;
}

/* Dates section divider */
body.dark .plans-right-section div[style*="border-top: 1px solid #e5e7eb"],
body.dark .plans-right-section div[style*="border-top:1px solid #e5e7eb"] {
  border-top-color: #374151 !important;
}

/* ---- Promo Code ---- */
body.dark #promoCodeInput {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #promoCodeInput:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body.dark #promoCodeInput::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

/* Apply button */
body.dark .plans-right-section button[onclick="applyPromoCode()"] {
  background: transparent !important;
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}

body.dark .plans-right-section button[onclick="applyPromoCode()"]:hover {
  background: rgba(96, 165, 250, 0.1) !important;
}

/* Remove button */
body.dark .plans-right-section button[onclick="removePromoCode()"] {
  background: #b91c1c !important;
  color: #fff !important;
}

body.dark #promoError {
  color: #f87171 !important;
}

body.dark #promoLoading {
  color: #9ca3af !important;
}

/* Promo applied text */
body.dark div[style*="color: #10b981"],
body.dark div[style*="color:#10b981"] {
  color: #34d399 !important;
}

/* ---- Promo / labels area ---- */
body.dark .plans-right-section div > label[style*="color: #666"],
body.dark .plans-right-section div > label[style*="color:#666"] {
  color: #9ca3af !important;
}

/* ---- Total Payment Box ---- */
body.dark .total-payment-box {
  background: #212121 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px !important;
}

body.dark .total-label {
  color: #9ca3af !important;
}

body.dark .total-amount {
  color: #f9fafb !important;
}

/* ---- Pay / Activate Button ---- */
body.dark .payment-button {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .payment-button:hover:not(:disabled) {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3) !important;
}

body.dark .payment-button:disabled {
  background: #374151 !important;
  color: #6b7280 !important;
}

/* ---- Header (Back + Title) ---- */
body.dark .back-button {
  color: #60a5fa !important;
}

body.dark .back-button:hover {
  color: #93c5fd !important;
}

body.dark .plans-title {
  color: #f9fafb !important;
}

body.dark .plans-subtitle {
  color: #60a5fa !important;
}

/* ---- Django Messages ---- */
body.dark div[style*="background-color: #fdecea"] {
  background-color: rgba(248, 113, 113, 0.1) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

body.dark div[style*="background-color: #e7f5eb"] {
  background-color: rgba(52, 211, 153, 0.1) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}

body.dark div[style*="background-color: #f0f4ff"] {
  background-color: rgba(96, 165, 250, 0.1) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

/* ---- No contact fallback warning ---- */
body.dark div[style*="background: #fff3cd"] {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

/* ---- Loading Overlay ---- */
body.dark .loading-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

body.dark .loading-content {
  background: #212121 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

body.dark .loading-content h3 {
  color: #f9fafb !important;
}

body.dark .loading-content p {
  color: #9ca3af !important;
}

body.dark .spinner {
  border-color: #374151 !important;
  border-top-color: #60a5fa !important;
}

/* ============================================================
   PAYMENT SUCCESS PAGE — DARK MODE
   Paste this at the bottom of dark_mode.css (after Billing section)
   ============================================================ */

/* ---- Page Background ---- */
body.dark .success-container {
  background: transparent !important;
}

/* ---- Header ---- */
body.dark .plans-title {
  color: #f9fafb !important;
}

body.dark .plans-subtitle {
  color: #60a5fa !important;
}

body.dark .back-button {
  color: #60a5fa !important;
}

body.dark .back-button:hover {
  color: #93c5fd !important;
}

/* ---- Success Icon ---- */
body.dark .success-icon {
  background: #065f46 !important;
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.1) !important;
}

/* ---- Success Title & Subtitle ---- */
body.dark .success-title {
  color: #f9fafb !important;
}

body.dark .success-subtitle {
  color: #9ca3af !important;
}

/* ---- Subscription Reminder ---- */
body.dark .subscription-reminder {
  color: #d1d5db !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

body.dark .subscription-reminder svg {
  color: #fbbf24 !important;
}

/* ---- Subscription Card ---- */
body.dark .subscription-card {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* ---- Card Header ---- */
body.dark .card-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark .card-header h3 {
  color: #f9fafb !important;
}

body.dark .status-badge {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}

/* ---- Card Content ---- */
body.dark .card-content {
  background: #212121 !important;
}

/* ---- Details Grid ---- */
body.dark .detail-label {
  color: #6b7280 !important;
}

body.dark .detail-value {
  color: #f9fafb !important;
}

body.dark .detail-value.large {
  color: #93c5fd !important;
}

/* ---- Payment Section ---- */
body.dark .payment-section {
  background: rgba(30, 58, 95, 0.4) !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
}

body.dark .payment-id {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #60a5fa !important;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* ---- Divider ---- */
body.dark .divider {
  background: linear-gradient(to right, transparent, #374151, transparent) !important;
}

/* ---- Action Buttons ---- */
body.dark .btn-primary {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .btn-primary:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3) !important;
}

body.dark .btn-secondary {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark .btn-secondary:hover {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #f9fafb !important;
}

/* ---- Email Confirmation Notice ---- */
body.dark .confirmation-notice {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
}

body.dark .confirmation-notice p {
  color: #34d399 !important;
}

body.dark .confirmation-notice svg {
  color: #34d399 !important;
}

/* ---- "Let's begin." text ---- */
body.dark .success-top p {
  color: #d1d5db !important;
}

/* Dashboard Button */
body.dark .success-top a[href] {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .success-top a[href]:hover {
  background: #1d4ed8 !important;
}

/* ---- Auto-Renew Loading Box ---- */
body.dark #autoRenewLoadingBox {
  background: rgba(30, 58, 95, 0.3) !important;
  border: 1px solid rgba(96, 165, 250, 0.2) !important;
  color: #d1d5db !important;
  border-radius: 12px !important;
}

body.dark #autoRenewLoadingBox strong {
  color: #f9fafb !important;
}

body.dark #autoRenewLoadingBox span {
  color: #9ca3af !important;
}

/* ---- Auto-Renew Success Box ---- */
body.dark #autoRenewSuccessBox {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
  color: #34d399 !important;
  border-radius: 12px !important;
}

body.dark #autoRenewSuccessBox strong {
  color: #34d399 !important;
}

body.dark #autoRenewSuccessBox span {
  color: #6ee7b7 !important;
}

/* ---- Auto-Renew Error Box ---- */
body.dark #autoRenewErrorBox {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
  color: #f87171 !important;
}

body.dark #autoRenewErrorBox strong {
  color: #fca5a5 !important;
}

body.dark #autoRenewErrorBox span {
  color: #f87171 !important;
}

/* ---- Auto-Renew Offer Card ---- */
body.dark div[style*="border:3px solid #d5d9e2"],
body.dark div[style*="border: 3px solid #d5d9e2"] {
  background: #212121 !important;
  border-color: #374151 !important;
}

/* Left side title + text */
body.dark div[style*="border-right:1px solid #e5e7eb"] h3,
body.dark div[style*="border-right: 1px solid #e5e7eb"] h3 {
  color: #f9fafb !important;
}

body.dark div[style*="border-right:1px solid #e5e7eb"] p,
body.dark div[style*="border-right: 1px solid #e5e7eb"] p {
  color: #9ca3af !important;
}

body.dark div[style*="border-right:1px solid #e5e7eb"],
body.dark div[style*="border-right: 1px solid #e5e7eb"] {
  border-right-color: #374151 !important;
}

/* Right side checklist */
body.dark div[style*="grid-template-columns: 2fr 2fr"] div,
body.dark div[style*="grid-template-columns:2fr 2fr"] div {
  color: #d1d5db !important;
}

/* Enable Auto-Renew button */
body.dark #enableAutoRenewBtn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark #enableAutoRenewBtn:hover:not(:disabled) {
  background: #1d4ed8 !important;
}

body.dark #enableAutoRenewBtn:disabled {
  background: #374151 !important;
  color: #6b7280 !important;
}

/* Small disclaimer text */
body.dark div[style*="border-right"] ~ div p[style*="color:#6b7280"],
body.dark div[style*="border-right"] ~ div p[style*="color: #6b7280"] {
  color: #6b7280 !important;
}

/* Auto-renew status message */
body.dark #autoRenewStatus {
  color: #f87171 !important;
}

/* ============================================================
   PLAN DETAILS PAGE — DARK MODE
   Paste this at the bottom of dark_mode.css (after Payment Success section)
   ============================================================ */

/* ---- Page Header ---- */
body.dark .details-title {
  color: #f9fafb !important;
}

body.dark .details-subtitle {
  color: #9ca3af !important;
}

body.dark .back-button {
  background: #374151 !important;
  color: #d1d5db !important;
}

body.dark .back-button:hover {
  background: #4b5563 !important;
  color: #f9fafb !important;
}

/* ---- Section Titles ---- */
body.dark .section-title {
  color: #f9fafb !important;
}

body.dark .section-title::before {
  background: #60a5fa !important;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */

body.dark .comparison-table-wrapper {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .comparison-table thead {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark .comparison-table th {
  color: #f9fafb !important;
}

body.dark .comparison-table .feature-col {
  color: #9ca3af !important;
}

body.dark .comparison-table tbody tr {
  border-bottom-color: #212121 !important;
}

body.dark .comparison-table tbody tr:hover {
  background: #253347 !important;
}

body.dark .comparison-table td {
  color: #d1d5db !important;
}

body.dark .comparison-table .feature-name {
  color: #d1d5db !important;
}

body.dark .comparison-table .highlight-cell {
  background: rgba(96, 165, 250, 0.08) !important;
  color: #93c5fd !important;
}

body.dark .check-mark {
  color: #34d399 !important;
}

body.dark .cross-mark {
  color: #4b5563 !important;
}

/* ============================================================
   PLAN DETAIL CARDS
   ============================================================ */

body.dark .plan-detail-card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .plan-detail-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark .plan-detail-card.highlight-plan {
  border-color: #60a5fa !important;
}

/* ---- Popular Badge ---- */
body.dark .popular-badge-detail {
  background: #2563eb !important;
  color: #fff !important;
}

/* ---- Card Header ---- */
body.dark .plan-detail-header {
  background: linear-gradient(135deg, #212121 0%, #1a2d45 100%) !important;
  border-bottom-color: #374151 !important;
}

body.dark .plan-detail-title {
  color: #f9fafb !important;
}

body.dark .plan-detail-price {
  color: #9ca3af !important;
}

/* ---- Choose / Configure Button ---- */
body.dark .detail-choose-btn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .detail-choose-btn:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25) !important;
}

/* ---- Card Content ---- */
body.dark .plan-detail-content {
  background: #212121 !important;
}

/* ---- Detail Headings ---- */
body.dark .detail-heading {
  color: #93c5fd !important;
}

body.dark .detail-heading::before {
  color: #60a5fa !important;
}

/* ---- Detail Text ---- */
body.dark .detail-text {
  color: #9ca3af !important;
}

/* ---- Premium Note Box ---- */
body.dark .premium-note {
  background: rgba(96, 165, 250, 0.08) !important;
  border-left-color: #60a5fa !important;
}

body.dark .premium-note strong {
  color: #93c5fd !important;
}

/* ---- Detail Lists ---- */
body.dark .detail-list li {
  color: #d1d5db !important;
}

body.dark .detail-list li::before {
  color: #34d399 !important;
}

body.dark .detail-list li strong {
  color: #f9fafb !important;
}

body.dark .detail-ordered-list li {
  color: #d1d5db !important;
}

body.dark .detail-ordered-list li strong {
  color: #f9fafb !important;
}

/* ============================================================
   MODELS SECTION
   ============================================================ */

body.dark .model-brand-group {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .model-brand-name {
  color: #d1d5db !important;
}

body.dark .model-chip-detail {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
}

body.dark .provider-badge {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

/* Invert brand icons */
body.dark .brand-icon-detail {
  filter: invert(1) brightness(1.8) !important;
  opacity: 0.85 !important;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

body.dark .faq-item {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .faq-item:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark .faq-question {
  color: #93c5fd !important;
}

body.dark .faq-answer {
  color: #9ca3af !important;
}

/* ============================================================
   CTA SECTION
   ============================================================ */

/* CTA already has a dark navy gradient so it looks fine in dark mode,
   but we tweak slightly to better blend with dark surfaces */
body.dark .cta-section {
  background: linear-gradient(135deg, #0f2840 0%, #0a1e30 100%) !important;
  border: 1px solid #374151 !important;
}

body.dark .cta-title {
  color: #f9fafb !important;
}

body.dark .cta-text {
  color: #9ca3af !important;
}

body.dark .cta-button {
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
}

body.dark .cta-button:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 8px 20px rgba(96, 165, 250, 0.25) !important;
}

/* ============================================================
   SMART EMAIL ASSISTANT & SHARED TOOL PAGES — DARK MODE
   Covers: Smart Email Writer, Social Media Caption Maker,
   Resume Booster, and any other tool using the PDG system.
   Paste this at the bottom of dark_mode.css.
   ============================================================ */

/* ---- Page Title ---- */
body.dark .page-title {
  color: #f9fafb !important;
}

/* ---- Layout Panels ---- */
body.dark .fullchat-page,
body.dark .email-writer-layout {
  background: transparent !important;
}

body.dark .ai-tool-container,
body.dark .pdg-left-panel,
body.dark .email-form-panel {
  border-right-color: #374151 !important;
  background: transparent !important;
}

/* ============================================================
   PDG FORM FIELDS
   ============================================================ */

body.dark .pdg-label,
body.dark .ai-tool-container .form-label {
  color: #d1d5db !important;
}

/* Inputs, textareas */
body.dark .pdg-input,
body.dark .pdg-textarea,
body.dark .pdg-input-file,
body.dark .ai-tool-container .form-control {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  box-shadow: none !important;
}

body.dark .pdg-input:hover,
body.dark .pdg-textarea:hover,
body.dark .ai-tool-container .form-control:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 3px 8px rgba(96, 165, 250, 0.08) !important;
}

body.dark .pdg-input:focus,
body.dark .pdg-textarea:focus,
body.dark .ai-tool-container .form-control:focus {
  background: #212121 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
  color: #f9fafb !important;
}

body.dark .pdg-input::placeholder,
body.dark .pdg-textarea::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

/* Selects */
body.dark .pdg-select,
body.dark .ai-tool-container select,
body.dark .ai-tool-container .form-select {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .pdg-select:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* ---- Generate / Submit Button ---- */
body.dark .pdg-generate-btn,
body.dark .btn-submit-glow {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .pdg-generate-btn:hover,
body.dark .btn-submit-glow:hover {
  background: #1d4ed8 !important;
  opacity: 1 !important;
}

body.dark .pdg-generate-btn:disabled {
  background: #374151 !important;
  color: #6b7280 !important;
}

/* ---- PDG Sections ---- */
body.dark .pdg-section {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .pdg-section-title {
  color: #f9fafb !important;
}

body.dark .pdg-section-desc {
  color: #9ca3af !important;
}

body.dark .pdg-or-divider {
  color: #6b7280 !important;
}

body.dark .pdg-advanced-wrapper {
  border-top-color: #374151 !important;
}

/* ---- PDG Banners ---- */
body.dark .pdg-banner.warning {
  background: rgba(251, 191, 36, 0.08) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

body.dark .pdg-banner.warning strong {
  color: #fbbf24 !important;
}

body.dark .pdg-banner.info {
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #93c5fd !important;
}

body.dark .pdg-btn.small {
  background: #2563eb !important;
  color: #fff !important;
}

/* ---- Checkbox ---- */
body.dark .pdg-checkbox label {
  color: #d1d5db !important;
}

/* ============================================================
   CHAT PANEL (RIGHT SIDE)
   ============================================================ */

body.dark .chat-panel-header {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
  border-radius: 12px 12px 0 0 !important;
}

body.dark .chat-header-text {
  color: #f9fafb !important;
}

body.dark .chat-fullscreen-btn {
  background: transparent !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
}

body.dark .chat-fullscreen-btn:hover {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
}

/* Chat container */
body.dark .chat-container,
body.dark .chat-panel-container.embedded {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: none !important;
}

body.dark .chat-container::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.2) !important;
}

/* Live chat label */
body.dark .live-chat-text {
  color: #d1d5db !important;
}

/* ---- Message Bubbles ---- */
body.dark .bubble.user {
  background: #1e2d45 !important;
  color: #f9fafb !important;
}

body.dark .bubble.user .sender {
  color: #9ca3af !important;
}

body.dark .bubble.user .message {
  color: #f9fafb !important;
}

body.dark .bubble.assistant {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

/* Placeholder (only-child) assistant bubble */
body.dark .chat-conversation > .bubble.assistant:only-child {
  background: transparent !important;
  border: none !important;
}

body.dark .chat-conversation > .bubble.assistant:only-child .message {
  color: #6b7280 !important;
}

/* Markdown inside assistant bubble */
body.dark .bubble.assistant .message p,
body.dark .bubble.assistant .message li,
body.dark .bubble.assistant .message td {
  color: #e5e7eb !important;
}

body.dark .bubble.assistant .message h1,
body.dark .bubble.assistant .message h2,
body.dark .bubble.assistant .message h3,
body.dark .bubble.assistant .message h4 {
  color: #f9fafb !important;
}

body.dark .bubble.assistant .message strong {
  color: #f9fafb !important;
}

body.dark .bubble.assistant .message code {
  background: #374151 !important;
  color: #fbbf24 !important;
}

body.dark .bubble.assistant .message pre {
  background: #1e2a3b !important;
  border: 1px solid #374151 !important;
}

body.dark .bubble.assistant .message pre code {
  background: transparent !important;
  color: #e2e8f0 !important;
}

/* ---- Follow-up Prompt Bar ---- */
body.dark .followup-prompt label {
  color: #d1d5db !important;
}

body.dark .followup-input-wrapper input {
  background: #212121 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #f9fafb !important;
}

body.dark .followup-input-wrapper input::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark .followup-input-wrapper input:focus {
  outline: none !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15) !important;
}

/* ============================================================
   EMAIL CONTAINER (generated email output)
   ============================================================ */

body.dark .email-container {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .email-subject-row strong {
  color: #9ca3af !important;
}

body.dark .subject-editable {
  color: #f9fafb !important;
  border-color: transparent !important;
}

body.dark .subject-editable:hover {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .subject-editable:focus {
  background: #212121 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15) !important;
}

body.dark .email-body-editable {
  color: #e5e7eb !important;
  border-color: transparent !important;
}

body.dark .email-body-editable:hover {
  background: #212121 !important;
  border-color: #374151 !important;
  cursor: text !important;
}

body.dark .email-body-editable:focus {
  background: #212121 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15) !important;
  color: #f9fafb !important;
}

/* Placeholder text */
body.dark .subject-editable:empty::before,
body.dark .email-body-editable:empty::before {
  color: #6b7280 !important;
}

/* ---- Email Actions Bar ---- */
body.dark .email-actions-bar {
  border-top-color: #374151 !important;
}

body.dark .email-copy-btn,
body.dark .email-menu-btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .email-copy-btn:hover,
body.dark .email-menu-btn:hover {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #f9fafb !important;
}

/* Gmail / Outlook links */
body.dark .email-action-link {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .email-action-link:hover {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #f9fafb !important;
  text-decoration: none !important;
}

/* ---- Copy Button (caption maker style) ---- */
body.dark .btn-copy {
  color: #d1d5db !important;
}

body.dark .btn-copy:hover {
  color: #f9fafb !important;
}

/* ---- Scroll to Bottom Button ---- */
body.dark .scroll-btn {
  color: rgba(96, 165, 250, 0.5) !important;
}

body.dark .scroll-btn:hover {
  color: #60a5fa !important;
}

/* ---- Limit / Upgrade Banner (inside form) ---- */
body.dark .pdg-banner.warning a.pdg-btn {
  background: #2563eb !important;
  color: #fff !important;
}

/* ============================================================
   HELP CENTER & ALL HELP PAGES — DARK MODE
   Covers: Help Center, Billing Help, Account Help,
   Features Help, Troubleshooting, Legal & Policies pages.
   All share the same .faq-item, .pp-hero, .help-section classes.
   Paste this at the bottom of dark_mode.css.
   ============================================================ */

/* ============================================================
   SHARED: PP HERO HEADER (used on all help sub-pages)
   ============================================================ */

body.dark .pp-hero {
  background: transparent !important;
  border-bottom-color: rgba(96, 165, 250, 0.12) !important;
}

body.dark .pp-breadcrumbs {
  color: #9ca3af !important;
}

body.dark .pp-bc__link,
body.dark .rp-bc__link {
  color: #60a5fa !important;
}

body.dark .pp-bc__link:hover,
body.dark .rp-bc__link:hover {
  color: #93c5fd !important;
}

body.dark .pp-bc__current {
  color: #6b7280 !important;
}

body.dark .pp-title {
  color: #f9fafb !important;
}

body.dark .pp-badge {
  color: #d1d5db !important;
}

body.dark .pp-badge strong {
  color: #d1d5db !important;
}

/* ============================================================
   SHARED: FAQ ITEMS (all help pages)
   ============================================================ */

body.dark .faq-section .faq-item {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .faq-section .faq-item:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark .faq-section .faq-question {
  background: #212121 !important;
  color: #f9fafb !important;
  border: none !important;
}

body.dark .faq-section .faq-question:hover {
  background: #1a2332 !important;
}

body.dark .faq-section .faq-icon {
  color: #60a5fa !important;
}

body.dark .faq-section .faq-item.active .faq-question {
  background: #212121 !important;
}

body.dark .faq-section .faq-answer {
  background: #212121 !important;
}

body.dark .faq-section .faq-answer p {
  color: #9ca3af !important;
}

body.dark .faq-section .faq-answer ul,
body.dark .faq-section .faq-answer ol {
  color: #9ca3af !important;
}

body.dark .faq-section .faq-answer li {
  color: #9ca3af !important;
}

body.dark .faq-section .faq-answer strong {
  color: #d1d5db !important;
}

body.dark .faq-section .faq-answer a {
  color: #60a5fa !important;
}

body.dark .faq-section .faq-answer a:hover {
  color: #93c5fd !important;
}

/* ============================================================
   SHARED: HELP SECTION CTA (bottom of each help sub-page)
   ============================================================ */

body.dark .help-section {
  background: #212121 !important;
  border: 1px solid #374151 !important;
}

body.dark .help-section h3 {
  color: #f9fafb !important;
}

body.dark .help-section p {
  color: #9ca3af !important;
}

/* Primary help button */
body.dark .help-btn {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.dark .help-btn:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
}

/* Secondary help button */
body.dark .help-btn.secondary {
  background: transparent !important;
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

body.dark .help-btn.secondary:hover {
  background: rgba(96, 165, 250, 0.1) !important;
  color: #93c5fd !important;
  border-color: #93c5fd !important;
}

/* ============================================================
   HELP CENTER (main landing page)
   ============================================================ */

body.dark .help-center-container {
  background: transparent !important;
}

body.dark .help-header h1 {
  color: #f9fafb !important;
}

body.dark .help-header p {
  color: #9ca3af !important;
}

/* Search box */
body.dark .search-input {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .search-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1) !important;
}

body.dark .search-input::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark .search-icon {
  color: #6b7280 !important;
}

/* Category cards */
body.dark .category-card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .category-card:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4) !important;
}

body.dark .category-title {
  color: #f9fafb !important;
}

body.dark .category-description {
  color: #9ca3af !important;
}

body.dark .category-topics li {
  color: #60a5fa !important;
  border-bottom-color: #374151 !important;
}

body.dark .category-topics li a {
  color: #60a5fa !important;
}

body.dark .category-topics li a:hover {
  color: #93c5fd !important;
}

/* Category icons — keep gradient but add slight overlay */
body.dark .category-icon {
  opacity: 0.9 !important;
}

/* Quick links section */
body.dark .quick-links {
  background: #212121 !important;
  border: 1px solid #374151 !important;
}

body.dark .quick-links h3 {
  color: #f9fafb !important;
}

body.dark .quick-link-btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .quick-link-btn:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
  color: #60a5fa !important;
  box-shadow: none !important;
}

body.dark .quick-link-btn svg {
  color: #9ca3af !important;
}



body.dark .contact-section h3 {
  color: #f9fafb !important;
}

body.dark .contact-section p {
  color: #9ca3af !important;
}

body.dark .contact-btn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .contact-btn:hover {
  background: #1d4ed8 !important;
}

body.dark .contact-btn.secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #e5e7eb !important;
}

body.dark .contact-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* ============================================================
   BILLING HELP PAGE
   ============================================================ */

/* Override the Billing-specific --fx variables in dark mode */
body.dark .faq-item {
  background: #212121 !important;
  border-color: #374151 !important;
}

/* Billing help CTA */
body.dark .help-page-container .help-section {
  background: linear-gradient(180deg, #212121 0%, #1a2332 100%) !important;
  border-color: #374151 !important;
}

/* ============================================================
   LEGAL PAGE
   ============================================================ */

body.dark .legal-container {
  background: transparent !important;
}

body.dark .legal-title {
  color: #f9fafb !important;
}

body.dark .legal-subtitle {
  color: #9ca3af !important;
}

body.dark .back-button {
  background: #374151 !important;
  color: #d1d5db !important;
}

body.dark .back-button:hover {
  background: #4b5563 !important;
}

/* Policy cards */
body.dark .policy-card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .policy-card:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

body.dark .policy-card-title {
  color: #f9fafb !important;
}

body.dark .policy-card-description {
  color: #9ca3af !important;
}

body.dark .policy-meta {
  border-top-color: #374151 !important;
  color: #6b7280 !important;
}

/* Policy icons stay as-is (gradient backgrounds look fine in dark) */

/* Legal info section */
body.dark .legal-info-section {
  background: #212121 !important;
  border: 1px solid #374151 !important;
}

body.dark .legal-info-section h3 {
  color: #f9fafb !important;
}

body.dark .legal-info-section p {
  color: #9ca3af !important;
}

/* Legal CTA — already dark gradient, just tweak */
body.dark .legal-contact-cta {
  background: linear-gradient(135deg, #0a1e30, #1a3a5c) !important;
  border: 1px solid #374151 !important;
}

body.dark .legal-contact-cta h3 {
  color: #f9fafb !important;
}

body.dark .legal-contact-cta p {
  color: #9ca3af !important;
}

body.dark .contact-legal-btn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .contact-legal-btn:hover {
  background: #1d4ed8 !important;
}

/* ============================================================
   PP-ARTICLE / PP-SEC (shared legal/privacy content sections)
   ============================================================ */

body.dark .pp-article a {
  color: #60a5fa !important;
  border-bottom-color: rgba(96, 165, 250, 0.3) !important;
}

body.dark .pp-article a:hover {
  color: #93c5fd !important;
}

body.dark .pp-sec h3 {
  color: #f9fafb !important;
}

body.dark .pp-sec p,
body.dark .pp-sec li {
  color: #9ca3af !important;
}

body.dark .pp-sec li::marker {
  color: #60a5fa !important;
}

body.dark .pp-intro {
  color: #9ca3af !important;
}

/* Accordion (cookie sections) */
body.dark .pp-accordion {
  background: rgba(96, 165, 250, 0.06) !important;
  border: 1px solid rgba(96, 165, 250, 0.15) !important;
}

body.dark .pp-accordion > summary {
  color: #d1d5db !important;
}

/* Help breadcrumb (account/billing/features pages) */
body.dark .help-breadcrumb a {
  color: #60a5fa !important;
}

body.dark .help-breadcrumb a:hover {
  color: #93c5fd !important;
}

/* ============================================================
   AUTH PAGES — DARK MODE
   Covers: Login, Signup, Onboarding (complete profile)
   Shared: login.css / signup.css variables + OTP boxes,
   country selector, phone input, Google/Phone buttons.
   Paste this at the bottom of dark_mode.css.
   ============================================================ */

/* ============================================================
   PAGE BACKGROUND & WRAPPER
   ============================================================ */

body.dark .auth-wrapper {
  background: transparent !important;
}

/* ============================================================
   LOGIN CARD
   ============================================================ */

body.dark .login-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark .login-card h2 {
  color: #f9fafb !important;
}

body.dark .login-card p {
  color: #9ca3af !important;
}

/* ============================================================
   FORM LABELS & INPUTS
   ============================================================ */

body.dark .auth-wrapper .form-label {
  color: #9ca3af !important;
}

/* All text inputs */
body.dark .auth-wrapper .input-box,
body.dark .auth-wrapper .form-control {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper .input-box::placeholder,
body.dark .auth-wrapper .form-control::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark .auth-wrapper .input-box:hover,
body.dark .auth-wrapper .form-control:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .auth-wrapper .input-box:focus,
body.dark .auth-wrapper .form-control:focus {
  background: #212121 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
  color: #f9fafb !important;
}

/* Readonly / disabled inputs (email, phone display fields) */
body.dark .auth-wrapper input[readonly],
body.dark .auth-wrapper input[disabled] {
  background: #0d1929 !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* Error state */
body.dark .auth-wrapper .input-box.error,
body.dark .auth-wrapper .form-control.error {
  border-color: #f87171 !important;
  background: rgba(248, 113, 113, 0.05) !important;
}

/* ============================================================
   CTA BUTTON (.btn-orange)
   ============================================================ */

body.dark .auth-wrapper .btn-orange {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .auth-wrapper .btn-orange:hover {
  background: #1d4ed8 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper .btn-orange:disabled {
  background: #374151 !important;
  color: #6b7280 !important;
  opacity: 0.6 !important;
}

/* ============================================================
   TEXT DIVIDER ("OR")
   ============================================================ */

body.dark .auth-wrapper .text-divider {
  color: #6b7280 !important;
}

body.dark .auth-wrapper .text-divider::before,
body.dark .auth-wrapper .text-divider::after {
  background: #374151 !important;
}

/* ============================================================
   GOOGLE / PHONE LOGIN BUTTONS
   ============================================================ */

body.dark .auth-wrapper .google-btn,
body.dark .auth-wrapper .phone-login-btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .auth-wrapper .google-btn:hover,
body.dark .auth-wrapper .phone-login-btn:hover {
  background: #374151 !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #f9fafb !important;
}

/* ============================================================
   PASSWORD TOGGLE ICON
   ============================================================ */

body.dark .auth-wrapper .toggle-password,
body.dark .auth-wrapper .toggle-password-phone {
  color: #6b7280 !important;
}

body.dark .auth-wrapper .toggle-password:hover,
body.dark .auth-wrapper .toggle-password-phone:hover {
  color: #d1d5db !important;
}

/* ============================================================
   OTP BOXES (fake visual display chars)
   ============================================================ */

body.dark .auth-wrapper .otp-char {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper .otp-char.active {
  border-color: #60a5fa !important;
}

body.dark .auth-wrapper .otp-char.filled {
  border-color: #93c5fd !important;
}

/* Legacy OTP boxes */
body.dark .auth-wrapper .otp-box {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper .otp-box:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body.dark .auth-wrapper .dash {
  color: #6b7280 !important;
}

/* Helper text under OTP */
body.dark .auth-wrapper .text-muted {
  color: #9ca3af !important;
}

body.dark .auth-wrapper small.text-muted strong {
  color: #d1d5db !important;
}

/* ============================================================
   ERROR & LINK TEXT
   ============================================================ */

body.dark .auth-wrapper .field-error {
  color: #f87171 !important;
}

body.dark .auth-wrapper .text-danger {
  color: #f87171 !important;
}

body.dark .auth-wrapper a.small.text-primary,
body.dark .auth-wrapper .back-link {
  color: #60a5fa !important;
}

body.dark .auth-wrapper a.small.text-primary:hover,
body.dark .auth-wrapper .back-link:hover {
  color: #93c5fd !important;
}

/* "Try another way", "Use password instead", "Resend" btn-link */
body.dark .auth-wrapper .btn-link {
  color: #60a5fa !important;
}

body.dark .auth-wrapper .btn-link:hover {
  color: #93c5fd !important;
}

/* "Already have an account? Log In" */
body.dark #loginSection {
  color: #9ca3af !important;
}

body.dark #loginSection a {
  color: #60a5fa !important;
}

body.dark #loginSection a:hover {
  color: #93c5fd !important;
}

/* ============================================================
   COUNTRY SELECTOR (phone login / signup)
   ============================================================ */

body.dark .auth-wrapper .country-selector-btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper .country-selector-btn:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

body.dark .auth-wrapper .country-chevron {
  color: #9ca3af !important;
}

body.dark .auth-wrapper .country-flag,
body.dark .auth-wrapper .country-code {
  color: #f9fafb !important;
}

body.dark .auth-wrapper .country-dropdown {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark .auth-wrapper .country-search-wrapper {
  background: #212121 !important;
  border-bottom-color: #374151 !important;
}

body.dark .auth-wrapper .country-search {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper .country-search::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark .auth-wrapper .country-list {
  background: #212121 !important;
}

body.dark .auth-wrapper .country-item {
  color: #d1d5db !important;
}

body.dark .auth-wrapper .country-item:hover {
  background: #374151 !important;
  color: #f9fafb !important;
}

/* ============================================================
   PHONE INPUT GROUP
   ============================================================ */

body.dark .auth-wrapper .phone-input-group {
  border-color: #374151 !important;
}

body.dark .auth-wrapper .phone-number-input .form-control {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .auth-wrapper small.text-muted {
  color: #6b7280 !important;
}

/* ============================================================
   ONBOARDING PAGE — COMPLETE PROFILE
   ============================================================ */

body.dark .onboarding-title {
  color: #f9fafb !important;
}

body.dark .onboarding-subtitle {
  color: #9ca3af !important;
}

/* Terms checkbox */
body.dark .checkbox-wrapper label {
  color: #9ca3af !important;
}

body.dark .checkbox-wrapper label a {
  color: #60a5fa !important;
}

body.dark .checkbox-wrapper label a:hover {
  color: #93c5fd !important;
}

body.dark .checkbox-wrapper input[type="checkbox"] {
  accent-color: #2563eb !important;
}

/* ============================================================
   LOGIN FOOTER (fixed bottom)
   ============================================================ */

body.dark .login-footer {
  background: #212121 !important;
  color: #6b7280 !important;
  border-top: 1px solid #212121 !important;
}

body.dark .login-footer a {
  color: #6b7280 !important;
}

body.dark .login-footer a:hover {
  color: #d1d5db !important;
}

/* ============================================================
   FORGOT PASSWORD LINK
   ============================================================ */

body.dark .auth-wrapper .text-end a.small.text-primary {
  color: #60a5fa !important;
}
/* Add this to dark_mode.css */

body.dark #mobileHeaderToggleAI img,
body.dark .mobile-header-toggle img {
  filter: invert(1) brightness(2) !important;
}
/* In dark_mode.css — update the existing recent arrow rule */

body.dark .recent-arrow {
  color: #d1d5db !important;  /* same white/light as sidebar text */
}

body.dark .recent-toggle {
  color: #d1d5db !important;  /* match the label text too */
}

/* ============================================================
   CONTACT PAGE — DARK MODE
   ============================================================ */

/* ---- Form Highlight Card ---- */
body.dark .form-highlight {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
}

body.dark .form-highlight::before {
  background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
}

body.dark .contact-section h4 {
  color: #f9fafb !important;
}

/* ---- Form Inputs & Selects ---- */
body.dark .contact-form .form-control,
body.dark .contact-form .form-select {
  background: #2d2d2d !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark .contact-form .form-control::placeholder {
  color: rgba(249,250,251,0.3) !important;
}

body.dark .contact-form .form-control:focus,
body.dark .contact-form .form-select:focus {
  background: #2d2d2d !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(96,165,250,0.1) !important;
  color: #f9fafb !important;
}

/* Select dropdown options */
body.dark .contact-form .form-select option {
  background: #212121 !important;
  color: #f9fafb !important;
}

/* ---- Readonly inputs (email/phone) ---- */
body.dark .contact-form input[readonly] {
  background: #1a1a1a !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* ---- Form Labels ---- */
body.dark .contact-form .form-label {
  color: #d1d5db !important;
}

/* ---- Checkbox ---- */
body.dark .contact-form .form-check {
  background: #2d2d2d !important;
  border-color: #374151 !important;
}

body.dark .contact-form .form-check-label {
  color: #9ca3af !important;
}

body.dark .contact-form .form-check-input {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

body.dark .contact-form .form-check-input:checked {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

/* ---- Submit Button ---- */
body.dark .btn-enhanced {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
}

body.dark .btn-enhanced:hover {
  box-shadow: 0 16px 42px rgba(96,165,250,0.25) !important;
}

/* ---- Response Notice ---- */
body.dark .response-notice {
  color: #6b7280 !important;
}

/* ---- Contact Cards ---- */
body.dark .contact-card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .contact-card:hover {
  border-color: rgba(96,165,250,0.4) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
}

body.dark .contact-card h5 {
  color: #f9fafb !important;
}

body.dark .contact-card p {
  color: #9ca3af !important;
}

body.dark .contact-card a {
  color: #60a5fa !important;
}

body.dark .contact-card a:hover {
  color: #93c5fd !important;
}

/* ---- Breadcrumbs ---- */
body.dark .contact-container .pp-breadcrumbs {
  color: #9ca3af !important;
}

body.dark .contact-container .rp-bc__link {
  color: #60a5fa !important;
}

body.dark .contact-container .pp-bc__current {
  color: #6b7280 !important;
}

/* ---- Page Title & Badge ---- */
body.dark .contact-container .pp-title {
  color: #f9fafb !important;
}

body.dark .contact-container .pp-badge strong {
  color: #9ca3af !important;
}

/* ---- Alert messages ---- */
body.dark .contact-container .alert-success {
  background: rgba(52,211,153,0.1) !important;
  border-color: rgba(52,211,153,0.3) !important;
  color: #34d399 !important;
}

body.dark .contact-container .alert-danger {
  background: rgba(248,113,113,0.1) !important;
  border-color: rgba(248,113,113,0.3) !important;
  color: #f87171 !important;
}

/* ============================================================
   REFUND POLICY PAGE — DARK MODE
   ============================================================ */

body.dark .rp-hero {
  border-bottom-color: rgba(96,165,250,0.12) !important;
}

body.dark .rp-breadcrumbs {
  color: #9ca3af !important;
}

body.dark .rp-bc__link {
  color: #60a5fa !important;
}

body.dark .rp-bc__link:hover {
  color: #93c5fd !important;
}

body.dark .rp-bc__current {
  color: #6b7280 !important;
}

body.dark .rp-title {
  color: #f9fafb !important;
}

body.dark .rp-badge {
  color: #9ca3af !important;
}

body.dark .rp-badge strong {
  color: #d1d5db !important;
}

body.dark .rp-intro {
  color: #9ca3af !important;
}

body.dark .rp-sec h3 {
  color: #f9fafb !important;
}

body.dark .rp-subhead {
  color: #d1d5db !important;
}

body.dark .rp-sec p,
body.dark .rp-sec li {
  color: #9ca3af !important;
}

body.dark .rp-sec li::marker {
  color: #6b7280 !important;
}

body.dark .rp-sec strong {
  color: #d1d5db !important;
}

body.dark .rp-callout {
  background: rgba(96,165,250,0.08) !important;
  border: 1px solid rgba(96,165,250,0.15) !important;
}

body.dark .rp-callout p {
  color: #9ca3af !important;
}

body.dark .rp-callout strong {
  color: #d1d5db !important;
}

body.dark .rp-warning {
  background: rgba(248,113,113,0.08) !important;
  border: 1px solid rgba(248,113,113,0.15) !important;
}

body.dark .rp-warning p {
  color: #9ca3af !important;
}

body.dark .rp-warning strong {
  color: #fca5a5 !important;
}

body.dark .rp-article a {
  color: #60a5fa !important;
  border-bottom-color: rgba(96,165,250,0.3) !important;
}

body.dark .rp-article a:hover {
  color: #93c5fd !important;
}

/* ============================================================
   TERMS & CONDITIONS PAGE — DARK MODE
   ============================================================ */

body.dark .tc-hero {
  border-bottom-color: rgba(96,165,250,0.12) !important;
}

body.dark .tc-breadcrumbs {
  color: #9ca3af !important;
}

body.dark .tc-bc__link {
  color: #60a5fa !important;
}

body.dark .tc-bc__link:hover {
  color: #93c5fd !important;
}

body.dark .tc-bc__current {
  color: #6b7280 !important;
}

body.dark .tc-title {
  color: #f9fafb !important;
}

body.dark .tc-badge {
  color: #9ca3af !important;
}

body.dark .tc-badge strong {
  color: #d1d5db !important;
}

body.dark .tc-intro {
  color: #9ca3af !important;
}

body.dark .tc-intro strong {
  color: #d1d5db !important;
}

body.dark .tc-intro a {
  color: #60a5fa !important;
}

body.dark .tc-sec h3 {
  color: #f9fafb !important;
}

body.dark .tc-subhead {
  color: #d1d5db !important;
}

body.dark .tc-sec p,
body.dark .tc-sec li {
  color: #9ca3af !important;
}

body.dark .tc-sec ol li {
  color: #9ca3af !important;
}

body.dark .tc-sec li::marker {
  color: #6b7280 !important;
}

body.dark .tc-sec strong {
  color: #d1d5db !important;
}

body.dark .tc-sec em {
  color: #9ca3af !important;
}

body.dark .tc-callout {
  background: rgba(96,165,250,0.08) !important;
  border: 1px solid rgba(96,165,250,0.15) !important;
}

body.dark .tc-callout p {
  color: #9ca3af !important;
}

body.dark .tc-callout strong {
  color: #d1d5db !important;
}

body.dark .tc-warning {
  background: rgba(248,113,113,0.08) !important;
  border: 1px solid rgba(248,113,113,0.15) !important;
}

body.dark .tc-warning p {
  color: #9ca3af !important;
}

body.dark .tc-warning strong {
  color: #fca5a5 !important;
}

body.dark .tc-warning ul li {
  color: #9ca3af !important;
}

body.dark .tc-article a {
  color: #60a5fa !important;
  border-bottom-color: rgba(96,165,250,0.3) !important;
}

body.dark .tc-article a:hover {
  color: #93c5fd !important;
}

/* ============================================================
   ABOUT PAGE — DARK MODE
   ============================================================ */

/* ---- Hero ---- */
body.dark .hero h1 {
  color: #f9fafb !important;
}

/* ---- Chat Widget ---- */
body.dark .chat {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

body.dark .chat-head {
  background: linear-gradient(135deg, rgba(96,165,250,0.08)) !important;
  border-bottom-color: #374151 !important;
}

body.dark .chat-head .title {
  color: #f9fafb !important;
}

body.dark .chat-head .avatar {
  filter: invert(1) brightness(2) !important;
}

body.dark .row.bot .bubble {
  background: #212121 !important;
  color: #d1d5db !important;
}

body.dark .row.user .bubble {
  background: #1e2d45 !important;
  color: #f9fafb !important;
}

body.dark .dot {
  background: #4b5563 !important;
}

/* ---- Section Headings ---- */
body.dark .section h2,
body.dark .section1 h2 {
  color: #f9fafb !important;
}

body.dark .lede {
  color: #9ca3af !important;
}

/* ---- Principle Cards ---- */
body.dark .card {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .card h3 {
  color: #f9fafb !important;
}

body.dark .card p {
  color: #9ca3af !important;
}

/* ---- Pills ---- */
body.dark .pill {
  background: transparent !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
}

/* ---- Mission Section ---- */
body.dark .mission-title {
  color: #f9fafb !important;
}

body.dark .mission-text {
  color: #d1d5db !important;
}

body.dark .mission-link {
  color: #d1d5db !important;
}

body.dark .mission-link:hover {
  color: #60a5fa !important;
}

/* ---- Models Section ---- */
body.dark .section .lede strong {
  color: #f9fafb !important;
}

/* ---- Auto Switch Cards ---- */
body.dark .switch-card {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

body.dark .switch-card strong {
  color: #f9fafb !important;
}

body.dark .switch-card p {
  color: #9ca3af !important;
}

body.dark .steps li {
  color: #9ca3af !important;
}

body.dark .steps li b {
  color: #d1d5db !important;
}

body.dark .steps li::before {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .chip {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
}

body.dark .chip .arrow {
  color: #60a5fa !important;
}

body.dark .tagline {
  color: #d1d5db !important;
}

/* ---- Team Section ---- */
body.dark .team-section h2 {
  color: #f9fafb !important;
}

body.dark .team-member {
  background: #212121 !important;
  border-color: #374151 !important;
}

body.dark .team-member:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .team-member strong {
  color: #f9fafb !important;
}

body.dark .team-member .role {
  color: #9ca3af !important;
}

/* ---- CTA Section ---- */
body.dark .section1 .cta-wrap {
  background: linear-gradient(135deg, rgba(96,165,250,0.06)) !important;
  border-color: #374151 !important;
}

body.dark .section1 .cta-wrap h2 {
  color: #f9fafb !important;
}

body.dark .section1 .cta-wrap .lede {
  color: #9ca3af !important;
}

body.dark .section1 .cta-wrap .btn--shadow {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
}

body.dark .section1 .cta-wrap .btn--shadow:hover {
  color: #60a5fa !important;
  border-color: rgba(96,165,250,0.4) !important;
}

/* ---- Links ---- */
body.dark .about-page a,
body.dark .section a {
  color: #60a5fa !important;
}

/* ---- CTA note button ---- */
body.dark .cta-note .btn {
  background: #212121 !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

body.dark .cta-note .btn:hover {
  color: #60a5fa !important;
  border-color: rgba(96,165,250,0.4) !important;
}

/* ============================================================
   ABOUT PAGE — DARK MODE FIXES
   ============================================================ */

/* Kill the light gradient body background from about_us.css */
body.dark {
  background: #212121 !important;
  background-image: none !important;
}

/* Kill ALL possible white line sources at top */
body.dark header,
body.dark header *,
body.dark .navbar,
body.dark nav.navbar,
body.dark .navbar.with-sidebar,
body.dark .billing-header {
  background-image: none !important;
  border-bottom-color: #374151 !important;
}

/* Kill inline style="background-color: #fff" on navbar */
body.dark nav[style],
body.dark header[style] {
  background: #212121 !important;
  background-color: #212121 !important;
}

/* Hero section */
body.dark .hero h1 {
  color: #f9fafb !important;
}

/* Chat widget container */
body.dark .chat {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

/* Chat header — kill the light blue gradient */
body.dark .chat-head {
  background: #2a2a2a !important;
  border-bottom-color: #374151 !important;
}

body.dark .chat-head .title {
  color: #f9fafb !important;
}

/* Bot bubble */
body.dark .row.bot .bubble {
  background: #2a2a2a !important;
  color: #e5e7eb !important;
}

/* User bubble — replace the light gray with a dark tint */
body.dark .row.user .bubble {
  background: #1e2d45 !important;
  color: #f9fafb !important;
}

/* Typing dots */
body.dark .dot {
  background: #4b5563 !important;
}

/* Section backgrounds */
body.dark .section,
body.dark .section1,
body.dark .mission-section,
body.dark .team-section {
  background: transparent !important;
}

/* Cards */
body.dark .card,
body.dark .switch-card,
body.dark .cta-card {
  background: #2a2a2a !important;
  border-color: #374151 !important;
}

/* Pills */
body.dark .pill,
body.dark .chip {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

/* CTA wrap */
body.dark .cta-wrap {
  background: rgba(96, 165, 250, 0.05) !important;
  border-color: #374151 !important;
}

/* Team members */
body.dark .team-member {
  background: #2a2a2a !important;
  border-color: #374151 !important;
}

body.dark .team-member strong {
  color: #f9fafb !important;
}

body.dark .team-member .role {
  color: #9ca3af !important;
}

/* ============================================================
   LEARN PAGE — DARK MODE
   ============================================================ */

/* Hero */
body.dark .learn-hero h1 {
  color: #f9fafb !important;
}

body.dark .learn-hero .sub {
  color: #9ca3af !important;
}

/* Topic cards */
body.dark .learn-card {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

body.dark .learn-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
  border-color: rgba(96,165,250,0.4) !important;
}

body.dark .learn-card h3 {
  color: #f9fafb !important;
}

body.dark .learn-card p {
  color: #9ca3af !important;
}

/* Deep sections */
body.dark .learn-deep h2 {
  color: #f9fafb !important;
}

body.dark .learn-list li {
  color: #d1d5db !important;
}

/* Learn button */
body.dark .learn-btn {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Tools grid cards */
body.dark .lt-card {
  background: #2a2a2a !important;
  border-color: #374151 !important;
}

body.dark .lt-card strong {
  color: #f9fafb !important;
}

body.dark .lt-card p {
  color: #9ca3af !important;
}

/* Chat widget (shared with about page) */
body.dark .chat {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
}

body.dark .chat-head {
  background: #2a2a2a !important;
  border-bottom-color: #374151 !important;
}

body.dark .chat-head .title {
  color: #f9fafb !important;
}

body.dark .row.bot .bubble {
  background: #2a2a2a !important;
  color: #e5e7eb !important;
}

body.dark .row.user .bubble {
  background: #1e2d45 !important;
  color: #f9fafb !important;
}

body.dark .dot {
  background: #4b5563 !important;
}

/* Section headings and lede */
body.dark .learn-topics h2,
body.dark .learn-deep h2 {
  color: #f9fafb !important;
}

body.dark .learn-deep .lede {
  color: #9ca3af !important;
}

/* Pills (inherited from about_us.css) */
body.dark .learn-deep .pill {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
}

/* Final CTA */
body.dark .learn-final .cta-wrap {
  background: rgba(96,165,250,0.05) !important;
  border-color: #374151 !important;
}

body.dark .learn-final h2 {
  color: #f9fafb !important;
}

body.dark .learn-final .lede {
  color: #9ca3af !important;
}

body.dark .learn-final .btn--shadow {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  color: #d1d5db !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
}

body.dark .learn-final .btn--shadow:hover {
  color: #60a5fa !important;
  border-color: rgba(96,165,250,0.4) !important;
}
/* ============================================================
   MOBILE SETTINGS MODAL — DARK MODE
   Add this at the bottom of dark_mode.css
   ============================================================ */

/* ---- Modal Shell (fullscreen on mobile ONLY) ---- */
@media (max-width: 768px) {
  body.dark #settingsModal .modal-dialog,
  body.dark #settingsModal .modal-content {
    background: #212121 !important;
  }

  body.dark #settingsModal .modal-header {
    background: #212121 !important;
    border-bottom-color: #374151 !important;
  }

  body.dark #settingsModal .modal-title {
    color: #f9fafb !important;
  }

  body.dark #settingsModal .modal-body {
    background: #212121 !important;
  }

  body.dark #settingsModal .settings-content {
    background: #212121 !important;
  }
}

/* ---- Mobile Close Button (X) ---- */
body.dark .mobile-close-btn {
  background: transparent !important;
}

body.dark .mobile-close-btn:active {
  background: #374151 !important;
}

body.dark .mobile-close-btn i {
  color: #f9fafb !important;  /* bright white so it's visible */
}

/* ---- Desktop btn-close (Bootstrap X) inside settings modal ---- */
body.dark #settingsModal .btn-close {
  filter: invert(1) brightness(2) !important;
  opacity: 0.9 !important;
}

/* ---- Mobile X close button ---- */
/* Target the button and icon */
body.dark #mobileSettingsClose,
body.dark #mobileSettingsCloseAI {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Bootstrap Icons render via ::before — must target it directly */
body.dark #mobileSettingsClose i,
body.dark #mobileSettingsClose i::before,
body.dark #mobileSettingsCloseAI i,
body.dark #mobileSettingsCloseAI i::before {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Broad fallback — any bi-x inside the settings modal header */
body.dark #settingsModal .modal-header i.bi-x::before,
body.dark #settingsModal .modal-header i.bi-x-lg::before,
body.dark #settingsModal .mobile-close-btn i::before {
  color: #ffffff !important;
}

/* ============================================================
   MENU STATE — mobile-settings-menu
   ============================================================ */

body.dark .mobile-settings-menu {
  background: #212121 !important;
}

/* Each list item */
body.dark .mobile-settings-item {
  background: #212121 !important;
  border-bottom-color: #2d2d2d !important;
  color: #e5e7eb !important;
}

body.dark .mobile-settings-item:active {
  background: #2a2a2a !important;
}

/* Item content text */
body.dark .mobile-settings-item-label {
  color: #e5e7eb !important;
}

body.dark .mobile-settings-item-desc {
  color: #9ca3af !important;
}

/* Icons — brighter so they're clearly visible */
body.dark .mobile-settings-item-icon {
  color: #9ca3af !important;
  filter: brightness(1.4) !important;
}

/* ============================================================
   NUCLEAR OPTION — Bootstrap Icons ::before color override
   Targets every possible combination for the chevron arrows
   ============================================================ */
body.dark .mobile-settings-item-arrow::before {
  color: #9ca3af !important;
}

body.dark .mobile-settings-menu .mobile-settings-item-arrow::before {
  color: #9ca3af !important;
}

body.dark #settingsModal .mobile-settings-item-arrow::before {
  color: #9ca3af !important;
}

/* Also set on the element itself as fallback */
body.dark .mobile-settings-item-arrow {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

/* Divider between groups */
body.dark .mobile-menu-divider {
  background: #2d2d2d !important;
  height: 6px !important;
}

/* Nav links (Pricing, Help, Learn, About) */
body.dark .mobile-settings-item.mobile-nav-link {
  background: #212121 !important;
  color: #e5e7eb !important;
}

body.dark .mobile-settings-item.mobile-nav-link .mobile-settings-item-label {
  color: #e5e7eb !important;
}

body.dark .mobile-settings-item.mobile-nav-link .mobile-settings-item-icon {
  color: #9ca3af !important;
  filter: brightness(1.4) !important;
}

body.dark .mobile-settings-item.mobile-nav-link .mobile-settings-item-arrow {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Logout item */
body.dark .mobile-logout-item,
body.dark .mobile-logout-item .mobile-settings-item-label,
body.dark .mobile-logout-item .mobile-settings-item-icon {
  color: #f87171 !important;
}

body.dark .mobile-logout-item .mobile-settings-item-arrow {
  color: #f87171 !important;
  opacity: 0.6 !important;
}

body.dark .mobile-logout-item:active {
  background: rgba(248, 113, 113, 0.08) !important;
}

/* ============================================================
   SECTION STATE — active tab view
   ============================================================ */

/* Back header (sticky top of each section) */
body.dark .mobile-section-header {
  background: #1a1a1a !important;
  border-bottom-color: #374151 !important;
}

body.dark .mobile-section-header:active {
  background: #2a2a2a !important;
}

/* Back arrow — bright and clearly tappable */
body.dark .mobile-back-arrow {
  color: #f9fafb !important;
  font-size: 26px !important;
}

body.dark .mobile-section-title {
  color: #f9fafb !important;
  font-weight: 600 !important;
}

/* Active tab background */
body.dark #settingsModal.show-section .settings-tab.active {
  background: #212121 !important;
}

/* ============================================================
   GENERAL TAB — mobile layout overrides
   ============================================================ */

body.dark #settingsModal .settings-row {
  background: #212121 !important;
}

body.dark #settingsModal .settings-row-label {
  color: #f9fafb !important;
}

body.dark #settingsModal .settings-row-value {
  color: #9ca3af !important;
}

/* Theme / Language selects */
body.dark #settingsModal .furobox-select button {
  background: #212121 !important;
  color: #f9fafb !important;
}

body.dark #settingsModal .furobox-menu {
  background: #212121 !important;
  border-color: #374151 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark #settingsModal .furobox-option {
  color: #d1d5db !important;
}

body.dark #settingsModal .furobox-option.selected {
  color: #60a5fa !important;
}

body.dark #settingsModal .furobox-option:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Notification toggles */
body.dark #settingsModal .notification-label {
  color: #f9fafb !important;
}

body.dark #settingsModal .notifications-section {
  background: #212121 !important;
}

/* Delete section */
body.dark #settingsModal .delete-section-title {
  color: #f9fafb !important;
}

body.dark #settingsModal .delete-section-description {
  color: #9ca3af !important;
}

/* ============================================================
   USAGE TAB — mobile
   ============================================================ */

body.dark #settingsModal .usage-title {
  color: #f9fafb !important;
}

body.dark #settingsModal .usage-date {
  color: #9ca3af !important;
}

body.dark #settingsModal .usage-item-name {
  color: #d1d5db !important;
}

body.dark #settingsModal .usage-percentage {
  color: #f9fafb !important;
}

body.dark #settingsModal .usage-values {
  color: #6b7280 !important;
}

body.dark #settingsModal .usage-progress {
  background: #374151 !important;
  border-color: transparent !important;
}

body.dark #settingsModal .usage-progress-bar {
  background: #60a5fa !important;
}

body.dark #settingsModal .usage-divider {
  border-top-color: #374151 !important;
}

/* ============================================================
   PERSONA TAB — mobile
   ============================================================ */

body.dark #settingsModal .persona-title {
  color: #f9fafb !important;
}

body.dark #settingsModal .persona-description {
  color: #9ca3af !important;
}

body.dark #settingsModal .persona-field-label {
  color: #f9fafb !important;
}

body.dark #settingsModal .persona-helper-text,
body.dark #settingsModal .persona-helper-text-1 {
  color: #6b7280 !important;
}

body.dark #settingsModal .persona-textarea {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #settingsModal .persona-textarea::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark #settingsModal .persona-save-btn {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark #settingsModal .persona-item {
  background: #2a2a2a !important;
  border-color: #374151 !important;
}

body.dark #settingsModal .persona-item-name {
  color: #f9fafb !important;
}

body.dark #settingsModal .persona-item-description {
  color: #9ca3af !important;
}

/* ============================================================
   SUBSCRIPTION TAB — mobile
   ============================================================ */

body.dark #tab-subscriptions {
  background: #212121 !important;
}

body.dark #tab-subscriptions .subscription-page-title {
  color: #f9fafb !important;
}

body.dark #tab-subscriptions .subscription-card,
body.dark #tab-subscriptions .auto-renew-card {
  border-color: #374151 !important;
}

body.dark #tab-subscriptions .subscription-plan-name,
body.dark #tab-subscriptions .auto-renew-title {
  color: #f9fafb !important;
}

body.dark #tab-subscriptions .plan-period,
body.dark #tab-subscriptions .date-text,
body.dark #tab-subscriptions .renew-text,
body.dark #tab-subscriptions .renew-date {
  color: #9ca3af !important;
}

body.dark #tab-subscriptions .renew-date strong {
  color: #f9fafb !important;
}

body.dark #tab-subscriptions .badge-enabled,
body.dark #tab-subscriptions .badge-disabled {
  background: #2a2a2a !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark #tab-subscriptions .btn-receipt {
  background: #2a2a2a !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}

body.dark #tab-subscriptions .btn-auto-renew-disable,
body.dark #tab-subscriptions .btn-auto-renew-enable,
body.dark #tab-subscriptions .btn-upgrade {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark #tab-subscriptions .verification-banner {
  background: rgba(96, 165, 250, 0.1) !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
  color: #93c5fd !important;
}

/* ============================================================
   PROFILE TAB — mobile
   ============================================================ */

body.dark #settingsModal .profile-section-title {
  color: #f9fafb !important;
}

body.dark #settingsModal .profile-field-label {
  color: #9ca3af !important;
}

body.dark #settingsModal .profile-field-value-wrapper {
  background: #2a2a2a !important;
  border-color: #374151 !important;
}

body.dark #settingsModal .profile-field-value-wrapper:has(input:focus) {
  background: #2a2a2a !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body.dark #settingsModal .profile-field-input {
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
  background: transparent !important;
}

body.dark #settingsModal .profile-field-input:disabled {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

body.dark #settingsModal .profile-field-input::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark #settingsModal .profile-helper-text,
body.dark #settingsModal .profile-security-values {
  color: #6b7280 !important;
}

body.dark #settingsModal .profile-danger-title {
  color: #f9fafb !important;
}

body.dark #settingsModal .profile-danger-text {
  color: #9ca3af !important;
}

body.dark #settingsModal .profile-change-password-btn {
  background: #2563eb !important;
  color: #fff !important;
}

/* Edit/Save/Cancel icon buttons */
body.dark #settingsModal .profile-edit-btn img {
  filter: invert(1) brightness(2) !important;
}

/* ============================================================
   BUTTONS — mobile modal
   ============================================================ */

body.dark #settingsModal .btn-primary {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark #settingsModal .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background: transparent !important;
}

body.dark #settingsModal .btn-outline-danger:hover {
  background: rgba(248, 113, 113, 0.1) !important;
}

/* ============================================================
   FORM CONTROLS — mobile modal
   ============================================================ */

body.dark #settingsModal .form-control,
body.dark #settingsModal textarea {
  background: #2a2a2a !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark #settingsModal .form-control::placeholder,
body.dark #settingsModal textarea::placeholder {
  color: rgba(249, 250, 251, 0.3) !important;
}

body.dark #settingsModal .form-control:focus,
body.dark #settingsModal textarea:focus {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
  background: #2a2a2a !important;
  color: #f9fafb !important;
}

/* Toggle switches */
body.dark #settingsModal .form-check-input {
  background-color: #4b5563 !important;
}

body.dark #settingsModal .form-check-input:checked {
  background-color: #1b91f8 !important;
}

/* HR dividers inside tabs */
body.dark #settingsModal hr {
  border-top-color: #374151 !important;
}

/* Form helper text */
body.dark #settingsModal .form-text {
  color: #6b7280 !important;
}
/* ============================================================
   DARK MODE — Mobile settings arrow fix
   Add at the very bottom of settings_modal.css
   ============================================================ */

body.dark .mobile-settings-item-arrow,
body.dark .mobile-settings-item-arrow::before,
body.dark .mobile-settings-item i.bi-chevron-right,
body.dark .mobile-settings-item i.bi-chevron-right::before {
  -webkit-text-fill-color: #f9fafb !important;
}