/* Polyvantis brand overlay for LibreChat v0.8.5 — light-theme-first.
 *
 * CONFIRMED PALETTE — extracted 2026-05-19 + cross-checked 2026-05-20 against
 * the live Polyvantis stylesheet (www.polyvantis.com /files/plexiglas/.../
 * style-polyvantis.css). The brand pair is verified by Polyvantis' own
 * .logo__monument gradients:
 *   pale slab : linear-gradient(-45deg,#B2D2D6 0% 50%, transparent 50% 100%)
 *   brand slab: linear-gradient(-45deg,#006978 0% 50%, #00FFBE 50% 100%)
 *   Primary petrol : #006978  (their wordmark uses #006977)
 *   Mint accent    : #00FFBE  (CTA highlight)
 *   Pale teal      : #B2D2D6  (monument inner slab)
 *   Dark brand     : #003847  (headings, dark hover)
 *   Light surface  : #E8F0F1  (panels)
 *
 * Mechanism: linked AFTER the built stylesheet in the overridden index.html,
 * so :root rules win the cascade. Target tokens are v0.8.5 specific
 * (assets/index.*.css); re-verify if the LibreChat image tag is bumped.
 *
 * Strategy:
 *   1. Light theme is forced as default for new users via index.html (matches
 *      polyvantis.com — light surfaces, teal accents). Dark mode still works.
 *   2. Light mode token overrides retint gray-50/100/200/300 toward petrol so
 *      sidebar / hover / borders carry the brand without leaving white-canvas
 *      readability behind.
 *   3. Dark mode keeps the tinted-dark gray-700..900 (previous iteration).
 *   4. Green scale -> petrol scale so the submit/send button is on-brand.
 *      Mint kept reserved for explicit accent (focus, links).
 *   5. Polyvantis palette also exposed as --pv-* tokens for any custom rules.
 */

:root,
.gizmo,
.gizmo.dark {
  /* --- Polyvantis palette (named tokens for our own rules) --- */
  --pv-petrol: #006978;
  --pv-mint:   #00FFBE;
  --pv-pale:   #B2D2D6;
  --pv-dark:   #003847;
  --pv-light:  #E8F0F1;

  /* --- Brand accent (links, highlights). --- */
  --brand-purple: #006978;

  /* --- Green scale remap -> Polyvantis petrol scale.
       Drives surface-submit (send button), surface-submit-hover, and various
       small accents. Light text stays legible on every shade. --- */
  --green-400: #1f8a98;   /* lighter petrol */
  --green-500: #006978;   /* primary petrol */
  --green-600: #00535f;   /* hover */
  --green-700: #003847;   /* dark-brand / surface-submit */
  --green-800: #002830;   /* surface-submit-hover */

  /* --- Focus ring. --- */
  --ring-primary: #006978;
}

/* --- Light mode (default theme): petrol-tinted neutrals ---
   The chrome composes light surfaces from gray-50/100/200 of the scale:
     sidebar          : gray-50
     hover / bubbles  : gray-100
     borders          : gray-200 / gray-300
   Retinting these toward petrol gives a clean light-Polyvantis feel while
   keeping pure white canvas + dark body text intact. */
:root,
.gizmo {
  --gray-50:  #F5F9FA;
  --gray-100: #E8F0F1;
  --gray-200: #C8D8DB;
  --gray-300: #A8C3C8;
}

/* --- Dark mode (toggle-only fallback): tinted-dark surfaces ---
   Sidebar / canvas / dialogs / message-bubbles in petrol-tinted darks;
   gray-600 and lower stay neutral for border/text contrast. */
.gizmo.dark {
  --gray-700: #1d343d;
  --gray-800: #15252e;
  --gray-850: #11212a;
  --gray-900: #0c1518;
}

/* --- Stronger active/hover surface (selected conversation in sidebar) ---
   Convo.tsx uses Tailwind `bg-surface-active-alt` for the selected state.
   Pushing this token to a clearly-petrol rgba makes the active conversation
   read as on-brand without forcing a text-color flip (dark text stays
   legible on the lighter alpha). */
:root,
.gizmo {
  --surface-active-alt: rgba(0, 105, 120, 0.22);
  --surface-hover: rgba(0, 105, 120, 0.08);
}
.gizmo.dark {
  --surface-active-alt: rgba(0, 255, 190, 0.18);
  --surface-hover: rgba(0, 255, 190, 0.08);
}

