.presence { display: flex; align-items: center; flex-direction: row; }
.presence-fixed { position: fixed; top: 10px; right: 14px; z-index: 1000; }
.presence-av { width: 32px; height: 32px; border-radius: 50%; margin-left: -8px; border: 2px solid #1b1d24; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 600 14px/1 system-ui, sans-serif;
  text-decoration: none; background: #3a3f4b; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .12s; }
.presence-av:first-child { margin-left: 0; }
.presence-av { cursor: default; }
.presence-av:hover { z-index: 1; }
.presence-av img { width: 100%; height: 100%; object-fit: cover; }
.presence-me { border-color: #ff66aa; }
.presence-more { font-size: 12px; background: #2a2d36; cursor: default; }
/* Staff see everyone connected (review v8 #196): small separate avatars that wrap, never a "+N". */
.presence-full { flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: min(420px, 34vw); max-height: 52px; overflow-y: auto; scrollbar-width: thin; }
.presence-full .presence-av { width: 24px; height: 24px; margin-left: 0; font-size: 11px; border-width: 1px; }
.presence-full .presence-av:first-child { margin-left: 0; }