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

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

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

  header
    padding: 5px
    border-bottom: 2px solid $grayOutline
    position: fixed
    right: 0px
    left: 181px
    z-index: 10
    borderbox()
    background: $grayBackground

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

    .name
      margin: 15px
      padding: 0px
      margin-left: 45px
      font-size: 14px
      line-height: 14px

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

.messages
  margin: 0px
  padding: 0px
  padding-top: 130px
  overflow-y: auto
  overflow-x: hidden
  position: relative
  bottom: 75px
  width: 100%
  borderbox()
  background: lighten($activeBlue, 97%)

  li
    position: relative
    z-index: 1
    list-style: none
    margin: 0px
    padding: 0px
    width: 100%
    display: block
    borderbox()

    &:last-child .message
      border: none

  .message
    font-size: 12px
    margin: 0px
    padding: 10px
    display: inline-block
    padding-right: 11px
    min-width: 20px
    width: 100%
    borderbox()

    &:not(.mine)
      color: $activeBlue

    &.mine
      background: white

      .timestamp
        color: darken($grayOutline, 20%)

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

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

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

    .body
      display: inline
      word-break: break-word
      padding: 0px
      margin: 0px

    .timestamp
      font-size: 10px
      font-weight: bold
      color: lighten($activeBlue, 50%)
      float: right
      display: block

    .sender
      display: block

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

  form
    background: $grayBackground
    padding: 11px

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

  textarea
    width: 100%
    position: relative
    height: 30px
    line-height: 18px
    padding: 5px
    background: white

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