/* Buyer online customer service: dock the composer to the visual viewport.
 * The chat-unified runtime already writes --gsfc-chat-viewport-height on
 * visualViewport resize.  Using that value here fixes iOS builds where
 * 100dvh still reports the layout viewport while the keyboard is open. */
@media (max-width: 767px) {
  html.gsfc-customer-service-page,
  html.gsfc-customer-service-page body,
  html.gsfc-customer-service-page #app {
    height: var(--gsfc-chat-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.gsfc-customer-service-page .mobile-customer-service {
    height: var(--gsfc-chat-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.gsfc-customer-service-page .mobile-customer-service > .gsfc-service-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.gsfc-customer-service-page .mobile-customer-service > .safe-bottom {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html.gsfc-customer-service-page.gsfc-chat-keyboard-active .mobile-customer-service > .safe-bottom,
  html.gsfc-customer-service-page.gsfc-keyboard-active .mobile-customer-service > .safe-bottom,
  html.gsfc-customer-service-page.gsfc-chat-keyboard-closing .mobile-customer-service > .safe-bottom {
    padding-bottom: 10px !important;
    transition: none !important;
  }
}