Avatar + Lines

<div class="nuda-avline" aria-hidden="true">
  <span class="nuda-avline__avatar"></span>
  <div class="nuda-avline__body">
    <span style="width:70%"></span>
    <span style="width:90%"></span>
    <span style="width:50%"></span>
  </div>
</div>

/* Avatar + Lines Skeleton
   Avatar circle beside stacked text lines, gently pulsing in opacity.
   Customize: --avline-block */

.nuda-avline {
  --avline-block: rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  width: 100%;
  max-width: 260px;
}

.nuda-avline__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--avline-block);
  animation: nuda-avline-pulse 1.5s ease-in-out infinite;
}

.nuda-avline__body { flex: 1; display: flex; flex-direction: column; gap: 7px; }

.nuda-avline__body span {
  height: 9px;
  border-radius: 4px;
  background: var(--avline-block);
  animation: nuda-avline-pulse 1.5s ease-in-out infinite;
}

.nuda-avline__body span:nth-child(2) { animation-delay: 0.15s; }
.nuda-avline__body span:nth-child(3) { animation-delay: 0.3s; }

@keyframes nuda-avline-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-avline__avatar,
  .nuda-avline__body span { animation: none; opacity: 0.55; }
}