/* GroUvi theme for LibreChat: tokens of ai.grouvi.online. Loaded after the
   LibreChat stylesheet, followed by grouvi-theme.css (generated colour remap). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600 700; font-display: swap;
  src: url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600 700; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500 700; font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500 700; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html, body, button, input, textarea, select, .font-sans { font-family: "IBM Plex Sans", "Public Sans", system-ui, sans-serif !important; }
code, pre, kbd, samp, .font-mono, .hljs { font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace !important; }

/* --- light: ai.grouvi.online light theme ------------------------------------------ */
html {
  --gray-20: #f2efe9; --gray-50: #f7f5f1; --gray-100: #efece6; --gray-200: #e4e0d8; --gray-300: #d3cdc3;
  --gray-400: #9a958c; --gray-500: #66625b; --gray-600: #3a3a3a; --gray-700: #262626; --gray-800: #1a1a1a;
  --gray-850: #161616; --gray-900: #111111;
  --brand-purple: #161616;
  --presentation: #f7f5f1;
  --text-primary: #161616; --text-secondary: #3d3a35; --text-secondary-alt: #66625b; --text-tertiary: #66625b;
  --text-warning: #a35c00; --text-destructive: #c2413a;
  --ring-primary: #161616;
  --header-primary: #f7f5f1; --header-hover: #efece6; --header-button-hover: #efece6;
  --surface-primary: #f7f5f1; --surface-primary-alt: #f2efe9; --surface-primary-contrast: #efece6;
  --surface-secondary: #f2efe9; --surface-secondary-alt: #e4e0d8;
  --surface-tertiary: #efece6; --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff; --surface-chat: #ffffff;
  --surface-hover: #ebe7e0; --surface-hover-alt: #e4e0d8;
  --surface-active: #e4e0d8; --surface-active-alt: #ebe7e0;
  --surface-submit: #161616; --surface-submit-hover: #2c2c2c;
  --surface-destructive: #c2413a; --surface-destructive-hover: #a83630;
  --border-light: #e4e0d8; --border-medium: #dcd7ce; --border-medium-alt: #dcd7ce;
  --border-heavy: #b9b3a8; --border-xheavy: #8f897f; --border-destructive: #c2413a;
  /* shadcn tokens, as "h s% l%" */
  --background: 40 27% 95.9%; --foreground: 0 0% 8.6%;
  --card: 0 0% 100%; --card-foreground: 0 0% 8.6%;
  --primary: 0 0% 8.6%; --primary-foreground: 40 27% 95.9%;
  --secondary: 40 22% 92%; --secondary-foreground: 0 0% 8.6%;
  --muted: 40 22% 92.5%; --muted-foreground: 37 6% 37.6%;
  --accent: 37 19% 90%; --accent-foreground: 0 0% 8.6%;
  --destructive: 3 54% 49.4%; --destructive-foreground: 0 0% 98%;
  --border: 40 17% 87%; --input: 39 15% 83.5%; --ring: 0 0% 8.6%;
  --radius: 0.625rem;
  --switch-unchecked: 37 8% 70%;
}
::selection { background: #161616; color: #f7f5f1; }

/* --- dark: ai.grouvi.online dark theme ---------------------------------------------- */
.dark {
  --brand-purple: #f4ede4;
  --presentation: #111111;
  --text-primary: #ececec; --text-secondary: #c9c4bc; --text-secondary-alt: #a3a3a3; --text-tertiary: #8a8580;
  --text-warning: #f2b35a; --text-destructive: #e5645c;
  --ring-primary: #f4ede4;
  --header-primary: #111111; --header-hover: #1f1f1f; --header-button-hover: #1f1f1f;
  --surface-primary: #111111; --surface-primary-alt: #0e0e0e; --surface-primary-contrast: #161616;
  --surface-secondary: #161616; --surface-secondary-alt: #1a1a1a;
  --surface-tertiary: #1f1f1f; --surface-tertiary-alt: #1f1f1f;
  --surface-dialog: #161616; --surface-chat: #1a1a1a;
  --surface-hover: #222222; --surface-hover-alt: #262626;
  --surface-active: #2a2a2a; --surface-active-alt: #222222;
  --surface-submit: #f4ede4; --surface-submit-hover: #e6ddd1;
  --surface-destructive: #b3362f; --surface-destructive-hover: #962c26;
  --border-light: #262626; --border-medium: #303030; --border-medium-alt: #303030;
  --border-heavy: #3d3d3d; --border-xheavy: #555555; --border-destructive: #e5645c;
  --background: 0 0% 6.7%; --foreground: 0 0% 92.5%;
  --card: 0 0% 8.6%; --card-foreground: 0 0% 92.5%;
  --primary: 34 47% 92.5%; --primary-foreground: 0 0% 7.8%;
  --secondary: 0 0% 12.2%; --secondary-foreground: 0 0% 92.5%;
  --muted: 0 0% 11%; --muted-foreground: 0 0% 64%;
  --accent: 0 0% 13.3%; --accent-foreground: 34 47% 92.5%;
  --destructive: 3 73% 63%; --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%; --input: 0 0% 18.8%; --ring: 34 47% 92.5%;
  --switch-unchecked: 0 0% 30%;
}
.dark ::selection { background: #f4ede4; color: #141414; }

/* cream buttons carry dark text: LibreChat writes text-white on them */
.dark .bg-surface-submit, .dark .bg-surface-submit *, .dark .hover\:bg-surface-submit-hover:hover { color: #141414 !important; }
.bg-surface-submit, .bg-surface-submit * { color: #f7f5f1; }
.dark .bg-surface-submit svg, .dark .bg-surface-submit svg * { color: #141414 !important; stroke: currentColor; }

/* the send button: graphite / cream circle like the primary button of the site */
[data-testid="send-button"]:not(:disabled) { background: #161616 !important; color: #f7f5f1 !important; }
[data-testid="send-button"]:not(:disabled):hover { background: #2c2c2c !important; }
[data-testid="send-button"]:not(:disabled):active { background: #3d3d3d !important; }
.dark [data-testid="send-button"]:not(:disabled) { background: #f4ede4 !important; color: #141414 !important; }
.dark [data-testid="send-button"]:not(:disabled):hover { background: #e6ddd1 !important; }
.dark [data-testid="send-button"]:not(:disabled):active { background: #d6cbbd !important; }

/* links of the auth pages and the footer: ink / cream, underlined on hover */
a.text-green-600, a.text-green-500, .text-green-600 a { color: #161616 !important; text-decoration-color: currentColor !important; }
.dark a.text-green-600, .dark a.text-green-500, .dark a[class*="dark:text-green"] { color: #f4ede4 !important; }

/* focus: a visible ring of the accent, never a layout change */
:focus-visible { outline: 2px solid #161616; outline-offset: 2px; }
.dark :focus-visible { outline-color: #f4ede4; }
input:focus, textarea:focus { box-shadow: none; }

/* nothing moves on hover or press: colour only */
.hover\:scale-110:hover, .active\:scale-95:active, .active\:scale-\[0\.98\]:active,
.hover\:scale-105:hover, .group:hover .group-hover\:scale-110 { --tw-scale-x: 1 !important; --tw-scale-y: 1 !important; }
.premium-scroll-button:active { transform: none !important; }

/* pressed state for the controls LibreChat leaves without one */
button:not(:disabled):not([class*="bg-surface-submit"]):not([class*="bg-green"]):not([data-testid="send-button"]):active,
[role="menuitem"]:active, [role="option"]:active { background-color: var(--surface-active) !important; }
button[class*="bg-surface-submit"]:not(:disabled):active, button[class*="bg-green"]:not(:disabled):active { background-color: #3d3d3d !important; }
.dark button[class*="bg-surface-submit"]:not(:disabled):active,
.dark button[class*="bg-green"]:not(:disabled):active { background-color: #d6cbbd !important; }

/* rounded like the site: 10 px instead of the very round 16-24 px boxes */
.rounded-2xl { border-radius: 0.75rem !important; }
.rounded-3xl { border-radius: 1rem !important; }

/* code blocks and inline code: the site's code colour */
.markdown :not(pre) > code { color: #a45a00; background: #efece6; border-radius: 6px; padding: 0.1em 0.35em; }
.dark .markdown :not(pre) > code { color: #f2b35a; background: #1f1f1f; }

/* page background as on the site */
html body { background-color: #f7f5f1; }
html.dark body { background-color: #111111; }

/* avatars with generated initials: LibreChat paints them in random bright colours */
img[alt$="avatar"][src^="data:image/svg"] { filter: grayscale(1) contrast(1.15); }

/* file type badges (pink documents, blue code...): one calm colour */
svg[viewBox="0 0 36 36"] > rect[rx="6"]:not([fill="white"]) { fill: #161616; }
.dark svg[viewBox="0 0 36 36"] > rect[rx="6"]:not([fill="white"]) { fill: #2a2a2a; }

/* auth pages: the page colour of the site, fields of the same tone with a border */
.min-h-screen.bg-white, .w-authPageWidth.bg-white { background-color: var(--surface-primary) !important; }
.webkit-dark-styles, .webkit-dark-styles:focus { -webkit-box-shadow: 0 0 0 50vh var(--surface-primary) inset !important; }
.dark .webkit-dark-styles, .dark .webkit-dark-styles:focus { -webkit-box-shadow: 0 0 0 50vh var(--surface-primary) inset !important; -webkit-text-fill-color: #ececec; }
.webkit-dark-styles:hover { border-color: var(--border-heavy) !important; }
.webkit-dark-styles:focus { border-color: var(--ring-primary) !important; }