// /////////////// //
//    chat         //
// /////////////// //
.live-chat
  @extend .bg-white
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 100%
  outline: none
  z-index: $zindex-chat
  margin: 0 0 0 -100%
  .chat-header
    @extend .bg-base
    min-height: 60px
    position: relative
    padding: 10px 60px
    a,
    .btn.list-user
      width: 40px
      height: 40px
      position: absolute
      top: 10px
      right: 0
      bottom: 0
      &.prev
        left: 0
    .btn.list-user
      right: 40px
    .title
      padding: 8px 0
      &.chat-header-single
        padding: 10px 30px 10px 0
    .icn
      transform: translate(-50%, -50%)
      position: absolute
      top: 50%
      left: 50%

  .loader
    width: 100%
    height: 50px
    text-align: center
    position: absolute
    top: 50%
    margin: -25px 0 0 0
    .preload
      width: 50px
      height: 50px

  .conversation-filter
    width: 100%
    position: absolute
    top: 60px
    padding: 10px 20px
    label
      @extend .media-left
      @extend .media-middle
      @extend .text-nowrap
    .select-style
      @extend .media-body
      @extend .media-middle
      overflow: visible
    & + .chat-body
      margin: 62px 0 0 0 // conversation-filter height

  .chat-body
    width: 100%
    max-height: 100%
    position: relative
    overflow: auto
    z-index: 4
    padding: 0
    li.display-team
      padding: 66px 0 0 0
      margin: 0
      .list-team-inline
        text-align: center
        padding: 10px 0
        li
          padding: 0 5px
          .media-photo
            @include avatar(40px, 2px, 2px)
    .empty-message
      transform: translateY(-50%)
      width: 100%
      position: absolute
      top: 50%
    .container-message
      width: 100%
      max-height: 100%
      position: absolute
      bottom: 0
      overflow: auto
      &.write-message
        display: none
        border: 0
        padding: 0
        margin: 10px 0 -10px 0
      &:hover .message-body .timestamp p
        display: inline
      a
        @extend .text-primary
    li.typing-users
      @extend .text-muted
      display: block
      opacity: 0
      padding: 0
      &.show
        opacity: 1
        padding: 0 0 6px 0
        margin: -6px 0 0 0
      .typing-animation
        .circle
          @extend .bg-light
          @include animation(typing 1211ms ease infinite)
          width: 6px
          height: 6px
          display: inline-block
          border-radius: 50%
          margin: 0 4px 0 0
          &:nth-child(1)
            @include animation-delay(0s)
          &:nth-child(2)
            @include animation-delay(0.1s)
          &:nth-child(3)
            @include animation-delay(0.2s)
      .typing-text
        padding: 0 0 0 5px

  .chat-footer
    width: 100%
    min-height: 46px
    position: absolute
    bottom: 0
    left: 0
    box-shadow: 0 0 7px 0 rgba($gray-base, 0.1)
    z-index: 5
    .action
      @extend .bg-primary
      text-align: center
      padding: 16px 0
      p
        @extend .h6
        @extend .m-t-none
        @extend .m-b-none
        padding: 0 16px
        &.response
          padding: 0 10px 10px 10px
      a
        & + a
          border: none
      form
        padding: 0 16px
      .media-response
        form
          display: inline-block
    form
      padding: 12px 16px 0 16px
      textarea
        @extend .h6
        @extend .font-weight-normal
        @extend .text-secondary
        @extend .m-t-none
        @extend .m-b-none
        width: 100%
        min-height: 22px
        border: 0
        resize: none
        outline: none
        padding: 0
  &.write .chat-body .write-message
    display: block

@media (min-width: $screen-sm-min)
  .live-chat
    max-width: 480px
    box-shadow: -3px 0 7px 0 rgba($gray-base, 0.1)
    margin: 0 0 0 -480px
    .chat-body
      li.display-team
        padding: 0
      .container-message
        overflow: hidden
        &:hover
          overflow: auto
        .list-messages
          top: 60px
    .chat-footer
      .action
        textarea
          min-height: 44px