/* macOS-style 3-pane app shell. Loaded AFTER style.css to override the floating-panel
   layout. Consumes the style.css token layer (no color vars redefined here) and re-homes
   #stage (doc) + #panel (inspector) into a CSS grid with a titlebar + effect sidebar. */

:root { --titlebar-h: 46px; --sidebar-w: 236px; --inspector-w: 244px; }

#app {
  display: grid; height: 100dvh;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--inspector-w);
  grid-template-rows: var(--titlebar-h) minmax(0, 1fr);
  grid-template-areas: "titlebar titlebar titlebar" "sidebar doc inspector";
  background: var(--bg);
}
/* Zero the width var (not just the grid column) so the #gl max-width calc reclaims the space. */
#app.no-sidebar { --sidebar-w: 0px; grid-template-columns: 0 minmax(0, 1fr) var(--inspector-w); }
#app.no-sidebar #sidebar { display: none; }
#app.no-inspector { --inspector-w: 0px; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0; }
#app.no-inspector #panel { display: none; }

/* Title bar */
#titlebar {
  grid-area: titlebar; position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; gap: 12px; border-bottom: 1px solid var(--line);
  background: var(--chrome); backdrop-filter: saturate(160%) blur(20px);
}
#titlebar .tb-left { display: flex; align-items: center; gap: 9px; }
#titlebar .logo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
#titlebar b { font-weight: 600; letter-spacing: -0.2px; font-size: var(--fz-lg); }
.app-ver { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; color: var(--faint);
  padding: 2px 5px; border: 1px solid var(--line); border-radius: var(--r-full); flex: none; }
.start-ver { display: inline-block; margin-top: 12px; }
#titlebar .tb-right { display: flex; align-items: center; gap: 4px; }
#titlebar .icon-btn { background: transparent; color: var(--muted); padding: 7px; border-radius: var(--r-2); }
#titlebar .icon-btn svg { width: 16px; height: 16px; }
#titlebar .icon-btn:hover { background: var(--s-2); color: var(--text); filter: none; }

/* Until a source is chosen on the start screen, the header shows just the brand —
   every control targets a running canvas, so they'd all be dead weight before then. */
#app:has(#start-overlay) #menubar,
#app:has(#start-overlay) .tb-actions,
#app:has(#start-overlay) .tb-right { display: none; }

/* Menu bar (Gestures / View dropdowns) */
.menubar { display: flex; align-items: center; gap: 2px; margin-left: 8px; margin-right: auto; }
.menu { position: relative; }
.menu-btn { background: transparent; color: var(--muted); padding: 6px 9px; border-radius: var(--r-2);
  font-size: var(--fz-sm); font-weight: 500; gap: 4px; }
.menu-btn svg { width: 13px; height: 13px; opacity: 0.7; }
.menu-btn:hover { background: var(--s-2); color: var(--text); filter: none; }
.menu-btn.on { background: var(--s-2); color: var(--text); }
.menu-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 236px;
  display: flex; flex-direction: column; gap: var(--sp-2); padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-4); background: var(--panel); backdrop-filter: saturate(160%) blur(20px); box-shadow: var(--shadow-2); }
.menu-pop[hidden] { display: none; }
.menu-title { font-size: var(--fz-eyebrow); text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); font-weight: 600; }
.menu-title:not(:first-child) { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.menu .chev { width: 12px; height: 12px; opacity: 0.6; }
.menu-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }

/* Source / Mode selector triggers — filled, show current choice */
.menu-btn.sel-btn { background: var(--s-2); color: var(--text); gap: 6px; padding: 6px 9px; }
.menu-btn.sel-btn:hover { background: var(--s-3); }
.menu-btn.sel-btn.on { background: var(--s-3); }
.menu-btn.sel-btn > i:first-child { width: 14px; height: 14px; opacity: 0.85; }
.menu-btn.sel-btn span { min-width: 34px; text-align: left; }

