/* Small reusable primitives defined by the Margosha White UI-kit. */
.ui-chat-bubble {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding-block: 0.5rem 0.625rem;
  color: var(--ui-tok-bubble-text-outgoing);
}

.ui-chat-bubble-outgoing {
  border-radius: 1rem 0.25rem 1rem 1rem;
  padding-inline: 1.25rem;
  background: var(--ui-tok-bubble-bg-outgoing);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.ui-chat-bubble-incoming {
  border-radius: 1rem;
  padding-inline: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.ui-chat-bubble-typing {
  border-radius: 1rem;
  padding-inline: 0.75rem;
  color: var(--ui-tok-text-muted);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ui-divider {
  flex: none;
  margin: 0;
  border: 0;
  border-color: var(--ui-divider-color);
}

.ui-divider-horizontal {
  width: 100%;
  height: 0;
  border-top-style: solid;
}

.ui-divider-vertical {
  width: 0;
  height: var(--ui-divider-vertical);
  border-left-style: solid;
}

.ui-divider-one.ui-divider-horizontal {
  border-top-width: var(--ui-divider-one);
}

.ui-divider-two.ui-divider-horizontal {
  border-top-width: var(--ui-divider-two);
}

.ui-divider-one.ui-divider-vertical {
  border-left-width: var(--ui-divider-one);
}

.ui-divider-two.ui-divider-vertical {
  border-left-width: var(--ui-divider-two);
}

.ui-divider-dashed.ui-divider-horizontal {
  border-top-style: dashed;
}

.ui-divider-dashed.ui-divider-vertical {
  border-left-style: dashed;
}

.ui-side-menu-list-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 14rem;
  height: 1.75rem;
  gap: 0.75rem;
  padding-left: 0.75rem;
  color: var(--ui-tok-text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.ui-side-menu-list-header-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-side-menu-list-header-action.ui-icon-button {
  backdrop-filter: blur(20px);
}

.ui-side-menu-list-header-action.is-collapsed .ui-icon-glyph {
  transform: rotate(-90deg);
}

.ui-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ui-tok-text-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.ui-text-link-secondary {
  color: var(--ui-tok-text-secondary);
}

.ui-text-link-descriptor {
  color: var(--ui-tok-text-muted);
}

.ui-text-link:hover {
  color: var(--ui-selection-accent);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.ui-text-link:focus-visible {
  border-radius: 0.25rem;
  outline: var(--ui-focus-width) solid var(--ui-color-focus-ring);
  outline-offset: var(--ui-focus-offset);
}

.ui-workflow-step {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  width: 29rem;
  max-width: 100%;
  min-height: 1rem;
  gap: 0.5rem;
  padding-right: 1.25rem;
  color: var(--ui-tok-text-muted);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ui-workflow-step-finished {
  color: var(--ui-tok-text-secondary);
}

.ui-workflow-step-icon {
  display: inline-flex;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.ui-workflow-step-finished .ui-workflow-step-icon {
  border: 1px solid currentcolor;
  border-radius: 50%;
}

.ui-workflow-step-label {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

.ui-skill-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-skill-gap);
  width: 100%;
  border: 1px solid transparent;
  border-top-color: var(--ui-color-border);
  border-radius: 0;
  padding: var(--ui-skill-pad);
  background: transparent;
  transition:
    border-color var(--ui-duration-fast) var(--ui-ease-standard),
    border-radius var(--ui-duration-fast) var(--ui-ease-standard),
    background var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}

.ui-skill-card[role="button"] {
  cursor: pointer;
}

.ui-skill-card-featured {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-skill-featured-radius);
  padding: var(--ui-skill-featured-pad);
  background: var(--ui-tok-background-app);
  box-shadow: var(--ui-skill-featured-shadow);
}

.ui-skill-card-head {
  display: flex;
  align-items: center;
  gap: var(--ui-skill-head-gap);
  width: 100%;
}

.ui-skill-card:not(.ui-skill-card-featured) .ui-skill-card-head {
  padding-right: var(--ui-skill-copy-pad-right);
}

.ui-skill-card-heading {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: var(--ui-skill-title-gap);
  min-width: 0;
}

.ui-skill-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ui-tok-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-skill-card-ava {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ui-skill-ava);
  height: var(--ui-skill-ava);
  border-radius: var(--ui-skill-ava-radius);
  color: var(--ui-skill-ava-fg);
  background: var(--ui-skill-ava-bg);
}

.ui-skill-card-ava .ui-icon-glyph {
  width: var(--ui-skill-icon);
  height: var(--ui-skill-icon);
}

.ui-skill-card-featured .ui-skill-card-ava {
  color: var(--ui-skill-ava-fg-featured);
  background: var(--ui-skill-ava-bg-featured);
  box-shadow: var(--ui-skill-ava-shadow);
}

.ui-skill-card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--ui-skill-copy-gap);
  padding-left: var(--ui-skill-copy-pad-left);
}

.ui-skill-card:not(.ui-skill-card-featured) .ui-skill-card-copy {
  padding-right: var(--ui-skill-copy-pad-right);
}

.ui-skill-card-desc {
  margin: 0;
  color: var(--ui-tok-text-secondary);
}

.ui-skill-card-meta {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-tok-text-muted);
}

.ui-skill-card-action {
  align-self: stretch;
  padding-left: var(--ui-skill-copy-pad-left);
}

.ui-quiz {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: var(--ui-num-32);
  margin: 0;
  border: 1px solid var(--ui-tok-border-default);
  border-radius: var(--ui-num-32);
  padding: var(--ui-num-32);
  background: var(--ui-tok-background-app);
  box-shadow: 0 var(--ui-num-12) var(--ui-num-32) rgb(0 0 0 / 8%);
}

.ui-quiz-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--ui-num-24);
  min-height: var(--ui-num-20);
  padding-right: var(--ui-num-2);
}

