/* Escurece/desabilita o resto enquanto dita */
.input-area.dictation-mode > *:not(.dictation-overlay) {
  pointer-events: none;
  opacity: 0.3;
}

/* Overlay: ocupa toda a input-area, mas fica escondido por padrão */
.dictation-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius);
  z-index: 10;

  /* começa invisível */
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;

  /* layout interno (visualizer central e botões no rodapé) */
  display: flex; /* só efetivo quando visível */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Mostrar overlay só no modo ditado */
.input-area.dictation-mode .dictation-overlay {
  display: flex;
  pointer-events: auto;
  opacity: 1;
}