@lumiastream/ui 0.7.7 → 0.8.1

package/dist/LSVariableInputField.js

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/lumia-ui.css
-styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var(--cardHover, var(--transwhite, rgba(255, 255, 255, 0.05))) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker #rbgcp-eyedropper-btn,\n.ls-color-picker #rbgcp-eyedropper-btn svg,\n.ls-color-picker #rbgcp-eyedropper-btn svg * {\n  color: var(--white, #fff) !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");
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  min-height: 32px;\n  padding: 0.45rem 1rem 0.25rem !important;\n  background: var(--neutralDark1, var(--background, #18162f)) !important;\n  color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n  font-size: 0.75rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0 !important;\n  line-height: 1.2 !important;\n  text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n  padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n  max-height: none !important;\n}\n.ls-color-picker__gradient {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff !important;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n  display: block;\n  cursor: default;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: var(--neutralLight2, #cac9d5);\n  overflow-wrap: break-word;\n  line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n  opacity: 1;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n  position: absolute;\n  margin: 0;\n  border: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  pointer-events: none;\n  background: transparent;\n  color: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  z-index: 0;\n}\n.ls-variable-highlight__token {\n  border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n  color: var(--customVariables, #69ffd2);\n  background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n  position: fixed;\n  z-index: 2000;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  max-width: 320px;\n  padding: 6px 10px;\n  border-radius: 8px;\n  background: var(--neutralDark1, #171628);\n  border: 1px solid var(--neutralDark4, #393853);\n  color: var(--neutralLight2, #cac9d5);\n  font-size: 0.75rem;\n  line-height: 1.3;\n  pointer-events: none;\n  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n.ls-chat-message {\n  position: relative;\n  font-size: 0.95em;\n  line-height: 1.4;\n  color: var(--white, var(--neutralLight1, #fff));\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n.ls-chat-message img {\n  display: inline-block;\n}\n.ls-chat-message__reply {\n  display: block;\n  margin-bottom: 0.15em;\n  font-size: 0.82em;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n  vertical-align: middle;\n}\n.ls-chat-message__avatar {\n  width: 1.3em;\n  height: 1.3em;\n  border-radius: 9999px;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site {\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n  width: 1.2em;\n  height: 1.2em;\n  vertical-align: middle;\n}\n.ls-chat-message__time {\n  margin-right: 0.35em;\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__badges {\n  vertical-align: middle;\n}\n.ls-chat-message__badges img {\n  height: 1.05em;\n  vertical-align: middle;\n  margin-right: 0.25em;\n}\n.ls-chat-message__username {\n  font-weight: 700;\n  vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n  cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n  text-decoration: underline;\n}\n.ls-chat-message__text {\n  vertical-align: middle;\n}\n.ls-chat-message__text img {\n  vertical-align: middle;\n}\n.ls-chat-message__actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.ls-chat-message__modbar {\n  display: flex;\n  overflow: hidden;\n  border-radius: 0.75rem;\n  background-color: var(--separator, #0a0821);\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n  background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n  color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n  display: flex;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 1em;\n  border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n  border-left: 4px solid var(--primary, #ff4076);\n  border-radius: 1em;\n  background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n  color: var(--white, var(--neutralLight1, #fff));\n  padding: 1em;\n  line-height: 1.35;\n}\n.ls-eventlist-item__main {\n  display: flex;\n  flex-direction: column;\n  gap: 0.2em;\n  min-width: 0;\n}\n.ls-eventlist-item__identity {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.5em;\n  min-width: 1.5em;\n  height: 1.5em;\n  overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n  border-radius: 1em;\n  background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.ls-eventlist-item__username {\n  min-width: 0;\n  font-weight: 700;\n  font-size: 0.875em;\n  word-break: break-all;\n}\n.ls-eventlist-item__body {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 0.75em;\n  row-gap: 0.35em;\n  min-width: 0;\n}\n.ls-eventlist-item__message {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n  min-width: 0;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-eventlist-item__time {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.875em;\n  white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  align-self: center;\n  gap: 0.5em;\n  flex-shrink: 0;\n}\n.ls-modqueue-item {\n  display: flex;\n  align-items: stretch;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n  padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n  display: flex;\n  height: 4rem;\n  width: 4rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  color: var(--primary, #ff4076);\n  font-size: 1.75rem;\n  line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n}\n.ls-modqueue-item__body {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  justify-content: flex-start;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  border-radius: 9999px;\n  border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n  font-weight: 700;\n  color: var(--white, var(--neutralLight1, #fff));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 12rem;\n}\n.ls-modqueue-item__command {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 1rem;\n  background-color: var(--separator, #0a0821);\n  padding: 0.05rem 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n  font-size: 0.875rem;\n  font-style: italic;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n  word-break: break-all;\n}\n.ls-modqueue-item__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n  padding: 0;\n  border-radius: 0.5rem;\n  transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n  background-color: transparent;\n  opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n}\n.ls-modlog {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n  display: flex;\n  justify-content: flex-end;\n}\n.ls-modlog__clear {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 0;\n  border-radius: 0.75rem;\n  background: transparent;\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  cursor: pointer;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n  color: var(--white, #fff);\n}\n.ls-modlog__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.375rem;\n  overflow: auto;\n}\n.ls-modlog__row {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n  background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-modlog__avatar {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 9999px;\n}\n.ls-modlog__title {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.375rem;\n  padding: 0.05rem 0.4rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--ls-modlog-accent, var(--primary, #ff4076));\n  background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  font-size: 0.6875rem;\n  font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.35;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n  flex: 1;\n}\n.ls-songreq__empty {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.75rem;\n  background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n  height: 3.5rem;\n  width: 3.5rem;\n  flex-shrink: 0;\n  border-radius: 0.75rem;\n  object-fit: cover;\n}\n.ls-songreq__nowbody {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n.ls-songreq__title {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__artist {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n  overflow: hidden;\n  font-size: 0.6875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n  margin-top: 0.375rem;\n  height: 0.375rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n  height: 100%;\n  border-radius: 9999px;\n  background-color: var(--success, #1db954);\n  transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-songreq__btn {\n  display: inline-flex;\n  height: 2rem;\n  width: 2rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background: transparent;\n  font-size: 0.875rem;\n  line-height: 1;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-songreq__queue {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n}\n.ls-songreq__queuehead {\n  margin-bottom: 0.25rem;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: auto;\n}\n.ls-songreq__queueempty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.375rem 0.5rem;\n  transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.ls-songreq__itembody {\n  min-width: 0;\n  flex: 1;\n}\n.ls-songreq__itemtitle {\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-modqueue__search-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.5rem;\n  border: 1px solid currentcolor;\n  background: transparent;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n  opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n  color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n  color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n}\n.ls-modqueue__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-modqueue__readonly {\n  font-size: 0.625rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n  flex-shrink: 0;\n}\n.ls-chatbox {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ls-chatbox__list {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n.ls-chatbox__jump {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  backdrop-filter: blur(4px);\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n  transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n  margin-left: 0.25rem;\n  border-radius: 9999px;\n  background-color: var(--primary, #ff4076);\n  padding: 0.125rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n  flex: 2 1 0%;\n  min-width: 100px;\n  width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n  flex: 1 1 0%;\n  min-width: 7.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n  flex: 0 1 auto;\n  min-width: 5.5rem;\n  height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n  height: 55px;\n  flex-shrink: 0;\n}\n.ls-panel {\n  --ls-panel-padding: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  border-radius: 1rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: var(--ls-panel-bg, #1b1834);\n  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n}\n.ls-panel__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n  min-width: 0;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-panel__title--label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-panel__close {\n  display: flex;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.5rem;\n  background: transparent;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-panel__body {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n  padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n  flex-shrink: 0;\n  padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n.ls-modal--absolute {\n  position: absolute;\n}\n.ls-modal__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n  backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n  position: relative;\n  width: 100%;\n  max-width: var(--ls-modal-max-width, min(560px, 92vw));\n  max-height: 85vh;\n}\n.ls-modal__card--fit {\n  width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog {\n  margin-top: 0.5rem;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ls-dialog__card {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  border-radius: 1rem;\n  outline: none;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n  padding: 1rem;\n}\n.ls-dialog__card--full {\n  border-radius: 0;\n}\n.ls-dialog__top {\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  justify-content: space-between;\n}\n.ls-dialog__top--full {\n  margin-top: 2rem;\n}\n.ls-dialog__top-side {\n  flex: 1;\n}\n.ls-dialog__title {\n  font-size: 1.25rem;\n  color: var(--white, #fff);\n}\n.ls-dialog__close {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  user-select: none;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ls-dialog__close-label {\n  cursor: pointer;\n  font-size: 1rem;\n  font-weight: 700;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow: auto;\n}\n.ls-dialog__bottom {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding-bottom: 1rem;\n}\n.ls-eventlist {\n  display: flex;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--white, var(--neutralLight1, #fff));\n  line-height: 1.35;\n}\n.ls-eventlist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.5em;\n  overflow-y: auto;\n}\n.ls-eventlist__row {\n  flex-shrink: 0;\n  animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  border-radius: 1em;\n  padding: 1em;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n  width: 1.6em;\n  height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1.5em);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ls-streamstatus {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow: auto;\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.625rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n  position: relative;\n  display: inline-flex;\n  height: 0.75rem;\n  width: 0.75rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n  animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ls-streamstatus__indicator-dot {\n  position: relative;\n  height: 0.75rem;\n  width: 0.75rem;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n  background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n.ls-streamstatus__status-label {\n  overflow: hidden;\n  font-size: 0.875rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n  overflow: hidden;\n  font-size: 0.75rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n  display: flex;\n  flex-shrink: 0;\n  align-items: stretch;\n  gap: 0.5rem;\n}\n.ls-streamstatus__total {\n  display: flex;\n  flex-shrink: 0;\n  flex-direction: column;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n  font-size: 1.875rem;\n  font-weight: 700;\n  line-height: 1;\n  color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n  margin-top: 0.25rem;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.25rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n  display: grid;\n  flex-shrink: 0;\n  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n  gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 0.125rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  border-radius: 1rem;\n  padding: 0.5rem 0.75rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n  display: inline-flex;\n  margin-left: auto;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n  overflow: hidden;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n  width: 10px;\n  flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 0.6875rem;\n  letter-spacing: 0.05em;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n}\n.ls-viewerslist__head {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n.ls-viewerslist__count {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n  min-width: 0;\n  flex: 1;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  color: var(--white, #fff);\n  outline: none;\n}\n.ls-viewerslist__search:focus {\n  border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n  color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n  min-width: 0;\n  flex: 1;\n}\n.ls-viewerslist__hint {\n  flex-shrink: 0;\n  font-size: 0.75rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n  display: flex;\n  height: 100%;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  text-align: center;\n  color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n  font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 0.125rem;\n  overflow: auto;\n}\n.ls-viewerslist__group {\n  margin-top: 0.375rem;\n  flex-shrink: 0;\n  padding: 0 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n  margin-top: 0;\n}\n.ls-viewerslist__viewer {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.25rem 0.375rem;\n  transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n  height: 1.5rem;\n  width: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.ls-viewerslist__platform {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n.ls-viewerslist__username {\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n  font-size: 0.875rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n  box-sizing: border-box;\n}\n.ls-shortcutdock {\n  display: grid;\n  width: 100%;\n  align-content: start;\n  gap: 0.5rem;\n  overflow: auto;\n}\n.ls-shortcutdock--disabled {\n  opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n  position: relative;\n  min-width: 0;\n}\n.ls-shortcutdock__btn {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n  background-color: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  color: var(--white, #fff);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n  border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n  cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.15rem;\n  line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n  font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n  width: 2rem;\n  height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n  width: 60%;\n  height: 60%;\n  border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  padding-inline: 0.125rem;\n  text-align: center;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1.2;\n  color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n  font-size: clamp(1rem, 1.4vw, 1.5rem);\n  font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n  width: 100%;\n  height: 100%;\n  font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n  width: 60%;\n  height: 60%;\n}\n.ls-shortcutdock__remove {\n  position: absolute;\n  top: -0.375rem;\n  right: -0.375rem;\n  z-index: 1;\n  display: flex;\n  height: 1.25rem;\n  width: 1.25rem;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 9999px;\n  background-color: var(--error, #fd5454);\n  padding: 0;\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: var(--white, #fff);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n  transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n  opacity: 0.8;\n}\n.ls-shortcutdock__add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 0.75rem;\n  border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n  background: transparent;\n  padding: 0.25rem;\n  font: inherit;\n  font-size: 1.5rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n  transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n  border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n  color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n  box-sizing: border-box;\n}\n.ls-goals {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ls-goals__empty {\n  font-size: 0.875rem;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.375rem;\n  font-size: 0.875rem;\n}\n.ls-goals__icon {\n  display: flex;\n  align-self: center;\n  align-items: center;\n  line-height: 1;\n}\n.ls-goals__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 600;\n  color: var(--white, #fff);\n}\n.ls-goals__value {\n  flex-shrink: 0;\n  color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n  opacity: 0.6;\n}\n.ls-goals__bar {\n  margin-top: 0.375rem;\n  height: 0.625rem;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n  height: 100%;\n  border-radius: 9999px;\n  background-image:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n      var(--ls-goals-accent, var(--primary, #ff4076)));\n  transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n  flex-shrink: 0;\n  min-width: 2.75rem;\n  text-align: right;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n  display: inline-block;\n  height: 1.15em;\n  width: auto;\n  max-width: 1.5em;\n  vertical-align: middle;\n  object-fit: contain;\n}\n.ls-chatbox__platform-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n  border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n  box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n  border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n  background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius, 1rem);\n  border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n  background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n  background-color: var(--background, #151230);\n  color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n  position: relative;\n  display: flex;\n  min-height: 2.75rem;\n  width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  padding-inline: 0.5rem;\n}\n.ls-widget__side {\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  gap: 0.25rem;\n}\n.ls-widget__side--right {\n  margin-left: auto;\n}\n.ls-widget__title {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n}\n.ls-widget__btn {\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 0.375rem;\n  background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n  color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n  font: inherit;\n  transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n  background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n  color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n  color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n  height: 1rem;\n  width: 1rem;\n}\n.ls-widget__body {\n  display: flex;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: auto;\n}\n");
 
 // src/components/LSVariableInputField/LSVariableInputField.tsx
 import Autocomplete, {
@@ -33,15 +33,15 @@ import Search from "@mui/icons-material/Search";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import Tooltip from "@mui/material/Tooltip";
 import {
-  Fragment,
+  Fragment as Fragment3,
   createContext,
   forwardRef as forwardRef3,
   useCallback,
   useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
 } from "react";
 
 // src/components/LSInput/LSInput.tsx
@@ -61,7 +61,12 @@ var LSInput = forwardRef(
       inputAfterText,
       maxWidth,
       className = "",
+      inputRef: inputRefProp,
+      inputProps: htmlInputPropsProp,
+      InputProps: inputPropsProp,
+      InputLabelProps: inputLabelPropsProp,
       slotProps: slotPropsProp,
+      showborder,
       onChange,
       onChangeStart,
       onChangeEnd,
@@ -72,6 +77,7 @@ var LSInput = forwardRef(
       style,
       centerText,
       $noMinHeight,
+      color,
       bypasscolor,
       textColor,
       fullWidth = true,
@@ -98,21 +104,24 @@ var LSInput = forwardRef(
     const callerInputSlot = slotPropsProp?.input ?? {};
     const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
     const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
-    const resolvedStartAdornment = callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
-    const resolvedEndAdornment = callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
+    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
     const helperContent = helperText ?? (typeof error === "string" ? error : "");
     const hasError = typeof error === "string" ? true : Boolean(error);
     const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
+    const resolvedColor = color ?? bypasscolor;
     const valueProps = hasExplicitValue ? { value: normalizedValue } : {};
     const slotProps = {
       ...slotPropsProp ?? {},
       input: {
         ...callerInputSlot,
+        ...inputPropsProp ?? {},
         startAdornment: resolvedStartAdornment,
         endAdornment: resolvedEndAdornment,
-        readOnly: rest.readOnly ?? callerInputSlot.readOnly,
+        readOnly: rest.readOnly ?? inputPropsProp?.readOnly ?? callerInputSlot.readOnly,
         sx: {
           ...callerInputSlot.sx ?? {},
+          ...inputPropsProp?.sx ?? {},
           "& input, & textarea": {
             textAlign: centerText ? "center" : void 0,
             color: textColor ?? void 0
@@ -121,10 +130,12 @@ var LSInput = forwardRef(
       },
       inputLabel: {
         shrink: true,
-        ...callerInputLabelSlot
+        ...callerInputLabelSlot,
+        ...inputLabelPropsProp ?? {}
       },
       htmlInput: {
-        ...callerHtmlInputSlot
+        ...callerHtmlInputSlot,
+        ...htmlInputPropsProp ?? {}
       }
     };
     const TextFieldComponent = TextField;
@@ -148,11 +159,11 @@ var LSInput = forwardRef(
             size: rest.size,
             margin: "dense",
             variant: "outlined",
-            color: bypasscolor === "default" || bypasscolor === "inherit" ? "primary" : bypasscolor,
+            color: resolvedColor === "default" || resolvedColor === "inherit" ? "primary" : resolvedColor,
             fullWidth,
             onChange: handleChange,
             slotProps,
-            inputRef: ref,
+            inputRef: ref ?? inputRefProp,
             helperText: helperContent,
             error: hasError
           }
@@ -191,15 +202,219 @@ var LSTextField = forwardRef2(
 );
 LSTextField.displayName = "LSTextField";
 
-// src/components/LSVariableInputField/LSVariableInputField.tsx
+// src/components/LSVariableInputField/VariableHighlightOverlay.tsx
+import {
+  Fragment,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
 import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var TOKEN_RE = /\{\{[^{}]+\}\}/g;
+var COPIED_STYLE_PROPS = [
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "letterSpacing",
+  "wordSpacing",
+  "textTransform",
+  "textIndent",
+  "lineHeight",
+  "tabSize",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "direction"
+];
+var tokenClass = (type) => {
+  if (type === "func") return "ls-variable-highlight__token--function";
+  if (type === "system") return "ls-variable-highlight__token--system";
+  return "ls-variable-highlight__token--custom";
+};
+var parseSegments = (value, classify, describe) => {
+  const segments = [];
+  let last = 0;
+  let match;
+  TOKEN_RE.lastIndex = 0;
+  while ((match = TOKEN_RE.exec(value)) != null) {
+    if (match.index > last) {
+      segments.push({ text: value.slice(last, match.index), token: false });
+    }
+    const raw = match[0];
+    const base = raw.slice(2, -2).split("=")[0].trim();
+    segments.push({ text: raw, token: true, type: classify(base), desc: describe(base) });
+    last = match.index + raw.length;
+  }
+  if (last < value.length) {
+    segments.push({ text: value.slice(last), token: false });
+  }
+  return segments;
+};
+var VariableHighlightOverlay = ({
+  inputEl,
+  value,
+  multiline,
+  classify,
+  describe
+}) => {
+  const layerRef = useRef(null);
+  const textColorRef = useRef("");
+  const [tooltip, setTooltip] = useState(null);
+  const segments = useMemo(
+    () => parseSegments(value, classify, describe),
+    [value, classify, describe]
+  );
+  const hasTokens = useMemo(() => segments.some((segment) => segment.token), [segments]);
+  useLayoutEffect(() => {
+    const layer = layerRef.current;
+    if (!inputEl || !layer || !hasTokens) {
+      return;
+    }
+    const sync = () => {
+      const computed = getComputedStyle(inputEl);
+      for (const prop of COPIED_STYLE_PROPS) {
+        layer.style[prop] = computed[prop];
+      }
+      const isTransparent = computed.color === "rgba(0, 0, 0, 0)" || computed.color === "transparent";
+      if (!isTransparent) {
+        textColorRef.current = computed.color;
+      }
+      layer.style.color = isTransparent ? textColorRef.current || computed.color : computed.color;
+      layer.style.whiteSpace = multiline ? "pre-wrap" : "pre";
+      layer.style.top = `${inputEl.offsetTop}px`;
+      layer.style.left = `${inputEl.offsetLeft}px`;
+      layer.style.width = `${inputEl.offsetWidth}px`;
+      layer.style.height = `${inputEl.offsetHeight}px`;
+      layer.scrollTop = inputEl.scrollTop;
+      layer.scrollLeft = inputEl.scrollLeft;
+    };
+    sync();
+    const onScroll = () => {
+      layer.scrollTop = inputEl.scrollTop;
+      layer.scrollLeft = inputEl.scrollLeft;
+    };
+    inputEl.addEventListener("scroll", onScroll);
+    const observer = new ResizeObserver(sync);
+    observer.observe(inputEl);
+    window.addEventListener("resize", sync);
+    return () => {
+      inputEl.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+      window.removeEventListener("resize", sync);
+    };
+  }, [inputEl, multiline, hasTokens, segments]);
+  useLayoutEffect(() => {
+    if (!inputEl || !hasTokens) {
+      return;
+    }
+    const style = inputEl.style;
+    const prev = {
+      color: style.color,
+      caretColor: style.caretColor,
+      fill: style.webkitTextFillColor,
+      position: style.position,
+      zIndex: style.zIndex
+    };
+    const computed = getComputedStyle(inputEl);
+    if (computed.color !== "rgba(0, 0, 0, 0)" && computed.color !== "transparent") {
+      textColorRef.current = computed.color;
+    }
+    style.caretColor = computed.color;
+    style.color = "transparent";
+    style.webkitTextFillColor = "transparent";
+    if (computed.position === "static") {
+      style.position = "relative";
+    }
+    style.zIndex = "1";
+    return () => {
+      style.color = prev.color;
+      style.caretColor = prev.caretColor;
+      style.webkitTextFillColor = prev.fill;
+      style.position = prev.position;
+      style.zIndex = prev.zIndex;
+    };
+  }, [inputEl, hasTokens]);
+  useEffect(() => {
+    if (!inputEl || !hasTokens) {
+      setTooltip(null);
+      return;
+    }
+    const onMove = (event) => {
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      const spans = layer.querySelectorAll(".ls-variable-highlight__token");
+      for (const span of Array.from(spans)) {
+        const desc = span.getAttribute("data-desc");
+        if (!desc) {
+          continue;
+        }
+        for (const rect of Array.from(span.getClientRects())) {
+          if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
+            setTooltip({ text: desc, top: rect.top, left: rect.left + rect.width / 2 });
+            return;
+          }
+        }
+      }
+      setTooltip(null);
+    };
+    const onLeave = () => setTooltip(null);
+    const el = inputEl;
+    el.addEventListener("mousemove", onMove);
+    el.addEventListener("mouseleave", onLeave);
+    return () => {
+      el.removeEventListener("mousemove", onMove);
+      el.removeEventListener("mouseleave", onLeave);
+    };
+  }, [inputEl, hasTokens, segments]);
+  if (!inputEl?.parentElement || !hasTokens) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    createPortal(
+      /* @__PURE__ */ jsx3("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map(
+        (segment, index) => segment.token ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "data-desc": segment.desc || void 0,
+            className: `ls-variable-highlight__token ${tokenClass(segment.type ?? "custom")}`,
+            children: segment.text
+          },
+          index
+        ) : /* @__PURE__ */ jsx3(Fragment, { children: segment.text }, index)
+      ) }),
+      inputEl.parentElement
+    ),
+    tooltip ? createPortal(
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "ls-variable-highlight__tooltip",
+          style: { top: tooltip.top, left: tooltip.left },
+          children: tooltip.text
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+};
+
+// src/components/LSVariableInputField/LSVariableInputField.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({
   children,
   value
 }) => {
-  return /* @__PURE__ */ jsx3(LSVariableInputContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx4(LSVariableInputContext.Provider, { value, children });
 };
 var DEFAULT_FUNCTION_VARIABLES = [
   "sum_variables",
@@ -457,6 +672,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     $renderOption,
     allowedVariableOrigin,
     systemVariables: systemVariablesProp,
+    variableExamples: variableExamplesProp,
     functionVariables: functionVariablesProp,
     translate,
     onVariableTranslationsNeeded,
@@ -465,50 +681,75 @@ var LSVariableInputField = forwardRef3((props, ref) => {
   } = props;
   const t = translate ?? context.translate ?? defaultTranslate;
   const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
-  const variableRecords = useMemo(
+  const variableExamples = variableExamplesProp ?? context.variableExamples ?? {};
+  const variableRecords = useMemo2(
     () => normalizeVariableRecords(rawSystemVariables),
     [rawSystemVariables]
   );
-  const functionVariables = useMemo(
+  const functionVariables = useMemo2(
     () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
     [context.functionVariables, functionVariablesProp]
   );
   const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
   const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
   const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
-  const containerRef = useRef(null);
-  const variableId = useRef(`variable-input-${name ?? "field"}`);
-  const [showVariables, setShowVariables] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const functionVariableSet = useMemo(
+  const containerRef = useRef2(null);
+  const variableId = useRef2(`variable-input-${name ?? "field"}`);
+  const [showVariables, setShowVariables] = useState2(false);
+  const [searchQuery, setSearchQuery] = useState2("");
+  const functionVariableSet = useMemo2(
     () => new Set(functionVariables),
     [functionVariables]
   );
-  const allowedVariableDefinitions = useMemo(
+  const [inputEl, setInputEl] = useState2(null);
+  const mergedInputRef = useCallback(
+    (node) => {
+      setInputEl(node ?? null);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const currentVariableValue = useMemo2(() => {
+    if (typeof value !== "string") return null;
+    const match = value.trim().match(/^\{\{([^{}=]+)\}\}$/);
+    if (!match) return null;
+    const key = match[1].trim();
+    if (functionVariableSet.has(key)) return null;
+    const record = variableRecords[key];
+    if (!record || record.isFunction) return null;
+    const { displayValue, fullValue } = getVariableValueDisplay(record.value);
+    if (displayValue === "" || displayValue == null) return null;
+    return { displayValue, fullValue };
+  }, [value, variableRecords, functionVariableSet]);
+  const allowedVariableDefinitions = useMemo2(
     () => normalizeAllowedDefinitions(allowedVariables),
     [allowedVariables]
   );
-  const allowedVariableDefinitionLookup = useMemo(() => {
+  const allowedVariableDefinitionLookup = useMemo2(() => {
     const lookup = /* @__PURE__ */ new Map();
     allowedVariableDefinitions.forEach(
       (definition) => lookup.set(definition.name, definition)
     );
     return lookup;
   }, [allowedVariableDefinitions]);
-  const allowedVariableNames = useMemo(
+  const allowedVariableNames = useMemo2(
     () => allowedVariableDefinitions.map((definition) => definition.name),
     [allowedVariableDefinitions]
   );
-  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState(allowedVariableDefinitions);
-  const [filteredSystemVariables, setFilteredSystemVariables] = useState([]);
-  const [expandedPaths, setExpandedPaths] = useState(
+  const [filteredAllowedVariables, setFilteredAllowedVariables] = useState2(allowedVariableDefinitions);
+  const [filteredSystemVariables, setFilteredSystemVariables] = useState2([]);
+  const [expandedPaths, setExpandedPaths] = useState2(
     () => /* @__PURE__ */ new Set()
   );
-  const [autoExpandPaths, setAutoExpandPaths] = useState(
+  const [autoExpandPaths, setAutoExpandPaths] = useState2(
     () => /* @__PURE__ */ new Set()
   );
   const shouldRenderPicker = !hideVariables && showVariables;
-  const systemVariableValueTrees = useMemo(() => {
+  const systemVariableValueTrees = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     if (!shouldRenderPicker) return map;
     Object.values(variableRecords).forEach((variable) => {
@@ -518,7 +759,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     });
     return map;
   }, [shouldRenderPicker, variableRecords]);
-  const allowedExampleTrees = useMemo(() => {
+  const allowedExampleTrees = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     if (!shouldRenderPicker) return map;
     allowedVariableDefinitions.forEach((definition) => {
@@ -528,7 +769,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     });
     return map;
   }, [allowedVariableDefinitions, shouldRenderPicker]);
-  useEffect(() => {
+  useEffect2(() => {
     requestTranslations?.();
   }, [requestTranslations]);
   const isPathExpanded = useCallback(
@@ -595,7 +836,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     },
     [namespaceHas, t]
   );
-  const knownOrigins = useMemo(() => {
+  const knownOrigins = useMemo2(() => {
     return Array.from(
       new Set(
         Object.values(variableRecords).map(
@@ -742,7 +983,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     },
     [allowedExampleTrees, getAllowedVariableRecord, systemVariableValueTrees]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (!shouldRenderPicker) {
       return;
     }
@@ -882,7 +1123,23 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     onChange?.(currentValue ? `${currentValue}${newValue}` : newValue);
   };
   const insertVariable = (variable) => {
-    appendValue(`{{${variable}}}`);
+    const token = `{{${variable}}}`;
+    const el = inputEl;
+    if (el && typeof value === "string" && el.selectionStart != null) {
+      const start = el.selectionStart;
+      const end = el.selectionEnd ?? start;
+      onChange?.(`${value.slice(0, start)}${token}${value.slice(end)}`);
+      const caret = start + token.length;
+      requestAnimationFrame(() => {
+        try {
+          el.focus();
+          el.setSelectionRange(caret, caret);
+        } catch {
+        }
+      });
+    } else {
+      appendValue(token);
+    }
     setShowVariables(false);
   };
   const handleFilterOptions = (options, params) => {
@@ -890,13 +1147,13 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     afterFilter?.(filtered);
     return filtered;
   };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs(
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs2(
     "div",
     {
       className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
-        variableType === "func" && /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+        variableType === "func" && /* @__PURE__ */ jsx4(
           "span",
           {
             className: "ls-variable-token__badge",
@@ -907,7 +1164,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
       ]
     }
   );
-  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx3(
+  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -918,15 +1175,15 @@ var LSVariableInputField = forwardRef3((props, ref) => {
       className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
       "aria-label": expanded ? "Collapse" : "Expand",
       "aria-expanded": expanded,
-      children: /* @__PURE__ */ jsx3(KeyboardArrowDown, { style: { width: 16, height: 16 } })
+      children: /* @__PURE__ */ jsx4(KeyboardArrowDown, { style: { width: 16, height: 16 } })
     }
   );
-  const renderExpandSpacer = () => /* @__PURE__ */ jsx3("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
+  const renderExpandSpacer = () => /* @__PURE__ */ jsx4("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
   const getVariableValuePreview = (variableValue) => {
     const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
     return { displayValue, fullValue };
   };
-  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx3(
+  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx4(
     "input",
     {
       className: "ls-variable-picker__value-input",
@@ -943,8 +1200,8 @@ var LSVariableInputField = forwardRef3((props, ref) => {
     const fullToken = `${rootToken}.${node.relativePath}`;
     const expanded = node.isExpandable && isPathExpanded(fullToken);
     const { displayValue, fullValue } = getVariableValuePreview(node.value);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsxs2(
         "div",
         {
           className: "ls-variable-picker__row ls-variable-picker__row--child",
@@ -953,31 +1210,57 @@ var LSVariableInputField = forwardRef3((props, ref) => {
             else insertVariable(fullToken);
           },
           children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsxs2(
               "div",
               {
                 className: "ls-variable-picker__token-cell",
                 style: { paddingLeft: `${node.depth * 1.25}rem` },
                 children: [
                   node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "div",
                     {
                       className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
-                      children: /* @__PURE__ */ jsx3("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
+                      children: /* @__PURE__ */ jsx4("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__description", children: node.displayKey }),
-            /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+            /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: node.displayKey }),
+            /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
           ]
         }
       ),
       expanded && renderValueChildRows(rootToken, node.children)
     ] }, fullToken);
   });
+  const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs2(Fragment4, { children: [
+    /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
+    examples.map((example) => /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "ls-variable-picker__row ls-variable-picker__row--child",
+        onClick: () => insertVariable(example.snippet),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "ls-variable-picker__token-cell",
+              style: { paddingLeft: "1.25rem" },
+              children: [
+                renderExpandSpacer(),
+                /* @__PURE__ */ jsx4("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx4("span", { className: "ls-variable-token__name", children: `{{${example.snippet}}}` }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: example.label }),
+          /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__value" })
+        ]
+      },
+      example.snippet
+    ))
+  ] });
   const toOptionLabelString = (input) => {
     if (typeof input === "string") return input;
     if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
@@ -1029,7 +1312,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
           isSelected ? "ls-variable-option--selected" : ""
         ].filter(Boolean).join(" ")
       },
-      thumb ? /* @__PURE__ */ jsx3(
+      thumb ? /* @__PURE__ */ jsx4(
         "img",
         {
           src: thumb,
@@ -1037,24 +1320,24 @@ var LSVariableInputField = forwardRef3((props, ref) => {
           alt: ""
         }
       ) : null,
-      /* @__PURE__ */ jsxs("div", { className: "ls-variable-option__body", children: [
-        /* @__PURE__ */ jsx3("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
-        helperText ? /* @__PURE__ */ jsx3("div", { className: "ls-variable-option__helper", children: helperText }) : null
+      /* @__PURE__ */ jsxs2("div", { className: "ls-variable-option__body", children: [
+        /* @__PURE__ */ jsx4("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
+        helperText ? /* @__PURE__ */ jsx4("div", { className: "ls-variable-option__helper", children: helperText }) : null
       ] })
     );
   };
   const showSuggestedSection = shouldRenderPicker && allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
-  const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__intro", children: [
-      /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__intro-text", children: t(
+  const pickerBody = shouldRenderPicker ? /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__intro", children: [
+      /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__intro-text", children: t(
         "overlay-variables.variables-description",
         "Use variables that will automatically be replaced before sending out the text"
       ) }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         LSInput,
         {
           autoFocus: true,
-          startAdornment: /* @__PURE__ */ jsx3(Search, { style: { color: "#fff", width: 20, height: 20 } }),
+          startAdornment: /* @__PURE__ */ jsx4(Search, { style: { color: "#fff", width: 20, height: 20 } }),
           placeholder: t("common.search", "Search"),
           value: searchQuery,
           onChange: (e) => setSearchQuery(e.target.value),
@@ -1062,14 +1345,14 @@ var LSVariableInputField = forwardRef3((props, ref) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__header", children: [
-      /* @__PURE__ */ jsx3("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
-      /* @__PURE__ */ jsx3("div", { children: t("commands.description", "Description") }),
-      /* @__PURE__ */ jsx3("div", { children: t("common.value", "Value") })
+    /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__header", children: [
+      /* @__PURE__ */ jsx4("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx4("div", { children: t("commands.description", "Description") }),
+      /* @__PURE__ */ jsx4("div", { children: t("common.value", "Value") })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__list", children: [
-      showSuggestedSection && /* @__PURE__ */ jsxs("fieldset", { className: "ls-variable-picker__field", children: [
-        /* @__PURE__ */ jsx3("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
+    /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__list", children: [
+      showSuggestedSection && /* @__PURE__ */ jsxs2("fieldset", { className: "ls-variable-picker__field", children: [
+        /* @__PURE__ */ jsx4("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
         filteredAllowedVariables.map((definition, idx) => {
           const variableType = getAllowedVariableVisualType(
             definition.name
@@ -1082,8 +1365,8 @@ var LSVariableInputField = forwardRef3((props, ref) => {
           const expanded = expandable && isPathExpanded(definition.name);
           const isLast = idx === filteredAllowedVariables.length - 1;
           const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+            /* @__PURE__ */ jsxs2(
               "div",
               {
                 className: rowCls,
@@ -1093,12 +1376,12 @@ var LSVariableInputField = forwardRef3((props, ref) => {
                   else insertVariable(definition.name);
                 },
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__token-cell", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__token-cell", children: [
                     expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
                     renderVariableToken(definition.name, variableType, true)
                   ] }),
-                  /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
+                  /* @__PURE__ */ jsx4(
                     "div",
                     {
                       className: "ls-variable-picker__value",
@@ -1119,11 +1402,12 @@ var LSVariableInputField = forwardRef3((props, ref) => {
           variable.value
         );
         const rootToken = variable.example ?? variable.name;
+        const examples = variableExamples[variable.name] ?? [];
         const tree = systemVariableValueTrees.get(variable.name);
-        const expandable = !!tree && tree.length > 0;
+        const expandable = examples.length > 0 || !!tree && tree.length > 0;
         const expanded = expandable && isPathExpanded(rootToken);
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+          /* @__PURE__ */ jsxs2(
             "div",
             {
               className: "ls-variable-picker__row",
@@ -1132,21 +1416,21 @@ var LSVariableInputField = forwardRef3((props, ref) => {
                 else insertVariable(rootToken);
               },
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "ls-variable-picker__token-cell", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "ls-variable-picker__token-cell", children: [
                   expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
                   renderVariableToken(variable.name, variableType)
                 ] }),
-                /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
-                /* @__PURE__ */ jsx3("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
+                /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
+                /* @__PURE__ */ jsx4("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
               ]
             }
           ),
-          expanded && tree && renderValueChildRows(rootToken, tree)
+          expanded && (examples.length > 0 ? renderExampleChildRows(variable, examples) : tree && renderValueChildRows(rootToken, tree))
         ] }, variable.name);
       })
     ] })
   ] }) : null;
-  const textField = (params = {}) => /* @__PURE__ */ jsx3(
+  const textField = (params = {}) => /* @__PURE__ */ jsx4(
     VariableInputTextField,
     {
       t,
@@ -1169,11 +1453,12 @@ var LSVariableInputField = forwardRef3((props, ref) => {
       inputProps,
       allowedVariables,
       showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
-      ref
+      currentValue: currentVariableValue,
+      ref: mergedInputRef
     }
   );
-  return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment4, { children: [
+    /* @__PURE__ */ jsx4(
       Popover,
       {
         anchorEl: containerRef.current,
@@ -1199,7 +1484,7 @@ var LSVariableInputField = forwardRef3((props, ref) => {
         children: pickerBody
       }
     ),
-    isAutoComplete ? /* @__PURE__ */ jsx3(
+    isAutoComplete ? /* @__PURE__ */ jsx4(
       Autocomplete,
       {
         disableClearable: true,
@@ -1295,7 +1580,17 @@ var LSVariableInputField = forwardRef3((props, ref) => {
         onClose: onPopupClose,
         renderInput: (params) => textField(params)
       }
-    ) : textField()
+    ) : textField(),
+    !hideVariables && typeof value === "string" ? /* @__PURE__ */ jsx4(
+      VariableHighlightOverlay,
+      {
+        inputEl,
+        value,
+        multiline,
+        classify: getAllowedVariableVisualType,
+        describe: getAllowedVariableDescription
+      }
+    ) : null
   ] });
 });
 LSVariableInputField.displayName = "LSVariableInputField";
@@ -1319,15 +1614,16 @@ var VariableInputTextField = forwardRef3(
     clickedVariableIcon,
     params = {},
     containerRef,
-    showVariableIcon
+    showVariableIcon,
+    currentValue
   }, ref) => {
     const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
     const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
-    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx3(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
+    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx4(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
     const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
     const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       LSTextField,
       {
         id,
@@ -1355,9 +1651,25 @@ var VariableInputTextField = forwardRef3(
             ...inputPropsSlotInput,
             ...paramsSlotInput,
             startAdornment,
-            endAdornment: /* @__PURE__ */ jsxs(Fragment2, { children: [
+            endAdornment: /* @__PURE__ */ jsxs2(Fragment4, { children: [
               endAdornment ?? null,
-              showVariableIcon ? /* @__PURE__ */ jsx3(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx3(
+              currentValue ? /* @__PURE__ */ jsx4(Tooltip, { title: currentValue.fullValue, children: /* @__PURE__ */ jsx4(
+                InputAdornment2,
+                {
+                  position: "end",
+                  className: "ls-variable-input-current-value",
+                  style: {
+                    maxWidth: 120,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    opacity: 0.6,
+                    fontSize: "0.75em"
+                  },
+                  children: currentValue.displayValue
+                }
+              ) }) : null,
+              showVariableIcon ? /* @__PURE__ */ jsx4(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx4(
                 InputAdornment2,
                 {
                   position: "end",