:root {
  --chat-gray:   #E9E9EB;
}



.msg {
  padding: 0.15em 0.9em;
  margin-left: 2.8em;
  border-radius: 1.2em;
  font-size: 0.9em;
  position: relative;
  word-wrap: break-word;
  padding-top: var(--padtop, 0.15em);
}

.msg::before {
  content: var(--name);
  position: absolute;
  font-weight: bold;
  margin-top: 0.5em;
  top: -0.9em;
}


.msg::after {
   content: "";

    position: absolute;
    left: -2.1em;
    top: 0.8em;
    transform: translateY(-50%);

    width: 2.8em;
    height: 2.8em;

    background: var(--avatar) center / cover no-repeat;
}


/* Fragment animation */

.reveal .slides section .fragment.msg {
  opacity: 0;
  visibility: visible;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.reveal .slides section .fragment.msg.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.message-typing-indicator {
  display: inline-block;
}
.message-typing-indicator::before {
  content: attr(name);
}

/* When typing: show indicator, hide text */
.is-typing .message-typing-indicator { display: flex; }

/* After text is revealed */
.is-typing.text-revealed .message-typing-indicator { display: none; }