/* Buyer notifications use one scroll model at a time.
   The seller center keeps a natural document flow. The buyer message center,
   when mounted by the bell route, is a fixed overlay and must be the only
   scrolling surface. */
@media (max-width: 768px) {
  html.gsfc-notification-page,
  html.gsfc-notification-page body {
    scroll-behavior: auto !important;
  }

  /* The buyer page is opened from a bell overlay. Give it one fixed viewport
     and one scroll owner so the browser never switches between document and
     overlay scrolling during a swipe. */
  html.gsfc-notification-page:not(.gsfc-buyer-seller-message-active),
  html.gsfc-notification-page:not(.gsfc-buyer-seller-message-active) body {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.gsfc-notification-page #app,
  html.gsfc-notification-page #app > #app,
  html.gsfc-notification-page #app .view {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  html.gsfc-notification-page:not(.gsfc-buyer-seller-message-active) .notification-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  /* Buyer message-center route: fixed center is the sole scroll owner. */
  html.gsfc-buyer-seller-message-active,
  html.gsfc-buyer-seller-message-active body {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* Fixed headers remain interactive while vertical gestures pass through. */
  html.gsfc-notification-page .mobile-nav-bar-container,
  html.gsfc-notification-page .mobile-nav-bar-container .nav-bar,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .mobile-nav-bar-container {
    touch-action: pan-y !important;
  }

  /* Let a swipe that starts on the title pass to the fixed list. Keep only
     actual controls hit-testable so back/actions remain clickable. */
  html.gsfc-notification-page .mobile-nav-bar-container .nav-bar,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .mobile-nav-bar-container .nav-bar {
    pointer-events: none !important;
  }
  html.gsfc-notification-page .mobile-nav-bar-container .back-btn,
  html.gsfc-notification-page .mobile-nav-bar-container .nav-right,
  html.gsfc-notification-page .mobile-nav-bar-container button,
  html.gsfc-notification-page .mobile-nav-bar-container a,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .mobile-nav-bar-container .back-btn,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .mobile-nav-bar-container .nav-right,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .mobile-nav-bar-container button,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .mobile-nav-bar-container a {
    pointer-events: auto !important;
  }

  /* A touch drag on iOS/Android can synthesize :hover on the card under the
     finger. The notification card hover treatment is desktop-only; otherwise
     the blue border appears to move from card to card while scrolling. */
  html.gsfc-notification-page .notification-container .noti-box .notification:hover,
  html.gsfc-buyer-seller-message-active #gsfc-buyer-seller-message-center .notification-container .noti-box .notification:hover {
    border-color: #e5e7eb !important;
    box-shadow: none !important;
  }
}