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: $color-white;
  font-size: $font-size-small;
  font-weight: $font-weight-normal;
  position: relative;

  .message-text__wrap {
    position: relative;


    .link {
      color: $color-white;
      text-decoration: underline;
    }
  }

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

  .image {
    cursor: pointer;
    position: relative;

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

    .modal-image {
      max-width: 85%;
    }

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

.conversations-sidebar {
  @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($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 round-corner;
      @include margin($space-smaller $space-slab $zero $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-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;
  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: $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-types;
    max-width: 50rem;
    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;

      .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;
      }
    }

  }

  &.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;

      &.is-private {
        background: lighten($warning-color, 32%);
        border: 1px solid lighten($warning-color, 15%);
        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-one;
      }
    }
  }

  .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-small $space-normal);
    @include flex-align($x: center, $y: null);
    background: lighten($warning-color, 32%);
    border: 1px solid lighten($warning-color, 22%);
    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;
        }
      }
    }

  }
}

.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: $color-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;
    }
  }
}