Update assets/site.css

assets/site.css

@@ -5,7 +5,7 @@
 
 :root {
   --bg: #000000;
-  --panel: rgba(17, 24, 39, 0.35); /* gray-900-ish with alpha */
+  --panel: rgba(17, 24, 39, 0.35);  /* gray-900-ish with alpha */
   --border: rgba(31, 41, 55, 0.85); /* gray-800-ish */
   --indigo: rgba(99, 102, 241, 1);
   --purple: rgba(139, 92, 246, 1);
@@ -13,14 +13,24 @@
   --ring: rgba(99, 102, 241, 0.65);
 }
 
+/* Small reset to prevent layout weirdness across pages */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html, body {
   height: 100%;
 }
 
 body {
+  min-height: 100vh;
   background: var(--bg);
   color: #ffffff;
   font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Gradient text used in hero headings */
@@ -56,15 +66,25 @@ body {
   transform: translateY(-2px);
 }
 
-/* Accessible focus ring */
+/* Accessible focus ring (prefer focus-visible when available) */
 .focus-ring:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--ring);
 }
+@supports selector(:focus-visible) {
+  .focus-ring:focus {
+    box-shadow: none;
+  }
+  .focus-ring:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring);
+  }
+}
 
 /* Modal animation helpers */
 .modal {
   transition: opacity 0.3s ease, transform 0.3s ease;
+  will-change: opacity, transform;
 }
 .modal-hidden {
   opacity: 0;
@@ -110,16 +130,32 @@ body {
   border-radius: 3px;
 }
 
-/* Typing indicator used in chat.html */
+/* Typing indicator used in chat.html
+   Avoid animating `content:` (unreliable). Animate width instead. */
 .typing-indicator::after {
   content: "...";
-  animation: typing 1.5s infinite;
   display: inline-block;
-  width: 20px;
-  text-align: left;
+  overflow: hidden;
+  vertical-align: bottom;
+  width: 0ch;
+  animation: typingDots 1.2s steps(3, end) infinite;
 }
-@keyframes typing {
-  0% { content: "."; }
-  33% { content: ".."; }
-  66% { content: "..."; }
+
+@keyframes typingDots {
+  0%   { width: 0ch; }
+  33%  { width: 1ch; }
+  66%  { width: 2ch; }
+  100% { width: 3ch; }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .conscious-element,
+  .modal {
+    transition: none !important;
+  }
+  .typing-indicator::after {
+    animation: none !important;
+    width: 3ch;
+  }
 }