.cb-scheme-variant {
  --bg: transparent;
  --text: var(--text-primary);
  --bg-hover: transparent;
  --bg-active: transparent;
  --outline: transparent;
  color: var(--text);
  background-color: var(--bg);
}
.cb-scheme-variant:hover {
  background-color: var(--bg-hover);
}
.cb-scheme-variant:active {
  background-color: var(--bg-active);
}

.cb-primary.cb-solid {
  --text: var(--primary-solid-text-icon);
  --bg: var(--primary-solid-bg);
  --bg-hover: var(--primary-solid-bg-hover);
  --bg-active: var(--primary-solid-bg-active);
}
.cb-primary.cb-outline {
  --text: var(--primary-outline-text-icon);
  --bg-hover: var(--primary-outline-bg-hover);
  --bg-active: var(--primary-outline-bg-active);
  --outline: var(--primary-outline-text-icon);
}
.cb-primary.cb-ghost {
  --text: var(--primary-ghost-text-icon);
  --bg-hover: var(--primary-ghost-bg-hover);
  --bg-active: var(--primary-ghost-bg-active);
}
.cb-primary.cb-muted {
  --text: var(--primary-muted-text-icon);
  --bg: var(--primary-muted-bg);
  --bg-hover: var(--primary-muted-bg-hover);
  --bg-active: var(--primary-muted-bg-active);
}

.cb-secondary.cb-solid {
  --text: var(--secondary-solid-text-icon);
  --bg: var(--secondary-solid-bg);
  --bg-hover: var(--secondary-solid-bg-hover);
  --bg-active: var(--secondary-solid-bg-active);
}
.cb-secondary.cb-outline {
  --text: var(--secondary-outline-text-icon);
  --bg-hover: var(--secondary-outline-bg-hover);
  --bg-active: var(--secondary-outline-bg-active);
  --outline: var(--secondary-outline-text-icon);
}
.cb-secondary.cb-ghost {
  --text: var(--secondary-ghost-text-icon);
  --bg-hover: var(--secondary-ghost-bg-hover);
  --bg-active: var(--secondary-ghost-bg-active);
}
.cb-secondary.cb-muted {
  --text: var(--secondary-muted-text-icon);
  --bg: var(--secondary-muted-bg);
  --bg-hover: var(--secondary-muted-bg-hover);
  --bg-active: var(--secondary-muted-bg-active);
}

.cb-tertiary.cb-solid {
  --text: var(--tertiary-solid-text-icon);
  --bg: var(--tertiary-solid-bg);
  --bg-hover: var(--tertiary-solid-bg-hover);
  --bg-active: var(--tertiary-solid-bg-active);
}
.cb-tertiary.cb-outline {
  --text: var(--tertiary-outline-text-icon);
  --bg-hover: var(--tertiary-outline-bg-hover);
  --bg-active: var(--tertiary-outline-bg-active);
  --outline: var(--tertiary-outline-text-icon);
}
.cb-tertiary.cb-ghost {
  --text: var(--tertiary-ghost-text-icon);
  --bg-hover: var(--tertiary-ghost-bg-hover);
  --bg-active: var(--tertiary-ghost-bg-active);
}
.cb-tertiary.cb-muted {
  --text: var(--tertiary-muted-text-icon);
  --bg: var(--tertiary-muted-bg);
  --bg-hover: var(--tertiary-muted-bg-hover);
  --bg-active: var(--tertiary-muted-bg-active);
}

.cb-success.cb-solid {
  --text: var(--success-solid-text-icon);
  --bg: var(--success-solid-bg);
  --bg-hover: var(--success-solid-bg-hover);
  --bg-active: var(--success-solid-bg-active);
}
.cb-success.cb-outline {
  --text: var(--success-outline-text-icon);
  --bg-hover: var(--success-outline-bg-hover);
  --bg-active: var(--success-outline-bg-active);
  --outline: var(--success-outline-text-icon);
}
.cb-success.cb-ghost {
  --text: var(--success-ghost-text-icon);
  --bg-hover: var(--success-ghost-bg-hover);
  --bg-active: var(--success-ghost-bg-active);
}
.cb-success.cb-muted {
  --text: var(--success-muted-text-icon);
  --bg: var(--success-muted-bg);
  --bg-hover: var(--success-muted-bg-hover);
  --bg-active: var(--success-muted-bg-active);
}

.cb-caution.cb-solid {
  --text: var(--caution-solid-text-icon);
  --bg: var(--caution-solid-bg);
  --bg-hover: var(--caution-solid-bg-hover);
  --bg-active: var(--caution-solid-bg-active);
}
.cb-caution.cb-outline {
  --text: var(--caution-outline-text-icon);
  --bg-hover: var(--caution-outline-bg-hover);
  --bg-active: var(--caution-outline-bg-active);
  --outline: var(--caution-outline-text-icon);
}
.cb-caution.cb-ghost {
  --text: var(--caution-ghost-text-icon);
  --bg-hover: var(--caution-ghost-bg-hover);
  --bg-active: var(--caution-ghost-bg-active);
}
.cb-caution.cb-muted {
  --text: var(--caution-muted-text-icon);
  --bg: var(--caution-muted-bg);
  --bg-hover: var(--caution-muted-bg-hover);
  --bg-active: var(--caution-muted-bg-active);
}

.cb-warning.cb-solid {
  --text: var(--warning-solid-text-icon);
  --bg: var(--warning-solid-bg);
  --bg-hover: var(--warning-solid-bg-hover);
  --bg-active: var(--warning-solid-bg-active);
}
.cb-warning.cb-outline {
  --text: var(--warning-outline-text-icon);
  --bg-hover: var(--warning-outline-bg-hover);
  --bg-active: var(--warning-outline-bg-active);
  --outline: var(--warning-outline-text-icon);
}
.cb-warning.cb-ghost {
  --text: var(--warning-ghost-text-icon);
  --bg-hover: var(--warning-ghost-bg-hover);
  --bg-active: var(--warning-ghost-bg-active);
}
.cb-warning.cb-muted {
  --text: var(--warning-muted-text-icon);
  --bg: var(--warning-muted-bg);
  --bg-hover: var(--warning-muted-bg-hover);
  --bg-active: var(--warning-muted-bg-active);
}

.cb-error.cb-solid {
  --text: var(--error-solid-text-icon);
  --bg: var(--error-solid-bg);
  --bg-hover: var(--error-solid-bg-hover);
  --bg-active: var(--error-solid-bg-active);
}
.cb-error.cb-outline {
  --text: var(--error-outline-text-icon);
  --bg-hover: var(--error-outline-bg-hover);
  --bg-active: var(--error-outline-bg-active);
  --outline: var(--error-outline-text-icon);
}
.cb-error.cb-ghost {
  --text: var(--error-ghost-text-icon);
  --bg-hover: var(--error-ghost-bg-hover);
  --bg-active: var(--error-ghost-bg-active);
}
.cb-error.cb-muted {
  --text: var(--error-muted-text-icon);
  --bg: var(--error-muted-bg);
  --bg-hover: var(--error-muted-bg-hover);
  --bg-active: var(--error-muted-bg-active);
}

.cb-info.cb-solid {
  --text: var(--info-solid-text-icon);
  --bg: var(--info-solid-bg);
  --bg-hover: var(--info-solid-bg-hover);
  --bg-active: var(--info-solid-bg-active);
}
.cb-info.cb-outline {
  --text: var(--info-outline-text-icon);
  --bg-hover: var(--info-outline-bg-hover);
  --bg-active: var(--info-outline-bg-active);
  --outline: var(--info-outline-text-icon);
}
.cb-info.cb-ghost {
  --text: var(--info-ghost-text-icon);
  --bg-hover: var(--info-ghost-bg-hover);
  --bg-active: var(--info-ghost-bg-active);
}
.cb-info.cb-muted {
  --text: var(--info-muted-text-icon);
  --bg: var(--info-muted-bg);
  --bg-hover: var(--info-muted-bg-hover);
  --bg-active: var(--info-muted-bg-active);
}

