/* ================================================================
   JIVO CHAT WIDGET — follow the app theme
   ================================================================
   Management: "white jivo on dark mode looks super bad."

   Jivo has no runtime theming API — jivo_api only exposes
   setWidgetColor(), which repaints the brand accent, not the panel.
   We can style it ourselves though: the widget renders as <jdiv> in
   our own document (the one jivosite iframe is a hidden 0x0 host for
   its bundle, not the UI), and it is built on a --jv-* token layer
   that already ships a full dark set.

   Jivo pins which set is live with a per-build hashed class on the
   widget root — __light__IhIO3 / __dark__jh4fp — and never exposes
   the hash, so rather than chase it on every Jivo release we
   redeclare the dark values ourselves. Only the tokens that actually
   differ between Jivo's two sets are listed; the primitives
   (--jv-grayscale-*, --jv-blue-*, …) are theme-independent and stay
   Jivo's. Our specificity (0,2,2) beats their
   .global__x.__light__y (0,2,0).

   If Jivo ever renames the tokens or the globalClass__ prefix, these
   rules stop matching and the widget falls back to its light theme —
   wrong against dark, but never broken.
   ================================================================ */

html.dark-mode jdiv[class*="globalClass__"],
body.dark-mode jdiv[class*="globalClass__"] {
  --jv-background-globe: var(--jv-grayscale-80);
  --jv-background-island: var(--jv-grayscale-90);
  --jv-background-island-inner: var(--jv-grayscale-75);
  --jv-background-card: var(--jv-grayscale-70);
  --jv-background-popup: var(--jv-grayscale-90);
  --jv-background-border: var(--jv-grayscale-50);
  --jv-background-comment: var(--jv-yellow-90);

  --jv-text-primary: var(--jv-grayscale-0);
  --jv-text-secondary: var(--jv-grayscale-30);
  --jv-text-primary-inverse: var(--jv-grayscale-90);
  --jv-text-secondary-inverse: var(--jv-grayscale-45);

  --jv-icon-primary: var(--jv-grayscale-0);
  --jv-icon-secondary: var(--jv-grayscale-30);

  --jv-button-icon-fill-default: var(--jv-grayscale-0);
  --jv-button-icon-fill-hover: var(--jv-grayscale-30);
  --jv-button-icon-fill-disabled: hsla(0, 0%, 100%, 0.3);
  --jv-button-outlined-fill-default: var(--jv-grayscale-80);
  --jv-button-outlined-fill-hover: var(--jv-grayscale-75);
  --jv-button-outlined-fill-active: var(--jv-grayscale-90);
  --jv-button-outlined-fill-disabled: rgba(36, 41, 46, 0.3);
  --jv-button-outlined-border-outline: var(--jv-grayscale-50);
  --jv-button-outlined-text: var(--jv-grayscale-0);
  --jv-button-secondary-default: var(--jv-grayscale-50);
  --jv-button-secondary-hover: var(--jv-grayscale-45);
  --jv-button-secondary-active: var(--jv-grayscale-55);
  --jv-button-secondary-disabled: rgba(88, 96, 105, 0.3);
  --jv-button-secondary-text: var(--jv-grayscale-0);
  --jv-button-secondary-text-disabled: hsla(0, 0%, 100%, 0.3);

  --jv-status-background-info: rgba(54, 127, 238, 0.1);
  --jv-status-background-success: rgba(24, 193, 57, 0.1);
  --jv-status-background-warning: rgba(236, 174, 4, 0.1);
  --jv-status-background-danger: rgba(249, 70, 54, 0.1);
}

/* The copyright strip, the "…" menu and the composer hardcode #fff
   instead of reading the token layer, so they stay white while the
   rest of the panel goes dark. */
html.dark-mode jdiv[class*="chatCopyright__"],
html.dark-mode jdiv[class*="moreBox__"],
html.dark-mode jdiv[class*="input__"],
body.dark-mode jdiv[class*="chatCopyright__"],
body.dark-mode jdiv[class*="moreBox__"],
body.dark-mode jdiv[class*="input__"] {
  background-color: var(--jv-background-globe) !important;
}

html.dark-mode jdiv[class*="sendButton__"][class*="__disabled__"],
body.dark-mode jdiv[class*="sendButton__"][class*="__disabled__"] {
  background-color: var(--jv-grayscale-75) !important;
}

/* "Business Messenger by jivochat" — the wordmark is dark ink baked
   into a data-URI SVG, so it vanishes on the now-dark strip. Invert
   plus a 180deg hue rotation lifts the ink without turning the green
   leaf magenta. Scoped to the strip: the collapsed launcher carries
   the same logoIcon__ class on a blue label, where it reads fine.
   !important because Jivo's reset pins jdiv { filter: none !important }
   to keep host-page filters off its widget. */
html.dark-mode jdiv[class*="chatCopyright__"] jdiv[class*="logoIcon__"],
body.dark-mode jdiv[class*="chatCopyright__"] jdiv[class*="logoIcon__"] {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* The composer textarea hardcodes #222d38 ink (colour AND
   -webkit-text-fill-color, both !important) rather than reading the token
   layer, so what you type is invisible once the composer goes dark. Ours
   wins on specificity: (0,3,2) over their textarea.inputField__x (0,1,1).
   The resting placeholder is pinned to #697582, which drops to ~3:1 on the
   dark composer; lift it to the same grey Jivo uses for the focused
   placeholder so dark reads at least as well as light does. */
html.dark-mode jdiv[class*="globalClass__"] textarea[class*="inputField__"],
body.dark-mode jdiv[class*="globalClass__"] textarea[class*="inputField__"] {
  color: var(--jv-text-primary) !important;
  -webkit-text-fill-color: var(--jv-text-primary) !important;
  caret-color: var(--jv-text-primary) !important;
}

html.dark-mode jdiv[class*="globalClass__"] textarea[class*="inputField__"]::placeholder,
body.dark-mode jdiv[class*="globalClass__"] textarea[class*="inputField__"]::placeholder {
  color: var(--jv-text-tertiary-inverse) !important;
  -webkit-text-fill-color: var(--jv-text-tertiary-inverse) !important;
}

html.dark-mode jdiv[class*="globalClass__"] textarea[class*="inputField__"]::-moz-placeholder,
body.dark-mode jdiv[class*="globalClass__"] textarea[class*="inputField__"]::-moz-placeholder {
  color: var(--jv-text-tertiary-inverse) !important;
  -webkit-text-fill-color: var(--jv-text-tertiary-inverse) !important;
}