/*
 * Jera skin for LibreChat 0.8.x, from the Jera Design System (V6, September 2026).
 * Navy ink on white paper, one violet accent, Arial, square corners, and the
 * green-cyan-violet rail on the top and bottom trim. Dark mode uses the masthead navy.
 *
 * It works by overriding LibreChat's own CSS variables (no fork, no rebuild).
 * Loaded after LibreChat's stylesheet by the patched index.html (admin/apply-theme.sh).
 * If a LibreChat upgrade renames variables, re-check this file against the new
 * dist/assets/index.*.css before deploying.
 */
@import url("jera-palette.css"); /* generated: LibreChat's compiled greys -> Jera navy */

/* The grey scale LibreChat's components use, re-based on Jera navy. */
:root {
  --gray-20: #f8f9fd;
  --gray-50: #f8f9fd;
  --gray-100: #eef1f8;
  --gray-200: #dce2f2;
  --gray-300: #c6ccde;
  --gray-400: #8f98b8;
  --gray-500: #5a6486;
  --gray-600: #2b3170;
  --gray-700: #1d2558;
  --gray-800: #131b46;
  --gray-850: #0b1437;
  --gray-900: #080c28;
}

/* Light: the letter paper. */
html {
  --brand-purple: #7c3aed;
  --presentation: #ffffff;
  --text-primary: #0b1437;
  --text-secondary: #39415f;
  --text-secondary-alt: #4a5578;
  --text-tertiary: #4a5578;
  --text-destructive: #b42318;
  --text-warning: #a15c07;
  --ring-primary: #7c3aed;
  --header-primary: #ffffff;
  --header-hover: #f8f9fd;
  --header-button-hover: #f1ecfd;
  --surface-active: #f1ecfd;
  --surface-active-alt: #f1ecfd;
  --surface-hover: #f1ecfd;
  --surface-hover-alt: #dce2f2;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f8f9fd;
  --surface-primary-contrast: #eef1f8;
  --surface-secondary: #f8f9fd;
  --surface-secondary-alt: #eef1f8;
  --surface-tertiary: #eef1f8;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-submit: #0b1437;
  --surface-submit-hover: #39415f;
  --surface-destructive: #b42318;
  --surface-destructive-hover: #8f1c13;
  --surface-chat: #ffffff;
  --border-light: #dce2f2;
  --border-medium-alt: #c6ccde;
  --border-medium: #c6ccde;
  --border-heavy: #5a6486;
  --border-xheavy: #39415f;
  --border-destructive: #b42318;
  --border: 226 33% 82%;
  --ring: 262 83% 58%;
}

/* Dark: the masthead navy, accent lightened to the HIGHER violet. */
html.dark {
  --brand-purple: #a78bfa;
  --presentation: #080c28;
  --text-primary: #f8f9fd;
  --text-secondary: #c3c4d9;
  --text-secondary-alt: #9aa3c2;
  --text-tertiary: #9aa3c2;
  --text-destructive: #f97066;
  --text-warning: #fdb022;
  --ring-primary: #a78bfa;
  --header-primary: #0b1437;
  --header-hover: #131b46;
  --header-button-hover: #1d1650;
  --surface-active: #1d1650;
  --surface-active-alt: #1d1650;
  --surface-hover: #1d1650;
  --surface-hover-alt: #2b3170;
  --surface-primary: #080c28;
  --surface-primary-alt: #0b1437;
  --surface-primary-contrast: #0b1437;
  --surface-secondary: #0b1437;
  --surface-secondary-alt: #131b46;
  --surface-tertiary: #131b46;
  --surface-tertiary-alt: #131b46;
  --surface-dialog: #131b46;
  --surface-submit: #5f1790;
  --surface-submit-hover: #3b1a74;
  --surface-destructive: #b42318;
  --surface-destructive-hover: #8f1c13;
  --surface-chat: #131b46;
  --border-light: #2b3170;
  --border-medium-alt: #2b3170;
  --border-medium: #2b3170;
  --border-heavy: #8f98b8;
  --border-xheavy: #c3c4d9;
  --border-destructive: #f97066;
  --border: 234 45% 30%;
  --ring: 255 92% 76%;
}

/* Arial throughout; code keeps its monospace face. */
/* LibreChat names Inter on many elements; Jera is Arial everywhere except code and maths. */
html, body, body *:not(code):not(pre):not(kbd):not(samp):not(.font-mono):not([class*="katex"]):not(svg):not(svg *) {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
code, pre, kbd, samp, .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }

/* Jera is square: panels, buttons, inputs, menus, dialogs, bubbles. */
*, *::before, *::after { border-radius: 0 !important; }
/* The only round things: radio buttons and status dots. */
input[type="radio"], [role="radio"] > span, .jera-dot { border-radius: 9999px !important; }

/* Links and the focus ring use the one accent. */
.prose a, a.underline, .markdown a { color: var(--brand-purple) !important; }
:focus-visible { outline: 2px solid var(--ring-primary) !important; outline-offset: 2px !important; }

/* The rail: once on the top trim, once on the bottom trim. Never a divider. */
body::before, body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #22c55e, #22d3ee 50%, #6d28d9);
  z-index: 2147483000;
  pointer-events: none;
}
body::before { top: 0; }
body::after { bottom: 0; }

/* The logo file is the navy Jera mark; flip it to white on dark surfaces. */
html.dark img[src*="logo.svg"] { filter: brightness(0) invert(1); }

/* Bullets as small accent squares, like the letterhead. */
.prose ul > li::marker, .markdown ul > li::marker { color: var(--brand-purple); content: "\25AA  "; }

/* Table headers: the solid ink bar with white tracked caps. */
.prose thead th, .markdown thead th {
  background: #0b1437 !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 10.67px;
}
html.dark .prose thead th, html.dark .markdown thead th { background: #5f1790 !important; }

/* LibreChat outlines a focused field in green; Jera uses the accent. */
.focus\:border-green-500:focus, .focus-visible\:border-green-500:focus-visible,
.focus\:ring-green-500:focus { border-color: var(--ring-primary) !important; --tw-ring-color: var(--ring-primary) !important; }