/* MaStore Live Chat — high specificity + !important to beat theme */
#mastore-live-chat.mlc,
#mastore-live-chat {
  --mlc-bg: #0a0a0a;
  --mlc-panel: #ffffff;
  --mlc-muted: #6b7280;
  --mlc-border: #e5e7eb;
  --mlc-accent: #000000;
  --mlc-online: #22c55e;
  --mlc-offline: #9ca3af;
  --mlc-radius: 16px;
  --mlc-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  font-family: inherit !important;
  /* closed: BELOW mobile tabbar (100). open: raised via .is-chat-open */
  z-index: 90 !important;
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /*
   * CRITICAL: root must NOT capture clicks when chat is closed.
   * Only FAB (and when open: panel + scrim) receive pointer events.
   * Otherwise invisible scrim/panel leftovers block the whole site
   * (reproduced on /client_account/ after close).
   */
  pointer-events: none !important;
}

/* FAB always tappable when chat closed */
#mastore-live-chat .mlc-fab {
  pointer-events: auto !important;
}

/* When open — only interactive layers receive hits */
#mastore-live-chat.is-chat-open .mlc-panel.is-open,
#mastore-live-chat.is-chat-open .mlc-panel.is-open * {
  pointer-events: auto !important;
}
#mastore-live-chat.is-chat-open .mlc-scrim.is-on {
  pointer-events: auto !important;
}

#mastore-live-chat *,
#mastore-live-chat *::before,
#mastore-live-chat *::after {
  box-sizing: border-box !important;
}

#mastore-live-chat .mlc-fab {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  top: auto !important;
  z-index: 110 !important; /* above tabbar 100, below open chat layers */
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #000000 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  animation: none !important; /* v13: pulse killed — mobile GPU thrash */
}

#mastore-live-chat .mlc-fab:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  animation: none !important;
}

#mastore-live-chat .mlc-fab:focus-visible {
  outline: 3px solid #22c55e !important;
  outline-offset: 3px !important;
}

#mastore-live-chat .mlc-fab svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  stroke: #fff !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

#mastore-live-chat .mlc-fab__dot {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  border: 2px solid #fff !important;
  display: block !important;
}

#mastore-live-chat .mlc-fab__dot.is-online {
  background: #22c55e !important;
}

#mastore-live-chat .mlc-fab__badge {
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  display: none !important;
}

#mastore-live-chat .mlc-fab__badge.is-on {
  display: block !important;
}

#mastore-live-chat .mlc-panel {
  position: fixed !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: 92px !important;
  left: auto !important;
  z-index: 2147483647 !important;
  width: min(380px, calc(100vw - 24px)) !important;
  height: min(560px, calc(100vh - 120px)) !important;
  max-height: calc(100vh - 100px) !important;
  background: #fff !important;
  color: #111 !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* motion (open/close) defined below in Motion tokens section */
  border: 1px solid #e5e7eb !important;
  pointer-events: none;
}

/* [hidden] must win over display:flex !important or closed panel can steal taps */
#mastore-live-chat .mlc-panel[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#mastore-live-chat .mlc-panel:not(.is-open) {
  pointer-events: none !important;
}

#mastore-live-chat .mlc-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px 14px 16px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

#mastore-live-chat .mlc-header__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #1f1f1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#mastore-live-chat .mlc-header__avatar svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #fff !important;
}

#mastore-live-chat .mlc-header__meta { flex: 1 !important; min-width: 0 !important; }
#mastore-live-chat .mlc-header__title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
#mastore-live-chat .mlc-header__status {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  opacity: 0.9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #fff !important;
}
#mastore-live-chat .mlc-header__status::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  flex-shrink: 0 !important;
}
#mastore-live-chat .mlc-header__status.is-online::before {
  background: #22c55e !important;
}

#mastore-live-chat .mlc-header__close {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#mastore-live-chat .mlc-header__close:hover { background: rgba(255,255,255,0.1) !important; }

#mastore-live-chat .mlc-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: #fafafa !important;
  -webkit-overflow-scrolling: touch;
}

#mastore-live-chat .mlc-bubble {
  max-width: 85% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}
