/* PixelAgent v2 — Pokemon-style pixel mascot */

/* Scene container */
.pa-scene {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  position: relative;
  padding: 16px 8px 32px;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 200px;
}

/* Desk per agent */
.pa-desk-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-2, #1f1f23);
  border: 1px solid var(--border, #3f3f46);
  min-width: 140px;
  transition: all 0.3s var(--ease-spring, ease);
}

.pa-desk-agent:hover {
  transform: translateY(-2px);
  border-color: var(--brand-indigo-400, #818cf8);
}

/* Agent name label */
.pa-agent-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-1, #fff);
  text-align: center;
  margin-top: 4px;
}

/* Character container */
.pa-character-container {
  position: relative;
  width: 96px;
  height: 96px;
}

/* Wrapper for the new v2 character */
.pa-character-v2 {
  position: relative;
  width: 96px;
  height: 96px;
  transition: transform 0.3s var(--ease-spring, ease), filter 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* State-specific transforms (CSS-driven motion in addition to sprite frames) */
.pa-character-v2[data-state="idle"] {
  animation: pa-breathe 2.5s ease-in-out infinite;
}
.pa-character-v2[data-state="think"] {
  animation: pa-tilt 3s ease-in-out infinite;
}
.pa-character-v2[data-state="type"] {
  animation: pa-bounce-fast 0.4s ease-in-out infinite;
}
.pa-character-v2[data-state="build"] {
  animation: pa-bounce 0.5s ease-in-out infinite;
}
.pa-character-v2[data-state="error"] {
  animation: pa-shake 0.15s linear infinite;
}
.pa-character-v2[data-state="success"] {
  animation: pa-jump 0.8s ease-out;
}
.pa-character-v2[data-state="sleep"] {
  animation: pa-breathe-slow 4s ease-in-out infinite;
  opacity: 0.75;
  filter: saturate(0.6) brightness(0.85);
}
.pa-character-v2[data-state="walk"] {
  animation: pa-walk-bob 0.4s ease-in-out infinite;
}
.pa-character-v2[data-state="wave"] {
  animation: pa-wave-body 0.4s ease-in-out 4;
}
.pa-character-v2[data-state="surprised"] {
  animation: pa-surprised-pop 0.3s ease-out;
}
.pa-character-v2[data-state="sad"] {
  animation: pa-slump 4s ease-in-out infinite;
  opacity: 0.85;
}
.pa-character-v2[data-state="happy"] {
  animation: pa-bounce 0.6s ease-in-out infinite;
}
.pa-character-v2[data-state="laugh"] {
  animation: pa-laugh-shake 0.25s ease-in-out infinite;
}
.pa-character-v2[data-state="shrug"] {
  animation: pa-shrug 0.5s ease-out;
}
.pa-character-v2[data-state="hi"] {
  animation: pa-wave-body 0.3s ease-in-out 3;
}
/* v10 new states */
.pa-character-v2[data-state="confused"] {
  animation: pa-tilt 1.5s ease-in-out infinite;
}
.pa-character-v2[data-state="excited"] {
  animation: pa-bounce 0.25s ease-in-out infinite;
  filter: brightness(1.15) saturate(1.3);
}
.pa-character-v2[data-state="break"] {
  animation: pa-breathe-slow 3s ease-in-out infinite;
  opacity: 0.9;
}
.pa-character-v2[data-state="waiting"] {
  animation: pa-waiting-tap 1.5s ease-in-out infinite;
}
.pa-character-v2[data-state="celebrate"] {
  animation: pa-jump 0.9s ease-out;
  filter: brightness(1.2);
}
@keyframes pa-waiting-tap {
  0%, 90%, 100% { transform: translateY(0); }
  93% { transform: translateY(-1px) rotate(0.5deg); }
  96% { transform: translateY(0) rotate(-0.5deg); }
}
.pa-character-v2[data-state="offline"] {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* Click feedback */
.pa-character-v2:active {
  transform: scale(0.95);
}

/* === Keyframes === */
@keyframes pa-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}
@keyframes pa-breathe-slow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.01); }
}
@keyframes pa-tilt {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes pa-bounce-fast {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
@keyframes pa-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes pa-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
@keyframes pa-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-12px) scale(1.05); }
  60% { transform: translateY(0) scale(1); }
  80% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes pa-walk-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes pa-wave-body {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-3deg); }
}
@keyframes pa-surprised-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes pa-slump {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(1px) rotate(-2deg); }
}
@keyframes pa-laugh-shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2px) rotate(-2deg); }
  75% { transform: translateY(0) rotate(2deg); }
}
@keyframes pa-shrug {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Canvas pixelated rendering */
.pa-character-v2 canvas {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Status bubble below character */
.pa-status-v2 {
  font-weight: 500;
}
/* State-specific colors using CSS vars with sensible defaults */
:root {
  --pa-error-bg: #7f1d1d; --pa-error-fg: #fecaca; --pa-error-border: #ef4444;
  --pa-success-bg: #064e3b; --pa-success-fg: #bbf7d0; --pa-success-border: #10b981;
  --pa-speech-bg: #fef3c7; --pa-speech-fg: #92400e; --pa-speech-border: #fbbf24;
}
/* Light theme overrides — softer pastels for daytime readability */
html.light {
  --pa-error-bg: #fee2e2; --pa-error-fg: #991b1b; --pa-error-border: #ef4444;
  --pa-success-bg: #d1fae5; --pa-success-fg: #065f46; --pa-success-border: #10b981;
  --pa-speech-bg: #fef3c7; --pa-speech-fg: #713f12; --pa-speech-border: #fbbf24;
}
/* When parent is in error state, style the status bubble red */
.pa-character-v2[data-state="error"] .pa-status-v2 {
  background: var(--pa-error-bg) !important;
  color: var(--pa-error-fg) !important;
  border-color: var(--pa-error-border) !important;
}
.pa-character-v2[data-state="success"] .pa-status-v2 {
  background: var(--pa-success-bg) !important;
  color: var(--pa-success-fg) !important;
  border-color: var(--pa-success-border) !important;
}

/* Speech bubble (above) */
.pa-speech-v2 {
  pointer-events: none;
}

/* Tooltip (hover) */
.pa-tooltip-v2 {
  font-family: monospace;
}

/* Glow effect when active */
.pa-character-v2[data-state="type"]::before,
.pa-character-v2[data-state="build"]::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.15;
  z-index: -1;
  animation: pa-pulse-glow 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pa-pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.1); opacity: 0.2; }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .pa-scene {
    padding: 12px 4px 24px;
    gap: 4px;
  }
  .pa-desk-agent {
    padding: 12px 8px;
    min-width: 100px;
  }
  .pa-character-v2 {
    width: 80px;
    height: 80px;
  }
  .pa-character-v2 canvas {
    /* L3: was width/height !important which broke pixel rendering */
  }
}