.ui-quiz-head-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--ui-num-4);
  min-width: 0;
}

.ui-quiz-title,
.ui-quiz-description {
  margin: 0;
}

.ui-quiz-title {
  color: var(--ui-tok-text-primary);
}

.ui-quiz-description {
  color: var(--ui-tok-text-secondary);
}

.ui-quiz-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ui-num-20);
  height: var(--ui-num-20);
  min-height: var(--ui-num-20);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-tok-quiz-head-close-icon);
  background: transparent;
  cursor: pointer;
}

.ui-quiz-close:focus-visible,
.ui-quiz-option:has(:focus-visible) {
  outline: var(--ui-focus-width) solid var(--ui-color-focus-ring);
  outline-offset: var(--ui-focus-offset);
}

.ui-quiz-answers {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-num-2);
}

.ui-quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--ui-num-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-quiz-option {
  box-sizing: border-box;
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  gap: var(--ui-num-12);
  margin: 0;
  border-radius: var(--ui-num-16);
  padding: var(--ui-num-14);
  color: var(--ui-tok-quiz-option-title);
  background: transparent;
  cursor: pointer;
}

.ui-quiz-option.is-selected {
  background: var(--ui-tok-quiz-option-bg-pressed);
}

.ui-quiz-option:has(input:disabled),
.ui-quiz-close:disabled,
.ui-quiz-custom-input:disabled {
  cursor: not-allowed;
}

.ui-quiz-option:has(input:disabled) {
  color: var(--ui-tok-quiz-option-subtitle);
}

.ui-quiz-radio {
  box-sizing: border-box;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ui-check-md);
  height: var(--ui-check-md);
  border: 1px solid var(--ui-tok-radio-border-default);
  border-radius: var(--ui-radio-md-radius);
  background: var(--ui-tok-radio-bg-unchecked);
}

.ui-quiz-option.is-selected .ui-quiz-radio {
  border-width: 0;
  background: var(--ui-tok-radio-bg-checked-default);
}

.ui-quiz-radio-dot {
  width: var(--ui-radio-dot-md);
  height: var(--ui-radio-dot-md);
  border-radius: 50%;
  background: var(--ui-tok-radio-dot);
  box-shadow: var(--ui-knob-shadow);
  opacity: 0;
}

