Add animated gradient background with floating particles

Implement dynamic background that fills entire viewport:
- Animated gradient that smoothly shifts colors every 15s
- Floating radial gradients (particles) that animate independently
- Multiple animation layers with different timings (20s, 25s)
- Content properly layered above background (z-index handling)
- Smooth, continuous animations that don't loop jarringly

Changes:
- App.vue: Full-screen animated background with pseudo-elements
- CollaborativeInput.vue: Same animated effect
- CollaborativeSession.vue: Full viewport background
- All components now use 100% available space
- Subtle visual interest without distracting from content

Result: Modern, premium feel with movement depth

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.vue

@@ -54,20 +54,132 @@ function startNewCollaboration() {
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background-color: #f5f7fa;
   color: #2c3e50;
 }
 
 #app {
   min-height: 100vh;
 }
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(100px, -100px) rotate(90deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(-50px, 150px) rotate(180deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, -50px) rotate(270deg);
+    opacity: 0.04;
+  }
+}
+
+@keyframes float2 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.04;
+  }
+  25% {
+    transform: translate(-120px, 80px) rotate(-90deg);
+    opacity: 0.06;
+  }
+  50% {
+    transform: translate(80px, -120px) rotate(-180deg);
+    opacity: 0.04;
+  }
+  75% {
+    transform: translate(120px, 100px) rotate(-270deg);
+    opacity: 0.05;
+  }
+}
+
+@keyframes float3 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(-80px, -80px) rotate(45deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(100px, 100px) rotate(135deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, 80px) rotate(225deg);
+    opacity: 0.04;
+  }
+}
 </style>
 
 <style scoped>
 .app {
   min-height: 100vh;
   padding: 2rem;
-  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  background: linear-gradient(
+    -45deg,
+    #0f0c29 0%,
+    #302b63 25%,
+    #24243e 50%,
+    #302b63 75%,
+    #0f0c29 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.app::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
+  animation: float1 20s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.app::after {
+  content: '';
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(102, 126, 234, 0.12) 0%, transparent 70%);
+  animation: float2 25s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+  border-radius: 50%;
+}
+
+.app > * {
+  position: relative;
+  z-index: 1;
 }
 
 .new-session-btn {

frontend/src/components/CollaborativeInput.vue

@@ -192,7 +192,16 @@ const removeFile = () => {
 .collaborative-input {
   min-height: 100vh;
   padding: 2rem;
-  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  background: linear-gradient(
+    -45deg,
+    #0f0c29 0%,
+    #302b63 25%,
+    #24243e 50%,
+    #302b63 75%,
+    #0f0c29 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
   position: relative;
   overflow: hidden;
 }
@@ -200,20 +209,53 @@ const removeFile = () => {
 .collaborative-input::before {
   content: '';
   position: fixed;
-  top: -50%;
+  top: 0;
-  right: -50%;
+  left: 0;
   width: 200%;
   height: 200%;
-  background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
+  animation: float1 20s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
 }
 
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(100px, -100px) rotate(90deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(-50px, 150px) rotate(180deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, -50px) rotate(270deg);
+    opacity: 0.04;
+  }
+}
+
 .container {
   max-width: 900px;
   margin: 0 auto;
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 .header {

frontend/src/components/CollaborativeSession.vue

@@ -229,10 +229,73 @@ function formatAgentName(agent) {
 </script>
 
 <style scoped>
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(100px, -100px) rotate(90deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(-50px, 150px) rotate(180deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, -50px) rotate(270deg);
+    opacity: 0.04;
+  }
+}
+
 .collaborative-session {
-  max-width: 1400px;
+  max-width: 100%;
-  margin: 0 auto;
+  margin: 0;
   padding: 2rem;
+  min-height: 100vh;
+  background: linear-gradient(
+    -45deg,
+    #0f0c29 0%,
+    #302b63 25%,
+    #24243e 50%,
+    #302b63 75%,
+    #0f0c29 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.collaborative-session::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
+  animation: float1 20s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.collaborative-session > * {
+  position: relative;
+  z-index: 1;
 }
 
 .session-header {