/* Audio Controls Popup */
#audio-controls-popup {
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    /* Improve alignment/spacing */
    padding: 10px 20px !important;
    /* Flexible width */
    width: auto;
    min-width: 280px;
    /* Slight minimum for stability */
    max-width: 90vw;
    /* Prevent overflow on mobile */
    box-sizing: border-box;
}

/* Larger Buttons */
.btn-mini {
    width: 42px;
    /* Increased from 32px */
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: background 0.2s, transform 0.2s;
    font-size: 1.1rem;
    /* Larger icon inside */
}

.btn-mini:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* Range Slider */
#audio-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(100, 100, 100, 0.3);
    border-radius: 4px;
    outline: none;
    flex-grow: 1;
    /* Take available space */
    width: 100px;
    /* Default width */
    min-width: 60px;
    /* Minimum width before breaking layout */
    max-width: 150px;
    margin: 0 10px;
    /* Add spacing around slider */
}

#audio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    /* Increased from 14px */
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 3px solid white;
    /* Thicker border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Close Button Specific */
#audio-close-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.05);
    /* Subtle background */
    border-radius: 50%;
    transition: background 0.2s;
}

#audio-close-btn:hover {
    background: rgba(255, 0, 0, 0.1);
    /* Red tint on hover */
}