/* ============================================================
   Avatar — circular initial / icon bubble (28px default, sm 22px)
   ============================================================ */

.avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  overflow: hidden;
}
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-lg { width: 36px; height: 36px; font-size: 13px; }

/* When a user has uploaded a photo, it fills the circle. */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
