/* ===================== Cyber Chameleon Avatar =====================
   Flat vector cartoon portrait (PNG) inside .coach-avatar-panel.
   Cognitive state classes still toggle on the panel for review/coach feedback.

   Cognitive state classes (on .coach-avatar-panel):
     .state-idle       soft neon pulse on the frame
     .state-glitch     scanline / displacement (loading / PGN parse)
     .state-brilliant  neon flare (great move)
     .state-blunder    shake + crimson outline (blunder)

   Hardware-accelerated properties only: transform, opacity, filter. */
.coach-avatar-panel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
  background: #0b0b0c;
  outline: 1px solid rgba(0, 255, 102, 0.18);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.12), inset 0 0 18px rgba(0, 255, 102, 0.04);
  transition: filter 0.3s ease, box-shadow 0.3s ease, outline-color 0.3s ease;
}

.coach-panel-glass {
  display: none;
}

/* Neon ambient glow silhouette layer */
.coach-avatar-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: blur(6px);
  opacity: 0.35;
  background: radial-gradient(ellipse 90% 70% at 50% 60%, rgba(0, 255, 102, 0.18), transparent 70%);
  transition: opacity 0.4s ease;
  animation: glow-breathe 3.4s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.5; }
}

.coach-chameleon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: filter 0.35s ease;
}

.coach-chameleon-portrait,
.coach-avatar-panel--portrait .coach-chameleon {
  object-fit: cover;
  object-position: center 12%;
  filter: none;
}

/* ============================================================
   IDLE STATE - breathing + neon pulse + independent eye drift
   ============================================================ */
.chameleon-chassis {
  transform-origin: 50% 60%;
  animation: chameleon-breathe 3s ease-in-out infinite;
}

@keyframes chameleon-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-1px) scaleY(0.965); }
}

/* Continuous neon pulse - holographic accents */
.glowing-circuit {
  animation: neon-pulse 3s infinite ease-in-out;
}

@keyframes neon-pulse {
  0% {
    filter: drop-shadow(0 0 2px #00ff66) drop-shadow(0 0 4px rgba(0, 255, 102, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 5px #00ff66) drop-shadow(0 0 12px rgba(0, 255, 102, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 2px #00ff66) drop-shadow(0 0 4px rgba(0, 255, 102, 0.5));
  }
}

/* Neon zipper seams pulse like a heartbeat */
.chameleon-zipper {
  animation: neon-pulse 2s infinite ease-in-out;
}

/* Independent mechanical eyes - asynchronous micro-drift
   (left ev-tracker, right piece-tracker) */
.eye-left-mech {
  transform-origin: 36px 38px;
  animation: eye-drift-left 5s infinite ease-in-out;
}
.eye-right-mech {
  transform-origin: 64px 38px;
  animation: eye-drift-right 6s infinite ease-in-out;
}

@keyframes eye-drift-left {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-1px, 0.5px); }
  75%      { transform: translate(0.5px, -1px); }
}
@keyframes eye-drift-right {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(1px, -0.5px); }
  65%      { transform: translate(-0.5px, 1px); }
}

/* Inner ocular trackers - slow rotation; coach_chameleon.js takes over
   with setEvalLevel / setPieceTarget when tracking a real position. */
.eye-left-inner {
  transform-origin: 36px 38px;
  animation: eye-scan-left 4.2s ease-in-out infinite;
}
.eye-right-inner {
  transform-origin: 64px 38px;
  animation: eye-scan-right 3.4s ease-in-out infinite;
}

@keyframes eye-scan-left {
  0%, 100% { transform: rotate(-14deg); }
  25%      { transform: rotate(8deg); }
  50%      { transform: rotate(-4deg); }
  75%      { transform: rotate(14deg); }
}
@keyframes eye-scan-right {
  0%, 100% { transform: rotate(10deg); }
  30%      { transform: rotate(-8deg); }
  55%      { transform: rotate(6deg); }
  80%      { transform: rotate(-10deg); }
}

/* Matrix circuit inlays - heartbeat pulse */
.circuit-line {
  animation: circuit-pulse 2.4s ease-in-out infinite;
}
@keyframes circuit-pulse {
  0%, 100% { stroke-opacity: 0.5; }
  30%      { stroke-opacity: 1; }
  60%      { stroke-opacity: 0.35; }
  80%      { stroke-opacity: 0.7; }
}

