/* ============================================================
   boring board – mobile.css
   Responsive layer for phones & small tablets (≤ 820px).
   Loaded after style.css — overrides only, no base changes.
   ============================================================ */

@media (max-width: 820px) {

  /* ── stop the page itself from scrolling / rubber-banding ── */
  html, body { overflow: hidden; height: 100%; position: fixed; width: 100%; }
  .canvas-wrap { touch-action: none; }
  .canvas-wrap canvas { touch-action: none; }

  /* ── top bar: compact ── */
  .topbar { padding: 0 8px; gap: 4px; }
  .tb-sep { display: none; }
  .logo { font-size: 13px; }
  .board-title { width: 96px; font-size: 11px; }
  .tb-r { gap: 3px; }
  .bbp-upbtn { padding: 5px 9px; font-size: 12px; margin-left: 4px; }

  /* ── drawing toolbar: vertical left rail → horizontal bottom bar ── */
  .app-body { position: relative; }
  .dtb {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 56px;
    flex-direction: row; align-items: center; justify-content: flex-start;
    padding: 0 6px; gap: 2px;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-top: 1px solid var(--border);
    z-index: 90;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dtb::-webkit-scrollbar { display: none; }
  .dtb-group { flex-direction: row; width: auto; padding: 0 2px; }
  .dtb-sep { width: 1px; height: 26px; margin: 0 4px; }
  .dtb-btn { width: 42px; height: 42px; }

  /* ── icon rail: keep, but slimmer, and clear the bottom bar ── */
  .ir { padding-bottom: 60px; }

  /* ── side panel: overlay drawer instead of pushing the canvas ── */
  .sp {
    position: absolute; left: 48px; top: 0; bottom: 56px;
    width: min(78vw, 320px); max-width: 320px;
    z-index: 85;
    box-shadow: 12px 0 32px rgba(0,0,0,.45);
    border-right: 1px solid var(--border);
  }
  .sp.closed { width: 0; min-width: 0; box-shadow: none; border-right: none; }

  /* ── canvas gets the whole remaining space ── */
  .canvas-wrap { padding-bottom: 0; }

  /* ── floating bits: lift above the bottom toolbar ── */
  .zoom-bar { bottom: 66px !important; right: 10px !important; transform: scale(.92); transform-origin: bottom right; }
  .opts-bar { max-width: 100vw; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── widgets: never wider than the screen ── */
  .fw { max-width: 92vw; }

  /* ── modals: full-width cards, scrollable ── */
  #widget-modal > div, #theme-modal > div, .bbp-card {
    width: 94% !important; max-width: 94vw !important;
    max-height: 86vh; overflow-y: auto;
  }

  /* ── toast: clear the bottom toolbar ── */
  .toast { bottom: 70px !important; }
}

/* very small phones */
@media (max-width: 400px) {
  .board-title { display: none; }
  .logo { font-size: 12px; }
}