/* ═══ Phone layout (loads last, wins the cascade). Desktop is untouched.
   The editors restack into a column: canvas on top, active panel and
   properties under it, the tool rail pinned to the bottom like a tab bar.
   !important beats the inline widths the desktop splitters persist. ═══ */

@media (max-width: 820px) {

  /* ── app chrome ── */
  .topbar { padding: 0 8px; gap: 7px; }
  .topbar .logo span:not(.mark) { display: none; }   /* keep the mark, drop the word */
  .storage-meter { width: 96px; }
  .home-inner { padding: 16px 12px 40px; }
  .settings-inner { padding: 16px 12px 40px; }
  .ai-form-row { grid-template-columns: 1fr; gap: 4px; }
  .ai-conn-sub .ai-url { max-width: 160px; }

  /* ── editor top bar: compact enough to fit without scrolling ── */
  .ed-top { overflow-x: auto; overflow-y: hidden; gap: 3px; padding: 8px 6px; }
  .ed-top .btn { padding: 7px 9px; }
  .ed-top .btn-icon { padding: 7px; }
  .ed-top > span:not([class]) { display: none; }   /* the desktop 8px spacer */
  .ed-top > * { flex: none; }
  .ed-top .title-input { display: none; }   /* the pencil opens rename */
  .ed-top .ed-rename { display: inline-flex; }
  .ed-top .ed-zoom, .ed-top .zoom-lbl { display: none; }   /* pinch zooms */
  .ed-top .bt { display: none; }            /* icon-only buttons... */
  .ed-top .bt-keep { display: inline; }     /* ...except Export */
  .ed-top .select { max-width: 96px !important; font-size: 12px; }   /* !important: the select carries an inline 230px maxWidth */
  .ed-top .ed-toreel { display: none; }
  .ed-top .ve-fmt-lbl { display: none; }   /* the format select speaks for itself */
  .ed-top .select.ve-fmt { max-width: 132px !important; }   /* "Landscape" must not truncate */
  .ed-top .ve-render-full { display: none; }   /* long render label swaps for the short one */
  .ed-top .bt-short { display: inline; }   /* niche on a phone; still in the video editor itself */

  /* ── video editor shell restacks; the image editor keeps its row and turns
        its side panels into hidden drawers (below) ── */
  .ve-main { flex-direction: column; overflow-y: auto; }
  .ed-main { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .splitter { display: none; }

  .ed-rail {
    order: 10; position: sticky; bottom: 0; z-index: 6;
    flex-direction: row; width: 100% !important; height: auto;
    padding: 3px 6px calc(3px + env(safe-area-inset-bottom)); gap: 0;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-top: 1px solid var(--stroke-soft);
    background: var(--bg-1);
  }
  .ed-rail button { width: auto; min-width: 56px; flex: none; padding: 8px 4px 7px; }
  /* image editor only: the rail bar overlays fixed at the bottom */
  .ed-main > .ed-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; }

  /* image editor: the CANVAS owns the screen. Both side panels are drawers,
     hidden until the floating toggles (or a rail tab) open them. */
  .ed-main > .ed-panel, .ed-main > .ed-props {
    position: fixed; top: var(--vvt, 0px); bottom: auto;
    height: calc(var(--vvh, 100vh) - 54px - env(safe-area-inset-bottom));
    width: min(320px, 86vw) !important; z-index: 71;
    transition: transform var(--dur-med) ease, visibility var(--dur-med);
    box-shadow: var(--shadow-2);
  }
  .ed-main > .ed-panel { left: 0; border-right: 1px solid var(--stroke-soft); transform: translateX(-105%); visibility: hidden; }
  .ed-main > .ed-props { right: 0; left: auto; border-left: 1px solid var(--stroke-soft); transform: translateX(105%); visibility: hidden; }
  .editor.show-left  .ed-main > .ed-panel { transform: translateX(0); visibility: visible; }
  .editor.show-right .ed-main > .ed-props { transform: translateX(0); visibility: visible; }
  /* chevron over the rail: there are more tabs than the bar shows */
  .editor .rail-more {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 73;
    width: 34px; height: 54px; border: 0; cursor: pointer; color: var(--text-1);
    background: linear-gradient(to right, transparent, var(--bg-1) 45%);
  }
  .editor .rail-more.hidden { display: none; }
  /* the two floating toggles: translucent, above the rail, over the artwork */
  .ed-drawer-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 73;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--stroke);
    background: color-mix(in srgb, var(--bg-1) 62%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--text-2); box-shadow: var(--shadow-1); cursor: pointer;
  }
  /* while a drawer is open the toggles disappear — the drawer owns the
     screen, and tapping anywhere outside it closes it (wired in both editors) */
  .editor.show-left .ed-drawer-btn, .editor.show-right .ed-drawer-btn { display: none; }
  .ed-drawer-btn.left { left: 12px; }
  .ed-drawer-btn.right { right: 12px; }
  .editor.show-left .ed-drawer-btn.left, .editor.show-right .ed-drawer-btn.right { color: var(--accent); border-color: var(--accent); }
  /* video editor panels keep the stacked flow those drawers replaced */
  .ve-main .ed-props { order: 2; width: 100% !important; border-left: 0; border-top: 1px solid var(--stroke-soft); }
  .ve-main .ed-panel { order: 3; width: 100% !important; max-height: none; border-right: 0; border-top: 1px solid var(--stroke-soft); }

  /* video editor: preview + transport + timeline own the whole screen, the
     side panels are drawers exactly like the image editor. flex:1 stage means
     the preview grows to whatever the timeline leaves it. */
  .ve-main { flex-direction: row; overflow: hidden; padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .ve-main > .ed-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; }
  .ve-center { min-width: 0; }
  .ve-stage { min-height: 0; position: relative; }
  /* inside the video editor the toggles anchor to the stage corners, so they
     never sit on top of the transport, tools or timeline */
  .ve-stage .ed-drawer-btn { position: absolute; bottom: 10px; }
  .ve-dock { height: 216px !important; }   /* the timeline is the editor: give it room */
  .ve-track { height: 62px; }
  /* ── phone timeline: clips first, no dead rows ─────────────────────────────
     Desktop stacks three always-visible empty layer lanes ABOVE the clips,
     which on a phone pushed the clips to the bottom and the audio lane below
     the fold. Reorder: ruler, CLIPS (the thing you actually edit), overlay
     pills, one layer lane, audio — and hide layer lanes that are both empty
     and not the drop target, so nothing burns vertical space doing nothing. */
  .ve-tl-inner { display: flex; flex-direction: column; }
  .ve-ruler { order: 0; height: 18px; }
  .ve-track { order: 1; }
  .ve-subtrack { order: 2; }
  .ve-tl-inner > .ve-lanes:has(.type-layer) { order: 3; margin-top: 5px; }
  .ve-tl-inner > .ve-lanes:has(.type-audio) { order: 4; margin-top: 5px; }
  .ve-lanes { gap: 4px; }
  .ve-lane { height: 25px; }
  .ve-lanes .ve-lane.type-layer:not(:has(.ve-pill)):not(:first-child) { display: none; }
  .ve-tools { overflow-x: auto; }
  .ve-tools .btn { flex: none; }
  .ve-tools .bt { display: none; }         /* icon-only tools on a phone */
  /* three tabs do not need a scroll layout: center them like a tab bar */
  .ve-main > .ed-rail { justify-content: center; }
  .fx-row input[type="range"].range { width: 64px; }
  /* the transport reads as one glass strip over the seam */
  .ve-transport {
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--bg-1) 82%, transparent);
    border-top: 1px solid var(--stroke-soft);
  }
  .ve-main > .ed-panel, .ve-main > .ed-props {
    position: fixed; top: var(--vvt, 0px); bottom: auto;
    height: calc(var(--vvh, 100vh) - 54px - env(safe-area-inset-bottom));
    width: min(320px, 86vw) !important; z-index: 71;
    transition: transform var(--dur-med) ease, visibility var(--dur-med);
    box-shadow: var(--shadow-2); max-height: none;
  }
  .ve-main > .ed-panel { left: 0; border-right: 1px solid var(--stroke-soft); transform: translateX(-105%); visibility: hidden; }
  .ve-main > .ed-props { right: 0; left: auto; border-left: 1px solid var(--stroke-soft); transform: translateX(105%); visibility: hidden; }
  .editor.show-left  .ve-main > .ed-panel { transform: translateX(0); visibility: visible; }
  .editor.show-right .ve-main > .ed-props { transform: translateX(0); visibility: visible; }
  /* collapse is a desktop gesture: inside a drawer the panel is always the
     full panel. Selectors outweigh editor-video.css's display:none/width:auto */
  .ve-main > .ed-panel.ed-panel.collapsed { display: flex; }
  .ve-main > .ed-props.ve-props.collapsed { width: min(320px, 86vw) !important; }
  .ve-main > .ed-props.ve-props.collapsed .tool-panel { display: flex; }
  /* the macOS-style side tool rail keeps its desktop shape inside the drawer:
     vertical 64px rail on the right, tool panel filling the rest */
  .tool-panel { max-height: none; flex: 1; }

  /* touch targets */
  .btn-sm { min-height: 32px; }
  .layer-x { padding: 6px; }
  .ve-clip .grip, .ve-pill .pgrip { width: 16px; }

  /* hover-only affordances are always visible on touch */
  .project-card .menu-btn, .media-card .menu-btn, .media-mini-grid .cell .cell-ov { opacity: 1; }

  /* modals hug the small screen */
  .modal-veil { padding: 8px; }
  .modal.md-xl { height: 96vh; }
}