/*
 * Brunello branding for LibreChat v0.8.8 (pinned image).
 * Served from /assets/brand/brand.css, linked by the patched index.html (see branding/README.md).
 *
 * Two layers:
 *   1. Design tokens: LibreChat's own CSS variables (RGB triplets, e.g. "87 1 22"), redefined for
 *      light (html) and dark (html.dark). Robust: every component reads them; upgrades rarely rename them.
 *   2. Targeted selectors (login page, landing greeting, send button). Fragile: they depend on the
 *      v0.8.8 DOM and Tailwind class names; re-check screenshots after every image bump.
 *
 * Variants: default "classic" (tasteful); html[data-brand="atelier"] (wilder), toggled with ?brand=atelier.
 * High-contrast themes are intentionally left untouched (accessibility).
 *
 * Brand palette (brunellospa.com theme-styles.css + logo.svg):
 *   burgundy #570116 (87 1 22)  hover #460112  ink #231F20  gold #B7976E  ivory #F1EAE2  grey #4C4B46
 */

@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ 1. tokens: light */
html:not(.high-contrast) {
  --bl-brand: 87 1 22;
  --bl-brand-hover: 70 1 18;
  --bl-gold: 183 151 110;
  --bl-ivory: 241 234 226;
  --bl-font-display: 'Jost', 'Futura', 'Century Gothic', Inter, system-ui, sans-serif;

  --text-primary: 35 31 32;
  --text-secondary: 88 81 82;
  --text-secondary-alt: 112 104 104;
  --text-tertiary: 128 119 118;
  --text-muted: 122 114 113;

  --presentation: 255 255 255;
  --surface-primary: 255 255 255;
  --surface-primary-alt: 250 247 243;
  --surface-primary-contrast: 244 238 231;
  --surface-secondary: 248 244 239;
  --surface-secondary-alt: 236 228 219;
  --surface-tertiary: 241 234 226;
  --surface-tertiary-alt: 255 255 255;
  --surface-hover: 240 233 225;
  --surface-hover-alt: 230 220 209;
  --surface-composer-hover: 240 233 225;
  --surface-active: 241 234 226;
  --surface-active-alt: 236 227 217;
  --surface-chat: 255 255 255;
  --surface-dialog: 255 255 255;

  --border-light: 233 225 216;
  --border-medium: 220 210 199;
  --border-medium-alt: 220 210 199;
  --border-heavy: 190 177 164;
  --border-xheavy: 150 138 128;

  --surface-submit: var(--bl-brand);
  --surface-submit-hover: var(--bl-brand-hover);
  --accent-primary: var(--bl-brand);
  --accent-primary-hover: var(--bl-brand-hover);
  --ring-primary: var(--bl-gold);
  --link: 122 18 44;
  --link-hover: var(--bl-brand);
  --link-visited: 122 18 44;
  --brand-purple: var(--bl-brand);
}

/* ------------------------------------------------------------------ 1. tokens: dark */
html.dark:not(.high-contrast) {
  --bl-brand: 140 30 55;          /* lifted burgundy: readable on charcoal, white text AA */
  --bl-brand-hover: 160 42 68;

  --text-primary: 241 234 226;
  --text-secondary: 208 199 192;
  --text-secondary-alt: 180 170 164;
  --text-tertiary: 166 156 150;
  --text-muted: 160 150 145;

  --presentation: 22 19 20;
  --surface-primary: 22 19 20;
  --surface-primary-alt: 29 25 26;
  --surface-primary-contrast: 33 28 29;
  --surface-secondary: 36 31 32;
  --surface-secondary-alt: 40 34 35;
  --surface-tertiary: 47 40 41;
  --surface-tertiary-alt: 47 40 41;
  --surface-hover: 52 44 45;
  --surface-hover-alt: 62 53 54;
  --surface-composer-hover: 56 48 49;
  --surface-active: 74 63 64;
  --surface-active-alt: 58 49 50;
  --surface-chat: 36 31 32;
  --surface-dialog: 31 27 28;

  --border-light: 54 46 47;
  --border-medium: 70 61 62;
  --border-medium-alt: 70 61 62;
  --border-heavy: 98 87 87;
  --border-xheavy: 128 116 114;

  --accent-primary: var(--bl-gold);
  --accent-primary-hover: 205 178 142;
  --link: 214 184 147;
  --link-hover: 232 208 178;
  --link-visited: 214 184 147;
  --brand-purple: var(--bl-gold);
}

/* Pre-React loading screen (index.html #loading-container): monogram instead of a blank page. */
#loading-container {
  background-image: url('monogram.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 84px auto;
  animation: bl-breathe 1.8s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  #loading-container { background-image: url('monogram-ivory.svg'); }
}
@keyframes bl-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

::selection { background: rgb(var(--bl-gold, 183 151 110) / .35); }

/* ------------------------------------------------------------------ 2. login page (classic) */
/* The login root is the only page whose first child holds <img src="assets/logo.svg">. */
#root > div:has(> div > img[src$="assets/logo.svg"]) > div:first-child {
  height: 4.75rem;
  margin-top: 3.5rem;
  background: none;
}
html.dark #root > div:has(> div > img[src$="assets/logo.svg"]) > div:first-child {
  background: url('logo-on-dark.svg') center / contain no-repeat;
}
html.dark #root img[src$="assets/logo.svg"] { opacity: 0; }

