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

@mixin bubble-with-tyes {
  @include padding($space-smaller $space-one);
  @include margin($zero);
  background: $color-primary-light;
  border-radius: $space-small;
  color: $color-heading;
  font-size: $font-size-small;
  position: relative;

  .icon {
    bottom: $space-smaller;
    position: absolute;
    right: $space-small;
  }

  .message-text__wrap {
    position: relative;
  }

  .message-text {
    &::after {
      content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
      display: inline;
    }
  }

  .audio {
    .time {
      margin-top: -$space-two;
    }
  }

  .image {
    @include flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;

    img {
      @include padding($space-small);
      max-height: 30rem;
      max-width: 20rem;
    }

    .time {
      margin-left: -$space-large;
      white-space: nowrap;
    }

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

  .map {
    @include flex;
    flex-direction: column;
    text-align: right;

    img {
      @include padding($space-small);
      max-height: 30rem;
      max-width: 20rem;
    }

    .time {
      @include padding($space-small);
      margin-left: -$space-smaller;
      margin-top: -$space-two;
      white-space: nowrap;
    }

    .locname {
      font-weight: $font-weight-medium;
      padding: $space-smaller;
    }
  }
}

.conversations-sidebar {
  @include flex;
  flex-direction: column;

  .load-more-conversations {
    color: $color-woot;
    cursor: pointer;
    font-size: $font-size-small;
    padding: $space-normal;

    &:hover {
      background: $color-background;
    }
  }

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

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

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

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

    .page-title {
      @include flex;
      margin-bottom: $zero;
      margin-left: $space-normal;
    }

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



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

.emojione {
  height: $font-size-medium;
  width: $font-size-medium;
}

.conversation-wrap {
  @include background-gray;
  @include margin(0);
  @include border-normal-left;

  .current-chat {
    @include flex;
    @include full-height;
    @include flex-align(center, middle);
    flex-direction: column;

    div {
      @include flex;
      @include full-height;
      @include flex-align(center, middle);
      flex-direction: column;

      img {
        @include margin($space-normal);
        width: 10rem;
      }

      span {
        font-size: $font-size-small;
        font-weight: $font-weight-medium;
        text-align: center;
      }
    }
  }

  .conv-empty-state {
    @include flex;
    @include full-height;
    @include flex-align(center, middle);
    flex-direction: column;
  }
}

.conversation-panel {
  @include flex;
  @include flex-weight(1);
  @include margin($zero);
  flex-direction: column;
  // Firefox flexbox fix
  height: 100%;
  margin-bottom: $space-small;
  overflow-y: auto;

  >li {
    @include flex;
    @include flex-shrink;
    @include margin($zero $zero $space-smaller);

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

    &:last-child {
      margin-bottom: $space-small;
    }

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

    .bubble {
      @include bubble-with-tyes;
      max-width: 50rem;
      text-align: left;
      word-wrap: break-word;

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

    &.left {
      .bubble {
        background: $white;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        color: $color-heading;
        margin-right: auto;
      }

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

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

    }

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

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

      .bubble {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        margin-left: auto;

        &.is-private {
          background: lighten($warning-color, 32%);
          color: $color-heading;
          padding-right: $space-large;
          position: relative;

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

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

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

    .wrap {
      @include margin($zero $space-normal);
      max-width: 69%;

      .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 {
      @include flex;
      @include margin($space-small auto);
      @include padding($space-smaller $space-normal);
      @include flex-align($x: center, $y: null);
      background: lighten($warning-color, 32%);
      border: 1px solid lighten($warning-color, 26%);
      border-radius: $space-smaller;
      font-size: $font-size-small;

      p {
        color: $color-heading;
        margin-bottom: $zero;

        .ion-person {
          color: $color-body;
          font-size: $font-size-default;
          margin-right: $space-small;
          position: relative;
          top: $space-micro;
        }

        .message-text__wrap {
          position: relative;
        }

        .message-text {
          &::after {
            content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
            display: inline;
          }
        }
      }

      .time {
        color: $medium-gray;
      }
    }

    .time {
      bottom: -$space-micro;
      color: $color-gray;
      float: right;
      font-size: $font-size-micro;
      font-style: italic;
      margin-left: $space-slab;
      right: -$space-micro;
      text-align: right;
    }
  }
}