/* Visual mockup. When a real source is configured, app.js uses native video controls. */
.vsl-wrap{border:0;background:#0a0a0a;border-radius:20px;box-shadow:0 18px 60px #0b163a1a;overflow:hidden}
.vsl-watch-banner{background:var(--voco-tone-2563eb, #2563eb);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:9px 20px;font-size:12px;font-weight:500;letter-spacing:.19em;line-height:1.4}
.vsl-watch-banner svg{width:19px;height:19px;flex-shrink:0}
.vsl-preview{position:relative;aspect-ratio:16/9;overflow:hidden;background:#101828;border-radius:0;isolation:isolate}
.vsl-thumbnail{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vsl-dark-overlay{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.vsl-speaker{position:absolute;top:22px;right:24px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:white;background:#151515b3}
.vsl-speaker svg{width:35px;height:35px}
.vsl-play-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--voco-tone-2563ebc9, #2563ebc9);box-shadow:0 10px 35px #091b4633;display:grid;place-items:center;animation:vsl-play-breathe 2.4s ease-in-out infinite}
.vsl-play-preview i{display:block;width:0;height:0;border-left:28px solid white;border-top:20px solid transparent;border-bottom:20px solid transparent;margin-left:7px}
.vsl-control-bar{position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;gap:16px;border-radius:10px;background:var(--voco-tone-2563ebd9, #2563ebd9);color:#fff;padding:9px 15px;min-height:38px}
.vsl-mini-play{border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;flex-shrink:0}
.vsl-time{font-size:14px;font-weight:500;letter-spacing:.04em}
.vsl-progress{height:3px;background:#ffffff72;flex:1;position:relative;border-radius:99px;margin-right:3px}
.vsl-progress>span{position:absolute;inset:0 auto 0 0;width:20%;background:#fff;border-radius:99px}
.vsl-progress i{position:absolute;top:50%;transform:translateY(-50%);height:7px;width:7px;border:2px solid #ffffffb8;border-radius:50%;background:var(--voco-tone-2563eb, #2563eb)}
.vsl-progress i:nth-of-type(1){left:14%}.vsl-progress i:nth-of-type(2){left:38%}.vsl-progress i:nth-of-type(3){left:61%}.vsl-progress i:nth-of-type(4){left:88%}
.vsl-cc{border:2px solid #fff;border-radius:3px;font-size:12px;font-weight:700;padding:1px 3px;line-height:1.1}
.vsl-volume,.vsl-fullscreen{width:24px;height:24px;flex-shrink:0}.vsl-settings{font-size:25px;line-height:1}
@media(max-width:720px){.vsl-wrap{border-radius:16px}.vsl-watch-banner{min-height:31px;font-size:8px;letter-spacing:.14em;padding:7px 10px;gap:7px}.vsl-watch-banner svg{width:14px;height:14px}.vsl-preview{border-radius:0}.vsl-speaker{width:34px;height:34px;top:12px;right:12px}.vsl-speaker svg{width:21px;height:21px}.vsl-play-preview{width:62px;height:62px;border-radius:50%}.vsl-play-preview i{border-left-width:18px;border-top-width:12px;border-bottom-width:12px;margin-left:4px}.vsl-control-bar{left:6px;right:6px;bottom:6px;gap:8px;min-height:26px;padding:6px 8px;border-radius:6px}.vsl-mini-play{border-left-width:7px;border-top-width:5px;border-bottom-width:5px}.vsl-time{font-size:9px}.vsl-progress{height:2px}.vsl-progress i{width:5px;height:5px;border-width:1px}.vsl-cc{font-size:8px;border-width:1px;padding:1px 2px}.vsl-volume,.vsl-fullscreen{width:16px;height:16px}.vsl-settings{font-size:17px}}

.vsl-play-preview::before,.vsl-play-preview::after{content:"";position:absolute;inset:-8px;border:1px solid #ffffff80;border-radius:50%;animation:vsl-play-ripple 2.4s ease-out infinite;pointer-events:none}.vsl-play-preview::after{animation-delay:1.2s}
@keyframes vsl-play-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
@keyframes vsl-play-ripple{0%{transform:scale(.88);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.vsl-play-preview,.vsl-play-preview::before,.vsl-play-preview::after{animation:none}.vsl-play-preview::before,.vsl-play-preview::after{display:none}}

/* A quieter heartbeat and staggered waves keep the sound cue alive. */
.vsl-speaker{animation:vsl-speaker-breathe 3.2s ease-in-out infinite}
.vsl-speaker::after{content:"";position:absolute;inset:-3px;border:1px solid #ffffff55;border-radius:50%;animation:vsl-speaker-ring 3.2s ease-out infinite;pointer-events:none}
.vsl-sound-wave{transform-box:fill-box;transform-origin:left center;animation:vsl-sound-wave 2.6s ease-in-out infinite}
.vsl-sound-wave-far{animation-delay:.22s}
@keyframes vsl-speaker-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes vsl-speaker-ring{0%{transform:scale(1);opacity:0}25%{opacity:.28}100%{transform:scale(1.16);opacity:0}}
@keyframes vsl-sound-wave{0%,100%{opacity:.32;transform:scaleX(.94)}45%,65%{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.vsl-speaker,.vsl-speaker::after,.vsl-sound-wave{animation:none}.vsl-speaker::after{display:none}}