@layer components {
  .conversation__header {
    align-items: center;
    display: flex;
    inset: 0 0 auto 0;
    justify-content: flex-end;
    padding: var(--block-space-half) var(--block-space);
    position: absolute;
  }

  .conversation__composer-input.input {
    --focus-ring-size: 0;
    --input-border-color: var(--color-ink-light);
    --input-border-radius: 0;
    --input-padding: 0.1em;

    border-width: 0 0 1px;
    max-inline-size: 50ch;
  }

  .conversation__message {
    display: flex;
    flex-direction: column;

    .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__messages {
    --gap: 4vmin;

    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-inline: auto;
    max-block-size: 75dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
  }

  .conversation__message--assistant {
    align-items: 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--failed[data-error]::after {
    color: var(--color-negative);
    content: attr(data-error);
    display: block;
    padding: var(--inline-space);
  }

  .conversation__message--user {
    align-items: flex-end;

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

  .conversation__thinking-indicator {
    inset: auto auto var(--footer-height) 50%;
    position: absolute;
    transform: translateX(-50%);

    .spinner {
      display: none;
  
      .conversation__thinking-indicator--thinking & {
        display: block;
      }
    }
  }

  .conversation__transcript {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 67ch;
  }
}