/* Hamburger + backdrop, mobile/touch breakpoint, large/low-DPI displays, report-a-bug bubble + panel, native <select> popup theming. */
  /* Hamburger + backdrop — hidden on desktop, revealed at mobile widths */
  .nav-hamburger {
    display: none;
    background: none; border: none; color: var(--text); cursor: pointer;
    padding: 6px; border-radius: 7px; line-height: 0;
  }
  .nav-hamburger:hover { background: var(--surface-2); }
  .nav-hamburger svg { width: 22px; height: 22px; }
  .nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }

  /* ─── Mobile / touch (≤768px) ──────────────────────────────────────── */
  @media (max-width: 768px) {
    /* The sidebar stacks UNDER the feed on phones, so the Composition slot's full-size
       preview repeated the exact template the feed card just showed — users read it as
       their upload getting "doubled and overlapped" (bug report, Android). The slot's
       only mobile job is change-template, so it collapses to a thumbnail row; the feed
       card remains the template's one full-size home. */
    .comp-slot { display: flex; align-items: center; gap: 10px; }
    .comp-slot img { width: 58px; height: 58px; aspect-ratio: auto; flex: 0 0 auto;
                     border-radius: 8px; margin: 6px 0 6px 6px; }
    .comp-slot-empty { aspect-ratio: auto; flex-direction: row; justify-content: flex-start;
                       padding: 12px; gap: 10px; }
    .comp-slot-empty svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .comp-slot-label { order: 1; flex: 1; min-width: 0; text-align: left; background: transparent;
                       font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .comp-slot-change { order: 2; position: static; inset: auto; opacity: 1; background: transparent;
                        padding-right: 12px; font-size: 11px; color: var(--accent); flex: 0 0 auto; }

    /* NOTE: no backdrop-filter/transform here — either would make the header the containing
       block for the fixed .mode-toggle drawer, trapping it in the header bar. Opaque bg instead. */
    header {
      padding: 10px 14px; gap: 10px;
      position: sticky; top: 0; z-index: 60;
      background: var(--bg);
    }
    header h1 { font-size: 15px; }
    #headerSub { display: none; }
    .theme-toggle { margin-left: auto; }
    .nav-hamburger { display: inline-flex; }
    .nav-backdrop { display: block; }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    /* Mode nav becomes a right-side slide-in drawer (reuses the same buttons) */
    .mode-toggle {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: min(80vw, 300px);
      flex-direction: column; align-items: stretch; gap: 4px;
      padding: 64px 14px 24px;
      background: var(--bg); border-left: 1px solid var(--border);
      box-shadow: -14px 0 44px var(--shadow-strong);
      transform: translateX(100%); transition: transform 0.24s ease;
      z-index: 80; overflow-y: auto;
    }
    body.nav-open .mode-toggle { transform: translateX(0); }
    .mode-toggle .mode-btn {
      text-align: left; font-size: 15px; padding: 13px 14px; border-radius: 9px;
    }
    /* Create ▾ inside the drawer: full-width row, submenu expands INLINE and
       indented (the desktop floating dropdown looked pasted-on over the drawer) */
    .nav-create { display: block; width: 100%; }
    .nav-create > .mode-btn { width: 100%; }
    .nav-create-menu {
      position: static; display: none; box-shadow: none; border: 0;
      background: none; padding: 0 0 4px 16px; min-width: 0;
    }
    .nav-create.open .nav-create-menu { display: flex; }
    .nav-create-menu button { font-size: 14.5px; padding: 11px 14px; }

    /* Layouts stack to a single column; page scrolls naturally (no nested traps).
       align-content:start packs the stacked rows to the top — without it, grid stretches the
       rows to fill min-height and leaves a gap when a tab's content is short (e.g. Generate). */
    .layout {
      grid-template-columns: 1fr !important;
      height: auto !important; min-height: calc(100vh - 57px);
      align-content: start;
    }
    .sidebar {
      border-right: none; border-bottom: 1px solid var(--border);
      overflow: visible;
    }
    .sidebar-inner { overflow: visible; padding: 16px 14px; }
    .main { overflow: visible; }
    .canvas-area { overflow-y: visible; padding: 16px 14px; }

    /* Scene mode on phones: the artwork IS the page — feed first, desk controls below.
       Grid items honor `order`, so no DOM surgery; desktop keeps controls left. */
    #sceneLayout .main { order: -1; }
    /* scroll target clears the sticky header when jumping to a fresh generation */
    #sceneLayout #feedWrap { scroll-margin-top: 64px; }

    /* 16px inputs stop iOS from auto-zooming the viewport on focus */
    textarea, input[type=text], input[type=number], input[type=search], select {
      font-size: 16px;
    }

    /* Side-panel layouts (character editor, admin, template detail) stack to one column */
    .inv-layout, .admin-grid, .admin-shell, .tmpl-detail-grid { grid-template-columns: 1fr !important; }
    .inv-layout, .inv-doll-panel { overflow: visible; }
    .inv-doll-panel { border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); }

    /* Modals become near-full-width sheets with comfy padding */
    .modal { width: 100%; max-width: 94vw; max-height: 90vh; padding: 18px 16px; border-radius: 14px; }
    .modal-actions { flex-wrap: wrap; }
    .modal-cancel, .modal-save { flex: 1; min-width: 44%; padding: 11px 14px; font-size: 14px; }

    /* Touch-friendly tap targets for the small pill buttons */
    .char-tab { padding: 9px 12px; }
    /* Tabs + Favorite/Share in one row: scroll sideways instead of overflowing */
    .char-tabbar { overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
    .char-tabbar::-webkit-scrollbar { display: none; }
    .char-tabbar > * { flex: 0 0 auto; }
    .char-tabbar > div { padding-left: 10px; }
  }

  /* ─── Large / low-DPI displays ─────────────────────────────────────────
     All px sizing was tuned on a 2× Retina laptop (~1512 CSS px of layout).
     On wide 1× monitors (1080p/1440p/4K-at-1×) the same UI renders physically
     tiny with acres of empty canvas. Zoom the whole interface up in steps so
     every size class lands back near the intended ~1500px working width. */
  @media (min-width: 1750px) { html { zoom: 1.2; } }
  @media (min-width: 2100px) { html { zoom: 1.4; } }
  @media (min-width: 2600px) { html { zoom: 1.6; } }
/* ── report-a-bug bubble + panel ── */
.bugFab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: 21px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.28); transition: transform .12s;
}
.bugFab:hover { transform: scale(1.08); }
.bugHeadBtn { display: none; background: none; border: 0; color: inherit; font-size: 17px;
              cursor: pointer; padding: 6px; }