/* Vertical option list inside Source / Mode popovers */
.menu-pop:has(.menu-list) { width: 208px; padding: 6px; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-list button { justify-content: flex-start; gap: 9px; width: 100%; background: transparent; color: var(--text);
  padding: 8px 9px; border-radius: var(--r-2); font-size: var(--fz-sm); font-weight: 500; }
.menu-list button i { width: 15px; height: 15px; opacity: 0.8; flex: none; }
.menu-list button:hover { background: var(--s-2); filter: none; }
.menu-list button.on { background: var(--accent-weak); color: var(--accent); }
#app[data-theme="light"] .menu-list button.on { color: color-mix(in srgb, var(--accent) 80%, #000); }

/* Top-toolbar actions (PNG / Record / Export) */
.tb-actions { display: flex; align-items: center; gap: 5px; }
/* Header chips that wrap an icon + native select (Looks picker, PNG timer) */
.tb-preset, .tb-timer { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; background: var(--s-2); color: var(--text);
  border-radius: var(--r-2); padding: 0 8px 0 10px; height: 32px; }
.tb-preset:hover, .tb-timer:hover { background: var(--s-3); }
.tb-preset > svg, .tb-timer > svg { width: 15px; height: 15px; opacity: 0.8; flex: none; }
.tb-preset select, .tb-timer select { width: auto; background: transparent; border: 0; color: inherit;
  height: 100%; padding: 0 2px; font-size: var(--fz-sm); font-weight: 500; cursor: pointer; }
.tb-preset select { min-width: 96px; max-width: 168px; }
.tb-timer select { min-width: 40px; }
.tb-preset select:hover, .tb-preset select:focus-visible, .tb-timer select:hover, .tb-timer select:focus-visible { border: 0; box-shadow: none; }
.tb-format { display: none; }   /* phone-only quick format — desktop uses the Export tab */
.tb-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--s-2); color: var(--text);
  border-radius: var(--r-2); padding: 6px 12px; font-size: var(--fz-sm); font-weight: 500; }
.tb-btn:hover { background: var(--s-3); filter: none; }
.tb-btn svg { width: 15px; height: 15px; }
#titlebar #record.rec, #titlebar .tb-btn.rec { background: var(--rec); color: #fff; }

/* Left sidebar — effect browser + overlay folds */
#sidebar {
  grid-area: sidebar; display: flex; flex-direction: column; min-height: 0;
  padding: 12px 11px; gap: 10px; border-right: 1px solid var(--line);
  background: var(--chrome); backdrop-filter: saturate(160%) blur(20px); overflow: hidden;
}
.side-title { font: 600 var(--fz-eyebrow)/1 ui-sans-serif, system-ui; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); margin: 0 0 8px; }

/* Collapsible folds (Effects, Text, Border) — one consistent disclosure pattern */
.side-fold { flex: none; border-top: 1px solid var(--line); padding-top: 11px; }
.side-fold:first-child { border-top: 0; padding-top: 2px; }
.side-fold > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 7px;
  font: 600 var(--fz-eyebrow)/1 ui-sans-serif, system-ui; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--ease); opacity: 0.75; }
.side-fold[open] > summary { color: var(--muted); margin-bottom: 10px; }
.side-fold[open] > summary::before { transform: rotate(45deg); }
.side-fold:hover > summary { color: var(--muted); }
.side-fold[open] > .fold-body { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 40vh; overflow-y: auto; padding-right: 2px; }
.side-fold:not([open]) > .fold-body { display: none; }
.side-fold .fold-body::-webkit-scrollbar { width: 6px; }
.side-fold .fold-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* The Effects fold grows to fill the sidebar; its swatch grid scrolls internally.
   Chromium reveals fold content inside a ::details-content box, so that pseudo-element
   is part of the flex chain and must pass the available height through. */
