<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';

interface Props {
  title?: string;
  subtitle?: string;
  showProgress?: boolean;
  showSteps?: boolean; // 是否显示步骤指示器
  currentStep?: number; // 0: 分析, 1: 编写, 2: 测试
  showBackground?: boolean; // 是否显示背景效果
}

const props = withDefaults(defineProps<Props>(), {
  title: 'AI 正在开发中...',
  subtitle: '正在分析需求并生成代码',
  showProgress: true,
  showSteps: true,
  currentStep: 1,
  showBackground: true,
});

// 按键状态
const pressedKeys = ref<Set<string>>(new Set());

function isKeyPressed(row: number, key: number): boolean {
  return pressedKeys.value.has(`${row}-${key}`);
}

// 数据粒子
const particles = ref<
  Array<{ char: string; delay: number; id: number; x: number; y: number }>
>([]);
const codeChars = [
  '0',
  '1',
  '{',
  '}',
  '<',
  '>',
  '/',
  '*',
  '=',
  '+',
  '-',
  ';',
  ':',
  '(',
  ')',
];

function generateParticles() {
  particles.value = Array.from({ length: 20 }, (_, i) => ({
    id: i,
    x: Math.random() * 100,
    y: Math.random() * 100,
    char: codeChars[Math.floor(Math.random() * codeChars.length)] || '0',
    delay: Math.random() * 5,
  }));
}

// 思考气泡内容
const thoughts = [
  'analyzing...',
  'optimizing...',
  'generating...',
  'building...',
];
const currentThought = ref(0);

// 状态步骤
const steps = computed(() => [
  {
    label: '分析需求',
    done: props.currentStep > 0,
    active: props.currentStep === 0,
  },
  {
    label: '编写代码',
    done: props.currentStep > 1,
    active: props.currentStep === 1,
  },
  {
    label: '测试优化',
    done: props.currentStep > 2,
    active: props.currentStep === 2,
  },
]);

let keyTimer: ReturnType<typeof setInterval>;
let thoughtTimer: ReturnType<typeof setInterval>;

onMounted(() => {
  generateParticles();

  keyTimer = setInterval(() => {
    const row = Math.floor(Math.random() * 3) + 1;
    const key = Math.floor(Math.random() * 10) + 1;
    const keyId = `${row}-${key}`;
    pressedKeys.value.add(keyId);
    setTimeout(() => pressedKeys.value.delete(keyId), 150);
  }, 80);

  thoughtTimer = setInterval(() => {
    currentThought.value = (currentThought.value + 1) % thoughts.length;
  }, 2000);
});

onUnmounted(() => {
  clearInterval(keyTimer);
  clearInterval(thoughtTimer);
});
</script>

