/* ============================================================
   WIN AI — Wine Industry Network brand skin for LibreChat
   v5  (burgundy primary  +  WIN olive secondary  +  WIN logo)
   ------------------------------------------------------------
   Brand: primary burgundy #7B1544, secondary olive #989B66
   ============================================================ */

/* ---- Burgundy primary (drives toggles, sliders, focus rings,
        the Continue/submit buttons via --surface-submit, etc.) ---- */
:root, .dark {
  --brand-purple: #7B1544 !important;

  /* --green-* are the VARIABLE greens LibreChat resolves for
     --surface-submit (login/Continue button). Remapped to burgundy
     so primary submit actions read as WIN burgundy. */
  --green-50:#fbe9f0 !important;  --green-100:#f6ccdc !important; --green-200:#eca3bf !important;
  --green-300:#df769f !important; --green-400:#c64c7c !important; --green-500:#9B3564 !important;
  --green-600:#7B1544 !important; --green-700:#5B0F34 !important; --green-800:#4a0c2a !important;
  --green-900:#3a0921 !important; --green-950:#2a0617 !important;

  --ring-primary:#7B1544 !important;
  --primary: 332 71% 28% !important;       /* hsl(#7B1544) */
  --primary-foreground: 0 0% 100% !important;
  --ring: 332 71% 28% !important;
}

/* Chat Send button -> burgundy. Uses a substring aria-label match, so EXCLUDE
   the "Send prompts on select" toggle (aria-label contains "send" too, but it's
   a native bg-surface-hover toggle with a small bg-primary checkbox — let it be). */
button[aria-label*="send" i]:not([aria-label*="prompt" i]) { background-color: #7B1544 !important; }
button[aria-label*="send" i]:not([aria-label*="prompt" i]) svg { color: #ffffff !important; }

/* ============================================================
   WIN olive secondary (#989B66)
   ============================================================ */

/* Green TEXT accents (e.g. the prompt "shared" globe icons) -> olive.
   Reads well on the light prompt cards. */
[class~="text-green-400"],[class~="text-green-500"],[class~="text-green-600"],[class~="text-green-700"]{
  color:#989B66 !important;
}

/* The "Save As Preset" / submit-style button uses LibreChat's emerald/teal
   accent (NOT the green slot), which is why it ignored the green remap.
   Recolor emerald + teal directly -> WIN olive. */
[class*="bg-emerald-"],[class*="bg-teal-"]{ background-color:#989B66 !important; }
[class*="hover:bg-emerald-"]:hover,[class*="hover:bg-teal-"]:hover{ background-color:#878A59 !important; }
[class*="text-emerald-"],[class*="text-teal-"]{ color:#989B66 !important; }
[class*="border-emerald-"],[class*="border-teal-"]{ border-color:#989B66 !important; }

/* Burgundy pills/buttons whose background is a green-var shade (400-900 resolve
   to dark burgundy via the remap above) need WHITE text for contrast.
   Wins over the green-text->olive rule above (declared later).
   NOTE: the "Send prompts on select" toggle is NOT one of these — it's handled
   by the Send-button rule exclusion above, not a bg-green background. */
[class*="bg-green-400"],[class*="bg-green-500"],[class*="bg-green-600"],[class*="bg-green-700"],[class*="bg-green-800"],[class*="bg-green-900"],
[class*="bg-green-400"] *,[class*="bg-green-500"] *,[class*="bg-green-600"] *,[class*="bg-green-700"] *,[class*="bg-green-800"] *,[class*="bg-green-900"] *{
  color:#ffffff !important;
}

/* ============================================================
   Login: keep the floating label off an autofilled value (ASKWIN-109)
   ============================================================
   LibreChat's auth labels float via `:placeholder-shown` on the sibling input
   (`input.peer ~ label`). Chrome paints an autofilled value — and its pre-commit
   suggestion preview — while `input.value` is still EMPTY, so `:placeholder-shown`
   stays true, the label stays centred, and it sits on top of the address. Clicking
   into the field fixes it, which is the tell: focus floats the label via a
   different rule.

   Not a z-index problem, and not caused by the WIN skin — the label is already
   above the text by design; it is simply in the wrong POSITION. So this moves it
   rather than restacking anything.

   Geometry mirrors LibreChat's own focus state exactly, so an autofilled field
   looks identical to a typed one: peer-focus:top-1.5 (.375rem) +
   peer-focus:-translate-y-4 (-1rem) + peer-focus:scale-75. Horizontal padding
   (px-2) and inline-start are already on the label's base classes, so they are
   deliberately NOT overridden here — including for RTL.

   Kept as two separate rules ON PURPOSE: one invalid selector invalidates an
   entire selector list, so pairing the standard `:autofill` with the prefixed
   `:-webkit-autofill` in one comma list would drop BOTH in any engine that knows
   only one of them. */
input.peer:-webkit-autofill ~ label{
  top:0.375rem !important;
  transform:translateY(-1rem) scale(0.75) !important;
}
input.peer:autofill ~ label{
  top:0.375rem !important;
  transform:translateY(-1rem) scale(0.75) !important;
}

/* ---- WIN logo ----
   Light mode: served by the WIN burgundy logo.svg baked into the image.
   Dark mode: swap to the white monogram so it reads on the dark background. */
.dark img[src*="logo.svg"]{ content:url("/assets/win-icon-dark.png"); }

/* ---- "New chat" icon: stock pencil → lucide message-square-plus (ASKWIN-68) ----
   A pencil reads as "edit," not "new chat." Repaint the stock <svg> with a CSS
   mask instead of a JS DOM swap (React would revert that on every re-render): blank
   the stock interior, then fill the svg box with currentColor clipped to the
   message-square-plus outline. Because the fill is currentColor it tracks the
   button's own text color in BOTH themes (ASKWIN-48) — no separate .dark asset,
   no layout shift (the svg keeps its box), and a stylesheet can't be re-rendered
   away. The tooltip matcher in win-launcher.js keys on aria-label, untouched here. */
button[aria-label="New chat" i] svg,
a[aria-label="New chat" i] svg,
[role="button"][aria-label="New chat" i] svg{
  /* NB: do NOT set color:transparent here — background-color:currentColor would then
     resolve to transparent and the icon would vanish. The stock strokes are hidden by
     the `svg>*{display:none}` rule below, so currentColor stays the button's text color. */
  background-color:currentColor !important;    /* theme-aware fill (light + dark) */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 8v6'/%3E%3Cpath d='M9 11h6'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 8v6'/%3E%3Cpath d='M9 11h6'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* Blank the stock interior regardless of how it's drawn (currentColor OR a hardcoded
   fill), so only our masked fill shows. The svg's box (width/height) is kept. */
button[aria-label="New chat" i] svg>*,
a[aria-label="New chat" i] svg>*,
[role="button"][aria-label="New chat" i] svg>*{ display:none !important; }