/* v001 volvu.css - Minimal volume calibration styling */

.volvu-hidden { display: none !important; }

#volvu-dialog {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); display: flex; align-items: center;
    justify-content: center; z-index: 10000;
}

.volvu-content {
    background: white; border: 2px solid #4CAF50; border-radius: 8px;
    padding: 20px; min-width: 400px; text-align: center; color: #333;
}

.volvu-content h3 { margin: 0 0 10px 0; color: #4CAF50; }
.volvu-content p { margin: 10px 0; line-height: 1.4; }
.volvu-content strong { color: #2196F3; }

#volvu-meter {
    display: flex; justify-content: center; gap: 2px; margin: 15px 0;
    height: 50px; align-items: flex-end; background: #f5f5f5;
    padding: 8px; border-radius: 4px; border: 1px solid #ddd;
}

.vu-cell {
    width: 18px; height: 100%; border: 1px solid #333; border-radius: 2px;
    background: #000; transition: background 0.05s;
}

.vu-quiet { background: #666; }
.vu-good { background: #ffeb3b; }
.vu-hot { background: #f44336; }
.vu-clip { background: #00ff00; animation: flash 0.1s infinite; }

@keyframes flash { 0%, 100% { background: #00ff00; } 50% { background: #fff; } }

.volvu-controls {
    margin: 15px 0; padding: 10px; background: #f0f0f0; border-radius: 4px;
}

.volvu-controls label {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin-bottom: 10px; font-weight: bold;
}

.volvu-controls input[type="range"] {
    width: 120px; height: 18px; background: #ddd; border-radius: 9px;
    outline: none; cursor: pointer;
}

.volvu-controls input[type="range"]::-webkit-slider-thumb {
    appearance: none; width: 16px; height: 16px; background: #4CAF50;
    border-radius: 50%; cursor: pointer;
}

#gain-display { color: #4CAF50; font-weight: bold; min-width: 35px; }

.volvu-buttons {
    display: flex; gap: 8px; justify-content: center; margin: 15px 0;
}

.volvu-buttons button {
    padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer;
    font-size: 13px; font-weight: bold; transition: all 0.2s;
}

.volvu-buttons button:disabled { opacity: 0.5; cursor: not-allowed; }

#start-test, #finish { background: #4CAF50; color: white; }
#start-test:hover:not(:disabled), #finish:hover:not(:disabled) { background: #45a049; }

#auto-gain { background: #2196F3; color: white; }
#auto-gain:hover { background: #1976D2; }

#cancel { background: #f44336; color: white; }
#cancel:hover { background: #da190b; }

#status {
    font-size: 11px; min-height: 15px; color: #666; margin-top: 10px;
}

@media (max-width: 500px) {
    .volvu-content { min-width: 90vw; padding: 15px; }
    #volvu-meter { height: 40px; }
    .vu-cell { width: 14px; }
    .volvu-buttons { flex-direction: column; align-items: center; }
    .volvu-buttons button { width: 80%; padding: 14px; font-size: 16px; }
    .volvu-controls input[type="range"] {
        width: 80%; height: 36px;
    }
    .volvu-controls input[type="range"]::-webkit-slider-thumb {
        width: 32px; height: 32px;
    }
}