<template>
  <div class="ai-working-container">
    <!-- 背景 -->
    <div v-if="showBackground" class="ai-bg">
      <div class="ai-grid"></div>
      <div class="ai-glow glow-1"></div>
      <div class="ai-glow glow-2"></div>
      <div class="ai-glow glow-3"></div>
    </div>

    <!-- 飘过的代码行 - 左侧 -->
    <div class="flying-code left-side">
      <div class="code-row" style="--i: 0">
        const handleSubmit = async () => {
      </div>
      <div class="code-row" style="--i: 1">const data = await fetchAPI();</div>
      <div class="code-row" style="--i: 2">return response.json();</div>
      <div class="code-row" style="--i: 3">
        import { ref, computed } from 'vue';
      </div>
      <div class="code-row" style="--i: 4">
        export default defineComponent({
      </div>
      <div class="code-row" style="--i: 5">setup() { return { data }; }</div>
    </div>

    <!-- 飘过的代码行 - 右侧 -->
    <div class="flying-code right-side">
      <div class="code-row" style="--i: 0">function createApp(config) {</div>
      <div class="code-row" style="--i: 1">const state = reactive({});</div>
      <div class="code-row" style="--i: 2">watch(() => props.value, cb);</div>
      <div class="code-row" style="--i: 3">
        interface UserData { id: string }
      </div>
      <div class="code-row" style="--i: 4">
        const result = arr.map(x => x * 2);
      </div>
      <div class="code-row" style="--i: 5">async onMounted(() => init());</div>
    </div>

    <!-- 数据粒子流 -->
    <div class="particles">
      <span
        v-for="p in particles"
        :key="p.id"
        class="particle"
        :style="{
          '--x': `${p.x}%`,
          '--y': `${p.y}%`,
          '--delay': `${p.delay}s`,
        }"
        >{{ p.char }}</span>
    </div>

    <!-- 工作场景 -->
    <div class="workspace">
      <!-- 数据流连接线 -->
      <svg class="data-flow" viewBox="0 0 300 200">
        <path class="flow-path path-1" d="M0,100 Q75,50 150,100 T300,100" />
        <path class="flow-path path-2" d="M0,120 Q75,170 150,120 T300,120" />
        <circle class="flow-dot dot-1" r="3" />
        <circle class="flow-dot dot-2" r="3" />
      </svg>

      <!-- 机器人工作台 -->
      <div class="workstation">
        <!-- 思考气泡 -->
        <div class="thought-bubble">
          <span class="thought-text">{{ thoughts[currentThought] }}</span>
          <div class="bubble-dots"><span></span><span></span><span></span></div>
        </div>

        <!-- 机器人 -->
        <div class="robot">
          <!-- 头 -->
          <div class="robot-head">
            <!-- 天线 -->
            <div class="antenna">
              <div class="antenna-ball"></div>
              <div class="signal">
                <span v-for="i in 3" :key="i" :style="{ '--i': i }"></span>
              </div>
            </div>
            <!-- 耳机 -->
            <div class="headphones">
              <div class="hp-band"></div>
              <div class="hp-left">
                <span class="hp-light"></span>
                <span class="hp-glow"></span>
              </div>
              <div class="hp-right">
                <span class="hp-light"></span>
                <span class="hp-glow"></span>
              </div>
            </div>
            <!-- 脸 -->
            <div class="face">
              <div class="eyes">
                <div class="eye left">
                  <div class="eye-bg"></div>
                  <div class="eye-shine"></div>
                  <div class="pupil">
                    <div class="pupil-light"></div>
                  </div>
                </div>
                <div class="eye right">
                  <div class="eye-bg"></div>
                  <div class="eye-shine"></div>
                  <div class="pupil">
                    <div class="pupil-light"></div>
                  </div>
                </div>
              </div>
              <!-- 脸颚红晕 -->
              <div class="cheeks">
                <div class="cheek left"></div>
                <div class="cheek right"></div>
              </div>
              <div class="mouth">
                <div
                  class="mouth-bar"
                  v-for="i in 5"
                  :key="i"
                  :style="{ '--i': i }"
                ></div>
              </div>
            </div>
            <!-- 头部反光 -->
            <div class="head-shine"></div>
          </div>

          <!-- 身体 -->
          <div class="robot-body">
            <div class="chest-screen">
              <div
                class="screen-line"
                v-for="i in 3"
                :key="i"
                :style="{ '--i': i }"
              ></div>
              <div class="screen-cursor"></div>
            </div>
            <div class="body-lights">
              <span v-for="i in 3" :key="i" :style="{ '--i': i }"></span>
            </div>
            <!-- 身体反光 -->
            <div class="body-shine"></div>
          </div>

          <!-- 手臂 -->
          <div class="arms">
            <div class="arm left-arm">
              <div class="shoulder"></div>
              <div class="forearm"></div>
              <div class="hand">
                <div class="finger"></div>
                <div class="typing-spark"></div>
              </div>
            </div>
            <div class="arm right-arm">
              <div class="shoulder"></div>
              <div class="forearm"></div>
              <div class="hand">
                <div class="finger"></div>
                <div class="typing-spark"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 桌子 -->
        <div class="desk">
          <!-- 小显示器在桌上 -->
          <div class="mini-monitor">
            <div class="monitor-frame">
              <div class="mini-screen">
                <div class="py-code">
                  <div class="py-line">
                    <span class="py-keyword">def</span>
                    <span class="py-func">calc</span>(x, y):
                  </div>
                  <div class="py-line indent-1">total = x * y</div>
                  <div class="py-line indent-1">
                    avg = total / <span class="py-num">2</span>
                  </div>
                  <div class="py-line indent-1">
                    <span class="py-keyword">return</span> avg
                  </div>
                </div>
                <div class="screen-cursor"></div>
              </div>
            </div>
            <div class="monitor-stand"></div>
          </div>

          <!-- 键盘 -->
          <div class="keyboard">
            <div v-for="row in 3" :key="row" class="kb-row">
              <div
                v-for="k in row === 1 ? 10 : row === 2 ? 8 : 6"
                :key="k"
                class="key"
                :class="{ pressed: isKeyPressed(row, k) }"
              ></div>
            </div>
            <div
              class="kb-space"
              :class="{ pressed: isKeyPressed(4, 1) }"
            ></div>
          </div>

          <!-- 咖啡杯 -->
          <div class="coffee">
            <div class="cup">
              <div class="cup-logo"></div>
            </div>
            <div class="steam">
              <div
                class="steam-line"
                v-for="i in 3"
                :key="i"
                :style="{ '--i': i }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 飘浮代码片段 -->
      <div class="floating">
        <span class="code-snippet" style="--x: 8%; --y: 15%; --d: 0s">const app =</span>
        <span class="code-snippet" style="--x: 78%; --y: 20%; --d: 0.8s">async () =></span>
        <span class="code-snippet" style="--x: 5%; --y: 75%; --d: 1.6s">return data</span>
        <span class="code-snippet" style="--x: 82%; --y: 70%; --d: 2.4s">{ success }</span>
        <span class="code-snippet" style="--x: 12%; --y: 45%; --d: 3.2s">await fetch</span>
        <span class="code-snippet" style="--x: 75%; --y: 85%; --d: 4s">.then(res)</span>
      </div>
    </div>

    <!-- 文字区域 -->
    <div class="text-area">
      <h3 class="title">{{ title }}<span class="cursor-blink">|</span></h3>
      <p class="subtitle">{{ subtitle }}</p>
      <div v-if="showProgress" class="progress">
        <div class="bar"></div>
        <div class="progress-glow"></div>
      </div>
      <div v-if="showSteps" class="status">
        <span
          v-for="(step, idx) in steps"
          :key="idx"
          class="s-item"
          :class="{ done: step.done, active: step.active }"
        >
          <i></i><span>{{ step.label }}</span>
        </span>
      </div>
      <!-- 自定义内容插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.ai-working-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background: hsl(var(--card));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 背景 */
.ai-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ai-grid {
  display: none;
}

/* 飘过的代码行 */
.flying-code {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.flying-code.left-side {
  left: 0;
}
.flying-code.right-side {
  right: 0;
}
.code-row {
  position: absolute;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 10px;
  color: hsl(var(--primary) / 0.2);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 2px;
  background: hsl(var(--primary) / 0.02);
  top: calc(var(--i) * 70px + 30px);
}
.left-side .code-row {
  animation: flyLeft 18s linear infinite;
  animation-delay: calc(var(--i) * 3s);
  right: 100%;
}
.right-side .code-row {
  animation: flyRight 18s linear infinite;
  animation-delay: calc(var(--i) * 3s + 1.5s);
  left: 100%;
}
@keyframes flyLeft {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  3% {
    opacity: 0.3;
  }
  97% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(320px);
    opacity: 0;
  }
}
@keyframes flyRight {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  3% {
    opacity: 0.3;
  }
  97% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(-320px);
    opacity: 0;
  }
}

.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}
.glow-1 {
  width: 250px;
  height: 250px;
  background: hsl(var(--primary));
  top: 10%;
  left: 20%;
  animation: float 8s ease-in-out infinite;
}
.glow-2 {
  width: 200px;
  height: 200px;
  background: hsl(var(--primary));
  bottom: 20%;
  right: 15%;
  animation: float 10s ease-in-out infinite reverse;
}
.glow-3 {
  width: 150px;
  height: 150px;
  background: hsl(217 91% 60%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

/* 数据粒子 */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: hsl(var(--primary) / 0.15);
  animation: particleFloat 6s ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes particleFloat {
  0%,
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-20px) scale(1);
  }
}

/* 工作场景 */
.workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

/* 数据流 SVG */
.data-flow {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
  pointer-events: none;
}
.flow-path {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 2;
  stroke-dasharray: 8 4;
  animation: flowDash 2s linear infinite;
}
.path-2 {
  animation-delay: 1s;
}
@keyframes flowDash {
  to {
    stroke-dashoffset: -24;
  }
}
.flow-dot {
  fill: hsl(var(--primary));
  opacity: 0.6;
}
.dot-1 {
  animation: flowMove1 3s ease-in-out infinite;
}
.dot-2 {
  animation: flowMove2 3s ease-in-out infinite 1.5s;
}
@keyframes flowMove1 {
  0% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(300px, 100px);
  }
}
@keyframes flowMove2 {
  0% {
    transform: translate(0, 120px);
  }
  100% {
    transform: translate(300px, 120px);
  }
}

