/* Melon AI — brand layer over LibreChat v0.8.8.
   LibreChat reads every colour from RGB-triplet tokens (`rgb(var(--x))`), so
   the brand is mostly a token swap. Selectors use :root:not(.dark) / :root.dark
   (0,2,0) to outrank LibreChat's own `html` and `.dark` blocks, including
   chunks it injects after this sheet. Palette: melonstudio.ru — grey-50
   canvas, white surfaces, ink actions, orange #ffa800 as the brand note.
   Contrast was measured against the surface each token sits on. */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/melon/fonts/unbounded-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/melon/fonts/unbounded-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --melon-orange: #ffa800;
  --melon-yellow: #ffef5f;
  --melon-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

:root:not(.dark) {
  --presentation: 245 247 250;          /* canvas, melon grey-50 */
  --surface-primary: 255 255 255;
  --surface-primary-alt: 255 255 255;   /* sidebar: white panel on the canvas */
  --surface-primary-contrast: 238 241 245;
  --surface-secondary: 245 247 250;
  --surface-secondary-alt: 236 239 243;
  --surface-tertiary: 238 241 245;
  --surface-tertiary-alt: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-chat: 255 255 255;          /* composer */
  --surface-code: 245 247 250;
  --surface-hover: 238 241 245;
  --surface-hover-alt: 228 232 237;
  --surface-active: 234 237 241;
  --surface-active-alt: 225 230 235;
  --surface-composer-hover: 238 241 245;
  --surface-submit: 10 10 10;           /* ink, like the CTA on melonstudio.ru */
  --surface-submit-hover: 38 38 38;
  --header-primary: 255 255 255;
  --header-hover: 245 247 250;
  --header-button-hover: 238 241 245;

  --text-primary: 10 10 10;             /* 18.4:1 on canvas */
  --text-secondary: 78 95 100;          /* 6.4:1 on white */
  --text-secondary-alt: 95 115 120;
  --text-tertiary: 95 115 120;          /* 4.99:1 on white, 4.65:1 on canvas */
  --text-muted: 95 115 120;
  --link: 163 82 0;                     /* 5.58:1 on white; orange itself is 1.9:1 */
  --link-hover: 122 61 0;
  --link-visited: 132 106 73;

  --accent-primary: 224 112 0;          /* non-text accent, 3.24:1 on white */
  --accent-primary-hover: 179 89 0;
  --ring-primary: 224 112 0;
  --brand-purple: 224 112 0;

  --border-light: 230 234 239;
  --border-medium: 213 219 226;
  --border-medium-alt: 213 219 226;
  --border-heavy: 127 143 148;          /* field outlines, ≥3:1 on white */
  --border-xheavy: 95 115 120;

  --theme-control-radius: 0.75rem;
  --theme-surface-radius: 1.25rem;
  --theme-large-surface-radius: 1.5rem;
  --theme-elevation-surface: 0 12px 32px -12px rgb(10 10 10 / 0.16), 0 2px 8px -2px rgb(10 10 10 / 0.06);
}

:root.dark {
  --presentation: 17 18 20;
  --surface-primary: 23 25 28;
  --surface-primary-alt: 23 25 28;
  --surface-primary-contrast: 29 32 36;
  --surface-secondary: 29 32 36;
  --surface-secondary-alt: 36 40 45;
  --surface-tertiary: 36 40 45;
  --surface-tertiary-alt: 29 32 36;
  --surface-dialog: 29 32 36;
  --surface-chat: 29 32 36;
  --surface-code: 23 25 28;
  --surface-hover: 36 40 45;
  --surface-hover-alt: 46 51 57;
  --surface-active: 42 47 53;
  --surface-active-alt: 36 40 45;
  --surface-composer-hover: 36 40 45;
  --surface-submit: 58 64 71;
  --surface-submit-hover: 74 81 89;
  --header-primary: 23 25 28;
  --header-hover: 36 40 45;
  --header-button-hover: 36 40 45;

  --text-primary: 245 247 250;          /* 17.5:1 on canvas */
  --text-secondary: 163 177 181;        /* 7.4:1 on the composer */
  --text-secondary-alt: 132 148 160;
  --text-tertiary: 132 148 160;         /* 5.2:1 on the composer */
  --text-muted: 132 148 160;
  --link: 255 190 77;                   /* 11.4:1 on canvas */
  --link-hover: 255 210 128;
  --link-visited: 230 190 140;

  --accent-primary: 255 168 0;
  --accent-primary-hover: 255 190 77;
  --ring-primary: 255 168 0;
  --brand-purple: 255 168 0;

  --border-light: 42 47 53;
  --border-medium: 58 64 71;
  --border-medium-alt: 58 64 71;
  --border-heavy: 106 120 128;
  --border-xheavy: 132 148 160;

  --theme-control-radius: 0.75rem;
  --theme-surface-radius: 1.25rem;
  --theme-large-surface-radius: 1.5rem;
  --theme-elevation-surface: 0 12px 32px -12px rgb(0 0 0 / 0.5), 0 2px 8px -2px rgb(0 0 0 / 0.3);
}

/* Brand voice: the wide geometric display face of melonstudio.ru, kept to
   the landing greeting so chat text stays in Inter. */
.split-parent {
  font-family: "Unbounded", var(--theme-font-family);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Sidebar reads as a white panel on the grey canvas. */
nav.bg-surface-primary-alt {
  border-right: 1px solid rgb(var(--border-light));
}

/* Composer: a floating white card that firms up its edge while typing. */
.bg-surface-chat.rounded-3xl {
  box-shadow: var(--theme-elevation-surface);
  transition-property: border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.bg-surface-chat.rounded-3xl:focus-within {
  border-color: rgb(var(--border-heavy));
}

/* Send: press feedback, the one touch every message goes through. */
#send-button {
  transition-property: transform, background-color, opacity;
  transition-duration: 160ms;
  transition-timing-function: var(--melon-ease-out);
}
#send-button:active:not(:disabled) {
  transform: scale(0.94);
}

/* Signature: the streaming cursor becomes a melon pixel that flips between
   the two brand colours — state, not movement. Same selectors as LibreChat's
   own `⬤` cursor. */
.result-streaming > :not(ol):not(ul):not(pre):last-child::after,
.result-streaming > pre:last-child code::after,
.result-streaming > ul:last-child > li:last-child:not(:has(> :is(ul, ol, pre)))::after,
.result-streaming > ol:last-child > li:last-child:not(:has(> :is(ul, ol, pre)))::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.3rem;
  vertical-align: 0.05em;
  background-color: var(--melon-orange);
  animation: melon-pixel 800ms steps(1, end) infinite;
}

@keyframes melon-pixel {
  50% {
    background-color: var(--melon-yellow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-streaming > :not(ol):not(ul):not(pre):last-child::after,
  .result-streaming > pre:last-child code::after,
  .result-streaming > ul:last-child > li:last-child:not(:has(> :is(ul, ol, pre)))::after,
  .result-streaming > ol:last-child > li:last-child:not(:has(> :is(ul, ol, pre)))::after {
    animation: none;
  }
  #send-button:active:not(:disabled) {
    transform: none;
  }
}