body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.avatar { background: hsl(var(--h) 70% 45%); color: #fff; }
.cover-audio { background: radial-gradient(circle at 30% 20%, hsl(var(--h) 80% 55%), hsl(calc(var(--h) + 60) 70% 25%) 70%); }

/* Ecualizador animado (audio / voz) */
.eq { display: flex; gap: 5px; align-items: flex-end; height: 44px; }
.eq i { width: 6px; background: rgba(255,255,255,.85); border-radius: 3px; animation: eq 1.1s ease-in-out infinite; height: 20%; }
.eq i:nth-child(2) { animation-delay: .15s } .eq i:nth-child(3) { animation-delay: .3s }
.eq i:nth-child(4) { animation-delay: .45s } .eq i:nth-child(5) { animation-delay: .6s }
.eq.paused i { animation-play-state: paused; }
@keyframes eq { 0%,100% { height: 20% } 50% { height: 100% } }

/* Transcripción */
.cue { cursor: pointer; padding: .5rem .75rem; border-radius: .75rem; transition: background .2s; }
.cue:hover { background: rgba(255,255,255,.06); }
.cue.active { background: rgba(236,72,153,.18); color: #fff; }
.cue .t { color: #f472b6; font-variant-numeric: tabular-nums; font-size: .75rem; margin-right: .5rem; }

/* Grabadora de voz */
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25 } }

input[type=file]::file-selector-button { background: #2a2a40; color: #fff; border: 0; padding: .5rem .9rem; border-radius: .6rem; margin-right: .8rem; cursor: pointer; }