/* jarchi one notice area (notices.js): on a phone every notice floats under the top bar in the same place, one at a
   time; the others wait invisible. The lesson under them never changes size. */
@media (max-width: 959px) {
  .room { position: relative; }
  .room > :is(.conn-banner, .rejoin, .pj-note, .catchup, .pres-note, .pres-back) {
    position: absolute; z-index: 15;
    top: calc(var(--nt-top, var(--rbar-h)) + 6px); inset-inline: var(--gut); margin: 0;
    /* The two insets set the width: a card's own width (presence's 100 %) would push it off the left edge. */
    width: auto; max-width: none;
  }
  /* A student's upright phone: the page is docked under the header; the notice sits under the page. */
  .room[data-nt-at="below"] > :is(.conn-banner, .rejoin, .pj-note, .catchup, .pres-note, .pres-back) { top: var(--nt-y); }
  .room > .nt-wait { visibility: hidden; pointer-events: none; animation: none; }
  /* The iPhone line: one row, a card like the others, «باشه» beside the words. */
  .room > .pj-note {
    flex-wrap: nowrap; gap: 10px; padding: 4px; padding-inline-start: 14px; min-height: var(--tap);
    border: 1px solid var(--accent-line); border-radius: var(--r-pop);
    background: var(--surface-raised); box-shadow: var(--shadow-2);
    font-size: var(--fs-sm); font-weight: var(--fw-b); line-height: 1.5;
  }
  .room > .pj-note > span { flex: 1 1 auto; min-width: 0; }
  .room > .pj-note > .btn { flex: none; }
  .room > .pj-note > .pj-note-ic, .room > #pj-ios > .pj-note-ic { flex: 0 0 20px; } /* (over student.css's #pj-ios > span) */
  .room > #pj-ios > span:not(.pj-note-ic) { flex: 1 1 auto; }
  /* The teacher's speaking chip (the lesson's top corner) is never under a notice: it steps below it. */
  /* Under the page the notice and the pinned message stack: the pin steps below the notice, never under it. */
  .room[data-nt-at="below"] .stg-frame > .ov-pin { top: max(calc(var(--lesson-b, 0px) + 54px), var(--nt-b, 0px)); }
  .room[data-nt-at="top"] .room-main > #speaking.is-chip { top: max(calc(var(--lesson-t, 0px) + 8px), var(--nt-b, 0px)); }
}
.pj-note-ic { flex: 0 0 20px; display: grid; place-items: center; width: 20px; height: 20px; color: var(--accent-ink); }
.pj-note-ic > svg { width: 20px; height: 20px; }
/* «نوبت توئه!», the student's biggest moment: nothing covers it. The pinned message and the chat lines step aside
   (their place kept, so nothing moves) until the student answers; notices.js holds the notices meanwhile. */
.room[data-floor="offered"] :is(.ov-pin, .ov-feed) { visibility: hidden; pointer-events: none; }
/* A wide screen (round 5 design #1): the lines under the top bar (the connection, the teacher's cut, catch-up) float
   over the class's top edge, one at a time (notices.js), instead of pushing the whole class down. (#room: over
   conn.css's own margins, which load later.) */
@media (min-width: 960px) {
  .room { position: relative; }
  #room > :is(.conn-banner, .rejoin, .catchup, .pj-note) {
    position: absolute; z-index: 15;
    top: calc(var(--nt-top, 0px) + 8px); inset-inline: 0; margin: 0 auto;
    width: min(560px, calc(100% - 2 * var(--gut)));
  }
  #room > .nt-wait { visibility: hidden; pointer-events: none; animation: none; }
}