.avatar {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 4px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar--pink {
  background-color: var(--avatar-bg-pink);
}

.avatar--blue {
  background-color: var(--avatar-bg-blue);
}

.avatar--purple {
  background-color: var(--avatar-bg-purple);
}

.avatar--red {
  background-color: var(--avatar-bg-red);
}

.avatar--green {
  background-color: var(--avatar-bg-green);
}

.avatar--yellow {
  background-color: var(--avatar-bg-yellow);
}

/* The base .avatar padding is for the color/initials variants only — the
   real photo must fill edge-to-edge (Figma's "pic" variant is inset-0,
   size-full, no padding), otherwise the photo renders inset inside the
   circle instead of filling it. */
.avatar--pic {
  padding: 0;
}

/* 32px size for message-bubble sender avatars (Figma's "Placeholder/Member/
   Large/No", node 89:4819) — same border/padding/crest treatment as the
   default 40px avatar, scaled down proportionally (0.8x) rather than a
   separate one-off markup. */
.avatar--sm {
  width: 32px;
  height: 32px;
  padding: 3px 1.6px;
}

.avatar--sm .avatar__crest {
  width: 28.8px;
  height: 28.8px;
}

/* .avatar--sm's own padding above and .avatar--pic's padding:0 (line 44)
   have equal specificity, so source order alone decided the winner —
   .avatar--sm came second and silently overrode .avatar--pic's edge-to-edge
   rule whenever both are applied together (a small photo avatar), reintroducing
   the exact inset-photo bug that rule exists to prevent. This combined
   selector outranks both on specificity so photo avatars stay edge-to-edge
   at every size. */
.avatar--sm.avatar--pic {
  padding: 0;
}

.avatar__crest {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.avatar__crest-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}