/* jarchi reactions (reactions.js): a student's «واکنش» in the bar and its picker; the bubbles that float up over the
   stage (small, a few at a time, moved by transform and opacity only); the teacher's counter on the stage; the
   summary after the class. Colours from the status family: «فهمیدم» green, «نفهمیدم» orange, «تکرار کنید»
   turquoise, «آفرین» amber, ❤ rose. */

.react-slot:empty { display: none; }

/* ---------- the picker: above the bar ---------- */
.rx-pick {
  position: fixed; z-index: 25;
  bottom: calc(var(--cbar-h) + env(safe-area-inset-bottom) + 8px);
  inset-inline: 0; margin-inline: auto;
  width: min(440px, calc(100vw - 24px));
  padding: 8px;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pop);
  box-shadow: var(--shadow-2);
  transform-origin: bottom center;
  animation: kit-pop var(--t-med) var(--ease);
}
/* A wide screen: above the student's «واکنش» (the bar's end), like «بیشتر». */
@media (min-width: 960px) {
  .rx-pick { inset-inline-start: auto; inset-inline-end: max(12px, env(safe-area-inset-left)); margin-inline: 0; width: min(420px, calc(100vw - 24px)); transform-origin: bottom left; }
}
.rx-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rx-opt {
  appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; min-width: 0; padding: 6px 2px;
  border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink);
  font-size: var(--fs-xs); font-weight: var(--fw-b); line-height: 1.4;
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.rx-opt-word { white-space: nowrap; }
.rx-opt-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--on-solid); background: var(--c); /* white on light, near-black on the dark scheme's softer fills */
}
.rx-opt-ic .ic { width: 22px; height: 22px; stroke-width: 2; }
@media (hover: hover) { .rx-opt:not(:disabled):hover { background: var(--hover); } }
.rx-opt:not(:disabled):active { transform: scale(.94); background: var(--press); }
.rx-opt:disabled { opacity: .4; cursor: default; }
.rx-note { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.rx-note:empty { display: none; }
:is(.rx-opt, .rx-float)[data-kind="got"] { --c: var(--rx-got); }
:is(.rx-opt, .rx-float)[data-kind="lost"] { --c: var(--rx-lost); }
:is(.rx-opt, .rx-float)[data-kind="again"] { --c: var(--rx-again); }
:is(.rx-opt, .rx-float)[data-kind="bravo"] { --c: var(--rx-bravo); }
:is(.rx-opt, .rx-float)[data-kind="heart"] { --c: var(--rx-heart); }
:is(.rx-opt, .rx-float):is([data-kind="heart"], [data-kind="bravo"]) .ic { fill: currentColor; }
/* A narrow screen: the words would not fit under five icons side by side above 360 px; they get smaller. */
@media (max-width: 380px) { .rx-opt { font-size: var(--fs-micro); } .rx-opt-ic { width: 36px; height: 36px; } }

/* ---------- the bubbles: up from the stage's bottom corner (the end side: the messages have the start) ---------- */
.rx-layer {
  position: absolute; z-index: 4;
  bottom: 12px; inset-inline-end: 44px; /* room for the sway, inside the stage */
  width: 0; height: 0;
  pointer-events: none;
}
/* The teacher's camera in that corner: the bubbles rise above it; in the messages' corner (which then moved to
   this one): the bubbles take the camera's side, above it. */
.stg[data-cam="1"]:has(#stage-cam[data-corner="end-bottom"]) .rx-layer { bottom: 150px; }
.stg[data-cam="1"]:has(#stage-cam[data-corner="start-bottom"]) .rx-layer { inset-inline-end: auto; inset-inline-start: 60px; bottom: 150px; }
.rx-float {
  position: absolute; bottom: 0; inset-inline-end: -18px;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c); color: var(--on-solid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  opacity: 0;
  animation: rx-up var(--dur, 2.2s) cubic-bezier(.25, .6, .35, 1) both;
  will-change: transform, opacity;
}
.rx-float .ic { width: 20px; height: 20px; stroke-width: 2.2; }
@keyframes rx-up {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: 1; transform: translate(calc(var(--dx) * .2), -18px) scale(1.05); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--rise))) scale(.92); }
}
@media (max-width: 599px), (max-height: 540px) {
  .rx-layer { bottom: 8px; inset-inline-end: 36px; }
  .rx-float { width: 30px; height: 30px; inset-inline-end: -15px; }
  .rx-float .ic { width: 17px; height: 17px; }
  @keyframes rx-up {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    12% { opacity: 1; transform: translate(calc(var(--dx) * .15), -14px) scale(1); }
    70% { opacity: .9; }
    100% { opacity: 0; transform: translate(calc(var(--dx) * .6), calc(-.7 * var(--rise))) scale(.9); }
  }
}
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .room[data-role="student"] .rx-layer { bottom: 58px; }
  .room[data-role="student"][data-chrome="off"] .rx-layer { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-float { animation: rx-still 1.6s linear both; }
  @keyframes rx-still { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 1; } }
}

/* ---------- the teacher's counter: the stage's top corner (the start side; who speaks is on the end side) ---------- */
.rx-count {
  position: absolute; z-index: 4;
  top: 10px; inset-inline-start: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  pointer-events: none;
}
.rx-count[hidden] { display: none; }
.rx-c {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-2), inset 0 0 0 1.5px var(--c);
  font-size: var(--fs-s); font-weight: var(--fw-b); line-height: 1.6;
  animation: kit-pop var(--t-med) var(--ease);
}
.rx-c .ic { width: 18px; height: 18px; color: var(--c); }
.rx-c-lost { --c: var(--rx-lost); }
.rx-c-again { --c: var(--rx-again); }
/* A teacher's phone keeps the folded pen in that corner: the counter goes to the middle. */
@media (max-width: 699px), (max-height: 600px) {
  .room[data-role="teacher"] .rx-count { inset-inline-start: 50%; transform: translateX(50%); align-items: center; }
}

/* ---------- after the class: «نفهمیدم» by minute ---------- */
.rx-record h2 { display: flex; align-items: center; gap: 8px; }
.rx-totals { margin-bottom: 8px; }
.rx-sub { margin: 12px 0 6px; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-b); }
.rx-chart { direction: rtl; }
.rx-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 96px; padding-top: 20px;
  border-bottom: 1px solid var(--line);
}
.rx-bar {
  position: relative; flex: 1 1 0; min-width: 2px; max-width: 24px;
  height: calc(var(--v) * 100%); min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
}
.rx-bar.zero { background: transparent; }
.rx-peak {
  position: absolute; bottom: 100%; inset-inline: -12px; margin-bottom: 2px;
  color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-x); text-align: center; line-height: 1.4;
}
.rx-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); }
.rx-hard { margin: 0; padding-inline-start: 20px; font-size: var(--fs-sm); line-height: 1.9; }
.rx-none { margin: 0; color: var(--muted); font-size: var(--fs-sm); }