@layer components {
  .conversation {
    font-family: var(--font-sans);
    padding-block-end: 6em;
  }

  .conversation__composer {
    backdrop-filter: blur(24px);
    display: flex;
    gap: var(--inline-space);
    inset: auto 0 0 0;
    padding: var(--block-space);
    position: absolute;

    .conversation__submit {
      display: flex;
      flex-direction: column;
    }
  }

  .conversation__header {
    align-items: center;
    backdrop-filter: blur(24px);
    display: flex;
    inset: 0 0 auto 0;
    justify-content: space-between;
    padding: var(--block-space);
    position: absolute;
  }

  .conversation__input {
    align-items: center;
    flex-grow: 1;

    .input--textarea {
      --input-padding: 0.5em !important;
    }

    .conversation:has(.conversation__thinking-indicator--thinking) & {
      animation: pulse 1.5s infinite;
      pointer-events: none;
    }
  }

  .conversation__message {
    display: flex;

    .action-text-content {
      
      border-radius: 0.5rem;
      inline-size: fit-content;
    }

    p {
      &:first-of-type {
        margin-block-start: 0;
      }

      &:last-of-type {
        margin-block-end: 0;
      }
    }
  }

  .conversation__message--assistant {
    justify-content: flex-start;

    .action-text-content {
      margin-inline-end: 15%;
      text-align: start;
    }
  }

  .conversation__message--emoji {
    font-size: var(--text-xx-large);
  }

  .conversation__message--failed {
    color: var(--color-negative);
  }

  .conversation__message--user {
    justify-content: flex-end;

    .action-text-content {
      background-color: var(--color-ink-lightest);
      margin-inline-start: 15%;
      padding: var(--block-space-half) var(--inline-space-double);
      text-align: end;
    }
  }

  .conversation__transcript {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin-inline: calc(var(--block-space-half) * -0.5);
    max-block-size: calc(100dvh - 6em - var(--block-space-double) - 2 * var(--footer-height));
    overflow-y: auto;
    padding: var(--block-space-half) var(--block-space);
  }
}