/* ============================================================
   light-theme.css — تم روشن (سفید و نارنجی) برای جی‌پی‌تی کافه
   با افزودن کلاس theme-light به <html> یا <body> فعال می‌شود.
   ============================================================ */

html.theme-light,
html.theme-light body,
body.theme-light {
  /* ── پالت برند ──────────────────────────────────────────────────────────
     دو رنگ اصلی: کاغذ #F2F2F2 و نارنجی #ED7C22. بقیهٔ مقادیر مشتق همین دو
     هستند، نه رنگ‌های تازه، تا تم یکدست بماند.                            */
  --paper: #f2f2f2;
  --paper-raised: #fbfbfb;
  --paper-sunken: #ebebeb;
  --ink: #1c1c1c;
  --ink-muted: #6b6b6b;
  --rule: #e0e0e0;

  --orange-primary: #ed7c22;
  --orange-vibrant: #f2903f;
  --orange-hover: #d16a17;
  --orange-light: rgba(237, 124, 34, 0.14);
  --orange-soft: rgba(237, 124, 34, 0.06);
  --orange-grad: linear-gradient(135deg, #f2903f 0%, #ed7c22 100%);
  --orange-shadow: 0 4px 16px rgba(237, 124, 34, 0.22);
  --orange-glow: 0 0 0 1px rgba(237, 124, 34, 0.35);

  --cafe-shell-bg: var(--paper);
  --cafe-surface: var(--paper-raised);
  --cafe-panel-bg: var(--paper-raised);
  --cafe-panel-border: var(--rule);
  --cafe-panel-border-subtle: var(--paper-sunken);
  --cafe-panel-text: var(--ink);
  --cafe-panel-muted: var(--ink-muted);
  --cafe-panel-hover: var(--orange-soft);
  --cafe-primary-hex: var(--orange-primary);
  --cafe-primary-soft: var(--orange-light);
  --cafe-shadow: 0 1px 2px rgba(28, 28, 28, 0.05);

  /* متغیرهای نئون به همین دو رنگ نگاشته می‌شوند */
  --neon-grad: var(--orange-grad);
  --neon-cyan: var(--orange-primary);
  --neon-violet: var(--orange-hover);
  --neon-pink: var(--orange-vibrant);
  --neon-border: var(--rule);

  /* متغیرهای اصلی سیستم */
  --primary-color: 237 124 34;
  --secondary-color: 242 144 63;
  --accent-color: 237 124 34;
  --black-color: 28 28 28;
  --surface-color: 251 251 251;
  --warning-color: 237 124 34;
  --info-color: 237 124 34;

  color: var(--ink) !important;
  /* Flat paper, no gradient wash: the reference is a printed page, and a tinted
     bloom behind flat panels is what made the earlier pass read as "dark theme
     with the lights turned up". */
  background-color: var(--paper) !important;
  background-image: none !important;
}

/* ── پرفورمنس مود در تم روشن ── */
html.theme-light.perf-mode,
html.theme-light.perf-mode body {
  background-image: none !important;
  background-color: var(--paper) !important;
}

/* ── پنل‌های اصلی و ساختار شل ── */
html.theme-light .shell-main-panel,
html.theme-light body.neon-shell .shell-main-panel {
  background: var(--paper-raised) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  border: 1px solid var(--rule) !important;
}

html.theme-light body.neon-shell div.chat-main-wrapper,
html.theme-light .chat-main-wrapper {
  background: var(--paper-raised) !important;
}

html.theme-light body.neon-shell div.cafe-main-panel,
html.theme-light .cafe-main-panel,
html.theme-light .chat-viewport,
html.theme-light #conversation,
html.theme-light #mainContainer,
html.theme-light #mainContainer > div:last-child {
  background: transparent !important;
}

/* ── سایدبار راست و هدر ── */
html.theme-light #rightSidebar,
html.theme-light .cafe-shell-sidebar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-left: 1px solid var(--rule) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

html.theme-light .cafe-shell-header,
html.theme-light .bg-glass-panel {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--rule) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  color: var(--ink) !important;
}

html.theme-light .neon-topbar {
  background: rgba(255, 255, 255, 0.90) !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  color: var(--ink) !important;
}

html.theme-light .neon-title {
  background: var(--orange-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

html.theme-light .sidebar-chat-section {
  background: rgba(248, 250, 252, 0.95) !important;
  border-left: 1px solid var(--rule) !important;
}

/* ── ناوبری سایدبار و آیتم‌های فعال ── */
html.theme-light .shell-nav-item {
  color: var(--ink-muted) !important;
}
html.theme-light .shell-nav-item:hover {
  color: var(--orange-primary) !important;
  background: rgba(237, 124, 34, 0.08) !important;
}
html.theme-light .shell-nav-item.shell-nav-active,
html.theme-light .shell-nav-active,
html.theme-light .left-bar-active,
html.theme-light .cafe-nav-active {
  background: var(--orange-soft) !important;
  color: var(--orange-primary) !important;
  border-color: var(--rule) !important;
  box-shadow: 0 0 0 1px rgba(237, 124, 34, 0.35), 0 2px 10px rgba(237, 124, 34, 0.15) !important;
}
html.theme-light .shell-nav-active span,
html.theme-light .shell-nav-active i,
html.theme-light .shell-nav-active p {
  color: var(--orange-primary) !important;
}
html.theme-light .left-bar-btn img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(82%) saturate(752%)
          hue-rotate(350deg) brightness(142%) contrast(86%) !important;
}

/* ── لوگو و برند ── */
html.theme-light #sidebar-logo-text p:first-child {
  color: var(--orange-primary) !important;
  font-weight: 700 !important;
}
html.theme-light #sidebar-logo-text p:last-child {
  color: var(--ink-muted) !important;
}
html.theme-light [style*="color:var(--ink)"],
html.theme-light [style*="color: var(--ink)"],
html.theme-light .text-primary-color {
  color: var(--orange-primary) !important;
}

/* ── متن‌ها و المان‌های تایپوگرافی ── */
html.theme-light .text-white,
html.theme-light .text-slate-100,
html.theme-light .text-slate-200,
html.theme-light .text-slate-300,
html.theme-light .neon-shell .text-slate-800,
html.theme-light .neon-shell .text-slate-700 {
  color: var(--ink) !important;
}

html.theme-light .neon-muted,
html.theme-light .text-slate-400,
html.theme-light .text-slate-500,
html.theme-light .text-white\/40,
html.theme-light .text-white\/50,
html.theme-light .text-white\/60,
html.theme-light .text-white\/70,
html.theme-light .text-white\/80 {
  color: var(--ink-muted) !important;
}

html.theme-light .text-teal-700,
html.theme-light .text-teal-600 {
  color: var(--orange-primary) !important;
}

