#templates .conversation-outcomes {
  display: flex;
  overflow-x: auto;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-surface);
  overscroll-behavior-x: contain;
}

#templates .conversation-outcome {
  flex: 0 0 200px;
}

#templates .conversation-outcome-icon img {
  filter: brightness(0) invert(1);
}

#templates .conversation-outcomes:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

@media (max-width: 767px) {
  #templates .conversation-outcome {
    flex-basis: 176px;
  }
}