.chat
    $color: black
    $header_height: 50px
    $left_width: 200px
    $right_width: 200px
    $input_height: 100px
    padding: 15px
    &.container
        height: 100%
        padding: 0px
        position: relative
        box-sizing: border-box
    &.header
        position: absolute
        top: 0px
        left: 0px
        right: 0px
        height: $header_height
        background-color: $color
        border-bottom: solid 1px gray
        box-sizing: border-box
    &.left
        position: absolute
        top: $header_height
        bottom: 0px
        left: 0px
        width: $left_width
        //border-right: solid 1px gray
        box-sizing: border-box
        background-color: black
    &.right
        position: absolute
        top: $header_height
        right: 0px
        bottom: 0px
        width: $right_width
        box-sizing: border-box
        //border-left: solid 1px gray
    &.middle
        //background-color: blue
        position: absolute
        top: 0px
        margin-top: $header_height
        left: $left_width
        right: $right_width
        box-sizing: border-box
        padding: 0px
        height: 100%
        overflow-y: scroll
    &.bottom
        position: absolute
        bottom: 0px
        right: $right_width
        left: $left_width
        padding: 5px
    &.msg
        padding: 0px
        $author_width: 100px
        &.container
            position: relative
            border-bottom: solid 1px lightgray
            padding: 10px
            height: unset
            //background-color: lime
        &.from
            position: absolute
            width: $author_width
            top: 10px
            left: 0px
            color: white
            text-align: right
        &.when
            float: right
            color: lightgray
            margin-bottom: 10px
        &.text
            padding-left: $author_width
            top: 0px
            left: $author_width
            white-space: pre-wrap
            height: initial
