.ww-widget {
  --ww-button-color: #25d366;
  /* The WhatsApp mark only. It used to colour the label, the close X and the
     panel heading too, so a merchant could not put a dark label on a light
     button without darkening the logo along with it. */
  --ww-icon-color: #ffffff;
  /* The button's wording, separate from the mark beside it. */
  --ww-button-text: #ffffff;
  /* Everything written on a coloured surface: the button label, the close X,
     the contact menu heading and the bar's close button. */
  --ww-title-color: #ffffff;
  --ww-font-weight: 700;
  --ww-size: 56px;
  --ww-bottom: 24px;
  --ww-side: 24px;
  --ww-panel-width: 380px;
  --ww-popup-background: #ffffff;
  --ww-popup-text: #17201b;
  --ww-popup-muted: #516159;
  --ww-popup-accent: #25d366;
  --ww-popup-hover: #f6faf5;
  --ww-popup-border: #dde7de;
  --ww-bar-max-width: 480px;
  /* The ask-a-question bar is coloured by its own three settings only: the
     outline colour, the animation colour and the button colour. It used to
     borrow the contact menu's six panel colours, which meant recolouring the
     menu silently recoloured the bar. The surface and ink below are fixed
     rather than settings: the bar is a message field, and merchants asked for
     three knobs, not nine. Values match the old popup defaults exactly, so
     detaching them changed nothing on screen. */
  --ww-bar-surface: #ffffff;
  --ww-bar-surface-alt: #f6faf5;
  --ww-bar-ink: #17201b;
  --ww-bar-ink-muted: #516159;
  /* Accent and border both track the merchant's outline colour, so the one
     setting they were given actually reaches every edge of the experience. */
  --ww-bar-outline: #25d366;
  /* Chosen for the look. Note it sits at 2.48:1 on the white field, under the
     4.5:1 WCAG AA threshold for text. WhatsApp's own placeholder gray
     (#667781) is the nearest accessible match at 4.65:1 if that ever needs
     to change. */
  --ww-placeholder: #9aa8a0;
  /* Solid WhatsApp green with a white label, the same pairing the round
     button already uses. Note white on #25d366 measures 1.98:1, so it leans
     on brand recognition rather than contrast; #075e54 on #dcf8c6 was the
     accessible alternative at 6.68:1. */
  /* The hairline used across the whole ask-a-question experience: the field,
     the card, the chips, the chooser rows and the secondary buttons all share
     it, so the green line reads as one system rather than per-element trim.
     Kept faint on purpose; the resting border should be barely there. */
  --ww-hairline: rgba(37, 211, 102, 0.22);
  --ww-hairline-strong: rgba(37, 211, 102, 0.4);
  --ww-bar-hover: rgba(37, 211, 102, 0.12);
  --ww-glow-color: #25d366;
  --ww-bar-send-color: #25d366;
  --ww-qr-web-button: #25d366;
  --ww-qr-button-text: #ffffff;

  position: fixed;
  right: var(--ww-side);
  /* --ww-keyboard-lift is set by the JS from the visual viewport while the
     field has focus, so the bar rides above the on-screen keyboard instead of
     sitting behind it. It is 0 everywhere else. */
  bottom: calc(var(--ww-bottom) + var(--ww-keyboard-lift, 0px));
  z-index: 2147483000;
  font-family: inherit;
}

.ww-widget[data-position="bottom-left"]:not([data-bar-active="true"]) {
  right: auto;
  left: var(--ww-side);
}

/* The bar is centred; a round button keeps the merchant's corner. Keyed on the
   mode rather than a synthetic position value, because the mode differs by
   viewport and the position setting does not. */
.ww-widget[data-button-mode="input_bar"] {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--ww-bar-max-width), calc(100vw - var(--ww-side) * 2));
}

.ww-widget__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: var(--ww-size);
  min-height: var(--ww-size);
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ww-button-color);
  color: var(--ww-button-text);
  font-size: 15px;
  font-weight: var(--ww-font-weight, 700);
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  /* Keep offset-y + blur/2 under --ww-bottom (14px floor on mobile), or the
     screen edge clips the shadow into a hard line. Matches the NubeSDK build. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 0;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    width 180ms ease,
    min-width 180ms ease,
    padding 180ms ease;
}

.ww-widget[data-open="true"] .ww-widget__button,
.ww-widget[data-effective-mode="icon_only"] .ww-widget__button {
  width: var(--ww-size);
  height: var(--ww-size);
  padding: 0;
}

.ww-widget__button:hover {
  color: var(--ww-button-text);
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.ww-widget__button:focus-visible {
  outline: 2px solid rgba(37, 211, 102, 0.2);
  outline-offset: 2px;
}

.ww-widget[data-open="true"] .ww-widget__button:focus-visible {
  outline: none;
}

.ww-widget__icon {
  display: block;
  /* Half the button height, which is the ratio the fixed 28px had against the
     default 56px button. It used to stay 28px at every size, so a 72px button
     got a mark that read as too small and an undersized button got a mark that
     nearly filled it. */
  width: calc(var(--ww-size) * 0.5);
  height: calc(var(--ww-size) * 0.5);
  flex: 0 0 auto;
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.ww-widget__close-icon {
  display: none;
  position: relative;
  /* Tracks the mark it replaces, so the button does not change weight when it
     switches between the two. */
  width: calc(var(--ww-size) * 0.5);
  height: calc(var(--ww-size) * 0.5);
  flex: 0 0 auto;
}

.ww-widget__close-icon::before,
.ww-widget__close-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ww-size) * 0.5);
  height: 4px;
  border-radius: 999px;
  /* Named rather than currentColor: the X is a mark, not text, so it tracks the
     logo colour. Inheriting would have tied it to the title colour instead. */
  background: var(--ww-icon-color);
  content: "";
  transform-origin: center;
}

