@import '../_variables'
@import '../_mixins'

.page.chat
  padding-top: 0px
  borderbox()

.conversation
  position: relative
  bottom: 0px
  left: 0px
  right: 0px
  padding: 0px
  width: 100%
  borderbox()

  header
    padding: 5px
    border-bottom: 2px solid $gray-lighter
    position: fixed
    right: 0px
    left: 201px
    z-index: 10
    borderbox()
    background: lighten($gray-light, 93%)

    .controls
      float: right

      .leaveRoom
        display: none

      .joinRoom
        display: block

    .joined
      .joinRoom
        display: none

      .leaveRoom
        display: block

    .avatar
      margin-right: 5px
      avatar()
      position: absolute
      top: 11px
      left: 11px
      vertical-align: top

    .name, .call
      float: left

    .name
      margin: 15px
      padding: 0px
      margin-left: 45px
      font-size: $font-size-base
      line-height: 14px
      max-width: 50%

    .tzo:not(:empty)
      position: absolute
      right: 15px
      top: 28px
      height: 20px
      margin-top: -10px
      padding: 0 5px
      roundall(3px)
      text-transform: uppercase
      font-size: $font-size-small
      font-weight: $font-weight-bold
      line-height: 20px
      color: lighten($gray, 30%)
      background: $gray-lighter

    .call
      margin-top: 9px
      text-transform: capitalize

    .activeCall
      transition(height 250ms)
      height: 0px
      position: relative
      top: 0px
      
      .remote
        position: absolute
        top: 60px
        left: 10px
        height: 50%

      .local
        position: absolute
        bottom: 10px
        right: 10px
        height: 20%
        border: 2px solid $gray-lighter
        transform(scaleX(-1))

      .button-wrap
        position: absolute
        left: 10px
        bottom: 10px

        .button-group
          margin-left: 5px

  // while on video call the parent has
  // this class so we animate the height
  &.onCall
    .activeCall
      height: 400px

.messages
  margin: 0px
  padding: 0px
  padding-top: 130px
  overflow-y: auto
  overflow-x: hidden
  position: relative
  bottom: 75px
  width: 100%
  display: table
  borderbox()

  li
    position: relative
    z-index: 1
    list-style: none
    padding: 10px 0
    width: 100%
    min-height: 50px
    display: table
    borderbox()
    border-bottom: 1px solid $gray-lighter
    display: table-row

    &:last-of-type
      border: none

    .messageAvatar
      display: inline-block

      img
        avatar()

      .name
        text-indent: -9999em
        position: absolute
        width: 1px

  .sender
    display: table-cell
    font-size: 12px
    font-weight: bold
    color: $gray
    padding: 5px
    text-align: right
    background-color: #f7f7f7
    border-top: 1px solid #e1e1e1
    white-space: nowrap

    .name
      padding-left: 10px

  .messageWrapper
    display: table-cell
    padding: 5px
    border-top: 1px solid #eee
    width: 99%
    vertical-align: top

  .message
    font-size: $font-size-small
    margin: 2px
    display: inline-block
    padding-right: 11px
    min-width: 20px
    width: 100%
    borderbox()

    &:not(.mine)
      color: $gray-dark

    &.mine
      background: white

      .timestamp
        color: darken($gray-lighter, 20%)

    &.delayed
      .timestamp:before
        content: '@ '

    &.edited
      .timestamp:before
        content: 'edited '

    &.pending
      color: lighten($gray, 50%)

    &.meAction
      font-style: italic
      color: $blue
      background-color: $blue-lighter
      padding: 2px
      padding-left: 8px
      border-radius: 2px

      &:before
        content: '\2022  '
        font-style: normal

      .timestamp
        position: relative
        left: -10px
        font-style: normal
        color: $blue-light

    .body
      display: inline
      word-break: break-word

      .mention
        color: $pink
        background-color: $pink-lighter
        padding: 1px
        font-weight: bold
        border-radius: 4px
        border: 1px solid darken($pink-lighter, 25%)

    .timestamp
      font-size: $font-size-smaller
      color: lighten($blue, 50%)
      float: right
      display: block

    .sender
      display: block

.chatBox
  borderbox()
  border-top: 1px solid $gray-lighter
  bottom: 0px
  position: fixed
  right: 0px
  left: 201px
  z-index: 200

  form
    background: lighten($gray-light, 93%)
    padding: 11px

  .formwrap
    borderbox()
    width: 100%
    padding-right: 80px
    position: relative

  textarea
    height: 30px
    padding: 6px 10px

    &.editing
      background-color: #fffcea
      border: 1px solid #efe391
      color: #d2bd2d