<!-- Bulk Action Bar - Fixed at bottom of sidebar when in selection mode -->
<transition name="slide-up">
    <div v-if="selectionMode && selectedCount > 0"
         class="fixed bottom-0 left-0 w-80 bg-[var(--bg-secondary)] border-t border-r border-[var(--border-primary)] shadow-lg z-50 transform transition-transform duration-300"
         :class="[
             { 'translate-y-full': bulkActionInProgress },
             isSidebarCollapsed ? '-translate-x-full' : ''
         ]">
        <div class="px-3 py-2">
            <!-- Compact vertical layout for sidebar width -->
            <div class="flex flex-col gap-2">
                <!-- Selection info row -->
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-[var(--text-primary)]">
                        ${ selectedCount } selected
                    </span>
                    <div class="flex items-center gap-2">
                        <button @click="allVisibleSelected ? clearSelection() : selectAll()"
                                class="text-xs text-[var(--text-accent)] hover:underline">
                            ${ allVisibleSelected ? 'Clear' : 'All' }
                        </button>
                        <button @click="exitSelectionMode"
                                class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded transition-colors"
                                title="Exit selection mode">
                            <i class="fas fa-times text-xs"></i>
                        </button>
                    </div>
                </div>

                <!-- Action buttons row -->
                <div class="flex items-center justify-between gap-1">
                    <button @click="openBulkTagModal('add')"
                            class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
                            title="Add or remove tags">
                        <i class="fas fa-tags text-[var(--text-muted)]"></i>
                        <span>Tags</span>
                    </button>

                    <button @click="bulkToggleInbox()"
                            class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
                            title="Toggle inbox status">
                        <i class="fas fa-inbox text-blue-500"></i>
                        <span>Inbox</span>
                    </button>

                    <button @click="bulkToggleHighlight()"
                            class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
                            title="Toggle highlight">
                        <i class="fas fa-star text-amber-500"></i>
                        <span>Star</span>
                    </button>

                    <button @click="openBulkReprocessModal"
                            class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
                            title="Reprocess">
                        <i class="fas fa-redo text-[var(--text-muted)]"></i>
                        <span>Redo</span>
                    </button>

                    <button @click="openBulkDeleteModal"
                            class="flex-1 px-2 py-1.5 text-xs bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors flex items-center justify-center gap-1"
                            title="Delete selected">
                        <i class="fas fa-trash"></i>
                        <span>Delete</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Loading overlay -->
        <div v-if="bulkActionInProgress"
             class="absolute inset-0 bg-[var(--bg-secondary)] bg-opacity-80 flex items-center justify-center">
            <div class="flex items-center gap-2">
                <i class="fas fa-spinner fa-spin text-[var(--text-accent)]"></i>
                <span class="text-xs text-[var(--text-secondary)]">Processing...</span>
            </div>
        </div>
    </div>
</transition>
