/* ==========================================================================
   Ripple Design System - Auth Screens Override
   Primary Reference: Linear Changelog / Metaview / Readwise
   Tokens:
     Canvas:             #08090a
     Surface (elevated): #141516
     Surface (input):    #1c1c1f
     Border (hairline):  #23252a (hover: #34343a)
     Text:               #f7f8f8 (primary), #d0d6e0 (secondary), #8a8f98 (muted)
     Accent:             #5fe3b3 (mint-teal, primary action only)
     Radius:             cards 8px, buttons/pills 9999px, inputs 8px
     Typography:         Inter (UI), Serif (display/wordmark/h1 headline only)
   ========================================================================== */

/* Scoped strictly to auth screens containing .w-authPageWidth */
html:has(.w-authPageWidth),
body:has(.w-authPageWidth) {
  background-color: #08090a !important;
  color: #f7f8f8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em !important;
}

body:has(.w-authPageWidth) div.relative.flex.min-h-screen.flex-col {
  background-color: #08090a !important;
}

/* --------------------------------------------------------------------------
   Theme tokens.

   LibreChat drives its own palette from custom properties defined on `html`
   (light) and re-defined by `.dark`. Everything above forces specific elements
   dark with `!important`, which leaves anything the selector list does not name
   still theme-driven -- on a light-mode device the floating field labels were
   white chips (`bg-surface-primary` -> `--white`) on the dark card, #8a8f98 on
   #ffffff, ~3.0:1 and under WCAG AA.

   Redefining the tokens on `body` is the durable fix: custom properties inherit,
   nothing in the bundle re-defines them per-element (`.dark, .dark *` rules set
   real properties, not variables), so every descendant resolves to the Ripple
   value in either theme -- including elements no selector here names. Still
   scoped by `:has(.w-authPageWidth)`, which occurs exactly once in the bundle
   (the auth card), so none of this reaches the authenticated chat UI.

   HSL triples are the shadcn-style tokens the same stylesheet uses; they are the
   same palette expressed the way those consumers read it.
   -------------------------------------------------------------------------- */
