/* ============================================================================
   Atlas GALAXY theme for LibreChat v0.8.7 — black + electric blue, deep-space.
   Complete replacement for custom.css. Same selectors/tokens as the simple
   theme (nothing regresses) plus nebula gradients, a star field, and blue
   glow on the primary/submit button and the focused composer.
   Loaded via <link rel="stylesheet" href="./custom.css"> in dist/index.html.
   ============================================================================ */

/* ---- Shared palette (hex/rgba, used by the gradient/glow rules below) ---- */
:root {
  --atlas-void: #05070f;      /* near-black base */
  --atlas-space: #070b17;     /* near-black, slightly lifted */
  --atlas-panel: #0a0f1e;     /* sidebar / secondary panels */
  --atlas-elevated: #101a2e;  /* hover rows, tertiary surfaces */
  --atlas-blue: #3b82f6;      /* electric blue accent */
  --atlas-blue-bright: #60a5fa; /* lighter blue accent */
  --atlas-cyan: #7dd3fc;      /* brighter cyan-blue highlight (focus/rings) */
}

/* ============================================================================
   Token overrides — dark theme (same selector/props as the prior custom.css,
   extended with the surface/text/border tokens LibreChat 0.8 also defines).
   ============================================================================ */
.dark {
  /* core shadcn HSL tokens */
  --background: 229 60% 5%;         /* #05070f near-black blue */
  --foreground: 210 40% 96%;        /* #eef2f9 icy off-white */
  --primary: 217 91% 60%;           /* #3b82f6 electric blue */
  --primary-foreground: 229 60% 5%;
  --secondary: 222 47% 9%;          /* #0a0f1e panels */
  --secondary-foreground: 210 40% 96%;
  --muted: 222 47% 9%;
  --muted-foreground: 218 25% 65%;  /* #9aa8c7 muted blue-gray */
  --accent: 221 45% 13%;            /* #101a2e */
  --accent-foreground: 210 40% 96%;
  --destructive: 0 70% 45%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 45% 20%;            /* blue-tinted borders */
  --input: 220 45% 20%;
  --ring: 199 89% 74%;              /* #7dd3fc cyan-blue focus rings */
  --card: 222 47% 9%;
  --card-foreground: 210 40% 96%;

  /* surface text ramp (blue-black) */
  --gray-20: #eef2f9;
  --gray-50: #dde4f0;
  --gray-100: #c7d0e3;
  --gray-200: #a9b6d1;
  --gray-300: #8a99bd;
  --gray-400: #6c7ba3;
  --gray-500: #4f5f89;
  --gray-600: #33456c;
  --gray-700: #1c2a47;
  --gray-800: #0a0f1e;
  --gray-850: #070b17;
  --gray-900: #05070f;

  /* accent/live states — electric blue only */
  --brand-purple: #3b82f6;
  --surface-submit: #3b82f6;
  --surface-submit-hover: #2563eb;
  --text-warning: #60a5fa;
  --ring-primary: rgba(96, 165, 250, 0.55);

  /* LibreChat 0.8 surface/text/border tokens (not overridden by the old theme) */
  --surface-primary: #05070f;   /* main app background */
  --surface-secondary: #0a0f1e; /* sidebar, panels */
  --surface-tertiary: #101a2e;  /* hover/elevated rows */
  --surface-chat: #05070f;      /* conversation background */
  --surface-dialog: #0d1321;    /* modals/popovers */
  --text-primary: #e8ecf5;
  --text-secondary: #9aa8c7;
  --border-light: #1c2a47;
  --border-medium: #27395c;
}


/* ============================================================================
   Visuals: nebula gradients + star field + glow.
   Applied under both `.dark` and the forced `:root:not(.dark)` state so the
   look is identical regardless of the stored theme preference.
   ============================================================================ */

/* Main app background — subtle blue nebula wash over near-black.
   GUESS: targets html/body + #root, the stable top-level containers; the
   actual scrollable chat pane may sit on an inner wrapper — verify visually. */
html.dark,
html.dark body,
html.dark #root,
html:not(.dark),
html:not(.dark) body,
html:not(.dark) #root {
  background-color: var(--atlas-void);
  background-image:
    radial-gradient(ellipse 70% 50% at 15% -10%, rgba(59, 130, 246, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 15%, rgba(96, 165, 250, 0.10), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 115%, rgba(10, 15, 30, 0.6), transparent 60%);
  background-attachment: fixed;
}

/* Sidebar — same nebula treatment, slightly different focal point so it
   doesn't look identical to the main pane.
   GUESS: `#nav` is LibreChat's conversation-sidebar container id. */
#nav {
  background-color: var(--atlas-panel);
  background-image:
    radial-gradient(ellipse 90% 40% at 50% -20%, rgba(59, 130, 246, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(96, 165, 250, 0.08), transparent 55%);
  border-right: 1px solid var(--border-light);
}

/* Chat message area — faint star field: 3 layered dot gradients at low
   opacity, tiled at different sizes so the pattern doesn't repeat visibly.
   GUESS: applied broadly via `--surface-chat` consumers; if the conversation
   pane uses a different class, move this block to that selector. */
[class*="bg-surface-chat"],
main {
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(232, 236, 245, 0.5), transparent 100%),
    radial-gradient(1px 1px at 68% 64%, rgba(125, 211, 252, 0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 12%, rgba(96, 165, 250, 0.35), transparent 100%);
  background-repeat: repeat;
  background-size: 180px 180px, 240px 220px, 300px 300px;
}

/* Primary / submit button — soft blue glow. */
button[type='submit'],
[data-testid='send-button'],
.btn-primary {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 0 14px 2px rgba(59, 130, 246, 0.45);
}

/* Composer — blue-tinted border, glowing ring on focus.
   GUESS: `#prompt-textarea` is the message textarea's id; the focus-within
   glow on its parent form is a guess about the wrapping element. */
#prompt-textarea {
  caret-color: var(--atlas-cyan);
}
#prompt-textarea:focus,
form:focus-within {
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.5), 0 0 18px 3px rgba(59, 130, 246, 0.35);
}

/* Blue-tinted borders everywhere a border token is consumed. */
.dark,
html:not(.dark) {
  --border: 220 45% 20%;
}

/* Tailwind literal-color overrides — these classes hardcode colors inline
   instead of reading a CSS var, so they win over the tokens above unless
   forced. Kept narrow (nav/composer/dialogs only) to avoid an !important
   storm elsewhere. */
.dark [class*='bg-white'],
.dark [class*='bg-gray-50'],
html:not(.dark) [class*='bg-white'],
html:not(.dark) [class*='bg-gray-50'] {
  background-color: var(--surface-secondary) !important;
}