@media (max-width: 768px) {
  .bugFab { display: none; }
  .bugHeadBtn { display: inline-flex; }
}
.ref-row { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.ref-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ref-name { font-weight: 700; font-size: 13.5px; }
.ref-owner, .ref-when { font-size: 11.5px; color: var(--text-muted); }
.ref-stats { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.ref-who { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.ref-chip { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border-strong);
            border-radius: 999px; color: var(--text-dim); }
.recipe-ov {
  position: fixed; inset: 0; z-index: 72; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.recipe-box {
  width: min(440px, 100%); max-height: calc(100dvh - 60px); overflow-y: auto;
  /* --surface is translucent — opaque plate, same lesson as the bug panel */
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 16px; padding: 18px;
}
.rc-scenes {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 8px;
  scrollbar-width: thin;
}
.rc-tile {
  position: relative; flex: 0 0 84px; height: 84px; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--border-strong); cursor: pointer; background: var(--surface-2);
}
.rc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-tile span {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; text-align: center;
  padding: 2px 3px; background: rgba(0,0,0,.6); color: #fff;
}
.rc-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bugPanel {
  display: none; position: fixed; right: 18px; bottom: 76px; z-index: 70;
  width: min(400px, calc(100vw - 28px));
  /* A portrait phone screenshot in the annotator makes the panel TALLER THAN THE
     SCREEN — fixed at the bottom, it grew right past the top edge and carried the
     textarea off-screen ("couldn't type after uploading SS"). Cap it and scroll;
     the canvas keeps its touch-action:none for drawing, scrolling works elsewhere. */
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto; overscroll-behavior: contain;
  /* --surface is translucent — force an opaque plate so the page never bleeds through */
  background: var(--bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong); border-radius: 16px; padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.bugPanel.open { display: block; }
@media (max-width: 768px) {
  .bugPanel { right: 14px; left: 14px; bottom: 14px; width: auto;
              max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }
}
.bugPanel textarea {
  width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px;
}
.bugPanel .bugCanvasWrap { margin-top: 10px; display: none; }
.bugPanel canvas { width: 100%; border-radius: 10px; border: 1px solid var(--border);
                   cursor: crosshair; touch-action: none; display: block; }

  /* Native <select> popups: the OS draws the option list, and without a declared
     color-scheme it paints a LIGHT popup while the options inherit the page's light
     text — white-on-white until hovered (the dark-mode dropdown bug). Declare the
     scheme so native widgets match the theme, and give options solid colors (they
     can't use the color-mix vars — the popup ignores translucency). */
  :root { color-scheme: dark; }
  [data-theme="light"] { color-scheme: light; }
  select option { background: #17171a; color: #ececec; }
  [data-theme="light"] select option { background: #ffffff; color: #1a1612; }