#mastore-live-chat .mlc-bubble--sys {
  align-self: center !important;
  max-width: 95% !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 4px 8px !important;
}
#mastore-live-chat .mlc-bubble--in {
  align-self: flex-end !important;
  background: #0a0a0a !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}
#mastore-live-chat .mlc-bubble--out {
  align-self: flex-start !important;
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e5e7eb !important;
  border-bottom-left-radius: 4px !important;
}
#mastore-live-chat .mlc-bubble__time {
  display: block !important;
  margin-top: 4px !important;
  font-size: 10px !important;
  opacity: 0.65 !important;
}

#mastore-live-chat .mlc-quick {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 12px 10px !important;
  background: #fafafa !important;
  flex-shrink: 0 !important;
}
#mastore-live-chat .mlc-quick[hidden] { display: none !important; }
#mastore-live-chat .mlc-quick button {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #111 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

#mastore-live-chat .mlc-composer {
  display: flex !important;
  gap: 8px !important;
  padding: 12px !important;
  border-top: 1px solid #e5e7eb !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  align-items: flex-end !important;
}
#mastore-live-chat .mlc-composer__input {
  flex: 1 !important;
  min-height: 44px !important;
  max-height: 110px !important;
  resize: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  outline: none !important;
  background: #fff !important;
  color: #111 !important;
  width: auto !important;
}
#mastore-live-chat .mlc-composer__send {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #000 !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#mastore-live-chat .mlc-composer__send:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
#mastore-live-chat .mlc-footer {
  padding: 0 12px 12px !important;
  background: #fff !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
#mastore-live-chat .mlc-footer a {
  font-size: 12px !important;
  color: #6b7280 !important;
  text-decoration: underline !important;
}
#mastore-live-chat .mlc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes mlc-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 10px rgba(0,0,0,0.08); }
}


/* Lift back-to-top above chat FAB (desktop) */
@media (min-width: 1024px) {
  body .back-to-top {
    bottom: 92px !important;
    right: 24px !important;
  }
}

/* Mobile: progress-ring / back-to-top sits above chat FAB (FAB is above tab bar) */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  body .back-to-top {
    /* tabbar 72 + gap 10 + fab 56 + gap 12 ≈ 78 above tabbar bottom offset */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 78px) !important;
    right: 14px !important;
    z-index: 10050 !important;
  }
}

@media (max-width: 480px) {
  body .back-to-top {
    /* tabbar 72 + gap 8 + fab 54 + gap 12 */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 74px) !important;
    right: 12px !important;
  }
}

/* ========== Motion tokens ==========
   Mobile: match Ferrano categories drawer
     transform 0.6s cubic-bezier(0.3, 1, 0.3, 1)  (= --theme-ease-secondary)
     overlay 0.8s same ease
   Desktop: ultra-smooth card (ui-ux-pro-max: ease-out in / ease-in out, no linear)
*/
#mastore-live-chat {
  /* Site drawer language (categories / menu) */
  --mlc-ease-drawer: cubic-bezier(0.3, 1, 0.3, 1);
  --mlc-ease-drawer-in: cubic-bezier(0.7, 0, 0.3, 1); /* --theme-ease-primary */
  --mlc-dur-drawer: 0.6s;
  --mlc-dur-overlay: 0.8s;

  /* Desktop premium */
  --mlc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mlc-ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --mlc-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --mlc-dur-open: 0.55s;
  --mlc-dur-close: 0.42s;
  --mlc-dur-scrim: 0.5s;
  --mlc-dur-fab: 0.45s;
}

/* ========== FAB ========== */
#mastore-live-chat .mlc-fab {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    opacity var(--mlc-dur-fab) var(--mlc-ease-soft),
    transform var(--mlc-dur-fab) var(--mlc-ease-out),
    box-shadow 0.45s var(--mlc-ease-soft),
    visibility var(--mlc-dur-fab) var(--mlc-ease-soft) !important;
  animation: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

#mastore-live-chat .mlc-fab:hover {
  transform: translate3d(0, -3px, 0) scale(1.06) !important;
  animation: none !important;
}

