/* jarchi look: the tokens, the base and the shared components every page builds on (pages.css, classes.css,
   prejoin.css, feedback.css… sit on top), then the class room. Plain CSS; light and dark come from the same
   tokens (prefers-color-scheme).

   Colour rules: warm near-neutral grounds; the brand is turquoise «فیروزه» (--accent); colour only for meaning.
   The status family shares one lightness and chroma and changes only the hue:
     --speak  green   a voice is on the air (my mic open, someone speaking, «آماده‌ام»)
     --ok     green   the connection is fine (same family as --speak, never the brand turquoise)
     --hand   amber   a raised hand, the queue
     --warn   orange  attention: weak connection, muted by the teacher, a lock that is on
     --danger red     end the class, remove, recording, the connection is cut
   Each has a solid (fills with white text, rings, dots), an -ink (text on cards and on its -soft), a -soft
   (quiet backgrounds) and a -line (borders).
   Older names stay and keep their meaning for the pages built on them: --live / --live-soft = attention (the
   --warn family), --ring = --speak, --hand = the hand's soft ground, --hand-ink = its text. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* grounds and text */
  --bg: #f8f5f1;
  --bg-sunken: #f0ede7;
  --card: #ffffff;
  --card-raised: #ffffff;
  --ink: #1d2227;
  --muted: #5c646b;
  --faint: #8a9096;
  --line: #e3dfd8;
  --line-strong: #cecac2;
  --scrim: rgba(24, 22, 19, .42);

  /* the brand: turquoise «فیروزه» */
  --accent: #197c7c;
  --accent-strong: #086868;
  --accent-ink: #ffffff;
  --accent-soft: #ddf7f7;
  --accent-line: #a0dbda;

  /* the status family (one lightness and chroma, five hues) */
  --speak: #298144;
  --speak-ink: #1b6c36;
  --speak-soft: #e5f7e7;
  --speak-line: #b3d9b9;
  --ok: var(--speak);
  --ok-ink: var(--speak-ink);
  --ok-soft: var(--speak-soft);
  --hand-solid: #976000;
  --hand-ink: #7f4f00;
  --hand: #fdefdd;
  --hand-line: #e5c9a3;
  --warn-solid: #a65322;
  --warn: #8d4315;
  --warn-soft: #ffece1;
  --warn-line: #f0c3ac;
  --danger: #ac4947;
  --danger-ink: #923a38;
  --danger-soft: #ffeae8;
  --danger-line: #f3bfbb;
  --on-solid: #ffffff;

  /* older names (kept for the pages built on them) */
  --live: var(--warn-solid);
  --live-soft: var(--warn-soft);
  --ring: var(--speak);

  /* shape, space, type, depth */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --tap: 44px;
  --tap-lg: 56px;
  --shadow-1: 0 1px 2px rgba(40, 33, 24, .05), 0 1px 1px rgba(40, 33, 24, .03);
  --shadow-2: 0 10px 30px rgba(40, 33, 24, .12), 0 2px 6px rgba(40, 33, 24, .06);
  --focus: var(--accent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141210;
    --bg-sunken: #100e0b;
    --card: #1d1b18;
    --card-raised: #24221f;
    --ink: #edebe7;
    --muted: #aeaaa2;
    --faint: #85817a;
    --line: #32302c;
    --line-strong: #45423c;
    --scrim: rgba(0, 0, 0, .6);

    --accent: #74c1c0;
    --accent-strong: #88d0cf;
    --accent-ink: #0b1a1a;
    --accent-soft: #0d3030;
    --accent-line: #115e5e;

    --speak: #7ac58b;
    --speak-ink: #8ed59c;
    --speak-soft: #1b301f;
    --speak-line: #345d3e;
    --hand-solid: #dba65a;
    --hand-ink: #e9b770;
    --hand: #362712;
    --hand-line: #694d22;
    --warn-solid: #eb9b71;
    --warn: #faac84;
    --warn-soft: #3a2418;
    --warn-line: #72462f;
    --danger: #f2938d;
    --danger-ink: #ffa49e;
    --danger-soft: #3c2220;
    --danger-line: #74423f;
    --on-solid: #141210;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  font-feature-settings: "ss01" 0;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.45; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent-soft); }

.wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* The wordmark: a small turquoise mark (three voice bars) before «جارچی». */
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 20px; }
.brand h1 { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; margin: 0; letter-spacing: 0; }
.brand h1::before {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 13v6M16 9v14M22 12v8'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
}
@media (prefers-color-scheme: dark) {
  .brand h1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg stroke='%230b1a1a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 13v6M16 9v14M22 12v8'/%3E%3C/g%3E%3C/svg%3E"); }
}
.brand span { color: var(--muted); font-size: var(--fs-sm); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-1);
}
.card h2 { font-size: 17px; margin: 0 0 4px; font-weight: 700; }
.hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 12px; }

