diff --git a/viewer/featurelens.js b/viewer/featurelens.js
index dd78709..65dec6e 100644
--- a/viewer/featurelens.js
+++ b/viewer/featurelens.js
@@ -1,6 +1,6 @@
 /**
  * FeatureLens — Visual Feedback & AI Task Staging Overlay
- * Zero-dependency Web Component with Shadow DOM Isolation
+ * Zero-dependency Web Component with Shadow DOM Isolation & Mobile Touch Ergonomics
  */
 class FeatureLensElement extends HTMLElement {
   constructor() {
@@ -23,7 +23,6 @@ class FeatureLensElement extends HTMLElement {
   }
 
   setupGlobalEvents() {
-    // Listen for custom open event
     window.addEventListener('featurelens:toggle', () => this.toggleDrawer());
   }
 
@@ -36,7 +35,7 @@ class FeatureLensElement extends HTMLElement {
         this.renderNotesList();
       }
     } catch (err) {
-      console.warn('[FeatureLens] Could not fetch notes from backend, using memory cache:', err);
+      console.warn('[FeatureLens] Backend unreachable, using memory cache:', err);
     }
   }
 
@@ -67,7 +66,7 @@ class FeatureLensElement extends HTMLElement {
   }
 
   // -------------------------------------------------------------
