@import url('https://fonts.googleapis.com/css2?family=Nastaliq&family=Noto+Sans+Arabic&display=swap');

.user-bubble {
    background-color: #01411C;
    color: white;
    border-top-right-radius: 0;
}

.bot-bubble {
    background-color: #FFFFFF;
    color: #01411C;
    border-top-left-radius: 0;
    border: 1px solid #01411C;
}

.urdu-text {
    font-family: 'Noto Sans Arabic', 'Nastaliq', serif;
    font-size: 1.1rem;
    line-height: 2;
    text-align: right;
}

.pulse-animation {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

#voiceBtn.listening {
    background-color: #EF4444;
    animation: listeningPulse 1s infinite;
}

@keyframes listeningPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}
 .chatbot-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chatbot-buttons button {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    /* Input + Voice + Send Row */
    .chat-input-row {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .chat-input-row input {
        flex-grow: 1;
        min-width: 0;
    }

    .chat-input-row button {
        flex-shrink: 0;
    }

    /* Mobile adjustments */
    @media (max-width: 480px) {
        .chatbot-buttons button {
            flex: 1 1 calc(50% - 8px); /* two buttons per row */
            font-size: 12px;
            padding: 6px;
        }

        .chat-input-row {
            flex-wrap: wrap;
        }

        .chat-input-row input {
            flex: 1 1 100%;
            order: 1;
        }

        .chat-input-row button {
            flex: 1 1 calc(50% - 8px);
            order: 2;
        }
    }