body { 
    /* 🌟 บังคับใช้ฟอนต์ Prompt ทั้งเว็บไซต์ */
    font-family: 'Prompt', sans-serif; 
    background-color: #f8fafc;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- เอฟเฟกต์พื้นหลัง --- */
.animated-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -10;
    background: 
        radial-gradient(circle at 15% 50%, rgba(219, 234, 254, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(224, 231, 255, 0.7) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(243, 232, 255, 0.7) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: gradientMove 15s ease-in-out infinite alternate;
}
@keyframes gradientMove {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 50%; }
}

/* สไตล์กระจกฝ้า */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}

/* --- ระบบ Modal (Floating Element) --- */
.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(0px);
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(8px);
}
.modal-content {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ปุ่ม Tag */
.tag-btn.active { background: linear-gradient(135deg, #2563eb, #4f46e5); color: white; border-color: transparent; box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.3); transform: translateY(-2px); }

/* Chat Bubbles */
.chat-bubble-user { background-color: #f1f5f9; color: #334155; border-bottom-right-radius: 4px; }
.chat-bubble-ai { background: linear-gradient(135deg, #3b82f6, #4f46e5); color: white; border-bottom-left-radius: 4px; box-shadow: 0 4px 15px -3px rgba(59, 130, 246, 0.4); }

/* แอนิเมชันปุ่มไมค์ */
.mic-active { animation: pulse-red 1.5s infinite; background-color: #ef4444; color: white; border-color: #ef4444; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

/* โซนลากไฟล์ */
.drop-zone.dragover { border-color: #2563eb; background-color: #eff6ff; transform: scale(1.02); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ========================================== */
/* 🌟 ลูกเล่นกราฟฟิก: วัตถุลอยตัว (Floating) */
/* ========================================== */
.animate-float {
    animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
    animation: float 8s ease-in-out infinite;
    animation-delay: 2s; /* ให้ลอยสลับจังหวะกัน */
}
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-20px) rotate(5deg) scale(1.05); }
    100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* เอฟเฟกต์แสงวิบวับ */
.glow-effect {
    box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.3);
}

/* ========================================== */
/* 🚀 ลูกเล่นพิเศษสำหรับ struxprompt24 Chat Box */
/* ========================================== */

/* 1. คลาสหลักสำหรับกล่องแชท ให้ดูลอยและมีมิติ */
.strux-chat-box {
    /* สร้างเงา 3 ชั้น: เงาลึกฐาน + เงาสะท้อนขอบ + ออร่าสีฟ้า */
    box-shadow: 
        0 25px 50px -12px rgba(15, 23, 42, 0.4), 
        0 0 0 1px rgba(255, 255, 255, 0.6) inset, 
        0 0 40px -10px rgba(59, 130, 246, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    position: relative;
    
    /* แอนิเมชันให้กล่องลอยเบาๆ ตอนเปิดแชททิ้งไว้ */
    animation: modalHover 6s ease-in-out infinite;
}

/* แอนิเมชันลอยตัว (Floating Effect) */
@keyframes modalHover {
    0% { transform: translateY(0px); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4), 0 0 40px -10px rgba(59, 130, 246, 0.4) !important; }
    50% { transform: translateY(-6px); box-shadow: 0 35px 60px -15px rgba(15, 23, 42, 0.3), 0 0 50px -5px rgba(59, 130, 246, 0.5) !important; }
    100% { transform: translateY(0px); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4), 0 0 40px -10px rgba(59, 130, 246, 0.4) !important; }
}

/* 2. เส้นแสง Cyberpunk วิ่งด้านบนกล่องแชท */
.strux-chat-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3b82f6, #10b981, transparent);
    z-index: 20;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    opacity: 0.8;
}

/* 3. ส่วนหัวของกล่องแชท (Header) ให้ดูเป็นกระจกพรีเมียมขึ้น */
.strux-chat-header {
    background: linear-gradient(to right, rgba(248, 250, 252, 0.95), rgba(224, 231, 255, 0.95)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 4. ปรับสีบับเบิล AI ให้ดูเป็น Enterprise (สีเข้มล้ำๆ) ทับของเดิม */
.chat-bubble-ai { 
    background: linear-gradient(135deg, #1e293b, #0f172a) !important; 
    color: #f8fafc !important; 
    border-bottom-left-radius: 4px; 
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.5) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1);
}