.message {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  position: relative;

  &.message--assistant {
    &,
    .message__content {
      align-self: flex-start;
    }

    .message__content {
      background-color: var(--background-bold);
      border-bottom-left-radius: calc(var(--radius) / 4);
    }
  }

  &:not(.message--assistant) {
    &,
    .message__content {
      align-self: flex-end;
    }

    .message__content {
      background-color: var(--background-active);
      border-bottom-right-radius: calc(var(--radius) / 4);
    }
  }

  &.message--error {
    .message__content {
      background-color: var(--background-error);
      color: var(--color-error);
    }
  }

  .message__actions {
    background-color: var(--background-bold);
    border-radius: var(--radius);
    bottom: calc(100% - calc(var(--message-padding-v) / 2));
    display: flex;
    flex-direction: row;
    outline: 1px solid var(--border);
    padding: calc(min(var(--message-padding-v), var(--message-padding-h)) / 2);
    position: absolute;
    right: calc(calc(var(--message-padding-h) / 2) * -1);
    z-index: 900;

    > *:not(:last-child) {
      margin-right: calc(var(--message-padding-h) / 4);
    }
  }

  .message__content {
    border-radius: var(--radius);
    box-sizing: border-box;
    overflow-x: auto;
    padding: var(--message-padding-v) var(--message-padding-h);

    // Fix overflow with non wrapping content like code and tables
    max-width: 100%;

    &.message__content--loading {
      animation: skeleton 2s infinite linear;
      background-image: linear-gradient(90deg, transparent 0, var(--background-muted) 50%, transparent 100%);
      background-repeat: no-repeat;
      background-size: 12rem 100%;

      @keyframes skeleton {
        0% {
          background-position: -12rem;
        }
        60%, 100% {
          background-position: calc(100% + 12rem);
        }
      }
    }

    > *:not(:last-child) {
      margin-bottom: var(--message-padding-v);
    }

    table {
      border-collapse: collapse;
      width: 100%;

      th,
      td {
        border: 1px solid var(--border);
        padding: 0.25em;
      }
    }

    img {
      display: block;
      max-height: 50vh;
      max-width: 100%;
    }
  }

  .message__sub {
    margin: 0 var(--message-padding-h);
    opacity: 0.75;
  }
}
