v1.1.9 - Android version prep

src-tauri/Cargo.toml

@@ -38,9 +38,8 @@ reqwest = { version = "0.12", default-features = false, features = ["json", "str
 futures = "0.3"
 rayon = "1"
 rustls = { version = "0.23", default-features = false, features = ["ring", "logging", "std", "tls12"] }
-arboard = { version = "3", features = ["image-data", "wayland-data-control"] }
-png = "0.17"
-
 [target.'cfg(not(target_os = "android"))'.dependencies]
 tauri-plugin-updater = "2"
 tauri-plugin-single-instance = "2"
+arboard = { version = "3", features = ["image-data", "wayland-data-control"] }
+png = "0.17"

src-tauri/src/commands.rs

@@ -11,9 +11,21 @@ use tauri::{AppHandle, Manager, State};
 pub fn open_vault(app: AppHandle, state: State<'_, AppState>, path: String) -> Result<(), String> {
     operations::ensure_vault_structure(&path)?;
 
-    // Initialize search index
-    let search = SearchIndex::new(&path)?;
+    // Initialize search index — rebuild in background on Android (FUSE is slow)
+    let search = std::sync::Arc::new(SearchIndex::new(&path)?);
+    #[cfg(target_os = "android")]
+    {
+        let search_bg = search.clone();
+        let vault = path.clone();
+        std::thread::spawn(move || {
+            let _ = search_bg.rebuild(&vault);
+            log::info!("Android: search index rebuild complete");
+        });
+    }
+    #[cfg(not(target_os = "android"))]
+    {
         search.rebuild(&path)?;
+    }
     *state.search_index.lock().map_err(|e| e.to_string())? = Some(search);
 
     // Start file watcher
@@ -466,6 +478,7 @@ pub fn save_vault_state(state: State<'_, AppState>, vault_state: VaultState) ->
 
 /// Read image from system clipboard (bypasses WebKitGTK clipboard bug).
 /// Returns PNG bytes as Vec<u8>, or error if no image on clipboard.
+#[cfg(not(target_os = "android"))]
 #[tauri::command]
 pub fn read_clipboard_image() -> Result<Vec<u8>, String> {
     let mut clipboard =
@@ -490,6 +503,12 @@ pub fn read_clipboard_image() -> Result<Vec<u8>, String> {
     Ok(buf)
 }
 
+#[cfg(target_os = "android")]
+#[tauri::command]
+pub fn read_clipboard_image() -> Result<Vec<u8>, String> {
+    Err("Clipboard image reading not supported on Android".to_string())
+}
+
 // ── Attachments ──
 
 #[tauri::command]

src-tauri/src/lib.rs

@@ -44,7 +44,7 @@ pub fn run() {
                 )?;
             }
 
-            // On Android, set config dir from Tauri's path resolver
+            // On Android, set config dir from Tauri's path resolver, then reload config
             #[cfg(target_os = "android")]
             {
                 if let Ok(config_dir) = app.path().config_dir() {
@@ -52,6 +52,11 @@ pub fn run() {
                 } else if let Ok(data_dir) = app.path().data_dir() {
                     commands::set_android_config_dir(data_dir);
                 }
+                // Reload config now that the Android config dir is available
+                let reloaded = commands::load_app_config();
+                let _ = app.state::<AppState>().config.lock().map(|mut cfg| {
+                    *cfg = reloaded;
+                });
             }
 
             #[cfg(not(target_os = "android"))]

src-tauri/src/search/mod.rs

@@ -77,18 +77,20 @@ impl SearchIndex {
 
         for entry in WalkDir::new(vault_path)
             .into_iter()
-            .filter_map(|e| e.ok())
-            .filter(|e| {
+            .filter_entry(|e| {
                 let p = e.path();
-                p.is_file()
-                    && p.extension().and_then(|x| x.to_str()) == Some("md")
-                    && !p.starts_with(&hn_dir)
+                !p.starts_with(&hn_dir)
                     && !p
                         .file_name()
                         .and_then(|n| n.to_str())
                         .map(|n| n.starts_with('.'))
                         .unwrap_or(false)
             })
+            .filter_map(|e| e.ok())
+            .filter(|e| {
+                e.file_type().is_file()
+                    && e.path().extension().and_then(|x| x.to_str()) == Some("md")
+            })
         {
             if let Ok(raw) = fs::read_to_string(entry.path()) {
                 let filename = entry.file_name().to_string_lossy().to_string();

src-tauri/src/state.rs

@@ -3,10 +3,11 @@ use crate::types::AppConfig;
 use notify::RecommendedWatcher;
 use std::sync::atomic::AtomicBool;
 use std::sync::Mutex;
+use std::sync::Arc;
 
 pub struct AppState {
     pub config: Mutex<AppConfig>,
-    pub search_index: Mutex<Option<SearchIndex>>,
+    pub search_index: Mutex<Option<Arc<SearchIndex>>>,
     pub watcher: Mutex<Option<RecommendedWatcher>>,
     pub importing: AtomicBool,
     pub pending_open_file: Mutex<Option<String>>,

src-tauri/src/vault/operations.rs

@@ -59,11 +59,11 @@ fn scan_dir_recursive(dir: &Path, vault_root: &str) -> Vec<NotebookEntry> {
         return entries;
     };
 
+    // Collect subdirs (root level only lists directories, note counts come from scan_dir_with_count)
     let mut dirs: Vec<_> = read_dir
         .filter_map(|e| e.ok())
         .filter(|e| {
-            let path = e.path();
-            path.is_dir() && !is_hidden(&path)
+            e.file_type().map(|ft| ft.is_dir()).unwrap_or(false) && !is_hidden(&e.path())
         })
         .collect();
 
@@ -74,6 +74,8 @@ fn scan_dir_recursive(dir: &Path, vault_root: &str) -> Vec<NotebookEntry> {
             .cmp(&b.file_name().to_string_lossy().to_lowercase())
     });
 
+    // Store note_count for the parent directory (used when this is the top-level call)
+    // Each directory pushes its own entry with its own note_count
     for dir_entry in dirs {
         let path = dir_entry.path();
         let name = dir_entry.file_name().to_string_lossy().to_string();
@@ -83,32 +85,71 @@ fn scan_dir_recursive(dir: &Path, vault_root: &str) -> Vec<NotebookEntry> {
             .to_string_lossy()
             .to_string();
 
-        let children = scan_dir_recursive(&path, vault_root);
-        let note_count = count_notes_in_dir(&path);
+        let (children, child_note_count) = scan_dir_with_count(&path, vault_root);
 
         entries.push(NotebookEntry {
             name,
             path: path.to_string_lossy().to_string(),
             relative_path: relative,
             children,
-            note_count,
+            note_count: child_note_count,
         });
     }
 
     entries
 }
 
-fn count_notes_in_dir(dir: &Path) -> usize {
-    fs::read_dir(dir)
-        .map(|rd| {
-            rd.filter_map(|e| e.ok())
-                .filter(|e| {
-                    let path = e.path();
-                    path.is_file() && path.extension().and_then(|x| x.to_str()) == Some("md")
-                })
-                .count()
-        })
-        .unwrap_or(0)
+/// Combined scan: returns (children, note_count) in a single read_dir pass.
+fn scan_dir_with_count(dir: &Path, vault_root: &str) -> (Vec<NotebookEntry>, usize) {
+    let root = Path::new(vault_root);
+
+    let Ok(read_dir) = fs::read_dir(dir) else {
+        return (Vec::new(), 0);
+    };
+
+    let mut subdirs = Vec::new();
+    let mut note_count = 0usize;
+    for entry in read_dir.filter_map(|e| e.ok()) {
+        let ft = match entry.file_type() {
+            Ok(ft) => ft,
+            Err(_) => continue,
+        };
+        if ft.is_dir() && !is_hidden(&entry.path()) {
+            subdirs.push(entry);
+        } else if ft.is_file() && entry.path().extension().and_then(|x| x.to_str()) == Some("md") {
+            note_count += 1;
+        }
+    }
+
+    subdirs.sort_by(|a, b| {
+        a.file_name()
+            .to_string_lossy()
+            .to_lowercase()
+            .cmp(&b.file_name().to_string_lossy().to_lowercase())
+    });
+
+    let mut entries = Vec::new();
+    for dir_entry in subdirs {
+        let path = dir_entry.path();
+        let name = dir_entry.file_name().to_string_lossy().to_string();
+        let relative = path
+            .strip_prefix(root)
+            .unwrap_or(&path)
+            .to_string_lossy()
+            .to_string();
+
+        let (children, child_note_count) = scan_dir_with_count(&path, vault_root);
+
+        entries.push(NotebookEntry {
+            name,
+            path: path.to_string_lossy().to_string(),
+            relative_path: relative,
+            children,
+            note_count: child_note_count,
+        });
+    }
+
+    (entries, note_count)
 }
 
 fn is_hidden(path: &Path) -> bool {
@@ -129,12 +170,64 @@ pub fn scan_notes(vault_path: &str, notebook_path: Option<&str>) -> Result<Vec<N
     let root = Path::new(scan_path);
     let vault_root = Path::new(vault_path);
 
+    log::info!("scan_notes: vault={}, scan={}, exists={}", vault_path, scan_path, root.exists());
+
     if !root.exists() {
         return Err("Path does not exist".to_string());
     }
 
+    // On Android, use metadata-only scan (no file reads) for fast listing on FUSE
+    #[cfg(target_os = "android")]
+    {
+        let mut notes = Vec::new();
+        // Log what read_dir sees
+        if let Ok(rd) = fs::read_dir(root) {
+            let items: Vec<_> = rd.filter_map(|e| e.ok()).collect();
+            log::info!("scan_notes: read_dir found {} entries in {:?}", items.len(), root);
+            for (i, entry) in items.iter().enumerate().take(5) {
+                let ft = entry.file_type().map(|ft| if ft.is_file() { "file" } else if ft.is_dir() { "dir" } else { "other" }).unwrap_or("err");
+                log::info!("  [{}] {:?} type={}", i, entry.file_name(), ft);
+            }
+        } else {
+            log::info!("scan_notes: read_dir FAILED for {:?}", root);
+        }
+
+        if notebook_path.is_some() {
+            if let Ok(rd) = fs::read_dir(root) {
+                for entry in rd.filter_map(|e| e.ok()) {
+                    let is_file = entry.file_type().map(|ft| ft.is_file()).unwrap_or(false);
+                    if is_file && entry.path().extension().and_then(|x| x.to_str()) == Some("md") {
+                        if let Ok(note) = read_note_entry_metadata_only(&entry.path(), vault_root) {
+                            notes.push(note);
+                        }
+                    }
+                }
+            }
+        } else {
+            let hn_dir = helixnotes_dir(vault_path);
+            for entry in WalkDir::new(root)
+                .into_iter()
+                // filter_entry skips descending into hidden dirs (unlike filter)
+                .filter_entry(|e| !is_hidden(e.path()) && !e.path().starts_with(&hn_dir))
+                .filter_map(|e| e.ok())
+                .filter(|e| {
+                    e.file_type().is_file()
+                        && e.path().extension().and_then(|x| x.to_str()) == Some("md")
+                })
+            {
+                if let Ok(note) = read_note_entry_metadata_only(entry.path(), vault_root) {
+                    notes.push(note);
+                }
+            }
+        }
+        log::info!("scan_notes: Android scan found {} notes", notes.len());
+        notes.sort_by(|a, b| b.meta.modified.cmp(&a.meta.modified));
+        return Ok(notes);
+    }
+
+    #[cfg(not(target_os = "android"))]
+    {
         let md_files: Vec<PathBuf> = if notebook_path.is_some() {
-        // Only direct children for a specific notebook
             fs::read_dir(root)
                 .map_err(|e| e.to_string())?
                 .filter_map(|e| e.ok())
@@ -142,17 +235,15 @@ pub fn scan_notes(vault_path: &str, notebook_path: Option<&str>) -> Result<Vec<N
                 .filter(|p| p.is_file() && p.extension().and_then(|x| x.to_str()) == Some("md"))
                 .collect()
         } else {
-        // Recursive for "All Notes"
             WalkDir::new(root)
                 .into_iter()
+                .filter_entry(|e| !is_hidden(e.path()) && !e.path().starts_with(&helixnotes_dir(vault_path)))
                 .filter_map(|e| e.ok())
-            .filter(|e| !is_hidden(e.path()) && !e.path().starts_with(&helixnotes_dir(vault_path)))
                 .map(|e| e.path().to_path_buf())
                 .filter(|p| p.is_file() && p.extension().and_then(|x| x.to_str()) == Some("md"))
                 .collect()
         };
 
-    // Process files in parallel with partial reads
         let mut notes: Vec<NoteEntry> = md_files
             .par_iter()
             .filter_map(|path| read_note_entry_fast(path, vault_root).ok())
@@ -160,6 +251,7 @@ pub fn scan_notes(vault_path: &str, notebook_path: Option<&str>) -> Result<Vec<N
 
         notes.sort_by(|a, b| b.meta.modified.cmp(&a.meta.modified));
         Ok(notes)
+    }
 }
 
 fn read_note_entry(path: &Path, vault_root: &Path) -> Result<NoteEntry, String> {
@@ -167,6 +259,49 @@ fn read_note_entry(path: &Path, vault_root: &Path) -> Result<NoteEntry, String>
     read_note_entry_from_str(&raw, path, vault_root)
 }
 
+/// Android-only: reads just the frontmatter (first 2KB) for tags/title/pinned,
+/// uses filesystem timestamps for dates. No preview text.
+#[cfg(target_os = "android")]
+fn read_note_entry_metadata_only(path: &Path, vault_root: &Path) -> Result<NoteEntry, String> {
+    // Read first 2KB — enough for frontmatter with tags, title, pinned
+    let mut file = fs::File::open(path).map_err(|e| e.to_string())?;
+    let mut buf = vec![0u8; 2048];
+    let bytes_read = file.read(&mut buf).map_err(|e| e.to_string())?;
+    buf.truncate(bytes_read);
+    let raw = String::from_utf8_lossy(&buf);
+
+    let filename = path
+        .file_name()
+        .unwrap_or_default()
+        .to_string_lossy()
+        .to_string();
+
+    let (mut meta, _content) = frontmatter::parse_note(&raw, &filename);
+
+    // Always use filesystem timestamps on Android (faster than parsing date strings)
+    if let Ok(fs_meta) = fs::metadata(path) {
+        if let Ok(m) = fs_meta.modified() {
+            meta.modified = m.into();
+        }
+        if let Ok(c) = fs_meta.created() {
+            meta.created = c.into();
+        }
+    }
+
+    let relative = path
+        .strip_prefix(vault_root)
+        .unwrap_or(path)
+        .to_string_lossy()
+        .to_string();
+
+    Ok(NoteEntry {
+        path: path.to_string_lossy().to_string(),
+        relative_path: relative,
+        meta,
+        preview: String::new(),
+    })
+}
+
 /// Fast version: reads only the first ~2KB of the file (enough for frontmatter + preview).
 fn read_note_entry_fast(path: &Path, vault_root: &Path) -> Result<NoteEntry, String> {
     let mut file = fs::File::open(path).map_err(|e| e.to_string())?;

src/lib/components/AppLayout.svelte

@@ -29,13 +29,16 @@
 		showSettings,
 		sourceMode,
 		mobileView,
-		appConfig
+		appConfig,
+		quickAccessPaths,
+		tags,
+		notes
 	} from '$lib/stores/app';
 
 	const appWindow = getCurrentWindow();
 	const isMac = navigator.platform.startsWith('Mac');
 	const isMobile = /android|ios/i.test(navigator.userAgent);
-	import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile } from '$lib/api';
+	import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile, addQuickAccess, removeQuickAccess, getQuickAccess } from '$lib/api';
 	import { debounce } from '$lib/utils/debounce';
 	import { openNoteWindow } from '$lib/utils/window';
 	import { get } from 'svelte/store';
@@ -46,7 +49,12 @@
 	let editor: Editor;
 	let unlistenFileChange: (() => void) | null = null;
 	let unlistenOpenFile: (() => void) | null = null;
+
+	// Mobile editor header helpers
+	let noteRelativePath = $derived($activeNotePath && $appConfig?.active_vault ? $activeNotePath.replace($appConfig.active_vault + '/', '') : '');
+	let isQuickAccess = $derived(noteRelativePath ? $quickAccessPaths.includes(noteRelativePath) : false);
 	let backupInterval: ReturnType<typeof setInterval> | null = null;
+
 	let navigatingFromHistory = false;
 	let noteHistory: string[] = [];
 	let noteHistoryIndex = -1;
@@ -127,7 +135,7 @@
 
 	const persistState = debounce(async () => {
 		const state: VaultState = {
-			last_open_note: null,
+			last_open_note: $activeNotePath,
 			sidebar_width: $sidebarWidth,
 			notelist_width: $notelistWidth,
 			sidebar_collapsed: $sidebarCollapsed,
@@ -154,12 +162,11 @@
 	}
 
 	function handleViewChanged() {
-		noteList?.refresh(true);
+		noteList?.refresh();
 		if (isMobile) $mobileView = 'notelist';
 	}
 
 	async function createAndFocusNote() {
-		if (isMobile && $mobileView !== 'notelist') $mobileView = 'notelist';
 		await noteList?.handleCreateNote();
 		editor?.focusTitle();
 		if (isMobile) $mobileView = 'editor';
@@ -182,6 +189,38 @@
 		}
 	}
 
+	// Android back gesture / hardware back button support
+	let mobileNavFromPopstate = false;
+
+	if (isMobile) {
+		// Seed initial history state
+		history.replaceState({ mobileView: 'sidebar' }, '');
+
+		// When mobileView changes forward, push browser history so Android back gesture works
+		$effect(() => {
+			const view = $mobileView;
+			if (mobileNavFromPopstate) {
+				mobileNavFromPopstate = false;
+				return;
+			}
+			// Replace state to track current view
+			history.pushState({ mobileView: view }, '');
+		});
+
+		window.addEventListener('popstate', (e) => {
+			const currentView = $mobileView;
+			if (currentView === 'sidebar') {
+				// Already at root — let Android handle it (exit app)
+				return;
+			}
+			mobileNavFromPopstate = true;
+			if (currentView === 'editor') $mobileView = 'notelist';
+			else if (currentView === 'notelist') $mobileView = 'sidebar';
+			// Push state again so next back gesture also works
+			history.pushState({ mobileView: $mobileView }, '');
+		});
+	}
+
 	function mobileBack() {
 		if ($mobileView === 'editor') $mobileView = 'notelist';
 		else if ($mobileView === 'notelist') $mobileView = 'sidebar';
@@ -273,28 +312,84 @@
 		persistState();
 	});
 
+	$effect(() => {
+		$activeNotePath;
+		persistState();
+	});
+
 	onMount(async () => {
+		let lastNotePath: string | null = null;
 		try {
 			const state = await loadVaultState();
 			$sidebarWidth = state.sidebar_width;
 			$notelistWidth = state.notelist_width;
 			$sidebarCollapsed = state.sidebar_collapsed;
 			$collapsedNotebooks = state.collapsed_notebooks ?? [];
+			lastNotePath = state.last_open_note ?? null;
 		} catch (_) {}
 
+		// On mobile, prefetch last-opened note so first tap is instant
+		let prefetchPromise: Promise<any> | null = null;
+		if (isMobile && lastNotePath) {
+			prefetchPromise = readNote(lastNotePath).catch(() => null);
+		}
+
 		applyTheme($theme);
 
 		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
 			if ($theme === 'system') applyTheme('system');
 		});
 
-		await sidebar?.refresh();
-		await noteList?.refresh();
+		// Run sidebar and note list refresh in parallel
+		await Promise.all([sidebar?.refresh(), noteList?.refresh()]);
 
+		// On mobile, derive tags from the scanned notes (avoids a separate full-scan Rust call)
+		if (isMobile) {
+			const tagMap = new Map<string, number>();
+			for (const note of $notes) {
+				for (const tag of note.meta.tags) {
+					tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
+				}
+			}
+			$tags = Array.from(tagMap.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+		}
+
+		// On mobile, auto-load the last-opened note so it's ready when the user taps it
+		if (isMobile && prefetchPromise) {
+			prefetchPromise.then((noteContent) => {
+				if (noteContent && lastNotePath && !$activeNotePath) {
+					$activeNote = noteContent;
+					$activeNotePath = lastNotePath;
+					$editorDirty = false;
+					editor?.loadNote(lastNotePath, noteContent.content);
+				}
+			});
+		}
+
+		if (isMobile) {
+			// Mobile: debounce file-changed heavily and skip when actively editing
+			// (our own saves trigger the watcher, causing expensive refreshes on FUSE)
+			const debouncedRefresh = debounce(async () => {
+				if (get(editorDirty)) return; // user is still typing, skip
+				await Promise.all([sidebar?.refresh(), noteList?.refresh(true)]);
+				// Re-derive tags from refreshed notes
+				const tagMap = new Map<string, number>();
+				for (const note of get(notes)) {
+					for (const tag of note.meta.tags) {
+						tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
+					}
+				}
+				tags.set(Array.from(tagMap.entries()).sort((a, b) => a[0].localeCompare(b[0])));
+			}, 3000);
+			unlistenFileChange = await listen<FileEvent>('file-changed', () => {
+				debouncedRefresh();
+			});
+		} else {
 			unlistenFileChange = await listen<FileEvent>('file-changed', async () => {
 				await sidebar?.refresh();
 				await noteList?.refresh(true);
 			});
+		}
 
 		// Listen for file open events (from single-instance or OS file associations)
 		unlistenOpenFile = await listen<string>('open-file', async (event) => {
@@ -343,18 +438,18 @@
 					</svg>
 				</div>
 			{/if}
+			{#if $mobileView !== 'editor'}
 				<span class="mobile-header-title">
 					{#if $mobileView === 'sidebar'}
 						HelixNotes
-				{:else if $mobileView === 'notelist'}
-					{$activeNotebook?.name || 'All Notes'}
 					{:else}
-					{$activeNote?.meta.title || 'Untitled'}
+						{$activeNotebook?.name || 'All Notes'}
 					{/if}
 				</span>
+			{/if}
 			<div class="mobile-header-actions">
 				{#if $mobileView === 'editor'}
-					<button class="mobile-header-btn" class:active={$readOnly} onclick={() => ($readOnly = !$readOnly)}>
+					<button class="mobile-header-btn" class:active={$readOnly} onclick={() => ($readOnly = !$readOnly)} title={$readOnly ? 'Edit' : 'View'}>
 						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 							{#if $readOnly}
 								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
@@ -365,18 +460,67 @@
 							{/if}
 						</svg>
 					</button>
-				{:else}
-					<button class="mobile-header-btn" onclick={createAndFocusNote}>
-						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
-							<path d="M12 5v14M5 12h14" />
+					<button class="mobile-header-btn" class:active={$sourceMode} onclick={() => ($sourceMode = !$sourceMode)} title={$sourceMode ? 'Rich Editor' : 'Source Mode'}>
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
+						</svg>
+					</button>
+					<button class="mobile-header-btn" onclick={() => editor?.openNoteSearch()} title="Find in note">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+						</svg>
+					</button>
+					<button class="mobile-header-btn" class:active={$activeNote?.meta.pinned} onclick={() => { if ($activeNote) { $activeNote.meta.pinned = !$activeNote.meta.pinned; $editorDirty = true; } }} title="Pin">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M12 17v5"/><path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
+						</svg>
+					</button>
+					<button class="mobile-header-btn" class:active={isQuickAccess} onclick={async () => {
+						if (!noteRelativePath) return;
+						try {
+							if (isQuickAccess) { await removeQuickAccess(noteRelativePath); } else { await addQuickAccess(noteRelativePath); }
+							$quickAccessPaths = (await getQuickAccess()).map(n => n.relative_path);
+						} catch (e) { console.error('Quick access toggle failed:', e); }
+					}} title="Quick Access">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill={isQuickAccess ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+						</svg>
+					</button>
+					<button class="mobile-header-btn" onclick={() => editor?.toggleOutlinePanel()} title="Outline">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="20" y2="12"/><line x1="8" y1="18" x2="20" y2="18"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/>
+						</svg>
+					</button>
+					<button class="mobile-header-btn" onclick={() => editor?.toggleHistoryPanel()} title="History">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+						</svg>
+					</button>
+					{#if $appConfig?.ai_provider && ($appConfig?.ai_provider === 'ollama' || $appConfig?.ai_api_key || $appConfig?.openai_api_key)}
+					<button class="mobile-header-btn" onclick={() => editor?.triggerAiMenu()} title="AI Actions">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/>
 						</svg>
 					</button>
 					{/if}
-				<button class="mobile-header-btn" onclick={() => ($showInfo = true)} title="Info">
+				{:else}
+					<button class="mobile-header-btn" onclick={() => ($showSearch = true)} title="Search">
 						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-						<circle cx="12" cy="12" r="10" />
-						<line x1="12" y1="16" x2="12" y2="12" />
-						<line x1="12" y1="8" x2="12.01" y2="8" />
+							<circle cx="11" cy="11" r="8" />
+							<line x1="21" y1="21" x2="16.65" y2="16.65" />
+						</svg>
+					</button>
+					<button class="mobile-header-btn" onclick={createAndFocusNote} title="New Note">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+							<path d="M12 5v14M5 12h14" />
+						</svg>
+					</button>
+					<button class="mobile-header-btn" onclick={handleDailyNote} title="Daily Note">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+							<line x1="16" y1="2" x2="16" y2="6" />
+							<line x1="8" y1="2" x2="8" y2="6" />
+							<line x1="3" y1="10" x2="21" y2="10" />
 						</svg>
 					</button>
 					<button class="mobile-header-btn" onclick={() => ($showSettings = true)} title="Settings">
@@ -385,6 +529,7 @@
 							<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
 						</svg>
 					</button>
+				{/if}
 			</div>
 		</div>
 
@@ -401,40 +546,6 @@
 			</div>
 		</div>
 
-		<!-- Mobile Bottom Nav -->
-		{#if $mobileView !== 'editor'}
-		<div class="mobile-bottom-nav">
-			<button class="mobile-nav-item" class:active={$mobileView === 'sidebar'} onclick={() => ($mobileView = 'sidebar')}>
-				<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-					<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
-				</svg>
-				<span>Notebooks</span>
-			</button>
-			<button class="mobile-nav-item" onclick={() => $showSearch = true}>
-				<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-					<circle cx="11" cy="11" r="8" />
-					<line x1="21" y1="21" x2="16.65" y2="16.65" />
-				</svg>
-				<span>Search</span>
-			</button>
-			<button class="mobile-nav-item" onclick={handleDailyNote}>
-				<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-					<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-					<line x1="16" y1="2" x2="16" y2="6" />
-					<line x1="8" y1="2" x2="8" y2="6" />
-					<line x1="3" y1="10" x2="21" y2="10" />
-				</svg>
-				<span>Daily</span>
-			</button>
-			<button class="mobile-nav-item" onclick={() => ($showSettings = true)}>
-				<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-					<circle cx="12" cy="12" r="3" />
-					<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
-				</svg>
-				<span>Settings</span>
-			</button>
-		</div>
-		{/if}
 	</div>
 {:else}
 	<!-- ═══ DESKTOP LAYOUT ═══ -->
@@ -641,6 +752,7 @@
 		display: flex;
 		align-items: center;
 		gap: 2px;
+		margin-left: auto;
 	}
 
 	.mobile-header-btn {
@@ -685,38 +797,4 @@
 		pointer-events: auto;
 	}
 
-	.mobile-bottom-nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-around;
-		height: 56px;
-		background: var(--bg-secondary);
-		border-top: 1px solid var(--border-color);
-		flex-shrink: 0;
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-
-	.mobile-nav-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 2px;
-		padding: 6px 16px;
-		border: none;
-		background: none;
-		color: var(--text-tertiary);
-		font-size: 10px;
-		font-weight: 500;
-		cursor: pointer;
-		border-radius: 8px;
-		transition: color 0.15s;
-	}
-
-	.mobile-nav-item:active {
-		background: var(--bg-hover);
-	}
-
-	.mobile-nav-item.active {
-		color: var(--accent);
-	}
 </style>

src/lib/components/Editor.svelte

@@ -52,7 +52,7 @@
 	let keyboardHeight = $state(0);
 	if (isMobile && typeof window !== 'undefined' && window.visualViewport) {
 		const vv = window.visualViewport;
-		const update = () => { keyboardHeight = Math.max(0, Math.round(window.innerHeight - vv.height)); };
+		const update = () => { keyboardHeight = Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)); };
 		vv.addEventListener('resize', update);
 		vv.addEventListener('scroll', update);
 	}
@@ -70,6 +70,7 @@
 	let ignoreNextUpdate = false;
 	let isLoadingNote = false;
 	let fixingBlobsPromise: Promise<void> = Promise.resolve();
+	let hasPendingBlobs = false;
 	let lastSourceMode = $sourceMode;
 	let linkContextMenu = $state<{ x: number; y: number; href: string; anchor: HTMLAnchorElement } | null>(null);
 	let titleWasStripped = false;
@@ -297,6 +298,17 @@
 		renderHTML({ HTMLAttributes }) {
 			const src = HTMLAttributes.src || '';
 			const name = HTMLAttributes.name || 'file.pdf';
+			if (isMobile) {
+				// On mobile, render as a clickable link instead of iframe
+				const vaultRoot = $appConfig?.active_vault ?? '';
+				const absPath = normalizePath(`${vaultRoot}/${decodeURIComponent(src)}`);
+				return ['div', mergeAttributes({ 'data-pdf-src': src, 'data-pdf-name': name, class: 'pdf-embed-mobile' }),
+					['a', { href: '#', 'data-open-file': absPath, class: 'pdf-link-mobile', onclick: 'return false;' },
+						['span', { class: 'pdf-icon-mobile' }, '\uD83D\uDCC4'],
+						['span', {}, name],
+					],
+				];
+			}
 			const vaultRoot = $appConfig?.active_vault ?? '';
 			const pdfHeight = $appConfig?.pdf_height ?? 600;
 			const absPath = normalizePath(`${vaultRoot}/${decodeURIComponent(src)}`);
@@ -1058,7 +1070,11 @@
 
 	const autoSave = debounce(async () => {
 		if (!$activeNote || !$activeNotePath || !$editorDirty) return;
-		// Wait for any pending blob→asset conversions to finish before serializing
+		// Only fix blob images if a paste occurred (avoids full doc scan on every save)
+		if (hasPendingBlobs) {
+			hasPendingBlobs = false;
+			fixingBlobsPromise = fixBlobImages();
+		}
 		await fixingBlobsPromise;
 		try {
 			const body = $sourceMode
@@ -1075,7 +1091,7 @@
 		} catch (e) {
 			console.error('Auto-save failed:', e);
 		}
-	}, 500);
+	}, isMobile ? 1500 : 500);
 
 	export async function forceSave() {
 		if (!$activeNote || !$activeNotePath) return;
@@ -1872,11 +1888,14 @@
 			return `![${alt}](${url.replace(/ /g, '%20')})`;
 		});
 
-		// Pre-process: transform PDF embed divs into iframes before markdown-it (it passes HTML through)
+		// Pre-process: transform PDF embed divs — iframes on desktop, clickable links on mobile
 		src = src.replace(/<div[^>]*data-pdf-src="([^"]*)"[^>]*data-pdf-name="([^"]*)"[^>]*>[^<]*<\/div>/gi, (_, pdfSrc, name) => {
 			const vaultRoot = $appConfig?.active_vault ?? '';
-			const pdfHeight = $appConfig?.pdf_height ?? 600;
 			const absPath = normalizePath(`${vaultRoot}/${decodeURIComponent(pdfSrc)}`);
+			if (isMobile) {
+				return `<div class="pdf-embed-mobile"><a href="#" data-open-file="${absPath}" class="pdf-link-mobile" onclick="return false;">\uD83D\uDCC4 ${name}</a></div>`;
+			}
+			const pdfHeight = $appConfig?.pdf_height ?? 600;
 			const displaySrc = convertFileSrc(absPath);
 			return `<div data-pdf-src="${pdfSrc}" data-pdf-name="${name}" class="pdf-embed"><iframe src="${displaySrc}" width="100%" height="${pdfHeight}px"></iframe><p class="pdf-label">${name}</p></div>`;
 		});
@@ -1972,11 +1991,16 @@
 		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 	}
 
-	// When editorElement appears in DOM (first note selected), initialize TipTap
+	// When editorElement appears in DOM, initialize TipTap.
+	// On mobile, pre-create editor with empty content so first note load is fast.
 	$effect(() => {
-		if (editorElement && !editor && pendingContent !== null) {
+		if (editorElement && !editor) {
+			if (pendingContent !== null) {
 				createEditor(pendingContent);
 				pendingContent = null;
+			} else if (isMobile) {
+				createEditor('');
+			}
 		}
 	});
 
@@ -2094,6 +2118,20 @@
 							}
 						}
 					},
+					// On mobile, handle clicks on PDF file links to open in external app
+					...(isMobile ? { click: (_view: any, event: MouseEvent) => {
+						const target = (event.target as HTMLElement).closest('[data-open-file]') as HTMLElement | null;
+						if (target) {
+							event.preventDefault();
+							const filePath = target.getAttribute('data-open-file');
+							if (filePath) {
+								const bridge = (window as any).Android;
+								if (bridge && typeof bridge.openFile === 'function') {
+									bridge.openFile(filePath);
+								}
+							}
+						}
+					}} : {}),
 					// Prevent native text drag — it causes copy-instead-of-move in Tauri's webview.
 					// File drops from OS are handled by Tauri's onDragDropEvent listener instead.
 					dragstart: (_view, event) => {
@@ -2104,7 +2142,11 @@
 					},
 				},
 				handleDrop: (_view, event) => handleFileDrop(event),
-				handlePaste: (_view, event) => handleFilePaste(event),
+				handlePaste: (_view, event) => {
+					const handled = handleFilePaste(event);
+					if (!handled) hasPendingBlobs = true; // ProseMirror may insert blob: images from web paste
+					return handled;
+				},
 			},
 			onTransaction: () => {
 				// Batch toolbar state updates to once per frame — avoids ~35 isActive() calls per transaction during selection drag
@@ -2114,8 +2156,9 @@
 						editorState++;
 					});
 				}
-				updateSlashMenu();
-				updateWikiLinkMenu();
+				// On mobile, only check menus when they're already open (avoid work on every keystroke)
+				if (!isMobile || slashMenu) updateSlashMenu();
+				if (!isMobile || wikiLinkMenu) updateWikiLinkMenu();
 			},
 			onUpdate: () => {
 				if (ignoreNextUpdate || isLoadingNote) {
@@ -2123,10 +2166,8 @@
 					return;
 				}
 				$editorDirty = true;
-				// Fix any blob: URLs from pasted web images BEFORE saving
-				fixingBlobsPromise = fixBlobImages();
 				autoSave();
-				if (showOutline) updateOutline();
+				if (!isMobile && showOutline) updateOutline();
 			},
 		});
 		editorReady = true;
@@ -2136,6 +2177,19 @@
 		}
 	}
 
+	export function toggleOutlinePanel() {
+		showOutline = !showOutline;
+		if (showOutline) updateOutline();
+	}
+
+	export function toggleHistoryPanel() {
+		toggleHistory();
+	}
+
+	export function triggerAiMenu() {
+		openAiMenu();
+	}
+
 	export function addLinkFromToolbar() {
 		if (!editor) return;
 		const { from, to } = editor.state.selection;
@@ -2245,7 +2299,14 @@
 			if (href) {
 				event.preventDefault();
 				event.stopPropagation();
-				linkContextMenu = { x: event.clientX, y: event.clientY, href, anchor };
+				let lx = event.clientX;
+				let ly = event.clientY;
+				const lw = 200, lh = 200;
+				if (lx + lw > window.innerWidth) lx = window.innerWidth - lw - 8;
+				if (ly + lh > window.innerHeight) ly = window.innerHeight - lh - 8;
+				if (lx < 4) lx = 4;
+				if (ly < 4) ly = 4;
+				linkContextMenu = { x: lx, y: ly, href, anchor };
 				return;
 			}
 		}
@@ -2492,7 +2553,10 @@
 		aiTranslateMenu = false;
 		aiCustomPrompt = '';
 
-		if (hasSelection) {
+		if (isMobile) {
+			// Mobile: bottom sheet, no positioning needed
+			aiMenu = { x: 0, y: 0 };
+		} else if (hasSelection) {
 			const coords = editor.view.coordsAtPos(from);
 			let x = coords.left;
 			let y = coords.top - 8;
@@ -2803,7 +2867,7 @@
 			const data = Array.from(new Uint8Array(buffer));
 			const relativePath = await saveAttachment(file.name, data);
 			if (!editor) return;
-			const usePdfPreview = $appConfig?.pdf_preview ?? false;
+			const usePdfPreview = !isMobile && ($appConfig?.pdf_preview ?? false);
 			if (usePdfPreview) {
 				editor.chain().focus().insertContent({
 					type: 'pdfEmbed',
@@ -2898,17 +2962,26 @@
 			resetSourceHistory(sourceContent);
 			lastSourceMode = true;
 		} else if (!isSource && lastSourceMode) {
-			// Switching BACK to WYSIWYG: destroy old editor (its DOM element is gone),
+			lastSourceMode = false;
+			if (isMobile) {
+				// Mobile: editor stays in DOM, just update its content
+				const content = sourceContent || ($activeNote?.content ?? '');
+				if (editor) {
+					ignoreNextUpdate = true;
+					editor.commands.setContent(markdownToHtml(content));
+				}
+			} else {
+				// Desktop: destroy old editor (its DOM element is gone),
 				// wait for DOM to swap textarea→div, then create editor on new element.
 				destroyEditor();
 				const content = sourceContent || ($activeNote?.content ?? '');
-			lastSourceMode = false;
 				tick().then(() => {
 					if (editorElement && !editor) {
 						createEditor(content);
 					}
 				});
 			}
+		}
 	});
 
 	// Tauri drag-drop listener for OS file drops (browser DragEvent doesn't have files in Tauri)
@@ -2933,7 +3006,7 @@
 					readFile(filePath).then((data) => {
 						saveAttachment(name, Array.from(data)).then((relativePath) => {
 							if (!editor) return;
-							const usePdfPreview = $appConfig?.pdf_preview ?? false;
+							const usePdfPreview = !isMobile && ($appConfig?.pdf_preview ?? false);
 							if (usePdfPreview) {
 								editor.chain().focus().insertContent({
 									type: 'pdfEmbed',
@@ -3039,14 +3112,14 @@
 					}}
 				/>
 			</div>
-			<div class="toolbar-actions" class:mobile={isMobile}>
+			{#if !isMobile}
+			<div class="toolbar-actions">
 				{#if $editorDirty}
 					<span class="save-indicator">Unsaved</span>
 				{/if}
 				{#if $readOnly}
 					<span class="readonly-indicator">View Mode</span>
 				{/if}
-				{#if !isMobile}
 				<button
 					class="icon-btn"
 					class:active={noteSearchOpen}
@@ -3057,7 +3130,6 @@
 						<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
 					</svg>
 				</button>
-				{/if}
 
 				<button
 					class="icon-btn"
@@ -3071,7 +3143,7 @@
 					}}
 					title={$activeNote?.meta.pinned ? 'Unpin note' : 'Pin note'}
 				>
-					<svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 						<path d="M12 17v5"/>
 						<path d="M9 2h6l-1 7h4l-2 4H8l-2-4h4L9 2z"/>
 					</svg>
@@ -3095,7 +3167,7 @@
 					}}
 					title={isQuickAccess ? 'Remove from Quick Access' : 'Add to Quick Access'}
 				>
-					<svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill={isQuickAccess ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill={isQuickAccess ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 						<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
 					</svg>
 				</button>
@@ -3105,7 +3177,7 @@
 					onclick={() => { showOutline = !showOutline; if (showOutline) updateOutline(); }}
 					title="Outline"
 				>
-					<svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 						<line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="20" y2="12"/><line x1="8" y1="18" x2="20" y2="18"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/>
 					</svg>
 				</button>
@@ -3115,12 +3187,11 @@
 					onclick={toggleHistory}
 					title="Version history"
 				>
-					<svg width={isMobile ? "20" : "16"} height={isMobile ? "20" : "16"} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 						<circle cx="12" cy="12" r="10"/>
 						<polyline points="12 6 12 12 16 14"/>
 					</svg>
 				</button>
-				{#if !isMobile}
 				{#if $appConfig?.enable_wiki_links}
 				<button
 					class="icon-btn"
@@ -3155,8 +3226,8 @@
 						<path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z" />
 					</svg>
 				</button>
-				{/if}
 			</div>
+			{/if}
 		</div>
 
 		<div class="editor-body-wrapper">
@@ -3196,6 +3267,55 @@
 			{/if}
 			<div class="editor-body-row">
 			<div class="editor-body">
+				{#if isMobile}
+					<!-- Mobile: both views always in DOM, toggled via display to avoid slow editor re-creation -->
+					<textarea
+						class="source-editor"
+						style={$sourceMode ? '' : 'display:none'}
+						bind:this={sourceElement}
+						bind:value={sourceContent}
+						readonly={$readOnly}
+						onclick={() => { showOutline = false; }}
+						oninput={() => {
+							$editorDirty = true;
+							autoSave();
+							pushSourceHistoryDebounced();
+						}}
+						onkeydown={(e) => {
+							const mod = e.ctrlKey || e.metaKey;
+							if (e.key === 'Enter' && e.shiftKey && !mod) {
+								e.preventDefault();
+								const ta = sourceElement;
+								const start = ta.selectionStart;
+								const end = ta.selectionEnd;
+								const val = ta.value;
+								sourceContent = val.slice(0, start) + '  \n' + val.slice(end);
+								tick().then(() => {
+									const newPos = start + 3;
+									ta.setSelectionRange(newPos, newPos);
+								});
+								$editorDirty = true;
+								autoSave();
+								pushSourceHistoryDebounced();
+								return;
+							}
+							if (mod && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
+								e.preventDefault();
+								sourceUndo();
+								return;
+							}
+							if ((mod && (e.key === 'z' || e.key === 'Z') && e.shiftKey) || (mod && (e.key === 'y' || e.key === 'Y'))) {
+								e.preventDefault();
+								sourceRedo();
+								return;
+							}
+						}}
+						spellcheck="false"
+					></textarea>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="tiptap-wrapper" style={$sourceMode ? 'display:none' : ''} bind:this={editorElement} onclick={(e) => { closeLinkContextMenu(); handleEditorClick(e); showOutline = false; }}></div>
+				{:else}
+					<!-- Desktop: conditional rendering with line numbers -->
 					{#if $sourceMode}
 						{#if $appConfig?.show_line_numbers}
 							<div class="line-numbers-clip" aria-hidden="true">
@@ -3303,6 +3423,7 @@
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div class="tiptap-wrapper" bind:this={editorElement} onclick={(e) => { closeLinkContextMenu(); handleEditorClick(e); showOutline = false; }} oncontextmenu={handleEditorContextMenu}></div>
 					{/if}
+				{/if}
 			</div>
 
 			{#if showHistory}
@@ -3383,10 +3504,44 @@
 
 		{#if editorReady && !$sourceMode}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div class="editor-formatting-bar" style={isMobile && keyboardHeight > 0 ? `bottom: ${keyboardHeight}px` : ''} onclick={() => { headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }}>
+			<div class="editor-formatting-bar" style={isMobile ? `${keyboardHeight > 0 ? `bottom: ${keyboardHeight}px;` : ''}${anyDropdownOpen ? 'overflow: visible;' : ''}` : ''} onclick={() => { headingDropdown = false; colorDropdown = false; highlightDropdown = false; tablePickerOpen = false; alignDropdown = false; insertDropdown = false; }}>
 				{#if isMobile}
 				<!-- ═══ MOBILE formatting bar: compact, relevant buttons only ═══ -->
 
+				<!-- Insert (+) dropdown — at front like desktop -->
+				<div class="fmt-dropdown-wrap">
+					<button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; }} title="Insert">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+					</button>
+					{#if insertDropdown}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div class="fmt-dropdown insert-dropdown" onclick={(e) => e.stopPropagation()}>
+							<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-image-input')?.click(); }}>
+								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 00-2.828 0L6 21"/></svg>
+								Image
+							</button>
+							<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-file-input')?.click(); }}>
+								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 01-2-2V4a2 2 0 012-2h8a2.4 2.4 0 011.704.706l3.588 3.588A2.4 2.4 0 0120 8v12a2 2 0 01-2 2z"/><path d="M14 2v5a1 1 0 001 1h5"/></svg>
+								File
+							</button>
+							<button onclick={() => { insertDropdown = false; editor?.chain().focus().setHorizontalRule().run(); }}>
+								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
+								Horizontal Rule
+							</button>
+							<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleCodeBlock().run(); }}>
+								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
+								Code Block
+							</button>
+							<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleBlockquote().run(); }}>
+								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 5H3"/><path d="M21 12H8"/><path d="M21 19H8"/><path d="M3 12v7"/></svg>
+								Quote
+							</button>
+						</div>
+					{/if}
+				</div>
+
+				<div class="fmt-sep"></div>
+
 				<!-- Heading dropdown -->
 				<div class="fmt-dropdown-wrap">
 					<button class="fmt-btn" class:active={(editorState, editor.isActive('heading'))} onclick={(e) => { e.stopPropagation(); headingDropdown = !headingDropdown; insertDropdown = false; }} title="Heading">
@@ -3456,39 +3611,14 @@
 					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 004 14.5 5.5 5.5 0 009.5 20H13"/></svg>
 				</button>
 
+				{#if $appConfig?.ai_provider && ($appConfig?.ai_provider === 'ollama' || $appConfig?.ai_api_key || $appConfig?.openai_api_key)}
 				<div class="fmt-sep"></div>
-
-				<!-- Insert (+) dropdown — mobile version with common inserts -->
-				<div class="fmt-dropdown-wrap">
-					<button class="fmt-btn insert-btn" onclick={(e) => { e.stopPropagation(); insertDropdown = !insertDropdown; headingDropdown = false; }} title="Insert">
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+				<button class="fmt-btn" onclick={openAiMenu} title="AI Actions">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/>
+					</svg>
 				</button>
-					{#if insertDropdown}
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div class="fmt-dropdown insert-dropdown" onclick={(e) => e.stopPropagation()}>
-							<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-image-input')?.click(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 00-2.828 0L6 21"/></svg>
-								Image
-							</button>
-							<button onclick={() => { insertDropdown = false; document.querySelector<HTMLInputElement>('#insert-file-input')?.click(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 01-2-2V4a2 2 0 012-2h8a2.4 2.4 0 011.704.706l3.588 3.588A2.4 2.4 0 0120 8v12a2 2 0 01-2 2z"/><path d="M14 2v5a1 1 0 001 1h5"/></svg>
-								File
-							</button>
-							<button onclick={() => { insertDropdown = false; editor?.chain().focus().setHorizontalRule().run(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
-								Horizontal Rule
-							</button>
-							<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleCodeBlock().run(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
-								Code Block
-							</button>
-							<button onclick={() => { insertDropdown = false; editor?.chain().focus().toggleBlockquote().run(); }}>
-								<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 5H3"/><path d="M21 12H8"/><path d="M21 19H8"/><path d="M3 12v7"/></svg>
-								Quote
-							</button>
-						</div>
 				{/if}
-				</div>
 
 				{:else}
 				<!-- ═══ DESKTOP formatting bar: full feature set ═══ -->
@@ -4155,9 +4285,9 @@
 
 {#if aiMenu}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="ai-menu-overlay" onclick={closeAiMenu}>
+	<div class="ai-menu-overlay" class:mobile={isMobile} onclick={closeAiMenu}>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="ai-menu" style="left: {aiMenu.x}px; top: {aiMenu.y}px" onclick={(e) => e.stopPropagation()}>
+		<div class="ai-menu" class:mobile={isMobile} style={isMobile ? '' : `left: ${aiMenu.x}px; top: ${aiMenu.y}px`} onclick={(e) => e.stopPropagation()}>
 			{#if aiResult !== null || aiLoading}
 				<!-- Result view -->
 				<div class="ai-result-header">
@@ -5942,6 +6072,30 @@
 		border-top: 1px solid var(--border);
 		margin: 0;
 	}
+	:global(.tiptap .pdf-embed-mobile) {
+		margin: 8px 0;
+	}
+	:global(.tiptap .pdf-link-mobile) {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 14px 16px;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-color);
+		border-radius: 10px;
+		color: var(--text-primary);
+		font-size: 15px;
+		font-weight: 500;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	:global(.tiptap .pdf-link-mobile:active) {
+		background: var(--bg-hover);
+	}
+	:global(.tiptap .pdf-icon-mobile) {
+		font-size: 20px;
+		line-height: 1;
+	}
 
 	/* Slash commands menu */
 	.slash-menu-overlay {
@@ -6367,7 +6521,7 @@
 	}
 
 	.editor-container.mobile .editor-toolbar {
-		padding: 8px 8px 6px 12px;
+		padding: 8px 16px 6px 16px;
 		flex-shrink: 0;
 		flex-direction: column;
 		align-items: stretch;
@@ -6410,11 +6564,11 @@
 		min-height: 0;
 		overflow-y: auto;
 		-webkit-overflow-scrolling: touch;
-		padding-bottom: 50px;
+		padding: 0;
 	}
 
 	.editor-container.mobile .tiptap-wrapper {
-		min-height: 100%;
+		min-height: 0;
 	}
 
 	.editor-container.mobile .editor-formatting-bar {
@@ -6451,11 +6605,11 @@
 	}
 
 	.editor-container.mobile .fmt-dropdown {
-		position: fixed;
-		bottom: auto;
-		left: 8px;
-		right: 8px;
-		top: auto;
+		position: absolute;
+		bottom: calc(100% + 4px);
+		left: 0;
+		right: auto;
+		min-width: 180px;
 		max-width: calc(100vw - 16px);
 		max-height: 60vh;
 		overflow-y: auto;
@@ -6468,10 +6622,11 @@
 	}
 
 	.editor-container.mobile .insert-dropdown {
-		position: fixed;
-		bottom: 60px;
-		left: 8px;
-		right: 8px;
+		position: absolute;
+		bottom: calc(100% + 4px);
+		left: 0;
+		right: auto;
+		min-width: 200px;
 		max-width: calc(100vw - 16px);
 	}
 
@@ -6484,21 +6639,30 @@
 	}
 
 	.editor-container.mobile :global(.editor-content) {
-		padding: 8px 16px !important;
+		padding: 8px 16px 220px !important;
 		font-size: 16px !important;
 	}
 
 	.editor-container.mobile .source-editor {
-		padding: 8px 16px;
+		padding: 8px 16px 220px;
 		font-size: 15px;
+		white-space: pre-wrap;
+		word-break: break-word;
+		overflow-x: hidden;
+	}
+
+	.editor-container.mobile .editor-body-row {
+		position: relative;
 	}
 
 	.editor-container.mobile .history-panel,
 	.editor-container.mobile .outline-panel {
+		position: absolute;
+		inset: 0;
 		width: 100% !important;
 		max-width: 100%;
 		border-left: none;
-		border-top: 1px solid var(--border-color);
+		z-index: 10;
 	}
 
 	.editor-container.mobile .note-search-bar {
@@ -6509,4 +6673,92 @@
 		padding: 8px 10px;
 		font-size: 15px;
 	}
+
+	/* ═══ AI Menu — Mobile Bottom Sheet ═══ */
+	.ai-menu-overlay.mobile {
+		background: rgba(0, 0, 0, 0.35);
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+	}
+
+	.ai-menu.mobile {
+		position: relative;
+		left: auto !important;
+		top: auto !important;
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+		border-radius: 16px 16px 0 0;
+		border-bottom: none;
+		max-height: 70vh;
+		padding: 8px 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
+	}
+
+	.ai-menu.mobile .ai-menu-label {
+		padding: 10px 16px 6px;
+		font-size: 12px;
+	}
+
+	.ai-menu.mobile .ai-menu-item {
+		padding: 12px 16px;
+		font-size: 15px;
+		min-height: 44px;
+		border-radius: 8px;
+	}
+
+	.ai-menu.mobile .ai-menu-sep {
+		margin: 4px 8px;
+	}
+
+	.ai-menu.mobile .ai-result-header {
+		padding: 12px 16px 8px;
+	}
+
+	.ai-menu.mobile .ai-result-body {
+		padding: 8px 16px;
+		font-size: 15px;
+		max-height: 40vh;
+	}
+
+	.ai-menu.mobile .ai-result-actions {
+		padding: 8px 16px 4px;
+		gap: 10px;
+	}
+
+	.ai-menu.mobile .ai-result-actions button {
+		padding: 10px 16px;
+		font-size: 14px;
+		min-height: 44px;
+	}
+
+	.ai-menu.mobile .ai-custom-body {
+		padding: 8px 12px;
+	}
+
+	.ai-menu.mobile .ai-custom-input {
+		font-size: 15px;
+		min-height: 80px;
+	}
+
+	.ai-menu.mobile .ai-custom-submit {
+		padding: 10px 16px;
+		font-size: 14px;
+		min-height: 44px;
+	}
+
+	.ai-menu.mobile .ai-custom-header {
+		padding: 10px 12px;
+		font-size: 15px;
+	}
+
+	.ai-menu.mobile .ai-back-btn {
+		min-width: 44px;
+		min-height: 44px;
+	}
+
+	.ai-menu.mobile .ai-error {
+		padding: 12px 16px;
+		font-size: 14px;
+	}
 </style>

src/lib/components/InfoPanel.svelte

@@ -6,9 +6,10 @@
 	import type { VaultStats } from '$lib/types';
 
 	const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
+	const isMobile = /android|ios/i.test(navigator.userAgent);
 
 	let stats = $state<VaultStats | null>(null);
-	let activeTab = $state<'about' | 'shortcuts'>('shortcuts');
+	let activeTab = $state<'about' | 'shortcuts'>(isMobile ? 'about' : 'shortcuts');
 	let appVersion = $state('...');
 
 	getVersion().then(v => appVersion = v).catch(() => appVersion = '0.0.0');
@@ -54,10 +55,12 @@
 			</div>
 
 			<div class="info-body">
+				{#if !isMobile}
 				<div class="info-tabs">
 					<button class="info-tab" class:active={activeTab === 'shortcuts'} onclick={() => activeTab = 'shortcuts'}>Shortcuts</button>
 					<button class="info-tab" class:active={activeTab === 'about'} onclick={() => activeTab = 'about'}>About</button>
 				</div>
+				{/if}
 
 				{#if activeTab === 'about'}
 					<div class="info-logo">
@@ -398,4 +401,19 @@
 		color: var(--text-tertiary);
 		line-height: 1.4;
 	}
+
+	/* Mobile */
+	@media (max-width: 600px) {
+		.info-panel {
+			width: 100%;
+			height: 100%;
+			max-height: 100%;
+			border-radius: 0;
+			border: none;
+		}
+
+		.info-header {
+			padding-top: calc(env(safe-area-inset-top, 12px) + 12px);
+		}
+	}
 </style>

src/lib/components/NoteList.svelte

@@ -12,7 +12,8 @@
 		quickAccessPaths,
 		appConfig,
 		notebooks,
-		tags
+		tags,
+		mobileView
 	} from '$lib/stores/app';
 	import {
 		getNotes,
@@ -44,6 +45,25 @@
 	const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
 	const isMobile = /android|ios/i.test(navigator.userAgent);
 
+	/** Derive tags from current $notes store (avoids re-scanning files on mobile) */
+	function deriveTagsFromNotes() {
+		const tagMap = new Map<string, number>();
+		for (const note of $notes) {
+			for (const tag of note.meta.tags) {
+				tagMap.set(tag, (tagMap.get(tag) ?? 0) + 1);
+			}
+		}
+		$tags = Array.from(tagMap.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+	}
+
+	async function refreshTags() {
+		if (isMobile) {
+			deriveTagsFromNotes();
+		} else {
+			await refreshTags();
+		}
+	}
+
 	let compact = $derived($appConfig?.compact_notes ?? false);
 	let contextMenu = $state<{ x: number; y: number; note: NoteEntry } | null>(null);
 	let sortMenu = $state<{ x: number; y: number } | null>(null);
@@ -169,7 +189,12 @@
 			} else if ($viewMode === 'quickaccess') {
 				$notes = await getQuickAccess();
 			} else if ($viewMode === 'tag' && $activeTag) {
-				const all = await getNotes(null);
+				// Reuse cached "all" notes if available, otherwise fetch and cache them
+				let all = noteCache.get('all');
+				if (!all) {
+					all = await getNotes(null);
+					noteCache.set('all', all);
+				}
 				$notes = all.filter((n) => n.meta.tags.includes($activeTag!));
 			} else {
 				const nbPath = $viewMode === 'notebook' ? $activeNotebook?.path ?? null : null;
@@ -182,7 +207,10 @@
 	}
 
 	async function selectNote(note: NoteEntry) {
-		if ($activeNotePath === note.path) return;
+		if ($activeNotePath === note.path) {
+			if (isMobile) $mobileView = 'editor';
+			return;
+		}
 		try {
 			const content = await readNote(note.path);
 			onBeforeNoteSwitch();
@@ -324,7 +352,7 @@
 			if ($activeNotePath === note.path && $activeNote) {
 				$activeNote = { ...$activeNote, meta: { ...$activeNote.meta, tags: newTags } };
 			}
-			$tags = await getAllTags();
+			await refreshTags();
 		} catch (e) {
 			console.error('Failed to save tags:', e);
 		}
@@ -360,7 +388,7 @@
 					}
 				}
 			}
-			$tags = await getAllTags();
+			await refreshTags();
 		} catch (e) {
 			console.error('Failed to add tag to batch:', e);
 		}
@@ -382,7 +410,7 @@
 					}
 				}
 			}
-			$tags = await getAllTags();
+			await refreshTags();
 		} catch (e) {
 			console.error('Failed to remove tag from batch:', e);
 		}
@@ -449,9 +477,18 @@
 		}
 	}
 
+	function clampMenu(x: number, y: number, menuWidth = 220, menuHeight = 400): { x: number; y: number } {
+		if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
+		if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
+		if (x < 4) x = 4;
+		if (y < 4) y = 4;
+		return { x, y };
+	}
+
 	function onContextMenu(e: MouseEvent, note: NoteEntry) {
 		e.preventDefault();
-		contextMenu = { x: e.clientX, y: e.clientY, note };
+		const { x, y } = clampMenu(e.clientX, e.clientY);
+		contextMenu = { x, y, note };
 	}
 
 	function startRename(note: NoteEntry) {
@@ -691,16 +728,17 @@
 					onclick={(e) => handleNoteClick(e, note)}
 					oncontextmenu={(e) => {
 						e.preventDefault();
+						const pos = clampMenu(e.clientX, e.clientY);
 						// If multi-selected and right-clicking a selected note, show batch menu
 						if (selectedPaths.size > 1 && selectedPaths.has(note.path)) {
-							contextMenu = { x: e.clientX, y: e.clientY, note };
+							contextMenu = { x: pos.x, y: pos.y, note };
 							return;
 						}
 						// Otherwise clear selection and show single menu
 						if (selectedPaths.size > 0 && !selectedPaths.has(note.path)) {
 							clearSelection();
 						}
-						contextMenu = { x: e.clientX, y: e.clientY, note };
+						contextMenu = { x: pos.x, y: pos.y, note };
 					}}
 					draggable="true"
 					ondragstart={(e) => {
@@ -1539,7 +1577,7 @@
 	}
 
 	.note-list.mobile .list-content {
-		padding: 4px 8px;
+		padding: 4px 8px 180px;
 	}
 
 	.note-list.mobile .note-item {

src/lib/components/SearchPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { showSearch, activeNote, activeNotePath, editorDirty, appConfig } from '$lib/stores/app';
+	import { showSearch, activeNote, activeNotePath, editorDirty, appConfig, mobileView } from '$lib/stores/app';
 	import { searchNotes, readNote } from '$lib/api';
 	import { debounce } from '$lib/utils/debounce';
 	import type { SearchResult } from '$lib/types';
@@ -83,6 +83,8 @@
 		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 	}
 
+	const isMobile = /android|ios/i.test(navigator.userAgent);
+
 	async function openResult(result: SearchResult) {
 		try {
 			const content = await readNote(result.path);
@@ -90,6 +92,7 @@
 			$activeNotePath = result.path;
 			$editorDirty = false;
 			$showSearch = false;
+			if (isMobile) $mobileView = 'editor';
 		} catch (e) {
 			console.error('Failed to open search result:', e);
 		}

src/lib/components/SettingsPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab } from '$lib/stores/app';
+	import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab, vaultReady } from '$lib/stores/app';
 	import { setTheme, setAccentColor, setFontSize, setFontFamily, setLineHeight, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api';
 	import { open as openDialog } from '@tauri-apps/plugin-dialog';
 	import { listen } from '@tauri-apps/api/event';
@@ -7,6 +7,8 @@
 	import { getVersion } from '@tauri-apps/api/app';
 	import type { ImportResult, BackupEntry } from '$lib/types';
 
+	const isMobile = /android|ios/i.test(navigator.userAgent);
+
 	type Tab = 'general' | 'editor' | 'styling' | 'import' | 'backup' | 'ai' | 'updates';
 	let activeTab = $state<Tab>('styling');
 
@@ -506,9 +508,9 @@
 
 {#if $showSettings}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="settings-overlay" onclick={close} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
+	<div class="settings-overlay" class:mobile={isMobile} onclick={close} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="settings-panel" onclick={(e) => e.stopPropagation()}>
+		<div class="settings-panel" class:mobile={isMobile} onclick={(e) => e.stopPropagation()}>
 			<div class="settings-header">
 				<h2>Settings</h2>
 				<button class="close-btn" onclick={close}>
@@ -539,30 +541,36 @@
 						</svg>
 						Styling
 					</button>
+					{#if !isMobile}
 					<button class="tab-btn" class:active={activeTab === 'import'} onclick={() => activeTab = 'import'}>
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 							<path d="M12 3v12"/><path d="m8 11 4 4 4-4"/><path d="M8 5H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2h-4"/>
 						</svg>
 						Import
 					</button>
+				{/if}
+					{#if !isMobile}
 					<button class="tab-btn" class:active={activeTab === 'backup'} onclick={() => { activeTab = 'backup'; loadBackups(); }}>
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 							<path d="M21 12a9 9 0 00-9-9 9.75 9.75 0 00-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 009 9 9.75 9.75 0 006.74-2.74L21 16"/><path d="M16 16h5v5"/>
 						</svg>
 						Backup
 					</button>
+					{/if}
 					<button class="tab-btn" class:active={activeTab === 'ai'} onclick={() => activeTab = 'ai'}>
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 							<path d="M12 8V4l-2-2"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M9 13v2"/><path d="M15 13v2"/>
 						</svg>
 						AI
 					</button>
+					{#if !isMobile}
 					<button class="tab-btn" class:active={activeTab === 'updates'} onclick={() => activeTab = 'updates'}>
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 							<path d="M21 12a9 9 0 00-9-9 9.75 9.75 0 00-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 3"/>
 						</svg>
 						Updates
 					</button>
+				{/if}
 				</nav>
 
 				<div class="settings-body">
@@ -590,6 +598,20 @@
 								</div>
 							</div>
 
+							{#if isMobile}
+							<div class="settings-section">
+								<h3>Vault</h3>
+								<p class="setting-desc" style="margin-bottom: 12px; color: var(--text-tertiary); font-size: 13px;">Current: <strong style="color: var(--text-primary);">{$appConfig?.active_vault?.split('/').pop() ?? 'Unknown'}</strong></p>
+								<button class="import-btn" onclick={() => { $showSettings = false; $vaultReady = false; }}>
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+									</svg>
+									Switch Vault
+								</button>
+							</div>
+							{/if}
+
+							{#if !isMobile}
 							<div class="settings-section">
 								<h3>Performance</h3>
 								<label class="setting-toggle">
@@ -635,6 +657,7 @@
 								</label>
 								{/if}
 							</div>
+						{/if}
 						</div>
 					{:else if activeTab === 'editor'}
 						<div class="tab-content">
@@ -649,6 +672,7 @@
 										<span class="toggle-knob"></span>
 									</button>
 								</label>
+								{#if !isMobile}
 								<label class="setting-toggle" style="margin-top: 12px;">
 									<span class="setting-label">
 										<span class="setting-name">Show line numbers</span>
@@ -658,6 +682,7 @@
 										<span class="toggle-knob"></span>
 									</button>
 								</label>
+								{/if}
 								<label class="setting-toggle" style="margin-top: 12px;">
 									<span class="setting-label">
 										<span class="setting-name">Open notes in View Mode</span>
@@ -682,6 +707,7 @@
 								</label>
 							</div>
 
+							{#if !isMobile}
 							<div class="settings-section">
 								<h3>PDF Preview</h3>
 								<label class="setting-toggle">
@@ -713,6 +739,7 @@
 									<span class="setting-hint">Default height for PDF previews in notes</span>
 								</div>
 							{/if}
+						{/if}
 						</div>
 					{:else if activeTab === 'styling'}
 						<div class="tab-content">
@@ -849,6 +876,7 @@
 								</label>
 
 								<div class="backup-actions">
+									{#if !isMobile}
 									<button class="backup-link-btn" onclick={handleSelectBackupFolder}>
 										<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 											<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
@@ -858,6 +886,7 @@
 									{#if $appConfig?.backup_location}
 										<p class="backup-path">{$appConfig.backup_location}</p>
 									{/if}
+									{/if}
 									<button class="backup-link-btn" onclick={handleBackupNow} disabled={backupLoading}>
 										{#if backupLoading}
 											<svg class="spinner-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" opacity="0.25" /><path d="M12 2a10 10 0 019.95 9" /></svg>
@@ -1105,7 +1134,11 @@
 
 								<div class="settings-section">
 									<h3>Usage</h3>
+									{#if isMobile}
+									<p class="import-desc">Use the AI button in the toolbar or header to access AI writing tools: improve, fix grammar, rewrite, summarize, translate, and more.</p>
+								{:else}
 									<p class="import-desc">Select text in the editor and right-click to access AI writing tools: improve, fix grammar, rewrite, summarize, translate, and more.</p>
+								{/if}
 								</div>
 							{/if}
 						</div>
@@ -2085,4 +2118,111 @@
 		color: var(--accent);
 	}
 
+	/* ═══ Mobile ═══ */
+
+	.settings-overlay.mobile {
+		align-items: stretch;
+		justify-content: stretch;
+	}
+
+	.settings-panel.mobile {
+		width: 100%;
+		height: 100%;
+		max-height: 100%;
+		border-radius: 0;
+		border: none;
+	}
+
+	.settings-panel.mobile .settings-content {
+		flex-direction: column;
+	}
+
+	.settings-panel.mobile .settings-tabs {
+		flex-direction: row;
+		min-width: 0;
+		border-right: none;
+		border-bottom: 1px solid var(--border-light);
+		padding: 8px 8px 0;
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: none;
+		gap: 0;
+	}
+
+	.settings-panel.mobile .settings-tabs::-webkit-scrollbar {
+		display: none;
+	}
+
+	.settings-panel.mobile .tab-btn {
+		flex-shrink: 0;
+		flex-direction: column;
+		gap: 4px;
+		padding: 8px 14px 10px;
+		font-size: 11px;
+		border-radius: 8px 8px 0 0;
+	}
+
+	.settings-panel.mobile .tab-btn.active {
+		border-bottom: 2px solid var(--accent);
+		border-radius: 8px 8px 0 0;
+	}
+
+	.settings-panel.mobile .settings-header {
+		padding-top: calc(env(safe-area-inset-top, 12px) + 12px);
+	}
+
+	.settings-panel.mobile .settings-body {
+		padding: 16px;
+	}
+
+	.settings-panel.mobile .setting-name {
+		font-size: 14px;
+	}
+
+	.settings-panel.mobile .setting-desc {
+		font-size: 12px;
+	}
+
+	.settings-panel.mobile .toggle-switch {
+		width: 44px;
+		height: 26px;
+	}
+
+	.settings-panel.mobile .toggle-knob {
+		width: 22px;
+		height: 22px;
+	}
+
+	.settings-panel.mobile .toggle-switch.on .toggle-knob {
+		transform: translateX(18px);
+	}
+
+	.settings-panel.mobile .option-btn {
+		padding: 12px 10px;
+		font-size: 14px;
+	}
+
+	.settings-panel.mobile .theme-btn {
+		padding: 12px 10px;
+		font-size: 14px;
+	}
+
+	.settings-panel.mobile .accent-grid {
+		grid-template-columns: repeat(4, 1fr);
+		gap: 10px;
+	}
+
+	.settings-panel.mobile .accent-swatch {
+		padding: 14px 8px;
+	}
+
+	.settings-panel.mobile .font-size-options {
+		gap: 8px;
+	}
+
+	.settings-panel.mobile .font-size-btn {
+		padding: 12px 6px;
+	}
+
 </style>

src/lib/components/Sidebar.svelte

@@ -51,11 +51,23 @@
 
 	export async function refresh() {
 		try {
+			if (isMobile) {
+				// On mobile, parallelize and skip getAllTags (derive from $notes instead)
+				const [nbs, icons, qaNotes] = await Promise.all([
+					getNotebooks(),
+					getNotebookIcons(),
+					getQuickAccess(),
+				]);
+				$notebooks = nbs;
+				$notebookIcons = icons;
+				$quickAccessPaths = qaNotes.map(n => n.relative_path);
+			} else {
 				$notebooks = await getNotebooks();
 				$tags = await getAllTags();
 				$notebookIcons = await getNotebookIcons();
 				const qaNotes = await getQuickAccess();
 				$quickAccessPaths = qaNotes.map(n => n.relative_path);
+			}
 		} catch (e) {
 			console.error('Failed to refresh sidebar:', e);
 		}
@@ -271,9 +283,18 @@
 		return convertFileSrc(`${vaultRoot}/${iconPath}`);
 	}
 
+	function clampMenu(x: number, y: number, menuWidth = 220, menuHeight = 300): { x: number; y: number } {
+		if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
+		if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
+		if (x < 4) x = 4;
+		if (y < 4) y = 4;
+		return { x, y };
+	}
+
 	function onContextMenu(e: MouseEvent, nb: NotebookEntry) {
 		e.preventDefault();
-		contextMenu = { x: e.clientX, y: e.clientY, notebook: nb };
+		const { x, y } = clampMenu(e.clientX, e.clientY);
+		contextMenu = { x, y, notebook: nb };
 	}
 
 	function closeContextMenu() {
@@ -283,7 +304,8 @@
 	function onTrashContextMenu(e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-		trashContextMenu = { x: e.clientX, y: e.clientY };
+		const { x, y } = clampMenu(e.clientX, e.clientY, 180, 60);
+		trashContextMenu = { x, y };
 	}
 
 	async function handleEmptyTrash() {
@@ -310,6 +332,7 @@
 <svelte:window onclick={handleWindowClick} />
 
 <aside class="sidebar" class:collapsed={$sidebarCollapsed} class:mobile={isMobile}>
+	{#if !isMobile}
 	<div class="sidebar-header">
 		<button class="collapse-btn" onclick={() => ($sidebarCollapsed = !$sidebarCollapsed)} title="Toggle sidebar">
 			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -329,6 +352,7 @@
 			</button>
 		{/if}
 	</div>
+	{/if}
 
 	{#if !$sidebarCollapsed}
 		<nav class="sidebar-nav">
@@ -425,9 +449,32 @@
 					{@render notebookItem(nb, 0)}
 				{/each}
 			</div>
+		{#if isMobile && $tags.length > 0}
+				<div class="tags-section-inline">
+					<button class="section-header" onclick={() => tagsCollapsed = !tagsCollapsed}>
+						<span class="section-title">Tags</span>
+						<span class="tag-count" style="margin-left: auto">{$tags.length}</span>
+					</button>
+					{#if !tagsCollapsed}
+						<div class="tag-list">
+							{#each $tags as [tag, count]}
+								<button
+									class="tag-item"
+									class:active={$viewMode === 'tag' && $activeTag === tag}
+									onclick={() => selectTag(tag)}
+								>
+									<span class="tag-hash">#</span>
+									<span class="tag-name">{tag}</span>
+									<span class="tag-count">{count}</span>
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
 		</div>
 
-		{#if $tags.length > 0}
+		{#if !isMobile && $tags.length > 0}
 			<div class="tags-section">
 				<button class="section-header" onclick={() => tagsCollapsed = !tagsCollapsed}>
 					<span class="section-title">Tags</span>
@@ -1052,6 +1099,16 @@
 		height: 20px;
 	}
 
+	.sidebar.mobile .section {
+		padding-bottom: 180px;
+	}
+
+	.sidebar.mobile .tags-section-inline {
+		border-top: 1px solid var(--border-light);
+		padding: 4px 0;
+		margin-top: 8px;
+	}
+
 	.sidebar.mobile .section-header {
 		padding: 12px 16px 6px;
 		min-height: 44px;

src/lib/components/VaultPicker.svelte

@@ -11,12 +11,56 @@
 	let recentVaults: VaultConfig[] = $derived($appConfig?.vaults ?? []);
 	let loading = $state(false);
 	let error = $state('');
+	let vaultName = $state('HelixNotes');
+	let hasPermission = $state(!isMobile);
+	let selectedLocation = $state('Documents');
+	let customPath = $state('');
+
+	const storageLocations = [
+		{ label: 'Documents', path: '/storage/emulated/0/Documents' },
+		{ label: 'Downloads', path: '/storage/emulated/0/Download' },
+		{ label: 'Internal Storage', path: '/storage/emulated/0' },
+	];
+
+	if (isMobile) {
+		checkPermission();
+		setTimeout(checkPermission, 500);
+		(window as any).__storagePermissionGranted = () => { hasPermission = true; };
+		document.addEventListener('visibilitychange', () => {
+			if (document.visibilityState === 'visible') setTimeout(checkPermission, 300);
+		});
+	}
+
+	function checkPermission() {
+		try {
+			const bridge = (window as any).Android;
+			if (bridge?.hasStoragePermission) {
+				hasPermission = bridge.hasStoragePermission() === true;
+			}
+		} catch { /* bridge not ready */ }
+	}
+
+	function requestPermission() {
+		try {
+			const bridge = (window as any).Android;
+			bridge?.requestStoragePermission?.();
+		} catch {
+			error = 'Go to Settings > Apps > HelixNotes > Permissions and enable "All files access".';
+		}
+	}
+
+	function getMobileBasePath(): string {
+		if (selectedLocation === 'Custom') {
+			return customPath.trim() || '/storage/emulated/0/Documents';
+		}
+		return storageLocations.find(l => l.label === selectedLocation)?.path || '/storage/emulated/0/Documents';
+	}
+
+	let fullPath = $derived(isMobile ? `${getMobileBasePath()}/${vaultName.trim() || 'HelixNotes'}` : '');
 
 	async function pickFolder() {
 		if (isMobile) {
-			// Use shared Documents folder for Syncthing/Nextcloud compatibility
-			const vaultPath = '/storage/emulated/0/Documents/HelixNotes';
-			await openSelectedVault(vaultPath);
+			await openSelectedVault(fullPath);
 		} else {
 			const selected = await open({ directory: true, multiple: false, title: 'Choose Notes Folder' });
 			if (selected) {
@@ -29,6 +73,12 @@
 		loading = true;
 		error = '';
 		try {
+			if (isMobile) {
+				try {
+					const bridge = (window as any).Android;
+					bridge?.prepareVaultDir?.(path);
+				} catch { /* Rust will retry mkdir itself */ }
+			}
 			await openVault(path);
 			const config = await getAppConfig();
 			$appConfig = config;
@@ -68,7 +118,41 @@
 		<h1>HelixNotes</h1>
 		<p class="subtitle">Local markdown notes</p>
 		{#if isMobile}
-			<p class="description">Notes are stored in Documents/HelixNotes as Markdown files. Sync with Nextcloud, Syncthing, or any file sync app.</p>
+			<p class="description">Choose where to store your notes. Sync with Syncthing, Nextcloud, or any file sync app.</p>
+
+			{#if !hasPermission}
+				<button class="btn-permission" onclick={requestPermission}>
+					Grant File Access
+				</button>
+				<p class="permission-hint">Required to access Documents, Downloads, and other shared folders.</p>
+			{/if}
+
+			<div class="location-selector">
+				<label class="location-label">Location</label>
+				<div class="location-options">
+					{#each storageLocations as loc}
+						<button
+							class="location-option"
+							class:active={selectedLocation === loc.label}
+							onclick={() => selectedLocation = loc.label}
+						>{loc.label}</button>
+					{/each}
+					<button
+						class="location-option"
+						class:active={selectedLocation === 'Custom'}
+						onclick={() => selectedLocation = 'Custom'}
+					>Custom</button>
+				</div>
+				{#if selectedLocation === 'Custom'}
+					<input class="custom-path-input" type="text" bind:value={customPath} placeholder="/storage/emulated/0/..." />
+				{/if}
+			</div>
+
+			<div class="vault-name-input">
+				<label for="vault-name">Vault name</label>
+				<div class="vault-name-preview"><input id="vault-name" type="text" bind:value={vaultName} placeholder="HelixNotes" /></div>
+				<span class="vault-path-hint">{fullPath}</span>
+			</div>
 		{:else}
 			<p class="description">Your notes are stored as standard Markdown (.md) files. Pick any folder — existing .md files will be recognized automatically.</p>
 		{/if}
@@ -87,13 +171,13 @@
 			{/if}
 		</button>
 
-		{#if !isMobile && $appConfig?.active_vault}
+		{#if $appConfig?.active_vault}
 			<button class="btn-back" onclick={() => ($vaultReady = true)}>
 				Back
 			</button>
 		{/if}
 
-		{#if !isMobile && recentVaults.length > 0}
+		{#if recentVaults.length > 0}
 			<div class="recent">
 				<span class="recent-label">Recent</span>
 				{#each recentVaults as vault}
@@ -110,11 +194,13 @@
 <style>
 	.vault-picker {
 		display: flex;
-		align-items: center;
 		justify-content: center;
 		height: 100vh;
+		height: 100dvh;
 		background: var(--bg-primary);
 		position: relative;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
 	}
 
 	.window-controls {
@@ -148,6 +234,9 @@
 		max-width: 400px;
 		width: 100%;
 		padding: 48px 32px;
+		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
+		margin: auto;
+		flex-shrink: 0;
 	}
 
 	.logo {
@@ -276,6 +365,130 @@
 		white-space: nowrap;
 	}
 
+	.vault-name-input {
+		margin-bottom: 20px;
+		text-align: left;
+	}
+
+	.vault-name-input label {
+		display: block;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--text-tertiary);
+		margin-bottom: 6px;
+	}
+
+	.vault-name-preview {
+		display: flex;
+		align-items: center;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-color);
+		border-radius: 8px;
+		padding: 10px 12px;
+		font-size: 14px;
+		color: var(--text-tertiary);
+	}
+
+	.vault-name-preview input {
+		background: none;
+		border: none;
+		outline: none;
+		color: var(--text-primary);
+		font-size: 14px;
+		font-family: inherit;
+		width: 100%;
+		padding: 0;
+	}
+
+	.location-selector {
+		margin-bottom: 16px;
+		text-align: left;
+	}
+
+	.location-label {
+		display: block;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--text-tertiary);
+		margin-bottom: 6px;
+	}
+
+	.location-options {
+		display: flex;
+		gap: 6px;
+		flex-wrap: wrap;
+	}
+
+	.location-option {
+		padding: 8px 14px;
+		border: 1px solid var(--border-color);
+		border-radius: 8px;
+		background: var(--bg-secondary);
+		color: var(--text-secondary);
+		font-size: 13px;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.location-option.active {
+		background: var(--accent);
+		color: white;
+		border-color: var(--accent);
+	}
+
+	.custom-path-input {
+		width: 100%;
+		margin-top: 8px;
+		padding: 10px 12px;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-color);
+		border-radius: 8px;
+		color: var(--text-primary);
+		font-size: 13px;
+		font-family: inherit;
+		outline: none;
+		box-sizing: border-box;
+	}
+
+	.custom-path-input:focus {
+		border-color: var(--accent);
+	}
+
+	.vault-path-hint {
+		display: block;
+		font-size: 11px;
+		color: var(--text-tertiary);
+		margin-top: 6px;
+		opacity: 0.7;
+		word-break: break-all;
+	}
+
+	.btn-permission {
+		width: 100%;
+		padding: 12px 20px;
+		background: var(--accent);
+		color: white;
+		border: none;
+		border-radius: 10px;
+		font-size: 15px;
+		font-weight: 600;
+		cursor: pointer;
+		margin-bottom: 6px;
+		transition: background 0.15s;
+	}
+
+	.btn-permission:hover {
+		background: var(--accent-hover);
+	}
+
+	.permission-hint {
+		font-size: 12px;
+		color: var(--text-tertiary);
+		margin-bottom: 20px;
+		opacity: 0.7;
+	}
+
 	/* Mobile */
 	.mobile .btn-primary {
 		padding: 14px 20px;
@@ -295,4 +508,22 @@
 		width: 88px;
 		height: 88px;
 	}
+
+	.mobile .btn-back {
+		padding: 14px 20px;
+		font-size: 16px;
+		border-radius: 12px;
+	}
+
+	.mobile .vault-item {
+		padding: 14px 16px;
+	}
+
+	.mobile .vault-name {
+		font-size: 15px;
+	}
+
+	.mobile .vault-path {
+		font-size: 13px;
+	}
 </style>