/* Music box: hanya visual player musik. */
.music-box {
    position: fixed;
    right: 12px;
    bottom: calc(var(--bb, 62px) + 12px);
    z-index: 4000;
    width: 240px;
    max-width: calc(100vw - 24px);
    padding: 12px 16px;
    color: #fff;
    background: rgba(0, 0, 0, .82);
    border: 1px solid var(--tc, #d4af37);
    border-radius: var(--panel-radius, 14px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
    backdrop-filter: blur(var(--blur, 8px));
    transition: max-width .2s ease, max-height .2s ease, padding .2s ease;
}
.music-box h3 { margin: 0; font-size: 14px; }
.music-box p { margin: 2px 0 8px; color: #ddd; font-size: 11px; opacity: .65; }
.music-box .controls { display: flex; align-items: center; justify-content: center; gap: 4px; }
.music-box .controls button,
#mb-toggle { border: 0; color: var(--tc, #d4af37); background: transparent; cursor: pointer; }
.music-box .controls button { padding: 4px 8px; font-size: 20px; }
#mb-toggle { position: absolute; top: 2px; right: 6px; color: inherit; font-size: 15px; }
.music-box.minimized { width: 44px; height: 44px; padding: 6px; overflow: hidden; border-radius: 50%; cursor: pointer; }
.music-box.minimized h3,
.music-box.minimized p,
.music-box.minimized .controls { display: none; }
@media (max-width: 480px) { .music-box { right: 6px; width: 210px; } }

.music-box { color: var(--story-color, #fff); }
.music-box h3 { color: var(--story-color, #fff); }
.music-box p { color: var(--story-color, #ddd); }
.music-empty { display: block; margin: 4px 0 8px; color: var(--story-color, #ffd700); font-size: 10px; opacity: .8; text-align: center; }
.music-box .controls.no-track button, .music-box .controls button:disabled { opacity: .35; cursor: not-allowed; }
.music-box.no-track { border-style: dashed; }