From 0b91e45d9026ce3e4c7400c65c4e2bb5cd50f206 Mon Sep 17 00:00:00 2001
From: Alexander Whitestone
 <8633216+AlexanderWhitestone@users.noreply.github.com>
Date: Wed, 11 Mar 2026 15:16:04 -0400
Subject: [PATCH] Polish UI design with sleeker components and vivid magical
 animations (#172)

---
 src/dashboard/templates/base.html | 107 ++++++++++-
 static/css/mission-control.css    |  55 ++++--
 static/style.css                  | 302 +++++++++++++++++++++++-------
 3 files changed, 381 insertions(+), 83 deletions(-)

diff --git a/src/dashboard/templates/base.html b/src/dashboard/templates/base.html
index 928dd48..c7a82f8 100644
--- a/src/dashboard/templates/base.html
+++ b/src/dashboard/templates/base.html
@@ -13,8 +13,8 @@
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
   <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
-  <link rel="stylesheet" href="/static/style.css?v=5" />
-  <link rel="stylesheet" href="/static/css/mission-control.css?v=1" />
+  <link rel="stylesheet" href="/static/style.css?v=6" />
+  <link rel="stylesheet" href="/static/css/mission-control.css?v=2" />
   {% block extra_styles %}{% endblock %}
   <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.3/dist/htmx.min.js" crossorigin="anonymous"></script>
   <script>
@@ -151,10 +151,113 @@
   <!-- Toast container -->
   <div class="mc-toast-container" id="toast-container"></div>
 
+  <!-- Magical floating particles canvas -->
+  <canvas id="magic-particles" aria-hidden="true"></canvas>
+
   <main class="mc-main">
     {% block content %}{% endblock %}
   </main>
 
+  <script>
+    // ── Magical floating particles ──
+    (function() {
+      var canvas = document.getElementById('magic-particles');
+      if (!canvas) return;
+      var ctx = canvas.getContext('2d');
+      var particles = [];
+      var PARTICLE_COUNT = 40;
+      var raf;
+
+      function resize() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      }
+      resize();
+      window.addEventListener('resize', resize);
+
+      var colors = [
+        { r: 168, g: 85, b: 247 },  // purple
+        { r: 124, g: 58, b: 237 },  // violet
+        { r: 192, g: 132, b: 252 }, // light purple
+        { r: 249, g: 115, b: 22 },  // orange
+        { r: 237, g: 224, b: 255 }, // white-purple
+      ];
+
+      function createParticle() {
+        var c = colors[Math.floor(Math.random() * colors.length)];
+        return {
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          vx: (Math.random() - 0.5) * 0.3,
+          vy: (Math.random() - 0.5) * 0.3,
+          r: Math.random() * 2.2 + 0.5,
+          alpha: Math.random() * 0.4 + 0.05,
+          alphaDir: (Math.random() - 0.5) * 0.008,
+          color: c,
+          phase: Math.random() * Math.PI * 2,
+          drift: Math.random() * 0.2 + 0.05
+        };
+      }
+
+      for (var i = 0; i < PARTICLE_COUNT; i++) {
+        particles.push(createParticle());
+      }
+
+      var time = 0;
+      function draw() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        time += 0.003;
+
+        for (var i = 0; i < particles.length; i++) {
+          var p = particles[i];
+          p.x += p.vx + Math.sin(time + p.phase) * p.drift;
+          p.y += p.vy + Math.cos(time + p.phase) * p.drift;
+          p.alpha += p.alphaDir;
+
+          if (p.alpha <= 0.02 || p.alpha >= 0.45) p.alphaDir *= -1;
+          p.alpha = Math.max(0.02, Math.min(0.45, p.alpha));
+
+          if (p.x < -20) p.x = canvas.width + 20;
+          if (p.x > canvas.width + 20) p.x = -20;
+          if (p.y < -20) p.y = canvas.height + 20;
+          if (p.y > canvas.height + 20) p.y = -20;
+
+          // Glow
+          var grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 6);
+          grad.addColorStop(0, 'rgba(' + p.color.r + ',' + p.color.g + ',' + p.color.b + ',' + (p.alpha * 0.6) + ')');
+          grad.addColorStop(1, 'rgba(' + p.color.r + ',' + p.color.g + ',' + p.color.b + ',0)');
+          ctx.fillStyle = grad;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, p.r * 6, 0, Math.PI * 2);
+          ctx.fill();
+
+          // Core
+          ctx.fillStyle = 'rgba(' + p.color.r + ',' + p.color.g + ',' + p.color.b + ',' + p.alpha + ')';
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+        raf = requestAnimationFrame(draw);
+      }
+
+      // Only run when tab is visible
+      function onVis() {
+        if (document.hidden) {
+          cancelAnimationFrame(raf);
+        } else {
+          draw();
+        }
+      }
+      document.addEventListener('visibilitychange', onVis);
+      draw();
+
+      // Respect reduced motion preference
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        cancelAnimationFrame(raf);
+        canvas.style.display = 'none';
+      }
+    })();
+  </script>
   <script>
     // Clock
     function updateClock() {
diff --git a/static/css/mission-control.css b/static/css/mission-control.css
index 854544d..07ecca8 100644
--- a/static/css/mission-control.css
+++ b/static/css/mission-control.css
@@ -21,11 +21,11 @@
 }
 .mc-toast {
   pointer-events: auto;
-  background: rgba(17, 8, 32, 0.94);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  background: rgba(12, 6, 24, 0.94);
+  backdrop-filter: blur(20px) saturate(1.3);
+  -webkit-backdrop-filter: blur(20px) saturate(1.3);
+  border: 1px solid rgba(124, 58, 237, 0.12);
+  border-radius: var(--radius-md);
   padding: 10px 16px;
   font-family: var(--font);
   font-size: 12px;
@@ -33,12 +33,13 @@
   letter-spacing: 0.04em;
   line-height: 1.5;
   opacity: 0;
-  transform: translateX(40px);
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transform: translateX(40px) scale(0.96);
+  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }
 .mc-toast.show {
   opacity: 1;
-  transform: translateX(0);
+  transform: translateX(0) scale(1);
 }
 .mc-toast.info  { border-left: 3px solid var(--green);  }
 .mc-toast.warn  { border-left: 3px solid var(--amber);  }
