/* Дополнительно, если Tailwind не хватает */
#voice-block {
  min-height: 62px;
}
#start-record-btn:active {
  transform: scale(0.96);
}

/* Дополнительно для центрирования кнопок (если Tailwind не справляется) */
#voice-block-reflection {
  position: relative;
}

#voice-block-reflection .absolute {
  position: absolute;
}





.audio-progress-bar, .audio-volume-slider {
  accent-color: #fdfdfd;     
  background: #000000;      
  height: 4px;
  border-radius: 2px;
  border-color: #000000;
}



html.dark .audio-progress-bar,
html.dark .audio-volume-slider {
  accent-color: #020202;
  border-color: #ffffff;
  background: #ffffff;
}




#reflection-arrow {
  transition: transform 0.4s ease;
}

#reflection-list-container {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
}
#reflection-list-container.collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}



#reflection-arrow {
  transition: transform 0.4s ease;
}
#reflection-list-container {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
}
#reflection-list-container.collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }



#reflection-timer-block {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}




#wave-left-canvas, #wave-right-canvas {
  width: 100%;
  height: 60px;
}




@keyframes pulseRingFull {
  0% {
    transform: scale(0.12);
    opacity: 1;
    box-shadow: 0 0 6px #3b82f688;
  }
  70% {
    transform: scale(1.1); /* чуть больше 100%, чтобы волна выходила за границы */
    opacity: 0.38;
    box-shadow: 0 0 50px #3b82f633;
  }
  100% {
    transform: scale(0.12);
    opacity: 1;
    box-shadow: 0 0 6px #3b82f688;
  }
}

.pulsing-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #3b82f6;
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  animation: pulseRingFull 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.dark .pulsing-dot {
  background: #60a5fa;
  box-shadow: 0 0 20px #60a5fa77;
}