Update assets/site.css

assets/site.css

@@ -1,67 +1,125 @@
-/* assets/site.css */
+/* assets/site.css
+   SILENTPATTERN — shared site styles
+   Keep page-specific styling in Tailwind classes when possible.
+*/
+
 :root {
-  color-scheme: dark;
+  --bg: #000000;
+  --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);
+  --pink: rgba(236, 72, 153, 1);
+  --ring: rgba(99, 102, 241, 0.65);
+}
+
+html, body {
+  height: 100%;
 }
 
-body { font-family: 'Inter', sans-serif; }
+body {
+  background: var(--bg);
+  color: #ffffff;
+  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
 
-.gradient-text{
-  background: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
-  -webkit-background-clip:text;
-  background-clip:text;
-  color:transparent;
+/* Gradient text used in hero headings */
+.gradient-text {
+  background: linear-gradient(90deg, var(--indigo), var(--purple), var(--pink));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
-.aura{
+/* Subtle “lab aura” background treatment for panels/cards */
+.aura {
   background:
     radial-gradient(circle at 25% 15%, rgba(99,102,241,0.20), transparent 42%),
     radial-gradient(circle at 70% 70%, rgba(236,72,153,0.12), transparent 46%),
     radial-gradient(circle at 50% 45%, rgba(139,92,246,0.10), transparent 55%);
 }
 
-.conscious-element{ transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, opacity 0.28s ease; }
-.conscious-element:hover{ transform: translateY(-2px); }
+/* Lab surface grid */
+.lab-grid {
+  background-image:
+    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
+  background-size: 44px 44px;
+  background-position: center;
+}
 
-.focus-ring:focus{ outline:none; box-shadow:0 0 0 2px rgba(99,102,241,0.65); }
+/* Micro-interaction */
+.conscious-element {
+  transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, opacity 0.28s ease;
+}
+.conscious-element:hover {
+  transform: translateY(-2px);
+}
 
-.modal{ transition: opacity 0.3s ease, transform 0.3s ease; }
-.modal-hidden{ opacity:0; transform: translateY(20px); pointer-events:none; }
-.modal-visible{ opacity:1; transform: translateY(0); }
+/* Accessible focus ring */
+.focus-ring:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring);
+}
 
-.thin-scroll{
+/* Modal animation helpers */
+.modal {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.modal-hidden {
+  opacity: 0;
+  transform: translateY(20px);
+  pointer-events: none;
+}
+.modal-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Thin scrollbars (Firefox + WebKit) */
+.thin-scroll {
   scrollbar-width: thin;
   scrollbar-color: #4f46e5 #1e1b4b;
 }
-.thin-scroll::-webkit-scrollbar{ width:6px; }
-.thin-scroll::-webkit-scrollbar-track{ background:#1e1b4b; }
-.thin-scroll::-webkit-scrollbar-thumb{ background-color:#4f46e5; border-radius:3px; }
-
-.lab-grid{
-  background-image:
-    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
-  background-size:44px 44px;
-  background-position:center;
+.thin-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.thin-scroll::-webkit-scrollbar-track {
+  background: #1e1b4b;
+}
+.thin-scroll::-webkit-scrollbar-thumb {
+  background-color: #4f46e5;
+  border-radius: 3px;
 }
 
-/* Chat typing indicator: robust (no animating `content`) */
-.typing-dots{ display:inline-flex; gap:4px; align-items:center; }
-.typing-dots span{
-  width:4px; height:4px; border-radius:999px;
-  background: currentColor;
-  opacity:0.35;
-  animation: sp-dot 1.2s infinite;
-}
-.typing-dots span:nth-child(2){ animation-delay: 0.2s; }
-.typing-dots span:nth-child(3){ animation-delay: 0.4s; }
-@keyframes sp-dot{
-  0%, 100%{ opacity:0.25; transform: translateY(0); }
-  50%{ opacity:1; transform: translateY(-2px); }
+/* Chat container standard height */
+.chat-container {
+  height: 520px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #4f46e5 #1e1b4b;
+}
+.chat-container::-webkit-scrollbar {
+  width: 6px;
+}
+.chat-container::-webkit-scrollbar-track {
+  background: #1e1b4b;
+}
+.chat-container::-webkit-scrollbar-thumb {
+  background-color: #4f46e5;
+  border-radius: 3px;
 }
 
-/* Respect reduced motion */
-@media (prefers-reduced-motion: reduce){
-  .conscious-element{ transition:none; }
-  .modal{ transition:none; }
-  .typing-dots span{ animation:none; }
+/* Typing indicator used in chat.html */
+.typing-indicator::after {
+  content: "...";
+  animation: typing 1.5s infinite;
+  display: inline-block;
+  width: 20px;
+  text-align: left;
+}
+@keyframes typing {
+  0% { content: "."; }
+  33% { content: ".."; }
+  66% { content: "..."; }
 }