<div class="flex h-full bg-zinc-950 overflow-hidden relative" 
     data-requires-reverb="true"
     x-data="{ 
        sidebarOpen: window.innerWidth >= 1280, 
        selectedId: @entangle('selectedEmailId'), 
        mobileView: 'list',
        qrModal: false,
        qrAddress: '',
        generateQR(address) {
            this.qrAddress = address;
            this.qrModal = true;
            this.$nextTick(() => {
                new QRious({
                    element: document.getElementById('qr-canvas'),
                    value: address,
                    size: 200,
                    background: 'transparent',
                    foreground: '#09090b',
                    level: 'H'
                });
            });
        }
     }"
     x-init="$watch('selectedId', value => { if(value && window.innerWidth < 1024) mobileView = 'detail' }); $watch('mobileView', value => { if(value === 'list' && window.innerWidth < 1024) selectedId = null })"
     @resize.window="if (window.innerWidth >= 1280) sidebarOpen = true">

    <!-- ═══ Cinematic Creation Overlay ═══ -->
    <div x-show="$wire.isCreatingFirstMailbox"
         x-transition:enter="transition ease-out duration-700"
         x-transition:enter-start="opacity-0 backdrop-blur-none"
         x-transition:enter-end="opacity-100 backdrop-blur-md"
         x-transition:leave="transition ease-in duration-500"
         x-transition:leave-start="opacity-100 backdrop-blur-md"
         x-transition:leave-end="opacity-0 backdrop-blur-none"
         class="fixed inset-0 z-[200] bg-zinc-950/90 flex flex-col items-center justify-center p-8 text-center"
         x-init="
            if ($wire.isCreatingFirstMailbox) { setTimeout(() => $wire.finishAutoCreation(), 1000); }
            $watch('$wire.isCreatingFirstMailbox', value => { if(value) setTimeout(() => $wire.finishAutoCreation(), 1000) });
         "
         style="display: none;">
        
        <!-- Logo Animation -->
        <div class="mb-12 animate-pulse transition-all duration-1000 ease-in-out" 
             x-bind:class="{ 'scale-110 opacity-100': $wire.isCreatingFirstMailbox, 'scale-90 opacity-0': !$wire.isCreatingFirstMailbox }">
            <x-bento.logo size="lg" />
        </div>

        <div class="w-24 h-24 relative mb-12 transform-gpu">
            <div class="absolute inset-0 border-4 border-pink-500/10 rounded-full transition-all duration-700"></div>
            <div class="absolute inset-0 border-4 border-pink-500 border-t-transparent animate-[spin_1.5s_cubic-bezier(0.4,0,0.2,1)_infinite] rounded-full shadow-[0_0_30px_rgba(236,72,153,0.3)]"></div>
            <div class="absolute inset-4 bg-pink-500/20 rounded-full blur-3xl animate-pulse"></div>
            <div class="absolute inset-0 flex items-center justify-center">
                <svg class="w-10 h-10 text-pink-500 animate-pulse transition-transform duration-700 ease-in-out hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
            </div>
        </div>

        <div class="flex flex-col items-center max-w-sm space-y-4">
            <h2 class="text-xl font-black text-white uppercase tracking-[0.3em] font-mono animate-slide-up bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-400">Establishing Secure Identity</h2>
            <p class="text-[11px] text-zinc-500 font-bold uppercase tracking-widest leading-relaxed opacity-0 animate-slide-up [animation-delay:400ms]">
                Generating unique encryption keys and provisioning anonymous routing routes...
            </p>
            <div class="flex gap-1.5 opacity-0 animate-slide-up [animation-delay:800ms]">
                <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.3s]"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.15s]"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-bounce"></div>
            </div>
        </div>
    </div>

    <!-- Global Confirmation Modal -->
    <x-bento.confirm-modal />
    
    <!-- Mobile Sidebar Backdrop -->
    <div x-show="sidebarOpen" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="sidebarOpen = false"
         class="fixed inset-0 bg-zinc-950/60 backdrop-blur-sm z-40 xl:hidden"></div>

    <!-- Component Sidebar -->
    <aside class="fixed xl:relative inset-y-0 left-0 flex-shrink-0 bg-zinc-900/40 border-r border-white/5 flex flex-col transition-all duration-300 z-50 xl:z-30"
           :class="{
               'w-64 translate-x-0 shadow-2xl xl:shadow-none': sidebarOpen,
               '-translate-x-full xl:translate-x-0': !sidebarOpen,
               'xl:w-64': sidebarOpen && window.innerWidth >= 1280,
               'xl:w-20': !sidebarOpen && window.innerWidth >= 1280
           }">
        <div class="h-16 flex items-center justify-between px-6 border-b border-white/5">
            <a href="/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
                <x-bento.logo size="sm" x-data="{ showText: sidebarOpen }" />
            </a>
            
            <!-- Mobile Close Button -->
            <button @click="sidebarOpen = false" class="xl:hidden p-1.5 rounded-lg hover:bg-white/5 text-zinc-500 hover:text-white transition-all cursor-pointer">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>

        <!-- Sidebar Content -->
        <div class="flex-1 overflow-y-auto py-6 px-4 space-y-8 scrollbar-hide">
            <!-- Navigation -->
            <nav class="space-y-1">
                <button @click="$wire.set('activeFolder', 'inbox')" 
                        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group cursor-pointer"
                        :class="$wire.activeFolder === 'inbox' ? 'bg-pink-500/10 text-pink-500 border border-pink-500/20 shadow-[0_0_20px_rgba(236,72,153,0.05)]' : 'text-zinc-500 hover:text-zinc-300 hover:bg-white/5'">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
                    <span class="font-medium text-sm" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">Inbox</span>
                    @if($unreadCount > 0)
                        <span class="ml-auto text-[10px] font-bold px-1.5 py-0.5 rounded bg-pink-500/20 text-pink-500" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">{{ $unreadCount }}</span>
                    @endif
                </button>
            </nav>

            <!-- Active Mailbox Control -->
            <div :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">
                @if($currentMailbox)
                    <div class="p-4 rounded-2xl bg-zinc-900 border border-white/5 relative overflow-hidden group mb-4">
                        <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500/5 rounded-full blur-2xl -z-10"></div>
                         <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-2">
                                <div class="w-1.5 h-1.5 rounded-full animate-pulse transition-colors duration-500"
                                     :class="wsConnected ? 'bg-emerald-500' : 'bg-rose-500'"></div>
                                <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active Mailbox</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <button @click="generateQR('{{ $currentMailbox->address }}')"
                                        class="p-1.5 rounded-lg bg-white/5 text-zinc-500 hover:text-white hover:bg-white/10 transition-all cursor-pointer"
                                        title="QR Code">
                                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
                                    </svg>
                                </button>
                                <button @click="navigator.clipboard.writeText('{{ $currentMailbox->address }}'); addToast('Address copied to clipboard', 'success')"
                                        class="p-1.5 rounded-lg bg-white/5 text-zinc-500 hover:text-white hover:bg-white/10 transition-all cursor-pointer"
                                        title="Copy Address">
                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                                </button>
                                <button @click="$dispatch('open-confirm-modal', {
                                            title: 'Burn Mailbox?',
                                            message: 'Are you sure you want to delete this mailbox? All emails will be permanently lost.',
                                            confirmLabel: 'Burn Now',
                                            type: 'danger',
                                            action: () => $wire.deleteMailbox({{ $currentMailbox->id }})
                                        })" 
                                        class="p-1.5 rounded-lg bg-rose-500/10 text-rose-500/60 hover:text-rose-500 hover:bg-rose-500/20 transition-all cursor-pointer"
                                        title="Delete Session">
                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                </button>
                            </div>
                        </div>
                        <div class="text-[11px] font-mono text-white break-all mb-4">{{ $currentMailbox->address }}</div>
                        <div class="space-y-2" 
                             x-data="{
                                expiresAt: '{{ $currentMailbox->expires_at?->toIso8601String() }}',
                                created_at: '{{ $currentMailbox->created_at?->toIso8601String() }}',
                                timeLeft: 'Never',
                                percent: 100,
                                isExpired: false,
                                init() {
                                    if (!this.expiresAt) return;
                                    
                                    this.update();
                                    setInterval(() => this.update(), 1000);
                                },
                                update() {
                                    const end = new Date(this.expiresAt).getTime();
                                    const start = new Date(this.created_at).getTime();
                                    const now = new Date().getTime();
                                    
                                    if (now > end) {
                                        this.timeLeft = 'Expired';
                                        this.percent = 0;
                                        if (!this.isExpired) {
                                            this.isExpired = true;
                                            $wire.deleteMailbox({{ $currentMailbox->id }});
                                        }
                                        return;
                                    }
                                    
                                    // Calculate time string
                                    const diff = end - now;
                                    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                                    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                                    const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                                    const secs = Math.floor((diff % (1000 * 60)) / 1000);
                                    
                                    if (days > 0) {
                                        this.timeLeft = `${days}d ${hours}h ${mins}m ${secs}s`;
                                    } else if (hours > 0) {
                                        this.timeLeft = `${hours}h ${mins}m ${secs}s`;
                                    } else if (mins > 0) {
                                        this.timeLeft = `${mins}m ${secs}s`;
                                    } else {
                                        this.timeLeft = `${secs}s`;
                                    }
                                    
                                    // Calculate percentage based on total lifespan vs remaining
                                    const totalLifespan = end - start;
                                    const timeRemaining = end - now;
                                    this.percent = Math.max(0, Math.min(100, (timeRemaining / totalLifespan) * 100));
                                }
                             }">
                            <div class="flex items-center justify-between text-[10px]">
                                <span class="text-zinc-500 uppercase font-black tracking-tighter">Expires In</span>
                                <span class="text-pink-500 font-mono" x-text="timeLeft"></span>
                            </div>
                            <div class="h-1 bg-white/5 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-pink-500 to-emerald-500 transition-all duration-1000 ease-linear" :style="`width: ${percent}%`"></div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Controls Layout -->
                <div class="space-y-6">
                    <!-- Create New Button -->
                    <button @click="$wire.set('showCreateModal', true)" 
                            class="w-full py-3 px-4 rounded-2xl bg-white/5 border border-white/10 text-white text-xs font-bold flex items-center justify-center gap-2 hover:bg-white/10 hover:border-pink-500/30 transition-all group cursor-pointer">
                        <div class="w-5 h-5 rounded-lg bg-pink-500/20 text-pink-500 flex items-center justify-center group-hover:scale-110 transition-transform">
                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.5v15m7.5-7.5h-15" /></svg>
                        </div>
                        Create New Mailbox
                    </button>

                    <!-- Active List -->
                    @if($this->active_mailboxes->where('id', '!=', $currentMailboxId)->count() > 0)
                        <div class="space-y-3">
                            <h4 class="text-[10px] font-bold text-zinc-600 uppercase tracking-[0.2em] px-3 mb-4">Your Sessions</h4>
                            <div class="space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-hide">
                                @foreach($this->active_mailboxes as $mailbox)
                                    @if($mailbox->id !== $currentMailboxId)
                                        <button wire:click="switchMailbox({{ $mailbox->id }})" 
                                                class="w-full p-3 rounded-xl bg-zinc-900/40 border border-white/5 text-left group hover:border-white/20 transition-all flex items-center justify-between cursor-pointer">
                                            <div class="min-w-0 flex-1"
                                                 x-data="{
                                                    expiresAt: '{{ $mailbox->expires_at?->toIso8601String() }}',
                                                    timeLeft: 'Never',
                                                    isExpired: false,
                                                    init() {
                                                        if (!this.expiresAt) return;
                                                        this.update();
                                                        setInterval(() => this.update(), 1000); // 1-sec interval
                                                    },
                                                    update() {
                                                        const end = new Date(this.expiresAt).getTime();
                                                        const now = new Date().getTime();
                                                        
                                                        if (now > end) {
                                                            this.timeLeft = 'Expired';
                                                            if (!this.isExpired) {
                                                                this.isExpired = true;
                                                                $wire.deleteMailbox({{ $mailbox->id }});
                                                            }
                                                            return;
                                                        }
                                                        
                                                        const diff = end - now;
                                                        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                                                        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                                                        const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                                                        const secs = Math.floor((diff % (1000 * 60)) / 1000);
                                                        
                                                        if (days > 0) {
                                                            this.timeLeft = `${days}d ${hours}h ${mins}m ${secs}s`;
                                                        } else if (hours > 0) {
                                                            this.timeLeft = `${hours}h ${mins}m ${secs}s`;
                                                        } else if (mins > 0) {
                                                            this.timeLeft = `${mins}m ${secs}s`;
                                                        } else {
                                                            this.timeLeft = `${secs}s`;
                                                        }
                                                    }
                                                 }">
                                                <div class="text-[10px] font-mono text-zinc-400 truncate group-hover:text-white transition-colors">{{ $mailbox->address }}</div>
                                                <div class="text-[9px] text-zinc-600 font-bold uppercase mt-1" x-text="timeLeft"></div>
                                            </div>
                                            <svg class="w-4 h-4 text-zinc-700 group-hover:text-pink-500 translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                                        </button>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>


        <!-- Sidebar Footer -->
        <a href="{{ auth()->check() ? route('settings.profile') : route('login') }}" 
           class="p-4 border-t border-white/5 flex items-center gap-4 hover:bg-white/5 transition-all group">
            <div class="w-10 h-10 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-400 group-hover:border-pink-500/30 group-hover:bg-pink-500/10 group-hover:text-pink-500 transition-all">
                @auth
                    <span class="text-xs font-bold">{{ auth()->user()->initials() }}</span>
                @else
                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                @endauth
            </div>
            <div class="flex-1 min-w-0" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">
                <div class="text-xs font-bold text-white truncate group-hover:text-pink-500 transition-colors">
                    @auth
                        {{ auth()->user()->name ?? auth()->user()->email }}
                    @else
                        Anonymous
                    @endauth
                </div>
                <div class="text-[9px] text-zinc-500 uppercase font-black tracking-tighter">
                    @auth
                        {{ auth()->user()->tierLabel() }} USER
                    @else
                        GUEST USER
                    @endauth
                </div>
            </div>
        </a>
    </aside>

    <!-- Email List Column -->
    <div class="w-full lg:w-96 flex-shrink-0 bg-app-bg border-r border-white/5 flex flex-col z-20 transition-all duration-300"
         :class="{'hidden lg:flex': mobileView === 'detail' && selectedId}">
        
        <!-- List Header -->
        <div class="h-16 flex items-center px-4 border-b border-white/5 bg-zinc-950/20 backdrop-blur-3xl sticky top-0 z-10 gap-3">
            <!-- Sidebar Toggle (Mobile/Tablet) -->
            <button @click="sidebarOpen = !sidebarOpen" 
                    class="xl:hidden p-2 rounded-lg bg-white/5 border border-white/5 text-zinc-400 hover:text-white transition-all cursor-pointer">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>

            <div class="flex-1 relative group">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 group-focus-within:text-pink-500 transition-colors" 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>
                <input type="text" placeholder="Search mail..." 
                       class="w-full h-10 bg-white/5 border border-white/5 rounded-xl pl-10 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/30 focus:border-pink-500/20 transition-all placeholder:text-zinc-600">
            </div>
            <button wire:click="$refresh()" 
                    class="w-10 h-10 rounded-xl bg-white/5 border border-white/5 flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/10 transition-all group overflow-hidden cursor-pointer"
                    x-data="{ refreshing: false }"
                    @click="refreshing = true; setTimeout(() => refreshing = false, 750)">
                <svg class="w-5 h-5" 
                     :class="{ 'animate-[spin_0.75s_ease-out_infinite]': refreshing }"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                </svg>
            </button>
        </div>

        <!-- List Content -->
        <div class="flex-1 overflow-y-auto divide-y divide-white/5 scrollbar-hide" x-ref="listContainer">
            @forelse($emails as $email)
                <div wire:key="email-{{ $email->id }}"
                     @click="$wire.selectEmail({{ $email->id }}); mobileView = 'detail'"
                     class="p-5 cursor-pointer transition-all relative group"
                     :class="selectedId === {{ $email->id }} ? 'bg-pink-500/5' : 'hover:bg-white/[0.02]'">
                    <div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 scale-y-0 transition-transform duration-300"
                         :class="selectedId === {{ $email->id }} ? 'scale-y-100' : 'scale-y-0'"></div>
                    
                    <div class="flex items-start justify-between gap-4 mb-2">
                        <div class="flex items-center gap-3 min-w-0">
                            @if(!$email->is_read)
                                <div class="w-2 h-2 rounded-full bg-pink-500 shadow-[0_0_8px_rgba(236,72,153,0.5)] flex-shrink-0"></div>
                            @endif
                            <h4 class="text-sm font-bold truncate transition-colors" :class="selectedId === {{ $email->id }} ? 'text-white' : 'text-zinc-200 group-hover:text-white'">
                                {{ $email->sender_name ?: $email->sender_email }}
                            </h4>
                        </div>
                        <span class="text-[10px] font-bold text-zinc-600 uppercase whitespace-nowrap">{{ $email->received_at?->diffForHumans(['short' => true]) }}</span>
                    </div>

                    <div class="text-xs font-semibold text-zinc-300 mb-2 truncate group-hover:text-zinc-100 transition-colors">
                        {{ $email->subject }}
                    </div>
                    
                    <p class="text-[11px] text-zinc-500 line-clamp-2 leading-relaxed font-medium">
                        {{ $email->preview }}
                    </p>

                    @if($email->attachment_size > 0)
                        <div class="mt-3 flex items-center gap-2">
                            <div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-white/5 border border-white/5 text-[9px] font-mono text-zinc-400">
                                <svg class="w-3 h-3 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
                                Attachments
                            </div>
                        </div>
                    @endif
                </div>
            @empty
                {{-- ═══ Cinematic Empty State ═══ --}}
                <div class="flex-1 flex flex-col items-center justify-center p-8 text-center min-h-[400px]">
                    {{-- Animated Envelope Icon --}}
                    <div class="relative w-20 h-20 mb-8">
                        <div class="absolute inset-0 bg-pink-500/10 rounded-2xl animate-pulse"></div>
                        <div class="absolute inset-0 border border-pink-500/20 rounded-2xl"></div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="w-10 h-10 text-pink-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                            </svg>
                        </div>
                    </div>

                    <h3 class="text-sm font-bold text-zinc-400 mb-2 tracking-tight">No emails yet</h3>
                    <p class="text-[11px] text-zinc-600 mb-6 max-w-[220px] leading-relaxed">
                        Send an email to your address and it will appear here instantly
                    </p>

                    {{-- Current mailbox address for easy reference --}}
                    @if($currentMailbox)
                        <button @click="navigator.clipboard.writeText('{{ $currentMailbox->address }}'); addToast('Address copied to clipboard', 'success')"
                                class="px-4 ру-2.5 h-10 rounded-xl bg-zinc-900 border border-white/5 text-[10px] font-mono text-zinc-400 hover:border-pink-500/20 hover:text-white transition-all cursor-pointer group mb-6 relative overflow-hidden flex items-center justify-center min-w-[200px]">
                            <span class="group-hover:opacity-0 transition-opacity duration-200">{{ $currentMailbox->address }}</span>
                            <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-pink-500 font-bold uppercase tracking-widest font-sans bg-zinc-900">Click to Copy</span>
                        </button>
                    @endif

                    {{-- Animated "Waiting" Indicator --}}
                    <div class="flex items-center gap-2.5 text-zinc-600">
                        <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                        </svg>
                        <span class="text-[10px] font-bold uppercase tracking-[0.2em] animate-pulse">Waiting for emails</span>
                    </div>
                </div>
            @endforelse
        </div>

        @if($emails->hasPages())
            <!-- Sticky Pagination -->
            <div class="h-14 flex items-center justify-between px-4 border-t border-white/5 bg-zinc-950/40 backdrop-blur-xl shrink-0">
                <button wire:click="previousPage" 
                        @click="$refs.listContainer.scrollTop = 0"
                        class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest cursor-pointer"
                        {{ $emails->onFirstPage() ? 'disabled' : '' }}>
                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                    Prev
                </button>
                
                <div class="flex items-center gap-1.5">
                    <span class="text-[10px] font-black text-white/90 uppercase tracking-[0.2em]">{{ $emails->currentPage() }}</span>
                    <span class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">/</span>
                    <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">{{ $emails->lastPage() }}</span>
                </div>

                <button wire:click="nextPage" 
                        @click="$refs.listContainer.scrollTop = 0"
                        class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest cursor-pointer"
                        {{ !$emails->hasMorePages() ? 'disabled' : '' }}>
                    Next
                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                </button>
            </div>
        @endif
    </div>
        <!-- QR Code Modal -->
    <div x-show="qrModal" 
         class="fixed inset-0 z-[100] flex items-center justify-center p-4 lg:p-8"
         x-cloak>
        <div x-show="qrModal" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="qrModal = false"
             class="absolute inset-0 bg-zinc-950/80 backdrop-blur-xl"></div>

        <div x-show="qrModal" 
             x-transition:enter="transition ease-out duration-500"
             x-transition:enter-start="opacity-0 scale-95 translate-y-8"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
             x-transition:leave-end="opacity-0 scale-95 translate-y-8"
             class="w-full max-w-[320px] bg-zinc-900 border border-white/10 rounded-[32px] p-6 relative overflow-hidden shadow-2xl">
            
            <!-- Glow Background -->
            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-48 h-48 bg-pink-500/10 rounded-full blur-[60px] -z-10"></div>
            
            <div class="text-center">
                <div class="w-12 h-12 rounded-xl bg-pink-500/10 text-pink-500 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
                    </svg>
                </div>
                
                <h3 class="text-lg font-black text-white mb-1 tracking-tight uppercase">Mailbox QR</h3>
                <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-6">Scan to access</p>
                
                <div class="p-4 bg-white rounded-2xl mb-6 flex justify-center shadow-inner inline-block">
                    <canvas id="qr-canvas"></canvas>
                </div>

                <div class="p-3 rounded-xl bg-zinc-950/50 border border-white/5 font-mono text-[9px] text-zinc-400 break-all mb-6" x-text="qrAddress"></div>

                <button @click="qrModal = false" 
                        class="w-full py-3.5 rounded-xl bg-white text-zinc-950 font-black text-[10px] uppercase tracking-[0.2em] hover:bg-zinc-100 transition-all cursor-pointer">
                    Dismiss
                </button>
            </div>
        </div>
    </div>

    <!-- Email Detail Column -->
    <main class="flex-1 flex flex-col min-w-0 bg-zinc-950/50 backdrop-blur-md relative z-10 transition-all duration-300 h-full overflow-hidden"
          :class="{'hidden lg:flex': mobileView === 'list' || !selectedId}">
        
        <!-- Cinematic Loading Overlay -->
        <div wire:loading.flex wire:target="selectEmail" class="absolute inset-0 z-[100] bg-zinc-950/60 backdrop-blur-xl items-center justify-center">
            <div class="flex flex-col items-center justify-center">
                <div class="w-20 h-20 relative mb-8">
                    <div class="absolute inset-0 border-4 border-pink-500/10 rounded-full"></div>
                    <div class="absolute inset-0 border-4 border-pink-500 border-t-transparent animate-spin rounded-full shadow-[0_0_20px_rgba(236,72,153,0.2)]"></div>
                    <div class="absolute inset-4 bg-pink-500/20 rounded-full blur-2xl animate-pulse"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <svg class="w-8 h-8 text-pink-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                </div>
                <div class="flex flex-col items-center">
                    <span class="text-[10px] font-black text-white uppercase tracking-[0.4em] mb-2 animate-pulse">Establishing Secure Channel</span>
                    <div class="flex gap-1">
                        <div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.3s]"></div>
                        <div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.15s]"></div>
                        <div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce"></div>
                    </div>
                </div>
            </div>
        </div>

        @php $currentEmail = $selectedEmailId ? $emails->firstWhere('id', $selectedEmailId) : null; @endphp
        @if($currentEmail)
            
            <!-- Detail Header -->
            <div class="h-16 flex items-center px-6 border-b border-white/5 bg-zinc-950/20 backdrop-blur-3xl sticky top-0 z-10">
                <button @click="mobileView = 'list'" class="lg:hidden mr-4 p-2 rounded-lg bg-white/5 border border-white/5 text-zinc-400 hover:text-white transition-all cursor-pointer">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                </button>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <button wire:click="downloadEmail({{ $selectedEmailId }})" 
                                class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all group cursor-pointer" title="Download Email">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                        </button>
                        <button wire:click="printEmail({{ $selectedEmailId }})"
                                class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all group cursor-pointer" title="Print Email">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2m8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" /></svg>
                        </button>
                    </div>
                    <div class="h-6 w-px bg-white/5"></div>
                    <button @click="$dispatch('open-confirm-modal', {
                                title: 'Burn Email?',
                                message: 'Are you sure you want to delete this email? This action is permanent.',
                                confirmLabel: 'Burn Now',
                                type: 'danger',
                                action: () => $wire.deleteEmail({{ $selectedEmailId }})
                            })"
                            class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-rose-500 hover:bg-rose-500/10 transition-all cursor-pointer" title="Delete Email">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
                    </button>
                </div>

                <!-- Privacy Toggles -->
                <div class="ml-auto flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
                    <button wire:click="$set('viewMode', 'text')" 
                            class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all cursor-pointer"
                            :class="$wire.viewMode === 'text' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
                        Text
                    </button>
                    <button wire:click="$set('viewMode', 'html')" 
                            class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all cursor-pointer"
                            :class="$wire.viewMode === 'html' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
                        HTML
                    </button>
                </div>
            </div>

            <!-- Detail Content -->
            <div class="flex-1 relative overflow-hidden">
                <div class="h-full overflow-y-auto p-8 lg:p-12 scrollbar-hide" wire:loading.remove wire:target="selectEmail">
                    <div class="max-w-3xl">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold text-white shadow-xl">
                                {{ substr($currentEmail->sender_name ?: $currentEmail->sender_email, 0, 1) }}
                            </div>
                            <div>
                                <h2 class="text-xl font-bold text-white mb-1">{{ $currentEmail->sender_name ?: $currentEmail->sender_email }}</h2>
                                <div class="text-xs font-mono text-zinc-500 uppercase tracking-widest">{{ $currentEmail->sender_email }}</div>
                            </div>
                        </div>
                        <div class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest px-3 py-1.5 rounded-full border border-white/5 bg-white/5">
                            Received {{ $currentEmail->received_at?->diffForHumans() }}
                        </div>
                    </div>

                    <h1 class="text-2xl md:text-3xl font-black tracking-tight text-white mb-8 leading-tight">
                        {{ $currentEmail->subject }}
                    </h1>

                    @if($viewMode === 'html')
                        <div class="mb-8 p-4 rounded-2xl border transition-all duration-500 @if(!$allowRemoteContent) bg-amber-500/5 border-amber-500/20 @else bg-emerald-500/5 border-emerald-500/20 @endif flex flex-col sm:flex-row items-center justify-between gap-4 group">
                            <div class="flex items-center gap-3">
                                @if(!$allowRemoteContent)
                                    <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                                    </div>
                                    <div>
                                        <div class="text-xs font-bold text-amber-500 uppercase tracking-widest leading-none mb-1">Remote assets blocked</div>
                                        <p class="text-[10px] text-zinc-500 font-medium">For your privacy, Zemail has disabled automatic loading of remote images.</p>
                                    </div>
                                @else
                                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center shrink-0">
                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
                                    </div>
                                    <div>
                                        <div class="text-xs font-bold text-emerald-500 uppercase tracking-widest leading-none mb-1">Remote content enabled</div>
                                        <p class="text-[10px] text-zinc-500 font-medium">Images and remote resources are currently active for this email.</p>
                                    </div>
                                @endif
                            </div>
                            
                            @if(!$allowRemoteContent)
                                <button wire:click="$set('allowRemoteContent', true)" 
                                        class="px-4 py-2 rounded-xl bg-amber-500 text-zinc-950 font-black text-[10px] uppercase tracking-wider hover:bg-amber-400 transition-all flex items-center gap-2 cursor-pointer">
                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                                    Load Content
                                </button>
                            @else
                                <button wire:click="$set('allowRemoteContent', false)" 
                                        class="px-4 py-2 rounded-xl bg-zinc-800 text-zinc-400 font-bold text-[10px] uppercase tracking-wider hover:text-white transition-all flex items-center gap-2 border border-white/5 cursor-pointer">
                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
                                    Re-Block
                                </button>
                            @endif
                        </div>
                    @endif

                    @if($viewMode === 'text' && empty($currentEmail['body_text']))
                        <div class="mb-8 p-4 rounded-2xl bg-zinc-900 border border-white/5 flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-white/5 text-zinc-400 flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                            </div>
                            <div>
                                <div class="text-[10px] font-bold text-zinc-300 uppercase tracking-widest leading-none mb-1">Plain text version missing</div>
                                <p class="text-[9px] text-zinc-500 font-medium">Viewing sanitized HTML version instead.</p>
                            </div>
                        </div>
                    @endif

                    <div class="prose prose-invert max-w-none text-zinc-400 leading-relaxed font-medium mb-12 {{ $viewMode === 'text' ? 'whitespace-pre-wrap font-mono text-[13px] shadow-[inset_0_20px_50px_rgba(0,0,0,0.1)] p-8 bg-zinc-900/30 rounded-3xl border border-white/5 tracking-tight' : 'space-y-4' }}">{!! $this->getProcessedContent($currentEmail) !!}</div>

                    @if($currentEmail->attachment_size > 0 && is_array($currentEmail->attachments_json))
                        <div class="mt-12 pt-8 border-t border-white/5">
                            <h4 class="text-[10px] font-bold text-white uppercase tracking-[0.2em] mb-4">Attachments ({{ count($currentEmail->attachments_json) }})</h4>
                            
                            <div class="relative group/attachments">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 @guest blur-[3px] pointer-events-none select-none grayscale opacity-60 @endguest">
                                    @foreach($currentEmail->attachments_json as $attachment)
                                        <div class="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-pink-500/30 transition-all group">
                                            <div class="flex items-center gap-4">
                                                <div class="w-10 h-10 rounded-xl bg-zinc-900 flex items-center justify-center text-pink-500">
                                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                                                </div>
                                                <div>
                                                    <div class="text-xs font-bold text-white truncate">{{ $attachment['name'] }}</div>
                                                    <div class="text-[9px] font-mono text-zinc-500 uppercase">{{ $attachment['size'] }}</div>
                                                </div>
                                            </div>
                                            @auth
                                                <button class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-400 hover:text-white transition-all cursor-pointer">
                                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                                                </button>
                                            @endauth
                                        </div>
                                    @endforeach
                                </div>

                                @guest
                                    <div class="absolute inset-0 flex items-center justify-center z-20">
                                        <a href="{{ route('login') }}" class="group/btn relative px-6 py-3 rounded-2xl bg-pink-500 text-white font-bold text-xs uppercase tracking-widest shadow-[0_0_20px_rgba(236,72,153,0.3)] hover:scale-105 transition-all">
                                            <span class="relative z-10 flex items-center gap-2">
                                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                                                Login to Download
                                            </span>
                                        </a>
                                    </div>
                                @endguest
                            </div>
                        </div>
                    @endif
                </div>
                </div>
            </div>
        @else
            <!-- Empty State -->
            <div class="flex-1 flex flex-col items-center justify-center p-12 text-center" wire:loading.remove wire:target="selectEmail">
                <div class="w-24 h-24 rounded-3xl bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-700 mb-8 relative">
                    <div class="absolute inset-0 bg-pink-500/5 rounded-3xl blur-2xl"></div>
                    <svg class="w-12 h-12 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">Select an email to read</h3>
                <p class="text-zinc-500 max-w-xs text-sm leading-relaxed">Choose one of your disposable emails from the list to view its full content and secure attachments.</p>
            </div>
        @endif
    </main>
        <!-- Create Mailbox Modal -->
        <div x-show="$wire.showCreateModal" 
             style="display: none;"
             x-data="{ tab: @entangle('createType') }"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-zinc-950/80 backdrop-blur-sm">
            
            <div @click.away="$wire.set('showCreateModal', false)"
                 class="w-full max-w-md bg-zinc-900 border border-white/10 rounded-[32px] overflow-hidden shadow-2xl relative">
                <div class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-emerald-500/5 pointer-events-none"></div>
                
                <div class="p-8 relative z-10">
                    <div class="flex items-center justify-between mb-8">
                        <div>
                            <h3 class="text-xl font-bold text-white mb-1">New Mailbox</h3>
                            <p class="text-xs text-zinc-500 font-medium">Create a new secure disposable identity.</p>
                        </div>
                        <button @click="$wire.set('showCreateModal', false)" class="text-zinc-500 hover:text-white transition-colors cursor-pointer">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                        </button>
                    </div>

                    <!-- Type Selector -->
                    <div class="flex p-1 bg-zinc-950 rounded-2xl mb-8 border border-white/5">
                        <button @click="tab = 'random'" 
                                class="flex-1 py-3 text-xs font-bold rounded-xl transition-all duration-300 cursor-pointer"
                                :class="tab === 'random' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
                            Random
                        </button>
                        <button @click="tab = 'custom'" 
                                class="flex-1 py-3 text-xs font-bold rounded-xl transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer"
                                :class="tab === 'custom' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
                            Custom
                            @if(!auth()->check())
                                <svg class="w-3.5 h-3.5 text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                            @endif
                        </button>
                    </div>

                    <!-- Tab Content Container -->
                    <div class="grid grid-cols-1 grid-rows-1 min-h-[220px]">
                        <div x-show="tab === 'custom'" 
                             x-transition:enter="transition ease-out duration-300 delay-150"
                             x-transition:enter-start="opacity-0 translate-y-2"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-2"
                             wire:key="tab-custom"
                             class="col-start-1 row-start-1  relative">
                            
                            @auth
                                <div class="space-y-6">
                                    <div>
                                        <label class="text-[10px] font-bold text-white uppercase tracking-widest mb-3 block">Username</label>
                                        <input type="text" wire:model="customUsername" placeholder="e.g. dev-test-01" 
                                               class="w-full h-12 bg-zinc-950 border border-white/5 rounded-2xl px-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/50 transition-all font-mono">
                                    </div>
                                    <div>
                                        <label class="text-[10px] font-bold text-white uppercase tracking-widest mb-3 block">Domain Selection</label>
                                        <div class="relative group">
                                            <select wire:model="customDomain" 
                                                    class="w-full h-12 bg-zinc-950 border border-white/5 rounded-2xl px-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/50 transition-all appearance-none text-zinc-300 cursor-pointer">
                                                @foreach($this->available_domains as $domain)
                                                    <option value="{{ $domain->name }}">@ {{ $domain->name }}</option>
                                                @endforeach
                                            </select>
                                            <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="h-full min-h-[240px] flex flex-col items-center justify-center text-center p-8 bg-zinc-950 border border-white/5 rounded-[32px] relative overflow-hidden group">
                                    <div class="absolute inset-0 bg-gradient-to-b from-pink-500/5 to-transparent opacity-50"></div>
                                    <div class="relative z-10 flex flex-col items-center">
                                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 shadow-[0_20px_50px_rgba(236,72,153,0.3)]">
                                            <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                                            </svg>
                                        </div>
                                        <h4 class="text-lg font-black text-white mb-2 tracking-widest uppercase">Login Required</h4>
                                        <p class="text-[11px] text-zinc-500 leading-relaxed font-medium max-w-[220px]">Sign in to create custom aliases and use premium domains.</p>
                                    </div>
                                </div>
                            @endauth
                        </div>

                        <div x-show="tab === 'random'" 
                             x-transition:enter="transition ease-out duration-300 delay-150"
                             x-transition:enter-start="opacity-0 translate-y-2"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-2"
                             wire:key="tab-random"
                             class="col-start-1 row-start-1 min-h-[240px] flex flex-col items-center justify-center text-center p-8 bg-zinc-950 border border-white/5 rounded-[32px] relative overflow-hidden group">
                            <div class="absolute inset-0 bg-gradient-to-b from-pink-500/5 to-transparent opacity-50"></div>
                            <div class="relative z-10 flex flex-col items-center">
                                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 shadow-[0_20px_50px_rgba(236,72,153,0.3)] group-hover:scale-110 transition-transform duration-500">
                                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.456-2.454L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
                                    </svg>
                                </div>
                                <h4 class="text-lg font-black text-white mb-2 tracking-widest uppercase">Random Identity</h4>
                                <p class="text-[11px] text-zinc-500 leading-relaxed font-medium max-w-[220px]">We'll generate a secure, high-entropy unique address for you instantly.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Global Action / Login Button -->
                    <div class="mt-8">
                        @if(!auth()->check())
                            <div x-show="tab === 'custom'">
                                <a href="{{ route('login') }}" class="w-full py-4 rounded-2xl bg-white text-zinc-950 font-black text-sm uppercase tracking-widest hover:bg-zinc-100 hover:shadow-[0_0_30px_rgba(255,255,255,0.1)] transition-all flex items-center justify-center gap-3 relative z-10">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                                    Login to Unlock
                                </a>
                            </div>
                            <button wire:click="createMailbox" 
                                    x-show="tab === 'random'"
                                    class="w-full py-4 rounded-2xl bg-pink-600 text-white font-black text-sm uppercase tracking-widest hover:bg-pink-500 hover:shadow-[0_0_30px_rgba(236,72,153,0.3)] transition-all flex items-center justify-center gap-3 relative z-10 cursor-pointer">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                                Generate Mailbox
                            </button>
                        @else
                            <button wire:click="createMailbox" 
                                    class="w-full py-4 rounded-2xl bg-pink-600 text-white font-black text-sm uppercase tracking-widest hover:bg-pink-500 hover:shadow-[0_0_30px_rgba(236,72,153,0.3)] transition-all flex items-center justify-center gap-3 relative z-10 cursor-pointer">
                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                                Generate Mailbox
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

    <style>
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        @keyframes slide-right {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes slide-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-slide-up {
            animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
    </style>
</div>