/* Scoped to Auth Screens AND Signed-in Dark Chat */
body:has(.w-authPageWidth),
html.dark body:not(:has(.w-authPageWidth)),
.dark body:not(:has(.w-authPageWidth)) {
  /* The token block below redefines custom properties, which paint nothing on
     their own. LibreChat's own `.dark body,.dark html{background-color:#212121}`
     rule (Tailwind's literal `bg-gray-800`) sets a real background-color on body
     and html directly, so it wins over every token here unless matched with an
     equally literal, equally `!important` declaration. This is what showed as
     the empty-state canvas resolving to #212121 instead of #08090a. */
  background-color: #08090a !important;

  /* Text */
  --text-primary: #f7f8f8;
  --text-secondary: #d0d6e0;
  --text-secondary-alt: #8a8f98;
  --text-tertiary: #8a8f98;
  --text-destructive: #f87171;

  /* Surfaces */
  --presentation: #08090a;
  --surface-primary: #141516;
  --surface-primary-alt: #141516;
  --surface-primary-contrast: #1c1c1f;
  --surface-secondary: #1c1c1f;
  --surface-secondary-alt: #23252a;
  --surface-tertiary: #1c1c1f;
  --surface-tertiary-alt: #141516;
  --surface-dialog: #141516;
  --surface-chat: #141516;
  --surface-hover: #1c1c1f;
  --surface-hover-alt: #23252a;
  --surface-active: #23252a;
  --surface-active-alt: #23252a;
  --surface-submit: #5fe3b3;
  --surface-submit-hover: #72e8be;
  --surface-destructive: #542226;
  --surface-destructive-hover: #6a2b30;
  --header-primary: #141516;
  --header-hover: #1c1c1f;
  --header-button-hover: #1c1c1f;

  /* Borders -- depth is 1px hairlines, never shadows */
  --border-light: #23252a;
  --border-medium: #23252a;
  --border-medium-alt: #34343a;
  --border-heavy: #34343a;
  --border-xheavy: #34343a;
  --border-destructive: #542226;
  --ring-primary: #34343a;

  /* shadcn-style tokens (bare HSL triples, consumed as hsl(var(--x))) */
  --background: 210 11% 4%;
  --foreground: 180 7% 97%;
  --card: 210 5% 8%;
  --card-foreground: 180 7% 97%;
  --primary: 158 70% 63%;
  --primary-foreground: 210 11% 4%;
  --secondary: 240 5% 12%;
  --secondary-foreground: 180 7% 97%;
  --muted: 240 5% 12%;
  --muted-foreground: 219 6% 57%;
  --accent: 240 5% 12%;
  --accent-foreground: 180 7% 97%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 210 11% 4%;
  --border: 223 9% 15%;
  --input: 223 9% 15%;
  --ring: 158 70% 63%;
  --switch-unchecked: 240 5% 22%;

  /* Tailwind Prose typography tokens for Markdown in Dark */
  --tw-prose-invert-body: #f7f8f8;
  --tw-prose-invert-headings: #f7f8f8;
  --tw-prose-invert-lead: #d0d6e0;
  --tw-prose-invert-links: #5fe3b3;
  --tw-prose-invert-bold: #f7f8f8;
  --tw-prose-invert-counters: #d0d6e0;
  --tw-prose-invert-bullets: #8a8f98;
  --tw-prose-invert-hr: #23252a;
  --tw-prose-invert-quotes: #f7f8f8;
  --tw-prose-invert-quote-borders: #34343a;
  --tw-prose-invert-captions: #8a8f98;
  --tw-prose-invert-code: #f7f8f8;
  --tw-prose-invert-pre-code: #f7f8f8;
  --tw-prose-invert-pre-bg: #1c1c1f;
  --tw-prose-invert-th-borders: #23252a;
  --tw-prose-invert-td-borders: #23252a;
  --tw-prose-body: #f7f8f8;
  --tw-prose-headings: #f7f8f8;
  --tw-prose-lead: #d0d6e0;
  --tw-prose-links: #5fe3b3;
  --tw-prose-bold: #f7f8f8;
}

/* --- Ripple Light Theme Tokens (Signed-in Light) --- */
html:not(.dark) body:not(:has(.w-authPageWidth)),
html.light body:not(:has(.w-authPageWidth)) {
  /* Text */
  --text-primary: #08090a;
  --text-secondary: #474c54;
  --text-secondary-alt: #656a74;
  --text-tertiary: #656a74;
  --text-destructive: #dc2626;

  /* Surfaces */
  --presentation: #f7f8f9;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f0f2f4;
  --surface-primary-contrast: #ffffff;
  --surface-secondary: #f0f2f4;
  --surface-secondary-alt: #e8eaed;
  --surface-tertiary: #f0f2f4;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-chat: #ffffff;
  --surface-hover: #e8eaed;
  --surface-hover-alt: #e0e3e7;
  --surface-active: #e0e3e7;
  --surface-active-alt: #e0e3e7;
  --surface-submit: #5fe3b3;
  --surface-submit-hover: #4cd4a3;
  --surface-destructive: #fee2e2;
  --surface-destructive-hover: #fecaca;
  --header-primary: #ffffff;
  --header-hover: #f0f2f4;
  --header-button-hover: #f0f2f4;

  /* Borders -- 1px hairlines */
  --border-light: #e2e4e8;
  --border-medium: #e2e4e8;
  --border-medium-alt: #d0d3da;
  --border-heavy: #d0d3da;
  --border-xheavy: #b8bcc6;
  --border-destructive: #fca5a5;
  --ring-primary: #087055;

  /* shadcn-style tokens (bare HSL triples) */
  --background: 210 14% 97%;
  --foreground: 210 11% 4%;
  --card: 0 0% 100%;
  --card-foreground: 210 11% 4%;
  --primary: 158 70% 63%;
  --primary-foreground: 210 11% 4%;
  --secondary: 210 14% 95%;
  --secondary-foreground: 210 11% 4%;
  --muted: 210 14% 95%;
  --muted-foreground: 220 7% 43%;
  --accent: 210 14% 95%;
  --accent-foreground: 210 11% 4%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 90%;
  --input: 220 13% 90%;
  --ring: 164 87% 24%;
  --switch-unchecked: 220 13% 85%;

  /* Tailwind Prose typography tokens for Markdown in Light */
  --tw-prose-body: #08090a;
  --tw-prose-headings: #08090a;
  --tw-prose-lead: #474c54;
  --tw-prose-links: #087055;
  --tw-prose-bold: #08090a;
  --tw-prose-counters: #474c54;
  --tw-prose-bullets: #656a74;
  --tw-prose-hr: #e2e4e8;
  --tw-prose-quotes: #08090a;
  --tw-prose-quote-borders: #d0d3da;
  --tw-prose-captions: #656a74;
  --tw-prose-code: #08090a;
  --tw-prose-pre-code: #08090a;
  --tw-prose-pre-bg: #f0f2f4;
  --tw-prose-th-borders: #e2e4e8;
  --tw-prose-td-borders: #e2e4e8;
}

