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

Try this custom CSS

Workspace -> Settings -> Layout -> Custom CSS

.rcx-message[data-own="true"] {
  justify-self: end;
}
.rcx-message[data-own="true"] * {
  align-self: end;
  margin-bottom: auto;
}
.rcx-message[data-own="true"] .rcx-message-container--left {
  order: 2; 
}