@layer components {
  .message {
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--message-avatar-track) auto;
    grid-template-areas:
      "separator separator"
      "avatar body";
    column-gap: var(--space-2);
    inline-size: var(--size-fill);
    max-inline-size: var(--measure);
    margin-inline: auto;
    margin-block-start: var(--space-7);
  }

  .message--me {
    grid-template-columns: auto var(--message-avatar-track);
    grid-template-areas:
      "separator separator"
      "body avatar";
  }

  .message--threaded {
    margin-block-start: var(--space-1);
  }

  .message__day-separator {
    grid-area: separator;
    display: grid;
    grid-template-columns: auto max-content auto;
    align-items: center;
    column-gap: var(--space-4);
    margin-block-end: var(--space-7);
    font: var(--type-label);
    color: var(--color-ink-muted);
  }

  .message__day-separator::before,
  .message__day-separator::after {
    content: "";
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .message__day-separator time {
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    border-radius: var(--radius-pill);
    background-color: var(--color-message);
  }

  .message__avatar {
    position: relative;
    z-index: var(--z-raised);
    grid-area: avatar;
    inline-size: var(--avatar-size);
  }

  .message__avatar .avatar {
    outline: var(--border-width-strong) solid var(--color-bg);
    background-color: var(--color-message);
    color: var(--color-ink-muted);
  }

  .message--me .message__avatar .avatar {
    background-color: var(--color-message-me);
    color: var(--color-participant-ink);
  }

  .message--me .message__avatar {
    justify-self: end;
  }

  .message--threaded .message__avatar,
  .message--threaded .message__heading {
    display: none;
  }

  .message__body {
    grid-area: body;
    display: flex;
    min-inline-size: var(--space-0);
  }

  .message--me .message__body {
    justify-content: end;
  }

  .message__body-content {
    inline-size: fit-content;
    max-inline-size: var(--message-bubble-max);
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
    border-radius: var(--radius-sm);
    background-color: var(--color-message);
    color: var(--color-ink);
    overflow-wrap: anywhere;
  }

  .message--me .message__body-content {
    background-color: var(--color-message-me);
  }

  .message__heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    min-inline-size: var(--space-0);
  }

  .message--me .message__heading {
    flex-direction: row-reverse;
    justify-content: end;
  }

  .message__author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-message-author);
    color: var(--color-ink);
  }

  .message__timestamp {
    white-space: nowrap;
    font: var(--type-message-meta);
    color: var(--color-ink-faint);
  }

  .message--mode-change {
    grid-template-columns: var(--size-fill);
    grid-template-areas:
      "separator"
      "line";
  }

  .message__mode-change {
    grid-area: line;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: var(--space-3);
    font: var(--type-caption);
    color: var(--color-ink-muted);
    text-align: center;
  }

  .message__presentation {
    font: var(--type-message);
    white-space: pre-line;
  }

  .message__label {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-caution);
  }

  .message__files {
    margin-block-start: var(--space-3);
  }
}