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

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

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

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

  .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;
    flex-direction: column;
    @include flex-align(center, middle);
    div {
      @include flex;
      @include full-height;
      flex-direction: column;
      @include flex-align(center, middle);
      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;
    flex-direction: column;
    @include flex-align(center, middle);
  }
}

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

  > 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 {
      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-small;
        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-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;
      }
    }

    .bubble {
      @include padding($space-smaller $space-one);
      @include margin($zero);
      background: #c7e3ff;
      border-radius: $space-small;
      box-shadow: 0 .5px .5px rgba(0, 0, 0, .05);
      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;
        justify-content: center;
        align-items: flex-end;
        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;
        }
      }
    }

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