popup.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Menu</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <meta content="utf-8" http-equiv="encoding" />
        <script src="popup.js?v=2"></script>
        <style>
:root {
    --body-background-enabled: #fff;
    --body-background-disabled: #ffdcdd;
    --default-text-color: #362e26;
    --section-title-color: #362e26;
    --color-accent: #00a6ff;
    --color-accent-subtle: #ddf4ff;
    --collapsible-label-color: #dcf4ff;
    --collapsible-border-color: #b7defe;
    --color-wrapper-background: #e9e4dd;
    --button-background: #b7defe;
    --text-button-text: #222;
    --h2-color: black;
    --h3-color: #111;
    --link-color: black;
    --new-version-banner-background: #c8ffc8;
    --new-version-banner-text: black;
    --new-version-banner-border: 1px solid #7eff7e;
    --new-version-link-color: green;
    --new-version-installed-color: #3a413a;
    --options-group-background-color: #f6f8fa;
    --options-group-text-color: #362e26;
    --extension-enabled-background-color: rgb(153, 255, 153);
    --extension-disabled-background-color: red;
    --extension-disabled-text-color: white;
    --streaming-chat-color: #00a6ff;
    --single-message-color: #ff7f00;
    --emotes-wall-color: #ffd400;
    --hype-meter-color: #00ff5e;
    --waitlist-color: #ff00d2;
	--ticker-color: #ff3a3bdd;
	--poll-color: #a3ff3bdd;
    --download-link: blue;
    --font-family: "Segoe UI", Tahoma, "Sora", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background-enabled: #0d1117;
        --body-background-disabled: #170d0e;
        --default-text-color: #c9d1d9;
        --section-title-color: #c9d1d9;
        --color-accent: #00a6ffdd;
        --color-accent-subtle: #112339;
        --collapsible-label-color: #112339;
        --collapsible-border-color: #194c86;
        --color-wrapper-background: #161b22;
        --button-background: #1d4778;
        --text-button-text: white;
        --h2-color: #b2b2b2;
        --h3-color: #b2b2b2;
        --link-color: white;
        --new-version-banner-background: #066536;
        --new-version-banner-text: white;
        --new-version-banner-border: 1px solid #7eff7e;
        --new-version-link-color: #90f190;
        --new-version-installed-color: #bebebe;
        --options-group-background-color: #161b22;
        --options-group-text-color: #c9d1d9;
        --extension-enabled-background-color: rgb(153, 255, 153);
        --extension-disabled-background-color: #781717;
        --extension-disabled-text-color: white;
        --streaming-chat-color: #00a6ffdd;
        --single-message-color: #ff7f00dd;
        --emotes-wall-color: #ffd400dd;
        --hype-meter-color: #00ff5edd;
        --waitlist-color: #ff00d2dd;
		--ticker-color: #dd3334dd;
		--poll-color: #a3ff3bdd;
        --download-link: lightblue;
    }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flashing {
  animation: flash 0.5s linear 1;
}

.username-list-container {
	max-height: 80px;
	overflow-y: auto;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 5px;
	font-family: Arial, sans-serif;
	font-size: 12px;
}
.username-item {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
    padding: 2px 5px;
    border-radius: 3px;
    flex-direction: row;
}
.remove-username {
	cursor: pointer;
	color: #ff0000;
	font-weight: bold;
	margin-right: 8px;
}
.add-username-container {
	display: flex;
	margin-top: 5px;
}
#newUsername {
	flex-grow: 1;
	margin-right: 5px;
}
#addUsername {
	cursor: pointer;
}

.hidelinks a[href^="http"] {
  text-decoration: none; /* Remove default underline */
  filter: blur(4px); /* Apply blur effect */
  transition: filter 0.3s ease; /* Smooth transition for hover effect */
}
/* Remove blur on hover */
.hidelinks a[href^="http"]:hover {
  filter: blur(0);
}


#searchInput {
    appearance: none;
    position: fixed;
    top: 50px;
    right: 21px;
    border: none;
    display: none;
    width: 0;
    padding: 1px;
    font-weight: bold;
    cursor: text;
    z-index: 100;
    transition: width 0.5s ease;
}

#searchInput.show {
    display: block;
    width: calc(100% - 29px); /* Adjust width as needed */
}

#searchIcon {
    position: fixed;
    top: 54px;
    right: 0px;
    z-index: 100;
    cursor: pointer;
}
#activeIcon {
	position: absolute;
    top: 54px;
    right: 17px;
    cursor: pointer;
    display: block;
    height: 0;
}

.copy-link-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 5px;
    padding: 5px;
}
.copy-link-btn:hover {
    background-color: #f0f0f0;
    border-radius: 50%;
}

/* 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;
}

/* 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;
}

* {
    margin: 0;
    padding: 0;
}

div {
    padding: 2px;
}

html {
    scroll-padding-top: 2em;
    scroll-behavior: smooth;
}

body {
    width: 380px;
    padding: 0;
    margin: 0;
    scrollbar-color: #666 #201c29;
    font-family: var(--font-family);
    background-color: var(--body-background-disabled);
    font-size: 12px;
}

::-webkit-scrollbar {
    width: 15px;
}

::-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;
}

.hidden {
    display: none !important;
    visibility: hidden;
    width: 0px;
    height: 0px;
    opacity: 0;
}

body.extension-disabled {
    background-color: var(--body-background-disabled);
}

body.extension-enabled {
    background-color: var(--body-background-enabled);
}

#chatCommands {
    overflow-y: auto;
    max-height: 156px;
    box-shadow: inset 0px 0px 5px #0000002e;
    border-radius: 10px;
    margin-top: 10px;
}

#timedMessages {
    overflow-y: auto;
    max-height: 156px;
    box-shadow: inset 0px 0px 5px #0000002e;
    border-radius: 10px;
    margin-top: 10px;
}
#botReplyMessages {
    overflow-y: auto;
    max-height: 156px;
    box-shadow: inset 0px 0px 5px #0000002e;
    border-radius: 10px;
    margin-top: 10px;
}
.rounded_area {
    background-color: var(--color-accent-subtle);
    border-radius: 6px;
    padding: 0 4px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p {
    color: var(--default-text-color);
}

p a {
    color: var(--link-color);
}

.downloadLink {
    text-decoration: underline;
    color: var(--download-link);
}

#newVersion {
    padding: 1em;
    background: var(--new-version-banner-background);
    color: var(--new-version-banner-text);
    border-bottom: var(--new-version-banner-border);
    text-align: center;
    font-weight: bold;
    display: none;
}

#newVersion a {
    text-decoration: none;
    color: var(--new-version-link-color);
}

#newVersion .installed {
    color: var(--new-version-installed-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-weight: 200;
    margin-bottom: 0;
}


.pressed {
    background-color: #2a2 !important;
}

.submenubuttons {
    width: 100%;
}
.submenubuttons .glowingButton {
    width: calc(50% - 10px);
}

#newVersion.show {
    display: block;
}

.container {
    padding: 0 0.5em;
}

.options-link {
    text-decoration: none;
    color: var(--text-button-text);
    font-size: 0.6rem;
}

.copy-link {
    text-decoration: none;
    color: var(--text-button-text);
    font-size: 0.6rem;
	cursor: copy!important;
}

#disableButton {
    appearance: none;
    position: sticky;
    top: 0;
    border: none;
    display: block;
    width: 100%;
    padding: 0.5em 0;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
}
button {
    padding: 1px 5px;
    margin: 2px 1px;
}

.extension-enabled #disableButton {
    background-color: var(--extension-enabled-background-color);
}

.extension-disabled #disableButton {
    background-color: var(--extension-disabled-background-color);
    color: var(--extension-disabled-text-color);
}

h2 {
    color: var(--h2-color);
    font-size: 1.1rem;
    margin-top: 1.6rem;
    margin-bottom: 0.4rem;
}

.link {
    margin-bottom: 1em;
    margin: 2em 0 0.5em 0;
}

.link h2 {
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--section-title-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.generic_category_title {
    margin-top: 1.5em;
}

.generic_category_title h2 {
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--section-title-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.options {
    padding: 0;
}

.link div,
.options_group {
    background-color: var(--options-group-background-color);
    color: var(--options-group-text-color);
    padding: 1em;
    border-radius: 4px;
    word-break: break-all;
}

.options_group {
    word-break: break-word;
}

/* Alert */

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.alert_primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert_secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.alert_success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert_danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert_warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert_info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert_light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}
.alert_dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

/* Headers */

h2.streaming_chat_title {
    color: var(--streaming-chat-color);
}

h2.single_message_title {
    color: var(--single-message-color);
}

h2.emotes_wall_title {
    color: var(--emotes-wall-color);
}

h2.hype_mode_title {
    color: var(--hype-meter-color);
}

h2.waitlist_mode_title {
    color: var(--waitlist-color);
}

h2.ticker_mode_title {
    color: var(--ticker-color);
}

h2.poll_mode_title {
    color: var(--poll-color);
}

.link div a {
    color: var(--link-color);
}

h3 {
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--h3-color);
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* The switch - the box around the slider */

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    margin: 2px;
}

.icon {
    max-width: 16px;
    max-height: 16px;
    vertical-align: middle;
    margin-left: 2px;
}

/* Hide default HTML checkbox */

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #2196f3;
}

input {
    margin: 2px;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}

/* Rounded sliders */

.slider.round {
    border-radius: 16px;
}

.slider.round:before {
    border-radius: 50%;
}

.link {
    cursor: help;
}
#disableButtonText {
    margin-right: 5px;
}

/* Wrapper */

.wrapper {
    display: flex;
    justify-content: center;
}

.collapsible {
    width: 100%; /* max-width: 350px; */
    overflow: hidden;
    padding: 0;
}

.collapsible-input {
    display: none;
}

.collapsible-label {
    position: relative;
    font-size: 1.17em;
    font-weight: 600;
    color: var(--h3-color);
    background: var(--collapsible-label-color);
    border: 1px solid var(--collapsible-border-color);
    border-radius: 4px;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.1), 0 4px 11px 0 rgba(0, 0, 0, 0.08);
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 4px 8px;
    z-index: 1;

    /* Disable selection */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.collapsible-label:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 4px;
    right: 8px;
    background: url(./icons/wrapper_button.png) no-repeat 0 0;
    background-size: 18px;
    transition: all 0.25s ease;
}

.collapsible-input:checked + label:after {
    transform: rotate(90deg);
}

.collapsible-text {
    padding: 0;
    max-height: 1px;
    overflow: hidden;
    border-radius: 4px;
    line-height: 1.4;
    position: relative;
    top: -100%;
    opacity: 0.5;
    transition: all 0.25s ease;
}

.collapsible-input:checked ~ .collapsible-text {
    max-height: none;
    /* padding-bottom: 25px; */
    margin-bottom: 16px;
    background: var(--color-wrapper-background);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.1), 0 4px 11px 0 rgba(0, 0, 0, 0.08);
    opacity: 1;
    top: 0;
    border: 1px solid var(--collapsible-border-color);
    border-radius: 4px;
}

/* Glowing button */

.glowingButton {
    position: relative;
    width: 100px;
    height: 16px;
    display: inline-block;
    background: #fff;
    margin: 2px;
    padding: 4px;
    border: none;
    cursor: pointer;
}

.glowingButton:before,
.glowingButton:after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: #ff0000; */
    transition: 0.2s;
    background: linear-gradient(45deg, #00ccff, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #ff075b);
}

.glowingButton:hover:before {
    inset: -2px;
}

.glowingButton:hover:after {
    inset: -2px;
    filter: blur(10px);
}

.glowingButton span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--button-background);
    z-index: 10;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--default-text-color);
    justify-content: center;
    align-items: center;
}


/* Text input */

 
				 
.textInputContainer {
    position: relative;
    width: 200px;
    margin-top: 2px;
    margin-bottom: 4px;
}

.textInput {
    width: 100%;
    height: 100%;
    padding: 2px;
    background-color: var(--color-accent-subtle);
    color: var(--default-text-color);
    border: 1px solid var(--collapsible-border-color);
    border-radius: 4px;
    font-size: 1em;
    font-weight: 400;
    outline: none;
    transition: all 0.3s;
}

.textInput:focus {
    border: 1px solid var(--color-accent);
}

.textInput + label {
    /*down*/
    position: absolute;
    left: 8px;
    top: 2px;
    padding: 0 2px;
    color: var(--default-text-color);
    font-size: 1.2em;
    transition: all 0.2s;
    cursor: text;
    z-index: 1;
	pointer-events: none;
}

.textInput + label::before {
    position: absolute;
    width: 100%;
    left: 0;
    top: 8px;
    border-radius: 4px;
    content: "";
    z-index: -1;
}

.textInput:focus + label::before,
.textInput:valid + label::before {
    height: 6px;
    background-color: var(--color-accent-subtle);
}

.textInput:focus + label,
.textInput:not(:placeholder-shown) + label {
    top: -7px;
    color: var(--color-accent);
    font-size: 1em;
}

.textInput::placeholder {
    font-size: 1em;
    opacity: 0;
    transition: all 0.2s;
}

.textInput:focus::placeholder {
    opacity: 1;
    animation-delay: 0.2s;
}

.custom_gif_commands_title {
    color: #00a6ff; /* You can adjust this color to match your theme */
}

