/* ==========================================================================
   Multiplayer room: invite button and per-person rings on tracks
   (js/ui/room-presence.js). People list and avatars: room-people.css
   ========================================================================== */

.room-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.room-bar[hidden] {
  display: none;
}

.room-bar.is-in-room #btn-room-invite {
  color: var(--pencil-green);
}

/* Around a track that someone else selected, is changing or is recording on: a ring in
   their colour (.room-ring-line), their avatar on it, and a record mark in the centre. */
.room-ring {
  position: absolute;
  top: 53.2%;
  left: 50%;
  width: 98%;
  height: 98%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
  animation: roomRingIn 0.25s ease-out both;
}

.room-ring-line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--room-color);
  box-sizing: border-box;
  opacity: 0.85;
}

.room-ring[data-state="selected"] .room-ring-line {
  border-style: dashed;
  opacity: 0.7;
}

.room-ring[data-state="held"] .room-ring-line {
  border-width: 3px;
}

.room-ring[data-state="rec"] .room-ring-line {
  border-width: 3px;
  animation: roomRingRec 1.1s ease-in-out infinite;
}

.room-ring[data-state="loading"] .room-ring-line {
  border-style: dotted;
  animation: roomRingSpin 2.4s linear infinite;
}

/* Who it is: their avatar sits on the ring, at about one o'clock. */
.room-ring-people {
  position: absolute;
  top: 7.6%;
  left: 74.5%;
  transform: translate(-50%, -50%);
  display: flex;
}

.room-ring[data-state="loading"] .room-ring-people {
  display: none;
}

.room-ring-people .room-avatar {
  box-shadow: 0 0 0 2px var(--paper-bg);
}

.room-ring-people .room-avatar + .room-avatar {
  margin-left: -6px;
}

/* Someone else is recording here: a red record disc over the centre button. */
.room-rec-mark {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 29.6%;
  height: 29.6%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--pencil-red);
  animation: roomRecPulse 1.1s ease-in-out infinite;
}

.room-ring[data-state="rec"] .room-rec-mark {
  display: block;
}

/* The room's first loop sets the cycle: say so under the record disc. */
.room-rec-label {
  display: none;
  position: absolute;
  top: 66.5%;
  left: 50%;
  width: 44%;
  transform: translateX(-50%);
  text-align: center;
  font: 600 9px/1.15 var(--font-main);
  letter-spacing: 0.01em;
  color: var(--graphite-dark);
}

.room-ring.is-reference .room-rec-label {
  display: block;
}

.room-rec-mark::after {
  content: '';
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: #fff;
  opacity: 0.92;
}

/* A track someone else is on does not react to the local pointer. */
.looper-track-cell.is-room-locked .track-hit-area > path,
.looper-track-cell.is-room-locked button {
  pointer-events: none !important;
}

@keyframes roomRingIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes roomRingRec {
  0%, 100% { opacity: 0.9; box-shadow: 0 0 0 0 var(--room-color); }
  50% { opacity: 0.45; box-shadow: 0 0 0 5px transparent; }
}

@keyframes roomRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pencil-red); }
  50% { box-shadow: 0 0 0 10px transparent; }
}

@keyframes roomRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .room-ring,
  .room-ring-line,
  .room-rec-mark {
    animation: none !important;
  }
}