/* ======================================================================
   Responsive layer - loaded last. Phones, tablets, laptops, large desktops
   and short landscape screens. Only overrides; the base look lives in the
   other sheets.
   ====================================================================== */

/* never let the page itself scroll sideways, never break words out of boxes */
html{ max-width:100%; overflow-x:hidden; }       /* viewport-level only: body stays a normal box so sticky bars keep working */
body{ max-width:100%; overflow-x:clip; }
img, canvas, video, svg{ max-width:100%; }
textarea, input, select, button{ max-width:100%; }

/* ---------- Step 2 text toolbar: full-size buttons that scroll on narrow screens ---------- */
#view2 .fmt-toolbar.is-scroll{
  overflow-x:auto !important; overflow-y:hidden !important;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
#view2 .fmt-toolbar.is-scroll::-webkit-scrollbar{ display:none; }
#view2 .fmt-toolbar.is-scroll .translation-tools-inner{ transform:none !important; margin-left:0 !important; gap:4px !important; }
#view2 .fmt-toolbar.is-scroll .translation-tools-inner .fmt-btn,
#view2 .fmt-toolbar.is-scroll .translation-tools-inner .fmt-color{
  width:36px !important; min-width:36px !important; height:36px !important; font-size:13px !important; flex:0 0 auto;
}
#view2 .fmt-toolbar.is-scroll .translation-tools-inner .fmt-size{ width:46px !important; min-width:46px !important; height:36px !important; font-size:13px !important; }
#view2 .fmt-toolbar.is-scroll .translation-tools-inner .fmt-target{ width:70px !important; min-width:70px !important; height:36px !important; font-size:12px !important; }
#view2 .fmt-toolbar.is-scroll .translation-tools-inner .fmt-label{ font-size:9px !important; margin:0 3px !important; }
#view2 .fmt-toolbar.is-scroll .translation-tools-inner .fmt-sep{ display:block !important; height:20px !important; }

/* ---------- laptops / small desktops (821-1180px): header on one row, editor panels fit ---------- */
@media (min-width:821px) and (max-width:1180px){
  .app-header{ flex-wrap:nowrap; gap:10px; padding:10px 14px; }
  .brand-by{ display:none; }
  .stepper{ margin:0 auto; }
  .step-btn{ padding:7px 11px; }
  .header-actions{ gap:6px; flex:0 0 auto; }
  .icon-btn{ padding:8px 10px; font-size:12px; gap:5px; }
  .bin-tabs{ overflow-x:auto; scrollbar-width:none; }
  .bin-tabs::-webkit-scrollbar{ display:none; }
  .bin-tab{ flex:1 0 auto; padding:9px 10px; white-space:nowrap; }
  .ed-transport{ flex-wrap:wrap; row-gap:6px; }
  .ed-transport label{ white-space:nowrap; }
  .tp-time{ white-space:nowrap; }
}

/* ---------- very large screens: keep content from stretching edge to edge ---------- */
@media (min-width:1700px){
  .app-header{ padding-left:max(22px, calc((100vw - 1600px) / 2)); padding-right:max(22px, calc((100vw - 1600px) / 2)); }
}

/* ---------- phones & small tablets (the bottom-nav app mode) ---------- */
@media (max-width:820px){
  /* timeline status text used to float over the toolbar icons */
  body.m-ui .ed-timeline .tl-export{ position:static; margin-left:8px; flex:0 0 auto; }
  body.m-ui .ed-timeline .tl-export .tp-time{ white-space:nowrap; }

  /* tablets in portrait: don't stretch single-column forms edge to edge */
  body.m-ui .gen-wrap{ max-width:720px; }

  /* the editor is a one-screen app: exactly the visible height (mobile.css forced
     height:auto here, which let it grow past the screen and hid the tool dock) */
  body.m-ui.editor-active #edRoot{ height:100vh !important; height:100dvh !important; max-height:100dvh !important; }
}