.ui-quiz-option.is-selected .ui-quiz-radio-dot {
  opacity: 1;
}

.ui-quiz-option-title {
  min-width: 0;
  color: var(--ui-tok-quiz-option-title);
}

.ui-quiz-option-descriptor {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-tok-quiz-option-subtitle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

form.ui-quiz-custom {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ui-num-8);
  width: 100%;
  min-height: calc(var(--ui-control-sm) + var(--ui-num-12) + var(--ui-num-12));
  margin: 0;
  padding: var(--ui-num-12) var(--ui-num-8) var(--ui-num-12) var(--ui-num-14);
  border-radius: var(--ui-num-16);
}

.ui-quiz-custom-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--ui-num-12);
  min-width: 0;
  padding: 2px 0;
}

.ui-quiz-option-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ui-check-md);
  height: var(--ui-check-md);
  border-radius: var(--ui-num-4);
  color: var(--ui-tok-quiz-option-leading-icon);
  background: var(--ui-tok-quiz-option-icon-badge-bg-default);
}

.ui-quiz-custom-input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  outline: none;
  appearance: none;
  background: transparent;
  box-shadow: none;
  color: var(--ui-tok-quiz-option-placeholder-focused);
}

.ui-quiz-custom-input:focus,
.ui-quiz-custom-input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

.ui-quiz-custom-input::placeholder {
  color: var(--ui-tok-quiz-option-placeholder-default);
  opacity: 1;
}

form.ui-quiz-custom:focus-within,
form.ui-quiz-custom.is-filled {
  background: var(--ui-tok-quiz-option-bg-pressed);
}

form.ui-quiz-custom:focus-within .ui-quiz-option-icon,
form.ui-quiz-custom.is-filled .ui-quiz-option-icon {
  background: var(--ui-tok-quiz-option-icon-badge-bg-active);
}

.ui-quiz.is-composer {
  border: 0;
  border-radius: var(--ui-chat-input-radius);
  background: var(--ui-chat-input-bg);
  box-shadow: none;
}

.ui-quiz.is-composer .ui-quiz-title,
.ui-quiz.is-composer .ui-quiz-option-title,
.ui-quiz.is-composer .ui-quiz-custom-input {
  color: var(--ui-chat-input-fg);
}

.ui-quiz.is-composer .ui-quiz-description,
.ui-quiz.is-composer .ui-quiz-option-descriptor,
.ui-quiz.is-composer .ui-quiz-custom-input::placeholder {
  color: var(--ui-chat-input-placeholder);
}

.ui-quiz.is-composer .ui-quiz-option.is-selected,
.ui-quiz.is-composer form.ui-quiz-custom:focus-within,
.ui-quiz.is-composer form.ui-quiz-custom.is-filled {
  background: var(--ui-chat-input-leading-bg-pressed);
}

.ui-quiz.is-composer .ui-quiz-option-icon {
  color: var(--ui-chat-input-leading-fg);
  background: transparent;
}

.ui-quiz.is-composer form.ui-quiz-custom:focus-within .ui-quiz-option-icon,
.ui-quiz.is-composer form.ui-quiz-custom.is-filled .ui-quiz-option-icon {
  background: var(--ui-chat-input-leading-bg-pressed);
}

.ui-quiz.is-composer .ui-quiz-radio {
  border-color: var(--ui-chat-input-placeholder);
  background: transparent;
}

.ui-quiz.is-composer .ui-quiz-option.is-selected .ui-quiz-radio {
  border-width: 0;
  background: var(--ui-chat-input-fg);
}

.ui-quiz.is-composer .ui-quiz-option.is-selected .ui-quiz-radio-dot {
  background: var(--ui-chat-input-bg);
}

.ui-quiz.is-composer .ui-button-primary,
.ui-quiz.is-composer .ui-button-fill {
  --ui-button-fg: var(--ui-chat-input-submit-fg);
  --ui-button-glyph: var(--ui-chat-input-submit-fg);
  color: var(--ui-chat-input-submit-fg);
  background: var(--ui-chat-input-submit-bg);
}