            <div x-show="activeTab === 'schedule'" x-transition:enter="transition ease-out duration-400 delay-100" x-transition:enter-start="opacity-0 translate-x-8" x-transition:enter-end="opacity-100 translate-x-0" class="absolute inset-0 flex flex-col pb-[5.5rem] bg-[#f8fafc]">
                
                <div class="bg-white/80 backdrop-blur-xl px-6 py-5 z-20 border-b border-slate-200/50 shrink-0 shadow-sm pt-safe">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h2 class="font-extrabold text-2xl text-slate-800 tracking-tight">Agenda</h2>
                            <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 mt-1" x-text="event.date"></p>
                        </div>
                    </div>
                    <div class="flex bg-slate-100/80 p-1.5 rounded-[20px] border border-slate-200/50">
                        <button @click="scheduleFilter = 'all'" :class="scheduleFilter === 'all' ? 'bg-white shadow-sm text-brand-600' : 'text-slate-500 hover:text-slate-700'" class="flex-1 py-3 text-[11px] uppercase tracking-[0.15em] font-extrabold rounded-[16px] transition-all duration-300">Full Schedule</button>
                        <button x-show="featureFlags.customItinerary" @click="scheduleFilter = 'saved'" :class="scheduleFilter === 'saved' ? 'bg-white shadow-sm text-brand-600' : 'text-slate-500 hover:text-slate-700'" class="flex-1 py-3 text-[11px] uppercase tracking-[0.15em] font-extrabold rounded-[16px] transition-all duration-300" x-cloak>My List</button>
                    </div>
                </div>

                <div class="p-6 flex-1 overflow-y-auto hide-scrollbar relative">
                    
                    <template x-if="displayedSessions().length === 0">
                        <div class="text-center py-24 text-slate-400 flex flex-col items-center justify-center h-full">
                            <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-5 shadow-sm border border-slate-100">
                                <svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                            </div>
                            <p class="text-[15px] font-bold text-slate-500">No sessions found.</p>
                            <p class="text-xs font-medium text-slate-400 mt-2">Check back later or adjust your filters.</p>
                            <button x-show="scheduleFilter === 'saved'" @click="scheduleFilter = 'all'" class="mt-6 text-[11px] font-extrabold uppercase tracking-[0.15em] text-brand-600 bg-brand-50 hover:bg-brand-100 px-6 py-3.5 rounded-2xl transition-colors">Browse Agenda</button>
                        </div>
                    </template>

                    <div x-show="displayedSessions().length > 0" class="relative">
                        <span class="pointer-events-none absolute left-[31px] top-10 bottom-10 w-0.5 bg-gradient-to-b from-slate-200 via-slate-200 to-transparent rounded-full"></span>
                        
                        <template x-for="(session, index) in displayedSessions()" :key="session.id">
                            <div x-data="{ shown: false }" x-init="setTimeout(()=>shown=true, 50 + (index * 50))" class="relative pl-[4.5rem] pb-8 last:pb-2 transition-all duration-700 transform" :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
                                
                                <span :class="savedSessions.includes(session.id) ? 'bg-brand-500 border-brand-100 shadow-[0_0_0_4px_rgba(var(--brand-50),1)]' : 'bg-white border-slate-300 shadow-[0_0_0_4px_#f8fafc]'" class="absolute left-[24px] top-6 z-10 flex w-4 h-4 items-center justify-center rounded-full border-[3px] transition-all duration-500"></span>
                                
                                <article :class="savedSessions.includes(session.id) ? 'border-brand-200 bg-white shadow-md' : 'border-slate-100 bg-white shadow-sm'" class="w-full rounded-[28px] p-5 border transition-all duration-300 group relative hover:shadow-md hover:border-brand-100">
                                    <button type="button" @click="openSession(session)" @keydown.enter.prevent="openSession(session)" @keydown.space.prevent="openSession(session)" class="w-full text-left active:scale-[0.98] transition-all duration-300 flex flex-col h-full">
                                        
                                        <div class="flex justify-between items-start mb-3">
                                            <span class="text-[11px] font-extrabold text-brand-600 uppercase tracking-[0.15em] bg-brand-50 px-3 py-1.5 rounded-xl border border-brand-100" x-text="session.time"></span>
                                        </div>
                                        
                                        <h4 class="font-extrabold text-slate-800 text-[17px] mb-2 leading-snug tracking-tight group-hover:text-brand-600 transition-colors pr-8" x-text="session.title"></h4>
                                        <p x-show="session.speaker" class="text-[13px] font-semibold text-slate-500 mb-4" x-text="session.speaker"></p>
                                        
                                        <div class="mt-auto pt-2 border-t border-slate-50 flex items-center gap-2">
                                            <div class="inline-flex items-center gap-1.5 px-0 text-[10px] font-bold uppercase tracking-widest text-slate-400">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                                <span class="truncate max-w-[150px]" x-text="session.location || 'Main Venue'"></span>
                                            </div>
                                        </div>
                                    </button>

                                    <button type="button" x-show="featureFlags.customItinerary" @click.prevent.stop="toggleSave(session.id)" class="absolute top-4 right-4 p-2.5 rounded-full hover:bg-slate-50 active:scale-90 transition-all duration-300" x-cloak>
                                        <svg class="w-6 h-6 transition-all duration-500" :class="savedSessions.includes(session.id) ? 'fill-amber-400 text-amber-400 scale-110 drop-shadow-sm' : '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>
                                </article>
                            </div>
                        </template>
                    </div>
                </div>
