/* ──────────────────────────────────────────────────────────────────────────
 * MobileBottomSheet — slide-up modal sheet for mobile.
 *
 * The sheet uses transform-only animation (no width/height/top changes) so it
 * stays on the compositor. Backdrop is a full-screen <button> for free
 * dismiss-on-tap accessibility. When closed the sheet sits *just* below the
 * viewport (translateY(100%)) so it isn't focusable but is paint-ready.
 * ────────────────────────────────────────────────────────────────────────── */

.mbs {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
}

.mbs.is-open {
  pointer-events: auto;
}

.mbs__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 29, 35, 0);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.22s ease;
}

.mbs.is-open .mbs__backdrop {
  background: rgba(31, 29, 35, 0.45);
}

.mbs__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78vh;
  background: var(--brand-cream);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: 0 -16px 40px rgba(31, 29, 35, 0.18);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.16, 1), max-height 0.22s ease;
  display: flex;
  flex-direction: column;
  /* Respect iOS home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Compact mode — sheet shrinks to leave room for the canvas above. The
 * `max-height` transition is on the same property as the regular sheet so
 * height changes (e.g. user selecting a text element while the sheet is
 * already open) animate rather than snap. */
.mbs.is-compact .mbs__sheet {
  max-height: 55vh;
}

.mbs.is-open .mbs__sheet {
  transform: translateY(0);
}

.mbs__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.65rem 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.mbs__handle-grip {
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.12s ease;
}

.mbs__handle:hover .mbs__handle-grip {
  background: var(--brand-pink);
}

.mbs__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* let internal scroll containers take over */
  overflow: hidden;
}

/* Body scroll-lock helper — applied while a sheet is open. */
body.has-bottom-sheet {
  overflow: hidden;
  touch-action: none;
}
