.captions-container {
    flex-direction: column;
    background: rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
body.dark-mode .captions-container { background: rgba(14, 17, 22, .90); }
.captions-header { position: relative; flex-shrink: 0; }
.captions-content { min-height: 0; }
.captions-move, .captions-resize { display: none; }

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .captions-container {
        box-sizing: border-box;
        height: 280px;
        max-height: calc(100dvh - 24px);
    }
    .captions-container.captions-floating {
        position: fixed;
        left: var(--caption-left);
        top: var(--caption-top);
        width: var(--caption-width);
        height: var(--caption-height);
        max-width: calc(100vw - 24px);
        transform: none;
        -webkit-transform: none;
        z-index: 1100;
    }
    .captions-header {
        cursor: grab;
        user-select: none;
        touch-action: none;
        transition: background-color 120ms ease;
    }
    .captions-content {
        flex: 1;
        max-height: none;
        overscroll-behavior: contain;
        padding-bottom: 24px;
    }
    .captions-move, .captions-resize {
        display: grid;
        place-items: center;
        position: absolute;
        padding: 0;
        border: 0;
        background: transparent;
        color: #777;
        opacity: .5;
        touch-action: none;
    }
    .captions-move {
        position: static;
        flex: 0 0 16px;
        width: 16px;
        height: 24px;
        margin: -4px 4px -4px -4px;
        cursor: grab;
    }
    .captions-title { margin-right: auto; }
    .captions-move svg { width: 14px; height: 10px; transform: rotate(90deg); stroke-width: 3; }
    .captions-resize {
        bottom: 2px;
        right: 2px;
        width: 24px;
        height: 24px;
        border-radius: 4px 0 8px 0;
        background: #fff;
        cursor: ns-resize;
    }
    .captions-resize svg { width: 20px; height: 20px; stroke-width: 1.5; }
    .captions-move svg, .captions-resize svg { fill: none; stroke: currentColor; stroke-linecap: round; }
    .captions-move:hover, .captions-resize:hover,
    .captions-move:focus-visible, .captions-resize:focus-visible { opacity: 1; }
    .captions-move:focus-visible, .captions-resize:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; border-radius: 4px; }
    .captions-container.is-dragging .captions-header { background: #e5e5e5; cursor: grabbing; }
    .captions-container.is-dragging .captions-move { opacity: 1; cursor: grabbing; }
    .captions-container.is-resizing .captions-resize { opacity: 1; }
    body.captions-adjusting, body.captions-adjusting * { user-select: none !important; }
    body.dark-mode .captions-move, body.dark-mode .captions-resize { color: #b5b5b5; }
    body.dark-mode .captions-resize { background: #0e1116; }
    body.dark-mode .captions-container.is-dragging .captions-header { background: #34383e; }
}