:root {
  --bg: #0f1420;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Newsreader', Georgia, serif;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(99, 102, 241, 0.12), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(251, 191, 36, 0.08), transparent 45%);
  background-attachment: fixed;
}

.bg-bg { background-color: transparent; }

/* Wordmark & headings */
.wordmark { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.article-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.article-body { font-family: 'Newsreader', Georgia, serif; font-size: 1.075rem; }
.article-body ::selection { background: rgba(251, 191, 36, 0.35); }

/* UI text uses sans */
header, button, select, input, .chip { font-family: 'Bricolage Grotesque', sans-serif; }

/* Chips */
.chip {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e2e8f0;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip:hover { background: rgba(251, 191, 36, 0.22); transform: translateY(-1px); }
.chip-ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
.chip-ghost:hover { background: rgba(255,255,255,0.09); }

/* Typing dots */
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fbbf24;
  display: inline-block;
  animation: bounce 1s infinite ease-in-out;
}
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* Fade in for messages */
.fade-in { animation: fadeIn 0.35s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Explain tooltip pop */
.explain-tooltip { animation: pop 0.18s ease both; }
@keyframes pop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Float */
.float-slow { animation: float 4s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Scrollbars */
.article-scroll, .chat-scroll { scrollbar-width: thin; scrollbar-color: rgba(251,191,36,0.3) transparent; }
.article-scroll::-webkit-scrollbar, .chat-scroll::-webkit-scrollbar { width: 8px; }
.article-scroll::-webkit-scrollbar-thumb, .chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(251,191,36,0.25); border-radius: 999px;
}
.article-scroll::-webkit-scrollbar-track, .chat-scroll::-webkit-scrollbar-track { background: transparent; }

/* Mobile heights */
@media (max-width: 767px) {
  .article-scroll { max-height: none; }
}