/* ============================================================= *
 *  Cursor hero — "Caught in the editor"
 *  A Cursor editor window. The agent's confident "Done" summary sits
 *  on top, but a deterministic Shipmoor scan sweeps the file and
 *  catches the phantom import the summary glossed over — red underline,
 *  gutter mark, and an inline finding. The afterFileEdit hook re-scans.
 *  Pure CSS animation, no JS. Reduced-motion safe.
 * ============================================================= */

.ce-stage {
  container-type: size;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1200 / 640;
  border: 1px solid rgba(var(--rgb-text), 0.1);
  border-radius: 2.4cqw;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #fbfcfa 0%, #f1f5ee 56%, #e7ede4 100%);
  box-shadow: 0 30px 70px -42px rgba(var(--rgb-text), 0.42);
  font-family: var(--font-mono);
}

.ce-floor {
  position: absolute;
  left: 50%; bottom: -8%;
  width: 230%; height: 52%;
  z-index: 0; opacity: 0.35;
  transform: translateX(-50%) perspective(48cqw) rotateX(70deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(to right, rgba(var(--rgb-brand-1), 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--rgb-brand-1), 0.16) 1px, transparent 1px);
  background-size: 5cqw 5cqw;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 100%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 85% at 50% 100%, #000 0%, transparent 70%);
}

