feat(shared-ui, todo): add cross-type drag & drop system with tag enrichment

Implement a two-layer DnD system in @manacore/shared-ui/dnd that coexists
with svelte-dnd-action (same-type reordering):

- Layer 1 (Pointer Events): dragSource + dropTarget actions for cross-type
  drags (e.g. Tag → Task). Mobile-first with long-press (300ms) and haptic
  feedback.
- Layer 2 (Passive Overlay): passiveDropZone action detects when
  svelte-dnd-action drags hover over external targets (e.g. Task → Tag pill,
  Task → Trash zone).
- DragPreview: floating pill that follows the finger/cursor during Layer 1
  drags.
- ActionZone: auto-appearing drop zones (trash, archive) during any drag.

Integrate into Todo app:
- TagStrip pills: draggable (dragSource) + accept tasks (passiveDropZone)
- TaskList items: accept tags (dropTarget) + register drags for passive layer
- ViewColumn + FokusLayout: register svelte-dnd-action drags for passive layer
- Layout: DragPreview + ActionZone (trash) added, tasks enriched with resolved
  label objects from shared tags so tag badges actually render on TaskItem.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/todo/apps/web/src/lib/components/TagStrip.svelte

@@ -5,6 +5,16 @@
 	import { DotsThree, Plus, X } from '@manacore/shared-icons';
 	import TagStripModal from './TagStripModal.svelte';
 	import { t } from 'svelte-i18n';
+	import { dragSource, passiveDropZone } from '@manacore/shared-ui/dnd';
+	import type { DragPayload, TaskDragData } from '@manacore/shared-ui/dnd';
+	import { tasksStore } from '$lib/stores/tasks.svelte';
+	import { taskCollection, type LocalTask } from '$lib/data/local-store';
+
+	interface Props {
+		bottomOffset?: string;
+	}
+
+	let { bottomOffset = '72px' }: Props = $props();
 
 	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
 	const activeTagFilter: { readonly ids: string[]; set(ids: string[]): void } =
@@ -12,6 +22,17 @@
 
 	let showModal = $state(false);
 
