.vrvp-player{
    position:fixed;
    left:22px;
    bottom:22px;
    z-index:999999;
    font-family:Arial, Helvetica, sans-serif;
}

.vrvp-player button{
    all:unset;
    box-sizing:border-box;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    -webkit-tap-highlight-color:transparent;
}

.vrvp-toggle{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#111;
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.38);
    transition:transform .2s ease, box-shadow .2s ease;
}

.vrvp-toggle:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0,0,0,.45);
}

.vrvp-record {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    border: 0;
    cursor: pointer;
}

.vrvp-record-center{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    display:block;
}

.vrvp-player.is-playing .vrvp-record{
    animation:vrvpSpin 2.4s linear infinite;
}

@keyframes vrvpSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

.vrvp-panel{
    position:absolute;
    left:0;
    bottom:66px;
    display:flex;
    align-items:center;
    gap:9px;
    max-width:calc(100vw - 44px);
    padding:10px 12px;
    border-radius:999px;
    background:rgba(15,15,15,.96);
    color:#fff;
    box-shadow:0 14px 36px rgba(0,0,0,.42);
    backdrop-filter:blur(8px);
    opacity:0;
    transform:translateY(10px) scale(.96);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}

.vrvp-player.open .vrvp-panel{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.vrvp-control{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:50%;
    background:#fff !important;
    color:#111 !important;
    border:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.22);
    transition:transform .15s ease, background .15s ease, color .15s ease;
}

.vrvp-control:hover{
    transform:translateY(-1px) scale(1.04);
    background:#f2f2f2 !important;
}

.vrvp-control:active{
    transform:scale(.96);
}

.vrvp-play{
    width:44px;
    height:44px;
    min-width:44px;
    background:#ffffff !important;
}

.vrvp-control svg{
    width:20px;
    height:20px;
    display:block;
    fill:currentColor;
}

.vrvp-play svg{
    width:22px;
    height:22px;
}

.vrvp-title{
    display:inline-block;
    max-width:215px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    padding:0 8px 0 2px;
    color:#fff;
}

@media (max-width:767px){

    .vrvp-player{
        left:auto !important;
        right:16px !important;
        bottom:16px;
    }

    .vrvp-panel{
        bottom:64px;
        gap:7px;
        padding:9px 10px;
    }

    .vrvp-control{
        width:36px;
        height:36px;
        min-width:36px;
    }

    .vrvp-play{
        width:42px;
        height:42px;
        min-width:42px;
    }

    .vrvp-title{
        max-width:135px;
        font-size:12px;
    }
}


@media (max-width:767px){
   .vrvp-panel{
      left:auto !important;
      right:0 !important;
   }
}