.animated-frame {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    display: block;
    pointer-events: none;
    z-index: 8;
    overflow: visible;
}

.animated-frame-layer {
    position: absolute;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.animated-frame .af-base {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.animated-frame .af-hearts {
    width: 92%;
    height: 92%;
    left: 4%;
    top: 4%;
    z-index: 2;
    opacity: .48;
    animation: cpHeartsFloat 3.2s ease-in-out infinite;
}

.animated-frame .af-sparkles {
    width: 98%;
    height: 98%;
    left: 1%;
    top: 1%;
    z-index: 3;
    opacity: .40;
    animation: cpSparkles 2.4s ease-in-out infinite;
}

.animated-frame .af-crown {
    width: 42%;
    height: auto;
    left: 29%;
    top: 1%;
    z-index: 5;
    transform-origin: 50% 30%;
    animation: cpCrownFloat 2.8s ease-in-out infinite;
}

.animated-frame .af-badge {
    width: 39%;
    height: auto;
    left: 30.5%;
    bottom: -3%;
    z-index: 6;
}

.animated-frame .af-heart {
    width: 7.5%;
    height: auto;
    left: 46.25%;
    bottom: .5%;
    z-index: 7;
    transform-origin: center;
    animation: cpHeartbeat 1.35s ease-in-out infinite;
}

.has-animated-frame {
    position: relative;
    overflow: visible !important;
}

@keyframes cpCrownFloat {
    0%,100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.015);
    }
}

@keyframes cpHeartbeat {
    0%,42%,100% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.04);
    }
    18% {
        transform: scale(1);
    }
    28% {
        transform: scale(1.065);
    }
    36% {
        transform: scale(1);
    }
}

@keyframes cpHeartsFloat {
    0%,100% {
        transform: translateY(3px) scale(.99);
        opacity: .32;
    }
    50% {
        transform: translateY(-6px) scale(1.01);
        opacity: .60;
    }
}

@keyframes cpSparkles {
    0%,100% {
        opacity: .22;
        transform: scale(.995);
    }
    50% {
        opacity: .58;
        transform: scale(1.01);
    }
}


/* ==========================================================
   VOICEAPP - ANIMATED FRAME RESPONSIVA POR CONTEXTO
   CP TOP 1
   ========================================================== */


/* ----------------------------------------------------------
   1. PERFIL PRINCIPAL
   Avatar base = 108px
   Moldura suficientemente grande para envolver o avatar,
   sem transformar o coração lateral no elemento principal.
   ---------------------------------------------------------- */

#profile-avatar.has-animated-frame > .animated-frame{
    width:140%!important;
    height:140%!important;
    left:-20%!important;
    top:-20%!important;
    inset:auto!important;
}

/*
 * O coração desta composição é decorativo.
 * No perfil principal ele estava dominando toda a moldura.
 */
#profile-avatar.has-animated-frame
> .animated-frame .af-heart{
    width:5.5%!important;
    left:47.25%!important;
    bottom:1.5%!important;
}


/* ----------------------------------------------------------
   2. PERFIL COMPLETO
   ESTE É O VISUAL DE REFERÊNCIA.
   Mantemos a geometria aprovada.
   ---------------------------------------------------------- */

#public-profile-avatar.has-animated-frame > .animated-frame,
.public-profile-avatar.has-animated-frame > .animated-frame{
    width:140%!important;
    height:140%!important;
    left:-20%!important;
    top:-20%!important;
    inset:auto!important;
}


/* ----------------------------------------------------------
   3. ASSENTOS DA SALA
   A moldura NÃO pode ocupar o espaço dos assentos vizinhos.
   ---------------------------------------------------------- */

.seat-avatar.has-animated-frame{
    overflow:visible!important;
    isolation:isolate!important;
}

.seat-avatar.has-animated-frame > .animated-frame{
    width:118%!important;
    height:118%!important;

    left:-9%!important;
    top:-9%!important;
    inset:auto!important;

    z-index:4!important;
}

/* Elementos externos ficam mais discretos no assento */
.seat-avatar.has-animated-frame
> .animated-frame .af-hearts{
    opacity:.30!important;
}

.seat-avatar.has-animated-frame
> .animated-frame .af-sparkles{
    opacity:.32!important;
}

/* Coroa um pouco menor no assento */
.seat-avatar.has-animated-frame
> .animated-frame .af-crown{
    width:37%!important;
    left:31.5%!important;
}

/* Badge CP TOP 1 legível sem invadir nome */
.seat-avatar.has-animated-frame
> .animated-frame .af-badge{
    width:34%!important;
    left:33%!important;
    bottom:-1%!important;
}

/* coração inferior mínimo na sala */
.seat-avatar.has-animated-frame
> .animated-frame .af-heart{
    width:5%!important;
    left:47.5%!important;
    bottom:2%!important;
}


/* ----------------------------------------------------------
   4. CARD/MODAL DE PERFIL DA SALA
   Preserva apresentação compacta.
   ---------------------------------------------------------- */

.room-user-profile-avatar.has-animated-frame
> .animated-frame{
    width:136%!important;
    height:136%!important;

    left:-18%!important;
    top:-18%!important;
    inset:auto!important;
}


/* ----------------------------------------------------------
   5. SEGURANÇA
   Somente a foto permanece recortada em círculo.
   A moldura nunca é cortada.
   ---------------------------------------------------------- */

.has-animated-frame > .animated-frame{
    max-width:none!important;
    max-height:none!important;
    border-radius:0!important;
    overflow:visible!important;
    pointer-events:none!important;
}


/* ==========================================
   CP TOP 1 — PERFIL PRINCIPAL DEFINITIVO
   ========================================== */

/* Mantém somente a moldura ornamental */
#profile-avatar.has-animated-frame .af-heart,
#profile-avatar.has-animated-frame .af-hearts,
#profile-avatar.has-animated-frame .af-sparkles{
    display:none!important;
}

/* Base ocupa exatamente o espaço da moldura */
#profile-avatar.has-animated-frame > .animated-frame{
    width:118%!important;
    height:118%!important;
    left:-9%!important;
    top:-9%!important;
    inset:auto!important;
}

/* Coroa */
#profile-avatar.has-animated-frame .af-crown{
    width:34%!important;
    left:33%!important;
    top:1%!important;
}

/* Badge CP TOP 1 */
#profile-avatar.has-animated-frame .af-badge{
    width:30%!important;
    left:35%!important;
    bottom:-1%!important;
}