/* Example prompts drawn as chat bubbles, sitting on the page background */
.bubbles {
  margin-inline: auto;
  padding-inline: var(--space-medium);
  width: min(100%, 28em);
}

.bubbles__list {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-small);
  gap: 0.75em;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bubbles__bubble {
  align-self: flex-start;
  background: var(--color-white);
  border-radius: 1.25em 1.25em 1.25em 0.3em;
  box-shadow: var(--box-shadow-card-soft);
  max-width: 85%;
  padding: 0.75em 1.1em;
  text-wrap: pretty;
}

.bubbles__bubble:nth-child(even) {
  align-self: flex-end;
  background: var(--color-blue);
  border-radius: 1.25em 1.25em 0.3em 1.25em;
  color: var(--color-white);
}

@media(prefers-color-scheme: dark) {

  .bubbles__bubble {
    background: var(--color-ink-3);
  }

  .bubbles__bubble:nth-child(even) {
    background: var(--color-blue-deep);
  }

}

.dark .bubbles__bubble {
  background: var(--color-ink-3);
}

.dark .bubbles__bubble:nth-child(even) {
  background: var(--color-blue-deep);
}