/**
 * Pixel Art Robot Agents
 * Inspired by retro gaming aesthetics
 */

/* Robot container */
.robot-agent {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, left 0.15s ease, top 0.15s ease;
    z-index: 10;
    /* Center the robot on its position point */
    transform: translate(-50%, -50%);
}

.robot-agent:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.robot-agent.active {
    z-index: 20;
}

/* Robot sprite container */
.robot-sprite {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    animation: power-hum 2s ease-in-out infinite;
    filter: drop-shadow(3px 3px 0 #000);
}

.robot-agent.active .robot-sprite {
    animation: power-hum 1s ease-in-out infinite;
}

/* Power hum animation (replaces float) */
@keyframes power-hum {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Legacy float for compatibility */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Walk animation - leg movement */
@keyframes walk {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-4px);
    }
}

@keyframes leg-left-walk {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(2px) translateY(-2px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(-2px) translateY(-2px); }
}

@keyframes leg-right-walk {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) translateY(-2px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(2px) translateY(-2px); }
}

/* Walking state */
.robot-agent.walking .robot-sprite {
    animation: walk 0.3s ease-in-out infinite;
}

.robot-agent.walking .leg-left {
    animation: leg-left-walk 0.3s ease-in-out infinite;
}

.robot-agent.walking .leg-right {
    animation: leg-right-walk 0.3s ease-in-out infinite;
}

/* Facing direction - applied to sprite, not container */
.robot-agent.facing-left .robot-sprite {
    transform: scaleX(-1);
}

.robot-agent.facing-right .robot-sprite {
    transform: scaleX(1);
}

/* Walking state needs to preserve the translate */
.robot-agent.walking {
    transform: translate(-50%, -50%);
}

