.transcribe-voice-container {
    padding: 1rem;
}

/* Wrapper voor alle voice controls */
.voice-controls-wrapper {
    display: flex;
    align-items: center;
}

/* Recording controls - knop en visualizer naast elkaar */
.recording-controls {
    display: flex;
    align-items: center;
    gap: 12px; /* Ruimte tussen knop en visualizer */
}

.voice-transcribe-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    min-width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.voice-transcribe-icon i,
.voice-transcribe-icon .spinner-border {
    font-size: 1rem;
}

.btn-record {
    min-width: 150px;
    position: relative;
    padding-right: 2.5rem;
}

.btn-record.recording {
    animation: pulse 1.5s infinite;
}

/* Transcribing button styling */
.btn-record.transcribing {
    cursor: not-allowed;
    padding-right: 0.75rem; /* Normale padding, geen extra ruimte */
}

.recording-indicator {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    animation: blink 1s infinite;
}

/* Audio Visualizer - inline naast knop */
.audio-visualizer-inline canvas {
    background: #ffffff;
    border: none;
    border-radius: 0.25rem;
    box-shadow: none;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.transcript-text {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    min-height: 60px;
    white-space: pre-wrap;
}