/* The image is a native Video.js storyboard thumbnail, never a second player. */
#vesper-player .time-slider .slider-preview{
 --frame-width:168px;display:none;position:absolute;width:var(--frame-width);min-width:0;padding:4px;
 left:clamp(calc(var(--frame-width)/2),var(--media-slider-pointer),calc(100% - var(--frame-width)/2))!important;
 bottom:calc(100% + 9px);top:auto;transform:translateX(-50%);margin:0;border:1px solid #b8d7ea40;border-radius:12px;
 background:var(--panel);color:var(--white);box-shadow:0 9px 24px #02081073;font-size:10px;line-height:1.4;
 pointer-events:none;z-index:12;overflow:hidden;
}
#vesper-player .time-slider .frame-thumbnail{display:block;width:160px;height:90px;min-width:0;max-width:160px;max-height:90px;border-radius:8px;background:#08131e;overflow:hidden}
#vesper-player .frame-thumbnail>img{display:block;max-width:none}
#vesper-player .frame-thumbnail[data-loading]>img{opacity:0}
#vesper-player .frame-thumbnail:is([data-error],[data-hidden]){display:none}
#vesper-player .preview-caption{display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:25px;padding:4px 4px 1px}
#vesper-player .preview-caption media-time-slider-chapter-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:9px;text-align:left}
#vesper-player .preview-caption media-slider-value{display:block;flex:none;margin-left:auto;color:var(--white);font-size:10px;font-variant-numeric:tabular-nums}
@media(hover:hover){#vesper-player .time-slider:hover .slider-preview{display:block}}
#vesper-player .time-slider:is([data-dragging],[data-preview-keyboard=true]) .slider-preview{display:block}
#vesper-player .workspace[data-dock=top] .time-slider .slider-preview{bottom:auto;top:calc(100% + 60px)}
@container film (max-width:640px){
 #vesper-player .time-slider .slider-preview{--frame-width:136px;border-radius:10px}
 #vesper-player .time-slider .frame-thumbnail{width:128px;height:72px;max-width:128px;max-height:72px;border-radius:6px}
 #vesper-player .preview-caption{gap:4px;padding-inline:2px}
 #vesper-player .preview-caption media-time-slider-chapter-title{font-size:8px}
 #vesper-player .workspace[data-dock=top] .time-slider .slider-preview{top:calc(100% + 104px)}
}
/* Side-docked cards open inward, away from the outer edge of the player. */
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-preview{display:none;top:auto;bottom:clamp(62px,var(--media-slider-pointer),calc(100% - 62px));transform:translateY(50%)}
#vesper-player .workspace[data-dock=left] .time-slider .slider-preview{left:calc(100% + 14px)!important;right:auto}
#vesper-player .workspace[data-dock=right] .time-slider .slider-preview{left:auto!important;right:calc(100% + 14px)}
@media(hover:hover){#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider:hover .slider-preview{display:block}}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider:is([data-dragging],[data-preview-keyboard=true]) .slider-preview{display:block}
/* Override the former text-only focus tooltip: pointer leave closes the card. */
#vesper-player .time-slider:not(:hover):not([data-dragging]):not([data-preview-keyboard=true]) .slider-preview{display:none}
@media(hover:none){#vesper-player .time-slider:not([data-dragging]):not([data-preview-keyboard=true]) .slider-preview{display:none}}
@media(forced-colors:active){#vesper-player .time-slider .slider-preview{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}}