/* Exit: suppressed / body drawer open — soft sink + fade */
body.drawer-open #mastore-live-chat .mlc-fab,
body.drawer-open #mastore-live-chat .mlc-panel,
body.mfp-open #mastore-live-chat .mlc-fab,
body.mfp-open #mastore-live-chat .mlc-panel,
html.mfp-ready #mastore-live-chat .mlc-fab,
html.mfp-ready #mastore-live-chat .mlc-panel,
body.popup-open #mastore-live-chat .mlc-fab,
body.popup-open #mastore-live-chat .mlc-panel,
#mastore-live-chat.is-suppressed .mlc-fab,
#mastore-live-chat.is-suppressed .mlc-panel,
body:has(.drawer.active) #mastore-live-chat .mlc-fab,
body:has(.drawer.active) #mastore-live-chat .mlc-panel,
body:has(.popup-screen.active) #mastore-live-chat .mlc-fab,
body:has(.popup-screen.active) #mastore-live-chat .mlc-panel,
body:has(.mfp-wrap) #mastore-live-chat .mlc-fab,
body:has(.mfp-wrap) #mastore-live-chat .mlc-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 14px, 0) scale(0.86) !important;
  transition:
    opacity 0.4s var(--mlc-ease-in),
    transform 0.45s var(--mlc-ease-in),
    visibility 0.4s var(--mlc-ease-in),
    box-shadow 0.35s ease !important;
  animation: none !important;
}

/* ========== Panel open / close (desktop card — max smooth) ========== */
#mastore-live-chat .mlc-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 28px, 0) scale(0.94) !important;
  transform-origin: bottom right !important;
  transition:
    opacity var(--mlc-dur-close) var(--mlc-ease-in),
    transform var(--mlc-dur-close) var(--mlc-ease-in),
    visibility var(--mlc-dur-close) var(--mlc-ease-in),
    box-shadow var(--mlc-dur-close) var(--mlc-ease-in),
    filter var(--mlc-dur-close) var(--mlc-ease-in) !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: blur(2px);
}

#mastore-live-chat .mlc-panel.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0);
  transition:
    opacity var(--mlc-dur-open) var(--mlc-ease-out),
    transform var(--mlc-dur-open) var(--mlc-ease-out),
    visibility var(--mlc-dur-open) var(--mlc-ease-out),
    box-shadow var(--mlc-dur-open) var(--mlc-ease-out),
    filter var(--mlc-dur-open) var(--mlc-ease-out) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28) !important;
}

/* Desktop only: soft content cascade (not on mobile drawer-style sheet) */
@media (min-width: 1024px) {
  #mastore-live-chat .mlc-panel .mlc-header,
  #mastore-live-chat .mlc-panel .mlc-messages,
  #mastore-live-chat .mlc-panel .mlc-quick,
  #mastore-live-chat .mlc-panel .mlc-composer,
  #mastore-live-chat .mlc-panel .mlc-footer {
    opacity: 0.001;
    transform: translate3d(0, 8px, 0);
    transition:
      opacity 0.4s var(--mlc-ease-out),
      transform 0.45s var(--mlc-ease-out);
  }

  #mastore-live-chat .mlc-panel.is-open .mlc-header {
    opacity: 1;
    transform: none;
    transition-delay: 0.05s;
  }
  #mastore-live-chat .mlc-panel.is-open .mlc-messages {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
  }
  #mastore-live-chat .mlc-panel.is-open .mlc-quick {
    opacity: 1;
    transform: none;
    transition-delay: 0.14s;
  }
  #mastore-live-chat .mlc-panel.is-open .mlc-composer,
  #mastore-live-chat .mlc-panel.is-open .mlc-footer {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
  }

  #mastore-live-chat .mlc-panel:not(.is-open) .mlc-header,
  #mastore-live-chat .mlc-panel:not(.is-open) .mlc-messages,
  #mastore-live-chat .mlc-panel:not(.is-open) .mlc-quick,
  #mastore-live-chat .mlc-panel:not(.is-open) .mlc-composer,
  #mastore-live-chat .mlc-panel:not(.is-open) .mlc-footer {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition-duration: 0.22s;
    transition-delay: 0s;
    transition-timing-function: var(--mlc-ease-in);
  }
}

