@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
    font-size: 14px
    borderbox()
    background: $grayBackground
    color: #222

    .avatar
      margin-right: 5px
      roundall(3px)
      width: 30px
      height: 30px
      position: absolute
      top: 11px
      left: 11px
      vertical-align: top

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

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

  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: 7px 11px
    display: inline-block
    padding-right: 11px
    min-width: 20px
    width: 100%
    border-bottom: 1px solid lighten($activeBlue, 90%)
    borderbox()

    &.mine
      background: white
      border-bottom: 1px solid lighten($grayOutline, 10%)

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

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

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

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

    .timestamp
      font-size: 10px
      font-weight: bold
      color: lighten($activeBlue, 50%)
      float: right
      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
    background-color: #fff
    width: 100%
    height: 30px
    border: 1px solid $grayOutline
    roundall: 3px
    line-height: 18px
    outline: none
    resize: none
    color: #222f3b
    font-size: 14px
    -webkit-font-smoothing: antialiased
    -webkit-appearance: none
    padding: 5px
    borderbox()

    &.editing
      background-color: yellow