/* 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;
  }
  .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; }
  /* The teacher's speaking chip (the lesson's top corner) is never under a notice: it steps below it. */
  .room[data-nt] .room-main > #speaking.is-chip { top: max(calc(var(--lesson-t, 0px) + 8px), var(--nt-b, 0px)); }
}
.pj-note-ic { flex: none; width: 20px; height: 20px; color: var(--accent-ink); }