/* Atlas Command — design tokens extracted from desktop-v2 + refined */
:root {
  /* Surfaces */
  --bg: #0F0F0F;
  --surface: #121212;
  --surface-raised: #1A1A1A;
  --surface-elevated: #1F1F1F;
  --border: #222222;
  --border-strong: #2E2E2E;

  /* Text */
  --text: #FFFFFF;
  --text-2: #AAAAAA;
  --text-3: #666666;

  /* Accents */
  --accent: #936BDA;            /* purple — primary brand */
  --accent-hover: #A47DE4;
  --accent-dim: rgba(147,107,218,.14);
  --accent-ring: rgba(147,107,218,.35);

  /* Status */
  --green: #1FAC47;
  --green-dim: rgba(31,172,71,.14);
  --orange: #FF8536;
  --orange-dim: rgba(255,133,54,.14);
  --red: #F44343;
  --red-dim: rgba(244,67,67,.14);
  --yellow: #E5B53A;
  --yellow-dim: rgba(229,181,58,.14);
  --blue: #4B9FFF;
  --blue-dim: rgba(75,159,255,.14);

  /* Radii */
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 8px;
  --r-pill: 9999px;

  /* Hover */
  --hover-1: rgba(255,255,255,.03);
  --hover-2: rgba(255,255,255,.06);
  --hover-3: rgba(255,255,255,.09);

  /* Shadows */
  --card-shadow: 0 1px 2px rgba(0,0,0,.2);
  --pop-shadow: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);

  /* Density (tweakable) */
  --row-py: 12px;
  --row-px: 14px;
  --card-p: 16px;
  --gap: 10px;
  --t-body: 13px;
  --t-meta: 11.5px;
  --t-title: 14.5px;
  --t-h: 22px;
}

/* Light mode (frost) */
html.light {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-raised: #EEF0F3;
  --surface-elevated: #FFFFFF;
  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.16);
  --text: #17181B;
  --text-2: #5A6068;
  --text-3: #9AA0A8;
  --hover-1: rgba(0,0,0,.03);
  --hover-2: rgba(0,0,0,.05);
  --hover-3: rgba(0,0,0,.08);
  --card-shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.04);
  --pop-shadow: 0 12px 40px rgba(17,24,39,.12), 0 2px 8px rgba(17,24,39,.06);
  --accent-dim: rgba(147,107,218,.12);
  --green-dim: rgba(31,172,71,.10);
  --orange-dim: rgba(255,133,54,.12);
  --red-dim: rgba(244,67,67,.10);
}

/* Density presets (applied on .app root) */
.density-calm {
  --row-py: 16px;
  --card-p: 20px;
  --gap: 14px;
  --t-body: 14px;
  --t-title: 15px;
}
.density-dense {
  --row-py: 8px;
  --row-px: 12px;
  --card-p: 12px;
  --gap: 6px;
  --t-body: 12.5px;
  --t-title: 13.5px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; border: 2px solid transparent; }

/* Mono */
.mono { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; }

/* Reusable atoms */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-raised); color: var(--text-2);
  border: 1px solid var(--border);
}
.chip.green { background: var(--green-dim); color: var(--green); border-color: transparent; }
.chip.orange { background: var(--orange-dim); color: var(--orange); border-color: transparent; }
.chip.red { background: var(--red-dim); color: var(--red); border-color: transparent; }
.chip.accent { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.chip.yellow { background: var(--yellow-dim); color: var(--yellow); border-color: transparent; }
.chip.blue { background: var(--blue-dim); color: var(--blue); border-color: transparent; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.dot.orange { background: var(--orange); }
.dot.red { background: var(--red); }
.dot.gray { background: var(--text-3); }
.dot.pulse { animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--green-dim); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(31,172,71,0); opacity: .7; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 500;
  transition: all .12s;
}
.btn:hover { background: var(--surface-raised); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Accent: outlined version — for action buttons that aren't THE primary on the surface.
   Reads as deliberate without competing with the real primary. */
.btn.accent { background: var(--surface); border-color: var(--accent-ring); color: var(--accent); }
.btn.accent:hover { background: var(--accent-dim); border-color: var(--accent); }
.btn.success { background: var(--green); border-color: var(--green); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--hover-2); color: var(--text); }
.btn.sm { padding: 5px 9px; font-size: 11.5px; }
.btn.icon { padding: 6px; width: 28px; height: 28px; }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  background: var(--surface-raised); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 1px 0 var(--border);
}

