/* BZDR Studio Mobile Overlay Fix — Engineering Beta v8.3.
 * Corrects iPhone modal/header stacking observed in two 2026-10-26 recordings.
 * Desktop (>899px) is intentionally unchanged.
 */
@media (max-width:899px) {
  /* Header and desktop-menu navigation are above the session, but must NEVER
     cover a dialog or its close control. Both are BODY children. */
  #modalBackdrop.modal-backdrop {
    position:fixed !important;
    inset:0 !important;
    z-index:100100 !important;
    width:100% !important;
    min-width:0 !important;
    height:100dvh !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
            max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    overscroll-behavior:contain;
  }
  #modalBackdrop[hidden], #desktopMenuPopup[hidden] {display:none !important;}
  #modalBackdrop .modal {
    box-sizing:border-box;
    position:relative;
    isolation:isolate;
    width:min(100%,620px);
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  #modalBackdrop #modalContent {min-width:0;max-width:100%;}
  #modalBackdrop:not([data-presentation="plugin"]) .modal-top {
    position:sticky !important;
    top:0 !important;
    right:auto !important;
    z-index:30 !important;
    box-sizing:border-box;
    height:auto;
    min-height:48px;
    margin-top:0;
    padding:5px 0;
    flex:none;
    align-items:center;
    background:#243440;
    border-bottom:1px solid #526777;
  }
  #modalBackdrop:not([data-presentation="plugin"]) .modal-top strong {
    display:block !important;
    min-width:0;
    line-height:1.25;
    overflow-wrap:anywhere;
    font-size:15px;
  }
  #modalBackdrop:not([data-presentation="plugin"]) #modalClose {
    display:flex;
    justify-content:center;
    align-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    border-radius:5px;
    background:#152530;
    color:#f2f8fb;
  }
  /* Touch navigation menus must fit inside Safari's visual viewport and
     scroll rather than extending beyond the browser's toolbars. */
  #desktopMenuPopup:not([hidden]) {
    box-sizing:border-box;
    width:min(264px,calc(100vw - 18px)) !important;
    max-width:calc(100vw - 18px) !important;
    max-height:min(64dvh,calc(100dvh - 110px)) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  #desktopMenuPopup button {min-height:44px;}
  /* Plugin windows use a fixed viewport-safe scroll surface.  The faceplate
     close button remains above the scrollable plugin content. */
  #modalBackdrop[data-presentation="plugin"] {align-items:stretch;}
  #modalBackdrop[data-presentation="plugin"] .modal {
    width:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
    overflow:auto;
  }
  #modalBackdrop[data-presentation="plugin"] #modalContent {
    min-width:0;
    flex:0 0 auto;
  }
  #modalBackdrop[data-presentation="plugin"] .modal-top {
    top:4px;
    right:5px;
    z-index:50;
    pointer-events:none;
  }
  #modalBackdrop[data-presentation="plugin"] #modalClose {
    min-width:40px;
    width:40px;
    min-height:40px;
    height:40px;
    background:#172632;
    border:1px solid #47647a;
    border-radius:8px;
    color:#f3faff;
    pointer-events:auto;
  }
  body:has(#modalBackdrop:not([hidden])) #bzdrTransportHoldMenu,
  body:has(#modalBackdrop:not([hidden])) #desktopMenuPopup {pointer-events:none !important;}
}