/* ── ClipHunter mobile layer ──────────────────────────────────────
   Loaded after app.css / app-v2.css. Everything here is scoped to
   phones/small tablets (≤760px) so desktop is untouched. The app keeps
   ONE codebase: this file restacks the existing markup.

   NOTE: app-v2.css scopes its rules under `body.ui-v2 …` — overrides
   here must match that specificity or they silently lose.

   Stop Chrome's font inflation ("text autosizing") — it's what made the
   desktop layout explode on phones. Global + harmless on desktop. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* The mobile chrome (channels FAB + sheet handle) is injected by
   app-v2-shim.js on every viewport — CSS decides visibility. */
.mob-fab,.mob-sheet-head,.mob-backdrop{display:none}

@media (max-width:760px){

  /* ── App shell: header on top, main fills, sidebar becomes a sheet ──
     app.js reveals #app-root with inline display:block — the attribute
     selector flips it to a column flex only once it's visible. */
  #app-root[style*="display: block"],
  #app-root[style*="display:block"]{
    display:flex !important;flex-direction:column;height:100dvh;overflow:hidden;
  }
  #app-root header{flex-shrink:0}
  body.ui-v2 .app{
    display:flex !important;flex-direction:column;
    grid-template-columns:none !important;
    flex:1;min-height:0;height:auto !important;
  }
  body.ui-v2 .main{flex:1;min-height:0;width:100%}

  /* ── Header: logo row, then a horizontally-scrollable stats/preset strip ── */
  body.ui-v2 header{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  body.ui-v2 .header-right{margin-left:auto}
  body.ui-v2 .header-center{
    order:10;flex-basis:100%;flex-grow:0;display:flex;align-items:center;gap:14px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    justify-content:flex-start;padding-bottom:2px;
  }
  body.ui-v2 .header-center::-webkit-scrollbar{display:none}
  body.ui-v2 .header-center > div:nth-of-type(5){margin-left:0}
  body.ui-v2 .hstat{flex-shrink:0}
  body.ui-v2 .hpreset-group{flex-shrink:0}
  body.ui-v2 .acct-name{display:none}   /* avatar + plan badge is enough */

  /* ── Sidebar → bottom sheet (replaces the 54px hover-rail, which can't
        work on touch). The .mob-open rules mirror app-v2.css's :hover
        expansion so the sheet always shows full content. ── */
  body.ui-v2 .sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100% !important;height:82dvh;z-index:300;
    background:var(--bg2);border-right:none;border-top:1px solid var(--border2);
    border-radius:14px 14px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);
    transform:translateY(105%);transition:transform .22s ease;
  }
  body.ui-v2 .sidebar.mob-open{transform:translateY(0)}
  body.ui-v2 .sidebar .stab .v2-lbl{opacity:1}
  body.ui-v2 .sidebar .panel > *:not(.ch-list){opacity:1;pointer-events:auto}
  body.ui-v2 .sidebar .ch-item{justify-content:flex-start;padding:8px 10px;gap:10px}
  body.ui-v2 .sidebar .ch-item > *:not(.ch-av):not(.ch-av-wrap){display:flex !important}
  body.ui-v2 .sidebar .ch-item .ch-inf{display:flex;flex-direction:column}
  body.ui-v2 .sidebar .ch-item .ch-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
  body.ui-v2 .sidebar .ch-item .add-btn{display:flex;width:28px;height:28px;font-size:1rem;border-radius:6px}
  /* Side tabs go horizontal across the top of the sheet. */
  body.ui-v2 .sidebar-tabs{flex-direction:row;padding:0 42px 0 4px;overflow-x:auto;scrollbar-width:none}
  body.ui-v2 .stab{flex:1;justify-content:center;padding:10px 4px;gap:7px;font-size:0.85rem;border-left:none;border-bottom:2px solid transparent;min-width:0}
  body.ui-v2 .stab.active{border-left-color:transparent;border-bottom-color:var(--teal)}

  /* ☆ / 🚫 quick actions — real touch targets */
  body.ui-v2 .ev-fav-btn,body.ui-v2 .ev-bl-btn{width:30px;height:30px;font-size:14px;opacity:.8}

  .mob-sheet-head{
    display:flex;align-items:center;justify-content:center;position:relative;
    padding:10px 12px 4px;flex-shrink:0;
  }
  .mob-sheet-head::before{
    content:'';width:42px;height:4px;border-radius:2px;background:var(--border2);
  }
  .mob-sheet-close{
    position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:8px;
    border:1px solid var(--border2);background:var(--bg3);color:var(--text);
    font-size:14px;line-height:1;cursor:pointer;z-index:2;
  }
  .mob-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:290}
  .mob-backdrop.show{display:block}

  /* Floating "Channels" button — the way into trending/monitored/prefs. */
  .mob-fab{
    display:flex;align-items:center;gap:7px;
    position:fixed;right:14px;bottom:14px;z-index:280;
    padding:11px 16px;border-radius:999px;border:1px solid var(--border2);
    background:var(--teal);color:#fff;font-weight:600;font-size:13px;
    box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;
  }

  /* ── Main column ── */
  body.ui-v2 .main-tabs{overflow-x:auto;scrollbar-width:none}
  body.ui-v2 .mtab{padding:10px 12px}
  body.ui-v2 .feed-toolbar{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:8px;padding:6px 10px;margin-bottom:6px;
  }
  body.ui-v2 .feed-toolbar::-webkit-scrollbar{display:none}
  .ft-group,.ft-btn,.ft-select{flex-shrink:0}
  body.ui-v2 .content-area{padding:8px 10px}

  /* ── Cards: avatar | text | hype on row 1, actions get their own row ── */
  body.ui-v2 .ev-card{
    grid-template-columns:auto 1fr auto !important;
    gap:8px 10px;padding:10px 12px;
  }
  body.ui-v2 .ev-actions{
    grid-column:1 / -1;grid-row:2;flex-wrap:wrap;gap:6px;
  }
  body.ui-v2 .ev-btn,body.ui-v2 .clip-lnk{padding:8px 12px}  /* touch targets */
  body.ui-v2 .clip-player-host{grid-column:1 / -1;grid-row:3}
  body.ui-v2 .ev-name{font-size:0.9375rem}

  /* VOD layout already stacks at 820px in app.css — keep its side list short */
  .vod-side{max-height:260px}

  /* ── Modals: full-width sheets ── */
  body.ui-v2 .modal,.modal{min-width:0;width:calc(100vw - 20px);max-width:none;max-height:92dvh}

  /* ── Toasts ── */
  .notif-area{left:12px;right:12px;width:auto;top:8px}

  /* ── Landing polish (desktop rules in app.css mostly hold) ── */
  .landing{padding:16px 18px 48px}
  .landing-nav{padding:14px 0 6px;margin-bottom:20px}
  .landing-hero{padding:10px 4px 36px}
  .landing-hero h1{font-size:28px}
  .lead{font-size:15px}
  .landing-grid{grid-template-columns:1fr}
  .landing-cta-row{flex-direction:column;width:100%}
  .landing-cta-row .btn,.landing-cta-row a{width:100%;box-sizing:border-box;text-align:center;justify-content:center}
}