.fx-fold { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fx-fold[open] { flex: 1 1 auto; min-height: 150px; }
.fx-fold[open]::details-content { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fx-fold[open] > .fx-body { flex: 1 1 0; min-height: 0; max-height: none; overflow: hidden; }
.fx-fold[open] > .fx-body > .swatch-grid { flex: 1 1 0; min-height: 0; }
/* Category picker — compact dropdown + search toggle above the swatch grid */
.cat-rail { margin-bottom: 10px; flex: none; }
.cat-rail .cat-row { display: flex; align-items: stretch; gap: 5px; }
.cat-rail .cat-select { flex: 1; width: auto; min-width: 0; }
.cat-search-btn { flex: none; width: 32px; padding: 0; background: var(--s-0); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-2); justify-content: center; }
.cat-search-btn:hover { background: var(--s-2); color: var(--text); border-color: var(--line-2); filter: none; }
.cat-search-btn svg { width: 14px; height: 14px; }
.fx-search { flex: 1; min-width: 0; background: var(--s-0); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 0 9px; height: var(--ctrl-h); font: inherit; font-size: var(--fz-sm); }
.fx-search:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.fx-empty { grid-column: 1 / -1; color: var(--faint); font-size: var(--fz-xs); padding: 10px 2px; }

/* Effect swatches — two-up, left-aligned, uniform rows.
   scrollbar-gutter:stable reserves the scrollbar lane so it never overlaps/cuts
   the last column; the thumb stays invisible until you hover the grid. */
.swatch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-content: start;
  overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
.swatch-grid:hover { scrollbar-color: var(--line-2) transparent; }
.swatch { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 8px;
  min-width: 0; overflow: hidden; min-height: 34px; padding: 6px 9px; border-radius: var(--r-2);
  background: var(--s-0); border: 1px solid var(--line); color: var(--text); font-size: var(--fz-xs);
  line-height: 1.2; cursor: pointer; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.swatch:hover { background: var(--s-2); border-color: var(--line-2); filter: none; }
.swatch.on { background: var(--accent-weak); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
#app[data-theme="light"] .swatch.on { color: color-mix(in srgb, var(--accent) 80%, #000); }
.swatch .chip { width: 20px; height: 20px; border-radius: 5px; flex: none; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.swatch .chip.thumb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.swatch-grid::-webkit-scrollbar { width: 11px; }
.swatch-grid::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.swatch-grid:hover::-webkit-scrollbar-thumb { background: var(--line-2); background-clip: padding-box; }

/* Center document — the canvas as a framed window */
#app #stage { grid-area: doc; position: relative; inset: auto; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #16161e, var(--bg) 72%); overflow: hidden; padding: 16px; }

/* Video editing bar — docked at the bottom of the canvas, only while a video is loaded */
#video-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 15; display: none; flex-direction: column; gap: 8px; }
#video-bar:has(> :not([hidden])) { display: flex; }
#app #stage:has(#video-bar > :not([hidden])) { padding-bottom: 108px; }
#app #video-bar #transport { position: static; left: auto; right: auto; bottom: auto; transform: none; width: 100%; margin: 0; }
.vb-timeline { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-4); backdrop-filter: blur(12px); box-shadow: var(--shadow-2); }
.vb-timeline[hidden] { display: none; }
.vb-label { font-size: var(--fz-eyebrow); text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); font-weight: 600; flex: none; }
.vb-timeline .mini { width: auto; flex: none; }
.vb-timeline #tl-list { flex: 1; flex-direction: row; gap: 4px; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.vb-timeline #tl-list .tl-row { flex: none; }
.vb-timeline #tl-list:empty { display: none; }
#app[data-theme="light"] #stage { background: radial-gradient(120% 120% at 50% 0%, #f5f5f9, #e4e4ea 72%); }
#app #frame { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line); border-radius: 12px; overflow: hidden; }
#app[data-theme="light"] #frame { box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--line); }
#app #gl { max-width: calc(100vw - var(--sidebar-w) - var(--inspector-w) - 56px);
  max-height: calc(100dvh - var(--titlebar-h) - 56px); }

/* Right inspector — the existing #panel, de-floated */
#app #panel { grid-area: inspector; position: static; inset: auto; top: auto; right: auto;
  width: 100%; max-height: none; height: 100%; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; backdrop-filter: none; background: var(--chrome); }

/* ── Condensed titlebar (small laptops + landscape iPad) ─────────────────────── */
@media (max-width: 1180px) {
  .tb-actions .tb-btn span { display: none; }   /* icon-only actions */
  #theme-toggle { display: none; }               /* theme also lives in the View menu */
  .menu-sep { display: none; }
  .tb-preset select { max-width: 128px; }
}

