/**
 * Ordering Assistant - Additional Styles
 */

/* Streaming message indicator (pulsing cursor) */
.message-bubble.assistant-message.streaming p::after {
    content: '▋';
    animation: blink 1s infinite;
    margin-left: 2px;
    opacity: 0.7;
}

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

/* Recording indicator on mic button */
.mic-btn.listening {
    background-color: #ef4444 !important;
    animation: pulse-recording 1.5s ease-in-out infinite;
}

/* Silence detected - about to stop */
.mic-btn.listening.silence-detected {
    background-color: #f59e0b !important;
    animation: fade-out 1.2s ease-out forwards;
}

@keyframes pulse-recording {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@keyframes fade-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(0.95); }
}

/* Transcribing indicator (user speech being transcribed) */
.message-bubble.user-message.transcribing {
    opacity: 0.7;
}

.message-bubble.user-message.transcribing p::after {
    content: ' 🎤';
    animation: pulse-mic 1s ease-in-out infinite;
}

@keyframes pulse-mic {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Connection status indicator (optional) */
.chatbot-container[data-connected="false"] .chat-footer::before {
    content: 'Connecting...';
    display: block;
    text-align: center;
    font-size: 12px;
    color: #f59e0b;
    padding: 4px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Mute indicator (optional - add a mute button if desired) */
.chatbot-container[data-muted="true"] .tts-mute-btn {
    opacity: 0.5;
}

/* Typing indicator for when assistant is "thinking" */
.message-bubble.assistant-message.thinking p::after {
    content: '...';
    animation: typing-dots 1.5s infinite;
}

@keyframes typing-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Error message styling */
.message-bubble.error-message {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

/* Order confirmation/success message styling */
.message-bubble.success-message {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}