/* ChaabiHub v202 — canonical avatar geometry + admin badge branding. */

/* The circled account strip is mobile chrome; keep it on phones only. */
@media (min-width: 769px) {
  body.is-authenticated .mobile-top-header {
    display: none !important;
  }
}

/* Every avatar frame must remain a true square before the circular crop. */
.avatar-link,
.post-avatar-link,
.comment-avatar-link,
.loopz-creator-avatar,
.profile-photo-frame,
.profile-photo-trigger {
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.avatar-link,
.post-avatar-link,
.comment-avatar-link,
.loopz-creator-avatar,
.profile-photo-frame {
  overflow: hidden !important;
}

/* The owner story/+ control intentionally overlaps outside its frame. */
.profile-photo-trigger {
  overflow: visible !important;
}

.avatar-link > img,
.post-avatar-link > img,
.comment-avatar-link > img,
.loopz-creator-avatar > img,
.loopz-creator-avatar.story-ring > img,
.sidebar-account-card > img,
.post-head > img,
.person-row img,
.follow-list-row > img,
.search-row > img,
.home-search-result > img,
.likes-user-avatar,
.spam-report-avatar,
.seller-avatar,
.loopz-comment-row > .comment-avatar-link > img {
  display: block !important;
  box-sizing: border-box !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Standalone images retain their established component size. */
.sidebar-account-card > img { inline-size: 36px !important; block-size: 36px !important; }
.post-head > img { inline-size: 38px !important; block-size: 38px !important; }
.person-row img { inline-size: 42px !important; block-size: 42px !important; }
.likes-user-avatar { inline-size: 40px !important; block-size: 40px !important; }
.spam-report-avatar { inline-size: 44px !important; block-size: 44px !important; }
.seller-avatar { inline-size: 48px !important; block-size: 48px !important; flex: 0 0 48px !important; }

/* Loopz: derive height from width to prevent the oval regression at any breakpoint. */
body[data-page="loopz"] .loopz-creator {
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
}
body[data-page="loopz"] .loopz-creator-avatar {
  block-size: auto !important;
  min-block-size: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
body[data-page="loopz"] .loopz-creator-avatar > img {
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Profile: beat the old 140px !important rule inside responsive frames. */
body[data-page="profile"] .profile-photo-trigger,
body[data-page="public-profile"] .profile-photo-frame {
  block-size: auto !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
}
body[data-page="profile"] .profile-photo,
body[data-page="public-profile"] .profile-photo {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* One badge renderer across posts, profiles, comments, audio, search and Loopz. */
.verified-mark,
.loopz-verified {
  display: inline-grid !important;
  place-items: center !important;
  inline-size: 18px !important;
  block-size: 18px !important;
  min-inline-size: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--verification-badge-color, #22d3ee) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  vertical-align: -3px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28) !important;
}

body[data-verification-badge-mode="image"] .verified-mark,
body[data-verification-badge-mode="image"] .loopz-verified {
  background-color: transparent !important;
  background-image: var(--verification-badge-image) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.profile-verified { inline-size: 20px !important; block-size: 20px !important; flex-basis: 20px !important; }