dock.html

<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<meta content="utf-8" http-equiv="encoding" />
		<title>Social Stream - Dashboard</title>
		<meta name="title" content="Social Stream - Dashboard" />
		<link rel="icon" href="./favicon.ico" />
		<link href="./thirdparty/NotoColorEmoji.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
		<meta name="robots" content="noindex">

		<style>
			:root {
				--show-emoji-only: flex;
				--list-or-horizontal: inline-flex;
				--show-donos-only: flex;
				--show-queue-only: flex;
				--scale-output: 1;
				--font-color: var(--comment-color, #fff);
				--font-color-name: var(--author-color, #ddd);
				--background-color: #36393f;
				--locked-chatbar: 0px;
				--menu-background-color: #2f3136;
				--menu-border-color: 0 0 5px #000;
				--link-color: #5af;
				--highlight-base: #0000;
				--highlight-base2: #9991;
				--highlight-compact: #3335;
				--highlight-compact2: #3333;
				--stylized-emoji: 140%;
				--stylized-img: 23px;
				--show-images: inline-block;
				--comment-font-size: unset;
				--message-line-height: 22px;
				--author-font-size: 17px;
				--electron-drag-fix: drag;
				--time-arrived-padding: 1px;
				--profile-pic-border: 0 solid black;
				--cursor-type: pointer;
				--pressed-color: #9c9c;
				--blur-amount: 5px;

				--pinned-queued-bg: #9d99cc;
				--pinned-bg: #712a65;
				--donation-amount-margin: 0 auto 0 0;

				--flex-direction: row;

				--font-family: Sora, Avenir Next, Roboto, Helvetica, Geneva, Verdana, Arial, sans-serif;

				--donation-amount: #ffe60073;
				--donation-bgcolor: #feffad33;
				--donation-bgcolor-odd: #fdff6533;
				--donation-bgcolor-bubble: #171703e0;
				--donation-bgcolor-bubble-odd: #171700e0;

				--member-bgcolor: #adfeff33;
				--member-bgcolor-odd: #65fdff33;
				--member-bgcolor-bubble: #0f1620d1;
				--member-bgcolor-bubble-odd: #060c16d1;

				--special-bgcolor: #0f2bfd33;
				--special-bgcolor-odd: #273de433;
				--special-bgcolor-bubble: #0d2240d1;
				--special-bgcolor-bubble-odd: #08244cd1;
				--bgcolor-bubble: #000d;
				--bgcolor-bubble-odd: #111d;

				--scrollbar-visible: inherit;
				--padding-rows: 3px;
				
				--text-shadow: -2px -2px #000000, -2px -1px #000000, -2px 0px #000000, -2px 1px #000000, -2px 2px #000000, -1px -2px #000000, -1px -1px #000000, -1px 0px #000000, -1px 1px #000000, -1px 2px #000000, 0px -2px #000000, 0px -1px #000000, 0px 0px #000000, 0px 1px #000000, 0px 2px #000000, 1px -2px #000000, 1px -1px #000000, 1px 0px #000000, 1px 1px #000000, 1px 2px #000000, 2px -2px #000000, 2px -1px #000000, 2px 0px #000000, 2px 1px #000000, 2px 2px #000000;
				
			}
			.closeBtn {
				position: absolute;
				right:-10px;
				width: 20px;
				background-color: #bababa;
				padding: 10px;
				border-radius: 43%;
				height: 19px;
				top: -10px;
				text-align: center;
				border: 2px solid black;
				cursor: pointer;
			}

			.closeBtn:hover {
				background-color: #aa8a8a;
			}

			.closeBtn:active {
				background-color: #7a7a7a;
			}
			
			#TipRightClick {
				text-shadow: 0 0 black;
				cursor: help;
				color: grey;
				margin: auto;
				text-align: center;
				margin: 0;
				padding: 0;
				top: 7px;
				position: relative;
			}
			
			.volume-container {
				  position: relative;
				  display: inline-block;
			}

			.volume-slider {
			  position: absolute;
			  bottom: 40px; /* Adjust as needed to position above the button */
			  left: 50%;
			  transform: translateX(-50%);
			  display: none;
			  z-index: 10;
			  cursor: pointer;
			}

			.volume-container:hover .volume-slider {
			  display: block;
			}
			
			.blurred {
				filter: blur(var(--blur-amount));
			}

			@keyframes float {
				0% {
					box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.6);
					transform: translatey(0px);
					animation-timing-function: linear;
					opacity: 1;
				}
				10% {
					box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.6);
					transform: translate(3px, -30px);
					animation-timing-function: linear;
					opacity: 0.9;
				}
				20% {
					box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2);
					transform: translate(6px, -54px);
					animation-timing-function: linear;
					opacity: 0.8;
				}
				30% {
					box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2);
					transform: translate(3px, -81px);
					animation-timing-function: linear;
					opacity: 0.7;
				}
				40% {
					box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(0px, -108px);
					animation-timing-function: linear;
					opacity: 0.6;
				}
				50% {
					box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(-5px, -135px);
					animation-timing-function: linear;
					opacity: 0.5;
				}
				60% {
					box-shadow: 0 15px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(-8px, -162px);
					animation-timing-function: linear;
					opacity: 0.4;
				}
				70% {
					box-shadow: 0 15px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(-5px, -189px);
					animation-timing-function: linear;
					opacity: 0.3;
				}
				80% {
					box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(0px, -216px);
					animation-timing-function: linear;
					opacity: 0.2;
				}
				90% {
					box-shadow: 0 20px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(6px, -243px);
					animation-timing-function: linear;
					opacity: 0.1;
				}
				100% {
					box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
					transform: translate(10px, -270px);
					animation-timing-function: linear;
					opacity: 0;
				}
			}
			
			.modal {
				display: none; /* Hidden by default */
				position: fixed; /* Stay in place */
				z-index: 1000; /* Sit on top */
				left: 0;
				top: 0;
				width: 100%; /* Full width */
				height: 100%; /* Full height */
				overflow: auto; /* Enable scroll if needed */
				background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
			}

			.modal-content {
				background-color: #888;
				margin: 0% auto; /* 15% from the top and centered */
				padding: 20px;
				border: 1px solid #fff;
				width: 80%; /* Could be more or less, depending on screen size */
			}

			.close-btn {
				color: #aaa;
				float: right;
				font-size: 28px;
				font-weight: bold;
			}

			.close-btn:hover,
			.close-btn:focus {
				color: black;
				text-decoration: none;
				cursor: pointer;
			}

			
			#obsControlModal {
			  position: fixed;
			  z-index: 1000;
			  left: 0;
			  top: 0;
			  width: 100%;
			  height: 100%;
			  overflow: auto;
			  background-color: rgba(0, 0, 0, 0.6);
			  display: flex;
			  justify-content: center;
			  align-items: center;
			}

			#obsControlModal .modal-content {
			  background-color: #444;
			  color: #fff;
			  padding: 30px;
			  border-radius: 10px;
			  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
			  width: 90%;
			  max-width: 500px;
			  max-height: 90vh;
			  overflow-y: auto;
			}

			#obsControlModal h2 {
			  text-align: center;
			  margin-top: 0;
			  color: #f0f0f0;
			}

			#obsControlModal .modal-section {
			  margin-bottom: 20px;
			}

			#obsControlModal h3 {
			  margin-bottom: 10px;
			  color: #ddd;
			}

			#obsControlModal button {
			  background-color: #555;
			  color: white;
			  border: none;
			  padding: 10px 15px;
			  margin: 5px;
			  border-radius: 5px;
			  cursor: pointer;
			  transition: background-color 0.3s;
			}
			
			.horizontal .bubble {
				vertical-align: top;
			}

			#obsControlModal button:hover {
			  background-color: #666;
			}

			#obsControlModal button.active {
			  background-color: #007bff;
			}

			#obsControlModal #sceneButtons {
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			}

			#obsControlModal #obsStatus p {
			  margin: 5px 0;
			}

			#obsControlModal .close-btn {
			  display: block;
			  width: 100%;
			  margin-top: 20px;
			  background-color: #d9534f;
			}

			#obsControlModal .close-btn:hover {
			  background-color: #c9302c;
			}
			
			.viewerIcons {
				background-position: left;
				background-repeat: no-repeat;
				background-size: contain;
				padding: 5px;
				margin: 0 5px 0 0;
				cursor: help;
				padding-left: 34px;
			}

			@media (max-width: 600px) {
			  .modal .modal-content {
				padding: 20px;
			  }
			  
			 .modal  button {
				padding: 8px 12px;
				font-size: 14px;
			  }
			}

			.dissolve {
				position: fixed;
				bottom: 0;
				box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
				transform: translatey(0px);
				animation: float 3s ease-in-out 1;
				animation-timing-function: linear;
			}

			.hl-imgContent {
				vertical-align: middle;
			}
			#output {
				overflow-x: hidden;
				zoom: var(--scale-output);
				transform: var(--scale-output);
				transform-origin: 0 0;
				width: 100%;
				margin-bottom: calc((46px  + var(--locked-chatbar)) / var(--scale-output)); /* Same as menu height + menu padding-top + menu padding-bottom */
			}
			
			@media only screen and (min-width: 700.001px) { 
				#output  {
					margin-bottom: calc(46px / var(--scale-output));
				}
			}
			
			.event-pill {
				padding-right: 5px;
			}
			
			.hl-profile-pic {
				border: var(--profile-pic-border);
				min-width: 24px;
				width: 24px;
				height: 24px;
				object-fit: cover;
			}
			.hl-badge {
				margin: 0px 2px 0px 0px;
				max-width: 100px;
				max-height: 20px;
				height: 20px;
				display: inline-block;
				width: auto;
				object-fit: contain;
			}
			.hl-badge:last-child {
				padding: 0 2px 0px 0px;
			}

			a {
				color: var(--link-color);
				display: contents;
				text-decoration: none;
			}

			.fixed {
				position: fixed !important;
			}

			.bottom {
				bottom: 0;
			}

			.hl-imgContent img, .hl-imgContent video {
				max-width: 80px;
				margin: 0 2px;
				max-height: 30px;
			}
			

			.largeContent .hl-imgContent img, .largeContent .hl-imgContent video {
				max-width: 160px !important;
				margin: 0 2px;
				max-height: 80px !important;
			}
			.largeContent .hl-content {
				margin: 4px 1px;
			}

			/* example of how to remotely load a font */
			@font-face {
				font-family: "opendyslexic";
				src: url("https://vdo.ninja/examples/OpenDyslexic-Regular.otf");
				font-style: normal;
				font-weight: normal;
			}

			@font-face {
				font-family: NotoColorEmojiLimited;
				unicode-range: U+1F1E6-1F1FF;
				src: url(./thirdparty/NotoColorEmoji.ttf);
				font-display: swap;
			}

			/* latin-ext */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 200;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQspDre2.woff2) format("woff2");
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 200;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* latin-ext */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 400;
				font-display: swap;
				src: url(./thirdparty/xMQbuFFYT72XzQspDre2.woff2) format("woff2");
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 400;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* latin-ext */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 700;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQspDre2.woff2) format("woff2");
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 700;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}

			body {
				font-family: "NotoColorEmojiLimited", var(--font-family);
				color: var(--font-color);
				margin: 0 0;
				background-color: var(--background-color);
				
				text-shadow: var(--text-shadow);
				overflow-x: hidden;
				scrollbar-color: #666 #201c29;
			}
			
			input[type="checkbox"] {
				padding: 0;
				margin: 0 5px 0 0;
				width: 15px;
				height: 15px;
			}

			::-webkit-scrollbar {
				width: 15px;
				display: var(--scrollbar-visible);
			}

			::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 13px rgb(0 0 0 / 90%);
				border-radius: 4px;
			}

			::-webkit-scrollbar-thumb {
				border-radius: 4px;
				-webkit-box-shadow: inset 0 0 16px rgb(150 150 150 / 100%);
				border: solid 3px transparent;
			}

			body > div {
				-webkit-app-region: no-drag;
			}

			body.lightmode {
				font-weight: 500;
				text-shadow: -2px -2px #fff, -2px -1px #fff, -2px 0px #fff, -2px 1px #fff, -2px 2px #fff, -1px -2px #fff, -1px -1px #fff, -1px 0px #fff, -1px 1px #fff, -1px 2px #fff, 0px -2px #fff, 0px -1px #fff, 0px 0px #fff, 0px 1px #fff, 0px 2px #fff, 1px -2px #fff, 1px -1px #fff, 1px 0px #fff, 1px 1px #fff, 1px 2px #fff, 2px -2px #fff, 2px -1px #fff, 2px 0px #fff, 2px 1px #fff, 2px 2px #fff;
			}

			.fade-in-image {
				animation: fadeIn 0.2s;
			}

			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				99% {
					opacity: 0.2;
				}
				100% {
					opacity: 1;
				}
			}

			.bot.compactmode {
				padding: 0;
			}

			.randommode {
				position: absolute !important;
				max-width: 20vw;
			}

			.hl-firstline {
				display: block;
				line-height: 100%;
				padding-bottom: 3px;
			}
			.twoLines .hl-firstline {
				align-items: center;
				display: flex;
				margin-top: 4px;
			}
			
			.notcompactmode .twoLines .hl-firstline {
				margin-top: 10px;
				margin-bottom: 2px;
			}
			
			.twoLines .compactmode  {
				align-items: flex-start;
				flex-direction: column;
			}
			
			#context-menu {
			  transform-origin: bottom left;
			  transform: scale(var(--menu-scale, 1));
			}
			
			.allowfat .hl-message{
				max-width: 300px;
				word-break: keep-all;
				line-break: loose;
				overflow-wrap: break-word;
				overflow:visible;
				white-space: normal;
			}
				

			.twoLines.alignright .hl-firstline {
				display: flex;
				margin: 3px 0 5px 0;
				margin-left: auto;
				flex-direction: row;
			}
			
			.twoLines.alignright .hl-firstline {
				justify-content: flex-end;
			}

			.hl-firstline .hl-name {
				top: 2px;
				bottom: unset;
			}

			.twoLines .hl-firstline .hl-name {
				align-items: center;
				display: flex;
			}

			.twoLines.alignright .hl-firstline .hl-name {
				display: flex;
				flex-direction: row-reverse;
				margin: 0 5px;
				top: 1px;
				position: relative;
			}

			.hl-firstline .hl-name .hl-badge {
				vertical-align: inherit;
				margin: 1px 0px;
			}

			.hl-message {
				margin: auto 1px;
				overflow-wrap: anywhere;
				line-height: max(var(--message-line-height), var(--comment-font-size));
				font-size: var(--comment-font-size);
			}
			
			.hl-name {
				 overflow-wrap: normal;
			}

			.hl-message img,
			.hl-message svg {
				margin: auto 0px;
				padding: 0;
				display: inline-block;
				height: 24px;
				max-width: 24px;
				max-height: 24px;
			}
			
			.hl-message img+img, .hl-message img+svg, .hl-message svg+img, .hl-message svg+svg {
				margin: auto 0px;
			}

			.hl-message .hl-content img, .hl-message .hl-content video {
				max-width: 38px;
			}
			
			.hl-message img.chat-line__message--emote-gigantified,
			.hl-message svg.chat-line__message--emote-gigantified {
				position: relative;
				margin: auto 1px;
				padding: 0;
				display: inline-block;
				height: 56px;
				max-width: 112px;
				max-height: 56px;
			}

			.hl-message .hl-content img, .hl-message .hl-content video.chat-line__message--emote-gigantified {
				max-width: 112px;
			}

			.notcompactmode .hl-message img,
			.notcompactmode .hl-message svg {
				height: 19px;
				max-height: 19px;
			}
			.notcompactmode .hl-content img,
			.notcompactmode .hl-content svg {
				max-width: 80px;
			}
			
			.notcompactmode .hl-message img.chat-line__message--emote-gigantified,
			.notcompactmode .hl-message svg.chat-line__message--emote-gigantified {
				height: 56px;
				max-height: 56px;
			}
			
			.notcompactmode .hl-content img.chat-line__message--emote-gigantified,
			.notcompactmode .hl-content svg.chat-line__message--emote-gigantified {
				max-width: 112px;
				width: 112px;
			}

			.hl-message .hl-badge svg {
				max-height: 16px;
				margin-top: 1px;
			}

			.hl-message .hl-badge.img, .hl-message .hl-badge.video {
				max-height: 16px;
				margin-top: 4px;
			}

			.hl-message img:not(:first-child):last-child {
				margin: auto 1px auto 0px;
			}

			.hl-message span > img, .hl-message span > video {
				margin: auto 1px;
			}

			.hl-message img:first-child:not(:last-child) {
				margin: auto 0px auto 1px;
			}

			.twoLines.alignright .hl-message {
				display: flex;
				flex-direction: row-reverse;
				margin: 0 0 4px 0;
			}

			.twoLines.alignright .hl-message .time-arrived {
				margin: 6px 2px auto 8px;
			}

			.highlight {
				background-color: yellow !important;
			}
			
			svg.regular-emote, img.regular-emote {
				margin: auto 0;
			}

			img,
			svg {
				display: inline-block;
				max-width: 48px;
				max-height: 24px;
				position: relative;
				margin: auto;
				padding: 0;
				object-fit: contain;
				vertical-align: bottom;
			}
			
			#sceneButtons button.active {
				border:3px solid blue;
			}

			.hl-leftside {
				width: 75px;
				height: 75px;
				display: inline-block;
				margin: 3px;
				min-width: 75px;
				min-height: 75px;
			}
			.hl-leftside img , .hl-leftside video{
				max-height: 100%;
				max-width: 100%;
				height: 100%;
				width: 100%;
				object-fit: cover;
				margin: 0;
				padding: 0;
			}
			horizontal .largeavatar .hl-leftside {
				margin: 0px;
			}

			.hl-righttopline {
				display: inline-flex;
				margin: 5px 2px;
				width:100%;
			}
			.hl-righttopline .hl-source-type {
				max-height: 11px;
				vertical-align: baseline;
				top: 1px;
			}
			.hl-righttopline .hl-badge {
				max-height: 16px;
				vertical-align: middle;
				object-fit: contain;
				display: inline-block;
			}
			.hl-righttopline .hl-name {
				margin-right: 0;
			}
			.hl-righttopline .time-arrived {
				bottom: 1px;
				position: relative;
			}
			.hl-righttopline .hl-badges {
				margin: auto 0px auto 6px;
			}
			.hl-rightside {
				display: inline-block;
				margin: 0px 0px 0px 5px;
			}
			.hl-rightside .hl-message {
				margin: 2px 7px 2px 7px;
				display: inline-flex;
				width: -webkit-fill-available;
			}
			.hl-rightside .hl-message .donationAmount {
				margin: auto;
			}
			
			.alignright .hl-rightside.bubble .hl-message, .alignright .hl-rightside.bubble .hl-righttopline{
				margin-left: auto;
			}
			
			.alignright .hl-rightside.bubble .hl-righttopline .time-arrived{
				margin: 9.5px 2px auto 1px;
			}
			
			.alignright .highlight-chat.larger-emojis.compactmode .hl-message.bubble .hl-content {
				    margin: auto;
			}
			
			.hl-rightside.bubble .hl-message {
				margin: 4px 7px 7px 7px;
			}
			
			.bubble span.hl-content:empty {
				display:none;
			}
			
			.hl-message.bubble span.hl-donation {
				margin: auto 0
			}
			

			.bot > .hl-message {
				padding: 5px 0 5px 5px;
				font-style: italic;
			}

			.hl-compact-message {
				-webkit-box-decoration-break: clone;
				box-decoration-break: clone;
				padding-left: 5px;
				display: inline-block;
				height: 23px;
			}

			.hl-badges {
				margin-left: 4px;
			}
			.hl-badges:first-child {
				margin-left: 0;
			}

			.highlight-chat {
				display: var(--list-or-horizontal);
				cursor: var(--cursor-type);
				width: auto;
				background-color: var(--highlight-base);
				min-height: 24px;
				max-width: 100%;
				flex-direction: var(--flex-direction);
				padding-top: var(--padding-rows) !important;
				padding-bottom: var(--padding-rows) !important;
			}
			
			
			.highlight-chat.expand {
				animation: expand 2s;
				overflow: visible;
				word-break: break-all;
				line-break: anywhere;
			}
			
			@keyframes slideLeft { 
				from {
					transform: translateX(150%);
				}
				to {
					transform: translateX(0px);
				}
			}
			
			.horizontal .highlight-chat {
				vertical-align:top;
				animation: expand 4s, slideLeft 1s ease-in-out forwards;
				vertical-align: bottom;
			}
			
			.horizontal .highlight-chat.fadein {
				animation: expand 4s, slideLeft 1s ease-in-out forwards, fadein 2s;
			}
			
			.horizontal .highlight-chat.fadeout {
				animation:  expand 4s, slideLeft 1s ease-in-out forwards, fadeout 2s;
			}

			.larger-emojis {
				top: 0px;
				position: relative;
			}

			.highlight-chat.larger-emojis {
				overflow: hidden;
			}

			.horizontal .highlight-chat.compactmode {
				padding-top: 3px;
				background-color: #0000;
			}
			
			.horizontal:not(.alignbottom) .highlight-chat.compactmode {
				vertical-align: top;
				display:inline-flex;
			}

			.horizontal .compactmode.time-arrived {
				margin: auto 0;
			}
			

			.horizontal .highlight-chat.larger-emojis:not(.compactmode) {
				line-height: 30px; 
				height: 40px;
				max-height: 40px;
			}

			@keyframes ani {
				0% {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
				}
				50% {
					transform: rotate(45deg);
					-webkit-transform: rotate(45deg);
				}
				100% {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
				}
			}

			.brush {
				animation: ani 400ms alternate 1;
			}
			img.icon:not(:loaded){
				aspect-ratio: 1;
			}
			.larger-emojis img:not(.hl-badge, .icon) {
				height: var(--stylized-img);
				max-width: calc(var(--stylized-img) * 3);
				max-height: var(--stylized-img);
				vertical-align: middle;
			}


			.hl-message img:not(.hl-badge, .icon) {
				display: var(--show-images);
			}

			.hl-message .hl-badges .hl-badge.svg svg {
				max-height: 20px;
			}

			.larger-emojis img.hl-badge {
				height: 22px;
				max-height: 22px;
			}
			.larger-emojis .icon, .larger-emojis .svg.hl-badge  {
				height: 24px;
				max-height: 24px;
				vertical-align: top;
			}
			
			.hl-badge.svg {
				object-fit: contain;
				display: inline-block;
				width: auto;
			}

			.notcompactmode .highlight-chat > img.icon {
				top: 0px;
				margin: 1.6px 2px auto 1px;
			}

			.notcompactmode .larger-emojis > .time-arrived {
				margin: 12px 2px auto 1px;
			}

			.notcompactmode .larger-emojis .icon {
				margin: 5px 2px auto 1px;
			} 
			
			.notcompactmode .larger-emojis > img.icon {
				margin: 3px 2px auto 1px;
			} 
			
			.notcompactmode .larger-emojis .leftside.larger-emojis .icon{
				margin: 0px 2px auto 1px;
				vertical-align: top;
			}

			.notcompactmode .larger-emojis > .hl-name {
				margin: 2px 5px 0 5px;
			}

			.hide {
				display: none !important;
			}

			.queueid::before {
				content: attr(data-qid);
			}

			.queueid[data-qid] {
				margin: auto 3px;
			}

			@keyframes expand {
				0% {
					max-width: 0px;
				}
				40% {
					max-width: 600px;
				}
				80% {
					max-width: 1200px;
				}
				100% {
					max-width: 20000px;
				}
			}

			.hl-name {
				font-weight: 700;
				margin: auto 5px;
				position: relative;
				left: 0;
				width: fit-content;
				color: var(--font-color-name);
				display: inline-flex;
				font-size: var(--author-font-size);
			}

			.notcompactmode .hl-name {
				    margin: 3.14px 5px 0 5px;
				min-width: max(135px, 12vw);
				max-width: max(220px, 25vw);
				white-space: unset;
				min-height: 24px;
				line-height: max(var(--author-font-size), var(--message-line-height));
			}
			.notcompactmode .highlight-chat>div:not(.bubble) .hl-name {
				margin: 3.14px 5px 0 5px;
				position: static;
			}
			.notcompactmode .highlight-chat>div.bubble .hl-name {
				min-width: max(35px, 2vw);
				line-height: unset;
			}
			.notcompactmode div:not(.expand) > .time-arrived {
				margin: 9.5px 2px auto 1px;
			}
			
			.notcompactmode .hl-righttopline > div.time-arrived {
				margin: auto 2px auto 1px;
			}
			
			.hl-name:first-child {
				margin-left: 0;
			}

			.notcompactmode .highlight-chat {
				width: 100%;
				padding: 2px 1px;
				margin: 0;
				min-height: 27px;
			}

			@media only screen and (max-width: 400px) {
				.vanilla.notcompactmode .highlight-chat {
					display: flex;
					flex-wrap: wrap;
					padding: 10px 1px 8px 1px;
				}
				.vanilla.notcompactmode .hl-message:not(.bubble) {
					padding: 5px 2px 0;
				}
				.vanilla.notcompactmode .bubble {
					margin: 2px 2px 0 0px;
				}
				.vanilla.notcompactmode .donationAmount {
					margin-left: auto;
					margin-right: 3px;
				}

				.vanilla.notcompactmode .hl-name {
					min-width: unset;
				}
			}
			@media only screen and (max-width: 180px) {
				.time-arrived {
					display: none !important;
				}
			}

			@media only screen and (max-width: 660px) {
				.OBS.vanilla.notcompactmode .highlight-chat {
					display: flex;
					flex-wrap: wrap;
					padding: 10px 1px 8px 1px;
				}
				.OBS.vanilla.notcompactmode .hl-message:not(.bubble) {
					padding: 5px 2px 0;
				}
				.OBS.vanilla.notcompactmode .bubble {
					margin: 2px 2px 0 0px;
				}
				.OBS.vanilla.notcompactmode .donationAmount {
					margin-left: auto;
					margin-right: 3px;
				}

				.OBS.vanilla.notcompactmode .hl-name {
					min-width: unset;
				}
			}
			@media only screen and (max-width: 360px) {
				.OBS .time-arrived {
					display: none !important;
				}
			}

			.splitMode.hl-name {
				text-align: right;
				min-width: 0;
				margin: 3.5px 5px 0 5px;
				white-space: unset;
				overflow: hidden;
				height: 24px;
				line-height: max(var(--author-font-size), var(--message-line-height));
			}
			.leftside .hl-badges {
				position: relative;
				top:4px;
			}
			.leftside {
				min-width: max(300px, 15vw);
				text-align: right;
				margin-right: 8px;
				vertical-align: middle;
			}
			.leftside > img, .leftside > video{
				top: 0px;
				margin: 2px 2px auto 1px;
				vertical-align: top;
			}
			.larger-emojis > .hl-name {
				height: 30px;
				line-height: 29px;
			}

			.odd:not(.expand) {
				background-color: var(--highlight-base2);
			}

			.highlight-chat:hover {
				box-shadow: inset 7px 7px 20px #08080444, inset -7px -7px 20px #fcfcfc22, inset 1px 1px 2px #080804aa, inset -1px -1px 3px #fcfcfc77;
			}

			.highlight-chat.compactmode {
				background-color: var(--highlight-compact);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				padding-right: 3px;
			}

			.odd.compactmode:not(.expand) {
				background-color: var(--highlight-compact2);
			}

			.dono-highlight {
				background-color: var(--donation-bgcolor);
			}

			.odd.dono-highlight:not(.expand) {
				background-color: var(--donation-bgcolor-odd);
			}

			.bubble {
				border-radius: 13px;
				padding: 7px 12px 7px 10px;
				background-color: var(--bgcolor-bubble);
				margin: 0px 0 0px 5px;
			}

			.bubble.odd {
				background-color: var(--bgcolor-bubble-odd);
			}

			.bubble.dono-highlight {
				background-color: var(--donation-bgcolor-bubble);
				box-shadow: inset 0 0 2px #ffff00a1;
			}
			.bubble.odd.dono-highlight:not(.expand) {
				background-color: var(--donation-bgcolor-bubble-odd);
				box-shadow: inset 0 0 2px #ffff00a1;
			}

			.member {
				background-color: var(--member-bgcolor);
			}

			.odd.member:not(.expand) {
				background-color: var(--member-bgcolor-odd);
			}

			.bubble.member {
				background-color: var(--member-bgcolor-bubble);
				box-shadow: inset 0 0 2px #008f22b0;
			}

			.bubble.odd.member:not(.expand) {
				background-color: var(--member-bgcolor-bubble-odd);
				box-shadow: inset 0 0 2px #008f22b0;
			}

			.special {
				background-color: var(--special-bgcolor);
			}

			.odd.special:not(.expand) {
				background-color: var(--special-bgcolor-odd);
			}

			.bubble.special {
				background-color: var(--special-bgcolor-bubble);
				box-shadow: inset 0 0 2px #008f22b0;
			}

			.bubble.odd.special:not(.expand) {
				background-color: var(--special-bgcolor-bubble-odd);
				box-shadow: inset 0 0 2px #008f22b0;
			}

			body.lightmode .bubble {
				border-radius: 20px;
				padding: 10px;
				background-color: #eeed;
				margin: 0px 0 0px 5px;
			}
			body.lightmode .bubble.odd {
				border-radius: 20px;
				padding: 10px;
				background-color: #eee7;
				margin: 0px 0 0px 5px;
			}

			.donationAmount {
				text-shadow: 0 0 10px #fff, 0 0 20px var(--donation-amount), 0 0 30px var(--donation-amount);
				padding-left: 5px;
				margin: var(--donation-amount-margin);
				white-space: nowrap;
				margin: auto 0;
				margin: auto min(2%, 31px) auto auto
			}
			
			.horizontal .donationAmount {
				vertical-align: middle;
				margin: auto 0;
			}

			@-webkit-keyframes glow {
				from {
					text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffe60073, 0 0 40px #ffe60073, 0 0 50px #ffe60073, 0 0 60px #ffe60073, 0 0 70px #ffe60073;
				}
				to {
					text-shadow: 0 0 20px #fff, 0 0 30px #ffff4da6, 0 0 40px #ffff4da6, 0 0 50px #ffff4da6, 0 0 60px #ffff4da6, 0 0 70px #ffff4da6, 0 0 80px #ffff4da6;
				}
			}

			a {
				pointer-events: none;
			}

			.time-arrived {
				font-size: 10px;
				display: inline-block;
				margin: auto 1px;
				padding-right: var(--time-arrived-padding);
				left: 2px;
				position: relative;
				white-space: nowrap;
				vertical-align: middle;
			}

			#menu {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 42px;
				padding-top: 4px;
				padding-bottom: 0px;
				display: flex;
				justify-content: center;
				background: var(--menu-background-color);
				box-shadow: var(--menu-border-color);
				z-index: 2;
			}
			body.lightmode #menu {
				background-color: #f5f5f5;
			}

			.imgButton {
				position: relative;
				display: block;
				background-repeat: no-repeat;
				background-color: transparent; /* alpha */
				-webkit-app-region: no-drag;
				border: none;
				border-radius: 10px;

				width: 32px;
				height: 32px;
				background-size: 32px;
				margin-top: 3px;
				margin-left: 2px;
				margin-right: 2px;

				-webkit-app-region: no-drag;
			}
			.imgButton:hover {
				cursor: pointer;
				box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05); /* Light the button */
			}

			.imgSmallButton {
				/* Used with imgButton class */
				width: 20px;
				height: 20px;
				background-size: 20px;
				margin-top: 9px;
			}

			.horizontalSeparator {
				background-image: url(./icons/horizontal_separator.png);
				background-repeat: no-repeat;
				width: 1px;
				height: 32px;
				background-size: 1px 32px;
				margin-top: 6px;
				margin-left: 4px;
				margin-right: 4px;
			}

			.buttonBadge {
				position: absolute;
				display: flex;
				justify-content: center;
				background: #604080;
				color: white;
				border-radius: 50%;

				top: -7px;
				left: 11px;
				width: 10px;
				height: 10px;
				font-size: 10px;
			}
			.smallButtonBadge {
				/* Used with buttonBadge class */
				top: -8px;
				left: 5px;
				width: 10px;
				height: 10px;
				font-size: 10px;
			}

			#queueSection {
				display: flex;
			}

			#next_in_queue,
			#show_only_queue {
				display: inline-block;
			}

			.popInModal {
				position: fixed !important;
				padding: 4px 14px 4px;
				background-color: #0a0a0a;
				border-width: 2px;
				border-style: solid;
				border-color: #00000080;
				border-radius: 12px;
				position: absolute;
				margin: 0;
				display: flex;
				justify-content: center;
				-webkit-app-region: no-drag;
				z-index: 10;
			}
			.popInModal > .imgButton {
				margin-top: 2px;
			}
			
			@media only screen and (min-width: 700.001px) { 
				#chatInput_parent {
					top: unset;
					bottom: 5px;
					position: fixed;
					width: calc(100% - 10px);
					max-width: 700px;
				}
			}
			
			@media only screen and (max-width: 700px) {
				#chatInput_parent {
					position: fixed;
					bottom: 45px;
					left: 0;
					right: 0;
					top: unset;
					border-radius: 0;
					margin:5px 0px;
				}
				
				#chatInputCloseButton {
					display:none!important;
				}
			}
			
			.modalTextInput {
				height: 20px;
				font-size: 18px;
				background-color: transparent;
				flex: 1;
				border: 0;
				outline: none;

				color: #f5f5f5;
				opacity: 1; /* Firefox */
			}

			.hl-badge.textbadge {
				border-radius: 6px;
				padding: 0 5px;
				font-size: 50%;
				margin: 0 1px;
			}

			input[type="text"] {
				width: 110px;
			}
			input[type="text"]:focus {
				width: 170px;
			}

			input[type="text"] {
				-webkit-transition: all 0.3s ease 0s;
				transition: all 0.3s ease 0s;
			}
			span.zero-width-parent {
				display: inline-block;
				width: 0;
				position: absolute;
			}
			span.zero-width-parent img.zero-width-emote {
				right: 0;
				position: absolute;
			}
			#chatInput {
				width: 0;
				top: 2px;
				position: relative;
			}
			#chatInput_parent:empty {
				width: 0;
			}
			#chatInput:focus {
				width: 250px;
			}
			
			#chatInput_parent:not(.compactchat) {
				margin: 2.5px max( calc((100% - 700px) / 2 - 20px) , 0px);
			}

			#filter_messages {
				width: 0;
				top: 2px;
				position: relative;
			}
			#filter_messages_parent:empty {
				width: 0;
			}
			#filter_messages:focus {
				width: 124px;
			}

			.hl-message:empty {
				background-color: #0000;
			}

			body.lightmode .popInModal {
				background-color: #f5f5f5;
				border-color: #00000080;
				color: black;
			}
			body.lightmode .modalTextInput {
				color: #0a0a0a;
				opacity: 1; /* Firefox */
			}
			#menu.lightmode .imgButton:hover {
				cursor: pointer;
				box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); /* Light the button */
			}

			@media only screen and (max-width: 620px) {
				#chatInput:focus {
					width: 200px;
				}
			}

			@media only screen and (min-width: 560px) {
				.imgButton {
					margin-left: 6px;
					margin-right: 6px;
				}
			}

			@media only screen and (max-width: 560px) {
				#chatInput:focus {
					width: 180px;
				}
			}

			@media only screen and (max-width: 440px) {
				#menu {
					height: 38px;
					padding-top: 3px;
					padding-bottom: 0px;
				}
				.compactchat{
					bottom:41px;
				}
				#menu .horizontalSeparator {
					width: 1px;
					height: 28px;
					background-size: 1px 28px;
					margin-top: 4px;
					margin-left: 3px;
					margin-right: 3px;
				}
				.imgButton {
					width: 28px;
					height: 28px;
					background-size: 28px;
					margin-top: 4px;
					margin-left: 2px;
					margin-right: 2px;
				}
				.imgSmallButton {
					/* Used with imgButton class */
					width: 18px;
					height: 18px;
					background-size: 18px;
					margin-top: 8px;
					font-size: 10px;
				}
				#chatInput_parent {
					bottom:40px;
				}
				.buttonBadge {
					top: -7px;
					left: 9px;
					width: 9px;
					height: 9px;
					font-size: 9px;
				}
				.smallButtonBadge {
					/* Used with buttonBadge class */
					top: -7px;
					left: 4px;
					width: 9px;
					height: 9px;
					font-size: 9px;
				}
				.popInModal {
					padding: 3px 10px 3px;
				}
				.modalTextInput {
					height: 18px;
					font-size: 16px;
				}
				#chatInput:focus {
					width: 130px;
				}
				#filter_messages:focus {
					width: 100px;
				}
				#output {
					margin-bottom: calc((41px + var(--locked-chatbar)) / var(--scale-output)); /* Same as menu height + menu padding-top + menu padding-bottom */
				}
			}
			@media only screen and (min-width: 393px) {
				.imgButton {
					margin-left: 4px;
					margin-right: 4px;
				}
			}
			@media only screen and (max-width: 340px) {
				#menu {
					height: 34px;
					padding-top: 2px;
					padding-bottom: 0px;
				}
				.compactchat{
					bottom:36px;
				}
				#menu .horizontalSeparator {
					width: 1px;
					height: 24px;
					background-size: 1px 24px;
					margin-top: 4px;
					margin-left: 2px;
					margin-right: 2px;
				}
				.imgButton {
					width: 24px;
					height: 24px;
					background-size: 24px;
					margin-top: 4px;
					margin-left: 0px;
					margin-right: 0px;
				}
				.imgSmallButton {
					/* Used with imgButton class */
					width: 16px;
					height: 16px;
					background-size: 16px;
					margin-top: 8px;
					font-size: 8px;
				}
				#chatInput_parent {
					bottom:36px;
				}
				.buttonBadge {
					top: -6px;
					left: 8px;
					width: 8px;
					height: 8px;
					font-size: 8px;
				}
				.smallButtonBadge {
					/* Used with buttonBadge class */
					top: -6px;
					left: 4px;
					width: 8px;
					height: 8px;
					font-size: 8px;
				}
				.popInModal {
					padding: 2px 6px 2px;
				}
				.modalTextInput {
					height: 16px;
					font-size: 14px;
				}
				#chatInput:focus {
					width: 110px;
				}
				#filter_messages:focus {
					width: 76px;
				}
				#output {
					margin-bottom: calc((36px + var(--locked-chatbar)) / var(--scale-output)); /* Same as menu height + menu padding-top + menu padding-bottom */
				}
			}
			@media only screen and (max-width: 255px) {
				#menu {
					height: 30px;
					padding-top: 1px;
					padding-bottom: 0px;
				}
				.compactchat{
					bottom:31px;
				}
				#menu .horizontalSeparator {
					width: 1px;
					height: 20px;
					background-size: 1px 20px;
					margin-top: 4px;
					margin-left: 1px;
					margin-right: 1px;
				}
				.imgButton {
					width: 20px;
					height: 20px;
					background-size: 20px;
					margin-top: 4px;
					margin-left: 0px;
					margin-right: 0px;
				}
				.imgSmallButton {
					/* Used with imgButton class */
					width: 14px;
					height: 14px;
					background-size: 14px;
					margin-top: 7px;
					font-size: 7px;
				}
				#chatInput_parent {
					bottom:25px;
				}
				.buttonBadge {
					top: -6px;
					left: 6px;
					width: 7px;
					height: 7px;
					font-size: 7px;
				}
				.smallButtonBadge {
					/* Used with buttonBadge class */
					top: -6px;
					left: 3px;
					width: 7px;
					height: 7px;
					font-size: 7px;
				}
				.popInModal {
					padding: 1px 2px 1px;
				}
				.modalTextInput {
					height: 14px;
					font-size: 12px;
				}
				#chatInput:focus {
					width: 100px;
				}
				#filter_messages:focus {
					width: 70px;
				}
				#output {
					margin-bottom: calc((31px + var(--locked-chatbar))/ var(--scale-output)); /* Same as menu height + menu padding-top + menu padding-bottom */
				}
			}
			@media only screen and (max-width: 220px) {
				#menu {
					height: 26px;
					padding-top: 0px;
					padding-bottom: 0px;
				}
				.compactchat{
					bottom:26px;
				}
				#menu .horizontalSeparator {
					width: 0px;
					height: 16px;
					background-size: 0px 16px;
					margin-top: 5px;
					margin-left: 0px;
					margin-right: 0px;
					display: none !important;
				}
				.imgButton {
					width: 16px;
					height: 16px;
					background-size: 16px;
					margin-top: 5px;
					margin-left: 0px;
					margin-right: 0px;
				}
				.imgSmallButton {
					/* Used with imgButton class */
					width: 12px;
					height: 12px;
					background-size: 12px;
					margin-top: 7px;
					font-size: 5px;
				}
				.buttonBadge {
					top: -5px;
					left: 4px;
					width: 7px;
					height: 7px;
					font-size: 7px;
				}
				.smallButtonBadge {
					/* Used with buttonBadge class */
					top: -6px;
					left: 2px;
					width: 7px;
					height: 7px;
					font-size: 7px;
				}
				.popInModal {
					padding: 0px 0px 0px;
				}
				.modalTextInput {
					height: 12px;
					font-size: 10px;
				}
				#chatInput:focus {
					width: 72px;
				}
				#filter_messages:focus {
					width: 48px;
				}
				#output {
					margin-bottom: calc((26px + var(--locked-chatbar)) / var(--scale-output)); /* Same as menu height + menu padding-top + menu padding-bottom */
				}
			}

			.last-message:not(.horizontal) {
				border: 3px white solid;
			}
			.last-message2:not(.horizontal) {
				background-color: var(--pressed-color) !important;
			}
			.pressed {
				background-color: var(--pressed-color) !important;
			}
			.queued {
				background-color: #99a8cc !important;
			}
			#pinned .queued {
				background-color: var(--pinned-queued-bg) !important;
			}
			.icon {
				margin: 4px 2px auto 1px;
				border-radius: 50%;
			}
			.twoLines .icon {
				margin: 2px 2px auto 1px;
			}

			.invert {
				filter: invert(1);
			}

			#jumpto {
				position: fixed !important;
				bottom: min(14px, 3%);
				right: min(14px, 3%);
				margin-top: 0;
				margin-right: 0;
			}

			.hidden {
				display: none !important;
				opacity: 0 !important;
				width: 0 !important;
				height: 0 !important;
				visibility: hidden !important;
			}

			#pinned {
				position: sticky;
				top: 0 !important;
				background-color: var(--pinned-bg) !important;
				left: 0;
				width: 100%;
				border-bottom: solid 2px #fff;
				z-index: 1;
				zoom: var(--scale-output);
				overflow-y: auto;
				overflow-x: hidden;
				resize: vertical;
			}

			#pinned:empty {
				display: none;
			}
			span.emoji {
				font-size: var(--stylized-emoji);
				top: -1px;
				position: relative;
				vertical-align: sub;
				text-shadow: 0 0 #0000;
			}

			.alignbottom {
				bottom: 0;
				position: absolute;
				right: 0px;
				overflow-y: auto;
				max-height: 100%;
				overflow-x: hidden;
			}

			@keyframes fade {
				0% {
					opacity: 0;
				}
				5% {
					opacity: 1;
				}
				95% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

			.fadeout {
				animation: fadeout 2s;
				webkit-transition: opacity 1.5s ease-in-out;
				transition: opacity 1.5 ease-in-out;
				opacity: 0;
			}

			@keyframes fadeout {
				0% {
					opacity: 1;
				}
				75% {
					opacity: 0;
				}
				100% {
					opacity: 0;
				}
			}

			.fadein {
				animation: fadein 1s;
				webkit-transition: opacity 0.5s ease-in-out;
				transition: opacity 0.5s ease-in-out;
				opacity: 1;
			}
			

			
			@keyframes fadein {
				0% {
					opacity: 0;
				}
				10% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}

			.swiperight {
				animation: swiperight 1s;
			}
			@keyframes swiperight {
				0% {
					transform: translateX(-100vw);
				}
				100% {
					transform: translateX(0);
				}
			}

			.swipeleft {
				animation: swipeleft 1s;
			}
			@keyframes swipeleft {
				0% {
					transform: translateX(100vw);
				}
				100% {
					transform: translateX(0);
				}
			}

			.swipeup {
				animation: swipeup 1s;
			}
			@keyframes swipeup {
				0% {
					transform: translateY(-100vh);
				}
				100% {
					transform: translateY(0);
				}
			}

			.fadeout.swipeup {
				animation: fadeout 2s, swipeup 1s;
			}
			.fadein.swipeup {
				animation: fadein 2s, swipeup 1s;
			}

			.fadeout.fadein {
				animation: fadeout 2s, fadein 2s;
			}

			.swipeleft.fadein {
				animation: swipeleft 1s, fadein 1s;
			}
			.swipeleft.fadeout {
				animation: fadeout 2s, swipeleft 1s;
			}

			.swiperight.fadein {
				animation: swiperight 1s, fadein 1s;
			}
			.swiperight.fadeout {
				animation: swiperight 1s, fadeout 2s;
			}

			.swipeup.fadeout {
				animation: fadeout 2s, swipeup 1s;
			}

			.swipeleft.fadein.fadeout {
				animation: swipeleft 1s, fadein 1s, fadeout 2s;
			}
			.swipeup.fadein.fadeout {
				animation: swipeup 1s, fadein 1s, fadeout 2s;
			}
			.swiperight.fadein.fadeout {
				animation: swiperight 1s, fadein 1s, fadeout 2s;
			}

			.electronDraggable {
				-webkit-app-region: var(--electron-drag-fix);
			}

			.context-menu {
				display: none;
				position: fixed;
				z-index: 10 !important;
				padding: 12px 0 !important;
				width: 240px !important;
				background-color: #f4f4f4 !important;
				border: solid 1px #dfdfdf !important;
				box-shadow: 1px 1px 2px #cfcfcf !important;
			}
			.context-menu--active {
				display: block !important;
			}
			.context-menu__items {
				list-style: none !important;
				margin: 0;
				padding: 0;
			}
			.context-menu__item {
				display: block;
				margin-bottom: 4px !important;
				text-shadow: 0 0 black;
				cursor: pointer;
			}
			.context-menu__item:last-child {
				margin-bottom: 0 !important;
			}
			.context-menu__link {
				display: block;
				padding: 4px 12px;
				color: #0066aa;
				text-decoration: none;
			}
			.context-menu__item:hover > * {
				color: #fff !important;
			}
			.context-menu__item:hover {
				color: #fff !important;
				background-color: #0066aa !important;
			}
			.context-menu__tip {
				margin-left: 15px;
				color: #777;
				margin-top: 10px;
				padding-top: 10px;
				position: relative;
				top: 7px;
			}
			.hideMenuKeepScrollLock {
				height: 0 !important;
				border: 0 !important;
				box-shadow: unset !important;
				padding: 0 !important;
				margin: 0 !important;
			}
			.hideMenuKeepScrollLock > * {
				display: none !important;
			}
			.hideMenuKeepScrollLock > #jumpto {
				display: block !important;
			}

			.avatar-badge {
				width: 30% !important;
				height: 30% !important;
				position: relative;
				float: right;
				bottom: 20px;
				right: -5px;
			}

			img.zero-width-friendly + .zero-width-span {
				display: inline-block;
				width: 0;
				position: absolute;
			}

			img.zero-width-friendly + .zero-width-span img.zero-width-emote {
				right: 0;
				position: absolute;
			}

			span.zero-width-parent {
				display: inline-block;
				width: 0;
				position: absolute;
			}
			span.zero-width-parent img.zero-width-emote {
				position: absolute;
				right: 0;
			}

			.alignright .compactmode {
				margin-left: auto;
			}
			
			.horizontal .hl-message {
				min-height: 24px;
			}
			
			.alignright .horizontal .hl-donation {
				padding-right: 11px;
			}
			
			.alignright .horizontal {
				direction: ltr; 
			}
			
			.horizontal .hl-leftside:empty{
				 display: none;
			}
			
			.horizontal .hl-content {
				align-content: center;
			}

			.alignright .compactmode .hl-message {
				flex-direction: var(--flex-direction);
				overflow:hidden;
				text-overflow: ellipsis;
				margin-left: auto;
				display: flex;
			}
			
			.alignright .horizontal .compactmode div.hl-message {
				display: inline-block
			}
			
			.alignright .compactmode .bubble.hl-message {
				flex-direction: row;
				overflow:hidden;
				text-overflow: ellipsis;
				margin-left: auto;
				display: flex;
			}
			
			.alignright .hl-message.hl-content.bubble {
				margin-left: auto;
				display: flex;
			}
			
			.alignright .compactmode.horizontal .hl-message {
				display: inline-block;
			}
			
			.alignright  .hl-message .time-arrived {
				margin:auto 4px;
			}
			
			.alignright .highlight-chat .hl-firstline {
				overflow:hidden;
				text-overflow: ellipsis;
				margin-left: auto;
			}
			
			#currentScene {
				background-color:#0000;
				border:3px solid white;
				padding:2px 5px;
				cursor: pointer;
			}
			
			#currentScene:empty {
				display: none;
			}
			
		.emote-container {
		  display: inline-grid;
		  grid-template-columns: 1fr;
		  grid-template-rows: 1fr;
		  vertical-align: top;
		  justify-items: center;  /* Center horizontally */
		  align-items: center;    /* Center vertically */
		}

		.emote-container .regular-emote,
		.emote-container .zero-width-emote-centered,
		.emote-container .zero-width-emote {
		  grid-column: 1;
		  grid-row: 1;
		  max-width: 100%;
		  max-height: 100%;
		  object-fit: contain;
		}

		.emote-container .zero-width-emote-centered,
		.emote-container .zero-width-emote	{
		  z-index: 1;
		}

		.regular-emote,
		.zero-width-emote,
		.zero-width-emote-centered {
		  vertical-align: top;
		}
		#topbar {
			display: flex;
			margin: 0 auto;
			text-align: center;
			position: fixed;
			right: 0;
			z-index: 999;
			background-color: #0009;
			border-radius: 0 0 0 13px;
			padding-left: 3px;
		}
		#topbar:empty {
			display:none;
		}
		
		.output-container {
			mask-image: linear-gradient(to top,
				black 80%,
				transparent 100%
			);
			-webkit-mask-image: linear-gradient(to top,
				black 80%,
				transparent 100%
			);
			display: block;
			width: 100vw;
			height: 100vh;
			overflow-x: hidden;
			overflow-y: hidden !important;
			margin-bottom: 0;
		}
		.electronDraggable .output-container {
			height: calc(100vh); 
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE and Edge */
		}
		.electronDraggable .output-container::-webkit-scrollbar  {
			display: none; /* Chrome, Safari, Opera */
		}
		.OBS .output-container {
			overflow: hidden;
		}
		
		.output-container #output:not(.alignbottom) {
			height: 100%; /* This might not be wortwhile */
		}
		.OBS .output-container #output {
			  scrollbar-width: none; /* Firefox */
			  -ms-overflow-style: none; /* IE and Edge */
		}
		.OBS .output-container #output::-webkit-scrollbar {
			 display: none; /* Chrome, Safari, Opera */
		}

		</style>
	</head>
	<body id="main" class="vanilla notcompactmode">
		<div id="topbar"></div>
		<div id="pinned" class="output"></div>
		<div id="output" class="output"></div>
		<div id="menu" class="electronDraggable">
			<!-- Main buttons -->

			<button class="imgButton" id="pause" data-state="0" onclick="pause();" style="background-image: url(./icons/main_msg_pause.png)" title="Main — ⏸ Pause incoming chat messages"></button>
			<button class="imgButton" id="say_hello" data-state="0" style="background-image: url(./icons/main_msg_send.png)" title="Main — 💬 Send a text message to social endpoint. (Hold ALT to pop out)"></button>
			<button class="imgButton imgSmallButton" id="notify" data-state="0" onclick="notify();" style="background-image: url(./icons/main_msg_notify_off.png)" title="Main — 🔔 Start beeping when there is a new message"></button>
			<button class="imgButton imgSmallButton hidden" id="select_save_file" data-state="0" onclick="overwriteFile('setup');" style="border-radius:0;background-image: url(./icons/main_msg_save.png)" title="Main — 💾 Select the file you want to save the most recent message to"></button>

			<div class="horizontalSeparator"></div>

			<!-- Filter buttons -->

			<button class="imgButton" id="filter" data-state="0" style="background-image: url(./icons/filter_msg.png)" title="Filter — 🔽 Filter messages based on what you have entered"></button>
			<button class="imgButton imgSmallButton" id="hide_emoji" data-state="0" onclick="emoji();" style="background-image: url(./icons/filter_hideemojionly_on.png)" title="Filter — 😀🚫 Hide messages that contains emojis only"></button>
			<button class="imgButton imgSmallButton" id="only_donos" data-state="0" onclick="donos();" style="background-image: url(./icons/filter_showpaidonly_off.png)" title="Filter — 💲 Filter for messages that have donations/cheer"></button>
			<button class="imgButton imgSmallButton" id="only_members" data-state="0" onclick="members();" style="background-image: url(./icons/filter_showmembers_off.png)" title="Filter — 👑 Filter for messages that are from members"></button>

			<div class="horizontalSeparator"></div>

			<!-- Queue buttons -->
			<div id="queueSection" class="hidden">
				<button class="imgButton" id="next_in_queue" data-state="0" onclick="nextInQueue(event);" style="background-image: url(./icons/queue_show_next.png)" title="Queue — ⏭ Feature next message in queue (select messages holding CTRL for add them to the queue)"><span id="next_in_queue_badge" class="buttonBadge">0</span></button>
				<button class="imgButton imgSmallButton" id="show_only_queue" data-state="0" onclick="filterQueued();" style="background-image: url(./icons/queue_show_listonly_off.png)" title="Queue — 📑 Show only the messages in queue"></button>
				<div class="horizontalSeparator"></div>
			</div>

			<!-- Featured message buttons -->

			<button class="imgButton" id="clear_overlay" data-state="0" onclick="this.classList.remove('brush');setTimeout(function(ele){ele.classList.add('brush');},0,this);sendDataP2P(false);" style="background-image: url(./icons/featured_clear.png)" title="Featured — 🧹🌟 Clear the featured message (not this chat)"></button>
			<button class="imgButton" id="autoshow" data-state="0" onclick="autoShow();" style="background-image: url(./icons/featured_auto_stop.png)" title="Featured — 🌟 Auto-feature messages as they come in"></button>

			<div class="horizontalSeparator"></div>

			<!-- Text-to-speech buttons -->
			
			<div class="volume-container">
			    <input type="range" id="volumeSlider" min="0" max="100" value="100" class="volume-slider">
			    <button class="imgButton imgSmallButton" id="tts" data-state="0" style="background-image: url(./icons/tts_incoming_messages_off.png)" title="Text-to-speech — 🔊 Start reading incoming messages out-loud with text-to-speech"></button>
			</div>

			<!-- Scroll button -->
			<button class="imgButton imgSmallButton" id="jumpto" data-state="0" onclick="jumptoBottom();" style="background-image: url(./icons/scroll_to_bottom_off.png)" title="Scroll to bottom"></button>
		</div>
		<audio id="testtone" style="display: none" preload="metadata">
			<source src="./audio/tone.mp3" type="audio/mpeg" />
			<source src="./audio/tone.ogg" type="audio/ogg" />
		</audio>
		<nav id="context-menu" class="context-menu">
			<div class="closeBtn">X</div>
			<ul class="context-menu__items">
				<li class="context-menu__item" data-action="Delete">
					<a href="#" class="context-menu__link" data-action="Delete">
						🗑️
						<span>Delete Message</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="Block" title="All messages from user will be deleted; user will also get added to the hide-user list">
					<a href="#" class="context-menu__link" data-action="Block">
						🚫
						<span>Block User</span> 
					</a>
				</li>
				<li class="context-menu__item" data-action="History" title="Previous 10 messages from the user will be displayed">
					<a href="#" class="context-menu__link" data-action="History">
						📖
						<span>See User History</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="Queue">
					<a href="#" class="context-menu__link" data-action="Queue">
						🔢
						<span>Toggle Queue</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="Pin">
					<a href="#" class="context-menu__link" data-action="Pin">
						📌
						<span>Toggle Pin</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="TTS">
					<a href="#" class="context-menu__link" data-action="TTS">
						🗣️
						<span>Text to Speech</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="VIP">
					<a href="#" class="context-menu__link" data-action="VIP">
						⭐
						<span>VIP User</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="Copy">
					<a href="#" class="context-menu__link" data-action="Copy">
						📋
						<span>Copy Text</span>
					</a>
				</li>
				<li class="context-menu__item" data-action="Reply" title="Reply to this user; message goes to their tab only">
					<a href="#" class="context-menu__link" data-action="Reply">
						💬
						<span>Reply to User</span>
					</a>
				</li>
				<li class="hidden" id="TipRightClick">
					<hr />
					<span href="#">
						<small
							><i data-translate="hold-ctrl">tip: <b>CTRL</b>(⌘) + <b>Click</b> for alt-menu</i></small
						>
					</span>
				</li>
			</ul>
		</nav>
		
		<div id="obsControlModal" class="hidden">
		  <div class="modal-content">
			<h2>OBS Remote Control</h2>
			<div class="modal-section" id="obsScenes">
			  <h3>Scenes</h3>
			  <div id="sceneButtons">
				<button class="active">Player1</button>
				<button>Player2</button>
			  </div>
			</div>
			<div class="modal-section" id="obsControls">
			  <h3>Controls</h3>
			  <button id="streamingButton">Start Streaming</button>
			  <button id="recordingButton">Start Recording</button>
			</div>
			<div class="modal-section" id="obsStatus">
			  <h3>Status</h3>
			  <p>Current Scene: <span id="currentScene">Player1</span></p>
			  <p>Streaming: <span id="streamingStatus">Inactive</span></p>
			  <p>Recording: <span id="recordingStatus">Inactive</span></p>
			</div>
			<button id="closeModal" class="close-btn">Close</button>
		  </div>
		</div>

		<div id="chatInput_parent" class="popInModal hidden">
			<input id="chatInput" class="modalTextInput" type="text" placeholder="Send message...">
			<button id="chatInputButton" class="imgButton imgSmallButton" style="background-image: url(./icons/send_confirm.png)" title="💬 Send this message"></button>
			<button id="chatClearButton" class="imgButton imgSmallButton" style="background-image: url(./icons/clear.png)" title="🗑️ Clear all messages"></button>

			<button id="getChatSources" class="imgButton imgSmallButton" title="Change destination to send messages to. Default is all.">🌐</button>

			<button id="chatInputLockButton" class="imgButton imgSmallButton" title="🔐 Keep this chat cpen">🔓</button>
			<button id="chatInputCloseButton" class="imgButton imgSmallButton" style="margin-right: 0;background-image: url(./icons/close.png)" title="❌ Close this dialog"></button>
		</div>
		
		<div id="filter_messages_parent" class="popInModal hidden">
			<input id="filter_messages" class="modalTextInput" type="text" placeholder="Filter..." onchange="filterMessages(this.value);" />
			<button id="filterAddNameAndTimeButton" class="imgButton imgSmallButton" data-state="0" onclick="onClickFilterAddNameAndTimeButton(this);" style="background-image: url(./icons/filter_addnametime_off.png)" title="🆔 Include name and time when filtering"></button>
			<button id="filterClearButton" class="imgButton imgSmallButton" style="background-image: url(./icons/clear.png)" title="🧹 Clear this filter"></button>
			<button id="filterCloseButton" class="imgButton imgSmallButton" style="background-image: url(./icons/close.png)" title="❌ Close this dialog"></button>
		</div>
		<script src="tts.js"></script>
		<script>
			window.onerror = function backupErr(errorMsg, url = false, lineNumber = false) {
				console.error(errorMsg);
				console.error(lineNumber);
				console.error("Unhandled Error occured"); //or any message
				return false;
			};
			
			function log(msg) {
				//	console.log(msg);
			}

			function warnlog(msg, url = false, lineNumber = false) {
				console.warn(msg);
				//if (lineNumber) {
					//console.warn(lineNumber);
				//}
			}

			function errorlog(msg, url = false, lineNumber = false) {
				console.error(msg);
				if (lineNumber) {
					console.error(lineNumber);
				}
			}

			window.alert = function () {
				console.log("blocked");
			};
			window.eval = function () {
				console.log("blocked");
			};

			function getById(id) {
				// js helper
				var el = document.getElementById(id);
				if (!el) {
					console.log("couldn't find "+id);
					el = document.createElement("span"); // create a fake element
				}
				return el;
			}

			(function (w) {
				w.URLSearchParams =
					w.URLSearchParams ||
					function (searchString) {
						var self = this;
						self.searchString = searchString;
						self.get = function (name) {
							var results = new RegExp("[\?&]" + name + "=([^&#]*)").exec(self.searchString);
							if (results == null) {
								return null;
							} else {
								return decodeURI(results[1]) || 0;
							}
						};
					};
			})(window);

			function removeStorage(cname) {
				localStorage.removeItem(cname);
			}

			function clearStorage() {
				localStorage.clear();
				if (!session.cleanOutput) {
					warnUser("The local storage and saved settings have been cleared", 1000);
				}
			}

			function setStorage(cname, cvalue, minutes = 1) {
				// not actually a cookie
				var now = new Date();
				var item = {
					value: cvalue,
					expiry: now.getTime() + minutes * 60 * 1000
				};
				try {
					localStorage.setItem(cname, JSON.stringify(item));
				} catch (e) {
					errorlog(e);
				}
			}

			function getStorage(cname) {
				try {
					var itemStr = localStorage.getItem(cname);
				} catch (e) {
					errorlog(e);
					return;
				}
				if (!itemStr) {
					return "";
				}
				var item = JSON.parse(itemStr);
				var now = new Date();
				if (now.getTime() > item.expiry) {
					localStorage.removeItem(cname);
					return "";
				}
				return item.value;
			}
			var tainted = false;

			var urlParams = new URLSearchParams(window.location.search);
			var channel = null;
			var iframes = [];
			var queue = [];
			var selectedQueue = [];
			var datestamp = true;
			var nextComment = null;
			var roomID = "test";
			var messageTimeout = 0;
			var filtering = "";
			var filterAddNameAndTime = false;
			var applyCustomActions = false;
			var showsource = true;
			var compactmode = false;
			var darkmode = null;
			var scale = 1;
			var forceAutoscroll = false;
			var triggerState = true;
			var emojis = true;
			var pauseState = false;
			var timeoutTimer = null;
			var isOBSBrowserSource = false;
			var customNodeLimit = false;
			var body = document.body;
			var html = document.documentElement;
			var mainOutputWindow = getById("output");
			var fileStream, writer; // streaming message writer
			var newFileHandle = false; // single message writer
			var singlewriter = false;
			var odd = false;
			var showbadges = true;
			var colorized = false;
			var horizontal = false;
			var autoTimeoutEnabled = true;
			var autoScrollCatch = 200;

			var doubleLimit = false;
			
			var encode = false;
			

			try {
				if (window.electronApi) {
					// fix for electron dragging.
					document.body.style.width = "95%";
					setTimeout(function () {
						document.body.style.width = "100%";
					}, 1000);

					setTimeout(function () {
						document.body.style.width = "98%";
					}, 2000);

					setTimeout(function () {
						document.body.style.width = "100%";
					}, 5000);
					
					let writerCloseHandler = async () => {
						if (writer) {
						  await writer.close();
						  writer = null;
						}
					};
					  
					document.addEventListener('DOMContentLoaded', () => {
						window.electronApi.onCloseFileStream(writerCloseHandler);
					});
				}
			} catch (e) {
				//console.error(e);
			}

			var timeoutDelay = 0;
			if (urlParams.has("showtime")) {
				timeoutDelay = parseInt(urlParams.get("showtime")) || 20000;
			}
			
			var waitToReveal = 0;
			if (urlParams.has("delaytime")) {
				waitToReveal = parseInt(urlParams.get("delaytime")) || 10000;
				if (timeoutDelay){
					timeoutDelay += waitToReveal;
				}
			}
			
			var autoQueueTimeout = false
			if (urlParams.has("autoshowtime")) {
				autoQueueTimeout = parseInt(urlParams.get("autoshowtime")) || 20000;
			}
			
			var timePerCharacter = 60;
			if (urlParams.has("chartime")) {
				timePerCharacter = parseInt(urlParams.get("chartime")) || 60;
			}

			var badkarma = -1; // no filtering
			if (urlParams.has("badkarma")) {
				badkarma = urlParams.get("badkarma");
				if (badkarma == null) {
					badkarma = 0.1; // filter only really bad
				} else {
					badkarma = parseFloat(badkarma);
				}
			}

			if (urlParams.has("disabletimeout")) {
				autoTimeoutEnabled = false;
			}
			
			var blurred = false;
			if (urlParams.has("blur") || urlParams.has("blurred")) {
				blurred = urlParams.get("blur") ||  urlParams.get("blurred") || "5";
				blurred = parseFloat(blurred)+"px";
				document.documentElement.style.setProperty("--blur-amount", blurred);				
			}
			
			var onlyTwitch = false;
			var hideTwitch = false;
			if (urlParams.has("onlytwitch")) {
				onlyTwitch = true;
			}
			if (urlParams.has("hidetwitch")) {
				hideTwitch = true;
			}
			var onlyFrom = [];
			if (urlParams.get("onlyfrom")) {
				onlyFrom = urlParams.get("onlyfrom").toLowerCase().trim().split(",");
			} else if (urlParams.get("fromonly")) {
				onlyFrom = urlParams.get("fromonly").toLowerCase().trim().split(","); 
			}

			var hideFrom = [];
			if (urlParams.get("hidefrom") || urlParams.get("exclude")) {
				hideFrom = (urlParams.get("hidefrom") || urlParams.get("exclude")).toLowerCase().trim().split(",");
			}
			
			var trivialevents = false;
			if (urlParams.has("trivialevents")) {
				trivialevents = true;
			}

			var filterNamesNotMessages = false;
			if (urlParams.has("namefilter")) {
				filterNamesNotMessages = true;
				getById("filterAddNameAndTimeButton").title = "🆔 Match only on name, source and time when filtering. Not message content.";
			}
			
			var deleteOnlyLast = false;
			if (urlParams.has("deleteonlylast")) {
				deleteOnlyLast = true;
			}
			

			var thisLabel = false;
			if (urlParams.has("label")) {
				thisLabel = urlParams.get("label") || false;
			}

			var limitbadges = false;
			if (urlParams.has("limitbadges")) {
				limitbadges = 2;
				if (urlParams.get("limitbadges")) {
					limitbadges = urlParams.get("limitbadges");
				}
				limitbadges = parseInt(limitbadges);
			}

			var blockMessageSelecting = false;
			if (urlParams.has("viewonly")) {
				blockMessageSelecting = true;
			}

			var blockMessageSelecting2 = false;
			if (urlParams.has("chatmode")) {
				blockMessageSelecting2 = true;
			}

			var blockMessageSelecting3 = false;
			if (urlParams.has("helpermode")) {
				blockMessageSelecting3 = true;
			}

			if (urlParams.has("opacity")) {
				getById("main").style.opacity = urlParams.get("opacity") || 0.3;
			}

			var onlyquestions = false;
			if (urlParams.has("onlyquestions")) {
				onlyquestions = true;
			}
			var hidequestions = false;
			if (urlParams.has("hidequestions")) {
				hidequestions = true;
			}

			var stripLinks = false;
			if (urlParams.has("striplinks")) {
				stripLinks = true;
			}

			var activeLinks = false;
			if (urlParams.has("activelinks")) {
				activeLinks = true;
			}

			var shortlink = false;
			if (urlParams.has("shortlink")) {
				shortlink = true;
			}

			var stripEmojis = false;
			if (urlParams.has("stripemoji")) {
				stripEmojis = true;
			}

			var disolveEvents = false;
			if (urlParams.has("dissolve")) {
				disolveEvents = true;
			}

			if (blockMessageSelecting) {
				getById("say_hello").classList.add("hidden");
				getById("clear_overlay").classList.add("hidden");
				getById("autoshow").classList.add("hidden");
				getById("next_in_queue").classList.add("hidden");
				document.documentElement.style.setProperty("--cursor-type", "unset");
				document.querySelectorAll(".horizontalSeparator").forEach(ele => {
					ele.classList.add("hidden");
				});
			}
			if (blockMessageSelecting2) {
				//getById("say_hello").classList.add("hidden");
				getById("clear_overlay").classList.add("hidden");
				getById("autoshow").classList.add("hidden");
				getById("next_in_queue").classList.add("hidden");
				document.documentElement.style.setProperty("--cursor-type", "unset");
				document.querySelectorAll(".horizontalSeparator").forEach(ele => {
					ele.classList.add("hidden");
				});
			}
			if (blockMessageSelecting3) {
				getById("say_hello").classList.add("hidden");
				getById("clear_overlay").classList.add("hidden");
				getById("autoshow").classList.add("hidden");
				getById("next_in_queue").classList.add("hidden");
				document.documentElement.style.setProperty("--cursor-type", "unset");
				document.querySelectorAll(".horizontalSeparator").forEach(ele => {
					ele.classList.add("hidden");
				});
			}

			var highlightMembers = true;
			if (urlParams.has("nomemberhighlight")) {
				highlightMembers = false;
			}
			
			var beepwords = false;
			if (urlParams.has("beepwords")) {
				beepwords = true;
			}

			var highlightSpecial = true;

			var highlightDonos = true;
			if (urlParams.has("nodonohighlight")) {
				highlightDonos = false;

				document.documentElement.style.setProperty("--donation-bgcolor-odd", "unset");
				document.documentElement.style.setProperty("--donation-bgcolor", "unset");
				document.documentElement.style.setProperty("--donation-bgcolor-bubble-odd", "unset");
				document.documentElement.style.setProperty("--donation-bgcolor-bubble", "unset");
			}

			if (urlParams.has("pressedcolor")) {
				// must be a hex code value, without the #.
				let pressedColor = urlParams.get("pressedcolor") || false;
				if (!pressedColor) {
					document.documentElement.style.setProperty("--pressed-color", "unset", "");
				} else {
					document.documentElement.style.setProperty("--pressed-color", "#" + pressedColor, "");
				}
			}
			
			if (urlParams.has("donationright")) {
				document.documentElement.style.setProperty("--donation-amount-margin", "auto "+(urlParams.get("donationright")||30)+"px auto auto", "");
			}

			var pressedClass = "pressed";
			var lastMessageClass = "last-message";

			if (urlParams.has("unhighlight")) {
				pressedClass = "pressed2";
				lastMessageClass = "last-message2";
			}

			if (urlParams.has("nofeaturedhightlight")) {
				pressedClass = "pressed2";
				lastMessageClass = "last-message3";
			}

			//window.obsstudio

			var bubble = false;
			if (urlParams.has("bubble")) {
				bubble = true;
			}
			
			var showviewercount = false;
			if (urlParams.has("showviewercount")) {
				showviewercount = true;
			}

			if (urlParams.has("session")) {
				roomID = urlParams.get("session");
			} else if (urlParams.has("s")) {
				roomID = urlParams.get("s");
			} else if (urlParams.has("id")) {
				roomID = urlParams.get("id");
			} else if (window.location.protocol == "file:") {
				roomID = prompt("Enter your session ID here, or add it to the URL.");
				roomID = validateRoomId(roomID)
				if (roomID) {
					var href = window.location.href;
					var arr = href.split("?");
					var newurl;
					if (arr.length > 1 && arr[1] !== "") {
						newurl = href + "&session=" + roomID;
					} else {
						newurl = href + "?session=" + roomID;
					}
					window.history.pushState({ path: newurl.toString() }, "", newurl.toString());
				} else {
					document.write("You need to provide your extension's session ID for this page to work");
					alert("Invalid session ID");
					throw new Error('Invalid session ID');
				}
			} else {
				window.location.href = "https://github.com/steveseguin/live-chat-overlay#readme";
			}
			if (!roomID) {
				document.write("Invalid session ID");
				throw new Error('Invalid session ID');
			}
			
			var password = "false";
			if (urlParams.has("password")) {
				password = urlParams.get("password") || "false";
			}
			var fixed = false;
			if (urlParams.has("fixed")) {
				fixed = true;
			}

			if (urlParams.has("nodate") || urlParams.has("notimestamp") || urlParams.has("notime")) {
				datestamp = false;
			}

			if (urlParams.has("hidesource")) {
				showsource = false;
			}
			
			var passTTS = false;
			if (urlParams.has("passtts")) {
				passTTS = true;
			}
			
			if (urlParams.has("border")) {
				if (urlParams.get("border")) {
					document.documentElement.style.setProperty("--profile-pic-border", "3px solid " + urlParams.get("border"));
				} else {
					document.documentElement.style.setProperty("--profile-pic-border", "3px solid black");
				}
			}

			var twoLines = false;
			var largeavatar = false;
			if (urlParams.has("largeavatar")) {
				largeavatar = true;
				getById("output").classList.add("largeavatar");
			} else if (urlParams.has("twolines")) {
				tainted = true;
				twoLines = true;
				document.documentElement.style.setProperty("--list-or-horizontal", "block");
				document.documentElement.style.setProperty("--time-arrived-padding", "8px");
				document.body.classList.add("twoLines");
			}

			var splitMode = "";
			if (urlParams.has("split")) {
				splitMode = " splitMode";
			}
			
			function loadGoogleFont(fontParam) {
				const link = document.createElement("link");
				
				// Parse font family and variants
				let [fontName, ...variants] = fontParam.split(':');
				fontName = decodeURIComponent(fontName);
				
				// Build font family CSS value, stripping any weight/style specifications
				const cssFont = fontName.split(/\s+/)
					.filter(part => !part.match(/^(Light|Medium|Bold|Regular|Thin|Black|Italic|\d+)$/i))
					.join(' ');
					
				// Build Google Fonts URL
				link.href = `https://fonts.googleapis.com/css2?family=${fontParam}`;
				link.rel = "stylesheet";
				document.head.appendChild(link);
				
				var currentFont = getComputedStyle(document.documentElement).getPropertyValue("--font-family").trim();
				document.documentElement.style.setProperty("--font-family", `'${cssFont}', ${currentFont}`);
			}

			if (urlParams.get("font")) {
				document.documentElement.style.setProperty("--font-family", urlParams.get("font") + ", Avenir Next, Sora, Roboto, Helvetica, Geneva, Verdana, Arial, sans-serif");
			}
			if (urlParams.get("googlefont")) {
				loadGoogleFont(urlParams.get("googlefont"));
			}

			var scrolltype = "instant";
			if (urlParams.has("smooth")) {
				scrolltype = "smooth";
				autoScrollCatch = autoScrollCatch * 2;
			}
			
			var autofeaturepriv = false;
			if (urlParams.has("autofeaturepriv")) {
				autofeaturepriv = true;
			}
			
			var autofeaturevip = false;
			if (urlParams.has("autofeaturevip")) {
				autofeaturevip = true;
			}
			
			var trimChat = false;
			if (urlParams.has("trim")) {
				trimChat = urlParams.get("trim") || 200;
				trimChat = parseInt(trimChat) || 0;
			}
			
			var trimName = false;
			if (urlParams.has("trimname")) {
				trimName = urlParams.get("trimname") || 8;
			}
			
			var alignbottom = false;
			var fadetop = false;
			if (urlParams.has("fadedtop")) {
				fadetop = true;
				let oc = document.createElement("div");
				oc.className = "output-container";
				let oo = document.getElementById("output");
				oo.after(oc);
				oc.appendChild(oo);
			} 
			if (urlParams.has("alignbottom")) {
				getById("output").classList.add("alignbottom");
				alignbottom = true;
			}

			var attachmentsonly = false;
			if (urlParams.has("attachmentsonly")) {
				attachmentsonly = true;
			}

			var stripHTML = false;
			if (urlParams.has("strip") || urlParams.has("striphtml")) {
				// removes HTML from messages, donations, and names.
				stripHTML = true;
			}

			var audioContext = new (window.AudioContext || window.webkitAudioContext)();
			var timeoutTone = null;

			async function playtone(tonename = "testtone") {
				if (timeoutTone) {
					return;
				}
				timeoutTone = true;

				setTimeout(function () {
					timeoutTone = false;
				}, 500);

				if (audioContext.state == "suspended") {
					await audioContext.resume();
				}
				if (audioContext.state == "suspended") {
					return;
				}
				var toneEle = document.getElementById(tonename);
				if (toneEle) {
					toneEle
						.play()
						.then(() => {
							// beep
						})
						.catch(e => {
							console.error(e);
						});
				}
			}

			if (urlParams.has("css")) {
				var cssURL = urlParams.get("css");
				try {
					cssURL = decodeURI(cssURL);
				} catch (e) {}
				if (cssURL.startsWith("http")) {
					var cssStylesheet = document.createElement("link");
					cssStylesheet.rel = "stylesheet";
					cssStylesheet.type = "text/css";
					cssStylesheet.media = "screen";
					cssStylesheet.href = cssURL;
					document.getElementsByTagName("head")[0].appendChild(cssStylesheet);
				} else {
					var cssStylesheet = document.createElement("style");
					cssStylesheet.innerHTML = cssURL;
					document.getElementsByTagName("head")[0].appendChild(cssStylesheet);
				}
			}

			if (urlParams.has("base64css") || urlParams.has("b64css") || urlParams.has("cssbase64") || urlParams.has("cssb64")) {
				try {
					var base64Css = urlParams.get("base64css") || urlParams.get("b64css") || urlParams.get("cssbase64") || urlParams.get("cssb64");
					try {
						base64Css = atob(base64Css); // window.btoa(encodeURIComponent("#mainmenu{background-color: pink;}" ));
					} catch (e) {}
					try {
						base64Css = decodeURIComponent(base64Css); // window.btoa(encodeURIComponent("#mainmenu{background-color: pink; ❤" ));
					} catch (e) {}
					var cssStyleSheet = document.createElement("style");
					cssStyleSheet.innerText = base64Css;
					document.querySelector("head").appendChild(cssStyleSheet);
				} catch (e) {
					console.error(e);
				}
			}

			var transitionType = [];

			if (urlParams.has("fadein")) {
				transitionType.push("fadein");
			}

			var fadeout = false;
			if (urlParams.has("fadeout")) {
				fadeout = true;
			}

			var replaceURLInLink = true;
			if (urlParams.has("readouturls")) {
				replaceURLInLink = false;
			}

			var hideNumbers = false;
			if (urlParams.has("hidenumbers")) {
				hideNumbers = true;
			}

			if (urlParams.has("swiperight")) {
				transitionType.push("swiperight");
			}

			if (urlParams.has("swipeleft")) {
				transitionType.push("swipeleft");
			}

			if (urlParams.has("swipeup")) {
				transitionType.push("swipeup");
			}

			var reversed = false;

			if (urlParams.has("autoscroll")) {
				forceAutoscroll = false;
				jumptoBottom();
			}
			
			var lastChatName = "";
			var lastType = "";
			var simpleSequence = false;
			if (urlParams.has("sequence")) {
				simpleSequence = true;
			}

			var obsremote = "";
			var remote = "";
			if (urlParams.has("remote")) {
				remote = urlParams.get("remote") || "true";
				if (urlParams.get("remote")){
					obsremote = "&remote=" + urlParams.get("remote");
				} else {
					obsremote = "&obsremote";
				}
			}
			
			var lanonly = "";
			if (urlParams.has("lanonly")) {
				lanonly = "&lanonly";
			}

			var filtercommands = false;
			if (urlParams.has("hidecommands")) {
				filtercommands = true;
			}

			if (urlParams.has("reverse")) {
				reversed = true;
				forceAutoscroll = false;
				getById("output").style.flexDirection = "column-reverse";
				getById("output").style.display = "flex";
			}

			if (urlParams.has("dropdown")) {
				reversed = true;
				forceAutoscroll = false;
				getById("output").style.flexDirection = "column-reverse";
				getById("output").style.display = "flex";
				transitionType.push("swipeup");
			}

			var animatein = false;
			if (urlParams.get("animatein")) {
				const link = document.createElement("link");
				link.href = "./thirdparty/animate.css";
				link.rel = "stylesheet";
				document.head.appendChild(link);
				animatein = "animate__" + urlParams.get("animatein");
				transitionType.push("animate__animated");
				transitionType.push("animate__" + urlParams.get("animatein"));
			}
			var animateout = false;
			if (urlParams.get("animateout")) {
				if (!animatein) {
					const link = document.createElement("link");
					link.href = "./thirdparty/animate.css";
					link.rel = "stylesheet";
					document.head.appendChild(link);
					transitionType.push("animate__animated");
				}
				animateout = "animate__" + urlParams.get("animateout");
			}

			function validateRoomId(roomId) {
				if (roomId == null || roomId === '') {
					return false;
				}
				let sanitizedId = String(roomId).trim();

				if (sanitizedId.length < 1) {
					return false;
				}
				const reservedValues = [
					'undefined',
					'null',
					'false',
					'true',
					'NaN',
					'default',
					'room',
					'lobby',
					'test',
					'nothing',
					'0',
					'1',
					'none'
				];
				if (reservedValues.includes(sanitizedId.toLowerCase())) {
					return false;
				}
				sanitizedId = sanitizedId.replace(/[^a-zA-Z0-9]/g, '_');
				if (/^_+$/.test(sanitizedId)) {
					return false;
				}
				if (sanitizedId.length < 2) {
					return false;
				}
				const MAX_LENGTH = 80;
				if (sanitizedId.length > MAX_LENGTH) {
					return false;
				}

				return sanitizedId;
			}

			function updateAudioSource(newUrl) {
				var audioElement = getById("testtone");
				var sources = audioElement.getElementsByTagName("source");
				var extension = newUrl.split(".").pop().toLowerCase();
				var mimeType;

				switch (extension) {
					case "mp3":
						mimeType = "audio/mpeg";
						break;
					case "wav":
						mimeType = "audio/wav";
						break;
					case "ogg":
						mimeType = "audio/ogg";
						break;
					case "aac":
					case "m4a":
						mimeType = "audio/aac";
						break;
					case "opus":
						mimeType = "audio/opus";
						break;
					case "flac":
						mimeType = "audio/flac";
						break;
					case "webm":
						mimeType = "audio/webm";
						break;
					default:
						console.error("Unsupported file type:", extension);
						return;
				}
				if (sources.length === 1) {
					sources[0].src = newUrl;
					sources[0].type = mimeType;
				} else {
					audioElement.innerHTML = "";
					var newSource = document.createElement("source");
					newSource.src = newUrl;
					newSource.type = mimeType;
					audioElement.appendChild(newSource);
				}
				audioElement.load();
			}

			if (urlParams.get("custombeep")) {
				updateAudioSource(urlParams.get("custombeep"));
			}

			if (urlParams.has("beepvolume")) {
				try {
					getById("testtone").volume = parseInt(urlParams.get("beepvolume")) / 100 || 0;
				} catch (e) {
					console.error(e);
				}
			}

			var beep = false;
			if (urlParams.has("beep")) {
				// removes HTML from messages, donations, and names.
				beep = true;
				let ele = getById("notify");
				ele.dataset.state = beep * 1;
				ele.style["background-image"] = "url(./icons/main_msg_notify_on.png)";
				ele.title = "Main — 🔕 Stop beeping when there is a new message";
				playtone();
			}
			
			
			var nobeepbot = false;
			if (urlParams.has("nobeepbot")) {
				nobeepbot = true;
			}
			
			var nobeephost = false;
			if (urlParams.has("nobeephost")) {
				nobeephost = true;
			}
			
			var nobeepevent = false;
			if (urlParams.has("nobeepevent")) {
				nobeepevent = true;
			}
			
			var nobeepmod = false;
			if (urlParams.has("nobeepmod")) {
				nobeepmod = true;
			}
			
			var stylizeEmoji = false;
			if (urlParams.has("emoji") || urlParams.has("emojis")) {
				stylizeEmoji = urlParams.get("emoji") || urlParams.get("emojis") || "140";
				const scale = (parseFloat(stylizeEmoji) / 100) || 1;
				document.documentElement.style.setProperty("--stylized-emoji", `${100 * scale}%`);
				document.documentElement.style.setProperty("--message-line-height", `${21 * scale}px`);
				document.documentElement.style.setProperty("--stylized-img", `${scale * 21}px`);
			}

			var flexOrNotToFlex = "flex";

			if (urlParams.has("horizontal")) { 
				
				tainted = true;
				horizontal = true;
				flexOrNotToFlex = "inline-block";
				document.documentElement.style.setProperty("--list-or-horizontal", flexOrNotToFlex);
				getById("output").style.width = "10000%";
				getById("output").style.right = "0";
				if (twoLines) {
					getById("output").style.maxHeight = "70px";
					//getById("menu").style.top = "72px";
					getById("output").style.overflow = "visible";
				} else if (stylizeEmoji) {
					getById("output").style.maxHeight = "70px";
					//getById("menu").style.top = "42px";
					getById("output").style.overflow = "hidden";
				} else {
					getById("output").style.maxHeight = "60px";
					//getById("menu").style.top = "42px";
					getById("output").style.overflow = "hidden";
				}
				if (largeavatar){
					if (twoLines){
						getById("output").style.maxHeight = "140px";
					} else {
						getById("output").style.maxHeight = "120px";
					}
				}

				getById("output").style.position = "absolute";
				getById("output").style.textAlign = "right";
				
				if (!(urlParams.has("compact") || urlParams.has("overlaymode"))) {
					getById("output").style.whiteSpace = "nowrap"
				} else {
					getById("output").style.maxHeight = "200px";
					getById("output").classList.add("allowfat");
					getById("output").style.whiteSpace = "nowrap"
				}
				
				getById("output").classList.add('horizontal');
				
				document.body.classList.remove("notcompactmode");
				compactmode = true;
				customNodeLimit = 15;
			}

			var avatars = true;
			if (urlParams.has("noavatar") || urlParams.has("noavatars")) {
				avatars = false;
			}
			
			const colors = [
			  'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
			  'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood',
			  'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
			  'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue',
			  'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
			  'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey',
			  'honeydew', 'hotpink',
			  'indianred', 'indigo', 'ivory',
			  'khaki',
			  'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen',
			  'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
			  'navajowhite', 'navy',
			  'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid',
			  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple',
			  'rebeccapurple', 'red', 'rosybrown', 'royalblue',
			  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
			  'tan', 'teal', 'thistle', 'tomato', 'turquoise',
			  'violet',
			  'wheat', 'white', 'whitesmoke',
			  'yellow', 'yellowgreen'
			];
			
			function processTierParam(urlParams) {
				let tiers = [];
				// ! I would def be okay with a blue, purple, and gold outline on gifts 500 - 10k 10k-20k and then 20k+.
				if (urlParams.has("t1")){
					let [threshold, color] = [urlParams.get("t1") || 0, urlParams.get("t1c") || "#00F" ];
					color = color.replace("#","");
					if (colors.includes(colors)){
						// color name
					} else if (color.length === 3){
						if (highlightDonos){
							color="#"+color+"3";
						} else {
							color="#"+color;
						}
					} else if (color.length === 4){
						color="#"+color;
					} else if (color.length === 6){
						if (highlightDonos){
							color="#"+color+"33";
						} else {
							color="#"+color;
						}
					} else if (color.length === 8){
						color="#"+color;
					}
					tiers.push([parseFloat(threshold)||0, color]);
				}
				if (urlParams.has("t2")){
					let [threshold, color] = [urlParams.get("t2") || 0,urlParams.get("t2c") || "#F0F" ];
					color = color.replace("#","");
					if (colors.includes(colors)){
						// color name
					} else if (color.length === 3){
						if (highlightDonos){
							color="#"+color+"3";
						} else {
							color="#"+color;
						}
					} else if (color.length === 4){
						color="#"+color;
					} else if (color.length === 6){
						if (highlightDonos){
							color="#"+color+"33";
						} else {
							color="#"+color;
						}
					} else if (color.length === 8){
						color="#"+color;
					}
					tiers.push([parseFloat(threshold)||0, color]);
				}
				if (urlParams.has("t3")){
					let [threshold, color] = [urlParams.get("t3") || 0,urlParams.get("t3c") || "#FDD035" ];
					color = color.replace("#","");
					if (colors.includes(colors)){
						// color name
					} else if (color.length === 3){
						if (highlightDonos){
							color="#"+color+"3";
						} else {
							color="#"+color;
						}
					} else if (color.length === 4){
						color="#"+color;
					} else if (color.length === 6){
						if (highlightDonos){
							color="#"+color+"33";
						} else {
							color="#"+color;
						}
					} else if (color.length === 8){
						color="#"+color;
					}
					tiers.push([parseFloat(threshold)||0, color]);
				}
				
				tiers.sort((a, b) => b[0] - a[0]); // Sort descending
				
				return tiers?.length ? tiers : null;
			}

			function getColorForAmount(data) {
				
				let amount = data.donoValue || toUSD(data.donation || data.hasDonation);
				
				for (const [threshold, color] of tiers) {
					if (amount >= threshold) return color;
				}
				return null;
			}
			
			function toUSD(value) {
			  const rates = {
				EUR: 1.08,
				GBP: 1.26,
				JPY: 0.0067,
				CHF: 1.12,
				AUD: 0.66,
				CAD: 0.74,
				CNY: 0.14,
				HKD: 0.13,
				NZD: 0.61,
				KRW: 0.00075
			  };

			  const items = {
				diamond: 0.005,
				gold: 0.01,
				coin: 0.01,
				rose: 0.01,
				gift: 0.02 // this is just a guess
			  };

			  if (typeof value !== 'string') value = String(value);
			  value = value.trim().toLowerCase();
			  
			  const numericValue = value.replace(/[^\d.-]/g, '');
			  const amount = parseFloat(numericValue);
			  
			  if (isNaN(amount)) return 0;

			  // Handle items like "3 coins" or "2 roses"
			  for (const [item, rate] of Object.entries(items)) {
				if (value.includes(item) || value.includes(item + 's')) {
				  return amount * rate;
				}
			  }
			  
			  // Strip common currency symbols for better detection
			  const cleanValue = value.replace(/[$€£¥]/g, '').trim();
			  
			  // Handle currency codes with symbols like "$1 CAD"
			  for (const [currency, rate] of Object.entries(rates)) {
				if (cleanValue.includes(currency.toLowerCase())) {
				  return amount * rate;
				}
			  }
			  
			  // Default to USD if no other currency found
			  return amount;
			}
			
			const tiers = processTierParam(urlParams);

			if (urlParams.has("limit")) {
				customNodeLimit = parseInt(urlParams.get("limit")) || 200;
			}
			
			var hideshortmessages = false;
			if (urlParams.has("hideshortmessages")) {
				hideshortmessages = parseInt(urlParams.get("hideshortmessages")) || 5;
			}

			if (urlParams.has("hidebadges") || urlParams.has("nobadges")) {
				showbadges = false;
			}

			var doNotAutoshowFiltered = false;
			if (urlParams.has("excludefiltered")) {
				doNotAutoshowFiltered = true;
			}

			if (urlParams.has("colorednames") || urlParams.has("color")) {
				colorized = true;
			}

			if (urlParams.has("largecontent")) {
				getById("output").classList.add("largeContent");
			}

			var custombot = false;
			if (urlParams.has("myname") || urlParams.has("botnames") ||  urlParams.has("botlist")) {
				custombot = urlParams.get("myname") || urlParams.get("botlist") || false;
				if (custombot) {
					custombot = decodeURIComponent(custombot);
					custombot = custombot.toLowerCase().replace(/[^a-z0-9,_]+/gi, "");
					custombot = custombot.split(",");
				}
			}

			var doNotShowBot = false;
			if (urlParams.has("hidebots")) {
				doNotShowBot = true;
			}

			var doNotShowBotNames = false;
			if (urlParams.has("hidebotnames")) {
				doNotShowBotNames = true;
			}
			
			var doNotShowHost = false;
			if (urlParams.has("hidehosts")) {
				doNotShowHost = true;
			}

			var doNotShowHostNames = false;
			if (urlParams.has("hidehostnames")) {
				doNotShowHostNames = true;
			}

			var autoshow = false;
			var autoshowdonos = false;
			var autoshowmembers = false;
			var autoyoutubememberchat = false;
			
			var autoshowqueued = false;
			if (urlParams.has("autoshowqueued")) {
				autoshowqueued = true;
				getById("next_in_queue").style["background-image"] = "url(./icons/queue_show_autonext.png)";
				getById("next_in_queue").title = "Auto-showing all queued messages. Click to disable";
				getById("autoshow").classList.remove("hidden");
				getById("queueSection").classList.remove("hidden");
				//getById("next_in_queue_badge").classList.add("hidden");
			}

			if (urlParams.has("autoshow")) {
				autoShow();
			}
			
			var autoShowQueue = [];

			if (urlParams.has("autoshowdonos")) {
				autoshowdonos = true;
			}

			if (urlParams.has("autoshowmembers")) {
				autoshowmembers = true;
			}
			
			if (urlParams.has("autoyoutubememberchat")) {
				autoyoutubememberchat = true;
			}
			
			var giveVIPBadge = false;
			if (urlParams.has("showvipbadge")) {
				giveVIPBadge = true;
			}

			var openChatAutomatically = false;
			if (urlParams.has("openchat")) {
				openChatAutomatically = true;
			}

			if (urlParams.has("scale")) {
				scale = urlParams.get("scale") || 1.0;
				scale = parseFloat(scale);
				document.documentElement.style.setProperty("--scale-output", scale);
				autoScrollCatch *= scale;
			}
			
			
			var conCon = 1;
			var socketserver = false;
			var serverURL = urlParams.has("localserver") ? "ws://127.0.0.1:3000" : "wss://io.socialstream.ninja/api";
			var reconnectionTimeout = null;
			function setupSocket() {
				// Clear any existing reconnection timeout
				if (reconnectionTimeout) {
					clearTimeout(reconnectionTimeout);
					reconnectionTimeout = null;
				}

				if (socketserver) {
					socketserver.onclose = null;
					socketserver.close();
					socketserver = null;
				}
				socketserver = new WebSocket(serverURL);

				socketserver.onclose = function () {
					reconnectionTimeout = setTimeout(function () {
						conCon += 1;
						setupSocket();
					}, 100 * conCon);
				};
				socketserver.onopen = function () {
					conCon = 1;
					socketserver.send(JSON.stringify({ join: roomID.split(",")[0], out: 2, in: 1 }));
					console.log("output channel: 2, input channel: 1");
				};

				socketserver.onerror = function (error) {
					console.error("WebSocket error:", error);
					socketserver.close();
				};

				socketserver.addEventListener("message", function (event) {
					var resp = false;
					if (event.data) {
						try {
							var data = JSON.parse(event.data);
						} catch (e) {
							return;
						}
						resp = processInput(data);
						//console.log(resp);
						if (resp !== null) {
							if (data.get) {
								var ret = {};
								ret.callback = {};
								ret.callback.get = data.get;
								ret.callback.result = resp;
								socketserver.send(JSON.stringify(ret));
							}
						}
					}
				});
			}

			if (urlParams.has("server")) {
				serverURL = urlParams.get("server") || serverURL;
				setupSocket();
			}

			//

			var conConExtension = 1;
			var socketserverExtension = false;
			var serverURLExtension = urlParams.has("localserver") ? "ws://127.0.0.1:3000" : "wss://io.socialstream.ninja/extension";
			var server2 = false;
			var server3 = false;
			var reconnectionTimeoutExtension = null;

			function setupSocketExtension() {
				if (reconnectionTimeoutExtension) {
					clearTimeout(reconnectionTimeoutExtension);
					reconnectionTimeoutExtension = null;
				}

				if (socketserverExtension) {
					socketserverExtension.onclose = null;
					socketserverExtension.close();
					socketserverExtension = null;
				}

				socketserverExtension = new WebSocket(serverURLExtension);

				socketserverExtension.onclose = function () {
					reconnectionTimeoutExtension = setTimeout(function () {
						conConExtension += 1;
						setupSocketExtension();
					}, 100 * conConExtension);
				};
				socketserverExtension.onopen = function () {
					conConExtension = 1;
					socketserverExtension.send(JSON.stringify({ join: roomID.split(",")[0], out: 3, in: 4 }));
					console.log("output channel: 3, input channel: 4");
				};

				socketserverExtension.onerror = function (error) {
					console.error("WebSocket error:", error);
					socketserverExtension.close();
				};

				socketserverExtension.addEventListener("message", function (event) {
					var resp = false;
					if (event.data && server2) {
						try {
							var data = JSON.parse(event.data);
							processInput(data);
						} catch (e) {
							console.error(e);
						}
					}
				});
			}

			if (urlParams.has("server2")) {
				server2 = true;
				if (urlParams.has("server3")) {
					server3 = true;
				}
				serverURLExtension = urlParams.get("server2") || serverURLExtension;
				setupSocketExtension();
			} else if (urlParams.has("server3")) {
				server3 = true;
				serverURLExtension = urlParams.get("server3") || serverURLExtension;
				setupSocketExtension();
			}

			var filterEvents = false;
			if (urlParams.has("filterevents")) {
				// &filterevents=joined,otherkeyword
				filterEvents = urlParams.get("filterevents") || false;
				if (filterEvents) {
					filterEvents = filterEvents.split(",");
				}
			}

			var customSource = false;
			if (urlParams.has("branded")) {
				customSource = true;
			}
			
			if (urlParams.has("chroma")) {
				var chroma = urlParams.get("chroma") || "0F0";
				document.body.style.backgroundColor = "#" + chroma;
			}

			if (urlParams.has("compact") || urlParams.has("overlaymode")) {
				compactmode = true;
				document.body.classList.remove("notcompactmode");
				document.documentElement.style.setProperty("--padding-rows", "2px");
				document.documentElement.style.setProperty("--list-or-horizontal", "flex");
			}

			if (urlParams.has("padding")) {
				document.documentElement.style.setProperty("--padding-rows", (parseInt(urlParams.get("padding") || 5)) + "px");
			}
			
			var hardFilter = false;

			if (urlParams.has("hidemenu") || urlParams.has("nomenu")) {
				hardFilter = true;
				document.body.classList.add("electronDraggable");
				if (urlParams.get("hidemenu") == "2" || urlParams.get("nomenu") == "2") {
					getById("menu").classList.add("hideMenuKeepScrollLock");
					getById("output").style.marginBottom = "0";
				} else {
					getById("menu").style.display = "none";
					getById("output").style.marginBottom = "0";
				}
				
			}
			if (urlParams.has("chatonly")) {
				//document.body.classList.add("electronDraggable");
				getById("menu").innerHTML = "";
				getById("menu").appendChild(getById("chatInput_parent"));
				getById("chatInput_parent").outerHTML = getById("chatInput_parent").innerHTML;
				getById("chatInput").style.height = "27px";
				getById("chatInput").style.paddingLeft = "5px";
				getById("chatInputLockButton").classList.add("hidden");
				getById("chatInputCloseButton").classList.add("hidden");
				getById("chatInput").classList.add("locked");
			}

			if (urlParams.has("notobs")) {
				window.obsstudio = false;
			}
			
			
			var stripDonationData = false;
			if (urlParams.has("stripdonations")) {
				stripDonationData = true;
			}
			
			var skipDonations = false;
			if (urlParams.has("skipdonations")) {
				skipDonations = true;
			}

			var clock24hr = false;
			if (urlParams.has("24hr")) {
				clock24hr = true;
			}

			var selfQueue = false;
			if (urlParams.has("selfqueue")) {
				selfQueue = urlParams.get("selfqueue") || "!queue";
				selfQueue = selfQueue.split(',').map(item => item.trim());
			}

			var saveimg = false;
			if (urlParams.has("saveimg")) {
				saveimg = true;
			}

			if (urlParams.has("save")) {
				encode = TextEncoder.prototype.encode.bind(new TextEncoder());
				setupSaveToDisk();
			}

			if (urlParams.has("savesingle")) {
				singlewriter = true;
				getById("select_save_file").classList.remove("hidden");
				//overwriteFile(); // setup , but this needs a gesture, so bleh
			}

			singlefeaturedwriter = false;
			if (urlParams.has("savefeatured")) {
				singlefeaturedwriter = true;
				getById("select_save_file").classList.remove("hidden");
				//overwriteFile(); // setup , but this needs a gesture, so bleh
			}

			var random = false;
			if (urlParams.has("random")) {
				random = true;
				// enable compact mode also
				compactmode = true;
				document.body.classList.remove("notcompactmode");
				getById("menu").style.display = "none";
				hardFilter = true;
				document.body.classList.add("electronDraggable");
				// hide shadows
				// <!-- position: absolute; -->
				// <!-- left: 400px; -->
				// <!-- top: 0px; -->
				// <!-- max-width: 300px; -->
			}

			var textDirection = "auto";
			if (urlParams.has("rtl")) {
				textDirection = "rtl"; // dir="rtl"
			}

			var debug = false;
			if (urlParams.has("debug")) {
				debug = true;
			}
			
			var filtertid = false;
			if (urlParams.has("filtertid")) {
				filtertid = urlParams.get("filtertid");
				filtertid = filtertid.split(",").map(Number);
			}
			
			if (urlParams.has("alignright")) {
				// document.documentElement.style.setProperty("--list-or-horizontal", "flex");
				document.documentElement.style.setProperty("--flex-direction", "row-reverse");
				//textDirection = "rtl";
				getById("main").classList.add("alignright");
			}

			var postServer = "http://127.0.0.1";
			var thirdPartyAPI = false;
			if (urlParams.has("singular")) {
				thirdPartyAPI = function (data) {
					var API = "https://app.singular.live/apiv1/datanodes/" + urlParams.get("singular") + "/data";

					data.chatimg = upscaleImages(data);

					var message = { payload: data };
					ajax(message, API, "PUT");
				};
			} else if (urlParams.has("postserver")) {
				postServer = urlParams.get("postserver") || postServer;
				thirdPartyAPI = function (data) {
					data.chatimg = upscaleImages(data);

					ajax(data, postServer, "POST");
				};
			} else if (urlParams.has("putserver")) {
				postServer = urlParams.get("putserver") || postServer;
				thirdPartyAPI = function (data) {
					data.chatimg = upscaleImages(data);

					ajax(data, postServer, "PUT");
				};
			} else if (urlParams.has("spxserver") && urlParams.has("spxfunction") && urlParams.has("spxlayer")) {
				let spxserver = urlParams.get("spxserver") || postServer;
				let spxfunction = urlParams.get("spxfunction") || "";
				let spxlayer = urlParams.get("spxlayer") || "";

				thirdPartyAPI = function (data) {
					var msg = {};
					if ("id" in data) {
						msg.id = data.id;
					}

					if (data.timestamp) {
						msg.timestamp = data.timestamp;
					} else {
						msg.timestamp = Date.now();
					}

					msg.message = data.chatmessage || "";
					msg.displayName = data.chatname || "";
					msg.profileImageUrl = upscaleImages(data);

					if (data.type) {
						msg.platform = {};
						msg.platform.name = data.type;
						msg.platform.logoUrl = "https://socialstream.ninja/sources/images/" + data.type + ".png";
					}

					params = encodeURIComponent(JSON.stringify(msg));

					if (params.length > 3000) {
						console.log("dropping message due to request length");
						return; // HTTP request too long due to twitch emoji spam, skipping this message.
					}
					postServer = spxserver + "/api/v1/invokeTemplateFunction?webplayout=" + spxlayer + "&function=" + spxfunction + "&params=" + params;

					const spxRequest = new XMLHttpRequest();
					spxRequest.onreadystatechange = function () {
						if (spxRequest.readyState === 4 && spxRequest.status === 200) {
						}
					};
					spxRequest.open("GET", postServer);
					spxRequest.send();
				};
			} else if (urlParams.has("h2r") || urlParams.has("h2rurl")) {
				postServer = "http://127.0.0.1:4001/data/";

				if (urlParams.has("h2rurl")) {
					postServer = urlParams.get("h2rurl") || postServer;
				}
				if (urlParams.has("h2r")) {
					postServer = postServer + urlParams.get("h2r");
				}
				thirdPartyAPI = function (data) {
					var msg = {};

					if ("id" in data) {
						msg.id = data.id;
					}

					if (data.timestamp) {
						msg.timestamp = data.timestamp;
					} else {
						msg.timestamp = Date.now();
					}

					msg.snippet = {};
					//
					if (data.textonly) {
						msg.snippet.displayMessage = data.chatmessage;
					} else if (!stripHTML) {
						// lets try to strip HTML just in case, for h2r since it can't use HTML, but only if the alternative way isn't used.
						msg.snippet.displayMessage = stripHtmlFunction(data.chatmessage); // strip HTML for H2R, if we haven't striped it so far
					} else {
						msg.snippet.displayMessage = data.chatmessage; // stripHTML already should have processed this, so lets not reprocess it.
					}

					if (!msg.snippet.displayMessage) {
						return;
					} // we won't send a featured message if no message body?

					msg.authorDetails = {};
					msg.authorDetails.displayName = data.chatname || "";
					msg.authorDetails.profileImageUrl = upscaleImages(data);

					if (data.type) {
						msg.platform = {};
						msg.platform.name = data.type;
						msg.platform.logoUrl = "https://socialstream.ninja/sources/images/" + data.type + ".png";
					}

					var h2r = {};
					h2r.messages = [];
					h2r.messages.push(msg);
					ajax(h2r, postServer, "POST");
				};
			}

			if (urlParams.has("showmenu")) {
				getById("menu").style.display = "block";
				hardFilter = false;
			} else {
				try {
					if (window.obsstudio) {
						if (!reversed && !random) {
							setInterval(function () {
								if (forceAutoscroll && !isOBSBrowserSource) {
									jumptoBottom2()
								}
							}, 2000);

							window.addEventListener("resize", function (event) {
								jumptoBottom2();
							});
						}

						window.obsstudio.getStatus(function (obsStatus) {
							getById("menu").style.display = "none";
							hardFilter=true;
							getById("output").style.marginBottom = "0";
							document.body.style.overflow = "hidden";
							mainOutputWindow.style.overflow = "hidden";
							triggerState = false;

							if (!reversed) {
								forceAutoscroll = true;
							}
							//compactmode=true;
							//mainOutputWindow.classList.remove("notcompactmode");
							scale = scale * 2.0;

							document.body.classList.add("OBS");
							document.documentElement.style.setProperty("--scale-output", scale);
							isOBSBrowserSource = true;

							if (!urlParams.has("pressedcolor")) {
								// hide the pressed color if not set otherwise, but in OBS.
								document.documentElement.style.setProperty("--pressed-color", "unset", "");
							}
						});
					}
				} catch (e) {}
			}

			if (urlParams.has("darkmode")) {
				darkmode = true;
			} else if (urlParams.has("lightmode")) {
				darkmode = false;
			}
			
			var filterEmojiOnly = false;
			if (urlParams.has("noemojisonly")) {
				filterEmojiOnly = true;
			}

			var syncDocks = false;
			if (urlParams.has("sync") || urlParams.has("synced")) {
				syncDocks = true;
				try {
					if (blockMessageSelecting2 || blockMessageSelecting) {
						document.querySelector('[data-action="Delete"] span').innerText = "Delete Message (locally only)";
						document.querySelector('[data-action="Delete"]').title = "Using chat/view-only mode disables the ability to syncronize deleted messages with other docks";
					}
					if (blockMessageSelecting2 || blockMessageSelecting) {
						document.querySelector('[data-action="Block"]').classList.add("hidden");
					}
				} catch (e) {}
			} else {
				try {
					document.querySelector('[data-action="Delete"]').title = "Enable &sync mode to have messages be deleted in other synced docks also";
				} catch (e) {}
			}

			if (window.obsstudio) {
				document.documentElement.style.setProperty("--background-color", "#2B2E38");
				document.documentElement.style.setProperty("--menu-background-color", "#191B26");
			}

			if (darkmode) {
				getById("menu").classList.add("darkmode");
				document.documentElement.style.setProperty("--background-color", "#000");
				document.documentElement.style.setProperty("--menu-background-color", "#1c1d1d");
			} else if (darkmode === null) {
				// defaultmode
				getById("menu").classList.add("darkmode");
				darkmode = true;
			} else {
				document.body.classList.add("lightmode");
				getById("menu").classList.add("lightmode");
				getById("chatInput_parent").classList.add("lightmode");
				getById("filter_messages_parent").classList.add("lightmode");
				document.documentElement.style.setProperty("--link-color", "#06F");
				document.documentElement.style.setProperty("--font-color-name", "#000");
				if (navigator.userAgent.toLowerCase().indexOf(" electron/") === -1) {
					document.documentElement.style.setProperty("--background-color", "#FFF0");
				} else {
					document.documentElement.style.setProperty("--background-color", "#FFFF");
				}
				document.documentElement.style.setProperty("--font-color", "#000");
				document.documentElement.style.setProperty("--highlight-base2", "#EEE7");

				document.documentElement.style.setProperty("--donation-bgcolor-bubble", "#EEED");
				document.documentElement.style.setProperty("--donation-bgcolor-bubble-odd", "#EEE7");

				document.documentElement.style.setProperty("--member-bgcolor-bubble", "#EEED");
				document.documentElement.style.setProperty("--member-bgcolor-bubble-odd", "#EEE7");

				document.documentElement.style.setProperty("--special-bgcolor-bubble", "#EEED");
				document.documentElement.style.setProperty("--special-bgcolor-bubble-odd", "#EEE7");
			}

			if (urlParams.has("hideshadow")) {
				// alternating
				document.documentElement.style.setProperty("--highlight-base", "#0000", "important");
				document.documentElement.style.setProperty("--highlight-base2", "#0000", "important");
				document.documentElement.style.setProperty("--highlight-compact", "#0000", "important");
				document.documentElement.style.setProperty("--highlight-compact2", "#0000", "important");
				document.documentElement.style.setProperty("--donation-bgcolor-bubble-odd", getComputedStyle(document.documentElement).getPropertyValue("--donation-bgcolor-bubble"));
				document.documentElement.style.setProperty("--member-bgcolor-bubble-odd", getComputedStyle(document.documentElement).getPropertyValue("--member-bgcolor-bubble"));
				document.documentElement.style.setProperty("--special-bgcolor-bubble-odd", getComputedStyle(document.documentElement).getPropertyValue("--special-bgcolor-bubble"));
				document.documentElement.style.setProperty("--bgcolor-bubble-odd", getComputedStyle(document.documentElement).getPropertyValue("--bgcolor-bubble"));
			}

			if (urlParams.has("nooutline")) {
				document.body.style.textShadow = "0 0 black";
				if (!darkmode){
					document.getElementById("topbar").style.color = "white";
					document.getElementById("topbar").style.fontWeight = "700";
				}
			} else if (urlParams.has("bolder")) {
				document.documentElement.style.setProperty("--text-shadow", "-3px -3px #000000, -3px -1.5px #000000, -3px 0px #000000, -3px 1.5px #000000, -3px 3px #000000, -1.5px -3px #000000, -1.5px -1.5px #000000, -1.5px 0px #000000, -1.5px 1.5px #000000, -1.5px 3px #000000, 0px -3px #000000, 0px -1.5px #000000, 0px 0px #000000, 0px 1.5px #000000, 0px 3px #000000, 1.5px -3px #000000, 1.5px -1.5px #000000, 1.5px 0px #000000, 1.5px 1.5px #000000, 1.5px 3px #000000, 3px -3px #000000, 3px -1.5px #000000, 3px 0px #000000, 3px 1.5px #000000, 3px 3px #000000");
			
			} else if (urlParams.has("thinner")) {
				document.documentElement.style.setProperty("--text-shadow", "-1.5px -1.5px #000000, -1.5px -0.75px #000000, -1.5px 0px #000000, -1.5px 0.75px #000000, -1.5px 1.5px #000000, -0.75px -1.5px #000000, -0.75px -0.75px #000000, -0.75px 0px #000000, -0.75px 0.75px #000000, -0.75px 1.5px #000000, 0px -1.5px #000000, 0px -0.75px #000000, 0px 0px #000000, 0px 0.75px #000000, 0px 1.5px #000000, 0.75px -1.5px #000000, 0.75px -0.75px #000000, 0.75px 0px #000000, 0.75px 0.75px #000000, 0.75px 1.5px #000000, 1.5px -1.5px #000000, 1.5px -0.75px #000000, 1.5px 0px #000000, 1.5px 0.75px #000000, 1.5px 1.5px #000000");
			
			}

			if (urlParams.has("transparent") || urlParams.has("transparency")) {
				document.documentElement.style.setProperty("--background-color", "#0000", "important");
				document.documentElement.style.setProperty("--menu-background-color", "linear-gradient(to right, #0000, #0008, #0000)", "important");
				mainOutputWindow.style.overflow = "hidden";
				
				if (window.obsstudio){
					getById("main").style.overflow = "hidden"; // transparent auto hides the scroll bar; i guess that makes sense, since likely used in studio software then.
				} else {
					try {
						document.documentElement.style.setProperty("--scrollbar-visible", "none");
						// For IE, Edge, and Firefox
						document.body.style.msOverflowStyle = 'none';  // IE and Edge
						document.body.style.scrollbarWidth = 'none';  // Firefox
					
						
					} catch (e) {}
				}
			}

			var firstNamesOnly = false;
			if (urlParams.has("firstnamesonly") || urlParams.has("firstname") || urlParams.has("firstnames")) {
				firstNamesOnly = true;
			}

			var hideNames = false;
			if (urlParams.has("hidenames")) {
				hideNames = true;
			}

			var hideNotMembers = false;
			var hideNotDonos = false;
			
			if (urlParams.has("showonlydonos")) {
				doubleLimit = true;
				donos();
			}

			if (urlParams.has("showonlymembers")) {
				doubleLimit = true;
				members();
			}
			var eventsOnly = false;
			if (urlParams.has("showonlyevents")) {
				eventsOnly = urlParams.get("showonlyevents");
				if (eventsOnly) {
					eventsOnly = eventsOnly.split(",");
				} else {
					eventsOnly = true;
				}
				doubleLimit = true;
			}
			
			
			var privateOnly = false;
			var publicOnly = true;
			if (urlParams.has("privateonly")) {
				privateOnly = true;
			} else if (urlParams.has("includeprivate")) {
				publicOnly = false;
			}
			

			var hideAllEvents = false;
			if (urlParams.has("hideallevents")) {
				hideAllEvents = true;
			}

			var hideEmojiOnly = false;
			var hideNotQueued = false;

			if (urlParams.has("queueonly")) {
				hideNotQueued = true;
				getById("show_only_queue").dataset.state = "1";
				getById("show_only_queue").classList.add("pressed");
			}
			
			var hideNotPinned = false;
			if (urlParams.has("pinnedonly")) {
				hideNotPinned = true;
				document.documentElement.style.setProperty("--pinned-queued-bg", "unset");
				document.documentElement.style.setProperty("--pinned-bg", "unset");
			}

			if (tainted) {
				document.body.classList.remove("vanilla");
			}
			
			if (alignbottom || fadetop) {
				const ro = new MutationObserver(mutations => {
					if (reversed && !forceAutoscroll) {
					} else {
						var delta = 0;
						if (getById("output").lastChild) {
							delta = parseInt(getById("output").lastChild.clientHeight);
						}
						if (getById("output").scrollHeight < getById("output").scrollTop + getById("output").clientHeight + autoScrollCatch + delta || forceAutoscroll) {
							jumptoBottom2()
						}
					}
				});
				ro.observe(getById("output"), { childList: true, attributes: false, subtree: false });
			} else {
				const ro = new ResizeObserver(entries => {
					if (reversed && !forceAutoscroll) {
					} else {
						var delta = 0;
						if (getById("output").lastChild) {
							delta = parseInt(getById("output").lastChild.clientHeight);
						}
						if (document.body.scrollHeight < document.body.scrollTop + document.body.clientHeight + autoScrollCatch + delta || forceAutoscroll) {
							jumptoBottom2()
						}
					}
				});
				ro.observe(document.scrollingElement);
			}

			function emoji() {
				var ele = getById("hide_emoji");
				if (ele.dataset.state == "0") {
					ele.dataset.state = "1";
					hideEmojiOnly = true;
					//document.documentElement.style.setProperty("--show-emoji-only", "none");
					//document.documentElement.style.setProperty("--show-images", "none");
					ele.style["background-image"] = "url(./icons/filter_hideemojionly_off.png)";
					ele.title = "Filter — 📄 Show all messages, including with emojis only";
				} else {
					hideEmojiOnly = false;
					ele.dataset.state = "0";
					//document.documentElement.style.setProperty("--show-emoji-only", "flex");
					//document.documentElement.style.setProperty("--show-images", "inline-block");
					ele.style["background-image"] = "url(./icons/filter_hideemojionly_on.png)";
					ele.title = "Filter — 😀🚫 Hide messages that contains emojis only";
				}
				redoOdd();
			}
			
			var startstop = false;
			if (urlParams.has("startstop")) {
				startstop = true;
				
				if (!window.obsstudio){
					warnlog("⚠️ You need to run this in OBS as a browser source with Full Permissions enable. (&startstop mode)");
				}
				
			}
			
			var lastPushed = Date.now();
			var activeWordLength = 0;
			var activeDonation = false;
			var checkTimeout = null;
			var timeoutId = null;

			function checkAutoShow() {
				if (checkTimeout) {
					return;
				}
				checkTimeout = true;
				
				let waitTime = activeWordLength * timePerCharacter;
				let minimumTime = timePerCharacter * 42; // 42; the answer to life. the universe. and everything
				if (waitTime < minimumTime) {
					waitTime = minimumTime;
				} else if (waitTime > minimumTime * 10) {
					waitTime = minimumTime * 10;
				}
				
				if (autoQueueTimeout) {
					waitTime = autoQueueTimeout;
					timePerCharacter = 0;
				}
				
				if (timeoutId) {
					clearTimeout(timeoutId);
					timeoutId = null;
				}
				
				if (autoshowqueued && selectedQueue.length) {
					timeoutId = setTimeout(function() {
						checkTimeout = false;
						if (autoshowqueued) {
							nextInQueue();
						} else {
							checkAutoShow();
						}
					}, lastPushed + waitTime - Date.now());
					return;
				} else if (autoShowQueue.length) {
					if (lastPushed + waitTime > Date.now() + timePerCharacter) {
						timeoutId = setTimeout(function() {
							checkTimeout = false;
							checkAutoShow();
						}, lastPushed + waitTime - Date.now() + timePerCharacter * 2);
						return;
					}
					var post = autoShowQueue.shift();
					if (doNotAutoshowFiltered && post.classList.contains("hide")) {
						if (autoShowQueue.length) {
							checkAutoShow();
						}
						return;
					} else if (post.classList.contains(pressedClass)) {
						if (autoShowQueue.length) {
							checkAutoShow();
						}
						return;
					} else {
						activeWordLength = post.contentLength;
						if (post.rawContents) {
							activeDonation = post.rawContents.hasDonation || false;
						} else {
							activeDonation = false;
						}
						selectedMessage(false, post);
					}
				} else {
					checkTimeout = false;
					return;
				}

				const setNextTimeout = (multiplier = 1) => {
					timeoutId = setTimeout(function() {
						checkTimeout = false;
						checkAutoShow();
					}, waitTime * multiplier);
				};

				if (autoShowQueue.length > 10) {
					while (autoShowQueue[0]?.rawContents && !autoShowQueue[0].rawContents.hasDonation && autoShowQueue.length > 4) {
						autoShowQueue.shift(); // skip oldest, since too many are queued up
					}
					setNextTimeout(activeDonation ? 1 : 0.6);
				} else if (activeDonation) {
					setNextTimeout();
				} else if (autoShowQueue.length > 1) {
					setNextTimeout(0.8);
				} else if (autoShowQueue.length) {
					setNextTimeout();
				} else {
					checkTimeout = false;
				}
			}
			
			function upscaleImages(data) {
				// for third party APIs
				let chatimg = "";
				if (data.type && (data.type == "twitch") && data.chatname && !data.chatimg) {
					chatimg = "https://api.socialstream.ninja/twitch/large?username=" + encodeURIComponent(data.chatname); // 150x150
				} else if (data.type && ((data.type == "youtube") || (data.type == "youtubeshorts")) && data.chatimg) {
					chatimg = data.chatimg.replace("=s32-", "=s256-");
					chatimg = chatimg.replace("=s64-", "=s256-");
				} else {
					chatimg = data.chatimg || "https://socialstream.ninja/sources/images/unknown.png";
				}
				return chatimg;
			}

			function unescapeHtml(html) {
				var textArea = document.createElement("textarea");
				textArea.innerHTML = html;
				return textArea.value;
			}

			function ajax(object2send, url, ajaxType = "PUT") {
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function () {
					if (this.readyState == 4 && this.status == 200) {
						// success
					} else {
						console.error("there was an error sending to the API");
					}
				};
				xhttp.open(ajaxType, url, true); // async = true
				xhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
				xhttp.send(JSON.stringify(object2send));
			}

			function donos() {
				var ele = getById("only_donos");
				if (ele.dataset.state == "0") {
					ele.dataset.state = "1";
					//document.documentElement.style.setProperty("--show-donos-only", "none");
					hideNotDonos = true;
					ele.style["background-image"] = "url(./icons/filter_showpaidonly_on.png)";
					ele.title = "Filter — 📄 Stop filtering for messages that have donations/cheer";
				} else {
					ele.dataset.state = "0";
					//document.documentElement.style.setProperty("--show-donos-only", flexOrNotToFlex);
					hideNotDonos = false;
					ele.style["background-image"] = "url(./icons/filter_showpaidonly_off.png)";
					ele.title = "Filter — 💲 Filter for messages that have donations/cheer";
				}
				redoOdd();
			}

			function members() {
				var ele = getById("only_members");
				if (ele.dataset.state == "0") {
					ele.dataset.state = "1";
					//document.documentElement.style.setProperty("--show-donos-only", "none");
					hideNotMembers = true;
					ele.style["background-image"] = "url(./icons/filter_showmembers_on.png)";
					ele.title = "Filter — 📄 Stop filtering for messages that are from members";
				} else {
					ele.dataset.state = "0";
					//document.documentElement.style.setProperty("--show-donos-only", flexOrNotToFlex);
					hideNotMembers = false;
					ele.style["background-image"] = "url(./icons/filter_showmembers_off.png)";
					ele.title = "Filter — 👑 Filter for messages that are from members";
				}
				redoOdd();
			}

			function onClickFilterAddNameAndTimeButton(ele) {
				filterAddNameAndTime = !filterAddNameAndTime;
				if (ele.dataset.state == "0") {
					ele.dataset.state = "1";
					filterAddNameAndTime = true;
					ele.style["background-image"] = "url(./icons/filter_addnametime_on.png)";
					ele.title = "🆔 Exclude name, time, and source from filter";
				} else {
					ele.dataset.state = "0";
					filterAddNameAndTime = false;
					ele.style["background-image"] = "url(./icons/filter_addnametime_off.png)";
					ele.title = "🆔 Filter also by name, time, and source (ie: source:youtube}";
				}

				// Update search after add/remove name and time
				filterMessages(getById("filter_messages").value);
			}

			function applyHiddenState(node) {
				if (hideNotDonos && node.classList.contains("noDono")) {
					if (hideNotMembers && node.dataset.member) {
						node.classList.remove("hidden");
					} else {
						node.classList.add("hidden");
					}
				} else if (hideNotMembers && !node.dataset.member) {
					if (hideNotDonos && !node.classList.contains("noDono")) {
						node.classList.remove("hidden");
					} else {
						node.classList.add("hidden");
					}
				} else if (hideNotQueued && !node.classList.contains("queued")) {
					node.classList.add("hidden");
				} else if (hideNotPinned && !node.classList.contains("pinned")) {
					node.classList.add("hidden");
				} else if (hideEmojiOnly && node.classList.contains("noText")) {
					node.classList.add("hidden");
				} else {
					node.classList.remove("hidden");
				}
			}

			var hashCode = s =>
				s.split("").reduce((a, b) => {
					a = (a << 5) - a + b.charCodeAt(0);
					return a & a;
				}, 0);

			function redoOdd() {
				odd = false;
				var nodes = mainOutputWindow.childNodes;
				for (var i = 0; i < nodes.length; i++) {
					applyHiddenState(nodes[i]);
					var style = window.getComputedStyle(nodes[i]);
					if (style.visibility !== "hidden" && style.display !== "none") {
						if (odd) {
							if (bubble && largeavatar) {
								nodes[i].querySelector(".hl-rightside").classList.add("odd");
							} else if (bubble) {
								nodes[i].querySelector(".hl-message").classList.add("odd");
							} else {
								nodes[i].classList.add("odd");
							}
						} else {
							if (bubble && largeavatar) {
								nodes[i].querySelector(".hl-rightside").classList.remove("odd");
							} else if (bubble) {
								nodes[i].querySelector(".hl-message").classList.remove("odd");
							} else {
								nodes[i].classList.remove("odd");
							}
						}
						odd = !odd;
					}
				}
			}
			
			
			function createPopoutChat() {
				//  todo -- make broadcast channel based.
				
				setTimeout(function(){ // timeout to avoid middle+click causing override.
					let pass = "";
					if (urlParams.has("password")) {
						pass = "&password="+password;
					}

					const uniqueName = "popup_" + Date.now();
					const popup = window.open("./input.html?session=" + roomID + pass, uniqueName, "width=600,height=60,toolbar=no,menubar=no,resizable=yes");
					popup.document.body.style.margin = "0";
					popup.document.body.style.padding = "0";
				},0);

				//window.open("./popout.html?id=" + session.broadcastChannelID, "popup", "width=600,height=480,toolbar=no,menubar=no,resizable=yes");
				return false;
			}


			function toggleTriggers(ele) {
				triggerState = !triggerState;
				if (triggerState) {
					ele.classList.add("pressed");
				} else {
					ele.classList.remove("pressed");
				}
			}

			function autoShow(toggle = true) {
				if (toggle) {
					autoshow = !autoshow;
				}
				if (autoshow) {
					getById("autoshow").style["background-image"] = "url(./icons/featured_auto_play.png)";
					getById("autoshow").title = "Featured — ⏹🌟 Stop auto-featuring messages";
				} else {
					autoShowQueue = []; // empty the auto show queue to stop messages
					getById("autoshow").style["background-image"] = "url(./icons/featured_auto_stop.png)";
					getById("autoshow").title = "Featured — 🌟 Auto-feature messages as they come in";
				}
			}
			function pause() {
				pauseState = !pauseState;
				var ele = getById("pause");
				if (pauseState) {
					ele.style["background-image"] = "url(./icons/main_msg_play.png)";
					ele.title = "Main — ▶️ Play incoming chat messages";
				} else {
					ele.style["background-image"] = "url(./icons/main_msg_pause.png)";
					ele.title = "Main — ⏸ Pause incoming chat messages";
					//var queueR = queue.reverse();
					if (!pauseState) {
						for (var i = 0; i < queue.length; i++) {
							processData(queue[i]);
						}
					}
					queue = [];
				}
			}

			function notify() {
				beep = !beep;
				var ele = getById("notify");
				if (beep) {
					ele.dataset.state = beep * 1;
					ele.style["background-image"] = "url(./icons/main_msg_notify_on.png)";
					ele.title = "Main — 🔕 Stop beeping when there is a new message";
					playtone();
				} else {
					ele.dataset.state = beep * 1;
					ele.style["background-image"] = "url(./icons/main_msg_notify_off.png)";
					ele.title = "Main — 🔔 Start beeping when there is a new message";
				}
			}

			var colours = 167772;
			function rainbow(step) {
				var r, g, b;
				var h = 1 - step / colours;
				var i = ~~(h * 6);
				var f = h * 6 - i;
				var q = 1 - f;
				switch (i % 6) {
					case 0:
						(r = 1), (g = f), (b = 0);
						break;
					case 1:
						(r = q), (g = 1), (b = 0);
						break;
					case 2:
						(r = 0), (g = 1), (b = f);
						break;
					case 3:
						(r = 0), (g = q), (b = 1);
						break;
					case 4:
						(r = f), (g = 0), (b = 1);
						break;
					case 5:
						(r = 1), (g = 0), (b = q);
						break;
				}
				var c = "#" + ("00" + (~~(r * 200 + 35)).toString(16)).slice(-2) + ("00" + (~~(g * 200 + 35)).toString(16)).slice(-2) + ("00" + (~~(b * 200 + 35)).toString(16)).slice(-2);
				return c;
			}
			function md5cycle(x, k) {
				var a = x[0],
					b = x[1],
					c = x[2],
					d = x[3];

				a = ff(a, b, c, d, k[0], 7, -680876936);
				d = ff(d, a, b, c, k[1], 12, -389564586);
				c = ff(c, d, a, b, k[2], 17, 606105819);
				b = ff(b, c, d, a, k[3], 22, -1044525330);
				a = ff(a, b, c, d, k[4], 7, -176418897);
				d = ff(d, a, b, c, k[5], 12, 1200080426);
				c = ff(c, d, a, b, k[6], 17, -1473231341);
				b = ff(b, c, d, a, k[7], 22, -45705983);
				a = ff(a, b, c, d, k[8], 7, 1770035416);
				d = ff(d, a, b, c, k[9], 12, -1958414417);
				c = ff(c, d, a, b, k[10], 17, -42063);
				b = ff(b, c, d, a, k[11], 22, -1990404162);
				a = ff(a, b, c, d, k[12], 7, 1804603682);
				d = ff(d, a, b, c, k[13], 12, -40341101);
				c = ff(c, d, a, b, k[14], 17, -1502002290);
				b = ff(b, c, d, a, k[15], 22, 1236535329);

				a = gg(a, b, c, d, k[1], 5, -165796510);
				d = gg(d, a, b, c, k[6], 9, -1069501632);
				c = gg(c, d, a, b, k[11], 14, 643717713);
				b = gg(b, c, d, a, k[0], 20, -373897302);
				a = gg(a, b, c, d, k[5], 5, -701558691);
				d = gg(d, a, b, c, k[10], 9, 38016083);
				c = gg(c, d, a, b, k[15], 14, -660478335);
				b = gg(b, c, d, a, k[4], 20, -405537848);
				a = gg(a, b, c, d, k[9], 5, 568446438);
				d = gg(d, a, b, c, k[14], 9, -1019803690);
				c = gg(c, d, a, b, k[3], 14, -187363961);
				b = gg(b, c, d, a, k[8], 20, 1163531501);
				a = gg(a, b, c, d, k[13], 5, -1444681467);
				d = gg(d, a, b, c, k[2], 9, -51403784);
				c = gg(c, d, a, b, k[7], 14, 1735328473);
				b = gg(b, c, d, a, k[12], 20, -1926607734);

				a = hh(a, b, c, d, k[5], 4, -378558);
				d = hh(d, a, b, c, k[8], 11, -2022574463);
				c = hh(c, d, a, b, k[11], 16, 1839030562);
				b = hh(b, c, d, a, k[14], 23, -35309556);
				a = hh(a, b, c, d, k[1], 4, -1530992060);
				d = hh(d, a, b, c, k[4], 11, 1272893353);
				c = hh(c, d, a, b, k[7], 16, -155497632);
				b = hh(b, c, d, a, k[10], 23, -1094730640);
				a = hh(a, b, c, d, k[13], 4, 681279174);
				d = hh(d, a, b, c, k[0], 11, -358537222);
				c = hh(c, d, a, b, k[3], 16, -722521979);
				b = hh(b, c, d, a, k[6], 23, 76029189);
				a = hh(a, b, c, d, k[9], 4, -640364487);
				d = hh(d, a, b, c, k[12], 11, -421815835);
				c = hh(c, d, a, b, k[15], 16, 530742520);
				b = hh(b, c, d, a, k[2], 23, -995338651);

				a = ii(a, b, c, d, k[0], 6, -198630844);
				d = ii(d, a, b, c, k[7], 10, 1126891415);
				c = ii(c, d, a, b, k[14], 15, -1416354905);
				b = ii(b, c, d, a, k[5], 21, -57434055);
				a = ii(a, b, c, d, k[12], 6, 1700485571);
				d = ii(d, a, b, c, k[3], 10, -1894986606);
				c = ii(c, d, a, b, k[10], 15, -1051523);
				b = ii(b, c, d, a, k[1], 21, -2054922799);
				a = ii(a, b, c, d, k[8], 6, 1873313359);
				d = ii(d, a, b, c, k[15], 10, -30611744);
				c = ii(c, d, a, b, k[6], 15, -1560198380);
				b = ii(b, c, d, a, k[13], 21, 1309151649);
				a = ii(a, b, c, d, k[4], 6, -145523070);
				d = ii(d, a, b, c, k[11], 10, -1120210379);
				c = ii(c, d, a, b, k[2], 15, 718787259);
				b = ii(b, c, d, a, k[9], 21, -343485551);

				x[0] = add32(a, x[0]);
				x[1] = add32(b, x[1]);
				x[2] = add32(c, x[2]);
				x[3] = add32(d, x[3]);

			}

			function cmn(q, a, b, x, s, t) {
				a = add32(add32(a, q), add32(x, t));
				return add32((a << s) | (a >>> (32 - s)), b);
			}

			function ff(a, b, c, d, x, s, t) {
				return cmn((b & c) | ((~b) & d), a, b, x, s, t);
			}

			function gg(a, b, c, d, x, s, t) {
				return cmn((b & d) | (c & (~d)), a, b, x, s, t);
			}

			function hh(a, b, c, d, x, s, t) {
				return cmn(b ^ c ^ d, a, b, x, s, t);
			}

			function ii(a, b, c, d, x, s, t) {
				return cmn(c ^ (b | (~d)), a, b, x, s, t);
			}

			function md51(s) {
				var txt = '';
				var n = s.length,
					state = [1732584193, -271733879, -1732584194, 271733878],
					i;
				for (i = 64; i <= s.length; i += 64) {
					md5cycle(state, md5blk(s.substring(i - 64, i)));
				}
				s = s.substring(i - 64);
				var tail = Array(16).fill(0);
				for (i = 0; i < s.length; i++)
					tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) * 8);
				tail[i >> 2] |= 0x80 << ((i % 4) * 8);
				if (i > 55) {
					md5cycle(state, tail);
					tail.fill(0);
				}
				tail[14] = n * 8;
				md5cycle(state, tail);
				return state;
			}

			function md5blk(s) {
				var md5blks = [],
					i;
				for (i = 0; i < 64; i += 4) {
					md5blks[i >> 2] = s.charCodeAt(i) +
						(s.charCodeAt(i + 1) << 8) +
						(s.charCodeAt(i + 2) << 16) +
						(s.charCodeAt(i + 3) << 24);
				}
				return md5blks;
			}

			var hex_chr = '0123456789abcdef'.split('');

			function rhex(n) {
				var s = '',
					j = 0;
				for (; j < 4; j++)
					s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] +
						hex_chr[(n >> (j * 8)) & 0x0F];
				return s;
			}

			function hex(x) {
				for (var i = 0; i < x.length; i++)
					x[i] = rhex(x[i]);
				return x.join('');
			}

			function md5(s) {
				return hex(md51(s));
			}

			function add32(a, b) {
				return (a + b) & 0xFFFFFFFF;
			}
			
			var viewers = {};
			var followers = {};
			
			var topBarElement = getById("topbar");
			
			function updateMeta(data){
				if (data && data.event && data.type && ("meta" in data)){
					if (data.event == "follower_update"){
						followers[data.type] = parseInt(data.meta) || 0;
						return true;
					} else if (data.event == "viewer_update"){
						viewers[data.type] = parseInt(data.meta) || 0;
						
						if (showviewercount){
							let ele = topBarElement.querySelector("[data-type='"+data.type+"']");
							if (ele){
								ele.innerText = viewers[data.type];
							} else {
								ele = document.createElement("div");
								ele.dataset.type = data.type;
								ele.classList.add("viewerIcons");
								ele.title = "Viewer count for "+data.type;
								ele.innerText = viewers[data.type];
								ele.style.backgroundImage = "url(./sources/images/"+data.type+".png)";
								topBarElement.prepend(ele);
							}
							clearTimeout(ele.timeout);
							ele.timeout = setTimeout(function(ele){
								if (ele){
									delete ele;
								}
							},130000,ele)
						}
						return true;
					}
				}
				return false;
			}
					
			function getColorFromString(str) {
				
				str = md5(str);
				
				var out = 0,
					len = str.length;
				if (len > 6) {
					len = 6;
				}

				let seed = 10;

				for (var pos = 0; pos < len; pos++) {
					out += (str.charCodeAt(pos) - 64) * Math.pow(seed, len - pos - 1);
				}

				out = parseInt(out % colours); // get modulus

				if (colours === 1) {
					return "#F00";
				} else if (colours === 2) {
					switch (out) {
						case 0:
							return "#F00";
						case 1:
							return "#00ABFA";
					}
				} else if (colours === 3) {
					switch (out) {
						case 0:
							return "#F00";
						case 1:
							return "#00A800";
						case 2:
							return "#00ABFA";
					}
				} else if (colours === 4) {
					switch (out) {
						case 0:
							return "#F00";
						case 1:
							return "#FFA500";
						case 2:
							return "#00A800";
						case 3:
							return "#00ABFA";
					}
				} else if (colours === 5) {
					switch (out) {
						case 0:
							return "#F00";
						case 1:
							return "#FFA500";
						case 2:
							return "#00A800";
						case 3:
							return "#00ABFA";
						case 4:
							return "#FF39C5";
					}
				} else {
					out = rainbow(out);
				}
				return out;
			}
			
			function deleteMessages(data, deleteOnlyLast=false) {
				let selector = "";
				if (data.delete.id) {
					selector = `[data-mid='${data.delete.id}']`;
				} else if (data.delete.chatname && data.delete.type) {
					selector = `[data-chatname='${data.delete.chatname}'][data-source-type='${data.delete.type}']`;
				} else if (data.delete.type) {
					selector = `[data-source-type='${data.delete.type}']`;
				} else if (data.delete.chatname) {
					selector = `[data-chatname='${data.delete.chatname}']`;
				}

				if (deleteOnlyLast) {
					const elements = Array.from(document.querySelectorAll(selector));
					if (elements.length) {
						const newest = elements.reduce((a, b) => 
							Number(a.dataset.mid) > Number(b.dataset.mid) ? a : b
						);
						newest.remove();
					}
				} else {
					document.querySelectorAll(selector).forEach(ele => ele.remove());
				}
			}
			
			function getUserHistory(element) {
				var chatName = element.dataset.chatname;
				var type = element.dataset.sourceType;

				if (chatName && type) {
					send2Extension({ action: "getUserHistory", value: { chatname: chatName, type: type } });
				}
			}
			
			let sentBefore = false;
			function getRecentHistory() {
				if (sentBefore) {return;}
				sentBefore = true;
				send2Extension({ action: "getRecentHistory", value: 30 });
			}

			function timeSince(timestamp) {
				const secondsPast = Math.round((Date.now() - new Date(timestamp)) / 1000);

				if (secondsPast < 60) {
					return `${secondsPast} seconds ago`;
				} else if (secondsPast < 3600) {
					return `${Math.round(secondsPast / 60)} minutes ago`;
				} else if (secondsPast < 86400) {
					return `${Math.round(secondsPast / 3600)} hours ago`;
				} else {
					return `${Math.round(secondsPast / 86400)} days ago`;
				}
			}

			try {
				if (window.location.host !== "socialstream.ninja") {
					// don't check if not private hosted, since it won't exist
					var script = document.createElement("script");
					script.onload = function () {
						console.log("Loaded personal actions");
					};
					script.onerror = function () {
						console.log("no personal actions file found. skipping.");
					};
					script.src = "custom.js";
					document.head.appendChild(script);
				}
			} catch (e) {}

			var activeChatDestinations = new Set();

			var Currencies = { usd: { d: 2, s: "$" }, cad: { d: 2, s: "$" }, eur: { d: 2, s: "€" }, aed: { d: 2, s: "د.إ.‏" }, afn: { d: 0, s: "؋" }, all: { d: 0, s: "Lek" }, amd: { d: 0, s: "դր." }, ars: { d: 2, s: "$" }, aud: { d: 2, s: "$" }, azn: { d: 2, s: "ман." }, bam: { d: 2, s: "KM" }, bdt: { d: 2, s: "৳" }, bgn: { d: 2, s: "лв." }, bhd: { d: 3, s: "د.ب.‏" }, bif: { d: 0, s: "FBu" }, bnd: { d: 2, s: "$" }, bob: { d: 2, s: "Bs" }, brl: { d: 2, s: "R$" }, bwp: { d: 2, s: "P" }, byn: { d: 2, s: "руб." }, bzd: { d: 2, s: "$" }, cdf: { d: 2, s: "FrCD" }, chf: { d: 2, s: "CHF" }, clp: { d: 0, s: "$" }, cny: { d: 2, s: "CN¥" }, cop: { d: 0, s: "$" }, crc: { d: 0, s: "₡" }, cve: { d: 2, s: "CV$" }, czk: { d: 2, s: "Kč" }, djf: { d: 0, s: "Fdj" }, dkk: { d: 2, s: "kr" }, dop: { d: 2, s: "RD$" }, dzd: { d: 2, s: "د.ج.‏" }, eek: { d: 2, s: "kr" }, egp: { d: 2, s: "ج.م.‏" }, ern: { d: 2, s: "Nfk" }, etb: { d: 2, s: "Br" }, gbp: { d: 2, s: "£" }, gel: { d: 2, s: "GEL" }, ghs: { d: 2, s: "GH₵" }, gnf: { d: 0, s: "FG" }, gtq: { d: 2, s: "Q" }, hkd: { d: 2, s: "$" }, hnl: { d: 2, s: "L" }, hrk: { d: 2, s: "kn" }, huf: { d: 0, s: "Ft" }, idr: { d: 0, s: "Rp" }, ils: { d: 2, s: "₪" }, inr: { d: 2, s: "টকা" }, iqd: { d: 0, s: "د.ع.‏" }, irr: { d: 0, s: "﷼" }, isk: { d: 0, s: "kr" }, jmd: { d: 2, s: "$" }, jod: { d: 3, s: "د.أ.‏" }, jpy: { d: 0, s: "￥" }, kes: { d: 2, s: "Ksh" }, khr: { d: 2, s: "៛" }, kmf: { d: 0, s: "FC" }, krw: { d: 0, s: "₩" }, kwd: { d: 3, s: "د.ك.‏" }, kzt: { d: 2, s: "тңг." }, lbp: { d: 0, s: "ل.ل.‏" }, lkr: { d: 2, s: "SL Re" }, ltl: { d: 2, s: "Lt" }, lvl: { d: 2, s: "Ls" }, lyd: { d: 3, s: "د.ل.‏" }, mad: { d: 2, s: "د.م.‏" }, mdl: { d: 2, s: "MDL" }, mga: { d: 0, s: "MGA" }, mkd: { d: 2, s: "MKD" }, mmk: { d: 0, s: "K" }, mop: { d: 2, s: "MOP$" }, mur: { d: 0, s: "MURs" }, mxn: { d: 2, s: "$" }, myr: { d: 2, s: "RM" }, mzn: { d: 2, s: "MTn" }, nad: { d: 2, s: "N$" }, ngn: { d: 2, s: "₦" }, nio: { d: 2, s: "C$" }, nok: { d: 2, s: "kr" }, npr: { d: 2, s: "नेरू" }, nzd: { d: 2, s: "$" }, omr: { d: 3, s: "ر.ع.‏" }, pab: { d: 2, s: "B/." }, pen: { d: 2, s: "S/." }, php: { d: 2, s: "₱" }, pkr: { d: 0, s: "₨" }, pln: { d: 2, s: "zł" }, pyg: { d: 0, s: "₲" }, qar: { d: 2, s: "ر.ق.‏" }, ron: { d: 2, s: "RON" }, rsd: { d: 0, s: "дин." }, rub: { d: 2, s: "₽." }, rwf: { d: 0, s: "FR" }, sar: { d: 2, s: "ر.س.‏" }, sdg: { d: 2, s: "SDG" }, sek: { d: 2, s: "kr" }, sgd: { d: 2, s: "$" }, sos: { d: 0, s: "Ssh" }, syp: { d: 0, s: "ل.س.‏" }, thb: { d: 2, s: "฿" }, tnd: { d: 3, s: "د.ت.‏" }, top: { d: 2, s: "T$" }, try: { d: 2, s: "TL" }, ttd: { d: 2, s: "$" }, twd: { d: 2, s: "NT$" }, tzs: { d: 0, s: "TSh" }, uah: { d: 2, s: "₴" }, ugx: { d: 0, s: "USh" }, uyu: { d: 2, s: "$" }, uzs: { d: 0, s: "UZS" }, vef: { d: 2, s: "Bs.F." }, vnd: { d: 0, s: "₫" }, xaf: { d: 0, s: "FCFA" }, xof: { d: 0, s: "CFA" }, yer: { d: 0, s: "ر.ي.‏" }, zar: { d: 2, s: "R" }, zmk: { d: 0, s: "ZK" }, zwl: { d: 0, s: "ZWL$" } };

			function processInput(data, force=false) {
				if ("mid" in data) {
					if (data.mid && (syncDocks || force)) {
						if (autoTimeoutEnabled) {
							lastPushed = Date.now();
						}

						try {
							
							document.querySelectorAll("." + lastMessageClass).forEach(ele => {
								// last message sent was to clear the overlay
								ele.classList.remove(lastMessageClass); // no overlay is now active.
							});
							document.querySelector("[data-mid='" + data.mid + "']").classList.add(pressedClass, lastMessageClass); // add last-message class
							
						} catch (e) {
							setTimeout(
								function (mid) {
									try {
										document.querySelector("[data-mid='" + mid + "']").classList.add(pressedClass);
									} catch (e) {}
								},
								500,
								data.mid
							); // if delayed, we will try again.
						}
						return true;
					} else if (syncDocks || force) {
						document.querySelectorAll("." + lastMessageClass).forEach(ele => {
							ele.classList.remove(lastMessageClass); // no overlay is now active.
						});
					}
					return;
				} else if ("pin" in data) {
					if (data.pin && (syncDocks || force)) {
						if (typeof data.pin == "object") {
							data.pin.forEach(dddd => {
								if (typeof dddd === "object") {
									try {
										if (dddd.id && document.querySelector("[data-mid='" + dddd.id + "']")) {
											pinIt(document.querySelector("[data-mid='" + dddd.id + "']"));
											applyHiddenState(document.querySelector("[data-mid='" + dddd.id + "']"));
										} else {
											let ele = processInput(dddd, force);
											pinIt(ele);
											applyHiddenState(ele);
										}
									} catch (e) {}
								} else {
									try {
										pinIt(document.querySelector("[data-mid='" + dddd + "']"));
										applyHiddenState(document.querySelector("[data-mid='" + dddd + "']"));
									} catch (e) {}
								}
							});
							return true;
						}
					}
					return;
				} else if ("unpin" in data) {
					if (data.unpin && (syncDocks || force)) {
						if (typeof data.unpin == "object") {
							data.unpin.forEach(mid => {
								try {
									unpinIt(document.querySelector("[data-mid='" + mid + "']"));
									applyHiddenState(document.querySelector("[data-mid='" + mid + "']"));
								} catch (e) {
									// doesn't exist or whatever.
								}
							});
							return true;
						}
					}
					return;
				} else if ("queueInit" in data) {
					if (data.queueInit && (syncDocks || force) && !selectedQueue.length) {
						if (typeof data.queueInit == "object") {
							var sq = [];
							data.queueInit.forEach(dd => {
								try {
									if (dd && dd.id) {
										var ele = document.querySelector("[data-mid='" + dd.id + "']");
										if (!ele) {
											ele = processInput(dd, force);
										}
									} else {
										var ele = processInput(dd, force);
									}
									if (ele) {
										sq.push(ele);
										ele.children[0].dataset.qid = sq.length;
										ele.classList.add("queued");
										applyHiddenState(ele);
									}
								} catch (e) {}
							});
							selectedQueue = sq;
							updateQueueButton();
							return true;
						}
					}
					return;
				} else if ("queue" in data) {
					if (data.queue && (syncDocks || force)) {
						if (typeof data.queue == "object") {
							selectedQueue.forEach(xx => {
								if (xx.dataset.mid && !data.queue.includes(parseInt(xx.dataset.mid))) {
									removeQueue(xx);
								}
							});
							var sq = [];
							data.queue.forEach(mid => {
								try {
									if (mid) {
										if (typeof mid === "object") {
											if ("id" in mid) {
												var ele = document.querySelector("[data-mid='" + mid.id + "']");
												if (ele) {
													sq.push(ele);
													ele.children[0].dataset.qid = sq.length;
													ele.classList.add("queued");
													applyHiddenState(ele);
												} else {
													ele = processInput(mid, force);
													if (ele) {
														sq.push(ele);
														ele.children[0].dataset.qid = sq.length;
														ele.classList.add("queued");
														applyHiddenState(ele);
													}
												}
											}
										} else {
											var ele = document.querySelector("[data-mid='" + mid + "']");
											if (ele) {
												sq.push(ele);
												ele.children[0].dataset.qid = sq.length;
												ele.classList.add("queued");
												applyHiddenState(ele);
											}
										}
									}
								} catch (e) {}
							});
							selectedQueue = sq;
							updateQueueButton();
							return true;
						}
					}
					return;
				} else if ("action" in data && data.action == "nextPinned") {
					//console.log("nextPinned");
					try {
						let pinned = document.querySelector(".pinned[data-mid]");
						if (pinned){
							selectedMessage(false,pinned);
						}
						return true;
					} catch (e) {}
				} else if ("nextPinned" in data){
					// selectedMessage
					try {
						let pinned = document.querySelector(".pinned[data-mid]");
						if (pinned){
							selectedMessage(false,pinned);
						}
						return true;
					} catch (e) {}
				} else if ("deleteMessage" in data) {
					// delete by message ID; likely another dock is syncing their delete with me
					//if ((syncDocks || force)){
					try {
						var ele = document.querySelector("[data-mid='" + data.deleteMessage + "']");
						if (ele) {
							ele.remove();
						}
						return true;
					} catch (e) {}
					//}
					return;
				} else if ("clearAll" in data) {
					// clear all messages
					if ((syncDocks || force)){
						try {
							clearAll(false)
							return true;
						} catch (e) {}
					}
					return;
				} else if ("tabsList" in data) {
					//delete messages, but also block user. remote, so we won't sync,
					//console.log(data.tabsList);
					if (isOBSBrowserSource) {
						return;
					}
					if (document.getElementById("getChatSourcesButton")) {
						clearTimeout(getById("getChatSourcesButton").setTimeout);
					}
					let modal = document.getElementById("chatDestinations");
					if (!modal) {
						modal = document.createElement("div");
						modal.id = "chatDestinations";
						modal.classList.add("modal");
						modal.style.display = "block";
						modal.innerHTML =
							'<div class="modal-content">\
								<span class="close-btn" id="tabslistclose">&times;</span>\
								<h2 id="chatDestinationsFor">Checking what chat destinations are available...</h2>\
								<div id="chatDestinationsList"></div>\
							  </div>\
							';
						document.body.appendChild(modal);
					}

					const span = modal.getElementById("tabslistclose");
					const chatDestinationsList = getById("chatDestinationsList");
					const messagesFor = getById("chatDestinationsFor");
					chatDestinationsList.innerHTML = "";

					messagesFor.innerText = "Custom Message Destinations. (if none set, it goes to all)";

					data.tabsList.forEach(tab => {
						const para = document.createElement("p");
						const checkbox = document.createElement("input");
						para.append(checkbox);
						chatDestinationsList.appendChild(para);

						checkbox.type = "checkbox";
						checkbox.dataset.tab = tab.id;
						checkbox.checked = activeChatDestinations.has(checkbox.dataset.tab.toString());
						checkbox.value = activeChatDestinations.has(checkbox.dataset.tab.toString());
						checkbox.style.cursor = "pointer";

						para.title = "TabID: "+tab.id;

						var titleText = false;
						if (tab.title) {
							titleText = document.createTextNode(tab.title.slice(0, 100));
						}
						const smallText = document.createElement("small");
						const italicsText = document.createElement("i");
						if (tab.url){
							italicsText.textContent = ` - (${tab.url.slice(0, 100)})`;
							smallText.appendChild(italicsText);
						}

						if (tab.favIconUrl) {
							const img = document.createElement("img");
							img.src = tab.favIconUrl;
							img.style.marginRight = "5px";
							img.style.maxHeight = "18px";
							para.appendChild(img);
						} else {
							const pageIcon = document.createTextNode("📄 ");
							para.appendChild(pageIcon);
						}
						if (titleText) {
							para.appendChild(titleText);
						}

						para.appendChild(smallText);

						checkbox.onclick = function (event) {
							if (this.checked) {
								activeChatDestinations.add(this.dataset.tab.toString());
							} else {
								activeChatDestinations.delete(this.dataset.tab.toString());
							}
							if (activeChatDestinations.size) {
								getById("getChatSources").innerHTML = "🎯";
								getById("getChatSources").title = "Sending to selected end points only";
							} else {
								getById("getChatSources").innerHTML = "🌐";
								getById("getChatSources").title = "Sending to all end points";
							}
						};
					});
					modal.classList.remove("hidden");
					span.onclick = function () {
						modal.classList.add("hidden");
						chatDestinationsList.innerHTML = "";
					};
					window.onclick = function (event) {
						if (event.target == modal) {
							modal.classList.add("hidden");
							chatDestinationsList.innerHTML = "";
						} else if (event.target && event.target.dataset && event.target.dataset.tab) {
							if (event.target.checked) {
								activeChatDestinations.add(event.target.dataset.tab);
							} else {
								activeChatDestinations.delete(event.target.dataset.tab);
							}

							if (activeChatDestinations.size) {
								getById("getChatSources").innerHTML = "🎯";
								getById("getChatSources").title = "Sending to selected end points only";
							} else {
								getById("getChatSources").innerHTML = "🌐";
								getById("getChatSources").title = "Sending to all end points";
							}
						}
					};
				} else if (data.recentHistory) {
					//console.log(data);
					setTimeout(()=>{
						data.recentHistory.reverse().forEach(async msg=>{
							//console.log({contents:msg});
							if (!msg.id || !document.querySelector("[data-mid='"+msg.id+"']")){
								await processData({contents:msg}); 
							}
						});
						console.log("Loaded from remote DB storage");
						jumptoBottom2();
					},1000);
				} else if ("userHistory" in data) {
					//delete messages, but also block user. remote, so we won't sync,
					//console.log(data.userHistory);
					if (isOBSBrowserSource) {
						return;
					}
					let modal = document.getElementById("messageModal");
					if (!modal) {
						modal = document.createElement("div");
						modal.id = "messageModal";
						modal.classList.add("modal");
						modal.innerHTML =
							'<div class="modal-content">\
					<span class="close-btn" id="closeButtonMessage">&times;</span>\
					<h2 id="messagesFor">Messages</h2>\
					<div id="messagesList"></div>\
				  </div>\
				';
						document.body.appendChild(modal);
					}

					const span = document.getElementById("closeButtonMessage");
					const messagesList = getById("messagesList");
					const messagesFor = getById("messagesFor");
					messagesList.innerHTML = "";

					if (data.userHistory.length) {
						messagesFor.innerText = "Message history for " + data.userHistory[0].chatname;
					} else {
						messagesFor.innerText = "Message history";
					}

					data.userHistory.forEach(msg => {
						const para = document.createElement("p");
						//console.log(timeSince(msg.timestamp));
						//console.log(msg.timestamp);
						para.innerHTML = (msg.chatmessage||msg.message) + " - <small><i>Sent: " + timeSince(msg.timestamp) + "</i></small>";
						messagesList.appendChild(para);
					});
					modal.style.display = "block";
					span.onclick = function () {
						modal.style.display = "none";
						messagesList.innerHTML = "";
					};
					window.onclick = function (event) {
						if (event.target == modal) {
							modal.style.display = "none";
							messagesList.innerHTML = "";
						}
					};
				} else if ("blockUser" in data) {
					try {
						if (data.blockUser.username && data.blockUser.type) {
							if (!localBlockUserList) {
								localBlockUserList = {};
							}
							if (localBlockUserList[data.blockUser.username]) {
								if (!localBlockUserList[data.blockUser.username].includes(data.blockUser.type)) {
									localBlockUserList[data.blockUser.username].push(data.blockUser.type);
								}
							} else {
								localBlockUserList[data.blockUser.username] = [data.blockUser.type];
							}
							document.querySelectorAll("[data-chatname='" + data.blockUser.username + "'][data-source-type='" + data.blockUser.type + "']").forEach(ele => {
								ele.remove();
							});
							
							if (data.blockUser.type=="youtube"){
								if (!localBlockUserList[data.blockUser.username].includes("youtubeshorts")) {
									localBlockUserList[data.blockUser.username].push("youtubeshorts");
								}
								document.querySelectorAll("[data-chatname='" + data.blockUser.username + "'][data-source-type='youtubeshorts']").forEach(ele => {
									ele.remove();
								});
							}
							
							// Remove user from local block list after 10 seconds
							setTimeout(() => {
								if (localBlockUserList && localBlockUserList[data.blockUser.username]) {
									const typeIndex = localBlockUserList[data.blockUser.username].indexOf(data.blockUser.type);
									if (typeIndex !== -1) {
										localBlockUserList[data.blockUser.username].splice(typeIndex, 1);
									}
									
									if (data.blockUser.type == "youtube") {
										const shortsIndex = localBlockUserList[data.blockUser.username].indexOf("youtubeshorts");
										if (shortsIndex !== -1) {
											localBlockUserList[data.blockUser.username].splice(shortsIndex, 1);
										}
									}
									
									if (localBlockUserList[data.blockUser.username].length === 0) {
										delete localBlockUserList[data.blockUser.username];
									}
								}
							}, 10000);
							
						} else if (data.blockUser.username) {
							if (!localBlockUserList) {
								localBlockUserList = {};
							}
							if (localBlockUserList[data.blockUser.username]) {
								if (!localBlockUserList[data.blockUser.username].includes("*")) {
									localBlockUserList[data.blockUser.username].push("*");
								}
							} else {
								localBlockUserList[data.blockUser.username] = ["*"];
							}
							document.querySelectorAll("[data-chatname='" + data.blockUser.username + "']").forEach(ele => {
								ele.remove();
							});
							
							// Remove user from local block list after 10 seconds
							setTimeout(() => {
								if (localBlockUserList && localBlockUserList[data.blockUser.username]) {
									const index = localBlockUserList[data.blockUser.username].indexOf("*");
									if (index !== -1) {
										localBlockUserList[data.blockUser.username].splice(index, 1);
										if (localBlockUserList[data.blockUser.username].length === 0) {
											delete localBlockUserList[data.blockUser.username];
										}
									}
								}
							}, 10000);
						}
						return true;
					} catch (e) {
						console.error(e);
					}
					return;
				} else if ("vipUser" in data) {
					try {
						if (data.vipUser.username && data.vipUser.type) {
							document.querySelectorAll("[data-chatname='" + data.vipUser.username + "'][data-source-type='" + data.vipUser.type + "']").forEach(ele => {
								ele.classList.add("vip");
							});
							if (data.vipUser.type=="youtube"){
								document.querySelectorAll("[data-chatname='" + data.vipUser.username + "'][data-source-type='youtubeshorts']").forEach(ele => {
									ele.classList.add("vip");
								});
							}
						} else if (data.vipUser.username) {
							document.querySelectorAll("[data-chatname='" + data.vipUser.username + "']").forEach(ele => {
								ele.classList.add("vip");
							});
						}
						
						return true;
					} catch (e) {
						console.error(e);
					}
					return;	
				} else if ("delete" in data) {
					// we will trigger a deleteMessage I guess after, if sync mode is needed.
					try {
						deleteMessages(data, deleteOnlyLast);
						return true;
					} catch (e) {
						console.error(e);
					}
					return;
				} else if ("stripe" in data) {
					try {
						if (data.stripe.type !== "checkout.session.completed") {
							return false;
						}
						
						console.log(data.stripe);

						var message = {};
						message.chatname = "";
						message.chatmessage = "";
						
						var foundCustomField = false;

						data.stripe.data.object.custom_fields.forEach(xx => {
							if (xx.key == "displayname") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (typeof xx.key === 'string' && xx.key.toLowerCase() == "pseudo") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (xx.key == "tonpseudo") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (xx.key == "username") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (xx.key == "message") {
								message.chatmessage = xx.text.value;
								
							} else if (xx.key == "messagetchat") {
								message.chatmessage = xx.text.value;
								
							} else if (!message.chatname && xx.label && typeof xx.label === 'string' && xx.label.toLowerCase() == "display name") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (!message.chatname && xx.label && typeof xx.label === 'string' && xx.label.toLowerCase() == "name") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (!message.chatmessage && xx.label && typeof xx.label === 'string' && xx.label.toLowerCase() == "message") {
								message.chatmessage = xx.text.value;
								
							} else if (!message.chatname && xx.label && typeof xx.label === 'string' && xx.label.toLowerCase() == "pseudo") {
								message.chatname = xx.text.value;
								foundCustomField = true;
								
							} else if (!message.chatname && xx.key && typeof xx.key === 'string' && xx.key.toLowerCase() == "name") {
								foundCustomField = true;
								if (xx.text && xx.text.value && typeof xx.text.value === 'string' ){
									message.chatname = xx.text.value;
								}
							}
						});
						
						if (!foundCustomField){
							console.warn("No custom name / custom display-name field found. We will skip this incoming stripe api webhook");
							return;
						}

						var currency = "";

						try {
							currency = data.stripe.data.object.currency.toLowerCase() || "";
						} catch (e) {
							console.error(e);
						}

						var symbol = {};
						if (currency && currency in Currencies) {
							symbol = Currencies[currency];
							if (symbol.d) {
								data.stripe.data.object.amount_total = parseFloat(data.stripe.data.object.amount_total) / Math.pow(10, parseInt(symbol.d));
							}
						}

						if (data.stripe.data.object.amount_total) {
							try {
								if (symbol.s && (data.stripe.data.object.currency.toUpperCase() == "EUR")){
									message.hasDonation = (symbol.s || "") + (data.stripe.data.object.amount_total || "");
								} else {
									message.hasDonation = (symbol.s || "") + (data.stripe.data.object.amount_total || "") + " " + (data.stripe.data.object.currency.toUpperCase() || "");
								}
								message.hasDonation = message.hasDonation.trim();
							} catch (e) {
								console.error(e);
							}
						}
						message.id = parseInt(Math.random() * 100000 + 1000000);
						message.chatbadges = "";
						message.backgroundColor = "";
						message.textColor = "";
						message.nameColor = "";
						message.chatimg = "";
						message.membership = "";
						message.contentimg = "";
						message.type = "stripe";

						data = message; // replace inbound stripe message with new message
					} catch (e) {
						console.error(e);
						return;
					}
				} else if ("kofi" in data) {
					try {
						if (!data.kofi.data) {
							return false;
						}
						try {
							var kofi = JSON.parse(decodeURIComponent(data.kofi.data).replace(/\+/g, " "));
						} catch (e) {
							console.error(e);
							return;
						}

						if (kofi.type !== "Donation") {
							return false;
						} else if (!kofi.is_public) {
							return false;
						}

						var message = {};
						message.chatname = decodeURIComponent(kofi.from_name) || "Anonymous";
						message.chatmessage = decodeURIComponent(kofi.message);

						var currency = "";

						try {
							currency = kofi.currency.toLowerCase() || "";
						} catch (e) {}

						var symbol = {};
						if (currency && currency in Currencies) {
							symbol = Currencies[currency];
						}

						if (kofi.amount) {
							message.hasDonation = (symbol.s || "") + (kofi.amount || "") + " " + (kofi.currency.toUpperCase() || "");
							message.hasDonation = message.hasDonation.trim();
						}
						message.id = parseInt(Math.random() * 100000 + 1000000);
						message.chatbadges = "";
						message.backgroundColor = "";
						message.textColor = "";
						message.nameColor = "";
						message.chatimg = "";
						message.membership = "";
						message.contentimg = "";
						message.type = "kofi";

						data = message; // replace inbound stripe message with new message
					} catch (e) {
						return;
					}

				
				}
				// Buy Me a Coffe New Membership and Donation detection 
				else if ("bmac" in data) {
					try {
						if (!data.bmac) {
							return false;
						}
						else {
							var bmac = data.bmac; 
							var message = {};
							if (bmac.type === "membership.started") {
								message.chatname = bmac.data.supporter_name || "Anonymous"; 
								message.chatmessage = bmac.data.support_note.trim(); 
								//We use the donation badge from Kofi to feature the membership level name
								message.hasDonation = bmac.data.membership_level_name; 
						
							}
							if (bmac.type === "donation.created") {
								var currency = "";
								try {
									currency = kofi.currency.toLowerCase() || "";
								} catch (e) {}

								var symbol = {};
								if (currency && currency in Currencies) {
									symbol = Currencies[currency];
								}		
								message.chatmessage = (bmac.data.message + " - " + "<em>" + bmac.data.support_note + "</em>").trim();
								message.hasDonation = (symbol.s || "") + (bmac.data.amount || "") + " " + (bmac.data.currency.toUpperCase() || "");
								message.hasDonation = message.hasDonation.trim();			
							}
							message.contentimg = "";
							message.id = parseInt(Math.random() * 100000 + 1000000);
							message.chatbadges = "";
							message.backgroundColor = "";
							message.textColor = "";
							message.nameColor = "";
							message.chatimg = "";
							message.membership = "";
							message.type = "bmac";
							data = message; 

					} 
					} catch (e) {
						return;
					}	
				}
				
				else if ("obsCommand" in data) {
					// console.log(data);
					// obsCommand = {value:{action: 'setCurrentScene', value: sceneName}}
					if (data.obsCommand && data.obsCommand.action && window.obsstudio){
						if (window.obsstudio[data.obsCommand.action]) {
						  if ("value" in data.obsCommand){
							window.obsstudio[data.obsCommand.action](data.obsCommand.value, function() {});
						  } else {
							window.obsstudio[data.obsCommand.action](function() {});
						  }
						}
					}
					return;
				}

				if (data.action) {
				
					if (data.target && data.target !== "null" && data.target !== thisLabel) {
						return; // does not match, so we assume this isn't for us.
					}
					//console.log(data);

					if (data.action == "clear" || data.action == "clearAll") {
						// clears all except pinned messages
						getById("output").innerHTML = "";
						autoShowQueue = [];
						selectedQueue = [];
						if (data.ctrl) {
							getById("pinned").innerHTML = "";
						}
						sendDataP2P(false);
						updateQueueButton();
						TTS.clearQueue();
						return true;
					} else if (data.action == "clearOverlay") {
						// or just send data=false
						sendDataP2P(false);
						return true;
					} else if (data.action == "nextInQueue") {
						nextInQueue();
						return true;
					} else if (data.action == "getQueueSize") {
						// or just send data=false
						updateQueueButton();
						return true;
					} else if (data.action == "autoShow") {
						// or just send data=false
						if (data.value == "toggle") {
							autoshow = !autoshow;
						} else if (data.value == "true") {
							autoshow = true;
						} else if (data.value == "false") {
							autoshow = false;
						} else if (data.value == "1") {
							autoshow = true;
						} else if (data.value == "0") {
							autoshow = false;
						} else if (data.value) {
							autoshow = true;
						} else {
							autoshow = false;
						}
						autoShow(false);
						return true;
					} else if (data.action == "content") {
						// or just send data=false
						if (data.value) {
							//let content = decodeURI(data.value);
							let content = JSON.parse(data.value);
							if (!pauseState) {
								processData({ contents: content });
							} else {
								queue.push({ contents: content });
								if (queue.length > 100) {
									// keep the queue from exploding in size
									queue.shift();
								}
							}
							return true;
						}
						return false;
					} else if (data.action == "feature"){
						if (document.querySelector("div[data-mid]:not(.pressed)")){
							selectedMessage(false, document.querySelector("div[data-mid]:not(.pressed)"));
						} else{
							console.log("No message found to feature that hasn't already been featured");
						}
					} else if (data.action === "toggleTTS" || data.action === "tts") {
						if ("value" in data){
							if (data.value == "toggle") {
								TTS.speech = !TTS.speech;
							} else if (data.value == "true") {
								TTS.speech = true;
							} else if (data.value == "false") {
								TTS.speech = false;
							} else if (data.value == "1") {
								TTS.speech = true;
							} else if (data.value == "0") {
								TTS.speech = false;
							} else if (data.value == "on") {
								TTS.speech = true;
							} else if (data.value == "off") {
								TTS.speech = false;
							} else if (data.value) {
								TTS.speech = true;
							} else {
								TTS.speech = false;
							}
						} else {
							TTS.speech = !TTS.speech;
						}
						//console.log("TTS: "+TTS.speech);
						if (TTS.speech) {
							getById("tts").dataset.state = "1";
							getById("tts").style["background-image"] = "url(./icons/tts_incoming_messages_on.png)";
							getById("tts").title = "Text-to-speech — 🔊⏹ Stop reading incoming messages out-loud with text-to-speech";
						} else {
							getById("tts").dataset.state = "0";
							getById("tts").style["background-image"] = "url(./icons/tts_incoming_messages_off.png)";
							getById("tts").title = "Text-to-speech — 🔊 Start reading incoming messages out-loud with text-to-speech";
						}
						return TTS.speech;
					}
				} else if ("forward" in data) {
					sendDataP2P(data.forward);
					return true;
				} else if ("html" in data) {
					processHTML(data);
					return true;
				} else if (data.content) {
					if (!pauseState) {
						processData({ contents: data.content });
					} else {
						queue.push({ contents: data.content });
						if (queue.length > 100) {
							// keep the queue from exploding in size
							queue.shift();
						}
					}
					return true;
				} else if (!pauseState) {
					if (data && ("meta" in data)){
						if (updateMeta(data)){
							return true;
						}
					}
					return processData({ contents: data });
				} else {
					if (data && ("meta" in data)){
						if (updateMeta(data)){
							return true;
						}
					}
					queue.push({ contents: data });
					if (queue.length > 100) {
						// keep the queue from exploding in size
						queue.shift();
					}
					return true;
				}
				return false;
			}
			
			function RecvDataWindow(room) {
				var iframe = document.createElement("iframe");
				iframe.connectedPeers = {};
				iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" + password + lanonly + obsremote + "&push&notmobile&label=dock&vd=0&ad=0&novideo&noaudio&autostart&cleanoutput&room=" + room;
				// push and view, as we will connect with other docks also. I suppose I can have it only do this if &sync is enabled?
				iframe.style.width = "0px";
				iframe.style.height = "0px";
				iframe.style.position = "fixed";
				iframe.style.left = "-100px";
				iframe.style.top = "-100px";
				iframe.id = "frame_" + room;
				iframe.allow = "midi;geolocation;microphone;"; // microphone is needed for Safari webRTC P2P connections

				if (!iframes) {
					iframes = [iframe];
				} else {
					iframes.push(iframe);
				}
				document.body.appendChild(iframe);

				var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
				var eventer = window[eventMethod];
				var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

				eventer(messageEvent, function (e) {
					if (e.source != iframe.contentWindow) {
						return;
					} // reject messages send from other iframes

					if ("action" in e.data && e.data.action == "view-stats-updated") {
						return;
					}
					if ("action" in e.data && e.data.UUID && e.data.value && e.data.action == "push-connection-info") {
						// flip this
						if ("label" in e.data.value) {
							iframe.connectedPeers[e.data.UUID] = e.data.value.label;
							if (iframe.connectedPeers[e.data.UUID] === "dock") {
								// this is a dock that wants to be synced with
								syncDockAll(e.data.UUID);
							}
						}
					} else if ("action" in e.data && e.data.UUID && e.data.value && e.data.action == "view-connection-info") {
						// flip this
						if ("label" in e.data.value) {
							iframe.connectedPeers[e.data.UUID] = e.data.value.label;
							if (openChatAutomatically) {
								send2Extension({ action: "openChat", value: null }, e.data.UUID);
							}
						}
						
						if (urlParams.has("loadlast") && e.data.streamID==roomID) {
							getRecentHistory(parseInt(urlParams.get("loadlast")) || 30);
						}
					}

					if ("action" in e.data && e.data.UUID && "value" in e.data && !e.data.value && e.data.action == "push-connection") {
						// flip this
						if (e.data.UUID in iframe.connectedPeers) {
							delete iframe.connectedPeers[e.data.UUID];
						}
						//console.log(iframe.connectedPeers);
					} else if ("action" in e.data && e.data.UUID && "value" in e.data && !e.data.value && e.data.action == "view-connection") {
						// flip this
						if (e.data.UUID in iframe.connectedPeers) {
							delete iframe.connectedPeers[e.data.UUID];
						}
					} else if (obsremote && "action" in e.data && "value" in e.data && e.data.action == "obs-state") { 
						if (e.data.value.details && e.data.value.details.currentScene && e.data.value.details.currentScene.name){
						
							let ele = topBarElement.querySelector("#currentScene");
							if (!ele){
								ele = document.createElement("div");
								ele.id = "currentScene";
								topBarElement.append(ele);
								ele.addEventListener('click', openOBSControlModal);
							}
							ele.style.backgroundColor = getColorFromString( e.data.value.details.currentScene.name);
							ele.innerText = e.data.value.details.currentScene.name;
						}
						//console.log(e.data);
						updateOBSState(e.data);
					}

					if ("dataReceived" in e.data) {
						// raw data
						if ("overlayNinja" in e.data.dataReceived) {
							processInput(e.data.dataReceived.overlayNinja);
						}
					}
				});
			}
			///////////
			let obsState = {};
			const modal = document.getElementById('obsControlModal');
			const sceneButtons = document.getElementById('sceneButtons');
			const streamingButton = document.getElementById('streamingButton');
			const recordingButton = document.getElementById('recordingButton');
			const currentSceneSpan = document.getElementById('currentScene');
			const streamingStatusSpan = document.getElementById('streamingStatus');
			const recordingStatusSpan = document.getElementById('recordingStatus');

			function updateOBSState(data) {
			  // Merge the new state with the existing state
			  if (data && data.value && data.value.details && data.value.details.controlLevel){
				  obsState = mergeDeep(obsState, data.value);
				  updateControlPanel(data.UUID);
			  } else if (data && data.value && ("recording" in data.value)){
				  obsState = mergeDeep(obsState, data.value);
				  updateControlPanel(data.UUID);
			  } else if (data && data.value && ("streaming" in data.value)){
				  obsState = mergeDeep(obsState, data.value);
				  updateControlPanel(data.UUID);
			  } else if (data && data.value && ("sourceActive" in data.value)){
				  obsState = mergeDeep(obsState, data.value);
				  updateControlPanel(data.UUID);
			  } else if (data && data.value && ("visibility" in data.value)){
				  obsState = mergeDeep(obsState, data.value);
				  updateControlPanel(data.UUID);
			  }
			}

			// Helper function to perform a deep merge of objects
			function mergeDeep(target, source) {
			  if (typeof source === 'object' && source !== null) {
				for (let key in source) {
				  if (source.hasOwnProperty(key)) {
					if (typeof source[key] === 'object' && source[key] !== null && target.hasOwnProperty(key)) {
					  target[key] = mergeDeep(target[key], source[key]);
					} else if (source[key] !== undefined) {
					  target[key] = source[key];
					}
				  }
				}
			  }
			  return target;
			}

			function updateControlPanel(UUID=false) {
			  const details = obsState.details || {};
			  const controlLevel = details.controlLevel || 0;
			  
			  if (controlLevel>3 && UUID){
				obsState.UUID = UUID;
				//console.log(UUID, controlLevel);
			  }

			  // Update scenes
			  sceneButtons.innerHTML = '';
			  if (controlLevel >= 2 && details.scenes) {
				details.scenes.forEach(scene => {
				  const button = document.createElement('button');
				  button.textContent = scene;
				  button.disabled = controlLevel < 4;
				  button.onclick = () => changeScene(scene);
				  if (details.currentScene && details.currentScene.name === scene) {
					button.classList.add('active');
				  }
				  sceneButtons.appendChild(button);
				});
			  }

			  // Update controls
			  streamingButton.disabled = controlLevel < 5;
			  recordingButton.disabled = controlLevel < 5;
			  
			  // Update status
			  currentSceneSpan.textContent = details.currentScene ? details.currentScene.name : 'Unknown';
			  streamingStatusSpan.textContent = obsState.streaming ? 'Active' : 'Inactive';
			  recordingStatusSpan.textContent = obsState.recording ? 'Active' : 'Inactive';

			  // Update button text based on current state
			  streamingButton.textContent = obsState.streaming ? 'Stop Streaming' : 'Start Streaming';
			  recordingButton.textContent = obsState.recording ? 'Stop Recording' : 'Start Recording';
			}

			function changeScene(sceneName) {
			  sendOBSCommand({action: 'setCurrentScene', value: sceneName});
			}

			function toggleStreaming() {
			  sendOBSCommand({action: obsState.streaming ? 'stopStreaming' : 'startStreaming'});
			}

			function toggleRecording() {
			  sendOBSCommand({action: obsState.recording ? 'stopRecording' : 'startRecording'});
			}

			function sendOBSCommand(command) {
			  // Implement your sendMessage function here
			  var msg = {
				action: "obsCommand",
				value: command,
				target: obsState.UUID
			  };
			  //console.log(msg);
			  send2Extension(msg);
			}
			
			// Event listeners
			streamingButton.addEventListener('click', toggleStreaming);
			recordingButton.addEventListener('click', toggleRecording);
			document.getElementById('closeModal').addEventListener('click', () => {
				modal.classList.add('hidden')
				//modal.style.display = "none";
			});

			// Function to open the modal
			function openOBSControlModal() {
			  modal.classList.remove('hidden');
			 // modal.style.display = "block";
			}

			roomID.split(",").forEach(roomz => {
				RecvDataWindow(roomz.trim());
			});

			function createElementFromHTML(htmlString) {
				var div = document.createElement("div");
				div.innerHTML = htmlString.trim();
				return div.firstChild;
			}

			//	if (forceAutoscroll){
			//	getById("jumpto").classList.add("pressed");
			//	}

			function jumptoBottom() {
				var ele = getById("jumpto");
				forceAutoscroll = !forceAutoscroll;
				if (forceAutoscroll) {
					ele.style["background-image"] = "url(./icons/scroll_to_bottom_on.png)";
					ele.title = "Force scroll to bottom";
				} else {
					ele.style["background-image"] = "url(./icons/scroll_to_bottom_off.png)";
					ele.title = "Scroll to bottom";
				}
				jumptoBottom2();
			}
			function jumptoBottom2() {
				var target = alignbottom || fadetop ? getById("output") : document.scrollingElement;
				if (scrolltype == "instant") {
					target.scrollTop = target.scrollHeight;
				} else {
					target.scrollTo({
						top: target.scrollHeight,
						left: 0,
						behavior: scrolltype
					});
				}
			}

			function filterMessage(ele) {
				if (filterAddNameAndTime) {
					if (!filtering) {
						ele.classList.remove("hide");
					} else if (!filterNamesNotMessages && filtering.length && filtering.toLowerCase().split(',').map(term => term.trim()).some(term => term.length && ele.textContent.toLowerCase().includes(term))) {
						ele.classList.remove('hide');
					} else if (filterNamesNotMessages && ele.querySelector(".hl-name") && filtering.toLowerCase().split(",").map(element => element.trim()).includes(ele.querySelector(".hl-name").textContent.toLowerCase().trim())) {
						ele.classList.remove("hide");
					} else if (ele.dataset.sourceType && "source:" + ele.dataset.sourceType == filtering) {
						ele.classList.remove("hide");
					} else if (ele.dataset.sourceType && "source:!" + ele.dataset.sourceType == filtering) {
						ele.classList.add("hide");
					} else if (ele.dataset.sourceType && filtering.startsWith("source:!")) {
						ele.classList.remove("hide");
					} else {
						ele.classList.add("hide");
					}
				} else {
					if (!filtering) {
						ele.classList.remove("hide");
					} else if (filtering.length && filtering.toLowerCase().split(',').map(term => term.trim()).some(term => term.length && ele.querySelector(".hl-message").innerText.toLowerCase().includes(term))) {
						ele.classList.remove("hide");
					} else if (ele.dataset.sourceType && "source:" + ele.dataset.sourceType == filtering) {
						ele.classList.remove("hide");
					} else if (ele.dataset.sourceType && "source:!" + ele.dataset.sourceType == filtering) {
						ele.classList.add("hide");
					} else if (ele.dataset.sourceType && filtering.startsWith("source:!")) {
						ele.classList.remove("hide");
					} else {
						ele.classList.add("hide");
					}
				}
			}

			function filterMessages(fff = "") {
				var eles = document.querySelectorAll("#output > div");
				var elesValue = document.querySelectorAll("#output .hl-message");
				if (eles.length !== elesValue.length) return;

				filtering = fff.trim().toLowerCase();

				// With user name and message time

				for (var i = 0; i < eles.length; i++) {
					filterMessage(eles[i]);
				}
			}

			function toDataURL(url, callback) {
				var xhr = new XMLHttpRequest();
				xhr.onload = function () {
					try {
						var reader = new FileReader();
						reader.onloadend = function () {
							callback(reader.result);
						};
						reader.readAsDataURL(xhr.response);
					} catch (e) {
						callback(false);
					}
				};
				xhr.onerror = function () {
					callback(false);
				};
				xhr.open("GET", url);
				xhr.responseType = "blob";
				xhr.send();
			}

			var fallbackImage = new Image();
			fallbackImage.src = "./sources/images/unknown.png";
			fallbackImage.onerror = function () {
				fallbackImage = false;
			};
			
			var fallbackImageAnnouncement = new Image();
			fallbackImageAnnouncement.src = "./icons/announcement.png";
			fallbackImageAnnouncement.onerror = function () {
				fallbackImageAnnouncement = false;
			};

			function errorImage(ele) {
				if (fallbackImage) {
					ele.src = "./sources/images/unknown.png";
					if (darkmode) {
						ele.classList.add("invert");
					}
				} else {
					ele.style.display = "none";
				}
			}

			function processHTML(data) {
				//var node = createElementFromHTML('<div id="msg_'+data.id+'" class="highlight-chat">'+ data.html+'</div>')
				//mainOutputWindow.appendChild(node);
			}

			function nextInQueue(event=false) {
			
				if (event && !autoshowqueued && (event.ctrlKey || event.metaKey)) {
					autoshowqueued = true;
					getById("next_in_queue").style["background-image"] = "url(./icons/queue_show_autonext.png)";
					getById("next_in_queue").title = "Auto-showing all queued messages. Click to disable";
				//	getById("next_in_queue_badge").classList.add("hidden");
				} else if (event && autoshowqueued){
					autoshowqueued = false;
					getById("next_in_queue").style["background-image"] = "url(./icons/queue_show_next.png)";
					getById("next_in_queue").title = "Queue — ⏭ Feature next message in queue (select messages holding CTRL for add them to the queue)";
				//	getById("next_in_queue_badge").classList.remove("hidden");
					return;
				}
				
				if (!selectedQueue.length) {
					sendDataP2P(false);
					updateQueueButton();
					return;
				}

				
				
				if (autoshowqueued){
					element = selectedQueue.shift();
					lastPushed = Date.now();
					selectedMessage(false, element, true);  
					element.classList.remove("queued");
					delete element.children[0].dataset.qid; 
				} else {
					
					lastPushed = Date.now();
					element = selectedQueue.shift();
					selectedMessage(false, element);  
					element.classList.remove("queued");
					delete element.children[0].dataset.qid; 
				} 
				updateQueueButton(true);
				syncQueueP2P();
				
			}

			async function fetchWithTimeout(resource, options = {}) {
				// https://dmitripavlutin.com/timeout-fetch-request/
				const { timeout = 8000 } = options;

				const controller = new AbortController();
				const id = setTimeout(() => controller.abort(), timeout);
				const response = await fetch(resource, {
					...options,
					signal: controller.signal
				});
				clearTimeout(id);
				return response;
			}

			function unpinIt(element) {
				element.classList.remove("pinned");
				getById("output").prepend(element);
				element.title = "Alt + Click to pin message";
				applyHiddenState(element);
			}

			function pinIt(element) {
				element.classList.add("pinned");
				element.title = "Alt + Click to remove pinned message";
				getById("pinned").appendChild(element);
				applyHiddenState(element);
			}

			function deleteMessage(element) {
				syncDataAny({ deleteMessage: element.dataset.mid }, false, true);
				element.remove();
			}

			var localBlockUserList = false;
			function blockUser(element) {
				try{
					var chatName = element.dataset.chatname;
					var chatImg = element.dataset.chatimg || "";
					var type = element.dataset.sourceType;
					
					//console.log(chatName, type);
					
					if (!localBlockUserList) {
						localBlockUserList = {};
					}
					if (chatName && type) {
						if (localBlockUserList[chatName]) {
							if (!(type in localBlockUserList[chatName])) {
								localBlockUserList[chatName].push(type);
							}
						} else {
							localBlockUserList[chatName] = [type];
						}
						document.querySelectorAll("[data-chatname='" + chatName + "'][data-source-type='" + type + "']").forEach(ele => {
							ele.remove();
						});
						
						let sendBlob = {};
						sendBlob.chatname = chatName;
						sendBlob.type = type;
						
						if (element.rawContents && element.rawContents.userid){
							sendBlob.userid = element.rawContents.userid;
						}
						if (chatImg){
							sendBlob.chatimg = chatImg;
						}
						
						//console.log(sendBlob);
						
						send2Extension({ action: "blockUser", value: sendBlob });
						
						// Remove user from local block list after 10 seconds
						setTimeout(() => {
							if (localBlockUserList && localBlockUserList[chatName]) {
								const index = localBlockUserList[chatName].indexOf(type);
								if (index !== -1) {
									localBlockUserList[chatName].splice(index, 1);
									if (localBlockUserList[chatName].length === 0) {
										delete localBlockUserList[chatName];
									}
								}
							}
						}, 10000);
					}
				} catch(e){
					console.error(e);
				}
			}

			function replyToUser(element) {
				if (isOBSBrowserSource) {
					return;
				}
				
				var chatName = element.dataset.chatname;
				var type = element.dataset.sourceType;
				var tid = element.rawContents ? element.rawContents.tid : null;
				
				if (document.getElementById("getChatSourceButton")) {
					clearTimeout(getById("getChatSourcesButton").setTimeout);
				}
				
				var modal = document.getElementById("getReplyModule");
				if (!modal) {
					modal = document.createElement("div");
					modal.id = "getReplyModule";
					modal.classList.add("modal");
					modal.style.display = "block";
					modal.innerHTML = `
						<div class="modal-content">
							<span class="close-btn" id="closereply">&times;</span>
							<h2 id="c">What message do you want to send ${chatName}?</h2>
							<input type="textarea" style="width: calc(100% - 200px);min-width:200px;" id="getReplyModuleInput">
							<button id="getReplyModuleButton">SEND</button><br><br>
							${!tid ? "<div>⚠️ This message will go to all destinations, since it didn't come from a specific tab</div>" : ""}
						</div>`;
						
					document.body.appendChild(modal);
				} else {
					modal.classList.remove("hidden");
				}
				
				const closeModal = () => {
					modal.classList.add("hidden");
					modal.remove();
				};
				
				const handleSend = () => {
					const getReplyModuleInput = getById("getReplyModuleInput");
					let response = getReplyModuleInput.value ? getReplyModuleInput.value.trim() : null;
					if (!response) return;
					
					closeModal();
					
					if (!response.startsWith("@")) {
						response = `@${chatName}: ${response}`;
					}
					
					let sendBlob = { response };
					if (tid !== null) {
						sendBlob.tid = tid;
					}
					send2Extension(sendBlob);
				};
				
				const span = document.getElementById("closereply");
				const getReplyModuleInput = getById("getReplyModuleInput");
				const getReplyModuleButton = getById("getReplyModuleButton");
				
				getReplyModuleInput.focus();
				
				span.onclick = closeModal;
				modal.onclick = (e) => {
					if (e.target === modal) {
						closeModal();
					}
				};
				
				getReplyModuleButton.onclick = handleSend;
				getReplyModuleInput.onkeyup = (e) => {
					if (e.key === "Enter") {
						handleSend();
					}
				};
			}
		

			function toggleVIPUser(element) {
				var chatName = element.dataset.chatname;
				var type = element.dataset.sourceType;

				if (chatName && type) {
					send2Extension({ action: "toggleVIPUser", value: { chatname: chatName, type: type } });
				}
			}

			function filterQueued() {
				// #show_only_queue
				var ele = getById("show_only_queue");
				if (ele.dataset.state == "0") {
					ele.dataset.state = "1";
					//document.documentElement.style.setProperty("--show-queue-only", "none");
					hideNotQueued = true;
					ele.style["background-image"] = "url(./icons/queue_show_listonly_on.png)";
					ele.title = "Queue — 📄 Show all messages, including the ones in queue";
				} else {
					ele.dataset.state = "0";
					//document.documentElement.style.setProperty("--show-queue-only", flexOrNotToFlex);
					hideNotQueued = false;
					ele.style["background-image"] = "url(./icons/queue_show_listonly_off.png)";
					ele.title = "Queue — 📑 Show only the messages in queue";
				}
				redoOdd();
			}

			function updateQueueButton(relabel = false) {
				if (!selectedQueue.length) {
					getById("next_in_queue_badge").innerText = "0";
					getById("next_in_queue").title = "Queue — ⏭ Feature next message in queue (since queue is empty, it will clear the active overlay)";
				} else {
					getById("queueSection").classList.remove("hidden");
					getById("next_in_queue_badge").innerText = selectedQueue.length;
					getById("next_in_queue").title = "Queue — ⏭ Feature next message in queue (select messages holding CTRL for add them to the queue)";
				}
				if (relabel) {
					for (var i = 0; i < selectedQueue.length; i++) {
						try {
							selectedQueue[i].children[0].dataset.qid = i + 1;
						} catch (e) {
							console.error(e);
						}
					}
				}
				if (socketserver) {
					socketserver.send(JSON.stringify({ queueLength: selectedQueue.length }));
				}
				if (autoshowqueued){
					checkAutoShow();
				}
			}

			function removeQueue(element) {
				element.classList.remove("queued");
				delete element.children[0].dataset.qid;
				var index = selectedQueue.indexOf(element);
				if (index > -1) {
					// only splice array when item is found
					selectedQueue.splice(index, 1); // 2nd parameter means remove one item only
				}
				updateQueueButton(true);
			}

			function selectedMessage(event = false, element = false, lastpushreset = false) { 
				if (blockMessageSelecting || blockMessageSelecting2) {
					return;
				}

				if (!element) {
					element = this;
				}

				e = event || window.event;
				if (event && e.which !== 1) {
					return;
				}

				if (event && (event.ctrlKey || event.metaKey)) {
					if (element.classList.contains("queued")) {
						removeQueue(element);
						syncQueueP2P(false, element);
						return;
					}
					selectedQueue.push(element);
					element.children[0].dataset.qid = selectedQueue.length;
					element.classList.add("queued");
					updateQueueButton();
					syncQueueP2P(false, element);
					return;
				} else if (event && event.altKey) {
					if (element.classList.contains("pinned")) {
						unpinIt(element);
						if (element.dataset.mid) {
							syncDataAny({ unpin: [element.dataset.mid] });
						}
					} else {
						pinIt(element);
						if (element.dataset.mid && element.rawContents) {
							syncDataAny({ pin: [element.rawContents] });
						} else if (element.dataset.mid) {
							syncDataAny({ pin: [element.dataset.mid] });
						}
					}
					return;
				}

				if (blockMessageSelecting3) {
					return;
				}

				if (event && element.classList.contains(lastMessageClass)) {
					// Message is already featured!
					element.classList.remove(lastMessageClass); // remove classes
					sendDataP2P(false); // clear message
					return;
				}

				if (element.classList.contains("queued")) {
					removeQueue(element);
					syncQueueP2P(false, element);
					
				}
				if (element.classList.contains("pinned")) {
					unpinIt(element);
					if (element.dataset.mid) {
						syncDataAny({ unpin: [element.dataset.mid] });
					}
				}

				if (autoTimeoutEnabled || lastpushreset) {
					lastPushed = Date.now();
					if (event && autoShowQueue.length) {
						// user selected and an auto queue
						var index = autoShowQueue.indexOf(element); // item exists in the queue; so lets remove it from it
						if (index > -1) {
							// remove if
							autoShowQueue.splice(index, 1); // 2nd parameter means remove one item only
						}
					}
				}

				document.querySelectorAll("." + lastMessageClass).forEach(ele => {
					// last message sent was to clear the overlay
					ele.classList.remove(lastMessageClass); // no overlay is now active.
				});
				element.classList.add(pressedClass, lastMessageClass); // add last-message class

				try {
					activeWordLength = element.contentLength;
				} catch (e) {}

				var data = element.rawContents;
				
				if (event){
					data.clicked = true;
				}

				if (thirdPartyAPI) {
					// we upscale using a generic upsizing function for third parties.
					thirdPartyAPI(data); // not going to send base64 to the third party API, since that would kill my server, but third parties won't expect a blob.
				} else if (data.type && ((data.type == "youtube") || (data.type == "youtubeshorts")) && data.chatimg) {
					// youtube's images are a bit tricky; larger images don't always exist.
					try {
						toDataURL(data.chatimg, (base64Image) => {
							// we upscale
							data.chatimg = data.chatimg.replace("=s32-", "=s256-"); // Increases the resolution of the image
							data.chatimg = data.chatimg.replace("=s64-", "=s256-");
							if (base64Image) {
								data.backupChatimg = base64Image; // there's code in the index page to fallback if the larger image doens't exist
							}
							sendDataP2P(data);
						});
					} catch (e) {
						data.chatimg = data.chatimg.replace("=s32-", "=s256-"); // Increases the resolution of the image
						data.chatimg = data.chatimg.replace("=s64-", "=s256-");
						sendDataP2P(data);
					}
				} else {
					sendDataP2P(data); // we handle twitch upsizing in the index.html instead.
				}
			}

			function slideIn(node) {
				if (horizontal) {
					nodeRemove(node);
				} else {
					node.style.transition = "all linear 0.5s";
					node.style.height = "0";
					setTimeout(
						function (node) {
							nodeRemove(node);
						},
						500,
						node
					);
				}
			}

			function cleanUpOldNodes() {
				var nodes = document.querySelectorAll("#output>div:not(.queued)");
				var total2Remove = 0;
				if (isOBSBrowserSource && !doubleLimit) {
					// This is an OBS browser source, so lets go light on it.
					if (customNodeLimit) {
						total2Remove = nodes.length - customNodeLimit;
					} else if (window.innerHeight > 1600) {
						total2Remove = nodes.length - 39;
					} else if (window.innerHeight > 1200) {
						total2Remove = nodes.length - 30;
					} else if (window.innerHeight > 800) {
						total2Remove = nodes.length - 22;
					} else if (window.innerHeight > 400) {
						total2Remove = nodes.length - 14;
					} else {
						total2Remove = nodes.length - 10;
					}
				} else if (customNodeLimit) {
					total2Remove = nodes.length - customNodeLimit;
				} else if (window.innerHeight > 900) {
					total2Remove = nodes.length - 80;
				} else if (window.innerHeight > 600) {
					total2Remove = nodes.length - 70;
				} else {
					total2Remove = nodes.length - 60;
				}
				if (total2Remove > 0) {
					for (var i = total2Remove - 1; i >= 0; i--) {
						transitionOutNode(nodes[i]);
					}
				}
			}

			function animateCSS(node, animation) {
				// animate then delete
				new Promise((resolve, reject) => {
					//node.classList.remove("animate__animated");
					//node.classList.add("animate__animated");

					var cleanup = setTimeout(
						function (node, resolve) {
							resolve("Animation ended");
							node.remove();
						},
						5000,
						node,
						resolve
					);
					node.classList.add(animation);
					function handleAnimationEnd(event) {
						clearTimeout(cleanup);
						resolve("Animation ended");
						node.remove();
					}

					node.addEventListener("animationend", handleAnimationEnd, { once: true });
				});
			}

			function transitionOutNode(node) {
				if (!node){return;}
				
				if (animateout) {
					animateCSS(node, animateout); // animate then delete
				} else if (fadeout && horizontal) {
					node.classList.add("fadeout"); 
					setTimeout(
						function (node) {
							nodeRemove(node);
						},
						1500,
						node
					);
				} else if (horizontal) {
					nodeRemove(node);
				} else if (fadeout) {
					node.classList.add("fadeout");
					setTimeout(
						function (node) {
							nodeRemove(node);
						},
						1500,
						node
					);
				} else if (scrolltype === "smooth") {
					node.style.transition = "all linear 0.5s";
					node.style.height = "0";
					setTimeout(
						function (node) {
							nodeRemove(node);
						},
						500,
						node
					);
				} else {
					nodeRemove(node);
				}
			}

			function nodeRemove(node = null) {
				if (node) {
					node.remove();
				}
				if (!(reversed && !forceAutoscroll)) {
					if (alignbottom || fadetop) {
						if (getById("output").scrollHeight < getById("output").scrollTop + getById("output").clientHeight + autoScrollCatch || forceAutoscroll) {
							jumptoBottom2()
						}
					} else if (document.body.scrollHeight < document.body.scrollTop + document.body.clientHeight + autoScrollCatch || forceAutoscroll) {
						jumptoBottom2()
					}
				}
			}

			function stripHtmlFunction(html) {
				let tmp = document.createElement("DIV");
				tmp.innerHTML = html;
				return tmp.textContent || tmp.innerText || "";
			}

			function escapeHtml(unsafe) {
				try {
					return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;") || "";
				} catch (e) {
					return "";
				}
			}
			
			function processURLs(element, { makeClickable = false, stripLinks = false, shortenURLs = false, maxLength = 40, replaceSubstring = "[Link]" } = {}) {
				if (!element) return;
				
				const urlPattern = /(?:(?:https?:\/\/)?(?:www\.)?)?(?!-)[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+(?:\/[^\s]*)?(?=\s|$)|(?:https?:\/\/)[^\s]+/g;
				
				function shortenUrl(url) {
					try {
						const parsedUrl = new URL(url.startsWith('http') ? url : 'https://' + url);
						const protocol = parsedUrl.protocol;
						const domain = parsedUrl.hostname;
						const path = parsedUrl.pathname + parsedUrl.search;
						
						if (url.length <= maxLength) return url;
						if (protocol.length + domain.length > maxLength) {
							return protocol + "//" + domain.slice(0, maxLength - protocol.length - 3) + "...";
						}
						const remainingLength = maxLength - (protocol.length + domain.length + 3);
						return path.length > remainingLength ? 
							protocol + "//" + domain + path.slice(0, remainingLength) + "..." :
							protocol + "//" + domain + path;
					} catch(e) {
						return url;
					}
				}
				
				function compareUrls(href, innerUrl) {
					if (href === innerUrl) return true;
					
					try {
						const hrefUrl = new URL(href.startsWith('http') ? href : 'https://' + href);
						const innerUrlNormalized = innerUrl.startsWith('http') ? innerUrl : 'https://' + innerUrl;
						return hrefUrl.toString().startsWith(innerUrlNormalized);
					} catch(e) {
						return href.includes(innerUrl);
					}
				}

				function processTextNode(textNode) {
					const text = textNode.textContent;
					let lastIndex = 0;
					const fragment = document.createDocumentFragment();
					let match;
					
					if (makeClickable) {
						const parentAnchor = textNode.parentElement ? textNode.parentElement.closest('a') : null;
						if (parentAnchor) {
							const href = parentAnchor.getAttribute('href');
							
							while ((match = urlPattern.exec(text)) !== null) {
								const innerUrl = match[0];
								if (href && innerUrl) {
									if (innerUrl.endsWith('...')) {
										shortenURLs = true;
										if (compareUrls(href, innerUrl.slice(0, -3))) {
											const displayText = stripLinks ? replaceSubstring : 
															  shortenURLs ? shortenUrl(href) : href;
											const anchor = document.createElement("a");
											anchor.href = href.startsWith('http') ? href : 'https://' + href;
											anchor.textContent = displayText;
											anchor.title = "Click to open: " + href;
											anchor.target = "_blank";
											anchor.style.pointerEvents = "auto";
											anchor.addEventListener("click", e => e.stopPropagation());
											parentAnchor.parentNode.replaceChild(anchor, parentAnchor);
											return;
										}
									} else if (compareUrls(href, innerUrl)) {
										const displayText = stripLinks ? replaceSubstring : 
														  shortenURLs ? shortenUrl(href) : href;
										const anchor = document.createElement("a");
										anchor.href = href.startsWith('http') ? href : 'https://' + href;
										anchor.textContent = displayText;
										anchor.title = "Click to open: " + href;
										anchor.target = "_blank";
										anchor.style.pointerEvents = "auto";
										anchor.addEventListener("click", e => e.stopPropagation());
										parentAnchor.parentNode.replaceChild(anchor, parentAnchor);
										return;
									}
								}
							}
						}
					}
					
					while ((match = urlPattern.exec(text)) !== null) {
						if (/^[a-zA-Z0-9](?:\.[a-zA-Z0-9]){1,2}$/.test(match[0]) && 
							match[0].length <= 5 && 
							!match[0].includes('/')) {
							continue;
						}
						
						let isValid = false;
						if (match[0].startsWith('http') || match[0].startsWith('www.')) {
							isValid = true;
						} else {
							const parts = match[0].split('.');
							const potentialTLD = parts[parts.length - 1].split(/[/?#]/)[0];
							if (match[0].includes('/') || isValidTLD(potentialTLD)) {
								isValid = true;
							}
						}
						if (!isValid) continue;

						if (match.index > lastIndex) {
							fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
						}

						const url = match[0];
						const displayUrl = shortenURLs ? shortenUrl(url) : (stripLinks ? replaceSubstring : url);

						if (makeClickable) {
							const anchor = document.createElement("a");
							anchor.href = url.startsWith('http') ? url : 'https://' + url;
							anchor.textContent = displayUrl;
							anchor.title = "Click to open: " + url;
							anchor.target = "_blank";
							anchor.style.pointerEvents = "auto";
							anchor.addEventListener("click", e => e.stopPropagation());
							fragment.appendChild(anchor);
						} else {
							fragment.appendChild(document.createTextNode(displayUrl));
						}
						
						lastIndex = match.index + url.length;
					}

					if (lastIndex < text.length) {
						fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
					}
					if (lastIndex > 0) {
						textNode.parentNode.replaceChild(fragment, textNode);
					}
				}

				function traverse(node) {
					if (node.nodeType === 1) {
						Array.from(node.childNodes).forEach(traverse);
					} else if (node.nodeType === 3) {
						processTextNode(node);
					}
				}
				
				traverse(element);
			}
			
			const validTLDs = new Set(["a","aaa","aarp","abb","abbott","abbvie","abc","able","abogado","abudhabi","ac","academy","accenture","accountant","accountants","aco","actor","ad","ads","adult","ae","aeg","aero","aetna","af","afl","africa","ag","agakhan","agency","ai","aig","airbus","airforce","airtel","akdn","al","alibaba","alipay","allfinanz","allstate","ally","alsace","alstom","am","amazon","americanexpress","americanfamily","amex","amfam","amica","amsterdam","analytics","android","anquan","anz","ao","aol","apartments","app","apple","aq","aquarelle","ar","arab","aramco","archi","army","arpa","art","arte","as","asda","asia","associates","at","athleta","attorney","au","auction","audi","audible","audio","auspost","author","auto","autos","aw","aws","ax","axa","az","azure","b","ba","baby","baidu","banamex","band","bank","bar","barcelona","barclaycard","barclays","barefoot","bargains","baseball","basketball","bauhaus","bayern","bb","bbc","bbt","bbva","bcg","bcn","bd","be","beats","beauty","beer","bentley","berlin","best","bestbuy","bet","bf","bg","bh","bharti","bi","bible","bid","bike","bing","bingo","bio","biz","bj","black","blackfriday","blockbuster","blog","bloomberg","blue","bm","bms","bmw","bn","bnpparibas","bo","boats","boehringer","bofa","bom","bond","boo","book","booking","bosch","bostik","boston","bot","boutique","box","br","bradesco","bridgestone","broadway","broker","brother","brussels","bs","bt","build","builders","business","buy","buzz","bv","bw","by","bz","bzh","c","ca","cab","cafe","cal","call","calvinklein","cam","camera","camp","canon","capetown","capital","capitalone","car","caravan","cards","care","career","careers","cars","casa","case","cash","casino","cat","catering","catholic","cba","cbn","cbre","cc","cd","center","ceo","cern","cf","cfa","cfd","cg","ch","chanel","channel","charity","chase","chat","cheap","chintai","christmas","chrome","church","ci","cipriani","circle","cisco","citadel","citi","citic","city","ck","cl","claims","cleaning","click","clinic","clinique","clothing","cloud","club","clubmed","cm","cn","co","coach","codes","coffee","college","cologne","com","commbank","community","company","compare","computer","comsec","condos","construction","consulting","contact","contractors","cooking","cool","coop","corsica","country","coupon","coupons","courses","cpa","cr","credit","creditcard","creditunion","cricket","crown","crs","cruise","cruises","cu","cuisinella","cv","cw","cx","cy","cymru","cyou","cz","d","dabur","dad","dance","data","date","dating","datsun","day","dclk","dds","de","deal","dealer","deals","degree","delivery","dell","deloitte","delta","democrat","dental","dentist","desi","design","dev","dhl","diamonds","diet","digital","direct","directory","discount","discover","dish","diy","dj","dk","dm","dnp","do","docs","doctor","dog","domains","dot","download","drive","dtv","dubai","dunlop","dupont","durban","dvag","dvr","dz","e","earth","eat","ec","eco","edeka","edu","education","ee","eg","email","emerck","energy","engineer","engineering","enterprises","epson","equipment","er","ericsson","erni","es","esq","estate","et","eu","eurovision","eus","events","exchange","expert","exposed","express","extraspace","f","fage","fail","fairwinds","faith","family","fan","fans","farm","farmers","fashion","fast","fedex","feedback","ferrari","ferrero","fi","fidelity","fido","film","final","finance","financial","fire","firestone","firmdale","fish","fishing","fit","fitness","fj","fk","flickr","flights","flir","florist","flowers","fly","fm","fo","foo","food","football","ford","forex","forsale","forum","foundation","fox","fr","free","fresenius","frl","frogans","frontier","ftr","fujitsu","fun","fund","furniture","futbol","fyi","g","ga","gal","gallery","gallo","gallup","game","games","gap","garden","gay","gb","gbiz","gd","gdn","ge","gea","gent","genting","george","gf","gg","ggee","gh","gi","gift","gifts","gives","giving","gl","glass","gle","global","globo","gm","gmail","gmbh","gmo","gmx","gn","godaddy","gold","goldpoint","golf","goo","goodyear","goog","google","gop","got","gov","gp","gq","gr","grainger","graphics","gratis","green","gripe","grocery","group","gs","gt","gu","gucci","guge","guide","guitars","guru","gw","gy","h","hair","hamburg","hangout","haus","hbo","hdfc","hdfcbank","health","healthcare","help","helsinki","here","hermes","hiphop","hisamitsu","hitachi","hiv","hk","hkt","hm","hn","hockey","holdings","holiday","homedepot","homegoods","homes","homesense","honda","horse","hospital","host","hosting","hot","hotels","hotmail","house","how","hr","hsbc","ht","hu","hughes","hyatt","hyundai","i","ibm","icbc","ice","icu","id","ie","ieee","ifm","ikano","il","im","imamat","imdb","immo","immobilien","in","inc","industries","infiniti","info","ing","ink","institute","insurance","insure","int","international","intuit","investments","io","ipiranga","iq","ir","irish","is","ismaili","ist","istanbul","it","itau","itv","j","jaguar","java","jcb","je","jeep","jetzt","jewelry","jio","jll","jm","jmp","jnj","jo","jobs","joburg","jot","joy","jp","jpmorgan","jprs","juegos","juniper","k","kaufen","kddi","ke","kerryhotels","kerrylogistics","kerryproperties","kfh","kg","kh","ki","kia","kids","kim","kindle","kitchen","kiwi","km","kn","koeln","komatsu","kosher","kp","kpmg","kpn","kr","krd","kred","kuokgroup","kw","ky","kyoto","kz","l","la","lacaixa","lamborghini","lamer","lancaster","land","landrover","lanxess","lasalle","lat","latino","latrobe","law","lawyer","lb","lc","lds","lease","leclerc","lefrak","legal","lego","lexus","lgbt","li","lidl","life","lifeinsurance","lifestyle","lighting","like","lilly","limited","limo","lincoln","link","lipsy","live","living","lk","llc","llp","loan","loans","locker","locus","lol","london","lotte","lotto","love","lpl","lplfinancial","lr","ls","lt","ltd","ltda","lu","lundbeck","luxe","luxury","lv","ly","m","ma","madrid","maif","maison","makeup","man","management","mango","map","market","marketing","markets","marriott","marshalls","mattel","mba","mc","mckinsey","md","me","med","media","meet","melbourne","meme","memorial","men","menu","merckmsd","mg","mh","miami","microsoft","mil","mini","mint","mit","mitsubishi","mk","ml","mlb","mls","mm","mma","mn","mo","mobi","mobile","moda","moe","moi","mom","monash","money","monster","mormon","mortgage","moscow","moto","motorcycles","mov","movie","mp","mq","mr","ms","msd","mt","mtn","mtr","mu","museum","music","mv","mw","mx","my","mz","n","na","nab","nagoya","name","navy","nba","nc","ne","nec","net","netbank","netflix","network","neustar","new","news","next","nextdirect","nexus","nf","nfl","ng","ngo","nhk","ni","nico","nike","nikon","ninja","nissan","nissay","nl","no","nokia","norton","now","nowruz","nowtv","np","nr","nra","nrw","ntt","nu","nyc","nz","o","obi","observer","office","okinawa","olayan","olayangroup","ollo","om","omega","one","ong","onl","online","ooo","open","oracle","orange","org","organic","origins","osaka","otsuka","ott","ovh","p","pa","page","panasonic","paris","pars","partners","parts","party","pay","pccw","pe","pet","pf","pfizer","pg","ph","pharmacy","phd","philips","phone","photo","photography","photos","physio","pics","pictet","pictures","pid","pin","ping","pink","pioneer","pizza","pk","pl","place","play","playstation","plumbing","plus","pm","pn","pnc","pohl","poker","politie","porn","post","pr","pramerica","praxi","press","prime","pro","prod","productions","prof","progressive","promo","properties","property","protection","pru","prudential","ps","pt","pub","pw","pwc","py","q","qa","qpon","quebec","quest","r","racing","radio","re","read","realestate","realtor","realty","recipes","red","redstone","redumbrella","rehab","reise","reisen","reit","reliance","ren","rent","rentals","repair","report","republican","rest","restaurant","review","reviews","rexroth","rich","richardli","ricoh","ril","rio","rip","ro","rocks","rodeo","rogers","room","rs","rsvp","ru","rugby","ruhr","run","rw","rwe","ryukyu","s","sa","saarland","safe","safety","sakura","sale","salon","samsclub","samsung","sandvik","sandvikcoromant","sanofi","sap","sarl","sas","save","saxo","sb","sbi","sbs","sc","scb","schaeffler","schmidt","scholarships","school","schule","schwarz","science","scot","sd","se","search","seat","secure","security","seek","select","sener","services","seven","sew","sex","sexy","sfr","sg","sh","shangrila","sharp","shell","shia","shiksha","shoes","shop","shopping","shouji","show","si","silk","sina","singles","site","sj","sk","ski","skin","sky","skype","sl","sling","sm","smart","smile","sn","sncf","so","soccer","social","softbank","software","sohu","solar","solutions","song","sony","soy","spa","space","sport","spot","sr","srl","ss","st","stada","staples","star","statebank","statefarm","stc","stcgroup","stockholm","storage","store","stream","studio","study","style","su","sucks","supplies","supply","support","surf","surgery","suzuki","sv","swatch","swiss","sx","sy","sydney","systems","sz","t","tab","taipei","talk","taobao","target","tatamotors","tatar","tattoo","tax","taxi","tc","tci","td","tdk","team","tech","technology","tel","temasek","tennis","teva","tf","tg","th","thd","theater","theatre","tiaa","tickets","tienda","tips","tires","tirol","tj","tjmaxx","tjx","tk","tkmaxx","tl","tm","tmall","tn","to","today","tokyo","tools","top","toray","toshiba","total","tours","town","toyota","toys","tr","trade","trading","training","travel","travelers","travelersinsurance","trust","trv","tt","tube","tui","tunes","tushu","tv","tvs","tw","tz","u","ua","ubank","ubs","ug","uk","unicom","university","uno","uol","ups","us","uy","uz","v","va","vacations","vana","vanguard","vc","ve","vegas","ventures","verisign","vermögensberater","vermögensberatung","versicherung","vet","vg","vi","viajes","video","vig","viking","villas","vin","vip","virgin","visa","vision","viva","vivo","vlaanderen","vn","vodka","volvo","vote","voting","voto","voyage","vu","w","wales","walmart","walter","wang","wanggou","watch","watches","weather","weatherchannel","webcam","weber","website","wed","wedding","weibo","weir","wf","whoswho","wien","wiki","williamhill","win","windows","wine","winners","wme","wolterskluwer","woodside","work","works","world","wow","ws","wtc","wtf","x","xbox","xerox","xihuan","xin","xxx","xyz","y","yachts","yahoo","yamaxun","yandex","ye","yodobashi","yoga","yokohama","you","youtube","yt","yun","z","za","zappos","zara","zero","zip","zm","zone","zuerich","zw","IDNs","ελ","ευ","бг","бел","дети","ею","католик","ком","мкд","мон","москва","онлайн","орг","рус","рф","сайт","срб","укр","қаз","հայ","ישראל","קום","ابوظبي","ارامكو","الاردن","البحرين","الجزائر","السعودية","العليان","المغرب","امارات","ایران","بارت","بازار","بيتك","بھارت","تونس","سودان","سورية","شبكة","عراق","عرب","عمان","فلسطين","قطر","كاثوليك","كوم","مصر","مليسيا","موريتانيا","موقع","همراه","پاكستان","پاکستان","ڀارت","कॉम","नेट","भारत","भारतम्","भारोत","संगठन","বাংলা","ভারত","ভাৰত","ਭਾਰਤ","ભારત","ଭାରତ","இந்தியா","இலங்கை","சிங்கப்பூர்","భారత్","ಭಾರತ","ഭാരതം","ලංකා","คอม","ไทย","ລາວ","გე","みんな","アマゾン","クラウド","グーグル","コム","ストア","セール","ファッション","ポイント","世界","中信","中国","中國","中文网","亚马逊","企业","佛山","信息","健康","八卦","公司","公益","台湾","台灣","商城","商店","商标","嘉里","嘉里大酒店","在线","大拿","天主教","娱乐","家電","广东","微博","慈善","我爱你","手机","招聘","政务","政府","新加坡","新闻","时尚","書籍","机构","淡马锡","游戏","澳門","点看","移动","组织机构","网址","网店","网站","网络","联通","谷歌","购物","通販","集团","電訊盈科","飞利浦","食品","餐厅","香格里拉","香港","닷넷","닷컴","삼성","한국"]);
			
			function isValidTLD(tld) {
			  return validTLDs.has(tld.toLowerCase());
			}
			
			
			function isEmojiOnly(str) {
				function stripEmojis(text) {
					return text
						.replace(/\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu, "")
						.replace(/[\u200D\uFE0F]/g, "")
						.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/gi, "");
				}

				let strippedStr = stripEmojis(str);
				strippedStr = strippedStr.replace(/\s+/g, '');
				if (strippedStr.length === 0) {
					return true; // Contains only emojis and/or spaces
				}
				const textContent = strippedStr.replace(/<[^>]*>/g, '');
				return textContent.length === 0;
			}
			
			function wrapEmojis(text) {
				let flagCounter = 0;
				let flags = [];
				
				// First handle flag emoji sequences
				text = text.replace(/(\uD83C[\uDDE6-\uDDFF]){2}/g, (match) => {
					flags.push(match);
					return `###FLAG${flagCounter++}###`;
				});
				
				// Regex for detecting emoji sequences
				// This pattern includes emoji with variation selectors (FE0F) and keycap sequences
				const emojiPattern = new RegExp(
					// Keycap sequences (digit/symbol + FE0F + 20E3)
					'(?:[0-9#*]\\uFE0F?\\u20E3)|' +
					
					// Basic emoji
					'(?:[\\u2011-\\u26FF]|[\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|\\uD83C[\\uDC00-\\uDFFF]|\\uD83D[\\uDC00-\\uDFFF]|\\uD83E[\\uDD10-\\uDDFF])' +
					// Optional variation selector
					'(?:\\uFE0F)?' +
					// Optional skin tone modifier
					'(?:\\uD83C[\\uDFFB-\\uDFFF])?' +
					// Optional zero width joiner sequences (for compound emoji)
					'(?:\\u200D(?:[\\u2011-\\u26FF]|[\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|\\uD83C[\\uDC00-\\uDFFF]|\\uD83D[\\uDC00-\\uDFFF]|\\uD83E[\\uDD10-\\uDDFF])' +
					'(?:\\uFE0F)?' +
					'(?:\\uD83C[\\uDFFB-\\uDFFF])?)*',
					'g'
				);
				
				// Replace all emoji with spans
				text = text.replace(emojiPattern, "<span class='emoji'>$&</span>");
				
				// Replace flag placeholders
				flags.forEach((flag, index) => {
					text = text.replace(
						`###FLAG${index}###`,
						`<span class='emoji'>${flag}</span>`
					);
				});
				
				return text;
			}

			function processData(data, reloaded = false) {
				if (data.contents) {
					data = data.contents;

					var invisible = false;
					var makeBlurred = false;
					
					if (debug){
						console.log(data);
					}

					if (hideTwitch && data.type === "twitch") {
						// this is a twitch message, and we're hiding them.
						if (blurred){
							makeBlurred = true;
						} else {
							return;
						}
					}
					if (hideFrom.length && hideFrom.includes(data.type)) {
						if (blurred){
							makeBlurred = true;
						} else {
							return;
						}
					}
					if (onlyTwitch && data.type !== "twitch") {
						// this is not a twitch message, so we're hiding them
						if (blurred){
							makeBlurred = true;
						} else {
							return;
						}
					}
					if (onlyFrom.length && !onlyFrom.includes(data.type)) {
						if (blurred){
							makeBlurred = true;
						} else {
							return;
						}
					}
					
					if (skipDonations && (data.hasDonation || data.donation)){
						return;
					}
					
					if (data.message && !data.chatmessage){
						data.chatmessage = data.message;
					}

					if (filtercommands && data.chatmessage && data.chatmessage.startsWith("!")) {
						return;
					}
					if (startstop && data.chatmessage && data.chatname && data.admin && window.obsstudio) {
						if (data.chatmessage == "!start"){
							try {
								window.obsstudio["startStreaming"]();
							} catch(e){
								errorlog("You need to run this in OBS as a browser source with Full Permissions enabled");
							}
						} else if (data.chatmessage == "!stop"){
							try {
								window.obsstudio["stopStreaming"]();
							} catch(e){
								errorlog("You need to run this in OBS as a browser source with Full Permissions enabled");
							}
						}
					}

					if (eventsOnly) {
						if (!data.event) {
							return;
						} else if (eventsOnly !== true) {
						
							if (data.chatmessage) {
								if (eventsOnly.some(v => !data.chatmessage.includes(v))) {
									return;
								}
							} else {
								return;
							}
						}
						//console.log(data.event);
					}

					if (hideAllEvents && data.event) {
						return;
					}
					
					if (privateOnly){
						if (!data.private) {
							return;
						} 
					} else if (publicOnly){
						if (data.private){
							return;
						}
					}

					if (!("id" in data)) {
						data.id = Date.now() + parseInt(Math.random() * 1000000);
					}

					if (data.question && hidequestions) {
						return;
					} else if (!data.question && onlyquestions) {
						return;
					}
					
					if (hardFilter && hideNotDonos){
						if (!data.donation && !data.hasDonation){
							return;
						}
					}
					if (hardFilter && hideNotMembers){
						if (!data.membership && !data.member && !data.hasMembershp){
							return;
						}
					}

					try {
						if (applyCustomActions) {
							let response = applyCustomActions(data); // Any custom actions (not synced with github)
							if (response === false) {
								// cancel
								return;
							} else if (response === null) {
								// cancel <== official way of cancelling.
								return;
							} else if (response) {
								// replace with modified message
								data = response;
							} // else if 'undefined', just ignore the response.
						}
					} catch (e) {
						console.error(e);
					}

					if (filterEvents && data.event && data.chatmessage) {
						if (filterEvents.some(v => data.chatmessage.includes(v))) {
							return;
						}
					}
					
					if (filtertid){
						try {
							if (data && !filtertid.includes(data.tid)){
								return;
							}
						} catch(e){
						}
					}

					var showType = "";
					if (!data.type) {
						data.type = "none";
					} else {
						data.type = data.type.toString();
						showType = data.type;
					}
					
					if (stripDonationData){
						data.hasDonation = "";
					}

					if (data.hasDonation) {
						if (stripHTML) {
							data.hasDonation = stripHtmlFunction(data.hasDonation);
						}
						data.hasDonation = data.hasDonation.trim();
					} else {
						data.hasDonation = "";
					}
					
					var rawChatImg = false;
					if (data.chatimg) {
						rawChatImg = data.chatimg;
					}
					
					var rawName = false;

					if (data.chatname) {
						rawName = data.chatname;
						if (stripHTML) {
							data.chatname = stripHtmlFunction(data.chatname);
						}
						data.chatname = data.chatname.trim();

						if (localBlockUserList) {
							if (localBlockUserList[rawName]) {
								if (localBlockUserList[rawName].includes(data.type)) {
									return; // blocked locally
								} else if (localBlockUserList[rawName].includes("*")) {
									return; // blocked locally
								}
							}
						}
					} else {
						data.chatname = "";
					}

					if (data.chatmessage) {
						if (stripHTML) {
							data.chatmessage = stripHtmlFunction(data.chatmessage);
						} else if (data.event) {
							data.chatmessage = data.chatmessage.trim();
							data.chatmessage = "<i>" + data.chatmessage + "</i>";
						}
					} else {
						data.chatmessage = "";
					}

					if (writer && isStreamSetup) {
						try {
							const date = new Date().toLocaleString("en-US", { 
								hour: "numeric", 
								minute: "numeric", 
								second: "numeric", 
								hour12: true 
							});
							
							const extra = saveimg ? `\t${data.chatimg || ""}` : "";
							
							let text;
							if ("sentiment" in data) {
								text = `${data.chatname || ""}\t${data.chatmessage || ""}\t${showType || ""}\t${date}${extra}\t${data.sentiment || ""}\n`;
							} else if ("karma" in data) {
								text = `${data.chatname || ""}\t${data.chatmessage || ""}\t${showType || ""}\t${date}${extra}\t${data.karma || ""}\n`;
							} else {
								text = `${data.chatname || ""}\t${data.chatmessage || ""}\t${showType || ""}\t${date}${extra}\n`;
							}
							
							writer.write(encode(text));
						} catch (err) {
							console.error("Write failed:", err);
							resetStream();
							setupSaveToDisk(); // Attempt to reinitialize
						}
					}

					if (singlewriter) {
						data.timestamp = new Date().getTime();
						overwriteFile(JSON.stringify(data));
					}

					if ("sentiment" in data) {
						// deprecating sentiment
						if (data.sentiment < 0.1) {
							// 1.0 is good; 0.0 is bad, so 0.1 is likely bad.
							return;
						}
					} else if ("karma" in data) {
						// replacing it with karma
						if (data.karma < badkarma) {
							// 1.0 is good; 0.0 is bad, so 0.1 is likely bad.
							return;
						}
					}

					var addImage = "";
					if (data.contentimg) {
						if (data.contentimg.includes('.mp4') || data.contentimg.includes('.webm')){
							addImage = '<div class="hl-imgContent"><video autoplay="true" muted="true" src="' + data.contentimg + '" onerror="this.style.display = \'none\';" /></video></div>';
						} else {
							addImage = '<div class="hl-imgContent"><img src="' + data.contentimg + '" onerror="this.style.display = \'none\';" /></div>';
						}
					} else if (attachmentsonly) {
						data.chatmessage = "";
						data.hasDonation = "";
						return;
					} else {
						data.contentimg = "";
					}

					var donationHTML = "";
					if (data.hasDonation) {
						donationHTML = "<span class='donationAmount hl-donation'>" + data.hasDonation + "</span>";
					} else {
						data.hasDonation = "";
					}

					if (data.chatmessage && stripEmojis) {
						data.chatmessage = data.chatmessage.replace(/\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu, "").replace(/[\u200D\uFE0F]/g, ""); // Remove zero-width joiner and variation selector
						data.chatmessage = data.chatmessage.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/gi, ""); // fail safe?
					}

					if (data.chatmessage) {
						data.chatmessage = data.chatmessage
							.replace(/[\r\n]+/g, "")
							.replace(/\s+/g, " ")
							.trim();
					}
					
					var chatmessage = data.chatmessage || "";

					if (chatmessage) {
						if (stylizeEmoji && !reloaded) {
							//chatmessage = chatmessage.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/gi, "<span class='emoji'>$1</span>");
							chatmessage = wrapEmojis(chatmessage);
						}
						if (!stripHTML) {
							// we want to reuse this, but only if HTML is allowed
							data.chatmessage = chatmessage;
							data.textonly = false; // we know that it contains html now
						}
					}

					if (!chatmessage && !data.contentimg && !data.hasDonation) {
						return;
					} else if (hideshortmessages && !data.contentimg && !data.hasDonation) {
						if (chatmessage.replace(/(<([^>]+)>)/ig, "").length < hideshortmessages){
							return;
						}
					}

					if (hideNumbers && data.chatmessage && !data.contentimg && !data.hasDonation && data.chatmessage === parseFloat(data.chatmessage)) {
						return;
					}
					
					if (filterEmojiOnly && data.chatmessage && !data.hasDonation && !(data.hasMembership || data.membership) && !data.contentimg) {
						if (isEmojiOnly(data.chatmessage)) {
							return; // Skip this message as it contains only emojis or empty HTML tags
						}
					}
					
					if (data.textonly) {
						// should be legacy compatible, since textonly is new.
						chatmessage = escapeHtml(chatmessage); // lets escape any < > ' " or other special characeters, since it would be dangerous as HTML.
					}

					if (largeavatar && data.chatname && data.type && avatars) {
						data.chatimg = upscaleImages(data); // increase the resolution of avatars if possible
					} else if (data.type && (data.type == "twitch") && avatars && !data.chatimg && data.chatname) {
						// this is a temp fix until everyone updates.
						data.chatimg = "https://api.socialstream.ninja/twitch/?username=" + encodeURIComponent(data.chatname); // this is CORS restricted to socialstream, but this is to ensure reliability for all
					}

					var chatImg = data.chatimg;
					if (!chatImg && avatars) {
						if (fallbackImageAnnouncement && !data.chatname && data.event){
							chatImg = '<img id="img_' + data.id + '" src="./icons/announcement.png" class="icon ' + (darkmode ? "invert" : "") + ' hl-profile-pic" onerror="errorImage(this);" />';
						} else if (fallbackImage) {
							chatImg = '<img id="img_' + data.id + '" src="./sources/images/unknown.png" class="icon ' + (darkmode ? "invert" : "") + ' hl-profile-pic" onerror="errorImage(this);" />';
						} else {
							chatImg = "";
						}
					} else if (avatars) {
						if (data.type && data.type == "twitch" && avatars) {
							chatImg = '<img id="img_' + data.id + '" src="./sources/images/unknown.png" class="fade-in-image ' + (darkmode ? "invert" : "") + ' icon hl-profile-pic" onerror="errorImage(this);" />';
						} else {
							chatImg = '<img id="img_' + data.id + '" src="' + chatImg + '" class="icon hl-profile-pic" onerror="errorImage(this);" />';
						}
					} else {
						chatImg = "";
					}

					if (largeavatar && showType && showsource) {
						showType = '<img src="./sources/images/' + showType + '.png" class="icon hl-source-type avatar-badge" data-icon-name="' + showType + '" onerror="this.style.display=\'none\'" />';
					} else if (showType && showsource) {
						showType = '<img src="./sources/images/' + showType + '.png" class="icon hl-source-type" data-icon-name="' + showType + '" onerror="this.style.display=\'none\'" />';
					} else {
						showType = "";
					}

					if (data.sourceImg && customSource) {
						if (largeavatar) {
							showType += '<img src="' + data.sourceImg + '" class="icon hl-source-type  avatar-badge" onerror="this.style.display=\'none\'" />';
						} else {
							showType += '<img src="' + data.sourceImg + '" class="icon hl-source-type" onerror="this.style.display=\'none\'" />';
						}
					}

					var timeArrived = "";
					if (datestamp) {
						var date = data.timestamp ? new Date(data.timestamp) : new Date();
						var hours = date.getHours();
						var minutes = date.getMinutes();
						minutes = minutes < 10 ? "0" + minutes : minutes;

						if (!clock24hr) {
							var ampm = hours >= 12 ? "PM" : "AM";
							hours = hours % 12;
							hours = hours ? hours : 12; // the hour '0' should be '12'
							timeArrived = `${hours}:${minutes} ${ampm}`;

							if (compactmode) {
								timeArrived = timeArrived.split(" ")[0]; // Removes AM/PM part
							}
						} else {
							hours = hours < 10 ? "0" + hours : hours;
							timeArrived = `${hours}:${minutes}`;
						}

						timeArrived = "<div class='time-arrived'>" + timeArrived + "</div>";
					}

					var bot = false;
					if (data.bot) {
						bot = true;
					}
					
					var mod = false;
					if (data.mod) {
						mod = true;
					}
					
					var host = false;
					if (data.host) {
						host = true;
					}
					
					var vip = false;
					if (data.vip) {
						vip = true;
					}

					var nameColor = "";
					if (data.nameColor && colorized) {
						nameColor = "style='color:" + data.nameColor + ";'";
						if (largeavatar){
							nameColor = "style='color:" + data.nameColor + ";display: flex;'";
						}
					} else if (largeavatar){
						nameColor = "style='display: flex;'";
					}

					var chatbadges = "";
					
					if (giveVIPBadge && vip){
						if (!data.chatbadges){
							data.chatbadges = [];
						}
						data.chatbadges.push("./icons/vip.png");
					}

					if (data.chatbadges && limitbadges !== false) {
						try {
							data.chatbadges = data.chatbadges.slice(0, limitbadges);
						} catch (e) {}
					}

					if (data.chatbadges && showbadges) {
						data.chatbadges.forEach(badge => {
							if (typeof badge == "object") {
								if (badge.type && badge.type == "img" && badge.src) {
									if (badge.bgcolor) {
										chatbadges += "<img class='hl-badge' style='background-color:" + badge.bgcolor + ";' src='" + badge.src + "' />";
									} else {
										chatbadges += "<img class='hl-badge' src='" + badge.src + "' />";
									}
								} else if (badge.type && badge.type == "svg" && badge.html) {
									chatbadges += "<span class='hl-badge svg'>" + badge.html + "</span>";
								} else if (badge.type && badge.type == "text" && badge.text) {
									chatbadges += "<span class='hl-badge textbadge'>" + badge.text + "</span>";
								}
							} else {
								chatbadges += "<img class='hl-badge' src='" + badge + "' />";
							}
						});
					}

					var specialMessage = false;

					if (data.chatname) {
						if (data.chatname.toLowerCase() == "vdoninja") {
							// because why not. :)
							data.chatname = "VDO.Ninja";
						} else if (custombot) {
							var textname = data.chatname;
							if (!data.textonly && custombot) {
								textname = unescapeHtml(data.chatname);
							}
							if (custombot.includes(textname.toLowerCase().replace(/[^a-z0-9_]+/gi, ""))) {
								// because why not. :)
								bot = true;
							}
						}

						if (hideNames) {
							data.chatname = "";
						} else if (firstNamesOnly) {
							var nn = data.chatname.split(" ");
							if (nn.length > 1) {
								if (nn[0].length <= 2) {
									if (nn[1].length < 6) {
										data.chatname = nn[0] + " " + nn[1];
									} else {
										data.chatname = nn[0];
									}
								} else {
									data.chatname = nn[0];
								}
							}
						}
					}

					if (bot && doNotShowBot) {
						return;
					}
					
					if (host && doNotShowHostNames) {
						return;
					}

					if (bot && doNotShowBotNames) {
						specialMessage = true;
						data.chatname = "";
					}
					
					if (host && doNotShowHostNames) {
						specialMessage = true;
						data.chatname = "";
					}

					if (bot) {
						data.bot = true;
					}

					var chatname = data.chatname;
					
					if (simpleSequence && (chatname == lastChatName) && (data.type == lastType)){
						chatname = "";
						//timeArrived = "";
						chatImg = "";
						showType = "";
						chatbadges = "";
						//if (datestamp) {
						//	timeArrived = "<div class='time-arrived'></div>";
						//}
						
					} else if (simpleSequence){
						lastChatName = chatname;
						lastType = data.type;
					}

					var afterName = ":";
					if (twoLines) {
						afterName = "";
					}
					
					if (trimName){
						chatname = truncateText(chatname, trimName);
					}

					if (largeavatar) {
						chatname = '<div dir="' + textDirection + '" ' + nameColor + ' class="hl-name' + splitMode + '">' + (chatname || "") + '<span class="hl-badges">' + chatbadges + "</span></div>";
					} else if (chatname) {
						if (compactmode) {
							if (specialMessage) {
								chatname = '<div dir="' + textDirection + '" class="hl-name' + splitMode + '"></div>';
							} else if (chatbadges) {
								chatname = '<span class="hl-badges">' + chatbadges + "</span><div " + nameColor + ' dir="' + textDirection + '" class="hl-name' + splitMode + '">' + chatname + afterName + "</div>";
							} else {
								chatname = '<div dir="' + textDirection + '" ' + nameColor + ' class="hl-name' + splitMode + '">' + chatname + afterName + "</div>";
							}
						} else {
							chatname = '<div dir="' + textDirection + '" ' + nameColor + ' class="hl-name' + splitMode + '">' + chatbadges + chatname + "</div>";
						}
					} else if (specialMessage && compactmode) {
						chatname = '<div dir="' + textDirection + '" class="hl-name' + splitMode + '"></div>';
					} else {
						chatname = '<div dir="' + textDirection + '" class="hl-name' + splitMode + '">' + chatbadges + "</div>";
					}

					var larger = "";
					if (stylizeEmoji) {
						larger = " larger-emojis";
					}

					var expand = "";

					if (horizontal && !compactmode) {
						expand = " expand";
					}

					if (fixed) {
						expand += " fixed";
						if (alignbottom) {
							expand += " bottom";
						}
					}

					var mid = "";
					if (data.id) {
						mid = "data-mid='" + data.id + "'";
					} else {
						console.error("Messages should have an ID, else queuing/pinning won't work");
					}
					
					if (trimChat){
						chatmessage = truncateHTMLContent(chatmessage, trimChat);
					}
					
					if (largeavatar) {
						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + expand + '" data-source-type="' + data.type + '">' + '<div class="hl-leftside">' + chatImg + showType + "</div>" + '<div class="hl-rightside' + larger + '">' + '<div class="hl-righttopline">' + chatname + timeArrived  +  "<div class='queueid'></div>" + "</div>" + '<div class="hl-message">' + '<span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</span>" + addImage + donationHTML + "</div>" + "</div></div>");
					} else if (twoLines) {
						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + '<div class="hl-firstline">' + "" + "<div class='queueid'></div>" + showType + chatImg + chatname + '</div><div class="hl-message"><span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">'+ timeArrived  + chatmessage + "</span>" + addImage + donationHTML + "</div></div>");
					} else if (splitMode) {
						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + "<div class='queueid' title='Order in Queue, with 1 being next up.'></div>" + "<div class='leftside " + larger + "'>"  + showType  + chatImg + chatname + "</div>" + '<div class="hl-message hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</div>" + addImage + donationHTML + "</div>");
					} else if (compactmode) {
						if (bubble){
							var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + "<div class='queueid'></div>" + '<div class="hl-message">' + showType + chatImg + timeArrived + chatname + '<span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</span>" + addImage + donationHTML + "</div></div>");
						} else {
							var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + "<div class='queueid'></div>" + '<div class="hl-message">' + showType + chatImg + timeArrived + chatname + '<span class="hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</span>" + "</div>" + addImage + donationHTML + "</div>");
						}
					} else {
						var node = createElementFromHTML('<div id="msg_' + data.id + '" ' + mid + ' data-menu="context-menu" class="highlight-chat' + larger + expand + '" data-source-type="' + data.type + '">' + "<div class='queueid'></div>" + showType + chatImg + timeArrived + chatname + '<div class="hl-message hl-content" dir="' + textDirection + '" id="content_' + data.id + '">' + chatmessage + "</div>" + addImage + donationHTML + "</div>");
					}

					if (filtering) {
						filterMessage(node);
					}
					
					if (makeBlurred){
						node.classList.add("blurred");
					}

					if (bot && !horizontal) {
						node.classList.add("bot");
					}
					
					if (host && !horizontal) {
						node.classList.add("host");
					}
					
					if (vip) {
						node.classList.add("vip");
					}

					if ("karma" in data) {
						node.dataset.karma = data.karma;
					}

					if (data.highlightColor && trivialevents) {
						node.classList.add("special-highlight");
						if (!bubble) {
							node.style.backgroundColor = data.highlightColor;
						}
					}
					
					if (data.hasDonation) {
						if (highlightDonos && !bubble) {
							node.classList.add("dono-highlight");
						}
						node.classList.add("donation");
						
						if (tiers){
							let color = getColorForAmount(data);
							if (color){
								if (highlightDonos){
									node.style.backgroundColor = color;
								} else {
									node.style.setProperty("--donation-amount", color);
								}
							}
						}
					} else {
						node.classList.add("noDono");
					}

					var memebershipHTML = "";

					if (data.hasMembership) {
						data.membership = data.hasMembership.toString();
						memebershipHTML = data.membership;
						node.dataset.member = "true";
					} else if (data.membership) {
						data.membership = data.membership.toString();
						memebershipHTML = '<div class="donation membership">' + data.membership + "</div>";
						node.dataset.member = "true";
					} else {
						data.membership = "";
					}

					if (data.membership && !bubble && highlightMembers) {
						node.classList.add("member");
					}

					if (!bubble && highlightSpecial && data.question) {
						node.classList.add("special");
					}

					if (compactmode && darkmode) {
						node.classList.add("compactmode");
					}

					if (disolveEvents && data.event) {
						node.classList.add("dissolve");
					}

					if (random) {
						node.classList.add("randommode");
						var r1 = Math.random();
						var r2 = Math.random();
						if (r1 > 0.5) {
							r1 -= 0.5;
							node.style.top = (r1 * window.innerHeight) / scale;
						} else {
							node.style.bottom = (r1 * window.innerHeight) / scale;
						}

						if (r2 > 0.5) {
							r2 -= 0.5;
							node.style.left = (r2 * window.innerWidth) / scale;
						} else {
							node.style.right = (r2 * window.innerWidth) / scale;
						}

						if (!customNodeLimit) {
							customNodeLimit = 20;
						}
					}
					if (rawName) {
						node.dataset.chatname = rawName; // before its been parsed; this allows for clean deletion.
					}
					if (rawChatImg){
						node.dataset.chatimg = rawChatImg;
					}
					// this part is used to filter out emojis, but also calculate the character-length of a message, to know how long to show it for
					// emojis and images are counted with char-length zero-value

					var textContentLength =
						node
							.querySelector("#content_" + data.id)
							.innerText.trim()
							.replace(/([\u2580-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/gi, "").length || 0;
					node.dataset.contentLength = textContentLength;
					if (!textContentLength) {
						node.classList.add("noText");
					}
					// textContentLength += node.querySelectorAll("#content_"+data.id+" img").length || 0; // must come after noText set, if we want to include images as a character
					node.contentLength = textContentLength;

					transitionType.forEach(classtype => {
						node.classList.add(classtype);
					});
					
					if (beep) { 
						if (!(nobeepbot && bot) && !(nobeephost && host) && !(nobeepmod && mod) && !(nobeepevent && data.event)){
							playtone();
						}
					}
					
					
					if (waitToReveal){
						node.classList.add("hidden");
						setTimeout(function(node){
							if (node){
								node.classList.remove("hidden");
							}
						},waitToReveal,node)
					}

					mainOutputWindow.appendChild(node);

					let hlMessage = node.querySelector(".hl-message");

					var svgs = node.querySelectorAll("svg");
					svgs.forEach(svg => {
						svg.setAttribute("width", "100%");
						svg.setAttribute("height", "100%");
						if (!svg.getAttribute("fill") && !svg.innerHTML.includes(" fill=")) {
							svg.setAttribute("fill", "currentColor");
						}
						svg.dataset.hash = Math.abs(hashCode(svg.innerHTML));
					});

					if (hideNotDonos && node.classList.contains("noDono")) {
						if (hideNotMembers && node.dataset.member) {
							node.classList.remove("hidden");
						} else {
							node.classList.add("hidden");
						}
					} else if (hideNotMembers && !node.dataset.member) {
						if (hideNotDonos && !node.classList.contains("noDono")) {
							node.classList.remove("hidden");
						} else {
							node.classList.add("hidden");
						}
					} else if (hideNotQueued && !node.classList.contains("queued")) {
						node.classList.add("hidden");
					} else if (hideNotPinned && !node.classList.contains("pinned")) {
						node.classList.add("hidden");
					} else if (hideEmojiOnly && node.classList.contains("noText")) {
						node.classList.add("hidden");
					} else {
						var style = window.getComputedStyle(node);
						if (style.visibility !== "hidden" && style.display !== "none") {
							if (odd) {
								if (bubble && largeavatar) {
									node.querySelector(".hl-rightside").classList.add("odd");
								} else if (bubble) {
									hlMessage.classList.add("odd");
								} else {
									node.classList.add("odd");
								}
							}
							odd = !odd;
						}
					}

					if (bubble && largeavatar) {
						node.querySelector(".hl-rightside").classList.add("bubble");

						if (highlightDonos && data.hasDonation) {
							node.querySelector(".hl-rightside").classList.add("dono-highlight");
						}

						if (highlightMembers && data.membership) {
							node.querySelector(".hl-rightside").classList.add("member");
						}

						if (highlightSpecial && data.question) {
							node.querySelector(".hl-rightside").classList.add("special");
						}
					} else if (bubble && (node.contentLength || node.querySelectorAll(".hl-message svg, .hl-message img").length || (hlMessage.innerText && hlMessage.innerText.length))) {
						hlMessage.classList.add("bubble");

						if (highlightDonos && data.hasDonation) {
							hlMessage.classList.add("dono-highlight");
						}

						if (highlightMembers && data.membership) {
							hlMessage.classList.add("member");
						}

						if (highlightSpecial && data.question) {
							hlMessage.classList.add("special");
						}
					}


					
					if (chatmessage && hlMessage && (stripLinks || activeLinks || shortlink)) {
						processURLs(hlMessage, { makeClickable: activeLinks, stripLinks: stripLinks, shortenURLs: shortlink });
					} 
					
					if (data.type && data.type == "twitch" && avatars && data.chatimg) { 
						var twitchImage = new Image();
						twitchImage.onload = function () {
							try {
								getById("img_" + data.id).src = data.chatimg;
								getById("img_" + data.id).classList.remove("invert");
								getById("img_" + data.id).classList.remove("fade-in-image");
								node.querySelector("#img_" + data.id).src = data.chatimg;
								node.querySelector("#img_" + data.id).classList.remove("invert");
								node.querySelector("#img_" + data.id).classList.remove("fade-in-image");
							} catch (e) {}
						}.bind(data, node);
						twitchImage.src = data.chatimg;
					}

					if (timeoutDelay) {
						setTimeout(
							function (node) {
								transitionOutNode(node);
							},
							timeoutDelay,
							node
						);
					}
					
					if (splitMode && compactmode){
						// this mode isn't compatible
					} else if (horizontal || twoLines || largeavatar) {
						// do not shrink the names to fit
					} else if (compactmode) {
						var nameEle = node.querySelector(".hl-name"); // we're going to resize long names to be smaller if they are longer than the message's height
						if (nameEle) {
							if (hlMessage && hlMessage.innerText) {
								var ccc = 0;
								while (hlMessage.clientHeight < nameEle.clientHeight || nameEle.clientHeight < nameEle.scrollHeight || nameEle.clientWidth < nameEle.scrollWidth) {
									var fontsize = parseInt(window.getComputedStyle(nameEle).fontSize);
									nameEle.style.fontSize = fontsize - 1 + "px";
									ccc += 1;
									if (ccc > 8) {
										break;
									}
								}
							} else {
								var ccc = 0;
								while (hlMessage.clientHeight < nameEle.clientHeight || nameEle.clientWidth < nameEle.scrollWidth || nameEle.clientHeight < nameEle.scrollHeight) {
									var fontsize = parseInt(window.getComputedStyle(nameEle).fontSize);
									nameEle.style.fontSize = fontsize - 1 + "px";
									ccc += 1;
									if (ccc > 8) {
										break;
									}
								}
							}
						}
					} else {
						var nameEle = node.querySelector(".hl-name"); // we're going to resize long un-breaking names to be smaller if they don't fit
						if (nameEle) {
							var ccc = 0;
							while (nameEle.clientWidth < nameEle.scrollWidth || nameEle.clientHeight < nameEle.scrollHeight) {
								var fontsize = parseInt(window.getComputedStyle(nameEle).fontSize);
								nameEle.style.fontSize = fontsize - 1 + "px";
								ccc += 1;
								if (ccc > 8) {
									break;
								}
							}
						}
					}

					node.rawContents = data;

					if (autoyoutubememberchat && (data.type == "youtube") && data.membership){
						if (autoTimeoutEnabled) {
							autoShowQueue.push(node);
							checkAutoShow();
						} else {
							selectedMessage(false, node);
						}
					} else if (autoshow && !bot) {
						if (doNotAutoshowFiltered && node.classList.contains("hide")) {
							// pass auto show, since filtered out
						} else if (!(autoshowdonos || autoshowmembers) || (autoshowdonos && data.hasDonation) || (autoshowmembers && data.membership)) {
							// dono or not to dono.
							if (autoTimeoutEnabled) {
								autoShowQueue.push(node);
								checkAutoShow();
							} else {
								selectedMessage(false, node);
							}
						}
					} else if (data.admin && autofeaturepriv){
						if (doNotAutoshowFiltered && node.classList.contains("hide")) {
						//
						} else {
							if (autoTimeoutEnabled) {
								autoShowQueue.push(node);
								checkAutoShow();
							} else {
								selectedMessage(false, node);
							}
						}
					} else if (data.vip && autofeaturevip){
						if (doNotAutoshowFiltered && node.classList.contains("hide")) {
						//
						} else {
							if (autoTimeoutEnabled) {
								autoShowQueue.push(node);
								checkAutoShow();
							} else {
								selectedMessage(false, node);
							}
						}
					}

					node.onmousedown = selectedMessage;
					node.title = "Click to feature message instantly. CTRL + Click to add to the queue. Alt + Click to Pin.";

					var imageElements = node.getElementsByTagName("img");
					for (i = 0; i < imageElements.length; i++) {
						if (imageElements[i].parentNode && imageElements[i].parentNode.classList.contains("zero-width-parent")) {
							imageElements[i].className = "zero-width-emote";
						}
						if (imageElements[i].onerror) {
							continue;
						}
						if (!imageElements[i].title && imageElements[i].alt) {
							imageElements[i].title = imageElements[i].alt;
						}
						if (darkmode && node.rawContents.type == "twitch" && imageElements[i].src.includes("/light/")) {
							imageElements[i].srcBackup = imageElements[i].src;
							imageElements[i].src = imageElements[i].src.replaceAll("/light/", "/dark/");
						}
						
						imageElements[i].removeAttribute("width");
						imageElements[i].removeAttribute("height");

						imageElements[i].onerror = function () {
							if (this.srcBackup) {
								this.src = this.srcBackup;
								this.srcBackup = null;
								delete this.srcBackup;
							} else if (this.alt.length !== 2) {
								this.style.display = "none";
							} else {
								this.outerHTML = this.alt;
							}
						};
					}

					cleanUpOldNodes();

					applyBotActions(data); // Official actions

					if (data.queueme) {
						selectedQueue.push(node);
						node.children[0].dataset.qid = selectedQueue.length;
						node.classList.add("queued");
						updateQueueButton();
					} else if (selfQueue && data.chatmessage && (selfQueue.some(item => data.chatmessage.split(" ").includes(item)))) {
						selectedQueue.push(node);
						node.children[0].dataset.qid = selectedQueue.length;
						node.classList.add("queued");
						updateQueueButton();
					}
					
					if (TTS.ttscommand && data.chatmessage && data.chatmessage.includes(TTS.ttscommand+" ") && (!TTS.ttscommandmembersonly || (TTS.ttscommandmembersonly && data.membership))){
						if (!node.classList.contains("hide")) {
							TTS.speechMeta(data);
						}
					} else if (TTS.speech) {
						if (!node.classList.contains("hide")) {
							TTS.speechMeta(data);
						}
					} 
					return node;
				}
				return false;
			}

			function applyBotActions(data) {
				// this can be customized to create bot-like auto-responses/actions.
				if (triggerState && data.chatmessage.includes("!highlight")) {
					getById("msg_" + data.id).classList.add("highlight"); // sample method of highlighting
				}

				if (passTTS && data.chatmessage.includes("!pass")) {
					if (window.speechSynthesis.pending || window.speechSynthesis.speaking) {
						window.speechSynthesis.cancel();
					}
				}
				
				if (urlParams.has("cycle")){
					if (data.chatmessage === "!cycle"){
						if (Date.now() - messageTimeout > 10000){ // Lets someone change the scene once every 10 seconds
							messageTimeout = Date.now();
							cycleScenes();
						}
					}
				}
			}

			function syncDockAll(UUID) {
				if (blockMessageSelecting || blockMessageSelecting2) {
					return;
				}

				var pins = [];
				document.querySelectorAll(".pinned[data-mid]").forEach(ele => {
					pins.push(ele.rawContents);
				});
				syncDataAny({ pin: pins }, UUID);
				syncQueueP2P(UUID);
			}

			function syncQueueP2P(UUID = false, newele = false) {
				if (blockMessageSelecting || blockMessageSelecting2) {
					return;
				}

				var data = [];
				if (UUID) {
					if (selectedQueue.length) {
						selectedQueue.forEach(ele => {
							data.push(ele.rawContents);
						});
						syncDataAny({ queueInit: data }, UUID);
					}
				} else {
					selectedQueue.forEach(ele => {
						if (newele && newele.rawContents.id === ele.rawContents.id) {
							data.push(ele.rawContents);
						} else {
							data.push(ele.rawContents.id);
						}
					});
					syncDataAny({ queue: data });
				}
			}

			function send2Extension(data, uid = null) {
				if (blockMessageSelecting || blockMessageSelecting3) {
					return;
				}

				if (socketserverExtension && server3) {
					try {
						socketserverExtension.send(JSON.stringify(data));
						return;
					} catch (e) {
						// if failed, try p2p
						console.error(e);
					}
				}

				iframes.forEach(iframe => {
					if (!uid) {
						var keys = Object.keys(iframe.connectedPeers);
						for (var i = 0; i < keys.length; i++) {
							try {
								var UUID = keys[i];
								var label = iframe.connectedPeers[UUID];
								if (label === "SocialStream") {
									iframe.contentWindow.postMessage({ sendData: { overlayNinja: data }, type: "rpcs", UUID: UUID }, "*");
								}
							} catch (e) {}
						}
					} else {
						var label = iframe.connectedPeers[uid];
						if (label === "SocialStream") {
							iframe.contentWindow.postMessage({ sendData: { overlayNinja: data }, type: "rpcs", UUID: uid }, "*");
						}
					}
				});
			}
			
			function syncDataAny(data, UUID = false, force = false) {
				if (socketserver) {
					socketserver.send(JSON.stringify({...data, out:1}));
				} else {
					syncDataP2P(data, UUID, force)
				}
			}

			function syncDataP2P(data, UUID = false, force = false) {
				if (blockMessageSelecting || blockMessageSelecting2) {
					return;
				}
				iframes.forEach(iframe => {
					if (syncDocks || force) {
						if (UUID) {
							iframe.contentWindow.postMessage({ sendData: { overlayNinja: data }, type: "pcs", UUID: UUID }, "*");
						} else {
							var keys = Object.keys(iframe.connectedPeers);
							for (var i = 0; i < keys.length; i++) {
								try {
									var UUID = keys[i];
									var label = iframe.connectedPeers[keys[i]];
									if (label === "dock") {
										iframe.contentWindow.postMessage({ sendData: { overlayNinja: data }, type: "pcs", UUID: UUID }, "*");
									}
								} catch (e) {}
							}
						}
					}
				});
			}

			function sendDataP2P(data, force=false) {
				if (blockMessageSelecting || blockMessageSelecting2 || blockMessageSelecting3) {
					return;
				}

				if (singlefeaturedwriter) {
					data.timestamp = new Date().getTime();
					if (data) {
						overwriteFile(JSON.stringify(data));
					} else {
						overwriteFile(false);
					}
				}

				if (!data) {
					document.querySelectorAll("." + lastMessageClass).forEach(ele => {
						// last message sent was to clear the overlay
						ele.classList.remove(lastMessageClass); // no overlay is now active.
					});
				}
				try {
					if (socketserver) {
						// send a copy to the remote API
						socketserver.send(JSON.stringify(data));
					}
					iframes.forEach(iframe => {
						var msg = {};
						msg.overlayNinja = {};
						msg.overlayNinja = data;
						if ((syncDocks || force)) {
							var keys = Object.keys(iframe.connectedPeers);
							for (var i = 0; i < keys.length; i++) {
								var UUID = keys[i];
								var label = iframe.connectedPeers[keys[i]];
								if (label === "dock") {
									if (data && data.id) {
										iframe.contentWindow.postMessage({ sendData: { overlayNinja: { mid: data.id } }, type: "pcs", UUID: UUID }, "*");
									} else {
										iframe.contentWindow.postMessage({ sendData: { overlayNinja: { mid: false } }, type: "pcs", UUID: UUID }, "*");
									}
								} else if (label === "overlay") {
									iframe.contentWindow.postMessage({ sendData: msg, type: "pcs", UUID: UUID }, "*"); // send only to viewers of this stream; not back to the chrome extension..
								} else if (label === false) {
									iframe.contentWindow.postMessage({ sendData: msg, type: "pcs", UUID: UUID }, "*"); // send only to viewers of this stream; not back to the chrome extension..
								}
							}
						} else {
							var keys = Object.keys(iframe.connectedPeers);
							for (var i = 0; i < keys.length; i++) {
								var UUID = keys[i];
								var label = iframe.connectedPeers[keys[i]];
								if (label !== "dock") {
									iframe.contentWindow.postMessage({ sendData: msg, type: "pcs", UUID: UUID }, "*"); // send only to viewers of this stream; not back to the chrome extension.. legacy?
								}
							}
						}
					});
				} catch (e) {
					console.error(e);
				}
			}

			function respondP2P(data = null, tid = false) {
				if (blockMessageSelecting) {
					return;
				}

				if (data === null) {
					data = prompt("Enter something to say to all of chat");
				}
				if (!data) {
					return;
				}
				data = data.trim();
				if (!data) {
					return;
				}
				if (tid){
					if (typeof tid == "object") {
						if (tid.includes("TTS")) {
							tid = tid.filter(item => item !== "TTS");
							if (data){
								TTS.speak(data, true);
							}
							if (!tid.length){
								return;
							}
						}
					} else if (tid === "TTS") {
						if (data){
							TTS.speak(data, true);
						}
						return;
					}
				}
				
				var msg = {};
				msg.overlayNinja = {};
				msg.overlayNinja.tid = tid; // specific or array
				msg.overlayNinja.response = data;

				send2Extension(msg.overlayNinja);
			}
			
			function truncateText(text, maxLength) {
				if (text.length <= maxLength) {
					return text;
				}
				return text.slice(0, maxLength - 1) + '...';
			}
			
			function truncateHTMLContent(html, maxLength) {
				const tempDiv = document.createElement('div');
				tempDiv.innerHTML = html;

				function traverseAndTruncate(node, remainingChars) {
					if (remainingChars <= 0) return 0;

					if (node.nodeType === Node.TEXT_NODE) {
						if (node.textContent.length > remainingChars) {
							node.textContent = node.textContent.slice(0, remainingChars) + '...';
							return 0;
						}
						return remainingChars - node.textContent.length;
					}

					if (node.nodeType === Node.ELEMENT_NODE) {
						let currentRemaining = remainingChars;
						for (let i = 0; i < node.childNodes.length; i++) {
							currentRemaining = traverseAndTruncate(node.childNodes[i], currentRemaining);
							if (currentRemaining <= 0) {
								// Remove any remaining siblings
								while (node.childNodes.length > i + 1) {
									node.removeChild(node.lastChild);
								}
								break;
							}
						}
						return currentRemaining;
					}

					return remainingChars;
				}

				traverseAndTruncate(tempDiv, maxLength);
				return tempDiv.innerHTML;
			}
			var isStreamSetup = false;
			
			function setupSaveToDisk() {
				if (isStreamSetup) return;
				
				const script = document.createElement("script");
				script.onload = initializeStream;
				script.onerror = () => console.error("Failed to load StreamSaver");
				script.src = "./thirdparty/StreamSaver.js";
				document.head.appendChild(script);
			}
			
			
			function initializeStream() {
				try {
					if (!fileStream) {
						const filename = `chat_${Date.now()}.tsv`;
						fileStream = streamSaver.createWriteStream(filename);
						writer = fileStream.getWriter();
					}

					if (window.isSecureContext) {
						window.addEventListener("beforeunload", closeWriter);
						window.addEventListener("pagehide", closeWriter);
					}
					
					isStreamSetup = true;
				} catch (err) {
					console.error("Stream initialization failed:", err);
					resetStream();
				}
			}
			
			async function closeWriter() {
				try {
					if (writer) {
						await writer.close();
						resetStream();
					}
				} catch (err) {
					console.error("Error closing writer:", err);
				}
			}
			
			function resetStream() {
				writer = null;
				fileStream = null;
				isStreamSetup = false;
			}

			async function overwriteFile(data = false) {
				if (data == "setup") {
					if (!window.showSaveFilePicker) {
						console.warn("Open `brave://flags/#file-system-access-api` and enable to use the File API");
					}
					newFileHandle = await window.showSaveFilePicker();
				} else if (newFileHandle && data) {
					try {
						const writableStream = await newFileHandle.createWritable();
						
						if (typeof data == "object") {
							data.chatimg = upscaleImages(data);
							await writableStream.write(JSON.stringify(data));
						} else if (typeof data == "string") {
							await writableStream.write(data);
						} else {
							await writableStream.write("");
						}
						await writableStream.close();
					} catch (e) {
						console.error(e);
					}
				} else if (!data) {
					const writableStream = await newFileHandle.createWritable();
					await writableStream.close();
				}
			}

			function getPosition(event) {
				var posx = 0;
				var posy = 0;

				if (event.pageX || event.pageY) {
					posx = event.pageX;
					posy = event.pageY;
				} else if (event.clientX || event.clientY) {
					posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
					posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
				}

				return { x: posx, y: posy };
			}

			if (!blockMessageSelecting || blockMessageSelecting2) {
				(function rightclickmenuthing() {
					// right click menu
					"use strict";

					var taskItemInContext;
					var clickCoordsX;
					var clickCoordsY;
					var menu = getById("context-menu");
					var menuState = 0;
					var lastMenu = false;
					var menuWidth;
					var menuHeight;
					var windowWidth;
					var windowHeight;

					function clickInsideElement(e, value = "menu") {
						var el = e.srcElement || e.target;
						if (el.dataset && value in el.dataset) {
							return el;
						} else {
							while ((el = el.parentNode)) {
								if (el.dataset && value in el.dataset) {
									return el;
								}
							}
						}
						return false;
					}

					function contextListener() {
						document.addEventListener("contextmenu", function (e) {
							if (navigator.userAgent.toLowerCase().indexOf(" electron/") > -1) {
								if (e && (e.ctrlKey || e.metaKey)) {
									return;
								} else {
									getById("TipRightClick").classList.remove("hidden");
								}
							} else if (e && (e.ctrlKey || e.metaKey)) {
								return;
							} // allow for development ease

							//if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1){
							//	return;
							//} else if (e && (e.ctrlKey || e.metaKey)){return;} // allow for development ease

							taskItemInContext = clickInsideElement(e, "menu");

							if (taskItemInContext) {
								e.preventDefault();
								e.stopPropagation();
								toggleMenuOn();
								positionMenu(e);
								return false;
							} else {
								taskItemInContext = null;
								toggleMenuOff();
							}
						});
					}

					function menuClickListener(e) {
						var clickeElIsLink = clickInsideElement(e, "action");
						if (clickeElIsLink) {
							e.preventDefault();
							e.stopPropagation();
							menuItemListener(clickeElIsLink);
							return false;
						} else {
							var button = e.which || e.button;
							if (button === 1) {
								toggleMenuOff();
							}
						}
					}

					function toggleMenuOn() {
						if (menuState !== 1) {
							menuState = 1;
							menu.classList.add("context-menu--active");
							document.addEventListener("click", menuClickListener);
							
							const scale = Math.min(1, window.innerHeight / menu.scrollHeight);
							if (scale){
								menu.style.setProperty('--menu-scale', scale);
							}
							  
						}
					}

					function toggleMenuOff() {
						if (menuState !== 0) {
							menuState = 0;
							menu.classList.remove("context-menu--active");
							document.removeEventListener("click", menuClickListener);
						}
						lastMenu = false;
					}
					
					function copyTextToClipboard(element) {
						var textarea = document.createElement('textarea');
						textarea.value = element.innerText;
						document.body.appendChild(textarea);
						textarea.select();
						document.execCommand('copy');
						document.body.removeChild(textarea);
					}

					function positionMenu(e) {
						var clickCoords = getPosition(e);
						clickCoordsX = clickCoords.x;
						clickCoordsY = clickCoords.y;

						menuWidth = menu.offsetWidth + 4;
						menuHeight = menu.offsetHeight + 4;

						windowWidth = window.innerWidth;
						windowHeight = window.innerHeight;

						if (windowWidth - clickCoordsX < menuWidth) {
							menu.style.left = windowWidth - menuWidth + "px";
						} else {
							menu.style.left = clickCoordsX + "px";
						}
						menu.style.top = "unset";
						//menu.style.position = "relative"; // remove this line if using quirks mode
						
						var offset = document.body.scrollTop + document.body.clientHeight - clickCoordsY - menuHeight;
						if (offset < -10) {
							offset = -10;
						}
						menu.style.bottom = offset + "px";
					}

					async function menuItemListener(link) {
						if (link.getAttribute("data-action") === "Delete") {
							deleteMessage(taskItemInContext);
						} else if (link.getAttribute("data-action") === "Block") {
							blockUser(taskItemInContext);
						} else if (link.getAttribute("data-action") === "History") {
							getUserHistory(taskItemInContext);
						} else if (link.getAttribute("data-action") === "Reply") {
							replyToUser(taskItemInContext);
						} else if (link.getAttribute("data-action") === "VIP") {
							toggleVIPUser(taskItemInContext);
						} else if (link.getAttribute("data-action") === "Copy") {
							copyTextToClipboard(taskItemInContext);
						} else if (link.getAttribute("data-action") === "Pin") {
							if (taskItemInContext.classList.contains("pinned")) {
								unpinIt(taskItemInContext);
								syncDataAny({ unpin: [taskItemInContext.dataset.mid] });
							} else {
								pinIt(taskItemInContext);
								syncDataAny({ pin: [taskItemInContext.rawContents] });
							}
						} else if (link.getAttribute("data-action") === "TTS") {
							TTS.speechMeta(taskItemInContext.rawContents, true);
						} else if (link.getAttribute("data-action") === "Queue") {
							if (taskItemInContext.classList.contains("queued")) {
								removeQueue(taskItemInContext);
							} else {
								if (taskItemInContext.classList.contains("queued")) {
									removeQueue(taskItemInContext);
									syncQueueP2P();
									return;
								}
								selectedQueue.push(taskItemInContext);
								taskItemInContext.children[0].dataset.qid = selectedQueue.length;
								taskItemInContext.classList.add("queued");
								updateQueueButton();
								syncQueueP2P(false, taskItemInContext);
							}
						}
						toggleMenuOff();
					}

					contextListener();
				})();
			}

			function isEscape(evt) {
				_evt = evt || window.event;
				return "key" in _evt ? _evt.key === "Escape" || _evt.key === "Esc" : _evt.keyCode === 27;
			}

			document.onkeydown = function (evt) {
				let chatInput_parent = document.getElementById("chatInput_parent");
				if (!chatInput_parent){return;}
				
				try {
					if (isEscape(evt)) {
						if (!(!chatInput_parent.classList.contains("hidden") && getById("chatInput").classList.contains("locked"))) {
							chatInput_parent.classList.add("hidden");
						}
						getById("filter_messages_parent").classList.add("hidden");
						getById("chatInput").value = "";
					} else if (!evt.altKey && !evt.Meta) {
						if (!chatInput_parent.classList.contains("hidden") && getById("chatInput").classList.contains("locked")) {
							getById("chatInput").focus();
						}
					} 
				} catch(e){
					console.error(e);
				}
			};

			getById("filter_messages").addEventListener("keyup", function (e) {
				filterMessages(getById("filter_messages").value);
			});

			(function userFilterInputModalBox() {
				// filter
				var menu = getById("filter_messages_parent");
				var input = getById("filter_messages");
				var filterClearButton = getById("filterClearButton");
				var filterCloseButton = getById("filterCloseButton");
				menu.style.top = "unset";
				menu.style.bottom = "5px";

				function positionMenu(e) {
					if (document.getElementById("filter")){
						var rect = document.getElementById("filter").getBoundingClientRect();
						menu.style.left = rect.right + "px";
						menu.style.top = "unset";
						menu.style.bottom = "5px";
					}
				}

				var lastWidth = window.innerWidth;
				window.addEventListener("resize", function (event) {
					if (document.getElementById("filter")){
						var rect = document.getElementById("filter").getBoundingClientRect();
						menu.style.left = rect.right + "px";
					}
					
				});

				function toggleInput(event) { // mouse click
					event.preventDefault();
					event.stopPropagation();
					positionMenu(event);
					menu.classList.toggle("hidden");
					input.focus();
					return false;
				}

				input.addEventListener("blur", function (event) {
					if (menu.matches(":focus-within:not(:focus)") || menu.matches(":focus-within")) {
						// if a sibling has focus, don't close and retake focus
						input.focus(); // re-refocus text input.
						return;
					}
					event.preventDefault();
					event.stopPropagation();
					if (document.getElementById("filter")){
						document.getElementById("filter").addEventListener("click", toggleInput);
					}
					menu.classList.add("hidden");
					setTimeout(function () {
						// click vs hold
						if (document.getElementById("filter")){
							document.getElementById("filter").addEventListener("click", toggleInput);
						}
					}, 300);
					return false;
				});

				filterClearButton.addEventListener("click", function (event) {
					input.value = "";
					filterMessages(input.value);
				});

				filterCloseButton.addEventListener("click", function (event) {
					event.preventDefault();
					event.stopPropagation();
					menu.classList.add("hidden");
					return false;
				});

				if (document.getElementById("filter")){
					document.getElementById("filter").addEventListener("click", toggleInput);
				}
			})();

			(function userChatInputModalBox() {
				const menu = getById("chatInput_parent");
				const input = getById("chatInput");
				const chatInputButton = getById("chatInputButton");
				const chatClearButton = getById("chatClearButton");
				const getChatSourcesButton = getById("getChatSources");
				const chatInputCloseButton = getById("chatInputCloseButton");
				const chatInputLockButton = getById("chatInputLockButton");
				let chatSourcesTimeout;

				function toggleInput(event) {
					event.preventDefault();
					event.stopPropagation();
					
					if (event.altKey) {
						createPopoutChat();
						return false;
					}
					
					menu.classList.toggle("hidden");
					input.focus();
					return false;
				}

				function sendMessage(event) {
					event.preventDefault();
					if (input.value) {
						if (activeChatDestinations && activeChatDestinations.size) {
							respondP2P(input.value, [...activeChatDestinations]);
						} else {
							respondP2P(input.value);
						}
					}
					input.value = "";
				}

				function handleInputLength() {
					if (input.value.length > 100) {
						menu.style.border = limitStringWarning(input.value, 200) ? "red 1px solid" : "";
					} else {
						menu.style.border = "";
					}
				}

				function setupSayHelloListeners(element) {
					const handleInput = (e) => {
						if (e) e.preventDefault();
						toggleInput(e);
					};

					const mouseupHandler = (e) => {
						if (e.button === 0 || e.button === 1) {
							handleInput(e);
						}
					};

					element.addEventListener("mouseup", mouseupHandler);
					element.addEventListener("touchend", handleInput);

					return () => {
						element.removeEventListener("mouseup", mouseupHandler);
						element.removeEventListener("touchend", handleInput);
					};
				}

				input.addEventListener("keyup", function(event) {
					if (event.keyCode === 13) {
						sendMessage(event);
					} else {
						handleInputLength();
					}
				});

				input.addEventListener("paste", handleInputLength);

				input.addEventListener("blur", function(event) {
					if (menu.matches(":focus-within:not(:focus)") || menu.matches(":focus-within")) {
						input.focus();
						return;
					}
					if (input.classList.contains("locked")) {
						return;
					}
					event.preventDefault();
					event.stopPropagation();
					
					menu.classList.add("hidden");
				});

				chatInputButton.addEventListener("click", sendMessage);

				getChatSourcesButton.onclick = function(event) {
					send2Extension({ action: "getChatSources" });
					clearTimeout(chatSourcesTimeout);
					chatSourcesTimeout = setTimeout(function() {
						if (getById("getChatSources").classList.contains("hidden")) {
							send2Extension({ action: "getChatSources" });
						}
					}, 2000);
				};

				chatClearButton.addEventListener("click", function() {
					input.value = "";
					clearAll(true);
				});

				chatInputCloseButton.addEventListener("click", function(event) {
					event.preventDefault();
					event.stopPropagation();
					menu.classList.add("hidden");
					return false;
				});

				chatInputLockButton.addEventListener("click", function(event) {
					event.preventDefault();
					event.stopPropagation();
					input.classList.toggle("locked");
					if (input.classList.contains("locked")) {
						document.documentElement.style.setProperty("--locked-chatbar", "30px");
						chatInputLockButton.innerHTML = "🔒";
					} else {
						document.documentElement.style.setProperty("--locked-chatbar", "0px");
						chatInputLockButton.innerHTML = "🔓";
					}
					return false;
				});

				const sayHelloElement = document.getElementById("say_hello");
				if (sayHelloElement) {
					setupSayHelloListeners(sayHelloElement);
				}
			})();
			
			function clearAll(relay){
				getById("output").innerHTML = "";
				autoShowQueue = [];
				selectedQueue = [];
				sendDataP2P(false);
				updateQueueButton();
				TTS.clearQueue();
				if (relay){
					syncDataAny({ "clearAll": true }, false, true);
				}
			}

			if (urlParams.has("js")) {
				// ie: &js=https%3A%2F%2Fvdo.ninja%2Fexamples%2Ftestjs.js
				console.warn("Third-party Javascript has been injected into the code. Security cannot be ensured.");
				var jsURL = urlParams.get("js");
				jsURL = decodeURI(jsURL);
				console.log(jsURL);
				// type="text/javascript" crossorigin="anonymous"
				var externalJavaascript = document.createElement("script");
				externalJavaascript.type = "text/javascript";
				externalJavaascript.crossorigin = "anonymous";
				externalJavaascript.src = jsURL;
				externalJavaascript.onerror = function () {
					console.warn("Third-party Javascript failed to load");
				};
				externalJavaascript.onload = function () {
					console.log("Third-party Javascript loaded");
				};
				document.head.appendChild(externalJavaascript);
			}

			if (urlParams.has("reload")) {
				try {
					setTimeout(function () {
						var reload = getStorage("savedMessages");
						if (reload) {
							reload = JSON.parse(reload);
							for (var i = 0; i < reload.length; i++) {
								if (!reload[i].id || !document.querySelector("[data-mid='"+reload[i].id+"']")){
									processData({ contents: reload[i] }, true);
								}
							}
							console.log("PAGE REFRESHED FROM LOCAL CACHE");
						}
					}, 0);

					reload = null;
					window.addEventListener("beforeunload", event => {
						reload = [];
						document.querySelectorAll("[data-mid]").forEach(ele => {
							reload.push(ele.rawContents);
						});
						reload = reload.slice(-40);
						queue = queue.slice(-10);
						reload = reload.concat(queue);
						setStorage("savedMessages", JSON.stringify(reload));
					});
				} catch (e) {}
			}

			function limitStringWarning(string, maxLength) {
				let count = 0;
				let result = "";

				for (let i = 0; i < string.length; ) {
					let char = string[i];
					let charCode = string.charCodeAt(i);

					if (charCode >= 0xd800 && charCode <= 0xdbff) {
						i++;
						char += string[i];
					}

					let charLength = char.length;

					if (count + charLength <= maxLength) {
						result += char;
						count += charLength;
						i++;
					} else {
						break;
					}
				}

				if (result.length < string.length) {
					return true;
				}
				return false;
			}
			
			
			// Below will cycle your OBS scenes when a user enter !cycle into chat. (assumign &cycle is added)
			//
			// You also need to have the dock.html in your OBS, 
			// with your OBS set to "Advanced access" page permissions, 
			// and have &obscontrol added to the dock.html URL
			//
			function getOBSDetails() {
			  return new Promise((resolve, reject) => {
				if (!window.obsstudio) {
				  reject(new Error('obsstudio is not available'));
				  return;
				}

				let details = {};
				let readOnlyFuncs = [
				  //"getControlLevel",
				  //"getStatus",
				  "getCurrentScene",
				  "getScenes",
				  //"getTransitions",
				  //"getCurrentTransition",
				  //"pluginVersion"
				];

				let promises = [];

				Object.keys(window.obsstudio).forEach((key) => {
				  if (typeof window.obsstudio[key] === 'function' && readOnlyFuncs.includes(key)) {
					let promise = new Promise((resolveFunc) => {
					  try {
						window.obsstudio[key](function(out) {
						  var shortkey = key.replace("get", "");
						  shortkey = shortkey[0].toLowerCase() + shortkey.slice(1);
						  details[shortkey] = out;
						  resolveFunc();
						});
					  } catch (e) {
						console.error(e);
						resolveFunc();
					  }
					});
					promises.push(promise);
				  }
				});

				Promise.all(promises).then(() => {
				  resolve(details);
				}).catch((error) => {
				  reject(error);
				});
			  });
			}
			function cycleScenes() {
			  getOBSDetails().then((details) => {
				if (details && details.scenes && details.currentScene && details.currentScene.name && (details.scenes.length > 1)) {
				  let currentIndex = details.scenes.indexOf(details.currentScene.name);
				  if (currentIndex !== -1) {
					let nextIndex = (currentIndex + 1) % details.scenes.length;
					let nextScene = details.scenes[nextIndex];
					if (window.obsstudio["setCurrentScene"]) {
					  window.obsstudio["setCurrentScene"](nextScene, function() {
					  });
					}
				  }
				}
			  }).catch((error) => {
				console.error(error);
			  });
			}
			
			
			try {
				navigator.wakeLock.request("screen");
			} catch (err) {
			
			}
			
		</script>
	</body>
</html>