@@ -74,9 +75,33 @@
   background: var(--text-dim);
   transition: background 0.3s, box-shadow 0.3s;
 }
-.mc-conn-dot.green  { background: var(--green); box-shadow: 0 0 6px var(--green); }
-.mc-conn-dot.amber  { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
-.mc-conn-dot.red    { background: var(--red);   box-shadow: 0 0 6px var(--red);   }
+.mc-conn-dot.green  {
+  background: var(--green);
+  box-shadow: 0 0 6px var(--green);
+  animation: connPulseGreen 2s ease-in-out infinite;
+}
+.mc-conn-dot.amber  {
+  background: var(--amber);
+  box-shadow: 0 0 6px var(--amber);
+  animation: connPulseAmber 1.5s ease-in-out infinite;
+}
+.mc-conn-dot.red    {
+  background: var(--red);
+  box-shadow: 0 0 6px var(--red);
+  animation: connPulseRed 1s ease-in-out infinite;
+}
+@keyframes connPulseGreen {
+  0%, 100% { box-shadow: 0 0 6px var(--green); }
+  50%      { box-shadow: 0 0 10px var(--green), 0 0 18px rgba(0, 232, 122, 0.25); }
+}
+@keyframes connPulseAmber {
+  0%, 100% { box-shadow: 0 0 6px var(--amber); }
+  50%      { box-shadow: 0 0 10px var(--amber), 0 0 18px rgba(255, 184, 0, 0.25); }
+}
+@keyframes connPulseRed {
+  0%, 100% { box-shadow: 0 0 6px var(--red); }
+  50%      { box-shadow: 0 0 12px var(--red), 0 0 22px rgba(255, 68, 85, 0.3); }
+}
 
 
 /* ── Briefing ─────────────────────────────────────────────── */
@@ -565,8 +590,8 @@
   color: var(--text-bright);
   font-family: var(--font);
   font-size: 16px;
-  padding: 10px 12px;
-  min-height: 44px;
+  padding: 14px 16px;
+  min-height: 56px;
 }
 .mobile-chat-input input:focus {
   outline: none;
@@ -771,8 +796,8 @@
   color: var(--text-bright);
   font-family: var(--font);
   font-size: 16px;
-  padding: 10px 12px;
-  min-height: 44px;
+  padding: 14px 16px;
+  min-height: 56px;
 }
 .local-chat-input input:focus {
   outline: none;
diff --git a/static/style.css b/static/style.css
index 91d9a3a..dc8e931 100644
--- a/static/style.css
+++ b/static/style.css
@@ -40,6 +40,20 @@
   --radius-lg:  14px;
   --radius-xl:  20px;
 
+  /* ── Shadow tokens ── */
+  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
+  --shadow-glow-purple: 0 0 20px rgba(124, 58, 237, 0.15);
+  --shadow-glow-orange: 0 0 20px rgba(249, 115, 22, 0.12);
+
+  /* ── Transition tokens ── */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --transition-fast: 0.15s var(--ease-out-expo);
+  --transition-med:  0.25s var(--ease-out-expo);
+  --transition-slow: 0.4s var(--ease-out-expo);
+
   /* ── Glass effect ── */
   --glass-bg:    rgba(17, 8, 32, 0.72);
   --glass-blur:  16px;
@@ -83,13 +97,66 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-a { color: var(--purple); }
+/* ── Vivid magical background animation layer ─────── */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
+    radial-gradient(ellipse 500px 500px at 80% 70%, rgba(249, 115, 22, 0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 400px 300px at 60% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
+  animation: auroraShift 20s ease-in-out infinite alternate;
+}
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 350px 350px at 40% 60%, rgba(124, 58, 237, 0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 450px 300px at 75% 35%, rgba(192, 132, 252, 0.08) 0%, transparent 70%);
+  animation: auroraShift2 25s ease-in-out infinite alternate;
+}
+
+@keyframes auroraShift {
+  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
+  33%  { transform: translate(3%, -2%) scale(1.05); opacity: 1; }
+  66%  { transform: translate(-2%, 3%) scale(0.97); opacity: 0.8; }
+  100% { transform: translate(1%, -1%) scale(1.02); opacity: 0.9; }
+}
+@keyframes auroraShift2 {
+  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.5; }
+  50%  { transform: translate(-3%, 2%) scale(1.08) rotate(1deg); opacity: 0.9; }
+  100% { transform: translate(2%, -3%) scale(0.95) rotate(-1deg); opacity: 0.6; }
+}
+
+/* Ensure all content sits above the animated background */
+.mc-header, .mc-main, .mc-mobile-overlay, .mc-mobile-menu,
+.mc-toast-container { position: relative; z-index: 1; }
+
+/* ── Magical particle canvas ─────────────────────── */
+#magic-particles {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.85;
+}
+@media (prefers-reduced-motion: reduce) {
+  body::before, body::after, #magic-particles { display: none !important; }
+}
+
+a { color: var(--purple); transition: color var(--transition-fast); }
 a:hover { color: var(--orange); }
 
 /* Smooth page transitions */
