/* Área visual de ditado (contém faixa branca + preta sobreposta) */
.dictation-visualizer {
  position: relative;
  width: 100%;
  height: 48px;           /* altura menor para ficar mais baixo */
  margin-bottom: 70px;     /* aproxima da base da input-area */
  display: flex;
  justify-content: center;
  align-items: flex-end;  /* alinha na base do container */
  overflow: hidden;
}

/* Container para as faixas de pontos */
.dot-wrapper {
  top: -3px;
  position: relative;
  width: 100%;
  height: 30px; /* ou maior, se quiser ondas maiores */
}

/* Faixa das bolinhas brancas (fundo fixo) */
.dot-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Faixa das bolinhas pretas (geradas via JS e animadas) */
.dot-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* Cada bolinha preta */
.dot.black {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 25%;
  opacity: 1; /* Deixe opaco */
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.1s ease;
  transform-origin: center center;
}

/* Bolinhas brancas */
.dot.white {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: #d1d1d1;
  border-radius: 25%;
  opacity: 1;
  top: 50%;
  z-index: 1;
  transform-origin: center center;
}