/* ═══════════════════════════════════════════════════════════════════
   Ondernemersbalie TPA – Brand Theme for LibreChat
   ═══════════════════════════════════════════════════════════════════
   Overrides LibreChat CSS custom properties to apply brand identity.
   Injected via entrypoint.sh into index.html at runtime.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Brand tokens ── */
:root {
  --brand-orange: #fbb03b;
  --brand-orange-hover: #f59d11;
  --brand-orange-light: #fcc870;
  --brand-orange-pale: #fde8b8;
  --brand-navy: #17253f;
  --brand-navy-deep: #0f1a2d;
  --brand-navy-mid: #1d3050;
  --brand-navy-light: #243a5a;
  --brand-navy-lighter: #2d4a6a;
  --brand-blue: #8dd6ff;
  --brand-blue-muted: #6bb8e6;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE (Primary Experience)
   Neutral dark gray chat area + deep navy sidebar with orange accents
   ═══════════════════════════════════════════════════════════════════ */
.dark {
  /* ── General surfaces: neutral dark gray ── */
  --presentation: #1a1a1e !important;
  --surface-primary: #141416 !important;
  --surface-primary-alt: #1a1a1e !important;
  --surface-primary-contrast: #242428 !important;
  --surface-secondary: #202024 !important;
  --surface-secondary-alt: #1a1a1e !important;
  --surface-dialog: #1e1e22 !important;

  /* ── Chat area: slightly lighter gray for contrast ── */
  --surface-chat: #1e1e22 !important;
  --surface-tertiary: #28282e !important;
  --surface-tertiary-alt: #1e1e22 !important;

  /* ── Header: dark gray matching chat area ── */
  --header-primary: #1a1a1e !important;
  --header-hover: #28282e !important;
  --header-button-hover: #303036 !important;

  /* ── Hover / active states ── */
  --surface-hover: #28282e !important;
  --surface-hover-alt: #303036 !important;
  --surface-active: #303036 !important;
  --surface-active-alt: #28282e !important;

  /* ── CTA / submit buttons: ORANGE ── */
  --surface-submit: var(--brand-orange) !important;
  --surface-submit-hover: var(--brand-orange-hover) !important;

  /* ── Text: neutral warm whites ── */
  --text-primary: #ededf0 !important;
  --text-secondary: #a0a0a8 !important;
  --text-secondary-alt: #88888f !important;
  --text-tertiary: #606068 !important;

  /* ── Borders: neutral gray ── */
  --border-light: #2a2a30 !important;
  --border-medium: #38383f !important;
  --border-medium-alt: #38383f !important;
  --border-heavy: #48484f !important;
  --border-xheavy: #58585f !important;

  /* ── Accent override ── */
  --brand-purple: var(--brand-orange) !important;

  /* ── Shadcn/UI HSL overrides ── */
  --background: 240 5% 10% !important;
  --foreground: 240 5% 94% !important;
  --card: 240 5% 13% !important;
  --card-foreground: 240 5% 94% !important;
  --primary: 38 96% 61% !important;
  --primary-foreground: 240 5% 10% !important;
  --secondary: 240 5% 16% !important;
  --secondary-foreground: 240 5% 94% !important;
  --muted: 240 5% 16% !important;
  --muted-foreground: 240 5% 60% !important;
  --accent: 38 96% 61% !important;
  --accent-foreground: 240 5% 10% !important;
  --border: 240 5% 20% !important;
  --input: 240 5% 20% !important;
  --ring: 38 96% 61% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVY SIDEBAR with Orange Accents (Dark mode)
   Deep navy sidebar darker than the chat area for visual depth.
   Orange accents on active items and interactive elements.
   ═══════════════════════════════════════════════════════════════════ */
.dark .nav.bg-surface-primary-alt {
  background-color: var(--brand-navy-deep) !important;
  color: #c8d8e8 !important;
  /* Surface vars scoped to sidebar – fixes text-overflow gradients */
  --surface-primary-alt: var(--brand-navy-deep) !important;
  --surface-active-alt: var(--brand-navy-mid) !important;
  --surface-secondary: var(--brand-navy-deep) !important;
  --surface-hover: #162640 !important;
  --surface-active: var(--brand-navy-mid) !important;
  --surface-tertiary: var(--brand-navy) !important;
  /* Text vars scoped to sidebar */
  --text-primary: #e0e8f0 !important;
  --text-secondary: #a0b8d0 !important;
  --text-secondary-alt: #8eaed0 !important;
  --text-tertiary: #6b8ab5 !important;
  /* Borders: subtle on dark bg */
  --border-light: rgba(255, 255, 255, 0.06) !important;
  --border-medium: rgba(255, 255, 255, 0.10) !important;
}

/* Force ALL text/elements in sidebar to light (except SVG internals) */
.dark .nav.bg-surface-primary-alt,
.dark .nav.bg-surface-primary-alt *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(ellipse):not(g) {
  color: #c8d8e8 !important;
}

/* Sidebar heading labels (Today, Yesterday, etc.) */
.dark .nav.bg-surface-primary-alt h3 {
  color: #6b8ab5 !important;
  opacity: 0.85;
}

/* Sidebar hover state */
.dark .nav.bg-surface-primary-alt button:hover,
.dark .nav.bg-surface-primary-alt a:hover {
  background-color: #162640 !important;
}

/* Active/selected conversation: orange left accent */
.dark .nav.bg-surface-primary-alt a[class*="bg-surface-active"],
.dark .nav.bg-surface-primary-alt a[class*="bg-surface-active"]:hover {
  background-color: var(--brand-navy) !important;
  border-left: 3px solid var(--brand-orange) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Sidebar icons: orange by default, muted on hover */
.dark .nav.bg-surface-primary-alt svg,
.dark .nav.bg-surface-primary-alt svg path,
.dark .nav.bg-surface-primary-alt svg circle,
.dark .nav.bg-surface-primary-alt svg rect {
  color: var(--brand-orange) !important;
  stroke: var(--brand-orange) !important;
}
.dark .nav.bg-surface-primary-alt button:hover svg,
.dark .nav.bg-surface-primary-alt button:hover svg path,
.dark .nav.bg-surface-primary-alt button:hover svg circle,
.dark .nav.bg-surface-primary-alt button:hover svg rect,
.dark .nav.bg-surface-primary-alt a:hover svg,
.dark .nav.bg-surface-primary-alt a:hover svg path,
.dark .nav.bg-surface-primary-alt a:hover svg circle,
.dark .nav.bg-surface-primary-alt a:hover svg rect {
  color: #8eaed0 !important;
  stroke: #8eaed0 !important;
}

/* ── Brand logo at top of sidebar ── */
.dark #chat-history-nav::before,
html:not(.dark) #chat-history-nav::before {
  content: '';
  display: block;
  width: 100%;
  height: 48px;
  margin: 16px 12px 12px 12px;
  flex-shrink: 0;
  background-image: url('/assets/brand/big_logo.png?v=20260318b');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE (Secondary Experience)
   ═══════════════════════════════════════════════════════════════════ */
html:not(.dark) {
  /* ── Surfaces ── */
  --presentation: #ffffff !important;
  --surface-primary: #ffffff !important;
  --surface-primary-alt: #f5f8fc !important;
  --surface-primary-contrast: #e8eff7 !important;
  --surface-secondary: #eef3f9 !important;
  --surface-secondary-alt: #dde7f2 !important;
  --surface-tertiary: #dde7f2 !important;
  --surface-tertiary-alt: #ffffff !important;
  --surface-chat: #ffffff !important;
  --surface-dialog: #ffffff !important;

  /* ── Header: strong brand presence in light mode ── */
  --header-primary: var(--brand-navy) !important;
  --header-hover: var(--brand-navy-light) !important;
  --header-button-hover: var(--brand-navy-mid) !important;

  /* ── Hover / active states ── */
  --surface-hover: #dde7f2 !important;
  --surface-hover-alt: #ccdaea !important;
  --surface-active: #ccdaea !important;
  --surface-active-alt: #dde7f2 !important;

  /* ── CTA / submit buttons ── */
  --surface-submit: var(--brand-orange) !important;
  --surface-submit-hover: var(--brand-orange-hover) !important;

  /* ── Text ── */
  --text-primary: var(--brand-navy) !important;
  --text-secondary: #2d4a6a !important;
  --text-secondary-alt: #3d5f85 !important;
  --text-tertiary: #5a80a8 !important;

  /* ── Borders ── */
  --border-light: #c8daf0 !important;
  --border-medium: #a8c4e0 !important;
  --border-medium-alt: #a8c4e0 !important;
  --border-heavy: #7ba3c8 !important;
  --border-xheavy: #5a80a8 !important;

  /* ── Accent override ── */
  --brand-purple: var(--brand-orange) !important;

  /* ── Shadcn/UI HSL overrides ── */
  --background: 0 0% 100% !important;
  --foreground: 216 42% 17% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 216 42% 17% !important;
  --primary: 38 96% 61% !important;
  --primary-foreground: 216 42% 17% !important;
  --secondary: 213 40% 95% !important;
  --secondary-foreground: 216 42% 17% !important;
  --muted: 213 40% 95% !important;
  --muted-foreground: 216 25% 45% !important;
  --accent: 38 96% 61% !important;
  --accent-foreground: 216 42% 17% !important;
  --border: 213 40% 85% !important;
  --input: 213 40% 85% !important;
  --ring: 214 30% 60% !important;
}

/* ── Light mode: ORANGE sidebar with navy text/icons ── */
html:not(.dark) .nav.bg-surface-primary-alt {
  background-color: var(--brand-orange) !important;
  --surface-primary-alt: var(--brand-orange) !important;
  --surface-active-alt: var(--brand-orange-hover) !important;
  --surface-secondary: var(--brand-orange) !important;
  --surface-hover: var(--brand-orange-hover) !important;
  --surface-active: var(--brand-orange-hover) !important;
  --surface-tertiary: #e89520 !important;
  --text-primary: var(--brand-navy) !important;
  --text-secondary: var(--brand-navy-mid) !important;
  --border-light: rgba(23, 37, 63, 0.1) !important;
  --border-medium: rgba(23, 37, 63, 0.15) !important;
  border-right: 1px solid rgba(23, 37, 63, 0.15) !important;
}

/* Force ALL text in light sidebar to navy (except SVG internals) */
html:not(.dark) .nav.bg-surface-primary-alt,
html:not(.dark) .nav.bg-surface-primary-alt *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(ellipse):not(g) {
  color: var(--brand-navy) !important;
}

/* Sidebar heading labels (Today, Yesterday, etc.) */
html:not(.dark) .nav.bg-surface-primary-alt h3 {
  color: var(--brand-navy-mid) !important;
  opacity: 0.7;
}

/* Sidebar hover state */
html:not(.dark) .nav.bg-surface-primary-alt button:hover,
html:not(.dark) .nav.bg-surface-primary-alt a:hover {
  background-color: var(--brand-orange-hover) !important;
}

/* Active/selected conversation: navy left accent */
html:not(.dark) .nav.bg-surface-primary-alt a[class*="bg-surface-active"],
html:not(.dark) .nav.bg-surface-primary-alt a[class*="bg-surface-active"]:hover {
  background-color: var(--brand-orange-hover) !important;
  border-left: 3px solid var(--brand-navy) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Sidebar icons: navy */
html:not(.dark) .nav.bg-surface-primary-alt svg,
html:not(.dark) .nav.bg-surface-primary-alt svg path,
html:not(.dark) .nav.bg-surface-primary-alt svg circle,
html:not(.dark) .nav.bg-surface-primary-alt svg rect {
  color: var(--brand-navy) !important;
  stroke: var(--brand-navy) !important;
}
html:not(.dark) .nav.bg-surface-primary-alt button:hover svg,
html:not(.dark) .nav.bg-surface-primary-alt button:hover svg path,
html:not(.dark) .nav.bg-surface-primary-alt button:hover svg circle,
html:not(.dark) .nav.bg-surface-primary-alt button:hover svg rect,
html:not(.dark) .nav.bg-surface-primary-alt a:hover svg,
html:not(.dark) .nav.bg-surface-primary-alt a:hover svg path,
html:not(.dark) .nav.bg-surface-primary-alt a:hover svg circle,
html:not(.dark) .nav.bg-surface-primary-alt a:hover svg rect {
  color: var(--brand-navy-deep) !important;
  stroke: var(--brand-navy-deep) !important;
}

/* ── Light mode: logo filtered to navy on orange bg ── */
html:not(.dark) #chat-history-nav::before {
  opacity: 0.95 !important;
  filter: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2000%) hue-rotate(190deg) !important;
}

/* ── Light mode: settings popup menu: NAVY bg with light text (contrast) ── */
html:not(.dark) .nav.bg-surface-primary-alt [role="menu"],
html:not(.dark) .nav.bg-surface-primary-alt [data-radix-popper-content-wrapper] [role="menu"] {
  background-color: var(--brand-navy) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html:not(.dark) .nav.bg-surface-primary-alt [role="menu"] *,
html:not(.dark) .nav.bg-surface-primary-alt [data-radix-popper-content-wrapper] * {
  color: #c8d8e8 !important;
}
html:not(.dark) .nav.bg-surface-primary-alt [role="menu"] svg,
html:not(.dark) .nav.bg-surface-primary-alt [data-radix-popper-content-wrapper] svg {
  color: var(--brand-orange) !important;
  stroke: var(--brand-orange) !important;
}
html:not(.dark) .nav.bg-surface-primary-alt [role="menuitem"]:hover {
  background-color: var(--brand-navy-mid) !important;
}
html:not(.dark) .nav.bg-surface-primary-alt [role="separator"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Dark mode: settings popup menu: ORANGE bg with navy text (contrast) ── */
.dark .nav.bg-surface-primary-alt [role="menu"],
.dark .nav.bg-surface-primary-alt [data-radix-popper-content-wrapper] [role="menu"] {
  background-color: var(--brand-orange) !important;
  border: 1px solid rgba(23, 37, 63, 0.15) !important;
}
.dark .nav.bg-surface-primary-alt [role="menu"] *,
.dark .nav.bg-surface-primary-alt [data-radix-popper-content-wrapper] * {
  color: var(--brand-navy) !important;
}
.dark .nav.bg-surface-primary-alt [role="menu"] svg,
.dark .nav.bg-surface-primary-alt [data-radix-popper-content-wrapper] svg {
  color: var(--brand-navy) !important;
  stroke: var(--brand-navy) !important;
}
.dark .nav.bg-surface-primary-alt [role="menuitem"]:hover {
  background-color: var(--brand-orange-hover) !important;
}
.dark .nav.bg-surface-primary-alt [role="separator"] {
  background-color: rgba(23, 37, 63, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT-SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Accent line at top of chat (not on auth/login page) ── */
.dark main:not(.flex-grow) {
  border-top: 2px solid var(--brand-orange) !important;
}
html:not(.dark) main:not(.flex-grow) {
  border-top: 2px solid var(--brand-navy) !important;
}

/* ── Sidebar divider ── */
.dark .nav.bg-surface-primary-alt {
  border-right: 1px solid rgba(251, 176, 59, 0.25) !important;
}

/* ── Welcome message: brighter and more visible (dark) ── */
.dark [class*="text-token-text-tertiary"],
.dark [class*="text-text-tertiary"] {
  color: #a0a0a8 !important;
}

/* ── Message action icons: orange on hover (dark), navy on hover (light) ── */
.dark button[class*="text-token-text"] svg:hover,
.dark [data-testid*="message"] button:hover svg {
  color: var(--brand-orange) !important;
}
html:not(.dark) button[class*="text-token-text"] svg:hover,
html:not(.dark) [data-testid*="message"] button:hover svg {
  color: var(--brand-navy) !important;
}

/* ── Model selector badge ── */
.dark button[data-testid="model-selector"],
.dark [class*="model-selector"] {
  border-color: rgba(251, 176, 59, 0.3) !important;
}
html:not(.dark) button[data-testid="model-selector"],
html:not(.dark) [class*="model-selector"] {
  border-color: rgba(23, 37, 63, 0.3) !important;
}

/* ── Right panel: orange accents (dark) ── */
.dark nav[aria-label="Controls"] {
  border-left: 1px solid rgba(251, 176, 59, 0.25) !important;
}
.dark nav[aria-label="Controls"] button svg {
  color: var(--brand-orange) !important;
}
.dark nav[aria-label="Controls"] button:hover svg {
  color: var(--brand-orange-hover) !important;
}
.dark nav[aria-label="Controls"] ~ button svg,
.dark button[aria-label*="share" i] svg {
  color: var(--brand-orange) !important;
}

/* ── Right panel: navy accents (light) ── */
html:not(.dark) nav[aria-label="Controls"] {
  border-left: 1px solid rgba(23, 37, 63, 0.15) !important;
}
html:not(.dark) nav[aria-label="Controls"] button svg {
  color: var(--brand-navy) !important;
}
html:not(.dark) nav[aria-label="Controls"] button:hover svg {
  color: var(--brand-navy-light) !important;
}
html:not(.dark) nav[aria-label="Controls"] ~ button svg,
html:not(.dark) button[aria-label*="share" i] svg {
  color: var(--brand-navy) !important;
}

/* ── Send / submit button in chat: navy text on orange ── */
button[data-testid="send-button"],
form button[type="submit"]:not(.w-authPageWidth button) {
  color: var(--brand-navy) !important;
}

/* ── Sidebar logo sizing ── */
nav img[alt*="logo" i],
nav img[src*="logo" i] {
  max-height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ── Links in chat messages ── */
.dark .markdown a {
  color: var(--brand-blue) !important;
}
.dark .markdown a:hover {
  color: var(--brand-blue-muted) !important;
}
html:not(.dark) .markdown a {
  color: #1a6fb5 !important;
}
html:not(.dark) .markdown a:hover {
  color: var(--brand-navy) !important;
}

/* ── Code blocks: neutral dark with orange accents (dark) ── */
.dark pre,
.dark .hljs {
  background-color: #141416 !important;
  border: 1px solid #2a2a30 !important;
}

/* ── Inline code (dark) ── */
.dark code:not(pre code) {
  background-color: #28282e !important;
  color: var(--brand-orange-light) !important;
}

/* ── Code blocks (light) ── */
html:not(.dark) pre,
html:not(.dark) .hljs {
  background-color: #f0f4f8 !important;
  border: 1px solid #c8daf0 !important;
}

/* ── Inline code (light) ── */
html:not(.dark) code:not(pre code) {
  background-color: #e8eff7 !important;
  color: #b8700a !important;
}

/* ── Scrollbar: subtle orange tint ── */
.dark ::-webkit-scrollbar-thumb {
  background-color: #38383f !important;
  border-radius: 4px !important;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(251, 176, 59, 0.4) !important;
}
.dark ::-webkit-scrollbar-track {
  background-color: transparent !important;
}

/* ── Theme toggle: visible (user can switch dark/light) ── */

/* ── Focus ring: orange accent (except textarea inside chat input) ── */
*:focus-visible {
  outline-color: rgba(251, 176, 59, 0.5) !important;
}
.dark form textarea,
.dark form textarea:focus,
.dark form textarea:focus-visible,
.dark form textarea:focus-within {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

/* ── Chat input: subtle orange border on focus (dark) ── */
.dark form [class*="border-border-light"] {
  border-color: #38383f !important;
}
.dark form [class*="border-border-light"]:focus-within {
  border-color: rgba(251, 176, 59, 0.35) !important;
  box-shadow: none !important;
}

/* ── Chat input: subtle orange border on focus (light) ── */
html:not(.dark) form [class*="border-border-light"] {
  border-color: #c8daf0 !important;
}
html:not(.dark) form [class*="border-border-light"]:focus-within {
  border-color: rgba(23, 37, 63, 0.4) !important;
  box-shadow: none !important;
}

/* ── Focus ring removal for textarea (light) ── */
html:not(.dark) form textarea,
html:not(.dark) form textarea:focus,
html:not(.dark) form textarea:focus-visible,
html:not(.dark) form textarea:focus-within {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

/* ── Selection color ── */
::selection {
  background-color: #fbb03b40 !important;
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH / LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* Primary action button (login/setup) */
.w-authPageWidth button[type="submit"] {
  background-color: var(--brand-orange) !important;
  color: var(--brand-navy) !important;
}

.w-authPageWidth button[type="submit"]:hover {
  background-color: var(--brand-orange-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN PAGE – Gradient background inspired by ondernemersbalie.nl
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light mode: gradient with orange + blue glows ── */
html:not(.dark) .relative.flex.min-h-screen.flex-col {
  background:
    radial-gradient(ellipse 50% 60% at 65% 55%, rgba(251, 160, 30, 0.7) 0%, rgba(200, 100, 0, 0.2) 45%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 25% 25%, rgba(100, 200, 255, 0.45) 0%, rgba(60, 140, 220, 0.1) 50%, transparent 70%),
    radial-gradient(ellipse 30% 35% at 80% 10%, rgba(120, 210, 255, 0.25) 0%, transparent 60%),
    linear-gradient(160deg, #050d1a 0%, #081525 20%, #0c1c30 40%, #0e2038 60%, #080f1c 100%) !important;
}

/* ── Dark mode: same gradient, slightly darker base ── */
.dark .relative.flex.min-h-screen.flex-col {
  background:
    radial-gradient(ellipse 50% 60% at 65% 55%, rgba(251, 160, 30, 0.55) 0%, rgba(200, 100, 0, 0.15) 45%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 25% 25%, rgba(80, 160, 255, 0.35) 0%, rgba(60, 140, 220, 0.08) 50%, transparent 70%),
    radial-gradient(ellipse 30% 35% at 80% 10%, rgba(100, 190, 255, 0.2) 0%, transparent 60%),
    linear-gradient(160deg, #030710 0%, #050c18 20%, #081222 40%, #0a1628 60%, #050a14 100%) !important;
}

/* ── Logo: smaller with breathing room (both modes) ── */
.mt-6.h-10.w-full.bg-cover {
  height: 180px !important;
  margin-top: 0 !important;
  border-bottom: none !important;
  background-color: transparent !important;
  background-size: auto 100px !important;
  padding: 0 !important;
  background-image: url('/assets/brand/big_logo.png?v=20260318') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.mt-6.h-10.w-full.bg-cover img {
  display: none !important;
}

/* ── "TRUSTED PRIVATE AI" subtitle below logo ── */
main.flex.flex-grow {
  position: relative !important;
}
main.flex.flex-grow::before {
  content: 'TRUSTED PRIVATE AI' !important;
  display: block !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 6px !important;
  color: rgba(200, 216, 232, 0.55) !important;
  padding: 20px 0 0 0 !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ── Center the login card ── */
main.flex.flex-grow {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Light mode: white frosted card ── */
html:not(.dark) .w-authPageWidth {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(251, 176, 59, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  margin-top: -40px !important;
}
html:not(.dark) .w-authPageWidth h1,
html:not(.dark) .w-authPageWidth h2,
html:not(.dark) .w-authPageWidth p {
  color: #17253f !important;
}

/* ── Dark mode: dark frosted card ── */
.dark .w-authPageWidth {
  background: rgba(20, 25, 35, 0.85) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(251, 176, 59, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: -40px !important;
}

/* ── Theme toggle: visible on gradient bg ── */
html:not(.dark) button[aria-label="Toggle theme"] svg {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Theme toggle z-index (login page) ── */
button[aria-label="Toggle theme"] {
  z-index: 50 !important;
  position: relative !important;
}

/* ── Hide LibreChat footer ── */
a[href="https://librechat.ai"] {
  display: none !important;
}
/* Hide the parent span containing "- Every AI for Everyone." */
span:has(> a[href="https://librechat.ai"]) {
  display: none !important;
}

/* ── Light mode: navy focus ring ── */
html:not(.dark) *:focus-visible {
  outline-color: rgba(23, 37, 63, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MAIN CHAT AREA – Gradient background (ondernemersbalie.nl style)
   Applied to .bg-presentation which wraps the entire chat area.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dark mode: deep dark base with stronger orange glows ── */
.dark .bg-presentation {
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, rgba(20, 40, 80, 0.3) 0%, transparent 55%),
    radial-gradient(ellipse 100% 90% at 50% 75%, rgba(251, 176, 59, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 90% 35%, rgba(251, 176, 59, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 70% 55% at 15% 60%, rgba(251, 176, 59, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(251, 176, 59, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #080e18 0%, #0c1522 30%, #121c2e 60%, #1a2538 100%) !important;
}

/* ── Light mode: warm cream base with more orange spread ── */
html:not(.dark) .bg-presentation {
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(23, 37, 63, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 75%, rgba(251, 176, 59, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 30%, rgba(251, 176, 59, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 15% 65%, rgba(251, 176, 59, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 40%, rgba(251, 176, 59, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #f8f9fc 0%, #fef8ee 30%, #fdf0d8 60%, #fceacc 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RIGHT SIDEBAR (sidenav) – Brand-matched styling
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light mode: orange right sidebar matching left ── */
html:not(.dark) nav.sidenav.bg-background {
  background: var(--brand-orange) !important;
}
/* Force all children: transparent bg, navy text, navy borders */
html:not(.dark) nav.sidenav.bg-background * {
  color: var(--brand-navy) !important;
  background-color: transparent !important;
  border-color: rgba(23, 37, 63, 0.25) !important;
}
html:not(.dark) nav.sidenav.bg-background svg,
html:not(.dark) nav.sidenav.bg-background svg * {
  color: var(--brand-navy) !important;
}
/* Hover: brighter orange */
html:not(.dark) nav.sidenav.bg-background button:hover,
html:not(.dark) nav.sidenav.bg-background a:hover,
html:not(.dark) nav.sidenav.bg-background [role="button"]:hover,
html:not(.dark) nav.sidenav.bg-background [class*="hover"]:hover {
  background-color: rgba(255, 200, 80, 0.4) !important;
}
/* Toggle switches */
html:not(.dark) nav.sidenav.bg-background [role="switch"] {
  background-color: rgba(23, 37, 63, 0.3) !important;
}
html:not(.dark) nav.sidenav.bg-background [role="switch"][data-state="checked"] {
  background-color: var(--brand-navy) !important;
}
html:not(.dark) nav.sidenav.bg-background [role="switch"] span {
  background-color: white !important;
}
/* Input fields */
html:not(.dark) nav.sidenav.bg-background input {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ── Dark mode: navy right sidebar matching left ── */
.dark nav.sidenav.bg-background {
  background: rgb(15, 26, 45) !important;
}
/* Text: light blue-gray like left sidebar */
.dark nav.sidenav.bg-background *:not(svg):not(path):not(circle):not(ellipse):not(rect):not(line):not(polyline):not(polygon):not(g) {
  color: rgb(200, 216, 232) !important;
}
/* SVG icons: orange */
.dark nav.sidenav.bg-background svg,
.dark nav.sidenav.bg-background svg * {
  color: rgb(251, 176, 59) !important;
}
/* Hover: subtle light overlay */
.dark nav.sidenav.bg-background a:hover,
.dark nav.sidenav.bg-background button:hover,
.dark nav.sidenav.bg-background [role="button"]:hover,
.dark nav.sidenav.bg-background [class*="hover"]:hover {
  background-color: rgba(200, 216, 232, 0.1) !important;
}