☰

YouTube Alchemy

Toolkit for YouTube with 130+ options accessible via settings panels. Key features include: tab view, playback speed control, set video quality, export transcripts, prevent autoplay, hide shorts, hide ad slots, disable play on hover, square design, auto-theater mode, number of videos per row, display remaining time—adjusted for playback speed and SponsorBlock segments, persistent progress bar with chapter markers and SponsorBlock support, modify or hide various UI elements, and much more.

目前为 2025-04-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Alchemy
  3. // @description  Toolkit for YouTube with 130+ options accessible via settings panels. Key features include: tab view, playback speed control, set video quality, export transcripts, prevent autoplay, hide shorts, hide ad slots, disable play on hover, square design, auto-theater mode, number of videos per row, display remaining time—adjusted for playback speed and SponsorBlock segments, persistent progress bar with chapter markers and SponsorBlock support, modify or hide various UI elements, and much more.
  4. // @author       Tim Macy
  5. // @license      GNU AFFERO GENERAL PUBLIC LICENSE-3.0
  6. // @version      7.7.7
  7. // @namespace    TimMacy.YouTubeAlchemy
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @match        https://*.youtube.com/*
  10. // @grant        GM.setValue
  11. // @grant        GM.getValue
  12. // @run-at       document-start
  13. // @noframes
  14. // @homepageURL  https://github.com/TimMacy/YouTubeAlchemy
  15. // @supportURL   https://github.com/TimMacy/YouTubeAlchemy/issues
  16. // ==/UserScript==
  17.  
  18. /************************************************************************
  19. *                                                                       *
  20. *                    Copyright © 2025 Tim Macy                          *
  21. *                    GNU Affero General Public License v3.0             *
  22. *                    Version: 7.7.7 - YouTube Alchemy                   *
  23. *                    All Rights Reserved.                               *
  24. *                                                                       *
  25. *             Visit: https://github.com/TimMacy                         *
  26. *                                                                       *
  27. ************************************************************************/
  28.  
  29. (async function() {
  30.     'use strict';
  31.     // CSS
  32.     const styleSheet = document.createElement('style');
  33.     styleSheet.textContent = `
  34.         /* main CSS */
  35.         .CentAnni-overlay {
  36.             position: fixed;
  37.             display: flex;
  38.             z-index: 2053;
  39.             left: 0;
  40.             top: 0;
  41.             width: 100%;
  42.             height: 100%;
  43.             align-items: center;
  44.             justify-content: center;
  45.             background-color: rgba(0,0,0,0.5);
  46.             backdrop-filter: blur(5px);
  47.         }
  48.  
  49.         .modal-content {
  50.             z-index: 2077;
  51.             background-color: rgba(17, 17, 17, 0.8);
  52.             padding: 20px 0 20px 20px;
  53.             border: 1px solid rgba(255, 255, 255, 0.25);
  54.             border-radius: 8px;
  55.             width: 420px;
  56.             max-height: 90vh;
  57.             font-family: "Roboto","Arial",sans-serif;
  58.             font-size: 9px;
  59.             line-height: 1.2;
  60.             color: white;
  61.             text-rendering: optimizeLegibility !important;
  62.             -webkit-font-smoothing: antialiased !important;
  63.             -moz-osx-font-smoothing: grayscale !important;
  64.         }
  65.  
  66.         #yt-transcript-settings-form {
  67.             max-height: calc(90vh - 40px);
  68.             overflow-y: auto;
  69.             padding-right: 20px;
  70.         }
  71.  
  72.         .notification {
  73.             background:hsl(0,0%,7%);
  74.             padding: 20px 30px;
  75.             border-radius: 8px;
  76.             border: 1px solid hsl(0,0%,18.82%);
  77.             max-width: 80%;
  78.             text-align: center;
  79.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  80.             font-size: 16px;
  81.             color: white;
  82.             -webkit-user-select: none;
  83.             -moz-user-select: none;
  84.             -ms-user-select: none;
  85.             user-select: none;
  86.         }
  87.  
  88.         .header-wrapper {
  89.             display: grid;
  90.             grid-template-columns: 1fr auto 1fr;
  91.             align-items: baseline;
  92.             justify-content: center;
  93.             margin: 0 20px 20px 0;
  94.             width: calc(100% - 20px);
  95.         }
  96.  
  97.         .header {
  98.             margin: 0;
  99.             padding: 0;
  100.             border: 0;
  101.             grid-column: 2;
  102.             text-align:center;
  103.             text-decoration: none;
  104.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  105.             font-size: 2.5em;
  106.             line-height: 1.1em;
  107.             font-weight: 700;
  108.             text-overflow: ellipsis;
  109.             white-space: normal;
  110.             text-shadow: 0 0 20px black;
  111.             cursor: pointer;
  112.             background: transparent;
  113.             display: block;
  114.             background-image: linear-gradient(45deg, #FFFFFF, #F2F2F2, #E6E6E6, #D9D9D9, #CCCCCC);
  115.             -webkit-background-clip: text;
  116.             background-clip: text;
  117.             color: transparent;
  118.             transition: color .3s ease-in-out;
  119.             -webkit-user-select: none;
  120.             -moz-user-select: none;
  121.             -ms-user-select: none;
  122.             user-select: none;
  123.         }
  124.  
  125.         .header:hover { color: white; }
  126.  
  127.         .version-label {
  128.             grid-column: 3;
  129.             padding: 0;
  130.             margin: 0 0 0 5px;
  131.             color: ghostwhite;
  132.             cursor: default;
  133.             opacity: .3;
  134.             transition: opacity .5s;
  135.             justify-self: start;
  136.             max-width: 10ch;
  137.             white-space: nowrap;
  138.             overflow: hidden;
  139.             text-overflow: ellipsis;
  140.         }
  141.  
  142.         .header:hover + .version-label {
  143.             opacity: 1;
  144.         }
  145.  
  146.         .label-style-settings {
  147.             display: block;
  148.             margin-bottom: 5px;
  149.             font-family: "Roboto","Arial",sans-serif;
  150.             font-size: 1.4em;
  151.             line-height: 1.5em;
  152.             font-weight: 500;
  153.         }
  154.  
  155.         .reset-prompt-text {
  156.             display: inline-block;
  157.             float: right;
  158.             cursor: pointer;
  159.             margin: 4px 10px 0 0;
  160.             font-size: inherit;
  161.             font-weight: 400;
  162.             line-height: inherit;
  163.             color: ghostwhite;
  164.         }
  165.  
  166.         .reset-prompt-text:hover { color: red; }
  167.         .reset-prompt-text:active { color: magenta; }
  168.  
  169.         .label-NotebookLM { color: hsl(134, 61%, 40%); }
  170.         .label-ChatGPT { color: hsl(217, 91%, 59%); }
  171.         .label-download { color: hsl(359, 88%, 57%); }
  172.         .label-settings { color: hsl(0, 0%, 100%); }
  173.         .input-field-targetNotebookLMUrl:focus { border: 1px solid hsl(134, 61%, 40%); }
  174.         .input-field-targetChatGPTUrl:focus { border: 1px solid hsl(217, 91%, 59%); }
  175.         .buttonIconNotebookLM-input-field:focus { border: 1px solid hsl(134, 61%, 40%); }
  176.         .buttonIconChatGPT-input-field:focus { border: 1px solid hsl(217, 91%, 59%); }
  177.         .buttonIconDownload-input-field:focus { border: 1px solid hsl(359, 88%, 57%); }
  178.  
  179.         .buttonIconSettings-input-field:focus,
  180.         .links-header-container input:focus,
  181.         .sidebar-container input:focus,
  182.         #custom-css-form .select-file-naming:focus,
  183.         #custom-css-form .dropdown-list {
  184.             border: 1px solid hsl(0, 0%, 100%);
  185.             max-height: 444px;
  186.         }
  187.  
  188.         .input-field-targetNotebookLMUrl:hover,
  189.         .input-field-targetChatGPTUrl:hover,
  190.         .buttonIconNotebookLM-input-field:hover,
  191.         .buttonIconChatGPT-input-field:hover,
  192.         .buttonIconDownload-input-field:hover,
  193.         .buttonIconSettings-input-field:hover,
  194.         .select-file-naming:hover,
  195.         .input-field-url:hover,
  196.         .chatgpt-prompt-textarea:hover
  197.         { background-color: hsl(0, 0%, 10.37%); }
  198.  
  199.         .btn-style-settings {
  200.             padding: 5px 10px;
  201.             cursor: pointer;
  202.             color: whitesmoke;
  203.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  204.             font-size: 1.4em;
  205.             line-height: 1.5em;
  206.             font-weight: 400;
  207.             background-color: hsl(0, 0%, 7%);
  208.             border: 1px solid hsl(0, 0%, 18.82%);
  209.             border-radius: 2px;
  210.             transition: all 0.2s ease-out;
  211.         }
  212.  
  213.         .btn-style-settings:hover { color: white; background-color: hsl(0, 0%, 25%); border-color: transparent; }
  214.         .btn-style-settings:active { color: white; background-color: hsl(0, 0%, 35%); border-color: hsl(0, 0%, 45%); }
  215.         .button-icons { display: block; font-family: "Roboto","Arial",sans-serif; font-size: 1.4em; line-height: 1.5em; font-weight: 500; }
  216.         .icons-container { display: flex; justify-content: space-between; margin-bottom: 20px; }
  217.         .container-button { display: flex; flex-direction: column; align-items: center; margin: 5px 0 0 0; }
  218.  
  219.         .button-icons.features-text {
  220.             margin: 20px 0 -5px 0;
  221.             font-size: 1.7em;
  222.             display: flex;
  223.             justify-content: center;
  224.         }
  225.  
  226.         .container-button-input {
  227.             width: 80px;
  228.             padding: 8px;
  229.             text-align: center;
  230.             color: ghostwhite;
  231.             font-family: -apple-system, system-ui, "Roboto", "Arial", sans-serif;
  232.             font-size: 2em;
  233.             line-height: 1.5em;
  234.             font-weight: 400;
  235.             transition: all .5s ease-in-out;
  236.             outline: none;
  237.             background-color: hsl(0,0%,7%);
  238.             border: 1px solid hsl(0,0%,18.82%);
  239.             border-radius: 1px;
  240.             box-sizing: border-box;
  241.         }
  242.  
  243.         .container-button-label {
  244.             margin-top: 5px;
  245.             text-align: center;
  246.             font-family: "Roboto","Arial",sans-serif;
  247.             font-size: 1.4em;
  248.             line-height: 1.5em;
  249.             font-weight: 500;
  250.         }
  251.  
  252.         .container-button-input:focus { color: white; background-color: hsl(0, 0%, 10.37%); border-radius: 2px; }
  253.         .spacer-5 { height: 5px; }
  254.         .spacer-10 { height: 10px; }
  255.         .spacer-15 { height: 15px; }
  256.         .spacer-20 { height: 20px; }
  257.  
  258.         .copyright {
  259.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  260.             font-size: 1.4em;
  261.             line-height: 1.5em;
  262.             font-weight: 500;
  263.             color: white;
  264.             text-decoration: none;
  265.             transition: color 0.2s ease-in-out;
  266.         }
  267.  
  268.         .copyright:hover { color: #369eff; }
  269.         .url-container { margin-bottom: 10px; }
  270.  
  271.         .input-field-url {
  272.             width: 100%;
  273.             padding: 8px;
  274.             color: ghostwhite;
  275.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  276.             font-size: 1.4em;
  277.             line-height: 1.5em;
  278.             font-weight: 400;
  279.             transition: all .5s ease-in-out;
  280.             outline: none;
  281.             background-color:hsl(0,0%,7%);
  282.             border: 1px solid hsl(0,0%,18.82%);
  283.             border-radius: 1px;
  284.             box-sizing: border-box;
  285.         }
  286.  
  287.         .input-field-url:focus { color: white; background-color: hsl(0, 0%, 10.37%); border-radius: 2px; }
  288.         .file-naming-container { position: relative; margin-bottom: 20px; }
  289.  
  290.         .select-file-naming {
  291.             width: 100%;
  292.             padding: 8px;
  293.             cursor:pointer;
  294.             color: ghostwhite;
  295.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  296.             font-size: 1.4em;
  297.             line-height: 1.5em;
  298.             font-weight: 400;
  299.             transition: all .5s ease-in-out;
  300.             outline: none;
  301.             appearance: none;
  302.             -webkit-appearance: none;
  303.             background-color:hsl(0,0%,7%);
  304.             border: 1px solid hsl(0,0%,18.82%);
  305.             border-radius: 1px;
  306.             box-sizing: border-box;
  307.  
  308.             background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit; width: 100%; height: 100%;" fill="ghostwhite"%3E%3Cpath d="m18 9.28-6.35 6.35-6.37-6.35.72-.71 5.64 5.65 5.65-5.65z"%3E%3C/path%3E%3C/svg%3E');
  309.             background-repeat: no-repeat;
  310.             background-position: right 10px center;
  311.             background-size: 20px;
  312.  
  313.             -webkit-user-select: none;
  314.             -moz-user-select: none;
  315.             -ms-user-select: none;]
  316.             user-select: none;
  317.         }
  318.  
  319.         .hidden-select {
  320.             position: absolute;
  321.             visibility: hidden;
  322.             opacity: 0;
  323.             pointer-events: none;
  324.             width: 100%;
  325.             height: 100%;
  326.             top: 0;
  327.             left: 0;
  328.         }
  329.  
  330.         .dropdown-list {
  331.             visibility: hidden;
  332.             opacity: 0;
  333.             position: absolute;
  334.             z-index: 2100;
  335.             top: 115%;
  336.             left: 0;
  337.             width: 100%;
  338.             max-height: 60vh;
  339.             overflow-y: auto;
  340.             background-color:hsl(0,0%,7%);
  341.             border: 1px solid hsl(359,88%,57%);
  342.             border-radius: 1px 1px 8px 8px;
  343.             box-sizing: border-box;
  344.             transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  345.             transform: translateY(-10px);
  346.         }
  347.  
  348.         .dropdown-list.show {
  349.             visibility: visible;
  350.             opacity: 1;
  351.             transform: translateY(0);
  352.         }
  353.  
  354.         .dropdown-item {
  355.             padding: 15px;
  356.             cursor: pointer;
  357.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  358.             font-size: 1.47em;
  359.             line-height: 1em;
  360.             font-weight: 400;
  361.             color: lightgray;
  362.             position: relative;
  363.             transition: background-color .3s;
  364.             padding-left: 1.6em;
  365.         }
  366.  
  367.         .dropdown-item:hover {
  368.             color: ghostwhite;
  369.             background-color: rgba(255, 255, 255, .05);
  370.         }
  371.  
  372.         .dropdown-item:hover::before {
  373.             color: ghostwhite;
  374.             font-weight: 600;
  375.         }
  376.  
  377.         .dropdown-item-selected {
  378.             color: hsl(359,88%,57%);
  379.             font-weight: 600;
  380.         }
  381.  
  382.         .dropdown-item-selected::before {
  383.             content: '✓';
  384.             position: absolute;
  385.             left: 6px;
  386.             color: hsl(359,88%,57%);
  387.         }
  388.  
  389.         .select-file-naming:focus {
  390.             color: white;
  391.             background-color: hsl(0, 0%, 10.37%);
  392.             border-radius: 2px;
  393.             border-color: hsl(359, 88%, 57%);
  394.         }
  395.  
  396.         .checkbox-label,
  397.         .number-input-label span {
  398.             display: flex;
  399.             align-items: center;
  400.             font-family: "Roboto","Arial",sans-serif;
  401.             font-size: 1.4em;
  402.             line-height: 1.5em;
  403.             font-weight: 500;
  404.             cursor: pointer;
  405.             text-decoration: none;
  406.             -webkit-user-select: none;
  407.             -moz-user-select: none;
  408.             -ms-user-select: none;
  409.             user-select: none;
  410.         }
  411.  
  412.         .checkbox-container { margin-bottom: 5px; }
  413.         .checkbox-label:hover { text-decoration: underline; }
  414.         .checkbox-field { margin-right: 10px; }
  415.  
  416.         .CentAnni-info-text {
  417.             color: rgba(175, 175, 175, .9);
  418.             font-family: "Roboto","Arial",sans-serif;
  419.             font-size: 1.2em;
  420.             line-height: 1.5em;
  421.             font-weight: 400;
  422.             display: block;
  423.             margin:-5px 0px 5px 24px;
  424.             pointer-events: none;
  425.             cursor: default;
  426.         }
  427.  
  428.         .extra-button-container {
  429.             display: flex;
  430.             justify-content: center;
  431.             gap: 5%;
  432.             margin: 20px 0;
  433.         }
  434.  
  435.         .chatgpt-prompt-textarea {
  436.             width: 100%;
  437.             padding: 8px;
  438.             height: 65px;
  439.             transition: all .7s ease-in-out;
  440.             outline: none;
  441.             resize: none;
  442.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  443.             font-size: 1.4em;
  444.             line-height: 1.5em;
  445.             font-weight: 400;
  446.             color: ghostwhite;
  447.             background-color:hsl(0,0%,7%);
  448.             border: 1px solid hsl(0,0%,18.82%);
  449.             border-radius: 1px;
  450.             box-sizing: border-box;
  451.         }
  452.  
  453.         .chatgpt-prompt-textarea:focus {
  454.             height: 569px;
  455.             color: white;
  456.             background-color: hsl(0, 0%, 10.37%);
  457.             border: 1px solid hsl(217, 91%, 59%);
  458.             border-radius: 2px;
  459.         }
  460.  
  461.         .button-container-end {
  462.             display: flex;
  463.             flex-direction: column;
  464.             gap: 10px;
  465.             margin-top: 20px;
  466.             padding-top: 10px;
  467.             border: none;
  468.             border-top: solid 1px transparent;
  469.             border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  470.             border-image-slice: 1;
  471.             -webkit-user-select: none;
  472.             -moz-user-select: none;
  473.             -ms-user-select: none;
  474.             user-select: none;
  475.         }
  476.  
  477.         .button-container-backup {
  478.             display: flex;
  479.             justify-content: end;
  480.             gap: 23.5px;
  481.         }
  482.  
  483.         .button-container-settings {
  484.             display: flex;
  485.             align-items: center;
  486.             justify-content: end;
  487.             gap: 10px;
  488.  
  489.         }
  490.  
  491.         #voice-search-button.ytd-masthead {
  492.             margin: 0 12px;
  493.         }
  494.  
  495.         #masthead-skeleton-icons {
  496.             display: none !important;
  497.         }
  498.  
  499.         .button-wrapper {
  500.             position: relative;
  501.             margin-right: 8px;
  502.             display: flex;
  503.             background-color: transparent;
  504.             text-rendering: optimizeLegibility !important;
  505.             -webkit-font-smoothing: antialiased !important;
  506.             -moz-osx-font-smoothing: grayscale !important;
  507.         }
  508.  
  509.         .button-wrapper:not(:has(.button-style-settings)):hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 24px; }
  510.         .button-wrapper:not(:has(.button-style-settings)):active { background-color: rgba(255, 255, 255, 0.2); border-radius: 24px; }
  511.  
  512.         .button-style {
  513.             width: 40px;
  514.             height: 40px;
  515.             font-family: -apple-system, system-ui, "Roboto", "Arial", sans-serif;
  516.             font-size: 24px;
  517.             display: inline-block;
  518.             position: relative;
  519.             box-sizing: border-box;
  520.             vertical-align: middle;
  521.             color: white;
  522.             outline: none;
  523.             background: transparent;
  524.             margin: 0;
  525.             border: none;
  526.             padding: 0;
  527.             cursor: pointer;
  528.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  529.             -webkit-tap-highlight-color: transparent;
  530.         }
  531.  
  532.         .button-style-settings { width: 10px; color: rgb(170, 170, 170); }
  533.         .button-style-settings:hover { color: white; }
  534.  
  535.         .button-tooltip {
  536.             visibility: hidden;
  537.             background-color: black;
  538.             color: white;
  539.             text-align: center;
  540.             border-radius: 2px;
  541.             padding: 6px 8px;
  542.             position: absolute;
  543.             z-index: 2053;
  544.             top: 120%;
  545.             left: 50%;
  546.             transform: translateX(-50%);
  547.             opacity: 0;
  548.             white-space: nowrap;
  549.             font-size: 12px;
  550.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  551.             border-top: solid 1px white;
  552.             border-bottom: solid 1px black;
  553.             border-left: solid 1px transparent;
  554.             border-right: solid 1px transparent;
  555.             border-image: linear-gradient(to bottom, white, black);
  556.             border-image-slice: 1;
  557.         }
  558.  
  559.         .button-tooltip-arrow {
  560.             position: absolute;
  561.             top: -5px;
  562.             left: 50%;
  563.             transform: translateX(-50%) rotate(45deg);
  564.             width: 10px;
  565.             height: 10px;
  566.             background: linear-gradient(135deg, white 0%, white 50%, black 50%, black 100%);
  567.             z-index: -1;
  568.         }
  569.  
  570.         .CentAnni-remaining-time-container {
  571.             position: relative;
  572.             display: block;
  573.             height: 0;
  574.             top: 4px;
  575.             text-align: right;
  576.             font-family: "Roboto", "Arial", sans-serif;
  577.             font-size: 1.4rem;
  578.             font-weight: 500;
  579.             line-height: 1em;
  580.             color: var(--yt-spec-text-primary);
  581.             pointer-events: auto;
  582.             cursor: default;
  583.             text-rendering: optimizeLegibility !important;
  584.             -webkit-font-smoothing: antialiased !important;
  585.             -moz-osx-font-smoothing: grayscale !important;
  586.         }
  587.  
  588.         .CentAnni-remaining-time-container.live,
  589.         #movie_player .CentAnni-remaining-time-container.live {
  590.             display: none;
  591.             pointer-events: none;
  592.             cursor: default;
  593.         }
  594.  
  595.         #movie_player .CentAnni-remaining-time-container {
  596.             position: absolute;
  597.             display: none;
  598.             z-index: 2053;
  599.             bottom: 15px;
  600.             left: 50%;
  601.             transform: translateX(-50%);
  602.             font-weight: 800 !important;
  603.             font-size: 109%;
  604.             vertical-align: top;
  605.             white-space: nowrap;
  606.             line-height: 53px;
  607.             color: ghostwhite;
  608.             text-shadow: black 0 0 3px !important;
  609.         }
  610.  
  611.         .ytp-autohide .ytp-chrome-bottom .CentAnni-remaining-time-container {
  612.             display: inline-block !important;
  613.         }
  614.  
  615.         .transcript-preload {
  616.             position: fixed !important;
  617.             top: var(--ytd-toolbar-height) !important;
  618.             left: 50% !important;
  619.             transform: translateX(-50%) !important;
  620.             z-index: -1 !important;
  621.             opacity: 0 !important;
  622.             pointer-events: none !important;
  623.         }
  624.  
  625.         .notification-error {
  626.             z-index: 2053;
  627.             box-shadow: none;
  628.             text-decoration: none;
  629.             display: inline-block;
  630.             background-color: hsl(0, 0%, 7%);
  631.             padding: 10px 12px;
  632.             margin: 0 8px;
  633.             border: 1px solid hsl(0, 0%, 18.82%);
  634.             border-radius: 5px;
  635.             pointer-events: none;
  636.             cursor: default;
  637.             font-family: 'Roboto', Arial, sans-serif;
  638.             color: rgba(255, 255, 255, 0.5);
  639.             text-align: center;
  640.             font-weight: 500;
  641.             font-size: 14px;
  642.             text-rendering: optimizeLegibility !important;
  643.             -webkit-font-smoothing: antialiased !important;
  644.             -moz-osx-font-smoothing: grayscale !important;
  645.         }
  646.  
  647.         #CentAnni-playback-speed-popup {
  648.             position: fixed;
  649.             top: var(--ytd-masthead-height,var(--ytd-toolbar-height));
  650.             left: 50%;
  651.             transform: translateX(-50%);
  652.             padding: 8px 16px;
  653.             background:hsl(0,0%,7%);
  654.             border-radius: 2px;
  655.             border: 1px solid hsl(0,0%,18.82%);
  656.             color: whitesmoke;
  657.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  658.             font-size: 2.3rem;
  659.             font-weight: 600;
  660.             text-align: center;
  661.             z-index: 2500;
  662.             transition: opacity .3s ease;
  663.             opacity: 0;
  664.             -webkit-user-select: none;
  665.             -moz-user-select: none;
  666.             -ms-user-select: none;
  667.             user-select: none;
  668.             text-rendering: optimizeLegibility !important;
  669.             -webkit-font-smoothing: antialiased !important;
  670.             -moz-osx-font-smoothing: grayscale !important;
  671.         }
  672.  
  673.         #CentAnni-playback-speed-popup.active {
  674.             opacity: 1;
  675.         }
  676.  
  677.         .loading span::before {
  678.             content: "Transcript Is Loading";
  679.             position: absolute;
  680.             inset: initial;
  681.             color: rgba(255, 250, 250, .86);
  682.             opacity: 0;
  683.             -webkit-animation: pulse 1.5s infinite;
  684.             animation: pulse 1.5s infinite;
  685.             text-rendering: optimizeLegibility !important;
  686.             -webkit-font-smoothing: antialiased !important;
  687.             -moz-osx-font-smoothing: grayscale !important;
  688.         }
  689.  
  690.         @-webkit-keyframes pulse {
  691.             0% { opacity: 0; }
  692.             50% { opacity: .71; }
  693.             100% { opacity: 0; }
  694.         }
  695.  
  696.         @keyframes pulse {
  697.             0% { opacity: 0; }
  698.             50% { opacity: .71; }
  699.             100% { opacity: 0; }
  700.         }
  701.  
  702.         .buttons-left {
  703.             font-family: -apple-system, system-ui, "Roboto", "Arial", sans-serif;
  704.             font-size: 14px;
  705.             font-weight: 500;
  706.             line-height: 1em;
  707.             letter-spacing: -.5px;
  708.             display: inline-block;
  709.             position: relative;
  710.             color: ghostwhite;
  711.             text-decoration: none;
  712.             cursor: pointer;
  713.             margin: 0 8px;
  714.             outline: none;
  715.             background: transparent;
  716.             border: none;
  717.             text-align: center;
  718.             text-rendering: optimizeLegibility !important;
  719.             -webkit-font-smoothing: antialiased !important;
  720.             -moz-osx-font-smoothing: grayscale !important;
  721.         }
  722.  
  723.         .buttons-left:hover { color: #ff0000 !important; }
  724.         .buttons-left:active { color:rgb(200, 25, 25) !important; }
  725.  
  726.         .sub-panel-overlay {
  727.             position: fixed;
  728.             z-index: 2100;
  729.             left: 0;
  730.             top: 0;
  731.             width: 100%;
  732.             height: 100%;
  733.             display: none;
  734.             background-color: rgba(0,0,0,0.5);
  735.             justify-content: center;
  736.             align-items: center;
  737.             backdrop-filter: blur(1px);
  738.         }
  739.  
  740.         .sub-panel-overlay.active {
  741.             display: flex;
  742.         }
  743.  
  744.         .sub-panel {
  745.             z-index: 2177;
  746.             background-color: rgba(17, 17, 17, 0.8);
  747.             padding: 20px;
  748.             border: 1px solid rgba(255, 255, 255, 0.25);
  749.             border-radius: 8px;
  750.             width: 50vw;
  751.             max-width: 70vw;
  752.             max-height: 90vh;
  753.             position: relative;
  754.             display: flex;
  755.             flex-direction: column;
  756.             overflow-y: auto;
  757.             color: whitesmoke;
  758.             text-rendering: optimizeLegibility !important;
  759.             -webkit-font-smoothing: antialiased !important;
  760.             -moz-osx-font-smoothing: grayscale !important;
  761.         }
  762.  
  763.         .sub-panel button {
  764.             position: sticky;
  765.             top: 0;
  766.             align-self: flex-end;
  767.             box-shadow: 0 0 20px 10px black;
  768.         }
  769.  
  770.         .sub-panel-header {
  771.             margin: -24px 60px 20px 0px;
  772.             padding: 0px 0px 0px 0px;
  773.             border: 0;
  774.             text-align: left;
  775.             text-decoration: none;
  776.             font-family: -apple-system, "Roboto", "Arial", sans-serif;
  777.             font-size: 2em;
  778.             line-height: 1em;
  779.             font-weight: 700;
  780.             text-overflow: ellipsis;
  781.             white-space: normal;
  782.             text-shadow: 0 0 30px 20px black;
  783.             cursor: auto;
  784.             color: white;
  785.             align-self: left;
  786.             position: relative;
  787.             z-index: 2180;
  788.         }
  789.  
  790.         #links-in-header-form .CentAnni-info-text {
  791.             margin: -10px 80px 20px 0px;
  792.         }
  793.  
  794.         .links-header-container {
  795.             display: flex;
  796.             align-items: center;
  797.             gap: 20px;
  798.         }
  799.  
  800.         .links-header-container label {
  801.             color: whitesmoke;
  802.         }
  803.  
  804.         .links-header-container .url-container:first-child {
  805.             flex: 1;
  806.         }
  807.  
  808.         .links-header-container .url-container:last-child {
  809.             flex: 2;
  810.         }
  811.  
  812.         .sidebar-container {
  813.             display: flex;
  814.             align-items: center;
  815.             margin: 10px 0 0 0;
  816.             color: whitesmoke;
  817.             justify-content: flex-start;
  818.             gap: 20px;
  819.         }
  820.  
  821.         .sidebar-container .checkbox-container {
  822.             margin-bottom: 0 !important;
  823.             flex: 1;
  824.         }
  825.  
  826.         .sidebar-container .url-container {
  827.         flex: 2;
  828.         }
  829.  
  830.         .playback-speed-container {
  831.             display: flex;
  832.             gap: 10px;
  833.             margin: 10px 0;
  834.         }
  835.  
  836.         #custom-css-form .playback-speed-container .checkbox-container {
  837.             max-width: calc(55% - 5px);
  838.             margin: 0;
  839.             align-content: center;
  840.             flex: 0 0 auto;
  841.         }
  842.  
  843.         #custom-css-form .playback-speed-container .number-input-container {
  844.             max-width: calc(45% - 5px);
  845.             margin: 0;
  846.             align-self: center;
  847.             flex: 1 0 auto;
  848.         }
  849.  
  850.         #custom-css-form .playback-speed-container .number-input-container .number-input-field {
  851.             width: 5ch;
  852.         }
  853.  
  854.         #custom-css-form .playback-speed-container .number-input-label {
  855.             display: flex;
  856.         }
  857.  
  858.         #color-code-videos-form .checkbox-container { margin: 20px 0 0 0; }
  859.         #color-code-videos-form .label-style-settings {margin: 0; }
  860.         #color-code-videos-form > div.videos-old-container > span { margin: 0; }
  861.         #color-code-videos-form .CentAnni-info-text { margin: 5px 80px 20px 0px; }
  862.         #custom-css-form .checkbox-container { margin: 10px 0; }
  863.  
  864.         #custom-css-form .file-naming-container {
  865.             max-width: 90%;
  866.             margin: 20px 0;
  867.             display: flex;
  868.             gap: 25px;
  869.             align-content: center;
  870.         }
  871.  
  872.         #custom-css-form .label-style-settings {
  873.             margin-bottom: 0;
  874.             white-space: nowrap;
  875.             align-content: center;
  876.         }
  877.  
  878.         #custom-css-form .dropdown-item {
  879.             line-height: 2em;
  880.             padding-top: 7px;
  881.             padding-right: 7px;
  882.             padding-bottom: 7px;
  883.         }
  884.  
  885.         #custom-css-form .dropdown-item-selected,
  886.         #custom-css-form .dropdown-item-selected::before {
  887.             color: hsl(0, 0%, 100%);
  888.         }
  889.  
  890.         input[type="range"] {
  891.             -webkit-appearance: none;
  892.             appearance: none;
  893.             width: 100%;
  894.             height: 6px;
  895.             background: #ccc;
  896.             border-radius: 5px;
  897.             outline: none;
  898.         }
  899.  
  900.         input[type="range"]::-moz-range-thumb,
  901.         input[type="range"]::-webkit-slider-thumb {
  902.             -webkit-appearance: none;
  903.             appearance: none;
  904.             width: 16px;
  905.             height: 16px;
  906.             background: #007bff;
  907.             border-radius: 50%;
  908.             cursor: pointer;
  909.             border: 2px solid #ffffff;
  910.         }
  911.  
  912.         input[type="range"]::-moz-range-track,
  913.         input[type="range"]::-webkit-slider-runnable-track {
  914.             background: #007bff;
  915.             height: 6px;
  916.             border-radius: 5px;
  917.         }
  918.  
  919.         .videos-old-container {
  920.             display: flex;
  921.             max-width: 90%;
  922.             align-items: center;
  923.             gap: 25px;
  924.             margin: 20px 0;
  925.         }
  926.  
  927.         .slider-container {
  928.             display: flex;
  929.             align-items: center;
  930.             gap: 10px;
  931.             flex: 1;
  932.         }
  933.  
  934.         .slider-container input[type="range"] {
  935.             flex: 1;
  936.         }
  937.  
  938.         .videos-colorpicker-container {
  939.             display: flex;
  940.             flex-direction: column;
  941.             align-items: center;
  942.             gap: 30px;
  943.         }
  944.  
  945.         .videos-colorpicker-row {
  946.             display: flex;
  947.             justify-content: flex-start;
  948.             align-items: center;
  949.             width: 100%;
  950.             gap: 20px;
  951.             margin: 0;
  952.         }
  953.  
  954.         .videos-colorpicker-row span {
  955.             text-align: right;
  956.             flex: 1;
  957.             max-width: 50%;
  958.         }
  959.  
  960.         .videos-colorpicker-row input {
  961.             flex: 1;
  962.             margin: 0;
  963.             padding: 0;
  964.             max-width: 62px;
  965.             height: 26px;
  966.             cursor: pointer;
  967.             background: none;
  968.             border: none;
  969.             box-shadow: none;
  970.             appearance: none;
  971.             -webkit-appearance: none;
  972.             -moz-appearance: none;
  973.         }
  974.  
  975.         input[type="color"]::-webkit-color-swatch-wrapper {
  976.             border: none;
  977.             padding: 0;
  978.         }
  979.  
  980.         input[type="color"]::-webkit-color-swatch {
  981.             border: none;
  982.         }
  983.  
  984.  
  985.         #custom-css-form .videos-colorpicker-row span {
  986.             text-align: left;
  987.             flex: initial;
  988.         }
  989.  
  990.         #custom-css-form .videos-colorpicker-row input {
  991.             margin: 0 0 0 -3px;
  992.         }
  993.  
  994.         #custom-css-form .videos-colorpicker-row {
  995.             gap: 10px;
  996.         }
  997.  
  998.         .number-input-container {
  999.             margin: 10px 0;
  1000.         }
  1001.  
  1002.         .number-input-field {
  1003.             width: 5ch;
  1004.             margin: 0 10px 0 0;
  1005.             align-items: center;
  1006.             font-size: 1.4em;
  1007.             line-height: 1.5em;
  1008.             font-weight: 700;
  1009.             cursor: auto;
  1010.             text-decoration: none;
  1011.             text-align: center;
  1012.             display: inline-block;
  1013.  
  1014.         }
  1015.  
  1016.         .number-input-label span {
  1017.             display: initial;
  1018.             cursor: auto;
  1019.         }
  1020.  
  1021.         .selection-color-container {
  1022.             margin: 10px 0;
  1023.             flex-direction: row;
  1024.         }
  1025.  
  1026.         .selection-color-container > .checkbox-container {
  1027.             margin: 0 !important;
  1028.         }
  1029.  
  1030.         .selection-color-container > .videos-colorpicker-row {
  1031.             width: auto;
  1032.         }
  1033.  
  1034.         :root:not(:has(:is(
  1035.             ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters],
  1036.             ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters]
  1037.         ))) :is(.CentAnni-tabView-tab[data-tab="tab-4"], .CentAnni-chapter-title, #movie_player .CentAnni-chapter-title),
  1038.         :root:not(:has(ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-searchable-transcript])) .CentAnni-tabView-tab[data-tab="tab-5"] {
  1039.             display: none !important;
  1040.         }
  1041.  
  1042.         :root:has(ytd-watch-flexy ytd-playlist-panel-renderer[hidden]) .CentAnni-tabView-tab[data-tab="tab-6"] {
  1043.             display: none;
  1044.         }
  1045.  
  1046.         /* progress bar css */
  1047.         .CentAnni-progress-bar {
  1048.             #progress-bar-bar {
  1049.                 width: 100%;
  1050.                 height: 3px;
  1051.                 background: rgba(255, 255, 255, 0.2);
  1052.                 position: absolute;
  1053.                 bottom: 0;
  1054.                 opacity: 0;
  1055.                 z-index: 58;
  1056.                 pointer-events: none;
  1057.             }
  1058.  
  1059.             #progress-bar-progress, #progress-bar-buffer {
  1060.                 width: 100%;
  1061.                 height: 3px;
  1062.                 transform-origin: 0 0;
  1063.                 position: absolute;
  1064.             }
  1065.  
  1066.             #progress-bar-progress {
  1067.                 background: var(--progressBarColor);
  1068.                 filter: none;
  1069.                 z-index: 1;
  1070.             }
  1071.  
  1072.             .ytp-autohide .ytp-chrome-bottom .ytp-load-progress, .ytp-autohide .ytp-chrome-bottom .ytp-play-progress { display: none !important; }
  1073.             .ytp-autohide .ytp-chrome-bottom { opacity: 1 !important; display: block !important; }
  1074.             .ytp-autohide .ytp-chrome-bottom .ytp-chrome-controls { opacity: 0 !important; }
  1075.             .ad-interrupting #progress-bar-progress { background: transparent; }
  1076.             .ytp-ad-persistent-progress-bar-container { display: none; }
  1077.             #progress-bar-buffer { background: rgba(255, 255, 255, 0.4); }
  1078.  
  1079.             .ytp-autohide #progress-bar-start.active,
  1080.             .ytp-autohide #progress-bar-bar.active,
  1081.             .ytp-autohide #progress-bar-end.active
  1082.             { opacity: 1; }
  1083.  
  1084.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-bar-container {
  1085.                 bottom: 0px !important;
  1086.                 opacity: 1 !important;
  1087.                 height: 4px !important;
  1088.                 transform: translateX(0px) !important;
  1089.                 z-index: 100;
  1090.             }
  1091.  
  1092.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-bar,
  1093.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-list {
  1094.                 background: transparent !important;
  1095.                 box-shadow: none !important;
  1096.             }
  1097.  
  1098.             .ytp-autohide .ytp-chrome-bottom .previewbar {
  1099.                 height: calc(100% + 1px) !important;
  1100.                 bottom: -1px !important;
  1101.                 margin-bottom: 0px !important;
  1102.                 opacity: 1 !important;
  1103.                 border: none !important;
  1104.                 box-shadow: none !important;
  1105.                 will-change: opacity, transform !important;
  1106.             }
  1107.  
  1108.             .ytp-autohide .ytp-chrome-bottom .ytp-progress-bar-container:not(.active) .ytp-scrubber-container {
  1109.                 opacity: 0;
  1110.                 pointer-events: none;
  1111.             }
  1112.  
  1113.             #progress-bar-start, #progress-bar-end {
  1114.                 position: absolute;
  1115.                 height: 3px;
  1116.                 width: 12px;
  1117.                 bottom: 0;
  1118.                 z-index: 2077;
  1119.                 opacity: 0;
  1120.                 pointer-events: none;
  1121.             }
  1122.  
  1123.             :fullscreen #progress-bar-start, :fullscreen #progress-bar-end { width: 24px; }
  1124.             :-webkit-full-screen #progress-bar-start, :-webkit-full-screen #progress-bar-end { width: 24px; }
  1125.             .html5-video-player.ytp-fullscreen #progress-bar-start, .html5-video-player.ytp-fullscreen #progress-bar-end { width: 24px !important; }
  1126.  
  1127.             #progress-bar-start {
  1128.                 left: 0;
  1129.                 background: var(--progressBarColor);
  1130.             }
  1131.  
  1132.             #progress-bar-end {
  1133.                 right: 0;
  1134.                 background: rgba(255, 255, 255, 0.2);
  1135.             }
  1136.         }
  1137.  
  1138.         /* playback speed css */
  1139.         .CentAnni-playback-speed {
  1140.             #actions.ytd-watch-metadata {
  1141.                 justify-content: end;
  1142.             }
  1143.  
  1144.             .yt-spec-button-view-model.style-scope.ytd-menu-renderer {
  1145.                 display: flex;
  1146.                 height: 36px;
  1147.                 width: 36px;
  1148.                 margin-right: 8px;
  1149.                 overflow: hidden;
  1150.             }
  1151.  
  1152.             ytd-menu-renderer[has-items] yt-button-shape.ytd-menu-renderer {
  1153.                 margin-left: 0 !important;
  1154.             }
  1155.  
  1156.             ytd-menu-renderer[has-flexible-items][safe-area] .top-level-buttons.ytd-menu-renderer {
  1157.                 margin-bottom: 0;
  1158.             }
  1159.  
  1160.             #top-level-buttons-computed > yt-button-view-model > button-view-model > button {
  1161.                 padding: 0 0 0 12px;
  1162.             }
  1163.  
  1164.             .CentAnni-playback-control {
  1165.                 display: flex;
  1166.                 justify-content: center;
  1167.                 align-items: center;
  1168.                 flex: 1;
  1169.                 margin: 0 8px;
  1170.             }
  1171.  
  1172.             .CentAnni-playback-speed-icon {
  1173.                 height: 24px;
  1174.                 width: 24px;
  1175.                 padding: 0 4px 0 0;
  1176.                 opacity: .9;
  1177.             }
  1178.  
  1179.             .CentAnni-playback-speed-display {
  1180.                 background: rgba(255,255,255,0.1);
  1181.                 height: 36px;
  1182.                 justify-content: center;
  1183.                 align-items: center;
  1184.                 cursor: default;
  1185.                 user-select: none;
  1186.                 -webkit-user-select: none;
  1187.                 -moz-user-select: none;
  1188.                 -ms-user-select: none;
  1189.             }
  1190.  
  1191.             .CentAnni-playback-speed-button {
  1192.                 cursor: pointer;
  1193.                 user-select: none;
  1194.                 -webkit-user-select: none;
  1195.                 -moz-user-select: none;
  1196.                 -ms-user-select: none;
  1197.             }
  1198.  
  1199.             .CentAnni-playback-speed-button:nth-child(2) {
  1200.                 border-top-right-radius: 0;
  1201.                 border-bottom-right-radius: 0;
  1202.             }
  1203.  
  1204.             .CentAnni-playback-speed-button:last-child {
  1205.                 border-top-left-radius: 0;
  1206.                 border-bottom-left-radius: 0;
  1207.             }
  1208.  
  1209.             .CentAnni-playback-speed-button:active {
  1210.                 background: rgb(72,72,72) !important;
  1211.             }
  1212.  
  1213.             .CentAnni-playback-speed-display::before,
  1214.             .CentAnni-playback-speed-display::after {
  1215.                 content: "";
  1216.                 background: rgba(255,255,255,0.2);
  1217.                 position: initial;
  1218.                 right: 0;
  1219.                 top: 6px;
  1220.                 height: 24px;
  1221.                 width: 1px;
  1222.             }
  1223.  
  1224.             .CentAnni-playback-speed-display::before {
  1225.                 margin-right: 10px;
  1226.             }
  1227.  
  1228.             .CentAnni-playback-speed-display::after {
  1229.                 margin-left: 10px;
  1230.             }
  1231.  
  1232.             ytd-watch-metadata[flex-menu-enabled] #actions-inner.ytd-watch-metadata {
  1233.                 width: 10%;
  1234.             }
  1235.         }
  1236.  
  1237.         /* video tab view css */
  1238.         .CentAnni-video-tabView {
  1239.             .CentAnni-tabView {
  1240.                 position: relative;
  1241.                 display: flex;
  1242.                 flex-direction: column;
  1243.                 width: var(--ytd-watch-flexy-sidebar-width);
  1244.                 min-width: var(--ytd-watch-flexy-sidebar-min-width);
  1245.                 font-family: "Roboto", "Arial", sans-serif;
  1246.                 margin: 0;
  1247.                 padding: 0;
  1248.                 border-radius: 12px 12px 0 0;
  1249.                 border: 1px solid rgba(255, 255, 255, 0.2);
  1250.                 overflow: hidden;
  1251.                 box-sizing: border-box;
  1252.                 background-color: transparent;
  1253.                 z-index: 10;
  1254.             }
  1255.  
  1256.             .CentAnni-tabView:has(.CentAnni-tabView-tab.active[data-tab="tab-2"]) {
  1257.                 border-radius: 12px;
  1258.             }
  1259.  
  1260.             .CentAnni-tabView:not(:has(.CentAnni-tabView-tab[data-tab="tab-2"])) ytd-comments#comments {
  1261.                 display: none;
  1262.             }
  1263.  
  1264.             .CentAnni-tabView-header {
  1265.                 display: flex;
  1266.                 position: relative;
  1267.                 overflow-x: auto;
  1268.                 overflow-y: hidden;
  1269.                 height: 50px;
  1270.                 padding: 0;
  1271.                 margin: 0;
  1272.                 color: var(--yt-spec-text-primary);
  1273.                 background-color: var(--yt-spec-brand-background-primary);
  1274.                 z-index: 7;
  1275.             }
  1276.  
  1277.             .CentAnni-tabView-subheader {
  1278.                 display: flex;
  1279.                 flex-direction: row;
  1280.                 height: 50px;
  1281.                 font-size: 9px;
  1282.                 line-height: 1;
  1283.                 padding: 0 8px;
  1284.                 align-items: center;
  1285.                 gap: 8px;
  1286.                 z-index: 8;
  1287.             }
  1288.  
  1289.             .CentAnni-tabView-tab {
  1290.                 align-items: center;
  1291.                 border: none;
  1292.                 border-radius: 8px;
  1293.                 display: inline-flex;
  1294.                 height: 32px;
  1295.                 min-width: 12px;
  1296.                 white-space: nowrap;
  1297.                 font-family: "Roboto","Arial",sans-serif;
  1298.                 font-size: 1.4em;
  1299.                 line-height: 2em;
  1300.                 font-weight: 500;
  1301.                 margin: 0;
  1302.                 background-color: rgba(255,255,255,0.1);
  1303.                 color: #f1f1f1;
  1304.                 text-decoration: none;
  1305.                 padding: 0 12px;
  1306.                 z-index: 10;
  1307.             }
  1308.  
  1309.             .CentAnni-tabView-tab:hover {
  1310.                 background: rgba(255,255,255,0.2);
  1311.                 border-color: transparent;
  1312.             }
  1313.  
  1314.             .CentAnni-tabView-tab.active {
  1315.                 background-color: #f1f1f1;
  1316.                 color: #0f0f0f;
  1317.             }
  1318.  
  1319.             .CentAnni-tabView-content {
  1320.                 overflow-y: auto;
  1321.                 overflow-x: hidden;
  1322.                 padding: 0;
  1323.                 margin: 0;
  1324.                 max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1325.             }
  1326.  
  1327.             .CentAnni-tabView-content {
  1328.                 display: none;
  1329.             }
  1330.  
  1331.             .CentAnni-tabView-content.active {
  1332.                 display: block !important;
  1333.             }
  1334.  
  1335.             .CentAnni-tabView-content-hidden {
  1336.                 display: none;
  1337.                 opacity: 0;
  1338.                 visibility: hidden;
  1339.             }
  1340.  
  1341.             .CentAnni-tabView-content-active {
  1342.                 display: block !important;
  1343.                 opacity: 1 !important;
  1344.                 visibility: visible !important;
  1345.             }
  1346.  
  1347.             ytd-watch-flexy ytd-playlist-panel-renderer[hidden] {
  1348.                 display: none !important;
  1349.             }
  1350.  
  1351.  
  1352.             .CentAnni-tabView-content-nascosta {
  1353.                 opacity: 0;
  1354.                 visibility: hidden;
  1355.             }
  1356.  
  1357.             .CentAnni-tabView-content-attiva {
  1358.                 opacity: 1 !important;
  1359.                 visibility: visible !important;
  1360.             }
  1361.  
  1362.  
  1363.             .CentAnni-tabView-content-block {
  1364.                 display: block !important;
  1365.             }
  1366.  
  1367.             .CentAnni-tabView-content-none {
  1368.                 display: none;
  1369.             }
  1370.  
  1371.             #tab-2 {
  1372.                 border-top: 1px solid rgba(255, 255, 255, 0.2);
  1373.             }
  1374.  
  1375.             #related.style-scope.ytd-watch-flexy {
  1376.                 position: absolute;
  1377.                 max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1378.                 width: var(--ytd-watch-flexy-sidebar-width);
  1379.                 top: 76px;
  1380.                 left: 0;
  1381.                 margin: 0;
  1382.                 padding: 15px 10px 0 10px;
  1383.                 overflow-y: auto;
  1384.                 overflow-x: hidden;
  1385.                 visibility: hidden;
  1386.                 opacity: 0;
  1387.                 z-index: 5;
  1388.                 border: 1px solid rgba(255, 255, 255, 0.2);
  1389.                 border-top: none;
  1390.                 box-sizing: border-box;
  1391.                 border-radius: 0 0 12px 12px;
  1392.             }
  1393.  
  1394.             ytd-watch-metadata.ytd-watch-flexy {
  1395.                 margin: 12px 10px 0 10px;
  1396.             }
  1397.  
  1398.             ytd-watch-flexy ytd-comments {
  1399.                 margin: 0;
  1400.                 padding: 0 10px;
  1401.             }
  1402.  
  1403.             #comments > #sections > #header > ytd-comments-header-renderer > #title > #additional-section {
  1404.                 margin-left: auto;
  1405.             }
  1406.  
  1407.             #comments > #sections > #header {
  1408.                 margin: 0 12px;
  1409.             }
  1410.  
  1411.             ytd-engagement-panel-section-list-renderer[modern-panels]:not([live-chat-engagement-panel]) {
  1412.                 border-radius: 0 0 12px 12px;
  1413.             }
  1414.  
  1415.             #related.style-scope.ytd-watch-flexy[full-bleed-player] {
  1416.                 top: 30px;
  1417.             }
  1418.  
  1419.             ytd-watch-flexy  #header.style-scope.ytd-engagement-panel-section-list-renderer {
  1420.                 display: none;
  1421.             }
  1422.  
  1423.             ytd-engagement-panel-section-list-renderer {
  1424.                 box-sizing: content-box;
  1425.                 display: flexbox;
  1426.                 display: flex;
  1427.                 flex-direction: column;
  1428.             }
  1429.  
  1430.             ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters],
  1431.             ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters] {
  1432.                 position: absolute;
  1433.                 max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1434.                 width: var(--ytd-watch-flexy-sidebar-width);
  1435.                 top: 76px;
  1436.                 left: 0;
  1437.                 margin: 0;
  1438.                 padding: 0;
  1439.                 overflow-y: auto;
  1440.                 overflow-x: hidden;
  1441.                 z-index: 5;
  1442.                 border: 1px solid rgba(255, 255, 255, 0.2);
  1443.                 border-top: none;
  1444.                 box-sizing: border-box;
  1445.             }
  1446.  
  1447.             ytd-watch-flexy #description.ytd-expandable-video-description-body-renderer {
  1448.                 padding-right: 10px !important;
  1449.             }
  1450.  
  1451.             #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
  1452.                 margin-bottom: 0;
  1453.             }
  1454.  
  1455.             ytd-watch-flexy ytd-structured-description-content-renderer[engagement-panel] ytd-video-description-header-renderer.ytd-structured-description-content-renderer {
  1456.                 display: none;
  1457.             }
  1458.  
  1459.             ytd-engagement-panel-section-list-renderer ytd-merch-shelf-renderer {
  1460.                 display: none;
  1461.             }
  1462.  
  1463.             ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-structured-description] {
  1464.                 position: absolute;
  1465.                 max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1466.                 width: var(--ytd-watch-flexy-sidebar-width);
  1467.                 top: 76px;
  1468.                 left: 0;
  1469.                 margin: 0;
  1470.                 padding: 10px 0 0 10px;
  1471.                 overflow-y: auto;
  1472.                 overflow-x: hidden;
  1473.                 z-index: 5;
  1474.                 background: black;
  1475.                 border: 1px solid rgba(255, 255, 255, 0.2);
  1476.                 border-top: none;
  1477.                 box-sizing: border-box;
  1478.             }
  1479.  
  1480.             ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id^="shopping_panel_for_entry_point_"] {
  1481.                 display: none;
  1482.             }
  1483.  
  1484.             ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-searchable-transcript] {
  1485.                 position: absolute;
  1486.                 top: 0;
  1487.                 left: 0;
  1488.                 max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1489.                 width: var(--ytd-watch-flexy-sidebar-width);
  1490.                 top: 76px;
  1491.                 margin: 0;
  1492.                 padding: 0;
  1493.                 z-index: 5;
  1494.                 border: 1px solid rgba(255, 255, 255, 0.2);
  1495.                 border-top: none;
  1496.                 box-sizing: border-box;
  1497.             }
  1498.  
  1499.             ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-searchable-transcript] #footer #menu.ytd-engagement-panel-title-header-renderer {
  1500.                 margin-left: auto;
  1501.             }
  1502.  
  1503.             #body.ytd-transcript-renderer {
  1504.                 display: none;
  1505.             }
  1506.  
  1507.             ytd-transcript-renderer {
  1508.                 flex: 1 1 auto;
  1509.             }
  1510.  
  1511.             ytd-transcript-segment-list-renderer {
  1512.                 height: 100%;
  1513.             }
  1514.  
  1515.             ytd-text-inline-expander[engagement-panel] {
  1516.                 display: block;
  1517.                 margin: 0;
  1518.                 padding: 0;
  1519.                 border: none;
  1520.                 border-radius: 0;
  1521.                 background: transparent;
  1522.                 padding-right: 10px;
  1523.             }
  1524.  
  1525.             ytd-expandable-video-description-body-renderer > ytd-text-inline-expander > #snippet {
  1526.                 max-height: 100% !important;
  1527.             }
  1528.  
  1529.             #media-lockups > ytd-structured-description-playlist-lockup-renderer > #lockup-container > #playlist-thumbnail {
  1530.                 width: 100%;
  1531.             }
  1532.  
  1533.             #items > yt-video-attributes-section-view-model > div > div.yt-video-attributes-section-view-model__video-attributes.yt-video-attributes-section-view-model__scroll-container > div > yt-video-attribute-view-model > div:hover,
  1534.             #media-lockups > ytd-structured-description-playlist-lockup-renderer > #lockup-container:hover {
  1535.                 filter: brightness(1.1);
  1536.             }
  1537.  
  1538.             ytd-text-inline-expander,
  1539.             #navigation-button.ytd-rich-list-header-renderer,
  1540.             ytd-expandable-video-description-body-renderer > ytd-expander > tp-yt-paper-button#more.ytd-expander {
  1541.                 display: none;
  1542.             }
  1543.  
  1544.             ytd-expandable-video-description-body-renderer[engagement-panel]:not([shorts-panel]) ytd-expander.ytd-expandable-video-description-body-renderer {
  1545.                 border-radius: 0;
  1546.                 padding: 0;
  1547.                 background: transparent;
  1548.             }
  1549.  
  1550.             ytd-structured-description-content-renderer[engagement-panel] ytd-expandable-video-description-body-renderer.ytd-structured-description-content-renderer {
  1551.                 padding: 0;
  1552.             }
  1553.  
  1554.             ytd-watch-flexy ytd-engagement-panel-section-list-renderer[enable-anchored-panel][target-id="engagement-panel-structured-description"] #content.ytd-engagement-panel-section-list-renderer .ytd-engagement-panel-section-list-renderer:first-child,
  1555.             ytd-watch-flexy ytd-structured-description-content-renderer[engagement-panel] #items.ytd-structured-description-content-renderer {
  1556.                 padding: 0;
  1557.             }
  1558.  
  1559.             ytd-video-description-transcript-section-renderer {
  1560.                 position: fixed;
  1561.                 bottom: 0;
  1562.                 left: 0;
  1563.                 z-index: -9999;
  1564.                 pointer-events: none;
  1565.                 opacity: 0;
  1566.             }
  1567.  
  1568.             ytd-video-description-infocards-section-renderer[engagement-panel] #social-links.ytd-video-description-infocards-section-renderer {
  1569.                 margin: 0 0 16px 0;
  1570.                 padding: 0;
  1571.             }
  1572.  
  1573.             ytd-structured-description-content-renderer[engagement-panel] ytd-video-description-infocards-section-renderer.ytd-structured-description-content-renderer {
  1574.                 padding: 16px 0 0 0;
  1575.             }
  1576.  
  1577.             #infocards-section > ytd-compact-infocard-renderer:last-of-type {
  1578.                 margin-bottom: 0;
  1579.             }
  1580.  
  1581.             #bottom-row > #description {
  1582.                 cursor: default;
  1583.                 pointer-events: none;
  1584.             }
  1585.  
  1586.             #content > #description a:hover,
  1587.             #snippet > #snippet-text > yt-attributed-string a:hover {
  1588.                 text-decoration: underline;
  1589.             }
  1590.  
  1591.             ytd-compact-video-renderer:hover,
  1592.             ytd-video-description-course-section-renderer > #topic-link:hover,
  1593.             #infocards-section > ytd-compact-infocard-renderer > #content:hover,
  1594.             #items > ytd-video-description-infocards-section-renderer > #header:hover,
  1595.             ytd-watch-card-compact-video-renderer.ytd-vertical-watch-card-list-renderer:not([is-condensed]):hover,
  1596.             #always-shown > ytd-rich-metadata-row-renderer > #contents > ytd-rich-metadata-renderer > #endpoint-link:hover,
  1597.             #items > ytd-video-description-infocards-section-renderer > #infocards-section > ytd-compact-infocard-renderer > #content:hover,
  1598.             ytd-playlist-panel-renderer h3 yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:hover {
  1599.                 background: var(--yt-spec-badge-chip-background);
  1600.             }
  1601.  
  1602.             ytd-playlist-panel-renderer #publisher-container yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:hover {
  1603.                 color: red;
  1604.             }
  1605.  
  1606.             #playlist-actions.ytd-playlist-panel-renderer {
  1607.                 cursor: default;
  1608.             }
  1609.  
  1610.             ytd-watch-metadata[description-collapsed] #description.ytd-watch-metadata a {
  1611.                 cursor: pointer;
  1612.                 pointer-events: all;
  1613.                 color:var(--yt-endpoint-visited-color);
  1614.             }
  1615.  
  1616.             ytd-watch-metadata[description-collapsed] #description.ytd-watch-metadata a:hover {
  1617.                 color: var(--yt-spec-call-to-action);
  1618.             }
  1619.  
  1620.             #description > #description-inner > #ytd-watch-info-text > tp-yt-paper-tooltip {
  1621.                 display: none;
  1622.             }
  1623.  
  1624.             #description > #description-interaction {
  1625.                 display: none;
  1626.             }
  1627.  
  1628.             .yt-animated-icon.lottie-player.style-scope {
  1629.                 pointer-events: none;
  1630.             }
  1631.  
  1632.             #description.ytd-watch-metadata {
  1633.                 background: none;
  1634.             }
  1635.  
  1636.             ytd-transcript-search-box-renderer {
  1637.                 margin: 12px 0;
  1638.             }
  1639.  
  1640.             .CentAnni-info-date {
  1641.                 margin-left: 6px;
  1642.             }
  1643.  
  1644.             #ytd-watch-info-text.ytd-watch-metadata {
  1645.                 height: 18px;
  1646.             }
  1647.  
  1648.             #middle-row.ytd-watch-metadata {
  1649.                 padding: 10px 0;
  1650.             }
  1651.  
  1652.             .content.style-scope.ytd-info-panel-content-renderer {
  1653.                 padding: 10px 16px;
  1654.             }
  1655.  
  1656.             #description-inner.ytd-watch-metadata {
  1657.                 margin: 0px 12px 0px 52px;
  1658.             }
  1659.  
  1660.             #view-count.ytd-watch-info-text, #date-text.ytd-watch-info-text {
  1661.                 align-items: center;
  1662.             }
  1663.  
  1664.             ytd-watch-info-text:not([detailed]) #info.ytd-watch-info-text {
  1665.                 align-content: center;
  1666.             }
  1667.  
  1668.             #bottom-row.ytd-watch-metadata {
  1669.                 flex-direction: column;
  1670.             }
  1671.  
  1672.             .ytVideoMetadataCarouselViewModelHost {
  1673.                 flex-direction: row;
  1674.                 padding: 12px;
  1675.                 height: 100%;
  1676.                 margin-bottom: 24px;
  1677.                 gap: 20px;
  1678.                 align-items: center;
  1679.             }
  1680.  
  1681.             .ytVideoMetadataCarouselViewModelCarouselContainer {
  1682.                 margin-top: 0;
  1683.             }
  1684.  
  1685.             ytd-engagement-panel-section-list-renderer[target-id=PAsearch_preview] {
  1686.                 z-index: 100;
  1687.                 background: black;
  1688.                 height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x)) !important;
  1689.                 max-height: unset !important;
  1690.                 margin-top: -52px;
  1691.             }
  1692.  
  1693.             ytd-engagement-panel-section-list-renderer[target-id=PAsearch_preview] > #header {
  1694.                 display: block !important;
  1695.             }
  1696.  
  1697.             ytd-engagement-panel-section-list-renderer[target-id=PAsearch_preview] #content ytd-section-list-renderer {
  1698.                 padding-left: 10px;
  1699.             }
  1700.  
  1701.             ytd-engagement-panel-section-list-renderer[target-id=PAsearch_preview] #content ytd-section-list-renderer > #contents {
  1702.                 overflow-y: auto;
  1703.             }
  1704.  
  1705.             /* live chat adjustments */
  1706.             ytd-live-chat-frame[modern-buttons][collapsed] {
  1707.                 display: none;
  1708.             }
  1709.  
  1710.             #columns > #secondary > #secondary-inner > #chat-container {
  1711.                 top: 24px;
  1712.                 position: absolute;
  1713.                 width: var(--ytd-watch-flexy-sidebar-width);
  1714.                 min-width: var(--ytd-watch-flexy-sidebar-min-width);
  1715.             }
  1716.  
  1717.  
  1718.             ytd-watch-flexy[flexy]:not([fixed-panels]) #chat.ytd-watch-flexy:not([collapsed]) {
  1719.                 height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) + 1px) !important;
  1720.                 border: 1px solid rgb(51, 51, 51);
  1721.             }
  1722.  
  1723.             #chat.ytd-watch-flexy {
  1724.                 margin-bottom: 0;
  1725.             }
  1726.  
  1727.             ytd-watch-flexy:not([is-two-columns_])[theater] #chat.ytd-watch-flexy:not([collapsed]) {
  1728.                 height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) + 1px) !important;
  1729.             }
  1730.  
  1731.             /* theater mode active */
  1732.             ytd-watch-flexy[theater] #playlist,
  1733.             ytd-watch-flexy[theater] ytd-comments,
  1734.             ytd-watch-flexy[theater] #related.style-scope.ytd-watch-flexy,
  1735.             ytd-watch-flexy[theater] ytd-playlist-panel-renderer[collapsible] .header.ytd-playlist-panel-renderer,
  1736.             ytd-watch-flexy[theater] ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-searchable-transcript],
  1737.             ytd-watch-flexy[theater] ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-structured-description],
  1738.             ytd-watch-flexy[theater] ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters],
  1739.             ytd-watch-flexy[theater] ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters],
  1740.             ytd-watch-flexy[theater][flexy][js-panel-height_] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy,
  1741.             ytd-watch-flexy[theater][flexy][js-panel-height_] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy[target-id="engagement-panel-structured-description"] {
  1742.                 height: 0;
  1743.                 padding-top: 0;
  1744.                 padding-bottom: 0;
  1745.                 margin-top: 0;
  1746.                 margin-bottom: 0;
  1747.                 opacity: 0;
  1748.                 visibility: hidden;
  1749.                 z-index: -1;
  1750.                 pointer-events: none;
  1751.             }
  1752.  
  1753.             ytd-watch-flexy[theater] #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-clip-create] {
  1754.                 display: none;
  1755.             }
  1756.  
  1757.             ytd-watch-flexy[theater] #donation-shelf {
  1758.                 display: none !important;
  1759.             }
  1760.  
  1761.             ytd-watch-flexy[theater] .CentAnni-tabView-content {
  1762.                 display: none !important;
  1763.             }
  1764.  
  1765.             ytd-watch-flexy[theater][cinematics-enabled] #secondary.ytd-watch-flexy {
  1766.                 align-content: center;
  1767.             }
  1768.  
  1769.             ytd-watch-flexy[theater][is-two-columns_][full-bleed-player] #secondary.ytd-watch-flexy {
  1770.                 margin-top: 34.5px !important;
  1771.                 display: flex;
  1772.                 justify-content: center;
  1773.                 align-items: flex-start;
  1774.             }
  1775.  
  1776.             ytd-watch-flexy[theater] .CentAnni-tabView {
  1777.                 border-radius: 25px;
  1778.             }
  1779.  
  1780.             ytd-watch-flexy[theater] .CentAnni-tabView-tab {
  1781.                 border-radius: 18px;
  1782.             }
  1783.  
  1784.             ytd-watch-flexy[is-two-columns_][theater] #columns {
  1785.                 max-height: calc(100vh - 56.25vw - var(--ytd-masthead-height,var(--ytd-toolbar-height)));
  1786.                 min-height: calc(169px - var(--ytd-masthead-height, var(--ytd-toolbar-height)));
  1787.             }
  1788.  
  1789.             ytd-watch-flexy[theater] #primary {
  1790.                 overflow-x: hidden;
  1791.             }
  1792.  
  1793.             #donation-shelf {
  1794.                 display: none;
  1795.                 opacity: 0;
  1796.                 visibility: hidden;
  1797.             }
  1798.  
  1799.             #donation-shelf.ytd-watch-flexy ytd-donation-shelf-renderer.ytd-watch-flexy {
  1800.                     margin-bottom: 0;
  1801.                     max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1802.                     overflow-y: auto;
  1803.             }
  1804.  
  1805.             ytd-donation-shelf-renderer[modern-panels] {
  1806.                 border-radius: 0px 0px 12px 12px;
  1807.             }
  1808.  
  1809.             ytd-donation-shelf-renderer {
  1810.                 border-top: none;
  1811.             }
  1812.  
  1813.             #collapse-controls-section {
  1814.                 display: none;
  1815.             }
  1816.  
  1817.             ytd-watch-flexy #playlist {
  1818.                 position: absolute;
  1819.                 margin: 0;
  1820.                 padding: 0;
  1821.                 top: 76px;
  1822.                 left: 0;
  1823.                 width: var(--ytd-watch-flexy-sidebar-width);
  1824.                 z-index: 5;
  1825.                 display: none;
  1826.                 opacity: 0;
  1827.                 visibility: hidden;
  1828.                 margin-bottom: 0;
  1829.             }
  1830.  
  1831.             ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer {
  1832.                 border-radius: 0 0 12px 12px;
  1833.             }
  1834.  
  1835.             ytd-watch-flexy[default-layout] #playlist,
  1836.             ytd-watch-flexy[default-layout] #secondary,
  1837.             ytd-watch-flexy[default-layout] #container.ytd-playlist-panel-renderer {
  1838.                 max-height: calc(100vh - var(--ytd-masthead-height,var(--ytd-toolbar-height)) - 2 * var(--ytd-margin-6x) - 52px) !important;
  1839.             }
  1840.  
  1841.             #container.ytd-playlist-panel-renderer {
  1842.                 border-top: none;
  1843.             }
  1844.  
  1845.             ytd-playlist-panel-renderer[collapsible] .header.ytd-playlist-panel-renderer {
  1846.                 padding: 12px 0 0 25px;
  1847.                 margin-right: 0;
  1848.             }
  1849.  
  1850.             #trailing-button.ytd-playlist-panel-renderer {
  1851.                 display: none;
  1852.             }
  1853.  
  1854.             .playlist-items.ytd-playlist-panel-renderer {
  1855.                 padding: 0;
  1856.             }
  1857.  
  1858.             /* single columns */
  1859.             ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy {
  1860.                 flex-direction: column;
  1861.             }
  1862.  
  1863.             ytd-watch-flexy:not([is-two-columns_])[theater] #primary {
  1864.                 flex-basis: auto;
  1865.                 height: calc(var(--ytd-watch-flexy-space-below-player) - 22px);
  1866.             }
  1867.  
  1868.             ytd-watch-flexy:not([is-two-columns_]) #primary ytd-watch-metadata {
  1869.                 height: calc(var(--ytd-watch-flexy-space-below-player) - 22px);
  1870.                 overflow-x: hidden;
  1871.             }
  1872.  
  1873.             ytd-watch-flexy:not([is-two-columns_])[theater][full-bleed-player] #secondary.ytd-watch-flexy,
  1874.             ytd-watch-flexy:not([is-two-columns_]) #secondary.ytd-watch-flexy {
  1875.                 display: flex;
  1876.                 margin: 0;
  1877.                 padding: 0;
  1878.                 justify-content: center;
  1879.                 align-items: center;
  1880.                 width: 100%;
  1881.             }
  1882.  
  1883.             ytd-watch-flexy:not([is-two-columns_]) .CentAnni-tabView {
  1884.                 margin-top: 12px;
  1885.                 width: 90vw;
  1886.             }
  1887.  
  1888.             ytd-watch-flexy:not([is-two-columns_])[theater] #panels,
  1889.             ytd-watch-flexy:not([is-two-columns_])[theater] #related {
  1890.                 display: none;
  1891.             }
  1892.  
  1893.             ytd-watch-flexy:not([is-two-columns_]) #primary #playlist,
  1894.             ytd-watch-flexy:not([is-two-columns_]) #related.style-scope.ytd-watch-flexy,
  1895.             ytd-watch-flexy:not([is-two-columns_]) #panels ytd-engagement-panel-section-list-renderer {
  1896.                 top: calc(var(--ytd-watch-flexy-space-below-player) + 54px);
  1897.                 max-height: 50vh !important;
  1898.                 width: 90vw;
  1899.                 margin: 0 !important;
  1900.                 left: 50%;
  1901.                 transform: translateX(-50%);
  1902.             }
  1903.  
  1904.             ytd-watch-flexy:not([is-two-columns_]):not([theater]) #chat.ytd-watch-flexy:not([collapsed]),
  1905.             ytd-watch-flexy:not([is-two-columns_]) .CentAnni-tabView-content {
  1906.                 max-height: 50vh !important;
  1907.             }
  1908.  
  1909.             ytd-watch-flexy:not([is-two-columns_])[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #secondary.ytd-watch-flexy {
  1910.                 padding: 0;
  1911.             }
  1912.  
  1913.             ytd-watch-flexy #columns #below > ytd-watch-metadata #title > ytd-badge-supported-renderer:not([hidden]) {
  1914.                 bottom: 8px;
  1915.                 left: calc(50% - 20px);
  1916.                 position: absolute;
  1917.                 cursor: default;
  1918.             }
  1919.  
  1920.             ytd-watch-flexy:not([is-two-columns_]):not([theater]) #expandable-metadata.ytd-watch-flexy {
  1921.                 display: none;
  1922.             }
  1923.  
  1924.             ytd-watch-flexy:not([is-two-columns_]):not([theater])[show-expandable-metadata] ytd-watch-metadata {
  1925.                 margin-bottom: 0;
  1926.             }
  1927.  
  1928.             ytd-watch-flexy:not([is-two-columns_]):has(#chat:not([collapsed])) .CentAnni-tabView {
  1929.                 display: none !important;
  1930.             }
  1931.  
  1932.             ytd-watch-flexy:not([is-two-columns_]):has(#chat:not([collapsed]))[theater] #primary {
  1933.                 height: max-content;
  1934.             }
  1935.         }
  1936.  
  1937.         .CentAnni-video-tabView:fullscreen #related.style-scope.ytd-watch-flexy,
  1938.         .CentAnni-video-tabView:fullscreen ytd-watch-flexy #playlist,
  1939.         .CentAnni-video-tabView:fullscreen ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-searchable-transcript],
  1940.         .CentAnni-video-tabView:fullscreen ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-structured-description],
  1941.         .CentAnni-video-tabView:fullscreen ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters],
  1942.         .CentAnni-video-tabView:fullscreen ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters] { top: 52px; }
  1943.  
  1944.         .CentAnni-tabView-chapters {
  1945.             .ytp-chapter-title-chevron,
  1946.             ytd-watch-flexy .ytp-chapter-title-prefix {
  1947.                 display: none;
  1948.             }
  1949.  
  1950.             ytd-watch-flexy .ytp-chapter-container {
  1951.                 padding: 0;
  1952.                 font-size: inherit;
  1953.                 line-height: inherit;
  1954.             }
  1955.  
  1956.             ytd-watch-flexy .sponsorChapterText,
  1957.             ytd-watch-flexy .ytp-chapter-title-content {
  1958.                 white-space: normal;
  1959.                 font-weight: 500;
  1960.             }
  1961.  
  1962.             #movie_player .sponsorChapterText,
  1963.             #movie_player .ytp-chapter-title-content {
  1964.                 overflow: hidden;
  1965.                 text-overflow: ellipsis;
  1966.                 text-wrap: nowrap;
  1967.                 line-height: 59px;
  1968.             }
  1969.  
  1970.             .CentAnni-chapter-title {
  1971.                 position: absolute;
  1972.                 display: flex;
  1973.                 flex-direction: row;
  1974.                 z-index: 2025;
  1975.                 top: 0;
  1976.                 right: 0;
  1977.                 max-width: calc(50% - 26px);
  1978.                 font-family: -apple-system, "Roboto", "Arial", sans-serif;
  1979.                 font-size: 1.4rem;
  1980.                 line-height: 2rem;
  1981.                 color: var(--yt-spec-text-primary) !important;
  1982.                 -webkit-user-select: none;
  1983.                 -moz-user-select: none;
  1984.                 -ms-user-select: none;
  1985.                 user-select: none;
  1986.                 cursor: default;
  1987.             }
  1988.  
  1989.             .CentAnni-chapter-title span {
  1990.                 text-wrap: nowrap;
  1991.                 margin-right: .5ch;
  1992.             }
  1993.  
  1994.             #movie_player .CentAnni-chapter-title {
  1995.                 position: absolute;
  1996.                 display: none;
  1997.                 flex-direction: row;
  1998.                 max-width: 50vw;
  1999.                 overflow: hidden;
  2000.                 z-index: 2053;
  2001.                 bottom: 0;
  2002.                 left: 50%;
  2003.                 font-weight: 500 !important;
  2004.                 font-size: 109%;
  2005.                 vertical-align: top;
  2006.                 white-space: nowrap;
  2007.                 line-height: 59px;
  2008.                 color: ghostwhite !important;
  2009.                 text-shadow: black 0 0 3px !important;
  2010.             }
  2011.  
  2012.             .ytp-autohide .ytp-chrome-bottom .CentAnni-chapter-title {
  2013.                 display: flex !important;
  2014.             }
  2015.  
  2016.             .CentAnni-chapter-title .ytp-chapter-container.sponsorblock-chapter-visible {
  2017.                 display: block !important;
  2018.             }
  2019.  
  2020.             .CentAnni-chapter-title:has(.ytp-chapter-title-content:empty):not(:has(.sponsorChapterText:not(:empty))) {
  2021.                 display: none;
  2022.             }
  2023.  
  2024.             :is(
  2025.                 :has(ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters]),
  2026.                 :has(ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters])
  2027.             ) {
  2028.                 & ytd-watch-flexy #description > #description-inner {
  2029.                     width: calc(50% - 26px);
  2030.                 }
  2031.  
  2032.                 & ytd-watch-flexy #description > #description-inner #info-container {
  2033.                     height: 41px;
  2034.                 }
  2035.  
  2036.                 & ytd-watch-flexy #description > #description-inner #info span.CentAnni-info-date + span::after {
  2037.                     content: "";
  2038.                     display: block;
  2039.                     height: 0;
  2040.                     margin-bottom: 5px;
  2041.                 }
  2042.  
  2043.                 & ytd-watch-flexy #description > #description-inner #info a.yt-simple-endpoint.bold {
  2044.                     display: inline-block;
  2045.                 }
  2046.  
  2047.                 & ytd-watch-flexy #bottom-row.ytd-watch-metadata {
  2048.                     height: 50px;
  2049.                 }
  2050.  
  2051.                 #movie_player .CentAnni-remaining-time-container {
  2052.                     left: 25% !important;
  2053.                 }
  2054.             }
  2055.         }
  2056.  
  2057.  
  2058.         .CentAnni-style-hide-comments-btn {
  2059.             ytd-comments#comments,
  2060.             .CentAnni-tabView-tab[data-tab="tab-2"] {
  2061.                 display: none;
  2062.             }
  2063.         }
  2064.  
  2065.         .CentAnni-style-hide-videos-btn {
  2066.             #related.style-scope.ytd-watch-flexy,
  2067.             .CentAnni-tabView-tab[data-tab="tab-3"] {
  2068.                 display: none;
  2069.             }
  2070.         }
  2071.  
  2072.         .CentAnni-style-hide-yt-settings .ytp-settings-menu, .CentAnni-style-hide-yt-settings .ytp-overflow-panel {
  2073.             opacity: 0 !important;
  2074.             pointer-events: none !important;
  2075.         }
  2076.  
  2077.         /* customCSS CSS */
  2078.         html {
  2079.             font-size: var(--fontSize) !important;
  2080.             font-family: "Roboto", Arial, sans-serif;
  2081.         }
  2082.  
  2083.         .CentAnni-style-hide-default-sidebar {
  2084.             ytd-mini-guide-renderer.ytd-app { display: none !important; }
  2085.             ytd-app[mini-guide-visible] ytd-page-manager.ytd-app { margin-left: 0 !important; }
  2086.             #guide-button.ytd-masthead { display: none !important; }
  2087.             #contents.ytd-rich-grid-renderer { justify-content: center !important; }
  2088.             ytd-browse[mini-guide-visible] ytd-playlist-header-renderer.ytd-browse, ytd-browse[mini-guide-visible] ytd-playlist-sidebar-renderer.ytd-browse, ytd-browse[mini-guide-visible] .page-header-sidebar.ytd-browse {
  2089.                 left: 0;
  2090.             }
  2091.         }
  2092.  
  2093.         html #above-the-fold h1,
  2094.         h1.ytd-watch-metadata,
  2095.         #video-title {
  2096.             text-transform: var(--textTransform) !important;
  2097.         }
  2098.  
  2099.         .CentAnni-style-full-title {
  2100.             #video-title.ytd-rich-grid-media {
  2101.                 white-space: normal;
  2102.                 text-overflow: unset;
  2103.                 overflow: unset;
  2104.                 display: inline-block;
  2105.             }
  2106.  
  2107.             #video-title {
  2108.                 max-height: unset !important;
  2109.                 -webkit-line-clamp: unset !important;
  2110.             }
  2111.         }
  2112.  
  2113.         ytd-compact-video-renderer ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer),
  2114.         ytd-rich-item-renderer ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer),
  2115.         ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  2116.             opacity: var(--watchedOpacity);
  2117.         }
  2118.  
  2119.         ytd-search ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  2120.             opacity: .8;
  2121.         }
  2122.  
  2123.         .ytd-page-manager[page-subtype="history"] {
  2124.             ytd-thumbnail:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  2125.                 opacity: 1;
  2126.             }
  2127.         }
  2128.  
  2129.         .CentAnni-style-hide-watched-videos-global {
  2130.             ytd-rich-item-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer),
  2131.             ytd-grid-video-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  2132.                 display: none !important;
  2133.             }
  2134.         }
  2135.  
  2136.         html.CentAnni-style-pure-bg:not([dark]) ytd-app {
  2137.             background: white !important;
  2138.         }
  2139.  
  2140.         html.CentAnni-style-pure-bg[dark] ytd-app {
  2141.             background: black !important;
  2142.         }
  2143.  
  2144.         .CentAnni-style-no-frosted-glass {
  2145.             #frosted-glass.ytd-app,
  2146.             ytd-masthead[frosted-glass-mode=without-chipbar] #background.ytd-masthead {
  2147.                 background: black !important;
  2148.             }
  2149.         }
  2150.  
  2151.         .CentAnni-style-remove-scrubber {
  2152.             .ytp-scrubber-container {
  2153.                 display: none;
  2154.                 pointer-events: none;
  2155.             }
  2156.         }
  2157.  
  2158.         .CentAnni-style-play-progress-color {
  2159.             .ytp-play-progress, .ytp-swatch-background-color {
  2160.                 background: var(--progressBarColor) !important;
  2161.             }
  2162.         }
  2163.  
  2164.         .CentAnni-style-disable-play-on-hover {
  2165.             ytd-thumbnail[is-preview-loading] ytd-thumbnail-overlay-toggle-button-renderer.ytd-thumbnail,
  2166.             ytd-thumbnail[is-preview-loading] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail,
  2167.             ytd-thumbnail[is-preview-loading] ytd-thumbnail-overlay-endorsement-renderer.ytd-thumbnail,
  2168.             ytd-thumbnail[is-preview-loading] ytd-thumbnail-overlay-hover-text-renderer.ytd-thumbnail,
  2169.             ytd-thumbnail[is-preview-loading] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail,
  2170.             ytd-thumbnail[now-playing] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail,
  2171.             ytd-thumbnail-overlay-loading-preview-renderer[is-preview-loading],
  2172.             ytd-grid-video-renderer a#thumbnail div#mouseover-overlay,
  2173.             ytd-rich-item-renderer a#thumbnail div#mouseover-overlay,
  2174.             ytd-thumbnail-overlay-loading-preview-renderer,
  2175.             ytd-moving-thumbnail-renderer img#thumbnail,
  2176.             ytd-moving-thumbnail-renderer yt-icon,
  2177.             ytd-moving-thumbnail-renderer span,
  2178.             ytd-moving-thumbnail-renderer img,
  2179.             ytd-moving-thumbnail-renderer,
  2180.             #mouseover-overlay,
  2181.             ytd-video-preview,
  2182.             div#video-preview,
  2183.             #video-preview,
  2184.             #preview {
  2185.                 display: none !important;
  2186.             }
  2187.         }
  2188.  
  2189.         .CentAnni-style-hide-end-cards {
  2190.             .ytp-ce-element {
  2191.                 display: none !important;
  2192.             }
  2193.         }
  2194.  
  2195.         .CentAnni-style-hide-endscreen {
  2196.             .html5-video-player .html5-endscreen.videowall-endscreen {
  2197.                 display: none !important;
  2198.             }
  2199.  
  2200.             .ended-mode .ytp-cued-thumbnail-overlay:not([aria-hidden="true"]) {
  2201.                 display: block !important;
  2202.                 cursor: default !important;
  2203.             }
  2204.  
  2205.             .ended-mode .ytp-cued-thumbnail-overlay:not([aria-hidden="true"]) button {
  2206.                 display: none;
  2207.             }
  2208.  
  2209.             .ended-mode .ytp-cued-thumbnail-overlay:not([aria-hidden="true"]) .ytp-cued-thumbnail-overlay-image {
  2210.                 display: block !important;
  2211.                 background-image: var(--video-url) !important;
  2212.             }
  2213.         }
  2214.  
  2215.         .CentAnni-style-gradient-bottom {
  2216.             .ytp-gradient-bottom {
  2217.                 padding-top: 50px !important;
  2218.                 height: 48px !important;
  2219.                 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) !important;
  2220.             }
  2221.         }
  2222.  
  2223.         .CentAnni-style-video-row {
  2224.             ytd-rich-grid-renderer {
  2225.                 --ytd-rich-grid-items-per-row: var(--itemsPerRow) !important;
  2226.             }
  2227.         }
  2228.  
  2229.         .CentAnni-style-hide-voice-search {
  2230.             #voice-search-button.ytd-masthead {
  2231.                 display: none;
  2232.             }
  2233.         }
  2234.  
  2235.         .CentAnni-style-hide-create-btn {
  2236.             #end ytd-button-renderer.ytd-masthead[button-renderer][button-next]:not(:last-child) {
  2237.                 display: none !important;
  2238.             }
  2239.         }
  2240.  
  2241.         .CentAnni-style-hide-queue-btn {
  2242.             ytd-thumbnail-overlay-toggle-button-renderer[aria-label="Add to queue"] {
  2243.                 display: none;
  2244.             }
  2245.         }
  2246.  
  2247.         .CentAnni-style-hide-notification-btn {
  2248.             #masthead-container #end #buttons ytd-notification-topbar-button-renderer {
  2249.                 display: none !important;
  2250.             }
  2251.         }
  2252.  
  2253.         .CentAnni-style-hide-notification-badge {
  2254.             #masthead-container #end #buttons ytd-notification-topbar-button-renderer .yt-spec-icon-badge-shape__badge {
  2255.                 display: none;
  2256.             }
  2257.         }
  2258.  
  2259.         .CentAnni-style-sort-notifications {
  2260.             ytd-app > ytd-popup-container tp-yt-iron-dropdown h2.yt-multi-page-menu-section-renderer {
  2261.                 display: none;
  2262.             }
  2263.  
  2264.             ytd-app > ytd-popup-container tp-yt-iron-dropdown #sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:not(:last-child) {
  2265.                 border: none;
  2266.             }
  2267.         }
  2268.  
  2269.         .CentAnni-style-hide-own-avatar {
  2270.             #avatar-btn {
  2271.                 display: none !important;
  2272.             }
  2273.         }
  2274.  
  2275.         .CentAnni-style-hide-brand-text {
  2276.             ytd-topbar-logo-renderer > #logo > ytd-yoodle-renderer > picture,
  2277.             #country-code.ytd-topbar-logo-renderer,
  2278.             #logo-icon [id^="youtube-paths_yt"] {
  2279.                 display: none;
  2280.             }
  2281.  
  2282.             #logo.ytd-masthead {
  2283.                 width: 45px;
  2284.                 overflow: hidden;
  2285.             }
  2286.  
  2287.             ytd-topbar-logo-renderer > #logo > ytd-yoodle-renderer > ytd-logo {
  2288.                 display: block !important;
  2289.             }
  2290.         }
  2291.  
  2292.         .CentAnni-style-visible-country-code {
  2293.             #country-code.ytd-topbar-logo-renderer {
  2294.                 position: absolute;
  2295.                 color: var(--countryCodeColor);
  2296.                 margin: 7px 0 0 45px;
  2297.                 display: block !important;
  2298.             }
  2299.         }
  2300.  
  2301.         .CentAnni-style-hide-fundraiser {
  2302.             #donation-shelf, ytd-badge-supported-renderer:has([aria-label="Fundraiser"]) {
  2303.                 display: none !important;
  2304.             }
  2305.         }
  2306.  
  2307.         .CentAnni-style-hide-miniplayer {
  2308.             ytd-miniplayer {
  2309.                 display: none !important;
  2310.             }
  2311.  
  2312.             #ytd-player .ytp-miniplayer-button {
  2313.                 display: none !important;
  2314.             }
  2315.         }
  2316.  
  2317.         .CentAnni-style-square-search-bar {
  2318.             #center.ytd-masthead { flex: 0 1 500px; }
  2319.             .YtSearchboxComponentInputBox { border: 1px solid hsl(0,0%,18.82%); border-radius: 0; }
  2320.             .YtSearchboxComponentSuggestionsContainer { border-radius: 0 0 10px 10px; }
  2321.             .YtSearchboxComponentSearchButton, .YtSearchboxComponentSearchButtonDark { display: none; }
  2322.             .YtSearchboxComponentHost { margin: 0; }
  2323.  
  2324.             .ytSearchboxComponentInputBox { border: 1px solid hsl(0,0%,18.82%); border-radius: 0; }
  2325.             .ytSearchboxComponentSuggestionsContainer { border-radius: 0 0 10px 10px; }
  2326.             .ytSearchboxComponentSearchButton, .ytSearchboxComponentSearchButtonDark { display: none; }
  2327.             .ytSearchboxComponentHost { margin: 0; }
  2328.  
  2329.             .ytSearchboxComponentDesktop .ytSearchboxComponentClearButton {
  2330.                 border-radius: 0;
  2331.                 height: 38px;
  2332.                 width: 38px;
  2333.                 margin-right: 6px;
  2334.             }
  2335.         }
  2336.  
  2337.         .ytd-page-manager[page-subtype="home"] {
  2338.             #avatar-container.ytd-rich-grid-media {
  2339.                 margin: 12px 12px 0 6px;
  2340.             }
  2341.         }
  2342.  
  2343.         .CentAnni-style-square-design {
  2344.             #thumbnail,
  2345.             .CentAnni-tabView,
  2346.             .ytp-settings-menu,
  2347.             #card.ytd-miniplayer,
  2348.             .smartimation__border,
  2349.             .ytp-tooltip-text-wrapper,
  2350.             ytd-playlist-video-renderer,
  2351.             .ytOfficialCardViewModelHost,
  2352.             #dismissed.ytd-rich-grid-media,
  2353.             ytd-info-panel-content-renderer,
  2354.             ytd-expandable-metadata-renderer,
  2355.             .yt-thumbnail-view-model--medium,
  2356.             .badge.ytd-badge-supported-renderer,
  2357.             .yt-spec-button-shape-next--size-xs,
  2358.             #related.style-scope.ytd-watch-flexy,
  2359.             .animated-action__background-container,
  2360.             .ytp-player-minimized .html5-main-video,
  2361.             .ytProgressBarLineProgressBarLineRounded,
  2362.             .ytp-tooltip.ytp-text-detail.ytp-preview,
  2363.             .collections-stack-wiz__collection-stack2,
  2364.             ytd-donation-shelf-renderer[modern-panels],
  2365.             .ytp-player-minimized .ytp-miniplayer-scrim,
  2366.             yt-interaction.circular .fill.yt-interaction,
  2367.             .yt-spec-button-shape-next--icon-only-default,
  2368.             yt-interaction.circular .stroke.yt-interaction,
  2369.             ytd-watch-flexy[theater] .CentAnni-tabView-tab,
  2370.             tp-yt-paper-toast.yt-notification-action-renderer,
  2371.             .collections-stack-wiz__collection-stack1--medium,
  2372.             .metadata-container.ytd-reel-player-overlay-renderer,
  2373.             ytd-shorts .player-container.ytd-reel-video-renderer,
  2374.             ytd-compact-link-renderer.ytd-settings-sidebar-renderer,
  2375.             .ytp-tooltip.ytp-text-detail.ytp-preview .ytp-tooltip-bg,
  2376.             ytd-live-chat-frame[theater-watch-while][rounded-container],
  2377.             ytd-watch-flexy[rounded-player] #ytd-player.ytd-watch-flexy,
  2378.             ytd-shorts[enable-anchored-panel] .anchored-panel.ytd-shorts,
  2379.             ytd-live-chat-frame[rounded-container]:not([theater-watch-while]),
  2380.             ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
  2381.             .html5-video-player:not(.ytp-touch-mode) ::-webkit-scrollbar-thumb,
  2382.             .CentAnni-tabView:has(.CentAnni-tabView-tab.active[data-tab="tab-2"]),
  2383.             ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before,
  2384.             ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy,
  2385.             ytd-thumbnail[size="medium"] a.ytd-thumbnail, ytd-thumbnail[size="medium"]::before,
  2386.             ytd-engagement-panel-section-list-renderer[modern-panels]:not([live-chat-engagement-panel]),
  2387.             ytd-macro-markers-list-item-renderer[rounded] #thumbnail.ytd-macro-markers-list-item-renderer,
  2388.             ytd-expandable-metadata-renderer:not([is-expanded]) #header.ytd-expandable-metadata-renderer:hover,
  2389.             ytd-watch-flexy[flexy][js-panel-height_]:not([fixed-panels]) #chat.ytd-watch-flexy:not([collapsed]),
  2390.             ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer {
  2391.                 border-radius: 0 !important;
  2392.             }
  2393.  
  2394.             .yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section {
  2395.                 border-radius: 1px;
  2396.             }
  2397.  
  2398.             .ytChipShapeChip,
  2399.             yt-dropdown-menu,
  2400.             .CentAnni-tabView-tab,
  2401.             #menu.yt-dropdown-menu,
  2402.             ytd-menu-popup-renderer,
  2403.             ytd-guide-entry-renderer,
  2404.             tp-yt-paper-dialog[modern],
  2405.             yt-chip-cloud-chip-renderer,
  2406.             ytd-multi-page-menu-renderer,
  2407.             #description.ytd-watch-metadata,
  2408.             .badge-shape-wiz--thumbnail-badge,
  2409.             ytd-author-comment-badge-renderer,
  2410.             .yt-spec-button-shape-next--size-s,
  2411.             .yt-spec-button-shape-next--size-m,
  2412.             ytd-rich-metadata-renderer[rounded],
  2413.             .yt-sheet-view-model-wiz--contextual,
  2414.             .ytVideoMetadataCarouselViewModelHost,
  2415.             yt-interaction.ytd-guide-entry-renderer,
  2416.             .dropdown-content.tp-yt-paper-menu-button,
  2417.             .tp-yt-paper-tooltip[style-target=tooltip],
  2418.             #chip-container.yt-chip-cloud-chip-renderer,
  2419.             .image-wrapper.ytd-hero-playlist-thumbnail-renderer,
  2420.             #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
  2421.             .immersive-header-container.ytd-playlist-header-renderer,
  2422.             #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover,
  2423.             #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus,
  2424.             #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:active,
  2425.             ytd-engagement-panel-section-list-renderer[modern-panels]:not([live-chat-engagement-panel]) {
  2426.                 border-radius: 2px;
  2427.             }
  2428.  
  2429.             ytd-rich-item-renderer yt-interaction.circular .fill.yt-interaction,
  2430.             ytd-rich-item-renderer yt-interaction.circular .stroke.yt-interaction,
  2431.             #masthead-container yt-interaction.circular .fill.yt-interaction,
  2432.             #masthead-container yt-interaction.circular .stroke.yt-interaction {
  2433.                 border-radius: 50% !important;
  2434.             }
  2435.  
  2436.             tp-yt-paper-item.ytd-guide-entry-renderer,
  2437.             ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"] tp-yt-paper-item.ytd-compact-link-renderer {
  2438.                 --paper-item-focused-before-border-radius: 0;
  2439.             }
  2440.  
  2441.             .ytd-page-manager[page-subtype="home"] {
  2442.                 yt-chip-cloud-chip-renderer {
  2443.                     border-radius: 2px;
  2444.                 }
  2445.  
  2446.                 .CentAnni-style-live-video, .CentAnni-style-upcoming-video, .CentAnni-style-newly-video, .CentAnni-style-recent-video, .CentAnni-style-lately-video, .CentAnni-style-latterly-video, .CentAnni-style-old-video { border-radius: 0; }
  2447.             }
  2448.  
  2449.             .ytd-page-manager[page-subtype="subscriptions"] {
  2450.                 .CentAnni-style-last-seen { border-radius: 0; }
  2451.             }
  2452.  
  2453.             .ytd-page-manager[page-subtype="channels"] {
  2454.                 .yt-spec-button-shape-next--size-m {
  2455.                     border-radius: 2px;
  2456.                 }
  2457.  
  2458.                 .yt-thumbnail-view-model--medium,
  2459.                 .yt-image-banner-view-model-wiz--inset,
  2460.                 .collections-stack-wiz__collection-stack2,
  2461.                 #chip-container.yt-chip-cloud-chip-renderer,
  2462.                 .collections-stack-wiz__collection-stack1--medium {
  2463.                     border-radius: 0 !important;
  2464.                 }
  2465.             }
  2466.  
  2467.             .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start {
  2468.                 border-radius: 2px 0 0 3px;
  2469.             }
  2470.  
  2471.             .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
  2472.                 border-radius: 0 3px 3px 0;
  2473.             }
  2474.  
  2475.             ytd-expandable-metadata-renderer:not([is-expanded]) {
  2476.                 --yt-img-border-radius: 0px;
  2477.                 border-radius: 0px;
  2478.             }
  2479.  
  2480.             .desktopShortsPlayerControlsWizHost {
  2481.                 left: 0;
  2482.                 right: 0;
  2483.             }
  2484.  
  2485.             ytd-search yt-official-card-view-model horizontal-shelf-view-model .ytwHorizontalShelfViewModelLeftArrow .yt-spec-button-shape-next--size-m,
  2486.             ytd-search yt-official-card-view-model horizontal-shelf-view-model .ytwHorizontalShelfViewModelRightArrow .yt-spec-button-shape-next--size-m {
  2487.                 border-radius: 18px;
  2488.             }
  2489.         }
  2490.  
  2491.         .CentAnni-style-square-avatars {
  2492.             .yt-spec-avatar-shape__image,
  2493.             #avatar.ytd-video-owner-renderer,
  2494.             yt-img-shadow.ytd-video-renderer,
  2495.             yt-img-shadow.ytd-channel-renderer,
  2496.             .thumbnail.ytd-notification-renderer,
  2497.             ytd-menu-renderer.ytd-rich-grid-media,
  2498.             yt-img-shadow.ytd-guide-entry-renderer,
  2499.             #avatar.ytd-active-account-header-renderer,
  2500.             #avatar.ytd-watch-card-rich-header-renderer,
  2501.             yt-img-shadow.ytd-topbar-menu-button-renderer,
  2502.             #author-thumbnail.ytd-comment-simplebox-renderer,
  2503.             ytd-rich-item-renderer yt-interaction.circular .fill.yt-interaction,
  2504.             ytd-rich-item-renderer yt-interaction.circular .stroke.yt-interaction,
  2505.             .yt-spec-avatar-shape--cairo-refresh.yt-spec-avatar-shape--live-ring::after,
  2506.             #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model,
  2507.             #author-thumbnail.ytd-backstage-post-renderer yt-img-shadow.ytd-backstage-post-renderer,
  2508.             ytd-comment-replies-renderer #creator-thumbnail.ytd-comment-replies-renderer yt-img-shadow.ytd-comment-replies-renderer {
  2509.                 border-radius: 0 !important;
  2510.             }
  2511.         }
  2512.  
  2513.         #CentAnni-channel-btn {
  2514.             display: flex;
  2515.             align-items: center;
  2516.             gap: 6px;
  2517.         }
  2518.  
  2519.         #CentAnni-playlist-direction-container {
  2520.             display: inline-flex;
  2521.             align-items: center;
  2522.             margin-left: 8px;
  2523.         }
  2524.  
  2525.         #CentAnni-playlist-direction-container > span {
  2526.             margin-right: 4px;
  2527.             color: var(--yt-spec-text-primary);
  2528.             font-family: "YouTube Sans","Roboto",sans-serif;
  2529.             font-size: 1.7rem;
  2530.             line-height: 1rem;
  2531.             font-weight: 600;
  2532.             text-rendering: optimizeLegibility !important;
  2533.             -webkit-font-smoothing: antialiased !important;
  2534.             -moz-osx-font-smoothing: grayscale !important;
  2535.             cursor: default;
  2536.         }
  2537.  
  2538.         #end-actions.ytd-playlist-panel-renderer {
  2539.             margin-right: 24px;
  2540.         }
  2541.  
  2542.         .CentAnni-playlist-direction-btn {
  2543.             color: var(--yt-spec-text-secondary) !important;
  2544.         }
  2545.  
  2546.         .CentAnni-playlist-direction-btn.active {
  2547.             color: var(--yt-spec-text-primary) !important;
  2548.         }
  2549.  
  2550.         .CentAnni-style-compact-layout {
  2551.             ytd-rich-section-renderer:has(.grid-subheader.ytd-shelf-renderer) {
  2552.                 display: none;
  2553.             }
  2554.  
  2555.             #page-manager.ytd-app {
  2556.                 --ytd-toolbar-offset: 0 !important;
  2557.             }
  2558.  
  2559.             ytd-browse[page-subtype="hashtag-landing-page"] {
  2560.                 transform: translateY(0px);
  2561.             }
  2562.  
  2563.             .ytd-page-manager[page-subtype="home"],
  2564.             .ytd-page-manager[page-subtype="channels"],
  2565.             .ytd-page-manager[page-subtype="subscriptions"] {
  2566.                 ytd-menu-renderer .ytd-menu-renderer[style-target=button] {
  2567.                     height: 36px;
  2568.                     width: 36px;
  2569.                 }
  2570.  
  2571.                 button.yt-icon-button>yt-icon {
  2572.                     transform: rotate(90deg);
  2573.                 }
  2574.  
  2575.                 #contents.ytd-rich-grid-renderer {
  2576.                     width: 100%;
  2577.                     max-width: 100%;
  2578.                     padding-top: 0;
  2579.                     display: flex;
  2580.                     flex-wrap: wrap;
  2581.                     column-gap: 5px;
  2582.                     row-gap: 10px;
  2583.                 }
  2584.  
  2585.                 .style-scope.ytd-two-column-browse-results-renderer {
  2586.                     --ytd-rich-grid-item-max-width: 100vw;
  2587.                     --ytd-rich-grid-item-min-width: 310px;
  2588.                     --ytd-rich-grid-item-margin: 0px !important;
  2589.                     --ytd-rich-grid-content-offset-top: 56px;
  2590.                 }
  2591.  
  2592.                 ytd-rich-item-renderer[rendered-from-rich-grid] {
  2593.                     margin: 0 !important;
  2594.                 }
  2595.  
  2596.                 #meta.ytd-rich-grid-media {
  2597.                     overflow-x: hidden;
  2598.                     padding-right: 6px;
  2599.                 }
  2600.  
  2601.                 #avatar-container.ytd-rich-grid-media {
  2602.                     margin:7px 6px 50px 6px;
  2603.                 }
  2604.  
  2605.                 h3.ytd-rich-grid-media {
  2606.                     margin: 7px 0 4px 0;
  2607.                 }
  2608.  
  2609.                 .yt-spec-avatar-shape--cairo-refresh.yt-spec-avatar-shape--live-ring::after {
  2610.                     inset: -2px;
  2611.                 }
  2612.             }
  2613.  
  2614.             .ytd-page-manager[page-subtype="home"] {
  2615.                 ytd-menu-renderer.ytd-rich-grid-media {
  2616.                     position: absolute;
  2617.                     height: 36px;
  2618.                     width: 36px;
  2619.                     top: 50px;
  2620.                     right: auto;
  2621.                     left: 6px;
  2622.                     align-items: center;
  2623.                     background-color: rgba(255,255,255,.1);
  2624.                     border-radius: 50%;
  2625.                 }
  2626.  
  2627.                 .title-badge.ytd-rich-grid-media, .video-badge.ytd-rich-grid-media {
  2628.                     position: absolute;
  2629.                     bottom: 0;
  2630.                     right: 0;
  2631.                     margin: 8px;
  2632.                     display: flex;
  2633.                     flex-direction: row;
  2634.                 }
  2635.  
  2636.                 ytd-rich-item-renderer[rendered-from-rich-grid] {
  2637.                     margin: 0 !important;
  2638.                 }
  2639.  
  2640.                 #contents.ytd-rich-grid-renderer {
  2641.                     padding-top: 2px;
  2642.                     column-gap: 14px;
  2643.                     row-gap: 14px;
  2644.                 }
  2645.  
  2646.                 .style-scope.ytd-two-column-browse-results-renderer {
  2647.                     --ytd-rich-grid-item-margin: .5% !important;
  2648.                 }
  2649.             }
  2650.  
  2651.             .ytd-page-manager[page-subtype="channels"] {
  2652.                 ytd-tabbed-page-header.grid-5-columns #page-header.ytd-tabbed-page-header, ytd-tabbed-page-header.grid-5-columns[has-inset-banner] #page-header-banner.ytd-tabbed-page-header {
  2653.                     padding: 0 !important;
  2654.                 }
  2655.  
  2656.                 ytd-two-column-browse-results-renderer.grid-5-columns, .grid-5-columns.ytd-two-column-browse-results-renderer {
  2657.                     width: 100% !important;
  2658.                 }
  2659.  
  2660.                 ytd-rich-grid-renderer:not([is-default-grid]) #header.ytd-rich-grid-renderer {
  2661.                     transform: translateY(-40px);
  2662.                     z-index: 2000;
  2663.                     width: max-content;
  2664.                     margin-left: auto;
  2665.                 }
  2666.  
  2667.                 ytd-two-column-browse-results-renderer.grid-6-columns ytd-rich-grid-renderer:not([is-default-grid]) #header {
  2668.                     margin-right: 5px;
  2669.                 }
  2670.  
  2671.                 ytd-two-column-browse-results-renderer.grid-5-columns ytd-rich-grid-renderer:not([is-default-grid]) #header {
  2672.                     margin-right: 110px;
  2673.                 }
  2674.  
  2675.                 ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID"] {
  2676.                     margin-bottom: -32px;
  2677.                     margin-top: 0;
  2678.                 }
  2679.  
  2680.                 .page-header-view-model-wiz__page-header-headline-image {
  2681.                     margin-left: 110px;
  2682.                 }
  2683.  
  2684.                 ytd-menu-renderer.ytd-rich-grid-media {
  2685.                     position: absolute;
  2686.                     height: 36px;
  2687.                     width: 36px;
  2688.                     top: initial;
  2689.                     bottom: -10px;
  2690.                     right: 0;
  2691.                     align-items: center;
  2692.                     border-radius: 50%;
  2693.                 }
  2694.  
  2695.                 .yt-tab-group-shape-wiz__slider,.yt-tab-shape-wiz__tab-bar {
  2696.                     display: none;
  2697.                 }
  2698.  
  2699.                 .yt-tab-shape-wiz__tab--tab-selected,.yt-tab-shape-wiz__tab:hover {
  2700.                     color: white;
  2701.                 }
  2702.  
  2703.                 .style-scope.ytd-two-column-browse-results-renderer {
  2704.                     --ytd-rich-grid-item-margin: .5% !important;
  2705.                 }
  2706.  
  2707.                 ytd-backstage-items {
  2708.                     display: block;
  2709.                     max-width: 100%;
  2710.                 }
  2711.  
  2712.                 #contents {
  2713.                 margin-left: 10px;
  2714.                 margin-right: 10px;
  2715.                 }
  2716.  
  2717.                 #header-container {
  2718.                     width: 80vw;
  2719.                     align-self: center;
  2720.                 }
  2721.  
  2722.                 #items.ytd-grid-renderer {
  2723.                     justify-content: center;
  2724.                 }
  2725.             }
  2726.  
  2727.             .ytd-page-manager[page-subtype="channels"] #contentContainer {
  2728.                 padding-top: 0 !important;
  2729.             }
  2730.  
  2731.             .ytd-page-manager[page-subtype="channels"] tp-yt-app-header {
  2732.                 position: static !important;
  2733.                 transform: none !important;
  2734.                 transition: none !important;
  2735.             }
  2736.  
  2737.             .ytd-page-manager[page-subtype="channels"] tp-yt-app-header[fixed] {
  2738.                 position: static !important;
  2739.                 transform: none !important;
  2740.                 transition: none !important;
  2741.             }
  2742.  
  2743.             .ytd-page-manager[page-subtype="channels"] tp-yt-app-header #page-header {
  2744.             position: static !important;
  2745.                 transform: none !important;
  2746.             }
  2747.  
  2748.             .ytd-page-manager[page-subtype="subscriptions"] {
  2749.                 ytd-menu-renderer.ytd-rich-grid-media {
  2750.                     position: absolute;
  2751.                     height: 36px;
  2752.                     width: 36px;
  2753.                     top: 50px;
  2754.                     right: auto;
  2755.                     left: 3px;
  2756.                     align-items: center;
  2757.                     background-color: rgba(255,255,255,.1);
  2758.                     border-radius: 50%;
  2759.                 }
  2760.  
  2761.                 .title-badge.ytd-rich-grid-media, .video-badge.ytd-rich-grid-media {
  2762.                     position: absolute;
  2763.                     margin: 0px 10% 0 0;
  2764.                     right: 0;
  2765.                     top: 6em;
  2766.                 }
  2767.             }
  2768.  
  2769.             .item.ytd-watch-metadata {
  2770.                 margin-top: 7px;
  2771.             }
  2772.  
  2773.             #middle-row.ytd-watch-metadata:empty {
  2774.                 display: none;
  2775.             }
  2776.  
  2777.             #subheader.ytd-engagement-panel-title-header-renderer:not(:empty) {
  2778.                 padding: 0 !important;
  2779.                 transform: translateX(110px) translateY(-44px);
  2780.                 background-color: transparent;
  2781.                 border-top: none;
  2782.             }
  2783.  
  2784.             #header.ytd-engagement-panel-title-header-renderer {
  2785.                 padding: 4px 7px 4px 7px;
  2786.             }
  2787.  
  2788.             #visibility-button.ytd-engagement-panel-title-header-renderer, #information-button.ytd-engagement-panel-title-header-renderer {
  2789.                 z-index: 1;
  2790.             }
  2791.  
  2792.             .ytChipShapeChip:hover  {
  2793.                 background: rgba(255,255,255,0.2);
  2794.                 border-color: transparent;
  2795.             }
  2796.  
  2797.             .ytChipShapeActive:hover {
  2798.                 background-color: #f1f1f1;
  2799.                 color: #0f0f0f;
  2800.             }
  2801.  
  2802.             ytd-engagement-panel-title-header-renderer {
  2803.                 height: 54px;
  2804.             }
  2805.  
  2806.             .yt-spec-button-shape-next--icon-only-default {
  2807.                 width: 35px;
  2808.                 height: 35px;
  2809.             }
  2810.  
  2811.             ytd-miniplayer {
  2812.                 --ytd-miniplayer-attachment-padding: 0;
  2813.             }
  2814.  
  2815.             ytd-watch-flexy #title > ytd-badge-supported-renderer div > yt-icon {
  2816.                 padding: 0 2px 0px 0;
  2817.             }
  2818.  
  2819.             #container.ytd-search ytd-video-renderer[use-bigger-thumbs] ytd-thumbnail.ytd-video-renderer,
  2820.             #container.ytd-search ytd-video-renderer[use-bigger-thumbs][bigger-thumbs-style="BIG"] ytd-thumbnail.ytd-video-renderer {
  2821.                 max-width: calc(100vh / 1.92 - 64px);
  2822.                 min-width: 250px;
  2823.             }
  2824.  
  2825.             ytd-watch-flexy .ryd-tooltip-new-design {
  2826.                 display: none;
  2827.             }
  2828.  
  2829.             ytd-watch-flexy #above-the-fold #top-row {
  2830.                 border: none !important;
  2831.                 padding: 0 !important;
  2832.             }
  2833.         }
  2834.  
  2835.         .CentAnni-style-no-ambient {
  2836.             #cinematics-container {
  2837.                 display: none !important;
  2838.             }
  2839.         }
  2840.  
  2841.         ytd-watch-flexy #expandable-metadata #content.ytd-expandable-metadata-renderer {
  2842.             height: calc(var(--yt-macro-marker-list-item-height) - 34px);
  2843.             visibility: visible;
  2844.             pointer-events: auto;
  2845.         }
  2846.  
  2847.         ytd-watch-flexy #expandable-metadata ytd-expandable-metadata-renderer[is-watch] #collapsed-title.ytd-expandable-metadata-renderer {
  2848.             display: none;
  2849.         }
  2850.  
  2851.         ytd-watch-flexy #expandable-metadata ytd-expandable-metadata-renderer[has-video-summary] #expanded-title-subtitle-group.ytd-expandable-metadata-renderer {
  2852.             display: flex !important;
  2853.         }
  2854.  
  2855.         ytd-watch-flexy #expandable-metadata #expanded-subtitle.ytd-expandable-metadata-renderer {
  2856.             display: block !important;
  2857.             pointer-events: auto;
  2858.         }
  2859.  
  2860.         ytd-watch-flexy #expandable-metadata ytd-expandable-metadata-renderer[is-watch] {
  2861.             background: transparent;
  2862.             pointer-events: none;
  2863.         }
  2864.  
  2865.         ytd-watch-flexy #expandable-metadata #right-section.ytd-expandable-metadata-renderer {
  2866.             display: none;
  2867.         }
  2868.  
  2869.         ytd-watch-flexy #expandable-metadata ytd-expandable-metadata-renderer:not([is-expanded]) #header.ytd-expandable-metadata-renderer:hover {
  2870.             background-color: transparent;
  2871.         }
  2872.  
  2873.         .ytd-page-manager[page-subtype="home"] {
  2874.             .CentAnni-style-live-video, .CentAnni-style-upcoming-video, .CentAnni-style-newly-video, .CentAnni-style-recent-video, .CentAnni-style-lately-video, .CentAnni-style-latterly-video { outline: 2px solid; border-radius: 12px; }
  2875.             .CentAnni-style-old-video { outline: none;}
  2876.             .CentAnni-style-live-video { outline-color: var(--liveVideo); }
  2877.             .CentAnni-style-streamed-text { color: var(--streamedText); }
  2878.             .CentAnni-style-upcoming-video { outline-color: var(--upComingVideo); }
  2879.             .CentAnni-style-newly-video { outline-color: var(--newlyVideo); }
  2880.             .CentAnni-style-recent-video { outline-color: var(--recentVideo); }
  2881.             .CentAnni-style-lately-video { outline-color: var(--latelyVideo); }
  2882.             .CentAnni-style-latterly-video { outline-color: var(--latterlyVideo); }
  2883.             .CentAnni-style-old-video { opacity: var(--oldVideo); }
  2884.             #metadata-line > span.inline-metadata-item:has(+ span.CentAnni-style-streamed-span) { display: none !important; }
  2885.             #metadata-line > span.inline-metadata-item + span.inline-metadata-item:has(+ span.CentAnni-style-streamed-span) + span.CentAnni-style-streamed-span::before {
  2886.                 content: "•";
  2887.                 margin: 0 4px;
  2888.             }
  2889.         }
  2890.  
  2891.         .ytd-page-manager[page-subtype="subscriptions"] {
  2892.             .CentAnni-style-last-seen {
  2893.                 border: 2px solid var(--lastSeenVideoColor);
  2894.                 border-radius: 12px;
  2895.             }
  2896.         }
  2897.  
  2898.         .ytd-page-manager[page-subtype="playlist"] {
  2899.             .CentAnni-style-playlist-remove-btn {
  2900.                 display: flex;
  2901.                 align-items: center;
  2902.                 border: 1px dashed red;
  2903.                 background: transparent;
  2904.                 cursor: pointer;
  2905.                 margin: 10px 20px 0px 10px;
  2906.                 padding: 15px;
  2907.                 transition: background 0.2s, filter 0.2s, transform 0.15s;
  2908.                 font-size: 2rem;
  2909.                 position: relative;
  2910.                 z-index: 1000;
  2911.                 border-radius: 2px;
  2912.             }
  2913.  
  2914.             .CentAnni-style-playlist-remove-btn:hover {
  2915.                 background: darkred;
  2916.             }
  2917.  
  2918.             .CentAnni-style-playlist-remove-btn:active {
  2919.                 background: darkred;
  2920.                 transform: scale(0.9);
  2921.             }
  2922.         }
  2923.  
  2924.         .CentAnni-style-playlist-hide-menu {
  2925.             display: none !important;
  2926.         }
  2927.  
  2928.         .CentAnni-style-hide-watched-videos {
  2929.             .ytd-page-manager[page-subtype="home"] {
  2930.                 ytd-rich-item-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer) {
  2931.                     display: none;
  2932.                 }
  2933.             }
  2934.         }
  2935.  
  2936.         .CentAnni-close-live-chat {
  2937.             #chat-container {
  2938.                 z-index: -1 !important;
  2939.                 opacity: 0 !important;
  2940.                 visibility: hidden;
  2941.                 pointer-events: none !important;
  2942.             }
  2943.  
  2944.             ytd-watch-flexy[fixed-panels] #panels-full-bleed-container.ytd-watch-flexy {
  2945.                 width: var(--ytd-watch-flexy-sidebar-width);
  2946.                 display: none;
  2947.             }
  2948.  
  2949.             .video-stream.html5-main-video {
  2950.                 width: 100%;
  2951.             }
  2952.  
  2953.             ytd-watch-flexy[fixed-panels] #columns.ytd-watch-flexy {
  2954.                 padding-right: 0;
  2955.             }
  2956.         }
  2957.  
  2958.         .CentAnni-style-hide-join-btn {
  2959.             button[aria-label="Join this channel"],
  2960.             #sponsor-button.ytd-video-owner-renderer:not(:empty),
  2961.             ytd-browse[page-subtype="channels"] ytd-recognition-shelf-renderer,
  2962.             ytd-browse[page-subtype="channels"] yt-page-header-view-model yt-flexible-actions-view-model button-view-model {
  2963.                 display: none !important;
  2964.             }
  2965.         }
  2966.  
  2967.         :root {
  2968.             --next-button-visibility: none;
  2969.         }
  2970.  
  2971.         html:has(.CentAnni-tabView-tab[data-tab="tab-6"]) {
  2972.             --next-button-visibility: inline-block;
  2973.         }
  2974.  
  2975.         .CentAnni-style-hide-playnext-btn {
  2976.             a.ytp-next-button {
  2977.                 display: var(--next-button-visibility);
  2978.             }
  2979.         }
  2980.  
  2981.         .CentAnni-style-hide-airplay-btn {
  2982.             #ytd-player .ytp-airplay-button {
  2983.                 display: none;
  2984.             }
  2985.         }
  2986.  
  2987.         .CentAnni-style-small-subscribe-btn {
  2988.             .ytd-page-manager:not([page-subtype="channels"]) .yt-spec-button-shape-next.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing {
  2989.                 display: flex;
  2990.                 align-items: center;
  2991.                 justify-content: flex-start;
  2992.                 overflow: hidden;
  2993.                 width: 36px;
  2994.                 padding: 0 12px;
  2995.             }
  2996.         }
  2997.  
  2998.         .CentAnni-style-hide-share-btn {
  2999.             yt-button-view-model.ytd-menu-renderer:has(button.yt-spec-button-shape-next[aria-label="Share"]) {
  3000.                 display: none;
  3001.             }
  3002.         }
  3003.  
  3004.         .CentAnni-style-hide-hashtags {
  3005.                 ytd-watch-metadata[description-collapsed] #description.ytd-watch-metadata a {
  3006.                         display: none !important;
  3007.                 }
  3008.  
  3009.                 ytd-watch-flexy #description > #description-inner #info-container {
  3010.                     height: 18px !important;
  3011.                 }
  3012.  
  3013.                 .CentAnni-chapter-title {
  3014.                     max-width: 60% !important;
  3015.                 }
  3016.  
  3017.                 & ytd-watch-flexy #bottom-row.ytd-watch-metadata {
  3018.                     height: fit-content !important;
  3019.                 }
  3020.         }
  3021.  
  3022.         .CentAnni-style-hide-info-panel {
  3023.             #middle-row,
  3024.             ytd-info-panel-container-renderer {
  3025.                 display: none;
  3026.             }
  3027.         }
  3028.  
  3029.         .CentAnni-style-hide-add-comment {
  3030.             ytd-shorts #header.ytd-item-section-renderer,
  3031.             ytd-comments ytd-comments-header-renderer #simple-box {
  3032.                 display: none;
  3033.             }
  3034.  
  3035.             #title.ytd-comments-header-renderer {
  3036.                 margin-bottom: 0;
  3037.             }
  3038.         }
  3039.  
  3040.         .CentAnni-style-hide-news-home {
  3041.             ytd-browse[page-subtype="home"] ytd-rich-grid-renderer ytd-rich-section-renderer:has(yt-icon:empty) {
  3042.                 display: none;
  3043.             }
  3044.         }
  3045.  
  3046.         .CentAnni-style-hide-playlists-home {
  3047.             ytd-browse[page-subtype="home"] ytd-rich-grid-renderer > #contents > ytd-rich-item-renderer:has(a[href*="list="]) {
  3048.                 display: none;
  3049.             }
  3050.         }
  3051.  
  3052.         .CentAnni-style-hide-reply-btn {
  3053.             ytd-comments ytd-comment-engagement-bar #reply-button-end {
  3054.                 display: none;
  3055.             }
  3056.         }
  3057.  
  3058.         .CentAnni-style-search-hide-right-sidebar {
  3059.             ytd-item-section-renderer[top-spacing-zero]:first-child #contents.ytd-item-section-renderer .ytd-item-section-renderer:first-child,
  3060.             #container.ytd-search ytd-secondary-search-container-renderer {
  3061.                 display: none;
  3062.             }
  3063.         }
  3064.  
  3065.         .CentAnni-style-hide-shorts {
  3066.             a[title="Shorts"],
  3067.             #container.ytd-search ytd-reel-shelf-renderer,
  3068.             ytd-rich-item-renderer:has(a[href^="/shorts/"]),
  3069.             ytd-watch-metadata #description ytd-reel-shelf-renderer,
  3070.             ytd-browse[page-subtype="channels"] ytd-reel-shelf-renderer,
  3071.             ytd-video-renderer:has(a.yt-simple-endpoint[href*="shorts"]),
  3072.             yt-chip-cloud-chip-renderer[chip-shape-data*='"text":"Shorts"'],
  3073.             ytd-reel-shelf-renderer.ytd-structured-description-content-renderer,
  3074.             ytd-rich-section-renderer:has(div ytd-rich-shelf-renderer[is-shorts]),
  3075.             #container.ytd-search ytd-video-renderer:has(a.yt-simple-endpoint[href*="shorts"]),
  3076.             ytd-item-section-renderer[page-subtype="subscriptions"]:has(ytd-reel-shelf-renderer),
  3077.             ytd-browse[page-subtype="hashtag-landing-page"] tp-yt-app-toolbar.ytd-tabbed-page-header,
  3078.             #tabsContent > yt-tab-group-shape > div.yt-tab-group-shape-wiz__tabs > yt-tab-shape[tab-title="Shorts"] {
  3079.                 display: none !important;
  3080.             }
  3081.         }
  3082.  
  3083.         .CentAnni-style-hide-ad-slots {
  3084.             #player-ads,
  3085.             .yt-consent,
  3086.             #masthead-ad,
  3087.             #promotion-shelf,
  3088.             .yt-consent-banner,
  3089.             #top_advertisement,
  3090.             .ytp-subscribe-card,
  3091.             .ytp-featured-product,
  3092.             ytd-search-pyv-renderer,
  3093.             #yt-lang-alert-container,
  3094.             .ytd-merch-shelf-renderer,
  3095.             .ytd-primetime-promo-renderer,
  3096.             ytd-brand-video-singleton-renderer,
  3097.             #related ytd-in-feed-ad-layout-renderer,
  3098.             ytd-rich-section-renderer:has(ytd-statement-banner-renderer),
  3099.             ytd-rich-item-renderer:has(> #content > ytd-ad-slot-renderer),
  3100.             ytd-rich-item-renderer:has(.badge-style-type-simple[aria-label="YouTube featured"])
  3101.             ytd-compact-video-renderer:has(.badge-style-type-simple[aria-label="YouTube featured"]) {
  3102.                 display: none!important;
  3103.             }
  3104.         }
  3105.  
  3106.         .CentAnni-style-hide-members-only {
  3107.             ytd-compact-video-renderer:has(.badge-style-type-members-only),
  3108.             ytd-rich-item-renderer:has(.badge-style-type-members-only) {
  3109.                 display: none;
  3110.             }
  3111.         }
  3112.  
  3113.         .CentAnni-style-hide-pay-to-watch {
  3114.             ytd-compact-video-renderer:has(.badge-style-type-ypc),
  3115.             ytd-rich-item-renderer:has(.badge-style-type-ypc),
  3116.             ytd-video-renderer:has(.badge-style-type-ypc) {
  3117.                 display: none !important;
  3118.             }
  3119.         }
  3120.  
  3121.         .CentAnni-style-hide-free-with-ads {
  3122.             ytd-compact-video-renderer:has(.badge[aria-label="Free with ads"]),
  3123.             ytd-rich-item-renderer:has(.badge[aria-label="Free with ads"]) {
  3124.                 display: none;
  3125.             }
  3126.         }
  3127.  
  3128.         .CentAnni-style-hide-latest-posts {
  3129.             #container.ytd-search ytd-shelf-renderer:has(ytd-post-renderer) {
  3130.                 display: none;
  3131.             }
  3132.         }
  3133.  
  3134.         /* left navigation bar */
  3135.         .CentAnni-style-lnb-hide-home-btn {
  3136.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Home"]) {
  3137.                 display: none;
  3138.             }
  3139.         }
  3140.  
  3141.         .CentAnni-style-lnb-hide-subscriptions-btn {
  3142.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Subscriptions"]) {
  3143.                 display: none;
  3144.             }
  3145.         }
  3146.  
  3147.         .CentAnni-style-lnb-hide-history-btn {
  3148.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="History"]) {
  3149.                 display: none;
  3150.             }
  3151.         }
  3152.  
  3153.         .CentAnni-style-lnb-hide-playlists-btn {
  3154.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Playlists"]) {
  3155.                 display: none;
  3156.             }
  3157.         }
  3158.  
  3159.         .CentAnni-style-lnb-hide-videos-btn {
  3160.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Your videos"]) {
  3161.                 display: none;
  3162.             }
  3163.         }
  3164.  
  3165.         .CentAnni-style-lnb-hide-courses-btn {
  3166.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Your courses"]) {
  3167.                 display: none;
  3168.             }
  3169.         }
  3170.  
  3171.         .CentAnni-style-lnb-hide-your-podcasts-btn {
  3172.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Your podcasts"]) {
  3173.                 display: none;
  3174.             }
  3175.         }
  3176.  
  3177.         .CentAnni-style-lnb-hide-wl-btn {
  3178.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Watch later"]) {
  3179.                 display: none;
  3180.             }
  3181.         }
  3182.  
  3183.         .CentAnni-style-lnb-hide-liked-videos-btn {
  3184.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Liked videos"]) {
  3185.                 display: none;
  3186.             }
  3187.         }
  3188.  
  3189.         .CentAnni-style-lnb-hide-you-btn {
  3190.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="You"]) {
  3191.                 display: none;
  3192.             }
  3193.         }
  3194.  
  3195.         .CentAnni-style-lnb-hide-subscriptions-section {
  3196.             #sections ytd-guide-section-renderer:has(#expander-item) {
  3197.                 display: none;
  3198.             }
  3199.         }
  3200.  
  3201.         .CentAnni-style-lnb-hide-subscriptions-title {
  3202.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="/@"]) #guide-section-title {
  3203.                 display: none;
  3204.             }
  3205.         }
  3206.  
  3207.         .CentAnni-style-lnb-hide-more-btn {
  3208.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="/@"]) #expander-item {
  3209.                 display: none;
  3210.             }
  3211.         }
  3212.  
  3213.         .CentAnni-style-lnb-hide-explore-section {
  3214.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="feed/trending"]) {
  3215.                 display: none;
  3216.             }
  3217.         }
  3218.  
  3219.         .CentAnni-style-lnb-hide-explore-title {
  3220.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="feed/trending"]) #guide-section-title {
  3221.                 display: none;
  3222.             }
  3223.         }
  3224.  
  3225.         .CentAnni-style-lnb-hide-trending-btn {
  3226.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Trending"]) {
  3227.                 display: none;
  3228.             }
  3229.         }
  3230.  
  3231.         .CentAnni-style-lnb-hide-music-btn {
  3232.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Music"]) {
  3233.                 display: none;
  3234.             }
  3235.         }
  3236.  
  3237.         .CentAnni-style-lnb-hide-movies-btn {
  3238.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Movies & TV"]) {
  3239.                 display: none;
  3240.             }
  3241.         }
  3242.  
  3243.         .CentAnni-style-lnb-hide-live-btn {
  3244.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Live"]) {
  3245.                 display: none;
  3246.             }
  3247.         }
  3248.  
  3249.         .CentAnni-style-lnb-hide-gaming-btn {
  3250.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Gaming"]) {
  3251.                 display: none;
  3252.             }
  3253.         }
  3254.  
  3255.         .CentAnni-style-lnb-hide-news-btn {
  3256.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="News"]) {
  3257.                 display: none;
  3258.             }
  3259.         }
  3260.  
  3261.         .CentAnni-style-lnb-hide-sports-btn {
  3262.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Sports"]) {
  3263.                 display: none;
  3264.             }
  3265.         }
  3266.  
  3267.         .CentAnni-style-lnb-hide-learning-btn {
  3268.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Learning"]) {
  3269.                 display: none;
  3270.             }
  3271.         }
  3272.  
  3273.         .CentAnni-style-lnb-hide-fashion-btn {
  3274.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Fashion & Beauty"]) {
  3275.                 display: none;
  3276.             }
  3277.         }
  3278.  
  3279.         .CentAnni-style-lnb-hide-podcasts-btn {
  3280.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Podcasts"]) {
  3281.                 display: none;
  3282.             }
  3283.         }
  3284.  
  3285.         .CentAnni-style-lnb-hide-more-section {
  3286.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="/premium"]) {
  3287.                 display: none;
  3288.             }
  3289.         }
  3290.  
  3291.         .CentAnni-style-lnb-hide-more-title {
  3292.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="youtubekids"]) #guide-section-title {
  3293.                 display: none;
  3294.             }
  3295.         }
  3296.  
  3297.         .CentAnni-style-lnb-hide-yt-premium-btn {
  3298.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="YouTube Premium"]) {
  3299.                 display: none;
  3300.             }
  3301.         }
  3302.  
  3303.         .CentAnni-style-lnb-hide-yt-studio-btn {
  3304.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="YouTube Studio"]) {
  3305.                 display: none;
  3306.             }
  3307.         }
  3308.  
  3309.         .CentAnni-style-lnb-hide-yt-music-btn {
  3310.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="YouTube Music"]) {
  3311.                 display: none;
  3312.             }
  3313.         }
  3314.  
  3315.         .CentAnni-style-lnb-hide-yt-kids-btn {
  3316.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="YouTube Kids"]) {
  3317.                 display: none;
  3318.             }
  3319.         }
  3320.  
  3321.         .CentAnni-style-lnb-hide-penultimate-section {
  3322.             tp-yt-app-drawer#guide[role="navigation"] #sections ytd-guide-section-renderer:has(a[href*="/account"]) {
  3323.                 display: none;
  3324.             }
  3325.         }
  3326.  
  3327.         .CentAnni-style-lnb-hide-settings-btn {
  3328.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Settings"]) {
  3329.                 display: none;
  3330.             }
  3331.         }
  3332.  
  3333.         .CentAnni-style-lnb-hide-report-history-btn {
  3334.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Report history"]) {
  3335.                 display: none;
  3336.             }
  3337.         }
  3338.  
  3339.         .CentAnni-style-lnb-hide-help-btn {
  3340.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Help"]) {
  3341.                 display: none;
  3342.             }
  3343.         }
  3344.  
  3345.         .CentAnni-style-lnb-hide-feedback-btn {
  3346.             #sections ytd-guide-section-renderer ytd-guide-entry-renderer:has(a[title="Send feedback"]) {
  3347.                 display: none;
  3348.             }
  3349.         }
  3350.  
  3351.         .CentAnni-style-lnb-hide-footer {
  3352.             tp-yt-app-drawer#guide[role="navigation"] #footer {
  3353.                 display: none;
  3354.             }
  3355.         }
  3356.  
  3357.         /* hide main scrollbar in safari */
  3358.         html {
  3359.             scrollbar-width: none;
  3360.             -ms-overflow-style: none;
  3361.         }
  3362.  
  3363.         html::-webkit-scrollbar {
  3364.             display: none;
  3365.         }
  3366.  
  3367.         .scrollable-div {
  3368.             scrollbar-width: auto;
  3369.             -ms-overflow-style: auto;
  3370.         }
  3371.  
  3372.         .scrollable-div::-webkit-scrollbar {
  3373.             display: block;
  3374.         }
  3375.  
  3376.         /* adjustments for light mode */
  3377.         ytd-masthead:not([dark]):not([page-dark-theme]) .buttons-left {
  3378.             color: black;
  3379.         }
  3380.  
  3381.         ytd-masthead:not([dark]):not([page-dark-theme]) .button-style-settings {
  3382.             color: slategray !important;
  3383.         }
  3384.  
  3385.         ytd-masthead:not([dark]):not([page-dark-theme]) .button-style-settings:hover {
  3386.             color: black !important;
  3387.         }
  3388.  
  3389.         ytd-masthead:not([dark]):not([page-dark-theme]) .button-style {
  3390.             color: black;
  3391.         }
  3392.  
  3393.         ytd-masthead:not([dark]):not([page-dark-theme]) .button-wrapper:not(:has(.button-style-settings)):hover {
  3394.             background-color: rgba(0, 0, 0, 0.1); border-radius: 24px;
  3395.         }
  3396.  
  3397.         ytd-masthead:not([dark]):not([page-dark-theme]) .button-wrapper:not(:has(.button-style-settings)):active {
  3398.             background-color: rgba(0, 0, 0, 0.2); border-radius: 24px;
  3399.         }
  3400.  
  3401.         ytd-masthead:not([dark]):not([page-dark-theme]) .notification-error {
  3402.             background-color: white;
  3403.             border: 1px solid black;
  3404.             color: #030303;
  3405.         }
  3406.  
  3407.         html:not([dark]) .CentAnni-playback-speed-button:active {
  3408.             background: rgb(205,205,205) !important;
  3409.         }
  3410.  
  3411.         html:not([dark]) .CentAnni-tabView-tab,
  3412.         html:not([dark]) .CentAnni-playback-speed-display {
  3413.             background-color: rgba(0,0,0,0.05);
  3414.             color: #0f0f0f;
  3415.         }
  3416.  
  3417.         html:not([dark]) .CentAnni-playback-speed-display::before,
  3418.         html:not([dark]) .CentAnni-playback-speed-display::after {
  3419.             background: rgba(0,0,0,0.1);
  3420.         }
  3421.  
  3422.         html:not([dark]) .CentAnni-tabView-tab:hover {
  3423.             background: rgba(0,0,0,0.1);
  3424.             border-color: transparent;
  3425.         }
  3426.  
  3427.         html:not([dark]) .CentAnni-tabView-tab.active {
  3428.             background-color: #0f0f0f;
  3429.             color: white;
  3430.         }
  3431.  
  3432.         html:not([dark]) .CentAnni-tabView {
  3433.             border: 1px solid var(--yt-spec-10-percent-layer);
  3434.         }
  3435.  
  3436.         html:not([dark]) ytd-watch-flexy[flexy][js-panel-height_] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy[target-id="engagement-panel-structured-description"],
  3437.         html:not([dark]) ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-structured-description] {
  3438.             background-color: var(--yt-spec-badge-chip-background);
  3439.         }
  3440.  
  3441.         html:not([dark]) ytd-engagement-panel-section-list-renderer[target-id=PAsearch_preview] {
  3442.             background-color: #f2f2f2;
  3443.         }
  3444.  
  3445.         html:not([dark]) #CentAnni-playback-speed-control > div > svg > path {
  3446.             fill: black;
  3447.         }
  3448.  
  3449.         html:not([dark]) ytd-watch-flexy[flexy][js-panel-height_] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy,
  3450.         html:not([dark]) ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters],
  3451.         html:not([dark]) ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-structured-description],
  3452.         html:not([dark]) ytd-watch-flexy #panels ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-searchable-transcript],
  3453.         html:not([dark]) ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters],
  3454.         html:not([dark]) #related.style-scope.ytd-watch-flexy {
  3455.             border: 1px solid var(--yt-spec-10-percent-layer);
  3456.             border-top: none;
  3457.         }
  3458.  
  3459.         html:not([dark]) #tab-2 {
  3460.             border-top: 1px solid var(--yt-spec-10-percent-layer);
  3461.         }
  3462.  
  3463.         html:not([dark]) .yt-tab-shape-wiz__tab--tab-selected,
  3464.         html:not([dark]) .yt-tab-shape-wiz__tab:hover {
  3465.             color: black !important;
  3466.         }
  3467.  
  3468.         .CentAnni-style-selection-color {
  3469.             --selection-color: var(--darkSelectionColor);
  3470.             --selection-text-color: white;
  3471.         }
  3472.  
  3473.         html:not([dark]) .CentAnni-style-selection-color {
  3474.             --selection-color: var(--lightSelectionColor);
  3475.             --selection-text-color: var(--light-theme-background-color);
  3476.         }
  3477.  
  3478.         .CentAnni-style-selection-color ::selection {
  3479.             background: var(--selection-color);
  3480.             color: var(--selection-text-color);
  3481.         }
  3482.     `;
  3483.  
  3484.     // append css
  3485.     (document.head
  3486.         ? Promise.resolve(document.head)
  3487.         : new Promise(resolve => {
  3488.             if (document.readyState === 'loading')
  3489.                 document.addEventListener('DOMContentLoaded', () => resolve(document.head), { once: true });
  3490.             else resolve(document.head);
  3491.         })
  3492.     ).then(head => {
  3493.         if (head)
  3494.             head.appendChild(styleSheet);
  3495.         else {
  3496.                 document.documentElement.appendChild(styleSheet);
  3497.                 console.error("YouTubeAlchemy: Failed to find head element. Using backup to append stylesheet.");
  3498.         }
  3499.     });
  3500.  
  3501.     // default configuration
  3502.     const DEFAULT_CONFIG = {
  3503.         YouTubeTranscriptExporter: true,
  3504.         targetChatGPTUrl: 'https://ChatGPT.com/',
  3505.         targetNotebookLMUrl: 'https://NotebookLM.Google.com/',
  3506.         fileNamingFormat: 'title-channel',
  3507.         includeTimestamps: true,
  3508.         includeChapterHeaders: true,
  3509.         openSameTab:true,
  3510.         transcriptTimestamps: false,
  3511.         preventBackgroundExecution: true,
  3512.         ChatGPTPrompt: `You are an expert at summarizing YouTube video transcripts and are capable of analyzing and understanding a YouTuber's unique tone of voice and style from a transcript alone to mimic their communication style perfectly. Respond only in English while being mindful of American English spelling, vocabulary, and a casual, conversational tone. You prefer to use clauses instead of complete sentences while avoiding self-referential discourse signals like "I explain" or "I will show." Ignore advertisement, promotional, and sponsorship segments. Respond only in chat. Do not open a canvas. In your initial response, do not answer any question from the transcript, do not use the web tool, and avoid using colons outside the two headers. Do not hallucinate. Do not make up factual information. Do not speculate. Before you write your initial answer, take a moment to think about how you have to adopt your own writing to capture the YouTuber's specific word choices and communication style—study the provided transcript and utilize it as a style guide. Write as if you are the YouTuber speaking directly to your audience. Avoid any narrator-like phrases such as "the transcript" or "this video." Summarize the provided YouTube transcript into two distinct sections. The first section is a quick three-line bullet point overview, with each point fewer than 30 words, in a section called "### Key Takeaways:" and highlight important words by **bolding** them—only for this first section maintain a neutral tone. Then write the second section, a one-paragraph summary of at least 100 words while focusing on the main points and key takeaways into a section called "### One-Paragraph Summary:" and **bold** multiple phrases within the paragraph that together form an encapsulated, abridged version, that allows for quick identification and understanding of the core message.`,
  3513.         buttonIcons: {
  3514.             settings: '⋮',
  3515.             download: '↓',
  3516.             ChatGPT: '💬',
  3517.             NotebookLM: '🎧'
  3518.         },
  3519.         buttonLeft1Text: 'ABC News',
  3520.         buttonLeft1Url: 'https://www.youtube.com/@ABCNews/videos',
  3521.         buttonLeft2Text: 'CNN',
  3522.         buttonLeft2Url: 'https://www.youtube.com/@CNN/videos',
  3523.         buttonLeft3Text: '',
  3524.         buttonLeft3Url: 'https://www.youtube.com/@BBCNews/videos',
  3525.         buttonLeft4Text: '',
  3526.         buttonLeft4Url: 'https://www.youtube.com/@FoxNews/videos',
  3527.         buttonLeft5Text: '',
  3528.         buttonLeft5Url: 'https://www.youtube.com/@NBCNews/videos',
  3529.         buttonLeft6Text: '',
  3530.         buttonLeft6Url: 'https://www.youtube.com/@kcalnews/videos',
  3531.         buttonLeft7Text: '',
  3532.         buttonLeft7Url: 'https://www.youtube.com/foxla/videos',
  3533.         buttonLeft8Text: '',
  3534.         buttonLeft8Url: 'https://www.youtube.com/@earthcam/streams',
  3535.         buttonLeft9Text: '',
  3536.         buttonLeft9Url: 'https://www.youtube.com/@Formula1/videos',
  3537.         buttonLeft10Text: '',
  3538.         buttonLeft10Url: 'https://www.youtube.com/@OpenAI/videos',
  3539.         mButtonText: '☰',
  3540.         mButtonDisplay: false,
  3541.         colorCodeVideosEnabled: true,
  3542.         videosHideWatchedGlobal: false,
  3543.         videosHideWatched: false,
  3544.         videosOldOpacity: 0.5,
  3545.         videosAgeColorPickerNewly: '#FFFF00',
  3546.         videosAgeColorPickerRecent: '#FF9B00',
  3547.         videosAgeColorPickerLately: '#006DFF',
  3548.         videosAgeColorPickerLatterly: '#000000',
  3549.         videosAgeColorPickerLive: '#FF0000',
  3550.         videosAgeColorPickerStreamed: '#FF0000',
  3551.         videosAgeColorPickerUpcoming: '#32CD32',
  3552.         progressbarColorPicker: '#FF0033',
  3553.         lightModeSelectionColor: '#000000',
  3554.         darkModeSelectionColor: '#007CC3',
  3555.         textTransform: 'normal-case',
  3556.         defaultFontSize: 10,
  3557.         videosWatchedOpacity: 0.5,
  3558.         videosPerRow: 0,
  3559.         playProgressColor: false,
  3560.         videoTabView: true,
  3561.         tabViewChapters: true,
  3562.         progressBar: true,
  3563.         playbackSpeed: true,
  3564.         playbackSpeedValue: 1,
  3565.         VerifiedArtist: false,
  3566.         defaultQuality: 'auto',
  3567.         defaultQualityPremium: false,
  3568.         lastSeenVideo: true,
  3569.         lastSeenVideoScroll: false,
  3570.         lastSeenVideoColor: '#9400D3',
  3571.         playlistLinks: false,
  3572.         playlistTrashCan: false,
  3573.         commentsNewFirst: false,
  3574.         defaultTranscriptLanguage: 'auto',
  3575.         defaultAudioLanguage: 'auto',
  3576.         defaultSubtitleLanguage: 'auto',
  3577.         autoOpenChapters: true,
  3578.         autoOpenTranscript: false,
  3579.         displayRemainingTime: true,
  3580.         preventAutoplay: false,
  3581.         hideVoiceSearch: false,
  3582.         selectionColor: true,
  3583.         hideCreateButton: false,
  3584.         hideNotificationBtn: false,
  3585.         hideNotificationBadge: false,
  3586.         hideOwnAvatar: false,
  3587.         hideBrandText: false,
  3588.         visibleCountryCode: false,
  3589.         visibleCountryCodeColor: '#aaaaaa',
  3590.         hideJoinButton: false,
  3591.         hidePlayNextButton: false,
  3592.         hideAirplayButton: false,
  3593.         hideShorts: false,
  3594.         hideCommentsSection: false,
  3595.         hideVideosSection: false,
  3596.         redirectShorts: false,
  3597.         hideAdSlots: false,
  3598.         hidePayToWatch: false,
  3599.         hideFreeWithAds: false,
  3600.         hideMembersOnly: false,
  3601.         hideLatestPosts: false,
  3602.         hideShareButton: false,
  3603.         hideHashtags: false,
  3604.         hideInfoPanel: false,
  3605.         hideRightSidebarSearch: false,
  3606.         hideAddComment: false,
  3607.         hideReplyButton: false,
  3608.         hidePlaylistsHome: false,
  3609.         hideNewsHome: false,
  3610.         hideEndCards: false,
  3611.         hideEndscreen: false,
  3612.         gradientBottom: true,
  3613.         smallSubscribeButton: false,
  3614.         pureBWBackground: true,
  3615.         noFrostedGlass: false,
  3616.         removeScrubber: false,
  3617.         disablePlayOnHover: false,
  3618.         chronologicalNotifications: true,
  3619.         hideFundraiser: false,
  3620.         hideMiniPlayer: false,
  3621.         hideQueueBtn: false,
  3622.         closeChatWindow: false,
  3623.         displayFullTitle: true,
  3624.         autoTheaterMode: false,
  3625.         channelReindirizzare: false,
  3626.         channelRSSBtn: false,
  3627.         channelPlaylistBtn: false,
  3628.         playlistDirectionBtns: true,
  3629.         lnbHideHomeBtn: false,
  3630.         lnbHideSubscriptionsBtn: false,
  3631.         lnbHideHistoryBtn: false,
  3632.         lnbHidePlaylistsBtn: false,
  3633.         lnbHideVideosBtn: false,
  3634.         lnbHideCoursesBtn: false,
  3635.         lnbHideYPodcastsBtn: false,
  3636.         lnbHideWlBtn: false,
  3637.         lnbHideLikedVideosBtn: false,
  3638.         lnbHideYouBtn: false,
  3639.         lnbHideSubscriptionsSection: false,
  3640.         lnbHideSubscriptionsTitle: false,
  3641.         lnbHideMoreBtn: false,
  3642.         lnbHideExploreSection: false,
  3643.         lnbHideExploreTitle: false,
  3644.         lnbHideTrendingBtn: false,
  3645.         lnbHideMusicBtn: false,
  3646.         lnbHideMoviesBtn: false,
  3647.         lnbHideLiveBtn: false,
  3648.         lnbHideGamingBtn: false,
  3649.         lnbHideNewsBtn: false,
  3650.         lnbHideSportsBtn: false,
  3651.         lnbHideLearningBtn: false,
  3652.         lnbHideFashionBtn: false,
  3653.         lnbHidePodcastsBtn: false,
  3654.         lnbHideMoreSection: false,
  3655.         lnbHideMoreTitle: false,
  3656.         lnbHideYtPremiumBtn: false,
  3657.         lnbHideYtStudioBtn: false,
  3658.         lnbHideYtMusicBtn: false,
  3659.         lnbHideYtKidsBtn: false,
  3660.         lnbHidePenultimateSection: false,
  3661.         lnbHideSettingsBtn: false,
  3662.         lnbHideReportHistoryBtn: false,
  3663.         lnbHideHelpBtn: false,
  3664.         lnbHideFeedbackBtn: false,
  3665.         lnbHideFooter: false,
  3666.         squareSearchBar: false,
  3667.         squareDesign: false,
  3668.         squareAvatars: false,
  3669.         compactLayout: false,
  3670.         noAmbientMode: false
  3671.     };
  3672.  
  3673.     // load user configuration or use defaults
  3674.     let storedConfig = {};
  3675.     try {
  3676.         storedConfig = await GM.getValue('USER_CONFIG', {});
  3677.     } catch (error) {
  3678.         showNotification('Error loading user save!');
  3679.         console.error("YouTubeAlchemy: Error loading user configuration:", error);
  3680.     }
  3681.  
  3682.     let USER_CONFIG = {
  3683.         ...DEFAULT_CONFIG,
  3684.         ...storedConfig,
  3685.         buttonIcons: {
  3686.             ...DEFAULT_CONFIG.buttonIcons,
  3687.             ...storedConfig.buttonIcons
  3688.         }
  3689.     };
  3690.  
  3691.     // caching DOM references
  3692.     const docElement = document.documentElement;
  3693.     let docBody = document.body;
  3694.  
  3695.     // ensure CSS settings load immediately
  3696.     let cssSettingsApplied = false;
  3697.     function loadCSSsettings() {
  3698.         // features css
  3699.         if (USER_CONFIG.progressBar) { docElement.classList.add('CentAnni-progress-bar'); } else { docElement.classList.remove('CentAnni-progress-bar'); }
  3700.         if (USER_CONFIG.videoTabView) { docElement.classList.add('CentAnni-video-tabView'); } else { docElement.classList.remove('CentAnni-video-tabView'); }
  3701.         if (USER_CONFIG.playbackSpeed) { docElement.classList.add('CentAnni-playback-speed'); } else { docElement.classList.remove('CentAnni-playback-speed'); }
  3702.         if (USER_CONFIG.mButtonDisplay) { docElement.classList.add('CentAnni-style-hide-default-sidebar'); } else { docElement.classList.remove('CentAnni-style-hide-default-sidebar'); }
  3703.         if (USER_CONFIG.videoTabView && USER_CONFIG.tabViewChapters) { docElement.classList.add('CentAnni-tabView-chapters'); } else { docElement.classList.remove('CentAnni-tabView-chapters'); }
  3704.  
  3705.         // custom css
  3706.         docElement.style.setProperty('--itemsPerRow', USER_CONFIG.videosPerRow);
  3707.         docElement.style.setProperty('--textTransform', USER_CONFIG.textTransform);
  3708.         docElement.style.setProperty('--fontSize', `${USER_CONFIG.defaultFontSize}px`);
  3709.         docElement.style.setProperty('--watchedOpacity', USER_CONFIG.videosWatchedOpacity);
  3710.         docElement.style.setProperty('--progressBarColor', USER_CONFIG.progressbarColorPicker);
  3711.         docElement.style.setProperty('--lightSelectionColor', USER_CONFIG.lightModeSelectionColor);
  3712.         docElement.style.setProperty('--darkSelectionColor', USER_CONFIG.darkModeSelectionColor);
  3713.         docElement.style.setProperty('--countryCodeColor', USER_CONFIG.visibleCountryCodeColor);
  3714.  
  3715.         if (USER_CONFIG.pureBWBackground) { docElement.classList.add('CentAnni-style-pure-bg'); } else { docElement.classList.remove('CentAnni-style-pure-bg'); }
  3716.         if (USER_CONFIG.hideShorts) { docElement.classList.add('CentAnni-style-hide-shorts'); } else { docElement.classList.remove('CentAnni-style-hide-shorts'); }
  3717.         if (USER_CONFIG.noAmbientMode) { docElement.classList.add('CentAnni-style-no-ambient'); } else { docElement.classList.remove('CentAnni-style-no-ambient'); }
  3718.         if (USER_CONFIG.videosPerRow !== 0) { docElement.classList.add('CentAnni-style-video-row'); } else { docElement.classList.remove('CentAnni-style-video-row'); }
  3719.         if (USER_CONFIG.displayFullTitle) { docElement.classList.add('CentAnni-style-full-title'); } else { docElement.classList.remove('CentAnni-style-full-title'); }
  3720.         if (USER_CONFIG.hideAdSlots) { docElement.classList.add('CentAnni-style-hide-ad-slots'); } else { docElement.classList.remove('CentAnni-style-hide-ad-slots'); }
  3721.         if (USER_CONFIG.hideHashtags) { docElement.classList.add('CentAnni-style-hide-hashtags'); } else { docElement.classList.remove('CentAnni-style-hide-hashtags'); }
  3722.         if (USER_CONFIG.squareDesign) { docElement.classList.add('CentAnni-style-square-design'); } else { docElement.classList.remove('CentAnni-style-square-design'); }
  3723.         if (USER_CONFIG.hideQueueBtn) { docElement.classList.add('CentAnni-style-hide-queue-btn'); } else { docElement.classList.remove('CentAnni-style-hide-queue-btn'); }
  3724.         if (USER_CONFIG.hideJoinButton) { docElement.classList.add('CentAnni-style-hide-join-btn'); } else { docElement.classList.remove('CentAnni-style-hide-join-btn'); }
  3725.         if (USER_CONFIG.hideNewsHome) { docElement.classList.add('CentAnni-style-hide-news-home'); } else { docElement.classList.remove('CentAnni-style-hide-news-home'); }
  3726.         if (USER_CONFIG.hideEndCards) { docElement.classList.add('CentAnni-style-hide-end-cards'); } else { docElement.classList.remove('CentAnni-style-hide-end-cards'); }
  3727.         if (USER_CONFIG.squareAvatars) { docElement.classList.add('CentAnni-style-square-avatars'); } else { docElement.classList.remove('CentAnni-style-square-avatars'); }
  3728.         if (USER_CONFIG.compactLayout) { docElement.classList.add('CentAnni-style-compact-layout'); } else { docElement.classList.remove('CentAnni-style-compact-layout'); }
  3729.         if (USER_CONFIG.hideEndscreen) { docElement.classList.add('CentAnni-style-hide-endscreen'); } else { docElement.classList.remove('CentAnni-style-hide-endscreen'); }
  3730.         if (USER_CONFIG.lnbHideWlBtn) { docElement.classList.add('CentAnni-style-lnb-hide-wl-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-wl-btn'); }
  3731.         if (USER_CONFIG.hideOwnAvatar) { docElement.classList.add('CentAnni-style-hide-own-avatar'); } else { docElement.classList.remove('CentAnni-style-hide-own-avatar'); }
  3732.         if (USER_CONFIG.hideShareButton) { docElement.classList.add('CentAnni-style-hide-share-btn'); } else { docElement.classList.remove('CentAnni-style-hide-share-btn'); }
  3733.         if (USER_CONFIG.hideReplyButton) { docElement.classList.add('CentAnni-style-hide-reply-btn'); } else { docElement.classList.remove('CentAnni-style-hide-reply-btn'); }
  3734.         if (USER_CONFIG.lnbHideFooter) { docElement.classList.add('CentAnni-style-lnb-hide-footer'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-footer'); }
  3735.         if (USER_CONFIG.hideInfoPanel) { docElement.classList.add('CentAnni-style-hide-info-panel'); } else { docElement.classList.remove('CentAnni-style-hide-info-panel'); }
  3736.         if (USER_CONFIG.hideBrandText) { docElement.classList.add('CentAnni-style-hide-brand-text'); } else { docElement.classList.remove('CentAnni-style-hide-brand-text'); }
  3737.         if (USER_CONFIG.gradientBottom) { docElement.classList.add('CentAnni-style-gradient-bottom'); } else { docElement.classList.remove('CentAnni-style-gradient-bottom'); }
  3738.         if (USER_CONFIG.selectionColor) { docElement.classList.add('CentAnni-style-selection-color'); } else { docElement.classList.remove('CentAnni-style-selection-color'); }
  3739.         if (USER_CONFIG.removeScrubber) { docElement.classList.add('CentAnni-style-remove-scrubber'); } else { docElement.classList.remove('CentAnni-style-remove-scrubber'); }
  3740.         if (USER_CONFIG.hideFundraiser) { docElement.classList.add('CentAnni-style-hide-fundraiser'); } else { docElement.classList.remove('CentAnni-style-hide-fundraiser'); }
  3741.         if (USER_CONFIG.hideMiniPlayer) { docElement.classList.add('CentAnni-style-hide-miniplayer'); } else { docElement.classList.remove('CentAnni-style-hide-miniplayer'); }
  3742.         if (USER_CONFIG.lnbHideYouBtn) { docElement.classList.add('CentAnni-style-lnb-hide-you-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-you-btn'); }
  3743.         if (USER_CONFIG.hideAddComment) { docElement.classList.add('CentAnni-style-hide-add-comment'); } else { docElement.classList.remove('CentAnni-style-hide-add-comment'); }
  3744.         if (USER_CONFIG.hideCreateButton) { docElement.classList.add('CentAnni-style-hide-create-btn'); } else { docElement.classList.remove('CentAnni-style-hide-create-btn'); }
  3745.         if (USER_CONFIG.noFrostedGlass) { docElement.classList.add('CentAnni-style-no-frosted-glass'); } else { docElement.classList.remove('CentAnni-style-no-frosted-glass'); }
  3746.         if (USER_CONFIG.hideVideosSection) { docElement.classList.add('CentAnni-style-hide-videos-btn'); } else { docElement.classList.remove('CentAnni-style-hide-videos-btn'); }
  3747.         if (USER_CONFIG.hidePayToWatch) { docElement.classList.add('CentAnni-style-hide-pay-to-watch'); } else { docElement.classList.remove('CentAnni-style-hide-pay-to-watch'); }
  3748.         if (USER_CONFIG.lnbHideLiveBtn) { docElement.classList.add('CentAnni-style-lnb-hide-live-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-live-btn'); }
  3749.         if (USER_CONFIG.lnbHideNewsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-news-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-news-btn'); }
  3750.         if (USER_CONFIG.lnbHideMoreBtn) { docElement.classList.add('CentAnni-style-lnb-hide-more-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-more-btn'); }
  3751.         if (USER_CONFIG.lnbHideHomeBtn) { docElement.classList.add('CentAnni-style-lnb-hide-home-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-home-btn'); }
  3752.         if (USER_CONFIG.lnbHideHelpBtn) { docElement.classList.add('CentAnni-style-lnb-hide-help-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-help-btn'); }
  3753.         if (USER_CONFIG.hideAirplayButton) { docElement.classList.add('CentAnni-style-hide-airplay-btn'); } else { docElement.classList.remove('CentAnni-style-hide-airplay-btn'); }
  3754.         if (USER_CONFIG.hideMembersOnly) { docElement.classList.add('CentAnni-style-hide-members-only'); } else { docElement.classList.remove('CentAnni-style-hide-members-only'); }
  3755.         if (USER_CONFIG.hideLatestPosts) { docElement.classList.add('CentAnni-style-hide-latest-posts'); } else { docElement.classList.remove('CentAnni-style-hide-latest-posts'); }
  3756.         if (USER_CONFIG.hideVoiceSearch) { docElement.classList.add('CentAnni-style-hide-voice-search'); } else { docElement.classList.remove('CentAnni-style-hide-voice-search'); }
  3757.         if (USER_CONFIG.squareSearchBar) { docElement.classList.add('CentAnni-style-square-search-bar'); } else { docElement.classList.remove('CentAnni-style-square-search-bar'); }
  3758.         if (USER_CONFIG.hideFreeWithAds) { docElement.classList.add('CentAnni-style-hide-free-with-ads'); } else { docElement.classList.remove('CentAnni-style-hide-free-with-ads'); }
  3759.         if (USER_CONFIG.lnbHideMusicBtn) { docElement.classList.add('CentAnni-style-lnb-hide-music-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-music-btn'); }
  3760.         if (USER_CONFIG.hidePlayNextButton) { docElement.classList.add('CentAnni-style-hide-playnext-btn'); } else { docElement.classList.remove('CentAnni-style-hide-playnext-btn'); }
  3761.         if (USER_CONFIG.hideCommentsSection) { docElement.classList.add('CentAnni-style-hide-comments-btn'); } else { docElement.classList.remove('CentAnni-style-hide-comments-btn'); }
  3762.         if (USER_CONFIG.lnbHideMoviesBtn) { docElement.classList.add('CentAnni-style-lnb-hide-movies-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-movies-btn'); }
  3763.         if (USER_CONFIG.lnbHideGamingBtn) { docElement.classList.add('CentAnni-style-lnb-hide-gaming-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-gaming-btn'); }
  3764.         if (USER_CONFIG.lnbHideSportsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-sports-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-sports-btn'); }
  3765.         if (USER_CONFIG.lnbHideMoreTitle) { docElement.classList.add('CentAnni-style-lnb-hide-more-title'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-more-title'); }
  3766.         if (USER_CONFIG.lnbHideVideosBtn) { docElement.classList.add('CentAnni-style-lnb-hide-videos-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-videos-btn'); }
  3767.         if (USER_CONFIG.playProgressColor) { docElement.classList.add('CentAnni-style-play-progress-color'); } else { docElement.classList.remove('CentAnni-style-play-progress-color'); }
  3768.         if (USER_CONFIG.hidePlaylistsHome) { docElement.classList.add('CentAnni-style-hide-playlists-home'); } else { docElement.classList.remove('CentAnni-style-hide-playlists-home'); }
  3769.         if (USER_CONFIG.lnbHideYtKidsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-yt-kids-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-yt-kids-btn'); }
  3770.         if (USER_CONFIG.lnbHideFashionBtn) { docElement.classList.add('CentAnni-style-lnb-hide-fashion-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-fashion-btn'); }
  3771.         if (USER_CONFIG.lnbHideCoursesBtn) { docElement.classList.add('CentAnni-style-lnb-hide-courses-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-courses-btn'); }
  3772.         if (USER_CONFIG.lnbHideHistoryBtn) { docElement.classList.add('CentAnni-style-lnb-hide-history-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-history-btn'); }
  3773.         if (USER_CONFIG.smallSubscribeButton) { docElement.classList.add('CentAnni-style-small-subscribe-btn'); } else { docElement.classList.remove('CentAnni-style-small-subscribe-btn'); }
  3774.         if (USER_CONFIG.lnbHideYtMusicBtn) { docElement.classList.add('CentAnni-style-lnb-hide-yt-music-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-yt-music-btn'); }
  3775.         if (USER_CONFIG.lnbHideTrendingBtn) { docElement.classList.add('CentAnni-style-lnb-hide-trending-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-trending-btn'); }
  3776.         if (USER_CONFIG.disablePlayOnHover) { docElement.classList.add('CentAnni-style-disable-play-on-hover'); } else { docElement.classList.remove('CentAnni-style-disable-play-on-hover'); }
  3777.         if (USER_CONFIG.lnbHideLearningBtn) { docElement.classList.add('CentAnni-style-lnb-hide-learning-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-learning-btn'); }
  3778.         if (USER_CONFIG.lnbHidePodcastsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-podcasts-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-podcasts-btn'); }
  3779.         if (USER_CONFIG.lnbHideMoreSection) { docElement.classList.add('CentAnni-style-lnb-hide-more-section'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-more-section'); }
  3780.         if (USER_CONFIG.lnbHideSettingsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-settings-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-settings-btn'); }
  3781.         if (USER_CONFIG.lnbHideFeedbackBtn) { docElement.classList.add('CentAnni-style-lnb-hide-feedback-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-feedback-btn'); }
  3782.         if (USER_CONFIG.hideNotificationBtn) { docElement.classList.add('CentAnni-style-hide-notification-btn'); } else { docElement.classList.remove('CentAnni-style-hide-notification-btn'); }
  3783.         if (USER_CONFIG.lnbHideYtStudioBtn) { docElement.classList.add('CentAnni-style-lnb-hide-yt-studio-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-yt-studio-btn'); }
  3784.         if (USER_CONFIG.chronologicalNotifications) { docElement.classList.add('CentAnni-style-sort-notifications'); } else { docElement.classList.remove('CentAnni-style-sort-notifications'); }
  3785.         if (USER_CONFIG.lnbHidePlaylistsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-playlists-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-playlists-btn'); }
  3786.         if (USER_CONFIG.lnbHideExploreTitle) { docElement.classList.add('CentAnni-style-lnb-hide-explore-title'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-explore-title'); }
  3787.         if (USER_CONFIG.lnbHideYtPremiumBtn) { docElement.classList.add('CentAnni-style-lnb-hide-yt-premium-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-yt-premium-btn'); }
  3788.         if (USER_CONFIG.hideNotificationBadge) { docElement.classList.add('CentAnni-style-hide-notification-badge'); } else { docElement.classList.remove('CentAnni-style-hide-notification-badge'); }
  3789.         if (USER_CONFIG.lnbHideExploreSection) { docElement.classList.add('CentAnni-style-lnb-hide-explore-section'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-explore-section'); }
  3790.         if (USER_CONFIG.lnbHideLikedVideosBtn) { docElement.classList.add('CentAnni-style-lnb-hide-liked-videos-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-liked-videos-btn'); }
  3791.         if (USER_CONFIG.lnbHideYPodcastsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-your-podcasts-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-your-podcasts-btn'); }
  3792.         if (USER_CONFIG.hideRightSidebarSearch) { docElement.classList.add('CentAnni-style-search-hide-right-sidebar'); } else { docElement.classList.remove('CentAnni-style-search-hide-right-sidebar'); }
  3793.         if (USER_CONFIG.videosHideWatchedGlobal) { docElement.classList.add('CentAnni-style-hide-watched-videos-global'); } else { docElement.classList.remove('CentAnni-style-hide-watched-videos-global'); }
  3794.         if (USER_CONFIG.lnbHideSubscriptionsBtn) { docElement.classList.add('CentAnni-style-lnb-hide-subscriptions-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-subscriptions-btn'); }
  3795.         if (USER_CONFIG.lnbHideReportHistoryBtn) { docElement.classList.add('CentAnni-style-lnb-hide-report-history-btn'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-report-history-btn'); }
  3796.         if (USER_CONFIG.lnbHideSubscriptionsTitle) { docElement.classList.add('CentAnni-style-lnb-hide-subscriptions-title'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-subscriptions-title'); }
  3797.         if (USER_CONFIG.lnbHidePenultimateSection) { docElement.classList.add('CentAnni-style-lnb-hide-penultimate-section'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-penultimate-section'); }
  3798.         if (USER_CONFIG.lnbHideSubscriptionsSection) { docElement.classList.add('CentAnni-style-lnb-hide-subscriptions-section'); } else { docElement.classList.remove('CentAnni-style-lnb-hide-subscriptions-section'); }
  3799.         if (USER_CONFIG.visibleCountryCode && USER_CONFIG.hideBrandText) { docElement.classList.add('CentAnni-style-visible-country-code'); } else { docElement.classList.remove('CentAnni-style-visible-country-code'); }
  3800.  
  3801.         // color code videos
  3802.         if (USER_CONFIG.videosHideWatched) { docElement.classList.add('CentAnni-style-hide-watched-videos'); } else { docElement.classList.remove('CentAnni-style-hide-watched-videos'); }
  3803.         docElement.style.setProperty('--liveVideo', USER_CONFIG.videosAgeColorPickerLive);
  3804.         docElement.style.setProperty('--streamedText', USER_CONFIG.videosAgeColorPickerStreamed);
  3805.         docElement.style.setProperty('--upComingVideo', USER_CONFIG.videosAgeColorPickerUpcoming);
  3806.         docElement.style.setProperty('--newlyVideo', USER_CONFIG.videosAgeColorPickerNewly);
  3807.         docElement.style.setProperty('--recentVideo', USER_CONFIG.videosAgeColorPickerRecent);
  3808.         docElement.style.setProperty('--latelyVideo', USER_CONFIG.videosAgeColorPickerLately);
  3809.         docElement.style.setProperty('--latterlyVideo', USER_CONFIG.videosAgeColorPickerLatterly);
  3810.         docElement.style.setProperty('--oldVideo', USER_CONFIG.videosOldOpacity);
  3811.         docElement.style.setProperty('--lastSeenVideoColor', USER_CONFIG.lastSeenVideoColor);
  3812.  
  3813.         cssSettingsApplied = true;
  3814.     } loadCSSsettings();
  3815.  
  3816.     // create and show the settings modal
  3817.     function showSettingsModal() {
  3818.         const existingModal = document.getElementById('yt-transcript-settings-modal');
  3819.         if (existingModal) {
  3820.             existingModal.style.display = 'flex';
  3821.             docBody.style.overflow = 'hidden';
  3822.             return;
  3823.         }
  3824.  
  3825.         // create modal elements
  3826.         const modal = document.createElement('div');
  3827.         modal.id = 'yt-transcript-settings-modal';
  3828.         modal.classList.add('CentAnni-overlay');
  3829.  
  3830.         const modalContent = document.createElement('div');
  3831.         modalContent.classList.add('modal-content');
  3832.  
  3833.         // create header container
  3834.         const headerWrapper = document.createElement('div');
  3835.         headerWrapper.classList.add('header-wrapper');
  3836.  
  3837.         // header
  3838.         const header = document.createElement('a');
  3839.         header.href = 'https://github.com/TimMacy/YouTubeAlchemy';
  3840.         header.target = '_blank';
  3841.         header.innerText = 'YouTube Alchemy';
  3842.         header.title = 'GitHub Repository for YouTube Alchemy';
  3843.         header.classList.add('header');
  3844.         headerWrapper.appendChild(header);
  3845.  
  3846.         // version
  3847.         const versionSpan = document.createElement('span');
  3848.         const scriptVersion = GM.info.script.version;
  3849.         versionSpan.innerText = `v${scriptVersion}`;
  3850.         versionSpan.classList.add('version-label');
  3851.         headerWrapper.appendChild(versionSpan);
  3852.  
  3853.         modalContent.appendChild(headerWrapper);
  3854.  
  3855.         // create form elements for each setting
  3856.         const form = document.createElement('form');
  3857.         form.id = 'yt-transcript-settings-form';
  3858.  
  3859.         // Button Icons
  3860.         const iconsHeader = document.createElement('label');
  3861.         iconsHeader.innerText = 'Button Icons:';
  3862.         iconsHeader.classList.add('button-icons');
  3863.         form.appendChild(iconsHeader);
  3864.  
  3865.         const iconsContainer = document.createElement('div');
  3866.         iconsContainer.classList.add('icons-container');
  3867.  
  3868.         function createIconInputField(labelText, settingKey, settingValue, labelClass) {
  3869.             const container = document.createElement('div');
  3870.             container.classList.add('container-button');
  3871.  
  3872.             const input = document.createElement('input');
  3873.             const iconInputClass = `${settingKey}-input-field`;
  3874.             input.type = 'text';
  3875.             input.name = settingKey;
  3876.             input.value = settingValue;
  3877.             input.classList.add('container-button-input');
  3878.             input.classList.add(iconInputClass);
  3879.  
  3880.             const label = document.createElement('label');
  3881.             label.innerText = labelText;
  3882.             label.className = labelClass;
  3883.             label.classList.add('container-button-label');
  3884.  
  3885.             container.appendChild(input);
  3886.             container.appendChild(label);
  3887.  
  3888.             return container;
  3889.         }
  3890.  
  3891.         iconsContainer.appendChild(createIconInputField('NotebookLM', 'buttonIconNotebookLM', USER_CONFIG.buttonIcons.NotebookLM, 'label-NotebookLM'));
  3892.         iconsContainer.appendChild(createIconInputField('ChatGPT', 'buttonIconChatGPT', USER_CONFIG.buttonIcons.ChatGPT, 'label-ChatGPT'));
  3893.         iconsContainer.appendChild(createIconInputField('Download', 'buttonIconDownload', USER_CONFIG.buttonIcons.download, 'label-download'));
  3894.         iconsContainer.appendChild(createIconInputField('Settings', 'buttonIconSettings', USER_CONFIG.buttonIcons.settings, 'label-settings'));
  3895.  
  3896.         form.appendChild(iconsContainer);
  3897.  
  3898.         // NotebookLM URL
  3899.         form.appendChild(createInputField('NotebookLM URL (Copy transcript, then open the website):', 'targetNotebookLMUrl', USER_CONFIG.targetNotebookLMUrl, 'label-NotebookLM'));
  3900.  
  3901.         // ChatGPT URL
  3902.         form.appendChild(createInputField('ChatGPT URL (Copy transcript with the prompt, then open the website):', 'targetChatGPTUrl', USER_CONFIG.targetChatGPTUrl, 'label-ChatGPT'));
  3903.  
  3904.         // SpacerTop10
  3905.         const SpacerTop10 = document.createElement('div');
  3906.         SpacerTop10.classList.add('spacer-10');
  3907.         form.appendChild(SpacerTop10);
  3908.  
  3909.         // File Naming Format
  3910.         form.appendChild(createSelectField('Text File Naming Format:', 'label-download', 'fileNamingFormat', USER_CONFIG.fileNamingFormat, {
  3911.             'title-channel': 'Title - Channel.txt (default)',
  3912.             'channel-title': 'Channel - Title.txt',
  3913.             'date-title-channel': 'uploadDate - Title - Channel.txt',
  3914.             'date-channel-title': 'uploadDate - Channel - Title.txt',
  3915.         }));
  3916.  
  3917.         // transcript exporter
  3918.         form.appendChild(createCheckboxField('Enable Transcript Exporter (default: yes)', 'YouTubeTranscriptExporter', USER_CONFIG.YouTubeTranscriptExporter));
  3919.  
  3920.         // include Timestamps
  3921.         form.appendChild(createCheckboxField('Include Timestamps in the Transcript (default: yes)', 'includeTimestamps', USER_CONFIG.includeTimestamps));
  3922.  
  3923.         // include Chapter Headers
  3924.         form.appendChild(createCheckboxField('Include Chapter Headers in the Transcript (default: yes)', 'includeChapterHeaders', USER_CONFIG.includeChapterHeaders));
  3925.  
  3926.         // open in Same Tab
  3927.         form.appendChild(createCheckboxField('Open Links in the Same Tab (default: yes)', 'openSameTab', USER_CONFIG.openSameTab));
  3928.  
  3929.         // prevent execution in background tabs
  3930.         form.appendChild(createCheckboxField('Important for Chrome! (default: yes)', 'preventBackgroundExecution', USER_CONFIG.preventBackgroundExecution));
  3931.  
  3932.         // info for Chrome
  3933.         const description = document.createElement('small');
  3934.         description.innerText = 'Ensures compatibility and prevents early script execution in background tabs.\nWhile this feature is superfluous in Safari, it is essential for Chrome.';
  3935.         description.classList.add('CentAnni-info-text');
  3936.         form.appendChild(description);
  3937.  
  3938.         // extra settings buttons
  3939.         const extraSettings = document.createElement('div');
  3940.         extraSettings.classList.add('extra-button-container');
  3941.  
  3942.         const buttonsLeft = document.createElement('button');
  3943.         buttonsLeft.type = 'button';
  3944.         buttonsLeft.innerText = 'Links in Header';
  3945.         buttonsLeft.classList.add('btn-style-settings');
  3946.         buttonsLeft.onclick = () => showSubPanel(createLinksInHeaderContent(), 'linksInHeader');
  3947.  
  3948.         const customCSSButton = document.createElement('button');
  3949.         customCSSButton.type = 'button';
  3950.         customCSSButton.innerText = 'Features & CSS';
  3951.         customCSSButton.classList.add('btn-style-settings');
  3952.         customCSSButton.onclick = () => showSubPanel(createCustomCSSContent(), 'createcustomCSS');
  3953.  
  3954.         const colorCodeVideos = document.createElement('button');
  3955.         colorCodeVideos.type = 'button';
  3956.         colorCodeVideos.innerText = 'Color Code Videos';
  3957.         colorCodeVideos.classList.add('btn-style-settings');
  3958.         colorCodeVideos.onclick = () => showSubPanel(createColorCodeVideosContent(), 'colorCodeVideos');
  3959.  
  3960.         extraSettings.appendChild(buttonsLeft)
  3961.         extraSettings.appendChild(customCSSButton);
  3962.         extraSettings.appendChild(colorCodeVideos);
  3963.  
  3964.         form.appendChild(extraSettings);
  3965.  
  3966.         // ChatGPT prompt
  3967.         const promptContainer = createTextareaField('ChatGPT Prompt:', 'ChatGPTPrompt', USER_CONFIG.ChatGPTPrompt, 'label-ChatGPT');
  3968.  
  3969.         // reset ChatGPT prompt
  3970.         const resetText = document.createElement('span');
  3971.         resetText.innerText = 'Reset Prompt';
  3972.         resetText.className = 'reset-prompt-text';
  3973.         resetText.addEventListener('click', function() {
  3974.             const textarea = promptContainer.querySelector('textarea[name="ChatGPTPrompt"]');
  3975.             if (textarea) textarea.value = DEFAULT_CONFIG.ChatGPTPrompt;
  3976.         });
  3977.  
  3978.         const label = promptContainer.querySelector('label');
  3979.         promptContainer.insertBefore(resetText, label);
  3980.  
  3981.         form.appendChild(promptContainer);
  3982.  
  3983.         // action buttons container
  3984.         const buttonContainer = document.createElement('div');
  3985.         buttonContainer.classList.add('button-container-end');
  3986.  
  3987.         // export and import button container
  3988.         const exportImportContainer = document.createElement('div');
  3989.         exportImportContainer.classList.add('button-container-backup');
  3990.  
  3991.         const exportButton = document.createElement('button');
  3992.         exportButton.type = 'button';
  3993.         exportButton.innerText = 'Export Settings';
  3994.         exportButton.classList.add('btn-style-settings');
  3995.         exportButton.onclick = exportSettings;
  3996.  
  3997.         const importButton = document.createElement('button');
  3998.         importButton.type = 'button';
  3999.         importButton.innerText = 'Import Settings';
  4000.         importButton.classList.add('btn-style-settings');
  4001.         importButton.onclick = importSettings;
  4002.  
  4003.         // Copyright
  4004.         const copyright = document.createElement('a');
  4005.         copyright.href = 'https://github.com/TimMacy';
  4006.         copyright.target = '_blank';
  4007.         copyright.innerText = '© 2024 Tim Macy';
  4008.         copyright.title = 'Copyright by Tim Macy';
  4009.         copyright.classList.add('copyright');
  4010.  
  4011.         const spacer = document.createElement('div');
  4012.         spacer.style = 'flex: 1;';
  4013.  
  4014.         // Save, Reset, and Cancel Buttons
  4015.         const buttonContainerSettings = document.createElement('div');
  4016.         buttonContainerSettings.classList.add('button-container-settings');
  4017.  
  4018.         const saveButton = document.createElement('button');
  4019.         saveButton.type = 'button';
  4020.         saveButton.innerText = 'Save';
  4021.         saveButton.classList.add('btn-style-settings');
  4022.         saveButton.onclick = saveSettings;
  4023.  
  4024.         const resetButton = document.createElement('button');
  4025.         resetButton.type = 'button';
  4026.         resetButton.innerText = 'Reset to Default';
  4027.         resetButton.classList.add('btn-style-settings');
  4028.         resetButton.onclick = async () => {
  4029.             const userConfirmed = window.confirm("All settings will be reset to their default values.");
  4030.             if (!userConfirmed) { return; }
  4031.  
  4032.             try {
  4033.                 USER_CONFIG = { ...DEFAULT_CONFIG };
  4034.                 await GM.setValue('USER_CONFIG', USER_CONFIG);
  4035.                 showNotification('Settings have been reset to default!');
  4036.                 document.getElementById('yt-transcript-settings-modal').style.display = 'none';
  4037.                 setTimeout(() => { location.reload(); }, 1000);
  4038.             } catch (error) {
  4039.                 showNotification('Error resetting settings to default!');
  4040.                 console.error("YouTubeAlchemy: Error resetting settings to default:", error);
  4041.             }
  4042.         };
  4043.  
  4044.         const cancelButton = document.createElement('button');
  4045.         cancelButton.type = 'button';
  4046.         cancelButton.innerText = 'Cancel';
  4047.         cancelButton.classList.add('btn-style-settings');
  4048.         cancelButton.onclick = () => { modal.style.display = 'none'; docBody.style.overflow = ''; };
  4049.  
  4050.         exportImportContainer.appendChild(exportButton);
  4051.         exportImportContainer.appendChild(importButton);
  4052.  
  4053.         buttonContainerSettings.appendChild(copyright);
  4054.         buttonContainerSettings.appendChild(spacer);
  4055.         buttonContainerSettings.appendChild(saveButton);
  4056.         buttonContainerSettings.appendChild(resetButton);
  4057.         buttonContainerSettings.appendChild(cancelButton);
  4058.  
  4059.         buttonContainer.appendChild(exportImportContainer);
  4060.         buttonContainer.appendChild(buttonContainerSettings);
  4061.  
  4062.         form.appendChild(buttonContainer);
  4063.         modalContent.appendChild(form);
  4064.         modal.appendChild(modalContent);
  4065.         docBody.appendChild(modal);
  4066.         docBody.style.overflow = 'hidden';
  4067.  
  4068.         // text area scroll on click
  4069.         let animationTriggered = false;
  4070.  
  4071.         document.querySelector('.chatgpt-prompt-textarea').addEventListener('click', function () {
  4072.             if (animationTriggered) return;
  4073.             animationTriggered = true;
  4074.  
  4075.             const modalContent = this.closest('#yt-transcript-settings-form');
  4076.             if (!modalContent) { animationTriggered = false; return; }
  4077.  
  4078.             const textArea = this;
  4079.             const buttons = modalContent.querySelector('.button-container-end');
  4080.             const startHeight = 65;
  4081.             const endHeight = 569;
  4082.             const duration = 700;
  4083.  
  4084.             const modalContentRect = modalContent.getBoundingClientRect();
  4085.             const textAreaRect = textArea.getBoundingClientRect();
  4086.             const buttonsRect = buttons.getBoundingClientRect();
  4087.  
  4088.             const textAreaTop = textAreaRect.top - modalContentRect.top + modalContent.scrollTop;
  4089.             const buttonsBottom = buttonsRect.bottom - modalContentRect.top + modalContent.scrollTop;
  4090.             const contentHeightAfterExpansion = buttonsBottom + (endHeight - startHeight);
  4091.             const modalVisibleHeight = modalContent.clientHeight;
  4092.             const contentWillFit = contentHeightAfterExpansion <= modalVisibleHeight;
  4093.             const maxScrollTop = textAreaTop;
  4094.  
  4095.             let desiredScrollTop;
  4096.  
  4097.             if (contentWillFit) { desiredScrollTop = contentHeightAfterExpansion - modalVisibleHeight;
  4098.             } else { desiredScrollTop = buttonsBottom + (endHeight - startHeight) - modalVisibleHeight; }
  4099.  
  4100.             const newScrollTop = Math.min(desiredScrollTop, maxScrollTop);
  4101.             const startScrollTop = modalContent.scrollTop;
  4102.             const scrollDistance = newScrollTop - startScrollTop;
  4103.             const startTime = performance.now();
  4104.  
  4105.             function animateScroll(currentTime) {
  4106.                 const elapsedTime = currentTime - startTime;
  4107.                 const progress = Math.min(elapsedTime / duration, 1);
  4108.  
  4109.                 const easeProgress = progress < 0.5
  4110.                     ? 2 * progress * progress
  4111.                     : -1 + (4 - 2 * progress) * progress;
  4112.  
  4113.                 const currentScrollTop = startScrollTop + scrollDistance * easeProgress;
  4114.                 modalContent.scrollTop = currentScrollTop;
  4115.  
  4116.                 if (progress < 1) { requestAnimationFrame(animateScroll);
  4117.                 } else { animationTriggered = false; }
  4118.             }
  4119.  
  4120.             requestAnimationFrame(animateScroll);
  4121.         });
  4122.  
  4123.         // close modal on overlay click
  4124.         function closeModalOverlayClickHandler(event) {
  4125.             const mainModal = document.getElementById('yt-transcript-settings-modal');
  4126.             const openSubPanel = document.querySelector('.sub-panel-overlay.active');
  4127.  
  4128.             if (openSubPanel && event.target === openSubPanel) {
  4129.               openSubPanel.classList.remove('active');
  4130.               return;
  4131.             }
  4132.  
  4133.             if (mainModal && event.target === mainModal) {
  4134.               mainModal.style.display = 'none';
  4135.               docBody.style.overflow = '';
  4136.               return;
  4137.             }
  4138.         }
  4139.         document.addEventListener('click', closeModalOverlayClickHandler);
  4140.  
  4141.         // close modal with ESC key
  4142.         const escKeyListener = function(event) {
  4143.             if (event.key === 'Escape' && event.type === 'keydown') {
  4144.                 const openSubPanel = document.querySelector('.sub-panel-overlay.active');
  4145.  
  4146.                 if (openSubPanel) {
  4147.                     openSubPanel.classList.remove('active');
  4148.                 } else {
  4149.                     const modal = document.getElementById('yt-transcript-settings-modal');
  4150.                     if (modal) {
  4151.                         modal.style.display = 'none';
  4152.                         docBody.style.overflow = '';
  4153.                     }
  4154.                 }
  4155.             }
  4156.         };
  4157.  
  4158.         window.addEventListener('keydown', escKeyListener);
  4159.  
  4160.         document.addEventListener('yt-navigate-start', () => {
  4161.             window.removeEventListener('keydown', escKeyListener);
  4162.             document.removeEventListener('click', closeModalOverlayClickHandler);
  4163.         });
  4164.  
  4165.         // sub-panels
  4166.         function showSubPanel(panelContent, panelId) {
  4167.             let subPanelOverlay = document.querySelector(`.sub-panel-overlay[data-panel-id="${panelId}"]`);
  4168.  
  4169.             if (!subPanelOverlay){
  4170.                 subPanelOverlay = document.createElement('div');
  4171.                 subPanelOverlay.classList.add('sub-panel-overlay');
  4172.                 subPanelOverlay.setAttribute('data-panel-id', panelId);
  4173.  
  4174.                 const subPanel = document.createElement('div');
  4175.                 subPanel.classList.add('sub-panel');
  4176.  
  4177.                 const closeButton = document.createElement('button');
  4178.                 closeButton.type = 'button';
  4179.                 closeButton.innerText = 'Close';
  4180.                 closeButton.classList.add('btn-style-settings');
  4181.                 closeButton.onclick = () => { subPanelOverlay.classList.remove('active'); };
  4182.                 subPanel.appendChild(closeButton);
  4183.  
  4184.                 if (panelContent) { subPanel.appendChild(panelContent); }
  4185.  
  4186.                 subPanelOverlay.appendChild(subPanel);
  4187.                 docBody.appendChild(subPanelOverlay);
  4188.             }
  4189.             subPanelOverlay.classList.add('active');
  4190.         }
  4191.  
  4192.         // links in header
  4193.         function createLinksInHeaderContent() {
  4194.             const form = document.createElement('form');
  4195.             form.id = 'links-in-header-form';
  4196.  
  4197.             const subPanelHeader = document.createElement('div');
  4198.             subPanelHeader.classList.add('sub-panel-header');
  4199.             subPanelHeader.textContent = 'Configure Links in Header';
  4200.             form.appendChild(subPanelHeader);
  4201.  
  4202.             const infoLinksHeader = document.createElement('small');
  4203.             infoLinksHeader.innerText = "Up to ten links can be added next to the YouTube logo. An empty 'Link Text' field won't insert the link into the header.\nIf the navigation bar is hidden, a replacement icon will prepend the links, while retaining the default functionality of opening and closing the sidebar.";
  4204.             infoLinksHeader.classList.add('CentAnni-info-text');
  4205.             form.appendChild(infoLinksHeader);
  4206.  
  4207.             const sidebarContainer = document.createElement('div');
  4208.             sidebarContainer.classList.add('sidebar-container');
  4209.  
  4210.             // hide left navigation bar and replacement icon
  4211.             const checkboxField = createCheckboxField('Hide Navigation Bar', 'mButtonDisplay', USER_CONFIG.mButtonDisplay);
  4212.             sidebarContainer.appendChild(checkboxField);
  4213.  
  4214.             const inputField = createInputField('Navigation Bar Replacement Icon', 'mButtonText', USER_CONFIG.mButtonText, 'label-mButtonText');
  4215.             sidebarContainer.appendChild(inputField);
  4216.  
  4217.             form.appendChild(sidebarContainer);
  4218.  
  4219.             // function to create a link input group
  4220.             function createButtonInputGroup(linkNumber) {
  4221.                 const container = document.createElement('div');
  4222.                 container.classList.add('links-header-container');
  4223.  
  4224.                 // link text
  4225.                 const textField = createInputField(`Link ${linkNumber} Text`, `buttonLeft${linkNumber}Text`, USER_CONFIG[`buttonLeft${linkNumber}Text`], `label-buttonLeft${linkNumber}Text`);
  4226.                 container.appendChild(textField);
  4227.  
  4228.                 // link URL
  4229.                 const urlField = createInputField(`Link ${linkNumber} URL`, `buttonLeft${linkNumber}Url`, USER_CONFIG[`buttonLeft${linkNumber}Url`], `label-buttonLeft${linkNumber}Url`);
  4230.                 container.appendChild(urlField);
  4231.  
  4232.                 return container;
  4233.             }
  4234.  
  4235.             // create input groups for links 1 through 6
  4236.             for (let i = 1; i <= 10; i++) {
  4237.                 form.appendChild(createButtonInputGroup(i));
  4238.             }
  4239.  
  4240.             return form;
  4241.         }
  4242.  
  4243.         // custom css
  4244.         function createCustomCSSContent() {
  4245.             const form = document.createElement('form');
  4246.             form.id = 'custom-css-form';
  4247.  
  4248.             const subPanelHeader = document.createElement('div');
  4249.             subPanelHeader.classList.add('sub-panel-header');
  4250.             subPanelHeader.textContent = 'Customize YouTube Appearance and Manage Features';
  4251.             form.appendChild(subPanelHeader);
  4252.  
  4253.             // general
  4254.             const general = document.createElement('label');
  4255.             general.innerText = 'General';
  4256.             general.classList.add('button-icons', 'features-text');
  4257.             form.appendChild(general);
  4258.  
  4259.             // dim watched videos
  4260.             const videosWatchedContainer = createSliderInputField( 'Change Opacity of Watched Videos (default 0.5):', 'videosWatchedOpacity', USER_CONFIG.videosWatchedOpacity, '0', '1', '0.1' );
  4261.             form.appendChild(videosWatchedContainer);
  4262.  
  4263.             // title text transform
  4264.             form.appendChild(createSelectField('Title Case:', 'label-Text-Transform', 'textTransform', USER_CONFIG.textTransform, {
  4265.                 'uppercase': 'uppercase - THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.',
  4266.                 'lowercase': 'lowercase - the quick brown fox jumps over the lazy dog.',
  4267.                 'capitalize': 'capitalize - The Quick Brown Fox Jumps Over The Lazy Dog.',
  4268.                 'normal-case': 'normal-case (default) - The quick brown fox jumps over the lazy dog.',
  4269.             }));
  4270.  
  4271.             // default video quality
  4272.             form.appendChild(createSelectField( 'Video Quality:', 'label-Video-Quality', 'defaultQuality', USER_CONFIG.defaultQuality, {
  4273.                 'auto': 'Auto (default)',
  4274.                 'highest': 'Highest Available',
  4275.                 'highres': '4320p - 8K',
  4276.                 'hd2160': '2160p - 4K',
  4277.                 'hd1440': '1440p - QHD',
  4278.                 'hd1080': '1080p - FHD',
  4279.                 'hd720': '720p - HD',
  4280.                 'large': '480p',
  4281.                 'medium': '360p',
  4282.                 'small': '240p',
  4283.                 'tiny': '144p',
  4284.                 'lowest': 'Lowest Available'
  4285.             }));
  4286.  
  4287.             // default audio language
  4288.             form.appendChild(createSelectField( 'Audio Language:', 'label-audio-language', 'defaultAudioLanguage', USER_CONFIG.defaultAudioLanguage, labeledLangs(false)));
  4289.  
  4290.             // default subtitle language
  4291.             form.appendChild(createSelectField( 'Subtitle Language:', 'label-subtitle-language', 'defaultSubtitleLanguage', USER_CONFIG.defaultSubtitleLanguage, labeledLangs(true)));
  4292.  
  4293.             // default transcript language
  4294.             form.appendChild(createSelectField( 'Transcript Language:', 'label-transcript-language', 'defaultTranscriptLanguage', USER_CONFIG.defaultTranscriptLanguage, labeledLangs(false)));
  4295.  
  4296.             // font size
  4297.             const defaultFontSizeField = createNumberInputField('Set Font Size (default: 10)', 'defaultFontSize', USER_CONFIG.defaultFontSize);
  4298.             form.appendChild(defaultFontSizeField);
  4299.  
  4300.             // videos per row
  4301.             const videosPerRow = createNumberInputField("Number of Videos per Row (default: 0 | dynamic based on available space)", 'videosPerRow', USER_CONFIG.videosPerRow);
  4302.             form.appendChild(videosPerRow);
  4303.  
  4304.             // playback speed
  4305.             const playbackSpeedContainer = document.createElement('div');
  4306.             playbackSpeedContainer.className = 'playback-speed-container';
  4307.  
  4308.             const playbackSpeed = createCheckboxField('Enabled (default: yes)\nkey toggles: A: -0.25x | S: toggle 1x/set speed | D: +0.25x', 'playbackSpeed', USER_CONFIG.playbackSpeed);
  4309.             const playbackSpeedValue = createNumberInputField('Set Playback Speed for VODs\n(defaults to 1x for live videos)', 'playbackSpeedValue', USER_CONFIG.playbackSpeedValue);
  4310.  
  4311.             playbackSpeedContainer.appendChild(playbackSpeedValue);
  4312.             playbackSpeedContainer.appendChild(playbackSpeed);
  4313.             form.appendChild(playbackSpeedContainer);
  4314.  
  4315.             // features
  4316.             const features = document.createElement('label');
  4317.             features.innerText = 'Features';
  4318.             features.classList.add('button-icons', 'features-text');
  4319.             form.appendChild(features);
  4320.  
  4321.             // auto theater mode
  4322.             const autoTheaterMode = createCheckboxField('Auto Theater Mode (default: no)', 'autoTheaterMode', USER_CONFIG.autoTheaterMode);
  4323.             form.appendChild(autoTheaterMode);
  4324.  
  4325.             // prevent autoplay
  4326.             const preventAutoplay = createCheckboxField('Prevent Autoplay (default: no)', 'preventAutoplay', USER_CONFIG.preventAutoplay);
  4327.             form.appendChild(preventAutoplay);
  4328.  
  4329.             // disable play on hover
  4330.             const disablePlayOnHover = createCheckboxField('Disable Play on Hover (default: no)', 'disablePlayOnHover', USER_CONFIG.disablePlayOnHover);
  4331.             form.appendChild(disablePlayOnHover);
  4332.  
  4333.             // sort notifications chronologically
  4334.             const chronologicalNotifications = createCheckboxField('Sort Notifications Chronologically (default: yes)', 'chronologicalNotifications', USER_CONFIG.chronologicalNotifications);
  4335.             form.appendChild(chronologicalNotifications);
  4336.  
  4337.             // close chat window
  4338.             const closeChatWindow = createCheckboxField('Auto Close Initial Chat Windows (default: no)', 'closeChatWindow', USER_CONFIG.closeChatWindow);
  4339.             form.appendChild(closeChatWindow);
  4340.  
  4341.             // channel default videos page
  4342.             const channelReindirizzare = createCheckboxField('"Videos" Tab as Default on Channel Page (default: no)', 'channelReindirizzare', USER_CONFIG.channelReindirizzare);
  4343.             form.appendChild(channelReindirizzare);
  4344.  
  4345.             // rss feed button on channel page
  4346.             const channelRSSBtn = createCheckboxField('Add RSS Feed Button to Channel Pages (default: no)', 'channelRSSBtn', USER_CONFIG.channelRSSBtn);
  4347.             form.appendChild(channelRSSBtn);
  4348.  
  4349.             // playlist button on channel page
  4350.             const channelPlaylistBtn = createCheckboxField('Add Playlist Buttons to Channel Pages (default: no)', 'channelPlaylistBtn', USER_CONFIG.channelPlaylistBtn);
  4351.             form.appendChild(channelPlaylistBtn);
  4352.  
  4353.             // playlist direction buttons in playlist panel
  4354.             const playlistDirectionBtns = createCheckboxField('Add Direction Buttons to Playlist Panels (default: yes)', 'playlistDirectionBtns', USER_CONFIG.playlistDirectionBtns);
  4355.             form.appendChild(playlistDirectionBtns);
  4356.  
  4357.             // open playlist videos without being in a playlist
  4358.             const playlistLinks = createCheckboxField('Open Playlist Videos Without Being in a Playlist When Clicking the Thumbnail or Title (default: no)', 'playlistLinks', USER_CONFIG.playlistLinks);
  4359.             form.appendChild(playlistLinks);
  4360.  
  4361.             // channel default videos page
  4362.             const playlistTrashCan = createCheckboxField('Show Trash Can Icon on Owned Playlists to Quickly Remove Videos (default: no)', 'playlistTrashCan', USER_CONFIG.playlistTrashCan);
  4363.             form.appendChild(playlistTrashCan);
  4364.  
  4365.             // sort comments new first
  4366.             const commentsNewFirst = createCheckboxField('Sort Comments to "Newest First" (default: no)', 'commentsNewFirst', USER_CONFIG.commentsNewFirst);
  4367.             form.appendChild(commentsNewFirst);
  4368.  
  4369.             // auto open chapter panel
  4370.             const autoOpenChapters = createCheckboxField('Automatically Open Chapter Panels (default: yes)', 'autoOpenChapters', USER_CONFIG.autoOpenChapters);
  4371.             form.appendChild(autoOpenChapters);
  4372.  
  4373.             // auto open transcript panel
  4374.             const autoOpenTranscript = createCheckboxField('Automatically Open Transcript Panels (default: no)', 'autoOpenTranscript', USER_CONFIG.autoOpenTranscript);
  4375.             form.appendChild(autoOpenTranscript);
  4376.  
  4377.             // enable transcript timestamps
  4378.             const transcriptTimestamps = createCheckboxField('Automatically Enable Timestamps in Transcript Panels (default: no)', 'transcriptTimestamps', USER_CONFIG.transcriptTimestamps);
  4379.             form.appendChild(transcriptTimestamps);
  4380.  
  4381.             // 1x playback speed for music videos
  4382.             const VerifiedArtist = createCheckboxField('Maintain 1x Playback Speed for Verified Artist Music Videos (default: no)', 'VerifiedArtist', USER_CONFIG.VerifiedArtist);
  4383.             form.appendChild(VerifiedArtist);
  4384.  
  4385.             // 1080p enhanced bitrate
  4386.             const defaultQualityPremium = createCheckboxField('Use Enhanced Bitrate for 1080p Videos | Premium Required! (default: no)', 'defaultQualityPremium', USER_CONFIG.defaultQualityPremium);
  4387.             form.appendChild(defaultQualityPremium);
  4388.  
  4389.             // persistent progress bar
  4390.             const progressBar = createCheckboxField('Persistent Progress Bar with Chapter Markers and SponsorBlock Support (default: yes)', 'progressBar', USER_CONFIG.progressBar);
  4391.             form.appendChild(progressBar);
  4392.  
  4393.             // display remaining time minus SponsorBlock segments
  4394.             const displayRemainingTime = createCheckboxField('Display Remaining Time Under Videos Adjusted for Playback Speed (default: yes)', 'displayRemainingTime', USER_CONFIG.displayRemainingTime);
  4395.             form.appendChild(displayRemainingTime);
  4396.  
  4397.             // info for remaining time minus segments beta
  4398.             const descriptionRemainingTimeBeta = document.createElement('small');
  4399.             descriptionRemainingTimeBeta.innerText = 'To also include Skipped SponsorBlock Segments, ensure "Show time with skips removed" is enabled in SponsorBlock Settings under "Interface."';
  4400.             descriptionRemainingTimeBeta.classList.add('CentAnni-info-text');
  4401.             form.appendChild(descriptionRemainingTimeBeta);
  4402.  
  4403.             // layout changes
  4404.             const layoutChanges = document.createElement('label');
  4405.             layoutChanges.innerText = 'Layout Changes';
  4406.             layoutChanges.classList.add('button-icons', 'features-text');
  4407.             form.appendChild(layoutChanges);
  4408.  
  4409.             // tab view on video page
  4410.             const videoTabView = createCheckboxField('Tab View on Video Page (default: yes)', 'videoTabView', USER_CONFIG.videoTabView);
  4411.             form.appendChild(videoTabView);
  4412.  
  4413.             // show chapters - only in tab view
  4414.             const tabViewChapters = createCheckboxField('Show Chapters Under Videos | Only Works with Tab View Enabled! (default: yes)', 'tabViewChapters', USER_CONFIG.tabViewChapters);
  4415.             form.appendChild(tabViewChapters);
  4416.  
  4417.             // hide comment section
  4418.             const hideCommentsSection = createCheckboxField('Hide Comments Section (default: no)', 'hideCommentsSection', USER_CONFIG.hideCommentsSection);
  4419.             form.appendChild(hideCommentsSection);
  4420.  
  4421.             // hide related video section
  4422.             const hideVideosSection = createCheckboxField('Hide Suggested Videos (default: no)', 'hideVideosSection', USER_CONFIG.hideVideosSection);
  4423.             form.appendChild(hideVideosSection);
  4424.  
  4425.             // square and compact search bar
  4426.             const squareSearchBar = createCheckboxField('Square and Compact Search Bar (default: no)', 'squareSearchBar', USER_CONFIG.squareSearchBar);
  4427.             form.appendChild(squareSearchBar);
  4428.  
  4429.             // square design
  4430.             const squareDesign = createCheckboxField('Square Design (default: no)', 'squareDesign', USER_CONFIG.squareDesign);
  4431.             form.appendChild(squareDesign);
  4432.  
  4433.             // square avatars
  4434.             const squareAvatars = createCheckboxField('Square Avatars (default: no)', 'squareAvatars', USER_CONFIG.squareAvatars);
  4435.             form.appendChild(squareAvatars);
  4436.  
  4437.             // compact layout
  4438.             const compactLayout = createCheckboxField('Compact Layout (default: no)', 'compactLayout', USER_CONFIG.compactLayout);
  4439.             form.appendChild(compactLayout);
  4440.  
  4441.             // disable ambient mode
  4442.             const noAmbientMode = createCheckboxField('Disable Ambient Mode (default: no)', 'noAmbientMode', USER_CONFIG.noAmbientMode);
  4443.             form.appendChild(noAmbientMode);
  4444.  
  4445.             // hide shorts
  4446.             const hideShorts = createCheckboxField('Hide Shorts (default: no)', 'hideShorts', USER_CONFIG.hideShorts);
  4447.             form.appendChild(hideShorts);
  4448.  
  4449.             // redirect shorts
  4450.             const redirectShorts = createCheckboxField('Redirect Shorts to Standard Video Pages (default: no)', 'redirectShorts', USER_CONFIG.redirectShorts);
  4451.             form.appendChild(redirectShorts);
  4452.  
  4453.             // hide ad slot
  4454.             const hideAdSlots = createCheckboxField('Hide Ad Slots on the Home Page (default: no)', 'hideAdSlots', USER_CONFIG.hideAdSlots);
  4455.             form.appendChild(hideAdSlots);
  4456.  
  4457.             // hide pay to watch
  4458.             const hidePayToWatch = createCheckboxField('Hide "Pay to Watch" Featured Videos on the Home Page (default: no)', 'hidePayToWatch', USER_CONFIG.hidePayToWatch);
  4459.             form.appendChild(hidePayToWatch);
  4460.  
  4461.             // hide free with ads
  4462.             const hideFreeWithAds = createCheckboxField('Hide "Free with ads" Videos on the Home Page (default: no)', 'hideFreeWithAds', USER_CONFIG.hideFreeWithAds);
  4463.             form.appendChild(hideFreeWithAds);
  4464.  
  4465.             // hide members only
  4466.             const hideMembersOnly = createCheckboxField('Hide Members Only Featured Videos on the Home Page (default: no)', 'hideMembersOnly', USER_CONFIG.hideMembersOnly);
  4467.             form.appendChild(hideMembersOnly);
  4468.  
  4469.             // hide latest post from . . .
  4470.             const hideLatestPosts = createCheckboxField('Hide "Latest posts from . . ." on Search Page (default: no)', 'hideLatestPosts', USER_CONFIG.hideLatestPosts);
  4471.             form.appendChild(hideLatestPosts);
  4472.  
  4473.             // modify or hide ui elements
  4474.             const uielements = document.createElement('label');
  4475.             uielements.innerText = 'Modify or Hide UI Elements';
  4476.             uielements.classList.add('button-icons', 'features-text');
  4477.             form.appendChild(uielements);
  4478.  
  4479.             // hide voice search button
  4480.             const hideVoiceSearch = createCheckboxField('Hide "Voice Search" Button (default: no)', 'hideVoiceSearch', USER_CONFIG.hideVoiceSearch);
  4481.             form.appendChild(hideVoiceSearch);
  4482.  
  4483.             // hide create button
  4484.             const hideCreateButton = createCheckboxField('Hide "Create" Button (default: no)', 'hideCreateButton', USER_CONFIG.hideCreateButton);
  4485.             form.appendChild(hideCreateButton);
  4486.  
  4487.             // hide notification button
  4488.             const hideNotificationBtn = createCheckboxField('Hide "Notification" Button (default: no)', 'hideNotificationBtn', USER_CONFIG.hideNotificationBtn);
  4489.             form.appendChild(hideNotificationBtn);
  4490.  
  4491.             // hide notification count
  4492.             const hideNotificationBadge = createCheckboxField('Hide Notification Badge (default: no)', 'hideNotificationBadge', USER_CONFIG.hideNotificationBadge);
  4493.             form.appendChild(hideNotificationBadge);
  4494.  
  4495.             // hide avatar
  4496.             const hideOwnAvatar = createCheckboxField('Hide Own Avatar in the Header (default: no)', 'hideOwnAvatar', USER_CONFIG.hideOwnAvatar);
  4497.             form.appendChild(hideOwnAvatar);
  4498.  
  4499.             // hide YouTube brand text within the header
  4500.             const hideBrandText = createCheckboxField('Hide YouTube Brand Text in the Header (default: no)', 'hideBrandText', USER_CONFIG.hideBrandText);
  4501.             form.appendChild(hideBrandText);
  4502.  
  4503.             // color picker country code - toggle | color picker
  4504.             const visibleCountryCodeColor = document.createElement('div');
  4505.             visibleCountryCodeColor.classList.add('videos-colorpicker-container', 'selection-color-container');
  4506.  
  4507.             const visibleCountryCode = createCheckboxField('Keep Country Code Visible When Hiding Brand Text (default: no)', 'visibleCountryCode', USER_CONFIG.visibleCountryCode);
  4508.             visibleCountryCodeColor.appendChild(visibleCountryCode);
  4509.  
  4510.             const visibleCountryCodePicker = createColorPicker('Country Code Text Color', 'visibleCountryCodeColor');
  4511.             visibleCountryCodeColor.appendChild(visibleCountryCodePicker);
  4512.  
  4513.             form.appendChild(visibleCountryCodeColor);
  4514.  
  4515.             // small subscribed button
  4516.             const smallSubscribeButton = createCheckboxField('Small Subscribed Button Under a Video—Displays Only the Notification Icon (default: no)', 'smallSubscribeButton', USER_CONFIG.smallSubscribeButton);
  4517.             form.appendChild(smallSubscribeButton);
  4518.  
  4519.             // hide join button
  4520.             const hideJoinButton = createCheckboxField('Hide Join Button under a Videos and on Channel Pages (default: no)', 'hideJoinButton', USER_CONFIG.hideJoinButton);
  4521.             form.appendChild(hideJoinButton);
  4522.  
  4523.             // display full title
  4524.             const displayFullTitle = createCheckboxField('Display Full Titles (default: yes)', 'displayFullTitle', USER_CONFIG.displayFullTitle);
  4525.             form.appendChild(displayFullTitle);
  4526.  
  4527.             // custom selection color - toggle | light mode | dark mode
  4528.             const selectionColorContainer = document.createElement('div');
  4529.             selectionColorContainer.classList.add('videos-colorpicker-container', 'selection-color-container');
  4530.  
  4531.             const selectionColor = createCheckboxField('Custom Selection Color (default: yes)', 'selectionColor', USER_CONFIG.selectionColor);
  4532.             selectionColorContainer.appendChild(selectionColor);
  4533.  
  4534.             const lightModeColorPicker = createColorPicker('Light Mode', 'lightModeSelectionColor');
  4535.             selectionColorContainer.appendChild(lightModeColorPicker);
  4536.  
  4537.             const darkModeColorPicker = createColorPicker('Dark Mode', 'darkModeSelectionColor');
  4538.             selectionColorContainer.appendChild(darkModeColorPicker);
  4539.  
  4540.             form.appendChild(selectionColorContainer);
  4541.  
  4542.             // color picker progress bar - toggle | color picker
  4543.             const progressbarColorPicker = document.createElement('div');
  4544.             progressbarColorPicker.classList.add('videos-colorpicker-container', 'selection-color-container');
  4545.  
  4546.             const playProgressColor = createCheckboxField('Custom Color for on Hover Progress Bar (default: no)', 'playProgressColor', USER_CONFIG.playProgressColor);
  4547.             progressbarColorPicker.appendChild(playProgressColor);
  4548.  
  4549.             const progressbarColorPickerColor = createColorPicker('Progress Bar Color', 'progressbarColorPicker');
  4550.             progressbarColorPicker.appendChild(progressbarColorPickerColor);
  4551.  
  4552.             form.appendChild(progressbarColorPicker);
  4553.  
  4554.             // pure b/w bg
  4555.             const pureBWBackground = createCheckboxField('Pure Black-and-White Background (default: yes)', 'pureBWBackground', USER_CONFIG.pureBWBackground);
  4556.             form.appendChild(pureBWBackground);
  4557.  
  4558.             // no frosted glass
  4559.             const noFrostedGlass = createCheckboxField('No Frosted Glass Effect (default: no)', 'noFrostedGlass', USER_CONFIG.noFrostedGlass);
  4560.             form.appendChild(noFrostedGlass);
  4561.  
  4562.             // hide video scrubber
  4563.             const removeScrubber = createCheckboxField('Hide Video Scrubber (default: no)', 'removeScrubber', USER_CONFIG.removeScrubber);
  4564.             form.appendChild(removeScrubber);
  4565.  
  4566.             // hide video end cards
  4567.             const hideEndCards = createCheckboxField('Hide Video End Cards (default: no)', 'hideEndCards', USER_CONFIG.hideEndCards);
  4568.             form.appendChild(hideEndCards);
  4569.  
  4570.             // hide end screens
  4571.             const hideEndscreen = createCheckboxField('Hide End Screens (default: no)', 'hideEndscreen', USER_CONFIG.hideEndscreen);
  4572.             form.appendChild(hideEndscreen);
  4573.  
  4574.             // bottom gradient lower height and different bg image
  4575.             const gradientBottom = createCheckboxField('Less Intrusive Bottom Gradient (default: yes)', 'gradientBottom', USER_CONFIG.gradientBottom);
  4576.             form.appendChild(gradientBottom);
  4577.  
  4578.             // hide play next button
  4579.             const hidePlayNextButton = createCheckboxField('Hide "Play Next" Button (default: no)', 'hidePlayNextButton', USER_CONFIG.hidePlayNextButton);
  4580.             form.appendChild(hidePlayNextButton);
  4581.  
  4582.             // hide airplay button
  4583.             const hideAirplayButton = createCheckboxField('Hide "Airplay" Button (default: no)', 'hideAirplayButton', USER_CONFIG.hideAirplayButton);
  4584.             form.appendChild(hideAirplayButton);
  4585.  
  4586.             // hide share button
  4587.             const hideShareButton = createCheckboxField('Hide Share Button Under a Videos (default: no)', 'hideShareButton', USER_CONFIG.hideShareButton);
  4588.             form.appendChild(hideShareButton);
  4589.  
  4590.             // hide hashtags under video
  4591.             const hideHashtags = createCheckboxField('Hide Hashtags Under Videos (default: no)', 'hideHashtags', USER_CONFIG.hideHashtags);
  4592.             form.appendChild(hideHashtags);
  4593.  
  4594.             // hide blue info panel under video
  4595.             const hideInfoPanel = createCheckboxField('Hide Blue Info Panels (default: no)', 'hideInfoPanel', USER_CONFIG.hideInfoPanel);
  4596.             form.appendChild(hideInfoPanel);
  4597.  
  4598.             // hide add comment
  4599.             const hideAddComment = createCheckboxField('Hide "Add Comment" Textfield (default: no)', 'hideAddComment', USER_CONFIG.hideAddComment);
  4600.             form.appendChild(hideAddComment);
  4601.  
  4602.             // hide reply comment button
  4603.             const hideReplyButton = createCheckboxField('Hide Comment "Reply" Button (default: no)', 'hideReplyButton', USER_CONFIG.hideReplyButton);
  4604.             form.appendChild(hideReplyButton);
  4605.  
  4606.             // hide news on home
  4607.             const hideNewsHome = createCheckboxField('Hide Breaking News on Home (default: no)', 'hideNewsHome', USER_CONFIG.hideNewsHome);
  4608.             form.appendChild(hideNewsHome);
  4609.  
  4610.             // hide playlists on home
  4611.             const hidePlaylistsHome = createCheckboxField('Hide Playlists on Home (default: no)', 'hidePlaylistsHome', USER_CONFIG.hidePlaylistsHome);
  4612.             form.appendChild(hidePlaylistsHome);
  4613.  
  4614.             // hide fundraiser
  4615.             const hideFundraiser = createCheckboxField('Hide Fundraiser Icons and Panels (default: no)', 'hideFundraiser', USER_CONFIG.hideFundraiser);
  4616.             form.appendChild(hideFundraiser);
  4617.  
  4618.             // hide mini player
  4619.             const hideMiniPlayer = createCheckboxField('Hide Mini Player (default: no)', 'hideMiniPlayer', USER_CONFIG.hideMiniPlayer);
  4620.             form.appendChild(hideMiniPlayer);
  4621.  
  4622.             // hide queue button
  4623.             const hideQueueBtn = createCheckboxField('Hide "Add to queue" Button on Hover (default: no)', 'hideQueueBtn', USER_CONFIG.hideQueueBtn);
  4624.             form.appendChild(hideQueueBtn);
  4625.  
  4626.             // hide right sidebar search
  4627.             const hideRightSidebarSearch = createCheckboxField('Hide Right Sidebar on Search Page (default: no)', 'hideRightSidebarSearch', USER_CONFIG.hideRightSidebarSearch);
  4628.             form.appendChild(hideRightSidebarSearch);
  4629.  
  4630.             // hide watched videos globally
  4631.             const videosHideWatchedGlobal = createCheckboxField('Hide Watched Videos Globally (default: no)', 'videosHideWatchedGlobal', USER_CONFIG.videosHideWatchedGlobal);
  4632.             form.appendChild(videosHideWatchedGlobal);
  4633.  
  4634.             // left navigation bar
  4635.             const leftnavbar = document.createElement('label');
  4636.             leftnavbar.innerText = 'Hide UI Elements in the Left Navigation Bar';
  4637.             leftnavbar.classList.add('button-icons', 'features-text');
  4638.             form.appendChild(leftnavbar);
  4639.  
  4640.             // hide home button
  4641.             const lnbHideHomeBtn = createCheckboxField('Hide "Home" Button (default: no)', 'lnbHideHomeBtn', USER_CONFIG.lnbHideHomeBtn);
  4642.             form.appendChild(lnbHideHomeBtn);
  4643.  
  4644.             // hide subscriptions button
  4645.             const lnbHideSubscriptionsBtn = createCheckboxField('Hide "Subscriptions" Button (default: no)', 'lnbHideSubscriptionsBtn', USER_CONFIG.lnbHideSubscriptionsBtn);
  4646.             form.appendChild(lnbHideSubscriptionsBtn);
  4647.  
  4648.             // Spacer-5
  4649.             const spacer5Home = document.createElement('div');
  4650.             spacer5Home.classList.add('spacer-5');
  4651.             form.appendChild(spacer5Home);
  4652.  
  4653.             // hide you button
  4654.             const lnbHideYouBtn = createCheckboxField('Hide "You" Button (default: no)', 'lnbHideYouBtn', USER_CONFIG.lnbHideYouBtn);
  4655.             form.appendChild(lnbHideYouBtn);
  4656.  
  4657.             // hide history button
  4658.             const lnbHideHistoryBtn = createCheckboxField('Hide "History" Button (default: no)', 'lnbHideHistoryBtn', USER_CONFIG.lnbHideHistoryBtn);
  4659.             form.appendChild(lnbHideHistoryBtn);
  4660.  
  4661.             // hide playlists button
  4662.             const lnbHidePlaylistsBtn = createCheckboxField('Hide "Playlists" Button (default: no)', 'lnbHidePlaylistsBtn', USER_CONFIG.lnbHidePlaylistsBtn);
  4663.             form.appendChild(lnbHidePlaylistsBtn);
  4664.  
  4665.             // hide videos button
  4666.             const lnbHideVideosBtn = createCheckboxField('Hide "Your Videos" Button (default: no)', 'lnbHideVideosBtn', USER_CONFIG.lnbHideVideosBtn);
  4667.             form.appendChild(lnbHideVideosBtn);
  4668.  
  4669.             // hide courses button
  4670.             const lnbHideCoursesBtn = createCheckboxField('Hide "Your Courses" Button (default: no)', 'lnbHideCoursesBtn', USER_CONFIG.lnbHideCoursesBtn);
  4671.             form.appendChild(lnbHideCoursesBtn);
  4672.  
  4673.             // hide your podcasts button
  4674.             const lnbHideYPodcastsBtn = createCheckboxField('Hide "Your Podcasts" Button (default: no)', 'lnbHideYPodcastsBtn', USER_CONFIG.lnbHideYPodcastsBtn);
  4675.             form.appendChild(lnbHideYPodcastsBtn);
  4676.  
  4677.             // hide watch later button
  4678.             const lnbHideWlBtn = createCheckboxField('Hide "Watch Later" Button (default: no)', 'lnbHideWlBtn', USER_CONFIG.lnbHideWlBtn);
  4679.             form.appendChild(lnbHideWlBtn);
  4680.  
  4681.             // hide liked videos button
  4682.             const lnbHideLikedVideosBtn = createCheckboxField('Hide "Liked Videos" Button (default: no)', 'lnbHideLikedVideosBtn', USER_CONFIG.lnbHideLikedVideosBtn);
  4683.             form.appendChild(lnbHideLikedVideosBtn);
  4684.  
  4685.             // Spacer-5
  4686.             const spacer5Subscriptions = document.createElement('div');
  4687.             spacer5Subscriptions.classList.add('spacer-5');
  4688.             form.appendChild(spacer5Subscriptions);
  4689.  
  4690.             // hide subscriptions section
  4691.             const lnbHideSubscriptionsSection = createCheckboxField('Hide "Subscriptions" Section (default: no)', 'lnbHideSubscriptionsSection', USER_CONFIG.lnbHideSubscriptionsSection);
  4692.             form.appendChild(lnbHideSubscriptionsSection);
  4693.  
  4694.             // hide subscriptions title
  4695.             const lnbHideSubscriptionsTitle = createCheckboxField('Hide "Subscriptions" Title (default: no)', 'lnbHideSubscriptionsTitle', USER_CONFIG.lnbHideSubscriptionsTitle);
  4696.             form.appendChild(lnbHideSubscriptionsTitle);
  4697.  
  4698.             // hide more button
  4699.             const lnbHideMoreBtn = createCheckboxField('Hide "Show More" Button (default: no)', 'lnbHideMoreBtn', USER_CONFIG.lnbHideMoreBtn);
  4700.             form.appendChild(lnbHideMoreBtn);
  4701.  
  4702.             // Spacer-5
  4703.             const spacer5Explore = document.createElement('div');
  4704.             spacer5Explore.classList.add('spacer-5');
  4705.             form.appendChild(spacer5Explore);
  4706.  
  4707.             // hide explore section
  4708.             const lnbHideExploreSection = createCheckboxField('Hide "Explore" Section (default: no)', 'lnbHideExploreSection', USER_CONFIG.lnbHideExploreSection);
  4709.             form.appendChild(lnbHideExploreSection);
  4710.  
  4711.             // hide explore title
  4712.             const lnbHideExploreTitle = createCheckboxField('Hide "Explore" Title (default: no)', 'lnbHideExploreTitle', USER_CONFIG.lnbHideExploreTitle);
  4713.             form.appendChild(lnbHideExploreTitle);
  4714.  
  4715.             // hide trending button
  4716.             const lnbHideTrendingBtn = createCheckboxField('Hide "Trending" Button (default: no)', 'lnbHideTrendingBtn', USER_CONFIG.lnbHideTrendingBtn);
  4717.             form.appendChild(lnbHideTrendingBtn);
  4718.  
  4719.             // hide music button
  4720.             const lnbHideMusicBtn = createCheckboxField('Hide "Music" Button (default: no)', 'lnbHideMusicBtn', USER_CONFIG.lnbHideMusicBtn);
  4721.             form.appendChild(lnbHideMusicBtn);
  4722.  
  4723.             // hide movies button
  4724.             const lnbHideMoviesBtn = createCheckboxField('Hide "Movies & TV" Button (default: no)', 'lnbHideMoviesBtn', USER_CONFIG.lnbHideMoviesBtn);
  4725.             form.appendChild(lnbHideMoviesBtn);
  4726.  
  4727.             // hide live button
  4728.             const lnbHideLiveBtn = createCheckboxField('Hide "Live" Button (default: no)', 'lnbHideLiveBtn', USER_CONFIG.lnbHideLiveBtn);
  4729.             form.appendChild(lnbHideLiveBtn);
  4730.  
  4731.             // hide gaming button
  4732.             const lnbHideGamingBtn = createCheckboxField('Hide "Gaming" Button (default: no)', 'lnbHideGamingBtn', USER_CONFIG.lnbHideGamingBtn);
  4733.             form.appendChild(lnbHideGamingBtn);
  4734.  
  4735.             // hide news button
  4736.             const lnbHideNewsBtn = createCheckboxField('Hide "News" Button (default: no)', 'lnbHideNewsBtn', USER_CONFIG.lnbHideNewsBtn);
  4737.             form.appendChild(lnbHideNewsBtn);
  4738.  
  4739.             // hide sports button
  4740.             const lnbHideSportsBtn = createCheckboxField('Hide "Sports" Button (default: no)', 'lnbHideSportsBtn', USER_CONFIG.lnbHideSportsBtn);
  4741.             form.appendChild(lnbHideSportsBtn);
  4742.  
  4743.             // hide learning button
  4744.             const lnbHideLearningBtn = createCheckboxField('Hide "Learning" Button (default: no)', 'lnbHideLearningBtn', USER_CONFIG.lnbHideLearningBtn);
  4745.             form.appendChild(lnbHideLearningBtn);
  4746.  
  4747.             // hide fashion & beauty button
  4748.             const lnbHideFashionBtn = createCheckboxField('Hide "Fashion & Beauty" Button (default: no)', 'lnbHideFashionBtn', USER_CONFIG.lnbHideFashionBtn);
  4749.             form.appendChild(lnbHideFashionBtn);
  4750.  
  4751.             // hide podcasts button
  4752.             const lnbHidePodcastsBtn = createCheckboxField('Hide "Podcasts" Button (default: no)', 'lnbHidePodcastsBtn', USER_CONFIG.lnbHidePodcastsBtn);
  4753.             form.appendChild(lnbHidePodcastsBtn);
  4754.  
  4755.             // Spacer-5
  4756.             const spacer5More = document.createElement('div');
  4757.             spacer5More.classList.add('spacer-5');
  4758.             form.appendChild(spacer5More);
  4759.  
  4760.             // hide more section
  4761.             const lnbHideMoreSection = createCheckboxField('Hide "More from YouTube" Section (default: no)', 'lnbHideMoreSection', USER_CONFIG.lnbHideMoreSection);
  4762.             form.appendChild(lnbHideMoreSection);
  4763.  
  4764.             // hide more title
  4765.             const lnbHideMoreTitle = createCheckboxField('Hide "More from YouTube" Title (default: no)', 'lnbHideMoreTitle', USER_CONFIG.lnbHideMoreTitle);
  4766.             form.appendChild(lnbHideMoreTitle);
  4767.  
  4768.             // hide youtube premium button
  4769.             const lnbHideYtPremiumBtn = createCheckboxField('Hide "YouTube Premium" Button (default: no)', 'lnbHideYtPremiumBtn', USER_CONFIG.lnbHideYtPremiumBtn);
  4770.             form.appendChild(lnbHideYtPremiumBtn);
  4771.  
  4772.             // hide youtube studio button
  4773.             const lnbHideYtStudioBtn = createCheckboxField('Hide "YouTube Studio" Button (default: no)', 'lnbHideYtStudioBtn', USER_CONFIG.lnbHideYtStudioBtn);
  4774.             form.appendChild(lnbHideYtStudioBtn);
  4775.  
  4776.             // hide youtube music button
  4777.             const lnbHideYtMusicBtn = createCheckboxField('Hide "YouTube Music" Button (default: no)', 'lnbHideYtMusicBtn', USER_CONFIG.lnbHideYtMusicBtn);
  4778.             form.appendChild(lnbHideYtMusicBtn);
  4779.  
  4780.             // hide youtube kids button
  4781.             const lnbHideYtKidsBtn = createCheckboxField('Hide "YouTube Kids" Button (default: no)', 'lnbHideYtKidsBtn', USER_CONFIG.lnbHideYtKidsBtn);
  4782.             form.appendChild(lnbHideYtKidsBtn);
  4783.  
  4784.             // Spacer-5
  4785.             const spacer5Penultimate = document.createElement('div');
  4786.             spacer5Penultimate.classList.add('spacer-5');
  4787.             form.appendChild(spacer5Penultimate);
  4788.  
  4789.             // hide penultimate section
  4790.             const lnbHidePenultimateSection = createCheckboxField('Hide Penultimate Section (default: no)', 'lnbHidePenultimateSection', USER_CONFIG.lnbHidePenultimateSection);
  4791.             form.appendChild(lnbHidePenultimateSection);
  4792.  
  4793.             // hide settings button
  4794.             const lnbHideSettingsBtn = createCheckboxField('Hide "Settings" Button (default: no)', 'lnbHideSettingsBtn', USER_CONFIG.lnbHideSettingsBtn);
  4795.             form.appendChild(lnbHideSettingsBtn);
  4796.  
  4797.             // hide report history button
  4798.             const lnbHideReportHistoryBtn = createCheckboxField('Hide "Report History" Button (default: no)', 'lnbHideReportHistoryBtn', USER_CONFIG.lnbHideReportHistoryBtn);
  4799.             form.appendChild(lnbHideReportHistoryBtn);
  4800.  
  4801.             // hide help button
  4802.             const lnbHideHelpBtn = createCheckboxField('Hide "Help" Button (default: no)', 'lnbHideHelpBtn', USER_CONFIG.lnbHideHelpBtn);
  4803.             form.appendChild(lnbHideHelpBtn);
  4804.  
  4805.             // hide feedback button
  4806.             const lnbHideFeedbackBtn = createCheckboxField('Hide "Send Feedback" Button (default: no)', 'lnbHideFeedbackBtn', USER_CONFIG.lnbHideFeedbackBtn);
  4807.             form.appendChild(lnbHideFeedbackBtn);
  4808.  
  4809.             // Spacer-5
  4810.             const spacer5Footer = document.createElement('div');
  4811.             spacer5Footer.classList.add('spacer-5');
  4812.             form.appendChild(spacer5Footer);
  4813.  
  4814.             // hide footer
  4815.             const lnbHideFooter = createCheckboxField('Hide Footer (default: no)', 'lnbHideFooter', USER_CONFIG.lnbHideFooter);
  4816.             form.appendChild(lnbHideFooter);
  4817.  
  4818.             return form;
  4819.         }
  4820.  
  4821.         // color code videos
  4822.         function createColorCodeVideosContent() {
  4823.             const form = document.createElement('form');
  4824.             form.id = 'color-code-videos-form';
  4825.  
  4826.             const subPanelHeader = document.createElement('div');
  4827.             subPanelHeader.classList.add('sub-panel-header');
  4828.             subPanelHeader.textContent = 'Configure Color Codes for Videos';
  4829.             form.appendChild(subPanelHeader);
  4830.  
  4831.             // on home page
  4832.             const colorCodeVideosOnHome = document.createElement('label');
  4833.             colorCodeVideosOnHome.innerText = 'Home Page';
  4834.             colorCodeVideosOnHome.classList.add('button-icons', 'features-text');
  4835.             form.appendChild(colorCodeVideosOnHome);
  4836.  
  4837.             const infoColorCodeVideosHome = document.createElement('small');
  4838.             infoColorCodeVideosHome.innerText = "These settings apply only to the Home page.";
  4839.             infoColorCodeVideosHome.classList.add('CentAnni-info-text');
  4840.             form.appendChild(infoColorCodeVideosHome);
  4841.  
  4842.             // activate color code videos on home
  4843.             const checkboxField = createCheckboxField('Color Code Videos Based on Age and Status (default: yes)', 'colorCodeVideosEnabled', USER_CONFIG.colorCodeVideosEnabled );
  4844.             form.appendChild(checkboxField);
  4845.  
  4846.             const checkboxFieldWatched = createCheckboxField('Hide Watched Videos—Only on Home (default: no)', 'videosHideWatched', USER_CONFIG.videosHideWatched );
  4847.             form.appendChild(checkboxFieldWatched);
  4848.  
  4849.             // opacity picker for old videos
  4850.             const videosOldContainer = createSliderInputField( 'Change Opacity of Videos Uploaded More than 1 Year Ago:', 'videosOldOpacity', USER_CONFIG.videosOldOpacity, '0', '1', '0.1' );
  4851.             form.appendChild(videosOldContainer);
  4852.  
  4853.             // color pickers for different video ages
  4854.             const videosAgeContainer = document.createElement('div');
  4855.             videosAgeContainer.classList.add('videos-colorpicker-container');
  4856.  
  4857.             function createLabelColorPair(labelText, configKey) {
  4858.                 const row = document.createElement('div');
  4859.                 row.classList.add('videos-colorpicker-row');
  4860.  
  4861.                 const label = document.createElement('span');
  4862.                 label.classList.add('label-style-settings');
  4863.                 label.innerText = labelText;
  4864.                 row.appendChild(label);
  4865.  
  4866.                 const colorPicker = document.createElement('input');
  4867.                 colorPicker.type = 'color';
  4868.                 colorPicker.value = USER_CONFIG[configKey];
  4869.                 colorPicker.name = configKey;
  4870.                 row.appendChild(colorPicker);
  4871.  
  4872.                 videosAgeContainer.appendChild(row);
  4873.             }
  4874.  
  4875.             createLabelColorPair('Videos Uploaded Within the Last 24 Hours:', 'videosAgeColorPickerNewly');
  4876.             createLabelColorPair('Videos Uploaded Within the Past Week:', 'videosAgeColorPickerRecent');
  4877.             createLabelColorPair('Videos Uploaded Within the Past Month:', 'videosAgeColorPickerLately');
  4878.             createLabelColorPair('Videos Uploaded Within 2 to 12 Months:', 'videosAgeColorPickerLatterly');
  4879.             createLabelColorPair('Videos Currently Live:', 'videosAgeColorPickerLive');
  4880.             createLabelColorPair('The Word “Streamed” from Videos That Were Live:', 'videosAgeColorPickerStreamed');
  4881.             createLabelColorPair('Scheduled Videos and Upcoming Live Streams:', 'videosAgeColorPickerUpcoming');
  4882.  
  4883.             form.appendChild(videosAgeContainer);
  4884.  
  4885.             // on subscriptions page
  4886.             const colorCodeVideosOnSubscriptions = document.createElement('label');
  4887.             colorCodeVideosOnSubscriptions.innerText = 'Subscriptions Page';
  4888.             colorCodeVideosOnSubscriptions.classList.add('button-icons', 'features-text');
  4889.             form.appendChild(colorCodeVideosOnSubscriptions);
  4890.  
  4891.             const infoColorCodeVideosSubscriptions = document.createElement('small');
  4892.             infoColorCodeVideosSubscriptions.innerText = "These settings apply only to the Subscriptions page.\nOn each visit, the newest uploaded video is saved, allowing subsequent visits to highlight and optionally auto-scroll to that video. On first page load, YouTube loads about 84 videos, so highlighting and scrolling apply within this limit.";
  4893.             infoColorCodeVideosSubscriptions.classList.add('CentAnni-info-text');
  4894.             form.appendChild(infoColorCodeVideosSubscriptions);
  4895.  
  4896.             // color picker last seen video
  4897.             const lastSeenVideoColor = document.createElement('div');
  4898.             lastSeenVideoColor.classList.add('videos-colorpicker-container');
  4899.  
  4900.             function createLabelLVColor(labelText, configKey) {
  4901.                 const row = document.createElement('div');
  4902.                 row.classList.add('videos-colorpicker-row');
  4903.  
  4904.                 const label = document.createElement('span');
  4905.                 label.classList.add('label-style-settings');
  4906.                 label.innerText = labelText;
  4907.                 row.appendChild(label);
  4908.  
  4909.                 const colorPicker = document.createElement('input');
  4910.                 colorPicker.type = 'color';
  4911.                 colorPicker.value = USER_CONFIG[configKey];
  4912.                 colorPicker.name = configKey;
  4913.                 row.appendChild(colorPicker);
  4914.  
  4915.                 lastSeenVideoColor.appendChild(row);
  4916.             }
  4917.  
  4918.             createLabelLVColor('Last Uploaded Video:', 'lastSeenVideoColor');
  4919.  
  4920.             form.appendChild(lastSeenVideoColor);
  4921.  
  4922.             // last seen video
  4923.             const lastSeenVideo = createCheckboxField('Color Code Last Uploaded Video (default: yes)', 'lastSeenVideo', USER_CONFIG.lastSeenVideo);
  4924.             form.appendChild(lastSeenVideo);
  4925.  
  4926.             // scroll to last seen video
  4927.             const lastSeenVideoScroll = createCheckboxField('Auto-Scroll to Last Uploaded Video (default: no)', 'lastSeenVideoScroll', USER_CONFIG.lastSeenVideoScroll);
  4928.             form.appendChild(lastSeenVideoScroll);
  4929.  
  4930.             return form;
  4931.         }
  4932.     }
  4933.  
  4934.     // helper function to create input fields
  4935.     function createInputField(labelText, settingKey, settingValue, labelClass) {
  4936.         const container = document.createElement('div');
  4937.         container.classList.add('url-container');
  4938.  
  4939.         const label = document.createElement('label');
  4940.         label.innerText = labelText;
  4941.         label.className = labelClass;
  4942.         label.classList.add('label-style-settings');
  4943.         container.appendChild(label);
  4944.  
  4945.         const input = document.createElement('input');
  4946.         const fieldInputClass = `input-field-${settingKey}`;
  4947.         input.type = 'text';
  4948.         input.name = settingKey;
  4949.         input.value = settingValue;
  4950.         input.classList.add('input-field-url');
  4951.         input.classList.add(fieldInputClass);
  4952.         container.appendChild(input);
  4953.  
  4954.         return container;
  4955.     }
  4956.  
  4957.     // helper function to create select fields
  4958.     function createSelectField(labelText, labelClass, settingKey, settingValue, options) {
  4959.         const container = document.createElement('div');
  4960.         container.classList.add('file-naming-container');
  4961.  
  4962.         const label = document.createElement('label');
  4963.         label.innerText = labelText;
  4964.         label.className = labelClass;
  4965.         label.classList.add('label-style-settings');
  4966.         container.appendChild(label);
  4967.  
  4968.         const select = document.createElement('div');
  4969.         select.classList.add('select-file-naming');
  4970.         select.innerText = options[settingValue];
  4971.         select.setAttribute('tabindex', '0');
  4972.         container.appendChild(select);
  4973.  
  4974.         const hiddenSelect = document.createElement('select');
  4975.         hiddenSelect.name = settingKey;
  4976.         hiddenSelect.classList.add('hidden-select');
  4977.         for (const [value, text] of Object.entries(options)) {
  4978.             const option = document.createElement('option');
  4979.             option.value = value;
  4980.             option.text = text;
  4981.             if (value === settingValue) {
  4982.                 option.selected = true;
  4983.             }
  4984.             hiddenSelect.appendChild(option);
  4985.         }
  4986.         container.appendChild(hiddenSelect);
  4987.  
  4988.         const dropdownList = document.createElement('div');
  4989.         dropdownList.classList.add('dropdown-list');
  4990.         container.appendChild(dropdownList);
  4991.  
  4992.         for (const [value, text] of Object.entries(options)) {
  4993.             const item = document.createElement('div');
  4994.             item.classList.add('dropdown-item');
  4995.             item.innerText = text;
  4996.             item.dataset.value = value;
  4997.  
  4998.             if (value === settingValue) { item.classList.add('dropdown-item-selected'); }
  4999.  
  5000.             item.addEventListener('click', () => {
  5001.                 const previouslySelected = dropdownList.querySelector('.dropdown-item-selected');
  5002.                 if (previouslySelected) {
  5003.                     previouslySelected.classList.remove('dropdown-item-selected');
  5004.                 }
  5005.  
  5006.                 item.classList.add('dropdown-item-selected');
  5007.                 select.innerText = text;
  5008.                 hiddenSelect.value = value;
  5009.                 dropdownList.classList.remove('show');
  5010.             });
  5011.  
  5012.             dropdownList.appendChild(item);
  5013.         }
  5014.  
  5015.         // open dropdown
  5016.         select.addEventListener('click', (event) => {
  5017.             event.stopPropagation();
  5018.             document.querySelectorAll('.dropdown-list.show').forEach(list => { if (list !== dropdownList) list.classList.remove('show'); });
  5019.             dropdownList.classList.toggle('show');
  5020.         });
  5021.  
  5022.         // close dropdown
  5023.         document.addEventListener('click', () => {
  5024.             dropdownList.classList.remove('show');
  5025.         });
  5026.  
  5027.         return container;
  5028.     }
  5029.  
  5030.     // helper function to create checkbox fields
  5031.     function createCheckboxField(labelText, settingKey, settingValue) {
  5032.         const container = document.createElement('div');
  5033.         container.classList.add('checkbox-container');
  5034.  
  5035.         const label = document.createElement('label');
  5036.         label.classList.add('checkbox-label');
  5037.  
  5038.         const checkbox = document.createElement('input');
  5039.         checkbox.type = 'checkbox';
  5040.         checkbox.name = settingKey;
  5041.         checkbox.checked = settingValue;
  5042.         checkbox.classList.add('checkbox-field');
  5043.         label.appendChild(checkbox);
  5044.  
  5045.         const span = document.createElement('span');
  5046.         span.innerText = labelText;
  5047.         label.appendChild(span);
  5048.  
  5049.         container.appendChild(label);
  5050.         return container;
  5051.     }
  5052.  
  5053.     // helper function to create a number input fields
  5054.     function createNumberInputField(labelText, settingKey, settingValue) {
  5055.         const container = document.createElement('div');
  5056.         container.classList.add('number-input-container');
  5057.  
  5058.         const label = document.createElement('label');
  5059.         label.classList.add('number-input-label');
  5060.  
  5061.         const numberInput = document.createElement('input');
  5062.         numberInput.type = 'number';
  5063.         numberInput.name = settingKey;
  5064.         numberInput.value = settingValue;
  5065.         numberInput.min = 1;
  5066.         numberInput.max = 20;
  5067.         numberInput.step = 1;
  5068.         numberInput.classList.add('number-input-field');
  5069.         label.appendChild(numberInput);
  5070.  
  5071.         const span = document.createElement('span');
  5072.         span.innerText = labelText;
  5073.         label.appendChild(span);
  5074.  
  5075.         container.appendChild(label);
  5076.         return container;
  5077.     }
  5078.  
  5079.     // helper function to create a slider fields
  5080.     function createSliderInputField(labelText, settingKey, settingValue, min, max, step) {
  5081.         const container = document.createElement('div');
  5082.         container.classList.add('videos-old-container');
  5083.  
  5084.         const label = document.createElement('span');
  5085.         label.classList.add('label-style-settings');
  5086.         label.innerText = labelText;
  5087.         container.appendChild(label);
  5088.  
  5089.         const sliderContainer = document.createElement('div');
  5090.         sliderContainer.classList.add('slider-container');
  5091.  
  5092.         const leftLabel = document.createElement('span');
  5093.         leftLabel.innerText = min;
  5094.         sliderContainer.appendChild(leftLabel);
  5095.  
  5096.         const slider = document.createElement('input');
  5097.         slider.type = 'range';
  5098.         slider.min = min;
  5099.         slider.max = max;
  5100.         slider.step = step;
  5101.         slider.value = settingValue;
  5102.         slider.name = settingKey;
  5103.         sliderContainer.appendChild(slider);
  5104.  
  5105.         const rightLabel = document.createElement('span');
  5106.         rightLabel.innerText = max;
  5107.         sliderContainer.appendChild(rightLabel);
  5108.  
  5109.         const currentValue = document.createElement('span');
  5110.         currentValue.innerText = `(${parseFloat(slider.value).toFixed(1)})`;
  5111.         sliderContainer.appendChild(currentValue);
  5112.  
  5113.         container.appendChild(sliderContainer);
  5114.  
  5115.         slider.addEventListener('input', (e) => {
  5116.             const value = parseFloat(e.target.value).toFixed(1);
  5117.             currentValue.innerText = `(${value})`;
  5118.         });
  5119.  
  5120.         return container;
  5121.     }
  5122.  
  5123.     // helper function to create a textarea fields
  5124.     function createTextareaField(labelText, settingKey, settingValue, labelClass) {
  5125.         const container = document.createElement('chatgpt-prompt');
  5126.  
  5127.         const label = document.createElement('label');
  5128.         label.innerText = labelText;
  5129.         label.className = labelClass;
  5130.         label.classList.add('label-style-settings');
  5131.         container.appendChild(label);
  5132.  
  5133.         const textarea = document.createElement('textarea');
  5134.         textarea.name = settingKey;
  5135.         textarea.value = settingValue;
  5136.         textarea.classList.add('chatgpt-prompt-textarea');
  5137.         container.appendChild(textarea);
  5138.  
  5139.         return container;
  5140.     }
  5141.  
  5142.     // helper function to create color pickers
  5143.     function createColorPicker(labelText, configKey) {
  5144.         const row = document.createElement('div');
  5145.         row.classList.add('videos-colorpicker-row');
  5146.  
  5147.         const colorPicker = document.createElement('input');
  5148.         colorPicker.type = 'color';
  5149.         colorPicker.value = USER_CONFIG[configKey];
  5150.         colorPicker.name = configKey;
  5151.         row.appendChild(colorPicker);
  5152.  
  5153.         const label = document.createElement('span');
  5154.         label.classList.add('label-style-settings');
  5155.         label.innerText = labelText;
  5156.         row.appendChild(label);
  5157.  
  5158.         return row;
  5159.     }
  5160.  
  5161.     // function to save settings
  5162.     async function saveSettings() {
  5163.         const form = document.getElementById('yt-transcript-settings-form');
  5164.         const subPanelLinks = document.getElementById('links-in-header-form');
  5165.         const subPanelCustomCSS = document.getElementById('custom-css-form');
  5166.         const subPanelColor = document.getElementById('color-code-videos-form');
  5167.  
  5168.         // function to ensure secure URLs
  5169.         function normalizeUrl(url) {
  5170.             url = url.trim();
  5171.             if (/^https?:\/\//i.test(url)) {
  5172.                 url = url.replace(/^http:\/\//i, 'https://');
  5173.             } else { url = 'https://' + url; }
  5174.             return url;
  5175.         }
  5176.  
  5177.         // validate ChatGPT URL
  5178.         let targetChatGPTUrl = form.elements.targetChatGPTUrl.value.trim();
  5179.         if (targetChatGPTUrl !== '') {
  5180.             USER_CONFIG.targetChatGPTUrl = normalizeUrl(targetChatGPTUrl);
  5181.         } else { delete USER_CONFIG.targetChatGPTUrl; }
  5182.  
  5183.         // validate NotebookLM URL
  5184.         let targetNotebookLMUrl = form.elements.targetNotebookLMUrl.value.trim();
  5185.         if (targetNotebookLMUrl !== '') {
  5186.             USER_CONFIG.targetNotebookLMUrl = normalizeUrl(targetNotebookLMUrl);
  5187.         } else { delete USER_CONFIG.targetNotebookLMUrl; }
  5188.  
  5189.         // save other settings
  5190.         USER_CONFIG.YouTubeTranscriptExporter = form.elements.YouTubeTranscriptExporter.checked;
  5191.         USER_CONFIG.fileNamingFormat = form.elements.fileNamingFormat.value;
  5192.         USER_CONFIG.includeTimestamps = form.elements.includeTimestamps.checked;
  5193.         USER_CONFIG.includeChapterHeaders = form.elements.includeChapterHeaders.checked;
  5194.         USER_CONFIG.openSameTab = form.elements.openSameTab.checked;
  5195.         USER_CONFIG.preventBackgroundExecution = form.elements.preventBackgroundExecution.checked;
  5196.         USER_CONFIG.ChatGPTPrompt = form.elements.ChatGPTPrompt.value;
  5197.  
  5198.         // initialize buttonIcons if not already
  5199.         USER_CONFIG.buttonIcons = USER_CONFIG.buttonIcons || {};
  5200.  
  5201.         // save button icons, removing empty values to use defaults
  5202.         const buttonIconDownload = form.elements.buttonIconDownload.value.trim();
  5203.         const buttonIconChatGPT = form.elements.buttonIconChatGPT.value.trim();
  5204.         const buttonIconNotebookLM = form.elements.buttonIconNotebookLM.value.trim();
  5205.         const buttonIconSettings = form.elements.buttonIconSettings.value.trim();
  5206.  
  5207.         USER_CONFIG.buttonIcons.download = buttonIconDownload;
  5208.         USER_CONFIG.buttonIcons.ChatGPT = buttonIconChatGPT;
  5209.         USER_CONFIG.buttonIcons.NotebookLM = buttonIconNotebookLM;
  5210.         if (buttonIconSettings !== '') { USER_CONFIG.buttonIcons.settings = buttonIconSettings; } else { delete USER_CONFIG.buttonIcons.settings; }
  5211.  
  5212.         // save sub panels - links in header
  5213.         if (subPanelLinks) {
  5214.             USER_CONFIG.buttonLeft1Text = subPanelLinks.elements.buttonLeft1Text.value;
  5215.             USER_CONFIG.buttonLeft1Url = subPanelLinks.elements.buttonLeft1Url.value;
  5216.             USER_CONFIG.buttonLeft2Text = subPanelLinks.elements.buttonLeft2Text.value;
  5217.             USER_CONFIG.buttonLeft2Url = subPanelLinks.elements.buttonLeft2Url.value;
  5218.             USER_CONFIG.buttonLeft3Text = subPanelLinks.elements.buttonLeft3Text.value;
  5219.             USER_CONFIG.buttonLeft3Url = subPanelLinks.elements.buttonLeft3Url.value;
  5220.             USER_CONFIG.buttonLeft4Text = subPanelLinks.elements.buttonLeft4Text.value;
  5221.             USER_CONFIG.buttonLeft4Url = subPanelLinks.elements.buttonLeft4Url.value;
  5222.             USER_CONFIG.buttonLeft5Text = subPanelLinks.elements.buttonLeft5Text.value;
  5223.             USER_CONFIG.buttonLeft5Url = subPanelLinks.elements.buttonLeft5Url.value;
  5224.             USER_CONFIG.buttonLeft6Text = subPanelLinks.elements.buttonLeft6Text.value;
  5225.             USER_CONFIG.buttonLeft6Url = subPanelLinks.elements.buttonLeft6Url.value;
  5226.             USER_CONFIG.buttonLeft7Text = subPanelLinks.elements.buttonLeft7Text.value;
  5227.             USER_CONFIG.buttonLeft7Url = subPanelLinks.elements.buttonLeft7Url.value;
  5228.             USER_CONFIG.buttonLeft8Text = subPanelLinks.elements.buttonLeft8Text.value;
  5229.             USER_CONFIG.buttonLeft8Url = subPanelLinks.elements.buttonLeft8Url.value;
  5230.             USER_CONFIG.buttonLeft9Text = subPanelLinks.elements.buttonLeft9Text.value;
  5231.             USER_CONFIG.buttonLeft9Url = subPanelLinks.elements.buttonLeft9Url.value;
  5232.             USER_CONFIG.buttonLeft10Text = subPanelLinks.elements.buttonLeft10Text.value;
  5233.             USER_CONFIG.buttonLeft10Url = subPanelLinks.elements.buttonLeft10Url.value;
  5234.             USER_CONFIG.mButtonText = subPanelLinks.elements.mButtonText.value;
  5235.             USER_CONFIG.mButtonDisplay = subPanelLinks.elements.mButtonDisplay.checked;
  5236.         }
  5237.  
  5238.         // save sub panels - custom css
  5239.         if (subPanelCustomCSS) {
  5240.             USER_CONFIG.textTransform = subPanelCustomCSS.elements.textTransform.value;
  5241.             USER_CONFIG.defaultFontSize = parseFloat(subPanelCustomCSS.elements.defaultFontSize.value);
  5242.             USER_CONFIG.videosWatchedOpacity = parseFloat(subPanelCustomCSS.elements.videosWatchedOpacity.value);
  5243.             USER_CONFIG.videosHideWatchedGlobal = subPanelCustomCSS.elements.videosHideWatchedGlobal.checked;
  5244.             USER_CONFIG.videosPerRow = parseInt(subPanelCustomCSS.elements.videosPerRow.value);
  5245.             USER_CONFIG.autoOpenChapters = subPanelCustomCSS.elements.autoOpenChapters.checked;
  5246.             USER_CONFIG.autoOpenTranscript = subPanelCustomCSS.elements.autoOpenTranscript.checked;
  5247.             USER_CONFIG.transcriptTimestamps = subPanelCustomCSS.elements.transcriptTimestamps.checked;
  5248.             USER_CONFIG.displayRemainingTime = subPanelCustomCSS.elements.displayRemainingTime.checked;
  5249.             USER_CONFIG.progressBar = subPanelCustomCSS.elements.progressBar.checked;
  5250.             USER_CONFIG.hideShorts = subPanelCustomCSS.elements.hideShorts.checked;
  5251.             USER_CONFIG.redirectShorts = subPanelCustomCSS.elements.redirectShorts.checked;
  5252.             USER_CONFIG.hideAdSlots = subPanelCustomCSS.elements.hideAdSlots.checked;
  5253.             USER_CONFIG.hidePayToWatch = subPanelCustomCSS.elements.hidePayToWatch.checked;
  5254.             USER_CONFIG.hideFreeWithAds = subPanelCustomCSS.elements.hideFreeWithAds.checked;
  5255.             USER_CONFIG.hideMembersOnly = subPanelCustomCSS.elements.hideMembersOnly.checked;
  5256.             USER_CONFIG.hideLatestPosts = subPanelCustomCSS.elements.hideLatestPosts.checked;
  5257.             USER_CONFIG.videoTabView = subPanelCustomCSS.elements.videoTabView.checked;
  5258.             USER_CONFIG.tabViewChapters = subPanelCustomCSS.elements.tabViewChapters.checked;
  5259.             USER_CONFIG.hideCommentsSection = subPanelCustomCSS.elements.hideCommentsSection.checked;
  5260.             USER_CONFIG.hideVideosSection = subPanelCustomCSS.elements.hideVideosSection.checked;
  5261.             USER_CONFIG.playbackSpeed = subPanelCustomCSS.elements.playbackSpeed.checked;
  5262.             USER_CONFIG.playbackSpeedValue = parseInt(subPanelCustomCSS.elements.playbackSpeedValue.value);
  5263.             USER_CONFIG.defaultQuality = subPanelCustomCSS.elements.defaultQuality.value;
  5264.             USER_CONFIG.defaultTranscriptLanguage = subPanelCustomCSS.elements.defaultTranscriptLanguage.value;
  5265.             USER_CONFIG.defaultAudioLanguage = subPanelCustomCSS.elements.defaultAudioLanguage.value;
  5266.             USER_CONFIG.defaultSubtitleLanguage = subPanelCustomCSS.elements.defaultSubtitleLanguage.value;
  5267.             USER_CONFIG.hideVoiceSearch = subPanelCustomCSS.elements.hideVoiceSearch.checked;
  5268.             USER_CONFIG.selectionColor = subPanelCustomCSS.elements.selectionColor.checked;
  5269.             USER_CONFIG.hideCreateButton = subPanelCustomCSS.elements.hideCreateButton.checked;
  5270.             USER_CONFIG.hideNotificationBtn = subPanelCustomCSS.elements.hideNotificationBtn.checked;
  5271.             USER_CONFIG.hideNotificationBadge = subPanelCustomCSS.elements.hideNotificationBadge.checked;
  5272.             USER_CONFIG.hideOwnAvatar = subPanelCustomCSS.elements.hideOwnAvatar.checked;
  5273.             USER_CONFIG.hideRightSidebarSearch = subPanelCustomCSS.elements.hideRightSidebarSearch.checked;
  5274.             USER_CONFIG.hideBrandText = subPanelCustomCSS.elements.hideBrandText.checked;
  5275.             USER_CONFIG.visibleCountryCode = subPanelCustomCSS.elements.visibleCountryCode.checked;
  5276.             USER_CONFIG.visibleCountryCodeColor = subPanelCustomCSS.elements.visibleCountryCodeColor.value;
  5277.             USER_CONFIG.disablePlayOnHover = subPanelCustomCSS.elements.disablePlayOnHover.checked;
  5278.             USER_CONFIG.chronologicalNotifications = subPanelCustomCSS.elements.chronologicalNotifications.checked;
  5279.             USER_CONFIG.preventAutoplay = subPanelCustomCSS.elements.preventAutoplay.checked;
  5280.             USER_CONFIG.VerifiedArtist = subPanelCustomCSS.elements.VerifiedArtist.checked;
  5281.             USER_CONFIG.defaultQualityPremium = subPanelCustomCSS.elements.defaultQualityPremium.checked;
  5282.             USER_CONFIG.hideEndCards = subPanelCustomCSS.elements.hideEndCards.checked;
  5283.             USER_CONFIG.hideEndscreen = subPanelCustomCSS.elements.hideEndscreen.checked;
  5284.             USER_CONFIG.gradientBottom = subPanelCustomCSS.elements.gradientBottom.checked;
  5285.             USER_CONFIG.hideJoinButton = subPanelCustomCSS.elements.hideJoinButton.checked;
  5286.             USER_CONFIG.hidePlayNextButton = subPanelCustomCSS.elements.hidePlayNextButton.checked;
  5287.             USER_CONFIG.hideAirplayButton = subPanelCustomCSS.elements.hideAirplayButton.checked;
  5288.             USER_CONFIG.smallSubscribeButton = subPanelCustomCSS.elements.smallSubscribeButton.checked;
  5289.             USER_CONFIG.hideShareButton = subPanelCustomCSS.elements.hideShareButton.checked;
  5290.             USER_CONFIG.hideHashtags = subPanelCustomCSS.elements.hideHashtags.checked;
  5291.             USER_CONFIG.hideInfoPanel = subPanelCustomCSS.elements.hideInfoPanel.checked;
  5292.             USER_CONFIG.hideAddComment = subPanelCustomCSS.elements.hideAddComment.checked;
  5293.             USER_CONFIG.hideReplyButton = subPanelCustomCSS.elements.hideReplyButton.checked;
  5294.             USER_CONFIG.hidePlaylistsHome = subPanelCustomCSS.elements.hidePlaylistsHome.checked;
  5295.             USER_CONFIG.hideNewsHome = subPanelCustomCSS.elements.hideNewsHome.checked;
  5296.             USER_CONFIG.playProgressColor = subPanelCustomCSS.elements.playProgressColor.checked;
  5297.             USER_CONFIG.progressbarColorPicker = subPanelCustomCSS.elements.progressbarColorPicker.value;
  5298.             USER_CONFIG.lightModeSelectionColor = subPanelCustomCSS.elements.lightModeSelectionColor.value;
  5299.             USER_CONFIG.darkModeSelectionColor = subPanelCustomCSS.elements.darkModeSelectionColor.value;
  5300.             USER_CONFIG.pureBWBackground = subPanelCustomCSS.elements.pureBWBackground.checked;
  5301.             USER_CONFIG.noFrostedGlass = subPanelCustomCSS.elements.noFrostedGlass.checked;
  5302.             USER_CONFIG.removeScrubber = subPanelCustomCSS.elements.removeScrubber.checked;
  5303.             USER_CONFIG.autoTheaterMode = subPanelCustomCSS.elements.autoTheaterMode.checked;
  5304.             USER_CONFIG.channelReindirizzare = subPanelCustomCSS.elements.channelReindirizzare.checked;
  5305.             USER_CONFIG.channelRSSBtn = subPanelCustomCSS.elements.channelRSSBtn.checked;
  5306.             USER_CONFIG.channelPlaylistBtn = subPanelCustomCSS.elements.channelPlaylistBtn.checked;
  5307.             USER_CONFIG.playlistDirectionBtns = subPanelCustomCSS.elements.playlistDirectionBtns.checked;
  5308.             USER_CONFIG.playlistLinks = subPanelCustomCSS.elements.playlistLinks.checked;
  5309.             USER_CONFIG.playlistTrashCan = subPanelCustomCSS.elements.playlistTrashCan.checked;
  5310.             USER_CONFIG.commentsNewFirst = subPanelCustomCSS.elements.commentsNewFirst.checked;
  5311.             USER_CONFIG.hideFundraiser = subPanelCustomCSS.elements.hideFundraiser.checked;
  5312.             USER_CONFIG.hideMiniPlayer = subPanelCustomCSS.elements.hideMiniPlayer.checked;
  5313.             USER_CONFIG.hideQueueBtn = subPanelCustomCSS.elements.hideQueueBtn.checked;
  5314.             USER_CONFIG.closeChatWindow = subPanelCustomCSS.elements.closeChatWindow.checked;
  5315.             USER_CONFIG.lnbHideHomeBtn = subPanelCustomCSS.elements.lnbHideHomeBtn.checked;
  5316.             USER_CONFIG.lnbHideSubscriptionsBtn = subPanelCustomCSS.elements.lnbHideSubscriptionsBtn.checked;
  5317.             USER_CONFIG.lnbHideHistoryBtn = subPanelCustomCSS.elements.lnbHideHistoryBtn.checked;
  5318.             USER_CONFIG.lnbHidePlaylistsBtn = subPanelCustomCSS.elements.lnbHidePlaylistsBtn.checked;
  5319.             USER_CONFIG.lnbHideVideosBtn = subPanelCustomCSS.elements.lnbHideVideosBtn.checked;
  5320.             USER_CONFIG.lnbHideCoursesBtn = subPanelCustomCSS.elements.lnbHideCoursesBtn.checked;
  5321.             USER_CONFIG.lnbHideYPodcastsBtn = subPanelCustomCSS.elements.lnbHideYPodcastsBtn.checked;
  5322.             USER_CONFIG.lnbHideWlBtn = subPanelCustomCSS.elements.lnbHideWlBtn.checked;
  5323.             USER_CONFIG.lnbHideLikedVideosBtn = subPanelCustomCSS.elements.lnbHideLikedVideosBtn.checked;
  5324.             USER_CONFIG.lnbHideYouBtn = subPanelCustomCSS.elements.lnbHideYouBtn.checked;
  5325.             USER_CONFIG.lnbHideSubscriptionsSection = subPanelCustomCSS.elements.lnbHideSubscriptionsSection.checked;
  5326.             USER_CONFIG.lnbHideSubscriptionsTitle = subPanelCustomCSS.elements.lnbHideSubscriptionsTitle.checked;
  5327.             USER_CONFIG.lnbHideMoreBtn = subPanelCustomCSS.elements.lnbHideMoreBtn.checked;
  5328.             USER_CONFIG.lnbHideExploreSection = subPanelCustomCSS.elements.lnbHideExploreSection.checked;
  5329.             USER_CONFIG.lnbHideExploreTitle = subPanelCustomCSS.elements.lnbHideExploreTitle.checked;
  5330.             USER_CONFIG.lnbHideTrendingBtn = subPanelCustomCSS.elements.lnbHideTrendingBtn.checked;
  5331.             USER_CONFIG.lnbHideMusicBtn = subPanelCustomCSS.elements.lnbHideMusicBtn.checked;
  5332.             USER_CONFIG.lnbHideMoviesBtn = subPanelCustomCSS.elements.lnbHideMoviesBtn.checked;
  5333.             USER_CONFIG.lnbHideLiveBtn = subPanelCustomCSS.elements.lnbHideLiveBtn.checked;
  5334.             USER_CONFIG.lnbHideGamingBtn = subPanelCustomCSS.elements.lnbHideGamingBtn.checked;
  5335.             USER_CONFIG.lnbHideNewsBtn = subPanelCustomCSS.elements.lnbHideNewsBtn.checked;
  5336.             USER_CONFIG.lnbHideSportsBtn = subPanelCustomCSS.elements.lnbHideSportsBtn.checked;
  5337.             USER_CONFIG.lnbHideLearningBtn = subPanelCustomCSS.elements.lnbHideLearningBtn.checked;
  5338.             USER_CONFIG.lnbHideFashionBtn = subPanelCustomCSS.elements.lnbHideFashionBtn.checked;
  5339.             USER_CONFIG.lnbHidePodcastsBtn = subPanelCustomCSS.elements.lnbHidePodcastsBtn.checked;
  5340.             USER_CONFIG.lnbHideMoreSection = subPanelCustomCSS.elements.lnbHideMoreSection.checked;
  5341.             USER_CONFIG.lnbHideMoreTitle = subPanelCustomCSS.elements.lnbHideMoreTitle.checked;
  5342.             USER_CONFIG.lnbHideYtPremiumBtn = subPanelCustomCSS.elements.lnbHideYtPremiumBtn.checked;
  5343.             USER_CONFIG.lnbHideYtStudioBtn = subPanelCustomCSS.elements.lnbHideYtStudioBtn.checked;
  5344.             USER_CONFIG.lnbHideYtMusicBtn = subPanelCustomCSS.elements.lnbHideYtMusicBtn.checked;
  5345.             USER_CONFIG.lnbHideYtKidsBtn = subPanelCustomCSS.elements.lnbHideYtKidsBtn.checked;
  5346.             USER_CONFIG.lnbHidePenultimateSection = subPanelCustomCSS.elements.lnbHidePenultimateSection.checked;
  5347.             USER_CONFIG.lnbHideSettingsBtn = subPanelCustomCSS.elements.lnbHideSettingsBtn.checked;
  5348.             USER_CONFIG.lnbHideReportHistoryBtn = subPanelCustomCSS.elements.lnbHideReportHistoryBtn.checked;
  5349.             USER_CONFIG.lnbHideHelpBtn = subPanelCustomCSS.elements.lnbHideHelpBtn.checked;
  5350.             USER_CONFIG.lnbHideFeedbackBtn = subPanelCustomCSS.elements.lnbHideFeedbackBtn.checked;
  5351.             USER_CONFIG.lnbHideFooter = subPanelCustomCSS.elements.lnbHideFooter.checked;
  5352.             USER_CONFIG.displayFullTitle = subPanelCustomCSS.elements.displayFullTitle.checked;
  5353.             USER_CONFIG.squareSearchBar = subPanelCustomCSS.elements.squareSearchBar.checked;
  5354.             USER_CONFIG.squareDesign = subPanelCustomCSS.elements.squareDesign.checked;
  5355.             USER_CONFIG.squareAvatars = subPanelCustomCSS.elements.squareAvatars.checked;
  5356.             USER_CONFIG.compactLayout = subPanelCustomCSS.elements.compactLayout.checked;
  5357.             USER_CONFIG.noAmbientMode = subPanelCustomCSS.elements.noAmbientMode.checked;
  5358.         }
  5359.  
  5360.         // save sub panels - color code videos
  5361.         if (subPanelColor) {
  5362.             USER_CONFIG.colorCodeVideosEnabled = subPanelColor.elements.colorCodeVideosEnabled.checked;
  5363.             USER_CONFIG.videosHideWatched = subPanelColor.elements.videosHideWatched.checked;
  5364.             USER_CONFIG.videosOldOpacity = parseFloat(subPanelColor.elements.videosOldOpacity.value);
  5365.             USER_CONFIG.videosAgeColorPickerNewly = subPanelColor.elements.videosAgeColorPickerNewly.value;
  5366.             USER_CONFIG.videosAgeColorPickerRecent = subPanelColor.elements.videosAgeColorPickerRecent.value;
  5367.             USER_CONFIG.videosAgeColorPickerLately = subPanelColor.elements.videosAgeColorPickerLately.value;
  5368.             USER_CONFIG.videosAgeColorPickerLatterly = subPanelColor.elements.videosAgeColorPickerLatterly.value;
  5369.             USER_CONFIG.videosAgeColorPickerLive = subPanelColor.elements.videosAgeColorPickerLive.value;
  5370.             USER_CONFIG.videosAgeColorPickerStreamed = subPanelColor.elements.videosAgeColorPickerStreamed.value;
  5371.             USER_CONFIG.videosAgeColorPickerUpcoming = subPanelColor.elements.videosAgeColorPickerUpcoming.value;
  5372.             USER_CONFIG.lastSeenVideo = subPanelColor.elements.lastSeenVideo.checked;
  5373.             USER_CONFIG.lastSeenVideoScroll = subPanelColor.elements.lastSeenVideoScroll.checked;
  5374.             USER_CONFIG.lastSeenVideoColor = subPanelColor.elements.lastSeenVideoColor.value;
  5375.         }
  5376.  
  5377.         // save updated config
  5378.         try {
  5379.             await GM.setValue('USER_CONFIG', USER_CONFIG);
  5380.  
  5381.             // close modal
  5382.             document.getElementById('yt-transcript-settings-modal').style.display = 'none';
  5383.             showNotification('Settings have been updated!');
  5384.             setTimeout(() => { location.reload(); }, 1000);
  5385.         } catch (error) {
  5386.             showNotification('Error saving new user config!');
  5387.             console.error("YouTubeAlchemy: Error saving user configuration:", error);
  5388.         }
  5389.     }
  5390.  
  5391.     // export and import settings
  5392.     async function exportSettings() {
  5393.         try {
  5394.             const scriptVersion = GM.info.script.version;
  5395.             const settingsString = JSON.stringify(USER_CONFIG, null, 2);
  5396.             const blob = new Blob([settingsString], { type: 'application/json' });
  5397.             const url = URL.createObjectURL(blob);
  5398.  
  5399.             const a = document.createElement('a');
  5400.             a.href = url;
  5401.             a.download = `YouTube-Alchemy_v${scriptVersion}_Backup_${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
  5402.             docBody.appendChild(a);
  5403.             a.click();
  5404.             docBody.removeChild(a);
  5405.             URL.revokeObjectURL(url);
  5406.  
  5407.             showNotification('Settings have been exported.');
  5408.             } catch (error) {
  5409.                 showNotification("Error exporting settings!");
  5410.                 console.error("YouTubeAlchemy: Error exporting user settings:", error);
  5411.             }
  5412.     }
  5413.  
  5414.     let fileInputSettings;
  5415.     async function importSettings() {
  5416.         const handleFile = (e) => {
  5417.             const file = e.target.files[0];
  5418.             if (!file) return;
  5419.  
  5420.             const reader = new FileReader();
  5421.             reader.onload = (event) => {
  5422.                 const fileContent = event.target.result;
  5423.                 try {
  5424.                     const importedConfig = JSON.parse(fileContent);
  5425.                     if (typeof importedConfig === 'object' && importedConfig !== null) {
  5426.                         USER_CONFIG = { ...DEFAULT_CONFIG, ...importedConfig };
  5427.                         GM.setValue('USER_CONFIG', USER_CONFIG);
  5428.                         showNotification('Settings have been imported.');
  5429.                         setTimeout(() => { location.reload(); }, 1000);
  5430.                     } else {
  5431.                         showNotification('Invalid JSON format!');
  5432.                     }
  5433.                 } catch (error) {
  5434.                     showNotification('Invalid JSON format!');
  5435.                 }
  5436.             };
  5437.             reader.readAsText(file);
  5438.         };
  5439.  
  5440.         const createOrResetFileInput = () => {
  5441.             if (!fileInputSettings) {
  5442.             fileInputSettings = document.createElement('input');
  5443.             fileInputSettings.type = 'file';
  5444.             fileInputSettings.accept = 'application/json';
  5445.             fileInputSettings.id = 'fileInputSettings';
  5446.             fileInputSettings.style.display = 'none';
  5447.             fileInputSettings.addEventListener('change', handleFile);
  5448.             docBody.appendChild(fileInputSettings);
  5449.             } else {
  5450.                 fileInputSettings.value = '';
  5451.             }
  5452.         };
  5453.  
  5454.         createOrResetFileInput();
  5455.         fileInputSettings.click();
  5456.     }
  5457.  
  5458.     // function to display a notification for settings change or reset
  5459.     function showNotification(message) {
  5460.         const overlay = document.createElement('div');
  5461.         overlay.classList.add('CentAnni-overlay');
  5462.  
  5463.         const modal = document.createElement('div');
  5464.         modal.classList.add('notification');
  5465.         modal.innerText = message;
  5466.  
  5467.         overlay.appendChild(modal);
  5468.         docBody.appendChild(overlay);
  5469.  
  5470.         setTimeout(() => { overlay.remove(); }, 1000);
  5471.     }
  5472.  
  5473.     // function to add the transcript exporter buttons
  5474.     function buttonLocation(buttons, callback) {
  5475.         const masthead = endElement;
  5476.         if (masthead) {
  5477.             buttons.forEach(({ id, text, clickHandler, tooltip }) => {
  5478.  
  5479.                 // button wrapper
  5480.                 const buttonWrapper = document.createElement('div');
  5481.                 buttonWrapper.classList.add('button-wrapper');
  5482.  
  5483.                 // buttons
  5484.                 const button = document.createElement('button');
  5485.                 button.id = id;
  5486.                 button.innerText = text;
  5487.                 button.classList.add('button-style');
  5488.                 if (id === 'transcript-settings-button') {
  5489.                     button.classList.add('button-style-settings'); }
  5490.  
  5491.                 button.addEventListener('click', clickHandler);
  5492.  
  5493.                 // tooltip div
  5494.                 const tooltipDiv = document.createElement('div');
  5495.                 tooltipDiv.innerText = tooltip;
  5496.                 tooltipDiv.classList.add('button-tooltip');
  5497.  
  5498.                 // tooltip arrow
  5499.                 const arrowDiv = document.createElement('div');
  5500.                 arrowDiv.classList.add('button-tooltip-arrow');
  5501.                 tooltipDiv.appendChild(arrowDiv);
  5502.  
  5503.                 // show and hide tooltip on hover
  5504.                 let tooltipTimeout;
  5505.                 button.addEventListener('mouseenter', () => {
  5506.                     tooltipTimeout = setTimeout(() => {
  5507.                         tooltipDiv.style.visibility = 'visible';
  5508.                         tooltipDiv.style.opacity = '1';
  5509.                     }, 700);
  5510.                 });
  5511.  
  5512.                 button.addEventListener('mouseleave', () => {
  5513.                     clearTimeout(tooltipTimeout);
  5514.                     tooltipDiv.style.visibility = 'hidden';
  5515.                     tooltipDiv.style.opacity = '0';
  5516.                 });
  5517.  
  5518.                 // append button elements
  5519.                 buttonWrapper.appendChild(button);
  5520.                 buttonWrapper.appendChild(tooltipDiv);
  5521.                 masthead.prepend(buttonWrapper);
  5522.             });
  5523.         } else {
  5524.             const observer = new MutationObserver((mutations, obs) => {
  5525.                 const masthead = endElement;
  5526.                 if (masthead) {
  5527.                     obs.disconnect();
  5528.                     if (callback) callback();
  5529.                 }
  5530.             });
  5531.             observer.observe(docBody, { childList: true, subtree: true });
  5532.         }
  5533.     }
  5534.  
  5535.     function addButton() {
  5536.         document.querySelectorAll('.button-wrapper').forEach(el => el.remove());
  5537.  
  5538.         const buttons = [
  5539.             { id: 'transcript-settings-button', text: USER_CONFIG.buttonIcons.settings, clickHandler: showSettingsModal, tooltip: 'YouTube Alchemy Settings', ariaLabel: 'YouTube Alchemy Settings.' },
  5540.             { id: 'transcript-download-button', text: USER_CONFIG.buttonIcons.download, clickHandler: handleDownloadClick, tooltip: 'Download Transcript as a Text File', ariaLabel: 'Download Transcript as a Text File.' },
  5541.             { id: 'transcript-ChatGPT-button', text: USER_CONFIG.buttonIcons.ChatGPT, clickHandler: handleChatGPTClick, tooltip: 'Copy Transcript with a Prompt and Open ChatGPT', ariaLabel: 'Copy Transcript to Clipboard with a Prompt and Open ChatGPT.' },
  5542.             { id: 'transcript-NotebookLM-button', text: USER_CONFIG.buttonIcons.NotebookLM, clickHandler: handleNotebookLMClick, tooltip: 'Copy Transcript and Open NotebookLM', ariaLabel: 'Copy Transcript to Clipboard and Open NotebookLM.' }
  5543.         ];
  5544.  
  5545.         const buttonsToAdd = buttons.filter(button => button.id === 'transcript-settings-button' || (button.text && button.text.trim() !== ''));
  5546.         buttonLocation(buttonsToAdd, addButton);
  5547.     }
  5548.  
  5549.     function addSettingsButton() {
  5550.         document.querySelectorAll('.button-wrapper').forEach(el => el.remove());
  5551.         const buttons = [ { id: 'transcript-settings-button', text: USER_CONFIG.buttonIcons.settings, clickHandler: showSettingsModal, tooltip: 'YouTube Alchemy Settings', ariaLabel: 'YouTube Alchemy Settings.' }, ];
  5552.         buttonLocation(buttons, addSettingsButton);
  5553.     }
  5554.  
  5555.     // functions to handle the button clicks
  5556.     function handleChatGPTClick() { handleTranscriptAction(function() { selectAndCopyTranscript('ChatGPT'); }); }
  5557.     function handleNotebookLMClick() { handleTranscriptAction(function() { selectAndCopyTranscript('NotebookLM'); }); }
  5558.     function handleDownloadClick() { handleTranscriptAction(downloadTranscriptAsText); }
  5559.  
  5560.     // function to check for a transcript
  5561.     function handleTranscriptAction(callback) {
  5562.         const transcriptButton = document.querySelector('#button-container button[aria-label="Show transcript"]');
  5563.             const transcriptSection = document.querySelector('ytd-video-description-transcript-section-renderer');
  5564.  
  5565.         if (!transcriptButton && !transcriptSection) {
  5566.             console.error("YouTubeAlchemy: Transcript button or section not found. Subtitles or closed captions are unavailable or language is unsupported. Reload this page to try again.");
  5567.             alert('Transcript unavailable or cannot be found.\nEnsure the video has a transcript.\nReload this page to try again.');
  5568.                 return;
  5569.         }
  5570.  
  5571.         const transcriptItems = document.querySelectorAll('ytd-transcript-segment-list-renderer ytd-transcript-segment-renderer');
  5572.         if (transcriptItems.length === 0) {
  5573.             console.error("YouTubeAlchemy: Transcript has not loaded.");
  5574.             alert('Transcript has not loaded successfully.\nReload this page to try again.');
  5575.             return;
  5576.         }
  5577.  
  5578.         callback();
  5579.     }
  5580.  
  5581.     // function to get video information
  5582.     function getVideoInfo() {
  5583.         const ytTitle = watchFlexyElement.querySelector('div#title h1 > yt-formatted-string')?.textContent.trim() || 'N/A';
  5584.         const channelName = watchFlexyElement.querySelector( 'ytd-video-owner-renderer ytd-channel-name#channel-name yt-formatted-string#text a' )?.textContent.trim() || 'N/A';
  5585.         const uploadDate = watchFlexyElement.querySelector('ytd-video-primary-info-renderer #info-strings yt-formatted-string')?.textContent.trim() || 'N/A';
  5586.         const videoURL = window.location.href;
  5587.  
  5588.         return { ytTitle, channelName, uploadDate, videoURL };
  5589.     }
  5590.  
  5591.     // function to get the transcript text
  5592.     function getTranscriptText() {
  5593.         const transcriptContainer = watchFlexyElement.querySelector('ytd-transcript-segment-list-renderer #segments-container');
  5594.         if (!transcriptContainer) {
  5595.             console.error("YouTubeAlchemy: Transcript container not found.");
  5596.             return '';
  5597.         }
  5598.  
  5599.         const transcriptElements = transcriptContainer.children;
  5600.         let transcriptLines = [];
  5601.  
  5602.         [...transcriptElements].forEach(element => {
  5603.             if (element.tagName === 'YTD-TRANSCRIPT-SECTION-HEADER-RENDERER') {
  5604.  
  5605.                 // chapter header segment
  5606.                 if (USER_CONFIG.includeChapterHeaders) {
  5607.                     const chapterTitleElement = element.querySelector('h2 > span');
  5608.                     if (chapterTitleElement) {
  5609.                         const chapterTitle = chapterTitleElement.textContent.trim();
  5610.                         transcriptLines.push(`\nChapter: ${chapterTitle}`);
  5611.                     }
  5612.                 }
  5613.             } else if (element.tagName === 'YTD-TRANSCRIPT-SEGMENT-RENDERER') {
  5614.  
  5615.                 // transcript segment
  5616.                 const timeElement = element.querySelector('.segment-timestamp');
  5617.                 const textElement = element.querySelector('.segment-text');
  5618.                 if (timeElement && textElement) {
  5619.                     const time = timeElement.textContent.trim();
  5620.                     const text = textElement.innerText.trim();
  5621.                     if (USER_CONFIG.includeTimestamps) {
  5622.                         transcriptLines.push(`${time} ${text}`);
  5623.                     } else { transcriptLines.push(`${text}`); }
  5624.                 }
  5625.             }
  5626.         });
  5627.  
  5628.         return transcriptLines.join('\n');
  5629.     }
  5630.  
  5631.     // function to select and copy the transcript into the clipboard
  5632.     function selectAndCopyTranscript(target) {
  5633.         const transcriptText = getTranscriptText();
  5634.         const { ytTitle, channelName, uploadDate, videoURL } = getVideoInfo();
  5635.  
  5636.         let finalText = '';
  5637.         let targetUrl = '';
  5638.  
  5639.         if (target === 'ChatGPT') {
  5640.             finalText = `YouTube Transcript:\n${transcriptText.trimStart()}\n\n\nAdditional Information about the YouTube Video:\nTitle: ${ytTitle}\nChannel: ${channelName}\nUpload Date: ${uploadDate}\nURL: ${videoURL}\n\n\nTask Instructions:\n${USER_CONFIG.ChatGPTPrompt}`;
  5641.             targetUrl = USER_CONFIG.targetChatGPTUrl;
  5642.         } else if (target === 'NotebookLM') {
  5643.             finalText = `Information about the YouTube Video:\nTitle: ${ytTitle}\nChannel: ${channelName}\nUpload Date: ${uploadDate}\nURL: ${videoURL}\n\n\nYouTube Transcript:\n${transcriptText.trimStart()}`;
  5644.             targetUrl = USER_CONFIG.targetNotebookLMUrl;
  5645.         }
  5646.  
  5647.         navigator.clipboard.writeText(finalText).then(() => {
  5648.             showNotification('Transcript copied. Opening website . . .');
  5649.             if (USER_CONFIG.openSameTab) { window.open(targetUrl, '_self');
  5650.             } else { window.open(targetUrl, '_blank'); }
  5651.         });
  5652.     }
  5653.  
  5654.     // function to get the formatted transcript with video details for the text file
  5655.     function getFormattedTranscript() {
  5656.         const transcriptText = getTranscriptText();
  5657.         const { ytTitle, channelName, uploadDate, videoURL } = getVideoInfo();
  5658.  
  5659.         return `Information about the YouTube Video:\nTitle: ${ytTitle}\nChannel: ${channelName}\nUpload Date: ${uploadDate}\nURL: ${videoURL}\n\n\nYouTube Transcript:\n${transcriptText.trimStart()}`;
  5660.     }
  5661.  
  5662.     // function to download the transcript as a text file
  5663.     function downloadTranscriptAsText() {
  5664.         const finalText = getFormattedTranscript();
  5665.         const { ytTitle, channelName, uploadDate } = getVideoInfo();
  5666.         const blob = new Blob([finalText], { type: 'text/plain' });
  5667.  
  5668.         const sanitize = str => str.replace(/[<>:"/\\|?*]+/g, '');
  5669.         const uploadDateFormatted = new Date(uploadDate).toLocaleDateString("en-CA");
  5670.  
  5671.         // naming of text file based on user setting
  5672.         let fileName = '';
  5673.         switch (USER_CONFIG.fileNamingFormat) {
  5674.             case 'title-channel': fileName = `${sanitize(ytTitle)} - ${sanitize(channelName)}.txt`; break;
  5675.             case 'channel-title': fileName = `${sanitize(channelName)} - ${sanitize(ytTitle)}.txt`; break;
  5676.             case 'date-title-channel': fileName = `${sanitize(uploadDateFormatted)} - ${sanitize(ytTitle)} - ${sanitize(channelName)}.txt`; break;
  5677.             case 'date-channel-title': fileName = `${sanitize(uploadDateFormatted)} - ${sanitize(channelName)} - ${sanitize(ytTitle)}.txt`; break;
  5678.             default: fileName = `${sanitize(ytTitle)} - ${sanitize(channelName)}.txt`;
  5679.         }
  5680.  
  5681.         const url = URL.createObjectURL(blob);
  5682.  
  5683.         // create a temporary anchor element to trigger the download
  5684.         const a = document.createElement('a');
  5685.         a.href = url;
  5686.         a.download = fileName;
  5687.         docBody.appendChild(a);
  5688.         a.click();
  5689.  
  5690.         // clean up
  5691.         docBody.removeChild(a);
  5692.         URL.revokeObjectURL(url);
  5693.         showNotification('File has been downloaded.');
  5694.     }
  5695.  
  5696.     // function to preload the transcript
  5697.     function preLoadTranscript() {
  5698.         return new Promise((resolve, reject) => {
  5699.             document.querySelectorAll('.button-wrapper').forEach(el => el.remove());
  5700.             if (isLiveVideo) {
  5701.                 showNotificationError("Live Stream, No Transcript");
  5702.                 reject();
  5703.                 return;
  5704.             }
  5705.  
  5706.             if (!hasTranscriptPanel) {
  5707.                 showNotificationError("Transcript Not Available");
  5708.                 reject();
  5709.                 return;
  5710.             }
  5711.  
  5712.             const masthead = document.querySelector("#end");
  5713.             const notification = document.createElement("div");
  5714.             notification.classList.add("notification-error", "loading");
  5715.             const textSpan = document.createElement("span");
  5716.             textSpan.textContent = "Transcript Is Loading";
  5717.             notification.appendChild(textSpan);
  5718.             masthead.prepend(notification);
  5719.  
  5720.             if (!USER_CONFIG.autoOpenTranscript) {
  5721.                 transcriptPanel.classList.add("transcript-preload");
  5722.                 transcriptPanel.setAttribute("visibility", "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED");
  5723.             }
  5724.  
  5725.             let loaded = false;
  5726.  
  5727.             const fallbackTimer = setTimeout(() => {
  5728.                 if (!loaded) {
  5729.                     console.error("YouTubeAlchemy: The transcript took too long to load. Reload this page to try again.");
  5730.                     observer.disconnect();
  5731.                     cleanup(true);
  5732.                     reject();
  5733.                 }
  5734.             }, 10000);
  5735.  
  5736.             const observer = new MutationObserver(() => {
  5737.                 const transcriptItems = transcriptPanel.querySelectorAll("ytd-transcript-segment-renderer");
  5738.                 if (transcriptItems.length > 0) {
  5739.                     loaded = true;
  5740.                     cleanup(false);
  5741.                     clearTimeout(fallbackTimer);
  5742.                     observer.disconnect();
  5743.                     transcriptMenuButton();
  5744.                     if (USER_CONFIG.transcriptTimestamps) enableTimestamps();
  5745.                     if (USER_CONFIG.defaultTranscriptLanguage !== 'auto') setTimeout(() => { setTranscriptLanguage(); }, 250);
  5746.                     resolve();
  5747.                 }
  5748.             });
  5749.  
  5750.             observer.observe(transcriptPanel, { childList: true, subtree: true });
  5751.  
  5752.             function cleanup(failed) {
  5753.                 notification.remove();
  5754.                 if (!USER_CONFIG.autoOpenTranscript) {
  5755.                     transcriptPanel.classList.remove("transcript-preload");
  5756.                     transcriptPanel.setAttribute("visibility", "ENGAGEMENT_PANEL_VISIBILITY_HIDDEN");
  5757.                 }
  5758.                 if (failed) { showNotificationError("Transcript Failed to Load"); }
  5759.             }
  5760.         });
  5761.     }
  5762.  
  5763.     // function to display a notification if transcript cannot be found
  5764.     function showNotificationError(message) {
  5765.         const masthead = endElement;
  5766.         const notification = document.createElement('div');
  5767.         notification.textContent = message;
  5768.         notification.classList.add('notification-error');
  5769.  
  5770.         masthead.prepend(notification);
  5771.  
  5772.         if (document.visibilityState === 'hidden') {
  5773.             document.addEventListener('visibilitychange', function handleVisibilityChange() {
  5774.                 if (document.visibilityState === 'visible') {
  5775.                     document.removeEventListener('visibilitychange', handleVisibilityChange);
  5776.                     setTimeout(() => notification.remove(), 3000);
  5777.                 }
  5778.             });
  5779.         } else { setTimeout(() => notification.remove(), 3000); }
  5780.     }
  5781.  
  5782.     // helper function to switch theater mode
  5783.     function toggleTheaterMode() {
  5784.         const event = new KeyboardEvent('keydown', {
  5785.             key: 'T',
  5786.             code: 'KeyT',
  5787.             keyCode: 84,
  5788.             bubbles: true,
  5789.             cancelable: true
  5790.         });
  5791.  
  5792.         document.dispatchEvent(event);
  5793.     }
  5794.  
  5795.     // set audio and subtitle language
  5796.     async function setLanguage() {
  5797.         docElement.classList.add('CentAnni-style-hide-yt-settings');
  5798.         if (USER_CONFIG.defaultAudioLanguage!=='auto') await setTrackLanguage('.ytp-menuitem.ytp-audio-menu-item', audioInLanguage);
  5799.         if (USER_CONFIG.defaultSubtitleLanguage !== 'auto'){ await setTrackLanguage(() => [...watchFlexyElement.querySelectorAll('.ytp-menuitem')].find(el => el.textContent.toLowerCase().includes(Object.values(languageMap).find(item => item.code === uiLanguage).nativeSubtitles.toLowerCase())), subtitleInLanguage );}
  5800.         docBody.click();
  5801.         docElement.classList.remove('CentAnni-style-hide-yt-settings');
  5802.     }
  5803.  
  5804.     async function setTrackLanguage(categorySelector, languagePattern) {
  5805.         const settingsPanel  = '.ytp-settings-menu';
  5806.         const settingsHeader = '.ytp-panel-header';
  5807.         const settingsButton = '.ytp-settings-button';
  5808.  
  5809.         function waitFor(selectorOrFn, ctx = document, timeout = 7000) {
  5810.             return new Promise((resolve, reject) => {
  5811.                 const lookup = () => (typeof selectorOrFn === 'function')
  5812.                 ? selectorOrFn()
  5813.                 : ctx.querySelector(selectorOrFn);
  5814.  
  5815.                 if (lookup()) { resolve(lookup()); return; }
  5816.  
  5817.                 const timer = setTimeout(() => { observer.disconnect(); reject(); }, timeout);
  5818.                 const observer = new MutationObserver(() => {
  5819.                     const node = lookup();
  5820.                     if (node) {
  5821.                         clearTimeout(timer);
  5822.                         observer.disconnect();
  5823.                         resolve(node);
  5824.                     }
  5825.                 });
  5826.                 observer.observe(ctx, { childList: true, subtree: true });
  5827.             });
  5828.         }
  5829.  
  5830.         if (!watchFlexyElement.querySelector(settingsPanel) || getComputedStyle(watchFlexyElement.querySelector(settingsPanel)).display === 'none') {
  5831.             watchFlexyElement.querySelector(settingsButton).click();
  5832.             await waitFor(settingsPanel);
  5833.         }
  5834.  
  5835.         const panel = watchFlexyElement.querySelector(settingsPanel);
  5836.         const headerBtn = panel.querySelector(settingsHeader);
  5837.         if (headerBtn) {
  5838.             headerBtn.click();
  5839.             await waitFor(categorySelector, panel);
  5840.         }
  5841.  
  5842.         const categoryItem = typeof categorySelector === 'function'
  5843.             ? categorySelector()
  5844.             : panel.querySelector(categorySelector);
  5845.         if (!categoryItem){console.error('YouTubeAlchemy Category not found'); return;}
  5846.         categoryItem.click();
  5847.  
  5848.         await waitFor('.ytp-menuitem', panel);
  5849.  
  5850.         const items  = [...panel.querySelectorAll('.ytp-menuitem')];
  5851.         const target = items.find(el => new RegExp(`^${languagePattern}\\b`,'i').test(el.textContent.trim())) || items.find(el => new RegExp(`^${englishInLanguage}\\b`,'i').test(el.textContent.trim()));
  5852.         if (!target){console.error('YouTubeAlchemy Language not found');return;}
  5853.         target.click();
  5854.         await new Promise(resolve => setTimeout(resolve, 100));
  5855.     }
  5856.  
  5857.     // set default transcript language
  5858.     function setTranscriptLanguage() {
  5859.         const menuTrigger = transcriptPanel.querySelector('tp-yt-paper-button#label');
  5860.         const labelTextEl = transcriptPanel.querySelector('#label-text');
  5861.         if (!menuTrigger || !labelTextEl) return;
  5862.  
  5863.         const itemsArray  = [...transcriptPanel.querySelectorAll('tp-yt-paper-item')];
  5864.         const target = itemsArray.find(el => new RegExp(`^${transcriptInLanguage}\\b`,'i').test(el.textContent.trim())) || itemsArray.find(el => new RegExp(`^${englishInLanguage}\\b`,'i').test(el.textContent.trim()));
  5865.         if (!target){console.error('YouTubeAlchemy Language not found');return;}
  5866.         target.click();
  5867.     }
  5868.  
  5869.     // function tab view on video page
  5870.     function tabView() {
  5871.         if (!watchFlexyElement) return;
  5872.  
  5873.         let transcriptMenuButtonMoved = false;
  5874.         let transcriptLanguageSet = false;
  5875.         let timestampsEnabled = false;
  5876.         let lastActiveTab = null;
  5877.         let currentActiveTab = null;
  5878.         let isFirstRun = true;
  5879.         let tabElements = [];
  5880.         let subheaderDiv;
  5881.  
  5882.         // helper function to determine the default tab
  5883.         // priority: transcript > chapters > info
  5884.         function determineActiveTab() {
  5885.             let activeTabId = 'tab-1';
  5886.             if (USER_CONFIG.autoOpenTranscript) { const tab5 = watchFlexyElement.querySelector('[data-tab="tab-5"]'); if (tab5) return 'tab-5'; }
  5887.             if (USER_CONFIG.autoOpenChapters) { const tab4 = watchFlexyElement.querySelector('[data-tab="tab-4"]'); if (tab4) return 'tab-4'; }
  5888.             return activeTabId;
  5889.         }
  5890.  
  5891.         // helper function active tab
  5892.         function activateTab(tabId) {
  5893.             const tab = watchFlexyElement.querySelector(`[data-tab="${tabId}"]`);
  5894.             if (tab) tab.classList.add('active');
  5895.             currentActiveTab = tabId;
  5896.         }
  5897.  
  5898.         // function to update tabView based on player layout
  5899.         function updateTabView() {
  5900.             const isTheater = watchFlexyElement.hasAttribute('theater');
  5901.             const isDefault = watchFlexyElement.hasAttribute('default-layout');
  5902.  
  5903.             // if no mode change do nothing
  5904.             if ((isTheater && isTheaterMode === true) || (isDefault && isTheaterMode === false)) {
  5905.                 if (isFirstRun && isTheaterMode) {
  5906.                     if (subheaderDiv) subheaderDiv.addEventListener('click', handleTabViewTabClick);
  5907.                     isFirstRun = false;
  5908.                 } else if (isFirstRun && !isTheaterMode) isFirstRun = false;
  5909.             }
  5910.  
  5911.             if (isTheater) {
  5912.                 isTheaterMode = true;
  5913.  
  5914.                 const activeTab = watchFlexyElement.querySelector('.CentAnni-tabView-tab.active');
  5915.                 if (activeTab) lastActiveTab = activeTab.dataset.tab;
  5916.  
  5917.                 const tabs = watchFlexyElement.querySelectorAll('.CentAnni-tabView-tab');
  5918.                 tabs.forEach(tab => tab.classList.remove('active'));
  5919.                 currentActiveTab = null;
  5920.  
  5921.                 if (subheaderDiv) subheaderDiv.addEventListener('click', handleTabViewTabClick);
  5922.             } else if (isDefault) {
  5923.                 isTheaterMode = false;
  5924.                 if (lastActiveTab) activateTab(lastActiveTab);
  5925.                 else activateTab(determineActiveTab());
  5926.  
  5927.                 subheaderDiv.removeEventListener('click', handleTabViewTabClick);
  5928.             }
  5929.         }
  5930.  
  5931.         // mode change, navigation, and clean up
  5932.         document.addEventListener('yt-set-theater-mode-enabled', updateTabView);
  5933.         document.addEventListener('yt-navigate-start', () => {
  5934.             tabElements = [];
  5935.             subheaderDiv.removeEventListener('click', handleTabViewTabClick);
  5936.             document.removeEventListener('yt-set-theater-mode-enabled', updateTabView);
  5937.             tabElements.forEach(tab => { tab.element.removeEventListener('click', tab.handler); });
  5938.             watchFlexyElement.querySelectorAll('.CentAnni-tabView-tab').forEach(tab => tab.classList.remove('active') );
  5939.             if (hasTranscriptPanel) transcriptPanel.remove();
  5940.             if (hasChapterPanel) chapterPanel.remove();
  5941.             if (videoInfo) videoInfo.remove();
  5942.         });
  5943.  
  5944.         // click listener for tabView buttons
  5945.         function handleTabViewTabClick(event) {
  5946.             const tab = event.target.closest('.CentAnni-tabView-tab');
  5947.             if (!tab || !isTheaterMode) return;
  5948.             lastActiveTab = tab.dataset.tab;
  5949.             toggleTheaterMode();
  5950.         }
  5951.  
  5952.         // include date in info text under videos unless live
  5953.         const infoContainer = watchFlexyElement.querySelector('#info-container');
  5954.         const infoTime = infoContainer?.querySelector('yt-formatted-string span.bold:nth-child(3)');
  5955.  
  5956.         if (!isLiveVideo) {
  5957.             if (infoTime) {
  5958.                 if (!infoTime.parentNode?.querySelector('.CentAnni-info-date')) {
  5959.                     const dateStringElement = watchFlexyElement.querySelector('#info-strings yt-formatted-string');
  5960.                     const dateString = dateStringElement?.textContent?.trim() ?? "";
  5961.  
  5962.                     if (dateString) {
  5963.                         const newSpan = document.createElement('span');
  5964.                         newSpan.classList.add('CentAnni-info-date', 'bold', 'style-scope', 'yt-formatted-string');
  5965.                         newSpan.textContent = `(${dateString})`;
  5966.  
  5967.                         infoTime.parentNode?.insertBefore(newSpan, infoTime.nextSibling);
  5968.                     }
  5969.                 }
  5970.             }
  5971.         }
  5972.  
  5973.         // tabView location
  5974.         const secondaryElement = watchFlexyElement.querySelector('#secondary');
  5975.         if (!secondaryElement) return;
  5976.  
  5977.         // grab the info, chapter, and transcript panels and open one by default
  5978.         let videoInfo = watchFlexyElement.querySelector(infoSel);
  5979.  
  5980.         if (USER_CONFIG.autoOpenTranscript && transcriptPanel) {
  5981.             transcriptPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  5982.             if (!USER_CONFIG.YouTubeTranscriptExporter && USER_CONFIG.defaultTranscriptLanguage !== 'auto' && !transcriptLanguageSet){waitForTranscriptWithoutYTE(() => { setTimeout(()=>{setTranscriptLanguage(); },250);}); transcriptLanguageSet = true;}
  5983.             if (!USER_CONFIG.YouTubeTranscriptExporter && USER_CONFIG.transcriptTimestamps && !timestampsEnabled) {waitForTranscriptWithoutYTE(enableTimestamps); timestampsEnabled = true;}
  5984.             if (!USER_CONFIG.YouTubeTranscriptExporter && !transcriptMenuButtonMoved) {waitForTranscriptWithoutYTE(transcriptMenuButton); transcriptMenuButtonMoved = true;}
  5985.         }
  5986.         else if (USER_CONFIG.autoOpenChapters && chapterPanel) chapterPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  5987.         else if (videoInfo) videoInfo.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  5988.  
  5989.         const clipPanel = watchFlexyElement.querySelector('ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-clip-create]');
  5990.         if (clipPanel && clipPanel.getAttribute('visibility') === 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED') {
  5991.             clipPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_HIDDEN');
  5992.         }
  5993.  
  5994.         // create the main tabView container
  5995.         const newDiv = document.createElement('div');
  5996.         newDiv.classList.add('CentAnni-tabView');
  5997.  
  5998.         // create the header
  5999.         const headerDiv = document.createElement('div');
  6000.         headerDiv.classList.add('CentAnni-tabView-header');
  6001.  
  6002.         // create the subheader
  6003.         subheaderDiv = document.createElement('div');
  6004.         subheaderDiv.classList.add('CentAnni-tabView-subheader');
  6005.  
  6006.         // define the tabs
  6007.         const tabs = [
  6008.             'Info',
  6009.             ...(!isLiveVideo ? ['Comments'] : []),
  6010.             ...(hasPlaylistPanel ? ['Playlist'] : []),
  6011.             ...(watchFlexyElement.querySelector('ytd-donation-shelf-renderer') && !USER_CONFIG.hideFundraiser ? ['Donation'] : []),
  6012.             'Videos',
  6013.             ...((!isLiveVideo && hasChapterPanel) ? ['Chapters'] : []),
  6014.             ...((!isLiveVideo && hasTranscriptPanel) ? ['Transcript'] : []),
  6015.         ];
  6016.  
  6017.         // define the IDs
  6018.         const tabIds = {
  6019.             'Info': 'tab-1',
  6020.             'Comments': 'tab-2',
  6021.             'Playlist': 'tab-6',
  6022.             'Donation': 'tab-9',
  6023.             'Videos': 'tab-3',
  6024.             'Chapters': 'tab-4',
  6025.             'Transcript': 'tab-5'
  6026.         };
  6027.  
  6028.         // create content sections tabs
  6029.         const contentSections = [];
  6030.         tabs.forEach((tabText, index) => {
  6031.             const contentDiv = document.createElement('div');
  6032.             contentDiv.classList.add('CentAnni-tabView-content');
  6033.             contentDiv.id = tabIds[tabText];
  6034.             if (index === 0) {
  6035.                 contentDiv.classList.add('active');
  6036.                 currentActiveTab = tabIds[tabText];
  6037.             }
  6038.             contentSections.push(contentDiv);
  6039.         });
  6040.  
  6041.         // populate the comments sections
  6042.         const videoComments = watchFlexyElement.querySelector(cmtsSel);
  6043.         if (videoComments && contentSections[1]) contentSections[1].appendChild(videoComments);
  6044.  
  6045.         // create each tab link and add click behavior
  6046.         tabs.forEach((tabText, index) => {
  6047.             const tabLink = document.createElement('a');
  6048.             tabLink.classList.add('CentAnni-tabView-tab');
  6049.             tabLink.textContent = tabText;
  6050.             tabLink.href = `#${tabIds[tabText]}`;
  6051.             tabLink.dataset.tab = tabIds[tabText];
  6052.  
  6053.             const tabClickHandler = (event) => {
  6054.                 event.preventDefault();
  6055.  
  6056.                 // if clicked tab is active enter theater mode
  6057.                 if (currentActiveTab === tabIds[tabText] && !isTheaterMode) {
  6058.                     event.stopPropagation();
  6059.                     toggleTheaterMode();
  6060.                     return;
  6061.                 } else currentActiveTab = tabIds[tabText];
  6062.  
  6063.                 // remove 'active' from all tabs
  6064.                 watchFlexyElement.querySelectorAll('.CentAnni-tabView-tab').forEach(tab => tab.classList.remove('active'));
  6065.  
  6066.                 // mark clicked one as active
  6067.                 tabLink.classList.add('active');
  6068.  
  6069.                 // hide all content sections
  6070.                 watchFlexyElement.querySelectorAll('.CentAnni-tabView-content').forEach(content => {
  6071.                     content.classList.remove('active');
  6072.                 });
  6073.  
  6074.                 // show the target content section
  6075.                 const targetDiv = watchFlexyElement.querySelector(`#${tabIds[tabText]}`);
  6076.                 if (targetDiv) targetDiv.classList.add('active');
  6077.  
  6078.                 // info panel
  6079.                 if (videoInfo) videoInfo.setAttribute('visibility', tabText === 'Info' ? 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED' : 'ENGAGEMENT_PANEL_VISIBILITY_HIDDEN');
  6080.  
  6081.                 // playlist container
  6082.                 if (hasPlaylistPanel) {
  6083.                     if (tabText === 'Playlist') {
  6084.                         playlistPanel.classList.add('CentAnni-tabView-content-active');
  6085.                         playlistPanel.classList.remove('CentAnni-tabView-content-hidden');
  6086.                         if (playlistSelectedVideo) setTimeout(() => { playlistSelectedVideo.scrollIntoView({ behavior: 'instant', block: 'center' }); },25);
  6087.                     } else {
  6088.                         playlistPanel.classList.add('CentAnni-tabView-content-hidden');
  6089.                         playlistPanel.classList.remove('CentAnni-tabView-content-active');
  6090.                     }
  6091.                 }
  6092.  
  6093.                 // donation-shelf
  6094.                 const donationShelf = watchFlexyElement.querySelector('#donation-shelf');
  6095.                 if (donationShelf) {
  6096.                     if (tabText === 'Donation') {
  6097.                         donationShelf.classList.add('CentAnni-tabView-content-active');
  6098.                         donationShelf.classList.remove('CentAnni-tabView-content-hidden');
  6099.                     } else {
  6100.                         donationShelf.classList.add('CentAnni-tabView-content-hidden');
  6101.                         donationShelf.classList.remove('CentAnni-tabView-content-active');
  6102.                     }
  6103.                 }
  6104.  
  6105.                 // more videos
  6106.                 const videoMore = watchFlexyElement.querySelector('#related.style-scope.ytd-watch-flexy');
  6107.                 if (videoMore) {
  6108.                     if (tabText === 'Videos') {
  6109.                         videoMore.classList.add('CentAnni-tabView-content-attiva');
  6110.                         videoMore.classList.remove('CentAnni-tabView-content-nascosta');
  6111.                     } else {
  6112.                         videoMore.classList.add('CentAnni-tabView-content-nascosta');
  6113.                         videoMore.classList.remove('CentAnni-tabView-content-attiva');
  6114.                     }
  6115.                 }
  6116.  
  6117.                 // chapters panel
  6118.                 if (chapterPanel) chapterPanel.setAttribute('visibility', tabText === 'Chapters' ? 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED' : 'ENGAGEMENT_PANEL_VISIBILITY_HIDDEN');
  6119.  
  6120.                 // transcript panel
  6121.                 if (transcriptPanel) {
  6122.                     if (tabText === 'Transcript') {
  6123.                         transcriptPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  6124.                         if (!USER_CONFIG.YouTubeTranscriptExporter && USER_CONFIG.defaultTranscriptLanguage !== 'auto' && !transcriptLanguageSet){waitForTranscriptWithoutYTE(() => { setTimeout(()=>{setTranscriptLanguage(); },250);}); transcriptLanguageSet = true;}
  6125.                         if (!USER_CONFIG.YouTubeTranscriptExporter && USER_CONFIG.transcriptTimestamps && !timestampsEnabled) {waitForTranscriptWithoutYTE(enableTimestamps); timestampsEnabled = true;}
  6126.                         if (!USER_CONFIG.YouTubeTranscriptExporter && !transcriptMenuButtonMoved) {waitForTranscriptWithoutYTE(transcriptMenuButton); transcriptMenuButtonMoved = true;}
  6127.                     } else transcriptPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_HIDDEN');
  6128.                 }
  6129.             };
  6130.  
  6131.             tabElements.push({ element: tabLink, handler: tabClickHandler });
  6132.             tabLink.addEventListener('click', tabClickHandler);
  6133.             subheaderDiv.appendChild(tabLink);
  6134.         });
  6135.  
  6136.         headerDiv.appendChild(subheaderDiv);
  6137.         newDiv.appendChild(headerDiv);
  6138.         contentSections.forEach(section => newDiv.appendChild(section));
  6139.  
  6140.         const oldDiv = watchFlexyElement.querySelector(".CentAnni-tabView");
  6141.         if (oldDiv) oldDiv.replaceWith(newDiv);
  6142.         else secondaryElement.insertBefore(newDiv, secondaryElement.firstChild);
  6143.  
  6144.         updateTabView();
  6145.         if (USER_CONFIG.tabViewChapters && hasChapterPanel) chapterTitles();
  6146.     }
  6147.  
  6148.         // add chapter titles under videos
  6149.     async function chapterTitles() {
  6150.         let fullscreenContainer = watchFlexyElement.querySelector(fsCnSel);
  6151.         let titleElement = watchFlexyElement.querySelector('.ytp-chapter-container');
  6152.         let normalContainer = watchFlexyElement.querySelector('#description');
  6153.  
  6154.         if (!fullscreenContainer || !titleElement || !normalContainer) {
  6155.             const videoContainer = watchFlexyElement;if(!videoContainer)return;
  6156.             ({ fullscreenContainer, titleElement, normalContainer } = await new Promise((resolve, reject) => {
  6157.                 const timeout = setTimeout(() => {
  6158.                     console.error('YouTubeAlchemy: chapterTitles elements not found!');
  6159.                     observer.disconnect();
  6160.                     reject();
  6161.                 }, 7000);
  6162.  
  6163.                 const observer = new MutationObserver(() => {
  6164.                     const fullscreenContainerElement = watchFlexyElement.querySelector(fsCnSel);
  6165.                     const titleElementElement = watchFlexyElement.querySelector('.ytp-chapter-container');
  6166.                     const normalContainerElement = watchFlexyElement.querySelector('#description');
  6167.                     if (fullscreenContainerElement && titleElementElement && normalContainerElement) {
  6168.                         observer.disconnect();
  6169.                         clearTimeout(timeout);
  6170.                         resolve({fullscreenContainer:fullscreenContainerElement,titleElement:titleElementElement,normalContainer:normalContainerElement});
  6171.                     }
  6172.                 });
  6173.  
  6174.                 observer.observe(videoContainer, { childList: true, subtree: true });
  6175.             }));
  6176.         }
  6177.             if (!fullscreenContainer || !titleElement || !normalContainer) return;
  6178.  
  6179.             const parent = titleElement.parentNode;
  6180.             parent.removeChild(titleElement);
  6181.  
  6182.             const containerChapterTitle = document.createElement('div');
  6183.             containerChapterTitle.classList.add('CentAnni-chapter-title', 'bold', 'style-scope', 'yt-formatted-string');
  6184.  
  6185.             const label = document.createElement('span');
  6186.             label.textContent = 'Chapter:';
  6187.  
  6188.             containerChapterTitle.appendChild(label);
  6189.             containerChapterTitle.appendChild(titleElement);
  6190.  
  6191.         const existingContainerChapterTitle = watchFlexyElement.querySelector('.CentAnni-chapter-title');
  6192.             if (existingContainerChapterTitle) existingContainerChapterTitle.replaceWith(containerChapterTitle);
  6193.             else normalContainer.appendChild(containerChapterTitle);
  6194.  
  6195.             const updateContainer = () => {
  6196.             const currentContainer = watchFlexyElement.querySelector('.CentAnni-chapter-title');
  6197.             const targetContainer = playerElement?.classList.contains('ytp-fullscreen')
  6198.                     ? fullscreenContainer
  6199.                     : normalContainer;
  6200.  
  6201.                 if (currentContainer) targetContainer.appendChild(currentContainer);
  6202.                 else targetContainer.appendChild(containerChapterTitle);
  6203.             };
  6204.  
  6205.             function handleFullscreenChangeCT() { updateContainer(); }
  6206.             document.removeEventListener('fullscreenchange', handleFullscreenChangeCT);
  6207.             document.addEventListener('fullscreenchange', handleFullscreenChangeCT);
  6208.     }
  6209.  
  6210.     // function to hide the 'X Products' span
  6211.     function hideProductsSpan() {
  6212.         const spans = watchFlexyElement.querySelectorAll('yt-formatted-string#info > span');
  6213.         spans.forEach(span => {
  6214.             if (span.textContent.includes('products')) {
  6215.                 span.style.display = 'none';
  6216.             }
  6217.         });
  6218.     }
  6219.  
  6220.     // playback speed functions
  6221.     function initialSpeed() {
  6222.         document.removeEventListener('yt-player-updated', initialSpeed);
  6223.  
  6224.         const video = document.querySelector('video.html5-main-video[style]');
  6225.         if (!video) return;
  6226.  
  6227.         if (USER_CONFIG.VerifiedArtist) {
  6228.             const isMusicVideoMeta = !!( docElement.querySelector('meta[itemprop="genre"][content="Music"]') && docElement.querySelector('ytd-watch-flexy #below ytd-badge-supported-renderer .badge-style-type-verified-artist'));
  6229.             if (isMusicVideoMeta) { video.playbackRate = 1; return; }
  6230.         }
  6231.  
  6232.         if (new URL(window.location.href).pathname.startsWith('/shorts/')) video.playbackRate = lastUserRate !== null ? lastUserRate : defaultSpeed;
  6233.         else if (document.querySelector('.ytp-time-display')?.classList.contains('ytp-live')) video.playbackRate = 1;
  6234.         else video.playbackRate = defaultSpeed;
  6235.     }
  6236.  
  6237.     // speed controller
  6238.     async function createPlaybackSpeedController(options = {}) {
  6239.         const { videoSelector = 'video.html5-main-video[style]' } = options;
  6240.         const MIN_SPEED = 0.25;
  6241.         const MAX_SPEED = 17;
  6242.         const STEP_SIZE = 0.25;
  6243.  
  6244.         let video = watchFlexyElement.querySelector(videoSelector);
  6245.         if (!video) {
  6246.             const videoContainer = watchFlexyElement.querySelector('ytd-player');if(!videoContainer)return;
  6247.             video = await new Promise((resolve, reject) => {
  6248.                 const timeout = setTimeout(() => {
  6249.                     console.error('YouTubeAlchemy: createPlaybackSpeedController video not found!')
  6250.                     observer.disconnect();
  6251.                     reject();
  6252.                 }, 7000);
  6253.  
  6254.                 const observer = new MutationObserver(() => {
  6255.                     const videoElement = watchFlexyElement.querySelector(videoSelector);
  6256.                     if (videoElement) {
  6257.                         observer.disconnect();
  6258.                         clearTimeout(timeout);
  6259.                         resolve(videoElement);
  6260.                     }
  6261.                 });
  6262.  
  6263.                 observer.observe(videoContainer, { childList: true, subtree: true, });
  6264.             });
  6265.         }
  6266.         if (!video) return null;
  6267.  
  6268.         function updateSpeedDisplay() {
  6269.             const speedDisplay = document.getElementById("CentAnni-speed-display");
  6270.             if (speedDisplay && video) speedDisplay.textContent = `${video.playbackRate}x`;
  6271.         }
  6272.  
  6273.         // set playback speed and update display
  6274.         function setSpeed() {
  6275.             ignoreRateChange = true;
  6276.             const clamped = Math.max(MIN_SPEED, Math.min(MAX_SPEED, video.playbackRate));
  6277.             video.playbackRate = clamped;
  6278.             video.mozPreservesPitch = video.webkitPreservesPitch = video.preservePitch = true;
  6279.  
  6280.             updateSpeedDisplay();
  6281.             lastUserRate = video.playbackRate;
  6282.             if (speedNotification) showSpeedNotification(video.playbackRate);
  6283.         }
  6284.  
  6285.         // initial speed setting
  6286.         function initializeSpeed() {
  6287.             if (isShortPage) { video.playbackRate = lastUserRate !== null ? lastUserRate : defaultSpeed; }
  6288.             else if ((USER_CONFIG.VerifiedArtist && isMusicVideo) || isLiveVideo || isLiveStream) video.playbackRate = 1;
  6289.             else video.playbackRate = defaultSpeed;
  6290.  
  6291.             video.addEventListener('ratechange', updateSpeedDisplay);
  6292.             setSpeed();
  6293.             speedNotification = true;
  6294.         }
  6295.  
  6296.         // handle rate change events
  6297.         function onRateChange() {
  6298.             if (ignoreRateChange) { ignoreRateChange = false; return; }
  6299.             else video.playbackRate = lastUserRate;
  6300.         }
  6301.  
  6302.         // keyboard control handler
  6303.         function playbackSpeedKeyListener(event) {
  6304.             const key = event.key?.toLowerCase?.();
  6305.             const isValidKey = ['a', 's', 'd'].includes(key);
  6306.  
  6307.             const tagName = event.target?.tagName?.toLowerCase?.() || '';
  6308.             const isTextInput = ['input', 'textarea', 'select', 'contenteditable'].includes(tagName) || event.target?.isContentEditable;
  6309.  
  6310.             if (!video || !isValidKey || isTextInput) return;
  6311.  
  6312.             switch (key) {
  6313.                 case 's':
  6314.                     video.playbackRate = (video.playbackRate !== 1 ? 1 : defaultSpeed);
  6315.                     setSpeed();
  6316.                     break;
  6317.                 case 'a':
  6318.                     video.playbackRate = video.playbackRate - STEP_SIZE;
  6319.                     setSpeed();
  6320.                     break;
  6321.                 case 'd':
  6322.                     video.playbackRate = video.playbackRate + STEP_SIZE;
  6323.                     setSpeed();
  6324.                     break;
  6325.             }
  6326.         }
  6327.  
  6328.         // setup event listeners
  6329.         function setupEventListeners() {
  6330.             video.addEventListener('ratechange', onRateChange);
  6331.             window.addEventListener('keydown', playbackSpeedKeyListener);
  6332.  
  6333.             // clean up event listeners on navigation
  6334.             document.addEventListener('yt-navigate-start', () => {
  6335.                 window.removeEventListener('keydown', playbackSpeedKeyListener);
  6336.                 video.removeEventListener('ratechange', updateSpeedDisplay);
  6337.                 video.removeEventListener('ratechange', onRateChange);
  6338.                 speedNotification = false;
  6339.             });
  6340.         }
  6341.  
  6342.         // initialize function return controller API
  6343.         initializeSpeed();
  6344.         setupEventListeners();
  6345.         return {
  6346.             video,
  6347.             setSpeed,
  6348.             STEP_SIZE,
  6349.         };
  6350.     }
  6351.  
  6352.     // playback speed regular videos
  6353.     async function videoPlaybackSpeed() {
  6354.         let menuRenderer = watchFlexyElement.querySelector(menuSel);
  6355.         if (!menuRenderer) {
  6356.             await new Promise((resolve) => {
  6357.                 const observer = new MutationObserver((mutations, obs) => {
  6358.                     if ((menuRenderer = watchFlexyElement.querySelector(menuSel))) {
  6359.                         clearTimeout(timeout);
  6360.                         obs.disconnect();
  6361.                         resolve();
  6362.                     }
  6363.                 });
  6364.  
  6365.                 observer.observe(docBody, {
  6366.                     childList: true,
  6367.                     subtree: true
  6368.                 });
  6369.  
  6370.                 const timeout = setTimeout(() => {
  6371.                     observer.disconnect();
  6372.                     resolve();
  6373.                 }, 7000);
  6374.             });
  6375.  
  6376.             if (!menuRenderer) return;
  6377.         }
  6378.  
  6379.         // create controller
  6380.         const controller = await createPlaybackSpeedController();
  6381.         if (!controller) return;
  6382.         const { video, setSpeed, STEP_SIZE } = controller;
  6383.  
  6384.         // create container for buttons, display speed, and icon
  6385.         const oldControlDiv = document.getElementById("CentAnni-playback-speed-control");
  6386.         if (menuRenderer) {
  6387.             const controlDiv = document.createElement("div");
  6388.             controlDiv.id = "CentAnni-playback-speed-control";
  6389.             controlDiv.classList.add(
  6390.                 "CentAnni-playback-control",
  6391.                 "top-level-buttons",
  6392.                 "style-scope",
  6393.                 "ytd-menu-renderer"
  6394.             );
  6395.  
  6396.             // create the SVG icon
  6397.             const iconDiv = document.createElement("div");
  6398.             iconDiv.className = "CentAnni-playback-speed-icon";
  6399.  
  6400.             const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  6401.             svg.setAttribute("fill", "none");
  6402.             svg.setAttribute("height", "24");
  6403.             svg.setAttribute("viewBox", "0 0 24 24");
  6404.             svg.setAttribute("width", "24");
  6405.  
  6406.             const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  6407.             path.setAttribute("d", "M10,8v8l6-4L10,8L10,8z M6.3,5L5.7,4.2C7.2,3,9,2.2,11,2l0.1,1C9.3,3.2,7.7,3.9,6.3,5z            M5,6.3L4.2,5.7C3,7.2,2.2,9,2,11 l1,.1C3.2,9.3,3.9,7.7,5,6.3z            M5,17.7c-1.1-1.4-1.8-3.1-2-4.8L2,13c0.2,2,1,3.8,2.2,5.4L5,17.7z            M11.1,21c-1.8-0.2-3.4-0.9-4.8-2 l-0.6,.8C7.2,21,9,21.8,11,22L11.1,21z            M22,12c0-5.2-3.9-9.4-9-10l-0.1,1c4.6,.5,8.1,4.3,8.1,9s-3.5,8.5-8.1,9l0.1,1 C18.2,21.5,22,17.2,22,12z");
  6408.             path.setAttribute("fill", "whitesmoke");
  6409.  
  6410.             svg.appendChild(path);
  6411.             iconDiv.appendChild(svg);
  6412.             controlDiv.appendChild(iconDiv);
  6413.  
  6414.             // display the speed
  6415.             const speedDisplay = document.createElement("span");
  6416.             speedDisplay.id = "CentAnni-speed-display";
  6417.             speedDisplay.classList.add(
  6418.                 "CentAnni-playback-speed-display",
  6419.                 "animated-rolling-number-wiz"
  6420.             );
  6421.             speedDisplay.textContent = video ? `${video.playbackRate}x` : `${defaultSpeed}x`;
  6422.  
  6423.             // create minus and plus buttons
  6424.             const createButton = (change) => {
  6425.                 const button = document.createElement("button");
  6426.                 button.textContent = change > 0 ? "+" : "-";
  6427.                 button.classList.add(
  6428.                     "CentAnni-playback-speed-button",
  6429.                     "yt-spec-button-shape-next",
  6430.                     "yt-spec-button-shape-next--tonal",
  6431.                     "yt-spec-button-shape-next--mono",
  6432.                     "yt-spec-button-shape-next--size-m",
  6433.                     "yt-spec-button-shape-next--icon-button"
  6434.                 );
  6435.                 button.addEventListener("click", () => {
  6436.                     video.playbackRate = video.playbackRate + change;
  6437.                     setSpeed();
  6438.                 });
  6439.                 return button;
  6440.             };
  6441.  
  6442.             controlDiv.appendChild(createButton(-STEP_SIZE));
  6443.             controlDiv.appendChild(speedDisplay);
  6444.             controlDiv.appendChild(createButton(STEP_SIZE));
  6445.  
  6446.             if (oldControlDiv) oldControlDiv.replaceWith(controlDiv);
  6447.             else menuRenderer.children[0].after(controlDiv);
  6448.         }
  6449.     }
  6450.  
  6451.     // playback speed notification
  6452.     function showSpeedNotification(speed) {
  6453.         if (!isVideoPage && !isLiveStream && !isShortPage) return;
  6454.         const fullscreenContainer = watchFlexyElement.querySelector('#movie_player');
  6455.         let notification = document.getElementById('CentAnni-playback-speed-popup');
  6456.         if (!notification) {
  6457.             notification = document.createElement('div');
  6458.             notification.id = 'CentAnni-playback-speed-popup';
  6459.             if (!isFullscreen) docBody.appendChild(notification);
  6460.             else fullscreenContainer.appendChild(notification);
  6461.         }
  6462.  
  6463.         notification.textContent = `${speed}x`;
  6464.         notification.classList.add('active');
  6465.  
  6466.         if (hideNotificationTimeout) clearTimeout(hideNotificationTimeout);
  6467.         hideNotificationTimeout = setTimeout(() => {
  6468.             notification.classList.remove('active');
  6469.         }, 900);
  6470.  
  6471.         if (isFullscreen) fullscreenContainer.appendChild(notification);
  6472.         else docBody.appendChild(notification);
  6473.     }
  6474.  
  6475.     // function to display the remaining time based on playback speed minus SponsorBlock segments
  6476.     async function remainingTime() {
  6477.         let fullscreenContainer = watchFlexyElement.querySelector(fsCnSel);
  6478.         let normalContainer = watchFlexyElement.querySelector(prBeSel);
  6479.         let video = watchFlexyElement.querySelector('.video-stream.html5-main-video');
  6480.  
  6481.         if (!fullscreenContainer || !normalContainer || !video) {
  6482.             const videoContainer = watchFlexyElement;if(!videoContainer)return;
  6483.             ({ fullscreenContainer, normalContainer, video } = await new Promise((resolve, reject) => {
  6484.                 const timeout = setTimeout(() => {
  6485.                     console.error('YouTubeAlchemy: remainingTime elements not found!');
  6486.                     observer.disconnect();
  6487.                     reject();
  6488.                 }, 7000);
  6489.  
  6490.                 const observer = new MutationObserver(() => {
  6491.                     const fullscreenContainerElement = watchFlexyElement.querySelector(fsCnSel);
  6492.                     const normalContainerElement = watchFlexyElement.querySelector(prBeSel);
  6493.                     const videoElement = watchFlexyElement.querySelector('.video-stream.html5-main-video');
  6494.                     if (fullscreenContainerElement && normalContainerElement && videoElement) {
  6495.                         observer.disconnect();
  6496.                         clearTimeout(timeout);
  6497.                         resolve({fullscreenContainer:fullscreenContainerElement,normalContainer:normalContainerElement,video:videoElement});
  6498.                     }
  6499.                 });
  6500.  
  6501.                 observer.observe(videoContainer, { childList: true, subtree: true });
  6502.             }));
  6503.         }
  6504.         if (!fullscreenContainer || !normalContainer || !video) return;
  6505.  
  6506.         // function to format seconds into time string
  6507.         function formatTime(seconds) {
  6508.             if (!isFinite(seconds) || seconds < 0) seconds = 0;
  6509.             const h = Math.floor(seconds / 3600);
  6510.             const m = Math.floor((seconds % 3600) / 60);
  6511.             const s = Math.floor(seconds % 60);
  6512.             return h > 0
  6513.                 ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  6514.                 : `${m}:${s.toString().padStart(2, '0')}`;
  6515.         }
  6516.  
  6517.         const element = document.createElement('div');
  6518.         element.classList.add('CentAnni-remaining-time-container');
  6519.  
  6520.         const textNode = document.createTextNode('');
  6521.         element.appendChild(textNode);
  6522.  
  6523.         const initialContainer = normalContainer;
  6524.         if (initialContainer) { initialContainer.prepend(element); }
  6525.  
  6526.         // hide for live stream
  6527.         if (isLiveVideo) element.classList.add('live');
  6528.         else element.classList.remove('live');
  6529.  
  6530.         const updateContainer = () => {
  6531.             const currentContainer = watchFlexyElement.querySelector('.CentAnni-remaining-time-container');
  6532.             const targetContainer = playerElement?.classList.contains('ytp-fullscreen')
  6533.                 ? fullscreenContainer
  6534.                 : normalContainer;
  6535.  
  6536.             if (currentContainer && currentContainer.parentNode !== targetContainer) {
  6537.                 if (targetContainer === fullscreenContainer) {
  6538.                     targetContainer.appendChild(currentContainer);
  6539.                 } else {
  6540.                     targetContainer.prepend(currentContainer);
  6541.                     if (getComputedStyle(normalContainer).position === 'static') {
  6542.                         normalContainer.style.position = 'relative';
  6543.                     }
  6544.                 }
  6545.             }
  6546.         };
  6547.  
  6548.         updateContainer();
  6549.         function handleFullscreenChange() { updateContainer(); }
  6550.         document.removeEventListener('fullscreenchange', handleFullscreenChange);
  6551.         document.addEventListener('fullscreenchange', handleFullscreenChange);
  6552.  
  6553.         // time update event listener
  6554.         if (video) {
  6555.             if (!video.paused && !video.ended && video.readyState > 2) remainingTimeMinusSponsorBlockSegments();
  6556.             else video.addEventListener('playing', remainingTimeMinusSponsorBlockSegments, { once: true });
  6557.         }
  6558.  
  6559.         // calculates and displays remaining time while accounting for SponsorBlock segments
  6560.         function remainingTimeMinusSponsorBlockSegments() {
  6561.             let baseEffective = NaN;
  6562.             let cachedSegments = null;
  6563.             let lastVideoTime = -1;
  6564.             let lastDuration = -1;
  6565.  
  6566.             // retrieves and validates video duration
  6567.             function ensureBaseEffectiveIsValid() {
  6568.                 if (!isNaN(baseEffective)) return;
  6569.                 if (!video.duration || isNaN(video.duration) || video.duration <= 0) return;
  6570.  
  6571.                 const sponsorBlockTimeElement = document.getElementById('sponsorBlockDurationAfterSkips');
  6572.                 if (sponsorBlockTimeElement && sponsorBlockTimeElement.textContent.trim()) {
  6573.                     const rawText = sponsorBlockTimeElement.textContent.trim().replace(/[()]/g, '');
  6574.                     baseEffective = parseTime(rawText);
  6575.                 } else baseEffective = video.duration;
  6576.             }
  6577.  
  6578.             // retrieves SponsorBlock segments from preview bar
  6579.             function getSegments(rawDuration) {
  6580.                 if (rawDuration === lastDuration && cachedSegments) return cachedSegments;
  6581.  
  6582.                 const segments = [];
  6583.                 const previewbar = document.getElementById('previewbar');
  6584.                 if (previewbar) {
  6585.                     const liElements = previewbar.querySelectorAll('li.previewbar');
  6586.                     liElements.forEach(li => {
  6587.                         const category = li.getAttribute('sponsorblock-category');
  6588.                         const style = li.getAttribute('style');
  6589.                         const leftMatch = style.match(/left:\s*([\d.]+)%/);
  6590.                         const rightMatch = style.match(/right:\s*([\d.]+)%/);
  6591.                         if (leftMatch && rightMatch) {
  6592.                             const leftFraction = parseFloat(leftMatch[1]) / 100;
  6593.                             const rightFraction = parseFloat(rightMatch[1]) / 100;
  6594.                             const startTime = Math.round(rawDuration * leftFraction * 1000) / 1000;
  6595.                             const endTime = Math.round(rawDuration * (1 - rightFraction) * 1000) / 1000;
  6596.                             const segDuration = Math.round((endTime - startTime) * 1000) / 1000;
  6597.                             if (segDuration > 0)
  6598.                                 segments.push({ category, start: startTime, duration: segDuration, end: endTime });
  6599.                         }
  6600.                     });
  6601.                 }
  6602.  
  6603.                 lastDuration = rawDuration;
  6604.                 cachedSegments = segments;
  6605.                 return segments;
  6606.             }
  6607.  
  6608.             // merges SponsorBlock segments that overlap
  6609.             function mergeSegments(segments) {
  6610.                 if (!segments.length) return segments;
  6611.                 segments.sort((a, b) => a.start - b.start);
  6612.                 const merged = [segments[0]];
  6613.                 for (let i = 1; i < segments.length; i++) {
  6614.                     const last = merged[merged.length - 1];
  6615.                     const current = segments[i];
  6616.                     if (current.start <= last.end + 0.001) {
  6617.                         last.end = Math.max(last.end, current.end);
  6618.                         last.duration = Math.round((last.end - last.start) * 1000) / 1000;
  6619.                     } else merged.push(current);
  6620.                 }
  6621.                 return merged;
  6622.             }
  6623.  
  6624.             function computeAddedTime(segments, currentTime) {
  6625.                 let sum = 0;
  6626.                 segments.forEach(seg => {
  6627.                     if (currentTime >= seg.start - 0.001) {
  6628.                         sum += seg.duration;
  6629.                     }
  6630.                 });
  6631.                 return Math.round(sum * 1000) / 1000;
  6632.             }
  6633.  
  6634.             // debounce the update to prevent excessive updates
  6635.             let animationFrameId = null;
  6636.             video.ontimeupdate = () => {
  6637.                 if (animationFrameId) cancelAnimationFrame(animationFrameId);
  6638.  
  6639.                 animationFrameId = requestAnimationFrame(() => {
  6640.                     ensureBaseEffectiveIsValid();
  6641.                     if (isNaN(baseEffective)) return;
  6642.  
  6643.                     const rawDuration = video.duration;
  6644.                     const currentTime = video.currentTime;
  6645.  
  6646.                     if (Math.abs(currentTime - lastVideoTime) < 0.2) {
  6647.                         animationFrameId = null;
  6648.                         return;
  6649.                     }
  6650.  
  6651.                     lastVideoTime = currentTime;
  6652.  
  6653.                     const playbackRate = video.playbackRate;
  6654.                     const rawSegments = getSegments(rawDuration);
  6655.                     const segments = mergeSegments(rawSegments);
  6656.                     const addedTime = computeAddedTime(segments, currentTime);
  6657.                     const effectiveTotal = baseEffective + addedTime;
  6658.                     const remaining = (effectiveTotal - currentTime) / playbackRate;
  6659.                     const watchedPercent = rawDuration ? Math.round((currentTime / rawDuration) * 100) + '%' : '0%';
  6660.                     const totalFormatted = formatTime(baseEffective);
  6661.                     const elapsedFormatted = formatTime(currentTime);
  6662.                     const remainingFormatted = formatTime(remaining);
  6663.  
  6664.                     textNode.data = `total: ${totalFormatted} | elapsed: ${elapsedFormatted} — watched: ${watchedPercent} — remaining: ${remainingFormatted} (${playbackRate}x)`;
  6665.  
  6666.                     animationFrameId = null;
  6667.                 });
  6668.             };
  6669.         }
  6670.     }
  6671.  
  6672.     // helper function to convert a time string into seconds
  6673.     function parseTime(timeString) {
  6674.         const parts = timeString.split(':').map(Number);
  6675.         if (parts.length === 2) return parts[0] * 60 + parts[1];
  6676.         else if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
  6677.         return 0;
  6678.     }
  6679.  
  6680.     // function to keep the progress bar visible with chapters container
  6681.     async function keepProgressBarVisible() {
  6682.         let player = watchFlexyElement?.querySelector(vidPSel);
  6683.         let video = player?.querySelector('video[src]');
  6684.         let chaptersContainer = player && player.querySelector(chapSel);
  6685.         let progressBarContainer = player && player.querySelector(prBaSel);
  6686.  
  6687.         if (!player || !video || !chaptersContainer || !progressBarContainer) {
  6688.             const videoContainer = watchFlexyElement.querySelector('ytd-player');if(!videoContainer)return;
  6689.             ({ player, video, chaptersContainer, progressBarContainer } = await new Promise((resolve, reject) => {
  6690.                 const timeout = setTimeout(() => {
  6691.                     console.error('YouTubeAlchemy: progress bar elements not found!');
  6692.                     observer.disconnect();
  6693.                     reject();
  6694.                 }, 7000);
  6695.  
  6696.                 const observer = new MutationObserver(() => {
  6697.                     const playerElement = watchFlexyElement?.querySelector(vidPSel);
  6698.                     if (playerElement) {
  6699.                         const videoElement = playerElement.querySelector('video[src]');
  6700.                         const chaptersContainerElement = playerElement.querySelector(chapSel);
  6701.                         const progressBarContainerElement = playerElement.querySelector(prBaSel);
  6702.                         if (playerElement && videoElement && chaptersContainerElement && progressBarContainerElement) {
  6703.                             observer.disconnect();
  6704.                             clearTimeout(timeout);
  6705.                             resolve({player:playerElement,video:videoElement,chaptersContainer:chaptersContainerElement,progressBarContainer:progressBarContainerElement});
  6706.                         }
  6707.                     }
  6708.                 });
  6709.  
  6710.                 observer.observe(videoContainer, { childList: true, subtree: true });
  6711.             }));
  6712.         }
  6713.         if (!player || !video || !chaptersContainer || !progressBarContainer ) return;
  6714.  
  6715.         docElement.classList.add('progressBar');
  6716.  
  6717.         const bar = document.createElement('div');
  6718.         bar.id = 'progress-bar-bar';
  6719.  
  6720.         const progress = document.createElement('div');
  6721.         progress.id = 'progress-bar-progress';
  6722.  
  6723.         const buffer = document.createElement('div');
  6724.         buffer.id = 'progress-bar-buffer';
  6725.  
  6726.         const startDiv = document.createElement('div');
  6727.         startDiv.id = 'progress-bar-start';
  6728.  
  6729.         const endDiv = document.createElement('div');
  6730.         endDiv.id = 'progress-bar-end';
  6731.  
  6732.         player.appendChild(bar);
  6733.         bar.appendChild(buffer);
  6734.         bar.appendChild(progress);
  6735.         player.appendChild(startDiv);
  6736.         player.appendChild(endDiv);
  6737.  
  6738.         progress.style.transform = 'scaleX(0)';
  6739.  
  6740.         // live stream check
  6741.         if (isLiveVideo) {
  6742.             bar.classList.remove('active');
  6743.             startDiv.classList.remove('active');
  6744.             endDiv.classList.remove('active');
  6745.         } else {
  6746.             bar.classList.add('active');
  6747.             startDiv.classList.add('active');
  6748.             endDiv.classList.add('active');
  6749.         }
  6750.  
  6751.         let animationFrameId;
  6752.         function animateProgress() {
  6753.             const fraction = video.currentTime / video.duration;
  6754.             progress.style.transform = `scaleX(${fraction})`;
  6755.             animationFrameId = requestAnimationFrame(animateProgress);
  6756.         }
  6757.         animationFrameId = requestAnimationFrame(animateProgress);
  6758.  
  6759.         function renderBuffer() {
  6760.             for (let i = video.buffered.length - 1; i >= 0; i--) {
  6761.                 if (video.currentTime < video.buffered.start(i)) continue;
  6762.                 buffer.style.transform = `scaleX(${video.buffered.end(i) / video.duration})`;
  6763.                 break;
  6764.             }
  6765.         }
  6766.  
  6767.         video.addEventListener('progress', renderBuffer);
  6768.         video.addEventListener('seeking', renderBuffer);
  6769.  
  6770.         // chapters container
  6771.         let previousChaptersLength = 0;
  6772.         let cachedMaskImage = null;
  6773.  
  6774.         function updateLayout() {
  6775.             const initialWidth = progressBarContainer.getBoundingClientRect().width;
  6776.  
  6777.             let attempts = 0;
  6778.             const maxAttempts = 6;
  6779.  
  6780.             const waitForSizeChange = new Promise((resolve) => {
  6781.                 const intervalId = setInterval(() => {
  6782.                     const currentWidth = progressBarContainer.getBoundingClientRect().width;
  6783.  
  6784.                     if (currentWidth !== initialWidth) { clearInterval(intervalId); resolve(); }
  6785.                     else if (++attempts >= maxAttempts) { clearInterval(intervalId); resolve(); }
  6786.                 }, 250);
  6787.             });
  6788.  
  6789.             waitForSizeChange.then(() => {
  6790.                 const playerRect = player.getBoundingClientRect();
  6791.                 const progressBarRect = progressBarContainer.getBoundingClientRect();
  6792.                 const progressBarWidth = progressBarRect.width;
  6793.  
  6794.                 bar.style.position = 'absolute';
  6795.                 bar.style.left = (progressBarRect.left - playerRect.left) + 'px';
  6796.                 bar.style.width = progressBarWidth + 'px';
  6797.  
  6798.                 if (chaptersContainer) {
  6799.                     const chapters = chaptersContainer.querySelectorAll('.ytp-chapter-hover-container');
  6800.  
  6801.                     // Only regenerate SVG if chapters changed
  6802.                     if (chapters.length !== previousChaptersLength || !cachedMaskImage) {
  6803.                         previousChaptersLength = chapters.length;
  6804.  
  6805.                         if (chapters.length) {
  6806.                             const svgWidth = 100;
  6807.                             const svgHeight = 10;
  6808.                             let rects = '';
  6809.  
  6810.                             chapters.forEach((chapter) => {
  6811.                                 const rect = chapter.getBoundingClientRect();
  6812.                                 const startPx = rect.left - progressBarRect.left;
  6813.                                 const chapterWidth = rect.width;
  6814.  
  6815.                                 const startPerc = (startPx / progressBarWidth) * svgWidth;
  6816.                                 const widthPerc = (chapterWidth / progressBarWidth) * svgWidth;
  6817.  
  6818.                                 rects += `<rect x="${startPerc}" y="0" width="${widthPerc}" height="${svgHeight}" fill="white"/>`;
  6819.                             });
  6820.  
  6821.                             const svg = `<svg width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">${rects}</svg>`;
  6822.                             const encoded = encodeURIComponent(svg).replace(/%20/g, ' ');
  6823.                             cachedMaskImage = `url("data:image/svg+xml;utf8,${encoded}")`;
  6824.                         } else {
  6825.                             cachedMaskImage = null;
  6826.                         }
  6827.                     }
  6828.  
  6829.                     // Apply mask based on current state
  6830.                     if (cachedMaskImage) {
  6831.                         bar.style.maskImage = cachedMaskImage;
  6832.                         bar.style.webkitMaskImage = cachedMaskImage;
  6833.                         bar.style.maskRepeat = 'no-repeat';
  6834.                         bar.style.webkitMaskRepeat = 'no-repeat';
  6835.                         bar.style.maskSize = '100% 100%';
  6836.                         bar.style.webkitMaskSize = '100% 100%';
  6837.                     } else {
  6838.                         bar.style.maskImage = '';
  6839.                         bar.style.webkitMaskImage = '';
  6840.                         bar.style.maskRepeat = '';
  6841.                         bar.style.webkitMaskRepeat = '';
  6842.                         bar.style.maskSize = '';
  6843.                         bar.style.webkitMaskSize = '';
  6844.                     }
  6845.                 }
  6846.             });
  6847.         }
  6848.  
  6849.         // handle layout changes
  6850.         function handleTheaterMode() { updateLayout(); }
  6851.         function handleResize() { updateLayout(); }
  6852.         document.addEventListener('yt-set-theater-mode-enabled', handleTheaterMode);
  6853.         window.addEventListener('resize', handleResize);
  6854.  
  6855.         // handle cleanup
  6856.         function cleanupProgressBar() {
  6857.             document.removeEventListener('yt-set-theater-mode-enabled', handleTheaterMode);
  6858.             video.removeEventListener('progress', renderBuffer);
  6859.             video.removeEventListener('seeking', renderBuffer);
  6860.             window.removeEventListener('resize', handleResize);
  6861.             window.cancelAnimationFrame(animationFrameId);
  6862.         }
  6863.         document.addEventListener('yt-navigate-start', cleanupProgressBar);
  6864.  
  6865.         // initialization
  6866.         renderBuffer();
  6867.         updateLayout();
  6868.     }
  6869.  
  6870.     // close live chat initially
  6871.     function closeLiveChat() {
  6872.         const chatFrame = document.querySelector('ytd-live-chat-frame');
  6873.         if (!chatFrame) return;
  6874.  
  6875.         const retryInterval = 250;
  6876.         const maxRetries = 12;
  6877.         let iframeAttempts = 0;
  6878.         let buttonAttempts = 0;
  6879.  
  6880.         function tryCloseChat() {
  6881.             const iframe = document.querySelector('#chatframe');
  6882.             if (!iframe?.contentWindow?.document) {
  6883.                 if (iframeAttempts < maxRetries) {
  6884.                     iframeAttempts++;
  6885.                     setTimeout(tryCloseChat, retryInterval);
  6886.                 } else {
  6887.                     docElement.classList.remove('CentAnni-close-live-chat');
  6888.                     initialRun = false;
  6889.                 }
  6890.                 return;
  6891.             }
  6892.  
  6893.             const button = iframe.contentWindow.document.querySelector('#close-button button');
  6894.             if (!button) {
  6895.                 if (buttonAttempts < maxRetries) {
  6896.                     buttonAttempts++;
  6897.                     setTimeout(tryCloseChat, retryInterval);
  6898.                 } else {
  6899.                     docElement.classList.remove('CentAnni-close-live-chat');
  6900.                     initialRun = false;
  6901.                 }
  6902.                 return;
  6903.             }
  6904.  
  6905.             button.click();
  6906.  
  6907.             const chatElement = document.querySelector('ytd-live-chat-frame#chat');
  6908.             const observer = new MutationObserver((mutations) => {
  6909.                 if (chatElement.hasAttribute('collapsed')) {
  6910.                     removeChatCSS();
  6911.                     clearTimeout(fallbackTimer);
  6912.                     observer.disconnect();
  6913.                 }
  6914.             });
  6915.  
  6916.             observer.observe(chatElement, {
  6917.                 attributes: true,
  6918.                 attributeFilter: ['collapsed']
  6919.             });
  6920.  
  6921.             const fallbackTimer = setTimeout(() => {
  6922.                 if (initialRun) {
  6923.                     removeChatCSS();
  6924.                     observer.disconnect();
  6925.                 }
  6926.             }, 3000);
  6927.  
  6928.             function removeChatCSS() {
  6929.                 initialRun = false;
  6930.                 setTimeout(() => { docElement.classList.remove('CentAnni-close-live-chat'); }, 250);
  6931.             }
  6932.         }
  6933.  
  6934.         tryCloseChat();
  6935.     }
  6936.  
  6937.     // set video quality
  6938.     function setVideoQuality(desiredQuality, defaultQualityPremium) {
  6939.         let qualitySet = null;
  6940.         let qualityUHD = null;
  6941.         let found = false;
  6942.  
  6943.         // define quality levels
  6944.         const qualityLevels = [
  6945.             'highres',
  6946.             'hd2160',
  6947.             'hd1440',
  6948.             'hd1080',
  6949.             'hd720',
  6950.             'large',
  6951.             'medium',
  6952.             'small',
  6953.             'tiny'
  6954.         ];
  6955.  
  6956.         // get the YouTube player
  6957.         const player = document.getElementById("movie_player");
  6958.         if (!player?.getAvailableQualityLevels) return;
  6959.  
  6960.         // get available qualities for the video and check for UHD
  6961.         const availableQualities = player.getAvailableQualityLevels();
  6962.         if ( availableQualities.includes('hd1440') || availableQualities.includes('hd2160') || availableQualities.includes('highres') ) qualityUHD = true;
  6963.  
  6964.         // helper function to reduce repetition and store picked quality
  6965.         const setQuality = (quality) => {
  6966.             player.setPlaybackQualityRange(quality, quality);
  6967.             qualitySet = quality;
  6968.         };
  6969.  
  6970.         // find closest available quality if exact match isn't available
  6971.         if (availableQualities.includes(desiredQuality)) {
  6972.             setQuality(desiredQuality);
  6973.         } else if (desiredQuality === "highest") {
  6974.             setQuality(availableQualities[0]);
  6975.         } else if (desiredQuality === "lowest") {
  6976.             const lowest = availableQualities[availableQualities.length - 1] === "auto"
  6977.             ? availableQualities[availableQualities.length - 2]
  6978.             : availableQualities[availableQualities.length - 1];
  6979.             setQuality(lowest);
  6980.         } else {
  6981.             const desiredIndex = qualityLevels.indexOf(desiredQuality);
  6982.             if (desiredIndex !== -1) {
  6983.                 for (let i = desiredIndex; i < qualityLevels.length; i++) {
  6984.                     if (availableQualities.includes(qualityLevels[i])) {
  6985.                         setQuality(qualityLevels[i]);
  6986.                         found = true;
  6987.                         break;
  6988.                     }
  6989.                 }
  6990.                 if (!found) setQuality('auto');
  6991.             } else setQuality('auto');
  6992.         }
  6993.  
  6994.         // set 1080p premium quality
  6995.         if (defaultQualityPremium && qualitySet === 'hd1080' && !qualityUHD) setVideoQualityPremium();
  6996.  
  6997.         async function setVideoQualityPremium() {
  6998.             document.documentElement.classList.add('CentAnni-style-hide-yt-settings');
  6999.             await setQualityPremium();
  7000.                 document.body.click();
  7001.                 document.documentElement.classList.remove('CentAnni-style-hide-yt-settings');
  7002.             }
  7003.  
  7004.         async function setQualityPremium() {
  7005.             const qualityTranslations = {
  7006.                 'en': 'Quality',
  7007.                 'es': 'Calidad',
  7008.                 'hi': 'गुणवत्ता',
  7009.                 'pt': 'Qualidade',
  7010.                 'de': 'Qualität',
  7011.                 'fr': 'Qualité',
  7012.                 'it': 'Qualità',
  7013.                 'nl': 'Kwaliteit',
  7014.                 'pl': 'Jakość',
  7015.                 'he': 'איכות',
  7016.                 'ja': '品質',
  7017.                 'ko': '품질',
  7018.                 'zh': '质量',
  7019.                 'id': 'Kualitas',
  7020.                 'sv': 'Kvalitet',
  7021.                 'no': 'Kvalitet',
  7022.                 'da': 'Kvalitet',
  7023.                 'fi': 'Laatu',
  7024.                 'cs': 'Kvalita',
  7025.                 'el': 'Ποιότητα',
  7026.                 'hu': 'Minőség',
  7027.                 'ro': 'Calitate',
  7028.                 'uk': 'Якість'
  7029.             };
  7030.  
  7031.             const settingsPanel = 'ytd-watch-flexy .ytp-settings-menu';
  7032.             const settingsButton = 'ytd-watch-flexy .ytp-settings-button';
  7033.             const LanguageUI = document.documentElement.lang || navigator.language || 'en';
  7034.             const lang = new Intl.Locale(LanguageUI).language;
  7035.             const qualityText = qualityTranslations[lang];
  7036.  
  7037.             function waitFor(selectorOrFn, ctx = document, timeout = 7000) {
  7038.                 return new Promise((resolve, reject) => {
  7039.                     const lookup = () => (typeof selectorOrFn === 'function')
  7040.                     ? selectorOrFn()
  7041.                     : ctx.querySelector(selectorOrFn);
  7042.  
  7043.                     if (lookup()) { resolve(lookup()); return; }
  7044.  
  7045.                     const timer = setTimeout(() => { observer.disconnect(); reject(); }, timeout);
  7046.                     const observer = new MutationObserver(() => {
  7047.                         const node = lookup();
  7048.                         if (node) {
  7049.                             clearTimeout(timer);
  7050.                             observer.disconnect();
  7051.                             resolve(node);
  7052.                         }
  7053.                     });
  7054.                     observer.observe(ctx, { childList: true, subtree: true });
  7055.                 });
  7056.             }
  7057.  
  7058.             if (!document.querySelector(settingsPanel) || getComputedStyle(document.querySelector(settingsPanel)).display === 'none') {
  7059.                 document.querySelector(settingsButton).click();
  7060.                 await waitFor(settingsPanel);
  7061.             }
  7062.  
  7063.             const panel = document.querySelector(settingsPanel);
  7064.             const qualitySelector = () => [...document.querySelectorAll('ytd-watch-flexy .ytp-menuitem')].find(item => item.textContent.includes(qualityText));
  7065.             const qualityItem = qualitySelector();
  7066.             if (!qualityItem) return;
  7067.             qualityItem.click();
  7068.  
  7069.             await waitFor('.ytp-menuitem', panel);
  7070.  
  7071.             const premiumQualitySelector = () => [...panel.querySelectorAll('.ytp-menuitem')]
  7072.                     .find(item => {
  7073.                         const labelEl = item.querySelector('.ytp-menuitem-label');
  7074.                     return labelEl && labelEl.innerText.includes('1080p Premium');
  7075.                     });
  7076.  
  7077.             const premiumOption = premiumQualitySelector();
  7078.             if (!premiumOption) return;
  7079.             premiumOption.click();
  7080.         }
  7081.     }
  7082.  
  7083.     // sidebar and links in header
  7084.     function buttonsLeftHeader() {
  7085.         function opentabSidebar() {
  7086.             const guideButton = document.querySelector('#guide-button button');
  7087.             if (guideButton) guideButton.click();
  7088.         }
  7089.  
  7090.         // create sidebar button
  7091.         function createButton(text, onClick) {
  7092.             const btn = document.createElement('button');
  7093.             btn.textContent = text;
  7094.             btn.classList.add('buttons-left');
  7095.             btn.addEventListener('click', (e) => {
  7096.                 e.preventDefault();
  7097.                 onClick();
  7098.             });
  7099.             return btn;
  7100.         }
  7101.  
  7102.         // create links
  7103.         function createLink(text, url) {
  7104.             const link = document.createElement('a');
  7105.             link.textContent = text;
  7106.             link.classList.add('buttons-left');
  7107.             link.href = url;
  7108.             return link;
  7109.         }
  7110.  
  7111.         const masthead = document.querySelector('ytd-masthead'); if (!masthead) return;
  7112.         const container = masthead.querySelector('#container #start'); if (!container) return;
  7113.  
  7114.         const isHideSidebarChecked = USER_CONFIG.mButtonDisplay;
  7115.  
  7116.         if (container.querySelector('.buttons-left')) return;
  7117.  
  7118.         // adding the buttons
  7119.         const buttonsConfig = [
  7120.             { type: 'button', text: USER_CONFIG.mButtonText, onClick: opentabSidebar },
  7121.             { type: 'link', text: USER_CONFIG.buttonLeft1Text, url: USER_CONFIG.buttonLeft1Url },
  7122.             { type: 'link', text: USER_CONFIG.buttonLeft2Text, url: USER_CONFIG.buttonLeft2Url },
  7123.             { type: 'link', text: USER_CONFIG.buttonLeft3Text, url: USER_CONFIG.buttonLeft3Url },
  7124.             { type: 'link', text: USER_CONFIG.buttonLeft4Text, url: USER_CONFIG.buttonLeft4Url },
  7125.             { type: 'link', text: USER_CONFIG.buttonLeft5Text, url: USER_CONFIG.buttonLeft5Url },
  7126.             { type: 'link', text: USER_CONFIG.buttonLeft6Text, url: USER_CONFIG.buttonLeft6Url },
  7127.             { type: 'link', text: USER_CONFIG.buttonLeft7Text, url: USER_CONFIG.buttonLeft7Url },
  7128.             { type: 'link', text: USER_CONFIG.buttonLeft8Text, url: USER_CONFIG.buttonLeft8Url },
  7129.             { type: 'link', text: USER_CONFIG.buttonLeft9Text, url: USER_CONFIG.buttonLeft9Url },
  7130.             { type: 'link', text: USER_CONFIG.buttonLeft10Text, url: USER_CONFIG.buttonLeft10Url },
  7131.         ];
  7132.  
  7133.         buttonsConfig.forEach(config => {
  7134.             if (config.text && config.text.trim() !== '') {
  7135.                 let element;
  7136.                 if (config.type === 'button') {
  7137.                     if (isHideSidebarChecked) {
  7138.                         element = createButton(config.text, config.onClick);
  7139.                         if (config.text === DEFAULT_CONFIG.mButtonText) {
  7140.                             element.style.display = 'inline-block';
  7141.                             element.style.fontSize = '25px';
  7142.                             element.style.margin = '0';
  7143.                             element.style.padding = '0 0 5px 0';
  7144.                             element.style.transform = 'scaleX(1.25)';
  7145.                         }
  7146.                     }
  7147.                 } else if (config.type === 'link') element = createLink(config.text, config.url);
  7148.                 if (element) container.appendChild(element);
  7149.             }
  7150.         });
  7151.     }
  7152.  
  7153.     // color code videos on home
  7154.     function homeColorCodeVideos() {
  7155.         let processedAllVideos = false;
  7156.         // define age categories
  7157.         const categories = categoriesMatrix[uiLanguage] || categoriesMatrix['en'];
  7158.         const homePage = document.querySelector('ytd-browse[page-subtype="home"]:not([hidden])');
  7159.         if (!homePage) return;
  7160.  
  7161.         function processVideos() {
  7162.             const unprocessedVideos = [...homePage.querySelectorAll('ytd-rich-item-renderer:not([data-centanni-video-processed])')];
  7163.             if (unprocessedVideos.length === 0) { processedAllVideos = true; return; }
  7164.  
  7165.             unprocessedVideos.forEach(videoContainer => {
  7166.                 videoContainer.setAttribute('data-centanni-video-processed', 'true');
  7167.                 const metaBlock = videoContainer.querySelector('#metadata-line');
  7168.                 if (!metaBlock) return;
  7169.  
  7170.                 const textContent = metaBlock.textContent.trim().toLowerCase();
  7171.                 for (const [className, ages] of Object.entries(categories)) {
  7172.                     if (ages.some(age => textContent.includes(age.toLowerCase()))) {
  7173.                         videoContainer.classList.add(`CentAnni-style-${className}-video`);
  7174.                         break;
  7175.                     }
  7176.                 }
  7177.  
  7178.                 const spanElements = videoContainer.querySelectorAll('span.ytd-video-meta-block');
  7179.                 spanElements.forEach(el => {
  7180.                     const text = el.textContent;
  7181.  
  7182.                     if (categories.upcoming.some(word => text.toLowerCase().includes(word)) && !videoContainer.classList.contains('CentAnni-style-upcoming-video'))
  7183.                         videoContainer.classList.add('CentAnni-style-upcoming-video');
  7184.  
  7185.                     if (categories.streamed.some(word => text.toLowerCase().includes(word))) {
  7186.                         const nextEl = el.nextElementSibling;
  7187.                         if (!nextEl || !nextEl.classList.contains('CentAnni-style-streamed-span')) {
  7188.                             const cloneSpan = document.createElement('span');
  7189.                             cloneSpan.className = 'CentAnni-style-streamed-span';
  7190.  
  7191.                             const streamedWordSpan = document.createElement('span');
  7192.                             streamedWordSpan.className = 'CentAnni-style-streamed-text';
  7193.                             const matched = categories.streamed.find(word => text.toLowerCase().includes(word)) || categories.streamed[0];
  7194.                             streamedWordSpan.textContent = matched.charAt(0).toUpperCase() + matched.slice(1) + ' ';
  7195.                             const restText = document.createTextNode(text.replace(new RegExp(`(?:${categories.streamed.join('|')})`,'i'),'').trimStart());
  7196.  
  7197.                             cloneSpan.appendChild(streamedWordSpan);
  7198.                             cloneSpan.appendChild(restText);
  7199.                             metaBlock.insertBefore(cloneSpan, el.nextSibling);
  7200.                         }
  7201.                     }
  7202.                 });
  7203.             });
  7204.         }
  7205.  
  7206.         function runProcessVideos(times, initialDelay, interval, callback) {
  7207.             let count = 0;
  7208.  
  7209.             function runProcess() {
  7210.                 processVideos();
  7211.                 count++;
  7212.                 if (count < times && !processedAllVideos) setTimeout(runProcess, interval);
  7213.                 else if (callback) callback();
  7214.             }
  7215.  
  7216.             setTimeout(runProcess, initialDelay);
  7217.         }
  7218.  
  7219.         // handle navigation
  7220.         const serviceRequestSentHandler = () => { runProcessVideos(3, 1000, 1000, null); };
  7221.         const navigateFinishHandler = () => { setTimeout(cleanupAndReprocessVideos, 300); };
  7222.         const pageTypeChangedHandler = function() {
  7223.             document.removeEventListener('yt-service-request-sent', serviceRequestSentHandler);
  7224.             document.removeEventListener('yt-service-request-completed', checkProcessedVideos);
  7225.             document.removeEventListener('yt-navigate-finish', navigateFinishHandler);
  7226.             document.removeEventListener('yt-page-type-changed', pageTypeChangedHandler);
  7227.         };
  7228.  
  7229.         runProcessVideos(6, 250, 500, function() {
  7230.             document.addEventListener('yt-service-request-sent', serviceRequestSentHandler);
  7231.             document.addEventListener('yt-service-request-completed', checkProcessedVideos);
  7232.             document.addEventListener('yt-navigate-finish', navigateFinishHandler);
  7233.             setTimeout(checkProcessedVideos, 1250);
  7234.         });
  7235.  
  7236.         document.addEventListener('yt-page-type-changed', pageTypeChangedHandler);
  7237.  
  7238.         // ensure correct categories
  7239.         function checkProcessedVideos() {
  7240.             const processedVideos = [...homePage.querySelectorAll('ytd-rich-item-renderer')].slice(0, 8);
  7241.             if (processedVideos.length === 0) return;
  7242.  
  7243.             let allCorrect = true;
  7244.             for (const video of processedVideos) {
  7245.                 const metaBlock = video.querySelector('#metadata-line');
  7246.                 if (!metaBlock) continue;
  7247.  
  7248.                 const textContent = metaBlock.textContent.trim().toLowerCase();
  7249.                 let expectedCategory = null;
  7250.  
  7251.                 for (const [className, ages] of Object.entries(categories)) {
  7252.                     if (ages.some(age => textContent.includes(age.toLowerCase()))) {
  7253.                         expectedCategory = className;
  7254.                         break;
  7255.                     }
  7256.                 }
  7257.  
  7258.                 if (expectedCategory === null) if ([...video.querySelectorAll('span.ytd-video-meta-block')].some(el => /Scheduled for/i.test(el.textContent))) expectedCategory = 'upcoming';
  7259.  
  7260.                 const expectedClassName = expectedCategory ? `CentAnni-style-${expectedCategory}-video` : null;
  7261.  
  7262.                 let currentVideoIsCorrect = true;
  7263.                 if (expectedClassName) {
  7264.                     if (!video.classList.contains(expectedClassName)) currentVideoIsCorrect = false;
  7265.                } else {
  7266.                    for (const cls of video.classList) {
  7267.                        if (cls.startsWith('CentAnni-style-')) {
  7268.                            currentVideoIsCorrect = false;
  7269.                            break;
  7270.                        }
  7271.                    }
  7272.                }
  7273.  
  7274.                 if (!currentVideoIsCorrect) {
  7275.                     allCorrect = false;
  7276.                     break;
  7277.                 }
  7278.             }
  7279.  
  7280.             if (!allCorrect) cleanupAndReprocessVideos();
  7281.         }
  7282.  
  7283.         // handle cleanup
  7284.         function cleanupAndReprocessVideos() {
  7285.             const videosToReprocess = homePage.querySelectorAll('ytd-rich-item-renderer[data-centanni-video-processed]');
  7286.  
  7287.             videosToReprocess.forEach(video => {
  7288.                 video.classList.remove(
  7289.                 'CentAnni-style-live-video',
  7290.                 'CentAnni-style-upcoming-video',
  7291.                 'CentAnni-style-newly-video',
  7292.                 'CentAnni-style-recent-video',
  7293.                 'CentAnni-style-lately-video',
  7294.                 'CentAnni-style-latterly-video',
  7295.                 'CentAnni-style-old-video',
  7296.                 'CentAnni-style-streamed-video'
  7297.                 );
  7298.  
  7299.                 video.querySelectorAll('.CentAnni-style-streamed-span').forEach(el => el.remove());
  7300.                 video.removeAttribute('data-centanni-video-processed');
  7301.             });
  7302.  
  7303.             processVideos();
  7304.             handleFeedFilterAll();
  7305.             addSettingsButton();
  7306.         }
  7307.  
  7308.         // handle feed filter 'All' button
  7309.         let allButtonObserver = null;
  7310.         function handleFeedFilterAll() {
  7311.             if (allButtonObserver) return;
  7312.  
  7313.             const allButton = document.querySelector('yt-chip-cloud-chip-renderer[chip-shape-data*="All"]');
  7314.             if (!allButton) return;
  7315.  
  7316.             allButtonObserver = new MutationObserver((mutations) => {
  7317.                 for (const mutation of mutations) {
  7318.                     if (mutation.type === 'attributes' && mutation.attributeName === 'class' && allButton.classList.contains('iron-selected')) {
  7319.                         checkProcessedVideos();
  7320.                         handleFeedFilterAllCleanup();
  7321.                         break;
  7322.                     }
  7323.                 }
  7324.             });
  7325.  
  7326.             allButtonObserver.observe(allButton, {
  7327.                 attributes: true,
  7328.                 attributeFilter: ['class', 'selected']
  7329.             });
  7330.         }
  7331.  
  7332.         function handleFeedFilterAllCleanup() {
  7333.             if (allButtonObserver) {
  7334.                 allButtonObserver.disconnect();
  7335.                 allButtonObserver = null;
  7336.             }
  7337.         }
  7338.     }
  7339.  
  7340.     // mark last seen video on subscription page
  7341.     async function markLastSeenVideo() {
  7342.         const subscriptionPage = document.querySelector('ytd-browse[page-subtype="subscriptions"]:not([hidden])');
  7343.         if (!subscriptionPage) return;
  7344.  
  7345.         const videoContainers = subscriptionPage.querySelectorAll('ytd-rich-item-renderer');
  7346.         if (!videoContainers.length) return;
  7347.  
  7348.         // helper function to check if a video is live or upcoming
  7349.         const isSpecialVideo = (container) => {
  7350.             if (container.querySelector('.badge-style-type-live-now-alternate') !== null) return true;
  7351.             if (container.querySelector('ytd-thumbnail-overlay-time-status-renderer[overlay-style="UPCOMING"]') !== null) return true;
  7352.  
  7353.             // backup checks
  7354.             const metadataItems = container.querySelectorAll('.inline-metadata-item');
  7355.             for (const item of metadataItems) {
  7356.                 if (item.textContent.includes('Scheduled for') || item.textContent.includes('watching')) {
  7357.                     return true;
  7358.                 }
  7359.             }
  7360.             return false;
  7361.         };
  7362.  
  7363.         // helper function to extract video ID
  7364.         const extractVideoID = (container) => {
  7365.             const mainThumbnail = container.querySelector('ytd-thumbnail a#thumbnail[href*="/watch?v="]');
  7366.             if (!mainThumbnail) return null;
  7367.  
  7368.             const href = mainThumbnail.getAttribute('href');
  7369.             if (!href) return null;
  7370.  
  7371.             return new URLSearchParams(href.split('?')[1]).get("v");
  7372.         };
  7373.  
  7374.         // helper function to find first valid video
  7375.         const findFirstValidVideo = (callback) => {
  7376.             for (const container of videoContainers) {
  7377.                 if (isSpecialVideo(container)) continue;
  7378.                 const videoID = extractVideoID(container);
  7379.                 if (!videoID) continue;
  7380.  
  7381.                 const result = callback(container, videoID);
  7382.                 if (result) return result;
  7383.             }
  7384.             return null;
  7385.         };
  7386.  
  7387.         const lastSeenID = localStorage.getItem("CentAnni_lastSeenVideoID");
  7388.         let targetElement = null;
  7389.  
  7390.         // find last seen video
  7391.         const newLastSeenID = findFirstValidVideo((container, videoID) => videoID);
  7392.         if (newLastSeenID) localStorage.setItem("CentAnni_lastSeenVideoID", newLastSeenID);
  7393.  
  7394.         // find previous seen video
  7395.         if (lastSeenID) {
  7396.             targetElement = findFirstValidVideo((container, videoID) => {
  7397.                 if (videoID === lastSeenID) {
  7398.                     container.classList.add("CentAnni-style-last-seen");
  7399.                     return container;
  7400.                 }
  7401.                 return null;
  7402.             });
  7403.         }
  7404.  
  7405.         // scroll to the last seen video
  7406.         if (USER_CONFIG.lastSeenVideoScroll && targetElement) {
  7407.             requestAnimationFrame(() => {
  7408.                 targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
  7409.             });
  7410.         }
  7411.     }
  7412.  
  7413.     // add trashcan icon to playlists to easily remove videos
  7414.     function playlistRemovalButtons() {
  7415.         const sortButton = document.querySelector('#filter, #filter-menu');
  7416.         if (!sortButton) return;
  7417.  
  7418.         const playlistPage = document.querySelector('ytd-browse[page-subtype="playlist"]:not([hidden])');
  7419.         if (!playlistPage) return;
  7420.  
  7421.         const playlistContainer = playlistPage.querySelector('#primary > ytd-section-list-renderer > #contents > ytd-item-section-renderer #contents');
  7422.         if (!playlistContainer) return;
  7423.  
  7424.         // watch for playlist changes
  7425.         const playlistObserver = new MutationObserver(() => {
  7426.             const videoElements = playlistPage.querySelectorAll('ytd-playlist-video-renderer:not([data-centanni-playlist-video-processed])');
  7427.             if (videoElements.length > 0) videoElements.forEach(attachRemoveButtonToVideo);
  7428.         });
  7429.  
  7430.         playlistObserver.observe(playlistContainer, {
  7431.             childList: true,
  7432.             subtree: true
  7433.         });
  7434.  
  7435.         // run and cleanup
  7436.         attachRemoveButtonsToAllVideos();
  7437.         const navigateHandler = () => {
  7438.             playlistObserver.disconnect();
  7439.             cleanupRemoveButtons();
  7440.             document.removeEventListener('yt-navigate-start', navigateHandler);
  7441.         };
  7442.         document.addEventListener('yt-navigate-start', navigateHandler);
  7443.  
  7444.         function attachRemoveButtonToVideo(videoEl) {
  7445.             if (videoEl.hasAttribute('data-centanni-playlist-video-processed')) return;
  7446.             videoEl.setAttribute('data-centanni-playlist-video-processed', 'true');
  7447.  
  7448.             const metaContainer = videoEl.querySelector('#meta');
  7449.             if (!metaContainer) return;
  7450.  
  7451.             const removeBtn = document.createElement('button');
  7452.             removeBtn.className = 'CentAnni-style-playlist-remove-btn';
  7453.             removeBtn.title = 'Remove from Playlist';
  7454.             removeBtn.innerText = '🗑️';
  7455.             removeBtn.addEventListener('click', (event) => {
  7456.                 event.stopPropagation();
  7457.                 event.preventDefault();
  7458.                 if (removeBtn.classList.contains('removing')) return;
  7459.                 removeBtn.classList.add('removing');
  7460.                 simulateVideoRemoval(videoEl)
  7461.                     .finally(() => { removeBtn.classList.remove('removing'); });
  7462.             });
  7463.             metaContainer.appendChild(removeBtn);
  7464.         }
  7465.  
  7466.         function attachRemoveButtonsToAllVideos() {
  7467.             const videoElements = playlistPage.querySelectorAll('ytd-playlist-video-renderer:not([data-centanni-playlist-video-processed])');
  7468.             videoElements.forEach(attachRemoveButtonToVideo);
  7469.         }
  7470.  
  7471.         function cleanupRemoveButtons() {
  7472.             document.querySelectorAll('.CentAnni-style-playlist-remove-btn').forEach(btn => btn.remove());
  7473.             document.querySelectorAll('ytd-playlist-video-renderer[data-centanni-playlist-video-processed]').forEach(videoEl => {
  7474.                 videoEl.removeAttribute('data-centanni-playlist-video-processed');
  7475.             });
  7476.         }
  7477.  
  7478.         function simulateVideoRemoval(videoEl) {
  7479.             return new Promise((resolve) => {
  7480.                 const menuBtn = videoEl.querySelector('#button');
  7481.                 if (!menuBtn) {
  7482.                     resolve();
  7483.                     return;
  7484.                 }
  7485.  
  7486.                 const popupContainer = document.querySelector('ytd-popup-container');
  7487.                 if (popupContainer) popupContainer.classList.add('CentAnni-style-playlist-hide-menu');
  7488.  
  7489.                 menuBtn.click();
  7490.  
  7491.                 waitForElement('#items > ytd-menu-service-item-renderer', 300)
  7492.                     .then(() => { return new Promise(r => setTimeout(r, 75)); })
  7493.                     .then(() => {
  7494.                         const menuItems = [...document.querySelectorAll('#items > ytd-menu-service-item-renderer')];
  7495.                         let removeOption = null;
  7496.  
  7497.                         for (const item of menuItems) {
  7498.                             const formattedString = item.querySelector('yt-formatted-string');
  7499.                             if (formattedString && formattedString.textContent.includes('Remove from')) {
  7500.                                 removeOption = item;
  7501.                                 break;
  7502.                             }
  7503.                         }
  7504.  
  7505.                         if (!removeOption) {
  7506.                             docBody.click();
  7507.                             return Promise.resolve();
  7508.                         }
  7509.  
  7510.                         removeOption.click();
  7511.                         return new Promise(r => setTimeout(r, 400));
  7512.                     })
  7513.                     .then(() => {
  7514.                         if (popupContainer) popupContainer.classList.remove('CentAnni-style-playlist-hide-menu');
  7515.                         resolve();
  7516.                     })
  7517.                     .catch(() => {
  7518.                         try { docBody.click(); } catch (e) {}
  7519.                         if (popupContainer) popupContainer.classList.remove('CentAnni-style-playlist-hide-menu');
  7520.                         resolve();
  7521.                     });
  7522.             });
  7523.         }
  7524.  
  7525.         function waitForElement(selector, timeout = 700) {
  7526.             return new Promise((resolve) => {
  7527.                 const element = playlistPage.querySelector(selector);
  7528.                 if (element) return resolve(element);
  7529.  
  7530.                 const timer = setTimeout(() => {
  7531.                     observer.disconnect();
  7532.                     resolve();
  7533.                 }, timeout);
  7534.  
  7535.                 const observer = new MutationObserver(() => {
  7536.                     const element = playlistPage.querySelector(selector);
  7537.                     if (element) {
  7538.                         clearTimeout(timer);
  7539.                         observer.disconnect();
  7540.                         resolve(element);
  7541.                     }
  7542.                 });
  7543.  
  7544.                 observer.observe(playlistPage, { childList: true, subtree: true });
  7545.             });
  7546.         }
  7547.     }
  7548.  
  7549.     // open playlist videos without being in a playlist
  7550.     function handlePlaylistLinks() {
  7551.         let processedAllListVideos = false;
  7552.  
  7553.         function chromeClickHandler(event) {
  7554.             if(!event.ctrlKey && !event.metaKey && !event.shiftKey) {
  7555.                 event.stopImmediatePropagation();
  7556.                 event.preventDefault();
  7557.                 const cleanUrl = event.currentTarget.getAttribute('CentAnni-chrome-pl-url');
  7558.                 window.open(cleanUrl, '_self');
  7559.             }
  7560.         }
  7561.  
  7562.         const playlistPage = document.querySelector('ytd-browse[page-subtype="playlist"]:not([hidden])');
  7563.         if (!playlistPage) return;
  7564.  
  7565.         function processVideos() {
  7566.             const unprocessedVideos = [...playlistPage.querySelectorAll('#contents > ytd-playlist-video-list-renderer > #contents > ytd-playlist-video-renderer:not([data-centanni-list-video-processed])')];
  7567.             if (unprocessedVideos.length === 0) { processedAllListVideos = true; return; }
  7568.  
  7569.             unprocessedVideos.forEach(videoItem => {
  7570.                 videoItem.setAttribute('data-centanni-list-video-processed', 'true');
  7571.                 const thumbnailLink = videoItem.querySelector('a#thumbnail');
  7572.                 const titleLink = videoItem.querySelector('a#video-title');
  7573.  
  7574.                 [thumbnailLink, titleLink].forEach(link => {
  7575.                     if (link && link.href && (link.href.includes('list=WL') || link.href.includes('list=PL') || link.href.includes('list=LL'))) {
  7576.                         try {
  7577.                             const url = new URL(link.href);
  7578.                             const videoID = url.searchParams.get('v');
  7579.                             if (videoID) {
  7580.                                 const cleanUrl = `https://www.youtube.com/watch?v=${videoID}`;
  7581.                                 link.href = cleanUrl;
  7582.                                 if (!USER_CONFIG.preventBackgroundExecution) link.setAttribute('onclick',`if(!event.ctrlKey&&!event.metaKey&&!event.shiftKey){event.stopPropagation();event.preventDefault();window.location='${cleanUrl}';return!1}return!0`);
  7583.                                 else {
  7584.                                     link.setAttribute('CentAnni-chrome-pl-url', cleanUrl);
  7585.                                     link.addEventListener('click', chromeClickHandler, true);
  7586.                                 }
  7587.                             }
  7588.                         } catch (e) {
  7589.                             console.error('YouTube Alchemy: Error processing link:', e);
  7590.                         }
  7591.                     }
  7592.                 });
  7593.             });
  7594.         }
  7595.  
  7596.         function runProcessVideos(times, initialDelay, interval, callback) {
  7597.             let count = 0;
  7598.  
  7599.             function runProcess() {
  7600.                 processVideos();
  7601.                 count++;
  7602.                 if (count < times && !processedAllListVideos) setTimeout(runProcess, interval);
  7603.                 else if (callback) callback();
  7604.             }
  7605.  
  7606.             setTimeout(runProcess, initialDelay);
  7607.         }
  7608.  
  7609.         // handle navigation
  7610.         const serviceRequestSentHandler = () => { runProcessVideos(3, 1000, 1000, null); };
  7611.         const pageTypeChangedHandler = function() {
  7612.             document.removeEventListener('yt-service-request-sent', serviceRequestSentHandler);
  7613.             document.removeEventListener('yt-navigate-start', pageTypeChangedHandler);
  7614.             document.querySelectorAll('[data-centanni-list-video-processed]').forEach(el => {
  7615.                 el.removeAttribute('data-centanni-list-video-processed');
  7616.             });
  7617.  
  7618.             if (USER_CONFIG.preventBackgroundExecution) {
  7619.                 playlistPage.querySelectorAll('[CentAnni-chrome-pl-url]').forEach(link => {
  7620.                     link.removeEventListener('click', chromeClickHandler, true);
  7621.                 });
  7622.             }
  7623.         };
  7624.  
  7625.         runProcessVideos(6, 250, 500, function() {
  7626.             document.addEventListener('yt-service-request-sent', serviceRequestSentHandler);
  7627.         });
  7628.  
  7629.         document.addEventListener('yt-navigate-start', pageTypeChangedHandler);
  7630.     }
  7631.  
  7632.     // RSS feed button on channel page
  7633.     function addRSSFeedButton() {
  7634.         if (document.getElementById('CentAnni-channel-btn')) return;
  7635.  
  7636.         const rssLinkElement = document.querySelector('link[rel="alternate"][type="application/rss+xml"]');
  7637.         if (!rssLinkElement) return;
  7638.         const rssFeedUrl = rssLinkElement.getAttribute('href');
  7639.  
  7640.         const actionsContainer = document.querySelector('.yt-flexible-actions-view-model-wiz');
  7641.         if (!actionsContainer) return;
  7642.  
  7643.         const buttonContainer = document.createElement('div');
  7644.         buttonContainer.className = 'yt-flexible-actions-view-model-wiz__action';
  7645.  
  7646.         const rssLink = document.createElement('a');
  7647.         rssLink.id = 'CentAnni-channel-btn';
  7648.         rssLink.className = 'yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m';
  7649.         rssLink.title = 'Click to open RSS feed or right-click to Copy Link';
  7650.         rssLink.rel = 'noopener noreferrer';
  7651.         rssLink.href = rssFeedUrl;
  7652.         rssLink.target = '_blank';
  7653.  
  7654.         const rssIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  7655.         rssIcon.setAttribute('viewBox', '0 0 24 24');
  7656.         rssIcon.setAttribute('width', '24');
  7657.         rssIcon.setAttribute('height', '24');
  7658.         rssIcon.style.fill = '#FF9800';
  7659.  
  7660.         const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  7661.         circle.setAttribute('cx', '6.18');
  7662.         circle.setAttribute('cy', '17.82');
  7663.         circle.setAttribute('r', '2.18');
  7664.         rssIcon.appendChild(circle);
  7665.  
  7666.         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  7667.         path.setAttribute('d', 'M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z');
  7668.         rssIcon.appendChild(path);
  7669.  
  7670.         rssLink.appendChild(rssIcon);
  7671.         rssLink.appendChild(document.createTextNode('RSS Feed'));
  7672.         buttonContainer.appendChild(rssLink);
  7673.         actionsContainer.appendChild(buttonContainer);
  7674.     }
  7675.  
  7676.     // add playlist buttons to channel page
  7677.     function addPlaylistButtons() {
  7678.         if (document.querySelector('a[data-centanni-playlist-channel-btn="all"]')) return;
  7679.  
  7680.         const channelID = document.querySelector('[itemprop="identifier"]')?.content;
  7681.         if (!channelID) return;
  7682.  
  7683.         const allVideosURL = `https://www.youtube.com/playlist?list=UU${channelID.slice(2)}`;
  7684.         const fullVideoURL = `https://www.youtube.com/playlist?list=UULF${channelID.slice(2)}`;
  7685.         const shortsURL = `https://www.youtube.com/playlist?list=UUSH${channelID.slice(2)}`;
  7686.  
  7687.         const actionsContainer = document.querySelector('.yt-flexible-actions-view-model-wiz');
  7688.         if (!actionsContainer) return;
  7689.  
  7690.         const createPlaylistButton = (url, text, buttonID) => {
  7691.             const buttonContainer = document.createElement('div');
  7692.             buttonContainer.className = 'yt-flexible-actions-view-model-wiz__action';
  7693.  
  7694.             const buttonLink = document.createElement('a');
  7695.             buttonLink.className = 'yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m';
  7696.             buttonLink.id = 'CentAnni-channel-btn';
  7697.             buttonLink.setAttribute('data-centanni-playlist-channel-btn', buttonID);
  7698.             buttonLink.title = `Click to Open ${text} Playlist`;
  7699.             buttonLink.rel = 'noopener noreferrer';
  7700.             buttonLink.href = url;
  7701.             buttonLink.target = '_self';
  7702.  
  7703.             const playlistIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  7704.             playlistIcon.setAttribute('viewBox', '0 0 24 24');
  7705.             playlistIcon.setAttribute('width', '24');
  7706.             playlistIcon.setAttribute('height', '24');
  7707.             playlistIcon.style.fill = 'var(--yt-spec-brand-icon-inactive)';
  7708.             const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  7709.             iconPath.setAttribute('clip-rule', 'evenodd');
  7710.             iconPath.setAttribute('fill-rule', 'evenodd');
  7711.             iconPath.setAttribute('d', 'M3.75 5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75S20.664 5 20.25 5H3.75Zm0 4c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75S20.664 9 20.25 9H3.75Zm0 4c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-8.5Zm8.5 4c.414 0 .75.336.75.75s-.336.75-.75.75h-8.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h8.5Zm3.498-3.572c-.333-.191-.748.05-.748.434v6.276c0 .384.415.625.748.434L22 17l-6.252-3.572Z');
  7712.  
  7713.             playlistIcon.appendChild(iconPath);
  7714.             buttonLink.appendChild(playlistIcon);
  7715.             buttonLink.appendChild(document.createTextNode(text));
  7716.  
  7717.             buttonContainer.appendChild(buttonLink);
  7718.             return buttonContainer;
  7719.         };
  7720.  
  7721.         if (!USER_CONFIG.hideShorts) {
  7722.             const allVideosButton = createPlaylistButton(allVideosURL, 'All Uploads', 'all');
  7723.             actionsContainer.appendChild(allVideosButton);
  7724.         }
  7725.  
  7726.         const fullVideosButton = createPlaylistButton(fullVideoURL, 'Videos', 'full');
  7727.         actionsContainer.appendChild(fullVideosButton);
  7728.  
  7729.         if (!USER_CONFIG.hideShorts) {
  7730.             const shortsButton = createPlaylistButton(shortsURL, 'Shorts', 'shorts');
  7731.             actionsContainer.appendChild(shortsButton);
  7732.         }
  7733.     }
  7734.  
  7735.     // function to change playlist direction
  7736.     function playlistDirection() {
  7737.         if (!hasPlaylistPanel && !playlistPanel && !watchFlexyElement) return;
  7738.  
  7739.         let playlistItems;
  7740.         let currentVideoIndex;
  7741.         let videoAboveInfo;
  7742.         let videoBelowInfo;
  7743.         let nextButton;
  7744.         let cleanupDone = false;
  7745.         let playNextBtnStatus = false;
  7746.         let ValidDataVideoAbove = false;
  7747.         let ValidDataVideoBelow = false;
  7748.         let savedDirection = localStorage.getItem('CentAnni_playlistDirection') || 'down';
  7749.         let reverseDirection = savedDirection === 'up';
  7750.  
  7751.         function getPlaylistInfo() {
  7752.             function getVideoThumbnailURL(currentURL) {
  7753.                 let videoID = null;
  7754.                 if (currentURL) {
  7755.                     const watchMatch = currentURL.match(/[?&]v=([^&#]*)/);
  7756.                     if (watchMatch && watchMatch[1]) videoID = watchMatch[1];
  7757.                     else {
  7758.                         const shortMatch = currentURL.match(/youtu\.be\/([^?&#]*)/);
  7759.                         if (shortMatch && shortMatch[1]) videoID = shortMatch[1];
  7760.                     }
  7761.                 }
  7762.                 return videoID ? `https://i.ytimg.com/vi/${videoID}/mqdefault.jpg` : null;
  7763.             }
  7764.  
  7765.             function processVideoInfo(videoElement) {
  7766.                 if (!videoElement) return { info: null, isValid: false };
  7767.  
  7768.                 const link = videoElement.querySelector('a#wc-endpoint');
  7769.                 const title = videoElement.querySelector('#video-title');
  7770.                 const href = link ? link.href : null;
  7771.                 const thumbnailUrl = getVideoThumbnailURL(href);
  7772.  
  7773.                 if (!(link && title)) return { info: null, isValid: false };
  7774.  
  7775.                 const info = {
  7776.                     link: link,
  7777.                     href: href,
  7778.                     thumbnail: thumbnailUrl,
  7779.                     title: title ? title.textContent.trim() : null
  7780.                 };
  7781.                 const isValid = (link && href && thumbnailUrl && thumbnailUrl.trim() !== '' && title && title.textContent && title.textContent.trim() !== '');
  7782.  
  7783.                 return { info, isValid };
  7784.             }
  7785.  
  7786.             if (!playlistSelectedVideo) return null;
  7787.  
  7788.             playlistItems = [...watchFlexyElement.querySelectorAll('ytd-playlist-panel-video-renderer')];
  7789.             if (!playlistItems || playlistItems.length <= 1) return null;
  7790.  
  7791.             currentVideoIndex = playlistItems.indexOf(playlistSelectedVideo);
  7792.             if (currentVideoIndex === -1) return null;
  7793.  
  7794.             nextButton = watchFlexyElement.querySelector('.ytp-next-button');
  7795.  
  7796.             if (currentVideoIndex > 0) {
  7797.                 const videoAbove = playlistItems[currentVideoIndex - 1];
  7798.                 const result = processVideoInfo(videoAbove);
  7799.                 videoAboveInfo = result.info;
  7800.                 ValidDataVideoAbove = result.isValid;
  7801.             }
  7802.  
  7803.             if (currentVideoIndex < playlistItems.length - 1) {
  7804.                 const videoBelow = playlistItems[currentVideoIndex + 1];
  7805.                 const result = processVideoInfo(videoBelow);
  7806.                 videoBelowInfo = result.info;
  7807.                 ValidDataVideoBelow = result.isValid;
  7808.             }
  7809.  
  7810.             const success = ValidDataVideoAbove && ValidDataVideoBelow;
  7811.             return success;
  7812.         }
  7813.  
  7814.         function createButtons(reverseDirection) {
  7815.             const playlistActionMenu = watchFlexyElement.querySelector('#playlist-action-menu .top-level-buttons') || watchFlexyElement.querySelector('#playlist-action-menu');
  7816.             if (!playlistActionMenu) return null;
  7817.  
  7818.             const BTN_CLASS = 'yt-spec-button-shape-next yt-spec-button-shape-next--text yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-only-default CentAnni-playlist-direction-btn';
  7819.  
  7820.             const directionContainer = document.createElement('div');
  7821.             directionContainer.id = 'CentAnni-playlist-direction-container';
  7822.  
  7823.             const fragment = document.createDocumentFragment();
  7824.  
  7825.             const directionText = document.createElement('span');
  7826.             directionText.textContent = 'Playlist Direction:';
  7827.             fragment.appendChild(directionText);
  7828.  
  7829.             function createDirectionButton(isUpButton) {
  7830.                 const button = document.createElement('button');
  7831.                 button.className = BTN_CLASS;
  7832.                 if (reverseDirection === isUpButton) button.classList.add('active');
  7833.                 button.title = isUpButton
  7834.                     ? 'Play Videos Ascending'
  7835.                     : 'Play Videos Descending (YouTube Default)';
  7836.  
  7837.                 const iconDiv = document.createElement('div');
  7838.                 iconDiv.className = 'yt-spec-button-shape-next__icon';
  7839.                 iconDiv.setAttribute('aria-hidden', 'true');
  7840.                 const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  7841.                 svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  7842.                 svg.setAttribute('height', '24');
  7843.                 svg.setAttribute('viewBox', '0 0 24 24');
  7844.                 svg.setAttribute('width', '24');
  7845.                 svg.setAttribute('focusable', 'false');
  7846.                 const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  7847.                 path.setAttribute('d', isUpButton
  7848.                     ? 'M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z'
  7849.                     : 'M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z');
  7850.  
  7851.                 svg.appendChild(path);
  7852.                 iconDiv.appendChild(svg);
  7853.                 button.appendChild(iconDiv);
  7854.  
  7855.                 return button;
  7856.             }
  7857.  
  7858.             const upButton = createDirectionButton(true);
  7859.             const downButton = createDirectionButton(false);
  7860.             fragment.appendChild(upButton);
  7861.             fragment.appendChild(downButton);
  7862.             directionContainer.appendChild(fragment);
  7863.  
  7864.             const existingContainer = watchFlexyElement.querySelector('#CentAnni-playlist-direction-container');
  7865.             if (existingContainer) existingContainer.replaceWith(directionContainer);
  7866.             else playlistActionMenu.appendChild(directionContainer);
  7867.  
  7868.             return { upButton, downButton };
  7869.         }
  7870.  
  7871.         function upNextBtn() {
  7872.             if (reverseDirection === playNextBtnStatus || !nextButton) return;
  7873.             if (reverseDirection) {
  7874.                 if (videoAboveInfo) {
  7875.                     if (videoAboveInfo.href && videoAboveInfo.thumbnail && videoAboveInfo.title) {
  7876.                         nextButton.href = videoAboveInfo.href;
  7877.                         nextButton.dataset.preview = videoAboveInfo.thumbnail;
  7878.                         nextButton.dataset.tooltipText = videoAboveInfo.title;
  7879.                     }
  7880.  
  7881.                     nextButton.removeEventListener('click', nextButtonClickHandler, true);
  7882.                     nextButton.addEventListener('click', nextButtonClickHandler, true);
  7883.                     document.addEventListener('keydown', handleKeyboardShortcut, true);
  7884.  
  7885.                     playNextBtnStatus = true;
  7886.                 }
  7887.             } else {
  7888.                 document.removeEventListener('keydown', handleKeyboardShortcut, true);
  7889.                 nextButton.removeEventListener('click', nextButtonClickHandler, true);
  7890.  
  7891.                 if (videoBelowInfo) {
  7892.                     if (videoBelowInfo.href && videoBelowInfo.thumbnail && videoBelowInfo.title) {
  7893.                         nextButton.href = videoBelowInfo.href;
  7894.                         nextButton.dataset.preview = videoBelowInfo.thumbnail;
  7895.                         nextButton.dataset.tooltipText = videoBelowInfo.title;
  7896.                     }
  7897.                 }
  7898.  
  7899.                 playNextBtnStatus = false;
  7900.             }
  7901.         }
  7902.  
  7903.         function nextButtonClickHandler(e) {
  7904.             if (reverseDirection && videoAboveInfo) {
  7905.                 e.preventDefault();
  7906.                 e.stopPropagation();
  7907.  
  7908.                 if (videoAboveInfo.link) videoAboveInfo.link.click();
  7909.                 return false;
  7910.             }
  7911.         }
  7912.  
  7913.         function handleKeyboardShortcut(e) {
  7914.             if (e.key === 'N' && e.shiftKey) {
  7915.                 if (reverseDirection && videoAboveInfo) {
  7916.                     e.preventDefault();
  7917.                     e.stopPropagation();
  7918.  
  7919.                     if (videoAboveInfo.link) videoAboveInfo.link.click();
  7920.                     return false;
  7921.                 }
  7922.             }
  7923.         }
  7924.  
  7925.         function upButtonHandler() {
  7926.             localStorage.setItem('CentAnni_playlistDirection', 'up');
  7927.             reverseDirection = true;
  7928.  
  7929.             upButton.classList.add('active');
  7930.             downButton.classList.remove('active');
  7931.  
  7932.             upNextBtn();
  7933.         }
  7934.  
  7935.         // Handle down button click
  7936.         function downButtonHandler() {
  7937.             localStorage.setItem('CentAnni_playlistDirection', 'down');
  7938.             reverseDirection = false;
  7939.  
  7940.             upButton.classList.remove('active');
  7941.             downButton.classList.add('active');
  7942.  
  7943.             upNextBtn();
  7944.         }
  7945.  
  7946.         // cleanup
  7947.         const handleCleanup = () => {
  7948.             if (cleanupDone) return;
  7949.             document.removeEventListener('yt-navigate', handleCleanup);
  7950.             document.removeEventListener('yt-autonav-pause-player-ended', handleCleanup);
  7951.             document.removeEventListener('keydown', handleKeyboardShortcut, true);
  7952.             nextButton.removeEventListener('click', nextButtonClickHandler, true);
  7953.             upButton.removeEventListener('click', upButtonHandler);
  7954.             downButton.removeEventListener('click', downButtonHandler);
  7955.             cleanupDone = true;
  7956.         };
  7957.  
  7958.         const handleVideoEnd = () => {
  7959.             document.removeEventListener('yt-autonav-pause-player-ended', handleVideoEnd);
  7960.             if (!reverseDirection || !videoAboveInfo) return;
  7961.             else if (videoAboveInfo.link) videoAboveInfo.link.click();
  7962.         };
  7963.  
  7964.         document.addEventListener('yt-navigate', handleCleanup);
  7965.         document.addEventListener('yt-autonav-pause-player-ended', handleCleanup);
  7966.         document.addEventListener('yt-autonav-pause-player-ended', handleVideoEnd);
  7967.  
  7968.         // initiation
  7969.         const { upButton, downButton } = createButtons(reverseDirection);
  7970.         if (upButton && downButton) {
  7971.             upButton.addEventListener('click', upButtonHandler);
  7972.             downButton.addEventListener('click', downButtonHandler);
  7973.         }
  7974.  
  7975.         const observer = new MutationObserver((mutations) => {
  7976.             const selectedItem = watchFlexyElement.querySelector('ytd-playlist-panel-video-renderer[selected]');
  7977.             const nextButton = watchFlexyElement.querySelector('.ytp-next-button');
  7978.             if (selectedItem && nextButton) {
  7979.                 if (getPlaylistInfo()) {
  7980.                     observer.disconnect();
  7981.                     setTimeout(() => { upNextBtn(); },1000);
  7982.                     return;
  7983.                 }
  7984.             }
  7985.         });
  7986.  
  7987.         const config = { childList: true, subtree: true, };
  7988.         observer.observe(watchFlexyElement, config);
  7989.     }
  7990.  
  7991.     // function to prevent autoplay
  7992.     function pauseYouTubeVideo() {
  7993.         document.removeEventListener('yt-player-updated', pauseYouTubeVideo);
  7994.  
  7995.         if ( !/^https:\/\/.*\.youtube\.com\/watch\?v=/.test(window.location.href) || document.querySelector('.ytp-time-display')?.classList.contains('ytp-live') ) return;
  7996.  
  7997.         const elements = {
  7998.             player: document.getElementById('movie_player'),
  7999.             video: document.querySelector('video'),
  8000.             watchFlexy: document.querySelector('ytd-watch-flexy'),
  8001.             thumbnailOverlayImage: document.querySelector('.ytp-cued-thumbnail-overlay-image'),
  8002.             thumbnailOverlay: document.querySelector('.ytp-cued-thumbnail-overlay')
  8003.         };
  8004.  
  8005.         if (!elements.player || !elements.video || !elements.watchFlexy) return;
  8006.  
  8007.         const urlParams = new URLSearchParams(window.location.search);
  8008.         const vinteo = urlParams.get('v');
  8009.  
  8010.         if (elements.watchFlexy.hasAttribute('default-layout')) {
  8011.             if (USER_CONFIG.autoTheaterMode) toggleTheaterMode();
  8012.             setTimeout(pauseVideo, 200);
  8013.         } else if (elements.watchFlexy.hasAttribute('theater')) {
  8014.             pauseVideo();
  8015.         }
  8016.  
  8017.         function pauseVideo() {
  8018.             const { player, video, thumbnailOverlayImage, thumbnailOverlay } = elements;
  8019.             if (player && video) {
  8020.                 video.pause();
  8021.                 player.classList.remove('playing-mode');
  8022.                 player.classList.add('unstarted-mode', 'paused-mode');
  8023.                 const playingHandler = () => {
  8024.                     if (thumbnailOverlayImage) {
  8025.                         thumbnailOverlayImage.removeAttribute('style');
  8026.                         thumbnailOverlayImage.style.display = 'none';
  8027.                         thumbnailOverlay.removeAttribute('style');
  8028.                         thumbnailOverlay.style.display = 'none';
  8029.                     }
  8030.                     video.removeEventListener('playing', playingHandler);
  8031.                 };
  8032.                 video.addEventListener('playing', playingHandler);
  8033.             }
  8034.  
  8035.             showThumbnail(vinteo);
  8036.         }
  8037.  
  8038.         function showThumbnail(vinteo) {
  8039.             const { thumbnailOverlayImage, thumbnailOverlay } = elements;
  8040.             if (thumbnailOverlayImage && thumbnailOverlay && lastVideoID !== vinteo) {
  8041.                 thumbnailOverlay.style.cssText = 'display: block';
  8042.                 void thumbnailOverlayImage.offsetHeight;
  8043.                 thumbnailOverlayImage.style.cssText = `
  8044.                     display: block;
  8045.                     z-index: 10;
  8046.                     background-image: url("https://i.ytimg.com/vi/${vinteo}/maxresdefault.jpg");
  8047.                 `;
  8048.             }
  8049.         }
  8050.     }
  8051.  
  8052.     // function to sort comments newest first
  8053.     function sortCommentsNewFirst() {
  8054.         let observationTimeout = null;
  8055.         let dropdownTimeout = null;
  8056.  
  8057.         // handler for YouTube service requests in tab view mode
  8058.         const serviceRequestHandler = function(event) {
  8059.             const commentsTab = watchFlexyElement.querySelector('.CentAnni-tabView-tab[data-tab="tab-2"]');
  8060.             if (commentsTab && commentsTab.classList.contains('active')) {
  8061.                 document.removeEventListener('yt-service-request-sent', serviceRequestHandler);
  8062.                 observeCommentSection();
  8063.             }
  8064.         };
  8065.  
  8066.         // comment sorting detection
  8067.         function setupCommentSortingDetection() {
  8068.             if (USER_CONFIG.videoTabView) {
  8069.                 document.removeEventListener('yt-service-request-sent', serviceRequestHandler);
  8070.                 document.addEventListener('yt-service-request-sent', serviceRequestHandler);
  8071.                 }
  8072.             else observeCommentSection();
  8073.         }
  8074.  
  8075.         // observe comment section and detect when it's loaded
  8076.         function observeCommentSection() {
  8077.             const commentsSection = watchFlexyElement.querySelector(cmtsSel);
  8078.             if (!commentsSection) {
  8079.                 if (observationTimeout) clearTimeout(observationTimeout);
  8080.                 observationTimeout = setTimeout(observeCommentSection, 250);
  8081.                 return;
  8082.             }
  8083.  
  8084.             const observer = new MutationObserver((mutations) => {
  8085.                 for (const mutation of mutations) {
  8086.                     if (mutation.addedNodes.length > 0) {
  8087.                         const commentsHeader = commentsSection.querySelector('ytd-comments-header-renderer');
  8088.                         const sortButton = commentsSection.querySelector('yt-sort-filter-sub-menu-renderer');
  8089.  
  8090.                         if (commentsHeader && sortButton) {
  8091.                             observer.disconnect();
  8092.                             changeSortingToNewestFirst();
  8093.                             return;
  8094.                         }
  8095.                     }
  8096.                 }
  8097.             });
  8098.  
  8099.             observer.observe(commentsSection, { childList: true, subtree: true, attributes: false });
  8100.         }
  8101.  
  8102.         // set newest first
  8103.         function changeSortingToNewestFirst() {
  8104.             const sortButton = watchFlexyElement.querySelector('yt-sort-filter-sub-menu-renderer yt-dropdown-menu tp-yt-paper-button');
  8105.             if (sortButton) {
  8106.                 sortButton.click();
  8107.  
  8108.                 if (dropdownTimeout) clearTimeout(dropdownTimeout);
  8109.                 dropdownTimeout = setTimeout(() => {
  8110.                     const options = document.querySelectorAll('tp-yt-paper-listbox a.yt-simple-endpoint');
  8111.                     let newestFirstOption = null;
  8112.  
  8113.                     for (const option of options) {
  8114.                         if (option.textContent.toLowerCase().includes('newest')) {
  8115.                             newestFirstOption = option;
  8116.                             break;
  8117.                         }
  8118.                     }
  8119.  
  8120.                     if (!newestFirstOption && options.length > 1) newestFirstOption = options[1];
  8121.                     if (newestFirstOption) newestFirstOption.click();
  8122.                 }, 200);
  8123.             }
  8124.         }
  8125.  
  8126.         document.addEventListener('yt-navigate-start', () => {
  8127.             document.removeEventListener('yt-service-request-sent', serviceRequestHandler);
  8128.  
  8129.             if (observationTimeout) {
  8130.                 clearTimeout(observationTimeout);
  8131.                 observationTimeout = null;
  8132.             }
  8133.  
  8134.             if (dropdownTimeout) {
  8135.                 clearTimeout(dropdownTimeout);
  8136.                 dropdownTimeout = null;
  8137.             }
  8138.         });
  8139.  
  8140.         setupCommentSortingDetection();
  8141.     }
  8142.  
  8143.     // sort notifications chronologically
  8144.     function chronoNotifications() {
  8145.         const sectionSelector = '#sections yt-multi-page-menu-section-renderer';
  8146.         const panel = [...document.querySelectorAll('body > ytd-app > ytd-popup-container tp-yt-iron-dropdown')].find(el => getComputedStyle(el).display !== 'none');
  8147.         if (chronoNotificationRunning || !panel) return;
  8148.         chronoNotificationRunning = true;
  8149.  
  8150.         const sequence = unitMatrix[uiLanguage];
  8151.         const unitPositions = getUnitPositions(uiLanguage);
  8152.  
  8153.         const ready = () => {
  8154.             const  spinner   = panel.querySelector('#spinner'),
  8155.                    header    = panel.querySelector('#header'),
  8156.                    container = panel.querySelector('#container'),
  8157.                    content   = panel.querySelectorAll(`${sectionSelector} ytd-notification-renderer`);
  8158.             return content.length >= 4 && spinner && header && container && spinner.hasAttribute('hidden') && !header.hasAttribute('hidden') && !container.hasAttribute('hidden');
  8159.         };
  8160.  
  8161.         const whenReady = new Promise((resolve, reject) => {
  8162.             const timeout = setTimeout(() => {
  8163.                 chronoNotificationRunning = false;
  8164.                 observer.disconnect();
  8165.                 reject();
  8166.             }, 7000);
  8167.  
  8168.             const check = () => { if (ready()) {observer.disconnect(); clearTimeout(timeout); resolve();}};
  8169.             const observer = new MutationObserver(check);
  8170.             observer.observe(panel, {subtree: true, attributes: true, attributeFilter: ['hidden']});
  8171.             check();
  8172.         });
  8173.  
  8174.         whenReady.then(() => {
  8175.             const sections = panel.querySelectorAll(sectionSelector);
  8176.             if (sections.length < 2) {chronoNotificationRunning = false; return;}
  8177.  
  8178.             const importantSection   = sections[0];
  8179.             const moreSection        = sections[1];
  8180.             const moreItemsContainer = moreSection.querySelector('#items');
  8181.             const currentMoreItems   = [...moreItemsContainer.children];
  8182.             const importantItems     = [...importantSection.querySelectorAll('ytd-notification-renderer')];
  8183.             if (importantItems.length === 0) { chronoNotificationRunning = false; return; }
  8184.  
  8185.             function getSortKey(el) {
  8186.                 const time = el.querySelector('.metadata yt-formatted-string:last-child');
  8187.                 if (!time) return { position: -1, numericValue: Infinity };
  8188.  
  8189.                 const rawTime      = time.textContent.trim();
  8190.                 const digitMatch   = rawTime.match(/(\d+)/);
  8191.                 const numericToken = digitMatch?digitMatch[1]:'0';
  8192.                 const numericValue = Number(numericToken);
  8193.                 const unitString   = rawTime .replace(numericToken,'').replace(/\s+/g,' ').trim().toLowerCase();
  8194.                 const unitIndex    = sequence.findIndex(u => unitString.includes(u));
  8195.                 const position     = unitIndex === -1 ? -1 : unitPositions[sequence[unitIndex]];
  8196.  
  8197.                 return { position,numericValue };
  8198.             }
  8199.  
  8200.             importantItems.forEach(item => {
  8201.                 const A = getSortKey(item);
  8202.                 const before = currentMoreItems.find(r => {
  8203.                     const B = getSortKey(r);
  8204.                     return (B.position > A.position) || (B.position === A.position && B.numericValue > A.numericValue);
  8205.                 });
  8206.  
  8207.                 moreItemsContainer.insertBefore(item, before || null);
  8208.                 const idx = currentMoreItems.indexOf(before);
  8209.                 currentMoreItems.splice(idx === -1 ? currentMoreItems.length : idx, 0, item);
  8210.             });
  8211.  
  8212.             chronoNotificationRunning = false;
  8213.         });
  8214.     }
  8215.  
  8216.     function getUnitPositions(locale) {
  8217.         const units = unitMatrix[locale];
  8218.         const positions = {};
  8219.  
  8220.         units.forEach((unit, index) => {
  8221.             positions[unit] = Math.floor(index / 2);
  8222.         });
  8223.  
  8224.         return positions;
  8225.     }
  8226.  
  8227.     // theater mode check
  8228.     function theaterModeCheck() {
  8229.         isTheaterMode = watchFlexyElement?.hasAttribute('theater') || false;
  8230.     }
  8231.  
  8232.     // fullscreen check
  8233.     function fullscreenCheck() {
  8234.         isFullscreen = playerElement?.classList.contains('ytp-fullscreen') || false;
  8235.     }
  8236.  
  8237.     function musicVideoCheck() {
  8238.         isMusicVideo = !!( docElement.querySelector('meta[itemprop="genre"][content="Music"]') && docElement.querySelector('ytd-watch-flexy #below ytd-badge-supported-renderer .badge-style-type-verified-artist'));
  8239.     }
  8240.  
  8241.     // live stream check
  8242.     function liveVideoCheck() {
  8243.         isLiveVideo = watchFlexyElement.querySelector('.ytp-time-display')?.classList.contains('ytp-live') || false;
  8244.     }
  8245.  
  8246.     // chapter panel check
  8247.     function chapterPanelCheck() {
  8248.         chapterPanel = watchFlexyElement.querySelector( 'ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-description-chapters]' ) || watchFlexyElement.querySelector( 'ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-macro-markers-auto-chapters]' );
  8249.         hasChapterPanel = !!chapterPanel;
  8250.     }
  8251.  
  8252.     // function to automatically open the chapter panel
  8253.     function openChapters() {
  8254.         if (hasChapterPanel)
  8255.             chapterPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  8256.     }
  8257.  
  8258.     // playlist panel check
  8259.     function playlistPanelCheck() {
  8260.         const playlistVideoItem = watchFlexyElement ? watchFlexyElement.querySelector('ytd-playlist-panel-video-renderer[id="playlist-items"]') : null;
  8261.         playlistPanel = watchFlexyElement ? watchFlexyElement.querySelector('ytd-playlist-panel-renderer[id="playlist"]') : null;
  8262.         hasPlaylistPanel = !!(playlistVideoItem && playlistPanel);
  8263.         playlistSelectedVideo = watchFlexyElement.querySelector('ytd-playlist-panel-video-renderer[selected]');
  8264.     }
  8265.  
  8266.     // transcript panel check
  8267.     function transcriptPanelCheck() {
  8268.         transcriptPanel = document.querySelector( 'ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-searchable-transcript"]' );
  8269.         hasTranscriptPanel = !!transcriptPanel;
  8270.     }
  8271.  
  8272.     // function to automatically open the transcript panel
  8273.     function openTranscript() {
  8274.         if (hasTranscriptPanel) {
  8275.             transcriptPanel.setAttribute('visibility', 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED');
  8276.             if (USER_CONFIG.defaultTranscriptLanguage !== 'auto' && !USER_CONFIG.YouTubeTranscriptExporter) waitForTranscriptWithoutYTE(() => { setTimeout(() => { setTranscriptLanguage(); }, 250); });
  8277.             if (USER_CONFIG.transcriptTimestamps && !USER_CONFIG.YouTubeTranscriptExporter) waitForTranscriptWithoutYTE(enableTimestamps);
  8278.         }
  8279.     }
  8280.  
  8281.     // transcript enable timestamps
  8282.     function enableTimestamps() {
  8283.         const transcriptPanelTimestamps = watchFlexyElement.querySelector('ytd-transcript-search-panel-renderer[hide-timestamps]');
  8284.         if (transcriptPanelTimestamps) transcriptPanelTimestamps.removeAttribute('hide-timestamps');
  8285.     }
  8286.  
  8287.     // move transcript menu button
  8288.     function transcriptMenuButton() {
  8289.         if (transcriptPanel) {
  8290.             const menuButton = transcriptPanel?.querySelector('#header > #menu');
  8291.             const footerSlot = transcriptPanel?.querySelector('#footer > ytd-transcript-footer-renderer');
  8292.             if (menuButton && footerSlot) footerSlot.appendChild(menuButton);
  8293.         }
  8294.     }
  8295.  
  8296.     // wait for transcript to load
  8297.     function waitForTranscriptWithoutYTE(callback) {
  8298.         const transcriptItems = transcriptPanel.querySelectorAll("ytd-transcript-segment-renderer");
  8299.         if (transcriptItems.length > 0) {
  8300.             callback();
  8301.             return;
  8302.         }
  8303.  
  8304.         let transcriptLoadedWithoutYTE = null;
  8305.         const transcriptObserver = new MutationObserver(() => {
  8306.             const transcriptItems = transcriptPanel.querySelectorAll("ytd-transcript-segment-renderer");
  8307.             if (transcriptItems.length > 0) {
  8308.                 transcriptLoadedWithoutYTE = true;
  8309.                 clearTimeout(transcriptFallbackTimer);
  8310.                 transcriptObserver.disconnect();
  8311.                 callback();
  8312.             }
  8313.         });
  8314.  
  8315.         transcriptObserver.observe(transcriptPanel, { childList: true, subtree: true });
  8316.  
  8317.         const transcriptFallbackTimer = setTimeout(() => {
  8318.             if (!transcriptLoadedWithoutYTE) transcriptObserver.disconnect();
  8319.         }, 7000);
  8320.     }
  8321.  
  8322.     // check and close chat window and close
  8323.     function chatWindowCheck() {
  8324.         hasChatPanel = !!(document.querySelector('#chat, iframe#chatframe, yt-video-metadata-carousel-view-model'));
  8325.  
  8326.         const chatMessageElement = document.querySelector('#chat-container ytd-live-chat-frame #message');
  8327.         const chatMessageElementStatus = document.querySelector('ytd-message-renderer.style-scope.ytd-live-chat-frame');
  8328.         const isChatMessageElementVisible = chatMessageElementStatus && window.getComputedStyle(chatMessageElementStatus).display !== 'none';
  8329.  
  8330.         if (chatMessageElement && isChatMessageElementVisible) {
  8331.             const messageText = chatMessageElement.textContent.trim();
  8332.             if (messageText === 'Chat is disabled for this live stream.') chatEnabled = false;
  8333.         } else chatEnabled = true;
  8334.  
  8335.         if (USER_CONFIG.closeChatWindow && initialRun && hasChatPanel && chatEnabled) closeLiveChat();
  8336.         else docElement.classList.remove('CentAnni-close-live-chat');
  8337.     }
  8338.  
  8339.     // localize languages
  8340.     function languageCheck() {
  8341.         const targetLanguageAudio = USER_CONFIG.defaultAudioLanguage.replace('auto','english');
  8342.         const targetLanguageSubtitles = USER_CONFIG.defaultSubtitleLanguage .replace('auto','english');
  8343.         const targetLanguageTranscript = USER_CONFIG.defaultTranscriptLanguage.replace('auto','english');
  8344.         const namesInUI = new Intl.DisplayNames([uiLanguage],{type:'language'});
  8345.         audioInLanguage = namesInUI.of(languageMap[targetLanguageAudio].code).toLowerCase();
  8346.         subtitleInLanguage = targetLanguageSubtitles === 'off'?Object.values(languageMap).find(entry => entry.code === uiLanguage).offNative.toLowerCase():namesInUI.of(languageMap[targetLanguageSubtitles].code).toLowerCase();
  8347.         transcriptInLanguage = namesInUI.of(languageMap[targetLanguageTranscript].code).toLowerCase();
  8348.         englishInLanguage = namesInUI.of(languageMap.english.code).toLowerCase();
  8349.     }
  8350.  
  8351.     // redirect channel page to videos
  8352.     function channelRedirect() {
  8353.         window.location.href = window.location.href.replace(/\/$/, '') + '/videos';
  8354.     }
  8355.  
  8356.     // redirect shorts to video page
  8357.     function redirectShortsToVideoPage() {
  8358.         window.location.href = window.location.href.replace('/shorts/', '/watch?v=');
  8359.     }
  8360.  
  8361.     // reset function
  8362.     function handleYTNavigation() {
  8363.         if (USER_CONFIG.playbackSpeed) document.addEventListener('yt-player-updated', initialSpeed); // set playback speed
  8364.         if (USER_CONFIG.preventAutoplay) document.addEventListener('yt-player-updated', pauseYouTubeVideo); // prevent autoplay
  8365.  
  8366.         if (USER_CONFIG.videoTabView) {
  8367.             document.querySelector('#related.style-scope.ytd-watch-flexy')?.classList.remove('CentAnni-tabView-content-attiva');
  8368.             document.querySelector('ytd-playlist-panel-renderer[id="playlist"].style-scope.ytd-watch-flexy')?.classList.remove('CentAnni-tabView-content-active');
  8369.         }
  8370.  
  8371.         document.querySelectorAll('.button-wrapper:not(:has(#transcript-settings-button)), #CentAnni-channel-btn, .CentAnni-remaining-time-container, .CentAnni-chapter-title, .CentAnni-info-date, #progress-bar-bar, #progress-bar-start, #progress-bar-end, #yt-transcript-settings-modal').forEach(el => el.remove());
  8372.     }
  8373.  
  8374.     // cache elements
  8375.     function updateCachedElements() {
  8376.         playerElement = document.getElementById('movie_player');
  8377.         watchFlexyElement = document.querySelector('ytd-watch-flexy');
  8378.         endElement = document.querySelector('#end');
  8379.     }
  8380.  
  8381.     // Chrome CSP compliance for setVideoQuality
  8382.     function runSetVideoQuality() {
  8383.         const code = `(${setVideoQuality})(${JSON.stringify(USER_CONFIG.defaultQuality)},${JSON.stringify(USER_CONFIG.defaultQualityPremium)});`;
  8384.         const policy = window.trustedTypes && trustedTypes.createPolicy('CentAnniAlchemy',{createScript: s => s });
  8385.         const script = document.createElement('script');
  8386.         script.text = policy?policy.createScript(code):code;
  8387.         document.documentElement.appendChild(script);
  8388.         script.remove();
  8389.     }
  8390.  
  8391.     // safari: chapter panel scroll fix
  8392.     function clickViewAllBtn() {
  8393.         const btn = watchFlexyElement.querySelector('#navigation-button ytd-button-renderer button[aria-label="View all"]');
  8394.         if (btn) btn.click();
  8395.     }
  8396.  
  8397.     //  ┌───────────────────────────────────────────────────────────────────┐
  8398.     //  │                         language support                          │
  8399.     //  └───────────────────────────────────────────────────────────────────┘
  8400.  
  8401.     // settings panel: audio, subtitles, and transcript languages
  8402.     const flag = {
  8403.         auto:       '🌐',
  8404.         english:    '🇺🇸',
  8405.         spanish:    '🇪🇸',
  8406.         hindi:      '🇮🇳',
  8407.         portuguese: '🇵🇹',
  8408.         german:     '🇩🇪',
  8409.         french:     '🇫🇷',
  8410.         italian:    '🇮🇹',
  8411.         dutch:      '🇳🇱',
  8412.         polish:     '🇵🇱',
  8413.         hebrew:     '🇮🇱',
  8414.         japanese:   '🇯🇵',
  8415.         korean:     '🇰🇷',
  8416.         chinese:    '🇨🇳',
  8417.         indonesian: '🇮🇩',
  8418.         swedish:    '🇸🇪',
  8419.         norwegian:  '🇳🇴',
  8420.         danish:     '🇩🇰',
  8421.         finnish:    '🇫🇮',
  8422.         czech:      '🇨🇿',
  8423.         greek:      '🇬🇷',
  8424.         hungarian:  '🇭🇺',
  8425.         romanian:   '🇷🇴',
  8426.         ukrainian:  '🇺🇦'
  8427.     };
  8428.  
  8429.     const langs = {
  8430.         auto: 'Auto (default)',
  8431.         english: 'English',
  8432.         spanish: 'Spanish - Español',
  8433.         hindi: 'Hindi - हिन्दी',
  8434.         portuguese: 'Portuguese - Português',
  8435.         german: 'German - Deutsch',
  8436.         french: 'French - Français',
  8437.         italian: 'Italian - Italiano',
  8438.         dutch: 'Dutch - Nederlands',
  8439.         polish: 'Polish - Polski',
  8440.         hebrew: 'Hebrew - עברית',
  8441.         japanese: 'Japanese - 日本語',
  8442.         korean: 'Korean - 한국어',
  8443.         chinese: 'Chinese - 中文',
  8444.         indonesian: 'Indonesian - Bahasa Indonesia',
  8445.         swedish: 'Swedish - Svenska',
  8446.         norwegian: 'Norwegian - Norsk',
  8447.         danish: 'Danish - Dansk',
  8448.         finnish: 'Finnish - Suomi',
  8449.         czech: 'Czech - Čeština',
  8450.         greek: 'Greek - Ελληνικά',
  8451.         hungarian: 'Hungarian - Magyar',
  8452.         romanian: 'Romanian - Română',
  8453.         ukrainian: 'Ukrainian - Українська'
  8454.     };
  8455.  
  8456.     function labeledLangs(includeOff = false) {
  8457.         const result = {};
  8458.         for (const key in langs) {
  8459.             const emoji = flag[key] || '';
  8460.             result[key] = `${emoji} ${langs[key]}`;
  8461.             if (includeOff && key === 'auto') result.off = '🚫 Off';
  8462.         }
  8463.         return result;
  8464.     }
  8465.  
  8466.     // set audio and subtitles
  8467.     const languageMap = new Proxy(Object.create(null), {
  8468.         get(cache,key) {
  8469.             if (cache[key]) return cache[key];
  8470.             const langCode = {
  8471.                 english    : 'en',
  8472.                 spanish    : 'es',
  8473.                 hindi      : 'hi',
  8474.                 portuguese : 'pt',
  8475.                 german     : 'de',
  8476.                 french     : 'fr',
  8477.                 italian    : 'it',
  8478.                 dutch      : 'nl',
  8479.                 polish     : 'pl',
  8480.                 hebrew     : 'he',
  8481.                 japanese   : 'ja',
  8482.                 korean     : 'ko',
  8483.                 chinese    : 'zh',
  8484.                 indonesian : 'id',
  8485.                 swedish    : 'sv',
  8486.                 norwegian  : 'no',
  8487.                 danish     : 'da',
  8488.                 finnish    : 'fi',
  8489.                 czech      : 'cs',
  8490.                 greek      : 'el',
  8491.                 hungarian  : 'hu',
  8492.                 romanian   : 'ro',
  8493.                 ukrainian  : 'uk'
  8494.             }[key];
  8495.             if (!langCode) return;
  8496.  
  8497.             const fixedLabels = {
  8498.                 en: { subs: 'Subtitles',     off: 'Off'            },
  8499.                 es: { subs: 'Subtítulos',    off: 'Desactivados'   },
  8500.                 hi: { subs: 'उपशीर्षक',        off: 'बंद'              },
  8501.                 pt: { subs: 'Legendas',      off: 'Desativar'      },
  8502.                 de: { subs: 'Untertitel',    off: 'Aus'            },
  8503.                 fr: { subs: 'Sous-titres',   off: 'Désactivés'     },
  8504.                 it: { subs: 'Sottotitoli',   off: 'Disattivati'    },
  8505.                 nl: { subs: 'Ondertiteling', off: 'Uit'            },
  8506.                 pl: { subs: 'Napisy',        off: 'Wyłączone'      },
  8507.                 he: { subs: 'כתוביות',       off: 'כבוי'           },
  8508.                 ja: { subs: '字幕',           off: 'オフ'           },
  8509.                 ko: { subs: '자막',           off: '끄기'            },
  8510.                 zh: { subs: '字幕',           off: '关闭'           },
  8511.                 id: { subs: 'Subtitle',      off: 'Nonaktifkan'    },
  8512.                 sv: { subs: 'Undertexter',   off: 'Av'             },
  8513.                 no: { subs: 'Undertekster',  off: 'Av'             },
  8514.                 da: { subs: 'Undertekster',  off: 'Fra'            },
  8515.                 fi: { subs: 'Tekstitys',     off: 'Pois'           },
  8516.                 cs: { subs: 'Titulky',       off: 'Vypnuto'        },
  8517.                 el: { subs: 'Υπότιτλοι',     off: 'Απενεργοποίηση' },
  8518.                 hu: { subs: 'Feliratok',     off: 'Ki'             },
  8519.                 ro: { subs: 'Subtitrări',    off: 'Dezactivat'     },
  8520.                 uk: { subs: 'Субтитри',      off: 'Вимкнено'       }
  8521.             };
  8522.  
  8523.             const dnUI = new Intl.DisplayNames([uiLanguage],{ type:'language'});
  8524.             const dnNative = new Intl.DisplayNames([langCode],{ type:'language'});
  8525.             const uiLabels = fixedLabels[uiLanguage];
  8526.  
  8527.             return cache[key] = {
  8528.                 english: dnUI.of(langCode),
  8529.                 native: dnNative.of(langCode),
  8530.                 nativeSubtitles: uiLabels.subs,
  8531.                 offNative: uiLabels.off,
  8532.                 code: langCode
  8533.             };
  8534.         }
  8535.     });
  8536.  
  8537.     // sort notifications chronologically
  8538.     const unitMatrix = new Proxy({}, {
  8539.         get(cache,locale) {
  8540.             if (cache[locale]) return cache[locale];
  8541.  
  8542.             const rtf   = new Intl.RelativeTimeFormat(locale,{ numeric: 'always' });
  8543.             const pr    = new Intl.PluralRules(locale);
  8544.             const base  = ['second','minute','hour','day','week','month','year'];
  8545.             const arr   = [];
  8546.  
  8547.             function localWord(unit, num) {
  8548.                 const fullString = rtf.format(-num, unit);
  8549.                 return fullString.replace(/^\d+\s*/, '').trim().toLowerCase();
  8550.             }
  8551.  
  8552.             base.forEach(u => {
  8553.                 arr.push(localWord(u, 1));
  8554.                 const pluralNum = pr.select(2) === 'one' ? 3 : 2;
  8555.                 arr.push(localWord(u, pluralNum));
  8556.             });
  8557.  
  8558.             return cache[locale] = arr;
  8559.         }
  8560.     });
  8561.  
  8562.     // home color code videos
  8563.     const categoriesMatrix = new Proxy({
  8564.         en: {
  8565.             live:     ['watching'],
  8566.             upcoming: ['waiting','scheduled for'],
  8567.             newly:    ['1 day ago','hours ago','hour ago','minutes ago','minute ago','seconds ago','second ago'],
  8568.             recent:   ['1 week ago','7 days ago','6 days ago','5 days ago','4 days ago','3 days ago','2 days ago'],
  8569.             lately:   ['1 month ago','weeks ago','14 days ago','13 days ago','12 days ago','11 days ago','10 days ago','9 days ago','8 days ago'],
  8570.             latterly: ['12 months ago','11 months ago','10 months ago','9 months ago','8 months ago','7 months ago','6 months ago','5 months ago','4 months ago','3 months ago','2 months ago'],
  8571.             old:      ['years ago','1 year ago'],
  8572.             streamed: ['streamed']
  8573.         }
  8574.     }, {
  8575.         get(cache, locale) {
  8576.             if (cache[locale]) return cache[locale];
  8577.  
  8578.             const rtf      = new Intl.RelativeTimeFormat(locale, { numeric: 'always' });
  8579.             const format   = (num, unit) => rtf.format(-num,unit).replace(/^-?\d+\s*/, '').toLowerCase();
  8580.             const uniq     = arr => [...new Set(arr)];
  8581.             const newly    = uniq([[1,'day'],[2,'hour'],[1,'hour'],[2,'minute'],[1,'minute'],[2,'second'],[1,'second']].map(([n,u]) => format(n,u)));
  8582.             const recent   = uniq([[1,'week'],[7,'day'],[6,'day'],[5,'day'],[4,'day'],[3,'day'],[2,'day']].map(([n,u]) => format(n,u)));
  8583.             const lately   = uniq([[1,'month'],[2,'week'],[14,'day'],[13,'day'],[12,'day'],[11,'day'],[10,'day'],[9,'day'],[8,'day']].map(([n,u])=> format(n,u)));
  8584.             const latterly = uniq([12,11,10,9,8,7,6,5,4,3,2].map(n => format(n,'month')));
  8585.             const old      = uniq([[2,'year'],[1,'year']].map(([n,u]) => format(n,u)));
  8586.  
  8587.             const keywordTable = {
  8588.                 en: { live: ['watching','live'],                     upcoming: ['waiting','scheduled for'],        streamed: ['streamed']                 },
  8589.                 es: { live: ['espectadores','en vivo'],              upcoming: ['esperando','programado para'],    streamed: ['emitido','transmitido']    },
  8590.                 hi: { live: ['देख रहे','लाइव'],                         upcoming: ['प्रतीक्षा','निर्धारित'],                   streamed: ['स्ट्रीम किया']                  },
  8591.                 pt: { live: ['assistindo','ao vivo'],                upcoming: ['aguardando','programado para'],   streamed: ['transmitido']              },
  8592.                 de: { live: ['zuschauer','live'],                    upcoming: ['wartend','geplant für'],          streamed: ['gestreamt']                },
  8593.                 fr: { live: ['spectateurs','en direct'],             upcoming: ['en attente','programmé pour'],    streamed: ['diffusé']                  },
  8594.                 it: { live: ['guardando','in diretta','spettatori'], upcoming: ['in attesa','programmato per'],    streamed: ['trasmesso','in streaming'] },
  8595.                 nl: { live: ['kijkers','live'],                      upcoming: ['wachten','gepland voor'],         streamed: ['gestreamd']                },
  8596.                 pl: { live: ['oglądających','na żywo'],              upcoming: ['oczekujących','zaplanowano na'],  streamed: ['transmitowano']            },
  8597.                 he: { live: ['צופים','בשידור חי'],                   upcoming: ['ממתין','מתוזמן ל'],               streamed: ['שודר']                     },
  8598.                 ja: { live: ['人が視聴中','ライブ'],                    upcoming: ['待機中','予定'],                   streamed: ['配信済み']                   },
  8599.                 ko: { live: ['명 시청 중','라이브'],                     upcoming: ['명 대기 중','예정됨'],                streamed: ['스트리밍됨']                  },
  8600.                 zh: { live: ['人正在观看','直播'],                     upcoming: ['正在等待','计划于'],                 streamed: ['已直播']                    },
  8601.                 id: { live: ['orang menonton','langsung'],           upcoming: ['menunggu','dijadwalkan pada'],    streamed: ['streaming']                },
  8602.                 sv: { live: ['tittare','direkt'],                    upcoming: ['väntar','planerat till'],         streamed: ['sändes']                   },
  8603.                 no: { live: ['seere','direkte'],                     upcoming: ['venter','planlagt til'],          streamed: ['strømmet']                 },
  8604.                 da: { live: ['seere','direkte'],                     upcoming: ['venter','planlagt til'],          streamed: ['streamet']                 },
  8605.                 fi: { live: ['katsojaa','suorana'],                  upcoming: ['odottaa','suunniteltu'],          streamed: ['striimattu']               },
  8606.                 cs: { live: ['sledujících','živě'],                  upcoming: ['čeká','naplánováno na'],          streamed: ['vysíláno']                 },
  8607.                 el: { live: ['θεατές','ζωντανά'],                    upcoming: ['αναμονή','προγραμματισμένο για'], streamed: ['μεταδόθηκε']               },
  8608.                 hu: { live: ['néző','élő'],                          upcoming: ['várakozik','ütemezve'],           streamed: ['streamelve']               },
  8609.                 ro: { live: ['spectatori','în direct'],              upcoming: ['așteaptă','programat pentru'],    streamed: ['transmis']                 },
  8610.                 uk: { live: ['глядачів','наживо'],                   upcoming: ['очікує','заплановано на'],        streamed: ['трансляція']               }
  8611.             };
  8612.             const keywordMatrix = keywordTable[locale] || keywordTable.en;
  8613.  
  8614.             return cache[locale] = {
  8615.                 live:     keywordMatrix.live,
  8616.                 upcoming: keywordMatrix.upcoming,
  8617.                 streamed: keywordMatrix.streamed,
  8618.                 newly,
  8619.                 recent,
  8620.                 lately,
  8621.                 latterly,
  8622.                 old
  8623.             };
  8624.         }
  8625.     });
  8626.  
  8627.     //  ┌───────────────────────────────────────────────────────────────────┐
  8628.     //  │                         initialization                            │
  8629.     //  └───────────────────────────────────────────────────────────────────┘
  8630.  
  8631.     let currentURL = null;
  8632.     let videoID = null;
  8633.     let lastVideoID = null;
  8634.     let isHomePage = false;
  8635.     let isVideoPage = false;
  8636.     let isLiveVideo = false;
  8637.     let isLiveStream = false;
  8638.     let isShortPage = false;
  8639.     let isSubscriptionsPage = false;
  8640.     let isPlaylistPage = false;
  8641.     let isPlaylistVideoPage = false;
  8642.     let playerElement = null;
  8643.     let watchFlexyElement = null;
  8644.     let endElement = null;
  8645.     let uiLanguage = null;
  8646.     let englishInLanguage = null;
  8647.     let audioInLanguage = null;
  8648.     let subtitleInLanguage = null;
  8649.     let transcriptInLanguage = null;
  8650.     let hasPlaylistPanel = false;
  8651.     let playlistPanel = null;
  8652.     let playlistSelectedVideo = null;
  8653.     let isChannelPage = false;
  8654.     let isChannelHome = false;
  8655.     let isMusicVideo = false;
  8656.     let initialRun = null;
  8657.     let chatEnabled = null;
  8658.     let isTheaterMode = null;
  8659.     let hasChapterPanel = null;
  8660.     let chapterPanel = null;
  8661.     let hasTranscriptPanel = null;
  8662.     let transcriptPanel = null;
  8663.     let hasChatPanel = null;
  8664.     let isFullscreen = null;
  8665.     let ignoreRateChange = false;
  8666.     let lastUserRate = null;
  8667.     let speedNotification = false;
  8668.     let hideNotificationTimeout;
  8669.     let chronoNotificationRunning = false;
  8670.     let defaultSpeed = USER_CONFIG.playbackSpeedValue;
  8671.     const infoSel = 'ytd-engagement-panel-section-list-renderer[target-id=engagement-panel-structured-description]';
  8672.     const menuSel = '#primary #top-row #top-level-buttons-computed';
  8673.     const fsCnSel = '#movie_player > div.ytp-chrome-bottom';
  8674.     const prBaSel = '.ytp-progress-bar-container';
  8675.     const prBeSel = '#columns #primary #below';
  8676.     const chapSel = '.ytp-chapters-container';
  8677.     const cmtsSel = 'ytd-comments#comments';
  8678.     const vidPSel = '.html5-video-player';
  8679.  
  8680.     async function initializeAlchemy() {
  8681.         if (USER_CONFIG.preventBackgroundExecution) { await chromeUserWait(); }
  8682.         updateCachedElements();
  8683.         buttonsLeftHeader();
  8684.  
  8685.         if (isVideoPage || isLiveStream) {
  8686.             languageCheck();
  8687.             liveVideoCheck();
  8688.             musicVideoCheck();
  8689.             fullscreenCheck();
  8690.             theaterModeCheck();
  8691.             chapterPanelCheck();
  8692.             playlistPanelCheck();
  8693.             transcriptPanelCheck();
  8694.             if (USER_CONFIG.videoTabView) tabView();
  8695.             if (USER_CONFIG.hideAdSlots) hideProductsSpan();
  8696.             if (USER_CONFIG.playbackSpeed) videoPlaybackSpeed();
  8697.             if (USER_CONFIG.commentsNewFirst) sortCommentsNewFirst();
  8698.             if (USER_CONFIG.defaultQuality!=='auto') runSetVideoQuality();
  8699.             if (USER_CONFIG.autoTheaterMode && !isTheaterMode) toggleTheaterMode();
  8700.             if (USER_CONFIG.closeChatWindow) setTimeout(() => { chatWindowCheck(); }, 500);
  8701.             if (USER_CONFIG.playlistDirectionBtns && isPlaylistVideoPage) playlistDirection();
  8702.             if (USER_CONFIG.progressBar && !isLiveVideo && !isLiveStream) keepProgressBarVisible();
  8703.             if (USER_CONFIG.displayRemainingTime && !isLiveVideo && !isLiveStream) remainingTime();
  8704.             if (USER_CONFIG.autoOpenChapters && !USER_CONFIG.videoTabView && hasChapterPanel) openChapters();
  8705.             if (USER_CONFIG.autoOpenTranscript && !USER_CONFIG.videoTabView && hasTranscriptPanel) openTranscript();
  8706.             if (USER_CONFIG.defaultAudioLanguage!=='auto' || USER_CONFIG.defaultSubtitleLanguage!=='auto') setLanguage();
  8707.  
  8708.             // transcript exporter
  8709.             let transcriptLoaded = false;
  8710.             if (USER_CONFIG.YouTubeTranscriptExporter) {
  8711.                 try { await preLoadTranscript(); transcriptLoaded = true; }
  8712.                 catch (error) { setTimeout(() => { addSettingsButton(); }, 3000); }
  8713.                 if (transcriptLoaded) addButton();
  8714.             } else addSettingsButton();
  8715.         } else {
  8716.             addSettingsButton();
  8717.             if (USER_CONFIG.channelRSSBtn && isChannelPage) addRSSFeedButton();
  8718.             if (USER_CONFIG.playlistLinks && isPlaylistPage) handlePlaylistLinks();
  8719.             if (USER_CONFIG.channelPlaylistBtn && isChannelPage) addPlaylistButtons();
  8720.             if (USER_CONFIG.lastSeenVideo && isSubscriptionsPage) markLastSeenVideo();
  8721.             if (USER_CONFIG.colorCodeVideosEnabled && isHomePage) homeColorCodeVideos();
  8722.             if (USER_CONFIG.playlistTrashCan && isPlaylistPage) playlistRemovalButtons();
  8723.             if (USER_CONFIG.playbackSpeed && isShortPage) createPlaybackSpeedController();
  8724.         }
  8725.     }
  8726.  
  8727.     // YouTube navigation handler
  8728.     function handleYouTubeNavigation() {
  8729.         // console.log("YouTubeAlchemy: Event Listner Arrived");
  8730.         const newURL = window.location.href;
  8731.         if (newURL !== currentURL) {
  8732.             currentURL = newURL;
  8733.             // console.log("YouTubeAlchemy: Only One Survived");
  8734.             if (!docBody) docBody = document.body;
  8735.             if (!cssSettingsApplied) loadCSSsettings();
  8736.             chronoNotificationRunning = false;
  8737.             initialRun = true;
  8738.  
  8739.             const urlObj = new URL(newURL);
  8740.             isHomePage = urlObj.pathname === '/';
  8741.             isVideoPage = urlObj.pathname === '/watch';
  8742.             isLiveStream = urlObj.pathname.startsWith('/live/');
  8743.             isShortPage = urlObj.pathname.startsWith('/shorts/');
  8744.             isPlaylistPage = urlObj.pathname === '/playlist';
  8745.             isPlaylistVideoPage = newURL.includes('&list=');
  8746.             isSubscriptionsPage = urlObj.pathname === '/feed/subscriptions';
  8747.             isChannelPage = /^\/@[a-zA-Z0-9._-]+/.test(urlObj.pathname);
  8748.             isChannelHome = /^(\/@[a-zA-Z0-9._-]+|\/channel\/[a-zA-Z0-9_\-=.]+)$/.test(urlObj.pathname);
  8749.             uiLanguage = (docElement.lang || navigator.language || 'en').split('-')[0];
  8750.             if (USER_CONFIG.channelReindirizzare && isChannelHome) { channelRedirect(); return; }
  8751.             if (USER_CONFIG.redirectShorts && isShortPage) { redirectShortsToVideoPage(); return; }
  8752.  
  8753.             if (isVideoPage || isLiveStream) {
  8754.                 lastVideoID = videoID;
  8755.                 videoID = urlObj.searchParams.get('v');
  8756.  
  8757.                 if (USER_CONFIG.hideEndCards) docElement.style.setProperty('--video-url',`url("https://i.ytimg.com/vi/${videoID}/maxresdefault.jpg")`);
  8758.                 if (USER_CONFIG.closeChatWindow) docElement.classList.add('CentAnni-close-live-chat');
  8759.             }
  8760.  
  8761.             // initiate the script
  8762.             const a   = [infoSel,menuSel,cmtsSel,vidPSel,chapSel,prBaSel,fsCnSel,prBeSel];
  8763.             const b   = ['#contents img'];
  8764.             const c   = ['ytd-app #page-manager > ytd-watch-flexy:not([hidden])'];
  8765.             const d   = ['ytd-app #page-manager > ytd-browse:not([hidden])'];
  8766.             const tar = (isVideoPage||isLiveStream)?a:b;
  8767.             const sel = (isVideoPage||isLiveStream)?c:d;
  8768.             const ctn = document.querySelector(sel);if(!ctn)return;
  8769.  
  8770.             let o;
  8771.             const init = () => {o.disconnect();requestIdleCallback(() => {initializeAlchemy();},{timeout:2000});};
  8772.             const t = setTimeout(init,3000);
  8773.             o = new MutationObserver(() => {
  8774.                 for (let s of tar) if (!ctn.querySelector(s)) return;
  8775.                 clearTimeout(t);
  8776.                 init();
  8777.             });
  8778.  
  8779.             o.observe(ctn, { childList: true, subtree: true });
  8780.         }
  8781.     }
  8782.  
  8783.     // pause script until tab becomes visible
  8784.     async function chromeUserWait() {
  8785.         if (document.visibilityState !== 'visible') {
  8786.             //console.log("YouTubeAlchemy: Waiting for this tab to become visible...");
  8787.             return new Promise((resolve) => {
  8788.                 document.addEventListener('visibilitychange', function onVisibilityChange() {
  8789.                     if (document.visibilityState === 'visible') {
  8790.                         document.removeEventListener('visibilitychange', onVisibilityChange);
  8791.                         resolve();
  8792.                     }
  8793.                 });
  8794.             });
  8795.         }
  8796.     }
  8797.  
  8798.     // event listeners
  8799.     document.addEventListener('yt-navigate-start', handleYTNavigation); // reset
  8800.     document.addEventListener('yt-navigate-finish', handleYouTubeNavigation); // default
  8801.     document.addEventListener('yt-page-data-updated', handleYouTubeNavigation); // backup
  8802.     document.addEventListener('yt-page-data-fetched', handleYouTubeNavigation); // redundancy
  8803.     if (USER_CONFIG.playbackSpeed) document.addEventListener('yt-player-updated', initialSpeed); // set playback speed
  8804.     if (USER_CONFIG.playbackSpeed) document.addEventListener('fullscreenchange', fullscreenCheck); // fullscreen change
  8805.     if (USER_CONFIG.preventAutoplay) document.addEventListener('yt-player-updated', pauseYouTubeVideo); // prevent autoplay
  8806.     if (USER_CONFIG.chronologicalNotifications) {document.addEventListener('yt-update-unseen-notification-count', () => setTimeout( () => requestIdleCallback(chronoNotifications, {timeout:250}),100));} // sort notifications
  8807. })();