From 3763847dd6be2214a5f6e8ac30999d0d8eaa5ddb Mon Sep 17 00:00:00 2001
From: idevakk <219866223+idevakk@users.noreply.github.com>
Date: Fri, 6 Mar 2026 00:41:23 +0530
Subject: [PATCH] style(mailbox): Add cursor-pointers and fix empty state hover
 shift

---
 .../components/bento/confirm-modal.blade.php  |  4 +-
 .../views/components/layouts/app.blade.php    |  2 +-
 resources/views/livewire/mailbox.blade.php    | 58 +++++++++----------
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/resources/views/components/bento/confirm-modal.blade.php b/resources/views/components/bento/confirm-modal.blade.php
index 919268c..c114183 100644
--- a/resources/views/components/bento/confirm-modal.blade.php
+++ b/resources/views/components/bento/confirm-modal.blade.php
@@ -84,11 +84,11 @@
             
             <div class="grid grid-cols-2 gap-4">
                 <button @click="show = false" 
-                        class="py-4 rounded-2xl bg-white/5 border border-white/10 text-zinc-400 font-black text-[10px] uppercase tracking-[0.2em] hover:bg-white/10 hover:text-white transition-all">
+                        class="py-4 rounded-2xl bg-white/5 border border-white/10 text-zinc-400 font-black text-[10px] uppercase tracking-[0.2em] hover:bg-white/10 hover:text-white transition-all cursor-pointer">
                     Cancel
                 </button>
                 <button @click="confirm()" 
-                        class="py-4 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl transition-all"
+                        class="py-4 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl transition-all cursor-pointer"
                         :class="{
                             'bg-rose-600 text-white hover:bg-rose-500 shadow-rose-900/20': type === 'danger',
                             'bg-blue-600 text-white hover:bg-blue-500 shadow-blue-900/20': type === 'info',
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index ab52a80..32ce6cf 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -83,7 +83,7 @@
                     </div>
 
                     <button @click="toasts = toasts.filter(t => t.id !== toast.id)" 
-                            class="p-1.5 rounded-lg hover:bg-white/5 text-zinc-600 hover:text-white transition-all">
+                            class="p-1.5 rounded-lg hover:bg-white/5 text-zinc-600 hover:text-white transition-all cursor-pointer pointer-events-auto z-10 relative">
                         <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="M6 18L18 6M6 6l12 12" /></svg>
                     </button>
                 </div>
diff --git a/resources/views/livewire/mailbox.blade.php b/resources/views/livewire/mailbox.blade.php
index 0e4969c..0057257 100644
--- a/resources/views/livewire/mailbox.blade.php
+++ b/resources/views/livewire/mailbox.blade.php
@@ -97,7 +97,7 @@
             </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">
+            <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>
@@ -107,7 +107,7 @@
             <!-- 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"
+                        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>
@@ -129,14 +129,14 @@
                             </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"
+                                        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"
+                                        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>
@@ -147,7 +147,7 @@
                                             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"
+                                        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>
@@ -175,7 +175,7 @@
                 <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">
+                            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>
@@ -190,7 +190,7 @@
                                 @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">
+                                                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">
                                                 <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">{{ $mailbox->expires_at?->diffForHumans(['short' => true]) ?? 'Never' }}</div>
@@ -244,7 +244,7 @@
         <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">
+                    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>
@@ -256,7 +256,7 @@
                        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"
+                    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" 
@@ -328,9 +328,9 @@
                     {{-- Current mailbox address for easy reference --}}
                     @if($currentMailbox)
                         <button @click="navigator.clipboard.writeText('{{ $currentMailbox->address }}'); addToast('Address copied to clipboard', 'success')"
-                                class="px-4 py-2.5 rounded-xl bg-zinc-900 border border-white/5 text-[10px] font-mono text-zinc-400 break-all hover:border-pink-500/20 hover:text-white transition-all cursor-pointer group mb-6">
-                            <span class="group-hover:hidden">{{ $currentMailbox->address }}</span>
-                            <span class="hidden group-hover:inline text-pink-500 font-bold uppercase tracking-widest font-sans">Click to Copy</span>
+                                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
 
@@ -350,7 +350,7 @@
             <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"
+                        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
@@ -364,7 +364,7 @@
 
                 <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"
+                        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>
@@ -415,7 +415,7 @@
                 <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">
+                        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>
@@ -455,17 +455,17 @@
             
             <!-- 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">
+                <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" title="Download Email">
+                                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" title="Print Email">
+                                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>
@@ -477,7 +477,7 @@
                                 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" title="Delete Email">
+                            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>
@@ -485,12 +485,12 @@
                 <!-- 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"
+                            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"
+                            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>
@@ -544,13 +544,13 @@
                             
                             @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">
+                                        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">
+                                        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>
@@ -590,7 +590,7 @@
                                                 </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">
+                                                <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
@@ -648,7 +648,7 @@
                             <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">
+                        <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>
@@ -656,12 +656,12 @@
                     <!-- 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"
+                                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"
+                                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())
@@ -751,13 +751,13 @@
                             </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">
+                                    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">
+                                    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>