frontend/src/styles/components/_connected-users.css

/* ---------------------------------------------------------------------------
   Connected users pill (editor top bar)

   Small overlapping avatars of everyone else currently editing the
   document. Each avatar's border matches the user's collab color
   (same color as their cursor caret in the document), so it's easy
   to tell at a glance who's behind a given selection.
   --------------------------------------------------------------------------- */

.connected-users {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 4px;
}

.connected-users__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* No overflow:hidden here: the circular clip lives on the img/initials so
     the count badge can sit on top of (and slightly outside) the avatar. */
  border: 2px solid var(--border-color);
  background: var(--surface-bg);
  margin-left: -6px;
  transition: transform 120ms ease, z-index 0s;
  z-index: 1;
}
.connected-users__avatar:first-child {
  margin-left: 0;
}
.connected-users__avatar:hover {
  transform: translateY(-1px) scale(1.08);
  z-index: 3;
}
/* Keep badged avatars above their right-hand neighbour so the count
   (which sits on the right edge, where avatars overlap) stays visible. */
.connected-users__avatar:has(> .connected-users__count) {
  z-index: 2;
}

.connected-users__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.connected-users__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 50%;
}

.connected-users__count {
  position: absolute;
  bottom: -3px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--primary-color);
  color: var(--on-primary, #fff);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--surface-bg);
  font-variant-numeric: tabular-nums;
}

.connected-users__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-bg);
  color: var(--muted-color);
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--border-color);
  margin-left: -6px;
}