/* ═════════ MagicMotion — MOBILE layout (Chrome on phone) ═════════
   Active only at narrow viewports (max-width 820px).
   Chrome's "Desktop site" mode requests a WIDE viewport, so this query does
   NOT match there — the desktop layout stays exactly as-is.
   This file only re-flows the existing DOM (same rail buttons, same inspector,
   same timeline) into the app-style mobile UI from the mockup:
   compact app bar → 16:9 canvas → horizontal tool row → timeline strip →
   bottom nav (Canvas / Timeline / Project / Settings).
   Behaviour (tabs, bottom sheets) lives in js/mobile.js. */
#mnav{display:none}

@media (max-width:820px){
  :root{ --topbar-h:52px; }
  body{ touch-action:manipulation; }

  /* app leaves 58px at the bottom for the fixed bottom nav */
  #app{ height:calc(100dvh - 58px); grid-template-rows:var(--topbar-h) minmax(0,1fr) auto; }

  /* ── top bar: logo, project name, undo, redo, play, export only ── */
  #topbar{ padding:0 8px; gap:4px; overflow-x:auto; scrollbar-width:none; }
  #topbar::-webkit-scrollbar{ display:none; }
  #zoomLbl,#btnFitAll,#btnFitSel,#btnTL,#btnRec,#btnProject,#btnSettings,#btnHelp,#saveStatus{ display:none; }
  #projName{ max-width:120px; font-size:13px; padding:5px 6px; }
  .tb-btn{ flex:none; width:36px; height:36px; }
  .tb-btn.primary{ padding:0 12px; height:36px; }
  .tb-logo span{ max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ── workrow becomes a vertical stack: canvas, then tool row ── */
  #workrow{ display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
  #canvaswrap{ flex:none; width:calc(100% - 16px); margin:8px 8px 4px; aspect-ratio:16/9;
    border-radius:12px; overflow:hidden; }
  #stage{ touch-action:none; }
  #rail{ flex:none; flex-direction:row; width:100%; border-right:none;
    border-top:1px solid var(--border); padding:6px 4px; overflow-x:auto; overflow-y:hidden;
    gap:4px; scrollbar-width:none; }
  #rail::-webkit-scrollbar{ display:none; }
  .rail-btn{ flex:none; width:52px; height:52px; }
  .rail-btn .lbl{ font-size:9px; }
  .rail-spacer{ display:none; }

  /* ── inspector + drawer become bottom sheets (hidden until .m-open) ── */
  #inspector, #drawer{
    position:fixed; left:0; right:0; bottom:58px; z-index:200;
    width:auto; max-height:62dvh; border:1px solid var(--border); border-bottom:none;
    border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.55);
    transform:translateY(calc(100% + 60px)); transition:transform .25s ease;
    overflow-y:auto; padding-top:6px;
  }
  #inspector.m-open, #drawer.m-open{ transform:none; }
  #drawer[hidden]{ display:none; }
  .m-sheet-bar{ position:sticky; top:0; z-index:2; display:flex; align-items:center;
    justify-content:center; height:26px; margin:-6px -12px 4px; background:var(--panel); }
  .m-sheet-bar .m-grab{ width:40px; height:4px; border-radius:2px; background:#3A4150; }
  .m-sheet-bar .m-sheet-x{ position:absolute; right:8px; top:0; width:28px; height:26px;
    border-radius:8px; color:var(--text-dim); font-size:14px; line-height:1; }
  .m-sheet-bar .m-sheet-x:hover{ background:var(--hover); color:var(--text); }

  /* ── timeline: compact strip (Simple tiles already are horizontal cards) ── */
  #timeline{ flex:none; }
  #tl-head{ height:34px; padding:0 8px; gap:6px; }
  #tl-head .tl-advctl, #tl-head .tl-zoom, #tl-head .tl-legend, #tl-head #tlCollapse{ display:none; }
  .tl-tabs button{ padding:4px 8px; }
  #tl-simple{ padding:6px 8px; gap:6px; }
  .tl-tile{ width:104px; height:60px; padding:6px 6px 6px 24px; }
  .tl-thumb{ width:34px; height:26px; }
  .tl-add{ width:44px; height:60px; }
  /* Timeline tab expands the timeline for editing */
  body.m-tl #timeline{ height:44dvh; }
  body.m-tl #tl-simple{ flex-wrap:wrap; align-content:flex-start; overflow-y:auto; }

  /* ── bottom nav (mockup: Canvas / Timeline / Project / Settings) ── */
  #mnav{ display:flex; position:fixed; left:0; right:0; bottom:0; height:58px; z-index:150;
    background:var(--panel); border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0px); }
  #mnav button{ flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; color:var(--text-dim); font-size:10px; font-weight:600; }
  #mnav button svg{ width:22px; height:22px; }
  #mnav button.on{ color:var(--accent); }

  /* ── home: single column ── */
  #home .h-grid{ grid-template-columns:1fr; padding:14px; gap:12px; }
  #home .h-top{ padding:12px 14px; flex-wrap:wrap; }
  #home .h-search{ max-width:none; }

  /* ── dialogs become near-full-screen sheets ── */
  .dlg{ width:calc(100vw - 16px) !important; max-height:88dvh; padding:16px; }
  .fb-list{ max-height:52vh; }
}

@media (max-width:400px){
  #projName{ max-width:80px; }
  .tb-logo span{ display:none; }
}