/* One avatar contract for server-rendered and dynamically inserted identities.
   Legacy selectors are aliases during migration; new components use .elm-avatar.
   Presence is shown only where the caller has a real status. */
:root {
  --elm-avatar-size: 40px;
  --elm-avatar-bg: #e6efe7;
  --elm-avatar-ink: #3e604b;
  --elm-avatar-ring: var(--panel, #fff);
}
:is(.elm-avatar,
    .site-user-avatar,
    .account-avatar,
    .account-you-avatar,
    .hub-composer__avatar,
    .hub-post-card__avatar,
    .hub-request-row__avatar,
    .hub-mini-row__badge:where(:not(.is-post)),
    .elm-chat-avatar,
    .messages-avatar,
    .contacts-avatar,
    .people-avatar,
    .elm-public-post__avatar,
    .discover-post-avatar,
    .discover-avatar,
    .app-avatar,
    .site-search-result__avatar,
    .discover-search-avatar,
    .mention-avatar,
    .profile-social-avatar,
    .profile-editor-avatar,
    .invite-page__avatar,
    .space-view-avatar-wrap,
    .place-avatar-wrap,
    .community-context__avatar,
    .space-view-post-avatar-wrap,
    .post-view-avatar-wrap,
    .post-comment-avatar-wrap,
    .community-card-owner-avatar,
    .guest-public__author-avatar,
    .guest-public__rail-avatar,
    .elm-guest-discovery__avatar,
    .public-home__card-avatar,
    .public-home__rail-avatar,
    .guest-mini-avatar,
    .guest-creator-avatar) {
  box-sizing: border-box !important;
  width: var(--elm-avatar-size) !important;
  height: var(--elm-avatar-size) !important;
  min-width: var(--elm-avatar-size) !important;
  min-height: var(--elm-avatar-size) !important;
  max-width: var(--elm-avatar-size) !important;
  max-height: var(--elm-avatar-size) !important;
  flex: 0 0 var(--elm-avatar-size) !important;
  border: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  display: inline-grid !important;
  place-items: center !important;
  background: var(--elm-avatar-bg) !important;
  color: var(--elm-avatar-ink) !important;
  font: 650 16px/1 system-ui, sans-serif !important;
  text-decoration: none;
  isolation: isolate;
}
/* Absolute avatar placements on profile/people cover cards remain intact. */
:is(.elm-avatar,
    .site-user-avatar,
    .account-avatar,
    .account-you-avatar,
    .hub-composer__avatar,
    .hub-post-card__avatar,
    .hub-request-row__avatar,
    .hub-mini-row__badge:where(:not(.is-post)),
    .elm-chat-avatar,
    .messages-avatar,
    .contacts-avatar,
    .people-avatar,
    .elm-public-post__avatar,
    .discover-post-avatar,
    .discover-avatar,
    .app-avatar,
    .site-search-result__avatar,
    .discover-search-avatar,
    .mention-avatar,
    .profile-social-avatar,
    .profile-editor-avatar,
    .invite-page__avatar,
    .space-view-avatar-wrap,
    .place-avatar-wrap,
    .community-context__avatar,
    .space-view-post-avatar-wrap,
    .post-view-avatar-wrap,
    .post-comment-avatar-wrap,
    .community-card-owner-avatar,
    .guest-public__author-avatar,
    .guest-public__rail-avatar,
    .elm-guest-discovery__avatar,
    .public-home__card-avatar,
    .public-home__rail-avatar,
    .guest-mini-avatar,
    .guest-creator-avatar):not(.people-avatar):not(.public-home__card-avatar):not(.profile-editor-avatar) {
  position: relative;
}
:is(.elm-avatar,
    .site-user-avatar,
    .account-avatar,
    .account-you-avatar,
    .hub-composer__avatar,
    .hub-post-card__avatar,
    .hub-request-row__avatar,
    .hub-mini-row__badge:where(:not(.is-post)),
    .elm-chat-avatar,
    .messages-avatar,
    .contacts-avatar,
    .people-avatar,
    .elm-public-post__avatar,
    .discover-post-avatar,
    .discover-avatar,
    .app-avatar,
    .site-search-result__avatar,
    .discover-search-avatar,
    .mention-avatar,
    .profile-social-avatar,
    .profile-editor-avatar,
    .invite-page__avatar,
    .space-view-avatar-wrap,
    .place-avatar-wrap,
    .community-context__avatar,
    .space-view-post-avatar-wrap,
    .post-view-avatar-wrap,
    .post-comment-avatar-wrap,
    .community-card-owner-avatar,
    .guest-public__author-avatar,
    .guest-public__rail-avatar,
    .elm-guest-discovery__avatar,
    .public-home__card-avatar,
    .public-home__rail-avatar,
    .guest-mini-avatar,
    .guest-creator-avatar) > :is(img, span, .elm-media-guard-wrap),
:is(.elm-avatar, .people-avatar, .profile-social-avatar) img {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: static !important;
  aspect-ratio: 1;
  filter: none !important;
  box-shadow: none !important;
}
:is(.elm-avatar,
    .site-user-avatar,
    .account-avatar,
    .account-you-avatar,
    .hub-composer__avatar,
    .hub-post-card__avatar,
    .hub-request-row__avatar,
    .hub-mini-row__badge:where(:not(.is-post)),
    .elm-chat-avatar,
    .messages-avatar,
    .contacts-avatar,
    .people-avatar,
    .elm-public-post__avatar,
    .discover-post-avatar,
    .discover-avatar,
    .app-avatar,
    .site-search-result__avatar,
    .discover-search-avatar,
    .mention-avatar,
    .profile-social-avatar,
    .profile-editor-avatar,
    .invite-page__avatar,
    .space-view-avatar-wrap,
    .place-avatar-wrap,
    .community-context__avatar,
    .space-view-post-avatar-wrap,
    .post-view-avatar-wrap,
    .post-comment-avatar-wrap,
    .community-card-owner-avatar,
    .guest-public__author-avatar,
    .guest-public__rail-avatar,
    .elm-guest-discovery__avatar,
    .public-home__card-avatar,
    .public-home__rail-avatar,
    .guest-mini-avatar,
    .guest-creator-avatar) > span:not(.elm-media-guard-wrap) {
  display: grid !important;
  place-items: center !important;
  background: inherit !important;
  color: inherit !important;
  font: inherit !important;
}
/* Never round or crop community banners / post thumbnails via avatar rules. */
.hub-request-row__profile > img {
  width: var(--elm-avatar-size) !important;
  height: var(--elm-avatar-size) !important;
  flex: 0 0 var(--elm-avatar-size) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* Respect editor fallback visibility; display rules must never unhide it. */
:is(.profile-editor-avatar, .site-user-avatar) > span[hidden] {
  display: none !important;
}
:is(.space-view-avatar-wrap, .space-view-post-avatar-wrap, .post-comment-avatar-wrap, .place-avatar-wrap) > div,
.post-view-avatar-wrap > .post-view-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: inherit !important;
  color: inherit !important;
  font: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
}
:is(.elm-avatar, .elm-chat-avatar, .messages-avatar, .contacts-avatar, .people-avatar,
    .hub-mini-row__badge.is-friend)::after {
  content: none;
}
:is(.elm-avatar, .elm-chat-avatar, .messages-avatar, .contacts-avatar, .people-avatar,
    .hub-mini-row__badge.is-friend):is(.is-online, .is-offline, .is-away, .is-idle, .is-busy, [data-presence])::after {
  content: '' !important;
  position: absolute;
  inset: auto -1px -1px auto !important;
  box-sizing: border-box !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--elm-avatar-ring) !important;
  border-radius: 50% !important;
  background: #8c9690 !important;
  box-shadow: none !important;
  z-index: 2;
  pointer-events: none;
}
:is(.elm-avatar, .elm-chat-avatar, .messages-avatar, .contacts-avatar, .people-avatar,
    .hub-mini-row__badge.is-friend):is(.is-online, [data-presence="online"])::after {
  background: #26a65b !important;
}
:is(.elm-avatar, .elm-chat-avatar, .messages-avatar, .contacts-avatar, .people-avatar,
    .hub-mini-row__badge.is-friend):is(.is-away, .is-idle, [data-presence="away"], [data-presence="idle"])::after {
  background: #dfaa35 !important;
}
:is(.elm-avatar, .elm-chat-avatar, .messages-avatar, .contacts-avatar, .people-avatar,
    .hub-mini-row__badge.is-friend):is(.is-busy, [data-presence="busy"])::after {
  background: #d45f5f !important;
}
.people-avatar { top: -20px !important; box-shadow: 0 0 0 3px var(--elm-avatar-ring); }
.profile-social-avatar { box-shadow: 0 0 0 3px var(--elm-avatar-ring); }
.profile-social-avatar-wrap { margin-top: -20px !important; }
.profile-social-check { width: 14px !important; height: 14px !important; font-size: 9px; line-height: 14px; }
