/* API429 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: the API429 admin palette (front_max): canvas 22 22 26 (#16161a), panel
 * 31 31 36 (#1f1f24), card 36 36 43 (#24242b), ink 236 236 241, accent violet 108 99 255
 * (#c5f277). Violet fills the primary actions (send, submit) and the current section in
 * the product navigation, with white text on it (4.3:1: the fills carry bold labels and icons); surfaces are neutral. Text-like
 * accents (links, focus) use a lighter violet 139 132 255 on dark and a deeper 84 76 214
 * on light, both above 4.5:1.
 *
 * Contrast (WCAG 2.x): every text/surface pair above is at least AA (4.5:1);
 *   white on the violet fill is 4.3:1 (bold button labels only).
 */

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

  --presentation: 245 245 248;
  --text-primary: 22 22 26;
  --text-secondary: 62 62 74;
  --text-secondary-alt: 86 86 100;
  --text-tertiary: 86 86 100;
  --text-muted: 86 86 100;

  --accent-primary: 84 76 214;
  --accent-primary-hover: 67 60 190;
  --link: 84 76 214;
  --link-hover: 67 60 190;
  --ring-primary: 22 22 26;

  --header-primary: 245 245 248;
  --header-hover: 237 237 242;
  --header-button-hover: 229 229 235;

  --surface-primary: 245 245 248;
  --surface-primary-alt: 237 237 242;
  --surface-primary-contrast: 232 232 238;
  --surface-secondary: 251 251 253;
  --surface-secondary-alt: 229 229 235;
  --surface-tertiary: 232 232 238;
  --surface-tertiary-alt: 251 251 253;
  --surface-dialog: 251 251 253;
  --surface-chat: 245 245 248;
  --surface-active: 223 223 230;
  --surface-active-alt: 229 229 235;
  --surface-hover: 229 229 235;
  --surface-hover-alt: 216 216 224;
  --surface-composer-hover: 229 229 235;
  --chart-widget-surface: 251 251 253;
  --chart-widget-stroke: 223 223 230;

  --surface-submit: 108 99 255;
  --surface-submit-hover: 93 84 240;
  --surface-inverted: 22 22 26;
  --surface-inverted-hover: 40 40 47;
  --text-inverted: 245 245 248;

  --border-light: 223 223 230;
  --border-medium: 205 205 214;
  --border-medium-alt: 205 205 214;
  --border-heavy: 126 126 140;
  --border-xheavy: 96 96 110;
}

/* ---- Dark (must stay after the light block: same specificity) ----------- */
html.dark {
  --presentation: 22 22 26;
  --text-primary: 245 245 248;
  --text-secondary: 200 200 212;
  --text-secondary-alt: 160 160 180;
  --text-tertiary: 160 160 180;
  --text-muted: 150 150 170;

  --accent-primary: 139 132 255;
  --accent-primary-hover: 165 160 255;
  --link: 139 132 255;
  --link-hover: 165 160 255;
  --ring-primary: 108 99 255;

  --header-primary: 22 22 26;
  --header-hover: 36 36 43;
  --header-button-hover: 36 36 43;

  --surface-primary: 22 22 26;
  --surface-primary-alt: 31 31 36;
  --surface-primary-contrast: 31 31 36;
  --surface-secondary: 36 36 43;
  --surface-secondary-alt: 36 36 43;
  --surface-tertiary: 40 40 47;
  --surface-tertiary-alt: 40 40 47;
  --surface-dialog: 31 31 36;
  --surface-chat: 40 40 47;
  --surface-active: 52 52 61;
  --surface-active-alt: 40 40 47;
  --surface-hover: 36 36 43;
  --surface-hover-alt: 52 52 61;
  --surface-composer-hover: 52 52 61;
  --chart-widget-surface: 31 31 36;
  --chart-widget-stroke: 40 40 47;

  --surface-submit: 108 99 255;
  --surface-submit-hover: 93 84 240;
  --surface-inverted: 245 245 248;
  --surface-inverted-hover: 223 223 230;
  --text-inverted: 22 22 26;

  --border-light: 40 40 47;
  --border-medium: 52 52 61;
  --border-medium-alt: 52 52 61;
  --border-heavy: 80 80 94;
  --border-xheavy: 125 125 145;
}

