/* ═══════════════════════════════════════════════════════════
   LevelUp Growth — Orb Avatar System
   7 agent types · 3 sizes · 5 states
   CSS + SVG only, GPU-friendly keyframes
   ═══════════════════════════════════════════════════════════ */

/* ── Orb color tokens ─────────────────────────────────────── */
.orb[data-type="dmm"]       { --oc:#F59E0B; --oc2:#D97706; --oc3:#FCD34D; }
.orb[data-type="seo"]       { --oc:#3B82F6; --oc2:#2563EB; --oc3:#93C5FD; }
.orb[data-type="content"]   { --oc:#7C3AED; --oc2:#6D28D9; --oc3:#C4B5FD; }
.orb[data-type="social"]    { --oc:#EC4899; --oc2:#DB2777; --oc3:#F9A8D4; }
.orb[data-type="ads"]       { --oc:#F97316; --oc2:#EA580C; --oc3:#FED7AA; }
.orb[data-type="technical"] { --oc:#06B6D4; --oc2:#0891B2; --oc3:#A5F3FC; }
.orb[data-type="crm"]       { --oc:#00E5A8; --oc2:#00B386; --oc3:#6FFFD4; }

/* ── Size tokens ──────────────────────────────────────────── */
.orb { --os:40px; }
.orb[data-size="sm"] { --os:24px; }
.orb[data-size="md"] { --os:40px; }
.orb[data-size="lg"] { --os:64px; }

/* ── Base orb structure ───────────────────────────────────── */
.orb {
  position: relative;
  width:  var(--os);
  height: var(--os);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  isolation: isolate;
  will-change: transform;
}

/* Outer glow ring */
.orb::before {
  content: '';
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--oc) 0%, transparent 68%);
  opacity: .35;
  animation: orbGlowIdle 2.4s ease-in-out infinite;
  will-change: opacity, transform;
}

/* Core sphere */
.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, var(--oc3) 0%, var(--oc) 38%, var(--oc2) 100%);
  box-shadow:
    0 0 calc(var(--os)*.35) var(--oc),
    inset 0 1px 0 rgba(255,255,255,.25);
  animation: orbCoreIdle 2.4s ease-in-out infinite;
  will-change: box-shadow;
}

/* Specular highlight */
.orb-shine {
  position: absolute;
  width: 38%;
  height: 30%;
  top: 16%;
  left: 22%;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  filter: blur(calc(var(--os)*.04));
  pointer-events: none;
}

/* Inner motion ring (thinking/executing) */
.orb-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  opacity: 0;
  animation: none;
}

/* ── State: idle ─────────────────────────────────────────── */
.orb[data-state="idle"]::before   { animation: orbGlowIdle 2.4s ease-in-out infinite; }
.orb[data-state="idle"] .orb-core { animation: orbCoreIdle 2.4s ease-in-out infinite; }
.orb[data-state="idle"] .orb-ring { opacity: 0; }

/* ── State: thinking ──────────────────────────────────────── */
.orb[data-state="thinking"]::before {
  animation: orbGlowThink .9s ease-in-out infinite;
}
.orb[data-state="thinking"] .orb-core {
  animation: orbCoreThink .9s ease-in-out infinite;
}
.orb[data-state="thinking"] .orb-ring {
  opacity: 1;
  animation: orbRingSpin 1.2s linear infinite;
}

/* ── State: executing ─────────────────────────────────────── */
.orb[data-state="executing"]::before {
  animation: orbGlowExec .55s ease-in-out infinite;
  opacity: .65;
}
.orb[data-state="executing"] .orb-core {
  animation: orbCoreExec .55s ease-in-out infinite;
}
.orb[data-state="executing"] .orb-ring {
  opacity: 1;
  inset: 8%;
  border-width: 2px;
  border-color: rgba(255,255,255,.4);
  animation: orbRingSpin .45s linear infinite;
}

/* ── State: success ───────────────────────────────────────── */
.orb[data-state="success"]::before {
  animation: orbGlowSuccess .3s ease forwards;
  opacity: .8;
}
.orb[data-state="success"] .orb-core {
  animation: orbCoreSuccess .5s ease forwards;
  background:
    radial-gradient(circle at 32% 28%, #fff 0%, var(--oc3) 30%, var(--oc) 100%);
}
.orb[data-state="success"] .orb-ring {
  opacity: 1;
  animation: orbRingFlash .5s ease forwards;
}

/* ── State: error ─────────────────────────────────────────── */
.orb[data-state="error"]::before {
  animation: orbGlowError .18s ease-in-out infinite;
  background: radial-gradient(circle, #F87171 0%, transparent 68%);
}
.orb[data-state="error"] .orb-core {
  animation: orbCoreError .18s ease-in-out infinite;
  background:
    radial-gradient(circle at 32% 28%, #FCA5A5 0%, #F87171 45%, #DC2626 100%);
}

/* ════════════════ KEYFRAMES ════════════════ */

@keyframes orbGlowIdle {
  0%,100% { opacity:.28; transform:scale(1); }
  50%     { opacity:.45; transform:scale(1.06); }
}
@keyframes orbCoreIdle {
  0%,100% { box-shadow:0 0 calc(var(--os)*.3) var(--oc),inset 0 1px 0 rgba(255,255,255,.22); }
  50%     { box-shadow:0 0 calc(var(--os)*.55) var(--oc),inset 0 1px 0 rgba(255,255,255,.30); }
}

@keyframes orbGlowThink {
  0%,100% { opacity:.35; transform:scale(1); }
  50%     { opacity:.62; transform:scale(1.12); }
}
@keyframes orbCoreThink {
  0%,100% { box-shadow:0 0 calc(var(--os)*.4) var(--oc),inset 0 1px 0 rgba(255,255,255,.25); transform:scale(1); }
  50%     { box-shadow:0 0 calc(var(--os)*.7) var(--oc),inset 0 1px 0 rgba(255,255,255,.38); transform:scale(1.04); }
}
@keyframes orbRingSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

@keyframes orbGlowExec {
  0%,100% { opacity:.55; transform:scale(1.08); }
  50%     { opacity:.8;  transform:scale(1.22); }
}
@keyframes orbCoreExec {
  0%,100% { box-shadow:0 0 calc(var(--os)*.6) var(--oc),inset 0 1px 0 rgba(255,255,255,.35); transform:scale(1); }
  50%     { box-shadow:0 0 calc(var(--os)*1.1) var(--oc),inset 0 1px 0 rgba(255,255,255,.5); transform:scale(1.07); }
}

@keyframes orbGlowSuccess {
  0%   { opacity:.5; transform:scale(1.1); }
  50%  { opacity:1;  transform:scale(1.5); }
  100% { opacity:.4; transform:scale(1.1); }
}
@keyframes orbCoreSuccess {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.18); }
  100% { transform:scale(1); }
}
@keyframes orbRingFlash {
  0%   { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(2.2); }
}

@keyframes orbGlowError {
  0%,100% { opacity:.4; }
  50%     { opacity:.75; }
}
@keyframes orbCoreError {
  0%,100% { transform:translateX(0); opacity:1; }
  25%     { transform:translateX(-2px); opacity:.7; }
  75%     { transform:translateX(2px); opacity:.85; }
}

/* ── Orb label (name below) ───────────────────────────────── */
.orb-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.orb-label {
  font-family: var(--ff-h, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 11px;
  color: var(--oc);
  white-space: nowrap;
  letter-spacing: .03em;
}

/* ── Orb row (horizontal agent list) ─────────────────────── */
.orb-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.orb-row-info { flex: 1; min-width: 0; }
.orb-row-name {
  font-family: var(--ff-h, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--oc);
  margin-bottom: 2px;
}
.orb-row-role { font-size: 11px; color: #6B7280; }

/* ════════════════ ORB LEVEL DIFFERENTIATION ════════════════
   .orb-level-specialist  — base glow, slow pulse
   .orb-level-junior      — stronger glow, inner motion
   .orb-level-senior      — intense glow, outer ring, energy effect
   ═══════════════════════════════════════════════════════════ */

/* ── Specialist (base) ───────────────────────────────────── */
.orb-level-specialist::before {
  opacity: .28;
  animation: orbGlowIdle 2.8s ease-in-out infinite;
}
.orb-level-specialist .orb-core {
  animation: orbCoreIdle 2.8s ease-in-out infinite;
}

/* ── Junior Specialist ────────────────────────────────────── */
.orb-level-junior::before {
  opacity: .48;
  animation: orbGlowThink 1.6s ease-in-out infinite;
  inset: -35%;
}
.orb-level-junior .orb-core {
  animation: orbCoreThink 1.6s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--os)*.55) var(--oc),
    0 0 calc(var(--os)*.85) var(--oc),
    inset 0 1px 0 rgba(255,255,255,.30);
}
.orb-level-junior .orb-ring {
  opacity: .45;
  animation: orbRingSpin 2.4s linear infinite;
  inset: 10%;
  border-color: rgba(255,255,255,.28);
}

/* ── Senior Specialist ────────────────────────────────────── */
.orb-level-senior::before {
  opacity: .68;
  animation: orbGlowExec 1.1s ease-in-out infinite;
  inset: -45%;
}
.orb-level-senior .orb-core {
  animation: orbCoreExec 1.1s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--os)*.7)  var(--oc),
    0 0 calc(var(--os)*1.2) var(--oc),
    0 0 calc(var(--os)*1.8) color-mix(in srgb, var(--oc) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.orb-level-senior .orb-ring {
  opacity: .7;
  animation: orbRingSpin .9s linear infinite;
  inset: 8%;
  border-width: 1.5px;
  border-color: rgba(255,255,255,.4);
}
/* Outer energy ring — senior only */
.orb-level-senior::after {
  content: '';
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  border: 1px solid var(--oc);
  opacity: .18;
  animation: seniorRingExpand 2.2s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes seniorRingExpand {
  0%, 100% { transform: scale(1);    opacity: .18; }
  50%       { transform: scale(1.15); opacity: .08; }
}

/* ── Agent card component styles ─────────────────────────── */
.agent-card-comp {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px;
  transition: all .25s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
}
.agent-card-comp.selectable {
  cursor: pointer;
}
.agent-card-comp.selectable:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.agent-card-comp.agent-card-selected {
  box-shadow: 0 0 0 2px var(--oc, #7C3AED), 0 12px 32px rgba(0,0,0,.3);
}
.agent-card-orb-wrap { margin-bottom: 4px; }
.agent-card-body { width: 100%; }
.agent-card-name {
  font-family: var(--ff-h, 'Manrope', sans-serif);
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 2px;
}
.agent-card-role {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 8px;
  line-height: 1.4;
}
.agent-level-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 100px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--ff-h, 'Manrope', sans-serif);
  margin-bottom: 8px;
}
.agent-card-desc {
  font-size: 12.5px;
  color: #6B7280;
  line-height: 1.55;
  margin-bottom: 8px;
}
.agent-card-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Agent selection grid ────────────────────────────────── */
.agent-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media(max-width: 768px) {
  .agent-select-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 480px) {
  .agent-select-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   ORB IDENTITY SYSTEM v2 — BEM level classes
   .orb--specialist  ·  .orb--junior  ·  .orb--senior
   Color = role (never changes)
   Motion complexity = seniority
   ════════════════════════════════════════════════════════════════ */

/* ── SPECIALIST (base) ─────────────────────────────────────────
   Single orb · soft glow · subtle pulse · calm, stable
   ─────────────────────────────────────────────────────────────── */
.orb--specialist::before {
  opacity: .26;
  animation: orbGlowIdle 3s ease-in-out infinite;
}
.orb--specialist .orb-core {
  animation: orbCoreIdle 3s ease-in-out infinite;
}
/* No extra rings — specialist is clean */
.orb--specialist .orb-ring { opacity: 0; animation: none; }

/* ── JUNIOR SPECIALIST ─────────────────────────────────────────
   Orb + 1 rotating ring · more dynamic than base
   ─────────────────────────────────────────────────────────────── */
.orb--junior::before {
  opacity: .42;
  animation: orbGlowIdle 2s ease-in-out infinite;
}
.orb--junior .orb-core {
  animation: orbCoreThink 2s ease-in-out infinite;
}
.orb--junior .orb-ring { opacity: 0; animation: none; }

/* The rotating ring — lives on ::after */
.orb--junior::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--oc);
  opacity: 0.55;
  animation: orbOrbit 3s linear infinite;
  will-change: transform;
  pointer-events: none;
}

@keyframes orbOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── SENIOR SPECIALIST ─────────────────────────────────────────
   Orb + 2-3 layered rings · fluid energy · slow, powerful
   ─────────────────────────────────────────────────────────────── */
/* Override base glow with senior flowing ring on ::before */
.orb--senior::before {
  inset: -10px;
  background: none;
  border: 2px solid var(--oc);
  filter: blur(1.5px);
  opacity: 0.55;
  animation: orbFlow 6s ease-in-out infinite !important;
  will-change: transform;
}
.orb--senior .orb-core {
  animation: orbCoreIdle 2.5s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--os)*.7)  var(--oc),
    0 0 calc(var(--os)*1.1) var(--oc),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.orb--senior .orb-ring { opacity: 0; animation: none; }

/* Second outer ring — flowing in reverse */
.orb--senior::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid var(--oc);
  opacity: 0.28;
  animation: orbFlowReverse 8s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

@keyframes orbFlow {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1);    }
}
@keyframes orbFlowReverse {
  0%   { transform: rotate(360deg) scale(1);    }
  50%  { transform: rotate(180deg) scale(0.97); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* ── orb--senior state: executing — triple ring pulse ───────── */
.orb--senior[data-state="executing"]::before {
  animation: orbFlow 2.5s ease-in-out infinite !important;
  opacity: .75;
  filter: blur(1px);
}
.orb--senior[data-state="executing"]::after {
  animation: orbFlowReverse 3.5s ease-in-out infinite;
  opacity: .45;
  inset: -24px;
}
.orb--senior[data-state="executing"] .orb-core {
  animation: orbCoreExec .8s ease-in-out infinite;
}

/* ── orb--junior state: executing — faster orbit ────────────── */
.orb--junior[data-state="executing"]::after {
  animation: orbOrbit 1s linear infinite;
  opacity: .85;
  inset: -8px;
  border-width: 2px;
}
.orb--junior[data-state="executing"] .orb-core {
  animation: orbCoreThink .9s ease-in-out infinite;
}

/* ── success flash preserves ring ───────────────────────────── */
.orb--junior[data-state="success"]::after,
.orb--senior[data-state="success"]::after {
  animation: orbRingFlash .5s ease forwards;
  opacity: 1;
}