/* AngellVoicy: fundo exclusivo do POPUP de perfil dentro da sala.
   Nao altera perfil completo, sala ou modais de outros recursos.
   WebP original 405x720, sem cortes nem edicao. */
#global-modal:has(#modal-body > .room-user-profile) .modal-card {
  width: min(100%, 405px);
  min-height: min(630px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(247, 198, 101, .55) !important;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      rgba(8, 1, 5, .03) 0%,
      rgba(8, 1, 5, .11) 25%,
      rgba(8, 1, 5, .28) 55%,
      rgba(8, 1, 5, .51) 100%),
    url('/assets/profile/room-vip6-background.webp?version=1793366626') center top / 100% auto no-repeat,
    #110506 !important;
  background-attachment: scroll;
  color: #fff;
}
#global-modal:has(#modal-body > .room-user-profile) .modal-card > div:first-child {
  position: relative;
  z-index: 1;
  border-bottom: 0 !important;
  background: transparent !important;
}
#global-modal:has(#modal-body > .room-user-profile) #modal-title {
  color: #fff !important;
  text-shadow: 0 1px 5px #000, 0 1px 12px #000;
}
#global-modal:has(#modal-body > .room-user-profile) #modal-close {
  background: rgba(15, 6, 9, .58) !important;
  border: 1px solid rgba(247, 198, 101, .42) !important;
  color: #fff !important;
  border-radius: 50%;
}
#global-modal:has(#modal-body > .room-user-profile) #modal-body {
  position: relative;
  z-index: 1;
  padding: clamp(95px, 15vh, 132px) 18px 24px !important;
  background: transparent !important;
}
#global-modal:has(#modal-body > .room-user-profile) .room-user-profile {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.92);
}
#global-modal:has(#modal-body > .room-user-profile) .room-user-profile-meta,
#global-modal:has(#modal-body > .room-user-profile) .room-user-bio,
#global-modal:has(#modal-body > .room-user-profile) .room-user-levels small,
#global-modal:has(#modal-body > .room-user-profile) .room-user-social small {
  color: #f4e8e3 !important;
}
#global-modal:has(#modal-body > .room-user-profile) .room-user-levels > div,
#global-modal:has(#modal-body > .room-user-profile) .room-user-social > div,
#global-modal:has(#modal-body > .room-user-profile) .room-profile-self-label {
  background: rgba(9, 3, 7, .72) !important;
  border: 1px solid rgba(247, 198, 101, .30) !important;
  backdrop-filter: blur(2px);
}
#global-modal:has(#modal-body > .room-user-profile) .room-user-menu-button {
  background: rgba(9, 3, 7, .73) !important;
  border-color: rgba(247, 198, 101, .45) !important;
}
@media (max-height: 630px) {
  #global-modal:has(#modal-body > .room-user-profile) #modal-body {
    padding-top: 80px !important;
  }
}


/* AV_PROFILE_FIT_V2_BEGIN */

/* Proporção original exata: 405 × 720, sem cortes */
#global-modal:has(#modal-body > .room-user-profile) .modal-card {
  --av-profile-width: min(
    405px,
    calc(100vw - 32px),
    calc((100dvh - 32px) * 0.5625)
  );

  position: relative !important;
  box-sizing: border-box !important;

  width: var(--av-profile-width) !important;
  max-width: none !important;

  height: calc(var(--av-profile-width) * 1.7777777778) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;

  aspect-ratio: 405 / 720;

  border: 1px solid rgba(225, 174, 88, .75) !important;
  border-radius: 18px !important;

  background: #110506
    url('/assets/profile/room-vip6-background.webp?v=1793367514')
    center top / 100% auto no-repeat !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Cabeçalho compacto sobre a margem superior da arte */
#global-modal:has(#modal-body > .room-user-profile)
.modal-card > div:first-child {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;

  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  padding: 5px 10px !important;

  background: transparent !important;
  border: 0 !important;
}

/* Título menor para não cobrir as asas */
#global-modal:has(#modal-body > .room-user-profile)
#modal-title {
  font-size: 14px !important;
  line-height: 22px !important;
  color: white !important;
  text-shadow: 0 1px 5px #000 !important;
}

/* Fechar compacto */
#global-modal:has(#modal-body > .room-user-profile)
#modal-close {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 23px !important;
  line-height: 1 !important;
  background: rgba(12, 3, 8, .7) !important;
}

/* Conteúdo alinhado proporcionalmente ao cenário */
#global-modal:has(#modal-body > .room-user-profile)
#modal-body {
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 100% !important;

  padding: 66% 12px 16px !important;
  margin: 0 !important;

  background: transparent !important;
}

/* Informações com contraste, sem ocultar toda a arte */
#global-modal:has(#modal-body > .room-user-profile)
.room-user-levels > div,
#global-modal:has(#modal-body > .room-user-profile)
.room-user-social > div,
#global-modal:has(#modal-body > .room-user-profile)
.room-profile-self-label {
  background: rgba(8, 2, 6, .65) !important;
  border: 1px solid rgba(214, 164, 83, .45) !important;
  backdrop-filter: blur(2px);
}

/* Mantém a legibilidade em aparelhos pequenos */
#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile {
  max-width: 100% !important;
  color: #fff !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile h3 {
  overflow-wrap: anywhere;
}

/* AV_PROFILE_FIT_V2_END */


/* PERFIL_SEM_SCROLL_V3_INICIO */

#global-modal:has(#modal-body > .room-user-profile) {
  place-items: center !important;
  overflow: hidden !important;
}

#global-modal:has(#modal-body > .room-user-profile) .modal-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(405px, calc(100vw - 32px), calc((100dvh - 32px) * 405 / 720)) !important;
  height: auto !important;
  aspect-ratio: 405 / 720 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(225,174,88,.75) !important;
  background: #110506 url('/assets/profile/room-vip6-background.webp?v=1793367907') center / 100% 100% no-repeat !important;
  overscroll-behavior: none !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.modal-card > div:first-child {
  position: absolute !important;
  top: 1% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  height: 34px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
}

#global-modal:has(#modal-body > .room-user-profile) #modal-title {
  font-size: 14px !important;
  line-height: 24px !important;
}

#global-modal:has(#modal-body > .room-user-profile) #modal-close {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.7) !important;
}

#global-modal:has(#modal-body > .room-user-profile) #modal-body {
  position: absolute !important;
  top: 39% !important;
  bottom: 3% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background: transparent !important;
  overscroll-behavior: none !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  transform-origin: top center !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile-top,
#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile-avatar {
  width: min(74px, 19vw) !important;
  height: min(74px, 19vw) !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile-top {
  margin: 0 auto !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-profile-name-open h3 {
  font-size: 19px !important;
  line-height: 1.15 !important;
  margin: 4px 0 2px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-levels,
#global-modal:has(#modal-body > .room-user-profile)
.room-user-social {
  margin-top: 7px !important;
  gap: 6px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-levels > div,
#global-modal:has(#modal-body > .room-user-profile)
.room-user-social > div {
  padding: 6px 3px !important;
  border-radius: 10px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-levels strong,
#global-modal:has(#modal-body > .room-user-profile)
.room-user-social strong {
  font-size: 14px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-levels small,
#global-modal:has(#modal-body > .room-user-profile)
.room-user-social small {
  font-size: 10px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-follow-button {
  min-height: 34px !important;
  margin-top: 7px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-profile-self-label {
  margin-top: 7px !important;
  padding: 7px !important;
}

#global-modal:has(#modal-body > .room-user-profile)
.room-user-bio {
  margin-top: 5px !important;
}

/* PERFIL_SEM_SCROLL_V3_FIM */