/* --- CSS ส่วนพื้นฐาน --- */

        :root {

            --primary-color: #f5b159; /* สีฟ้าหลัก */

            --primary-hover: #fdbf78; /* สีฟ้าเข้มตอนโฮเวอร์ */

            --bg-color: #f4f7f6;      /* สีพื้นหลังเทาอ่อนมากๆ */

            --card-bg: #ffffff;      /* สีพื้นหลังการ์ดขาว */

            --text-color: #2c3e50;    /* สีตัวอักษรหลัก */

            --text-muted: #7f8c8d;    /* สีตัวอักษรจาง (สำหรับ Link ใน Popup) */

        }

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Kanit', sans-serif; /* ใช้ฟอนต์ Kanit */

        }

        body {

            background-color: var(--bg-color);

            color: var(--text-color);

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            overflow: hidden; /* ซ่อน scrollbar ตอนโหลดแอนิเมชัน */

        }

        /* --- Keyframes สำหรับแอนิメชัน --- */

        @keyframes fadeInDown {

            from {

                opacity: 0;

                transform: translateY(-20px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        @keyframes scaleUp {

            from {

                opacity: 0;

                transform: scale(0.9);

            }

            to {

                opacity: 1;

                transform: scale(1);

            }

        }

        @keyframes pulse {

            0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }

            70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }

            100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }

        }

        /* --- CSS ส่วนจัดหน้าจอ (Container) --- */

        .main-container {

            opacity: 0; /* เริ่มต้นซ่อนไว้ก่อน */

            animation: scaleUp 0.6s ease-out forwards; /* แอนิเมชันโหลดหน้าเว็บ */

            animation-delay: 0.2s;

        }

        .bot-card {

            background-color: var(--card-bg);

            padding: 2rem;

            border-radius: 20px;

            box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* เงาบางๆ */

            text-align: center;

            width: 350px;

            max-width: 90%;

            border: 1px solid rgba(52, 152, 219, 0.1); /* ขอบฟ้าอ่อนๆ */

            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }

        .bot-card:hover {

            transform: translateY(-5px); /* ลอยขึ้นนิดหน่อยตอนโฮเวอร์ */

            box-shadow: 0 15px 35px rgba(52, 152, 219, 0.1); /* เงาฟ้าชัดขึ้น */

        }

        /* --- CSS ส่วนโปรไฟล์ --- */

        .profile-wrapper {

            position: relative;

            display: inline-block;

            margin-bottom: 1.5rem;

        }

        .bot-avatar {

            width: 120px;

            height: 120px;

            border-radius: 50%; /* วงกลม */

            object-fit: cover;

            border: 4px solid #fff;

            box-shadow: 0 4px 15px rgba(0,0,0,0.1);

            transition: transform 0.5s ease;

        }

        .bot-card:hover .bot-avatar {

            transform: rotate(5deg) scale(1.05); /* หมุนและขยายเล็กน้อยตอนโฮเวอร์การ์ด */

        }

        .online-status {

            position: absolute;

            bottom: 5px;

            right: 5px;

            width: 25px;

            height: 25px;

            background-color: #2ecc71; /* สีเขียว Online */

            border-radius: 50%;

            border: 3px solid #fff;

            animation: pulse 2s infinite; /* แอนิเมชันชีพจร */

        }

        /* --- CSS ส่วนข้อความ --- */

        .bot-name {

            font-size: 1.5rem;

            font-weight: 600;

            margin-bottom: 0.5rem;

            color: var(--text-color);

            animation: fadeInDown 0.5s ease-out 0.4s both;

        }

        .bot-tag {

            background-color: rgba(52, 152, 219, 0.1);

            color: var(--primary-color);

            padding: 4px 10px;

            border-radius: 20px;

            font-size: 0.85rem;

            font-weight: 500;

            display: inline-block;

            margin-bottom: 1rem;

            animation: fadeInDown 0.5s ease-out 0.5s both;

        }

        .bot-description {

            font-size: 0.95rem;

            color: #7f8c8d;

            margin-bottom: 2rem;

            line-height: 1.6;

            animation: fadeInDown 0.5s ease-out 0.6s both;

        }

        /* --- CSS ส่วนปุ่มเชิญ --- */

        .invite-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            background-color: var(--primary-color);

            color: white;

            border: none;

            padding: 12px 30px;

            font-size: 1.1rem;

            font-weight: 500;

            border-radius: 30px;

            cursor: pointer;

            text-decoration: none;

            transition: all 0.3s ease;

            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);

            width: 100%;

            animation: fadeInDown 0.5s ease-out 0.7s both;

        }

        .invite-btn:hover {

            background-color: var(--primary-hover);

            transform: translateY(-2px);

            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);

        }

        .invite-btn:active {

            transform: translateY(1px);

        }

        /* ไอคอน Discord ในปุ่ม */

        .invite-btn svg {

            width: 20px;

            height: 20px;

            fill: white;

        }

        /* --- CSS สำหรับ Modal Popup Custom (แทนที่ alert แบบเก่า) --- */

        /* เพื่อความสวยงาม ฟ้าขาว และแอนิเมชันตามโจทย์ */

        .modal-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5); /* พื้นหลังดำโปร่งแสง */

            display: flex;

            justify-content: center;

            align-items: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.3s ease;

            z-index: 1000;

        }

        .modal-overlay.active {

            opacity: 1;

            visibility: visible;

        }

        .modal-box {

            background-color: #fff;

            padding: 2rem;

            border-radius: 15px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.2);

            width: 400px;

            max-width: 90%;

            text-align: center;

            transform: scale(0.8);

            transition: all 0.3s ease;

        }

        .modal-overlay.active .modal-box {

            transform: scale(1);

        }

        .modal-title {

            font-size: 1.3rem;

            font-weight: 600;

            margin-bottom: 1rem;

            color: var(--text-color);

        }

        .modal-text {

            font-size: 1rem;

            color: #34495e;

            margin-bottom: 0.5rem;

        }

        .modal-link {

            font-size: 0.85rem;

            color: var(--text-muted); /* ลิ้งค์สีเทาตามโจทย์ */

            word-break: break-all; /* ตัดคำถ้าลิ้งค์ยาวเกิน */

            display: block;

            margin-bottom: 1.5rem;

            background-color: #f8f9fa;

            padding: 10px;

            border-radius: 8px;

            border: 1px solid #eee;

        }

        .modal-buttons {

            display: flex;

            justify-content: center;

            gap: 15px;

        }

        .modal-btn {

            padding: 10px 25px;

            border-radius: 25px;

            border: none;

            cursor: pointer;

            font-weight: 500;

            font-size: 1rem;

            transition: all 0.2s ease;

        }

        .btn-confirm {

            background-color: var(--primary-color);

            color: white;

        }

        .btn-confirm:hover {

            background-color: var(--primary-hover);

        }

        .btn-cancel {

            background-color: #e0e0e0;

            color: #333;

        }

        .btn-cancel:hover {

            background-color: #d5d5d5;

        }