/* PhotoTag v2.01.79 - mobile modal safety + back-to-top alignment */

/* Back-to-top: use the button as the alignment box; the SVG is geometrically centered. */
#topBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
}
#topBtn svg{
  display:block!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  transform:none!important;
}

@media(max-width:760px){
  :root{
    --pt-modal-edge:12px;
    --pt-modal-safe-top:max(12px,env(safe-area-inset-top));
    --pt-modal-safe-bottom:max(12px,env(safe-area-inset-bottom));
  }

  /* All card-style overlays use the same viewport box on phones. */
  .maintenance-modal,
  .edit-panel,
  .validation-modal,
  .upload-complete,
  .pt-ui-dialog{
    box-sizing:border-box!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:
      var(--pt-modal-safe-top)
      var(--pt-modal-edge)
      var(--pt-modal-safe-bottom)!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  .maintenance-modal[hidden],
  .edit-panel[hidden],
  .validation-modal[hidden],
  .upload-complete[hidden],
  .pt-ui-dialog[hidden]{
    display:none!important;
  }

  /* Every modal card must fit inside the visual viewport and scroll internally. */
  .maintenance-modal-card,
  .edit-panel-card,
  .validation-modal-card,
  .upload-complete-card,
  .pt-ui-dialog-card{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:calc(100vw - (var(--pt-modal-edge) * 2))!important;
    max-height:calc(100dvh - var(--pt-modal-safe-top) - var(--pt-modal-safe-bottom))!important;
    margin:0 auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable both-edges;
  }

  /* Historical mobile rules set these cards to max-height:none / top aligned. Undo them. */
  .similarity-modal,
  .similarity-modal-card,
  .image-maintenance-card,
  .pose-batch-card,
  .update-history-card,
  .update-modal-card,
  .video-frames-card,
  .video-frame-preview-card,
  .lighting-manage-card,
  .split-collage-card{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .similarity-modal{
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:
      var(--pt-modal-safe-top)
      var(--pt-modal-edge)
      var(--pt-modal-safe-bottom)!important;
  }

  .similarity-modal-card,
  .image-maintenance-card,
  .pose-batch-card,
  .update-history-card,
  .update-modal-card,
  .video-frames-card,
  .video-frame-preview-card,
  .lighting-manage-card,
  .split-collage-card{
    width:100%!important;
    max-width:calc(100vw - (var(--pt-modal-edge) * 2))!important;
    max-height:calc(100dvh - var(--pt-modal-safe-top) - var(--pt-modal-safe-bottom))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Keep controls from widening a modal beyond the viewport. */
  .maintenance-modal-card *,
  .edit-panel-card *,
  .validation-modal-card *,
  .upload-complete-card *,
  .pt-ui-dialog-card *{
    min-width:0;
  }

  .maintenance-modal-card input,
  .maintenance-modal-card select,
  .maintenance-modal-card textarea,
  .edit-panel-card input,
  .edit-panel-card select,
  .edit-panel-card textarea{
    max-width:100%!important;
  }

  /* A close button must stay reachable while a long card scrolls. */
  .maintenance-modal .update-close{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    float:right!important;
    margin:-4px -2px 4px 10px!important;
  }

  /* Dynamic viewport fallback for older Android WebViews. */
  @supports not (height:100dvh){
    .maintenance-modal,
    .edit-panel,
    .validation-modal,
    .upload-complete,
    .pt-ui-dialog{
      height:100vh!important;
      min-height:100vh!important;
    }
    .maintenance-modal-card,
    .edit-panel-card,
    .validation-modal-card,
    .upload-complete-card,
    .pt-ui-dialog-card,
    .similarity-modal-card,
    .image-maintenance-card,
    .pose-batch-card,
    .update-history-card,
    .update-modal-card,
    .video-frames-card,
    .video-frame-preview-card,
    .lighting-manage-card,
    .split-collage-card{
      max-height:calc(100vh - 24px)!important;
    }
  }
}