/* 5.27.07: narrowly scoped iPhone timeline and project browser layout repair.
   Source editor gesture/clip position coordinates are intentionally unchanged. */
@media (max-width:620px){
  html body #proEditor .proTimeline,
  html body #proEditor .proTimelineScroll{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  html body #proEditor .proTimelineScroll{overscroll-behavior-x:contain!important}
  /* Keep the long time axis scrollable; centre only the empty-state message in the viewport. */
  html body #proEditor .proTimelineCanvas{box-sizing:border-box!important}
  html body #proEditor .proTimelineEmptyState{
    position:sticky!important;left:0!important;width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;box-sizing:border-box!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;margin:0!important;text-align:center!important;
    overflow:hidden!important;padding:10px 16px!important;
  }
  html body #proEditor .proTimelineEmptyState b,
  html body #proEditor .proTimelineEmptyState span{max-width:100%!important;overflow-wrap:anywhere!important}
  html body #proEditor .proTimelineEmptyState span{font-size:10px!important;line-height:1.45!important;color:#91a0b6!important}
  html body #proEditor .proTimelineEmptyState b{font-size:13px!important}
  /* The library must scroll as one document instead of clipping its detail pane. */
  html body .proLibraryBack{padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important}
  html body .proLibraryModal{
    display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;
    height:100%!important;max-height:100%!important;min-height:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch!important;box-sizing:border-box!important;
  }
  html body .proLibraryModal>header{position:sticky!important;top:0!important;z-index:11!important;flex:0 0 auto!important;background:#0b1119!important}
  html body .proLibraryModal .proLibraryTabs{position:relative!important;top:auto!important;z-index:2!important;flex:0 0 auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important}
  html body .proLibraryTabs>button{min-width:0!important;width:100%!important;min-height:42px!important;white-space:normal!important;font-size:11px!important;line-height:1.25!important}
  html body .proLibraryTabs .proNewSessionBtn{grid-column:1/-1!important}
  html body .proLibraryTabs label{grid-column:1/-1!important;width:100%!important;min-width:0!important;min-height:44px!important}
  html body .proLibraryTabs input{font-size:16px!important}
  html body .proLibraryLayout{display:flex!important;flex-direction:column!important;flex:0 0 auto!important;min-height:0!important;width:100%!important;overflow:visible!important}
  html body .proLibraryList{flex:0 0 auto!important;width:100%!important;max-height:32vh!important;min-height:100px!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important;border-right:0!important}
  html body .proLibraryRow{min-height:56px!important}
  html body .proLibraryRow b{font-size:12px!important}
  html body .proLibraryRow small{font-size:10px!important}
  html body .proLibraryPager{position:relative!important;bottom:auto!important;flex:0 0 auto!important;min-height:48px!important}
  html body .proLibraryPager span{font-size:11px!important}
  html body .proLibraryPreview{flex:0 0 auto!important;width:100%!important;min-width:0!important;min-height:200px!important;overflow:visible!important;box-sizing:border-box!important}
  html body .proLibraryProjectHead{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:14px 12px!important}
  html body .proLibraryProjectHead b{font-size:14px!important;overflow-wrap:anywhere!important}
  html body .proLibraryProjectHead span{font-size:10px!important;line-height:1.5!important}
  html body .proLibraryProjectActions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:8px!important}
  html body .proLibraryProjectActions .proWide{width:100%!important;min-width:0!important;min-height:46px!important;margin:0!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:12px!important;line-height:1.25!important}
  html body .proLibrarySceneStrip{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity!important;overscroll-behavior-x:contain!important}
  html body .proLibraryScene{flex:0 0 min(73vw,260px)!important;min-height:58px!important;scroll-snap-align:start!important}
  html body .proLibraryScene b{font-size:11px!important}
  html body .proLibraryScene span{font-size:10px!important}
  html body .proLibraryPlayer{width:100%!important;max-width:100%!important;aspect-ratio:16/9!important}
  html body .proLibraryPreviewInfo{padding:12px!important}
  html body .proLibraryPreviewInfo b{font-size:13px!important}
  html body .proLibraryPreviewInfo span,html body .proLibraryPreviewInfo p{font-size:11px!important}
}