/* 工作台 */
.workstation {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 思考气泡 */
.thought-bubble {
  position: absolute;
  top: -45px;
  right: -80px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  color: hsl(var(--primary));
  font-family: 'Fira Code', monospace;
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.1);
  animation: bubblePulse 2s ease-in-out infinite;
}
.thought-text {
  animation: fadeSwitch 2s ease-in-out infinite;
}
@keyframes fadeSwitch {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.bubble-dots {
  position: absolute;
  bottom: -12px;
  left: 10px;
  display: flex;
  gap: 4px;
}
.bubble-dots span {
  width: 6px;
  height: 6px;
  background: hsl(var(--primary) / 0.3);
  border-radius: 50%;
}
.bubble-dots span:nth-child(2) {
  width: 4px;
  height: 4px;
}
.bubble-dots span:nth-child(3) {
  width: 3px;
  height: 3px;
}
@keyframes bubblePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* 机器人 */
.robot {
  position: relative;
  z-index: 10;
}

.robot-head {
  width: 85px;
  height: 65px;
  background: linear-gradient(
    145deg,
    hsl(var(--primary)) 0%,
    hsl(var(--primary) / 0.6) 100%
  );
  border-radius: 22px 22px 18px 18px;
  margin: 0 auto;
  position: relative;
  box-shadow:
    0 8px 30px hsl(var(--primary) / 0.3),
    inset 0 2px 0 hsl(var(--primary-foreground) / 0.1);
  animation: robotBreathe 3s ease-in-out infinite;
}
@keyframes robotBreathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.head-shine {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 20px;
  height: 8px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--primary-foreground) / 0.3),
    transparent
  );
  border-radius: 4px;
  animation: headShine 3s ease-in-out infinite;
}
@keyframes headShine {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

.antenna {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 14px;
  background: linear-gradient(
    180deg,
    hsl(var(--primary) / 0.8),
    hsl(var(--primary) / 0.4)
  );
  border-radius: 2px;
}
.antenna-ball {
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle at 30% 30%,
    hsl(var(--primary-foreground)),
    hsl(var(--primary))
  );
  border-radius: 50%;
  position: absolute;
  top: -8px;
  left: -3px;
  box-shadow:
    0 0 12px hsl(var(--primary)),
    0 0 20px hsl(var(--primary) / 0.5);
  animation: antennaPulse 1.5s ease-in-out infinite;
}
@keyframes antennaPulse {
  0%,
  100% {
    box-shadow:
      0 0 12px hsl(var(--primary)),
      0 0 20px hsl(var(--primary) / 0.5);
  }
  50% {
    box-shadow:
      0 0 20px hsl(var(--primary)),
      0 0 35px hsl(var(--primary) / 0.7);
  }
}
.signal {
  position: absolute;
  top: -5px;
  left: 12px;
}
.signal span {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid hsl(var(--primary) / 0.4);
  border-radius: 50%;
  animation: signalWave 2s ease-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}