#mastore-live-chat .mlc-bubble {
  animation: mlc-bubble-in 0.4s var(--mlc-ease-out) both;
}

@keyframes mlc-bubble-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mlc-pulse {
  0%, 100% {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(0, 0, 0, 0.06);
  }
}


@media (prefers-reduced-motion: reduce) {
  #mastore-live-chat .mlc-fab,
  #mastore-live-chat .mlc-panel,
  #mastore-live-chat .mlc-panel .mlc-header,
  #mastore-live-chat .mlc-panel .mlc-messages,
  #mastore-live-chat .mlc-panel .mlc-quick,
  #mastore-live-chat .mlc-panel .mlc-composer,
  #mastore-live-chat .mlc-panel .mlc-footer,
  #mastore-live-chat .mlc-bubble,
  #mastore-live-chat .mlc-scrim,
  body.mlc-chat-open .mobile-menu {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* ---- Mobile layout: FAB above tabbar; open chat = half-screen sheet ---- */
/* Also match coarse pointer (phones in desktop-mode / wide layout) via .mlc-mobile */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  #mastore-live-chat .mlc-fab {
    right: 14px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  /*
   * Half-screen sheet — same motion language as Ferrano categories drawer:
   *   transform only, 0.6s, cubic-bezier(0.3, 1, 0.3, 1)
   * No opacity fade on the panel (drawer doesn't fade either).
   */
  #mastore-live-chat .mlc-panel,
  #mastore-live-chat.mlc-mobile .mlc-panel {
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50vh !important;
    height: 50dvh !important;
    max-height: 50vh !important;
    max-height: 50dvh !important;
    min-height: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    transform: translate3d(0, 100%, 0) !important;
    transform-origin: bottom center !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18) !important;
    z-index: 2147483647 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    /* same duration/easing both directions — like .drawer .drawer-inner */
    transition:
      transform var(--mlc-dur-drawer) var(--mlc-ease-drawer),
      -webkit-transform var(--mlc-dur-drawer) var(--mlc-ease-drawer) !important;
  }

  #mastore-live-chat .mlc-panel.is-open,
  #mastore-live-chat.mlc-mobile .mlc-panel.is-open {
    transform: translate3d(0, 0, 0) !important;
    height: 50vh !important;
    height: 50dvh !important;
    max-height: 50vh !important;
    max-height: 50dvh !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
    transition:
      transform var(--mlc-dur-drawer) var(--mlc-ease-drawer),
      -webkit-transform var(--mlc-dur-drawer) var(--mlc-ease-drawer) !important;
  }

  /* Closed mobile sheet: off-screen + never steal taps (incl. children) */
  #mastore-live-chat .mlc-panel:not(.is-open),
  #mastore-live-chat.mlc-mobile .mlc-panel:not(.is-open),
  #mastore-live-chat .mlc-panel:not(.is-open) *,
  #mastore-live-chat.mlc-mobile .mlc-panel:not(.is-open) * {
    pointer-events: none !important;
  }

  #mastore-live-chat .mlc-panel:not(.is-open),
  #mastore-live-chat.mlc-mobile .mlc-panel:not(.is-open) {
    opacity: 1 !important;
    /* visibility stays for mid-close animation; [hidden] kills it after */
  }

  #mastore-live-chat .mlc-scrim:not(.is-on),
  #mastore-live-chat .mlc-scrim:not(.is-on) * {
    pointer-events: none !important;
  }

  /* Hide FAB while sheet open — same ease as drawer */
  #mastore-live-chat:has(.mlc-panel.is-open) .mlc-fab,
  body.mlc-chat-open #mastore-live-chat .mlc-fab {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 12px, 0) scale(0.9) !important;
    transition:
      opacity 0.45s var(--mlc-ease-drawer),
      transform 0.5s var(--mlc-ease-drawer),
      visibility 0.45s var(--mlc-ease-drawer) !important;
  }

  #mastore-live-chat .mlc-header {
    padding-top: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Drag handle cue at top of half-sheet */
  #mastore-live-chat .mlc-panel.is-open .mlc-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.18) !important;
  }

  #mastore-live-chat .mlc-header {
    position: relative !important;
    padding-top: 18px !important;
  }

  #mastore-live-chat .mlc-footer,
  #mastore-live-chat .mlc-composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /*
   * Scrim: NEVER leave a full-screen fixed layer as display:block when closed.
   * opacity:0 + fixed still blocks taps in some mobile WebKits.
   * Closed = display:none. Open = display:block + pe auto.
   */
  #mastore-live-chat .mlc-scrim,
  #mastore-live-chat.mlc-mobile .mlc-scrim {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483645 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    touch-action: none;
  }

  #mastore-live-chat .mlc-scrim.is-on,
  #mastore-live-chat.mlc-mobile .mlc-scrim.is-on {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #mastore-live-chat .mlc-scrim:not(.is-on),
  #mastore-live-chat.mlc-mobile .mlc-scrim:not(.is-on),
  #mastore-live-chat .mlc-scrim:not(.is-on) * {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Closed + hidden: out of the tree (after forceCleanup) */
  #mastore-live-chat .mlc-panel[hidden],
  #mastore-live-chat.mlc-mobile .mlc-panel[hidden] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Mid-close (no is-open yet, not hidden): no hits */
  #mastore-live-chat .mlc-panel:not(.is-open):not([hidden]),
  #mastore-live-chat.mlc-mobile .mlc-panel:not(.is-open):not([hidden]) {
    pointer-events: none !important;
  }
}

