.chat_window .chat
  left 350px

.chat
  position absolute
  top 0
  right 0
  bottom 0
  &.without_spectators
    .message_pane
      right 0
    .user_list
      display none
  &.without_chat_input
    .messages
      bottom 0
    .chat_input_pane
      display none

.user_list
  position absolute
  top    0
  right  0
  bottom 0
  width  25%
  overflow-y auto
  p
    padding 2px 6px
    margin 0
  ul
    margin 0
    padding 0
    list-style none
    li
      padding 2px 6px
      &:hover
        background #fb7

.message_pane
  position absolute
  top    0
  left   0
  right  25%
  bottom 0
  box-shadow 0 0 5px rgba(0, 8, 16, .2)

.messages
  overflow-y auto
  position absolute
  top 0
  left 0
  right 0
  bottom 30px
  border-left 1px solid rgba(0, 0, 0, .2)
  border-right @border-left
  background white
  word-wrap break-word
  h2, h3, p
    padding 0 16px 2px
  p
    font-size .875em
    text-rendering optimizeLegibility
    &.move_message
      font-size 1em
      margin-top 10px

  a.pokemon-link
    color inherit

  .alert
    margin 0.75em 16px

.chat_input_pane
  position absolute
  width 100%
  bottom 0
  height 30px

  .chat_input_wrapper
    overflow: hidden  // Make it take the remainder of the space not used by the button

  .chat_input
    box-sizing border-box
    border 2px solid #384035
    padding 2px 6px
    margin 0
    width 100%
    height 30px
    border-radius 2px
    &:hover
      border-color #5D736B
    &:focus
      border-color #F27405
      outline none

  .chat_input_send
    box-sizing border-box
    float right
    margin 0
    height 30px