/* ============================================================
   NDLS Amazon Connect launcher - CONSENT GATE styling.

   Loaded by index.php when $ndls_consent_gate is TRUE, in place of
   css/webchat-launcher-legacy.css. With the gate on, Connect renders
   no launcher of its own (alwaysHideWidgetButton) - the visible
   "Need help?" bubble is the shadow-DOM one built by the snippet in
   index.php. These rules style Connect's own minimise/close button,
   which still mounts for the duration of a live chat session, so that
   it matches that bubble.

   Swap partner: css/webchat-launcher-legacy.css
   Do not edit one of the pair without checking the other.
   ============================================================ */

/* Amazon Connect launcher - "Need help?" speech bubble.
   The widget is Preact + JSS: on every interaction it attaches a fresh
   stylesheet, regenerates its class names, and re-renders the button's
   children. Three rules follow from that:
     1. Never key styling off a class we add in JS - the renderer reassigns
        className on every interaction, so any marker class is wiped and
        anything depending on it flickers back to Amazon's look.
     2. Never inherit layout from Amazon's classes - restate display and
        alignment here, so the button still looks right if its generated
        class names ever stop matching.
     3. Paint the label with ::before. Pseudo-element content isn't in the
        DOM, so the renderer cannot reclaim it - which is what used to let
        "Open Chat" / "Start Chat" reappear.
   Amazon sets no inline styles on this button, so id specificity is enough;
   background is the only property it marks !important.

   Both states are styled at every width, so the launcher is always the
   "Need help?" bubble and never a round icon. The single exception is
   Amazon's real-mobile treatment (it adds a literal `mobile` class on touch
   devices), where the minimise control is a full-width bar across the top of
   the fullscreen chat rather than a floating icon - overriding that would
   float a bubble over the chat panel. `mobile` is Amazon's own class,
   reapplied on every render, so it is safe to key on; only classes *we* add
   get wiped. */
button#amazon-connect-open-widget-button,
button#amazon-connect-close-widget-button:not(.mobile) {
  display: flex;
  border: none;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  margin-top: 8px;
  flex-direction: row-reverse;
  padding: 1rem;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

button#amazon-connect-open-widget-button::before,
button#amazon-connect-close-widget-button:not(.mobile)::before {
  content: 'Need help?';
  color: #ffffff;
  white-space: nowrap;
}

/* Amazon owns this span, so we never write to it - we keep it
   screen-reader-only instead. Stated here rather than relying on Amazon's own
   sr-only rule, which is tied to a generated class name. The accessible name
   comes from aria-label, kept in sync by the consent-gate snippet in
   index.php. */
button#amazon-connect-open-widget-button > span,
button#amazon-connect-close-widget-button > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button#amazon-connect-open-widget-button > svg {
  display: none !important;
}

/* The minimise chevron stays visible, sized to sit beside the label. */
button#amazon-connect-close-widget-button:not(.mobile) > svg {
  width: auto;
  height: 12px;
  padding-top: 2px;
}