/* jarchi catch-up (catchup.js): while a listener hears the part they missed, a calm card under the class header (a
   card like conn.css's banner; turquoise: nothing is wrong, it is being taken care of). */
.room > .catchup {
  flex: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 8px var(--gut) 0; padding: 4px; padding-inline-start: 14px;
  min-height: var(--tap);
  border: 1px solid var(--accent-line); border-radius: var(--r-pop);
  background: var(--card-raised); color: var(--ink);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); font-weight: var(--fw-b); line-height: 1.6;
  animation: kit-pop var(--t-med) var(--ease);
}
.room > .catchup[hidden] { display: none; }
.catchup-text { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; padding-block: 6px; }
/* Two small arrows forward (it plays what you missed, a little faster); RTL: forward points left. */
.catchup-text::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 6.5v11l7-5.5zM12 6.5v11l7-5.5z'/%3E%3C/svg%3E") center / 12px no-repeat;
  transform: scaleX(-1);
}
.catchup .btn.small { width: auto; flex: none; min-height: var(--tap); }
/* A phone on its side: one slim line. */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .room > .catchup { margin-top: 4px; padding-block: 0; font-size: var(--fs-s); }
  .catchup-text { padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) { .room > .catchup { animation: none; } }