/* ── رنگ پس‌زمینه‌ها و خطوط حاشیه ── */
html.theme-light .neon-shell .bg-white {
  background: var(--paper-raised) !important;
}
html.theme-light .neon-shell .bg-slate-50,
html.theme-light .bg-slate-50 {
  background: var(--paper) !important;
}
html.theme-light .neon-shell .bg-slate-100,
html.theme-light .bg-slate-100 {
  background: var(--paper-sunken) !important;
}
html.theme-light .neon-shell .bg-teal-50,
html.theme-light .bg-teal-50 {
  background: var(--orange-soft) !important;
}
html.theme-light .neon-shell .bg-teal-100,
html.theme-light .bg-teal-100 {
  background: var(--orange-light) !important;
}

html.theme-light [class*="bg-[var(--paper)]"],
html.theme-light [class*="bg-[var(--paper)]"],
html.theme-light [class*="bg-[var(--paper)]"],
html.theme-light [class*="bg-[var(--paper)]"] {
  background: var(--paper-sunken) !important;
  color: var(--ink) !important;
}

html.theme-light [class*="border-[var(--orange-primary)]"],
html.theme-light [class*="border-cyan-400"]:not([class*="hover:border-cyan-400"]) {
  border-color: var(--rule) !important;
}

html.theme-light [class*="text-[var(--ink-muted)]"],
html.theme-light [class*="text-cyan-300"],
html.theme-light [class*="text-cyan-400"]:not([class*="hover:text-cyan-400"]) {
  color: var(--orange-primary) !important;
}

html.theme-light [class*="ring-[var(--orange-primary)]"],
html.theme-light [class*="ring-[var(--orange-primary)]"] {
  --tw-ring-color: var(--orange-vibrant) !important;
}

html.theme-light [class*="bg-[var(--orange-primary)]"],
html.theme-light [class*="bg-[var(--orange-primary)]"] {
  background-color: var(--orange-light) !important;
  color: var(--orange-primary) !important;
}

html.theme-light .border-slate-100,
html.theme-light .border-slate-200,
html.theme-light .neon-shell .border-slate-100,
html.theme-light .neon-shell .border-slate-200,
html.theme-light .neon-shell .border {
  border-color: var(--rule) !important;
}
html.theme-light .border-teal-300,
html.theme-light .neon-shell .border-teal-300 {
  border-color: var(--rule) !important;
}

html.theme-light .h-px,
html.theme-light .neon-shell .h-px,
html.theme-light .neon-shell .bg-slate-100.h-px {
  background: var(--rule) !important;
}

/* ── ورودی‌ها، تکست‌اریا و کامپوزر ── */
html.theme-light input,
html.theme-light textarea,
html.theme-light select,
html.theme-light .neon-input,
html.theme-light .neon-shell input,
html.theme-light .neon-shell textarea,
html.theme-light .neon-shell select {
  background: var(--paper-raised) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}

