/* Vibe Studio "Thinking" overlay — neural network animation + AI facts.
   Shown while a generation job is running. */

.vs-thinking {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 5;
  background:
    radial-gradient(circle at 30% 20%, rgba(120, 80, 255, 0.18), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(0, 200, 255, 0.15), transparent 40%),
    linear-gradient(180deg, rgba(10, 12, 24, 0.92), rgba(15, 18, 35, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e5e7ff;
  overflow: hidden;
  max-width: 100vw;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.vs-thinking.is-active { display: flex; flex-direction: column; }

.vs-thinking__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

.vs-thinking__content {
  position: relative;
  z-index: 2;
  margin: auto;
  width: min(560px, 92%);
  padding: clamp(18px, 4vw, 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 22px;
  background: rgba(20, 22, 40, 0.55);
  border: 1px solid rgba(140, 130, 220, 0.18);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.vs-thinking__title {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #a89bff, #5fd8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}

.vs-thinking__sub {
  margin: 0;
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  color: #a4a9c2;
  letter-spacing: 0.02em;
}

.vs-thinking__badge {
  display: inline-block;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(120, 80, 255, 0.18);
  border: 1px solid rgba(140, 130, 220, 0.3);
  color: #cdb9ff;
}

.vs-thinking__fact {
  position: relative;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  line-height: 1.55;
  color: #e5e7ff;
}
.vs-thinking__fact-inner {
  opacity: 0;
  transition: opacity 600ms ease;
}
.vs-thinking__fact-inner.is-visible { opacity: 1; }
.vs-thinking__fact em {
  font-style: normal;
  color: #5fd8ff;
  font-weight: 700;
}

.vs-thinking__progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.vs-thinking__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #8b91ab;
  letter-spacing: 0.04em;
}
.vs-thinking__progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(140, 130, 220, 0.12);
  overflow: hidden;
}
.vs-thinking__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7a6bff, #5fd8ff);
  box-shadow: 0 0 12px rgba(120, 100, 255, 0.5);
  transition: width 400ms ease;
  border-radius: 999px;
}

.vs-thinking__dots {
  display: inline-flex;
  gap: 4px;
  align-self: center;
  margin-top: -2px;
}
.vs-thinking__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a89bff;
  animation: vs-pulse 1.2s ease-in-out infinite;
}
.vs-thinking__dots span:nth-child(2) { animation-delay: 0.2s; }
.vs-thinking__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vs-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}