/* ============================================================================
 * style_avatar.css - สไตล์ชีทกายวิภาคและหน้าตาของ EDUBOT (Avatar Anatomy & Styling)
 * [Ultimate Edition: Responsive Scaling, Pivot Points & Prop Slots]
 * ============================================================================ */

:root {
    /* --- สีหลัก (LED & Brand Colors) --- */
    --led-primary: #00e5ff; 
    --led-red: #f85149;
    --led-pink: #d2a8ff; 
    --led-soft: #a5d6ff; 
    
    /* --- มิติของดวงตาดิจิทัล (HUD Eyes) --- */
    --hud-eye-w: 36vmin;  
    --hud-eye-h: 49vmin;  
    --hud-gap: 28vmin;    
    --hud-radius: 40%;    

    /* --- สีวัสดุหุ่นยนต์ (Armor & Joints) --- */
    --armor-white: #f0f4f8;
    --armor-shadow: #c1cbd7;
    --joint-black: #1a1c23;

    /* --- ค่าความเร็วพื้นฐาน --- */
    --breathe-speed: 4s;
    --transition-speed: 0.6s;
    --bezier-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); 
}

/* =========================================
   1. โครงสร้างพื้นฐาน (Base Layout)
   ========================================= */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; cursor: pointer; font-family: 'Sarabun', sans-serif;
    display: flex; justify-content: center; align-items: center;
    background-color: transparent;
}

/* ปุ่ม Fullscreen */
.fullscreen-btn {
    position: absolute; bottom: 24px; right: 24px; z-index: 1000;
    background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px);
    border: none; border-radius: 50%; width: 48px; height: 48px; 
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; color: white; opacity: 0.3; transition: all 0.3s;
}
.fullscreen-btn:hover { opacity: 1; background: rgba(88, 166, 255, 0.6); transform: scale(1.15); box-shadow: 0 4px 20px rgba(88, 166, 255, 0.4); }
.fullscreen-btn svg { width: 24px; height: 24px; fill: currentColor; }
body.hacker-mode .fullscreen-btn { display: none !important; }

/* การจัดการ Theme (HUD vs ROBOT) */
#hud-container, #robot-container {
    display: none; 
    width: 100vw; height: 100vh;
    position: absolute; top: 0; left: 0;
    justify-content: center; align-items: center;
}
#hud-container.active, #robot-container.active { 
    display: flex; 
}

/* =========================================
   2. ดวงตาดิจิทัล (Digital HUD Eyes)
   ========================================= */
