remove reset button, move auto save indicator in velxio

frontend/src/lib/components/CrosshairOverlay.svelte

@@ -27,7 +27,8 @@
 	const LONG_PRESS_MS = 400;
 	const DOUBLE_TAP_MS = 300;
 	const HOLDING_TIMEOUT_MS = 5000;
-	const CURSOR_OFFSET_Y = -(parseInt(env.PUBLIC_CURSOR_OFFSET_Y || '50', 10));
+	const BASE_OFFSET_Y = -(parseInt(env.PUBLIC_CURSOR_OFFSET_Y || '50', 10));
+	let currentOffset = $derived(isTouchDevice ? BASE_OFFSET_Y : 0);
 
 	/**
 	 * State machine:
@@ -46,12 +47,18 @@
 	$effect(() => {
 		if (typeof window === 'undefined') return;
 		const mql = window.matchMedia('(hover: none) and (pointer: coarse)');
-		isTouchDevice = mql.matches;
+		const checkTouch = () => {
-		const handler = (e: MediaQueryListEvent) => {
+			isTouchDevice = mql.matches && window.innerWidth < 768;
-			isTouchDevice = e.matches;
+		};
+		
+		checkTouch();
+		mql.addEventListener('change', checkTouch);
+		window.addEventListener('resize', checkTouch);
+		
+		return () => {
+			mql.removeEventListener('change', checkTouch);
+			window.removeEventListener('resize', checkTouch);
 		};
-		mql.addEventListener('change', handler);
-		return () => mql.removeEventListener('change', handler);
 	});
 
 	function getIframeTarget(x: number, y: number): Element | null {
@@ -142,7 +149,7 @@
 		if (!overlayEl) return;
 		const rect = overlayEl.getBoundingClientRect();
 		crosshairX = viewportX - rect.left;
-		crosshairY = viewportY - rect.top + CURSOR_OFFSET_Y;
+		crosshairY = viewportY - rect.top + currentOffset;
 	}
 
 	function getCrosshairViewport(): { x: number; y: number } {

frontend/src/routes/lesson/[slug]/+page.svelte

@@ -101,7 +101,7 @@
 
 	// Auto-save Velxio state periodically
 	$effect(() => {
-		if (velxioReady && auth.isLoggedIn && !showSolution) {
+		if (velxioReady && $authLoggedIn && !showSolution) {
 			const interval = setInterval(() => {
 				const state = getVelxioState();
 				if (!state) return;
@@ -921,9 +921,7 @@
 							Hubungi guru jika masalah berlanjut.
 						</div>
 					{:else}
-						<div class="velxio-toolbar">
+						{#if $authLoggedIn}
-							<button type="button" class="btn btn-secondary btn-sm" onclick={handleReset}>Reset</button>
-							{#if auth.isLoggedIn}
 							<div class="storage-indicator-inline" title={velxioSaving ? "Menyimpan draf..." : "Draf tersimpan di browser"}>
 								<span class="indicator-icon" class:saving={velxioSaving}>
 									{velxioSaving ? '●' : '☁'}
@@ -931,7 +929,6 @@
 								<span class="indicator-text">Auto-save</span>
 							</div>
 						{/if}
-						</div>
 						<!-- svelte-ignore a11y_missing_attribute -->
 						<iframe
 							class="velxio-iframe"
@@ -1243,22 +1240,23 @@
 	}
 
 	/* ── Velxio (Arduino simulator) ─────────────────────── */
-	.velxio-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.4rem 0.5rem;
-		border-bottom: 1px solid var(--color-border);
-		flex-shrink: 0;
-	}
 	.storage-indicator-inline {
 		display: flex;
 		align-items: center;
 		gap: 6px;
-		font-size: 0.7rem;
+		font-size: 0.75rem;
 		color: var(--color-text-muted);
+		background: var(--color-bg-secondary);
+		padding: 3px 10px;
+		border-radius: 12px;
+		border: 1px solid var(--color-border);
+		position: absolute;
+		bottom: 1rem;
+		right: 1.5rem;
+		z-index: 10;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 		pointer-events: none;
-		margin-left: auto;
+		opacity: 0.8;
 	}
 	.storage-indicator-inline .indicator-icon {
 		line-height: 1;
@@ -1278,6 +1276,7 @@
 		flex-direction: column;
 		flex: 1;
 		min-height: 0;
+		position: relative;
 	}
 	.velxio-panel.tab-hidden {
 		display: none;