/*
 * American Pride Bank identity, applied over LibreChat's theme tokens.
 *
 * Injected at the proxy rather than compiled in, so the upstream image stays
 * unmodified and takes updates cleanly. Production would do this as a proper
 * source build; this is the demo-speed equivalent and is fully reversible.
 *
 * Palette from americanpride.bank:
 *   #0047ba  primary blue     #003487 / #002561  dark blues
 *   #aa182c  red              #bc1b3a            bright red
 */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap");

:root,
.dark,
[data-theme="dark"],
[data-theme="light"] {
  --apb-blue: #0047ba;
  --apb-blue-dark: #003487;
  --apb-navy: #002561;
  --apb-red: #aa182c;

  /* LibreChat's signature accent, retired in favour of the bank's blue. */
  --brand-purple: #0047ba;

  /* Affirmative surfaces: send button and similar. */
  --surface-submit: #0047ba;
  --surface-submit-hover: #003487;

  --ring-primary: #0047ba;
  --ring: #0047ba;

  --surface-destructive: #aa182c;
  --surface-destructive-hover: #8f1425;
  --text-destructive: #bc1b3a;
  --border-destructive: #bc1b3a;
}

html,
body {
  font-family: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ sidebar
   The single largest identity signal.

   LibreChat paints both the icon rail and the conversation list with the
   `bg-surface-primary-alt` utility, which reads `var(--surface-primary-alt)`.
   Redefining that token *on those elements* repaints the sidebar and cascades
   the light text tokens to their descendants, without reaching the chat pane.
   Taken from the rendered DOM, where exactly two elements carry the class.

   Riding the token system rather than element classes also means an upstream
   markup change does not silently strip the branding. */

.bg-surface-primary-alt {
  --surface-primary-alt: var(--apb-navy);

  --text-primary: #ffffff;
  --text-secondary: #c3d3ec;
  --text-tertiary: #9db3d6;

  --surface-hover: rgba(255, 255, 255, 0.10);
  --surface-hover-alt: rgba(255, 255, 255, 0.14);
  --surface-active: rgba(255, 255, 255, 0.16);
  --surface-active-alt: rgba(255, 255, 255, 0.16);
  --surface-tertiary: rgba(255, 255, 255, 0.08);
  --surface-secondary: rgba(255, 255, 255, 0.06);

  --border-light: rgba(255, 255, 255, 0.14);
  --border-medium: rgba(255, 255, 255, 0.18);

  --header-primary: #ffffff;
  --header-hover: rgba(255, 255, 255, 0.12);
  --header-button-hover: rgba(255, 255, 255, 0.12);

  border-right-color: #001b47;
}

/* Some sidebar icons carry their own colour rather than inheriting from the
   button, which paints them black on the navy field. Icons here are drawn with
   currentColor, so forcing inheritance puts them back on the text tokens above. */
.bg-surface-primary-alt svg {
  color: inherit !important;
}

/* The mounted asset doubles as the per conversation endpoint icon in the list.
   Do NOT give it wordmark dimensions here: it is a wide lockup, and sizing it
   lays it straight across the conversation title. Leave upstream sizing alone
   and only reverse it so it reads on the navy field. */
.bg-surface-primary-alt img[src*="logo"] {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* ------------------------------------------------------- sign in / register
   The first screen anyone sees. Real class names taken from the rendered DOM:
   the mark sits in a fixed h-10 box, and the heading ships with `text-black`. */

/* Give the mark room. Without this it renders at 40px and reads as an afterthought. */
.mt-6.h-10.w-full.bg-cover {
  height: 4.5rem !important;
  margin-top: 2.75rem !important;
  margin-bottom: 0.5rem;
}

/* Brand band across the top of the auth page. The container is flex-col, so a
   ::before becomes its first child and spans the full width cleanly. */
.flex.min-h-screen.flex-col::before {
  content: "";
  display: block;
  order: -2;
  height: 5px;
  background: linear-gradient(90deg, #002561 0%, #0047ba 55%, #aa182c 100%);
}

/* The heading carries `text-black`, so it needs to be overridden explicitly. */
h1.text-black {
  color: #002561 !important;
}

/* Card edge on the sign-in panel. */
.w-authPageWidth {
  border-top: 3px solid #0047ba;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ avatars
   Default user avatars are DiceBear initials baked into a data URI with a
   random fill, which lands on orange here and fights the navy. The colour is
   inside the SVG so it cannot be set directly; rotating the hue moves the
   plate to the bank's blue and leaves the white initials untouched, since
   white has no hue to rotate. */

img[src*="DiceBear"],
img[src*="dicebear"] {
  filter: hue-rotate(184deg) saturate(1.15);
}

/* --------------------------------------------------------------- accents */

[class*="text-brand-purple"] { color: var(--apb-blue) !important; }
[class*="bg-brand-purple"]   { background-color: var(--apb-blue) !important; }
[class*="border-brand-purple"] { border-color: var(--apb-blue) !important; }

button[data-testid="send-button"],
button[type="submit"] {
  background-color: var(--apb-blue);
}
button[data-testid="send-button"]:hover,
button[type="submit"]:hover {
  background-color: var(--apb-blue-dark);
}

.prose a,
a[target="_blank"] {
  color: var(--apb-blue);
  text-decoration-color: rgba(0, 71, 186, 0.4);
}

/* Landing headline on an empty conversation. */
main h1,
main h2 {
  color: var(--apb-navy);
  letter-spacing: -0.01em;
}

* {
  scrollbar-color: #b9c4d4 transparent;
}

/* ------------------------------------------------------- demonstration notice
   This environment runs in Provider's cloud account rather than the Bank's.
   Anyone reaching the sign in page should know that before they type anything,
   so the notice sits above the form rather than in a footer nobody reads. */

.flex.min-h-screen.flex-col::after {
  content: "Demonstration environment. Sample data only. Do not upload Bank records.";
  display: block;
  order: -1;
  margin: 1.25rem auto 0;
  padding: 0.55rem 1rem;
  max-width: 26rem;
  border: 1px solid #f0c36b;
  border-radius: 5px;
  background: #fdf6e4;
  color: #6b4e12;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
}