html.theme-light input.bg-transparent,
html.theme-light textarea.bg-transparent,
html.theme-light .neon-shell input.bg-transparent,
html.theme-light .neon-shell textarea.bg-transparent {
  background: transparent !important;
  border: none !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder,
html.theme-light .neon-input::placeholder,
html.theme-light .neon-shell input::placeholder,
html.theme-light .neon-shell textarea::placeholder {
  color: var(--ink-muted) !important;
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light .neon-input:focus,
html.theme-light .neon-shell input:focus,
html.theme-light .neon-shell textarea:focus {
  border-color: var(--orange-vibrant) !important;
  box-shadow: 0 0 0 3px rgba(237, 124, 34, 0.18) !important;
}

html.theme-light .chat-input-bar {
  background: var(--paper-raised) !important;
  border: 1.5px solid var(--rule) !important;
  box-shadow: 0 4px 20px rgba(237, 124, 34, 0.08) !important;
}

/* ── دکمه‌ها و المان‌های اکشن ── */
html.theme-light .neon-btn,
html.theme-light .neon-shell .cafe-header-primary-button,
html.theme-light .neon-shell .cafe-main-selector,
html.theme-light .neon-shell button[type="submit"].bg-secondary-color,
html.theme-light .neon-shell .bg-secondary-color,
html.theme-light .bg-secondary-color {
  background-image: var(--orange-grad) !important;
  color: var(--paper-raised) !important;
  box-shadow: 0 6px 18px rgba(237, 124, 34, 0.28) !important;
  border: 0 !important;
}

html.theme-light .neon-btn:hover,
html.theme-light .bg-secondary-color:hover {
  box-shadow: 0 8px 24px rgba(237, 124, 34, 0.38) !important;
  filter: brightness(1.05) !important;
}

html.theme-light .neon-btn-outline {
  color: var(--orange-primary) !important;
  font-weight: 800;
  border: 1.5px solid var(--orange-primary) !important;
  background: transparent !important;
  box-shadow: 0 0 10px rgba(237, 124, 34, 0.12) !important;
}
html.theme-light .neon-btn-outline:hover {
  background: rgba(237, 124, 34, 0.08) !important;
  box-shadow: 0 0 18px rgba(237, 124, 34, 0.22) !important;
}

html.theme-light .neon-card {
  position: relative;
  background: var(--paper-raised) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .neon-card::before {
  display: none !important;
}

html.theme-light .neon-chip {
  background: var(--orange-soft) !important;
  border: 1px solid var(--rule) !important;
  color: var(--orange-hover) !important;
}

html.theme-light .neon-link {
  color: var(--orange-primary) !important;
}
html.theme-light .neon-link:hover {
  color: var(--orange-hover) !important;
  text-shadow: 0 0 8px rgba(237, 124, 34, 0.3);
}

/* ── حباب‌های گفتگو در چت ── */
/* پیام کاربر */
html.theme-light .chat-message-row.msg-user .chat-message-bubble {
  background: linear-gradient(135deg, var(--orange-vibrant) 0%, var(--orange-primary) 100%) !important;
  color: var(--paper-raised) !important;
  box-shadow: 0 4px 14px rgba(237, 124, 34, 0.22) !important;
}
html.theme-light .chat-message-row.msg-user .chat-message-bubble * {
  color: var(--paper-raised) !important;
}

/* پیام هوش مصنوعی */
html.theme-light .chat-message-row.msg-ai .chat-message-bubble {
  background: var(--paper-raised) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light .chat-message-row.msg-ai .chat-message-bubble p {
  color: var(--ink) !important;
}

/* انیمیشن استریم پاسخ */
html.theme-light .ai-streaming-border::before {
  background: var(--paper-raised) !important;
  backdrop-filter: none !important;
}
html.theme-light .ai-streaming-border::after {
  background: linear-gradient(90deg, var(--orange-vibrant), var(--orange-vibrant), var(--orange-primary), var(--orange-vibrant)) !important;
  background-size: 300% 100% !important;
}

/* باکس تفکر هوش مصنوعی (Deep Thinking) */
html.theme-light .chat-thinking-box,
html.theme-light details.chat-thinking-details {
  background: var(--orange-soft) !important;
  border: 1px solid var(--rule) !important;
  color: var(--orange-hover) !important;
}
html.theme-light .chat-thinking-box summary,
html.theme-light details.chat-thinking-details summary {
  color: var(--orange-hover) !important;
}

/* ── کارت‌های متخصصان (Experts) ── */
html.theme-light .expert-card,
html.theme-light .expert-picker-card {
  background: var(--paper-raised) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light .expert-card:hover,
html.theme-light .expert-picker-card:hover {
  border-color: var(--orange-vibrant) !important;
  background: var(--orange-soft) !important;
  box-shadow: 0 4px 14px rgba(237, 124, 34, 0.12) !important;
}
html.theme-light .expert-badge {
  background: var(--orange-soft) !important;
  border: 1px solid var(--rule) !important;
  color: var(--orange-primary) !important;
}

/* کارت انیشتین */
html.theme-light .expert-router-card {
  border-color: var(--orange-vibrant) !important;
  background: linear-gradient(180deg, var(--orange-soft) 0%, var(--orange-light) 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12) !important;
}
html.theme-light .expert-router-name {
  color: var(--orange-hover) !important;
}
html.theme-light .expert-router-icon {
  background: var(--orange-vibrant) !important;
  color: var(--orange-primary) !important;
}

/* ── پاپ‌آپ‌ها، مدال‌ها و کارت حساب کاربری ── */
html.theme-light .cafe-account-popup,
html.theme-light #mobSidebarPopup,
html.theme-light #mobSettingsPopup,
html.theme-light #mobSearchPopup,
html.theme-light #mobileDrawer {
  background: var(--paper-raised) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.12) !important;
  color: var(--ink) !important;
}

/* کارت‌های درون صفحه تنظیمات */
html.theme-light [style*="background:rgba(18,24,48,"],
html.theme-light [style*="background: rgba(18,24,48,"],
html.theme-light [style*="background:rgba(18, 24, 48,"],
html.theme-light [style*="background: rgba(18, 24, 48,"] {
  background: var(--paper-raised) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light [style*="background:rgba(8,12,28,"],
html.theme-light [style*="background: rgba(8,12,28,"] {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
}

/* هدرهای رنگی گرادیانی در تنظیمات و مدال پروفایل */
html.theme-light [style*="background:linear-gradient(135deg,var(--orange-hover) 0%,var(--orange-primary) 60%,var(--orange-primary) 100%)"],
html.theme-light [style*="background:linear-gradient(135deg,rgb(8,75,94) 0%,rgb(37,144,184) 100%)"] {
  background: linear-gradient(135deg, var(--orange-vibrant) 0%, var(--orange-primary) 50%, var(--orange-hover) 100%) !important;
}

/* ── اسکرول‌بار در تم روشن ── */
html.theme-light ::-webkit-scrollbar-thumb {
  background: var(--orange-vibrant) !important;
  border-radius: 8px !important;
}
html.theme-light * {
  scrollbar-color: var(--orange-vibrant) transparent !important;
}


/* ============================================================================
   Minimal day mode
   The reference is a printed page: flat paper, one accent, nothing that glows.
   Day mode therefore drops the chrome the dark shell needs to read as a
   surface — glows, gradient washes, decorative rings — and the composer keeps
   only the controls that do something.
   ========================================================================= */

/* ── Composer: keyboard hints are decoration, not controls ── */
html.theme-light .chat-input-bar kbd,
html.theme-light .chat-input-bar kbd + *,
html.theme-light .chat-input-bar span:has(> kbd) {
  display: none !important;
}

/* ── Nothing glows on paper ── */
html.theme-light .neon-shell *,
html.theme-light .chat-input-bar,
html.theme-light .chat-input-bar * {
  text-shadow: none !important;
}

html.theme-light .neon-glow,
html.theme-light .neon-shell [class*="shadow-cyan"],
html.theme-light .neon-shell [class*="shadow-teal"],
html.theme-light .neon-shell [class*="drop-shadow"] {
  box-shadow: none !important;
  filter: none !important;
}

/* ── Flat surfaces: one hairline instead of a gradient and a ring ── */
html.theme-light .chat-input-bar > div {
  background: var(--paper-raised) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: none !important;
}

html.theme-light .chat-input-bar > div:focus-within {
  border-color: var(--orange-primary) !important;
  box-shadow: none !important;
}

/* ── Composer icons: quiet until touched ── */
html.theme-light .chat-input-bar button i {
  color: var(--ink-muted) !important;
}

html.theme-light .chat-input-bar button:hover {
  background: var(--orange-soft) !important;
}

html.theme-light .chat-input-bar button:hover i {
  color: var(--orange-primary) !important;
}

/* ── The send button is the one thing that carries the accent ── */
html.theme-light .chat-input-bar button[title="ارسال"],
html.theme-light .chat-input-bar .bg-secondary-color {
  background: var(--orange-primary) !important;
  box-shadow: none !important;
}

html.theme-light .chat-input-bar button[title="ارسال"]:hover,
html.theme-light .chat-input-bar .bg-secondary-color:hover {
  background: var(--orange-hover) !important;
}

/* The message bubbles are styled further down, against `.chat-message-bubble`
   itself. A `> div` rule here used to stand in for that, but the column's
   direct children are also the attachment strip, the reasoning panel and the
   action row — so the action row was given a full-width plate under every
   message, orange under the user's and bordered white under the assistant's. */

/* ── Decorative background layers the dark shell paints ── */
html.theme-light .neon-shell::before,
html.theme-light .neon-shell::after,
html.theme-light .shell-main-panel::before,
html.theme-light .shell-main-panel::after {
  display: none !important;
}

/* No blanket animation kill here. Reduced motion is a browser-wide preference
   and the dark theme honours it through its own rules; silencing only the light
   theme meant the same machine animated at night and sat still by day. */


/* ============================================================================
   Day-mode corrections
   base_minimal.html carries an inline <style> block whose nav, topbar and
   accent rules are written for the dark shell and marked !important. An
   external sheet cannot out-weigh an equal-specificity !important rule that
   comes later in the document, so each of these raises specificity rather than
   simply restating the property.
   ========================================================================= */

/* ── 1. Active nav item: the icon went white and vanished on paper ── */
html.theme-light .left-bar-active,
html.theme-light .cafe-nav-active,
html.theme-light .shell-nav-active,
html.theme-light body .shell-nav-active,
html.theme-light body .left-bar-active {
  background: var(--orange-light) !important;
  box-shadow: inset 0 0 0 1px rgba(237, 124, 34, 0.45) !important;
}

html.theme-light .left-bar-active i,
html.theme-light .left-bar-active span,
html.theme-light .left-bar-active p,
html.theme-light .cafe-nav-active i,
html.theme-light .cafe-nav-active span,
html.theme-light .cafe-nav-active p,
html.theme-light body .shell-nav-active i,
html.theme-light body .shell-nav-active span,
html.theme-light body .shell-nav-active p {
  color: var(--orange-primary) !important;
  -webkit-text-fill-color: var(--orange-primary) !important;
}

/* An icon shipped as an image was inverted to white for the dark shell. */
html.theme-light .left-bar-active img,
html.theme-light .left-bar-btn img,
html.theme-light .shell-nav-active img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(82%) saturate(752%)
          hue-rotate(350deg) brightness(142%) contrast(86%) !important;
}

/* ── 2. Hover states were invisible: white on paper ── */
html.theme-light .shell-nav-item:hover,
html.theme-light .left-bar-btn:hover,
html.theme-light body .shell-nav-item:hover {
  background: var(--orange-soft) !important;
  color: var(--orange-primary) !important;
}

html.theme-light .shell-nav-item:hover i,
html.theme-light .shell-nav-item:hover span,
html.theme-light .shell-nav-item:hover p,
html.theme-light .left-bar-btn:hover i {
  color: var(--orange-primary) !important;
  -webkit-text-fill-color: var(--orange-primary) !important;
}

html.theme-light .neon-link:hover,
html.theme-light .mini-crumb a:hover {
  color: var(--orange-primary) !important;
  text-shadow: none !important;
}

/* ── 3. Topbar title was #fff from the inline block ── */
html.theme-light .mini-section {
  color: var(--ink) !important;
}

html.theme-light .mini-crumb,
html.theme-light .mini-crumb a,
html.theme-light .neon-link {
  color: var(--ink-muted) !important;
}

/* ── 4. Leftover cyan / violet / pink accents ── */
html.theme-light [class*="text-cyan"]:not([class*="hover:text-cyan"]),
html.theme-light [class*="text-teal"]:not([class*="hover:text-teal"]),
html.theme-light [class*="text-violet"],
html.theme-light [class*="text-indigo"],
html.theme-light [class*="text-sky"],
html.theme-light [class*="text-purple"] {
  color: var(--orange-primary) !important;
}

html.theme-light [class*="border-cyan"]:not([class*="hover:border-cyan"]),
html.theme-light [class*="border-teal"]:not([class*="hover:border-teal"]):not([class*="focus:border-teal"]):not([class*="focus-within:border-teal"]),
html.theme-light [class*="border-violet"]:not([class*="hover:border-violet"]),
html.theme-light [class*="border-indigo"]:not([class*="hover:border-indigo"]),
html.theme-light [class*="border-purple"] {
  border-color: rgba(237, 124, 34, 0.45) !important;
}

html.theme-light [class*="bg-cyan"],
html.theme-light [class*="bg-teal"]:not([class*="hover:bg-teal"]),
html.theme-light [class*="bg-violet"],
html.theme-light [class*="bg-indigo"]:not([class*="hover:bg-indigo"]),
html.theme-light [class*="bg-purple"] {
  background-color: var(--orange-light) !important;
}

html.theme-light [class*="shadow-cyan"],
html.theme-light [class*="shadow-violet"],
html.theme-light .animated-border-btn {
  box-shadow: none !important;
}

/* The gradient brand text reads as a smear on paper; make it solid ink. */
html.theme-light .neon-title {
  background: none !important;
  -webkit-text-fill-color: var(--orange-primary) !important;
  color: var(--orange-primary) !important;
  filter: none !important;
}

/* ── 5. Destructive buttons carried inline pink and read as disabled ── */
html.theme-light button[title="حذف تصویر"],
html.theme-light button[title="حذف ویدئو"],
html.theme-light .neon-shell button[style*="rgba(236,72,153"],
html.theme-light button[style*="rgba(236,72,153"] {
  background: #fdecef !important;
  border: 1px solid #e7879b !important;
  color: #b4243f !important;
}

html.theme-light button[style*="rgba(236,72,153"]:hover {
  background: #fbd9df !important;
  color: #8f1a31 !important;
}

/* ── 6. Settings: the profile card and its icons were blue ── */
html.theme-light [class*="from-cyan"],
html.theme-light [class*="from-blue"],
html.theme-light [class*="from-indigo"],
html.theme-light [class*="from-violet"],
html.theme-light [class*="via-violet"],
html.theme-light [class*="to-violet"],
html.theme-light [class*="to-purple"],
html.theme-light [class*="to-indigo"] {
  background-image: var(--orange-grad) !important;
}

/* These gradients are inline style attributes, not classes, so they are matched
   on the attribute itself — a class selector never reaches them. */
html.theme-light [style*="linear-gradient(135deg,#0e7490"],
html.theme-light [style*="linear-gradient(110deg,#22d3ee"],
html.theme-light [style*="linear-gradient"][style*="#6366f1"],
html.theme-light [style*="linear-gradient"][style*="#a855f7"] {
  background: var(--orange-grad) !important;
}

/* Plain coloured text — the wallet balance — keeps its role and only changes
   hue. Matching it as a gradient painted a background it never asked for. */
html.theme-light [style*="color:#a855f7"],
html.theme-light [style*="color: #a855f7"],
html.theme-light [style*="color:#6366f1"],
html.theme-light [style*="color:#22d3ee"] {
  background: none !important;
  background-image: none !important;
  color: var(--orange-primary) !important;
  -webkit-text-fill-color: var(--orange-primary) !important;
}

/* Success green stays green — it means something. Only its glow goes. */
html.theme-light [style*="linear-gradient(135deg, #10b981"] {
  box-shadow: none !important;
}

html.theme-light .neon-shell select,
html.theme-light select {
  color: var(--ink) !important;
  background: var(--paper-raised) !important;
  border-color: var(--rule) !important;
}

/* ── 7. The router card: gold on paper is unreadable, so it wears the brand ── */
html.theme-light .expert-router-card {
  border-color: rgba(237, 124, 34, 0.55) !important;
  background: var(--orange-soft) !important;
  box-shadow: none !important;
}

html.theme-light .expert-router-card:hover,
html.theme-light .expert-router-card.is-selected {
  border-color: var(--orange-primary) !important;
  background: var(--orange-light) !important;
}

html.theme-light .expert-router-name {
  color: var(--ink) !important;
}

/* The icon sits on a filled orange tile, so it is white for contrast. */
html.theme-light .expert-router-icon {
  background: var(--orange-primary) !important;
  color: var(--paper-raised) !important;
}

html.theme-light .expert-router-check {
  color: var(--orange-primary) !important;
}


/* ============================================================================
   Day mode: mobile drawer, performance mode, and the remaining dark chrome
   ========================================================================= */

/* ── Mobile drawer: it kept the dark shell's surface and cyan active row ── */
html.theme-light #mobileDrawer,
html.theme-light .mobile-drawer,
html.theme-light [id*="mobileDrawer"] {
  background: var(--paper-raised) !important;
  border-color: var(--rule) !important;
}

html.theme-light .mobile-drawer-item {
  color: var(--ink-muted) !important;
}

html.theme-light .mobile-drawer-item i,
html.theme-light .mobile-drawer-item span {
  color: inherit !important;
}

html.theme-light .mobile-drawer-item:hover {
  background: var(--orange-soft) !important;
  color: var(--orange-primary) !important;
}

html.theme-light .mobile-drawer-active,
html.theme-light .mobile-drawer-item.mobile-drawer-active {
  background: var(--orange-light) !important;
  color: var(--orange-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(237, 124, 34, 0.45) !important;
}

html.theme-light .mobile-drawer-active i,
html.theme-light .mobile-drawer-active span {
  color: var(--orange-primary) !important;
  -webkit-text-fill-color: var(--orange-primary) !important;
}

/* ── Performance mode: its rules repaint the shell dark, and they are inline
      and !important, so day mode has to answer each one. Without this the
      panels went dark while the page stayed on paper. ── */
html.theme-light.perf-mode,
html.theme-light.perf-mode body,
html.theme-light.perf-mode .neon-card,
html.theme-light.perf-mode .neon-topbar,
html.theme-light.perf-mode .neon-rail,
html.theme-light.perf-mode .shell-main-panel,
html.theme-light.perf-mode .cafe-shell-sidebar,
html.theme-light.perf-mode #rightSidebar,
html.theme-light.perf-mode .bg-glass-panel {
  background: var(--paper-raised) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.theme-light.perf-mode,
html.theme-light.perf-mode body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

html.theme-light.perf-mode .neon-card,
html.theme-light.perf-mode .neon-topbar,
html.theme-light.perf-mode .neon-rail {
  border: 1px solid var(--rule) !important;
}

/* ── Segmented controls built from dark slate ── */
html.theme-light .bg-slate-900\/60,
html.theme-light [class*="bg-slate-900"]:not([class*="hover:bg-slate-900"]),
html.theme-light [class*="bg-slate-800"]:not([class*="hover:bg-slate-800"]) {
  background-color: var(--paper-sunken) !important;
}

html.theme-light [class*="border-slate-700"],
html.theme-light [class*="border-slate-600"] {
  border-color: var(--rule) !important;
}

/* The unselected half of a segmented control was slate-400 on slate-900 and
   disappeared once the track turned to paper. */
/* Only the unselected half is muted. Greying every button in the track is what
   made the theme picker stop showing which theme was picked. */
html.theme-light [class*="bg-slate-900"] button.text-slate-400,
html.theme-light [class*="bg-slate-800"]:not([class*="hover:bg-slate-800"]) button.text-slate-400,
html.theme-light .neon-card .text-slate-400 {
  color: var(--ink-muted) !important;
}

/* The selected half carries the accent and a filled track of its own. */
html.theme-light [class*="bg-slate-900"] button[class*="font-bold"],
html.theme-light [class*="bg-slate-800"]:not([class*="hover:bg-slate-800"]) button[class*="font-bold"] {
  background-color: var(--orange-primary) !important;
  border-color: var(--orange-primary) !important;
  color: var(--paper-raised) !important;
}

html.theme-light [class*="bg-slate-900"] button[class*="font-bold"] i,
html.theme-light [class*="bg-slate-900"] button[class*="font-bold"] span {
  color: var(--paper-raised) !important;
  -webkit-text-fill-color: var(--paper-raised) !important;
}

html.theme-light [class*="bg-slate-900"] button:hover {
  color: var(--orange-primary) !important;
}

/* ── Destructive actions were tinted for a dark surface and read as disabled ── */
html.theme-light [class*="bg-rose-500/10"],
html.theme-light [class*="bg-rose-500/20"],
html.theme-light [class*="text-rose-300"],
html.theme-light [class*="text-rose-400"] {
  background-color: #fdecef !important;
  border-color: #e7879b !important;
  color: #b4243f !important;
}

html.theme-light [class*="bg-rose-500/10"]:hover,
html.theme-light [class*="text-rose-300"]:hover {
  background-color: #fbd9df !important;
  border-color: #d9556f !important;
  color: #8f1a31 !important;
}

html.theme-light [class*="text-rose-300"] i,
html.theme-light [class*="bg-rose-500/10"] i {
  color: inherit !important;
}


/* ============================================================================
   Day mode on the public landing page
   ========================================================================= */

/* The hero HUD is drawn in cyan and indigo against a dark page. On paper the
   core kept its glow while the rings faded out, so the whole thing reads as a
   smudge. Each layer is restated in the brand orange with the glow removed —
   a halo needs darkness behind it to be a halo. */
html.theme-light .jarvis-core {
  background: var(--orange-primary) !important;
  box-shadow: 0 0 18px rgba(237, 124, 34, 0.35) !important;
}

html.theme-light .hud-pulse {
  border-color: rgba(237, 124, 34, 0.7) !important;
}

html.theme-light .jarvis-ring-1 {
  border-top-color: var(--orange-primary) !important;
  border-bottom-color: var(--orange-primary) !important;
}

html.theme-light .jarvis-ring-2 {
  border-left-color: rgba(237, 124, 34, 0.6) !important;
  border-right-color: rgba(237, 124, 34, 0.6) !important;
}

html.theme-light .jarvis-ring-3 {
  border-top-color: rgba(242, 144, 63, 0.7) !important;
  border-bottom-color: rgba(242, 144, 63, 0.7) !important;
}

/* Hover restates the same colours; without this the ring snapped back to cyan
   on the way in, which is the flicker you see on the way through. */
html.theme-light #hero-section:hover .jarvis-core {
  background: var(--orange-hover) !important;
  box-shadow: 0 0 26px rgba(237, 124, 34, 0.45) !important;
}

html.theme-light #hero-section:hover .jarvis-ring-1,
html.theme-light #hero-section:hover .jarvis-ring-2,
html.theme-light #hero-section:hover .jarvis-ring-3 {
  border-color: var(--orange-primary) !important;
  box-shadow: none !important;
}

html.theme-light .jarvis-hud {
  filter: none !important;
}

/* The hero heading sets its colour inline with !important. */
html.theme-light h1 [style*="color: #22d3ee"],
html.theme-light [style*="color: #22d3ee"] {
  color: var(--orange-primary) !important;
  text-shadow: none !important;
}

/* Landing cards and section text still carried the dark shell's palette. */
html.theme-light .neon-card .text-white,
html.theme-light .neon-shell .text-white,
html.theme-light h1,
html.theme-light h2,
html.theme-light h3 {
  color: var(--ink) !important;
}

html.theme-light .text-slate-400,
html.theme-light .text-slate-300,
html.theme-light .neon-muted {
  color: var(--ink-muted) !important;
}

/* A round switch reads as a switch; the landing bar is all pills.
   Sized here rather than through utility classes: the landing include asked for
   `w-[38px]`, which was never compiled, so the button had a 38px height and a
   width that collapsed to its icon. Geometry that matters should not depend on
   whether a generated stylesheet is current. */
html.theme-light .cafe-theme-toggle,
.cafe-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px !important;
}

html.theme-light .cafe-theme-toggle {
  border-color: var(--rule) !important;
  background: var(--paper-raised) !important;
}

html.theme-light .cafe-theme-toggle:hover {
  border-color: var(--orange-primary) !important;
  background: var(--orange-soft) !important;
}


/* ============================================================================
   Login page
   auth.css takes every colour from :root variables, so day mode only has to
   redefine those. Restating its rules would have meant maintaining the page
   twice.
   ========================================================================= */
html.theme-light .auth-page,
html.theme-light.auth-host,
html.theme-light body.auth-page {
  --neon-cyan: var(--orange-primary);
  --neon-blue: var(--orange-vibrant);
  --neon-violet: var(--orange-hover);
  --neon-pink: var(--orange-vibrant);
  --neon-grad: var(--orange-grad);
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  --bg-0: #f2f2f2;
  --bg-1: #ebebeb;
  --card: #fbfbfb;
  --border: #e0e0e0;
  --error: #b4243f;
  --glow-cyan: 0 0 0 3px rgba(237, 124, 34, 0.18);
  --glow-violet: 0 0 0 3px rgba(237, 124, 34, 0.2);

  background: #f2f2f2 !important;
  color: #1c1c1c !important;
}

/* The two coloured blooms behind the card are tuned for a dark ground. */
html.theme-light .auth-page::before,
html.theme-light .auth-page::after {
  opacity: 0.28 !important;
  background: radial-gradient(circle, rgba(237, 124, 34, 0.45), transparent 60%) !important;
}

html.theme-light .auth-card {
  background: #fbfbfb !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.06) !important;
}

/* A gradient sheen along the card's top edge, invisible on paper. */
html.theme-light .auth-card::before {
  opacity: 0.5 !important;
}

html.theme-light .auth-logo strong {
  background: none !important;
  -webkit-text-fill-color: var(--orange-primary) !important;
  color: var(--orange-primary) !important;
}

/* Alpine hides x-cloak elements once it boots; until then only CSS can.
   Lives here because this stylesheet is linked by every layout. */
[x-cloak] { display: none !important; }

/* ============================================================================
   Arbitrary-value hex utilities
   Tailwind classes like `bg-[#080c1c]/50` are a second source of dark colour
   alongside inline styles, and the earlier rules here only matched the latter.
   Matched on the class attribute rather than the escaped class name so one
   rule covers every opacity suffix.
   ========================================================================= */

/* Panel and segmented-track grounds. */
html.theme-light [class*="bg-[#080c1c]"],
html.theme-light [class*="bg-[#10172d]"],
html.theme-light [class*="bg-[#0d1730]"],
html.theme-light [class*="bg-[#0b1123]"] {
  background-color: var(--paper-sunken) !important;
}

/* The :not() guards matter: `hover:border-[#22d3ee]` contains the same
   substring, and matching it would paint a hover-only colour permanently. */
html.theme-light [class*="border-[#78a0ff]"],
html.theme-light [class*="border-[#22d3ee]"]:not([class*="hover:border-[#22d3ee]"]),
html.theme-light [class*="border-[#a855f7]"]:not([class*="hover:border-[#a855f7]"]) {
  border-color: var(--rule) !important;
}

html.theme-light [class*="hover:border-[#22d3ee]"]:hover,
html.theme-light [class*="hover:border-[#a855f7]"]:hover {
  border-color: var(--orange-primary) !important;
}

/* Unselected track labels. */
html.theme-light [class*="text-[#9fb3d4]"],
html.theme-light [class*="text-[#84def7]"]:not([class*="hover:text-[#84def7]"]) {
  color: var(--ink-muted) !important;
}

html.theme-light [class*="text-[#22d3ee]"] {
  color: var(--orange-primary) !important;
}

/* The selected chip in a segmented track. It carries both a tinted background
   and a ring, and `text-white` on top; keeping the fill solid is what lets the
   white label stay readable and the selection stay obvious. */
html.theme-light [class*="bg-[#22d3ee]"],
html.theme-light [class*="bg-[#a855f7]"] {
  background-color: var(--orange-primary) !important;
  color: #ffffff !important;
}

html.theme-light [class*="hover:bg-[#84def7]"]:hover,
html.theme-light [class*="hover:text-[#84def7]"]:hover {
  background-color: var(--orange-soft) !important;
  color: var(--orange-primary) !important;
}

html.theme-light [class*="ring-[#22d3ee]"],
html.theme-light [class*="ring-[#a855f7]"] {
  --tw-ring-color: var(--orange-hover) !important;
}

/* The file-input label keeps its travelling border, in warm tones. The inner
   pair of stops is the button's own fill; the outer pair is the moving edge. */
html.theme-light .animated-border-btn {
  background:
    linear-gradient(90deg, var(--paper-raised), var(--paper-raised)),
    linear-gradient(90deg, #ed7c22, #f2903f, #f7b267, #ed7c22) !important;
  background-size: 100% 100%, 300% 100% !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  color: var(--orange-hover) !important;
}

html.theme-light .animated-border-btn:hover {
  background-image:
    linear-gradient(90deg, var(--orange-soft), var(--orange-soft)),
    linear-gradient(90deg, #ed7c22, #f2903f, #f7b267, #ed7c22) !important;
}

html.theme-light.perf-mode .animated-border-btn {
  background: var(--orange-soft) !important;
  border-color: var(--orange-primary) !important;
}


/* ============================================================================
   Conversation list
   `hover:bg-slate-800` shares a substring with `bg-slate-800`, so the rule
   above used to paint these rows grey at rest and leave nothing for the hover.
   The hover is the accent here — a list is read by sweeping it.
   ========================================================================= */
html.theme-light [class*="hover:bg-slate-800"]:hover,
html.theme-light [class*="hover:bg-slate-900"]:hover,
html.theme-light [class*="hover:bg-amber-500"]:hover {
  background-color: var(--orange-primary) !important;
}

/* The row's own children already flip to white on group hover; the muted ones
   were tuned against slate and go dim on orange. */
html.theme-light .group:hover .group-hover\:text-white,
html.theme-light .group:hover [class*="group-hover:text-slate-300"],
html.theme-light .group:hover [class*="group-hover:text-slate-200"] {
  color: #ffffff !important;
}

/* The leading badge inverts to a white chip; keep its glyph legible on it. */
html.theme-light .group:hover [class*="group-hover:bg-white"] {
  background-color: #ffffff !important;
}

html.theme-light .group:hover [class*="group-hover:text-slate-800"] {
  color: var(--orange-hover) !important;
}

/* The pin and delete controls sit on orange once the row is hovered. */
html.theme-light .group:hover button[class*="text-slate-300"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.theme-light .group:hover button[class*="text-slate-300"]:hover {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* The active row is not a hover state and must stay distinct from one. */
html.theme-light [class*="bg-teal-100"]:not([class*="hover:bg-teal-100"]) {
  background-color: var(--orange-soft) !important;
}

html.theme-light [class*="bg-teal-100"]:not([class*="hover:bg-teal-100"]) .text-slate-700 {
  color: var(--orange-hover) !important;
}

html.theme-light [class*="bg-teal-600"],
html.theme-light [class*="bg-amber-500"]:not([class*="hover:bg-amber-500"]) {
  background-color: var(--orange-primary) !important;
  color: #ffffff !important;
}

/* A pinned row is tinted at rest, so it needs a tint of its own rather than
   the plain paper the other rows sit on. */
html.theme-light [class*="bg-amber-50"]:not([class*="bg-amber-500"]) {
  background-color: rgba(237, 124, 34, 0.1) !important;
}

/* ============================================================================
   State variants
   The rules above match on the class attribute, which a `hover:` variant
   shares as a substring — so an unguarded rule painted the hover colour
   permanently and left nothing to hover into. They now carry :not() guards,
   and the states they were swallowing are restored here in the brand palette.
   ========================================================================= */
html.theme-light [class*="hover:bg-teal"]:hover,
html.theme-light [class*="hover:bg-indigo"]:hover {
  background-color: var(--orange-primary) !important;
  color: #ffffff !important;
}

html.theme-light [class*="hover:border-cyan"]:hover,
html.theme-light [class*="hover:border-teal"]:hover,
html.theme-light [class*="hover:border-indigo"]:hover,
html.theme-light [class*="hover:border-violet"]:hover,
html.theme-light [class*="focus:border-teal"]:focus,
html.theme-light [class*="focus-within:border-teal"]:focus-within {
  border-color: var(--orange-primary) !important;
}

html.theme-light [class*="hover:text-cyan"]:hover,
html.theme-light [class*="hover:text-teal"]:hover {
  color: var(--orange-hover) !important;
}

/* ============================================================================
   Performance mode, second pass
   The earlier block answered some of neon-shell's dark repaint but not all of
   it, so switching perf mode on turned the header and the panels dark while
   the page stayed on paper. These selectors mirror neon-shell's own — the
   `.neon-shell` descendant included — so specificity matches rule for rule
   instead of relying on source order.
   ========================================================================= */
html.theme-light.perf-mode .neon-shell,
html.theme-light.perf-mode .neon-shell .shell-main-panel {
  background-color: var(--paper) !important;
  background-image: none !important;
}

html.theme-light.perf-mode .neon-shell #rightSidebar,
html.theme-light.perf-mode .neon-shell .cafe-shell-header,
html.theme-light.perf-mode .neon-shell .bg-glass-panel,
html.theme-light.perf-mode .neon-shell .bg-white,
html.theme-light.perf-mode .neon-shell .chat-main-wrapper,
html.theme-light.perf-mode .neon-shell .sidebar-chat-section {
  background: var(--paper-raised) !important;
}

html.theme-light.perf-mode .neon-shell .chat-topbar {
  background: var(--paper) !important;
}

/* ── The active nav item ──────────────────────────────────────────────────
   Its cyan fill and glow are the blue left in the sidebar. */
html.theme-light .neon-shell .left-bar-active,
html.theme-light .neon-shell .cafe-nav-active,
html.theme-light .neon-shell .shell-nav-active {
  background: var(--orange-soft) !important;
  box-shadow: 0 0 0 1px var(--orange-primary) !important;
}

html.theme-light .neon-shell .shell-nav-item.shell-nav-active {
  box-shadow: 0 0 0 1px var(--orange-primary) !important;
  color: var(--orange-primary) !important;
}



html.theme-light .neon-shell .text-primary-color,
html.theme-light .neon-shell .sidebar-text,
html.theme-light .neon-shell .shell-nav-item i {
  color: var(--orange-primary) !important;
}

/* ── Text sitting on the profile banner ───────────────────────────────────
   That header keeps a solid orange gradient in day mode, so its labels stay
   white; the generic rule above would have turned them to ink on orange. */
html.theme-light [style*="linear-gradient(135deg,#0e7490"] .text-white,
html.theme-light [style*="linear-gradient(135deg,#0e7490"] h3,
html.theme-light [style*="linear-gradient(135deg,#0e7490"] .text-white\/60,
html.theme-light [style*="linear-gradient(135deg,#0e7490"] .text-white\/70,
html.theme-light [style*="linear-gradient(135deg,#0e7490"] .text-white\/80 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ============================================================================
   Navigation icons
   These are <img> elements, so their fill is baked into the file — eighteen of
   them carry #084B5E — and no colour property can reach it. The chain below
   flattens the artwork to black and rebuilds it as #ED7C22; it was solved
   against the filter primitives' own maths rather than eyeballed, and lands on
   rgb(237,124,34) exactly. invert() and sepia() stay within 0–100% because the
   browser clamps them.

   Scoped to the navigation chrome so avatars, uploads and generated images are
   never touched.
   ========================================================================= */
html.theme-light #mobileDrawer .mobile-drawer-item img,
html.theme-light #rightSidebar .sidebar-nav-rail img,
html.theme-light .cafe-shell-sidebar .shell-nav-item img,
html.theme-light .neon-shell .left-bar-btn img,
html.theme-light .neon-shell .sidebar-nav-rail img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(82%) saturate(752%)
          hue-rotate(350deg) brightness(142%) contrast(86%) !important;
}

/* ============================================================================
   Conversation row: the leading chip on hover
   At rest the chip is a filled orange square with a white glyph. Once the row
   itself turns orange that reads as a hole, so the chip inverts: white plate,
   orange glyph. Written against the chip's own classes rather than relying on
   the generic `bg-teal-600` rule, which paints it orange at any specificity it
   can reach.
   ========================================================================= */
html.theme-light .group:hover > div[class*="group-hover:bg-white"] {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.12) !important;
}

html.theme-light .group:hover > div[class*="group-hover:bg-white"],
html.theme-light .group:hover > div[class*="group-hover:bg-white"] i,
html.theme-light .group:hover > div[class*="group-hover:text-amber-500"] i {
  color: var(--orange-primary) !important;
}

/* The delete glyph is an <img>; `invert brightness-0` renders it black, which
   is as hard to read on orange as the teal was. */
html.theme-light .group:hover img[src$="Trash-Bin.svg"] {
  filter: brightness(0) invert(1) !important;
}

/* ============================================================================
   Landing page: the shine and the feature tiles
   ========================================================================= */

/* The section titles flicker with a coloured halo. It is driven entirely by
   custom properties, so day mode only redefines those — the animation, its
   timing and its keyframes stay exactly as they are. Kept faint: a glow that
   reads on a near-black ground turns into a smudge on paper. */
html.theme-light .features-title-flicker,
html.theme-light .models-title-flicker {
  --flicker-color: var(--orange-primary);
  --flicker-shadow: rgba(237, 124, 34, 0.30);
  --flicker-glow: rgba(237, 124, 34, 0.16);
  --flicker-dim: rgba(237, 124, 34, 0.12);
  --flicker-flash: rgba(237, 124, 34, 0.28);
}

html.theme-light .neon-btn {
  background: var(--orange-grad) !important;
  box-shadow: 0 8px 20px rgba(237, 124, 34, 0.22) !important;
}

html.theme-light .neon-btn:hover {
  box-shadow: 0 10px 26px rgba(237, 124, 34, 0.30) !important;
}

html.theme-light .neon-input:focus {
  border-color: var(--orange-primary) !important;
  box-shadow: 0 0 0 3px rgba(237, 124, 34, 0.16) !important;
}

/* ── Feature tiles ────────────────────────────────────────────────────────
   The gradient rule above fills these tiles with solid orange, while the glyph
   inside keeps the accent colour it was given — orange on orange. Any tile that
   takes the orange fill gets a white glyph. */
html.theme-light [class*="from-cyan"] i,
html.theme-light [class*="from-blue"] i,
html.theme-light [class*="from-indigo"] i,
html.theme-light [class*="from-violet"] i,
html.theme-light [class*="via-violet"] i,
html.theme-light [class*="to-violet"] i,
html.theme-light [class*="to-purple"] i,
html.theme-light [class*="to-indigo"] i,
html.theme-light [class*="from-cyan"] img,
html.theme-light [class*="from-indigo"] img {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ── The hero accent ──────────────────────────────────────────────────────
   Previously an inline style carrying !important, which outranks any
   stylesheet; it is a class now so both themes can reach it. */
html.theme-light .hero-accent {
  color: var(--orange-primary) !important;
  text-shadow: 0 0 14px rgba(237, 124, 34, 0.28) !important;
}

/* ── The sweep across a model card on hover ───────────────────────────────
   The sweep is white and blends with `screen`, which lightens — on a
   near-black card it reads as a highlight, on paper it is invisible. Orange
   with `multiply` darkens instead, so the same sweep reads on a light ground. */
html.theme-light #models .neon-card::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(237, 124, 34, 0.05) 22%,
    rgba(237, 124, 34, 0.30) 50%,
    rgba(237, 124, 34, 0.10) 72%,
    transparent 100%
  ) !important;
  mix-blend-mode: multiply !important;
}

/* The card hover strokes: the video column asks for pink and rose, which the
   earlier state rules did not name. */
html.theme-light [class*="hover:border-pink"]:hover,
html.theme-light [class*="hover:border-rose"]:hover,
html.theme-light [class*="hover:border-slate"]:hover,
html.theme-light [class*="hover:border-amber"]:hover,
html.theme-light [class*="hover:border-gray"]:hover {
  border-color: var(--orange-primary) !important;
}

/* The demo conversation's user bubble. The script used to assign this gradient
   as an inline style; the browser reserialises such a value to rgb(), so a
   selector written against the hex never matched what was actually in the DOM.
   It is a class now, and this is simply the day-mode version of it. */
html.theme-light .demo-bubble-user {
  background: var(--orange-grad) !important;
  color: #ffffff !important;
}

/* ============================================================================
   Model logos
   Five of the nine are drawn in pure white — openai, runway, flux and grok
   fill with #ffffff, midjourney strokes with it — which is legible on the dark
   card and invisible once the card becomes paper. They are <img> elements, so
   the colour is in the file and no property reaches it.

   Recoloured with the same chain used for the navigation icons: it flattens
   the artwork to black first, so it works from a white source just as well.
   The other four carry their own brand colour (DeepSeek, Llama and Seedance
   blue, Kling orange) and are left alone — a logo's colour is part of it.
   ========================================================================= */
html.theme-light img[src$="openai.svg"],
html.theme-light img[src$="runway.svg"],
html.theme-light img[src$="flux.svg"],
html.theme-light img[src$="grok.svg"],
html.theme-light img[src$="midjourney.svg"] {
  filter: brightness(0) saturate(100%) invert(33%) sepia(82%) saturate(752%)
          hue-rotate(350deg) brightness(142%) contrast(86%) !important;
}


/* The tick inside a filled badge. `.text-white` is turned to ink everywhere
   else in day mode, which is right on paper and wrong on a solid orange
   circle — the glyph vanished into it. */
html.theme-light [class*="bg-[#22d3ee]"] i,
html.theme-light [class*="bg-[#a855f7]"] i,
html.theme-light [class*="bg-[#22d3ee]"] .text-white,
html.theme-light [class*="bg-[#a855f7]"] .text-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Model picker search bar ─────────────────────────────────────────────── */
html.theme-light .model-search-bar {
  background: var(--paper) !important;
  border-color: var(--rule) !important;
}

html.theme-light .model-search-bar input {
  color: var(--ink) !important;
}

html.theme-light .model-search-bar input::placeholder {
  color: var(--ink-muted) !important;
}

/* Keep the expanded "all models" catalogue paper-white in day mode.  Its
   previous translucent dark nesting compounded into the large grey slab. */
html.theme-light .chat-model-group {
  background: var(--paper-raised) !important;
  border-color: var(--rule) !important;
}

html.theme-light .chat-model-group-body {
  background: var(--paper-raised) !important;
  border-top-color: var(--rule) !important;
}

html.theme-light .chat-model-card {
  background: #ffffff !important;
  border-color: var(--rule) !important;
  box-shadow: 0 1px 3px rgba(28, 28, 28, 0.06) !important;
}

html.theme-light .chat-model-card:hover {
  background: var(--orange-soft) !important;
  border-color: rgba(237, 124, 34, 0.35) !important;
}

/* ── Hover states that fill with orange ──────────────────────────────────────
   Two rules land on the same element here: one gives it the orange fill, the
   other recolours its text — and the text rule was winning, leaving orange on
   orange. The label and its glyph go white whenever the fill applies, and the
   descendant selectors matter because the label is a child <span>. */
html.theme-light [class*="hover:bg-teal"]:hover,
html.theme-light [class*="hover:bg-teal"]:hover *,
html.theme-light [class*="hover:bg-indigo"]:hover,
html.theme-light [class*="hover:bg-indigo"]:hover * {
  color: #ffffff !important;
}

/* …except where the descendant sits on its own light plate. The expert
   picker's field icons are on a white chip, and white on white made them
   disappear exactly when the row was pointed at. They take the fill colour
   instead, which is what the composer's buttons already do. */
html.theme-light [class*="hover:bg-teal"]:hover [class*="bg-white"],
html.theme-light [class*="hover:bg-teal"]:hover [class*="bg-white"] *,
html.theme-light [class*="hover:bg-indigo"]:hover [class*="bg-white"],
html.theme-light [class*="hover:bg-indigo"]:hover [class*="bg-white"] * {
  color: var(--orange-primary) !important;
}

/* The file-input label fills on hover rather than tinting, so its text has a
   plate to sit on. */
html.theme-light .animated-border-btn:hover,
html.theme-light .animated-border-btn:hover * {
  color: #ffffff !important;
}

html.theme-light .animated-border-btn:hover {
  background-image:
    linear-gradient(90deg, var(--orange-primary), var(--orange-primary)),
    linear-gradient(90deg, #ed7c22, #f2903f, #f7b267, #ed7c22) !important;
}

/* Video model prices need explicit theme colours. Inline dark-theme colours
   previously made these labels nearly invisible on the light picker. */
.model-price-badge,
html.theme-light .model-price-badge {
  color: #00618f !important;
  background: rgba(34, 211, 238, 0.10) !important;
}

html.theme-light .video-model-selected-check,
html.theme-light .video-model-selected-check i {
  color: #ffffff !important;
}

/* Video preview overlays: use a bright glass surface in day mode while
   preserving the original dark overlay in the dark theme. */
html.theme-light .video-card-play-badge {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--orange-primary) !important;
  border: 1px solid rgba(237, 124, 34, 0.32) !important;
  box-shadow: 0 6px 20px rgba(28, 28, 28, 0.16) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.theme-light .video-card-size-badge {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 4px 14px rgba(28, 28, 28, 0.13) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}