/* Keep sticky/fixed chrome opaque while mobile browsers resize or fling the
   visual viewport. These shields sit outside the visible boxes, so they do
   not change header/player dimensions or receive touches. */
.main-header {
    isolation: isolate;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.main-header::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    z-index: -1;
    height: calc(96px + env(safe-area-inset-top));
    content: "";
    background: #000;
    pointer-events: none;
}

.music-player:not(.is-idle) {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.music-player:not(.is-idle)::after {
    position: fixed;
    right: 0;
    bottom: -96px;
    left: 0;
    z-index: -1;
    height: calc(112px + env(safe-area-inset-bottom));
    content: "";
    background: #16191f;
    pointer-events: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
    .music-player.is-expanded::after {
        top: -96px;
        bottom: -96px;
        height: auto;
        background: #050607;
    }
}