/* camera.js: the teacher's camera and screen beside the voice (decision 15). Nothing here shows on a voice-only class.
   Teacher: «دوربین» is a button in the room's bottom bar (style.css .cb); the teacher's own picture is the small
   tile in the stage's corner (stage.css .stg-cam). Student: the teacher's camera is that corner tile on the stage;
   a note under the stage says what is going on with the video; «فقط صدا» is under «بیشتر». "On" is the voice-on-air
   green. */

.cam-prev {
  flex: none; display: block;
  background: #1b1916;
  object-fit: cover;
  transform: scaleX(-1); /* a self-view is a mirror */
}
.cam-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.cam-tile:disabled { cursor: progress; }
.cam-self-slot[hidden] { display: none; }

/* ---------- the teacher's video on a student's stage ---------- */
.cam-view {
  --l: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1b1916;
}
.cam-view video { display: block; width: 100%; height: 100%; object-fit: contain; background: #1b1916; }
.cam-view[data-lvl] { box-shadow: inset 0 0 0 calc(var(--l) * 4px) #7ad48f; }

/* The note under the stage («دوربین معلم روشنه…»، «تصویر معلم فعلاً نمی‌رسه…»). */
.cam-row { display: flex; flex-direction: column; align-items: center; }
.cam-row[hidden] { display: none; }
.cam-sw { display: flex; align-items: center; gap: 4px; }
.cam-sw > span { font-size: 15px; font-weight: 700; cursor: pointer; padding-inline-end: 6px; }
.cam-note {
  margin: 0; padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); color: #e6e2da;
  font-size: 13px; line-height: 1.6; text-align: center;
}
.cam-note:empty { display: none; }
/* «فقط صدا» on is a calm choice, not a warning: the switch takes the brand colour. */
.cam-tool .switch[aria-pressed="true"]::before, .cam-row .switch[aria-pressed="true"]::before { background: var(--accent); }
.cam-tool[data-on] { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .cam-view { transition: none; }
}

/* ---------- the screen share (the `screen` stage kind) ---------- */
.screen-view {
  --ar: 1.7778;
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: #1b1916;
}
.screen-view > video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.screen-view .cam-view.corner {
  position: absolute; z-index: 1;
  inset-block-end: 8px; inset-inline-start: 8px;
  width: clamp(88px, 24%, 200px);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.screen-view .cam-view.corner.other { inset-inline-start: auto; inset-inline-end: 8px; }
.screen-ask {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 15px; line-height: 1.5;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
.screen-ask .ic { width: 24px; height: 24px; }
@media (hover: hover) { .screen-ask:hover { background: var(--accent-strong); } }

/* On the stage (stage.js): the camera fills the stage's camera slot (a corner tile, or the whole stage while
   nothing else is shown), the screen fills the screen slot in its own shape, «برای دیدن بزن» in the middle. */
.stg-cam .cam-view { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.stg-screen .screen-view { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.stg-screen .screen-ask { position: relative; z-index: 1; width: auto; max-width: calc(100% - 24px); margin: 0 12px; }