-.mc-main { animation: fadeUp 0.3s ease-out; }
+.mc-main { animation: fadeUp 0.4s var(--ease-out-expo); }
 @keyframes fadeUp {
-  from { opacity: 0; transform: translateY(8px); }
+  from { opacity: 0; transform: translateY(12px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
@@ -98,12 +165,13 @@ a:hover { color: var(--orange); }
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 24px;
-  padding-top: max(12px, env(safe-area-inset-top));
-  background: rgba(17, 8, 32, 0.86);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  border-bottom: 1px solid var(--border);
+  padding: 10px 24px;
+  padding-top: max(10px, env(safe-area-inset-top));
+  background: rgba(8, 4, 18, 0.82);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
+  box-shadow: 0 1px 24px rgba(124, 58, 237, 0.08), 0 1px 0 rgba(124, 58, 237, 0.06);
   position: sticky;
   top: 0;
   z-index: 100;
@@ -117,8 +185,13 @@ a:hover { color: var(--orange); }
   letter-spacing: 0.15em;
   text-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 40px rgba(168, 85, 247, 0.25);
   text-decoration: none;
+  animation: titleGlow 4s ease-in-out infinite alternate;
 }
 .mc-title:hover { color: var(--text-bright); text-decoration: none; }
+@keyframes titleGlow {
+  0%   { text-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 40px rgba(168, 85, 247, 0.25); }
+  100% { text-shadow: 0 0 24px rgba(168, 85, 247, 0.75), 0 0 60px rgba(168, 85, 247, 0.35), 0 0 80px rgba(124, 58, 237, 0.15); }
+}
 .mc-subtitle {
   font-size: 11px;
   color: var(--text-dim);
@@ -127,9 +200,15 @@ a:hover { color: var(--orange); }
 }
 .mc-time {
   font-size: 14px;
+  font-variant-numeric: tabular-nums;
   color: var(--orange);
   letter-spacing: 0.1em;
   text-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
+  animation: clockPulse 2s ease-in-out infinite alternate;
+}
+@keyframes clockPulse {
+  0%   { text-shadow: 0 0 10px rgba(249, 115, 22, 0.4); }
+  100% { text-shadow: 0 0 16px rgba(249, 115, 22, 0.6), 0 0 30px rgba(249, 115, 22, 0.2); }
 }
 .mc-test-link {
   font-size: 9px;
@@ -137,13 +216,19 @@ a:hover { color: var(--orange); }
   color: var(--text-dim);
   letter-spacing: 0.2em;
   text-decoration: none;
-  border: 1px solid var(--border);
-  border-radius: 2px;
-  padding: 3px 8px;
-  transition: border-color 0.15s, color 0.15s;
+  border: 1px solid rgba(59, 26, 92, 0.4);
+  border-radius: 3px;
+  padding: 4px 10px;
+  transition: border-color var(--transition-fast), color var(--transition-fast),
+              background var(--transition-fast), box-shadow var(--transition-fast);
   touch-action: manipulation;
 }
-.mc-test-link:hover { border-color: var(--purple); color: var(--purple); }
+.mc-test-link:hover {
+  border-color: var(--purple);
+  color: var(--purple);
+  background: rgba(168, 85, 247, 0.06);
+  box-shadow: 0 0 8px rgba(168, 85, 247, 0.1);
+}
 
 /* ── Named link colors ───────────────────────────── */
 .mc-link-thinking { color: #c084fc; }
@@ -157,25 +242,33 @@ a:hover { color: var(--orange); }
   cursor: pointer;
 }
 .mc-dropdown-menu {
-  display: none;
   position: absolute;
-  top: calc(100% + 6px);
+  top: calc(100% + 8px);
   right: 0;
-  background: rgba(17, 8, 32, 0.96);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 8px 0;
+  background: rgba(12, 6, 24, 0.96);
+  backdrop-filter: blur(24px) saturate(1.3);
+  -webkit-backdrop-filter: blur(24px) saturate(1.3);
+  border: 1px solid rgba(124, 58, 237, 0.15);
+  border-radius: 6px;
+  padding: 6px 0;
   min-width: 160px;
   z-index: 150;
   max-height: 70vh;
   overflow-y: auto;
   flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.06);
+  /* Animated fade + slide */
+  display: flex;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
 }
 .mc-nav-dropdown:hover .mc-dropdown-menu,
 .mc-nav-dropdown.open .mc-dropdown-menu {
-  display: flex;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }
 .mc-dropdown-menu .mc-test-link {
   display: block;
@@ -251,12 +344,13 @@ a:hover { color: var(--orange); }
   right: -280px;
   width: 280px;
   height: 100%;
-  background: rgba(17, 8, 32, 0.96);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border-left: 1px solid var(--border);
+  background: rgba(12, 6, 24, 0.96);
+  backdrop-filter: blur(28px) saturate(1.4);
+  -webkit-backdrop-filter: blur(28px) saturate(1.4);
+  border-left: 1px solid rgba(124, 58, 237, 0.12);
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
   z-index: 200;
-  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: right 0.35s var(--ease-out-expo);
   display: flex;
   flex-direction: column;
   padding-top: max(12px, env(safe-area-inset-top));
@@ -343,18 +437,21 @@ a:hover { color: var(--orange); }
 /* ── Panel / Card overrides ──────────────────────── */
 .mc-panel {
   background: var(--glass-bg);
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
+  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
   border: 1px solid var(--glass-border);
-  border-radius: var(--radius-sm);
-  transition: border-color 0.2s ease;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md), var(--shadow-glow-purple);
+  transition: border-color var(--transition-med), box-shadow var(--transition-med),
+              transform var(--transition-fast);
 }
 .mc-panel:hover {
-  border-color: rgba(124, 58, 237, 0.3);
+  border-color: rgba(124, 58, 237, 0.32);
+  box-shadow: var(--shadow-lg), 0 0 28px rgba(124, 58, 237, 0.12);
 }
 .mc-panel-header {
   background: rgba(24, 10, 45, 0.90);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid rgba(59, 26, 92, 0.4);
   font-size: 10px;
   font-weight: 700;
   color: var(--text-dim);
@@ -366,10 +463,16 @@ a:hover { color: var(--orange); }
 /* ── Agent Card ──────────────────────────────────── */
 .mc-agent-card {
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   padding: 12px;
   background: rgba(24, 10, 45, 0.82);
-  transition: border-color 0.2s, transform 0.15s;
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--transition-med), transform var(--transition-fast),
+              box-shadow var(--transition-med);
+}
+.mc-agent-card:hover {
+  border-color: rgba(124, 58, 237, 0.25);
+  box-shadow: var(--shadow-md), 0 0 16px rgba(124, 58, 237, 0.08);
 }
 .mc-agent-card:active {
   transform: scale(0.98);
@@ -381,9 +484,22 @@ a:hover { color: var(--orange); }
   flex-shrink: 0;
   display: inline-block;
 }
-.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
-.status-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
-.status-dot.red   { background: var(--red);   box-shadow: 0 0 6px var(--red); }
+.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); animation: dotPulse 2s ease-in-out infinite; }
+.status-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: dotPulseAmber 2s ease-in-out infinite; }
+.status-dot.red   { background: var(--red);   box-shadow: 0 0 6px var(--red); animation: dotPulseRed 1.5s ease-in-out infinite; }
+
+@keyframes dotPulse {
+  0%, 100% { box-shadow: 0 0 6px var(--green); }
+  50%      { box-shadow: 0 0 12px var(--green), 0 0 20px rgba(0, 232, 122, 0.3); }
+}
+@keyframes dotPulseAmber {
+  0%, 100% { box-shadow: 0 0 6px var(--amber); }
+  50%      { box-shadow: 0 0 12px var(--amber), 0 0 20px rgba(255, 184, 0, 0.3); }
+}
+@keyframes dotPulseRed {
+  0%, 100% { box-shadow: 0 0 6px var(--red); }
+  50%      { box-shadow: 0 0 12px var(--red), 0 0 20px rgba(255, 68, 85, 0.3); }
+}
 
 .agent-name {
   font-size: 14px;
@@ -407,7 +523,13 @@ a:hover { color: var(--orange); }
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   margin-bottom: 10px;
-  transition: border-color 0.2s, transform 0.15s;
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--transition-med), transform var(--transition-fast),
+              box-shadow var(--transition-med);
+}
+.agent-card:hover {
+  border-color: rgba(124, 58, 237, 0.28);
+  box-shadow: var(--shadow-md), 0 0 16px rgba(124, 58, 237, 0.08);
 }
 .agent-card:active { transform: scale(0.98); }
 .agent-avatar {
@@ -422,6 +544,7 @@ a:hover { color: var(--orange); }
   font-size: 16px;
   color: white;
   flex-shrink: 0;
+  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
 }
 .agent-info { flex: 1; min-width: 0; }
 .agent-info .agent-name {
@@ -479,13 +602,19 @@ a:hover { color: var(--orange); }
 .msg-body {
   background: rgba(24, 10, 45, 0.80);
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   padding: 10px 12px;
-  line-height: 1.65;
+  line-height: 1.7;
   white-space: pre-wrap;
   word-break: break-word;
+  box-shadow: var(--shadow-sm);
+  animation: msgAppear 0.3s var(--ease-out-expo);
 }
-.chat-message.user      .msg-body { border-color: var(--border-glow); }
+@keyframes msgAppear {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.chat-message.user      .msg-body { border-color: rgba(124, 58, 237, 0.35); box-shadow: var(--shadow-sm), 0 0 12px rgba(124, 58, 237, 0.06); }
 .chat-message.agent     .msg-body { border-left: 3px solid var(--purple); }
 .chat-message.error-msg .msg-body { border-left: 3px solid var(--red); color: var(--red); }
 
@@ -575,65 +704,84 @@ a:hover { color: var(--orange); }
 .mc-input {
   background: rgba(8, 4, 18, 0.75) !important;
   border: 1px solid var(--border) !important;
-  border-radius: 3px !important;
+  border-radius: var(--radius-md) !important;
   color: var(--text-bright) !important;
   font-family: var(--font) !important;
   font-size: 13px !important;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-med) !important;
+  min-height: 48px;
+  padding: 12px 14px !important;
 }
 .mc-input:focus {
   border-color: var(--border-glow) !important;
-  box-shadow: 0 0 0 1px var(--border-glow), 0 0 10px rgba(124, 58, 237, 0.25) !important;
+  box-shadow: 0 0 0 1px var(--border-glow), 0 0 14px rgba(124, 58, 237, 0.2), 0 0 30px rgba(124, 58, 237, 0.06) !important;
 }
 .mc-input::placeholder { color: var(--text-dim) !important; }
 
+/* Larger touch-friendly input on tablets / stylus devices */
+@media (pointer: coarse), (hover: none) {
+  .mc-input, .mobile-chat-input input, .local-chat-input input {
+    min-height: 56px;
+    font-size: 16px !important;
+    padding: 14px 16px !important;
+  }
+}
+
 .mc-btn-send {
-  background: var(--border-glow);
+  background: linear-gradient(135deg, var(--border-glow), #9333ea);
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   color: var(--text-bright);
   font-family: var(--font);
   font-size: 12px;
   font-weight: 700;
   padding: 8px 18px;
   letter-spacing: 0.12em;
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
+  transition: background var(--transition-fast), color var(--transition-fast),
+              box-shadow var(--transition-med), transform 0.1s;
   touch-action: manipulation;
   white-space: nowrap;
+  box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
 }
 .mc-btn-send:hover {
-  background: var(--orange);
+  background: linear-gradient(135deg, var(--orange), #f59e0b);
   color: #080412;
-  box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
+  box-shadow: 0 0 20px rgba(249, 115, 22, 0.45), 0 0 40px rgba(249, 115, 22, 0.15);
 }
 .mc-btn-send:active { transform: scale(0.96); }
 
 /* ── Buttons (generic) ──────────────────────────── */
 .btn-primary {
-  background: var(--border-glow) !important;
-  border-color: var(--border-glow) !important;
+  background: linear-gradient(135deg, var(--border-glow), #9333ea) !important;
+  border-color: transparent !important;
   color: var(--text-bright) !important;
   font-family: var(--font);
   font-weight: 600;
   letter-spacing: 0.06em;
-  transition: background 0.15s, box-shadow 0.2s, transform 0.1s;
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast), box-shadow var(--transition-med), transform 0.1s;
+  box-shadow: 0 0 10px rgba(124, 58, 237, 0.15);
 }
 .btn-primary:hover {
-  background: var(--purple) !important;
-  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
+  background: linear-gradient(135deg, var(--purple), #7c3aed) !important;
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 .btn-primary:active { transform: scale(0.97); }
 
 .btn-secondary {
-  background: rgba(59, 26, 92, 0.3) !important;
-  border-color: var(--border) !important;
+  background: rgba(59, 26, 92, 0.25) !important;
+  border-color: rgba(59, 26, 92, 0.5) !important;
   color: var(--text) !important;
   font-family: var(--font);
   font-weight: 600;
   letter-spacing: 0.06em;
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-med);
 }
 .btn-secondary:hover {
-  background: rgba(59, 26, 92, 0.5) !important;
+  background: rgba(59, 26, 92, 0.45) !important;
   border-color: var(--purple) !important;
+  box-shadow: 0 0 12px rgba(168, 85, 247, 0.12);
 }
 
 /* ── Grid utilities (used across pages) ────────── */
@@ -650,6 +798,14 @@ a:hover { color: var(--orange); }
   border-radius: var(--radius-md);
   padding: 16px;
   text-align: center;
+  box-shadow: var(--shadow-sm);
+  transition: border-color var(--transition-med), box-shadow var(--transition-med),
+              transform var(--transition-fast);
+}
+.stat:hover {
+  border-color: rgba(124, 58, 237, 0.28);
+  box-shadow: var(--shadow-md), var(--shadow-glow-purple);
+  transform: translateY(-1px);
 }
 .stat-value {
   font-size: 1.6rem;
@@ -657,6 +813,7 @@ a:hover { color: var(--orange); }
   color: var(--text-bright);
   font-family: var(--font);
   line-height: 1.2;
+  font-variant-numeric: tabular-nums;
 }
 .stat-label {
   font-size: 0.7rem;
@@ -713,15 +870,20 @@ a:hover { color: var(--orange); }
 /* ── Card enhancements (Bootstrap cards in theme) ── */
 .card {
   background: var(--glass-bg) !important;
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
+  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
   border: 1px solid var(--glass-border) !important;
   border-radius: var(--radius-md) !important;
   margin-bottom: 16px;
+  box-shadow: var(--shadow-md);
+  transition: border-color var(--transition-med), box-shadow var(--transition-med);
+}
+.card:hover {
+  border-color: rgba(124, 58, 237, 0.25) !important;
 }
 .card-header {
   background: rgba(24, 10, 45, 0.90) !important;
-  border-bottom: 1px solid var(--border) !important;
+  border-bottom: 1px solid rgba(59, 26, 92, 0.4) !important;
   padding: 14px 16px;
 }
 .card-title {
@@ -738,14 +900,22 @@ a:hover { color: var(--orange); }
 /* ── HTMX Loading ────────────────────────────────── */
 .htmx-indicator { display: none; }
 .htmx-request .htmx-indicator,
-.htmx-request.htmx-indicator { display: inline-block; color: var(--amber); animation: blink 0.8s infinite; }
-@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
+.htmx-request.htmx-indicator {
+  display: inline-block;
+  color: var(--amber);
+  animation: shimmerLoad 1.2s ease-in-out infinite;
+}
+@keyframes shimmerLoad {
+  0%   { opacity: 1; text-shadow: 0 0 4px rgba(255, 184, 0, 0.3); }
+  50%  { opacity: 0.3; text-shadow: 0 0 8px rgba(255, 184, 0, 0.6); }
+  100% { opacity: 1; text-shadow: 0 0 4px rgba(255, 184, 0, 0.3); }
+}
 
 /* ── Scrollbar ───────────────────────────────────── */
-::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-glow); }
+::-webkit-scrollbar-thumb { background: rgba(59, 26, 92, 0.6); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-glow); box-shadow: 0 0 4px rgba(124, 58, 237, 0.3); }
 
 /* ── Nav tabs (Bootstrap override) ───────────────── */
 .nav-tabs {