.wave-canvas-row {
      container-type: size;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      width: 100%;
      max-width: 980px;
      padding-right: 0.5rem;
      box-sizing: border-box;
      flex-wrap: nowrap;
    }

.wave-canvas-wrapper { 
  position: relative;      /* контейнер для слоёв */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
 /* background: #6ff06a;*/
  border: 0px;
  padding: 0;    
  height:100%;
}

/* общий стиль для всех canvases внутри */
.wave-canvas-wrapper canvas {
  position: absolute;
  min-height: 0;  
  top: 0;
  left: 0;
  width: 100%;             /* ширина по контейнеру */
  height: auto;       /*     высота общая от wrapper */
  background: transparent; /* фон только у base-слоя */
  border-radius: 0;
  border: 0;
  padding: 0;   
}

/* только основной canvas может принимать события */
#waveCanvas,
#sampleCanvas,
#micCanvas
 {
  pointer-events: auto;    /* клики сюда */
  background: #020617;     /* фон только здесь */
  z-index: 1;              /* самый нижний слой */
}

/* шкала времени поверх волны */
#waveCanvasScale,
#sampleCanvasScale,
#micCanvasScale
 {
  pointer-events: none;    /* клики проходят к waveCanvas */
  z-index: 2;

}

/* дисплей/подсветка/бегунок поверх всего */
#waveCanvasOverlay ,
#sampleCanvasOverlay ,
#micCanvasOverlay 
{
  pointer-events: none;
  z-index: 3;

}

.wave-canvas-wrapper.dragover {
    border: 1px;
    border-style: solid;
    border-color: #4caf50;
    background: #f1fff1;
  }

.wave-canvas-wrapper::-webkit-scrollbar {
  height: 12px;
}

.wave-canvas-wrapper::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 999px;
}

.wave-canvas-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  border-radius: 999px;
}

    .v-slider {
      width: 60px;
      height: 100%;
      min-height: 0px;
      display: flex;
      flex-direction: column;
      justify-content: start;
      justify-items: start;
      align-items: center;
      padding-top: 8px;
      padding-bottom: 20px;
      border-radius: 0px;
      background: #0b1220;
      border: 0px solid #1f2937;
      box-sizing: border-box;
      gap: 5px;
      flex: 0 0 60px;
    }

    @container (max-height: 150px) {
      .v-slider-icon
      {
        display: none;
      }
    }    

    @container (max-height: 100px) {
      #sampleVolume,
      #micVolume
      {
        display: none;
      }
    }    

    


    .v-slider-icon {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      color: #7a7b7c;
      justify-content: center;   
      flex: 0 0 24px;         
    }

    .v-slider-track {
      flex: 1 1 auto;
      width: 15px;
      display: flex;
      align-items: start;
      justify-content: center;
      padding-top: 0px;
      height: 0;
    }

    .v-slider-input {
      -webkit-appearance:none;
      appearance:none;
      writing-mode: sideways-lr;
      width: 15px;
      min-height: 20px;
      height: 100%;
      background-color: #1d3055;
      border-radius: 3px;
       margin: 0;
      cursor: pointer;
      overflow: hidden; 
      flex: 1 1 15px;
    }
  
.v-slider-input::-webkit-slider-thumb {
  width: 15px;
  height: 25px;
  background-color: #456fc4;
  appearance: none;

}
.v-slider-input::-moz-range-thumb {
  width: 15px;
  height: 25px;
  background-color: #456fc4;
  appearance: none;
  border: 0;
  border-radius: 0;
}

    .v-tool {
      width: fit-content; 
      height: 100%;
      min-height: 0;
      align-self: stretch;      
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      padding-left: 10px;
      padding-right: 5px;
      padding-top: 15px;
      padding-bottom: 10px;
      border-radius: 0px;
      background: #0b1220;
      border: 0px solid #1f2937;
      box-sizing: border-box;
      gap: 8px;
      flex: 0 0 auto;
    }

#sampleSection,
#micSection
{
  height: clamp(150px, 30vh, 500px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Верхняя плашка всегда сверху */
#sampleSection .fileInfo-container {
  flex: 0 0 auto;
  z-index: 1;
}

/* Панель волнограммы растягивается, но сама не скроллит */
#sampleSection .wave-row.row-1 ,
#micSection .wave-row.row-1 
{
  flex: 0 0 auto;
  overflow: hidden;
}

/* Контейнер под канвасы и инструменты занимает всю доступную высоту */
#sampleSection .wave-canvas-row.row-4,
#micSection .wave-canvas-row.row-4
{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Если нужно избежать вертикального скролла у родителя, а дать его детям */