/* ======================================================================
   Verse Studio — MODERN MOBILE APP SKIN
   Applied ONLY on phones/small tablets (≤820px) AND only when the JS
   mobile layer is active (body.m-ui). Desktop is never affected:
   outside the media queries below every rule is inert.

   Design language: sticky blurred app bar, canvas-first screens,
   bottom navigation, bottom sheets (modals), segmented editor sections,
   safe-area padding, large touch targets.
   ====================================================================== */

/* =============================== APP BAR ============================= */
@media (max-width: 820px){
  body.m-ui .app-header{
    position:sticky; top:0; z-index:300;
    padding:8px 12px; gap:8px;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  body.m-ui .app-header h1{ font-size:15px; letter-spacing:.2px; }
  /* the editor is a fullscreen app (like CapCut): app chrome hides,
     a slim in-editor top bar takes over (back - undo/redo - export) */
  body.m-ui.editor-active .app-header{ display:none; }
  body.m-ui.editor-active .m-nav{ display:none; }   /* fullscreen editor */
  body.m-ui .brand-by{ display:none; }
  body.m-ui .ver-badge{ font-size:9px; padding:2px 6px; }
  /* the bottom nav replaces the stepper; Drive/Home/Settings live in "More" */
  body.m-ui .stepper{ display:none; }
  body.m-ui #homeBtn, body.m-ui #driveBtn, body.m-ui #settingsBtn{ display:none; }
  body.m-ui .icon-btn{ padding:9px 11px; border-radius:12px; }
  

  /* ====================== STEP 1 / STEP 2 SCREENS ==================== */
  /* canvas preview first, like a phone camera/editor app */
  body.m-ui .gen-wrap{
    display:flex; flex-direction:column; gap:12px;
    padding:10px 10px 178px; max-width:640px; margin:0 auto;
  }
  body.m-ui .gen-wrap .canvas-wrap{ order:-1; }
  body.m-ui .canvas-wrap{
    border-radius:18px; overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
    background:#000;
  }
  body.m-ui .canvas-wrap canvas{ display:block; width:100%; height:auto; }
  body.m-ui .panel{
    border-radius:18px; padding:14px 14px 10px;
    box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
  }
  body.m-ui .panel h2{ font-size:16px; }
  body.m-ui .panel .sub{ font-size:11.5px; }
  body.m-ui .field-label{ font-size:11px; margin-top:10px; }
  body.m-ui textarea, body.m-ui input[type=text], body.m-ui select{
    font-size:16px;   /* ≥16px prevents iOS zoom-on-focus */
    border-radius:12px;
  }
  /* keep the auto-font Latin fields ≥16px on phones too (ID rule in
     polish.css would otherwise shrink them and iOS would zoom) */
  body.m-ui #romanText:not(.has-urdu),
  body.m-ui #refText:not(.has-urdu){ font-size:16px; }

  /* formatting toolbar: pill scroller */
  body.m-ui .fmt-toolbar{
    display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
    padding:8px; border-radius:14px;
    -webkit-overflow-scrolling:touch;
  }
  body.m-ui .fmt-toolbar::-webkit-scrollbar{ display:none; }
  body.m-ui .fmt-btn, body.m-ui .fmt-size, body.m-ui .fmt-color, body.m-ui .fmt-target{
    min-width:38px; height:38px; border-radius:11px;
  }
  body.m-ui .fmt-size{ width:56px; }

  /* "Style" opener button (added by JS) */
  body.m-ui .m-style-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; margin-top:10px; padding:12px;
    border-radius:14px; border:1px solid var(--line);
    background:color-mix(in srgb, var(--panel) 88%, transparent);
    color:var(--text); font-size:13.5px; font-weight:600;
  }
  body.m-ui .m-style-btn:active{ transform:scale(.985); }
  body.m-ui .m-style-btn .m-aa{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:8px;
    background:var(--green); color:#0c130b; font-weight:800; font-size:13px;
  }

  /* sticky action bar (Export / Bulk / Next) floating above bottom nav */
  body.m-ui .view.active .btnrow{
    position:fixed; left:10px; right:10px; z-index:220;
    bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 10px);
    margin:0; padding:10px; gap:8px;
    border-radius:18px; border:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 16px 40px -16px rgba(0,0,0,.6);
  }
  body.m-ui .btnrow button{ flex:1 1 0; min-height:42px; border-radius:12px; font-size:13px; }
  body.m-ui .btnrow .bulk-btn{ flex:0 0 auto; }

  /* ===================== BOTTOM SHEETS (modals) ====================== */
  body.m-ui .m-backdrop{
    position:fixed; inset:0; z-index:590;
    background:rgba(5,6,4,.55);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  body.m-ui .m-backdrop.open{ opacity:1; pointer-events:auto; }
  body.m-ui .m-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:600;
    display:flex; flex-direction:column;
    max-height:calc(86vh - env(safe-area-inset-top, 0px));
    border-radius:22px 22px 0 0;
    border:1px solid var(--line); border-bottom:none;
    background:color-mix(in srgb, var(--panel) 97%, transparent);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    box-shadow:0 -18px 60px -20px rgba(0,0,0,.7);
    transform:translateY(105%); transition:transform .26s cubic-bezier(.32,.72,.28,1);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  body.m-ui .m-sheet.open{ transform:translateY(0); }
  body.m-ui .m-sheet-head{
    display:flex; align-items:center; gap:10px;
    padding:14px 18px 8px; font-weight:700; font-size:14.5px;
  }
  body.m-ui .m-sheet-head .m-drag{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:44px; height:5px; border-radius:3px;
    background:var(--line); touch-action:none;
  }
  body.m-ui .m-sheet-done{
    margin-left:auto; border:none; background:none; color:var(--green);
    font-weight:700; font-size:13.5px; padding:6px 8px; border-radius:10px;
  }
  body.m-ui .m-sheet-body{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:8px 16px 18px; overscroll-behavior:contain;
  }
  /* relocated controls restyle cleanly inside the sheet */
  body.m-ui .m-sheet-body .sp-row{
    flex-wrap:wrap; row-gap:8px;
    background:color-mix(in srgb, var(--bg) 55%, transparent);
    border:1px solid var(--line); border-radius:14px;
    padding:10px 12px; margin-top:8px;
  }
  body.m-ui .m-sheet-body .sp-row input[type=range]{ width:100%; flex:1; }
  body.m-ui .m-sheet-body .box-width-control{
    display:block; margin-top:10px; padding:12px;
    border:1px solid var(--line); border-radius:14px;
  }
  body.m-ui .m-sheet-body .box-width-control input[type=range]{ width:100%; margin-top:8px; }

  /* ======== existing overlays become bottom sheets on mobile ========= */
  body.m-ui .overlay, body.m-ui .set-overlay, body.m-ui .q-overlay, body.m-ui .ex-overlay{
    align-items:flex-end !important; justify-content:center;
    padding:0 !important;
  }
  @keyframes mSheetIn{ from{ transform:translateY(6%); opacity:.4; } to{ transform:translateY(0); opacity:1; } }
  body.m-ui .set-card, body.m-ui .q-card, body.m-ui .drive-preview-box{
    width:100%; max-width:none; max-height:88vh; margin:0;
    border-radius:22px 22px 0 0 !important; border-bottom:none;
    animation:mSheetIn .24s ease;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  body.m-ui .set-card{ max-height:92vh; }
  body.m-ui .q-card{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* export progress: near full-screen sheet so the log stays readable */
  body.m-ui .ex-card{
    width:100%; max-width:none; height:92vh; max-height:none;
    border-radius:22px 22px 0 0 !important; border-bottom:none;
    animation:mSheetIn .24s ease;
  }
  /* drive + bulk: full-screen app pages */
  body.m-ui .drive-shell, body.m-ui .bulk-shell{
    width:100vw; height:100dvh; max-height:none; border-radius:0;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  body.m-ui .bulk-body{ flex-direction:column; overflow:auto; }
  body.m-ui .bulk-left{ width:100%; min-width:0; border-right:none; border-bottom:1px solid var(--line); }

  /* ============================ EDITOR =============================== */
  /* ONE-SCREEN editor (like CapCut / VN): preview + control deck + timeline
     share a single fixed viewport. Nothing is ever hidden — Media and Clip
     settings open as bottom sheets over the timeline. */
  body.m-ui .ed{
    display:flex !important; flex-direction:column;
    height:calc(100vh - var(--editor-header-h, 56px) - env(safe-area-inset-top, 0px));
    height:calc(100dvh - var(--editor-header-h, 56px) - env(safe-area-inset-top, 0px));
    padding:6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    gap:6px; max-width:760px; margin:0 auto;
    overflow:hidden !important;
  }
  body.m-ui .ed-player{
    display:block !important; flex:0 0 auto;
    height:auto !important; min-height:0 !important;
    border-radius:0; border:none; box-shadow:none;
    background:#000; overflow:hidden;
  }
  body.m-ui .ed-player-head{ display:none; }
  /* CRITICAL one-screen fix: the Media bin and Clip panel are direct
     children of .ed and would otherwise stack ABOVE the timeline in the
     flex column (pushing it off-screen). They live ONLY inside bottom
     sheets on mobile - the direct-child selector stops matching once
     nodeSheet() moves them, so they render normally inside the sheet. */
  body.m-ui .ed > .ed-bin,
  body.m-ui .ed > .ed-details{ display:none !important; }
  body.m-ui .ed-stage{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:auto !important; min-height:0 !important;
    padding:0 !important; aspect-ratio:var(--vs-ar, 4 / 5);
    max-height:32dvh; background:#000;
  }
  /* if the cap letterboxes a tall project, the video still cannot distort */
  body.m-ui #edCanvas{
    display:block; width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important;
    object-fit:contain; border-radius:0; background:#000;
  }
  /* control deck: compact transport row + slim volume / ratio rows */
  body.m-ui .ed-transport{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--panel) 94%, transparent);
    border-top:1px solid var(--line);
  }
  body.m-ui .ed-transport .tp-btn{
    width:40px; height:40px; min-width:40px; flex:0 0 40px;
    border-radius:50%; font-size:14px;
    background:color-mix(in srgb, var(--bg) 60%, transparent);
    border:1px solid var(--line);
  }
  body.m-ui .ed-transport .tp-btn.tp-play{
    width:50px; height:50px; min-width:50px; flex:0 0 50px;
    background:var(--green); color:#0c130b; border:none;
    font-size:18px; box-shadow:0 6px 18px -8px var(--green);
  }
  body.m-ui .ed-transport .tp-btn:active{ transform:scale(.92); }

  /* ---- deep editor chrome in dark mode; in light mode the editor follows the light theme ---- */
  body.m-ui:not(.light-mode) .ed{
    --bg:#0a0b09; --panel:#14160f; --panel2:#1c1f16;
    --line:rgba(255,255,255,.09); --text:#ece9df; --muted:#a09d90;
    background:var(--bg) !important;
  }
  body.m-ui.light-mode .ed{ background:var(--bg) !important; }
  body.m-ui .ed-player{
    position:relative;
    background:#000; border-color:rgba(255,255,255,.1);
  }
  /* ratio pill floats on the preview, top-right */
  
  

  /* ---- timeline: pro look ---- */
  body.m-ui .ed-timeline{
    margin:0 8px; border:1px solid var(--line); border-radius:14px;
    background:var(--panel);
  }
  body.m-ui .tl-heads{ width:40px !important; }
  body.m-ui .tl-heads .tl-head .nm,
  body.m-ui .tl-heads .tl-track-preview{ display:none; }
  body.m-ui .tl-heads .tl-head{
    justify-content:center; padding:0 2px; gap:1px; flex-wrap:wrap; align-content:center;
  }
  body.m-ui .tl-heads .tg{ width:15px; height:15px; font-size:8.5px; padding:0; border-radius:4px; }
  body.m-ui .tl-heads .tg[data-a="del"]{ display:none; }  /* too dangerous for touch */
  body.m-ui .tl-lane, body.m-ui .tl-heads .tl-head{ height:54px !important; }
  body.m-ui .clip{ top:3px; border-radius:9px; box-shadow:0 2px 10px rgba(0,0,0,.45); }
  body.m-ui .clip-v{ background:linear-gradient(180deg,#28401d,#192a12); }
  body.m-ui .clip-a{ background:linear-gradient(180deg,#17392c,#0f2a20); }
  body.m-ui .clip.selected{
    border-color:var(--green);
    box-shadow:0 0 0 1.5px var(--green), 0 0 18px -4px var(--green);
  }
  body.m-ui .clip-handle{ width:14px; }
  body.m-ui .tl-playhead{ width:2px; background:var(--green); }
  /* grabber tab on top of the playhead — tells you it is the playhead */
  body.m-ui .tl-playhead::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:18px; height:13px; background:var(--green);
    clip-path:polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
    border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  body.m-ui .tl-snapline{ background:#5ad6ff; }
  /* ---- tool dock UNDER the timeline (CapCut-style: icon + label chips) --- */
  body.m-ui .m-editor-bar{
    flex:0 0 auto; display:flex; gap:0;
    margin-top:2px; padding:4px 4px 0;
    background:var(--panel); border-top:1px solid var(--line);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  body.m-ui .m-editor-bar::-webkit-scrollbar{ display:none; }
  body.m-ui .m-editor-bar button{
    flex:1 0 56px; min-width:56px; min-height:52px; padding:7px 4px 5px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:none; border-radius:10px; background:none;
    font-size:9px; font-weight:650; letter-spacing:.02em; color:var(--muted);
  }
  body.m-ui .m-editor-bar button svg{ width:20px; height:20px; color:var(--text); }
  body.m-ui .m-editor-bar button:active{ background:var(--panel2); transform:scale(.96); }
  body.m-ui .m-editor-bar button.m-danger,
  body.m-ui .m-editor-bar button.m-danger svg{ color:#ff9d8a; }
  /* export lives in the editor top bar now */
  body.m-ui .ed-timeline .tl-export #edExportBtn{ display:none; }

  /* ---- slim editor top bar: back - undo/redo - export ---- */
  body.m-ui .m-edtop{
    flex:0 0 auto; display:flex; align-items:center; gap:6px;
    padding:6px 10px 2px;
  }
  body.m-ui .m-edtop .m-backbtn{
    width:34px; height:34px; min-width:34px; border:none; background:none;
    color:var(--text); font-size:16px; border-radius:10px;
  }
  body.m-ui .m-edtop .m-backbtn:active{ background:var(--panel2); }
  
  body.m-ui .m-edtop .m-exportbtn{
    height:32px; padding:0 14px; border:none; border-radius:999px;
    background:linear-gradient(135deg, var(--green), #86cc5e); color:#0c130b;
    font-weight:800; font-size:12px; letter-spacing:.03em;
    box-shadow:0 6px 16px -8px var(--green);
  }
  body.m-ui .m-edtop .m-exportbtn:active{ transform:scale(.96); }

  /* timeline: always visible, fills every remaining pixel */
  body.m-ui .ed-timeline{
    flex:1 1 auto !important; min-height:180px !important;
    display:flex !important; flex-direction:column;
    height:auto !important;
  }
  body.m-ui .ed-timeline .tl-body{ flex:1 1 auto !important; height:auto !important; min-height:150px; }
  body.m-ui .tl-scroll{ height:100%; -webkit-overflow-scrolling:touch; }
  body.m-ui .ed-timeline .rng-btn, body.m-ui .ed-timeline .tpl-btn{
    min-height:36px; border-radius:10px; flex:0 0 auto;
  }
  body.m-ui .ed-timeline .tl-sep{ flex:0 0 1px; }
  body.m-ui .ed-timeline > div:not(.tl-body){
    flex:0 0 auto;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  body.m-ui .ed-timeline > div:not(.tl-body)::-webkit-scrollbar{ display:none; }
  body.m-ui .ed-timeline .tl-export{ position:sticky; right:6px; z-index:2; }
  body.m-ui .ed-timeline .tl-export #edExportBtn{ min-height:38px; border-radius:11px; font-weight:700; }

  /* Media / Clip sheets host the REAL panels (moved, not copied — every
     control keeps working; desktop gets them back on resize) */
  body.m-ui .m-sheet.m-node .m-sheet-body{ padding:0 8px 8px; }
  body.m-ui .m-sheet.m-node .ed-bin{
    height:calc(88vh - 90px); max-height:none;
    display:flex; flex-direction:column;
  }
  body.m-ui .m-sheet.m-node .ed-bin-body{ flex:1; overflow:auto; }
  body.m-ui .m-sheet.m-node .ed-bin-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; padding:10px; }
  body.m-ui .m-sheet.m-node .ed-bin-grid .bin-item{ border-radius:14px; overflow:hidden; }
  body.m-ui .m-sheet.m-node .ed-bin-grid .bin-item .bin-thumb,
  body.m-ui .m-sheet.m-node .ed-bin-grid .bin-item canvas,
  body.m-ui .m-sheet.m-node .ed-bin-grid .bin-item img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
  body.m-ui .m-sheet.m-node .ed-details{ height:auto; max-height:calc(88vh - 90px); overflow:auto; }
  body.m-ui .m-sheet.m-node .ed-details-body{ padding:12px; }
  body.m-ui .ed-bin-head{
    position:sticky; top:0; z-index:2;
    background:color-mix(in srgb, var(--panel) 96%, transparent);
  }
  body.m-ui .ed-imp-row{ display:flex; gap:8px; }
  body.m-ui .ed-imp{ flex:1; min-height:40px; border-radius:11px; font-size:13px; font-weight:700; }

  /* text-settings sheets: labeled sections so every slider group is named */
  body.m-ui .m-sheet-sec{
    margin:12px 2px 2px; font-size:10.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--green);
  }
  body.m-ui .m-sheet-sec:first-child{ margin-top:4px; }

  /* ====================== BOTTOM NAVIGATION ========================== */
  body.m-ui .m-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    display:flex; justify-content:space-around; align-items:stretch;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  }
  body.m-ui .m-nav button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    border:none; background:none; color:var(--muted);
    font-size:10px; font-weight:650; letter-spacing:.02em;
    padding:6px 2px 4px; border-radius:12px; max-width:96px;
  }
  body.m-ui .m-nav button svg{ width:21px; height:21px; }
  body.m-ui .m-nav button.on{ color:var(--green); }
  body.m-ui .m-nav button:active{ transform:scale(.94); }

  /* ============================ TOASTS =============================== */
  

  /* "More" sheet rows */
  body.m-ui .m-more-row{
    display:flex; align-items:center; gap:12px; width:100%;
    padding:13px 12px; margin-top:8px;
    border:1px solid var(--line); border-radius:14px;
    background:color-mix(in srgb, var(--bg) 55%, transparent);
    color:var(--text); font-size:14px; font-weight:600; text-align:left;
  }
  body.m-ui .m-more-row:active{ transform:scale(.99); }
  body.m-ui .m-ric{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:10px; flex:0 0 32px;
    background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green);
  }
  body.m-ui .m-more-foot{
    margin-top:14px; text-align:center; color:var(--muted);
    font-size:10.5px; letter-spacing:.04em;
  }

  /* sheets must stack above the bottom nav; fullscreen pages above the nav too */
  body.m-ui .m-nav{ z-index:500; }
  body.m-ui .drive-overlay, body.m-ui .bulk-overlay{ z-index:510 !important; }
  body.m-ui .set-overlay,
body.m-ui .q-overlay,
body.m-ui .drive-preview-overlay{ z-index:530 !important; }
  body.m-ui .ex-overlay{ z-index:540 !important; }

  /* ===================== SHARED TOUCH FEEL =========================== */
  body.m-ui button, body.m-ui .bin-item, body.m-ui .drive-item{ -webkit-tap-highlight-color:transparent; }
  body.m-ui input[type=range]{
    height:32px; accent-color:var(--green);
  }
  body.m-ui input[type=range]::-webkit-slider-thumb{ width:24px; height:24px; }
  body.m-ui .home-shell{ padding:14px 12px calc(90px + env(safe-area-inset-bottom, 0px)); }
  body.m-ui .home-hero{ border-radius:18px; padding:18px 16px; flex-wrap:wrap; gap:12px; }
  body.m-ui .home-hero h2{ font-size:20px; }
  body.m-ui .home-actions{ width:100%; }
  body.m-ui .home-actions button{ flex:1; min-height:44px; }
  body.m-ui .home-projects{ grid-template-columns:1fr; }
}

/* ========================= SMALL PHONES ============================== */
@media (max-width: 520px){
  body.m-ui .app-header h1{ font-size:13.5px; }
  body.m-ui .ed-stage{ max-height:34dvh; }
  body.m-ui .btnrow button{ font-size:12px; padding:10px 6px; }
  body.m-ui .home-hero h2{ font-size:18px; }
  /* keep landscape usable: nav becomes a slim rail on the side */
  @media (orientation: landscape) and (max-height: 480px){
    body.m-ui .m-nav{
      top:0; right:0; bottom:0; left:auto; width:64px;
      flex-direction:column; justify-content:center; gap:2px;
      border-top:none; border-left:1px solid var(--line);
    }
    body.m-ui .m-nav button{ max-width:none; }
    body.m-ui .view.active .btnrow{ right:74px; bottom:10px; }
    
  }
}

/* ========== Media sheet (editor): sticky Import / Add bar, tick-select, tidy header ========== */
body.m-ui .m-sheet.m-media{ height:86dvh; }
body.m-ui .m-sheet.m-media .m-sheet-body{ flex:1 1 auto; min-height:0; padding:0 8px 4px; }
body.m-ui .m-sheet.m-media .ed-bin{ height:100%; }
body.m-ui .m-sheet.m-media .ed-bin-head h2,
body.m-ui .m-sheet.m-media .ed-dropzone,
body.m-ui .m-sheet.m-media #binPaneMedia .ed-imp-row,
body.m-ui .m-sheet.m-media #edMediaBatchAdd{ display:none; }   /* replaced by the bar below; no drag & drop on touch */
body.m-ui .m-sheet.m-media .bin-tab{ padding:8px 4px; font-size:11px; }
body.m-ui .m-sheet.m-media .ed-bin-grid{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)) !important; gap:10px; padding:10px 8px 14px; }
body.m-ui .m-sheet.m-media .ed-bin-grid .bin-item{ position:relative; }
body.m-ui .m-sheet.m-media .ed-bin-grid .bin-item.selected{ outline:2.5px solid var(--green); outline-offset:-2px; }
body.m-ui .m-sheet.m-media .ed-bin-grid .bin-item.selected::after{
  content:'\2713'; position:absolute; top:8px; right:8px; z-index:4;
  width:26px; height:26px; border-radius:50%; background:var(--green); color:#0c130b;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
body.m-ui .m-sheet.m-media .bin-add{ width:40px; height:40px; font-size:22px; }
body.m-ui .m-sheet.m-media .bin-del, body.m-ui .m-sheet.m-media .bin-move{ width:32px; height:32px; }

body.m-ui .m-media-bar{
  flex:0 0 auto; display:flex; gap:8px; padding:10px 12px;
  border-top:1px solid var(--line); background:var(--panel);
}
body.m-ui .m-media-bar[hidden]{ display:none; }
body.m-ui .m-media-bar button{
  min-height:48px; border-radius:14px; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
}
body.m-ui .m-media-bar button:active{ transform:scale(.97); }
body.m-ui .m-media-bar .m-mb-import{ flex:0 0 auto; padding:0 16px; color:var(--green); border-color:var(--green); }
body.m-ui .m-media-bar .m-mb-slides{ flex:0 0 48px; padding:0; }
body.m-ui .m-media-bar .m-mb-add{ flex:1 1 auto; min-width:0; background:var(--green); color:#0c130b; border:none; }
body.m-ui .m-media-bar .m-mb-add:disabled{ background:var(--panel2); color:var(--muted); border:1px solid var(--line); }
body.m-ui .m-sheet.m-media .ed-bin-grid .bin-item img.bin-thumb,
body.m-ui .m-sheet.m-media .ed-bin-grid .bin-item video.bin-thumb,
body.m-ui .m-sheet.m-media .ed-bin-grid .bin-item canvas.bin-wave{ width:100%; height:auto !important; aspect-ratio:1 / 1; object-fit:cover; display:block; }
body.m-ui .m-mb-add span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.m-ui .m-sheet.m-media #binDriveStrip{ display:none; }   /* the Upload button above does the same job on touch */

@media (max-width:360px){
  body.m-ui .m-media-bar{ gap:6px; padding:8px; }
  body.m-ui .m-media-bar button{ font-size:13px; min-height:46px; }
  body.m-ui .m-media-bar .m-mb-import{ padding:0 11px; }
  body.m-ui .m-media-bar .m-mb-slides{ flex-basis:42px; }
}