/* FlipScout on-demand neural scan overlay */
.fs-photo-scan-wrap {
  position: relative;
  overflow: hidden;
}

.fs-neural-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.55s ease;
}

.fs-neural-scan--fade {
  opacity: 0;
}

.fs-neural-scan__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

.fs-neural-scan__reticle {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 197, 94, 0.2),
    #22c55e,
    rgba(134, 239, 172, 1),
    #22c55e,
    rgba(34, 197, 94, 0.2),
    transparent
  );
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.9),
    0 0 28px rgba(34, 197, 94, 0.45);
  animation: fs-reticle-sweep 2.4s ease-in-out infinite;
}

.fs-neural-scan__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(34, 197, 94, 0.12) 0%,
    transparent 70%
  );
  animation: fs-scan-pulse 2s ease-in-out infinite;
}

@keyframes fs-reticle-sweep {
  0% { top: 6%; opacity: 0.4; }
  50% { top: 88%; opacity: 1; }
  100% { top: 6%; opacity: 0.4; }
}

@keyframes fs-scan-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

.fs-thought-stream {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(8, 12, 24, 0.82);
  border: 1px solid rgba(34, 197, 94, 0.35);
  backdrop-filter: blur(8px);
  font-size: 0.8rem;
  color: #bbf7d0;
  transition: opacity 0.55s ease;
}

.fs-thought-stream--fade {
  opacity: 0;
}

.fs-thought-stream__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: fs-dot-pulse 1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes fs-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.65; }
}

.fs-inspector-reveal {
  animation: fs-inspector-fade 0.85s ease forwards;
}

@keyframes fs-inspector-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.15);
  }
}

/* Command Center modal variants */
.cc-modal-hero.fs-photo-scan-wrap .fs-thought-stream {
  bottom: 16px;
}

.cc-inspector-notes.fs-inspector-reveal,
.cc-inspector-panel.fs-inspector-reveal {
  border-color: rgba(34, 197, 94, 0.35);
}

/* Deal Sheet — Run AI Neural Scan CTA */
.fs-neural-scan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0c1222;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 45%, #16a34a 100%);
  border: 1px solid rgba(134, 239, 172, 0.45);
  border-radius: 1rem;
  cursor: pointer;
  box-shadow:
    0 0 22px rgba(34, 197, 94, 0.55),
    0 0 48px rgba(34, 197, 94, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: fs-cta-glow 2.5s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.fs-neural-scan-cta:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow:
    0 0 28px rgba(34, 197, 94, 0.7),
    0 0 56px rgba(34, 197, 94, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.fs-neural-scan-cta--active,
.fs-neural-scan-cta:disabled {
  opacity: 0.88;
  cursor: wait;
  animation: none;
}

@keyframes fs-cta-glow {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(34, 197, 94, 0.45),
      0 0 40px rgba(34, 197, 94, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 0 32px rgba(34, 197, 94, 0.75),
      0 0 64px rgba(34, 197, 94, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

.fs-reno-reveal {
  animation: fs-inspector-fade 0.85s ease forwards;
}

.fs-math-fade-out {
  opacity: 0.35;
  transition: opacity 0.28s ease;
}