/* ── Tablet & phone: single column, drawer sidebar + bottom-sheet inspector ──── */
@media (max-width: 1024px) {
  #app, #app.no-sidebar, #app.no-inspector {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "titlebar" "doc"; }
  /* Titlebar wraps rather than overflowing — a scroll container would clip the
     dropdown menus, so we let it grow to a second row on very narrow screens. */
  #titlebar { flex-wrap: wrap; height: auto; min-height: var(--titlebar-h);
    justify-content: flex-start; align-content: center; row-gap: 4px; column-gap: 6px;
    padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); }
  .menubar { margin: 0; gap: 0; }
  .tb-actions { margin-left: auto; gap: 3px; }   /* actions sit at the right of their row */
  #titlebar b { display: none; }                 /* wordmark → logo dot only, saves a row */
  #titlebar .menu-btn { padding: 6px 6px; }
  .menu-btn.sel-btn span { min-width: 0; }
  .tb-btn { padding: 6px 9px; }
  /* Sidebar → slide-in drawer */
  #sidebar { position: fixed; top: var(--titlebar-h); left: 0; bottom: 0; width: min(82vw, 340px);
    z-index: 30; transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: none;
    padding-left: max(11px, env(safe-area-inset-left)); }
  #app.no-sidebar #sidebar { display: flex; }    /* the drawer, not the grid collapse, governs here */
  #app.show-sidebar #sidebar { transform: none; box-shadow: var(--shadow-2); }
  #app.show-sidebar::after { content: ''; position: fixed; inset: var(--titlebar-h) 0 0 0; z-index: 25; background: rgba(0,0,0,0.45); }
  /* Inspector → bottom sheet */
  #app #panel { grid-area: doc; align-self: end; position: relative; height: auto; max-height: 56vh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; z-index: 20;
    box-shadow: var(--shadow-2); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #app.no-inspector #panel { display: none; }
  /* Canvas sits at the top so it stays visible above the sheet; when the sheet is
     dismissed it reclaims the full height. */
  #app #stage { align-items: start; padding-top: max(10px, env(safe-area-inset-top)); }
  #app #gl { max-width: 100vw; max-height: calc(100dvh - var(--titlebar-h) - 8px); }
  #app:not(.no-inspector) #gl { max-height: calc(100dvh - var(--titlebar-h) - 58vh); }
  #code-editor { width: min(460px, 90vw); }
}

/* ── Phone: tighter drawer, hide the wordmark to save the first row ──────────── */
@media (max-width: 640px) {
  #sidebar { width: min(88vw, 320px); }
  #code-editor { width: 100vw; }
  .tb-preset select { max-width: 92px; }
  #titlebar { column-gap: 4px; }
}

/* ── Phone app chrome: bottom action bar + filter carousel ────────────────────── */
#mobile-bar, #fx-strip, #fab-stack, #preset-strip { display: none; }   /* phone-only, enabled in the media block */

