/* 悬浮程序员动画 - 完整版 */
/* 固定在右下角的容器 */
.floating-coder-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 998;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 放大状态 */
.floating-coder-container.expanded {
    cursor: default;
}

.floating-coder-container.expanded .scene {
    zoom: 1.1;
}

/* 背景色状态 */
.floating-coder-container.with-bg {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* 控制按钮通用样式 */
.floating-coder-btn {
    position: absolute;
    top: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.2s ease;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.floating-coder-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.floating-coder-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* 背景色按钮高亮状态 */
.floating-coder-btn.highlight {
    background: rgba(88, 166, 255, 0.6);
    border-color: rgba(88, 166, 255, 0.8);
    animation: btnPulse 1s ease-in-out 3;
}

@keyframes btnPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 10px 3px rgba(88, 166, 255, 0.5);
    }
}

/* 背景色按钮激活状态 */
.floating-coder-btn.active {
    background: rgba(88, 166, 255, 0.5);
    border-color: rgba(88, 166, 255, 0.8);
}

/* 最小化按钮 */
.floating-coder-minimize {
    right: 72px;
}

/* 背景色按钮 */
.floating-coder-bg {
    right: 40px;
}

/* 放大按钮 */
.floating-coder-zoomin {
    right: 8px;
}

.floating-coder-container.expanded .floating-coder-btn {
    display: flex;
}

.scene {
    position: relative;
    width: 600px;
    height: 400px;
    zoom: 0.7;
    transition: filter 0.5s ease, zoom 0.3s ease;
    font-family: 'Courier New', monospace;
}

/* 手机端隐藏动画 */
@media (max-width: 768px) {
    .floating-coder-container {
        display: none;
    }
}

/* 低能量时整体变灰 */
.scene.low-energy {
    filter: saturate(0.6) brightness(0.9);
}

/* 咖啡因超载效果 */
.scene.caffeine-overload {
    animation: caffeineShake 0.1s ease-in-out infinite;
}

@keyframes caffeineShake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-1px, 1px);
    }

    50% {
        transform: translate(1px, -1px);
    }

    75% {
        transform: translate(-1px, -1px);
    }
}

