menu.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;
	--tipjar-color: #35d0ff;
	--chatbot-wall-color: #ff0000;
    --hype-meter-color: #00ff5e;
    --waitlist-color: #ff00d2;
	--ticker-color: #ff3a3bdd;
	--gif-color: #9a3f7bdd;
	--wordcloud-color: #6a6bffdd;
	--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;
	padding: 5px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.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;
	justify-content: center;
    align-items: center;
}
#newUsername {
	flex-grow: 1;
	margin-right: 5px;
}
#addUsername {
	cursor: pointer;
}
.isolate {
    border-top: solid 1px #AAA;
    border-bottom: solid 1px #AAA;
    margin: 7px auto;
    padding: 5px 0;
}
.username-tag {
	background-color: #443;
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 2px;
}
.source-type {
  font-size: 0.8em;
  color: #666;
  margin-left: 5px;
  padding: 0 4px;
  background: #e0e0e0;
  border-radius: 2px;
}
.add-username-container input {
  width: 150px;
}
.add-username-container input[id$="Type"] {
  width: 132px;
}
.add-username-container > button {
	word-break: normal;
}

.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);
}
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(-20deg); }
  88% { transform: rotate(20deg); }
}


#searchInput {
    appearance: none;
    position: fixed;
    top: 58px;
    right: 26px;
    border: none;
    display: none;
    width: 0;
    padding: 1px;
    font-weight: bold;
    cursor: text;
    z-index: 100;
    transition: width 0.5s ease;
	border-radius: 1px;
}

@keyframes shake {
  0%, 50%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-20deg); }
  90% { transform: rotate(20deg); }
}


#searchInput.show {
    display: block;
    width: calc(100% - 35px); /* Adjust width as needed */
}

#searchIcon {
    position: fixed;
    top: 54px;
    right: 0px;
    z-index: 100;
    cursor: pointer;
	font-size: 150%;
	animation: shake 2s ease-in-out;
}
#activeIcon {
	position: absolute;
    top: 54px;
    right: 25px;
    cursor: pointer;
    display: block;
    height: 0;
	font-size: 150%;
}
.tts-test-button {
	display: inline-block;
    margin: 0 9px;
    padding: 3px 8px 2px 6px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.tts-test-button:hover {
	background-color: #0056b3;
}
.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: 100%;
    padding: 0;
    margin: 0;
    scrollbar-color: #666 #201c29;
    font-family: var(--font-family);
    background-color: var(--body-background-disabled);
    font-size: 12px;
	overflow-x: auto;
}

::-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);
}
#systemLanguageSelect, #systemLanguageSelect10 {
    max-width: calc(100vw - 106px);
}

#chatCommands {
    overflow-y: auto;
    box-shadow: inset 0px 0px 5px #0000002e;
    border-radius: 10px;
    margin-top: 10px;
}
.username-list-container:empty {
	display:none;
}
#timedMessages {
    overflow-y: auto;
    box-shadow: inset 0px 0px 5px #0000002e;
    border-radius: 10px;
    margin-top: 10px;
}
#botReplyMessages {
    overflow-y: auto;
    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);
	font-size: 1em;
}

#newVersion.show {
    display: block;
}

.container {
	margin: 10px;
	padding: 10px;
	max-width: calc(100% - 70px);
}

.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;
}
.link div {
	max-height: 50px;
    overflow: auto;
}

.options_group {
    word-break: break-word;
}
@media (prefers-color-scheme: dark) {
	.options_group > a {
		color: lightblue;
	}
}

