/* jarchi's layers on a phone (sheet.js; DESIGN-SYS.md C2, A2 §4): one sheet look for the chat, the participants,
   «بیشتر» and the rest, at three heights (peek, half = the lesson's bottom edge, full = the top bar), above the bar
   or the keyboard. The sheet is not modal at peek and half: the lesson stays live above it (no scrim). Only the
   sheet's top moves (220 ms in, 180 ms out; a short fade with reduced motion); nothing on the lesson animates. */

.lay-sheet {
  position: fixed !important; z-index: 14 !important;
  inset-inline: 0 !important; margin: 0 !important;
  width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
  display: flex !important; flex-direction: column;
  border: 1px solid var(--line) !important; border-bottom: 0 !important;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important;
  background: var(--surface-raised) !important; color: var(--ink);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .18) !important;
  padding-top: 0 !important;
  overflow: hidden;
  transition: top 220ms cubic-bezier(.05, .7, .1, 1);
  animation: lay-in 220ms cubic-bezier(.05, .7, .1, 1);
}
.lay-sheet.lay-dragging { transition: none; }
.lay-sheet[hidden] { display: none !important; }
@keyframes lay-in { from { transform: translateY(40px); opacity: .6; } }
/* The scrolling part of a sheet scrolls itself; the page never does (no pull-to-refresh, no rubber band). */
.lay-sheet > :not(.lay-grab) { min-height: 0; }
.lay-sheet .side-pane, .lay-sheet.more-menu, .lay-sheet .chat-scroll { overscroll-behavior: contain; }
.lay-sheet.more-menu { overflow-y: auto; padding: 0 8px max(8px, env(safe-area-inset-bottom)); gap: 2px; }

/* The grabber: the whole strip drags (≥ 24 px tall on its own; a module's header drags too). */
.lay-grab {
  flex: none; position: relative;
  height: 24px; margin: 0 0 -4px;
  touch-action: none; cursor: grab;
}
.lay-grab::before {
  content: ""; position: absolute; top: 9px; left: 50%;
  width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
  background: var(--line-strong);
}
.lay-sheet .side-head, .lay-sheet .chat-head { touch-action: none; }
/* The old drawn handle and the far-corner ✕ step aside: the opener, back and a swipe close a sheet. The ✕ stays for
   screen readers (first in the sheet). */
.lay-sheet.room-side::before { display: none; }
.lay-sheet .side-x, .lay-sheet .chat-x {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0;
}
.lay-sheet .side-x:focus-visible, .lay-sheet .chat-x:focus-visible {
  width: 44px !important; height: 44px !important; clip-path: none; opacity: 1; inset-inline-end: 8px; top: 8px;
}

/* A phone on its side: a side sheet at the inline end, the full height; the lesson shrinks into the rest. */
.lay-sheet[data-side="1"] {
  inset-inline-start: auto !important; inset-inline-end: 0 !important;
  width: min(44vw, 400px) !important;
  border-radius: 0 !important; border-start-start-radius: var(--r-sheet) !important; border-end-start-radius: var(--r-sheet) !important;
  border-bottom: 1px solid var(--line) !important;
  animation-name: kit-fade;
}
.lay-sheet[data-side="1"] > .lay-grab { display: none; }

/* A wide screen, for a module without a wide layout of its own (opts.wide = "dialog"): a centred card. */
.lay-sheet.lay-dialog {
  inset-inline: 0 !important; top: 10vh !important; bottom: auto !important; margin: 0 auto !important;
  width: min(480px, 92vw) !important; max-height: 80vh !important;
  border-radius: var(--r-sheet) !important; border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-3) !important; z-index: 30 !important;
  animation-name: kit-pop;
}
.lay-sheet.lay-dialog > .lay-grab { display: none; }

/* Typing on a phone: the top bar steps away so the lesson and two lines fit above the keys. */
html[data-typing="1"] .room .rbar { display: none; }
/* A live class never reloads by a pull. */
html[data-in-class="1"], html[data-in-class="1"] body { overscroll-behavior-y: none; }

/* «از کلاس بری بیرون؟»: the answer in the thumb zone, «نه، می‌مونم» first and big. */
.leave-ask .sheet-row { flex-direction: column; }
.leave-ask .sheet-row > .btn { flex: none; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lay-sheet { transition: top 100ms linear; animation: kit-fade 100ms linear; }
}