.chat {
  display: flex;
  position: relative;
}

.left,
.right {
  overflow: hidden;
}


@include media-mobile {

  .left {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    right: -100%;
    transition: all .25s ease;

    &.fullWidth {
      right: 0;
      transition: all .25s ease;
    }
  }

  :global(.resize) {

    .left {
      display: none;

      &.fullWidth {
        display: block;
      }
    }
  }

  .right {
    flex: 1;
  }
}

@include media-tablet-portrait {

  .left {
    width: 80px;
    height: 100%;
    position: absolute;
    z-index: 1;
    transition: all .25s ease;

    &.fullWidth {
      width: 100%;
    }
  }

  .right {
    flex: 1;
    margin-left: 80px;
  }
}

@include media-tablet-landscape-and-higher {

  .left {
    flex: .5;
  }

  .right {
    flex: 1;
  }
}