@ngxsplayer/ngx-smart-player-ui-video 0.1.0

package/fesm2022/ngxsplayer-ngx-smart-player-ui-video.mjs

@@ -0,0 +1,3833 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, EventEmitter, ChangeDetectorRef, ElementRef, ViewChild, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { SmartPlayerComponent, SmartPlayerIconComponent, SmartSettingsComponent } from '@ngxsplayer/ngx-smart-player';
+import { NgxspVolumeControl } from '@ngxsplayer/ngx-smart-player-ui-core';
+
+const CONTINUE_SECTION_ID = '__continue';
+const FALLBACK_SECTION_ID = '__fallback';
+/**
+ * A shelf holds all of its section: it is a row one scrolls, so cutting it at a row's worth only
+ * hides cards behind an edge that looks like the end. The cap is there to keep a catalogue of
+ * thousands from being drawn at once, not to make a preview.
+ */
+const SHELF_RAIL_MAX = 60;
+/** Below this, seeing the row and seeing it all are the same thing, and Show all says nothing. */
+const SHELF_WORTH_EXPANDING = 4;
+const QUEUE_SECTION_ID = '__queue';
+/** How long the resume offer stays once the video plays. */
+const RESUME_PROMPT_MS = 10_000;
+const DEFAULT_VIDEO_NAV_ITEMS = [
+    { id: 'home', label: 'Home', icon: 'home', active: true },
+    { id: 'library', label: 'Library', icon: 'layers' },
+    { id: 'video', label: 'Video', icon: 'video' },
+    { id: 'live', label: 'Live', icon: 'broadcast' },
+    { id: 'favorites', label: 'Favorites', icon: 'heart' },
+    { id: 'downloads', label: 'Downloads', icon: 'download' },
+    { id: 'settings', label: 'Settings', icon: 'settings' },
+];
+const OFFLINE_VIDEO_TOOL_CARDS = [
+    { id: 'offline-library', label: 'Local library', value: 'Open folder', icon: 'folder', tone: 'teal', active: true },
+    { id: 'engine', label: 'Local engine', value: 'Adaptive', icon: 'network', tone: 'blue' },
+    { id: 'tracks', label: 'Local tracks', value: 'Selectable', icon: 'sliders', tone: 'blue' },
+    { id: 'subtitles', label: 'Sidecars', value: 'VTT / SRT', icon: 'captions', tone: 'neutral' },
+    { id: 'offline', label: 'Resume', value: 'Progress', icon: 'cloud', tone: 'gold' },
+    { id: 'diagnostics', label: 'Local telemetry', value: 'Inspect', icon: 'waveform', tone: 'red' },
+];
+const ONLINE_VIDEO_TOOL_CARDS = [
+    { id: 'online-catalog', label: 'Remote catalog', value: 'Configure', icon: 'broadcast', tone: 'teal', active: true },
+    { id: 'engine', label: 'Adaptive engine', value: 'HLS / DASH', icon: 'network', tone: 'blue' },
+    { id: 'tracks', label: 'Manifests', value: 'Audio / video', icon: 'sliders', tone: 'blue' },
+    { id: 'subtitles', label: 'Timed text', value: 'Ready', icon: 'captions', tone: 'neutral' },
+    { id: 'cast', label: 'Devices', value: 'Cast ready', icon: 'devices', tone: 'gold' },
+    { id: 'diagnostics', label: 'Telemetry', value: 'Live signals', icon: 'waveform', tone: 'red' },
+];
+const DEFAULT_VIDEO_TOOL_CARDS = OFFLINE_VIDEO_TOOL_CARDS;
+const OFFLINE_VIDEO_CARDS = [
+    {
+        id: 'offline-library',
+        title: 'Local video library',
+        subtitle: 'Folders, files, resume',
+        meta: 'Offline workspace',
+    },
+    {
+        id: 'tracks',
+        title: 'Track inspection',
+        subtitle: 'Audio, video, subtitles',
+        meta: 'Local media',
+    },
+    {
+        id: 'offline',
+        title: 'Resume sessions',
+        subtitle: 'Progress and continuity',
+        meta: 'Persisted locally',
+    },
+    {
+        id: 'devices',
+        title: 'Device playback',
+        subtitle: 'DLNA / UPnP',
+        meta: 'Local network',
+    },
+];
+const ONLINE_VIDEO_CARDS = [
+    {
+        id: 'vod',
+        title: 'Video on demand',
+        subtitle: 'Catalog VOD and featured rails',
+        meta: 'Online catalog',
+    },
+    {
+        id: 'live',
+        title: 'Live playback',
+        subtitle: 'Latency-aware streams',
+        meta: 'Live source',
+    },
+    {
+        id: 'online-catalog',
+        title: 'Remote catalog',
+        subtitle: 'JSON configuration and feeds',
+        meta: 'Configure',
+    },
+    {
+        id: 'devices',
+        title: 'Multi-device playback',
+        subtitle: 'Cast, tracks, subtitles',
+        meta: 'Delivery tools',
+    },
+];
+const WAVEFORM_BARS = [
+    22, 42, 28, 64, 35, 78, 48, 30, 58, 74, 44, 88,
+    52, 36, 66, 46, 76, 54, 32, 62, 84, 48, 28, 56,
+    70, 38, 80, 50, 30, 64, 42, 72, 58, 34, 86, 46,
+];
+class NgxSmartPlayerVideoUiComponent {
+    /**
+     * Keeps what is playing in sight in the queue. One scrolls down a queue to see what is
+     * coming, and the next video then starts out of view; it only scrolls when what plays
+     * changes, and inside the list rather than moving the page under everything else.
+     */
+    ngAfterViewChecked() {
+        const queue = this.queueListEl?.nativeElement;
+        const playing = queue?.querySelector('.ngxsp-yt-suggestion.active');
+        const key = playing && queue
+            ? `${Array.prototype.indexOf.call(queue.children, playing)}:${queue.clientHeight}`
+            : '';
+        if (!queue || !playing || key === this.queueFollowed)
+            return;
+        this.queueFollowed = key;
+        const reduced = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        // Measured against the list itself: offsetTop answers for whichever ancestor happens to be
+        // positioned, which is not this one, and the answer is then a scroll to nowhere.
+        const box = queue.getBoundingClientRect();
+        const row = playing.getBoundingClientRect();
+        queue.scrollTo({
+            top: queue.scrollTop + (row.top - box.top) - (box.height - row.height) / 2,
+            behavior: reduced ? 'auto' : 'smooth',
+        });
+    }
+    constructor() {
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.resumePromptTimer));
+    }
+    config = null;
+    /** The host app's logo in the masthead (an image URL); without it, a generic play tile. */
+    brandLogoSrc = '';
+    plugins = [];
+    ports;
+    engines;
+    debug = false;
+    startTimeSec = null;
+    /** Incremented by the host when the viewer picks something to watch; the poster preview then gives way to the player. */
+    set playRequest(value) {
+        if (value > this.playRequestValue)
+            this.posterPreviewDismissed = true;
+        this.playRequestValue = value;
+    }
+    get playRequest() {
+        return this.playRequestValue;
+    }
+    playRequestValue = 0;
+    canPrev = false;
+    canNext = false;
+    previousLabel = 'Previous video';
+    playerBackLabel = 'Back';
+    nextLabel = 'Next video';
+    playLabel = 'Play';
+    pauseLabel = 'Pause';
+    transportLabel = 'Video playback controls';
+    cinemaMode = false;
+    cinemaLabel = 'Enter cinema mode';
+    cinemaActiveLabel = 'Exit cinema mode';
+    shuffleActive = false;
+    shuffleLabel = 'Shuffle: off';
+    repeatMode = 'off';
+    repeatLabel = 'Repeat: off';
+    hasPlaylistControls = false;
+    castEnabled = false;
+    castConnected = false;
+    /** Set when the video loads where it was left (see `VideoUiResumeOffer`). */
+    set resumeOffer(offer) {
+        if (offer?.key !== this.offer?.key) {
+            this.clearResumePromptTimer();
+            this.resumePromptShown = !!offer;
+        }
+        this.offer = offer;
+    }
+    get resumeOffer() {
+        return this.offer;
+    }
+    offer = null;
+    resumePromptShown = false;
+    resumePromptTimer;
+    chooseResume(choice) {
+        if (choice === 'restart')
+            this.smartPlayer?.seekTo(0);
+        this.closeResumePrompt();
+        this.resumeChoice.emit(choice);
+    }
+    closeResumePrompt() {
+        this.clearResumePromptTimer();
+        this.resumePromptShown = false;
+        this.cdr.markForCheck();
+    }
+    clearResumePromptTimer() {
+        clearTimeout(this.resumePromptTimer);
+        this.resumePromptTimer = undefined;
+    }
+    /** Tabs of the info panel (library, engine, tracks, subtitles, progress, telemetry): their ids are panel ids. */
+    infoTabs = [];
+    infoLabel = 'Info';
+    /** The info panel open, shown over the video (in the sheet on phones); null when closed. */
+    set infoPanel(panel) {
+        this.info = panel;
+        if (panel && this.isSheetLayout())
+            this.queueSheetOpen = true;
+    }
+    get infoPanel() {
+        return this.info && !this.isSheetLayout() ? this.info : null;
+    }
+    info = null;
+    /** The words of the player's menus (tracks, speed, subtitles). */
+    playerMenuLabels = {};
+    heroEyebrow = 'Featured';
+    heroTitle = '';
+    heroSubtitle = '';
+    heroMeta = '';
+    heroArtworkUrl = '';
+    preferPosterPreview = true;
+    runtimeModeLabel = 'Video runtime mode';
+    onlineLabel = 'Online';
+    offlineLabel = 'Offline';
+    navigationLabel = 'Video navigation';
+    menuLabel = 'Menu';
+    searchPlaceholder = 'Search';
+    searchLabel = 'Search videos';
+    searchResultsTitle = 'Search results';
+    searchResultsSummary = '';
+    searchResultsEmptyTitle = 'No result';
+    searchResultsEmptyBody = 'Try another title, format, or tag.';
+    searchClearLabel = 'Clear search';
+    searchFilterLabel = 'Filter search results';
+    searchFilters = [];
+    searchActionLabels = {};
+    notificationsLabel = 'Notifications';
+    settingsLabel = 'Player settings';
+    sourceChangeLabel = 'Open file';
+    sourceChangeTitle = '';
+    sourceDropTitle = '';
+    sourceDropHint = '';
+    sourceChangeAccept = 'video/*';
+    /** When set (desktop shell), the title bar offers folder import and keeps single-file import as a secondary action. */
+    folderImportLabel = '';
+    libraryStatus = '';
+    /**
+     * Sliding a finger up or down over the picture: brightness on the left half, sound on the
+     * right. Off where it would get in the way — a pointer that only ever clicks, say.
+     */
+    touchAdjust = true;
+    /** How bright the picture is, 10 to 100. Below 100 a veil is drawn over it; nothing is brightened past its own. */
+    brightness = 100;
+    brightnessChange = new EventEmitter();
+    /** "More": what opens a card's own menu, for a screen reader and for a tooltip. */
+    cardActionsLabel = 'More';
+    /** The way out of a card's menu, for whoever cannot see where the menu stops. */
+    cardMenuCloseLabel = 'Close the menu';
+    /** The action chosen on a card's menu: which action, on which video. */
+    cardAction = new EventEmitter();
+    /** The strip along the bottom: a question, or how far a long job has got. Null when there is nothing to say. */
+    promptBar = null;
+    /** True when the viewer took the first way out, false for the second. */
+    promptAnswer = new EventEmitter();
+    libraryBusy = false;
+    sourceTypeLocalLabel = 'LOCAL';
+    sourceTypeStreamLabel = 'STREAM';
+    languageLabel = 'Language';
+    activeLanguage = '';
+    languageOptions = [];
+    statusMessage = '';
+    statusKind = 'info';
+    likeLabel = 'Like';
+    likeActive = false;
+    dislikeLabel = 'Dislike';
+    shareLabel = 'Share';
+    watchLaterLabel = 'Watch later';
+    watchLaterActive = false;
+    queueActionLabel = 'Show or hide queue';
+    queueShortLabel = 'Queue';
+    queueAddActiveLabel = 'Add to queue';
+    queueAddActiveShortLabel = 'Add';
+    queueActionLabels = {};
+    moreLabel = 'More options';
+    moreShortLabel = 'More';
+    browseLibraryLabel = 'Browse library';
+    /**
+     * Where the view stands, from its own name down to what is open. Entering a series or a folder
+     * is not another page: it is another step here, and everything else keeps its shape.
+     */
+    trail = [];
+    trailLabel = 'Where you are';
+    showAllLabel = 'Show all';
+    showLessLabel = 'Show less';
+    emptyCatalogLabel = 'No catalog section available.';
+    continueWatchingMeta = '';
+    continueWatching = [];
+    managedQueue = false;
+    upNextItems = [];
+    /** Lists the viewer created; null hides the block entirely. */
+    playlistPanel = null;
+    /** Media servers block above the library grid; null hides it entirely. */
+    serverForm = null;
+    showResumeProgress = false;
+    mediaDetail = null;
+    sidePanelTitle = 'Catalog';
+    sidePanelMeta = '';
+    sections = [];
+    navItems = DEFAULT_VIDEO_NAV_ITEMS;
+    toolCards = DEFAULT_VIDEO_TOOL_CARDS;
+    /** The tools open their panel inside the queue column, which is a sheet on a phone. */
+    set inspectorPanel(panel) {
+        this.inspector = panel;
+        if (panel && this.isSheetLayout())
+            this.queueSheetOpen = true;
+    }
+    get inspectorPanel() {
+        return this.inspector;
+    }
+    /** What the side column shows: its own panel, or on phones the info panel. */
+    get sidePanel() {
+        return this.inspector ?? (this.info && this.isSheetLayout() ? this.info : null);
+    }
+    inspector = null;
+    /**
+     * Every panel the host offers the side column. It used to hand one at a time, so a single
+     * panel still works: it is the list of one.
+     */
+    inspectorPanels = [];
+    /** The queue's own switch, which used to be "whatever showed when no panel did". */
+    queueOpen = true;
+    collapsedPanels = new Set();
+    closedPanels = new Set();
+    get knownPanels() {
+        if (this.inspectorPanels.length)
+            return this.inspectorPanels;
+        return this.inspector ? [this.inspector] : [];
+    }
+    /** The ones actually stacked: what the host offers, minus what the viewer put away. */
+    get openPanels() {
+        return this.knownPanels.filter((panel) => !this.closedPanels.has(panel.id));
+    }
+    isPanelOpen(id) {
+        if (id === 'queue')
+            return this.queueOpen;
+        return this.knownPanels.some((panel) => panel.id === id) && !this.closedPanels.has(id);
+    }
+    isPanelCollapsed(id) {
+        return this.collapsedPanels.has(id);
+    }
+    /** Folds a panel to its header, so several open ones stay usable without hiding any. */
+    togglePanelCollapsed(id) {
+        if (!this.collapsedPanels.delete(id))
+            this.collapsedPanels.add(id);
+    }
+    togglePanel(id) {
+        if (id === 'queue') {
+            this.queueOpen = !this.queueOpen;
+            return;
+        }
+        if (this.closedPanels.delete(id))
+            this.collapsedPanels.delete(id);
+        else
+            this.closePanel(id);
+    }
+    /**
+     * Puts a panel away. The host is told, since it is the one that decides what it offers; a host
+     * that keeps offering it gets it back from the pill, with no round trip.
+     */
+    closePanel(id) {
+        this.closedPanels.add(id);
+        this.panelClosed.emit(id);
+        if (this.knownPanels.length <= 1)
+            this.closeInspector.emit();
+    }
+    inspectorCloseLabel = 'Close panel';
+    libraryVisible = true;
+    /**
+     * Whether the area shows the player. A host with views of its own shows it only while watching, and gives the whole
+     * area to the view being browsed the rest of the time; the player then fills that area rather than sitting in it.
+     */
+    playerView = true;
+    /**
+     * Whether liking, sharing and keeping a video for later sit in the player's own controls. A host whose player has
+     * the screen to itself needs them there: there is no page around it to put them on.
+     */
+    watchActionsInPlayer = false;
+    /**
+     * Whether the area leads with the video being watched — its title, its buttons, its details. A home view turns it
+     * off so it opens on where videos come from, rather than on the last one that was played.
+     */
+    showActiveMedia = true;
+    closeLabel = 'Close';
+    queueVisible = false;
+    /**
+     * What the side panel lists: the queue, or the videos of `sections` (a library, a collection, a list) in full. With
+     * `sections`, the library grid under the player gives way to the panel while the panel is beside it; on phones,
+     * where the panel is a sheet, the grid stays and shows them all.
+     */
+    sidePanelContent = 'queue';
+    /** "Back to Lists": shown above the side panel's title while something is open inside it; null at the top. */
+    sideBackLabel = null;
+    searchTerm = '';
+    runtimeMode = 'offline';
+    /** False when the host offers the online/offline choice elsewhere (its settings). */
+    runtimeModeInHeader = true;
+    set activeViewMode(value) {
+        this.viewMode = value || 'grid';
+    }
+    get activeViewMode() {
+        return this.viewMode;
+    }
+    libraryTitle = 'Media library';
+    nowPlayingLabel = 'Now playing';
+    fullscreenHintLabel = 'Double-click for fullscreen';
+    fullscreenLabel = 'Fullscreen';
+    readyStatusLabel = 'Ready';
+    playingStatusLabel = 'Playing';
+    pausedStatusLabel = 'Paused';
+    bufferingStatusLabel = 'Buffering';
+    loadingStatusLabel = 'Loading';
+    endedStatusLabel = 'Ended';
+    errorStatusLabel = 'Error';
+    miniPlayerVisible = true;
+    miniPlayerMeta = '';
+    miniPlayerPlayLabel = 'Play from mini player';
+    miniPlayerPauseLabel = 'Pause from mini player';
+    miniPlayerFocusLabel = 'Open current video';
+    miniPlayerCloseLabel = 'Hide mini player';
+    miniPlayerRestoreLabel = 'Show mini player';
+    outputVolume = 100;
+    outputVolumeLabel = 'Output volume';
+    outputMuteLabel = 'Mute output';
+    outputUnmuteLabel = 'Restore sound';
+    // Public media output aliases intentionally mirror native media event names.
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    ended = new EventEmitter();
+    videoSize = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    progress = new EventEmitter();
+    /** The window's size (desktop): the whole app or a floating mini player ('bar' is an audio layout, shown in full). */
+    compactMode = 'full';
+    /** True where the host can resize its window: shows the button that makes it a mini player. */
+    compactModes = false;
+    /**
+     * Down the side, across the top, or away. A narrow window still takes the row whatever is
+     * chosen — there is no side to put it down — but away stays away.
+     */
+    menuLayout = 'vertical';
+    compactMiniLabel = 'Mini player';
+    compactRestoreLabel = 'Full window';
+    compactModeChange = new EventEmitter();
+    /** "Show in Finder" for the video playing, where the host can show its file (desktop); empty hides the button. */
+    revealFileLabel = '';
+    revealFile = new EventEmitter();
+    prev = new EventEmitter();
+    next = new EventEmitter();
+    toggleShuffle = new EventEmitter();
+    cycleRepeat = new EventEmitter();
+    cast = new EventEmitter();
+    /** A subtitle file the viewer chose was read (ok), or could not be. */
+    /** The Infos button: open the info panel on its last tab, or close it. */
+    infoToggle = new EventEmitter();
+    /** Back out of what the side panel shows: a server folder, a list, a search (see `sideBackLabel`). */
+    sideBack = new EventEmitter();
+    /** Leaving the player. Reaching it from the mini player left nothing behind to go back to. */
+    playerBack = new EventEmitter();
+    /** The viewer's answer to `resumeOffer`: keep going from where it was, or start over (the player went back to 0). */
+    resumeChoice = new EventEmitter();
+    infoTabSelect = new EventEmitter();
+    subtitlesLoaded = new EventEmitter();
+    selectContinueWatching = new EventEmitter();
+    selectSectionItem = new EventEmitter();
+    selectDetailEpisode = new EventEmitter();
+    chapterSeek = new EventEmitter();
+    navSelect = new EventEmitter();
+    toolSelect = new EventEmitter();
+    detailAction = new EventEmitter();
+    inspectorAction = new EventEmitter();
+    settingChange = new EventEmitter();
+    settingAction = new EventEmitter();
+    closeInspector = new EventEmitter();
+    /** Which panel the viewer put away, when the host offers several. */
+    panelClosed = new EventEmitter();
+    openSource = new EventEmitter();
+    toggleLibrary = new EventEmitter();
+    /** A step of the trail the viewer asked to go back to. */
+    trailStep = new EventEmitter();
+    toggleQueue = new EventEmitter();
+    toggleCinema = new EventEmitter();
+    miniPlayerFocus = new EventEmitter();
+    miniPlayerClose = new EventEmitter();
+    miniPlayerRestore = new EventEmitter();
+    queueAddActive = new EventEmitter();
+    connectServer = new EventEmitter();
+    /** Looks for servers of this kind on the local network. */
+    discoverServers = new EventEmitter();
+    connectDiscoveredServer = new EventEmitter();
+    selectServer = new EventEmitter();
+    disconnectServer = new EventEmitter();
+    createPlaylist = new EventEmitter();
+    selectPlaylist = new EventEmitter();
+    /** Files the panel's target item in the given list. */
+    addToPlaylist = new EventEmitter();
+    /** Takes the panel's target out of the given list. */
+    removeFromPlaylist = new EventEmitter();
+    renamePlaylist = new EventEmitter();
+    deletePlaylist = new EventEmitter();
+    watchLaterToggle = new EventEmitter();
+    queueMoveUp = new EventEmitter();
+    queueMoveDown = new EventEmitter();
+    queueRemove = new EventEmitter();
+    searchFilterChange = new EventEmitter();
+    searchResultQueueAdd = new EventEmitter();
+    searchResultWatchLater = new EventEmitter();
+    searchResultFavorite = new EventEmitter();
+    searchResultDownload = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    search = new EventEmitter();
+    searchTermChange = new EventEmitter();
+    viewModeChange = new EventEmitter();
+    runtimeModeChange = new EventEmitter();
+    primaryPlay = new EventEmitter();
+    primaryPlaybackToggle = new EventEmitter();
+    playerStateChange = new EventEmitter();
+    sourceFileChange = new EventEmitter();
+    addFolder = new EventEmitter();
+    languageChange = new EventEmitter();
+    outputVolumeChange = new EventEmitter();
+    outputMuteToggle = new EventEmitter();
+    waveformBars = WAVEFORM_BARS;
+    searchOpen = false;
+    railExpanded = false;
+    fileDragActive = false;
+    playerState = null;
+    posterPreviewDismissed = false;
+    viewMode = 'grid';
+    cdr = inject(ChangeDetectorRef);
+    host = inject(ElementRef);
+    fileDragDepth = 0;
+    cardMenuBox;
+    smartPlayer;
+    document = inject(DOCUMENT);
+    contentScroll;
+    queueListEl;
+    queueFollowed = '';
+    videoFileInput;
+    // On phones the queue is a sheet over the page, opened from the queue button and closed from
+    // its own header: move focus into it so Escape and the close button are reachable right away.
+    set queuePanel(panel) {
+        if (!panel || !this.queueSheetOpen)
+            return;
+        setTimeout(() => panel.nativeElement.focus());
+    }
+    // The same viewport the mobile sheet styles use.
+    isSheetLayout() {
+        return typeof matchMedia === 'function' && matchMedia('(max-width: 860px)').matches;
+    }
+    queueSheetOpen = false;
+    get queuePanelActive() {
+        return this.queueSheetOpen || (this.queueVisible && !this.isSheetLayout());
+    }
+    onQueueAction() {
+        if (!this.isSheetLayout()) {
+            this.toggleQueue.emit();
+            return;
+        }
+        if (this.queueSheetOpen) {
+            this.closeQueueSheet();
+            return;
+        }
+        this.queueSheetOpen = true;
+    }
+    closeQueueSheet() {
+        if (!this.queueSheetOpen)
+            return;
+        this.queueSheetOpen = false;
+        // A tool panel opened this sheet: closing the sheet is how it is dismissed here.
+        if (this.sidePanel)
+            this.closeInspector.emit();
+        setTimeout(() => {
+            const buttons = Array.from(this.host.nativeElement.querySelectorAll('.ngxsp-yt-queueButton'));
+            buttons.find((button) => button.offsetParent !== null)?.focus();
+        });
+    }
+    /** True when the detail block only repeats the title bar above it, as it does for the playing media. */
+    get detailEchoesHeader() {
+        return this.mediaDetail?.title === this.displayHeroTitle;
+    }
+    get isPlaying() {
+        return this.playerState?.kind === 'playing';
+    }
+    get isLiveSource() {
+        return !!this.config?.source?.live;
+    }
+    get cinemaButtonLabel() {
+        return this.cinemaMode ? this.cinemaActiveLabel : this.cinemaLabel;
+    }
+    get miniPlayerPlaybackLabel() {
+        return this.isPlaying ? this.miniPlayerPauseLabel : this.miniPlayerPlayLabel;
+    }
+    get isOfflineMode() {
+        return this.runtimeMode === 'offline';
+    }
+    get showPosterPreview() {
+        return !!this.config && !!this.displayHeroArtwork && this.preferPosterPreview && !this.posterPreviewDismissed;
+    }
+    get sourceTypeLabel() {
+        if (this.config?.source?.type)
+            return this.config.source.type.toUpperCase();
+        return this.isOfflineMode ? this.sourceTypeLocalLabel : this.sourceTypeStreamLabel;
+    }
+    get playbackStateLabel() {
+        if (!this.config)
+            return this.isOfflineMode ? 'Offline ready' : 'Online ready';
+        return this.isLiveSource ? 'Live source' : 'On demand';
+    }
+    get primarySourceLabel() {
+        return this.isOfflineMode ? 'Open folder' : 'Configure catalog';
+    }
+    get primarySourceShortLabel() {
+        return this.isOfflineMode ? 'Open' : 'Catalog';
+    }
+    get primarySourceIcon() {
+        return this.isOfflineMode ? 'folder' : 'broadcast';
+    }
+    get emptyKicker() {
+        return this.isOfflineMode ? 'Video Offline' : 'Video Online';
+    }
+    get emptyTitle() {
+        return this.isOfflineMode ? 'Open a folder to start playback' : 'Connect a catalog to start streaming';
+    }
+    get emptyBody() {
+        return this.isOfflineMode
+            ? 'Build a local queue, resume progress, inspect tracks, subtitles, nearby devices, and offline eligibility from one focused player.'
+            : 'Connect a remote catalog, validate VOD/live streams, adaptive manifests, subtitles, casting, and telemetry in the online player.';
+    }
+    get libraryMeta() {
+        const count = this.itemCount;
+        if (count)
+            return `${count} item${count > 1 ? 's' : ''}`;
+        return this.config ? this.sourceTypeLabel : 'No source selected';
+    }
+    get railMeta() {
+        const count = this.railItems.length;
+        return `${count} ready`;
+    }
+    get displayHeroTitle() {
+        return this.heroTitle || this.activeCard?.item.title || 'NGXSP video cockpit';
+    }
+    get displayHeroSubtitle() {
+        return this.heroSubtitle || this.activeCard?.item.subtitle || (this.isOfflineMode
+            ? 'A production-grade offline shell for local folders, queues, resume state, subtitles, and device playback.'
+            : 'A production-grade online shell for VOD, live streams, adaptive manifests, subtitles, casting, and telemetry.');
+    }
+    get displayHeroMeta() {
+        return this.heroMeta || `${this.playbackStateLabel} | ${this.displayQueueItems.length} queued`;
+    }
+    get displayHeroArtwork() {
+        return this.heroArtworkUrl || this.activeCard?.item.artworkUrl || this.featuredItems.find((card) => !!card.item.artworkUrl)?.item.artworkUrl || '';
+    }
+    get timelineMarkers() {
+        const chapters = this.mediaDetail?.chapters ?? [];
+        return chapters
+            .flatMap((chapter) => {
+            const timeSec = this.chapterTimeSec(chapter);
+            if (!Number.isFinite(timeSec) || timeSec < 0)
+                return [];
+            const marker = {
+                id: chapter.id,
+                timeSec,
+                title: chapter.title,
+            };
+            const label = chapter.time || chapter.label;
+            if (label)
+                marker.label = label;
+            if (chapter.active !== undefined)
+                marker.active = chapter.active;
+            return [marker];
+        });
+    }
+    get timelineDurationSec() {
+        const durationSec = this.timeLabelToSeconds(this.activeCard?.item.duration);
+        return Number.isFinite(durationSec) && durationSec > 0 ? durationSec : null;
+    }
+    get hasSearchQuery() {
+        return this.searchTerm.trim().length > 0;
+    }
+    get searchResultItems() {
+        if (!this.hasSearchQuery)
+            return [];
+        return this.sections
+            .flatMap((section) => this.toRefs(section.id, section.items))
+            .slice(0, 18)
+            .map((card, index) => ({ ...card, index }));
+    }
+    expandedSections = new Set();
+    isSectionExpanded(id) {
+        return this.expandedSections.has(id);
+    }
+    /** Shows the rest of a shelf, or puts it back to a row. */
+    toggleSection(id) {
+        if (!this.expandedSections.delete(id))
+            this.expandedSections.add(id);
+    }
+    /**
+     * The view as a stack of titled shelves — one per section, empty ones left out, each holding a
+     * row until it is asked for the rest. A view with nothing to shelve keeps what it showed before,
+     * under no heading of its own.
+     */
+    get librarySections() {
+        const filled = this.sections.filter((section) => section.items.length);
+        if (filled.length) {
+            return filled.map((section) => {
+                const cards = this.toRefs(section.id, section.items);
+                const expanded = this.isSectionExpanded(section.id);
+                return {
+                    id: section.id,
+                    title: section.title,
+                    count: section.items.length,
+                    // A lone section named after the view would say the same thing twice.
+                    titled: filled.length > 1 || section.title !== this.libraryTitle,
+                    hidden: cards.length > SHELF_WORTH_EXPANDING,
+                    cards: expanded ? cards : cards.slice(0, SHELF_RAIL_MAX),
+                };
+            });
+        }
+        const cards = this.continueWatching.length
+            ? this.toRefs(CONTINUE_SECTION_ID, this.continueWatching.slice(0, SHELF_RAIL_MAX))
+            : this.toRefs(FALLBACK_SECTION_ID, this.fallbackCards);
+        if (!cards.length)
+            return [];
+        return [{ id: FALLBACK_SECTION_ID, title: '', count: cards.length, titled: false, hidden: false, cards }];
+    }
+    get featuredItems() {
+        const sectionItems = this.sections.flatMap((section) => this.toRefs(section.id, section.items));
+        if (sectionItems.length)
+            return this.sidePanelContent === 'sections' ? sectionItems : sectionItems.slice(0, 8);
+        if (this.continueWatching.length)
+            return this.toRefs(CONTINUE_SECTION_ID, this.continueWatching.slice(0, 8));
+        return this.toRefs(FALLBACK_SECTION_ID, this.fallbackCards);
+    }
+    get railItems() {
+        if (this.continueWatching.length)
+            return this.toRefs(CONTINUE_SECTION_ID, this.continueWatching.slice(0, 8));
+        return this.featuredItems.slice(0, 8);
+    }
+    /** The sections listed by the side panel when it shows them (`sidePanelContent`). */
+    get sideSectionGroups() {
+        return this.sections.map((section) => ({ id: section.id, title: section.title, cards: this.toRefs(section.id, section.items) }));
+    }
+    /** How many videos the side panel lists. */
+    get sidePanelCount() {
+        return this.sidePanelContent === 'sections'
+            ? this.sections.reduce((count, section) => count + section.items.length, 0)
+            : this.displayQueueItems.length;
+    }
+    get displayQueueItems() {
+        const managedItems = this.managedQueue ? this.toRefs(QUEUE_SECTION_ID, this.upNextItems) : [];
+        const sectionItems = this.sections.flatMap((section) => this.toRefs(section.id, section.items));
+        return (this.managedQueue ? managedItems : sectionItems.length ? sectionItems : this.featuredItems)
+            .slice(0, 12)
+            .map((card, index) => ({ ...card, index }));
+    }
+    get hasManagedQueue() {
+        return this.managedQueue;
+    }
+    get isLibraryFocused() {
+        const activeNavId = this.navItems.find((item) => item.active)?.id;
+        return !!activeNavId && ['home', 'library', 'history', 'watch-later', 'favorites', 'downloads'].includes(activeNavId);
+    }
+    queueItemActionLabel(action, card) {
+        const fallback = {
+            play: 'Play from queue',
+            moveUp: 'Move up in queue',
+            moveDown: 'Move down in queue',
+            remove: 'Remove from queue',
+        };
+        return `${this.queueActionLabels[action] ?? fallback[action]} - ${card.item.title}`;
+    }
+    searchResultActionLabel(action, card) {
+        const fallback = {
+            play: this.playLabel,
+            queue: this.queueAddActiveLabel,
+            watchLater: this.watchLaterLabel,
+            favorite: this.likeLabel,
+            download: 'Download',
+        };
+        return `${this.searchActionLabels[action] ?? fallback[action]} - ${card.item.title}`;
+    }
+    canMoveQueueItem(card, direction) {
+        if (!this.hasManagedQueue)
+            return false;
+        return direction === 'up' ? card.index > 0 : card.index < this.displayQueueItems.length - 1;
+    }
+    toggleRail() {
+        this.railExpanded = !this.railExpanded;
+    }
+    selectNav(item) {
+        if (item.disabled)
+            return;
+        this.navSelect.emit(item.id);
+    }
+    selectViewMode(mode) {
+        if (this.activeViewMode === mode)
+            return;
+        this.viewMode = mode;
+        this.viewModeChange.emit(mode);
+    }
+    selectSearchFilter(filter) {
+        if (filter.disabled || filter.active)
+            return;
+        this.searchFilterChange.emit(filter.id);
+    }
+    selectRuntimeMode(mode) {
+        if (this.runtimeMode === mode)
+            return;
+        this.runtimeMode = mode;
+        this.runtimeModeChange.emit(mode);
+    }
+    onPrimarySourceAction() {
+        if (this.isOfflineMode) {
+            this.openSource.emit();
+            return;
+        }
+        this.toolSelect.emit('online-catalog');
+    }
+    playlistDraftName = '';
+    playlistRenameDraft = '';
+    renamingPlaylistId = null;
+    serverKindDraft = '';
+    serverAddressDraft = '';
+    serverUsernameDraft = '';
+    serverPasswordDraft = '';
+    selectedServerKind(form) {
+        const id = this.serverKindDraft || form.kinds?.[0]?.id;
+        return form.kinds?.find((kind) => kind.id === id);
+    }
+    onServerKindChange(event) {
+        this.serverKindDraft = event.target?.value ?? '';
+    }
+    onServerAddressInput(event) {
+        this.serverAddressDraft = event.target?.value ?? '';
+    }
+    onServerUsernameInput(event) {
+        this.serverUsernameDraft = event.target?.value ?? '';
+    }
+    onServerPasswordInput(event) {
+        this.serverPasswordDraft = event.target?.value ?? '';
+    }
+    submitServer(event) {
+        event.preventDefault();
+        const address = this.serverAddressDraft.trim();
+        if (!address)
+            return;
+        const kind = this.serverForm ? this.selectedServerKind(this.serverForm) : undefined;
+        const credentials = kind?.credentials !== false;
+        this.connectServer.emit({
+            ...(kind ? { kind: kind.id } : {}),
+            address,
+            username: credentials ? this.serverUsernameDraft.trim() : '',
+            password: credentials ? this.serverPasswordDraft : '',
+        });
+        // The password is handed over once and never kept in the form.
+        this.serverPasswordDraft = '';
+    }
+    onPlaylistDraftInput(event) {
+        this.playlistDraftName = event.target?.value ?? '';
+    }
+    submitCreatePlaylist(event) {
+        event.preventDefault();
+        const name = this.playlistDraftName.trim();
+        if (!name)
+            return;
+        this.createPlaylist.emit(name);
+        this.playlistDraftName = '';
+    }
+    startRenamePlaylist(list) {
+        this.renamingPlaylistId = list.id;
+        this.playlistRenameDraft = list.name;
+    }
+    onPlaylistRenameInput(event) {
+        this.playlistRenameDraft = event.target?.value ?? '';
+    }
+    submitRenamePlaylist(event) {
+        event.preventDefault();
+        const name = this.playlistRenameDraft.trim();
+        if (!name || !this.renamingPlaylistId)
+            return;
+        this.renamePlaylist.emit({ id: this.renamingPlaylistId, name });
+        this.cancelRenamePlaylist();
+    }
+    cancelRenamePlaylist() {
+        this.renamingPlaylistId = null;
+        this.playlistRenameDraft = '';
+    }
+    selectCard(card) {
+        if (this.isSyntheticSection(card.sectionId)) {
+            this.toolSelect.emit(card.item.id);
+            return;
+        }
+        if (card.sectionId === CONTINUE_SECTION_ID) {
+            this.selectContinueWatching.emit(card.item.id);
+            return;
+        }
+        this.selectSectionItem.emit({ sectionId: card.sectionId, itemId: card.item.id });
+    }
+    selectMediaChapter(chapter) {
+        const timeSec = this.chapterTimeSec(chapter);
+        if (this.smartPlayer && Number.isFinite(timeSec) && timeSec >= 0) {
+            this.smartPlayer.seekTo(timeSec);
+            this.chapterSeek.emit({ id: chapter.id, timeSec });
+        }
+        this.detailAction.emit(chapter.actionId || chapter.id);
+    }
+    chapterTimeSec(chapter) {
+        const explicit = Number(chapter.timeSec);
+        if (Number.isFinite(explicit) && explicit >= 0)
+            return explicit;
+        return this.timeLabelToSeconds(chapter.time);
+    }
+    timeLabelToSeconds(value) {
+        if (!value)
+            return Number.NaN;
+        const parts = value.trim().split(':').map((part) => Number(part));
+        if (parts.some((part) => !Number.isFinite(part) || part < 0))
+            return Number.NaN;
+        if (parts.length === 2)
+            return (parts[0] * 60) + parts[1];
+        if (parts.length === 3)
+            return (parts[0] * 3600) + (parts[1] * 60) + parts[2];
+        return Number.NaN;
+    }
+    isSyntheticSection(sectionId) {
+        return sectionId === FALLBACK_SECTION_ID;
+    }
+    get itemCount() {
+        return this.sections.reduce((total, section) => total + section.items.length, 0);
+    }
+    get fallbackCards() {
+        return this.isOfflineMode ? OFFLINE_VIDEO_CARDS : ONLINE_VIDEO_CARDS;
+    }
+    get activeCard() {
+        return [...this.displayQueueItems, ...this.railItems, ...this.featuredItems].find((card) => card.item.active);
+    }
+    toRefs(sectionId, items) {
+        return items.map((item, index) => ({ sectionId, item, index }));
+    }
+    toggleSearch() {
+        this.searchOpen = !this.searchOpen;
+        this.search.emit();
+    }
+    clearSearch() {
+        this.searchOpen = false;
+        this.searchFilterChange.emit('all');
+        if (this.searchTerm)
+            this.searchTermChange.emit('');
+    }
+    onSearchInput(event) {
+        this.searchTermChange.emit(event.target.value);
+    }
+    togglePrimaryPlayback() {
+        if (this.config && this.showPosterPreview) {
+            this.posterPreviewDismissed = true;
+            this.cdr.detectChanges();
+            this.setOutputVolumePercent(this.outputVolume);
+            this.primaryPlaybackToggle.emit('play');
+            this.cdr.markForCheck();
+            return;
+        }
+        if (this.config && this.smartPlayer) {
+            const intent = this.isPlaying ? 'pause' : 'play';
+            this.smartPlayer.togglePlay();
+            this.primaryPlaybackToggle.emit(intent);
+            return;
+        }
+        this.primaryPlay.emit();
+    }
+    toggleMiniPlayerPlayback() {
+        this.togglePrimaryPlayback();
+    }
+    /**
+     * How far the area is scrolled. A host that moves between views reads it before leaving one, so coming back
+     * can put the viewer where they were rather than at the top of a list they had already walked down. On a
+     * narrow layout the page scrolls instead of the panel, so whichever one moved is the one reported.
+     */
+    contentScrollTop() {
+        const panel = this.contentScroll?.nativeElement;
+        if (panel && panel.scrollTop > 0)
+            return panel.scrollTop;
+        return this.document.defaultView?.scrollY ?? 0;
+    }
+    /** Puts the area back where it was, or at the top with 0 on entering a view for the first time. */
+    setContentScrollTop(value) {
+        const top = Number.isFinite(value) && value > 0 ? value : 0;
+        const panel = this.contentScroll?.nativeElement;
+        // After the new view's rows exist, otherwise there is nothing tall enough to scroll through yet.
+        requestAnimationFrame(() => {
+            if (panel)
+                panel.scrollTop = top;
+            this.document.defaultView?.scrollTo({ top, behavior: 'auto' });
+        });
+    }
+    /** Moves the playhead, for a host driven from outside the page: a lock screen scrubber, a remote, another device. */
+    seekTo(timeSec) {
+        if (Number.isFinite(timeSec) && timeSec >= 0)
+            this.smartPlayer?.seekTo(timeSec);
+    }
+    setOutputVolumePercent(value) {
+        this.smartPlayer?.setOutputVolume(this.normalizeOutputVolume(value) / 100);
+    }
+    onOutputVolumeRatioChange(value) {
+        const nextVolume = this.normalizeOutputVolume(value * 100);
+        this.setOutputVolumePercent(nextVolume);
+        this.outputVolumeChange.emit(nextVolume);
+    }
+    openSourcePicker() {
+        this.videoFileInput?.nativeElement.click();
+    }
+    onSourceFileInput(event) {
+        const input = event.target;
+        const file = input?.files?.[0];
+        if (file)
+            this.sourceFileChange.emit(file);
+        if (input) {
+            input.value = '';
+            input.blur();
+        }
+    }
+    onFileDragEnter(event) {
+        if (!this.dragHasFiles(event))
+            return;
+        event.preventDefault();
+        this.fileDragDepth += 1;
+        this.fileDragActive = true;
+        this.cdr.markForCheck();
+    }
+    onFileDragOver(event) {
+        if (!this.dragHasFiles(event))
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+    }
+    onFileDragLeave(event) {
+        if (!this.dragHasFiles(event))
+            return;
+        event.preventDefault();
+        this.fileDragDepth = Math.max(0, this.fileDragDepth - 1);
+        if (this.fileDragDepth === 0)
+            this.fileDragActive = false;
+        this.cdr.markForCheck();
+    }
+    onFileDrop(event) {
+        if (!this.dragHasFiles(event))
+            return;
+        event.preventDefault();
+        this.fileDragDepth = 0;
+        this.fileDragActive = false;
+        const file = event.dataTransfer?.files?.[0];
+        if (file)
+            this.sourceFileChange.emit(file);
+        this.cdr.markForCheck();
+    }
+    onPlayerStateChange(state) {
+        this.playerState = state;
+        // The offer stays a few seconds of playback, then goes: resuming is what happens when nothing is chosen.
+        if (this.resumePromptShown && state.kind === 'playing' && !this.resumePromptTimer) {
+            this.resumePromptTimer = setTimeout(() => this.closeResumePrompt(), RESUME_PROMPT_MS);
+        }
+        this.playerStateChange.emit(state);
+        this.cdr.markForCheck();
+    }
+    posterInitial(title) {
+        return (title.trim().charAt(0) || 'V').toUpperCase();
+    }
+    mediaCardMeta(card) {
+        const values = [
+            card.kindLabel ?? '',
+            card.parentTitle ?? '',
+            card.seasonLabel ?? '',
+            card.releaseYear ?? '',
+            card.meta ?? '',
+            card.duration ?? '',
+        ].filter(Boolean);
+        return [...new Set(values)].join(' | ');
+    }
+    /** What a finger is changing right now, and where it stands. Null when nothing is being changed. */
+    touchAdjusting = null;
+    touchStart = null;
+    /** A drag is not a click: the one that follows it is swallowed rather than reaching a control. */
+    swallowNextClick = false;
+    /** How far the picture has to be crossed to go from nothing to everything. */
+    static TOUCH_TRAVEL = 0.6;
+    static TOUCH_THRESHOLD = 12;
+    static MIN_BRIGHTNESS = 10;
+    /**
+     * A gesture starts on the picture, never on something built to be pressed: a button, a slider,
+     * a menu. Those keep the events that belong to them.
+     */
+    onFramePointerDown(event) {
+        this.touchStart = null;
+        if (!this.touchAdjust || !this.config)
+            return;
+        const target = event.target;
+        if (target?.closest('button, input, select, a, [role="slider"], [role="menu"], [role="menuitem"]'))
+            return;
+        const frame = event.currentTarget;
+        const box = frame.getBoundingClientRect();
+        if (box.width <= 0)
+            return;
+        this.touchStart = {
+            x: event.clientX,
+            y: event.clientY,
+            kind: event.clientX - box.left < box.width / 2 ? 'brightness' : 'volume',
+            from: 0,
+            pointerId: event.pointerId,
+        };
+    }
+    /**
+     * Nothing happens until the finger has travelled further down than across: a tap stays a tap,
+     * and a sideways drag is somebody else's gesture.
+     */
+    onFramePointerMove(event) {
+        const start = this.touchStart;
+        if (!start || event.pointerId !== start.pointerId)
+            return;
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        if (!this.touchAdjusting) {
+            if (Math.abs(dy) < NgxSmartPlayerVideoUiComponent.TOUCH_THRESHOLD || Math.abs(dy) <= Math.abs(dx))
+                return;
+            start.from = start.kind === 'brightness' ? this.brightness : this.outputVolume;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            this.swallowNextClick = true;
+        }
+        event.preventDefault();
+        const box = event.currentTarget.getBoundingClientRect();
+        const travel = Math.max(1, box.height * NgxSmartPlayerVideoUiComponent.TOUCH_TRAVEL);
+        // Up is more, which is the way every other player and every phone has taught it.
+        const floor = start.kind === 'brightness' ? NgxSmartPlayerVideoUiComponent.MIN_BRIGHTNESS : 0;
+        const raw = start.from - (dy / travel) * 100;
+        const value = Math.round(Math.max(floor, Math.min(100, raw)));
+        this.touchAdjusting = { kind: start.kind, value };
+        if (start.kind === 'brightness') {
+            this.brightness = value;
+            this.brightnessChange.emit(value);
+        }
+        else {
+            this.setOutputVolumePercent(value);
+            this.outputVolume = value;
+            this.outputVolumeChange.emit(value);
+        }
+    }
+    onFramePointerUp(event) {
+        if (this.touchStart && event.pointerId === this.touchStart.pointerId) {
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        }
+        if (this.swallowNextClick) {
+            this.swallowNextClick = false;
+            this.swallowTheClickThatEndsADrag();
+        }
+        this.touchStart = null;
+        this.touchAdjusting = null;
+    }
+    /**
+     * Le clic qui clôt un glissement mettrait sinon en pause la vidéo dont le glissement ne
+     * parlait pas. Posé ici plutôt que dans le gabarit : avaler un clic n'est pas une interaction,
+     * et en capture il est arrêté avant d'atteindre la moindre commande.
+     */
+    swallowTheClickThatEndsADrag() {
+        const view = this.document.defaultView;
+        if (!view)
+            return;
+        const swallow = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        view.addEventListener('click', swallow, { capture: true, once: true });
+        // Rendu au bout d'un tour : un glissement qui ne produit aucun clic ne doit pas manger
+        // le clic suivant, qui serait celui de quelqu'un d'autre.
+        queueMicrotask(() => view.removeEventListener('click', swallow, { capture: true }));
+    }
+    /** The card menu while it is open: which card, and where the gesture put it. */
+    cardMenu = null;
+    /**
+     * Opens a card's own menu where the gesture happened — a right click, or the button that
+     * appears on the card — and keeps it inside the window rather than off its edge.
+     */
+    openCardMenu(event, card) {
+        if (!card.actions?.length)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const width = 280;
+        const height = 60 + card.actions.length * 36;
+        const view = this.document.defaultView;
+        const maxX = (view?.innerWidth ?? width) - width - 8;
+        const maxY = (view?.innerHeight ?? height) - height - 8;
+        this.cardMenu = {
+            card,
+            x: Math.max(8, Math.min(event.clientX, Math.max(8, maxX))),
+            y: Math.max(8, Math.min(event.clientY, Math.max(8, maxY))),
+        };
+        // Le menu prend le focus : sans cela, Échap ne lui parvenait jamais après un clic droit,
+        // et il n'y avait aucun moyen d'en sortir au clavier.
+        queueMicrotask(() => this.cardMenuBox?.nativeElement.focus());
+    }
+    closeCardMenu() {
+        this.cardMenu = null;
+    }
+    chooseCardAction(action) {
+        const card = this.cardMenu?.card;
+        this.closeCardMenu();
+        if (card)
+            this.cardAction.emit({ actionId: action.id, cardId: card.id });
+    }
+    /** Whether the strip is waiting for an answer rather than reporting: both ways out have a name. */
+    get promptAsking() {
+        const prompt = this.promptBar;
+        return !!prompt?.confirmLabel && !!prompt?.cancelLabel;
+    }
+    safeProgressPercent(value) {
+        if (!Number.isFinite(value))
+            return 0;
+        return Math.max(0, Math.min(100, value));
+    }
+    artVariant(card) {
+        const variants = ['aurora', 'orbit', 'ember', 'ridge', 'signal', 'fog'];
+        const seed = `${card.sectionId}:${card.item.id}:${card.item.title}`;
+        let hash = 0;
+        for (let i = 0; i < seed.length; i += 1) {
+            hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+        }
+        return variants[hash % variants.length];
+    }
+    normalizeOutputVolume(value) {
+        return Math.max(0, Math.min(100, Math.round(Number.isFinite(value) ? value : this.outputVolume)));
+    }
+    dragHasFiles(event) {
+        return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NgxSmartPlayerVideoUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: NgxSmartPlayerVideoUiComponent, isStandalone: true, selector: "ngxsp-video-player-ui", inputs: { config: "config", brandLogoSrc: "brandLogoSrc", plugins: "plugins", ports: "ports", engines: "engines", debug: "debug", startTimeSec: "startTimeSec", playRequest: "playRequest", canPrev: "canPrev", canNext: "canNext", previousLabel: "previousLabel", playerBackLabel: "playerBackLabel", nextLabel: "nextLabel", playLabel: "playLabel", pauseLabel: "pauseLabel", transportLabel: "transportLabel", cinemaMode: "cinemaMode", cinemaLabel: "cinemaLabel", cinemaActiveLabel: "cinemaActiveLabel", shuffleActive: "shuffleActive", shuffleLabel: "shuffleLabel", repeatMode: "repeatMode", repeatLabel: "repeatLabel", hasPlaylistControls: "hasPlaylistControls", castEnabled: "castEnabled", castConnected: "castConnected", resumeOffer: "resumeOffer", infoTabs: "infoTabs", infoLabel: "infoLabel", infoPanel: "infoPanel", playerMenuLabels: "playerMenuLabels", heroEyebrow: "heroEyebrow", heroTitle: "heroTitle", heroSubtitle: "heroSubtitle", heroMeta: "heroMeta", heroArtworkUrl: "heroArtworkUrl", preferPosterPreview: "preferPosterPreview", runtimeModeLabel: "runtimeModeLabel", onlineLabel: "onlineLabel", offlineLabel: "offlineLabel", navigationLabel: "navigationLabel", menuLabel: "menuLabel", searchPlaceholder: "searchPlaceholder", searchLabel: "searchLabel", searchResultsTitle: "searchResultsTitle", searchResultsSummary: "searchResultsSummary", searchResultsEmptyTitle: "searchResultsEmptyTitle", searchResultsEmptyBody: "searchResultsEmptyBody", searchClearLabel: "searchClearLabel", searchFilterLabel: "searchFilterLabel", searchFilters: "searchFilters", searchActionLabels: "searchActionLabels", notificationsLabel: "notificationsLabel", settingsLabel: "settingsLabel", sourceChangeLabel: "sourceChangeLabel", sourceChangeTitle: "sourceChangeTitle", sourceDropTitle: "sourceDropTitle", sourceDropHint: "sourceDropHint", sourceChangeAccept: "sourceChangeAccept", folderImportLabel: "folderImportLabel", libraryStatus: "libraryStatus", touchAdjust: "touchAdjust", brightness: "brightness", cardActionsLabel: "cardActionsLabel", cardMenuCloseLabel: "cardMenuCloseLabel", promptBar: "promptBar", libraryBusy: "libraryBusy", sourceTypeLocalLabel: "sourceTypeLocalLabel", sourceTypeStreamLabel: "sourceTypeStreamLabel", languageLabel: "languageLabel", activeLanguage: "activeLanguage", languageOptions: "languageOptions", statusMessage: "statusMessage", statusKind: "statusKind", likeLabel: "likeLabel", likeActive: "likeActive", dislikeLabel: "dislikeLabel", shareLabel: "shareLabel", watchLaterLabel: "watchLaterLabel", watchLaterActive: "watchLaterActive", queueActionLabel: "queueActionLabel", queueShortLabel: "queueShortLabel", queueAddActiveLabel: "queueAddActiveLabel", queueAddActiveShortLabel: "queueAddActiveShortLabel", queueActionLabels: "queueActionLabels", moreLabel: "moreLabel", moreShortLabel: "moreShortLabel", browseLibraryLabel: "browseLibraryLabel", trail: "trail", trailLabel: "trailLabel", showAllLabel: "showAllLabel", showLessLabel: "showLessLabel", emptyCatalogLabel: "emptyCatalogLabel", continueWatchingMeta: "continueWatchingMeta", continueWatching: "continueWatching", managedQueue: "managedQueue", upNextItems: "upNextItems", playlistPanel: "playlistPanel", serverForm: "serverForm", showResumeProgress: "showResumeProgress", mediaDetail: "mediaDetail", sidePanelTitle: "sidePanelTitle", sidePanelMeta: "sidePanelMeta", sections: "sections", navItems: "navItems", toolCards: "toolCards", inspectorPanel: "inspectorPanel", inspectorPanels: "inspectorPanels", inspectorCloseLabel: "inspectorCloseLabel", libraryVisible: "libraryVisible", playerView: "playerView", watchActionsInPlayer: "watchActionsInPlayer", showActiveMedia: "showActiveMedia", closeLabel: "closeLabel", queueVisible: "queueVisible", sidePanelContent: "sidePanelContent", sideBackLabel: "sideBackLabel", searchTerm: "searchTerm", runtimeMode: "runtimeMode", runtimeModeInHeader: "runtimeModeInHeader", activeViewMode: "activeViewMode", libraryTitle: "libraryTitle", nowPlayingLabel: "nowPlayingLabel", fullscreenHintLabel: "fullscreenHintLabel", fullscreenLabel: "fullscreenLabel", readyStatusLabel: "readyStatusLabel", playingStatusLabel: "playingStatusLabel", pausedStatusLabel: "pausedStatusLabel", bufferingStatusLabel: "bufferingStatusLabel", loadingStatusLabel: "loadingStatusLabel", endedStatusLabel: "endedStatusLabel", errorStatusLabel: "errorStatusLabel", miniPlayerVisible: "miniPlayerVisible", miniPlayerMeta: "miniPlayerMeta", miniPlayerPlayLabel: "miniPlayerPlayLabel", miniPlayerPauseLabel: "miniPlayerPauseLabel", miniPlayerFocusLabel: "miniPlayerFocusLabel", miniPlayerCloseLabel: "miniPlayerCloseLabel", miniPlayerRestoreLabel: "miniPlayerRestoreLabel", outputVolume: "outputVolume", outputVolumeLabel: "outputVolumeLabel", outputMuteLabel: "outputMuteLabel", outputUnmuteLabel: "outputUnmuteLabel", compactMode: "compactMode", compactModes: "compactModes", menuLayout: "menuLayout", compactMiniLabel: "compactMiniLabel", compactRestoreLabel: "compactRestoreLabel", revealFileLabel: "revealFileLabel" }, outputs: { brightnessChange: "brightnessChange", cardAction: "cardAction", promptAnswer: "promptAnswer", ended: "ended", videoSize: "videoSize", progress: "progress", compactModeChange: "compactModeChange", revealFile: "revealFile", prev: "prev", next: "next", toggleShuffle: "toggleShuffle", cycleRepeat: "cycleRepeat", cast: "cast", infoToggle: "infoToggle", sideBack: "sideBack", playerBack: "playerBack", resumeChoice: "resumeChoice", infoTabSelect: "infoTabSelect", subtitlesLoaded: "subtitlesLoaded", selectContinueWatching: "selectContinueWatching", selectSectionItem: "selectSectionItem", selectDetailEpisode: "selectDetailEpisode", chapterSeek: "chapterSeek", navSelect: "navSelect", toolSelect: "toolSelect", detailAction: "detailAction", inspectorAction: "inspectorAction", settingChange: "settingChange", settingAction: "settingAction", closeInspector: "closeInspector", panelClosed: "panelClosed", openSource: "openSource", toggleLibrary: "toggleLibrary", trailStep: "trailStep", toggleQueue: "toggleQueue", toggleCinema: "toggleCinema", miniPlayerFocus: "miniPlayerFocus", miniPlayerClose: "miniPlayerClose", miniPlayerRestore: "miniPlayerRestore", queueAddActive: "queueAddActive", connectServer: "connectServer", discoverServers: "discoverServers", connectDiscoveredServer: "connectDiscoveredServer", selectServer: "selectServer", disconnectServer: "disconnectServer", createPlaylist: "createPlaylist", selectPlaylist: "selectPlaylist", addToPlaylist: "addToPlaylist", removeFromPlaylist: "removeFromPlaylist", renamePlaylist: "renamePlaylist", deletePlaylist: "deletePlaylist", watchLaterToggle: "watchLaterToggle", queueMoveUp: "queueMoveUp", queueMoveDown: "queueMoveDown", queueRemove: "queueRemove", searchFilterChange: "searchFilterChange", searchResultQueueAdd: "searchResultQueueAdd", searchResultWatchLater: "searchResultWatchLater", searchResultFavorite: "searchResultFavorite", searchResultDownload: "searchResultDownload", search: "search", searchTermChange: "searchTermChange", viewModeChange: "viewModeChange", runtimeModeChange: "runtimeModeChange", primaryPlay: "primaryPlay", primaryPlaybackToggle: "primaryPlaybackToggle", playerStateChange: "playerStateChange", sourceFileChange: "sourceFileChange", addFolder: "addFolder", languageChange: "languageChange", outputVolumeChange: "outputVolumeChange", outputMuteToggle: "outputMuteToggle" }, viewQueries: [{ propertyName: "cardMenuBox", first: true, predicate: ["cardMenuBox"], descendants: true }, { propertyName: "smartPlayer", first: true, predicate: SmartPlayerComponent, descendants: true }, { propertyName: "contentScroll", first: true, predicate: ["contentScroll"], descendants: true }, { propertyName: "queueListEl", first: true, predicate: ["queueList"], descendants: true }, { propertyName: "videoFileInput", first: true, predicate: ["videoFileInput"], descendants: true }, { propertyName: "queuePanel", first: true, predicate: ["queuePanel"], descendants: true }], ngImport: i0, template: `
+    <section
+      class="ngxsp-yt-shell"
+      [class.ngxsp-yt-online]="runtimeMode === 'online'"
+      [class.ngxsp-yt-offline]="runtimeMode === 'offline'"
+      [class.ngxsp-yt-playing]="isPlaying"
+      [class.ngxsp-yt-playerView]="playerView"
+      [class.ngxsp-yt-cinema]="cinemaMode"
+      [class.ngxsp-has-source]="!!config"
+      [class.ngxsp-queue-hidden]="!queueVisible"
+      [class.ngxsp-mini-hidden]="!miniPlayerVisible"
+      [class.ngxsp-yt-dragActive]="fileDragActive"
+      [class.ngxsp-yt-library-focus]="isLibraryFocused"
+      [class.ngxsp-yt-menuRow]="menuLayout === 'horizontal'"
+      [class.ngxsp-yt-menuOff]="menuLayout === 'hidden'"
+      [class.ngxsp-yt-railExpanded]="railExpanded"
+      [class.ngxsp-yt-compact]="compactMode === 'mini'"
+      (dragenter)="onFileDragEnter($event)"
+      (dragover)="onFileDragOver($event)"
+      (dragleave)="onFileDragLeave($event)"
+      (drop)="onFileDrop($event)"
+    >
+      @if (fileDragActive) {
+      <div class="ngxsp-yt-dropOverlay" aria-hidden="true">
+        <span class="ngxsp-yt-dropIcon"><ngxsp-smart-icon name="folder" /></span>
+        <strong>{{ sourceDropTitle || sourceChangeTitle || sourceChangeLabel }}</strong>
+        @if (sourceDropHint) {
+        <span>{{ sourceDropHint }}</span>
+        }
+      </div>
+      }
+
+      @if (promptBar) {
+      <div class="ngxsp-yt-convert" [class.asking]="promptAsking" [class.danger]="!!promptBar.danger" [attr.role]="promptAsking ? 'alertdialog' : 'status'" aria-live="polite">
+        <span class="ngxsp-yt-convertIcon" aria-hidden="true"><ngxsp-smart-icon [name]="promptBar.danger ? 'trash' : 'download'" /></span>
+        <span class="ngxsp-yt-convertText">
+          <strong>{{ promptBar.message }}</strong>
+          @if (promptBar.hint) { <small>{{ promptBar.hint }}</small> }
+          @if (promptBar.percent !== undefined) {
+          <em role="progressbar" [attr.aria-valuenow]="safeProgressPercent(promptBar.percent)" aria-valuemin="0" aria-valuemax="100">
+            <i [style.width.%]="safeProgressPercent(promptBar.percent)"></i>
+          </em>
+          }
+        </span>
+        @if (promptAsking) {
+        <span class="ngxsp-yt-convertActions">
+          <button type="button" class="keep" (click)="promptAnswer.emit(true)">{{ promptBar.confirmLabel }}</button>
+          <button type="button" (click)="promptAnswer.emit(false)">{{ promptBar.cancelLabel }}</button>
+        </span>
+        }
+      </div>
+      }
+
+      @if (cardMenu) {
+      <button
+        class="ngxsp-yt-cardMenuScrim"
+        type="button"
+        [attr.aria-label]="cardMenuCloseLabel"
+        (click)="closeCardMenu()"
+        (contextmenu)="$event.preventDefault(); closeCardMenu()"
+      ></button>
+      <div
+        #cardMenuBox
+        class="ngxsp-yt-cardMenu"
+        role="menu"
+        tabindex="-1"
+        [attr.aria-label]="cardMenu.card.title"
+        [style.left.px]="cardMenu.x"
+        [style.top.px]="cardMenu.y"
+        (keydown.escape)="closeCardMenu()"
+      >
+        <strong class="ngxsp-yt-cardMenuTitle">{{ cardMenu.card.title }}</strong>
+        @for (action of cardMenu.card.actions; track action.id) {
+        <button type="button" role="menuitem" [class.danger]="!!action.danger" (click)="chooseCardAction(action)">
+          <ngxsp-smart-icon [name]="action.icon" />
+          <span>{{ action.label }}</span>
+        </button>
+        }
+      </div>
+      }
+
+      <header class="ngxsp-yt-topbar" data-tauri-drag-region>
+        <div class="ngxsp-yt-brand">
+          <button class="ngxsp-yt-railMenu" type="button" [attr.aria-expanded]="railExpanded" [attr.aria-label]="menuLabel" [title]="menuLabel" (click)="toggleRail()">
+            <ngxsp-smart-icon name="menu" />
+          </button>
+          @if (brandLogoSrc) {
+          <img class="ngxsp-yt-brandLogo" [src]="brandLogoSrc" alt="" width="26" height="26" />
+          } @else {
+          <span class="ngxsp-yt-brandIcon" aria-hidden="true"><ngxsp-smart-icon name="play" /></span>
+          }
+          <strong>NGXSP Video</strong>
+        </div>
+
+        <label class="ngxsp-yt-search">
+          <ngxsp-smart-icon name="search" />
+          <input type="search" [placeholder]="searchPlaceholder" [value]="searchTerm" (input)="onSearchInput($event)" (focus)="searchOpen = true" [attr.aria-label]="searchLabel" />
+        </label>
+
+        <div class="ngxsp-yt-actions">
+          @if (statusMessage) {
+          <span class="ngxsp-yt-status" [class.success]="statusKind === 'success'" [class.error]="statusKind === 'error'" [attr.role]="statusKind === 'error' ? 'alert' : 'status'" [attr.aria-live]="statusKind === 'error' ? 'assertive' : 'polite'" aria-atomic="true" [title]="statusMessage">
+            {{ statusMessage }}
+          </span>
+          }
+          @if (runtimeModeInHeader) {
+          <div class="ngxsp-yt-mode" role="group" [attr.aria-label]="runtimeModeLabel">
+            <button type="button" [class.active]="runtimeMode === 'online'" [attr.aria-pressed]="runtimeMode === 'online'" (click)="selectRuntimeMode('online')"><i aria-hidden="true"></i>{{ onlineLabel }}</button>
+            <button type="button" [class.active]="runtimeMode === 'offline'" [attr.aria-pressed]="runtimeMode === 'offline'" (click)="selectRuntimeMode('offline')"><i aria-hidden="true"></i>{{ offlineLabel }}</button>
+          </div>
+          }
+          @if (folderImportLabel) {
+          <!-- A folder is what builds the library; picking a single file next to it led nowhere. -->
+          <button class="ngxsp-yt-sourceButton" type="button" [disabled]="libraryBusy" [attr.aria-label]="folderImportLabel" [title]="folderImportLabel" (click)="addFolder.emit()">
+            <ngxsp-smart-icon name="folder" />
+            <span>{{ folderImportLabel }}</span>
+          </button>
+          } @else {
+          <button class="ngxsp-yt-sourceButton" type="button" [attr.aria-label]="sourceChangeTitle || sourceChangeLabel" [title]="sourceChangeTitle || sourceChangeLabel" (click)="videoFileInput.click()">
+            <ngxsp-smart-icon name="folder" />
+            <span>{{ sourceChangeLabel }}</span>
+          </button>
+          }
+          <input #videoFileInput class="ngxsp-yt-fileInput" type="file" [accept]="sourceChangeAccept" aria-hidden="true" tabindex="-1" (change)="onSourceFileInput($event)" />
+          @if (languageOptions.length) {
+          <div class="ngxsp-yt-languageSwitch" role="group" [attr.aria-label]="languageLabel">
+            @for (language of languageOptions; track language.id) {
+            <button type="button" [class.active]="language.id === activeLanguage" [attr.aria-pressed]="language.id === activeLanguage" (click)="languageChange.emit(language.id)">
+              {{ language.label }}
+            </button>
+            }
+          </div>
+          }
+          @if (compactModes && compactMode === 'full') {
+          <button class="ngxsp-yt-round ngxsp-yt-windowButton" type="button" [attr.aria-label]="compactMiniLabel" [title]="compactMiniLabel" (click)="compactModeChange.emit('mini')">
+            <ngxsp-smart-icon name="window-mini" />
+          </button>
+          }
+          <button class="ngxsp-yt-round ngxsp-yt-queueButton" type="button" [class.active]="queuePanelActive" [attr.aria-pressed]="queuePanelActive" [attr.aria-label]="queueActionLabel" [title]="queueActionLabel" (click)="onQueueAction()">
+            <ngxsp-smart-icon name="panel-right" />
+          </button>
+          <button class="ngxsp-yt-round ngxsp-yt-notificationsButton" type="button" [attr.aria-label]="notificationsLabel" [title]="notificationsLabel" (click)="toolSelect.emit('notifications')">
+            <ngxsp-smart-icon name="bell" />
+          </button>
+          <button class="ngxsp-yt-round" type="button" [attr.aria-label]="settingsLabel" [title]="settingsLabel" (click)="toolSelect.emit('settings')">
+            <ngxsp-smart-icon name="settings" />
+          </button>
+        </div>
+      </header>
+
+      <aside class="ngxsp-yt-rail" [attr.aria-label]="navigationLabel">
+        @for (item of navItems; track item.id) {
+        <button class="ngxsp-yt-railButton" type="button" [class.active]="item.active" [disabled]="item.disabled" [attr.aria-current]="item.active ? 'page' : null" [attr.aria-label]="item.label" [title]="item.label" (click)="selectNav(item)">
+          <ngxsp-smart-icon [name]="item.icon" />
+          <span>{{ item.label }}</span>
+        </button>
+        }
+      </aside>
+
+      <div class="ngxsp-yt-body" [class.ngxsp-yt-playing]="playerView" [class.ngxsp-yt-sources]="!showActiveMedia" [class.ngxsp-yt-hasInfoTabs]="infoTabs.length > 0" [class.ngxsp-yt-sectionsBeside]="sidePanelContent === 'sections' && queueVisible">
+        <section #contentScroll class="ngxsp-yt-watch" [class.player]="playerView" [attr.aria-label]="displayHeroTitle">
+          <!-- Watching: the player has the whole area. Browsing: the area belongs to the view being read. -->
+          @if (playerView) {
+          <section class="ngxsp-yt-playerShell">
+            @if (playerView) {
+            <button class="ngxsp-yt-playerBack" type="button" [attr.aria-label]="playerBackLabel" [title]="playerBackLabel" (click)="playerBack.emit()">
+              <ngxsp-smart-icon name="chevron-left" />
+              <span>{{ playerBackLabel }}</span>
+            </button>
+            }
+            <div
+              class="ngxsp-yt-playerFrame"
+              [class.empty]="!config"
+              [class.ngxsp-yt-infoOpen]="!!infoPanel"
+              (pointerdown)="onFramePointerDown($event)"
+              (pointermove)="onFramePointerMove($event)"
+              (pointerup)="onFramePointerUp($event)"
+              (pointercancel)="onFramePointerUp($event)"
+            >
+              @if (brightness < 100) {
+              <span class="ngxsp-yt-veil" aria-hidden="true" [style.opacity]="(100 - brightness) / 100"></span>
+              }
+              @if (touchAdjusting; as adjusting) {
+              <span class="ngxsp-yt-touchBadge" role="status" aria-live="polite">
+                <ngxsp-smart-icon [name]="adjusting.kind === 'brightness' ? 'spark' : adjusting.value === 0 ? 'volume-mute' : adjusting.value < 50 ? 'volume-low' : 'volume-high'" />
+                <strong>{{ adjusting.value }}%</strong>
+                <em><i [style.width.%]="adjusting.value"></i></em>
+              </span>
+              }
+              @if (compactMode === 'mini') {
+              <!-- A mini window has no title bar: this strip moves it. -->
+              <div class="ngxsp-yt-compactDrag" aria-hidden="true"></div>
+              }
+              @if (showPosterPreview) {
+              <button class="ngxsp-yt-previewPlayer" type="button" [attr.aria-label]="playLabel + ' - ' + displayHeroTitle" (click)="togglePrimaryPlayback()">
+                <img [src]="displayHeroArtwork" alt="" />
+                <span class="ngxsp-yt-previewOverlay" aria-hidden="true">
+                  <span class="ngxsp-yt-previewPlay"><ngxsp-smart-icon name="play" /></span>
+                </span>
+              </button>
+              } @else if (config) {
+              <ngx-smart-player
+                [config]="config"
+                [plugins]="plugins"
+                [ports]="ports"
+                [engines]="engines"
+                [debug]="debug"
+                [startTimeSec]="startTimeSec"
+                [playRequest]="playRequest"
+                [canPrev]="canPrev"
+                [canNext]="canNext"
+                [previousLabel]="previousLabel"
+                [nextLabel]="nextLabel"
+                [playLabel]="playLabel"
+                [pauseLabel]="pauseLabel"
+                [shuffleActive]="shuffleActive"
+                [shuffleLabel]="shuffleLabel"
+                [repeatMode]="repeatMode"
+                [repeatLabel]="repeatLabel"
+                [hasPlaylistControls]="hasPlaylistControls"
+                [mediaMode]="'video'"
+                [castEnabled]="castEnabled"
+                [castConnected]="castConnected"
+                [menuLabels]="playerMenuLabels"
+                [documentShortcuts]="false"
+                [nowPlayingLabel]="nowPlayingLabel"
+                [fullscreenHintLabel]="fullscreenHintLabel"
+                [fullscreenLabel]="fullscreenLabel"
+                [readyStatusLabel]="readyStatusLabel"
+                [playingStatusLabel]="playingStatusLabel"
+                [pausedStatusLabel]="pausedStatusLabel"
+                [bufferingStatusLabel]="bufferingStatusLabel"
+                [loadingStatusLabel]="loadingStatusLabel"
+                [endedStatusLabel]="endedStatusLabel"
+                [errorStatusLabel]="errorStatusLabel"
+                [outputVolume]="outputVolume / 100"
+                [outputVolumeLabel]="outputVolumeLabel"
+                [outputMuteLabel]="outputMuteLabel"
+                [outputUnmuteLabel]="outputUnmuteLabel"
+                [timelineDurationSec]="timelineDurationSec"
+                [timelineMarkers]="timelineMarkers"
+                (ended)="ended.emit()"
+                (videoSize)="videoSize.emit($event)"
+                (progress)="progress.emit($event)"
+                (prev)="prev.emit()"
+                (next)="next.emit()"
+                (toggleShuffle)="toggleShuffle.emit()"
+                (cycleRepeat)="cycleRepeat.emit()"
+                (cast)="cast.emit()"
+                (subtitlesLoaded)="subtitlesLoaded.emit($event)"
+                (stateChange)="onPlayerStateChange($event)"
+                (playbackToggle)="primaryPlaybackToggle.emit($event)"
+                (outputVolumeChange)="onOutputVolumeRatioChange($event)"
+              >
+                <div ngxsp-player-inline-controls class="ngxsp-yt-playerInlineControls">
+                  <!-- What a viewer does about the video they are watching, without leaving it. -->
+                  @if (watchActionsInPlayer && compactMode !== 'mini') {
+                  <button class="ngxsp-yt-playerAction" type="button" [class.active]="likeActive" [attr.aria-pressed]="likeActive" [attr.aria-label]="likeLabel" [title]="likeLabel" (click)="toolSelect.emit('like')">
+                    <ngxsp-smart-icon name="thumb-up" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction" type="button" [class.active]="watchLaterActive" [attr.aria-pressed]="watchLaterActive" [attr.aria-label]="watchLaterLabel" [title]="watchLaterLabel" (click)="watchLaterToggle.emit()">
+                    <ngxsp-smart-icon name="clock" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="queueAddActiveLabel" [title]="queueAddActiveLabel" (click)="queueAddActive.emit()">
+                    <ngxsp-smart-icon name="playlist-plus" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="shareLabel" [title]="shareLabel" (click)="toolSelect.emit('share')">
+                    <ngxsp-smart-icon name="share" />
+                  </button>
+                  }
+                  @if (compactMode === 'mini') {
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="compactRestoreLabel" [title]="compactRestoreLabel" (click)="compactModeChange.emit('full')">
+                    <ngxsp-smart-icon name="window-restore" />
+                  </button>
+                  } @else if (compactModes) {
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="compactMiniLabel" [title]="compactMiniLabel" (click)="compactModeChange.emit('mini')">
+                    <ngxsp-smart-icon name="window-mini" />
+                  </button>
+                  }
+                  <button class="ngxsp-yt-playerAction" type="button" [class.active]="cinemaMode" [attr.aria-pressed]="cinemaMode" [attr.aria-label]="cinemaButtonLabel" [title]="cinemaButtonLabel" (click)="toggleCinema.emit()">
+                    <ngxsp-smart-icon [name]="cinemaMode ? 'cinema-active' : 'cinema'" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction ngxsp-yt-queueButton" type="button" [class.active]="queuePanelActive" [attr.aria-expanded]="queuePanelActive" [attr.aria-label]="queueActionLabel" [title]="queueActionLabel" (click)="onQueueAction()">
+                    <ngxsp-smart-icon name="panel-right" />
+                  </button>
+                  @if (infoTabs.length) {
+                  <button class="ngxsp-yt-playerAction ngxsp-yt-infoButton" type="button" [class.active]="!!infoPanel" [attr.aria-pressed]="!!infoPanel" [attr.aria-label]="infoLabel" [title]="infoLabel" (click)="infoToggle.emit()">
+                    <ngxsp-smart-icon name="info" />
+                  </button>
+                  }
+                </div>
+              </ngx-smart-player>
+              } @else {
+              <div class="ngxsp-yt-emptyPlayer">
+                <button class="ngxsp-yt-bigPlay" type="button" [attr.aria-label]="primarySourceLabel" (click)="isOfflineMode ? videoFileInput.click() : onPrimarySourceAction()">
+                  <ngxsp-smart-icon [name]="primarySourceIcon" />
+                </button>
+                <span>{{ emptyKicker }}</span>
+                <strong>{{ emptyTitle }}</strong>
+                <p>{{ emptyBody }}</p>
+              </div>
+              }
+              @if (resumePromptShown && resumeOffer && config && !showPosterPreview) {
+              <div class="ngxsp-yt-resumePrompt" role="group" [attr.aria-label]="resumeOffer.message">
+                <span>{{ resumeOffer.message }}</span>
+                <button class="primary" type="button" (click)="chooseResume('resume')">{{ resumeOffer.resumeLabel }}</button>
+                <button type="button" (click)="chooseResume('restart')">{{ resumeOffer.restartLabel }}</button>
+              </div>
+              }
+              @if (infoPanel; as panel) {
+              <!-- Info panels float over the right of the picture; on phones they open in the sheet instead. -->
+              <section class="ngxsp-yt-infoOverlay" [attr.aria-label]="panel.title">
+                <div class="ngxsp-yt-infoTabs" role="tablist" [attr.aria-label]="infoLabel">
+                  @for (tab of infoTabs; track tab.id) {
+                  <button type="button" role="tab" [class.active]="tab.id === panel.id" [attr.aria-selected]="tab.id === panel.id" [title]="tab.label" (click)="infoTabSelect.emit(tab.id)">
+                    <ngxsp-smart-icon [name]="tab.icon" />
+                    <span>{{ tab.label }}</span>
+                  </button>
+                  }
+                  <button class="ngxsp-yt-infoClose" type="button" [attr.aria-label]="inspectorCloseLabel" [title]="inspectorCloseLabel" (click)="closeInspector.emit()">
+                    <ngxsp-smart-icon name="close" />
+                  </button>
+                </div>
+                <div class="ngxsp-yt-infoHead" role="tabpanel">
+                  <strong>{{ panel.title }}</strong>
+                  @if (panel.subtitle) { <small>{{ panel.subtitle }}</small> }
+                </div>
+                <ng-container *ngTemplateOutlet="panelBody; context: { $implicit: panel }" />
+              </section>
+              }
+              @if (showPosterPreview || !config) {
+              <section class="ngxsp-yt-transportBar" [attr.aria-label]="transportLabel">
+                <div class="ngxsp-yt-transportCluster primary">
+                  <button class="ngxsp-yt-transportButton" type="button" [disabled]="!canPrev" [attr.aria-label]="previousLabel" [title]="previousLabel" (click)="prev.emit()">
+                    <ngxsp-smart-icon name="prev" />
+                  </button>
+                  <button class="ngxsp-yt-transportPlay" type="button" [attr.aria-label]="isPlaying ? pauseLabel : playLabel" [title]="isPlaying ? pauseLabel : playLabel" (click)="togglePrimaryPlayback()">
+                    @if (isPlaying) { <ngxsp-smart-icon name="pause" /> } @else { <ngxsp-smart-icon name="play" /> }
+                  </button>
+                  <button class="ngxsp-yt-transportButton" type="button" [disabled]="!canNext" [attr.aria-label]="nextLabel" [title]="nextLabel" (click)="next.emit()">
+                    <ngxsp-smart-icon name="next" />
+                  </button>
+                </div>
+                <div class="ngxsp-yt-transportInfo" aria-hidden="true">
+                  <span>{{ heroEyebrow }}</span>
+                  <strong>{{ displayHeroTitle }}</strong>
+                </div>
+                <div class="ngxsp-yt-transportCluster secondary">
+                  <button class="ngxsp-yt-transportButton" type="button" [class.active]="repeatMode !== 'off'" [attr.aria-pressed]="repeatMode !== 'off'" [attr.aria-label]="repeatLabel" [title]="repeatLabel" (click)="cycleRepeat.emit()">
+                    <ngxsp-smart-icon [name]="repeatMode === 'one' ? 'repeat-one' : 'repeat'" />
+                  </button>
+                  <ngxsp-volume-control
+                    class="ngxsp-yt-volumeControl"
+                    [volume]="outputVolume / 100"
+                    [step]="0.05"
+                    [volumeLabel]="outputVolumeLabel"
+                    [muteLabel]="outputMuteLabel"
+                    [unmuteLabel]="outputUnmuteLabel"
+                    (muteToggle)="outputMuteToggle.emit()"
+                    (volumeChange)="onOutputVolumeRatioChange($event)"
+                  />
+                  <button class="ngxsp-yt-transportButton ngxsp-yt-transportCinema" type="button" [class.active]="cinemaMode" [attr.aria-pressed]="cinemaMode" [attr.aria-label]="cinemaButtonLabel" [title]="cinemaButtonLabel" (click)="toggleCinema.emit()">
+                    <ngxsp-smart-icon [name]="cinemaMode ? 'cinema-active' : 'cinema'" />
+                  </button>
+                  <button class="ngxsp-yt-transportButton ngxsp-yt-queueButton" type="button" [class.active]="queuePanelActive" [attr.aria-expanded]="queuePanelActive" [attr.aria-label]="queueActionLabel" [title]="queueActionLabel" (click)="onQueueAction()">
+                    <ngxsp-smart-icon name="panel-right" />
+                  </button>
+                  @if (compactMode === 'mini') {
+                  <button class="ngxsp-yt-transportButton" type="button" [attr.aria-label]="compactRestoreLabel" [title]="compactRestoreLabel" (click)="compactModeChange.emit('full')">
+                    <ngxsp-smart-icon name="window-restore" />
+                  </button>
+                  } @else if (compactModes) {
+                  <button class="ngxsp-yt-transportButton" type="button" [attr.aria-label]="compactMiniLabel" [title]="compactMiniLabel" (click)="compactModeChange.emit('mini')">
+                    <ngxsp-smart-icon name="window-mini" />
+                  </button>
+                  }
+                </div>
+              </section>
+              }
+            </div>
+          </section>
+          } @else {
+
+          <!-- What is being watched. A home view opens on where videos come from instead. -->
+          @if (showActiveMedia) {
+          <section class="ngxsp-yt-metaBar">
+            <div class="ngxsp-yt-titleGroup" [attr.aria-label]="displayHeroTitle + ' - ' + displayHeroSubtitle">
+              <h1>{{ displayHeroTitle }}</h1>
+              @if (displayHeroSubtitle) { <p>{{ displayHeroSubtitle }}</p> }
+              @if (displayHeroMeta) { <small>{{ displayHeroMeta }}</small> }
+            </div>
+            <div class="ngxsp-yt-watchActions">
+              <span class="ngxsp-yt-rating">
+                <button type="button" [class.active]="likeActive" [attr.aria-pressed]="likeActive" [attr.aria-label]="likeLabel" [title]="likeLabel" (click)="toolSelect.emit('like')"><ngxsp-smart-icon name="thumb-up" /><span>{{ likeLabel }}</span></button>
+                <button type="button" [attr.aria-label]="dislikeLabel" [title]="dislikeLabel" (click)="toolSelect.emit('dislike')"><ngxsp-smart-icon name="thumb-down" /><span>{{ dislikeLabel }}</span></button>
+              </span>
+              <button type="button" [attr.aria-label]="shareLabel" [title]="shareLabel" (click)="toolSelect.emit('share')"><ngxsp-smart-icon name="share" /><span>{{ shareLabel }}</span></button>
+              <button type="button" [class.active]="watchLaterActive" [attr.aria-pressed]="watchLaterActive" [attr.aria-label]="watchLaterLabel" [title]="watchLaterLabel" (click)="watchLaterToggle.emit()"><ngxsp-smart-icon name="clock" /><span>{{ watchLaterLabel }}</span></button>
+              <button type="button" [attr.aria-label]="queueAddActiveLabel" [title]="queueAddActiveLabel" (click)="queueAddActive.emit()"><ngxsp-smart-icon name="playlist-plus" /><span>{{ queueAddActiveShortLabel }}</span></button>
+              @if (revealFileLabel) {
+              <button type="button" [attr.aria-label]="revealFileLabel" [title]="revealFileLabel" (click)="revealFile.emit()"><ngxsp-smart-icon name="folder" /><span>{{ revealFileLabel }}</span></button>
+              }
+              <button type="button" class="ngxsp-yt-moreAction" [attr.aria-label]="moreLabel" [title]="moreLabel" (click)="toolSelect.emit('more')"><ngxsp-smart-icon name="more" /><span>{{ moreShortLabel }}</span></button>
+            </div>
+          </section>
+          }
+
+          <!-- Phones: the queue is a sheet, and this row is the one place that opens it. -->
+          <button class="ngxsp-yt-queueButton ngxsp-yt-queueOpen" type="button" [attr.aria-expanded]="queueSheetOpen" [title]="queueActionLabel" (click)="onQueueAction()">
+            <ngxsp-smart-icon name="panel-right" />
+            <span>{{ sidePanelTitle }}</span>
+            <small>{{ sidePanelCount }}</small>
+          </button>
+
+          @if (toolCards.length) {
+          <section class="ngxsp-yt-toolRow">
+            @for (tool of toolCards; track tool.id) {
+            <button class="ngxsp-yt-tool" type="button" [class.active]="tool.active" [attr.data-tool]="tool.id" [attr.data-tone]="tool.tone || 'neutral'" (click)="toolSelect.emit(tool.id)">
+              <span class="ngxsp-yt-toolIcon" aria-hidden="true"><ngxsp-smart-icon [name]="tool.icon" /></span>
+              <span class="ngxsp-yt-toolCopy"><small>{{ tool.label }}</small><strong>{{ tool.value }}</strong></span>
+            </button>
+            }
+          </section>
+          }
+
+          @if (hasSearchQuery) {
+          <section class="ngxsp-yt-searchWorkspace" [attr.aria-label]="searchResultsTitle">
+            <div class="ngxsp-yt-searchHead">
+              <div>
+                <strong>{{ searchResultsTitle }}</strong>
+                @if (searchResultsSummary) { <small>{{ searchResultsSummary }}</small> }
+              </div>
+              <button type="button" [attr.aria-label]="searchClearLabel" [title]="searchClearLabel" (click)="clearSearch()">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </div>
+            @if (searchFilters.length) {
+            <div class="ngxsp-yt-searchFilters" role="group" [attr.aria-label]="searchFilterLabel">
+              @for (filter of searchFilters; track filter.id) {
+              <button type="button" [class.active]="filter.active" [disabled]="filter.disabled" [attr.aria-pressed]="!!filter.active" (click)="selectSearchFilter(filter)">
+                <span>{{ filter.label }}</span>
+                @if (filter.count !== undefined) { <small>{{ filter.count }}</small> }
+              </button>
+              }
+            </div>
+            }
+            <div class="ngxsp-yt-searchResults" [class.list]="activeViewMode === 'list'">
+              @for (card of searchResultItems; track card.sectionId + ':' + card.item.id) {
+              <article class="ngxsp-yt-searchResult" [class.active]="card.item.active" [attr.data-art]="artVariant(card)">
+                <button class="ngxsp-yt-searchResultMain" type="button" [attr.aria-current]="card.item.active ? 'true' : null" [attr.aria-label]="searchResultActionLabel('play', card)" [title]="searchResultActionLabel('play', card)" (click)="selectCard(card)">
+                  <span class="ngxsp-yt-searchThumb" [class.has-image]="!!card.item.artworkUrl">
+                    @if (card.item.artworkUrl) {
+                    <img [src]="card.item.artworkUrl" alt="" />
+                    } @else {
+                    <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+                    }
+                    @if (card.item.duration && !card.item.artworkUrl) { <small>{{ card.item.duration }}</small> }
+                  </span>
+                  <span class="ngxsp-yt-searchCopy">
+                    @if (card.item.kindLabel || card.item.episodeLabel) { <small>{{ card.item.episodeLabel || card.item.kindLabel }}</small> }
+                    <strong>{{ card.item.title }}</strong>
+                    @if (card.item.subtitle) { <em>{{ card.item.subtitle }}</em> }
+                    @if (mediaCardMeta(card.item)) { <span>{{ mediaCardMeta(card.item) }}</span> }
+                  </span>
+                </button>
+                <span class="ngxsp-yt-searchActions">
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('queue', card)" [title]="searchResultActionLabel('queue', card)" (click)="searchResultQueueAdd.emit(card.item.id)">
+                    <ngxsp-smart-icon name="playlist-plus" />
+                  </button>
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('watchLater', card)" [title]="searchResultActionLabel('watchLater', card)" (click)="searchResultWatchLater.emit(card.item.id)">
+                    <ngxsp-smart-icon name="clock" />
+                  </button>
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('favorite', card)" [title]="searchResultActionLabel('favorite', card)" (click)="searchResultFavorite.emit(card.item.id)">
+                    <ngxsp-smart-icon name="heart" />
+                  </button>
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('download', card)" [title]="searchResultActionLabel('download', card)" (click)="searchResultDownload.emit(card.item.id)">
+                    <ngxsp-smart-icon name="download" />
+                  </button>
+                </span>
+              </article>
+              } @empty {
+              <div class="ngxsp-yt-searchEmpty">
+                <ngxsp-smart-icon name="search" />
+                <strong>{{ searchResultsEmptyTitle }}</strong>
+                <span>{{ searchResultsEmptyBody }}</span>
+              </div>
+              }
+            </div>
+          </section>
+          }
+
+          @if (showActiveMedia) {
+          @if (mediaDetail; as detail) {
+          <section class="ngxsp-yt-mediaDetail" [attr.aria-label]="detail.title">
+            <div class="ngxsp-yt-mediaHero" [class.echoesHeader]="detailEchoesHeader">
+              <div class="ngxsp-yt-mediaPoster" [class.has-image]="!!detail.posterUrl">
+                @if (detail.posterUrl) {
+                <img [src]="detail.posterUrl" alt="" />
+                } @else {
+                <span>{{ posterInitial(detail.title) }}</span>
+                }
+              </div>
+              <div class="ngxsp-yt-mediaDetailBody">
+                <span class="ngxsp-yt-mediaKicker">{{ detail.kicker || detail.kindLabel || heroEyebrow }}</span>
+                <h2>{{ detail.title }}</h2>
+                @if (detail.subtitle) { <p class="ngxsp-yt-mediaSubtitle">{{ detail.subtitle }}</p> }
+                @if (detail.metaItems?.length) {
+                <div class="ngxsp-yt-mediaMeta">
+                  @for (meta of detail.metaItems; track meta) {
+                  <span>{{ meta }}</span>
+                  }
+                </div>
+                }
+                @if (detail.summary) { <p class="ngxsp-yt-mediaSummary">{{ detail.summary }}</p> }
+                @if (showResumeProgress && detail.progressPercent !== undefined) {
+                <div class="ngxsp-yt-mediaProgress">
+                  <span><i [style.width.%]="safeProgressPercent(detail.progressPercent)"></i></span>
+                  @if (detail.progressLabel) { <small>{{ detail.progressLabel }}</small> }
+                </div>
+                }
+                @if (detail.tags?.length) {
+                <div class="ngxsp-yt-mediaTags">
+                  @for (tag of detail.tags; track tag) {
+                  <span>{{ tag }}</span>
+                  }
+                </div>
+                }
+                @if (detail.actions?.length) {
+                <div class="ngxsp-yt-mediaActions">
+                  @for (action of detail.actions; track action.id) {
+                  <button type="button" [class.primary]="action.primary" [disabled]="action.disabled" (click)="detailAction.emit(action.id)">
+                    <ngxsp-smart-icon [name]="action.icon" />
+                    <span>{{ action.label }}</span>
+                  </button>
+                  }
+                </div>
+                }
+              </div>
+            </div>
+            @if (detail.chapters?.length || detail.checklist?.length) {
+            <div class="ngxsp-yt-mediaWorkspace">
+              @if (detail.workspaceTitle || detail.workspaceSummary) {
+              <div class="ngxsp-yt-mediaWorkspaceHead">
+                @if (detail.workspaceTitle) { <strong>{{ detail.workspaceTitle }}</strong> }
+                @if (detail.workspaceSummary) { <small>{{ detail.workspaceSummary }}</small> }
+              </div>
+              }
+              <div class="ngxsp-yt-mediaWorkspaceGrid">
+                @if (detail.chapters?.length) {
+                <div class="ngxsp-yt-chapterPanel">
+                  @if (detail.chaptersTitle) { <strong class="ngxsp-yt-panelTitle">{{ detail.chaptersTitle }}</strong> }
+                  <div class="ngxsp-yt-chapterList">
+                    @for (chapter of detail.chapters; track chapter.id) {
+                    <button type="button" class="ngxsp-yt-mediaChapter" [class.active]="chapter.active" (click)="selectMediaChapter(chapter)">
+                      <span class="ngxsp-yt-chapterTime">
+                        @if (chapter.time) { <em>{{ chapter.time }}</em> }
+                        @if (chapter.label) { <b>{{ chapter.label }}</b> }
+                      </span>
+                      <span class="ngxsp-yt-chapterCopy">
+                        <strong>{{ chapter.title }}</strong>
+                        @if (chapter.summary) { <small>{{ chapter.summary }}</small> }
+                      </span>
+                    </button>
+                    }
+                  </div>
+                </div>
+                }
+                @if (detail.checklist?.length) {
+                <div class="ngxsp-yt-checkPanel">
+                  @if (detail.checklistTitle) { <strong class="ngxsp-yt-panelTitle">{{ detail.checklistTitle }}</strong> }
+                  <div class="ngxsp-yt-checkList">
+                    @for (item of detail.checklist; track item.id) {
+                    <div class="ngxsp-yt-checkItem" [attr.data-tone]="item.tone || 'neutral'">
+                      <span aria-hidden="true"></span>
+                      <div>
+                        <strong>{{ item.label }}</strong>
+                        @if (item.description) { <small>{{ item.description }}</small> }
+                      </div>
+                      @if (item.value) { <em>{{ item.value }}</em> }
+                    </div>
+                    }
+                  </div>
+                </div>
+                }
+              </div>
+            </div>
+            }
+            @if (detail.episodes?.length) {
+            <div class="ngxsp-yt-episodeRail">
+              @if (detail.episodesTitle) { <strong class="ngxsp-yt-panelTitle">{{ detail.episodesTitle }}</strong> }
+              <div>
+                @for (episode of detail.episodes; track episode.id) {
+                <button type="button" [class.active]="episode.active" (click)="selectDetailEpisode.emit(episode.id)">
+                  <span class="ngxsp-yt-episodeThumb" [class.has-image]="!!episode.artworkUrl">
+                    @if (episode.artworkUrl) {
+                    <img [src]="episode.artworkUrl" alt="" />
+                    } @else {
+                    <i>{{ posterInitial(episode.title) }}</i>
+                    }
+                    @if (showResumeProgress && episode.progressPercent !== undefined) {
+                    <em><i [style.width.%]="safeProgressPercent(episode.progressPercent)"></i></em>
+                    }
+                  </span>
+                  <span>
+                    <strong>{{ episode.title }}</strong>
+                    @if (episode.subtitle) { <small>{{ episode.subtitle }}</small> }
+                    @if (episode.duration) { <em>{{ episode.duration }}</em> }
+                  </span>
+                </button>
+                }
+              </div>
+            </div>
+            }
+          </section>
+          }
+          }
+
+          @if (libraryVisible) {
+          <section class="ngxsp-yt-library">
+            <div class="ngxsp-yt-sectionHead">
+              <div>
+                <strong>{{ libraryTitle }}</strong>
+                @if (libraryStatus) {
+                <small class="ngxsp-yt-libraryStatus" [class.busy]="libraryBusy" role="status" aria-live="polite">{{ libraryStatus }}</small>
+                }
+              </div>
+              <button class="ngxsp-yt-sectionLink" type="button" [attr.aria-label]="browseLibraryLabel" [title]="browseLibraryLabel" (click)="toggleLibrary.emit()">
+                <ngxsp-smart-icon name="chevron-up" />
+              </button>
+            </div>
+            @if (trail.length > 1) {
+            <nav class="ngxsp-yt-trail" [attr.aria-label]="trailLabel">
+              @for (step of trail; track step.id; let last = $last) {
+              @if (last) {
+              <b aria-current="page">{{ step.label }}</b>
+              } @else {
+              <button class="ngxsp-yt-trailStep" type="button" (click)="trailStep.emit(step.id)">{{ step.label }}</button>
+              <span aria-hidden="true">/</span>
+              }
+              }
+            </nav>
+            }
+            @for (shelf of librarySections; track shelf.id) {
+            <div class="ngxsp-yt-shelf">
+              @if (shelf.titled) {
+              <div class="ngxsp-yt-shelfHead">
+                <strong>{{ shelf.title }}</strong>
+                <small>{{ shelf.count }}</small>
+                @if (shelf.hidden) {
+                <button class="ngxsp-yt-shelfAll" type="button" [attr.aria-expanded]="isSectionExpanded(shelf.id)" (click)="toggleSection(shelf.id)">{{ isSectionExpanded(shelf.id) ? showLessLabel : showAllLabel }}</button>
+                }
+              </div>
+              }
+              <div class="ngxsp-yt-grid" [class.list]="activeViewMode === 'list'" [class.rail]="activeViewMode !== 'list' && !isSectionExpanded(shelf.id)">
+                @for (card of shelf.cards; track card.sectionId + ':' + card.item.id) {
+                <ng-container *ngTemplateOutlet="mediaCard; context: { $implicit: card }" />
+                }
+              </div>
+            </div>
+            }
+          </section>
+          }
+          }
+        </section>
+
+        <ng-template #mediaCard let-card>
+          <span class="ngxsp-yt-cardWrap">
+                <button class="ngxsp-yt-card" type="button" [class.active]="card.item.active" [class.synthetic]="isSyntheticSection(card.sectionId)" [attr.aria-current]="card.item.active ? 'true' : null" [attr.data-art]="artVariant(card)" (click)="selectCard(card)" (contextmenu)="openCardMenu($event, card.item)">
+                  <span class="ngxsp-yt-thumbnail" [class.has-image]="!!card.item.artworkUrl">
+                    @if (card.item.artworkUrl) {
+                    <img [src]="card.item.artworkUrl" alt="" />
+                    } @else {
+                    <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+                    }
+                    @if (card.item.episodeLabel || card.item.kindLabel) {
+                    <small class="ngxsp-yt-thumbKind">{{ card.item.episodeLabel || card.item.kindLabel }}</small>
+                    }
+                    @if (!card.item.artworkUrl) {
+                    <small class="ngxsp-yt-thumbBadge">{{ card.item.duration || card.item.meta || sourceTypeLabel }}</small>
+                    }
+                    @if (card.item.active) {
+                    <span class="ngxsp-yt-nowBadge" aria-hidden="true"><ngxsp-smart-icon [name]="isPlaying ? 'waveform' : 'play'" /></span>
+                    }
+                    @if (showResumeProgress && card.item.progressPercent !== undefined) {
+                    <span class="ngxsp-yt-cardProgress" aria-hidden="true"><i [style.width.%]="safeProgressPercent(card.item.progressPercent)"></i></span>
+                    }
+                  </span>
+                  <span class="ngxsp-yt-cardCopy">
+                    <strong>{{ card.item.title }}</strong>
+                    @if (card.item.subtitle) { <span>{{ card.item.subtitle }}</span> }
+                    @if (mediaCardMeta(card.item)) { <small>{{ mediaCardMeta(card.item) }}</small> }
+                  </span>
+                </button>
+            @if (card.item.actions?.length) {
+            <button
+              class="ngxsp-yt-cardMore"
+              type="button"
+              [attr.aria-label]="cardActionsLabel"
+              [attr.aria-expanded]="cardMenu?.card?.id === card.item.id"
+              [title]="cardActionsLabel"
+              (click)="openCardMenu($event, card.item)"
+            >
+              <ngxsp-smart-icon name="more" />
+            </button>
+            }
+          </span>
+        </ng-template>
+
+        <!-- What a panel shows: in the side column, or over the video for the info panels. -->
+        <ng-template #panelBody let-panel>
+        <div class="ngxsp-yt-inspectorScroll">
+          @if (panel.status) {
+          <p class="ngxsp-yt-inspectorStatus">{{ panel.status }}</p>
+          }
+
+          @if (panel.metrics?.length) {
+          <div class="ngxsp-yt-inspectorMetrics">
+            @for (metric of panel.metrics; track metric.label) {
+            <span class="ngxsp-yt-inspectorMetric" [class.success]="metric.tone === 'success'" [class.warning]="metric.tone === 'warning'">
+              <small>{{ metric.label }}</small>
+              <strong>{{ metric.value }}</strong>
+            </span>
+            }
+          </div>
+          }
+
+          @if (panel.settings?.length) {
+          <ngxsp-settings [sections]="panel.settings!" (settingChange)="settingChange.emit($event)" (settingAction)="settingAction.emit($event)" />
+          }
+
+          @if (serverForm; as form) {
+          <section class="ngxsp-yt-servers" [attr.aria-label]="form.heading || form.title">
+            @if (form.heading) { <h2 class="ngxsp-yt-serversHeading">{{ form.heading }}</h2> }
+            @for (server of form.servers; track server.id) {
+            <div class="ngxsp-yt-serverRow" [class.active]="server.active">
+              <button class="ngxsp-yt-serverMain" type="button" [title]="form.openLabel + ' - ' + server.name" (click)="selectServer.emit(server.id)">
+                <ngxsp-smart-icon name="network" />
+                <span>
+                  <strong>{{ server.name }}</strong>
+                  @if (server.subtitle) { <small>{{ server.subtitle }}</small> }
+                </span>
+              </button>
+              <button class="ngxsp-yt-serverDisconnect" type="button" [attr.aria-label]="form.disconnectLabel + ' - ' + server.name" [title]="form.disconnectLabel" (click)="disconnectServer.emit(server.id)">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </div>
+            }
+            <form class="ngxsp-yt-serverForm" (submit)="submitServer($event)">
+              <span class="ngxsp-yt-serverTitle">{{ form.title }}</span>
+              @if (form.kinds && form.kinds.length > 1) {
+              <select class="ngxsp-yt-serverKind" [value]="serverKindDraft || form.kinds[0].id" (change)="onServerKindChange($event)" [attr.aria-label]="form.kindLabel || form.title">
+                @for (kind of form.kinds; track kind.id) {
+                <option [value]="kind.id">{{ kind.label }}</option>
+                }
+              </select>
+              }
+              @let serverKind = selectedServerKind(form);
+              <input type="text" inputmode="url" [value]="serverAddressDraft" (input)="onServerAddressInput($event)" [placeholder]="serverKind?.addressPlaceholder || form.addressPlaceholder" [attr.aria-label]="serverKind?.addressPlaceholder || form.addressPlaceholder" />
+              @if (serverKind?.credentials !== false) {
+              <input type="text" autocomplete="username" [value]="serverUsernameDraft" (input)="onServerUsernameInput($event)" [placeholder]="form.usernamePlaceholder" [attr.aria-label]="form.usernamePlaceholder" />
+              <input type="password" autocomplete="current-password" [value]="serverPasswordDraft" (input)="onServerPasswordInput($event)" [placeholder]="form.passwordPlaceholder" [attr.aria-label]="form.passwordPlaceholder" />
+              }
+              <button type="submit" [disabled]="form.busy || !serverAddressDraft.trim()">{{ form.submitLabel }}</button>
+              @if (form.discovery && serverKind?.discoverable) {
+              <button class="secondary" type="button" [disabled]="form.discovery.busy" (click)="discoverServers.emit(serverKind!.id)">{{ form.discovery.busy ? form.discovery.searchingLabel : form.discovery.searchLabel }}</button>
+              }
+              @if (form.hint) { <small class="ngxsp-yt-serverHint">{{ form.hint }}</small> }
+              @if (form.discovery && serverKind?.discoverable && (form.discovery.servers.length || form.discovery.emptyLabel)) {
+              <ul class="ngxsp-yt-discovered" [attr.aria-label]="form.discovery.searchLabel">
+                @for (server of form.discovery.servers; track server.id) {
+                <li>
+                  <span><strong>{{ server.name }}</strong>@if (server.subtitle) { <small>{{ server.subtitle }}</small> }</span>
+                  <button class="secondary" type="button" [disabled]="form.busy" [attr.aria-label]="form.discovery.connectLabel + ' - ' + server.name" (click)="connectDiscoveredServer.emit(server.id)">{{ form.discovery.connectLabel }}</button>
+                </li>
+                } @empty {
+                <li class="empty">{{ form.discovery.emptyLabel }}</li>
+                }
+              </ul>
+              }
+            </form>
+          </section>
+          }
+
+          @if (panel.trailingSettings?.length) {
+          <ngxsp-settings [sections]="panel.trailingSettings!" (settingChange)="settingChange.emit($event)" (settingAction)="settingAction.emit($event)" />
+          }
+
+          @if (panel.items?.length) {
+          <div class="ngxsp-yt-inspectorList">
+            @for (item of panel.items; track item.label) {
+            <div class="ngxsp-yt-inspectorItem" [class.success]="item.tone === 'success'" [class.warning]="item.tone === 'warning'">
+              <span>
+                <strong>{{ item.label }}</strong>
+                @if (item.description) { <small>{{ item.description }}</small> }
+              </span>
+              @if (item.value) { <em>{{ item.value }}</em> }
+            </div>
+            }
+          </div>
+          }
+        </div>
+
+        @if (panel.actions?.length) {
+        <div class="ngxsp-yt-inspectorActions">
+          @for (action of panel.actions; track action.id) {
+          <button type="button" [class.primary]="action.primary" [disabled]="action.disabled" (click)="inspectorAction.emit(action.id)">
+            <ngxsp-smart-icon [name]="action.icon" />
+            <span>{{ action.label }}</span>
+          </button>
+          }
+        </div>
+        }
+        </ng-template>
+
+        <!-- A row of the side panel: a video of the queue or of the section on show. -->
+        <ng-template #sideRow let-card let-label="label">
+          <button class="ngxsp-yt-suggestionMain" type="button" [attr.aria-current]="card.item.active ? 'true' : null" [attr.aria-label]="label" [title]="label" (click)="selectCard(card)">
+            <span class="ngxsp-yt-suggestionThumb" [class.has-image]="!!card.item.artworkUrl">
+              @if (card.item.artworkUrl) {
+              <img [src]="card.item.artworkUrl" alt="" />
+              } @else {
+              <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+              }
+              @if (card.item.duration && !card.item.artworkUrl) { <small>{{ card.item.duration }}</small> }
+              @if (card.item.active) {
+              <span class="ngxsp-yt-nowBadge" aria-hidden="true"><ngxsp-smart-icon [name]="isPlaying ? 'waveform' : 'play'" /></span>
+              }
+              @if (showResumeProgress && card.item.progressPercent !== undefined) {
+              <span class="ngxsp-yt-cardProgress" aria-hidden="true"><i [style.width.%]="safeProgressPercent(card.item.progressPercent)"></i></span>
+              }
+            </span>
+            <span class="ngxsp-yt-suggestionCopy">
+              <strong>{{ card.item.title }}</strong>
+              @if (card.item.subtitle) { <span>{{ card.item.subtitle }}</span> }
+              @if (mediaCardMeta(card.item)) { <small>{{ mediaCardMeta(card.item) }}</small> }
+            </span>
+          </button>
+        </ng-template>
+
+        @if (queueVisible || queueSheetOpen) {
+        <aside
+          class="ngxsp-yt-suggestions"
+          #queuePanel
+          tabindex="-1"
+          [class.sheet]="queueSheetOpen"
+          [attr.role]="queueSheetOpen ? 'dialog' : null"
+          [attr.aria-modal]="queueSheetOpen ? 'true' : null"
+          [attr.aria-label]="sidePanelTitle"
+          (keydown.escape)="closeQueueSheet()"
+        >
+          <!-- Phones only: the panel covers the page instead of pushing it down, and closes from here. -->
+          @if (queueSheetOpen) {
+          <div class="ngxsp-yt-sheetHeader">
+            <strong>{{ sidePanel?.title || sidePanelTitle }}</strong>
+            <button class="ngxsp-yt-textButton" type="button" (click)="closeQueueSheet()">{{ closeLabel }}</button>
+          </div>
+          }
+          <div class="ngxsp-yt-panelTabs" role="group" [attr.aria-label]="sidePanelTitle">
+            <button type="button" class="ngxsp-yt-panelPill" [class.active]="isPanelOpen('queue')" [attr.aria-pressed]="isPanelOpen('queue')" (click)="togglePanel('queue')">{{ sidePanelTitle }}</button>
+            @for (panel of knownPanels; track panel.id) {
+            <button type="button" class="ngxsp-yt-panelPill" [class.active]="isPanelOpen(panel.id)" [attr.aria-pressed]="isPanelOpen(panel.id)" (click)="togglePanel(panel.id)">{{ panel.title }}</button>
+            }
+          </div>
+
+          <div class="ngxsp-yt-panelStack">
+          @if (isPanelOpen('queue')) {
+          <section class="ngxsp-yt-stackItem" [class.collapsed]="isPanelCollapsed('queue')">
+            <header class="ngxsp-yt-stackHead">
+              <strong>{{ sidePanelTitle }}</strong>
+              @if (sidePanelCount) { <small>{{ sidePanelCount }}</small> }
+              <button class="ngxsp-yt-stackIcon" type="button" [attr.aria-expanded]="!isPanelCollapsed('queue')" [attr.aria-label]="sidePanelTitle" (click)="togglePanelCollapsed('queue')">
+                <ngxsp-smart-icon [name]="isPanelCollapsed('queue') ? 'chevron-down' : 'chevron-up'" />
+              </button>
+              <button class="ngxsp-yt-stackIcon" type="button" [attr.aria-label]="closeLabel" [title]="closeLabel" (click)="togglePanel('queue')">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </header>
+            @if (!isPanelCollapsed('queue')) {
+          <!-- A page with nothing to list and nothing to say about it (the lists block above speaks for it) shows no list. -->
+          @let sideListShown = sidePanelContent !== 'sections' || !!sidePanelCount || !!emptyCatalogLabel;
+          @if (sideListShown) {
+          <div class="ngxsp-yt-sectionHead compact">
+            <div>
+              @if (sideBackLabel) {
+              <button class="ngxsp-yt-backButton" type="button" [attr.aria-label]="sideBackLabel" [title]="sideBackLabel" (click)="sideBack.emit()">
+                <ngxsp-smart-icon name="chevron-left" />
+                <span>{{ sideBackLabel }}</span>
+              </button>
+              }
+              <strong>{{ sidePanelTitle }}</strong>
+              @if (sidePanelMeta) { <small>{{ sidePanelMeta }}</small> }
+            </div>
+            <span class="ngxsp-yt-countBadge">{{ sidePanelCount }}</span>
+          </div>
+          }
+          @if (sidePanelContent === 'sections') {
+          @if (sideListShown) {
+          <div class="ngxsp-yt-suggestionList">
+            @for (group of sideSectionGroups; track group.id) {
+            @if (sideSectionGroups.length > 1 && group.cards.length) { <strong class="ngxsp-yt-sideGroupTitle">{{ group.title }}</strong> }
+            @for (card of group.cards; track card.sectionId + ':' + card.item.id) {
+            <article class="ngxsp-yt-suggestion" [class.active]="card.item.active" [attr.data-art]="artVariant(card)">
+              <ng-container *ngTemplateOutlet="sideRow; context: { $implicit: card, label: playLabel + ' - ' + card.item.title }" />
+            </article>
+            }
+            }
+            @if (!sidePanelCount) {
+            <div class="ngxsp-yt-emptyList">{{ emptyCatalogLabel }}</div>
+            }
+          </div>
+          }
+          } @else {
+          <div class="ngxsp-yt-suggestionList" #queueList>
+            @for (card of displayQueueItems; track card.sectionId + ':' + card.item.id) {
+            <article class="ngxsp-yt-suggestion" [class.active]="card.item.active" [class.synthetic]="isSyntheticSection(card.sectionId)" [class.managed]="hasManagedQueue" [attr.data-art]="artVariant(card)">
+              <ng-container *ngTemplateOutlet="sideRow; context: { $implicit: card, label: queueItemActionLabel('play', card) }" />
+              @if (hasManagedQueue) {
+              <span class="ngxsp-yt-queueControls">
+                <button type="button" [disabled]="!canMoveQueueItem(card, 'up')" [attr.aria-label]="queueItemActionLabel('moveUp', card)" [title]="queueItemActionLabel('moveUp', card)" (click)="queueMoveUp.emit(card.item.id)">
+                  <ngxsp-smart-icon class="ngxsp-yt-queueUpIcon" name="chevron-up" />
+                </button>
+                <button type="button" [disabled]="!canMoveQueueItem(card, 'down')" [attr.aria-label]="queueItemActionLabel('moveDown', card)" [title]="queueItemActionLabel('moveDown', card)" (click)="queueMoveDown.emit(card.item.id)">
+                  <ngxsp-smart-icon class="ngxsp-yt-queueDownIcon" name="chevron-down" />
+                </button>
+                <button type="button" [attr.aria-label]="queueItemActionLabel('remove', card)" [title]="queueItemActionLabel('remove', card)" (click)="queueRemove.emit(card.item.id)">
+                  <ngxsp-smart-icon name="close" />
+                </button>
+              </span>
+              }
+            </article>
+            } @empty {
+            <div class="ngxsp-yt-emptyList">{{ emptyCatalogLabel }}</div>
+            }
+          </div>
+          }
+            }
+          </section>
+          }
+          @for (panel of openPanels; track panel.id) {
+          <section class="ngxsp-yt-stackItem" [class.collapsed]="isPanelCollapsed(panel.id)">
+          <section class="ngxsp-yt-inspector" [attr.aria-label]="panel.title">
+            <div class="ngxsp-yt-inspectorHead">
+              <span class="ngxsp-yt-inspectorIcon" aria-hidden="true">
+                <ngxsp-smart-icon [name]="panel.icon || 'settings'" />
+              </span>
+              <span class="ngxsp-yt-inspectorTitle">
+                <strong>{{ panel.title }}</strong>
+                @if (panel.subtitle) { <small>{{ panel.subtitle }}</small> }
+              </span>
+              <button class="ngxsp-yt-inspectorClose" type="button" [attr.aria-expanded]="!isPanelCollapsed(panel.id)" [attr.aria-label]="panel.title" [title]="panel.title" (click)="togglePanelCollapsed(panel.id)">
+                <ngxsp-smart-icon [name]="isPanelCollapsed(panel.id) ? 'chevron-down' : 'chevron-up'" />
+              </button>
+              <button class="ngxsp-yt-inspectorClose" type="button" [attr.aria-label]="inspectorCloseLabel" [title]="inspectorCloseLabel" (click)="closePanel(panel.id)">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </div>
+
+            @if (!isPanelCollapsed(panel.id)) {
+            <ng-container *ngTemplateOutlet="panelBody; context: { $implicit: panel }" />
+            }
+          </section>
+          </section>
+          }
+          </div>
+          @if (playlistPanel; as lists) {
+          <section class="ngxsp-yt-lists" [attr.aria-label]="lists.title">
+            <div class="ngxsp-yt-sectionHead compact">
+              <div><strong>{{ lists.title }}</strong></div>
+              <span class="ngxsp-yt-countBadge">{{ lists.playlists.length }}</span>
+            </div>
+            <form class="ngxsp-yt-listForm" (submit)="submitCreatePlaylist($event)">
+              <input type="text" [value]="playlistDraftName" (input)="onPlaylistDraftInput($event)" [placeholder]="lists.namePlaceholder" [attr.aria-label]="lists.namePlaceholder" />
+              <button type="submit" [disabled]="!playlistDraftName.trim()">{{ lists.createLabel }}</button>
+            </form>
+            @if (lists.target; as target) {
+            <p class="ngxsp-yt-listTarget">{{ lists.targetLabel }}<strong>{{ target.title }}</strong></p>
+            }
+            <div class="ngxsp-yt-listRows">
+              @for (list of lists.playlists; track list.id) {
+              <div class="ngxsp-yt-listRow" [class.active]="list.active">
+                <button class="ngxsp-yt-listMain" type="button" [attr.aria-current]="list.active ? 'true' : null" [title]="lists.openLabel + ' - ' + list.name" (click)="selectPlaylist.emit(list.id)">
+                  <ngxsp-smart-icon name="list" />
+                  <span>
+                    <strong>{{ list.name }}</strong>
+                    @if (list.itemCount !== undefined) { <small>{{ list.itemCount }} {{ lists.itemsCountLabel }}</small> }
+                  </span>
+                </button>
+                <span class="ngxsp-yt-listActions">
+                  @if (lists.target) {
+                  @if (list.containsTarget) {
+                  <button type="button" [attr.aria-label]="lists.removeLabel + ' - ' + list.name" [title]="lists.removeLabel" (click)="removeFromPlaylist.emit(list.id)">
+                    <ngxsp-smart-icon name="check" />
+                  </button>
+                  } @else {
+                  <button type="button" [attr.aria-label]="lists.addLabel + ' - ' + list.name" [title]="lists.addLabel" (click)="addToPlaylist.emit(list.id)">
+                    <ngxsp-smart-icon name="plus" />
+                  </button>
+                  }
+                  }
+                  <button type="button" [attr.aria-label]="lists.renameLabel + ' - ' + list.name" [title]="lists.renameLabel" (click)="startRenamePlaylist(list)">
+                    <ngxsp-smart-icon name="tag" />
+                  </button>
+                  <button type="button" class="danger" [attr.aria-label]="lists.deleteLabel + ' - ' + list.name" [title]="lists.deleteLabel" (click)="deletePlaylist.emit(list.id)">
+                    <ngxsp-smart-icon name="close" />
+                  </button>
+                </span>
+                @if (renamingPlaylistId === list.id) {
+                <form class="ngxsp-yt-listForm" (submit)="submitRenamePlaylist($event)">
+                  <input type="text" [value]="playlistRenameDraft" (input)="onPlaylistRenameInput($event)" [placeholder]="lists.renamePlaceholder" [attr.aria-label]="lists.renamePlaceholder" />
+                  <button type="submit" [disabled]="!playlistRenameDraft.trim()">{{ lists.saveLabel }}</button>
+                  <button type="button" (click)="cancelRenamePlaylist()">{{ lists.cancelLabel }}</button>
+                </form>
+                }
+              </div>
+              } @empty {
+              <p class="ngxsp-yt-listEmpty">{{ lists.emptyLabel }}</p>
+              }
+            </div>
+          </section>
+          }
+          @if (miniPlayerVisible) {
+          <article class="ngxsp-yt-miniPlayer" [class.playing]="isPlaying" [attr.aria-label]="nowPlayingLabel">
+            <button class="ngxsp-yt-miniArtwork" type="button" [attr.aria-label]="miniPlayerFocusLabel + ' - ' + displayHeroTitle" [title]="miniPlayerFocusLabel" (click)="miniPlayerFocus.emit()">
+              @if (displayHeroArtwork) {
+              <img [src]="displayHeroArtwork" alt="" />
+              } @else {
+              <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+              }
+              <span class="ngxsp-yt-miniPlayBadge" aria-hidden="true">
+                @if (isPlaying) { <ngxsp-smart-icon name="waveform" /> } @else { <ngxsp-smart-icon name="play" /> }
+              </span>
+            </button>
+            <span class="ngxsp-yt-miniDetails">
+              <small>{{ miniPlayerMeta || heroEyebrow }}</small>
+              <strong>{{ displayHeroTitle }}</strong>
+              @if (displayHeroSubtitle) { <span>{{ displayHeroSubtitle }}</span> }
+            </span>
+            <button class="ngxsp-yt-miniControl" type="button" [attr.aria-label]="miniPlayerPlaybackLabel" [title]="miniPlayerPlaybackLabel" (click)="toggleMiniPlayerPlayback()">
+              @if (isPlaying) { <ngxsp-smart-icon name="pause" /> } @else { <ngxsp-smart-icon name="play" /> }
+            </button>
+            <button class="ngxsp-yt-miniClose" type="button" [attr.aria-label]="miniPlayerCloseLabel" [title]="miniPlayerCloseLabel" (click)="miniPlayerClose.emit()">
+              <ngxsp-smart-icon name="close" />
+            </button>
+          </article>
+          } @else {
+          <button class="ngxsp-yt-miniRestore" type="button" [attr.aria-label]="miniPlayerRestoreLabel" [title]="miniPlayerRestoreLabel" (click)="miniPlayerRestore.emit()">
+            <ngxsp-smart-icon name="window-mini" />
+            <span>{{ miniPlayerRestoreLabel }}</span>
+          </button>
+          }
+        </aside>
+        }
+      </div>
+    </section>
+`, isInline: true, styles: [":host{display:block;height:100%;min-height:0;color:var(--nsp-text, #ededf0);font-family:var(--nsp-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, sans-serif);font-size:13px;line-height:1.4}.ngxsp-yt-shell{--yt-bg:var(--nsp-bg, #0d0e11);--yt-s0:var(--nsp-surface-0, #121317);--yt-s1:var(--nsp-surface-1, #17181d);--yt-s2:var(--nsp-surface-2, #1e1f25);--yt-s3:var(--nsp-surface-3, #26272e);--yt-line:var(--nsp-line, rgb(255 255 255 / .07));--yt-line-strong:var(--nsp-line-strong, rgb(255 255 255 / .13));--yt-text:var(--nsp-text, #ededf0);--yt-text-2:var(--nsp-text-2, #a3a5ae);--yt-text-3:var(--nsp-text-3, #80828c);--yt-accent:var(--nsp-accent, #8b90ff);--yt-accent-strong:var(--nsp-accent-strong, #5d63ee);--yt-accent-soft:var(--nsp-accent-soft, rgb(139 144 255 / .14));--yt-on-accent:var(--nsp-on-accent, #fff);--yt-success:var(--nsp-success, #3ecf8e);--yt-warning:var(--nsp-warning, #f2a93b);--yt-danger:var(--nsp-danger, #f25f5c);--yt-danger-text:var(--nsp-danger-text, #ffb4b2);--yt-live:var(--nsp-live, #f25f5c);--yt-r-sm:var(--nsp-radius-sm, 6px);--yt-r-md:var(--nsp-radius-md, 10px);--yt-r-lg:var(--nsp-radius-lg, 14px);--yt-ease:var(--nsp-ease, cubic-bezier(.2,0,0,1));--yt-dur:var(--nsp-dur, .14s);--yt-title-h:var(--nsp-titlebar-height, 48px);--yt-rail-w:84px;--yt-side-w:360px;--yt-mode:var(--yt-text-2);position:relative;height:100%;min-height:600px;display:grid;grid-template-columns:var(--yt-rail-w) minmax(0,1fr);grid-template-rows:var(--yt-title-h) minmax(0,1fr);grid-template-areas:\"top top\" \"rail body\";overflow:hidden;background:var(--yt-bg);color:var(--yt-text);box-sizing:border-box}.ngxsp-yt-shell.ngxsp-yt-railExpanded{--yt-rail-w:220px}.ngxsp-yt-shell.ngxsp-yt-menuRow{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--yt-title-h) auto minmax(0,1fr);grid-template-areas:\"top\" \"rail\" \"body\"}.ngxsp-yt-menuRow .ngxsp-yt-rail{flex-direction:row;padding:6px 12px;border-right:0;border-bottom:1px solid var(--yt-line);overflow-x:auto;overflow-y:hidden}.ngxsp-yt-menuRow .ngxsp-yt-railButton{width:auto;min-height:36px;flex:0 0 auto;flex-direction:row;gap:6px;padding:0 10px}.ngxsp-yt-menuRow .ngxsp-yt-railButton span{font-size:12px}.ngxsp-yt-menuRow .ngxsp-yt-railMenu{display:none}.ngxsp-yt-shell.ngxsp-yt-menuOff{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--yt-title-h) minmax(0,1fr);grid-template-areas:\"top\" \"body\"}.ngxsp-yt-menuOff .ngxsp-yt-rail{display:none}.ngxsp-yt-shell.ngxsp-yt-online{--yt-mode:var(--yt-live)}.ngxsp-yt-shell.ngxsp-yt-offline{--yt-mode:var(--yt-success)}.ngxsp-yt-shell *{box-sizing:border-box;letter-spacing:0}.ngxsp-yt-shell *::-webkit-scrollbar{width:10px;height:10px}.ngxsp-yt-shell *::-webkit-scrollbar-track{background:transparent}.ngxsp-yt-shell *::-webkit-scrollbar-thumb{background:var(--yt-s3);border-radius:999px;border:3px solid transparent;background-clip:padding-box}button,input{font:inherit;color:inherit}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,p{margin:0}ngxsp-smart-icon{width:18px;height:18px}.ngxsp-yt-fileInput{display:none}.ngxsp-yt-shell button:focus-visible,.ngxsp-yt-shell input:focus-visible{outline:2px solid var(--yt-accent);outline-offset:2px}.ngxsp-yt-topbar{grid-area:top;min-width:0;display:grid;grid-template-columns:auto minmax(200px,1fr) auto;align-items:center;gap:16px;padding:0 calc(12px + var(--nsp-titlebar-inset-end, 0px)) 0 calc(12px + var(--nsp-titlebar-inset-start, 0px));border-bottom:1px solid var(--yt-line);background:var(--yt-s0);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}.ngxsp-yt-topbar button,.ngxsp-yt-topbar input,.ngxsp-yt-topbar label,.ngxsp-yt-topbar .ngxsp-yt-status{-webkit-app-region:no-drag}.ngxsp-yt-brand{min-width:0;display:flex;align-items:center;gap:10px}.ngxsp-yt-railMenu{width:32px;height:32px;display:grid;place-items:center;padding:0;margin-right:6px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-railMenu:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-brandIcon{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:7px;color:#fff;background:linear-gradient(145deg,#8b90ff,#5d63ee 55%,#4146c9);box-shadow:inset 0 1px #ffffff38}.ngxsp-yt-brandIcon ngxsp-smart-icon{width:14px;height:14px;margin-left:1px}.ngxsp-yt-brandLogo{width:26px;height:26px;flex:0 0 auto;display:block}.ngxsp-yt-brand strong{font-size:13px;font-weight:600;white-space:nowrap}.ngxsp-yt-search{position:relative;justify-self:center;width:100%;max-width:520px;height:34px;display:block;color:var(--yt-text-3)}.ngxsp-yt-search ngxsp-smart-icon{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none}.ngxsp-yt-search input{width:100%;height:100%;padding:0 10px 0 35px;border:1px solid transparent;border-radius:8px;outline:0;background:var(--yt-s2);color:var(--yt-text);font-size:13px;transition:border-color var(--yt-dur) var(--yt-ease),background-color var(--yt-dur) var(--yt-ease),box-shadow var(--yt-dur) var(--yt-ease)}.ngxsp-yt-search input:hover{border-color:var(--yt-line-strong)}.ngxsp-yt-shell .ngxsp-yt-search input:focus,.ngxsp-yt-shell .ngxsp-yt-search input:focus-visible{outline:0;border-color:var(--yt-accent);background:var(--yt-s1);box-shadow:0 0 0 3px var(--yt-accent-soft)}.ngxsp-yt-search input::placeholder{color:var(--yt-text-3)}.ngxsp-yt-actions{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngxsp-yt-status{min-width:0;max-width:260px;height:26px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border-radius:999px;background:var(--yt-s2);color:var(--yt-text-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngxsp-yt-status:before{content:\"\";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--yt-accent)}.ngxsp-yt-status.success:before{background:var(--yt-success)}.ngxsp-yt-status.error{color:var(--yt-danger-text);background:#f25f5c29}.ngxsp-yt-status.error:before{background:var(--yt-danger)}.ngxsp-yt-mode,.ngxsp-yt-languageSwitch{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:8px;background:var(--yt-s2)}.ngxsp-yt-mode button,.ngxsp-yt-languageSwitch button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--yt-text-2);font-size:12px;font-weight:500;white-space:nowrap}.ngxsp-yt-mode button i{width:6px;height:6px;border-radius:50%;background:var(--yt-text-3)}.ngxsp-yt-mode button:hover,.ngxsp-yt-languageSwitch button:hover{color:var(--yt-text)}.ngxsp-yt-mode button.active,.ngxsp-yt-languageSwitch button.active{background:var(--yt-s3);color:var(--yt-text);box-shadow:0 1px 2px #0000004d}.ngxsp-yt-mode button.active i{background:var(--yt-mode);box-shadow:0 0 0 3px color-mix(in srgb,var(--yt-mode) 22%,transparent)}.ngxsp-yt-sourceButton{flex:0 0 auto;height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 10px;border:0;border-radius:var(--yt-r-sm);background:var(--yt-accent-strong);color:var(--yt-on-accent);font-size:12px;font-weight:600;white-space:nowrap}.ngxsp-yt-sourceButton ngxsp-smart-icon{width:16px;height:16px}.ngxsp-yt-sourceButton:hover{filter:brightness(1.1)}.ngxsp-yt-sourceButton:disabled{opacity:.7;cursor:progress}.ngxsp-yt-libraryStatus{display:inline-flex;align-items:center;gap:6px}.ngxsp-yt-libraryStatus:before{content:\"\";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--yt-success)}.ngxsp-yt-libraryStatus.busy:before{background:var(--yt-accent);animation:ngxsp-yt-pulse 1.2s ease-in-out infinite}@keyframes ngxsp-yt-pulse{0%,to{opacity:.35}50%{opacity:1}}.ngxsp-yt-round{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-round:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-rail{grid-area:rail;min-width:0;min-height:0;display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--yt-line);background:var(--yt-s0)}.ngxsp-yt-railButton{width:100%;min-height:56px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 2px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2);transition:background-color var(--yt-dur) var(--yt-ease),color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-railButton ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-railButton span{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;font-weight:500;line-height:1.15;text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}.ngxsp-yt-railButton:hover:not(:disabled){background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-railButton.active{background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-railButton.active ngxsp-smart-icon{color:var(--yt-accent)}.ngxsp-yt-railButton:disabled{opacity:.4;cursor:default}.ngxsp-yt-railExpanded .ngxsp-yt-railButton{min-height:36px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 12px}.ngxsp-yt-railExpanded .ngxsp-yt-railButton span{font-size:13px;text-align:left;-webkit-line-clamp:1;overflow-wrap:normal}.ngxsp-yt-railExpanded .ngxsp-yt-railButton ngxsp-smart-icon{width:18px;height:18px}.ngxsp-yt-body{grid-area:body;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--yt-side-w);overflow:hidden}.ngxsp-queue-hidden .ngxsp-yt-body{grid-template-columns:minmax(0,1fr)}.ngxsp-yt-watch{--yt-gutter:24px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:20px;padding:20px var(--yt-gutter) 40px;overflow:auto}.ngxsp-yt-cinema .ngxsp-yt-body{display:block;overflow:auto}.ngxsp-yt-cinema .ngxsp-yt-watch{overflow:visible;padding-top:16px}.ngxsp-yt-watch.player{padding:0;gap:0;overflow:hidden;height:100%}.ngxsp-yt-cinema .ngxsp-yt-watch.player{padding:0;overflow:hidden;height:100%}.ngxsp-yt-playerBack{position:absolute;top:12px;left:12px;z-index:4;display:none;align-items:center;gap:2px;height:36px;padding:0 14px 0 8px;border:0;border-radius:999px;background:#0000008c;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ngxsp-yt-playerBack ngxsp-smart-icon{width:18px;height:18px}.ngxsp-yt-playerShell{position:relative}.ngxsp-yt-watch.player .ngxsp-yt-playerShell{flex:1 1 auto;min-height:0}.ngxsp-yt-watch.player .ngxsp-yt-playerFrame{width:100%;min-width:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.ngxsp-yt-playerShell{flex:0 0 auto;display:flex;justify-content:center}.ngxsp-yt-playerFrame{position:relative;width:min(100%,calc((100vh - var(--yt-title-h) - 190px) * 16 / 9));min-width:min(100%,620px);aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--yt-r-md);background:#000;box-shadow:0 0 0 1px var(--yt-line),var(--nsp-shadow-media, 0 24px 60px rgb(0 0 0 / .45))}.ngxsp-yt-cinema .ngxsp-yt-playerFrame{width:min(100%,calc((100vh - var(--yt-title-h) - 48px) * 16 / 9))}.ngxsp-yt-playerFrame ngx-smart-player{position:absolute;inset:0;display:block}.ngxsp-yt-previewPlayer{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;overflow:hidden}.ngxsp-yt-previewPlayer img{transition:transform .6s var(--yt-ease),filter var(--yt-dur) var(--yt-ease)}.ngxsp-yt-previewPlayer:hover img{transform:scale(1.015);filter:brightness(.92)}.ngxsp-yt-previewOverlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#0000001a 40%,#0000008c)}.ngxsp-yt-previewPlay{width:72px;height:72px;display:grid;place-items:center;border-radius:999px;background:#fffffff0;color:#0d0e11;box-shadow:0 12px 40px #00000073;transition:transform var(--yt-dur) var(--yt-ease)}.ngxsp-yt-previewPlay ngxsp-smart-icon{width:30px;height:30px;margin-left:3px}.ngxsp-yt-previewPlayer:hover .ngxsp-yt-previewPlay{transform:scale(1.06)}.ngxsp-yt-emptyPlayer{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px 24px 88px;background:radial-gradient(80% 90% at 50% 20%,rgb(93 99 238 / .16),transparent 70%),#08090b;text-align:center}.ngxsp-yt-bigPlay{width:64px;height:64px;display:grid;place-items:center;margin-bottom:8px;border:0;border-radius:18px;background:var(--yt-accent-soft);color:var(--yt-accent);transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-bigPlay:hover{background:#8b90ff3d}.ngxsp-yt-bigPlay ngxsp-smart-icon{width:28px;height:28px}.ngxsp-yt-emptyPlayer span{color:var(--yt-text-2);font-size:12px;font-weight:600}.ngxsp-yt-emptyPlayer strong{font-size:20px;font-weight:600}.ngxsp-yt-emptyPlayer p{max-width:56ch;color:var(--yt-text-2)}.ngxsp-yt-transportBar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:40px 12px 10px;background:linear-gradient(180deg,#0000,#000000b8);pointer-events:none}.ngxsp-yt-transportBar>*{pointer-events:auto}.ngxsp-yt-shell.ngxsp-yt-compact{display:block;height:100vh;min-height:0;padding:env(titlebar-area-height,0px) 0 0;box-sizing:border-box}.ngxsp-yt-shell.ngxsp-yt-compact>:not(.ngxsp-yt-body){display:none!important}.ngxsp-yt-compact .ngxsp-yt-body{display:block;height:100%}.ngxsp-yt-compact .ngxsp-yt-body>:not(.ngxsp-yt-watch){display:none!important}.ngxsp-yt-compact .ngxsp-yt-watch{display:block;height:100%;padding:0;overflow:hidden}.ngxsp-yt-compact .ngxsp-yt-watch>:not(.ngxsp-yt-playerShell){display:none!important}.ngxsp-yt-compact .ngxsp-yt-playerShell{height:100%}.ngxsp-yt-compact .ngxsp-yt-playerFrame{position:relative;width:100%;min-width:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.ngxsp-yt-compactDrag{position:absolute;top:0;left:0;right:0;z-index:6;height:28px;-webkit-app-region:drag}.ngxsp-yt-compact .ngxsp-yt-playerInlineControls>.ngxsp-yt-playerAction:not(:first-child){display:none}.ngxsp-yt-compact ngx-smart-player ::ng-deep .ngxsp-inline-projection{display:inline-flex}.ngxsp-yt-compact :is(.ngxsp-yt-transportCinema,.ngxsp-yt-transportBar .ngxsp-yt-queueButton){display:none}.ngxsp-yt-transportCluster{display:flex;align-items:center;gap:4px}.ngxsp-yt-transportButton{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:#ffffffeb;transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-transportButton ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-transportButton:hover:not(:disabled){background:#ffffff1f}.ngxsp-yt-transportButton.active{color:var(--yt-accent)}.ngxsp-yt-transportButton:disabled{opacity:.4;cursor:default}.ngxsp-yt-transportPlay{width:44px;height:44px;display:grid;place-items:center;margin:0 4px;padding:0;border:0;border-radius:999px;background:#fff;color:#0d0e11;transition:transform var(--yt-dur) var(--yt-ease)}.ngxsp-yt-transportPlay:hover{transform:scale(1.05)}.ngxsp-yt-transportPlay ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-transportInfo{min-width:0;display:grid;gap:1px;color:#fff}.ngxsp-yt-transportInfo span{color:#ffffffb8;font-size:12px;font-weight:600}.ngxsp-yt-transportInfo strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}.ngxsp-yt-volumeControl{--ngxsp-control-size:36px;--ngxsp-volume-range-min:64px;--ngxsp-volume-range-max:92px;--ngxsp-volume-gap:2px;--ngxsp-volume-button-border:0;--ngxsp-volume-button-radius:6px;--ngxsp-volume-accent:#fff;--ngxsp-volume-track-bg:rgb(255 255 255 / .28);--ngxsp-volume-thumb-bg:#fff;--ngxsp-volume-thumb-size:12px;--ngxsp-volume-thumb-shadow:none;--ngxsp-focus-ring:0 0 0 2px var(--yt-accent);color:#fff}.ngxsp-yt-playerInlineControls{display:inline-flex;align-items:center;gap:0}.ngxsp-yt-playerAction{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#ffffffeb}.ngxsp-yt-playerAction ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-playerAction:hover{background:#ffffff1f}.ngxsp-yt-playerAction.active{color:var(--yt-accent)}.ngxsp-yt-metaBar{flex:0 0 auto;min-width:0;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}.ngxsp-yt-titleGroup{flex:1 1 320px;min-width:0;display:grid;gap:4px}.ngxsp-yt-titleGroup h1{font-size:22px;line-height:1.25;font-weight:700}.ngxsp-yt-shell .ngxsp-yt-titleGroup h1{letter-spacing:-.01em}.ngxsp-yt-titleGroup p{color:var(--yt-text-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ngxsp-yt-titleGroup small{color:var(--yt-text-3);font-size:12px}.ngxsp-yt-watchActions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.ngxsp-yt-rating{display:inline-flex;border-radius:999px;background:var(--yt-s2);overflow:hidden}.ngxsp-yt-watchActions button{height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--yt-s2);color:var(--yt-text);font-size:12px;font-weight:500;white-space:nowrap;transition:background-color var(--yt-dur) var(--yt-ease),color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-watchActions button:hover{background:var(--yt-s3)}.ngxsp-yt-watchActions button.active{color:var(--yt-accent)}.ngxsp-yt-watchActions button.active ngxsp-smart-icon ::ng-deep path{fill:var(--yt-accent-soft)}.ngxsp-yt-rating button{border-radius:0}.ngxsp-yt-rating button+button{position:relative;padding-left:12px}.ngxsp-yt-rating button+button:before{content:\"\";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--yt-line-strong)}.ngxsp-yt-rating button+button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ngxsp-yt-moreAction{width:34px;padding:0!important;justify-content:center}.ngxsp-yt-moreAction span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ngxsp-yt-watchActions ngxsp-smart-icon{width:17px;height:17px}.ngxsp-yt-toolRow{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:8px}.ngxsp-yt-tool{min-width:0;height:52px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;padding:0 10px 0 9px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1);text-align:left;transition:border-color var(--yt-dur) var(--yt-ease),background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-tool:hover{border-color:var(--yt-line-strong);background:var(--yt-s2)}.ngxsp-yt-tool.active{border-color:#8b90ff73;background:var(--yt-accent-soft)}.ngxsp-yt-toolIcon{--tone:var(--yt-text-2);width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--tone) 16%,transparent);color:var(--tone)}.ngxsp-yt-tool[data-tone=teal] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-teal, #3fcfbf)}.ngxsp-yt-tool[data-tone=red] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-red, #f47c7a)}.ngxsp-yt-tool[data-tone=blue] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-blue, #7cb1ff)}.ngxsp-yt-tool[data-tone=gold] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-gold, #f2bb5b)}.ngxsp-yt-toolIcon ngxsp-smart-icon{width:17px;height:17px}.ngxsp-yt-toolCopy{min-width:0;display:grid;gap:1px}.ngxsp-yt-toolCopy small,.ngxsp-yt-toolCopy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-toolCopy small{color:var(--yt-text-2);font-size:11px}.ngxsp-yt-toolCopy strong{font-size:13px;font-weight:500}.ngxsp-yt-art{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff8c}.ngxsp-yt-art ngxsp-smart-icon{width:26px;height:26px}[data-art] .ngxsp-yt-thumbnail:not(.has-image),[data-art] .ngxsp-yt-suggestionThumb:not(.has-image),[data-art] .ngxsp-yt-searchThumb:not(.has-image){background:radial-gradient(90% 80% at 15% 10%,rgb(255 255 255 / .14),transparent 60%),linear-gradient(140deg,var(--art-a, #3a3c55),var(--art-b, #15161c))}[data-art=aurora]{--art-a:#3a7f78;--art-b:#10252a}[data-art=orbit]{--art-a:#5157c9;--art-b:#1a1b3d}[data-art=ember]{--art-a:#b0603a;--art-b:#301810}[data-art=ridge]{--art-a:#4f6f94;--art-b:#131d2a}[data-art=signal]{--art-a:#a8416a;--art-b:#2c1120}[data-art=fog]{--art-a:#5d6270;--art-b:#1a1b20}.ngxsp-yt-nowBadge{position:absolute;right:8px;top:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:var(--yt-accent-strong);color:#fff;box-shadow:0 4px 12px #0006}.ngxsp-yt-nowBadge ngxsp-smart-icon{width:14px;height:14px}.ngxsp-yt-thumbKind{position:absolute;left:8px;top:8px;max-width:calc(100% - 50px);padding:2px 7px;border-radius:4px;background:#000000b8;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ngxsp-yt-cardProgress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff3}.ngxsp-yt-cardProgress i{position:absolute;inset:0 auto 0 0;background:var(--yt-accent)}.ngxsp-yt-thumbBadge,.ngxsp-yt-suggestionThumb>small,.ngxsp-yt-searchThumb>small{position:absolute;right:6px;bottom:7px;max-width:calc(100% - 12px);padding:2px 6px;border-radius:4px;background:#000000c7;color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngxsp-yt-sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.ngxsp-yt-sectionHead>div{min-width:0;display:grid;gap:2px}.ngxsp-yt-sectionHead strong{font-size:16px;font-weight:600}.ngxsp-yt-sectionHead small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-sectionHead.compact{padding:14px 16px 10px}.ngxsp-yt-sectionHead.compact strong{font-size:14px}.ngxsp-yt-sectionLink{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-sectionLink:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-servers{display:grid;gap:8px}.ngxsp-yt-serversHeading{margin:6px 0 2px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--yt-text-2);text-transform:uppercase}.ngxsp-yt-serverForm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1)}.ngxsp-yt-serverTitle{font-size:12px;font-weight:600;color:var(--yt-text-2)}.ngxsp-yt-discovered{flex:1 1 100%;display:grid;gap:4px;margin:0;padding:0;list-style:none}.ngxsp-yt-discovered li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:2px 0 2px 8px;border-top:1px solid var(--yt-line)}.ngxsp-yt-discovered li span{display:grid;min-width:0}.ngxsp-yt-discovered strong{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-discovered small,.ngxsp-yt-discovered li.empty{overflow:hidden;color:var(--yt-text-2);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-serverKind{height:32px;padding:0 8px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s2);color:var(--yt-text);font-size:12px}.ngxsp-yt-serverForm input{flex:1 1 180px;min-width:0;height:32px;padding:0 10px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s0, var(--yt-s2));color:var(--yt-text);font-size:12px}.ngxsp-yt-serverForm input::placeholder{color:var(--yt-text-3)}.ngxsp-yt-serverForm button{min-height:32px;padding:0 14px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-accent, var(--yt-s3));color:var(--yt-text);font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-serverForm button.secondary{border-color:var(--yt-line-strong, var(--yt-line));background:transparent}.ngxsp-yt-serverForm button[disabled]{opacity:.5;cursor:default}.ngxsp-yt-serverHint{flex:1 0 100%;color:var(--yt-text-3);font-size:11px}.ngxsp-yt-serverRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border-radius:var(--yt-r-sm)}.ngxsp-yt-serverRow.active{background:var(--yt-s1)}.ngxsp-yt-serverMain{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);text-align:left;cursor:pointer}.ngxsp-yt-serverMain span{display:grid;min-width:0}.ngxsp-yt-serverMain strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-serverMain small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-serverMain:hover{background:var(--yt-s2)}.ngxsp-yt-serverDisconnect{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2);cursor:pointer}.ngxsp-yt-serverDisconnect:hover{background:var(--yt-s2);color:var(--yt-danger, #e5484d)}.ngxsp-yt-lists{display:grid;gap:8px;margin-bottom:16px}.ngxsp-yt-listForm{display:flex;gap:6px}.ngxsp-yt-listForm input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s1);color:var(--yt-text);font-size:12px}.ngxsp-yt-listForm input::placeholder{color:var(--yt-text-3)}.ngxsp-yt-listForm button{min-height:32px;height:32px;padding:0 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s2);color:var(--yt-text);font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-listForm button[disabled]{opacity:.5;cursor:default}.ngxsp-yt-listTarget{margin:0;color:var(--yt-text-2);font-size:12px}.ngxsp-yt-listTarget strong{margin-left:4px;color:var(--yt-text)}.ngxsp-yt-listRows{display:grid;gap:4px}.ngxsp-yt-listRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border-radius:var(--yt-r-sm)}.ngxsp-yt-listRow.active{background:var(--yt-s1)}.ngxsp-yt-listMain{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);text-align:left;cursor:pointer}.ngxsp-yt-listMain span{display:grid;min-width:0}.ngxsp-yt-listMain strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-listMain small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-listMain:hover{background:var(--yt-s2)}.ngxsp-yt-listActions{display:flex;gap:2px}.ngxsp-yt-listActions button{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2);cursor:pointer}.ngxsp-yt-listActions button:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-listActions button.danger:hover{color:var(--yt-danger, #e5484d)}.ngxsp-yt-listRow .ngxsp-yt-listForm{grid-column:1 / -1;padding:0 8px 6px}.ngxsp-yt-listEmpty{margin:0;color:var(--yt-text-3);font-size:12px}.ngxsp-yt-countBadge{min-width:24px;height:22px;display:grid;place-items:center;padding:0 7px;border-radius:999px;background:var(--yt-s3);color:var(--yt-text-2);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.ngxsp-yt-panelTitle{display:block;color:var(--yt-text-2);font-size:12px;font-weight:600}.ngxsp-yt-searchWorkspace{flex:0 0 auto;display:grid;gap:12px;padding:16px;border:1px solid var(--yt-line);border-radius:var(--yt-r-lg);background:var(--yt-s1)}.ngxsp-yt-searchHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.ngxsp-yt-searchHead>div{min-width:0;display:grid;gap:2px}.ngxsp-yt-searchHead strong{font-size:16px;font-weight:600}.ngxsp-yt-searchHead small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-searchHead button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-searchHead button:hover{background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-searchFilters{display:flex;flex-wrap:wrap;gap:6px}.ngxsp-yt-searchFilters button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--yt-line-strong);border-radius:999px;background:transparent;color:var(--yt-text-2);font-size:12px;font-weight:500}.ngxsp-yt-searchFilters button small{color:var(--yt-text-3);font-variant-numeric:tabular-nums}.ngxsp-yt-searchFilters button:hover:not(:disabled){color:var(--yt-text);border-color:var(--yt-text-3)}.ngxsp-yt-searchFilters button.active{border-color:transparent;background:var(--yt-text);color:var(--yt-bg)}.ngxsp-yt-searchFilters button.active small{color:var(--yt-bg)}.ngxsp-yt-searchFilters button:disabled{opacity:.4;cursor:default}.ngxsp-yt-searchResults{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}.ngxsp-yt-searchResults.list{grid-template-columns:1fr}.ngxsp-yt-searchResult{position:relative;min-width:0;border-radius:var(--yt-r-md);transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-searchResult:hover,.ngxsp-yt-searchResult:focus-within{background:var(--yt-s2)}.ngxsp-yt-searchResult.active{background:var(--yt-accent-soft)}.ngxsp-yt-searchResultMain{width:100%;min-width:0;display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:12px;padding:8px;border:0;border-radius:inherit;background:transparent;text-align:left}.ngxsp-yt-searchThumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:6px;background:var(--yt-s3)}.ngxsp-yt-searchCopy{min-width:0;display:grid;gap:2px}.ngxsp-yt-searchCopy small{color:var(--yt-accent);font-size:11px;font-weight:600}.ngxsp-yt-searchCopy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}.ngxsp-yt-searchCopy em,.ngxsp-yt-searchCopy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:12px;font-style:normal}.ngxsp-yt-searchActions{position:absolute;right:8px;bottom:8px;display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--yt-s3);opacity:0;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-searchResult:hover .ngxsp-yt-searchActions,.ngxsp-yt-searchResult:focus-within .ngxsp-yt-searchActions{opacity:1}.ngxsp-yt-searchActions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--yt-text-2)}.ngxsp-yt-searchActions button:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-searchActions ngxsp-smart-icon{width:15px;height:15px}.ngxsp-yt-searchEmpty{grid-column:1 / -1;display:grid;justify-items:center;gap:6px;padding:28px 16px;color:var(--yt-text-2);text-align:center}.ngxsp-yt-searchEmpty ngxsp-smart-icon{width:24px;height:24px;color:var(--yt-text-3)}.ngxsp-yt-searchEmpty strong{color:var(--yt-text);font-weight:600}.ngxsp-yt-mediaDetail{flex:0 0 auto;min-width:0;display:grid;gap:0;border:1px solid var(--yt-line);border-radius:var(--yt-r-lg);background:var(--yt-s1);overflow:hidden}.ngxsp-yt-mediaHero{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:20px;padding:20px}.ngxsp-yt-mediaPoster{position:relative;align-self:start;aspect-ratio:16 / 9;overflow:hidden;display:grid;place-items:center;border-radius:var(--yt-r-md);background:linear-gradient(140deg,#4f6f94,#131d2a);box-shadow:var(--nsp-shadow-card, 0 12px 30px rgb(0 0 0 / .35))}.ngxsp-yt-mediaPoster span{color:#fffc;font-size:40px;font-weight:700}.ngxsp-yt-mediaDetailBody{min-width:0;display:grid;align-content:start;gap:8px}.ngxsp-yt-mediaKicker{color:var(--yt-accent);font-size:12px;font-weight:600}.ngxsp-yt-mediaDetailBody h2{font-size:18px;line-height:1.3;font-weight:600}.ngxsp-yt-mediaSubtitle{color:var(--yt-text);font-size:13px}.ngxsp-yt-mediaMeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;color:var(--yt-text-2);font-size:12px}.ngxsp-yt-mediaMeta span+span:before{content:\"\";display:inline-block;width:3px;height:3px;margin:0 8px 3px;border-radius:50%;background:var(--yt-text-3)}.ngxsp-yt-mediaSummary{max-width:72ch;color:var(--yt-text-2);font-size:13px;line-height:1.55}.ngxsp-yt-mediaProgress{display:flex;align-items:center;gap:10px;max-width:420px}.ngxsp-yt-mediaProgress>span{position:relative;flex:1;height:4px;border-radius:999px;background:var(--yt-s3);overflow:hidden}.ngxsp-yt-mediaProgress i{position:absolute;inset:0 auto 0 0;background:var(--yt-accent);border-radius:inherit}.ngxsp-yt-mediaProgress small{color:var(--yt-text-2);font-size:12px;white-space:nowrap}.ngxsp-yt-mediaTags{display:flex;flex-wrap:wrap;gap:6px}.ngxsp-yt-mediaTags span{height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;background:var(--yt-s3);color:var(--yt-text-2);font-size:11px;font-weight:500}.ngxsp-yt-mediaActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.ngxsp-yt-mediaActions button,.ngxsp-yt-inspectorActions button,.ngxsp-yt-miniRestore{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px 0 10px;border:1px solid var(--yt-line-strong);border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);font-size:12px;font-weight:500;white-space:nowrap}.ngxsp-yt-mediaActions button ngxsp-smart-icon,.ngxsp-yt-inspectorActions button ngxsp-smart-icon,.ngxsp-yt-miniRestore ngxsp-smart-icon{width:16px;height:16px}.ngxsp-yt-mediaActions button:hover:not(:disabled),.ngxsp-yt-inspectorActions button:hover:not(:disabled),.ngxsp-yt-miniRestore:hover{background:var(--yt-s3)}.ngxsp-yt-mediaActions button.primary,.ngxsp-yt-inspectorActions button.primary{border-color:transparent;background:var(--yt-accent-strong);color:var(--yt-on-accent)}.ngxsp-yt-mediaActions button.primary:hover:not(:disabled),.ngxsp-yt-inspectorActions button.primary:hover:not(:disabled){background:var(--yt-accent-strong);filter:brightness(1.1)}.ngxsp-yt-mediaActions button:disabled,.ngxsp-yt-inspectorActions button:disabled{opacity:.45;cursor:default}.ngxsp-yt-mediaWorkspace{display:grid;gap:14px;padding:16px 20px 20px;border-top:1px solid var(--yt-line)}.ngxsp-yt-mediaWorkspaceHead{display:grid;gap:2px}.ngxsp-yt-mediaWorkspaceHead strong{font-size:14px;font-weight:600}.ngxsp-yt-mediaWorkspaceHead small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-mediaWorkspaceGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.ngxsp-yt-chapterPanel,.ngxsp-yt-checkPanel{min-width:0;display:grid;align-content:start;gap:8px}.ngxsp-yt-chapterList,.ngxsp-yt-checkList{display:grid;gap:2px}.ngxsp-yt-mediaChapter{width:100%;min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:12px;padding:9px 10px;border:0;border-radius:var(--yt-r-sm);background:transparent;text-align:left;transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-mediaChapter:hover{background:var(--yt-s2)}.ngxsp-yt-mediaChapter.active{background:var(--yt-accent-soft)}.ngxsp-yt-chapterTime{display:grid;gap:2px}.ngxsp-yt-chapterTime em{justify-self:start;padding:1px 6px;border-radius:4px;background:var(--yt-s3);color:var(--yt-text);font-family:var(--nsp-font-mono, ui-monospace, Menlo, monospace);font-size:11px;font-style:normal;font-variant-numeric:tabular-nums}.ngxsp-yt-mediaChapter.active .ngxsp-yt-chapterTime em{background:var(--yt-accent-strong);color:#fff}.ngxsp-yt-chapterTime b{color:var(--yt-text-2);font-size:11px;font-weight:500}.ngxsp-yt-chapterCopy{min-width:0;display:grid;gap:2px}.ngxsp-yt-chapterCopy strong{font-size:13px;font-weight:500}.ngxsp-yt-chapterCopy small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-checkItem{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:12px;padding:9px 10px;border-radius:var(--yt-r-sm)}.ngxsp-yt-checkItem:hover{background:var(--yt-s2)}.ngxsp-yt-checkItem>span{--tone:var(--yt-text-3);width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 20%,transparent)}.ngxsp-yt-checkItem[data-tone=teal]>span{--tone:var(--nsp-tone-teal, #3fcfbf)}.ngxsp-yt-checkItem[data-tone=red]>span{--tone:var(--nsp-tone-red, #f47c7a)}.ngxsp-yt-checkItem[data-tone=blue]>span{--tone:var(--nsp-tone-blue, #7cb1ff)}.ngxsp-yt-checkItem[data-tone=gold]>span{--tone:var(--nsp-tone-gold, #f2bb5b)}.ngxsp-yt-checkItem>div{min-width:0;display:grid;gap:2px}.ngxsp-yt-checkItem strong{font-size:13px;font-weight:500}.ngxsp-yt-checkItem small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-checkItem em{color:var(--yt-text-2);font-size:12px;font-style:normal;white-space:nowrap}.ngxsp-yt-episodeRail{display:grid;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--yt-line)}.ngxsp-yt-episodeRail>div{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,220px);gap:12px;overflow-x:auto;padding-bottom:4px}.ngxsp-yt-episodeRail button{min-width:0;display:grid;gap:8px;padding:6px;border:0;border-radius:var(--yt-r-md);background:transparent;text-align:left}.ngxsp-yt-episodeRail button:hover{background:var(--yt-s2)}.ngxsp-yt-episodeRail button.active{background:var(--yt-accent-soft)}.ngxsp-yt-episodeThumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;display:grid;place-items:center;border-radius:6px;background:linear-gradient(140deg,#4f6f94,#131d2a)}.ngxsp-yt-episodeThumb>i{color:#fffc;font-size:22px;font-weight:700;font-style:normal}.ngxsp-yt-episodeThumb>em{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff3}.ngxsp-yt-episodeThumb>em i{position:absolute;inset:0 auto 0 0;background:var(--yt-accent)}.ngxsp-yt-episodeRail button>span:last-child{min-width:0;display:grid;gap:1px}.ngxsp-yt-episodeRail strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}.ngxsp-yt-episodeRail small,.ngxsp-yt-episodeRail button em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:12px;font-style:normal}.ngxsp-yt-library{flex:0 0 auto;display:grid;gap:12px}.ngxsp-yt-shelf{display:grid;gap:8px}.ngxsp-yt-shelfHead{display:flex;align-items:baseline;gap:8px;min-width:0}.ngxsp-yt-shelfHead strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}.ngxsp-yt-shelfHead small,.ngxsp-yt-shelfAll{flex:0 0 auto}.ngxsp-yt-shelfHead small{color:var(--yt-text-2);font-size:11.5px;font-variant-numeric:tabular-nums}.ngxsp-yt-shelfAll{margin-left:auto;padding:2px 8px;border:0;border-radius:999px;background:transparent;color:var(--yt-accent-strong);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}.ngxsp-yt-shelfAll:hover,.ngxsp-yt-shelfAll:focus-visible{background:var(--yt-s2)}.ngxsp-yt-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--yt-text-2)}.ngxsp-yt-trail b{color:var(--yt-text);font-weight:600}.ngxsp-yt-trailStep{padding:2px 6px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}.ngxsp-yt-trailStep:hover,.ngxsp-yt-trailStep:focus-visible{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px 16px}.ngxsp-yt-grid.list{grid-template-columns:1fr;gap:4px}.ngxsp-yt-grid.rail{--yt-rail-card:clamp(168px, 17vw, 320px);display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin-inline:calc(var(--yt-gutter, 24px) * -1);padding-inline:var(--yt-gutter, 24px);scroll-padding-inline:var(--yt-gutter, 24px);padding-bottom:4px;scrollbar-width:thin}.ngxsp-yt-grid.rail>*{flex:0 0 var(--yt-rail-card);scroll-snap-align:start}.ngxsp-yt-card{min-width:0;display:grid;align-content:start;gap:10px;padding:0;border:0;background:transparent;text-align:left}.ngxsp-yt-thumbnail{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--yt-r-md);background:var(--yt-s2);box-shadow:0 0 0 1px var(--yt-line)}.ngxsp-yt-thumbnail img{transition:transform .4s var(--yt-ease)}.ngxsp-yt-card:hover .ngxsp-yt-thumbnail img{transform:scale(1.04)}.ngxsp-yt-card.active .ngxsp-yt-thumbnail{box-shadow:0 0 0 2px var(--yt-accent)}.ngxsp-yt-cardCopy{min-width:0;display:grid;gap:2px;padding:0 2px}.ngxsp-yt-cardCopy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.35}.ngxsp-yt-card:hover .ngxsp-yt-cardCopy strong{color:var(--yt-text)}.ngxsp-yt-card.active .ngxsp-yt-cardCopy strong{color:var(--yt-accent)}.ngxsp-yt-cardCopy span,.ngxsp-yt-cardCopy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-cardCopy span{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-cardCopy small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-grid.list .ngxsp-yt-card{grid-template-columns:160px minmax(0,1fr);align-items:center;gap:14px;padding:6px;border-radius:var(--yt-r-md)}.ngxsp-yt-grid.list .ngxsp-yt-card:hover{background:var(--yt-s1)}.ngxsp-yt-sheetHeader,.ngxsp-yt-queueOpen{display:none}.ngxsp-yt-textButton{border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s2);color:var(--yt-text);font:inherit;font-size:13px;padding:6px 12px;cursor:pointer}.ngxsp-yt-panelTabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 8px 8px}.ngxsp-yt-panelPill{padding:6px 11px;border:1px solid var(--yt-line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1.2;cursor:pointer}.ngxsp-yt-panelPill.active{background:var(--yt-accent-strong);border-color:transparent;color:var(--yt-on-accent);font-weight:600}.ngxsp-yt-panelStack{display:flex;flex-direction:column;gap:10px;min-height:0}.ngxsp-yt-stackItem{border:1px solid var(--yt-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.ngxsp-yt-stackItem.collapsed{flex:0 0 auto}.ngxsp-yt-stackHead{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 11px;background:var(--yt-surface-2,rgba(127,127,127,.08))}.ngxsp-yt-stackHead strong{font-size:12.5px;font-weight:600}.ngxsp-yt-stackHead small{color:var(--yt-text-2);font-size:11px}.ngxsp-yt-stackIcon{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;opacity:.65}.ngxsp-yt-stackIcon:hover,.ngxsp-yt-stackIcon:focus-visible{opacity:1}.ngxsp-yt-stackHead .ngxsp-yt-stackIcon:first-of-type{margin-left:auto}.ngxsp-yt-stackItem svg{width:14px;height:14px}.ngxsp-yt-suggestions{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--yt-line);background:var(--yt-s0);overflow:hidden}.ngxsp-yt-cinema .ngxsp-yt-suggestions{border-left:0;border-top:1px solid var(--yt-line);background:transparent;overflow:visible;padding:0 8px 24px}.ngxsp-yt-suggestionList{flex:1;min-height:0;display:grid;align-content:start;gap:2px;padding:0 8px 12px;overflow:auto}.ngxsp-yt-cinema .ngxsp-yt-suggestionList{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));overflow:visible}.ngxsp-yt-suggestion{position:relative;min-width:0;border-radius:var(--yt-r-md);transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-suggestion:hover,.ngxsp-yt-suggestion:focus-within{background:var(--yt-s2)}.ngxsp-yt-suggestion.active{background:var(--yt-accent-soft)}.ngxsp-yt-suggestionMain{width:100%;min-width:0;display:grid;grid-template-columns:140px minmax(0,1fr);align-items:start;gap:12px;padding:8px;border:0;border-radius:inherit;background:transparent;text-align:left}.ngxsp-yt-suggestion.managed .ngxsp-yt-suggestionMain{padding-right:44px}.ngxsp-yt-suggestionThumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:6px;background:var(--yt-s3)}.ngxsp-yt-suggestionThumb .ngxsp-yt-nowBadge{left:5px;right:auto;top:5px;width:22px;height:22px}.ngxsp-yt-suggestionCopy{min-width:0;display:grid;gap:3px;padding-top:1px}.ngxsp-yt-suggestionCopy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.3}.ngxsp-yt-suggestion.active .ngxsp-yt-suggestionCopy strong{color:var(--yt-accent)}.ngxsp-yt-suggestionCopy span,.ngxsp-yt-suggestionCopy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-suggestionCopy span{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-suggestionCopy small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-queueControls{position:absolute;top:4px;right:4px;display:grid;gap:0;opacity:0;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-suggestion:hover .ngxsp-yt-queueControls,.ngxsp-yt-suggestion:focus-within .ngxsp-yt-queueControls,.ngxsp-yt-suggestion.active .ngxsp-yt-queueControls{opacity:1}.ngxsp-yt-queueControls button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:var(--yt-text-2)}.ngxsp-yt-queueControls button:hover:not(:disabled){background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-queueControls button:disabled{opacity:.3;cursor:default}.ngxsp-yt-queueControls ngxsp-smart-icon{width:15px;height:15px}.ngxsp-yt-backButton{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-height:32px;margin:0 0 2px -6px;padding:4px 10px 4px 4px;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-backButton ngxsp-smart-icon{flex:none;width:16px;height:16px}.ngxsp-yt-backButton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-backButton:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-sideGroupTitle{grid-column:1 / -1;padding:12px 8px 4px;color:var(--yt-text-2);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.ngxsp-yt-sideGroupTitle:first-child{padding-top:0}@media(min-width:861px){.ngxsp-yt-sectionsBeside .ngxsp-yt-library{display:none}}.ngxsp-yt-emptyList{margin:8px;padding:28px 16px;border:1px dashed var(--yt-line-strong);border-radius:var(--yt-r-md);color:var(--yt-text-2);text-align:center}.ngxsp-yt-miniPlayer{flex:0 0 auto;display:grid;grid-template-columns:88px minmax(0,1fr) auto auto;align-items:center;gap:10px;margin:0 8px 8px;padding:8px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1)}.ngxsp-yt-cinema .ngxsp-yt-miniPlayer{max-width:420px}.ngxsp-yt-miniArtwork{position:relative;aspect-ratio:16 / 9;overflow:hidden;padding:0;border:0;border-radius:5px;background:var(--yt-s3)}.ngxsp-yt-miniPlayBadge{position:absolute;inset:0;display:grid;place-items:center;background:#00000059;color:#fff;opacity:0;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-miniArtwork:hover .ngxsp-yt-miniPlayBadge,.ngxsp-yt-miniPlayer.playing .ngxsp-yt-miniPlayBadge{opacity:1}.ngxsp-yt-miniDetails{min-width:0;display:grid;gap:1px}.ngxsp-yt-miniDetails small{color:var(--yt-text-2);font-size:11px;font-weight:600}.ngxsp-yt-miniDetails strong,.ngxsp-yt-miniDetails span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-miniDetails strong{font-size:12px;font-weight:600}.ngxsp-yt-miniDetails span{color:var(--yt-text-2);font-size:11px}.ngxsp-yt-miniControl,.ngxsp-yt-miniClose{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2)}.ngxsp-yt-miniControl{background:var(--yt-text);color:var(--yt-bg)}.ngxsp-yt-miniClose:hover{background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-miniControl ngxsp-smart-icon,.ngxsp-yt-miniClose ngxsp-smart-icon{width:15px;height:15px}.ngxsp-yt-miniRestore{flex:0 0 auto;margin:0 16px 12px;color:var(--yt-text-2)}.ngxsp-yt-inspector{flex:1;min-height:0;display:flex;flex-direction:column}.ngxsp-yt-inspectorHead{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 12px 12px 16px;border-bottom:1px solid var(--yt-line)}.ngxsp-yt-inspectorIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--yt-accent-soft);color:var(--yt-accent)}.ngxsp-yt-inspectorTitle{min-width:0;display:grid;gap:1px}.ngxsp-yt-inspectorTitle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}.ngxsp-yt-inspectorTitle small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:12px}.ngxsp-yt-inspectorClose{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-inspectorClose:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-inspectorScroll{flex:1;min-height:0;display:grid;align-content:start;gap:14px;padding:14px 16px;overflow:auto}.ngxsp-yt-inspectorScroll ngxsp-settings{--ngxsp-settings-surface:var(--yt-s2);--ngxsp-settings-text:var(--yt-text);--ngxsp-settings-muted:var(--yt-text-2);--ngxsp-settings-line:var(--yt-line);--ngxsp-settings-control:var(--yt-s3);--ngxsp-settings-accent:var(--yt-accent);--ngxsp-settings-radius:var(--yt-r-md);gap:20px}.ngxsp-yt-inspectorStatus{color:var(--yt-text-2);font-size:13px;line-height:1.5}.ngxsp-yt-inspectorMetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ngxsp-yt-inspectorMetric{min-width:0;display:grid;gap:3px;padding:10px 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1)}.ngxsp-yt-inspectorMetric small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:11px}.ngxsp-yt-inspectorMetric strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.ngxsp-yt-inspectorMetric.success strong{color:var(--yt-success)}.ngxsp-yt-inspectorMetric.warning strong{color:var(--yt-warning)}.ngxsp-yt-inspectorList{display:grid;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);overflow:hidden}.ngxsp-yt-inspectorItem{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--yt-s1)}.ngxsp-yt-inspectorItem+.ngxsp-yt-inspectorItem{border-top:1px solid var(--yt-line)}.ngxsp-yt-inspectorItem>span{min-width:0;display:grid;gap:2px}.ngxsp-yt-inspectorItem strong{font-size:13px;font-weight:500}.ngxsp-yt-inspectorItem small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-inspectorItem em{flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 7px;border-radius:999px;background:var(--yt-s3);color:var(--yt-text-2);font-size:11px;font-style:normal;font-weight:500}.ngxsp-yt-inspectorItem.success em{background:#3ecf8e24;color:var(--yt-success)}.ngxsp-yt-inspectorItem.warning em{background:#f2a93b24;color:var(--yt-warning)}.ngxsp-yt-resumePrompt{position:absolute;left:14px;bottom:84px;z-index:6;display:flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:calc(100% - 28px);padding:8px 8px 8px 14px;border-radius:var(--yt-r-md);background:#0c0d11cc;box-shadow:0 10px 30px #00000059,0 0 0 1px #ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f1f1f4;font-size:13px}.ngxsp-yt-resumePrompt span{margin-right:4px}.ngxsp-yt-resumePrompt button{height:32px;padding:0 12px;border:1px solid rgb(255 255 255 / .22);border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}.ngxsp-yt-resumePrompt button.primary{border-color:transparent;background:#fff;color:#111}.ngxsp-yt-resumePrompt button:hover{background:#ffffff24}.ngxsp-yt-resumePrompt button.primary:hover{background:#ffffffdb}.ngxsp-yt-compact .ngxsp-yt-resumePrompt{left:8px;bottom:56px;font-size:12px}.ngxsp-yt-playerFrame{container-type:inline-size;--yt-info-w:min(360px, 42cqw)}.ngxsp-yt-infoOpen ngx-smart-player ::ng-deep .ngxsp-vod-centerDock{transform:translate(calc(var(--yt-info-w) / -2 - 5px));transition:transform .2s ease}.ngxsp-yt-infoOverlay{position:absolute;top:10px;right:10px;bottom:76px;z-index:6;width:var(--yt-info-w);display:flex;flex-direction:column;border-radius:var(--yt-r-md);background:#0c0d11b8;box-shadow:0 12px 40px #0006,0 0 0 1px #ffffff14;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:#f1f1f4;overflow:hidden}.ngxsp-yt-infoTabs{display:flex;align-items:center;gap:2px;padding:6px;border-bottom:1px solid rgb(255 255 255 / .1);overflow-x:auto;scrollbar-width:none}.ngxsp-yt-infoTabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:#ffffffb8;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.ngxsp-yt-infoTabs button ngxsp-smart-icon{width:16px;height:16px}.ngxsp-yt-infoTabs button:hover{background:#ffffff1a;color:#fff}.ngxsp-yt-infoTabs button.active{background:#ffffff24;color:#fff}.ngxsp-yt-infoTabs button:not(.active) span{display:none}.ngxsp-yt-infoTabs .ngxsp-yt-infoClose{margin-left:auto}.ngxsp-yt-infoHead{display:grid;gap:2px;padding:12px 16px 0}.ngxsp-yt-infoHead strong{font-size:15px;font-weight:600}.ngxsp-yt-infoHead small{color:#ffffffa6;font-size:12px}.ngxsp-yt-infoOverlay .ngxsp-yt-inspectorScroll{--yt-text:#f1f1f4;--yt-text-2:rgb(255 255 255 / .68);--yt-line:rgb(255 255 255 / .12);--yt-s1:rgb(255 255 255 / .06);--yt-s2:rgb(255 255 255 / .1)}.ngxsp-yt-infoOverlay .ngxsp-yt-inspectorActions{--yt-line:rgb(255 255 255 / .12);--yt-s1:rgb(255 255 255 / .06);--yt-text:#f1f1f4}@media(min-width:861px){.ngxsp-yt-hasInfoTabs:not(.ngxsp-yt-sources) .ngxsp-yt-toolRow{display:none}}@media(max-width:860px){.ngxsp-yt-infoOverlay{display:none}}.ngxsp-yt-inspectorActions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--yt-line)}.ngxsp-yt-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:#000}.ngxsp-yt-touchBadge{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;min-width:112px;padding:14px 18px;pointer-events:none;border-radius:var(--yt-r-lg);background:#000000b8;color:#fff}.ngxsp-yt-touchBadge strong{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.ngxsp-yt-touchBadge em{display:block;width:88px;height:4px;border-radius:999px;background:#ffffff47;overflow:hidden}.ngxsp-yt-touchBadge em i{display:block;height:100%;border-radius:999px;background:#fff}.ngxsp-yt-cardWrap{position:relative;display:block;min-width:0}.ngxsp-yt-cardMore{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:#0000009e;color:#fff;opacity:0;cursor:pointer;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-cardWrap:hover .ngxsp-yt-cardMore,.ngxsp-yt-cardMore:focus-visible,.ngxsp-yt-cardWrap:focus-within .ngxsp-yt-cardMore{opacity:1}@media(hover:none){.ngxsp-yt-cardMore{opacity:1}}.ngxsp-yt-cardMenuScrim{position:fixed;inset:0;z-index:60;padding:0;border:0;background:transparent;cursor:default}.ngxsp-yt-cardMenu{position:fixed;z-index:61;min-width:208px;max-width:280px;display:grid;gap:2px;padding:6px;border:1px solid var(--yt-line-strong);border-radius:var(--yt-r-md);background:var(--yt-s2);box-shadow:0 16px 40px #0000007a}.ngxsp-yt-cardMenuTitle{padding:6px 10px 8px;font-size:11px;font-weight:600;color:var(--yt-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-cardMenu button{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);font-size:13px;text-align:left;cursor:pointer}.ngxsp-yt-cardMenu button:hover{background:var(--yt-s3)}.ngxsp-yt-cardMenu button.danger{color:var(--yt-danger-text)}.ngxsp-yt-cardMenu button.danger:hover{background:#f25f5c29}.ngxsp-yt-convert{position:absolute;left:12px;right:12px;bottom:12px;z-index:45;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--yt-line-strong);border-radius:var(--yt-r-lg);background:var(--yt-s2);box-shadow:0 12px 32px #0000006b}.ngxsp-yt-convert.asking{border-color:var(--yt-accent)}.ngxsp-yt-convert.danger{border-color:var(--yt-danger)}.ngxsp-yt-convert.danger .ngxsp-yt-convertIcon{background:#f25f5c29;color:var(--yt-danger-text)}.ngxsp-yt-convert.danger .ngxsp-yt-convertActions button.keep{background:var(--yt-danger);color:var(--yt-on-accent)}.ngxsp-yt-convertIcon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--yt-accent-soft);color:var(--yt-accent)}.ngxsp-yt-convertText{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}.ngxsp-yt-convertText strong{font-size:13px;font-weight:600}.ngxsp-yt-convertText small{font-size:11px;color:var(--yt-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-convertText em{display:block;height:4px;border-radius:999px;background:var(--yt-s3);overflow:hidden}.ngxsp-yt-convertText em i{display:block;height:100%;border-radius:999px;background:var(--yt-accent);transition:width var(--yt-dur) var(--yt-ease)}.ngxsp-yt-convertActions{display:flex;gap:8px;flex:0 0 auto}.ngxsp-yt-convertActions button{min-height:32px;padding:0 14px;border:1px solid var(--yt-line-strong);border-radius:999px;background:var(--yt-s1);color:var(--yt-text);font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-convertActions button.keep{border-color:transparent;background:var(--yt-accent-strong);color:var(--yt-on-accent)}@media(max-width:560px){.ngxsp-yt-convert{flex-wrap:wrap}.ngxsp-yt-convertActions{width:100%;justify-content:flex-end}}.ngxsp-yt-dropOverlay{position:absolute;inset:12px;z-index:40;display:grid;place-content:center;justify-items:center;gap:10px;border:2px dashed var(--yt-accent);border-radius:14px;background:var(--nsp-scrim, rgb(13 14 17 / .88));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--yt-text);text-align:center;pointer-events:none}.ngxsp-yt-dropIcon{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:var(--yt-accent-soft);color:var(--yt-accent)}.ngxsp-yt-dropIcon ngxsp-smart-icon{width:28px;height:28px}.ngxsp-yt-dropOverlay strong{font-size:16px;font-weight:600}.ngxsp-yt-dropOverlay span:last-child{color:var(--yt-text-2)}@media(hover:none),(pointer:coarse){.ngxsp-yt-queueControls,.ngxsp-yt-searchActions{opacity:1}}@media(max-width:1380px){.ngxsp-yt-shell{--yt-side-w:320px}.ngxsp-yt-suggestionMain{grid-template-columns:120px minmax(0,1fr)}.ngxsp-yt-watchActions button>span{display:none}.ngxsp-yt-watchActions button{width:34px;padding:0;justify-content:center}.ngxsp-yt-rating button+button{padding-left:0}}@media(max-width:1180px){.ngxsp-yt-topbar{grid-template-columns:auto minmax(200px,1fr) auto}.ngxsp-yt-status,.ngxsp-yt-sourceButton span{display:none}.ngxsp-yt-sourceButton{width:32px;padding:0;justify-content:center}.ngxsp-yt-mediaHero{grid-template-columns:200px minmax(0,1fr)}}@media(max-width:1040px)and (min-width:861px){.ngxsp-yt-body,.ngxsp-queue-hidden .ngxsp-yt-body{display:block;overflow:auto}.ngxsp-yt-watch{overflow:visible}.ngxsp-yt-suggestions{border-left:0;border-top:1px solid var(--yt-line);background:transparent;overflow:visible;padding:0 16px 24px}.ngxsp-yt-suggestionList{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));overflow:visible}.ngxsp-yt-playerFrame{width:100%}}@media(max-width:860px){.ngxsp-yt-shell{height:auto;min-height:100%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:\"top\" \"rail\" \"body\";overflow:visible}.ngxsp-yt-topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px auto;gap:0 8px;padding:0 12px 10px}.ngxsp-yt-search{grid-column:1 / -1;grid-row:2}.ngxsp-yt-railMenu,.ngxsp-yt-round,.ngxsp-yt-languageSwitch,.ngxsp-yt-status{display:none}.ngxsp-yt-notificationsButton,.ngxsp-yt-windowButton{display:grid}.ngxsp-yt-rail{flex-direction:row;padding:6px 12px;border-right:0;border-bottom:1px solid var(--yt-line);overflow-x:auto}.ngxsp-yt-railButton{width:auto;min-height:36px;flex:0 0 auto;flex-direction:row;gap:6px;padding:0 10px}.ngxsp-yt-railButton span{font-size:12px}.ngxsp-yt-body,.ngxsp-queue-hidden .ngxsp-yt-body,.ngxsp-yt-cinema .ngxsp-yt-body{display:block;overflow:visible}.sheet>.ngxsp-yt-sheetHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;position:sticky;top:0;background:var(--yt-s0);z-index:1}.ngxsp-yt-watch{--yt-gutter:12px;gap:14px;padding:12px;overflow:visible}.ngxsp-yt-playerFrame,.ngxsp-yt-cinema .ngxsp-yt-playerFrame{width:100%;min-width:0;border-radius:var(--yt-r-sm)}.ngxsp-yt-transportBar{padding:28px 6px 6px;gap:4px}.ngxsp-yt-transportInfo,.ngxsp-yt-transportCinema{display:none}.ngxsp-yt-transportBar{grid-template-columns:auto auto;justify-content:space-between}.ngxsp-yt-titleGroup h1{font-size:18px}.ngxsp-yt-watchActions>button:nth-of-type(n+3){display:none}.ngxsp-yt-rating button+button{display:none}.ngxsp-yt-toolRow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.ngxsp-yt-toolRow::-webkit-scrollbar{display:none}.ngxsp-yt-toolRow .ngxsp-yt-tool{flex:0 0 auto;height:44px;grid-template-columns:24px auto;gap:8px}.ngxsp-yt-toolRow .ngxsp-yt-toolIcon{width:24px;height:24px}.ngxsp-yt-toolRow .ngxsp-yt-toolCopy strong{display:none}.ngxsp-yt-toolRow .ngxsp-yt-tool[data-tool=devices],.ngxsp-yt-toolRow .ngxsp-yt-tool[data-tool=cast]{order:-1}.ngxsp-yt-toolRow .ngxsp-yt-toolCopy small{color:var(--yt-text);font-size:13px}.ngxsp-yt-mediaHero{grid-template-columns:1fr;padding:14px}.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaPoster,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaKicker,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaDetailBody>h2,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaSubtitle,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaMeta{display:none}.ngxsp-yt-mediaWorkspace{display:none}.ngxsp-yt-episodeRail{padding:14px}.ngxsp-yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.ngxsp-yt-grid .ngxsp-yt-card:nth-child(n+5){display:none}.ngxsp-yt-searchResults{grid-template-columns:1fr}.ngxsp-yt-queueOpen{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1);color:var(--yt-text);font:inherit;font-size:14px;text-align:left;cursor:pointer}.ngxsp-yt-queueOpen span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-queueOpen small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-suggestions,.ngxsp-yt-cinema .ngxsp-yt-suggestions{display:none}.ngxsp-yt-suggestions.sheet,.ngxsp-yt-cinema .ngxsp-yt-suggestions.sheet{display:flex;position:fixed;inset:0;z-index:40;border:0;overflow-y:auto;background:var(--yt-s0);padding:env(safe-area-inset-top,0px) 12px calc(24px + env(safe-area-inset-bottom,0px))}.ngxsp-yt-suggestionList,.ngxsp-yt-cinema .ngxsp-yt-suggestionList{grid-template-columns:1fr;overflow:visible}.ngxsp-yt-suggestionList .ngxsp-yt-suggestion:nth-child(n+3){display:grid}.ngxsp-yt-suggestionMain{grid-template-columns:128px minmax(0,1fr)}.ngxsp-yt-miniPlayer{display:none}.ngxsp-yt-library-focus .ngxsp-yt-library{order:3}}@media(max-width:540px){.ngxsp-yt-brand strong{font-size:12px}.ngxsp-yt-mode button{padding:0 8px}.ngxsp-yt-railButton span{display:none}.ngxsp-yt-grid{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.ngxsp-yt-shell *,.ngxsp-yt-shell *:before,.ngxsp-yt-shell *:after{animation:none!important;transition:none!important}}.ngxsp-yt-body.ngxsp-yt-playing{display:grid;grid-template-columns:minmax(0,1fr) var(--yt-side-w);overflow:hidden;min-height:0}.ngxsp-queue-hidden .ngxsp-yt-body.ngxsp-yt-playing{grid-template-columns:minmax(0,1fr)}@media(max-width:1024px){.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-topbar,.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-rail{display:none}.ngxsp-yt-shell.ngxsp-yt-playerView{height:100vh;height:100dvh;min-height:0;grid-template-areas:none;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-body{grid-area:auto}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-body{grid-template-columns:minmax(0,1fr);height:100%}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-watch.player{height:100%;padding:0}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-playerShell{flex:1 1 auto;min-height:0}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-playerFrame{height:100%;aspect-ratio:auto;border-radius:0}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-playerBack{display:inline-flex}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartPlayerComponent, selector: "ngx-smart-player", inputs: ["config", "plugins", "ports", "engines", "debug", "startTimeSec", "autoplayOnInit", "playRequest", "canPrev", "canNext", "previousLabel", "nextLabel", "playLabel", "pauseLabel", "shuffleActive", "shuffleLabel", "repeatMode", "repeatLabel", "hasPlaylistControls", "mediaMode", "castEnabled", "castConnected", "documentShortcuts", "nowPlayingLabel", "nowListeningLabel", "fullscreenHintLabel", "fullscreenLabel", "readyStatusLabel", "playingStatusLabel", "pausedStatusLabel", "bufferingStatusLabel", "loadingStatusLabel", "endedStatusLabel", "errorStatusLabel", "outputVolume", "outputVolumeLabel", "outputMuteLabel", "outputUnmuteLabel", "timelineDurationSec", "timelineMarkers", "menuLabels"], outputs: ["ended", "videoSize", "progress", "prev", "next", "toggleShuffle", "cycleRepeat", "subtitles", "subtitlesLoaded", "cast", "stateChange", "playbackToggle", "outputVolumeChange"] }, { kind: "component", type: SmartPlayerIconComponent, selector: "ngxsp-smart-icon", inputs: ["name"] }, { kind: "component", type: SmartSettingsComponent, selector: "ngxsp-settings", inputs: ["sections"], outputs: ["settingChange", "settingAction"] }, { kind: "component", type: NgxspVolumeControl, selector: "ngxsp-volume-control", inputs: ["volume", "muted", "disabled", "compact", "showValue", "step", "volumeLabel", "muteLabel", "unmuteLabel"], outputs: ["volumeChange", "muteToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NgxSmartPlayerVideoUiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngxsp-video-player-ui', standalone: true, imports: [CommonModule, SmartPlayerComponent, SmartPlayerIconComponent, SmartSettingsComponent, NgxspVolumeControl], template: `
+    <section
+      class="ngxsp-yt-shell"
+      [class.ngxsp-yt-online]="runtimeMode === 'online'"
+      [class.ngxsp-yt-offline]="runtimeMode === 'offline'"
+      [class.ngxsp-yt-playing]="isPlaying"
+      [class.ngxsp-yt-playerView]="playerView"
+      [class.ngxsp-yt-cinema]="cinemaMode"
+      [class.ngxsp-has-source]="!!config"
+      [class.ngxsp-queue-hidden]="!queueVisible"
+      [class.ngxsp-mini-hidden]="!miniPlayerVisible"
+      [class.ngxsp-yt-dragActive]="fileDragActive"
+      [class.ngxsp-yt-library-focus]="isLibraryFocused"
+      [class.ngxsp-yt-menuRow]="menuLayout === 'horizontal'"
+      [class.ngxsp-yt-menuOff]="menuLayout === 'hidden'"
+      [class.ngxsp-yt-railExpanded]="railExpanded"
+      [class.ngxsp-yt-compact]="compactMode === 'mini'"
+      (dragenter)="onFileDragEnter($event)"
+      (dragover)="onFileDragOver($event)"
+      (dragleave)="onFileDragLeave($event)"
+      (drop)="onFileDrop($event)"
+    >
+      @if (fileDragActive) {
+      <div class="ngxsp-yt-dropOverlay" aria-hidden="true">
+        <span class="ngxsp-yt-dropIcon"><ngxsp-smart-icon name="folder" /></span>
+        <strong>{{ sourceDropTitle || sourceChangeTitle || sourceChangeLabel }}</strong>
+        @if (sourceDropHint) {
+        <span>{{ sourceDropHint }}</span>
+        }
+      </div>
+      }
+
+      @if (promptBar) {
+      <div class="ngxsp-yt-convert" [class.asking]="promptAsking" [class.danger]="!!promptBar.danger" [attr.role]="promptAsking ? 'alertdialog' : 'status'" aria-live="polite">
+        <span class="ngxsp-yt-convertIcon" aria-hidden="true"><ngxsp-smart-icon [name]="promptBar.danger ? 'trash' : 'download'" /></span>
+        <span class="ngxsp-yt-convertText">
+          <strong>{{ promptBar.message }}</strong>
+          @if (promptBar.hint) { <small>{{ promptBar.hint }}</small> }
+          @if (promptBar.percent !== undefined) {
+          <em role="progressbar" [attr.aria-valuenow]="safeProgressPercent(promptBar.percent)" aria-valuemin="0" aria-valuemax="100">
+            <i [style.width.%]="safeProgressPercent(promptBar.percent)"></i>
+          </em>
+          }
+        </span>
+        @if (promptAsking) {
+        <span class="ngxsp-yt-convertActions">
+          <button type="button" class="keep" (click)="promptAnswer.emit(true)">{{ promptBar.confirmLabel }}</button>
+          <button type="button" (click)="promptAnswer.emit(false)">{{ promptBar.cancelLabel }}</button>
+        </span>
+        }
+      </div>
+      }
+
+      @if (cardMenu) {
+      <button
+        class="ngxsp-yt-cardMenuScrim"
+        type="button"
+        [attr.aria-label]="cardMenuCloseLabel"
+        (click)="closeCardMenu()"
+        (contextmenu)="$event.preventDefault(); closeCardMenu()"
+      ></button>
+      <div
+        #cardMenuBox
+        class="ngxsp-yt-cardMenu"
+        role="menu"
+        tabindex="-1"
+        [attr.aria-label]="cardMenu.card.title"
+        [style.left.px]="cardMenu.x"
+        [style.top.px]="cardMenu.y"
+        (keydown.escape)="closeCardMenu()"
+      >
+        <strong class="ngxsp-yt-cardMenuTitle">{{ cardMenu.card.title }}</strong>
+        @for (action of cardMenu.card.actions; track action.id) {
+        <button type="button" role="menuitem" [class.danger]="!!action.danger" (click)="chooseCardAction(action)">
+          <ngxsp-smart-icon [name]="action.icon" />
+          <span>{{ action.label }}</span>
+        </button>
+        }
+      </div>
+      }
+
+      <header class="ngxsp-yt-topbar" data-tauri-drag-region>
+        <div class="ngxsp-yt-brand">
+          <button class="ngxsp-yt-railMenu" type="button" [attr.aria-expanded]="railExpanded" [attr.aria-label]="menuLabel" [title]="menuLabel" (click)="toggleRail()">
+            <ngxsp-smart-icon name="menu" />
+          </button>
+          @if (brandLogoSrc) {
+          <img class="ngxsp-yt-brandLogo" [src]="brandLogoSrc" alt="" width="26" height="26" />
+          } @else {
+          <span class="ngxsp-yt-brandIcon" aria-hidden="true"><ngxsp-smart-icon name="play" /></span>
+          }
+          <strong>NGXSP Video</strong>
+        </div>
+
+        <label class="ngxsp-yt-search">
+          <ngxsp-smart-icon name="search" />
+          <input type="search" [placeholder]="searchPlaceholder" [value]="searchTerm" (input)="onSearchInput($event)" (focus)="searchOpen = true" [attr.aria-label]="searchLabel" />
+        </label>
+
+        <div class="ngxsp-yt-actions">
+          @if (statusMessage) {
+          <span class="ngxsp-yt-status" [class.success]="statusKind === 'success'" [class.error]="statusKind === 'error'" [attr.role]="statusKind === 'error' ? 'alert' : 'status'" [attr.aria-live]="statusKind === 'error' ? 'assertive' : 'polite'" aria-atomic="true" [title]="statusMessage">
+            {{ statusMessage }}
+          </span>
+          }
+          @if (runtimeModeInHeader) {
+          <div class="ngxsp-yt-mode" role="group" [attr.aria-label]="runtimeModeLabel">
+            <button type="button" [class.active]="runtimeMode === 'online'" [attr.aria-pressed]="runtimeMode === 'online'" (click)="selectRuntimeMode('online')"><i aria-hidden="true"></i>{{ onlineLabel }}</button>
+            <button type="button" [class.active]="runtimeMode === 'offline'" [attr.aria-pressed]="runtimeMode === 'offline'" (click)="selectRuntimeMode('offline')"><i aria-hidden="true"></i>{{ offlineLabel }}</button>
+          </div>
+          }
+          @if (folderImportLabel) {
+          <!-- A folder is what builds the library; picking a single file next to it led nowhere. -->
+          <button class="ngxsp-yt-sourceButton" type="button" [disabled]="libraryBusy" [attr.aria-label]="folderImportLabel" [title]="folderImportLabel" (click)="addFolder.emit()">
+            <ngxsp-smart-icon name="folder" />
+            <span>{{ folderImportLabel }}</span>
+          </button>
+          } @else {
+          <button class="ngxsp-yt-sourceButton" type="button" [attr.aria-label]="sourceChangeTitle || sourceChangeLabel" [title]="sourceChangeTitle || sourceChangeLabel" (click)="videoFileInput.click()">
+            <ngxsp-smart-icon name="folder" />
+            <span>{{ sourceChangeLabel }}</span>
+          </button>
+          }
+          <input #videoFileInput class="ngxsp-yt-fileInput" type="file" [accept]="sourceChangeAccept" aria-hidden="true" tabindex="-1" (change)="onSourceFileInput($event)" />
+          @if (languageOptions.length) {
+          <div class="ngxsp-yt-languageSwitch" role="group" [attr.aria-label]="languageLabel">
+            @for (language of languageOptions; track language.id) {
+            <button type="button" [class.active]="language.id === activeLanguage" [attr.aria-pressed]="language.id === activeLanguage" (click)="languageChange.emit(language.id)">
+              {{ language.label }}
+            </button>
+            }
+          </div>
+          }
+          @if (compactModes && compactMode === 'full') {
+          <button class="ngxsp-yt-round ngxsp-yt-windowButton" type="button" [attr.aria-label]="compactMiniLabel" [title]="compactMiniLabel" (click)="compactModeChange.emit('mini')">
+            <ngxsp-smart-icon name="window-mini" />
+          </button>
+          }
+          <button class="ngxsp-yt-round ngxsp-yt-queueButton" type="button" [class.active]="queuePanelActive" [attr.aria-pressed]="queuePanelActive" [attr.aria-label]="queueActionLabel" [title]="queueActionLabel" (click)="onQueueAction()">
+            <ngxsp-smart-icon name="panel-right" />
+          </button>
+          <button class="ngxsp-yt-round ngxsp-yt-notificationsButton" type="button" [attr.aria-label]="notificationsLabel" [title]="notificationsLabel" (click)="toolSelect.emit('notifications')">
+            <ngxsp-smart-icon name="bell" />
+          </button>
+          <button class="ngxsp-yt-round" type="button" [attr.aria-label]="settingsLabel" [title]="settingsLabel" (click)="toolSelect.emit('settings')">
+            <ngxsp-smart-icon name="settings" />
+          </button>
+        </div>
+      </header>
+
+      <aside class="ngxsp-yt-rail" [attr.aria-label]="navigationLabel">
+        @for (item of navItems; track item.id) {
+        <button class="ngxsp-yt-railButton" type="button" [class.active]="item.active" [disabled]="item.disabled" [attr.aria-current]="item.active ? 'page' : null" [attr.aria-label]="item.label" [title]="item.label" (click)="selectNav(item)">
+          <ngxsp-smart-icon [name]="item.icon" />
+          <span>{{ item.label }}</span>
+        </button>
+        }
+      </aside>
+
+      <div class="ngxsp-yt-body" [class.ngxsp-yt-playing]="playerView" [class.ngxsp-yt-sources]="!showActiveMedia" [class.ngxsp-yt-hasInfoTabs]="infoTabs.length > 0" [class.ngxsp-yt-sectionsBeside]="sidePanelContent === 'sections' && queueVisible">
+        <section #contentScroll class="ngxsp-yt-watch" [class.player]="playerView" [attr.aria-label]="displayHeroTitle">
+          <!-- Watching: the player has the whole area. Browsing: the area belongs to the view being read. -->
+          @if (playerView) {
+          <section class="ngxsp-yt-playerShell">
+            @if (playerView) {
+            <button class="ngxsp-yt-playerBack" type="button" [attr.aria-label]="playerBackLabel" [title]="playerBackLabel" (click)="playerBack.emit()">
+              <ngxsp-smart-icon name="chevron-left" />
+              <span>{{ playerBackLabel }}</span>
+            </button>
+            }
+            <div
+              class="ngxsp-yt-playerFrame"
+              [class.empty]="!config"
+              [class.ngxsp-yt-infoOpen]="!!infoPanel"
+              (pointerdown)="onFramePointerDown($event)"
+              (pointermove)="onFramePointerMove($event)"
+              (pointerup)="onFramePointerUp($event)"
+              (pointercancel)="onFramePointerUp($event)"
+            >
+              @if (brightness < 100) {
+              <span class="ngxsp-yt-veil" aria-hidden="true" [style.opacity]="(100 - brightness) / 100"></span>
+              }
+              @if (touchAdjusting; as adjusting) {
+              <span class="ngxsp-yt-touchBadge" role="status" aria-live="polite">
+                <ngxsp-smart-icon [name]="adjusting.kind === 'brightness' ? 'spark' : adjusting.value === 0 ? 'volume-mute' : adjusting.value < 50 ? 'volume-low' : 'volume-high'" />
+                <strong>{{ adjusting.value }}%</strong>
+                <em><i [style.width.%]="adjusting.value"></i></em>
+              </span>
+              }
+              @if (compactMode === 'mini') {
+              <!-- A mini window has no title bar: this strip moves it. -->
+              <div class="ngxsp-yt-compactDrag" aria-hidden="true"></div>
+              }
+              @if (showPosterPreview) {
+              <button class="ngxsp-yt-previewPlayer" type="button" [attr.aria-label]="playLabel + ' - ' + displayHeroTitle" (click)="togglePrimaryPlayback()">
+                <img [src]="displayHeroArtwork" alt="" />
+                <span class="ngxsp-yt-previewOverlay" aria-hidden="true">
+                  <span class="ngxsp-yt-previewPlay"><ngxsp-smart-icon name="play" /></span>
+                </span>
+              </button>
+              } @else if (config) {
+              <ngx-smart-player
+                [config]="config"
+                [plugins]="plugins"
+                [ports]="ports"
+                [engines]="engines"
+                [debug]="debug"
+                [startTimeSec]="startTimeSec"
+                [playRequest]="playRequest"
+                [canPrev]="canPrev"
+                [canNext]="canNext"
+                [previousLabel]="previousLabel"
+                [nextLabel]="nextLabel"
+                [playLabel]="playLabel"
+                [pauseLabel]="pauseLabel"
+                [shuffleActive]="shuffleActive"
+                [shuffleLabel]="shuffleLabel"
+                [repeatMode]="repeatMode"
+                [repeatLabel]="repeatLabel"
+                [hasPlaylistControls]="hasPlaylistControls"
+                [mediaMode]="'video'"
+                [castEnabled]="castEnabled"
+                [castConnected]="castConnected"
+                [menuLabels]="playerMenuLabels"
+                [documentShortcuts]="false"
+                [nowPlayingLabel]="nowPlayingLabel"
+                [fullscreenHintLabel]="fullscreenHintLabel"
+                [fullscreenLabel]="fullscreenLabel"
+                [readyStatusLabel]="readyStatusLabel"
+                [playingStatusLabel]="playingStatusLabel"
+                [pausedStatusLabel]="pausedStatusLabel"
+                [bufferingStatusLabel]="bufferingStatusLabel"
+                [loadingStatusLabel]="loadingStatusLabel"
+                [endedStatusLabel]="endedStatusLabel"
+                [errorStatusLabel]="errorStatusLabel"
+                [outputVolume]="outputVolume / 100"
+                [outputVolumeLabel]="outputVolumeLabel"
+                [outputMuteLabel]="outputMuteLabel"
+                [outputUnmuteLabel]="outputUnmuteLabel"
+                [timelineDurationSec]="timelineDurationSec"
+                [timelineMarkers]="timelineMarkers"
+                (ended)="ended.emit()"
+                (videoSize)="videoSize.emit($event)"
+                (progress)="progress.emit($event)"
+                (prev)="prev.emit()"
+                (next)="next.emit()"
+                (toggleShuffle)="toggleShuffle.emit()"
+                (cycleRepeat)="cycleRepeat.emit()"
+                (cast)="cast.emit()"
+                (subtitlesLoaded)="subtitlesLoaded.emit($event)"
+                (stateChange)="onPlayerStateChange($event)"
+                (playbackToggle)="primaryPlaybackToggle.emit($event)"
+                (outputVolumeChange)="onOutputVolumeRatioChange($event)"
+              >
+                <div ngxsp-player-inline-controls class="ngxsp-yt-playerInlineControls">
+                  <!-- What a viewer does about the video they are watching, without leaving it. -->
+                  @if (watchActionsInPlayer && compactMode !== 'mini') {
+                  <button class="ngxsp-yt-playerAction" type="button" [class.active]="likeActive" [attr.aria-pressed]="likeActive" [attr.aria-label]="likeLabel" [title]="likeLabel" (click)="toolSelect.emit('like')">
+                    <ngxsp-smart-icon name="thumb-up" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction" type="button" [class.active]="watchLaterActive" [attr.aria-pressed]="watchLaterActive" [attr.aria-label]="watchLaterLabel" [title]="watchLaterLabel" (click)="watchLaterToggle.emit()">
+                    <ngxsp-smart-icon name="clock" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="queueAddActiveLabel" [title]="queueAddActiveLabel" (click)="queueAddActive.emit()">
+                    <ngxsp-smart-icon name="playlist-plus" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="shareLabel" [title]="shareLabel" (click)="toolSelect.emit('share')">
+                    <ngxsp-smart-icon name="share" />
+                  </button>
+                  }
+                  @if (compactMode === 'mini') {
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="compactRestoreLabel" [title]="compactRestoreLabel" (click)="compactModeChange.emit('full')">
+                    <ngxsp-smart-icon name="window-restore" />
+                  </button>
+                  } @else if (compactModes) {
+                  <button class="ngxsp-yt-playerAction" type="button" [attr.aria-label]="compactMiniLabel" [title]="compactMiniLabel" (click)="compactModeChange.emit('mini')">
+                    <ngxsp-smart-icon name="window-mini" />
+                  </button>
+                  }
+                  <button class="ngxsp-yt-playerAction" type="button" [class.active]="cinemaMode" [attr.aria-pressed]="cinemaMode" [attr.aria-label]="cinemaButtonLabel" [title]="cinemaButtonLabel" (click)="toggleCinema.emit()">
+                    <ngxsp-smart-icon [name]="cinemaMode ? 'cinema-active' : 'cinema'" />
+                  </button>
+                  <button class="ngxsp-yt-playerAction ngxsp-yt-queueButton" type="button" [class.active]="queuePanelActive" [attr.aria-expanded]="queuePanelActive" [attr.aria-label]="queueActionLabel" [title]="queueActionLabel" (click)="onQueueAction()">
+                    <ngxsp-smart-icon name="panel-right" />
+                  </button>
+                  @if (infoTabs.length) {
+                  <button class="ngxsp-yt-playerAction ngxsp-yt-infoButton" type="button" [class.active]="!!infoPanel" [attr.aria-pressed]="!!infoPanel" [attr.aria-label]="infoLabel" [title]="infoLabel" (click)="infoToggle.emit()">
+                    <ngxsp-smart-icon name="info" />
+                  </button>
+                  }
+                </div>
+              </ngx-smart-player>
+              } @else {
+              <div class="ngxsp-yt-emptyPlayer">
+                <button class="ngxsp-yt-bigPlay" type="button" [attr.aria-label]="primarySourceLabel" (click)="isOfflineMode ? videoFileInput.click() : onPrimarySourceAction()">
+                  <ngxsp-smart-icon [name]="primarySourceIcon" />
+                </button>
+                <span>{{ emptyKicker }}</span>
+                <strong>{{ emptyTitle }}</strong>
+                <p>{{ emptyBody }}</p>
+              </div>
+              }
+              @if (resumePromptShown && resumeOffer && config && !showPosterPreview) {
+              <div class="ngxsp-yt-resumePrompt" role="group" [attr.aria-label]="resumeOffer.message">
+                <span>{{ resumeOffer.message }}</span>
+                <button class="primary" type="button" (click)="chooseResume('resume')">{{ resumeOffer.resumeLabel }}</button>
+                <button type="button" (click)="chooseResume('restart')">{{ resumeOffer.restartLabel }}</button>
+              </div>
+              }
+              @if (infoPanel; as panel) {
+              <!-- Info panels float over the right of the picture; on phones they open in the sheet instead. -->
+              <section class="ngxsp-yt-infoOverlay" [attr.aria-label]="panel.title">
+                <div class="ngxsp-yt-infoTabs" role="tablist" [attr.aria-label]="infoLabel">
+                  @for (tab of infoTabs; track tab.id) {
+                  <button type="button" role="tab" [class.active]="tab.id === panel.id" [attr.aria-selected]="tab.id === panel.id" [title]="tab.label" (click)="infoTabSelect.emit(tab.id)">
+                    <ngxsp-smart-icon [name]="tab.icon" />
+                    <span>{{ tab.label }}</span>
+                  </button>
+                  }
+                  <button class="ngxsp-yt-infoClose" type="button" [attr.aria-label]="inspectorCloseLabel" [title]="inspectorCloseLabel" (click)="closeInspector.emit()">
+                    <ngxsp-smart-icon name="close" />
+                  </button>
+                </div>
+                <div class="ngxsp-yt-infoHead" role="tabpanel">
+                  <strong>{{ panel.title }}</strong>
+                  @if (panel.subtitle) { <small>{{ panel.subtitle }}</small> }
+                </div>
+                <ng-container *ngTemplateOutlet="panelBody; context: { $implicit: panel }" />
+              </section>
+              }
+              @if (showPosterPreview || !config) {
+              <section class="ngxsp-yt-transportBar" [attr.aria-label]="transportLabel">
+                <div class="ngxsp-yt-transportCluster primary">
+                  <button class="ngxsp-yt-transportButton" type="button" [disabled]="!canPrev" [attr.aria-label]="previousLabel" [title]="previousLabel" (click)="prev.emit()">
+                    <ngxsp-smart-icon name="prev" />
+                  </button>
+                  <button class="ngxsp-yt-transportPlay" type="button" [attr.aria-label]="isPlaying ? pauseLabel : playLabel" [title]="isPlaying ? pauseLabel : playLabel" (click)="togglePrimaryPlayback()">
+                    @if (isPlaying) { <ngxsp-smart-icon name="pause" /> } @else { <ngxsp-smart-icon name="play" /> }
+                  </button>
+                  <button class="ngxsp-yt-transportButton" type="button" [disabled]="!canNext" [attr.aria-label]="nextLabel" [title]="nextLabel" (click)="next.emit()">
+                    <ngxsp-smart-icon name="next" />
+                  </button>
+                </div>
+                <div class="ngxsp-yt-transportInfo" aria-hidden="true">
+                  <span>{{ heroEyebrow }}</span>
+                  <strong>{{ displayHeroTitle }}</strong>
+                </div>
+                <div class="ngxsp-yt-transportCluster secondary">
+                  <button class="ngxsp-yt-transportButton" type="button" [class.active]="repeatMode !== 'off'" [attr.aria-pressed]="repeatMode !== 'off'" [attr.aria-label]="repeatLabel" [title]="repeatLabel" (click)="cycleRepeat.emit()">
+                    <ngxsp-smart-icon [name]="repeatMode === 'one' ? 'repeat-one' : 'repeat'" />
+                  </button>
+                  <ngxsp-volume-control
+                    class="ngxsp-yt-volumeControl"
+                    [volume]="outputVolume / 100"
+                    [step]="0.05"
+                    [volumeLabel]="outputVolumeLabel"
+                    [muteLabel]="outputMuteLabel"
+                    [unmuteLabel]="outputUnmuteLabel"
+                    (muteToggle)="outputMuteToggle.emit()"
+                    (volumeChange)="onOutputVolumeRatioChange($event)"
+                  />
+                  <button class="ngxsp-yt-transportButton ngxsp-yt-transportCinema" type="button" [class.active]="cinemaMode" [attr.aria-pressed]="cinemaMode" [attr.aria-label]="cinemaButtonLabel" [title]="cinemaButtonLabel" (click)="toggleCinema.emit()">
+                    <ngxsp-smart-icon [name]="cinemaMode ? 'cinema-active' : 'cinema'" />
+                  </button>
+                  <button class="ngxsp-yt-transportButton ngxsp-yt-queueButton" type="button" [class.active]="queuePanelActive" [attr.aria-expanded]="queuePanelActive" [attr.aria-label]="queueActionLabel" [title]="queueActionLabel" (click)="onQueueAction()">
+                    <ngxsp-smart-icon name="panel-right" />
+                  </button>
+                  @if (compactMode === 'mini') {
+                  <button class="ngxsp-yt-transportButton" type="button" [attr.aria-label]="compactRestoreLabel" [title]="compactRestoreLabel" (click)="compactModeChange.emit('full')">
+                    <ngxsp-smart-icon name="window-restore" />
+                  </button>
+                  } @else if (compactModes) {
+                  <button class="ngxsp-yt-transportButton" type="button" [attr.aria-label]="compactMiniLabel" [title]="compactMiniLabel" (click)="compactModeChange.emit('mini')">
+                    <ngxsp-smart-icon name="window-mini" />
+                  </button>
+                  }
+                </div>
+              </section>
+              }
+            </div>
+          </section>
+          } @else {
+
+          <!-- What is being watched. A home view opens on where videos come from instead. -->
+          @if (showActiveMedia) {
+          <section class="ngxsp-yt-metaBar">
+            <div class="ngxsp-yt-titleGroup" [attr.aria-label]="displayHeroTitle + ' - ' + displayHeroSubtitle">
+              <h1>{{ displayHeroTitle }}</h1>
+              @if (displayHeroSubtitle) { <p>{{ displayHeroSubtitle }}</p> }
+              @if (displayHeroMeta) { <small>{{ displayHeroMeta }}</small> }
+            </div>
+            <div class="ngxsp-yt-watchActions">
+              <span class="ngxsp-yt-rating">
+                <button type="button" [class.active]="likeActive" [attr.aria-pressed]="likeActive" [attr.aria-label]="likeLabel" [title]="likeLabel" (click)="toolSelect.emit('like')"><ngxsp-smart-icon name="thumb-up" /><span>{{ likeLabel }}</span></button>
+                <button type="button" [attr.aria-label]="dislikeLabel" [title]="dislikeLabel" (click)="toolSelect.emit('dislike')"><ngxsp-smart-icon name="thumb-down" /><span>{{ dislikeLabel }}</span></button>
+              </span>
+              <button type="button" [attr.aria-label]="shareLabel" [title]="shareLabel" (click)="toolSelect.emit('share')"><ngxsp-smart-icon name="share" /><span>{{ shareLabel }}</span></button>
+              <button type="button" [class.active]="watchLaterActive" [attr.aria-pressed]="watchLaterActive" [attr.aria-label]="watchLaterLabel" [title]="watchLaterLabel" (click)="watchLaterToggle.emit()"><ngxsp-smart-icon name="clock" /><span>{{ watchLaterLabel }}</span></button>
+              <button type="button" [attr.aria-label]="queueAddActiveLabel" [title]="queueAddActiveLabel" (click)="queueAddActive.emit()"><ngxsp-smart-icon name="playlist-plus" /><span>{{ queueAddActiveShortLabel }}</span></button>
+              @if (revealFileLabel) {
+              <button type="button" [attr.aria-label]="revealFileLabel" [title]="revealFileLabel" (click)="revealFile.emit()"><ngxsp-smart-icon name="folder" /><span>{{ revealFileLabel }}</span></button>
+              }
+              <button type="button" class="ngxsp-yt-moreAction" [attr.aria-label]="moreLabel" [title]="moreLabel" (click)="toolSelect.emit('more')"><ngxsp-smart-icon name="more" /><span>{{ moreShortLabel }}</span></button>
+            </div>
+          </section>
+          }
+
+          <!-- Phones: the queue is a sheet, and this row is the one place that opens it. -->
+          <button class="ngxsp-yt-queueButton ngxsp-yt-queueOpen" type="button" [attr.aria-expanded]="queueSheetOpen" [title]="queueActionLabel" (click)="onQueueAction()">
+            <ngxsp-smart-icon name="panel-right" />
+            <span>{{ sidePanelTitle }}</span>
+            <small>{{ sidePanelCount }}</small>
+          </button>
+
+          @if (toolCards.length) {
+          <section class="ngxsp-yt-toolRow">
+            @for (tool of toolCards; track tool.id) {
+            <button class="ngxsp-yt-tool" type="button" [class.active]="tool.active" [attr.data-tool]="tool.id" [attr.data-tone]="tool.tone || 'neutral'" (click)="toolSelect.emit(tool.id)">
+              <span class="ngxsp-yt-toolIcon" aria-hidden="true"><ngxsp-smart-icon [name]="tool.icon" /></span>
+              <span class="ngxsp-yt-toolCopy"><small>{{ tool.label }}</small><strong>{{ tool.value }}</strong></span>
+            </button>
+            }
+          </section>
+          }
+
+          @if (hasSearchQuery) {
+          <section class="ngxsp-yt-searchWorkspace" [attr.aria-label]="searchResultsTitle">
+            <div class="ngxsp-yt-searchHead">
+              <div>
+                <strong>{{ searchResultsTitle }}</strong>
+                @if (searchResultsSummary) { <small>{{ searchResultsSummary }}</small> }
+              </div>
+              <button type="button" [attr.aria-label]="searchClearLabel" [title]="searchClearLabel" (click)="clearSearch()">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </div>
+            @if (searchFilters.length) {
+            <div class="ngxsp-yt-searchFilters" role="group" [attr.aria-label]="searchFilterLabel">
+              @for (filter of searchFilters; track filter.id) {
+              <button type="button" [class.active]="filter.active" [disabled]="filter.disabled" [attr.aria-pressed]="!!filter.active" (click)="selectSearchFilter(filter)">
+                <span>{{ filter.label }}</span>
+                @if (filter.count !== undefined) { <small>{{ filter.count }}</small> }
+              </button>
+              }
+            </div>
+            }
+            <div class="ngxsp-yt-searchResults" [class.list]="activeViewMode === 'list'">
+              @for (card of searchResultItems; track card.sectionId + ':' + card.item.id) {
+              <article class="ngxsp-yt-searchResult" [class.active]="card.item.active" [attr.data-art]="artVariant(card)">
+                <button class="ngxsp-yt-searchResultMain" type="button" [attr.aria-current]="card.item.active ? 'true' : null" [attr.aria-label]="searchResultActionLabel('play', card)" [title]="searchResultActionLabel('play', card)" (click)="selectCard(card)">
+                  <span class="ngxsp-yt-searchThumb" [class.has-image]="!!card.item.artworkUrl">
+                    @if (card.item.artworkUrl) {
+                    <img [src]="card.item.artworkUrl" alt="" />
+                    } @else {
+                    <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+                    }
+                    @if (card.item.duration && !card.item.artworkUrl) { <small>{{ card.item.duration }}</small> }
+                  </span>
+                  <span class="ngxsp-yt-searchCopy">
+                    @if (card.item.kindLabel || card.item.episodeLabel) { <small>{{ card.item.episodeLabel || card.item.kindLabel }}</small> }
+                    <strong>{{ card.item.title }}</strong>
+                    @if (card.item.subtitle) { <em>{{ card.item.subtitle }}</em> }
+                    @if (mediaCardMeta(card.item)) { <span>{{ mediaCardMeta(card.item) }}</span> }
+                  </span>
+                </button>
+                <span class="ngxsp-yt-searchActions">
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('queue', card)" [title]="searchResultActionLabel('queue', card)" (click)="searchResultQueueAdd.emit(card.item.id)">
+                    <ngxsp-smart-icon name="playlist-plus" />
+                  </button>
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('watchLater', card)" [title]="searchResultActionLabel('watchLater', card)" (click)="searchResultWatchLater.emit(card.item.id)">
+                    <ngxsp-smart-icon name="clock" />
+                  </button>
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('favorite', card)" [title]="searchResultActionLabel('favorite', card)" (click)="searchResultFavorite.emit(card.item.id)">
+                    <ngxsp-smart-icon name="heart" />
+                  </button>
+                  <button type="button" [attr.aria-label]="searchResultActionLabel('download', card)" [title]="searchResultActionLabel('download', card)" (click)="searchResultDownload.emit(card.item.id)">
+                    <ngxsp-smart-icon name="download" />
+                  </button>
+                </span>
+              </article>
+              } @empty {
+              <div class="ngxsp-yt-searchEmpty">
+                <ngxsp-smart-icon name="search" />
+                <strong>{{ searchResultsEmptyTitle }}</strong>
+                <span>{{ searchResultsEmptyBody }}</span>
+              </div>
+              }
+            </div>
+          </section>
+          }
+
+          @if (showActiveMedia) {
+          @if (mediaDetail; as detail) {
+          <section class="ngxsp-yt-mediaDetail" [attr.aria-label]="detail.title">
+            <div class="ngxsp-yt-mediaHero" [class.echoesHeader]="detailEchoesHeader">
+              <div class="ngxsp-yt-mediaPoster" [class.has-image]="!!detail.posterUrl">
+                @if (detail.posterUrl) {
+                <img [src]="detail.posterUrl" alt="" />
+                } @else {
+                <span>{{ posterInitial(detail.title) }}</span>
+                }
+              </div>
+              <div class="ngxsp-yt-mediaDetailBody">
+                <span class="ngxsp-yt-mediaKicker">{{ detail.kicker || detail.kindLabel || heroEyebrow }}</span>
+                <h2>{{ detail.title }}</h2>
+                @if (detail.subtitle) { <p class="ngxsp-yt-mediaSubtitle">{{ detail.subtitle }}</p> }
+                @if (detail.metaItems?.length) {
+                <div class="ngxsp-yt-mediaMeta">
+                  @for (meta of detail.metaItems; track meta) {
+                  <span>{{ meta }}</span>
+                  }
+                </div>
+                }
+                @if (detail.summary) { <p class="ngxsp-yt-mediaSummary">{{ detail.summary }}</p> }
+                @if (showResumeProgress && detail.progressPercent !== undefined) {
+                <div class="ngxsp-yt-mediaProgress">
+                  <span><i [style.width.%]="safeProgressPercent(detail.progressPercent)"></i></span>
+                  @if (detail.progressLabel) { <small>{{ detail.progressLabel }}</small> }
+                </div>
+                }
+                @if (detail.tags?.length) {
+                <div class="ngxsp-yt-mediaTags">
+                  @for (tag of detail.tags; track tag) {
+                  <span>{{ tag }}</span>
+                  }
+                </div>
+                }
+                @if (detail.actions?.length) {
+                <div class="ngxsp-yt-mediaActions">
+                  @for (action of detail.actions; track action.id) {
+                  <button type="button" [class.primary]="action.primary" [disabled]="action.disabled" (click)="detailAction.emit(action.id)">
+                    <ngxsp-smart-icon [name]="action.icon" />
+                    <span>{{ action.label }}</span>
+                  </button>
+                  }
+                </div>
+                }
+              </div>
+            </div>
+            @if (detail.chapters?.length || detail.checklist?.length) {
+            <div class="ngxsp-yt-mediaWorkspace">
+              @if (detail.workspaceTitle || detail.workspaceSummary) {
+              <div class="ngxsp-yt-mediaWorkspaceHead">
+                @if (detail.workspaceTitle) { <strong>{{ detail.workspaceTitle }}</strong> }
+                @if (detail.workspaceSummary) { <small>{{ detail.workspaceSummary }}</small> }
+              </div>
+              }
+              <div class="ngxsp-yt-mediaWorkspaceGrid">
+                @if (detail.chapters?.length) {
+                <div class="ngxsp-yt-chapterPanel">
+                  @if (detail.chaptersTitle) { <strong class="ngxsp-yt-panelTitle">{{ detail.chaptersTitle }}</strong> }
+                  <div class="ngxsp-yt-chapterList">
+                    @for (chapter of detail.chapters; track chapter.id) {
+                    <button type="button" class="ngxsp-yt-mediaChapter" [class.active]="chapter.active" (click)="selectMediaChapter(chapter)">
+                      <span class="ngxsp-yt-chapterTime">
+                        @if (chapter.time) { <em>{{ chapter.time }}</em> }
+                        @if (chapter.label) { <b>{{ chapter.label }}</b> }
+                      </span>
+                      <span class="ngxsp-yt-chapterCopy">
+                        <strong>{{ chapter.title }}</strong>
+                        @if (chapter.summary) { <small>{{ chapter.summary }}</small> }
+                      </span>
+                    </button>
+                    }
+                  </div>
+                </div>
+                }
+                @if (detail.checklist?.length) {
+                <div class="ngxsp-yt-checkPanel">
+                  @if (detail.checklistTitle) { <strong class="ngxsp-yt-panelTitle">{{ detail.checklistTitle }}</strong> }
+                  <div class="ngxsp-yt-checkList">
+                    @for (item of detail.checklist; track item.id) {
+                    <div class="ngxsp-yt-checkItem" [attr.data-tone]="item.tone || 'neutral'">
+                      <span aria-hidden="true"></span>
+                      <div>
+                        <strong>{{ item.label }}</strong>
+                        @if (item.description) { <small>{{ item.description }}</small> }
+                      </div>
+                      @if (item.value) { <em>{{ item.value }}</em> }
+                    </div>
+                    }
+                  </div>
+                </div>
+                }
+              </div>
+            </div>
+            }
+            @if (detail.episodes?.length) {
+            <div class="ngxsp-yt-episodeRail">
+              @if (detail.episodesTitle) { <strong class="ngxsp-yt-panelTitle">{{ detail.episodesTitle }}</strong> }
+              <div>
+                @for (episode of detail.episodes; track episode.id) {
+                <button type="button" [class.active]="episode.active" (click)="selectDetailEpisode.emit(episode.id)">
+                  <span class="ngxsp-yt-episodeThumb" [class.has-image]="!!episode.artworkUrl">
+                    @if (episode.artworkUrl) {
+                    <img [src]="episode.artworkUrl" alt="" />
+                    } @else {
+                    <i>{{ posterInitial(episode.title) }}</i>
+                    }
+                    @if (showResumeProgress && episode.progressPercent !== undefined) {
+                    <em><i [style.width.%]="safeProgressPercent(episode.progressPercent)"></i></em>
+                    }
+                  </span>
+                  <span>
+                    <strong>{{ episode.title }}</strong>
+                    @if (episode.subtitle) { <small>{{ episode.subtitle }}</small> }
+                    @if (episode.duration) { <em>{{ episode.duration }}</em> }
+                  </span>
+                </button>
+                }
+              </div>
+            </div>
+            }
+          </section>
+          }
+          }
+
+          @if (libraryVisible) {
+          <section class="ngxsp-yt-library">
+            <div class="ngxsp-yt-sectionHead">
+              <div>
+                <strong>{{ libraryTitle }}</strong>
+                @if (libraryStatus) {
+                <small class="ngxsp-yt-libraryStatus" [class.busy]="libraryBusy" role="status" aria-live="polite">{{ libraryStatus }}</small>
+                }
+              </div>
+              <button class="ngxsp-yt-sectionLink" type="button" [attr.aria-label]="browseLibraryLabel" [title]="browseLibraryLabel" (click)="toggleLibrary.emit()">
+                <ngxsp-smart-icon name="chevron-up" />
+              </button>
+            </div>
+            @if (trail.length > 1) {
+            <nav class="ngxsp-yt-trail" [attr.aria-label]="trailLabel">
+              @for (step of trail; track step.id; let last = $last) {
+              @if (last) {
+              <b aria-current="page">{{ step.label }}</b>
+              } @else {
+              <button class="ngxsp-yt-trailStep" type="button" (click)="trailStep.emit(step.id)">{{ step.label }}</button>
+              <span aria-hidden="true">/</span>
+              }
+              }
+            </nav>
+            }
+            @for (shelf of librarySections; track shelf.id) {
+            <div class="ngxsp-yt-shelf">
+              @if (shelf.titled) {
+              <div class="ngxsp-yt-shelfHead">
+                <strong>{{ shelf.title }}</strong>
+                <small>{{ shelf.count }}</small>
+                @if (shelf.hidden) {
+                <button class="ngxsp-yt-shelfAll" type="button" [attr.aria-expanded]="isSectionExpanded(shelf.id)" (click)="toggleSection(shelf.id)">{{ isSectionExpanded(shelf.id) ? showLessLabel : showAllLabel }}</button>
+                }
+              </div>
+              }
+              <div class="ngxsp-yt-grid" [class.list]="activeViewMode === 'list'" [class.rail]="activeViewMode !== 'list' && !isSectionExpanded(shelf.id)">
+                @for (card of shelf.cards; track card.sectionId + ':' + card.item.id) {
+                <ng-container *ngTemplateOutlet="mediaCard; context: { $implicit: card }" />
+                }
+              </div>
+            </div>
+            }
+          </section>
+          }
+          }
+        </section>
+
+        <ng-template #mediaCard let-card>
+          <span class="ngxsp-yt-cardWrap">
+                <button class="ngxsp-yt-card" type="button" [class.active]="card.item.active" [class.synthetic]="isSyntheticSection(card.sectionId)" [attr.aria-current]="card.item.active ? 'true' : null" [attr.data-art]="artVariant(card)" (click)="selectCard(card)" (contextmenu)="openCardMenu($event, card.item)">
+                  <span class="ngxsp-yt-thumbnail" [class.has-image]="!!card.item.artworkUrl">
+                    @if (card.item.artworkUrl) {
+                    <img [src]="card.item.artworkUrl" alt="" />
+                    } @else {
+                    <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+                    }
+                    @if (card.item.episodeLabel || card.item.kindLabel) {
+                    <small class="ngxsp-yt-thumbKind">{{ card.item.episodeLabel || card.item.kindLabel }}</small>
+                    }
+                    @if (!card.item.artworkUrl) {
+                    <small class="ngxsp-yt-thumbBadge">{{ card.item.duration || card.item.meta || sourceTypeLabel }}</small>
+                    }
+                    @if (card.item.active) {
+                    <span class="ngxsp-yt-nowBadge" aria-hidden="true"><ngxsp-smart-icon [name]="isPlaying ? 'waveform' : 'play'" /></span>
+                    }
+                    @if (showResumeProgress && card.item.progressPercent !== undefined) {
+                    <span class="ngxsp-yt-cardProgress" aria-hidden="true"><i [style.width.%]="safeProgressPercent(card.item.progressPercent)"></i></span>
+                    }
+                  </span>
+                  <span class="ngxsp-yt-cardCopy">
+                    <strong>{{ card.item.title }}</strong>
+                    @if (card.item.subtitle) { <span>{{ card.item.subtitle }}</span> }
+                    @if (mediaCardMeta(card.item)) { <small>{{ mediaCardMeta(card.item) }}</small> }
+                  </span>
+                </button>
+            @if (card.item.actions?.length) {
+            <button
+              class="ngxsp-yt-cardMore"
+              type="button"
+              [attr.aria-label]="cardActionsLabel"
+              [attr.aria-expanded]="cardMenu?.card?.id === card.item.id"
+              [title]="cardActionsLabel"
+              (click)="openCardMenu($event, card.item)"
+            >
+              <ngxsp-smart-icon name="more" />
+            </button>
+            }
+          </span>
+        </ng-template>
+
+        <!-- What a panel shows: in the side column, or over the video for the info panels. -->
+        <ng-template #panelBody let-panel>
+        <div class="ngxsp-yt-inspectorScroll">
+          @if (panel.status) {
+          <p class="ngxsp-yt-inspectorStatus">{{ panel.status }}</p>
+          }
+
+          @if (panel.metrics?.length) {
+          <div class="ngxsp-yt-inspectorMetrics">
+            @for (metric of panel.metrics; track metric.label) {
+            <span class="ngxsp-yt-inspectorMetric" [class.success]="metric.tone === 'success'" [class.warning]="metric.tone === 'warning'">
+              <small>{{ metric.label }}</small>
+              <strong>{{ metric.value }}</strong>
+            </span>
+            }
+          </div>
+          }
+
+          @if (panel.settings?.length) {
+          <ngxsp-settings [sections]="panel.settings!" (settingChange)="settingChange.emit($event)" (settingAction)="settingAction.emit($event)" />
+          }
+
+          @if (serverForm; as form) {
+          <section class="ngxsp-yt-servers" [attr.aria-label]="form.heading || form.title">
+            @if (form.heading) { <h2 class="ngxsp-yt-serversHeading">{{ form.heading }}</h2> }
+            @for (server of form.servers; track server.id) {
+            <div class="ngxsp-yt-serverRow" [class.active]="server.active">
+              <button class="ngxsp-yt-serverMain" type="button" [title]="form.openLabel + ' - ' + server.name" (click)="selectServer.emit(server.id)">
+                <ngxsp-smart-icon name="network" />
+                <span>
+                  <strong>{{ server.name }}</strong>
+                  @if (server.subtitle) { <small>{{ server.subtitle }}</small> }
+                </span>
+              </button>
+              <button class="ngxsp-yt-serverDisconnect" type="button" [attr.aria-label]="form.disconnectLabel + ' - ' + server.name" [title]="form.disconnectLabel" (click)="disconnectServer.emit(server.id)">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </div>
+            }
+            <form class="ngxsp-yt-serverForm" (submit)="submitServer($event)">
+              <span class="ngxsp-yt-serverTitle">{{ form.title }}</span>
+              @if (form.kinds && form.kinds.length > 1) {
+              <select class="ngxsp-yt-serverKind" [value]="serverKindDraft || form.kinds[0].id" (change)="onServerKindChange($event)" [attr.aria-label]="form.kindLabel || form.title">
+                @for (kind of form.kinds; track kind.id) {
+                <option [value]="kind.id">{{ kind.label }}</option>
+                }
+              </select>
+              }
+              @let serverKind = selectedServerKind(form);
+              <input type="text" inputmode="url" [value]="serverAddressDraft" (input)="onServerAddressInput($event)" [placeholder]="serverKind?.addressPlaceholder || form.addressPlaceholder" [attr.aria-label]="serverKind?.addressPlaceholder || form.addressPlaceholder" />
+              @if (serverKind?.credentials !== false) {
+              <input type="text" autocomplete="username" [value]="serverUsernameDraft" (input)="onServerUsernameInput($event)" [placeholder]="form.usernamePlaceholder" [attr.aria-label]="form.usernamePlaceholder" />
+              <input type="password" autocomplete="current-password" [value]="serverPasswordDraft" (input)="onServerPasswordInput($event)" [placeholder]="form.passwordPlaceholder" [attr.aria-label]="form.passwordPlaceholder" />
+              }
+              <button type="submit" [disabled]="form.busy || !serverAddressDraft.trim()">{{ form.submitLabel }}</button>
+              @if (form.discovery && serverKind?.discoverable) {
+              <button class="secondary" type="button" [disabled]="form.discovery.busy" (click)="discoverServers.emit(serverKind!.id)">{{ form.discovery.busy ? form.discovery.searchingLabel : form.discovery.searchLabel }}</button>
+              }
+              @if (form.hint) { <small class="ngxsp-yt-serverHint">{{ form.hint }}</small> }
+              @if (form.discovery && serverKind?.discoverable && (form.discovery.servers.length || form.discovery.emptyLabel)) {
+              <ul class="ngxsp-yt-discovered" [attr.aria-label]="form.discovery.searchLabel">
+                @for (server of form.discovery.servers; track server.id) {
+                <li>
+                  <span><strong>{{ server.name }}</strong>@if (server.subtitle) { <small>{{ server.subtitle }}</small> }</span>
+                  <button class="secondary" type="button" [disabled]="form.busy" [attr.aria-label]="form.discovery.connectLabel + ' - ' + server.name" (click)="connectDiscoveredServer.emit(server.id)">{{ form.discovery.connectLabel }}</button>
+                </li>
+                } @empty {
+                <li class="empty">{{ form.discovery.emptyLabel }}</li>
+                }
+              </ul>
+              }
+            </form>
+          </section>
+          }
+
+          @if (panel.trailingSettings?.length) {
+          <ngxsp-settings [sections]="panel.trailingSettings!" (settingChange)="settingChange.emit($event)" (settingAction)="settingAction.emit($event)" />
+          }
+
+          @if (panel.items?.length) {
+          <div class="ngxsp-yt-inspectorList">
+            @for (item of panel.items; track item.label) {
+            <div class="ngxsp-yt-inspectorItem" [class.success]="item.tone === 'success'" [class.warning]="item.tone === 'warning'">
+              <span>
+                <strong>{{ item.label }}</strong>
+                @if (item.description) { <small>{{ item.description }}</small> }
+              </span>
+              @if (item.value) { <em>{{ item.value }}</em> }
+            </div>
+            }
+          </div>
+          }
+        </div>
+
+        @if (panel.actions?.length) {
+        <div class="ngxsp-yt-inspectorActions">
+          @for (action of panel.actions; track action.id) {
+          <button type="button" [class.primary]="action.primary" [disabled]="action.disabled" (click)="inspectorAction.emit(action.id)">
+            <ngxsp-smart-icon [name]="action.icon" />
+            <span>{{ action.label }}</span>
+          </button>
+          }
+        </div>
+        }
+        </ng-template>
+
+        <!-- A row of the side panel: a video of the queue or of the section on show. -->
+        <ng-template #sideRow let-card let-label="label">
+          <button class="ngxsp-yt-suggestionMain" type="button" [attr.aria-current]="card.item.active ? 'true' : null" [attr.aria-label]="label" [title]="label" (click)="selectCard(card)">
+            <span class="ngxsp-yt-suggestionThumb" [class.has-image]="!!card.item.artworkUrl">
+              @if (card.item.artworkUrl) {
+              <img [src]="card.item.artworkUrl" alt="" />
+              } @else {
+              <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+              }
+              @if (card.item.duration && !card.item.artworkUrl) { <small>{{ card.item.duration }}</small> }
+              @if (card.item.active) {
+              <span class="ngxsp-yt-nowBadge" aria-hidden="true"><ngxsp-smart-icon [name]="isPlaying ? 'waveform' : 'play'" /></span>
+              }
+              @if (showResumeProgress && card.item.progressPercent !== undefined) {
+              <span class="ngxsp-yt-cardProgress" aria-hidden="true"><i [style.width.%]="safeProgressPercent(card.item.progressPercent)"></i></span>
+              }
+            </span>
+            <span class="ngxsp-yt-suggestionCopy">
+              <strong>{{ card.item.title }}</strong>
+              @if (card.item.subtitle) { <span>{{ card.item.subtitle }}</span> }
+              @if (mediaCardMeta(card.item)) { <small>{{ mediaCardMeta(card.item) }}</small> }
+            </span>
+          </button>
+        </ng-template>
+
+        @if (queueVisible || queueSheetOpen) {
+        <aside
+          class="ngxsp-yt-suggestions"
+          #queuePanel
+          tabindex="-1"
+          [class.sheet]="queueSheetOpen"
+          [attr.role]="queueSheetOpen ? 'dialog' : null"
+          [attr.aria-modal]="queueSheetOpen ? 'true' : null"
+          [attr.aria-label]="sidePanelTitle"
+          (keydown.escape)="closeQueueSheet()"
+        >
+          <!-- Phones only: the panel covers the page instead of pushing it down, and closes from here. -->
+          @if (queueSheetOpen) {
+          <div class="ngxsp-yt-sheetHeader">
+            <strong>{{ sidePanel?.title || sidePanelTitle }}</strong>
+            <button class="ngxsp-yt-textButton" type="button" (click)="closeQueueSheet()">{{ closeLabel }}</button>
+          </div>
+          }
+          <div class="ngxsp-yt-panelTabs" role="group" [attr.aria-label]="sidePanelTitle">
+            <button type="button" class="ngxsp-yt-panelPill" [class.active]="isPanelOpen('queue')" [attr.aria-pressed]="isPanelOpen('queue')" (click)="togglePanel('queue')">{{ sidePanelTitle }}</button>
+            @for (panel of knownPanels; track panel.id) {
+            <button type="button" class="ngxsp-yt-panelPill" [class.active]="isPanelOpen(panel.id)" [attr.aria-pressed]="isPanelOpen(panel.id)" (click)="togglePanel(panel.id)">{{ panel.title }}</button>
+            }
+          </div>
+
+          <div class="ngxsp-yt-panelStack">
+          @if (isPanelOpen('queue')) {
+          <section class="ngxsp-yt-stackItem" [class.collapsed]="isPanelCollapsed('queue')">
+            <header class="ngxsp-yt-stackHead">
+              <strong>{{ sidePanelTitle }}</strong>
+              @if (sidePanelCount) { <small>{{ sidePanelCount }}</small> }
+              <button class="ngxsp-yt-stackIcon" type="button" [attr.aria-expanded]="!isPanelCollapsed('queue')" [attr.aria-label]="sidePanelTitle" (click)="togglePanelCollapsed('queue')">
+                <ngxsp-smart-icon [name]="isPanelCollapsed('queue') ? 'chevron-down' : 'chevron-up'" />
+              </button>
+              <button class="ngxsp-yt-stackIcon" type="button" [attr.aria-label]="closeLabel" [title]="closeLabel" (click)="togglePanel('queue')">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </header>
+            @if (!isPanelCollapsed('queue')) {
+          <!-- A page with nothing to list and nothing to say about it (the lists block above speaks for it) shows no list. -->
+          @let sideListShown = sidePanelContent !== 'sections' || !!sidePanelCount || !!emptyCatalogLabel;
+          @if (sideListShown) {
+          <div class="ngxsp-yt-sectionHead compact">
+            <div>
+              @if (sideBackLabel) {
+              <button class="ngxsp-yt-backButton" type="button" [attr.aria-label]="sideBackLabel" [title]="sideBackLabel" (click)="sideBack.emit()">
+                <ngxsp-smart-icon name="chevron-left" />
+                <span>{{ sideBackLabel }}</span>
+              </button>
+              }
+              <strong>{{ sidePanelTitle }}</strong>
+              @if (sidePanelMeta) { <small>{{ sidePanelMeta }}</small> }
+            </div>
+            <span class="ngxsp-yt-countBadge">{{ sidePanelCount }}</span>
+          </div>
+          }
+          @if (sidePanelContent === 'sections') {
+          @if (sideListShown) {
+          <div class="ngxsp-yt-suggestionList">
+            @for (group of sideSectionGroups; track group.id) {
+            @if (sideSectionGroups.length > 1 && group.cards.length) { <strong class="ngxsp-yt-sideGroupTitle">{{ group.title }}</strong> }
+            @for (card of group.cards; track card.sectionId + ':' + card.item.id) {
+            <article class="ngxsp-yt-suggestion" [class.active]="card.item.active" [attr.data-art]="artVariant(card)">
+              <ng-container *ngTemplateOutlet="sideRow; context: { $implicit: card, label: playLabel + ' - ' + card.item.title }" />
+            </article>
+            }
+            }
+            @if (!sidePanelCount) {
+            <div class="ngxsp-yt-emptyList">{{ emptyCatalogLabel }}</div>
+            }
+          </div>
+          }
+          } @else {
+          <div class="ngxsp-yt-suggestionList" #queueList>
+            @for (card of displayQueueItems; track card.sectionId + ':' + card.item.id) {
+            <article class="ngxsp-yt-suggestion" [class.active]="card.item.active" [class.synthetic]="isSyntheticSection(card.sectionId)" [class.managed]="hasManagedQueue" [attr.data-art]="artVariant(card)">
+              <ng-container *ngTemplateOutlet="sideRow; context: { $implicit: card, label: queueItemActionLabel('play', card) }" />
+              @if (hasManagedQueue) {
+              <span class="ngxsp-yt-queueControls">
+                <button type="button" [disabled]="!canMoveQueueItem(card, 'up')" [attr.aria-label]="queueItemActionLabel('moveUp', card)" [title]="queueItemActionLabel('moveUp', card)" (click)="queueMoveUp.emit(card.item.id)">
+                  <ngxsp-smart-icon class="ngxsp-yt-queueUpIcon" name="chevron-up" />
+                </button>
+                <button type="button" [disabled]="!canMoveQueueItem(card, 'down')" [attr.aria-label]="queueItemActionLabel('moveDown', card)" [title]="queueItemActionLabel('moveDown', card)" (click)="queueMoveDown.emit(card.item.id)">
+                  <ngxsp-smart-icon class="ngxsp-yt-queueDownIcon" name="chevron-down" />
+                </button>
+                <button type="button" [attr.aria-label]="queueItemActionLabel('remove', card)" [title]="queueItemActionLabel('remove', card)" (click)="queueRemove.emit(card.item.id)">
+                  <ngxsp-smart-icon name="close" />
+                </button>
+              </span>
+              }
+            </article>
+            } @empty {
+            <div class="ngxsp-yt-emptyList">{{ emptyCatalogLabel }}</div>
+            }
+          </div>
+          }
+            }
+          </section>
+          }
+          @for (panel of openPanels; track panel.id) {
+          <section class="ngxsp-yt-stackItem" [class.collapsed]="isPanelCollapsed(panel.id)">
+          <section class="ngxsp-yt-inspector" [attr.aria-label]="panel.title">
+            <div class="ngxsp-yt-inspectorHead">
+              <span class="ngxsp-yt-inspectorIcon" aria-hidden="true">
+                <ngxsp-smart-icon [name]="panel.icon || 'settings'" />
+              </span>
+              <span class="ngxsp-yt-inspectorTitle">
+                <strong>{{ panel.title }}</strong>
+                @if (panel.subtitle) { <small>{{ panel.subtitle }}</small> }
+              </span>
+              <button class="ngxsp-yt-inspectorClose" type="button" [attr.aria-expanded]="!isPanelCollapsed(panel.id)" [attr.aria-label]="panel.title" [title]="panel.title" (click)="togglePanelCollapsed(panel.id)">
+                <ngxsp-smart-icon [name]="isPanelCollapsed(panel.id) ? 'chevron-down' : 'chevron-up'" />
+              </button>
+              <button class="ngxsp-yt-inspectorClose" type="button" [attr.aria-label]="inspectorCloseLabel" [title]="inspectorCloseLabel" (click)="closePanel(panel.id)">
+                <ngxsp-smart-icon name="close" />
+              </button>
+            </div>
+
+            @if (!isPanelCollapsed(panel.id)) {
+            <ng-container *ngTemplateOutlet="panelBody; context: { $implicit: panel }" />
+            }
+          </section>
+          </section>
+          }
+          </div>
+          @if (playlistPanel; as lists) {
+          <section class="ngxsp-yt-lists" [attr.aria-label]="lists.title">
+            <div class="ngxsp-yt-sectionHead compact">
+              <div><strong>{{ lists.title }}</strong></div>
+              <span class="ngxsp-yt-countBadge">{{ lists.playlists.length }}</span>
+            </div>
+            <form class="ngxsp-yt-listForm" (submit)="submitCreatePlaylist($event)">
+              <input type="text" [value]="playlistDraftName" (input)="onPlaylistDraftInput($event)" [placeholder]="lists.namePlaceholder" [attr.aria-label]="lists.namePlaceholder" />
+              <button type="submit" [disabled]="!playlistDraftName.trim()">{{ lists.createLabel }}</button>
+            </form>
+            @if (lists.target; as target) {
+            <p class="ngxsp-yt-listTarget">{{ lists.targetLabel }}<strong>{{ target.title }}</strong></p>
+            }
+            <div class="ngxsp-yt-listRows">
+              @for (list of lists.playlists; track list.id) {
+              <div class="ngxsp-yt-listRow" [class.active]="list.active">
+                <button class="ngxsp-yt-listMain" type="button" [attr.aria-current]="list.active ? 'true' : null" [title]="lists.openLabel + ' - ' + list.name" (click)="selectPlaylist.emit(list.id)">
+                  <ngxsp-smart-icon name="list" />
+                  <span>
+                    <strong>{{ list.name }}</strong>
+                    @if (list.itemCount !== undefined) { <small>{{ list.itemCount }} {{ lists.itemsCountLabel }}</small> }
+                  </span>
+                </button>
+                <span class="ngxsp-yt-listActions">
+                  @if (lists.target) {
+                  @if (list.containsTarget) {
+                  <button type="button" [attr.aria-label]="lists.removeLabel + ' - ' + list.name" [title]="lists.removeLabel" (click)="removeFromPlaylist.emit(list.id)">
+                    <ngxsp-smart-icon name="check" />
+                  </button>
+                  } @else {
+                  <button type="button" [attr.aria-label]="lists.addLabel + ' - ' + list.name" [title]="lists.addLabel" (click)="addToPlaylist.emit(list.id)">
+                    <ngxsp-smart-icon name="plus" />
+                  </button>
+                  }
+                  }
+                  <button type="button" [attr.aria-label]="lists.renameLabel + ' - ' + list.name" [title]="lists.renameLabel" (click)="startRenamePlaylist(list)">
+                    <ngxsp-smart-icon name="tag" />
+                  </button>
+                  <button type="button" class="danger" [attr.aria-label]="lists.deleteLabel + ' - ' + list.name" [title]="lists.deleteLabel" (click)="deletePlaylist.emit(list.id)">
+                    <ngxsp-smart-icon name="close" />
+                  </button>
+                </span>
+                @if (renamingPlaylistId === list.id) {
+                <form class="ngxsp-yt-listForm" (submit)="submitRenamePlaylist($event)">
+                  <input type="text" [value]="playlistRenameDraft" (input)="onPlaylistRenameInput($event)" [placeholder]="lists.renamePlaceholder" [attr.aria-label]="lists.renamePlaceholder" />
+                  <button type="submit" [disabled]="!playlistRenameDraft.trim()">{{ lists.saveLabel }}</button>
+                  <button type="button" (click)="cancelRenamePlaylist()">{{ lists.cancelLabel }}</button>
+                </form>
+                }
+              </div>
+              } @empty {
+              <p class="ngxsp-yt-listEmpty">{{ lists.emptyLabel }}</p>
+              }
+            </div>
+          </section>
+          }
+          @if (miniPlayerVisible) {
+          <article class="ngxsp-yt-miniPlayer" [class.playing]="isPlaying" [attr.aria-label]="nowPlayingLabel">
+            <button class="ngxsp-yt-miniArtwork" type="button" [attr.aria-label]="miniPlayerFocusLabel + ' - ' + displayHeroTitle" [title]="miniPlayerFocusLabel" (click)="miniPlayerFocus.emit()">
+              @if (displayHeroArtwork) {
+              <img [src]="displayHeroArtwork" alt="" />
+              } @else {
+              <span class="ngxsp-yt-art" aria-hidden="true"><ngxsp-smart-icon name="video" /></span>
+              }
+              <span class="ngxsp-yt-miniPlayBadge" aria-hidden="true">
+                @if (isPlaying) { <ngxsp-smart-icon name="waveform" /> } @else { <ngxsp-smart-icon name="play" /> }
+              </span>
+            </button>
+            <span class="ngxsp-yt-miniDetails">
+              <small>{{ miniPlayerMeta || heroEyebrow }}</small>
+              <strong>{{ displayHeroTitle }}</strong>
+              @if (displayHeroSubtitle) { <span>{{ displayHeroSubtitle }}</span> }
+            </span>
+            <button class="ngxsp-yt-miniControl" type="button" [attr.aria-label]="miniPlayerPlaybackLabel" [title]="miniPlayerPlaybackLabel" (click)="toggleMiniPlayerPlayback()">
+              @if (isPlaying) { <ngxsp-smart-icon name="pause" /> } @else { <ngxsp-smart-icon name="play" /> }
+            </button>
+            <button class="ngxsp-yt-miniClose" type="button" [attr.aria-label]="miniPlayerCloseLabel" [title]="miniPlayerCloseLabel" (click)="miniPlayerClose.emit()">
+              <ngxsp-smart-icon name="close" />
+            </button>
+          </article>
+          } @else {
+          <button class="ngxsp-yt-miniRestore" type="button" [attr.aria-label]="miniPlayerRestoreLabel" [title]="miniPlayerRestoreLabel" (click)="miniPlayerRestore.emit()">
+            <ngxsp-smart-icon name="window-mini" />
+            <span>{{ miniPlayerRestoreLabel }}</span>
+          </button>
+          }
+        </aside>
+        }
+      </div>
+    </section>
+`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%;min-height:0;color:var(--nsp-text, #ededf0);font-family:var(--nsp-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, sans-serif);font-size:13px;line-height:1.4}.ngxsp-yt-shell{--yt-bg:var(--nsp-bg, #0d0e11);--yt-s0:var(--nsp-surface-0, #121317);--yt-s1:var(--nsp-surface-1, #17181d);--yt-s2:var(--nsp-surface-2, #1e1f25);--yt-s3:var(--nsp-surface-3, #26272e);--yt-line:var(--nsp-line, rgb(255 255 255 / .07));--yt-line-strong:var(--nsp-line-strong, rgb(255 255 255 / .13));--yt-text:var(--nsp-text, #ededf0);--yt-text-2:var(--nsp-text-2, #a3a5ae);--yt-text-3:var(--nsp-text-3, #80828c);--yt-accent:var(--nsp-accent, #8b90ff);--yt-accent-strong:var(--nsp-accent-strong, #5d63ee);--yt-accent-soft:var(--nsp-accent-soft, rgb(139 144 255 / .14));--yt-on-accent:var(--nsp-on-accent, #fff);--yt-success:var(--nsp-success, #3ecf8e);--yt-warning:var(--nsp-warning, #f2a93b);--yt-danger:var(--nsp-danger, #f25f5c);--yt-danger-text:var(--nsp-danger-text, #ffb4b2);--yt-live:var(--nsp-live, #f25f5c);--yt-r-sm:var(--nsp-radius-sm, 6px);--yt-r-md:var(--nsp-radius-md, 10px);--yt-r-lg:var(--nsp-radius-lg, 14px);--yt-ease:var(--nsp-ease, cubic-bezier(.2,0,0,1));--yt-dur:var(--nsp-dur, .14s);--yt-title-h:var(--nsp-titlebar-height, 48px);--yt-rail-w:84px;--yt-side-w:360px;--yt-mode:var(--yt-text-2);position:relative;height:100%;min-height:600px;display:grid;grid-template-columns:var(--yt-rail-w) minmax(0,1fr);grid-template-rows:var(--yt-title-h) minmax(0,1fr);grid-template-areas:\"top top\" \"rail body\";overflow:hidden;background:var(--yt-bg);color:var(--yt-text);box-sizing:border-box}.ngxsp-yt-shell.ngxsp-yt-railExpanded{--yt-rail-w:220px}.ngxsp-yt-shell.ngxsp-yt-menuRow{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--yt-title-h) auto minmax(0,1fr);grid-template-areas:\"top\" \"rail\" \"body\"}.ngxsp-yt-menuRow .ngxsp-yt-rail{flex-direction:row;padding:6px 12px;border-right:0;border-bottom:1px solid var(--yt-line);overflow-x:auto;overflow-y:hidden}.ngxsp-yt-menuRow .ngxsp-yt-railButton{width:auto;min-height:36px;flex:0 0 auto;flex-direction:row;gap:6px;padding:0 10px}.ngxsp-yt-menuRow .ngxsp-yt-railButton span{font-size:12px}.ngxsp-yt-menuRow .ngxsp-yt-railMenu{display:none}.ngxsp-yt-shell.ngxsp-yt-menuOff{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--yt-title-h) minmax(0,1fr);grid-template-areas:\"top\" \"body\"}.ngxsp-yt-menuOff .ngxsp-yt-rail{display:none}.ngxsp-yt-shell.ngxsp-yt-online{--yt-mode:var(--yt-live)}.ngxsp-yt-shell.ngxsp-yt-offline{--yt-mode:var(--yt-success)}.ngxsp-yt-shell *{box-sizing:border-box;letter-spacing:0}.ngxsp-yt-shell *::-webkit-scrollbar{width:10px;height:10px}.ngxsp-yt-shell *::-webkit-scrollbar-track{background:transparent}.ngxsp-yt-shell *::-webkit-scrollbar-thumb{background:var(--yt-s3);border-radius:999px;border:3px solid transparent;background-clip:padding-box}button,input{font:inherit;color:inherit}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,p{margin:0}ngxsp-smart-icon{width:18px;height:18px}.ngxsp-yt-fileInput{display:none}.ngxsp-yt-shell button:focus-visible,.ngxsp-yt-shell input:focus-visible{outline:2px solid var(--yt-accent);outline-offset:2px}.ngxsp-yt-topbar{grid-area:top;min-width:0;display:grid;grid-template-columns:auto minmax(200px,1fr) auto;align-items:center;gap:16px;padding:0 calc(12px + var(--nsp-titlebar-inset-end, 0px)) 0 calc(12px + var(--nsp-titlebar-inset-start, 0px));border-bottom:1px solid var(--yt-line);background:var(--yt-s0);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}.ngxsp-yt-topbar button,.ngxsp-yt-topbar input,.ngxsp-yt-topbar label,.ngxsp-yt-topbar .ngxsp-yt-status{-webkit-app-region:no-drag}.ngxsp-yt-brand{min-width:0;display:flex;align-items:center;gap:10px}.ngxsp-yt-railMenu{width:32px;height:32px;display:grid;place-items:center;padding:0;margin-right:6px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-railMenu:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-brandIcon{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:7px;color:#fff;background:linear-gradient(145deg,#8b90ff,#5d63ee 55%,#4146c9);box-shadow:inset 0 1px #ffffff38}.ngxsp-yt-brandIcon ngxsp-smart-icon{width:14px;height:14px;margin-left:1px}.ngxsp-yt-brandLogo{width:26px;height:26px;flex:0 0 auto;display:block}.ngxsp-yt-brand strong{font-size:13px;font-weight:600;white-space:nowrap}.ngxsp-yt-search{position:relative;justify-self:center;width:100%;max-width:520px;height:34px;display:block;color:var(--yt-text-3)}.ngxsp-yt-search ngxsp-smart-icon{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none}.ngxsp-yt-search input{width:100%;height:100%;padding:0 10px 0 35px;border:1px solid transparent;border-radius:8px;outline:0;background:var(--yt-s2);color:var(--yt-text);font-size:13px;transition:border-color var(--yt-dur) var(--yt-ease),background-color var(--yt-dur) var(--yt-ease),box-shadow var(--yt-dur) var(--yt-ease)}.ngxsp-yt-search input:hover{border-color:var(--yt-line-strong)}.ngxsp-yt-shell .ngxsp-yt-search input:focus,.ngxsp-yt-shell .ngxsp-yt-search input:focus-visible{outline:0;border-color:var(--yt-accent);background:var(--yt-s1);box-shadow:0 0 0 3px var(--yt-accent-soft)}.ngxsp-yt-search input::placeholder{color:var(--yt-text-3)}.ngxsp-yt-actions{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngxsp-yt-status{min-width:0;max-width:260px;height:26px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border-radius:999px;background:var(--yt-s2);color:var(--yt-text-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngxsp-yt-status:before{content:\"\";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--yt-accent)}.ngxsp-yt-status.success:before{background:var(--yt-success)}.ngxsp-yt-status.error{color:var(--yt-danger-text);background:#f25f5c29}.ngxsp-yt-status.error:before{background:var(--yt-danger)}.ngxsp-yt-mode,.ngxsp-yt-languageSwitch{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:8px;background:var(--yt-s2)}.ngxsp-yt-mode button,.ngxsp-yt-languageSwitch button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--yt-text-2);font-size:12px;font-weight:500;white-space:nowrap}.ngxsp-yt-mode button i{width:6px;height:6px;border-radius:50%;background:var(--yt-text-3)}.ngxsp-yt-mode button:hover,.ngxsp-yt-languageSwitch button:hover{color:var(--yt-text)}.ngxsp-yt-mode button.active,.ngxsp-yt-languageSwitch button.active{background:var(--yt-s3);color:var(--yt-text);box-shadow:0 1px 2px #0000004d}.ngxsp-yt-mode button.active i{background:var(--yt-mode);box-shadow:0 0 0 3px color-mix(in srgb,var(--yt-mode) 22%,transparent)}.ngxsp-yt-sourceButton{flex:0 0 auto;height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 10px;border:0;border-radius:var(--yt-r-sm);background:var(--yt-accent-strong);color:var(--yt-on-accent);font-size:12px;font-weight:600;white-space:nowrap}.ngxsp-yt-sourceButton ngxsp-smart-icon{width:16px;height:16px}.ngxsp-yt-sourceButton:hover{filter:brightness(1.1)}.ngxsp-yt-sourceButton:disabled{opacity:.7;cursor:progress}.ngxsp-yt-libraryStatus{display:inline-flex;align-items:center;gap:6px}.ngxsp-yt-libraryStatus:before{content:\"\";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--yt-success)}.ngxsp-yt-libraryStatus.busy:before{background:var(--yt-accent);animation:ngxsp-yt-pulse 1.2s ease-in-out infinite}@keyframes ngxsp-yt-pulse{0%,to{opacity:.35}50%{opacity:1}}.ngxsp-yt-round{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-round:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-rail{grid-area:rail;min-width:0;min-height:0;display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--yt-line);background:var(--yt-s0)}.ngxsp-yt-railButton{width:100%;min-height:56px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 2px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2);transition:background-color var(--yt-dur) var(--yt-ease),color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-railButton ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-railButton span{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;font-weight:500;line-height:1.15;text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}.ngxsp-yt-railButton:hover:not(:disabled){background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-railButton.active{background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-railButton.active ngxsp-smart-icon{color:var(--yt-accent)}.ngxsp-yt-railButton:disabled{opacity:.4;cursor:default}.ngxsp-yt-railExpanded .ngxsp-yt-railButton{min-height:36px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 12px}.ngxsp-yt-railExpanded .ngxsp-yt-railButton span{font-size:13px;text-align:left;-webkit-line-clamp:1;overflow-wrap:normal}.ngxsp-yt-railExpanded .ngxsp-yt-railButton ngxsp-smart-icon{width:18px;height:18px}.ngxsp-yt-body{grid-area:body;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--yt-side-w);overflow:hidden}.ngxsp-queue-hidden .ngxsp-yt-body{grid-template-columns:minmax(0,1fr)}.ngxsp-yt-watch{--yt-gutter:24px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:20px;padding:20px var(--yt-gutter) 40px;overflow:auto}.ngxsp-yt-cinema .ngxsp-yt-body{display:block;overflow:auto}.ngxsp-yt-cinema .ngxsp-yt-watch{overflow:visible;padding-top:16px}.ngxsp-yt-watch.player{padding:0;gap:0;overflow:hidden;height:100%}.ngxsp-yt-cinema .ngxsp-yt-watch.player{padding:0;overflow:hidden;height:100%}.ngxsp-yt-playerBack{position:absolute;top:12px;left:12px;z-index:4;display:none;align-items:center;gap:2px;height:36px;padding:0 14px 0 8px;border:0;border-radius:999px;background:#0000008c;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ngxsp-yt-playerBack ngxsp-smart-icon{width:18px;height:18px}.ngxsp-yt-playerShell{position:relative}.ngxsp-yt-watch.player .ngxsp-yt-playerShell{flex:1 1 auto;min-height:0}.ngxsp-yt-watch.player .ngxsp-yt-playerFrame{width:100%;min-width:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.ngxsp-yt-playerShell{flex:0 0 auto;display:flex;justify-content:center}.ngxsp-yt-playerFrame{position:relative;width:min(100%,calc((100vh - var(--yt-title-h) - 190px) * 16 / 9));min-width:min(100%,620px);aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--yt-r-md);background:#000;box-shadow:0 0 0 1px var(--yt-line),var(--nsp-shadow-media, 0 24px 60px rgb(0 0 0 / .45))}.ngxsp-yt-cinema .ngxsp-yt-playerFrame{width:min(100%,calc((100vh - var(--yt-title-h) - 48px) * 16 / 9))}.ngxsp-yt-playerFrame ngx-smart-player{position:absolute;inset:0;display:block}.ngxsp-yt-previewPlayer{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;overflow:hidden}.ngxsp-yt-previewPlayer img{transition:transform .6s var(--yt-ease),filter var(--yt-dur) var(--yt-ease)}.ngxsp-yt-previewPlayer:hover img{transform:scale(1.015);filter:brightness(.92)}.ngxsp-yt-previewOverlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#0000001a 40%,#0000008c)}.ngxsp-yt-previewPlay{width:72px;height:72px;display:grid;place-items:center;border-radius:999px;background:#fffffff0;color:#0d0e11;box-shadow:0 12px 40px #00000073;transition:transform var(--yt-dur) var(--yt-ease)}.ngxsp-yt-previewPlay ngxsp-smart-icon{width:30px;height:30px;margin-left:3px}.ngxsp-yt-previewPlayer:hover .ngxsp-yt-previewPlay{transform:scale(1.06)}.ngxsp-yt-emptyPlayer{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px 24px 88px;background:radial-gradient(80% 90% at 50% 20%,rgb(93 99 238 / .16),transparent 70%),#08090b;text-align:center}.ngxsp-yt-bigPlay{width:64px;height:64px;display:grid;place-items:center;margin-bottom:8px;border:0;border-radius:18px;background:var(--yt-accent-soft);color:var(--yt-accent);transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-bigPlay:hover{background:#8b90ff3d}.ngxsp-yt-bigPlay ngxsp-smart-icon{width:28px;height:28px}.ngxsp-yt-emptyPlayer span{color:var(--yt-text-2);font-size:12px;font-weight:600}.ngxsp-yt-emptyPlayer strong{font-size:20px;font-weight:600}.ngxsp-yt-emptyPlayer p{max-width:56ch;color:var(--yt-text-2)}.ngxsp-yt-transportBar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:40px 12px 10px;background:linear-gradient(180deg,#0000,#000000b8);pointer-events:none}.ngxsp-yt-transportBar>*{pointer-events:auto}.ngxsp-yt-shell.ngxsp-yt-compact{display:block;height:100vh;min-height:0;padding:env(titlebar-area-height,0px) 0 0;box-sizing:border-box}.ngxsp-yt-shell.ngxsp-yt-compact>:not(.ngxsp-yt-body){display:none!important}.ngxsp-yt-compact .ngxsp-yt-body{display:block;height:100%}.ngxsp-yt-compact .ngxsp-yt-body>:not(.ngxsp-yt-watch){display:none!important}.ngxsp-yt-compact .ngxsp-yt-watch{display:block;height:100%;padding:0;overflow:hidden}.ngxsp-yt-compact .ngxsp-yt-watch>:not(.ngxsp-yt-playerShell){display:none!important}.ngxsp-yt-compact .ngxsp-yt-playerShell{height:100%}.ngxsp-yt-compact .ngxsp-yt-playerFrame{position:relative;width:100%;min-width:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.ngxsp-yt-compactDrag{position:absolute;top:0;left:0;right:0;z-index:6;height:28px;-webkit-app-region:drag}.ngxsp-yt-compact .ngxsp-yt-playerInlineControls>.ngxsp-yt-playerAction:not(:first-child){display:none}.ngxsp-yt-compact ngx-smart-player ::ng-deep .ngxsp-inline-projection{display:inline-flex}.ngxsp-yt-compact :is(.ngxsp-yt-transportCinema,.ngxsp-yt-transportBar .ngxsp-yt-queueButton){display:none}.ngxsp-yt-transportCluster{display:flex;align-items:center;gap:4px}.ngxsp-yt-transportButton{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:#ffffffeb;transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-transportButton ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-transportButton:hover:not(:disabled){background:#ffffff1f}.ngxsp-yt-transportButton.active{color:var(--yt-accent)}.ngxsp-yt-transportButton:disabled{opacity:.4;cursor:default}.ngxsp-yt-transportPlay{width:44px;height:44px;display:grid;place-items:center;margin:0 4px;padding:0;border:0;border-radius:999px;background:#fff;color:#0d0e11;transition:transform var(--yt-dur) var(--yt-ease)}.ngxsp-yt-transportPlay:hover{transform:scale(1.05)}.ngxsp-yt-transportPlay ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-transportInfo{min-width:0;display:grid;gap:1px;color:#fff}.ngxsp-yt-transportInfo span{color:#ffffffb8;font-size:12px;font-weight:600}.ngxsp-yt-transportInfo strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}.ngxsp-yt-volumeControl{--ngxsp-control-size:36px;--ngxsp-volume-range-min:64px;--ngxsp-volume-range-max:92px;--ngxsp-volume-gap:2px;--ngxsp-volume-button-border:0;--ngxsp-volume-button-radius:6px;--ngxsp-volume-accent:#fff;--ngxsp-volume-track-bg:rgb(255 255 255 / .28);--ngxsp-volume-thumb-bg:#fff;--ngxsp-volume-thumb-size:12px;--ngxsp-volume-thumb-shadow:none;--ngxsp-focus-ring:0 0 0 2px var(--yt-accent);color:#fff}.ngxsp-yt-playerInlineControls{display:inline-flex;align-items:center;gap:0}.ngxsp-yt-playerAction{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#ffffffeb}.ngxsp-yt-playerAction ngxsp-smart-icon{width:20px;height:20px}.ngxsp-yt-playerAction:hover{background:#ffffff1f}.ngxsp-yt-playerAction.active{color:var(--yt-accent)}.ngxsp-yt-metaBar{flex:0 0 auto;min-width:0;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}.ngxsp-yt-titleGroup{flex:1 1 320px;min-width:0;display:grid;gap:4px}.ngxsp-yt-titleGroup h1{font-size:22px;line-height:1.25;font-weight:700}.ngxsp-yt-shell .ngxsp-yt-titleGroup h1{letter-spacing:-.01em}.ngxsp-yt-titleGroup p{color:var(--yt-text-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ngxsp-yt-titleGroup small{color:var(--yt-text-3);font-size:12px}.ngxsp-yt-watchActions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.ngxsp-yt-rating{display:inline-flex;border-radius:999px;background:var(--yt-s2);overflow:hidden}.ngxsp-yt-watchActions button{height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--yt-s2);color:var(--yt-text);font-size:12px;font-weight:500;white-space:nowrap;transition:background-color var(--yt-dur) var(--yt-ease),color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-watchActions button:hover{background:var(--yt-s3)}.ngxsp-yt-watchActions button.active{color:var(--yt-accent)}.ngxsp-yt-watchActions button.active ngxsp-smart-icon ::ng-deep path{fill:var(--yt-accent-soft)}.ngxsp-yt-rating button{border-radius:0}.ngxsp-yt-rating button+button{position:relative;padding-left:12px}.ngxsp-yt-rating button+button:before{content:\"\";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--yt-line-strong)}.ngxsp-yt-rating button+button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ngxsp-yt-moreAction{width:34px;padding:0!important;justify-content:center}.ngxsp-yt-moreAction span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ngxsp-yt-watchActions ngxsp-smart-icon{width:17px;height:17px}.ngxsp-yt-toolRow{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:8px}.ngxsp-yt-tool{min-width:0;height:52px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;padding:0 10px 0 9px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1);text-align:left;transition:border-color var(--yt-dur) var(--yt-ease),background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-tool:hover{border-color:var(--yt-line-strong);background:var(--yt-s2)}.ngxsp-yt-tool.active{border-color:#8b90ff73;background:var(--yt-accent-soft)}.ngxsp-yt-toolIcon{--tone:var(--yt-text-2);width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--tone) 16%,transparent);color:var(--tone)}.ngxsp-yt-tool[data-tone=teal] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-teal, #3fcfbf)}.ngxsp-yt-tool[data-tone=red] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-red, #f47c7a)}.ngxsp-yt-tool[data-tone=blue] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-blue, #7cb1ff)}.ngxsp-yt-tool[data-tone=gold] .ngxsp-yt-toolIcon{--tone:var(--nsp-tone-gold, #f2bb5b)}.ngxsp-yt-toolIcon ngxsp-smart-icon{width:17px;height:17px}.ngxsp-yt-toolCopy{min-width:0;display:grid;gap:1px}.ngxsp-yt-toolCopy small,.ngxsp-yt-toolCopy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-toolCopy small{color:var(--yt-text-2);font-size:11px}.ngxsp-yt-toolCopy strong{font-size:13px;font-weight:500}.ngxsp-yt-art{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff8c}.ngxsp-yt-art ngxsp-smart-icon{width:26px;height:26px}[data-art] .ngxsp-yt-thumbnail:not(.has-image),[data-art] .ngxsp-yt-suggestionThumb:not(.has-image),[data-art] .ngxsp-yt-searchThumb:not(.has-image){background:radial-gradient(90% 80% at 15% 10%,rgb(255 255 255 / .14),transparent 60%),linear-gradient(140deg,var(--art-a, #3a3c55),var(--art-b, #15161c))}[data-art=aurora]{--art-a:#3a7f78;--art-b:#10252a}[data-art=orbit]{--art-a:#5157c9;--art-b:#1a1b3d}[data-art=ember]{--art-a:#b0603a;--art-b:#301810}[data-art=ridge]{--art-a:#4f6f94;--art-b:#131d2a}[data-art=signal]{--art-a:#a8416a;--art-b:#2c1120}[data-art=fog]{--art-a:#5d6270;--art-b:#1a1b20}.ngxsp-yt-nowBadge{position:absolute;right:8px;top:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:var(--yt-accent-strong);color:#fff;box-shadow:0 4px 12px #0006}.ngxsp-yt-nowBadge ngxsp-smart-icon{width:14px;height:14px}.ngxsp-yt-thumbKind{position:absolute;left:8px;top:8px;max-width:calc(100% - 50px);padding:2px 7px;border-radius:4px;background:#000000b8;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ngxsp-yt-cardProgress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff3}.ngxsp-yt-cardProgress i{position:absolute;inset:0 auto 0 0;background:var(--yt-accent)}.ngxsp-yt-thumbBadge,.ngxsp-yt-suggestionThumb>small,.ngxsp-yt-searchThumb>small{position:absolute;right:6px;bottom:7px;max-width:calc(100% - 12px);padding:2px 6px;border-radius:4px;background:#000000c7;color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngxsp-yt-sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.ngxsp-yt-sectionHead>div{min-width:0;display:grid;gap:2px}.ngxsp-yt-sectionHead strong{font-size:16px;font-weight:600}.ngxsp-yt-sectionHead small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-sectionHead.compact{padding:14px 16px 10px}.ngxsp-yt-sectionHead.compact strong{font-size:14px}.ngxsp-yt-sectionLink{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-sectionLink:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-servers{display:grid;gap:8px}.ngxsp-yt-serversHeading{margin:6px 0 2px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--yt-text-2);text-transform:uppercase}.ngxsp-yt-serverForm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1)}.ngxsp-yt-serverTitle{font-size:12px;font-weight:600;color:var(--yt-text-2)}.ngxsp-yt-discovered{flex:1 1 100%;display:grid;gap:4px;margin:0;padding:0;list-style:none}.ngxsp-yt-discovered li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:2px 0 2px 8px;border-top:1px solid var(--yt-line)}.ngxsp-yt-discovered li span{display:grid;min-width:0}.ngxsp-yt-discovered strong{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-discovered small,.ngxsp-yt-discovered li.empty{overflow:hidden;color:var(--yt-text-2);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-serverKind{height:32px;padding:0 8px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s2);color:var(--yt-text);font-size:12px}.ngxsp-yt-serverForm input{flex:1 1 180px;min-width:0;height:32px;padding:0 10px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s0, var(--yt-s2));color:var(--yt-text);font-size:12px}.ngxsp-yt-serverForm input::placeholder{color:var(--yt-text-3)}.ngxsp-yt-serverForm button{min-height:32px;padding:0 14px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-accent, var(--yt-s3));color:var(--yt-text);font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-serverForm button.secondary{border-color:var(--yt-line-strong, var(--yt-line));background:transparent}.ngxsp-yt-serverForm button[disabled]{opacity:.5;cursor:default}.ngxsp-yt-serverHint{flex:1 0 100%;color:var(--yt-text-3);font-size:11px}.ngxsp-yt-serverRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border-radius:var(--yt-r-sm)}.ngxsp-yt-serverRow.active{background:var(--yt-s1)}.ngxsp-yt-serverMain{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);text-align:left;cursor:pointer}.ngxsp-yt-serverMain span{display:grid;min-width:0}.ngxsp-yt-serverMain strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-serverMain small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-serverMain:hover{background:var(--yt-s2)}.ngxsp-yt-serverDisconnect{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2);cursor:pointer}.ngxsp-yt-serverDisconnect:hover{background:var(--yt-s2);color:var(--yt-danger, #e5484d)}.ngxsp-yt-lists{display:grid;gap:8px;margin-bottom:16px}.ngxsp-yt-listForm{display:flex;gap:6px}.ngxsp-yt-listForm input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s1);color:var(--yt-text);font-size:12px}.ngxsp-yt-listForm input::placeholder{color:var(--yt-text-3)}.ngxsp-yt-listForm button{min-height:32px;height:32px;padding:0 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s2);color:var(--yt-text);font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-listForm button[disabled]{opacity:.5;cursor:default}.ngxsp-yt-listTarget{margin:0;color:var(--yt-text-2);font-size:12px}.ngxsp-yt-listTarget strong{margin-left:4px;color:var(--yt-text)}.ngxsp-yt-listRows{display:grid;gap:4px}.ngxsp-yt-listRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border-radius:var(--yt-r-sm)}.ngxsp-yt-listRow.active{background:var(--yt-s1)}.ngxsp-yt-listMain{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);text-align:left;cursor:pointer}.ngxsp-yt-listMain span{display:grid;min-width:0}.ngxsp-yt-listMain strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-listMain small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-listMain:hover{background:var(--yt-s2)}.ngxsp-yt-listActions{display:flex;gap:2px}.ngxsp-yt-listActions button{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2);cursor:pointer}.ngxsp-yt-listActions button:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-listActions button.danger:hover{color:var(--yt-danger, #e5484d)}.ngxsp-yt-listRow .ngxsp-yt-listForm{grid-column:1 / -1;padding:0 8px 6px}.ngxsp-yt-listEmpty{margin:0;color:var(--yt-text-3);font-size:12px}.ngxsp-yt-countBadge{min-width:24px;height:22px;display:grid;place-items:center;padding:0 7px;border-radius:999px;background:var(--yt-s3);color:var(--yt-text-2);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.ngxsp-yt-panelTitle{display:block;color:var(--yt-text-2);font-size:12px;font-weight:600}.ngxsp-yt-searchWorkspace{flex:0 0 auto;display:grid;gap:12px;padding:16px;border:1px solid var(--yt-line);border-radius:var(--yt-r-lg);background:var(--yt-s1)}.ngxsp-yt-searchHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.ngxsp-yt-searchHead>div{min-width:0;display:grid;gap:2px}.ngxsp-yt-searchHead strong{font-size:16px;font-weight:600}.ngxsp-yt-searchHead small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-searchHead button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-searchHead button:hover{background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-searchFilters{display:flex;flex-wrap:wrap;gap:6px}.ngxsp-yt-searchFilters button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--yt-line-strong);border-radius:999px;background:transparent;color:var(--yt-text-2);font-size:12px;font-weight:500}.ngxsp-yt-searchFilters button small{color:var(--yt-text-3);font-variant-numeric:tabular-nums}.ngxsp-yt-searchFilters button:hover:not(:disabled){color:var(--yt-text);border-color:var(--yt-text-3)}.ngxsp-yt-searchFilters button.active{border-color:transparent;background:var(--yt-text);color:var(--yt-bg)}.ngxsp-yt-searchFilters button.active small{color:var(--yt-bg)}.ngxsp-yt-searchFilters button:disabled{opacity:.4;cursor:default}.ngxsp-yt-searchResults{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}.ngxsp-yt-searchResults.list{grid-template-columns:1fr}.ngxsp-yt-searchResult{position:relative;min-width:0;border-radius:var(--yt-r-md);transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-searchResult:hover,.ngxsp-yt-searchResult:focus-within{background:var(--yt-s2)}.ngxsp-yt-searchResult.active{background:var(--yt-accent-soft)}.ngxsp-yt-searchResultMain{width:100%;min-width:0;display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:12px;padding:8px;border:0;border-radius:inherit;background:transparent;text-align:left}.ngxsp-yt-searchThumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:6px;background:var(--yt-s3)}.ngxsp-yt-searchCopy{min-width:0;display:grid;gap:2px}.ngxsp-yt-searchCopy small{color:var(--yt-accent);font-size:11px;font-weight:600}.ngxsp-yt-searchCopy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}.ngxsp-yt-searchCopy em,.ngxsp-yt-searchCopy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:12px;font-style:normal}.ngxsp-yt-searchActions{position:absolute;right:8px;bottom:8px;display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--yt-s3);opacity:0;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-searchResult:hover .ngxsp-yt-searchActions,.ngxsp-yt-searchResult:focus-within .ngxsp-yt-searchActions{opacity:1}.ngxsp-yt-searchActions button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--yt-text-2)}.ngxsp-yt-searchActions button:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-searchActions ngxsp-smart-icon{width:15px;height:15px}.ngxsp-yt-searchEmpty{grid-column:1 / -1;display:grid;justify-items:center;gap:6px;padding:28px 16px;color:var(--yt-text-2);text-align:center}.ngxsp-yt-searchEmpty ngxsp-smart-icon{width:24px;height:24px;color:var(--yt-text-3)}.ngxsp-yt-searchEmpty strong{color:var(--yt-text);font-weight:600}.ngxsp-yt-mediaDetail{flex:0 0 auto;min-width:0;display:grid;gap:0;border:1px solid var(--yt-line);border-radius:var(--yt-r-lg);background:var(--yt-s1);overflow:hidden}.ngxsp-yt-mediaHero{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:20px;padding:20px}.ngxsp-yt-mediaPoster{position:relative;align-self:start;aspect-ratio:16 / 9;overflow:hidden;display:grid;place-items:center;border-radius:var(--yt-r-md);background:linear-gradient(140deg,#4f6f94,#131d2a);box-shadow:var(--nsp-shadow-card, 0 12px 30px rgb(0 0 0 / .35))}.ngxsp-yt-mediaPoster span{color:#fffc;font-size:40px;font-weight:700}.ngxsp-yt-mediaDetailBody{min-width:0;display:grid;align-content:start;gap:8px}.ngxsp-yt-mediaKicker{color:var(--yt-accent);font-size:12px;font-weight:600}.ngxsp-yt-mediaDetailBody h2{font-size:18px;line-height:1.3;font-weight:600}.ngxsp-yt-mediaSubtitle{color:var(--yt-text);font-size:13px}.ngxsp-yt-mediaMeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;color:var(--yt-text-2);font-size:12px}.ngxsp-yt-mediaMeta span+span:before{content:\"\";display:inline-block;width:3px;height:3px;margin:0 8px 3px;border-radius:50%;background:var(--yt-text-3)}.ngxsp-yt-mediaSummary{max-width:72ch;color:var(--yt-text-2);font-size:13px;line-height:1.55}.ngxsp-yt-mediaProgress{display:flex;align-items:center;gap:10px;max-width:420px}.ngxsp-yt-mediaProgress>span{position:relative;flex:1;height:4px;border-radius:999px;background:var(--yt-s3);overflow:hidden}.ngxsp-yt-mediaProgress i{position:absolute;inset:0 auto 0 0;background:var(--yt-accent);border-radius:inherit}.ngxsp-yt-mediaProgress small{color:var(--yt-text-2);font-size:12px;white-space:nowrap}.ngxsp-yt-mediaTags{display:flex;flex-wrap:wrap;gap:6px}.ngxsp-yt-mediaTags span{height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;background:var(--yt-s3);color:var(--yt-text-2);font-size:11px;font-weight:500}.ngxsp-yt-mediaActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.ngxsp-yt-mediaActions button,.ngxsp-yt-inspectorActions button,.ngxsp-yt-miniRestore{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px 0 10px;border:1px solid var(--yt-line-strong);border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);font-size:12px;font-weight:500;white-space:nowrap}.ngxsp-yt-mediaActions button ngxsp-smart-icon,.ngxsp-yt-inspectorActions button ngxsp-smart-icon,.ngxsp-yt-miniRestore ngxsp-smart-icon{width:16px;height:16px}.ngxsp-yt-mediaActions button:hover:not(:disabled),.ngxsp-yt-inspectorActions button:hover:not(:disabled),.ngxsp-yt-miniRestore:hover{background:var(--yt-s3)}.ngxsp-yt-mediaActions button.primary,.ngxsp-yt-inspectorActions button.primary{border-color:transparent;background:var(--yt-accent-strong);color:var(--yt-on-accent)}.ngxsp-yt-mediaActions button.primary:hover:not(:disabled),.ngxsp-yt-inspectorActions button.primary:hover:not(:disabled){background:var(--yt-accent-strong);filter:brightness(1.1)}.ngxsp-yt-mediaActions button:disabled,.ngxsp-yt-inspectorActions button:disabled{opacity:.45;cursor:default}.ngxsp-yt-mediaWorkspace{display:grid;gap:14px;padding:16px 20px 20px;border-top:1px solid var(--yt-line)}.ngxsp-yt-mediaWorkspaceHead{display:grid;gap:2px}.ngxsp-yt-mediaWorkspaceHead strong{font-size:14px;font-weight:600}.ngxsp-yt-mediaWorkspaceHead small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-mediaWorkspaceGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.ngxsp-yt-chapterPanel,.ngxsp-yt-checkPanel{min-width:0;display:grid;align-content:start;gap:8px}.ngxsp-yt-chapterList,.ngxsp-yt-checkList{display:grid;gap:2px}.ngxsp-yt-mediaChapter{width:100%;min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:12px;padding:9px 10px;border:0;border-radius:var(--yt-r-sm);background:transparent;text-align:left;transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-mediaChapter:hover{background:var(--yt-s2)}.ngxsp-yt-mediaChapter.active{background:var(--yt-accent-soft)}.ngxsp-yt-chapterTime{display:grid;gap:2px}.ngxsp-yt-chapterTime em{justify-self:start;padding:1px 6px;border-radius:4px;background:var(--yt-s3);color:var(--yt-text);font-family:var(--nsp-font-mono, ui-monospace, Menlo, monospace);font-size:11px;font-style:normal;font-variant-numeric:tabular-nums}.ngxsp-yt-mediaChapter.active .ngxsp-yt-chapterTime em{background:var(--yt-accent-strong);color:#fff}.ngxsp-yt-chapterTime b{color:var(--yt-text-2);font-size:11px;font-weight:500}.ngxsp-yt-chapterCopy{min-width:0;display:grid;gap:2px}.ngxsp-yt-chapterCopy strong{font-size:13px;font-weight:500}.ngxsp-yt-chapterCopy small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-checkItem{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:12px;padding:9px 10px;border-radius:var(--yt-r-sm)}.ngxsp-yt-checkItem:hover{background:var(--yt-s2)}.ngxsp-yt-checkItem>span{--tone:var(--yt-text-3);width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 20%,transparent)}.ngxsp-yt-checkItem[data-tone=teal]>span{--tone:var(--nsp-tone-teal, #3fcfbf)}.ngxsp-yt-checkItem[data-tone=red]>span{--tone:var(--nsp-tone-red, #f47c7a)}.ngxsp-yt-checkItem[data-tone=blue]>span{--tone:var(--nsp-tone-blue, #7cb1ff)}.ngxsp-yt-checkItem[data-tone=gold]>span{--tone:var(--nsp-tone-gold, #f2bb5b)}.ngxsp-yt-checkItem>div{min-width:0;display:grid;gap:2px}.ngxsp-yt-checkItem strong{font-size:13px;font-weight:500}.ngxsp-yt-checkItem small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-checkItem em{color:var(--yt-text-2);font-size:12px;font-style:normal;white-space:nowrap}.ngxsp-yt-episodeRail{display:grid;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--yt-line)}.ngxsp-yt-episodeRail>div{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,220px);gap:12px;overflow-x:auto;padding-bottom:4px}.ngxsp-yt-episodeRail button{min-width:0;display:grid;gap:8px;padding:6px;border:0;border-radius:var(--yt-r-md);background:transparent;text-align:left}.ngxsp-yt-episodeRail button:hover{background:var(--yt-s2)}.ngxsp-yt-episodeRail button.active{background:var(--yt-accent-soft)}.ngxsp-yt-episodeThumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;display:grid;place-items:center;border-radius:6px;background:linear-gradient(140deg,#4f6f94,#131d2a)}.ngxsp-yt-episodeThumb>i{color:#fffc;font-size:22px;font-weight:700;font-style:normal}.ngxsp-yt-episodeThumb>em{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff3}.ngxsp-yt-episodeThumb>em i{position:absolute;inset:0 auto 0 0;background:var(--yt-accent)}.ngxsp-yt-episodeRail button>span:last-child{min-width:0;display:grid;gap:1px}.ngxsp-yt-episodeRail strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}.ngxsp-yt-episodeRail small,.ngxsp-yt-episodeRail button em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:12px;font-style:normal}.ngxsp-yt-library{flex:0 0 auto;display:grid;gap:12px}.ngxsp-yt-shelf{display:grid;gap:8px}.ngxsp-yt-shelfHead{display:flex;align-items:baseline;gap:8px;min-width:0}.ngxsp-yt-shelfHead strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}.ngxsp-yt-shelfHead small,.ngxsp-yt-shelfAll{flex:0 0 auto}.ngxsp-yt-shelfHead small{color:var(--yt-text-2);font-size:11.5px;font-variant-numeric:tabular-nums}.ngxsp-yt-shelfAll{margin-left:auto;padding:2px 8px;border:0;border-radius:999px;background:transparent;color:var(--yt-accent-strong);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}.ngxsp-yt-shelfAll:hover,.ngxsp-yt-shelfAll:focus-visible{background:var(--yt-s2)}.ngxsp-yt-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--yt-text-2)}.ngxsp-yt-trail b{color:var(--yt-text);font-weight:600}.ngxsp-yt-trailStep{padding:2px 6px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}.ngxsp-yt-trailStep:hover,.ngxsp-yt-trailStep:focus-visible{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px 16px}.ngxsp-yt-grid.list{grid-template-columns:1fr;gap:4px}.ngxsp-yt-grid.rail{--yt-rail-card:clamp(168px, 17vw, 320px);display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin-inline:calc(var(--yt-gutter, 24px) * -1);padding-inline:var(--yt-gutter, 24px);scroll-padding-inline:var(--yt-gutter, 24px);padding-bottom:4px;scrollbar-width:thin}.ngxsp-yt-grid.rail>*{flex:0 0 var(--yt-rail-card);scroll-snap-align:start}.ngxsp-yt-card{min-width:0;display:grid;align-content:start;gap:10px;padding:0;border:0;background:transparent;text-align:left}.ngxsp-yt-thumbnail{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--yt-r-md);background:var(--yt-s2);box-shadow:0 0 0 1px var(--yt-line)}.ngxsp-yt-thumbnail img{transition:transform .4s var(--yt-ease)}.ngxsp-yt-card:hover .ngxsp-yt-thumbnail img{transform:scale(1.04)}.ngxsp-yt-card.active .ngxsp-yt-thumbnail{box-shadow:0 0 0 2px var(--yt-accent)}.ngxsp-yt-cardCopy{min-width:0;display:grid;gap:2px;padding:0 2px}.ngxsp-yt-cardCopy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.35}.ngxsp-yt-card:hover .ngxsp-yt-cardCopy strong{color:var(--yt-text)}.ngxsp-yt-card.active .ngxsp-yt-cardCopy strong{color:var(--yt-accent)}.ngxsp-yt-cardCopy span,.ngxsp-yt-cardCopy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-cardCopy span{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-cardCopy small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-grid.list .ngxsp-yt-card{grid-template-columns:160px minmax(0,1fr);align-items:center;gap:14px;padding:6px;border-radius:var(--yt-r-md)}.ngxsp-yt-grid.list .ngxsp-yt-card:hover{background:var(--yt-s1)}.ngxsp-yt-sheetHeader,.ngxsp-yt-queueOpen{display:none}.ngxsp-yt-textButton{border:1px solid var(--yt-line);border-radius:var(--yt-r-sm);background:var(--yt-s2);color:var(--yt-text);font:inherit;font-size:13px;padding:6px 12px;cursor:pointer}.ngxsp-yt-panelTabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 8px 8px}.ngxsp-yt-panelPill{padding:6px 11px;border:1px solid var(--yt-line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1.2;cursor:pointer}.ngxsp-yt-panelPill.active{background:var(--yt-accent-strong);border-color:transparent;color:var(--yt-on-accent);font-weight:600}.ngxsp-yt-panelStack{display:flex;flex-direction:column;gap:10px;min-height:0}.ngxsp-yt-stackItem{border:1px solid var(--yt-line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.ngxsp-yt-stackItem.collapsed{flex:0 0 auto}.ngxsp-yt-stackHead{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 11px;background:var(--yt-surface-2,rgba(127,127,127,.08))}.ngxsp-yt-stackHead strong{font-size:12.5px;font-weight:600}.ngxsp-yt-stackHead small{color:var(--yt-text-2);font-size:11px}.ngxsp-yt-stackIcon{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;opacity:.65}.ngxsp-yt-stackIcon:hover,.ngxsp-yt-stackIcon:focus-visible{opacity:1}.ngxsp-yt-stackHead .ngxsp-yt-stackIcon:first-of-type{margin-left:auto}.ngxsp-yt-stackItem svg{width:14px;height:14px}.ngxsp-yt-suggestions{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--yt-line);background:var(--yt-s0);overflow:hidden}.ngxsp-yt-cinema .ngxsp-yt-suggestions{border-left:0;border-top:1px solid var(--yt-line);background:transparent;overflow:visible;padding:0 8px 24px}.ngxsp-yt-suggestionList{flex:1;min-height:0;display:grid;align-content:start;gap:2px;padding:0 8px 12px;overflow:auto}.ngxsp-yt-cinema .ngxsp-yt-suggestionList{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));overflow:visible}.ngxsp-yt-suggestion{position:relative;min-width:0;border-radius:var(--yt-r-md);transition:background-color var(--yt-dur) var(--yt-ease)}.ngxsp-yt-suggestion:hover,.ngxsp-yt-suggestion:focus-within{background:var(--yt-s2)}.ngxsp-yt-suggestion.active{background:var(--yt-accent-soft)}.ngxsp-yt-suggestionMain{width:100%;min-width:0;display:grid;grid-template-columns:140px minmax(0,1fr);align-items:start;gap:12px;padding:8px;border:0;border-radius:inherit;background:transparent;text-align:left}.ngxsp-yt-suggestion.managed .ngxsp-yt-suggestionMain{padding-right:44px}.ngxsp-yt-suggestionThumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:6px;background:var(--yt-s3)}.ngxsp-yt-suggestionThumb .ngxsp-yt-nowBadge{left:5px;right:auto;top:5px;width:22px;height:22px}.ngxsp-yt-suggestionCopy{min-width:0;display:grid;gap:3px;padding-top:1px}.ngxsp-yt-suggestionCopy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.3}.ngxsp-yt-suggestion.active .ngxsp-yt-suggestionCopy strong{color:var(--yt-accent)}.ngxsp-yt-suggestionCopy span,.ngxsp-yt-suggestionCopy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-suggestionCopy span{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-suggestionCopy small{color:var(--yt-text-3);font-size:11px}.ngxsp-yt-queueControls{position:absolute;top:4px;right:4px;display:grid;gap:0;opacity:0;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-suggestion:hover .ngxsp-yt-queueControls,.ngxsp-yt-suggestion:focus-within .ngxsp-yt-queueControls,.ngxsp-yt-suggestion.active .ngxsp-yt-queueControls{opacity:1}.ngxsp-yt-queueControls button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:var(--yt-text-2)}.ngxsp-yt-queueControls button:hover:not(:disabled){background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-queueControls button:disabled{opacity:.3;cursor:default}.ngxsp-yt-queueControls ngxsp-smart-icon{width:15px;height:15px}.ngxsp-yt-backButton{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-height:32px;margin:0 0 2px -6px;padding:4px 10px 4px 4px;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-backButton ngxsp-smart-icon{flex:none;width:16px;height:16px}.ngxsp-yt-backButton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-backButton:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-sideGroupTitle{grid-column:1 / -1;padding:12px 8px 4px;color:var(--yt-text-2);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.ngxsp-yt-sideGroupTitle:first-child{padding-top:0}@media(min-width:861px){.ngxsp-yt-sectionsBeside .ngxsp-yt-library{display:none}}.ngxsp-yt-emptyList{margin:8px;padding:28px 16px;border:1px dashed var(--yt-line-strong);border-radius:var(--yt-r-md);color:var(--yt-text-2);text-align:center}.ngxsp-yt-miniPlayer{flex:0 0 auto;display:grid;grid-template-columns:88px minmax(0,1fr) auto auto;align-items:center;gap:10px;margin:0 8px 8px;padding:8px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1)}.ngxsp-yt-cinema .ngxsp-yt-miniPlayer{max-width:420px}.ngxsp-yt-miniArtwork{position:relative;aspect-ratio:16 / 9;overflow:hidden;padding:0;border:0;border-radius:5px;background:var(--yt-s3)}.ngxsp-yt-miniPlayBadge{position:absolute;inset:0;display:grid;place-items:center;background:#00000059;color:#fff;opacity:0;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-miniArtwork:hover .ngxsp-yt-miniPlayBadge,.ngxsp-yt-miniPlayer.playing .ngxsp-yt-miniPlayBadge{opacity:1}.ngxsp-yt-miniDetails{min-width:0;display:grid;gap:1px}.ngxsp-yt-miniDetails small{color:var(--yt-text-2);font-size:11px;font-weight:600}.ngxsp-yt-miniDetails strong,.ngxsp-yt-miniDetails span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-miniDetails strong{font-size:12px;font-weight:600}.ngxsp-yt-miniDetails span{color:var(--yt-text-2);font-size:11px}.ngxsp-yt-miniControl,.ngxsp-yt-miniClose{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:transparent;color:var(--yt-text-2)}.ngxsp-yt-miniControl{background:var(--yt-text);color:var(--yt-bg)}.ngxsp-yt-miniClose:hover{background:var(--yt-s3);color:var(--yt-text)}.ngxsp-yt-miniControl ngxsp-smart-icon,.ngxsp-yt-miniClose ngxsp-smart-icon{width:15px;height:15px}.ngxsp-yt-miniRestore{flex:0 0 auto;margin:0 16px 12px;color:var(--yt-text-2)}.ngxsp-yt-inspector{flex:1;min-height:0;display:flex;flex-direction:column}.ngxsp-yt-inspectorHead{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 12px 12px 16px;border-bottom:1px solid var(--yt-line)}.ngxsp-yt-inspectorIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--yt-accent-soft);color:var(--yt-accent)}.ngxsp-yt-inspectorTitle{min-width:0;display:grid;gap:1px}.ngxsp-yt-inspectorTitle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}.ngxsp-yt-inspectorTitle small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:12px}.ngxsp-yt-inspectorClose{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text-2)}.ngxsp-yt-inspectorClose:hover{background:var(--yt-s2);color:var(--yt-text)}.ngxsp-yt-inspectorScroll{flex:1;min-height:0;display:grid;align-content:start;gap:14px;padding:14px 16px;overflow:auto}.ngxsp-yt-inspectorScroll ngxsp-settings{--ngxsp-settings-surface:var(--yt-s2);--ngxsp-settings-text:var(--yt-text);--ngxsp-settings-muted:var(--yt-text-2);--ngxsp-settings-line:var(--yt-line);--ngxsp-settings-control:var(--yt-s3);--ngxsp-settings-accent:var(--yt-accent);--ngxsp-settings-radius:var(--yt-r-md);gap:20px}.ngxsp-yt-inspectorStatus{color:var(--yt-text-2);font-size:13px;line-height:1.5}.ngxsp-yt-inspectorMetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ngxsp-yt-inspectorMetric{min-width:0;display:grid;gap:3px;padding:10px 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1)}.ngxsp-yt-inspectorMetric small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--yt-text-2);font-size:11px}.ngxsp-yt-inspectorMetric strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.ngxsp-yt-inspectorMetric.success strong{color:var(--yt-success)}.ngxsp-yt-inspectorMetric.warning strong{color:var(--yt-warning)}.ngxsp-yt-inspectorList{display:grid;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);overflow:hidden}.ngxsp-yt-inspectorItem{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--yt-s1)}.ngxsp-yt-inspectorItem+.ngxsp-yt-inspectorItem{border-top:1px solid var(--yt-line)}.ngxsp-yt-inspectorItem>span{min-width:0;display:grid;gap:2px}.ngxsp-yt-inspectorItem strong{font-size:13px;font-weight:500}.ngxsp-yt-inspectorItem small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-inspectorItem em{flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 7px;border-radius:999px;background:var(--yt-s3);color:var(--yt-text-2);font-size:11px;font-style:normal;font-weight:500}.ngxsp-yt-inspectorItem.success em{background:#3ecf8e24;color:var(--yt-success)}.ngxsp-yt-inspectorItem.warning em{background:#f2a93b24;color:var(--yt-warning)}.ngxsp-yt-resumePrompt{position:absolute;left:14px;bottom:84px;z-index:6;display:flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:calc(100% - 28px);padding:8px 8px 8px 14px;border-radius:var(--yt-r-md);background:#0c0d11cc;box-shadow:0 10px 30px #00000059,0 0 0 1px #ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f1f1f4;font-size:13px}.ngxsp-yt-resumePrompt span{margin-right:4px}.ngxsp-yt-resumePrompt button{height:32px;padding:0 12px;border:1px solid rgb(255 255 255 / .22);border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}.ngxsp-yt-resumePrompt button.primary{border-color:transparent;background:#fff;color:#111}.ngxsp-yt-resumePrompt button:hover{background:#ffffff24}.ngxsp-yt-resumePrompt button.primary:hover{background:#ffffffdb}.ngxsp-yt-compact .ngxsp-yt-resumePrompt{left:8px;bottom:56px;font-size:12px}.ngxsp-yt-playerFrame{container-type:inline-size;--yt-info-w:min(360px, 42cqw)}.ngxsp-yt-infoOpen ngx-smart-player ::ng-deep .ngxsp-vod-centerDock{transform:translate(calc(var(--yt-info-w) / -2 - 5px));transition:transform .2s ease}.ngxsp-yt-infoOverlay{position:absolute;top:10px;right:10px;bottom:76px;z-index:6;width:var(--yt-info-w);display:flex;flex-direction:column;border-radius:var(--yt-r-md);background:#0c0d11b8;box-shadow:0 12px 40px #0006,0 0 0 1px #ffffff14;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:#f1f1f4;overflow:hidden}.ngxsp-yt-infoTabs{display:flex;align-items:center;gap:2px;padding:6px;border-bottom:1px solid rgb(255 255 255 / .1);overflow-x:auto;scrollbar-width:none}.ngxsp-yt-infoTabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:#ffffffb8;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.ngxsp-yt-infoTabs button ngxsp-smart-icon{width:16px;height:16px}.ngxsp-yt-infoTabs button:hover{background:#ffffff1a;color:#fff}.ngxsp-yt-infoTabs button.active{background:#ffffff24;color:#fff}.ngxsp-yt-infoTabs button:not(.active) span{display:none}.ngxsp-yt-infoTabs .ngxsp-yt-infoClose{margin-left:auto}.ngxsp-yt-infoHead{display:grid;gap:2px;padding:12px 16px 0}.ngxsp-yt-infoHead strong{font-size:15px;font-weight:600}.ngxsp-yt-infoHead small{color:#ffffffa6;font-size:12px}.ngxsp-yt-infoOverlay .ngxsp-yt-inspectorScroll{--yt-text:#f1f1f4;--yt-text-2:rgb(255 255 255 / .68);--yt-line:rgb(255 255 255 / .12);--yt-s1:rgb(255 255 255 / .06);--yt-s2:rgb(255 255 255 / .1)}.ngxsp-yt-infoOverlay .ngxsp-yt-inspectorActions{--yt-line:rgb(255 255 255 / .12);--yt-s1:rgb(255 255 255 / .06);--yt-text:#f1f1f4}@media(min-width:861px){.ngxsp-yt-hasInfoTabs:not(.ngxsp-yt-sources) .ngxsp-yt-toolRow{display:none}}@media(max-width:860px){.ngxsp-yt-infoOverlay{display:none}}.ngxsp-yt-inspectorActions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--yt-line)}.ngxsp-yt-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:#000}.ngxsp-yt-touchBadge{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;min-width:112px;padding:14px 18px;pointer-events:none;border-radius:var(--yt-r-lg);background:#000000b8;color:#fff}.ngxsp-yt-touchBadge strong{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.ngxsp-yt-touchBadge em{display:block;width:88px;height:4px;border-radius:999px;background:#ffffff47;overflow:hidden}.ngxsp-yt-touchBadge em i{display:block;height:100%;border-radius:999px;background:#fff}.ngxsp-yt-cardWrap{position:relative;display:block;min-width:0}.ngxsp-yt-cardMore{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:#0000009e;color:#fff;opacity:0;cursor:pointer;transition:opacity var(--yt-dur) var(--yt-ease)}.ngxsp-yt-cardWrap:hover .ngxsp-yt-cardMore,.ngxsp-yt-cardMore:focus-visible,.ngxsp-yt-cardWrap:focus-within .ngxsp-yt-cardMore{opacity:1}@media(hover:none){.ngxsp-yt-cardMore{opacity:1}}.ngxsp-yt-cardMenuScrim{position:fixed;inset:0;z-index:60;padding:0;border:0;background:transparent;cursor:default}.ngxsp-yt-cardMenu{position:fixed;z-index:61;min-width:208px;max-width:280px;display:grid;gap:2px;padding:6px;border:1px solid var(--yt-line-strong);border-radius:var(--yt-r-md);background:var(--yt-s2);box-shadow:0 16px 40px #0000007a}.ngxsp-yt-cardMenuTitle{padding:6px 10px 8px;font-size:11px;font-weight:600;color:var(--yt-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-cardMenu button{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border:0;border-radius:var(--yt-r-sm);background:transparent;color:var(--yt-text);font-size:13px;text-align:left;cursor:pointer}.ngxsp-yt-cardMenu button:hover{background:var(--yt-s3)}.ngxsp-yt-cardMenu button.danger{color:var(--yt-danger-text)}.ngxsp-yt-cardMenu button.danger:hover{background:#f25f5c29}.ngxsp-yt-convert{position:absolute;left:12px;right:12px;bottom:12px;z-index:45;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--yt-line-strong);border-radius:var(--yt-r-lg);background:var(--yt-s2);box-shadow:0 12px 32px #0000006b}.ngxsp-yt-convert.asking{border-color:var(--yt-accent)}.ngxsp-yt-convert.danger{border-color:var(--yt-danger)}.ngxsp-yt-convert.danger .ngxsp-yt-convertIcon{background:#f25f5c29;color:var(--yt-danger-text)}.ngxsp-yt-convert.danger .ngxsp-yt-convertActions button.keep{background:var(--yt-danger);color:var(--yt-on-accent)}.ngxsp-yt-convertIcon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--yt-accent-soft);color:var(--yt-accent)}.ngxsp-yt-convertText{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}.ngxsp-yt-convertText strong{font-size:13px;font-weight:600}.ngxsp-yt-convertText small{font-size:11px;color:var(--yt-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-convertText em{display:block;height:4px;border-radius:999px;background:var(--yt-s3);overflow:hidden}.ngxsp-yt-convertText em i{display:block;height:100%;border-radius:999px;background:var(--yt-accent);transition:width var(--yt-dur) var(--yt-ease)}.ngxsp-yt-convertActions{display:flex;gap:8px;flex:0 0 auto}.ngxsp-yt-convertActions button{min-height:32px;padding:0 14px;border:1px solid var(--yt-line-strong);border-radius:999px;background:var(--yt-s1);color:var(--yt-text);font-size:12px;font-weight:600;cursor:pointer}.ngxsp-yt-convertActions button.keep{border-color:transparent;background:var(--yt-accent-strong);color:var(--yt-on-accent)}@media(max-width:560px){.ngxsp-yt-convert{flex-wrap:wrap}.ngxsp-yt-convertActions{width:100%;justify-content:flex-end}}.ngxsp-yt-dropOverlay{position:absolute;inset:12px;z-index:40;display:grid;place-content:center;justify-items:center;gap:10px;border:2px dashed var(--yt-accent);border-radius:14px;background:var(--nsp-scrim, rgb(13 14 17 / .88));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--yt-text);text-align:center;pointer-events:none}.ngxsp-yt-dropIcon{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:var(--yt-accent-soft);color:var(--yt-accent)}.ngxsp-yt-dropIcon ngxsp-smart-icon{width:28px;height:28px}.ngxsp-yt-dropOverlay strong{font-size:16px;font-weight:600}.ngxsp-yt-dropOverlay span:last-child{color:var(--yt-text-2)}@media(hover:none),(pointer:coarse){.ngxsp-yt-queueControls,.ngxsp-yt-searchActions{opacity:1}}@media(max-width:1380px){.ngxsp-yt-shell{--yt-side-w:320px}.ngxsp-yt-suggestionMain{grid-template-columns:120px minmax(0,1fr)}.ngxsp-yt-watchActions button>span{display:none}.ngxsp-yt-watchActions button{width:34px;padding:0;justify-content:center}.ngxsp-yt-rating button+button{padding-left:0}}@media(max-width:1180px){.ngxsp-yt-topbar{grid-template-columns:auto minmax(200px,1fr) auto}.ngxsp-yt-status,.ngxsp-yt-sourceButton span{display:none}.ngxsp-yt-sourceButton{width:32px;padding:0;justify-content:center}.ngxsp-yt-mediaHero{grid-template-columns:200px minmax(0,1fr)}}@media(max-width:1040px)and (min-width:861px){.ngxsp-yt-body,.ngxsp-queue-hidden .ngxsp-yt-body{display:block;overflow:auto}.ngxsp-yt-watch{overflow:visible}.ngxsp-yt-suggestions{border-left:0;border-top:1px solid var(--yt-line);background:transparent;overflow:visible;padding:0 16px 24px}.ngxsp-yt-suggestionList{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));overflow:visible}.ngxsp-yt-playerFrame{width:100%}}@media(max-width:860px){.ngxsp-yt-shell{height:auto;min-height:100%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:\"top\" \"rail\" \"body\";overflow:visible}.ngxsp-yt-topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px auto;gap:0 8px;padding:0 12px 10px}.ngxsp-yt-search{grid-column:1 / -1;grid-row:2}.ngxsp-yt-railMenu,.ngxsp-yt-round,.ngxsp-yt-languageSwitch,.ngxsp-yt-status{display:none}.ngxsp-yt-notificationsButton,.ngxsp-yt-windowButton{display:grid}.ngxsp-yt-rail{flex-direction:row;padding:6px 12px;border-right:0;border-bottom:1px solid var(--yt-line);overflow-x:auto}.ngxsp-yt-railButton{width:auto;min-height:36px;flex:0 0 auto;flex-direction:row;gap:6px;padding:0 10px}.ngxsp-yt-railButton span{font-size:12px}.ngxsp-yt-body,.ngxsp-queue-hidden .ngxsp-yt-body,.ngxsp-yt-cinema .ngxsp-yt-body{display:block;overflow:visible}.sheet>.ngxsp-yt-sheetHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;position:sticky;top:0;background:var(--yt-s0);z-index:1}.ngxsp-yt-watch{--yt-gutter:12px;gap:14px;padding:12px;overflow:visible}.ngxsp-yt-playerFrame,.ngxsp-yt-cinema .ngxsp-yt-playerFrame{width:100%;min-width:0;border-radius:var(--yt-r-sm)}.ngxsp-yt-transportBar{padding:28px 6px 6px;gap:4px}.ngxsp-yt-transportInfo,.ngxsp-yt-transportCinema{display:none}.ngxsp-yt-transportBar{grid-template-columns:auto auto;justify-content:space-between}.ngxsp-yt-titleGroup h1{font-size:18px}.ngxsp-yt-watchActions>button:nth-of-type(n+3){display:none}.ngxsp-yt-rating button+button{display:none}.ngxsp-yt-toolRow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.ngxsp-yt-toolRow::-webkit-scrollbar{display:none}.ngxsp-yt-toolRow .ngxsp-yt-tool{flex:0 0 auto;height:44px;grid-template-columns:24px auto;gap:8px}.ngxsp-yt-toolRow .ngxsp-yt-toolIcon{width:24px;height:24px}.ngxsp-yt-toolRow .ngxsp-yt-toolCopy strong{display:none}.ngxsp-yt-toolRow .ngxsp-yt-tool[data-tool=devices],.ngxsp-yt-toolRow .ngxsp-yt-tool[data-tool=cast]{order:-1}.ngxsp-yt-toolRow .ngxsp-yt-toolCopy small{color:var(--yt-text);font-size:13px}.ngxsp-yt-mediaHero{grid-template-columns:1fr;padding:14px}.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaPoster,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaKicker,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaDetailBody>h2,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaSubtitle,.ngxsp-yt-mediaHero.echoesHeader .ngxsp-yt-mediaMeta{display:none}.ngxsp-yt-mediaWorkspace{display:none}.ngxsp-yt-episodeRail{padding:14px}.ngxsp-yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.ngxsp-yt-grid .ngxsp-yt-card:nth-child(n+5){display:none}.ngxsp-yt-searchResults{grid-template-columns:1fr}.ngxsp-yt-queueOpen{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--yt-line);border-radius:var(--yt-r-md);background:var(--yt-s1);color:var(--yt-text);font:inherit;font-size:14px;text-align:left;cursor:pointer}.ngxsp-yt-queueOpen span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngxsp-yt-queueOpen small{color:var(--yt-text-2);font-size:12px}.ngxsp-yt-suggestions,.ngxsp-yt-cinema .ngxsp-yt-suggestions{display:none}.ngxsp-yt-suggestions.sheet,.ngxsp-yt-cinema .ngxsp-yt-suggestions.sheet{display:flex;position:fixed;inset:0;z-index:40;border:0;overflow-y:auto;background:var(--yt-s0);padding:env(safe-area-inset-top,0px) 12px calc(24px + env(safe-area-inset-bottom,0px))}.ngxsp-yt-suggestionList,.ngxsp-yt-cinema .ngxsp-yt-suggestionList{grid-template-columns:1fr;overflow:visible}.ngxsp-yt-suggestionList .ngxsp-yt-suggestion:nth-child(n+3){display:grid}.ngxsp-yt-suggestionMain{grid-template-columns:128px minmax(0,1fr)}.ngxsp-yt-miniPlayer{display:none}.ngxsp-yt-library-focus .ngxsp-yt-library{order:3}}@media(max-width:540px){.ngxsp-yt-brand strong{font-size:12px}.ngxsp-yt-mode button{padding:0 8px}.ngxsp-yt-railButton span{display:none}.ngxsp-yt-grid{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.ngxsp-yt-shell *,.ngxsp-yt-shell *:before,.ngxsp-yt-shell *:after{animation:none!important;transition:none!important}}.ngxsp-yt-body.ngxsp-yt-playing{display:grid;grid-template-columns:minmax(0,1fr) var(--yt-side-w);overflow:hidden;min-height:0}.ngxsp-queue-hidden .ngxsp-yt-body.ngxsp-yt-playing{grid-template-columns:minmax(0,1fr)}@media(max-width:1024px){.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-topbar,.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-rail{display:none}.ngxsp-yt-shell.ngxsp-yt-playerView{height:100vh;height:100dvh;min-height:0;grid-template-areas:none;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-body{grid-area:auto}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-body{grid-template-columns:minmax(0,1fr);height:100%}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-watch.player{height:100%;padding:0}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-playerShell{flex:1 1 auto;min-height:0}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-playerFrame{height:100%;aspect-ratio:auto;border-radius:0}.ngxsp-yt-shell.ngxsp-yt-playerView .ngxsp-yt-playerBack{display:inline-flex}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], brandLogoSrc: [{
+                type: Input
+            }], plugins: [{
+                type: Input
+            }], ports: [{
+                type: Input
+            }], engines: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], startTimeSec: [{
+                type: Input
+            }], playRequest: [{
+                type: Input
+            }], canPrev: [{
+                type: Input
+            }], canNext: [{
+                type: Input
+            }], previousLabel: [{
+                type: Input
+            }], playerBackLabel: [{
+                type: Input
+            }], nextLabel: [{
+                type: Input
+            }], playLabel: [{
+                type: Input
+            }], pauseLabel: [{
+                type: Input
+            }], transportLabel: [{
+                type: Input
+            }], cinemaMode: [{
+                type: Input
+            }], cinemaLabel: [{
+                type: Input
+            }], cinemaActiveLabel: [{
+                type: Input
+            }], shuffleActive: [{
+                type: Input
+            }], shuffleLabel: [{
+                type: Input
+            }], repeatMode: [{
+                type: Input
+            }], repeatLabel: [{
+                type: Input
+            }], hasPlaylistControls: [{
+                type: Input
+            }], castEnabled: [{
+                type: Input
+            }], castConnected: [{
+                type: Input
+            }], resumeOffer: [{
+                type: Input
+            }], infoTabs: [{
+                type: Input
+            }], infoLabel: [{
+                type: Input
+            }], infoPanel: [{
+                type: Input
+            }], playerMenuLabels: [{
+                type: Input
+            }], heroEyebrow: [{
+                type: Input
+            }], heroTitle: [{
+                type: Input
+            }], heroSubtitle: [{
+                type: Input
+            }], heroMeta: [{
+                type: Input
+            }], heroArtworkUrl: [{
+                type: Input
+            }], preferPosterPreview: [{
+                type: Input
+            }], runtimeModeLabel: [{
+                type: Input
+            }], onlineLabel: [{
+                type: Input
+            }], offlineLabel: [{
+                type: Input
+            }], navigationLabel: [{
+                type: Input
+            }], menuLabel: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], searchLabel: [{
+                type: Input
+            }], searchResultsTitle: [{
+                type: Input
+            }], searchResultsSummary: [{
+                type: Input
+            }], searchResultsEmptyTitle: [{
+                type: Input
+            }], searchResultsEmptyBody: [{
+                type: Input
+            }], searchClearLabel: [{
+                type: Input
+            }], searchFilterLabel: [{
+                type: Input
+            }], searchFilters: [{
+                type: Input
+            }], searchActionLabels: [{
+                type: Input
+            }], notificationsLabel: [{
+                type: Input
+            }], settingsLabel: [{
+                type: Input
+            }], sourceChangeLabel: [{
+                type: Input
+            }], sourceChangeTitle: [{
+                type: Input
+            }], sourceDropTitle: [{
+                type: Input
+            }], sourceDropHint: [{
+                type: Input
+            }], sourceChangeAccept: [{
+                type: Input
+            }], folderImportLabel: [{
+                type: Input
+            }], libraryStatus: [{
+                type: Input
+            }], touchAdjust: [{
+                type: Input
+            }], brightness: [{
+                type: Input
+            }], brightnessChange: [{
+                type: Output
+            }], cardActionsLabel: [{
+                type: Input
+            }], cardMenuCloseLabel: [{
+                type: Input
+            }], cardAction: [{
+                type: Output
+            }], promptBar: [{
+                type: Input
+            }], promptAnswer: [{
+                type: Output
+            }], libraryBusy: [{
+                type: Input
+            }], sourceTypeLocalLabel: [{
+                type: Input
+            }], sourceTypeStreamLabel: [{
+                type: Input
+            }], languageLabel: [{
+                type: Input
+            }], activeLanguage: [{
+                type: Input
+            }], languageOptions: [{
+                type: Input
+            }], statusMessage: [{
+                type: Input
+            }], statusKind: [{
+                type: Input
+            }], likeLabel: [{
+                type: Input
+            }], likeActive: [{
+                type: Input
+            }], dislikeLabel: [{
+                type: Input
+            }], shareLabel: [{
+                type: Input
+            }], watchLaterLabel: [{
+                type: Input
+            }], watchLaterActive: [{
+                type: Input
+            }], queueActionLabel: [{
+                type: Input
+            }], queueShortLabel: [{
+                type: Input
+            }], queueAddActiveLabel: [{
+                type: Input
+            }], queueAddActiveShortLabel: [{
+                type: Input
+            }], queueActionLabels: [{
+                type: Input
+            }], moreLabel: [{
+                type: Input
+            }], moreShortLabel: [{
+                type: Input
+            }], browseLibraryLabel: [{
+                type: Input
+            }], trail: [{
+                type: Input
+            }], trailLabel: [{
+                type: Input
+            }], showAllLabel: [{
+                type: Input
+            }], showLessLabel: [{
+                type: Input
+            }], emptyCatalogLabel: [{
+                type: Input
+            }], continueWatchingMeta: [{
+                type: Input
+            }], continueWatching: [{
+                type: Input
+            }], managedQueue: [{
+                type: Input
+            }], upNextItems: [{
+                type: Input
+            }], playlistPanel: [{
+                type: Input
+            }], serverForm: [{
+                type: Input
+            }], showResumeProgress: [{
+                type: Input
+            }], mediaDetail: [{
+                type: Input
+            }], sidePanelTitle: [{
+                type: Input
+            }], sidePanelMeta: [{
+                type: Input
+            }], sections: [{
+                type: Input
+            }], navItems: [{
+                type: Input
+            }], toolCards: [{
+                type: Input
+            }], inspectorPanel: [{
+                type: Input
+            }], inspectorPanels: [{
+                type: Input
+            }], inspectorCloseLabel: [{
+                type: Input
+            }], libraryVisible: [{
+                type: Input
+            }], playerView: [{
+                type: Input
+            }], watchActionsInPlayer: [{
+                type: Input
+            }], showActiveMedia: [{
+                type: Input
+            }], closeLabel: [{
+                type: Input
+            }], queueVisible: [{
+                type: Input
+            }], sidePanelContent: [{
+                type: Input
+            }], sideBackLabel: [{
+                type: Input
+            }], searchTerm: [{
+                type: Input
+            }], runtimeMode: [{
+                type: Input
+            }], runtimeModeInHeader: [{
+                type: Input
+            }], activeViewMode: [{
+                type: Input
+            }], libraryTitle: [{
+                type: Input
+            }], nowPlayingLabel: [{
+                type: Input
+            }], fullscreenHintLabel: [{
+                type: Input
+            }], fullscreenLabel: [{
+                type: Input
+            }], readyStatusLabel: [{
+                type: Input
+            }], playingStatusLabel: [{
+                type: Input
+            }], pausedStatusLabel: [{
+                type: Input
+            }], bufferingStatusLabel: [{
+                type: Input
+            }], loadingStatusLabel: [{
+                type: Input
+            }], endedStatusLabel: [{
+                type: Input
+            }], errorStatusLabel: [{
+                type: Input
+            }], miniPlayerVisible: [{
+                type: Input
+            }], miniPlayerMeta: [{
+                type: Input
+            }], miniPlayerPlayLabel: [{
+                type: Input
+            }], miniPlayerPauseLabel: [{
+                type: Input
+            }], miniPlayerFocusLabel: [{
+                type: Input
+            }], miniPlayerCloseLabel: [{
+                type: Input
+            }], miniPlayerRestoreLabel: [{
+                type: Input
+            }], outputVolume: [{
+                type: Input
+            }], outputVolumeLabel: [{
+                type: Input
+            }], outputMuteLabel: [{
+                type: Input
+            }], outputUnmuteLabel: [{
+                type: Input
+            }], ended: [{
+                type: Output
+            }], videoSize: [{
+                type: Output
+            }], progress: [{
+                type: Output
+            }], compactMode: [{
+                type: Input
+            }], compactModes: [{
+                type: Input
+            }], menuLayout: [{
+                type: Input
+            }], compactMiniLabel: [{
+                type: Input
+            }], compactRestoreLabel: [{
+                type: Input
+            }], compactModeChange: [{
+                type: Output
+            }], revealFileLabel: [{
+                type: Input
+            }], revealFile: [{
+                type: Output
+            }], prev: [{
+                type: Output
+            }], next: [{
+                type: Output
+            }], toggleShuffle: [{
+                type: Output
+            }], cycleRepeat: [{
+                type: Output
+            }], cast: [{
+                type: Output
+            }], infoToggle: [{
+                type: Output
+            }], sideBack: [{
+                type: Output
+            }], playerBack: [{
+                type: Output
+            }], resumeChoice: [{
+                type: Output
+            }], infoTabSelect: [{
+                type: Output
+            }], subtitlesLoaded: [{
+                type: Output
+            }], selectContinueWatching: [{
+                type: Output
+            }], selectSectionItem: [{
+                type: Output
+            }], selectDetailEpisode: [{
+                type: Output
+            }], chapterSeek: [{
+                type: Output
+            }], navSelect: [{
+                type: Output
+            }], toolSelect: [{
+                type: Output
+            }], detailAction: [{
+                type: Output
+            }], inspectorAction: [{
+                type: Output
+            }], settingChange: [{
+                type: Output
+            }], settingAction: [{
+                type: Output
+            }], closeInspector: [{
+                type: Output
+            }], panelClosed: [{
+                type: Output
+            }], openSource: [{
+                type: Output
+            }], toggleLibrary: [{
+                type: Output
+            }], trailStep: [{
+                type: Output
+            }], toggleQueue: [{
+                type: Output
+            }], toggleCinema: [{
+                type: Output
+            }], miniPlayerFocus: [{
+                type: Output
+            }], miniPlayerClose: [{
+                type: Output
+            }], miniPlayerRestore: [{
+                type: Output
+            }], queueAddActive: [{
+                type: Output
+            }], connectServer: [{
+                type: Output
+            }], discoverServers: [{
+                type: Output
+            }], connectDiscoveredServer: [{
+                type: Output
+            }], selectServer: [{
+                type: Output
+            }], disconnectServer: [{
+                type: Output
+            }], createPlaylist: [{
+                type: Output
+            }], selectPlaylist: [{
+                type: Output
+            }], addToPlaylist: [{
+                type: Output
+            }], removeFromPlaylist: [{
+                type: Output
+            }], renamePlaylist: [{
+                type: Output
+            }], deletePlaylist: [{
+                type: Output
+            }], watchLaterToggle: [{
+                type: Output
+            }], queueMoveUp: [{
+                type: Output
+            }], queueMoveDown: [{
+                type: Output
+            }], queueRemove: [{
+                type: Output
+            }], searchFilterChange: [{
+                type: Output
+            }], searchResultQueueAdd: [{
+                type: Output
+            }], searchResultWatchLater: [{
+                type: Output
+            }], searchResultFavorite: [{
+                type: Output
+            }], searchResultDownload: [{
+                type: Output
+            }], search: [{
+                type: Output
+            }], searchTermChange: [{
+                type: Output
+            }], viewModeChange: [{
+                type: Output
+            }], runtimeModeChange: [{
+                type: Output
+            }], primaryPlay: [{
+                type: Output
+            }], primaryPlaybackToggle: [{
+                type: Output
+            }], playerStateChange: [{
+                type: Output
+            }], sourceFileChange: [{
+                type: Output
+            }], addFolder: [{
+                type: Output
+            }], languageChange: [{
+                type: Output
+            }], outputVolumeChange: [{
+                type: Output
+            }], outputMuteToggle: [{
+                type: Output
+            }], cardMenuBox: [{
+                type: ViewChild,
+                args: ['cardMenuBox']
+            }], smartPlayer: [{
+                type: ViewChild,
+                args: [SmartPlayerComponent]
+            }], contentScroll: [{
+                type: ViewChild,
+                args: ['contentScroll']
+            }], queueListEl: [{
+                type: ViewChild,
+                args: ['queueList']
+            }], videoFileInput: [{
+                type: ViewChild,
+                args: ['videoFileInput']
+            }], queuePanel: [{
+                type: ViewChild,
+                args: ['queuePanel']
+            }] } });
+
+class NgxSmartPlayerVideoUiModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NgxSmartPlayerVideoUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: NgxSmartPlayerVideoUiModule, imports: [NgxSmartPlayerVideoUiComponent], exports: [NgxSmartPlayerVideoUiComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NgxSmartPlayerVideoUiModule, imports: [NgxSmartPlayerVideoUiComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NgxSmartPlayerVideoUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [NgxSmartPlayerVideoUiComponent],
+                    exports: [NgxSmartPlayerVideoUiComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxSmartPlayerVideoUiComponent, NgxSmartPlayerVideoUiModule };
+//# sourceMappingURL=ngxsplayer-ngx-smart-player-ui-video.mjs.map