Chatwoot/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@mixin bubble-with-types {
  @include padding($space-small $space-normal);
  @include margin($zero);
  background: $color-woot;
  border-radius: $space-one;
  color: var(--white);
  font-size: $font-size-small;
  font-weight: $font-weight-normal;
  position: relative;

  .message-text__wrap {
    position: relative;

    .link {
      color: var(--white);
      text-decoration: underline;
    }
  }

  .image,
  .video {
    cursor: pointer;
    position: relative;

    .modal-container {
      text-align: center;
    }

    .modal-image {
      max-height: 90%;
      max-width: 90%;
    }

    .modal-video {
      max-height: 75vh;
      max-width: 100%;
    }

    &::before {
      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
      bottom: 0;
      content: '';
      height: 20%;
      left: 0;
      opacity: 0.8;
      position: absolute;
      width: 100%;
    }
  }

  .video {
    .modal-container {
      width: auto;

      .modal--close {
        z-index: var(--z-index-low);
      }
    }
  }
}

.conversations-list-wrap {
  @include flex;
  flex-direction: column;

  .load-more-conversations {
    font-size: $font-size-small;
    margin: 0;
    padding: $space-normal;
    width: 100%;
  }

  .end-of-list-text {
    padding: $space-normal;
  }

  .conversations-list {
    @include flex-weight(1);
    @include scroll-on-hover;
  }

  .chat-list__top {
    @include flex;
    @include padding($zero $zero $space-micro $zero);

    align-items: center;
    justify-content: space-between;

    .status--filter {
      @include padding($zero null $zero $space-normal);
      @include margin($zero);
      background-color: $color-background-light;
      border: 1px solid $color-border;
      float: right;
      font-size: $font-size-mini;
      height: $space-medium;
      width: auto;
    }
  }

  .content-box {
    text-align: center;
  }
}

.conversation-panel {
  @include flex;
  @include flex-weight(1 1 1px);
  @include margin($zero);
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: var(--space-normal);
  position: relative;
}

.conversation-panel>li {
  @include flex;
  @include flex-shrink;
  @include margin($zero $zero $space-micro);
  position: relative;

  &:first-child {
    margin-top: auto;
  }

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

  &.unread--toast {
    +.right {
      margin-bottom: 0;
    }

    +.left {
      margin-bottom: 0;
    }

    span {
      @include elegant-card;
      @include round-corner;
      background: $color-woot;
      color: var(--white);
      font-size: $font-size-mini;
      font-weight: $font-weight-medium;
      margin: $space-one auto;
      padding: $space-smaller $space-two;
    }
  }

  .bubble {
    @include bubble-with-types;
    text-align: left;
    word-wrap: break-word;

    .aplayer {
      box-shadow: none;
      font-family: inherit;
    }
  }


  &.left {

    .bubble {
      @include border-normal;
      background: $white;
      border-bottom-left-radius: $space-smaller;
      border-top-left-radius: $space-smaller;
      color: $color-body;
      margin-right: auto;
      word-break: break-word;

      &.is-image {
        border-radius: var(--border-radius-large);
      }

      .link {
        color: $color-primary-dark;
      }

      .file {
        .text-block-title {
          color: $color-body;
        }

        .icon-wrap {
          color: $color-woot;
        }

        .download {
          color: $color-primary-dark;
        }
      }

    }

    +.right {
      margin-top: $space-one;

      .bubble {
        border-top-right-radius: $space-one;
      }
    }

    +.unread--toast {
      +.right {
        margin-top: $space-one;

        .bubble {
          border-top-right-radius: $space-one;
        }
      }

      +.left {
        margin-top: 0;
      }
    }
  }

  &.right {
    @include flex-align(right, null);

    .wrap {
      margin-right: $space-normal;
      text-align: right;
    }

    .bubble {
      border-bottom-right-radius: $space-smaller;
      border-top-right-radius: $space-smaller;
      margin-left: auto;
      word-break: break-word;

      &.is-private {
        background: lighten($warning-color, 32%);
        border: 1px solid lighten($warning-color, 15%);
        color: $color-heading;
        position: relative;

        &::before {
          bottom: 0;
          color: $medium-gray;
          position: absolute;
          right: $space-one;
          top: $space-smaller + $space-micro;
        }
      }

      &.is-image {
        border-radius: var(--border-radius-large);
      }
    }

    +.left {
      margin-top: $space-one;

      .bubble {
        border-top-left-radius: $space-one;
      }
    }

    +.unread--toast {
      +.left {
        margin-top: $space-one;

        .bubble {
          border-top-left-radius: $space-one;
        }
      }

      +.right {
        margin-top: 0;
      }
    }

  }

  &.center {
    justify-content: center;
  }

  .wrap {
    @include margin($zero $space-normal);

    --bubble-max-width: 49.6rem;
    max-width: Min(var(--bubble-max-width), 85%);

    .sender--name {
      font-size: $font-size-mini;
      margin-bottom: $space-smaller;
    }
  }

  .sender--thumbnail {
    @include round-corner();
    height: $space-slab;
    margin-right: $space-one;
    margin-top: $space-micro;
    width: $space-slab;
  }

  .activity-wrap {
    background: var(--s-50);
    border: 1px solid var(--s-100);
    border-radius: var(--border-radius-medium);
    display: flex;
    font-size: var(--font-size-small);
    justify-content: center;
    margin: var(--space-smaller) 0;
    padding: var(--space-smaller) var(--space-micro) var(--space-smaller) var(--space-one);

    .is-text {
      display: inline-flex;
      text-align: start;

      @include breakpoint(xxxlarge up) {
        display: flex;
      }
    }
  }
}

.activity-wrap .message-text__wrap {
  .text-content p {
    margin-bottom: 0;
  }
}

.conversation-footer {
  display: flex;
  flex-direction: column;
  position: relative;
}

.typing-indicator-wrap {
  align-items: center;
  display: flex;
  height: 0;
  position: absolute;
  top: -$space-large;
  width: 100%;

  .typing-indicator {
    @include elegant-card;
    @include round-corner;
    background: var(--white);
    color: $color-light-gray;
    font-size: $font-size-mini;
    font-weight: $font-weight-bold;
    margin: $space-one auto;
    padding: $space-small $space-normal $space-small $space-two;

    .gif {
      margin-left: $space-small;
      width: $space-medium;
    }
  }
}

.left .bubble .text-content {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-body);
  }

  a {
    color: var(--color-woot);
    text-decoration: underline;
  }

  blockquote {
    border-left-color: var(--s-300);

    p {
      color: var(--s-300);
    }
  }

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

.right .bubble .text-content {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--white);
  }

  a {
    color: var(--white);
    text-decoration: underline;
  }

  blockquote {
    border-left-color: var(--w-100);

    p {
      color: var(--w-100);
    }
  }

  pre code {
    background: var(--color-background);
  }

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