            <div x-show="activeTab === 'chat' && featureFlags.chat" x-transition:enter="transition ease-out duration-400 delay-100" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" class="absolute inset-0 flex flex-col pb-[5.5rem] bg-[#f8fafc]">
                
                <div class="bg-white/80 backdrop-blur-xl px-6 py-4 border-b border-slate-200/50 sticky top-0 z-20 flex items-center justify-between shrink-0 pt-safe shadow-sm">
                    <div>
                        <h2 class="font-extrabold text-xl text-slate-800 tracking-tight">Global Chat</h2>
                        <p class="text-[10px] uppercase tracking-[0.2em] text-brand-600 font-bold flex items-center gap-1.5 mt-0.5">
                            <span class="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse"></span>
                            Live Now
                        </p>
                    </div>
                    <div class="w-10 h-10 bg-slate-50 rounded-[14px] flex items-center justify-center border border-slate-100 shadow-sm text-slate-400">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path></svg>
                    </div>
                </div>

                <div class="flex-1 p-6 space-y-6 overflow-y-auto hide-scrollbar bg-[#f8fafc]">
                    <template x-if="messages.length === 0">
                        <div class="text-center py-20 text-slate-400 flex flex-col items-center justify-center h-full">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm border border-slate-100">
                                <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.214-3.64A7.952 7.952 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                            </div>
                            <p class="text-sm font-bold">It's quiet here. Say hello!</p>
                        </div>
                    </template>

                    <template x-for="msg in messages" :key="msg.id">
                        <div x-data="{ shown: false }" x-init="setTimeout(()=>shown=true, 50)" class="transition-all duration-500 transform" :class="shown ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-4 scale-95'">
                            
                            <template x-if="msg.isSystem">
                                <div class="text-center my-6">
                                    <span class="bg-slate-200/50 text-slate-500 text-[10px] font-bold uppercase tracking-[0.15em] px-4 py-2 rounded-full" x-text="msg.text"></span>
                                </div>
                            </template>
                            
                            <template x-if="!msg.isSystem">
                                <div class="flex flex-col" :class="msg.isMe ? 'items-end' : 'items-start'">
                                    <span x-show="!msg.isMe" class="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-4 mb-1.5" x-text="msg.user"></span>
                                    
                                    <div class="max-w-[85%] px-5 py-3.5 shadow-sm text-[14px] font-medium leading-relaxed" 
                                         :class="msg.isMe 
                                            ? 'bg-brand-600 text-white rounded-[24px] rounded-br-[8px] shadow-brand-500/20' 
                                            : 'bg-white text-slate-700 border border-slate-100 rounded-[24px] rounded-bl-[8px]'">
                                        <span x-text="msg.text"></span>
                                    </div>
                                    
                                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-300 mt-1.5" :class="msg.isMe ? 'mr-4' : 'ml-4'" x-text="msg.time"></span>
                                </div>
                            </template>
                        </div>
                    </template>
                    <div x-ref="chatEnd" class="h-4"></div>
                </div>

                <div class="bg-white/90 backdrop-blur-xl p-4 border-t border-slate-200/50 shrink-0 z-20">
                    <form @submit.prevent="sendMessage()" class="flex items-center gap-3">
                        <input type="text" x-model="chatInput" placeholder="Message..." class="flex-1 bg-slate-100 border border-transparent rounded-[24px] px-6 py-4 text-sm font-medium text-slate-800 placeholder-slate-400 focus:outline-none focus:bg-white focus:ring-2 focus:ring-brand-500/20 focus:border-brand-300 transition-all shadow-inner">
                        <button type="submit" :disabled="!chatInput.trim() || isSubmitting" class="bg-brand-600 text-white p-4 rounded-[20px] hover:bg-brand-700 disabled:opacity-40 disabled:hover:bg-brand-600 active:scale-90 transition-all shadow-lg shadow-brand-500/30 flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5 ml-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                        </button>
                    </form>
                </div>
            </div>
