/**
 * Chatbot Input - Voice Feedback
 * 
 * Visuelles Feedback während Voice Input mit Wave Animation.
 * 
 * @package SMG_Mall
 * @since 2.1.0
 */

/* ========================================
   Voice Feedback Container
   ======================================== */

.chatbot-input__voice-feedback {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    pointer-events: none;
}

/* ========================================
   Voice Wave Animation
   ======================================== */

.chatbot-input__voice-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.chatbot-input__voice-wave-bar {
    width: 3px;
    height: 100%;
    background: var(--smg-500, var(--color-primary, #e31e24));
    border-radius: 2px;
    animation: waveAnimation 1s ease-in-out infinite;
    transform-origin: center;
}

@keyframes waveAnimation {
    0%, 100% {
        transform: scaleY(0.3);
        opacity: 0.6;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Staggered Animation für Bars */
.chatbot-input__voice-wave-bar:nth-child(1) {
    animation-delay: 0s;
}

.chatbot-input__voice-wave-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.chatbot-input__voice-wave-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.chatbot-input__voice-wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.chatbot-input__voice-wave-bar:nth-child(5) {
    animation-delay: 0.4s;
}

/* ========================================
   Recording State
   ======================================== */

.chatbot-input__voice-feedback--recording .chatbot-input__voice-wave-bar {
    background: var(--smg-500, #ef4444);
}

/* ========================================
   Processing State
   ======================================== */

.chatbot-input__voice-feedback--processing {
    color: #9ca3af;
}

.chatbot-input__voice-feedback--processing .chatbot-input__voice-wave {
    display: none;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 640px) {
    .chatbot-input__voice-feedback {
        left: 16px;
        gap: 8px;
    }
    
    .chatbot-input__voice-wave {
        height: 20px;
        gap: 3px;
    }
    
    .chatbot-input__voice-wave-bar {
        width: 2px;
    }
}

@media (max-width: 375px) {
    .chatbot-input__voice-feedback {
        left: 14px;
    }
    
    .chatbot-input__voice-wave {
        height: 18px;
    }
}