/* ---------- buttons ----------
   .btn          the main action (turquoise, full width by default)
   .btn.ghost    a second action (outlined)
   .btn.quiet    a third action (text only)
   .btn.danger   end / remove (red)
   .btn.small    auto width; .btn.tiny compact (still a 44px target) */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 10px 18px;
  min-height: 48px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  width: 100%;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn.ghost { background: var(--card); color: var(--accent-strong); border-color: var(--line-strong); }
.btn.quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn.danger { background: var(--danger); color: var(--on-solid); }
.btn.ghost.danger, .btn.danger-line { background: var(--card); color: var(--danger-ink); border-color: var(--danger-line); }
.btn.small { width: auto; min-height: var(--tap); padding: 8px 16px; font-size: var(--fs-sm); }
.btn.tiny { width: auto; min-height: var(--tap); min-width: var(--tap); padding: 4px 12px; font-size: 13.5px; border-radius: 10px; white-space: nowrap; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a.btn { text-decoration: none; }
/* Hover only where there is a mouse (a tap must not leave a button looking pressed). */
@media (hover: hover) {
  .btn:where(:not(:disabled)):hover { background: var(--accent-strong); }
  .btn.ghost:where(:not(:disabled)):hover { background: var(--accent-soft); border-color: var(--accent-line); }
  .btn.quiet:where(:not(:disabled)):hover { background: var(--bg-sunken); color: var(--ink); }
  .btn.danger:where(:not(:disabled)):hover { background: var(--danger-ink); }
  .btn.ghost.danger:where(:not(:disabled)):hover, .btn.danger-line:where(:not(:disabled)):hover { background: var(--danger-soft); }
}

.linkrow { display: flex; gap: 8px; align-items: center; }
.linkbox {
  flex: 1;
  min-width: 0;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- forms ---------- */
label { display: block; font-weight: 700; margin-bottom: 6px; }
input[type=text], input[type=search], textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--card);
  margin-bottom: 12px;
}
input[type=text]::placeholder, input[type=search]::placeholder, textarea::placeholder { color: var(--faint); }
input[type=text]:focus, input[type=search]:focus, textarea:focus { border-color: var(--accent); }
.err { color: var(--danger-ink); font-size: var(--fs-sm); margin: 8px 0 0; min-height: 1em; }
.err.quiet { margin: 0 0 12px; }
.err.quiet:empty { display: none; }

/* ---------- small things ---------- */
.top { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 16px; gap: 8px; }
.top h1 { font-size: 20px; margin: 0; font-weight: 800; }

/* A status pill (not a button): turquoise by default, .bad for trouble, .ok / .warn / .hand by meaning. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  white-space: nowrap;
}
.chip.ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.hand { background: var(--hand); color: var(--hand-ink); }
.chip.bad { background: var(--danger-soft); color: var(--danger-ink); }

/* A quiet label next to a name («معلم»، «خودت»). */
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
  padding: 0 8px;
  white-space: nowrap;
}

/* A one-line message in a soft box: .notice (attention), .notice.ok, .notice.bad. */
.notice {
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--r); padding: 10px 14px; margin: 0 0 12px; font-weight: 700; font-size: 15px;
}
.notice.ok { background: var(--ok-soft); color: var(--ok-ink); }
.notice.bad { background: var(--danger-soft); color: var(--danger-ink); }

