@lumiastream/ui 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/ChatMessageItem.js +1 -1
  2. package/dist/ChatboxPanel.js +1 -1
  3. package/dist/EventList.js +1 -1
  4. package/dist/EventListItem.js +1 -1
  5. package/dist/GoalsList.js +1 -1
  6. package/dist/LSButton.js +1 -1
  7. package/dist/LSCheckbox.js +1 -1
  8. package/dist/LSColorPicker.js +1 -1
  9. package/dist/LSDatePicker.js +1 -1
  10. package/dist/LSFontPicker.js +1 -1
  11. package/dist/LSInput.js +1 -1
  12. package/dist/LSMultiSelect.js +1 -1
  13. package/dist/LSRadio.js +1 -1
  14. package/dist/LSSelect.js +1 -1
  15. package/dist/LSSliderInput.js +1 -1
  16. package/dist/LSSwitch.js +1 -1
  17. package/dist/LSTextField.js +1 -1
  18. package/dist/LSVariableInputField.d.ts +6 -0
  19. package/dist/LSVariableInputField.js +382 -81
  20. package/dist/ModActivityLog.js +1 -1
  21. package/dist/ModQueueItem.js +1 -1
  22. package/dist/ModQueueList.js +1 -1
  23. package/dist/ModalChrome.js +1 -1
  24. package/dist/PlatformIcon.js +1 -1
  25. package/dist/ShortcutDockGrid.js +1 -1
  26. package/dist/SongRequestList.js +1 -1
  27. package/dist/StreamStatusPanel.js +1 -1
  28. package/dist/ViewersList.js +1 -1
  29. package/dist/WidgetChrome.js +1 -1
  30. package/dist/components.js +704 -401
  31. package/dist/index.js +1017 -714
  32. package/dist/se-import.js +1015 -712
  33. package/package.json +2 -2
package/dist/LSVariableInputField.js CHANGED
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
21
21
  }
22
22
 
23
23
  // src/lumia-ui.css
24
- 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__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-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");
24
+ 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");
25
25
 
26
26
  // src/components/LSVariableInputField/LSVariableInputField.tsx
