Spaces:

MHamdan
/

auralynq-rag

Paused

File size: 17,680 Bytes

8c1b9fe

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===========================================================================
   AURALYNQ DESIGN TOKENS
   Three themes switched via [data-theme] on <html>. Every surface, text and
   status color is a CSS variable (R G B triplet) so Tailwind tokens —
   bg-ink/panel/panel2, border-edge/edge2, text-fg/fg2/fg3, text-ok/warn/bad —
   re-theme automatically. No component hardcodes a hex value.
   Identity: local-first · voice-native · evidence-grounded · observable RAG.
   ========================================================================= */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces — deep, saturated base so gradients read rich (not washed out) */
  --c-ink: 7 11 22; /* #070b16 base */
  --c-ink-2: 12 18 33; /* #0c1221 section band */
  --c-panel: 19 27 47; /* #131b2f raised card */
  --c-panel-2: 28 38 65; /* #1c2641 inset */
  --c-edge: 44 57 88; /* hairline border */
  --c-edge-strong: 64 82 122; /* emphasized border */
  --c-muted: 203 213 225;
  /* text scale (contrast-checked on --c-panel) */
  --c-text: 241 245 249; /* slate-100 */
  --c-text-2: 203 213 225; /* slate-300 */
  --c-text-3: 148 163 184; /* slate-400 */
  /* semantic status dots/bars */
  --c-ok: 52 211 153;
  --c-warn: 251 191 36;
  --c-bad: 251 113 133;
  --c-info: 129 140 248;
  /* status text variants (readable on this theme's surfaces) */
  --ok-fg: 110 231 183;
  --warn-fg: 252 211 77;
  --bad-fg: 253 164 175;
  /* misc */
  --text: #f1f5f9;
  --brand-fg: #5eead4;
  --ring: #5eead4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 50px -16px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 12px 40px -12px rgba(94, 234, 212, 0.35);
  --body-glow-a: rgba(129, 140, 248, 0.18);
  --body-glow-b: rgba(94, 234, 212, 0.12);
  --grid-line: rgba(129, 140, 248, 0.07);
}

[data-theme="light"] {
  color-scheme: light;
  /* crisp white cards on a soft cool-grey canvas with real separation */
  --c-ink: 236 240 247; /* #ecf0f7 canvas */
  --c-ink-2: 243 246 251;
  --c-panel: 255 255 255;
  --c-panel-2: 244 247 251;
  --c-edge: 203 213 228; /* #cbd5e4 visible hairline */
  --c-edge-strong: 176 189 211;
  --c-muted: 71 85 105;
  --c-text: 11 18 32; /* near-black */
  --c-text-2: 51 65 85; /* slate-700 */
  --c-text-3: 71 85 105; /* slate-600 */
  --c-ok: 16 185 129;
  --c-warn: 217 119 6;
  --c-bad: 225 29 72;
  --c-info: 79 70 229;
  --ok-fg: 4 120 87;
  --warn-fg: 180 83 9;
  --bad-fg: 190 18 60;
  --text: #0b1220;
  --brand-fg: #0d9488;
  --ring: #0d9488;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 18px 48px -18px rgba(15, 23, 42, 0.22);
  --shadow-glow: 0 12px 40px -14px rgba(13, 148, 136, 0.28);
  --body-glow-a: rgba(99, 102, 241, 0.1);
  --body-glow-b: rgba(13, 148, 136, 0.08);
  --grid-line: rgba(71, 85, 105, 0.08);
}

[data-theme="comfort"] {
  color-scheme: light;
  /* warm paper, larger type, low glare, high-contrast warm ink */
  --c-ink: 241 232 217; /* #f1e8d9 warm canvas */
  --c-ink-2: 247 240 228;
  --c-panel: 252 247 238; /* warm card */
  --c-panel-2: 245 237 223;
  --c-edge: 205 191 162; /* visible warm hairline */
  --c-edge-strong: 181 165 132;
  --c-muted: 60 54 44;
  --c-text: 28 24 20; /* #1c1814 */
  --c-text-2: 58 51 40;
  --c-text-3: 90 79 62;
  --c-ok: 21 128 61;
  --c-warn: 180 83 9;
  --c-bad: 190 18 60;
  --c-info: 67 56 202;
  --ok-fg: 21 110 53;
  --warn-fg: 154 70 8;
  --bad-fg: 159 18 57;
  --text: #1c1814;
  --brand-fg: #0b7a6f;
  --ring: #0b7a6f;
  --shadow-sm: 0 1px 2px rgba(80, 60, 30, 0.1);
  --shadow-md: 0 8px 22px -12px rgba(80, 60, 30, 0.2);
  --shadow-lg: 0 18px 46px -18px rgba(80, 60, 30, 0.24);
  --shadow-glow: 0 12px 40px -14px rgba(11, 122, 111, 0.25);
  --body-glow-a: rgba(180, 120, 40, 0.08);
  --body-glow-b: rgba(11, 122, 111, 0.06);
  --grid-line: rgba(120, 90, 40, 0.07);
  font-size: 17px; /* roomier base for long reading sessions */
}

