/* ============================================
   THE VIDEO THAT FOLLOWS YOU BETWEEN PAGES
   js/plug-ins/video-continuity.js
   ============================================

   A picture-in-picture window dies with the document that opened it, so a
   navigation always closes it. This is what the video comes back as on the
   next page: a small floating player at the same second, with one button to
   put it back in the system window.

   Styled here rather than injected from the script. This component has twice
   been styled twice - once from player-bridge.js and once from videoplayer.js -
   and a runtime <style> element always wins, which is how the engagement bar
   ended up invisible in the light theme and how theater mode kept hiding the
   sidebar. One location. */

.video-continue {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9500;
    width: 300px;
    max-width: calc(100vw - 32px);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border-color, rgba(127, 127, 127, 0.28));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    animation: videoContinueIn 0.25s ease;
}

@keyframes videoContinueIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* The picture is a button: pressing it puts the video back in the full player
   on this page. That is what people reach for, and with only a PiP button on
   offer they were pressing that instead and getting a system window. */
.video-continue-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    object-fit: contain;
    cursor: zoom-in;
}

/* Shown over the picture on hover, so the picture says what it does rather
   than relying on the reader trying it. */
.video-continue-expand {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-continue:hover .video-continue-expand,
.video-continue-expand:focus-visible {
    opacity: 1;
}

.video-continue-expand svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.video-continue-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, rgba(127, 127, 127, 0.22));
}

/* The title is the way back to the video's own page, so it reads as something
   you can press. */
.video-continue-title {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.video-continue-title:hover {
    color: var(--button-bg);
    text-decoration: underline;
}

.video-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.video-continue-btn:hover {
    background: var(--input-bg, rgba(127, 127, 127, 0.14));
}

.video-continue-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* They had it in picture-in-picture before the navigation, so that button is
   the one they are looking for. */
.video-continue.was-pip [data-act="pip"] {
    color: var(--button-bg);
    background: rgba(var(--button-bg-rgb), 0.14);
}

/* Autoplay with sound can be refused on a page nobody has touched yet. The
   play button is then the whole point of the thing, so it says so. */
.video-continue.paused [data-act="play"] {
    color: var(--button-bg);
    background: rgba(var(--button-bg-rgb), 0.14);
}

@media (max-width: 640px) {
    .video-continue {
        right: 12px;
        bottom: 12px;
        width: 220px;
    }
}