/** * Controls CSS injected into the shadow DOM. * Vimeo-inspired design: thin progress bar, subtle gradient, * frosted glass big play, smooth transitions. * * CSS custom properties for theming: * --vz-primary Accent color (default: #f43f5e) * --vz-controls-bg Control bar gradient end (default: rgba(0,0,0,0.6)) * --vz-progress-height Progress bar resting height (default: 3px) * --vz-progress-color Progress fill color (default: --vz-primary) * --vz-controls-transition Fade duration (default: 0.3s) * --vz-button-size Button hit-area size (default: 36px) */ export declare const CONTROLS_CSS = "\n /* ------------------------------------------------------------------ */\n /* Layout \u2014 wrapper + seek above button row */\n /* ------------------------------------------------------------------ */\n\n .vz-controls-wrapper {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 10;\n user-select: none;\n -webkit-user-select: none;\n transition: opacity var(--vz-controls-transition, 0.3s) ease,\n transform 0.2s ease;\n }\n\n .vz-controls-wrapper.hidden {\n opacity: 0;\n pointer-events: none;\n transform: translateY(4px);\n }\n\n /* Progress bar sits above the button row */\n .vz-seek-row {\n position: relative;\n width: 100%;\n padding: 0 12px;\n cursor: pointer;\n z-index: 11;\n }\n\n /* Button row */\n .vz-controls {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px 6px;\n background: linear-gradient(transparent, var(--vz-controls-bg, rgba(0, 0, 0, 0.6)));\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n color: #fff;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-size: 13px;\n }\n\n .vz-controls-left {\n display: flex;\n align-items: center;\n gap: 2px;\n flex-shrink: 0;\n }\n\n .vz-controls-center {\n flex: 1;\n min-width: 0;\n }\n\n .vz-controls-right {\n display: flex;\n align-items: center;\n gap: 2px;\n flex-shrink: 0;\n }\n\n /* ------------------------------------------------------------------ */\n /* Buttons */\n /* ------------------------------------------------------------------ */\n\n .vz-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--vz-button-size, 36px);\n height: var(--vz-button-size, 36px);\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: #fff;\n cursor: pointer;\n flex-shrink: 0;\n transition: opacity 0.15s, transform 0.15s;\n opacity: 0.9;\n }\n\n .vz-btn:hover {\n opacity: 1;\n transform: scale(1.1);\n }\n\n .vz-btn:active {\n transform: scale(0.95);\n }\n\n .vz-btn:focus-visible {\n outline: 2px solid var(--vz-primary, #f43f5e);\n outline-offset: 2px;\n }\n\n .vz-btn svg {\n width: 20px;\n height: 20px;\n fill: currentColor;\n }\n\n /* ------------------------------------------------------------------ */\n /* Seek / Progress bar */\n /* ------------------------------------------------------------------ */\n\n .vz-seek-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n height: 18px;\n cursor: pointer;\n }\n\n .vz-seek-track {\n position: relative;\n width: 100%;\n height: var(--vz-progress-height, 3px);\n background: rgba(255, 255, 255, 0.2);\n border-radius: 99px;\n overflow: visible;\n transition: height 0.15s ease;\n }\n\n .vz-seek-container:hover .vz-seek-track {\n height: 5px;\n }\n\n .vz-seek-chapters {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 3;\n }\n\n .vz-seek-chapter-marker {\n position: absolute;\n top: 50%;\n width: 2px;\n height: 100%;\n transform: translate(-50%, -50%);\n background: rgba(0, 0, 0, 0.55);\n box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5);\n pointer-events: none;\n }\n\n .vz-seek-buffered {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.25),\n rgba(255, 255, 255, 0.35)\n );\n border-radius: 99px;\n }\n\n .vz-seek-played {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background: var(--vz-progress-color, var(--vz-primary, #f43f5e));\n border-radius: 99px;\n box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);\n box-shadow: 0 0 8px color-mix(in srgb, var(--vz-primary, #f43f5e) 40%, transparent);\n }\n\n .vz-seek-thumb {\n position: absolute;\n top: 50%;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n pointer-events: none;\n }\n\n .vz-seek-container:hover .vz-seek-thumb {\n transform: translate(-50%, -50%) scale(1);\n box-shadow: 0 0 6px rgba(244, 63, 94, 0.5);\n box-shadow: 0 0 6px color-mix(in srgb, var(--vz-primary, #f43f5e) 50%, transparent);\n }\n\n .vz-seek-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n }\n\n /* Hover time tooltip */\n .vz-seek-tooltip {\n position: absolute;\n bottom: 100%;\n margin-bottom: 6px;\n padding: 3px 7px;\n background: var(--vz-secondary, rgba(0, 0, 0, 0.85));\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n color: #fff;\n font-size: 12px;\n font-variant-numeric: tabular-nums;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n border-radius: 4px;\n white-space: nowrap;\n pointer-events: none;\n transform: translateX(-50%);\n opacity: 0;\n transition: opacity 0.12s;\n }\n\n .vz-seek-container:hover .vz-seek-tooltip {\n opacity: 1;\n }\n\n /* Storyboard sprite hover thumbnail (WS-PP) */\n .vz-seek-thumb-preview {\n position: absolute;\n bottom: 100%;\n margin-bottom: 30px;\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.35);\n background-repeat: no-repeat;\n pointer-events: none;\n transform: translateX(-50%);\n opacity: 0;\n transition: opacity 0.12s;\n overflow: hidden;\n }\n\n .vz-seek-container:hover .vz-seek-thumb-preview {\n opacity: 1;\n }\n\n /* Keyboard shortcut help overlay (WS-PP) */\n .vz-shortcuts-overlay {\n position: absolute;\n inset: 0;\n z-index: 40;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.6);\n }\n\n .vz-shortcuts-panel {\n background: var(--vz-secondary, rgba(20, 20, 20, 0.95));\n color: #fff;\n border-radius: 8px;\n padding: 16px 20px;\n max-width: 420px;\n max-height: 80%;\n overflow-y: auto;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .vz-shortcuts-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n }\n\n .vz-shortcuts-header h2 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n }\n\n .vz-shortcuts-list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 6px 16px;\n margin: 12px 0 0;\n font-size: 12px;\n }\n\n .vz-shortcuts-list dt kbd {\n background: rgba(255, 255, 255, 0.12);\n border-radius: 3px;\n padding: 1px 6px;\n font-family: inherit;\n font-variant-numeric: tabular-nums;\n }\n\n .vz-shortcuts-list dd {\n margin: 0;\n opacity: 0.85;\n align-self: center;\n }\n\n .vz-time {\n font-size: 12px;\n font-weight: 400;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n padding: 0 6px;\n flex-shrink: 0;\n opacity: 0.9;\n letter-spacing: 0.02em;\n }\n\n /* ------------------------------------------------------------------ */\n /* Volume \u2014 horizontal slide-out on hover */\n /* ------------------------------------------------------------------ */\n\n .vz-volume {\n display: flex;\n align-items: center;\n gap: 0;\n overflow: hidden;\n }\n\n .vz-volume-slider-wrap {\n width: 0;\n overflow: hidden;\n transition: width 0.2s ease;\n }\n\n .vz-volume:hover .vz-volume-slider-wrap {\n width: 64px;\n }\n\n .vz-volume-slider {\n width: 60px;\n height: 4px;\n margin: 0 4px;\n -webkit-appearance: none;\n appearance: none;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 99px;\n outline: none;\n cursor: pointer;\n }\n\n .vz-volume-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n }\n\n .vz-volume-slider::-moz-range-thumb {\n width: 12px;\n height: 12px;\n border: none;\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n }\n\n /* ------------------------------------------------------------------ */\n /* Quality menu */\n /* ------------------------------------------------------------------ */\n\n .vz-quality-menu {\n position: relative;\n }\n\n .vz-quality-dropdown {\n position: absolute;\n bottom: 100%;\n right: 0;\n margin-bottom: 8px;\n background: var(--vz-secondary, rgba(20, 20, 30, 0.95));\n backdrop-filter: blur(16px) saturate(1.3);\n -webkit-backdrop-filter: blur(16px) saturate(1.3);\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 8px;\n padding: 4px 0;\n min-width: 120px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);\n display: none;\n z-index: 20;\n }\n\n .vz-quality-dropdown.open {\n display: block;\n }\n\n .vz-quality-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n cursor: pointer;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.7);\n white-space: nowrap;\n transition: color 0.12s, background 0.12s;\n }\n\n .vz-quality-option:hover {\n background: rgba(244, 63, 94, 0.08);\n background: color-mix(in srgb, var(--vz-primary, #f43f5e) 8%, transparent);\n color: #fff;\n }\n\n .vz-quality-option.active {\n color: var(--vz-primary, #f43f5e);\n }\n\n .vz-quality-check {\n width: 16px;\n font-size: 14px;\n }\n\n /* ------------------------------------------------------------------ */\n /* Compass */\n /* ------------------------------------------------------------------ */\n\n .vz-compass {\n position: relative;\n }\n\n .vz-compass svg {\n fill: none;\n stroke: currentColor;\n transition: transform 0.1s ease-out;\n }\n\n /* ------------------------------------------------------------------ */\n /* Loading spinner \u2014 CSS ring */\n /* ------------------------------------------------------------------ */\n\n .vz-loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 44px;\n height: 44px;\n z-index: 5;\n pointer-events: none;\n }\n\n .vz-loading-spinner {\n width: 100%;\n height: 100%;\n border: 2.5px solid rgba(255, 255, 255, 0.15);\n border-top-color: var(--vz-primary, #f43f5e);\n border-radius: 50%;\n animation: vz-spin 0.75s linear infinite;\n }\n\n .vz-loading.hidden {\n display: none;\n }\n\n @keyframes vz-spin {\n to { transform: rotate(360deg); }\n }\n\n /* ------------------------------------------------------------------ */\n /* Big play button \u2014 frosted glass */\n /* ------------------------------------------------------------------ */\n\n .vz-big-play {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 68px;\n height: 68px;\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 50%;\n background: rgba(15, 10, 20, 0.4);\n backdrop-filter: blur(12px) saturate(1.2);\n -webkit-backdrop-filter: blur(12px) saturate(1.2);\n color: #fff;\n cursor: pointer;\n z-index: 5;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;\n opacity: 1;\n box-shadow: 0 0 20px rgba(244, 63, 94, 0.15);\n box-shadow: 0 0 20px color-mix(in srgb, var(--vz-primary, #f43f5e) 15%, transparent);\n }\n\n .vz-big-play:hover {\n background: rgba(15, 10, 20, 0.55);\n transform: translate(-50%, -50%) scale(1.08);\n box-shadow: 0 0 30px rgba(244, 63, 94, 0.25);\n box-shadow: 0 0 30px color-mix(in srgb, var(--vz-primary, #f43f5e) 25%, transparent);\n }\n\n .vz-big-play.hidden {\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -50%) scale(0.85);\n }\n\n .vz-big-play svg {\n width: 30px;\n height: 30px;\n fill: currentColor;\n margin-left: 3px; /* visual centering for play triangle */\n }\n\n /* ------------------------------------------------------------------ */\n /* Watermark */\n /* ------------------------------------------------------------------ */\n\n .vz-watermark {\n position: absolute;\n bottom: 48px;\n right: 12px;\n z-index: 15;\n pointer-events: auto;\n }\n\n /* ------------------------------------------------------------------ */\n /* Controls behavior variants */\n /* ------------------------------------------------------------------ */\n\n /* \"always\" mode \u2014 never hide */\n :host([controls-behavior=\"always\"]) .vz-controls-wrapper {\n opacity: 1 !important;\n pointer-events: auto !important;\n transform: none !important;\n }\n\n /* \"minimal\" mode \u2014 only thin progress bar always visible */\n :host([controls-behavior=\"minimal\"]) .vz-controls-wrapper.hidden .vz-controls {\n opacity: 0;\n pointer-events: none;\n }\n\n :host([controls-behavior=\"minimal\"]) .vz-controls-wrapper.hidden .vz-seek-row {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host([controls-behavior=\"minimal\"]) .vz-controls-wrapper.hidden {\n opacity: 1;\n pointer-events: auto;\n transform: none;\n }\n\n /* ------------------------------------------------------------------ */\n /* Live indicator */\n /* ------------------------------------------------------------------ */\n\n .vz-live-indicator {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 8px;\n cursor: pointer;\n flex-shrink: 0;\n transition: opacity 0.2s;\n user-select: none;\n }\n\n .vz-live-indicator:hover {\n opacity: 1;\n }\n\n .vz-live-dot {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n }\n\n .vz-live-dot svg {\n width: 10px;\n height: 10px;\n }\n\n .vz-live-dot.at-edge {\n color: #ef4444;\n animation: vz-live-pulse 2s ease-in-out infinite;\n }\n\n .vz-live-dot.behind {\n color: #6b7280;\n animation: none;\n }\n\n .vz-live-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.9);\n }\n\n @keyframes vz-live-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n /* ------------------------------------------------------------------ */\n /* Caption overlay (HUD) */\n /* ------------------------------------------------------------------ */\n\n .vz-caption-overlay {\n position: absolute;\n bottom: 60px;\n left: 50%;\n transform: translateX(-50%);\n max-width: 80%;\n padding: 4px 12px;\n background: rgba(0, 0, 0, 0.75);\n border-radius: 4px;\n color: #fff;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-size: 16px;\n line-height: 1.4;\n text-align: center;\n z-index: 12;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.15s ease;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .vz-caption-overlay.visible {\n opacity: 1;\n }\n\n /* ------------------------------------------------------------------ */\n /* CC button & dropdown */\n /* ------------------------------------------------------------------ */\n\n .vz-cc-menu {\n position: relative;\n }\n\n .vz-cc-btn.active {\n color: var(--vz-primary, #f43f5e);\n opacity: 1;\n }\n\n .vz-cc-dropdown {\n position: absolute;\n bottom: 100%;\n right: 0;\n margin-bottom: 8px;\n background: var(--vz-secondary, rgba(20, 20, 30, 0.95));\n backdrop-filter: blur(16px) saturate(1.3);\n -webkit-backdrop-filter: blur(16px) saturate(1.3);\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 8px;\n padding: 4px 0;\n min-width: 120px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);\n display: none;\n z-index: 20;\n }\n\n .vz-cc-dropdown.open {\n display: block;\n }\n\n .vz-cc-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n cursor: pointer;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.7);\n white-space: nowrap;\n transition: color 0.12s, background 0.12s;\n }\n\n .vz-cc-option:hover {\n background: rgba(244, 63, 94, 0.08);\n background: color-mix(in srgb, var(--vz-primary, #f43f5e) 8%, transparent);\n color: #fff;\n }\n\n .vz-cc-option.active {\n color: var(--vz-primary, #f43f5e);\n }\n\n .vz-cc-check {\n width: 16px;\n font-size: 14px;\n }\n\n /* ------------------------------------------------------------------ */\n /* Chapters menu */\n /* ------------------------------------------------------------------ */\n\n .vz-chapter-menu {\n position: relative;\n }\n\n .vz-chapter-dropdown {\n position: absolute;\n bottom: 100%;\n right: 0;\n margin-bottom: 8px;\n background: var(--vz-secondary, rgba(20, 20, 30, 0.95));\n backdrop-filter: blur(16px) saturate(1.3);\n -webkit-backdrop-filter: blur(16px) saturate(1.3);\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 8px;\n padding: 4px 0;\n min-width: 200px;\n max-height: 260px;\n overflow-y: auto;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);\n display: none;\n z-index: 20;\n }\n\n .vz-chapter-dropdown.open {\n display: block;\n }\n\n .vz-chapter-option {\n display: flex;\n align-items: baseline;\n gap: 10px;\n padding: 8px 16px;\n cursor: pointer;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.7);\n white-space: nowrap;\n transition: color 0.12s, background 0.12s;\n }\n\n .vz-chapter-option:hover {\n background: color-mix(in srgb, var(--vz-primary, #f43f5e) 8%, transparent);\n color: #fff;\n }\n\n .vz-chapter-option.active {\n color: var(--vz-primary, #f43f5e);\n }\n\n .vz-chapter-time {\n font-variant-numeric: tabular-nums;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.45);\n flex-shrink: 0;\n }\n\n .vz-chapter-option.active .vz-chapter-time {\n color: var(--vz-primary, #f43f5e);\n }\n\n .vz-chapter-label {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n /* ------------------------------------------------------------------ */\n /* Chat badge */\n /* ------------------------------------------------------------------ */\n\n .vz-chat-badge {\n position: absolute;\n top: 2px;\n right: 2px;\n min-width: 16px;\n height: 16px;\n border-radius: 8px;\n background: #ef4444;\n color: #fff;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n pointer-events: none;\n line-height: 1;\n }\n\n /* ------------------------------------------------------------------ */\n /* Responsive */\n /* ------------------------------------------------------------------ */\n\n @media (max-width: 400px) {\n .vz-volume-slider-wrap,\n .vz-volume-slider {\n display: none;\n }\n }\n"; //# sourceMappingURL=controls.d.ts.map