/* JS-flagged mobile (desktop-mode phones / layout width edge cases) */
#mastore-live-chat.mlc-mobile .mlc-panel,
#mastore-live-chat.mlc-mobile .mlc-panel.is-open {
  top: auto !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  /* height set inline by JS to exact half of visual viewport */
  max-height: 52vh !important;
  max-height: 52dvh !important;
  min-height: 0 !important;
  border-radius: 18px 18px 0 0 !important;
}

#mastore-live-chat.mlc-mobile .mlc-scrim {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483645 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
}

#mastore-live-chat.mlc-mobile .mlc-scrim.is-on {
  display: block !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#mastore-live-chat.mlc-mobile .mlc-scrim:not(.is-on) {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 480px) {
  #mastore-live-chat .mlc-fab {
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }

  #mastore-live-chat .mlc-panel,
  #mastore-live-chat .mlc-panel.is-open {
    height: 50vh !important;
    height: 50dvh !important;
    max-height: 50dvh !important;
    min-height: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/*
 * Mobile-only page chrome tweaks when sheet is open.
 * Desktop must NOT use .mlc-chat-open (page scroll + sticky header stay intact).
 */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  .mobile-menu {
    transition:
      opacity var(--mlc-dur-drawer, 0.6s) cubic-bezier(0.3, 1, 0.3, 1),
      transform var(--mlc-dur-drawer, 0.6s) cubic-bezier(0.3, 1, 0.3, 1),
      visibility var(--mlc-dur-drawer, 0.6s) cubic-bezier(0.3, 1, 0.3, 1) !important;
  }

  /*
   * Tab bar hide ONLY via explicit .mlc-tabbar-suppressed on the menu node.
   * NEVER tie pe:none / visibility:hidden to body.mlc-chat-open alone —
   * if that class sticks on Safari after close, bottom menu dies forever.
   */
  .mobile-menu.mlc-tabbar-suppressed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 0.625rem)) !important;
    transition:
      opacity var(--mlc-dur-drawer, 0.6s) cubic-bezier(0.3, 1, 0.3, 1),
      transform var(--mlc-dur-drawer, 0.6s) cubic-bezier(0.3, 1, 0.3, 1),
      visibility var(--mlc-dur-drawer, 0.6s) cubic-bezier(0.3, 1, 0.3, 1) !important;
  }
  /* Safety: body flag alone must NOT kill the tab bar */
  body.mlc-chat-open .mobile-menu:not(.mlc-tabbar-suppressed),
  html.mlc-chat-open .mobile-menu:not(.mlc-tabbar-suppressed) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.mlc-chat-open .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
  }

  body.mlc-chat-open {
    overscroll-behavior: none;
  }
}