.avatar {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 800;
  line-height: 1;
}

.foot { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ---------- tables (attendance) ---------- */
.tablewrap { overflow-x: auto; margin: 6px 0 14px; }
table.att { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.att th { text-align: start; color: var(--muted); font-weight: 700; padding: 6px 8px; font-size: 13px; border-bottom: 1px solid var(--line); }
table.att td { padding: 10px 8px; border-top: 1px solid var(--line); }
table.att tbody tr:first-child td { border-top: 0; }
table.att td .tag { margin-inline-start: 6px; }
.st { font-weight: 700; }
.st-present { color: var(--ok-ink); }
.st-late, .st-left_early { color: var(--warn); }
.st-absent { color: var(--muted); }

/* ====================================================================================================
   The class room (app.js Session)
   Wide (≥ 960px): a header bar, the main column and the people panel beside it.
   Narrow: one column; the teacher's mic (with jumps to the hands and the people) and the student's big button
   live in a bar at the bottom, in the thumb zone. A phone on its side puts a student's stage and button side
   by side. data-role on .room says whose page it is; data-floor (student) says where they stand.
   ==================================================================================================== */

.wrap.room-wrap { max-width: none; padding: 0; }
body.in-room .ver { display: none; }

.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .ic.flip { transform: scaleX(-1); }

.room {
  --gut: 16px;
  --rbar-h: 60px;
  --bar-h: 0px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--bar-h);
}

/* ---------- the header bar ---------- */
.rbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  min-height: var(--rbar-h);
  padding: max(8px, env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) 8px max(var(--gut), env(safe-area-inset-left));
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.rbar-title { flex: 1 1 0; min-width: 0; }
.rbar h1 {
  margin: 0; font-size: 17px; font-weight: 800; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rbar-sub {
  display: flex; align-items: center; gap: 6px;
  margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5;
  white-space: nowrap; overflow: hidden;
}
.rbar-sub { gap: 14px; }
.rbar-n { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.rbar-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rbar-sub .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.rbar-clock { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.rbar-rec { display: contents; }
.rbar-end { flex: none; margin-inline-start: 6px; }

/* The connection dot: tap for the details. */
#conn {
  appearance: none;
  flex: none;
  min-height: var(--tap);
  padding: 4px 14px 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
#conn::before {
  content: "";
  flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--faint);
}
#conn[data-q="ok"]::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
#conn[data-q="weak"]::before { background: var(--warn-solid); box-shadow: 0 0 0 3px var(--warn-soft); }
#conn[data-q="weak"]::after { content: "، ضعیف"; color: var(--warn); margin-inline-start: -6px; }
#conn[data-q="wait"]::before { animation: room-blink 1.2s ease-in-out infinite; }
#conn[data-q="down"] { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
#conn[data-q="down"]::before { background: var(--danger); }
@media (hover: hover) { #conn:hover { border-color: var(--line-strong); } }
@keyframes room-blink { 50% { opacity: .3; } }

/* Banners rejoin.js and prejoin.js put under the header. */
.room > .rejoin, .room > .pj-unlock, .room > .pj-note {
  width: min(100% - 2 * var(--gut), 1272px);
  margin: 12px auto 0;
}
.room .pj-unlock { position: relative; top: auto; min-height: 72px; margin-bottom: 0; }
.room > .pj-unlock { width: min(100% - 2 * var(--gut), 760px); }

/* ---------- the body: main column + people ---------- */
.room-body {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px max(var(--gut), env(safe-area-inset-right)) 24px max(var(--gut), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
}
.room-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel, .room-side {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-bottom: 6px; }
.panel h2, .side-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 800; }
.panel h2 .ic, .side-head h2 .ic { width: 18px; height: 18px; color: var(--muted); }
.count {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 24px; padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--muted);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.count:empty { display: none; }
.hands .count { background: var(--hand); color: var(--hand-ink); }
.duo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }

.room .err.quiet {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--danger-soft);
  color: var(--danger-ink);
  font-weight: 700;
  font-size: 14px;
}
.room .pj-guide { margin: 0; }

/* ---------- voice levels ---------- */
.lvl { --l: 0; display: inline-flex; align-items: center; gap: 3px; height: 22px; flex: none; }
.lvl i {
  display: block; width: 4px; height: 100%; border-radius: 2px;
  background: var(--speak);
  transform: scaleY(.18);
  transition: transform .12s ease-out;
}
.lvl i:nth-child(1), .lvl i:nth-child(5) { transform: scaleY(max(.18, min(.6, calc(var(--l) * .7)))); }
.lvl i:nth-child(2), .lvl i:nth-child(4) { transform: scaleY(max(.18, min(.85, calc(var(--l) * 1)))); }
.lvl i:nth-child(3) { transform: scaleY(max(.18, min(1, calc(var(--l) * 1.3)))); }

/* ---------- the teacher's mic ---------- */
.speak {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 108px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s;
}
.speak-ic {
  --l: 0;
  display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  transition: background-color .15s, box-shadow .12s ease-out;
}
.speak-ic .ic { width: 30px; height: 30px; }
.speak-txt { display: flex; flex-direction: column; min-width: 0; }
.speak b { font-size: 21px; font-weight: 800; line-height: 1.4; }
.speak small { color: var(--muted); font-size: 14px; }
.speak .lvl { height: 34px; gap: 4px; visibility: hidden; }
.speak .lvl i { width: 5px; }
.speak[data-state="on"] { background: var(--speak-soft); border-color: var(--speak-line); }
.speak[data-state="on"] .speak-ic { background: var(--speak); color: var(--on-solid); box-shadow: 0 0 0 calc(var(--l) * 9px) var(--speak-line); }
.speak[data-state="on"] b { color: var(--speak-ink); }
.speak[data-state="on"] .lvl { visibility: visible; }
.speak[data-state="wait"] .speak-ic { background: var(--bg-sunken); color: var(--muted); }
.speak:disabled { cursor: progress; }
@media (hover: hover) {
  .speak:not(:disabled):hover { border-color: var(--accent-line); }
  .speak[data-state="on"]:not(:disabled):hover { border-color: var(--speak); }
}
.tbar-jumps { display: none; }

/* ---------- who speaks now (teacher) ---------- */
.now-list, .hand-list { list-style: none; margin: 0; padding: 0; }
.now-list li, .hand-list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.now-list li:first-child, .hand-list li:first-child { border-top: 0; }
.now-list .who, .hand-list .who { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; }
.now-line { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.now-st { color: var(--muted); font-size: 13px; }
.now-st.live { color: var(--speak-ink); font-weight: 700; }
.now-st.warn { color: var(--warn); font-weight: 700; }
.now-list .acts, .people .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
li.empty { display: block; padding: 6px 0 2px; }
li.empty p { margin: 0; color: var(--muted); }
li.empty .hint { margin-top: 2px; font-size: 13px; color: var(--faint); }

/* ---------- the hand queue (teacher) ---------- */
.qn {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--hand); color: var(--hand-ink);
  font-weight: 800; font-size: 15px;
}
.hand-list li:first-child .qn { background: var(--hand-solid); color: var(--on-solid); }
.since { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.hand-list .btn.tiny { min-width: 84px; }

/* ---------- class tools (teacher) ---------- */
.tool-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.tool {
  display: flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
  min-width: 0;
}
.tool[hidden] { display: none; }
.tool-ic {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--bg-sunken); color: var(--muted);
}
.tool-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.tool-txt b { font-size: 15px; font-weight: 700; }
.tool-txt small { color: var(--muted); font-size: 12.5px; }
.tool[data-on="1"] { background: var(--warn-soft); border-color: var(--warn-line); }
.tool[data-on="1"] .tool-ic { background: var(--warn-solid); color: var(--on-solid); }
.tool[data-on="1"] small { color: var(--warn); }

/* An on/off switch (a button with aria-pressed; the tile's title names it). */
.switch {
  appearance: none; position: relative; flex: none;
  width: 58px; height: var(--tap);
  border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer;
  border-radius: var(--r-pill);
  touch-action: manipulation;
}
.switch::before {
  content: ""; position: absolute; inset-inline: 4px; top: 9px; height: 26px;
  border-radius: var(--r-pill); background: var(--line-strong);
  transition: background-color .15s;
}
.switch::after {
  content: ""; position: absolute; top: 12px; inset-inline-start: 7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .15s;
}
.switch[aria-pressed="true"]::before { background: var(--warn-solid); }
.switch[aria-pressed="true"]::after { transform: translateX(-24px); }
[dir="ltr"] .switch[aria-pressed="true"]::after { transform: translateX(24px); }
.switch:disabled { opacity: .5; cursor: progress; }

/* ---------- the people ---------- */
.side-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.side-head h2 { min-height: 32px; }
.people-search { margin: 0 0 4px; min-height: var(--tap); }
.people-none { margin: 8px 0 0; }
.people { list-style: none; padding: 0; margin: 0; }
.people li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.people li:first-child { border-top: 0; }
.people li[hidden] { display: none; }
.people .avatar { width: 38px; height: 38px; font-size: 15px; }
.people li[data-role="student"] .avatar, .now-list .avatar { background: var(--bg-sunken); color: var(--muted); }
.people li[data-hand]:not([data-hand="0"]) .avatar { background: var(--hand); color: var(--hand-ink); }
.avatar { transition: box-shadow .12s; }
li.speaking .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 5px var(--speak); }
.who { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badges:empty { display: none; }
.badge {
  font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap;
  border-radius: var(--r-pill); padding: 0 8px;
  background: var(--accent-soft); color: var(--accent-strong);
}
.badge.hand { background: var(--hand); color: var(--hand-ink); }
.badge.live { background: var(--speak-soft); color: var(--speak-ink); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.wave { font-size: 12px; color: var(--speak-ink); font-weight: 700; }
.avatar.big { width: 44px; height: 44px; font-size: 17px; }

/* ---------- a student's stage and floor ---------- */
.stage {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 8px 4px;
}
.stage-ring { --l: 0; position: relative; display: grid; place-items: center; padding: 8px; border-radius: 50%; }
.stage-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--speak-soft);
  opacity: 0;
  transform: scale(calc(1 + var(--l) * .32));
  transition: transform .12s ease-out, opacity .2s;
}
.avatar.huge {
  position: relative;
  width: 112px; height: 112px;
  font-size: 44px;
  background: var(--accent-soft); color: var(--accent-strong);
}
.avatar.huge .ic { width: 44px; height: 44px; stroke-width: 1.6; }
.stage[data-mode="speaking"] .stage-ring::before, .stage[data-mode="me"] .stage-ring::before { opacity: 1; }
.stage[data-mode="speaking"] .avatar.huge, .stage[data-mode="me"] .avatar.huge { box-shadow: 0 0 0 3px var(--speak); }
.stage[data-mode="me"] .avatar.huge { background: var(--speak); color: var(--on-solid); }
.stage[data-mode="quiet"] .avatar.huge, .stage[data-mode="absent"] .avatar.huge, .stage[data-mode="wait"] .avatar.huge, .stage[data-mode="down"] .avatar.huge { background: var(--bg-sunken); color: var(--muted); }
.stage[data-mode="down"] .stage-line { color: var(--danger-ink); }
.stage-name { margin: 14px 0 0; font-size: 20px; font-weight: 800; line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.stage-line { margin: 0; color: var(--muted); font-size: 15px; }
.stage[data-mode="speaking"] .stage-line, .stage[data-mode="me"] .stage-line { color: var(--speak-ink); font-weight: 700; }
.stage[data-mode="absent"] .stage-line { margin-top: 12px; }

.floor { text-align: center; padding: 4px 8px; }
.floor .lead { margin: 0 0 2px; font-size: 19px; font-weight: 800; line-height: 1.6; }
.floor .lead.live { color: var(--speak-ink); }
.floor .hint { margin: 0; font-size: 14.5px; }
.floor .notice { margin: 0; }
.countdown { margin: 6px 0 0; color: var(--speak-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.room[data-floor="hand"] .floor .lead { color: var(--hand-ink); }
.room[data-floor="offered"] .floor {
  padding: 16px;
  border: 2px solid var(--speak);
  border-radius: var(--r-lg);
  background: var(--speak-soft);
}
.room[data-floor="offered"] .floor .lead { color: var(--speak-ink); font-size: 21px; }

.thumb { display: flex; flex-direction: column; gap: 6px; }
.thumb-btn { display: flex; }
.bigbtn { min-height: 64px; font-size: 20px; border-radius: 18px; }
.bigbtn .ic { width: 26px; height: 26px; }
.bigbtn.ready {
  background: var(--speak); color: var(--on-solid);
  min-height: 72px; font-size: 23px;
  box-shadow: 0 0 0 0 var(--speak-line);
  animation: room-offer 1.6s ease-in-out infinite;
}
.bigbtn.ready:disabled { animation: none; }
@keyframes room-offer { 50% { box-shadow: 0 0 0 7px var(--speak-line); } }
@media (hover: hover) { .bigbtn.ready:where(:not(:disabled)):hover { background: var(--speak-ink); } }

.room-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.room-foot .btn.small { min-height: var(--tap); }
.room-leave .ic { width: 18px; height: 18px; }
/* «گزارش مشکل» (feedback.js) sits in the foot here: quiet, not floating. */
.room .fb-spacer { height: auto; }
.room .fb-open {
  position: static;
  min-height: var(--tap);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

/* ---------- sheets: the connection details, «پایان کلاس؟» ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim);
}
.sheet-card {
  width: 100%; max-width: 440px;
  max-height: 90dvh; overflow-y: auto;
  background: var(--card-raised); color: var(--ink);
  border-radius: 20px 20px 0 0;
  padding: 20px 18px max(18px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow-2);
}
.sheet-card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.sheet-card .hint { margin-bottom: 16px; }
.sheet-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-row > .btn { flex: 1 1 140px; }
@media (min-width: 600px) {
  .sheet { align-items: center; }
  .sheet-card { border-radius: 20px; }
}
.conn-state { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 18px; }
.conn-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); }
.conn-sheet[data-q="ok"] .conn-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.conn-sheet[data-q="weak"] .conn-dot { background: var(--warn-solid); box-shadow: 0 0 0 4px var(--warn-soft); }
.conn-sheet[data-q="down"] .conn-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.conn-sheet[data-q="weak"] .conn-head { color: var(--warn); }
.conn-sheet[data-q="down"] .conn-head { color: var(--danger-ink); }
.conn-tip { margin: 0 0 12px; }
.conn-tech { margin: 0 0 16px; color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.conn-tech .net { color: var(--muted); }

/* ---------- wide screens: the main column and the people side by side ---------- */
@media (min-width: 960px) {
  .room { --gut: 24px; --rbar-h: 68px; }
  .rbar h1 { font-size: 19px; }
  .room-body {
    max-width: 1320px;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px 24px;
    padding: 20px var(--gut) 28px;
  }
  .room-side {
    position: sticky;
    top: calc(var(--rbar-h) + 20px);
    max-height: calc(100dvh - var(--rbar-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .room[data-role="student"] .room-main {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    padding: 24px 32px 20px;
    gap: 14px;
  }
  .room[data-role="student"] .thumb { width: min(100%, 420px); margin: 4px auto 0; }
  .room[data-role="student"] .stage { padding-top: 12px; }
}
@media (min-width: 1200px) {
  .room-body { grid-template-columns: minmax(0, 1fr) 380px; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- narrow screens: the bottom bars ---------- */
@media (max-width: 959px) {
  .room .rec-badge { order: 10; flex: 1 1 100%; justify-content: center; }
  /* The teacher: mic + jumps to the hands and the people. */
  .room[data-role="teacher"] { --bar-h: calc(78px + env(safe-area-inset-bottom)); }
  .room[data-role="teacher"] .micbox {
    position: fixed; z-index: 12; inset-inline: 0; bottom: 0;
    display: flex; align-items: stretch; gap: 8px;
    padding: 10px max(12px, calc((100% - 720px) / 2 + 16px), env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(40, 33, 24, .08);
  }
  .micbox .speak {
    flex: 1 1 auto;
    min-height: 56px;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border-radius: 16px;
    box-shadow: none;
  }
  .micbox .speak-ic { width: 44px; height: 44px; }
  .micbox .speak-ic .ic { width: 22px; height: 22px; }
  .micbox .speak b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .micbox .speak small { display: none; }
  .micbox .speak .lvl { display: none; }
  .micbox .speak { grid-template-columns: auto minmax(0, 1fr); padding-inline-end: 12px; }
  .tbar-jumps { display: flex; gap: 8px; }
  .tbar-btn {
    position: relative;
    appearance: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    min-width: 64px; min-height: 56px; padding: 4px 6px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--card); color: var(--ink);
    font-size: 12px; font-weight: 700; line-height: 1.4;
    cursor: pointer; touch-action: manipulation;
  }
  .tbar-btn .ic { width: 22px; height: 22px; color: var(--muted); }
  .nbadge {
    position: absolute; top: 3px; inset-inline-end: 5px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: var(--bg-sunken); color: var(--muted);
    font-size: 12px; font-weight: 800; line-height: 1;
  }
  .nbadge:empty { display: none; }
  .tbar-btn:first-child .nbadge { background: var(--hand-solid); color: var(--on-solid); }

  /* The student: the big button and the quiet foot, in the thumb zone. */
  .room[data-role="student"] { --bar-h: calc(140px + env(safe-area-inset-bottom)); }
  .room[data-role="student"] .thumb {
    position: fixed; z-index: 12; inset-inline: 0; bottom: 0;
    gap: 2px;
    padding: 12px max(16px, calc((100% - 560px) / 2)) max(4px, env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(40, 33, 24, .08);
  }
  .room[data-role="student"] .room-main {
    min-height: calc(100dvh - var(--rbar-h) - var(--bar-h) - 8px);
    justify-content: center;
  }
  .room-foot .btn.small, .room .fb-open { font-size: 13px; }
}
@media (max-width: 370px) {
  .micbox .speak-w { display: none; }
}
/* A tablet upright: the same column, a larger stage. */
@media (min-width: 600px) and (max-width: 959px) and (min-height: 700px) {
  .avatar.huge { width: 148px; height: 148px; font-size: 58px; }
  .stage-name { font-size: 24px; }
  .floor .lead { font-size: 21px; }
}
@media (prefers-color-scheme: dark) and (max-width: 959px) {
  .room[data-role="teacher"] .micbox, .room[data-role="student"] .thumb { box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
}

/* A phone on its side: little height, so the header scrolls away and a student's stage sits beside the floor. */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .room { --rbar-h: 56px; }
  .rbar { position: static; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .room-body { max-width: 900px; padding-top: 12px; }
  .room[data-role="teacher"] { --bar-h: calc(72px + env(safe-area-inset-bottom)); }
  .room[data-role="teacher"] .micbox { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .room[data-role="student"] { --bar-h: 0px; }
  .room[data-role="student"] .room-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px 20px;
    min-height: calc(100dvh - var(--rbar-h) - 28px);
  }
  .room[data-role="student"] .room-main > * { grid-column: 2; }
  .room[data-role="student"] .room-main > .stage { grid-column: 1; grid-row: 1 / span 8; padding: 0; align-self: start; position: sticky; top: 12px; }
  .room[data-role="student"] .thumb {
    position: static; padding: 0; border: 0; box-shadow: none; background: none;
  }
  .avatar.huge { width: 88px; height: 88px; font-size: 34px; }
  .stage-name { margin-top: 8px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bigbtn.ready, #conn[data-q="wait"]::before { animation: none; }
  .lvl i, .stage-ring::before, .switch::after { transition: none; }
}