/* الحاوية الرئيسية */
.support-sticky-container {
    position: fixed;
    left: -10px;
    top: auto;
    bottom: 100px; /* تم تعديل الموقع ليكون في الأسفل مقابل الواتساب */
    width: 225px;
    z-index: 1100;
    font-family: Arial, sans-serif;
}

.support-sticky-container ul {
    padding: 0;
    margin: 0;
}

@keyframes flutter {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); } 
    100% { transform: translateX(0); }
}

.support-sticky-container li {
    list-style: none;
    background-color: #6a6a6a6b;
    border-radius: 15px;
    color: #000;
    height: 43px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    display: block;
    animation: flutter 3s infinite ease-in-out;
    position: relative;
}

.support-sticky-container img {
    float: right;
    margin: 5px;
}

.support-sticky-container p {
    padding-top: 5px;
    margin: 0;
    font-size: 11px;
    text-align: right;
    padding-right: 50px;
    line-height: 1.2;
}

.support-sticky-container a {
    text-decoration: none;
    color: #000;
    display: block;
    height: 100%;
}

/* -------------------------------------- */
/* تصميم الشخصية الواقعية (مفاصل) */
/* -------------------------------------- */

.stick-walker {
    position: absolute;
    top: -38px;
    left: 20px;
    width: 30px;
    height: 40px;
    z-index: 1200;
    pointer-events: none;
    animation: patrol 6s infinite linear;
}

/* حركة المشي الكلية للجسم (فوق/تحت) */
.walker-body-group {
    position: relative;
    width: 100%;
    height: 100%;
    animation: bounce 0.6s infinite cubic-bezier(0.4, 0, 0.6, 1) alternate;
}

@keyframes patrol {
    0% { left: 10px; transform: scaleX(1); }
    45% { left: 170px; transform: scaleX(1); }
    50% { left: 170px; transform: scaleX(-1); }
    95% { left: 10px; transform: scaleX(-1); }
    100% { left: 10px; transform: scaleX(1); }
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(2px); }
}

.head {
    width: 10px;
    height: 10px;
    background: #222;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 5;
}

.torso {
    width: 3px;
    height: 18px;
    background: #222;
    position: absolute;
    left: 50%;
    top: 9px;
    transform: translateX(-50%);
    z-index: 4;
}

/* إعدادات مشتركة للأطراف */
.limb {
    position: absolute;
    width: 3px;
    background: #222;
    transform-origin: top center;
    border-radius: 2px;
}

/* --- الأرجل (فخذ + ساق) --- */
.thigh {
    height: 10px;
    top: 25px; /* نهاية الجذع */
    left: 50%;
    margin-left: -1.5px; /* توسيط */
}

.shin {
    height: 10px;
    top: 8px; /* نهاية الفخذ */
    left: 0;
    width: 3px;
    background: inherit; /* يرث اللون من الفخذ */
    position: absolute;
    transform-origin: top center;
    border-radius: 2px;
}

/* أنيميشن الأرجل - تصحيح الاتجاه (المشي للأمام) */
/* الرجل اليسرى (البعيدة) */
.leg-l { 
    z-index: 3; 
    background-color: #555; 
    animation: thigh-walk 0.8s infinite linear; 
}

/* الرجل اليمنى (القريبة) */
.leg-r { 
    z-index: 6; 
    background-color: #222;
    animation: thigh-walk 0.8s infinite linear; 
    animation-delay: -0.4s; 
}

.leg-l .shin { animation: shin-walk 0.8s infinite linear; }
.leg-r .shin { 
    animation: shin-walk 0.8s infinite linear; 
    animation-delay: -0.4s;
}

/* 
   قاعدة الدوران: موجب (+) = عكس عقارب الساعة (لليسار/الخلف) 
   سالب (-) = مع عقارب الساعة (لليمين/للأمام)
*/
@keyframes thigh-walk {
    0% { transform: rotate(30deg); }   /* خلف */
    50% { transform: rotate(-40deg); } /* أمام */
    100% { transform: rotate(30deg); } /* خلف */
}

@keyframes shin-walk {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(80deg); } /* ثني الركبة للخلف أثناء الرفع */
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* --- الأذرع --- */
.arm {
    height: 14px;
    width: 3px;
    top: 11px;
    left: 50%;
    margin-left: -1.5px;
    transform-origin: top center;
}

/* إضافة يد (دائرة) في نهاية الذراع */
.arm::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -1.5px;
    width: 6px;
    height: 6px;
    background-color: inherit;
    border-radius: 50%;
}

/* الذراع اليمنى يجب أن تعاكس الرجل اليمنى */
.arm-r { 
    z-index: 6; 
    background-color: #222;
    animation: arm-swing 0.8s infinite linear;
    animation-delay: 0s; 
    left: 55%; /* تحريك الكتف لليمين قليلاً */
}

/* الذراع اليسرى تعاكس الرجل اليسرى */
.arm-l { 
    z-index: 3; 
    background-color: #555;
    animation: arm-swing 0.8s infinite linear; 
    animation-delay: -0.4s; 
    left: 45%; /* تحريك الكتف لليسار قليلاً */
}

@keyframes arm-swing {
    0% { transform: rotate(-40deg); } /* زيادة زاوية التأرجح */
    50% { transform: rotate(40deg); } 
    100% { transform: rotate(-40deg); }
}