/* beat-editor-capcut.css — phone layout for the beat editor, modelled on
 * CapCut (owner, phone task 160, 2026-10-13: "the current mobile version is
 * not good ... everything needs to fit properly").
 *
 * Phones only (< 900px); the desktop grid in beat-editor.html is untouched.
 * Top to bottom, one screen, no page scroll:
 *   header      close · Save
 *   stage       the preview, as big as the space allows (was capped at 210px)
 *   transport   time · play · fullscreen
 *   timeline    ruler, clip track, sound track - right under the player
 *   tool bar    every tool in one row that scrolls sideways, like CapCut
 * Tool sheets slide up over the timeline with a light dim, so the preview
 * stays visible while picking. Loaded AFTER the page's inline <style>.
 */
@media (max-width: 899px) {
  /* ── one-screen column ── */
  .app { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important; }
  .editor-main { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .hdr { padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 6px !important; }

  /* ── stage: fill the free space, keep the frame's shape ── */
  .stage-wrap { flex: 1 1 auto !important; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 12px 0 !important; }
  .stage {
    height: 100% !important; width: auto !important; max-width: 100%; max-height: 100%;
    aspect-ratio: 9 / 16; border-radius: 10px;
  }
  .app[data-fmt="horizontal"] .stage { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

  /* ── media chips: the empty-state call to action; once an edit exists the
     tool bar carries Video / Audio / Edit, so the row goes (it also clipped
     "Replace video" / "Replace song" to "Replace ...") ── */
  .add-row { margin: 10px 12px 0 !important; flex-wrap: nowrap !important; }
  .add-chip { flex: 1 1 0; min-width: 0; }
  .editor-main:has(.tl-wrap.show) .add-row { display: none !important; }

  /* ── transport: time on the left, play in the middle ── */
  .transport { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 8px 14px 6px !important; }
  .transport .t-time { justify-self: start; font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; color: #c3cad8; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .transport #btnPrimary { justify-self: center; width: 44px; height: 44px; }
  .transport .t-right { justify-self: end; display: flex; gap: 8px; }
  .transport #btnEffectsFab { display: none; }   /* Effects lives in the tool bar now */
  .transport .play-coach { top: -40px; }

  /* ── timeline: directly under the player, three tidy lanes ── */
  .editor-main .tl-wrap { margin-top: 0 !important; padding: 2px 0 6px !important; }
  .tl-rail-track { min-height: 0 !important; padding: 0 16px 2px 12px !important; }
  .tl-ticks { height: 18px !important; }
  .tl-ticks .tick.sec b { font-size: 8px; bottom: 9px; color: #7f8aa0; }
  .tl-strip, .tl-clip, .tl-add, .tl-tx-gap { height: 52px !important; }
  .tl-clip { border-right: 2px solid #000 !important; }
  .tl-clip:first-of-type { border-radius: 8px 0 0 8px; }
  .tl-clip:last-of-type { border-radius: 0 8px 8px 0; }
  .tl-clip.selected { outline: 2px solid #fff; outline-offset: -2px; }
  /* The swap badge on every tile read as clutter; show it on the picked tile only. */
  .tl-clip .tl-swap { opacity: 0; transition: opacity .15s ease; }
  .tl-clip.selected .tl-swap { opacity: 1; }
  .tl-clip .dur { font-size: 7.5px; opacity: .85; }
  .tl-audio {
    display: flex; align-items: center; gap: 6px; height: 22px; margin-top: 5px; padding: 0 8px;
    border-radius: 6px; background: rgba(63, 203, 126, .14); border: 1px solid rgba(63, 203, 126, .35);
    color: #b8f0cf; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; box-sizing: border-box;
  }
  .tl-audio span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tl-audio svg { flex: 0 0 auto; }

  /* ── tool bar: every tool, one row, scrolls sideways ── */
  .dock {
    display: flex !important; justify-content: flex-start !important; gap: 0 !important;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    background: #0b0d14 !important; border-top: 1px solid rgba(255, 255, 255, .06) !important;
    scroll-snap-type: x proximity;
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock .dk { flex: 0 0 64px !important; min-width: 64px; scroll-snap-align: start; gap: 4px; font-size: 10.5px !important; font-weight: 600 !important; color: #c3cad8; text-shadow: none; }
  .dock .dk-box { width: 30px !important; height: 30px !important; border-radius: 9px; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #eef2f8; }
  .dock .dk-box svg { width: 22px; height: 22px; }
  .dock .dk.active { color: #fff !important; }
  .dock .dk.active .dk-box { background: rgba(59, 130, 246, .2) !important; color: #8db8ff !important; box-shadow: none !important; }
  .dock [data-replace] { display: flex !important; }
  .dock .dk.dim { opacity: .45; }

  /* ── sheets: slide up over the timeline; the preview stays visible ── */
  .sheet { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important; max-height: 52% !important; border-radius: 16px 16px 0 0 !important; }
  .sheet.tall { max-height: 72% !important; }
  .scrim { background: rgba(2, 4, 10, .22) !important; }
}

/* Very short phones (SE / landscape-ish): give the stage priority. */
@media (max-width: 899px) and (max-height: 700px) {
  .tl-ticks { height: 14px !important; }
  .tl-strip, .tl-clip, .tl-add, .tl-tx-gap { height: 44px !important; }
  .tl-audio { height: 18px; margin-top: 3px; }
}

@media (max-width: 899px) {
  /* A closed sheet parks just below its open spot; with the slimmer tool bar
     its rounded top peeked out as a grey tab. Hide it once it has slid away. */
  .sheet:not(.open) { visibility: hidden; transform: translateY(calc(100% + 160px)) !important;
    transition: transform .18s cubic-bezier(.2,.8,.25,1), visibility 0s linear .18s; }
  .sheet.open { visibility: visible; transition: transform .18s cubic-bezier(.2,.8,.25,1), visibility 0s; }
  body.sheet-instant .sheet { transition: none !important; }

  /* Empty state: three chips must fit at 375-390px without clipping "Choose stock". */
  .add-chip { gap: 6px !important; padding: 0 8px !important; font-size: 12px !important; }
  .add-chip span { overflow: visible !important; text-overflow: clip !important; }

  /* Tool bar: 58px slots so a seventh tool shows half - the cue that it scrolls. */
  .dock .dk { flex-basis: 58px !important; min-width: 58px !important; }
}

@media (max-width: 899px) {
  /* The message pop-up hid by sliding under the old, taller dock; above the
     slimmer tool bar its empty box showed as a grey tab. Fade it out instead. */
  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important; }
  .toast:not(.show) { opacity: 0; visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .2s ease, visibility 0s linear .3s; }
  .toast.show { opacity: 1; visibility: visible; transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .2s ease, visibility 0s; }
}