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;
}

under version 4.0.1.

it looks like this:

Looks good! Nice work!

Wow!!!! I m going to test!!!!

Not bad!!! How can i check .message .rcx-box to hide .body and fix the empty color line.
Аnd also move attachments from the header line.

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.