/* jarchi rejoin (rejoin.js): the banner under the class header while the class reconnects by itself. */
.rejoin {
  display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--card-raised); color: var(--ink);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-pop); padding: 10px 12px 10px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); font-weight: var(--fw-b);
}
.rejoin > span { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; line-height: 1.6; }
/* Reconnecting: a small turning ring (it is working on it, nothing to do). */
.rejoin > span::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--warn-line); border-top-color: var(--warn-solid);
  animation: rejoin-turn .9s linear infinite;
}
@keyframes rejoin-turn { to { transform: rotate(360deg); } }
.rejoin.back { border-color: var(--speak-line); }
.rejoin.back > span::before {
  animation: none; border: 0; width: 18px; height: 18px;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.rejoin.gaveup { border-color: var(--danger-line); }
.rejoin.gaveup > span::before {
  animation: none; border: 0; width: 18px; height: 18px;
  background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.rejoin .btn { width: auto; flex: none; }
@media (prefers-reduced-motion: reduce) { .rejoin > span::before { animation: none; } }
/* The attendance table: time gone beside the reconnect count («۲ · ۴۰ ثانیه»). */
.rejoin-lost { color: var(--muted); font-size: .9em; white-space: nowrap; }