/* Аватары: фото поверх круга или инициалы на цветном фоне */
.av-link {
  cursor: pointer;
}
.av-link:focus-visible {
  outline: 2px solid oklch(0.55 0.14 35);
  outline-offset: 2px;
}
.mlk-contact__av img,
.mlk-online__av img,
.mlk-grp__av img,
.mlk-prof__av img,
.mlk-incoming__av img,
.mlk-call__avatar img,
.cmt__av img,
.sg-card__av img,
.sg-person__av img,
.who__av img,
.conv__ava img,
.msgr__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.mlk-contact__av.av-has-img,
.mlk-online__av.av-has-img,
.mlk-grp__av.av-has-img,
.mlk-prof__av.av-has-img,
.mlk-incoming__av.av-has-img,
.mlk-call__avatar.av-has-img,
.cmt__av.av-has-img,
.sg-card__av.av-has-img,
.sg-person__av.av-has-img,
.who__av.av-has-img,
.conv__ava.av-has-img,
.msgr__ava.av-has-img {
  background: none;
  color: transparent;
  overflow: hidden;
  padding: 0;
}

/* инициалы — цвет из темы, hue задаётся в JS через --av-h */
.av-fallback {
  background: oklch(var(--av-bg-l) var(--av-bg-c) var(--av-h, 42));
  color: oklch(var(--av-fg-l) var(--av-fg-c) var(--av-h, 42));
}
.mlk .mlk-contact__av.av-fallback,
.mlk .mlk-online__av.av-fallback,
.mlk .mlk-grp__av.av-fallback,
.mlk .mlk-prof__av.av-fallback,
.mlk .mlk-incoming__av.av-fallback,
.mlk .mlk-call__avatar.av-fallback,
.conv__ava.av-fallback,
.cmt__av.av-fallback,
.sg-card__av.av-fallback,
.sg-person__av.av-fallback,
.who__av.av-fallback,
.msgr__ava.av-fallback {
  background: oklch(var(--av-bg-l) var(--av-bg-c) var(--av-h, 42));
  color: oklch(var(--av-fg-l) var(--av-fg-c) var(--av-h, 42));
  box-shadow: none;
  border-color: oklch(var(--n2));
}