/* short phones (iPhone SE, small Androids, browser chrome showing): compact deck */
@media (max-width:820px) and (max-height:760px){
  body.m-ui .ed-stage{ max-height:28dvh; }
  body.m-ui .ed-transport{ padding:6px 8px; gap:4px 6px; }
  body.m-ui .ed-transport .tp-btn{ width:36px; height:36px; min-width:36px; flex:0 0 36px; }
  body.m-ui .ed-transport .tp-btn.tp-play{ width:44px; height:44px; min-width:44px; flex:0 0 44px; }
  body.m-ui .ed-transport .tp-time{ order:11; margin-left:0; padding:5px 9px; }
  body.m-ui .ed-transport > label:has(select){ padding:3px 8px; }
  body.m-ui .ed-timeline{ min-height:150px !important; }
}

/* ---------- touch screens: finger-sized controls everywhere ---------- */
@media (pointer:coarse){
  .tl-btn, .rng-btn, .tpl-btn{ min-width:36px; min-height:36px; }
  .ed-transport button, .ed-transport select, .ed-transport input[type=number]{ min-height:34px; }
  .home-card-actions button{ min-height:38px; }
  .bin-add{ min-width:30px; min-height:30px; }
  .fmt-toolbar .fmt-btn, .fmt-toolbar .fmt-color, .fmt-toolbar .fmt-size, .fmt-toolbar .fmt-target{ min-height:34px; }
  .icon-btn{ min-height:38px; }
  input[type=range]{ min-height:28px; }
}

/* ---------- small phones (up to 380px) ---------- */
@media (max-width:380px){
  body.m-ui .gen-wrap{ padding-left:8px; padding-right:8px; }
  body.m-ui .view.active .btnrow{ left:6px; right:6px; padding:8px; }
  body.m-ui .btnrow button{ font-size:12px; padding-left:6px; padding-right:6px; }
  body.m-ui .m-edtop .m-exportbtn{ padding:0 10px; }
}

/* ---------- landscape phone editor: preview on the left, timeline + tools on the right ---------- */
@media (orientation:landscape) and (max-height:480px) and (max-width:1000px){
  body.m-ui.editor-active #edRoot.ed{
    display:grid !important; padding:4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    grid-template-columns:minmax(0,2fr) minmax(0,3fr) !important;
    grid-template-rows:auto minmax(0,1fr) auto !important; gap:4px 8px;
    grid-template-areas:"top top" "player tl" "player dock" !important;
    max-width:none;
  }
  body.m-ui.editor-active .m-edtop{ grid-area:top; padding-top:2px; }
  body.m-ui.editor-active .ed-player{ grid-area:player; min-height:0; overflow-y:auto; }
  body.m-ui.editor-active .ed-timeline{ grid-area:tl; margin:0 8px 0 0; min-height:0 !important; }
  body.m-ui.editor-active .m-editor-bar{ grid-area:dock; margin:0 8px 0 0; border-radius:12px; }
  body.m-ui.editor-active .ed-stage{ max-height:46dvh; }
  body.m-ui.editor-active .m-editor-bar button{ min-height:44px; flex-basis:48px; }
}

