/* V1.108 — the visible room-code control copies a real invite URL with clear outcome feedback. */
body:not(.maintenance-mode) #roomPill[data-copy-state="pending"] #copyRoom,
body:not(.maintenance-mode) #copyRoomLobby[data-copy-state="pending"] {
  position: relative !important;
  cursor: wait !important;
  opacity: 0.82 !important;
}

body:not(.maintenance-mode) #roomPill[data-copy-state="pending"] #copyRoom::after,
body:not(.maintenance-mode) #copyRoomLobby[data-copy-state="pending"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  width: 12px !important;
  height: 12px !important;
  margin: -6px 0 0 !important;
  border: 2px solid rgba(104, 199, 241, 0.28) !important;
  border-top-color: #7dd8ff !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation: room-invite-copy-spin 620ms linear infinite !important;
  pointer-events: none;
}

body:not(.maintenance-mode) #roomPill[data-copy-state="copied"] {
  border-color: rgba(98, 218, 166, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(104, 232, 177, 0.18),
    0 0 20px rgba(63, 192, 139, 0.22) !important;
}

body:not(.maintenance-mode) #roomPill[data-copy-state="copied"] #copyRoom,
body:not(.maintenance-mode) #copyRoomLobby[data-copy-state="copied"] {
  color: #dffff0 !important;
  -webkit-text-fill-color: currentColor !important;
  filter: saturate(1.08) brightness(1.04) !important;
}

body:not(.maintenance-mode) #roomPill[data-copy-state="error"] {
  border-color: rgba(229, 93, 93, 0.76) !important;
  box-shadow: 0 0 18px rgba(203, 63, 63, 0.18) !important;
}

@keyframes room-invite-copy-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 720px) {
  body:not(.maintenance-mode) #roomPill[data-copy-state="pending"] #copyRoom {
    padding-right: 23px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.maintenance-mode) #roomPill[data-copy-state="pending"] #copyRoom::after,
  body:not(.maintenance-mode) #copyRoomLobby[data-copy-state="pending"]::after {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  body:not(.maintenance-mode) #roomPill:is([data-copy-state="copied"], [data-copy-state="error"]),
  body:not(.maintenance-mode) #roomPill[data-copy-state="pending"] #copyRoom {
    border: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}