27
27
  import Autocomplete, {
@@ -33,15 +33,15 @@ import Search from "@mui/icons-material/Search";
33
33
  import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
34
34
  import Tooltip from "@mui/material/Tooltip";
35
35
  import {
36
- Fragment,
36
+ Fragment as Fragment3,
37
37
  createContext,
38
38
  forwardRef as forwardRef3,
39
39
  useCallback,
40
40
  useContext,
41
- useEffect,
42
- useMemo,
43
- useRef,
44
- useState
41
+ useEffect as useEffect2,
42
+ useMemo as useMemo2,
43
+ useRef as useRef2,
44
+ useState as useState2
45
45
  } from "react";
46
46
 
47
47
  // src/components/LSInput/LSInput.tsx
@@ -202,15 +202,219 @@ var LSTextField = forwardRef2(
202
202
  );
203
203
  LSTextField.displayName = "LSTextField";
204
204
 
205
- // src/components/LSVariableInputField/LSVariableInputField.tsx
205
+ // src/components/LSVariableInputField/VariableHighlightOverlay.tsx
206
+ import {
207
+ Fragment,
208
+ useEffect,
209
+ useLayoutEffect,
210
+ useMemo,
211
+ useRef,
212
+ useState
213
+ } from "react";
214
+ import { createPortal } from "react-dom";
206
215
  import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
216
+ var TOKEN_RE = /\{\{[^{}]+\}\}/g;
217
+ var COPIED_STYLE_PROPS = [
218
+ "fontFamily",
219
+ "fontSize",
220
+ "fontWeight",
221
+ "fontStyle",
222
+ "fontVariant",
223
+ "letterSpacing",
224
+ "wordSpacing",
225
+ "textTransform",
226
+ "textIndent",
227
+ "lineHeight",
228
+ "tabSize",
229
+ "paddingTop",
230
+ "paddingRight",
231
+ "paddingBottom",
232
+ "paddingLeft",
233
+ "direction"
234
+ ];
235
+ var tokenClass = (type) => {
236
+ if (type === "func") return "ls-variable-highlight__token--function";
237
+ if (type === "system") return "ls-variable-highlight__token--system";
238
+ return "ls-variable-highlight__token--custom";
239
+ };
240
+ var parseSegments = (value, classify, describe) => {
241
+ const segments = [];
242
+ let last = 0;
243
+ let match;
244
+ TOKEN_RE.lastIndex = 0;
245
+ while ((match = TOKEN_RE.exec(value)) != null) {
246
+ if (match.index > last) {
247
+ segments.push({ text: value.slice(last, match.index), token: false });
248
+ }
249
+ const raw = match[0];
250
+ const base = raw.slice(2, -2).split("=")[0].trim();
251
+ segments.push({ text: raw, token: true, type: classify(base), desc: describe(base) });
252
+ last = match.index + raw.length;
253
+ }
254
+ if (last < value.length) {
255
+ segments.push({ text: value.slice(last), token: false });
256
+ }
257
+ return segments;
258
+ };
259
+ var VariableHighlightOverlay = ({
260
+ inputEl,
261
+ value,
262
+ multiline,
263
+ classify,
264
+ describe
265
+ }) => {
266
+ const layerRef = useRef(null);
267
+ const textColorRef = useRef("");
268
+ const [tooltip, setTooltip] = useState(null);
269
+ const segments = useMemo(
270
+ () => parseSegments(value, classify, describe),
271
+ [value, classify, describe]
272
+ );
273
+ const hasTokens = useMemo(() => segments.some((segment) => segment.token), [segments]);
274
+ useLayoutEffect(() => {
275
+ const layer = layerRef.current;
276
+ if (!inputEl || !layer || !hasTokens) {
277
+ return;
278
+ }
279
+ const sync = () => {
280
+ const computed = getComputedStyle(inputEl);
281
+ for (const prop of COPIED_STYLE_PROPS) {
282
+ layer.style[prop] = computed[prop];
283
+ }
284
+ const isTransparent = computed.color === "rgba(0, 0, 0, 0)" || computed.color === "transparent";
285
+ if (!isTransparent) {
286
+ textColorRef.current = computed.color;
287
+ }
288
+ layer.style.color = isTransparent ? textColorRef.current || computed.color : computed.color;
289
+ layer.style.whiteSpace = multiline ? "pre-wrap" : "pre";
290
+ layer.style.top = `${inputEl.offsetTop}px`;
291
+ layer.style.left = `${inputEl.offsetLeft}px`;
292
+ layer.style.width = `${inputEl.offsetWidth}px`;
293
+ layer.style.height = `${inputEl.offsetHeight}px`;
294
+ layer.scrollTop = inputEl.scrollTop;
295
+ layer.scrollLeft = inputEl.scrollLeft;
296
+ };
297
+ sync();
298
+ const onScroll = () => {
299
+ layer.scrollTop = inputEl.scrollTop;
300
+ layer.scrollLeft = inputEl.scrollLeft;
301
+ };
302
+ inputEl.addEventListener("scroll", onScroll);
303
+ const observer = new ResizeObserver(sync);
304
+ observer.observe(inputEl);
305
+ window.addEventListener("resize", sync);
306
+ return () => {
307
+ inputEl.removeEventListener("scroll", onScroll);
308
+ observer.disconnect();
309
+ window.removeEventListener("resize", sync);
310
+ };
311
+ }, [inputEl, multiline, hasTokens, segments]);
312
+ useLayoutEffect(() => {
313
+ if (!inputEl || !hasTokens) {
314
+ return;
315
+ }
316
+ const style = inputEl.style;
317
+ const prev = {
318
+ color: style.color,
319
+ caretColor: style.caretColor,
320
+ fill: style.webkitTextFillColor,
321
+ position: style.position,
322
+ zIndex: style.zIndex
323
+ };
324
+ const computed = getComputedStyle(inputEl);
325
+ if (computed.color !== "rgba(0, 0, 0, 0)" && computed.color !== "transparent") {
326
+ textColorRef.current = computed.color;
327
+ }
328
+ style.caretColor = computed.color;
329
+ style.color = "transparent";
330
+ style.webkitTextFillColor = "transparent";
331
+ if (computed.position === "static") {
332
+ style.position = "relative";
333
+ }
334
+ style.zIndex = "1";
335
+ return () => {
336
+ style.color = prev.color;
337
+ style.caretColor = prev.caretColor;
338
+ style.webkitTextFillColor = prev.fill;
339
+ style.position = prev.position;
340
+ style.zIndex = prev.zIndex;
341
+ };
342
+ }, [inputEl, hasTokens]);
343
+ useEffect(() => {
344
+ if (!inputEl || !hasTokens) {
345
+ setTooltip(null);
346
+ return;
347
+ }
348
+ const onMove = (event) => {
349
+ const layer = layerRef.current;
350
+ if (!layer) {
351
+ return;
352
+ }
353
+ const spans = layer.querySelectorAll(".ls-variable-highlight__token");
354
+ for (const span of Array.from(spans)) {
355
+ const desc = span.getAttribute("data-desc");
356
+ if (!desc) {
357
+ continue;
358
+ }
359
+ for (const rect of Array.from(span.getClientRects())) {
360
+ if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
361
+ setTooltip({ text: desc, top: rect.top, left: rect.left + rect.width / 2 });
362
+ return;
363
+ }
364
+ }
365
+ }
366
+ setTooltip(null);
367
+ };
368
+ const onLeave = () => setTooltip(null);
369
+ const el = inputEl;
370
+ el.addEventListener("mousemove", onMove);
371
+ el.addEventListener("mouseleave", onLeave);
372
+ return () => {
373
+ el.removeEventListener("mousemove", onMove);
374
+ el.removeEventListener("mouseleave", onLeave);
375
+ };
376
+ }, [inputEl, hasTokens, segments]);
377
+ if (!inputEl?.parentElement || !hasTokens) {
378
+ return null;
379
+ }
380
+ return /* @__PURE__ */ jsxs(Fragment2, { children: [
381
+ createPortal(
382
+ /* @__PURE__ */ jsx3("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map(
383
+ (segment, index) => segment.token ? /* @__PURE__ */ jsx3(
384
+ "span",
385
+ {
386
+ "data-desc": segment.desc || void 0,
387
+ className: `ls-variable-highlight__token ${tokenClass(segment.type ?? "custom")}`,
388
+ children: segment.text
389
+ },
390
+ index
391
+ ) : /* @__PURE__ */ jsx3(Fragment, { children: segment.text }, index)
392
+ ) }),
393
+ inputEl.parentElement
394
+ ),
395
+ tooltip ? createPortal(
396
+ /* @__PURE__ */ jsx3(
397
+ "div",
398
+ {
399
+ className: "ls-variable-highlight__tooltip",
400
+ style: { top: tooltip.top, left: tooltip.left },
401
+ children: tooltip.text
402
+ }
403
+ ),
404
+ document.body
405
+ ) : null
406
+ ] });
407
+ };
408
+
409
+ // src/components/LSVariableInputField/LSVariableInputField.tsx
410
+ import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
207
411
  import { createElement } from "react";
