/* jarchi's motion, the shared part (DESIGN-SYS.md C3; A3 §7–8), loaded last: what moves points at the cause or keeps
   continuity, then stops. Only transform and opacity; every travel distance × --move (0 with reduced motion, where
   only short fades stay); durations and easings are the tokens. Nothing in the room loops forever except a real wait
   (the reconnect spinner) and the speaking level; the stage itself (the board, a page, a shared screen) never
   animates. */

/* «نوبت توئه!»: the floor's card settles from a little below; the same button turned green rings three times, then the
   ring stays still (the old box-shadow pulse repainted every frame, forever). */
@keyframes floor-in { from { opacity: 0; transform: translateY(calc(12px * var(--move))); } }
.room[data-floor="offered"] .floor { animation: floor-in var(--dur-slow) var(--ease-enter); }
.cb-thumb.ready { box-shadow: 0 0 0 3px var(--speak-line); animation: offer-ping var(--dur-breathe) var(--ease-std) 3; }
@keyframes offer-ping {
  0% { box-shadow: 0 0 0 3px var(--speak-line), 0 0 0 3px var(--speak); }
  37% { box-shadow: 0 0 0 3px var(--speak-line), 0 0 0 calc(3px + 12px * var(--move)) transparent; }
  100% { box-shadow: 0 0 0 3px var(--speak-line), 0 0 0 3px transparent; }
}
.cb-thumb.ready:disabled { animation: none; }

/* Recording: the dot pops in once and holds (WCAG 2.2.2: nothing blinks for the rest of the class). */
@keyframes rec-ping { 0% { transform: scale(calc(1 - .6 * var(--move))); opacity: .3; } 60% { transform: scale(calc(1 + .5 * var(--move))); opacity: 1; } 100% { transform: scale(1); } }
.rec-badge .rec-dot, .rec-tool[data-on="1"] .tool-ic .rec-dot, .rec-chip[data-state="on"] .rec-dot { animation: rec-ping var(--dur-ping) var(--ease-pop) 1; }
.rec-badge[data-state="paused"] .rec-dot, .rec-chip[data-state="paused"] .rec-dot { animation: none; }
.rec-badge { animation: kit-fade var(--dur-med) var(--ease-std); }

/* Waiting pulses breathe three times at most. */
.conn-banner[data-tone="info"] .conn-banner-dot { animation-iteration-count: 3; animation-duration: var(--dur-breathe); }

/* The chat's lines on the stage and the sheets: the tokens' timings. */
@keyframes ov-in { from { opacity: 0; transform: translateY(calc(10px * var(--move))); } }
.ov-msg { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-enter); transition-duration: var(--dur-fade); }
.ov-msg.out { transform: translateY(calc(-8px * var(--move))); }
@keyframes chat-in { from { opacity: 0; transform: translateY(calc(6px * var(--move))); } }
.chat-toast { animation-duration: var(--dur-med); }
@keyframes lay-in { from { transform: translateY(calc(40px * var(--move))); opacity: .6; } }
.lay-sheet { transition-duration: var(--dur-slow); animation-duration: var(--dur-slow); }

/* The hands chip and badges: a small pop, never a ticker. */
@keyframes badge-pop { from { transform: scale(calc(1 - .5 * var(--move))); opacity: 0; } }
.nbadge { animation: badge-pop var(--dur-med) var(--ease-pop); }
.hand-toast:not([hidden]) { animation: kit-pop var(--dur-med) var(--ease-enter); }

/* The class ends (or a student is removed): a fade only, no travel. */
.pg-done, #ended, #left { animation: kit-fade var(--dur-fade) var(--ease-std); }

/* Own taps: a quick press. */
.cb:not(:disabled):active .cb-ic, .cb-thumb:not(:disabled):active { transition-duration: var(--dur-tap); }

/* «صدا و لرزش» (sounds.js): the person's own sounds, vibration and motion, a sheet on a phone, a card on a laptop. */
.snd-sheet { display: flex; flex-direction: column; padding: 0 16px 12px; background: var(--surface-raised); color: var(--ink); }
.snd-sheet[hidden] { display: none; }
.snd-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; }
.snd-head h2 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-x); outline: none; }
.snd-head h2 .ic { color: var(--accent-ink); }
.snd-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.snd-label { margin: 4px 0 0; font-weight: var(--fw-b); }
.snd-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-sunken); }
.snd-opt {
  appearance: none; flex: 1 1 0; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font: inherit; font-weight: var(--fw-m); cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.snd-opt[aria-checked="true"] { background: var(--surface-raised); color: var(--accent-ink); font-weight: var(--fw-x); box-shadow: var(--shadow-1); }
.snd-hint { margin: 0; }
.snd-try { align-self: flex-start; }
.snd-row { padding-inline: 0; }