/* InkMotion — accurate mobile portrait previews (v1.0)
   CSS-only: does not alter export resolution, rendering logic, other ratios or mobile tabs.
   Load AFTER studio-layout-v3.css and studio-mobile-tabs-v4.css.
*/
@media screen and (max-width:850px) {
  /* Story Video Creator has an explicit data-ratio attribute. */
  body[data-im-page="story-video-creator"] .video-outer[data-ratio="9:16"] {
    width:min(72vw,288px) !important;
    max-width:min(72vw,288px) !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }
  body[data-im-page="story-video-creator"] .video-outer[data-ratio="9:16"] > canvas#previewCanvas {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:9 / 16 !important;
    object-fit:contain !important;
  }

  /* The other editors encode the selected format in the canvas pixel dimensions.
     Apply ONLY when the canvas is portrait (540 x 960), never to 1:1 or 16:9. */
  body[data-im-page] :is(#canvasFrame,#canvasShell,#screen):has(> canvas#previewCanvas[width="540"][height="960"]) {
    box-sizing:border-box !important;
    width:min(72vw,288px) !important;
    max-width:min(72vw,288px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  body[data-im-page] :is(#canvasFrame,#canvasShell,#screen):has(> canvas#previewCanvas[width="540"][height="960"]) > canvas#previewCanvas {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:9 / 16 !important;
    object-fit:contain !important;
  }

  /* Text Match Cut uses a full-width preview stage rather than a portrait frame. */
  body[data-im-page="text-match-cut"] #previewStage:has(> canvas#previewCanvas[width="540"][height="960"]) {
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    padding:12px 8px !important;
    overflow:visible !important;
  }
  body[data-im-page="text-match-cut"] #previewStage > canvas#previewCanvas[width="540"][height="960"] {
    display:block !important;
    width:min(72vw,288px) !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:9 / 16 !important;
    object-fit:contain !important;
  }
}