.#{$n}-message__body {
  display: block;
  position: relative;
  max-width: 100%;
  padding: $spacer * 0.5 $spacer * 0.75;
  border-radius: $borderradius;
  background-color: $threadlist-agent-text-bgcolor;
  color: set-text-color($threadlist-agent-text-bgcolor);

  .#{$n}-icon svg path {
    fill: set-text-color($threadlist-agent-text-bgcolor);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.#{$n}-unstarted-wrapper.#{$n}-unstarted-wrapper--window .#{$n}-message__body {
  margin-left: auto;
  padding: $spacer * 0.5 $spacer * 0.75;
  border: $thin-border solid $white;
  border-radius: $borderradius;
  background-color: $threadlist-agent-text-bgcolor;
  font-size: $fontsize-medium;
}

.#{$n}-conversation__item--source-info .#{$n}-message__body {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 $spacer * 0.75 $spacer * 0.5;
  border-radius: 0;
  background-color: initial;
  text-align: center;
}

.#{$n}-message--source-user .#{$n}-message__body {
  background-color: $threadlist-user-text-bgcolor;
  color: set-text-color($threadlist-user-text-bgcolor);

  .#{$n}-icon svg path {
    fill: set-text-color($threadlist-user-text-bgcolor);
  }
}

// Splash
.#{$n}-message--type-splash .#{$n}-message__body {
  padding: 0;
  border-radius: 0;
  background-color: initial;
  font-size: $fontsize-xxlarge;
  font-weight: $fontweight-bold;
}

// Suggestions
.#{$n}-message--type-suggestions .#{$n}-message__body {
  width: 100%;
  padding: 0;
  background-color: initial;
}

// Text
.#{$n}-message--type-text .#{$n}-message__body,
.#{$n}-message--type-splash .#{$n}-message__body {
  p,
  ul,
  ol {
    margin: 0 0 $spacer;
  }

  p:last-child,
  ul:last-child,
  ol:last-child {
    margin: 0;
  }

  ul,
  ol {
    padding-left: 1.5em;
  }

  ul li {
    list-style-type: disc;
  }

  a {
    color: $interaction;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

.#{$n}-message--source-user .#{$n}-message__body a {
  color: $white;
}

// Loading
.#{$n}-message--type-loading .#{$n}-message__body {
  align-self: flex-start;
}

// Choice Prompt
.#{$n}-message--type-choice-prompt .#{$n}-message__body {
  width: 100%;
  padding: 0;
  background-color: initial;
}

// Image
.#{$n}-message--type-image .#{$n}-message__body {
  padding: 0;
}

.#{$n}-message--type-image img {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: $borderradius;
}

// Video
.#{$n}-message--type-video .#{$n}-message__body {
  width: 100%;
  padding: 0;
  background-color: $black;
}

.#{$n}-message--type-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 4;
  border: 0 none;
  border-radius: $borderradius;
}

// Download
.#{$n}-message--type-upload {
  .#{$n}-message__body {
    padding: 0;
  }

  .#{$n}-download {
    display: flex;
    align-items: center;
    gap: $spacer * 0.5;
    padding: $spacer * 0.5 $spacer * 0.75;
    border-radius: $borderradius;
    color: inherit;
    text-align: left;
    word-break: break-all;
  }

  .#{$n}-download-link {
    appearance: none;
    border: 0 none;
    font-size: $fontsize-small;
    text-decoration: underline;
    cursor: pointer;
  }

  .#{$n}-download--preview {
    flex-flow: column wrap;
    align-items: flex-end;
    gap: 0;
    padding: 0;

    > img {
      width: 100%;
      height: auto;
      border-top-left-radius: $borderradius;
      border-top-right-radius: $borderradius;
      object-fit: cover;
    }

    .#{$n}-file-download {
      display: flex;
      flex: 0 0 auto;
      justify-content: flex-end;
      width: 100%;
      padding: $spacer * 0.5 $spacer * 0.75;
    }
  }

  .#{$n}-icon {
    flex: 0 0 $iconsize-small;
    width: $iconsize-small;
    height: $iconsize-small;
  }

  .#{$n}-icon svg {
    width: 100%;
    height: 100%;
  }
}

.#{$n}-conversation__item--source-agent .#{$n}-message--type-upload {
  .#{$n}-download--preview .#{$n}-file-download {
    justify-content: flex-start;
  }

  .#{$n}-icon path {
    fill: $interaction;
  }
}

.#{$n}-message .#{$n}-message__info {
  margin-top: $spacer * 0.2;
  color: $grey-d;
  font-size: $fontsize-small;
  line-height: 1.35;
}

// Cards
.#{$n}-message--type-card .#{$n}-message__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}

// Carousel
.#{$n}-message--type-carousel .#{$n}-message__body {
  display: block;
  padding: 0;
}