+	// ── DnD: assign tag when task is dropped on tag pill ────
+	async function handleTaskDropOnTag(tagId: string, payload: DragPayload) {
+		const taskData = payload.data as TaskDragData;
+		const task = await taskCollection.get(taskData.id);
+		if (!task) return;
+		const currentLabels: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+		if (!currentLabels.includes(tagId)) {
+			tasksStore.updateLabels(taskData.id, [...currentLabels, tagId]);
+		}
+	}
+
 	function handleTagClick(tagId: string) {
 		const current = activeTagFilter.ids;
 		if (current.includes(tagId)) {
@@ -42,7 +63,7 @@
 	const hasTags = $derived(tagsCtx.value.length > 0);
 </script>
 
-<div class="tag-strip-wrapper">
+<div class="tag-strip-wrapper" style="--tag-strip-bottom: {bottomOffset}">
 	<div class="tag-strip-container">
 		<!-- Clear Filter Button (always rendered to prevent layout shift) -->
 		<button
@@ -75,6 +96,15 @@
 					onclick={() => handleTagClick(tag.id)}
 					title={tag.name}
 					style="--tag-color: {tag.color || '#8b5cf6'}"
+					use:dragSource={{
+						type: 'tag',
+						data: () => ({ id: tag.id, name: tag.name, color: tag.color || '#8b5cf6' }),
+					}}
+					use:passiveDropZone={{
+						accepts: ['task'],
+						onDrop: (payload) => handleTaskDropOnTag(tag.id, payload),
+						highlightClass: 'tag-drop-highlight',
+					}}
 				>
 					<span class="tag-dot"></span>
 					<span class="tag-name">{tag.name}</span>
@@ -100,7 +130,7 @@
 <style>
 	.tag-strip-wrapper {
 		position: fixed;
-		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(var(--tag-strip-bottom, 72px) + env(safe-area-inset-bottom, 0px));
 		left: 0;
 		right: 0;
 		z-index: 49;
@@ -272,6 +302,45 @@
 		font-weight: 500;
 	}
 
+	/* DnD: Tag is being dragged */
+	:global(.tag-pill.mana-drag-source-active) {
+		opacity: 0.5;
+		transform: scale(0.95) !important;
+	}
+
+	/* DnD: Task hovering over tag pill */
+	.tag-drop-highlight {
+		transform: scale(1.15) !important;
+		background: var(--tag-color) !important;
+		border-color: var(--tag-color) !important;
+		box-shadow: 0 0 16px color-mix(in srgb, var(--tag-color) 40%, transparent) !important;
+	}
+
+	.tag-drop-highlight .tag-dot {
+		background-color: white !important;
+	}
+
+	.tag-drop-highlight .tag-name {
+		color: white !important;
+	}
+
+	/* DnD: Success flash after drop */
+	:global(.tag-pill.mana-passive-zone-success) {
+		animation: tag-drop-success 400ms ease-out;
+	}
+
+	@keyframes tag-drop-success {
+		0% {
+			transform: scale(1.2);
+		}
+		50% {
+			transform: scale(0.95);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
 	/* Responsive */
 	@media (max-width: 640px) {
 		.tag-strip-wrapper {

apps/todo/apps/web/src/lib/components/TaskList.svelte

@@ -16,6 +16,12 @@
 		Trash,
 	} from '@manacore/shared-icons';
 	import { TodoEvents } from '@manacore/shared-utils/analytics';
+	import {
+		dropTarget,
+		registerSvelteActionDrag,
+		clearSvelteActionDrag,
+	} from '@manacore/shared-ui/dnd';
+	import type { DragPayload, TagDragData } from '@manacore/shared-ui/dnd';
 
 	// Context menu state
 	let contextMenuVisible = $state(false);
@@ -188,8 +194,13 @@
 
 	const flipDurationMs = 200;
 
-	function handleDndConsider(e: CustomEvent<{ items: Task[] }>) {
+	function handleDndConsider(e: CustomEvent<{ items: Task[]; info: { id: string } }>) {
 		items = e.detail.items;
+		// Inform passive drop zones that a task is being dragged
+		registerSvelteActionDrag({
+			type: 'task',
+			data: { id: e.detail.info.id, title: '' },
+		});
 	}
 
 	function handleDndFinalize(e: CustomEvent<{ items: Task[]; info: { id: string } }>) {
@@ -223,6 +234,9 @@
 		setTimeout(() => {
 			dropInProgress = false;
 		}, 1000);
+
+		// Clear passive drop zone state
+		clearSvelteActionDrag();
 	}
 
 	async function handleToggleComplete(task: Task) {
@@ -236,6 +250,23 @@
 	async function handleDelete(taskId: string) {
 		await tasksStore.deleteTask(taskId);
 	}
+
+	// ── DnD Layer 1: handle tag dropped onto a task ─────────
+	function handleTagDrop(task: Task, payload: DragPayload) {
+		const tagData = payload.data as TagDragData;
+		const currentLabels: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+		if (!currentLabels.includes(tagData.id)) {
+			tasksStore.updateLabels(task.id, [...currentLabels, tagData.id]);
+		}
+	}
+
+	function tagNotAlreadyOnTask(task: Task) {
+		return (payload: DragPayload) => {
+			const tagData = payload.data as TagDragData;
+			const currentLabels: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+			return !currentLabels.includes(tagData.id);
+		};
+	}
 </script>
 
 {#if enableDragDrop}
@@ -257,7 +288,14 @@
 				<div class="dnd-shadow-placeholder"></div>
 			{:else}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div oncontextmenu={(e) => handleContextMenu(e, task)}>
+				<div
+					oncontextmenu={(e) => handleContextMenu(e, task)}
+					use:dropTarget={{
+						accepts: ['tag'],
+						onDrop: (payload) => handleTagDrop(task, payload),
+						canDrop: tagNotAlreadyOnTask(task),
+					}}
+				>
 					<TaskItem
 						{task}
 						{showCompleted}
@@ -282,7 +320,14 @@
 	<div class="task-list">
 		{#each tasks as task (task.id)}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div oncontextmenu={(e) => handleContextMenu(e, task)}>
+			<div
+				oncontextmenu={(e) => handleContextMenu(e, task)}
+				use:dropTarget={{
+					accepts: ['tag'],
+					onDrop: (payload) => handleTagDrop(task, payload),
+					canDrop: tagNotAlreadyOnTask(task),
+				}}
+			>
 				<TaskItem
 					{task}
 					{showCompleted}
@@ -368,4 +413,33 @@
 		background: rgba(139, 92, 246, 0.1);
 		border-color: rgba(139, 92, 246, 0.4);
 	}
+
+	/* Tag-on-Task drop target hover */
+	:global(.mana-drop-target-hover) {
+		outline: 2px solid var(--color-primary, #8b5cf6);
+		outline-offset: -2px;
+		border-radius: 0.375rem;
+		background: rgba(139, 92, 246, 0.06);
+		transition: all 0.15s ease;
+	}
+
+	:global(.dark .mana-drop-target-hover) {
+		background: rgba(139, 92, 246, 0.12);
+	}
+
+	/* Brief success pulse after tag assigned */
+	:global(.mana-drop-target-success) {
+		animation: drop-success-pulse 400ms ease-out;
+	}
+
+	@keyframes drop-success-pulse {
+		0% {
+			outline-color: #10b981;
+			background: rgba(16, 185, 129, 0.1);
+		}
+		100% {
+			outline-color: transparent;
+			background: transparent;
+		}
+	}
 </style>

apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte

@@ -10,6 +10,7 @@
 	import { tasksStore } from '$lib/stores/tasks.svelte';
 	import { todoSettings } from '$lib/stores/settings.svelte';
 	import { X, DotsSixVertical } from '@manacore/shared-icons';
+	import { registerSvelteActionDrag, clearSvelteActionDrag } from '@manacore/shared-ui/dnd';
 
 	interface Props {
 		columns: GroupedColumn[];
@@ -89,6 +90,10 @@
 
 	function handleDndConsider(columnId: string, e: CustomEvent<DndEvent<Task>>) {
 		localTasksByColumn = { ...localTasksByColumn, [columnId]: e.detail.items };
+		registerSvelteActionDrag({
+			type: 'task',
+			data: { id: e.detail.info.id, title: '' },
+		});
 	}
 
 	function handleDndFinalize(
@@ -107,6 +112,7 @@
 		}
 
 		localTasksByColumn = { ...localTasksByColumn, [columnId]: newItems };
+		clearSvelteActionDrag();
 	}
 
 	function handleAddTask(column: GroupedColumn, title: string) {

apps/todo/apps/web/src/lib/components/board-views/ViewColumn.svelte

@@ -6,6 +6,7 @@
 	import QuickAddTaskInline from '../kanban/QuickAddTaskInline.svelte';
 	import ViewColumnHeader from './ViewColumnHeader.svelte';
 	import { tasksStore } from '$lib/stores/tasks.svelte';
+	import { registerSvelteActionDrag, clearSvelteActionDrag } from '@manacore/shared-ui/dnd';
 
 	interface Props {
 		column: GroupedColumn;
@@ -47,6 +48,10 @@
 
 	function handleDndConsider(e: CustomEvent<DndEvent<Task>>) {
 		localTasks = e.detail.items;
+		registerSvelteActionDrag({
+			type: 'task',
+			data: { id: e.detail.info.id, title: '' },
+		});
 	}
 
 	function handleDndFinalize(e: CustomEvent<DndEvent<Task>>) {
@@ -66,6 +71,7 @@
 		}
 
 		localTasks = newItems;
+		clearSvelteActionDrag();
 	}
 
 	function handleToggleComplete(task: Task) {

apps/todo/apps/web/src/routes/(app)/+layout.svelte

@@ -35,6 +35,7 @@
 	import { linkLocalStore, linkMutations } from '@manacore/shared-links';
 	import { theme } from '$lib/stores/theme';
 	import TagStrip from '$lib/components/TagStrip.svelte';
+	import { DragPreview, ActionZone } from '@manacore/shared-ui/dnd';
 	import {
 		THEME_DEFINITIONS,
 		DEFAULT_THEME_VARIANTS,
@@ -59,13 +60,34 @@
 	import type { LocalBoardView } from '$lib/data/local-store';
 	import { useAllTasks, useAllBoardViews } from '$lib/data/task-queries';
 	import SyncIndicator from '$lib/components/SyncIndicator.svelte';
-	import { List, X } from '@manacore/shared-icons';
 	import { createMinimizedPagesContext } from '$lib/stores/minimized-pages.svelte';
 
 	// Live queries — auto-update when IndexedDB changes (local writes, sync, other tabs)
-	const allTasks = useAllTasks();
+	const rawTasks = useAllTasks();
 	const allTags = useAllSharedTags();
 
+	// ─── Enrich tasks with resolved labels from shared tags ──
+	const allTasks = {
+		get value() {
+			const tagMap = new Map(allTags.value.map((t) => [t.id, t]));
+			return rawTasks.value.map((task) => {
+				const labelIds: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+				if (labelIds.length === 0) return task;
+				const labels = labelIds
+					.map((id) => tagMap.get(id))
+					.filter((t): t is NonNullable<typeof t> => t != null)
+					.map((t) => ({
+						id: t.id,
+						userId: t.userId,
+						name: t.name,
+						color: t.color,
+						createdAt: t.createdAt,
+					}));
+				return { ...task, labels };
+			});
+		},
+	};
+
 	// ─── Board View Management ──────────────────────────────
 	const boardViews = useAllBoardViews();
 
@@ -83,10 +105,14 @@
 		},
 	};
 
+	// Minimized pages context (layout owns state, page syncs via context)
+	const minimizedPages = createMinimizedPagesContext();
+
 	// Provide data to child components via Svelte context
 	setContext('tasks', allTasks);
 	setContext('tags', allTags);
 	setContext('activeTagFilter', activeTagFilter);
+	setContext('minimizedPages', minimizedPages);
 	setContext('activeView', {
 		get value() {
 			return activeView;
@@ -174,15 +200,12 @@
 		}
 	}
 
-	// PillNav collapsed state (controlled by FAB)
-	let isPillNavCollapsed = $state(true);
-
 	// FilterStrip visibility (toggle via Filter button in PillNav)
 	let isFilterStripVisible = $derived(!todoSettings.filterStripCollapsed);
 
-	// Minimized page tabs add extra height to the bottom bar stack
-	let hasMinimizedTabs = $derived(minimizedPagesStore.hasPages);
-	const MINIMIZED_TABS_HEIGHT = 36; // px
+	// BottomStack computes these offsets automatically
+	let pillNavOffset = $state('0px');
+	let tagStripOffset = $state('72px');
 
 	// Use theme store's isDark directly
 	let isDark = $derived(theme.isDark);
@@ -291,16 +314,6 @@
 		}
 	}
 
-	// Toggle PillNav visibility (called by FAB)
-	function handlePillNavToggle() {
-		isPillNavCollapsed = !isPillNavCollapsed;
-		try {
-			localStorage?.setItem('todo-pillnav-collapsed', String(isPillNavCollapsed));
-		} catch {
-			// localStorage not available or quota exceeded
-		}
-	}
-
 	function handleToggleTheme() {
 		theme.toggleMode();
 	}
@@ -375,16 +388,6 @@
 		if ($page.url.pathname === '/' && userSettings.startPage && userSettings.startPage !== '/') {
 			goto(userSettings.startPage, { replaceState: true });
 		}
-
-		// Initialize PillNav collapsed state from localStorage
-		try {
-			const savedPillNavCollapsed = localStorage?.getItem('todo-pillnav-collapsed');
-			if (savedPillNavCollapsed === 'false') {
-				isPillNavCollapsed = false;
-			}
-		} catch {
-			// localStorage not available
-		}
 	}
 </script>
 
@@ -410,96 +413,23 @@
 
 			<!-- UI Elements (hidden in immersive mode) -->
 			{#if !todoSettings.immersiveModeEnabled}
-				<!-- PillNav (shown/hidden via FAB) -->
-				{#if !isPillNavCollapsed}
-					<PillNavigation
-						items={navItems}
-						currentPath={$page.url.pathname}
-						appName="Todo"
-						homeRoute="/"
-						onToggleTheme={handleToggleTheme}
-						{isDark}
-						showThemeToggle={true}
-						showThemeVariants={true}
-						{themeVariantItems}
-						{currentThemeVariantLabel}
-						themeMode={theme.mode}
-						onThemeModeChange={handleThemeModeChange}
-						showLanguageSwitcher={true}
-						{languageItems}
-						{currentLanguageLabel}
-						showLogout={authStore.isAuthenticated}
-						onLogout={handleLogout}
-						loginHref="/login"
-						primaryColor="#8b5cf6"
-						showAppSwitcher={true}
-						{appItems}
-						{userEmail}
-						settingsHref="/settings"
-						manaHref="/mana"
-						profileHref="/profile"
-						allAppsHref="/apps"
-						themesHref="/themes"
-						spiralHref="/spiral"
-						helpHref="/help"
-						onOpenInPanel={handleOpenInPanel}
-						ariaLabel="Hauptnavigation"
-						{spotlightActions}
+				<!-- BottomStack: computes offsets for the entire bottom bar stack -->
+				<BottomStack
+					pillNavVisible={true}
+					tagStripVisible={isFilterStripVisible}
+					bind:pillNavOffset
+					bind:tagStripOffset
+				>
+					<MinimizedTabs
+						pages={minimizedPages.pages}
+						onRestore={(id) => minimizedPages.restore(id)}
+						onRemove={(id) => minimizedPages.remove(id)}
+						onMaximize={(id) => minimizedPages.maximize(id)}
+						onAdd={() => minimizedPages.togglePicker()}
 					/>
+				</BottomStack>
 
-					<!-- Tag strip (toggled via Tags pill) -->
-					{#if isFilterStripVisible}
-						<TagStrip />
-					{/if}
-				{/if}
-
-				<!-- Minimized Page Tabs (between PillNav and QuickInputBar) -->
-				{#if hasMinimizedTabs}
-					<div
-						class="minimized-tabs-bar"
-						style="--tabs-bottom: {(() => {
-							let offset = 16;
-							if (!isPillNavCollapsed) offset += 68;
-							if (!isPillNavCollapsed && isFilterStripVisible) offset += 50;
-							return `${offset}px`;
-						})()}"
-					>
-						<div class="minimized-tabs-inner">
-							{#each minimizedPagesStore.pages as pg (pg.id)}
-								<div
-									class="minimized-tab"
-									role="button"
-									tabindex="0"
-									onclick={() => {
-										window.dispatchEvent(new CustomEvent('restore-page', { detail: pg.id }));
-									}}
-								>
-									<span class="minimized-tab-dot" style="background-color: {pg.color}"></span>
-									<span class="minimized-tab-title">{pg.title}</span>
-									<button
-										class="minimized-tab-close"
-										onclick={(e) => {
-											e.stopPropagation();
-											window.dispatchEvent(new CustomEvent('remove-page', { detail: pg.id }));
-										}}
-										title="Schließen"
-									>
-										<X size={10} />
-									</button>
-								</div>
-							{/each}
-							<button
-								class="minimized-tab-add"
-								onclick={() => window.dispatchEvent(new CustomEvent('toggle-page-picker'))}
-								title="Neue Seite hinzufügen"
-							>
-								<Plus size={14} />
-							</button>
-						</div>
-					</div>
-				{/if}
-
-				<!-- Global Quick Input Bar -->
+				<!-- 1. QuickInputBar (always at bottom) -->
 				{#if $page.url.pathname === '/'}
 					<QuickInputBar
 						onSearch={handleSearch}
@@ -514,40 +444,60 @@
 						deferSearch={true}
 						locale={$locale || 'de'}
 						appIcon="todo"
-						hasFabRight={true}
-						bottomOffset={(() => {
-							let offset = 16;
-							if (!isPillNavCollapsed) offset += 68;
-							if (!isPillNavCollapsed && isFilterStripVisible) offset += 50;
-							if (hasMinimizedTabs) offset += MINIMIZED_TABS_HEIGHT;
-							return `${offset}px`;
-						})()}
+						bottomOffset="16px"
 					/>
 				{/if}
 
-				<!-- FAB to toggle PillNav visibility -->
-				<button
-					class="pillnav-fab"
-					style="--fab-bottom: {(() => {
-						let offset = 20;
-						if (!isPillNavCollapsed) offset += 68;
-						if (!isPillNavCollapsed && isFilterStripVisible) offset += 50;
-						if (hasMinimizedTabs) offset += MINIMIZED_TABS_HEIGHT;
-						return `${offset}px`;
-					})()}"
-					onclick={handlePillNavToggle}
-					title={isPillNavCollapsed ? 'Navigation anzeigen' : 'Navigation ausblenden'}
-					aria-label={isPillNavCollapsed ? 'Navigation anzeigen' : 'Navigation ausblenden'}
-					data-umami-event="pillnav-toggle"
-				>
-					{#if isPillNavCollapsed}
-						<!-- Menu icon -->
-						<List size="48" weight="bold" />
-					{:else}
-						<!-- Close icon -->
-						<X size="48" weight="bold" />
-					{/if}
-				</button>
+				<!-- 2. PillNav (above InputBar, always visible) -->
+				<PillNavigation
+					items={navItems}
+					currentPath={$page.url.pathname}
+					appName="Todo"
+					homeRoute="/"
+					onToggleTheme={handleToggleTheme}
+					{isDark}
+					showThemeToggle={true}
+					showThemeVariants={true}
+					{themeVariantItems}
+					{currentThemeVariantLabel}
+					themeMode={theme.mode}
+					onThemeModeChange={handleThemeModeChange}
+					showLanguageSwitcher={true}
+					{languageItems}
+					{currentLanguageLabel}
+					showLogout={authStore.isAuthenticated}
+					onLogout={handleLogout}
+					loginHref="/login"
+					primaryColor="#8b5cf6"
+					showAppSwitcher={true}
+					{appItems}
+					{userEmail}
+					settingsHref="/settings"
+					manaHref="/mana"
+					profileHref="/profile"
+					allAppsHref="/apps"
+					themesHref="/themes"
+					spiralHref="/spiral"
+					helpHref="/help"
+					onOpenInPanel={handleOpenInPanel}
+					ariaLabel="Hauptnavigation"
+					{spotlightActions}
+					bottomOffset={pillNavOffset}
+				/>
+
+				<!-- 3. TagStrip (above PillNav) -->
+				{#if isFilterStripVisible}
+					<TagStrip bottomOffset={tagStripOffset} />
+				{/if}
+
+				<!-- DnD: floating preview + action zones -->
+				<DragPreview />
+				<ActionZone
+					accepts={['task']}
+					onDrop={(payload) => tasksStore.deleteTask(payload.data.id)}
+					variant="danger"
+					label="Löschen"
+				/>
 			{/if}
 
 			<!-- Immersive Mode Toggle (always visible) -->
@@ -670,149 +620,4 @@
 			padding-bottom: calc(100px + env(safe-area-inset-bottom));
 		}
 	}
-
-	/* FAB to toggle PillNav — sits right next to the centered QuickInputBar */
-	.pillnav-fab {
-		position: fixed;
-		bottom: calc(var(--fab-bottom, 16px) + env(safe-area-inset-bottom, 0px));
-		/* Anchor to center, then offset by half of InputBar max-width (350px) + gap */
-		left: calc(50% + 350px + 0.75rem);
-		width: 56px;
-		height: 56px;
-		border-radius: 50%;
-		background: var(--color-surface-elevated-2);
-		border: 1px solid var(--color-border);
-		box-shadow: var(--shadow-xl);
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1002;
-		transition: all 0.2s ease;
-	}
-
-	/* On narrower screens, FAB sits at the right edge of the padded input area */
-	@media (max-width: 900px) {
-		.pillnav-fab {
-			left: auto;
-			right: 1rem;
-		}
-	}
-
-	.pillnav-fab:hover {
-		transform: scale(1.05);
-	}
-
-	.pillnav-fab:active {
-		transform: scale(0.95);
-	}
-
-	.pillnav-fab :global(svg) {
-		color: var(--color-foreground);
-	}
-
-	/* ── Minimized Page Tabs Bar ─────────────────────────── */
-	.minimized-tabs-bar {
-		position: fixed;
-		bottom: calc(var(--tabs-bottom, 16px) + env(safe-area-inset-bottom, 0px));
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 1001;
-	}
-
-	.minimized-tabs-inner {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.3rem 0.5rem;
-		background: var(--color-surface-elevated, #fffef5);
-		border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
-		border-radius: 0.625rem;
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-		overflow-x: auto;
-		scrollbar-width: none;
-	}
-	:global(.dark) .minimized-tabs-inner {
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-	}
-	.minimized-tabs-inner::-webkit-scrollbar {
-		display: none;
-	}
-
-	.minimized-tab {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.25rem 0.5rem;
-		background: transparent;
-		border: none;
-		border-radius: 0.3rem;
-		cursor: pointer;
-		transition: all 0.15s;
-		white-space: nowrap;
-		flex-shrink: 0;
-		font-family: inherit;
-	}
-	.minimized-tab:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-	:global(.dark) .minimized-tab:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.minimized-tab-dot {
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 9999px;
-		flex-shrink: 0;
-	}
-
-	.minimized-tab-title {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--color-muted-foreground, #6b7280);
-	}
-
-	.minimized-tab-close {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 16px;
-		height: 16px;
-		border: none;
-		background: transparent;
-		color: var(--color-muted-foreground, #d1d5db);
-		border-radius: 0.125rem;
-		cursor: pointer;
-		padding: 0;
-		transition: all 0.15s;
-		opacity: 0.5;
-	}
-	.minimized-tab-close:hover {
-		opacity: 1;
-		background: rgba(0, 0, 0, 0.06);
-	}
-	:global(.dark) .minimized-tab-close:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.minimized-tab-add {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border-radius: 0.3rem;
-		border: none;
-		background: transparent;
-		color: var(--color-muted-foreground, #9ca3af);
-		cursor: pointer;
-		flex-shrink: 0;
-		transition: all 0.15s;
-		opacity: 0.6;
-	}
-	.minimized-tab-add:hover {
-		opacity: 1;
-		color: var(--color-primary, #8b5cf6);
-	}
 </style>