/* Mobile full-screen image gestures. */

body.mobile-app-ui #imagePreviewModal {
  overflow: hidden;
  background: rgba(8, 13, 12, 0.94);
}

body.mobile-app-ui .image-preview-panel {
  width: 100%;
  height: calc(100vh - max(16px, env(safe-area-inset-bottom)));
  height: calc(100dvh - max(16px, env(safe-area-inset-bottom)));
  max-width: 100%;
  max-height: none;
  overflow: hidden;
  pointer-events: none;
}

body.mobile-app-ui .image-preview-panel img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
}

body.mobile-app-ui .image-preview-panel img.is-zoomed {
  cursor: grab;
}

body.mobile-app-ui .preview-close {
  top: max(8px, env(safe-area-inset-top));
  right: 8px;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(20, 27, 25, 0.76);
  color: #fff;
}

body.mobile-app-ui .preview-nav {
  width: 40px;
  min-height: 52px;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(20, 27, 25, 0.62);
  color: #fff;
}

body.mobile-app-ui .preview-prev {
  left: 4px;
}

body.mobile-app-ui .preview-next {
  right: 4px;
}

body.mobile-app-ui .preview-caption {
  right: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(50%);
}