.speech-input-shell {
  position: relative;
  width: 100%;
}

.speech-input-shell > textarea,
.speech-input-shell > input {
  width: 100%;
}

.speech-input-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .45rem;
  border: 1px solid #1f7066;
  border-radius: 5px;
  padding: .55rem .7rem;
  background: #fff;
  color: #185c54;
  font: 700 .86rem/1.15 system-ui, sans-serif;
  cursor: pointer;
}

.speech-input-button:hover,
.speech-input-button:focus-visible {
  background: #edf7f5;
}

.speech-input-button:focus-visible,
.speech-input-controls button:focus-visible {
  outline: 3px solid #f0b35b;
  outline-offset: 2px;
}

.speech-input-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.speech-input-button[aria-pressed="true"] {
  border-color: #96372c;
  background: #96372c;
  color: #fff;
}

.speech-input-shell[data-speech-state="listening"] .speech-input-button svg,
.speech-input-shell[data-speech-state="hearing"] .speech-input-button svg {
  animation: speech-accessibility-pulse 1.25s ease-in-out infinite;
}

.speech-input-feedback {
  margin-top: .5rem;
  padding: .65rem .75rem;
  border: 1px solid #d7e0dd;
  border-radius: 5px;
  background: #f7faf9;
}

.speech-input-meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6e3;
}

.speech-input-meter::after {
  content: "";
  display: block;
  width: var(--speech-level, 0%);
  height: 100%;
  border-radius: inherit;
  background: #1f7066;
  transition: width 80ms linear;
}

.speech-input-shell[data-speech-state="hearing"] .speech-input-meter::after {
  background: #b66d19;
}

.speech-input-preview {
  min-height: 1.15rem;
  margin-top: .4rem;
  color: #344d47;
  font-size: .82rem;
  font-style: italic;
}

.speech-input-preview:not(:empty)::before {
  content: "Hearing: \201C";
  font-style: normal;
  font-weight: 700;
}

html[lang="es"] .speech-input-preview:not(:empty)::before {
  content: "Escuchando: \201C";
}

.speech-input-preview:not(:empty)::after {
  content: "\201D";
}

.speech-input-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}

.speech-input-controls button {
  border: 1px solid #788f89;
  border-radius: 4px;
  padding: .42rem .58rem;
  background: #fff;
  color: #163f3f;
  font: 700 .76rem/1.1 system-ui, sans-serif;
  cursor: pointer;
}

.speech-input-controls button:disabled {
  cursor: default;
  opacity: .45;
}

.speech-input-status {
  min-height: 1.2rem;
  margin-top: .35rem;
  color: #526862;
  font-size: .8rem;
}

.speech-input-status.is-error {
  color: #8b2f25;
}

.speech-input-unsupported {
  margin-bottom: .5rem;
}

@keyframes speech-accessibility-pulse {
  50% { transform: scale(1.16); }
}

@media (max-width: 640px) {
  .speech-input-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speech-input-button svg {
    animation: none !important;
  }

  .speech-input-meter::after {
    transition: none;
  }
}