/*
 * HubSpot Messenger (Messenger().error / .success / .info) — Genesys draws on top, so lift toasts.
 * Desktop (≥992px): bottom-right (messenger-on-right from app/config.js). ≤991px: centered bar.
 * Loaded after messenger-theme-flat: Portal.Master, NoNav.Master, products-iframe, payment-iframe
 * (before payments.css on payment-iframe; payments.css does not duplicate these rules).
 */
:root {
  /*
   * Phones/tablets: enough to clear chat launcher + typical home indicator, without sitting too high.
   * Raise only this value if the FAB still covers toasts anywhere.
   */
  --messenger-lift-mobile: 120px;
  /*
   * Approximate height from bottom edge of toast(s) to top (flat theme + multi-line).
   * Increase if stacked or long messages still cover page content when scrolled to the end.
   */
  --messenger-toast-stack-pad: 108px;
  /*
   * Extra bottom offset when this document is embedded in an iframe: the parent page’s
   * Genesys launcher stacks on top of the iframe (fixed UI here cannot win on z-index).
   * Tune on body.messenger-parent-embed only (payment-iframe, products-iframe).
   */
  --messenger-embed-boost: 96px;
}

body > ul.messenger.messenger-fixed {
  --messenger-above-chat: 120px;
  bottom: calc(
    var(--messenger-above-chat) + constant(safe-area-inset-bottom)
  ) !important;
  bottom: calc(
    var(--messenger-above-chat) +
      max(0px, env(safe-area-inset-bottom, 0px))
  ) !important;
  left: auto !important;
  right: max(20px, env(safe-area-inset-right, 0px)) !important;
  width: 350px !important;
  max-width: min(350px, calc(100vw - 40px)) !important;
  margin-left: 0 !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* Embedded in parent portal: lift further so toasts sit above the parent’s FAB overlap. */
body.messenger-parent-embed > ul.messenger.messenger-fixed {
  --messenger-above-chat: calc(120px + var(--messenger-embed-boost));
  bottom: calc(
    var(--messenger-above-chat) + constant(safe-area-inset-bottom)
  ) !important;
  bottom: calc(
    var(--messenger-above-chat) +
      max(0px, env(safe-area-inset-bottom, 0px))
  ) !important;
}

@media (max-width: 991px) {
  body > ul.messenger.messenger-fixed {
    --messenger-above-chat: var(--messenger-lift-mobile, 232px);
    bottom: calc(
      var(--messenger-above-chat) +
        max(34px, env(safe-area-inset-bottom, 0px))
    ) !important;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 88px), 420px) !important;
    max-width: min(calc(100vw - 88px), 420px) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  body.messenger-parent-embed > ul.messenger.messenger-fixed {
    --messenger-above-chat: calc(
      var(--messenger-lift-mobile) + var(--messenger-embed-boost)
    );
    bottom: calc(
      var(--messenger-above-chat) +
        max(34px, env(safe-area-inset-bottom, 0px))
    ) !important;
  }
}

/*
 * Fixed toasts do not consume layout height; reserve scroll space only while a toast is visible.
 * ul loses .messenger-empty when HubSpot Messenger has messages (no JS at each call site).
 * Uses :has() — not for legacy IE; modern evergreen + iOS Safari OK.
 */
@media (min-width: 992px) {
  body:has(> ul.messenger.messenger-fixed:not(.messenger-empty))
    .main-content-wrapper
    #main-content,
  body#no-nav:has(> ul.messenger.messenger-fixed:not(.messenger-empty)) > section.container,
  body:not(.main-mp):not(#no-nav):not(.messenger-parent-embed):has(
      > ul.messenger.messenger-fixed:not(.messenger-empty)
    ) {
    padding-bottom: calc(
      120px + max(0px, env(safe-area-inset-bottom, 0px)) +
        var(--messenger-toast-stack-pad)
    ) !important;
  }

  body.messenger-parent-embed:has(> ul.messenger.messenger-fixed:not(.messenger-empty)) {
    padding-bottom: calc(
      120px + var(--messenger-embed-boost) +
        max(0px, env(safe-area-inset-bottom, 0px)) +
        var(--messenger-toast-stack-pad)
    ) !important;
  }
}

@media (max-width: 991px) {
  body:has(> ul.messenger.messenger-fixed:not(.messenger-empty))
    .main-content-wrapper
    #main-content,
  body#no-nav:has(> ul.messenger.messenger-fixed:not(.messenger-empty)) > section.container,
  body:not(.main-mp):not(#no-nav):not(.messenger-parent-embed):has(
      > ul.messenger.messenger-fixed:not(.messenger-empty)
    ) {
    padding-bottom: calc(
      var(--messenger-lift-mobile) +
        max(34px, env(safe-area-inset-bottom, 0px)) +
        var(--messenger-toast-stack-pad)
    ) !important;
  }

  body.messenger-parent-embed:has(> ul.messenger.messenger-fixed:not(.messenger-empty)) {
    padding-bottom: calc(
      var(--messenger-lift-mobile) + var(--messenger-embed-boost) +
        max(34px, env(safe-area-inset-bottom, 0px)) +
        var(--messenger-toast-stack-pad)
    ) !important;
  }
}