/* Live Agent build progress (owner 2026-11-08): the client watches the server being ordered, set up and launched.
   Pure CSS motion driven by data-step / data-state on #launch-progress; app.js only swaps the step. */
.lp {
  --lp-dark: #1b2231;
  --lp-unit: #273147;
  --lp-off: #3a4459;
  --lp-amber: #f2b94b;
  --lp-green: #3ddc84;
  --lp-blue: #2aa3ef;
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin: 0 0 22px;
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: radial-gradient(120% 140% at 0% 0%, var(--primary-soft) 0%, var(--surface) 55%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lp[data-step="ready"] { background: radial-gradient(120% 140% at 0% 0%, var(--positive-soft) 0%, var(--surface) 60%); }

/* ---------- scene ---------- */
.lp-scene { position: relative; width: 280px; height: 230px; margin-top: 18px; }
.lp-glow {
  position: absolute; inset: 20px 40px 20px 0; border-radius: 50%;
  background: radial-gradient(circle, #2459dc22 0%, transparent 70%);
  animation: lp-breathe 4s ease-in-out infinite;
}
.lp[data-step="ready"] .lp-glow { background: radial-gradient(circle, #23714933 0%, transparent 70%); }
.lp-pulse {
  position: absolute; left: 62px; top: 78px; width: 70px; height: 70px; border-radius: 50%;
  border: 2px solid var(--primary); opacity: 0;
}
.lp[data-step="received"] .lp-pulse, .lp[data-step="server_order"] .lp-pulse { animation: lp-ping 1.8s ease-out infinite; }

.lp-rack {
  position: absolute; left: 30px; top: 36px; width: 132px; height: 158px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 9px;
  border-radius: 16px; background: linear-gradient(160deg, #222b3d, var(--lp-dark));
  box-shadow: 0 18px 30px #1b223140, inset 0 1px 0 #ffffff14;
  transition: opacity .6s var(--ease, ease), transform .6s var(--ease, ease);
}
.lp[data-step="received"] .lp-rack { opacity: .35; transform: scale(.96); }
.lp[data-step="server_order"] .lp-rack { opacity: .8; outline: 2px dashed #2459dc66; outline-offset: 6px; animation: lp-dash 1.2s linear infinite; }
.lp-unit {
  position: relative; height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 5px;
  border-radius: 7px; background: var(--lp-unit); box-shadow: inset 0 -2px 0 #00000026;
}
.lp[data-step="received"] .lp-unit { opacity: .25; }
.lp[data-step="server_order"] .lp-unit { animation: lp-assemble 2.4s var(--ease, ease) infinite; }
.lp[data-step="server_order"] .lp-unit:nth-child(2) { animation-delay: .25s; }
.lp[data-step="server_order"] .lp-unit:nth-child(3) { animation-delay: .5s; }
.lp-led { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-off); }
.lp-vent { flex: 1; height: 7px; border-radius: 3px; background: repeating-linear-gradient(90deg, #ffffff10 0 3px, transparent 3px 6px); }
.lp-fan { width: 13px; height: 13px; border-radius: 50%; border: 2px dashed #ffffff40; }
.lp[data-step="server_boot"] .lp-led { background: var(--lp-amber); animation: lp-blink 1.1s steps(2) infinite; }
.lp[data-step="server_boot"] .lp-led:nth-child(2) { animation-delay: .35s; }
.lp[data-step="server_boot"] .lp-led:nth-child(3) { animation-delay: .7s; }
.lp[data-step="server_boot"] .lp-fan { animation: lp-spin 1.6s linear infinite; }
.lp:is([data-step="server_setup"], [data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-led {
  background: var(--lp-green); box-shadow: 0 0 8px var(--lp-green); animation: lp-blink .7s steps(2) infinite;
}
.lp:is([data-step="server_setup"], [data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-led:nth-child(2) { animation-delay: .23s; }
.lp:is([data-step="server_setup"], [data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-led:nth-child(3) { animation-delay: .46s; }
.lp:is([data-step="server_setup"], [data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-fan { animation: lp-spin .6s linear infinite; }
.lp[data-step="ready"] .lp-led { background: var(--lp-green); box-shadow: 0 0 8px var(--lp-green); }
.lp[data-step="ready"] .lp-fan { animation: lp-spin 2.4s linear infinite; }

.lp-scan {
  position: absolute; left: 6px; right: 6px; top: 8px; height: 26px; border-radius: 8px; opacity: 0;
  background: linear-gradient(180deg, transparent, #3ddc8455, transparent);
}
.lp:is([data-step="server_setup"], [data-step="verify"]) .lp-scan { animation: lp-scan 1.8s ease-in-out infinite; }

.lp-agent {
  position: absolute; left: 50%; bottom: -22px; width: 46px; height: 40px; margin-left: -23px;
  border-radius: 13px; background: linear-gradient(160deg, #4c7dff, var(--primary));
  box-shadow: 0 10px 18px #2459dc55; display: flex; align-items: center; justify-content: center; gap: 9px;
  opacity: 0; transform: translateY(30px) scale(.6); transition: all .7s cubic-bezier(.2, 1.4, .4, 1);
}
.lp-eye { width: 7px; height: 9px; border-radius: 4px; background: #fff; }
.lp-mouth { position: absolute; bottom: 9px; left: 50%; width: 14px; height: 5px; margin-left: -7px; border-radius: 0 0 8px 8px; background: #ffffffcc; }
.lp:is([data-step="agent_install"], [data-step="verify"], [data-step="ready"]) .lp-agent { opacity: 1; transform: none; }
.lp[data-step="agent_install"] .lp-agent { animation: lp-hop 1.4s ease-in-out infinite; }
.lp:is([data-step="agent_install"], [data-step="verify"], [data-step="ready"]) .lp-eye { animation: lp-wink 3.2s infinite; }

.lp-wire { position: absolute; left: 164px; top: 104px; width: 52px; height: 2px; background: repeating-linear-gradient(90deg, #2459dc55 0 5px, transparent 5px 9px); opacity: 0; transition: opacity .5s; }
.lp-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); opacity: 0; }
.lp:is([data-step="connect"], [data-step="agent_install"], [data-step="verify"], [data-step="ready"]) .lp-wire { opacity: 1; }
.lp:is([data-step="connect"], [data-step="agent_install"]) .lp-wire i { animation: lp-packet 1.5s linear infinite; }
.lp:is([data-step="connect"], [data-step="agent_install"]) .lp-wire i:nth-child(2) { animation-delay: .5s; }
.lp:is([data-step="connect"], [data-step="agent_install"]) .lp-wire i:nth-child(3) { animation-delay: 1s; }

.lp-bot { position: absolute; left: 214px; top: 76px; width: 60px; height: 60px; }
.lp-bubble {
  position: absolute; inset: 6px 0 8px; border-radius: 16px 16px 16px 4px; background: var(--lp-blue);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 10px 20px #2aa3ef55; opacity: 0; transform: scale(.4) translateX(-16px); transition: all .6s cubic-bezier(.2, 1.4, .4, 1);
}
.lp-bubble span { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.lp:is([data-step="connect"], [data-step="agent_install"], [data-step="verify"], [data-step="ready"]) .lp-bubble { opacity: 1; transform: none; }
.lp:is([data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-bubble span { animation: lp-typing 1.2s ease-in-out infinite; }
.lp:is([data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-bubble span:nth-child(2) { animation-delay: .15s; }
.lp:is([data-step="connect"], [data-step="agent_install"], [data-step="verify"]) .lp-bubble span:nth-child(3) { animation-delay: .3s; }
.lp[data-step="ready"] .lp-bubble { background: #2fbf71; box-shadow: 0 10px 20px #2fbf7155; animation: lp-hop 1.6s ease-in-out 2; }
.lp[data-step="ready"] .lp-bubble span { display: none; }
.lp[data-step="ready"] .lp-bubble::after { content: ""; width: 16px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -2px); }
.lp-spark { position: absolute; right: -6px; top: -4px; width: 14px; height: 14px; opacity: 0;
  background: conic-gradient(from 45deg, transparent 0 12.5%, var(--lp-amber) 0 25%, transparent 0 37.5%, var(--lp-amber) 0 50%, transparent 0 62.5%, var(--lp-amber) 0 75%, transparent 0 87.5%, var(--lp-amber) 0);
  border-radius: 50%; }
.lp:is([data-step="connect"], [data-step="agent_install"], [data-step="verify"], [data-step="ready"]) .lp-spark { animation: lp-twinkle 1.6s ease-in-out infinite; }
.lp-radar { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #2fbf71; opacity: 0; }
.lp[data-step="verify"] .lp-radar { animation: lp-ping 1.4s ease-out infinite; }

.lp-burst { position: absolute; left: 244px; top: 104px; width: 0; height: 0; }
.lp-burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0; background: var(--lp-green); }
.lp-burst i:nth-child(2n) { background: var(--primary); }
.lp-burst i:nth-child(3n) { background: var(--lp-amber); }
.lp[data-step="ready"] .lp-burst i { animation: lp-confetti 1.4s ease-out 1 forwards; }
.lp-burst i:nth-child(1) { --dx: 60px; --dy: -50px; }
.lp-burst i:nth-child(2) { --dx: -50px; --dy: -60px; }
.lp-burst i:nth-child(3) { --dx: 70px; --dy: 10px; }
.lp-burst i:nth-child(4) { --dx: -66px; --dy: 18px; }
.lp-burst i:nth-child(5) { --dx: 30px; --dy: 70px; }
.lp-burst i:nth-child(6) { --dx: -30px; --dy: 66px; }
.lp-burst i:nth-child(7) { --dx: 10px; --dy: -78px; }
.lp-burst i:nth-child(8) { --dx: -80px; --dy: -14px; }

/* ---------- copy ---------- */
.lp-copy { min-width: 0; }
.lp-kicker { margin: 0 0 6px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lp[data-step="ready"] .lp-kicker { color: var(--positive); }
.lp-title { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.lp-dots { display: inline-flex; gap: 3px; }
.lp-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: lp-typing 1.2s ease-in-out infinite; }
.lp-dots i:nth-child(2) { animation-delay: .15s; }
.lp-dots i:nth-child(3) { animation-delay: .3s; }
.lp[data-step="ready"] .lp-dots, .lp[data-state="ATTENTION"] .lp-dots { display: none; }
.lp-detail { margin: 0 0 16px; color: var(--muted); min-height: 1.4em; }
.lp-bar { position: relative; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.lp-bar span {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width .9s var(--ease, ease);
  background: linear-gradient(90deg, var(--primary), #5b86ff);
}
.lp-bar span::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(120deg, #ffffff38 0 10px, transparent 10px 20px);
  animation: lp-stripes 1s linear infinite;
}
.lp[data-step="ready"] .lp-bar span { background: linear-gradient(90deg, var(--positive), #2fbf71); }
.lp[data-step="ready"] .lp-bar span::after { display: none; }
.lp-percent { margin: 6px 0 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-note { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-small); background: var(--warning-soft); color: var(--warning); font-size: 13px; }

.lp-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.lp-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--muted); font-size: 14px; }
.lp-step .lp-label { padding-top: 1px; }
.lp-step.is-done { color: var(--ink); }
.lp-step.is-active { color: var(--ink); font-weight: 700; }
.lp-mark { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.lp-step.is-done .lp-mark { border-color: var(--positive); background: var(--positive); }
.lp-step.is-done .lp-mark::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
  animation: lp-draw .35s ease-out;
}
.lp-step.is-active .lp-mark { border-color: var(--primary); }
.lp-step.is-active .lp-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); animation: lp-breathe 1.2s ease-in-out infinite; }
.lp-setup { grid-column: 2; list-style: none; margin: 6px 0 2px; padding: 0 0 0 2px; display: none; gap: 4px; font-weight: 400; font-size: 13px; }
.lp-step.is-active .lp-setup { display: grid; }
.lp-setup li { position: relative; padding-left: 16px; color: var(--muted); }
.lp-setup li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.lp-setup li.is-done { color: var(--ink); }
.lp-setup li.is-done::before { background: var(--positive); }
.lp-setup li.is-active { color: var(--primary); font-weight: 600; }
.lp-setup li.is-active::before { background: var(--primary); animation: lp-breathe 1s ease-in-out infinite; }

/* ---------- keyframes ---------- */
@keyframes lp-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes lp-ping { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes lp-dash { to { outline-offset: 9px; } }
@keyframes lp-assemble { 0% { opacity: 0; transform: translateX(-28px); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: .9; } }
@keyframes lp-blink { 50% { opacity: .25; } }
@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-scan { 0% { top: 8px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 120px; opacity: 0; } }
@keyframes lp-hop { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@keyframes lp-wink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
@keyframes lp-packet { 0% { left: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 48px; opacity: 0; } }
@keyframes lp-typing { 0%, 60%, 100% { transform: none; opacity: .6; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes lp-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes lp-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(220deg); } }
@keyframes lp-stripes { to { background-position: 40px 0; } }
@keyframes lp-draw { from { height: 0; width: 0; } }

@media (max-width: 760px) {
  .lp { grid-template-columns: 1fr; gap: 12px; padding: 20px 16px; }
  .lp-scene { margin: 0 auto; transform: scale(.86); transform-origin: top center; height: 200px; }
  .lp-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
}