html, body {
    height: 100%;  /* Ensure the body takes the full height of the window */
    margin: 0;
    padding: 0;
}

#container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 0;  /* Prevents content overflow in small vertical spaces */
}

#plot-container {
    flex: 1;  /* Allow the graph container to grow and shrink with the window size */
    width: 100%;
    margin: 0 auto;
    min-height: 200px;  /* Set a minimum height to ensure visibility */
}

#audio-chart {
    height: 100%;  /* Make the chart fill the container's height */
    width: 100%;   /* Ensure the chart fills the container's width */
}

#audio-controls {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 50px;  /* Fixed height for the play interface */
    flex-shrink: 0;  /* Prevents shrinking of the controls */
}

#audio-player {
    width: 80%;  /* Increase width for a longer interface */
    max-width: 800px;
    height: 100%;  /* Ensure the player scales to the controls' height */
}