@media (max-width: 820px) {
  :root { --mbar-h: calc(62px + env(safe-area-inset-bottom, 0px)); --strip-h: 80px; --pstrip-h: 46px; }

  /* The bar + FABs own capture/randomize actions — drop their header duplicates. */
  #tb-code, #tb-record, #tb-export, #tb-snap, #tb-surprise,
  #toggle-sidebar, #toggle-inspector { display: none; }

  /* Randomize FABs — big paired pills floating above the filter carousel.
     Only while the sheet is closed (same visibility rule as the carousel). */
  #app.no-inspector:not(:has(#start-overlay)) #fab-stack { display: flex; }
  #fab-stack { position: fixed; right: 10px; bottom: calc(var(--mbar-h) + var(--strip-h) + var(--pstrip-h) + 12px);
    z-index: 19; flex-direction: column; align-items: flex-end; gap: 8px; }
  #fab-stack button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
    border-radius: var(--r-full); background: var(--panel); color: var(--text);
    border: 1px solid var(--line-2); backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--shadow-2); font-size: var(--fz-sm); font-weight: 600;
    transition: transform .12s var(--ease); }
  #fab-stack button:active { transform: scale(0.93); }
  #fab-stack button svg { width: 17px; height: 17px; color: var(--accent); }

  /* App-like header: two centered rows — menus on top, capture chips below.
     The logo dot + version pin to the left without offsetting the centering. */
  #titlebar { justify-content: center; }
  #titlebar .tb-left { position: absolute; left: 6px; top: 0; height: 34px; align-items: center; gap: 4px; }
  #titlebar .logo-dot { width: 9px; height: 9px; }
  #titlebar .app-ver { font-size: 8px; padding: 1px 3px; letter-spacing: 0.1px; }
  .menubar { flex: 0 0 100%; justify-content: center; }
  .tb-actions { flex: 0 0 100%; margin: 0; justify-content: center; }
  #titlebar .tb-right { display: none; }   /* its toggles are hidden here anyway */

  /* One-tap "Save to Photos" chip — floats above the action bar */
  #save-chip { position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--mbar-h) + var(--strip-h) + var(--pstrip-h) + 12px); z-index: 45;
    display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px;
    background: var(--accent); color: var(--on-accent); font-size: var(--fz-md); font-weight: 600;
    border-radius: var(--r-full); box-shadow: var(--shadow-2); }
  #save-chip[hidden] { display: none; }
  #save-chip svg { width: 17px; height: 17px; }
  #save-chip:active { transform: translateX(-50%) scale(0.95); }
  /* Touch-first header controls: uniform pill chips, ~38px tap targets */
  .tb-format { display: inline-flex; }
  #titlebar { padding-top: 7px; padding-bottom: 7px; row-gap: 7px; column-gap: 6px; }
  #titlebar .menu-btn { padding: 9px 11px; font-size: 12px; font-weight: 600;
    background: var(--s-2); color: var(--text); border-radius: var(--r-full); }
  #titlebar .menu-btn svg { width: 14px; height: 14px; }
  #titlebar .menu-btn .chev { width: 11px; height: 11px; }
  .tb-preset, .tb-timer { height: 38px; padding: 0 10px 0 12px; gap: 6px; border-radius: var(--r-full); }
  .tb-preset > svg, .tb-timer > svg { width: 15px; height: 15px; }
  .tb-preset select, .tb-timer select { font-size: 12px; font-weight: 600; }
  .tb-preset select { min-width: 0; max-width: 104px; }
  .tb-format select { max-width: 112px; }
  /* No room beside the full-width centered rows — the start screen carries the
     version on phones instead. */
  #titlebar .app-ver { display: none; }
  /* Dropdowns become centered sheets under the header — edge menus (View) would
     otherwise clip past the viewport now that the rows are centered. */
  .menu-pop { position: fixed; left: 50%; top: calc(var(--titlebar-h) + 8px);
    transform: translateX(-50%); width: min(330px, 94vw); }

  /* Bottom action bar — camera-app style with a central shutter */
  #app:not(:has(#start-overlay)) #mobile-bar { display: flex; }
  #mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: var(--mbar-h); align-items: center; justify-content: space-around;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--chrome); backdrop-filter: saturate(160%) blur(20px);
    border-top: 1px solid var(--line); }
  #mobile-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: transparent; color: var(--muted); font-size: 10px; font-weight: 500;
    padding: 5px 2px; border-radius: var(--r-2); transition: transform .12s var(--ease), color var(--ease); }
  #mobile-bar button svg { width: 21px; height: 21px; }
  #mobile-bar button:active { transform: scale(0.9); }
  #mobile-bar button.on { color: var(--accent); }
  #mobile-bar button[hidden] { display: none; }
  #mobile-bar #mb-shutter { flex: none; width: 56px; height: 56px; padding: 3px; border-radius: 50%;
    background: #fff; background-clip: content-box; border: 3px solid #fff; margin: 0 4px; }
  #mobile-bar #mb-shutter:active { transform: scale(0.88); }
  #mb-record.rec { color: var(--rec); }
  #mb-record.rec svg { animation: rec-pulse 1.2s ease-in-out infinite; }
  @keyframes rec-pulse { 50% { opacity: 0.45; } }

  /* Filter carousel — horizontal snap-scroll chips above the bar (IG-style).
     Hidden while the Adjust sheet is open so it doesn't ghost through it. */
  #app.no-inspector:not(:has(#start-overlay)) #fx-strip { display: flex; }
  #fx-strip { position: fixed; left: 0; right: 0; bottom: var(--mbar-h); z-index: 18;
    height: var(--strip-h); gap: 10px; align-items: flex-start; padding: 10px 12px 0;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }
  #fx-strip::-webkit-scrollbar { display: none; }
  .fx-chip { flex: none; width: 56px; scroll-snap-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 4px; background: transparent; padding: 0; color: rgba(255, 255, 255, 0.75);
    font-size: 9px; line-height: 1.1; }
  .fx-chip .chip { width: 44px; height: 44px; border-radius: 50%; background-position: center;
    background-size: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    transition: transform .12s var(--ease); }
  .fx-chip:active .chip { transform: scale(0.88); }
  .fx-chip.on { color: #fff; font-weight: 600; }
  .fx-chip.on .chip { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--accent); }
  .fx-chip .fx-name { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Preset "Looks" strip — swipeable pills directly above the randomize FABs */
  #app.no-inspector:not(:has(#start-overlay)) #preset-strip { display: flex; }
  #preset-strip { position: fixed; left: 0; right: 0; bottom: calc(var(--mbar-h) + var(--strip-h));
    z-index: 18; height: var(--pstrip-h); gap: 7px; align-items: center; padding: 0 12px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent); }
  #preset-strip::-webkit-scrollbar { display: none; }
  .preset-chip { flex: none; padding: 8px 13px; border-radius: var(--r-full);
    background: var(--panel); border: 1px solid var(--line-2); color: var(--text);
    font-size: 12px; font-weight: 600; backdrop-filter: blur(10px);
    transition: transform .12s var(--ease); }
  .preset-chip:active { transform: scale(0.93); }
  .preset-chip.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }

  /* Hand gestures + the modes built on them don't hold up on phones — hide them
     (main.js also skips loading the tracker and forces gestures off there). */
  .menu:has(.menu-btn[data-menu="gestures"]) { display: none; }
  #modes button[data-mode="paint"], #modes button[data-mode="frame"] { display: none; }

  /* Source / View sheets: roomier, aligned, finger-sized rows */
  .menu-pop { padding: 14px; gap: 10px; }
  .menu-pop label { font-size: 13px; gap: 6px; }
  .menu-pop label.row { padding: 7px 2px; font-size: 14px; }
  .menu-pop input[type="checkbox"] { width: 19px; height: 19px; }
  .menu-pop:has(.menu-list) { width: min(300px, 92vw); padding: 8px; }
  .menu-list { gap: 4px; }
  .menu-list button { padding: 13px 12px; font-size: 14px; border-radius: var(--r-3); }
  .menu-list button i { width: 18px; height: 18px; }
  .accent-dots { gap: 10px; }
  .accent-dots .dot { width: 26px; height: 26px; }

  /* Make room: canvas + sheet + video bar all clear the app chrome */
  #app:not(:has(#start-overlay)) #stage { padding-bottom: calc(var(--strip-h) + var(--pstrip-h) + var(--mbar-h) + 8px); }
  #app:not(:has(#start-overlay)) #gl { max-height: calc(100dvh - var(--titlebar-h) - var(--strip-h) - var(--pstrip-h) - var(--mbar-h) - 20px); }
  #app #panel { margin-bottom: var(--mbar-h); max-height: 52vh; }
  #app:not(.no-inspector) #gl { max-height: calc(100dvh - var(--titlebar-h) - 52vh - var(--mbar-h)); }
  #video-bar { bottom: calc(var(--strip-h) + var(--pstrip-h) + var(--mbar-h) + 6px); }
}

