/* HappyGram V47 — final personal-chat avatar containment.
   The wrapper is the frame. The avatar/photo is clipped inside it, centered, and
   cannot grow the frame even when legacy CSS adds borders, padding, transforms,
   or intrinsic image dimensions. */

/* Stable box model for every personal-chat avatar shell. */
.chat-item .avatar-wrap,
.chat-item .avatar-wrap.chat-profile-trigger,
.conv-header .header-avatar-wrap,
.conv-header .header-avatar-wrap.avatar-wrap,
.msg-avatar,
.msg-avatar .avatar-wrap {
  box-sizing:border-box!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  overflow:hidden!important;
  clip-path:circle(50%)!important;
  isolation:isolate!important;
}

/* Header avatar is intentionally slightly smaller. */
.conv-header .header-avatar-wrap,
.conv-header .header-avatar-wrap.avatar-wrap {
  flex-basis:44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  max-width:44px!important;
  max-height:44px!important;
}

/* The actual avatar element is a centered clipping layer, never the frame. */
.chat-item .avatar-wrap > .avatar,
.conv-header .header-avatar-wrap > .avatar,
.msg-avatar > .avatar,
.chat-item .avatar-wrap .avatar {
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  overflow:hidden!important;
  clip-path:circle(50%)!important;
  transform:none!important;
  scale:1!important;
  zoom:1!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
}

/* Uploaded photos: intrinsic dimensions can never escape the circle. */
.chat-item .avatar-wrap > .avatar > img,
.chat-item .avatar-wrap .avatar img,
.conv-header .header-avatar-wrap > .avatar > img,
.conv-header .header-avatar-wrap img#peer-avatar,
.conv-header #peer-avatar img,
.msg-avatar .avatar > img,
.msg-avatar img {
  box-sizing:border-box!important;
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  overflow:hidden!important;
  clip-path:circle(50%)!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  transform:none!important;
  scale:1!important;
}

/* Keep the online dot outside the image without letting it move the image. */
.chat-item .avatar-wrap > .online-dot,
.conv-header .header-avatar-wrap > .online-dot {
  position:absolute!important;
  z-index:5!important;
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
  min-height:11px!important;
  max-width:11px!important;
  max-height:11px!important;
  right:0!important;
  bottom:0!important;
  margin:0!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  clip-path:none!important;
}

/* Do not let old .avatar.sm/.big rules win in personal chats. */
.chat-item .avatar.sm,
.chat-item .avatar.big,
.chat-item .avatar,
.conv-header .avatar.sm,
.conv-header .avatar.big,
.conv-header .avatar {
  border-radius:50%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* Mobile: same containment, just a little smaller. */
@media (max-width:1100px){
  .chat-item .avatar-wrap,
  .chat-item .avatar-wrap.chat-profile-trigger {
    flex-basis:48px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
  }
  .chat-item .avatar-wrap > .avatar,
  .chat-item .avatar-wrap .avatar,
  .chat-item .avatar-wrap .avatar img {
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
  }
  .conv-header .header-avatar-wrap,
  .conv-header .header-avatar-wrap.avatar-wrap {
    flex-basis:44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }
  .conv-header .header-avatar-wrap > .avatar,
  .conv-header .header-avatar-wrap .avatar,
  .conv-header .header-avatar-wrap .avatar img,
  .conv-header #peer-avatar img {
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }
}