assets/site.css

/* assets/site.css
   SILENTPATTERN — shared site styles
   Keep page-specific styling in Tailwind classes when possible.
*/

:root {
  --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);
}

/* 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 */
.gradient-text {
  background: linear-gradient(90deg, var(--indigo), var(--purple), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 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%);
}

/* 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;
}

/* 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);
}

/* 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;
  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;
}

/* 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;
}

/* Typing indicator used in chat.html
   Avoid animating `content:` (unreliable). Animate width instead. */
.typing-indicator::after {
  content: "...";
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0ch;
  animation: typingDots 1.2s steps(3, end) infinite;
}

@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;
  }
}