/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font:        'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --near-black:  #0A0A0A;
  --text-body:   rgba(0, 0, 0, 0.85);
  --text-muted:  rgba(0, 0, 0, 0.26);
  --text-meta:   rgba(0, 0, 0, 0.28);
  --pill-radius: 48px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #FFFFFF;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────
   GRADIENT CANVAS
   
   Architecture: 4 independent radial-gradient
   blobs, each blurred 110px. They live at the
   bottom of the viewport and "rise" into the
   white canvas above via diffusion. The parent
   clips them; the white background above is
   what creates the Apple Card fade-to-white.
───────────────────────────────────────── */
.gc {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ENTRANCE BLOOM STATES */
.gc.bloom-ready {
  opacity: 0;
  transform: translateY(5vh) scale(0.92);
}

.gc.bloom-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 2s ease-out, transform 2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .gc.bloom-active {
    transition: opacity 2s linear;
    transform: none;
  }
  .gc.bloom-ready {
    transform: none;
  }
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* ── Blob 1: Lavender — bottom-left anchor */
.blob-lav {
  width:  58vw;
  height: 74vh;
  left:   -10%;
  bottom: -18%;
  background: radial-gradient(
    circle at center,
    rgba(178, 140, 252, 1) 0%,
    transparent 65%
  );
  opacity: 0.82;
  filter: blur(110px);
  animation: drift-lav 24s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── Blob 2: Amber — bottom-right anchor */
.blob-amb {
  width:  58vw;
  height: 74vh;
  right:  -10%;
  bottom: -18%;
  background: radial-gradient(
    circle at center,
    rgba(247, 198, 92, 1) 0%,
    transparent 65%
  );
  opacity: 0.88;
  filter: blur(110px);
  animation: drift-amb 19s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── Blob 3: Rose — bottom-center */
.blob-rose {
  width:  54vw;
  height: 64vh;
  left:   23%;
  bottom: -22%;
  background: radial-gradient(
    circle at center,
    rgba(255, 148, 128, 1) 0%,
    transparent 65%
  );
  opacity: 0.66;
  filter: blur(110px);
  animation: drift-rose 28s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── Blob 4: Ghost lavender — upper-left whisper */
.blob-ghost {
  width:  38vw;
  height: 44vh;
  left:  -12%;
  top:    -5%;
  background: radial-gradient(
    circle at center,
    rgba(200, 178, 255, 1) 0%,
    transparent 65%
  );
  opacity: 0.22;
  filter: blur(100px);
  animation: drift-ghost 22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── BLOB DRIFT KEYFRAMES
   Each blob moves on its own staggered path,
   so the pattern never visibly repeats itself. */
@keyframes drift-lav {
  0%   { transform: translate(0px,   0px)  scale(1.00); }
  33%  { transform: translate(-22px, -14px) scale(1.06); }
  66%  { transform: translate( 9px,  -7px)  scale(1.03); }
  100% { transform: translate(0px,   0px)  scale(1.00); }
}
@keyframes drift-amb {
  0%   { transform: translate(0px,  0px)  scale(1.00); }
  40%  { transform: translate(20px, -9px)  scale(1.05); }
  70%  { transform: translate(-7px, -5px)  scale(1.02); }
  100% { transform: translate(0px,  0px)  scale(1.00); }
}
@keyframes drift-rose {
  0%   { transform: translate(0px,   0px)  scale(1.00); }
  30%  { transform: translate(-13px, 16px) scale(1.08); }
  65%  { transform: translate( 14px,  7px) scale(1.04); }
  100% { transform: translate(0px,   0px)  scale(1.00); }
}
@keyframes drift-ghost {
  0%   { transform: translate(0px,  0px) scale(1.00); }
  50%  { transform: translate(14px, 9px) scale(1.06); }
  100% { transform: translate(0px,  0px) scale(1.00); }
}

/* No motion preference — freeze blobs in place */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}

/* ─────────────────────────────────────────
   NAV TRIGGER
   Asymmetric two-line menu, fixed top-left.
   Fades in after initial composition lands.
───────────────────────────────────────── */
.nav-trigger {
  position: fixed;
  top:  26px;
  left: 26px;
  z-index: 200;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px; /* Pad hit area */
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  animation: anim-fade-in 400ms ease 780ms forwards;
}

.nav-trigger .line-1,
.nav-trigger .line-2 {
  height: 1.5px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-trigger .line-1 { width: 20px; }
.nav-trigger .line-2 { width: 13px; }

.nav-trigger:hover .line-1,
.nav-trigger:focus-visible .line-1 {
  width: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.nav-trigger:hover .line-2,
.nav-trigger:focus-visible .line-2 {
  width: 8px;
  background: rgba(0, 0, 0, 0.72);
}

.nav-trigger:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.3);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ─────────────────────────────────────────
   ZERO STATE — centered composition
───────────────────────────────────────── */
.zero-state {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  gap: 0;
  /* No background — gradient canvas shows through */
}

/* ── Meta label (Wordmark) ── */
.meta-label {
  font-size:      30px;
  font-weight:    600;
  letter-spacing: normal;
  color:          var(--near-black);
  text-transform: none;
  margin-bottom:  40px;
  user-select:    none;
  opacity:  0;
  transform: translateY(14px);
  animation: anim-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}

/* ─────────────────────────────────────────
   THE GLASS PILL
   
   Key: backdrop-filter blurs the colored blobs
   that sit beneath it in z-order. The pill's
   semi-transparent white surface tints that
   blurred color slightly toward white — giving
   the frosted glass its characteristic feel.
   
   The inset box-shadow on the top edge mimics
   a glass rim catching overhead light.
───────────────────────────────────────── */
.glass-pill {
  width: clamp(420px, 52vw, 720px);
  padding: 20px 24px 20px 34px;
  border-radius: var(--pill-radius);

  background:       rgba(255, 255, 255, 0.70);
  backdrop-filter:  blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);

  box-shadow:
    0 2px 52px rgba(0, 0, 0, 0.045),
    0 1px  3px rgba(0, 0, 0, 0.035),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98);

  border: 1px solid rgba(255, 255, 255, 0.88);

  display:     flex;
  align-items: center;
  gap:         12px;
  cursor:      text;

  /* Subtle depth boost on focus */
  transition: box-shadow 280ms ease;

  opacity:  0;
  transform: translateY(14px);
  animation: anim-fade-up 750ms cubic-bezier(0.22, 1, 0.36, 1) 360ms forwards;
}

.glass-pill:focus-within {
  box-shadow:
    0 4px 72px rgba(0, 0, 0, 0.07),
    0 1px  4px rgba(0, 0, 0, 0.05),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98);
}

/* ── Text input ── */
.pill-input {
  flex:         1;
  min-width:    0;
  background:   none;
  border:       none;
  outline:      none;
  font-family:  var(--font);
  font-size:    17px;
  font-weight:  400;
  color:        var(--text-body);
  letter-spacing: -0.014em;
  caret-color:  rgba(0, 0, 0, 0.55);
}

.pill-input::placeholder {
  color: var(--text-muted);
}

/* ── Submit arrow ── */
.pill-btn {
  width:        34px;
  height:       34px;
  border-radius: 50%;
  background:   var(--near-black);
  border:       none;
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;

  /* Hidden until user types */
  opacity:       0;
  transform:     scale(0.72);
  pointer-events: none;
  transition:
    opacity   200ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pill-btn.visible {
  opacity:       1;
  transform:     scale(1);
  pointer-events: auto;
}

.pill-btn:hover  { background: #1c1c1c; }
.pill-btn:active { transform: scale(0.94); }

.pill-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.4);
  outline-offset: 3px;
}

.pill-btn svg {
  width:           14px;
  height:          14px;
  stroke:          white;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
  margin-left:     1px; /* optical center for arrow */
}

/* ── Keyboard hint ── */
.kbd-hint {
  margin-top:     20px;
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          rgba(0, 0, 0, 0.20);
  user-select:    none;
  opacity:  0;
  animation: anim-fade-in 500ms ease 900ms forwards;
}

/* ─────────────────────────────────────────
   ENTRY ANIMATIONS
───────────────────────────────────────── */
@keyframes anim-fade-up {
  from {
    opacity:   0;
    transform: translateY(16px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

@keyframes anim-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────
   THE ANTI-SIDEBAR
───────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.anti-sidebar {
  position: fixed;
  top: 16px;
  left: 16px;
  bottom: 16px;
  width: 300px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.08);
  border-radius: 28px;
  z-index: 250; /* Above overlay and triggers */
  transform: translateX(calc(-100% - 16px));
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 48px 32px;
}

.anti-sidebar.active {
  transform: translateX(0);
}

/* Closing override for faster retraction */
.anti-sidebar.closing {
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-overlay.closing {
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
  margin-bottom: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.sidebar-header:hover {
  color: rgba(0, 0, 0, 0.6);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-link {
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.75);
  line-height: 2.8;
  transition: color 150ms ease;
}

.sidebar-link:first-of-type {
  color: #000;
  font-weight: 500;
}

.sidebar-link:hover {
  color: rgba(0, 0, 0, 1);
}

/* ─────────────────────────────────────────
   LEDGER STATE & TRANSITIONS
───────────────────────────────────────── */
body.ledger-active .zero-state {
  pointer-events: none; /* Let clicks pass to ledger */
}

body.ledger-active .meta-label,
body.ledger-active .kbd-hint {
  opacity: 0 !important;
  transition: opacity 200ms ease;
}

body.ledger-active .glass-pill {
  /* Translate to bottom: 50vh - 50% of own height - 40px margin */
  transform: translateY(calc(50vh - 50% - 40px)) !important;
  border-radius: 32px;
  padding: 16px 20px 16px 28px;
  pointer-events: auto; /* Keep interactive */
  transition: all 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation: none !important; /* Break free from initial fade-up lock */
}

.ledger {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: 120px 5vw 160px 5vw; /* Bottom padding clears the docked pill */
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.ledger-active .ledger {
  opacity: 1;
  pointer-events: auto;
}

.ledger-content {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
}

.exchange {
  margin-bottom: 96px;
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  animation: anim-fade-up 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* User Message */
.msg-user {
  align-self: flex-end;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--near-black);
  text-transform: uppercase;
  margin-bottom: 64px;
  text-align: right;
  margin-right: 20px;
}

/* AI Message */
.msg-ai {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.28);
  margin-bottom: 16px;
}

.ai-body {
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.68;
  max-width: 680px;
  text-align: left;
  letter-spacing: -0.012em;
}

/* AI Streaming Chunks */
.stream-chunk {
  opacity: 0;
  animation: fade-chunk 120ms ease forwards;
}

@keyframes fade-chunk {
  to { opacity: 1; }
}

/* ─────────────────────────────────────────
   DIRECTIVE 04 — THE PHYSICS OF THINKING
───────────────────────────────────────── */
/* Release state curves */
.blob {
  transition: opacity 900ms ease;
}

.blob-wrap {
  position: absolute;
  inset: 0;
  transition: transform 900ms ease;
}

.glass-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}

/* Ignition & Pulse */
body.thinking .blob {
  opacity: 0.95 !important;
  transition: opacity 600ms ease; /* 0-600ms */
}

body.thinking .blob-lav { animation-duration: 4s; }
body.thinking .blob-amb { animation-duration: 4s; }
body.thinking .blob-rose { animation-duration: 4s; }
body.thinking .blob-ghost { animation-duration: 4s; }

body.thinking .glass-pill::after {
  animation: thinking-pulse 1.4s ease-in-out infinite;
  opacity: 1;
}

@keyframes thinking-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(178, 140, 252, 0); }
  50%  { box-shadow: 0 0 0 12px rgba(178, 140, 252, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(178, 140, 252, 0); }
}

/* Contraction (600ms delay) */
body.thinking .blob-wrap {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}

body.thinking .wrap-lav { transform: translate(25px, 15px); }
body.thinking .wrap-amb { transform: translate(-25px, 15px); }
body.thinking .wrap-rose { transform: translate(0px, -20px); }
body.thinking .wrap-ghost { transform: translate(15px, 25px); }

/* ─────────────────────────────────────────
   ACCESSIBILITY & REDUCED MOTION (DIR 05)
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .blob {
    animation: none !important;
  }
  
  body.thinking .glass-pill::after {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ─────────────────────────────────────────
   AUTH MODAL (DIR 06)
───────────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.05); /* very faint */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.auth-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 14px));
  width: 90%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-radius: 32px;
  padding: 40px 32px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
  z-index: 310;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.auth-heading {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: -0.01em;
}

.auth-pill {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.auth-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: #000;
}
.auth-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.auth-btn {
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 24px;
  transition: opacity 150ms ease;
}
.auth-btn:hover {
  opacity: 0.85;
}

.auth-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  padding: 8px;
}
.auth-toggle:hover {
  color: rgba(0, 0, 0, 0.9);
}

/* ─────────────────────────────────────────
   MODELS MODAL (DIR 06)
───────────────────────────────────────── */
.model-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  transition: opacity 150ms ease;
}

.model-row:hover {
  opacity: 0.7;
}

.model-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  margin-top: 7px;
  flex-shrink: 0;
  transition: background 150ms ease;
}

.model-row.active .model-dot {
  background: #000;
}

.model-info {
  display: flex;
  flex-direction: column;
}

.model-name {
  font-size: 15px;
  font-weight: 500;
  color: #000;
  margin-bottom: 6px;
}

.model-desc {
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}