/* ---- 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: violet fill, white text --------------------------- */
/* Button variant="submit" (login, register, dialogs) hard-codes white text. */
.bg-surface-submit {
  color: rgb(255 255 255);
}
/* Composer send button: neutral disc by default, violet when it can send. */
#send-button:not(:disabled) {
  background-color: rgb(197 242 119);
}
#send-button:not(:disabled):hover {
  background-color: rgb(184 233 100);
}
#send-button svg {
  color: rgb(255 255 255);
}
/* A hairline keeps submit buttons crisp on the light page. */
html:not(.dark) .bg-surface-submit {
  box-shadow: inset 0 0 0 1px rgb(22 22 26 / 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(96 123 50);
}

/* ---- 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));
}

/* Sections switched off for now (Видео, Звук): `hidden` alone loses to the display above. */
.api429-nav a[hidden],
.api429-nav-m a[hidden] {
  display: none;
}

/* 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(197 242 119);
  color: rgb(255 255 255);
}
.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 («Перенаправление на Войти через API429…») 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: 'Открываем вход через API429…';
  font-size: 1rem;
  font-weight: 500;
  color: rgb(var(--text-secondary));
}

/* ---- Model selector submenu width & single-line rows --------------------- */
div.animate-popover-left[role="menu"],
div.animate-popover[role="menu"],
div.animate-popover-left:has([role="option"]),
div.animate-popover:has([role="option"]) {
  min-width: 340px !important;
  max-width: min(440px, calc(100vw - 2rem)) !important;
}

[role="option"],
[role="menuitem"] {
  flex-wrap: nowrap !important;
}
[role="option"] > div:first-child,
[role="menuitem"] > div:first-child {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}


@font-face{font-family:Onest;src:url(/assets/fonts/onest-variable.ttf) format("truetype");font-weight:100 900;font-display:swap}body{font-family:Onest,system-ui,sans-serif!important}

/* Shared UnlimitGen light workspace and accessible dark variant. */
html:root{--theme-font-family:Onest,system-ui,sans-serif;--presentation:244 243 237;--text-primary:34 37 31;--text-secondary:82 88 76;--text-secondary-alt:106 110 99;--text-tertiary:106 110 99;--text-muted:106 110 99;--accent-primary:78 106 39;--accent-primary-hover:56 81 25;--link:78 106 39;--link-hover:56 81 25;--ring-primary:96 123 50;--surface-submit:197 242 119;--surface-submit-hover:184 233 100;--surface-inverted:34 37 31;--surface-inverted-hover:53 61 45;--text-inverted:244 243 237;--header-primary:244 243 237;--surface-primary:244 243 237;--surface-chat:244 243 237;--header-hover:233 235 223;--header-button-hover:233 235 223;--surface-primary-alt:233 235 223;--surface-primary-contrast:233 235 223;--surface-secondary:233 235 223;--surface-secondary-alt:233 235 223;--surface-tertiary:233 235 223;--surface-active:233 235 223;--surface-active-alt:233 235 223;--surface-hover:233 235 223;--surface-hover-alt:233 235 223;--surface-composer-hover:233 235 223;--chart-widget-surface:233 235 223;--surface-tertiary-alt:249 248 243;--surface-dialog:249 248 243;--border-light:216 219 206;--border-medium:216 219 206;--border-medium-alt:216 219 206;--chart-widget-stroke:216 219 206;}
html.dark{--presentation:27 31 25;--surface-primary:27 31 25;--surface-chat:27 31 25;--surface-secondary:42 48 36;--surface-dialog:42 48 36;--text-primary:244 243 237;--text-secondary:204 211 193;--text-muted:169 180 155;--accent-primary:197 242 119;--link:197 242 119;--surface-submit:197 242 119;--surface-submit-hover:184 233 100;}
.bg-surface-submit,#send-button:not(:disabled),#send-button svg{color:#22251f!important}html:not(.dark) .bg-surface-submit{box-shadow:none}.api429-nav{border-radius:0;background:rgb(var(--surface-primary));border:0;border-bottom:1px solid rgb(var(--border-medium));gap:7px;padding:0;height:40px;top:4px}.api429-nav a,.api429-nav-m>summary,.api429-nav-m nav{border-radius:2px}.api429-nav a[aria-current='page']{background:transparent;color:rgb(var(--text-primary));border-bottom:2px solid #718052}
.ug-masthead{display:none;align-items:center;justify-content:space-between;gap:24px;position:absolute;inset:0 40px auto;min-height:88px;border-bottom:1px solid rgb(var(--border-light));z-index:40;font-family:Onest,system-ui,sans-serif}.ug-brand{display:flex;gap:9px;align-items:center;color:rgb(var(--text-primary));font-size:27px;font-weight:750;letter-spacing:-1.6px;text-decoration:none}.ug-brand img{width:31px;height:31px}.ug-masthead nav{display:flex;gap:28px;font-size:12px;color:rgb(var(--text-secondary))}
body:has(.w-authPageWidth) .ug-masthead{display:flex}body:has(.w-authPageWidth) #root>div>div:first-child:has(>img){visibility:hidden}body:has(.w-authPageWidth) #root>div{padding-top:80px}body:has(.w-authPageWidth) h1{font-family:Onest,system-ui,sans-serif;font-size:42px;font-weight:500;letter-spacing:-2px;line-height:1.08;text-align:left}body:has(.w-authPageWidth) h1:before{content:'UNLIMITGEN / STUDIO';display:block;font:10px/1.5 monospace;letter-spacing:1.5px;color:rgb(var(--text-muted));margin-bottom:25px}body:has(.w-authPageWidth) input{border-radius:0!important;min-height:52px;background:rgb(var(--surface-primary))!important}body:has(.w-authPageWidth) button[type=submit]{border-radius:0;min-height:52px;font-weight:600}.ug-auth-note{display:none;position:fixed;bottom:25px;right:40px;font-size:11px;color:rgb(var(--text-muted));z-index:30}body:has(.w-authPageWidth) .ug-auth-note{display:block}
@media(max-width:600px){.ug-masthead{inset:0 20px auto;min-height:76px}.ug-brand{font-size:23px}.ug-masthead nav{gap:15px;font-size:11px}.ug-masthead nav a:last-child{display:none}body:has(.w-authPageWidth) h1{font-size:34px;letter-spacing:-1.3px}.ug-auth-note{bottom:20px;right:20px;max-width:190px;text-align:right;font-size:9px}}