/* 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.tipjar_title {
    color: var(--tipjar-color);
}

h2.emotes_wall_title {
    color: var(--emotes-wall-color);
}
h2.chatbot_wall_title {
    color: var(--chatbot-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.wordcloud_mode_title {
    color: var(--wordcloud-color);
}

h2.custom_gif_commands_title {
    color: var(--gif-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;
}

.glowingButton {
    position: relative;
    min-width: 100px;
    height: 24px;
    display: inline-block;
    margin: 2px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
}

.glowingButton:before,
.glowingButton:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #00ccff, transparent 40%, transparent 60%, #ff075b);
    transition: all 0.3s ease;
    opacity: 0;
}

.glowingButton:hover:before {
    opacity: 1;
    inset: -2px;
}

.glowingButton:hover:after {
    opacity: 1;
    inset: -2px;
    filter: blur(8px);
}

.glowingButton:active {
    transform: scale(0.98);
}

.glowingButton:active:before,
.glowingButton:active:after {
    background: linear-gradient(45deg, #0099ff, transparent 40%, transparent 60%, #cc0033);
    opacity: 1;
    inset: -1px;
}

.glowingButton:active span {
    background: color-mix(in srgb, var(--button-background) 85%, #000);
}

.glowingButton span {
    position: relative;
    display: flex;
    background: var(--button-background);
    z-index: 1;
    font-size: clamp(12px, 1em, 16px);
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--default-text-color);
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    border-radius: 2px;
    padding: 4px 8px;
    box-sizing: border-box;
}

.textInputContainer {
    position: relative;
    width: 200px;
    margin-top: 10px;
    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;
}

.tab-container {
  width: 100%;
  overflow: hidden;
}

.tab-header {
  display: flex;
  overflow: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--collapsible-border-color);
  padding-bottom: 4px;
  flex-wrap: wrap;
  max-height: 113px;
}

.tab-button {
  padding: 0 6px;
  background: var(--color-accent-subtle);
  border: 1px solid var(--collapsible-border-color);
  border-radius: 4px 4px 0 0;
  margin: 0;
  margin-right: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.tab-button.active {
  background: var(--color-accent);
  color: white;
}

.tab-content {
  display: none;
  padding: 12px;
  background: var(--options-group-background-color);
  border: 1px solid var(--collapsible-border-color);
  border-top: none;
}

.tab-content.active {
  display: block;
}

.add-new-tab {
  background: var(--button-background);
  border: 1px solid var(--collapsible-border-color);
  border-radius: 4px;
  margin: 0;
  cursor: pointer;
}

.delete-tab {
  margin-left: 8px;
  color: #ff4444;
  cursor: pointer;
  font-size: 14px;
}

.event-container {
  margin-bottom: 12px;
}
.main-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid var(--collapsible-border-color);
	margin-bottom: 10px;
	position: sticky;
	top: 35px;
	background-color: var(--body-background-enabled);
	z-index: 99;
	padding: 4px 0;
}

.main-tab {
	padding: 6px 10px;
	background-color: var(--color-accent-subtle);
	border: 1px solid var(--collapsible-border-color);
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	white-space: nowrap;
	font-weight: 600;
	transition: all 0.2s ease;
}

.main-tab.active {
	background-color: var(--color-accent);
	color: white;
	border-bottom-color: transparent;
}

.tab-content {
	display: none;
	width: 100%;
}

.tab-content.active {
	display: block;
}

/* Responsive design for the tabs */
@media (max-width: 600px) {
	.main-tabs {
		flex-direction: column;
		gap: 2px;
	}
	
	.main-tab {
		border-radius: 4px;
	}
}
        </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 all options by keyword..." />
        <div id="searchIcon" title="Search all options by keyword">🔍</div>
        <div id="activeIcon" title="Show only enabled options">🔰</div>
        
        <div class="container">
            <!-- Main Tabs Navigation -->
            <div class="main-tabs">
                <div class="main-tab active" data-tab="chat">💬 Chat</div>
                <div class="main-tab" data-tab="overlay">🖼️ Overlay</div>
                <div class="main-tab" data-tab="bots">🤖 Bots</div>
                <div class="main-tab" data-tab="interactions">🎮 Interactions</div>
                <div class="main-tab" data-tab="visual">📊 Visualizations</div>
                <div class="main-tab" data-tab="tools">🔧 Tools</div>
                <div class="main-tab" data-tab="global">⚙️ Global</div>
            </div>
            
            <!-- Chat Tab Content -->
            <div class="tab-content active" id="chat-tab">
                <!-- Streaming Chat Section -->
                <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 (dock & 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="#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>
										<label class="switch">
											<input type="checkbox" data-param1="fadedtop" />
											<span class="slider round"></span>
										</label>
										<span data-translate="fadedtop">🌇 Fade out the top of the overlay </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="showviewercount" />
											<span class="slider round"></span>
										</label>
										<span data-translate="show-viewer-count">🔢 Show viewer count per source; top-right</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 title="If deleting a message, such as if syncing with Youtube Delete, only delete the last message from that user, and not all of theirs">
										<label class="switch">
											<input type="checkbox" data-param1="deleteonlylast" />
											<span class="slider round"></span>
										</label>
										<img src="./sources/images/youtube.png" class="icon" /> <span data-translate="delete-only-last">🗑️ Only delete last message if unsure which to 🗑️</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 last ~50-msgs when refreshing the page </span>									
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="loadlast" />
											<span class="slider round"></span>
										</label>
										<span data-translate="loadlast">🗄️ Load last ~30-msgs from the database on load </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="stripdonations" />
											<span class="slider round"></span>
										</label>
										<span data-translate="strip-donation-data-from-messages">🏷️🗑️ Remove donation data from messages </span>
									</div>
									 <div>
										<label class="switch">
											<input type="checkbox" data-param1="skipdonations" />
											<span class="slider round"></span>
										</label>
										<span data-translate="skip-donation-data-from-messages">🏷️🦘 Skip messages containing donations </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 title="This requests OBS browser source to have permissions set higher, plus the dock needs to be loaded in OBS">
										<label class="switch">
											<input type="checkbox" data-param1="cycle" />
											<span class="slider round"></span>
										</label>
										<span data-translate="guests-can-cycle">🚲 Guests can use !cycle to change the scene in OBS*</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">
									<!-- Main TTS Toggle -->
									<h4>Enable Text to Speech in the Dock</h4>
									<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>
								</div>
								
								<!-- Global TTS Behavior Options -->
								<div class="options_group tts-behavior-options">
									<h4>TTS Behaviors</h4>
									<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="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>
									<!-- Command Controls --> 
									<div title="Only what is written AFTER the !say command is read out. It's read out regardless of whether tts is turned on elsewhere or not.">
										<label class="switch">
											<input type="checkbox" data-param1="ttscommand" />
											<span class="slider round"></span>
										</label>
										<span data-translate="ttscommand">🗣️ Any message containing 
											<input type="text" id="ttscommandcustom" class="textInput instant" autocomplete="off" 
												placeholder="!say" data-textparam1="ttscommand" value="!say" 
												title="You need to include the ! if you want it" style="width:36px" /> will be read out 
										</span>
									</div>
									
									<div title="Only 'member' marked users will have messages read out when using the TTS chat command.">
										<label class="switch">
											<input type="checkbox" data-param1="ttscommandmembersonly" />
											<span class="slider round"></span>
										</label>
										<span data-translate="membersttscommand">🤴 Only members can use the TTS command</span>
									</div>
									
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="norelfectionstts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-read-out-reflections">🚫➿ Do not read out reflections (your replies)</span>
									</div>
									<div>
										<div class="textInputContainer" style="width: 95%;" title="Only allow TTS from specific sources">
										<input type="text" id="ttssources" class="textInput instant" autocomplete="off" placeholder="eg: youtube,twitch" data-textparam1="ttssources" />
										<label for="ttssources"><span data-translate="ttssources">&gt; Source(s) to allow TTS</span></label>
									</div>
									</div>
								</div>
								<div class="options_group tts-behavior-options">
									<h4>Read out only specific user/messages</h4>
									<div title="Only 'bot' marked users will have messages read out.">
										<label class="switch">
											<input type="checkbox" data-param1="bottts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="bottts">🤖 Only bot marked users can have messages read</span>
									</div>
									<div title="Only 'mod' marked users will have messages read out.">
										<label class="switch">
											<input type="checkbox" data-param1="modtts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="modtts">👩‍🏫 Only specific mods can have messages read</span>
									</div>
									<div title="Only 'vip' marked users will have messages read out.">
										<label class="switch">
											<input type="checkbox" data-param1="viptts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="viptts">⭐ Only VIP marked users can have messages read </span>
									</div>
									<div title="Only 'privilleged' marked users will have messages read out.">
										<label class="switch">
											<input type="checkbox" data-param1="admintts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="admintts">👑 Only privilleged users can have messages read</span>
									</div>
									<div title="Only 'host' marked users will have messages read out.">
										<label class="switch">
											<input type="checkbox" data-param1="hosttts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="bottts">🕺 Only hosts can have messages read</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="ttsdonos" />
											<span class="slider round"></span>
										</label>
										<span data-translate="filter-text-to-speech-for-donations-only">🗣️💰 Only donations can have messages read out</span>
									</div>
								</div>
								<div class="options_group tts-behavior-options">
									<h4>Bots, hosts and events are excluded from TTS</h4>
									<div title="Allow 'bot' marked users to have messages read out; default is to filter them out">
										<label class="switch">
											<input type="checkbox" data-param1="allowbottss" />
											<span class="slider round"></span>
										</label>
										<span data-translate="allowbottss">🤖✅ Allow bot messages to be read out</span>
									</div>
									<div title="Allow 'bot' marked users to have messages read out; default is to filter them out">
										<label class="switch">
											<input type="checkbox" data-param1="allowhosttss" />
											<span class="slider round"></span>
										</label>
										<span data-translate="allowhosttss">🕺✅ Allow host messages to be read out</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>
								<div class="options_group tts-behavior-options">
									<h4>More TTS options</h4>
									<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="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>
									
									<div title="The volume has a max of 1.0 (100%)">
										<label class="switch">
											<input type="checkbox" data-param1="volume" />
											<span class="slider round"></span>
										</label>
										<span data-translate="system-tts-volume">
											🔉 Volume of speech
											<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="1.0" size="5" data-numbersetting="volume" />
										</span>
									</div>
								</div>
							</div>	
							
							
							<div class="tts-provider-selection" style="margin:0 10px 10px 10px">
								<h3>Text-to-Speech Service Provider</h3>
								<select id="ttsProvider" data-optionparam1="ttsprovider" data-optionsetting="ttsProvider" class="textInput">
									<option selected value="system">System TTS</option>
									<option value="kokoro">Kokoro (webGPU/CPU)</option>
									<option value="elevenlabs">ElevenLabs</option>
									<option value="google">Google Cloud</option>
									<option value="speechify">Speechify</option>
								</select>
							</div>
							
							<div id="ttsButton" class="hidden"></div>
							
							<div class="tts-provider-options options_group" id="systemTTS">
								<h4>Built-in System TTS Options</h4>
								<i>note: the free built-in TTS plays out via the default audio device. <a style="color:lightblue" target="_blank" href="https://docs.vdo.ninja/guides/windows-tts-audio-capture-methods-for-obs">[LEARN MORE HERE]</a></i>
								<br /><br />
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="lang" data-del1="lang,voice"/>
										<span class="slider round"></span>
									</label>
									<select id="systemLanguageSelect" data-optionparam1="lang" title="Select the system TTS language"></select>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="rate" />
										<span class="slider round"></span>
									</label>
									<span data-translate="system-tts-rate">
										⏩ Speaking rate
										<input type="number" style="max-width: 6ch;" step="0.1" max="10" min="0.1" value="1.0" 
											size="5" data-numbersetting="rate" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="pitch" />
										<span class="slider round"></span>
									</label>
									<span data-translate="system-tts-pitch">
										🎵 Pitch
										<input type="number" style="max-width: 6ch;" step="0.1" max="2" min="0.1" value="1.0" 
											size="5" data-numbersetting="pitch" />
									</span>
								</div>
							</div>
							<!-- Kokoro TTS Options -->
							<div class="tts-provider-options options_group" id="kokoroTTS">
								<h4>GPU-powered TTS Options</h4>
								<i>note: this free locally-running TTS needs a power computer to run well.</i>
								<br /><br />
								<div>
									🎭 Voice to use: 
									<select id="kokoroVoiceSelect" data-optionparam1="voicekokoro" title="Select the Kokoro TTS Voice">
										<option value="af_heart">Heart (American Female)</option><option value="af_alloy">Alloy (American Female)</option><option selected value="af_aoede">Aoede (American Female)</option><option value="af_bella">Bella (American Female)</option><option value="af_jessica">Jessica (American Female)</option><option value="af_kore">Kore (American Female)</option><option value="af_nicole">Nicole (American Female)</option><option value="af_nova">Nova (American Female)</option><option value="af_river">River (American Female)</option><option value="af_sarah">Sarah (American Female)</option><option value="af_sky">Sky (American Female)</option><option value="am_adam">Adam (American Male)</option><option value="am_echo">Echo (American Male)</option><option value="am_eric">Eric (American Male)</option><option value="am_fenrir">Fenrir (American Male)</option><option value="am_liam">Liam (American Male)</option><option value="am_michael">Michael (American Male)</option><option value="am_onyx">Onyx (American Male)</option><option value="am_puck">Puck (American Male)</option><option value="am_santa">Santa (American Male)</option><option value="bf_emma">Emma (British Female)</option><option value="bf_isabella">Isabella (British Female)</option><option value="bm_george">George (British Male)</option><option value="bm_lewis">Lewis (British Male)</option><option value="bf_alice">Alice (British Female)</option><option value="bf_lily">Lily (British Female)</option><option value="bm_daniel">Daniel (British Male)</option><option value="bm_fable">Fable (British Male)</option>
									</select>
								</div>
								<br />
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="kokorospeed" />
										<span class="slider round"></span>
									</label>
									<span data-translate="kokoro-tts-speed">
										⏩ Speaking rate
										<input type="number" style="max-width: 6ch;" step="0.1" max="10" min="0.1" value="1.0" 
											size="5" data-numbersetting="kokorospeed" />
									</span>
								</div>
							</div>
							<!-- ElevenLabs TTS Options -->
							<div class="tts-provider-options options_group hidden" id="elevenlabsTTS">
								<h4>ElevenLabs TTS Options</h4>
								<div class="textInputContainer" style="width: 95%;">
									<input type="password" 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>
								<!-- Voice Selection -->
								<div class="textInputContainer" style="width: 95%;">
									<input type="text" id="elevenLabsVoiceID" class="textInput instant" autocomplete="off" placeholder="e.g., VR6AewLTigWG4xSOukaG" data-textparam1="voice11" />
									<label for="elevenLabsVoiceID">
										<span data-translate="elevenlabs-voice-id">ElevenLabs Voice ID</span>
									</label>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevenlabsmodel" />
										<span class="slider round"></span>
									</label>
									<select id="elevenlabsmodelSelect" data-optionparam1="elevenlabsmodel">
										<option value="eleven_multilingual_v2">eleven_multilingual_v2</option>
										<option value="eleven_turbo_v2_5">eleven_turbo_v2_5</option>
										<option value="eleven_turbo_v2">eleven_turbo_v2</option>
										<option value="eleven_english_sts_v2">eleven_english_sts_v2</option>
										<option value="eleven_multilingual_sts_v2">eleven_multilingual_sts_v2</option>
										<option value="eleven_monolingual_v1">eleven_monolingual_v1</option>
										<option value="eleven_multilingual_v1">eleven_multilingual_v1</option>
									</select>
								</div>
								<!-- Voice Settings -->
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevenrate" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-rate">
										🔊 Speaking Rate
										<input type="number" style="max-width: 6ch;" step="0.25" max="5.0" min="0.25" value="1.0" size="5" data-numbersetting="elevenrate" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevenlatency" />
										<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="4" size="5" data-numbersetting="elevenlatency" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevenstability" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-stability">
										🎯 Stability
										<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="0.5" size="5" data-numbersetting="elevenstability" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevensimilarity" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-similarity">
										🎭 Similarity Boost
										<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="0.75" size="5" data-numbersetting="elevensimilarity" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevenstyle" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-style">
										🎨 Style
										<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="0.5" size="5" data-numbersetting="elevenstyle" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="elevenspeakerboost" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-speaker-boost">🔊 Use Speaker Boost</span>
								</div>
							</div>
							<!-- Google Cloud TTS Options -->
							<div class="tts-provider-options options_group hidden"  id="googleTTS">
								<h4>Google Cloud TTS Options</h4>
								<div class="textInputContainer" style="width: 95%;">
									<input type="password" 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="voicegoogle" />
									<label for="googleVoiceName"><span data-translate="google-voice-name">Google Voice Name</span></label>
								</div>
								<!-- Language Selection -->
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="googlelang" />
										<span class="slider round"></span>
									</label>
									<select id="googleLanguageSelect" data-optionparam1="googlelang">
										<option value="en-US">English (US)</option>
										<option value="en-GB">English (UK)</option>
										<option value="en-AU">English (Australia)</option>
										<option value="es-ES">Spanish (Spain)</option>
										<option value="es-US">Spanish (US)</option>
										<option value="fr-FR">French</option>
										<option value="de-DE">German</option>
										<option value="it-IT">Italian</option>
										<option value="ja-JP">Japanese</option>
										<option value="ko-KR">Korean</option>
										<option value="pt-BR">Portuguese (Brazil)</option>
										<option value="hi-IN">Hindi</option>
									</select>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="googlerate" />
										<span class="slider round"></span>
									</label>
									<span data-translate="google-tts-rate">
										⏩ Speaking rate
										<input type="number" style="max-width: 6ch;" step="0.1" max="4" min="0.25" value="1.0" 
											size="5" data-numbersetting="googlerate" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="googlepitch" />
										<span class="slider round"></span>
									</label>
									<span data-translate="google-pitch">
										🎵 Pitch
										<input type="number" style="max-width: 6ch;" step="0.1" max="20" min="-20" value="0" size="5" data-numbersetting="googlepitch" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="googleaudioprofile" />
										<span class="slider round"></span>
									</label>
									<span data-translate="google-audio-profile">
										🎚️ Audio Profile
										<select data-optionparam1="googleaudioprofile">
											<option value="handset-class-device">Handset</option>
											<option value="wearable-class-device">Wearable</option>
											<option value="telephony-class-application">Home Assistant</option>
											<option value="large-automotive-class-device">Car Kit</option>
											<option value="headphone-class-device">Headphone</option>
											<option value="small-bluetooth-speaker-class-device">Small Speaker</option>
											<option value="medium-bluetooth-speaker-class-device">Medium Speaker</option>
											<option value="large-home-entertainment-class-device">Large Speaker</option>
										</select>
									</span>
								</div>
								
							</div>
							<!-- Speechify TTS Options -->
							<div class="tts-provider-options options_group hidden" id="speechifyTTS">
								<h4>Speechify TTS Options</h4>
								<div class="textInputContainer" style="width: 95%;">
									<input type="password" 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="voicespeechify" />
									<label for="speechifyVoiceID"><span data-translate="speechify-voice-id">Speechify Voice ID</span></label>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="speechifyspeed" />
										<span class="slider round"></span>
									</label>
									<span data-translate="speechify-speed">
										⚡ Speed
										<input type="number" style="max-width: 6ch;" step="0.1" max="3" min="0.1" value="1.0" size="5" data-numbersetting="speechifyspeed" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="speechifymodel" />
										<span class="slider round"></span>
									</label>
									<span data-translate="speechify-model">
										🤖 Model
										<select data-optionparam1="speechifymodel">
											<option value="simba-english">English</option>
											<option value="simba-multilingual">Multilingual</option>
										</select>
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param1="speechifylang" />
										<span class="slider round"></span>
									</label>
									<select id="speechifyLanguageSelect" data-optionparam1="speechifylang">
										<option value="en-US">English (US)</option>
										<option value="en-GB">English (UK)</option>
										<option value="es">Spanish</option>
										<option value="fr">French</option>
										<option value="de">German</option>
										<option value="it">Italian</option>
									</select>
								</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 id="colorizename">
										<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="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 title="Hide icon/name/badges if the proceeding messages are from the same user">
										<label class="switch">
											<input type="checkbox" data-param1="sequence" />
											<span class="slider round"></span>
										</label>
										<span data-translate="sequence">🌌 Hide name/icons if sequential from same user</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="Messages that are emoji-only based, without donation, membership, or content image, are ignored.">
										<label class="switch">
											<input type="checkbox" data-param1="noemojisonly" />
											<span class="slider round"></span>
										</label>
										<span data-translate="ignore-emoji-only-messages">😒⌨️ Ignore emoji-only 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" />
											<span class="slider round"></span>
										</label>
										🤏 <span data-translate="padding-to-add">Padding between messages</span>
										<input type="number" style="max-width: 4ch;" max="99" min="0" value="3" size="3" data-numbersetting="padding" />px
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="donationright" />
											<span class="slider round"></span>
										</label>
										💵🫱 <span data-translate="donationright">Align donations to the right-side</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="bolder" />
											<span class="slider round"></span>
										</label>
										✒️<span data-translate="add-text-outlining">Increase text outline by 50%</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="thinner" />
											<span class="slider round"></span>
										</label>
										✒️<span data-translate="reduce-text-outlining">Decrease text outline by 33%</span>
									</div>
									<h3>Background Shading for Messages</h3>
									<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="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="nodonohighlight" />
											<span class="slider round"></span>
										</label>
										<span data-translate="no-background-shading-for-donations">⭕💰 No background shading for donations </span>
									</div>
									<div>
										<h3>Customize Donation Colors by Threshold 🌈💰</h3>
										<div style="width: 100%; display:inline-block;">
											<label class="switch">
												<input type="checkbox" data-param1="t1" />
												<span class="slider round"></span>
											</label>
											Threshold: $<input type="number" min="0" step="0.01" value="0"  style="width: 45px;" id="dono_1_threshold" class="textInput" autocomplete="off" data-numbersetting="t1" />USD, Color:
											<input type="text" style="width: 50px;" data-palette="dono_1_color_palette" id="dono_1_color" class="textInput" autocomplete="off" placeholder="HEX value" data-textparam1="t1c" />
											<input type="color" data-color="dono_1_color" id="dono_1_color_palette" 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>
										<div style="width: 100%; display:inline-block;">
											<label class="switch">
												<input type="checkbox" data-param1="t2" />
												<span class="slider round"></span>
											</label>
											Threshold: $<input type="number" min="0" step="0.01" value="5" style="width: 45px;" id="dono_2_threshold" class="textInput" autocomplete="off" data-numbersetting="t2" />USD, Color:
											<input type="text" style="width: 50px;"  data-palette="dono_2_color_palette" id="dono_2_color" class="textInput" autocomplete="off" placeholder="HEX value" data-textparam1="t2c" />
											<input type="color" data-color="dono_2_color" id="dono_2_color_palette" 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>
										<div style="width: 100%; display:inline-block;">
											<label class="switch">
												<input type="checkbox" data-param1="t3" />
												<span class="slider round"></span>
											</label>
											Threshold: $<input type="number" min="0" step="0.01" value="50"  style="width: 45px;" id="dono_3_threshold" class="textInput" autocomplete="off"  data-numbersetting="t3" />USD, Color:
											<input type="text" style="width: 50px;" data-palette="dono_3_color_palette" id="dono_3_color" class="textInput" autocomplete="off" placeholder="HEX value" data-textparam1="t3c" />
											<input type="color" data-color="dono_3_color" id="dono_3_color_palette" 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>
										<br />
									</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="trimname" />
											<span class="slider round"></span>
										</label>
										✂️ <span data-translate="trim-names-to-8">Trim names longer than</span>
										<input type="number" style="max-width: 4ch;" max="99" min="1" value="8" size="3" data-numbersetting="trimname" />chars...
									</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 class="textInputContainer" style="width: 95%;margin-top:10px;">
										<textarea id="customCSS" class="textInput" rows="4" data-textparam1="cssb64" placeholder="Enter your custom CSS here"></textarea>
										<label for="customCSS">&gt; Custom CSS</label>
									</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-bots">🤖🔤 Delete names for bots </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="hidehostnames" />
											<span class="slider round"></span>
										</label>
										<span data-translate="delete-names-for-specified-host">🙍🔤 Delete names for hosts </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="hidebots" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-show-bot-messages">🤖🚫 Do not show bot messages </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="hidehosts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-show-bot-messages">🙍🚫 Do not show host messages </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="nobeepbot" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-beep-bot">🤖🔇 Do not trigger the beep for bot messages</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="nobeephost" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-beep-host">🙍🔇 Do not trigger the beep for host messages</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="nobeepevent" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-beep-events">🎬🔇 Do not trigger the beep for events</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="showvipbadge" />
											<span class="slider round"></span>
										</label>
										<span data-translate="give-vip-users-badges">⭐ Give VIP marked users a special badge</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param1="autofeaturevip" />
											<span class="slider round"></span>
										</label>
										<span data-translate="auto-feature-vip-users">⭐ Auto-feature messages from VIP users </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 style="color:white;font"><i>
					Want a different design? Check out the <a style="color:lightblue;font" href="https://github.com/steveseguin/social_stream/tree/main/themes#custom-themes" target="_blank">community made styles!</a></i>
				</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 title="Zoom In on the overlay by 2x.">
										<label class="switch">
											<input type="checkbox" data-param2="scale=2" />
											<span class="slider round"></span>
										</label>
										<span data-translate="make-overlay-smaller">🔍➕ Make overlay larger </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. <a target="_blank"  style="color:lightblue"  href="https://docs.vdo.ninja/guides/windows-tts-audio-capture-methods-for-obs">[LEARN MORE HERE]</a></i>
									<br />
									<br />
									<div>
										<select id="languageSelect2" data-optionparam2="lang" data-del2="lang,voice" 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="password" 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="voicegoogle" />
											<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="password" 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="voice11" />
											<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-numbersetting2="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="password" 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="voicespeechify" />
											<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_palette" 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_palette" 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_palette" 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_palette"  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_palette" 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_palette"  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_palette" 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_palette" 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: 95%;margin-top:10px;">
										<textarea id="customCSS2" class="textInput" rows="4" data-textparam2="cssb64" placeholder="Enter your custom CSS here"></textarea>
										<label for="customCSS2">&gt; Custom CSS</label>
									</div>

									<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>
			
			<div class="tab-content" id="bots-tab">
                <div class="chatbot_category_title">
                    <h2 class="chatbot_wall_title">
                        <span data-translate="chatbot-settings-and-tools">Chat Bots and AI services</span>
                        <a class="options-link rounded_area" href="#chatbot-settings-and-tools-options" title="Jump to the chatbot settings and tools."><span data-translate="options">[options]</span></a>
                    </h2>
                    <div id="chatbotsettings" class="chatbot_settings"></div>
                </div>
                <a href="" id="chatbot-settings-and-tools-options"></a>

				<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">⚙ Configure LLM Service Provider</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://socialstream.ninja/ai" style="color:lightblue" target="_blank">Installation Guide Here</a></p>

									<h3>Configure LLM API 🦙</h3>
									
									<div>
										<select id="aiProvider" data-optionsetting="aiProvider" class="textInput">
											<option selected value="ollama">Ollama (Local)</option>
											<option value="chatgpt">ChatGPT API</option>
											<option value="gemini">Gemini API</option>
											<option value="deepseek">DeepSeek API</option>
											<option value="xai">xAI API (Grok)</option>
											<option value="bedrock">AWS Bedrock API</option>
											<option value="custom">Custom API</option>
										</select>
									<div>
									</div>	
										<div id="ollamaendpoint" class="textInputContainer" style="width: 95%;">
											<input type="text" 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 id="chatgptApiKey" class="textInputContainer hidden" style="width: 95%;">
											<input type="password" class="textInput" autocomplete="off" placeholder="Your OpenAI API key" data-textsetting="chatgptApiKey" />
											<label for="chatgptApiKey">&gt; OpenAI API Key</label>
										</div>
										
										<div id="geminiApiKey" class="textInputContainer hidden" style="width: 95%;">
											<input type="password"  class="textInput" autocomplete="off" placeholder="Your Google API key" data-textsetting="geminiApiKey" />
											<label for="geminiApiKey">&gt; Google API Key</label>
										</div>
										
										<div id="xaiApiKey" class="textInputContainer hidden" style="width: 95%;">
											<input type="password"  class="textInput" autocomplete="off" placeholder="Your xAI API key" data-textsetting="xaiApiKey" />
											<label for="xaiApiKey">&gt; xAI API Key</label>
										</div>
										
										<div id="deepseekApiKey" class="textInputContainer hidden" style="width: 95%;">
											<input type="password" class="textInput" autocomplete="off" placeholder="Your DeepSeek API key" data-textsetting="deepseekApiKey" />
											<label for="deepseekApiKey">&gt; DeepSeek API Key</label>
										</div>
										
										<div id="customAIEndpoint" class="hidden textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="The default is http://localhost:11434" data-textsetting="customAIEndpoint" />
											<label for="customAIEndpoint"><span data-translate="custom-API-endpoint">&gt; Custom OpenAI-compatible endpoint</span></label>
										</div>
									</div>
									
									<div id="ollamamodel">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="eg: llama3.2" data-textsetting="ollamamodel" />
											<label for="ollamamodel"><span data-translate="ollama-model">&gt; Ollama Model to use</span></label>
										</div>
									</div>
									<div id="ollamaKeepAlive" title="Time to keep the model in memory; -1 unlimited. In minutes">
										⏱️<span data-translate="ollama-model">Keep-alive model time (minutes)</span> <input type="number" min="-1" max="99999999" value="5" data-numbersetting="ollamaKeepAlive" />
									</div>
									
									<div id="geminimodel" class="hidden">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="eg: gemini-1.5-flash" data-textsetting="geminimodel" />
											<label for="geminimodel"><span data-translate="geminimodel">&gt; Gemini Model to use</span></label>
										</div>
									</div>
									<div id="xaimodel" class="hidden">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="eg: gemini-1.5-flash" data-textsetting="xaimodel" />
											<label for="xaimodel"><span data-translate="xaimodel">&gt; xAI Model to use</span></label>
										</div>
									</div>
									<div id="chatgptmodel" class="hidden">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="eg: gpt-4o-mini" data-textsetting="chatgptmodel" />
											<label for="chatgptmodel"><span data-translate="chatgptmodel">&gt; ChatGPT Model to use</span></label>
										</div>
									</div>
									<div id="deepseekmodel" class="hidden">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="eg: deepseek-chat" data-textsetting="deepseekmodel" />
											<label for="deepseekmodel"><span data-translate="deepseekmodel">&gt; DeepSeek Model to use</span></label>
										</div>
									</div>
									<div id="bedrockAccessKey" class="textInputContainer hidden" style="width: 95%;">
										<input type="password" class="textInput" autocomplete="off" placeholder="Your AWS Access Key" data-textsetting="bedrockAccessKey" />
										<label for="bedrockAccessKey">&gt; AWS Access Key</label>
									</div>

									<div id="bedrockSecretKey" class="textInputContainer hidden" style="width: 95%;">
										<input type="password" class="textInput" autocomplete="off" placeholder="Your AWS Secret Key" data-textsetting="bedrockSecretKey" />
										<label for="bedrockSecretKey">&gt; AWS Secret Key</label>
									</div>

									<div id="bedrockRegion" class="textInputContainer hidden" style="width: 95%;">
										<input type="text" class="textInput" autocomplete="off" placeholder="e.g., us-east-1" data-textsetting="bedrockRegion" />
										<label for="bedrockRegion">&gt; AWS Region</label>
									</div>

									<div id="bedrockmodel" class="hidden">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="e.g., anthropic.claude-v2" data-textsetting="bedrockmodel" />
											<label for="bedrockmodel">&gt; Bedrock Model to use</label>
										</div>
									</div>
									<div id="customAIModel" class="hidden">
										<div class="textInputContainer" style="width: 95%;">
											<input type="text" class="textInput" autocomplete="off" placeholder="eg: fine-tuned-v1" data-textsetting="customAIModel" />
											<label for="customAIModel"><span data-translate="customAIModel">&gt; Model to use</span></label>
										</div>
									</div>
									
									
									
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="wrapper">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-chatbot-public-options" />
						<label class="collapsible-label" for="wrapper-chatbot-public-options">
							<span data-translate="public-chatbot">🤖 Chat Bot — Primary</span>
						</label> 
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group streaming_chat">
									<h3 title="Chat bots can reply to the chat"><span data-translate="local-chat-bot">Chat bot 🤖💬</span></h3>
									<i>This bot has access to the live streaming chat and can either respond to users in chat or respond its own special chat overlay</i><br/>
									<br>
									<div style="display: inline-block;" title="Enable the LLM AI Bot responder.">
										<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 LLM 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>
									<br />
									<div  title="Do not relay bot messages">
										<label class="switch">
											<input type="checkbox" id="ollamaoverlayonly" data-setting="ollamaoverlayonly" />
											<span class="slider round"></span>
										</label>
										🏹 <span data-translate="ollamaoverlayonly">Bot replies ONLY go to the bot overlay page</span>
									</div>
									<div>
										<div>
											<label class="switch">
												<input type="checkbox" id="noollamabotname" data-setting="noollamabotname" />
												<span class="slider round"></span>
											</label>
											📛 <span data-translate="no-ollama-bot-name">Do not include the bot's name when responding</span>
										</div>
									</div>
									<div title="By default the bot is told not if it doesn't see value in doing so. You can disable that instruction here though">
										<div>
											<label class="switch">
												<input type="checkbox" id="alwaysRespondLLM" data-setting="alwaysRespondLLM" />
												<span class="slider round"></span>
											</label>
											🗣️🗣 <span data-translate="alwaysRespondLLM">Do not screen out any of the bot's replies</span>
										</div>
									</div>
									<div>
										<div class="textInputContainer" style="width: 95%;" title="Leave empty to trigger always. The bot may however still choose to not respond on its own though.">
											<input type="text" id="bottriggerwords" class="textInput" autocomplete="off" placeholder="eg: bot, !help" data-textsetting="bottriggerwords" />
											<label for="bottriggerwords"><span data-translate="ollama-bot-name">&gt; List of words to trigger bot</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 style="display: inline-block;" title="Include message history as context for the bot. Will slow things down..">
										<label class="switch">
											<input type="checkbox" id="llmcontext" data-setting="nollmcontext" />
											<span class="slider round"></span>
										</label>
										🚫🗄️ <span data-translate="nollmcontext">Do not include past message context</span>
									</div>
									<div style="display: inline-block;" title="Include chat summaries with past context">
										<label class="switch">
											<input type="checkbox" id="llmsummary" data-setting="llmsummary" />
											<span class="slider round"></span>
										</label>
										📈 <span data-translate="llmsummary">Include chat summaries to chat bot</span>
									</div>
									<div style="display: inline-block;" title="Include chat summaries with past context">
										<label class="switch">
											<input type="checkbox" id="allowLLMSummary" data-setting="allowLLMSummary" />
											<span class="slider round"></span>
										</label>
										📔 <span data-translate="allowLLMSummary">Users can trigger an AI chat <b>!summary</b></span>
									</div>
									<div style="display: inline-block;" title="The bot will only ever respond to mods">
										<label class="switch">
											<input type="checkbox" id="modLLMonly" data-setting="modLLMonly" />
											<span class="slider round"></span>
										</label>
										👩‍🏫 <span data-translate="modLLMonly">Will respond to Moderators only</span>
									</div>
									<!-- <div style="display: inline-block;" title="Text to speech bot messages">
										<label class="switch">
											<input type="checkbox" id="ollamatts" data-setting="ollamatts" />
											<span class="slider round"></span>
										</label>
										🗣️ <span data-translate="enable-ollamatts-bot">Enable TTS for the chat bot</span>
										<i>This requires the bot overlay page to be opened. <a id="botlink" style="color:lightblue;" target="_blank">[BOT OVERLAY PAGE HERE]</a></i>
									</div> -->
									<br />
									
									<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>
									<h3>Give the above chat bot access to additional custom knowledge that you can provide</h3>
									<br>
									<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">Enable the custom knowledge-base (RAG)</span> 
									</div>
									<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>
								
							</div>
						</div>
					</div>
				</div>
				<div class="wrapper">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-chatbot-message-tts-options" />
						<label class="collapsible-label" for="wrapper-chatbot-message-tts-options">
							<span data-translate="message---tts">🗣️ Overlay and TTS for Chat Bot</span>
						</label>  
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group streaming_chat">
									<h3><span data-translate="local-censor-bot">Primary Chat Bot</span></h3>
								
									<div class="link" style="margin:0;" title="This link will only show selected messages, one at a time. Requires the dock to select messages.">
										<div id="chatbot" data-raw="" class="single_message">
											<a target="_blank" id="chatbotlink" href="https://beta.socialstream.ninja/bot.html">https://beta.socialstream.ninja/bot.html</a>
										</div>
									</div>
									
									<i>The overlay page for the chat bot is optional. While it can be used to show messages from the bot, and offers TTS support, you do not need it open to have the bot respond to users in chat, for example.</i>
								</div>
								
								
								<div class="options_group streaming_chat">
									<!-- Main TTS Toggle -->
									<h4>Enable Text to Speech</h4>
									<div style="display: inline-block;" title="Text to speech bot messages">
										<label class="switch">
											<input type="checkbox" id="ollamatts" data-setting="ollamatts" />
											<span class="slider round"></span>
										</label>
										🗣️ <span data-translate="enable-ollamatts-bot">Enable TTS for the chat bot</span>
										<i>Note: Text to Speech for the chat bot requires the bot's overlay page to be opened</i>
									</div>
								</div>
								
								<!-- Global TTS Behavior Options -->
								<div class="options_group tts-behavior-options">
									<h4>TTS Behaviors</h4>
									<div>
										<label class="switch">
											<input type="checkbox" data-param10="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-param10="simpletts" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-say-says-or-someone-says-with-tts">🚫🗣️ Do not say "says" or "The bot says" with TTS </span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param10="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 bot name or "The bot says" when using TTS. </span>
									</div>
									
								</div>
								
								<div class="options_group tts-behavior-options">
									<h4>More TTS options</h4>
									
									<div title="The volume has a max of 1.0 (100%)">
										<label class="switch">
											<input type="checkbox" data-param10="volume" />
											<span class="slider round"></span>
										</label>
										<span data-translate="system-tts-volume">
											🔉 Volume of speech
											<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="1.0" size="5" data-numbersetting10="volume" />
										</span>
									</div>
								</div>
							</div>
							
							
							<div class="tts-provider-selection" style="margin:0 10px 10px 10px">
								<h3>Text-to-Speech Service Provider</h3>
								<select id="ttsProvider10" data-optionsetting10="ttsProvider" class="textInput">
									<option selected value="system">System TTS</option>
									<option value="elevenlabs">ElevenLabs</option>
									<option value="google">Google Cloud</option>
									<option value="speechify">Speechify</option>
								</select>
							</div>
							
							<div id="ttsButton10" class="hidden"></div>
							
							<div class="tts-provider-options options_group" id="systemTTS10">
								<h4>Built-in System TTS Options</h4>
								<i>note: the free built-in TTS plays out via the default audio device. <a style="color:lightblue" target="_blank" href="https://docs.vdo.ninja/guides/windows-tts-audio-capture-methods-for-obs">[LEARN MORE HERE]</a></i>
								<br /><br />
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="lang" data-del10="lang,voice"/>
										<span class="slider round"></span>
									</label>
									<select id="systemLanguageSelect10" data-optionparam10="lang" title="Select the system TTS language"></select>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="rate" />
										<span class="slider round"></span>
									</label>
									<span data-translate="system-tts-rate">
										⏩ Speaking rate
										<input type="number" style="max-width: 6ch;" step="0.1" max="10" min="0.1" value="1.0" 
											size="5" data-numbersetting10="rate" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="pitch" />
										<span class="slider round"></span>
									</label>
									<span data-translate="system-tts-pitch">
										🎵 Pitch
										<input type="number" style="max-width: 6ch;" step="0.1" max="2" min="0.1" value="1.0" 
											size="5" data-numbersetting10="pitch" />
									</span>
								</div>
							</div>
							<!-- ElevenLabs TTS Options -->
							<div class="tts-provider-options options_group hidden" id="elevenlabsTTS10">
								<h4>ElevenLabs TTS Options</h4>
								<div class="textInputContainer" style="width: 95%;">
									<input type="password" id="elevenLabsKey10" class="textInput instant" autocomplete="off" 
										placeholder="Your ElevenLabs API Key" data-textparam10="elevenlabskey" />
									<label for="elevenLabsKey">
										<span data-translate="elevenlabs-api-key">ElevenLabs API Key</span>
									</label>
								</div>
								<!-- Voice Selection -->
								<div class="textInputContainer" style="width: 95%;">
									<input type="text" id="elevenLabsVoiceID10" class="textInput instant" autocomplete="off" placeholder="e.g., VR6AewLTigWG4xSOukaG" data-textparam10="voice11" />
									<label for="elevenLabsVoiceID">
										<span data-translate="elevenlabs-voice-id">ElevenLabs Voice ID</span>
									</label>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevenlabsmodel" />
										<span class="slider round"></span>
									</label>
									<select id="elevenlabsmodelSelect10" data-optionparam10="elevenlabsmodel">
										<option value="eleven_multilingual_v2">eleven_multilingual_v2</option>
										<option value="eleven_turbo_v2_5">eleven_turbo_v2_5</option>
										<option value="eleven_turbo_v2">eleven_turbo_v2</option>
										<option value="eleven_english_sts_v2">eleven_english_sts_v2</option>
										<option value="eleven_multilingual_sts_v2">eleven_multilingual_sts_v2</option>
										<option value="eleven_monolingual_v1">eleven_monolingual_v1</option>
										<option value="eleven_multilingual_v1">eleven_multilingual_v1</option>
									</select>
								</div>
								<!-- Voice Settings -->
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevenrate" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-rate">
										🔊 Speaking Rate
										<input type="number" style="max-width: 6ch;" step="0.25" max="5.0" min="0.25" value="1.0" size="5" data-numbersetting10="elevenrate" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevenlatency" />
										<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="4" size="5" data-numbersetting10="elevenlatency" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevenstability" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-stability">
										🎯 Stability
										<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="0.5" size="5" data-numbersetting10="elevenstability" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevensimilarity" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-similarity">
										🎭 Similarity Boost
										<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="0.75" size="5" data-numbersetting10="elevensimilarity" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevenstyle" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-style">
										🎨 Style
										<input type="number" style="max-width: 6ch;" step="0.01" max="1" min="0" value="0.5" size="5" data-numbersetting10="elevenstyle" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="elevenspeakerboost" />
										<span class="slider round"></span>
									</label>
									<span data-translate="elevenlabs-speaker-boost">🔊 Use Speaker Boost</span>
								</div>
							</div>
							<!-- Google Cloud TTS Options -->
							<div class="tts-provider-options options_group hidden"  id="googleTTS10">
								<h4>Google Cloud TTS Options</h4>
								<div class="textInputContainer" style="width: 95%;">
									<input type="password" id="googleAPIKey10" class="textInput instant" autocomplete="off" placeholder="Your Google API Key" data-textparam10="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="googleVoiceName10" class="textInput instant" autocomplete="off" placeholder="e.g., en-GB-Standard-A" data-textparam10="voicegoogle" />
									<label for="googleVoiceName"><span data-translate="google-voice-name">Google Voice Name</span></label>
								</div>
								<!-- Language Selection -->
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="googlelang" />
										<span class="slider round"></span>
									</label>
									<select id="googleLanguageSelect10" data-optionparam10="googlelang">
										<option value="en-US">English (US)</option>
										<option value="en-GB">English (UK)</option>
										<option value="en-AU">English (Australia)</option>
										<option value="es-ES">Spanish (Spain)</option>
										<option value="es-US">Spanish (US)</option>
										<option value="fr-FR">French</option>
										<option value="de-DE">German</option>
										<option value="it-IT">Italian</option>
										<option value="ja-JP">Japanese</option>
										<option value="ko-KR">Korean</option>
										<option value="pt-BR">Portuguese (Brazil)</option>
										<option value="hi-IN">Hindi</option>
									</select>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="googlerate" />
										<span class="slider round"></span>
									</label>
									<span data-translate="google-tts-rate">
										⏩ Speaking rate
										<input type="number" style="max-width: 6ch;" step="0.1" max="4" min="0.25" value="1.0" 
											size="5" data-numbersetting="googlerate" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="googlepitch" />
										<span class="slider round"></span>
									</label>
									<span data-translate="google-pitch">
										🎵 Pitch
										<input type="number" style="max-width: 6ch;" step="0.1" max="20" min="-20" value="0" size="5" data-numbersetting="googlepitch" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="googleaudioprofile" />
										<span class="slider round"></span>
									</label>
									<span data-translate="google-audio-profile">
										🎚️ Audio Profile
										<select data-optionparam10="googleaudioprofile">
											<option value="handset-class-device">Handset</option>
											<option value="wearable-class-device">Wearable</option>
											<option value="telephony-class-application">Home Assistant</option>
											<option value="large-automotive-class-device">Car Kit</option>
											<option value="headphone-class-device">Headphone</option>
											<option value="small-bluetooth-speaker-class-device">Small Speaker</option>
											<option value="medium-bluetooth-speaker-class-device">Medium Speaker</option>
											<option value="large-home-entertainment-class-device">Large Speaker</option>
										</select>
									</span>
								</div>
								
							</div>
							<!-- Speechify TTS Options -->
							<div class="tts-provider-options options_group hidden" id="speechifyTTS10">
								<h4>Speechify TTS Options</h4>
								<div class="textInputContainer" style="width: 95%;">
									<input type="password" id="speechifyAPIKey10" class="textInput instant" autocomplete="off" placeholder="Your Speechify API Key" data-textparam10="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="speechifyVoiceID10" class="textInput instant" autocomplete="off" placeholder="e.g., henry" data-textparam10="voicespeechify" />
									<label for="speechifyVoiceID"><span data-translate="speechify-voice-id">Speechify Voice ID</span></label>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="speechifyspeed" />
										<span class="slider round"></span>
									</label>
									<span data-translate="speechify-speed">
										⚡ Speed
										<input type="number" style="max-width: 6ch;" step="0.1" max="3" min="0.1" value="1.0" size="5" data-numbersetting10="speechifyspeed" />
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="speechifymodel" />
										<span class="slider round"></span>
									</label>
									<span data-translate="speechify-model">
										🤖 Model
										<select data-optionparam10="speechifymodel">
											<option value="simba-english">English</option>
											<option value="simba-multilingual">Multilingual</option>
										</select>
									</span>
								</div>
								<div>
									<label class="switch">
										<input type="checkbox" data-param10="speechifylang" />
										<span class="slider round"></span>
									</label>
									<select id="speechifyLanguageSelect10" data-optionparam10="speechifylang">
										<option value="en-US">English (US)</option>
										<option value="en-GB">English (UK)</option>
										<option value="es">Spanish</option>
										<option value="fr">French</option>
										<option value="de">German</option>
										<option value="it">Italian</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="wrapper">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-chatbot-Censor-options" />
						<label class="collapsible-label" for="wrapper-chatbot-Censor-options">
							<span data-translate="Censor-chatbot">🤬 Global — Censor Bot</span>
						</label> 
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group streaming_chat">
									<h2><span data-translate="local-censor-bot">Censor bot options 🤖🚫🤬</span></h2>
									<i>Does not respond to chat, but has access to the chat. It can censor, filter, and sanitize incoming live chat message</i><br/>
									<br>
									<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>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			
				<div class="wrapper">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-chatbot-private-options" />
						<label class="collapsible-label" for="wrapper-chatbot-private-options">
							<span data-translate="private-chatbot">🐕‍🦺 Chat Bot — Private Interface</span>
						</label> 
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group streaming_chat">
									<h2 style="margin:0;">Standalone one-on-one chat bot</h2>
									
									
									<div class="link" style="margin:0;" title="This link will only show selected messages, one at a time. Requires the dock to select messages.">
										<div id="privatechatbot" data-raw="" class="single_message">
											<a target="_blank" id="privatechatbotlink" href="https://beta.socialstream.ninja/chatbot.html">https://beta.socialstream.ninja/chatbot.html</a>
										</div>
									</div>
									
									<i>This is different than the chat bot overlay. This allows for private 1 on 1 conversation with your both on a dedicated page, just in case you want to talk privately. It does not have access to the RAG knowledge dataset currently or your other chat histories.</i><br/><br/>
									<div style="display:inline-block;" title="Allow for private communication with the chat bot. Currently doesn't have access to RAG.">
										<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>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				<div class="wrapper">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-chatbot-cohost-options" />
						<label class="collapsible-label" for="wrapper-chatbot-cohost-options">
							<span data-translate="cohost-chatbot">🙂 Multimodal AI Co-Host</span>
						</label> 
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group streaming_chat">
									<h3>A virtual co-host that can both listen, see, and talk back</h3>
									
									<div class="link" style="margin:0;" title="This link will only show selected messages, one at a time. Requires the dock to select messages.">
										<div id="cohost" data-raw="" class="single_message">
											<a target="_blank" id="cohostlink" href="https://beta.socialstream.ninja/cohost.html">https://beta.socialstream.ninja/cohost.html</a>
										</div>
									</div>
									
									<span>
										This is a work-in-progress virtual AI co-host. It can currently view your screen, webcam, and listen to your microphone/audio. It will respond by text or audio, as you desire.<br /><br />
										Down the road this will be able to access your live chat, start/stop your OBS stream, change scenes in OBS, handle events and interactive games with your audience, and participate in your stream as a virtual co-host.
										
									</span>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			

            <div class="tab-content" id="overlay-tab">
                <!-- Emotes Wall Section -->
                <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>
			<div class="tab-content" id="visual-tab">
				<!-- Hype Meter Section -->
				<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="viewersonly" />
											<span class="slider round"></span>
										</label>
										<span data-translate="show-only-viewer-counts">👁️ Show only viewer counts</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-param4="chattersonly" />
											<span class="slider round"></span>
										</label>
										<span data-translate="show-only-active-chatters">💬 Show only active chatters</span>
									</div>
									<div>
										<span data-translate="display-style">
											Display Style
										</span>
										<select data-optionparam4="style">
											<option value="default">Default</option>
											<option value="compact">Compact</option>
											<option value="modern">Modern</option>
											<option value="minimal">Minimal</option>
											<option value="topbar">Dock Style</option>
										</select>
									</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>
			
			<div class="tab-content" id="interactions-tab">
                <!-- Tip Jar Section -->
                <div class="link" title="This link shows a tally of donations received">
                    <h2 class="tipjar_title">
                        <span data-translate="tipjar">Tip Jar</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="#tipjarhref" title="Jump to the tip jar link options."><span data-translate="options">[options]</span></a>
                    </h2>
                    <h3>
                        <span data-translate="when-enabled-a-tally-tipjar">
                            When enabled, a tally of donations received is kept.
                        </span>
                    </h3>
                    <div id="tipjar" data-raw="" class="tipjar"></div>
                </div>
                <a href="" id="tipjarhref"></a>
				
				<div class="wrapper hidden">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-tipjar-general-options" />
						<label class="collapsible-label" for="wrapper-tipjar-general-options"><span data-translate="enable-and-customize">📊 Customize</span></label>
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group tipjar">
									<h3><span data-translate="other-customization-options">Other customization options</span></h3>
									<div>
										<label class="switch">
											<input type="checkbox" data-param12="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>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tab-content" id="tools-tab">
				<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="removefromwaitlist"><span data-translate="removefromwaitlist">🔝 Remove top entry</span></button>
						<button class="glowingButton" data-action="highlightwaitlist"><span data-translate="highlightwaitlist">🔦 Highlight top entry</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>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="waitlistmembersonly" />
											<span class="slider round"></span>
										</label>
										👑 <span data-translate="members-only-waitlist"> Only members can enter</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="Enter {trigger} to enter!" 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 class="switch">
											<input type="checkbox" data-target="poll" data-setting="pollSpam" />
											<span class="slider round"></span>
										</label>
										<span>🗳️ Allow multiple votes per user</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-target="poll" data-setting="pollTally" />
											<span class="slider round"></span>
										</label>
										<span> ✌️ Show number of votes instead of perecent</span>
									</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>
									<div id="multipleChoiceOptions" class="hidden">
										<br>
										<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>
									<span class="hidden">
										<br>
										<label class="switch">
											<input type="checkbox" data-setting="pollTimerState" />
											<span class="slider round"></span>
										</label>
										Timer (seconds): <input type="number" style="max-width: 5ch;" max="999999" min="1" value="60" size="4" data-numbersetting="pollTimer" />
									</span>
									<br>
									<div style="display:flex">
										<button class="glowingButton" style="flex:2" data-action="closepoll" data-target="poll"><span>End Poll</span></button>
										<button class="glowingButton" style="flex:2" data-action="resetpoll" data-target="poll"><span>Reset Poll</span></button>
									</div>
									
									<h3>Poll Presets</h3>
									<div  style="display:flex">
										<button class="glowingButton" style="flex:2" data-action="savePoll">
											<span data-translate="save-current-poll">Save Current Poll</span>
										</button>
										<button class="glowingButton" style="flex:2" data-action="createNewPoll">
											<span data-translate="create-new-poll">Create New Poll</span>
										</button>
									</div>
									<div id="savedPollsList" style="max-height: 200px; overflow-y: auto; margin-top: 10px;">
										<!-- Saved polls will be listed here -->
									</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="height:20px"><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>
									
										<div>
											<label class="switch">
												<input type="checkbox" data-param6="speed" />
												<span class="slider round"></span>
											</label>
											<span data-translate="ticker-speed">
												⏲️ Speed (relative) <input type="number" style="max-width: 8ch;" max="10" min="0.01" value="1" size="3" data-numbersetting6="speed" />x
											</span>
										</div>
										<br>
										
										<div>
											<span data-translate="display-style">
												Display Style
											</span>
											<select data-optionparam6="style">
												<option value="">Default</option>
												<option value="modern">Modern</option>
												<option value="corporate">Corporate</option>
												<option value="minimal">Minimal</option>
												<option value="stock">Stock Market</option>
												<option value="cnn">CNN Style</option>
												<option value="fox">FOX Style</option>
											</select>
										</div>
										<br>
										<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="Word cloud overlay">
                    <h2 class="wordcloud_mode_title">
                        <span data-translate="wordcloudmeter">Word Cloud</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="#wordcloud" title="Jump to the wordcloud link options."><span data-translate="options">[options]</span></a>
                    </h2>
                    <h3>
                        <span data-translate="when-enabled-a-wordcloud">
                            A wordcloud overlay. Chat messages that contain a single word are allowed.
                        </span>
                    </h3>
                    <div id="wordcloud" data-raw="" class="streaming_chat"><a href="" id="wordcloudlink"></a></div>
                </div>
				
				<div class="wrapper">
					<div class="collapsible">
						<input type="checkbox" class="collapsible-input" id="wrapper-wordcloud-general-options" />
						<label class="collapsible-label" for="wrapper-wordcloud-general-options"><span data-translate="enable-and-customize">📊 Enable and customize</span></label>
						<div class="collapsible-text">
							<div class="options">
								<div class="options_group wordcloud">
									<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="wordcloud" />
											<span class="slider round"></span>
										</label>
										<span data-translate="enable-the-wordcloud">🚦 Enable </span>
									</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>
									<br>
									<div class="textInputContainer" style="width: 95%;" title="Load a font family from Google Fonts">
										<input type="text" id="googlefont7" class="textInput instant" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textparam7="googlefont" />
										<label for="googlefont7"><span data-translate="googlefont">&gt; a specify a Google Font name</span></label>
									</div>
									<br>
									<div>
										<label class="switch">
											<input type="checkbox" data-param7="scale=2" />
											<span class="slider round"></span>
										</label>
										2️⃣✖️<span data-translate="largerwordcloud"> Double the font size</span>
									</div>
									<br>
									<div>
										<span data-translate="display-style-wordcloud">
											Coloring and basic styling option
										</span>
										<select data-optionparam7="style">
											<option value="default">Default</option>
											<option value="neon">Neon</option>
											<option value="minimal">Minimal</option>
											<option value="retro">Retro</option>
										</select>
									</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>
					<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>
										<label class="switch" title="Loop clips continuously or show images until at least minimum playout time is reached. Default is sub-second.">
											<input type="checkbox" data-param9="showtime" />
											<span class="slider round"></span>
										</label>
										<span data-translate="minimum-playout-time">
											⏲️ Minimum default playout time <input type="number" style="max-width: 8ch;" max="999999" min="1" value="3000" size="6" data-numbersetting9="showtime" />ms
										</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>
			
            <div class="tab-content" id="global-tab">
                <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="Trigger an inbound message starting when there is an ad starting/stopping">
										<label class="switch">
											<input type="checkbox" data-setting="twichadannounce" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/twitch.png" style="display: inline-block;" />🅰️ <span data-translate="twichadannounce"> Announce when an ad plays/stops in Twitch</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="Instead of Top Chat, which is default, auto-select Live Chat; Youtube Live chat pop out.">
										<label class="switch">
											<input type="checkbox" data-setting="autoLiveYoutube" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/youtube.png" style="display: inline-block;" />🤷‍♂️ <span data-translate="autoLiveYoutube"> Auto-select <b>Live Chat</b> in Youtube Popout</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 title="Hide "Paid Promotion" banners in Youtube">
										<label class="switch">
											<input type="checkbox" data-setting="hidePaidPromotion" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/youtube.png" style="display: inline-block;" /> <span data-translate="paid-promotion">Hide "Paid Promotion" banners in Youtube</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 <a href="./chathistory.html" id="chathistory" style="color:lightblue" target="blank">local message database</a> </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="Remove links when sending messages to Tiktok from SocialStreamNinja">
										<label class="switch">
											<input type="checkbox" data-setting="notiktoklinks" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/tiktok.png" style="display: inline-block;" />🚫🔗
										<span data-translate="no-tiktok-links"> Do not post links into TikTok's chat</span>
									</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="Treat coin-bought items as gifts on Tiktok, such as roses">
										<label class="switch">
											<input type="checkbox" data-setting="tiktokdonations" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/tiktok.png" style="display: inline-block;" />🌹
										<span data-translate="tiktokdonations"> Treat roses et al as donations on 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="Delay capturing messages from Kick to give time for messages to be deleted if needed; 3 extra seconds of delay">
										<label class="switch">
											<input type="checkbox" data-setting="delaykick" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/kick.png" style="display: inline-block;" />
										<span data-translate="delay-kick"> Delay Kick to give mods/bots time to delete</span>
									</div>
									<div title="Delay capturing messages from Twitch to give time for messages to be deleted if needed; 3 extra seconds of delay">
										<label class="switch">
											<input type="checkbox" data-setting="delaytwitch" />
											<span class="slider round"></span>
										</label>
										<img class="icon" src="./sources/images/twitch.png" style="display: inline-block;" />
										<span data-translate="delay-twitch"> Delay twitch 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 FFZ emotes - YT/TW channels + globals">
										<label class="switch">
											<input type="checkbox" data-setting="ffz" />
											<span class="slider round"></span>
										</label>
										<span data-translate="add-ffz-to-chat"> 🌭 Add FFZ 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>
										<label class="switch">
											<input type="checkbox" data-setting="postdiscord" />
											<span class="slider round"></span>
										</label>
										<div class="textInputContainer" style="display: inline-block; width: 250px;">
											<input type="text" id="postserverdiscord" class="textInput" autocomplete="off" placeholder="Provide Discord Webhook URL" data-textsetting="postserverdiscord" />
											<label for="postserverdiscord"><span data-translate="send-all-to-post-server-discord">&gt; Donations published to Discord</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>
										<label class="switch">
											<input type="checkbox" id="forwardcommands2twitch" data-setting="forwardcommands2twitch" />
											<span class="slider round"></span>
										</label>
										<span data-translate="forwardcommands2twitch">⏩ Forward chat !commands to Twitch</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>
										<label class="switch">
											<input type="checkbox" data-setting="botReplyMessageFull" />
											<span class="slider round"></span>
										</label>
										🎯 <span data-translate="command-match-strict">Trigger only if full message matches exactly</span>
									</div>

									<div id="botReplyMessages"></div>
									
									<h3><span data-translate="trigger-midi-note">Trigger MIDI note on command</span></h3>
									Default Output MIDI Device:<select id="midiDeviceSelect" style="max-width: calc(100% - 50px);margin: 5px;" class="textInput" data-optionsetting="midiOutputDevice"></select>
									<a href="https://socialstream.ninja/midimonitor" style="color:lightblue;" title="Open a page to debug MIDI with" target="_blank">⚙️</a>
									<div id="midiCommands"></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; show you first reply only</span>
									</div>
									 <div title="Only show replies from you if they are from the selected source">
										<label class="switch">
											<input type="checkbox" id="thissourceonly" data-setting="thissourceonly" />
											<span class="slider round"></span>
										</label>
										<span data-translate="custom-profile">💬🎯 Only show your replies from:</span>
										<select data-optionsetting="thissourceonlytype">
											<option value="twitch">Twitch</option>
											<option value="youtube">YouTube</option>
											<option value="kick">Kick</option>
											<option value="tiktok">TikTok</option>
											<option value="instagram">Instagram</option>
											<option value="facebook">Facebook</option>
											<option value="rumble">Rumble</option>
										</select>
									</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>
									
									<div title="Filter out third party relayed messages from capture; restream.io, beam, etc">
										<label class="switch">
											<input type="checkbox" id="ignorealternatives" data-setting="ignorealternatives" />
											<span class="slider round"></span>
										</label>
										<span data-translate="hide-alternative-sources">⏩🚫 Filter out 3rd-party relayed messages </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>
										<button id="uploadBadwordsButton" class="glowingButton" style="width: 160px; margin-left: 0px;" title="Upload a custom list of bad words; text file only, one word per line."><span>⬆️ Upload Badwords</span></button>
										<button id="deleteBadwordsButton" class="glowingButton" style="width: 160px; margin-left: 0px;" title="Delete any uploaded bad words list; the default list will be used instead."><span>⛔ Delete</span></button>
										
									</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>
									
									<h3><span data-translate="white-black-list">Blocked / Allowed Users:</span></h3>
									<p>Source type can be something like 'twitch', 'kick', or 'youtube'</p> 
									
									<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" />
											🤍 <span data-translate="only-allow-specified-users">Show only the specified users (whitelist)</span>
										</div>
									</div>
									
									
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="blacklistuserstoggle" />
											<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="blacklistusers" class="textInput" autocomplete="off" placeholder="Provide usernames, comma, separated" data-textsetting="blacklistusers" />
											🔮 <span data-translate="">Blocked users (blacklisted)</span>
										</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><i><a href="#colorizename" style="color:lightblue">Name colors in the dock won't show without <b>&color</b></a></i></div>
								
									<div title="Sets the color for a name to the color of the source's branding. This does not cause a name to be displayed as colorful though- you need to enable that option.">
										<label class="switch">
											<input type="checkbox" data-setting="colorofsource" />
											<span class="slider round"></span>
										</label>
										<span data-translate="colorofsource">🌈🎯 Set name colors to match the site's branding</span>
									</div>
									
									<div title="If a name lacks color data, randomly add one. This does not cause a name to be displayed as colorful though- you need to enable that option.">
										<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>
										<br>
										<i>
											<a class="options-link rounded_area" href="#colorizename" title="Jump to the color name option.">Note: This needs to be used in conjuction with <b>&color</b>
											</a>
										</i>
									</div>

									<div title="Randomly sets the color for a name. This does not cause a name to be displayed as colorful though- you need to enable that option.">
										<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 member status</span>
									</div>
									
									<div title="Makes it easier to see names on darker backgrounds.">
										<label class="switch"> 
											<input type="checkbox" data-setting="lightencolorname" />
											<span class="slider round"></span>
										</label>
										<span data-translate="lightencolorname">☀️ Lighten and desaturat name colors</span>
									</div>
									
									<div class="textInputContainer" style="width: 95%;" title="Trivial events can be highlighted in the dock using &trivialevents">
										<input type="text" id="highlightword" class="textInput" autocomplete="off" placeholder="Mark as trivial event if body contains" data-textsetting="highlightword" />
										<label for="highlightword"><span data-translate="highlightword">&gt; Mark as trivial event if body contains</span></label>
									</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">
								
									<h3><span data-translate="special-user-types">Assign roles/classes to certain users</span></h3>
									<p>Source type can be something like 'twitch', 'kick', or 'youtube'</p> 
									<div>
										<div
											class="textInputContainer"
											style="width: 95%;"
											title="Note:
					Bot name(s) to help identify them.
					The list of names should be comma separated.."
										>
											
											<input type="text" id="botnamesext" data-was="mynameext" class="textInput" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textsetting="botnamesext" />
											🤖 <span data-translate="hostbot-names">Identify by name who are <b>bots</b></span>
										</div>
									</div>
									<div>
										<div
											class="textInputContainer"
											style="width: 95%;"
											title="Note:
					Mod name(s) to help identify them.
					The list of names should be comma separated.
					This is like the previous list of names, except with its own flag/options"
										>
											<input type="text" id="modnamesext" class="textInput" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textsetting="modnamesext" />
											👩‍🏫 <span data-translate="modnamesext">Identify by name who are <b>mods</b></span>
										</div>
									</div>
									<div>
										<div
											class="textInputContainer"
											style="width: 95%;"
											title="Note:
					VIP name(s) to help identify them.
					The list of names should be comma separated.
					This is like the previous list of names, except with its own flag/options"
										>
											<input type="text" id="viplistusers" class="textInput" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textsetting="viplistusers" />
											⭐ <span data-translate="viplistusers">Identify by name who are <b>VIPs</b></span>
										</div>
									</div>
									<div>
										<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" />
											👑 <span data-translate="admin-names"><b>Privileged</b> (admin) users</span>
										</div>
									</div>
									<div>
										<div
											class="textInputContainer"
											style="width: 95%;"
											title="Note:
					Host name(s) to help identify them.
					The list of names should be comma separated.
					This is like the previous list of names, except with its own flag/options"
										>
											<input type="text" id="hostnamesext" class="textInput" autocomplete="off" placeholder="eg: name1,name 2,Name3" data-textsetting="hostnamesext" />
											🕺 <span data-translate="hostnamesext">Identify the <b>hosts'</b> name</span>
										</div>
									</div>
									<br />
									<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 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-bot-messages">🤖🚫 Filter out messages for listed bots</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="hidehostsext" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-show-host-messages">🤖🚫 Filter out messages for listed hosts</span>
									</div>
									<div>
										<label class="switch">
											<input type="checkbox" data-setting="hidemodsext" />
											<span class="slider round"></span>
										</label>
										<span data-translate="do-not-show-mod-messages">🤖🚫 Filter out messages for listed mods</span>
									</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 YOUR 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>
			</div>
			<p style="text-align: right; padding-bottom: 11px;">
                <a style="color:lightblue" href="https://socialstream.ninja/TOS" target="_blank">Terms of Service</a> | 
                <a style="color:lightblue" href="https://socialstream.ninja/privacy" target="_blank">Privacy Policy</a> | 
                <a style="color:lightblue" href="https://www.youtube.com/t/terms" target="_blank">YouTube's Terms of Service</a>
            </p>
            <span>
                <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>
            </span>
        </div>
		<script>
            // JavaScript for Tab Functionality
            document.addEventListener('DOMContentLoaded', function() {
                const tabs = document.querySelectorAll('.main-tab');
                const tabContents = document.querySelectorAll('.tab-content');
                
                tabs.forEach(tab => {
                    tab.addEventListener('click', () => {
                        const targetTab = tab.getAttribute('data-tab');
                        
                        // Remove active class from all tabs and contents
                        tabs.forEach(t => t.classList.remove('active'));
                        tabContents.forEach(content => content.classList.remove('active'));
                        
                        // Add active class to clicked tab and corresponding content
                        tab.classList.add('active');
                        document.getElementById(`${targetTab}-tab`).classList.add('active');
                    });
                });
            });
        </script>
    </body>
</html>