/* Mobile project viewer: keep the action rail close to the artwork instead of
   at the bottom of the viewport. Dots, when present, remain between them. */
@media (max-width: 760px) {
  #projectViewer .project-viewer-card {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 100dvh !important;
    gap: 0 !important;
    padding: max(16px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)) !important;
  }

  #projectViewer .project-viewer-header {
    position: absolute !important;
    z-index: 20;
    top: max(16px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  #projectViewer .project-viewer-media {
    position: static !important;
    inset: auto !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: max(58px, calc(env(safe-area-inset-top) + 48px)) 0 0 !important;
    overflow: visible !important;
  }

  #projectViewer .project-viewer-stage {
    flex: 0 1 auto;
    max-height: calc(100dvh - 230px);
  }

  #projectViewer .project-viewer-image {
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 250px) !important;
  }

  #projectViewer .project-viewer-dots {
    position: static !important;
    order: initial;
    margin: 12px auto 0 !important;
  }

  #projectViewer .project-viewer-actions {
    position: static !important;
    z-index: 10;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
    margin: 12px auto 0 !important;
    transform: none !important;
  }
}