/* Bottom-sheet grabber — signals the inspector is a sheet on touch layouts */
@media (max-width: 1024px) {
  #app #panel::before { content: ''; flex: none; width: 38px; height: 4px; border-radius: 2px;
    background: var(--line-2); margin: 0 auto 6px; }
}

/* Transient toast (export/save feedback) */
#toast { position: fixed; top: calc(var(--titlebar-h) + 14px); left: 50%; z-index: 80;
  transform: translateX(-50%) translateY(-8px); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 9px 15px; font-size: var(--fz-sm); color: var(--text);
  box-shadow: var(--shadow-2); backdrop-filter: blur(12px); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease); max-width: min(90vw, 420px); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-color: var(--rec); color: var(--rec); }

/* ── Live GLSL code editor — right-docked overlay ─────────────────────────────── */
#code-editor { position: fixed; top: var(--titlebar-h); right: 0; bottom: 0; width: min(480px, 42vw); z-index: 70;
  display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--chrome);
  border-left: 1px solid var(--line); backdrop-filter: saturate(160%) blur(20px); box-shadow: var(--shadow-2); }
#code-editor[hidden] { display: none; }
#code-editor header { display: flex; align-items: center; justify-content: space-between; }
#code-editor header strong { font-size: var(--fz-eyebrow); text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); font-weight: 600; }
#code-editor .mini { width: auto; }
#code-close { background: transparent; color: var(--muted); padding: 0 6px; }
#code-close:hover { color: var(--text); filter: none; }
#code-src { flex: 1; min-height: 0; resize: none; width: 100%; background: var(--s-0); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; tab-size: 2;
  font: 12px/1.55 ui-monospace, "SF Mono", "Space Mono", monospace; white-space: pre; overflow: auto; }
