@lumiastream/ui 0.7.7 → 0.8.1

package/dist/ViewersList.js

@@ -0,0 +1,167 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/lumia-ui.css
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff !important;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  pointer-events: none;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
+
+// src/components/ViewersList/ViewersList.tsx
+import * as React from "react";
+import { useMemo, useState } from "react";
+import classNames2 from "classnames";
+
+// src/components/PlatformIcon/PlatformIcon.tsx
+import classNames from "classnames";
+
+// src/assets/platforms/discord.svg
+var discord_default = 'data:image/svg+xml,<svg width="106" height="84" viewBox="0 0 106 84" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M87.6564 10.3044C81.1722 7.33742 74.33 5.21982 67.3004 4.00432C67.2367 3.99362 67.1713 4.00292 67.1131 4.03082C67.0549 4.05872 67.0068 4.10392 66.9754 4.16012C66.0941 5.71802 65.1192 7.75572 64.4379 9.35102C56.8605 8.20442 49.153 8.20442 41.5757 9.35102C40.8157 7.57392 39.956 5.84082 39.0007 4.16012C38.9686 4.10452 38.9204 4.05982 38.8624 4.03202C38.8044 4.00422 38.7393 3.99452 38.6757 4.00432C31.6445 5.21322 24.8008 7.33202 18.3196 10.3044C18.2642 10.3255 18.2178 10.3652 18.1884 10.4166C5.22598 29.7281 1.66978 48.5661 3.41358 67.1673C3.41978 67.2545 3.47608 67.3418 3.54478 67.3978C11.093 72.9727 19.5358 77.229 28.5133 79.986C28.5767 80.005 28.6448 80.005 28.7077 79.983C28.7707 79.962 28.8252 79.921 28.8633 79.867C30.7883 77.25 32.5007 74.4893 33.9757 71.5854C34.0065 71.5256 34.017 71.4575 34.0057 71.3913C33.9945 71.325 33.962 71.2641 33.9132 71.2178C33.8809 71.1874 33.8426 71.164 33.8007 71.1492C31.108 70.1174 28.5001 68.8777 26.0008 67.4415C25.931 67.402 25.8791 67.3373 25.8558 67.2607C25.8325 67.1842 25.8397 67.1016 25.8758 67.0302C25.8971 66.9838 25.9292 66.9432 25.9696 66.9118C26.4946 66.5192 27.0196 66.1079 27.5195 65.6966C27.5637 65.6612 27.6167 65.6385 27.6729 65.6308C27.729 65.6231 27.7862 65.6308 27.8383 65.653C44.2069 73.1059 61.9254 73.1059 78.094 65.653C78.148 65.6297 78.2074 65.6214 78.2657 65.6291C78.324 65.6368 78.3792 65.6601 78.4253 65.6966C78.9253 66.1079 79.4503 66.5192 79.9753 66.9118C80.0178 66.9428 80.052 66.9838 80.0747 67.0312C80.0975 67.0786 80.1081 67.1308 80.1056 67.1833C80.1031 67.2358 80.0876 67.2868 80.0605 67.3319C80.0334 67.3769 79.9955 67.4146 79.9503 67.4415C77.4566 68.8909 74.8454 70.1291 72.1441 71.143C72.101 71.1585 72.0619 71.1834 72.0295 71.2157C71.9971 71.248 71.9722 71.287 71.9566 71.3299C71.9421 71.3716 71.9363 71.4157 71.9396 71.4596C71.9428 71.5035 71.955 71.5464 71.9753 71.5854C73.4753 74.4831 75.194 77.25 77.0815 79.867C77.1197 79.921 77.1741 79.962 77.2371 79.983C77.3 80.005 77.3681 80.005 77.4315 79.986C86.424 77.238 94.881 72.9807 102.438 67.3978C102.475 67.3717 102.507 67.3374 102.53 67.2975C102.552 67.2576 102.566 67.2131 102.569 67.1673C104.656 45.6622 99.075 26.98 87.7814 10.4228C87.77 10.3955 87.753 10.3708 87.7315 10.3504C87.71 10.33 87.6844 10.3144 87.6564 10.3044ZM36.4195 55.8383C31.4883 55.8383 27.432 51.3267 27.432 45.7931C27.432 40.2532 31.4133 35.7416 36.4195 35.7416C41.4632 35.7416 45.4819 40.2906 45.4069 45.7931C45.4069 51.3267 41.4257 55.8383 36.4195 55.8383ZM69.6441 55.8383C64.7192 55.8383 60.6567 51.3267 60.6567 45.7931C60.6567 40.2532 64.6379 35.7416 69.6441 35.7416C74.6878 35.7416 78.7128 40.2906 78.6315 45.7931C78.6315 51.3267 74.6878 55.8383 69.6441 55.8383Z" fill="%235C65EB"/>%0A</svg>%0A';
+
+// src/assets/platforms/facebook.svg
+var facebook_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M15.725 22V14.255H18.325L18.714 11.237H15.724V9.31C15.724 8.436 15.967 7.83999 17.221 7.83999H18.819V5.14C18.0451 5.05764 17.2673 5.01758 16.489 5.02C14.185 5.02 12.608 6.427 12.608 9.01001V11.237H9.99998V14.255H12.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2H20.896C21.506 2 22 2.494 22 3.104V20.896C22 21.506 21.506 22 20.896 22H15.725Z" fill="%23087BEA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M15.725 22V14.255H18.325L18.714 11.237H15.724V9.31C15.724 8.436 15.967 7.83999 17.221 7.83999H18.819V5.14C18.0451 5.05764 17.2673 5.01758 16.489 5.02C14.185 5.02 12.608 6.427 12.608 9.01001V11.237H9.99998V14.255H12.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2H20.896C21.506 2 22 2.494 22 3.104V20.896C22 21.506 21.506 22 20.896 22H15.725Z" fill="url(%23paint0_linear_2516_9002)"/>%0A<defs>%0A<linearGradient id="paint0_linear_2516_9002" x1="12" y1="21.4156" x2="12" y2="2" gradientUnits="userSpaceOnUse">%0A<stop stop-color="%230062E0"/>%0A<stop offset="1" stop-color="%2319AFFF"/>%0A</linearGradient>%0A</defs>%0A</svg>%0A';
+
+// src/assets/platforms/kick.svg
+var kick_default = 'data:image/svg+xml,<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H9.62501V8H11.5V6H13.375V4H19V10H17.125V12H15.2501V14H17.125V16H19V22H13.375V20H11.5V18H9.62501V22H4V4Z" fill="%2342FD0A"/>%0A</svg>%0A';
+
+// src/assets/platforms/lumiaLogo.svg
+var lumiaLogo_default = 'data:image/svg+xml,<svg width="310" height="310" viewBox="0 0 310 310" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M126.553 283.309C127.43 287.957 131.415 291.316 136.051 291.316H169.708C175.05 291.316 179.381 286.894 179.381 281.44C179.381 275.986 175.05 271.564 169.708 271.564H144.039L143.398 268.171H175.938C181.167 268.171 185.449 263.929 185.607 258.593C186.654 223.171 200.493 199.947 215.267 176.455C215.835 175.551 216.406 174.646 216.978 173.739C231.175 151.218 246.29 127.243 246.29 93.0565C246.29 62.8306 234.545 39.9721 216.68 24.8443C199.061 9.92486 176.088 3 153.931 3C111.466 3 64 34.5184 64 94.0485C64 125.271 77.7676 152.459 90.9936 175.734C93.021 179.302 95.0189 182.748 96.9655 186.105C101.552 194.017 105.855 201.438 109.59 208.807C114.864 219.212 118.437 228.471 119.591 237.069C120.254 242.013 124.426 245.675 129.313 245.603C134.2 245.532 138.268 241.75 138.792 236.788C139.637 228.792 143.857 219.28 150.879 208.043C156.859 198.472 164.275 188.55 172.113 178.062C173.39 176.353 174.678 174.629 175.974 172.889C185.05 160.696 194.398 147.799 201.456 134.841C208.481 121.94 213.766 108.051 213.766 93.8831C213.766 76.7114 207.388 62.1228 196.289 51.9119C185.292 41.7953 170.319 36.5602 153.931 36.5602C121.603 36.5602 96.5239 63.0978 96.5239 93.8831C96.5239 102.894 98.2899 116.42 103.002 128.055C107.497 139.153 116.502 152.529 132.734 152.529C140.658 152.529 147.148 149.581 151.972 144.611C156.532 139.912 159.099 133.942 160.625 128.478C163.474 118.279 163.454 106.831 163.444 100.801C163.444 100.461 163.443 100.139 163.443 99.8347C163.443 94.3804 159.112 89.9589 153.77 89.9589C148.427 89.9589 144.096 94.3804 144.096 99.8347L144.096 100.278C144.097 106.623 144.099 115.617 142.02 123.061C140.977 126.793 139.63 129.264 138.229 130.709C137.091 131.881 135.571 132.777 132.734 132.777C128.902 132.777 124.639 129.786 120.881 120.508C117.341 111.767 115.871 100.908 115.871 93.8831C115.871 74.0802 132.215 56.3118 153.931 56.3118C166.346 56.3118 176.454 60.252 183.337 66.5848C190.118 72.8234 194.419 81.9583 194.419 93.8831C194.419 103.191 190.885 113.604 184.547 125.243C178.239 136.824 169.677 148.705 160.57 160.938C159.324 162.612 158.067 164.294 156.804 165.983C149.006 176.413 141.025 187.088 134.568 197.42C132.864 200.148 131.222 202.918 129.687 205.719C128.753 203.708 127.777 201.712 126.773 199.73C122.771 191.834 118.024 183.646 113.312 175.518C111.429 172.269 109.551 169.03 107.728 165.822C94.5791 142.683 83.3469 119.531 83.3469 94.0485C83.3469 47.7729 119.698 22.7516 153.931 22.7516C172.389 22.7516 190.759 28.5564 204.329 40.047C217.653 51.3293 226.943 68.5611 226.943 93.0565C226.943 121.353 214.634 140.915 199.947 164.257C199.628 164.764 199.308 165.273 198.986 165.784C185.181 187.737 170.104 212.49 166.842 248.419H131.683C128.796 248.419 126.061 249.735 124.223 252.007C122.386 254.279 121.638 257.27 122.184 260.164L126.553 283.309Z" fill="%23FF4469"/>%0A<path d="M167.2 295.575C167.2 304.617 160.299 306.817 151.787 306.817C143.275 306.817 136.375 304.617 136.375 295.575H167.2Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M185.804 111.539C186.466 109.832 185.647 107.901 183.975 107.226L172.394 102.546C170.722 101.87 168.83 102.706 168.169 104.413C167.507 106.119 168.326 108.051 169.998 108.726L181.579 113.406C183.251 114.082 185.142 113.246 185.804 111.539Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M123.949 113.947C124.697 115.616 126.628 116.35 128.263 115.587L139.59 110.297C141.225 109.533 141.944 107.561 141.196 105.892C140.448 104.222 138.516 103.488 136.881 104.252L125.555 109.542C123.92 110.306 123.201 112.278 123.949 113.947Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M141.106 94.8617C141.679 93.122 140.762 91.2371 139.058 90.6518L127.254 86.5969C125.55 86.0115 123.703 86.9473 123.13 88.687C122.557 90.4268 123.473 92.3116 125.177 92.897L136.982 96.9519C138.686 97.5372 140.532 96.6014 141.106 94.8617Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M147.751 87.1376C149.438 86.5012 150.3 84.5896 149.676 82.8679L145.355 70.9337C144.732 69.212 142.86 68.3322 141.173 68.9686C139.487 69.605 138.625 71.5166 139.248 73.2383L143.569 85.1725C144.193 86.8942 146.065 87.774 147.751 87.1376Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M159.968 86.4852C161.656 87.1168 163.526 86.2316 164.145 84.5081L168.433 72.5617C169.052 70.8382 168.185 68.9291 166.496 68.2975C164.808 67.666 162.938 68.5511 162.32 70.2746L158.032 82.221C157.413 83.9445 158.28 85.8537 159.968 86.4852Z" fill="%23FF4469"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M167.942 93.9614C168.717 95.6179 170.66 96.3197 172.283 95.5289L183.524 90.0507C185.146 89.26 185.834 87.2761 185.059 85.6196C184.285 83.9631 182.341 83.2613 180.719 84.052L169.478 89.5302C167.855 90.321 167.168 92.3049 167.942 93.9614Z" fill="%23FF4469"/>%0A</svg>%0A';
+
+// src/assets/platforms/tiktok.svg
+var tiktok_default = 'data:image/svg+xml,<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M47.163 27.1414C50.7816 29.7268 55.2145 31.2479 60.0023 31.2479V22.0395C59.0962 22.0397 58.1924 21.9452 57.306 21.7575V29.0059C52.5185 29.0059 48.0862 27.4847 44.4666 24.8995V43.6913C44.4666 53.0918 36.8421 60.712 27.4372 60.712C23.9281 60.712 20.6665 59.6516 17.957 57.8331C21.0494 60.9934 25.3619 62.9538 30.133 62.9538C39.5384 62.9538 47.1633 55.3337 47.1633 45.9327V27.1414H47.163V27.1414ZM50.4892 17.8512C48.6399 15.8319 47.4257 13.2223 47.163 10.3372V9.15283H44.6078C45.251 12.8197 47.4447 15.9525 50.4892 17.8512ZM23.9056 50.6194C22.8724 49.2653 22.314 47.6089 22.3165 45.9058C22.3165 41.6063 25.8039 38.1203 30.1065 38.1203C30.9083 38.1201 31.7054 38.2428 32.4695 38.4851V29.0709C31.5765 28.9486 30.6752 28.8966 29.7743 28.9157V36.2433C29.0096 36.0009 28.2122 35.8778 27.4101 35.8786C23.1076 35.8786 19.6203 39.3643 19.6203 43.6643C19.6203 46.7048 21.3635 49.3371 23.9056 50.6194Z" fill="%23FF004F"/>%0A<path d="M44.4647 24.8993C48.0843 27.4845 52.5166 29.0057 57.3041 29.0057V21.7573C54.6318 21.1884 52.266 19.7926 50.4873 17.8512C47.4427 15.9523 45.2491 12.8195 44.6059 9.15283H37.8942V45.9323C37.879 50.2201 34.3975 53.6919 30.1042 53.6919C27.5742 53.6919 25.3266 52.4866 23.9031 50.6194C21.3612 49.3371 19.6181 46.7046 19.6181 43.6645C19.6181 39.3649 23.1053 35.8788 27.4079 35.8788C28.2322 35.8788 29.0267 36.0071 29.772 36.2435V28.9159C20.5324 29.1067 13.1016 36.6524 13.1016 45.9325C13.1016 50.5651 14.952 54.7648 17.9553 57.8333C20.6648 59.6516 23.9264 60.7122 27.4355 60.7122C36.8406 60.7122 44.4649 53.0916 44.4649 43.6913V24.8993H44.4647Z" fill="white"/>%0A<path d="M57.3049 21.7573V19.7974C54.8951 19.8011 52.5327 19.1265 50.4882 17.851C52.298 19.8315 54.6813 21.197 57.3049 21.7573ZM44.6067 9.1528C44.5454 8.80237 44.4983 8.44962 44.4656 8.09553V6.91113H35.1985V43.691C35.1837 47.9782 31.7024 51.45 27.4087 51.45C26.1481 51.45 24.958 51.151 23.904 50.6195C25.3274 52.4865 27.5751 53.6917 30.105 53.6917C34.398 53.6917 37.88 50.2202 37.895 45.9325V9.1528H44.6067ZM29.7733 28.9158V26.8294C28.9989 26.7236 28.2182 26.6705 27.4366 26.6709C18.0308 26.6707 10.4062 34.2912 10.4062 43.691C10.4062 49.5842 13.4028 54.7778 17.9564 57.8329C14.9531 54.7646 13.1026 50.5647 13.1026 45.9323C13.1026 36.6523 20.5333 29.1066 29.7733 28.9158Z" fill="%2300F2EA"/>%0A</svg>%0A';
+
+// src/assets/platforms/twitch.svg
+var twitch_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M4.875 4L3 7.125V21.5H8V24H10.5L13 21.5H16.125L21.75 15.875V4H4.875ZM19.25 14.625L16.125 17.75H13L10.5 20.25V17.75H6.75V6.5H19.25V14.625Z" fill="%23874BF6"/>%0A<path d="M14.875 9H16.75V14H14.875V9Z" fill="%23874BF6"/>%0A<path d="M11.125 9H13V14H11.125V9Z" fill="%23874BF6"/>%0A</svg>%0A';
+
+// src/assets/platforms/twitter.svg
+var twitter_default = 'data:image/svg+xml,<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M387.014 83.988C376.599 99.48 363.821 112.686 348.68 123.607C348.83 126.535 348.905 129.846 348.905 133.537C348.905 154.05 345.914 174.587 339.933 195.149C333.952 215.711 324.816 235.392 312.524 254.193C300.233 272.994 285.591 289.65 268.6 304.161C251.609 318.672 231.185 330.243 207.327 338.872C183.47 347.502 157.902 351.817 130.622 351.817C88.0468 351.817 48.8396 340.323 13 317.336C19.3611 318.044 25.4619 318.398 31.3025 318.398C66.8703 318.398 98.6381 307.442 126.606 285.532C110.022 285.228 95.1701 280.123 82.0499 270.217C68.9297 260.311 59.9007 247.653 54.9628 232.243C59.8435 233.173 64.6607 233.638 69.4142 233.638C76.2565 233.638 82.9893 232.745 89.6125 230.96C71.9146 227.416 57.2326 218.601 45.5667 204.516C33.9012 190.432 28.0684 174.175 28.0684 155.747V154.797C38.9314 160.812 50.5186 164.011 62.8299 164.395C52.3458 157.406 44.0334 148.291 37.8929 137.052C31.752 125.813 28.6815 113.65 28.6815 100.563C28.6815 86.761 32.14 73.9088 39.0571 62.0062C58.3033 85.6243 81.6241 104.501 109.019 118.635C136.415 132.77 165.806 140.62 197.191 142.185C195.852 136.607 195.181 130.785 195.179 124.72C195.179 103.545 202.673 85.4646 217.66 70.4788C232.647 55.4929 250.728 48 271.903 48C294.073 48 312.747 56.0725 327.925 72.2175C345.266 68.7826 361.503 62.5696 376.636 53.5787C370.806 71.9272 359.572 86.0818 342.933 96.0425C358.226 94.2253 372.92 90.2071 387.014 83.988Z" fill="%231D9BF0"/>%0A</svg>%0A';
+
+// src/assets/platforms/youtube.svg
+var youtube_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12.5612 5H12.6669C13.643 5.00347 18.5892 5.03817 19.9229 5.38749C20.3261 5.4941 20.6935 5.7019 20.9884 5.99013C21.2833 6.27836 21.4953 6.63692 21.6033 7.02998C21.7233 7.46952 21.8076 8.05133 21.8646 8.65166L21.8765 8.77195L21.9026 9.0727L21.9121 9.19298C21.9893 10.2502 21.9988 11.2403 22 11.4566V11.5434C21.9988 11.7678 21.9882 12.825 21.9026 13.9262L21.8931 14.0476L21.8825 14.1679C21.823 14.8295 21.7352 15.4865 21.6033 15.97C21.4957 16.3632 21.2837 16.722 20.9888 17.0102C20.6939 17.2985 20.3262 17.5062 19.9229 17.6125C18.5454 17.9734 13.3093 17.9988 12.5837 18H12.4151C12.0481 18 10.5304 17.9931 8.93906 17.9399L8.73717 17.9329L8.63385 17.9283L8.43078 17.9202L8.2277 17.9121C6.90949 17.8554 5.65423 17.764 5.07589 17.6114C4.67269 17.5052 4.30522 17.2976 4.0103 17.0096C3.71538 16.7215 3.50335 16.363 3.39546 15.97C3.26364 15.4877 3.17576 14.8295 3.11638 14.1679L3.10688 14.0464L3.09738 13.9262C3.03877 13.1424 3.00629 12.357 3 11.5711V11.43C3.00238 11.1813 3.01188 10.3219 3.076 9.37343L3.08432 9.25429L3.08788 9.19415L3.09738 9.07385L3.12351 8.77311L3.13538 8.65281C3.19239 8.0525 3.27671 7.46952 3.39665 7.03115C3.50435 6.63792 3.7163 6.27919 4.01124 5.99091C4.30617 5.70263 4.67374 5.49494 5.07707 5.38865C5.65541 5.23828 6.91069 5.14574 8.22889 5.08791L8.43078 5.07981L8.63503 5.07287L8.73717 5.0694L8.94024 5.0613C10.0705 5.02549 11.2011 5.00544 12.332 5.00116H12.5612V5ZM10.6005 8.71297V14.2859L15.5372 11.5006L10.6005 8.71297Z" fill="%23FF0000"/>%0A</svg>%0A';
+
+// src/components/PlatformIcon/PlatformIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var PLATFORM_ICON_URLS = {
+  twitch: twitch_default,
+  youtube: youtube_default,
+  kick: kick_default,
+  tiktok: tiktok_default,
+  facebook: facebook_default,
+  twitter: twitter_default,
+  x: twitter_default,
+  discord: discord_default,
+  lumia: lumiaLogo_default,
+  lumiastream: lumiaLogo_default
+};
+var getPlatformIconUrl = (platform) => {
+  if (!platform) {
+    return void 0;
+  }
+  return PLATFORM_ICON_URLS[String(platform).trim().toLowerCase()];
+};
+function PlatformIcon({ platform, fallback = true, size, className, title, style }) {
+  const url = getPlatformIconUrl(platform) ?? (fallback ? lumiaLogo_default : void 0);
+  if (!url) {
+    return null;
+  }
+  const sizeStyle = size !== void 0 ? { height: typeof size === "number" ? `${size}px` : size } : void 0;
+  return /* @__PURE__ */ jsx("img", { className: classNames("ls-platform-icon", className), src: url, alt: "", title: title ?? (platform ? String(platform) : void 0), style: { ...sizeStyle, ...style } });
+}
+PlatformIcon.displayName = "PlatformIcon";
+
+// src/components/ViewersList/ViewersList.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ViewersList({
+  viewers,
+  groups,
+  countLabel,
+  showSearch = true,
+  searchPlaceholder = "Search\u2026",
+  searchSlot,
+  showAvatars = true,
+  fallbackAvatar,
+  hint,
+  emptyText = "No viewers",
+  emptyIcon = "\u{1F440}",
+  onUsernameClick,
+  id,
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const internalSearch = showSearch && !searchSlot;
+  const filtered = useMemo(
+    () => internalSearch && query ? viewers.filter((viewer) => viewer.username.toLowerCase().includes(query.toLowerCase())) : viewers,
+    [internalSearch, viewers, query]
+  );
+  const sections = useMemo(() => {
+    if (!groups || groups.length === 0) {
+      return [{ key: "", viewers: filtered }];
+    }
+    const known = new Set(groups.map((group) => group.key));
+    const grouped = groups.map((group) => ({ key: group.key, label: group.label, viewers: filtered.filter((viewer) => viewer.group === group.key) }));
+    const rest = filtered.filter((viewer) => !viewer.group || !known.has(viewer.group));
+    return [...grouped, { key: "", viewers: rest }].filter((section) => section.viewers.length > 0);
+  }, [groups, filtered]);
+  const showHead = countLabel != null || searchSlot != null || internalSearch;
+  return /* @__PURE__ */ jsxs("div", { className: classNames2("ls-viewerslist", className), id, children: [
+    showHead ? /* @__PURE__ */ jsxs("div", { className: "ls-viewerslist__head", children: [
+      countLabel != null ? /* @__PURE__ */ jsx2("span", { className: "ls-viewerslist__count", children: countLabel }) : null,
+      searchSlot ? /* @__PURE__ */ jsx2("div", { className: "ls-viewerslist__search-slot", children: searchSlot }) : null,
+      internalSearch ? /* @__PURE__ */ jsx2("input", { className: "ls-viewerslist__search", value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value) }) : null
+    ] }) : null,
+    hint != null ? /* @__PURE__ */ jsx2("div", { className: "ls-viewerslist__hint", children: hint }) : null,
+    filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "ls-viewerslist__empty", children: [
+      emptyIcon ? /* @__PURE__ */ jsx2("span", { className: "ls-viewerslist__empty-icon", children: emptyIcon }) : null,
+      /* @__PURE__ */ jsx2("span", { children: emptyText })
+    ] }) : /* @__PURE__ */ jsx2("div", { className: "ls-viewerslist__list", children: sections.map((section) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      section.label != null ? /* @__PURE__ */ jsx2("div", { className: "ls-viewerslist__group", children: section.label }) : null,
+      section.viewers.map((viewer) => {
+        const avatarSrc = viewer.avatar || viewer.fallbackAvatar || fallbackAvatar;
+        const platformIcon = viewer.platformIcon ?? (viewer.platform ? /* @__PURE__ */ jsx2(PlatformIcon, { platform: viewer.platform }) : null);
+        return /* @__PURE__ */ jsxs("div", { className: "ls-viewerslist__viewer", children: [
+          showAvatars && avatarSrc ? /* @__PURE__ */ jsx2("img", { className: "ls-viewerslist__avatar", src: avatarSrc, alt: "" }) : null,
+          platformIcon != null ? /* @__PURE__ */ jsx2("span", { className: "ls-viewerslist__platform", children: platformIcon }) : null,
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: classNames2("ls-viewerslist__username", { "ls-viewerslist__username--clickable": onUsernameClick }),
+              title: viewer.username,
+              role: onUsernameClick ? "button" : void 0,
+              tabIndex: onUsernameClick ? 0 : void 0,
+              onClick: onUsernameClick ? () => onUsernameClick(viewer) : void 0,
+              onKeyDown: onUsernameClick ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onUsernameClick(viewer);
+                }
+              } : void 0,
+              children: viewer.username
+            }
+          ),
+          viewer.badges != null ? /* @__PURE__ */ jsx2("span", { className: "ls-viewerslist__badges", children: viewer.badges }) : null,
+          viewer.actions != null ? /* @__PURE__ */ jsx2("span", { className: "ls-viewerslist__actions", children: viewer.actions }) : null
+        ] }, viewer.id);
+      })
+    ] }, section.key || "__ungrouped")) })
+  ] });
+}
+ViewersList.displayName = "ViewersList";
+export {
+  ViewersList
+};

