/* Stabilize Preview / Export on narrow iPhone PWA viewports. */

html,
body,
.app-shell {
  max-width: 100%;
  overflow-x: hidden;
}

.preview-shell {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.preview-stage {
  width: 100%;
  min-width: 0;
}

.preview-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
}

.preview-actions button {
  width: 100%;
  min-width: 0 !important;
  padding-inline: 10px;
}

.screen.focus {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.screen.focus > .content {
  width: 100%;
  min-width: 0;
  max-width: min(620px, 100%) !important;
}

.export-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.export-thumb {
  min-width: 0;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.export-thumb > .preview-slide-live {
  max-width: none;
}

@media (max-width: 390px) {
  .preview-actions {
    gap: 8px;
  }

  .preview-actions button {
    font-size: 12px;
    padding-inline: 8px;
  }

  .export-grid {
    gap: 5px;
  }
}