/* ============================================================================
   Command Center — brand overrides for LibreChat
   ----------------------------------------------------------------------------
   Injected as a <link> before </head> of dist/index.html at image build time,
   so it loads AFTER LibreChat's stylesheet and wins at equal specificity.

   LibreChat's neutral base is already grey (--gray-* drives every surface,
   border and text token), so only the accent moves. Upstream uses its accent
   in exactly two places: --surface-submit / --surface-submit-hover, both
   pointing at the emerald ramp (--green-700 #047857, --green-500 #10b981 —
   this is the "teal"). Everything below repoints accents at the red ramp that
   already ships with LibreChat (--red-700 #b91c1c matches the badge).

   Rule: never redefine a base value, only re-point or tint it. That keeps the
   light and dark themes structurally identical to stock.
   ========================================================================= */

/* ---------------------------------------------------------------- accent -- */
:root {
  --surface-submit: var(--red-700);
  --surface-submit-hover: var(--red-800);
  --ring-primary: var(--red-600);
  --ring: 0 74% 42%; /* shadcn HSL triple, not a colour function */
}

.dark {
  --surface-submit: var(--red-700);
  --surface-submit-hover: var(--red-800);
  --ring-primary: var(--red-500);
  --ring: 0 84% 60%;
}

/* ------------------------------------------------- active / selected state --
   Tint the stock grey rather than replacing it, so contrast ratios stay in
   the same band as upstream. Base values here mirror LibreChat's own:
   light  --surface-active: var(--gray-100) / -alt: var(--gray-200)
   dark   --surface-active: var(--gray-500) / -alt: var(--gray-700)          */
:root {
  --surface-active: color-mix(in srgb, var(--red-600) 8%, var(--gray-100));
  --surface-active-alt: color-mix(in srgb, var(--red-600) 8%, var(--gray-200));
}

.dark {
  --surface-active: color-mix(in srgb, var(--red-600) 14%, var(--gray-500));
  --surface-active-alt: color-mix(in srgb, var(--red-600) 14%, var(--gray-700));
}

/* ----------------------------------------------------------------- links --
   Links in chat content are Tailwind-classed, not variable-driven. Upstream:
     p.whitespace-pre-wrap a, li a            { color: #06c }
     .dark p.whitespace-pre-wrap a, .dark li a { color: #52a0ff }
   Resting state stays blue (conventional + readable); only hover goes red. */
p.whitespace-pre-wrap a:hover,
li a:hover,
.markdown a:hover,
.prose a:hover {
  color: var(--red-600);
}

.dark p.whitespace-pre-wrap a:hover,
.dark li a:hover,
.dark .markdown a:hover,
.dark .prose a:hover {
  color: var(--red-400);
}

/* ------------------------------------------------------------ login logo --
   LibreChat renders the auth logo inside an `h-10 w-full bg-cover` box (40px),
   which reduces the badge to an unreadable smudge. The slot becomes the hero
   element of the login screen instead.

   clamp() rather than a fixed height: the middle term is viewport-relative so
   the badge stays proportionate on a laptop, but the 15rem ceiling stops it
   dominating a large monitor and the 8rem floor keeps it from collapsing on a
   short phone screen (where vh is small and the keyboard eats the viewport).

   NOTE: 26vh/26rem was tried and looked wrong — too dominant. This is the
   reverted, preferred size. The embedded raster stays at 768px (WebP), which
   is oversampled for this height and therefore stays sharp at 2x and 3x.     */
img[src$="assets/logo.svg"] {
  height: clamp(8rem, 26vh, 15rem);
  width: auto;
  max-width: 88%;
  margin-inline: auto;
  object-fit: contain;
}

/* Let the wrapper hug the image instead of clipping it at 40px.
   min-height is deliberately 0 so the wrapper and image don't fight over the
   same space. Upstream classes are `mt-6 h-10 w-full bg-cover`. */
div:has(> img[src$="assets/logo.svg"]) {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* ------------------------------------------------------- login card position --
   The auth layout is:

     <div class="relative flex min-h-screen flex-col">
       …logo…
       <main class="flex flex-grow items-center justify-center">
         <div class="w-authPageWidth …">   ← the login card
       </main>
     </div>

   `flex-grow` lets <main> absorb every remaining pixel of the min-h-screen
   column, and `items-center` then centres the card inside that whole area. The
   taller the logo, the further down the card floats — margin tweaks on the logo
   can't beat it, because the space is created by flex distribution, not margin.
   Anchoring the card to the top of <main> is the actual fix.

   Scoped with :has() to the container that holds the login logo so the chat
   application's own <main> is left alone. */
div:has(img[src$="assets/logo.svg"]) > main {
  align-items: flex-start;
  padding-top: 0.25rem;
}