/* Preview clips (v2.16). The clip sits over the poster/thumbnail (positioned ancestor required) and stays
   invisible until it actually plays, so a slow or failed load never hides the image. */
.xs-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  background: transparent;
}
.xs-preview.is-playing { opacity: 1; }

.xs-preview-badge {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font: 600 12px/1.6 system-ui, sans-serif;
  letter-spacing: .02em;
  background: var(--xs-preview-badge-bg, rgba(0, 0, 0, .6));
  color: var(--xs-preview-badge-fg, #fff);
  pointer-events: none;
}
.external-player.has-preview .xs-preview-badge { display: block; }

.xs-play-label { display: none; }
.external-player.has-preview .external-player-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
}
.external-player.has-preview .external-player-play svg {
  flex: 0 0 auto;
  width: 56px;
  height: 40px;
}
.external-player.has-preview .xs-play-label {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  font: 600 14px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  background: var(--xs-play-label-bg, rgba(0, 0, 0, .65));
  color: var(--xs-play-label-fg, #fff);
}

@media (min-width: 768px) {
  .external-player.has-preview .xs-play-label { font-size: 16px; padding: 10px 16px; }
  .external-player.has-preview .external-player-play svg { width: 68px; height: 48px; }
}