/* =====================================================================
   [25] Molduras premium (avatar frames)
   ===================================================================== */

.wz-frame-box {
  --wz-frame-size: 130px;
  --wz-avatar-size: 100px;
  position: relative;
  display: inline-block;
  width: var(--wz-frame-size);
  height: var(--wz-frame-size);
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}
.wz-frame-avatar {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--wz-avatar-size);
  height: var(--wz-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: #12131c;
}
.wz-frame-avatar > .wz-ava-img {
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.wz-frame-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  animation: wzFrameFloat 6s ease-in-out infinite;
}
@keyframes wzFrameFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Grid de escolha das molduras (na página Editar perfil) */
.frame-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.swatch.frame-swatch {
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.swatch.frame-swatch .wz-frame-box {
  --wz-frame-size: 84px;
  --wz-avatar-size: 62px;
}
.swatch.frame-swatch .wz-frame-avatar {
  background:
    linear-gradient(135deg, #4c1d95, #ec4899);
}
.swatch.frame-swatch .wz-frame-avatar::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
}

/* Item "sem moldura" (a bolinha "Nenhuma") */
.swatch.frame-swatch.frame-none .wz-frame-box {
  display: grid; place-items:center;
}
.swatch.frame-swatch.frame-none .wz-frame-ring { display: none; }
.swatch.frame-swatch.frame-none .wz-frame-avatar::before {
  content: "✕"; position: absolute; inset: 0;
  display: grid; place-items:center;
  color: rgba(255,255,255,.55); font-size: 22px;
  background: rgba(255,255,255,.05);
}

/* Ajuste para avatares específicos do app (mantém o círculo, adiciona espaço para a moldura) */
.post-avatar-wrap:has(.wz-frame-box) { overflow: visible; }
.chat-header-user .wz-frame-box { --wz-frame-size: 44px; --wz-avatar-size: 36px; }
.conversation-item .wz-frame-box { --wz-frame-size: 56px; --wz-avatar-size: 44px; }
.post-header .wz-frame-box       { --wz-frame-size: 52px; --wz-avatar-size: 40px; }
.edit-profile-head .wz-frame-box { --wz-frame-size: 140px; --wz-avatar-size: 108px; }

/* ============= [25 FIX] Alinhamento do avatar dentro da moldura ============= */
/* Força a imagem dentro do círculo a ocupar 100% mesmo quando outros CSS
   antigos (.profile-avatar, .post-avatar, etc.) tentam impor tamanho fixo. */
.wz-frame-avatar > img,
.wz-frame-avatar > img.profile-avatar,
.wz-frame-avatar > img.post-avatar {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Quando a moldura entra em um wrap antigo, o wrap não deve limitar tamanho */
.profile-avatar-wrap-lg:has(.wz-frame-box),
.post-avatar-wrap:has(.wz-frame-box),
.chat-header-user:has(.wz-frame-box),
.conversation-item:has(.wz-frame-box) {
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
}

/* Reposiciona mood-badge e orbit em cima da moldura, não do wrap antigo */
.profile-avatar-wrap-lg:has(.wz-frame-box) .avatar-orbit { display: none !important; }
.profile-avatar-wrap-lg:has(.wz-frame-box) .mood-badge {
  position: absolute;
  right: 4px; bottom: 4px;
  z-index: 3;
}

/* Escalas coerentes por contexto (o inline style ainda define o tamanho base) */
.profile-avatar-wrap-lg .wz-frame-box {
  --wz-frame-size: 150px;
  --wz-avatar-size: 116px;
}
@media (max-width: 640px) {
  .profile-avatar-wrap-lg .wz-frame-box {
    --wz-frame-size: 118px;
    --wz-avatar-size: 92px;
  }
}

/* Molduras admin/staff: ficam estáticas, coladas na foto */
.wz-frame-admin-crown   .wz-frame-ring,
.wz-frame-admin-inferno .wz-frame-ring,
.wz-frame-admin-neon    .wz-frame-ring,
.wz-frame-admin-galaxy  .wz-frame-ring {
  animation: none !important;
  transform: none !important;
}

/* ============= [25 FIX v12] Molduras ADMIN — encaixe e classes ============= */
/* As chaves salvas no banco usam underline (admin_coroa_real), então a
   classe gerada é .wz-frame-admin_coroa_real. Cobrimos todas: */
.wz-frame-admin_coroa_real  .wz-frame-ring,
.wz-frame-admin_inferno     .wz-frame-ring,
.wz-frame-admin_neon_cyber  .wz-frame-ring,
.wz-frame-admin_galaxia     .wz-frame-ring,
.wz-frame-admin_safira_real .wz-frame-ring {
  animation: none !important;
  transform: none !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

/* O aro precisa cobrir 100% do box, com a foto encaixada exatamente no
   círculo interno — mesmo raio das molduras normais (~92% do viewBox). */
.wz-frame-admin_coroa_real,
.wz-frame-admin_inferno,
.wz-frame-admin_neon_cyber,
.wz-frame-admin_galaxia,
.wz-frame-admin_safira_real {
  --wz-avatar-size: calc(var(--wz-frame-size) * 0.78);
}
.wz-frame-admin_coroa_real  .wz-frame-ring,
.wz-frame-admin_inferno     .wz-frame-ring,
.wz-frame-admin_neon_cyber  .wz-frame-ring,
.wz-frame-admin_galaxia     .wz-frame-ring,
.wz-frame-admin_safira_real .wz-frame-ring {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* FIX FINAL — encaixe perfeito da moldura no avatar */
.wz-frame-box {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--wz-frame-size) !important;
  height: var(--wz-frame-size) !important;
  overflow: visible !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

.wz-frame-avatar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  width: var(--wz-avatar-size) !important;
  height: var(--wz-avatar-size) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.wz-frame-avatar > img,
.wz-frame-avatar > .wz-ava-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.wz-frame-ring {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1) !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* =====================================================================
   [25 STAFF FIX] Molduras admin/staff coladas na foto
   Cole no FINAL de assets/css/25-frames.css e limpe o cache do navegador.
   ===================================================================== */

/* Nos SVGs staff (v13) o aro está no raio externo do viewBox (r=97/100),
   então a foto precisa ocupar praticamente toda a caixa da moldura,
   e não os ~77% que as molduras premium usam. */
.wz-frame-admin-crown,
.wz-frame-admin-inferno,
.wz-frame-admin-neon,
.wz-frame-admin-galaxy,
.wz-frame-admin-sapphire,
.wz-frame-admin_coroa_real,
.wz-frame-admin_inferno,
.wz-frame-admin_neon_cyber,
.wz-frame-admin_galaxia,
.wz-frame-admin_safira_real {
  --wz-avatar-size: calc(var(--wz-frame-size) * 0.94) !important;
}

/* Garante que o SVG realmente cubra 100% da caixa e fique estático */
.wz-frame-admin-crown   .wz-frame-ring,
.wz-frame-admin-inferno .wz-frame-ring,
.wz-frame-admin-neon    .wz-frame-ring,
.wz-frame-admin-galaxy  .wz-frame-ring,
.wz-frame-admin-sapphire .wz-frame-ring,
.wz-frame-admin_coroa_real  .wz-frame-ring,
.wz-frame-admin_inferno     .wz-frame-ring,
.wz-frame-admin_neon_cyber  .wz-frame-ring,
.wz-frame-admin_galaxia     .wz-frame-ring,
.wz-frame-admin_safira_real .wz-frame-ring {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  animation: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* O avatar centralizado dentro da caixa, sem clipping estranho */
.wz-frame-admin-crown   .wz-frame-avatar,
.wz-frame-admin-inferno .wz-frame-avatar,
.wz-frame-admin-neon    .wz-frame-avatar,
.wz-frame-admin-galaxy  .wz-frame-avatar,
.wz-frame-admin-sapphire .wz-frame-avatar,
.wz-frame-admin_coroa_real  .wz-frame-avatar,
.wz-frame-admin_inferno     .wz-frame-avatar,
.wz-frame-admin_neon_cyber  .wz-frame-avatar,
.wz-frame-admin_galaxia     .wz-frame-avatar,
.wz-frame-admin_safira_real .wz-frame-avatar {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: var(--wz-avatar-size) !important;
  height: var(--wz-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}