/* Message (shadcn's AI Elements Message, the turns of its chatbot block): one turn of a
/* conversation, the person's at the end on the primary, the assistant's at the start on the
/* secondary.
/*
/*   <div class="ui-message ui-message--user">        or ui-message--assistant
/*     <div class="ui-message__content">…</div>
/*   </div>
/*
/* Its source: Message is `group flex w-full items-end justify-end gap-2 py-4
/* [&>div]:max-w-[80%]`, is-assistant `flex-row-reverse justify-end`; MessageContent is
/* `flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm`, on
/* the primary for the user and the secondary for the assistant. */
@layer ui {
  .ui-message {
    align-items: flex-end;
    display: flex;
    gap: 0.5rem;
    inline-size: 100%;
    justify-content: flex-end;
    padding-block: 1rem;

    > div {
      max-inline-size: 80%;
    }
  }

  .ui-message--assistant {
    flex-direction: row-reverse;
  }

  .ui-message__content {
    background-color: var(--secondary);
    border-radius: var(--radius-lg);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    font-size: var(--text-normal);
    gap: 0.5rem;
    overflow: hidden;
    padding: 0.75rem 1rem;

    .ui-message--user & {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
  }
}