/* Desktop: never hide header / never lock document when chat open */
@media (min-width: 1024px) {
  body.mlc-chat-open,
  html.mlc-chat-open {
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }

  body.mlc-chat-open .mobile-menu,
  html.mlc-chat-open .mobile-menu,
  body.mlc-chat-open header,
  body.mlc-chat-open .site-header,
  body.mlc-chat-open .header,
  body.mlc-chat-open .page-header {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* Desktop default: scrim off the layout tree entirely */
#mastore-live-chat .mlc-scrim {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}



/* ===== v9: hard-closed hit layers (mobile chat after close) ===== */
#mastore-live-chat .mlc-scrim:not(.is-on),
#mastore-live-chat.mlc-mobile .mlc-scrim:not(.is-on) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}
#mastore-live-chat .mlc-panel[hidden],
#mastore-live-chat .mlc-panel:not(.is-open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
#mastore-live-chat:not(.is-chat-open) .mlc-scrim,
#mastore-live-chat:not(.is-chat-open) .mlc-panel {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}
#mastore-live-chat:not(.is-chat-open) .mlc-scrim *,
#mastore-live-chat:not(.is-chat-open) .mlc-panel * {
  pointer-events: none !important;
}
/* Root never captures when closed */
#mastore-live-chat:not(.is-chat-open) {
  pointer-events: none !important;
}
#mastore-live-chat:not(.is-chat-open) .mlc-fab,
#mastore-live-chat:not(.is-chat-open) .mlc-fab * {
  pointer-events: auto !important;
}


/* ===== v10 Safari: scrim must not exist as hit target when closed ===== */
#mastore-live-chat .mlc-scrim:not(.is-on) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
  width: 0 !important;
  height: 0 !important;
  inset: auto !important;
}
#mastore-live-chat:not(.is-chat-open) .mlc-scrim {
  display: none !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
#mastore-live-chat.is-chat-open .mlc-scrim.is-on {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 2147483645 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  -webkit-tap-highlight-color: transparent;
}


/* ===== v11: stacking + tab bar safety ===== */
#mastore-live-chat {
  z-index: 90 !important; /* below .mobile-menu (100) when closed */
  pointer-events: none !important;
}
#mastore-live-chat.is-chat-open {
  z-index: 2147483000 !important;
}
#mastore-live-chat .mlc-fab {
  z-index: 110 !important; /* above tab bar so FAB stays tappable */
  pointer-events: auto !important;
}
#mastore-live-chat.is-chat-open .mlc-fab {
  z-index: 2147483646 !important;
}
/* Bottom menu always above closed chat root */
.mobile-menu {
  z-index: 100 !important;
  pointer-events: auto !important;
}
.mobile-menu .mobile-menu-inner,
.mobile-menu .mobile-menu-inner a,
.mobile-menu .mobile-menu-inner button {
  pointer-events: auto !important;
}
.mobile-menu.mlc-tabbar-suppressed,
.mobile-menu.mlc-tabbar-suppressed .mobile-menu-inner,
.mobile-menu.mlc-tabbar-suppressed a,
.mobile-menu.mlc-tabbar-suppressed button {
  pointer-events: none !important;
}


/* ===== v12: GDPR must NOT cover bottom tabbar (mobile) ===== */
@media screen and (max-width: 1023.98px) {
  .gdpr.style-2,
  .gdpr.gdpr-show.style-2,
  .gdpr.fixed-bottom {
    /* sit above tabbar (~70px) + safe area, never over it */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    z-index: 95 !important; /* menu is 100 */
  }
  .mobile-menu {
    z-index: 100 !important;
    pointer-events: auto !important;
  }
  .mobile-menu .mobile-menu-inner {
    pointer-events: auto !important;
  }
  .mobile-menu a,
  .mobile-menu button,
  .mobile-menu .toggle-button {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
}


/* ===== v13 perf: no infinite FAB pulse / blur on mobile ===== */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  #mastore-live-chat .mlc-fab,
  #mastore-live-chat .mlc-fab * {
    animation: none !important;
    will-change: auto !important;
    filter: none !important;
  }
  #mastore-live-chat .mlc-panel {
    filter: none !important;
    will-change: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Campaign popup: do not show on mobile at all (was full-screen ghost + lag) */
  .popup-screen.campaign-popup {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}