.chat {
  height: 100vh;
  width: 300px;
  background-color: rgb(33, 33, 33);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  overflow-x: none;
  overflow-y: auto;
  header {
    height: 56px;
    background-color: rgb(32, 32, 32);
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 15px;
    span {
      font-size: 20px;
    }
    svg {
      font-size: 25px;
      position: absolute;
      right: 15px;
      cursor: pointer;
      border-radius: 100%;
      padding: 10px;
      &:hover {
        background-color: rgb(87, 87, 87);
      }
    }
  }
  .user {
    width: 100%;
    background-color: rgb(70, 70, 70);
    position: relative;
    display: flex;
    align-items: center;
    img {
      width: 40px;
      border-radius: 100%;
      padding: 10px 10px 10px;
    }
    span {
      text-transform: capitalize;
      padding: 0 10px 0;
      font-weight: 600;
    }
    svg {
      font-size: 25px;
      position: absolute;
      right: 10px;
    }
  }
}
