diff --git a/public/live.css b/public/live.css
index 8d0d4dbd..d0d5d42a 100644
--- a/public/live.css
+++ b/public/live.css
@@ -201,6 +201,15 @@
   display: flex;
   flex-direction: column;
   gap: 3px;
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+/* Collapsible legend (#279) */
+.live-legend.hidden {
+  opacity: 0;
+  transform: translateX(100%);
+  pointer-events: none;
+  visibility: hidden;
 }
 
 .legend-title {
@@ -272,6 +281,16 @@
   background: rgba(59, 130, 246, 0.2) !important;
 }
 
+/* ---- Medium breakpoint (#279) ---- */
+@media (max-width: 768px) {
+  .live-feed { width: 280px; max-height: 200px; }
+  .live-node-detail { width: 260px; }
+  .live-legend { font-size: 10px; padding: 8px 10px; }
+  .live-header { gap: 8px; padding: 6px 12px; }
+  .live-stat-pill { font-size: 11px; padding: 2px 8px; }
+  .live-toggles { font-size: 10px; gap: 6px; }
+}
+
 /* ---- Responsive ---- */
 @media (max-width: 640px) {
   .live-feed { display: none !important; }
@@ -702,9 +721,8 @@
   border: 0;
 }
 
-/* Legend toggle button for mobile (#60) */
+/* Legend toggle button — visible at all sizes (#60, #279) */
 .legend-toggle-btn {
-  display: none;
   position: absolute;
   bottom: 82px;
   right: 12px;
diff --git a/public/live.js b/public/live.js
index 1b8fa2ab..df6e027a 100644
--- a/public/live.js
+++ b/public/live.js
@@ -762,7 +762,7 @@
           <button class="feed-hide-btn" id="nodeDetailClose" title="Close">✕</button>
           <div id="nodeDetailContent"></div>
         </div>
-        <button class="legend-toggle-btn hidden" id="legendToggleBtn" aria-label="Show legend" title="Show legend">🎨</button>
+        <button class="legend-toggle-btn" id="legendToggleBtn" aria-label="Show legend" title="Show legend">🎨</button>
         <div class="live-overlay live-legend" id="liveLegend" role="region" aria-label="Map legend">
           <h3 class="legend-title">PACKET TYPES</h3>
           <ul class="legend-list">
@@ -1043,10 +1043,19 @@
     const legendEl = document.getElementById('liveLegend');
     const legendToggleBtn = document.getElementById('legendToggleBtn');
     if (legendToggleBtn && legendEl) {
+      // Restore legend collapsed state from localStorage (#279)
+      try {
+        if (localStorage.getItem('live-legend-hidden') === 'true') {
+          legendEl.classList.add('hidden');
+          legendToggleBtn.setAttribute('aria-label', 'Show legend');
+          legendToggleBtn.textContent = '🎨';
+        }
+      } catch (_) { /* private browsing / storage disabled */ }
       legendToggleBtn.addEventListener('click', () => {
-        const isVisible = legendEl.classList.toggle('legend-mobile-visible');
-        legendToggleBtn.setAttribute('aria-label', isVisible ? 'Hide legend' : 'Show legend');
-        legendToggleBtn.textContent = isVisible ? '✕' : '🎨';
+        const nowHidden = legendEl.classList.toggle('hidden');
+        legendToggleBtn.setAttribute('aria-label', nowHidden ? 'Show legend' : 'Hide legend');
+        legendToggleBtn.textContent = nowHidden ? '🎨' : '✕';
+        try { localStorage.setItem('live-legend-hidden', String(nowHidden)); } catch (_) { /* ignore */ }
       });
     }