@keyframes signalWave {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.face {
  padding: 16px 14px 12px;
}
.eyes {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.eye {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.eye-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 35% 35%, #fff, #e8e8e8);
  border-radius: 50%;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 -3px 6px rgba(0, 0, 0, 0.08);
}
.eye-shine {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  top: 4px;
  left: 5px;
  opacity: 0.9;
  z-index: 3;
}
.pupil {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 40% 40%, #3d3d54, #1a1a2e);
  border-radius: 50%;
  animation: look 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.pupil-light {
  position: absolute;
  width: 3px;
  height: 3px;
  background: hsl(var(--primary));
  border-radius: 50%;
  top: 2px;
  right: 2px;
  opacity: 0.7;
  animation: pupilGlow 2s ease-in-out infinite;
}
@keyframes pupilGlow {
  0%,
  100% {
    opacity: 0.5;
    box-shadow: 0 0 2px hsl(var(--primary));
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 6px hsl(var(--primary));
  }
}
@keyframes look {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(3px, -1px);
  }
  50% {
    transform: translate(-1px, 2px);
  }
  75% {
    transform: translate(-3px, -1px);
  }
}

/* 脸颚红晕 */
.cheeks {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}
.cheek {
  width: 10px;
  height: 6px;
  background: hsl(0 70% 70% / 0.3);
  border-radius: 50%;
  filter: blur(2px);
  animation: blush 4s ease-in-out infinite;
}
.cheek.right {
  animation-delay: 2s;
}
@keyframes blush {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
}

.mouth {
  display: flex;
  justify-content: center;
  gap: 3px;
  height: 10px;
}
.mouth-bar {
  width: 5px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.4)
  );
  border-radius: 2px;
  animation: speak 0.35s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.07s);
}
@keyframes speak {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 12px;
  }
}

