/* Voice Curator Card Styles */
.voice-curator-card {
    position: fixed; /* Changed from absolute - now relative to viewport */
    bottom: 30px;    /* Aligns with settings icon bottom edge */
    left: 50%;
    
    /* Center horizontally and apply scale */
    transform: translateX(-50%) scale(1.75);
    
    /* Crucial: grow upwards from the bottom anchor point */
    transform-origin: bottom center;
    
    display: flex;
    flex-direction: column; /* Stack top and bottom */
    align-items: center;
    gap: 8px;
    
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    width: fit-content;
    min-width: 160px; /* Ensure enough width for buttons */
    transition: opacity 0.3s ease;
    
    z-index: 2147483647; /* Ensure it stays on top of the overlay (z-index ~2147483000) */
    pointer-events: auto;
    
    /* Text styles */
    white-space: nowrap;
}

.voice-curator-card.playing {
    opacity: 1;
}

.voice-curator-card.paused {
    opacity: 0.6;
}

/* Top section: Label and ID */
.voice-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
}

.voice-id-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-weight: 600;
}

.voice-id-value {
    font-size: 13px;
    color: #FBBF24; /* Brand Gold */
    font-family: monospace;
    font-weight: 500;
}

/* Bottom section: Buttons */
.voice-card-bottom {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.voice-rate-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1; /* Equal width */
    text-align: center;
}

.voice-rate-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Active states for selection */
.voice-rate-btn.yes-btn.active {
    background: rgba(16, 185, 129, 0.3); /* Green tint */
    border-color: rgba(16, 185, 129, 0.6);
    color: #34D399;
}

.voice-rate-btn.no-btn.active {
    background: rgba(239, 68, 68, 0.3); /* Red tint */
    border-color: rgba(239, 68, 68, 0.6);
    color: #F87171;
}