/* Shared base for the "who's here" circle, used by both the video player
   (Player.css adds the click-to-request-pause states on top) and the
   music bar (which just shows presence, no per-avatar interaction - see
   MusicBar.css's .musicBarPresence for its size/positioning tweak). */
.presenceOverlay {
  display: flex;
  gap: 8px;
}

.avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  opacity: .75; /* "overlay en semi transparence" - background color comes from an inline style, see colorForName() in tiles.ts */
  border: 2px solid rgba(255, 255, 255, .3);
  user-select: none;
}