/*
 * Primex theme override for LibreChat (Primex Chat).
 *
 * LibreChat has no config knob for brand colors — they live in CSS variables in
 * the prebuilt bundle. This file is loaded AFTER the app's own stylesheet (see
 * the <link> in branding/index.html) so these win by source order.
 *
 * LibreChat's dark theme maps every surface to a neutral gray scale. We remap
 * the SEMANTIC variables to the Primex palette so the whole chat matches the
 * mini-app's near-black + violet look. Dark-only values are scoped to `.dark`
 * so light mode isn't turned into dark-on-dark; the accent is applied to both.
 *
 * Primex palette: bg #0B0B0F · surface #111116 · violet #6C5CE7
 *                 light violet #a29bfe · cyan #50E6FF.
 *
 * ⚠ VERSION-COUPLED: if a LibreChat image upgrade renames these variables, the
 * theme silently reverts to gray — re-check the variable names against the new
 * dist CSS after any upgrade (grep `.dark{` in assets/index.*.css).
 *
 * NOTE: LibreChat defines surfaces under BOTH `.dark` and `.gizmo.dark` (two
 * classes = higher specificity), and the root element carries both classes. A
 * plain `.dark` override loses that cascade, so the variable values below use
 * `!important` — which wins regardless of selector specificity. (Valid on CSS
 * custom-property declarations.)
 */

/* ---- Accent: applies in both light and dark ---- */
:root,
.dark {
  --brand-purple: #6c5ce7 !important;
  --surface-submit: #6c5ce7 !important;
  --surface-submit-hover: #5a4bd4 !important;
  --ring-primary: #6c5ce7 !important;
}

/* ---- Primex dark surfaces (dark mode only) ---- */
.dark {
  --presentation: #0b0b0f !important;

  /* Backgrounds: main chat = deepest, panels/cards = surface */
  --surface-primary: #0b0b0f !important;
  --surface-primary-alt: #111116 !important;
  --surface-primary-contrast: #111116 !important;
  --surface-secondary: #111116 !important;
  --surface-secondary-alt: #15151b !important;
  --surface-tertiary: #17171d !important;
  --surface-tertiary-alt: #1b1b22 !important;
  --surface-dialog: #111116 !important;
  --surface-chat: #111116 !important;

  /* Hover / active states: subtle violet-tinted lift */
  --surface-hover: #1d1d25 !important;
  --surface-hover-alt: #23232b !important;
  --surface-active: #262630 !important;
  --surface-active-alt: #2c2c37 !important;

  /* Header */
  --header-primary: #111116 !important;
  --header-hover: #1d1d25 !important;
  --header-button-hover: #23232b !important;

  /* Borders: faint white, like the mini-app's rgba(255,255,255,0.1) */
  --border-light: rgba(255, 255, 255, 0.06) !important;
  --border-medium: rgba(255, 255, 255, 0.10) !important;
  --border-medium-alt: rgba(255, 255, 255, 0.10) !important;
  --border-heavy: rgba(255, 255, 255, 0.16) !important;
  --border-xheavy: rgba(255, 255, 255, 0.22) !important;

  /* Secondary text → Primex light violet for brand cohesion */
  --text-secondary: #a29bfe !important;
}

/* ---- Send button: Primex violet (default dark theme uses a white button) ---- */
.dark form button[type='submit'],
.dark button[aria-label*='Send' i],
.dark button[data-testid='send-button'] {
  background-color: #6c5ce7 !important;
  border-color: #6c5ce7 !important;
}
.dark form button[type='submit'] svg,
.dark button[aria-label*='Send' i] svg,
.dark button[data-testid='send-button'] svg {
  color: #ffffff !important;
}