@layer components {

.bot-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 700px;
}

.bot-card__token {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.bot-card__token-value {
  font-size: var(--font-size-sm);
  background: var(--neutral-50);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-card__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--neutral-50);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans-serif);
  font-weight: 500;
  background-color: var(--neutral-50);
  padding: 0.5rem 1rem;
  box-shadow: var(--button-shadow);
  cursor: pointer;
  border-radius: 4px;
}

.bot-card__toggle a[aria-expanded="true"] .arrow-right {
  transform: rotate(90deg);
}

.bot-card__examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.bot-card__example-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bot-card__curl {
  font-size: var(--font-size-sm);
  background: var(--neutral-50);
  padding: 0.4em 0.6em;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
  min-width: 0;
  flex: 1;
}

}