<!-- AI Chatbot Component -->
<div id="ai-chatbot" class="fixed bottom-6 right-24 z-[60] font-sans antialiased">
    <!-- Chat Toggle Button -->
    <button id="chatbot-toggle" class="w-14 h-14 bg-orange-600 hover:bg-orange-700 text-white rounded-full flex items-center justify-center shadow-2xl transition-all hover:scale-110 active:scale-95 group relative">
        <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white animate-pulse"></div>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-7 h-7 group-data-[open=true]:hidden">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3h9m-9 3h9m-6.75-12h10.5A2.25 2.25 0 0120.25 4.5v10.5A2.25 2.25 0 0118 17.25h-6.75L7.5 21V17.25H6A2.25 2.25 0 013.75 15V4.5A2.25 2.25 0 016 2.25h1.5z" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-7 h-7 hidden group-data-[open=true]:block">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>

    <!-- Chat Window -->
    <div id="chatbot-window" class="absolute bottom-20 right-0 w-[400px] h-[600px] bg-navy-950/95 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl flex flex-col overflow-hidden transition-all duration-500 opacity-0 translate-y-10 pointer-events-none scale-95 origin-bottom-right">
        <!-- Header -->
        <div class="p-5 bg-gradient-to-r from-orange-600/20 to-navy-900 border-b border-white/5 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-orange-600 flex items-center justify-center text-xl shadow-lg shadow-orange-600/20">⚙️</div>
                <div>
                    <h3 class="text-sm font-bold text-white tracking-tight">RigNDig Tech Support</h3>
                    <div class="flex items-center gap-1.5">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                        <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">AI Engineering Online</span>
                    </div>
                </div>
            </div>
            <button id="chatbot-close" class="text-gray-400 hover:text-white transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </button>
        </div>

        <!-- Messages Area -->
        <div id="chatbot-messages" class="flex-1 overflow-y-auto p-5 space-y-4 scroll-smooth">
            <!-- Initial Message -->
            <div class="flex gap-3">
                <div class="w-8 h-8 rounded-lg bg-navy-800 border border-white/5 flex flex-shrink-0 items-center justify-center text-sm">⚙️</div>
                <div class="bg-navy-800/50 border border-white/5 p-3.5 rounded-2xl rounded-tl-none text-xs leading-relaxed text-gray-300 max-w-[85%]">
                    Welcome to Rig N Dig Technical Support. I am your AI assistant specialized in API certifications, industrial equipment, and precision engineering. How can I assist you today?
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div class="p-4 bg-navy-900/50 border-t border-white/5">
            <form id="chatbot-form" class="relative group">
                <input type="text" id="chatbot-input" placeholder="Ask about API 6A flanges, valves..." class="w-full bg-navy-950 border border-white/10 rounded-2xl py-3.5 pl-4 pr-12 text-xs text-white placeholder-gray-500 focus:outline-none focus:border-orange-500/50 focus:ring-1 focus:ring-orange-500/50 transition-all shadow-inner">
                <button type="submit" class="absolute right-2 top-2 w-9 h-9 bg-orange-600 hover:bg-orange-700 text-white rounded-xl flex items-center justify-center transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                    </svg>
                </button>
            </form>
            <div class="mt-3 flex items-center justify-center gap-2 text-[9px] font-bold text-gray-600 uppercase tracking-widest">
                <span>Enterprise AI Core</span>
                <span class="w-1 h-1 rounded-full bg-gray-700"></span>
                <span id="ai-provider-badge">Processing...</span>
            </div>
        </div>
    </div>
</div>

<style>
#chatbot-window.open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

#chatbot-messages::-webkit-scrollbar {
    width: 4px;
}
#chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}
#chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
#chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.1);
}

@keyframes message-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.message-animate {
    animation: message-in 0.3s ease forwards;
}

.typing-dots span {
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}
</style>
