.mini-mark {
  display: grid;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 3px solid #1559f5;
  border-radius: 11px 11px 11px 7px;
  color: #1559f5;
  background: #fff;
  font: 900 24px/1 Archivo, Arial, sans-serif;
}

.mini-mark.small {
  flex-basis: 29px;
  width: 29px;
  height: 29px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 17px;
}

.closing-card > .closing-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-width: 5px;
  border-radius: 20px;
  font-size: 46px;
}

.demo-conversation .message {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 13px;
  color: #071f54;
  background: #fff;
  box-shadow: 0 2px 10px rgba(7, 31, 84, .07);
  white-space: pre-wrap;
}

.demo-conversation .message.outgoing { justify-self: end; background: #dff8e8; }
.demo-conversation .message.incoming { justify-self: start; }
.demo-conversation .message.typing { color: #51627f; font-size: 14px; }