/* Azmora v248 — one crop/fallback contract for every user profile photo. */
img[class*="avatar"],
[class*="avatar"] > img,
[class*="profile-pic"] > img,
[class*="profile-photo"] > img{
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:50%!important;
  aspect-ratio:1/1;
}

/* Do not let older component rules display a hidden fallback underneath a
   successfully loaded image. */
html body [class*="avatar"] > [hidden],
html body #hlGlobalBottomNav .hl76-profile .hl76-profile-fallback[hidden],
html body #hlGlobalBottomNav .hl76-profile.active .hl76-profile-fallback[hidden],
html body .hl-chat-app.list-view .hl-person-row .hl-avatar > i[hidden],
html body .hl-chat-app.list-view .hl-story-avatar > i[hidden],
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar > i[hidden]{display:none!important}

.hl-avatar-auto-fallback{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#252833,#171922)!important;
  color:#fff!important;
  font:800 clamp(12px,35%,24px)/1 system-ui,sans-serif!important;
  text-transform:uppercase!important;
}

/* Ring space must not distort or shrink the DP itself. */
.hl-story-global{
  flex-shrink:0!important;
  background-clip:padding-box!important;
}
.hl-story-global > img,
img.hl-story-global{
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}

/* Navigation is intentionally the single ring-free profile photo. */
#hlGlobalBottomNav .hl76-profile img,
#hlGlobalBottomNav .hl76-profile-fallback{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  max-width:32px!important;
  max-height:32px!important;
  flex:0 0 32px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Profile hero: lock both the shell and image to the same square. Legacy
   profile themes otherwise let grid sizing stretch the image vertically. */
html body.hlv401-profile-body .hlp33-avatar-shell,
html body.hlv401-profile-body .hlp33-avatar{
  width:100px!important;
  height:100px!important;
  min-width:100px!important;
  min-height:100px!important;
  max-width:100px!important;
  max-height:100px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Inbox rows: one fixed square only. The hidden initials node must never sit
   beside a successfully loaded image. */
html body .hl-chat-app.list-view .hl-person-row .hl-avatar{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  flex:0 0 52px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  position:relative!important;
}
html body .hl-chat-app.list-view .hl-person-row .hl-avatar > img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Conversation header and message avatars stay perfectly circular. */
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  max-width:50px!important;
  max-height:50px!important;
  flex:0 0 50px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  overflow:visible!important;
}
html body .hl-chat-app.conversation-view .hl-conv-person .hl-avatar > img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
}
html body .hl-chat-app.conversation-view .hl-message-avatar{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  max-width:27px!important;
  max-height:27px!important;
  flex:0 0 27px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
}