/* Shared branding adapter for LibreChat (fork main e1dfc104, after v0.8.8): maps the project-owned
 * --brand-* tokens (set by a client's theme.css) onto LibreChat's CSS
 * variables. Client packs never reference LibreChat variables directly - when
 * an upgrade renames one, only this file changes. Every mapping falls back to
 * the upstream value, so a pack that omits a token keeps the stock look.
 *
 * Token format: colour tokens are space-separated RGB triplets ("248 245 240"),
 * not hex. Since v0.8.8 LibreChat's Tailwind build renders every themed colour
 * as rgb(var(--x) / <alpha>), so a hex value makes the whole declaration
 * invalid and the property falls back to transparent. No alpha either: blend
 * translucent colours onto their background first.
 *
 * html:root / html.dark outrank upstream's `html` / `.dark` selectors
 * regardless of load order. */

html:root {
  --presentation: var(--brand-bg, var(--white));
  --header-primary: var(--brand-bg, var(--white));
  --header-hover: var(--brand-hover, var(--gray-50));
  --header-button-hover: var(--brand-hover, var(--gray-50));

  --surface-primary: var(--brand-bg-sunken, var(--white));
  --surface-primary-alt: var(--brand-sidebar, var(--gray-50));
  --surface-primary-contrast: var(--brand-surface, var(--gray-100));
  --surface-secondary: var(--brand-surface, var(--gray-50));
  --surface-secondary-alt: var(--brand-surface-alt, var(--gray-200));
  --surface-tertiary: var(--brand-surface-alt, var(--gray-100));
  --surface-tertiary-alt: var(--brand-surface-raised, var(--white));
  --surface-dialog: var(--brand-surface-raised, var(--white));
  --surface-chat: var(--brand-surface-raised, var(--white));
  /* The chat area paints --surface-canvas, which upstream derives from the
   * sidebar colour (--surface-primary-alt); keep it on the page colour. */
  --surface-canvas: var(--brand-bg, var(--surface-primary-alt));
  /* Code-block header; the body is --surface-code-body (= --surface-chat). */
  --surface-code: var(--brand-surface, var(--surface-primary-alt));
  --surface-hover: var(--brand-hover, var(--gray-200));
  --surface-hover-alt: var(--brand-hover, var(--gray-300));
  --surface-composer-hover: var(--brand-hover, var(--gray-200));
  --surface-active: var(--brand-active, var(--gray-100));
  --surface-active-alt: var(--brand-hover, var(--gray-200));
  --surface-submit: var(--brand-action, var(--green-700));
  --surface-submit-hover: var(--brand-action-hover, var(--green-800));

  --accent-primary: var(--brand-accent, 18 110 107);
  --accent-primary-hover: var(--brand-accent-hover, 10 79 83);
  --link: var(--brand-link, var(--blue-600));
  --link-hover: var(--brand-link, var(--blue-700));
  --link-visited: var(--brand-link, 147 51 234);

  --text-primary: var(--brand-text, var(--gray-800));
  --text-secondary: var(--brand-text-muted, var(--gray-600));
  --text-secondary-alt: var(--brand-text-subtle, var(--gray-500));
  --text-tertiary: var(--brand-text-subtle, var(--gray-500));

  --border-light: var(--brand-border, var(--gray-200));
  --border-medium: var(--brand-border-medium, var(--gray-300));
  --border-medium-alt: var(--brand-border-medium, var(--gray-300));
  --border-heavy: var(--brand-border-strong, var(--gray-400));
  --border-xheavy: var(--brand-border-strong, var(--gray-500));
  /* Form fields (login, filters): upstream's own role, lighter than --border-light. */
  --border-control: var(--brand-border, var(--gray-200));

  --ring-primary: var(--brand-ring, var(--gray-500));
  --brand-purple: var(--brand-action, 126 34 206);

  /* Theme primitives (not colours): plain CSS values. */
  --theme-font-family: var(--brand-font, Inter, sans-serif);
  --theme-control-radius: var(--brand-radius-control, 0.75rem);
  --theme-round-control-radius: var(--brand-radius-round, 9999px);
  --theme-surface-radius: var(--brand-radius-surface, 1rem);
  --theme-large-surface-radius: var(--brand-radius-large, 1.5rem);
  --radius: var(--brand-radius-control, 0.5rem);
  --theme-elevation-surface: var(--brand-elevation, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
}

html.dark {
  --presentation: var(--brand-bg, var(--gray-800));
  --header-primary: var(--brand-bg, var(--gray-700));
  --header-hover: var(--brand-hover, var(--gray-600));
  --header-button-hover: var(--brand-hover, var(--gray-700));

  --surface-primary: var(--brand-bg-sunken, var(--gray-900));
  --surface-primary-alt: var(--brand-sidebar, var(--gray-850));
  --surface-primary-contrast: var(--brand-surface, var(--gray-850));
  --surface-secondary: var(--brand-surface, var(--gray-800));
  --surface-secondary-alt: var(--brand-surface-alt, var(--gray-800));
  --surface-tertiary: var(--brand-surface-alt, var(--gray-700));
  --surface-tertiary-alt: var(--brand-surface-raised, var(--gray-700));
  --surface-dialog: var(--brand-surface-raised, var(--gray-875));
  --surface-chat: var(--brand-surface-raised, var(--gray-700));
  --surface-canvas: var(--brand-bg, var(--surface-primary-alt));
  --surface-code: var(--brand-surface, var(--surface-primary-alt));
  --surface-hover: var(--brand-hover, var(--gray-650));
  --surface-hover-alt: var(--brand-hover, var(--gray-600));
  --surface-composer-hover: var(--brand-hover, var(--gray-600));
  --surface-active: var(--brand-active, var(--gray-500));
  --surface-active-alt: var(--brand-hover, var(--gray-700));
  --surface-submit: var(--brand-action, var(--green-700));
  --surface-submit-hover: var(--brand-action-hover, var(--green-800));

  --accent-primary: var(--brand-accent, 65 167 157);
  --accent-primary-hover: var(--brand-accent-hover, 109 200 185);
  --link: var(--brand-link, var(--blue-400));
  --link-hover: var(--brand-link, var(--blue-300));
  --link-visited: var(--brand-link, 192 132 252);

  --text-primary: var(--brand-text, var(--gray-100));
  --text-secondary: var(--brand-text-muted, var(--gray-300));
  --text-secondary-alt: var(--brand-text-subtle, var(--gray-400));
  --text-tertiary: var(--brand-text-subtle, var(--gray-400));

  --border-light: var(--brand-border, var(--gray-700));
  --border-medium: var(--brand-border-medium, var(--gray-600));
  --border-medium-alt: var(--brand-border-medium, var(--gray-600));
  --border-heavy: var(--brand-border-strong, var(--gray-500));
  --border-xheavy: var(--brand-border-strong, var(--gray-400));
  --border-control: var(--brand-border, var(--gray-800));

  --ring-primary: var(--brand-ring, var(--gray-500));
  --brand-purple: var(--brand-action, 171 104 255);
}

/* --- Typography --------------------------------------------------------- */

html, body, .font-sans {
  font-family: var(--brand-font, Inter, sans-serif);
}
code, pre, kbd, samp, .font-mono {
  font-family: var(--brand-font-mono, 'Roboto Mono', monospace);
}

/* --- Logo: versioned swap for the fixed assets/logo.svg URL -------------
 * The <img> keeps its box; the upstream image is pushed out of view and the
 * brand logo is drawn as its background (works in every browser). */

img[src$="assets/logo.svg"] {
  object-position: -99999px 0;
  background: url(logo.svg) center / contain no-repeat;
}
html.dark img[src$="assets/logo.svg"] { background-image: url(logo-dark.svg); }

/* Chat page: logo at the top of the sidebar, above the conversation list.
 * Structural selector - aria labels are localized. It matches the panel's
 * unpadded column, so the side margin lines the logo up with the rows' px-3. */
nav > div > div > div:first-child::before {
  content: '';
  display: block;
  /* Logos differ in shape (one-line vs stacked); a pack sets the box size. */
  width: var(--brand-logo-width, 132px);
  height: var(--brand-logo-height, 26px);
  margin: 10px 0.75rem 6px;
  background: url(logo.svg) left center / contain no-repeat;
}
html.dark nav > div > div > div:first-child::before { background-image: url(logo-dark.svg); }

/* --- Compatibility: fixed colours, scoped to specific components ---------
 * These use hardcoded Tailwind colours, not variables. Tokens are triplets, so
 * wrap them in rgb(). Keep every rule scoped. */

/* Send button: upstream uses bg-text-primary with a white/black icon. */
[data-testid="send-button"] { background-color: rgb(var(--brand-accent, var(--text-primary))); }
[data-testid="send-button"]:hover:not(:disabled) { background-color: rgb(var(--brand-accent-hover, var(--text-primary))); }
[data-testid="send-button"] svg { color: rgb(var(--brand-on-accent, var(--surface-primary))); }

/* Primary buttons (variant "submit") hardcode text-white. */
.bg-surface-submit.text-white { color: rgb(var(--brand-on-action, 255 255 255)); }

/* Auth pages (login etc.): page and card use bg-white / dark:bg-gray-900. */
.min-h-screen.bg-white,
.w-authPageWidth.bg-white {
  background-color: rgb(var(--brand-bg, 255 255 255));
}
.min-h-screen h1.text-black { color: rgb(var(--brand-text, 0 0 0)); }
.w-authPageWidth .focus\:border-green-500:focus { border-color: rgb(var(--brand-ring, 16 185 129)); }
.w-authPageWidth .peer:focus ~ .peer-focus\:text-green-600,
.w-authPageWidth .peer:focus ~ .dark\:peer-focus\:text-green-500 { color: rgb(var(--brand-ring, 5 150 105)); }
.w-authPageWidth a.text-green-600 { color: rgb(var(--brand-link, 5 150 105)); }

/* Login inputs: upstream paints the fill with an inset shadow, while the
 * floating labels use bg-surface-primary - paint both the same. */
html .webkit-dark-styles,
html .webkit-dark-styles:focus,
html.dark .webkit-dark-styles,
html.dark .webkit-dark-styles:focus {
  -webkit-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(--brand-text, 255 255 255));
}

