body{
margin:0;
font-family:Arial,sans-serif;
background:#fff;
overflow:hidden;
-webkit-tap-highlight-color:transparent;
}

/* ===== BUBBLE ===== */

.bubble{

position:fixed;

right:20px;
top:90px;

width:65px;
height:65px;

border-radius:50%;

z-index:99999;

cursor:grab;

touch-action:none;

user-select:none;
-webkit-user-select:none;

-webkit-touch-callout:none;

transition:transform .15s ease;

}

.bubble:hover{
transform:scale(1.08);
}

.bubble:active{
cursor:grabbing;
transform:scale(.96);
}

.bubble img{

width:100%;
height:100%;

object-fit:cover;

pointer-events:none;

user-select:none;
-webkit-user-drag:none;

}


/* ===== PLAYER PANEL ===== */

.player-panel{

position:fixed;

left:100px;
top:100px;

width:290px;

padding:12px;

background:#222;
color:#fff;

border-radius:14px;

box-shadow:
0 8px 20px rgba(0,0,0,.45);

display:none;
flex-direction:column;

z-index:9999;

touch-action:none;

animation:popup .2s ease;

}

@keyframes popup{

from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}

}


/* ===== HEADER DRAG ===== */

.player-header{

background:#333;

padding:8px;

text-align:center;

border-radius:10px 10px 0 0;

margin-bottom:10px;

cursor:move;

touch-action:none;

user-select:none;
-webkit-user-select:none;

-webkit-touch-callout:none;

}


/* ===== HEADER LOGO ===== */

.header-logo{

width:120px;
height:auto;

display:block;
margin:auto;

pointer-events:none;

}


/* ===== COVER ===== */

.player-panel img{

width:100%;

border-radius:12px;

margin-bottom:10px;

box-shadow:
0 3px 8px rgba(0,0,0,.4);

user-select:none;

-webkit-user-drag:none;

}


/* ===== CONTROLS ===== */

.controls{

display:flex;

justify-content:center;

gap:10px;

margin-bottom:10px;

}

.controls button{

background:#333;

border:none;

color:#fff;

width:42px;
height:42px;

border-radius:50%;

cursor:pointer;

font-size:18px;

transition:.2s;

touch-action:manipulation;

}

.controls button:hover{

background:#1e90ff;

transform:scale(1.1);

}

.controls button:active{

transform:scale(.92);

}


/* ===== TRACK ===== */

#trackName{

display:block;

text-align:center;

margin:8px 0;

font-size:14px;

word-break:break-word;

}


/* ===== PROGRESS ===== */

.progress-container{

display:flex;

align-items:center;

gap:8px;

margin-top:10px;

}

#progressBar{

flex:1;

cursor:pointer;

touch-action:manipulation;

}


/* ===== VOLUME ===== */

.volume-container{

position:absolute;

right:-45px;
top:30px;

height:120px;

display:flex;

align-items:center;
justify-content:center;

}

#volumeBar{

appearance:none;

-webkit-appearance:slider-vertical;

width:20px;
height:100px;

cursor:pointer;

touch-action:manipulation;

}


/* ===== MOBILE FIX ===== */

@media (max-width:768px){

.player-panel{

width:260px;

max-width:90vw;

}

.volume-container{

right:-35px;

}

#bubble,
#panelHeader{
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
}

#bubble{
    position:fixed;
    cursor:grab;
}

#playerPanel{
    position:fixed;
}


#bubble{
    position:fixed;
    right:20px;
    top:90px;

    width:65px;
    height:65px;

    z-index:99999;   /* PALING ATAS */
}

#playerPanel{
    position:fixed;

    z-index:9999;    /* DI BAWAH BUBBLE */
}