/* 桌子 */
.desk {
    position: absolute;
    bottom: 120px;
    left: 50px;
    width: 400px;
    height: 18px;
    background: linear-gradient(180deg, #a0694b 0%, #8B4513 50%, #654321 100%);
    border-radius: 3px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 50;
}

.desk-leg-left,
.desk-leg-right {
    position: absolute;
    bottom: -80px;
    width: 12px;
    height: 80px;
    background: linear-gradient(90deg, #654321, #8B4513, #654321);
}

.desk-leg-left {
    left: 25px;
}

.desk-leg-right {
    right: 25px;
}

/* 显示器 */
.monitor {
    position: absolute;
    bottom: 158px;
    left: 120px;
    width: 200px;
    height: 140px;
    background: #2d2d2d;
    border: 4px solid #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    z-index: 51;
}

.screen {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 180px;
    height: 110px;
    background: #1e1e1e;
    border-radius: 3px;
    overflow: hidden;
    padding: 8px;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

/* 低能量时屏幕变暗 */
.screen.dim {
    filter: brightness(0.5);
}

.code-line {
    font-size: 8px;
    color: #9cdcfe;
    height: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.code-line.keyword {
    color: #c586c0;
}

.code-line.string {
    color: #ce9178;
}

.code-line.function {
    color: #dcdcaa;
}

.code-line.comment {
    color: #6a9955;
}

.code-line.error {
    color: #f44747;
    background: rgba(244, 71, 71, 0.1);
}

.monitor-stand {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 20px;
    background: #1a1a1a;
}

.monitor-base {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
}

/* 能量条 */
.energy-bar-container {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #555;
}

.energy-bar {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.energy-bar.low {
    background: linear-gradient(90deg, #ff6b6b, #ff9f43);
    animation: energyPulse 0.5s ease-in-out infinite;
}

@keyframes energyPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.energy-bar.critical {
    background: linear-gradient(90deg, #ff3333, #ff6b6b);
    animation: energyCritical 0.3s ease-in-out infinite;
}

@keyframes energyCritical {

    0%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }

    50% {
        opacity: 0.3;
        transform: scaleY(0.8);
    }
}

.energy-bar.high {
    background: linear-gradient(90deg, #1dd1a1, #48dbfb);
}

.energy-icon {
    position: absolute;
    top: 3px;
    right: 58px;
    font-size: 6px;
}

/* 键盘 */
.keyboard {
    position: absolute;
    bottom: 140px;
    left: 330px;
    width: 110px;
    height: 35px;
    background: #333;
    border-radius: 4px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    align-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 52;
}

.key {
    width: 8px;
    height: 8px;
    background: #555;
    border-radius: 1px;
    transition: transform 0.1s, background 0.1s;
}

.key.pressed {
    transform: translateY(1px);
    background: #777;
}

/* 椅子 */
.chair {
    position: absolute;
    bottom: 175px;
    left: 430px;
    z-index: 30;
}

.chair-seat {
    position: relative;
    width: 75px;
    height: 15px;
    background: #2d2d2d;
    border-radius: 4px;
    top: 80px;
}

.chair-back {
    position: absolute;
    top: 10px;
    right: -8px;
    width: 15px;
    height: 75px;
    background: linear-gradient(90deg, #3d3d3d, #2d2d2d);
    border-radius: 6px;
}

.chair-leg {
    position: absolute;
    top: 95px;
    left: 35px;
    width: 6px;
    height: 45px;
    background: #1a1a1a;
}

.chair-base {
    position: absolute;
    top: 138px;
    left: 10px;
    width: 55px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
}

.chair-wheel1,
.chair-wheel2 {
    position: absolute;
    top: 142px;
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
}

.chair-wheel1 {
    left: 8px;
}

.chair-wheel2 {
    left: 58px;
}

/* 程序员 - 上半身 */
.programmer-upper {
    position: absolute;
    bottom: 132px;
    left: 435px;
    z-index: 65;
}

.body-container {
    animation: bodyMove 3s ease-in-out infinite;
}

@keyframes bodyMove {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

/* 低能量时身体晃动 */
.body-container.drowsy {
    animation: drowsyBody 2s ease-in-out infinite !important;
}

@keyframes drowsyBody {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(2px) rotate(-2deg);
    }

    50% {
        transform: translateY(3px) rotate(0deg);
    }

    75% {
        transform: translateY(2px) rotate(2deg);
    }
}

/* 咖啡因超载时身体抖动 */
.body-container.caffeine-shake {
    animation: caffeineBodyShake 0.15s ease-in-out infinite !important;
}

@keyframes caffeineBodyShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-1px);
    }

    75% {
        transform: translateX(1px);
    }
}

/* 头部 */
.head {
    position: relative;
    width: 50px;
    height: 60px;
    background: #f2bbad;
    border-radius: 25px 25px 20px 20px;
    border: 3px solid #333;
    margin-left: 5px;
    animation: headMove 4s ease-in-out infinite;
    transition: transform 0.4s ease;
}

@keyframes headMove {

    0%,
    100% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(6deg);
    }
}

/* 低能量时头部下垂打瞌睡 */
.head.drowsy {
    animation: headDrowsy 3s ease-in-out infinite !important;
}

@keyframes headDrowsy {

    0%,
    100% {
        transform: rotate(10deg) translateY(0);
    }

    30% {
        transform: rotate(15deg) translateY(3px);
    }

    50% {
        transform: rotate(20deg) translateY(8px);
    }

    60% {
        transform: rotate(5deg) translateY(2px);
    }

    80% {
        transform: rotate(12deg) translateY(4px);
    }
}

/* 极度疲惫时头更低 */
.head.exhausted {
    animation: headExhausted 4s ease-in-out infinite !important;
}

@keyframes headExhausted {

    0%,
    100% {
        transform: rotate(20deg) translateY(5px);
    }

    50% {
        transform: rotate(25deg) translateY(12px);
    }
}

/* 头转向咖啡 */
.head.look-coffee {
    animation: none !important;
    transform: rotate(-15deg) !important;
}

/* 头低下看小狗 */
.head.look-dog {
    animation: none !important;
    transform: rotate(25deg) translateY(5px) !important;
}

/* 头发 */
.hair {
    position: absolute;
    top: -2px;
    left: 0px;
    width: 50px;
    height: 28px;
    background: #452824;
    border-radius: 22px 22px 5px 5px;
    border: 3px solid #333;
    border-bottom: none;
}

.hair-side {
    position: absolute;
    top: 18px;
    right: -3px;
    width: 10px;
    height: 20px;
    background: #452824;
    border-radius: 4px;
    border: 2px solid #333;
    border-left: none;
}

/* 眼睛 */
.eye {
    position: absolute;
    top: 24px;
    left: 12px;
    width: 5px;
    height: 5px;
    background: #333;
    border-radius: 50%;
    animation: blink 4s infinite;
}

@keyframes blink {

    0%,
    95%,
    100% {
        transform: scaleY(1);
    }

    97% {
        transform: scaleY(0.1);
    }
}

/* 疲惫眼睛 */
.eye.tired {
    height: 3px;
    animation: none;
}

/* 困倦眼睛 - 频繁眨眼 */
.eye.drowsy {
    animation: drowsyBlink 2s infinite !important;
}

@keyframes drowsyBlink {

    0%,
    40%,
    100% {
        transform: scaleY(1);
        height: 4px;
    }

    20%,
    60%,
    80% {
        transform: scaleY(0.2);
        height: 2px;
    }
}

/* 极度疲惫眼睛 - 半闭 */
.eye.exhausted {
    height: 2px !important;
    animation: exhaustedBlink 3s infinite !important;
}

@keyframes exhaustedBlink {

    0%,
    70%,
    100% {
        transform: scaleY(1);
    }

    80%,
    90% {
        transform: scaleY(0.3);
    }
}

/* 咖啡因超载眼睛 - 睁大 */
.eye.wired {
    width: 7px !important;
    height: 7px !important;
    animation: wiredEye 0.5s ease-in-out infinite !important;
}

@keyframes wiredEye {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* 眼镜 */
.glasses {
    position: absolute;
    top: 20px;
    left: 6px;
    width: 18px;
    height: 12px;
    border: 2px solid #444;
    border-radius: 3px;
    background: rgba(200, 230, 255, 0.15);
}

.glasses-arm {
    position: absolute;
    top: 3px;
    right: -18px;
    width: 20px;
    height: 2px;
    background: #444;
}

/* 鼻子 */
.nose {
    position: absolute;
    top: 28px;
    left: -5px;
    width: 8px;
    height: 10px;
    background: #e8a090;
    border-radius: 50% 0 0 50%;
}

/* 嘴巴 */
.mouth {
    position: absolute;
    bottom: 10px;
    left: 12px;
    width: 6px;
    height: 2px;
    background: #c97a6a;
    border-radius: 0 0 3px 3px;
    transition: all 0.3s;
}

/* 喝咖啡嘴巴 */
.mouth.drinking {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c97a6a;
}

/* 疲惫嘴巴 */
.mouth.tired {
    width: 8px;
    height: 2px;
    border-radius: 2px;
    transform: rotate(5deg);
}

/* 打哈欠嘴巴 */
.mouth.yawning {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a05a4a;
    animation: yawnPulse 2s ease-in-out infinite;
}

@keyframes yawnPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* 微笑嘴巴 */
.mouth.smile {
    width: 10px;
    height: 5px;
    border-radius: 0 0 10px 10px;
    background: transparent;
    border-bottom: 3px solid #c97a6a;
}

/* 耳朵 */
.ear {
    position: absolute;
    top: 25px;
    right: -4px;
    width: 10px;
    height: 14px;
    background: #f2bbad;
    border-radius: 50%;
    border: 2px solid #333;
    z-index: -1;
}

/* 脖子 */
.neck {
    width: 18px;
    height: 10px;
    background: #f2bbad;
    margin-left: 18px;
}

/* 身体 */
.body {
    position: relative;
    bottom: -2px;
    width: 60px;
    height: 65px;
    background: #4a90d9;
    border-radius: 12px 12px 8px 8px;
    border: 3px solid #333;
}

/* 手臂 - 从身体延伸 */
.arm {
    position: absolute;
    top: 10px;
    left: -25px;
    z-index: 60;
    transition: transform 0.4s ease;
}

/* 手臂拿咖啡状态 */
.arm.grab-coffee {
    transform: rotate(30deg) translateX(-20px) translateY(-30px);
}

.arm-upper {
    position: relative;
    width: 50px;
    height: 16px;
    background: #4a90d9;
    border-radius: 8px;
    border: 3px solid #333;
    transform: rotate(-40deg);
    transform-origin: right center;
}

.arm-lower {
    position: absolute;
    top: 6px;
    left: -40px;
    width: 50px;
    height: 14px;
    background: #4a90d9;
    border-radius: 8px;
    border: 3px solid #333;
    transform: rotate(55deg);
    transform-origin: right center;
    animation: armMove 0.35s ease-in-out infinite;
}

@keyframes armMove {

    0%,
    100% {
        transform: rotate(55deg);
    }

    50% {
        transform: rotate(58deg);
    }
}

/* 低能量时手臂动作变慢 */
.arm-lower.slow {
    animation: armMoveSlow 0.8s ease-in-out infinite !important;
}

@keyframes armMoveSlow {

    0%,
    100% {
        transform: rotate(55deg);
    }

    50% {
        transform: rotate(56deg);
    }
}

/* 咖啡因超载手臂快速 */
.arm-lower.hyper {
    animation: armMoveHyper 0.12s ease-in-out infinite !important;
}

@keyframes armMoveHyper {

    0%,
    100% {
        transform: rotate(54deg);
    }

    50% {
        transform: rotate(60deg);
    }
}

/* 手 */
.hand {
    position: absolute;
    left: -16px;
    top: 2px;
    width: 18px;
    height: 12px;
    background: #f2bbad;
    border-radius: 8px;
    border: 2px solid #daa090;
}

.fingers {
    position: absolute;
    bottom: -6px;
    left: 2px;
    display: flex;
    gap: 2px;
}

.finger {
    width: 3px;
    height: 8px;
    background: #f2bbad;
    border-radius: 2px;
    border: 1px solid #daa090;
    animation: fingerType 0.2s ease-in-out infinite;
}

.finger:nth-child(1) {
    animation-delay: 0s;
}

.finger:nth-child(2) {
    animation-delay: 0.06s;
}

.finger:nth-child(3) {
    animation-delay: 0.12s;
}

.finger:nth-child(4) {
    animation-delay: 0.03s;
}

@keyframes fingerType {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

/* 低能量时手指动作变慢 */
.finger.slow {
    animation: fingerTypeSlow 0.5s ease-in-out infinite !important;
}

@keyframes fingerTypeSlow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(2px);
    }
}

/* 咖啡因超载手指快速 */
.finger.hyper {
    animation: fingerTypeHyper 0.08s ease-in-out infinite !important;
}

@keyframes fingerTypeHyper {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

/* 腿 - 在桌子下面 */
.legs {
    position: absolute;
    bottom: 130px;
    left: 430px;
    z-index: 35;
}

.thigh {
    position: absolute;
    width: 55px;
    height: 20px;
    background: #3a3a5c;
    border-radius: 8px;
    border: 2px solid #333;
}

.thigh-left {
    top: 0;
    left: 0;
}

.thigh-right {
    top: 0;
    left: 10px;
}

.lower-leg {
    position: absolute;
    top: 14px;
    width: 16px;
    height: 72px;
    background: #3a3a5c;
    border-radius: 5px;
    border: 2px solid #333;
}

.lower-leg-left {
    left: -5px;
    transform: rotate(-1deg);
}

.lower-leg-right {
    left: -10px;
    transform: rotate(5deg);
}

.foot {
    position: absolute;
    top: 79px;
    width: 25px;
    height: 10px;
    background: #2a2a3c;
    border-radius: 3px;
    border: 2px solid #333;
}

.foot-left {
    left: -27px;
}

.foot-right {
    left: -10px;
}

/* 咖啡杯 */
.coffee {
    position: absolute;
    bottom: 138px;
    left: 80px;
    width: 32px;
    height: 36px;
    background: linear-gradient(180deg, #fff 0%, #e8e0d8 100%);
    border-radius: 2px 2px 6px 6px;
    border: 2px solid #333;
    z-index: 53;
    cursor: pointer;
    transition: transform 0.3s;
}

.coffee:hover {
    transform: scale(1.05);
}

.coffee.lifted {
    transform: translateY(-55px) translateX(290px) rotate(40deg);
    z-index: 100;
}

/* 低能量时咖啡杯闪烁提示 */
.coffee.highlight {
    animation: coffeeHighlight 1s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 200, 100, 0.8);
}

@keyframes coffeeHighlight {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 200, 100, 0.5);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 200, 100, 1);
    }
}

.coffee-handle {
    position: absolute;
    right: -8px;
    top: 8px;
    width: 8px;
    height: 15px;
    border: 2px solid #bbb;
    border-left: none;
    border-radius: 0 6px 6px 0;
}

.coffee-liquid {
    position: absolute;
    bottom: 4px;
    left: 3px;
    width: 24px;
    height: 26px;
    background: #4a2c2a;
    border-radius: 0 0 4px 4px;
    transition: height 0.5s ease;
}

.coffee-logo {
    position: absolute;
    top: 14px;
    left: 6px;
    width: 18px;
    height: 16px;
    border: 2px solid #ddd;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #999;
}

/* 蒸汽 */
.steam {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.5s;
}

.steam.hidden {
    opacity: 0;
}

.steam-line {
    position: absolute;
    width: 2px;
    height: 15px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    animation: steam 2s ease-in-out infinite;
}

.steam-line:nth-child(1) {
    left: -6px;
    animation-delay: 0s;
}

.steam-line:nth-child(2) {
    left: 0px;
    animation-delay: 0.35s;
}

.steam-line:nth-child(3) {
    left: 6px;
    animation-delay: 0.7s;
}

@keyframes steam {
    0% {
        opacity: 0;
        transform: translateY(0) scaleX(1);
    }

    30% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translateY(-18px) scaleX(0.3);
    }
}

/* 通用提示框样式 */
.hint-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
    pointer-events: none;
    white-space: nowrap;
    z-index: 200;
}

