/* Feed clips wear X's player, not the phone's. The native iOS chrome drew a
   full set of buttons over the picture (skip, centre pause, corner expand); this
   bar stays hidden until the clip is hovered or tapped, and sits on a soft
   gradient the way X's timeline player does. */
.mtv-vbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 10px 7px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .38) 58%, rgba(0, 0, 0, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.mtv-vbar.is-on,
.mtv-vbar:focus-within {
    opacity: 1;
    pointer-events: auto;
}
/* A mouse can ask for the bar just by pointing at the clip. Touch has no hover,
   so a tap toggles the bar instead (the script's `is-on`). */
@media (hover: hover) and (pointer: fine) {
    .mtv-post__media.is-video:hover .mtv-vbar,
    .mtv-post__pairitem:hover .mtv-vbar,
    .mtv-post__slide:hover .mtv-vbar {
        opacity: 1;
        pointer-events: auto;
    }
}
.mtv-vbar__seek {
    position: relative;
    height: 16px;
    margin: 0 4px 3px;
    touch-action: none;
    cursor: pointer;
}
.mtv-vbar__seek::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6.5px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
}
.mtv-vbar__fill {
    position: absolute;
    left: 0;
    top: 6.5px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: #fff;
}
.mtv-vbar__knob {
    position: absolute;
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .12s ease;
}
.mtv-vbar__seek:hover .mtv-vbar__knob,
.mtv-vbar__seek.is-dragging .mtv-vbar__knob { opacity: 1; }
.mtv-vbar__seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.mtv-vbar__seek:focus-visible .mtv-vbar__knob { opacity: 1; }
.mtv-vbar__row {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #fff;
}
.mtv-vbar__btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mtv-vbar__btn:hover { background: rgba(255, 255, 255, .14); }
.mtv-vbar__btn:active { background: rgba(255, 255, 255, .22); }
.mtv-vbar__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mtv-vbar__btn svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.mtv-vbar__time {
    padding: 0 3px 0 2px;
    font: 500 11px/1 var(--mtv-font-ui, system-ui, -apple-system, sans-serif);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.mtv-vbar__spacer { flex: 1 1 auto; min-width: 4px; }
/* A half-width cell has no room for a clock beside three buttons; the seek line
   already carries the place in the clip. */
.mtv-post__pairitem .mtv-vbar__time,
.mtv-post__slide .mtv-vbar__time { display: none; }
.mtv-post__pairitem .mtv-vbar,
.mtv-post__slide .mtv-vbar { padding: 20px 6px 4px; }
.mtv-post__pairitem .mtv-vbar__btn,
.mtv-post__slide .mtv-vbar__btn { width: 26px; height: 26px; }
.mtv-post__pairitem .mtv-vbar__btn svg,
.mtv-post__slide .mtv-vbar__btn svg { width: 16px; height: 16px; }

@media (hover: none) {
    .mtv-vbar__btn { width: 34px; height: 34px; }
    .mtv-vbar__btn svg { width: 20px; height: 20px; }
    .mtv-vbar__time { font-size: 11.5px; }
}

/* Full screen is our own frame, so the bar stays down at the bottom instead of
   handing the picture back to the phone's player. iOS has no element full
   screen and uses its native player instead. */
.mtv-post__media.is-video:fullscreen,
.mtv-post__media.is-video:-webkit-full-screen,
.mtv-post__pairitem:fullscreen,
.mtv-post__pairitem:-webkit-full-screen,
.mtv-post__slide:fullscreen,
.mtv-post__slide:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    background: #000;
}
.mtv-post__media.is-video:fullscreen video,
.mtv-post__media.is-video:-webkit-full-screen video,
.mtv-post__pairitem:fullscreen video,
.mtv-post__pairitem:-webkit-full-screen video,
.mtv-post__slide:fullscreen video,
.mtv-post__slide:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}