/* Override voxcpm.css to show reference audio section by default */
#reference-audio-section {
    display: block !important;
    margin-bottom: 25px;
    position: relative;
    z-index: 10; /* Ensure autocomplete dropdown floats on top of subsequent cards */
}

/* Override antispoof.css waveform0 height to match cloned audio waveform */
#waveform0 {
    height: clamp(100px, 12vw, 180px) !important;
    min-height: unset !important;
}

/* Hide all audio control buttons initially in reference audio section */
#audio-controls-row0 {
    display: none !important;
}

/* Show buttons when waveform is visible using class-based approach */
#audio-entry0.show-controls #audio-controls-row0 {
    display: flex !important;
}

/* Always hide import and record buttons in reference audio section */
#audio-entry0.show-controls #import-button0,
#audio-entry0.show-controls #record-button0 {
    display: none !important;
}

.autocomplete-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 10px auto;
}

#speaker-search {
    background: rgba(8, 9, 15, 0.95);
    border: 2px solid rgba(0, 229, 255, 0.35);
    color: #e0e3e7;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    padding: 10px 14px;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#speaker-search:focus {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    outline: none;
}

#speaker-search::placeholder {
    color: #666d7a;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(8, 9, 15, 0.98);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 0 0 8px 8px;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}

.autocomplete-list.visible {
    display: block;
}

.autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    color: #e0e3e7;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(11px, 1.1vw, 13px);
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    transition: background 0.15s ease;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
}

.autocomplete-no-results {
    padding: 10px 14px;
    color: #888;
    font-style: italic;
    font-size: clamp(11px, 1.1vw, 13px);
}

.sample-dropdown {
    max-width: 400px;
    width: 100%;
    margin: 4px auto 0 auto;
    background: rgba(8, 9, 15, 0.95);
    border: 2px solid rgba(0, 229, 255, 0.35);
    color: #e0e3e7;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    padding: 10px 14px;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sample-dropdown:focus {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    outline: none;
}

.sample-dropdown option {
    background: rgba(8, 9, 15, 0.98);
    color: #e0e3e7;
    padding: 8px 12px;
}

.speaker-image-container {
    margin: 15px auto 0 auto;
    max-width: 200px;
    text-align: center;
    display: none;
}

.speaker-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.results-section-hidden {
    display: none;
}

/* Remove the glowing outer border and shadow of the gauge background circle to prevent it from clashing with the titles */
#reference-verification-section .gauge-background-circle,
#verification-results-section .gauge-background-circle {
    border: none !important;
    box-shadow: none !important;
}