.hint-bubble.show {
    opacity: 1;
    transform: translateY(0);
}

.hint-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.95);
}

/* 续杯提示 */
.refill-hint {
    bottom: 180px;
    left: 55px;
}

/* 咖啡因超载提示 */
.caffeine-hint {
    bottom: 180px;
    left: 55px;
    background: linear-gradient(135deg, #ff9966, #ff5e62);
    color: white;
}

.caffeine-hint::after {
    border-top-color: #ff9966;
}

/* 显示器提示 */
.monitor-hint {
    bottom: 310px;
    left: 160px;
}

/* 低能量警告提示 */
.energy-warning {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff9966, #ff5e62);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 94, 98, 0.5);
    opacity: 0;
    transition: all 0.3s;
    z-index: 200;
    white-space: nowrap;
}

.energy-warning.show {
    opacity: 1;
    animation: warningBounce 0.5s ease;
}

@keyframes warningBounce {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.1);
    }
}

/* 困倦气泡 💤 */
.sleepy-bubble {
    position: absolute;
    top: -45px;
    right: -20px;
    font-size: 20px;
    opacity: 0;
    pointer-events: none;
    z-index: 102;
}

.sleepy-bubble.show {
    animation: sleepyFloat 2.5s ease-in-out infinite;
}

@keyframes sleepyFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translateY(-5px) scale(1);
    }

    80% {
        opacity: 1;
        transform: translateY(-15px) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translateY(-25px) scale(0.8);
    }
}

