Different color and alignment for sent versus received messages (Chat Bubbles UX)

rocket.chat-message-custom.css

.messages-box ul {
  background-color: #F5F5F2;
}
.message {
  display: flex;
}
.message:hover {
  background-color:transparent;
}
.message .message-body-wrapper {
  margin-right: 10px;
  max-width: 70%;
}
.message.own {
  flex-direction: row-reverse;
}
.message.own .thumb {
  left: auto;
  right: 16px;
}
.message.own .message-body-wrapper .title {
  flex-direction: row-reverse;
}
.message .message-body-wrapper .body {
  background-color: #fff;
  padding: 6px;
  border: 1px solid #E7E7E5;
  border-radius: 1px;
}
.message .message-body-wrapper .body:hover {
  background-color: #F6F6F3;
}

.message.own .message-body-wrapper .body {
  background-color: #60E171;
}
.message.system.uj {
  justify-content: center;
}
.message.system.uj .thumb {
  visibility: hidden;
}
.message .message-body-wrapper .title .message-alias {
  display: none;
}

Where to place the file in order to benefit from the styling?

Looks good, but how it works in 6.2.* versions? Any luck?

@andys448 It didn't work in 6.2.*. At least it points out a great possibility to change the layout. I dig into the css code using chrome inspector, hardly find any clue on differentiating 'own-message' vs 'other user message'. it's all unfied under rc-box css tags.

Hello!

Would it be possible to make it work from version >6.7.*?

I would really like to have a skype/messenger/viber style chat.