/* Keep full-size memory media above every capsule and app control. */
html body .app-shell .photo-lightbox,
html body main.app-shell .photo-lightbox,
html body.photo-lightbox-open .app-shell .photo-lightbox,
html body.photo-lightbox-open main.app-shell .photo-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
}

html body .app-shell .photo-lightbox[hidden],
html body main.app-shell .photo-lightbox[hidden] {
  display: none !important;
}

html body.photo-lightbox-open .app-shell .memory-bottom-sheet.open,
html body.photo-lightbox-open main.app-shell .memory-bottom-sheet.open {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.photo-lightbox-open {
  overflow: hidden !important;
}

/* The viewer is the only interactive layer while media is open. The capsule
   returns immediately when the viewer closes. */
html body.photo-lightbox-open .app-shell .topbar,
html body.photo-lightbox-open .app-shell .bottom-nav,
html body.photo-lightbox-open main.app-shell .topbar,
html body.photo-lightbox-open main.app-shell .bottom-nav {
  pointer-events: none !important;
}

html body .app-shell .photo-lightbox-backdrop,
html body main.app-shell .photo-lightbox-backdrop {
  z-index: 0 !important;
}

html body .app-shell .photo-lightbox-frame,
html body main.app-shell .photo-lightbox-frame {
  z-index: 2 !important;
}

html body .app-shell .photo-lightbox-close,
html body main.app-shell .photo-lightbox-close {
  z-index: 4 !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .photo-lightbox,
  html body main.app-shell .photo-lightbox {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}