/* Дополнительно, если 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;
}


#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;
}

#reflection-voice-bar canvas:not(.hidden) { display:block; }
/* растягиваем три колонки бара по высоте, центр — без «бейслайна» */
#reflection-voice-bar > div { align-items: stretch; }
#center-action-reflection > * {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* убирает типографский «хвост» снизу */
}
#center-action-reflection svg,
#center-action-reflection img { display:block; } /* без baseline */




/* 1) Значения из твоего REFLECTION_WAVE_CONFIG */
:root {
  --wave-crest: #accefaff;
  --wave-fill-rgb: 219 234 254;
  --wave-fill-alpha: 0.6;
  --wave-fill-alpha-hover: 0.68;   /* было 0.6 → стало 0.68 на hover */
  --wave-line-width: 2.2px;
}
.dark {
  --wave-crest: #2e57b1ff;
  --wave-fill-rgb: 22 50 92;
  --wave-fill-alpha: 0.6;
  --wave-fill-alpha-hover: 0.64;   /* темнее, но деликатно */
  --wave-line-width: 2.2px;
}

#start-record-btn-reflection {
  background-color: rgb(var(--wave-fill-rgb) / var(--wave-fill-alpha)) !important;
  border: var(--wave-line-width, 2px) solid var(--wave-crest) !important;
  color: var(--wave-crest) !important;
}

#start-record-btn-reflection:hover {
  background-color: rgb(var(--wave-fill-rgb) / var(--wave-fill-alpha-hover)) !important;
  color: var(--wave-crest) !important;
  border-color: var(--wave-crest) !important;
}

#start-record-btn-reflection svg,
#start-record-btn-reflection svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}