/* ===================================================== typography & density =
   CSS variables for font scale, density, and layout widths.
   Controlled by SettingsPanel — persisted in localStorage and applied via JS.
   Defaults are set here; overridden via document.documentElement.style.setProperty.
   ========================================================================= */
:root {
  /* typography scale — multiplied into base font-size */
  --font-scale: 1.1;
  /* spacing/density multiplier — applied to padding/gap tokens */
  --density-scale: 1;
  /* layout widths */
  --chat-max-width: min(900px, 90vw);
  --inspector-width: clamp(360px, 30vw, 560px);
  --trace-rail-width: 240px;
  --composer-height: auto;
}

html {
  font-size: calc(15px * var(--font-scale, 1));
}

/* ===================================================== responsive breakpoints =
   CSS variables for Bootstrap-style breakpoint awareness.
   Use via calc() or media queries in custom CSS.
   ========================================================================= */
:root {
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
}

::selection {
  background: rgba(129, 140, 248, 0.3);
}
html {
  scroll-behavior: smooth;
  line-height: 1.6;
}

body {
  @apply bg-ink text-fg;
  background-image: radial-gradient(60rem 60rem at 80% -10%, var(--body-glow-a), transparent),
    radial-gradient(50rem 50rem at -10% 10%, var(--body-glow-b), transparent);
}

/* ---- per-theme remap of the slate text scale (legacy components) ---------
   New components use token classes (text-fg/fg2/fg3); this keeps any remaining
   slate-* usage contrast-correct across light/comfort. */
[data-theme="light"] .text-slate-100,
[data-theme="comfort"] .text-slate-100 {
  color: rgb(var(--c-text));
}
[data-theme="light"] .text-slate-200,
[data-theme="comfort"] .text-slate-200 {
  color: rgb(var(--c-text));
}
[data-theme="light"] .text-slate-300,
[data-theme="comfort"] .text-slate-300 {
  color: rgb(var(--c-text-2));
}
[data-theme="light"] .text-slate-400,
[data-theme="comfort"] .text-slate-400 {
  color: rgb(var(--c-text-3));
}
[data-theme="light"] .text-slate-500,
[data-theme="comfort"] .text-slate-500 {
  color: rgb(var(--c-text-3));
}
/* brand-colored text darkens on light surfaces to stay readable */
[data-theme="light"] .text-brand,
[data-theme="comfort"] .text-brand {
  color: var(--brand-fg);
}
/* indigo brand2 text is too light on white — darken it on light/comfort */
[data-theme="light"] .text-brand2,
[data-theme="comfort"] .text-brand2 {
  color: #4f46e5;
}
[data-theme="light"] .text-accent,
[data-theme="comfort"] .text-accent {
  color: #7c3aed;
}

/* ===================================================== focus & a11y ====== */
.focusable {
  @apply outline-none;
}
.focusable:focus-visible,
button:focus-visible,
a:focus-visible,
[role="radio"]:focus-visible,
summary:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--c-ink)), 0 0 0 4px var(--ring);
  border-radius: 0.5rem;
}

