/* Media Streaming */

.media-streaming-list {
    margin-top: 10px;
}

.media-streaming-card {
    margin: 0 0 12px;
    max-width: 100%;
}

.media-streaming-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--media-streaming-ratio, 16 / 9);
    max-height: 70vh;
    background: #000;
    border-radius: var(--bs-border-radius, 4px);
    overflow: hidden;
}

.media-streaming-audio .media-streaming-frame {
    aspect-ratio: auto;
    height: 80px;
    background: transparent;
}

/*
 * Bunny Stream has no audio player: an audio file is encoded as a black 16:9 video and
 * played by the regular video player, which always draws a large play button in the middle.
 * Measured on the live player: that button is 48px tall and vertically centred, the control
 * bar is the bottom 77px (57px below 480px wide), so below a height of 202px the button
 * overlaps the bar and its lower half stops being clickable.
 *
 * The iframe is therefore given a height where the two can never meet, and the frame clips it
 * down to the control bar alone - which is the whole player an audio file needs. Every control
 * sits within 63px of the bottom edge, so the strip keeps them all while trimming the empty
 * top of the bar's gradient and the player's floating title label, which starts 72px up.
 */
.media-streaming-card[data-provider="bunny"].media-streaming-audio .media-streaming-frame {
    height: 64px;
    background: #000;
}

.media-streaming-card[data-provider="bunny"].media-streaming-audio .media-streaming-frame iframe {
    top: auto;
    bottom: 0;
    height: 240px;
}

.media-streaming-frame .media-streaming-player,
.media-streaming-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-streaming-frame mux-player {
    --media-object-fit: contain;
}

.media-streaming-placeholder {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border: 1px dashed var(--bs-border-color, #ccc);
    border-radius: var(--bs-border-radius, 4px);
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #555);
}

.media-streaming-placeholder > .fa {
    font-size: 1.6em;
    flex: 0 0 auto;
}

.media-streaming-failed {
    border-color: var(--bs-danger-border-subtle, #f5c2c7);
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #842029);
}

.media-streaming-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.85em;
    min-width: 0;
}

.media-streaming-caption .media-streaming-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-streaming-caption .media-streaming-duration::before {
    content: "·";
    margin-right: 6px;
}

.media-streaming-message {
    padding: 12px;
}

/* Rich text: the card replaces an inline link, give it its own line */
.richtext-content .media-streaming-card,
.ProsemirrorEditor .media-streaming-card {
    display: block;
    margin: 8px 0;
}

#media-streaming-modal .media-streaming-card {
    margin-bottom: 0;
}