package/dist/WidgetChrome.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface WidgetChromeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+}
+declare function WidgetChromeButton({ active, buttonRef, className, children, ...rest }: WidgetChromeButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace WidgetChromeButton {
+    var displayName: string;
+}
+interface WidgetChromeProps {
+    title: React.ReactNode;
+    leftActions?: React.ReactNode;
+    rightActions?: React.ReactNode;
+    headerExtra?: React.ReactNode;
+    showHeader?: boolean;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    children: React.ReactNode;
+}
+declare function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader, className, headerClassName, bodyClassName, style, id, children }: WidgetChromeProps): react_jsx_runtime.JSX.Element;
+declare namespace WidgetChrome {
+    var displayName: string;
+}
+
+export { WidgetChrome, WidgetChromeButton, type WidgetChromeButtonProps, type WidgetChromeProps };

package/dist/WidgetChrome.js

@@ -0,0 +1,48 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/lumia-ui.css
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff !important;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  pointer-events: none;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
+
+// src/components/WidgetChrome/WidgetChrome.tsx
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+function WidgetChromeButton({ active, buttonRef, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("button", { ref: buttonRef, type: "button", className: classNames("ls-widget__btn", { "ls-widget__btn--active": active }, className), ...rest, children });
+}
+WidgetChromeButton.displayName = "WidgetChromeButton";
+function WidgetChrome({ title, leftActions, rightActions, headerExtra, showHeader = true, className, headerClassName, bodyClassName, style, id, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: classNames("ls-widget", className), style, id, children: [
+    showHeader ? /* @__PURE__ */ jsxs("div", { className: classNames("ls-widget__header", headerClassName), children: [
+      /* @__PURE__ */ jsx("div", { className: "ls-widget__side", children: leftActions }),
+      /* @__PURE__ */ jsx("div", { className: "ls-widget__title", children: /* @__PURE__ */ jsx("span", { children: title }) }),
+      /* @__PURE__ */ jsx("div", { className: "ls-widget__side ls-widget__side--right", children: rightActions }),
+      headerExtra
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: classNames("ls-widget__body", bodyClassName), children })
+  ] });
+}
+WidgetChrome.displayName = "WidgetChrome";
+export {
+  WidgetChrome,
+  WidgetChromeButton
+};

package/dist/components.d.ts

@@ -1,6 +1,7 @@
 export { LSButton, LSButtonProps } from './LSButton.js';
 export { LSInput, LSInputProps } from './LSInput.js';
 export { LSSliderInput, LSSliderInputProps } from './LSSliderInput.js';
+export { LSSwitch, LSSwitchProps } from './LSSwitch.js';
 export { LSSelect } from './LSSelect.js';
 export { LSCheckbox, LSCheckboxField } from './LSCheckbox.js';
 export { LSColorPicker, LSColorPickerProps } from './LSColorPicker.js';
@@ -10,11 +11,28 @@ export { LSMultiSelect } from './LSMultiSelect.js';
 export { LSRadio, LSRadioGroup } from './LSRadio.js';
 export { LSTextField, LSTextFieldProps } from './LSTextField.js';
 export { IVariables, LSVariableInputContextValue, LSVariableInputField, LSVariableInputFieldProps, LSVariableInputProvider } from './LSVariableInputField.js';
+export { ChatMessageItem, ChatMessageItemProps, ChatModAction, ChatModActionLabels } from './ChatMessageItem.js';
+export { PLATFORM_ICON_URLS, PlatformIcon, PlatformIconProps, getPlatformIconUrl } from './PlatformIcon.js';
+export { ChatboxChatAs, ChatboxPanel, ChatboxPanelProps, ChatboxPlatformOption, useAutoScroll } from './ChatboxPanel.js';
+export { DialogChrome, DialogChromeProps, ModalChrome, ModalChromeProps, PanelChrome, PanelChromeProps } from './ModalChrome.js';
+export { WidgetChrome, WidgetChromeButton, WidgetChromeButtonProps, WidgetChromeProps } from './WidgetChrome.js';
+export { EventListItem, EventListItemProps } from './EventListItem.js';
+export { EVENT_TYPE_FALLBACK_ICON, EVENT_TYPE_ICONS, EventList, EventListPanelItem, EventListProps, EventTypeIcon, EventTypeIconKey, EventTypeIconProps } from './EventList.js';
+export { StreamStatusPanel, StreamStatusPanelProps, StreamStatusPlatform, StreamStatusStat, formatStatValue } from './StreamStatusPanel.js';
+export { ViewersList, ViewersListGroup, ViewersListProps, ViewersListViewer } from './ViewersList.js';
+export { ShortcutDockButton, ShortcutDockGrid, ShortcutDockGridProps } from './ShortcutDockGrid.js';
+export { GoalsList, GoalsListItem, GoalsListProps } from './GoalsList.js';
+export { ModQueueItem, ModQueueItemProps } from './ModQueueItem.js';
+export { ModQueueList, ModQueueListProps, ModQueuePanelItem } from './ModQueueList.js';
+export { ModActivityLog, ModActivityLogProps, ModLogEntry } from './ModActivityLog.js';
+export { SongRequestList, SongRequestListProps, SongRequestNowPlaying, SongRequestQueueItem } from './SongRequestList.js';
 import 'react/jsx-runtime';
 import '@mui/material/Button';
 import 'react';
 import '@mui/material/TextField';
 import '@mui/material/Select';
+import '@mui/material/MenuItem';
+import '@mui/material/ListSubheader';
 import '@mui/material/Checkbox';
 import 'react-hook-form';
 import '@mui/material/Radio';