/* =========================
   GLOBAL AVATAR FRAME SYSTEM
   ========================= */

/* Base wrapper */
.avatar-container,
.avatar-wrapper {
  position: relative;
  display: inline-block;
  overflow: visible !important;

  /* Control size per element */
  --avatar-size: 100px;
}

/* Wrapper size = avatar size (layout stable) */
.avatar-container,
.avatar-wrapper {
  width: var(--avatar-size);
  height: var(--avatar-size);
}

/* Avatar circle */
.avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: none !important;
  box-shadow: none !important;
}

/* Profile header: ensure fallback initial is perfectly centered in framed avatar */
.profile-pic-container .avatar-inner .avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(var(--avatar-size) * 0.42);
  line-height: 1;
  border-radius: 50%;
}

/* Profile header fallback is rendered as .profile-initial-avatar (not .avatar-initial) */
.profile-pic-container .avatar-inner .profile-initial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(var(--avatar-size) * 0.42);
  line-height: 1;
  border-radius: 50%;
}

/* Feed/comment avatars: reduce fallback initial size without changing layout */
.comment-item .avatar-initial,
.comment .avatar-initial,
.reply .avatar-initial,
.post-avatar .avatar-initial,
.feed-avatar .avatar-initial {
  font-size: calc(var(--avatar-size, 40px) * 0.5);
}

/* When the frame system wraps initials, they become nested under .avatar-inner.
   Scope centering to post/comment contexts only (no global override). */
.comment .avatar-inner .avatar-initial,
.reply .avatar-inner .avatar-initial,
.reply .avatar-inner .avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  font-size: calc(var(--avatar-size, 40px) * 0.5);
}

/* =========================
   FRAME (OUTSIDE SYSTEM)
   ========================= */

.avatar-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* THIS makes frame go outside */
  transform: scale(1.20);

  transform-origin: center;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  z-index: 2;
}

/* Hide frame if none equipped */
.avatar-wrapper:not(.has-frame) .avatar-frame,
.avatar-container:not(.has-frame) .avatar-frame {
  display: none;
}

/* Comment/reply avatars: slightly smaller frame scale to avoid text overlap */
.comment .avatar-frame,
.reply .avatar-frame,
.post-modal-comments .avatar-frame {
  transform: scale(1.20) !important;
}

/* Ensure edit button always on top */
.avatar-edit-btn,
.edit-profile-pic-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
}

/* Remove legacy pink rings */
.profile-img,
.profile-img.small,
.search-avatar,
.post-avatar img,
.profile-pic,
.profile-initial,
.avatar-initial,
.avatar-initial.small,
.post-modal-user-avatar img {
  border: none !important;
  box-shadow: none !important;
}