/* Chat Widget — Nina Learns Vibe Coding */
/* Spec: docs/superpowers/specs/2026-05-06-chat-widget-design.md */

:root {
  --nlvc-deep-blue: #061018;
}

#chat-widget-container.chat-widget-container {
  position: relative;
  align-self: flex-start;
  margin-top: 3rem;
  z-index: 1000;
  will-change: transform;
  animation: nlvc-chat-bounce 3s ease-in-out infinite;
}
/* When the chat is expanded, stop the bouncing motion */
#chat-widget-container.chat-widget-container:has(.chat-invite.expanded) {
  animation: none;
}
/* Gentle bounce — same vibe as Pablo */
@keyframes nlvc-chat-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Hover tooltip — appears INSIDE the ball on hover */
.chat-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(6, 16, 24, 0.78);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--font-mono, system-ui), sans-serif;
  white-space: nowrap;
  border: 1px solid rgba(0,212,255,0.35);
  box-shadow: 0 4px 24px rgba(0,212,255,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 5;
}
#chat-widget-container.chat-widget-container:hover .chat-tooltip {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#chat-widget-container.chat-widget-container:has(.chat-invite.expanded) .chat-tooltip {
  display: none;
}

/* Mobile — keep widget reachable but a touch smaller */
@media (max-width: 600px) {
  #chat-widget-container.chat-widget-container {
    margin-top: 2rem;
  }
}

/* THE CARD — idle = round circle, expanded = rounded rectangle */
.chat-invite {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,250,210,0.7) 0%, rgba(180,235,255,0.6) 18%, transparent 45%),
    radial-gradient(circle at 50% 30%, rgba(120,210,255,0.85) 0%, rgba(40,140,200,0.6) 35%, rgba(8,40,80,0.95) 75%, #020a14 100%);
  box-shadow: 0 0 80px rgba(0,212,255,0.3), inset 0 -20px 60px rgba(2,10,20,0.5);
  transition:
    width 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
    height 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
    border-radius 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid rgba(0,212,255,0.25);
  display: flex;
  flex-direction: column;
}
.chat-invite:not(.expanded):hover {
  transform: translateY(-4px);
  box-shadow: 0 0 110px rgba(0,212,255,0.5), inset 0 -20px 60px rgba(2,10,20,0.5);
}
.chat-invite:focus-visible {
  outline: 2px solid var(--accent, #00d4ff);
  outline-offset: 6px;
}
.chat-invite.expanded {
  width: 480px;
  height: 480px;
  border-radius: 50%;
  cursor: default;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 80px rgba(0,212,255,0.3);
}

/* Underwater scene (always visible at top) */
.chat-scene {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.chat-invite.expanded .chat-scene {
  height: 150px;
}

/* The sun — diffuse glow from above, like sunlight through water surface */
.chat-scene::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  width: 140px;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,
    rgba(255,255,250,1) 0%,
    rgba(255,245,200,0.85) 15%,
    rgba(200,235,255,0.7) 35%,
    rgba(120,200,240,0.4) 60%,
    transparent 85%);
  border-radius: 50%;
  animation: nlvc-sun-breath 5s ease-in-out infinite;
  filter: blur(8px);
  z-index: 3;
  box-shadow: 0 0 80px rgba(255,250,220,0.6), 0 0 140px rgba(0,212,255,0.4);
  mix-blend-mode: screen;
}
@keyframes nlvc-sun-breath {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
  50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

/* Light rays piercing down through water */
.chat-scene::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translateX(-50%);
  background: conic-gradient(
    from 88deg at 50% 0%,
    transparent 0deg,
    rgba(255,255,240,0.55) 6deg,
    rgba(200,240,255,0.7) 11deg,
    rgba(0,212,255,0.45) 18deg,
    transparent 30deg,
    rgba(255,255,240,0.4) 48deg,
    rgba(200,240,255,0.6) 56deg,
    rgba(0,212,255,0.35) 66deg,
    transparent 80deg,
    rgba(255,255,240,0.6) 102deg,
    rgba(200,240,255,0.75) 110deg,
    rgba(0,212,255,0.5) 120deg,
    transparent 134deg,
    rgba(255,255,240,0.45) 150deg,
    rgba(200,240,255,0.6) 158deg,
    rgba(0,212,255,0.35) 168deg,
    transparent 184deg
  );
  pointer-events: none;
  animation: nlvc-rays-shimmer 6s ease-in-out infinite;
  z-index: 2;
  mix-blend-mode: screen;
  filter: blur(2px);
}
@keyframes nlvc-rays-shimmer {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* Caustic waves — full coverage, dancing light patches across the whole scene */
.caustic-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}
.caustic-waves::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 60px 14px at 18% 22%, rgba(255,255,240,0.55), transparent 65%),
    radial-gradient(ellipse 90px 20px at 42% 38%, rgba(220,245,255,0.5), transparent 70%),
    radial-gradient(ellipse 50px 12px at 72% 28%, rgba(255,255,240,0.45), transparent 65%),
    radial-gradient(ellipse 110px 22px at 28% 55%, rgba(200,240,255,0.5), transparent 70%),
    radial-gradient(ellipse 70px 16px at 60% 60%, rgba(255,255,240,0.55), transparent 65%),
    radial-gradient(ellipse 80px 18px at 82% 70%, rgba(220,245,255,0.5), transparent 70%),
    radial-gradient(ellipse 100px 20px at 35% 80%, rgba(255,255,240,0.5), transparent 70%),
    radial-gradient(ellipse 60px 14px at 70% 88%, rgba(200,240,255,0.55), transparent 65%);
  animation: nlvc-caustic-drift 18s linear infinite;
  filter: blur(1.5px);
}
.caustic-waves::after {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 70px 16px at 25% 35%, rgba(255,255,240,0.45), transparent 70%),
    radial-gradient(ellipse 50px 12px at 55% 25%, rgba(220,245,255,0.5), transparent 65%),
    radial-gradient(ellipse 90px 18px at 75% 45%, rgba(255,255,240,0.4), transparent 70%),
    radial-gradient(ellipse 60px 14px at 38% 65%, rgba(200,240,255,0.5), transparent 70%),
    radial-gradient(ellipse 80px 16px at 68% 78%, rgba(255,255,240,0.45), transparent 70%),
    radial-gradient(ellipse 50px 12px at 22% 90%, rgba(220,245,255,0.4), transparent 65%);
  animation: nlvc-caustic-drift 26s linear infinite reverse;
  filter: blur(2px);
  opacity: 0.85;
}
@keyframes nlvc-caustic-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8%, -3%); }
  100% { transform: translate(0, 0); }
}

