No Messages

<div class="nuda-empmsg">
  <div class="nuda-empmsg__bubbles">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="nuda-empmsg__title">No messages yet</div>
  <div class="nuda-empmsg__sub">Start a conversation</div>
</div>

.nuda-empmsg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  text-align: center;
  width: 100%;
  max-width: 220px;
}

.nuda-empmsg__bubbles {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 10px;
}

.nuda-empmsg__bubbles span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  animation: _empMsgFloat 2.4s ease-in-out infinite;
}

.nuda-empmsg__bubbles span:nth-child(2) {
  width: 32px;
  height: 32px;
  animation-delay: .3s;
  background: rgba(228,255,84,.05);
  border-color: rgba(228,255,84,.2);
}

.nuda-empmsg__bubbles span:nth-child(3) {
  animation-delay: .6s;
}

.nuda-empmsg__title {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
}

.nuda-empmsg__sub {
  color: #a0a0a8;
  font-size: 11px;
  margin-top: 2px;
}

@keyframes _empMsgFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-empmsg__bubbles span {
    animation: none;
  }
}