/* --- Polyvantis brand strip across the top of the app ---
   Replicates polyvantis.com's solid teal header band: white wordmark left,
   monument mark right. body::before is fixed at z-9999; html/body get
   padding-top so app content shifts under it. pointer-events:none keeps
   the strip purely decorative so it never blocks clicks on the app below.
   Asset paths target the in-stack bind-mounts in docker-compose.override.yml. */
html,
body {
  box-sizing: border-box;
}
body {
  padding-top: 44px !important;
}
/* The strip steals 44px from the top via body padding. LibreChat's own
   layout has interior scroll containers (chat history, sidebar, dialogs)
   so the document itself should never scroll. Forcing overflow:hidden on
   html/body prevents the 44px push from manifesting as page scroll;
   interior overflow:auto/scroll containers continue to work because they
   define their own scrollport. */
html,
body {
  overflow: hidden !important;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: var(--pv-petrol);
  background-image:
    url("/assets/monument.svg"),
    url("/assets/polyvantis_logo_white.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: 232px center, 20px center;
  background-size: auto 28px, auto 22px;
  /* z-index 100 is above LibreChat's chrome (max z-50 in v0.8.5) but below
     the Radix Toast viewport (z-1000), so success/error notifications always
     render on top of the brand strip even if the viewport-offset selector
     fails to match a future Radix version. */
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* The brand strip steals 44px from the top of the viewport via body
   padding-top. LibreChat uses several 100vh-based utility classes for
   full-height layouts, which reference the raw viewport (ignoring body
   padding) and overflow. Subtract the strip from every viewport-height
   utility found in the v0.8.5 bundle so nothing scrolls just because of
   the strip. Source scan: grep '100vh' index.*.css. */
.h-screen {
  height: calc(100vh - 44px) !important;
}
.max-h-screen {
  max-height: calc(100vh - 44px) !important;
}
.min-h-screen {
  min-height: calc(100vh - 44px) !important;
}
/* Radix Toast viewport sits at fixed inset-0 z-[1000] with justify-start in
   App.jsx; toasts therefore render in the top 8px of the screen, behind the
   z-9999 brand strip. Shift the viewport below the 44px strip and raise its
   z-index so success/error messages are always visible.
   Defense in depth: target via Radix ARIA semantics AND Tailwind classes,
   so either path catches the viewport regardless of Radix version drift. */
[role="region"][aria-label^="Notifications"],
[role="region"][aria-label*="Notifications"],
ol[tabindex="-1"][role="region"],
[class~="z-[1000]"][class~="fixed"][class~="inset-0"] {
  top: 44px !important;
  z-index: 10000 !important;
}

.h-\[calc\(100vh-8rem\)\] {
  height: calc(100vh - 8rem - 44px) !important;
}
.max-h-\[100vh\] {
  max-height: calc(100vh - 44px) !important;
}
.max-h-\[calc\(100vh-20rem\)\] {
  max-height: calc(100vh - 20rem - 44px) !important;
}
.min-h-\[calc\(100vh-20rem\)\] {
  min-height: calc(100vh - 20rem - 44px) !important;
}
@media (min-width: 768px) {
  .md\:max-h-\[calc\(100vh-150px\)\] {
    max-height: calc(100vh - 150px - 44px) !important;
  }
}

/* Tailwind dvh utilities + inline style on the Root.tsx layout div.
   routes/Root.tsx wraps the entire chat layout in:
     <div style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
   The inline style wins over class-level rules, so we target it via the
   [style*="100dvh"] attribute selector with !important. Same subtraction
   applied to the dvh utility classes for symmetry. */
.h-\[100dvh\],
div[style*="100dvh"] {
  height: calc(100dvh - 44px) !important;
}
.max-h-\[100dvh\] {
  max-height: calc(100dvh - 44px) !important;
}

/* --- Landing / welcome screen: bigger monument + Polyvantis dark heading ---
   Landing.tsx (client/src/components/Chat/Landing.tsx) wraps the welcome
   icon in `.relative.size-10` inside a container with `.transform-gpu.pb-16`.
   We scope the size bump + heading color to that chain so only the landing
   icon grows -- other 10-square avatars (sidebar, headers) stay at 40px. */
.transform-gpu.pb-16 .size-10 {
  width: 5rem !important;
  height: 5rem !important;
}
.transform-gpu.pb-16 .text-text-primary {
  color: var(--pv-dark);
}
.gizmo.dark .transform-gpu.pb-16 .text-text-primary {
  color: #cce0e3;
}

/* --- Monument icon: render flat, not circle-clipped ---
   ConvoIconURL -> URLIcon wraps the iconURL in containers carrying
   `overflow-hidden rounded-full` (classMap default in ConvoIconURL.tsx),
   and the inner <img> uses `object-cover`. For a 2:1-ish brand mark this
   clips it to a circle and crops the slabs to gibberish.
   :has() scopes the override to any container holding the monument <img>,
   so it lifts the round clip + crop wherever the monument renders (tab
   pill, welcome heading, anywhere else). Modern browsers only (Chrome
   105+, Safari 15.4+, Firefox 121+); v0.8.5 already requires modern. */
div:has(> img[src*="monument.svg"]),
div:has(> div > img[src*="monument.svg"]) {
  border-radius: 0 !important;
  background-color: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
}
img[src*="monument.svg"] {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- Send button: mint accent (matches polyvantis.com CTA color) ---
   SendButton.tsx uses bg-text-primary; we override at the testid level so
   only the send/submit button flips to mint with the dark-brand icon. */
button[data-testid="send-button"] {
  background-color: var(--pv-mint) !important;
  color: var(--pv-dark) !important;
}
button[data-testid="send-button"]:hover:not(:disabled) {
  background-color: #00e6ab !important;
}
button[data-testid="send-button"]:disabled {
  background-color: var(--pv-pale) !important;
  color: var(--pv-dark) !important;
  opacity: 0.5;
}

/* --- Selected conversation: drop the black/white left-bar accent ---
   Convo.tsx (client/src/components/Conversations/Convo.tsx:185-187) layers
   TWO active-state cues on the outer container: `bg-surface-active-alt` for
   the petrol-tinted fill (our brand) AND a `::before` pseudo-element pinned
   to the left edge (`before:absolute before:bottom-1 before:left-0 before:top-1
   before:w-0.5 before:rounded-full before:bg-black dark:before:bg-white`).
   The bar reads as a second, conflicting accent against the petrol fill.
   Scoping to `[data-testid="convo-item"]` keeps this surgical — other ::before
   pseudo-elements elsewhere in the sidebar/app remain untouched. */
[data-testid="convo-item"]::before {
  display: none !important;
}

/* --- Selected conversation: collapse the doubled background fill ---
   Two nested elements both carry `bg-surface-active-alt` when active:
     1. Convo.tsx:186          outer <div data-testid="convo-item">      (whole row)
     2. ConvoLink.tsx:24-28    inner <div aria-current="page">           (icon + title)
   With --surface-active-alt at rgba(0,105,120,0.22) the stacked alpha
   compounds to ~0.39 behind the text vs 0.22 around the options button,
   visible as a darker rectangle behind the title. Killing the inner layer
   keeps the outer petrol fill as the single active-state cue. The right-side
   fade-gradient is a sibling div (ConvoLink.tsx:49-57), not this element,
   so the long-title clip-shadow remains intact. */
[data-testid="convo-item"] > div[aria-current="page"] {
  background-color: transparent !important;
}

/* --- Hide the Artifacts pill from the prompt-bar (ChatGPT/Claude-style) ---
   v0.8.5 has no `interface.artifacts: false` config — the Artifacts component
   renders unconditionally when `artifacts: true` is on the active spec (or the
   user pinned it). Functionality is hard-coupled to the toggle: turning it off
   skips the system-prompt injection in initialize.ts:411 that teaches the
   model artifact tags. So instead of disabling the feature, we hide ONLY the
   user-facing pill via CSS — the wand-sparkles lucide icon is the stable DOM
   hook. Functionality (prompt injection + artifact-panel rendering) is fully
   intact; only the badge is gone. Same trick scales to any other pill that
   doesn't have a yaml-side hide-switch. */
div.flex:has(> button svg.lucide-wand-sparkles),
div.flex:has(> button svg[class*="wand-sparkles"]) {
  display: none !important;
}