/* Robot name label */
.robot-name {
    margin-top: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: var(--robot-color, #00fff2);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

/* Provider label under robot */
.robot-provider {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Speech bubble */
.speech-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border: 4px solid var(--robot-color, #00fff2);
    border-radius: 0;
    padding: 8px 12px;
    max-width: 200px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.1s ease;
    z-index: 100;
    box-shadow: 5px 5px 0 #000;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--robot-color, #00fff2);
}

.robot-agent.speaking .speech-bubble {
    opacity: 1;
    visibility: visible;
    animation: bubble-appear 0.15s ease-out;
}

@keyframes bubble-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Movement animation for interactions */
.robot-agent.moving-to-center {
    animation: move-to-center 1s ease-in-out;
}

@keyframes move-to-center {
    0% { transform: translate(0, 0); }
    50% { transform: translate(calc(50vw - 100%), calc(50vh - 100%)) scale(1.2); }
    100% { transform: translate(0, 0); }
}

/* Agent-specific colors */
.robot-agent[data-agent="orchestrator"] {
    --robot-color: #00fff2;
    --robot-glow: rgba(0, 255, 242, 0.5);
}

.robot-agent[data-agent="planner"] {
    --robot-color: #00aaff;
    --robot-glow: rgba(0, 170, 255, 0.5);
}

.robot-agent[data-agent="executor"] {
    --robot-color: #ff00ff;
    --robot-glow: rgba(255, 0, 255, 0.5);
}

.robot-agent[data-agent="verifier"] {
    --robot-color: #00ff88;
    --robot-glow: rgba(0, 255, 136, 0.5);
}

.robot-agent[data-agent="reviewer"] {
    --robot-color: #ffff00;
    --robot-glow: rgba(255, 255, 0, 0.5);
}

.robot-agent[data-agent="ux"] {
    --robot-color: #ff6b6b;
    --robot-glow: rgba(255, 107, 107, 0.5);
}

/* Connection lines between robots - hidden by default, only show when active */
.robot-connection {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

.robot-connections {
    display: none; /* Hide connection lines by default */
}

.robot-connections.show-connections {
    display: block;
}

.robot-connection line,
.robot-connections line {
    stroke: url(#connection-gradient);
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    animation: dash-flow 1s linear infinite;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.robot-connections.show-connections line,
.robot-connections line.active-connection {
    opacity: 1;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -10;
    }
}

/* Data packet animation */
.data-packet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--packet-color, #00fff2);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--packet-color);
    animation: travel-path 1s linear forwards;
    z-index: 15;
}

/* Stars background enhancement */
.robot-arena {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    background:
        radial-gradient(ellipse at center, rgba(0, 50, 80, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #0a0a15 0%, #0d1520 100%);
    overflow: hidden;
}

.robot-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, white, transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 160px 120px, white, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Pixel art SVG robots */
.robot-svg {
    width: 64px;
    height: 64px;
}

/* ============================================
   IDLE BEHAVIOR ANIMATIONS
   ============================================ */

/* Thinking animation - gentle bob with question mark */
@keyframes thinking-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-2deg); }
    75% { transform: translateY(-3px) rotate(2deg); }
}

.robot-agent.thinking .robot-sprite {
    animation: thinking-bob 0.8s ease-in-out infinite;
}

.robot-agent.thinking::after {
    content: '?';
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 18px;
    font-family: 'Share Tech Mono', monospace;
    color: var(--robot-color);
    text-shadow: 0 0 10px var(--robot-glow);
    animation: thought-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes thought-pulse {
    from { opacity: 0.5; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.1); }
}

/* Scanning animation - look around */
@keyframes scan-sweep {
    0%, 100% { transform: translateX(0) scaleX(1); }
    50% { transform: translateX(15px) scaleX(-1); }
}

.robot-agent.scanning .robot-sprite {
    animation: scan-sweep 1.5s ease-in-out;
}

.robot-agent.scanning::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--robot-color), transparent);
    animation: scan-beam 0.6s linear infinite;
    opacity: 0.7;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes scan-beam {
    0% { top: -10px; opacity: 0; }
    50% { opacity: 0.8; }
    100% { top: 70px; opacity: 0; }
}

/* Looking animation - just turning head */
.robot-agent.looking .robot-sprite {
    transition: transform 0.3s ease;
}

/* Idle walking - slower, more relaxed than active walking */
.robot-agent.idle-walking .robot-sprite {
    animation: walk 0.5s ease-in-out infinite;
}

.robot-agent.idle-walking .leg-left {
    animation: leg-left-walk 0.5s ease-in-out infinite;
}

.robot-agent.idle-walking .leg-right {
    animation: leg-right-walk 0.5s ease-in-out infinite;
}

/* Working animation - busy processing */
@keyframes working-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--robot-glow));
    }
    50% {
        filter: drop-shadow(0 0 25px var(--robot-glow)) brightness(1.4);
    }
}

.robot-agent.working .robot-sprite {
    animation: working-pulse 0.4s ease-in-out infinite;
}

.robot-agent.working .power-core,
.robot-agent.working .eye-left,
.robot-agent.working .eye-right {
    animation: rapid-blink 0.15s step-end infinite;
}

@keyframes rapid-blink {
    50% { opacity: 0.4; }
}

/* Working indicator badge */
.robot-agent.working::before {
    content: '⚡';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    animation: working-badge 0.3s ease-in-out infinite alternate;
}

@keyframes working-badge {
    from { transform: translateX(-50%) scale(0.8); opacity: 0.7; }
    to { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

/* Gravitating toward another robot */
.robot-agent.gravitating {
    z-index: 25;
}

.robot-agent.gravitating .robot-sprite {
    animation: float 0.8s ease-in-out infinite;
}

/* Collaboration indicator */
.robot-agent.collaborating::after {
    content: '💬';
    position: absolute;
    top: -20px;
    right: -5px;
    font-size: 16px;
    animation: collab-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes collab-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

/* Multiple robots active (parallel execution) */
.robot-agent.parallel-active {
    z-index: 22;
}

.robot-agent.parallel-active::before {
    content: '▶';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--robot-color);
    animation: parallel-indicator 0.5s ease-in-out infinite alternate;
}

@keyframes parallel-indicator {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Connection highlight during collaboration */
.active-connection {
    stroke-width: 4 !important;
    filter: drop-shadow(0 0 8px var(--robot-color));
}