/* editor window */
.ce-window {
  position: absolute;
  left: 4cqw; top: 12cqw;
  width: 62cqw;
  z-index: 3;
  background: #0d232a;
  border-radius: 1.3cqw;
  overflow: hidden;
  box-shadow: 0 3cqw 6cqw -2.4cqw rgba(var(--rgb-text), 0.6);
}
.ce-titlebar {
  display: flex; align-items: center; gap: 0.7cqw;
  padding: 1cqw 1.3cqw;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ce-titlebar i { width: 0.85cqw; height: 0.85cqw; border-radius: 50%; }
.ce-titlebar i:nth-child(1) { background: #ff5f56; }
.ce-titlebar i:nth-child(2) { background: #ffbd2e; }
.ce-titlebar i:nth-child(3) { background: #27c93f; }
.ce-titlebar b { margin-left: 0.6cqw; color: #cfe8e0; font-size: 1.05cqw; font-weight: 500; }
.ce-cursor-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4cqw;
  font-size: 0.9cqw; font-weight: 600;
  color: #0d232a;
  background: var(--color-brand-4);
  border-radius: 999px;
  padding: 0.3cqw 0.7cqw;
}

.ce-code { position: relative; padding: 1.1cqw 0; }
.ce-line {
  display: grid;
  grid-template-columns: 3.4cqw 1fr;
  align-items: baseline;
  padding: 0.32cqw 1.3cqw 0.32cqw 0;
  font-size: 1.12cqw; line-height: 1.5;
}
.ce-line .n { color: #4d6b66; text-align: right; padding-right: 1cqw; font-size: 0.95cqw; user-select: none; }
.ce-line .t { color: #cfe7df; white-space: pre; }
.ce-kw { color: #6fd3b6; }
.ce-fn { color: #f0b24f; }
.ce-str { color: #8fd0c4; }
.ce-num { color: #e3a7a4; }
.ce-cm { color: #5f8c83; }
.ce-pun { color: #8fa8a2; }

/* the flagged line */
.ce-line.flag { position: relative; }
.ce-line.flag .n { color: var(--color-brand-5); font-weight: 700; }
.ce-bad {
  position: relative;
  color: #ffd9d6;
  background:
    bottom left / 0.9cqw 0.45cqw repeat-x
    radial-gradient(circle at 0.22cqw 0.34cqw, var(--color-brand-5) 0.16cqw, transparent 0.18cqw),
    bottom left / 0.9cqw 0.45cqw repeat-x
    radial-gradient(circle at 0.67cqw 0.1cqw, var(--color-brand-5) 0.16cqw, transparent 0.18cqw);
  padding-bottom: 0.55cqw;
}

/* scanline sweep */
.ce-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3cqw;
  z-index: 4;
  background: linear-gradient(180deg, transparent, rgba(93, 214, 195, 0.22) 60%, rgba(93, 214, 195, 0.5));
  border-bottom: 1px solid rgba(125, 216, 164, 0.8);
  opacity: 0;
  animation: ce-scan 6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes ce-scan {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  46% { transform: translateY(20cqw); opacity: 1; }
  56% { transform: translateY(24cqw); opacity: 0; }
  100% { transform: translateY(24cqw); opacity: 0; }
}

/* status bar */
.ce-statusbar {
  display: flex; align-items: center; gap: 0.8cqw;
  padding: 0.85cqw 1.3cqw;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95cqw;
}
.ce-statusbar .sb-cmd { color: #9fc7bd; }
.ce-statusbar .sb-prompt { color: var(--color-brand-4); font-weight: 700; }
.ce-statusbar .sb-high {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4cqw;
  color: #fff; background: var(--color-brand-5);
  border-radius: 999px; padding: 0.25cqw 0.7cqw; font-weight: 700;
}
.ce-statusbar .sb-high .d { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #fff; }

/* agent "Done" summary chip — confident, then caught */
.ce-summary {
  position: absolute;
  left: 8cqw; top: 3.5cqw;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 0.7cqw;
  padding: 0.9cqw 1.2cqw;
  border-radius: 0.9cqw;
  background: #fff;
  border: 1px solid rgba(var(--rgb-text), 0.12);
  box-shadow: 0 1.6cqw 3cqw -1.6cqw rgba(var(--rgb-text), 0.4);
  font-size: 1.05cqw; font-weight: 600; color: var(--color-text);
}
.ce-summary .tick {
  width: 1.7cqw; height: 1.7cqw; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--color-brand-1) 14%, #fff);
  color: var(--color-brand-1);
}
.ce-summary .tick svg { width: 1.1cqw; height: 1.1cqw; }
.ce-summary .caught {
  margin-left: 0.3cqw;
  font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--color-brand-5);
  border-radius: 0.4cqw; padding: 0.28cqw 0.55cqw;
  opacity: 1; transform: rotate(-6deg);
  animation: ce-caught 6s ease-out infinite;
}
@keyframes ce-caught {
  0%, 52% { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(-6deg); }
  66%, 94% { opacity: 1; transform: scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: scale(0.9) rotate(-6deg); }
}

/* inline Shipmoor finding card, anchored to the flagged line */
.ce-finding {
  position: absolute;
  right: 3cqw; top: 30cqw;
  width: 30cqw;
  z-index: 7;
  padding: 1.2cqw 1.4cqw;
  border-radius: 1.2cqw;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-brand-5) 42%, transparent);
  box-shadow: 0 2.4cqw 5cqw -2cqw rgba(var(--rgb-text), 0.5);
  opacity: 1;
  animation: ce-find 6s ease-out infinite;
}
@keyframes ce-find {
  0%, 50% { opacity: 0; transform: translateY(1cqw) scale(0.97); }
  58%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-0.6cqw) scale(0.98); }
}
.ce-find-head { display: flex; align-items: center; gap: 0.6cqw; margin-bottom: 0.7cqw; }
.ce-find-spark {
  width: 2cqw; height: 2cqw; border-radius: 0.5cqw; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #1c9a86, var(--color-brand-1) 58%, #0c3a33);
  color: #eafff7;
}
.ce-find-spark svg { width: 1.2cqw; height: 1.2cqw; }
.ce-find-head b { font-size: 1.05cqw; font-weight: 700; }
.ce-find-sev {
  margin-left: auto;
  font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--color-brand-5);
  border-radius: 0.4cqw; padding: 0.28cqw 0.55cqw;
}
.ce-find-title { font-size: 1.25cqw; font-weight: 700; color: var(--color-text); margin-bottom: 0.3cqw; }
.ce-find-desc { font-size: 1cqw; line-height: 1.45; color: var(--color-text-alt); }
.ce-find-desc code { color: var(--color-brand-5); font-weight: 600; }
.ce-find-rule {
  margin-top: 0.8cqw; padding-top: 0.7cqw;
  border-top: 1px solid rgba(var(--rgb-text), 0.1);
  font-size: 0.92cqw; color: var(--color-text-alt);
}

/* afterFileEdit re-scan badge */
.ce-afe {
  position: absolute;
  left: 5cqw; bottom: 3.5cqw;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 0.6cqw;
  padding: 0.75cqw 1.05cqw;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(var(--rgb-brand-1), 0.25);
  box-shadow: 0 1.2cqw 2.6cqw -1.6cqw rgba(var(--rgb-text), 0.4);
  font-size: 1cqw; font-weight: 600; color: var(--color-brand-1);
}
.ce-afe .lamp {
  width: 0.85cqw; height: 0.85cqw; border-radius: 50%;
  background: var(--color-brand-1);
  animation: ce-afe 6s ease-in-out infinite;
}
@keyframes ce-afe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-brand-1), 0.5); }
  8% { box-shadow: 0 0 0 0.9cqw rgba(var(--rgb-brand-1), 0); }
  50% { box-shadow: 0 0 0 0 rgba(var(--rgb-brand-1), 0); }
}

.ce-caption {
  margin: 1.6rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-alt);
}
.ce-caption b { color: var(--color-brand-1); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ce-scan, .ce-afe .lamp { animation: none; }
  .ce-finding { animation: none; opacity: 1; transform: none; }
  .ce-summary .caught { animation: none; opacity: 1; transform: rotate(-6deg); }
}

@media (max-width: 560px) {
  .ce-finding { width: 36cqw; right: 1.5cqw; }
  .ce-summary { font-size: 1.4cqw; }
}