        <div x-show="activeSubView !== null" x-cloak 
             x-transition:enter="transition ease-out duration-400" x-transition:enter-start="opacity-0 translate-y-full" x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-full"
             class="absolute inset-0 bg-[#f8fafc] z-[110] flex flex-col">
            
            <template x-if="activeSubView === 'attendees'">
                <div class="absolute inset-0 flex flex-col pb-safe bg-[#f8fafc]">
                    <div class="bg-white/80 backdrop-blur-xl px-6 py-4 border-b border-slate-200/50 flex items-center gap-4 shrink-0 shadow-sm z-20 pt-safe">
                        <button @click="closeSubView" class="p-2.5 bg-slate-50 border border-slate-100 rounded-[14px] hover:bg-slate-100 active:scale-90 transition-all text-slate-600">
                            <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.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                        </button>
                        <h2 class="font-extrabold text-slate-800 text-xl tracking-tight">Directory</h2>
                    </div>
                    
                    <div class="flex-1 p-6 overflow-y-auto hide-scrollbar">
                        
                        <div class="relative mb-6">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                            </div>
                            <input x-model.trim="attendeeSearch" type="text" placeholder="Search attendees..." class="w-full bg-white border border-slate-200 rounded-[20px] pl-11 pr-4 py-4 text-[14px] font-semibold text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-4 focus:ring-brand-500/10 focus:border-brand-300 shadow-sm transition-all">
                        </div>
                        
                        <div class="space-y-3">
                            <template x-if="filteredAttendees().length === 0">
                                <div class="text-center py-16">
                                    <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-300">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                                    </div>
                                    <p class="text-[14px] font-bold text-slate-400">No matching attendees found.</p>
                                </div>
                            </template>
                            
                            <template x-for="attendee in filteredAttendees()" :key="attendee.id">
                                <div @click="openDM(attendee)" class="bg-white p-4 rounded-[24px] border border-slate-100 flex items-center justify-between shadow-sm hover:shadow-md hover:border-brand-200 transition-all duration-300 cursor-pointer group active:scale-[0.98]">
                                    <div class="flex items-center gap-4">
                                        <div class="relative">
                                            <div class="w-12 h-12 bg-brand-50 text-brand-600 border border-brand-100 rounded-[16px] flex items-center justify-center font-extrabold text-lg group-hover:bg-brand-600 group-hover:text-white transition-colors duration-300 shadow-sm overflow-hidden">
                                                <template x-if="attendee.avatar"><img :src="attendee.avatar" class="w-full h-full object-cover rounded-[16px]"></template>
                                                <template x-if="!attendee.avatar"><span x-text="attendee.name.charAt(0)"></span></template>
                                            </div>
                                            <span x-show="attendee.online" class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 border-[3px] border-white rounded-full"></span>
                                        </div>
                                        <div>
                                            <h4 class="font-extrabold text-slate-800 text-[15px] mb-0.5 group-hover:text-brand-600 transition-colors line-clamp-1" x-text="attendee.name"></h4>
                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.15em] truncate max-w-[180px]" x-text="attendee.status_label || attendee.status || 'Active'"></p>
                                        </div>
                                    </div>
                                    <button class="p-3 bg-slate-50 text-slate-400 border border-slate-100 rounded-[14px] group-hover:bg-brand-50 group-hover:text-brand-600 group-hover:border-brand-100 transition-all duration-300">
                                        <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.5" 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>
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="activeSubView === 'dm' && activeUser">
                <div class="absolute inset-0 flex flex-col pb-safe bg-[#f8fafc] z-20">
                    
                    <div class="bg-white/90 backdrop-blur-xl px-5 py-3 border-b border-slate-200/50 flex items-center justify-between shrink-0 shadow-sm z-30 pt-safe">
                        <div class="flex items-center gap-3">
                            <button @click="activeSubView = 'attendees'" class="p-2.5 bg-slate-50 border border-slate-100 rounded-[14px] hover:bg-slate-100 active:scale-90 transition-all text-slate-600 shrink-0">
                                <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.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                            </button>
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-brand-50 border border-brand-100 text-brand-600 rounded-[12px] flex items-center justify-center font-extrabold text-sm overflow-hidden shrink-0 shadow-sm">
                                    <template x-if="activeUser.avatar"><img :src="activeUser.avatar" class="w-full h-full object-cover"></template>
                                    <template x-if="!activeUser.avatar"><span x-text="activeUser.name.charAt(0)"></span></template>
                                </div>
                                <div class="min-w-0">
                                    <h2 class="font-extrabold text-slate-800 text-[15px] leading-tight truncate" x-text="activeUser.name"></h2>
                                    <div class="flex items-center gap-1.5 mt-0.5">
                                        <span class="w-1.5 h-1.5 rounded-full" :class="activeUser.online ? 'bg-green-500 animate-pulse' : 'bg-slate-300'"></span>
                                        <p class="text-[9px] font-bold uppercase tracking-widest text-slate-400 truncate" x-text="activeUser.status_label || activeUser.status || (activeUser.online ? 'Online' : 'Offline')"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 p-6 space-y-5 overflow-y-auto hide-scrollbar bg-[#f8fafc]">
                        <div class="text-center my-6">
                            <span class="text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400 bg-slate-200/50 px-4 py-2 rounded-full shadow-sm">Secure Chat Started</span>
                        </div>
                        
                        <template x-if="dmMessages.length === 0">
                            <div class="flex flex-col items-center justify-center py-10 opacity-70">
                                <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-4 border border-slate-100 shadow-sm">
                                    <svg class="w-8 h-8 text-brand-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                                </div>
                                <p class="text-[13px] font-bold text-slate-500 text-center">No messages yet. Say hi!</p>
                            </div>
                        </template>
                        
                        <template x-for="msg in dmMessages" :key="msg.id">
                            <div x-data="{ shown: false }" x-init="setTimeout(()=>shown=true, 50)" class="transition-all duration-400 transform flex flex-col" :class="[(msg.is_mine ? 'items-end' : 'items-start'), (shown ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-4 scale-95')]">
                                <div class="max-w-[85%] px-5 py-3.5 shadow-sm text-[14px] font-medium leading-relaxed" 
                                     :class="msg.is_mine 
                                        ? 'bg-brand-600 text-white rounded-[20px] rounded-br-[6px] shadow-brand-500/20' 
                                        : 'bg-white text-slate-700 border border-slate-100 rounded-[20px] rounded-bl-[6px]'">
                                    <span x-text="msg.text"></span>
                                </div>
                                <span class="text-[9px] font-bold uppercase tracking-widest mt-1.5" :class="msg.is_mine ? 'text-slate-300 mr-4' : 'text-slate-400 ml-4'" x-text="msg.time || msg.created_label || ''"></span>
                            </div>
                        </template>
                        <div x-ref="dmEnd" class="h-2"></div>
                    </div>

                    <div class="bg-white/90 backdrop-blur-xl p-4 border-t border-slate-200/50 shrink-0 shadow-[0_-10px_30px_rgba(0,0,0,0.03)] relative z-30">
                        <form @submit.prevent="sendDM()" class="flex items-center gap-3">
                            <input type="text" x-model="dmInput" placeholder="Message..." class="flex-1 bg-slate-100 border border-transparent rounded-[24px] px-6 py-4 text-[14px] font-semibold text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-4 focus:ring-brand-500/10 focus:bg-white focus:border-brand-300 transition-all shadow-inner">
                            <button type="submit" :disabled="!dmInput.trim()" class="bg-brand-600 text-white p-4 rounded-[20px] hover:bg-brand-700 disabled:opacity-40 transition-all shadow-lg shadow-brand-500/30 active:scale-90 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>
            </template><template x-if="activeSubView === 'networking'">
                <div class="absolute inset-0 flex flex-col pb-safe bg-[#f8fafc] z-20">
                    <div class="bg-white/80 backdrop-blur-xl px-6 py-4 border-b border-slate-200/50 flex items-center gap-4 shrink-0 shadow-sm z-30 pt-safe">
                        <button @click="closeSubView" class="p-2.5 bg-slate-50 border border-slate-100 rounded-[14px] hover:bg-slate-100 active:scale-90 transition-all text-slate-600">
                            <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.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                        </button>
                        <h2 class="font-extrabold text-slate-800 text-xl tracking-tight">Smart Matches</h2>
                    </div>
                    
                    <div class="flex-1 p-6 overflow-y-auto space-y-6 hide-scrollbar">
                        <p class="text-[14px] text-slate-500 font-semibold leading-relaxed">Based on your profile, here are attendees you should connect with.</p>
                        
                        <div class="grid gap-5">
                            <template x-if="networkingMatches.length === 0">
                                <div class="text-center py-12 border-2 border-dashed border-slate-200 rounded-[32px] bg-white">
                                    <p class="text-[14px] font-bold text-slate-400">No matches available right now.</p>
                                </div>
                            </template>
                            
                            <template x-for="match in networkingMatches" :key="match.id">
                                <div class="bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm text-center flex flex-col items-center hover:shadow-md hover:border-brand-100 transition-all duration-300 relative overflow-hidden group">
                                    <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-brand-50 to-white"></div>
                                    
                                    <div class="w-24 h-24 bg-brand-100 text-brand-600 rounded-[24px] flex items-center justify-center font-extrabold text-4xl mb-4 border-[6px] border-white shadow-sm relative z-10 overflow-hidden group-hover:scale-105 transition-transform duration-500">
                                        <template x-if="match.avatar"><img :src="match.avatar" class="w-full h-full object-cover"></template>
                                        <template x-if="!match.avatar"><span x-text="match.name.charAt(0)"></span></template>
                                    </div>
                                    
                                    <h4 class="font-extrabold text-slate-800 text-[18px] mb-1 tracking-tight" x-text="match.name"></h4>
                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-6" x-text="match.role"></p>
                                    
                                    <template x-if="match.connected">
                                        <button @click="openDM(match)" class="w-full py-4 bg-slate-900 hover:bg-black text-white rounded-[20px] text-[11px] font-extrabold uppercase tracking-[0.15em] flex items-center justify-center gap-2 shadow-lg shadow-slate-900/20 active:scale-95 transition-all">
                                            <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.5" 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> 
                                            Message
                                        </button>
                                    </template>
                                    <template x-if="!match.connected">
                                        <button @click="connectMatch(match.id)" class="w-full py-4 bg-brand-50 hover:bg-brand-100 text-brand-700 rounded-[20px] text-[11px] font-extrabold uppercase tracking-[0.15em] flex items-center justify-center gap-2 transition-colors active:scale-95 border border-brand-200">
                                            <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.5" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg> 
                                            Connect
                                        </button>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="activeSubView === 'session' && selectedSession">
                <div class="absolute inset-0 flex flex-col pb-safe z-50 bg-[#f8fafc]">
                    
                    <div class="relative min-h-[220px] bg-slate-900 shrink-0 flex flex-col justify-end p-6 overflow-hidden pt-safe">
                        <div class="absolute inset-0 bg-gradient-to-br from-brand-900 via-slate-900 to-black opacity-90"></div>
                        <div class="absolute -top-32 -right-32 w-80 h-80 bg-brand-500/30 rounded-full blur-[80px]"></div>
                        
                        <button @click="closeSubView" class="absolute top-6 left-6 p-2.5 bg-white/10 backdrop-blur-xl text-white rounded-full border border-white/20 hover:bg-white/20 active:scale-90 transition-all z-20">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path></svg>
                        </button>
                        
                        <button x-show="featureFlags.customItinerary" @click="toggleSave(selectedSession.id)" class="absolute top-6 right-6 p-2.5 bg-white/10 backdrop-blur-xl text-white rounded-full border border-white/20 hover:bg-white/20 active:scale-90 transition-all z-20" x-cloak>
                            <svg class="w-6 h-6 transition-colors duration-300" :class="savedSessions.includes(selectedSession.id) ? 'fill-amber-400 text-amber-400' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
                        </button>
                        
                        <div class="relative z-10 pt-16">
                            <span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-md rounded-lg text-white text-[10px] font-bold tracking-widest uppercase mb-3 border border-white/20" x-text="selectedSession.time"></span>
                            <h2 class="text-[28px] font-extrabold text-white leading-tight drop-shadow-lg tracking-tight" x-text="selectedSession.title"></h2>
                        </div>
                    </div>

                    <div class="flex border-b border-slate-200/80 bg-white/90 backdrop-blur-xl shrink-0">
                        <button @click="sessionTab = 'details'" class="flex-1 py-4 text-[11px] uppercase tracking-[0.15em] font-extrabold border-b-[3px] transition-colors duration-300" :class="sessionTab === 'details' ? 'border-brand-600 text-brand-600' : 'border-transparent text-slate-400 hover:text-slate-600'">Details</button>
                        <button x-show="featureFlags.qa || featureFlags.polls" @click="sessionTab = 'qa'" class="flex-1 py-4 text-[11px] uppercase tracking-[0.15em] font-extrabold border-b-[3px] transition-colors duration-300" :class="sessionTab === 'qa' ? 'border-brand-600 text-brand-600' : 'border-transparent text-slate-400 hover:text-slate-600'" x-cloak>Interactive</button>
                        <button @click="sessionTab = 'feedback'" class="flex-1 py-4 text-[11px] uppercase tracking-[0.15em] font-extrabold border-b-[3px] transition-colors duration-300" :class="sessionTab === 'feedback' ? 'border-brand-600 text-brand-600' : 'border-transparent text-slate-400 hover:text-slate-600'">Rate</button>
                    </div>

                    <div class="flex-1 overflow-y-auto hide-scrollbar relative">
                        
                        <div x-show="sessionTab === 'details'" x-transition:enter="transition ease-out duration-400" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" class="p-6 space-y-5">
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-white p-5 rounded-[24px] border border-slate-100 shadow-sm flex flex-col gap-2">
                                    <div class="w-10 h-10 rounded-[12px] bg-brand-50 text-brand-600 border border-brand-100 flex items-center justify-center shrink-0">
                                        <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.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                    </div>
                                    <div>
                                        <p class="text-[9px] font-bold uppercase tracking-[0.15em] text-slate-400 mb-0.5">Time</p>
                                        <p class="font-extrabold text-slate-800 text-[14px] leading-tight" x-text="selectedSession.time || 'TBD'"></p>
                                    </div>
                                </div>
                                <div class="bg-white p-5 rounded-[24px] border border-slate-100 shadow-sm flex flex-col gap-2">
                                    <div class="w-10 h-10 rounded-[12px] bg-brand-50 text-brand-600 border border-brand-100 flex items-center justify-center shrink-0">
                                        <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.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                    </div>
                                    <div>
                                        <p class="text-[9px] font-bold uppercase tracking-[0.15em] text-slate-400 mb-0.5">Location</p>
                                        <p class="font-extrabold text-slate-800 text-[14px] leading-tight break-words" x-text="selectedSession.location || 'Main Venue'"></p>
                                    </div>
                                </div>
                            </div>
                            
                            <template x-if="selectedSession.speaker">
                                <div class="bg-white p-5 rounded-[24px] border border-slate-100 shadow-sm flex items-center gap-4">
                                    <div class="w-14 h-14 bg-slate-50 rounded-[16px] flex items-center justify-center text-slate-400 border border-slate-100"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div>
                                    <div>
                                        <p class="text-[10px] font-bold uppercase tracking-[0.15em] text-slate-400 mb-0.5">Speaker</p>
                                        <h4 class="font-extrabold text-lg text-slate-800 tracking-tight" x-text="selectedSession.speaker"></h4>
                                    </div>
                                </div>
                            </template>

                        </div>

                        <div x-show="sessionTab === 'qa' && (featureFlags.qa || featureFlags.polls)" x-transition:enter="transition ease-out duration-400" 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">
                            
                            <div class="p-6 pb-28 overflow-y-auto flex-1 hide-scrollbar space-y-8">
                                
                                <div x-show="featureFlags.polls" class="space-y-4" x-cloak>
                                    <div class="flex items-center justify-between">
                                        <h3 class="text-[11px] font-bold uppercase tracking-[0.2em] text-slate-800">Live Polls</h3>
                                    </div>
                                    
                                    <template x-if="user.canManage">
                                        <div class="bg-white rounded-[24px] border border-brand-100 shadow-sm p-5 space-y-4">
                                            <p class="text-[10px] font-extrabold uppercase tracking-[0.15em] text-brand-600">Admin: Create Poll</p>
                                            <input type="text" x-model="pollInputQuestion" placeholder="Poll question..." class="w-full bg-slate-50 border border-slate-200 rounded-[16px] px-4 py-3.5 text-[14px] font-semibold focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500">
                                            <textarea x-model="pollInputOptions" rows="3" placeholder="Option 1&#10;Option 2&#10;Option 3" class="w-full bg-slate-50 border border-slate-200 rounded-[16px] px-4 py-3 text-[14px] font-semibold focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 resize-y"></textarea>
                                            <label class="inline-flex items-center gap-3 text-[13px] font-bold text-slate-700">
                                                <input type="checkbox" x-model="pollInputMultiple" class="w-5 h-5 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                                Allow multiple selections
                                            </label>
                                            <button type="button" @click="createPollFromApp()" :disabled="isSubmitting || !pollInputQuestion.trim()" class="w-full py-4 rounded-[16px] bg-slate-900 text-white text-[11px] font-extrabold uppercase tracking-[0.15em] hover:bg-black disabled:opacity-50 transition-colors active:scale-95 shadow-lg">Publish Poll</button>
                                        </div>
                                    </template>
                                    
                                    <template x-if="pollsList.length === 0">
                                        <p class="text-[13px] font-bold text-slate-400 text-center py-6 bg-white rounded-[24px] border border-slate-100 border-dashed">No active polls.</p>
                                    </template>
                                    
                                    <div class="space-y-4">
                                        <template x-for="poll in pollsList" :key="poll.id">
                                            <div class="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm space-y-4">
                                                <div class="flex items-start justify-between gap-3">
                                                    <p class="text-[16px] text-slate-800 font-extrabold leading-snug tracking-tight" x-text="poll.question"></p>
                                                    <span class="text-[9px] font-extrabold uppercase tracking-widest px-2.5 py-1 rounded-md shrink-0" :class="poll.status === 'open' ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500'" x-text="poll.status"></span>
                                                </div>
                                                <div class="space-y-2.5">
                                                    <template x-for="option in poll.options" :key="option.id">
                                                        <button type="button" @click="submitPollVote(poll.id, option.id)" :disabled="poll.status !== 'open'" class="w-full relative overflow-hidden flex items-center justify-between gap-3 rounded-[16px] border px-4 py-3.5 text-left transition-all duration-300 disabled:opacity-70 group" :class="poll.selected_option_ids && poll.selected_option_ids.includes(option.id) ? 'border-brand-300 bg-brand-50 text-brand-700 shadow-sm' : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'">
                                                            <div class="absolute inset-y-0 left-0 bg-brand-500/10 transition-all duration-500 rounded-l-[15px]" :style="'width: ' + (poll.total_votes > 0 ? (option.vote_count / poll.total_votes * 100) : 0) + '%'"></div>
                                                            <span class="text-[14px] font-bold relative z-10" x-text="option.label"></span>
                                                            <span class="text-[12px] font-extrabold bg-white/50 px-2 py-0.5 rounded-md relative z-10" x-text="option.vote_count"></span>
                                                        </button>
                                                    </template>
                                                </div>
                                                
                                                <div x-show="user.canManage" class="flex flex-wrap gap-2 pt-2 border-t border-slate-50 mt-2" x-cloak>
                                                    <button type="button" @click="managePoll(poll.status === 'open' ? 'close' : 'open', poll.id)" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-[9px] font-extrabold uppercase tracking-widest text-slate-600 transition-colors">Toggle</button>
                                                    <button type="button" @click="managePoll('clear_votes', poll.id)" class="px-3 py-2 rounded-xl bg-indigo-50 hover:bg-indigo-100 text-[9px] font-extrabold uppercase tracking-widest text-indigo-600 transition-colors">Reset</button>
                                                    <button type="button" @click="if(confirm('Delete this poll?')){managePoll('delete', poll.id)}" class="px-3 py-2 rounded-xl bg-red-50 hover:bg-red-100 text-[9px] font-extrabold uppercase tracking-widest text-red-600 transition-colors">Delete</button>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>

                                <div x-show="featureFlags.qa" class="space-y-4" x-cloak>
                                    <div class="flex items-center justify-between">
                                        <h3 class="text-[11px] font-bold uppercase tracking-[0.2em] text-slate-800">Audience Q&A</h3>
                                    </div>
                                    <template x-if="qaList.length === 0">
                                        <div class="text-center py-10 bg-white rounded-[28px] border border-slate-100 border-dashed">
                                            <p class="text-[14px] font-bold text-slate-400">Be the first to ask a question.</p>
                                        </div>
                                    </template>
                                    <template x-for="q in [...qaList].sort((a,b) => b.vote_count - a.vote_count)" :key="q.id">
                                        <div class="bg-white p-5 rounded-[28px] border border-slate-100 shadow-sm flex gap-4 items-start transition-all hover:shadow-md">
                                            <button @click="toggleUpvote(q.id)" class="flex flex-col items-center justify-center gap-1 w-[52px] h-[64px] rounded-[18px] border transition-colors shrink-0" :class="q.has_voted ? 'bg-brand-50 text-brand-600 border-brand-200 shadow-sm' : 'bg-slate-50 text-slate-400 border-transparent hover:bg-slate-100'">
                                                <svg class="w-6 h-6" :class="q.has_voted ? 'fill-brand-600' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"></path></svg>
                                                <span class="text-[12px] font-extrabold leading-none" x-text="q.vote_count"></span>
                                            </button>
                                            <div class="flex-1 pt-1">
                                                <p class="text-[15px] text-slate-800 font-bold leading-snug tracking-tight" x-text="q.question"></p>
                                                <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-2" x-text="q.user_name"></p>
                                                
                                                <template x-if="q.answer">
                                                    <div class="mt-4 p-4 bg-slate-50 rounded-[16px] text-[13px] text-slate-700 leading-relaxed border border-slate-100">
                                                        <span class="font-extrabold text-brand-600" x-text="q.answer_user_name + ': '"></span><span class="font-medium" x-text="q.answer"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            
                            <div class="absolute bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl p-4 border-t border-slate-200/50 shadow-[0_-10px_30px_rgba(0,0,0,0.05)]" x-show="featureFlags.qa" x-cloak>
                                <form @submit.prevent="submitQA()" class="relative flex items-center shadow-sm rounded-[24px]">
                                    <input type="text" x-model="qaInput" placeholder="Ask a question..." class="w-full bg-slate-100 border border-transparent rounded-[24px] pl-6 pr-14 py-4 text-[14px] font-semibold text-slate-800 focus:outline-none focus:ring-4 focus:ring-brand-500/10 focus:bg-white focus:border-brand-300 transition-all">
                                    <button type="submit" :disabled="!qaInput.trim() || isSubmitting" class="absolute right-2 bg-slate-900 text-white p-3 rounded-[20px] hover:bg-black disabled:opacity-40 transition-colors shadow-md active:scale-90">
                                        <svg class="w-4 h-4" 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>

                        <div x-show="sessionTab === 'feedback'" x-transition:enter="transition ease-out duration-400" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" class="p-6">
                            <template x-if="feedbackSubmitted">
                                <div class="text-center py-16 bg-white rounded-[32px] border border-slate-100 shadow-sm flex flex-col items-center">
                                    <div class="w-24 h-24 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mb-6 border-[8px] border-emerald-100 shadow-inner">
                                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                    </div>
                                    <h3 class="font-extrabold text-3xl text-slate-800 mb-2 tracking-tight">Thank You!</h3>
                                    <p class="text-slate-500 text-[14px] font-medium px-8 leading-relaxed">Your feedback helps us curate better sessions.</p>
                                </div>
                            </template>

                            <template x-if="!feedbackSubmitted">
                                <div class="bg-white p-8 rounded-[32px] border border-slate-100 shadow-sm">
                                    <h3 class="font-extrabold text-center text-slate-800 text-xl mb-6 tracking-tight">How was this session?</h3>
                                    
                                    <div class="flex justify-center gap-2 sm:gap-4 mb-8">
                                        <template x-for="star in feedbackStars" :key="'feedback-star-' + star">
                                            <button @click="rating = star" class="focus:outline-none hover:scale-110 active:scale-90 transition-transform duration-300">
                                                <svg class="w-10 h-10 sm:w-12 sm:h-12 transition-all duration-300" :class="rating >= star ? 'fill-amber-400 text-amber-400 drop-shadow-md scale-110' : 'text-slate-200 hover:text-slate-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
                                            </button>
                                        </template>
                                    </div>
                                    <p class="text-center text-[10px] font-bold uppercase tracking-[0.2em] mb-6 transition-colors duration-300" :class="rating > 0 ? 'text-brand-600' : 'text-slate-400'" x-text="rating > 0 ? (rating + ' of 5 selected') : 'Tap to rate'"></p>
                                    
                                    <textarea placeholder="Leave a comment (optional)..." class="w-full bg-slate-50 border border-slate-200 rounded-[24px] p-5 text-[14px] font-semibold text-slate-800 focus:outline-none focus:ring-4 focus:ring-brand-500/10 focus:border-brand-300 resize-none h-32 mb-6 transition-all shadow-inner"></textarea>
                                    
                                    <button :disabled="rating === 0" @click="feedbackSubmitted = true" class="w-full bg-slate-900 disabled:bg-slate-200 disabled:text-slate-400 text-white font-extrabold tracking-widest uppercase text-[12px] py-4.5 rounded-[20px] transition-all active:scale-95 shadow-xl shadow-slate-900/20 hover:bg-black disabled:shadow-none h-14">
                                        Submit Feedback
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
            
            <template x-if="activeSubView === 'info'">
                <div class="absolute inset-0 flex flex-col pb-safe bg-[#f8fafc] z-20">
                    <div class="bg-white/80 backdrop-blur-xl px-6 py-4 border-b border-slate-200/50 flex items-center gap-4 shrink-0 shadow-sm z-30 pt-safe">
                        <button @click="closeSubView" class="p-2.5 bg-slate-50 border border-slate-100 rounded-[14px] hover:bg-slate-100 active:scale-90 transition-all text-slate-600">
                            <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.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                        </button>
                        <h2 class="font-extrabold text-slate-800 text-xl tracking-tight">Event Info</h2>
                    </div>
                    
                    <div class="flex-1 p-6 overflow-y-auto space-y-6 hide-scrollbar">
                        <div class="bg-white rounded-[32px] p-8 border border-slate-100 shadow-sm">
                            <h3 class="font-extrabold text-slate-800 mb-4 text-xl tracking-tight">About</h3>
                            <p class="text-[15px] text-slate-600 font-medium leading-relaxed whitespace-pre-wrap" x-text="event.subtitle || 'No details provided for this event.'"></p>
                        </div>
                        
                        <div class="bg-white rounded-[32px] p-6 border border-slate-100 shadow-sm flex items-start gap-5">
                            <div class="p-4 bg-brand-50 text-brand-600 rounded-[20px] shrink-0 border border-brand-100 shadow-sm">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.906 14.142 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path></svg>
                            </div>
                            <div class="w-full">
                                <h3 class="font-extrabold text-slate-800 mb-1 text-[17px] tracking-tight">Venue Wi-Fi</h3>
                                <p class="text-[13px] text-slate-500 mb-4 font-semibold">Connect to our dedicated network.</p>
                                <div class="bg-slate-50 p-4 rounded-[16px] border border-slate-200 space-y-2">
                                    <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400 flex justify-between items-center">Network <span class="text-slate-800 tracking-normal lowercase text-[13px] bg-white px-2 py-1 rounded shadow-sm border border-slate-100">Event_Guest</span></p>
                                    <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400 flex justify-between items-center">Password <span class="text-slate-800 tracking-normal text-[13px] bg-white px-2 py-1 rounded shadow-sm border border-slate-100">connect2024</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