.theme-light .cb-gray-50 {
  --bg: var(--tertiary-50);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-100 {
  --bg: var(--tertiary-100);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-200 {
  --bg: var(--tertiary-200);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-300 {
  --bg: var(--tertiary-300);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-400 {
  --bg: var(--tertiary-400);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-500 {
  --bg: var(--tertiary-500);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-600 {
  --bg: var(--tertiary-600);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-700 {
  --bg: var(--tertiary-700);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-800 {
  --bg: var(--tertiary-800);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-900 {
  --bg: var(--tertiary-900);
  --text: var(--white-to-black);
}

.theme-dark .cb-gray-50 {
  --bg: var(--tertiary-900);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-100 {
  --bg: var(--tertiary-800);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-200 {
  --bg: var(--tertiary-700);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-300 {
  --bg: var(--tertiary-600);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-400 {
  --bg: var(--tertiary-500);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-500 {
  --bg: var(--tertiary-400);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-600 {
  --bg: var(--tertiary-300);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-700 {
  --bg: var(--tertiary-200);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-800 {
  --bg: var(--tertiary-100);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-900 {
  --bg: var(--tertiary-50);
  --text: var(--white-to-black);
}

:root {
  --animation-timing-productive: cubic-bezier(0, 0, 0.44, 0.96);
  --animation-timing-expressive: cubic-bezier(0.645, 0.045, 0.355, 1);
  --animation-timing-entrance-productive: cubic-bezier(0, 0, 0.27, 0.96);
  --animation-timing-entrance-expressive: cubic-bezier(0.05, 0.025, 0.26, 0.96);
  --animation-timing-exit-productive: cubic-bezier(0.2, 0, 1, 0.85);
  --animation-timing-exit-expressive: cubic-bezier(0.1, 0.015, 0.85, 0.1);
  --animation-timing-linear: linear;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  min-height: 40px;
  padding: 10px 13px;
  transition: background-color 200ms cubic-bezier(0, 0, 0.44, 0.96), box-shadow 200ms cubic-bezier(0, 0, 0.44, 0.96);
  border-radius: 4px;
  font-family: var(--font-family);
}
.btn.btn-xs {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 12px;
}
.btn.btn-sm {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 14px;
}
.btn.btn-md {
  min-height: 40px;
  padding: 10px 13px;
}
.btn.btn-lg {
  min-height: 48px;
  padding: 14px 17px;
}
.btn.border-radius-0 {
  border-radius: 0;
}
.btn {
  --focus-ring: var(--primary-500);
}
.btn:focus {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
  outline: none;
}
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  --bg: var(--disabled-bg) !important;
  --text: var(--disabled-text) !important;
  --outline: var(--disabled-text) !important;
}
.btn:disabled.cb-muted, .btn.disabled.cb-muted {
  --bg: var(--disabled-bg-muted) !important;
}
.btn.cb-outline {
  box-shadow: inset 0 0 0 1px var(--outline);
}
.btn.cb-cta {
  background: linear-gradient(to right, var(--cygnus-500) 0%, var(--fornax-500) 100%);
  color: var(--tertiary-800);
}
.btn.cb-cta:hover {
  background: linear-gradient(to right, var(--cygnus-500) 40%, var(--fornax-500) 100%);
  box-shadow: 0 5px 15px var(--cygnus-500);
  color: var(--tertiary-800);
}
.btn.cb-cta:active {
  background: linear-gradient(to right, var(--cygnus-500) 60%, var(--fornax-500) 100%);
  box-shadow: 0 5px 25px var(--cygnus-500);
  color: var(--tertiary-800);
}
.btn.cb-cta {
  transition: background 600ms cubic-bezier(0, 0, 0.44, 0.96), box-shadow 0.2s cubic-bezier(0, 0, 0.44, 0.96);
}
.btn .no-focus-state:focus {
  --focus-ring: transparent;
}
.btn.btn-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.btn.btn-icon.btn-xs {
  gap: var(--spacing-xxs);
}
.btn.btn-icon.btn-xs .material-symbols-rounded {
  font-size: 12px;
}
.btn.btn-icon.btn-sm {
  gap: var(--spacing-xs);
}
.btn.btn-icon.btn-sm .material-symbols-rounded {
  font-size: 14px;
}
.btn.btn-icon.btn-md {
  gap: var(--spacing-sm);
}
.btn.btn-icon.btn-lg {
  gap: var(--spacing-md);
}

.gradient-highlight-btn {
  position: relative;
  min-width: calc(var(--sizing-lg) * 2);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  transition: border-bottom 0.2s linear;
  border: none;
  padding: var(--spacing-xxs) var(--spacing-md);
}
.gradient-highlight-btn::after {
  content: "";
  position: absolute;
  border-bottom: 0 solid var(--secondary-500);
  background: var(--tertiary-800);
  inset: 0;
  transition: left 0.2s linear;
}
.gradient-highlight-btn.top::after {
  transition-property: bottom;
  bottom: 100%;
}
.gradient-highlight-btn.bottom::after {
  transition-property: top;
  top: 100%;
}
.gradient-highlight-btn.left::after {
  transition-property: right;
  right: 100%;
}
.gradient-highlight-btn.right::after {
  transition-property: left;
  left: 100%;
}
.gradient-highlight-btn.selected {
  background-color: var(--bg-primary);
}
.gradient-highlight-btn.selected.top::after {
  bottom: calc(100% - 2px);
}
.gradient-highlight-btn.selected.bottom::after {
  top: calc(100% - 2px);
}
.gradient-highlight-btn.selected.left::after {
  right: calc(100% - 2px);
}
.gradient-highlight-btn.selected.right::after {
  left: calc(100% - 2px);
}
.gradient-highlight-btn.selected::after {
  background: var(--primary-500);
}
.gradient-highlight-btn:hover {
  color: var(--text-primary);
}
.gradient-highlight-btn:hover.top::after {
  bottom: calc(100% - 2px);
}
.gradient-highlight-btn:hover.bottom::after {
  top: calc(100% - 2px);
}
.gradient-highlight-btn:hover.left::after {
  right: calc(100% - 2px);
}
.gradient-highlight-btn:hover.right::after {
  left: calc(100% - 2px);
}
.gradient-highlight-btn:hover {
  cursor: pointer;
}
.gradient-highlight-btn:focus {
  outline: none;
}

:root {
  /* Primitive Colours */
  /* Sol */
  --sol-50: #ffe7f2;
  --sol-100: #ffb5d8;
  --sol-200: #ff91c5;
  --sol-300: #ff5eaa;
  --sol-400: #ff3f99;
  --sol-500: #ff0f80;
  --sol-600: #e80e74;
  --sol-700: #b50b5b;
  --sol-800: #8c0846;
  --sol-900: #6b0636;
  --sol-0: #fff4f9;
  /* Luna */
  --luna-50: #efe7fb;
  --luna-100: #ccb5f1;
  --luna-200: #b491eb;
  --luna-300: #915ee2;
  --luna-400: #7c3fdc;
  --luna-500: #5b0fd3;
  --luna-600: #530ec0;
  --luna-700: #410b96;
  --luna-800: #320874;
  --luna-900: #260659;
  --luna-0: #f8f4fd;
  /* Aquila */
  --aquila-50: #edeffe;
  --aquila-100: #c8cefa;
  --aquila-200: #adb7f8;
  --aquila-300: #8796f5;
  --aquila-400: #7081f3;
  --aquila-500: #4c62f0;
  --aquila-600: #4559da;
  --aquila-700: #3646aa;
  --aquila-800: #2a3684;
  --aquila-900: #202965;
  --aquila-0: #f7f8fe;
  /* Lyra */
  --lyra-50: #e9fbf5;
  --lyra-100: #bbf3e1;
  --lyra-200: #9aedd2;
  --lyra-300: #6ce4be;
  --lyra-400: #4fdfb1;
  --lyra-500: #23d79e;
  --lyra-600: #20c490;
  --lyra-700: #199970;
  --lyra-800: #137657;
  --lyra-900: #0f5a42;
  --lyra-0: #f5fdfb;
  /* Pyxis */
  --pyxis-50: #fefcec;
  --pyxis-100: #fcf4c3;
  --pyxis-200: #faefa6;
  --pyxis-300: #f8e87e;
  --pyxis-400: #f6e365;
  --pyxis-500: #f4dc3e;
  --pyxis-600: #dec838;
  --pyxis-700: #ad9c2c;
  --pyxis-800: #867922;
  --pyxis-900: #665c1a;
  --pyxis-0: #fffdf6;
  /* Fornax */
  --fornax-50: #fff6ec;
  --fornax-100: #fee3c4;
  --fornax-200: #fdd5a8;
  --fornax-300: #fcc280;
  --fornax-400: #fcb667;
  --fornax-500: #fba441;
  --fornax-600: #e4953b;
  --fornax-700: #b2742e;
  --fornax-800: #8a5a24;
  --fornax-900: #69451b;
  --fornax-0: #fffbf6;
  /* Cygnus */
  --cygnus-50: #feeded;
  --cygnus-100: #fcc6c8;
  --cygnus-200: #fbaaae;
  --cygnus-300: #f98389;
  --cygnus-400: #f86b72;
  --cygnus-500: #f6464f;
  --cygnus-600: #e04048;
  --cygnus-700: #af3238;
  --cygnus-800: #87272b;
  --cygnus-900: #671d21;
  --cygnus-0: #fff7f7;
  /* Neutral */
  --neutral-white: #fff;
  --neutral-black: #000;
  /* Greys */
  --grey-50: #fafafa;
  --grey-100: #e1e1e2;
  --grey-200: #c8c8ca;
  --grey-300: #afaeb2;
  --grey-400: #96959a;
  --grey-500: #7e7c81;
  --grey-600: #656369;
  --grey-700: #4c4951;
  --grey-800: #333039;
  --grey-900: #1a1721;
  /* Semantic Colours */
  /* Primary */
  --primary-50: var(--sol-50);
  --primary-100: var(--sol-100);
  --primary-200: var(--sol-200);
  --primary-300: var(--sol-300);
  --primary-400: var(--sol-400);
  --primary-500: var(--sol-500);
  --primary-600: var(--sol-600);
  --primary-700: var(--sol-700);
  --primary-800: var(--sol-800);
  --primary-900: var(--sol-900);
  /* Secondary */
  --secondary-50: var(--luna-50);
  --secondary-100: var(--luna-100);
  --secondary-200: var(--luna-200);
  --secondary-300: var(--luna-300);
  --secondary-400: var(--luna-400);
  --secondary-500: var(--luna-500);
  --secondary-600: var(--luna-600);
  --secondary-700: var(--luna-700);
  --secondary-800: var(--luna-800);
  --secondary-900: var(--luna-900);
  /* Tertiary */
  --tertiary-50: var(--grey-50);
  --tertiary-100: var(--grey-100);
  --tertiary-200: var(--grey-200);
  --tertiary-300: var(--grey-300);
  --tertiary-400: var(--grey-400);
  --tertiary-500: var(--grey-500);
  --tertiary-600: var(--grey-600);
  --tertiary-700: var(--grey-700);
  --tertiary-800: var(--grey-800);
  --tertiary-900: var(--grey-900);
  /* Info */
  --info-50: var(--aquila-50);
  --info-100: var(--aquila-100);
  --info-200: var(--aquila-200);
  --info-300: var(--aquila-300);
  --info-400: var(--aquila-400);
  --info-500: var(--aquila-500);
  --info-600: var(--aquila-600);
  --info-700: var(--aquila-700);
  --info-800: var(--aquila-800);
  --info-900: var(--aquila-900);
  /* Success */
  --success-50: var(--lyra-50);
  --success-100: var(--lyra-100);
  --success-200: var(--lyra-200);
  --success-300: var(--lyra-300);
  --success-400: var(--lyra-400);
  --success-500: var(--lyra-500);
  --success-600: var(--lyra-600);
  --success-700: var(--lyra-700);
  --success-800: var(--lyra-800);
  --success-900: var(--lyra-900);
  /* Caution */
  --caution-50: var(--pyxis-50);
  --caution-100: var(--pyxis-100);
  --caution-200: var(--pyxis-200);
  --caution-300: var(--pyxis-300);
  --caution-400: var(--pyxis-400);
  --caution-500: var(--pyxis-500);
  --caution-600: var(--pyxis-600);
  --caution-700: var(--pyxis-700);
  --caution-800: var(--pyxis-800);
  --caution-900: var(--pyxis-900);
  /* Warning */
  --warning-50: var(--fornax-50);
  --warning-100: var(--fornax-100);
  --warning-200: var(--fornax-200);
  --warning-300: var(--fornax-300);
  --warning-400: var(--fornax-400);
  --warning-500: var(--fornax-500);
  --warning-600: var(--fornax-600);
  --warning-700: var(--fornax-700);
  --warning-800: var(--fornax-800);
  --warning-900: var(--fornax-900);
  /* Error */
  --error-50: var(--cygnus-50);
  --error-100: var(--cygnus-100);
  --error-200: var(--cygnus-200);
  --error-300: var(--cygnus-300);
  --error-400: var(--cygnus-400);
  --error-500: var(--cygnus-500);
  --error-600: var(--cygnus-600);
  --error-700: var(--cygnus-700);
  --error-800: var(--cygnus-800);
  --error-900: var(--cygnus-900);
  /* UI Colour Tokens */
}
:root .theme-light {
  /* Backgrounds */
  --bg-primary: var(--neutral-white);
  --bg-secondary: var(--tertiary-50);
  --bg-tertiary: var(--tertiary-100);
  /* Text */
  --text-primary: var(--neutral-black);
  --text-secondary: var(--tertiary-700);
  --text-tertiary: var(--tertiary-500);
  --text-white: var(--neutral-white);
  --text-black: var(--neutral-black);
  --text-success: var(--success-600);
  --text-error: var(--error-500);
  --text-info: var(--info-500);
  --text-placeholder: var(--tertiary-400);
  /* Primary */
  --primary-solid-bg: var(--primary-500);
  --primary-outline-text-icon: var(--primary-600);
  --primary-ghost-text-icon: var(--primary-600);
  --primary-muted-text-icon: var(--primary-600);
  --primary-muted-bg: #ff0f801f;
  --primary-solid-bg-hover: var(--primary-400);
  --primary-solid-bg-active: var(--primary-600);
  --primary-muted-bg-hover: #ff0f8033;
  --primary-muted-bg-active: #ff0f8047;
  --primary-outline-bg-hover: #ff0f8014;
  --primary-outline-bg-active: #ff0f8029;
  --primary-ghost-bg-active: #ff0f8029;
  --primary-ghost-bg-hover: #ff0f8014;
  --primary-solid-text-icon: var(--neutral-white);
  /* Secondary */
  --secondary-solid-bg: var(--secondary-500);
  --secondary-outline-text-icon: var(--secondary-600);
  --secondary-ghost-text-icon: var(--secondary-600);
  --secondary-muted-text-icon: var(--secondary-600);
  --secondary-muted-bg: #5b0fd31f;
  --secondary-muted-bg-hover: #5b0fd333;
  --secondary-muted-bg-active: #5b0fd347;
  --secondary-solid-bg-hover: var(--secondary-400);
  --secondary-solid-bg-active: var(--secondary-600);
  --secondary-outline-bg-hover: #5b0fd314;
  --secondary-outline-bg-active: #5b0fd329;
  --secondary-ghost-bg-hover: #5b0fd314;
  --secondary-ghost-bg-active: #5b0fd329;
  --secondary-solid-text-icon: var(--neutral-white);
  /* Tertiary */
  --tertiary-solid-bg: var(--neutral-black);
  --tertiary-outline-text-icon: var(--neutral-black);
  --tertiary-ghost-text-icon: var(--neutral-black);
  --tertiary-muted-text-icon: var(--neutral-black);
  --tertiary-muted-bg: #0000001f;
  --tertiary-solid-bg-hover: var(--tertiary-800);
  --tertiary-solid-bg-active: var(--tertiary-900);
  --tertiary-outline-bg-hover: #00000014;
  --tertiary-outline-bg-active: #00000029;
  --tertiary-ghost-bg-hover: #00000014;
  --tertiary-ghost-bg-active: #00000029;
  --tertiary-muted-bg-hover: #0003;
  --tertiary-muted-bg-active: #00000047;
  --tertiary-solid-text-icon: var(--neutral-white);
  /* Success */
  --success-solid-bg: var(--success-500);
  --success-outline-text-icon: var(--success-600);
  --success-ghost-text-icon: var(--success-600);
  --success-muted-text-icon: var(--success-700);
  --success-muted-bg: #23d79e1f;
  --success-solid-bg-hover: var(--success-400);
  --success-solid-bg-active: var(--success-600);
  --success-outline-bg-hover: #23d79e14;
  --success-outline-bg-active: #23d79e29;
  --success-ghost-bg-hover: #23d79e14;
  --success-ghost-bg-active: #23d79e29;
  --success-muted-bg-hover: #23d79e33;
  --success-muted-bg-active: #23d79e47;
  --success-solid-text-icon: var(--neutral-black);
  /* Caution */
  --caution-solid-bg: var(--caution-500);
  --caution-outline-text-icon: var(--caution-600);
  --caution-ghost-text-icon: var(--caution-600);
  --caution-muted-text-icon: var(--caution-600);
  --caution-muted-bg: #f4dc3e1f;
  --caution-solid-bg-hover: var(--caution-400);
  --caution-solid-bg-active: var(--caution-600);
  --caution-outline-bg-hover: #f4dc3e14;
  --caution-outline-bg-active: #f4dc3e29;
  --caution-ghost-bg-hover: #f4dc3e14;
  --caution-ghost-bg-active: #f4dc3e29;
  --caution-muted-bg-hover: #f4dc3e33;
  --caution-muted-bg-active: #f4dc3e47;
  --caution-solid-text-icon: var(--neutral-black);
  /* Warning */
  --warning-solid-bg: var(--warning-500);
  --warning-outline-text-icon: var(--warning-600);
  --warning-ghost-text-icon: var(--warning-600);
  --warning-muted-text-icon: var(--warning-600);
  --warning-muted-bg: #fba4411f;
  --warning-solid-bg-hover: var(--warning-400);
  --warning-solid-bg-active: var(--warning-600);
  --warning-outline-bg-hover: #fba44114;
  --warning-outline-bg-active: #fba44129;
  --warning-ghost-bg-hover: #fba44114;
  --warning-ghost-bg-active: #fba44129;
  --warning-muted-bg-hover: #fba44133;
  --warning-muted-bg-active: #fba44147;
  --warning-solid-text-icon: var(--neutral-black);
  /* Error */
  --error-solid-bg: var(--error-500);
  --error-outline-text-icon: var(--error-600);
  --error-ghost-text-icon: var(--error-600);
  --error-muted-text-icon: var(--error-600);
  --error-muted-bg: #f6464f1f;
  --error-solid-bg-hover: var(--error-400);
  --error-solid-bg-active: var(--error-600);
  --error-outline-bg-hover: #f6464f14;
  --error-outline-bg-active: #f6464f29;
  --error-ghost-bg-hover: #f6464f14;
  --error-ghost-bg-active: #f6464f29;
  --error-muted-bg-hover: #f6464f33;
  --error-muted-bg-active: #f6464f47;
  --error-solid-text-icon: var(--neutral-black);
  /* Info */
  --info-solid-bg: var(--info-500);
  --info-outline-text-icon: var(--info-600);
  --info-ghost-text-icon: var(--info-600);
  --info-muted-text-icon: var(--info-600);
  --info-muted-bg: #4c62f01f;
  --info-solid-bg-hover: var(--info-400);
  --info-solid-bg-active: var(--info-600);
  --info-outline-bg-hover: #4c62f014;
  --info-outline-bg-active: #4c62f029;
  --info-ghost-bg-hover: #4c62f014;
  --info-ghost-bg-active: #4c62f029;
  --info-muted-bg-hover: #4c62f033;
  --info-muted-bg-active: #4c62f047;
  --info-solid-text-icon: var(--neutral-white);
  /* Disabled */
  --disabled-text: var(--tertiary-300);
  --disabled-bg: var(--tertiary-100);
  --disabled-bg-muted: #0000000a;
  --disabled-line: var(--tertiary-100);
  --disabled-icon: var(--tertiary-400);
  /* Link */
  --link-default: var(--info-500);
  --link-visited: var(--secondary-300);
  /* General */
  --white-to-black: var(--neutral-white);
  --line-colour: var(--tertiary-300);
  --black-to-white: var(--neutral-black);
  --grey-light: var(--tertiary-50);
  --grey-medium: var(--tertiary-100);
  --grey-heavy: var(--tertiary-200);
  --line-success: var(--text-success);
  --line-error: var(--text-error);
  --line-disabled: var(--disabled-text);
  --drop-shadow: #7e7c813d;
  --line-colour-light: var(--tertiary-100);
  --textbox-bg-default: #ffffff80;
  --textbox-bg-active: var(--tertiary-50);
  --textbox-bg-disabled: var(--disabled-bg);
}
:root .theme-dark {
  /* Backgrounds */
  --bg-primary: var(--tertiary-900);
  --bg-secondary: var(--tertiary-800);
  --bg-tertiary: var(--tertiary-700);
  /* Text */
  --text-primary: var(--neutral-white);
  --text-secondary: var(--tertiary-100);
  --text-tertiary: var(--tertiary-300);
  --text-white: var(--neutral-white);
  --text-black: var(--neutral-black);
  --text-success: var(--success-500);
  --text-error: var(--error-400);
  --text-info: var(--info-400);
  --text-placeholder: var(--tertiary-500);
  /* Primary */
  --primary-solid-bg: var(--primary-400);
  --primary-outline-text-icon: var(--primary-300);
  --primary-ghost-text-icon: var(--primary-300);
  --primary-muted-text-icon: var(--primary-300);
  --primary-muted-bg: #ff0f803d;
  --primary-solid-bg-hover: var(--primary-300);
  --primary-solid-bg-active: var(--primary-500);
  --primary-muted-bg-hover: #ff0f8052;
  --primary-muted-bg-active: #ff0f8066;
  --primary-outline-bg-hover: #ff0f803d;
  --primary-outline-bg-active: #ff0f8052;
  --primary-ghost-bg-active: #ff0f8052;
  --primary-ghost-bg-hover: #ff0f803d;
  --primary-solid-text-icon: var(--neutral-white);
  /* Secondary */
  --secondary-solid-bg: var(--secondary-400);
  --secondary-outline-text-icon: var(--secondary-200);
  --secondary-ghost-text-icon: var(--secondary-200);
  --secondary-muted-text-icon: var(--secondary-200);
  --secondary-muted-bg: #5b0fd33d;
  --secondary-muted-bg-hover: #5b0fd352;
  --secondary-muted-bg-active: #5b0fd366;
  --secondary-solid-bg-hover: var(--secondary-300);
  --secondary-solid-bg-active: var(--secondary-500);
  --secondary-outline-bg-hover: #5b0fd33d;
  --secondary-outline-bg-active: #5b0fd352;
  --secondary-ghost-bg-hover: #5b0fd33d;
  --secondary-ghost-bg-active: #5b0fd352;
  --secondary-solid-text-icon: var(--neutral-white);
  /* Tertiary */
  --tertiary-solid-bg: var(--neutral-white);
  --tertiary-outline-text-icon: var(--neutral-white);
  --tertiary-ghost-text-icon: var(--neutral-white);
  --tertiary-muted-text-icon: var(--neutral-white);
  --tertiary-muted-bg: #ffffff3d;
  --tertiary-solid-bg-hover: var(--tertiary-50);
  --tertiary-solid-bg-active: var(--tertiary-100);
  --tertiary-outline-bg-hover: #ffffff3d;
  --tertiary-outline-bg-active: #ffffff52;
  --tertiary-ghost-bg-hover: #ffffff3d;
  --tertiary-ghost-bg-active: #ffffff52;
  --tertiary-muted-bg-hover: #ffffff52;
  --tertiary-muted-bg-active: #fff6;
  --tertiary-solid-text-icon: var(--neutral-black);
  /* Success */
  --success-solid-bg: var(--success-400);
  --success-outline-text-icon: var(--success-300);
  --success-ghost-text-icon: var(--success-300);
  --success-muted-text-icon: var(--grey-900);
  --success-muted-bg: #23d79e3d;
  --success-solid-bg-hover: var(--success-300);
  --success-solid-bg-active: var(--success-500);
  --success-outline-bg-hover: #23d79e3d;
  --success-outline-bg-active: #23d79e52;
  --success-ghost-bg-hover: #23d79e3d;
  --success-ghost-bg-active: #23d79e52;
  --success-muted-bg-hover: #23d79e52;
  --success-muted-bg-active: #23d79e66;
  --success-solid-text-icon: var(--neutral-black);
  /* Caution */
  --caution-solid-bg: var(--caution-400);
  --caution-outline-text-icon: var(--caution-300);
  --caution-ghost-text-icon: var(--caution-300);
  --caution-muted-text-icon: var(--caution-300);
  --caution-muted-bg: #f4dc3e3d;
  --caution-solid-bg-hover: var(--caution-300);
  --caution-solid-bg-active: var(--caution-500);
  --caution-outline-bg-hover: #f4dc3e3d;
  --caution-outline-bg-active: #f4dc3e52;
  --caution-ghost-bg-hover: #f4dc3e3d;
  --caution-ghost-bg-active: #f4dc3e52;
  --caution-muted-bg-hover: #f4dc3e52;
  --caution-muted-bg-active: #f4dc3e66;
  --caution-solid-text-icon: var(--neutral-black);
  /* Warning */
  --warning-solid-bg: var(--warning-400);
  --warning-outline-text-icon: var(--warning-300);
  --warning-ghost-text-icon: var(--warning-300);
  --warning-muted-text-icon: var(--warning-300);
  --warning-muted-bg: #fba4413d;
  --warning-solid-bg-hover: var(--warning-300);
  --warning-solid-bg-active: var(--warning-500);
  --warning-outline-bg-hover: #fba4413d;
  --warning-outline-bg-active: #fba44152;
  --warning-ghost-bg-hover: #fba4413d;
  --warning-ghost-bg-active: #fba44152;
  --warning-muted-bg-hover: #fba44152;
  --warning-muted-bg-active: #fba44166;
  --warning-solid-text-icon: var(--neutral-black);
  /* Error */
  --error-solid-bg: var(--error-400);
  --error-outline-text-icon: var(--error-300);
  --error-ghost-text-icon: var(--error-300);
  --error-muted-text-icon: var(--error-300);
  --error-muted-bg: #f6464f3d;
  --error-solid-bg-hover: var(--error-300);
  --error-solid-bg-active: var(--error-500);
  --error-outline-bg-hover: #f6464f3d;
  --error-outline-bg-active: #f6464f52;
  --error-ghost-bg-hover: #f6464f3d;
  --error-ghost-bg-active: #f6464f52;
  --error-muted-bg-hover: #f6464f52;
  --error-muted-bg-active: #f6464f66;
  --error-solid-text-icon: var(--neutral-black);
  /* Info */
  --info-solid-bg: var(--info-400);
  --info-outline-text-icon: var(--info-200);
  --info-ghost-text-icon: var(--info-200);
  --info-muted-text-icon: var(--info-200);
  --info-muted-bg: #4c62f03d;
  --info-solid-bg-hover: var(--info-300);
  --info-solid-bg-active: var(--info-500);
  --info-outline-bg-hover: #4c62f03d;
  --info-outline-bg-active: #4c62f052;
  --info-ghost-bg-hover: #4c62f03d;
  --info-ghost-bg-active: #4c62f052;
  --info-muted-bg-hover: #4c62f052;
  --info-muted-bg-active: #4c62f066;
  --info-solid-text-icon: var(--neutral-white);
  /* Disabled */
  --disabled-text: var(--tertiary-400);
  --disabled-bg: var(--tertiary-700);
  --disabled-bg-muted: #ffffff0a;
  --disabled-line: var(--tertiary-800);
  --disabled-icon: var(--tertiary-400);
  /* Link */
  --link-default: var(--info-300);
  --link-visited: var(--secondary-200);
  /* General */
  --white-to-black: var(--neutral-black);
  --line-colour: var(--tertiary-600);
  --black-to-white: var(--neutral-white);
  --grey-light: var(--tertiary-400);
  --grey-medium: var(--tertiary-500);
  --grey-heavy: var(--tertiary-600);
  --line-success: var(--text-success);
  --line-error: var(--text-error);
  --line-disabled: var(--disabled-text);
  --drop-shadow: #0000003d;
  --line-colour-light: var(--tertiary-800);
  --textbox-bg-default: #4c495129;
  --textbox-bg-active: var(--tertiary-800);
  --textbox-bg-disabled: var(--disabled-bg);
}

:root {
  --typography-xs: 0.5rem;
  --typography-sm: 0.75rem;
  --typography-md: 0.875rem;
  --typography-lg: 1rem;
  --typography-xl: 1.25rem;
  --typography-xxl: 1.5rem;
  --typography-xxxl: 2rem;
  --font-family: Lato, sans-serif;
  --font-family-heading: filson-soft, sans-serif;
  --font-family-monospace: source-code-pro, menlo, monaco, consolas, Courier New, monospace;
  --sizing-xs: 24px;
  --sizing-sm: 32px;
  --sizing-md: 56px;
  --sizing-lg: 64px;
  --sizing-xl: 256px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --animation-productive: cubic-bezier(0.000, 0.000, 0.440, 0.960);
  --animation-expressive: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --animation-entrance-productive: cubic-bezier(0.000, 0.000, 0.270, 0.960);
  --animation-entrance-expressive: cubic-bezier(0.050, 0.025, 0.260, 0.960);
  --animation-exit-productive: cubic-bezier(0.200, 0.000, 1.000, 0.850);
  --animation-exit-expressive: cubic-bezier(0.100, 0.015, 0.850, 0.100);
  --animation-linear: linear;
  --breakpoint-xxxs: 380px;
  --breakpoint-xxs: 480px;
  --breakpoint-xs: 640px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  --color-ailab: var(--sol-500);
  --color-chatstudio: var(--luna-500);
  --color-chat: var(--luna-500);
  --color-docs: var(--fornax-500);
  --color-mattermost: var(--aquila-500);
  /* Icon sizes */
  --icon-size-lg: 1rem;
  /* 16px */
  --icon-size-md: 0.75rem;
  /* 12px */
  --icon-size-sm: 0.625rem;
  /* 10px */
  --icon-size-xl: 1.25rem;
  /* 20px */
  --icon-size-xs: 0.5rem;
  /* 8px */
  --icon-size-xxl: 1.5rem;
  /* 24px */
  /* Padding */
  --padding-lg: 1rem;
  /* 16px */
  --padding-md: 0.75rem;
  /* 12px */
  --padding-sm: 0.5rem;
  /* 8px */
  --padding-x1: 0.125rem;
  /* 2px */
  --padding-x3: 0.375rem;
  /* 6px */
  --padding-x5: 0.625rem;
  /* 10px */
  --padding-x7: 0.875rem;
  /* 14px */
  --padding-x9: 1.125rem;
  /* 18px */
  --padding-x10: 1.25rem;
  /* 20px */
  --padding-x12: 1.5rem;
  /* 24px */
  --padding-xs: 0.25rem;
  /* 4px */
  /* Radius */
  --radius-0: 0;
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-pill: 62.4375rem;
  /* 999px */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-xs: 0.125rem;
  /* 2px */
}

.icon {
  display: inline-block;
}

input {
  color: var(--text-primary);
}

.material-symbols-rounded.filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-rounded.icon-with-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.material-symbols-rounded.icon-xs {
  font-size: var(--typography-xs);
}
.material-symbols-rounded.icon-sm {
  font-size: var(--typography-sm);
}
.material-symbols-rounded.icon-md {
  font-size: var(--typography-md);
}
.material-symbols-rounded.icon-lg {
  font-size: var(--typography-lg);
}

/* stylelint-disable no-descending-specificity */
.properties-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.properties-tabs__header {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.properties-tab {
  padding: 4px 8px;
  height: 24px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
}
.properties-tab.selected {
  background: var(--bg);
}
.properties-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.properties-tab:hover:not(.disabled) {
  background: var(--bg-hover);
}
.properties-tab:hover:not(.disabled).selected {
  background: var(--bg-active);
}
.properties-tab {
  --text: var(--text-primary);
  --bg: rgb(0 0 0 / 8%);
  --bg-hover: rgb(0 0 0 / 4%);
  --bg-active: rgb(0 0 0 / 12%);
}
.properties-tab .cb-primary.cb-solid {
  --text: var(--primary-solid-text-icon);
  --bg: var(--primary-solid-bg);
  --bg-hover: var(--primary-solid-bg-hover);
  --bg-active: var(--primary-solid-bg-active);
}
.properties-tab .cb-primary.cb-outline {
  --text: var(--primary-outline-text-icon);
  --bg-hover: var(--primary-outline-bg-hover);
  --bg-active: var(--primary-outline-bg-active);
  --outline: var(--primary-outline-text-icon);
}
.properties-tab .cb-primary.cb-ghost {
  --text: var(--primary-ghost-text-icon);
  --bg-hover: var(--primary-ghost-bg-hover);
  --bg-active: var(--primary-ghost-bg-active);
}
.properties-tab .cb-primary.cb-muted {
  --text: var(--primary-muted-text-icon);
  --bg: var(--primary-muted-bg);
  --bg-hover: var(--primary-muted-bg-hover);
  --bg-active: var(--primary-muted-bg-active);
}
.properties-tab .cb-secondary.cb-solid {
  --text: var(--secondary-solid-text-icon);
  --bg: var(--secondary-solid-bg);
  --bg-hover: var(--secondary-solid-bg-hover);
  --bg-active: var(--secondary-solid-bg-active);
}
.properties-tab .cb-secondary.cb-outline {
  --text: var(--secondary-outline-text-icon);
  --bg-hover: var(--secondary-outline-bg-hover);
  --bg-active: var(--secondary-outline-bg-active);
  --outline: var(--secondary-outline-text-icon);
}
.properties-tab .cb-secondary.cb-ghost {
  --text: var(--secondary-ghost-text-icon);
  --bg-hover: var(--secondary-ghost-bg-hover);
  --bg-active: var(--secondary-ghost-bg-active);
}
.properties-tab .cb-secondary.cb-muted {
  --text: var(--secondary-muted-text-icon);
  --bg: var(--secondary-muted-bg);
  --bg-hover: var(--secondary-muted-bg-hover);
  --bg-active: var(--secondary-muted-bg-active);
}
.properties-tab .cb-tertiary.cb-solid {
  --text: var(--tertiary-solid-text-icon);
  --bg: var(--tertiary-solid-bg);
  --bg-hover: var(--tertiary-solid-bg-hover);
  --bg-active: var(--tertiary-solid-bg-active);
}
.properties-tab .cb-tertiary.cb-outline {
  --text: var(--tertiary-outline-text-icon);
  --bg-hover: var(--tertiary-outline-bg-hover);
  --bg-active: var(--tertiary-outline-bg-active);
  --outline: var(--tertiary-outline-text-icon);
}
.properties-tab .cb-tertiary.cb-ghost {
  --text: var(--tertiary-ghost-text-icon);
  --bg-hover: var(--tertiary-ghost-bg-hover);
  --bg-active: var(--tertiary-ghost-bg-active);
}
.properties-tab .cb-tertiary.cb-muted {
  --text: var(--tertiary-muted-text-icon);
  --bg: var(--tertiary-muted-bg);
  --bg-hover: var(--tertiary-muted-bg-hover);
  --bg-active: var(--tertiary-muted-bg-active);
}
.properties-tab .cb-success.cb-solid {
  --text: var(--success-solid-text-icon);
  --bg: var(--success-solid-bg);
  --bg-hover: var(--success-solid-bg-hover);
  --bg-active: var(--success-solid-bg-active);
}
.properties-tab .cb-success.cb-outline {
  --text: var(--success-outline-text-icon);
  --bg-hover: var(--success-outline-bg-hover);
  --bg-active: var(--success-outline-bg-active);
  --outline: var(--success-outline-text-icon);
}
.properties-tab .cb-success.cb-ghost {
  --text: var(--success-ghost-text-icon);
  --bg-hover: var(--success-ghost-bg-hover);
  --bg-active: var(--success-ghost-bg-active);
}
.properties-tab .cb-success.cb-muted {
  --text: var(--success-muted-text-icon);
  --bg: var(--success-muted-bg);
  --bg-hover: var(--success-muted-bg-hover);
  --bg-active: var(--success-muted-bg-active);
}
.properties-tab .cb-caution.cb-solid {
  --text: var(--caution-solid-text-icon);
  --bg: var(--caution-solid-bg);
  --bg-hover: var(--caution-solid-bg-hover);
  --bg-active: var(--caution-solid-bg-active);
}
.properties-tab .cb-caution.cb-outline {
  --text: var(--caution-outline-text-icon);
  --bg-hover: var(--caution-outline-bg-hover);
  --bg-active: var(--caution-outline-bg-active);
  --outline: var(--caution-outline-text-icon);
}
.properties-tab .cb-caution.cb-ghost {
  --text: var(--caution-ghost-text-icon);
  --bg-hover: var(--caution-ghost-bg-hover);
  --bg-active: var(--caution-ghost-bg-active);
}
.properties-tab .cb-caution.cb-muted {
  --text: var(--caution-muted-text-icon);
  --bg: var(--caution-muted-bg);
  --bg-hover: var(--caution-muted-bg-hover);
  --bg-active: var(--caution-muted-bg-active);
}
.properties-tab .cb-warning.cb-solid {
  --text: var(--warning-solid-text-icon);
  --bg: var(--warning-solid-bg);
  --bg-hover: var(--warning-solid-bg-hover);
  --bg-active: var(--warning-solid-bg-active);
}
.properties-tab .cb-warning.cb-outline {
  --text: var(--warning-outline-text-icon);
  --bg-hover: var(--warning-outline-bg-hover);
  --bg-active: var(--warning-outline-bg-active);
  --outline: var(--warning-outline-text-icon);
}
.properties-tab .cb-warning.cb-ghost {
  --text: var(--warning-ghost-text-icon);
  --bg-hover: var(--warning-ghost-bg-hover);
  --bg-active: var(--warning-ghost-bg-active);
}
.properties-tab .cb-warning.cb-muted {
  --text: var(--warning-muted-text-icon);
  --bg: var(--warning-muted-bg);
  --bg-hover: var(--warning-muted-bg-hover);
  --bg-active: var(--warning-muted-bg-active);
}
.properties-tab .cb-error.cb-solid {
  --text: var(--error-solid-text-icon);
  --bg: var(--error-solid-bg);
  --bg-hover: var(--error-solid-bg-hover);
  --bg-active: var(--error-solid-bg-active);
}
.properties-tab .cb-error.cb-outline {
  --text: var(--error-outline-text-icon);
  --bg-hover: var(--error-outline-bg-hover);
  --bg-active: var(--error-outline-bg-active);
  --outline: var(--error-outline-text-icon);
}
.properties-tab .cb-error.cb-ghost {
  --text: var(--error-ghost-text-icon);
  --bg-hover: var(--error-ghost-bg-hover);
  --bg-active: var(--error-ghost-bg-active);
}
.properties-tab .cb-error.cb-muted {
  --text: var(--error-muted-text-icon);
  --bg: var(--error-muted-bg);
  --bg-hover: var(--error-muted-bg-hover);
  --bg-active: var(--error-muted-bg-active);
}
.properties-tab .cb-info.cb-solid {
  --text: var(--info-solid-text-icon);
  --bg: var(--info-solid-bg);
  --bg-hover: var(--info-solid-bg-hover);
  --bg-active: var(--info-solid-bg-active);
}
.properties-tab .cb-info.cb-outline {
  --text: var(--info-outline-text-icon);
  --bg-hover: var(--info-outline-bg-hover);
  --bg-active: var(--info-outline-bg-active);
  --outline: var(--info-outline-text-icon);
}
.properties-tab .cb-info.cb-ghost {
  --text: var(--info-ghost-text-icon);
  --bg-hover: var(--info-ghost-bg-hover);
  --bg-active: var(--info-ghost-bg-active);
}
.properties-tab .cb-info.cb-muted {
  --text: var(--info-muted-text-icon);
  --bg: var(--info-muted-bg);
  --bg-hover: var(--info-muted-bg-hover);
  --bg-active: var(--info-muted-bg-active);
}

.theme-dark .properties-tab.selected {
  background: rgba(255, 255, 255, 0.16);
}
.theme-dark .properties-tab:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.04);
}
.theme-dark .properties-tab:hover:not(.disabled).selected {
  background: rgba(255, 255, 255, 0.2);
}

.scrollbar-regular::-webkit-scrollbar,
.scrollbar-thin::-webkit-scrollbar {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-track,
.scrollbar-thin::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-corner,
.scrollbar-thin::-webkit-scrollbar-corner {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tertiary-muted-bg-hover);
  border-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--tertiary-muted-bg-active);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-regular::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.slim-input-container {
  display: flex;
}
.slim-input-container.single-line {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.slim-input-container.multi-line {
  flex-direction: column;
  gap: 8px;
}
.slim-input-container label {
  font-size: 12px;
}

.slim-input-with-affix {
  position: relative;
}
.slim-input-with-affix .prefix {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.slim-input-with-affix .suffix {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.slim-input-with-affix .prefix.empty,
.slim-input-with-affix .suffix.empty {
  color: var(--text-tertiary);
}
.slim-input-with-affix .prefix.has-value,
.slim-input-with-affix .suffix.has-value {
  color: var(--text-primary);
}
.slim-input-with-affix.disabled .prefix,
.slim-input-with-affix.disabled .suffix, .slim-input-with-affix.read-only .prefix,
.slim-input-with-affix.read-only .suffix {
  color: var(--text-tertiary);
}

.slim-input {
  border: 1px solid var(--line-colour-light);
  font-size: 12px;
  padding: 4px 8px;
}
.slim-input:focus {
  outline: none;
  border: 1px solid var(--line-colour);
  background: var(--textbox-bg-active);
}
.slim-input.disabled, .slim-input.read-only {
  background: var(--textbox-bg-disabled);
  color: var(--text-tertiary);
}
.slim-input.enabled {
  background: var(--textbox-bg-default);
  color: var(--text-primary);
}

.prefix-icon {
  color: var(--text-placeholder);
  font-size: 18px;
}

.slim-search-input {
  position: relative;
  width: 400px;
}
.slim-search-input input {
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid var(--line-colour);
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  background: var(--textbox-bg-default);
}
.slim-search-input input:focus {
  background: var(--textbox-bg-active);
  outline: 1px solid var(--line-colour);
}
.slim-search-input .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.slim-search-input .icon.search-icon {
  left: 8px;
}
.slim-search-input .icon.clear-icon {
  right: 8px;
}

.slim-textarea-container {
  display: flex;
}
.slim-textarea-container.single-line {
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}
.slim-textarea-container.multi-line {
  flex-direction: column;
  gap: 8px;
}
.slim-textarea-container label {
  font-size: 12px;
}

.slim-textarea {
  border: 1px solid var(--tertiary-200);
  font-size: 12px;
  padding: 4px 8px;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.slim-textarea:focus {
  outline: none;
  border: 1px solid var(--tertiary-300);
}
.slim-textarea.disabled, .slim-textarea.read-only {
  background: var(--tertiary-200);
  color: var(--tertiary-800);
  resize: none;
}
.slim-textarea.enabled {
  background: var(--tertiary-50);
  color: var(--tertiary-800);
}
.slim-textarea::placeholder {
  color: var(--tertiary-400);
}
.slim-textarea.disabled::placeholder, .slim-textarea.read-only::placeholder {
  color: var(--tertiary-600);
}

.text-decoration-none {
  text-decoration: none;
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-xs {
  font-size: var(--typography-xs);
}

.text-sm {
  font-size: var(--typography-sm);
}

.text-md {
  font-size: var(--typography-md);
}

.text-lg {
  font-size: var(--typography-lg);
}

.text-xl {
  font-size: var(--typography-xl);
}

.text-xxl {
  font-size: var(--typography-xxl);
}

.text-xxxl {
  font-size: var(--typography-xxxl);
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

/* stylelint-disable no-descending-specificity, declaration-block-no-shorthand-property-overrides */
.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow::before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow::before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow::before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow::before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}

.tippy-box[data-animation=shift-toward][data-state=hidden] {
  opacity: 0;
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
  transform: translateY(-10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
  transform: translateY(10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
  transform: translateX(-10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
  transform: translateX(10px);
}

.cb-tooltip {
  --tooltip-button-color: var(--tertiary-solid-bg);
  --tooltip-button-hover-color: var(--tertiary-solid-bg-hover);
  background: var(--bg);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1882352941);
}
.cb-tooltip .tippy-arrow {
  color: var(--bg);
}
.cb-tooltip .tippy-content {
  color: var(--text);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
.cb-tooltip .tippy-content .tooltip-body {
  padding: 8px;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close {
  padding: 0;
  margin-left: auto;
  background-color: transparent;
  border-color: transparent;
  width: unset;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close:hover {
  background-color: transparent;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close::before {
  animation: none;
  margin-right: 0;
  margin: 0;
  font-size: 0.75rem;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading + .body-text {
  margin-top: 8px;
}
.cb-tooltip .tippy-content .tooltip-body .heading-text {
  font-weight: bold;
  margin: 0;
  font-size: 0.875rem;
}
.cb-tooltip .tippy-content .tooltip-body .body-text {
  font-size: 0.75rem;
  margin: 0;
}
.cb-tooltip .tippy-content .tooltip-body .body-text img {
  margin-top: 16px;
}
.cb-tooltip .tippy-content .tooltip-body .btn-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 0;
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .trigger-joyride-step {
  background: var(--tooltip-button-color);
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .trigger-joyride-step:hover {
  background: var(--tooltip-button-hover-color);
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .skip-joyride:hover {
  background: var(--tooltip-button-hover-color);
}
.cb-tooltip.tooltip-sm .tippy-content .tooltip-body, .cb-tooltip.context-menu .tippy-content .tooltip-body {
  padding: 0;
}
.cb-tooltip.context-menu .tippy-content {
  padding: 0;
}
.cb-tooltip.context-menu .tippy-content .context-menu-item:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.cb-tooltip.context-menu .tippy-content .context-menu-item:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.flex-row,
.flex-column {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.position-relative {
  position: relative;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-flex-start {
  align-items: flex-start;
}

.align-items-flex-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.gap-10 {
  gap: 10px;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.pre-wrap {
  white-space: pre-wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.center-content {
  display: grid;
  place-items: center;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-minus-1 {
  z-index: -1;
}

.gap-xxs {
  gap: var(--spacing-xxs);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* align-items */
.ai-normal {
  align-items: normal;
}

.ai-stretch {
  align-items: stretch;
}

.ai-center {
  align-items: center;
}

.ai-start {
  align-items: start;
}

.ai-end {
  align-items: end;
}

.ai-flex-start {
  align-items: flex-start;
}

.ai-flex-end {
  align-items: flex-end;
}

.ai-self-start {
  align-items: self-start;
}

.ai-self-end {
  align-items: self-end;
}

.ai-baseline {
  align-items: baseline;
}

.ai-first-baseline {
  align-items: first baseline;
}

.ai-last-baseline {
  align-items: last baseline;
}

.ai-safe-center {
  align-items: safe center;
}

.ai-unsafe-center {
  align-items: unsafe center;
}

.ai-inherit {
  align-items: inherit;
}

.ai-initial {
  align-items: initial;
}

.ai-unset {
  align-items: unset;
}

.ai-revert {
  align-items: revert;
}

.ai-revert-layer {
  align-items: revert-layer;
}

/* align-self */
.as-normal {
  align-self: normal;
}

.as-stretch {
  align-self: stretch;
}

.as-center {
  align-self: center;
}

.as-start {
  align-self: start;
}

.as-end {
  align-self: end;
}

.as-flex-start {
  align-self: flex-start;
}

.as-flex-end {
  align-self: flex-end;
}

.as-self-start {
  align-self: self-start;
}

.as-self-end {
  align-self: self-end;
}

.as-baseline {
  align-self: baseline;
}

.as-first-baseline {
  align-self: first baseline;
}

.as-last-baseline {
  align-self: last baseline;
}

.as-safe-center {
  align-self: safe center;
}

.as-unsafe-center {
  align-self: unsafe center;
}

.as-inherit {
  align-self: inherit;
}

.as-initial {
  align-self: initial;
}

.as-unset {
  align-self: unset;
}

.as-revert {
  align-self: revert;
}

.as-revert-layer {
  align-self: revert-layer;
}

/* align-content */
.ac-normal {
  align-content: normal;
}

.ac-center {
  align-content: center;
}

.ac-start {
  align-content: start;
}

.ac-end {
  align-content: end;
}

.ac-flex-start {
  align-content: flex-start;
}

.ac-flex-end {
  align-content: flex-end;
}

.ac-space-between {
  align-content: space-between;
}

.ac-space-around {
  align-content: space-around;
}

.ac-space-evenly {
  align-content: space-evenly;
}

.ac-stretch {
  align-content: stretch;
}

.ac-baseline {
  align-content: baseline;
}

.ac-first-baseline {
  align-content: first baseline;
}

.ac-last-baseline {
  align-content: last baseline;
}

.ac-safe-center {
  align-content: safe center;
}

.ac-unsafe-center {
  align-content: unsafe center;
}

.ac-inherit {
  align-content: inherit;
}

.ac-initial {
  align-content: initial;
}

.ac-unset {
  align-content: unset;
}

.ac-revert {
  align-content: revert;
}

.ac-revert-layer {
  align-content: revert-layer;
}

/* justify-items (mostly for CSS Grid but allow for completeness) */
.ji-normal {
  justify-items: normal;
}

.ji-stretch {
  justify-items: stretch;
}

.ji-center {
  justify-items: center;
}

.ji-start {
  justify-items: start;
}

.ji-end {
  justify-items: end;
}

.ji-flex-start {
  justify-items: flex-start;
}

.ji-flex-end {
  justify-items: flex-end;
}

.ji-self-start {
  justify-items: self-start;
}

.ji-self-end {
  justify-items: self-end;
}

.ji-left {
  justify-items: left;
}

.ji-right {
  justify-items: right;
}

.ji-legacy-left {
  justify-items: legacy left;
}

.ji-legacy-right {
  justify-items: legacy right;
}

.ji-legacy-center {
  justify-items: legacy center;
}

.ji-baseline {
  justify-items: baseline;
}

.ji-first-baseline {
  justify-items: first baseline;
}

.ji-last-baseline {
  justify-items: last baseline;
}

.ji-safe-center {
  justify-items: safe center;
}

.ji-unsafe-center {
  justify-items: unsafe center;
}

.ji-inherit {
  justify-items: inherit;
}

.ji-initial {
  justify-items: initial;
}

.ji-unset {
  justify-items: unset;
}

.ji-revert {
  justify-items: revert;
}

.ji-revert-layer {
  justify-items: revert-layer;
}

/* justify-content */
.jc-normal {
  justify-content: normal;
}

.jc-center {
  justify-content: center;
}

.jc-start {
  justify-content: start;
}

.jc-end {
  justify-content: end;
}

.jc-flex-start {
  justify-content: flex-start;
}

.jc-flex-end {
  justify-content: flex-end;
}

.jc-left {
  justify-content: left;
}

.jc-right {
  justify-content: right;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.jc-stretch {
  justify-content: stretch;
}

.jc-safe-center {
  justify-content: safe center;
}

.jc-unsafe-center {
  justify-content: unsafe center;
}

.jc-inherit {
  justify-content: inherit;
}

.jc-initial {
  justify-content: initial;
}

.jc-unset {
  justify-content: unset;
}

.jc-revert {
  justify-content: revert;
}

.jc-revert-layer {
  justify-content: revert-layer;
}

/* padding */
.p-xxs {
  padding: var(--spacing-xxs);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

/* margins */
.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

/* font-sizes */
.fs-xs {
  font-size: var(--typography-xs);
}

.fs-sm {
  font-size: var(--typography-sm);
}

.fs-md {
  font-size: var(--typography-md);
}

.fs-lg {
  font-size: var(--typography-lg);
}

.fs-xl {
  font-size: var(--typography-xl);
}

.fs-xxl {
  font-size: var(--typography-xxl);
}

.fs-xxxl {
  font-size: var(--typography-xxxl);
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}

.h-50 {
  height: 50%;
}

.c-primary {
  color: var(--primary-500);
}

.c-secondary {
  color: var(--secondary-500);
}

.c-tertiary {
  color: var(--tertiary-500);
}

.virtual-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 100%;
  max-height: 100%;
}.diagram-object-list {
  --dark-primary: #008cf0;
  --dark-secondary: #42b0ff;
  --dark-primary-hover: rgb(0 126 216);
  --dark-secondary-hover: rgb(34 163 255);
  --dark-dark-primary: rgb(0 126 216);
  --light-primary: #99d5ff;
  --light-secondary: #cceaff;
  --light-primary-hover: rgb(112 196 255);
  --light-secondary-hover: rgb(158 215 255);
  --light-dark-primary: rgb(112 196 255);
}
.diagram-object-list .virtual-scroll {
  position: absolute;
  inset: 0;
}
.diagram-object-list .menu {
  display: none;
  position: absolute;
  top: -12px;
  width: 100%;
  line-height: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.diagram-object-list .menu .material-symbols-rounded {
  padding: 2px;
  border-radius: 5px;
  background-color: var(--bg-secondary);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  color: var(--text-secondary);
}
.diagram-object-list .menu .material-symbols-rounded:hover {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}
.diagram-object-list .menu {
  z-index: 1;
}
.diagram-object-list {
  flex-grow: 1;
  position: relative;
  color: var(--text-primary);
}
.diagram-object-list:hover .menu {
  display: flex;
}
.diagram-object-list .runner-up-ranked {
  background-color: var(--warning-100);
}
.diagram-object-list .highest-ranked {
  background-color: var(--warning-500);
}
.diagram-object-list .highest-ranked * {
  color: var(--neutral-white) !important;
}
.diagram-object-list .depth-marker-container {
  display: flex;
}
.diagram-object-list .depth-marker {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.0823529412);
  margin-right: 11px;
}
.diagram-object-list .depth-marker.active {
  background: rgba(0, 0, 0, 0.3764705882);
}
.diagram-object-list .object-filter {
  display: grid;
  grid-template-columns: 24px auto auto 29px;
  align-items: center;
  background-color: var(--bg-tertiary);
  min-height: 22px;
  max-height: 22px;
  line-height: 22px;
}
.diagram-object-list .object-filter:hover {
  cursor: pointer;
}
.diagram-object-list .object-filter .name {
  padding-left: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-object-list .object-filter .number {
  font-size: var(--typography-xs);
  margin-left: var(--spacing-xxs);
  margin-left: auto;
  margin-right: 8px;
  text-align: right;
  line-height: 1;
  margin-bottom: 2px;
}
.diagram-object-list .object-filter .palette-icon,
.diagram-object-list .object-filter .chevron-icon {
  font-size: 13px;
}
.diagram-object-list .object-filter .palette-icon::before,
.diagram-object-list .object-filter .chevron-icon::before {
  display: block;
}
.diagram-object-list .object-filter .chevron-icon {
  margin-left: 6px;
  margin-right: 5px;
}
.diagram-object-list .diagram-object-list-item {
  padding-left: 12px;
  display: grid;
  grid-template-columns: auto 12px 1fr;
  min-height: 22px;
  max-height: 22px;
  line-height: 22px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.diagram-object-list .diagram-object-list-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item .chevron-icon {
  margin-left: -6px;
}
.diagram-object-list .diagram-object-list-item .name {
  position: relative;
  width: 100%;
}
.diagram-object-list .diagram-object-list-item .name .container {
  position: absolute;
  inset: 0;
  display: flex;
}
.diagram-object-list .diagram-object-list-item .name .container .crosshair {
  padding-right: 8px;
  padding-left: 4px;
  color: var(--text-secondary);
}
.diagram-object-list .diagram-object-list-item .name .container .crosshair:hover {
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item .name .container .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
.diagram-object-list .diagram-object-list-item .name .container .name .search-term {
  color: var(--warning-500);
}
.diagram-object-list .diagram-object-list-item.selected {
  background-color: var(--light-primary);
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.selected:hover {
  background-color: var(--light-primary-hover);
}
.diagram-object-list .diagram-object-list-item.selected .name .container .crosshair {
  color: var(--text-secondary);
}
.diagram-object-list .diagram-object-list-item.selected .name .container .crosshair:hover {
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.parent-selected {
  background-color: var(--light-secondary);
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.parent-selected:hover {
  background-color: var(--light-secondary-hover);
}
.diagram-object-list .diagram-object-list-item.focused {
  outline: 1px solid var(--light-dark-primary);
  z-index: 1;
}
.diagram-object-list .add-button {
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-size: 13px;
  color: var(--text-tertiary);
  height: 22px;
}
.diagram-object-list .add-button.disabled {
  color: var(--disabled-text);
}
.diagram-object-list .add-button:hover {
  cursor: pointer;
  background: var(--tertiary-outline-bg-hover);
  color: var(--text-primary);
}
.diagram-object-list .add-button:hover.disabled {
  background: transparent;
  color: var(--disabled-text);
  pointer-events: none;
}

.theme-dark .diagram-object-list .runner-up-ranked {
  background-color: var(--warning-900);
}
.theme-dark .diagram-object-list .highest-ranked {
  background-color: var(--warning-500);
}
.theme-dark .diagram-object-list .diagram-object-list-item.selected {
  background-color: var(--dark-primary);
}
.theme-dark .diagram-object-list .diagram-object-list-item.selected:hover {
  background-color: var(--dark-primary-hover);
}
.theme-dark .diagram-object-list .diagram-object-list-item.parent-selected {
  background-color: var(--dark-secondary);
}
.theme-dark .diagram-object-list .diagram-object-list-item.parent-selected:hover {
  background-color: var(--dark-secondary-hover);
}
.theme-dark .diagram-object-list .diagram-object-list-item.focused {
  outline: 1px solid var(--dark-dark-primary);
}
.theme-dark .diagram-object-list .depth-marker {
  background: rgba(255, 255, 255, 0.0823529412);
}
.theme-dark .diagram-object-list .depth-marker.active {
  background: rgba(255, 255, 255, 0.3764705882);
}

.canvas-selected-panel {
  min-height: 100%;
  max-height: 100%;
  flex-grow: 1;
  width: var(--sizing-xl);
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  overflow-y: auto;
}
.canvas-selected-panel .subtitle {
  font-size: var(--typography-sm);
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.canvas-selected-panel .label {
  font-size: var(--typography-sm);
  color: var(--text-secondary);
}
.canvas-selected-panel .grid-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}
.canvas-selected-panel .grid-options .grid-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.canvas-selected-panel input[type=color] {
  width: 80px;
  background-color: transparent;
  border: none;
  padding: 0;
}
.canvas-selected-panel #clear-canvas-btn {
  margin-top: auto;
}
.canvas-selected-panel.loading {
  justify-content: center;
  align-items: center;
}
.canvas-selected-panel .auto-arrange-btn,
.canvas-selected-panel .export-diagram-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
}
.canvas-selected-panel .reset-btn {
  margin-top: var(--spacing-sm);
}
.canvas-selected-panel .slider-wrapper {
  margin-bottom: 4px;
}
.canvas-selected-panel .bottom-buttons {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}
.canvas-selected-panel .bottom-buttons > button:last-child {
  margin-top: auto;
}
.canvas-selected-panel .horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-selected-panel .snap-corner-btn {
  position: absolute;
  width: 15px;
  aspect-ratio: 1;
  background: var(--tertiary-300);
}
.canvas-selected-panel .snap-corner-btn.selected {
  background: var(--tertiary-500);
}
.canvas-selected-panel .snap-corner-btn.selected:hover {
  background: var(--tertiary-400);
}
.canvas-selected-panel .snap-corner-btn:hover {
  cursor: pointer;
  background: var(--tertiary-200);
}
.canvas-selected-panel .snap-corner-btn.top-left {
  top: 0;
  left: 0;
}
.canvas-selected-panel .snap-corner-btn.top-right {
  top: 0;
  right: 0;
}
.canvas-selected-panel .snap-corner-btn.bottom-left {
  bottom: 0;
  left: 0;
}
.canvas-selected-panel .snap-corner-btn.bottom-right {
  bottom: 0;
  right: 0;
}
.canvas-selected-panel .snap-selector {
  border: 1px solid var(--tertiary-200);
  position: relative;
  aspect-ratio: 1;
  width: auto;
  margin-left: auto;
}

.domain-property-category {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}
.domain-property-category .category-title {
  display: flex;
  align-items: center;
  font-size: var(--typography-sm);
  font-weight: bold;
  padding: var(--spacing-xxs) var(--spacing-md);
  background: var(--bg-tertiary);
  margin-bottom: 0;
}
.domain-property-category .category-title:hover {
  cursor: pointer;
}
.domain-property-category .icon {
  margin-left: auto;
}

.domain-properties-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.properties-panel {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  align-items: stretch;
  min-height: 100%;
  max-height: 100%;
  flex-grow: 1;
  padding-bottom: var(--spacing-md);
  overflow-y: auto;
}

.undo-redo-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.undo-redo-buttons .action-btn-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--text-primary);
}
.undo-redo-buttons .action-btn-icon:hover {
  cursor: pointer;
}
.undo-redo-buttons .action-btn-icon.disabled {
  color: var(--disabled-text);
}
.undo-redo-buttons .action-btn-icon.disabled.undo-btn, .undo-redo-buttons .action-btn-icon.disabled.redo-btn {
  pointer-events: none;
}
.undo-redo-buttons .action-btn-icon.readonly-btn {
  background: var(--grey-medium);
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--text-primary);
}
.undo-redo-buttons .action-btn-icon.readonly-btn.on {
  background: var(--warning-500);
}
.undo-redo-buttons .action-btn-icon.material-symbols-rounded {
  font-size: var(--typography-lg);
}
.undo-redo-buttons > div {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.combo-panel {
  --width: 256px;
  max-width: var(--width);
  min-width: var(--width);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-height: 100%;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--grey-heavy);
}
.combo-panel .add-items-palette {
  flex-grow: 0;
}

.add-items-palette {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}

.categories-container {
  display: flex;
  flex-direction: column;
}

.no-results {
  padding: var(--spacing-xl);
  text-align: center;
  font-size: var(--typography-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.category-palette-header {
  min-height: var(--sizing-sm);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0 var(--spacing-sm);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.category-palette-header .name {
  margin-left: 2px;
  font-size: var(--typography-sm);
}
.category-palette-header .category-icon,
.category-palette-header .chevron-icon {
  margin-right: 10px;
}
.category-palette-header .category-icon::before,
.category-palette-header .chevron-icon::before {
  font-size: var(--typography-sm);
  margin-top: 1px;
  margin-right: 0;
  display: block;
}
.category-palette-header .chevron {
  margin-left: auto;
  margin-right: 0;
}
.category-palette-header .chevron::before {
  font-size: var(--typography-sm);
  margin-top: 1px;
  margin-right: 0;
  display: block;
}
.category-palette-header:hover {
  cursor: pointer;
}

.dependency-selector-menu .canvas-context-menu .keyboard-selected {
  background-color: var(--primary-muted-bg);
}
.dependency-selector-menu .resource-item,
.dependency-selector-menu .folder-item {
  transition: none !important;
  margin-left: 0;
}
.dependency-selector-menu .resource-item:hover,
.dependency-selector-menu .folder-item:hover {
  background-color: var(--bg-tertiary);
  cursor: pointer;
}
.dependency-selector-menu .dependency-selector .current-path-segment.header-text:hover {
  background: unset;
  cursor: default;
}
.dependency-selector-menu .resource-item.no-items {
  cursor: default !important;
  grid-template-columns: 1fr !important;
}
.dependency-selector-menu .resource-item.no-items:hover {
  background: unset !important;
}
.dependency-selector-menu .resource-item.no-items .item-text {
  text-align: center;
}
.dependency-selector-menu .resource-item.disabled {
  grid-template-columns: 16px 1fr 24px !important;
  cursor: default !important;
  opacity: 0.5;
}
.dependency-selector-menu .resource-item.disabled:hover {
  background: unset !important;
}
.dependency-selector-menu .resource-item.disabled .maxed {
  font-size: 10px;
  line-height: 10px;
  text-align: right;
  font-style: italic;
}.header-bar {
  position: sticky;
  top: 0;
  min-height: 40px;
  width: 100%;
  z-index: 1;
  background: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-colour-light);
}
.header-bar .center-section {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
}
.header-bar .left-section {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.header-bar .right-section {
  display: flex;
}

.organisation-switcher {
  flex-grow: 1;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.organisation-switcher .search-input {
  margin-bottom: var(--spacing-sm);
}
.organisation-switcher .scrolling-container {
  overflow-y: auto;
}
.organisation-switcher .scrolling-container .orgs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.organisation-switcher .gradient-highlight-btn {
  background: var(--bg-primary);
  text-align: left;
}
.organisation-switcher .gradient-highlight-btn.selected {
  background: var(--bg-primary);
}

.page {
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-flow: row nowrap;
  max-width: 100vw;
  min-height: 100vh;
  width: 100%;
}
@media (max-width: 768px) {
  .page {
    flex-direction: column;
  }
}

.page-main {
  flex-grow: 1;
  z-index: 0;
  background: transparent;
  flex-basis: 100%;
}
@media (max-width: 768px) {
  .page-main {
    max-width: 100vw;
  }
}

.page-nav {
  background-color: var(--bg-primary);
  border-right: 1px solid var(--line-colour-light);
}
@media (max-width: 1024px) {
  .page-nav {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

.page-content-scroll-container {
  overflow-y: auto;
}

.content-container {
  padding: 0;
}
.content-container.extruded {
  background: var(--bg-secondary);
  padding: var(--spacing-xxl);
}

.page-wrapper {
  height: 100%;
  max-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-title {
  font-size: calc(var(--typography-lg) * 2);
  color: var(--text-primary);
  font-weight: bold;
  margin: 0 0 var(--spacing-lg) 0;
}

.page-subtitle {
  font-size: var(--typography-lg);
  color: var(--text-secondary);
  font-weight: bold;
  margin: 0 0 var(--spacing-lg) 0;
}

.page-flex-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.page-flex-row.x-center {
  justify-content: center;
}
.page-flex-row.y-center {
  align-items: center;
}

.page-content {
  width: 100%;
  max-width: var(--breakpoint-lg);
  padding-top: calc(var(--spacing-xxl) * 2);
  padding-bottom: calc(var(--spacing-xxl) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-lg);
}
.page-content.no-header-bar {
  margin-top: var(--sizing-md);
}
@media (max-width: 1600px) {
  .page-content {
    max-width: var(--breakpoint-md);
  }
}
@media (max-width: 1200px) {
  .page-content {
    padding: calc(var(--spacing-xxl) * 2);
  }
}
@media (max-width: 1024px) {
  .page-content {
    padding: var(--spacing-xxl);
  }
}
@media (max-width: 768px) {
  .page-content {
    padding: var(--spacing-xl);
  }
}

.input-background {
  margin-top: var(--spacing-md);
  background: var(--bg-secondary);
  padding: var(--spacing-md);
}
.input-background h3 {
  margin-top: 0;
  font-family: var(--font-family-heading);
}
.input-background .code-block textarea {
  font-family: var(--font-family-monospace);
  font-size: var(--typography-sm);
}

.side-menu-item {
  height: var(--sizing-md);
  width: var(--sizing-md);
  display: flex;
  flex-direction: column;
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  user-select: none;
}
.side-menu-item.disabled {
  pointer-events: none;
}
.side-menu-item p {
  margin: 6px 0 0;
  font-size: var(--typography-xs);
}
.side-menu-item.selected {
  background-color: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
}
.side-menu-item:hover {
  background-color: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
  cursor: pointer;
}

.theme-dark .side-menu-item.selected {
  background-color: var(--grey-800);
}
.theme-dark .side-menu-item:hover {
  background-color: var(--grey-800);
}

.crud-page {
  display: contents;
}
.crud-page .create-button {
  height: auto;
}
.crud-page .crud-search-bar {
  max-width: var(--breakpoint-xxs);
}
.crud-page .actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: stretch;
  justify-content: space-between;
}
.crud-page .pagination {
  width: 100%;
  margin-top: var(--spacing-sm);
  font-size: var(--typography-sm);
  text-align: center;
}* {
	box-sizing: border-box;
}

:where(html, body, #root) {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--font-family);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		padding: 0;
		font-family: var(--font-family-heading);
	}

	h5,
	h6 {
		color: var(--text-secondary);
		text-transform: uppercase;
	}

	p {
		margin: 0;
		padding: 0;
	}
}/* This CID is from the EvenGrid component, which is used as the base for ButtonGroup. */
.button-group[data-cid='36f05110-0ebf-5ec0-8f30-3f0f1c88421b'] {
	margin: var(--spacing-lg) 0;
	gap: var(--spacing-xs);
	width: 100%;
}
.even-grid[data-cid='36f05110-0ebf-5ec0-8f30-3f0f1c88421b'] {
	--count: 0;

	display: grid;

	&.horizontal {
		grid-template-columns: repeat(var(--count), 1fr);
	}

	&.vertical {
		grid-template-rows: repeat(var(--count), 1fr);
	}
}
.new-theme-toggle {
	aspect-ratio: 66 / 30;
	border-radius: 9999px;
	overflow: hidden;
	cursor: pointer;

	.wmapp-switch {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;

		.sun,
		.moon {
			pointer-events: none;
			display: block;
			position: absolute;
			border: none;
			width: 36.36%;
			height: 80%;
			transform: translate3d(0, 0, 0) rotate(0);
			transition:
				transform 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0s,
				opacity 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0s;
			top: 10%;
			left: 4.55%;
		}

		.sun {
			opacity: 1;

			.st0 {
				fill: #fba441;
			}
		}

		.moon {
			opacity: 0;

			.st0 {
				fill: #f4dc3e;
			}
		}

		.wmapp-switch-switch {
			width: 100%;
			height: 100%;
			margin: 0;
			border: 0;
			background: #b7e3ff;
			overflow: hidden;
			transition: all 0.3s cubic-bezier(0, 0, 0.44, 0.96) 0s;

			.stars,
			.clouds {
				display: block;
				height: 80%;
				position: absolute;
				bottom: 10%;
				border: none;
				border-radius: 0;
				transition: all 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0.1s;
			}

			.clouds {
				width: 39.39%;
				background-size: 39.39%;
				right: 10.61%;
				opacity: 1;

				.st0 {
					fill: #fff;
				}
			}

			.stars {
				width: 59.09%;
				background-size: 45.45%;
				right: 106.06%;
				opacity: 0;

				.st0 {
					fill: #f4dd3f;
				}
			}
		}

		&.dark {
			.sun {
				transform: translate3d(150%, 0, 0) rotate(180deg);
				opacity: 0;
			}

			.moon {
				transform: translate3d(150%, 0, 0) rotate(180deg);
				opacity: 1;
			}

			.wmapp-switch-switch {
				background: #000;

				.clouds {
					right: -9.09%;
					opacity: 0;
				}

				.stars {
					right: 30.3%;
					opacity: 1;
				}
			}
		}
	}
}.ErrorMessage {
	--base-size: var(--typography-md);

	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	font-size: var(--base-size);

	&.column {
		flex-direction: column;
	}

	&.row {
		flex-direction: row;
	}

	&.grid {
		display: grid;
		grid-template:
			'icon title' auto
			'message message' auto / auto 1fr;
		gap: var(--spacing-xs) var(--spacing-sm);
	}

	&.overlay {
		position: absolute;
	}

	> .icon {
		grid-area: icon;
		color: var(--text-error);
		font-size: calc(var(--base-size) * 3);
	}

	> .title {
		grid-area: title;
		font-size: calc(var(--base-size) * 1.5);
		margin: 0;
	}

	> .message {
		grid-area: message;
		text-align: center;
	}

	.codeblock {
		width: calc(100% - var(--spacing-xl));
		max-height: 70vh;
	}
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #24292e;
  background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}.codeblock {
	position: relative;
	margin: 0;
	background: var(--bg-secondary);
	color: var(--text-primary);

	> .scroller {
		overflow: auto;
		width: 100%;
		height: 100%;
		padding: var(--spacing-lg);

		> code {
			font-size: var(--typography-sm);
			font-family: var(--font-family-monospace);

			&.hljs {
				background: transparent; /* Override hljs's default background */
				color: inherit; /* Inherit text color from .codeblock */
			}

			> span[data-line-number] {
				display: block;

				&::before {
					content: attr(data-line-number);
					margin-right: 16px;
					width: 1rem;
					text-align: right;
					display: inline-block;
					border-right: 1px solid var(--line-colour-light);
					padding-right: var(--spacing-sm);
				}
			}
		}

		/* ${(props) => props.theme.scrollbars.skinny} */
	}

	.copy-to-clipboard {
		margin: 0 0 0 auto;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}
}
.inline-spinner__inline-container {
	height: 100%;
}

.inline-spinner__inline-container--overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(255 255 255 / 70%);
	z-index: 700;
}

.inline-spinner__spinner-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.inline-spinner__spinner-container svg {
	animation:
		inline-spinner-scale 2s ease-in-out infinite,
		inline-spinner-spin 1.4s linear infinite;
}

@keyframes inline-spinner-scale {
	0% {
		scale: 1;
		opacity: 0.7;
	}

	50% {
		scale: 1.2;
		opacity: 1;
	}

	100% {
		scale: 1;
		opacity: 0.7;
	}
}

@keyframes inline-spinner-spin {
	100% {
		transform: rotate(360deg);
	}
}
/* stylelint-disable no-descending-specificity */
.form-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.form-input-wrapper .label-wrapper,
.form-input-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.form-input-wrapper .label,
.form-input-label-row .label,
.form-input-label {
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.form-input-wrapper .required-marker,
.form-input-label-row .required-marker,
.form-input-required-marker {
	color: var(--error-500);
	font-weight: 400;
}

.form-input-wrapper .label-actions,
.form-input-label-row .label-actions,
.form-input-label-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
	cursor: pointer;
}

.form-input-wrapper .bottom-bar,
.form-input-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 1.25rem;
}

.form-input-wrapper .helper-text-container,
.form-input-bottom-bar .helper-text-container,
.form-input-helper-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.form-input-wrapper .helper-text--error,
.form-input-bottom-bar .helper-text--error,
.form-input-helper-text--error {
	color: var(--error-500);
}

.form-input-wrapper .helper-text,
.form-input-bottom-bar .helper-text,
.form-input-helper-text {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--text-secondary);
	flex: 1;
}

.form-input-wrapper .link-slot,
.form-input-bottom-bar .link-slot,
.form-input-link {
	font-size: 0.75rem;
	line-height: 1rem;
	text-decoration: none;
	color: var(--primary-500);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	flex-shrink: 0;
	margin-left: auto;
}

.form-input-wrapper .link-slot:hover,
.form-input-bottom-bar .link-slot:hover,
.form-input-link:hover {
	text-decoration: underline;
}

.form-input-wrapper .link-slot:focus,
.form-input-bottom-bar .link-slot:focus,
.form-input-link:focus {
	outline: 2px solid var(--info-500);
	outline-offset: 2px;
}

.form-input-wrapper.valid .helper-text:not(.helper-text--error),
.form-input-wrapper.valid .form-input-helper-text:not(.form-input-helper-text--error),
.form-input-bottom-bar.valid .helper-text:not(.helper-text--error),
.form-input-bottom-bar.valid .form-input-helper-text:not(.form-input-helper-text--error) {
	color: var(--success-500);
}

.form-input-wrapper.invalid .helper-text,
.form-input-wrapper.invalid .form-input-helper-text,
.form-input-bottom-bar.invalid .helper-text,
.form-input-bottom-bar.invalid .form-input-helper-text {
	color: var(--error-500);
}
/* stylelint-disable no-descending-specificity */
.simple-input-wrapper {
	--input-border-radius: 4px;
	--input-border-width: 1px;
	--input-border-color: var(--line-colour);
	--input-focus-color: var(--info-300);
	--input-text-color: var(--text-secondary);
	--input-placeholder-color: var(--text-placeholder);
	--input-icon-color: var(--text-secondary);
	--input-background-color: var(--textbox-bg-default);
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-padding-inline-start: var(--input-padding-inline);
	--input-padding-inline-end: var(--input-padding-inline);
	--input-font-size: var(--typography-md);
	--icon-size: 16px;
}

.simple-input-wrapper.simple-input--size-md {
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-font-size: var(--typography-md);
}

.simple-input-wrapper.simple-input--size-sm {
	--input-padding-block: 5.1px;
	--input-padding-inline: var(--spacing-sm);
	--input-font-size: var(--typography-sm);
}

/* Validation state styling for the wrapper */
.simple-input-wrapper.invalid {
	--input-border-color: var(--line-error);
}

.simple-input-wrapper.valid {
	--input-border-color: var(--line-success);
}

.simple-input-wrapper.disabled,
.simple-input-wrapper.read-only {
	--input-border-color: var(--line-disabled);
	--input-placeholder-color: var(--disabled-text);
	--input-icon-color: var(--disabled-text);
	--input-background-color: var(--textbox-bg-disabled);
}

.simple-input-wrapper.read-only {
	.simple-input__field:focus-within {
		border-color: var(--input-focus-color);
		box-shadow: inset 0 0 0 0.5px var(--input-focus-color);

		--input-background-color: var(--textbox-bg-disabled);
	}
}

.simple-input-wrapper.disabled {
	--input-text-color: var(--disabled-text);
}

.simple-input__field {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	border-radius: var(--input-border-radius);
	border: var(--input-border-width) solid var(--input-border-color);
	background-color: var(--input-background-color);
	transition:
		border-color 160ms var(--animation-productive),
		box-shadow 160ms var(--animation-productive);
	box-shadow: none;
}

.simple-input__field:focus-within {
	border-color: var(--input-focus-color);
	box-shadow: inset 0 0 0 0.5px var(--input-focus-color);

	--input-background-color: var(--textbox-bg-active);
}

.simple-input__field.simple-input__field--has-icon {
	--input-padding-inline-start: var(--spacing-xs);
}

.simple-input__field.simple-input__field--has-trailing {
	--input-padding-inline-end: var(--spacing-xs);
}

.simple-input__leading-icon {
	margin-left: var(--input-padding-inline-start);
	color: var(--input-icon-color);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.simple-input__input-element {
	flex: 1 1 auto;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--input-text-color);
	font-size: var(--input-font-size);
	padding: var(--input-padding-block) var(--input-padding-inline-end) var(--input-padding-block)
		var(--input-padding-inline-start);
	min-width: 0;
}

.simple-input__input-element::placeholder {
	color: var(--input-placeholder-color);
}

.simple-input__trailing-slot {
	margin-right: var(--input-padding-inline-end);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}
/* stylelint-disable no-descending-specificity */
.input__action-button {
	background: none;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--input-icon-color);
	cursor: pointer;
	border-radius: 4px;
	transition:
		color 160ms var(--animation-productive),
		background-color 160ms var(--animation-productive);
}

.input__action-button:hover:not(:disabled) {
	color: var(--input-focus-color);
}

.input__action-button:focus-visible {
	outline: 2px solid var(--input-focus-color);
	outline-offset: 2px;
}

.input__action-button--disabled,
.input__action-button:disabled {
	cursor: not-allowed;
	color: var(--disabled-text);
}

.input__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--icon-size);
	width: var(--icon-size);
	height: var(--icon-size);
}
/* stylelint-disable no-descending-specificity */
.segmented-control {
	display: block;
	position: relative;
	line-height: 1;

	/* Size variants */
	&.segmented-control-size-sm {
		.segment {
			padding: 7px 16px;
			font-size: 12px;
		}
	}

	&.segmented-control-size-md {
		.segment {
			padding: 13px 16px;
			font-size: 12px;
		}
	}

	&.segmented-control-size-lg {
		.segment {
			padding: 11px 20px;
			font-size: 16px;
		}
	}

	.segment {
		flex: 1;
		text-align: center;
		background: var(--bg-tertiary);
		cursor: pointer;
		border: 1px solid transparent;
		border-inline-width: 0;
		position: relative;
		color: var(--text-primary);

		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			border-left-width: 1px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			border-right-width: 1px;
		}

		&:focus {
			outline: none;
		}
	}

	.underlay {
		display: flex;

		.segment {
			border-color: var(--bg-secondary);

			span {
				visibility: hidden;
			}

			+ .segment {
				&::before {
					content: '';
					display: block;
					width: 1px;
					height: 70%;
					background: var(--tertiary-200);
					position: absolute;
					top: 15%;
					left: 0;
					transition: opacity 0.15s ease;
					opacity: 1;
				}
			}

			&.selected + .segment {
				&::before {
					opacity: 0;
				}
			}
		}
	}

	.overlay {
		display: flex;
		position: absolute;
		inset: 0;

		.segment {
			background: transparent;

			span {
				visibility: visible;
			}
		}
	}

	.indicator {
		background-color: var(--bg-secondary);
		border-radius: 4px;
		box-shadow:
			0 2px 4px color-mix(in srgb, var(--text-primary) 10%, transparent),
			0 0 1px color-mix(in srgb, var(--text-primary) 30%, transparent);
		position: absolute;
		top: 0;
		left: 0;
		transition:
			width 0.15s ease,
			transform 0.15s ease,
			height 0.15s ease;
	}
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] {
  display: grid;
  position: relative;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"].vertical {
  text-align: center;
  justify-items: center;
  grid-template-areas: "image" "name" "description";
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"].horizontal {
  text-align: left;
  grid-template: "image name" 1fr "image name" 1fr/auto 1fr;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"].horizontal.has-description {
  grid-template-areas: "image name" "image description";
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit {
  position: absolute;
  display: block;
  transform: scale(0.5);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.sm {
  display: none;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.lg {
  transform: scale(1);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit:hover {
  display: block;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.xs {
  margin-left: calc(-12px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.sm {
  margin-left: calc(-16px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.md {
  margin-left: calc(-24px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.lg {
  margin-left: calc(-60px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img {
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  grid-area: image;
  opacity: 1;
  background: var(--tertiary-50);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.vertical {
  justify-self: center;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.horizontal {
  justify-self: end;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.loading {
  opacity: 0.3;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:hover {
  box-shadow: 0 5px 15px var(--bg-tertiary);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:active {
  outline: 2px solid var(--text-primary);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:active.isLoading {
  outline: none;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:hover ~ button.edit {
  display: block;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.xs {
  width: 24px;
  margin: var(--spacing-xxs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.sm {
  width: 32px;
  margin: var(--spacing-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.md {
  width: 48px;
  margin: var(--spacing-sm);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.lg {
  width: 120px;
  margin: var(--spacing-md);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name {
  grid-area: name;
  font-weight: bold;
  max-width: 100%;
  align-self: center;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.has-description {
  align-self: end;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.xs {
  font-size: var(--typography-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.sm {
  font-size: var(--typography-sm);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.md {
  font-size: var(--typography-md);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.lg {
  font-size: var(--typography-lg);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description {
  grid-area: description;
  max-width: 100%;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.xs {
  font-size: var(--typography-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.sm {
  font-size: var(--typography-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.md {
  font-size: var(--typography-sm);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.lg {
  font-size: var(--typography-md);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container {
  grid-area: image;
  justify-self: center;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.xs {
  --size: calc(map.get($props, image) / 2);
  margin: calc(6px + var(--spacing-sm)) 0 0 0;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.sm {
  --size: calc(map.get($props, image) / 2);
  margin: calc(8px + var(--spacing-sm)) 0 0 0;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.md {
  --size: calc(map.get($props, image) / 2);
  margin: calc(12px + var(--spacing-sm)) 0 0 0;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.lg {
  --size: calc(map.get($props, image) / 2);
  margin: calc(30px + var(--spacing-sm)) 0 0 0;
}.truncate-span[data-cid='49fadebe-a29c-58eb-bf2e-e9da7e647fef'] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
.context-menu-container[data-cid="064183e3-a22d-5fac-bb77-67f27b5482f0"] {
  background-color: var(--bg-primary);
  box-shadow: 0 1px 3px var(--drop-shadow);
  border-radius: 4px;
  overflow: hidden;
}

.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9] {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-width: 150px;
  display: block;
  text-align: left;
  padding: 6px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-colour-light);
  font-size: var(--typography-md);
  text-decoration: none;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].icon {
  gap: 8px;
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9]:hover {
  cursor: pointer;
  background: var(--bg-tertiary);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].disabled {
  pointer-events: none;
  opacity: 0.5;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9]:last-child {
  border-bottom: none;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].primary {
  background: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].primary:hover {
  background: var(--primary-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].secondary {
  background: var(--secondary-muted-bg);
  color: var(--secondary-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].secondary:hover {
  background: var(--secondary-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].tertiary {
  background: var(--tertiary-muted-bg);
  color: var(--tertiary-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].tertiary:hover {
  background: var(--tertiary-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].info {
  background: var(--info-muted-bg);
  color: var(--info-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].info:hover {
  background: var(--info-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].success {
  background: var(--success-muted-bg);
  color: var(--success-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].success:hover {
  background: var(--success-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].caution {
  background: var(--caution-muted-bg);
  color: var(--caution-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].caution:hover {
  background: var(--caution-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].warning {
  background: var(--warning-muted-bg);
  color: var(--warning-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].warning:hover {
  background: var(--warning-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].error {
  background: var(--error-muted-bg);
  color: var(--error-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].error:hover {
  background: var(--error-muted-bg-hover);
}.toast-container {
	position: fixed;
	bottom: 0;
	right: 0;
	display: grid;
	z-index: 900;
	gap: var(--spacing-md);
	margin: var(--spacing-md);
}@keyframes modal-bg-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes modal-slide-in-bottom {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0);
  }
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] {
  --modal-spacing: var(--spacing-md);
  position: fixed;
  z-index: 600;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0;
  left: 0;
  background-color: rgba(21, 21, 23, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: modal-bg-fade-in 0.5s var(--animation-entrance-expressive) 0s 1;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
  --modal-max-width: 700px;
  --modal-width: auto;
  position: relative;
  background: var(--bg-secondary);
  opacity: 1;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.38);
  animation: modal-slide-in-bottom 0.3s var(--animation-entrance-expressive) 0s 1;
  max-height: 100vh;
  overflow-y: auto;
  max-width: min(var(--modal-max-width), 100vw);
  width: fit-content;
  min-width: var(--modal-width);
}
@media (max-width: 768px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 95vw);
  }
}
@media (max-width: 640px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 100vw);
    width: 100vw;
  }
}
@media (max-height: 768px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 80vw);
  }
}
@media (max-height: 768px) and (width <= calc(768px + 100px)) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 90vw);
  }
}
@media (max-height: 768px) and (max-width: 768px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 95vw);
  }
}
@media (max-height: 768px) and (max-width: 1024px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 100vw);
  }
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal {
  max-height: 95vh;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content-wrapper {
  padding: 0 var(--modal-spacing);
  max-height: 100%;
  overflow-y: auto;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content {
  background: var(--bg-primary);
  padding: var(--modal-spacing);
  min-width: min(300px, 100dvw);
  color: var(--text-primary);
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content > *:first-child {
  margin-top: 0;
  padding-top: 0;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}.modal-header[data-cid='ece2034f-17d1-49c4-82a2-021a5ea15cbe'] {
	padding: var(--modal-spacing);
	color: var(--text-primary);

	/* The container will use flex gap to create space between the header and body, so we remove the bottom padding from the header. */
	padding-bottom: 0;

	.modal-titles {
		width: 100%;
	}

	.modal-title {
		margin: 0;
		padding: 0;
		font-family: var(--font-family-heading);
		font-size: var(--typography-xxl);
		font-weight: bold;
	}

	.modal-subtitle {
		margin: 0;
		padding: 0;
		font-family: var(--font-family);
		font-size: var(--typography-lg);
		font-weight: normal;
	}

	.modal-close-button {
		min-height: auto;
		padding: var(--spacing-xxs);

		/* The negative margins are to offset the padding, so that the clickable area of the button extends to the edge of the modal. */
		margin-top: calc(var(--spacing-xxs) * -1);
		margin-right: calc(var(--spacing-xxs) * -1);
	}
}
.v-stack,
.h-stack {
  display: flex;
}

.v-stack {
  flex-direction: column;
}
.modal-actions[data-cid='543da41b-19fe-4db8-9f36-b8e105584b70'] {
	padding: var(--modal-spacing);
	background: var(--bg-tertiary);
}
.modal-footer[data-cid='2dd7750a-c88a-4f37-ad37-db70d8b9a465'] {
	padding: 0 var(--modal-spacing);
}
[data-cid=d3eab98a-939c-4daa-8c1b-23ad3ce47769] .left-menu {
  --left-menu-padding: var(--spacing-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-colour-light);
}
[data-cid=d3eab98a-939c-4daa-8c1b-23ad3ce47769] .left-menu.collapsed .left-menu-section {
  align-items: center;
}.left-menu-header[data-cid='6385fa12-b7c4-4dd4-9b73-425a9de88269'] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-xxs);
	padding: calc(var(--left-menu-padding) / 2);

	button.btn-md {
		padding: calc(var(--left-menu-padding) / 2);
		color: var(--text-secondary);
	}

	> .alt-theme-toggle {
		margin-left: auto;
	}

	> .heading {
		flex-grow: 0;
	}

	/**
	 * Hide the current product and the dropdown icon if the heading is overflowing,
	 * as they are not useful in this case and just take up space.
	 */
	&.heading-overflowing {
		.product-switcher {
			.current-product,
			.material-symbols-rounded:last-child {
				display: none;
			}
		}
	}

	&.collapsed {
		justify-content: center;
	}
}
/* stylelint-disable no-descending-specificity */
.alt-theme-toggle {
	--toggle-width: 80px;
	--base-width: 80px;
	--base-height: 44px;
	--toggle-scale: calc(var(--toggle-width) / var(--base-width));
	--track-padding: 6px;
	--track-day: var(--sol-500);
	--track-night: var(--luna-500);
	--knob-shadow: 0 6px 12px rgb(32 10 53 / 24%);
	--decor-hidden-offset: 70%;
	--decor-hidden-blur: 4px;
	--decor-transition-duration: 0.4s;
	--decor-transition-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--cloud-large-enter-delay: 0.18s;
	--cloud-small-enter-delay: 0.1s;
	--cloud-large-exit-delay: 0s;
	--cloud-small-exit-delay: 0.04s;
	--star-large-enter-delay: 0.15s;
	--star-small-enter-delay: 0.22s;
	--star-large-exit-delay: 0s;
	--star-small-exit-delay: 0.04s;

	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: var(--toggle-width);
	height: calc(var(--base-height) * var(--toggle-scale));
	border-radius: calc(var(--base-height) * var(--toggle-scale) / 2);
	cursor: pointer;
	user-select: none;

	&:focus-visible {
		outline: 2px solid rgb(91 15 211 / 55%);
		outline-offset: 3px;
	}
}

.alt-theme-toggle-content {
	position: absolute;
	inset: 0;
	width: var(--base-width);
	height: var(--base-height);
	transform: scale(var(--toggle-scale));
	transform-origin: top left;

	--knob-size: calc(var(--base-height) - var(--track-padding) * 2);
	--knob-travel: calc(var(--base-width) - (var(--track-padding) * 2) - var(--knob-size));
	--icon-size: calc(var(--knob-size) * 0.6);
	--decor-gap: calc(var(--base-height) * 0.12);

	&.is-dark {
		.alt-theme-toggle-track {
			background: var(--track-night);
		}

		.alt-theme-toggle-icon.moon {
			transform: translateY(0) rotate(8deg);
			filter: blur(0);
			opacity: 1;
		}

		.alt-theme-toggle-icon.sun {
			filter: blur(3px);
			opacity: 0;
			transform: translateY(35%) rotate(-8deg);
		}

		.alt-theme-toggle-decor.stars > .alt-theme-toggle-star {
			opacity: 1;
			filter: blur(0);
			translate: 0 0;
		}

		.alt-theme-toggle-decor.stars > .alt-theme-toggle-star.large {
			transition-delay: var(--star-large-enter-delay, 0.05s);
		}

		.alt-theme-toggle-decor.stars > .alt-theme-toggle-star.small {
			transition-delay: var(--star-small-enter-delay, 0.12s);
		}

		.alt-theme-toggle-decor.stars {
			opacity: 1;
			transform: translateY(-50%);
		}
	}

	&.is-light {
		.alt-theme-toggle-knob {
			transform: translateX(var(--knob-travel));
		}

		.alt-theme-toggle-icon.sun {
			transform: translateY(0) rotate(8deg);
			filter: blur(0);
			opacity: 1;
		}

		.alt-theme-toggle-icon.moon {
			filter: blur(3px);
			opacity: 0;
			transform: translateY(-35%) rotate(-8deg);
		}

		.alt-theme-toggle-decor.clouds {
			opacity: 1;
			transform: translateY(-50%);
		}

		.alt-theme-toggle-decor.clouds > .alt-theme-toggle-cloud {
			opacity: 1;
			filter: blur(0);
			translate: 0 0;
		}

		.alt-theme-toggle-decor.clouds > .alt-theme-toggle-cloud.large {
			transition-delay: var(--cloud-large-enter-delay, 0.05s);
		}

		.alt-theme-toggle-decor.clouds > .alt-theme-toggle-cloud.small {
			transition-delay: var(--cloud-small-enter-delay, 0.12s);
		}
	}
}

.alt-theme-toggle-track {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--base-height) / 2);
	background: var(--track-day);
	padding: var(--track-padding);
	transition: background 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	overflow: hidden;
}

.alt-theme-toggle-knob {
	position: absolute;
	top: var(--track-padding);
	left: var(--track-padding);
	width: var(--knob-size);
	height: var(--knob-size);
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--knob-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(0);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.alt-theme-toggle-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	filter: blur(0);
	transform: translateY(0) rotate(0deg);
	transition:
		opacity 0.4s ease 0.1s,
		filter 0.4s ease 0.1s,
		transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;

	&.sun {
		color: var(--sol-500);
	}

	&.moon {
		color: var(--luna-500);
	}
}

.alt-theme-toggle-icon-svg {
	width: var(--icon-size);
	height: var(--icon-size);
	display: block;
}

.alt-theme-toggle-decor {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--decor-transition-duration) var(--decor-transition-ease),
		transform var(--decor-transition-duration) var(--decor-transition-ease),
		filter var(--decor-transition-duration) ease;

	&.clouds {
		display: block;
		left: calc(var(--track-padding) + var(--decor-gap));
		top: 50%;
		transform: translateY(-50%);
		color: rgb(255 255 255 / 85%);
		width: calc(var(--base-height) * 1.05);
		height: calc(var(--base-height) * 0.8);

		> .alt-theme-toggle-cloud {
			position: absolute;
		}
	}

	&.stars {
		display: block;
		right: calc(var(--track-padding) + var(--decor-gap));
		top: 50%;
		transform: translateY(-50%);
		color: rgb(255 255 255 / 75%);
		width: calc(var(--base-height) * 0.85);
		height: calc(var(--base-height) * 0.9);

		> .alt-theme-toggle-star {
			position: absolute;
		}
	}
}

.alt-theme-toggle-cloud,
.alt-theme-toggle-star {
	display: block;
	opacity: 0;
	filter: blur(var(--decor-hidden-blur));
	translate: 0 calc(var(--decor-hidden-offset) * var(--decor-hidden-direction, 1));
	transition:
		opacity var(--decor-transition-duration) var(--decor-transition-ease),
		filter var(--decor-transition-duration) ease,
		translate var(--decor-transition-duration) var(--decor-transition-ease);
}

.alt-theme-toggle-cloud {
	--decor-hidden-direction: 1;

	&.large {
		width: calc(var(--base-height) * 0.53);
		height: calc(var(--base-height) * 0.53);
		bottom: 0;
		right: 40%;
		transition-delay: var(--cloud-large-exit-delay, 0s);
	}

	&.small {
		width: calc(var(--base-height) * 0.33);
		height: calc(var(--base-height) * 0.33);
		top: 0%;
		left: 0;
		transition-delay: var(--cloud-small-exit-delay, 0s);
	}
}

.alt-theme-toggle-star {
	--decor-hidden-direction: -1;

	&.large {
		width: calc(var(--base-height) * 0.55);
		height: calc(var(--base-height) * 0.55);
		top: 40%;
		left: 26%;
		transition-delay: var(--star-large-exit-delay, 0s);
	}

	&.small {
		transform: rotate(25deg);
		width: calc(var(--base-height) * 0.42);
		height: calc(var(--base-height) * 0.42);
		bottom: 48%;
		right: -10%;
		transition-delay: var(--star-small-exit-delay, 0s);
	}
}
.product-switcher[data-cid='828ec177-a808-4069-8db3-275633e1ff84'] {
	--product-color: var(--color-primary);

	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--typography-xl);
	font-family: var(--font-family-heading);
	font-weight: bold;
	padding: calc(var(--left-menu-padding) / 2);
	border-radius: var(--radius-sm);
	color: var(--text-primary);

	.material-symbols-rounded:first-child {
		color: var(--product-color);
	}

	&:hover {
		background: var(--bg-tertiary);
	}

	&.ailab {
		--product-color: var(--color-ailab);
	}

	&.chat {
		--product-color: var(--color-chat);
	}

	&.docs {
		--product-color: var(--color-docs);
	}

	&.mattermost {
		--product-color: var(--color-mattermost);
	}

	.current-product {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.1;
	}

	.current-product-name {
		white-space: nowrap;
	}

	.product-tag {
		font-family: var(--font-family-body);
		font-size: var(--typography-sm);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--text-secondary);
	}
}

.product-switcher-menu {
	.context-menu-item {
		&.disabled {
			/* We override this so that the tooltip can be shown on disabled items */
			pointer-events: auto !important;
		}

		.product-switcher-item {
			--product-color: var(--color-primary);

			padding: var(--spacing-xs);
			color: var(--product-color);

			&.ailab {
				--product-color: var(--color-ailab);
			}

			&.chat {
				--product-color: var(--color-chat);
			}

			&.docs {
				--product-color: var(--color-docs);
			}

			&.mattermost {
				--product-color: var(--color-mattermost);
			}

			.name {
				font-family: var(--font-family-heading);
				font-size: var(--typography-lg);
				font-weight: bold;
			}

			.summary {
				font-size: var(--typography-sm);
				color: var(--text-tertiary);
			}

			.product-tag {
				font-family: var(--font-family-body);
				font-size: var(--typography-sm);
				font-weight: 700;
				letter-spacing: 0.12em;
				text-transform: uppercase;
				color: var(--text-secondary);
			}
		}
	}
}
.left-menu-section[data-cid='cb849615-61bd-491b-8af8-163b20de0305'] {
	display: flex;
	flex-direction: column;

	&.border {
		border-top: 1px solid var(--line-colour-light);
	}

	&.fill {
		flex-grow: 1;
	}

	.label {
		font-size: var(--typography-sm);
		font-weight: bold;
		text-transform: uppercase;
		color: var(--text-tertiary);
		padding: var(--spacing-xs) var(--left-menu-padding);
	}

	&.collapsible {
		.label {
			display: flex;
			align-items: center;
			gap: var(--spacing-xxxs);
			justify-content: space-between;

			&:hover {
				cursor: pointer;
				background: var(--bg-tertiary);
			}
		}
	}
}
.left-menu-item[data-cid='598bbc6d-1de7-4ada-9410-4776fb066386'] {
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
	line-height: 1;
	width: 100%;
	padding: var(--spacing-xs) var(--left-menu-padding);
	text-decoration: none;
	color: var(--text-secondary);
	font-size: var(--typography-md);

	.material-symbols-rounded {
		line-height: 1;
	}

	.avatar > img {
		margin: 0 var(--left-menu-padding) 0 0;
	}

	&.collapsed {
		justify-content: center;

		.avatar > img {
			margin: 0;
		}
	}

	&:hover {
		background: var(--bg-tertiary);
	}

	> button,
	> .right-icon {
		&:last-child {
			margin-left: auto;
		}
	}
}
.organisation-switcher-modal {
	.organisation-switcher-modal-content {
		padding: var(--modal-spacing);
		padding-top: 0;

		.organisation-list {
			a {
				background: var(--bg-primary);
				color: var(--text-secondary);
				text-decoration: none;

				&:hover {
					background: var(--bg-tertiary);
					color: var(--text-primary);
				}

				button {
					padding: var(--spacing-xxs);
					min-height: auto;
					margin: var(--spacing-sm);
				}
			}
		}
	}
}
.help-modal {
	.product-buttons {
		.btn {
			text-align: center;
			padding: var(--spacing-xl);
			font-size: var(--typography-md);

			strong {
				font-size: var(--typography-xl);
			}
		}
	}
}
.chat-navigation .bot-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--spacing-xxs);
	font-size: var(--typography-md);
}

.chat-navigation .bot-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.chat-navigation .bot-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.chat-navigation .bot-item-skeleton {
	display: flex;
	align-items: center;
	gap: var(--spacing-xxs);
	width: 100%;
	padding: var(--spacing-xxs) var(--spacing-xs);
	min-height: 24px;
	border-radius: var(--radius-sm, 8px);
	background: var(--bg-tertiary);
	position: relative;
	overflow: hidden;
}

.chat-navigation .bot-item-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(40deg, transparent, var(--tertiary-muted-bg), transparent);
	transform: translateX(-100%);
	animation: bot-item-skeleton-shimmer 1.2s linear infinite;
	pointer-events: none;
}

.chat-navigation .bot-item-skeleton .bot-avatar {
	background: var(--text-primary);
	opacity: 0.03;
}

.chat-navigation .bot-item-skeleton .name-placeholder {
	height: 10px;
	flex: 1;
	border-radius: var(--radius-pill);
	background: var(--text-primary);
	opacity: 0.03;
}

@keyframes bot-item-skeleton-shimmer {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}.chat-list-item {
	--chat-list-item-padding-y: 0;
	--chat-list-item-padding-x: var(--spacing-xs, 8px);
	--chat-list-item-trigger-width: 28px;
	--chat-list-item-trigger-gap: var(--spacing-xxs, 4px);

	display: flex;
	align-items: center;
	width: 100%;
	gap: var(--chat-list-item-trigger-gap);
	padding: var(--chat-list-item-padding-y) var(--chat-list-item-padding-x);
	border-radius: var(--radius-sm, 8px);
	cursor: pointer;
	color: var(--text-primary);
	background: transparent;
	transition: background 150ms ease, color 150ms ease;
	user-select: none;

	&:focus-visible {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
	}

	&[aria-disabled='true'] {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.chat-info {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.chat-title {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		font-size: var(--typography-md, 1rem);
	}

	/* Ellipsis must be on a block/inline child, not the flex container itself. */
	.chat-title-text {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pin-icon {
		flex-shrink: 0;
		font-size: 1em;
		color: var(--text-secondary);
		transform: rotate(45deg);
	}

	.chat-bot-label {
		display: flex;
		align-items: center;
		gap: 4px;
		overflow: hidden;
		opacity: 0;
		max-height: 0;
		transition: opacity 150ms ease, max-height 150ms ease;
	}

	.chat-bot-icon {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}

	.chat-bot-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: var(--typography-xs, 0.75rem);
		color: var(--text-secondary);
		line-height: 1.2;
	}

	&:hover .chat-bot-label,
	&.active .chat-bot-label {
		opacity: 1;
		max-height: 20px;
	}

	.menu-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--chat-list-item-trigger-width);
		height: 24px;
		border: none;
		background: transparent;
		color: var(--text-secondary);
		cursor: pointer;
		margin-left: auto;
		padding: 0;

		&:focus-visible {
			outline: 2px solid var(--primary-500);
			outline-offset: 2px;
		}
	}

	&[data-trigger-visible='false'] .menu-trigger {
		width: 0;
		margin: 0;
		opacity: 0;
		pointer-events: none;
	}

	&[data-highlight='title'],
	&[data-highlight='open'],
	&.active {
		background: var(--tertiary-ghost-bg-hover);
	}

	&.active .chat-info .chat-title {
		font-weight: 600;
	}

	&[data-highlight='trigger']:not(.active) {
		background: transparent;
	}

	&[data-highlight='trigger'] .menu-trigger {
		background: transparent;
	}
}

.chat-navigation .chat-list-item-skeleton {
	display: flex;
	align-items: center;
	gap: var(--chat-list-item-trigger-gap, var(--spacing-xxs, 4px));
	width: 100%;
	padding: var(--chat-list-item-padding-y, 0) var(--chat-list-item-padding-x, var(--spacing-xs, 8px));
	min-height: 28px;
	border-radius: var(--radius-sm, 8px);
	background: var(--bg-tertiary);
	position: relative;
	overflow: hidden;
}

.chat-navigation .chat-list-item-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(40deg, transparent, var(--tertiary-muted-bg), transparent);
	transform: translateX(-100%);
	animation: chat-list-item-skeleton-shimmer 1.2s linear infinite;
	pointer-events: none;
}

.chat-navigation .chat-list-item-skeleton .chat-title-placeholder {
	height: 12px;
	flex: 1;
	border-radius: var(--radius-pill);
	background: var(--text-primary);
	opacity: 0.04;
}

.chat-navigation .chat-list-item-skeleton .menu-placeholder {
	width: var(--chat-list-item-trigger-width, 28px);
	height: 12px;
	border-radius: var(--radius-pill);
	background: var(--text-primary);
	opacity: 0.04;
	flex-shrink: 0;
}

@keyframes chat-list-item-skeleton-shimmer {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}.chat-context-menu {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-xxs, 4px);
	min-width: 160px;
	border-radius: var(--radius-md, 8px);
	background: var(--bg-secondary);
	box-shadow:
		0 10px 15px -3px rgb(15 23 42 / 10%),
		0 4px 6px -4px rgb(15 23 42 / 10%);
	border: 1px solid var(--line-colour-light, rgb(15 23 42 / 8%));
	gap: 2px;

	.item {
		display: flex;
		align-items: center;
		gap: var(--spacing-xxs, 4px);
		width: 100%;
		padding: 6px 10px;
		background: transparent;
		border: none;
		border-radius: var(--radius-sm, 6px);
		font-size: var(--typography-sm, 0.875rem);
		color: var(--text-primary, #0f172a);
		cursor: pointer;
		text-align: left;
		transition: background 120ms ease;

		&:hover,
		&:focus-visible {
			background: var(--bg-hover);
			outline: none;
		}

		.material-icons {
			font-size: 18px;
			color: var(--text-secondary);
		}
	}
}

.context-menu-tooltip {
	&.tippy-box {
		background: transparent;
	}

	.tippy-content {
		padding: 0;
	}
}.chat-navigation.left-menu {
	/* Let the shared LeftMenu Panel control the width via react-resizable-panels. */
}

.chat-navigation.left-menu.collapsed {
	min-width: 56px;
}

.chat-navigation .chat-navigation-actions {
	border-top: 1px solid var(--line-colour-light);
	border-bottom: 1px solid var(--line-colour-light);
	gap: var(--spacing-xxs);
}

.chat-navigation .search-input {
	margin: 0 var(--left-menu-padding);
	min-width: 0;
	max-width: calc(100% - 2 * var(--left-menu-padding));
}

.chat-navigation .action-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	width: 100%;
	min-width: 0;
}

.chat-navigation .action-label {
	min-width: 0;
}

.chat-navigation .action-shortcut {
	margin-left: auto;
	font-size: var(--typography-sm);
	font-weight: 600;
	color: var(--text-secondary);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.chat-navigation .search-input:hover .action-shortcut,
.chat-navigation .search-input:focus-within .action-shortcut,
.chat-navigation .left-menu-item:hover .action-shortcut,
.chat-navigation .left-menu-item:focus-within .action-shortcut {
	opacity: 1;
}

.chat-navigation .left-menu-section.fill {
	min-height: 0;
}

.chat-navigation .scroll {
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	min-height: 0;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--line-colour);
		border-radius: var(--radius-pill);
	}
}

.chat-navigation .section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-xs);

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.section-action {
		--text: var(--text-secondary);
	}

	.title {
		font-size: var(--typography-xs);
		font-weight: 600;
		color: var(--text-secondary);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
}

.chat-navigation .divider {
	border-bottom: 1px solid var(--line-colour-light);
}

.chat-navigation .bot-list,
.chat-navigation .chat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
}

.chat-navigation .empty {
	margin: 0;
	font-size: var(--typography-md);
	color: var(--text-secondary);
}

.chat-navigation .load-more-chats {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--spacing-xs) 0;
}

.chat-navigation .load-more-chats .loading-indicator {
	font-size: var(--typography-sm);
	color: var(--text-secondary);
}

.chat-navigation .scroll-sentinel {
	height: 1px;
}.chat-header {
	position: sticky;
	top: 0;
	min-height: 40px;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--spacing-md);
	gap: var(--spacing-md);

	.open-btn {
		padding: 0;

		&:hover {
			background: transparent;
		}
	}
}

.chat-header__left,
.chat-header__right {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.chat-header__model-select {
	min-width: 160px;
}

.chat-header__right>* {
	flex-shrink: 0;
}.model-selector-tooltip.tippy-box {
	border: 1px solid var(--border-default, rgb(255 255 255 / 20%));
	box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
}

.model-selector-tooltip .tippy-arrow {
	display: none;
}

.model-selector-tooltip .tippy-content {
	padding: 0;
}

.model-selector {
	display: inline-flex;
	min-width: 0;
}

.model-selector-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
	font-weight: 500;
	min-width: 0;
}

.model-selector-button.is-open,
.model-selector-button:hover {
	background-color: var(--tertiary-ghost-bg-hover);
}

.model-selector-button-label {
	flex: 1;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 700;
	font-size: var(--typography-lg);
}

.model-selector-button-icon {
	font-size: 16px;
}

.model-selector-spinner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
}

.model-selector-menu {
	display: flex;
	flex-direction: column;
	max-height: 50vh;
	overflow-y: auto;
	padding: 4px 0;
	min-width: 240px;
}

.model-selector-menu.empty {
	padding: 12px 16px;
	color: var(--text-secondary);
	font-style: italic;
}

.model-selector-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	background: transparent;
	border: 0;
	width: 100%;
	height: 32px;
	color: var(--text-primary);
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.model-selector-menu-item .label {
	flex: 1;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.model-selector-menu-item .check-icon {
	font-size: 16px;
}

.model-selector-menu-item:hover,
.model-selector-menu-item:focus-visible {
	background-color: var(--tertiary-ghost-bg-hover);
}

.model-selector-menu-item.selected {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}

.model-selector-group-label {
	padding: 12px 16px 4px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-secondary);
	pointer-events: none;
}

/* Provider item with chevron */
.model-selector-menu-item.provider-item {
	font-weight: 500;
}

.model-selector-menu-item .chevron-icon {
	font-size: 16px;
	color: var(--text-secondary);
}

.model-selector-menu-item.disabled {
	cursor: default;
	opacity: 0.5;
}

/* Back-button row (back + optional actions) */
.model-selector-back-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--tertiary-muted-bg);
}

/* Back button */
.model-selector-back-button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--tertiary-muted-bg);
	width: 100%;
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* When inside a back-row, the button shares the row border instead */
.model-selector-back-row .model-selector-back-button {
	border-bottom: 0;
	flex: 1 1 auto;
}

.model-selector-back-button:hover,
.model-selector-back-button:focus-visible {
	background-color: var(--tertiary-ghost-bg-hover);
}

.model-selector-back-button .material-icon {
	font-size: 16px;
}

/* Change API Key button (sits beside the back button) */
.model-selector-change-key-button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 6px 12px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.model-selector-change-key-button:hover,
.model-selector-change-key-button:focus-visible {
	color: var(--text-primary);
	background-color: var(--tertiary-ghost-bg-hover);
}

.model-selector-change-key-button .material-icon {
	font-size: 16px;
}

.model-selector-change-key-button.is-active {
	color: var(--info-600, var(--text-primary));
}

.model-selector-change-key-button.is-danger {
	color: var(--danger-600, var(--text-secondary));
}

.model-selector-change-key-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.model-selector-model-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 16px 10px;
	border-bottom: 1px solid var(--tertiary-muted-bg);
	background: var(--bg-secondary);
}

.model-selector-model-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	text-align: left;
}

.model-selector-model-summary-row.clickable {
	cursor: pointer;
	transition: background-color 0.2s ease;
	padding: 4px 8px;
	margin: -4px -8px;
	border-radius: 4px;
}

.model-selector-model-summary-row.clickable:hover,
.model-selector-model-summary-row.clickable:focus-visible {
	background-color: var(--tertiary-ghost-bg-hover);
}

.model-selector-model-summary-row.clickable:active {
	background-color: var(--bg-tertiary);
}

.model-selector-model-summary-row .summary-label {
	font-weight: 600;
	color: var(--text-secondary);
}

.model-selector-model-summary-row .summary-value {
	font-weight: 500;
	color: var(--text-primary);
	text-align: right;
	min-width: 0;
}

.model-selector-calibration-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 2px;
}

.model-selector-calibration-summary-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1.2;
	background: var(--bg-tertiary);
	color: var(--text-primary);
}

/* Credential input panel */
.model-selector-credential-panel {
	display: flex;
	flex-direction: column;
	min-width: 280px;
}

.model-selector-credential-form {
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.model-selector-credential-hint {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.4;
}

.model-selector-credential-error {
	font-size: 11px;
	color: var(--danger-600, red);
}

.model-selector-credential-submit {
	align-self: flex-end;
}

/* Discovering / loading state */
.model-selector-discovering {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-size: 12px;
	color: var(--text-secondary);
}

/* Discovery error state */
.model-selector-discovery-error {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 16px;
	font-size: 12px;
	color: var(--danger-600, red);
}

.model-selector-discovery-error .error-icon {
	font-size: 16px;
	flex-shrink: 0;
}

.model-selector-discovery-error .error-text {
	line-height: 1.4;
	word-break: break-word;
}

.model-selector-retry-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid var(--tertiary-muted-bg);
	border-radius: 4px;
	font-size: 11px;
	color: var(--text-primary);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.model-selector-retry-button:hover,
.model-selector-retry-button:focus-visible {
	background-color: var(--tertiary-ghost-bg-hover);
}

.model-selector-retry-button .material-icon {
	font-size: 14px;
}

/* Calibration panel */
.model-selector-calibration-panel {
	display: flex;
	flex-direction: column;
	min-width: 320px;
}

.model-selector-calibration-content {
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.model-selector-calibration-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.model-selector-calibration-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: var(--text-primary);
}

.model-selector-calibration-row .task-label {
	font-weight: 600;
	color: var(--text-secondary);
	font-size: 11px;
	letter-spacing: 0.02em;
}

.model-selector-calibration-row select {
	width: 100%;
	border: 1px solid var(--tertiary-muted-bg);
	border-radius: 4px;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: 12px;
	padding: 6px 8px;
}

.model-selector-calibration-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 4px;
}.circle-loader {
	width: var(--size);
	height: var(--size);
	display: inline-block;
	position: relative;
}

.circle-loader::after,
.circle-loader::before {
	content: '';
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: var(--text-tertiary);
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	animation: animcircle-loader 2s ease-in-out infinite;
}

.circle-loader::after {
	animation-delay: 1s;
}

@keyframes animcircle-loader {
	0%,
	100% {
		transform: scale(0.2);
		opacity: 1;
	}

	50% {
		transform: scale(1);
		opacity: 0.3;
	}
}/* ResourceChip – inline mention rendered as plain text with icon */

.resource-chip {
	display: inline;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	font: inherit;
}

a.resource-chip:hover {
	text-decoration: underline;
}

.resource-chip__icon {
	font-size: 1em;
	vertical-align: -0.15em;
	margin-right: 2px;
	opacity: 0.65;
}

/* Render the icon glyph via ::before so the material-symbol text
   (e.g. "smart_toy") is excluded from innerText() queries. */
.resource-chip__icon::before {
	content: attr(data-icon);
}
/* ── Message layout ── */

.message {
	display: flex;
	flex-direction: column;
	text-align: left;
	position: relative;
	gap: var(--spacing-xs, 4px);
}

/* User: right-aligned bubble, max 70% */
.message-user {
	align-items: flex-end;
}

/* Assistant: left-aligned, full width */
.message-assistant {
	align-items: flex-start;
}

/* System: centred */
.message-system {
	align-items: center;
	text-align: center;
}

/* ── Timestamp ── */

.message-timestamp {
	font-size: var(--typography-xs);
	letter-spacing: 0.04em;
	color: var(--text-tertiary);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.message-timestamp[data-visible='true'] {
	opacity: 1;
}

/* ── Pending indicator ── */

.message-pending {
	display: flex;
	align-items: center;
}

.message-meta {
	overflow: hidden;
	margin-bottom: 0;
	max-height: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		max-height 0.2s ease,
		opacity 0.2s ease,
		transform 0.2s ease,
		margin-bottom 0.2s ease;
}

.message-meta[data-visible='true'] {
	max-height: 20rem;
	opacity: 1;
	transform: translateY(0);
	margin-bottom: var(--spacing-sm);
}

.status-text {
	font-size: var(--typography-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
	display: inline-block;
	transition:
		filter 0.3s ease,
		opacity 0.3s ease;
}

.status-text-animated {
	background: linear-gradient(
		120deg,
		var(--text-secondary) 0%,
		var(--text-secondary) 30%,
		var(--text-placeholder) 40%,
		var(--bg-tertiary) 50%,
		var(--text-placeholder) 60%,
		var(--text-secondary) 70%,
		var(--text-secondary) 100%
	);
	background-size: 340% 100%;
	animation: gradient-animation 7.5s linear infinite;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	will-change: background-position;
}

.status-text-transitioning {
	will-change: background-position;
}

.status-header {
	display: flex;
	align-items: center;
	width: 100%;
}

.status-detail-toggle {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 0.25rem;
	justify-content: flex-start;
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.status-detail-toggle:focus-visible {
	outline: 2px solid var(--info-500);
	outline-offset: 2px;
}

.status-detail-icon {
	display: inline-flex;
}

.status-detail {
	margin-top: 0.35rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--text-secondary);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.message-body {
	padding: var(--spacing-sm);
	line-height: 1.6;
	max-width: 100%;
}

.message-body.user {
	max-width: 70%;
	border-radius: 12px 12px 4px;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

/* ── Inline attachment labels shown above user message text ── */

.message-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: var(--spacing-xs);
}

.message-attachment-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgb(255 255 255 / 6%);
	font-size: 0.8125rem;
	color: var(--text-secondary);
}

.message-attachment-label__icon {
	font-size: 0.875rem;
	opacity: 0.6;
}

.message-body.assistant {
	width: 100%;
	background-color: transparent;
	color: var(--text-primary);
	padding: var(--spacing-sm);
	max-height: min(60vh, 34rem);
	overflow-y: auto;
	scrollbar-gutter: stable;
}

.thinking-panel {
	margin-bottom: var(--spacing-sm);
	border-radius: 8px;
	background: var(--bg-secondary);
	overflow: hidden;
}

.model-review {
	margin-top: var(--spacing-sm);
	border-radius: 8px;
	background: var(--bg-secondary);
	overflow: hidden;
	width: min(100%, 760px);
}

.model-review--stacked {
	margin-top: 0;
	width: 100%;
	border-radius: 0;
	background: transparent;
}

.model-review-header {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	flex-wrap: nowrap;
}

.model-review[data-expanded='false'] .model-review-header {
	border-bottom: none;
}

.model-review[data-expanded='true'] .model-review-header {
	border-bottom: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
}

.model-review-toggle {
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--spacing-sm);
	color: var(--text-secondary);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-align: left;
	flex: 1;
	min-width: 0;
}

.model-review-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	flex-wrap: wrap;
	flex: 1;
}

.model-review-title {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.model-review-title-text {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--text-tertiary);
	text-transform: uppercase;
}

.model-review-title-count {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.model-review-summary {
	font-size: 0.875rem;
	color: var(--text-primary);
}

.model-review-counts {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.model-review-count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.model-review-count--positive {
	color: var(--success-500, #22c55e);
}

.model-review-count--negative {
	color: var(--danger-500, #ef4444);
}

.model-review-counts--empty {
	color: var(--text-secondary);
}

.model-review-actions {
	display: flex;
	gap: 0.35rem;
	align-self: center;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.model-review-chevron {
	border: none;
	background: transparent;
	padding: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	cursor: pointer;
	flex-shrink: 0;
}

.model-review-body {
	padding: var(--spacing-sm);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.model-review-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.model-review-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.model-review-item + .model-review-item {
	padding-top: 0.5rem;
	border-top: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
}

.model-review-item-main {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	flex: 1;
}

.model-review-item-icon.material-symbols-rounded {
	color: var(--info-500, #3b82f6);
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.model-review-item-content {
	min-width: 0;
	flex: 1;
}

.model-review-item-actions {
	display: flex;
	gap: 0.35rem;
	margin-left: auto;
	align-self: center;
	flex-wrap: wrap;
}

.model-review-item-title {
	font-size: 0.875rem;
	color: var(--text-primary);
	line-height: 1.3;
}

.model-review-item-detail,
.model-review-note {
	margin-top: 0.15rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--text-secondary);
}

.model-review-error {
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	background-color: var(--error-muted-bg);
	color: var(--text-error);
	font-size: 0.8125rem;
	border: 1px solid var(--error-outline-bg-active);
}

.thinking-panel-header {
	width: 100%;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	cursor: pointer;
	color: var(--text-secondary);
	font: inherit;
}

.thinking-panel-header:focus-visible {
	outline: 2px solid var(--info-500);
	outline-offset: 2px;
}

.thinking-panel-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.thinking-panel-title-text {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--text-tertiary);
}

.thinking-panel-latest {
	font-size: 0.75rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 46ch;
}

.thinking-spinner {
	animation: thinking-spin 1s linear infinite;
}

@keyframes thinking-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.thinking-panel-body {
	border-top: 1px solid var(--border-subtle, rgb(255 255 255 / 6%));
	padding: var(--spacing-sm);
}

.thinking-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	max-height: 220px;
	overflow: auto;
}

/* ── Timeline item ── */

.thinking-item {
	display: flex;
	gap: 0.625rem;
}

/* Rail: icon dot + vertical connector line */
.thinking-item-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 20px;
}

.thinking-item-icon.material-symbols-rounded {
	color: var(--text-tertiary);
	font-size: 18px;
	line-height: 20px;
	flex-shrink: 0;
}

.thinking-item-line {
	width: 1px;
	flex: 1 1 0;
	min-height: 12px;
	background: var(--border-subtle, rgb(255 255 255 / 10%));
}

/* Content beside the rail */
.thinking-item-content {
	padding-bottom: 0.625rem;
	min-width: 0;
	flex: 1;
}

.thinking-item-title {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 20px;
}

.thinking-item-details {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-top: 0.15rem;
	line-height: 1.4;
}

.thinking-item-detail {
	/* Inline so consecutive details flow as a paragraph. */
}

/* Last item has no bottom padding */
.thinking-item[data-last='true'] .thinking-item-content {
	padding-bottom: 0;
}

/* Typewriter blinking cursor */
.typewriter-cursor {
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin-left: 1px;
	background: var(--text-secondary);
	vertical-align: text-bottom;
	animation: typewriter-blink 0.6s steps(2) infinite;
}

@keyframes typewriter-blink {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.todo-panel {
	margin-bottom: var(--spacing-sm);
	padding: var(--spacing-sm);
	border-radius: 8px;
	background: var(--bg-secondary);
}

.todo-panel-title {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

.todo-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.todo-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.todo-item-icon {
	margin-top: 0.1rem;
	color: var(--text-secondary);
}

.todo-item[data-state='failed'] .todo-item-icon {
	color: var(--danger-500, #ef4444);
}

.todo-item[data-state='done'] .todo-item-icon,
.todo-item[data-state='complete'] .todo-item-icon {
	color: var(--success-500, #22c55e);
}

.todo-item[data-state='doing'] .todo-item-icon,
.todo-item[data-state='checking'] .todo-item-icon {
	color: var(--info-500);
}

.todo-item-content {
	min-width: 0;
	flex: 1;
}

.todo-item-title {
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--text-primary);
}

.todo-item-detail {
	margin-top: 0.15rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--text-secondary);
}

@media (width <= 720px) {
	.model-review-header,
	.model-review-item {
		align-items: stretch;
	}

	.model-review-actions,
	.model-review-item-actions {
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
	}
}

.message-text {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
}

.markdown-heading {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	line-height: 1.3;
}

.markdown-h1 {
	font-size: 1.75rem;
}

.markdown-h2 {
	font-size: 1.5rem;
}

.markdown-h3 {
	font-size: 1.25rem;
}

.markdown-h4 {
	font-size: 1.1rem;
}

.markdown-h5 {
	font-size: 1rem;
}

.markdown-h6 {
	font-size: 0.9rem;
}

.markdown-list {
	margin: 0.5rem 0;
	padding-left: 2rem;
}

.markdown-list-item {
	margin: 0.25rem 0;
	line-height: 1.5;
}

.markdown-list-ordered {
	list-style-type: decimal;
}

.code-block-wrapper {
	position: relative;
	margin: 1rem 0;
	border-radius: 8px;
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	overflow: hidden;
}

.code-block-language {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.code-block-wrapper pre {
	margin: 0;
	padding: 1.5rem 1rem 1rem;
	overflow-x: auto;
}

.inline-code {
	background-color: var(--bg-secondary);
	padding: 0.15rem 0.35rem;
	border-radius: 4px;
	font-size: 0.95em;
	font-family: 'Fira Code', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

.table-wrapper {
	width: 100%;
	overflow-x: auto;
	margin: 1rem 0;
}

.markdown-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line-colour);
	font-size: 0.95rem;
}

.markdown-table-header,
.markdown-table-cell {
	border: 1px solid var(--line-colour);
	padding: 0.75rem;
	text-align: left;
}

.markdown-table-header {
	background-color: var(--bg-secondary);
	font-weight: 600;
}

.markdown-table-row:hover {
	background-color: var(--bg-tertiary);
}

.markdown-table-body .markdown-table-row:nth-child(even) {
	background-color: var(--bg-secondary);
}

.markdown-blockquote {
	border-left: 4px solid var(--info-500);
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	font-style: italic;
	color: var(--text-secondary);
	background-color: var(--info-muted-bg);
	border-radius: 0 4px 4px 0;
}

.message-body a {
	color: var(--link-default);
	text-decoration: underline;
}

.message-body a:hover {
	color: var(--link-visited);
}

.message-cancelled {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	color: var(--text-secondary);
	font-size: 0.8125rem;
}

.message-error {
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	background-color: var(--error-muted-bg);
	color: var(--text-error);
	font-size: 0.875rem;
	border: 1px solid var(--error-outline-bg-active);
}

/* ── Message actions (hover-reveal toolbar) ── */

.message-actions {
	display: flex;
	gap: 2px;
	opacity: 0;
	transition: opacity 0.15s ease;
	padding-top: 2px;
}

@media (width <= 720px) {
	.model-review-header {
		align-items: stretch;
	}

	.model-review-actions {
		margin-left: 0;
		width: 100%;
	}
}

.message-actions:focus-within,
.message:hover .message-actions {
	opacity: 1;
}

@keyframes gradient-animation {
	0% {
		background-position: 160% 50%;
	}

	100% {
		background-position: -260% 50%;
	}
}

@keyframes status-blur-cycle {
	0% {
		filter: blur(0);
	}

	40% {
		filter: blur(1px);
	}

	60% {
		filter: blur(1px);
	}

	100% {
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.status-text-animated,
	.status-text-transitioning {
		animation: none;
		background-position: 0% 50%;
		-webkit-text-fill-color: var(--text-secondary);
		color: var(--text-secondary);
	}
}
/* ── Scroll-to-top / scroll-to-bottom floating buttons ───────────── */

.scroll-fab {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border-secondary);
	background: var(--surface-primary);
	color: var(--text-secondary);
	cursor: pointer;
	box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
	transition:
		opacity 0.2s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.scroll-fab:hover {
	color: var(--text-primary);
	border-color: var(--border-primary);
	box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

.scroll-fab:active {
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
}

.scroll-fab--bottom {
	bottom: var(--spacing-sm);
}
/* Positioned wrapper so scroll FABs can float above the list */
.message-list-wrapper {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.message-list {
	flex: 1;
	overflow-y: auto;
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-lg);
	background: transparent;
	scrollbar-gutter: stable;
}

.message-list-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	width: min(calc(100% - var(--spacing-xl)), 800px);
}

.message-list.empty {
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
}

.message-list.empty .empty-state {
	text-align: center;
	font-size: var(--typography-sm);
	width: 100%;
	box-sizing: border-box;
	padding-inline: var(--spacing-md);
}

.message-list.empty .welcome-bot-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: var(--spacing-md);
}

.message-list.empty .welcome-bot-icon.welcome-bot-icon-default {
	border-radius: 0;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0 auto var(--spacing-md);
}

.message-list.empty .welcome-title {
	font-size: var(--typography-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs);
}

.message-list.empty .welcome-description {
	color: var(--text-secondary);
	margin: 0 auto var(--spacing-sm);
	max-width: 400px;
}

.message-list.empty .starter-question-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--spacing-md);
	width: min(calc(100% - var(--spacing-md)), 1120px);
	margin: var(--spacing-lg) auto;
	text-align: left;
}

.message-list.empty .starter-question-card {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	padding: var(--spacing-md) var(--spacing-lg);
	color: var(--text-primary);
	font-size: var(--typography-md);
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.message-list.empty .starter-question-card:hover {
	border-color: var(--border-primary);
	background: var(--surface-hover);
	transform: translateY(-1px);
}

.message-list.empty .starter-question-card:focus-visible {
	outline: 2px solid var(--border-primary);
	outline-offset: 2px;
}

.message-list.empty .welcome-prompt {
	color: var(--text-tertiary);
	margin: 0;
	font-size: var(--typography-xs);
}

.message-date-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: var(--typography-xs);
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.load-older-messages {
	display: flex;
	justify-content: center;
	padding: var(--spacing-sm) 0;
}

.load-older-button {
	background: none;
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font-size: var(--typography-xs);
	padding: var(--spacing-xs) var(--spacing-md);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.load-older-button:hover {
	color: var(--text-primary);
	border-color: var(--border-primary);
}.agent-activity {
	width: min(calc(100% - var(--spacing-xl)), 800px);
	margin: 0 auto;
	padding: 0;
	border-radius: 8px;
	background: var(--bg-secondary);
	overflow: hidden;
}

.agent-activity--stacked {
	width: 100%;
	margin: 0;
	border-radius: 0;
	background: transparent;
}

.agent-activity-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-sm);
	border-bottom: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
}

.agent-activity[data-expanded='false'] .agent-activity-header {
	border-bottom-color: transparent;
}

.agent-activity-toggle {
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	color: var(--text-secondary);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-align: left;
	width: 100%;
}

.agent-activity-heading {
	display: flex;
	align-items: center;
	flex: 1;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-width: 0;
}

.agent-activity-title {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.agent-activity-current {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	min-width: 0;
}

.agent-activity-current-icon {
	color: var(--text-secondary);
	flex-shrink: 0;
}

.agent-status-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 1.5px solid currentcolor;
	border-radius: 999px;
	box-sizing: border-box;
}

.agent-status-indicator-dot {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: currentcolor;
}

.agent-activity-current[data-state='failed'] .agent-activity-current-icon {
	color: var(--danger-500, #ef4444);
}

.agent-activity-current[data-state='done'] .agent-activity-current-icon {
	color: var(--success-500, #22c55e);
}

.agent-activity-current[data-state='active'] .agent-activity-current-icon {
	color: var(--info-500, #3b82f6);
	animation: todo-spin 1s linear infinite;
	transform-origin: center;
	will-change: transform;
}

.agent-activity-current[data-state='paused'] .agent-activity-current-icon {
	color: var(--info-500, #3b82f6);
}

.agent-activity-current[data-state='cancelled'] .agent-activity-current-icon {
	opacity: 0.6;
}

.agent-activity-current-text {
	color: var(--text-primary);
	font-size: 0.875rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agent-activity-title-text {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.agent-activity-title-count {
	font-size: 0.75rem;
	color: var(--text-tertiary);
}


.agent-activity-thinking-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-tertiary);
}

.agent-activity-thinking-text {
	font-size: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 42ch;
}

.agent-activity-body {
	padding: var(--spacing-sm);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.agent-todo-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 220px;
	overflow-y: auto;
	scrollbar-gutter: stable;
}

.agent-todo-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.agent-todo-icon {
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--text-secondary);
}

.agent-todo-item[data-state='failed'] .agent-todo-icon {
	color: var(--danger-500, #ef4444);
}

.agent-todo-item[data-state='done'] .agent-todo-icon {
	color: var(--success-500, #22c55e);
}

.agent-todo-item[data-state='active'] .agent-todo-icon {
	color: var(--info-500, #3b82f6);
	animation: todo-spin 1s linear infinite;
	will-change: transform;
	transform-origin: center;
}

.agent-todo-item[data-state='paused'] .agent-todo-icon {
	color: var(--info-500, #3b82f6);
}

@keyframes todo-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.agent-todo-item[data-state='cancelled'] .agent-todo-icon {
	color: var(--text-secondary);
	opacity: 0.6;
}

.agent-todo-title {
	font-size: 0.875rem;
	color: var(--text-primary);
}

.agent-todo-detail {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-top: 0.15rem;
}

/* ── ClarificationWizard ────────────────────────────────────────── */

.clarification-wizard {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* ── Header (title + breadcrumbs) ──────────────────────────────── */

.clarification-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
}

.clarification-header-left {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.clarification-title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
}

.clarification-title-count {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--text-tertiary);
}

/* ── Breadcrumbs ───────────────────────────────────────────────── */

.clarification-breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: 0.75rem;
	color: var(--text-tertiary);
}

.clarification-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.clarification-breadcrumb-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--border-subtle, rgb(255 255 255 / 15%));
	flex-shrink: 0;
}

.clarification-breadcrumb-dot--completed {
	background: var(--color-accent, #6366f1);
}

.clarification-breadcrumb-dot--active {
	background: var(--color-accent, #6366f1);
	box-shadow: 0 0 0 2px rgb(99 102 241 / 30%);
}

.clarification-breadcrumb-separator {
	color: var(--text-tertiary);
	font-size: 0.65rem;
}

/* ── Step content ──────────────────────────────────────────────── */

.clarification-question {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.4;
}

.clarification-question a {
	color: var(--link-default, #3b82f6);
	text-decoration: underline;
}

.clarification-question a:hover {
	color: var(--link-visited, #2563eb);
}

.clarification-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.clarification-option-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--border-subtle, rgb(255 255 255 / 12%));
	border-radius: 999px;
	background: var(--bg-tertiary, rgb(255 255 255 / 5%));
	color: var(--text-secondary);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.clarification-option-chip:hover {
	background: var(--bg-hover, rgb(255 255 255 / 10%));
	border-color: var(--border-default, rgb(255 255 255 / 20%));
	color: var(--text-primary);
}

.clarification-option-chip--selected {
	background: var(--color-accent, #6366f1);
	border-color: var(--color-accent, #6366f1);
	color: #fff;
}

.clarification-option-chip--selected:hover {
	background: var(--color-accent-hover, #5558e6);
	border-color: var(--color-accent-hover, #5558e6);
	color: #fff;
}

/* ── Free-text input ───────────────────────────────────────────── */

.clarification-freetext {
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
}

.clarification-freetext-input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1.5px solid var(--border-default, rgb(255 255 255 / 18%));
	border-radius: 8px;
	background: var(--bg-primary, #1e1e2e);
	color: var(--text-primary);
	font-size: 0.8125rem;
	font-family: inherit;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.clarification-freetext-input:focus {
	border-color: var(--color-accent, #6366f1);
	box-shadow: 0 0 0 3px rgb(99 102 241 / 15%);
}

.clarification-freetext-input::placeholder {
	color: var(--text-secondary, rgb(255 255 255 / 45%));
}

/* ── Navigation ────────────────────────────────────────────────── */

.clarification-nav {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.clarification-back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.6rem;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-secondary);
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.clarification-back:hover {
	background: var(--bg-hover, rgb(255 255 255 / 10%));
	color: var(--text-primary);
}

.clarification-back:disabled {
	opacity: 0;
	pointer-events: none;
}

.clarification-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.75rem;
	border: none;
	border-radius: 6px;
	background: var(--color-accent, #6366f1);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 120ms ease;
}

.clarification-submit:hover {
	background: var(--color-accent-hover, #5558e6);
}

.clarification-submit:disabled {
	opacity: 0.5;
	cursor: default;
}
.chat-input {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	z-index: 1;

	.chat-input-surface {
		width: min(calc(100% - var(--spacing-xl)), 800px);
		margin: 0 auto -1px;
		background: var(--bg-secondary);
		border: 1px solid var(--line-colour-light);
		border-bottom: 0;
		border-radius: 12px 12px 0 0;
		overflow: hidden;
	}

	.chat-input-surface > * + * {
		border-top: 1px solid var(--border-subtle, rgb(255 255 255 / 8%));
	}

	.message-input {
		margin: 0 auto 24px;
		width: min(calc(100% - var(--spacing-xl)), 800px);
	}

	.message-input__container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-sm);
		padding: var(--spacing-xs);
		width: 100%;
		background: var(--bg-secondary);
		border: 1px solid var(--line-colour-light);
		border-radius: 12px;
		transition: border-color 0.2s ease;
		box-shadow: 1px 1px 4px 0 var(--drop-shadow);
	}

	/* Highlight border when files are dragged over the container */
	.message-input__container--drag-over {
		border-color: var(--primary, #6366f1);
		background: color-mix(in srgb, var(--primary, #6366f1) 4%, var(--bg-secondary));
	}

	/* Full-cover overlay shown while dragging files */
	.message-input__drop-overlay {
		position: absolute;
		inset: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-sm);
		border-radius: 12px;
		background: color-mix(in srgb, var(--primary, #6366f1) 10%, var(--bg-secondary) 90%);
		border: 2px dashed var(--primary, #6366f1);
		color: var(--text-primary);
		font-size: 0.875rem;
		pointer-events: none;
	}

	.message-input__drop-overlay .material-symbols-rounded {
		font-size: 1.25rem;
		opacity: 0.7;
	}

	.message-input__container:focus-within {
		border-color: var(--grey-heavy);
	}

	.message-input__container .field {
		width: 100%;
		flex: 1;
		min-width: 0;
	}

	.message-input__container .toolspace {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	/* Attach (paperclip) button — same sizing as the send button */
	.message-input__container .attach {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		text-align: center;
		margin-right: 4px;
		padding: 0;
	}

	.message-input__container .attach path {
		fill: var(--secondary-muted-text-icon);
	}

	/* Inline wrapper so the tooltip Tippy can target a simple element */
	.message-input__container .emoji-wrapper {
		display: inline-flex;
	}

	/* Emoji picker toggle — same sizing as attach/send buttons */
	.message-input__container .emoji {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		text-align: center;
		padding: 0;
	}

	.message-input__container .emoji path {
		fill: var(--secondary-muted-text-icon);
	}

	/* Visually hidden but accessible for screen readers and native file pickers */
	.message-input__container .sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.message-input__container .textarea-wrapper {
		height: 100%;
		gap: 0;

		--textarea-border-radius: 0;
		--textarea-border-width: 0;
		--textarea-background-color: transparent;
		--textarea-text-color: var(--text-primary);
		--textarea-placeholder-color: var(--text-secondary);
		--textarea-padding-block: var(--spacing-xs);
		--textarea-padding-inline: var(--spacing-md);
	}

	.message-input__container .textarea-wrapper .textarea__field {
		border-color: transparent;
		background-color: transparent;
	}

	.message-input__container .textarea-wrapper .textarea__field:focus-within {
		box-shadow: none;
		border-color: transparent;
	}

	.message-input__container .textarea {
		min-height: 40px;
		max-height: 200px;
		resize: none;
		line-height: 1.5;
		overflow-y: hidden;
	}

	.message-input__container .send {
		flex-shrink: 0;
		margin-left: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		text-align: center;
		padding: 0;
	}

	.message-input__container .send path {
		fill: var(--secondary-muted-text-icon);
	}

	.message-input__container .send--stop {
		opacity: 1;
	}

	.message-input__container .send--stop rect {
		fill: var(--text-secondary);
	}

	&[data-has-surface='true'] {
		.message-input__container {
			border-top: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}
}

@media (width <= 768px) {
	.chat-input .message-input__container {
		padding: var(--spacing-xs) var(--spacing-sm);
	}
}

@media (width <= 768px) {
	.chat-input {
		padding: var(--spacing-md) var(--spacing-lg);
	}
}

/* Scale down the picker's font to keep it compact */
.EmojiPickerReact {
	--epr-emoji-size: 22px;
	--epr-category-label-height: 28px;
	--epr-header-padding: 8px 10px;

	font-size: 0.8rem;
}

/*
 * Tippy popover that hosts the emoji picker – strip default tooltip styling
 * so the picker's own border-radius and shadow are visible.
 */
.tippy-box[data-placement^='top'] .EmojiPickerReact {
	border-radius: 8px;
}

.tippy-content:has(.EmojiPickerReact) {
	padding: 0;
}
/* stylelint-disable no-descending-specificity */
.textarea-wrapper {
	--textarea-border-radius: 4px;
	--textarea-border-width: 1px;
	--textarea-border-color: var(--line-colour);
	--textarea-focus-color: var(--info-300);
	--textarea-text-color: var(--text-secondary);
	--textarea-placeholder-color: var(--text-placeholder);
	--textarea-background-color: var(--textbox-bg-default);
	--textarea-padding-block: var(--spacing-xs);
	--textarea-padding-inline: var(--spacing-sm);
	--textarea-font-size: var(--typography-md);
	--icon-size: 16px;
}

.textarea-wrapper.textarea--size-md {
	--textarea-padding-block: var(--spacing-xs);
	--textarea-padding-inline: var(--spacing-sm);
	--textarea-font-size: var(--typography-md);
}

/* Validation state styling for the wrapper */
.textarea-wrapper.invalid {
	--textarea-border-color: var(--line-error);
}

.textarea-wrapper.valid {
	--textarea-border-color: var(--line-success);
}

.textarea-wrapper.disabled,
.textarea-wrapper.read-only {
	--textarea-border-color: var(--line-disabled);
	--textarea-text-color: var(--disabled-text);
	--textarea-placeholder-color: var(--disabled-text);
	--textarea-background-color: var(--textbox-bg-disabled);
}

.textarea-wrapper.read-only {
	.textarea__field:focus-within {
		--textarea-background-color: var(--textbox-bg-disabled);
	}
}

.textarea__field {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: var(--textarea-border-radius);
	border: var(--textarea-border-width) solid var(--textarea-border-color);
	background-color: var(--textarea-background-color);
	transition:
		border-color 160ms var(--animation-productive),
		box-shadow 160ms var(--animation-productive);
	box-shadow: none;
}

.textarea__field:focus-within {
	border-color: var(--textarea-focus-color);
	box-shadow: inset 0 0 0 0.5px var(--textarea-focus-color);

	--textarea-background-color: var(--textbox-bg-active);
}

.textarea__element {
	flex: 1 1 auto;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--textarea-text-color);
	font-size: var(--textarea-font-size);
	font-family: inherit;
	padding: var(--textarea-padding-block) var(--textarea-padding-inline);
	min-width: 0;
	resize: vertical;
	line-height: 1.5;
}

.textarea__element::placeholder {
	color: var(--textarea-placeholder-color);
}

.textarea__element:disabled {
	cursor: not-allowed;
	resize: none;
}

.textarea__actions {
	position: absolute;
	top: var(--textarea-padding-block);
	right: var(--textarea-padding-inline);
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-xs);
	z-index: 1;
}

.textarea__action-button {
	background: none;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--textarea-text-color);
	cursor: pointer;
	border-radius: 4px;
	transition:
		color 160ms var(--animation-productive),
		background-color 160ms var(--animation-productive);
}

.textarea__action-button:hover:not(:disabled) {
	color: var(--textarea-focus-color);
}

.textarea__action-button:focus-visible {
	outline: 2px solid var(--textarea-focus-color);
	outline-offset: 2px;
}

.textarea__action-button--disabled,
.textarea__action-button:disabled {
	cursor: not-allowed;
	color: var(--disabled-text);
}

.textarea__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--icon-size);
	width: var(--icon-size);
	height: var(--icon-size);
}
/* ResourceMentionPopup – floating autocomplete dropdown */

.resource-mention-popup {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 4px;
	width: 320px;
	max-height: 300px;
	overflow-y: auto;
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-outline-variant, #c4c7cc);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
	z-index: 100;
}

.resource-mention-popup__empty {
	padding: 12px 16px;
	color: var(--color-on-surface-variant, #666);
	font-size: 0.875rem;
	text-align: center;
}

.resource-mention-popup__list {
	padding: 4px 0;
}

.resource-mention-popup__footer {
	position: sticky;
	bottom: 0;
	padding: 10px 12px;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-on-surface-variant, #666);
	background: var(--color-surface, #fff);
	border-top: 1px solid var(--color-outline-variant, #c4c7cc);
	text-align: center;
	z-index: 1;
}

.resource-mention-popup__section {
	/* No extra spacing between sections — heading provides it */
}

.resource-mention-popup__heading {
	padding: 8px 12px 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-on-surface-variant, #666);
	text-transform: uppercase;
	user-select: none;
}

.resource-mention-popup__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 20px;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.resource-mention-popup__item:hover,
.resource-mention-popup__item[data-active='true'] {
	background: var(--color-surface-variant, #e8eaed);
}

.resource-mention-popup__name {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-on-surface, #1a1a2e);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* AttachmentChips – removable file pills displayed above the textarea */

.attachment-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-md) 0;
	width: 100%;
}

.attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px 2px 6px;
	border-radius: 6px;
	background: var(--bg-tertiary, rgb(255 255 255 / 6%));
	border: 1px solid var(--line-colour-light);
	font-size: 0.8125rem;
	line-height: 1.4;
	max-width: 220px;
	color: var(--text-primary);
}

.attachment-chip__icon {
	font-size: 1rem;
	opacity: 0.6;
	flex-shrink: 0;
}

.attachment-chip__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.attachment-chip__size {
	flex-shrink: 0;
	opacity: 0.5;
	font-size: 0.75rem;
}

.attachment-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 0.15s;
}

.attachment-chip__remove .material-symbols-rounded {
	font-size: 14px;
}

.attachment-chip__remove:hover {
	background: var(--bg-hover, rgb(255 255 255 / 10%));
	color: var(--text-primary);
}
/* Chat session container */
.chat-session {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-primary);
}

.chat-session.error,
.chat-session.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.chat-session.error .error-message {
	text-align: center;
	max-width: 400px;
	padding: var(--spacing-xl);
	color: var(--text-secondary);
}

.chat-session.error .error-message h2 {
	color: var(--text-error);
	margin: 0 0 var(--spacing-md) 0;
	font-size: var(--typography-lg);
}

.chat-session.error .error-message p {
	margin: 0;
	line-height: 1.6;
}
.bot-avatar {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);

	>img.avatar {
		border-radius: 999rem;
		border: 2px solid var(--line-colour-light);
		object-fit: cover;
	}

	.publisher {
		display: flex;
		gap: var(--spacing-xxs);
		align-items: center;
		font-size: var(--typography-md);
		color: var(--text-secondary);

		.avatar {
			width: 1.5rem;
			height: 1.5rem;
			flex-shrink: 0;
			aspect-ratio: 1/1;
			border-radius: 6.25rem;
			border: 1px solid var(--line-colour-light, #e1e1e2);
		}
	}


	>.info {
		>:is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--font-family-heading);
			font-size: var(--typography-xxl);
			margin: 0 0 var(--spacing-xxs) 0;
		}
	}
}/* Constrain the page shell so the resizable-panel layout stays viewport-sized
   and the left nav doesn't scroll away with overflowing content. */
.page:has(.chat-page-layout) {
	height: 100vh;
	overflow: hidden;
}

.page:has(.chat-page-layout) > .page-main {
	overflow: hidden;
}

.chat-page-layout {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: var(--bg-primary);
}

.chat-main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg-primary);
}

.empty-chat-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--spacing-xl);
	text-align: center;
	color: var(--text-primary);
}

.empty-chat-state .empty-chat-content {
	max-width: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-lg);
}

.empty-chat-state .empty-chat-logo {
	width: 120px;
	height: 120px;
	opacity: 0.8;
}

.empty-chat-state h2 {
	margin: 0;
	font-size: var(--typography-xl);
	font-weight: 600;
	color: var(--text-primary);
}

.empty-chat-state p {
	margin: 0;
	font-size: var(--typography-md);
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: var(--spacing-xl);
}

.empty-chat-state .empty-chat-input-container {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.auth-error-state {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: var(--bg-primary);
	padding: var(--spacing-xxl);
}

.auth-error-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 45px rgb(15 23 42 / 12%);
	padding: 2.5rem;
	max-width: 420px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.auth-error-icon {
	font-size: 3rem;
}

.auth-error-card h2 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--text-primary);
}

.auth-error-card p {
	margin: 0;
	color: var(--text-secondary);
	line-height: 1.6;
}

@media (width <= 768px) {
	.chat-main-content {
		min-height: 0;
	}

	.empty-chat-state {
		padding: var(--spacing-lg);
	}

	.empty-chat-state .empty-chat-logo {
		width: 80px;
		height: 80px;
	}

	.empty-chat-state h2 {
		font-size: var(--typography-lg);
	}

	.empty-chat-state p {
		font-size: var(--typography-sm);
	}

	.empty-chat-state .empty-chat-input-container {
		max-width: 100%;
		padding: 0 var(--spacing-sm);
	}
}