☰

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.

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址