/* Message markdown: links, tables and inline code use fixed greys/blues.
 * Upstream also hardcodes `p.whitespace-pre-wrap a, li a`, which outranks a
 * plain `.markdown a`. */
html .markdown a[href],
html.dark .markdown a[href] { color: rgb(var(--link)); }
html .markdown th,
html.dark .markdown th {
  background-color: rgb(var(--brand-surface-alt, var(--gray-100)));
  border-color: rgb(var(--brand-border-medium, var(--gray-300)));
}
html .markdown table,
html .markdown td,
html.dark .markdown td,
html.dark .markdown td:last-child {
  border-color: rgb(var(--brand-border-medium, var(--gray-300)));
}
/* :not(pre *) - code blocks nest <code> in a <div> inside <pre>, so a
 * :not(pre) > code selector would also tint the whole code block. */
html .prose code:not(pre *),
html.dark .prose code:not(pre *) {
  background-color: rgb(var(--brand-surface-alt, var(--gray-200)));
  color: rgb(var(--brand-text, var(--text-primary)));
}

/* Assistant icon container (landing/messages) is bg-white / dark:bg-* with a stroke. */
.shadow-stroke.bg-white { background-color: transparent; }

/* Syntax highlighting: upstream uses fixed hex colours per theme. */
html:root .hljs-keyword, html:root .hljs-literal, html:root .hljs-doctag, html:root .hljs-formula { color: rgb(var(--brand-code-keyword, 5 80 174)); }
html:root .hljs-built_in, html:root .hljs-class .hljs-title { color: rgb(var(--brand-code-builtin, 154 103 0)); }
html:root .hljs-string, html:root .hljs-regexp, html:root .hljs-addition, html:root .hljs-attribute, html:root .hljs-meta-string { color: rgb(var(--brand-code-string, 10 123 98)); }
html:root .hljs-number, html:root .hljs-attr, html:root .hljs-variable, html:root .hljs-template-variable, html:root .hljs-type, html:root .hljs-selector-attr, html:root .hljs-selector-class, html:root .hljs-selector-pseudo { color: rgb(var(--brand-code-number, 154 47 106)); }
html:root .hljs-title, html:root .hljs-bullet, html:root .hljs-link, html:root .hljs-selector-id, html:root .hljs-symbol { color: rgb(var(--brand-code-title, 180 35 24)); }
html:root .hljs-comment, html:root .hljs-meta { color: rgb(var(--brand-code-comment, var(--gray-500))); }
html.dark code.hljs { color: rgb(var(--brand-text, 255 255 255)); }
html.dark .hljs-keyword, html.dark .hljs-literal, html.dark .hljs-doctag, html.dark .hljs-formula { color: rgb(var(--brand-code-keyword, 46 149 211)); }
html.dark .hljs-built_in, html.dark .hljs-class .hljs-title { color: rgb(var(--brand-code-builtin, 233 149 12)); }
html.dark .hljs-string, html.dark .hljs-regexp, html.dark .hljs-addition, html.dark .hljs-attribute, html.dark .hljs-meta-string { color: rgb(var(--brand-code-string, 0 166 125)); }
html.dark .hljs-number, html.dark .hljs-attr, html.dark .hljs-variable, html.dark .hljs-template-variable, html.dark .hljs-type, html.dark .hljs-selector-attr, html.dark .hljs-selector-class, html.dark .hljs-selector-pseudo { color: rgb(var(--brand-code-number, 223 48 121)); }
html.dark .hljs-title, html.dark .hljs-bullet, html.dark .hljs-link, html.dark .hljs-selector-id, html.dark .hljs-symbol { color: rgb(var(--brand-code-title, 242 44 61)); }
html.dark .hljs-comment, html.dark .hljs-meta { color: rgb(var(--brand-code-comment, 128 128 128)); }

