diff --git a/dashboard/css/layout.css b/dashboard/css/layout.css
index c767796..48982b1 100644
--- a/dashboard/css/layout.css
+++ b/dashboard/css/layout.css
@@ -293,13 +293,70 @@
   padding: var(--space-3);
 }
 
+/* Legacy ID-based selectors (match live.html panel IDs) */
+#node-panel {
+  position: fixed;
+  top: 60px;
+  left: 20px;
+  width: 280px;
+  max-height: calc(100vh - 80px);
+  background: var(--live-node-bg);
+  border-radius: var(--radius-card);
+  padding: var(--space-3);
+  z-index: 100;
+  overflow-y: auto;
+}
+
+#chart-panel {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 400px;
+  height: 260px;
+  background: var(--live-chart-bg);
+  border-radius: var(--radius-card);
+  padding: var(--space-3);
+  z-index: 100;
+}
+
+#presence-panel {
+  position: fixed;
+  top: 60px;
+  right: 20px;
+  width: 300px;
+  background: var(--live-panel-bg);
+  border-radius: var(--radius-card);
+  padding: var(--space-3);
+  z-index: 100;
+}
+
 /* ── Tablet breakpoint for live panels ── */
 @media (max-width: 1023px) {
   .live-panel--left,
   .live-panel--right,
-  .live-panel--presence {
+  .live-panel--presence,
+  #node-panel,
+  #presence-panel {
     display: none;
   }
+
+  #chart-panel {
+    width: calc(100% - 16px);
+    right: 8px;
+    left: 8px;
+    bottom: calc(8px + env(safe-area-inset-bottom));
+  }
+}
+
+/* ── Mobile breakpoint for live panels ── */
+@media (max-width: 639px) {
+  #chart-panel {
+    width: calc(100% - 16px);
+    right: 8px;
+    left: 8px;
+    bottom: 8px;
+    height: 200px;
+  }
 }
 
 /* ── Mobile bottom nav safe-area on live page ── */
diff --git a/dashboard/live.html b/dashboard/live.html
index 19d32a6..81c98dd 100644
--- a/dashboard/live.html
+++ b/dashboard/live.html
@@ -91,17 +91,10 @@
             background: var(--alert);
         }
 
-        /* Amplitude chart overlay */
+        /* Amplitude chart overlay — base positioning in layout.css */
         #chart-panel {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            width: 400px;
-            height: 260px;
-            background: var(--live-chart-bg);
             border-radius: 8px;
             padding: 12px;
-            z-index: 100;
         }
 
         #chart-title {
@@ -139,18 +132,10 @@
             display: block;
         }
 
-        /* Node list panel */
+        /* Node list panel — base positioning in layout.css */
         #node-panel {
-            position: fixed;
-            top: 60px;
-            left: 20px;
-            width: 280px;
-            max-height: calc(100vh - 80px);
-            background: var(--live-node-bg);
             border-radius: 8px;
             padding: 12px;
-            z-index: 100;
-            overflow-y: auto;
         }
 
         #node-panel h3 {