/* 耳机 */
.headphones {
  position: absolute;
  top: 10px;
  left: -10px;
  right: -10px;
}
.hp-band {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 14px;
  border: 4px solid hsl(var(--primary) / 0.4);
  border-bottom: none;
  border-radius: 40px 40px 0 0;
}
.hp-left,
.hp-right {
  position: absolute;
  top: 0;
  width: 14px;
  height: 24px;
  background: linear-gradient(
    180deg,
    hsl(var(--primary) / 0.7),
    hsl(var(--primary) / 0.5)
  );
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-left {
  left: 0;
}
.hp-right {
  right: 0;
}
.hp-light {
  width: 4px;
  height: 4px;
  background: hsl(var(--primary-foreground));
  border-radius: 50%;
  animation: hpBlink 1s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.hp-glow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: hsl(var(--primary-foreground) / 0.3);
  border-radius: 50%;
  filter: blur(3px);
  animation: hpGlow 1s ease-in-out infinite;
}
@keyframes hpBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes hpGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.6;
  }
}

.robot-body {
  width: 65px;
  height: 55px;
  background: linear-gradient(
    180deg,
    hsl(var(--primary) / 0.75),
    hsl(var(--primary) / 0.45)
  );
  border-radius: 12px 12px 16px 16px;
  margin: 5px auto 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px hsl(var(--primary) / 0.2);
  animation: robotBreathe 3s ease-in-out infinite;
}
.body-shine {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 16px;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--primary-foreground) / 0.2),
    transparent
  );
  border-radius: 3px;
}

.chest-screen {
  width: 40px;
  height: 26px;
  background: hsl(var(--muted));
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid hsl(var(--primary) / 0.3);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 6px hsl(var(--foreground) / 0.1),
    0 0 8px hsl(var(--primary) / 0.1);
}
.screen-cursor {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 3px;
  height: 6px;
  background: hsl(var(--primary-foreground));
  animation: cursorBlink 0.6s step-end infinite;
}
.screen-line {
  height: 4px;
  background: linear-gradient(
    90deg,
    hsl(var(--primary-foreground) / 0.7),
    hsl(var(--primary-foreground) / 0.3)
  );
  border-radius: 2px;
  animation: screenType 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.25s);
}
@keyframes screenType {
  0%,
  100% {
    width: 50%;
  }
  50% {
    width: 100%;
  }
}

.body-lights {
  position: absolute;
  bottom: 6px;
  display: flex;
  gap: 6px;
}
.body-lights span {
  width: 5px;
  height: 5px;
  background: hsl(var(--primary-foreground) / 0.5);
  border-radius: 50%;
  animation: bodyLight 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}
@keyframes bodyLight {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 6px hsl(var(--primary-foreground));
  }
}