.circuit-node {
  animation: none;
}
@keyframes node-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  40%      { opacity: 1;    transform: scale(1.4); }
  70%      { opacity: 0.4;  transform: scale(0.9); }
}

/* ============================================================
   AMBIENT GLITCH STATE (.state-glitch)
   scanline pan + horizontal displacement - loading anticipation
   ============================================================ */
.coach-avatar-panel.state-glitch .coach-chameleon .scanline-overlay {
  animation: scanline-mask 1.6s linear infinite;
}

@keyframes scanline-mask {
  0%   { transform: translateY(-100px); opacity: 1; }
  100% { transform: translateY(100px);  opacity: 1; }
}

.coach-avatar-panel.state-glitch .coach-chameleon .chameleon-chassis {
  animation: glitch-jitter 0.24s steps(3) infinite;
}

.coach-avatar-panel.state-glitch .coach-chameleon .jacket-torso {
  animation: glitch-jitter-2 0.3s steps(4) infinite;
}

.coach-avatar-panel.state-glitch .coach-chameleon .eye-left-inner,
.coach-avatar-panel.state-glitch .coach-chameleon .eye-right-inner,
.coach-avatar-panel.state-glitch .coach-chameleon .eye-left-mech,
.coach-avatar-panel.state-glitch .coach-chameleon .eye-right-mech {
  animation: glitch-blink 0.9s steps(2) infinite;
}

@keyframes glitch-jitter {
  0%   { transform: translateX(-1.2px); }
  33%  { transform: translateX(1.1px); }
  66%  { transform: translateX(-0.6px); }
  100% { transform: translateX(0.8px); }
}

@keyframes glitch-jitter-2 {
  0%   { transform: translateX(1px); }
  25%  { transform: translateX(-1.4px); }
  50%  { transform: translateX(0.5px); }
  75%  { transform: translateX(-0.8px); }
  100% { transform: translateX(1.1px); }
}

@keyframes glitch-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.coach-avatar-panel.state-glitch .coach-avatar-glow {
  opacity: 0.8;
  animation: glitch-glow-flicker 0.5s steps(4) infinite;
}

@keyframes glitch-glow-flicker {
  0%, 100% { opacity: 0.7; }
  25%      { opacity: 0.55; }
  50%      { opacity: 0.85; }
  75%      { opacity: 0.45; }
}

/* ============================================================
   BRILLIANT STATE (.state-brilliant)
   neon flare burst + binary matrix cascade - dopamine moment
   ============================================================ */
.coach-avatar-panel.state-brilliant .coach-chameleon {
  filter: drop-shadow(0 0 18px rgba(0, 255, 102, 0.7)) drop-shadow(0 0 44px rgba(0, 255, 102, 0.3));
}

.coach-avatar-panel.state-brilliant {
  box-shadow: 0 0 24px rgba(0, 255, 102, 0.35), inset 0 0 30px rgba(0, 255, 102, 0.1);
  outline-color: rgba(0, 255, 102, 0.55);
}

.coach-avatar-panel.state-brilliant .brilliant-flare {
  animation: brilliant-flare 1.4s ease-out forwards;
}

@keyframes brilliant-flare {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 0.6; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3); }
}

.coach-avatar-panel.state-brilliant .binary-overlay {
  animation: binary-fade 1.4s ease-out forwards;
}

.coach-avatar-panel.state-brilliant .binary-char {
  animation: binary-drop 1.2s ease-out forwards;
}