#code-src:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.code-err { background: color-mix(in srgb, var(--rec) 14%, transparent); border: 1px solid var(--rec); color: var(--rec);
  border-radius: var(--r-2); padding: 8px 10px; font: 11px/1.45 ui-monospace, monospace; white-space: pre-wrap; max-height: 130px; overflow: auto; }
.code-err[hidden] { display: none; }
#code-editor .note code { background: var(--s-0); padding: 1px 4px; border-radius: 4px; color: var(--text); }
@media (max-width: 640px) { #code-editor { width: 100vw; } }

/* Auto-generated uniform controls (Code effect) */
.code-uniforms { display: flex; flex-direction: column; gap: 6px; max-height: 34%; overflow-y: auto; padding-right: 2px; }
.code-uniforms:empty { display: none; }
.code-uniforms .u-row { display: flex; align-items: center; gap: 10px; font-size: var(--fz-xs); color: var(--muted); }
.code-uniforms .u-name { flex: none; width: 120px; font-family: ui-monospace, monospace; color: var(--text); display: flex; justify-content: space-between; gap: 6px; }
.code-uniforms .u-name output { color: var(--muted); }
.code-uniforms input[type="range"] { flex: 1; }
.code-uniforms .u-vec { display: flex; gap: 4px; flex: 1; }
.code-uniforms .u-vec input { width: 100%; background: var(--s-0); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-1); padding: 3px 5px; font: 11px ui-monospace, monospace; }

/* Code editor toolbar (presets + shader library) */
.code-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.code-toolbar select { height: 27px; flex: 1 1 90px; min-width: 84px; font-size: var(--fz-xs); }
.code-toolbar .mini { width: auto; flex: none; padding: 6px 8px; }

/* Text layer list (Photoshop-style) */
.layer-list { display: flex; flex-direction: column; gap: 3px; flex: none; max-height: 168px; overflow-y: auto; padding-right: 2px; }
.layer-list:empty { display: none; }
.layer-row { display: flex; align-items: center; gap: 3px; padding: 4px 5px; border-radius: var(--r-2);
  background: var(--s-0); border: 1px solid var(--line); cursor: pointer; font-size: var(--fz-xs); }
.layer-row:hover { background: var(--s-2); }
.layer-row.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.layer-row .lr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.layer-row button { background: transparent; color: var(--muted); padding: 2px 4px; border-radius: var(--r-1); width: auto; }
.layer-row button:hover { color: var(--text); background: var(--s-3); filter: none; }
.layer-row button svg { width: 13px; height: 13px; }
.layer-row .lr-del:hover { color: var(--rec); }

/* Text panel: grouped fill-effect box + roomier fold */
.grp-sub { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s-0); }
.grp-sub select { width: 100%; }
/* Text fold grows to fill the sidebar when open (like Effects), so the layer list
   + all controls get the full height instead of a cramped fixed cap. */
.text-fold { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.text-fold[open] { flex: 1 1 auto; min-height: 200px; }
.text-fold[open]::details-content { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.text-fold[open] > .fold-body { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
.side-fold:not(.fx-fold):not(.text-fold)[open] > .fold-body { max-height: 52vh; }