@layer components {
  .prompts {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--gutter-fluid));
    margin-block-end: var(--space-3);
    padding-inline: var(--gutter-fluid);
    scroll-padding-inline: var(--gutter-fluid);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .prompts::-webkit-scrollbar {
    display: none;
  }

  .prompts .prompts__prompt {
    position: relative;
    isolation: isolate;
    flex: none;
    padding-inline: var(--space-5);
    border-color: transparent;
    background-color: transparent;
    color: var(--color-participant-ink);
    font: var(--type-message);
    white-space: nowrap;
  }

  .prompts .prompts__prompt::before {
    content: "";
    position: absolute;
    inset-inline: var(--space-0);
    inset-block: var(--space-4);
    z-index: -1;
    border: var(--border-width) solid var(--color-participant-ink);
    border-radius: var(--radius-pill);
  }

  .prompts .prompts__prompt:active::before {
    background-color: var(--color-message-me);
  }

  .transcript > .prompts {
    order: -2;
    flex: none;
    align-self: center;
    inline-size: calc(var(--size-fill) + 2 * var(--gutter-fluid));
    max-inline-size: calc(var(--measure) + 2 * var(--gutter-fluid));
    margin-block-end: var(--space-0);
    padding-block-end: var(--space-3);
  }

  .transcript > .prompts .prompts__prompt:first-child {
    margin-inline-start: auto;
  }
}