.cursor {
    display: inline-block;
    width: 4px;
    height: 8px;
    background: #fff;
    animation: cursorBlink 0.8s step-end infinite;
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* 电源按钮 */
.power-btn {
    position: absolute;
    bottom: 8px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: #4a4a4a;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #333;
    transition: all 0.3s;
    z-index: 10;
}

.power-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
}

.power-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border: 1px solid #666;
    border-radius: 50%;
    border-top-color: transparent;
}

.power-btn:hover {
    background: #5a5a5a;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* 电源指示灯 */
.power-light {
    position: absolute;
    bottom: 10px;
    left: 12px;
    width: 4px;
    height: 4px;
    background: #00ff00;
    border-radius: 50%;
    box-shadow: 0 0 4px #00ff00;
    transition: all 0.3s;
}

.power-light.off {
    background: #ff3333;
    box-shadow: 0 0 4px #ff3333;
}

/* 关机屏幕 */
.screen.off {
    background: #0a0a0a !important;
}

.screen.off * {
    display: none !important;
}

.screen.off .energy-bar-container {
    display: block !important;
    opacity: 0.3;
}

.screen.off::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scaleX(1);
    animation: screenOff 0.3s ease-out forwards;
}

@keyframes screenOff {
    0% {
        transform: translate(-50%, -50%) scaleX(1) scaleY(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scaleX(0.8) scaleY(0.02);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scaleX(0) scaleY(0);
        opacity: 0;
    }
}

/* 开机闪烁 */
.screen.booting {
    animation: screenBoot 0.8s ease-out;
}

@keyframes screenBoot {
    0% {
        filter: brightness(0);
    }

    20% {
        filter: brightness(1.5);
    }

    40% {
        filter: brightness(0.3);
    }

    60% {
        filter: brightness(1.2);
    }

    80% {
        filter: brightness(0.8);
    }

    100% {
        filter: brightness(1);
    }
}

/* 愤怒火苗 */
.angry-flame {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 100;
}

.angry-flame.show {
    display: block;
    animation: flameShake 0.1s ease-in-out infinite;
}

@keyframes flameShake {

    0%,
    100% {
        transform: translateX(-50%) rotate(-2deg);
    }

    50% {
        transform: translateX(-50%) rotate(2deg);
    }
}

.flame {
    position: relative;
    width: 24px;
    height: 36px;
}

.flame-core {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 28px;
    background: linear-gradient(to top, #ff6b35, #ff9500, #ffcc00);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flameFlicker 0.15s ease-in-out infinite alternate;
    box-shadow:
        0 0 10px #ff6b35,
        0 0 20px #ff9500,
        0 0 30px rgba(255, 150, 0, 0.5);
}

.flame-inner {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 10px;
    background: linear-gradient(to top, #fff5cc, #ffee88);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flameFlicker 0.1s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }

    100% {
        transform: translateX(-50%) scaleY(1.1) scaleX(0.9);
    }
}

/* 愤怒眉毛 */
.eyebrow {
    position: absolute;
    top: 20px;
    left: 9px;
    width: 10px;
    height: 3px;
    background: #452824;
    border-radius: 2px;
    transition: all 0.3s;
    opacity: 0;
}

.eyebrow.angry {
    opacity: 1;
    transform: rotate(-20deg);
}

/* 关机时停止动画 */
.stopped .finger {
    animation: none !important;
}

.stopped .arm-lower {
    animation: none !important;
    transform: rotate(45deg) !important;
}

.stopped .body-container {
    animation: none !important;
}

/* 嘴巴生气状态 */
.mouth.angry {
    width: 8px;
    height: 3px;
    border-radius: 0;
    background: #c97a6a;
    transform: scaleY(-1);
}

/* 喝咖啡时停止打字动画 */
.drinking-coffee .finger {
    animation: none !important;
}

.drinking-coffee .arm-lower {
    animation: none !important;
}

/* ========== 精细小狗样式 ========== */
.dog {
    position: absolute;
    bottom: 22px;
    left: 120px;
    width: 55px;
    height: 38px;
    z-index: 45;
    cursor: pointer;
    animation: dogWalk 8s ease-in-out infinite;
    transition: transform 0.3s;
}

@keyframes dogWalk {

    0%,
    100% {
        left: 100px;
        transform: scaleX(-1);
    }

    45% {
        left: 300px;
        transform: scaleX(-1);
    }

    50% {
        left: 300px;
        transform: scaleX(1);
    }

    95% {
        left: 100px;
        transform: scaleX(1);
    }
}

/* 小狗身体 */
.dog-body {
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: 32px;
    height: 20px;
    background: linear-gradient(180deg, #f5deb3 0%, #deb887 100%);
    border-radius: 50% 55% 45% 45%;
    border: 2px solid #8B4513;
    box-shadow: inset -3px -2px 5px rgba(139, 69, 19, 0.2);
}

.dog-body::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 8px;
    width: 8px;
    height: 6px;
    background: #c4a574;
    border-radius: 50%;
}

.dog-body::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 6px;
    width: 6px;
    height: 5px;
    background: #c4a574;
    border-radius: 50%;
}

/* 小狗头 */
.dog-head {
    position: absolute;
    bottom: 14px;
    left: -2px;
    width: 24px;
    height: 22px;
    background: linear-gradient(180deg, #f5deb3 0%, #e8d4a8 100%);
    border-radius: 50% 50% 45% 45%;
    border: 2px solid #8B4513;
    transition: transform 0.2s;
    z-index: 2;
}

.dog-head::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 7px;
    height: 6px;
    background: #c4a574;
    border-radius: 50%;
}

/* 小狗耳朵 */
.dog-ear {
    position: absolute;
    top: -12px;
    left: 2px;
    width: 8px;
    height: 14px;
    background: linear-gradient(180deg, #deb887 0%, #c4a574 100%);
    border-radius: 90% 30% 15% 15%;
    border: 2px solid #8B4513;
    transform: rotate(-15deg);
    transform-origin: bottom center;
    z-index: 1;
}

.dog-ear.right {
    left: auto;
    right: 2px;
    transform: rotate(15deg);
    transform-origin: bottom center;
    border-radius: 30% 90% 15% 15%;
}

/* 小狗眼睛 */
.dog-eye {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
}

.dog-eye::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
}

/* 小狗鼻子 */
.dog-nose {
    position: absolute;
    top: 12px;
    left: -1px;
    width: 6px;
    height: 5px;
    background: linear-gradient(135deg, #4a3728 0%, #2a1f18 100%);
    border-radius: 50% 50% 45% 45%;
}

.dog-nose::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 2px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

/* 小狗嘴巴 */
.dog-mouth {
    position: absolute;
    bottom: 2px;
    left: 6px;
    width: 8px;
    height: 3px;
    border-bottom: 2px solid #6b4423;
    border-radius: 0 0 50% 50%;
}

/* 小狗舌头 */
.dog-tongue {
    position: absolute;
    bottom: -2px;
    left: 9px;
    width: 5px;
    height: 6px;
    background: linear-gradient(180deg, #ff9999 0%, #ff6b6b 100%);
    border-radius: 40% 40% 50% 50%;
    border: 1px solid #cc5555;
    animation: tongueWag 0.5s ease-in-out infinite;
}

@keyframes tongueWag {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

/* 项圈 */
.dog-collar {
    position: absolute;
    bottom: 0px;
    left: 6px;
    width: 14px;
    height: 5px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 0 0 3px 3px;
    border: 1px solid #922b21;
}

.dog-collar::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: linear-gradient(135deg, #f4d03f 0%, #d4ac0d 100%);
    border-radius: 50%;
    border: 1px solid #9a7d0a;
}

/* 小狗腿 */
.dog-leg {
    position: absolute;
    bottom: 0;
    width: 7px;
    height: 12px;
    background: linear-gradient(180deg, #f5deb3 0%, #deb887 100%);
    border-radius: 3px 3px 4px 4px;
    border: 2px solid #8B4513;
    animation: dogLegMove 0.3s ease-in-out infinite;
}

.dog-leg::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    transform: translateX(-50%);
    width: 7px;
    height: 4px;
    background: #deb887;
    border-radius: 50%;
    border: 1px solid #8B4513;
    border-top: none;
}

.dog-leg.fl {
    left: 15px;
    animation-delay: 0s;
}

.dog-leg.fr {
    left: 22px;
    animation-delay: 0.15s;
}

.dog-leg.bl {
    left: 36px;
    animation-delay: 0.15s;
}

.dog-leg.br {
    left: 43px;
    animation-delay: 0s;
}

@keyframes dogLegMove {

    0%,
    100% {
        height: 12px;
    }

    50% {
        height: 9px;
    }
}

/* 小狗尾巴 */
.dog-tail {
    position: absolute;
    bottom: 18px;
    right: 5px;
    width: 6px;
    height: 16px;
    background: linear-gradient(90deg, #f5deb3 0%, #deb887 50%, #c4a574 100%);
    border-radius: 50% 50% 20% 20%;
    border: 2px solid #8B4513;
    transform-origin: bottom center;
    animation: tailWag 0.4s ease-in-out infinite;
}

@keyframes tailWag {

    0%,
    100% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }
}

/* 睡觉状态 */
.dog.sleeping {
    animation: none !important;
}

.dog.sleeping .dog-body {
    transform: scaleY(0.7) translateY(5px);
}

.dog.sleeping .dog-head {
    transform: rotate(-15deg) translateY(8px) translateX(-5px);
}

.dog.sleeping .dog-eye {
    width: 6px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: #333;
}

.dog.sleeping .dog-eye::before {
    display: none;
}

.dog.sleeping .dog-tongue {
    display: none;
}

.dog.sleeping .dog-leg {
    animation: none !important;
    height: 6px;
}

.dog.sleeping .dog-tail {
    animation: sleepTail 3s ease-in-out infinite !important;
}

@keyframes sleepTail {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

/* 跳跃状态 */
.dog.jumping {
    animation: dogJump 0.4s ease !important;
}

@keyframes dogJump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

/* 摇尾巴状态 */
.dog.wagging {
    animation: none !important;
}

.dog.wagging .dog-leg {
    animation: none !important;
}

.dog.wagging .dog-tail {
    animation: tailWagFast 0.15s ease-in-out infinite !important;
}

@keyframes tailWagFast {

    0%,
    100% {
        transform: rotate(-35deg);
    }

    50% {
        transform: rotate(35deg);
    }
}

/* 说话气泡 */
.dog-speech {
    position: absolute;
    bottom: 65px;
    left: 150px;
    background: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 15px;
    color: #080808;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
    pointer-events: none;
}

.dog-speech.show {
    opacity: 1;
    animation: speechPop 0.3s ease;
}

@keyframes speechPop {
    0% {
        transform: translateX(-50%) scale(0.5);
    }

    50% {
        transform: translateX(-50%) scale(1.1);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

.dog-speech::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
}

/* Zzz 动画 */
.dog-zzz {
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    opacity: 0;
    pointer-events: none;
}

.dog-zzz.show {
    animation: zzzFloat 2s ease-in-out infinite;
}

@keyframes zzzFloat {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) translateX(15px);
    }
}

/* ========== 加班模式样式 ========== */
.overtime-mode .code-line {
    animation: codeFlash 0.1s ease-in-out;
}

.overtime-mode .finger {
    animation: fingerType 0.08s ease-in-out infinite !important;
}

.overtime-mode .arm-lower {
    animation: armMove 0.15s ease-in-out infinite !important;
}

.overtime-mode .body-container {
    animation: bodyMove 1s ease-in-out infinite !important;
}

/* 头顶冒烟 */
.head-smoke {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 101;
}

.head-smoke.show {
    display: block;
}

.smoke-puff {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(150, 150, 150, 0.6);
    border-radius: 50%;
    animation: smokePuff 1.5s ease-out infinite;
}

.smoke-puff:nth-child(1) {
    left: -8px;
    animation-delay: 0s;
}

.smoke-puff:nth-child(2) {
    left: 0px;
    animation-delay: 0.3s;
}

.smoke-puff:nth-child(3) {
    left: 8px;
    animation-delay: 0.6s;
}

@keyframes smokePuff {
    0% {
        opacity: 0.8;
        transform: translateY(0) scale(0.5);
    }

    100% {
        opacity: 0;
        transform: translateY(-25px) scale(1.5);
    }
}

/* 加班提示 */
.overtime-hint {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
    opacity: 0;
    transition: all 0.3s;
    z-index: 200;
    white-space: nowrap;
}

.overtime-hint.show {
    opacity: 1;
    animation: hintPulse 0.5s ease;
}

@keyframes hintPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.1);
    }
}

/* 屏幕闪烁效果 */
.screen.overtime-screen {
    animation: screenGlow 0.5s ease-in-out infinite alternate;
}

@keyframes screenGlow {
    0% {
        box-shadow: inset 0 0 10px rgba(0, 255, 100, 0.1);
    }

    100% {
        box-shadow: inset 0 0 20px rgba(0, 255, 100, 0.3);
    }
}