.arms {
  position: absolute;
  top: 70px;
  left: -28px;
  right: -28px;
  display: flex;
  justify-content: space-between;
}
.arm {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left-arm {
  animation: typeL 0.2s ease-in-out infinite;
}
.right-arm {
  animation: typeR 0.2s ease-in-out infinite 0.1s;
}
@keyframes typeL {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
@keyframes typeR {
  0%,
  100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
.shoulder {
  width: 14px;
  height: 18px;
  background: hsl(var(--primary) / 0.55);
  border-radius: 7px 7px 5px 5px;
}
.forearm {
  width: 10px;
  height: 16px;
  background: hsl(var(--primary) / 0.45);
  border-radius: 5px;
  margin-top: 3px;
}
.hand {
  width: 12px;
  height: 10px;
  background: hsl(var(--primary) / 0.6);
  border-radius: 4px;
  margin-top: 3px;
  position: relative;
}
.finger {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 6px;
  background: hsl(var(--primary) / 0.5);
  border-radius: 2px;
}
.typing-spark {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: hsl(var(--primary-foreground));
  border-radius: 50%;
  opacity: 0;
  animation: typingSpark 0.2s ease-out infinite;
}
.left-arm .typing-spark {
  animation-delay: 0s;
}
.right-arm .typing-spark {
  animation-delay: 0.1s;
}
@keyframes typingSpark {
  0% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3) translateY(5px);
  }
}

/* 桌子 */
.desk {
  margin-top: 50px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 12px 25px;
  background: linear-gradient(
    180deg,
    hsl(var(--muted) / 0.4),
    hsl(var(--muted) / 0.2)
  );
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 小显示器 */
.mini-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.monitor-frame {
  width: 85px;
  height: 55px;
  background: hsl(var(--background));
  border-radius: 5px;
  border: 3px solid hsl(var(--border));
  padding: 6px;
  box-shadow: 0 0 15px hsl(var(--primary) / 0.1);
}
.mini-screen {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
}
/* Python 代码样式 */
.py-code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 6px;
  line-height: 1.5;
  color: hsl(var(--foreground));
}
.py-line {
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}
.py-line.indent-1 {
  padding-left: 6px;
}
.py-line.indent-2 {
  padding-left: 12px;
}
.py-code {
  animation: pyClear 8s ease-in-out infinite;
}
.py-code .py-line:nth-child(1) {
  animation: pyTyping1 8s steps(18) infinite;
}
.py-code .py-line:nth-child(2) {
  animation: pyTyping2 8s steps(15) infinite;
}
.py-code .py-line:nth-child(3) {
  animation: pyTyping3 8s steps(16) infinite;
}
.py-code .py-line:nth-child(4) {
  animation: pyTyping4 8s steps(13) infinite;
}
@keyframes pyTyping1 {
  0%,
  5% {
    width: 0;
  }
  20% {
    width: 100%;
  }
  75% {
    width: 100%;
  }
  76%,
  100% {
    width: 0;
  }
}
@keyframes pyTyping2 {
  0%,
  20% {
    width: 0;
  }
  35% {
    width: 100%;
  }
  75% {
    width: 100%;
  }
  76%,
  100% {
    width: 0;
  }
}
@keyframes pyTyping3 {
  0%,
  35% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 100%;
  }
  76%,
  100% {
    width: 0;
  }
}
@keyframes pyTyping4 {
  0%,
  50% {
    width: 0;
  }
  65% {
    width: 100%;
  }
  75% {
    width: 100%;
  }
  76%,
  100% {
    width: 0;
  }
}
@keyframes pyClear {
  0%,
  75% {
    opacity: 1;
  }
  76%,
  85% {
    opacity: 0;
  }
  86%,
  100% {
    opacity: 1;
  }
}
.py-keyword {
  color: hsl(var(--primary));
  font-weight: 600;
}
.py-func {
  color: hsl(217 91% 60%);
}
.py-num {
  color: hsl(142 71% 45%);
}
.screen-cursor {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 3px;
  height: 6px;
  background: hsl(var(--primary));
  animation: cursorBlink 0.6s step-end infinite;
}
@keyframes cursorBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.monitor-stand {
  width: 20px;
  height: 8px;
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 0 0 4px 4px;
  margin-top: 2px;
}