/* Scroll-to-bottom button: upstream paints it 90% opaque (bg-surface-chat/90),
 * so whatever scrolls under it (e.g. code-block icons) shows through. */
.bg-surface-chat\/90 { background-color: rgb(var(--surface-chat)); }
/* ...and its wrapper sits at z-10, the same level as code-block headers that
 * come later in the DOM, so those paint over the arrow. Lift it above. */
.scrollbar-gutter-spacer.pointer-events-none.absolute { z-index: 30; }

/* Selected conversation: upstream marks it with a 2px bar on the left only
 * (before:bg-text-primary), which reads as a half-drawn outline. Mirror it on
 * the right. */
.bg-surface-nav-selected.before\:bg-text-primary::after {
  content: '';
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  right: 0;
  width: 2px;
  border-radius: 9999px;
  background-color: rgb(var(--text-primary));
}

/* Web-search source icons: upstream stacks them overlapping, each with a
 * border, which reads as overlapping outlines (worse with square corners). */
.h-\[22px\].w-\[22px\].rounded-full.border { border-width: 0; }

/* Thinking/reasoning toggle: upstream shows a lightbulb and reveals the
 * chevron only on hover, so the row gives no hint that it expands (and none at
 * all on touch devices). Always show the chevron; tint the label on hover. */
.group\/thinking .group\/button .lucide-lightbulb { opacity: 0 !important; }
.group\/thinking .group\/button .lucide-chevron-down { opacity: 1 !important; }
.group\/thinking .group\/button:hover { color: rgb(var(--link)); }