/* W22 app-only phone layout for Adventure Studio */
@media (max-width:760px){
  .ab-photo-studio,.ab-video-studio{margin:8px 0!important;border-radius:0!important;min-height:calc(100svh - 74px);background:#0b1113!important}
  .ab-photo-head,.ab-video-head{padding:10px 12px!important;min-height:55px}.ab-photo-head h2,.ab-video-head h2{font-size:1rem!important}.ab-photo-head p,.ab-video-head p,.ab-photo-badge,.ab-video-badge,.ab-studio-note{display:none!important}
  .ab-studio-switch{margin:0!important;padding:6px 8px!important;border-radius:0!important;position:sticky;top:0;z-index:30;background:#0b1113!important}.ab-studio-switch a{min-height:36px!important;padding:6px 10px!important;font-size:.75rem}
  .ab-photo-shell{display:flex!important;flex-direction:column!important;min-height:0!important}.ab-photo-canvas-wrap{order:1!important;min-height:0!important;height:42svh!important;padding:8px!important;position:sticky!important;top:49px!important;z-index:12!important;background:#080d0f!important}.ab-photo-canvas-wrap canvas{max-height:40svh!important}.ab-photo-tools,.ab-photo-side{order:2!important;padding:0 9px 66px!important;border:0!important;background:#10181b!important;display:block!important}.ab-photo-tools>h3,.ab-photo-side>h3,.ab-photo-upload{display:none!important}
  .ab-photo-group{display:none!important;padding:10px 3px!important;border:0!important;max-height:30svh;overflow:auto}.ab-photo-group[data-mobile-active="true"]{display:grid!important}.ab-photo-group label{font-size:.72rem!important}.ab-photo-row,.ab-photo-grid2{gap:5px!important}.ab-photo-btn{min-height:34px!important;font-size:.7rem!important}
  .ab-mobile-editor-dock{position:sticky;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:6px 5px calc(6px + env(safe-area-inset-bottom));background:rgba(7,13,15,.98);border-top:1px solid #33434a}.ab-mobile-editor-dock button{min-width:0;border:0;background:transparent;color:#c7d0d3;padding:4px 1px;font-size:.56rem;display:grid;gap:2px;justify-items:center}.ab-mobile-editor-dock button span{font-size:1rem}.ab-mobile-editor-dock button.is-active{color:#f08a35}
  .ab-video-layout{display:flex!important;flex-direction:column!important;min-height:0!important}.ab-video-main{order:1!important;min-width:0!important}.ab-video-preview-wrap{position:sticky;top:49px;z-index:12;background:#080d0f;padding:7px!important}.ab-video-preview-frame{max-height:37svh!important;min-height:32svh!important}.ab-video-controls{gap:5px!important;padding:5px!important}.ab-video-time{font-size:.65rem!important}.ab-video-timeline-wrap{padding:7px!important;max-height:25svh;overflow:auto}.ab-video-multitracks{max-height:18svh;overflow:auto!important}
  .ab-video-left,.ab-video-right{order:2!important;padding:0 9px 66px!important;border:0!important;background:#10181b!important;display:block!important}.ab-video-left>h3,.ab-video-right>h3,.ab-video-upload{display:none!important}.ab-video-group{display:none!important;padding:9px 2px!important;border:0!important;max-height:29svh;overflow:auto}.ab-video-group[data-mobile-active="true"]{display:grid!important}.ab-video-grid2{gap:5px!important}.ab-video-btn{min-height:34px!important;font-size:.69rem!important}.ab-video-track-controls{display:none!important}
  .ab-video-overlay-item{touch-action:none}
}


/* W23 — APP ONLY: compact phone-first Adventure Studio */
@media (max-width:760px){
  /* Keep editor inside one phone viewport */
  .ab-photo-studio,
  .ab-video-studio{
    height:calc(100svh - 74px)!important;
    min-height:0!important;
    max-height:calc(100svh - 74px)!important;
    overflow:hidden!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    background:#091012!important;
  }

  /* Compact top bar */
  .ab-photo-head,
  .ab-video-head{
    flex:0 0 46px!important;
    min-height:46px!important;
    padding:7px 10px!important;
    border-bottom:1px solid #2d3b40!important;
  }
  .ab-photo-head h2,
  .ab-video-head h2{font-size:.9rem!important;line-height:1.05!important}
  .ab-photo-head p,
  .ab-video-head p,
  .ab-photo-badge,
  .ab-video-badge,
  .ab-studio-note{display:none!important}

  .ab-studio-switch{
    flex:0 0 38px!important;
    min-height:38px!important;
    position:static!important;
    margin:0!important;
    padding:4px 7px!important;
    gap:5px!important;
    background:#0d1518!important;
    border-radius:0!important;
  }
  .ab-studio-switch a{
    min-height:30px!important;
    padding:4px 7px!important;
    font-size:.68rem!important;
  }

  /* PHOTO EDITOR */
  .ab-photo-shell{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }
  .ab-photo-canvas-wrap{
    grid-row:1!important;
    order:0!important;
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:5px!important;
    overflow:hidden!important;
    background:#070c0e!important;
  }
  .ab-photo-canvas-wrap canvas{
    max-width:100%!important;
    max-height:100%!important;
    width:auto!important;
    height:auto!important;
  }
  .ab-photo-empty{
    inset:6px!important;
    font-size:.78rem!important;
  }
  .ab-photo-before{
    left:8px!important;
    bottom:8px!important;
    min-height:28px!important;
    padding:4px 7px!important;
    font-size:.62rem!important;
  }
  .ab-photo-cursor-readout{
    right:8px!important;
    bottom:8px!important;
    padding:4px 7px!important;
    font-size:.55rem!important;
  }

  /* Hide old side columns as full panels; use only one compact tray */
  .ab-photo-tools,
  .ab-photo-side{
    grid-row:2!important;
    order:0!important;
    display:contents!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .ab-photo-tools>h3,
  .ab-photo-side>h3,
  .ab-photo-upload{display:none!important}

  .ab-photo-group{
    display:none!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:54px!important;
    z-index:35!important;
    max-height:31svh!important;
    overflow:auto!important;
    padding:8px 9px!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #334249!important;
    background:#10181b!important;
    box-shadow:0 -12px 28px rgba(0,0,0,.4)!important;
  }
  .ab-photo-group[data-mobile-active="true"]{display:grid!important}
  .ab-photo-group-title{font-size:.72rem!important}
  .ab-photo-group label{font-size:.64rem!important;gap:3px!important}
  .ab-photo-group input[type=range]{height:18px!important}
  .ab-photo-group input[type=text],
  .ab-photo-group select{min-height:30px!important;padding:5px 7px!important;font-size:.68rem!important}
  .ab-photo-row,.ab-photo-grid2{gap:4px!important}
  .ab-photo-btn{min-height:29px!important;padding:4px 5px!important;font-size:.62rem!important;border-radius:7px!important}
  .ab-photo-tool-tabs{gap:4px!important}
  .ab-photo-help,.ab-photo-status,.ab-photo-coming{font-size:.6rem!important;line-height:1.25!important}
  .ab-photo-presets,.ab-photo-smart-grid{gap:4px!important}

  /* VIDEO EDITOR */
  .ab-video-layout{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }
  .ab-video-main{
    grid-row:1!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }
  .ab-video-preview-wrap{
    position:relative!important;
    top:auto!important;
    padding:5px!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#070c0e!important;
  }
  .ab-video-preview-frame{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
  }
  .ab-video-preview-frame video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .ab-video-controls{
    min-height:34px!important;
    padding:3px 5px!important;
    gap:3px!important;
  }
  .ab-video-controls button{min-width:28px!important;min-height:28px!important;padding:3px!important}
  .ab-video-time{font-size:.56rem!important}

  /* timeline kept but much smaller */
  .ab-video-timeline-wrap{
    max-height:18svh!important;
    min-height:74px!important;
    padding:4px!important;
    overflow:auto!important;
    border-top:1px solid #28383e!important;
    background:#0d1518!important;
  }
  .ab-video-timeline-wrap>header{display:none!important}
  .ab-video-tracks,
  .ab-video-multitracks{max-height:13svh!important;overflow:auto!important}
  .ab-video-mtrack{grid-template-columns:58px minmax(330px,1fr)!important;min-height:34px!important;gap:4px!important}
  .ab-video-mtrack-label{font-size:.52rem!important;padding:4px!important}
  .ab-video-mtrack-lane{min-height:34px!important}
  .ab-video-mclip,.ab-video-overlay-block{height:26px!important;min-width:72px!important;font-size:.52rem!important;padding:3px 4px!important;margin:3px 1px!important}

  .ab-video-left,
  .ab-video-right{
    grid-row:2!important;
    display:contents!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .ab-video-left>h3,
  .ab-video-right>h3,
  .ab-video-upload{display:none!important}
  .ab-video-group{
    display:none!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:54px!important;
    z-index:35!important;
    max-height:31svh!important;
    overflow:auto!important;
    padding:8px 9px!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #334249!important;
    background:#10181b!important;
    box-shadow:0 -12px 28px rgba(0,0,0,.4)!important;
  }
  .ab-video-group[data-mobile-active="true"]{display:grid!important}
  .ab-video-group label{font-size:.64rem!important;gap:3px!important}
  .ab-video-grid2{gap:4px!important}
  .ab-video-btn{min-height:29px!important;padding:4px 5px!important;font-size:.62rem!important;border-radius:7px!important}
  .ab-video-help,.ab-video-status{font-size:.6rem!important;line-height:1.25!important}
  .ab-video-track-controls{display:none!important}

  /* Shared bottom editor dock */
  .ab-mobile-editor-dock{
    flex:0 0 54px!important;
    height:54px!important;
    min-height:54px!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:50!important;
    grid-template-columns:repeat(6,1fr)!important;
    gap:1px!important;
    padding:3px 3px calc(3px + env(safe-area-inset-bottom))!important;
    background:#070d0f!important;
    border-top:1px solid #34434a!important;
  }
  .ab-mobile-editor-dock button{
    min-width:0!important;
    min-height:44px!important;
    padding:2px 0!important;
    font-size:.5rem!important;
    gap:1px!important;
  }
  .ab-mobile-editor-dock button span{font-size:.92rem!important}
  .ab-mobile-editor-dock button.is-active{color:#f08a35!important}

  /* when no tray is open, preview gets maximum space */
  .ab-photo-studio[data-mobile-tray="closed"] .ab-photo-group,
  .ab-video-studio[data-mobile-tray="closed"] .ab-video-group{display:none!important}

  /* Very small phones */
  @media (max-height:700px){
    .ab-photo-head,.ab-video-head{flex-basis:40px!important;min-height:40px!important}
    .ab-studio-switch{flex-basis:34px!important;min-height:34px!important}
    .ab-mobile-editor-dock{height:48px!important;min-height:48px!important}
    .ab-photo-group,.ab-video-group{bottom:48px!important;max-height:27svh!important}
    .ab-video-timeline-wrap{max-height:15svh!important;min-height:60px!important}
  }
}