/* GetAnyAI Chat brand layer for stock LibreChat v0.8.8 (no fork, no rebuild).
 *
 * Loaded by branding/index.html AFTER the app stylesheet, so at equal specificity
 * these rules win. LibreChat colours are CSS variables that hold bare "R G B"
 * triplets (Tailwind wraps them as rgb(var(--x) / alpha)), light under `html`,
 * dark under `.dark` (class on <html>). Override the variables, never the
 * components. Selectors are `html:root` / `html.dark` to out-rank the originals.
 * The high-contrast appearance modes set their own inline variables and are left alone.
 *
 * Palette: charcoal 13 14 16, panel 22 24 27, off-white 242 241 236, lime 200 240 60.
 * Lime is reserved for the primary actions (send, submit), focus in dark mode and
 * the current section in the product navigation; surfaces are neutral. On light
 * surfaces lime has 1.2:1 contrast, so text and links there use a dark olive
 * (74 93 0) instead.
 *
 * Contrast (WCAG 2.x), measured over every surface step, light / dark:
 *   primary text >= 13.8 / 10.9, secondary >= 7.4 / 7.7, tertiary and muted >= 4.9 / 4.7,
 *   links >= 5.2 (olive) / 9.4 (lime), dark text on lime 14.7. All above AA (4.5).
 */

/* ---- Light ------------------------------------------------------------ */
html:root {
  --theme-font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --presentation: 242 241 236;
  --text-primary: 13 14 16;
  --text-secondary: 62 64 68;
  --text-secondary-alt: 88 90 94;
  --text-tertiary: 88 90 94;
  --text-muted: 88 90 94;

  --accent-primary: 74 93 0;
  --accent-primary-hover: 52 66 0;
  --link: 74 93 0;
  --link-hover: 52 66 0;
  --ring-primary: 13 14 16;

  --header-primary: 242 241 236;
  --header-hover: 235 234 228;
  --header-button-hover: 229 228 222;

  --surface-primary: 242 241 236;
  --surface-primary-alt: 235 234 228;
  --surface-primary-contrast: 231 230 224;
  --surface-secondary: 250 249 246;
  --surface-secondary-alt: 229 228 222;
  --surface-tertiary: 231 230 224;
  --surface-tertiary-alt: 250 249 246;
  --surface-dialog: 250 249 246;
  --surface-chat: 242 241 236;
  --surface-active: 224 223 216;
  --surface-active-alt: 229 228 222;
  --surface-hover: 229 228 222;
  --surface-hover-alt: 219 218 211;
  --surface-composer-hover: 229 228 222;
  --chart-widget-surface: 250 249 246;
  --chart-widget-stroke: 224 223 216;

  --surface-submit: 200 240 60;
  --surface-submit-hover: 184 222 40;
  --surface-inverted: 13 14 16;
  --surface-inverted-hover: 38 41 46;
  --text-inverted: 242 241 236;

  --border-light: 224 223 216;
  --border-medium: 208 207 199;
  --border-medium-alt: 208 207 199;
  --border-heavy: 128 129 122;
  --border-xheavy: 96 97 92;
}

/* ---- Dark (must stay after the light block: same specificity) ----------- */
html.dark {
  --presentation: 13 14 16;
  --text-primary: 242 241 236;
  --text-secondary: 205 204 198;
  --text-secondary-alt: 165 165 158;
  --text-tertiary: 165 165 158;
  --text-muted: 160 161 156;

  --accent-primary: 200 240 60;
  --accent-primary-hover: 222 250 120;
  --link: 200 240 60;
  --link-hover: 222 250 120;
  --ring-primary: 200 240 60;

  --header-primary: 13 14 16;
  --header-hover: 34 37 42;
  --header-button-hover: 34 37 42;

  --surface-primary: 13 14 16;
  --surface-primary-alt: 22 24 27;
  --surface-primary-contrast: 22 24 27;
  --surface-secondary: 28 30 34;
  --surface-secondary-alt: 28 30 34;
  --surface-tertiary: 38 41 46;
  --surface-tertiary-alt: 38 41 46;
  --surface-dialog: 22 24 27;
  --surface-chat: 38 41 46;
  --surface-active: 49 53 59;
  --surface-active-alt: 38 41 46;
  --surface-hover: 34 37 42;
  --surface-hover-alt: 49 53 59;
  --surface-composer-hover: 49 53 59;
  --chart-widget-surface: 22 24 27;
  --chart-widget-stroke: 38 41 46;

  --surface-submit: 200 240 60;
  --surface-submit-hover: 184 222 40;
  --surface-inverted: 242 241 236;
  --surface-inverted-hover: 224 223 216;
  --text-inverted: 13 14 16;

  --border-light: 38 41 46;
  --border-medium: 52 56 62;
  --border-medium-alt: 52 56 62;
  --border-heavy: 78 83 91;
  --border-xheavy: 120 125 133;
}

