/* The Brevo launcher is fixed 20px from the corner. On a phone it also
   expands to the viewport. These rules sit above a sticky booking bar,
   and keep the open chat as a panel. An id beats the widget's own
   !important rules. The booking flow hides the launcher entirely. */

body.amt-chat-hidden #brevo-conversations {
  display: none !important;
}

@media (max-width: 767px) {
  body.amt-chat-clearance #brevo-conversations:not(.brevo-conversations--expanded) {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.amt-chat-clearance.amt-day-fab #brevo-conversations:not(.brevo-conversations--expanded) {
    bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #brevo-conversations.brevo-conversations--expanded {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 88px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 88px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #brevo-conversations.brevo-conversations--expanded .brevo-conversations__iframe-wrapper,
  #brevo-conversations.brevo-conversations--expanded .brevo-conversations__iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  html.brevo-conversations-mobile-widget-expanded.brevo-conversations-mobile-widget-expanded,
  html.brevo-conversations-mobile-widget-expanded body.brevo-conversations-mobile-widget-expanded {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 768px) {
  body.amt-chat-clearance #brevo-conversations:not(.brevo-conversations--expanded) {
    bottom: 112px !important;
  }
}