.coach-avatar-panel.state-brilliant .binary-char:nth-child(1) { animation-delay: 0.05s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(2) { animation-delay: 0.15s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(3) { animation-delay: 0.25s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(4) { animation-delay: 0.35s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(5) { animation-delay: 0.1s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(6) { animation-delay: 0.45s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(7) { animation-delay: 0.3s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(8) { animation-delay: 0.2s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(9) { animation-delay: 0.5s; }
.coach-avatar-panel.state-brilliant .binary-char:nth-child(10) { animation-delay: 0.4s; }

@keyframes binary-fade {
  0%   { opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes binary-drop {
  0%   { opacity: 0; transform: translateY(-8px); }
  40%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 0.8; transform: translateY(2px); }
  100% { opacity: 0; transform: translateY(6px); }
}

/* ============================================================
   SYSTEM ERROR BLUNDER STATE (.state-blunder)
   erratic shake + neon to crimson warning
   ============================================================ */
.coach-avatar-panel.state-blunder .coach-chameleon {
  animation: blunder-shake 0.08s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 51, 51, 0.55)) drop-shadow(0 0 24px rgba(255, 51, 51, 0.25));
}

@keyframes blunder-shake {
  0%   { transform: translateX(-2px) translateY(1px); }
  25%  { transform: translateX(3px) translateY(-1px); }
  50%  { transform: translateX(-2.5px) translateY(0.5px); }
  75%  { transform: translateX(2.5px) translateY(-0.5px); }
  100% { transform: translateX(-1.5px) translateY(1px); }
}

/* All neon-green paths flash to warning crimson */
.coach-avatar-panel.state-blunder .chameleon-zipper,
.coach-avatar-panel.state-blunder .glowing-circuit,
.coach-avatar-panel.state-blunder .chameleon-head,
.coach-avatar-panel.state-blunder .circuit-line,
.coach-avatar-panel.state-blunder .circuit-node,
.coach-avatar-panel.state-blunder .eye-outline,
.coach-avatar-panel.state-blunder .eye-iris,
.coach-avatar-panel.state-blunder .eye-pupil,
.coach-avatar-panel.state-blunder .eye-reticle,
.coach-avatar-panel.state-blunder .eye-tick,
.coach-avatar-panel.state-blunder .jacket-collar { animation: blunder-flash 0.4s ease-in-out infinite; }

@keyframes blunder-flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.coach-avatar-panel.state-blunder .blunder-flash {
  animation: blunder-flash-pulse 0.6s ease-out infinite;
}

@keyframes blunder-flash-pulse {
  0%   { opacity: 0; }
  40%  { opacity: 0.9; }
  100% { opacity: 0; }
}

.coach-avatar-panel.state-blunder .coach-panel-glass {
  background: linear-gradient(135deg, rgba(255, 51, 51, 0.08), transparent 55%);
}

/* Transitions out of blowup states - smooth teardown */
.coach-avatar-panel.state-blunder .coach-chameleon,
.coach-avatar-panel.state-brilliant .coach-chameleon {
  transition: filter 0.4s ease;
}

/* ============================================================
   REDUCED MOTION - respect system preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .coach-avatar-panel .coach-chameleon,
  .coach-avatar-panel .coach-chameleon *,
  .coach-avatar-panel .coach-avatar-glow {
    animation: none !important;
    transition: none !important;
  }
  /* Static state cues - clear feedback without motion. */
  .coach-avatar-panel.state-glitch .coach-chameleon .scanline-overlay { opacity: 1; }
  .coach-avatar-panel.state-glitch .coach-chameleon .chameleon-chassis { transform: translateX(1px); }
  .coach-avatar-panel.state-brilliant .coach-chameleon { filter: drop-shadow(0 0 16px rgba(0, 255, 102, 0.7)); }
  .coach-avatar-panel.state-brilliant .brilliant-flare { opacity: 0.65; }
  .coach-avatar-panel.state-blunder .coach-chameleon { transform: translateX(2px); }
  .coach-avatar-panel.state-blunder .coach-panel-glass {
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.16), transparent 55%);
  }
}

/* ============================================================
   INTEGRATION FIXES - panel sizing, legacy overrides, layering
   ============================================================ */
/* The panel div inherits the legacy knight sizing/border rules via the
   .coach-avatar / .review-coach-avatar classes (including the later gold
   gradient circle override). The chameleon owns this panel: rounded square,
   obsidian background, neon outline - never the circular gold disc. */
.coach-avatar-panel.coach-avatar.review-coach-avatar,
body.review-page .review-coach-avatar.coach-avatar-panel {
  border: none;
  border-radius: 12px;
  padding: 0;
  background: rgba(11, 11, 12, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.12), inset 0 0 18px rgba(0, 255, 102, 0.04);
  box-sizing: border-box;
  animation: none;
  width: 56px;
  height: 56px;
}

@media (max-width: 480px) {
  .coach-avatar-panel.coach-avatar { width: 48px; height: 48px; }
}

@media (min-width: 1300px) {
  body.review-page .review-coach-avatar.coach-avatar-panel { width: 76px; height: 76px; }
}