saltfish 0.3.91 → 0.3.93

package/dist/saltfish-playlist-player.es.js

@@ -929,6 +929,10 @@ const CSS_CLASSES = {
   PLAYER_MINIMIZED: "sf-player--minimized",
   CONTROLS_CONTAINER: "sf-controls-container",
   LOGO: "sf-player__logo",
+  BOTTOM_BAR: "sf-player__bottom-bar",
+  AI_BADGE: "sf-player__ai-badge",
+  AI_BADGE_LABEL: "sf-player__ai-badge-label",
+  AI_BADGE_LABEL_VISIBLE: "sf-player__ai-badge-label--visible",
   // Legacy error class
   ERROR_DISPLAY: "sf-error-display",
   ERROR_DISPLAY_VISIBLE: "sf-error-display--visible",
@@ -4357,7 +4361,7 @@ __publicField(_ManagerOrchestrator, "prevState", {
 let ManagerOrchestrator = _ManagerOrchestrator;
 const baseResetCss = "/* \n * CSS Reset for the Saltfish playlist Player\n * Minimal reset for the Shadow DOM to ensure consistent rendering\n */\n\n:host {\n  all: initial;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  box-sizing: border-box;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n  box-sizing: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font: inherit;\n  outline: none;\n  padding: 0;\n}\n\n/* Utility classes for CSP-compliant styling */\n.sf-hidden {\n  display: none !important;\n} ";
 const baseVariablesCss = "/* \n * Variables for the Saltfish playlist Player\n * Defines all design tokens used throughout the application\n */\n\n:host {\n  /* Colors */\n  --sf-primary-color: #4a9bff;\n  --sf-secondary-color: #6ccfff;\n  --sf-background-color: #1e1e1e;\n  --sf-text-color: #ffffff;\n  --sf-button-bg: rgba(0, 0, 0, 0.5);\n  --sf-button-hover-bg: rgba(0, 0, 0, 0.7);\n  --sf-overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.7) 100%);\n  --sf-progress-gradient: linear-gradient(90deg, var(--sf-primary-color), var(--sf-secondary-color));\n  --sf-error-color: #ff4d4d;\n  --sf-error-bg: rgba(255, 77, 77, 0.1);\n  \n  /* Spacing */\n  --sf-spacing-xs: 4px;\n  --sf-spacing-sm: 8px;\n  --sf-spacing-md: 12px;\n  --sf-spacing-lg: 16px;\n  --sf-spacing-xl: 24px;\n  \n  /* Sizes */\n  --sf-player-width: 240px;\n  --sf-player-height: 336px;\n  --sf-player-min-width: 80px;\n  --sf-player-min-height: 80px;\n  --sf-player-compact-width: 120px;\n  --sf-player-compact-height: 120px;\n  --sf-control-button-size: 24px;\n  --sf-play-button-size: 60px;\n  --sf-play-button-compact-size: 44px;\n  --sf-minimize-button-size: 34px;\n  --sf-mute-button-size: 32px;\n  --sf-cc-button-size: 32px;\n  --sf-cursor-size: 32px;\n  \n  /* Border radius */\n  --sf-border-radius-sm: 4px;\n  --sf-border-radius-md: 8px;\n  --sf-border-radius-lg: 16px;\n  --sf-border-radius-circle: 50%;\n  \n  /* Transitions */\n  --sf-transition-fast: 0.1s ease;\n  --sf-transition-normal: 0.2s ease;\n  --sf-transition-slow: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  \n  /* Shadows */\n  --sf-shadow-small: 0 2px 5px rgba(0, 0, 0, 0.2);\n  --sf-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);\n  --sf-shadow-large: 0 10px 25px rgba(0, 0, 0, 0.2);\n  \n  /* Z-index layering */\n  --sf-z-index-base: 1;\n  --sf-z-index-overlay: 2;\n  --sf-z-index-controls: 10;\n  --sf-z-index-cursor: 9999;\n  --sf-z-index-player: 2147483648;\n  \n  /* Font sizes */\n  --sf-font-size-sm: 14px;\n  --sf-font-size-md: 16px;\n  --sf-font-size-lg: 18px;\n  --sf-font-size-xl: 24px;\n} \n\n/* Mobile device responsive adjustments - make player smaller for mobile screens */\n@media (max-width: 768px) {\n  :host {\n    /* Reduce player size on mobile for better space utilization */\n    --sf-player-width: 180px;        /* 25% smaller than desktop (240px -> 180px) */\n    --sf-player-height: 252px;       /* 25% smaller than desktop (336px -> 252px) */\n    --sf-player-min-width: 60px;     /* Smaller when minimized (80px -> 60px) */\n    --sf-player-min-height: 60px;    /* Smaller when minimized (80px -> 60px) */\n    --sf-player-compact-width: 90px; /* Smaller compact mode for mobile (120px -> 90px) */\n    --sf-player-compact-height: 90px; /* Smaller compact mode for mobile (120px -> 90px) */\n\n    /* Keep controls touch-friendly despite smaller player size */\n    --sf-play-button-size: 44px;     /* Smaller but still touch-friendly (60px -> 44px) */\n    --sf-play-button-compact-size: 36px; /* Touch-friendly compact play button */\n    --sf-control-button-size: 28px;  /* Keep larger for touch targets (24px -> 28px) */\n    --sf-mute-button-size: 26px;     /* Smaller for mobile (32px -> 26px) */\n    --sf-cc-button-size: 26px;       /* Smaller for mobile (32px -> 26px) */\n    --sf-minimize-button-size: 26px; /* Match other mobile button sizes */\n  }\n}\n\n/* Touch device specific adjustments (tablets and larger touch devices, excluding mobile) */\n@media (pointer: coarse) and (min-width: 769px) {\n  :host {\n    /* Ensure touch-friendly sizes even on larger touch devices */\n    --sf-control-button-size: 28px;\n    --sf-mute-button-size: 38px;\n    --sf-cc-button-size: 38px;\n    --sf-minimize-button-size: 38px; /* Match other touch device button sizes */\n  }\n} ";
-const componentsPlayerCss = "/* \n * Player component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main player container */\n.sf-player {\n  border-radius: var(--sf-border-radius-md);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08);\n  position: relative;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  opacity: 0;\n  /* Smooth transitions for size changes and opacity */\n  transition: opacity 0.3s ease-in-out,\n              width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),\n              height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),\n              border-radius 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Player visible state - show with fade in */\n.sf-player--visible {\n  opacity: 1;\n}\n\n/* Gradient overlay now moved to video container - see _video.css */\n\n/* Full-size player state */\n.sf-player:not(.sf-player--minimized) {\n  width: var(--sf-player-width);\n  height: var(--sf-player-height);\n}\n\n/* Autoplay fallback state - ensure play button is visible */\n.sf-player--waiting-for-user-interaction .sf-controls-container__play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n\n/* Also show the center play button in autoplay fallback state */\n.sf-player--waiting-for-user-interaction .sf-player__center-play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  z-index: calc(var(--sf-z-index-controls) + 20) !important; /* Higher z-index to appear above overlay */\n}\n\n/* Make the autoplay fallback state more prominent to indicate need for interaction */\n.sf-player--waiting-for-user-interaction::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n}\n\n/* Player state: minimized */\n.sf-player--minimized {\n  /* Equal width and height are essential for maintaining a perfect circle when using border-radius: 50% */\n  width: var(--sf-player-min-width);\n  height: var(--sf-player-min-height);\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.20), 0 5px 15px rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-min-width) !important;\n  max-height: var(--sf-player-min-height) !important;\n  min-width: var(--sf-player-min-width) !important;\n  min-height: var(--sf-player-min-height) !important;\n}\n\n/* Player state: compact (first step, small rounded) */\n.sf-player--compact {\n  width: var(--sf-player-compact-width) !important;\n  height: var(--sf-player-compact-height) !important;\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.20), 0 5px 15px rgba(0, 0, 0, 0.12);\n  cursor: pointer; /* Whole bubble is clickable */\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-compact-width) !important;\n  max-height: var(--sf-player-compact-height) !important;\n  min-width: var(--sf-player-compact-width) !important;\n  min-height: var(--sf-player-compact-height) !important;\n}\n\n/* Hide center play button in compact mode - the whole bubble is clickable */\n.sf-player--compact .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Hide elements in compact mode */\n.sf-player--compact .sf-player__logo,\n.sf-player--compact .sf-player__minimize-button {\n  display: none;\n}\n\n/* Hide gradient overlay when in compact mode - see _video.css */\n.sf-player--compact .sf-video-container::after {\n  display: none;\n}\n\n/* Hide controls when minimized */\n.sf-player--minimized .sf-controls-container {\n  display: none;\n}\n\n/* Hide controls when in compact mode */\n.sf-player--compact .sf-controls-container {\n  display: none;\n}\n\n/* Only show the minimize button when hovering on minimized player */\n.sf-player--minimized .sf-player__minimize-button {\n  opacity: 0;\n}\n\n.sf-player--minimized:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Player root element */\n#sf-player-root {\n  position: fixed;\n  z-index: var(--sf-z-index-player);\n}\n\n/* Fixed positioning classes */\n.sf-player-root--bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.sf-player-root--bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Player error message */\n.sf-player__error {\n  padding: var(--sf-spacing-md);\n  color: var(--sf-error-color);\n  background-color: var(--sf-error-bg);\n  border-radius: var(--sf-border-radius-md);\n  margin: var(--sf-spacing-sm);\n  font-size: var(--sf-font-size-sm);\n  border-left: 4px solid var(--sf-error-color);\n}\n\n/* Minimize button */\n.sf-player__minimize-button {\n  position: absolute;\n  top: 8px;\n  right: 4px;\n  width: var(--sf-minimize-button-size);\n  height: var(--sf-minimize-button-size);\n  background: none !important;\n  border-radius: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-sm) + 4px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Minimize button background circle */\n.sf-player__minimize-button::before {\n  content: '';\n  position: absolute;\n  width: 80%;\n  height: 80%;\n  background-color: rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  z-index: -1;\n  transition: all var(--sf-transition-normal);\n}\n\n/* Minimize button hover state */\n.sf-player__minimize-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show minimize button on player hover */\n.sf-player:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Mobile and touch device overrides for minimize button visibility */\n/* Ensure minimize button is always visible on touch devices, even when minimized */\n@media (pointer: coarse) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n}\n\n/* Ensure minimize button is always visible on mobile screens under 768px */\n@media (max-width: 768px) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n}\n\n/* Player title */\n.sf-player__title {\n  position: absolute;\n  top: var(--sf-spacing-md);\n  left: var(--sf-spacing-md);\n  color: var(--sf-text-color);\n  font-size: var(--sf-font-size-md);\n  font-weight: 600;\n  z-index: var(--sf-z-index-controls);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  max-width: 70%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Centered play/pause button overlay */\n.sf-player__center-play-button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: none; /* Hidden by default */\n  justify-content: center;\n  align-items: center;\n  z-index: calc(var(--sf-z-index-controls) + 10); /* Ensure higher z-index than other elements */\n  color: white;\n  border: none;\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal), opacity var(--sf-transition-normal);\n  backdrop-filter: blur(1px);\n  -webkit-backdrop-filter: blur(1px);\n  pointer-events: auto; /* Enable pointer events to capture clicks */\n}\n\n/* Icon visibility control - use opacity for smooth transitions */\n.sf-player__center-play-button__pause-icon,\n.sf-player__center-play-button__play-icon {\n  position: absolute;\n  transition: opacity var(--sf-transition-normal);\n}\n\n.sf-player__center-play-button__pause-icon {\n  opacity: 0;\n}\n\n.sf-player__center-play-button__play-icon {\n  opacity: 1;\n}\n\n/* When playing, make button hoverable but invisible (desktop only) */\n@media (hover: hover) and (pointer: fine) {\n  .sf-player--playing .sf-player__center-play-button {\n    display: flex;\n    opacity: 0;\n    pointer-events: auto;\n  }\n\n  /* Show pause icon on hover when playing */\n  .sf-player--playing .sf-player__center-play-button:hover {\n    opacity: 1;\n  }\n\n  .sf-player--playing .sf-player__center-play-button:hover .sf-player__center-play-button__play-icon {\n    opacity: 0;\n    transition: none; /* Instant switch when hovering during playback */\n  }\n\n  .sf-player--playing .sf-player__center-play-button:hover .sf-player__center-play-button__pause-icon {\n    opacity: 1;\n    transition: none; /* Instant switch when hovering during playback */\n  }\n\n  /* Delay icon switch when not hovering during playback so pause icon stays visible during fade-out */\n  .sf-player--playing .sf-player__center-play-button .sf-player__center-play-button__play-icon,\n  .sf-player--playing .sf-player__center-play-button .sf-player__center-play-button__pause-icon {\n    transition: opacity 0s 0.2s; /* Instant transition but delayed by button fade duration */\n  }\n}\n\n/* Replay icon hidden by default */\n.sf-player__center-play-button__replay-icon {\n  opacity: 0;\n  position: absolute;\n  transition: opacity var(--sf-transition-normal);\n}\n\n/* Show replay icon when video completed or waiting for interaction */\n.sf-player--completedWaitingForInteraction .sf-player__center-play-button__replay-icon,\n.sf-player--waitingForInteraction .sf-player__center-play-button__replay-icon {\n  opacity: 1;\n  transition: none;\n}\n\n/* Hide play/pause icons when showing replay */\n.sf-player--completedWaitingForInteraction .sf-player__center-play-button__play-icon,\n.sf-player--completedWaitingForInteraction .sf-player__center-play-button__pause-icon,\n.sf-player--waitingForInteraction .sf-player__center-play-button__play-icon,\n.sf-player--waitingForInteraction .sf-player__center-play-button__pause-icon {\n  opacity: 0;\n  transition: none;\n}\n\n/* Center play button visible state */\n.sf-player__center-play-button--visible {\n  display: flex !important;\n}\n\n/* Center play button prominent state (for autoplay blocked, idle mode) */\n.sf-player__center-play-button--prominent {\n  opacity: 1 !important;\n  pointer-events: auto !important;\n}\n\n/* Center play button hover state */\n.sf-player__center-play-button:hover {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* Hide center play button in minimized state */\n.sf-player--minimized .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Center play button with dynamic positioning when buttons are present */\n/* Positions button centered between top of player and top of first button */\n.sf-player__center-play-button--with-buttons {\n  /* Available space above buttons = playerHeight - bottomSpacing - buttonContainerHeight */\n  /* Center point = availableSpace / 2 */\n  top: calc((var(--sf-player-height) - var(--sf-spacing-xl) - var(--sf-button-container-height, 0px)) / 2) !important;\n  transform: translate(-50%, -50%) !important;\n}\n\n/* Maintain scale on hover for buttons with dynamic positioning */\n.sf-player__center-play-button--with-buttons:hover {\n  transform: translate(-50%, -50%) scale(1.1) !important;\n}\n\n/* Exit button for minimized mode */\n.sf-player__exit-button {\n  position: absolute;\n  top: -22px; /* Position it above the player */\n  right: 0;\n  width: 22px;\n  height: 22px;\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: var(--sf-font-size-md);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.sf-player__exit-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Exit button hover state */\n.sf-player__exit-button:hover {\n  transform: scale(1.1);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Show exit button on minimized player hover */\n.sf-player--minimized:hover .sf-player__exit-button {\n  opacity: 1;\n}\n\n/* Saltfish logo */\n.sf-player__logo {\n  position: absolute;\n  bottom: var(--sf-spacing-xs);\n  left: 0;\n  right: 0;\n  height: 18px;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0.7;\n  transition: opacity var(--sf-transition-normal);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sf-player__logo svg {\n  width: 55px;\n  height: 20px;\n}\n\n/* Logo hover state */\n.sf-player:hover .sf-player__logo {\n  opacity: 0.9;\n}\n\n/* Hide logo when minimized */\n.sf-player--minimized .sf-player__logo {\n  display: none;\n} ";
+const componentsPlayerCss = "/* \n * Player component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main player container */\n.sf-player {\n  border-radius: var(--sf-border-radius-md);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08);\n  position: relative;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  opacity: 0;\n  /* Smooth transitions for size changes and opacity */\n  transition: opacity 0.3s ease-in-out,\n              width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),\n              height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),\n              border-radius 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Player visible state - show with fade in */\n.sf-player--visible {\n  opacity: 1;\n}\n\n/* Gradient overlay now moved to video container - see _video.css */\n\n/* Full-size player state */\n.sf-player:not(.sf-player--minimized) {\n  width: var(--sf-player-width);\n  height: var(--sf-player-height);\n}\n\n/* Autoplay fallback state - ensure play button is visible */\n.sf-player--waiting-for-user-interaction .sf-controls-container__play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n\n/* Also show the center play button in autoplay fallback state */\n.sf-player--waiting-for-user-interaction .sf-player__center-play-button {\n  display: flex !important;\n  opacity: 1 !important;\n  z-index: calc(var(--sf-z-index-controls) + 20) !important; /* Higher z-index to appear above overlay */\n}\n\n/* Make the autoplay fallback state more prominent to indicate need for interaction */\n.sf-player--waiting-for-user-interaction::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n}\n\n/* Player state: minimized */\n.sf-player--minimized {\n  /* Equal width and height are essential for maintaining a perfect circle when using border-radius: 50% */\n  width: var(--sf-player-min-width);\n  height: var(--sf-player-min-height);\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.20), 0 5px 15px rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-min-width) !important;\n  max-height: var(--sf-player-min-height) !important;\n  min-width: var(--sf-player-min-width) !important;\n  min-height: var(--sf-player-min-height) !important;\n}\n\n/* Player state: compact (first step, small rounded) */\n.sf-player--compact {\n  width: var(--sf-player-compact-width) !important;\n  height: var(--sf-player-compact-height) !important;\n  border-radius: var(--sf-border-radius-circle);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.20), 0 5px 15px rgba(0, 0, 0, 0.12);\n  cursor: pointer; /* Whole bubble is clickable */\n  /* Force overriding any inline styles that might be applied */\n  max-width: var(--sf-player-compact-width) !important;\n  max-height: var(--sf-player-compact-height) !important;\n  min-width: var(--sf-player-compact-width) !important;\n  min-height: var(--sf-player-compact-height) !important;\n}\n\n/* Hide center play button in compact mode - the whole bubble is clickable */\n.sf-player--compact .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Hide elements in compact mode */\n.sf-player--compact .sf-player__logo,\n.sf-player--compact .sf-player__bottom-bar,\n.sf-player--compact .sf-player__minimize-button {\n  display: none;\n}\n\n/* Compact bubble still shows AI-generated footage, so keep a small AI badge.\n   The whole bubble is clickable, so the badge must not intercept pointer\n   events (no hover label). */\n.sf-player--compact .sf-player__ai-badge {\n  /* Offsets keep the badge fully inside the circular bubble (also at the\n     90px mobile size) */\n  right: 16px;\n  bottom: 16px;\n  height: 16px;\n  pointer-events: none;\n}\n\n.sf-player--compact .sf-player__ai-badge svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* Hide gradient overlay when in compact mode - see _video.css */\n.sf-player--compact .sf-video-container::after {\n  display: none;\n}\n\n/* Hide controls when minimized */\n.sf-player--minimized .sf-controls-container {\n  display: none;\n}\n\n/* Hide controls when in compact mode */\n.sf-player--compact .sf-controls-container {\n  display: none;\n}\n\n/* Only show the minimize button when hovering on minimized player */\n.sf-player--minimized .sf-player__minimize-button {\n  opacity: 0;\n}\n\n.sf-player--minimized:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Player root element */\n#sf-player-root {\n  position: fixed;\n  z-index: var(--sf-z-index-player);\n}\n\n/* Fixed positioning classes */\n.sf-player-root--bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.sf-player-root--bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Player error message */\n.sf-player__error {\n  padding: var(--sf-spacing-md);\n  color: var(--sf-error-color);\n  background-color: var(--sf-error-bg);\n  border-radius: var(--sf-border-radius-md);\n  margin: var(--sf-spacing-sm);\n  font-size: var(--sf-font-size-sm);\n  border-left: 4px solid var(--sf-error-color);\n}\n\n/* Minimize button */\n.sf-player__minimize-button {\n  position: absolute;\n  top: 8px;\n  right: 4px;\n  width: var(--sf-minimize-button-size);\n  height: var(--sf-minimize-button-size);\n  background: none !important;\n  border-radius: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-sm) + 4px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Minimize button background circle */\n.sf-player__minimize-button::before {\n  content: '';\n  position: absolute;\n  width: 80%;\n  height: 80%;\n  background-color: rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  z-index: -1;\n  transition: all var(--sf-transition-normal);\n}\n\n/* Minimize button hover state */\n.sf-player__minimize-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show minimize button on player hover */\n.sf-player:hover .sf-player__minimize-button {\n  opacity: 1;\n}\n\n/* Mobile and touch device overrides for minimize button visibility */\n/* Ensure minimize button is always visible on touch devices, even when minimized */\n@media (pointer: coarse) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for touch devices */\n  }\n}\n\n/* Ensure minimize button is always visible on mobile screens under 768px */\n@media (max-width: 768px) {\n  .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n  \n  .sf-player--minimized .sf-player__minimize-button {\n    opacity: 1 !important;\n    z-index: calc(var(--sf-z-index-controls) + 50) !important; /* Much higher z-index for mobile */\n    /* Position closer to top right corner on mobile */\n    top: var(--sf-spacing-xs) !important; /* 4px from top instead of 16px */\n    right: var(--sf-spacing-xs) !important; /* 4px from right instead of 12px */\n  }\n}\n\n/* Player title */\n.sf-player__title {\n  position: absolute;\n  top: var(--sf-spacing-md);\n  left: var(--sf-spacing-md);\n  color: var(--sf-text-color);\n  font-size: var(--sf-font-size-md);\n  font-weight: 600;\n  z-index: var(--sf-z-index-controls);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  max-width: 70%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Centered play/pause button overlay */\n.sf-player__center-play-button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: none; /* Hidden by default */\n  justify-content: center;\n  align-items: center;\n  z-index: calc(var(--sf-z-index-controls) + 10); /* Ensure higher z-index than other elements */\n  color: white;\n  border: none;\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal), opacity var(--sf-transition-normal);\n  backdrop-filter: blur(1px);\n  -webkit-backdrop-filter: blur(1px);\n  pointer-events: auto; /* Enable pointer events to capture clicks */\n}\n\n/* Icon visibility control - use opacity for smooth transitions */\n.sf-player__center-play-button__pause-icon,\n.sf-player__center-play-button__play-icon {\n  position: absolute;\n  transition: opacity var(--sf-transition-normal);\n}\n\n.sf-player__center-play-button__pause-icon {\n  opacity: 0;\n}\n\n.sf-player__center-play-button__play-icon {\n  opacity: 1;\n}\n\n/* When playing, make button hoverable but invisible (desktop only) */\n@media (hover: hover) and (pointer: fine) {\n  .sf-player--playing .sf-player__center-play-button {\n    display: flex;\n    opacity: 0;\n    pointer-events: auto;\n  }\n\n  /* Show pause icon on hover when playing */\n  .sf-player--playing .sf-player__center-play-button:hover {\n    opacity: 1;\n  }\n\n  .sf-player--playing .sf-player__center-play-button:hover .sf-player__center-play-button__play-icon {\n    opacity: 0;\n    transition: none; /* Instant switch when hovering during playback */\n  }\n\n  .sf-player--playing .sf-player__center-play-button:hover .sf-player__center-play-button__pause-icon {\n    opacity: 1;\n    transition: none; /* Instant switch when hovering during playback */\n  }\n\n  /* Delay icon switch when not hovering during playback so pause icon stays visible during fade-out */\n  .sf-player--playing .sf-player__center-play-button .sf-player__center-play-button__play-icon,\n  .sf-player--playing .sf-player__center-play-button .sf-player__center-play-button__pause-icon {\n    transition: opacity 0s 0.2s; /* Instant transition but delayed by button fade duration */\n  }\n}\n\n/* Replay icon hidden by default */\n.sf-player__center-play-button__replay-icon {\n  opacity: 0;\n  position: absolute;\n  transition: opacity var(--sf-transition-normal);\n}\n\n/* Show replay icon when video completed or waiting for interaction */\n.sf-player--completedWaitingForInteraction .sf-player__center-play-button__replay-icon,\n.sf-player--waitingForInteraction .sf-player__center-play-button__replay-icon {\n  opacity: 1;\n  transition: none;\n}\n\n/* Hide play/pause icons when showing replay */\n.sf-player--completedWaitingForInteraction .sf-player__center-play-button__play-icon,\n.sf-player--completedWaitingForInteraction .sf-player__center-play-button__pause-icon,\n.sf-player--waitingForInteraction .sf-player__center-play-button__play-icon,\n.sf-player--waitingForInteraction .sf-player__center-play-button__pause-icon {\n  opacity: 0;\n  transition: none;\n}\n\n/* Center play button visible state */\n.sf-player__center-play-button--visible {\n  display: flex !important;\n}\n\n/* Center play button prominent state (for autoplay blocked, idle mode) */\n.sf-player__center-play-button--prominent {\n  opacity: 1 !important;\n  pointer-events: auto !important;\n}\n\n/* Center play button hover state */\n.sf-player__center-play-button:hover {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* Hide center play button in minimized state */\n.sf-player--minimized .sf-player__center-play-button {\n  display: none !important;\n}\n\n/* Center play button with dynamic positioning when buttons are present */\n/* Positions button centered between top of player and top of first button */\n.sf-player__center-play-button--with-buttons {\n  /* Available space above buttons = playerHeight - bottomSpacing - buttonContainerHeight */\n  /* Center point = availableSpace / 2 */\n  top: calc((var(--sf-player-height) - var(--sf-spacing-xl) - var(--sf-button-container-height, 0px)) / 2) !important;\n  transform: translate(-50%, -50%) !important;\n}\n\n/* Maintain scale on hover for buttons with dynamic positioning */\n.sf-player__center-play-button--with-buttons:hover {\n  transform: translate(-50%, -50%) scale(1.1) !important;\n}\n\n/* Exit button for minimized mode */\n.sf-player__exit-button {\n  position: absolute;\n  top: -22px; /* Position it above the player */\n  right: 0;\n  width: 22px;\n  height: 22px;\n  background-color: rgba(0, 0, 0, 0.5);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: var(--sf-font-size-md);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.sf-player__exit-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Exit button hover state */\n.sf-player__exit-button:hover {\n  transform: scale(1.1);\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Show exit button on minimized player hover */\n.sf-player--minimized:hover .sf-player__exit-button {\n  opacity: 1;\n}\n\n/* Bottom bar behind the Saltfish logo - keeps it legible on bright videos.\n   Only rendered when the logo is shown (showLogo entitlement). */\n.sf-player__bottom-bar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 32px;\n  /* Soft fade with no hard top edge - stacks on the video's bottom\n     gradient (0.6 black at the bottom edge), so the white logo stays\n     legible without the strip reading as a solid bar */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n  pointer-events: none;\n  z-index: var(--sf-z-index-controls);\n}\n\n/* Saltfish logo */\n.sf-player__logo {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 26px;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0.9;\n  transition: opacity var(--sf-transition-normal);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sf-player__logo svg {\n  width: 55px;\n  height: 13px;\n}\n\n/* Logo hover state */\n.sf-player:hover .sf-player__logo {\n  opacity: 1;\n}\n\n/* AI transparency badge (EU AI Act disclosure) - always visible, even for\n   whitelabel clients that hide the Saltfish logo */\n.sf-player__ai-badge {\n  position: absolute;\n  bottom: 0;\n  right: var(--sf-spacing-sm);\n  height: 26px;\n  display: flex;\n  align-items: center;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0.9;\n  cursor: default;\n}\n\n.sf-player__ai-badge:hover {\n  opacity: 1;\n}\n\n.sf-player__ai-badge svg {\n  width: 16px;\n  height: 16px;\n  display: block;\n  /* Self-contained contrast so the white badge stays visible on bright\n     footage, including modes that hide the bottom gradient */\n  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));\n}\n\n/* Disclosure text shown when hovering the AI badge */\n.sf-player__ai-badge-label {\n  position: absolute;\n  bottom: calc(100% + var(--sf-spacing-xs));\n  right: 0;\n  padding: 4px 8px;\n  background: rgba(0, 0, 0, 0.8);\n  color: #ffffff;\n  font-size: 11px;\n  line-height: 1.2;\n  border-radius: var(--sf-border-radius-sm);\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--sf-transition-normal);\n  pointer-events: none;\n}\n\n/* Hover only on devices that support it - on touch, tapping applies a\n   sticky :hover that would keep the label stuck open */\n@media (hover: hover) {\n  .sf-player__ai-badge:hover .sf-player__ai-badge-label {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n.sf-player__ai-badge-label--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Hide logo and bottom bar when minimized; keep a small AI badge on the\n   bubble since the avatar is still visible. The whole bubble is clickable,\n   so the badge must not intercept pointer events (no hover label). */\n.sf-player--minimized .sf-player__logo,\n.sf-player--minimized .sf-player__bottom-bar {\n  display: none;\n}\n\n.sf-player--minimized .sf-player__ai-badge {\n  /* Offsets keep the badge fully inside the circular bubble (also at the\n     60px mobile size) */\n  right: 11px;\n  bottom: 11px;\n  height: 10px;\n  pointer-events: none;\n}\n\n.sf-player--minimized .sf-player__ai-badge svg {\n  width: 10px;\n  height: 10px;\n}";
 const componentsVideoCss = "/* \n * Video component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Video container */\n.sf-video-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--sf-border-radius-md);\n  overflow: hidden;\n  pointer-events: auto; /* Ensure clicks on video container are captured */\n  background-color: #000; /* Fallback background for audio-only mode */\n  /* Force clean border-radius clipping */\n  isolation: isolate;\n  transform: translateZ(0);\n  -webkit-mask-image: -webkit-radial-gradient(white, black);\n  /* Ensure video container and its children (including captions) sit above the gradient overlay */\n  z-index: 3;\n  /* Smooth transition for border-radius changes */\n  transition: border-radius var(--sf-transition-slow);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-lg) var(--sf-border-radius-lg);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-lg) var(--sf-border-radius-lg);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Dark gradient overlay at bottom of video - ensures captions are visible above it */\n.sf-video-container::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 33.33%; /* One third of container height */\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);\n  pointer-events: none;\n  z-index: var(--sf-z-index-overlay);\n  border-radius: 0 0 var(--sf-border-radius-md) var(--sf-border-radius-md);\n}\n\n/* Audio fallback poster image */\n.sf-video-container--audio-fallback {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-image: var(--sf-audio-poster-url, none);\n}\n\n/* Audio fallback overlay */\n.sf-audio-fallback-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: 2;\n  pointer-events: none;\n}\n\n/* Avatar mode overlay - no background, just container */\n.sf-audio-fallback-overlay--avatar {\n  background: none;\n}\n\n.sf-audio-fallback-overlay__icon {\n  width: 60px;\n  height: 60px;\n  margin-bottom: 16px;\n  color: white;\n  opacity: 0.9;\n}\n\n.sf-audio-fallback-overlay__text {\n  color: white;\n  font-size: 14px;\n  text-align: center;\n  padding: 0 20px;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);\n  opacity: 0.9;\n}\n\n.sf-audio-fallback-overlay__avatar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 1;\n}\n\n/* Semi-transparent overlay on top of avatar */\n.sf-audio-fallback-overlay__dim {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 2;\n}\n\n/* Soundbar-only mode overlay - dark background for soundbar visibility */\n.sf-audio-fallback-overlay--soundbar-only {\n  background: rgba(0, 0, 0, 0.85);\n}\n\n/* Audio visualization soundbar container */\n.sf-audio-soundbar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  height: 120px;\n  width: auto;\n  max-width: 300px;\n  z-index: 3;\n  position: relative;\n  padding: 0 20px;\n}\n\n/* Individual soundbar frequency bar */\n.sf-audio-soundbar__bar {\n  flex: 1;\n  min-width: 8px;\n  max-width: 20px;\n  height: var(--sf-bar-height, 10%);\n  background-color: var(--sf-bar-color, hsla(180, 70%, 60%, 0.3));\n  border-radius: 4px;\n  transition: height 0.05s ease-out, background-color 0.1s ease-out;\n  transform-origin: center;\n  will-change: height, background-color;\n}\n\n/* Video element */\n.sf-video-container__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background-color: white;\n  /* Ensure video is visible on mobile */\n  display: block;\n  /* Add explicit positioning to ensure video is visible */\n  position: relative;\n  z-index: 1;\n  /* Remove any border-radius - let container's overflow: hidden do the clipping */\n  border-radius: 0;\n  /* Force GPU acceleration for cleaner clipping with scale effect */\n  transform: scale(1.04) translateZ(0);\n  backface-visibility: hidden;\n  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Video blur effect (for end-of-video transitions) */\n.sf-video-container__video--blurred {\n  filter: blur(3px);\n  transform: scale(1.04) translateZ(0);\n  transition: filter 0.3s ease-out, transform 0.3s ease-out;\n}\n\n\n\n/* Mobile-specific video styles */\n@media (max-width: 768px) {\n\n  .sf-video-container__video {\n    /* Force video dimensions on mobile */\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n    /* Prevent video from being hidden */\n    opacity: 1 !important;\n    visibility: visible !important;\n    position: relative !important;\n  }\n  \n  /* Make controls more touch-friendly on mobile */\n  .sf-video-container__controls {\n    height: 5px; /* Thicker on mobile for easier touch */\n  }\n  \n  /* Adjust pseudo-element for mobile touch target */\n  .sf-video-container__controls::before {\n    height: 14px; /* Larger touch target on mobile */\n  }\n  \n  .sf-video-container__mute-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-mute-button-size) !important;\n    min-height: var(--sf-mute-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n  \n  .sf-video-container__cc-button {\n    /* Use CSS variable for consistent sizing */\n    min-width: var(--sf-cc-button-size) !important;\n    min-height: var(--sf-cc-button-size) !important;\n    opacity: 1; /* Always visible on mobile (no hover) */\n  }\n}\n\n/* Touch device specific styles */\n@media (pointer: coarse) {\n  .sf-video-container__controls:hover {\n    height: 5px; /* Keep consistent height on touch devices */\n  }\n  \n  /* Maintain consistent clickable area on touch devices */\n  .sf-video-container__controls::before,\n  .sf-video-container__controls:hover::before {\n    height: 14px; /* Consistent touch target */\n  }\n  \n  .sf-video-container__mute-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container__cc-button {\n    opacity: 1; /* Always show on touch devices */\n  }\n  \n  .sf-video-container:hover .sf-video-container__mute-button {\n    opacity: 1;\n  }\n}\n\n/* Video in minimized state */\n.sf-player--minimized .sf-video-container {\n  border-radius: var(--sf-border-radius-circle);\n  cursor: pointer;\n  z-index: var(--sf-z-index-base);\n  width: 100%;\n  height: 100%;\n  /* Ensure clean clipping in circular state */\n  isolation: isolate;\n  transform: translateZ(0);\n}\n\n/* Hide gradient overlay when minimized */\n.sf-player--minimized .sf-video-container::after {\n  display: none;\n}\n\n.sf-player--minimized .sf-video-container__video {\n  border-radius: 0; /* Let container handle clipping */\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  transform: scale(1.2) translateZ(0);\n}\n\n/* Hide progress bar in minimized state */\n.sf-player--minimized .sf-video-container__controls {\n  display: none !important;\n}\n\n/* Also hide mute button in minimized state */\n.sf-player--minimized .sf-video-container__mute-button {\n  display: none !important;\n}\n\n/* Also hide CC button in minimized state */\n.sf-player--minimized .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Progress bar container */\n.sf-video-container__controls {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  height: 4px;\n  background-color: rgba(255, 255, 255, 0.3);\n  z-index: var(--sf-z-index-controls);\n  /* Match the container's top border-radius for seamless integration */\n  border-radius: var(--sf-border-radius-md) var(--sf-border-radius-md) 0 0;\n  cursor: pointer;\n  /* Ensure pixel-perfect alignment and edge-to-edge coverage */\n  transform: translateZ(0);\n  backface-visibility: hidden;\n  /* Smooth transition for height change on hover */\n  transition: height 0.15s ease-in-out, background-color 0.15s ease-in-out;\n  /* Ensure it covers the full width */\n  margin: 0;\n  box-sizing: border-box;\n}\n\n/* Invisible pseudo-element to extend clickable area downward */\n.sf-video-container__controls::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 10px; /* Visual height (4px) + extended clickable area (6px) */\n  cursor: pointer;\n}\n\n/* Show slightly thicker progress bar on hover for better UX */\n.sf-video-container__controls:hover {\n  height: 6px;\n  background-color: rgba(255, 255, 255, 0.35);\n}\n\n/* Extend pseudo-element when progress bar grows on hover */\n.sf-video-container__controls:hover::before {\n  height: 12px; /* Visual height (6px) + extended clickable area (6px) */\n}\n\n/* Progress indicator */\n.sf-video-container__progress {\n  height: 100%;\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.85) 100%);\n  width: var(--sf-progress-width, 0%);\n  transition: var(--sf-progress-transition, width 0.1s linear);\n  /* Only apply top-left border-radius to maintain seamless look */\n  border-radius: var(--sf-border-radius-md) 0 0 0;\n  cursor: pointer;\n  transform-origin: left;\n  /* Ensure smooth rendering */\n  will-change: width;\n}\n\n/* Mute button */\n.sf-video-container__mute-button {\n  position: absolute;\n  top: calc(8px + var(--sf-minimize-button-size) + 6px);\n  right: 4px;\n  width: var(--sf-mute-button-size);\n  height: var(--sf-mute-button-size);\n  background: none !important;\n  border-radius: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* Mute button background circle */\n.sf-video-container__mute-button::before {\n  content: '';\n  position: absolute;\n  width: 80%;\n  height: 80%;\n  background-color: rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  z-index: -1;\n  transition: all var(--sf-transition-normal);\n}\n\n/* Mute button hover state */\n.sf-video-container__mute-button:hover {\n  transform: scale(1.1);\n}\n\n/* Show mute button on container hover */\n.sf-video-container:hover .sf-video-container__mute-button {\n  opacity: 1;\n}\n\n/* CC button */\n.sf-video-container__cc-button {\n  position: absolute;\n  top: calc(8px + var(--sf-minimize-button-size) + 6px + var(--sf-mute-button-size) + 6px);\n  right: 4px;\n  width: var(--sf-cc-button-size);\n  height: var(--sf-cc-button-size);\n  background: none !important;\n  border-radius: 0;\n  padding: 0; /* Remove default button padding */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: var(--sf-z-index-controls);\n  color: white;\n  border: none;\n  font-size: calc(var(--sf-font-size-md) + 2px);\n  transition: all var(--sf-transition-normal);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  opacity: 0;\n}\n\n/* CC button background circle */\n.sf-video-container__cc-button::before {\n  content: '';\n  position: absolute;\n  width: 80%;\n  height: 80%;\n  background-color: rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  z-index: -1;\n  transition: all var(--sf-transition-normal);\n}\n\n.sf-video-container__cc-button svg {\n  display: block;\n  margin: auto;\n  width: 60%;\n  height: 60%;\n}\n\n/* CC button hover state */\n.sf-video-container__cc-button:hover {\n  transform: scale(1.1);\n}\n\n/* Compact mode styling - circular border-radius for video container */\n.sf-player--compact .sf-video-container {\n  border-radius: var(--sf-border-radius-circle);\n}\n\n/* Hide gradient overlay in compact mode (already handled in _player.css but kept for clarity) */\n.sf-player--compact .sf-video-container::after {\n  display: none;\n}\n\n/* Hide mute and cc buttons in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-video-container__mute-button,\n.sf-player--autoplayBlocked .sf-video-container__cc-button,\n.sf-player--idleMode .sf-video-container__mute-button,\n.sf-player--idleMode .sf-video-container__cc-button {\n  display: none !important;\n}\n\n/* Show mute and cc buttons on hover in playing/paused states */\n.sf-player--playing .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--playing .sf-video-container:hover .sf-video-container__cc-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__mute-button,\n.sf-player--paused .sf-video-container:hover .sf-video-container__cc-button {\n  opacity: 1;\n} ";
 const componentsControlsCss = "/* \n * Controls component styles for the Saltfish playlist Player\n * Following BEM naming convention\n */\n\n/* Main controls container */\n.sf-controls-container {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: transparent;\n  z-index: var(--sf-z-index-controls);\n  pointer-events: auto;\n}\n\n/* Play button */\n.sf-controls-container__play-button {\n  background-color: rgba(0, 0, 0, 0.6);\n  border: none;\n  color: var(--sf-text-color);\n  font-size: var(--sf-control-button-size);\n  cursor: pointer;\n  width: var(--sf-play-button-size);\n  height: var(--sf-play-button-size);\n  border-radius: var(--sf-border-radius-circle);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform var(--sf-transition-normal), background-color var(--sf-transition-normal);\n  padding-left: 4px; /* Optical centering for play icon */\n}\n\n/* Button hover state */\n.sf-controls-container__play-button:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n  transform: scale(1.1);\n}\n\n/* Button container for interactive buttons */\n.sf-controls-container__buttons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--sf-spacing-md);\n}\n\n/* Interactive button */\n.sf-controls-container__interactive-button {\n  background-color: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  border: none;\n  border-radius: var(--sf-border-radius-md);\n  padding: var(--sf-spacing-xs) var(--sf-spacing-md);\n  font-size: var(--sf-font-size-sm);\n  cursor: pointer;\n  transition: background-color var(--sf-transition-normal), transform var(--sf-transition-fast);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.sf-controls-container__interactive-button:hover {\n  background-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-2px);\n}\n\n/* \n * Choice buttons container and buttons - positioned inside player\n */\n\n/* Choice buttons container - positioned inside the player at the bottom */\n.sf-choice-buttons-container {\n  position: absolute;\n  bottom: var(--sf-spacing-xl);\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(100% - var(--sf-spacing-lg));\n  max-width: calc(100% - var(--sf-spacing-lg));\n  z-index: calc(var(--sf-z-index-controls) + 1);\n  gap: var(--sf-spacing-sm);\n  pointer-events: auto;\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  /* Ensure container is fully transparent */\n  background: transparent;\n  border: none;\n  outline: none;\n}\n\n/* Choice buttons container with scrolling for 5+ buttons */\n.sf-choice-buttons-container--scrollable {\n  max-height: 176px; /* Show ~4 buttons with gaps (4 * 36px button + 4 * 8px gap) */\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: thin; /* Show thin scrollbar in Firefox */\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* More transparent Firefox scrollbar */\n  scroll-behavior: smooth;\n  /* Important: Use block display for scrollable container */\n  display: block !important;\n}\n\n/* Style webkit scrollbar to be visible but subtle */\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar {\n  width: 4px;\n}\n\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2); /* More transparent */\n  border-radius: 2px;\n}\n\n.sf-choice-buttons-container--scrollable::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.4); /* Still subtle on hover */\n}\n\n/* Removed fade gradient to keep container fully transparent */\n\n/* Choice button styles - solid rounded buttons matching the image */\n.sf-choice-button {\n  width: 100%;\n  max-width: none;\n  background: rgba(0, 0, 0, 4);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  border: none;\n  border-radius: 24px; /* More rounded for pill shape */\n  padding: var(--sf-spacing-md) var(--sf-spacing-md);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: center;\n  outline: none;\n  font-family: inherit;\n  margin-bottom: 0;\n  position: relative;\n  overflow: hidden;\n  opacity: 0; /* Start hidden for animation */\n  pointer-events: none;\n  /* Animation will be triggered by JavaScript when video reaches 90% */\n}\n\n/* Add margin between buttons in scrollable container */\n.sf-choice-buttons-container--scrollable .sf-choice-button {\n  margin-bottom: var(--sf-spacing-sm);\n}\n\n/* Remove margin from last button */\n.sf-choice-buttons-container--scrollable .sf-choice-button:last-child {\n  margin-bottom: 0;\n}\n\n/* Hover state for buttons */\n.sf-choice-button:hover {\n  background: rgba(0, 0, 0, 0.9);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);\n}\n\n/* Active state for all buttons */\n.sf-choice-button:active {\n  transform: translateY(0) scale(0.98);\n  transition: all 0.1s ease;\n}\n\n/* Remove specific action type styling - use consistent dark buttons */\n.sf-choice-button--goto,\n.sf-choice-button--url,\n.sf-choice-button--next,\n.sf-choice-button--dom,\n.sf-choice-button--function {\n  background: rgba(0, 0, 0, 0.4);\n  border: none;\n}\n\n.sf-choice-button--goto:hover,\n.sf-choice-button--url:hover,\n.sf-choice-button--next:hover,\n.sf-choice-button--dom:hover,\n.sf-choice-button--function:hover {\n  background: rgba(0, 0, 0, 0.9);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* Hide choice buttons in minimized state */\n.sf-player--minimized .sf-choice-buttons-container {\n  display: none !important;\n}\n\n/* Hide choice buttons in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-choice-buttons-container,\n.sf-player--idleMode .sf-choice-buttons-container {\n  display: none !important;\n}\n\n/* Smaller mobile screens - maintain same layout but with tighter spacing */\n@media (max-width: 480px) {\n  .sf-choice-buttons-container {\n    bottom: var(--sf-spacing-sm);\n    width: calc(100% - var(--sf-spacing-md));\n    max-width: calc(100% - var(--sf-spacing-md));\n    gap: calc(var(--sf-spacing-xs) + 2px);\n  }\n  \n  .sf-choice-button {\n    padding: var(--sf-spacing-sm) var(--sf-spacing-sm);\n    font-size: 11px;\n    border-radius: 20px;\n  }\n}\n\n/* Touch device specific adjustments */\n@media (pointer: coarse) {\n  .sf-choice-buttons-container {\n    gap: var(--sf-spacing-sm);\n  }\n  \n  .sf-choice-button {\n    min-height: 44px; /* Apple's recommended minimum touch target size */\n    padding: var(--sf-spacing-md) var(--sf-spacing-md);\n  }\n}\n\n/* Button fade-in animation */\n@keyframes buttonFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Animation class that will be added by JavaScript at 90% video progress */\n.sf-choice-button.sf-show-button {\n  animation: buttonFadeIn 0.3s ease-out forwards;\n  pointer-events: auto;\n}\n\n/* Staggered animation delays for multiple buttons when shown */\n.sf-choice-button.sf-show-button:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(2) {\n  animation-delay: 0.15s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(3) {\n  animation-delay: 0.3s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(4) {\n  animation-delay: 0.45s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(5) {\n  animation-delay: 0.6s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(6) {\n  animation-delay: 0.75s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(7) {\n  animation-delay: 0.9s;\n}\n\n.sf-choice-button.sf-show-button:nth-child(8) {\n  animation-delay: 1.05s;\n}\n\n/* Scroll indicator arrow */\n.sf-scroll-indicator {\n  position: absolute;\n  bottom: calc(var(--sf-spacing-xl) - 25px);\n  left: 50%;\n  transform: translateX(-50%);\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 20px;\n  pointer-events: none;\n  z-index: calc(var(--sf-z-index-controls) + 2);\n  transition: opacity 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  opacity: 0; /* Start hidden */\n}\n\n/* Show scroll indicator with animation - appears after buttons */\n.sf-scroll-indicator.sf-show-scroll-indicator {\n  animation: scrollIndicatorFadeIn 0.4s ease-out 1.2s forwards, bounceArrow 1.5s ease-in-out 1.6s infinite;\n}\n\n/* Hide arrow when scrolled to bottom */\n.sf-scroll-indicator--hidden {\n  opacity: 0;\n}\n\n/* Fade in animation for scroll indicator */\n@keyframes scrollIndicatorFadeIn {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n/* Bounce animation for the arrow */\n@keyframes bounceArrow {\n  0%, 100% {\n    transform: translateX(-50%) translateY(0);\n  }\n  50% {\n    transform: translateX(-50%) translateY(5px);\n  }\n}\n\n/* Hide scroll indicator in minimized state */\n.sf-player--minimized .sf-scroll-indicator {\n  display: none !important;\n}\n\n/* Hide scroll indicator in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-scroll-indicator,\n.sf-player--idleMode .sf-scroll-indicator {\n  display: none !important;\n} ";
 const componentsTranscriptCss = "/* \n * Transcript component styles for the Saltfish Playlist Player\n * Following BEM naming convention\n */\n\n/* Transcript container */\n.sf-transcript {\n  position: absolute;\n  bottom: 40px; /* Above the progress bar */\n  left: 0;\n  right: 0;\n  max-height: 200px;\n  background: transparent;\n  margin: 0 var(--sf-spacing-md);\n  overflow: hidden;\n  z-index: var(--sf-z-index-controls);\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.3s ease-out;\n  pointer-events: none;\n}\n\n/* Visible state */\n.sf-transcript--visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n/* Transcript content */\n.sf-transcript__content {\n  max-height: 180px;\n  overflow: visible;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  text-align: center;\n}\n\n/* Webkit scrollbar styling */\n.sf-transcript__content::-webkit-scrollbar {\n  width: 4px;\n}\n\n.sf-transcript__content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sf-transcript__content::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n}\n\n.sf-transcript__content::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.5);\n}\n\n/* Word-by-word display container - progressive reveal style */\n.sf-transcript__word-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.04em; /* Much tighter gap to compensate for inverse scaling effect */\n  min-height: 60px;\n  padding: 0 var(--sf-spacing-md);\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  text-align: center;\n  transition: opacity 0.15s ease-in-out; /* Smooth fade during window transitions */\n}\n\n/* Hidden state for fade transitions */\n.sf-transcript__word-container--hidden {\n  opacity: 0;\n}\n\n/* Individual word styling - base state (hidden by default) */\n.sf-transcript__word {\n  color: rgba(255, 255, 255, 0.65);\n  font-size: 20px; /* Increased from 18px to compensate for 0.893 scale (20 * 0.893 ≈ 18px) */\n  font-weight: 500; /* Set to 500 from start to prevent pixel shift on activation */\n  line-height: 1.3;\n  white-space: nowrap;\n  text-align: center;\n  opacity: 0;\n  transform: scale(0.893) translateY(0); /* Scaled down - active word will be normal size (1/1.12 ≈ 0.893) */\n  transition: opacity 0.2s ease, color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;\n  padding-left: 0.12em; /* Consistent padding */\n  padding-right: 0.12em;\n}\n\n/* Visible state - word has appeared */\n.sf-transcript__word--visible {\n  opacity: 0.8;\n  transform: scale(0.893) translateY(0); /* Keep scaled down */\n}\n\n/* Active word (currently speaking) - highlighted at normal size (inverse scale approach) */\n.sf-transcript__word--active {\n  color: rgba(255, 255, 255, 1) !important;\n  opacity: 1 !important;\n  transform: scale(1) translateY(0); /* Normal size - appears 12% larger relative to scaled-down neighbors */\n  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);\n  /* font-weight removed - already 500 from base to prevent pixel shift */\n}\n\n/* Legacy segment styling (kept for compatibility) */\n.sf-transcript__segment {\n  color: rgba(255, 255, 255);\n  font-size: var(--sf-font-size-sm);\n  line-height: 1.4;\n  padding: var(--sf-spacing-xs) 0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding-left: var(--sf-spacing-xs);\n  padding-right: var(--sf-spacing-xs);\n}\n\n/* CC button styling removed - now handled via icon toggling */\n\n/* Mobile responsive styles */\n@media (max-width: 768px) {\n  .sf-transcript {\n    bottom: 35px; /* Positioned lower on mobile for better visibility */\n    margin: 0 var(--sf-spacing-sm);\n    max-height: 150px; /* Smaller on mobile */\n  }\n\n  .sf-transcript__content {\n    max-height: 130px;\n    padding: var(--sf-spacing-sm);\n  }\n\n  .sf-transcript__word-container {\n    min-height: 50px;\n    padding: 0 var(--sf-spacing-sm);\n    gap: 0.2em; /* Tighter gap for mobile */\n  }\n  \n  .sf-transcript__word {\n    font-size: var(--sf-font-size-md);\n    /* font-weight already 500 from base styles */\n  }\n  \n  .sf-transcript__segment {\n    font-size: var(--sf-font-size-xs);\n    padding: var(--sf-spacing-xs) var(--sf-spacing-sm);\n  }\n}\n\n/* Touch device optimizations */\n@media (pointer: coarse) {\n  .sf-transcript__segment {\n    padding: var(--sf-spacing-sm) var(--sf-spacing-xs);\n    min-height: 44px; /* Larger touch target */\n    display: flex;\n    align-items: center;\n  }\n}\n\n/* Hide transcript in minimized state */\n.sf-player--minimized .sf-transcript {\n  display: none !important;\n}\n\n/* Hide transcript in autoplayBlocked and idleMode states */\n.sf-player--autoplayBlocked .sf-transcript,\n.sf-player--idleMode .sf-transcript {\n  display: none !important;\n}\n\n/* Animation for transcript appearance */\n@keyframes transcriptFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes transcriptFadeOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n}";
@@ -10440,8 +10444,11 @@ class TriggerManager {
   }
   /**
    * Evaluates the playlistSeen condition
-   * User must have completed ALL specified playlists
-   * @param requiredPlaylists - Array of playlist IDs that user must have completed
+   * User must have seen ALL specified playlists. A playlist counts as seen once
+   * the user has started it (any watched status: in_progress, completed, dismissed) —
+   * except while it is the playlist currently on screen, so a dependent playlist
+   * never tears down the session that is satisfying its condition.
+   * @param requiredPlaylists - Array of playlist IDs that user must have seen
    * @param watchedPlaylists - User's watched playlists data
    */
   evaluatePlaylistSeenCondition(requiredPlaylists, watchedPlaylists) {
@@ -10453,12 +10460,30 @@ class TriggerManager {
     }
     for (const playlistId of requiredPlaylists) {
       const playlistData = watchedPlaylists[playlistId];
-      if (!playlistData || playlistData.status !== "completed") {
+      if (!playlistData) {
+        return false;
+      }
+      if (this.isPlaylistCurrentlyActive(playlistId)) {
         return false;
       }
     }
     return true;
   }
+  /**
+   * Checks whether a playlist is the one currently being shown to the user.
+   * After a playlist ends, is dismissed, or is closed by navigation, the store's
+   * manifest is cleared (or the state machine reaches a terminal state), so this
+   * returns false and the playlist can satisfy playlistSeen conditions again.
+   */
+  isPlaylistCurrentlyActive(playlistId) {
+    var _a;
+    const store = getSaltfishStore();
+    if (((_a = store.manifest) == null ? void 0 : _a.id) !== playlistId) {
+      return false;
+    }
+    const terminalStates = ["idle", "completed", "closing", "error"];
+    return !terminalStates.includes(store.currentState);
+  }
   /**
    * Evaluates the playlistNotSeen condition
    * User must NOT have seen ANY of the specified playlists
@@ -11882,6 +11907,7 @@ class UIManager {
     const controlsContainer = this.createControlsContainer(this.playerElement);
     this.playPauseButton = new PlayPauseButton(controlsContainer, videoManager);
     this.createSaltfishLogo(this.playerElement);
+    this.createAiBadge(this.playerElement);
     this.setupVideoContainerClickHandler();
     cursorManager.create();
     interactionManager.create(this.playerElement);
@@ -12108,13 +12134,17 @@ class UIManager {
     if (((_a = store.config) == null ? void 0 : _a.showLogo) === false) {
       return;
     }
+    const bottomBar = document.createElement("div");
+    bottomBar.className = CSS_CLASSES.BOTTOM_BAR;
+    parentElement.appendChild(bottomBar);
     const logoContainer = document.createElement("div");
     logoContainer.className = CSS_CLASSES.LOGO;
     logoContainer.innerHTML = `
-      <svg viewBox="0 0 41 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8.42034 7.49991C8.42034 9.67502 6.65707 11.4383 4.48196 11.4383C2.30685 11.4383 4.00664 9.67502 4.00664 7.49991C4.00664 5.3248 2.30685 3.56152 4.48196 3.56152C6.65707 3.56152 8.42034 5.3248 8.42034 7.49991Z" fill="white"/>
-        <path d="M3.53097 7.43198C3.53097 8.96956 2.29707 10.216 0.774969 10.216C-0.747128 10.216 0.442349 8.96956 0.442349 7.43198C0.442349 5.8944 -0.747128 4.64795 0.774969 4.64795C2.29707 4.64795 3.53097 5.8944 3.53097 7.43198Z" fill="white"/>
-        <path d="M15.0603 10.628C13.8603 10.628 12.9803 9.892 12.9803 8.372L13.6043 8.292C13.6043 9.492 14.1803 10.044 15.0603 10.044C15.8603 10.044 16.3243 9.612 16.3243 8.972C16.3243 8.252 15.8363 7.988 15.0603 7.788C13.7003 7.436 13.2523 6.996 13.2523 6.196C13.2523 5.396 13.9403 4.772 14.9803 4.772C16.0203 4.772 16.6923 5.396 16.6923 6.436L16.0683 6.516C16.0683 5.796 15.6203 5.356 14.9803 5.356C14.3403 5.356 13.8763 5.636 13.8763 6.196C13.8763 6.756 14.2843 7.004 15.0603 7.204C16.3723 7.548 16.9483 8.012 16.9483 8.972C16.9483 9.932 16.2603 10.628 15.0603 10.628ZM19.182 10.628C18.542 10.628 17.83 10.228 17.83 9.428C17.83 8.548 18.462 8.212 19.494 8.076C19.966 8.012 20.638 7.956 20.414 7.38C20.27 7.004 19.734 6.956 19.494 6.956C18.854 6.956 18.534 7.236 18.534 7.716L17.91 7.636C17.91 6.756 18.774 6.372 19.494 6.372C20.214 6.372 21.022 6.692 21.022 7.652V10.5H20.438V9.7C20.262 10.22 19.798 10.628 19.182 10.628ZM18.454 9.46C18.454 9.78 18.782 10.044 19.182 10.044C19.822 10.044 20.438 9.596 20.438 8.476V8.26C20.286 8.476 19.91 8.596 19.374 8.66C18.742 8.748 18.454 9.06 18.454 9.46ZM22.3044 10.5V4.82H22.9284V10.5H22.3044ZM25.6789 10.5C24.9909 10.5 24.6469 10.204 24.6469 9.508V7.084H23.9669V6.5H24.6469V5.292L25.1909 5.212V6.5H26.2309V7.084H25.1909V9.34C25.1909 9.836 25.3829 9.916 25.7749 9.916H26.2309V10.5H25.6789ZM27.7094 6.052C27.7094 5.116 28.0934 4.82 28.7814 4.82H29.3334V5.404H28.8774C28.4454 5.404 28.2934 5.484 28.2934 6.22V6.5H29.3334V7.084H28.2934V10.5H27.7094V7.084H27.0294V6.5H27.7094V6.052ZM30.2805 10.5V6.5H30.9045V10.5H30.2805ZM30.2165 5.86V5.108H30.9685V5.86H30.2165ZM33.7678 10.628C32.8078 10.628 32.0078 10.06 32.0078 9.02L32.5918 8.94C32.5918 9.66 33.2078 10.044 33.7678 10.044C34.3278 10.044 34.7678 9.86 34.7678 9.38C34.7678 8.9 34.4558 8.772 33.9998 8.708L33.2958 8.612C32.6638 8.524 32.2318 8.092 32.2318 7.532C32.2318 6.812 32.8478 6.372 33.7278 6.372C34.6078 6.372 35.1678 6.892 35.1678 7.612L34.5838 7.692C34.5838 7.212 34.2878 6.956 33.7278 6.956C33.2478 6.956 32.8558 7.132 32.8558 7.532C32.8558 7.852 33.0718 7.996 33.5438 8.068L34.1518 8.156C34.8558 8.26 35.3918 8.66 35.3918 9.38C35.3918 10.1 34.7278 10.628 33.7678 10.628ZM38.9252 7.868C38.9252 7.148 38.5812 6.956 38.1012 6.956C37.6212 6.956 36.9812 7.276 36.9812 8.636V10.5H36.3572V4.9H36.9812V7.364C37.1092 6.812 37.5652 6.372 38.3012 6.372C39.1812 6.372 39.5492 6.988 39.5492 7.868V10.5H38.9252V7.868Z" fill="white"/>
+      <svg viewBox="0 0 59 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20.5011 11.1967C19.8292 11.1967 19.2433 11.0697 18.7434 10.8156C18.2435 10.5616 17.8461 10.2133 17.5511 9.77082C17.2643 9.32012 17.0963 8.79977 17.0471 8.20976L18.1534 8.13601C18.2108 8.57032 18.3378 8.93907 18.5345 9.24227C18.7311 9.54547 18.9933 9.77492 19.3211 9.93061C19.6571 10.0863 20.0586 10.1642 20.5257 10.1642C20.9355 10.1642 21.2837 10.1109 21.5705 10.0044C21.8573 9.89783 22.0745 9.74214 22.222 9.53727C22.3777 9.33241 22.4555 9.08248 22.4555 8.78747C22.4555 8.51705 22.39 8.27941 22.2589 8.07455C22.136 7.86149 21.8942 7.66892 21.5337 7.49683C21.1813 7.31655 20.6568 7.14037 19.9603 6.96829C19.2884 6.7962 18.7516 6.60773 18.3501 6.40286C17.9567 6.198 17.6699 5.94807 17.4896 5.65306C17.3176 5.35806 17.2315 4.9934 17.2315 4.55909C17.2315 4.06742 17.3462 3.63721 17.5757 3.26845C17.8133 2.8915 18.1493 2.6006 18.5836 2.39573C19.0179 2.18267 19.5342 2.07615 20.1324 2.07615C20.7716 2.07615 21.3206 2.19906 21.7795 2.4449C22.2384 2.68254 22.603 3.01032 22.8735 3.42824C23.1439 3.84617 23.3119 4.32145 23.3774 4.85409L22.2712 4.92785C22.222 4.57548 22.1073 4.26409 21.927 3.99367C21.7549 3.71505 21.5173 3.4979 21.2141 3.3422C20.9109 3.18651 20.5421 3.10866 20.1078 3.10866C19.567 3.10866 19.1368 3.23977 18.8172 3.502C18.4976 3.75603 18.3378 4.092 18.3378 4.50992C18.3378 4.78034 18.3992 5.00569 18.5222 5.18597C18.6533 5.35806 18.8827 5.51376 19.2105 5.65306C19.5383 5.78417 20.0095 5.92758 20.6241 6.08328C21.3534 6.26356 21.9311 6.48071 22.3572 6.73474C22.7915 6.98058 23.0988 7.26739 23.2791 7.59517C23.4676 7.92295 23.5618 8.2958 23.5618 8.71372C23.5618 9.22178 23.4307 9.66429 23.1685 10.0412C22.9062 10.41 22.5457 10.6968 22.0868 10.9017C21.6279 11.0983 21.0993 11.1967 20.5011 11.1967ZM26.7873 11.1475C26.1154 11.1475 25.5787 10.9918 25.1771 10.6804C24.7838 10.369 24.5871 9.93471 24.5871 9.37748C24.5871 8.82025 24.751 8.38184 25.0788 8.06226C25.4066 7.74267 25.9269 7.51732 26.6398 7.38621L28.9507 6.95599C28.9507 6.40696 28.8196 5.99723 28.5574 5.72681C28.3033 5.45639 27.9182 5.32118 27.4019 5.32118C26.9512 5.32118 26.5948 5.42362 26.3325 5.62848C26.0703 5.82515 25.89 6.11196 25.7917 6.48891L24.6977 6.40286C24.8207 5.78827 25.1157 5.2925 25.5827 4.91555C26.058 4.53041 26.6644 4.33784 27.4019 4.33784C28.2378 4.33784 28.877 4.57548 29.3195 5.05076C29.762 5.51785 29.9832 6.16522 29.9832 6.99287V9.68478C29.9832 9.83228 30.0078 9.93881 30.057 10.0044C30.1143 10.0617 30.2045 10.0904 30.3274 10.0904H30.5855V11C30.5527 11.0082 30.4995 11.0123 30.4257 11.0123C30.352 11.0205 30.2741 11.0246 30.1922 11.0246C29.8972 11.0246 29.6554 10.9795 29.467 10.8894C29.2867 10.791 29.1556 10.6435 29.0736 10.4469C28.9917 10.242 28.9507 9.97568 28.9507 9.6479L29.0736 9.67248C29.0163 9.9511 28.877 10.2051 28.6557 10.4346C28.4344 10.6558 28.1599 10.832 27.8322 10.9631C27.5044 11.086 27.1561 11.1475 26.7873 11.1475ZM26.8857 10.2379C27.32 10.2379 27.6887 10.156 27.9919 9.99207C28.3033 9.81999 28.541 9.59054 28.7049 9.30373C28.8688 9.00873 28.9507 8.68095 28.9507 8.32039V7.8533L26.8365 8.24663C26.394 8.32858 26.0867 8.4556 25.9146 8.62768C25.7507 8.79157 25.6688 9.00873 25.6688 9.27915C25.6688 9.58234 25.7753 9.81999 25.9884 9.99207C26.2096 10.156 26.5087 10.2379 26.8857 10.2379ZM32.6507 11C32.2738 11 31.9665 10.9017 31.7288 10.705C31.4912 10.5083 31.3724 10.1969 31.3724 9.77082V2.27281H32.4049V9.68478C32.4049 9.81589 32.4377 9.91832 32.5032 9.99207C32.577 10.0576 32.6794 10.0904 32.8105 10.0904H33.3759V11H32.6507ZM36.3546 11C35.7646 11 35.3262 10.8648 35.0394 10.5944C34.7608 10.324 34.6215 9.90193 34.6215 9.32831V2.96116H35.654V9.30373C35.654 9.59873 35.7195 9.8036 35.8506 9.91832C35.9817 10.033 36.1825 10.0904 36.4529 10.0904H37.3871V11H36.3546ZM33.6627 5.39493V4.48534H37.3871V5.39493H33.6627ZM38.6952 11V3.89533C38.6952 3.41186 38.8345 3.02261 39.1132 2.72761C39.3918 2.42441 39.8261 2.27281 40.4161 2.27281H41.4486V3.18241H40.4898C40.2358 3.18241 40.0432 3.25206 39.9121 3.39137C39.7892 3.53068 39.7277 3.72325 39.7277 3.96908V11H38.6952ZM37.8102 5.39493V4.48534H41.3626V5.39493H37.8102ZM42.7147 11V4.48534H43.7472V11H42.7147ZM42.6901 3.46512V2.26052H43.7717V3.46512H42.6901ZM47.6594 11.1475C47.0776 11.1475 46.5818 11.0533 46.1721 10.8648C45.7706 10.6763 45.4551 10.4182 45.2256 10.0904C45.0044 9.75443 44.8774 9.37338 44.8446 8.94727L45.9263 8.87352C45.9918 9.26685 46.1598 9.58234 46.4302 9.81999C46.7007 10.0494 47.1104 10.1642 47.6594 10.1642C48.1019 10.1642 48.4543 10.0945 48.7165 9.9552C48.9869 9.80769 49.1221 9.57415 49.1221 9.25456C49.1221 9.08248 49.0812 8.93907 48.9992 8.82435C48.9173 8.70963 48.7575 8.61129 48.5198 8.52935C48.2822 8.43921 47.9298 8.35316 47.4627 8.27122C46.84 8.15649 46.3483 8.01719 45.9877 7.8533C45.6354 7.68121 45.3813 7.47225 45.2256 7.22641C45.0781 6.97238 45.0044 6.67328 45.0044 6.32911C45.0044 5.7473 45.2174 5.27202 45.6436 4.90326C46.0697 4.52631 46.6761 4.33784 47.4627 4.33784C47.9954 4.33784 48.442 4.43617 48.8026 4.63284C49.1713 4.82132 49.4581 5.07535 49.663 5.39493C49.876 5.70633 50.0153 6.0505 50.0809 6.42745L48.9992 6.5012C48.9501 6.27175 48.8599 6.07098 48.7288 5.8989C48.5977 5.71862 48.4256 5.57931 48.2125 5.48098C47.9995 5.37445 47.7455 5.32118 47.4505 5.32118C46.9834 5.32118 46.6392 5.41132 46.4179 5.5916C46.1967 5.77188 46.0861 6.00133 46.0861 6.27994C46.0861 6.493 46.1352 6.66919 46.2336 6.80849C46.3401 6.93961 46.5081 7.05023 46.7375 7.14037C46.967 7.22232 47.2743 7.29607 47.6594 7.36162C48.3232 7.47635 48.8394 7.61565 49.2082 7.77955C49.5769 7.94344 49.8351 8.1442 49.9826 8.38184C50.1301 8.61949 50.2038 8.91039 50.2038 9.25456C50.2038 9.6561 50.0891 10.0003 49.8596 10.2871C49.6384 10.5657 49.3352 10.7787 48.9501 10.9262C48.5731 11.0738 48.1429 11.1475 47.6594 11.1475ZM51.3058 11V2.27281H52.3383V5.92348L52.2154 5.8989C52.2973 5.53834 52.4366 5.24334 52.6333 5.01389C52.8299 4.78444 53.0717 4.61645 53.3585 4.50992C53.6453 4.3952 53.9608 4.33784 54.305 4.33784C54.7721 4.33784 55.1654 4.44437 55.485 4.65743C55.8128 4.86229 56.0586 5.1532 56.2225 5.53014C56.3946 5.8989 56.4806 6.32501 56.4806 6.80849V11H55.4481V7.1035C55.4481 6.47252 55.3334 6.00543 55.1039 5.70223C54.8827 5.39903 54.5426 5.24743 54.0837 5.24743C53.5593 5.24743 53.1372 5.40723 52.8177 5.72681C52.4981 6.0464 52.3383 6.50939 52.3383 7.11579V11H51.3058Z" fill="white"/>
+        <rect width="13.1858" height="13.1858" rx="0.670462" fill="white"/>
+        <path d="M10.2634 6.59634C10.2634 8.62107 8.62202 10.2624 6.59729 10.2624C4.57256 10.2624 6.15483 8.62107 6.15483 6.59634C6.15483 4.57161 4.57256 2.93024 6.59729 2.93024C8.62202 2.93024 10.2634 4.57161 10.2634 6.59634Z" fill="black"/>
+        <path d="M5.78564 6.55629C5.78564 7.83069 4.76169 8.86379 3.49858 8.86379C2.23547 8.86379 3.22255 7.83069 3.22255 6.55629C3.22255 5.28189 2.23547 4.24878 3.49858 4.24878C4.76169 4.24878 5.78564 5.28189 5.78564 6.55629Z" fill="black"/>
       </svg>
     `;
     parentElement.appendChild(logoContainer);
@@ -12134,6 +12164,44 @@ class UIManager {
       }
     });
   }
+  /**
+   * Creates and adds the AI transparency badge to the player.
+   * Always rendered, regardless of the showLogo entitlement — the EU AI Act
+   * requires AI-generated content to be visibly disclosed.
+   * @param parentElement - The parent element to append the badge to
+   */
+  createAiBadge(parentElement) {
+    const disclosureText = "Contains AI-generated content";
+    parentElement.setAttribute("data-ai-generated", "true");
+    const badgeContainer = document.createElement("div");
+    badgeContainer.className = CSS_CLASSES.AI_BADGE;
+    badgeContainer.setAttribute("role", "img");
+    badgeContainer.setAttribute("aria-label", disclosureText);
+    badgeContainer.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <circle cx="12" cy="12" r="11" fill="#ffffff" stroke="rgba(0, 0, 0, 0.4)" stroke-width="1"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.4 8 L11.5 8 L14 16 L11.7 16 L11.28 14.55 L9.62 14.55 L9.2 16 L6.9 16 Z M10.45 10.2 L11.15 12.85 L9.75 12.85 Z" fill="#1d1d1b"/>
+        <path d="M14.8 8h2.3v8h-2.3z" fill="#1d1d1b"/>
+      </svg>
+    `;
+    const badgeLabel = document.createElement("span");
+    badgeLabel.className = CSS_CLASSES.AI_BADGE_LABEL;
+    badgeLabel.textContent = disclosureText;
+    badgeLabel.setAttribute("aria-hidden", "true");
+    badgeContainer.appendChild(badgeLabel);
+    let hideLabelTimeout;
+    badgeContainer.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const visible = badgeLabel.classList.toggle(CSS_CLASSES.AI_BADGE_LABEL_VISIBLE);
+      window.clearTimeout(hideLabelTimeout);
+      if (visible) {
+        hideLabelTimeout = window.setTimeout(() => {
+          badgeLabel.classList.remove(CSS_CLASSES.AI_BADGE_LABEL_VISIBLE);
+        }, 3e3);
+      }
+    });
+    parentElement.appendChild(badgeContainer);
+  }
   // === BUTTON MANAGEMENT METHODS (from ButtonManager) ===
   /**
    * Initializes button management functionality
@@ -12755,7 +12823,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.91";
+const version = "0.3.93";
 const packageJson = {
   version
 };