/* Gemeinsame Mikrofonsteuerung: direkt im Textfeld statt als Zusatzzeile. */
.diktat-field-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.diktat-field-wrap > textarea,
.diktat-field-wrap > input[type="text"],
.diktat-field-wrap > input[type="search"],
.diktat-field-wrap > input[type="email"],
.diktat-field-wrap > input[type="url"] {
  width: 100%;
  padding-right: 2.8rem !important;
}

.diktat-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0.42rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #9ea3b2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.diktat-button:hover:not(:disabled),
.diktat-button:focus-visible {
  border-color: var(--gold, #d6aa46);
  background: color-mix(in srgb, var(--gold, #d6aa46) 16%, transparent);
  color: var(--gold2, #e1c870);
}

.diktat-button[data-diktat-status="recording"] {
  border-color: #ef7a68;
  background: color-mix(in srgb, #ef7a68 18%, transparent);
}

.diktat-button[data-diktat-status="working"] {
  cursor: wait;
  opacity: 0.75;
}

.diktat-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.diktat-status {
  display: block;
  min-height: 0;
  margin: 0.22rem 0 0.45rem;
  color: var(--muted, #9ea3b2);
  font-size: 0.78rem;
}

.diktat-status:empty {
  display: none;
}

.diktat-status[data-diktat-status="error"] {
  color: #ef9b8d;
}

.diktat-status[data-diktat-status="success"] {
  color: #9ed3ad;
}

/* Sichtbare Rückmeldung während der Aufnahme: Pegel-Waveform + Zeit. */
.diktat-live {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 1.7rem;
  margin: 0.25rem 0.5rem 0.15rem 0;
  padding: 0.25rem 0.55rem 0.25rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--gold, #d6aa46) 55%, transparent);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--gold, #d6aa46) 8%, transparent);
  color: var(--off, #f5f2ea);
  vertical-align: middle;
  font-size: 0.72rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.diktat-live[data-diktat-state="working"] {
  border-color: color-mix(in srgb, var(--gold, #d6aa46) 35%, transparent);
  opacity: 0.8;
}

.diktat-live-dot {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ef7a68;
  box-shadow: 0 0 0 0 rgba(239,122,104,.5);
}

.diktat-live[data-diktat-state="recording"] .diktat-live-dot {
  animation: diktat-pulse 1.25s ease-out infinite;
}

.diktat-live-label {
  color: var(--muted, #9ea3b2);
  white-space: nowrap;
}

.diktat-live-time {
  min-width: 2.65rem;
  color: var(--gold2, #e1c870);
  font-weight: 700;
}

.diktat-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 4.25rem;
  height: 1.1rem;
}

.diktat-wave-bar {
  display: block;
  width: 3px;
  height: 100%;
  min-height: 3px;
  border-radius: 3px;
  background: var(--gold2, #e1c870);
  transform: scaleY(var(--level, .22));
  transform-origin: center;
  transition: transform 90ms ease;
}

.diktat-live[data-meter="fallback"] .diktat-wave-bar {
  animation: diktat-wave 1.05s ease-in-out var(--delay, 0ms) infinite alternate;
}

.diktat-live[data-diktat-state="working"] .diktat-wave-bar {
  animation-play-state: paused;
  opacity: .6;
}

@keyframes diktat-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,122,104,.52); }
  70% { box-shadow: 0 0 0 .38rem rgba(239,122,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,122,104,0); }
}

@keyframes diktat-wave {
  0% { transform: scaleY(.18); }
  45% { transform: scaleY(.72); }
  100% { transform: scaleY(.32); }
}

@media (prefers-reduced-motion: reduce) {
  .diktat-live[data-diktat-state="recording"] .diktat-live-dot,
  .diktat-live[data-meter="fallback"] .diktat-wave-bar { animation: none; }
}