/* 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(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn-line);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px;
  font-size: 15px; font-weight: 700;
}
.rejoin > span { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; }
.rejoin > span::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--warn-solid);
  animation: rejoin-blink 1.2s ease-in-out infinite;
}
@keyframes rejoin-blink { 50% { opacity: .3; } }
.rejoin.back { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--speak-line); }
.rejoin.back > span::before { background: var(--ok); animation: none; }
.rejoin.gaveup { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-line); }
.rejoin.gaveup > span::before { background: var(--danger); animation: none; }
.rejoin .btn { width: auto; flex: none; }
@media (prefers-reduced-motion: reduce) { .rejoin > span::before { animation: none; } }