/* aether-ui.css — shared base styles + component classes for the Aether design system.
 * Pairs with aether-theme.js. Include on every page:
 *   <link rel="stylesheet" href="/aether-ui.css">
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  --primary: #0f5238;
  --primary-container: #2d6a4f;
  --on-primary: #ffffff;
  --background: #f8faf5;
  --surface-lowest: #ffffff;
  --surface-low: #f3f4ef;
  --surface: #edeee9;
  --surface-high: #e7e9e3;
  --on-bg: #191c19;
  --on-variant: #404943;
  --outline: #707973;
  --outline-variant: #bfc9c1;
  --error: #ba1a1a;
  --accent: #8a5a00;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--on-bg);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chrome (labels, headers, telemetry) use the mono face */
.font-mono, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* ── Focus visibility (a11y) ─────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 82, 56, .30);
  border-radius: 4px;
}

/* ── Subtle scrollbars ───────────────────────────────────────────────────── */
.aether-scroll::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.aether-scroll::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.aether-scroll::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.aether-scroll::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--outline); }
.aether-scroll { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.aether-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--primary); color: var(--on-primary);
  border: 1px solid transparent; border-radius: 6px;
  padding: 0 1.25rem; height: 44px; cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.aether-btn:hover { background: var(--primary-container); box-shadow: 0 2px 8px rgba(15,82,56,.22); }
.aether-btn:active { transform: translateY(1px); }
.aether-btn:disabled { background: var(--surface-high); color: var(--outline); cursor: not-allowed; box-shadow: none; transform: none; }

.aether-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--on-variant);
  border: 1px solid var(--outline-variant); border-radius: 6px;
  padding: 0 1rem; height: 40px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.aether-btn-outline:hover { background: var(--surface-high); border-color: var(--outline); color: var(--on-bg); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.aether-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(25,28,25,.05), 0 2px 6px rgba(25,28,25,.05);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.aether-card-interactive { cursor: pointer; }
.aether-card-interactive:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(25,28,25,.08), 0 8px 20px rgba(25,28,25,.10);
  transform: translateY(-2px);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.aether-input {
  width: 100%;
  font-family: 'Inter', sans-serif; font-size: 14px;
  background: var(--surface-lowest); color: var(--on-bg);
  border: 1px solid var(--outline-variant); border-radius: 6px;
  padding: .625rem .75rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.aether-input::placeholder { color: var(--outline); }
.aether-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,82,56,.18); }

/* ── Chip / label badge ──────────────────────────────────────────────────── */
.aether-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--primary); border: 1px solid var(--primary);
  border-radius: 9999px; padding: .15rem .6rem;
}

/* ── Chat bubbles ────────────────────────────────────────────────────────── */
.chat-row { display: flex; flex-direction: column; gap: .25rem; animation: fade-in .25s ease both; }
.chat-meta {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--outline);
}
.chat-bubble {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5;
  padding: .625rem .8rem; border-radius: 10px; max-width: 92%;
  white-space: pre-wrap; word-break: break-word;
}
.chat-bubble-user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 3px; }
.chat-row-user { align-items: flex-end; }
.chat-bubble-bot { align-self: flex-start; background: var(--surface-high); color: var(--on-bg); border-bottom-left-radius: 3px; }

/* typing indicator */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: .6rem .8rem; }
.typing-dots > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--outline); animation: typing 1.2s ease-in-out infinite; }
.typing-dots > span:nth-child(2) { animation-delay: .15s; }
.typing-dots > span:nth-child(3) { animation-delay: .30s; }

/* ── Keyframes (also exposed via tailwind, duplicated for non-tw pages) ───── */
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-ring { 0% { transform: scale(.85); opacity: .55; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-high) 50%, var(--surface) 75%);
  background-size: 800px 100%; animation: shimmer 1.4s linear infinite;
}

.animate-fade-in { animation: fade-in .25s ease both; }