.ww-widget__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ww-widget__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ww-widget[data-open="true"] .ww-widget__icon {
  display: none;
  opacity: 0;
  transform: scale(0.65) rotate(-45deg);
}

.ww-widget[data-open="true"] .ww-widget__close-icon {
  display: block;
}

.ww-widget[data-open="true"] .ww-widget__label {
  display: none !important;
}

.ww-widget__label {
  white-space: nowrap;
}

.ww-widget__popup {
  position: absolute;
  right: 0;
  bottom: calc(var(--ww-size) + 14px);
  width: min(var(--ww-panel-width), calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--ww-popup-border);
  border-radius: 18px;
  background: var(--ww-popup-background);
  color: var(--ww-popup-text);
  opacity: 0;
  box-shadow: 0 18px 44px rgba(8, 19, 13, 0.18);
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  will-change: opacity, transform;
}

.ww-widget[data-auto-opened="true"] .ww-widget__popup {
  transform: translateY(16px) scale(1);
  transition:
    opacity 520ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ww-widget[data-open="true"] .ww-widget__popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ww-widget[data-position="bottom-left"] .ww-widget__popup {
  right: auto;
  left: 0;
}

.ww-widget__popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 18px 18px;
  border-bottom: 0;
  background:
    linear-gradient(135deg, var(--ww-button-color), var(--ww-popup-accent));
  color: var(--ww-title-color);
}

.ww-widget__popup-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.ww-widget__popup-logo img,
.ww-widget__popup-logo svg {
  display: block;
  width: 22px;
  height: 22px;
}

.ww-widget__popup-title,
.ww-widget__popup-subtitle,
.ww-widget__status {
  margin: 0;
  letter-spacing: 0;
}

.ww-widget__popup-title {
  color: var(--ww-title-color);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}

.ww-widget__popup-subtitle {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  line-height: 1.4;
}

.ww-widget__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--ww-title-color);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
  backdrop-filter: blur(6px);
}

.ww-widget__status::before {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
  content: "";
}

.ww-widget__status[data-status="closed"] {
  background: rgba(0, 0, 0, 0.45);
}

.ww-widget__status[data-status="closed"]::before {
  background: #ff5a5f;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.2);
}

.ww-widget__status[hidden] {
  display: none !important;
}

.ww-widget__contacts {
  display: grid;
  gap: 10px;
  padding: 12px;
  /* Flat, not layered. A white radial gradient used to sit on top of this,
     which read as a smudge in the corner once the colour was anything but the
     near-white default and made the chosen colour look wrong. */
  background: var(--ww-popup-hover);
}

.ww-widget__contact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  overflow: hidden;
  padding: 9px 10px 9px 14px;
  border-left: 3px solid var(--ww-popup-accent);
  border-radius: 12px;
  background: var(--ww-popup-background);
  color: var(--ww-popup-text);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(12, 18, 14, 0.06);
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.ww-widget__contact:hover,
.ww-widget__contact:focus-visible {
  /* A flat colour the merchant picks. This used to be a hardcoded green wash
     fading in over an overlay, which ignored their palette and left a gradient
     across a surface they had chosen a colour for. The default is that wash
     resolved against white, so nothing changes until they change it. */
  background: var(--ww-popup-card-hover);
  color: var(--ww-popup-text);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(12, 18, 14, 0.1);
}

.ww-widget__contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  /* The same disc as the floating button, so it follows the button colour
     rather than the panel heading's accent. It carries the WhatsApp mark, so
     the two read as the same object in two places. */
  background: var(--ww-button-color);
}

.ww-widget__contact-action img,
.ww-widget__contact-action svg {
  display: block;
  width: 19px;
  height: 19px;
  filter: none;
}

