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