.divider { height: 1px; background: var(--border); margin: 12px 0; }
.vdiv { width: 1px; background: var(--border); align-self: stretch; }

.meta { font-size: var(--t-meta); color: var(--text-3); }
.label-caps { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .2s ease; }

@keyframes briefingIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface-raised) 0%, var(--hover-3) 50%, var(--surface-raised) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Progress bar */
.bar { height: 4px; background: var(--surface-raised); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.bar.green > i { background: var(--green); }
.bar.orange > i { background: var(--orange); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--card-shadow);
}
html.light .card { box-shadow: var(--card-shadow); }

/* Spinner */
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Focus rings for cards */
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* No scrollbar where annoying */
.no-sbar::-webkit-scrollbar { display: none; }
.no-sbar { scrollbar-width: none; }

/* ── Celebration: confetti burst ───────────────── */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.confetti-piece {
  position: absolute; width: 7px; height: 10px; border-radius: 2px;
  animation: confettiBurst .9s cubic-bezier(.2,.7,.4,1) forwards;
  will-change: transform, opacity;
}
@keyframes confettiBurst {
  0% { opacity: 1; transform: translate(var(--cx), var(--cy)) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--cx) + var(--dx)), calc(var(--cy) + var(--dy))) rotate(var(--rot)) scale(.4); }
}

/* Dismissal animation on approval cards */
@keyframes approvalDismiss {
  0% { opacity: 1; max-height: 500px; transform: translateX(0); }
  50% { opacity: 0; transform: translateX(12px); }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; transform: translateX(24px); }
}
.dismissing { animation: approvalDismiss .45s ease forwards; pointer-events: none; overflow: hidden; }

/* Approval success ring flash */
@keyframes approvedFlash {
  0% { box-shadow: 0 0 0 0 rgba(31,172,71,0); }
  30% { box-shadow: 0 0 0 4px rgba(31,172,71,.35), 0 0 22px rgba(31,172,71,.5); }
  100% { box-shadow: 0 0 0 0 rgba(31,172,71,0); }
}
.approved-flash { animation: approvedFlash .7s ease; }

/* Atlas "thinking" — three dots that breathe while the agent is running */
@keyframes atlasDot {
  0%, 80%, 100% { transform: scale(.6); opacity: .35; }
  40% { transform: scale(1); opacity: 1; }
}
.atlas-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: atlasDot 1.2s ease-in-out infinite; }
.atlas-dot:nth-child(2) { animation-delay: .15s; }
.atlas-dot:nth-child(3) { animation-delay: .3s; }

/* Atlas avatar — soft accent halo while thinking */
@keyframes atlasHalo {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-ring), 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 6px var(--accent-ring), 0 0 18px 2px var(--accent-dim); }
}
.atlas-halo { animation: atlasHalo 2.4s ease-in-out infinite; }

/* Atlas thinking — pulsing dot prefix on the live "now" timestamp */
@keyframes atlasPulseDot {
  0%, 100% { transform: scale(1);   opacity: 1;  }
  50%      { transform: scale(1.4); opacity: .55; }
}
.atlas-pulse-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: atlasPulseDot 1.4s ease-in-out infinite;
}

/* Atlas thinking glyphs — multiple on-brand treatments. Picked from
   the Tweaks panel; all SVG-based for crisp rendering at small sizes. */
