/* ============================================================
   HERMES COSMIC THEME — Arrival x Obsidian constellation
   Locked palette: /root/vault/hermes/wallpapers/Hermes-Cosmic-Palette.md

   LibreChat v0.8.6 uses a semantic CSS-variable surface system:
     --surface-primary / --surface-secondary / --surface-tertiary
     --text-primary / --text-secondary / --text-tertiary
   mapped by default to --gray-900 / --gray-800 / --gray-700 etc.
   Override the VARIABLES on .dark, not the old gray-N utility classes.
   ============================================================ */

:root {
  --hermes-void: #090b0e;
  --hermes-concrete-dark: #1a1d20;
  --hermes-concrete-mid: #304050;
  --hermes-concrete-light: #405050;
  --hermes-haze: #5c6b75;
  --hermes-gold: #e8a83c;
  --hermes-gold-bright: #fce080;
  --hermes-text: #e8e6e0;
}

/* Fixed wallpaper behind the whole app */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #07090d;
  background-image: url("/images/wallpaper-dimmed.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95;
  pointer-events: none;
}

/* Override LibreChat's real surface variable system (dark mode) so every
   bg-surface-primary/secondary/tertiary consumer becomes semi-transparent
   and the wallpaper shows through consistently, not just pre-hydration. */
.dark {
  --surface-primary: rgba(9, 11, 14, 0.55) !important;
  --surface-primary-alt: rgba(26, 29, 32, 0.5) !important;
  --surface-primary-contrast: rgba(26, 29, 32, 0.5) !important;
  --surface-secondary: rgba(26, 29, 32, 0.45) !important;
  --surface-secondary-alt: rgba(26, 29, 32, 0.45) !important;
  --surface-tertiary: rgba(48, 64, 80, 0.4) !important;
  --surface-tertiary-alt: rgba(48, 64, 80, 0.4) !important;
  --surface-chat: rgba(9, 11, 14, 0.35) !important;
  --surface-dialog: rgba(26, 29, 32, 0.85) !important;
  --presentation: rgba(26, 29, 32, 0.5) !important;

  --text-primary: #e8e6e0 !important;
  --text-secondary: #c9c6bd !important;
  --text-secondary-alt: #a9a69f !important;
  --text-tertiary: #8a938c !important;

  --surface-submit: #e8a83c !important;
  --surface-submit-hover: #fce080 !important;

  --border-light: rgba(64, 80, 80, 0.35) !important;
  --border-medium: rgba(64, 80, 80, 0.5) !important;
  --border-heavy: rgba(64, 80, 80, 0.7) !important;
}

/* Base html/body: transparent, let wallpaper show through */
html.dark body,
.dark body,
#root {
  background-color: transparent !important;
}

/* Some pages (e.g. login/register) use Tailwind's dark: variant classes
   directly, e.g. class="bg-white dark:bg-gray-900" — the colon is part of
   the literal class name and must be escaped in CSS. Cover these so the
   wallpaper shows through everywhere, not just via the semantic tokens. */
.dark .dark\:bg-gray-900 {
  background-color: rgba(9, 11, 14, 0.55) !important;
}
.dark .dark\:bg-gray-800 {
  background-color: rgba(26, 29, 32, 0.5) !important;
}
.dark .dark\:bg-gray-850 {
  background-color: rgba(26, 29, 32, 0.5) !important;
}
.dark .dark\:bg-gray-700 {
  background-color: rgba(48, 64, 80, 0.4) !important;
}
/* Also cover the case where dark mode is applied without the variant prefix
   (plain utility classes used inside .dark-scoped components) */
.dark.bg-gray-900,
.dark .bg-gray-900 {
  background-color: rgba(9, 11, 14, 0.55) !important;
}
.dark.bg-gray-800,
.dark .bg-gray-800 {
  background-color: rgba(26, 29, 32, 0.5) !important;
}
.dark.bg-gray-850,
.dark .bg-gray-850 {
  background-color: rgba(26, 29, 32, 0.5) !important;
}
.dark.bg-gray-700,
.dark .bg-gray-700 {
  background-color: rgba(48, 64, 80, 0.4) !important;
}

/* Links + accents -> gold */
.dark a {
  color: var(--hermes-gold-bright) !important;
}

/* Focus / hover glow — buttons, links, menu items only.
   Deliberately excludes text inputs/textareas (the chat composer)
   so typing doesn't draw a stark gold line through the box. */
.dark button:focus-visible,
.dark a:focus-visible,
.dark [role="button"]:focus-visible,
.dark [role="menuitem"]:focus-visible {
  outline-color: var(--hermes-gold-bright) !important;
  box-shadow: 0 0 8px rgba(252, 224, 128, 0.35) !important;
}

/* Composer textarea: no outline at all on focus, keep it calm */
.dark textarea:focus,
.dark textarea:focus-visible,
.dark input[type="text"]:focus,
.dark input[type="text"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Send button + primary action accents */
.dark button[type="submit"],
.dark .bg-surface-submit {
  background-color: var(--hermes-gold) !important;
  color: var(--hermes-void) !important;
}

/* Soften stock footer/branding links without hiding functionality */
footer a[href*="librechat"],
.text-token-text-tertiary a[href*="librechat"] {
  opacity: 0.55;
}