/* 键盘 */
.keyboard {
  background: linear-gradient(
    180deg,
    hsl(var(--muted) / 0.7),
    hsl(var(--muted) / 0.5)
  );
  padding: 8px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.kb-row {
  display: flex;
  justify-content: center;
  gap: 2px;
}
.key {
  width: 11px;
  height: 11px;
  background: hsl(var(--muted));
  border-radius: 2px;
  transition: all 0.08s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.key.pressed {
  background: hsl(var(--primary));
  transform: translateY(2px);
  box-shadow: 0 0 10px hsl(var(--primary) / 0.6);
}
.kb-space {
  width: 50px;
  height: 10px;
  background: hsl(var(--muted));
  border-radius: 2px;
  margin-top: 2px;
  transition: all 0.08s;
}
.kb-space.pressed {
  background: hsl(var(--primary));
  transform: translateY(1px);
}

/* 咖啡杯 */
.coffee {
  position: relative;
}
.cup {
  width: 18px;
  height: 22px;
  background: linear-gradient(
    180deg,
    hsl(var(--muted-foreground) / 0.4),
    hsl(var(--muted-foreground) / 0.25)
  );
  border-radius: 0 0 5px 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cup-logo {
  width: 8px;
  height: 8px;
  border: 1px solid hsl(var(--muted-foreground) / 0.3);
  border-radius: 50%;
}
.cup::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 5px;
  width: 9px;
  height: 12px;
  border: 2px solid hsl(var(--muted-foreground) / 0.35);
  border-left: none;
  border-radius: 0 7px 7px 0;
}
.steam {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}
.steam-line {
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    hsl(var(--muted-foreground) / 0.3)
  );
  border-radius: 2px;
  animation: steam 2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.25s);
}
@keyframes steam {
  0%,
  100% {
    height: 6px;
    opacity: 0.2;
    transform: translateY(0);
  }
  50% {
    height: 14px;
    opacity: 0.5;
    transform: translateY(-3px);
  }
}

/* 飘浮代码片段 */
.floating {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.code-snippet {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: 'Fira Code', monospace;
  font-size: 10px;
  color: hsl(var(--primary) / 0.2);
  background: hsl(var(--primary) / 0.03);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid hsl(var(--primary) / 0.1);
  animation: snippetFloat 5s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes snippetFloat {
  0%,
  100% {
    opacity: 0.15;
    transform: translateY(10px) scale(0.95);
  }
  50% {
    opacity: 0.4;
    transform: translateY(-10px) scale(1);
  }
}

/* 文字区域 */
.text-area {
  text-align: center;
  z-index: 20;
}
.title {
  font-size: 1.4rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.cursor-blink {
  animation: cursorBlink 1s step-end infinite;
  color: hsl(var(--primary));
  font-weight: 400;
}
.subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.progress {
  width: 200px;
  height: 4px;
  background: hsl(var(--muted));
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto 20px;
  position: relative;
}
.bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.2),
    hsl(var(--primary))
  );
  background-size: 200% 100%;
  animation: progress 1.2s linear infinite;
}
.progress-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--primary-foreground) / 0.3),
    transparent
  );
  animation: progressGlow 1.5s linear infinite;
}
@keyframes progress {
  to {
    background-position: -200% 0;
  }
}
@keyframes progressGlow {
  0% {
    left: -60px;
  }
  100% {
    left: 100%;
  }
}

.status {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.s-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  transition: all 0.3s;
}
.s-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.25);
  transition: all 0.3s;
}
.s-item.done {
  color: #4caf50;
}
.s-item.done i {
  background: #4caf50;
  box-shadow: 0 0 8px #4caf50;
}
.s-item.active {
  color: hsl(var(--primary));
}
.s-item.active i {
  background: hsl(var(--primary));
  animation: statusPulse 1s infinite;
}
@keyframes statusPulse {
  0%,
  100% {
    box-shadow: 0 0 4px hsl(var(--primary));
  }
  50% {
    box-shadow: 0 0 12px hsl(var(--primary));
  }
}
</style>