@keyframes atlasNeedleSwing {
  0%   { transform: rotate(-62deg); }
  18%  { transform: rotate(38deg); }
  34%  { transform: rotate(-24deg); }
  50%  { transform: rotate(16deg); }
  66%  { transform: rotate(-8deg); }
  82%  { transform: rotate(3deg); }
  100% { transform: rotate(-62deg); }
}
@keyframes atlasOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes atlasDrawLine {
  0%   { stroke-dashoffset: 14; opacity: 0; }
  20%  { opacity: 1; }
  60%  { stroke-dashoffset: 0;  opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 0; }
}
@keyframes atlasStarTwinkle {
  0%, 100% { opacity: .35; transform: scale(.85); transform-origin: center; }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@keyframes atlasSonarPing {
  0%   { transform: scale(1); opacity: .85; }
  100% { transform: scale(3.6); opacity: 0; }
}
@keyframes atlasGlobeSweep {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes atlasTypeBreath {
  0%, 100% { opacity: .35; transform: scaleY(.6); }
  50%      { opacity: 1;   transform: scaleY(1); }
}
@keyframes atlasStarPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.12); opacity: .85; }
}
/* Brand mark — alive. Vertical and horizontal kites breathe on
   independent offset clocks, the whole mark wobbles, halo ramps in
   and out. More energetic version — bigger amplitudes, faster cycles,
   so it reads as "actively thinking" instead of "idly pulsing".
   Reads as "something is happening" rather than a uniform pulse —
   the Claude-mark feel. */
@keyframes atlasStarKiteV {
  0%, 100% { transform: scaleY(1)    scaleX(1);   opacity: 1;  }
  25%      { transform: scaleY(1.45) scaleX(.55); opacity: .85; }
  50%      { transform: scaleY(.7)   scaleX(1.35); opacity: 1;  }
  75%      { transform: scaleY(1.2)  scaleX(.78); opacity: .9; }
}
@keyframes atlasStarKiteH {
  0%, 100% { transform: scaleX(1)    scaleY(1);   opacity: 1;  }
  25%      { transform: scaleX(.6)   scaleY(1.4); opacity: .85; }
  50%      { transform: scaleX(1.45) scaleY(.6);  opacity: 1;  }
  75%      { transform: scaleX(.8)   scaleY(1.22); opacity: .9; }
}
@keyframes atlasStarWobble {
  0%, 100% { transform: rotate(0deg)   scale(1); }
  20%      { transform: rotate(18deg)  scale(1.06); }
  45%      { transform: rotate(-14deg) scale(.94); }
  70%      { transform: rotate(10deg)  scale(1.04); }
  88%      { transform: rotate(-5deg)  scale(.98); }
}
@keyframes atlasStarPip {
  0%, 100% { transform: scale(.4);  opacity: .35; }
  50%      { transform: scale(1.8); opacity: 1;   }
}
@keyframes atlasStarHalo {
  0%, 100% { opacity: 0;    transform: scale(.6); transform-origin: 9px 9px; }
  50%      { opacity: .32;  transform: scale(1.5); transform-origin: 9px 9px; }
}
.atlas-star-halo { animation: atlasStarHalo 1.8s ease-in-out infinite; transform-origin: 9px 9px; }

/* Blinking caret at the end of the streaming "thinking" line */
@keyframes atlasCaretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.atlas-caret {
  display: inline-block; width: 7px; height: 13px;
  margin-left: 2px; vertical-align: -2px;
  background: var(--accent);
  animation: atlasCaretBlink 1s steps(1) infinite;
}

/* New timeline entry slides in from the spine */
@keyframes timelineIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.timeline-in { animation: timelineIn .35s ease both; }

/* Approval bar lift in from the bottom */
@keyframes approvalDockIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.approval-dock-in { animation: approvalDockIn .28s ease both; }

/* Mission progress bar shimmer (running indicator) */
@keyframes runningBar {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.running-bar {
  background: linear-gradient(90deg, var(--accent-dim) 0%, var(--accent) 30%, var(--accent-dim) 60%, var(--accent-dim) 100%);
  background-size: 200% 100%;
  animation: runningBar 2.6s linear infinite;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { display: none; }
  .dismissing { animation: none; opacity: 0; max-height: 0; }
  .approved-flash { animation: none; }
}