/* ---------- landscape phones: little height, so give content the room ---------- */
@media (max-height:480px) and (orientation:landscape) and (max-width:1000px){
  /* slim side rail instead of a bottom bar (the max-width 520px rule in mobile-app.css, extended to wider phones) */
  body.m-ui:not(.editor-active){ padding-right:64px; }
  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 .app-header{ position:static; padding:4px 12px; }
  /* the sticky action bar becomes a normal row so it doesn't cover the short screen */
  body.m-ui .view.active .btnrow{ position:static; margin:8px 0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  body.m-ui .gen-wrap{ padding-bottom:16px; max-width:none; }
  body.m-ui .canvas-wrap canvas{ max-height:calc(100dvh - 24px); width:auto; margin:0 auto; }
}

/* ---------- Drive sign-in / connect box: styled, finger-sized, no overflow ---------- */
.drive-gate{ padding:0 16px; box-sizing:border-box; }


.drive-gate button{ min-height:42px; padding:0 22px; border-radius:12px; }
.drive-gate code{ word-break:break-all; overflow-wrap:anywhere; }
/* ====================== Mobile editor v2 ====================== */
/* the Details panel is display:none under 1100px (studio.css); inside the Clip sheet it must show */
body.m-ui .m-sheet.m-node .ed-details{ display:flex !important; flex-direction:column; border:none; background:transparent; }
/* --- volume: speaker icon in the top row, slider in a popover --- */
body.m-ui .m-edtop{ position:relative; }
body.m-ui .m-volbtn .ic-muted{ display:none; }
body.m-ui .m-volbtn.muted .ic-muted{ display:block; }
body.m-ui .m-volbtn.muted .ic-vol{ display:none; }
body.m-ui .m-volbtn.muted{ color:var(--danger, #ff9d8a); }
body.m-ui .m-volbtn.open{ background:var(--panel2); }
body.m-ui .m-vol-pop{
  position:absolute; top:calc(100% + 2px); right:10px; z-index:60;
  width:min(300px, calc(100vw - 20px)); padding:8px 12px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 18px 40px -12px rgba(0,0,0,.75);
}
body.m-ui .m-vol-pop[hidden]{ display:none; }
body.m-ui .m-vol-pop .tp-master{ display:flex; align-items:center; gap:10px; width:100%; padding:0; border:none; background:none; order:0; }
body.m-ui .m-vol-pop .tp-master input[type=range]{ flex:1; width:auto; min-width:0; height:32px; }
body.m-ui .m-vol-pop .tp-master b{ min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
body.m-ui .m-vol-pop .tp-btn.tp-mute{ width:40px; height:40px; min-width:40px; flex:0 0 40px; border:1px solid var(--line); }

/* --- transport: with the volume row gone the deck is one tidy row --- */
@media (max-width:360px){
  body.m-ui .ed-transport .tp-btn{ width:34px; height:34px; min-width:34px; flex:0 0 34px; }
  body.m-ui .ed-transport .tp-btn.tp-play{ width:44px; height:44px; min-width:44px; flex:0 0 44px; }
}

/* --- Adjust sheet (Clip | Audio & FX | Transitions) --- */
body.m-ui .m-sheet.m-adjust{ height:86dvh; }
body.m-ui .m-sheet.m-adjust .m-sheet-body{ flex:1 1 auto; min-height:0; padding:0 10px 14px; }
body.m-ui .m-seg{
  display:flex; gap:4px; padding:4px; margin:2px 0 10px; border-radius:14px;
  background:var(--panel2); border:1px solid var(--line); position:sticky; top:0; z-index:3;
}
body.m-ui .m-seg button{ flex:1; min-height:38px; border:none; border-radius:10px; background:none; color:var(--muted); font-weight:700; font-size:12.5px; }
body.m-ui .m-seg button.on{ background:var(--green); color:#0c130b; }
body.m-ui .m-sheet.m-adjust .ed-details > h2,
body.m-ui .m-sheet.m-adjust .det-tabs{ display:none; }
body.m-ui .m-sheet.m-adjust .ed-details,
body.m-ui .m-sheet.m-adjust .bin-pane{ height:auto; max-height:none; overflow:visible; flex:none; }
body.m-ui .m-sheet.m-adjust .ed-details-body,
body.m-ui .m-sheet.m-adjust .ctl-scroll,
body.m-ui .m-sheet.m-adjust .tr-scroll{ overflow:visible; flex:none; max-height:none; }
body.m-ui .m-sheet.m-node .m-adj-off{ display:none !important; }
body.m-ui .m-sheet.m-media #binTabControls,
body.m-ui .m-sheet.m-media #binTabTrans{ display:none; }   /* they live in Adjust now */

/* --- timeline toolbar: icon set, no duplicates of the top bar / bottom dock --- */
body.m-ui .tl-toolbar #tlUndo, body.m-ui .tl-toolbar #tlRedo, body.m-ui .tl-toolbar #tlSplit,
body.m-ui .tl-toolbar #tlDelete, body.m-ui .tl-toolbar #tlDuplicate, body.m-ui .tl-toolbar #tlCopy,
body.m-ui .tl-toolbar #tlFitZoom, body.m-ui .tl-toolbar .tl-sep{ display:none; }
body.m-ui .tl-toolbar .tl-btn{ min-width:38px; height:38px; justify-content:center; border-radius:10px; flex:0 0 auto; }
body.m-ui .tl-toolbar .tl-btn .t{ font-size:11.5px; font-weight:700; }
body.m-ui .tl-toolbar .tl-btn svg{ flex:0 0 auto; }

/* --- track heads: finger-sized lock / eye / mute toggles --- */
body.m-ui .tl-heads{ width:56px !important; }
body.m-ui .tl-heads .tg{ width:24px; height:24px; font-size:11px; }
/* --- time pill on the preview; transport is just the five playback buttons --- */

body.m-ui .ed-transport{ justify-content:space-evenly; padding-top:8px; padding-bottom:8px; }
/* Adjust sheet: touch-sized inputs / buttons (16px stops iOS zoom on focus) */
body.m-ui .m-sheet.m-adjust input[type=number], body.m-ui .m-sheet.m-adjust select{ min-height:38px; font-size:16px; border-radius:10px; }
body.m-ui .m-sheet.m-adjust button:not(.m-sheet-done):not([data-k]){ min-height:42px; }
body.m-ui .m-sheet.m-adjust input[type=range]{ min-height:30px; }
@media (max-width:360px){ body.m-ui .m-editor-bar button{ flex:1 0 48px; min-width:48px; } }

/* media panel tabs (all desktop widths): never clip a label, scroll instead */
.bin-tabs{ overflow-x:auto; scrollbar-width:none; }
.bin-tabs::-webkit-scrollbar{ display:none; }
.bin-tab{ flex:1 0 auto; white-space:nowrap; letter-spacing:.03em; padding-left:10px; padding-right:10px; }
/* desktop media panel is narrow: drop the tab icons so all four labels fit (2 x 2 below 262px, see further down) */
@media (min-width:821px){
  .bin-tab{ padding-left:5px; padding-right:5px; font-size:10px; letter-spacing:.01em; }
  .bin-tab .ic{ display:none; }
}
/* ====================== Desktop editor fit (all window sizes from 821px wide) ====================== */
@media (min-width:821px){
  /* the timeline keeps room for a video and an audio track (with the slimmer tracks editor.js uses on
     short screens), the preview gets the rest */
  #view3 .ed{ grid-template-rows:minmax(0,1fr) minmax(min(268px,46%),38%) !important; }

  /* player controls: never squeezed or clipped; the output settings move to a second row when needed */
  #view3 .ed-transport{ flex-wrap:wrap; row-gap:6px; overflow:visible; }
  #view3 .ed-transport > *{ flex:0 0 auto; }
  #view3 .ed-transport .tp-time, #view3 .ed-transport label{ white-space:nowrap; }

  /* media panel: when the column is too narrow for the four tabs in a row, show them 2 x 2 */
  body:not(.m-ui) .ed-bin{ container-type:inline-size; }
}
@container (max-width:262px){
  body:not(.m-ui) .bin-tabs{ display:grid; grid-template-columns:1fr 1fr; overflow:visible; }
  body:not(.m-ui) .bin-tab{ padding:7px 4px; text-align:center; }
}
/* player narrower than its controls row (laptops ~1024-1366px): tighter controls, time on two lines,
   so the row stays a single line and the preview keeps its height */
@media (min-width:821px){ body:not(.m-ui) .ed-player{ container-type:inline-size; } }
@container (max-width:900px){
  body:not(.m-ui) .ed-transport{ gap:6px 6px; padding:7px 10px; }
  body:not(.m-ui) .ed-transport .tp-btn:not(.tp-play):not(.tp-mute){ width:28px; height:28px; }
  body:not(.m-ui) #view3 .ed-transport .tp-time{ white-space:normal; width:64px; text-align:center; line-height:1.2; font-size:11.5px; }
  body:not(.m-ui) .ed-transport .tp-master{ gap:4px; padding:2px 6px; }
  body:not(.m-ui) .ed-transport .tp-master input[type=range]{ width:60px; }
  body:not(.m-ui) .ed-transport input#edOutW, body:not(.m-ui) .ed-transport input#edOutH{ width:52px; }
  body:not(.m-ui) .ed-transport input#edOutFps{ width:42px; }
}
/* timeline toolbar narrower than its one-row width (~1180px): icon-only Split / Snap / Ripple / Fit
   (their tooltips stay), a shorter zoom slider and no clip-count text, so it stays one row */
@media (min-width:821px){ body:not(.m-ui) .ed-timeline{ container-type:inline-size; } }
@container (max-width:1180px){
  body:not(.m-ui) .tl-toolbar .tl-btn .t{ display:none; }
  body:not(.m-ui) .tl-toolbar .tl-zoom input[type=range]{ width:80px; }
  body:not(.m-ui) .tl-toolbar .rng-info{ min-width:0; }
  body:not(.m-ui) .tl-toolbar #tlStatus{ display:none; }
}