feat(ui): improve styling and persist chat state

- Enhance footer and debug element styling with better visibility
- Increase map modal size and adjust marker appearance
- Persist chat collapse state in localStorage and initialize on load

public/app.js

@@ -192,12 +192,12 @@ const updateMap = async (peers) => {
             const loc = await fetchLocation(peer.ip);
             if (loc) {
                 const marker = L.circleMarker([loc.lat, loc.lon], {
-                    radius: 5,
+                    radius: 10,
                     fillColor: "#4ade80",
-                    color: "#fff",
-                    weight: 1,
-                    opacity: 1,
-                    fillOpacity: 0.8
+                    color: "transparent",
+                    weight: 0,
+                    opacity: 0,
+                    fillOpacity: 0.15
                 }).addTo(map);
                 
                 marker.bindPopup(`<b>Node</b> ${peer.id.slice(-8)}<br>${loc.city}, ${loc.country}`);
@@ -220,11 +220,29 @@ terminalToggle.addEventListener('click', (e) => {
     toggleChat();
 });
 
+// Initialize chat state from localStorage
+const initChatState = () => {
+    const isCollapsed = localStorage.getItem('chatCollapsed') === 'true';
+    if (isCollapsed) {
+        terminal.classList.add('collapsed');
+        terminalToggle.innerText = '▲';
+        document.body.classList.remove('chat-active');
+        document.body.classList.add('chat-collapsed');
+    } else {
+        terminal.classList.remove('collapsed');
+        terminalToggle.innerText = '▼';
+        document.body.classList.add('chat-active');
+        document.body.classList.remove('chat-collapsed');
+    }
+};
+
 const toggleChat = () => {
     terminal.classList.toggle('collapsed');
     const isCollapsed = terminal.classList.contains('collapsed');
     terminalToggle.innerText = isCollapsed ? '▲' : '▼';
     
+    localStorage.setItem('chatCollapsed', isCollapsed);
+
     if (isCollapsed) {
         document.body.classList.remove('chat-active');
         document.body.classList.add('chat-collapsed');
@@ -328,10 +346,11 @@ evtSource.onmessage = (event) => {
 
     if (data.chatEnabled) {
         terminal.classList.remove('hidden');
-        if (terminal.classList.contains('collapsed')) {
-            document.body.classList.add('chat-collapsed');
-        } else {
-            document.body.classList.add('chat-active');
+        
+        // Only initialize state once when chat becomes enabled
+        if (!terminal.dataset.initialized) {
+            initChatState();
+            terminal.dataset.initialized = 'true';
         }
     } else {
         terminal.classList.add('hidden');

public/style.css

@@ -25,8 +25,26 @@ body.chat-collapsed {
 .count { font-size: 8rem; font-weight: bold; color: #4ade80; transition: color 0.2s; visibility: hidden; }
 .count.loaded { visibility: visible; }
 .label { font-size: 1.5rem; color: #9ca3af; margin-top: 1rem; }
-.footer { margin-top: 2rem; font-size: 0.9rem; color: #4b5563; }
-.debug { font-size: 0.8rem; color: #4b5563; margin-top: 1rem; }
+.footer { 
+    margin: 2rem auto 0;
+    font-size: 0.9rem; 
+    color: #4b5563; 
+    background: rgba(0, 0, 0, 0.6);
+    padding: 2px 8px;
+    border-radius: 4px;
+    display: block;
+    width: fit-content;
+}
+.debug { 
+    font-size: 0.8rem; 
+    color: #4b5563; 
+    margin: 1rem auto 0;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 5px 10px;
+    border-radius: 4px;
+    display: block;
+    width: fit-content;
+}
 .debug-link { color: #4b5563; border-bottom: 1px dotted #4b5563; cursor: pointer; }
 .debug-link:hover { color: #9ca3af; }
 a { color: #4b5563; text-decoration: none; border-bottom: 1px dotted #4b5563; }
@@ -58,9 +76,10 @@ a { color: #4b5563; text-decoration: none; border-bottom: 1px dotted #4b5563; }
     position: relative;
 }
 .modal-content.map-content {
-    max-width: 800px;
-    width: 90%;
-    height: 80vh;
+    max-width: 1000px;
+    width: 100%;
+    height: 500px;
+    max-height: 80vh;
     padding: 0;
     overflow: hidden;
     display: flex;
@@ -80,17 +99,19 @@ a { color: #4b5563; text-decoration: none; border-bottom: 1px dotted #4b5563; }
     text-transform: uppercase;
     letter-spacing: 1px;
 }
+
 .close-btn {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     background: none;
     border: none;
-    color: #333;
+    color: #9ca3af;
     font-size: 1.2rem;
     cursor: pointer;
+    z-index: 1001;
 }
-.close-btn:hover { color: #666; }
+.close-btn:hover { color: #fff; }
 .stat-row {
     display: flex;
     justify-content: space-between;