VulpesOS/gaia/apps/sms/views/conversation/style/message.css

.message.incoming {
  padding-inline-start: 1.5rem;
  padding-inline-end: 4rem;
}

.message.outgoing {
  padding-inline-start: 4rem;
  padding-inline-end: 1.5rem;
}

.message .bubble {
  box-sizing: border-box;
  height: 100%;
  max-width: 100%;
  padding: 1rem 1.5rem;
  overflow: visible;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.bubble .message-content-body:focus {
  -moz-user-select: text;
}

.message.outgoing .bubble {
  background: #fff;
}
html[dir="ltr"] .message.outgoing .bubble {
  float: right;
  border-radius: 1.5rem 0 1.5rem 1.5rem;
}
html[dir="rtl"] .message.outgoing .bubble {
  float: left;
  border-radius: 0 1.5rem 1.5rem 1.5rem;
}


.message.outgoing .bubble,
.message.outgoing a:active {
  color: #333;
}

.message.incoming .bubble {
  background: #39c3c2;
}
html[dir="ltr"] .message.incoming .bubble {
  float: left;
  border-radius: 0 1.5rem 1.5rem 1.5rem;
}
html[dir="rtl"] .message.incoming .bubble {
  float: right;
  border-radius: 1.5rem 0 1.5rem 1.5rem;
}

.message.incoming .bubble,
.message.incoming a:active {
  color: #fff;
}

.message p.message-content-body {
  white-space: pre-wrap;

  outline: none;
}

/* BB overrides */
.message.outgoing p:first-of-type:last-of-type,
.message.incoming p:first-of-type:last-of-type {
  padding-top: 0.5rem;

  line-height: 2rem;
}

.message.incoming p:first-of-type {
  color: #fff;
}

.message.sending p:first-of-type {
  color: #6e6e6e;
}

/* End of BB overrides */

.outgoing.error .bubble {
  background: #fae1df;
}

.incoming.error .bubble {
  background: #ff9898;
}

.message.sending .bubble,
.message.sending a,
.message.sending a:active {
  color: #6e6e6e;
}

.message.sending .message-subject,
.message.sending .message-content-body {
  opacity: 0.5;
}

/* Message Subject */
.message .message-subject {
  display: none;

  margin-bottom: 1rem;

  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.7rem;

  unicode-bidi: -moz-plaintext;
}

.message.has-subject .message-subject {
  display: block;
}

/* Message content styles */
.message-content a {
  color: #004eff;
  text-decoration: underline;
}

.message-content > p {
  unicode-bidi: -moz-plaintext;
}

.message-details {
  display: flex;

  margin-top: 0.5rem;

  font-size: 1.4rem;
  line-height: 2rem;
}

.message.sending time,
.message.sending .message-sim-information {
  display: none;
}

.message.outgoing .message-details {
  color: #858585;
}

.message.outgoing.error .message-details {
  color: #e97f79;
}

.message.incoming .message-details {
  color: #d1eeee;
}

.message.incoming .late-arrival-notice {
  color: #026a69;
}

.message.incoming .late-arrival-icon {
  margin-inline-start: 1rem;
  margin-inline-end: 0.1rem;
  min-width: 1.5rem;
  height: 2rem;

  background: no-repeat center center / 1.5rem;
  background-image: url('images/icons/late_clock.png');
}

.message.incoming.error .message-details {
  color: #ffe0dc;
}

.message-sim-information {
  margin-inline-end: 0.4rem;
}

.message-sim-information::after {
  content: ' ‧ ';
}

/* Message status aside panel */
.message .message-status {
  height: 2rem;
  min-width: 3rem;

  background: no-repeat center center / 1.6rem;
  font-size: 1.4rem;
}

.message.error .message-status {
  background-image: url('images/icons/exclamation.png');
}

.message.delivered .message-status {
  background-image: url('images/icons/deliveredtick.png');
}

.message.read .message-status {
  background-image: url('images/icons/message_read.png');
}

.message.pending .message-status,
.message.sending .message-status {
  background: none;
}


/* Message download button */
.message .download {
  display: block;

  min-height: initial;
  width: auto;
  padding: 0;
  /* Eliminating container paragraph line-height */
  margin: -1.5rem 0 0;

  background: none;
  color: #fff;
  border: none;
  /* We're using border-bottom instead of just underline style as line is too
     close to the text and doesn't look similar to visual spec. */
  border-bottom: 1px solid #fff;
}

.message .download:active {
  opacity: 0.85;
}

/* hide download button via css on expired messages */
.message.expired .download {
  display: none;
}

.message.pending .download {
  border-color: transparent;
  opacity: 0.8;
}