.gaia-voice-input-shell {
  position: relative;
  display: block;
  width: 100%;
}

.gaia-voice-input-shell > input,
.gaia-voice-input-shell > textarea,
.gaia-voice-input-shell > [contenteditable="true"] {
  width: 100%;
  padding-right: 52px !important;
}

.gaia-field-mic {
  position: absolute;
  z-index: 8;
  right: 8px;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 138, 71, .34);
  border-radius: 12px;
  background: rgba(255, 253, 249, .94);
  color: #7e5b25;
  box-shadow: 0 7px 20px rgba(28, 24, 17, .09);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.gaia-voice-input-shell.is-textarea .gaia-field-mic {
  top: 10px;
  transform: none;
}

.gaia-field-mic:hover {
  transform: translateY(-50%) scale(1.04);
  background: #171a1d;
  color: #fff;
  box-shadow: 0 10px 28px rgba(23, 26, 29, .19);
}

.gaia-voice-input-shell.is-textarea .gaia-field-mic:hover {
  transform: scale(1.04);
}

.gaia-field-mic svg {
  width: 17px;
  height: 17px;
  pointer-events: none;
}

.gaia-field-mic.is-recording {
  background: #9a3932;
  border-color: #9a3932;
  color: #fff;
  animation: gaiaFieldVoicePulse 1.25s infinite;
}

.gaia-field-mic.is-processing {
  background: #171a1d;
  border-color: #171a1d;
  color: #d8bd88;
}

.gaia-field-mic.is-processing svg {
  animation: gaiaFieldVoiceSpin .9s linear infinite;
}

.gaia-field-mic.is-done {
  background: #315f4a;
  border-color: #315f4a;
  color: #fff;
}

.gaia-voice-updated {
  outline: 3px solid rgba(49, 95, 74, .14) !important;
  border-color: #5b8b73 !important;
}

.expert-vote-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.gaia-expert-voice-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(180, 138, 71, .42);
  border-radius: 13px;
  background: #171a1d;
  color: #fff;
  font: 750 12px/1.2 inherit;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(23, 26, 29, .15);
}

.gaia-expert-voice-button svg {
  width: 17px;
  height: 17px;
  color: #d8bd88;
}

.gaia-expert-voice-button.is-recording {
  background: #9a3932;
  border-color: #9a3932;
  animation: gaiaFieldVoicePulse 1.25s infinite;
}

.gaia-expert-voice-button.is-processing {
  opacity: .82;
  cursor: wait;
}

.gaia-expert-voice-state {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #cfe0d5;
  border-radius: 12px;
  background: #eff7f2;
  color: #315f4a;
  font-size: 12px;
  line-height: 1.45;
}

.gaia-expert-voice-state.visible {
  display: block;
}

@keyframes gaiaFieldVoicePulse {
  0% { box-shadow: 0 0 0 0 rgba(154, 57, 50, .35); }
  70% { box-shadow: 0 0 0 11px rgba(154, 57, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 57, 50, 0); }
}

@keyframes gaiaFieldVoiceSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .gaia-field-mic {
    width: 42px;
    height: 42px;
    right: 6px;
  }

  .gaia-voice-input-shell > input,
  .gaia-voice-input-shell > textarea,
  .gaia-voice-input-shell > [contenteditable="true"] {
    padding-right: 58px !important;
  }

  .expert-vote-head-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .gaia-expert-voice-button {
    width: 100%;
    justify-content: center;
  }
}