.eye-container {
    display: flex; align-items: center; justify-content: center; position: relative;
    gap: var(--hud-gap); transition: gap 0.5s var(--bezier-bounce);
}
.eye {
    background-color: var(--led-primary); width: var(--hud-eye-w); height: var(--hud-eye-h);
    border-radius: var(--hud-radius);
    box-shadow: 0 0 8vmin var(--led-primary), 0 0 20vmin rgba(88, 166, 255, 0.25);
    transform-origin: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ปรับสเกลดวงตาเมื่ออยู่ในหน้าจอหุ่นยนต์ */
.robot-eye-scaler { transform: scale(0.14); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.robot-theme .eye { width: var(--hud-eye-w); height: var(--hud-eye-h); border-radius: var(--hud-radius); box-shadow: 0 0 15px var(--led-primary); }

/* =========================================
   3. กายวิภาค EDUBOT (Anatomy & Skeletal Structure)
   ========================================= */

/* 🌟 การจัดการขนาดหุ่นยนต์ (Responsive Scaling) 🌟 */
.robot-wrapper {
    transform: scale(1); /* หดเหลือ 50% ให้พอดีช่องแชท */
    transform-origin: center center; 
    position: relative; perspective: 1000px;
    display: flex; flex-direction: column; align-items: center; 
    margin-top: -50px; /* ดันให้ตรงกลางกล่องข้อความ */
    transition: transform 0.5s ease;
}

/* ขยายร่าง 1.5 เท่า เมื่อเปิดแท็บใหม่บนมือถือหรือแท็บเล็ต */
body.hacker-mode .robot-wrapper {
    transform: scale(1.5);
    margin-top: 0;
}

/* ขยายร่าง 2.5 เท่า ให้เต็มตา เมื่อเปิดแท็บใหม่บนจอคอมพิวเตอร์ */
@media (min-width: 1024px) and (min-height: 700px) {
    body.hacker-mode .robot-wrapper {
        transform: scale(1);
    }
}

/* --- 3.1 เงาและเอฟเฟกต์ (Shadows & Effects) --- */
.floor-shadow {
    position: absolute; bottom: -20px; width: 200px; height: 20px;
    background: rgba(0,0,0,0.4); border-radius: 50%; filter: blur(10px);
    animation: shadowBreathe var(--breathe-speed) infinite ease-in-out;
}
.head-symbols {
    position: absolute; top: -50px; right: -20px; width: 80px; height: 80px; pointer-events: none; z-index: 15;
}
.symbol-z {
    position: absolute; font-family: 'Sarabun', sans-serif; font-weight: 800;
    color: var(--led-primary); text-shadow: 0 0 8px var(--led-primary); opacity: 0; display: none;
}
.mood-sleep .symbol-z { display: block; }
.symbol-z.z1 { font-size: 28px; animation: floatUpAndFade 4s infinite linear; }
.symbol-z.z2 { font-size: 20px; animation: floatUpAndFade 4s infinite linear; animation-delay: 1.3s; }
.symbol-z.z3 { font-size: 15px; animation: floatUpAndFade 4s infinite linear; animation-delay: 2.6s; }

/* --- 3.2 ส่วนหัวและคอ (Head & Neck) --- */
.robot-head-group { 
    position: relative; z-index: 10; 
    transform-origin: bottom center; 
    animation: headBreathe var(--breathe-speed) infinite ease-in-out; 
    transition: transform var(--transition-speed) var(--bezier-bounce); 
}
.robot-head {
    width: 220px; height: 170px; background: var(--armor-white);
    border-radius: 80px 80px 70px 70px; position: relative;
    box-shadow: inset 0 -15px 25px var(--armor-shadow), 0 15px 30px rgba(0,0,0,0.3);
    display: flex; justify-content: center; align-items: center;
}
.ear { position: absolute; width: 25px; height: 50px; background: var(--joint-black); top: 50%; transform: translateY(-50%); z-index: -1; box-shadow: inset 0 0 10px rgba(255,255,255,0.2); }
.ear::after { content: ''; position: absolute; width: 100%; height: 50%; top: 25%; background: var(--led-primary); opacity: 0.5; filter: blur(5px); }
.ear.left { left: -10px; border-radius: 15px 0 0 15px; }
.ear.right { right: -10px; border-radius: 0 15px 15px 0; }
.screen {
    width: 190px; height: 110px; background: var(--joint-black); border-radius: 40px; position: relative; overflow: hidden;
    display: flex; justify-content: center; align-items: center; border: 4px solid var(--armor-shadow); box-shadow: inset 0 0 30px rgba(0,0,0,1);
}
.robot-neck { width: 40px; height: 30px; background: linear-gradient(to right, #111, #444, #111); margin: -15px auto 0; z-index: 5; position: relative; border-radius: 5px; }

/* --- 3.3 ลำตัวและแกนกลาง (Torso & Core) --- */
.robot-body-group { 
    position: relative; z-index: 8; 
    transform-origin: bottom center; 
    animation: bodyBreathe var(--breathe-speed) infinite ease-in-out; 
    display: flex; flex-direction: column; align-items: center; 
    transition: transform var(--transition-speed) var(--bezier-bounce); 
}
.robot-torso {
    width: 160px; height: 130px; background: var(--armor-white);
    border-radius: 40px 40px 60px 60px; position: relative;
    box-shadow: inset 0 -20px 20px var(--armor-shadow), 0 10px 20px rgba(0,0,0,0.2);
    display: flex; justify-content: center; overflow: hidden;
}
.chest-plate { width: 100px; height: 80px; border: 2px solid var(--armor-shadow); border-radius: 20px 20px 40px 40px; margin-top: 15px; display: flex; justify-content: center; align-items: center; }
.chest-core { width: 20px; height: 20px; background: var(--led-primary); border-radius: 50%; box-shadow: 0 0 15px var(--led-primary), inset 0 0 5px #fff; animation: corePulse 1.5s infinite alternate; transition: all 0.3s; }
.robot-pelvis { width: 90px; height: 40px; background: var(--joint-black); border-radius: 20px; margin-top: -15px; position: relative; z-index: 7; border-bottom: 5px solid var(--armor-white); }

/* --- 3.4 แขน ข้อศอก และมือ (Arms, Elbows & Hands) --- */
.arm { 
    position: absolute; top: 10px; z-index: 9; display: flex; flex-direction: column; align-items: center; 
    transform-origin: 25px 25px; 
    transition: transform var(--transition-speed) var(--bezier-bounce); 
}
.arm.left { left: -60px; }
.arm.right { right: -60px; }
.shoulder { width: 50px; height: 50px; background: var(--armor-white); border-radius: 50%; box-shadow: inset -5px -5px 10px var(--armor-shadow); z-index: 2; position: relative; }
.upper-arm { width: 25px; height: 50px; background: var(--joint-black); margin-top: -10px; border-radius: 15px; }
.elbow { width: 35px; height: 35px; background: var(--armor-white); border-radius: 50%; margin-top: -10px; box-shadow: inset 0 -5px 5px var(--armor-shadow); z-index: 2; position: relative; }

.lower-arm-group { 
    display: flex; flex-direction: column; align-items: center; 
    transform-origin: center 15px; 
    transition: transform var(--transition-speed) var(--bezier-bounce); 
    margin-top: -15px; padding-top: 15px; position: relative;
}
.lower-arm { width: 35px; height: 60px; background: var(--armor-white); border-radius: 10px 10px 20px 20px; box-shadow: inset 0 -5px 10px var(--armor-shadow); }
.hand { width: 30px; height: 40px; background: var(--joint-black); margin-top: -5px; border-radius: 10px 10px 20px 20px; border-bottom: 3px solid var(--led-primary); position: relative;}

/* 🌟 ช่องเสียบอุปกรณ์ (Prop Slot) สำหรับ Emoji ลอยบนมือ */
.prop-slot {
    position: absolute;
    bottom: -40px;
    font-size: 45px;
    z-index: 20;
    display: flex; justify-content: center; align-items: center;
    text-shadow: 0 10px 20px rgba(0,0,0,0.4);
    opacity: 0; transform: scale(0.5);
    transition: all 0.4s var(--bezier-bounce);
    pointer-events: none;
}
.prop-slot.active { opacity: 1; transform: scale(1); }

/* --- 3.5 ขาและเท้า (Legs & Feet) --- */
.legs-container { display: flex; gap: 30px; margin-top: -20px; z-index: 6; position: relative; animation: legBreathe var(--breathe-speed) infinite ease-in-out; transition: transform 0.6s ease; }
.leg { display: flex; flex-direction: column; align-items: center; transition: transform 0.6s ease; }
.thigh { width: 45px; height: 70px; background: var(--armor-white); border-radius: 20px; box-shadow: inset 0 -10px 10px var(--armor-shadow); }
.knee { width: 35px; height: 35px; background: var(--joint-black); border-radius: 50%; margin-top: -15px; z-index: 2; }
.calf { width: 55px; height: 80px; background: var(--armor-white); margin-top: -15px; border-radius: 15px 15px 25px 25px; box-shadow: inset 0 -15px 15px var(--armor-shadow); }
.foot { width: 75px; height: 35px; background: var(--joint-black); margin-top: -10px; border-radius: 20px 20px 10px 10px; border-top: 8px solid var(--armor-white); position: relative; display: flex; justify-content: center; }
.foot::after { content: ''; position: absolute; bottom: 5px; width: 40px; height: 4px; background: var(--led-primary); border-radius: 2px; box-shadow: 0 0 8px var(--led-primary); }

/* =========================================
   4. แอนิเมชันลมหายใจและการเคลื่อนไหวอิสระ (Animations)
   ========================================= */
@keyframes headBreathe { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-4px) rotateX(-3deg); } }
@keyframes bodyBreathe { 0%, 100% { transform: translateY(0) scaleY(0.99); } 50% { transform: translateY(-2px) scaleY(1.02); } }
@keyframes legBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes shadowBreathe { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(0.93); opacity: 0.25; } }
@keyframes corePulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 1; } }
@keyframes floatUpAndFade { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 15% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translate(25px, -80px) scale(1.3); opacity: 0; } }
@keyframes talkingHandLeft { 0%, 100% { transform: rotate(-85deg); } 50% { transform: rotate(-100deg); } }
@keyframes talkingHandRight { 0%, 100% { transform: rotate(85deg); } 50% { transform: rotate(100deg); } }