/* Close button (visible only when expanded) */
.chat-close-btn {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8,12,20,0.7);
  border: 1px solid rgba(0,212,255,0.25);
  color: var(--accent, #00d4ff);
  cursor: pointer;
  z-index: 10;
  font-size: 1.1rem;
  line-height: 1;
  font-family: var(--font-mono, monospace);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.chat-invite.expanded .chat-close-btn {
  opacity: 1;
  pointer-events: all;
}
.chat-close-btn:hover {
  background: rgba(0,212,255,0.2);
  transform: rotate(90deg);
}

/* Body — hidden when idle */
.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--surface, #0d1320);
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  pointer-events: none;
}
.chat-invite.expanded .chat-body {
  opacity: 1;
  pointer-events: all;
}

/* Stages (consent / email / code / chat) */
.chat-stage {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.chat-stage.active {
  display: flex;
}

.chat-consent,
.chat-email-form,
.chat-code-form {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.chat-consent p {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted, #6b7fa3);
  margin: 0;
}
.chat-consent a {
  color: var(--accent, #00d4ff);
}
.chat-consent button,
.chat-email-form button,
.chat-code-form button {
  background: var(--accent, #00d4ff);
  color: var(--bg, #080c14);
  border: 0;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: opacity 0.2s, transform 0.1s;
}
.chat-consent button:hover,
.chat-email-form button:hover,
.chat-code-form button:hover {
  opacity: 0.85;
}
.chat-email-form input,
.chat-code-form input {
  background: var(--card, #111827);
  border: 1px solid var(--border, #1e2d45);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  color: var(--text, #e8f0fe);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.chat-email-form input:focus,
.chat-code-form input:focus {
  border-color: var(--accent, #00d4ff);
}
.chat-email-form label,
.chat-code-form label {
  font-size: 0.75rem;
  color: var(--muted, #6b7fa3);
  letter-spacing: 0.05em;
}

.chat-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

.chat-error {
  color: #ff6b9d;
  font-size: 0.78rem;
  min-height: 1em;
}

/* Chat stage */
.chat-stage[data-stage="chat"] {
  display: none;
}
.chat-stage[data-stage="chat"].active {
  display: flex;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.chat-bubble {
  max-width: 85%;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.55;
  animation: nlvc-bubble-in 0.3s ease-out;
  word-wrap: break-word;
}
@keyframes nlvc-bubble-in {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-bubble.bot {
  align-self: flex-start;
  background: var(--card, #111827);
  color: var(--text, #e8f0fe);
  border-bottom-left-radius: 4px;
  position: relative;
  padding-left: 2.6rem;
  border: 1px solid var(--border, #1e2d45);
}
.chat-bubble.bot::before {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 0.65rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%,
    rgba(255,255,255,0.95) 0%,
    rgba(160,230,255,0.8) 30%,
    rgba(0,212,255,0.6) 60%,
    var(--nlvc-deep-blue) 100%);
  box-shadow: 0 0 8px rgba(0,212,255,0.5), inset 0 0 4px rgba(255,255,255,0.3);
}

.chat-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent, #00d4ff), #4a8fb5);
  color: var(--nlvc-deep-blue);
  border-bottom-right-radius: 4px;
  font-weight: 500;
}

.chat-input-area {
  padding: 0.9rem 1rem 0.4rem;
  border-top: 1px solid var(--border, #1e2d45);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.chat-input {
  flex: 1;
  background: var(--card, #111827);
  border: 1px solid var(--border, #1e2d45);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  color: var(--text, #e8f0fe);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--accent, #00d4ff); }

.chat-send-btn {
  background: var(--accent, #00d4ff);
  color: var(--bg, #080c14);
  border: none;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  transition: opacity 0.2s, transform 0.1s;
}
.chat-send-btn:hover { opacity: 0.85; }
.chat-send-btn:active { transform: scale(0.96); }

.chat-disclaimer {
  text-align: center;
  color: var(--muted, #6b7fa3);
  font-size: 0.7rem;
  padding: 0.4rem 1rem 0.7rem;
  letter-spacing: 0.03em;
}

/* Mobile */
@media (max-width: 600px) {
  .chat-invite {
    width: 240px;
    height: 240px;
  }
  .chat-invite.expanded {
    width: min(calc(100vw - 2rem), calc(100vh - 4rem), 460px);
    height: min(calc(100vw - 2rem), calc(100vh - 4rem), 460px);
    border-radius: 50%;
  }
}