.custom-gif-command-entry {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.custom-gif-command-entry .textInputContainer {
    margin-right: 10px;
}

.removeCustomGifCommand {
    padding: 5px 10px;
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.removeCustomGifCommand:hover {
    background-color: #cc0000;
}

        </style>
    </head>

    <body>
        <button class="showalways" id="disableButton">
            <span id="disableButtonText" data-translate="toggle-on-off">
                Toggle On/Off
            </span>
            <label class="switch">
                <input type="checkbox" id="extensionState" />
                <span class="slider round"></span>
            </label>
        </button>
        <div  style="display: flex; width: 100%; padding: 0; margin: 1px 0 0 0; border: 0;">
            <button class="glowingButton showalways" style="margin: 0 0 0 1px; flex-grow: 1; flex-shrink: 1; flex-basis: auto; box-sizing: border-box; position: sticky; top: 35px; z-index: 10; padding: 0;" data-action="fakemsg">
                <span data-translate="trigger-fake-message">Trigger a fake test message</span>
            </button>
            <button
                class="glowingButton showalways"
                style="margin: 0 1px 0 1px; width: unset; flex-grow: 1; flex-shrink: 1; flex-basis: auto; box-sizing: border-box; position: sticky; top: 35px; z-index: 10; padding: 0; max-width: 100px;"
                data-action="cleardock"
                title="Clears messages in the dock, excluding pinned messages. Hold CTRL while clicking to clear pinned messages as well."
            >
                <span data-translate="clear-all-messages">Clear All</span>
            </button>
        </div>
        <div id="newVersion"></div>
        <input type="text" id="searchInput" placeholder="Search options by keyword..." />
        <div id="searchIcon" title="Search options">🔍</div>
		<div id="activeIcon" title="Show enabled options">🔰</div>
        <div class="container">
            <div class="link" title="This link will display chat messages as a streaming list. Use as an overlay or as a control dock.">
                <h2 class="streaming_chat_title">
                    <span data-translate="streaming-chat-dockable">Streaming chat (dockable) </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
                    <a class="options-link rounded_area" href="#streaming-chat-options" title="Jump to dockable streaming chat link options."><span data-translate="options">[options]</span></a>
					
                </h2>
                <div id="dock" data-raw="" class="streaming_chat"></div>
				
            </div>

            <a href="" id="streaming-chat-options"></a>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-menu-options" />
                    <label class="collapsible-label" for="wrapper-chat-menu-options"><span data-translate="menu">🎚️ Menu</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidemenu" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-menu-bar"> Hide menu bar </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="chatonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-chat-only"> Make chat input the full menu bar </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-overlay-options" />
                    <label class="collapsible-label" for="wrapper-chat-overlay-options"><span data-translate="overlay">🖼️ Overlay</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="scale=2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="magnify-the-view-larger-fontimages">🔍➕ Magnify the view (larger font/images) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="scale=0.77" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-the-font-icons-and-menu-smaller">🔎➖ Make the font, icons, and menu smaller </span>
                                </div>
                                <div title="Use &chroma=0000 instead if you want to have a transparent background with the scroll bar still showing">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="transparent" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="force-transparent-background">⭕ Force transparent background (and hide scrollbar) </span>
                                </div>
                                <div title="This won't work in Chrome">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="opacity=0.3" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-entire-page-partially-transparent">👻 Make entire page partially transparent </span>
                                </div>
                                <div title="This won't work in Chrome">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="chroma=0006" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="translucent-page-background">⚪ Translucent page background </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="chroma" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="green-page-background">🟢 Green page background </span>
                                </div>
								 <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="chroma=fff" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="white-page-background">⚪ White page background </span>
                                </div>

                                <div title="This won't work in Chrome">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="lightmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="light-mode--white-page-background">⚪ Light mode — White page background </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="darkmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="dark-mode--black-page-background">⚫ Dark mode — Black page background </span>
                                </div>

                                <div title="Another Social Stream page MUST be added to OBS with page permissions set to 'Read access to user information' or higher.">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="remote" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-current-obs-scene">🚥 Show current OBS scene in corner </span>
                                    <br />
                                    <a class="options-link rounded_area" target="_blank" href="https://github.com/steveseguin/social_stream/blob/main/README.md#obs-remote-scene-support">
                                        Details on enabling the read-permissions for OBS scene state
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-message-mechanics-options" />
                    <label class="collapsible-label" for="wrapper-chat-message-mechanics-options"><span data-translate="message---mechanics">💬 Message — ⚙️ Mechanics</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="showtime" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-messages-after-20s">
                                        ⏲️ Auto-hide message after <input type="number" style="max-width: 8ch;" max="999999" min="1" value="20000" size="6" data-numbersetting="showtime" />ms
                                    </span>
                                </div>
								<div title="This option gives you time to delete a message with another dock that doesn't have the delay; censorship-friendly then">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="delaytime" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-messages-after-10s">
                                        🚫🤬️ Delay showing messages for <input type="number" style="max-width: 8ch;" max="999999" min="1" value="10000" size="6" data-numbersetting="delaytime" />ms
                                    </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="alignbottom" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-start-at-bottom-rather-than-top">⏬ Messages start at bottom rather than top </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="dropdown" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-drop-down-reversed-order">🔃 Messages drop down (reversed order) </span>
                                </div>
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="reverse" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-reverse-order">🔀 Reverse order (top down new messages)</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="random" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-appear-randomly-on-the-screen">🔀 Messages appear randomly on the screen </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autoscroll" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-auto-scroll">🔽 Enable auto-scrolling to the bottom by default </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="alignright" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-align-right">👇 Messages align to the right-side </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="rtl" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="text-align-right">🗨️🧱 Force right-to-left text reading </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="dissolve" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="stream-events-fade-up-and-away-after-3s">🚬 Stream events fade up and away after 3s </span>
                                </div>
                                <div title="Note: You must first interact with the dock-page for any audio to be audible.">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="beep" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="beep-when-there-is-a-new-message">🔔 Beep when there is a new message </span>
                                </div>
                                <div title="Lower the beep's volume by 50%">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="beepvolume=30" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="reduce-the-beeps-volume">🔔🔉 Reduce the beep's volume to 30% </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Specify a URL for a custom beep audio file">
                                    <input type="text" id="custombeep" class="textInput instant" autocomplete="off" placeholder="eg: https://www.yourdomain.com/beep.wav" data-textparam1="custombeep" />
                                    <label for="custombeep"><span data-translate="custombeep">&gt; URL for custom beep audio file</span></label>
                                </div>
                                
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="reload" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="reload-the-last-50-messages-when-refreshing-the-page">🔄️ Reload the last ~50-messages when refreshing the page </span>									
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autoshow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="auto-select-new-messages-skipping-as-needed">🔖 Auto-select new messages (skipping as needed) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autoshowtime" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="auto-show-time">
                                        ⌚ Custom auto-select show time <input type="number" style="max-width: 8ch;" max="999999" min="1" value="10000" size="6" data-numbersetting="autoshowtime" />ms
                                    </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="excludefiltered" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="Exclude filtered from auto-show">🥅 Exclude filtered messages from auto-selecting </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autoshowdonos" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="when-auto-selecting-is-on-only-auto-select-donations">🏷️ When auto-select is on, select donations </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autoshowmembers" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="when-auto-selecting-is-on-only-auto-select-members">👑 When auto-select is on, select those from members </span>
                                </div>
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autoyoutubememberchat" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="auto-feature-monthly-member-chat">👑<img src="./sources/images/youtube.png" class="icon" /> Auto-feature YouTube monthly member chat </span>																														  
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="sync" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="multiple-docks-will-stay-in-sync-as-to-selected-messages">🔁 Multiple docks will stay in sync as to selected messages </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="pinnedonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="only-see-pinned-messages-for-use-with-sync">📌 Only see pinned messages (for use with &amp;sync) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="viewonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="view-only-mode-cant-chat-pin-or-feature">👁️ View-only mode. (Can't chat, pin, or feature) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="chatmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="view--chat-only-mode-cant-pin-or-feature">👁️ View &amp; Chat-only mode. (Can't pin or feature) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="helpermode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="view-pin-and-queue-cant-chat-or-feature">👁️ View, Pin, and Queue. (Can't chat or feature) </span> 
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="24hr" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="use-24-hour-time-for-timestamp">⌚ Use 24-hour time for timestamp </span>
                                </div>
                                <div title="Only others on the same network/computer as yours can connect to this via p2p">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="lanonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="allow-lan-only-p2p-connections">🖥️💻 P2P connections via LAN only </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Specify a command that lets a guest auto-queue a message">
                                    <input type="text" id="selfqueue" class="textInput instant" autocomplete="off" placeholder="eg: !lookie" data-textparam1="selfqueue" />
                                    <label for="selfqueue"><span data-translate="selfqueue">&gt; Chat command to auto-queue the message</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			
			<div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-message-tts-options" />
                    <label class="collapsible-label" for="wrapper-chat-message-tts-options"><span data-translate="message---tts">💬 Message — 🗣️ Text to Speech</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">

                                <div title="Tip: You can use &amp;myname=name1,name2 to list names to exclude from TTS.">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="speech" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="text-to-speech-incoming-messages">🚦🗣️ Text-to-speech incoming messages </span>
                                </div>
								<br />
								<i>note: the free built-in TTS plays out via the default audio device.</i>
								<br />
								<br />
                                <div>
                                    <select id="languageSelect1" data-optionparam1="lang" title="Select the default text to speech language"> </select>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="simpletts" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-say-says-or-someone-says-with-tts">🗣️ Do not say "says" or "someone says" with TTS </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="readevents" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="read-tts-stream-events">🗣️ Include any stream events when using TTS </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="simpletts2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-read-out-chatname-and-someone-says-when-using-tts">🗣️ Do not read out chatname and "someone says" when using TTS. </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="readouturls" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="read-out-urls">🗣️ Read out URLs rather than saying "link". </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="skipmessages=3" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="if-using-tts-only-announce-every-3rd-message">🗣️ If using TTS, only announce every 3rd message </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="rate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="custom-tts-rate">
                                        ⏩ Custom speaking rate for the TTS
                                        <input type="number" style="max-width: 6ch;" step="0.01" max="10" min="0.1" value="1.0" size="5" data-numbersetting="rate" />
                                    </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="passtts" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="pass-tts">🔇 Next tts message control via chat "</span><b><span data-translate="pass">!pass</span></b>"												 
                                </div>
								<br />
								<!-- Google TTS Options -->
								<div class="tts-provider-options">
									<h4>Google TTS Options</h4>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="googleAPIKey" class="textInput instant" autocomplete="off" placeholder="Your Google API Key" data-textparam1="ttskey" />
										<label for="googleAPIKey"><span data-translate="google-api-key">Google API Key</span></label>
									</div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="googleVoiceName" class="textInput instant" autocomplete="off" placeholder="e.g., en-GB-Standard-A" data-textparam1="voice" />
										<label for="googleVoiceName"><span data-translate="google-voice-name">Google Voice Name</span></label>
									</div>
								</div>
								<br />
								<!-- ElevenLabs TTS Options -->
								<div class="tts-provider-options">
									<h4>ElevenLabs TTS Options</h4>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="elevenLabsKey" class="textInput instant" autocomplete="off" placeholder="Your ElevenLabs API Key" data-textparam1="elevenlabskey" />
										<label for="elevenLabsKey"><span data-translate="elevenlabs-api-key">ElevenLabs API Key</span></label>
									</div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="elevenLabsVoiceID" class="textInput instant" autocomplete="off" placeholder="e.g., VR6AewLTigWG4xSOukaG" data-textparam1="voice" />
										<label for="elevenLabsVoiceID"><span data-translate="elevenlabs-voice-id">ElevenLabs Voice ID</span></label>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="latency" />
											<span class="slider round"></span>
										</label>
										<span data-translate="elevenlabs-latency">
											🚀 ElevenLabs Latency Optimization
											<input type="number" style="max-width: 6ch;" step="1" max="4" min="0" value="0" size="5" data-numbersetting="latency" />
										</span>
									</div>
								</div>
								<br />
								<!-- Speechify TTS Options -->
								<div class="tts-provider-options">
									<h4>Speechify TTS Options</h4>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="speechifyAPIKey" class="textInput instant" autocomplete="off" placeholder="Your Speechify API Key" data-textparam1="speechifykey" />
										<label for="speechifyAPIKey"><span data-translate="speechify-api-key">Speechify API Key</span></label>
									</div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="speechifyVoiceID" class="textInput instant" autocomplete="off" placeholder="e.g., henry" data-textparam1="voice" />
										<label for="speechifyVoiceID"><span data-translate="speechify-voice-id">Speechify Voice ID</span></label>
									</div>
								</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-message-visibility-options" />
                    <label class="collapsible-label" for="wrapper-chat-message-visibility-options"><span data-translate="message---visibility">💬 Message — 👁️ Visibility</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidesource" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-source-icon-eg">🛈 Hide source icon (e.g, </span><img src="./sources/images/twitch.png" class="icon" /><img src="./sources/images/youtube.png" class="icon" />
                                    <img src="./sources/images/instagramlive.png" class="icon" />)
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidetwitch" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-twitch">🚫<img src="./sources/images/twitch.png" class="icon" /> Hide Twitch messages (other sources allowed)</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="onlytwitch" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-twitch-only">✅<img src="./sources/images/twitch.png" class="icon" /> Only show Twitch messages (no other sources)</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="exclude=kick" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-kick">🚫<img src="./sources/images/kick.png" class="icon" /> Hide messages from Kick</span>
                                </div>
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="blur" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="blur-instead">🌫️ Just blur messages from hidden sources</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="branded" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-channel-icon">📺 Show channel icon </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="noavatar" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-avatars">🆔 Hide avatars </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="notime" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-timestamp">🕘 Hide timestamp </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="nobadges" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-badges">🔰 Hide badges </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="limitbadges=2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="limit-badges">🔰🔰 Show just the first 2 badges </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="showonlyevents" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-only-events">🎆 Show only stream events </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hideallevents" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-all-events">🧯 Hide all stream events </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="firstnames" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="use-first-names-only">🔤 Use first names only </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidenames" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="delete-names-entirely">🅰️ Delete names entirely </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="color" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="color-names-if-color-info-available">📛 Color names if color info available </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="limit" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="limit-messages-to">
                                        🗃️ Limit total messages to
                                        <input type="number" style="max-width: 6ch;" max="99999" min="1" value="200" size="5" data-numbersetting="limit" />
                                    </span>
                                </div>
                                <div title="This will enable the 'add sentiment scores to messages' option also">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="badkarma" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-messages-with-bad-karma">🤬 Filter out messages with bad karma </span>
                                </div>
                                <div title="Hide messages that start with !">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidecommands" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-messages-starting-with">❗💬 Hide messages that start with: </span><b><i>!</i></b>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="showonlydonos" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-only-donos">🤑 Show only messages with donations </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="showonlymembers" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-only-donos">🤩 Show only messages from members </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="namefilter" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="alt-keyword-filter-will-match-on-name-only">🙊 Alt-keyword filter will match on name-only </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="onlyquestions" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="only-show-messages-marked-as-questions">❓ Only show messages marked as questions </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidequestions" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-messages-marked-as-questions">❔ Hide messages marked as questions </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidenumbers" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-messages-numbers-only">🔢 Hide messages that are numbers only </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hideshortmessages" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-short-messages">
                                        🗃️ Hide basic messages shorter than <input type="number" style="max-width: 6ch;" max="99" min="1" value="5" size="2" data-numbersetting="hideshortmessages" />chars
                                    </span>
                                </div>
                                <div title="HTML is removed from messages, donations, and names for this dock only.">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="striphtml" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="strip-html-from-messages-and-donations">📤 Strip HTML from messages and donations </span>
                                </div>
                                <div title="HTML is removed from messages, donations, and names for this dock only.">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="stripemoji" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="strip-text-based-emojis-from-messages">😭 Strip text-based emojis from messages </span>
                                </div>
                                <div title="Links are removed from messages and replaced with a placeholder">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="striplinks" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="replace-links-in-messages">🚫🔗 Replace links in messages with just '[Link]' </span>
                                </div>
                                <div title="Links are make clickable and will open a new tab if clicked">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="activelinks" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="activate-links-in-messages">🟢🔗 Make URLs in chat clickable links </span>
                                </div>
                                <div title="Links are shortened in length if being displayed">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="shortlink" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="shorten-links-in-messages">🤏🔗 Shorten long links ... </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="chartime=100" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="increase-the-minimum-time-messages-auto-show-for">⏳ Increase the minimum time messages auto-show for </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-message-styling-options" />
                    <label class="collapsible-label" for="wrapper-chat-message-styling-options"><span data-translate="message---styling">💬 Message — 🎨 Styling</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="compact" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="compact-mode-no-space-between-name-and-message">◻️ Compact mode (no space between name and message) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="padding=5" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="increased-vertical-padding">🌌 Increase vertical padding between messages </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="nooutline" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="no-text-outlining">〰️ No text outlining </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hideshadow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="no-alternating-background-shading">⭕👥 No alternating background shading </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="nomemberhighlight" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="no-background-shading-for-members">⭕👤 No background shading for members </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="nodonohighlight" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="no-background-shading-for-donations">⭕💰 No background shading for donations </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="unhighlight" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="no-background-shading-for-past-selected">⭕🔦 No background shading for past-selected </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="nofeaturedhightlight" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="no-background-shading-for-any-selected">⛔🔦 No background shading for any selected </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="trivialevents" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="trivial-shading-events">🤏🕶️ Allow background shading for trivial events </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="largeavatar" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img src="./sources/images/unknown.png" class="icon" /><span data-translate="large-avatar-profile-pic-on-left-side"> Large avatar profile pic on left side </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="emoji" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-emojis-larger">😊 Make emojis larger </span>
                                </div>
                                <div>
                                    <label class="switch" title="larger twitch post images, instagram images, giphy images (not emojis)">
                                        <input type="checkbox" data-param1="largecontent" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-content-images-larger-giphyetc">🖼️ Make content-images larger (giphy,etc) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="twolines" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="message-appears-on-its-own-line-under-name"> ═ Message appears on its own line under name </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="split" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="split-mode-messages-align-relative-to-center">✂️ Split mode (messages align relative to center) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="bubble" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="turn-message-portion-into-a-rounded-bubble">💭 Turn message portion into a rounded bubble </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="horizontal" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="horizontal-scrolling-messages"> ↔️ Horizontal scrolling messages </span>
                                </div>
								 <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="trim=200" />
                                        <span class="slider round"></span>
                                    </label>
                                    ✂️ <span data-translate="trim-mesages-to-200">Trim messages to 200 characters... </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="fixed" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-overlap-on-another">⤵️ Messages overlap on another </span>
                                </div>
                                <div>
                                    <span data-translate="font-family">
                                        Font Family
                                    </span>
                                    <select data-optionparam1="font">
                                        <option value="Sora" style="font-family: 'Sora';">Sora - abc123XYZ</option>
                                        <option value="opendyslexic" style="font-family: 'opendyslexic';">Open Dyslexic - abc123XYZ</option>
                                    </select>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Load a font family from Google Fonts">
                                    <input type="text" id="googlefont" class="textInput instant" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textparam1="googlefont" />
                                    <label for="googlefont"><span data-translate="googlefont">&gt; a specify a Google Font name</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-message-effects-options" />
                    <label class="collapsible-label" for="wrapper-chat-message-effects-options"><span data-translate="message---effects">💬 Message — ✨ Effects</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="fadein" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-fade-in"> Messages fade in </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="fadeout" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-fade-out-when-hiding"> Messages fade out when hiding </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="swipeleft" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-slide-in-from-the-right"> Messages slide in from the right </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="smooth" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-smoothly-scroll-in"> Messages smoothly scroll in </span>
                                </div>

                                <h3>Advanced animation options can be set below.</h3>
                                <i>
                                    <p>
                                        These may override the basic transition options listed above.
                                    </p>
                                    <p>For more details about these effects, <a href="https://github.com/steveseguin/animate.mit.css#animatemitcss" target="_blank">visit here</a>.</p>
                                </i>
                                <br />
                                <div>
                                    <span data-translate="animate-in">
                                        Animate in effects
                                    </span>
                                    <select data-optionparam1="animatein">
                                        <option value="">none</option>
                                        <!-- Fading Entrances -->
                                        <option value="fadeIn">fadeIn</option>
                                        <option value="fadeInDown">fadeInDown</option>
                                        <option value="fadeInDownBig">fadeInDownBig</option>
                                        <option value="fadeInLeft">fadeInLeft</option>
                                        <option value="fadeInLeftBig">fadeInLeftBig</option>
                                        <option value="fadeInRight">fadeInRight</option>
                                        <option value="fadeInRightBig">fadeInRightBig</option>
                                        <option value="fadeInUp">fadeInUp</option>
                                        <option value="fadeInUpBig">fadeInUpBig</option>
                                        <option value="fadeInTopLeft">fadeInTopLeft</option>
                                        <option value="fadeInTopRight">fadeInTopRight</option>
                                        <option value="fadeInBottomLeft">fadeInBottomLeft</option>
                                        <option value="fadeInBottomRight">fadeInBottomRight</option>

                                        <!-- Lightspeed Entrances -->
                                        <option value="lightSpeedInRight">lightSpeedInRight</option>
                                        <option value="lightSpeedInLeft">lightSpeedInLeft</option>

                                        <!-- Rotating Entrances -->
                                        <option value="rotateIn">rotateIn</option>
                                        <option value="rotateInDownLeft">rotateInDownLeft</option>
                                        <option value="rotateInDownRight">rotateInDownRight</option>
                                        <option value="rotateInUpLeft">rotateInUpLeft</option>
                                        <option value="rotateInUpRight">rotateInUpRight</option>

                                        <!-- Zooming Entrances -->
                                        <option value="zoomIn">zoomIn</option>
                                        <option value="zoomInDown">zoomInDown</option>
                                        <option value="zoomInLeft">zoomInLeft</option>
                                        <option value="zoomInRight">zoomInRight</option>
                                        <option value="zoomInUp">zoomInUp</option>

                                        <!-- Sliding Entrances -->
                                        <option value="slideInDown">slideInDown</option>
                                        <option value="slideInLeft">slideInLeft</option>
                                        <option value="slideInRight">slideInRight</option>
                                        <option value="slideInUp">slideInUp</option>

                                        <!-- Back Entrances -->
                                        <option value="backInDown">backInDown</option>
                                        <option value="backInLeft">backInLeft</option>
                                        <option value="backInRight">backInRight</option>
                                        <option value="backInUp">backInUp</option>

                                        <!-- Bouncing Entrances -->
                                        <option value="bounceIn">bounceIn</option>
                                        <option value="bounceInDown">bounceInDown</option>
                                        <option value="bounceInLeft">bounceInLeft</option>
                                        <option value="bounceInRight">bounceInRight</option>
                                        <option value="bounceInUp">bounceInUp</option>
                                    </select>
                                </div>
                                <br />
                                <div>
                                    <span data-translate="animate-out">
                                        Animate out effects
                                    </span>
                                    <select data-optionparam1="animateout">
                                        <option value="">none</option>
                                        <!-- Fading Exits -->
                                        <option value="fadeOut">fadeOut</option>
                                        <option value="fadeOutDown">fadeOutDown</option>
                                        <option value="fadeOutDownBig">fadeOutDownBig</option>
                                        <option value="fadeOutLeft">fadeOutLeft</option>
                                        <option value="fadeOutLeftBig">fadeOutLeftBig</option>
                                        <option value="fadeOutRight">fadeOutRight</option>
                                        <option value="fadeOutRightBig">fadeOutRightBig</option>
                                        <option value="fadeOutUp">fadeOutUp</option>
                                        <option value="fadeOutUpBig">fadeOutUpBig</option>
                                        <option value="fadeOutTopLeft">fadeOutTopLeft</option>
                                        <option value="fadeOutTopRight">fadeOutTopRight</option>
                                        <option value="fadeOutBottomRight">fadeOutBottomRight</option>
                                        <option value="fadeOutBottomLeft">fadeOutBottomLeft</option>

                                        <!-- Fun Exits -->
                                        <option value="hinge">hinge</option>

                                        <!-- Lightspeed Exits -->
                                        <option value="lightSpeedOutRight">lightSpeedOutRight</option>
                                        <option value="lightSpeedOutLeft">lightSpeedOutLeft</option>

                                        <!-- Rotating Exits -->
                                        <option value="rotateOut">rotateOut</option>
                                        <option value="rotateOutDownLeft">rotateOutDownLeft</option>
                                        <option value="rotateOutDownRight">rotateOutDownRight</option>
                                        <option value="rotateOutUpLeft">rotateOutUpLeft</option>
                                        <option value="rotateOutUpRight">rotateOutUpRight</option>

                                        <!-- Zooming Exits -->
                                        <option value="zoomOut">zoomOut</option>
                                        <option value="zoomOutDown">zoomOutDown</option>
                                        <option value="zoomOutLeft">zoomOutLeft</option>
                                        <option value="zoomOutRight">zoomOutRight</option>
                                        <option value="zoomOutUp">zoomOutUp</option>

                                        <!-- Sliding Exits -->
                                        <option value="slideOutDown">slideOutDown</option>
                                        <option value="slideOutLeft">slideOutLeft</option>
                                        <option value="slideOutRight">slideOutRight</option>
                                        <option value="slideOutUp">slideOutUp</option>

                                        <!-- Back Exits -->
                                        <option value="">None</option>
                                        <option value="backOutDown">backOutDown</option>
                                        <option value="backOutLeft">backOutLeft</option>
                                        <option value="backOutRight">backOutRight</option>
                                        <option value="backOutUp">backOutUp</option>

                                        <!-- Bouncing Exits -->
                                        <option value="bounceOut">bounceOut</option>
                                        <option value="bounceOutDown">bounceOutDown</option>
                                        <option value="bounceOutLeft">bounceOutLeft</option>
                                        <option value="bounceOutRight">bounceOutRight</option>
                                        <option value="bounceOutUp">bounceOutUp</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-chat-message-export-options" />
                    <label class="collapsible-label" for="wrapper-chat-message-export-options"><span data-translate="message---export">💬 Message — 📄 Export</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <div title="You must press the save button, in the dock menu bar, to specify where to save before it will start saving">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="savesingle" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="save-last-message-to-a-file">💾 Save last message to a file </span>
                                </div>
                                <div title="You must press the save button, in the dock menu bar, to specify where to save before it will start saving">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="savefeatured" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="save-featured-message-to-a-file">💾 Save featured message to file </span>
                                </div>
                                <div
                                    title="When you get new mesages in the dock, they will be continuously saved to a file on disk; the default downloads folder of the browser/app, such as chrome://downloads. Reloading the dock page finishes the saving, closing the file and making it accessible."
                                >
                                    <label class="switch">
                                        <input type="checkbox" data-param1="save" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="save-messages-to-disk">💾 Auto-save messages to downloads folder </span>
                                </div>
                                <div title="When saving messages to disk, include the photo URL of the user to disk also; data-blob in cases when that's all that's available.">
                                    <label class="switch">
                                        <input type="checkbox" data-param1="saveimg" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="save-image-url-also">😁 Include the user's avatar URL/Blob </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-hostbot-options" />
                    <label class="collapsible-label" for="wrapper-hostbot-options"><span data-translate="identify-hosts">👁️ Options — 🦸 Host, mod, streambots, VIPs</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group streaming_chat">
                                <a class="options-link rounded_area" href="#botnamesext" title="Jump to the new way to specify host/bot names.">
                                    <span data-translate="replacement">🔗 jump to section to specify host/bot/privileged users..</span>
                                </a>
                                <br />
                                <br />
								<p>
									<i>Note:</i> Bots referenced here are third-party stream bot and not in reference to our own local LLM bots.
								</p>
								<br />
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidebotnames" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="delete-names-for-specified-host-or-bots">🤖🔤 Delete names for host or bots </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="hidebots" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-show-host-or-bot-messages">🤖🚫 Do not show host or bot messages </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="autofeaturepriv" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="auto-feature-privileged-users">🤴 Auto-feature messages from privileged users </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param1="startstop" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="allow-admins-to-start-stop-obs">🤖💪 Allow privileged users to !start or !stop OBS </span>
                                </div>
                                <i><small>Note: Remote OBS control requires the dock.html to be added to OBS as a browser source, with full permissions enabled for it.</small></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="link" title="This link will only show selected messages, one at a time. Requires the dock to select messages.">
                <h2 class="single_message_title">
                    <span data-translate="featured-chat-overlay">Featured chat overlay </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
                    <a class="options-link rounded_area" href="#single-message-options" title="Jump to single message overlay link options."><span data-translate="options">[options]</span></a>
                </h2>
                <div id="overlay" data-raw="" class="single_message"></div>
            </div>
            <a href="" id="single-message-options"></a>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-featured-overlay-options" />
                    <label class="collapsible-label" for="wrapper-featured-overlay-options"><span data-translate="overlay">🖼️ Overlay</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group single_message">
                                <div title="Zoom out of overlay by 2x.">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="scale=0.5" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-overlay-smaller">🔍 Make overlay smaller </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="chroma" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="green-page-background">🟢 Green page background </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="center" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="split-mode-align-overlay-to-center">✂️ Split mode (align overlay to center) </span>
                                </div>
                                <div title="Raise offset of overlay by 100px.">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="offset=100" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="raise-overlay-higher">⬆️ Raise overlay higher </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-featured-mechanics-options" />
                    <label class="collapsible-label" for="wrapper-featured-mechanics-options"><span data-translate="mechanics">⚙️ Mechanics</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group single_message">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="showtime" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-overlay-after-20s">
                                        ⏲️ Auto-hide message after <input type="number" style="max-width: 8ch;" max="999999" min="1" value="20000" size="6" data-numbersetting2="showtime" />ms
                                    </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="queuetime" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="queue-time">
                                        ⌚ Queue + Show messages for at least <input type="number" style="max-width: 8ch;" max="999999" min="1" value="10000" size="6" data-numbersetting2="queuetime" />ms
                                    </span>
                                </div>
                                <div title="Note: You must first interact with the dock-page for any audio to be audible.">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="beep" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="beep-when-there-is-a-new-message">🔔 Beep when there is a new message </span>		
                                </div>
                                <div title="Lower the beep's volume by 50%">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="beepvolume=30" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="reduce-the-beeps-volume">🔔🔉 Reduce the beep's volume to 30% </span>
                                </div>

                                <div class="textInputContainer" style="width: 95%;" title="Specify a URL for a custom beep audio file">
                                    <input type="text" id="custombeep2" class="textInput instant" autocomplete="off" placeholder="eg: https://www.yourdomain.com/beep.wav" data-textparam2="custombeep" />
                                    <label for="custombeep2"><span data-translate="custombeep">&gt; URL for custom beep audio file</span></label>												 
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="alignright" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-align-right">👉🧱 Messages align to the right-side </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="rtl" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="text-align-right">🗨️🧱 Force right-to-left text reading </span>
                                </div>
                                <div title="Using the dock is the recommended way to auto-show messages">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="autoshow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="text-align-right">🌠🌠 Auto-show messages without needing the dock </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="stack" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="messages-stack">
                                        🥞 Old messages stay and stack (WIP)<br />
                                        (I'd suggest you use the dock link instead for stacking multiple messages)
                                    </span>
                                </div>
                                <div title="Only others on the same network/computer as yours can connect to this via p2p">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="lanonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="allow-lan-only-p2p-connections">🖥️💻 P2P connections via LAN only </span>
                                </div>
                                <div title="To use, you must click on the page when it opens and select where to save the image for this to work">
                                    <label class="switch">
                                        <input type="checkbox" data-param2="saveimage" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="save-image-to-a-file">💾 Save avatar image to disk (click on page to setup) </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			
			 <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-featured-tts-options" />
                    <label class="collapsible-label" for="wrapper-featured-tts-options">🗣️ <span data-translate="text-to-speech">Text to Speech</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group single_message">

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="speech" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-text-to-speech">🗣️ Enable text-to-speech </span>									  
                                </div>
								<br />
								<i>note: the free built-in TTS plays out via the default audio device.</i>
								<br />
								<br />
                                <div>
                                    <select id="languageSelect2" data-optionparam2="lang" title="Select the default text to speech language"> </select>								 
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="ttsdonos" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-text-to-speech-for-donations-only">🗣️💰 Enable text-to-speech for donations only </span>
                                </div>
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="ttsnewmembers" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-text-to-speech-for-new-members-only">🗣️🆕 Enable text-to-speech for new members only </span>
                                </div>
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="ttsclicked" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-text-to-speech-for-clicked-only">🗣️🖱️ Enable text-to-speech for clicked messages only </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="simpletts" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-say-says-or-someone-says-with-tts">🗣️ Do not say "says" or "someone says" with TTS </span> 
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="simpletts2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-read-out-chatname-and-someone-says-when-using-tts">🗣️ Do not read out chatname and "someone says" when using TTS. </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="readouturls" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="read-out-urls">🗣️ Read out URLs rather than saying "link". </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="rate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="custom-tts-rate">
                                        ⏩ Custom speaking rate for the TTS
                                        <input type="number" style="max-width: 6ch;" step="0.01" max="10" min="0.1" value="1.0" size="5" data-numbersetting2="rate" />
                                    </span>
                                </div>

								<br />
								<!-- Google TTS Options -->
								<div class="tts-provider-options">
									<h4>Google TTS Options</h4>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="googleAPIKey2" class="textInput instant" autocomplete="off" placeholder="Your Google API Key" data-textparam2="ttskey" />
										<label for="googleAPIKey"><span data-translate="google-api-key">Google API Key</span></label>
									</div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="googleVoiceName2" class="textInput instant" autocomplete="off" placeholder="e.g., en-GB-Standard-A" data-textparam2="voice" />
										<label for="googleVoiceName"><span data-translate="google-voice-name">Google Voice Name</span></label>
									</div>
								</div>
								<br />
								<!-- ElevenLabs TTS Options -->
								<div class="tts-provider-options">
									<h4>ElevenLabs TTS Options</h4>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="elevenLabsKey2" class="textInput instant" autocomplete="off" placeholder="Your ElevenLabs API Key" data-textparam2="elevenlabskey" />
										<label for="elevenLabsKey"><span data-translate="elevenlabs-api-key">ElevenLabs API Key</span></label>
									</div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="elevenLabsVoiceID2" class="textInput instant" autocomplete="off" placeholder="e.g., VR6AewLTigWG4xSOukaG" data-textparam2="voice" />
										<label for="elevenLabsVoiceID"><span data-translate="elevenlabs-voice-id">ElevenLabs Voice ID</span></label>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param2="latency" />
											<span class="slider round"></span>
										</label>
										<span data-translate="elevenlabs-latency">
											🚀 ElevenLabs Latency Optimization
											<input type="number" style="max-width: 6ch;" step="1" max="4" min="0" value="0" size="5" data-numbersetting="latency" />
										</span>
									</div>
								</div>
								<br />
								<!-- Speechify TTS Options -->
								<div class="tts-provider-options">
									<h4>Speechify TTS Options</h4>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="speechifyAPIKey2" class="textInput instant" autocomplete="off" placeholder="Your Speechify API Key" data-textparam2="speechifykey" />
										<label for="speechifyAPIKey"><span data-translate="speechify-api-key">Speechify API Key</span></label>
									</div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="speechifyVoiceID2" class="textInput instant" autocomplete="off" placeholder="e.g., henry" data-textparam2="voice" />
										<label for="speechifyVoiceID"><span data-translate="speechify-voice-id">Speechify Voice ID</span></label>
									</div>
								</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-featured-visibility-options" />
                    <label class="collapsible-label" for="wrapper-featured-visibility-options"><span data-translate="visibility">👁️ Visibility</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group single_message">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="showsource" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-source-icon-eg">🛈 Show source icon (e.g, </span><img src="./sources/images/twitch.png" class="icon" /><img src="./sources/images/youtube.png" class="icon" />
                                    <img src="./sources/images/instagramlive.png" class="icon" />)
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="hidetwitch" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-twitch">🚫<img src="./sources/images/twitch.png" class="icon" /> Hide Twitch messages (other sources allowed)</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="onlytwitch" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-twitch-only">✅<img src="./sources/images/twitch.png" class="icon" /> Only show Twitch messages (no other sources)</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="branded" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-channel-icon">📺 Show channel icon </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="noavatar" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-avatars">🆔 Hide avatars </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="nobadges" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-badges">🔰 Hide badges </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="hidedonations" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-donations">💸 Hide Donations </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="firstnames" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="use-first-names-only">🔤 Use first names only </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="hidenames" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="delete-names-entirely">🅰️ Delete names entirely </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="donosonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="donos-only">🪙 Only show if includes a donation </span>
                                </div>

                                <div class="textInputContainer" style="display: inline-block; width: 250px;">
                                    <input type="text" id="filterfeaturedusers" class="textInput" autocomplete="off" placeholder="eg: name,name2:source,bob:twitch,Name3:*" data-textparam2="filterfeaturedusers" />
                                    <label for="filterfeaturedusers"><span data-translate="filter-featured-users">&gt;Whitelist of allowed featured users</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-featured-styling-options" />
                    <label class="collapsible-label" for="wrapper-featured-styling-options"><span data-translate="styling">🎨 Styling</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group single_message">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="aligntop" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="align-comment-to-top">🔝 Align comment to top </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="rounded=10" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="round-edges">⬛➡️⚫ Round edges </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="fontfit" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="round-edges">🆎 Reduce font-size if message gets too long </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="color" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="color-names-if-original-name-color-available">📛 Color names if original name color available </span>
                                </div>

                                <h3><span data-translate="colors">Colors</span></h3>

                                <div class="textInputContainer" style="width: 70%; display:inline-block;margin-right:5px;">
                                    <input type="text" data-palette="comment_color_pallette" id="comment_color" class="textInput" autocomplete="off" placeholder="Type #HEX value or color name" data-textsetting="comment_color" />
									
                                    <label for="comment_color"><span data-translate="comment-font-color">&gt; Comment font color</span></label>
                                </div>
								<input type="color" data-color="comment_color" id="comment_color_pallette" class="colorPicker" style="display: inline-block; cursor: pointer; width: 27px; height: 27px; vertical-align: middle; padding: 0px; z-index: 99; background-color: rgba(0, 0, 0, 0);">

                                <div class="textInputContainer" style="width: 70%; display:inline-block;margin-right:5px;">
                                    <input type="text" data-palette="comment_background_pallette" id="comment_background" class="textInput" autocomplete="off" placeholder="Type #HEX value or color name" data-textsetting="comment_background" />
                                    <label for="comment_background"><span data-translate="comment-background-color">&gt; Comment background color</span></label>
                                </div>
								<input type="color" data-color="comment_background" id="comment_background_pallette"  class="colorPicker" style="display: inline-block; cursor: pointer; width: 27px; height: 27px; vertical-align: middle; padding: 0px; z-index: 99; background-color: rgba(0, 0, 0, 0);">
								
                                <div class="textInputContainer" style="width: 70%; display:inline-block;margin-right:5px;">
                                    <input type="text" data-palette="name_color_pallette" id="name_color" class="textInput" autocomplete="off" placeholder="Type #HEX value or color name" data-textsetting="name_color" />
                                    <label for="name_color"><span data-translate="default-name-font-color">&gt; Default name font color</span></label>
                                </div>
								<input type="color" data-color="name_color" id="name_color_pallette"  class="colorPicker" style="display: inline-block; cursor: pointer; width: 27px; height: 27px; vertical-align: middle; padding: 0px; z-index: 99; background-color: rgba(0, 0, 0, 0);">

                                <div class="textInputContainer" style="width: 70%; display:inline-block;margin-right:5px;">
                                    <input type="text" data-palette="name_background_pallette" id="name_background" class="textInput" autocomplete="off" placeholder="Type #HEX value or color name" data-textsetting="name_background" />
                                    <label for="name_background"><span data-translate="name-background-color">&gt; Name background color</span></label>
                                </div>
								<input type="color" data-color="name_background" id="name_background_pallette" class="colorPicker" style="display: inline-block; cursor: pointer; width: 27px; height: 27px; vertical-align: middle; padding: 0px; z-index: 99; background-color: rgba(0, 0, 0, 0);">

                                <div>
                                    <span data-translate="font-family">
                                        Font Family
                                    </span>
                                    <select data-optionparam2="font">
                                        <option value="Sora" style="font-family: 'Sora';">Sora - abc123XYZ</option>
                                        <option value="opendyslexic" style="font-family: 'opendyslexic';">Open Dyslexic - abc123XYZ</option>
                                    </select>
                                </div>

                                <div class="textInputContainer" style="width: 95%;" title="Load a font family from Google Fonts">
                                    <input type="text" id="googlefont2" class="textInput instant" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textparam2="googlefont" />
                                    <label for="googlefont2"><span data-translate="googlefont">&gt; a specify a Google Font name</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-featured-effects-options" />
                    <label class="collapsible-label" for="wrapper-featured-effects-options"><span data-translate="effects">✨ Effects</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group single_message">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param2="fade" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="fade-inout-instead"> Fade in/out instead </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="link" title="This link will only show the inbound emotes, bouncing them around the full page.">
                <h2 class="emotes_wall_title">
					
                    <span data-translate="emotes-wall">Emotes wall </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#emote-wall-options" title="Jump to the emote wall link options."><span data-translate="options">[options]</span></a>
                </h2>
                <div id="emoteswall" data-raw="" class="emotes_wall"></div>
            </div>
            <a href="" id="emote-wall-options"></a>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-emote-general-options" />
                    <label class="collapsible-label" for="wrapper-emote-general-options"><span data-translate="general">😀 General</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group emotes_wall">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="hidedupes" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-duplicate-emotes-per-message">👯🚫 Filter out duplicate emotes per message </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="limit=10" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="limit-to-10-emotes-at-a-time">🔢 Limit to 10 emotes at a time </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="showtime=20000" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="show-messages-for-20s-rather-than-5s">⏳ Show messages for 20s, rather than 5s. </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="speed=2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="double-the-emotes-movement-speed">⏩ Double the emotes' movement speed </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="scale=0.5" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-all-emojis-half-the-size">🤏 Make all emojis half the size </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="scale=2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-all-emojis-twice-the-size">🐘 Make all emojis twice the size </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="membersonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="only-show-memeber-emotes">👑 Only show emojis from members (paid subs) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="hidereplies" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="exclude-message-replies-emojies">🗣🚫️ Exclude message @replies emojies </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="floatup" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="emotes-float-up">🎈 Emotes float up, rather than bounce around </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param3="bademotes" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;">
                                        <input type="text" id="bademotes" class="textInput" autocomplete="off" placeholder="Provide emotes to filter out." data-textparam3="bademotes" />
                                        <label for="bademotes"><span data-translate="bademotes-list">&gt; Emotes to filter out. eg: 🍆💩</span></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="link" title="This link shows a score for recent chat activity per chat source">
                <h2 class="hype_mode_title">
                    <span data-translate="hype-meter">Hype Meter </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#hype-meter" title="Jump to the hype meter link options."><span data-translate="options">[options]</span></a>
					
                </h2>
                <h3>
                    <span data-translate="when-enabled-a-tally-score-of-unique-names-per-chat-source-is-tracked-stopstart-to-reset-the-tally">
                        When enabled, a tally score of unique names per chat source is tracked. Stop/start to reset the tally.
                    </span>
                </h3>
                <div id="hypemeter" data-raw="" class="hype_meter"></div>
            </div>
            <a href="" id="hype-meter"></a>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-hype-general-options" />
                    <label class="collapsible-label" for="wrapper-hype-general-options"><span data-translate="enable-and-customize">📊 Enable and customize</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group hyper_meter">
                                <h3><span data-translate="must-enable-the-trigger-to-use">Must enable the trigger to use</span></h3>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="hypemode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-the-hype-meters-processing">🚦 Enable the hype meter's processing </span>
                                </div>
                                <h3><span data-translate="other-customization-options">Other customization options</span></h3>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="alignright" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="align-overly-to-the-right-side">➡️ Align overlay to the right-side </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="nooutline" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="disable-text-outlining">🔳 Disable text outlining </span>
                                </div>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="scale=2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="magnify-the-view-larger-fontimages">🔍➕ Magnify the view (larger font/images) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="scale=0.77" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-the-font-icons-and-menu-smaller">🔎➖ Make the font, icons, and menu smaller </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="transparent" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="force-transparent-background">⭕ Force transparent background </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="opacity=0.3" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-entire-page-partially-transparent">👻 Make entire page partially transparent </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="hidetitle" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-show-the-sub-title">🧹 Do not show the sub-title </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param4="lightmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="light-mode--black-text-white-outline">⚪ Light mode — Black text, white outline </span>
                                </div>
                                <div>
                                    <span data-translate="font-family">
                                        Font Family
                                    </span>
                                    <select data-optionparam4="font">
                                        <option value="Sora" style="font-family: 'Sora';">Sora - abc123XYZ</option>
                                        <option value="opendyslexic" style="font-family: 'opendyslexic';">Open Dyslexic - abc123XYZ</option>
                                    </select>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Load a font family from Google Fonts">
                                    <input type="text" id="googlefont4" class="textInput instant" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textparam4="googlefont" />
                                    <label for="googlefont4"><span data-translate="googlefont">&gt; a specify a Google Font name</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="link" title="This link shows a list of names representing users in a waiting list">
                <h2 class="waitlist_mode_title">
                    <span data-translate="wait-list">Wait List / Winner Draw</span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#waitlist" title="Jump to the waitlist link options."><span data-translate="options">[options]</span></a>
                </h2>
                <h3>
                    <span data-translate="when-enabled-guests-can-type">When enabled, guests can type </span>
                    <i>
                        <b><span data-translate="join">!join</span></b>
                    </i>
                    <span data-translate="in-chat-to-be-added-to-an-ordered-list-of-users-stopstart-to-reset-the-queue"> (or a custom command) in chat to be added to an ordered list of users. Stop/start to reset the queue/draw.</span>
                </h3>
                <div id="waitlist" data-raw="" class="waitlist"></div>
            </div>
            <a href="" id="wait-list"></a>
            <div class="wrapper hidden" id="waitlistbuttons">
                <span id="drawmode" class="submenubuttons hidden">
                    <button class="glowingButton" data-action="stopentries" title="Stop new entries from being submitted"><span data-translate="trigger-stop-entries">🛑 Stop entries</span></button>
                    <button class="glowingButton" data-action="selectwinner"><span data-translate="trigger-new-selection">✅ Select winner</span></button>
                    <button class="glowingButton" data-action="resetwaitlist"><span data-translate="trigger-waitlist-reset">🧹 Reset draw</span></button>
                    <button class="glowingButton" data-action="downloadwaitlist" title="Download the entries list as a TSV file"><span data-translate="download-waitlist">⬇️ Download list</span></button>
                </span>
                <span id="queuemode" class="submenubuttons">
                    <button class="glowingButton" data-action="stopentries" title="Stop new entries from being submitted"><span data-translate="trigger-stop-entries-queue">🛑 Stop entries</span></button>
                    <button class="glowingButton" data-action="selectwinner"><span data-translate="trigger-new-selection-queue">✅ Select a name</span></button>
                    <button class="glowingButton" data-action="resetwaitlist"><span data-translate="trigger-waitlist-reset-queue">🧹 Reset queue</span></button>
                    <button class="glowingButton" data-action="downloadwaitlist" title="Download the queue list as a TSV file"><span data-translate="download-waitlist">⬇️ Download list</span></button>
                </span>
            </div>
            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-waitlist-general-options" />

                    <label class="collapsible-label" for="wrapper-waitlist-general-options"><span data-translate="enable-and-customize">📊 Enable and customize</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group waitlist">
                                <h3><span data-translate="must-enable-the-trigger-to-use">Must enable the trigger to use</span></h3>
                                <p><span data-translate="enable-the-waitlist-page-and-customize-the-trigger">Enable the waitlist/draw page and customize the !trigger</span></p>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="waitlistmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    🚦
                                    <div class="textInputContainer" style="display: inline-block; width: 215px;">
                                        <input type="text" id="customwaitlistcommand" class="textInput" autocomplete="off" placeholder="Set a different !trigger command here" data-textsetting="customwaitlistcommand" />
                                        <label for="customwaitlistcommand"><span data-translate="enables-the-wait-list-feature">&gt; Enables this page</span></label>
                                    </div>
                                </div>

                                <h3><span data-translate="select-winner-draw">Configure select-a-winner draw mode</span></h3>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="drawmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="configure as winner-draw mode">🏆 Configure as winner-draw mode instead of queue </span>
                                </div>

                                <h3><span data-translate="other-customization-options">Other customization options</span></h3>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="alignright" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="align-overly-to-the-right-side">➡️ Align overlay to the right-side </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="aligncenter" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="align-overly-to-the-center">🎯 Align overlay to the center/middle </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="nooutline" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="disable-text-outlining">🔳 Disable text outlining </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="confetti" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="drop-confetti">🎊 Drop confetti when a name is selected </span>
                                </div>
                                <div title="Note: You must first interact with the page for any audio to be audible.">
                                    <label class="switch">
                                        <input type="checkbox" data-param5="sound" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="sound-when-there-is-selection">🎵 Play a sound when there a name selected </span>
                                </div>
                                <div title="Lower the 🎵's volume by 50%">
                                    <label class="switch">
                                        <input type="checkbox" data-param5="soundvolume=30" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="reduce-the-sounds-volume">🎵🔉 Reduce the sound's volume to 30% </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Specify a URL for a custom sound audio file">
                                    <input type="text" id="customsound" class="textInput instant" autocomplete="off" placeholder="eg: https://www.yourdomain.com/sound.wav" data-textparam5="customsound" />
                                    <label for="customsound"><span data-translate="customsound">&gt; URL for custom sound audio file</span></label>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="scale=2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="magnify-the-view-larger-fontimages">🔍➕ Magnify the view (larger font/images) </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="scale=0.77" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-the-font-icons-and-menu-smaller">🔎➖ Make the font, icons, and menu smaller </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="transparent" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="force-transparent-background">⭕ Force transparent background </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="opacity=0.3" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="make-entire-page-partially-transparent">👻 Make entire page partially transparent </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="hidetitle" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-show-the-queue-instructions">🧹 Do not show the !queue instructions </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="lightmode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="light-mode--black-text-white-outline">⚪ Light mode — Black text, white outline </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-param5="randomize" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="random-list-every-time">🎲 List re-randomizes on every update </span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" data-setting="customwaitlistmessagetoggle" />
                                    <span class="slider round"></span>
                                </label>
                                🪧
                                <div class="textInputContainer" style="display: inline-block; width: 215px;">
                                    <input type="text" id="customwaitlistmessage" class="textInput" autocomplete="off" placeholder="Set custom message / title here" data-textsetting="customwaitlistmessage" />
                                    <label for="customwaitlistmessage"><span data-translate="use-a-custom-message--title">&gt; Use a custom message / title</span></label>
                                </div>

                                <div>
                                    <span data-translate="font-family">
                                        Font Family
                                    </span>
                                    <select data-optionparam5="font">
                                        <option value="Sora" style="font-family: 'Sora';">Sora - abc123XYZ</option>
                                        <option value="opendyslexic" style="font-family: 'opendyslexic';">Open Dyslexic - abc123XYZ</option>
                                    </select>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Load a font family from Google Fonts">
                                    <input type="text" id="googlefont5" class="textInput instant" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textparam5="googlefont" />
                                    <label for="googlefont5"><span data-translate="googlefont">&gt; a specify a Google Font name</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			
			<div class="link" title="Polling system">
                <h2 class="poll_mode_title">
                    <span data-translate="pollmeter">Graphical Poll </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#poll" title="Jump to the poll link options."><span data-translate="options">[options]</span></a>
                </h2>
                <h3>
                    <span data-translate="when-enabled-a-poll">
                       A graphic poll. Users can enter a hash-tagged word to vote it it.
                    </span>
                </h3>
				<div id="poll" data-raw="" class="streaming_chat"><a href="" id="polllink"></a></div>
            </div>
			<div class="wrapper">
				<div class="collapsible">
					<input type="checkbox" class="collapsible-input" id="wrapper-poll-options" />
					<label class="collapsible-label" for="wrapper-poll-options"><span>📊 Poll Options</span></label>
					<div class="collapsible-text">
						<div class="options">
							<div class="options_group poll">
								<h3>Poll Settings</h3>
								<p>Enable and customize the poll:</p>
								<br>
								<div>
									<label class="switch">
										<input type="checkbox" data-target="poll" data-setting="pollEnabled" />
										<span class="slider round"></span>
									</label>
									<span>🚦 Enable Poll</span>
								</div>
								<br>
								<div>
									<label>📊 Poll Type:</label>
									<select data-optionsetting="pollType" data-target="poll" id="pollType">
										<option value="freeform">Free-form</option>
										<option value="yesno">Yes/No</option>
										<option value="multiple">Multiple Choice</option>
									</select>
								</div>
								<br>
								<div>
									<label>🎨 Poll Style/Theme:</label>
									<select data-optionsetting="pollStyle" data-target="poll" id="pollStyle">
										<option value="default">Default</option>
										<option value="neon">Neon</option>
										<option value="minimalist">Minimalist</option>
										<option value="retro-gaming">Retro Gaming</option>
										<option value="elegant">Elegant</option>
										<option value="futuristic">Futuristic</option>
										<option value="vintage">Vintage</option>
										<option value="cyberpunk">Cyberpunk</option>
									</select>
								</div>
								<br>
								<div>
									<label>❔ Poll Question:</label>
									<input type="text" id="pollQuestion" class="textInput" autocomplete="off" placeholder="Enter poll question" data-textsetting="pollQuestion" data-target="poll" />
								</div>
								<br>
								<div id="multipleChoiceOptions" class="hidden">
									<label>🔢 Options (comma separated):</label>
									<input type="text" id="multipleChoiceInput" class="textInput" autocomplete="off" placeholder="Option 1, Option 2, ..." data-textsetting="multipleChoiceOptions" data-target="poll" />
								</div>
								<br>
								<div class="hidden">
									<label>Timer (seconds):</label>
									<input type="number" id="pollTimer" class="textInput" autocomplete="off" placeholder="60" data-textsetting="pollTimer" data-target="poll" />
								</div>
								<div class="hidden">
									<button class="glowingButton" data-action="startPoll" data-target="poll">Start Poll</button>
									<button class="glowingButton" data-action="endPoll" data-target="poll">End Poll</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="link" title="Battle Royal">
                <h2 class="battle_mode_title">
                    <span data-translate="pollmeter">Battle Royal </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#battle" title="Jump to the battle royal link options."><span data-translate="options">[options]</span></a>
                </h2>
                <h3>
                    <span data-translate="when-enabled-a-battle">
                       A battle royal mini game. Users can enter !join to play
                    </span>
                </h3>
				<div id="battle" data-raw="" class="streaming_chat"><a href="" id="battlelink"></a></div>
			</div>
			
			<div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-battle-general-options" />
                    <label class="collapsible-label" for="wrapper-battle-general-options">📊 <span data-translate="options-and-actions">Options and actions</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group battle">
								<div>
										<label class="switch">
											<input type="checkbox" data-param8="lobby" />
											<span class="slider round"></span>
										</label>

										🚦 <span data-translate="enable-the-battle">Host Starts</span>
									
										<button class="glowingButton" style="width: 170px; border: 1px solid #000; padding: 2px;" data-action="startgame">
											<span style="font-size: 0.8em;"><span data-translate="start-game">Start the game</span></span>
										</button>
								</div>
							
								<div>
									<label class="switch">
										<input type="checkbox" data-param8="nocomputers" />
										<span class="slider round"></span>
									</label>
									🚫🤖 <span data-translate="disable-computer-players">Disable computer players</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param8="lobbytime=30" />
										<span class="slider round"></span>
									</label>
									⌚ <span data-translate="auto-start-lobby">Increase lobby wait time to 30s</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="link" title="Customizable ticker banner bar">
                <h2 class="ticker_mode_title">
                    <span data-translate="tickermeter">Ticker </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#ticker" title="Jump to the ticker link options."><span data-translate="options">[options]</span></a>
                </h2>
                <h3>
                    <span data-translate="when-enabled-a-ticker">
                       A ticker banner. Select the source for the ticker text messages
                    </span>
                </h3>
				<div id="ticker" data-raw="" class="streaming_chat"><a href="" id="tickerlink"></a></div>
            </div>
            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-ticker-general-options" />
                    <label class="collapsible-label" for="wrapper-ticker-general-options"><span data-translate="enable-and-customize">📊 Enable and customize</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group ticker">
                                <h3><span data-translate="must-enable-the-trigger-to-use">Must enable the trigger to use</span></h3>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="ticker" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-the-ticker">🚦 Enable </span>
									<div>
										<button class="glowingButton" style="width: 270px; border: 1px solid #000; padding: 12px;margin-top:10px;" data-action="loadtickerfile">
											<span style="font-size: 0.8em;"><span data-translate="choose-location">📄 Select the ticker source file</span></span>
										</button>
									</div>
                                </div>
								
                                <h3><span data-translate="other-customization-options">Other customization options</span></h3>
                                <div>
                                    <span data-translate="font-family">
                                        Font Family
                                    </span>
                                    <select data-optionparam6="font">
                                        <option value="Sora" style="font-family: 'Sora';">Sora - abc123XYZ</option>
                                        <option value="opendyslexic" style="font-family: 'opendyslexic';">Open Dyslexic - abc123XYZ</option>
                                    </select>
                                </div>
                                <div class="textInputContainer" style="width: 95%;" title="Load a font family from Google Fonts">
                                    <input type="text" id="googlefont6" class="textInput instant" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textparam6="googlefont" />
                                    <label for="googlefont6"><span data-translate="googlefont">&gt; a specify a Google Font name</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			
			<div class="link" title="Custom GIF Commands">
				<h2 class="custom_gif_commands_title">
					<span data-translate="custom-gif-commands">Custom GIF Commands </span>
					<a class="copy-link rounded_area" title="Copy link to clipboard" data-copy="true"><span data-translate="copy">[copy link]</span></a>
					<a class="options-link rounded_area" href="#custom-gif-commands" title="Jump to the custom GIF commands options."><span data-translate="options">[options]</span></a>
				</h2>
				<h3>
					<span data-translate="when-enabled-custom-commands">
						When enabled, custom commands will trigger specific GIFs or media in the overlay.
					</span>
				</h3>
				<div id="custom-gif-commands" data-raw="" class="streaming_chat"><a href="" id="custom-gif-commands-link"></a></div>
			</div>

			<div class="wrapper">
				<div class="collapsible">
					<input type="checkbox" class="collapsible-input" id="wrapper-custom-gif-commands-options" />
					<label class="collapsible-label" for="wrapper-custom-gif-commands-options"><span data-translate="enable-and-customize">📊 Enable and customize</span></label>
					<div class="collapsible-text">
						<div class="options">
							<div class="options_group custom_gif_commands">
								<h3><span data-translate="custom-gif-commands-settings">Custom GIF Commands Settings</span></h3>
								<div>
									<label class="switch">
										<input type="checkbox" data-setting="enableCustomGifCommands" />
										<span class="slider round"></span>
									</label>
									<span data-translate="enable-custom-gif-commands">🚦 Enable Custom GIF Commands</span>
								</div>
								
								<div id="customGifCommandsList"></div>
								
								<button class="glowingButton" id="addCustomGifCommand" style="margin-top: 10px; width: 200px;">
									<span data-translate="add-new-command">+ Add New Command</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>

            <div class="generic_category_title">
                <h2>
                    <span data-translate="global-settings-and-tools">Global settings and tools </span>
                    <a class="options-link rounded_area" href="#global-settings-and-tools-options" title="Jump to the global settings and tools."><span data-translate="options">[options]</span></a>
                </h2>
                <div id="globalsettings" class="global_settings"></div>
            </div>
            <a href="" id="global-settings-and-tools-options"></a>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-additional-chat-services-options" />
                    <label class="collapsible-label" for="wrapper-additional-chat-services-options">
                        <span data-translate="optional-chat-services">🗨️ Optional chat services </span>
						<span class="ssapp">
							<img class="icon" src="./sources/images/discord.png" />
							<img class="icon" src="./sources/images/whatsapp.png" />
							<img class="icon" src="./sources/images/telegram.png" />
							<img class="icon" src="./sources/images/slack.png" />
							...
						</span>
                    </label>

                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <a href="" id="wrapper-additional-chat-services-options-jump"></a>
								<span class="ssapp">
									<h3 class="ssapp><span data-translate="opt-in-options">Opt-in options</span></h3>
									<p><span data-translate="these-services-require-you-to-manually-opt-in-for-security-purposes">These services require you to manually opt-in, for security purposes</span></p>

									<div>
										<label class="switch">
											<input type="checkbox" data-setting="whatsapp" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/whatsapp.png" /><span data-translate="capture-whatsapp-chat"> Capture WhatsApp chat </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="telegram" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/telegram.png" /><span data-translate="capture-telegram-chat"> Capture Telegram chat </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="instagram" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/instagram.png" /><span data-translate="capture-instagram-non-live-comment"> Capture Instagram non-live comment </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="slack" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/slack.png" /><span data-translate="capture-slack-chat"> Capture Slack chat </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="teams" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/teams.png" /><span data-translate="capture-teams-chat"> Capture Teams chat </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="meet" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/meet.png" /><span data-translate="capture-google-meet-chat"> Capture Google Meet chat </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="chime" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/chime.png" /><span data-translate="capture-chime-chat"> Capture Chime chat </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="xcapture" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/x.png" /><span data-translate="x-post-capture"> Enable X.com embedded page features </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="openai" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/openai.png" /><span data-translate="capture-openai-chat"> Capture OpenAI chat </span>
									</div>

									<div>
										<label class="switch">
											<input type="checkbox" data-setting="discord" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/discord.png" /><span data-translate="capture-discord-chat"> Capture Discord chat </span>
									</div>
								</span>
                                <div>
                                    <div class="textInputContainer" style="display: inline-block; width: 275px;">
                                        <input type="text" id="customdiscord" class="textInput" autocomplete="off" placeholder="Provide channel name to allow" data-textsetting="customdiscordchannel" />
                                        <label for="customdiscord"><span data-translate="discord-channel-name-to-allow">&gt; Discord channels to allow (all default)</span></label>
                                    </div>
                                </div>

                                <h3><span data-translate="opt-out-options">Opt-out options</span></h3>
                                <p><span data-translate="disable-chat-services-or-filter-by-specific-channels">Disable chat services or filter by specific channels</span></p>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="customtwitchstate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/twitch.png" style="display: inline-block;" />
                                    <div class="textInputContainer" style="display: inline-block; width: 215px;">
                                        <input type="text" id="customtwitch" class="textInput" autocomplete="off" placeholder="Provide channel name to allow" data-textsetting="customtwitchaccount" />
                                        <label for="customtwitch"><span data-translate="twitch-channel-name-to-allow">&gt; Twitch channel name to allow</span></label>
                                    </div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="customtiktokstate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/tiktok.png" style="display: inline-block;" />
                                    <div class="textInputContainer" style="display: inline-block; width: 215px;">
                                        <input type="text" id="customtiktok" class="textInput" autocomplete="off" placeholder="Provide channel name to allow" data-textsetting="customtiktokaccount" />
                                        <label for="customtiktok"><span data-translate="tiktok-channel-name-to-allow">&gt; Tiktok channel name to allow</span></label>
                                    </div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="customyoutubestate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/youtube.png" /><span data-translate="disable-youtube-chat"> Disable YouTube chat </span>
                                    <div class="textInputContainer hidden" style="display: inline-block; width: 250px;">
                                        <input type="text" id="customyoutube" class="textInput" autocomplete="off" placeholder="Provide channel name to allow" data-textsetting="customyoutubeaccount" />
                                        <label for="customyoutube"><span data-translate="youtube-channel-name-to-allow">&gt; YouTube channel name to allow</span></label>
                                    </div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="customkickstate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/kick.png" /><span data-translate="disable-kick-chat"> Disable Kick chat </span>
                                    <div class="textInputContainer hidden" style="display: inline-block; width: 250px;">
                                        <input type="text" id="customkick" class="textInput" autocomplete="off" placeholder="Provide channel name to allow" data-textsetting="customkickaccount" />
                                        <label for="customkick"><span data-translate="kick-channel-name-to-allow">&gt; Kick channel name to allow</span></label>
                                    </div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="customriversidestate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/riverside.png" /><span data-translate="disable-riverside-chat"> Disable Riverside </span>
                                    <div class="textInputContainer hidden" style="display: inline-block; width: 250px;">
                                        <input type="text" id="customriverside" class="textInput" autocomplete="off" placeholder="Provide channel name to allow" data-textsetting="customriversideaccount" />
                                        <label for="customriverside"><span data-translate="riverside-channel-name-to-allow">&gt; Riverside channel name to allow</span></label>
                                    </div>
                                </div>
                                <br />
                                <p>
                                    <span data-translate="note-these-opt-out-options-dont-disable-sending-messages">*Note: These opt-out options don't disable sending messages </span><i><span data-translate="to">to</span></i>
                                    <span data-translate="youtube--twitch-just-capture"> Youtube / Twitch; just capture</span>
                                </p>

                                <h3><span data-translate="misc-chat-options">Miscellaneous options for sites</span></h3>
                                <p><span data-translate="misc-chat-options-description">Features, tools, and other odd-ball enhancements</span></p>
                                <div title="If you enable this, it will work even if the extension itself is set to inactive">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="collecttwitchpoints" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/twitch.png" style="display: inline-block;" />🌟 <span data-translate="auto-collect-twitch-points"> Automatically collect Twitch channel points</span>
                                </div>
                                <div title="If you enable this, it will work even if the extension itself is set to inactive">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="twichadmute" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/twitch.png" style="display: inline-block;" />🔇 <span data-translate="auto-mute-twitch-ads"> Automatically mute Twitch video ads</span>
                                </div>
                                <div title="If you enable this, it will work even if the extension itself is set to inactive">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="detweet" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/twitter.png" style="display: inline-block;" /> <span data-translate="twitter-brand-instead-of-x">Use Twitter branding instead of X</span>
                                </div>
                                <div title="Experimental demo options for Stage TEN">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="fancystageten" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/stageten.png" style="display: inline-block;" /> <span data-translate="enable-demo-option-for-stageten">Stage TEN demo feature mode</span>
                                </div>
                                <div title="Flip Youtube watch page layout">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="flipYoutube" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/youtube.png" style="display: inline-block;" /> <span data-translate="flip-youtube-layout">Flip the Youtube watch page layout</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-global-mechanics-options" />
                    <label class="collapsible-label" for="wrapper-global-mechanics-options"><span data-translate="mechanics">⚙️ Mechanics</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <div title="Capture likes, subs, and other available event data.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="captureevents" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="capture-stream-events-and-actions"> Capture stream events and actions </span>
                                </div>
                                <div title="By default all inbound messages are saved to a local database for later look-up reference">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="disableDB" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="disable-store-messages-in-local-database"> 🚫🗄️ Disable the local message database </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="filtereventstoggle" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;" title="Provide comma separated values; values that match a word in the event will be rejected. eg: joined,banned,gifted">
                                        <input type="text" id="filterevents" class="textInput" autocomplete="off" placeholder="Text to match for.." data-textsetting="filterevents" />
                                        <label for="filterevents"><span data-translate="hide-specific-events">&gt; Hide specific events</span></label>
                                    </div>
                                </div>
                                <div title="Don't block 'joined' stream events in TikTok">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="capturejoinedevent" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/tiktok.png" style="display: inline-block;" />🚪
                                    <span data-translate="capture-joined-events"> Don't block "joined" stream events (TikTok) </span>
                                </div>
                                <div title="Block donations/memberships from Youtube Shorts. Requires &shorts added to the Youtube chat pop out also.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="blockpremiumshorts" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/youtubeshorts.png" style="display: inline-block;" />
                                    <span data-translate="block-dono-shorts"> Block donos/memberships from Youtube Shorts </span>
                                </div>
								<div title="Delay capturing messages from Youtube to give time for messages to be deleted if needed; 3 extra seconds of delay">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="delayyoutube" />
                                        <span class="slider round"></span>
                                    </label>
                                    <img class="icon" src="./sources/images/youtube.png" style="display: inline-block;" />
                                    <span data-translate="delay-youtube"> Delay Youtube to give mods/bots time to delete</span>
                                </div>
                                <div title="Enable BTTV emotes - YT/TW channels + globals">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="bttv" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="add-bttv-to-chat"> 🥵 Add BTTV emotes (global+) </span>
                                </div>
                                <div title="Enable 7TV emotes - YT/TW channels + globals">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="seventv" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="add-7tv-to-chat"> 😱 Add 7TV emotes (global+) </span>
                                </div>
								 <div title="Enable Pronoun support - https://pr.alejo.io/">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="pronouns" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-pronoun support"> 👨‍👩‍👧‍👦 Add user pronouns (Twitch) <a class="options-link rounded_area" href="https://pr.alejo.io/" target="_blank">via third-party</a>  </span>
                                </div>
                                <div title="Mark a message as a memberchat, just because they are a member, rather than just highlighted membership messages">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="allmemberchat" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="all-youtube-member-chat-included"> Any message from a YouTube member is treated as membership chat, not just monthly featured messages </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="addkarma" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-messages-with-bad-karma"> 😈😇 Add sentiment scores to messages </span>
                                </div>
                               
                                <div title="Some sites may wish to access your stream ID for custom third party integrations">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="sharestreamid" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="allow-certain-sites-access-to-your-session-id"> Allow certain sites access to your session ID </span>
                                </div>
                                <div title="Disable the host chat option in the dock and the api. Featured chat remains enabled.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="disablehost" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="disable-host-chat">🚫🗨️ Disable the host chat and block functions </span>
                                </div>
								 <div title="See documentation on socialstream.ninja for details.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="socketserver" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable"> Enable </span>
                                    <a target="_blank" class="options-link rounded_area" id="remote_control_url" href="https://socialstream.ninja/sampleapi.html">
                                        <span data-translate="remote-httpwss-api-control-extension">remote API control of extension</span>
                                    </a>
                                </div>
                                <div title="This is needed if HTTP/WSS commands are being sent to the dock for remote control, to bypass p2p if needed, and to publish featured messages via server instead of P2P">
                                    <label class="switch">
                                        <input type="checkbox" id="server" data-both="server" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="send-featured-chat-via-server-instead-of-p2p">Enable Dock to use and publish via API server</span>
                                </div>
                                <div  title="Mainly useful if P2P not working. It can also be used to send messages to the Dock via the API using channel 3/4">
                                    <label class="switch">
                                        <input type="checkbox" id="server2" data-both="server2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="send-messages-to-dock-via-server-instead-of-p2p">Send messages to Dock from Extension via server</span>
                                </div>
                                <div title="Mainly useful if P2P not working in cases where you want to send messages to a social end point via the Dock page.">
                                    <label class="switch" >
                                        <input type="checkbox" id="server3" data-both="server3" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="dock-sends-its-commands-to-extension-via-server">Dock sends its commands to Extension via server</span>
                                </div>
								<div title="Only others on the same network/computer as yours can connect to this via p2p">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="lanonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="allow-lan-only-p2p-connections">🖥️💻 P2P connections via LAN only </span>
                                </div>
								<div title="Relay messages from other sites to Stage TEN">
									<label class="switch">
										<input type="checkbox" id="s10relay" data-setting="s10relay" />
										<span class="slider round"></span>
									</label>
									<img class="icon" src="./sources/images/stageten.png" style="display: inline-block;" />📨 <span data-translate="send-chat-messages-to-staeten">Send all messages to Stage TEN</span>
								</div>
								<div>	
                                    <label class="switch">
                                        <input type="checkbox" data-setting="s10" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;">
                                        <input type="text" id="s10apikey" class="textInput" autocomplete="off" placeholder="Enter your StageTEN API key here" data-textsetting="s10apikey" />
                                        <label for="s10apikey"><span data-translate="send-all-to-s10-server">&gt; Use the Stage TEN Chat API</span></label>
                                    </div>
                                   
                                </div>
								
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="h2r" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;">
                                        <input type="text" id="h2rserver" class="textInput" autocomplete="off" placeholder="Provide ID or full URL" data-textsetting="h2rserver" />
                                        <label for="h2rserver"><span data-translate="send-all-to-h2r-server">&gt; Send all to H2R server</span></label>
                                    </div>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="post" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;">
                                        <input type="text" id="postserver" class="textInput" autocomplete="off" placeholder="Provide ID or full URL" data-textsetting="postserver" />
                                        <label for="postserver"><span data-translate="send-all-to-post-server">&gt; Send all to POST server</span></label>
                                    </div>
                                </div>

                                <div>
                                    <span data-translate="select-a-different-translation">
                                        Select a different translation
                                    </span>
                                    <select data-optionsetting="translationlanguage">
                                        <option value="">Default</option>
                                        <option value="de" title="German">German</option>
                                        <option value="es" title="Spanish">Spanish</option>
                                        <option value="en-us">English - US</option>
                                        <option value="test">Test Translations</option>
                                    </select>
                                    <br />
                                    <small>
                                        <i><span data-translate="re-open-menu-to-apply-any-langugage-changes-to-it">*Re-open menu to apply any langugage changes to it</span></i>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-global-commands-options" />
                    <label class="collapsible-label" for="wrapper-global-commands-options"><span data-translate="commands">❗ Commands</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="autohi" data-setting="autohi" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="auto-reply-to">👋 Auto-reply to "</span><b><span data-translate="hi">hi</span></b><span data-translate="messages">" messages </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="relaydonos" data-setting="relaydonos" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="announce-donations-across-all-chats">🙏 Announce donations across all chats </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="relayall" data-setting="relayall" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="relay-all-messages-not-recommended">🔀 Relay all messages (!NOT RECOMMENDED!)</span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <label class="switch">
                                        <input type="checkbox" id="limitcharactersstate" data-setting="limitcharactersstate" />
                                        <span class="slider round"></span>
                                    </label>
                                    <input
                                        type="number"
                                        style="max-width: 6ch;"
                                        id="limitcharacters"
                                        max="999"
                                        min="1"
                                        value="200"
                                        size="3"
                                        placeholder="Trim down the max length of dock/relayed chat sent to chat source locations (eg:youtube)"
                                        data-numbersetting="limitcharacters"
                                    />
                                    <label for="limitcharacters"><span data-translate="limit-chat-characeters">🔢 Max length of dock/relayed chat</span></label>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="midi" data-setting="midi" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-midi-hotkeys">🎹 Enable MIDI hotkeys </span>
                                </div>
                                <div>
                                    <button id="midiConfig" class="glowingButton" data-action="loadmidi">
                                        <span><span data-translate="load-config">Load config</span></span>
                                    </button>
                                </div>
                                <div style="display: inline-block;">
                                    <label class="switch">
                                        <input type="checkbox" id="joke" data-setting="joke" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="tell-joke-on">🤪 Tell joke on </span><b><span data-translate="joke">!joke</span></b><span data-translate="message"> message </span>
                                </div>
								<div style="display: inline-block;" title="The user can use !dice 10 to have it out of ten; by default it is out 1 to 6">
                                    <label class="switch">
                                        <input type="checkbox" id="dice" data-setting="dice" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="enable-dice-rolls">🎲 Respond with a random dice roll on !dice</span>
                                </div>
								
                                <div>
                                    <button class="glowingButton" data-action="tellajoke" style="width: 120px;">
                                        <span><span data-translate="tell-a-joke-now">Tell a joke now</span></span>
                                    </button>
                                </div>

                                <h3><span data-translate="giphy-support">Giphy/Tenor support</span></h3>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="giphy" data-setting="giphy" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="include-a-gif-when"> Include a Giphy GIF when </span><b><span data-translate="giphy">!giphy</span></b><span data-translate="is-used"> is used </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="tenor" data-setting="tenor" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="include-a-gif-when"> Include a Tenor GIF when </span><b><span data-translate="tenor">!tenor</span></b><span data-translate="is-used"> is used </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="giphy2" data-setting="giphy2" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="include-a-gif-when"> Include a GIF when </span><b><span data-translate="somekeyword">#{somekeyword}</span></b><span data-translate="is-used"> is used </span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="hidegiphytrigger" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-giphy-trigger"> Hide the Giphy/Tenor trigger word or sentence</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="randomgif" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="random-giphy"> Select random gif from top 10 results</span>
                                </div>
                                <div>
                                    <div class="textInputContainer" style="width: 95%;">
                                        <input type="password" id="giphyKey" class="textInput" autocomplete="off" placeholder="Giphy API Key" data-textsetting="giphyKey" />
                                        <label for="giphyKey"><span data-translate="giphy-api-key-here-if-wanting-giphy-support">&gt; Giphy API key here if wanting Giphy support</span></label>
                                    </div>
                                </div>
                                <a href="https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key" target="_blank">Get a Giphy API key here</a>
                                <div>
                                    <div class="textInputContainer" style="width: 95%;">
                                        <input type="password" id="tenorKey" class="textInput" autocomplete="off" placeholder="Tenor API Key" data-textsetting="tenorKey" />
                                        <label for="tenorKey"><span data-translate="tenor-api-key-here-if-wanting-tenor-support">&gt; Tenor API key here if wanting Tenor support</span></label>
                                    </div>
                                </div>
                                <a href="https://developers.google.com/tenor/guides/quickstart#curl" target="_blank">Get a Tenor API key here</a>

                                <br />
                                <h3><span data-translate="trigger-webhook-url-by-a-command">Trigger webhook URL by a !command</span></h3>
                                <span data-translate="have-custom-chat-commands-poke-a-custom-api-endpoint">
                                    Have custom chat commands poke a custom API endpoint
                                </span>
                                <br />
                                <br />
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="chatwebhookpost" />
                                        <span class="slider round"></span>
                                    </label>
                                    📫 <span data-translate="post-not-get">Use POST instead of GET for webhook calls</span>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="chatwebhookstrict" />
                                        <span class="slider round"></span>
                                    </label>
                                    🎯 <span data-translate="command-match-strict">Trigger only if full message matches exactly</span>
                                </div>

                                <div id="chatCommands"></div>
                                <br />
								
                                <h3><span data-translate="send-fixed-messages-at-intervals">Send fixed messages at intervals</span></h3>
                                
								<span data-translate="specify-frequency-and-starting-offset-of-fixed-messages">
                                    Specify frequency and starting offset of fixed messages
                                </span>
                                <div id="timedMessages"></div>
                                <br />
								<div title="If less than 10 messages total have come in, skip the automated message interval">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="dynamictiming" />
                                        <span class="slider round"></span>
                                    </label>
                                    🦗 <span data-translate="dynamic-timing">Skip auto-message if chat is too quiet</span>
                                </div>
                                <h3><span data-translate="custom-commands">Auto-responder</span></h3>
                                <span data-translate="auto-responder">
                                    Auto-respond to custom chat commands
                                </span>
                                <div id="botReplyMessages"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-global-message-visibility-options" />
                    <label class="collapsible-label" for="wrapper-global-message-visibility-options"><span data-translate="message---visibility">💬 Message — 👁️ Visibility</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
							
								<h3><span data-translate="message-echos">Message doubling / echos / duplicates</span></h3>
								
								<div title="Do not capture your responses that you make to chat. They will be filtered out, so will not appear in the dock">
                                    <label class="switch">
                                        <input type="checkbox" id="hideallreplies" data-setting="hideallreplies" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-all-messages-rplies">💬🚫 Do not capture / show any of your replies</span>
                                </div>
                                <div title="Filter out duplicate messages as a result of you replying to multiple chat sites. Only the first reply is captured">
                                    <label class="switch">
                                        <input type="checkbox" id="firstsourceonly" data-setting="firstsourceonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-duplicate-message-echos">💬💬🚫 Hide duplicates of your replies; show first only</span>
                                </div>
								<div title="Filter out duplicate messages that might occur with a specific source only.">
                                    <label class="switch">
                                        <input type="checkbox" id="noduplicates" data-setting="noduplicates" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-duplicate-message-all">💬💬🚫 Filter out messages that echo / double</span>
                                </div>
								
								<h3><span data-translate="swear-words">Other filters</span></h3>
								
                                <div title="Censor common bad words with asterixis. Create badwords.txt to make your own blacklist.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="blacklist" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="replace-common-swear-words-with-asterixis">🤬🚫 Replace common swear words with asterixis </span>
									
                                </div>
                                <div title="Censor common bad words with asterixis in usernames">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="blacklistname" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="replace-common-swear-in-names">👤🚫 Replace common bad words in user names </span>
                                </div>
                                <div title="Remove original content images from messages (stickers, twitter post images)">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="removeContentImage" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="remove-content-images">🚫🖼️ Remove original content images from messages </span>
                                </div>
                                <div title="Append 'Replying to NAMEHERE:' with supported sources">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="replyingto" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="include-replying-to-with-responses">💬🗨️ Include 'Replying to @user" with replies </span>
                                </div>

                                <div title="Allow only words in the goodwords.txt file, otherwise they will be turned into asterixis.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="goodwordslist" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="allow-only-good-words-else-asterixis">👼✅ Allow only approved words </span>
                                </div>

                                <div title="Totally filter out messages from non-members">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="memberchatonly" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-non-members">👸 Filter out messages from non-members </span>
                                </div>

                                <div title="Filter out messages that might be chat commands.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="filtercommands" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="filter-out-messages-starting-with">❗💬 Filter out messages starting with: </span><b><i>!</i></b>
                                </div>
                                <div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="filtercommandscustomtoggle" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;" title="Provide comma separated values; messages that start with the word will be blocked. eg: playlist,hello,subscribe">
                                        <input type="text" id="filtercommandscustomwords" class="textInput" autocomplete="off" placeholder="Comma separated list of words" data-textsetting="filtercommandscustomwords" />
                                        <label for="filtercommandscustomwords"><span data-translate="custom-filter-list-start-words">&gt; Custom filter out list of start words</span></label>
                                    </div>
                                </div>
                                <div title="Just text is captured. No HTML, so no BTTV emotes, etc.">
                                    <label class="switch">
                                        <input type="checkbox" id="textonlymode" data-setting="textonlymode" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="strip-html-from-messages-and-donations">📤 Strip HTML/images from messages and donations </span>
                                </div>
								<div>
                                    <label class="switch">
                                        <input type="checkbox" data-setting="whitelistuserstoggle" />
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="textInputContainer" style="display: inline-block; width: 250px;" title="Provide comma separated values; only values that match a username will be allowed.">
                                        <input type="text" id="whitelistusers" class="textInput" autocomplete="off" placeholder="Provide usernames, comma, separated" data-textsetting="whitelistusers" />
                                        <label for="whitelistusers"><span data-translate="only-allow-specified-users">&gt; Show only specified users</span></label>
                                    </div>
                                </div>
								<div>
									<label class="switch">
										<input type="checkbox" data-setting="blacklistuserstoggle" />
										<span class="slider round"></span>
									</label>
									<span data-translate="hide-and-block-specified-users">🔮 Hide and block the following specified users:</span>
									<div class="textInputContainer hidden" style="display: inline-block; width: 250px;" title="Provide comma separated values; values that match a username will be rejected.">
                                        <input type="text" id="blacklistusers" class="textInput" autocomplete="off" placeholder="Provide usernames, comma, separated" data-textsetting="blacklistusers" />
                                    </div>
								</div>
								<div>
									<div class="username-list-container" id="usernameList"></div>
									<div class="add-username-container">
										<input type="text" id="newUsername" placeholder="Add username to block list">
										<button id="addUsername">Add</button>
										
									</div>
									
									
								</div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-global-message-styling-options" />
                    <label class="collapsible-label" for="wrapper-global-message-styling-options"><span data-translate="message---styling">💬 Message — 🎨 Styling</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <div title="If a name lacks color data, randomly add one.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="randomcolor" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="add-a-random-color-to-uncolored-names">🌈👤 Add a random color to uncolored names </span>
                                </div>

                                <div title="If a name lacks color data, randomly add one.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="randomcolorall" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="override-all-name-colors-with-a-random-color">🌈🌈 Override all name colors with a random color </span>
                                </div>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="number" id="totalcolors" class="textInput" max="167772" min="1" value="167772" placeholder="Number of colors that can be assigned" data-numbersetting="totalcolors" />
                                    <label for="totalcolors"><span data-translate="max-number-of-random-colors-to-use">🌈🔢 Max number of random colors to use</span></label>
                                </div>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="number" id="colorseed" class="textInput" max="99" min="1" value="26" placeholder="Change the seeding value for the color randomization" data-numbersetting="colorseed" />
                                    <label for="colorseed"><span data-translate="seed-value-used-for-color-assignment">🌈🌱 Seed value used for color assignment</span></label>
                                </div>

                                <div title="Members on Youtube won't have green names, for example.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="nosubcolor" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="do-not-color-names-based-on-sub-or-member-status">📛🔰 Do not color names based on sub/member status </span>
                                </div>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="default_avatar" class="textInput" autocomplete="off" placeholder="Default avatar image URL" data-textsetting="defaultavatar" />
                                    <label for="default_avatar"><span data-translate="default-avatar-image-url">&gt; Default avatar image URL</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			
			<div class="wrapper">
				<div class="collapsible">
					<input type="checkbox" class="collapsible-input" id="wrapper-privhostbot-options-ext" />
					<label class="collapsible-label" for="wrapper-privhostbot-options-ext">
						<span data-translate="identify-hosts">🦸 Identify who is a host, mod, bot, vip</span>
					</label>
					<div class="collapsible-text">
						<div class="options">
							<div class="options_group streaming_chat">
								<div
									class="textInputContainer"
									style="width: 95%;"
									title="Note:
			Host/bot name(s) to help identify them.
			The list of names should be comma separated.
			The first name listed may be used as the host's name in stream when their name is not otherwise known."
								>
									<input type="text" id="botnamesext" class="textInput" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textsetting="mynameext" />
									<label for="botnamesext">
										<span data-translate="hostbot-names">&gt; Identify by name who are hosts or bots</span>
									</label>
								</div>

								<div>
									<label class="switch">
										<input type="checkbox" data-setting="hidebotnamesext" />
										<span class="slider round"></span>
									</label>
									<span data-translate="delete-names-for-specified-host-or-bots">🤖🔤 Delete names for specified host or bots</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-setting="hidebotsext" />
										<span class="slider round"></span>
									</label>
									<span data-translate="do-not-show-host-or-bot-messages">🤖🚫 Filter out messages from above hosts or bots</span>
								</div>
								<h3><span data-translate="Privileged-users-h3">Privileged users</span></h3>

								<div
									class="textInputContainer"
									style="width: 95%;"
									title="Note:
			Specify privileged/admin name(s) to help identify them in chat.
			The list of names should be comma separated."
								>
									<input type="text" id="adminnames" class="textInput" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textsetting="adminnames" />
									<label for="adminnames">
										<span data-translate="admin-names">&gt; Privileged users</span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>						
			<div class="wrapper">
				<div class="collapsible">
					<input type="checkbox" class="collapsible-input" id="wrapper-bots-options-ext" />
					<label class="collapsible-label" for="wrapper-bots-options-ext">
						<span data-translate="local-bot">🤖 Local chat bot (LLM)</span>
					</label>
					<div class="collapsible-text">
						<div class="options">
							<div class="options_group streaming_chat">
							
								<p>Using this section requires a bot service to be made available.</p>
								<p>You can install one for free with Ollama: <a href="https://github.com/steveseguin/social_stream/blob/main/ai.md" style="color:lightblue" target="_blank">Installation Guide Here</a></p>

								<h3>Configure LLM API 🦙</h3>
								<div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="ollamamodel" class="textInput" autocomplete="off" placeholder="eg: llama3.1" data-textsetting="ollamamodel" />
										<label for="ollamamodel"><span data-translate="ollama-model">&gt; Ollama Model to use</span></label>
									</div>
								</div>
								<div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="ollamaendpoint" class="textInput" autocomplete="off" placeholder="The default is http://localhost:11434" data-textsetting="ollamaendpoint" />
										<label for="ollamaendpoint"><span data-translate="ollama-API-endpoint">&gt; Ollama API endpoint</span></label>
									</div>
								</div>
								
								<h3><span data-translate="local-censor-bot">Censor bot options 🤖🚫🤬</span></h3>
								<div>
									<div style="display: inline-block;" title="Use the bot to moderate messages, deleting messages that it thinks aren't fit. It will skip messages if it can't keep up.">
										<label class="switch">
											<input type="checkbox" id="ollamaCensorBot" data-setting="ollamaCensorBot" />
											<span class="slider round"></span>
										</label>
										🚦 <span data-translate="enable-censor-bot">Enable the censor bot. <i>(non-blocking by default)</i></span> 
									</div>
								</div>
								<div>
									<div style="display: inline-block;" title="Only approved messages get thru, but this may slow things down and messages will get skipped.">
										<label class="switch">
											<input type="checkbox" id="ollamaCensorBotBlockMode" data-setting="ollamaCensorBotBlockMode" />
											<span class="slider round"></span>
										</label>
										🤚 <span data-translate="censor-bot-hold">Block messages until approved by the censor bot</span>
									</div>
								</div>
								<h3 title="Chat bots can reply to the chat"><span data-translate="local-chat-bot">Chat bot 🤖💬</span></h3>
								<div style="display: inline-block;" title="Enable the Ollama AI Bot responder; requires Ollama to be installed locally.">
									<label class="switch">
										<input type="checkbox" id="ollama" data-setting="ollama" />
										<span class="slider round"></span>
									</label>
									🚦 <span data-translate="enable-ollama-bot">Enable the Ollama AI chat bot</span>
								</div>
								<div>
									<div class="textInputContainer" style="width: 95%;">
										<input type="text" id="ollamabotname" class="textInput" autocomplete="off" placeholder="The default bot name is '🤖💬'" data-textsetting="ollamabotname" />
										<label for="ollamabotname"><span data-translate="ollama-bot-name">&gt; Customize bot name</span></label>
									</div>
								</div>
								<div title="There's a minimum of 5-seconds by default" style="margin:5px 0">
									<span data-translate="custom-ollama-rate">
										🐢 Rate limit for responses per tab / source
										<input type="number" style="max-width: 7ch;" step="1000" max="9999999" min="5000" value="5000" size="6" data-numbersetting="ollamaRateLimitPerTab" />ms
									</span>
								</div>
								
								<div class="textInputContainer" style="width: 95%;">
									<textarea id="ollamaprompt" class="textInput" style="height:80px" autocomplete="off" placeholder="Enter additional instructions or context for the bot (e.g., 'You are a shopping assistant for a YouTube stream; only respond if you think it's important')" data-textsetting="ollamaprompt"></textarea>
									<label for="ollamaprompt">
										<span data-translate="ollamaprompt">&gt; Additional Bot Instructions (Optional)</span>
									</label>
								</div>
								<div style="display: inline-block;" title="Enable the RAG mode, which has the LLM bot access a local database containing additional knowledge that if may reference in its responses.">
									<label class="switch">
										<input type="checkbox" id="ollamaRagEnabled" data-setting="ollamaRagEnabled" />
										<span class="slider round"></span>
									</label>
									<span data-translate="enable-ragEnabled-bot">Use a custom knowledge-base (RAG)</span> 
								</div>
								<br /><br />
								<div id="ragFileManagement" style="display: none; margin-top: 10px;" title="A list of uploaded files that will populate the knowledge database, along with any progress state">
									<div>
										<button class="glowingButton" style="width: 160px; margin-left: 0px;" data-action="uploadRAGfile" title="Ideally, plain text or markdown files should be used">
											<span data-translate="add-another-rag-file">Add a resource file</span>
										</button>
										<button class="glowingButton" style="width: 160px; margin-left: 0px;" data-action="clearRag" title="This will remove the local database of knowledge and delete upload files">
											<span data-translate="clear-rag">Clear all</span>
										</button>
									</div>
									<h4>Custom knowledge-base - File Management</h4>
									<div id="ragFileList"></div>
									<div>
										<input type="checkbox" id="enhancedProcessing" checked>
										<label for="enhancedProcessing">Use enhanced processing (may work better with multiple documents)</label>
									</div>
									<br>
									<span data-translate="works-better-when"><i>💁‍ tip: The quality of data uploaded will impact results. Too much data may be harmful.</i></span> 
								</div>
								
								<div style="display: inline-block;" title="Allow for private communication with the chat bot">
									<label class="switch">
										<input type="checkbox" id="allowChatBot" data-setting="allowChatBot" />
										<span class="slider round"></span>
									</label>
									🗣️ <span data-translate="enable-ollama-chat-bot-external">Enable private chat bot option</span> <a href="./chatbot.html" target="_blank" id="chatbotlink">[LINK TO CHATBOT]</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

            <div class="wrapper ssapp">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-quick-open-chats-options" />
                    <label class="collapsible-label" for="wrapper-quick-open-chats-options"><span data-translate="quick-open-chat-pop-ups">📟 Quick-open chat pop-ups</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <!--
								<div class="alert alert_danger">
									This is an example of an important <b>error</b> message.
								</div>
							-->

                                <center>
                                    <button class="glowingButton" style="width: 160px; margin-left: 0px;" data-action="openchat">
                                        <span><span data-translate="open-chat-pop-ups">Open chat pop-ups</span></span>
                                    </button>
                                </center>

                                <br />

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="openchatdock" data-param1="openchat" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="auto-open-all-chat-windows-on-dock-connect-or-refresh">💬🗨️ Auto open all chat windows on dock connect or refresh</span><br />
                                    <p style="text-align: justify; margin-top: 0 !important;">
                                        <b><span data-translate="usage-examples">Usage examples</span></b><br />
                                        <i>
                                            <span data-translate="1-to-open-your-chat-pop-ups-on-start-your-obs-program-if-you-openrefresh-the-streaming-chat-as-an-obs-dock">
                                                1. To open your chat pop-up(s) on start your OBS program, if you open/refresh the streaming chat as an OBS dock.
                                            </span>
                                            <br />
                                            <b><span data-translate="note">Note</span></b>
                                            <span data-translate="this-will-not-work-for-youtube-in-this-case-since-you-should-to-be-in-live-for-it-to-get-the-live-chat-link-correctly">
                                                : This will not work for YouTube in this case, since you should first be live to Youtube to for there to be a chat link.
                                            </span>
                                            <br />
                                            <span data-translate="2-when-you-are-away-from-your-streaming-pc-and-wants-to-open-your-chat-pop-ups-if-you-openrefresh-the-streaming-chat-with-another-pc-or-smartphone">
                                                2. When you are away from your streaming PC and wants to open your chat pop-up(s), if you open/refresh the streaming chat with another PC or smartphone.
                                            </span>
                                        </i>
                                    </p>
                                </div>

                                <div style="display: none;">
                                    <h3><span data-translate="youtube-api">YouTube API</span></h3>

                                    <div class="textInputContainer" style="width: 95%;">
                                        <input type="text" id="youtubeapikey" class="textInput" autocomplete="off" placeholder="Provide YouTube API key" data-textsetting="youtubeapikey" />
                                        <label for="youtubeapikey"><span data-translate="youtube-api-key">&gt; YouTube API key</span></label>
                                    </div>
                                    <center>
                                        <button class="glowingButton" style="width: 180px;" data-action="enableYouTube">
                                            <span><span data-translate="connect-youtube-api">Connect YouTube API</span></span>
                                        </button>
                                    </center>
                                </div>

                                <h3><span data-translate="opened-in-new-tab">Opened in new tab</span></h3>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="instagramlive_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="instagramlive_username" />
                                    <label for="instagramlive_username"><span data-translate="instagram-live">&gt; Instagram Live</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="instagramlive">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>
                                <br />

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="facebook_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="facebook_username" />
                                    <label for="facebook_username"><span data-translate="facebook">&gt; Facebook</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="facebook">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>
                                <br />

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="kick_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="kick_username" />
                                    <label for="kick_username"><span data-translate="kick">&gt; Kick</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="kick">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>
                                <br />

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="discord_serverid" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="discord_serverid" />
                                    <label for="discord_serverid"><span data-translate="discord-server-id">&gt; Discord server id</span></label>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="discord_channelid" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="discord_channelid" />
                                    <label for="discord_channelid"><span data-translate="discord-channel-id">&gt; Discord channel id</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="discord">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <h3><span data-translate="opened-in-new-window">Opened in new window</span></h3>
                                <center>
                                    <span style="color: #ff0000dd;">
                                        <b><span data-translate="note">Note</span></b><span data-translate="do">: Do </span><u><span data-translate="not">NOT</span></u><span data-translate="minimize-them"> minimize them!</span>
                                    </span>
                                </center>
								
								<div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="twitch_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="twitch_username" />
                                    <label for="twitch_username"><span data-translate="twitch">&gt; Twitch</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="twitch">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="youtube_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="youtube_username" />
                                    <label for="youtube_username"><span data-translate="youtube">&gt; YouTube</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="youtube">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                    <button class="glowingButton" style="display: inline-block; width: 16px;" id="ytcopy" title="Copy YouTube video ID to the clipboard."><span>📎</span></button>
                                </center>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="tiktok_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="tiktok_username" />
                                    <label for="tiktok_username"><span data-translate="tiktok">&gt; TikTok</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="tiktok">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="trovo_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="trovo_username" />
                                    <label for="trovo_username"><span data-translate="trovo">&gt; Trovo</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="trovo">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="picarto_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="picarto_username" />
                                    <label for="picarto_username"><span data-translate="picarto">&gt; Picarto</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="picarto">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="dlive_username" class="textInput" autocomplete="off" placeholder="Channel name" data-textsetting="dlive_username" />
                                    <label for="dlive_username"><span data-translate="dlive">&gt; Dlive</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="dlive">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <h3><span data-translate="custom">Custom</span></h3>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom1_url_newwindow" data-setting="custom1_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-1-on-new-window"> Open custom URL 1 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom1_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom1_url" />
                                    <label for="custom1_url"><span data-translate="custom-url-1">&gt; Custom URL 1</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom1">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom2_url_newwindow" data-setting="custom2_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-2-on-new-window"> Open custom URL 2 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom2_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom2_url" />
                                    <label for="custom2_url"><span data-translate="custom-url-2">&gt; Custom URL 2</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom2">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom3_url_newwindow" data-setting="custom3_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-3-on-new-window"> Open custom URL 3 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom3_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom3_url" />
                                    <label for="custom3_url"><span data-translate="custom-url-3">&gt; Custom URL 3</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom3">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom4_url_newwindow" data-setting="custom4_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-4-on-new-window"> Open custom URL 4 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom4_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom4_url" />
                                    <label for="custom4_url"><span data-translate="custom-url-4">&gt; Custom URL 4</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom4">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom5_url_newwindow" data-setting="custom5_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-5-on-new-window"> Open custom URL 5 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom5_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom5_url" />
                                    <label for="custom5_url"><span data-translate="custom-url-5">&gt; Custom URL 5</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom5">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom6_url_newwindow" data-setting="custom6_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-6-on-new-window"> Open custom URL 6 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom6_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom6_url" />
                                    <label for="custom6_url"><span data-translate="custom-url-6">&gt; Custom URL 6</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom6">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom7_url_newwindow" data-setting="custom7_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-7-on-new-window"> Open custom URL 7 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom7_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom7_url" />
                                    <label for="custom7_url"><span data-translate="custom-url-7">&gt; Custom URL 7</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom7">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom8_url_newwindow" data-setting="custom8_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-8-on-new-window"> Open custom URL 8 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom8_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom8_url" />
                                    <label for="custom8_url"><span data-translate="custom-url-8">&gt; Custom URL 8</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom8">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>

                                <div>
                                    <label class="switch">
                                        <input type="checkbox" id="custom9_url_newwindow" data-setting="custom9_url_newwindow" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="open-custom-url-9-on-new-window"> Open custom URL 9 on new window </span>
                                </div>
                                <div class="textInputContainer" style="width: 95%;">
                                    <input type="text" id="custom9_url" class="textInput" autocomplete="off" placeholder="eg: https://somedomain/chat/popup" data-textsetting="custom9_url" />
                                    <label for="custom9_url"><span data-translate="custom-url-9">&gt; Custom URL 9</span></label>
                                </div>
                                <center>
                                    <button class="glowingButton" style="margin-top: 4px; margin-left: 0px;" data-action="openchat" data-value="custom9">
                                        <span><span data-translate="open-chat">Open chat</span></span>
                                    </button>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-export-options" />
                    <label class="collapsible-label" for="wrapper-export-options"><span data-translate="export--import">📄 Export / import</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <h3><span data-translate="save-the-last-message-to-a-file">Save the last message to a file</span></h3>
                                <span data-translate="an-alterative-method-of-saving-the"> An alterative method of saving the </span><b><span data-translate="last">last</span></b><span data-translate="message"> message </span>
                                <div class="grid">
                                    <button class="glowingButton" style="width: 140px;" data-action="singlesave">
                                        <span style="font-size: 0.8em;"><span data-translate="choose-location">💾 Choose location</span></span>
                                    </button>
                                    <button class="glowingButton" style="width: 140px;" data-action="singlesaveStop">
                                        <span style="font-size: 0.8em;"><span data-translate="stop-saving-if-active">Stop saving (if active)</span></span>
                                    </button>
                                </div>

                                <h3>
                                    <span data-translate="save-all-messages-to">Save all messages to 📗 </span><b><span data-translate="excel">Excel</span></b><span data-translate="file"> file</span>
                                </h3>
                                <span data-translate="an-alterative-method-of-saving"> An alterative method of saving </span><b><span data-translate="all">all</span></b><span data-translate="messages"> messages </span>
                                <div class="grid">
                                    <button class="glowingButton" style="width: 140px;" data-action="excelsave">
                                        <span style="font-size: 0.8em;"><span data-translate="choose-location">💾 Choose location</span></span>
                                    </button>
                                    <button class="glowingButton" style="width: 140px;" data-action="excelsaveStop">
                                        <span style="font-size: 0.8em;"><span data-translate="stop-saving-if-active">Stop saving (if active)</span></span>
                                    </button>
                                </div>

                                <h3><span data-translate="save-all-names-seen-in-chat-to-a-simple-file">Save all names seen in chat to a simple file</span></h3>
                                <span data-translate="just-a-unique-list-of-names-seen-in-chat-no-messages">
                                    Just a unique list of names seen in chat; no messages
                                </span>
                                <div class="grid3">
                                    <button class="glowingButton" style="width: 138px;" data-action="savenames">
                                        <span style="font-size: 0.8em;"><span data-translate="choose-location">💾 Choose location</span></span>
                                    </button>
                                    <button class="glowingButton" style="width: 95px;" data-action="savenamesStop">
                                        <span style="font-size: 0.8em;"><span data-translate="stop-saving-if-active">Stop saving</span></span>
                                    </button>
									<button class="glowingButton" style="width: 85px;" data-action="savenamesClear">
                                        <span style="font-size: 0.8em;"><span data-translate="reset-user-list">Reset list</span></span>
                                    </button>
                                </div>

                                <h3><span data-translate="reset-all-settings">Reset all settings to defaults</span></h3>
                                <span>
                                    Make sure to export your settings first or lose them
                                </span>
                                <div class="grid">
                                    <button class="glowingButton" style="width: 140px;" data-action="bigwipe">
                                        <span style="font-size: 0.8em;"><span data-translate="reset-settings">Reset all settings</span></span>
                                    </button>
                                </div>

                                <h3><span data-translate="exportimport-settings">Export/import settings</span></h3>
                                <span data-translate="backup-and-load-your-extension-settings">
                                    Backup and load your extension settings.
                                </span>
                                <div class="grid">
                                    <button class="glowingButton" style="width: 140px;" data-action="export">
                                        <span style="font-size: 0.8em;"><span data-translate="export-to-disk">💾 Export to disk</span></span>
                                    </button>
                                    <button class="glowingButton" style="width: 140px;" data-action="import">
                                        <span style="font-size: 0.8em;"><span data-translate="import-settings">Import settings</span></span>
                                    </button>
                                </div>
                                <br />
                                <br />
                                If using Brave, enable the File System API first to allow saving:<br />
                                `brave://flags/#file-system-access-api`
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper">
                <div class="collapsible">
                    <input type="checkbox" class="collapsible-input" id="wrapper-session-options" />
                    <label class="collapsible-label" for="wrapper-session-options"><span data-translate="session-options">🔑 Session Options</span></label>
                    <div class="collapsible-text">
                        <div class="options">
                            <div class="options_group">
                                <center>
                                    💀☠️ <span style="color: red;">PLEASE DO NOT CHANGE YOU SESSION ID</span> 💀☠️<br />
                                    ...unless you know exactly what you are doing.
                                </center>
                                <br />
                                <div class="textInputContainer" style="width: 95%;" title="Edit to change your session ID value. MUST BE UNIQUE">
                                    <input type="text" id="sessionid" class="textInput" autocomplete="off" placeholder="Session ID goes here" data-special="session" />
                                    <label for="sessionid"><span data-translate="unique-session-id">&gt; Your unique session ID is below.</span></label>
                                </div>
                                <i>Changing you session ID may break things</i><br />
                                <br />
                                <h3><span data-translate="set-a-password">Set a password</span></h3>

                                <div class="textInputContainer" style="width: 95%;" title="Set or change your session password">
                                    <input type="password" id="sessionpassword" class="textInput" autocomplete="off" placeholder="Session password goes here" data-special="password" />
                                    <label for="sessionpassword"><span data-translate="unique-session-password">&gt; Set or change your session password</span></label>
                                </div>
                                <i>It's okay to set a custom password.</i>
								<br />
                                <h3><span data-translate="hide-urls">Hide your links</span></h3>
								
                                <div title="Hide the links for each page so it can't be seen on stream.">
                                    <label class="switch">
                                        <input type="checkbox" data-setting="hideyourlinks" />
                                        <span class="slider round"></span>
                                    </label>
                                    <span data-translate="hide-your-ssn-links">👁️🔗 Obscure your links in this menu </span>
                                </div>
								<i>Better safe than sorry.</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="https://www.buymeacoffee.com/steveseguin" target="_blank">
                <img src="./icons/buymeacoffee.png" alt="Buy Me A Coffee" style="float: right; padding-left: 10px; padding-bottom: 10px; height: 33px !important; width: 119.35px !important;" />
            </a>
            <p style="text-align: right; padding-bottom: 11px;">
                <span data-translate="visit-us-at"> Visit us at </span><a href="https://discord.socialstream.ninja" target="_blank"><span data-translate="discord">Discord</span><img class="icon" src="./sources/images/discord.png" /></a>
                <br />
                <i><span data-translate="made-with">Made with</span></i> 💖 <i><span data-translate="for-the-community">for the community</span></i>.
            </p>
        </div>
    </body>
</html>