.has-voice-dictation {
  padding-right: 52px !important;
}

.voice-dictation-mic {
  position: fixed;
  z-index: 10050;
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dfc8ef;
  border-radius: 10px;
  background: #f6ebfb;
  color: #7d35a2;
  box-shadow: 0 5px 16px rgba(73, 35, 112, .16);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}

.voice-dictation-mic.is-visible {
  display: inline-flex;
}

.voice-dictation-mic:hover,
.voice-dictation-mic:focus-visible {
  transform: translateY(-1px);
  outline: 3px solid rgba(191, 74, 213, .18);
}

.voice-dictation-mic svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.voice-dictation-mic.is-recording {
  border-color: #ef4966;
  background: #ef4966;
  color: #fff;
  animation: voice-mic-breathe 1.4s ease-in-out infinite;
}

.voice-dictation-panel {
  position: fixed;
  z-index: 10060;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  width: min(680px, calc(100vw - 32px));
  align-items: center;
  gap: 13px;
  padding: 13px 14px 13px 17px;
  border: 1px solid rgba(217, 184, 236, .8);
  border-radius: 18px;
  background: rgba(31, 19, 74, .97);
  color: #fff;
  box-shadow: 0 18px 55px rgba(21, 12, 55, .34);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .2s ease, transform .2s ease;
}

.voice-dictation-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.voice-dictation-pulse {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff536f;
  box-shadow: 0 0 0 0 rgba(255, 83, 111, .55);
  animation: voice-pulse 1.4s ease-out infinite;
}

.voice-dictation-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.voice-dictation-copy b {
  font-size: 14px;
  line-height: 1.25;
}

.voice-dictation-copy span {
  overflow: hidden;
  color: #d8cfec;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-dictation-panel time {
  flex: 0 0 auto;
  min-width: 42px;
  color: #e6dff2;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.voice-dictation-panel button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #e13bd5, #f04c32);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.voice-dictation-panel button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .45);
  outline-offset: 2px;
}

.voice-dictation-toast {
  position: fixed;
  z-index: 10080;
  right: 18px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  max-width: min(430px, calc(100vw - 36px));
  padding: 13px 16px;
  border-radius: 13px;
  background: #24184c;
  color: #fff;
  box-shadow: 0 16px 44px rgba(20, 12, 48, .3);
  font-size: 13px;
  line-height: 1.45;
}

@keyframes voice-pulse {
  70% { box-shadow: 0 0 0 9px rgba(255, 83, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 83, 111, 0); }
}

@keyframes voice-mic-breathe {
  50% { box-shadow: 0 0 0 5px rgba(239, 73, 102, .2), 0 5px 16px rgba(73, 35, 112, .16); }
}

@media (max-width: 640px) {
  .voice-dictation-panel {
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    gap: 9px;
    padding: 11px;
    border-radius: 15px;
  }

  .voice-dictation-copy span {
    max-width: 42vw;
  }

  .voice-dictation-panel time {
    display: none;
  }

  .voice-dictation-panel button {
    min-height: 42px;
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-dictation-mic,
  .voice-dictation-panel,
  .voice-dictation-pulse {
    animation: none !important;
    transition: none !important;
  }
}