/*
 * SI Assist brand colors for chat.siassist.me (LibreChat).
 * Served by Caddy from /var/www/si-brand (no-cache, edits are live on refresh).
 * Only applies when <html> has the "si-brand" class (see si-theme.js).
 * Values are "R G B" triplets because LibreChat's CSS reads them as rgb(var(--x) / alpha).
 * !important is needed to beat the inline variables LibreChat's ThemeProvider sets on <html>.
 *
 * Palette (from siassist.me):
 *   navy bg #0b0d17, bg-2 #11142a, card #151935, border #262b52
 *   text #eef0ff, muted #a3a8c9, purple #7c5cff, cyan #00c2ff
 */

/* ---------- Dark mode: full SI Assist navy look ---------- */
html.si-brand.dark {
  --presentation: 11 13 23 !important;
  --surface-primary: 11 13 23 !important;
  --surface-primary-alt: 17 20 42 !important;
  --surface-primary-contrast: 17 20 42 !important;
  --surface-secondary: 21 25 53 !important;
  --surface-secondary-alt: 21 25 53 !important;
  --surface-tertiary: 28 33 70 !important;
  --surface-tertiary-alt: 28 33 70 !important;
  --surface-dialog: 17 20 42 !important;
  --surface-chat: 28 33 70 !important;
  --surface-code: 17 20 42 !important;
  --surface-hover: 33 38 80 !important;
  --surface-hover-alt: 38 43 90 !important;
  --surface-composer-hover: 38 43 82 !important;
  --surface-active: 44 49 96 !important;
  --surface-active-alt: 28 33 70 !important;
  --surface-submit: 124 92 255 !important;
  --surface-submit-hover: 106 77 230 !important;
  --surface-inverted: 124 92 255 !important;
  --surface-inverted-hover: 148 121 255 !important;
  --text-inverted: 255 255 255 !important;

  --header-primary: 28 33 70 !important;
  --header-hover: 38 43 82 !important;
  --header-button-hover: 28 33 70 !important;

  --border-light: 38 43 82 !important;
  --border-medium: 44 49 96 !important;
  --border-medium-alt: 44 49 96 !important;
  --border-heavy: 60 66 120 !important;
  --border-xheavy: 163 168 201 !important;

  --text-primary: 238 240 255 !important;
  --text-secondary: 214 217 245 !important;
  --text-secondary-alt: 163 168 201 !important;
  --text-tertiary: 163 168 201 !important;
  --text-muted: 163 168 201 !important;

  --accent-primary: 124 92 255 !important;
  --accent-primary-hover: 148 121 255 !important;
  --link: 0 194 255 !important;
  --link-hover: 102 218 255 !important;
  --ring-primary: 124 92 255 !important;
  --brand-purple: 124 92 255 !important;
}
html.si-brand.dark body {
  background-color: #0b0d17;
}

/* ---------- Light mode: white pages, SI Assist purple accents ---------- */
html.si-brand.light {
  --presentation: 255 255 255 !important;
  --surface-primary-alt: 247 246 255 !important;
  --surface-submit: 124 92 255 !important;
  --surface-submit-hover: 106 77 230 !important;
  --accent-primary: 124 92 255 !important;
  --accent-primary-hover: 106 77 230 !important;
  --link: 106 77 230 !important;
  --link-hover: 124 92 255 !important;
  --ring-primary: 124 92 255 !important;
  --brand-purple: 124 92 255 !important;
}

/* ---------- Signature gradient on the send button (both modes) ---------- */
html.si-brand button[data-testid="send-button"]:not(:disabled) {
  background-image: linear-gradient(135deg, #7c5cff, #00c2ff) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/*
 * Welcome greeting: the word "Welcome" large and baby blue, for EVERYONE
 * (not gated by html.si-brand). LibreChat animates the greeting one letter
 * per span; the first word span holds W-e-l-c-o-m-e plus the comma.
 * si-theme.js adds .si-greet to "Welcome, <name>." so the name matches.
 */
p.split-parent > span[aria-hidden="true"]:nth-child(2) > span:nth-child(-n+7),
p.split-parent > span.si-greet > span {
  color: #89cff0 !important;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* "Guide" header button (added by si-theme.js), for EVERYONE. */
#si-guide-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c5cff, #00c2ff);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
#si-guide-btn:hover { filter: brightness(1.08); }
#si-guide-btn:focus-visible { outline: 2px solid #89cff0; outline-offset: 2px; }

/* Quick-pick chart under the welcome greeting (added by si-theme.js), for EVERYONE. */
#si-quick-picks {
  width: 100%;
  max-width: 640px;
  margin: 16px auto 0;
  border: 2px solid #89cff0;
  border-radius: 14px;
  overflow: hidden;
}
#si-quick-picks table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
#si-quick-picks th {
  background: #89cff0;
  color: #0b2a3d;
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#si-quick-picks td {
  padding: 8px 12px;
  border-top: 1px solid rgba(137, 207, 240, .45);
  vertical-align: top;
}
#si-quick-picks td:first-child { white-space: nowrap; }
#si-quick-picks a {
  color: #89cff0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#si-quick-picks a:hover { filter: brightness(.85); }
#si-quick-picks tr:hover td { background: rgba(137, 207, 240, .12); }
@media (max-width: 520px) {
  #si-quick-picks th:nth-child(2),
  #si-quick-picks td:nth-child(2) { display: none; }
  #si-quick-picks td:first-child { white-space: normal; }
}
/* LibreChat collapses the welcome box (sm:max-h-0) so the greeting floats over
   the centered input; let it grow so the chart pushes the input down instead. */
.transform-gpu:has(#si-quick-picks) {
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 16px !important;
}