/* Blue Haven brand layer for LibreChat v0.8.7 (patch BH-9, deploy/patches/README.md).
 * Loaded after LibreChat's own stylesheet by the patched index.html.
 * Brand: BH Brand Quick Reference v1.0 (Feb 2026).
 *   BH Blue #00539F (primary, dominant)   BH Teal #0094C2 (accent)
 *   BH Sky Blue #B5CCE8 (accent)          BH Gray #6B7280 (body and secondary text)
 *   Baskerville Pro for headlines, Montserrat for UI and body text.
 * Baskerville Pro is a licensed font and is not hosted yet (font files and a web license come from
 * graphics@bluehaven.com); until then the headline falls back to the device's Baskerville or Georgia.
 */

@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/brand/fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/brand/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/brand/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/brand/fonts/montserrat-700.woff2") format("woff2"); }

:root {
  --bh-blue: #00539f;
  --bh-blue-dark: #003f7a;
  --bh-teal: #0094c2;
  --bh-sky: #b5cce8;
  --bh-sky-light: #eaf2f8;
  --bh-gray: #6b7280;
  --bh-headline: "Baskerville Pro", "Baskerville", "Libre Baskerville", Georgia, serif;
  --bh-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Light theme colors ---------- */
html:not(.dark) {
  --text-primary: #1f2937;
  --text-secondary: var(--bh-gray);
  --text-secondary-alt: var(--bh-gray);
  --surface-submit: var(--bh-blue);
  --surface-submit-hover: var(--bh-blue-dark);
  --brand-purple: var(--bh-blue);
  --ring-primary: var(--bh-blue);
  --surface-secondary: #f4f8fc;
  --surface-hover: var(--bh-sky-light);
  --surface-active: #dbe7f4;
  --surface-active-alt: #dbe7f4;
  --border-light: #dfe7f0;
}

/* ---------- Dark theme: keep it on-brand too ---------- */
html.dark {
  --surface-submit: var(--bh-teal);
  --surface-submit-hover: #007ba1;
  --brand-purple: var(--bh-teal);
  --ring-primary: var(--bh-teal);
}

/* ---------- Type ---------- */
/* Montserrat runs large: one step smaller overall (16px to 15px; everything sized in rem follows) */
html { font-size: 15px; }
html, body, button, input, textarea, select {
  font-family: var(--bh-ui) !important;
}
pre, code, kbd, samp, .font-mono {
  font-family: "Roboto Mono", ui-monospace, monospace !important;
}
.markdown, .prose {
  line-height: 1.55;
}
a, .markdown a, .prose a {
  color: var(--bh-blue);
}
html.dark a, html.dark .markdown a, html.dark .prose a {
  color: #5cc3e6;
}

/* ---------- Landing (new chat) screen: big avatar above the name and description ---------- */
/* The icon box and the name sit in one row on wide screens; stack them, avatar first. */
div[class*="items-center justify-center gap-2"]:has(> div[class^="relative size-10 justify-center"]) {
  flex-direction: column !important;
  gap: 14px !important;
}
div[class^="relative size-10 justify-center"] {
  width: 200px !important;
  height: 200px !important;
  margin-bottom: 0 !important;
}
div[class^="relative size-10 justify-center"] > div,
div[class^="relative size-10 justify-center"] img,
div[class^="relative size-10 justify-center"] svg {
  width: 200px !important;
  height: 200px !important;
  max-width: none !important;
  max-height: none !important;
}
div[class^="relative size-10 justify-center"] img {
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 83, 159, 0.18);
}
/* Agent name and the Chat greeting: brand headline type */
div[class^="relative size-10 justify-center"] ~ div h1,
div[class^="relative size-10 justify-center"] ~ div .split-parent,
div[class^="relative size-10 justify-center"] ~ div [class*="font-medium text-text-primary"],
div[class^="relative size-10 justify-center"] ~ [class*="font-medium text-text-primary"] {
  font-family: var(--bh-headline) !important;
  font-weight: 700 !important;
  color: var(--bh-blue) !important;
  letter-spacing: 0.2px;
}
html.dark div[class^="relative size-10 justify-center"] ~ div [class*="font-medium text-text-primary"],
html.dark div[class^="relative size-10 justify-center"] ~ [class*="font-medium text-text-primary"] {
  color: #ffffff !important;
}
/* Agent description under the name: at most three lines, so a long description never reaches the
   message box (a short tagline, like PoolBoy's, reads best) */
