/* Final avatar + frame alignment: frame never changes layout metrics. */
.avatar-frame-wrap,
.avatar-wrap {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  vertical-align:middle !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
}
.avatar-frame-wrap .avatar-frame-base {
  position:relative !important;
  width:100% !important;
  height:100% !important;
  flex:0 0 100% !important;
  display:block !important;
  z-index:1 !important;
  min-width:0 !important;
  min-height:0 !important;
}
.avatar-frame-wrap .avatar,
.avatar-wrap .avatar {
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:cover !important;
  flex:1 1 auto !important;
  border-radius:50% !important;
  z-index:1 !important;
}
.avatar-frame-wrap .avatar-frame-img {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  display:block !important;
  z-index:3 !important;
  pointer-events:none !important;
  user-select:none !important;
}
/* Keep presence visually separate from both avatar and frame. */
.avatar-presence-stack .avatar-presence-dot {
  position:absolute !important;
  right:-7px !important;
  bottom:-7px !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  margin:0 !important;
  z-index:20 !important;
  transform:none !important;
}
.profile-main-avatar .avatar-frame-wrap {
  width:84px !important;
  height:84px !important;
  flex-basis:84px !important;
}
.profile-main-avatar .avatar-frame-wrap .avatar-frame-img { width:128% !important; height:128% !important; }
@media (max-width:700px) {
  .profile-main-avatar .avatar-frame-wrap { width:72px !important; height:72px !important; flex-basis:72px !important; }
}
@media (max-width:390px) {
  .profile-main-avatar .avatar-frame-wrap { width:64px !important; height:64px !important; flex-basis:64px !important; }
}
/* Prevent flex/grid parents from shrinking framed avatars. */
.avatar-frame-wrap, .avatar-wrap { min-width:0; }
.post-author .avatar-frame-wrap, .topic-meta .avatar-frame-wrap, .profile-trigger .avatar-frame-wrap, .conv-list-item .avatar-frame-wrap { flex-shrink:0 !important; }


/* Requested ratio: avatar 100%, frame 100% of the avatar-frame wrapper. */
.avatar-frame-wrap .avatar-frame-base,
.avatar-frame-wrap .avatar {
  width:100% !important;
  height:100% !important;
  flex:0 0 100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
}
.avatar-frame-wrap .avatar-frame-img {
  width:100% !important;
  height:100% !important;
}
.profile-main-avatar .avatar-frame-wrap .avatar-frame-base,
.profile-main-avatar .avatar-frame-wrap .avatar {
  width:100% !important;
  height:100% !important;
  flex-basis:100% !important;
}
.profile-main-avatar .avatar-frame-wrap .avatar-frame-img {
  width:100% !important;
  height:100% !important;
}
.profile-preview-avatar-base .avatar {
  width:100% !important;
  height:100% !important;
}
.profile-preview-frame {
  width:100% !important;
  height:100% !important;
}