.ww-widget__contact-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.ww-widget__contact-name {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.ww-widget__contact-meta {
  color: var(--ww-popup-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.ww-widget[hidden] {
  display: none !important;
}

.ww-widget__popup[hidden],
.ww-widget__label[hidden] {
  display: none !important;
}

@media (max-width: 749px) {
  .ww-widget {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .ww-widget[data-position="bottom-left"]:not([data-bar-active="true"]) {
    right: auto;
    left: max(14px, env(safe-area-inset-left));
  }

  .ww-widget__button {
    padding: 0 14px;
  }

  .ww-widget__label {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ww-widget__popup {
    bottom: 68px;
    border-radius: 16px;
  }

  .ww-widget__popup-head {
    gap: 9px;
    padding: 14px;
  }

  .ww-widget__popup-logo {
    width: 36px;
    height: 36px;
  }

  .ww-widget__popup-logo img {
    width: 21px;
    height: 21px;
  }

  .ww-widget__popup-title {
    font-size: 17px;
  }

  .ww-widget__popup-subtitle {
    font-size: 11px;
  }

  .ww-widget__status {
    gap: 6px;
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 9.5px;
  }

  .ww-widget__contacts {
    gap: 8px;
    padding: 10px;
  }

  .ww-widget__contact {
    min-height: 52px;
    padding: 8px 9px 8px 12px;
    border-radius: 11px;
  }

  .ww-widget__contact-name {
    font-size: 13px;
  }

  .ww-widget__contact-meta {
    font-size: 11px;
  }

  .ww-widget__contact-action {
    width: 34px;
    height: 34px;
  }

  .ww-widget__contact-action img {
    width: 17px;
    height: 17px;
  }
}

/* The settings screen previews a phone inside a wide page, where the media
   query above cannot apply. These mirror it for a widget that has been told
   it is on a phone, so the preview is not quietly showing desktop layout. */
.ww-widget[data-force-mobile="true"] {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}

.ww-widget[data-force-mobile="true"][data-position="bottom-left"]:not([data-bar-active="true"]) {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
}

.ww-widget[data-force-mobile="true"] .ww-widget__button {
  padding: 0 14px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__label {
  max-width: calc(var(--ww-preview-stage-width, 100vw) * 0.46);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ww-widget[data-force-mobile="true"] .ww-widget__popup {
  bottom: 68px;
  border-radius: 16px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__popup-head {
  gap: 9px;
  padding: 14px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__popup-logo {
  width: 36px;
  height: 36px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__popup-logo img {
  width: 21px;
  height: 21px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__popup-title {
  font-size: 17px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__popup-subtitle {
  font-size: 11px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__status {
  gap: 6px;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 9.5px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contacts {
  gap: 8px;
  padding: 10px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contact {
  min-height: 52px;
  padding: 8px 9px 8px 12px;
  border-radius: 11px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contact-name {
  font-size: 13px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contact-meta {
  font-size: 11px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contact-action {
  width: 34px;
  height: 34px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contact-action img {
  width: 17px;
  height: 17px;
}

/* ---------------------------------------------------------------------------
 * Ask-a-question bar
 *
 * Placeholder styling: built from the existing widget tokens so it reads as
 * one system, but the visual treatment has not been through a design pass yet.
 * ------------------------------------------------------------------------ */

.ww-widget__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Theme-proofing. Until this release the widget had no form controls, so it
 * never collided with theme CSS. It does now, and a theme's
 * `input[type="text"]` (0,1,1) outranks a plain `.ww-widget__bar-input`
 * (0,1,0) — so without this the field inherits the theme's border, height,
 * background and radius and stops looking like part of the widget. Themes
 * style bare `button` just as hard. The widget is a self-contained overlay
 * that must look identical everywhere, so these resets are deliberate. */
.ww-widget .ww-widget__bar-form,
.ww-widget .ww-widget__bar-input,
.ww-widget .ww-widget__bar-send,
.ww-widget .ww-widget__chip,
.ww-widget .ww-widget__qr-toggle,
.ww-widget .ww-widget__qr-hide,
.ww-widget .ww-widget__contact--choice,
.ww-widget .ww-widget__bar-close {
  box-sizing: border-box !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  float: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* The form is the visible field, so its box model is protected too. */
.ww-widget form.ww-widget__bar-form {
  padding: 6px 6px 6px 18px !important;
  border: 1px solid var(--ww-hairline) !important;
  border-radius: calc(var(--ww-size) / 2) !important;
  background: var(--ww-bar-surface) !important;
}

.ww-widget form.ww-widget__bar-form:hover,
.ww-widget form.ww-widget__bar-form:focus-within {
  border-color: var(--ww-hairline-strong) !important;
}

.ww-widget input.ww-widget__bar-input {
  width: auto !important;
  min-width: 0 !important;
  height: calc(var(--ww-size) - 14px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ww-bar-ink) !important;
  font: inherit !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

.ww-widget .ww-widget__bar-send-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.ww-widget button.ww-widget__bar-send {
  width: calc(var(--ww-size) - 14px) !important;
  height: calc(var(--ww-size) - 14px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ww-bar-send-color) !important;
  box-shadow: none !important;
}

.ww-widget button.ww-widget__chip {
  height: auto !important;
  padding: 7px 12px !important;
  border: 1px solid var(--ww-hairline) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ww-placeholder) !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.ww-widget button.ww-widget__chip:hover {
  background: var(--ww-bar-hover) !important;
  border-color: var(--ww-hairline-strong) !important;
  color: var(--ww-bar-ink) !important;
}

.ww-widget button.ww-widget__bar-close {
  width: var(--ww-size) !important;
  height: var(--ww-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ww-bar-send-color) !important;
}

/* Author `display` beats the user-agent rule behind the `hidden` attribute, so
   anything the script hides has to say so explicitly. Without this the bar
   stayed on screen next to the round button. */
.ww-widget__bar[hidden] {
  display: none;
}

.ww-widget__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* The 12px that used to be `gap` on the column above. It lives on the close
   button instead because the script animates it: a flex gap belongs to the
   container and cannot be interpolated per child, so when the button appeared
   the column grew by the button *and* the gap in a single frame, moving
   everything above it 68px while the card underneath was still easing. Only
   ever one card is visible, so this is the only gap the column had.

   !important because the theme-proofing block above resets `margin: 0
   !important` on this very button to survive host themes, and a normal
   declaration loses to it no matter where it sits in the file. Without this
   the offset computed to 0 and the gap went back to landing in one frame. */
.ww-widget .ww-widget__bar-close {
  margin-top: 12px !important;
}

.ww-widget__bar-panel,
.ww-widget__qr {
  width: 100%;
}

/* Close button under the open bar. Same affordance the contact picker uses:
 * the panel rises and a round X takes the spot at the bottom. */
.ww-widget__bar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ww-size);
  height: var(--ww-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ww-bar-send-color);
  color: var(--ww-icon-color);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.ww-widget__bar-close[hidden] {
  display: none;
}

.ww-widget__bar-close:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.ww-widget__bar-close:focus-visible {
  outline: 3px solid var(--ww-bar-outline);
  outline-offset: 3px;
}

.ww-widget__bar-close .ww-widget__close-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.ww-widget__bar-close .ww-widget__close-icon::before,
.ww-widget__bar-close .ww-widget__close-icon::after {
  width: 20px;
  height: 3px;
}

/* The glowing border.
 *
 * A short streak of light travels the field's own border path. It is animated
 * with `offset-distance`, not by rotating a conic gradient, and that is the
 * whole point: a conic sweep advances at a constant *angular* rate from the
 * centre, which on a 480x56 pill makes the spot crawl along the long edges and
 * whip around the ends — measured at roughly 67x between slowest and fastest.
 * `offset-path` advances along the perimeter itself, so the speed is constant
 * the whole way round regardless of how wide the bar gets.
 *
 * Browsers without CSS motion paths fall back to the conic version below,
 * which animates everywhere but with that uneven speed. */
.ww-widget__bar-field {
  position: relative;
  width: 100%;
}

.ww-widget__bar-glow {
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--ww-size) / 2 + 1px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
}

.ww-widget__bar-glow-dot {
  display: none;
}

.ww-widget__bar-glow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  aspect-ratio: 1 / 1;
  background: conic-gradient(
    transparent 0deg,
    transparent 282deg,
    var(--ww-glow-color) 336deg,
    var(--ww-glow-color) 360deg
  );
  filter: blur(0.8px);
  content: "";
  animation: ww-glow-spin 6.8s linear infinite;
}

@keyframes ww-glow-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@supports (offset-path: border-box) and (offset-distance: 50%) {
  /* Sit on the border line itself rather than behind the field, so no
     masking is needed and the streak stays a true hairline. */
  .ww-widget__bar-glow {
    inset: 0;
    border-radius: calc(var(--ww-size) / 2);
    overflow: visible;
    z-index: 2;
  }

  /* The trail is six short segments, not one long one.
   *
   * Each segment is a straight element held tangent to the path, so at the
   * rounded caps (radius = half the field height) it can only approximate the
   * curve, and how far it strays goes as length squared: L^2/8r when centred
   * on the travelling point. 18px stays within ~1.4px, which is invisible.
   * A single element five times longer would stray ~36px and fly off the
   * corners — worse than the version this replaced. Chaining short segments
   * with staggered negative delays buys the length without the overshoot,
   * because each piece follows the curve on its own.
   *
   * Segment COUNT is a separate constraint from segment length. Each piece is
   * rotated to the tangent at its own point, so the trail turns in steps, and
   * too few pieces reads as a polygon rather than a curve. Across a cap the
   * turn per step is spacing/radius: six segments gave 33 degrees and looked
   * visibly faceted, twenty gives 10 and reads as a curve. They are also short
   * enough (8px) that overlap does not stack opacity into bright blobs.
   *
   * There are two trails of twenty. The second carries an extra half-duration
   * of delay, which puts it exactly half a lap from the first, so the pair sit
   * opposite each other the whole way round.
   *
   * Delays are negative so the animation starts already part-way through:
   * more negative means further along the path, so the first segment leads
   * and the rest trail behind it, fading out. Spacing is a share of the lap
   * rather than a pixel gap, so the trail keeps its proportions at any width. */
  .ww-widget__bar-glow::before {
    display: none;
  }

  .ww-widget__bar-glow-dot {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 1px;
    border-radius: 1px;
    background: var(--ww-glow-color);
    filter: blur(0.5px);
    offset-path: border-box;
    offset-rotate: auto;
    offset-anchor: 50% 50%;
    animation: ww-glow-travel 6.8s linear infinite;
  }

  .ww-widget__bar-glow-dot:nth-child(1) {
    opacity: 1.0;
    animation-delay: -0.6176s;
  }

  .ww-widget__bar-glow-dot:nth-child(2) {
    opacity: 0.951;
    animation-delay: -0.5851s;
  }

  .ww-widget__bar-glow-dot:nth-child(3) {
    opacity: 0.901;
    animation-delay: -0.5526s;
  }

  .ww-widget__bar-glow-dot:nth-child(4) {
    opacity: 0.852;
    animation-delay: -0.5201s;
  }

  .ww-widget__bar-glow-dot:nth-child(5) {
    opacity: 0.802;
    animation-delay: -0.4876s;
  }

  .ww-widget__bar-glow-dot:nth-child(6) {
    opacity: 0.753;
    animation-delay: -0.4551s;
  }

  .ww-widget__bar-glow-dot:nth-child(7) {
    opacity: 0.703;
    animation-delay: -0.4226s;
  }

  .ww-widget__bar-glow-dot:nth-child(8) {
    opacity: 0.654;
    animation-delay: -0.3900s;
  }

  .ww-widget__bar-glow-dot:nth-child(9) {
    opacity: 0.604;
    animation-delay: -0.3575s;
  }

  .ww-widget__bar-glow-dot:nth-child(10) {
    opacity: 0.555;
    animation-delay: -0.3250s;
  }

  .ww-widget__bar-glow-dot:nth-child(11) {
    opacity: 0.505;
    animation-delay: -0.2925s;
  }

  .ww-widget__bar-glow-dot:nth-child(12) {
    opacity: 0.456;
    animation-delay: -0.2600s;
  }

  .ww-widget__bar-glow-dot:nth-child(13) {
    opacity: 0.406;
    animation-delay: -0.2275s;
  }

  .ww-widget__bar-glow-dot:nth-child(14) {
    opacity: 0.357;
    animation-delay: -0.1950s;
  }

  .ww-widget__bar-glow-dot:nth-child(15) {
    opacity: 0.307;
    animation-delay: -0.1625s;
  }

  .ww-widget__bar-glow-dot:nth-child(16) {
    opacity: 0.258;
    animation-delay: -0.1300s;
  }

  .ww-widget__bar-glow-dot:nth-child(17) {
    opacity: 0.208;
    animation-delay: -0.0975s;
  }

  .ww-widget__bar-glow-dot:nth-child(18) {
    opacity: 0.159;
    animation-delay: -0.0650s;
  }

  .ww-widget__bar-glow-dot:nth-child(19) {
    opacity: 0.109;
    animation-delay: -0.0325s;
  }

  .ww-widget__bar-glow-dot:nth-child(20) {
    opacity: 0.06;
    animation-delay: -0.0000s;
  }

  .ww-widget__bar-glow-dot:nth-child(21) {
    opacity: 1.0;
    animation-delay: -4.0176s;
  }

  .ww-widget__bar-glow-dot:nth-child(22) {
    opacity: 0.951;
    animation-delay: -3.9851s;
  }

  .ww-widget__bar-glow-dot:nth-child(23) {
    opacity: 0.901;
    animation-delay: -3.9526s;
  }

  .ww-widget__bar-glow-dot:nth-child(24) {
    opacity: 0.852;
    animation-delay: -3.9201s;
  }

  .ww-widget__bar-glow-dot:nth-child(25) {
    opacity: 0.802;
    animation-delay: -3.8876s;
  }

  .ww-widget__bar-glow-dot:nth-child(26) {
    opacity: 0.753;
    animation-delay: -3.8551s;
  }

  .ww-widget__bar-glow-dot:nth-child(27) {
    opacity: 0.703;
    animation-delay: -3.8226s;
  }

  .ww-widget__bar-glow-dot:nth-child(28) {
    opacity: 0.654;
    animation-delay: -3.7900s;
  }

  .ww-widget__bar-glow-dot:nth-child(29) {
    opacity: 0.604;
    animation-delay: -3.7575s;
  }

  .ww-widget__bar-glow-dot:nth-child(30) {
    opacity: 0.555;
    animation-delay: -3.7250s;
  }

  .ww-widget__bar-glow-dot:nth-child(31) {
    opacity: 0.505;
    animation-delay: -3.6925s;
  }

  .ww-widget__bar-glow-dot:nth-child(32) {
    opacity: 0.456;
    animation-delay: -3.6600s;
  }

  .ww-widget__bar-glow-dot:nth-child(33) {
    opacity: 0.406;
    animation-delay: -3.6275s;
  }

  .ww-widget__bar-glow-dot:nth-child(34) {
    opacity: 0.357;
    animation-delay: -3.5950s;
  }

  .ww-widget__bar-glow-dot:nth-child(35) {
    opacity: 0.307;
    animation-delay: -3.5625s;
  }

  .ww-widget__bar-glow-dot:nth-child(36) {
    opacity: 0.258;
    animation-delay: -3.5300s;
  }

  .ww-widget__bar-glow-dot:nth-child(37) {
    opacity: 0.208;
    animation-delay: -3.4975s;
  }

  .ww-widget__bar-glow-dot:nth-child(38) {
    opacity: 0.159;
    animation-delay: -3.4650s;
  }

  .ww-widget__bar-glow-dot:nth-child(39) {
    opacity: 0.109;
    animation-delay: -3.4325s;
  }

  .ww-widget__bar-glow-dot:nth-child(40) {
    opacity: 0.06;
    animation-delay: -3.4000s;
  }

  @keyframes ww-glow-travel {
    from {
      offset-distance: 0%;
    }

    to {
      offset-distance: 100%;
    }
  }
}

/* Switched off entirely by the merchant. */
.ww-widget[data-bar-animation="false"] .ww-widget__bar-glow {
  display: none;
}

/* The loop runs only at rest. Once the visitor hovers or starts typing it has
 * done its job, and a light circling the field you are reading is a
 * distraction. */
.ww-widget__bar-field:hover .ww-widget__bar-glow,
.ww-widget__bar-field:focus-within .ww-widget__bar-glow {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* The button sets an author `display`, which beats the user-agent rule behind
 * the `hidden` attribute. Without this the round button stays on screen above
 * the bar. */
.ww-widget__button[hidden] {
  display: none;
}

.ww-widget__qr {
  padding: 18px 16px 30px;
  border: 1px solid var(--ww-hairline);
  border-radius: 18px;
  background: var(--ww-bar-surface);
  color: var(--ww-bar-ink);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* Collapsed, the panel is nothing but the field. Only once the visitor
 * engages does it grow the card around it. */
.ww-widget__bar-panel {
  color: var(--ww-bar-ink);
  /* The radius lives here, not only on the expanded rule, so nothing can ever
     paint a hard-cornered card around the rounded pill. Costs nothing while
     collapsed, because there is no background or border to round. */
  border-radius: 18px;
  /* Declared on the base rule on purpose, so it runs in both directions: the
     card fades its paint out as it closes, not only in as it opens.
     This is only safe because animateBarBox() in the widget script animates
     the card's height over the same duration. Paint and box have to move
     together — when the height snapped and only the paint faded, the result
     was a white, shadowed card left sitting around a collapsed bar for the
     length of the fade. If you change this duration, change BAR_MOTION_MS
     with it; a test asserts the two agree.

     Only paint is transitioned here. Padding is animated by the script, in
     the same run as the height: it is the difference between the rect and the
     content box, so the two have to be interpolated together or the card
     overshoots by exactly the padding and snaps back at the end.

     The border is declared at a constant width on both states so only its
     colour changes. Width and style are not interpolable from `none`/`0`, so
     a border that appeared with the expanded rule drew itself at full
     strength in frame one, around a card whose fill had not begun to fade
     in — and vanished instantly on the way out, leaving an outline-less blob
     fading. It also kept the box a size the animation had not measured. */
  border: 1px solid transparent;
  transition: background 280ms cubic-bezier(0.5, 1, 0.89, 1),
    box-shadow 280ms cubic-bezier(0.5, 1, 0.89, 1),
    border-color 280ms cubic-bezier(0.5, 1, 0.89, 1);
}

.ww-widget[data-bar-expanded="true"] .ww-widget__bar-panel {
  padding: 14px;
  border-color: var(--ww-hairline);
  border-radius: 18px;
  background: var(--ww-bar-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* Suggestions sit under the field, not above it. The field is the thing the
   eye should land on first; chips are a fallback for visitors who would
   rather not type, so they are deliberately quieter than the input. */
.ww-widget__bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.ww-widget__chip {
  padding: 7px 12px;
  border: 1px solid var(--ww-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--ww-placeholder);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ww-widget__chip:hover {
  background: var(--ww-bar-hover);
  border-color: var(--ww-bar-outline);
}

.ww-widget__chip:focus-visible {
  outline: 2px solid var(--ww-bar-outline);
  outline-offset: 2px;
}

/* The form is the field: it carries the border, background and shadow, and
 * the <input> inside it is transparent and borderless. That way the send
 * button sits inside the same rounded box instead of beside it. */
.ww-widget__bar-form {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--ww-hairline);
  border-radius: calc(var(--ww-size) / 2);
  background: var(--ww-bar-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ww-widget__bar-form:hover {
  border-color: var(--ww-bar-outline);
}

/* Inside the expanded card the field no longer needs to float on its own. */
.ww-widget[data-bar-expanded="true"] .ww-widget__bar-form {
  box-shadow: none;
}

/* Focus is a 1px tint on the border and nothing more, matching the resting
 * hairline. A pointer user gets no ring; a keyboard user still needs a real
 * focus indicator, so :focus-visible adds one below. */
.ww-widget__bar-form:focus-within {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.ww-widget[data-bar-expanded="true"] .ww-widget__bar-form:focus-within {
  box-shadow: none;
}

/* No focus ring at all. :focus-visible is not the keyboard-only switch it is
 * for buttons: a field that accepts typing matches it however it was focused,
 * so a ring here fired on every mouse click and put back the thick outline
 * this was meant to remove. The focus indicator is the border tint plus the
 * caret, which is what a text field normally relies on. */

.ww-widget__bar-input {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--ww-size) - 14px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ww-bar-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.2;
}

.ww-widget__bar-input::placeholder {
  color: var(--ww-placeholder);
  opacity: 1;
}

/* The focus ring lives on the form, so a second one on the input would
 * double up. */
.ww-widget__bar-input:focus,
.ww-widget__bar-input:focus-visible {
  outline: none;
}

.ww-widget__bar-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ww-size) - 14px);
  height: calc(var(--ww-size) - 14px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ww-bar-send-color);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ww-widget__bar-send:hover {
  transform: scale(1.05);
}

.ww-widget__bar-send:focus-visible {
  outline: 3px solid var(--ww-bar-outline);
  outline-offset: 2px;
}

/* WhatsApp mark at rest, send arrow once the visitor is typing. Both icons
   ship in the markup and only the visible one changes, so there is no image
   swap to wait for mid-interaction. */
.ww-widget__bar-send-icon {
  display: block;
  width: 22px;
  height: 22px;
  max-width: none;
}

.ww-widget__bar-send-icon--send,
.ww-widget[data-bar-expanded="true"] .ww-widget__bar-send-icon--rest {
  display: none;
}

.ww-widget[data-bar-expanded="true"] .ww-widget__bar-send-icon--send {
  display: block;
}

.ww-widget__bar-foot {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 0 6px;
  text-align: center;
}

.ww-widget__bar-note,
.ww-widget__bar-count {
  color: var(--ww-placeholder);
  font-size: 10.5px;
  line-height: 1.4;
}

.ww-widget__bar-count[data-state="full"] {
  color: #b3261e;
}

.ww-widget__bar-count[hidden],
.ww-widget__bar-chips[hidden],
.ww-widget__bar-foot[hidden],
.ww-widget__qr-contacts[hidden],
.ww-widget__qr-web[hidden],
.ww-widget__bar-panel[hidden],
.ww-widget__qr[hidden] {
  display: none;
}

.ww-widget__qr-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ww-bar-ink);
}

.ww-widget__qr-subtitle {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ww-placeholder);
}

/* 340px is not arbitrary. A 200-character question in pt-BR or es encodes to
 * a version-14 code (73x73 modules) at error-correction M, and 340px puts that
 * at ~4.4px per module, above the ~4px where phone cameras start to struggle.
 * Shrinking this box, raising MAX_QUESTION_CHARS, or raising the error
 * correction further all cost module size and quietly hurt scanning. */
.ww-widget__qr-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The centre logo is positioned against .ww-widget__qr-code, so the two boxes
     have to line up. Left as content-box this element measured 340px + 20px of
     padding while its wrapper measured 340px, which put the code's centre 10px
     to the right of the badge and left the mark visibly off-centre. */
  box-sizing: border-box;
  width: min(340px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
  color: #000000;
}

.ww-widget__qr-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ww-widget__qr-canvas[data-state="loading"]::after {
  content: "…";
  font-size: 24px;
  color: var(--ww-bar-ink-muted);
}

.ww-widget__qr-canvas[data-state="error"] {
  padding: 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ww-bar-ink-muted);
  background: var(--ww-bar-surface-alt);
}

/* The badge is a white patch punched out of the middle of the code with the
   green WhatsApp mark on it. Kept to 20% of the code's width: that wipes 4% of
   the area, which error-correction M (~15% recovery) absorbs with margin. */
.ww-widget__qr-code {
  position: relative;
  width: min(340px, 100%);
  margin: 0 auto 12px;
}

.ww-widget__qr-code .ww-widget__qr-canvas {
  width: 100%;
  margin: 0;
}

.ww-widget__qr-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: #ffffff;
  pointer-events: none;
}

.ww-widget__qr-badge[hidden] {
  display: none;
}

.ww-widget .ww-widget__qr-badge img {
  display: block;
  width: 62% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Desktop action as a button. Kept as an <a> on purpose: it navigates to
   WhatsApp Web, and a real link is what screen readers and middle-click
   expect. Only the styling is a button. */
.ww-widget a.ww-widget__qr-web {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 16px;
  /* Its own colour: it is the one button a visitor presses when WhatsApp is
     already open on their computer, so a merchant may want it to stand apart
     from the bar's own controls. */
  border: 1px solid var(--ww-qr-web-button);
  border-radius: 999px;
  background: var(--ww-qr-web-button);
  color: var(--ww-qr-button-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* The link sets an author `display`, which beats the user-agent rule behind
   the `hidden` attribute, so hiding it needs saying explicitly. Same trap as
   the round button. */
.ww-widget a.ww-widget__qr-web[hidden] {
  display: none;
}

.ww-widget a.ww-widget__qr-web:hover {
  filter: brightness(0.96);
}

.ww-widget .ww-widget__qr-web img,
.ww-widget .ww-widget__qr-web .ww-widget__qr-web-icon {
  display: block;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

.ww-widget a.ww-widget__qr-web:focus-visible {
  outline: 2px solid var(--ww-bar-outline);
  outline-offset: 2px;
}

/* Two ways on: opening WhatsApp, or a code for a phone. The first is the
   common path on a computer, so it leads and the code is one click away. */
.ww-widget__qr-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ww-widget__qr-actions[hidden],
.ww-widget__qr-reveal[hidden] {
  display: none;
}

.ww-widget__qr-or {
  color: var(--ww-placeholder);
  font-size: 11px;
  line-height: 1;
}

.ww-widget .ww-widget__qr-hide {
  margin-top: 14px !important;
}

.ww-widget .ww-widget__qr-toggle,
.ww-widget .ww-widget__qr-hide {
  padding: 8px 16px !important;
  border: 1px solid var(--ww-hairline) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ww-placeholder) !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ww-widget .ww-widget__qr-toggle:hover,
.ww-widget .ww-widget__qr-hide:hover {
  border-color: var(--ww-hairline-strong) !important;
  color: var(--ww-bar-ink) !important;
}

.ww-widget .ww-widget__qr-toggle:focus-visible,
.ww-widget .ww-widget__qr-hide:focus-visible {
  outline: 2px solid var(--ww-bar-outline);
  outline-offset: 2px;
}

.ww-widget__qr-scan {
  margin: 0 0 12px;
  color: var(--ww-placeholder);
  font-size: 12px;
  line-height: 1.45;
}

.ww-widget__qr-contacts {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  text-align: left;
}

/* These rows are <button>, and the user-agent stylesheet centres button text.
   The boxes line up perfectly, but each label centres inside its own line, so
   names of different lengths look ragged. Force the text left. */
/* Gray at rest, green on hover. These rows carry a selection meaning, unlike
   the field and the card, so the green line is reserved for the one being
   pointed at rather than sitting on all three at once. */
.ww-widget__contact--choice {
  width: 100%;
  border: 1px solid var(--ww-popup-border);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ww-widget__contact--choice:hover,
.ww-widget__contact--choice:focus-visible {
  border-color: var(--ww-hairline-strong);
  background: var(--ww-bar-hover);
}

/* Phones. The bar is a real option here, so the parts that were sized for a
   mouse get sized for a thumb: chips and the send button clear the ~44px
   minimum tap target, and the panel gains room below for the home indicator.
   The input stays at 17px because anything under 16px makes iOS Safari zoom
   the page the moment the field is focused. */
@media (max-width: 749px) {
  .ww-widget[data-button-mode="input_bar"][data-mobile-button-mode="input_bar"] {
    width: calc(100vw - var(--ww-side) * 2);
  }

  /* Phones showing a round button instead: undo the centring entirely and give
     the corner back. Without this the widget stayed a centred full-width box
     and the button sat at its left edge whatever corner was chosen. */
  .ww-widget[data-button-mode="input_bar"]:not([data-mobile-button-mode="input_bar"]) {
    left: auto;
    right: var(--ww-side);
    width: auto;
    transform: none;
  }

  .ww-widget[data-button-mode="input_bar"]:not([data-mobile-button-mode="input_bar"])[data-position="bottom-left"] {
    right: auto;
    left: var(--ww-side);
  }

  .ww-widget[data-bar-active="true"] {
    bottom: calc(var(--ww-bottom) + env(safe-area-inset-bottom, 0px) + var(--ww-keyboard-lift, 0px));
  }

  .ww-widget__bar {
    gap: 10px;
  }

  .ww-widget[data-bar-expanded="true"] .ww-widget__bar-panel {
    padding: 12px;
  }

  .ww-widget button.ww-widget__chip {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .ww-widget__bar-chips {
    gap: 8px;
    margin-top: 10px;
  }

  .ww-widget__contact--choice {
    min-height: 60px;
  }

  .ww-widget a.ww-widget__qr-web,
  .ww-widget .ww-widget__qr-toggle,
  .ww-widget .ww-widget__qr-hide {
    min-height: 44px !important;
  }

  /* The bar already sits at the bottom of a small screen, so the extra close
     button underneath costs a row of thumb space for nothing: tapping outside
     or pressing done closes it just as well. */
  .ww-widget__bar-close {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ww-widget__button,
  .ww-widget__icon,
  .ww-widget__popup,
  .ww-widget__bar-panel,
  .ww-widget__bar-form,
  .ww-widget__bar-send,
  .ww-widget__bar-close,
  .ww-widget__chip {
    transition: none;
  }

  .ww-widget__bar-glow::before,
  .ww-widget__bar-glow-dot {
    animation: none;
  }
}

/* Theme-proofing for the round button.
   The ask-a-question bar got this treatment; the round button never did, and
   it is an <a>, so any host that styles links wins over it. In the WordPress
   admin `a:focus` recolours it and draws its own ring, and because the close
   X is two pseudo-elements filled with `currentColor`, the whole icon turned
   the host's link colour the moment the button was clicked.

   Deliberately no padding here: three separate rules set it (pill, icon-only,
   phone), and forcing one value would flatten all of them. Only the properties
   a host actually reaches for are pinned. */
.ww-widget a.ww-widget__button,
.ww-widget a.ww-widget__button:link,
.ww-widget a.ww-widget__button:visited,
.ww-widget a.ww-widget__button:hover,
.ww-widget a.ww-widget__button:focus,
.ww-widget a.ww-widget__button:focus-visible,
.ww-widget a.ww-widget__button:active {
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ww-button-color) !important;
  color: var(--ww-button-text) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Shadows stay per-state, so they are pinned separately rather than in the
   blanket rule above. The host's focus ring is a box-shadow, which would
   otherwise replace the widget's own lift. */
.ww-widget a.ww-widget__button,
.ww-widget a.ww-widget__button:focus,
.ww-widget a.ww-widget__button:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.ww-widget a.ww-widget__button:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}

/* The widget's own focus ring, restated so it outranks the pinned rules above
   and the host's outline alike. */
.ww-widget a.ww-widget__button:focus-visible {
  outline: 2px solid rgba(37, 211, 102, 0.2) !important;
  outline-offset: 2px !important;
}

.ww-widget[data-open="true"] a.ww-widget__button:focus-visible {
  outline: none !important;
}

/* The close X is drawn from currentColor, so it follows any colour the host
   manages to set on the link. Pin it to the icon colour outright. */
.ww-widget a.ww-widget__button .ww-widget__close-icon::before,
.ww-widget a.ww-widget__button .ww-widget__close-icon::after {
  background: var(--ww-icon-color) !important;
}

/* The WhatsApp mark is inline SVG filled with currentColor, so it follows the
   same colour as the label and needs the same protection from the host. */
.ww-widget a.ww-widget__button .ww-widget__icon {
  color: var(--ww-icon-color) !important;
  fill: currentColor !important;
}

/* The heading's mark sits inside .ww-widget__popup-head, which carries the
   title colour, so it names its own or it would follow the heading text. */
.ww-widget__popup-logo svg {
  color: var(--ww-icon-color);
  fill: currentColor;
}

/* Same for the mark cloned into each contact row. */
.ww-widget__contact-action svg {
  color: var(--ww-icon-color);
  fill: currentColor;
}

/* Preview mirror for the second phone block.
   The first block has had a mirror for a long time; this one never did, so the
   admin's Mobile preview showed desktop-sized chips and QR buttons, and showed
   a close button that a real phone hides. tests/css-mobile-mirror.js scanned
   only the first block, so it reported all of this as covered. */

.ww-widget[data-force-mobile="true"][data-button-mode="input_bar"][data-mobile-button-mode="input_bar"] {
  width: calc(var(--ww-preview-stage-width, 100vw) - var(--ww-side) * 2);
}

.ww-widget[data-force-mobile="true"][data-button-mode="input_bar"]:not([data-mobile-button-mode="input_bar"]) {
  left: auto;
  right: var(--ww-side);
  width: auto;
  transform: none;
}

.ww-widget[data-force-mobile="true"][data-button-mode="input_bar"]:not([data-mobile-button-mode="input_bar"])[data-position="bottom-left"] {
  right: auto;
  left: var(--ww-side);
}

.ww-widget[data-force-mobile="true"][data-bar-active="true"] {
  bottom: calc(var(--ww-bottom) + env(safe-area-inset-bottom, 0px) + var(--ww-keyboard-lift, 0px));
}

.ww-widget[data-force-mobile="true"] .ww-widget__bar {
  gap: 10px;
}

.ww-widget[data-force-mobile="true"][data-bar-expanded="true"] .ww-widget__bar-panel {
  padding: 12px;
}

.ww-widget[data-force-mobile="true"] button.ww-widget__chip {
  min-height: 40px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

.ww-widget[data-force-mobile="true"] .ww-widget__bar-chips {
  gap: 8px;
  margin-top: 10px;
}

.ww-widget[data-force-mobile="true"] .ww-widget__contact--choice {
  min-height: 60px;
}

.ww-widget[data-force-mobile="true"] a.ww-widget__qr-web,
.ww-widget[data-force-mobile="true"] .ww-widget__qr-toggle,
.ww-widget[data-force-mobile="true"] .ww-widget__qr-hide {
  min-height: 44px !important;
}

.ww-widget[data-force-mobile="true"] .ww-widget__bar-close {
  display: none;
}


/* The bar's send mark and the QR link's mark are inline SVG now, so the
   WhatsApp logo colour finally reaches them. Before this the disc took the
   merchant's colour while the mark inside it stayed white, because it was an
   <img> and no stylesheet can reach inside one. */
/* Both icons share this class, but they are drawn differently: the WhatsApp
   mark is filled paths, the arrow is a stroked line with a chevron head. A
   blanket `fill: currentColor` overrode the arrow's own fill="none" attribute
   (CSS beats presentation attributes) and filled it into a solid wedge. */
.ww-widget .ww-widget__bar-send-icon--rest {
  color: var(--ww-icon-color);
  fill: currentColor;
}

.ww-widget .ww-widget__bar-send-icon--send {
  color: var(--ww-icon-color);
  fill: none;
  stroke: currentColor;
}

/* The WhatsApp mark follows the logo colour here as it does everywhere else.
   Tying it to this button's text colour meant the logo colour silently stopped
   applying on the send screen. */
.ww-widget .ww-widget__qr-web-icon {
  color: var(--ww-icon-color);
  fill: currentColor;
}