/* ============================================
   Pixel Agent — 8-bit Robot Assistant Widget
   ============================================ */

.px-agent {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
  pointer-events: none;
  animation: px-wander 24s linear infinite alternate;
  will-change: transform;
}

.px-agent.px-agent-hidden {
  display: none;
}

.px-agent::before {
  content: "...";
  position: absolute;
  top: -22px;
  left: 50%;
  display: none;
  min-width: 28px;
  padding: 2px 7px 3px;
  border: 2px solid #ffaa00;
  background: #070c1a;
  color: #ffaa00;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 3px 3px 0 #442200;
  animation: px-thought-dots 1.2s steps(3, end) infinite;
}

.px-agent::after {
  content: "";
  position: absolute;
  top: 1px;
  left: calc(50% - 5px);
  display: none;
  width: 6px;
  height: 6px;
  border: 2px solid #ffaa00;
  background: #070c1a;
  box-shadow: 10px 8px 0 -2px #070c1a, 10px 8px 0 0 #ffaa00;
}

.px-agent[data-px-state="idle"]::before,
.px-agent[data-px-state="idle"]::after,
.px-agent[data-px-state="thinking"]::before,
.px-agent[data-px-state="thinking"]::after {
  display: block;
}

/* ---------- Speech Bubble ---------- */
.px-bubble {
  position: relative;
  background: #070c1a;
  color: #00ffaa;
  border: 2px solid #00ffaa;
  padding: 6px 10px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  line-height: 1.5;
  max-width: 180px;
  text-align: center;
  white-space: pre-wrap;
  box-shadow: 3px 3px 0 #003322;
}

.px-bubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 10px solid #00ffaa;
}

.px-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 8px solid #070c1a;
}

.px-bubble.hidden { display: none; }

/* ---------- Sprite ---------- */
.px-sprite {
  display: flex;
  align-items: center;
  justify-content: center;
}

.px-robot-svg {
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(61, 126, 248, 0.55));
}

/* ---------- SVG color classes ---------- */
.px-body    { fill: #3d7ef8; }
.px-dark    { fill: #080d1c; }
.px-eye     { fill: #00e5cc; }
.px-mouth   { fill: #00ffaa; }
.px-antenna { fill: #5599ff; }
.px-led-1,
.px-led-2   { fill: #1a1a00; }

/* ---------- State: idle — gentle float ---------- */
[data-px-state="idle"] .px-sprite {
  animation: px-walk-bob 0.58s steps(2, end) infinite;
}
[data-px-state="idle"] .px-antenna {
  animation: px-antenna-pulse 2.4s ease-in-out infinite;
}

/* ---------- State: loading — working bounce ---------- */
[data-px-state="loading"] .px-sprite {
  animation: px-work 0.45s steps(2, end) infinite;
}
[data-px-state="loading"] .px-eye {
  animation: px-eye-blink 0.7s steps(1, end) infinite;
}
[data-px-state="loading"] .px-led-1 {
  fill: #ffee00;
  animation: px-led-alt 0.45s steps(1, end) infinite;
}
[data-px-state="loading"] .px-led-2 {
  fill: #1a1a00;
  animation: px-led-alt 0.45s steps(1, end) infinite reverse;
}
[data-px-state="loading"] .px-bubble {
  color: #ffee00;
  border-color: #ffee00;
  box-shadow: 3px 3px 0 #443300;
}
[data-px-state="loading"] .px-bubble::before { border-top-color: #ffee00; }
[data-px-state="loading"] .px-bubble::after  { border-top-color: #070c1a; }

/* ---------- State: thinking — slow sway ---------- */
[data-px-state="thinking"] .px-sprite {
  animation: px-walk-think 1.2s ease-in-out infinite;
}
[data-px-state="thinking"] .px-eye  { fill: #ffaa00; }
[data-px-state="thinking"] .px-led-1 { fill: #ffaa00; }
[data-px-state="thinking"] .px-bubble {
  color: #ffaa00;
  border-color: #ffaa00;
  box-shadow: 3px 3px 0 #442200;
}
[data-px-state="thinking"] .px-bubble::before { border-top-color: #ffaa00; }
[data-px-state="thinking"] .px-bubble::after  { border-top-color: #070c1a; }

/* ---------- State: success — jump ---------- */
[data-px-state="success"] .px-sprite {
  animation: px-jump 0.5s ease-out 3;
}
[data-px-state="success"] .px-eye   { fill: #00ff88; }
[data-px-state="success"] .px-led-1,
[data-px-state="success"] .px-led-2 { fill: #00ff88; }
[data-px-state="success"] .px-bubble {
  color: #00ff88;
  border-color: #00ff88;
  box-shadow: 3px 3px 0 #003322;
}
[data-px-state="success"] .px-bubble::before { border-top-color: #00ff88; }
[data-px-state="success"] .px-bubble::after  { border-top-color: #070c1a; }

/* ---------- State: error — shake ---------- */
[data-px-state="error"] .px-sprite {
  animation: px-shake 0.3s steps(4, end) 3;
}
[data-px-state="error"] .px-eye   { fill: #ff3344; }
[data-px-state="error"] .px-led-1,
[data-px-state="error"] .px-led-2 { fill: #ff3344; }
[data-px-state="error"] .px-bubble {
  color: #ff3344;
  border-color: #ff3344;
  box-shadow: 3px 3px 0 #440011;
}
[data-px-state="error"] .px-bubble::before { border-top-color: #ff3344; }
[data-px-state="error"] .px-bubble::after  { border-top-color: #070c1a; }

/* ---------- Keyframes ---------- */
@keyframes px-wander {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100vw + 148px)); }
}

@keyframes px-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@keyframes px-walk-bob {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes px-walk-think {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-5px) rotate(5deg); }
}

@keyframes px-thought-dots {
  0% { content: "."; }
  33% { content: ".."; }
  66%, 100% { content: "..."; }
}

@keyframes px-work {
  0%   { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-4px) rotate(4deg); }
}

@keyframes px-think {
  0%, 100% { transform: rotate(-6deg); }
  50%       { transform: rotate(6deg); }
}

@keyframes px-jump {
  0%   { transform: translateY(0)    scaleX(1)    scaleY(1); }
  25%  { transform: translateY(-14px) scaleX(0.92) scaleY(1.1); }
  55%  { transform: translateY(0)    scaleX(1.1)  scaleY(0.9); }
  75%  { transform: translateY(-6px) scaleX(0.96) scaleY(1.04); }
  100% { transform: translateY(0)    scaleX(1)    scaleY(1); }
}

@keyframes px-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-7px); }
  75%       { transform: translateX(7px); }
}

@keyframes px-eye-blink {
  0%, 75%, 100% { opacity: 1; }
  85%            { opacity: 0; }
}

@keyframes px-led-alt {
  0%   { fill: #ffee00; }
  50%  { fill: #1a1a00; }
}

@keyframes px-antenna-pulse {
  0%, 100% { fill: #5599ff; }
  50%       { fill: #aaccff; }
}

@media (max-width: 680px) {
  .px-agent {
    bottom: 18px;
    right: 18px;
    animation-duration: 16s;
  }

  @keyframes px-wander {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100vw + 112px)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-agent,
  .px-agent *,
  .px-agent::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}