/* ===================================================== surfaces ========== */
.card {
  @apply rounded-2xl border border-edge bg-panel p-4;
  box-shadow: var(--shadow-md);
}
.card-inset {
  @apply rounded-xl border border-edge bg-panel2 p-3;
}
.card-hover {
  @apply transition duration-200;
}
.card-hover:hover {
  @apply border-edge2;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* glassmorphic surface — token-aware so it works in every theme (hero/marketing) */
.glass {
  @apply rounded-2xl border border-edge bg-panel/70 backdrop-blur-xl;
  box-shadow: var(--shadow-lg);
}
.glass-hover {
  @apply transition duration-300;
}
.glass-hover:hover {
  @apply border-edge2 bg-panel/90;
  transform: translateY(-2px);
}

/* ===================================================== typography ======== */
.gradient-text {
  @apply bg-clip-text text-transparent;
  background-image: linear-gradient(100deg, #5eead4 0%, #818cf8 45%, #c084fc 80%);
}
.overline {
  @apply text-overline font-semibold uppercase text-brand;
}
.section-title {
  @apply text-3xl font-bold tracking-tight sm:text-4xl;
  color: rgb(var(--c-text));
}

/* faint grid + vignette backdrop for the marketing hero */
.grid-bg {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(60% 50% at 50% 0%, #000 30%, transparent 100%);
}

/* ambient blurred color orbs */
.orb {
  @apply pointer-events-none absolute rounded-full blur-[90px];
}

/* ===================================================== chips / pills ===== */
.chip {
  @apply inline-flex items-center gap-2 rounded-full border border-edge bg-panel2 px-3 py-1 text-xs font-medium;
  color: rgb(var(--c-text-2));
}
.tag {
  @apply inline-flex items-center gap-1 rounded-full border border-edge bg-panel2/60 px-2 py-0.5 text-xs;
  color: rgb(var(--c-text-2));
}
/* status pill: dot + label, semantic color */
.pill {
  @apply inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold;
}
.pill-ok {
  color: rgb(var(--ok-fg));
  border-color: rgb(var(--c-ok) / 0.4);
  background: rgb(var(--c-ok) / 0.1);
}
.pill-warn {
  color: rgb(var(--warn-fg));
  border-color: rgb(var(--c-warn) / 0.4);
  background: rgb(var(--c-warn) / 0.1);
}
.pill-bad {
  color: rgb(var(--bad-fg));
  border-color: rgb(var(--c-bad) / 0.4);
  background: rgb(var(--c-bad) / 0.1);
}
.pill-neutral {
  color: rgb(var(--c-text-3));
  border-color: rgb(var(--c-edge));
  background: rgb(var(--c-panel-2));
}

/* ===================================================== buttons =========== */
.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 font-medium transition disabled:cursor-not-allowed disabled:opacity-40;
}
/* primary gradient CTA */
.btn-cta {
  @apply btn px-5 py-2.5 font-semibold;
  color: #06231e;
  background-image: linear-gradient(100deg, #5eead4, #818cf8);
  box-shadow: 0 10px 30px -10px rgba(129, 140, 248, 0.6);
}
.btn-cta:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.btn-outline {
  @apply btn px-5 py-2.5 font-semibold;
  color: rgb(var(--c-text));
  border: 1px solid rgb(var(--c-edge-strong));
}
.btn-outline:hover {
  background: rgb(var(--c-panel-2));
  border-color: rgb(var(--c-text-3));
}
.btn-brand {
  @apply btn bg-brand font-semibold hover:brightness-110;
  color: #06231e; /* fixed dark ink — readable on teal in every theme */
}
.btn-ghost {
  @apply btn border border-edge;
  color: rgb(var(--c-text));
}
.btn-ghost:hover {
  background: rgb(var(--c-panel-2));
  border-color: rgb(var(--c-edge-strong));
}

/* ===================================================== tabs ============== */
.tab {
  @apply inline-flex items-center gap-1.5 rounded-lg border border-transparent px-3 py-1.5 text-sm font-medium transition;
  color: rgb(var(--c-text-3));
}
.tab:hover {
  color: rgb(var(--c-text));
  background: rgb(var(--c-panel-2));
}
.tab-active {
  color: rgb(var(--c-text));
  background: rgb(var(--c-panel-2));
  border-color: rgb(var(--c-edge));
  box-shadow: var(--shadow-sm);
}

/* ===================================================== stats ============= */
.stat {
  @apply rounded-xl border border-edge bg-panel2 px-3 py-2;
}
.stat-label {
  @apply text-[10px] font-medium uppercase tracking-wider;
  color: rgb(var(--c-text-3));
}
.stat-value {
  @apply text-sm font-semibold;
  color: rgb(var(--c-text));
}

/* ===================================================== evidence cards ==== */
.evidence-card {
  @apply rounded-xl border bg-panel2 p-3 transition;
  border-color: rgb(var(--c-edge));
}
.evidence-strong {
  border-color: rgb(var(--c-ok) / 0.45);
  background: rgb(var(--c-ok) / 0.06);
}
.evidence-weak {
  border-color: rgb(var(--c-warn) / 0.4);
  background: rgb(var(--c-warn) / 0.06);
}
.evidence-none {
  border-color: rgb(var(--c-bad) / 0.4);
  background: rgb(var(--c-bad) / 0.06);
}

/* ===================================================== misc ============== */
.reveal {
  animation: fade-up 0.7s ease-out both;
}
.scroll-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scroll-thin::-webkit-scrollbar-thumb {
  @apply rounded-full;
  background: rgb(var(--c-edge-strong));
}
.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--c-edge-strong)) transparent;
}

