/* ═══════════════════════════════════════════════════════════════
   hq.kevinryan.io — LibreChat theme override
   Tokyo Night Moon · lifted verbatim from sites/kevinryan-io globals.css
   Loaded via <link> injected into index.html (see initContainer).
   Overrides LibreChat's CSS-variable theming system so both light and
   dark themes render as Tokyo Night Moon.
   ═══════════════════════════════════════════════════════════════ */

/* Force dark mode on load so there is no light flash. */
html,
body,
#root {
  background-color: #222436 !important;
}
html:not(.dark) {
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   Dark-theme-only: make light theme identical to dark and hide the
   theme selector so users cannot toggle out of Tokyo Night Moon.
   ═══════════════════════════════════════════════════════════════ */

/* Light theme = dark theme (same Moon values). The html selector above
   already sets the dark palette; this ensures html:not(.dark) inherits the
   same surface/ink/line tokens so a stray .light class still renders dark. */
html:not(.dark) {
  --text-primary: #c8d3f5;
  --text-secondary: #a9b1d6;
  --text-secondary-alt: #828bb8;
  --text-tertiary: #828bb8;
  --header-primary: #1a1b26;
  --header-hover: #2f334d;
  --header-button-hover: #2f334d;
  --surface-primary: #222436;
  --surface-primary-alt: #1f2335;
  --surface-secondary: #1f2335;
  --surface-tertiary: #2f334d;
  --surface-dialog: #1f2335;
  --surface-chat: #1a1b26;
  --border-light: #2f334d;
  --border-medium: #3b4261;
  --border-heavy: #444a73;
  --background: 226 36% 17%;
  --foreground: 230 68% 87%;
}

/* bg-white in light context → Moon main bg (covers auth page card etc.) */
.bg-white { background-color: #222436 !important; }

/* Hide the theme selector button (login page bottom-left + settings).
   Exact-match aria-labels only — verified present as literals in the
   upstream bundle ('Toggle theme', en; 'Ocultar tema', es). The old
   substring wildcard ([aria-label*="theme" i]) could hide unrelated
   future upstream buttons whose label merely contains "theme". */
button[aria-label="Toggle theme"],
button[aria-label="Ocultar tema"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Login page header.
   The h1 text itself is "HQ": the en-locale i18n string
   (com_auth_welcome_back) is patched in the JS bundle by the
   patch-index initContainer — real DOM text, so screen readers
   announce "HQ". This rule only adds brand letter-spacing; the old
   font-size:0 + ::after hack is gone.
   ═══════════════════════════════════════════════════════════════ */
h1.text-3xl.text-center {
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════
   Remove LibreChat branding: the lucide Feather icon is the default
   icon rendered by ConvoIcon/AgentAvatar when no AI/endpoint is
   selected (landing page, new chat, message endpoint fallback). Hide
   the feather SVG and its circular container.
   ═══════════════════════════════════════════════════════════════ */
svg.lucide-feather {
  display: none !important;
}
/* Hide the circular icon container that wraps a feather icon (landing
   page, nav, message rows) so no empty circle remains. */
div:has(> svg.lucide-feather) {
  display: none !important;
}

/* ── Base gray ramp → Moon surfaces ── */
:root {
  --gray-20: #c8d3f5;
  --gray-50: #1f2335;
  --gray-100: #c8d3f5;
  --gray-200: #a9b1d6;
  --gray-300: #828bb8;
  --gray-400: #737aa2;
  --gray-500: #444a73;
  --gray-600: #3b4261;
  --gray-700: #1f2335;
  --gray-800: #222436;
  --gray-850: #1f2335;
  --gray-900: #222436;
  --brand-purple: #c099ff;
}

/* ── Semantic tokens: light theme → Moon ── */
html {
  --text-primary: #c8d3f5;
  --text-secondary: #a9b1d6;
  --text-secondary-alt: #828bb8;
  --text-tertiary: #828bb8;
  --text-warning: #ffc777;
  --text-destructive: #ff757f;
  --ring-primary: #82aaff;
  --header-primary: #1a1b26;
  --header-hover: #2f334d;
  --header-button-hover: #2f334d;
  --surface-active: #2f334d;
  --surface-active-alt: #2f334d;
  --surface-hover: #2f334d;
  --surface-hover-alt: #2f334d;
  --surface-primary: #222436;
  --surface-primary-alt: #1f2335;
  --surface-primary-contrast: #1f2335;
  --surface-secondary: #1f2335;
  --surface-secondary-alt: #1f2335;
  --surface-tertiary: #2f334d;
  --surface-tertiary-alt: #2f334d;
  --surface-dialog: #1f2335;
  --surface-submit: #4fd6be;
  --surface-submit-hover: #86e1fc;
  --surface-destructive: #f7768e;
  --surface-destructive-hover: #ff757f;
  --surface-chat: #1a1b26;
  --border-light: #2f334d;
  --border-medium-alt: #3b4261;
  --border-medium: #3b4261;
  --border-heavy: #444a73;
  --border-xheavy: #737aa2;
  --border-destructive: #ff757f;

  --background: 226 36% 17%;
  --foreground: 230 68% 87%;
  --card: 225 29% 16%;
  --card-foreground: 230 68% 87%;
  --primary: 220 100% 75%;
  --primary-foreground: 226 36% 17%;
  --secondary: 226 24% 24%;
  --secondary-foreground: 230 68% 87%;
  --muted: 226 24% 24%;
  --muted-foreground: 231 38% 76%;
  --accent: 270 100% 81%;
  --accent-foreground: 226 36% 17%;
  --destructive: 352 100% 74%;
  --destructive-foreground: 226 36% 17%;
  --border: 229 24% 30%;
  --input: 229 24% 24%;
  --ring: 220 100% 75%;
  --switch-unchecked: 229 24% 30%;
}

/* ── Semantic tokens: dark theme → Moon (same values) ── */
.dark {
  --text-primary: #c8d3f5;
  --text-secondary: #a9b1d6;
  --text-secondary-alt: #828bb8;
  --text-tertiary: #828bb8;
  --text-warning: #ffc777;
  --text-destructive: #ff757f;
  --ring-primary: #82aaff;
  --header-primary: #1a1b26;
  --header-hover: #2f334d;
  --header-button-hover: #2f334d;
  --surface-active: #2f334d;
  --surface-active-alt: #2f334d;
  --surface-hover: #2f334d;
  --surface-hover-alt: #2f334d;
  --surface-primary: #222436;
  --surface-primary-alt: #1f2335;
  --surface-primary-contrast: #1f2335;
  --surface-secondary: #1f2335;
  --surface-secondary-alt: #1f2335;
  --surface-tertiary: #2f334d;
  --surface-tertiary-alt: #2f334d;
  --surface-dialog: #1f2335;
  --surface-submit: #4fd6be;
  --surface-submit-hover: #86e1fc;
  --surface-destructive: #f7768e;
  --surface-destructive-hover: #ff757f;
  --surface-chat: #1a1b26;
  --border-light: #2f334d;
  --border-medium-alt: #3b4261;
  --border-medium: #3b4261;
  --border-heavy: #444a73;
  --border-xheavy: #737aa2;
  --border-destructive: #ff757f;

  --background: 226 36% 17%;
  --foreground: 230 68% 87%;
  --card: 225 29% 16%;
  --card-foreground: 230 68% 87%;
  --primary: 220 100% 75%;
  --primary-foreground: 226 36% 17%;
  --secondary: 226 24% 24%;
  --secondary-foreground: 230 68% 87%;
  --muted: 226 24% 24%;
  --muted-foreground: 231 38% 76%;
  --accent: 270 100% 81%;
  --accent-foreground: 226 36% 17%;
  --destructive: 352 100% 74%;
  --destructive-foreground: 226 36% 17%;
  --border: 229 24% 30%;
  --input: 229 24% 24%;
  --ring: 220 100% 75%;
  --switch-unchecked: 229 24% 30%;
}

/* ── Remove the logo image from the login page ── */
div:has(> img[src="assets/logo.svg"]) {
  display: none !important;
}

/* ── Brand accent: links and primary buttons read as Moon blue/magenta ── */
a {
  color: #82aaff;
}
.btn-primary {
  background-color: #82aaff !important;
  color: #1a1b26 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Compiled Tailwind utility overrides.
   LibreChat ships bg/text/border-gray-* compiled to LITERAL hex (not
   the --gray-* variables), so the variable overrides above don't reach
   them. Redefine each utility class with Tokyo Night Moon colors. My
   stylesheet loads after the bundle so equal-specificity rules win.
   ═══════════════════════════════════════════════════════════════ */

/* ── Surfaces (bg-gray-*) → Moon surface ramp ── */
.bg-gray-50  { background-color: #222436 !important; }
.bg-gray-100 { background-color: #2f334d !important; }
.bg-gray-200 { background-color: #2f334d !important; }
.bg-gray-300 { background-color: #3b4261 !important; }
.bg-gray-400 { background-color: #444a73 !important; }
.bg-gray-500 { background-color: #444a73 !important; }
.bg-gray-600 { background-color: #3b4261 !important; }
.bg-gray-700 { background-color: #1f2335 !important; }
.bg-gray-800 { background-color: #222436 !important; }
.bg-gray-850 { background-color: #1f2335 !important; }
.bg-gray-900 { background-color: #222436 !important; }
.bg-gray-950 { background-color: #1a1b26 !important; }

/* dark: variants (compiled as .dark .dark\:bg-gray-*) */
.dark .dark\:bg-gray-50  { background-color: #222436 !important; }
.dark .dark\:bg-gray-100 { background-color: #2f334d !important; }
.dark .dark\:bg-gray-200 { background-color: #2f334d !important; }
.dark .dark\:bg-gray-300 { background-color: #3b4261 !important; }
.dark .dark\:bg-gray-500 { background-color: #3b4261 !important; }
.dark .dark\:bg-gray-600 { background-color: #3b4261 !important; }
.dark .dark\:bg-gray-700 { background-color: #1f2335 !important; }
.dark .dark\:bg-gray-750 { background-color: #1f2335 !important; }
.dark .dark\:bg-gray-800 { background-color: #222436 !important; }
.dark .dark\:bg-gray-850 { background-color: #1f2335 !important; }
.dark .dark\:bg-gray-900 { background-color: #222436 !important; }
.dark .dark\:bg-gray-950 { background-color: #1a1b26 !important; }

/* bg-white in dark context → Moon main bg (covers auth page card etc.) */
.dark .bg-white { background-color: #222436 !important; }

/* ── Foregrounds (text-gray-*) → Moon ink ramp ── */
.text-gray-20  { color: #c8d3f5 !important; }
.text-gray-50  { color: #c8d3f5 !important; }
.text-gray-100 { color: #c8d3f5 !important; }
.text-gray-200 { color: #a9b1d6 !important; }
.text-gray-300 { color: #828bb8 !important; }
.text-gray-400 { color: #737aa2 !important; }
.text-gray-500 { color: #828bb8 !important; }
.text-gray-600 { color: #a9b1d6 !important; }
.text-gray-700 { color: #c8d3f5 !important; }
.text-gray-800 { color: #c8d3f5 !important; }
.text-gray-900 { color: #c8d3f5 !important; }

.dark .dark\:text-gray-100 { color: #c8d3f5 !important; }
.dark .dark\:text-gray-200 { color: #a9b1d6 !important; }
.dark .dark\:text-gray-300 { color: #828bb8 !important; }
.dark .dark\:text-gray-400 { color: #737aa2 !important; }
.dark .dark\:text-gray-500 { color: #828bb8 !important; }
.dark .dark\:text-gray-600 { color: #a9b1d6 !important; }
.dark .dark\:text-gray-700 { color: #c8d3f5 !important; }
.dark .dark\:text-gray-900 { color: #c8d3f5 !important; }

/* ── Borders (border-gray-*) → Moon line ramp ── */
.border-gray-50  { border-color: #2f334d !important; }
.border-gray-100 { border-color: #2f334d !important; }
.border-gray-200 { border-color: #2f334d !important; }
.border-gray-300 { border-color: #3b4261 !important; }
.border-gray-400 { border-color: #444a73 !important; }
.border-gray-500 { border-color: #444a73 !important; }
.border-gray-600 { border-color: #3b4261 !important; }
.border-gray-700 { border-color: #2f334d !important; }
.border-gray-800 { border-color: #1f2335 !important; }

.dark .dark\:border-gray-200 { border-color: #2f334d !important; }
.dark .dark\:border-gray-300 { border-color: #3b4261 !important; }
.dark .dark\:border-gray-400 { border-color: #444a73 !important; }
.dark .dark\:border-gray-500 { border-color: #444a73 !important; }
.dark .dark\:border-gray-600 { border-color: #3b4261 !important; }
.dark .dark\:border-gray-700 { border-color: #2f334d !important; }
.dark .dark\:border-gray-800 { border-color: #1f2335 !important; }
.dark .dark\:border-gray-900 { border-color: #1f2335 !important; }

/* ═══════════════════════════════════════════════════════════════
   Auth form: text boxes + submit button.
   LibreChat's inputs focus to green-500 (#10a37f) and the submit
   button is green (surface-submit = #047857, text-white). Repaint to
   Tokyo Night Moon: blue focus, teal/cyan submit with dark ink text.
   ═══════════════════════════════════════════════════════════════ */

/* ── Input focus border → Moon blue ── */
.focus\:border-green-500:focus,
.focus\:border-green-500:focus-visible,
.focus-visible\:border-green-500:focus-visible {
  border-color: #82aaff !important;
}

/* ── Floating label peer-focus → Moon blue ── */
.peer-focus\:text-green-600 {
  color: #82aaff;
}
.peer-focus\:text-green-600:peer-focus {
  color: #82aaff !important;
}
.dark .dark\:peer-focus\:text-green-500 {
  color: #82aaff;
}
.dark .dark\:peer-focus\:text-green-500:peer-focus {
  color: #82aaff !important;
}

/* ── Submit button: green → Moon teal/cyan, dark ink text ── */
.bg-surface-submit {
  background-color: #4fd6be !important;
}
.hover\:bg-surface-submit-hover:hover {
  background-color: #86e1fc !important;
}
/* Button text: white → Moon deepest surface for contrast on teal */
button.bg-surface-submit,
.bg-surface-submit.text-white,
.bg-surface-submit .text-white {
  color: #1a1b26 !important;
}

/* ── Green accents elsewhere (links, success banners) → Moon teal/blue ── */
.text-green-600, .dark .dark\:text-green-500 { color: #4fd6be !important; }
.hover\:text-green-700:hover, .dark .dark\:hover\:text-green-400:hover { color: #86e1fc !important; }
.border-green-500 { border-color: #4fd6be !important; }
.bg-green-500\/10 { background-color: rgba(79, 214, 190, 0.1) !important; }

/* ═══════════════════════════════════════════════════════════════
   Auth inputs + submit button: square corners + Moon panel bg.
   LibreChat's auth inputs are rounded-2xl (1rem radius) on
   bg-surface-primary, which applyTheme sets inline to near-black in
   dark mode. Square the corners and repaint the input bg to Moon
   panel (#1f2335) so the fields read as fields, not voids.
   ═══════════════════════════════════════════════════════════════ */

/* ── Auth text inputs: square corners + Moon panel background ── */
/* webkit-dark-styles paints a giant inset box-shadow #0d0d0d over the input
   interior (Safari autofill hack), covering the background-color. Recolor
   it to Moon panel so the field matches the floating-label bg. */
.webkit-dark-styles,
.dark .webkit-dark-styles:focus {
  -webkit-box-shadow: inset 0 0 0 50vh #1f2335 !important;
  -webkit-text-fill-color: #c8d3f5 !important;
}

input.peer.rounded-2xl {
  border-radius: 0 !important;
  background-color: #1f2335 !important;
  border-color: #3b4261 !important;
  color: #c8d3f5 !important;
}
input.peer.rounded-2xl::placeholder {
  color: #828bb8;
}
/* floating label bg matches the input field */
input.peer.rounded-2xl + label {
  background-color: #1f2335 !important;
}

/* ── Submit button: square corners ── */
button[type="submit"].rounded-2xl,
button.bg-surface-submit.rounded-2xl {
  border-radius: 0 !important;
}