/* ---- Font -------------------------------------------------------------- */
/* Tailwind bakes `Inter, sans-serif` into html and `.font-sans`; code keeps its
   own monospace stack (Roboto Mono) and is not touched here. */
html,
body,
.font-sans,
.font-theme-ui {
  font-family: var(--theme-font-family);
}

/* ---- Hard-coded canvas colours the variables do not reach -------------- */
html,
body,
html.dark,
html.dark body {
  background-color: rgb(var(--surface-primary));
}

/* Login/registration fields paint an autofill-proof inset shadow in #fff / #0d0d0d. */
.webkit-dark-styles,
.webkit-dark-styles:focus {
  -webkit-box-shadow: 0 0 0 50vh rgb(var(--surface-primary)) inset;
  box-shadow: 0 0 0 50vh rgb(var(--surface-primary)) inset;
}
html.dark .webkit-dark-styles,
html.dark .webkit-dark-styles:focus {
  -webkit-text-fill-color: rgb(var(--text-primary));
}

/* ---- Primary actions: lime fill, charcoal text -------------------------- */
/* Button variant="submit" (login, register, dialogs) hard-codes white text. */
.bg-surface-submit {
  color: rgb(13 14 16);
}
/* Composer send button: off-white/charcoal disc by default, lime when it can send. */
#send-button:not(:disabled) {
  background-color: rgb(200 240 60);
}
#send-button:not(:disabled):hover {
  background-color: rgb(184 222 40);
}
#send-button svg {
  color: rgb(13 14 16);
}
/* Lime has no edge against an off-white page: give submit buttons a hairline in light mode. */
html:not(.dark) .bg-surface-submit {
  box-shadow: inset 0 0 0 1px rgb(13 14 16 / 0.35);
}

/* Links in chat answers: LibreChat hard-codes #06c / #52a0ff in mobile.css. */
html p.whitespace-pre-wrap a,
html li a,
html.dark p.whitespace-pre-wrap a,
html.dark li a {
  color: rgb(var(--link));
}
html p.whitespace-pre-wrap a:hover,
html li a:hover,
html.dark p.whitespace-pre-wrap a:hover,
html.dark li a:hover {
  color: rgb(var(--link-hover));
}

/* ---- Focus ------------------------------------------------------------- */
html.dark :focus-visible {
  outline-color: rgb(200 240 60);
}

/* ---- Product navigation: Чат · Картинки · Видео · Звук ------------------- */
/* Markup lives in index.html (outside #root, so React never touches it). Chat is
 * the current section, the rest is the media studio under /media/studio/*.
 * Placement, checked at 1280, 900, 700 and 375 wide:
 *  - >= 1100px: segmented bar fixed at the top right, left of LibreChat's
 *    right-hand header button; the header's left cluster (sidebar toggle, model
 *    picker, bookmark) ends well before it.
 *  - < 1100px: no room in the header, so one "Медиа" chip with a dropdown.
 *    >= 640px it sits bottom right, in the band under the composer that the
 *    configured CUSTOM_FOOTER reserves. < 640px (composer is full width, no
 *    band) it sits in the composer's action row right after the attach and
 *    settings buttons. The dropdown opens upwards.
 *  - Hidden on the login/register screens and while the mobile sidebar drawer
 *    is open (the drawer lives in a lower stacking context than this layer).
 * If CUSTOM_FOOTER is removed or LibreChat's layout changes, re-check these. */
