.hmp-voice-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, .28));
  border-radius: 14px;
  background: var(--card-bg, rgba(15, 23, 42, .72));
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hmp-voice-indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .14);
}

.hmp-voice-mic {
  position: relative;
  z-index: 2;
  font-size: 21px;
  line-height: 1;
}

.hmp-voice-wave {
  position: absolute;
  inset: auto -2px -7px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
  height: 14px;
  opacity: 0;
}

.hmp-voice-wave i {
  display: block;
  width: 3px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.hmp-voice-copy {
  min-width: 0;
}

.hmp-voice-copy strong,
.hmp-voice-copy small {
  display: block;
}

.hmp-voice-copy small {
  margin-top: 3px;
  color: var(--muted-color, #94a3b8);
  line-height: 1.35;
}

.hmp-voice-cancel {
  white-space: nowrap;
}

.hmp-voice-status[data-voice-state="LISTENING"],
.hmp-voice-status[data-voice-state="SPEECH_DETECTED"] {
  border-color: rgba(34, 197, 94, .75);
  background: rgba(22, 101, 52, .16);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .08);
}

.hmp-voice-status[data-voice-state="LISTENING"] .hmp-voice-indicator,
.hmp-voice-status[data-voice-state="SPEECH_DETECTED"] .hmp-voice-indicator {
  animation: hmp-voice-pulse 1.35s ease-in-out infinite;
}

.hmp-voice-status[data-voice-state="LISTENING"] .hmp-voice-wave,
.hmp-voice-status[data-voice-state="SPEECH_DETECTED"] .hmp-voice-wave,
.hmp-voice-status[data-voice-state="TRANSCRIBING"] .hmp-voice-wave,
.hmp-voice-status[data-voice-state="DRAFTING"] .hmp-voice-wave {
  opacity: 1;
}

.hmp-voice-status[data-voice-state="LISTENING"] .hmp-voice-wave i,
.hmp-voice-status[data-voice-state="SPEECH_DETECTED"] .hmp-voice-wave i,
.hmp-voice-status[data-voice-state="TRANSCRIBING"] .hmp-voice-wave i,
.hmp-voice-status[data-voice-state="DRAFTING"] .hmp-voice-wave i {
  animation: hmp-voice-wave .75s ease-in-out infinite alternate;
}

.hmp-voice-wave i:nth-child(2) { animation-delay: .1s !important; }
.hmp-voice-wave i:nth-child(3) { animation-delay: .2s !important; }
.hmp-voice-wave i:nth-child(4) { animation-delay: .3s !important; }
.hmp-voice-wave i:nth-child(5) { animation-delay: .4s !important; }

.hmp-voice-status[data-voice-state="TRANSCRIBING"],
.hmp-voice-status[data-voice-state="DRAFTING"] {
  border-color: rgba(59, 130, 246, .65);
  background: rgba(30, 64, 175, .14);
}

.hmp-voice-status[data-voice-state="DRAFT_READY"] {
  border-color: rgba(16, 185, 129, .7);
  background: rgba(5, 150, 105, .14);
}

.hmp-voice-status[data-voice-state="ERROR"] {
  border-color: rgba(239, 68, 68, .72);
  background: rgba(127, 29, 29, .18);
}

button[data-listening="true"] {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

@keyframes hmp-voice-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, .28); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}

@keyframes hmp-voice-wave {
  from { height: 4px; }
  to { height: 13px; }
}

@media (max-width: 520px) {
  .hmp-voice-status {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hmp-voice-cancel {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmp-voice-status,
  .hmp-voice-indicator,
  .hmp-voice-wave i {
    animation: none !important;
    transition: none !important;
  }
}