-  // Visual Inspector (2D DOM & 3D Three.js Raycaster)
+  // Visual Inspector (2D DOM & 3D Three.js Touch/Pointer Engine)
   // -------------------------------------------------------------
   initInspector() {
     this.hoverOverlay = document.createElement('div');
@@ -108,7 +107,7 @@ class FeatureLensElement extends HTMLElement {
       padding: 0.5rem 1rem;
       border-radius: 9999px;
       font-family: 'JetBrains Mono', monospace;
-      font-size: 0.8rem;
+      font-size: 0.775rem;
       font-weight: 700;
       box-shadow: 0 10px 25px rgba(0,0,0,0.8);
       z-index: 999999;
@@ -116,17 +115,23 @@ class FeatureLensElement extends HTMLElement {
       align-items: center;
       gap: 0.5rem;
       cursor: pointer;
+      max-width: 90vw;
+      box-sizing: border-box;
+      text-align: center;
+      justify-content: center;
     `;
-    banner.innerHTML = `<span>🎯 Click any 2D UI element or 3D CAD part to attach note</span> <span style="color:#ef4444; margin-left:0.5rem;">[ESC to cancel]</span>`;
+    banner.innerHTML = `<span>🎯 Tap any 2D UI element or 3D CAD part</span> <span style="color:#ef4444; margin-left:0.5rem;">[Cancel]</span>`;
     banner.onclick = () => this.stopInspectMode();
     document.body.appendChild(banner);
 
-    this._onMouseMove = this.handlePointerMove.bind(this);
-    this._onClick = this.handlePointerClick.bind(this);
+    this._onPointerMove = this.handlePointerMove.bind(this);
+    this._onPointerClick = this.handlePointerClick.bind(this);
     this._onKeyDown = (e) => { if (e.key === 'Escape') this.stopInspectMode(); };
 
-    window.addEventListener('mousemove', this._onMouseMove, true);
-    window.addEventListener('click', this._onClick, true);
+    window.addEventListener('mousemove', this._onPointerMove, true);
+    window.addEventListener('touchmove', this._onPointerMove, { passive: false, capture: true });
+    window.addEventListener('click', this._onPointerClick, true);
+    window.addEventListener('touchend', this._onPointerClick, { passive: false, capture: true });
     window.addEventListener('keydown', this._onKeyDown, true);
   }
 
@@ -136,36 +141,45 @@ class FeatureLensElement extends HTMLElement {
     const banner = document.getElementById('fl-inspect-banner');
     if (banner) banner.remove();
 
-    window.removeEventListener('mousemove', this._onMouseMove, true);
-    window.removeEventListener('click', this._onClick, true);
+    window.removeEventListener('mousemove', this._onPointerMove, true);
+    window.removeEventListener('touchmove', this._onPointerMove, { passive: false, capture: true });
+    window.removeEventListener('click', this._onPointerClick, true);
+    window.removeEventListener('touchend', this._onPointerClick, { passive: false, capture: true });
     window.removeEventListener('keydown', this._onKeyDown, true);
   }
 
+  getPointerCoords(e) {
+    if (e.touches && e.touches.length > 0) {
+      return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY, target: document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY) };
+    }
+    if (e.changedTouches && e.changedTouches.length > 0) {
+      return { clientX: e.changedTouches[0].clientX, clientY: e.changedTouches[0].clientY, target: document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY) };
+    }
+    return { clientX: e.clientX, clientY: e.clientY, target: e.target };
+  }
+
   handlePointerMove(e) {
     if (!this.isInspectMode) return;
-    
+    const { clientX, clientY, target } = this.getPointerCoords(e);
+    if (!target) return;
+
     // Check if hovering 3D canvas
-    if (window.scene && window.camera && e.target.tagName === 'CANVAS' && this.raycaster) {
-      const rect = e.target.getBoundingClientRect();
-      this.mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-      this.mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+    if (window.scene && window.camera && target.tagName === 'CANVAS' && this.raycaster) {
+      const rect = target.getBoundingClientRect();
+      this.mouse.x = ((clientX - rect.left) / rect.width) * 2 - 1;
+      this.mouse.y = -((clientY - rect.top) / rect.height) * 2 + 1;
       this.raycaster.setFromCamera(this.mouse, window.camera);
 
       const intersects = this.raycaster.intersectObjects(window.scene.children, true);
       if (intersects.length > 0) {
-        const hit = intersects[0];
-        let mesh = hit.object;
-        let partId = mesh.userData?.partId || mesh.name || '3d-mesh';
-        
-        // Highlight 3D part
         this.hoverOverlay.style.display = 'none';
         return;
       }
     }
 
     // 2D Element highlight
-    if (e.target && e.target !== this.hoverOverlay && !e.target.closest('feature-lens')) {
-      const rect = e.target.getBoundingClientRect();
+    if (target && target !== this.hoverOverlay && !target.closest('feature-lens')) {
+      const rect = target.getBoundingClientRect();
       this.hoverOverlay.style.display = 'block';
       this.hoverOverlay.style.top = `${rect.top + window.scrollY}px`;
       this.hoverOverlay.style.left = `${rect.left + window.scrollX}px`;
@@ -176,19 +190,22 @@ class FeatureLensElement extends HTMLElement {
 
   handlePointerClick(e) {
     if (!this.isInspectMode) return;
-    e.preventDefault();
+    if (e.cancelable) e.preventDefault();
     e.stopPropagation();
 
+    const { clientX, clientY, target } = this.getPointerCoords(e);
+    if (!target) return;
+
     let targetType = 'dom_element';
     let targetSelector = '';
     let partId = null;
     let coords3d = null;
 
     // 3D Intersect check
-    if (window.scene && window.camera && e.target.tagName === 'CANVAS' && this.raycaster) {
-      const rect = e.target.getBoundingClientRect();
-      this.mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-      this.mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+    if (window.scene && window.camera && target.tagName === 'CANVAS' && this.raycaster) {
+      const rect = target.getBoundingClientRect();
+      this.mouse.x = ((clientX - rect.left) / rect.width) * 2 - 1;
+      this.mouse.y = -((clientY - rect.top) / rect.height) * 2 + 1;
       this.raycaster.setFromCamera(this.mouse, window.camera);
 
       const intersects = this.raycaster.intersectObjects(window.scene.children, true);
@@ -205,7 +222,7 @@ class FeatureLensElement extends HTMLElement {
     }
 
     if (targetType === 'dom_element') {
-      targetSelector = this.computeSelectorPath(e.target);
+      targetSelector = this.computeSelectorPath(target);
     }
 
     this.currentTarget = {
@@ -264,13 +281,13 @@ Technical Context & Candidate Source Files:
   async copyAiPrompt(noteId) {
     const note = this.notes.find(n => n.id === noteId);
     if (!note) return;
-    const prompt = this.generateAiPrompt(note);
+    const promptText = this.generateAiPrompt(note);
     try {
-      await navigator.clipboard.writeText(prompt);
+      await navigator.clipboard.writeText(promptText);
       alert('✅ AI Task Prompt copied to clipboard! Paste it directly into your AI assistant.');
     } catch (err) {
       console.warn('Clipboard write failed, showing text box:', err);
-      prompt('Copy your AI task prompt:', prompt);
+      prompt('Copy your AI task prompt:', promptText);
     }
   }
 
@@ -318,7 +335,6 @@ Technical Context & Candidate Source Files:
       return;
     }
 
-    // Auto deduce candidate files
     let suggestedFiles = ['viewer/index.html'];
     if (this.currentTarget?.type === '3d_mesh') {
       suggestedFiles.push('viewer/index.html#threejs-cad', 'mechanical/');
@@ -411,9 +427,18 @@ Technical Context & Candidate Source Files:
           position: relative;
         }
 
+        .fl-sheet-handle {
+          display: none;
+          width: 36px;
+          height: 4px;
+          background: #475569;
+          border-radius: 9999px;
+          margin: 0 auto 0.5rem auto;
+        }
+
         #fl-activator {
           position: fixed;
-          bottom: 1.25rem;
+          bottom: max(1.25rem, env(safe-area-inset-bottom));
           right: 1.25rem;
           background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
           border: 1px solid var(--fl-accent);
@@ -430,6 +455,8 @@ Technical Context & Candidate Source Files:
           transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           z-index: 999991;
           user-select: none;
+          min-height: 44px;
+          touch-action: manipulation;
         }
         #fl-activator:hover {
           transform: translateY(-2px);
@@ -453,14 +480,14 @@ Technical Context & Candidate Source Files:
         #fl-drawer {
           position: fixed;
           top: 0;
-          right: -420px;
-          width: 400px;
+          right: -440px;
+          width: 420px;
           height: 100vh;
-          background: rgba(11, 15, 23, 0.95);
-          backdrop-filter: blur(16px);
+          background: rgba(11, 15, 23, 0.98);
+          backdrop-filter: blur(20px);
           border-left: 1px solid var(--fl-border);
-          box-shadow: -15px 0 35px rgba(0, 0, 0, 0.7);
-          transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: -15px 0 35px rgba(0, 0, 0, 0.85);
+          transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           z-index: 999992;
           display: flex;
           flex-direction: column;
@@ -490,10 +517,15 @@ Technical Context & Candidate Source Files:
           background: transparent;
           border: none;
           color: var(--fl-text-muted);
-          font-size: 1.2rem;
+          font-size: 1.4rem;
           cursor: pointer;
-          padding: 0.2rem 0.5rem;
-          border-radius: 4px;
+          padding: 0.25rem 0.6rem;
+          border-radius: 6px;
+          min-width: 44px;
+          min-height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
         .fl-close-btn:hover {
           color: var(--fl-text);
@@ -507,6 +539,7 @@ Technical Context & Candidate Source Files:
           display: flex;
           flex-direction: column;
           gap: 0.75rem;
+          -webkit-overflow-scrolling: touch;
         }
 
         .fl-actions {
@@ -518,9 +551,9 @@ Technical Context & Candidate Source Files:
           background: var(--fl-card-bg);
           border: 1px solid var(--fl-border);
           color: var(--fl-text);
-          padding: 0.5rem 0.75rem;
+          padding: 0.55rem 0.75rem;
           border-radius: 6px;
-          font-size: 0.75rem;
+          font-size: 0.775rem;
           font-weight: 600;
           cursor: pointer;
           display: flex;
@@ -528,7 +561,9 @@ Technical Context & Candidate Source Files:
           justify-content: center;
           gap: 0.35rem;
           flex: 1;
+          min-height: 44px;
           transition: all 0.15s ease;
+          touch-action: manipulation;
         }
         .fl-btn:hover {
           border-color: var(--fl-accent);
@@ -548,19 +583,16 @@ Technical Context & Candidate Source Files:
           background: var(--fl-card-bg);
           border: 1px solid var(--fl-border);
           border-radius: 8px;
-          padding: 0.75rem;
+          padding: 0.85rem;
           display: flex;
           flex-direction: column;
-          gap: 0.4rem;
-          font-size: 0.75rem;
+          gap: 0.45rem;
+          font-size: 0.775rem;
           position: relative;
         }
-        .fl-card:hover {
-          border-color: #334155;
-        }
 
         .fl-tag {
-          padding: 0.15rem 0.4rem;
+          padding: 0.15rem 0.45rem;
           border-radius: 4px;
           font-size: 0.65rem;
           font-weight: 700;
@@ -576,11 +608,12 @@ Technical Context & Candidate Source Files:
           background: #090d16;
           border: 1px solid var(--fl-border);
           color: var(--fl-text);
-          padding: 0.5rem;
+          padding: 0.6rem;
           border-radius: 6px;
-          font-size: 0.75rem;
+          font-size: 0.8rem;
           box-sizing: border-box;
           font-family: inherit;
+          min-height: 44px;
         }
         .fl-input:focus, .fl-textarea:focus, .fl-select:focus {
           outline: none;
@@ -588,7 +621,50 @@ Technical Context & Candidate Source Files:
         }
         .fl-textarea {
           resize: vertical;
-          min-height: 80px;
+          min-height: 90px;
+        }
+
+        /* Mobile Responsive Bottom Sheet Transformation */
+        @media (max-width: 640px) {
+          #fl-activator {
+            bottom: max(1rem, env(safe-area-inset-bottom));
+            right: 1rem;
+            padding: 0.5rem 0.85rem;
+            font-size: 0.75rem;
+          }
+
+          .fl-sheet-handle {
+            display: block;
+          }
+
+          #fl-drawer {
+            top: auto;
+            bottom: -100%;
+            right: 0;
+            left: 0;
+            width: 100%;
+            height: 82vh;
+            border-left: none;
+            border-top: 1px solid var(--fl-border);
+            border-radius: 20px 20px 0 0;
+            padding-bottom: max(1rem, env(safe-area-inset-bottom));
+          }
+          #fl-drawer.open {
+            bottom: 0;
+            right: 0;
+          }
+
+          .fl-header {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 0.25rem;
+            padding: 0.6rem 1rem 0.5rem 1rem;
+          }
+          .fl-close-btn {
+            position: absolute;
+            top: 0.6rem;
+            right: 1rem;
+          }
         }
       </style>
 
@@ -598,9 +674,10 @@ Technical Context & Candidate Source Files:
         <span id="fl-badge" class="fl-badge" style="display:none;">0</span>
       </div>
 
-      <!-- Slide-Out Drawer Panel -->
+      <!-- Slide-Out Drawer / Bottom Sheet Panel -->
       <div id="fl-drawer">
         <div class="fl-header">
+          <div class="fl-sheet-handle"></div>
           <div class="fl-title">
             <span>FeatureLens Studio</span>
             <span style="font-size:0.65rem; color:var(--fl-text-muted); font-weight:400;">(OSHW-AI)</span>
@@ -618,11 +695,11 @@ Technical Context & Candidate Source Files:
             </button>
           </div>
 
-          <!-- Create Note Form (Hidden by default) -->
+          <!-- Create Note Form -->
           <div id="fl-form-container" style="display:none;">
             <div class="fl-card" style="border-color:var(--fl-accent);">
               <div style="font-weight:700; color:var(--fl-accent);">Create AI Staging Note</div>
-              <div id="fl-target-label" style="font-size:0.65rem; color:var(--fl-text-muted);">🌐 Global Target</div>
+              <div id="fl-target-label" style="font-size:0.7rem; color:var(--fl-text-muted);">🌐 Global Target</div>
               
               <input type="text" id="fl-title-input" class="fl-input" placeholder="Title (e.g. Wire WebSocket telemetry)" />
               
@@ -683,18 +760,18 @@ Technical Context & Candidate Source Files:
           <span class="fl-tag fl-tag-${note.category}">${note.category}</span>
           <span style="font-size:0.65rem; color:${note.status === 'completed' ? 'var(--fl-emerald)' : 'var(--fl-text-muted)'}; font-weight:700; text-transform:uppercase;">${note.status}</span>
         </div>
-        <div style="font-weight:700; color:var(--fl-text); font-size:0.8rem;">${note.title}</div>
-        <div style="color:var(--fl-text-muted); font-size:0.65rem;">${targetInfo}</div>
-        <div style="color:#cbd5e1; font-size:0.7rem; margin-top:0.2rem; line-height:1.3;">${note.description || 'No description provided.'}</div>
+        <div style="font-weight:700; color:var(--fl-text); font-size:0.85rem;">${note.title}</div>
+        <div style="color:var(--fl-text-muted); font-size:0.7rem;">${targetInfo}</div>
+        <div style="color:#cbd5e1; font-size:0.75rem; margin-top:0.2rem; line-height:1.35;">${note.description || 'No description provided.'}</div>
         
         <div style="display:flex; gap:0.4rem; margin-top:0.4rem; padding-top:0.4rem; border-top:1px solid var(--fl-border);">
-          <button class="fl-btn fl-btn-primary" style="font-size:0.65rem; padding:0.25rem 0.5rem;" onclick="this.getRootNode().host.copyAiPrompt('${note.id}')">
+          <button class="fl-btn fl-btn-primary" style="font-size:0.7rem; padding:0.35rem 0.5rem;" onclick="this.getRootNode().host.copyAiPrompt('${note.id}')">
             📋 Copy AI Prompt
           </button>
-          <button class="fl-btn" style="font-size:0.65rem; padding:0.25rem 0.4rem;" onclick="this.getRootNode().host.updateStatus('${note.id}', '${note.status === 'completed' ? 'open' : 'completed'}')">
+          <button class="fl-btn" style="font-size:0.7rem; padding:0.35rem 0.4rem;" onclick="this.getRootNode().host.updateStatus('${note.id}', '${note.status === 'completed' ? 'open' : 'completed'}')">
             ${note.status === 'completed' ? 'Reopen' : 'Complete'}
           </button>
-          <button class="fl-btn" style="font-size:0.65rem; padding:0.25rem 0.4rem; color:var(--fl-rose);" onclick="this.getRootNode().host.deleteNote('${note.id}')">
+          <button class="fl-btn" style="font-size:0.7rem; padding:0.35rem 0.4rem; color:var(--fl-rose); flex:0 0 44px;" onclick="this.getRootNode().host.deleteNote('${note.id}')">
             🗑️
           </button>
         </div>
@@ -704,7 +781,6 @@ Technical Context & Candidate Source Files:
   }
 }
 
-// Register Custom Web Component
 if (!customElements.get('feature-lens')) {
   customElements.define('feature-lens', FeatureLensElement);
 }
diff --git a/viewer/index.html b/viewer/index.html
index 5a5672b..8e5a5d9 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -132,6 +132,7 @@
             width: 100%;
             height: 100%;
             display: block;
+            touch-action: none;
         }
 
         /* Viewport Overlays */
@@ -493,7 +494,206 @@
             background: rgba(6, 182, 212, 0.15);
             border-color: var(--accent-cyan);
         }
+
+        /* ==========================================================================
+           Mobile-First & Tablet Touch Ergonomics Breakpoints (WCAG 48px Compliance)
+           ========================================================================== */
+        .sheet-drag-handle {
+            display: none;
+            width: 40px;
+            height: 4px;
+            background: #475569;
+            border-radius: 9999px;
+            margin: 0 auto 0.5rem auto;
+        }
+
+        @media (max-width: 768px) {
+            header {
+                flex-direction: column;
+                align-items: stretch;
+                padding: 0.5rem 0.75rem;
+                gap: 0.4rem;
+            }
+
+            .logo-group {
+                justify-content: space-between;
+                width: 100%;
+            }
+
+            .logo-title {
+                font-size: 0.95rem;
+            }
+
+            .logo-badge {
+                font-size: 0.65rem;
+                padding: 0.15rem 0.35rem;
+            }
+
+            .nav-tabs {
+                width: 100%;
+                overflow-x: auto;
+                white-space: nowrap;
+                padding-bottom: 0.35rem;
+                -webkit-overflow-scrolling: touch;
+                scrollbar-width: none;
+                gap: 0.3rem;
+                flex-wrap: nowrap;
+            }
+            .nav-tabs::-webkit-scrollbar {
+                display: none;
+            }
+
+            .nav-tab {
+                padding: 0.45rem 0.75rem;
+                font-size: 0.725rem;
+                flex-shrink: 0;
+                border-radius: 6px;
+                min-height: 40px;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.35rem;
+            }
+
+            .sheet-drag-handle {
+                display: block;
+            }
+
+            /* Content Panels Transformed to Slide-Up Bottom Sheets */
+            .content-panel {
+                position: fixed !important;
+                top: auto !important;
+                bottom: 0 !important;
+                left: 0 !important;
+                right: 0 !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                height: 78vh !important;
+                max-height: 85vh !important;
+                border-radius: 20px 20px 0 0 !important;
+                border-left: none !important;
+                border-top: 1px solid var(--border-color) !important;
+                background: rgba(17, 24, 39, 0.98) !important;
+                backdrop-filter: blur(20px) !important;
+                box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.85) !important;
+                transform: translateY(100%);
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+                display: block !important;
+                z-index: 100 !important;
+                padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom)) 1rem !important;
+                box-sizing: border-box !important;
+            }
+
+            .content-panel.active {
+                transform: translateY(0) !important;
+            }
+
+            .content-panel.minimized {
+                transform: translateY(calc(100% - 58px)) !important;
+                overflow: hidden !important;
+            }
+
+            .panel-header {
+                position: sticky;
+                top: -0.75rem;
+                background: rgba(17, 24, 39, 0.98);
+                margin: -0.75rem -1rem 1rem -1rem;
+                padding: 0.6rem 1rem 0.5rem 1rem;
+                border-bottom: 1px solid var(--border-color);
+                z-index: 5;
+                flex-direction: column;
+                align-items: stretch;
+                gap: 0.25rem;
+            }
+
+            .panel-header-actions {
+                position: absolute;
+                top: 0.6rem;
+                right: 1rem;
+            }
+
+            /* Viewport Controls on Mobile */
+            .viewport-overlay {
+                top: auto !important;
+                bottom: 0.75rem !important;
+                left: 0.75rem !important;
+                right: 0.75rem !important;
+                width: auto !important;
+                max-height: 38vh !important;
+                overflow-y: auto !important;
+                border-radius: 12px !important;
+                padding: 0.75rem !important;
+            }
+
+            .viewport-quickbar {
+                top: 0.5rem !important;
+                right: 0.5rem !important;
+                left: auto !important;
+                gap: 0.25rem !important;
+                padding: 0.25rem !important;
+                border-radius: 6px !important;
+            }
+
+            .quick-btn span {
+                display: none; /* Icon-only buttons on mobile */
+            }
+
+            .quick-btn {
+                padding: 0.4rem 0.5rem !important;
+                font-size: 0.85rem !important;
+                min-width: 38px;
+                min-height: 38px;
+                justify-content: center;
+            }
+
+            /* Touch Target Optimization (WCAG Minimum 44px-48px) */
+            .btn, .btn-outline {
+                min-height: 44px;
+                padding: 0.55rem 0.85rem;
+                font-size: 0.8rem;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .check-item {
+                min-height: 48px;
+                padding: 0.5rem 0.25rem;
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+            }
+
+            .check-item input[type="checkbox"] {
+                width: 22px;
+                height: 22px;
+                min-width: 22px;
+                min-height: 22px;
+                cursor: pointer;
+            }
+
+            .data-table {
+                display: block;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .logo-title {
+                font-size: 0.85rem;
+            }
+
+            .content-panel {
+                height: 84vh !important;
+            }
+
+            .viewport-overlay {
+                max-height: 34vh !important;
+            }
+        }
     </style>
+
 </head>
 <body>
 
@@ -658,6 +858,7 @@
         <!-- Panel 1: Supply Chain & Dynamic BOM Suite -->
         <div id="supply-chain" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-truck-ramp-box"></i> <span>Supply Chain & Procurement Matrix</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -713,6 +914,7 @@
         <!-- Panel 2: Material Science & Physics Engine -->
         <div id="materials" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-atom"></i> <span>Material Science & Physics Selector</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -768,6 +970,7 @@
         <!-- Panel 3: Distributed 3D Print Farm & Machine Profiles -->
         <div id="print-farm" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-print"></i> <span>3D Print Farm & Slicer Profiles</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -811,6 +1014,7 @@
         <!-- Panel 4: WebSerial Live Supervisor & Flasher -->
         <div id="diagnostics" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-terminal"></i> <span>WebSerial Supervisor Console</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -852,6 +1056,7 @@
         <!-- Panel 5: Interactive QA & Step-by-Step Assembly Guide -->
         <div id="qa-assembly" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-screwdriver-wrench"></i> <span>Assembly QA Checklist</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -875,6 +1080,7 @@
         <!-- Panel: Serialized MES Chassis Travelers -->
         <div id="travelers" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-barcode"></i> <span>Chassis Manufacturing Execution (MES)</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -896,6 +1102,7 @@
         <!-- Panel: Automated OS & Provisioning Config Generator -->
         <div id="provisioning" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-server"></i> <span>ZFS & OS Provisioning Studio</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -937,6 +1144,7 @@
         <!-- Panel 6: Parts Catalog & 3D CAD Component Library -->
         <div id="parts-catalog" class="content-panel">
             <div class="panel-header">
+                <div class="sheet-drag-handle"></div>
                 <div class="panel-title"><i class="fa-solid fa-boxes-stacked"></i> <span>Parts & 3D CAD Library</span></div>
                 <div class="panel-header-actions">
                     <button class="panel-btn" title="Minimize / Expand" onclick="toggleMinimizePanel(this)"><i class="fa-solid fa-compress"></i></button>
@@ -1062,7 +1270,13 @@
 
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
+            controls.dampingFactor = 0.08;
+            controls.touches = {
+                ONE: THREE.TOUCH.ROTATE,
+                TWO: THREE.TOUCH.DOLLY_PAN
+            };
+            controls.minDistance = 200;
+            controls.maxDistance = 1800;
 
             // Lighting
             ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
@@ -1860,10 +2074,11 @@
         ];
 
         function updateViewportOffset() {
+            const isMobile = window.innerWidth <= 768;
             const activePanel = document.querySelector('.content-panel.active');
             const isMinimized = activePanel ? activePanel.classList.contains('minimized') : true;
-            // Shift view window gently to the left (140px) when sidebar is open and expanded
-            targetViewOffset = (activePanel && !isMinimized) ? 140 : 0;
+            // Shift view window gently to the left (140px) ONLY on desktop when sidebar is open
+            targetViewOffset = (!isMobile && activePanel && !isMinimized) ? 140 : 0;
         }
 
         function toggleTurntable() {