<!-- Live Chat Widget - Include this on every page -->
<!-- Usage: <?php include 'path/to/chat-widget.html'; ?> -->

<!-- Live Chat Widget -->
<div class="chat-widget-container">
    <!-- Chat Icon Button -->
    <button class="chat-icon-button" id="chatToggleBtn" title="Chat with us" aria-label="Open chat">
        <i class="fas fa-comments"></i>
        <span class="chat-badge" id="chatBadge" style="display: none;">1</span>
    </button>

    <!-- Chat Box -->
    <div class="chat-box" id="chatBox" role="dialog" aria-label="Chat with FAREN AI Support">
        <!-- Chat Header -->
        <div class="chat-header">
            <div class="chat-header-info">
                <div class="chat-header-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div>
                    <p class="chat-header-title">FAREN AI Support</p>
                    <p class="chat-header-subtitle" id="chatStatusSubtitle">Connecting...</p>
                </div>
            </div>
            <button class="chat-close-btn" id="chatCloseBtn" aria-label="Close chat">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- Chat Messages -->
        <div class="chat-messages" id="chatMessages" role="log" aria-live="polite"></div>

        <!-- Chat Input Area -->
        <div class="chat-input-area">
            <textarea class="chat-input" id="chatInput" placeholder="Type your message..." rows="1" aria-label="Message input"></textarea>
            <button class="chat-send-btn" id="chatSendBtn" aria-label="Send message">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
</div>
