@layer components {
  .message__files {
    margin-block-start: var(--block-space-half);
    overflow: hidden;

    .image-item,
    .audio-item,
    .document-item {
      border: none !important;
      background: transparent !important;
      border-radius: 0 !important;
      margin-block-end: 0.25rem !important;

      &:last-child {
        margin-block-end: 0 !important;
      }
    }

    .image-item + .image-item,
    .audio-item + .audio-item,
    .document-item + .document-item {
      border-top: 1px solid oklch(var(--lch-black) / 6%) !important;
      padding-block-start: 0.25rem;
    }

    .document-item,
    .document-name {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .document-name a {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }

    audio {
      height: 36px;
    }

    .image-thumbnail img {
      border-radius: 6px !important;
    }
  }
}