/* =========================================
   5. อารมณ์ดวงตา (Eye Mood Profiles)
   ========================================= */
.mood-joy .eye { border-radius: 50% 50% 10% 10%; height: calc(var(--hud-eye-h) * 0.65); }
.mood-chat .eye { border-radius: 50% 50% 20% 20%; height: calc(var(--hud-eye-h) * 0.6); }
.mood-think .eye { border-radius: 50%; width: calc(var(--hud-eye-w) * 0.8); height: calc(var(--hud-eye-h) * 0.8); transform: translateY(-15%); }
.mood-love .eye { background-color: transparent !important; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d2a8ff"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'); background-repeat: no-repeat; background-position: center; background-size: contain; box-shadow: none !important; border-radius: 0; width: calc(var(--hud-eye-w)*1.3); height: calc(var(--hud-eye-h)*1.3); filter: drop-shadow(0 0 8vmin var(--led-pink)); }
.mood-sleep .eye { border-radius: 10px; height: 4vmin; width: calc(var(--hud-eye-w)*1.1); opacity: 0.5; }
.mood-angry .eye { background: var(--led-red) !important; box-shadow: 0 0 25px var(--led-red) !important; height: calc(var(--hud-eye-h)*0.7); }
.mood-angry .eye.left { border-radius: 10% 80% 10% 10%; margin-top: 10px; }
.mood-angry .eye.right { border-radius: 80% 10% 10% 10%; margin-top: 10px; }
.mood-surprised .eye-container { gap: calc(var(--hud-gap) + 10vmin); }
.mood-surprised .eye { border-radius: 50%; height: var(--hud-eye-w); }
.mood-sad .eye { border-radius: 20% 20% 50% 50%; height: calc(var(--hud-eye-h) * 0.6); margin-top: 15%; opacity: 0.6; }