/* ==========================================================================
   Mobile Create Video — phone-native rebuild of the Create Video flow.
   Loaded ONLY by video.html. Mirrors mobile-create.css: on <=600px the desktop
   header/nav/main are swapped for a paper-themed single-scroll shell with the
   shared iOS-style bottom tab bar (Video active). The real composer sections
   (#inv-card, #video-preview-card, #video-history-panel) are relocated into the
   shell by video.html's inline JS, so all the clip-upload / generate / render /
   post / history logic is reused untouched — this file only re-lays-it-out.

   Namespace: .mv-*  (Mobile Video)  · palette = warm-paper (light only by design)
   ========================================================================== */

.mv-shell { display: none; }

@media (max-width: 600px) {
  body > header,
  body > nav.main-nav,
  body > main { display: none !important; }

  .mv-shell {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 30;
    background: #F5F2EC; color: #1A1A18;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    overscroll-behavior: none;
  }
  .mv-screen { display: none; flex-direction: column; flex: 1; min-height: 0; }
  .mv-screen.is-active { display: flex; }

  /* ── Header ───────────────────────────────────────────────────────────── */
  .mv-head {
    flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 18px 14px;
    border-bottom: 1px solid #E6E0D4;
  }
  .mv-title { font: 800 23px system-ui; letter-spacing: -.5px; }
  .mv-title span { color: #A8843A; }
  .mv-sub { font: 500 12px system-ui; color: #888; margin-top: 2px; }
  .mv-head-actions { display: flex; align-items: center; gap: 9px; padding-top: 3px; }
  .mv-iconbtn {
    width: 32px; height: 32px; border-radius: 9px; background: #FFFFFF;
    border: 1px solid #DDD8CE; display: flex; align-items: center; justify-content: center;
    color: #6B6B64; cursor: pointer; flex-shrink: 0;
  }
  .mv-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #C9A96E, #A8843A);
    display: flex; align-items: center; justify-content: center;
    font: 700 12px system-ui; color: #fff; flex-shrink: 0;
  }

  /* ── Scrolling body + section dividers ────────────────────────────────── */
  .mv-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px; display: flex; flex-direction: column; gap: 14px;
  }
  .mv-sectlabel {
    display: flex; align-items: center; gap: 8px;
    font: 800 16px system-ui; letter-spacing: -.3px; color: #1A1A18;
    margin-top: 8px; padding-top: 16px; border-top: 1px solid #E6E0D4;
    scroll-margin-top: 8px;
  }
  .mv-sectlabel-check {
    width: 22px; height: 22px; border-radius: 50%; background: #2A7A4F;
    display: none; align-items: center; justify-content: center; flex-shrink: 0;
  }

  /* Clips & Style collapses until a vehicle is picked. */
  .mv-opts-hint {
    font: 500 12.5px system-ui; color: #9a937f; text-align: center;
    background: #FFFFFF; border: 1px dashed #DDD8CE; border-radius: 12px; padding: 15px 13px;
  }
  .mv-opts-body { display: none; flex-direction: column; gap: 14px; }
  .mv-shell.mv-has-vehicle .mv-opts-hint { display: none; }
  .mv-shell.mv-has-vehicle .mv-opts-body { display: flex; }
  .mv-shell.mv-has-vehicle #mv-clips-anchor .mv-sectlabel-check { display: flex; }

  /* Relocated sections fill the column; their flex gap owns vertical rhythm. */
  #mv-inv-mount, #mv-clips-mount, #mv-history-mount { display: flex; flex-direction: column; }
  #mv-inv-mount > *, #mv-clips-mount > *, #mv-history-mount > * { margin: 0 !important; width: 100%; max-width: 100%; }

  /* Strip the relocated cards' own outer chrome — the body already pads. */
  #mv-inv-mount .v-card,
  #mv-clips-mount .cv-card,
  #mv-history-mount .history-panel,
  #mv-history-mount .ph-card {
    background: transparent; border: none; border-radius: 0;
    padding: 0; box-shadow: none; overflow: visible;
    display: block !important;   /* panel ships display:none; always show the section on mobile */
  }

  /* ── Inventory picker rows (relocated #inv-card) ──────────────────────── */
  #mv-inv-mount .v-search-wrap,
  #mv-inv-mount .v-search {
    display: flex; align-items: center; gap: 9px; background: #FFFFFF;
    border: 1px solid #E6E0D4; border-radius: 11px; padding: 11px 13px;
  }
  #mv-inv-mount .v-inv-list { display: flex; flex-direction: column; gap: 8px; }
  #mv-inv-mount .v-inv-row {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 12px;
  }
  #mv-inv-mount .v-inv-thumb { width: 48px; height: 37px; border-radius: 8px; }

  /* ── Composer (relocated #video-preview-card): full-width steps ───────── */
  #mv-clips-mount .cv-step {
    background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 13px;
    padding: 13px; margin: 0;
  }
  /* Clip slots → 3-up vertical (9:16) grid like the design. */
  #mv-clips-mount .cv-clip-strip,
  #mv-clips-mount .v-clip-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-wrap: wrap;
  }
  #mv-clips-mount .cv-chip-row { flex-wrap: wrap; }
  /* Generate button full width. */
  #mv-clips-mount .cv-cta { width: 100%; justify-content: center; }
  /* Preview frame centered, capped so it fits the column. */
  #mv-clips-mount .cv-preview,
  #mv-clips-mount .vr-frame { margin-left: auto; margin-right: auto; max-width: 100%; }

  /* ── Video Post History (relocated #video-history-panel) — reuse the
     Create-Posts ph-* mobile layout. ───────────────────────────────────── */
  #mv-history-mount .ph-head { flex-wrap: wrap; gap: 12px; padding: 0 0 14px; }
  #mv-history-mount .ph-filter {
    flex-wrap: wrap; gap: 10px; padding: 12px 0; background: transparent;
    border-bottom: 1px solid #f1ece2;
  }
  #mv-history-mount .ph-tabs { flex: 1 1 100%; }
  #mv-history-mount .ph-filter-right { width: 100%; gap: 9px; }
  #mv-history-mount .ph-search { flex: 1 1 auto; width: auto; max-width: none; }
  #mv-history-mount .ph-list { padding: 14px 0 6px; gap: 12px; }
  #mv-history-mount .ph-post {
    position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "thumb info" "caption caption" "toggle toggle" "actions actions";
    column-gap: 11px; row-gap: 8px; padding: 12px; border-radius: 14px;
  }
  #mv-history-mount .ph-info { display: contents; }
  #mv-history-mount .ph-thumb { grid-area: thumb; width: 96px; height: 72px; border-radius: 10px; }
  #mv-history-mount .ph-row1 { grid-area: info; flex-direction: column; align-items: stretch; gap: 4px; }
  #mv-history-mount .ph-name { font-size: 13px; font-weight: 700; white-space: normal; }
  #mv-history-mount .ph-price { font-size: 14px; }
  #mv-history-mount .ph-row1-meta { flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  #mv-history-mount .ph-overflow { position: absolute; top: 10px; right: 10px; }
  #mv-history-mount .ph-caption { grid-area: caption; margin-top: 0; padding-right: 0; max-width: none; font-size: 11.5px; -webkit-line-clamp: 2; }
  #mv-history-mount .ph-caption-toggle { grid-area: toggle; margin-top: 0; font-size: 11px; }
  #mv-history-mount .ph-actions { grid-area: actions; margin-top: 2px; padding-top: 0; gap: 8px; flex-wrap: wrap; }
  #mv-history-mount .ph-pagination { flex-wrap: wrap; gap: 10px; padding: 14px 0 4px; }

  /* ── Bottom tab bar ───────────────────────────────────────────────────── */
  .mv-tabbar {
    flex-shrink: 0; display: flex; align-items: center;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    border-top: 1px solid #DDD8CE; background: #FFFFFF;
  }
  .mv-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 6px 0; background: none; border: none; cursor: pointer;
    text-decoration: none; position: relative; color: #AAAAAA; font: 600 10px system-ui;
  }
  .mv-tab svg { stroke: currentColor; }
  .mv-tab.is-active { color: #C9A96E; }
  .mv-tab-badge {
    position: absolute; top: -3px; right: 50%; margin-right: -16px;
    min-width: 15px; height: 15px; padding: 0 4px; background: #C0392B;
    color: #fff; font: 700 9px system-ui; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; border: 1.5px solid #FFFFFF;
  }
}