☰

YouTube Boost Chat

Full Replacement of YouTube Chat Message List

Устаревшая версия за 12.01.2025. Перейдите к последней версии.

  1. // ==UserScript==
  2. // @name                YouTube Boost Chat
  3. // @namespace           UserScripts
  4. // @version             0.2.12
  5. // @license             MIT
  6. // @match               https://*.youtube.com/live_chat*
  7. // @grant               none
  8. // @author              CY Fung
  9. // @run-at              document-start
  10. // @grant               none
  11. // @unwrap
  12. // @allFrames           true
  13. // @inject-into         page
  14. // @require             https://cdn.jsdelivr.net/gh/cyfung1031/userscript-supports@5d83d154956057bdde19e24f95b332cb9a78fcda/library/default-trusted-type-policy.js
  15. // @require             https://cdn.jsdelivr.net/gh/cyfung1031/userscript-supports@b020bbb73dfa65d72b4656596f8e9ff1549becd6/library/solid-js-prod.js
  16. // @description         Full Replacement of YouTube Chat Message List
  17. // @description:ja      YouTubeチャットメッセージリストの完全置き換え
  18. // @description:zh-TW   完全替換 YouTube 聊天訊息列表
  19. // @description:zh-CN   完全替换 YouTube 聊天消息列表
  20. // ==/UserScript==
  21.  
  22. /*
  23.  
  24. MIT License
  25.  
  26. Copyright 2024 CY Fung
  27.  
  28. Permission is hereby granted, free of charge, to any person obtaining a copy
  29. of this software and associated documentation files (the "Software"), to deal
  30. in the Software without restriction, including without limitation the rights
  31. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  32. copies of the Software, and to permit persons to whom the Software is
  33. furnished to do so, subject to the following conditions:
  34.  
  35. The above copyright notice and this permission notice shall be included in all
  36. copies or substantial portions of the Software.
  37.  
  38. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  39. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  40. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  41. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  42. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  43. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  44. SOFTWARE.
  45.  
  46. */
  47.  
  48. (() => {
  49.  
  50.   const USE_SHADOWROOT = false;
  51.  
  52.   const MAX_ITEMS_FOR_TOTAL_DISPLAY = 90;
  53.   // const RENDER_MESSAGES_ONE_BY_ONE = true;
  54.   const LOGTIME_FLUSHITEMS = false;
  55.   const DEBUG_windowVars = false;
  56.  
  57.   // ----------------------------------------------------------------------------------------------------------
  58.  
  59.   /** @type {WeakMapConstructor} */
  60.   const WeakMap = window.WeakMapOriginal || window.WeakMap;
  61.  
  62.  
  63.  
  64.  
  65.   let isThisBrowserSupported = true;
  66.   let DO_scrollIntoViewIfNeeded = false;
  67.  
  68.   if (isThisBrowserSupported && (typeof Element.prototype.attachShadow !== 'function' || typeof IntersectionObserver === 'undefined' || typeof CSS === 'undefined' || typeof CSS.supports === 'undefined')) {
  69.     isThisBrowserSupported = false;
  70.   } else {
  71.     const isOverflowAnchorSupported = CSS.supports("overflow-anchor", "auto") && CSS.supports("overflow-anchor", "none");
  72.     const isScrollIntoViewIfNeededSupported = typeof Element.prototype.scrollIntoViewIfNeeded === 'function';
  73.  
  74.     if (isThisBrowserSupported && !isOverflowAnchorSupported && isScrollIntoViewIfNeededSupported) {
  75.       DO_scrollIntoViewIfNeeded = true; // for webkit (Safari, Orion)
  76.     } else if (isThisBrowserSupported && !isOverflowAnchorSupported && !isScrollIntoViewIfNeededSupported) {
  77.       isThisBrowserSupported = false;
  78.     }
  79.   }
  80.  
  81.   if (!isThisBrowserSupported) {
  82.     console.warn('Your browser does not support YouTube Boost Chat');
  83.     return;
  84.   }
  85.  
  86.   const _flag0281_ = window._flag0281_ = 0x2 | 0x4 | 0x8 | 0x40 | 0x80 | 0x100 | 0x40000;
  87.  
  88.  
  89.  
  90.   const defaultPolicy = (typeof trustedTypes !== 'undefined' && trustedTypes.defaultPolicy) || { createHTML: s => s };
  91.   function createHTML(s) {
  92.     return defaultPolicy.createHTML(s);
  93.   }
  94.  
  95.   const { appendChild: fragmentAppendChild } = ((h0) => h0)(new DocumentFragment());
  96.  
  97.   /* globals WeakRef:false */
  98.  
  99.   /** @type {(o: Object | null) => WeakRef | null} */
  100.   const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  101.  
  102.   /** @type {(wr: Object | null) => Object | null} */
  103.   const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  104.  
  105.   /** @type {globalThis.PromiseConstructor} */
  106.   const Promise = (async () => { })().constructor; // YouTube hacks Promise in WaterFox Classic and "Promise.resolve(0)" nevers resolve.
  107.  
  108.   const PromiseExternal = ((resolve_, reject_) => {
  109.     const h = (resolve, reject) => { resolve_ = resolve; reject_ = reject };
  110.     return class PromiseExternal extends Promise {
  111.       constructor(cb = h) {
  112.         super(cb);
  113.         if (cb === h) {
  114.           /** @type {(value: any) => void} */
  115.           this.resolve = resolve_;
  116.           /** @type {(reason?: any) => void} */
  117.           this.reject = reject_;
  118.         }
  119.       }
  120.     };
  121.   })();
  122.  
  123.   if (!HTMLElement.prototype.getAttribute23751 && !HTMLElement.prototype.getAttribute23752 && typeof HTMLElement.prototype.getAttribute === 'function') {
  124.  
  125.     HTMLElement.prototype.getAttribute23751 = HTMLElement.prototype.getAttribute;
  126.     HTMLElement.prototype.getAttribute23752 = function (x) {
  127.       if (x === 'shared-tooltip-text' && arguments.length === 1) {
  128.         return null;
  129.       }
  130.       return this.getAttribute23751(x)
  131.     };
  132.  
  133.   }
  134.  
  135.   const isCtrl = (e) => !!((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey));
  136.   const isAlt = (e) => !!(e.altKey);
  137.  
  138.   const insp = o => o ? (o.polymerController || o.inst || o || 0) : (o || 0);
  139.   const indr = o => insp(o).$ || o.$ || 0;
  140.  
  141.   class VisibleItemList extends Array {
  142.     constructor(...args) {
  143.       super(...args);
  144.       R(this);
  145.     }
  146.  
  147.     reverse() {
  148.       return W(this) && super.reverse();
  149.     }
  150.     flat(depth = 1) {
  151.       return W(this) && super.flat(...arguments);
  152.     }
  153.     flatMap(callbackFn, thisArg = undefined) {
  154.       return W(this) && super.flatMap(...arguments);
  155.     }
  156.     fill(value, start = undefined, end = undefined) {
  157.       return W(this) && super.fill(...arguments);
  158.     }
  159.     sort(compareFn = undefined) {
  160.       return W(this) && super.sort(...arguments);
  161.     }
  162.  
  163.     push(...elements) {
  164.       return W(this) && super.push(...arguments);
  165.     }
  166.  
  167.     pop() {
  168.       return W(this) && super.pop();
  169.     }
  170.  
  171.     unshift(...elements) {
  172.       return W(this) && super.unshift(...arguments);
  173.     }
  174.  
  175.     shift() {
  176.       return W(this) && super.shift();
  177.     }
  178.  
  179.     splice(start, deleteCount, ...items) {
  180.       return W(this) && super.splice(...arguments);
  181.     }
  182.  
  183.  
  184.     setLength(n) {
  185.       W(this).length = n;
  186.     }
  187.  
  188.     getLength(){
  189.       return this.length;
  190.     }
  191.  
  192.  
  193.  
  194.   }
  195.  
  196.   let mme = null;
  197.  
  198.  
  199.  
  200.   function getCodeLocation() {
  201.     let p = new Error().stack;
  202.  
  203.     if (p.includes('solid')) return 'solid';
  204.     if (p.includes('VisibleItemList.')) return 'solid';
  205.     let q = p.match(/Array\.\w+[^\n\r]+[\r\n]+([^\n\r]+)/)
  206.     q = q ? q[1] : p
  207.     return q;
  208.     // const callstack = new Error().stack.split("\n");
  209.     // callstack.shift();
  210.     // while (callstack.length && callstack[0].includes("-extension://")) {
  211.     //     callstack.shift();
  212.     // }
  213.     // if (!callstack.length) {
  214.     //     return "";
  215.     // }
  216.     // return '\n' + callstack[0].trim();
  217.   }
  218.  
  219.  
  220.   const { _setAttribute, _insertBefore, _removeAttribute, replaceWith, appendChild } = (() => {
  221.     let _setAttribute = Element.prototype.setAttribute;
  222.     try {
  223.       _setAttribute = ShadyDOM.nativeMethods.setAttribute || _setAttribute;
  224.     } catch (e) { }
  225.     let _insertBefore = Node.prototype.insertBefore;
  226.     try {
  227.       _insertBefore = ShadyDOM.nativeMethods.insertBefore || _insertBefore;
  228.     } catch (e) { }
  229.     let _removeAttribute = Element.prototype.removeAttribute;
  230.     try {
  231.       _removeAttribute = ShadyDOM.nativeMethods.removeAttribute || _removeAttribute;
  232.     } catch (e) { }
  233.     let replaceWith = Element.prototype.replaceWith;
  234.     try {
  235.       replaceWith = ShadyDOM.nativeMethods.replaceWith || replaceWith;
  236.     } catch (e) { }
  237.     let appendChild = Node.prototype.appendChild;
  238.     try {
  239.       appendChild = ShadyDOM.nativeMethods.appendChild || appendChild;
  240.     } catch (e) { }
  241.     return { _setAttribute, _insertBefore, _removeAttribute, replaceWith, appendChild };
  242.   })();
  243.  
  244.   const isCustomElementsProvided = typeof customElements !== "undefined" && typeof (customElements || 0).whenDefined === "function";
  245.  
  246.   const promiseForCustomYtElementsReady = isCustomElementsProvided ? Promise.resolve(0) : new Promise((callback) => {
  247.     const EVENT_KEY_ON_REGISTRY_READY = "ytI-ce-registry-created";
  248.     if (typeof customElements === 'undefined') {
  249.       if (!('__CE_registry' in document)) {
  250.         // https://github.com/webcomponents/polyfills/
  251.         Object.defineProperty(document, '__CE_registry', {
  252.           get() {
  253.             // return undefined
  254.           },
  255.           set(nv) {
  256.             if (typeof nv == 'object') {
  257.               delete this.__CE_registry;
  258.               this.__CE_registry = nv;
  259.               this.dispatchEvent(new CustomEvent(EVENT_KEY_ON_REGISTRY_READY));
  260.             }
  261.             return true;
  262.           },
  263.           enumerable: false,
  264.           configurable: true
  265.         })
  266.       }
  267.       let eventHandler = (evt) => {
  268.         document.removeEventListener(EVENT_KEY_ON_REGISTRY_READY, eventHandler, false);
  269.         const f = callback;
  270.         callback = null;
  271.         eventHandler = null;
  272.         f();
  273.       };
  274.       document.addEventListener(EVENT_KEY_ON_REGISTRY_READY, eventHandler, false);
  275.     } else {
  276.       callback();
  277.     }
  278.   });
  279.  
  280.   const whenCEDefined = isCustomElementsProvided
  281.     ? (nodeName) => customElements.whenDefined(nodeName)
  282.     : (nodeName) => promiseForCustomYtElementsReady.then(() => customElements.whenDefined(nodeName));
  283.  
  284.  
  285.   const inPlaceArrayPush = (() => {
  286.     // for details, see userscript-supports/library/misc.js
  287.     const LIMIT_N = typeof AbortSignal !== 'undefined' && typeof (AbortSignal || 0).timeout === 'function' ? 50000 : 10000;
  288.     return function (dest, source) {
  289.       let index = 0;
  290.       const len = source.length;
  291.       while (index < len) {
  292.         let chunkSize = len - index; // chunkSize > 0
  293.         if (chunkSize > LIMIT_N) {
  294.           chunkSize = LIMIT_N;
  295.           dest.push(...source.slice(index, index + chunkSize));
  296.         } else if (index > 0) { // to the end
  297.           dest.push(...source.slice(index));
  298.         } else { // normal push.apply
  299.           dest.push(...source);
  300.         }
  301.         index += chunkSize;
  302.       }
  303.     }
  304.  
  305.   })();
  306.  
  307.   const createPipeline = () => {
  308.     let pipelineMutex = Promise.resolve();
  309.     const pipelineExecution = fn => {
  310.       return new Promise((resolve, reject) => {
  311.         pipelineMutex = pipelineMutex.then(async () => {
  312.           let res;
  313.           try {
  314.             res = await fn(); // performance concern? (8.6ms)
  315.           } catch (e) {
  316.             console.log('[yt-bst] error_F1', e);
  317.             reject(e);
  318.           }
  319.           resolve(res);
  320.         }).catch(console.warn);
  321.       });
  322.     };
  323.     return pipelineExecution;
  324.   };
  325.  
  326.  
  327.  
  328.   const firstObjectKey = (obj) => { // performance concern? (8.6ms)
  329.     for (const key in obj) {
  330.       if (obj.hasOwnProperty(key) && typeof obj[key] === 'object') return key;
  331.     }
  332.     return null;
  333.   }
  334.  
  335.   const flushPE = createPipeline();
  336.  
  337.  
  338.   class LimitedSizeSet extends Set {
  339.     constructor(n) {
  340.       super();
  341.       this.limit = n;
  342.     }
  343.  
  344.     add(key) {
  345.       if (!super.has(key)) {
  346.         super.add(key);
  347.         let n = super.size - this.limit;
  348.         if (n > 0) {
  349.           const iterator = super.values();
  350.           do {
  351.             const firstKey = iterator.next().value; // Get the first (oldest) key
  352.             super.delete(firstKey); // Delete the oldest key
  353.           } while (--n > 0)
  354.         }
  355.       }
  356.     }
  357.  
  358.     removeAdd(key) {
  359.       super.delete(key);
  360.       this.add(key);
  361.     }
  362.  
  363.   }
  364.  
  365.   const flushKeys = new LimitedSizeSet(64);
  366.   const mutableWM = new WeakMap();
  367.  
  368.   const canScrollIntoViewWithOptions = (() => {
  369.  
  370.     const element = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  371.     let i = 0;
  372.     try {
  373.       element.scrollIntoView({
  374.         get behavior() { i++ },
  375.         get block() { i++ }
  376.       });
  377.     } catch (e) {
  378.  
  379.     }
  380.     return i === 2;
  381.  
  382.  
  383.   })();
  384.  
  385.   if (!canScrollIntoViewWithOptions) {
  386.     throw '[BST] Your browser is not supported.'
  387.   }
  388.  
  389.  
  390.   const cssTexts = {
  391.     "outer": `
  392.  
  393.  
  394.       .bst-yt-main ~ #items[id][class] {
  395.         display: none !important;
  396.       }
  397.       .bst-yt-main ~ #item-scroller[id][class] {
  398.         display: none !important;
  399.       }
  400.       .bst-yt-main{
  401.         position: absolute;
  402.         display: flex;
  403.         flex-direction: column;
  404.         gap: 0;
  405.         top:0;
  406.         left:0;
  407.         bottom:0;
  408.         right:0;
  409.         contain: strict;
  410.         overflow: auto;
  411.       }
  412.  
  413.     `,
  414.     "inner": `
  415.  
  416.  
  417.       .bst-message-list {
  418.  
  419.           --bst-hyperlink-color: #3ea6ff;
  420.  
  421.           --color-transparent: rgba(0, 0, 0, 0);
  422.           --color-opac-b-1: rgba(0, 0, 0, 0.05);
  423.           --color-opac-b-2: rgba(0, 0, 0, 0.08);
  424.           --color-opac-b-3: rgba(0, 0, 0, 0.13);
  425.           --color-opac-b-4: rgba(0, 0, 0, 0.16);
  426.           --color-opac-b-5: rgba(0, 0, 0, 0.22);
  427.           --color-opac-b-6: rgba(0, 0, 0, 0.28);
  428.           --color-opac-b-7: rgba(0, 0, 0, 0.4);
  429.           --color-opac-b-8: rgba(0, 0, 0, 0.5);
  430.           --color-opac-b-9: rgba(0, 0, 0, 0.6);
  431.           --color-opac-b-10: rgba(0, 0, 0, 0.7);
  432.           --color-opac-b-11: rgba(0, 0, 0, 0.75);
  433.           --color-opac-b-12: rgba(0, 0, 0, 0.8);
  434.           --color-opac-b-13: rgba(0, 0, 0, 0.85);
  435.           --color-opac-b-14: rgba(0, 0, 0, 0.9);
  436.           --color-opac-b-15: rgba(0, 0, 0, 0.95);
  437.           --color-opac-gd-1: rgba(83, 83, 95, 0.38);
  438.           --color-opac-gd-2: rgba(83, 83, 95, 0.48);
  439.           --color-opac-gd-3: rgba(83, 83, 95, 0.55);
  440.           --color-opac-gd-4: rgba(50, 50, 57, 0.62);
  441.           --color-opac-gd-5: rgba(50, 50, 57, 0.95);
  442.  
  443.           --shadow-elevation-umbra: 0.34;
  444.           --shadow-elevation-penumbra: 0.26;
  445.           --shadow-elevation-ambient: 0.28;
  446.           --shadow-elevation-1: 0 1px 2px var(--color-opac-b-14), 0 0px 2px var(--color-opac-b-14);
  447.           --shadow-elevation-2: 0 4px 8px var(--color-opac-b-7), 0 0px 4px var(--color-opac-b-7);
  448.           --shadow-elevation-3: 0 6px 16px var(--color-opac-b-8), 0 0px 4px var(--color-opac-b-7);
  449.           --shadow-elevation-4: 0 12px 32px var(--color-opac-b-8), 0 0px 8px var(--color-opac-b-7);
  450.           --shadow-elevation-5: 0 32px 64px var(--color-opac-b-9), 0 0px 16px var(--color-opac-b-7);
  451.           --shadow-button-focus: 0 0 6px 0 var(--color-twitch-purple-8);
  452.           --shadow-button-active: 0 0 6px 0 var(--color-twitch-purple-8);
  453.           --shadow-button-disabled: none;
  454.           --shadow-button-overlay-focus: 0 0 6px 0 var(--color-opac-w-6);
  455.           --shadow-button-overlay-active: 0 0 6px 0 var(--color-opac-w-6);
  456.           --shadow-tab-focus: 0 4px 6px -4px var(--color-twitch-purple-11);
  457.           --shadow-balloon: 0 1px 1px var(--color-opac-b-5);
  458.           --shadow-scrollbar: 0 0 1px 1px var(--color-opac-w-5);
  459.  
  460.  
  461.         --color-opac-w-1: rgba(255, 255, 255, 0.05);
  462.         --color-opac-w-2: rgba(255, 255, 255, 0.08);
  463.         --color-opac-w-3: rgba(255, 255, 255, 0.13);
  464.         --color-opac-w-4: rgba(255, 255, 255, 0.16);
  465.         --color-opac-w-5: rgba(255, 255, 255, 0.22);
  466.         --color-opac-w-6: rgba(255, 255, 255, 0.28);
  467.         --color-opac-w-7: rgba(255, 255, 255, 0.4);
  468.         --color-opac-w-8: rgba(255, 255, 255, 0.5);
  469.         --color-opac-w-9: rgba(255, 255, 255, 0.6);
  470.         --color-opac-w-10: rgba(255, 255, 255, 0.7);
  471.         --color-opac-w-11: rgba(255, 255, 255, 0.75);
  472.         --color-opac-w-12: rgba(255, 255, 255, 0.8);
  473.         --color-opac-w-13: rgba(255, 255, 255, 0.85);
  474.         --color-opac-w-14: rgba(255, 255, 255, 0.9);
  475.         --color-opac-w-15: rgba(255, 255, 255, 0.95);
  476.  
  477.         --color-background-interactable-overlay-hover: var(--color-opac-w-3);
  478.  
  479.         --color-white: #ffffff;
  480.         --color-black: #000000;
  481.         --color-text-button-overlay-hover: var(--color-white);
  482.         --color-background-button-icon-overlay-default: var(--color-transparent);
  483.         --color-background-button-icon-overlay-hover: var(--color-background-interactable-overlay-hover);
  484.         --color-background-button-icon-overlay-active: var(--color-background-interactable-overlay-active);
  485.         --color-background-image-selector-overlay: var(--color-transparent);
  486.  
  487.  
  488.         --opacity-pulse-animation: 0.7;
  489.         --button-size-small: 2.4rem;
  490.         --button-size-default: 3rem;
  491.         --button-size-large: 3.6rem;
  492.  
  493.         --loading-spinner-size-small: 1.6rem;
  494.         --loading-spinner-size-default: 2.2rem;
  495.         --loading-spinner-size-large: 2.8rem;
  496.         --progress-bar-size-extra-small: 0.3rem;
  497.         --progress-bar-size-small: 0.5rem;
  498.         --progress-bar-size-default: 1rem;
  499.         --range-size: 0.2rem;
  500.         --range-thumb-size: 1.6rem;
  501.         --toggle-height: 2rem;
  502.         --toggle-width: 3.5rem;
  503.         --toggle-handle-size: 1.2rem;
  504.         --toggle-handle-shadow: none;
  505.         --toggle-handle-offset: 0.2rem;
  506.         --border-width-default: 1px;
  507.         --border-width-button: 2px;
  508.         --border-width-checkbox: 2px;
  509.         --border-width-drop-zone: 2px;
  510.         --border-width-marked: 3px;
  511.         --border-width-selectable: 2px;
  512.         --border-width-spinner: 2px;
  513.         --border-width-tag: 2px;
  514.         --border-radius-none: 0;
  515.         --border-radius-small: 0.2rem;
  516.         --border-radius-medium: 0.4rem;
  517.         --border-radius-large: 0.6rem;
  518.         --border-radius-extra-large: 1rem;
  519.         --border-radius-extra-extra-large: 1.6rem;
  520.         --border-radius-rounded: 9000px;
  521.  
  522.       }
  523.  
  524.       .bst-message-list {
  525.  
  526.         --yt-spec-base-background: #fff;
  527.         --yt-spec-raised-background: #fff;
  528.         --yt-spec-menu-background: #fff;
  529.         --yt-spec-inverted-background: #0f0f0f;
  530.         --yt-spec-additive-background: rgba(0,0,0,0.05);
  531.  
  532.         --yt-deprecated-blue-light: hsl(205.9,80%,43.1%);
  533.         --yt-deprecated-opalescence-grey-opacity-lighten-3: hsla(0,0%,53.3%,0.4);
  534.         --yt-deprecated-opalescence-soft-grey-opacity-lighten-3: hsla(0,0%,93.3%,0.4);
  535.         --yt-deprecated-luna-black-opacity-lighten-2: hsla(0,0%,6.7%,0.6);
  536.         --yt-deprecated-luna-black-opacity-lighten-3: hsla(0,0%,6.7%,0.4);
  537.         --yt-deprecated-luna-black-opacity-lighten-4: hsla(0,0%,6.7%,0.2);
  538.         --yt-opalescence-dark-grey: hsl(0,0%,20%);
  539.         --yt-deprecated-luna-black: hsl(0,0%,6.7%);
  540.         --yt-deprecated-white-opacity-lighten-4: hsla(0,0%,100%,0.2);
  541.         --yt-deprecated-opalescence-soft-grey-opacity-lighten-1: hsla(0,0%,93.3%,0.8);
  542.         --yt-deprecated-opalescence-soft-grey: hsl(0,0%,93.3%);
  543.         --yt-live-chat-background-color: var(--yt-spec-base-background);
  544.         --yt-live-chat-secondary-background-color: var( --yt-deprecated-opalescence-soft-grey );
  545.         --yt-live-chat-action-panel-background-color: var(--yt-spec-base-background);
  546.         --yt-live-chat-action-panel-background-color-transparent: hsla(0,0%,97%,0.8);
  547.         --yt-live-chat-additive-background-inverse: var(--yt-spec-white-1-alpha-10);
  548.         --yt-live-chat-mode-change-background-color: var( --yt-deprecated-opalescence-soft-grey-opacity-lighten-3 );
  549.         --yt-live-chat-primary-text-color: var(--yt-spec-text-primary);
  550.         --yt-live-chat-secondary-text-color: var( --yt-deprecated-luna-black-opacity-lighten-2 );
  551.         --yt-live-chat-secondary-text-color-inverse: var(--yt-spec-grey-2);
  552.         --yt-live-chat-tertiary-text-color: var( --yt-deprecated-luna-black-opacity-lighten-3 );
  553.         --yt-live-chat-tertiary-text-color-inverse: var(--yt-spec-white-1-alpha-30);
  554.         --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8;
  555.         --yt-live-chat-text-input-field-placeholder-color: var( --yt-deprecated-luna-black-opacity-lighten-2 );
  556.         --yt-live-chat-text-input-field-underline-transition-duration: 0.25s;
  557.         --yt-live-chat-icon-button-color: var(--yt-live-chat-primary-text-color);
  558.         --yt-live-chat-enabled-send-button-color: #4285f4;
  559.         --yt-live-chat-disabled-icon-button-color: var( --yt-deprecated-luna-black-opacity-lighten-4 );
  560.         --yt-live-chat-picker-button-color: var( --yt-deprecated-luna-black-opacity-lighten-3 );
  561.         --yt-live-chat-picker-button-active-color: var( --yt-deprecated-luna-black-opacity-lighten-1 );
  562.         --yt-live-chat-picker-button-disabled-color: var( --yt-live-chat-disabled-icon-button-color );
  563.         --yt-live-chat-picker-button-hover-color: var( --yt-deprecated-luna-black-opacity-lighten-2 );
  564.         --yt-live-chat-mention-background-color: #ff5722;
  565.         --yt-live-chat-mention-text-color: var(--yt-spec-static-overlay-text-primary);
  566.         --yt-live-chat-deleted-message-color: rgba(0,0,0,0.5);
  567.         --yt-live-chat-deleted-message-bar-color: rgba(11,11,11,0.2);
  568.         --yt-live-chat-disabled-button-background-color: var( --yt-deprecated-opalescence-soft-grey );
  569.         --yt-live-chat-disabled-button-text-color: var( --yt-deprecated-luna-black-opacity-lighten-3 );
  570.         --yt-live-chat-sub-panel-background-color: var(--yt-spec-base-background);
  571.         --yt-live-chat-sub-panel-background-color-transparent: var( --yt-spec-base-background );
  572.         --yt-live-chat-header-background-color: var(--yt-spec-base-background);
  573.         --yt-live-chat-header-button-color: var(--yt-deprecated-luna-black);
  574.         --yt-live-chat-header-bottom-border: 1px solid var(--yt-spec-10-percent-layer);
  575.         --yt-live-chat-count-color-early-warning: hsl(40,76%,55%);
  576.         --yt-live-chat-count-color-error: hsl(10,51%,49%);
  577.         --yt-live-chat-error-message-color: hsl(10,51%,49%);
  578.         --yt-live-chat-reconnect-message-color: hsla(0,0%,7%,0.2);
  579.         --yt-live-chat-moderator-color: hsl(225,84%,66%);
  580.         --yt-live-chat-new-moderator-color: var(--yt-spec-call-to-action);
  581.         --yt-live-chat-owner-color: hsl(40,76%,55%);
  582.         --yt-live-chat-author-chip-owner-background-color: #ffd600;
  583.         --yt-live-chat-author-chip-owner-text-color: rgba(0,0,0,0.87);
  584.         --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-1);
  585.         --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-grey-5);
  586.         --yt-live-chat-message-highlight-background-color: var( --yt-spec-raised-background );
  587.         --yt-live-chat-sponsor-color: #107516;
  588.         --yt-live-chat-overlay-color: hsla(0,0%,0%,0.6);
  589.         --yt-live-chat-dialog-background-color: var( --yt-spec-static-white-background );
  590.         --yt-live-chat-dialog-text-color: var( --yt-deprecated-luna-black-opacity-lighten-2 );
  591.         --yt-live-chat-banner-border-color: var(--yt-spec-10-percent-layer);
  592.         --yt-live-chat-banner-animation-duration: 0.35s;
  593.         --yt-live-chat-banner-animation-fast-duration: 0.25s;
  594.         --yt-live-chat-banner-gradient-scrim: linear-gradient(rgba(255,255,255,0.95),transparent);
  595.         --yt-live-chat-banner-indeterminate-bar-background: repeating-linear-gradient(90deg,#fff,#fff 6px,#aaa 6px,#aaa 9px);
  596.         --yt-live-chat-banner-bar-animation-duration: 1s;
  597.         --yt-live-chat-action-panel-gradient-scrim: linear-gradient(to top,rgba(255,255,255,0.95),transparent);
  598.         --yt-live-chat-call-for-questions-primary-text-color: var( --yt-spec-static-overlay-text-primary );
  599.         --yt-live-chat-call-for-questions-secondary-text-color: var( --yt-spec-static-overlay-text-secondary );
  600.         --yt-live-chat-call-for-questions-ask-question-button-color: var( --yt-spec-static-overlay-text-primary );
  601.         --yt-live-chat-call-to-action-primary-text-color: var( --yt-spec-static-overlay-text-primary );
  602.         --yt-live-chat-call-to-action-secondary-text-color: var( --yt-spec-static-overlay-text-secondary );
  603.         --yt-live-chat-call-to-action-ask-question-button-color: var( --yt-spec-static-overlay-text-primary );
  604.         --yt-live-chat-qna-primary-text-color: var( --yt-spec-static-overlay-text-primary );
  605.         --yt-live-chat-qna-start-panel-header-border-color: var( --yt-spec-10-percent-layer );
  606.         --yt-live-chat-qna-panel-start-button-background-color: var( --yt-spec-call-to-action );
  607.         --yt-live-chat-qna-panel-start-button-color: var( --yt-spec-general-background-b );
  608.         --yt-live-chat-qna-start-panel-button-background-color-disabled: var( --yt-spec-badge-chip-background );
  609.         --yt-live-chat-qna-panel-start-button-color-disabled: var( --yt-spec-text-disabled );
  610.         --yt-live-chat-poll-primary-text-color: var( --yt-spec-static-overlay-text-primary );
  611.         --yt-live-chat-poll-secondary-text-color: var( --yt-spec-static-overlay-text-secondary );
  612.         --yt-live-chat-poll-tertiary-text-color: var( --yt-spec-static-overlay-text-disabled );
  613.         --yt-live-chat-poll-choice-text-color: var( --yt-live-chat-poll-primary-text-color );
  614.         --yt-live-chat-poll-choice-additive-background-color: var( --yt-spec-black-pure-alpha-10 );
  615.         --yt-live-chat-poll-choice-additive-background-color-inverse: var( --yt-spec-white-1-alpha-20 );
  616.         --yt-live-chat-poll-banner-border-highlight-color: var(--yt-spec-white-3);
  617.         --yt-live-chat-poll-choice-background-color: transparent;
  618.         --yt-live-chat-poll-choice-border-radius: 2px;
  619.         --yt-live-chat-poll-choice-border: 1px solid var(--yt-live-chat-poll-tertiary-text-color);
  620.         --yt-live-chat-poll-choice-min-height: 16px;
  621.         --yt-live-chat-poll-choice-vote-bar-background-color: var( --yt-spec-static-overlay-button-secondary );
  622.         --yt-live-chat-poll-choice-hover-color: rgba(17,17,16,0.1);
  623.         --yt-live-chat-poll-choice-animation-duration: 0.5s;
  624.         --yt-live-chat-poll-choice-text-padding: 0 16px;
  625.         --yt-live-chat-poll-editor-panel-header-border-color: var( --yt-spec-10-percent-layer );
  626.         --yt-live-chat-poll-editor-start-button-color: var( --yt-spec-text-primary-inverse );
  627.         --yt-live-chat-poll-editor-start-button-background-color: var( --yt-spec-call-to-action );
  628.         --yt-live-chat-poll-editor-start-button-color-disabled: var( --yt-spec-text-disabled );
  629.         --yt-live-chat-poll-editor-start-button-background-color-disabled: var( --yt-spec-badge-chip-background );
  630.         --yt-live-interactivity-component-background-color: #264c8a;
  631.         --yt-live-chat-panel-animation-duration: 0.5s;
  632.         --yt-live-chat-universal-motion-curve: cubic-bezier(0.05,0,0,1);
  633.         --yt-live-chat-moderation-mode-hover-background-color: var( --yt-deprecated-luna-black-opacity-lighten-4 );
  634.         --yt-live-chat-additional-inline-action-button-color: var( --yt-spec-static-overlay-text-primary );
  635.         --yt-live-chat-additional-inline-action-button-background-color: hsla(0,0%,26%,0.8);
  636.         --yt-live-chat-additional-inline-action-button-background-color-hover: hsla(0,0%,26%,1);
  637.         --yt-formatted-string-emoji-size: 24px;
  638.         --yt-live-chat-emoji-size: 24px;
  639.         --yt-live-chat-text-input-field-suggestion-background-color: var( --yt-spec-static-white-background );
  640.         --yt-live-chat-text-input-field-suggestion-background-color-hover: #eee;
  641.         --yt-live-chat-text-input-field-suggestion-text-color: #666;
  642.         --yt-live-chat-text-input-field-suggestion-text-color-hover: #333;
  643.         --yt-live-chat-ticker-arrow-background: hsl(0,0%,97.3%);
  644.         --yt-emoji-picker-category-background-color: var( --yt-live-chat-action-panel-background-color-transparent );
  645.         --yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color);
  646.         --yt-emoji-picker-category-button-color: var(--yt-spec-text-disabled);
  647.         --yt-emoji-picker-search-background-color: var(--yt-spec-white-2);
  648.         --yt-emoji-picker-search-color: var( --yt-deprecated-luna-black-opacity-lighten-1 );
  649.         --yt-emoji-picker-search-placeholder-color: var( --yt-deprecated-luna-black-opacity-lighten-2 );
  650.         --yt-emoji-picker-base-with-variants-border: var( --yt-spec-black-pure-alpha-15 );
  651.         --yt-emoji-picker-variant-selector-bg-color: #e0e0e0;
  652.         --yt-live-chat-slider-active-color: #2196f3;
  653.         --yt-live-chat-slider-container-color: #c8c8c8;
  654.         --yt-live-chat-slider-markers-color: #505050;
  655.         --yt-live-chat-toast-action-color: #2196f3;
  656.         --yt-live-chat-toast-background-color: var(--yt-opalescence-dark-grey);
  657.         --yt-live-chat-toast-text-color: var(--yt-spec-static-overlay-text-primary);
  658.         --yt-live-chat-automod-button-background-color: var( --yt-deprecated-opalescence-soft-grey );
  659.         --yt-live-chat-automod-button-background-color-hover: var( --yt-deprecated-luna-black-opacity-lighten-4 );
  660.         --yt-live-chat-creator-support-button-border-radius: 2px;
  661.         --yt-live-chat-creator-support-button-padding: 10px 16px;
  662.         --yt-live-chat-creator-support-button-font-size: inherit;
  663.         --yt-live-chat-countdown-opacity: 0.3;
  664.         --yt-live-chat-shimmer-background-color: rgba(136,136,136,0.2);
  665.         --yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 65%);
  666.         --yt-live-chat-vem-background-color: var( --yt-deprecated-opalescence-soft-grey );
  667.         --yt-live-chat-upsell-dialog-renderer-button-padding: 10px 16px;
  668.         --yt-live-chat-product-picker-icon-color: rgba(17,17,17,0.6);
  669.         --yt-live-chat-product-picker-hover-color: rgba(17,17,16,0.1);
  670.         --yt-live-chat-product-picker-disabled-icon-color: rgba(17,17,17,0.4);
  671.         --yt-pdg-paid-stickers-tab-selection-bar-color: var(--yt-spec-dark-blue);
  672.         --yt-pdg-paid-stickers-author-name-font-size: 14px;
  673.         --yt-pdg-paid-stickers-author-subtext-font-size: 13px;
  674.         --yt-pdg-paid-stickers-margin-left: 38px;
  675.         --yt-live-chat-ninja-message-background-color: var(--yt-spec-base-background);
  676.         --yt-live-chat-panel-pages-border-color: var(--yt-spec-10-percent-layer)
  677.       }
  678.  
  679.       .bst-message-list[dark] {
  680.  
  681.         --yt-spec-base-background: #0f0f0f;
  682.         --yt-spec-raised-background: #212121;
  683.         --yt-spec-menu-background: #282828;
  684.         --yt-spec-inverted-background: #f1f1f1;
  685.         --yt-spec-additive-background: rgba(255,255,255,0.1);
  686.  
  687.         --yt-live-chat-background-color: var(--yt-spec-base-background);
  688.         --yt-live-chat-action-panel-background-color: var(--yt-spec-base-background);
  689.         --yt-live-chat-action-panel-background-color-transparent: rgba(40,40,40,0.8);
  690.         --yt-live-chat-additive-background-inverse: var(--yt-spec-black-pure-alpha-5);
  691.         --yt-live-chat-secondary-background-color: #282828;
  692.         --yt-live-chat-toast-text-color: var(--yt-spec-static-overlay-text-primary);
  693.         --yt-live-chat-toast-background-color: #323232;
  694.         --yt-live-chat-mode-change-background-color: #333;
  695.         --yt-live-chat-primary-text-color: var(--yt-spec-static-overlay-text-primary);
  696.         --yt-live-chat-secondary-text-color: rgba(255,255,255,0.7);
  697.         --yt-live-chat-secondary-text-color-inverse: var(--yt-spec-grey-5);
  698.         --yt-live-chat-tertiary-text-color: rgba(255,255,255,0.54);
  699.         --yt-live-chat-tertiary-text-color-inverse: var( --yt-spec-black-pure-alpha-30 );
  700.         --yt-live-chat-text-input-field-inactive-underline-color: #666;
  701.         --yt-live-chat-text-input-field-placeholder-color: #666;
  702.         --yt-live-chat-icon-button-color: var(--yt-live-chat-primary-text-color);
  703.         --yt-live-chat-enabled-send-button-color: #fff;
  704.         --yt-live-chat-disabled-icon-button-color: rgba(255,255,255,0.3);
  705.         --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color);
  706.         --yt-live-chat-picker-button-active-color: var( --yt-spec-static-overlay-text-primary );
  707.         --yt-live-chat-picker-button-disabled-color: var( --yt-live-chat-disabled-icon-button-color );
  708.         --yt-live-chat-picker-button-hover-color: rgba(255,255,255,0.74);
  709.         --yt-live-chat-mention-background-color: #ff5722;
  710.         --yt-live-chat-mention-text-color: #fff;
  711.         --yt-live-chat-deleted-message-color: rgba(255,255,255,0.5);
  712.         --yt-live-chat-deleted-message-bar-color: rgba(255,255,255,0.5);
  713.         --yt-live-chat-error-message-color: var(--yt-spec-brand-link-text);
  714.         --yt-live-chat-error-message-color-refresh: var(--yt-spec-error-indicator);
  715.         --yt-live-chat-reconnect-message-color: #fff;
  716.         --yt-live-chat-disabled-button-background-color: #444;
  717.         --yt-live-chat-disabled-button-text-color: var( --yt-live-chat-secondary-text-color );
  718.         --yt-live-chat-sub-panel-background-color: var(--yt-spec-base-background);
  719.         --yt-live-chat-sub-panel-background-color-transparent: var( --yt-spec-base-background );
  720.         --yt-live-chat-header-background-color: var(--yt-spec-base-background);
  721.         --yt-live-chat-header-button-color: var(--yt-live-chat-secondary-text-color);
  722.         --yt-live-chat-moderator-color: #5e84f1;
  723.         --yt-live-chat-owner-color: #ffd600;
  724.         --yt-live-chat-message-highlight-background-color: var( --yt-spec-raised-background );
  725.         --yt-live-chat-author-chip-owner-text-color: var(--yt-deprecated-luna-black);
  726.         --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-5);
  727.         --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-white-4);
  728.         --yt-live-chat-sponsor-color: #2ba640;
  729.         --yt-live-chat-overlay-color: rgba(0,0,0,0.5);
  730.         --yt-live-chat-dialog-background-color: #424242;
  731.         --yt-live-chat-dialog-text-color: var(--yt-spec-static-overlay-text-primary);
  732.         --yt-live-chat-button-default-text-color: var( --yt-spec-static-overlay-text-primary );
  733.         --yt-live-chat-button-default-background-color: var( --yt-deprecated-white-opacity-lighten-4 );
  734.         --yt-live-chat-button-dark-text-color: var( --yt-spec-static-overlay-text-primary );
  735.         --yt-live-chat-button-dark-background-color: var( --yt-deprecated-white-opacity-lighten-4 );
  736.         --yt-emoji-picker-variant-selector-bg-color: #2f2f2f;
  737.         --yt-live-chat-moderation-mode-hover-background-color: rgba(255,255,255,0.3);
  738.         --yt-live-chat-additional-inline-action-button-color: var(--yt-grey);
  739.         --yt-live-chat-additional-inline-action-button-background-color: var( --yt-deprecated-opalescence-soft-grey-opacity-lighten-1 );
  740.         --yt-live-chat-additional-inline-action-button-background-color-hover: var( --yt-deprecated-opalescence-soft-grey );
  741.         --yt-formatted-string-emoji-size: 24px;
  742.         --yt-live-chat-emoji-size: 24px;
  743.         --yt-live-chat-text-input-field-suggestion-background-color: #3e3e3e;
  744.         --yt-live-chat-text-input-field-suggestion-background-color-hover: #343434;
  745.         --yt-live-chat-text-input-field-suggestion-text-color: var( --yt-spec-static-overlay-text-primary );
  746.         --yt-live-chat-text-input-field-suggestion-text-color-hover: var( --yt-spec-static-overlay-text-primary );
  747.         --yt-live-chat-text-input-field-placeholder-color: var( --yt-live-chat-secondary-text-color );
  748.         --yt-live-chat-ticker-arrow-background: var( --yt-live-chat-action-panel-background-color );
  749.         --yt-emoji-picker-category-background-color: var( --yt-live-chat-action-panel-background-color-transparent );
  750.         --yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color);
  751.         --yt-emoji-picker-search-background-color: #444;
  752.         --yt-emoji-picker-search-color: #fff;
  753.         --yt-emoji-picker-search-placeholder-color: #999;
  754.         --yt-emoji-picker-base-with-variants-border: var(--yt-spec-white-1-alpha-25);
  755.         --yt-live-chat-slider-active-color: #2196f3;
  756.         --yt-live-chat-slider-container-color: #515151;
  757.         --yt-live-chat-slider-markers-color: #fff;
  758.         --yt-live-chat-banner-gradient-scrim: linear-gradient(rgba(40,40,40,0.95),transparent);
  759.         --yt-live-chat-action-panel-gradient-scrim: linear-gradient(to top,rgba(40,40,40,0.95),transparent);
  760.         --yt-live-chat-poll-choice-additive-background-color: var( --yt-spec-white-1-alpha-20 );
  761.         --yt-live-chat-poll-choice-additive-background-color-inverse: var( --yt-spec-black-pure-alpha-10 );
  762.         --yt-live-chat-poll-banner-border-highlight-color: var(--yt-spec-black-3);
  763.         --yt-live-chat-poll-editor-start-button-background-color-disabled: var( --yt-spec-grey-1 );
  764.         --yt-live-chat-automod-button-background-color: var( --yt-deprecated-opalescence-grey-opacity-lighten-3 );
  765.         --yt-live-chat-automod-button-background-color-hover: rgba(255,255,255,0.5);
  766.         --yt-live-chat-automod-button-explanation-color: rgba(255,255,255,0.7);
  767.         --yt-live-chat-countdown-opacity: 0.5;
  768.         --yt-live-chat-shimmer-background-color: rgba(17,17,17,0.4);
  769.         --yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg,rgba(0,0,0,0.1) 40%,rgba(100,100,100,0.3) 50%,rgba(0,0,0,0.1) 60%);
  770.         --yt-live-chat-vem-background-color: #3e3e3e;
  771.         --yt-live-chat-product-picker-icon-color: rgba(255,255,255,0.5);
  772.         --yt-live-chat-product-picker-hover-color: rgba(68,68,68,1);
  773.         --yt-live-chat-product-picker-disabled-icon-color: rgba(255,255,255,0.3);
  774.         --yt-pdg-paid-stickers-tab-selection-bar-color: var(--yt-spec-light-blue)
  775.       }
  776.  
  777.       /*
  778.  
  779.       yt-icon, .yt-icon-container.yt-icon {
  780.         display: inline-flexbox;
  781.         display: -moz-inline-box;
  782.         display: inline-flex;
  783.         -moz-box-align: center;
  784.         align-items: center;
  785.         -moz-box-pack: center;
  786.         justify-content: center;
  787.         position: relative;
  788.         vertical-align: middle;
  789.         fill: var(--iron-icon-fill-color,currentcolor);
  790.         stroke: var(--iron-icon-stroke-color,none);
  791.         width: var(--iron-icon-width,24px);
  792.         height: var(--iron-icon-height,24px);
  793.         animation: var(--iron-icon-animation);
  794.         margin-top: var(--iron-icon-margin-top);
  795.         margin-right: var(--iron-icon-margin-right);
  796.         margin-bottom: var(--iron-icon-margin-bottom);
  797.         margin-left: var(--iron-icon-margin-left);
  798.         padding: var(--iron-icon-padding);
  799.         contain: strict;
  800.       }
  801.  
  802.       */
  803.  
  804.  
  805.  
  806.       .bst-message-list {
  807.  
  808.         --bst-default-text-color: #000;
  809.         --bst-username-color: var(--yt-live-chat-secondary-text-color);
  810.         --bst-name-field-background-default: rgba(127, 127, 127, 0.15);
  811.  
  812.         --yt-live-chat-first-line-height: calc( var(--yt-live-chat-emoji-size) + 2px );
  813.         --yt-live-chat-profile-icon-size: 20px;
  814.         --bst-message-entry-pl: calc( var(--yt-live-chat-profile-icon-size) + 6px );
  815.         --yt-live-chat-tooltip-max-width: 60vw;
  816.  
  817.         --bst-list-pl: 20px;
  818.         --bst-list-pr: 20px;
  819.         --bst-list-pt: 8px;
  820.         --bst-list-pb: 8px;
  821.  
  822.         --bst-list-gap: 10px;
  823.  
  824.         --bst-author-badge-mb: .2rem;
  825.         /* --bst-author-badge-va: text-bottom; */
  826.         --bst-author-badge-va: middle;
  827.         --bst-author-badge-size: 16px;
  828.  
  829.         padding-left: var(--bst-list-pl);
  830.         padding-right: var(--bst-list-pr);
  831.         padding-top: var(--bst-list-pt);
  832.         padding-bottom: var(--bst-list-pb);
  833.         display: flex;
  834.         gap: var(--bst-list-gap);
  835.         flex-direction: column;
  836.         background-color: var(--yt-live-chat-background-color);
  837.  
  838.  
  839.         --yt-live-chat-sponsor-color-ori: var(--yt-live-chat-sponsor-color);
  840.         --yt-live-chat-moderator-color-ori: var(--yt-live-chat-moderator-color);
  841.         --yt-live-chat-author-chip-owner-background-color-ori: var(--yt-live-chat-author-chip-owner-background-color);
  842.  
  843.  
  844.         overflow-anchor: none;
  845.  
  846.       }
  847.  
  848.       .bst-message-list[dark] {
  849.         --bst-default-text-color: #fff;
  850.         --bst-username-color: #a3e3e3;
  851.         --bst-name-field-background-default: rgba(255, 255, 255, 0.15);
  852.       }
  853.  
  854.       .bst-message-list[dark] .bst-message-entry:not(.bst-membership-message) {
  855.         --yt-live-chat-sponsor-color: #71ff8c;
  856.         --yt-live-chat-moderator-color: #70a7ff;
  857.         --yt-live-chat-author-chip-owner-background-color: #ffff3c;
  858.       }
  859.  
  860.       .bst-overflow-anchor{
  861.         contain: strict;
  862.         display:block;
  863.         background: transparent;
  864.         position: relative;
  865.         flex-shrink: 0;
  866.         top:-4px;
  867.         border: 1px solid transparent;
  868.         z-index: -1;
  869.         visibility: collapse;
  870.         overflow-anchor: auto;
  871.       }
  872.  
  873.       @keyframes bstMessageListIssueBackground {
  874.         0% {
  875.             background-color: var(--yt-spec-menu-background);
  876.         }
  877.         100% {
  878.             background-color: var(--yt-live-chat-background-color);
  879.         }
  880.       }
  881.         
  882.       .bst-message-list.bst-message-list-issue {
  883.         animation: bstMessageListIssueBackground ease-in 1.74s infinite alternate;
  884.       }
  885.  
  886.       .bst-message-username {
  887.         box-sizing: border-box;
  888.         border-radius: 2px;
  889.         color: var(--bst-username-color);
  890.         font-weight: 500;
  891.       }
  892.  
  893.       yt-live-chat-renderer[hide-timestamps] {
  894.         --yt-live-chat-item-timestamp-display: none;
  895.       }
  896.       .bst-message-time:empty {
  897.         --yt-live-chat-item-timestamp-display: none;
  898.       }
  899.  
  900.       .bst-message-time {
  901.         display:inline;
  902.         white-space: nowrap;
  903.         vertical-align: baseline;
  904.         display: var(--yt-live-chat-item-timestamp-display, inline);
  905.         /* margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); */
  906.         color: var(--yt-live-chat-tertiary-text-color);
  907.         font-size: 11px;
  908.         display: var(--yt-live-chat-item-timestamp-display, inline-block);
  909.         min-width: 3em;
  910.         box-sizing: border-box;
  911.         padding-right: 8px;
  912.       }
  913.  
  914.       .bst-message-username {
  915.         display:inline;
  916.         vertical-align: baseline;
  917.       }
  918.       .bst-message-badges {
  919.         display:inline;
  920.         white-space: nowrap;
  921.         vertical-align: baseline;
  922.  
  923.       }
  924.       .bst-message-badges{
  925.         margin-left: 2px;
  926.       }
  927.       .bst-message-badges:empty{
  928.         margin:0;
  929.       }
  930.       .bst-message-badges::before{
  931.         content:'';
  932.         contain: strict;
  933.         display:inline;
  934.         user-select:none !important;
  935.         pointer-events:none !important;
  936.         line-height: var(--yt-live-chat-first-line-height);
  937.         vertical-align: baseline;
  938.       }
  939.       .bst-message-badges img.bst-author-badge{
  940.         display: inline;
  941.         margin-bottom: var(--bst-author-badge-mb);
  942.         vertical-align: var(--bst-author-badge-va);
  943.         width: var(--bst-author-badge-size);
  944.         height: var(--bst-author-badge-size);
  945.         max-height: 2rem;
  946.         max-width: 2rem;
  947.         contain: strict;
  948.         margin: 0;
  949.         margin-top: -4px;
  950.         margin-top: -0.5rem;
  951.         contain: strict;
  952.       }
  953.       .bst-message-badge-yt-icon{
  954.         display: inline-flex;
  955.         width: 16px;
  956.         height: 16px;
  957.         margin-bottom: var(--bst-author-badge-mb);
  958.         vertical-align: var(--bst-author-badge-va);
  959.         margin:0;
  960.         contain: strict;
  961.         fill: currentColor;
  962.       }
  963.       .bst-message-badge-yt-icon *{
  964.         pointer-events: none;
  965.       }
  966.       .bst-message-head-colon{
  967.         display:inline;
  968.         vertical-align: baseline;
  969.       }
  970.       .bst-message-head-colon::after{
  971.         content: ': ';
  972.       }
  973.  
  974.       .bst-name-field {
  975.         display: inline;
  976.         --bst-name-field-background: transparent;
  977.         position: relative;
  978.       }
  979.  
  980.       .bst-name-field:hover {
  981.         --bst-name-field-background: var(--bst-name-field-background-default);
  982.         background-color: var(--bst-name-field-background);
  983.         border-radius: 0.3rem;
  984.         box-shadow: 0 0 0 0.3rem var(--bst-name-field-background);
  985.         cursor: pointer;
  986.       }
  987.       .bst-message-body::before {
  988.         content: '\u200b';
  989.         opacity: 0;
  990.         user-select: none;
  991.       }
  992.  
  993.       .bst-message-profile-holder::before{
  994.         content: '\u200b';
  995.         opacity: 0;
  996.         user-select: none;
  997.       }
  998.  
  999.       [author-type="owner"] .bst-name-field {
  1000.         --bst-name-field-background: var(--yt-live-chat-author-chip-owner-background-color);
  1001.         background-color: var(--bst-name-field-background);
  1002.         border-radius: 0.3rem;
  1003.         box-shadow: 0 0 0 0.3rem var(--bst-name-field-background);
  1004.       }
  1005.       .bst-message-entry {
  1006.         display:block;
  1007.         position: relative;
  1008.         padding-left: var(--bst-message-entry-pl);
  1009.         box-sizing: border-box;
  1010.         min-height: 2.7rem;
  1011.         overflow-wrap: anywhere;
  1012.  
  1013.         /* transform-origin: bottom right; */
  1014.         /* transition: transform 160ms ease-in-out 16ms; */
  1015.         contain: layout style;
  1016.         --bst-message-entry-opacity-v: 0.3; /* .bst-message-entry > .bst-message-container */
  1017.  
  1018.       }
  1019.  
  1020.       .bst-message-entry[view-pos] {
  1021.         /* transform: scale(1); */
  1022.         --bst-message-entry-opacity-v: 1.0;
  1023.       }
  1024.  
  1025.       .bst-message-entry.bst-viewer-engagement-message {
  1026.         --bst-message-entry-pl: 0;
  1027.       }
  1028.  
  1029.       .bst-message-profile-anchor {
  1030.         margin-left: calc( -1 * var(--yt-live-chat-profile-icon-size) );
  1031.         position:absolute;
  1032.         left: -8px;
  1033.         display:inline-flex;
  1034.         align-items: center;
  1035.  
  1036.         vertical-align: super;
  1037.         width: var(--yt-live-chat-profile-icon-size);
  1038.         box-sizing:border-box;
  1039.       }
  1040.  
  1041.  
  1042.       .bst-message-head{
  1043.         flex-shrink: 0;
  1044.         display:inline;
  1045.         flex-direction:row;
  1046.         vertical-align: baseline;
  1047.         position: relative;
  1048.       }
  1049.  
  1050.       .bst-message-entry[author-type="owner"] .bst-message-head-colon {
  1051.         display: none;
  1052.       }
  1053.       .bst-message-entry[author-type="owner"] .bst-message-head{
  1054.         margin-right: 8px;
  1055.         margin-left: 4px;
  1056.       }
  1057.  
  1058.       .bst-message-list {
  1059.         --color-opac-w-4: rgba(255, 255, 255, 0.16);
  1060.         --border-radius-none: 0;
  1061.         --border-radius-small: 0.2rem;
  1062.         --border-radius-medium: 0.4rem;
  1063.         --border-radius-large: 0.6rem;
  1064.         --border-radius-extra-large: 1rem;
  1065.         --border-radius-extra-extra-large: 1.6rem;
  1066.         --border-radius-rounded: 9000px;
  1067.       }
  1068.  
  1069.       .bst-message-entry-highlight {
  1070.         bottom: -0.36rem;
  1071.         left: -0.86rem;
  1072.         right: -0.86rem;
  1073.         top: -0.36rem;
  1074.         border-radius: var(--border-radius-medium);
  1075.         position: absolute;
  1076.         --color-background-interactable-alpha-hover: var(--color-opac-w-4);
  1077.         --bst-highlight-color: var(--color-background-interactable-alpha-hover);
  1078.         pointer-events: none !important;
  1079.       }
  1080.  
  1081.       .bst-message-entry-holding .bst-message-entry-highlight{
  1082.         --color-background-interactable-alpha-hover: var(--color-opac-w-5);
  1083.       }
  1084.  
  1085.       .bst-message-entry-line {
  1086.         position: relative;
  1087.         display: inline;
  1088.       }
  1089.  
  1090.       .bst-message-entry:hover .bst-message-entry-highlight{
  1091.         background-color: var(--bst-highlight-color);
  1092.       }
  1093.  
  1094.       .bst-message-entry-holding .bst-message-entry-highlight{
  1095.         background-color: var(--bst-highlight-color);
  1096.       }
  1097.  
  1098.       .bst-message-before-content-button-container{
  1099.         flex-shrink: 0;
  1100.         display:inline;
  1101.         flex-direction:column;
  1102.         max-width:100%;
  1103.         vertical-align: baseline;
  1104.       }
  1105.  
  1106.       .bst-message-body{
  1107.         flex-shrink: 0;
  1108.         display:inline; /* block ? inline-block? */
  1109.         flex-direction:column;
  1110.         max-width:100%;
  1111.         vertical-align: baseline;
  1112.       }
  1113.  
  1114.       /* avoid "~" operator */ /* [^\s"']\s*[~\+]\s*[a-zA-Z] */
  1115.       .bst-message-body-next-to-head{
  1116.         line-height: var(--yt-live-chat-first-line-height);
  1117.       }
  1118.  
  1119.       .bst-message-body a{
  1120.         color: inherit;
  1121.       }
  1122.  
  1123.  
  1124.       .bst-profile-img{
  1125.         display: inline;
  1126.         max-width: 100%;
  1127.         border-style: solid;
  1128.         border-width: 1.5px;
  1129.         border-radius: 9999px;
  1130.         vertical-align: middle;
  1131.         position: absolute;
  1132.         box-sizing:border-box;
  1133.         contain: content;
  1134.       }
  1135.  
  1136.       .bst-message-profile-holder{
  1137.         display:inline-flex;
  1138.         align-items:center;
  1139.         position:relative;
  1140.         width:0;
  1141.         height:1rem;
  1142.         z-index: 1;
  1143.       }
  1144.  
  1145.       .bst-message-body .emoji {
  1146.         contain: strict;
  1147.         width: var(--yt-live-chat-emoji-size);
  1148.         height: var(--yt-live-chat-emoji-size);
  1149.         max-height: 4rem;
  1150.         max-width: 4rem;
  1151.         margin: -1px 2px 1px;
  1152.         vertical-align: middle;
  1153.         margin-bottom: .1rem;
  1154.       }
  1155.  
  1156.       bst-tooltip {
  1157.         all: unset;
  1158.         contain: content;
  1159.         position: absolute;
  1160.         background-color: var(--paper-tooltip-background, #616161);
  1161.         color: var(--paper-tooltip-text-color, white);
  1162.         padding: 6px 8px;
  1163.         outline: none;
  1164.         user-select: none;
  1165.         cursor: default;
  1166.         border-radius: 4px;
  1167.         margin-left: calc(-0.5 * var(--yt-live-chat-emoji-size));
  1168.  
  1169.         white-space: nowrap;
  1170.         max-width: var(--yt-live-chat-tooltip-max-width);
  1171.         text-overflow: ellipsis;
  1172.         overflow: hidden;
  1173.         z-index: 2;
  1174.         pointer-events: none !important;
  1175.  
  1176.         transform: var(--bst-tooltip-transform, translate(-50%, 100%));
  1177.         margin-top: var(--bst-tooltip-mt, 0);
  1178.         margin-bottom: var(--bst-tooltip-mb, -4px);
  1179.  
  1180.       }
  1181.       bst-tooltip:empty{
  1182.         display: none;
  1183.       }
  1184.  
  1185.       .bst-message-entry:hover{
  1186.         z-index:1;
  1187.       }
  1188.       .bst-message-entry-holding{
  1189.         z-index:2;
  1190.       }
  1191.  
  1192.       .bst-message-entry[view-pos="down"] {
  1193.         --bst-tooltip-transform: translate(-50%, -100%);
  1194.         --bst-tooltip-mt: -4px;
  1195.         --bst-tooltip-mb: 0;
  1196.         --bst-message-menu-container-bottom: 100%;
  1197.       }
  1198.  
  1199.       .bst-message-menu-container tp-yt-paper-listbox{
  1200.         display: var(--bst-message-menu-listbox-display, flex) !important;
  1201.         flex-direction: var(--bst-message-menu-listbox-flex-direction, column) !important;
  1202.       }
  1203.  
  1204.       .bst-message-entry{
  1205.         --bst-message-menu-listbox-display: flex;
  1206.         --bst-message-menu-listbox-flex-direction: column;
  1207.       }
  1208.  
  1209.       .bst-message-entry[view-pos="down"]{
  1210.         --bst-message-menu-listbox-flex-direction: column-reverse;
  1211.       }
  1212.  
  1213.       .bst-message-entry[author-type="member"] .bst-message-name-color{
  1214.         --bst-username-color: var(--yt-live-chat-sponsor-color);
  1215.         color: var(--bst-username-color);
  1216.       }
  1217.       .bst-message-entry[author-type="moderator"] .bst-message-name-color{
  1218.         --bst-username-color: var(--yt-live-chat-moderator-color);
  1219.         color: var(--bst-username-color);
  1220.       }
  1221.       .bst-message-entry[author-type="owner"] .bst-message-name-color{
  1222.         --bst-username-color: var(--yt-live-chat-author-chip-owner-text-color);
  1223.         color: var(--bst-username-color);
  1224.       }
  1225.  
  1226.  
  1227.       .bst-message-entry .bst-message-name-color .bst-message-badge-yt-icon[icon-type="verified"] {
  1228.         color: var(--yt-live-chat-verified-color, inherit);
  1229.       }
  1230.  
  1231.  
  1232.  
  1233.       .bst-viewer-engagement-message .bst-message-entry-line{
  1234.         display: flex;
  1235.         flex-direction: row;
  1236.         padding: 12px 8px;
  1237.       }
  1238.  
  1239.       .bst-viewer-engagement-message .bst-message-body {
  1240.         flex: none;
  1241.         flex-shrink: initial;
  1242.       }
  1243.  
  1244.       .bst-system-message-yt-icon{
  1245.         display:inline-block;
  1246.       }
  1247.  
  1248.       .bst-viewer-engagement-message yt-icon {
  1249.         width: var(--iron-icon-width,24px);
  1250.         height: var(--iron-icon-height,24px);
  1251.         contain: strict;
  1252.       }
  1253.       .bst-system-message-icon-column {
  1254.         flex: none;
  1255.         margin-right: 12px;
  1256.       }
  1257.  
  1258.       .bst-viewer-engagement-message .bst-message-entry-highlight{
  1259.         margin-left:0;
  1260.         background-color: var(--bst-highlight-color);
  1261.       }
  1262.  
  1263.       .bst-paid-message{
  1264.  
  1265.         --yt-live-chat-paid-message-background-color: var( --yt-live-chat-paid-message-primary-color );
  1266.         --yt-live-chat-paid-message-header-background-color: var( --yt-live-chat-paid-message-secondary-color );
  1267.         --yt-live-chat-text-input-field-placeholder-color: var( --yt-live-chat-paid-message-color );
  1268.         --yt-live-chat-item-timestamp-display: var( --yt-live-chat-paid-message-timestamp-display,none )
  1269.       }
  1270.  
  1271.  
  1272.       .bst-paid-message .bst-message-body{
  1273.         display: block;
  1274.       }
  1275.       .bst-paid-message .bst-message-body:empty{
  1276.         display: none;
  1277.       }
  1278.  
  1279.       .bst-paid-message .bst-message-name-color .bst-message-username[class]{
  1280.         color: var(--yt-live-chat-disable-highlight-message-author-name-color,rgba(255,255,255,.7));
  1281.         font-size: 110%;
  1282.       }
  1283.       .bst-paid-sticker .bst-message-name-color .bst-message-username[class]{
  1284.         color: var(--yt-live-chat-disable-highlight-message-author-name-color,rgba(255,255,255,.7));
  1285.         font-size: 110%;
  1286.       }
  1287.  
  1288.  
  1289.       .bst-paid-message, .bst-paid-sticker{
  1290.         --bst-paid-amount-font-size: 115%;
  1291.       }
  1292.  
  1293.       .bst-paid-amount{
  1294.         display: inline;
  1295.         white-space: nowrap;
  1296.         margin-left: 12px;
  1297.         font-size: var(--bst-paid-amount-font-size, inherit);
  1298.       }
  1299.  
  1300.       .bst-paid-message .bst-message-entry-highlight[class]{
  1301.         --bst-highlight-color: var(--yt-live-chat-paid-message-background-color,#1565c0);
  1302.         background-color: var(--bst-highlight-color);
  1303.       }
  1304.       .bst-paid-message .bst-message-head{
  1305.  
  1306.         color: var(--yt-live-chat-paid-message-header-color,var(--bst-default-text-color));
  1307.       }
  1308.  
  1309.       .bst-paid-message .bst-message-body{
  1310.         background-color: var(--yt-live-chat-paid-message-background-color,#1565c0);
  1311.         color: var(--yt-live-chat-paid-message-color,var(--bst-default-text-color));
  1312.       }
  1313.  
  1314.       .bst-message-list[class] .bst-membership-message[class],
  1315.       .bst-message-list[class] .bst-sponsorship-purchase[class],
  1316.       .bst-message-list[class] .bst-paid-sticker[class] {
  1317.         --yt-live-chat-sponsor-header-color: #0a8043;
  1318.         --yt-live-chat-sponsor-color: #0f9d58;
  1319.       }
  1320.  
  1321.       .bst-membership-message[class]{
  1322.  
  1323.         --yt-live-chat-sponsor-text-color: var(--bst-default-text-color);
  1324.         --yt-live-chat-item-timestamp-display: var( --yt-live-chat-paid-message-timestamp-display,none );
  1325.         --yt-live-chat-moderator-color: var(--yt-spec-static-overlay-text-secondary);
  1326.         --yt-live-chat-footer-button-text-color: #030303;
  1327.         --yt-live-chat-footer-button-text-background-color: var(--bst-default-text-color);
  1328.       }
  1329.  
  1330.  
  1331.  
  1332.  
  1333.  
  1334.       .bst-membership-message .bst-message-username[class]{
  1335.         color: var(--bst-default-text-color);
  1336.       }
  1337.  
  1338.  
  1339.       .bst-gift-message .bst-message-body{
  1340.         color: var(--yt-live-chat-secondary-text-color);
  1341.         font-style: italic;
  1342.         margin-left: 2px;
  1343.       }
  1344.  
  1345.  
  1346.  
  1347.       .bst-message-entry-holding{
  1348.         --bst-message-menu-display: block;
  1349.       }
  1350.  
  1351.       .bst-message-menu-container{
  1352.  
  1353.         pointer-events: none !important;
  1354.  
  1355.         display: var(--bst-message-menu-display, none);
  1356.  
  1357.         position: absolute;
  1358.         left: 0;
  1359.         right: 0;
  1360.         padding: 8px;
  1361.  
  1362.         bottom: var(--bst-message-menu-container-bottom, initial);
  1363.  
  1364.       }
  1365.  
  1366.       .bst-message-menu-item{
  1367.       
  1368.         padding: 4px 8px;
  1369.         background-color: var(--color-opac-w-4);
  1370.         margin:2px;
  1371.         cursor: pointer;
  1372.  
  1373.       }
  1374.  
  1375.       .bst-message-menu-item:hover{
  1376.        
  1377.         background-color: var(--color-opac-w-6); 
  1378.  
  1379.       }
  1380.  
  1381.  
  1382.  
  1383.  
  1384.  
  1385.  
  1386.       .bst-sponsorship-purchase .bst-message-body{
  1387.         display:block;
  1388.       }
  1389.       .bst-sponsorship-purchase .bst-message-body:empty{
  1390.         display: none;
  1391.       }
  1392.  
  1393.  
  1394.       .bst-sponsorship-purchase{
  1395.         padding-right: 6rem;
  1396.         min-height: 6.6rem;
  1397.       }
  1398.  
  1399.       .bst-sponsorship-purchase .bst-message-entry-highlight {
  1400.         --bst-highlight-color: var(--yt-live-chat-sponsor-color);
  1401.         background: url(https://www.gstatic.com/youtube/img/sponsorships/sponsorships_gift_purchase_announcement_artwork.png); /* to be reviewed? */
  1402.         background-repeat: no-repeat;
  1403.         background-size: contain;
  1404.         background-position: 100% 50%;
  1405.         background-color: var(--bst-highlight-color);
  1406.         background-size: 6rem;
  1407.       }
  1408.  
  1409.  
  1410.  
  1411.  
  1412.       .bst-paid-sticker .bst-message-body{
  1413.         display:block;
  1414.       }
  1415.       .bst-paid-sticker .bst-message-body:empty{
  1416.         display: none;
  1417.       }
  1418.  
  1419.  
  1420.       .bst-paid-sticker{
  1421.         padding-right: 6rem;
  1422.         min-height: 6.6rem;
  1423.       }
  1424.  
  1425.       .bst-paid-sticker .bst-message-entry-highlight {
  1426.         --bst-highlight-color: var(--yt-live-chat-paid-sticker-background-color);
  1427.         background: var(--bst-paid-sticker-bg, initial);
  1428.         /* background: url(https://www.gstatic.com/youtube/img/sponsorships/sponsorships_gift_purchase_announcement_artwork.png);*/
  1429.         background-repeat: no-repeat;
  1430.         background-size: contain;
  1431.         background-position: 100% 50%;
  1432.         background-color: var(--bst-highlight-color);
  1433.         background-size: 6rem;
  1434.       }
  1435.  
  1436.       .bst-paid-sticker .bst-message-head {
  1437.         color: var(--yt-live-chat-paid-sticker-chip-text-color, var(--bst-default-text-color));
  1438.       }
  1439.  
  1440.       .bst-message-entry.bst-message-entry-ll {
  1441.         --bst-message-entry-pl:0;
  1442.       }
  1443.       .bst-message-entry-header {
  1444.         --bst-message-entry-pl: calc( var(--yt-live-chat-profile-icon-size) + 6px );
  1445.         padding-left: var(--bst-message-entry-pl);
  1446.  
  1447.       }
  1448.  
  1449.       .bst-membership-message .bst-message-entry-header .bst-message-entry-highlight[class]{
  1450.         --bst-highlight-color: var(--yt-live-chat-sponsor-header-color);
  1451.         background-color: var(--bst-highlight-color);
  1452.       }
  1453.       .bst-membership-message .bst-message-entry-body .bst-message-entry-highlight[class]{
  1454.         --bst-highlight-color: var(--yt-live-chat-sponsor-color);
  1455.         background-color: var(--bst-highlight-color);
  1456.       }
  1457.  
  1458.       .bst-membership-message .bst-message-entry-header .bst-message-entry-highlight.bst-message-entry-followed-by-body {
  1459.         bottom: 0;
  1460.         border-bottom-left-radius: 0;
  1461.         border-bottom-right-radius: 0;
  1462.       }
  1463.  
  1464.       .bst-membership-message .bst-message-entry-body .bst-message-entry-highlight {
  1465.         top: 0;
  1466.         border-top-left-radius: 0;
  1467.         border-top-right-radius: 0;
  1468.       }
  1469.  
  1470.       .bst-message-entry-header, .bst-message-entry-body {
  1471.         position: relative;
  1472.       }
  1473.  
  1474.       .bst-membership-message .bst-message-entry-body .bst-message-body::before {
  1475.         content: '';
  1476.         contain: strict;
  1477.         display: inline;
  1478.         user-select: none !important;
  1479.         pointer-events: none !important;
  1480.         line-height: var(--yt-live-chat-first-line-height);
  1481.         vertical-align: baseline;
  1482.       }
  1483.  
  1484.       .bst-membership-message .bst-message-entry-header .bst-message-head {
  1485.         margin-right: 8px;
  1486.       }
  1487.  
  1488.       .bst-membership-message .bst-message-entry-header .bst-message-body {
  1489.         margin-left: 0px;
  1490.         display: inline-block;
  1491.       }
  1492.  
  1493.       .bst-membership-message .bst-message-entry-body .bst-message-body {
  1494.         margin-left: 8px;
  1495.         color: var(--yt-live-chat-sponsor-text-color)
  1496.       }
  1497.  
  1498.       .bst-name-field-box {
  1499.         pointer-events: none;
  1500.         display: none;
  1501.         position: absolute;
  1502.         left: 0;
  1503.         top: calc(100% + 4px);
  1504.         background: white;
  1505.         color: black;
  1506.         z-index: 1;
  1507.         contain: content;
  1508.       }
  1509.  
  1510.       .bst-name-field:hover .bst-name-field-box {
  1511.         pointer-events: none;
  1512.       }
  1513.  
  1514.       bst-live-chat-placeholder {
  1515.         display: none;
  1516.       }
  1517.  
  1518.       .bst-live-chat-element[class] {
  1519.         padding:0;
  1520.         margin:0;
  1521.       }
  1522.  
  1523.       bst-live-chat-unknownitem {
  1524.         display: block;
  1525.         height: 3.4rem;
  1526.         background-color: rgb(127, 127, 127);
  1527.         cursor: not-allowed;
  1528.         opacity: 0.6;
  1529.       }
  1530.       bst-live-chat-unknownitem:hover{
  1531.         opacity: 1;
  1532.       }
  1533.  
  1534.       .bst-profile-card {
  1535.         position: absolute;
  1536.         display: none;
  1537.         position: absolute;
  1538.         left: 0;
  1539.         right: 0;
  1540.         height: 100px;     /* border: 3px solid white; */
  1541.         box-sizing: border-box;
  1542.         z-index: 3;
  1543.         display: flex;
  1544.         flex-direction: row;
  1545.         border-top-left-radius: var(--border-radius-medium);
  1546.         border-top-right-radius: var(--border-radius-medium);
  1547.         box-shadow: var(--shadow-elevation-2);
  1548.         margin-left: 1.5rem;
  1549.         margin-right: 1.5rem;
  1550.         background: var(--yt-live-chat-background-color);
  1551.         top: calc(var(--fBottom) + 4px);
  1552.         transform: initial;
  1553.         margin-top: 0;
  1554.         margin-bottom: 0;
  1555.         max-height: 38vh;
  1556.       }
  1557.  
  1558.       .bst-profile-card-on-top {
  1559.         top: calc(var(--fTop) - 4px);
  1560.         transform: translateY(-100%);
  1561.         margin-top: 0;
  1562.         margin-bottom: 0;
  1563.       }
  1564.  
  1565.       .bst-profile-card-overlay {
  1566.         position: absolute;
  1567.         z-index: -1;
  1568.         left: 0;
  1569.         right: 0;
  1570.         top: 0;
  1571.         bottom: 0;
  1572.         background: var(--yt-spec-menu-background);
  1573.         pointer-events: none;
  1574.         opacity: 0.45;
  1575.       }
  1576.  
  1577.       .bst-profile-card-icon {
  1578.         margin: 1rem;
  1579.         margin-right: 0;
  1580.       }
  1581.  
  1582.       .bst-profile-card-icon-img {
  1583.         max-height: 50px;
  1584.         max-width: 50px;
  1585.       }
  1586.  
  1587.       .bst-profile-card-main {
  1588.         flex-grow: 1;
  1589.         margin: 1rem;
  1590.       }
  1591.  
  1592.       .bst-profile-card-main a[href] {
  1593.         --bst-hyperlink-color: var(--bst-default-text-color);
  1594.         color: var(--bst-hyperlink-color);
  1595.         text-decoration: none;
  1596.         display: inline;
  1597.       }
  1598.  
  1599.       .bst-profile-card-main a[href]:link,
  1600.       .bst-profile-card-main a[href]:visited,
  1601.       .bst-profile-card-main a[href]:hover,
  1602.       .bst-profile-card-main a[href]:active,
  1603.       .bst-profile-card-main a[href]:focus {
  1604.         color: var(--bst-hyperlink-color);
  1605.       }
  1606.  
  1607.       .bst-profile-card-cross {
  1608.         display: inline-flex;
  1609.         -webkit-box-align: center;
  1610.         align-items: center;
  1611.         -webkit-box-pack: center;
  1612.         justify-content: center;
  1613.         user-select: none;
  1614.         border-radius: var(--border-radius-medium);
  1615.         height: var(--button-size-default);
  1616.         width: var(--button-size-default);
  1617.         border: var(--border-width-default) solid transparent;
  1618.         cursor: pointer;
  1619.         margin: 0.5rem;
  1620.         font-family: system-ui;
  1621.         font-size: large;
  1622.         contain: strict;
  1623.       }
  1624.  
  1625.       .bst-profile-card-cross:hover {
  1626.         background-color: var(--color-background-button-icon-overlay-hover);
  1627.         color: var(--color-text-button-overlay-hover);
  1628.       }
  1629.  
  1630.       .bst-message-before-content-button-container button {
  1631.         border-radius: 12px;
  1632.         position: relative;
  1633.         margin: 0;
  1634.         white-space: nowrap;
  1635.         min-width: 0;
  1636.         text-transform: none;
  1637.         border: none;
  1638.         cursor: pointer;
  1639.         outline-width: 0;
  1640.         box-sizing: border-box;
  1641.         background: none;
  1642.         text-decoration: none;
  1643.         margin: 0;
  1644.         padding: 0;
  1645.         padding: 2px 6px;
  1646.         vertical-align: middle;
  1647.         margin-bottom: .1rem;
  1648.         margin-right: 2px;
  1649.         contain: content;
  1650.       }
  1651.  
  1652.       .bst-message-before-content-button-container button div {
  1653.         pointer-events: none !important;
  1654.       }
  1655.  
  1656.       .bst-message-before-content-button-container button .yt-spec-button-shape-next__icon {
  1657.         margin: 0;
  1658.         padding: 0;
  1659.         border: 0;
  1660.         width: 16px;
  1661.         height: 16px;
  1662.         line-height: 0;
  1663.         fill: currentColor;
  1664.         contain: strict;
  1665.       }
  1666.  
  1667.       .bst-message-before-content-button-container yt-touch-feedback-shape {
  1668.         display: none !important;
  1669.       }
  1670.  
  1671.       .bst-message-container {
  1672.         opacity: var(--bst-message-entry-opacity-v, 1.0);
  1673.         transition: opacity 80ms ease-in-out 8ms;
  1674.       }
  1675.  
  1676.       .bst-message-container-f {
  1677.         --bst-message-entry-opacity-v: 1.0; /* just opacity effect for the last message */
  1678.         transition: initial;
  1679.       }
  1680.  
  1681.  
  1682.       .bst-message-menu-list{
  1683.         display: flex;
  1684.         justify-content: end;
  1685.         pointer-events: none !important;
  1686.       }
  1687.  
  1688.       .bst-message-menu-list ytd-menu-popup-renderer{
  1689.         max-width: initial !important;
  1690.         min-width: initial !important;
  1691.         max-height: initial !important;
  1692.         min-height: initial !important;
  1693.         pointer-events: initial !important;
  1694.       }
  1695.  
  1696.     `
  1697.   }
  1698.  
  1699.   /** @type {import('./library/html').SolidJS}.SolidJS */
  1700.   const { createSignal, onMount, createStore, html, render, Switch, Match, For, createEffect, createMemo, Show, onCleanup, createComputed, createRenderEffect, unwrap } = SolidJS;
  1701.  
  1702.   const { R, W ,rwWrap } = (() => {
  1703.  
  1704.     /*
  1705.     const sWrapper = (w) => {
  1706.       const [singalGet, singalSet] = createSignal(1);
  1707.       return function (e = 0) {
  1708.         e ? Promise.resolve(x => (x & 1073741823) + e).then(singalSet) : singalGet();
  1709.         return w;
  1710.       };
  1711.     };
  1712.     */
  1713.  
  1714.     
  1715.     const sWrapper = (w) => {
  1716.       let u = 2;
  1717.       const [singalGet, singalSet] = createSignal(1);
  1718.       const p = (m) => singalSet(u); // first Promise
  1719.       // const p = (m) => m === u && singalSet(u); // last Promise
  1720.       // const p = (m) => singalSet(u + (m === u)); // first and last Promise
  1721.       return function (e = 0) {
  1722.         e
  1723.           ? Promise.resolve((u = (u & 1073741823) + e)).then(p)
  1724.           : singalGet();
  1725.         (this !== w && this)?.valueOf?.(e);
  1726.         return w;
  1727.       };
  1728.     };
  1729.  
  1730.     const op = Object.prototype;
  1731.     const R = (x) => {
  1732.       let valueOf = x.valueOf;
  1733.       if (valueOf === op.valueOf) valueOf = x.valueOf = sWrapper(x);
  1734.       return valueOf();
  1735.     };
  1736.     const W = (x) => {
  1737.       let valueOf = x.valueOf;
  1738.       if (valueOf === op.valueOf) valueOf = x.valueOf = sWrapper(x);
  1739.       return valueOf(3);
  1740.     }
  1741.     const rwWrap = (x) => {
  1742.       if(typeof x === 'function') return x;
  1743.       let valueOf = x.valueOf;
  1744.       if (valueOf === op.valueOf) valueOf = x.valueOf = sWrapper(x);
  1745.       return x.valueOf;
  1746.     }
  1747.  
  1748.     return { R, W, rwWrap };
  1749.  
  1750.   })();
  1751.  
  1752.   window.MMR = R;
  1753.   window.MMW = W;
  1754.  
  1755.   const memoStore = new WeakMap();
  1756.  
  1757.  
  1758.   let rcPromise = null;
  1759.   const [rcSignal ,rcSignalSet]=createSignal(1);
  1760.   let rcValue = 1;
  1761.  
  1762.   const rcSignalAdd = (p) => {
  1763.     if (p) {
  1764.       rcValue = (rcValue & 1073741823) + 1;
  1765.     }
  1766.     rcSignalSet(r => (r & 1073741823) + 1);
  1767.   };
  1768.  
  1769.  
  1770.   createEffect(() => {
  1771.     const m = rcSignal();
  1772.     if (rcValue === m) {
  1773.       rcPromise && rcPromise.resolve();
  1774.       rcPromise= null;
  1775.     }
  1776.   });
  1777.  
  1778.  
  1779.   const MEMO = (obj, key, val) => {
  1780.  
  1781.     if (key === null) {
  1782.       memoStore.delete(obj);
  1783.       return;
  1784.     } else if (!key) {
  1785.       return memoStore.get(obj);
  1786.     }
  1787.  
  1788.     const m = `${key}`;
  1789.     if (val === null) {
  1790.       let s = memoStore.get(obj);
  1791.       if (s && s[m]) s[m] = null;
  1792.     } else if (val) {
  1793.       let s = memoStore.get(obj);
  1794.       if (!s) memoStore.set(obj, s = {});
  1795.       if (!s[m]) {
  1796.         s[m] = createMemo(val);
  1797.       } else {
  1798.         console.warn('MEMO setter: duplicated');
  1799.       }
  1800.       return s[m];
  1801.     } else {
  1802.       let s = memoStore.get(obj);
  1803.       let r = s ? s[m] : null;
  1804.       if (!r) {
  1805.         console.warn('MEMO getter: duplicated');
  1806.       }
  1807.       return r;
  1808.     }
  1809.   }
  1810.  
  1811.   function getThumbnail(thumbnails, min, max) {
  1812.  
  1813.     for (const thumbnail of thumbnails) {
  1814.       if (min >= 0 && thumbnail.width < min) {
  1815.         continue;
  1816.       }
  1817.       if (max >= 0 && thumbnail.width > max) {
  1818.         continue;
  1819.       }
  1820.       if (typeof thumbnail.url !== 'string') continue;
  1821.       return thumbnail.url;
  1822.     }
  1823.     return thumbnails?.[0]?.url || '';
  1824.  
  1825.   }
  1826.  
  1827.   function removeEntry(o) {
  1828.  
  1829.     /*
  1830.  
  1831.  
  1832.       aObj.uid = aObj.uid || createMemo(() => { 
  1833.       })
  1834.  
  1835.       if (aKey && typeof aKey === 'string') W(aObj).aKey = aKey;
  1836.  
  1837.       MEMO(aObj, 'rendererFlag', ()=>{ 
  1838.       });
  1839.  
  1840.       MEMO(aObj, 'authorName', () => { 
  1841.       });
  1842.  
  1843.       aObj.getProfilePic = getProfilePic;
  1844.       aObj.getStickerURL = getStickerURL;
  1845.       aObj.bst = bst;
  1846.  
  1847.  
  1848.       MEMO(aObj, 'messageXT', () =>{
  1849.  
  1850.       });
  1851.  
  1852.  
  1853.       */
  1854.  
  1855.     if (o.uid) {
  1856.       o.uid = null;
  1857.     }
  1858.  
  1859.     MEMO(o, 'rendererFlag', null);
  1860.  
  1861.     MEMO(o, 'authorName', null); 
  1862.  
  1863.     MEMO(o, 'messageXT', null);
  1864.  
  1865.     MEMO(o, null);
  1866.  
  1867.     const dataMutable = mutableWM.get(o);
  1868.     dataMutable && dataMutable.removeEntry();
  1869.   }
  1870.  
  1871.   function colorFromDecimal(a) {
  1872.     if (a === void 0 || a === null) return null;
  1873.     a = Number(a);
  1874.     if (!(a >= 0)) return null;
  1875.     const k = (a >> 24 & 255) / 255;
  1876.     let t = `${k}`;
  1877.     if (t.length > 9) t = k.toFixed(5);
  1878.     if (t === '1') {
  1879.       return "rgb(" + [a >> 16 & 255, a >> 8 & 255, a & 255].join() + ")"
  1880.     } else {
  1881.       return "rgba(" + [a >> 16 & 255, a >> 8 & 255, a & 255, t].join() + ")"
  1882.     }
  1883.   }
  1884.  
  1885.  
  1886.   const formatters = {
  1887.     authorBadges(badge, data) {  // performance concern? (11.0ms)
  1888.  
  1889.  
  1890.       try {
  1891.         const fk = firstObjectKey(badge) || '';
  1892.         const ek = badge[fk];
  1893.  
  1894.         /**
  1895.          *
  1896.  
  1897.                   if (a.icon) {
  1898.                       var c = document.createElement("yt-icon");
  1899.                       "MODERATOR" === a.icon.iconType && this.enableNewModeratorBadge ? (c.polymerController.icon = "yt-sys-icons:shield-filled",
  1900.                       c.polymerController.defaultToFilled = !0) : c.polymerController.icon = "live-chat-badges:" + a.icon.iconType.toLowerCase();
  1901.                       b.appendChild(c)
  1902.                   } else if (a.customThumbnail) {
  1903.                       c = document.createElement("img");
  1904.                       var d;
  1905.                       (d = (d = eD(a.customThumbnail.thumbnails, 16)) ? Vb(ic(d)) : null) ? (c.src = d,
  1906.                       b.appendChild(c),
  1907.                       c.setAttribute("alt", this.hostElement.ariaLabel || "")) : qr(new sn("Could not compute URL for thumbnail",a.customThumbnail))
  1908.                   }
  1909.         *
  1910.         */
  1911.  
  1912.         if (ek.icon && typeof ek.icon === 'object') {
  1913.  
  1914.           const icon = ek.icon;
  1915.           const type = icon.iconType.toLowerCase();
  1916.           if (type === 'owner' && R(data).bst('shouldHighlight')) {
  1917.  
  1918.           } else {
  1919.  
  1920.             let tooltipText = () => ek.tooltip || ek.accessibility?.accessibilityData?.label || '';
  1921.  
  1922.             let [tooltipDisplay, tooltipDisplaySet] = createSignal('');
  1923.             let elmWR = null;
  1924.             let onYtIconCreated = (el) => {
  1925.               const cnt = insp(el);
  1926.               cnt.icon = "live-chat-badges:" + type;
  1927.               _setAttribute.call(el, 'icon-type', type);
  1928.               tooltipText = tooltipText();
  1929.               _setAttribute.call(el, 'shared-tooltip-text', tooltipText);
  1930.               tooltipDisplaySet(tooltipText);
  1931.               if (el.getAttribute23752) {
  1932.                 el.getAttribute = el.getAttribute23752;
  1933.               }
  1934.               elmWR = mWeakRef(el);
  1935.               onYtIconCreated = null;
  1936.             }
  1937.             onCleanup(() => {
  1938.               elmWR = null;
  1939.               tooltipDisplay = tooltipDisplaySet = null;
  1940.             });
  1941.             return html`<yt-icon class="bst-message-badge-yt-icon" ref="${onYtIconCreated}"></yt-icon><bst-tooltip>${() => (kRef(tooltipTarget()) || 1) === (kRef(elmWR) || 2) ? tooltipDisplay() : ''}</bst-tooltip>`;
  1942.  
  1943.           }
  1944.  
  1945.         } else if (typeof (ek.customThumbnail || 0) === 'object') {
  1946.  
  1947.           // const className = `style-scope yt-live-chat-author-badge-renderer bst-author-badge`
  1948.           const className = `bst-author-badge`;
  1949.           const src = () => getThumbnail(ek.customThumbnail.thumbnails, 32, 64); // 16, 32
  1950.           const alt = () => ek.accessibility?.accessibilityData?.label || '';
  1951.  
  1952.  
  1953.  
  1954.  
  1955.           let tooltipText = () => ek.tooltip || ek.accessibility?.accessibilityData?.label || '';
  1956.  
  1957.           let [tooltipDisplay, tooltipDisplaySet] = createSignal('');
  1958.           let elmWR = null;
  1959.           let onImgCreated = (el) => {
  1960.             tooltipText = tooltipText();
  1961.             tooltipDisplaySet(tooltipText);
  1962.             if (el.getAttribute23752) {
  1963.               el.getAttribute = el.getAttribute23752;
  1964.             }
  1965.             elmWR = mWeakRef(el);
  1966.             onImgCreated = null;
  1967.           }
  1968.           onCleanup(() => {
  1969.             tooltipDisplay = tooltipDisplaySet = null;
  1970.           });
  1971.           return html`<img ref="${onImgCreated}" class="${className}" src="${src}" alt="${alt}" shared-tooltip-text="${tooltipText}" /><bst-tooltip>${() => (kRef(tooltipTarget()) || 1) === (kRef(elmWR) || 2) ? tooltipDisplay() : ''}</bst-tooltip>`
  1972.  
  1973.  
  1974.  
  1975.  
  1976.  
  1977.         }
  1978.  
  1979.  
  1980.       } catch (e) {
  1981.         console.warn(e);
  1982.       }
  1983.  
  1984.     }
  1985.     // messageBody(message, data) {
  1986.  
  1987.     //   if (typeof message === 'string') return html`<span>${() => message}</span>`
  1988.     //   if (typeof message.text === 'string') {
  1989.     //     if (message.navigationEndpoint?.urlEndpoint?.url) {
  1990.     //       const urlEndpoint = message.navigationEndpoint.urlEndpoint;
  1991.     //       return html`<a href="${() => R(urlEndpoint).url}" rel="${() => R(urlEndpoint).nofollow === true ? 'nofollow' : null}" target="${() => R(urlEndpoint).target === "TARGET_NEW_WINDOW" ? '_blank' : null}">${() => R(message).text}</span>`
  1992.     //     }
  1993.     //     return html`<span>${() => R(message).text}</span>`
  1994.     //   }
  1995.  
  1996.  
  1997.  
  1998.  
  1999.     //   if (typeof message.emoji !== 'undefined' && typeof (message.emoji||0) === 'object') {
  2000.  
  2001.  
  2002.     //     try {
  2003.  
  2004.     //         const emoji = message.emoji;
  2005.  
  2006.  
  2007.     //         const className = `small-emoji emoji yt-formatted-string style-scope yt-live-chat-text-message-renderer`
  2008.  
  2009.  
  2010.     //         const src = () => `${emoji.image.thumbnails[0].url}` // performance concern? (3.3ms)
  2011.     //         const alt = () => emoji.image?.accessibility?.accessibilityData?.label || ''; // performance concern? (1.7ms)
  2012.     //         let tooltipText = () => emoji.shortcuts?.[0] || ''; // performance concern? (1.7ms)
  2013.     //         const emojiId = () => emoji.emojiId || '';
  2014.     //         const isCustomEmoji = () => emoji.isCustomEmoji || false;
  2015.  
  2016.  
  2017.  
  2018.  
  2019.  
  2020.  
  2021.     //         let [tooltipDisplay, tooltipDisplaySet] = createSignal('');
  2022.     //         let elmWR = null;
  2023.     //         let onImgCreated = (el) => {
  2024.     //           tooltipText = tooltipText();
  2025.     //           tooltipDisplaySet(tooltipText);
  2026.     //           if (el.getAttribute23752) {
  2027.     //             el.getAttribute = el.getAttribute23752;
  2028.     //           }
  2029.     //           elmWR = mWeakRef(el);
  2030.     //         }
  2031.     //         onCleanup(()=>{
  2032.     //           tooltipDisplay = tooltipDisplaySet = onImgCreated = null;
  2033.     //         });
  2034.     //         return html`<img ref="${onImgCreated}" class="${className}" src="${src}" alt="${alt}" shared-tooltip-text="${tooltipText}" data-emoji-id="${emojiId}" is-custom-emoji="${isCustomEmoji}" /><bst-tooltip>${() => (kRef(tooltipTarget()) || 1) === (kRef(elmWR) || 2) ? tooltipDisplay() : ''}</bst-tooltip>`
  2035.  
  2036.  
  2037.  
  2038.     //     } catch (e) {
  2039.     //       console.warn(e);
  2040.     //     }
  2041.  
  2042.     //   }
  2043.  
  2044.  
  2045.     // }
  2046.   };
  2047.  
  2048.   let sharedButtonViewModel = null;
  2049.   let sharedNoscript = null;
  2050.  
  2051.   function simulateClickOnBody() {
  2052.     // Create and dispatch pointerdown
  2053.     const pointerDownEvent = new PointerEvent('pointerdown', {
  2054.       bubbles: true,
  2055.       cancelable: true,
  2056.       composed: true,
  2057.       // You can add more PointerEvent-specific properties as needed
  2058.     });
  2059.     document.body.dispatchEvent(pointerDownEvent);
  2060.   
  2061.     // Create and dispatch mousedown
  2062.     const mouseDownEvent = new MouseEvent('mousedown', {
  2063.       bubbles: true,
  2064.       cancelable: true,
  2065.       composed: true,
  2066.       // You can add coordinates, modifiers, etc. as needed
  2067.     });
  2068.     document.body.dispatchEvent(mouseDownEvent);
  2069.   
  2070.     // Create and dispatch pointerup
  2071.     const pointerUpEvent = new PointerEvent('pointerup', {
  2072.       bubbles: true,
  2073.       cancelable: true,
  2074.       composed: true,
  2075.     });
  2076.     document.body.dispatchEvent(pointerUpEvent);
  2077.   
  2078.     // Create and dispatch mouseup
  2079.     const mouseUpEvent = new MouseEvent('mouseup', {
  2080.       bubbles: true,
  2081.       cancelable: true,
  2082.       composed: true,
  2083.     });
  2084.     document.body.dispatchEvent(mouseUpEvent);
  2085.   
  2086.     // Finally, create and dispatch click
  2087.     const clickEvent = new MouseEvent('click', {
  2088.       bubbles: true,
  2089.       cancelable: true,
  2090.       composed: true,
  2091.     });
  2092.     document.body.dispatchEvent(clickEvent);
  2093.   }
  2094.   
  2095.  
  2096.   const SolidBeforeContentButton0 = (props) => {
  2097.  
  2098.     const onButtonContainerCreated = (div) => {
  2099.       let data = props.entryData;
  2100.  
  2101.       if (!sharedNoscript) return;
  2102.       const beforeContentButtons = data.beforeContentButtons;
  2103.       if (!beforeContentButtons || beforeContentButtons.length !== 1) return;
  2104.       const buttonViewModel = beforeContentButtons[0].buttonViewModel;
  2105.       if (!buttonViewModel) return;
  2106.  
  2107.       const bvData = Object.assign({}, buttonViewModel, { title: "", trackingParams: "", title_: buttonViewModel.title });
  2108.  
  2109.       if (!sharedButtonViewModel) {
  2110.         sharedButtonViewModel = document.createElement('yt-button-view-model');
  2111.         sharedNoscript.appendChild(sharedButtonViewModel);
  2112.         let cloneNode = sharedButtonViewModel.cloneNode(false, false);
  2113.         sharedButtonViewModel.replaceWith(cloneNode);
  2114.         sharedButtonViewModel = cloneNode;
  2115.       }
  2116.  
  2117.       const modelNode = sharedButtonViewModel.cloneNode(false, false);
  2118.       insp(modelNode).data = bvData;
  2119.  
  2120.       div.appendChild(modelNode);
  2121.  
  2122.       data = null;
  2123.       props = null;
  2124.       div = null;
  2125.  
  2126.     };
  2127.     return html`
  2128.       <div ref=${onButtonContainerCreated} class="bst-message-before-content-button-container">
  2129.       </div>
  2130.     `
  2131.   };
  2132.  
  2133.   let createIdx = 0;
  2134.   let ux302 = null;
  2135.   let popupKey302 = '';
  2136.   const onSolidMenuListCreated_ = async (items, div, ytLiveChatAppCnt) => {
  2137.  
  2138.     const createIdx_ = createIdx = (createIdx & 1073741823) + 1;
  2139.  
  2140.     let ux0 = null;
  2141.  
  2142.     const popups_ = ytLiveChatAppCnt.popups_;
  2143.  
  2144.  
  2145.     const popupKey = popupKey302;
  2146.     const ux = ux302;
  2147.  
  2148.     if (ux && popupKey) {
  2149.       ux0 = popups_[popupKey];
  2150.       popups_[popupKey] = ux;
  2151.     }
  2152.  
  2153.     const ud = {
  2154.       "items": [
  2155.         ...items
  2156.       ],
  2157.       "openImmediately": true,
  2158.       "__iwme848__": true,
  2159.     };
  2160.  
  2161.  
  2162.     const openPopupActionObj = {
  2163.       "popupType": "DROPDOWN",
  2164.       "popup": {
  2165.         "menuPopupRenderer": ud
  2166.       }
  2167.     };
  2168.  
  2169.  
  2170.     let pr = new PromiseExternal();
  2171.     let mo = new MutationObserver(() => {
  2172.  
  2173.       if (createIdx_ !== createIdx) {
  2174.         mo && mo.disconnect();
  2175.         mo = null
  2176.         return;
  2177.       }
  2178.  
  2179.  
  2180.       const elements = [...document.querySelectorAll('ytd-menu-popup-renderer[class]')].filter(e => {
  2181.         return !!insp(e)?.data?.__iwme848__;
  2182.       })
  2183.  
  2184.       if (elements[0]) {
  2185.         pr && pr.resolve(elements[0]);
  2186.         pr = null;
  2187.       }
  2188.  
  2189.     });
  2190.  
  2191.     mo && mo.observe(document, { subtree: true, childList: true });
  2192.  
  2193.     if (ux && popupKey) {
  2194.  
  2195.       const contentWrapper = ux?.popup?.$?.contentWrapper;
  2196.       const popupContent = ux.popupContent;
  2197.  
  2198.       if (contentWrapper instanceof Node && popupContent instanceof Node && typeof ytLiveChatAppCnt.completeOpenPopupAction_ === 'function' && ytLiveChatAppCnt.completeOpenPopupAction_.length === 3) {
  2199.         contentWrapper?.appendChild(popupContent);
  2200.  
  2201.         ytLiveChatAppCnt.completeOpenPopupAction_(openPopupActionObj, div, ux);
  2202.  
  2203.       } else {
  2204.  
  2205.         if (ux.rendererName && ux.openPopupAction.uniqueId && typeof ytLiveChatAppCnt.handleClosePopupAction_ === 'function' && ytLiveChatAppCnt.handleClosePopupAction_.length === 2) {
  2206.           ytLiveChatAppCnt.handleClosePopupAction_(ux.rendererName, ux.openPopupAction.uniqueId);
  2207.         }
  2208.  
  2209.         delete ytLiveChatAppCnt.popups_[popupKey];
  2210.  
  2211.         ytLiveChatAppCnt.handleOpenPopupAction({
  2212.           "openPopupAction": openPopupActionObj,
  2213.         }, div);
  2214.       }
  2215.  
  2216.  
  2217.     } else {
  2218.  
  2219.       ytLiveChatAppCnt.handleOpenPopupAction({
  2220.         "openPopupAction": openPopupActionObj,
  2221.       }, div);
  2222.  
  2223.     }
  2224.  
  2225.     const elm = pr ? await pr.then() : null;
  2226.     pr = null;
  2227.     mo && mo.disconnect();
  2228.  
  2229.     if (elm && createIdx_ === createIdx) {
  2230.       div.appendChild(elm);
  2231.     }
  2232.  
  2233.     (() => {
  2234.       popupKey302 = '';
  2235.       const popups_ = ytLiveChatAppCnt.popups_;
  2236.       if (popups_) {
  2237.         for (const k of Object.keys(popups_)) {
  2238.           const v = popups_[k];
  2239.           if (v && v.popupContent && insp(v.popupContent).data?.__iwme848__) {
  2240.             popupKey302 = k;
  2241.             ux302 = v;
  2242.             break;
  2243.           }
  2244.         }
  2245.       }
  2246.       if (popupKey302) {
  2247.         if (ux0) {
  2248.           popups_[popupKey302] = ux0;
  2249.         } else {
  2250.           delete popups_[popupKey302];
  2251.         }
  2252.       }
  2253.     })();
  2254.  
  2255.     setTimeout(simulateClickOnBody, 1);
  2256.     setTimeout(simulateClickOnBody, 80); // play-safe
  2257.  
  2258.  
  2259.  
  2260.  
  2261.   };
  2262.   const SolidMenuList = (props) => {
  2263.  
  2264.  
  2265.     const onSolidMenuListCreated = (div) => {
  2266.  
  2267.       let items = props.items;
  2268.       /*
  2269.  
  2270.       if (!sharedNoscript) return;
  2271.       const beforeContentButtons = data.beforeContentButtons;
  2272.       if (!beforeContentButtons || beforeContentButtons.length !== 1) return;
  2273.       const buttonViewModel = beforeContentButtons[0].buttonViewModel;
  2274.       if (!buttonViewModel) return;
  2275.  
  2276.       const bvData = Object.assign({}, buttonViewModel, { title: "", trackingParams: "", title_: buttonViewModel.title });
  2277.  
  2278.       if (!sharedButtonViewModel) {
  2279.         sharedButtonViewModel = document.createElement('yt-button-view-model');
  2280.         sharedNoscript.appendChild(sharedButtonViewModel);
  2281.         let cloneNode = sharedButtonViewModel.cloneNode(false, false);
  2282.         sharedButtonViewModel.replaceWith(cloneNode);
  2283.         sharedButtonViewModel = cloneNode;
  2284.       }
  2285.  
  2286.       const modelNode = sharedButtonViewModel.cloneNode(false, false);
  2287.       insp(modelNode).data = bvData;
  2288.  
  2289.       */
  2290.  
  2291.     /*
  2292.  
  2293.       let ytdMenu = document.querySelector('#bst-menu-popup-renderer');
  2294.       if(!ytdMenu){
  2295.  
  2296.         ytdMenu =  document.createElement('ytd-menu-popup-renderer');
  2297.         ytdMenu.id='bst-menu-popup-renderer';
  2298.         sharedNoscript.appendChild(ytdMenu);
  2299.       }
  2300.  
  2301.       insp(ytdMenu).data=Object.assign({}, {items: items, openImmediately: true})
  2302.  
  2303.       */
  2304.  
  2305.       const ytLiveChatAppElm = document.querySelector('yt-live-chat-app');
  2306.       const ytLiveChatAppCnt = insp(ytLiveChatAppElm);
  2307.  
  2308.  
  2309.       if (!ytLiveChatAppCnt) return;
  2310.       if (!ytLiveChatAppCnt.handleOpenPopupAction || ytLiveChatAppCnt.handleOpenPopupAction.length !== 2) return;
  2311.  
  2312.       // ytLiveChatAppCnt.handleCloseAllPopupsAction_();
  2313.       onSolidMenuListCreated_(items, div, ytLiveChatAppCnt);
  2314.  
  2315.       // div.appendChild(ytdMenu);
  2316.       data = null;
  2317.       props = null;
  2318.       div = null;
  2319.  
  2320.     };
  2321.     return html`
  2322.       <div ref=${onSolidMenuListCreated} class="bst-message-menu-list">
  2323.       </div>
  2324.     `
  2325.   };
  2326.  
  2327.   const replaceAll = String.prototype.replaceAll ? function (str, pattern, replacement) {
  2328.     return str.replaceAll(pattern, replacement);
  2329.   } : function (str, search, replace) {
  2330.     if (typeof search === 'string') {
  2331.       return str.split(search).join(replace);
  2332.     } else if (search instanceof RegExp) {
  2333.       const newRegExp = new RegExp(search.source, search.flags + 'g');
  2334.       return str.replace(newRegExp, replace);
  2335.     }
  2336.     throw new TypeError('The search argument must be a string or a RegExp');
  2337.   };
  2338.   const emojiIdSymbol = Symbol();
  2339.   const messageFlattenIcons = new Map();
  2340.  
  2341.   const messageUnflatten = (str) => {
  2342.  
  2343.     const b1 = String.fromCharCode(0xE274);
  2344.     let p = str.includes(`${b1}@`);
  2345.     return str.split(`${b1};`).map(s => {
  2346.  
  2347.       const r = s.split(`${b1},`);
  2348.       if (p && s.includes(`${b1}@`)) {
  2349.         for (let i = 0; i < r.length; i++) {
  2350.           r[i] = r[i].replace(`${b1}@`, `${b1}`);
  2351.         }
  2352.  
  2353.       }
  2354.       return r;
  2355.  
  2356.     });
  2357.  
  2358.   }
  2359.   let fixMessages = null;
  2360.   const messageFlatten = (message) => {
  2361.  
  2362.     // E${b1},${emojiId}${b1};T${b1},${text}${b1};E${b1},${emojiId}
  2363.  
  2364.     let runs = null;
  2365.  
  2366.     // ------ convertMessage ------
  2367.     let t;
  2368.     if (typeof (message || 0) !== 'object') runs = [];
  2369.     else if ((t = message.simpleText) && typeof t === 'string') {
  2370.       runs = [{ text: t }];
  2371.     } else if ((t = message.runs) && t.length >= 0) {
  2372.       runs = t;
  2373.     } else {
  2374.       runs = [];
  2375.     }
  2376.     // ------ convertMessage ------
  2377.  
  2378.     // ------ fixMessages ------
  2379.  
  2380.     fixMessages && (runs = fixMessages(runs));
  2381.  
  2382.     // ------ fixMessages ------
  2383.  
  2384.     const resultArr = new Array(runs.length);
  2385.     let i = 0;
  2386.     const b1 = String.fromCharCode(0xE274);
  2387.  
  2388.     for (const run of runs) {
  2389.       const wKey = typeof run.text === 'string' ? 'text' : firstObjectKey(run);
  2390.       const wVal = wKey ? run[wKey] : null;
  2391.       if (wKey === 'emoji' && typeof wVal === 'object') {
  2392.         let emojiId = wVal[emojiIdSymbol] || wVal.emojiId;
  2393.         if (typeof (emojiId || 0) !== 'string') {
  2394.           emojiId = wVal[emojiIdSymbol] = `$$${Math.floor(Math.random() * 314159265359 + 314159265359).toString(36)}`;
  2395.         }
  2396.         let iconStored = messageFlattenIcons.get(emojiId);
  2397.         if (!iconStored) {
  2398.           messageFlattenIcons.set(emojiId, iconStored = wVal);
  2399.         }
  2400.         if (emojiId.includes(b1)) {
  2401.           // invalid. just skip
  2402.           console.warn('Error 0481', run);
  2403.         } else {
  2404.           t = `E${b1},${emojiId}`;
  2405.           resultArr[i++] = t
  2406.         }
  2407.       } else if (wKey === 'text' && typeof wVal === 'string') {
  2408.         t = wVal;
  2409.         if (t.includes(b1)) {
  2410.           t = replaceAll(t, b1, `${b1}@`);
  2411.         }
  2412.         const urlEndpoint = run.navigationEndpoint?.urlEndpoint;
  2413.         const url = urlEndpoint?.url;
  2414.         if (url) {
  2415.           const { nofollow, target } = urlEndpoint;
  2416.           t = `T${b1},${t}${b1},A${b1},${url}${b1},${nofollow || ''}${b1},${target || ''}`;
  2417.         } else {
  2418.           t = `T${b1},${t}`;
  2419.         }
  2420.         resultArr[i++] = t;
  2421.       } else {
  2422.         console.warn('Error 0482', run);
  2423.       }
  2424.     }
  2425.  
  2426.  
  2427.     resultArr.length = i;
  2428.     return resultArr.join(`${b1};`);
  2429.  
  2430.  
  2431.  
  2432.  
  2433. /*
  2434. [
  2435.     {
  2436.         "text": "大好き"
  2437.     },
  2438.     {
  2439.         "emoji": {
  2440.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/M72iZYbCHr2k_9EP9fGUmAo",
  2441.             "shortcuts": [
  2442.                 ":_にぱぁ:",
  2443.                 ":にぱぁ:"
  2444.             ],
  2445.             "searchTerms": [
  2446.                 "_にぱぁ",
  2447.                 "にぱぁ"
  2448.             ],
  2449.             "image": {
  2450.                 "thumbnails": [
  2451.                     {
  2452.                         "url": "https://yt3.ggpht.com/4Q8_RUaekNbE6XTkylSGx2IEbXp7OalBZB7IDLu_zGT0tyDjY8Mi8zTfS4f6CE1mN0Us0_nm=w48-h48-c-k-nd",
  2453.                         "width": 48,
  2454.                         "height": 48
  2455.                     }
  2456.                 ],
  2457.                 "accessibility": {
  2458.                     "accessibilityData": {
  2459.                         "label": "にぱぁ"
  2460.                     }
  2461.                 }
  2462.             },
  2463.             "isCustomEmoji": true
  2464.         }
  2465.     }
  2466. ]
  2467.  
  2468. */
  2469.  
  2470. /*
  2471.  
  2472. [
  2473.     {
  2474.         "emoji": {
  2475.             "emojiId": "🌭",
  2476.             "shortcuts": [
  2477.                 ":hot_dog:"
  2478.             ],
  2479.             "searchTerms": [
  2480.                 "hot",
  2481.                 "dog"
  2482.             ],
  2483.             "image": {
  2484.                 "thumbnails": [
  2485.                     {
  2486.                         "url": "https://fonts.gstatic.com/s/e/notoemoji/15.1/1f32d/72.png"
  2487.                     }
  2488.                 ],
  2489.                 "accessibility": {
  2490.                     "accessibilityData": {
  2491.                         "label": "🌭"
  2492.                     }
  2493.                 }
  2494.             }
  2495.         }
  2496.     },
  2497.     {
  2498.         "emoji": {
  2499.             "emojiId": "🧜‍♀",
  2500.             "shortcuts": [
  2501.                 ":mermaid:"
  2502.             ],
  2503.             "searchTerms": [
  2504.                 "mermaid"
  2505.             ],
  2506.             "image": {
  2507.                 "thumbnails": [
  2508.                     {
  2509.                         "url": "https://fonts.gstatic.com/s/e/notoemoji/15.1/1f9dc_200d_2640/72.png"
  2510.                     }
  2511.                 ],
  2512.                 "accessibility": {
  2513.                     "accessibilityData": {
  2514.                         "label": "🧜‍♀"
  2515.                     }
  2516.                 }
  2517.             }
  2518.         }
  2519.     },
  2520.     {
  2521.         "emoji": {
  2522.             "emojiId": "🥖",
  2523.             "shortcuts": [
  2524.                 ":baguette_bread:"
  2525.             ],
  2526.             "searchTerms": [
  2527.                 "baguette",
  2528.                 "bread"
  2529.             ],
  2530.             "image": {
  2531.                 "thumbnails": [
  2532.                     {
  2533.                         "url": "https://fonts.gstatic.com/s/e/notoemoji/15.1/1f956/72.png"
  2534.                     }
  2535.                 ],
  2536.                 "accessibility": {
  2537.                     "accessibilityData": {
  2538.                         "label": "🥖"
  2539.                     }
  2540.                 }
  2541.             }
  2542.         }
  2543.     },
  2544.     {
  2545.         "emoji": {
  2546.             "emojiId": "💗",
  2547.             "shortcuts": [
  2548.                 ":growing_heart:",
  2549.                 ":heartpulse:"
  2550.             ],
  2551.             "searchTerms": [
  2552.                 "growing",
  2553.                 "heart",
  2554.                 "heartpulse"
  2555.             ],
  2556.             "image": {
  2557.                 "thumbnails": [
  2558.                     {
  2559.                         "url": "https://fonts.gstatic.com/s/e/notoemoji/15.1/1f497/72.png"
  2560.                     }
  2561.                 ],
  2562.                 "accessibility": {
  2563.                     "accessibilityData": {
  2564.                         "label": "💗"
  2565.                     }
  2566.                 }
  2567.             }
  2568.         }
  2569.     }
  2570. ]
  2571.  
  2572.  
  2573.  
  2574.  
  2575. [
  2576.     {
  2577.         "emoji": {
  2578.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/lf4nZJyyLYnWgwODzpuQBA",
  2579.             "shortcuts": [
  2580.                 ":_ペンライト:",
  2581.                 ":ペンライト:"
  2582.             ],
  2583.             "searchTerms": [
  2584.                 "_ペンライト",
  2585.                 "ペンライト"
  2586.             ],
  2587.             "image": {
  2588.                 "thumbnails": [
  2589.                     {
  2590.                         "url": "https://yt3.ggpht.com/qFvk19WffG348lFrdIk2ACLc8tn5_OIqyNINCfHCjz83vl1z8ITziwKIxOD06skW_aHQHAwWk0M=w48-h48-c-k-nd",
  2591.                         "width": 48,
  2592.                         "height": 48
  2593.                     }
  2594.                 ],
  2595.                 "accessibility": {
  2596.                     "accessibilityData": {
  2597.                         "label": "ペンライト"
  2598.                     }
  2599.                 }
  2600.             },
  2601.             "isCustomEmoji": true
  2602.         }
  2603.     },
  2604.     {
  2605.         "emoji": {
  2606.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/M72iZbzDHr2k_9EP9fGUmAo",
  2607.             "shortcuts": [
  2608.                 ":_クラッチ:",
  2609.                 ":クラッチ:"
  2610.             ],
  2611.             "searchTerms": [
  2612.                 "_クラッチ",
  2613.                 "クラッチ"
  2614.             ],
  2615.             "image": {
  2616.                 "thumbnails": [
  2617.                     {
  2618.                         "url": "https://yt3.ggpht.com/Oi2sH_kWkyq4_dJbdsYKyTA68sZsCtYqq58_cfwmf2NHgq5_-lEyiOQW6myBhFnIBCiSWqSMYvY=w48-h48-c-k-nd",
  2619.                         "width": 48,
  2620.                         "height": 48
  2621.                     }
  2622.                 ],
  2623.                 "accessibility": {
  2624.                     "accessibilityData": {
  2625.                         "label": "クラッチ"
  2626.                     }
  2627.                 }
  2628.             },
  2629.             "isCustomEmoji": true
  2630.         }
  2631.     },
  2632.     {
  2633.         "emoji": {
  2634.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/M72iZenDHr2k_9EP9fGUmAo",
  2635.             "shortcuts": [
  2636.                 ":_ゲーミングペンライト:",
  2637.                 ":ゲーミングペンライト:"
  2638.             ],
  2639.             "searchTerms": [
  2640.                 "_ゲーミングペンライト",
  2641.                 "ゲーミングペンライト"
  2642.             ],
  2643.             "image": {
  2644.                 "thumbnails": [
  2645.                     {
  2646.                         "url": "https://yt3.ggpht.com/mFhN5NK8Qm-Lu_QN3iTukx--9_hfHs_C3GTpoQzUdyc3JwwCXGtJ0ffuPWvL4rY67nCfRgZ5T-U=w48-h48-c-k-nd",
  2647.                         "width": 48,
  2648.                         "height": 48
  2649.                     }
  2650.                 ],
  2651.                 "accessibility": {
  2652.                     "accessibilityData": {
  2653.                         "label": "ゲーミングペンライト"
  2654.                     }
  2655.                 }
  2656.             },
  2657.             "isCustomEmoji": true
  2658.         }
  2659.     },
  2660.     {
  2661.         "emoji": {
  2662.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/lf4nZJyyLYnWgwODzpuQBA",
  2663.             "shortcuts": [
  2664.                 ":_ペンライト:",
  2665.                 ":ペンライト:"
  2666.             ],
  2667.             "searchTerms": [
  2668.                 "_ペンライト",
  2669.                 "ペンライト"
  2670.             ],
  2671.             "image": {
  2672.                 "thumbnails": [
  2673.                     {
  2674.                         "url": "https://yt3.ggpht.com/qFvk19WffG348lFrdIk2ACLc8tn5_OIqyNINCfHCjz83vl1z8ITziwKIxOD06skW_aHQHAwWk0M=w48-h48-c-k-nd",
  2675.                         "width": 48,
  2676.                         "height": 48
  2677.                     }
  2678.                 ],
  2679.                 "accessibility": {
  2680.                     "accessibilityData": {
  2681.                         "label": "ペンライト"
  2682.                     }
  2683.                 }
  2684.             },
  2685.             "isCustomEmoji": true
  2686.         }
  2687.     },
  2688.     {
  2689.         "emoji": {
  2690.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/M72iZbzDHr2k_9EP9fGUmAo",
  2691.             "shortcuts": [
  2692.                 ":_クラッチ:",
  2693.                 ":クラッチ:"
  2694.             ],
  2695.             "searchTerms": [
  2696.                 "_クラッチ",
  2697.                 "クラッチ"
  2698.             ],
  2699.             "image": {
  2700.                 "thumbnails": [
  2701.                     {
  2702.                         "url": "https://yt3.ggpht.com/Oi2sH_kWkyq4_dJbdsYKyTA68sZsCtYqq58_cfwmf2NHgq5_-lEyiOQW6myBhFnIBCiSWqSMYvY=w48-h48-c-k-nd",
  2703.                         "width": 48,
  2704.                         "height": 48
  2705.                     }
  2706.                 ],
  2707.                 "accessibility": {
  2708.                     "accessibilityData": {
  2709.                         "label": "クラッチ"
  2710.                     }
  2711.                 }
  2712.             },
  2713.             "isCustomEmoji": true
  2714.         }
  2715.     },
  2716.     {
  2717.         "emoji": {
  2718.             "emojiId": "UCz1RAeb7dVaUcd-4rEgyxPw/M72iZenDHr2k_9EP9fGUmAo",
  2719.             "shortcuts": [
  2720.                 ":_ゲーミングペンライト:",
  2721.                 ":ゲーミングペンライト:"
  2722.             ],
  2723.             "searchTerms": [
  2724.                 "_ゲーミングペンライト",
  2725.                 "ゲーミングペンライト"
  2726.             ],
  2727.             "image": {
  2728.                 "thumbnails": [
  2729.                     {
  2730.                         "url": "https://yt3.ggpht.com/mFhN5NK8Qm-Lu_QN3iTukx--9_hfHs_C3GTpoQzUdyc3JwwCXGtJ0ffuPWvL4rY67nCfRgZ5T-U=w48-h48-c-k-nd",
  2731.                         "width": 48,
  2732.                         "height": 48
  2733.                     }
  2734.                 ],
  2735.                 "accessibility": {
  2736.                     "accessibilityData": {
  2737.                         "label": "ゲーミングペンライト"
  2738.                     }
  2739.                 }
  2740.             },
  2741.             "isCustomEmoji": true
  2742.         }
  2743.     }
  2744. ]
  2745.  
  2746.  
  2747. */
  2748.  
  2749.  
  2750.   }
  2751.  
  2752.   let timelineResolve;
  2753.  
  2754.   const ojWrap = (obj => {
  2755.     return typeof obj === 'function' ? obj : () => obj;
  2756.   });
  2757.   const ojUnwrap = (obj => {
  2758.     return typeof obj === 'function' ? obj() : obj;
  2759.   });
  2760.  
  2761.   const SolidMessageElementTags = window.SolidMessageElementTags = new Set();
  2762.  
  2763.   let SolidMessageElementTagsSizeCached = 0;
  2764.  
  2765.   const SolidMessageListEntry = (props) =>{
  2766.  
  2767.     // rcSignalAdd(1);
  2768.     rcValue++;
  2769.     onMount(async () => {
  2770.       timelineResolve && (await timelineResolve());
  2771.       rcSignalAdd(0);
  2772.     });
  2773.     onCleanup(() => {
  2774.       props = null;
  2775.     });
  2776.  
  2777.     const aKey = props.data().aKey;
  2778.     switch (aKey) { // performance concern? (1.5ms)
  2779.       case 'liveChatViewerEngagementMessageRenderer':
  2780.         return SolidSystemMessage(props);
  2781.       case 'liveChatPaidMessageRenderer':
  2782.         return SolidPaidMessage(props);
  2783.       case 'liveChatMembershipItemRenderer':
  2784.         return SolidMembershipMessage(props);
  2785.       case 'liveChatSponsorshipsGiftRedemptionAnnouncementRenderer':
  2786.         return SolidGiftText(props);
  2787.       case 'liveChatSponsorshipsGiftPurchaseAnnouncementRenderer':
  2788.         return SolidSponsorshipPurchase(props);
  2789.       case 'liveChatPaidStickerRenderer':
  2790.         /** https://www.youtube.com/watch?v=97_KLlaUICQ&t=3600s */
  2791.         /* https://www.youtube.com/live/BDjEOkw_iOA?t=6636s */
  2792.         return SolidPaidSticker(props);
  2793.       case 'liveChatPlaceholderItemRenderer':
  2794.         return SolidMessagePlaceHolder(props);
  2795.  
  2796.       case 'liveChatTextMessageRenderer': 
  2797.       return SolidMessageText(props); // liveChatTextMessageRenderer
  2798.  
  2799.       case 'liveChatOfferClickCountMessageRenderer':
  2800.       // return SolidOfferClick(props); // just append the native element. might have memory leakage
  2801.  
  2802.       default:
  2803.  
  2804.         SolidMessageElementTags.add(aKey);
  2805.         const size = SolidMessageElementTags.size;
  2806.         if (size !== SolidMessageElementTagsSizeCached) {
  2807.           SolidMessageElementTagsSizeCached = size;
  2808.           if (size > 0 && aKey !== 'liveChatOfferClickCountMessageRenderer') {
  2809.             console.warn(`SolidMessageElementTags: ${[...SolidMessageElementTags].join(', ')}`);
  2810.           }
  2811.         }
  2812.         return SolidDefaultElement(props); // just append the native element. might have memory leakage
  2813.  
  2814.     }
  2815.  
  2816.   }
  2817.  
  2818.   const SolidMessageList = (sb) => {
  2819.  
  2820.     onCleanup(() => {
  2821.       // console.log('SolidMessageList cleanup 0001')
  2822.       sb = null;
  2823.     });
  2824.  
  2825.     return html`
  2826.       <${Show} when=(${() => typeof R(profileCard).username === 'string'})>
  2827.         <div classList=(${() => ({ "bst-profile-card": true, "bst-profile-card-on-top": R(profileCard).showOnTop })}) style=(${() => ({ "--fTop": R(profileCard).fTop + "px", "--fBottom": R(profileCard).fBottom + "px" })})>
  2828.           <div class="bst-profile-card-overlay"></div>
  2829.           <div class="bst-profile-card-icon">
  2830.           <img class="bst-profile-card-icon-img" src="${() => R(profileCard).iconUrl}">
  2831.           </div>
  2832.           <div class="bst-profile-card-main">
  2833.           <a target="_blank" href="${() => R(profileCard).profileUrl}">${() => R(profileCard).username}</a>
  2834.           </div>
  2835.           <div class="bst-profile-card-cross" onClick="${profileCard_onCrossClick}">
  2836.           X
  2837.           </div>
  2838.         </div>
  2839.       <//>
  2840.       <${For} each=(${() => R(sb)})>${(qItem) => {
  2841.  
  2842.         const wKey = qItem ? firstObjectKey(qItem) : '';
  2843.         const wItem = wKey ? qItem[wKey] : null;
  2844.         let item = wItem ? R(wItem) : null;
  2845.  
  2846.         let eItem = item ? mutableWM.get(item) : null;
  2847.         if (eItem) {
  2848.  
  2849.           let itemWrapped = rwWrap(item);
  2850.           item = null;
  2851.           // let uww = false;
  2852.           onCleanup(() => {
  2853.  
  2854.             // if(uww) console.log('SolidMessageListItem cleanup 1001', item.uid !== null)
  2855.             removeEntry(itemWrapped())
  2856.             itemWrapped = null;
  2857.           });
  2858.  
  2859.           eItem.convert();
  2860.           eItem = null;
  2861.  
  2862.           return html`<${SolidMessageListEntry} data=(${() => itemWrapped}) />`;
  2863.  
  2864.         }
  2865.  
  2866.       }}<//>
  2867.   `
  2868.   };
  2869.  
  2870.  
  2871.  
  2872.   const SolidMessageRenderer = (props) => {
  2873.  
  2874.     const data = props.entryData;
  2875.     const messageXT = R(data).bst('messageXM');
  2876.  
  2877.     onCleanup(() => {
  2878.       props = null;
  2879.     });
  2880.  
  2881.     return html`<${For} each=(${() => messageXT()})>${(arr => {
  2882.  
  2883.       // console.log(1338, arr)
  2884.       const [p1, v1, p2, v2, ...args] = arr;
  2885.  
  2886.       // console.log(21392, p1,v1,p2,v2, ...args)
  2887.       if (p1 === 'T') {
  2888.  
  2889.         if (p2 === 'A' && v2) {
  2890.  
  2891.           const text = v1;
  2892.           const url = v2;
  2893.           const [nofollow, target] = args;
  2894.  
  2895.           return html`<a href="${() => url}" rel="${() => nofollow === 'true' ? 'nofollow' : null}" target="${() => target === "TARGET_NEW_WINDOW" ? '_blank' : null}">${() => text}</span>`
  2896.  
  2897.         }
  2898.  
  2899.         return html`<span>${() => v1}</span>`;
  2900.  
  2901.       } else if (p1 === 'E') {
  2902.         const emojiId = v1;
  2903.  
  2904.         const emoji = messageFlattenIcons.get(emojiId);
  2905.         if (emoji) {
  2906.  
  2907.           const className = `small-emoji emoji yt-formatted-string style-scope yt-live-chat-text-message-renderer`
  2908.  
  2909.           const src = () => `${emoji.image.thumbnails[0].url}` // performance concern? (3.3ms)
  2910.           const alt = () => emoji.image?.accessibility?.accessibilityData?.label || ''; // performance concern? (1.7ms)
  2911.           let tooltipText = () => emoji.shortcuts?.[0] || ''; // performance concern? (1.7ms)
  2912.           const emojiId = () => emoji.emojiId || '';
  2913.           const isCustomEmoji = () => emoji.isCustomEmoji || false;
  2914.  
  2915.           let [tooltipDisplay, tooltipDisplaySet] = createSignal('');
  2916.           let elmWR = null;
  2917.           let onImgCreated = (el) => {
  2918.             tooltipText = tooltipText();
  2919.             tooltipDisplaySet(tooltipText);
  2920.             if (el.getAttribute23752) {
  2921.               el.getAttribute = el.getAttribute23752;
  2922.             }
  2923.             elmWR = mWeakRef(el);
  2924.           }
  2925.           onCleanup(() => {
  2926.             tooltipDisplay = tooltipDisplaySet = onImgCreated = null;
  2927.           });
  2928.           return html`<img ref="${onImgCreated}" class="${className}" src="${src}" alt="${alt}" shared-tooltip-text="${tooltipText}" data-emoji-id="${emojiId}" is-custom-emoji="${isCustomEmoji}" /><bst-tooltip>${() => (kRef(tooltipTarget()) || 1) === (kRef(elmWR) || 2) ? tooltipDisplay() : ''}</bst-tooltip>`;
  2929.  
  2930.         }
  2931.       }
  2932.  
  2933.       return '';
  2934.  
  2935.     })}
  2936.     <//>`
  2937.  
  2938.   };
  2939.  
  2940.   const SolidSystemMessage = (props) => {
  2941.     let data = props.data();
  2942.  
  2943.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  2944.  
  2945.     const dataMutable = mutableWM.get(data);
  2946.     if (!dataMutable) return '';
  2947.  
  2948.     let icon = data.icon;
  2949.     let onYtIconCreated = null;
  2950.     if (icon) {
  2951.       const type = icon.iconType.toLowerCase();
  2952.       onYtIconCreated = (el) => {
  2953.         const cnt = insp(el);
  2954.         cnt.icon = type;
  2955.         _setAttribute.call(el, 'icon-type', type);
  2956.         onYtIconCreated = null;
  2957.       }
  2958.     }
  2959.  
  2960.     onCleanup(() => {
  2961.       removeEntry(data)
  2962.       props = data = null; 
  2963.       icon = null;
  2964.     });
  2965.  
  2966.     return html`
  2967.   <div class="bst-message-entry bst-viewer-engagement-message" message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  2968.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  2969.   <div class="bst-message-entry-highlight"></div>
  2970.   <div class="bst-message-entry-line">
  2971.     <${Show} when=(${() => typeof onYtIconCreated === 'function'})>
  2972.     <div class="bst-system-message-icon-column"><yt-icon class="bst-system-message-yt-icon" ref="${onYtIconCreated}"></yt-icon></div>
  2973.     <//>
  2974.     <${Show} when=(${() => R(data).beforeContentButtons?.length === 1})>
  2975.     <${SolidBeforeContentButton0} entryData=(${()=>data}) />
  2976.     <//>
  2977.     <div class="bst-message-body">
  2978.     <${SolidMessageRenderer} entryData=(${()=>data}) />
  2979.     </div>
  2980.   </div>
  2981.   <div class="bst-message-menu-container">
  2982.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  2983.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  2984.     <//>
  2985.   </div>
  2986.   </div>
  2987.   </div>`
  2988.  
  2989.   };
  2990.  
  2991.  
  2992.   const SolidPaidMessage = (props) => {
  2993.  
  2994.     let data = props.data();
  2995.  
  2996.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  2997.  
  2998.     // const {authorNameTextColor, bodyBackgroundColor, bodyTextColor, headerBackgroundColor, headerTextColor, textInputBackgroundColor,timestampColor} = data;
  2999.  
  3000.     onCleanup(() => {
  3001.       removeEntry(data)
  3002.       props = data = null; 
  3003.     });
  3004.  
  3005.     return html`
  3006.   <div classList=(${() => ({ 'bst-message-entry': true, [`bst-paid-message`]: true, 'bst-message-entry-holding': entryHolding() === R(data).uid() })}) message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  3007.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  3008.   <span class="bst-message-profile-holder"><a class="bst-message-profile-anchor"><img class="bst-profile-img" src="${() => R(data).getProfilePic(64, -1)}" /></a></span>
  3009.   <div class="bst-message-entry-highlight"></div>
  3010.   <div class="bst-message-entry-line">
  3011.     <div class="bst-message-head">
  3012.     <div class="bst-message-time">${() => R(data).bst('timestampText')}</div>
  3013.     <div class="bst-name-field bst-message-name-color">
  3014.       <div class="bst-message-username">${() => R(data).bst('getUsername')}</div>
  3015.       <div class="bst-message-badges">
  3016.       <${For} each=(${() => R(data).bst('authorBadges')})>${(badge) => {
  3017.  
  3018.         return formatters.authorBadges(badge, data);
  3019.  
  3020.       }}<//>
  3021.       </div>
  3022.     </div>
  3023.     <div class="bst-paid-amount">${() => convertYTtext(R(data).purchaseAmountText)}</div>
  3024.     </div>
  3025.     <${Show} when=(${() => R(data).beforeContentButtons?.length === 1})>
  3026.     <${SolidBeforeContentButton0} entryData=(${()=>data}) />
  3027.     <//>
  3028.     <div class="bst-message-body bst-message-body-next-to-head">
  3029.     <${SolidMessageRenderer} entryData=(${()=>data}) />
  3030.     </div>
  3031.   </div>
  3032.   <div class="bst-message-menu-container">
  3033.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  3034.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  3035.     <//>
  3036.   </div>
  3037.   </div>
  3038.   </div>
  3039. `;
  3040.   };
  3041.  
  3042.   const SolidMembershipMessage = (props) => {
  3043.     let data = props.data();
  3044.  
  3045.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  3046.  
  3047.     onCleanup(() => {
  3048.       removeEntry(data)
  3049.       props = data = null; 
  3050.     });
  3051.  
  3052.     return html`
  3053.   <div classList=(${() => ({ 'bst-message-entry': true, [`bst-message-entry-ll`]: true, [`bst-membership-message`]: true, 'bst-message-entry-holding': entryHolding() === R(data).uid() })}) message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  3054.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  3055.   <div classList=(${() => ({ "bst-message-entry-header": true, "bst-message-entry-followed-by-body": R(data).bst('hasMessageBody') })})>
  3056.     <span class="bst-message-profile-holder"><a class="bst-message-profile-anchor"><img class="bst-profile-img" src="${() => R(data).getProfilePic(64, -1)}" /></a></span>
  3057.     <div class="bst-message-entry-highlight"></div>
  3058.     <div class="bst-message-entry-line">
  3059.       <div class="bst-message-head">
  3060.         <div class="bst-message-time">${() => R(data).bst('timestampText')}</div>
  3061.         <div class="bst-name-field bst-message-name-color">
  3062.           <div class="bst-message-username">${() => R(data).bst('getUsername')}</div>
  3063.           <div class="bst-message-badges">
  3064.           <${For} each=(${() => R(data).bst('authorBadges')})>${(badge) => {
  3065.  
  3066.         return formatters.authorBadges(badge, data);
  3067.  
  3068.       }}<//>
  3069.           </div>
  3070.         </div>
  3071.       </div>
  3072.       <div class="bst-message-body bst-message-body-next-to-head">${() => {
  3073.         return convertYTtext(R(data).headerPrimaryText || R(data).headerSubtext);
  3074.         // new member - only data.headerSubtext
  3075.         // return convertYTtext(data.headerSubtext)
  3076.       }}</div>
  3077.     </div>
  3078.     <div class="bst-message-menu-container">
  3079.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  3080.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  3081.     <//>
  3082.     </div>
  3083.   </div>
  3084.   <${Show} when=(${() => R(data).bst('hasMessageBody')})>
  3085.     <div class="bst-message-entry-body">
  3086.       <div class="bst-message-entry-highlight"></div>
  3087.       <div class="bst-message-entry-line">
  3088.         <div class="bst-message-body">
  3089.         <${SolidMessageRenderer} entryData=(${() => data}) />
  3090.         </div>
  3091.       </div>
  3092.     </div>
  3093.   <//>
  3094.   </div>
  3095.   </div>
  3096. `;
  3097.   };
  3098.  
  3099.  
  3100.  
  3101.   const SolidGiftText = (props) => {
  3102.     let data = props.data();
  3103.  
  3104.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  3105.  
  3106.     onCleanup(() => {
  3107.       removeEntry(data)
  3108.       props = data = null; 
  3109.     });
  3110.  
  3111.     return html`
  3112.   <div classList=(${() => ({ 'bst-message-entry': true, [`bst-gift-message`]: true, 'bst-message-entry-holding': entryHolding() === R(data).uid() })}) message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  3113.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  3114.   <span class="bst-message-profile-holder"><a class="bst-message-profile-anchor"><img class="bst-profile-img" src="${() => R(data).getProfilePic(64, -1)}" /></a></span>
  3115.   <div class="bst-message-entry-highlight"></div>
  3116.   <div class="bst-message-entry-line">
  3117.     <div class="bst-message-head">
  3118.       <div class="bst-message-time">${() => R(data).bst('timestampText')}</div>
  3119.       <div class="bst-name-field bst-message-name-color">
  3120.         <div class="bst-message-username">${() => R(data).bst('getUsername')}</div>
  3121.         <div class="bst-message-badges">
  3122.         <${For} each=(${() => R(data).bst('authorBadges')})>${(badge) => {
  3123.  
  3124.         return formatters.authorBadges(badge, data);
  3125.  
  3126.       }}<//>
  3127.         </div>
  3128.       </div>
  3129.     </div>
  3130.     <${Show} when=(${() => R(data).beforeContentButtons?.length === 1})>
  3131.     <${SolidBeforeContentButton0} entryData=(${() => data}) />
  3132.     <//>
  3133.     <div class="bst-message-body bst-message-body-next-to-head">
  3134.     <${SolidMessageRenderer} entryData=(${() => data}) />
  3135.     </div>
  3136.   </div>
  3137.   <div class="bst-message-menu-container">
  3138.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  3139.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  3140.     <//>
  3141.   </div>
  3142.   </div>
  3143.   </div>
  3144. `;
  3145.   };
  3146.  
  3147.  
  3148.  
  3149.  
  3150.   const SolidSponsorshipPurchase = (props) => {
  3151.  
  3152.     let data = props.data();
  3153.  
  3154.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  3155.  
  3156.  
  3157.     onCleanup(() => {
  3158.       removeEntry(data)
  3159.       props = data = null;
  3160.     });
  3161.  
  3162.     // const {authorNameTextColor, bodyBackgroundColor, bodyTextColor, headerBackgroundColor, headerTextColor, textInputBackgroundColor,timestampColor} = data;
  3163.  
  3164.  
  3165.     return html`
  3166.   <div classList=(${() => ({ 'bst-message-entry': true, [`bst-sponsorship-purchase`]: true, 'bst-message-entry-holding': entryHolding() === R(data).uid() })}) message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  3167.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  3168.   <span class="bst-message-profile-holder"><a class="bst-message-profile-anchor"><img class="bst-profile-img" src="${() => R(data).getProfilePic(64, -1)}" /></a></span>
  3169.   <div class="bst-message-entry-highlight"></div>
  3170.   <div class="bst-message-entry-line">
  3171.     <div class="bst-message-head">
  3172.       <div class="bst-message-time">${() => R(data).bst('timestampText')}</div>
  3173.       <div class="bst-name-field bst-message-name-color">
  3174.         <div class="bst-message-username">${() => R(data).bst('getUsername')}</div>
  3175.         <div class="bst-message-badges">
  3176.         <${For} each=(${() => R(data).bst('authorBadges')})>${(badge) => {
  3177.  
  3178.         return formatters.authorBadges(badge, data);
  3179.  
  3180.       }}<//>
  3181.         </div>
  3182.       </div>
  3183.     </div>
  3184.     <${Show} when=(${() => R(data).beforeContentButtons?.length === 1})>
  3185.     <${SolidBeforeContentButton0} entryData=(${() => data}) />
  3186.     <//>
  3187.     <div class="bst-message-body bst-message-body-next-to-head">
  3188.     <${SolidMessageRenderer} entryData=(${() => data}) />
  3189.     </div>
  3190.   </div>
  3191.   <div class="bst-message-menu-container">
  3192.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  3193.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  3194.     <//>
  3195.   </div>
  3196.   </div>
  3197.   </div>
  3198. `;
  3199.   };
  3200.  
  3201.   const SolidPaidSticker = (props) => {
  3202.     /* https://www.youtube.com/live/BDjEOkw_iOA?si=CGG7boBJvfT2KLFT&t=6636 */
  3203.  
  3204.     let data = props.data();
  3205.  
  3206.     onCleanup(() => {
  3207.       removeEntry(data)
  3208.       props = data = null; 
  3209.     });
  3210.  
  3211.  
  3212.     return html`
  3213.   <div classList=(${() => ({ 'bst-message-entry': true, [`bst-paid-sticker`]: true, 'bst-message-entry-holding': entryHolding() === R(data).uid() })}) message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  3214.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  3215.   <span class="bst-message-profile-holder"><a class="bst-message-profile-anchor"><img class="bst-profile-img" src="${() => R(data).getProfilePic(64, -1)}" /></a></span>
  3216.   <div class="bst-message-entry-highlight" style="${() => ({ '--bst-paid-sticker-bg': `url(${R(data).getStickerURL(80, 256)})` })}"></div>
  3217.   <div class="bst-message-entry-line">
  3218.     <div class="bst-message-head">
  3219.       <div class="bst-message-time">${() => R(data).bst('timestampText')}</div>
  3220.       <div class="bst-name-field bst-message-name-color">
  3221.         <div class="bst-message-username">${() => R(data).bst('getUsername')}</div>
  3222.         <div class="bst-message-badges">
  3223.         <${For} each=(${() => R(data).bst('authorBadges')})>${(badge) => {
  3224.  
  3225.         return formatters.authorBadges(badge, data);
  3226.  
  3227.       }}<//>
  3228.         </div>
  3229.       </div>
  3230.       <div class="bst-paid-amount">${() => convertYTtext(R(data).purchaseAmountText)}</div>
  3231.     </div>
  3232.     <${Show} when=(${() => R(data).beforeContentButtons?.length === 1})>
  3233.     <${SolidBeforeContentButton0} entryData=(${()=>data}) />
  3234.     <//>
  3235.     <div class="bst-message-body bst-message-body-next-to-head">
  3236.     <${SolidMessageRenderer} entryData=(${()=>data}) />
  3237.     </div>
  3238.   </div>
  3239.   <div class="bst-message-menu-container">
  3240.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  3241.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  3242.     <//>
  3243.   </div>
  3244.   </div>
  3245.   </div>
  3246. `;
  3247.   }
  3248.  
  3249.  
  3250.  
  3251.   const SolidMessageText = (props) => {
  3252.  
  3253.  
  3254.     let data = props.data();
  3255.  
  3256.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  3257.  
  3258.  
  3259.     onCleanup(() => {
  3260.       removeEntry(data)
  3261.       props = data = null; 
  3262.     });
  3263.  
  3264.     return html`
  3265.   <div classList=(${() => ({ 'bst-message-entry': true, [`bst-${R(data).aKey}`]: true, 'bst-message-entry-holding': entryHolding() === R(data).uid() })}) message-uid="${() => R(data).uid()}" message-id="${() => R(data).id}" ref="${mutableWM.get(data).setupFn}" author-type="${() => R(data).bst('authorType')}">
  3266.   <div classList=(${() => ({ 'bst-message-container': true, 'bst-message-container-f': mf() !== R(data).uid() })})>
  3267.   <span class="bst-message-profile-holder"><a class="bst-message-profile-anchor"><img class="bst-profile-img" src="${() => R(data).getProfilePic(64, -1)}" /></a></span>
  3268.   <div class="bst-message-entry-highlight"></div>
  3269.   <div class="bst-message-entry-line">
  3270.     <div class="bst-message-head">
  3271.       <div class="bst-message-time">${() => R(data).bst('timestampText')}</div>
  3272.       <div class="bst-name-field bst-message-name-color">
  3273.         <div class="bst-name-field-box">
  3274.         <div>Icon</div>
  3275.         <div>Name</div>
  3276.         </div>
  3277.         <div class="bst-message-username">${() => R(data).bst('getUsername')}</div>
  3278.         <div class="bst-message-badges">
  3279.         <${For} each=(${() => R(data).bst('authorBadges')})>${(badge) => {
  3280.  
  3281.         return formatters.authorBadges(badge, data);
  3282.  
  3283.       }}<//>
  3284.         </div>
  3285.       </div>
  3286.       <span class="bst-message-head-colon" aria-hidden="true"></span>
  3287.     </div>
  3288.     <${Show} when=(${() => R(data).beforeContentButtons?.length === 1})>
  3289.     <${SolidBeforeContentButton0} entryData=(${() => data}) />
  3290.     <//>
  3291.     <div class="bst-message-body bst-message-body-next-to-head">
  3292.     <${SolidMessageRenderer} entryData=(${() => data}) />
  3293.     </div>
  3294.   </div>
  3295.   <div class="bst-message-menu-container">
  3296.     <${Show} when=(${() => R(menuRenderObj).messageUid === R(data).uid() && !R(menuRenderObj).loading })>
  3297.     <${SolidMenuList} items=(${() => R(menuRenderObj).menuListXd()}) />
  3298.     <//>
  3299.   </div>
  3300.   </div>
  3301.   </div>
  3302. `;
  3303.   };
  3304.  
  3305.   const SolidMessagePlaceHolder = (props) => {
  3306.  
  3307.     let data = props.data();
  3308.  
  3309.     const { rendererFlag, authorName, messageXT } = MEMO(data);
  3310.  
  3311.     onCleanup(() => {
  3312.       removeEntry(data)
  3313.       props = data = null; 
  3314.     });
  3315.  
  3316.     return html`<bst-live-chat-placeholder ref="${mutableWM.get(data).setupFn}"></bst-live-chat-placeholder>`;
  3317.  
  3318.   };
  3319.  
  3320.   const SolidOfferClick = (props)=>{
  3321.  
  3322.  
  3323.     let data = props.data();
  3324.  
  3325.     const setupFn_ = (elm)=>{
  3326.  
  3327.  
  3328.       const mElm = document.createElement('yt-live-chat-offer-click-count-message-renderer')
  3329.       sharedNoscript.appendChild(mElm);
  3330.       mElm.data = data;
  3331.  
  3332.       mElm.classList.add('bst-live-chat-element');
  3333.  
  3334.       elm.appendChild(mElm);
  3335.  
  3336.       return mutableWM.get(data).setupFn(elm);
  3337.  
  3338.  
  3339.     }
  3340.     
  3341.  
  3342.       /*
  3343.       // https://www.youtube.com/watch?v=TeLstIBwC6M
  3344.  
  3345.       {
  3346.     "id": "ChwKGkNPaW5fUHpUZzRrREZlb0oxZ0FkOGZ3SG5n",
  3347.     "timestampUsec": "1728557900305443",
  3348.     "messageTitle": {
  3349.         "runs": [
  3350.             {
  3351.                 "text": "Popular · 50 product views"
  3352.             }
  3353.         ]
  3354.     },
  3355.     "productTitle": "hololive closet 姫森ルーナ ワンピース衣装 グッズ / 【旧価格】姫森ルーナ ワンピース衣装",
  3356.     "ctaTitle": "View details",
  3357.     "onClickCommand": {
  3358.         "clickTrackingParams": "CEZQvHwLGEbQwHjMoJcY9ayKAyXC31wCHe8FQF5=",
  3359.         "commandExecutorCommand": {
  3360.             "commands": [
  3361.                 {
  3362.                     "clickTrackingParams": "CEZQvHwLGEbQwHjMoJcY9ayKAyXC31wCHe8FQF5=",
  3363.                     "commandMetadata": {
  3364.                         "webCommandMetadata": {
  3365.                             "sendPost": true,
  3366.                             "apiUrl": "/youtubei/v1/feedback"
  3367.                         }
  3368.                     },
  3369.                     "feedbackEndpoint": {
  3370.                         "feedbackToken": "AB4yrpHVTUG7-rpeiRCAr9ZWG5BYET3y"
  3371.                     }
  3372.                 },
  3373.                 {
  3374.                     "clickTrackingParams": "CEZQvHwLGEbQwHjMoJcY9ayKAyXC31wCHe8FQF5=",
  3375.                     "commandMetadata": {
  3376.                         "webCommandMetadata": {
  3377.                             "url": "https://shop.hololivepro.com/products/hololivecloset_himemoriluna_1?variant=44046847443164&country=JP&currency=JPY&utm_campaign=sag_organic&srsltid=AfmBOLW3QuMFovsS&utm_term=UCa9YHRVrnw&utm_medium=product_shelf&utm_source=youtube",
  3378.                             "webPageType": "WEB_PAGE_TYPE_UNKNOWN",
  3379.                             "rootVe": 83769
  3380.                         }
  3381.                     },
  3382.                     "urlEndpoint": {
  3383.                         "url": "https://shop.hololivepro.com/products/hololivecloset_himemoriluna_1?variant=44046847443164&country=JP&currency=JPY&utm_campaign=sag_organic&srsltid=Afm8wkUDmFuA4&utm_content=YT3-0jm-H1Z2sZRVrnw&utm_medium=product_shelf&utm_source=youtube",
  3384.                         "target": "TARGET_NEW_WINDOW"
  3385.                     }
  3386.                 }
  3387.             ]
  3388.         }
  3389.     },
  3390.     "trackingParams": "CEZQvHwLGEbQwHjMoJcY9ayKAyXC31wCHe8FQF5=",
  3391.     "__clientId__": "COin_PzWg5kDFeoJ2gAd9fwSmg",
  3392.     "uid": "undefined:1728557900305443",
  3393.     "aKey": "liveChatOfferClickCountMessageRenderer",
  3394.     "rendererFlag": 0,
  3395.     "messageFixed": []
  3396. }
  3397.     */
  3398.  
  3399.  
  3400.     return html`<bst-live-chat-elementholder ref="${setupFn_}"></bst-live-chat-elementholder>`;
  3401.  
  3402.   };
  3403.  
  3404.   const mapToElementTag = new Map(Object.entries({
  3405.     liveChatAutoModMessageRenderer: "yt-live-chat-auto-mod-message-renderer",
  3406.     liveChatPaidMessageRenderer: "yt-live-chat-paid-message-renderer",
  3407.     liveChatLegacyPaidMessageRenderer: "yt-live-chat-legacy-paid-message-renderer",
  3408.     liveChatMembershipItemRenderer: "yt-live-chat-membership-item-renderer",
  3409.     liveChatTextMessageRenderer: "yt-live-chat-text-message-renderer",
  3410.     liveChatPaidStickerRenderer: "yt-live-chat-paid-sticker-renderer",
  3411.     liveChatDonationAnnouncementRenderer: "yt-live-chat-donation-announcement-renderer",
  3412.     liveChatModeChangeMessageRenderer: "yt-live-chat-mode-change-message-renderer",
  3413.     liveChatModerationMessageRenderer: "yt-live-chat-moderation-message-renderer",
  3414.     liveChatOfferClickCountMessageRenderer: "yt-live-chat-offer-click-count-message-renderer",
  3415.     liveChatPlaceholderItemRenderer: "yt-live-chat-placeholder-item-renderer",
  3416.     liveChatPurchasedProductMessageRenderer: "ytd-live-chat-purchased-product-message-renderer",
  3417.     liveChatSponsorshipsGiftPurchaseAnnouncementRenderer: "ytd-sponsorships-live-chat-gift-purchase-announcement-renderer",
  3418.     liveChatSponsorshipsGiftRedemptionAnnouncementRenderer: "ytd-sponsorships-live-chat-gift-redemption-announcement-renderer",
  3419.     liveChatViewerEngagementMessageRenderer: "yt-live-chat-viewer-engagement-message-renderer",
  3420.     serverErrorMessage: "yt-live-chat-server-error-message"
  3421.   }));
  3422.   // mapToElementTag.set('liveChatOfferClickCountMessageRenderer' ,'yt-live-chat-offer-click-count-message-renderer');
  3423.  
  3424.  
  3425.   const SolidDefaultElement = (props) => {
  3426.  
  3427.     let data = props.data();
  3428.     const aKey = data.aKey;
  3429.     let elementTag = '';
  3430.  
  3431.     if (aKey) {
  3432.       elementTag = mapToElementTag.get(aKey);
  3433.       if (!elementTag) {
  3434.         const lcrCnt = getLcRendererCnt();
  3435.         if (lcrCnt) {
  3436.           const mapping = lcrCnt.configureRendererStamper()?.visibleItems?.mapping;
  3437.           if (mapping && typeof mapping === 'object') {
  3438.             elementTag = mapping[aKey];
  3439.             elementTag = (elementTag && elementTag.component) || elementTag;
  3440.             if (typeof (elementTag || 0) !== 'string') elementTag = '';
  3441.           }
  3442.         }
  3443.         mapToElementTag.set(aKey, (elementTag || ''));
  3444.       }
  3445.     }
  3446.  
  3447.     const setupFn_ = (elm) => {
  3448.       if (elementTag) {
  3449.         const mElm = document.createElement(elementTag)
  3450.         sharedNoscript.appendChild(mElm);
  3451.         mElm.data = data;
  3452.         mElm.classList.add('bst-live-chat-element');
  3453.         elm.appendChild(mElm);
  3454.       } else {
  3455.         const mElm = document.createElement('bst-live-chat-unknownitem')
  3456.         mElm.classList.add('bst-live-chat-element');
  3457.         mElm.setAttribute('title', 'unknown');
  3458.         elm.appendChild(mElm);
  3459.       }
  3460.       const r = mutableWM.get(data).setupFn(elm);
  3461.       data = null;
  3462.       elm = null;
  3463.       elementTag = '';
  3464.       props = null;
  3465.       return r;
  3466.     };
  3467.  
  3468.     return html`<bst-live-chat-elementholder ref="${setupFn_}"></bst-live-chat-elementholder>`;
  3469.  
  3470.   };
  3471.  
  3472.  
  3473.   /**
  3474.    *
  3475.    * test links
  3476.    *
  3477.    *
  3478.    * moderator
  3479.    * https://www.youtube.com/watch?v=1-D4z79ZUV4
  3480.    *
  3481.    *
  3482.    * owner (long text)
  3483.    * https://www.youtube.com/watch?v=A930eAQYQog&t=1h32m50s
  3484.    *
  3485.    */
  3486.  
  3487.  
  3488.   function convertYTtext(val) {
  3489.  
  3490.     if (typeof (val || 0) !== 'object') return null;
  3491.     if (val.simpleText) return val.simpleText
  3492.  
  3493.     const runs = val.runs;
  3494.     if (runs && runs.length === 1) {
  3495.       let r = runs[0];
  3496.       return typeof r === 'string' ? r : typeof (r || 0).text === 'string' ? r.text : null;
  3497.     } else if (runs && runs.length >= 0) {
  3498.       return runs.map(r => (typeof r === 'string' ? r : typeof (r || 0).text === 'string' ? r.text : null)).join('');
  3499.     }
  3500.     return null;
  3501.   }
  3502.  
  3503.   const fixMessagesForEmoji = (() => {
  3504.  
  3505.     let Vkb = 0
  3506.       , Wkb = /tone[1-5]/
  3507.       , Xkb = " \uD83C\uDFFB \uD83C\uDFFC \uD83C\uDFFD \uD83C\uDFFE \uD83C\uDFFF".split(" ")
  3508.       , Ykb = "UCzC5CNksIBaiT-NdMJjJNOQ/COLRg9qOwdQCFce-qgodrbsLaA UCzC5CNksIBaiT-NdMJjJNOQ/CMKC7uKOwdQCFce-qgodqbsLaA UCzC5CNksIBaiT-NdMJjJNOQ/CJiQ8uiOwdQCFcx9qgodysAOHg UCzC5CNksIBaiT-NdMJjJNOQ/CI3h3uDJitgCFdARTgodejsFWg UCzC5CNksIBaiT-NdMJjJNOQ/CI69oYTKitgCFdaPTgodsHsP5g UCzC5CNksIBaiT-NdMJjJNOQ/CKzQr47KitgCFdCITgodq6EJZg UCzC5CNksIBaiT-NdMJjJNOQ/CPGD8Iu8kN4CFREChAod9OkLmg".split(" ")
  3509.       , Zkb = Number.MAX_SAFE_INTEGER
  3510.       , $kb = RegExp("\uFE0F", "g")
  3511.  
  3512.     let dQ = function (a, b, c) {
  3513.       return (a = a.emojiMap[b]) && (!a.isLocked || void 0 !== c && c) ? a : void 0
  3514.     }
  3515.  
  3516.     let gQ = function (a, b) {
  3517.       a = a.emojiShortcutMap[b.toLocaleLowerCase()];
  3518.       return !a || a.isLocked ? null : a
  3519.     }
  3520.  
  3521.     function resultAddText(r, text) {
  3522.       if (typeof text === 'string' && text.length >= 1) {
  3523.         r.push({ text: text });
  3524.       }
  3525.     }
  3526.     function resultAddEmoji(r, emoji) {
  3527.       if (emoji && typeof emoji === 'object') {
  3528.         r.push({ emoji: emoji });
  3529.       }
  3530.     }
  3531.  
  3532.     /*
  3533.  
  3534.         cQ.prototype.createDocumentFragment = function(a, b, c, d) {
  3535.             b = void 0 === b ? !1 : b;
  3536.             c = void 0 === c ? !0 : c;
  3537.             d = void 0 === d ? !1 : d;
  3538.             a = a.replace($kb, "");
  3539.             for (var e = document.createDocumentFragment(), g = 0, k, m = 0; null != (k = this.emojiRegex.exec(a)); ) {
  3540.                 var p = dQ(this, k[0]) || gQ(this, k[0]);
  3541.                 !p || p.isCustomEmoji && !b || (p = this.createEmoji(p, c),
  3542.                 g !== k.index && e.appendChild(document.createTextNode(a.substring(g, k.index))),
  3543.                 e.appendChild(p),
  3544.                 g = k.index + k[0].length,
  3545.                 m++)
  3546.             }
  3547.             if (!d || m)
  3548.                 return e.appendChild(document.createTextNode(a.substr(g))),
  3549.                 e
  3550.         }
  3551.  
  3552.         */
  3553.  
  3554.     /*
  3555.  
  3556.         cQ.prototype.createEmoji = function(a, b) {
  3557.             b = void 0 === b ? !0 : b;
  3558.             var c = document.createElement("img");
  3559.             a.isCustomEmoji && !x("render_custom_emojis_as_small_images") || c.classList.add("small-emoji");
  3560.             c.classList.add("emoji");
  3561.             c.classList.add("yt-formatted-string");
  3562.             c.src = a.image ? $C(a.image.thumbnails, this.emojiSize) || "" : "";
  3563.             var d = void 0;
  3564.             a.image && a.image.accessibility && a.image.accessibility.accessibilityData && (d = a.image.accessibility.accessibilityData.label);
  3565.             c.alt = d ? d : (a.isCustomEmoji && a.shortcuts ? a.shortcuts[0] : a.emojiId) || "";
  3566.             a.isCustomEmoji && (c.dataset.emojiId = a.emojiId);
  3567.             ce && (c.setAttribute("contenteditable", "false"),
  3568.             c.setAttribute("unselectable", "on"));
  3569.             b && (a.shortcuts && a.shortcuts.length && c.setAttribute("shared-tooltip-text", a.shortcuts[0]),
  3570.             c.id = "emoji-" + Vkb++);
  3571.             return c
  3572.         }
  3573.         */
  3574.  
  3575.     function fixMessagesForEmoji(a, b, c, d) {
  3576.       b = void 0 === b ? !1 : b; // false
  3577.       c = void 0 === c ? !0 : c; // true
  3578.       d = void 0 === d ? !1 : d; // false
  3579.       a = a.replace($kb, "");
  3580.       // let e = document.createDocumentFragment();
  3581.       const r = [];
  3582.       let g = 0;
  3583.       let k;
  3584.       let m = 0;
  3585.       for (; null != (k = this.emojiRegex.exec(a));) {
  3586.         var p = dQ(this, k[0]) || gQ(this, k[0]);
  3587.         !p || p.isCustomEmoji && !b || (p = p,
  3588.           g !== k.index && resultAddText(r, a.substring(g, k.index)),
  3589.           resultAddEmoji(r, p),
  3590.           g = k.index + k[0].length,
  3591.           m++)
  3592.       }
  3593.       // if (!d || m) return e.appendChild(document.createTextNode(a.substr(g))), e;
  3594.       return resultAddText(r, a.substr(g)), r;
  3595.     }
  3596.     return fixMessagesForEmoji;
  3597.  
  3598.   })();
  3599.  
  3600.  
  3601.   // class StoreType {
  3602.  
  3603.   // }
  3604.  
  3605.   // const storeTypeFn = ()=>{
  3606.   //   let p = {};
  3607.   //   let q = '';
  3608.   //   return function(x){
  3609.   //     if(typeof x === 'object'){
  3610.   //       let id = q = `${Math.floor(Math.random() * 314159265359 + 314159265359).toString(36)}|${Date.now()}`;
  3611.   //       p = {[id]: x};
  3612.   //       return true;
  3613.   //     }
  3614.   //     return p[`${x || q}`] || null;
  3615.   //   }
  3616.   // }
  3617.  
  3618.   const storeTypeFn = (key) => {
  3619.     let obj = {};
  3620.     let ud = false;
  3621.     const resFn = function () {
  3622.       return obj[this[key]];
  3623.     };
  3624.     resFn.update = (nv) => {
  3625.       ud = !ud;
  3626.       const id = `${ud}`;
  3627.       obj = { [id]: nv };
  3628.       return id;
  3629.     }
  3630.     return resFn;
  3631.  
  3632.   }
  3633.  
  3634.   const menuRenderObj = {
  3635.  
  3636.     menuListXp: '',
  3637.     messageUid: '',
  3638.     loading: false,
  3639.     error: 0,
  3640.     menuListXd: storeTypeFn('menuListXp')
  3641.  
  3642.   };
  3643.  
  3644.  
  3645.   const profileCard = {
  3646.     wElement: null,
  3647.     top: -1,
  3648.     showOnTop: null,
  3649.     iconUrl: null,
  3650.     username: null,
  3651.     profileUrl: null
  3652.   };
  3653.  
  3654.   const profileCard_onCrossClick = (e) => {
  3655.     !e?.button && Object.assign(W(profileCard), {
  3656.       wElement: null,
  3657.       top: -1,
  3658.       showOnTop: null,
  3659.       iconUrl: null,
  3660.       username: null,
  3661.       profileUrl: null,
  3662.     });
  3663.   };
  3664.  
  3665.   const solidContextMenuOpened = createMemo(() => {
  3666.     const e1 = !!R(menuRenderObj).menuListXd();
  3667.     const e2 = !!R(menuRenderObj).messageUid;
  3668.     const e3 = R(profileCard).wElement;
  3669.     return (e1 && e2) || kRef(e3);
  3670.   });
  3671.  
  3672.   const [atBottom0, atBottom0Set] = createSignal(true);
  3673.   const [atBottom1, atBottom1Set] = createSignal(true);
  3674.   const [bottomPauseAt, bottomPauseAtSet] = createSignal(0);
  3675.   const [bottomKeepAt, bottomKeepAtSet] = createSignal(0);
  3676.   createEffect(() => {
  3677.     atBottom1Set(atBottom0() ? true : false);
  3678.   });
  3679.  
  3680.   let lcRendererWR = null;
  3681.  
  3682.   const getLcRendererCnt = () => {
  3683.  
  3684.     lcRendererWR = lcRendererWR || mWeakRef(document.querySelector('yt-live-chat-item-list-renderer'));
  3685.     const lcrElement = kRef(lcRendererWR);
  3686.     if (!lcrElement) lcRendererWR = null;
  3687.     const lcrCnt = insp(lcrElement);
  3688.     return lcrCnt;
  3689.  
  3690.   }
  3691.  
  3692.   const onContextMenuOpened_ = () => {
  3693.  
  3694.     const lcrCnt = getLcRendererCnt();
  3695.     if (!lcrCnt) return;
  3696.  
  3697.     if (typeof lcrCnt.onContextMenuOpened_ === 'function' && lcrCnt.onContextMenuOpened_.length === 0) {
  3698.       lcrCnt.onContextMenuOpened_();
  3699.     } else {
  3700.       lcrCnt.contextMenuOpen = !0;
  3701.     }
  3702.  
  3703.  
  3704.   }
  3705.  
  3706.  
  3707.   const onContextMenuClosed_ = () => {
  3708.     const lcrCnt = getLcRendererCnt();
  3709.  
  3710.     if (!lcrCnt) return;
  3711.  
  3712.     if (typeof lcrCnt.onContextMenuClosed_ === 'function' && lcrCnt.onContextMenuClosed_.length === 0) {
  3713.       lcrCnt.onContextMenuClosed_();
  3714.     } else {
  3715.       lcrCnt.contextMenuOpen = !1;
  3716.     }
  3717.  
  3718.  
  3719.   }
  3720.  
  3721.   
  3722.  
  3723.  
  3724.   createEffect(() => {
  3725.     const p = solidContextMenuOpened();
  3726.     if (p) {
  3727.       onContextMenuOpened_();
  3728.     } else if (!p) {
  3729.       onContextMenuClosed_();
  3730.     }
  3731.  
  3732.   })
  3733.  
  3734.   const [entryHolding, entryHoldingChange] = createSignal("");
  3735.   const [mf, mfChange] = createSignal("");
  3736.   const [tooltipTarget, tooltipTargetChange] = createSignal(null);
  3737.   let mouseActionP = null;
  3738.   let noFlushTP = false;
  3739.  
  3740.   const delayPn = delay => new Promise((fn => setTimeout(fn, delay)));
  3741.  
  3742.   const getElementText = function (el) {
  3743.     let text = '';
  3744.     const tagName = el.nodeType === 1 ? el.nodeName.toLocaleLowerCase() : '';
  3745.     switch (tagName) {
  3746.       case '':
  3747.         // Text node (3) or CDATA node (4) - return its text
  3748.         if ((el.nodeType === 3) || (el.nodeType === 4)) text = el.nodeValue;
  3749.         break;
  3750.       case 'tp-yt-paper-tooltip':
  3751.       case 'bst-tooltip':
  3752.       case 'script':
  3753.       case 'style':
  3754.       case 'meta':
  3755.       case 'noscript':
  3756.       case 'link':
  3757.       case 'audio':
  3758.       case 'video':
  3759.       case 'object':
  3760.         break;
  3761.       case 'img':
  3762.         // If node is an element (1) and an img, input[type=image], or area element, return its alt text
  3763.         text = el.getAttribute('shared-tooltip-text', 1) || el.getAttribute('alt') || '';
  3764.         break;
  3765.       case 'area':
  3766.         // If node is an element (1) and an img, input[type=image], or area element, return its alt text
  3767.         text = el.getAttribute('alt') || '';
  3768.         break;
  3769.       case 'input':
  3770.         // If node is an element (1) and an img, input[type=image], or area element, return its alt text
  3771.         if (
  3772.           (el.getAttribute('type') && el.getAttribute('type').toLowerCase() == 'image')
  3773.         ) {
  3774.           text = el.getAttribute('alt') || '';
  3775.           break;
  3776.         }
  3777.       default:
  3778.         // Traverse children unless this is a script or style element
  3779.         if ((el.nodeType === 1)) {
  3780.           let node = el.__shady_native_firstChild || el.firstChild;
  3781.           for (; node; node = node.__shady_native_nextSibling || node.nextSibling) {
  3782.             text += getElementText(node);
  3783.           }
  3784.         }
  3785.     }
  3786.     return text;
  3787.   };
  3788.  
  3789.   const solidBuildAt = (sb, x)=>{
  3790.  
  3791.     const qItem = sb[x];
  3792.     const wKey = qItem ? firstObjectKey(qItem) : null;
  3793.     const wItem = wKey ? qItem[wKey] : null;
  3794.     const item = wItem;
  3795.  
  3796.     return item;
  3797.     
  3798.   }
  3799.  
  3800.   whenCEDefined('yt-live-chat-item-list-renderer').then(() => {
  3801.     let dummy;
  3802.     let cProto;
  3803.     dummy = document.createElement('yt-live-chat-item-list-renderer');
  3804.     if (!(dummy instanceof Element)) return;
  3805.     cProto = insp(dummy).constructor.prototype;
  3806.     cProto.connectedCallback882 = cProto.connectedCallback;
  3807.  
  3808.     // share same objects
  3809.  
  3810.     /** @type {HTMLElement} */
  3811.     let wliveChatTextMessageRenderer = null;
  3812.     /** @type {HTMLElement} */
  3813.     let wliveChatTextInputRenderer = null;
  3814.  
  3815.     // ....
  3816.  
  3817.     /** @type {HTMLElement} */
  3818.     let messageList;
  3819.     /** @type {IntersectionObserver} */
  3820.     let ioMessageList = null;
  3821.     /** @type {HTMLElement} */
  3822.     let _messageOverflowAnchor = null;
  3823.     /** @type {HTMLElement} */
  3824.     let _bstMain = null;
  3825.     const wAttachRoot = new WeakMap();
  3826.     let _flushed = 0;
  3827.     // let bstMainScrollCount = 0;
  3828.  
  3829.     const ioMessageListCallback = (entries) => { // performance concern? (6.1ms)
  3830.       for (const entry of entries) { // performance concern? (1.1ms)
  3831.         const target = entry?.target;
  3832.         const mutable = target ? mutableWM.get(target) : null;
  3833.         const interceptionRatioChange = mutable?.interceptionRatioChange || 0;
  3834.         if (typeof interceptionRatioChange === 'function') {
  3835.           if (entry.rootBounds && (entry.rootBounds.height > 1 && entry.rootBounds.width > 1)) { // performance concern? (2.2ms)
  3836.  
  3837.             interceptionRatioChange(entry.intersectionRatio);
  3838.           }
  3839.         }
  3840.       }
  3841.     };
  3842.  
  3843.     const ioMessageListCleanup = () => {
  3844.       if (ioMessageList) {
  3845.         ioMessageList.disconnect();
  3846.         ioMessageList.takeRecords();
  3847.         ioMessageList = null;
  3848.       }
  3849.     }
  3850.  
  3851.     const addMessageOverflowAnchorToShadow = function (attachRoot) {
  3852.  
  3853.       const messageOverflowAnchor = document.createElement('div');
  3854.       messageOverflowAnchor.className = 'bst-overflow-anchor';
  3855.       attachRoot.appendChild(messageOverflowAnchor);
  3856.  
  3857.       let anchorVisible = false;
  3858.  
  3859.       const iooa = new IntersectionObserver((entries) => {
  3860.         if (_flushed) { // avoid initial check (not yet flushed)
  3861.           anchorVisible = entries[entries.length - 1].isIntersecting === true;
  3862.         }
  3863.         Promise.resolve().then(() => {
  3864.           if (!anchorVisible) {
  3865.             if (bottomKeepAt() + 80 > Date.now()) {
  3866.               this.scrollToBottom_();
  3867.             } else {
  3868.               this.setAtBottomFalse();
  3869.             }
  3870.           } else if (!hasAnySelection()) {
  3871.             this.setAtBottomTrue();
  3872.           }
  3873.         });
  3874.       }, { root: null, threshold: [0.05, 0.95], rootMargin: '0px' });
  3875.       iooa.observe(messageOverflowAnchor);
  3876.  
  3877.       _messageOverflowAnchor = messageOverflowAnchor;
  3878.     }
  3879.  
  3880.     if (!cProto.canScrollToBottom581_ && typeof cProto.canScrollToBottom_ === 'function' && cProto.canScrollToBottom_.length === 0) {
  3881.  
  3882.  
  3883.       cProto.pointerHolding581 = false;
  3884.  
  3885.       cProto.canScrollToBottom581_ = cProto.canScrollToBottom_;
  3886.  
  3887.       cProto.canScrollToBottom_ = function () {
  3888.         return this.canScrollToBottom581_() && !this.pointerHolding581;
  3889.       }
  3890.  
  3891.     }
  3892.  
  3893.     cProto.computeIsEmpty_ = function () {
  3894.       mme = this;
  3895.       return !(this.visibleItems?.length || 0);
  3896.     }
  3897.     // cProto._flag0281_ = _flag0281_;
  3898.  
  3899.     const resetSelection = () => {
  3900.       if (profileCard.wElement) {
  3901.         Object.assign(W(profileCard), {
  3902.           wElement: null,
  3903.           top: -1,
  3904.           showOnTop: null,
  3905.           iconUrl: null,
  3906.           username: null,
  3907.           profileUrl: null,
  3908.         });
  3909.       }
  3910.       if (menuRenderObj.messageUid) {
  3911.         Object.assign(W(menuRenderObj), {
  3912.           menuListXp: '',
  3913.           messageUid: '',
  3914.           loading: false,
  3915.         });
  3916.       }
  3917.       if (entryHolding()) {
  3918.         entryHoldingChange('');
  3919.       }
  3920.     }
  3921.  
  3922.     const hasAnySelection = () => {
  3923.       return !!(profileCard.wElement || menuRenderObj.messageUid || entryHolding());
  3924.     }
  3925.  
  3926.     cProto.setupBoostChat = function () {
  3927.       let targetElement = (this.$.items || this.$['item-offset']);
  3928.       if (!targetElement) return;
  3929.       // if(!this.visibleItems__) this.visibleItems__ = [];
  3930.       ioMessageListCleanup();
  3931.  
  3932.       // this.visibleItemsCount = 0;
  3933.       targetElement = targetElement.closest('#item-offset.yt-live-chat-item-list-renderer') || targetElement;
  3934.       const bstMain = document.createElement('div');
  3935.       const hostElement = this.hostElement;
  3936.  
  3937.       {
  3938.         const fragment = new DocumentFragment();
  3939.         const noscript = document.createElement('noscript');
  3940.         noscript.id = 'bst-noscript';
  3941.         appendChild.call(noscript, (wliveChatTextMessageRenderer || (wliveChatTextMessageRenderer = document.createElement('yt-live-chat-text-message-renderer'))));
  3942.         appendChild.call(noscript, (wliveChatTextInputRenderer || (wliveChatTextInputRenderer = document.createElement('yt-live-chat-text-input-field-renderer'))));
  3943.  
  3944.         const div0 = document.createElement('div');
  3945.         div0.id = 'bst-noscript-div';
  3946.         appendChild.call(noscript, div0);
  3947.         const shadowDiv0 = div0.attachShadow({ mode: "open" });
  3948.         shadowDiv0.appendChild(wliveChatTextMessageRenderer);
  3949.         shadowDiv0.appendChild(wliveChatTextInputRenderer);
  3950.  
  3951.         fragmentAppendChild.call(fragment, noscript);
  3952.         fragmentAppendChild.call(fragment, bstMain);
  3953.         const dummyItems = document.createElement('div');
  3954.         dummyItems.id = 'items';
  3955.         dummyItems.style.display = 'none';
  3956.  
  3957.         const dummyItemOffset = document.createElement('div');
  3958.         dummyItemOffset.id = 'item-offset';
  3959.         dummyItemOffset.style.display = 'none';
  3960.         appendChild.call(dummyItemOffset, dummyItems);
  3961.  
  3962.  
  3963.         fragmentAppendChild.call(fragment, dummyItemOffset);
  3964.  
  3965.         replaceWith.call(targetElement, fragment);
  3966.         sharedNoscript = noscript;
  3967.       }
  3968.  
  3969.       const shadowRoot = USE_SHADOWROOT ? bstMain.attachShadow({ mode: "open" }) : null;
  3970.       const attachRoot = (USE_SHADOWROOT ? shadowRoot : bstMain);
  3971.       const intersectionObserver = new IntersectionObserver(ioMessageListCallback, { root: bstMain, threshold: [0.05, 0.95] });
  3972.       wAttachRoot.set(hostElement, {
  3973.         shadowRoot,
  3974.         bstMain
  3975.       });
  3976.       bstMain.classList.add('bst-yt-main');
  3977.       bstMain.addEventListener('scroll', (a) => {
  3978.         // bstMainScrollCount++;
  3979.         this.onScrollItems_(a);
  3980.       }, false);
  3981.       {
  3982.         const mListenerQ27 = async () => {
  3983.           noFlushTP = true;
  3984.         }
  3985.         const mListenerQ28 = () => {
  3986.           noFlushTP = false;
  3987.           const p = mouseActionP;
  3988.           if (p) {
  3989.             mouseActionP = null;
  3990.             p.resolve();
  3991.           }
  3992.         };
  3993.  
  3994.         const mListenerQ29 = (evt) => {
  3995.           if (evt.target === bstMain) {
  3996.             noFlushTP = false;
  3997.             const p = mouseActionP;
  3998.             if (p) {
  3999.               mouseActionP = null;
  4000.               p.resolve();
  4001.             }
  4002.           }
  4003.         };
  4004.         bstMain.addEventListener('pointerdown', mListenerQ27, { passive: true, capture: true });
  4005.         bstMain.addEventListener('pointerup', mListenerQ28, { passive: true, capture: true });
  4006.         bstMain.addEventListener('pointercancel', mListenerQ28, { passive: true, capture: true });
  4007.         bstMain.addEventListener('pointerleave', mListenerQ29, { passive: true, capture: false });
  4008.         bstMain.addEventListener('pointerenter', mListenerQ29, { passive: true, capture: false });
  4009.         // bstMain.addEventListener('mouseenter', mListenerQ28, { passive: true, capture: true });
  4010.         // bstMain.addEventListener('mouseleave', mListenerQ28, { passive: true, capture: true });
  4011.  
  4012.         if (typeof ResizeObserver !== 'undefined') {
  4013.           const ro = new ResizeObserver(() => {
  4014.             const dt = bottomPauseAt();
  4015.             if (!dt || dt + 60 > 0) {
  4016.               bottomKeepAtSet(Date.now());
  4017.             }
  4018.           });
  4019.           ro.observe(bstMain);
  4020.         }
  4021.  
  4022.       }
  4023.       _bstMain = bstMain;
  4024.  
  4025.       document.head.appendChild(document.createElement('style')).textContent = `${cssTexts.outer}`;
  4026.  
  4027.       attachRoot.appendChild(document.createElement('style')).textContent = `${cssTexts.inner}`;
  4028.       messageList = document.createElement('div')
  4029.       messageList.className = 'bst-message-list';
  4030.       attachRoot.appendChild(messageList);
  4031.  
  4032.       messageList.getListRendererCnt = () => {
  4033.  
  4034.         let cnt = wliveChatTextMessageRenderer ? insp(wliveChatTextMessageRenderer) : null;
  4035.         while (cnt && cnt.is) {
  4036.           if (cnt.emojiManager) break;
  4037.           cnt = cnt.parentComponent;
  4038.           if (!cnt) break;
  4039.           cnt = insp(cnt);
  4040.         }
  4041.         return cnt;
  4042.       }
  4043.  
  4044.       messageList.getInputRendererCnt = () => {
  4045.         let cnt = wliveChatTextInputRenderer ? insp(wliveChatTextInputRenderer) : null;
  4046.         return cnt;
  4047.       }
  4048.  
  4049.  
  4050.       const [visibleCount, visibleCountChange] = createSignal();
  4051.  
  4052.  
  4053.       messageList.visibleCount = visibleCount;
  4054.  
  4055.  
  4056.       const solidBuild = new VisibleItemList();
  4057.  
  4058.  
  4059.       this.setupVisibleItemsList(solidBuild);
  4060.  
  4061.       messageList.solidBuild = solidBuild;
  4062.       createMemo((prev) => {
  4063.         const list = R(solidBuild);
  4064.         (list.length !== prev) && Promise.resolve().then(resetSelection);
  4065.         return list.length;
  4066.       }, 0);
  4067.  
  4068.       
  4069.  
  4070.       // createEffect(() => {
  4071.       //   solidBuild() && (ezPr !== null) && Promise.resolve([ezPr]).then(h => h[0].resolve());
  4072.       // });
  4073.  
  4074.       const isListEmpty = createMemo(() => R(solidBuild).length < 1);
  4075.       createEffect(() => {
  4076.         const cEmpty = isListEmpty();
  4077.         const change = (cEmpty) ^ (!!this.isEmpty);
  4078.         if (change) {
  4079.           this._setPendingProperty('isEmpty', cEmpty, !0) && this._invalidateProperties()
  4080.         }
  4081.       });
  4082.  
  4083.  
  4084.  
  4085.       messageList.profileCard = profileCard;
  4086.       render(SolidMessageList.bind(null, solidBuild), messageList);
  4087.  
  4088.       addMessageOverflowAnchorToShadow.call(this, attachRoot);
  4089.  
  4090.       {
  4091.  
  4092.         let mouseEntered = null;
  4093.  
  4094.  
  4095.  
  4096.         messageList.addEventListener('mouseenter', function (evt) {
  4097.  
  4098.           const target = evt?.target; 
  4099.  
  4100.  
  4101.           if (mouseEntered) {
  4102.             tooltipTargetChange(null)
  4103.             mouseEntered = null;
  4104.           } 
  4105.           if ((target instanceof HTMLImageElement) || (target instanceof HTMLElement && target.nodeName === 'YT-ICON')) {
  4106.             if (target.hasAttribute('shared-tooltip-text')) {
  4107.               mouseEntered = target;
  4108.               tooltipTargetChange(mWeakRef(target)); 
  4109.               evt.stopPropagation();
  4110.               evt.stopImmediatePropagation();
  4111.               return;
  4112.             }
  4113.           }
  4114.  
  4115.  
  4116.         }, true);
  4117.         messageList.addEventListener('mouseleave', function (evt) {
  4118.  
  4119.  
  4120.           const target = evt?.target;
  4121.  
  4122.           if (target === mouseEntered && mouseEntered) {
  4123.             mouseEntered = null;
  4124.  
  4125.             tooltipTargetChange(null);
  4126.  
  4127.  
  4128.             // console.log(12, evt.target.getAttribute('shared-tooltip-text'))
  4129.             evt.stopPropagation();
  4130.             evt.stopImmediatePropagation();
  4131.             return;
  4132.           }
  4133.  
  4134.         }, true);
  4135.  
  4136.       }
  4137.  
  4138.       const onNameFieldClick = (target, messageEntry, nameField) => {
  4139.         const data = mutableWM.get(messageEntry)?.getDataObj();
  4140.         if (!data) return;
  4141.  
  4142.         entryHoldingChange(messageEntry.getAttribute('message-uid') || '');
  4143.         // if (this.atBottom === true && this.allowScroll === true && this.contextMenuOpen === false) this.contextMenuOpen = true;
  4144.  
  4145.         let r1 = nameField.getBoundingClientRect();
  4146.         let fTop = r1.top - messageList.getBoundingClientRect().top;
  4147.         let fBottom = fTop + r1.height;
  4148.         Object.assign(W(profileCard), {
  4149.           wElement: mWeakRef(messageEntry),
  4150.           fTop,
  4151.           fBottom,
  4152.           showOnTop: messageEntry.getAttribute('view-pos') === 'down',
  4153.           iconUrl: data.getProfilePic(64, -1),
  4154.           username: data.bst('getUsername'),
  4155.           profileUrl: data.bst('authorAboutPage')
  4156.         });
  4157.  
  4158.         console.log('[yt-bst] onNameFieldClick', Object.assign({}, (data)));
  4159.  
  4160.       }
  4161.  
  4162.  
  4163.       let pointerDown = -1;
  4164.       let waitingToShowMenu = null;
  4165.       let waitingToCloseMenu = null;
  4166.       let qcz7 = 0;
  4167.  
  4168.       const dblClickMessage = async (messageEntry, target) => {
  4169.  
  4170.         const ct = Date.now();
  4171.         if (lastSingleClick + 180 > ct) return;
  4172.  
  4173.         resetSelection();
  4174.  
  4175.         const singleEmoji = target.closest('img.emoji');
  4176.         let text;
  4177.         if (singleEmoji) {
  4178.  
  4179.  
  4180.           text = getElementText(singleEmoji).trim();
  4181.         } else {
  4182.  
  4183.           const body = messageEntry.querySelector('.bst-message-body');
  4184.           text = body ? getElementText(body).trim() : '';
  4185.         }
  4186.         if (text) {
  4187.  
  4188.  
  4189.           const renderer = document
  4190.             .querySelector('yt-live-chat-text-input-field-renderer[class]');
  4191.           const input = renderer
  4192.             ?.querySelector('#input');
  4193.  
  4194.           if (input && !input.closest('[hidden]')) {
  4195.  
  4196.             await delayPn(40);
  4197.  
  4198.             const cnt = getLcRendererCnt();
  4199.             const isAtBottom = cnt ? cnt.atBottom && cnt.canScrollToBottom_() : null;
  4200.             if (isAtBottom) bottomKeepAtSet(Date.now());
  4201.  
  4202.             await input.focus();
  4203.  
  4204.             // await delayPn(1);
  4205.  
  4206.             insp(renderer).setText('');
  4207.             insp(renderer).onInputChange();
  4208.  
  4209.             // await delayPn(1);
  4210.  
  4211.             const textSplit = text.split(/(:+[^:]+:)/g);
  4212.             const data = new DataTransfer();
  4213.             for (const s of textSplit) {
  4214.               if (!s) continue;
  4215.               data.setData('text/plain', s);
  4216.               input.dispatchEvent(
  4217.                 new ClipboardEvent('paste', { bubbles: true, clipboardData: data })
  4218.               );
  4219.               insp(renderer).onInputChange();
  4220.             }
  4221.  
  4222.             const range = document.createRange();//Create a range (a range is a like the selection but invisible)
  4223.             range.selectNodeContents(input);//Select the entire contents of the element with the range
  4224.             range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
  4225.             const selection = window.getSelection();//get the selection object (allows you to change selection)
  4226.             selection.removeAllRanges();//remove any selections already made
  4227.             selection.addRange(range);//make the range you have just created the visible selection
  4228.  
  4229.             
  4230.             // if (isAtBottom) {
  4231.  
  4232.             //   const pcz = qcz7 = (qcz7 & 1073741823) + 1;
  4233.             //   flushPE(async () => {
  4234.             //     if (pcz !== qcz7) return;
  4235.             //     setTimeout(() => {
  4236.             //       if (pcz !== qcz7) return;
  4237.             //       const cnt = getLcRendererCnt();
  4238.             //       if (cnt && (!cnt.atBottom || !cnt.canScrollToBottom_())) cnt.scrollToBottom_();
  4239.             //     }, 80);
  4240.             //   });
  4241.             // }
  4242.             if (isAtBottom) bottomKeepAtSet(Date.now());
  4243.  
  4244.             setTimeout(() => {
  4245.               input.scrollTop += 1e9;
  4246.             }, 1);
  4247.  
  4248.           }
  4249.  
  4250.         }
  4251.  
  4252.  
  4253.       }
  4254.  
  4255.       messageList.addEventListener('dblclick', function (evt) {
  4256.  
  4257.  
  4258.         if (evt.button) return;
  4259.         const target = evt?.target;
  4260.  
  4261.  
  4262.         if (target instanceof Element) {
  4263.  
  4264.           const testElement = target.closest('.bst-message-entry, .bst-message-head, .bst-message-profile-holder, .bst-message-menu-container');
  4265.  
  4266.  
  4267.           if (testElement?.classList?.contains('bst-message-entry')) {
  4268.  
  4269.             dblClickMessage(testElement, target);
  4270.  
  4271.           }
  4272.         }
  4273.  
  4274.  
  4275.       });
  4276.  
  4277.       messageList.addEventListener('pointerdown', function (evt) {
  4278.         if (evt.button || pointerDown >= 0) return;
  4279.         pointerDown = -1;
  4280.  
  4281.  
  4282.         dblClickDT = Date.now();
  4283.         promiseForDblclick && promiseForDblclick.resolve();
  4284.         if (promiseForDblclick) return;
  4285.  
  4286.         const lcrCnt = getLcRendererCnt();
  4287.         if (lcrCnt) {
  4288.           lcrCnt.pointerHolding581 = true;
  4289.         }
  4290.  
  4291.         const target = evt?.target;
  4292.         waitingToShowMenu = null;
  4293.         waitingToCloseMenu = null;
  4294.  
  4295.         if (target instanceof Element) {
  4296.  
  4297.           const messageEntry0 = target.closest('.bst-message-entry');
  4298.           const messageUid = messageEntry0 ? messageEntry0.getAttribute('message-uid') : '';
  4299.  
  4300.           if (messageUid && messageEntry0 && kRef(profileCard.wElement) !== messageEntry0) {
  4301.             profileCard_onCrossClick();
  4302.           }
  4303.  
  4304.  
  4305.           // console.log(389588, 1, messageUid);
  4306.           if (messageUid) {
  4307.  
  4308.  
  4309.               const testElement = target.closest('.bst-message-entry, .bst-message-head, .bst-message-profile-holder, .bst-message-menu-container');
  4310.               if (testElement?.classList?.contains('bst-message-menu-container')) {
  4311.                 menuMenuCache.delete(messageUid); // menu action will change menu items
  4312.               } else if (menuRenderObj.messageUid !== messageUid && testElement && testElement === messageEntry0) {
  4313.   
  4314.                 const shouldShowMenuAction = isCtrl(evt) || isAlt(evt);
  4315.  
  4316.                 if (shouldShowMenuAction) {
  4317.                   if (entryHolding() !== messageUid) entryHoldingChange(messageUid ? messageUid : '');
  4318.  
  4319.                   if (menuRenderObj.messageUid) {
  4320.  
  4321.                     Object.assign(W(menuRenderObj),{
  4322.                       menuListXp: '',
  4323.                       messageUid: '',
  4324.                       loading: false,
  4325.                     });
  4326.  
  4327.                   }
  4328.  
  4329.                   waitingToShowMenu = { pageX0: evt.pageX, pageY0: evt.pageY };
  4330.                   preShowMenu(messageEntry0);
  4331.                 } else {
  4332.                   if (entryHolding()) entryHoldingChange('');
  4333.  
  4334.  
  4335.                   if (menuRenderObj.messageUid) {
  4336.  
  4337.                     Object.assign(W(menuRenderObj),{
  4338.                       menuListXp: '',
  4339.                       messageUid: '',
  4340.                       loading: false,
  4341.                     });
  4342.  
  4343.                   }
  4344.  
  4345.                 }
  4346.   
  4347.               } else if (menuRenderObj.messageUid && testElement && testElement !== messageEntry0) {
  4348.   
  4349.   
  4350.   
  4351.                 // console.log(389588, 3, messageUid);
  4352.                 // if (entryHolding() !== messageUid) entryHoldingChange(messageUid ? messageUid : '');
  4353.   
  4354.                 if (menuRenderObj.messageUid) {
  4355.                   Object.assign(W(menuRenderObj),{
  4356.                     menuListXp: '',
  4357.                     messageUid: '',
  4358.                     loading: false,
  4359.                   });
  4360.   
  4361.                 }
  4362.                 entryHoldingChange('');
  4363.   
  4364.   
  4365.               } else if (menuRenderObj.messageUid && target.closest('.bst-message-entry, .bst-message-menu-container')?.classList?.contains('bst-message-entry')) {
  4366.   
  4367.                 // console.log(389588, 4, messageUid);
  4368.                 waitingToCloseMenu = { pageX0: evt.pageX, pageY0: evt.pageY };
  4369.   
  4370.   
  4371.   
  4372.               } else if (entryHolding() !== messageUid) {
  4373.   
  4374.                 // console.log(389588, 5, messageUid);
  4375.                 // if(entryHolding()!==messageUid) entryHoldingChange(messageUid ? messageUid : '');
  4376.   
  4377.                 if (menuRenderObj.messageUid) {
  4378.                   Object.assign(W(menuRenderObj),{
  4379.                     menuListXp: '',
  4380.                     messageUid: '',
  4381.                     loading: false,
  4382.                   });
  4383.                 }
  4384.   
  4385.                 entryHoldingChange('');
  4386.   
  4387.   
  4388.               } else {
  4389.   
  4390.                 // console.log(389588, 6, messageUid);
  4391.                 entryHoldingChange('');
  4392.               }
  4393.  
  4394.              
  4395.  
  4396.  
  4397.           } else if (entryHolding()) {
  4398.  
  4399.             // console.log(389588, 7, messageUid);
  4400.             if (entryHolding() !== messageUid) entryHoldingChange(messageUid ? messageUid : '');
  4401.  
  4402.             if (menuRenderObj.messageUid) {
  4403.  
  4404.               Object.assign(W(menuRenderObj),{
  4405.                 menuListXp: '',
  4406.                 messageUid: '',
  4407.                 loading: false,
  4408.               });
  4409.             }
  4410.  
  4411.           }
  4412.  
  4413.         }
  4414.  
  4415.  
  4416.       });
  4417.  
  4418.  
  4419.  
  4420.       messageList.addEventListener('pointerup', function (evt) {
  4421.  
  4422.  
  4423.         if (pointerDown >= 0) return;
  4424.  
  4425.         pointerDown = -1;
  4426.  
  4427.         const lcrCnt = getLcRendererCnt();
  4428.         if (lcrCnt && !`${window.getSelection()}`) {
  4429.           lcrCnt.pointerHolding581 = false;
  4430.         }
  4431.  
  4432.  
  4433.  
  4434.       });
  4435.  
  4436.  
  4437.       messageList.addEventListener('pointercancel', function (evt) {
  4438.  
  4439.  
  4440.         if (pointerDown >= 0) return;
  4441.  
  4442.         pointerDown = -1;
  4443.  
  4444.  
  4445.  
  4446.       });
  4447.  
  4448.       const distance = (x, y) => Math.sqrt(x * x + y * y);
  4449.  
  4450.       let promiseForDblclick = null;
  4451.       let dblClickDT = 0;
  4452.       let lastSingleClick = 0;
  4453.  
  4454.       messageList.addEventListener('click', async function (evt) {
  4455.  
  4456.  
  4457.         const waitingToShowMenu_ = waitingToShowMenu;
  4458.         waitingToShowMenu = null;
  4459.  
  4460.         const waitingToCloseMenu_ = waitingToCloseMenu;
  4461.         waitingToCloseMenu = null;
  4462.  
  4463.  
  4464.         dblClickDT = 0;
  4465.         promiseForDblclick = new PromiseExternal();
  4466.         await Promise.race([promiseForDblclick, delayPn(140)]);
  4467.         promiseForDblclick = null;
  4468.         const ct = Date.now();
  4469.         if (dblClickDT + 180 > ct) return;
  4470.         lastSingleClick = ct;
  4471.  
  4472.         const currentProfileCardElement = kRef(profileCard.wElement);
  4473.  
  4474.         let b = false;
  4475.         const target = evt?.target;
  4476.         if (target instanceof Element) {
  4477.           const messageEntry = target.closest('.bst-message-entry');
  4478.           if (messageEntry) {
  4479.             const nameField = target.closest('.bst-name-field');
  4480.             if (nameField) {
  4481.               onNameFieldClick(target, messageEntry, nameField);
  4482.               b = true;
  4483.             }
  4484.           }
  4485.         }
  4486.  
  4487.         if (!b && currentProfileCardElement && !target.closest('.bst-profile-card')) {
  4488.           profileCard_onCrossClick();
  4489.         }
  4490.  
  4491.         if (waitingToShowMenu_ && target instanceof Element) {
  4492.           const { pageX0, pageY0 } = waitingToShowMenu_;
  4493.           const { pageX, pageY } = evt;
  4494.  
  4495.           const d = distance(pageX - pageX0, pageY - pageY0);
  4496.  
  4497.           const messageEntry0 = target.closest('.bst-message-entry');
  4498.           const messageUid = messageEntry0 ? messageEntry0.getAttribute('message-uid') : '';
  4499.           if (d < 4 && messageUid) {
  4500.  
  4501.             const elementRect = messageEntry0.getBoundingClientRect();
  4502.  
  4503.             if (pageX >= elementRect.left && pageX <= elementRect.right && pageY >= elementRect.top && pageY <= elementRect.bottom) {
  4504.  
  4505.               showMenu(messageEntry0);
  4506.             } else if (menuRenderObj.messageUid) {
  4507.  
  4508.               Object.assign(W(menuRenderObj),{
  4509.                 menuListXp: '',
  4510.                 messageUid: '',
  4511.                 loading: false,
  4512.               });
  4513.  
  4514.               entryHoldingChange('');
  4515.             }
  4516.           } else {
  4517.  
  4518.             if (entryHolding() !== messageUid) entryHoldingChange(messageUid ? messageUid : '');
  4519.             if (menuRenderObj.messageUid) {
  4520.  
  4521.               Object.assign(W(menuRenderObj),{
  4522.                 menuListXp: '',
  4523.                 messageUid: '',
  4524.                 loading: false,
  4525.               });
  4526.  
  4527.               entryHoldingChange('');
  4528.             }
  4529.  
  4530.           }
  4531.  
  4532.         }
  4533.  
  4534.         if (waitingToCloseMenu_ && target instanceof Element) {
  4535.  
  4536.           const messageEntry0 = target.closest('.bst-message-entry');
  4537.           const messageUid = messageEntry0 ? messageEntry0.getAttribute('message-uid') : '';
  4538.  
  4539.  
  4540.           if (messageUid) {
  4541.  
  4542.             const testElement = target.closest('.bst-message-entry, .bst-message-head, .bst-message-profile-holder');
  4543.             if (menuRenderObj.messageUid !== messageUid && testElement && testElement === messageEntry0) {
  4544.  
  4545.             } else if (menuRenderObj.messageUid && testElement && testElement !== messageEntry0) {
  4546.  
  4547.             } else if (menuRenderObj.messageUid && target.closest('.bst-message-entry, .bst-message-menu-container')?.classList?.contains('bst-message-entry')) {
  4548.  
  4549.  
  4550.               const { pageX0, pageY0 } = waitingToCloseMenu_;
  4551.               const { pageX, pageY } = evt;
  4552.  
  4553.               const d = distance(pageX - pageX0, pageY - pageY0);
  4554.  
  4555.  
  4556.               if (d < 4) {
  4557.  
  4558.                 // if (entryHolding() !== messageUid) entryHoldingChange(messageUid ? messageUid : '');
  4559.                 Object.assign(W(menuRenderObj),{
  4560.                   menuListXp: '',
  4561.                   messageUid: '',
  4562.                   loading: false,
  4563.                 });
  4564.                 entryHoldingChange('');
  4565.  
  4566.               }
  4567.             }
  4568.  
  4569.           }
  4570.         }
  4571.  
  4572.  
  4573.       });
  4574.  
  4575.       {
  4576.         const attributeFn = () => {
  4577.           if (!messageList) return;
  4578.           const isDark = document.documentElement.hasAttribute('dark')
  4579.           if (isDark) _setAttribute.call(messageList, 'dark', '');
  4580.           else _removeAttribute.call(messageList, 'dark');
  4581.         };
  4582.         (new MutationObserver(attributeFn)).observe(document.documentElement, { attributes: true });
  4583.         attributeFn();
  4584.       }
  4585.  
  4586.  
  4587.       // yt-live-chat-item-list-renderer
  4588.       // const lcrAttributeFn = () => {
  4589.       //   // if (!messageList) return;
  4590.       //   // let isDark = document.documentElement.hasAttribute('dark')
  4591.       //   // if (isDark) _setAttribute.call(messageList, 'dark', '');
  4592.       //   // else _removeAttribute.call(messageList, 'dark');
  4593.       // };
  4594.       // (new MutationObserver(lcrAttributeFn)).observe(this.hostElement, { attributes: true });
  4595.       // lcrAttributeFn();
  4596.  
  4597.       ioMessageList = intersectionObserver;
  4598.  
  4599.       createEffect(() => {
  4600.         const list = R(solidBuild);
  4601.         let j = 0;
  4602.         for (let i = 0; i < list.length; i++) {
  4603.           const listItem =solidBuildAt(list, i);
  4604.           const mutable = mutableWM.get(listItem);
  4605.           if (typeof mutable?.viewVisible === 'function' && typeof mutable?.viewVisibleIdxChange === 'function') {
  4606.             if (mutable?.viewVisible()) {
  4607.               j++;
  4608.               mutable?.viewVisibleIdxChange(j);
  4609.             } else {
  4610.               mutable?.viewVisibleIdxChange(null);
  4611.             }
  4612.           }
  4613.         }
  4614.         visibleCountChange(j);
  4615.       });
  4616.  
  4617.  
  4618.       Promise.resolve().then(() => {
  4619.         
  4620.         let qcz4 = 0;
  4621.         document.addEventListener('keydown', (evt) => {
  4622.           const target = (evt?.target || 0);
  4623.           if (target instanceof HTMLElement && target.id === 'input') {
  4624.             const cnt = getLcRendererCnt();
  4625.             const isAtBottom = cnt ? cnt.atBottom && cnt.canScrollToBottom_() : null;
  4626.             target.__ah46n__ = isAtBottom;
  4627.           }
  4628.         });
  4629.         document.addEventListener('keyup', (evt) => {
  4630.           const target = (evt?.target || 0);
  4631.           const isAtBottom__ = target.__ah46n__;
  4632.           if (isAtBottom__) {
  4633.             target.__ah46n__ = null;
  4634.             const pcz = ++qcz4;
  4635.             flushPE(()=>{
  4636.               if(pcz !== qcz4) return;
  4637.               setTimeout(() => {
  4638.                 if(pcz !== qcz4) return;
  4639.                 const cnt = getLcRendererCnt();
  4640.                 if (!cnt) return;
  4641.                 if (cnt.atBottom && cnt.canScrollToBottom_()) {
  4642.                 } else {
  4643.                   cnt.scrollToBottom_();
  4644.                 }
  4645.               }, 80);
  4646.             })
  4647.           }
  4648.         });
  4649.  
  4650.  
  4651.       });
  4652.  
  4653.     }
  4654.  
  4655.     // const
  4656.     // shadow.appendChild(document.createElement('div')).className = 'bst-message-entry';
  4657.  
  4658.  
  4659.  
  4660.  
  4661.  
  4662.     function getAuthor(o) {
  4663.       if (MEMO(o, 'rendererFlag')() === 1) {
  4664.         return o?.header?.liveChatSponsorshipsHeaderRenderer;
  4665.       }
  4666.       return o;
  4667.     }
  4668.  
  4669.     function getAuthorBadgeType(authorBadges) {
  4670.       if (!authorBadges || !(authorBadges.length >= 1)) return ''; // performance concern? (1.8ms)
  4671.       for (const badge of authorBadges) {
  4672.         const r = badge ? badge.liveChatAuthorBadgeRenderer : null;
  4673.         if (r) {
  4674.           const b = r ? r.icon ? r.icon.iconType.toLowerCase() : r.customThumbnail ? "member" : "" : ""
  4675.           if (b && "verified" !== b) {
  4676.             return b;
  4677.           }
  4678.         }
  4679.       }
  4680.       return '';
  4681.     }
  4682.  
  4683.  
  4684.     function getProfilePic(min, max) {
  4685.       let w = getAuthor(this)?.authorPhoto || 0;
  4686.       w = w.thumbnails || w;
  4687.       if (w) {
  4688.  
  4689.         if (w.url) return w.url;
  4690.         if (typeof w === 'string') return w;
  4691.         if (w.length >= 0) {
  4692.           const url = getThumbnail(w, min, max);
  4693.           if (url) return url;
  4694.         }
  4695.       }
  4696.       return null;
  4697.     }
  4698.  
  4699.     function getStickerURL(min, max) {
  4700.       let w = this.sticker || 0;
  4701.       w = w.thumbnails || w;
  4702.       if (w) {
  4703.  
  4704.         if (w.url) return w.url;
  4705.         if (typeof w === 'string') return w;
  4706.         if (w.length >= 0) {
  4707.           const url = getThumbnail(w, min, max);
  4708.           if (url) return url;
  4709.         }
  4710.       }
  4711.       return null;
  4712.     }
  4713.  
  4714.     fixMessages = (messages) => {
  4715.  
  4716.       const cnt = messageList?.getInputRendererCnt() || null;
  4717.       if (!cnt) return messages;
  4718.  
  4719.       let res = [];
  4720.  
  4721.       for (const message of messages) {
  4722.         if (typeof message.text === 'string') {
  4723.           let r;
  4724.           try {
  4725.             r = fixMessagesForEmoji.call(cnt.emojiManager, message.text)
  4726.           } catch (e) {
  4727.             console.warn(e)
  4728.           }
  4729.           if (r && r.length === 1 && r[0].text) {
  4730.             res.push(message); // eg. hyperlink
  4731.           } else if (r && r.length >= 1) {
  4732.             // res.push(...r);
  4733.             inPlaceArrayPush(res, r);
  4734.           } else {
  4735.             res.push(message);
  4736.           }
  4737.  
  4738.           // console.log(199, r)
  4739.  
  4740.           /*
  4741.           ((a,b,c,d)=>{
  4742.             let Wkb = /tone[1-5]/
  4743.             , Xkb = " \uD83C\uDFFB \uD83C\uDFFC \uD83C\uDFFD \uD83C\uDFFE \uD83C\uDFFF".split(" ")
  4744.             , Ykb = "UCzC5CNksIBaiT-NdMJjJNOQ/COLRg9qOwdQCFce-qgodrbsLaA UCzC5CNksIBaiT-NdMJjJNOQ/CMKC7uKOwdQCFce-qgodqbsLaA UCzC5CNksIBaiT-NdMJjJNOQ/CJiQ8uiOwdQCFcx9qgodysAOHg UCzC5CNksIBaiT-NdMJjJNOQ/CI3h3uDJitgCFdARTgodejsFWg UCzC5CNksIBaiT-NdMJjJNOQ/CI69oYTKitgCFdaPTgodsHsP5g UCzC5CNksIBaiT-NdMJjJNOQ/CKzQr47KitgCFdCITgodq6EJZg UCzC5CNksIBaiT-NdMJjJNOQ/CPGD8Iu8kN4CFREChAod9OkLmg".split(" ")
  4745.             , Zkb = Number.MAX_SAFE_INTEGER
  4746.             , $kb = RegExp("\uFE0F", "g")
  4747.  
  4748.             let b = false;
  4749.             let c= true;
  4750.             let d = false;
  4751.             a = a.replace($kb, "");
  4752.             for (var e = document.createDocumentFragment(), g = 0, k, m = 0; null != (k = this.emojiRegex.exec(a)); ) {
  4753.                 var p = dQ(this, k[0]) || gQ(this, k[0]);
  4754.                 !p || p.isCustomEmoji && !b || (p = this.createEmoji(p, c),
  4755.                 g !== k.index && e.appendChild(document.createTextNode(a.substring(g, k.index))),
  4756.                 e.appendChild(p),
  4757.                 g = k.index + k[0].length,
  4758.                 m++)
  4759.             }
  4760.             if (!d || m)
  4761.                 return e.appendChild(document.createTextNode(a.substr(g))),
  4762.                 e
  4763.  
  4764.  
  4765.           })(message.text)
  4766.           */
  4767.         } else {
  4768.           res.push(message);
  4769.         }
  4770.       }
  4771.  
  4772.       /*
  4773.  
  4774.  
  4775.     cQ.prototype.createDocumentFragment = function(a, b, c, d) {
  4776.         b = void 0 === b ? !1 : b;
  4777.         c = void 0 === c ? !0 : c;
  4778.         d = void 0 === d ? !1 : d;
  4779.         a = a.replace($kb, "");
  4780.         for (var e = document.createDocumentFragment(), g = 0, k, m = 0; null != (k = this.emojiRegex.exec(a)); ) {
  4781.             var p = dQ(this, k[0]) || gQ(this, k[0]);
  4782.             !p || p.isCustomEmoji && !b || (p = this.createEmoji(p, c),
  4783.             g !== k.index && e.appendChild(document.createTextNode(a.substring(g, k.index))),
  4784.             e.appendChild(p),
  4785.             g = k.index + k[0].length,
  4786.             m++)
  4787.         }
  4788.         if (!d || m)
  4789.             return e.appendChild(document.createTextNode(a.substr(g))),
  4790.             e
  4791.     }
  4792.  
  4793.     */
  4794.  
  4795.       return res;
  4796.  
  4797.  
  4798.     }
  4799.  
  4800.  
  4801.     function bst(prop) {
  4802.  
  4803.       if (prop === 'getUsername') {
  4804.         
  4805.         return MEMO(this, 'authorName')();
  4806.       } else if (prop === 'hasMessageBody') {
  4807.  
  4808.         const message = MEMO(this, 'rendererFlag')() === 1 ? this.header?.liveChatSponsorshipsHeaderRenderer?.primaryText : this.message;
  4809.         if (typeof (message || 0) !== 'object') return false;
  4810.         if (message.simpleText) return true;
  4811.  
  4812.         const runs = message.runs;
  4813.         return runs && runs.length && runs[0];
  4814.  
  4815.       } else if(prop === 'messageXM'){
  4816.  
  4817.         return MEMO(this, 'messageXM');
  4818.       
  4819.       } else if (prop === 'authorBadges') {
  4820.  
  4821.  
  4822.         const badges = getAuthor(this)?.authorBadges;
  4823.         if (typeof (badges || 0) !== 'object') return null; // performance concern? (31.1ms)
  4824.         return badges;
  4825.  
  4826.       } else if (prop === 'authorType') {
  4827.  
  4828.         return  getAuthorBadgeType(this.authorBadges);
  4829.       } else if (prop === 'shouldHighlight') {
  4830.         const authorType = this.bst('authorType');
  4831.         return authorType === 'owner';
  4832.       } else if (prop === 'timestampText') {
  4833.         if (this.timestampText) return convertYTtext(this.timestampText);
  4834.         const ts = +this.timestampUsec / 1000;
  4835.         if (ts > 1107183600000) {
  4836.           const now = Date.now();
  4837.           if (ts < (now + 120000)) {
  4838.             return new Date(ts).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); // performance concern? (1.4ms)
  4839.           }
  4840.         }
  4841.         return null;
  4842.       } else if (prop === 'authorExternalChannelId') {
  4843.         return this.authorExternalChannelId;
  4844.       } else if (prop === 'authorAboutPage') {
  4845.         return `https://www.youtube.com/channel/${this.authorExternalChannelId}/about`;
  4846.       }
  4847.  
  4848.  
  4849.     }
  4850.  
  4851.  
  4852.     cProto.setAtBottomTrue = function () {
  4853.  
  4854.  
  4855.       if (this.atBottom === false) {
  4856.         resetSelection();
  4857.         this.atBottom = true;
  4858.         atBottom0Set(true);
  4859.         bottomPauseAtSet(0);
  4860.         if (this.activeItems_.length > 0) this.flushActiveItems_();
  4861.       }
  4862.  
  4863.     }
  4864.  
  4865.     cProto.setAtBottomFalse = function () {
  4866.  
  4867.       if (this.atBottom === true) {
  4868.         this.atBottom = false;
  4869.         atBottom0Set(false);
  4870.         bottomPauseAtSet(Date.now());
  4871.       }
  4872.  
  4873.     }
  4874.  
  4875.     cProto.__notRequired__ = (cProto.__notRequired__ || 0) | 256;
  4876.     cProto.setAtBottom = (...args) => {
  4877.  
  4878.       console.log('[yt-bst] setAtBottom', 583, ...args)
  4879.  
  4880.     }
  4881.  
  4882.     const scrollToEnd = () => {
  4883.       if (messageList && _messageOverflowAnchor && _bstMain) {
  4884.         _bstMain.scrollTop = _messageOverflowAnchor.offsetTop + 5;
  4885.       }
  4886.     }
  4887.  
  4888.     cProto.atBottomChanged_ = function (a) {
  4889.  
  4890.       // var b = this;
  4891.       // a ? this.hideShowMoreAsync_ || (this.hideShowMoreAsync_ = kw(function() {
  4892.       //     O(b.hostElement).querySelector("#show-more").style.visibility = "hidden"
  4893.       // }, 200)) : (this.hideShowMoreAsync_ && lw(this.hideShowMoreAsync_),
  4894.       // this.hideShowMoreAsync_ = null,
  4895.       // O(this.hostElement).querySelector("#show-more").style.visibility = "visible")
  4896.  
  4897.       // console.log('atBottomChanged_')
  4898.  
  4899.     }
  4900.  
  4901.     cProto.smoothScroll_ = function () {
  4902.  
  4903.     }
  4904.  
  4905.     cProto.resetSmoothScroll_ = function () {
  4906.       this.scrollTimeRemainingMs_ = this.scrollPixelsRemaining_ = 0;
  4907.       this.lastSmoothScrollUpdate_ = null;
  4908.       this.smoothScrollRafHandle_ && window.cancelAnimationFrame(this.smoothScrollRafHandle_);
  4909.       this.smoothScrollRafHandle_ = null;
  4910.  
  4911.     }
  4912.  
  4913.     cProto.isSmoothScrollEnabled_ = function () {
  4914.       return false;
  4915.     }
  4916.  
  4917.  
  4918.     cProto.maybeAddDockableMessage17_ = cProto.maybeAddDockableMessage_;
  4919.     cProto.maybeAddDockableMessage_ = function (a) {
  4920.       console.log('[yt-bst] maybeAddDockableMessage_', 791, a)
  4921.       return this.maybeAddDockableMessage17_(a)
  4922.     }
  4923.  
  4924.     cProto.forEachItem_ = function (a) {
  4925.       // mme = this
  4926.       let status = 0;
  4927.       let i;
  4928.       try {
  4929.         status = 1;
  4930.         i = 0;
  4931.         for (const t of this.visibleItems) { // performance concern? (2.1ms)
  4932.           a.call(this, "visibleItems", t, i++) // performance concern? (12.8ms)
  4933.         }
  4934.         status = 2;
  4935.         i = 0;
  4936.         for (const t of this.activeItems_) {
  4937.           a.call(this, "activeItems_", t, i++);
  4938.         }
  4939.         status = 3;
  4940.       } catch (e) {
  4941.         console.error('[yt-bst] forEachItem_', status, i, this.visibleItems.length, this.activeItems_.length)
  4942.         console.error(e)
  4943.       }
  4944.     }
  4945.  
  4946.     cProto.computeVisibleItems17 = cProto.computeVisibleItems;
  4947.     cProto.computeVisibleItems = function (a, b) {
  4948.  
  4949.       console.log('[yt-bst] computeVisibleItems', 791, a, b)
  4950.       // if(!this.visibleItems__) this.visibleItems__ = [];
  4951.       // return this.visibleItems__;
  4952.       return this.computeVisibleItems17(a, b);
  4953.  
  4954.     }
  4955.  
  4956.     const replaceObject = (dist, src) => {
  4957.       const flushItem = dist;
  4958.       if (flushItem) {
  4959.         for (const k of Object.keys(flushItem)) {
  4960.           flushItem[k] = undefined
  4961.         }
  4962.         Object.assign(flushItem, src);
  4963.         return true;
  4964.       }
  4965.       return false;
  4966.     }
  4967.     function prettyPrint(obj, indent = 2) {
  4968.       const cache = new Set();
  4969.  
  4970.       function stringify(obj, level = 0) {
  4971.         const indentStr = ' '.repeat(level * indent);
  4972.         const nextIndentStr = ' '.repeat((level + 1) * indent);
  4973.  
  4974.         if (obj === null) return 'null';
  4975.         if (typeof obj === 'undefined') return 'undefined';
  4976.         if (typeof obj === 'string') return `"${obj}"`;
  4977.         if (typeof obj === 'number' || typeof obj === 'boolean') return String(obj);
  4978.         if (typeof obj === 'function') return '[[ Function ]]';
  4979.         if (typeof obj !== 'object') return String(obj);
  4980.  
  4981.         if (cache.has(obj)) {
  4982.           return '[Circular]';
  4983.         }
  4984.  
  4985.         if (obj instanceof Node) {
  4986.           return `[[ ${obj.constructor.name} ]]`;
  4987.         }
  4988.  
  4989.  
  4990.         cache.add(obj);
  4991.         const entries = Object.entries(obj);
  4992.  
  4993.         if (Array.isArray(obj)) {
  4994.           const items = entries.map(([key, value]) => {
  4995.             return `${nextIndentStr}${stringify(value, level + 1)}`;
  4996.           }).join(',\n');
  4997.           return `[\n${items}\n${indentStr}]`;
  4998.         } else {
  4999.           const items = entries.map(([key, value]) => {
  5000.             return `${nextIndentStr}${key}: ${stringify(value, level + 1)}`;
  5001.           }).join(',\n');
  5002.           return `{\n${items}\n${indentStr}}`;
  5003.         }
  5004.       }
  5005.  
  5006.       return stringify(obj);
  5007.     }
  5008.  
  5009.     cProto.handleAddChatItemAction_ = function (a) {
  5010.       let c = a.item
  5011.         , fk = (firstObjectKey(c) || '');
  5012.       let e = c[fk]
  5013.         , replaceExistingItem = false;
  5014.  
  5015.       if (a && e && a.clientId && !e.__clientId__) e.__clientId__ = a.clientId;
  5016.       if (a && e && a.clientMessageId && !e.__clientMessageId__) e.__clientMessageId__ = a.clientMessageId;
  5017.  
  5018.       // to be reviewed for performance issue // TODO
  5019.       const aClientId = a.clientId || ''; // for user client request
  5020.       const eId = e.id || ''; // for network content update
  5021.       const replacementTo = [];　// expected number of entries - less than or equal to 1
  5022.  
  5023.       this.forEachItem_(function (tag, p, idx) {
  5024.         const aObjId = (p[fk] || 0).id || undefined;
  5025.         if (aObjId === aClientId || aObjId === eId) {
  5026.           replacementTo.push([tag, p, idx]);
  5027.         }
  5028.       });
  5029.  
  5030.  
  5031.       if (replacementTo.length > 0) {
  5032.  
  5033.         if (replacementTo.length > 1) {
  5034.           console.error('[yt-bst] replacementTo.length > 1', replacementTo.slice(0));
  5035.           // replacementTo.splice(0, replacementTo.length - 1);
  5036.         }
  5037.  
  5038.         for (const entry of replacementTo) {
  5039.           const [tag, p, idx] = entry;
  5040.           // const aObj = p[fk];
  5041.  
  5042.           if ("visibleItems" === tag) {
  5043.  
  5044.             const list = messageList.solidBuild;
  5045.             const bObj = solidBuildAt(list, idx);
  5046.             const dataMutable = (bObj ? mutableWM.get(bObj) : null) || 0;
  5047.  
  5048.             if (typeof dataMutable.bObjChange === 'function') {
  5049.               // console.log(' ===== pV ====')
  5050.               // console.dir(prettyPrint(p))
  5051.               // console.log(' ===== cV ====')
  5052.               // console.dir(prettyPrint(c))
  5053.               if (replaceObject(p, c)) {
  5054.                 dataMutable.bObjChange(e, fk);
  5055.                 replaceExistingItem = true; // to be added if not matched
  5056.                 // console.log('replaceObject(visibleItems)', p);
  5057.               }
  5058.             }
  5059.           } else { // activeItems_
  5060.             // console.log(' ===== pA ====')
  5061.             // console.dir(prettyPrint(p))
  5062.             // console.log(' ===== cA ====')
  5063.             // console.dir(prettyPrint(c))
  5064.             if (replaceObject(p, c)) {
  5065.               replaceExistingItem = true;
  5066.               // console.log('replaceObject(activeItems_)', p);
  5067.             }
  5068.           }
  5069.  
  5070.         }
  5071.         replacementTo.length = 0;
  5072.       }
  5073.  
  5074.       const d = this.get("stickinessParams.dockAtTopDurationMs", a) || 0;
  5075.       if (d) {
  5076.         const k = messageList ? messageList.querySelector(`[message-id="${e.id}"]`) : null;
  5077.         k ? this.maybeAddDockableMessage_(k) : (this.itemIdToDockDurationMap[e.id] = d);
  5078.       }
  5079.       replaceExistingItem || this.activeItems_.push(c);
  5080.     }
  5081.  
  5082.     cProto.handleLiveChatActions_ = function (a) {
  5083.       // console.log(883,a) // TODO
  5084.       if (a.length) {
  5085.         for (const t of a) {
  5086.           this.handleLiveChatAction_(t);
  5087.         }
  5088.         // this.maybeResizeScrollContainer_(a);
  5089.         if (this.activeItems_.length > 0) this.flushActiveItems_();
  5090.         // kw(function() {
  5091.         // b.maybeScrollToBottom_()
  5092.         // });
  5093.       }
  5094.     }
  5095.  
  5096.  
  5097.     if (!cProto.handleRemoveChatItemAction72_ && typeof cProto.handleRemoveChatItemAction_ === 'function' && cProto.handleRemoveChatItemAction_.length === 1) {
  5098.  
  5099.       cProto.handleRemoveChatItemAction72_ = cProto.handleRemoveChatItemAction_;
  5100.       cProto.handleRemoveChatItemAction_ = function (a) {
  5101.         const aTargetItemId = a.targetItemId;
  5102.         if (!aTargetItemId) return this.handleRemoveChatItemAction72_(a)
  5103.         const entries = [];
  5104.         this.forEachItem_(function (tag, p, idx) {
  5105.           const k = p ? firstObjectKey(p) : null;
  5106.           const aObj = k ? p[k] : null;
  5107.           if (aObj && aObj.id === aTargetItemId) {
  5108.             entries.push([tag, idx]);
  5109.           }
  5110.         });
  5111.         if (entries.length >= 1) {
  5112.           if (entries.length > 1) console.warn('entries.length >= 1');
  5113.           for (const entry of entries) {
  5114.             const [tag, idx] = entry;
  5115.             this.splice(tag, idx, 1);
  5116.             if (tag === "visibleItems") this.resetSmoothScroll_();
  5117.           }
  5118.         }
  5119.       }
  5120.     }
  5121.  
  5122.     if (!cProto.handleReplaceChatItemAction72_ && typeof cProto.handleReplaceChatItemAction_ === 'function' && cProto.handleReplaceChatItemAction_.length === 1) {
  5123.       cProto.handleReplaceChatItemAction72_ = cProto.handleReplaceChatItemAction_;
  5124.       cProto.handleReplaceChatItemAction_ = function (a) {
  5125.  
  5126.  
  5127.         const aTargetItemId = a.targetItemId;
  5128.         const aReplacementItem = a.replacementItem;
  5129.         if (!aTargetItemId || !aReplacementItem) return this.handleReplaceChatItemAction72_(a)
  5130.         const itemKey = firstObjectKey(aReplacementItem);
  5131.         const rendererItem = itemKey ? aReplacementItem[itemKey] : null;
  5132.         if (!rendererItem) return this.handleReplaceChatItemAction72_(a)
  5133.         const entries = [];
  5134.         this.forEachItem_(function (tag, p, idx) {
  5135.           const k = p ? firstObjectKey(p) : null;
  5136.           const aObj = k ? p[k] : null;
  5137.           if (aObj && aObj.id === aTargetItemId) {
  5138.             entries.push([tag, p, idx]);
  5139.           }
  5140.         });
  5141.         if (entries.length >= 1) {
  5142.           if (entries.length > 1) console.warn('entries.length >= 1');
  5143.           for (const entry of entries) {
  5144.             const [tag, p, idx] = entry;
  5145.             if (tag === "visibleItems") {
  5146.               // this.splice(tag, idx, 1, aReplacementItem)
  5147.               const list = messageList.solidBuild;
  5148.               const bObj = solidBuildAt(list, idx);
  5149.               const dataMutable = (bObj ? mutableWM.get(bObj) : null) || 0;
  5150.  
  5151.               if (typeof dataMutable.bObjChange === 'function') {
  5152.                 if (replaceObject(p, aReplacementItem)) {
  5153.                   dataMutable.bObjChange(rendererItem, itemKey);
  5154.                   // replaceExistingItem = true; 
  5155.  
  5156.                   this.resetSmoothScroll_();
  5157.                 }
  5158.               }
  5159.  
  5160.             } else {
  5161.               // this.activeItems_[idx] = aReplacementItem;
  5162.               if (replaceObject(p, aReplacementItem)) {
  5163.                 // replaceExistingItem = true; 
  5164.               }
  5165.             }
  5166.           }
  5167.         }
  5168.  
  5169.       }
  5170.  
  5171.  
  5172.     }
  5173.  
  5174.     /*
  5175.  
  5176.         f.handleReplaceChatItemAction_ = function(a) {
  5177.         var b = this
  5178.           , c = a.replacementItem;
  5179.         this.forEachItem_(function(d, e, g) {
  5180.             var k = Object.keys(e)[0];
  5181.             (e = e[k]) && e.id === a.targetItemId && (d === "visibleItems" ? (b.splice(d, g, 1, c),
  5182.             b.resetSmoothScroll_()) : b.activeItems_[g] = c)
  5183.         })
  5184.     }
  5185.  
  5186. 399 splice Error
  5187. at Array.splice (chrome-extension://fjkkdihifokoajcdnhdhmcdpifmkgeid/YouTube%20Boost%20Chat.user.js#204:136:31)
  5188. at a.splice (https://www.youtube.com/s/desktop/a7b1ec23/jsbin/live_chat_polymer.vflset/live_chat_polymer.js:2405:190)
  5189. at e.<anonymous> (https://www.youtube.com/s/desktop/a7b1ec23/jsbin/live_chat_polymer.vflset/live_chat_polymer.js:11638:148)
  5190. at cProto.forEachItem_ (chrome-extension://fjkkdihifokoajcdnhdhmcdpifmkgeid/YouTube%20Boost%20Chat.user.js#204:3219:13)
  5191. at f.handleRemoveChatItemAction_ (https://www.youtube.com/s/desktop/a7b1ec23/jsbin/live_chat_polymer.vflset/live_chat_polymer.js:11638:59)
  5192. at f.handleLiveChatAction_ (https://www.youtube.com/s/desktop/a7b1ec23/jsbin/live_chat_polymer.vflset/live_chat_polymer.js:11627:29)
  5193. at cProto.handleLiveChatActions_ (chrome-extension://fjkkdihifokoajcdnhdhmcdpifmkgeid/YouTube%20Boost%20Chat.user.js#204:3372:16)
  5194. at https://www.youtube.com/s/desktop/a7b1ec23/jsbin/live_chat_polymer.vflset/live_chat_polymer.js:1216:63
  5195. at https://www.youtube.com/s/desktop/a7b1ec23/jsbin/live_chat_polymer.vflset/live_chat_polymer.js:3173:62
  5196. at Map.forEach (<anonymous>)
  5197.  
  5198. f.handleRemoveChatItemAction_ = function(a) {
  5199.     var b = this;
  5200.     this.forEachItem_(function(c, d, e) {
  5201.         var g = Object.keys(d)[0];
  5202.         (d = d[g]) && d.id === a.targetItemId && (b.splice(c, e, 1),
  5203.         c === "visibleItems" && b.resetSmoothScroll_())
  5204.     })
  5205. }
  5206.  
  5207.  
  5208. */
  5209.  
  5210.     cProto.setupVisibleItemsList = function (solidBuild) {
  5211.       const q = this.visibleItems;
  5212.       if (q instanceof Array && !(q instanceof VisibleItemList)) {
  5213.         const p = q.slice();
  5214.         const r = this.visibleItems = solidBuild;
  5215.         p.length >= 1 && inPlaceArrayPush(r, p);
  5216.         p.length = 0;
  5217.         q.length = 0;
  5218.       }
  5219.     }
  5220.     cProto.bstClearCount = 0;
  5221.     cProto.clearList = function () {
  5222.       
  5223.       this.bstClearCount = (this.bstClearCount & 1073741823) + 1;
  5224.       const activeItems_ = this.activeItems_;
  5225.       if (activeItems_) activeItems_.length = 0;
  5226.       flushKeys.clear();
  5227.       // this.setupVisibleItemsList();
  5228.       const visibleItems = this.visibleItems;
  5229.       if (visibleItems && (visibleItems.length > 0)) { 
  5230.         visibleItems.length = 0; 
  5231.         if (messageList) {
  5232.           messageList.classList.remove('bst-listloaded');
  5233.           const solidBuild = messageList.solidBuild;
  5234.           solidBuild.setLength(0);
  5235.         }
  5236.       }
  5237.       if (!activeItems_.length && !visibleItems.length) {
  5238.         // condition check for just in case
  5239.         this.setAtBottomTrue();
  5240.       }
  5241.       this.dockableMessages = [];
  5242.       this.isSmoothed_ = !0;
  5243.       this.lastSmoothChatMessageAddMs_ = null;
  5244.       this.chatRateMs_ = 1E3;
  5245.       this.lastSmoothScrollClockTime_ = this.lastSmoothScrollUpdate_ = null;
  5246.       this.scrollTimeRemainingMs_ = this.scrollPixelsRemaining_ = 0;
  5247.       this.smoothScrollRafHandle_ = null;
  5248.       this.preinsertHeight_ = 0;
  5249.       this.itemIdToDockDurationMap = {};
  5250.       this.$['docked-messages'].clear();
  5251.       this.bannerManager.reset();
  5252.       // this.maybeResizeScrollContainer_([]);
  5253.       // this.items.style.transform = "";
  5254.       // this.atBottom || this.scrollToBottom_()
  5255.     }
  5256.  
  5257.     /*
  5258.       cProto.clearList = function() {
  5259.         window.cancelAnimationFrame(this.scrollClampRaf || 0);
  5260.         // lw(this.scrollStopHandle || 0);
  5261.         window.cancelAnimationFrame(this.asyncHandle || 0);
  5262.         this.items = [];
  5263.         this.asyncHandle = null;
  5264.         this.shouldAnimateIn = !1;
  5265.         this.scrollClampRaf = this.lastFrameTimestamp = null;
  5266.         this.scrollStartTime = this.scrollRatePixelsPerSecond = 0;
  5267.         this.scrollStopHandle = null
  5268.       }
  5269.     */
  5270.  
  5271.     /*
  5272.  
  5273.       onScroll: function() {
  5274.           var a = Date.now();
  5275.           50 > a - this.lastHandledScroll_ || (this.lastHandledScroll_ = a,
  5276.           this.markDirty())
  5277.       },
  5278.  
  5279.       // no need
  5280.  
  5281.     */
  5282.  
  5283.  
  5284.     cProto.onScrollItems_ = function (a) {
  5285.  
  5286.       // console.log('onScrollItems_', 583, )
  5287.       this.ytRendererBehavior.onScroll(a);
  5288.       // this.setAtBottom();
  5289.       // this.flushActiveItems_();
  5290.     }
  5291.     cProto.__notRequired__ = (cProto.__notRequired__ || 0) | 512;
  5292.  
  5293.     let qcz9 = 0;
  5294.     cProto.scrollToBottom_ = function () {
  5295.       // console.log(1882)
  5296.  
  5297.       const pcz = qcz9 = (qcz9 & 1073741823) + 1;
  5298.       flushPE(async () => {
  5299.         if (pcz !== qcz9) return;
  5300.         resetSelection();
  5301.         scrollToEnd();
  5302.         this.setAtBottomTrue();
  5303.       })
  5304.  
  5305.       // this.itemScroller.scrollTop = Math.pow(2, 24);
  5306.       // this.atBottom = !0
  5307.     }
  5308.  
  5309.     cProto.showNewItems_ = function (...args) {
  5310.  
  5311.       console.log('[yt-bst] showNewItems_', 583, ...args)
  5312.  
  5313.     }
  5314.  
  5315.     cProto.refreshOffsetContainerHeight_ = function () {
  5316.  
  5317.       console.log('[yt-bst] refreshOffsetContainerHeight_', 583, ...args)
  5318.     }
  5319.  
  5320.     cProto.maybeResizeScrollContainer_ = function (...args) {
  5321.  
  5322.  
  5323.       console.log('[yt-bst] maybeResizeScrollContainer_', 583, ...args)
  5324.     }
  5325.  
  5326.  
  5327.     /*
  5328.  
  5329.     this.push.apply(this, this.activeItems_)
  5330.  
  5331.     // c = visibleItems
  5332.  
  5333.     a=Array of ... [pending visibleItems]
  5334.  
  5335.     // g = this.visibleItems
  5336.  
  5337.  
  5338.             a.prototype.push = function(c) {
  5339.                 var d = Ta.apply(1, arguments)
  5340.                   , e = {
  5341.                     path: ""
  5342.                 }
  5343.                   , g = lu(this, c, e)
  5344.                   , k = g.length
  5345.                   , m = g.push.apply(g, la(d));
  5346.                 d.length && pu(this, g, e.path, k, d.length, []);
  5347.                 return m
  5348.             }
  5349.  
  5350.     */
  5351.  
  5352.  
  5353.     function getUID(aObj) {
  5354.       return `${aObj.authorExternalChannelId || `${Math.floor(Math.random() * 314159265359 + 314159265359).toString(36)}`}:${aObj.timestampUsec || 0}`
  5355.     }
  5356.     function convertAObj(aObj, aKey) {
  5357.  
  5358.       if(!aObj || aObj.uid) {
  5359.         console.warn('convertAObj warning')
  5360.       }
  5361.  
  5362.       aObj.uid = aObj.uid || createMemo(() => {
  5363.         return getUID(R(aObj));
  5364.       })
  5365.  
  5366.       if (aKey && typeof aKey === 'string') W(aObj).aKey = aKey;
  5367.  
  5368.       const memo_ = MEMO(aObj);
  5369.  
  5370.       const rendererFlag = memo_?.rendererFlag || MEMO(aObj, 'rendererFlag', ()=>{
  5371.         if(R(aObj).aKey === "liveChatSponsorshipsGiftPurchaseAnnouncementRenderer") return 1;
  5372.         return 0;
  5373.       });
  5374.  
  5375.       memo_?.authorName || MEMO(aObj, 'authorName', () => {
  5376.         const dx = R(aObj) && rendererFlag() === 1 ? aObj.header?.liveChatSponsorshipsHeaderRenderer : aObj
  5377.         return convertYTtext(dx.authorName);
  5378.       });
  5379.  
  5380.       aObj.getProfilePic = getProfilePic;
  5381.       aObj.getStickerURL = getStickerURL;
  5382.       aObj.bst = bst;
  5383.  
  5384.       if(!memo_?.messageXM){
  5385.  
  5386.         const messageXT = createMemo(()=>{
  5387.           const data = R(aObj);
  5388.           const m1 = rendererFlag() === 1 ? data.header?.liveChatSponsorshipsHeaderRenderer?.primaryText : data.message;
  5389.           return messageFlatten(m1);
  5390.         })
  5391.   
  5392.         MEMO(aObj, 'messageXM', () =>{
  5393.           const str = messageXT();
  5394.           return messageUnflatten(str);
  5395.         })
  5396.  
  5397.       }
  5398.  
  5399.  
  5400.  
  5401.     }
  5402.  
  5403.     let nyhaDPr = null;
  5404.     const nyhaDId = `nyhaD${Math.floor(Math.random() * 314159265359 + 314159265359).toString(36)}`;
  5405.     const nyhaDPost = window.postMessage.bind(window, nyhaDId);
  5406.     window.addEventListener('message', (evt) => {
  5407.       if ((evt || 0).data === nyhaDId) {
  5408.         const t = nyhaDPr;
  5409.         if (t !== null) {
  5410.           nyhaDPr = null;
  5411.           t.resolve();
  5412.         }
  5413.       }
  5414.     });
  5415.     timelineResolve = async () => {
  5416.       let t = nyhaDPr;
  5417.       if (t === null) {
  5418.         t = nyhaDPr = new PromiseExternal();
  5419.         nyhaDPost();
  5420.       }
  5421.       await t.then();
  5422.     }
  5423.  
  5424.  
  5425.  
  5426.     const menuMenuCache = new Map();
  5427.  
  5428.     const preShowMenu = function (messageEntry_) {
  5429.  
  5430.  
  5431.       const messageEntry = messageEntry_ || this;
  5432.       const messageUid = (messageEntry.getAttribute('message-uid') || '');
  5433.       if (messageUid) {
  5434.  
  5435.  
  5436.         const resT = menuMenuCache.get(messageUid);
  5437.  
  5438.  
  5439.         if (resT) return resT;
  5440.  
  5441.         const resPR = new Promise(resolve => {
  5442.  
  5443.  
  5444.           const cnt = insp(wliveChatTextMessageRenderer);
  5445.           cnt.showContextMenu.call({
  5446.             data: {
  5447.               contextMenuEndpoint: messageEntry.polymerController.dataRaw.contextMenuEndpoint
  5448.             },
  5449.             isAttached: true,
  5450.             is: cnt.is,
  5451.             __showContextMenu_forceNativeRequest__: true,
  5452.             showContextMenu37: cnt.showContextMenu37,
  5453.             showContextMenu47: cnt.showContextMenu47,
  5454.             showContextMenu47_: cnt.showContextMenu47_,
  5455.             showContextMenu_: cnt.showContextMenu_,
  5456.             showContextMenu: cnt.showContextMenu,
  5457.  
  5458.             handleGetContextMenuResponse_: function (a) {
  5459.               a.isSuccess = true;
  5460.               menuMenuCache.set(messageUid, a);
  5461.               resolve(a);
  5462.             },
  5463.             handleGetContextMenuError: function (a) {
  5464.  
  5465.               a.isFailure = true;
  5466.               menuMenuCache.set(messageUid, a);
  5467.               resolve(a);
  5468.  
  5469.             }
  5470.           }, undefined);
  5471.  
  5472.  
  5473.  
  5474.         });
  5475.         menuMenuCache.set(messageUid, resPR);
  5476.  
  5477.         return resPR;
  5478.  
  5479.  
  5480.  
  5481.       }
  5482.       return null;
  5483.     }
  5484.  
  5485.     const showMenu = function (messageEntry_) {
  5486.       const messageEntry = messageEntry_ || this;
  5487.       const messageUid = (messageEntry.getAttribute('message-uid') || '');
  5488.       if (messageUid) {
  5489.  
  5490.         if (menuRenderObj.messageUid === messageUid) return;
  5491.         entryHoldingChange(messageUid);
  5492.         Object.assign(W(menuRenderObj),{
  5493.           menuListXp: '',
  5494.           messageUid: messageUid,
  5495.           loading: true,
  5496.         });
  5497.  
  5498.         const callback = (a) => {
  5499.  
  5500.           if (a && a.isSuccess) {
  5501.  
  5502.             let menuRenderer = null;
  5503.             if (a && typeof a === 'object') {
  5504.               for (const [key, value] of Object.entries(a)) {
  5505.                 if (typeof (value || 0) === 'object' && value.menuRenderer) {
  5506.                   menuRenderer = value.menuRenderer;
  5507.                   break;
  5508.                 }
  5509.               }
  5510.             }
  5511.  
  5512.  
  5513.             const items = menuRenderer ? menuRenderer.items : null; // no login -> no items; only {openImmediately: true, trackingParams: XXXX}
  5514.             if (items) {
  5515.  
  5516.               Object.assign(W(menuRenderObj),{
  5517.                 menuListXp: menuRenderObj.menuListXd.update(items.slice(0)),
  5518.                 messageUid: messageUid,
  5519.                 loading: false,
  5520.               });
  5521.             } else {
  5522.  
  5523.               Object.assign(W(menuRenderObj),{
  5524.                 menuListXp: '',
  5525.                 messageUid: '',
  5526.                 loading: false,
  5527.               });
  5528.               if (entryHolding()) {
  5529.                 entryHoldingChange('');
  5530.               }
  5531.  
  5532.             }
  5533.  
  5534.  
  5535.  
  5536.  
  5537.           } else {
  5538.  
  5539.             Object.assign(W(menuRenderObj),{
  5540.               menuListXp: '',
  5541.               messageUid: '',
  5542.               loading: false,
  5543.               // error: 1
  5544.             });
  5545.             if (entryHolding()) {
  5546.               entryHoldingChange('');
  5547.             }
  5548.           }
  5549.  
  5550.  
  5551.         }
  5552.  
  5553.         const resA = preShowMenu(messageEntry);
  5554.         if (resA && typeof resA.then === 'function') {
  5555.           resA.then(callback);
  5556.         } else if (resA) {
  5557.           callback(resA);
  5558.         }
  5559.  
  5560.       }
  5561.     }
  5562.  
  5563.     const [lastFpError, lastFpErrorSet] = createSignal(false);
  5564.     createEffect(() => {
  5565.       const b = lastFpError();
  5566.       messageList?.classList?.toggle('bst-message-list-issue', b);
  5567.     });
  5568.  
  5569.     const freqMap = new Map(); // for temp use.
  5570.     // const isOverflowAnchorSupported = CSS.supports("overflow-anchor", "auto") && CSS.supports("overflow-anchor", "none");
  5571.     cProto.flushActiveItems37_ = cProto.flushActiveItems_;
  5572.     cProto.flushActiveItems_ = function () {
  5573.       const bstClearCount0 = this.bstClearCount;
  5574.       const items = (this.$ || 0).items;
  5575.       const hostElement = this.hostElement;
  5576.       if (!(items instanceof Element)) return;
  5577.       if (!wAttachRoot.has(hostElement)) {
  5578.         this.setupBoostChat();
  5579.         const thisData = this.data;
  5580.         if (thisData.maxItemsToDisplay > 0) thisData.maxItemsToDisplay = MAX_ITEMS_FOR_TOTAL_DISPLAY;
  5581.       }
  5582.  
  5583.       if (!messageList) return;
  5584.       if (DEBUG_windowVars) window.__bstFlush01__ = Date.now();
  5585.  
  5586.       // if(this.hostElement.querySelectorAll('*').length > 40) return;
  5587.       flushPE(async () => {
  5588.  
  5589.         if (bstClearCount0 !== this.bstClearCount) return;
  5590.  
  5591.         let tmpError = false;
  5592.  
  5593.         while (noFlushTP) {
  5594.           mouseActionP = mouseActionP || new PromiseExternal();
  5595.           await mouseActionP.then();
  5596.         }
  5597.  
  5598.         // add activeItems_ to visibleItems
  5599.  
  5600.         // activeItems_ -> clear -> add to visibleItems
  5601.  
  5602.         // this.setupVisibleItemsList();
  5603.  
  5604.  
  5605.         if (DEBUG_windowVars) window.__bstFlush02__ = Date.now();
  5606.         const activeItems_ = this.activeItems_;
  5607.         const _addLen = activeItems_.length;
  5608.         // console.log(55, _addLen)
  5609.         if (_addLen === 0) return;
  5610.         // if(this.visibleItemsCount > 40) return;
  5611.  
  5612.         const maxItemsToDisplay = this.data.maxItemsToDisplay;
  5613.  
  5614.         if (!this.canScrollToBottom_()) {
  5615.  
  5616.           _addLen > maxItemsToDisplay * 2 && activeItems_.splice(0, _addLen - maxItemsToDisplay)
  5617.           return;
  5618.         } else {
  5619.           if (_addLen > maxItemsToDisplay) {
  5620.             const visibleItems = this.visibleItems;
  5621.             if (visibleItems && (visibleItems.length > 0)) {
  5622.               visibleItems.length = 0;
  5623.               if (messageList) {
  5624.                 const solidBuild = messageList.solidBuild;
  5625.                 solidBuild.setLength(0);
  5626.               }
  5627.             }
  5628.             activeItems_.splice(0, _addLen - maxItemsToDisplay);
  5629.           }
  5630.  
  5631.         }
  5632.  
  5633.         if (DEBUG_windowVars) window.__bstFlush03__ = Date.now();
  5634.  
  5635.  
  5636.  
  5637.         _flushed = 1;
  5638.         const items = activeItems_.slice(0);
  5639.  
  5640.         let tmpFpError = 0;
  5641.  
  5642.         const generatePFC = () => {
  5643.  
  5644.           freqMap.clear();
  5645.  
  5646.           const visibleItems = this.visibleItems;
  5647.  
  5648.           const fp = new Array(visibleItems.length);
  5649.           let fpI = 0;
  5650.  
  5651.           const pp = visibleItems.map(e => {
  5652.             if (!e) return null;
  5653.             if (typeof e === 'object') e = Object.values(e)[0] || 0;
  5654.             const r = e.id || null;
  5655.             if (typeof r === 'string') {
  5656.               fp[fpI++] = r;
  5657.               freqMap.set(r, freqMap.has(r) ? false : true);
  5658.             }
  5659.             return r;
  5660.           }); // e.id (non-empty) or null
  5661.  
  5662.           fp.length = fpI;
  5663.  
  5664.           const cp = new Array(fpI);
  5665.           let cpI = 0;
  5666.           for (const [key, isUnique] of freqMap.entries()) {
  5667.             if (isUnique) {
  5668.               cp[cpI++] = key;
  5669.             }
  5670.           }
  5671.           cp.length = cpI;
  5672.  
  5673.           return { pp, fp, cp };
  5674.  
  5675.         }
  5676.  
  5677.         {
  5678.  
  5679.  
  5680.           const { pp, fp, cp } = generatePFC();
  5681.           if (pp.length !== fp.length || fp.length !== cp.length || pp.length !== cp.length) {
  5682.  
  5683.             console.log(`[yt-bst] flushItems; length mismatched (01); pp=${pp.length}, fp=${fp.length}, cp=${cp.length}`);
  5684.             lastFpErrorSet(true);
  5685.             tmpError = true;
  5686.  
  5687.             // stuck in here.  cannot flush more items
  5688.           } else {
  5689.  
  5690.             lastFpErrorSet(tmpError);
  5691.           }
  5692.  
  5693.         }
  5694.         //  console.log(9192, 299, items);
  5695.         // activeItems_.length = 0;
  5696.         // const crCount = this.bstClearCount;
  5697.         // const pEmpty = this.isEmpty;
  5698.  
  5699.  
  5700.         if (bstClearCount0 !== this.bstClearCount) return;
  5701.         if (this.isAttached !== true) return;
  5702.         if (items.length === 0) return;
  5703.  
  5704.         let existingSet = new Set();
  5705.         for (const entry of this.visibleItems) {
  5706.           let k = entry ? firstObjectKey(entry) : null;
  5707.           let p = k ? entry[k] : null;
  5708.           p && p.id && existingSet.add(p.id);
  5709.         }
  5710.  
  5711.         let rearrangedW = items.map(flushItem => {
  5712.  
  5713.           const aKey = flushItem ? firstObjectKey(flushItem) : null;
  5714.           const aObj = aKey ? flushItem[aKey] : null;
  5715.           if (!aObj) return null;
  5716.  
  5717.           const id = aObj.id
  5718.           const uid = getUID(aObj);
  5719.           if (existingSet.has(id)) return null;
  5720.           existingSet.add(id);
  5721.         // if (flushKeys.has(uid)) return null;
  5722.         // flushKeys.add(uid);
  5723.  
  5724.  
  5725.  
  5726.           return {
  5727.             flushItem,
  5728.             aKey, aObj, uid
  5729.           };
  5730.  
  5731.         }).filter(e => !!e);
  5732.         existingSet.clear();
  5733.         existingSet = null;
  5734.  
  5735.         const nd = rearrangedW.length;
  5736.         if (nd === 0) return;
  5737.  
  5738.         // await timelineResolve();
  5739.         await Promise.resolve();
  5740.  
  5741.         if (bstClearCount0 !== this.bstClearCount) return;
  5742.         if (this.isAttached !== true) return;
  5743.  
  5744.         const mapToFlushItem = new Map();
  5745.         // no filtering
  5746.         const rearrangedFn = entry => {
  5747.  
  5748.           const {
  5749.             flushItem,  // flushItem is object so it content can be replaced since rearrangedW
  5750.             aKey, aObj, uid
  5751.           } = entry;
  5752.           // flushKeys.removeAdd(uid);
  5753.  
  5754.           const bObj = aObj;
  5755.           let bObjWR = mWeakRef(aObj);
  5756.           let mutableWR;
  5757.           let createdPromise = new PromiseExternal();
  5758.  
  5759.           let messageEntryWR = null;
  5760.  
  5761.  
  5762.           const bObjChange = (val) => {
  5763.             const f = kRef(mutableWR)?.bObjChange
  5764.             if (f) f(val);
  5765.           }
  5766.  
  5767.           const mutable = {
  5768.             getDataObj() {
  5769.               return kRef(bObjWR);
  5770.             },
  5771.             convert() {
  5772.               let aObj = kRef(bObjWR);
  5773.               if (!aObj) return;
  5774.               if (!aObj.uid) convertAObj(aObj, aKey);
  5775.             },
  5776.             removeEntryFuncs: new Map(),
  5777.             tooltips: new Map(),
  5778.             createdPromise: createdPromise,
  5779.             removeEntry() {
  5780.               this.convert = null;
  5781.  
  5782.               this.removeEntryFuncs.forEach((f) => {
  5783.                 f.call(this);
  5784.               });
  5785.               this.removeEntryFuncs.clear();
  5786.               this.tooltips.clear();
  5787.  
  5788.               this.createdPromise = null;
  5789.               this.removeEntryFuncs = null;
  5790.               this.tooltips = null;
  5791.               this.removeEntry = null;
  5792.               this.setupFn = null;
  5793.               this.bObjChange = null;
  5794.  
  5795.             },
  5796.             bObjChange(val, aKey) {
  5797.               let bObj = kRef(bObjWR);
  5798.               if (!bObj) return;
  5799.               if (typeof (val || 0) === 'object') {
  5800.                 for (const s of ['authorBadges', 'message']) {
  5801.                   Reflect.has(val, s) || (val[s] = undefined);
  5802.                   Reflect.has(val, s) || (val[s] = undefined);
  5803.                 }
  5804.               }
  5805.               convertAObj(val, aKey || val.aKey || undefined);
  5806.               Object.assign(W(bObj), val);
  5807.             },
  5808.             setupFn(_messageEntry) {
  5809.  
  5810.               if (messageEntryWR) {
  5811.                 console.warn('setupFn warning 01');
  5812.                 return;
  5813.               }
  5814.  
  5815.               /** @type {HTMLElement} */
  5816.               messageEntryWR = mWeakRef(_messageEntry); 
  5817.  
  5818.               if (!kRef(bObjWR) || !kRef(mutableWR)) {
  5819.                 console.warn('setupFn warning 02');
  5820.                 return;
  5821.               }
  5822.  
  5823.               const [interceptionRatio, interceptionRatioChange] = createSignal(null);
  5824.               const [viewVisible, viewVisibleChange] = createSignal(null);
  5825.               const [viewVisibleIdx, viewVisibleIdxChange] = createSignal(null); // 1 to n
  5826.  
  5827.               const baseRemoveFn = () => {
  5828.                 const bObj = kRef(bObjWR);
  5829.                 const messageEntry = kRef(messageEntryWR);
  5830.                 mutableWM.delete(bObj);
  5831.                 mutableWM.delete(messageEntry);
  5832.               };
  5833.  
  5834.               {
  5835.                 const messageEntry = _messageEntry;
  5836.                 let mutable = kRef(mutableWR);
  5837.                 mutable.viewVisible = viewVisible;
  5838.                 mutable.viewVisibleChange = viewVisibleChange;
  5839.                 mutable.viewVisibleIdx = viewVisibleIdx;
  5840.                 mutable.viewVisibleIdxChange = viewVisibleIdxChange;
  5841.                 mutable.interceptionRatioChange = interceptionRatioChange;
  5842.                 mutableWM.set(messageEntry, mutable);
  5843.                 messageEntry.showMenu = showMenu;
  5844.                 mutable.removeEntryFuncs.set('baseRemove', baseRemoveFn);
  5845.                 mutable = null;
  5846.               }
  5847.  
  5848.  
  5849.               const polymerController = {
  5850.                 set(prop, val) {
  5851.                   if (prop === 'data') {
  5852.                     bObjChange(val);
  5853.                   }
  5854.                 },
  5855.                 get data() {
  5856.                   return kRef(bObjWR);
  5857.                 },
  5858.                 set data(val) {
  5859.                   bObjChange(val);
  5860.                 },
  5861.                 get dataRaw() {
  5862.                   return kRef(bObjWR);
  5863.                 },
  5864.                 get dataMutable() {
  5865.                   return kRef(mutableWR);
  5866.                 },
  5867.                 get authorType() {
  5868.                   const bObj = kRef(bObjWR);
  5869.                   return getAuthorBadgeType(bObj.authorBadges);
  5870.                 }
  5871.               };
  5872.  
  5873.  
  5874.               {
  5875.  
  5876.                 const messageEntry = _messageEntry;
  5877.                 messageEntry.polymerController =polymerController;
  5878.  
  5879.               }
  5880.  
  5881.               {
  5882.  
  5883.                 let bObj = kRef(bObjWR);
  5884.  
  5885.                 if (!!(bObj.aKey && bObj.aKey !== 'liveChatTextMessageRenderer')) {
  5886.  
  5887.                   const messageEntry = kRef(messageEntryWR);
  5888.                   const a = bObj;
  5889.                   const entries = Object.entries({
  5890.  
  5891.                     "--yt-live-chat-disable-highlight-message-author-name-color": colorFromDecimal(a.authorNameTextColor),
  5892.                     "--yt-live-chat-text-input-background-color": colorFromDecimal(a.textInputBackgroundColor),
  5893.  
  5894.                     ...(a.aKey === "liveChatPaidMessageRenderer" ? {
  5895.  
  5896.                       "--yt-live-chat-paid-message-primary-color": colorFromDecimal(a.bodyBackgroundColor),
  5897.                       "--yt-live-chat-paid-message-secondary-color": colorFromDecimal(a.headerBackgroundColor),
  5898.                       "--yt-live-chat-paid-message-header-color": colorFromDecimal(a.headerTextColor),
  5899.                       "--yt-live-chat-paid-message-timestamp-color": colorFromDecimal(a.timestampColor),
  5900.                       "--yt-live-chat-paid-message-color": colorFromDecimal(a.bodyTextColor),
  5901.                     } : {
  5902.  
  5903.                     }),
  5904.  
  5905.                     ...(a.aKey === "liveChatPaidStickerRenderer" ? {
  5906.                       "--yt-live-chat-paid-sticker-chip-background-color": colorFromDecimal(a.moneyChipBackgroundColor),
  5907.                       "--yt-live-chat-paid-sticker-chip-text-color": colorFromDecimal(a.moneyChipTextColor),
  5908.                       "--yt-live-chat-paid-sticker-background-color": colorFromDecimal(a.backgroundColor),
  5909.                     } : {
  5910.  
  5911.                     })
  5912.  
  5913.  
  5914.                   });
  5915.  
  5916.                   if (entries.length >= 1) {
  5917.                     for (const [key, value] of entries) {
  5918.                       if (value) messageEntry.style.setProperty(key, value);
  5919.                     }
  5920.                   }
  5921.  
  5922.                 }
  5923.  
  5924.               }
  5925.  
  5926.               // change on state
  5927.               createEffect(() => {
  5928.  
  5929.                 const visible = interceptionRatio();
  5930.                 if (visible > 0.9) {
  5931.                   viewVisibleChange(1);
  5932.                 } else if (visible < 0.1) {
  5933.                   viewVisibleChange(0);
  5934.                 }
  5935.  
  5936.               });
  5937.  
  5938.               // change on state
  5939.               const viewVisiblePos = createMemo(() => {
  5940.                 if (!messageList) return;
  5941.                 const viewCount = messageList.visibleCount();
  5942.                 const num = viewVisibleIdx();
  5943.                 if (num >= 1 && viewCount >= 1) {
  5944.                   return (num > (viewCount / 2)) ? 'down' : 'up';
  5945.                   // messageEntry.setAttribute('view-pos', (num > (viewCount / 2)) ? 'down' : 'up');
  5946.                 } else {
  5947.                   return null;
  5948.                   // messageEntry.removeAttribute('view-pos');
  5949.                 }
  5950.               });
  5951.  
  5952.               // change on state -> change on DOM
  5953.               createEffect(() => {
  5954.                 const v = viewVisiblePos();
  5955.                 const messageEntry = kRef(messageEntryWR);
  5956.                 if (v === null) {
  5957.                   _removeAttribute.call(messageEntry, 'view-pos');
  5958.                 } else {
  5959.                   _setAttribute.call(messageEntry, 'view-pos', v);
  5960.                 }
  5961.               });
  5962.  
  5963.               {
  5964.                 const messageEntry = _messageEntry;
  5965.                 let mutable = kRef(mutableWR);
  5966.                 mutable.viewVisiblePos = viewVisiblePos;
  5967.                 ioMessageList && ioMessageList.observe(messageEntry);
  5968.                 createdPromise && createdPromise.resolve(messageEntry);
  5969.                 createdPromise = null;
  5970.               }
  5971.               rcSignalAdd(1);
  5972.  
  5973.             }
  5974.           }
  5975.           mutableWR = mWeakRef(mutable);
  5976.           mutableWM.set(bObj, mutable);
  5977.  
  5978.           mapToFlushItem.set(bObj, flushItem);
  5979.  
  5980.           return bObj;
  5981.         };
  5982.  
  5983.         const visibleItems = this.visibleItems;
  5984.         let wasEmpty = false;
  5985.         // let needScrollToEnd = false;
  5986.         if (visibleItems.length === 0) {
  5987.           // needScrollToEnd = true;
  5988.           wasEmpty = true;
  5989.         } 
  5990.         // else if (this.canScrollToBottom_() === true) {
  5991.  
  5992.         // // try to avoid call offsetHeight or offsetTop directly
  5993.         // const list = messageList.solidBuild;
  5994.         // const bObj = list && list.length ? list[0] : null;
  5995.         // if (bObj) {
  5996.         //   const dataMutable = mutableWM.get(bObj);
  5997.         //   if (dataMutable && typeof dataMutable.viewVisiblePos === 'function' && typeof dataMutable.viewVisiblePos() === 'string') { // down or up
  5998.         //     needScrollToEnd = true;
  5999.         //   }
  6000.         // }
  6001.  
  6002.         // if (!needScrollToEnd && _messageOverflowAnchor && typeof _messageOverflowAnchor.scrollIntoViewIfNeeded === 'function') {
  6003.         //   _messageOverflowAnchor.scrollIntoViewIfNeeded(false);
  6004.         //   // unknown reason
  6005.         //   // example https://www.youtube.com/watch?v=18tiVN9sxMc&t=14m15s -> 14m21s
  6006.         //   // example https://www.youtube.com/watch?v=czgZWwziG9Y&t=48m5s -> 48m12s
  6007.         //   // guess: ticker added -> yt-live-chat-ticker-renderer appears -> height changed -> overflow-anchor not working
  6008.         // }
  6009.  
  6010.         // }
  6011.  
  6012.         const removeFromActiveItems = (flushItem) => {
  6013.           if (activeItems_.length > 0) {
  6014.             const index = activeItems_.indexOf(flushItem);
  6015.             if (index > -1) {
  6016.               if (index >= 1) {
  6017.                 activeItems_.splice(index, 1);
  6018.               } else {
  6019.                 activeItems_.shift();
  6020.               }
  6021.               return true;
  6022.             }
  6023.           }
  6024.           return false;
  6025.         }
  6026.  
  6027.  
  6028.         const solidBuild = messageList.solidBuild;
  6029.  
  6030.         const loopFunc = (bObjX) => {
  6031.           const bObj = bObjX;
  6032.           const flushItem = mapToFlushItem.get(bObj);
  6033.           const n = solidBuild.getLength() - maxItemsToDisplay + 1;
  6034.           if (n >= 1) {
  6035.             if (n > 1) {
  6036.               visibleItems.splice(0, n);
  6037.             } else {
  6038.               visibleItems.shift();
  6039.             }
  6040.           }
  6041.           removeFromActiveItems(flushItem);
  6042.           const uid = getUID(bObj);
  6043.           mfChange(uid);
  6044.           visibleItems.push(flushItem);
  6045.         }
  6046.  
  6047.         
  6048.  
  6049.         let awaitTime = 0;
  6050.  
  6051.         // console.log('[yt-bst] XX', '000000')
  6052.         bottomKeepAtSet(Date.now() + 86400000);
  6053.         if (DEBUG_windowVars) window.__bstFlush04__ = Date.now();
  6054.         let mg = 0;
  6055.         rcValue = rcSignal();
  6056.         const t1 = performance.now();
  6057.         let a2 = t1;
  6058.         let b2 = 0;
  6059.         for (let rJ = 0; rJ < nd; rJ++) {
  6060.           if (bstClearCount0 !== this.bstClearCount || this.isAttached !== true) {
  6061.             flushKeys.clear();
  6062.             break;
  6063.           }
  6064.           const bObjX = rearrangedFn(rearrangedW[rJ]);
  6065.           rcSignalAdd(1);
  6066.           loopFunc(bObjX, solidBuild);
  6067.           const c2 = performance.now();
  6068.           // console.log('[yt-bst] XX', c2, mg, rcSignal(), rcValue )
  6069.           b2++;
  6070.           if ((c2 - a2) * (b2 + 1) - 14 * b2 > 0) { //  // (c2-a2)*((b2+1)/b2)>14
  6071.             await timelineResolve();
  6072.             const t = performance.now();
  6073.             awaitTime += Math.round(t - c2);
  6074.             a2 = t;
  6075.             b2 = 0;
  6076.             mg++;
  6077.             // console.log('[yt-bst] YY', t, mg)
  6078.           } else {
  6079.             await Promise.resolve();
  6080.           }
  6081.         }
  6082.         mapToFlushItem.clear();
  6083.         rearrangedW.length = 0;
  6084.         rearrangedW = null;
  6085.  
  6086.         // console.log('[yt-bst] XX', '111111')
  6087.         
  6088.         const rcPromise_ = rcPromise = new PromiseExternal();
  6089.         // rcSignalAdd(1);
  6090.         rcValue++;
  6091.         await timelineResolve();
  6092.         rcSignalAdd(0);
  6093.         await rcPromise_.then();
  6094.         if (rcPromise_ === rcPromise) rcPromise = null;
  6095.         resetSelection();
  6096.  
  6097.         if (DO_scrollIntoViewIfNeeded) {
  6098.           _messageOverflowAnchor && _messageOverflowAnchor.scrollIntoViewIfNeeded();
  6099.         }
  6100.  
  6101.         if (DEBUG_windowVars) window.__bstFlush05__ = Date.now();
  6102.         // if (needScrollToEnd) scrollToEnd(); // before the last timelineResolve
  6103.         
  6104.         await Promise.resolve();
  6105.         if (wasEmpty) messageList.classList.add('bst-listloaded');
  6106.         const t2 = performance.now();
  6107.  
  6108.         if (LOGTIME_FLUSHITEMS && t2 - t1 > 100) {
  6109.           const T = Math.round(t2 - t1);
  6110.           const t = T - awaitTime;
  6111.           console.log(`[yt-bst] flushItems; n=${nd}; t=${T}-${awaitTime}=${t}; mg=${mg}`);
  6112.         }
  6113.  
  6114.         {
  6115.  
  6116.  
  6117.           const { pp, fp, cp } = generatePFC();
  6118.           if (pp.length !== fp.length || fp.length !== cp.length || pp.length !== cp.length) {
  6119.  
  6120.             console.log(`[yt-bst] flushItems; length mismatched (02); pp=${pp.length}, fp=${fp.length}, cp=${cp.length}`);
  6121.             lastFpErrorSet(true);
  6122.             tmpError = true;
  6123.           } else {
  6124.             lastFpErrorSet(tmpError);
  6125.           }
  6126.  
  6127.         }
  6128.  
  6129.         if (DEBUG_windowVars) window.__bstFlush06__ = Date.now();
  6130.  
  6131.  
  6132.         bottomKeepAtSet(Date.now());
  6133.  
  6134.  
  6135.       });
  6136.  
  6137.  
  6138.     }
  6139.  
  6140.  
  6141.   });
  6142.  
  6143. })();