AI Chat page looks better. Caitlin is my witness

2026-07-12 12:07:06 +02:00 · 2026-06-29 14:51:59 +02:00
parent 39fb39db12
commit f6d1d91fc6
10 changed files with 469 additions and 223 deletions
@@ -0,0 +1,61 @@
+/* ============================================================================
+   AI Assistant Page — Animations & Keyframes
+   ============================================================================ */
+
+/* Robot walking animation (boot state) */
+@keyframes walk {
+  0%, 100% { transform: translateX(0) translateY(0); }
+  25% { transform: translateX(12px) translateY(-4px); }
+  50% { transform: translateX(24px) translateY(0); }
+  75% { transform: translateX(12px) translateY(-4px); }
+}
+
+@keyframes legLeft {
+  0%, 100% { transform: rotate(-10deg); }
+  50% { transform: rotate(10deg); }
+}
+
+@keyframes legRight {
+  0%, 100% { transform: rotate(10deg); }
+  50% { transform: rotate(-10deg); }
+}
+
+@keyframes armLeft {
+  0%, 100% { transform: rotate(15deg); }
+  50% { transform: rotate(-15deg); }
+}
+
+@keyframes armRight {
+  0%, 100% { transform: rotate(-15deg); }
+  50% { transform: rotate(15deg); }
+}
+
+@keyframes blink {
+  0%, 45%, 55%, 100% { height: 4px; }
+  50% { height: 1px; }
+}
+
+.robot-walk { animation: walk 0.6s ease-in-out infinite; }
+.robot-leg-l { transform-origin: top center; animation: legLeft 0.3s ease-in-out infinite; }
+.robot-leg-r { transform-origin: top center; animation: legRight 0.3s ease-in-out infinite; }
+.robot-arm-l { transform-origin: top center; animation: armLeft 0.3s ease-in-out infinite; }
+.robot-arm-r { transform-origin: top center; animation: armRight 0.3s ease-in-out infinite; }
+.robot-eye { animation: blink 2s ease-in-out infinite; }
+
+/* Welcome screen float-in animation */
+@keyframes float-in {
+  0% { opacity: 0; transform: translateY(12px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.float-in { animation: float-in 0.4s ease-out both; }
+
+/* Typing indicator bouncing dots */
+@keyframes bounce-dot {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+
+.dot-1 { animation: bounce-dot 1.2s infinite 0ms; }
+.dot-2 { animation: bounce-dot 1.2s infinite 150ms; }
+.dot-3 { animation: bounce-dot 1.2s infinite 300ms; }