/* Wiantex avatar/frame stability: layout-safe, responsive, presence separated. */
.avatar-wrap,
.avatar-frame-wrap,
.avatar-presence-stack {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
}

.avatar-frame-wrap .avatar-frame-base {
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  flex:0 0 100% !important;
  min-width:0 !important;
  min-height:0 !important;
  z-index:1 !important;
  overflow:hidden !important;
  border-radius:50% !important;
}

.avatar-wrap .avatar,
.avatar-frame-wrap .avatar {
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  flex:0 0 100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
  z-index:1 !important;
}

/* Frame is visual-only and never participates in layout width/height. */
.avatar-frame-wrap .avatar-frame-img {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:120% !important;
  height:120% !important;
  transform:translate(-50%,-50%) !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
  z-index:3 !important;
}

/* Presence is deliberately detached from the avatar edge. */
.avatar-presence-stack .avatar-presence-dot,
.avatar-wrap .avatar-presence-dot {
  position:absolute !important;
  right:-8px !important;
  bottom:-8px !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  z-index:8 !important;
  transform:none !important;
}

.avatar-presence-stack .avatar-presence-dot .presence-svg-icon {
  width:8px !important;
  height:8px !important;
  display:block !important;
}

.avatar-status-gap { display:none !important; }

.profile-main-avatar,
.profile-main-avatar .avatar-frame-wrap {
  overflow:visible !important;
  flex-shrink:0 !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:120% !important; height:120% !important; }

.profile-preview-avatar {
  position:relative !important;
  overflow:visible !important;
}
.profile-preview-frame {
  left:50% !important;
  top:50% !important;
  width:120% !important;
  height:120% !important;
  transform:translate(-50%,-50%) !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  pointer-events:none !important;
}

@media (max-width:700px){
  .profile-main-avatar .avatar-frame-wrap {
    width:72px !important;
    height:72px !important;
    flex-basis:72px !important;
  }
  .profile-main-avatar .avatar-presence-dot,
  .avatar-presence-stack .avatar-presence-dot { right:-7px !important; bottom:-7px !important; width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; }
}

@media (max-width:390px){
  .profile-main-avatar .avatar-frame-wrap {
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
  }
}