/* jarchi chat on the stage and the pinned message (overlay.js). The messages float in the stage's bottom corner
   on a see-through backing that reads on the paper and on the dark ground alike; nothing here takes a tap (the
   board under it does). The pinned message sits at the top of the stage, above the page, so it never covers the
   writing. Only transform and opacity move (cheap on phones); reduced motion keeps a plain fade. */

/* ---------- the messages ---------- */
.ov-feed {
  position: absolute; z-index: 4;
  bottom: 12px; inset-inline-start: 12px;
  width: min(340px, calc(100% - 24px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.ov-feed[hidden] { display: none; }
.ov-feed:empty { display: none; }
/* The teacher's pen near the corner: the messages step back. */
.ov-feed[data-dim="1"] { opacity: .12; }
.ov-msg {
  max-width: 100%;
  padding: 5px 12px 6px; border-radius: 14px;
  background: rgba(24, 23, 21, .66); color: #f6f4f0;
  font-size: var(--fs-sm); font-weight: var(--fw-m); line-height: 1.6;
  overflow-wrap: anywhere; text-align: start;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  animation: ov-in 260ms var(--ease) both;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.ov-msg.out { opacity: 0; transform: translateY(-8px); }
/* The name and the text as one paragraph, at most 3 lines here (2 on a phone); the chat has it whole. */
.ov-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ov-who { font-weight: var(--fw-x); color: #b9e3e1; margin-inline-end: 6px; }
.ov-who bdi { unicode-bidi: isolate; }
/* The teacher's: stronger, with the «معلم» badge (and they stay longer: overlay.js). */
.ov-msg[data-role="teacher"] {
  background: rgba(14, 92, 92, .9); color: #fff;
  font-weight: var(--fw-b);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ov-msg[data-role="teacher"] .ov-who { color: #fff; }
.ov-tag {
  display: inline-block; margin-inline-start: 6px; padding: 0 7px;
  border-radius: var(--r-pill); background: #fff; color: #0e5c5c;
  font-size: var(--fs-xs); font-weight: var(--fw-x); line-height: 1.6; vertical-align: 1px;
}
.ov-tag.ov-q { background: #f3d9a4; color: #5a3a08; }
@keyframes ov-in { from { opacity: 0; transform: translateY(10px); } }

/* A phone: the last two, a little smaller, two lines each. */
@media (max-width: 599px), (max-height: 540px) {
  .ov-feed { bottom: 8px; inset-inline-start: 8px; width: min(320px, calc(100% - 16px)); gap: 4px; }
  .ov-msg { font-size: var(--fs-s); padding: 4px 10px 5px; }
  .ov-line { -webkit-line-clamp: 2; line-clamp: 2; }
  .ov-msg:nth-last-child(n+3) { display: none; } /* a window that became a phone keeps the last two */
}
/* A phone on its side: above the student's «بزرگ‌تر» (until the bars step away); and out of the way of the
   floor's card («آماده‌ام» must be unmistakable). */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .room[data-role="student"] .ov-feed { bottom: 58px; width: min(300px, 46%); }
  .room[data-role="student"][data-chrome="off"] .ov-feed { bottom: 8px; }
  .room[data-role="student"]:has(.stage-notes .floor:not([hidden])) .ov-feed { opacity: 0; }
}
/* The teacher's camera in the same corner: the messages take the other one. */
.stg[data-cam="1"]:has(#stage-cam[data-corner="start-bottom"]) .ov-feed { inset-inline-start: auto; inset-inline-end: 12px; align-items: flex-end; }

/* ---------- the pinned message: at the top of the stage, for everyone ---------- */
.ov-pin {
  flex: none; align-self: center;
  display: flex; align-items: stretch;
  width: min(680px, 100%); min-width: 0;
  border-radius: var(--r-pop);
  background: var(--card-raised); color: var(--ink);
  box-shadow: var(--shadow-2);
  animation: kit-pop var(--t-med) var(--ease);
}
.ov-pin[hidden] { display: none; }
.ov-pin-body {
  appearance: none; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 6px 12px;
  border: 0; border-radius: var(--r-pop);
  background: transparent; color: inherit; font: inherit; text-align: start;
  cursor: pointer; touch-action: manipulation;
}
@media (hover: hover) { .ov-pin-body:hover { background: var(--hover); } }
.ov-pin-ic {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
}
.ov-pin-ic .ic { width: 18px; height: 18px; }
/* One line with «…» until it is tapped open (then all of it, a few lines at most). */
.ov-pin-txt {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs-sm); line-height: 1.65;
}
.ov-pin[data-open="1"] .ov-pin-txt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.9em; overflow-y: auto; }
.ov-pin-who { font-weight: var(--fw-x); color: var(--accent-strong); margin-inline-end: 6px; }
.ov-pin-x {
  appearance: none; flex: none;
  display: grid; place-items: center;
  width: var(--tap); min-height: var(--tap);
  border: 0; border-radius: var(--r-pop);
  background: transparent; color: var(--muted); cursor: pointer;
}
.ov-pin-x .ic { width: 18px; height: 18px; }
@media (hover: hover) { .ov-pin-x:hover { background: var(--hover); color: var(--ink); } }
/* A teacher's phone folds the board tools into the pen in the stage's top corner: the pin keeps beside it. */
@media (max-width: 699px), (max-height: 600px) {
  .room[data-role="teacher"] .ov-pin { align-self: stretch; width: auto; margin: 8px 8px 0; }
  .room[data-role="teacher"] .stg:is([data-kind="board"], [data-kind="doc"]) .ov-pin { margin-inline-start: 60px; }
}
/* Who is speaking (the label in the stage's corner) moves below the pin. */
.room[data-pinned="1"] .room-main > .spk { top: calc(var(--gut) + 8px + var(--ov-pin-h, 52px)); }

/* ---------- the switch under «بیشتر»: on is the usual state, so it is the brand's colour, not a warning ---------- */
.ov-switch[aria-pressed="true"]::before { background: var(--accent); }

/* ---------- the teacher's pins in the chat ---------- */
.cm-pin { flex: none; align-self: center; color: var(--faint); padding: 0; }
.cm-pin .ic { width: 18px; height: 18px; }
.cm-pin[aria-pressed="true"] { color: var(--accent-strong); }
@media (hover: hover) { .cm-pin:hover { color: var(--accent-strong); } }
@media (hover: hover) and (pointer: fine) {
  .cm-pin:not([aria-pressed="true"]) { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
  .cm:hover .cm-pin, .cm:focus-within .cm-pin { opacity: 1; }
}
.chat-pinnext {
  flex: none; width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.chat-pinnext .ic { width: 22px; height: 22px; }
.chat-pinnext[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
@media (hover: hover) { .chat-pinnext:not([aria-pressed="true"]):hover { background: var(--hover); color: var(--ink); } }

@media (prefers-reduced-motion: reduce) {
  .ov-msg { animation: kit-fade 1ms both; transition: opacity 200ms linear; }
  .ov-msg.out { transform: none; }
}