.media-box .panel-body { padding: 12px; }
.media-box-player { position: relative; aspect-ratio: 16 / 9; background: #101014; overflow: hidden; border-radius: 4px; }
.media-box-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.media-box-link { display: block; margin-top: 10px; text-align: center; }
/* Twitch requires a player at least 400px wide and 300px tall. */
.media-box-twitch .media-box-player { display: none; height: 300px; aspect-ratio: auto; }
@supports (container-type: inline-size) {
    .media-box-twitch { container-type: inline-size; }
    @container (min-width: 424px) {
        .media-box-twitch .media-box-player { display: block; }
    }
}
.media-box-toggle { display: none; }

    .media-boxes-floating {
        position: fixed;
        left: 12px;
        bottom: 12px;
        width: var(--media-floating-width, 0px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: #d8cebf;
        color-scheme: dark;
    }
    .media-boxes-floating .media-box { flex: 0 0 auto; margin: 0; border: 1px solid #59432b; border-radius: 8px; overflow: hidden; background: #191613; box-shadow: 0 6px 20px #0006; }
    .media-boxes-floating .panel-heading { background: #282017; border-bottom: 1px solid #59432b; color: #e4c492; padding: 6px 8px; }
    .media-boxes-floating .panel-title { font-size: 13px; line-height: 18px; }
    .media-boxes-floating .panel-body { padding: 8px; background: transparent; }
    .media-boxes-floating .media-box-twitch .media-box-player { display: none; }
    .media-boxes-floating .media-box-link { margin-top: 6px; font-size: 12px; }
    .media-boxes-floating .media-box-link { color: #e4c492; }
.media-boxes-floating[hidden] { display: none !important; }
.media-boxes-floating .media-box-player { display: none; }
.media-boxes-floating.media-boxes-video .media-box-youtube .media-box-player { display: block; }
.media-boxes-floating.media-boxes-twitch-video .media-box-twitch .media-box-player { display: block; }
.media-boxes-floating .media-box-link { overflow-wrap: anywhere; }