.api429-nav,
.api429-nav-m {
  position: fixed;
  z-index: 30;
  display: none;
  font: 600 0.8125rem/1.2 var(--theme-font-family);
}
.api429-nav a,
.api429-nav-m a,
.api429-nav-m summary {
  color: rgb(var(--text-primary));
  text-decoration: none;
}

/* Segmented bar (wide screens) */
.api429-nav {
  top: 0.5rem;
  right: 4.25rem;
  box-sizing: border-box;
  height: 2.25rem;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(var(--border-medium));
  border-radius: 9999px;
  background-color: rgb(var(--surface-secondary));
}
.api429-nav a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.8rem;
  border-radius: 9999px;
  color: rgb(var(--text-secondary));
  transition: background-color 150ms ease, color 150ms ease;
}
@media (min-width: 1100px) {
  .api429-nav {
    display: inline-flex;
  }
}
/* Sets «Тарифы» (a link out to api429.com) apart from the section tabs. */
.api429-nav-sep {
  flex: none;
  width: 1px;
  height: 1rem;
  margin: 0 0.2rem;
  background-color: rgb(var(--border-medium));
}

/* Dropdown chip (narrow screens) */
.api429-nav-m {
  right: 1rem;
  bottom: 0.45rem;
}
.api429-nav-m > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgb(var(--border-medium));
  border-radius: 9999px;
  background-color: rgb(var(--surface-secondary));
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.api429-nav-m > summary::-webkit-details-marker {
  display: none;
}
.api429-nav-m > summary::after {
  content: '';
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 150ms ease;
}
.api429-nav-m[open] > summary::after {
  margin-top: 0.1rem;
  transform: rotate(45deg);
}
/* While open, a transparent layer under the chip catches the next tap anywhere
   and closes the menu (a click on it is a click on the summary). */
.api429-nav-m[open] > summary::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
}
.api429-nav-m nav {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  min-width: 10.5rem;
  padding: 0.25rem;
  border: 1px solid rgb(var(--border-medium));
  border-radius: 0.9rem;
  background-color: rgb(var(--surface-dialog));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.api429-nav-m nav a {
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
}
.api429-nav-m nav .api429-nav-sep {
  width: auto;
  height: 1px;
  margin: 0.25rem 0.5rem;
}
@media (max-width: 1099px) {
  .api429-nav-m {
    display: block;
  }
}
@media (max-width: 639px) {
  .api429-nav-m {
    right: auto;
    left: 6.25rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .api429-nav-m nav {
    right: auto;
    left: 0;
  }
}

/* States shared by both forms */
.api429-nav a:hover,
.api429-nav-m nav a:hover,
.api429-nav-m > summary:hover {
  background-color: rgb(var(--surface-hover));
  color: rgb(var(--text-primary));
}
.api429-nav a[aria-current='page'],
.api429-nav-m nav a[aria-current='page'] {
  background-color: rgb(200 240 60);
  color: rgb(13 14 16);
}
.api429-nav a:focus-visible,
.api429-nav-m a:focus-visible,
.api429-nav-m summary:focus-visible {
  outline: 2px solid rgb(var(--ring-primary));
  outline-offset: 2px;
}

/* Not on the login/register screens (`w-authPageWidth` exists only there), and not
   over the open mobile sidebar drawer (the open drawer is `translate-x-0`). */
body:has(.w-authPageWidth) .api429-nav,
body:has(.w-authPageWidth) .api429-nav-m,
body:has(div.fixed.inset-y-0.left-0.translate-x-0) .api429-nav-m {
  display: none;
}

/* OpenID auto-redirect state (a deep link opened without a session): LibreChat renders a
   screen-tall block with unstyled text («Перенаправление на Войти через GetAnyAI…») inside the
   auth layout. Keep it compact and readable, and say it in one plain sentence. */
div.min-h-screen.justify-center:has(> p.text-lg.font-semibold) {
  min-height: 0;
  padding-top: 1.5rem;
}
div.min-h-screen.justify-center > p.text-lg.font-semibold {
  font-size: 0;
}
div.min-h-screen.justify-center > p.text-lg.font-semibold::before {
  content: 'Открываем вход через GetAnyAI…';
  font-size: 1rem;
  font-weight: 500;
  color: rgb(var(--text-secondary));
}