/* ============================================
   LINUS — Orb Avatar & Voice UI
   States: idle, listening, thinking, speaking
   ============================================ */

/* =============================================
   ORB CONTAINER
   ============================================= */
.linus-orb-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  z-index: var(--z-linus);
}

/* Canvas wrapper — holds the WebGL/Canvas orb */
.linus-orb__canvas-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}

.linus-orb__canvas-wrap canvas {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
}

/* Ambient glow behind orb */
.linus-orb__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle,
    var(--color-linus-glow) 0%,
    transparent 70%
  );
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  animation: orbGlow 4s ease-in-out infinite;
}

/* Orb ring decoration */
.linus-orb__ring {
  position: absolute;
  width: 176px;
  height: 176px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(184, 169, 201, 0.2);
  pointer-events: none;
  transition: border-color var(--transition-slow), transform var(--transition-slow);
}

/* =============================================
   ORB STATES
   ============================================= */

/* -- IDLE: gentle breathing pulse -- */
.linus--idle .linus-orb__canvas-wrap {
  box-shadow: var(--shadow-glow);
  animation: orbPulse 4s ease-in-out infinite;
}

.linus--idle .linus-orb__glow {
  opacity: 0.4;
}

/* -- LISTENING: expanded glow, ring pulses -- */
.linus--listening .linus-orb__canvas-wrap {
  box-shadow: var(--shadow-glow-active);
  transform: scale(1.05);
  animation: none;
}

.linus--listening .linus-orb__glow {
  opacity: 0.8;
  transform: scale(1.2);
  animation: orbGlow 2s ease-in-out infinite;
}

.linus--listening .linus-orb__ring {
  border-color: rgba(184, 169, 201, 0.5);
  animation: orbPulse 2s ease-in-out infinite;
}

/* -- THINKING: rapid subtle pulse, spinning ring feel -- */
.linus--thinking .linus-orb__canvas-wrap {
  box-shadow: 0 0 50px rgba(124, 156, 191, 0.4);
  animation: orbPulse 1.5s ease-in-out infinite;
}

.linus--thinking .linus-orb__glow {
  opacity: 0.6;
  background: radial-gradient(
    circle,
    rgba(124, 156, 191, 0.4) 0%,
    transparent 70%
  );
  animation: orbGlow 1.5s ease-in-out infinite;
}

.linus--thinking .linus-orb__ring {
  border-color: rgba(124, 156, 191, 0.4);
  animation: thinkingSpin 2s linear infinite;
  border-style: dashed;
  border-width: 2px;
}

/* -- SPEAKING: warm coral glow, confident scale -- */
.linus--speaking .linus-orb__canvas-wrap {
  box-shadow: 0 0 50px rgba(232, 180, 184, 0.4);
  transform: scale(1.03);
  animation: speakingPulse 1s ease-in-out infinite;
}

.linus--speaking .linus-orb__glow {
  opacity: 0.7;
  background: radial-gradient(
    circle,
    rgba(232, 180, 184, 0.35) 0%,
    rgba(184, 169, 201, 0.2) 50%,
    transparent 70%
  );
}

.linus--speaking .linus-orb__ring {
  border-color: rgba(232, 180, 184, 0.4);
  transform: scale(1.05);
}

/* =============================================
   MIC BUTTON
   ============================================= */
.linus-mic-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: var(--space-lg);
  z-index: var(--z-linus);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-spring);
  -webkit-tap-highlight-color: transparent;
}

.linus-mic-btn__icon {
  font-size: 24px;
  color: var(--color-text-secondary);
  transition: color var(--transition-normal), transform var(--transition-normal);
}

.linus-mic-btn:active {
  transform: scale(0.92);
}

/* Active / recording state */
.linus-mic-btn.active {
  background: linear-gradient(135deg, var(--color-linus-1), var(--color-linus-3));
  border-color: transparent;
  box-shadow: var(--shadow-md), 0 0 20px rgba(184, 169, 201, 0.3);
  animation: micPulse 1.5s ease-in-out infinite;
}

.linus-mic-btn.active .linus-mic-btn__icon {
  color: var(--color-text-inverse);
  transform: scale(1.1);
}

/* Pulse rings when active */
.linus-mic-btn::before,
.linus-mic-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-linus-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.linus-mic-btn.active::before {
  opacity: 0.4;
  animation: micRing 2s ease-out infinite;
}

.linus-mic-btn.active::after {
  opacity: 0.2;
  animation: micRing 2s ease-out 0.6s infinite;
}

/* =============================================
   TRANSCRIPT OVERLAY
   ============================================= */
.linus-transcript {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: var(--space-sm) var(--space-lg);
  background: rgba(45, 49, 66, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-inverse);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal),
    transform var(--transition-normal);
  pointer-events: none;
  z-index: var(--z-linus);
}

.linus-transcript.active {
  opacity: 1;
  visibility: visible;
  animation: transcriptFade 300ms ease forwards;
}

/* =============================================
   RESPONSE BUBBLE
   ============================================= */
.linus-response {
  width: 100%;
  max-width: 320px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.linus-response.active {
  opacity: 1;
  transform: translateY(0);
  animation: responseSlide 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Top arrow pointing to orb */
.linus-response::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-left: 1px solid var(--color-border-light);
  border-top: 1px solid var(--color-border-light);
}

/* Typing indicator dots */
.linus-response__typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: var(--space-xs) 0;
}

.linus-response__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-linus-1);
  animation: typingDot 1.4s ease-in-out infinite;
}

.linus-response__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.linus-response__dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* =============================================
   MINI ORB (floating, non-home views)
   ============================================= */
.linus-mini {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--space-lg));
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-linus-1), var(--color-linus-2), var(--color-linus-3));
  background-size: 200% 200%;
  box-shadow: var(--shadow-md), 0 0 20px var(--color-linus-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-linus);
  animation: miniOrbGradient 6s ease infinite;
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-normal);
  -webkit-tap-highlight-color: transparent;
}

.linus-mini:active {
  transform: scale(0.88);
}

.linus-mini:hover {
  box-shadow: var(--shadow-lg), 0 0 30px var(--color-linus-glow);
}

.linus-mini__icon {
  font-size: 20px;
  color: var(--color-text-inverse);
}

/* Subtle notification dot on mini orb */
.linus-mini__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  border: 2px solid var(--bg-primary);
  animation: miniOrbBadgePulse 2s ease-in-out infinite;
}

/* =============================================
   KEYFRAMES
   ============================================= */
@keyframes orbPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes orbGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes micPulse {
  0%, 100% {
    box-shadow: var(--shadow-md), 0 0 20px rgba(184, 169, 201, 0.3);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 0 30px rgba(184, 169, 201, 0.5);
  }
}

@keyframes micRing {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes transcriptFade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes responseSlide {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes speakingPulse {
  0%, 100% {
    transform: scale(1.03);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes thinkingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes miniOrbGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes miniOrbBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}