feat: UI overhaul - full width layout, user bubble contrast, green status dot, warmer dark theme

app.js

@@ -137,6 +137,7 @@
   function appendMessage(container, sender, message, useMarkdown = false, isError = false) {
     const msgDiv = document.createElement("div");
     msgDiv.classList.add("message");
+    if (sender === "You") msgDiv.classList.add("user-msg");
     if (isError) msgDiv.classList.add("error");
 
     const commands = extractExecuteTags(message);

index.html

@@ -19,13 +19,13 @@
 
   <style>
     :root {
-      --bg: #0b1220;
-      --panel: #0f172a;
-      --border: #1e293b;
-      --text: #e5e7eb;
-      --muted: #94a3b8;
+      --bg: #0d0f14;
+      --panel: #13161d;
+      --border: #232830;
+      --text: #dde3ed;
+      --muted: #7a8799;
       --accent: #22c55e;
-      --accent-2: #3b82f6;
+      --accent-2: #4f9eff;
     }
     * { box-sizing: border-box; }
     body {
@@ -35,9 +35,9 @@
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     }
     .container {
-      max-width: 900px;
-      margin: 24px auto;
-      padding: 0 16px;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px 40px;
     }
     header {
       display: flex;
@@ -51,8 +51,22 @@
       letter-spacing: 0.4px;
     }
     .status {
-      font-size: 12px;
+      font-size: 13px;
       color: var(--muted);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ef4444;
+      display: inline-block;
+    }
+    .status-dot.ok {
+      background: #22c55e;
+      box-shadow: 0 0 6px #22c55e88;
     }
     .header-btn {
       padding: 6px 12px;
@@ -77,20 +91,26 @@
       padding: 12px;
     }
     #chat-output {
-      height: 55vh;
+      height: 70vh;
       overflow-y: auto;
-      padding: 8px;
-      background: #0b1220;
+      padding: 16px;
+      background: #0d0f14;
       border: 1px solid var(--border);
       border-radius: 8px;
     }
     .message {
-      margin: 10px 0;
-      padding: 8px 10px;
-      background: #0b1220;
+      margin: 12px 0;
+      padding: 14px 18px;
+      background: #0d1626;
       border: 1px solid var(--border);
-      border-radius: 8px;
-      line-height: 1.5;
+      border-radius: 10px;
+      line-height: 1.7;
+      font-size: 15px;
+    }
+    .message.user-msg {
+      background: #0d1e35;
+      border-color: #1a3a5c;
+      border-left: 3px solid #4f9eff;
     }
     .message strong {
       display: inline-block;
@@ -117,10 +137,10 @@
       word-break: break-word;
     }
     .composer {
-      margin-top: 12px;
+      margin-top: 16px;
       display: grid;
       grid-template-columns: 1fr auto;
-      gap: 8px;
+      gap: 12px;
       align-items: start;
     }
     #chat-input {
@@ -128,13 +148,18 @@
       resize: vertical;
       min-height: 80px;
       max-height: 240px;
-      padding: 10px 12px;
-      border-radius: 8px;
+      padding: 14px 16px;
+      border-radius: 10px;
       border: 1px solid var(--border);
-      background: #0b1220;
+      background: #0d0f14;
       color: var(--text);
       font-family: inherit;
-      font-size: 14px;
+      font-size: 15px;
+    }
+    #chat-input:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
     }
     #chat-send {
       height: 40px;
@@ -205,7 +230,7 @@
     /* Command execution styles */
     .command-wrapper {
       margin: 10px 0;
-      background: #0b1220;
+      background: #0d0f14;
       border: 1px solid var(--border);
       border-radius: 8px;
       padding: 12px;
@@ -255,7 +280,7 @@
         <button id="clear-btn" class="header-btn" title="Clear conversation">
           🗑️ Clear
         </button>
-        <div class="status">Backend: <span id="status">checking…</span></div>
+        <div class="status"><span class="status-dot" id="status-dot"></span>Backend: <span id="status">checking…</span></div>
       </div>
     </header>
 
@@ -281,7 +306,9 @@
       try {
         const r = await fetch('/chat/ready');
         const j = await r.json().catch(() => ({}));
-        el.textContent = (r.ok && j.status === 'ok') ? 'ok' : 'error';
+        const isOk = r.ok && j.status === 'ok';
+        el.textContent = isOk ? 'ok' : 'error';
+        document.getElementById('status-dot').classList.toggle('ok', isOk);
       } catch {
         el.textContent = 'offline';
       }