/* Wiantex final avatar renderer: the avatar is the layout box; frame and presence are overlays. */
.avatar-wrap,
.avatar-frame-wrap,
.avatar-presence-stack{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-width:var(--avatar-size,40px) !important;
  min-height:var(--avatar-size,40px) !important;
  width:var(--avatar-size,40px) !important;
  height:var(--avatar-size,40px) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  vertical-align:middle !important;
  isolation:isolate !important;
}

.avatar-frame-base{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  z-index:1 !important;
}

.avatar-wrap > .avatar,
.avatar-frame-base > .avatar,
.avatar-wrap > .avatar-fallback,
.avatar-frame-base > .avatar-fallback{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  object-fit:cover !important;
  z-index:1 !important;
}

.avatar-fallback{
  background:#121a33 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  isolation:isolate !important;
  clip-path:circle(50% at 50% 50%) !important;
}

.avatar-fallback-icon{
  width:72% !important;
  height:72% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:72% !important;
  max-height:72% !important;
  display:block !important;
  flex:0 0 72% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  overflow:hidden !important;
  border-radius:50% !important;
}

.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;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
  z-index:4 !important;
}

/* Profile: slightly larger avatar while keeping the requested 94/80 frame visual size. */
.profile-main-avatar .avatar-wrap,
.profile-main-avatar .avatar-frame-wrap{
  --avatar-size:96px !important;
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  min-height:96px !important;
  flex-basis:96px !important;
}
.profile-main-avatar .avatar-frame-img{ width:94px !important; height:94px !important; }

.profile-preview-avatar{
  position:relative !important;
  overflow:visible !important;
}
.profile-preview-avatar-base{
  position:relative !important;
  overflow:hidden !important;
  border-radius:50% !important;
}
.profile-preview-avatar-base .avatar,
.profile-preview-avatar-base .avatar-fallback{
  width:100% !important;
  height:100% !important;
}
.profile-preview-frame{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:94px !important;
  height:94px !important;
  max-width:none !important;
  max-height:none !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  pointer-events:none !important;
  z-index:4 !important;
}

.avatar-presence-dot,
.avatar-wrap .avatar-presence-dot,
.avatar-presence-stack .avatar-presence-dot{
  position:absolute !important;
  right:-8px !important;
  bottom:-8px !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:12 !important;
  transform:none !important;
  box-sizing:border-box !important;
}

@media(max-width:700px){
  .profile-main-avatar .avatar-wrap,
  .profile-main-avatar .avatar-frame-wrap{
    --avatar-size:82px !important;
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
    min-height:82px !important;
    flex-basis:82px !important;
  }
  .profile-main-avatar .avatar-frame-img{ width:80px !important; height:80px !important; }
  .profile-preview-frame{ width:80px !important; height:80px !important; }
  .avatar-fallback-icon{ width:70% !important; height:70% !important; max-width:70% !important; max-height:70% !important; flex-basis:70% !important; }
}

@media(max-width:390px){
  .profile-main-avatar .avatar-wrap,
  .profile-main-avatar .avatar-frame-wrap{
    --avatar-size:78px !important;
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    min-height:78px !important;
    flex-basis:78px !important;
  }
  .profile-main-avatar .avatar-frame-img{ width:76px !important; height:76px !important; }
  .profile-preview-frame{ width:76px !important; height:76px !important; }
}