/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1280px){
  .ai-helper.ai-rail{width:280px}
}
@media(max-width:1024px){
  .sidebar{width:220px}
  .ai-helper.ai-rail{width:240px}
  .props-panel.open{width:280px}
  .props-inner{width:280px}
}
@media(max-width:768px){
  .sidebar{display:none}
  /* 2026-05-25 — old rule was `.ai-helper.ai-rail{display:none}` with
     a stale TODO "bottom-sheet on mobile." That left mobile users with
     ZERO way to reach Community / Build / Assistant. With #topbarNav
     also hidden (per Luke's spec), nav was completely broken on phones.
     Fix: on mobile, the rail slides in from the LEFT as a drawer.
     Same hamburger tap that opens the right sidebar (boards/templates)
     ALSO opens this left drawer (Community nav + Smart Templates +
     chat). Single tap → both surfaces. body.left-rail-open is the
     toggle, wired in events.js openSidebar/closeSidebar. */
  .ai-helper.ai-rail {
    display: flex !important;
    flex-direction: column;   /* stack rail content; let body fill the height */
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    /* 2026-06-01 (Luke): anchor top→bottom instead of height:calc(100vh-…).
       Mobile 100vh includes/excludes browser chrome inconsistently, so the
       calc left the white panel ending early with the dimmed page showing
       through below — a "gap" that looked detached. top + bottom on a
       position:fixed element spans the exact visible height, no vh math, so
       the white background always reaches the bottom (connected, no seam). */
    bottom: 0;
    width: 86vw;
    max-width: 340px;
    transform: translateX(-100%);
    transition: transform var(--motion-slide);
    z-index: 49; /* below the backdrop (50) and right sidebar */
    background: var(--surface, #fff);
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
    border-right: 1px solid var(--border, #e5e5e5);
    overflow-y: auto;
  }
  body.left-rail-open .ai-helper.ai-rail {
    transform: translateX(0);
  }
  .topbar{padding:0 0.75rem}
  .board-name-input{min-width:120px}
  .editor-area{padding:1rem 0.75rem}
  .tablet-frame{border-radius:20px;padding:12px}
}
/* Language Picker */
.lang-picker { position: relative; margin-left: 0.5rem; }
.lang-picker-btn { background: none; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.35rem 0.7rem; border-radius: 8px; font-size: 0.75rem; cursor: pointer; font-family: var(--f-sans); display: flex; align-items: center; gap: 0.35rem; transition: all 0.3s; white-space: nowrap; }
.lang-picker-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.lang-picker-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; background: var(--surface-dark, #13111a); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 0.6rem; display: none; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; box-shadow: 0 16px 48px rgba(0,0,0,0.6); z-index: 1001; min-width: 320px; max-height: 70vh; overflow-y: auto; }
.lang-picker-dropdown.open { display: grid; }
.lang-option { padding: 0.45rem 0.55rem; border-radius: 8px; font-size: 0.73rem; color: rgba(255,255,255,0.65); cursor: pointer; text-align: center; transition: all 0.2s; white-space: nowrap; }
.lang-option:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lang-option.active { background: var(--amber, #e8a33d); color: var(--ink, #0d0b0e); font-weight: 700; }
@media (max-width: 768px) {
  .lang-picker { position: fixed; top: 0.8rem; right: 3.5rem; z-index: 1001; }
  .lang-picker-dropdown { min-width: 280px; right: -1rem; }
}

/* ═══════════ PROPS DELETE BUTTON ═══════════
   Lives at the bottom of the props panel. Visually quarantined with a
   top border + extra margin so a parent's eye doesn't drift onto it
   while editing label/spoken/image fields. Color = same as Fitzgerald
   "neg" (red), matching the per-tile ✕ button on the grid.            */
.props-danger-group { border-top:1px solid var(--border-light); padding-top:1rem; margin-top:1.5rem }
.props-delete-btn{ width:100%;padding:0.7rem;border-radius:var(--radius-sm);
  background:var(--surface);border:1.5px solid var(--fk-neg);color:var(--fk-neg);
  font-weight:700;font-size:0.85rem;cursor:pointer;transition:all var(--transition) }
.props-delete-btn:hover{ background:var(--fk-neg);color:#fff }
.props-delete-btn:active{ transform:scale(0.98) }

/* Hamburger lives in the topbar but is hidden on desktop. */
.topbar-hamburger{display:none;width:36px;height:36px;border-radius:var(--radius-sm);
  align-items:center;justify-content:center;font-size:1.2rem;color:var(--nav-text);
  background:rgba(255,255,255,0.06);transition:background var(--transition);flex-shrink:0}
.topbar-hamburger:hover{background:rgba(255,255,255,0.14)}

/* Backdrop layer that sits between the slid-out sidebar and the rest of
   the page. Tap to dismiss. Inert on desktop. */
.sidebar-backdrop{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:45;
  background:rgba(0,0,0,0.35);opacity:0;transition:opacity var(--motion-fade)}
.sidebar-backdrop.show{display:block;opacity:1}
/* Dedicated dimmer for the Edit Tile drawer (2026-06-22, Luke / Codex).
   A SEPARATE element from #sidebarBackdrop so the two drawers never
   fight over one .show flag — props can be open at the same time as a
   rail, and the rail-close paths clear #sidebarBackdrop unconditionally.
   z-index 55 sits just under the props panel (60) and over the sidebar
   (50). Mobile-only by convention: nothing adds .show on desktop. Same
   dim + fade token as the sidebar so the two read identically. */
.props-backdrop{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:55;
  background:rgba(0,0,0,0.35);opacity:0;transition:opacity var(--motion-fade)}
.props-backdrop.show{display:block;opacity:1}

/* ═══════════ MOBILE / TABLET RESPONSIVE ═══════════
   The builder was designed desktop-first (sidebar + canvas + props
   panel = 3 columns) and broke completely on phones — toolbar overflowed,
   sidebar squeezed the canvas to nothing, props panel slid OVER the
   tablet frame instead of beside it.

   Strategy below 1024px:
     • Sidebar collapses to a slide-in drawer (off-screen by default,
       toggled via existing left-side hamburger pattern). Until a
       hamburger is wired (next pass), the sidebar is hidden in mobile;
       templates remain reachable from the empty-state CTA.
     • Props panel becomes a bottom sheet that slides up from below
       when .open — full-width, max 70vh tall, scrolls inside.
     • Topbar tightens: brand-tag hidden, button labels truncated.
     • Tablet frame loses its chrome (the rounded-bezel "tablet" look)
       so tiles use the full screen.
   Phone-specific (≤640px) tightens further.

   This is the FIRST mobile-friendly pass. It does not yet ship a
   hamburger — that's a follow-up. But the builder no longer crashes
   visually on a phone, which is the bug Luke flagged. */

@media (max-width: 1024px) {
  /* Topbar: drop the tagline and tighten gaps so buttons don't wrap. */
  .topbar { padding:0 0.75rem; gap:0.4rem }
  .topbar-hamburger { display:flex }
  .topbar-brand-tag { display:none }
  .topbar-divider { display:none }
  .topbar-nav { gap:0.1rem; margin-right:0.25rem }
  .topbar-nav-link { padding:0.35rem 0.5rem; font-size:0.75rem }
  .topbar-actions { gap:0.3rem; flex-wrap:nowrap }
  .topbar-btn { padding:0.4rem 0.6rem; font-size:0.72rem }
  /* Sidebar collapses out of the layout flow — drawer pattern.
     `display:flex` here OVERRIDES the legacy ≤768px `display:none` rule
     (line ~760) so the sidebar can slide in/out as a drawer instead of
     vanishing entirely. */
  /* 2026-05-25 — anchor changed from left:0 to right:0 so the right
     sidebar (boards/templates) slides in from the RIGHT on mobile,
     leaving the LEFT half free for the .ai-helper.ai-rail drawer
     (Community nav / Smart Templates / chat) which slides in from
     the LEFT. Two non-overlapping side drawers. Hamburger tap opens
     both at once on a phone via openSidebar() (events.js); the
     editor in the center is what gets squeezed when both are open,
     but the user's actively choosing to open them — and Tap-backdrop
     closes both via the existing #sidebarBackdrop listener. */
  .sidebar {
    display:flex !important;
    position:fixed; top:var(--topbar-h); bottom:0; right:0; z-index:50;
    width:280px; max-width:80vw; transform:translateX(100%);
    transition:transform var(--motion-slide); box-shadow:var(--shadow-xl);
  }
  .sidebar.open { transform:translateX(0) }
  .app-layout { position:relative }
  .editor-area { padding:1rem 0.75rem 0.5rem; flex:1 1 auto; min-width:0 }
  /* Tablet "frame" loses its chunky bezel on small screens — wasted px. */
  .tablet-frame { padding:6px; border-radius:14px; max-width:100% }
  .tablet-frame::before { display:none }
  .tablet-screen { border-radius:10px }
  /* Edit Tile panel: a RIGHT-edge drawer, byte-for-byte the same motion
     as .sidebar above (the "winner"). 2026-06-22 (Luke): it used to be a
     bottom sheet (translateY) with no backdrop — a different motion
     grammar that felt like a "complete takeover". Now it slides in from
     the right over a dimmed board, identical to My Library / Ask-bar-
     style, so the whole builder shares one fluid surface. z-index 60
     keeps it above the sidebar (50) and its backdrop (45). */
  .props-panel {
    position:fixed; top:var(--topbar-h); bottom:0; right:0; left:auto;
    z-index:60; width:280px; max-width:80vw; transform:translateX(100%);
    transition:transform var(--motion-slide);
    border-left:1px solid var(--border-light); border-top:none;
    border-radius:0; box-shadow:var(--shadow-xl);
  }
  .props-panel.open { transform:translateX(0) }
  .props-inner { width:100%; padding:1rem 1.25rem 1.5rem; height:100%; max-height:none; overflow-y:auto }
}

@media (max-width: 640px) {
  /* Phone: trim topbar nav links — they're a wash on a 360px viewport. */
  .topbar-brand-name { font-size:0.95rem }
  .topbar-nav { display:none }
  .editor-toolbar { flex-wrap:wrap; gap:0.3rem; margin-bottom:0.75rem }
  .editor-toolbar-group { padding:0.2rem }
  .toolbar-btn { padding:0.35rem 0.55rem; font-size:0.75rem }
  /* Tile grid: tiles already auto-size from .cols-N — let them breathe. */
  .tile-grid { gap:0.35rem; padding:0.5rem }
  /* Props image button row: stack into single column on the narrowest
     screens so 4 buttons (Upload/Camera/Search/Remove) don't crush each
     other into 1-letter widths. */
  .props-image-btns { flex-direction:column }
  .props-upload-btn { width:100% }
  /* Push modal: make it usable on a phone — full bleed, scrollable,
     bigger tap targets on the tab bar. The default 500px max-width
     gets squeezed to 90% viewport which clips the WiFi/Serial/More
     tab labels. */
  .modal { padding:1.25rem; max-height:88vh; overflow-y:auto; width:96% }
  .push-tab { padding:0.55rem 0.5rem; font-size:0.72rem }
  .push-tab-bar { gap:0.1rem }
  /* Topbar action buttons collapse labels → emoji-only on the
     narrowest viewport so all five fit without wrapping. */
  .topbar-btn { padding:0.4rem 0.55rem; font-size:0.78rem }
}