208
412
  var LSVariableInputContext = createContext({});
209
413
  var LSVariableInputProvider = ({
210
414
  children,
211
415
  value
212
416
  }) => {
213
- return /* @__PURE__ */ jsx3(LSVariableInputContext.Provider, { value, children });
417
+ return /* @__PURE__ */ jsx4(LSVariableInputContext.Provider, { value, children });
214
418
  };
215
419
  var DEFAULT_FUNCTION_VARIABLES = [
216
420
  "sum_variables",
@@ -468,6 +672,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
468
672
  $renderOption,
469
673
  allowedVariableOrigin,
470
674
  systemVariables: systemVariablesProp,
675
+ variableExamples: variableExamplesProp,
471
676
  functionVariables: functionVariablesProp,
472
677
  translate,
473
678
  onVariableTranslationsNeeded,
@@ -476,50 +681,75 @@ var LSVariableInputField = forwardRef3((props, ref) => {
476
681
  } = props;
477
682
  const t = translate ?? context.translate ?? defaultTranslate;
478
683
  const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
479
- const variableRecords = useMemo(
684
+ const variableExamples = variableExamplesProp ?? context.variableExamples ?? {};
685
+ const variableRecords = useMemo2(
480
686
  () => normalizeVariableRecords(rawSystemVariables),
481
687
  [rawSystemVariables]
482
688
  );
483
- const functionVariables = useMemo(
689
+ const functionVariables = useMemo2(
484
690
  () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
485
691
  [context.functionVariables, functionVariablesProp]
486
692
  );
487
693
  const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
488
694
  const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
489
695
  const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
490
- const containerRef = useRef(null);
491
- const variableId = useRef(`variable-input-${name ?? "field"}`);
492
- const [showVariables, setShowVariables] = useState(false);
493
- const [searchQuery, setSearchQuery] = useState("");
494
- const functionVariableSet = useMemo(
696
+ const containerRef = useRef2(null);
697
+ const variableId = useRef2(`variable-input-${name ?? "field"}`);
698
+ const [showVariables, setShowVariables] = useState2(false);
699
+ const [searchQuery, setSearchQuery] = useState2("");
700
+ const functionVariableSet = useMemo2(
495
701
  () => new Set(functionVariables),
496
702
  [functionVariables]
497
703
  );
498
- const allowedVariableDefinitions = useMemo(
704
+ const [inputEl, setInputEl] = useState2(null);
705
+ const mergedInputRef = useCallback(
706
+ (node) => {
707
+ setInputEl(node ?? null);
708
+ if (typeof ref === "function") {
709
+ ref(node);
710
+ } else if (ref) {
711
+ ref.current = node;
712
+ }
713
+ },
714
+ [ref]
715
+ );
716
+ const currentVariableValue = useMemo2(() => {
717
+ if (typeof value !== "string") return null;
718
+ const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
719
+ if (!match) return null;
720
+ const key = match[1].trim();
721
+ if (functionVariableSet.has(key)) return null;
722
+ const record = variableRecords[key];
723
+ if (!record || record.isFunction) return null;
724
+ const { displayValue, fullValue } = getVariableValueDisplay(record.value);
725
+ if (displayValue === "" || displayValue == null) return null;
726
+ return { displayValue, fullValue };
727
+ }, [value, variableRecords, functionVariableSet]);
728
+ const allowedVariableDefinitions = useMemo2(
499
729
  () => normalizeAllowedDefinitions(allowedVariables),
500
730
  [allowedVariables]
501
731
  );
502
- const allowedVariableDefinitionLookup = useMemo(() => {
732
+ const allowedVariableDefinitionLookup = useMemo2(() => {
503
733
  const lookup = /* @__PURE__ */ new Map();
504
734
  allowedVariableDefinitions.forEach(
505
735
  (definition) => lookup.set(definition.name, definition)
506
736
  );
507
737
  return lookup;
508
738
  }, [allowedVariableDefinitions]);
509
- const allowedVariableNames = useMemo(
739
+ const allowedVariableNames = useMemo2(
510
740
  () => allowedVariableDefinitions.map((definition) => definition.name),
511
741
  [allowedVariableDefinitions]
512
742
  );
513
- const [filteredAllowedVariables, setFilteredAllowedVariables] = useState(allowedVariableDefinitions);
514
- const [filteredSystemVariables, setFilteredSystemVariables] = useState([]);
515
- const [expandedPaths, setExpandedPaths] = useState(
743
+ const [filteredAllowedVariables, setFilteredAllowedVariables] = useState2(allowedVariableDefinitions);
744
+ const [filteredSystemVariables, setFilteredSystemVariables] = useState2([]);
745
+ const [expandedPaths, setExpandedPaths] = useState2(
516
746
  () => /* @__PURE__ */ new Set()
517
747
  );
518
- const [autoExpandPaths, setAutoExpandPaths] = useState(
748
+ const [autoExpandPaths, setAutoExpandPaths] = useState2(
519
749
  () => /* @__PURE__ */ new Set()
520
750
  );
521
751
  const shouldRenderPicker = !hideVariables && showVariables;
522
- const systemVariableValueTrees = useMemo(() => {
752
+ const systemVariableValueTrees = useMemo2(() => {
523
753
  const map = /* @__PURE__ */ new Map();
524
754
  if (!shouldRenderPicker) return map;
525
755
  Object.values(variableRecords).forEach((variable) => {
@@ -529,7 +759,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
529
759
  });
530
760
  return map;
531
761
  }, [shouldRenderPicker, variableRecords]);
532
- const allowedExampleTrees = useMemo(() => {
762
+ const allowedExampleTrees = useMemo2(() => {
533
763
  const map = /* @__PURE__ */ new Map();
534
764
  if (!shouldRenderPicker) return map;
535
765
  allowedVariableDefinitions.forEach((definition) => {
@@ -539,7 +769,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
539
769
  });
540
770
  return map;
541
771
  }, [allowedVariableDefinitions, shouldRenderPicker]);
542
- useEffect(() => {
772
+ useEffect2(() => {
543
773
  requestTranslations?.();
544
774
  }, [requestTranslations]);
545
775
  const isPathExpanded = useCallback(
@@ -606,7 +836,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
606
836
  },
607
837
  [namespaceHas, t]
608
838
  );
609
- const knownOrigins = useMemo(() => {
839
+ const knownOrigins = useMemo2(() => {
610
840
  return Array.from(
611
841
  new Set(
612
842
  Object.values(variableRecords).map(
@@ -753,7 +983,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
753
983
  },
754
984
  [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
755
985
  );
756
- useEffect(() => {
986
+ useEffect2(() => {
757
987
  if (!shouldRenderPicker) {
758
988
  return;
759
989
  }
@@ -893,7 +1123,23 @@ var LSVariableInputField = forwardRef3((props, ref) => {
893
1123
  onChange?.(currentValue ? `${currentValue}${newValue}` : newValue);
894
1124
  };
895
1125
  const insertVariable = (variable) => {
896
- appendValue(`{{${variable}}}`);
1126
+ const token = `{{${variable}}}`;
1127
+ const el = inputEl;
1128
+ if (el && typeof value === "string" && el.selectionStart != null) {
1129
+ const start = el.selectionStart;
1130
+ const end = el.selectionEnd ?? start;
1131
+ onChange?.(`${value.slice(0, start)}${token}${value.slice(end)}`);
1132
+ const caret = start + token.length;
1133
+ requestAnimationFrame(() => {
1134
+ try {
1135
+ el.focus();
1136
+ el.setSelectionRange(caret, caret);
1137
+ } catch {
1138
+ }
1139
+ });
1140
+ } else {
1141
+ appendValue(token);
1142
+ }
897
1143
  setShowVariables(false);
898
1144
  };
899
1145
  const handleFilterOptions = (options, params) => {
@@ -901,13 +1147,13 @@ var LSVariableInputField = forwardRef3((props, ref) => {
901
1147
  afterFilter?.(filtered);
902
1148
  return filtered;
903
1149
  };
904
- const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs(
1150
+ const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs2(
905
1151
  "div",
906
1152
  {
907
1153
  className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
908
1154
  children: [
909
- /* @__PURE__ */ jsx3("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
910
- variableType === "func" && /* @__PURE__ */ jsx3(
1155
+ /* @__PURE__ */ jsx4("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
1156
+ variableType === "func" && /* @__PURE__ */ jsx4(
911
1157
  "span",
912
1158
  {
913
1159
  className: "ls-variable-token__badge",
@@ -918,7 +1164,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
918
1164
  ]
919
1165
  }
920
1166
  );
921
- const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx3(
1167
+ const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx4(
922
1168
  "button",
923
1169
  {
924
1170
  type: "button",
@@ -929,15 +1175,15 @@ var LSVariableInputField = forwardRef3((props, ref) => {
929
1175
  className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
930
1176
  "aria-label": expanded ? "Collapse" : "Expand",
931
1177
  "aria-expanded": expanded,
932
- children: /* @__PURE__ */ jsx3(KeyboardArrowDown, { style: { width: 16, height: 16 } })
1178
+ children: /* @__PURE__ */ jsx4(KeyboardArrowDown, { style: { width: 16, height: 16 } })
933
1179
  }
934
1180
  );
935
- const renderExpandSpacer = () => /* @__PURE__ */ jsx3("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
1181
+ const renderExpandSpacer = () => /* @__PURE__ */ jsx4("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
936
1182
  const getVariableValuePreview = (variableValue) => {
937
1183
  const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
938
1184
  return { displayValue, fullValue };
939
1185
  };
940
- const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx3(
1186
+ const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx4(
941
1187
  "input",
942
1188
  {
943
1189
  className: "ls-variable-picker__value-input",
@@ -954,8 +1200,8 @@ var LSVariableInputField = forwardRef3((props, ref) => {
954
1200
  const fullToken = `${rootToken}.${node.relativePath}`;
955
1201
  const expanded = node.isExpandable && isPathExpanded(fullToken);
956
1202
  const { displayValue, fullValue } = getVariableValuePreview(node.value);
957
- return /* @__PURE__ */ jsxs(Fragment, { children: [
958
- /* @__PURE__ */ jsxs(
1203
+ return /* @__PURE__ */ jsxs2(Fragment3, { children: [
1204
+ /* @__PURE__ */ jsxs2(
959
1205
  "div",
960
1206
  {
961
1207
  className: "ls-variable-picker__row ls-variable-picker__row--child",
@@ -964,31 +1210,57 @@ var LSVariableInputField = forwardRef3((props, ref) => {
964
1210
  else insertVariable(fullToken);
965
1211
  },
966
1212
  children: [
967
- /* @__PURE__ */ jsxs(
1213
+ /* @__PURE__ */ jsxs2(
968
1214
  "div",
969
1215
  {
970
1216
  className: "ls-variable-picker__token-cell",
971
1217
  style: { paddingLeft: `${node.depth * 1.25}rem` },
972
1218
  children: [
973
1219
  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
974
- /* @__PURE__ */ jsx3(
1220
+ /* @__PURE__ */ jsx4(
975
1221
  "div",
976
1222
  {
977
1223
  className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
978
- children: /* @__PURE__ */ jsx3("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
1224
+ children: /* @__PURE__ */ jsx4("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
979
1225
  }
980
1226
  )
981
1227
  ]
982
1228
  }
983
1229
  ),
984
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__description", children: node.displayKey }),
985
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
1230
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: node.displayKey }),
1231
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
986
1232
  ]
987
1233
  }
988
1234
  ),
989
1235
  expanded && renderValueChildRows(rootToken, node.children)
990
1236
  ] }, fullToken);
991
1237
  });
1238
+ const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs2(Fragment4, { children: [
1239
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
1240
+ examples.map((example) => /* @__PURE__ */ jsxs2(
1241
+ "div",
1242
+ {
1243
+ className: "ls-variable-picker__row ls-variable-picker__row--child",
1244
+ onClick: () => insertVariable(example.snippet),
1245
+ children: [
1246
+ /* @__PURE__ */ jsxs2(
1247
+ "div",
1248
+ {
1249
+ className: "ls-variable-picker__token-cell",
1250
+ style: { paddingLeft: "1.25rem" },
1251
+ children: [
1252
+ renderExpandSpacer(),
1253
+ /* @__PURE__ */ jsx4("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx4("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
1254
+ ]
1255
+ }
1256
+ ),
1257
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: example.label }),
1258
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__value" })
1259
+ ]
1260
+ },
1261
+ example.snippet
1262
+ ))
1263
+ ] });
992
1264
  const toOptionLabelString = (input) => {
993
1265
  if (typeof input === "string") return input;
994
1266
  if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
@@ -1040,7 +1312,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1040
1312
  isSelected ? "ls-variable-option--selected" : ""
1041
1313
  ].filter(Boolean).join(" ")
1042
1314
  },
1043
- thumb ? /* @__PURE__ */ jsx3(
1315
+ thumb ? /* @__PURE__ */ jsx4(
1044
1316
  "img",
1045
1317
  {
1046
1318
  src: thumb,
@@ -1048,24 +1320,24 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1048
1320
  alt: ""
1049
1321
  }
1050
1322
  ) : null,
1051
- /* @__PURE__ */ jsxs("div", { className: "ls-variable-option__body", children: [
1052
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
1053
- helperText ? /* @__PURE__ */ jsx3("div", { className: "ls-variable-option__helper", children: helperText }) : null
1323
+ /* @__PURE__ */ jsxs2("div", { className: "ls-variable-option__body", children: [
1324
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
1325
+ helperText ? /* @__PURE__ */ jsx4("div", { className: "ls-variable-option__helper", children: helperText }) : null
1054
1326
  ] })
1055
1327
  );
1056
1328
  };
1057
1329
  const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
1058
- const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
1059
- /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__intro", children: [
1060
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__intro-text", children: t(
1330
+ const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
1331
+ /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__intro", children: [
1332
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__intro-text", children: t(
1061
1333
  "overlay-variables.variables-description",
1062
1334
  "Use variables that will automatically be replaced before sending out the text"
1063
1335
  ) }),
1064
- /* @__PURE__ */ jsx3(
1336
+ /* @__PURE__ */ jsx4(
1065
1337
  LSInput,
1066
1338
  {
1067
1339
  autoFocus: true,
1068
- startAdornment: /* @__PURE__ */ jsx3(Search, { style: { color: "#fff", width: 20, height: 20 } }),
1340
+ startAdornment: /* @__PURE__ */ jsx4(Search, { style: { color: "#fff", width: 20, height: 20 } }),
1069
1341
  placeholder: t("common.search", "Search"),
1070
1342
  value: searchQuery,
1071
1343
  onChange: (e) => setSearchQuery(e.target.value),
@@ -1073,14 +1345,14 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1073
1345
  }
1074
1346
  )
1075
1347
  ] }),
1076
- /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__header", children: [
1077
- /* @__PURE__ */ jsx3("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
1078
- /* @__PURE__ */ jsx3("div", { children: t("commands.description", "Description") }),
1079
- /* @__PURE__ */ jsx3("div", { children: t("common.value", "Value") })
1348
+ /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__header", children: [
1349
+ /* @__PURE__ */ jsx4("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
1350
+ /* @__PURE__ */ jsx4("div", { children: t("commands.description", "Description") }),
1351
+ /* @__PURE__ */ jsx4("div", { children: t("common.value", "Value") })
1080
1352
  ] }),
1081
- /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__list", children: [
1082
- showSuggestedSection && /* @__PURE__ */ jsxs("fieldset", { className: "ls-variable-picker__field", children: [
1083
- /* @__PURE__ */ jsx3("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
1353
+ /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__list", children: [
1354
+ showSuggestedSection && /* @__PURE__ */ jsxs2("fieldset", { className: "ls-variable-picker__field", children: [
1355
+ /* @__PURE__ */ jsx4("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
1084
1356
  filteredAllowedVariables.map((definition, idx) => {
1085
1357
  const variableType = getAllowedVariableVisualType(
1086
1358
  definition.name
@@ -1093,8 +1365,8 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1093
1365
  const expanded = expandable && isPathExpanded(definition.name);
1094
1366
  const isLast = idx === filteredAllowedVariables.length - 1;
1095
1367
  const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
1096
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1097
- /* @__PURE__ */ jsxs(
1368
+ return /* @__PURE__ */ jsxs2(Fragment3, { children: [
1369
+ /* @__PURE__ */ jsxs2(
1098
1370
  "div",
1099
1371
  {
1100
1372
  className: rowCls,
@@ -1104,12 +1376,12 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1104
1376
  else insertVariable(definition.name);
1105
1377
  },
1106
1378
  children: [
1107
- /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__token-cell", children: [
1379
+ /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__token-cell", children: [
1108
1380
  expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
1109
1381
  renderVariableToken(definition.name, variableType, true)
1110
1382
  ] }),
1111
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
1112
- /* @__PURE__ */ jsx3(
1383
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
1384
+ /* @__PURE__ */ jsx4(
1113
1385
  "div",
1114
1386
  {
1115
1387
  className: "ls-variable-picker__value",
@@ -1130,11 +1402,12 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1130
1402
  variable.value
1131
1403
  );
1132
1404
  const rootToken = variable.example ?? variable.name;
1405
+ const examples = variableExamples[variable.name] ?? [];
1133
1406
  const tree = systemVariableValueTrees.get(variable.name);
1134
- const expandable = !!tree && tree.length > 0;
1407
+ const expandable = examples.length > 0 || !!tree && tree.length > 0;
1135
1408
  const expanded = expandable && isPathExpanded(rootToken);
1136
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1137
- /* @__PURE__ */ jsxs(
1409
+ return /* @__PURE__ */ jsxs2(Fragment3, { children: [
1410
+ /* @__PURE__ */ jsxs2(
1138
1411
  "div",
1139
1412
  {
1140
1413
  className: "ls-variable-picker__row",
@@ -1143,21 +1416,21 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1143
1416
  else insertVariable(rootToken);
1144
1417
  },
1145
1418
  children: [
1146
- /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__token-cell", children: [
1419
+ /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__token-cell", children: [
1147
1420
  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
1148
1421
  renderVariableToken(variable.name, variableType)
1149
1422
  ] }),
1150
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
1151
- /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
1423
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
1424
+ /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
1152
1425
  ]
1153
1426
  }
1154
1427
  ),
1155
- expanded && tree && renderValueChildRows(rootToken, tree)
1428
+ expanded && (examples.length > 0 ? renderExampleChildRows(variable, examples) : tree && renderValueChildRows(rootToken, tree))
1156
1429
  ] }, variable.name);
1157
1430
  })
1158
1431
  ] })
1159
1432
  ] }) : null;
1160
- const textField = (params = {}) => /* @__PURE__ */ jsx3(
1433
+ const textField = (params = {}) => /* @__PURE__ */ jsx4(
1161
1434
  VariableInputTextField,
1162
1435
  {
1163
1436
  t,
@@ -1180,11 +1453,12 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1180
1453
  inputProps,
1181
1454
  allowedVariables,
1182
1455
  showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
1183
- ref
1456
+ currentValue: currentVariableValue,
1457
+ ref: mergedInputRef
1184
1458
  }
1185
1459
  );
1186
- return /* @__PURE__ */ jsxs(Fragment2, { children: [
1187
- /* @__PURE__ */ jsx3(
1460
+ return /* @__PURE__ */ jsxs2(Fragment4, { children: [
1461
+ /* @__PURE__ */ jsx4(
1188
1462
  Popover,
1189
1463
  {
1190
1464
  anchorEl: containerRef.current,
@@ -1210,7 +1484,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1210
1484
  children: pickerBody
1211
1485
  }
1212
1486
  ),
1213
- isAutoComplete ? /* @__PURE__ */ jsx3(
1487
+ isAutoComplete ? /* @__PURE__ */ jsx4(
1214
1488
  Autocomplete,
1215
1489
  {
1216
1490
  disableClearable: true,
@@ -1306,7 +1580,17 @@ var LSVariableInputField = forwardRef3((props, ref) => {
1306
1580
  onClose: onPopupClose,
1307
1581
  renderInput: (params) => textField(params)
1308
1582
  }
1309
- ) : textField()
1583
+ ) : textField(),
1584
+ !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx4(
1585
+ VariableHighlightOverlay,
1586
+ {
1587
+ inputEl,
1588
+ value,
1589
+ multiline,
1590
+ classify: getAllowedVariableVisualType,
1591
+ describe: getAllowedVariableDescription
1592
+ }
1593
+ ) : null
1310
1594
  ] });
1311
1595
  });
1312
1596
  LSVariableInputField.displayName = "LSVariableInputField";
@@ -1330,15 +1614,16 @@ var VariableInputTextField = forwardRef3(
1330
1614
  clickedVariableIcon,
1331
1615
  params = {},
1332
1616
  containerRef,
1333
- showVariableIcon
1617
+ showVariableIcon,
1618
+ currentValue
1334
1619
  }, ref) => {
1335
1620
  const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
1336
1621
  const paramsSlotInput = params?.slotProps?.input ?? {};
1337
1622
  const explicitStartAdornment = inputProps?.startAdornment;
1338
- const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx3(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
1623
+ const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx4(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
1339
1624
  const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
1340
1625
  const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
1341
- return /* @__PURE__ */ jsx3(
1626
+ return /* @__PURE__ */ jsx4(
1342
1627
  LSTextField,
1343
1628
  {
1344
1629
  id,
@@ -1366,9 +1651,25 @@ var VariableInputTextField = forwardRef3(
1366
1651
  ...inputPropsSlotInput,
1367
1652
  ...paramsSlotInput,
1368
1653
  startAdornment,
1369
- endAdornment: /* @__PURE__ */ jsxs(Fragment2, { children: [
1654
+ endAdornment: /* @__PURE__ */ jsxs2(Fragment4, { children: [
1370
1655
  endAdornment ?? null,
1371
- showVariableIcon ? /* @__PURE__ */ jsx3(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx3(
1656
+ currentValue ? /* @__PURE__ */ jsx4(Tooltip, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx4(
1657
+ InputAdornment2,
1658
+ {
1659
+ position: "end",
1660
+ className: "ls-variable-input-current-value",
1661
+ style: {
1662
+ maxWidth: 120,
1663
+ overflow: "hidden",
1664
+ textOverflow: "ellipsis",
1665
+ whiteSpace: "nowrap",
1666
+ opacity: 0.6,
1667
+ fontSize: "0.75em"
1668
+ },
1669
+ children: currentValue.displayValue
1670
+ }
1671
+ ) }) : null,
1672
+ showVariableIcon ? /* @__PURE__ */ jsx4(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx4(
1372
1673
  InputAdornment2,
1373
1674
  {
1374
1675
  position: "end",