#root > div:has(> div > img[src$="assets/logo.svg"]) main h1 {
  font-family: var(--bl-font-display);
  font-weight: 400;
  font-size: 1.9rem;
}
#root > div:has(> div > img[src$="assets/logo.svg"]) main h1::after {
  content: 'L’assistente per i dati aziendali';
  display: block;
  margin: .9rem auto 0;
  padding: .9rem .5rem 0;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.4;
  border-top: 1px solid rgb(var(--bl-gold) / .6);
  font-size: .9rem;
  font-weight: 400;
  color: rgb(var(--text-secondary));
}
#root > div:has(> div > img[src$="assets/logo.svg"]) input { border-radius: .625rem; }
/* LibreChat paints inputs with an inset box-shadow (#0d0d0d in dark): follow the brand surface. */
html.dark:not(.high-contrast) .webkit-dark-styles,
html.dark:not(.high-contrast) .webkit-dark-styles:focus {
  -webkit-box-shadow: inset 0 0 0 50vh rgb(var(--surface-primary));
}
#root > div:has(> div > img[src$="assets/logo.svg"]) button[type="submit"] {
  border-radius: .625rem;
  font-family: var(--bl-font-display);
  font-weight: 500;
  font-size: .95rem;
}

/* ------------------------------------------------------------------ 2. chat UI (classic) */
/* Landing greeting (interface.customWelcome) in the brand's geometric sans. */
main p.split-parent {
  font-family: var(--bl-font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.35;
}
/* Dialog titles (terms modal, settings). */
[role="dialog"] h2 { font-family: var(--bl-font-display); font-weight: 500; }

/* Send button: burgundy instead of ink. */
#send-button:not(:disabled) { background-color: rgb(var(--bl-brand)); }
#send-button:not(:disabled):hover { background-color: rgb(var(--bl-brand-hover)); }
#send-button:not(:disabled) svg { color: #fff; }

/* Conversation starters: quieter, squarer cards. */
main button.max-w-\[16rem\] { border-radius: .75rem; box-shadow: none; }

/* =================================================================== ATELIER (wilder) variant */
html[data-brand="atelier"] body,
html[data-brand="atelier"] #root { font-family: var(--bl-font-display); }
html[data-brand="atelier"] pre, html[data-brand="atelier"] code { font-family: revert; }

/* Burgundy sidebar in light mode: re-scope the tokens for the aside subtree only. */
html[data-brand="atelier"]:not(.dark):not(.high-contrast) #root aside {
  --surface-primary-alt: 87 1 22;
  --surface-hover: 112 22 44;
  --surface-active-alt: 122 30 52;
  --surface-active: 122 30 52;
  --border-light: 112 28 48;
  --border-medium: 130 44 64;
  --text-primary: 241 234 226;
  --text-secondary: 222 205 196;
  --text-tertiary: 210 190 180;
  color: rgb(var(--text-primary));
}
html[data-brand="atelier"]:not(.dark):not(.high-contrast) #root aside input::placeholder { color: rgb(222 205 196); }
/* Gold hairline between sidebar and chat. */
html[data-brand="atelier"] #root aside { box-shadow: inset -1px 0 0 rgb(var(--bl-gold) / .55); }

html[data-brand="atelier"] main p.split-parent { font-size: 1.9rem; font-weight: 300; }
@media (max-width: 640px) {
  main p.split-parent { font-size: 1.2rem; }
  html[data-brand="atelier"] main p.split-parent { font-size: 1.45rem; }
}

/* Login: split screen with Brunello's own burgundy paisley jacquard (brunellospa.com). */
@media (min-width: 900px) {
  html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) {
    padding-left: 46vw;
  }
  html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"])::before {
    content: '';
    position: fixed;
    inset: 0 auto 0 0;
    width: 46vw;
    background:
      linear-gradient(180deg, rgb(40 2 12 / .15) 0%, rgb(40 2 12 / .55) 60%, rgb(40 2 12 / .85) 100%),
      url('login-paisley.webp') center / cover no-repeat;
  }
  html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"])::after {
    content: '';
    position: fixed;
    left: 4vw;
    bottom: 7vh;
    width: min(30vw, 360px);
    aspect-ratio: 258 / 85;
    background: url('logo-on-dark.svg') left bottom / contain no-repeat;
  }
  /* Theme toggles would sit on the photo: move them to the form side. */
  html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) > div.absolute {
    left: 46vw;
  }
  /* The ivory logo lives on the photo; keep only the monogram above the form. */
  html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) > div:first-child {
    background: url('monogram.svg') center / contain no-repeat;
    height: 3.5rem;
  }
  html[data-brand="atelier"].dark #root > div:has(> div > img[src$="assets/logo.svg"]) > div:first-child {
    background-image: url('monogram-ivory.svg');
  }
  html[data-brand="atelier"] #root img[src$="assets/logo.svg"] { opacity: 0; }
}
html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) main h1 { font-weight: 300; font-size: 2.3rem; }
html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) main h1::before {
  content: 'Brunello AI';
  display: block;
  margin-bottom: .5rem;
  font-size: .95rem;
  font-weight: 400;
  color: rgb(var(--bl-gold));
}
/* Brand-site style buttons: square, underline-free. */
html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) button[type="submit"],
html[data-brand="atelier"] #root > div:has(> div > img[src$="assets/logo.svg"]) input { border-radius: 0; }

/* ------------------------------------------------------------------ single fixed assistant */
/* One model spec (Gemini 3.8 Flash as "Brunello AI"): no model picker in the header. */
[data-testid="model-selector-button"] { display: none !important; }