/* Literal `bg-white` utilities are hex, not tokens, so the block above cannot
   reach them; the auth screens use one (the logo header, currently 0px wide).
   Excluding the card keeps its own #141516 rule authoritative. */
body:has(.w-authPageWidth) .bg-white:not(.w-authPageWidth) {
  background-color: #08090a !important;
}

/* --- Logo & Header --- */
body:has(.w-authPageWidth) div.mt-6.h-10.w-full {
  margin-top: 2.5rem !important;
  margin-bottom: 0.5rem !important;
}

body:has(.w-authPageWidth) img[src*="logo.svg"] {
  filter: none !important;
  height: 44px !important;
  width: auto !important;
  margin: 0 auto !important;
}

/* --- Auth Card Container --- */
.w-authPageWidth {
  background-color: #141516 !important;
  border: 1px solid #23252a !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 24px !important;
  margin: 0 auto !important;
}

/* --- Headline (Serif moment) --- */
.w-authPageWidth h1 {
  font-family: Charter, "Iowan Old Style", "Apple Garamond", "Times New Roman", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.625rem !important;
  color: #f7f8f8 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

/* --- Form Fields & Inputs --- */
.w-authPageWidth form {
  margin-top: 1rem !important;
}

.w-authPageWidth input[type="text"],
.w-authPageWidth input[type="email"],
.w-authPageWidth input[type="password"] {
  background-color: #1c1c1f !important;
  border: 1px solid #23252a !important;
  border-radius: 8px !important;
  color: #f7f8f8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  padding: 0.625rem 0.875rem !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.w-authPageWidth input[type="text"]:hover,
.w-authPageWidth input[type="email"]:hover,
.w-authPageWidth input[type="password"]:hover {
  border-color: #34343a !important;
  background-color: #1c1c1f !important;
}

.w-authPageWidth input[type="text"]:focus,
.w-authPageWidth input[type="text"]:focus-visible,
.w-authPageWidth input[type="email"]:focus,
.w-authPageWidth input[type="email"]:focus-visible,
.w-authPageWidth input[type="password"]:focus,
.w-authPageWidth input[type="password"]:focus-visible {
  border-color: #5fe3b3 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #5fe3b3 !important;
}

/* PROVEN by firstmate against the LIVE page (https://ripple.maestrolabs.ai/register)
   with real Chrome-autofilled fields. Measured before/after with getComputedStyle.

   BEFORE: autofilled fields  -webkit-text-fill-color rgb(0,0,0) on background rgb(232,240,254)
   AFTER : autofilled fields  -webkit-text-fill-color rgb(247,248,248), inset shadow rgb(28,28,31)
   Password fields (never autofilled) UNCHANGED in both passes:
           rgb(247,248,248) on rgb(28,28,31), box-shadow none.

   NOTE: computed `background-color` still reports rgb(232,240,254) after the fix and that is
   CORRECT AND EXPECTED - Chrome's autofill background genuinely cannot be overridden. The inset
   box-shadow paints over it. Do NOT "fix" that by chasing background-color; you will fail.

   Use this block as-is. Place it in the "Form Fields & Inputs" section of ripple.css. */

.w-authPageWidth input:-webkit-autofill,
.w-authPageWidth input:-webkit-autofill:hover,
.w-authPageWidth input:-webkit-autofill:focus,
.w-authPageWidth input:-webkit-autofill:active,
.w-authPageWidth input:-internal-autofill-selected {
  -webkit-text-fill-color: #f7f8f8 !important;
  caret-color: #f7f8f8 !important;
  -webkit-box-shadow: inset 0 0 0 1000px #1c1c1f !important;
          box-shadow: inset 0 0 0 1000px #1c1c1f !important;
  border-color: #23252a !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}

.w-authPageWidth input:-webkit-autofill:focus,
.w-authPageWidth input:-webkit-autofill:focus-visible {
  border-color: #5fe3b3 !important;
}


/* Floating label styling */
.w-authPageWidth label {
  color: #8a8f98 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.01em !important;
  transition: all 0.15s ease !important;
}

.w-authPageWidth input:focus ~ label,
.w-authPageWidth input:not(:placeholder-shown) ~ label {
  background-color: #141516 !important;
  color: #5fe3b3 !important;
  padding: 0 4px !important;
}

.w-authPageWidth input:not(:focus):not(:placeholder-shown) ~ label {
  color: #8a8f98 !important;
}

/* Password visibility toggle icon */
.w-authPageWidth div.relative button {
  color: #8a8f98 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
}

.w-authPageWidth div.relative button:hover {
  color: #f7f8f8 !important;
  background: transparent !important;
}

/* --- Submit & Action Buttons --- */
.w-authPageWidth button[type="submit"],
.w-authPageWidth button[data-testid="login-button"],
.w-authPageWidth button[variant="submit"] {
  background-color: #5fe3b3 !important;
  color: #08090a !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 550 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  height: 42px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

.w-authPageWidth button[type="submit"]:hover,
.w-authPageWidth button[data-testid="login-button"]:hover,
.w-authPageWidth button[variant="submit"]:hover {
  background-color: #72e8be !important;
  color: #08090a !important;
}

.w-authPageWidth button[type="submit"]:active,
.w-authPageWidth button[data-testid="login-button"]:active,
.w-authPageWidth button[variant="submit"]:active {
  background-color: #4cd4a3 !important;
}

.w-authPageWidth button[type="submit"]:disabled,
.w-authPageWidth button[data-testid="login-button"]:disabled,
.w-authPageWidth button[variant="submit"]:disabled {
  background-color: #23252a !important;
  color: #8a8f98 !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* --- Links & Navigation --- */
.w-authPageWidth a,
body:has(.w-authPageWidth) p a {
  color: #d0d6e0 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.w-authPageWidth a:hover,
body:has(.w-authPageWidth) p a:hover {
  color: #5fe3b3 !important;
  text-decoration: underline !important;
  text-decoration-color: #5fe3b3 !important;
}

body:has(.w-authPageWidth) p {
  color: #8a8f98 !important;
  font-size: 0.875rem !important;
}

/* --- Theme Toggle Button (hidden on auth screens; closes login-theme-toggle) --- */
body:has(.w-authPageWidth) .absolute.bottom-0.left-0:has(button),
body:has(.w-authPageWidth) .absolute.bottom-0.left-0 button,
body:has(.w-authPageWidth) button[aria-label*="Toggle theme" i],
body:has(.w-authPageWidth) button[aria-label*="theme" i] {
  display: none !important;
}

/* --- Error & Alert Messages --- */
.w-authPageWidth div[role="alert"],
body:has(.w-authPageWidth) div[role="alert"],
body:has(.w-authPageWidth) .mx-auto.sm\:max-w-sm {
  background-color: #1c1517 !important;
  border: 1px solid #542226 !important;
  border-radius: 8px !important;
  color: #f87171 !important;
  box-shadow: none !important;
}

.w-authPageWidth span[role="alert"],
.w-authPageWidth p[id$="-error"] {
  color: #f87171 !important;
  font-size: 0.8125rem !important;
  margin-top: 0.25rem !important;
}

/* Success notification */
.w-authPageWidth div.border-green-500,
body:has(.w-authPageWidth) div.border-green-500 {
  background-color: #11231d !important;
  border: 1px solid #1e4a3b !important;
  border-radius: 8px !important;
  color: #5fe3b3 !important;
  box-shadow: none !important;
}

/* --- Footer --- */
body:has(.w-authPageWidth) div[role="contentinfo"] {
  color: #8a8f98 !important;
}

body:has(.w-authPageWidth) div[role="contentinfo"] a {
  color: #8a8f98 !important;
  text-decoration: none !important;
}

body:has(.w-authPageWidth) div[role="contentinfo"] a:hover {
  color: #5fe3b3 !important;
}

body:has(.w-authPageWidth) div[role="contentinfo"] div {
  border-color: #23252a !important;
}

/* ==========================================================================
   Ripple Signed-in Chat UI Overrides (Captain's request, 2026-09-08)
   Scoped strictly away from auth screens using body:not(:has(.w-authPageWidth))
   ========================================================================== */

/* Change 1 & 2: Hide Parameters and MCP Settings rail buttons
   Parameters is also turned off via interface.parameters: false in librechat.yaml.
   MCP Settings rail item is hidden here while keeping interface.mcpServers.use: true
   so that mcp-rag retrieval tools remain fully active and functioning. */
body:not(:has(.w-authPageWidth)) [data-testid="nav-panel-parameters"],
body:not(:has(.w-authPageWidth)) button[aria-label="Parameters"],
body:not(:has(.w-authPageWidth)) [data-testid="nav-panel-mcp-builder"],
body:not(:has(.w-authPageWidth)) button[aria-label="MCP Settings"] {
  display: none !important;
}

/* Change 3: Hide original file upload flow controls (rail and composer) */
body:not(:has(.w-authPageWidth)) [data-testid="nav-panel-files"],
body:not(:has(.w-authPageWidth)) #attach-file-menu-button,
body:not(:has(.w-authPageWidth)) #attach-file {
  display: none !important;
}

/* Change 3: Surface Course documents link in the left rail */
body:not(:has(.w-authPageWidth)) .ripple-course-docs-rail {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important; /* 36px / h-9 */
  height: 2.25rem !important; /* 36px / w-9 */
  border-radius: 0.5rem !important; /* 8px / rounded-lg */
  color: var(--text-secondary, #8a8f98) !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
}

body:not(:has(.w-authPageWidth)) .ripple-course-docs-rail:hover {
  background-color: var(--surface-hover, #1c1c1f) !important;
  color: var(--text-primary, #f7f8f8) !important;
}

/* Change 3: Surface Course documents link in the composer */
body:not(:has(.w-authPageWidth)) .ripple-course-docs-composer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important; /* 36px / size-9 */
  height: 2.25rem !important; /* 36px / size-9 */
  border-radius: 9999px !important; /* rounded-full */
  color: var(--text-secondary, #8a8f98) !important;
  text-decoration: none !important;
  padding: 0.25rem !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
}

body:not(:has(.w-authPageWidth)) .ripple-course-docs-composer:hover {
  background-color: var(--surface-hover, #1c1c1f) !important;
  color: var(--text-primary, #f7f8f8) !important;
}

/* Remove LibreChat footer credit in signed-in chat */
body:not(:has(.w-authPageWidth)) [role="contentinfo"],
body:not(:has(.w-authPageWidth)) div[role="contentinfo"],
body:not(:has(.w-authPageWidth)) footer[role="contentinfo"] {
  display: none !important;
}

/* Active conversation item: mint accent indicator & focus ring */
body:not(:has(.w-authPageWidth)) [data-testid="convo-item"]::before {
  background-color: var(--surface-submit, #5fe3b3) !important;
}

body:not(:has(.w-authPageWidth)) [data-testid="convo-item"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--surface-submit, #5fe3b3) !important;
}

/* Primary send button styling */
body:not(:has(.w-authPageWidth)) form button[aria-label="Send message"]:not(:disabled) {
  background-color: #5fe3b3 !important;
  color: #08090a !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

body:not(:has(.w-authPageWidth)) form button[aria-label="Send message"]:not(:disabled):hover {
  background-color: #72e8be !important;
}

/* Code blocks & JSON viewers */
body:not(:has(.w-authPageWidth)) pre,
body:not(:has(.w-authPageWidth)) .hljs {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

html:not(.dark) body:not(:has(.w-authPageWidth)) div:has(> code.hljs),
html:not(.dark) body:not(:has(.w-authPageWidth)) pre:has(> code) {
  background-color: #f0f2f4 !important;
}

html.dark body:not(:has(.w-authPageWidth)) div:has(> code.hljs),
html.dark body:not(:has(.w-authPageWidth)) pre:has(> code) {
  background-color: #141516 !important;
}

/* Dialog cards and Popovers */
body:not(:has(.w-authPageWidth)) [role="dialog"] div[class*="rounded-2xl"] {
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.25) !important;
}

body:not(:has(.w-authPageWidth)) .popover-ui {
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   Dark-mode literal-grey patch (Firstmate, 2026-09-10).

   The token block at the top of this file redefines custom properties, which
   is invisible wherever LibreChat paints a surface with a literal Tailwind
   utility (hex, not var()) instead of consuming one of those properties. Each
   surface below was confirmed against the committed dark screenshots
   (docs/screenshots/*.png, sampled with PIL) and the live bundle CSS
   (curl https://ripple.maestrolabs.ai/assets/index.*.css), never guessed:

     surface              literal culprit                     measured  fixed to
     html/body (canvas)   `.dark body,.dark html`(bg-gray-800) #212121   #08090a
     composer             `.dark\:bg-gray-700` (bg-gray-700)   #2f2f2f   #1c1c1f
     settings dialog      inline/lazy-chunk grey, rgb(18,18,18) #121212  #141516

   `html.dark` needs its own rule (the body:not(...) selector above only
   reaches body, and LibreChat's literal rule sets `.dark html` too).
   `.dark\:bg-gray-700` is scoped broadly on purpose: it is LibreChat's
   composer-input background class wherever it is used in the signed-in UI,
   not just the one composer instance this was measured on.

   Fixed 2026-09-10 (regression from the 2026-09-10 patch above): the two
   selectors below were unscoped by theme. `.dark\:bg-gray-700` is a Tailwind
   class name that stays on the element in both themes -- it only applies
   `dark:` styling under a `.dark` ancestor -- so matching it unconditionally
   made the composer near-black in light mode too. Scoped the same way the
   dialog rule below already was. `.bg-gray-700` (no `dark:` prefix) is a
   light-mode utility outright and there is no signed-in surface it needs to
   override here, so it is dropped rather than rescoped -- see the fix PR for
   the reproduction. */
html.dark:not(:has(.w-authPageWidth)) {
  background-color: #08090a !important;
}

html.dark body:not(:has(.w-authPageWidth)) .dark\:bg-gray-700,
.dark body:not(:has(.w-authPageWidth)) .dark\:bg-gray-700 {
  background-color: #1c1c1f !important;
}

/* Settings dialog (and any other Radix/shadcn dialog content) still resolving
   to a literal grey instead of --surface-dialog. */
html.dark body:not(:has(.w-authPageWidth)) [role="dialog"],
.dark body:not(:has(.w-authPageWidth)) [role="dialog"] {
  background-color: #141516 !important;
}