.animate-fadeIn.mt-4.max-w-md.text-center {
  color: var(--bh-gray) !important;
  font-size: 1rem !important;
  font-style: italic;
  max-width: 34rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Shorter windows: smaller avatar so the welcome block and the message box never collide */
@media (max-height: 860px) {
  div[class^="relative size-10 justify-center"],
  div[class^="relative size-10 justify-center"] > div,
  div[class^="relative size-10 justify-center"] img,
  div[class^="relative size-10 justify-center"] svg { width: 150px !important; height: 150px !important; }
}
@media (max-height: 680px) {
  div[class^="relative size-10 justify-center"],
  div[class^="relative size-10 justify-center"] > div,
  div[class^="relative size-10 justify-center"] img,
  div[class^="relative size-10 justify-center"] svg { width: 100px !important; height: 100px !important; }
  .animate-fadeIn.mt-4.max-w-md.text-center { -webkit-line-clamp: 2; }
}

/* ---------- Agent icons elsewhere: a little larger for recognition ---------- */
/* Picker button and menu entries */
button[aria-haspopup] img.rounded-full,
[role="menu"] img.rounded-full,
[role="listbox"] img.rounded-full,
[role="option"] img.rounded-full {
  width: 28px !important;
  height: 28px !important;
}

/* ---------- Sign-in page ---------- */
div.mt-6.h-10.w-full.bg-cover {
  height: 84px !important;
  margin-top: 64px !important;
}
/* The corner logo is for the chat screens; the sign-in page already shows the logo on top */
body:has(div.mt-6.h-10.w-full.bg-cover)::after {
  display: none !important;
}
div.mt-6.h-10.w-full.bg-cover + * h1,
main h1, form h1, h1.text-center {
  font-family: var(--bh-headline) !important;
  color: var(--bh-blue) !important;
  font-weight: 700 !important;
}

/* ---------- Agent menu: no search box (only a handful of entries; "Search models" is jargon) ---------- */
/* Collapsed rather than display:none: the field is the menu's keyboard focus target. */
div.sticky.top-0.z-10.bg-inherit.p-1:has(> div.relative > input[role="combobox"]) {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ---------- Always-visible Blue Haven logo, bottom-right corner (Chris, 2026-10-01) ---------- */
/* Fixed to the window, so it stays put on every screen and while scrolling. Clicks pass through. */
body::after {
  content: "";
  position: fixed;
  right: 22px;
  bottom: 16px;
  width: 180px;
  height: 40px;
  background: url("/assets/brand/bh-logo-primary.png") right bottom / contain no-repeat;
  pointer-events: none;
  z-index: 5;
}
html.dark body::after {
  background-image: url("/assets/brand/bh-logo-primary-white.png");
}
/* Narrower windows and phones: the message box reaches the corner, so leave it clear */
@media (max-width: 1100px) {
  body::after { display: none; }
}

/* The welcome block is centered on a fixed point above the message box, so a taller avatar grows
   down into the box. Lift the block by the extra height. */
div.flex.flex-col.items-center.gap-0.p-2:has(div[class^="relative size-10 justify-center"]) {
  transform: translateY(-80px);
}
@media (max-height: 860px) {
  div.flex.flex-col.items-center.gap-0.p-2:has(div[class^="relative size-10 justify-center"]) { transform: translateY(-58px); }
}
@media (max-height: 680px) {
  div.flex.flex-col.items-center.gap-0.p-2:has(div[class^="relative size-10 justify-center"]) { transform: translateY(-32px); }
}