:host {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: scroll;

  .message {
    display: flex;
    flex-direction: column;

    &.author {
      align-items: end;

      .bubble {
        background: var(--tui-background-accent-1-hover);
      }
    }

    &.chained_start {
      margin-top: 10px;

      .above, .below {
        display: block;
      }

      .above {
        padding: 2px;
      }

      .bubble {
        border-radius: 25px 10px 10px 10px !important;
      }
    }

    &.chained_middle {
      .bubble {
        border-radius: 10px !important;
      }
    }

    &.chained_end {
      .bubble {
        border-radius: 10px 10px 10px 25px !important;
      }
    }

    .above, .below {
      color: gray;
      opacity: 70%;
      display: none;
    }

    .bubble {
      background: var(--tui-background-neutral-2);
      max-width: 50%;
      min-width: 250px;
      min-height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 10px;

      .message-text {
        white-space: none;
        overflow-wrap: anywhere;
      }
    }
  }
}