/* AI Agent - Lancelot Assistant Styles */

/* Container - Fixed position at bottom right */
.ai-agent-container {
    position: fixed;
    bottom: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    /* Safe area for iPhone notch */
    right: 20px;
    right: calc(20px + env(safe-area-inset-right, 0px));
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang HK', sans-serif;
}

/* Avatar Button - The clickable character */
.ai-agent-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ai-agent-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
}

.ai-agent-avatar.speaking {
    animation: pulse-glow 1s infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    }

    50% {
        box-shadow: 0 4px 30px rgba(102, 126, 234, 0.8);
    }
}

/* Physics Avatar Container */
.ai-agent-avatar-3d {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Physics avatar canvas */
.physics-avatar-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Legacy: The stick knight SVG scene (kept for fallback) */
.stick-knight-scene {
    width: 100%;
    height: 100%;
}

/* Fallback Knight Icon (when SVG not loaded) */
.ai-agent-avatar-fallback {
    font-size: 36px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: none;
}

/* ============================================
   STICK KNIGHT CHARACTER STYLES
   ============================================ */

/* Lancelot - The Gold Knight */
.lancelot {
    --knight-gold: #FFD700;
    --knight-gold-dark: #B8860B;
    --knight-gold-light: #FFEC8B;
    --cape-red: #DC143C;
    --sword-silver: #C0C0C0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lancelot .head {
    fill: var(--knight-gold);
    stroke: var(--knight-gold-dark);
    stroke-width: 1;
}

.lancelot .helmet {
    fill: var(--knight-gold);
    stroke: var(--knight-gold-dark);
    stroke-width: 1.5;
}

.lancelot .helmet-plume {
    fill: var(--cape-red);
    stroke: #8B0000;
    stroke-width: 0.5;
}

.lancelot .visor {
    fill: #1a1a2e;
    stroke: var(--knight-gold-dark);
    stroke-width: 0.5;
}

.lancelot .eye {
    fill: #60a5fa;
    filter: drop-shadow(0 0 2px #60a5fa);
}

.lancelot .body,
.lancelot .arm,
.lancelot .leg {
    stroke: var(--knight-gold);
    stroke-width: 3;
    fill: none;
}

.lancelot .armor-chest {
    fill: var(--knight-gold);
    stroke: var(--knight-gold-dark);
    stroke-width: 1;
}

.lancelot .cape {
    fill: var(--cape-red);
    stroke: #8B0000;
    stroke-width: 0.5;
    opacity: 0.9;
}

.lancelot .sword {
    stroke: var(--sword-silver);
    stroke-width: 2;
    fill: none;
}

.lancelot .sword-blade {
    fill: linear-gradient(to right, #E8E8E8, #A0A0A0);
    stroke: #808080;
    stroke-width: 0.5;
}

.lancelot .sword-hilt {
    fill: var(--knight-gold);
    stroke: var(--knight-gold-dark);
    stroke-width: 0.5;
}

.lancelot .shield {
    fill: var(--knight-gold);
    stroke: var(--knight-gold-dark);
    stroke-width: 1;
}

/* Enemy Knights - White */
.enemy {
    --enemy-color: #FFFFFF;
    --enemy-dark: #CCCCCC;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.enemy .head {
    fill: var(--enemy-color);
    stroke: var(--enemy-dark);
    stroke-width: 1;
}

.enemy .body,
.enemy .arm,
.enemy .leg {
    stroke: var(--enemy-color);
    stroke-width: 2.5;
    fill: none;
}

.enemy .weapon {
    stroke: var(--enemy-dark);
    stroke-width: 1.5;
    fill: none;
}

/* ============================================
   PROFESSIONAL ANIMATIONS - Smooth & Centered
   ============================================ */

/* Base knight - all transforms relative to center */
.stick-knight-scene .lancelot {
    transform-origin: center center;
}

.stick-knight-scene .knight-body {
    transform-origin: 0 10px;
}

/* ============================================
   IDLE ANIMATION - Gentle breathing
   ============================================ */

.scene-idle .knight-body {
    animation: idle-breathe 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes idle-breathe {

    0%,
    100% {
        transform: translate(50px, 52px) scale(1);
    }

    50% {
        transform: translate(50px, 51px) scale(1.01);
    }
}

.scene-idle .cape {
    animation: idle-cape 4s ease-in-out infinite;
    transform-origin: 0 5px;
}

@keyframes idle-cape {

    0%,
    100% {
        transform: scaleX(1) skewX(0deg);
    }

    50% {
        transform: scaleX(1.02) skewX(2deg);
    }
}

.scene-idle .sword-arm {
    animation: idle-sword 5s ease-in-out infinite;
    transform-origin: 0 6px;
}

@keyframes idle-sword {

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

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

/* ============================================
   SLEEPING ANIMATION - Lying down peacefully
   ============================================ */

.scene-sleep .knight-body {
    animation: sleep-pose 0.5s ease-out forwards, sleep-breathe 4s ease-in-out 0.5s infinite;
    transform: translate(50px, 58px) rotate(80deg) scale(0.9);
}

@keyframes sleep-pose {
    from {
        transform: translate(50px, 52px) rotate(0deg) scale(1);
    }

    to {
        transform: translate(50px, 58px) rotate(80deg) scale(0.9);
    }
}

@keyframes sleep-breathe {

    0%,
    100% {
        transform: translate(50px, 58px) rotate(80deg) scale(0.9);
    }

    50% {
        transform: translate(50px, 58px) rotate(80deg) scale(0.92);
    }
}

.scene-sleep .eye-l,
.scene-sleep .eye-r {
    animation: eyes-closed 4s ease-in-out infinite;
}

@keyframes eyes-closed {

    0%,
    40%,
    60%,
    100% {
        transform: scaleY(0.1);
        opacity: 0.3;
    }

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

.scene-sleep .zzz-group {
    animation: zzz-show 0.3s ease-out 0.5s forwards;
}

@keyframes zzz-show {
    to {
        opacity: 1;
    }
}

.scene-sleep .zzz-group text:nth-child(1) {
    animation: zzz-float 2.5s ease-in-out infinite;
}

.scene-sleep .zzz-group text:nth-child(2) {
    animation: zzz-float 2.5s ease-in-out 0.4s infinite;
}

.scene-sleep .zzz-group text:nth-child(3) {
    animation: zzz-float 2.5s ease-in-out 0.8s infinite;
}

@keyframes zzz-float {

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

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

/* ============================================
   SWORD PRACTICE - Skilled movements
   ============================================ */

.scene-practice .knight-body {
    animation: practice-stance 2s ease-in-out infinite;
}

@keyframes practice-stance {

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

    25% {
        transform: translate(48px, 52px);
    }

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

.scene-practice .sword-arm {
    animation: practice-swing 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: 0 6px;
}

@keyframes practice-swing {

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

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

    40% {
        transform: rotate(40deg);
    }

    60% {
        transform: rotate(-30deg);
    }

    80% {
        transform: rotate(20deg);
    }
}

.scene-practice .legs {
    animation: practice-legs 1.2s ease-in-out infinite;
}

@keyframes practice-legs {

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

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

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

.scene-practice .slash-effects {
    animation: practice-slash 1.2s ease-out infinite;
}

@keyframes practice-slash {

    0%,
    15%,
    45%,
    100% {
        opacity: 0;
    }

    20%,
    40% {
        opacity: 0.6;
    }
}

/* ============================================
   MARVEL-STYLE EPIC COMBAT - Fast, dynamic, exciting!
   ============================================ */

/* The entire scene gets subtle zoom during combat */
.scene-combat .stick-knight-scene {
    animation: marvel-zoom 10s ease-in-out infinite, marvel-shake 10s linear infinite, marvel-grade 10s ease-in-out infinite;
}

@keyframes marvel-zoom {

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

    30% {
        transform: scale(1.05);
    }

    /* Zoom in for action */
    50% {
        transform: scale(1.1);
    }

    /* Peak action zoom */
    70% {
        transform: scale(1.02);
    }
}

/* Impact shake synced to hit moments */
@keyframes marvel-shake {

    0%,
    5%,
    11%,
    15%,
    23%,
    30%,
    40%,
    48%,
    60%,
    70%,
    100% {
        transform: translate(0, 0);
    }

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

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

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

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

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

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

    62% {
        transform: translate(-3px, 2px);
    }

    63% {
        transform: translate(3px, -2px);
    }
}

/* Color grading: more cinematic during combat */
@keyframes marvel-grade {

    0%,
    100% {
        filter: saturate(1) contrast(1);
    }

    30% {
        filter: saturate(1.15) contrast(1.08);
    }

    50% {
        filter: saturate(1.25) contrast(1.15);
    }

    70% {
        filter: saturate(1.08) contrast(1.05);
    }
}

/* Enemy appears dramatically */
.scene-combat .enemy-1 {
    animation: enemy-dramatic-enter 10s ease-in-out infinite;
}

@keyframes enemy-dramatic-enter {
    0% {
        opacity: 0;
        transform: translateX(25px) scale(0.5);
    }

    5% {
        opacity: 1;
        transform: translateX(5px) scale(1.1);
    }

    /* Dramatic entrance */
    8% {
        transform: translateX(0) scale(1);
    }

    12% {
        transform: translateX(-2px);
    }

    /* Recoil from hit 1 */
    15% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-10deg);
    }

    /* Hit 2 */
    28% {
        transform: translateX(-3px) rotate(0);
    }

    40% {
        transform: translateX(-8px) rotate(-15deg);
    }

    /* Hit 3 */
    50% {
        transform: translateX(-5px) rotate(5deg);
    }

    /* Recover */
    60% {
        transform: translateX(-12px) rotate(-25deg) scale(0.9);
    }

    /* Final hit! */
    65% {
        opacity: 0.5;
        transform: translateX(-20px) rotate(-45deg) scale(0.7);
    }

    /* Flying back */
    70%,
    100% {
        opacity: 0;
        transform: translateX(-30px) rotate(-90deg) scale(0.5);
    }

    /* K.O. */
}

/* LANCELOT - Marvel hero movements */
.scene-combat .knight-body {
    animation: marvel-hero-action 10s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes marvel-hero-action {

    /* Ready stance */
    0%,
    3% {
        transform: translate(50px, 52px) scale(1);
    }

    /* COMBO 1: Quick jab */
    5% {
        transform: translate(48px, 52px) scale(0.95);
    }

    /* Wind up */
    7% {
        transform: translate(58px, 50px) scale(1.05);
    }

    /* STRIKE! */
    9% {
        transform: translate(55px, 52px) scale(1);
    }

    /* COMBO 2: Spinning slash */
    15% {
        transform: translate(52px, 50px) rotate(-10deg);
    }

    /* Prepare */
    18% {
        transform: translate(56px, 48px) rotate(15deg) scale(1.1);
    }

    /* Spin hit! */
    22% {
        transform: translate(54px, 52px) rotate(0deg) scale(1);
    }

    /* DODGE - Matrix style */
    28% {
        transform: translate(45px, 56px) rotate(-20deg) scale(0.9);
    }

    /* Lean back dodge */
    32% {
        transform: translate(50px, 52px) rotate(0deg) scale(1);
    }

    /* COMBO 3: Jump attack */
    38% {
        transform: translate(50px, 48px) scale(1.05);
    }

    /* Jump up */
    42% {
        transform: translate(62px, 45px) scale(1.15);
    }

    /* Aerial strike! */
    46% {
        transform: translate(58px, 54px) scale(1);
    }

    /* Land */

    /* FINAL BLOW - Slow motion feel */
    55% {
        transform: translate(52px, 50px) scale(0.9);
    }

    /* Crouch */
    58% {
        transform: translate(50px, 52px) scale(1);
    }

    /* Pause... */
    62% {
        transform: translate(68px, 46px) scale(1.2);
    }

    /* ULTIMATE STRIKE! */
    68% {
        transform: translate(55px, 52px) scale(1);
    }

    /* Victory pose */
    75%,
    100% {
        transform: translate(50px, 52px) scale(1);
    }
}

/* Sword arm - Fast slashing motions */
.scene-combat .sword-arm {
    animation: marvel-sword-combo 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: 0 6px;
}

@keyframes marvel-sword-combo {

    0%,
    4% {
        transform: rotate(-30deg);
    }

    /* Ready */

    /* Quick jab */
    6%,
    8% {
        transform: rotate(60deg);
    }

    10% {
        transform: rotate(-20deg);
    }

    /* Spinning slash */
    16% {
        transform: rotate(-60deg);
    }

    18% {
        transform: rotate(120deg);
    }

    /* Full spin! */
    22% {
        transform: rotate(0deg);
    }

    /* Dodge pose */
    28%,
    32% {
        transform: rotate(-45deg);
    }

    /* Jump attack - overhead strike */
    40% {
        transform: rotate(-90deg);
    }

    /* Wind up high */
    43% {
        transform: rotate(100deg);
    }

    /* Slam down! */
    48% {
        transform: rotate(20deg);
    }

    /* Ultimate strike */
    56%,
    58% {
        transform: rotate(-80deg);
    }

    /* Charge... */
    62% {
        transform: rotate(140deg);
    }

    /* MAXIMUM SLASH! */
    68% {
        transform: rotate(40deg);
    }

    /* Victory pose */
    75%,
    100% {
        transform: rotate(45deg);
    }
}

/* Cape flows dramatically during combat */
.scene-combat .cape {
    animation: marvel-cape-flow 10s ease-in-out infinite;
    transform-origin: 0 5px;
}

@keyframes marvel-cape-flow {

    0%,
    5% {
        transform: skewX(0deg) scaleY(1);
    }

    7% {
        transform: skewX(20deg) scaleY(1.1);
    }

    /* Flow back on strike */
    15% {
        transform: skewX(-15deg) scaleY(1);
    }

    18% {
        transform: skewX(25deg) scaleY(1.2);
    }

    /* Spin */
    30% {
        transform: skewX(-10deg) scaleY(0.9);
    }

    /* Dodge */
    42% {
        transform: skewX(30deg) scaleY(1.3);
    }

    /* Jump */
    62% {
        transform: skewX(35deg) scaleY(1.4);
    }

    /* Ultimate */
    75%,
    100% {
        transform: skewX(5deg) scaleY(1);
    }
}

/* SLASH EFFECTS - Multiple trails */
.scene-combat .slash-effects {
    animation: marvel-slash-trails 10s linear infinite;
}

@keyframes marvel-slash-trails {

    0%,
    5% {
        opacity: 0;
    }

    6%,
    9% {
        opacity: 1;
    }

    /* Jab trail */
    11% {
        opacity: 0;
    }

    16%,
    20% {
        opacity: 1;
    }

    /* Spin trail */
    23% {
        opacity: 0;
    }

    41%,
    45% {
        opacity: 1;
    }

    /* Jump trail */
    48% {
        opacity: 0;
    }

    60%,
    65% {
        opacity: 1;
    }

    /* Ultimate trail - brightest */
    70%,
    100% {
        opacity: 0;
    }
}

/* SPARKLES - Impact effects */
.scene-combat .sparkles {
    animation: marvel-impact-sparks 10s ease-out infinite;
}

@keyframes marvel-impact-sparks {

    0%,
    6% {
        opacity: 0;
        transform: scale(0);
    }

    7%,
    10% {
        opacity: 1;
        transform: scale(1.5);
    }

    /* Hit 1 spark */
    12% {
        opacity: 0;
        transform: scale(0);
    }

    17%,
    18% {
        opacity: 0;
        transform: scale(0);
    }

    19%,
    22% {
        opacity: 1;
        transform: scale(1.8);
    }

    /* Spin hit spark */
    25% {
        opacity: 0;
        transform: scale(0);
    }

    41%,
    42% {
        opacity: 0;
        transform: scale(0);
    }

    43%,
    46% {
        opacity: 1;
        transform: scale(2);
    }

    /* Jump hit spark */
    49% {
        opacity: 0;
        transform: scale(0);
    }

    60%,
    61% {
        opacity: 0;
        transform: scale(0);
    }

    62%,
    68% {
        opacity: 1;
        transform: scale(3);
    }

    /* ULTIMATE SPARK! */
    72%,
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Impact flash: super quick white strobe on big hits */
.scene-combat .impact-flash {
    animation: impact-flash 10s linear infinite;
    mix-blend-mode: overlay;
}

@keyframes impact-flash {

    0%,
    6.6%,
    8.2%,
    18.6%,
    20.2%,
    43.6%,
    45.2%,
    62.6%,
    64.5%,
    100% {
        opacity: 0;
    }

    6.9%,
    7.1% {
        opacity: 0.22;
    }

    /* Hit 1 */
    18.9%,
    19.1% {
        opacity: 0.18;
    }

    /* Spin hit */
    43.9%,
    44.1% {
        opacity: 0.25;
    }

    /* Jump hit */
    62.9%,
    63.2% {
        opacity: 0.35;
    }

    /* Ultimate */
}

/* Shockwave ring on hits */
.scene-combat .shockwave {
    animation: shockwave-burst 10s ease-out infinite;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

@keyframes shockwave-burst {

    0%,
    6.8% {
        opacity: 0;
        r: 0;
    }

    7.0% {
        opacity: 0.9;
        r: 1;
    }

    8.5% {
        opacity: 0;
        r: 14;
    }

    18.8% {
        opacity: 0;
        r: 0;
    }

    19.0% {
        opacity: 0.8;
        r: 1;
    }

    20.5% {
        opacity: 0;
        r: 16;
    }

    43.8% {
        opacity: 0;
        r: 0;
    }

    44.0% {
        opacity: 0.85;
        r: 1;
    }

    45.5% {
        opacity: 0;
        r: 18;
    }

    62.8% {
        opacity: 0;
        r: 0;
    }

    63.0% {
        opacity: 0.95;
        r: 1;
    }

    64.8% {
        opacity: 0;
        r: 22;
    }

    100% {
        opacity: 0;
        r: 0;
    }
}

/* Comic text popups */
.scene-combat .comic-text {
    animation: comic-pop 10s ease-out infinite;
}

@keyframes comic-pop {

    0%,
    6.5% {
        opacity: 0;
        transform: scale(0.7) rotate(-8deg);
    }

    7.0% {
        opacity: 1;
        transform: scale(1.15) rotate(6deg);
    }

    8.5% {
        opacity: 0;
        transform: scale(1.35) rotate(12deg);
    }

    18.5% {
        opacity: 0;
        transform: scale(0.7);
    }

    19.0% {
        opacity: 1;
        transform: scale(1.1) rotate(-6deg);
    }

    20.5% {
        opacity: 0;
        transform: scale(1.3) rotate(-12deg);
    }

    62.5% {
        opacity: 0;
        transform: scale(0.6);
    }

    63.0% {
        opacity: 1;
        transform: scale(1.25) rotate(10deg);
    }

    64.8% {
        opacity: 0;
        transform: scale(1.5) rotate(20deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.7);
    }
}

/* Combo counter - shows during combat, pulses on hits */
.scene-combat .combo-counter {
    animation: combo-counter 10s ease-out infinite;
}

@keyframes combo-counter {

    0%,
    5% {
        opacity: 0;
        transform: scale(0.8);
    }

    6% {
        opacity: 1;
        transform: scale(1);
    }

    7% {
        transform: scale(1.2);
    }

    9% {
        transform: scale(1);
    }

    18% {
        transform: scale(1.2);
    }

    20% {
        transform: scale(1);
    }

    43% {
        transform: scale(1.25);
    }

    45% {
        transform: scale(1);
    }

    62% {
        transform: scale(1.35);
    }

    66% {
        transform: scale(1);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Victory sparkles after combat */
.scene-combat .sparkles circle {
    animation: victory-twinkle 10s ease-out infinite;
}

.scene-combat .sparkles circle:nth-child(1) {
    animation-delay: 0s;
}

.scene-combat .sparkles circle:nth-child(2) {
    animation-delay: 0.1s;
}

.scene-combat .sparkles circle:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes victory-twinkle {

    0%,
    72% {
        opacity: 0;
    }

    75% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 0.5;
        transform: scale(1.5);
    }

    85% {
        opacity: 1;
        transform: scale(0.8);
    }

    90% {
        opacity: 0.5;
        transform: scale(1.2);
    }

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

/* Second enemy - appears and gets defeated too */
.scene-combat .enemy-2 {
    animation: enemy2-dramatic 10s ease-in-out infinite;
}

@keyframes enemy2-dramatic {

    0%,
    15% {
        opacity: 0;
        transform: translateX(20px);
    }

    20% {
        opacity: 0.8;
        transform: translateX(0);
    }

    35% {
        opacity: 0.8;
        transform: translateX(-3px) rotate(-5deg);
    }

    /* Hit */
    45% {
        opacity: 0.5;
        transform: translateX(-15px) rotate(-30deg);
    }

    /* Flying */
    55%,
    100% {
        opacity: 0;
        transform: translateX(-25px) rotate(-60deg);
    }
}

/* Speed lines - motion blur effect */
.scene-combat .speed-lines {
    animation: speed-blur 10s linear infinite;
}

@keyframes speed-blur {

    0%,
    4% {
        opacity: 0;
    }

    5%,
    8% {
        opacity: 0.8;
    }

    /* Jab speed */
    10% {
        opacity: 0;
    }

    16%,
    20% {
        opacity: 0.9;
    }

    /* Spin speed */
    24% {
        opacity: 0;
    }

    40%,
    44% {
        opacity: 1;
    }

    /* Jump speed */
    48% {
        opacity: 0;
    }

    58%,
    64% {
        opacity: 1;
    }

    /* Ultimate speed - strongest */
    70%,
    100% {
        opacity: 0;
    }
}

/* ============================================
   REST - Sitting peacefully
   ============================================ */

.scene-rest .knight-body {
    animation: rest-sit 0.5s ease-out forwards;
}

@keyframes rest-sit {
    from {
        transform: translate(50px, 52px);
    }

    to {
        transform: translate(50px, 58px) scale(0.95);
    }
}

.scene-rest .legs {
    animation: rest-legs 0.5s ease-out forwards;
    transform-origin: 0 15px;
}

@keyframes rest-legs {
    to {
        transform: rotate(30deg) scaleY(0.7);
    }
}

.scene-rest .sword-arm {
    animation: rest-sword 0.5s ease-out forwards;
}

@keyframes rest-sword {
    to {
        transform: rotate(-60deg);
    }
}

/* ============================================
   SCENE TRANSITIONS - Smooth crossfade
   ============================================ */

.stick-knight-scene {
    transition: none;
}

.scene-transition {
    opacity: 0.8;
}

/* Ground/Arena styling */
.arena-ground {
    fill: none;
    stroke: rgba(255, 215, 0, 0.3);
    stroke-width: 1;
    stroke-dasharray: 2, 4;
}

/* ============================================
   SPEAKING ANIMATION
   ============================================ */

.ai-agent-avatar.speaking .stick-knight-scene .lancelot {
    animation: knight-speaking 0.5s ease-in-out infinite;
}

@keyframes knight-speaking {

    0%,
    100% {
        transform: translate(25px, 28px) scale(1);
    }

    50% {
        transform: translate(25px, 27px) scale(1.02);
    }
}

.ai-agent-avatar.speaking .stick-knight-scene .lancelot .head-group {
    animation: head-bob 0.3s ease-in-out infinite;
}

@keyframes head-bob {

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

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

.ai-agent-avatar.speaking .stick-knight-scene .lancelot .sword-arm {
    animation: sword-wave 0.8s ease-in-out infinite;
    transform-origin: 0 10px;
}

@keyframes sword-wave {

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

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

    75% {
        transform: rotate(-5deg);
    }
}

/* Status indicator */
.ai-agent-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    border: 3px solid white;
    border-radius: 50%;
}

.ai-agent-status.offline {
    background: #94a3b8;
}

.ai-agent-status.thinking {
    background: #f59e0b;
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Chatbox */
.ai-agent-chatbox {
    position: absolute;
    bottom: 90px;
    right: 0;
    width: 360px;
    max-height: 500px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-agent-chatbox.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Chat Header */
.ai-agent-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-agent-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ai-agent-header-info {
    flex: 1;
}

.ai-agent-header-name {
    font-weight: 600;
    font-size: 16px;
}

.ai-agent-header-status {
    font-size: 12px;
    opacity: 0.8;
}

.ai-agent-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-agent-close:hover {
    opacity: 1;
}

/* Chat Messages */
.ai-agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    background: #f8fafc;
}

.ai-agent-message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    animation: message-in 0.3s ease-out;
}

@keyframes message-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-agent-message.assistant {
    background: white;
    color: #1e293b;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ai-agent-message.user {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.ai-agent-message.typing {
    display: flex;
    gap: 4px;
    padding: 16px 20px;
}

.ai-agent-message.typing span {
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing-dot 1.4s infinite;
}

.ai-agent-message.typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-agent-message.typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-dot {

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

    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Chat Input */
.ai-agent-input-area {
    padding: 16px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.ai-agent-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-agent-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.ai-agent-input:focus {
    border-color: #667eea;
}

.ai-agent-input::placeholder {
    color: #94a3b8;
}

.ai-agent-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.ai-agent-btn-voice {
    background: #f1f5f9;
    color: #64748b;
}

.ai-agent-btn-voice:hover {
    background: #e2e8f0;
    color: #475569;
}

.ai-agent-btn-voice {
    position: relative;
    overflow: visible;
}

.ai-agent-btn-voice.recording {
    background: #ef4444;
    color: white;
    animation: pulse-recording 1s infinite;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3),
        0 0 20px rgba(239, 68, 68, 0.5);
}

/* Ripple effect when recording */
.ai-agent-btn-voice.recording::before,
.ai-agent-btn-voice.recording::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #ef4444;
    transform: translate(-50%, -50%) scale(1);
    animation: ripple-wave 1.5s ease-out infinite;
    pointer-events: none;
}

.ai-agent-btn-voice.recording::after {
    animation-delay: 0.5s;
}

@keyframes pulse-recording {

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

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

@keyframes ripple-wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.ai-agent-btn-send {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.ai-agent-btn-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ai-agent-btn-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Quick Actions */
.ai-agent-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 16px;
    background: white;
}

.ai-agent-quick-btn {
    padding: 8px 14px;
    background: #f1f5f9;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-agent-quick-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Welcome Message */
.ai-agent-welcome {
    text-align: center;
    padding: 20px;
}

.ai-agent-welcome-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.ai-agent-welcome h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #1e293b;
}

.ai-agent-welcome p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .ai-agent-container {
        bottom: 10px;
        right: 10px;
    }

    .ai-agent-avatar {
        width: 60px;
        height: 60px;
    }

    .ai-agent-chatbox {
        width: calc(100vw - 20px);
        right: -5px;
        bottom: 75px;
        max-height: 70vh;
    }

    .ai-agent-messages {
        max-height: 45vh;
    }
}

/* Lancelot Knight Theme Override */
.ai-agent-container.knight-theme .ai-agent-avatar {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.4);
}

.ai-agent-container.knight-theme .ai-agent-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
}

.ai-agent-container.knight-theme .ai-agent-message.user {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
}

.ai-agent-container.knight-theme .ai-agent-btn-send {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
}

.ai-agent-container.knight-theme .ai-agent-input:focus {
    border-color: #2d5a87;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .ai-agent-chatbox {
        background: #1e293b;
    }

    .ai-agent-messages {
        background: #0f172a;
    }

    .ai-agent-message.assistant {
        background: #334155;
        color: #f1f5f9;
    }

    .ai-agent-input-area {
        background: #1e293b;
        border-color: #334155;
    }

    .ai-agent-input {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .ai-agent-quick-btn {
        background: #334155;
        color: #e2e8f0;
    }

    .ai-agent-quick-btn:hover {
        background: #475569;
    }
}