/* ---- streaming "typing" indicator ---- */
.typing-dot {
  @apply inline-block h-2 w-2 rounded-full bg-brand/70;
  animation: typing-bounce 1.1s infinite ease-in-out;
}
@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ---- new-message fade-in ---- */
.msg-in {
  animation: msg-in 0.22s ease-out both;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================== answer prose ======= */
/* Wrapper for assistant answer text — slightly larger, full-color, generous
   line-height so citations [n] read cleanly inline. */
.prose-answer {
  color: rgb(var(--c-text));
  font-size: 0.9375rem; /* 15px */
  line-height: 1.7;
}
.prose-answer > :first-child { margin-top: 0; }
.prose-answer > :last-child  { margin-bottom: 0; }
.prose-answer p { margin: 0.45em 0; }
/* Inline citation markers [n] rendered via Markdown get a teal tint */
.prose-answer sup,
.prose-answer [data-citation] {
  color: rgb(var(--c-ok));
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ===================================================== markdown ========== */
.prose-auralynq {
  @apply text-[0.95rem] leading-relaxed;
  color: rgb(var(--c-text-2));
}
.prose-auralynq > :first-child {
  margin-top: 0;
}
.prose-auralynq > :last-child {
  margin-bottom: 0;
}
.prose-auralynq p {
  @apply my-2;
}
.prose-auralynq h1,
.prose-auralynq h2,
.prose-auralynq h3 {
  @apply mb-2 mt-4 font-semibold;
  color: rgb(var(--c-text));
}
.prose-auralynq h1 {
  @apply text-lg;
}
.prose-auralynq h2 {
  @apply text-base;
}
.prose-auralynq ul {
  @apply my-2 list-disc space-y-1 pl-5;
}
.prose-auralynq ol {
  @apply my-2 list-decimal space-y-1 pl-5;
}
.prose-auralynq a {
  @apply text-brand underline decoration-brand/40 underline-offset-2 hover:decoration-brand;
}
.prose-auralynq blockquote {
  @apply my-2 border-l-2 border-edge pl-3;
  color: rgb(var(--c-text-3));
}
.prose-auralynq code:not(pre code) {
  @apply rounded bg-ink/80 px-1.5 py-0.5 font-mono text-[0.85em] text-brand;
}
.prose-auralynq pre {
  @apply my-3 overflow-x-auto rounded-xl border border-edge p-3 text-[0.85rem];
  background: #0d1117;
}
.prose-auralynq table {
  @apply my-3 w-full border-collapse text-sm;
}
.prose-auralynq th,
.prose-auralynq td {
  @apply border border-edge px-2 py-1 text-left;
}
.prose-auralynq th {
  @apply bg-panel2;
}

/* ===================================================== responsive utilities =
   Lightweight Bootstrap-style layout helpers.
   ========================================================================= */

/* Full-width containers */
.container-fluid {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Page-width container (max-width with auto centering) */
.container-page {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1440px;
}
@media (min-width: 768px) {
  .container-page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Responsive surface card */
.surface-card {
  @apply rounded-2xl border border-edge bg-panel;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow-md);
}

/* Status pills */
.status-pill {
  @apply inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold;
}

/* Show/hide at breakpoints */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* Stack children vertically on mobile */
@media (max-width: 767px) {
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Responsive 2-column grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive 3-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsive app shell — main content uses full viewport */
.responsive-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Landing section spacing */
.section-pad {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Inspector panel — always rendered, width adapts to viewport */
.inspector-panel {
  width: clamp(300px, 28vw, 520px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}