/* ══════════════════════════════════════════════════════════════════
   المساعد بلغة الإشارة («الروبوت») — 2026-09-25
   ألوان الجمعية: كحلي #14234B وأخضر مائل للزرقة #059187
   ══════════════════════════════════════════════════════════════════ */
#shiSign {
    --sg-navy: #14234B;
    --sg-teal: #059187;
    --sg-bottom: 18px;
    position: fixed; left: 18px; bottom: var(--sg-bottom);
    /* الحاوية يسارية الاتجاه كي يبقى الروبوت ملتصقاً بالركن الأيسر مهما اتسع المشغّل،
       والمحتوى داخلها عربي */
    z-index: 100000; direction: ltr;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    display: none; flex-direction: column; align-items: flex-start; gap: 10px;
    pointer-events: none;
}
#shiSign.on { display: flex; }
/* سحبه المستخدم إلى الطرف الأيمن: يلتصق يميناً وتنفتح الفقاعة والمشغّل من جهته */
#shiSign.side-right { left: auto; right: 16px; direction: rtl; }
#shiSign.side-right .sg-bubble { border-radius: 16px 16px 4px 16px; }
#shiSign.dragging .sg-bot { cursor: grabbing; transform: scale(1.1); transition: none; }
#shiSign.dragging .sg-bubble, #shiSign.dragging .sg-player { visibility: hidden; }
#shiSign.snapping { transition: left .25s ease, right .25s ease, bottom .25s ease; }
#shiSign > * { pointer-events: auto; direction: rtl; }

/* ── الروبوت ── */
.sg-bot {
    /* دائرة بيضاء بإطار أخضر: يبقى واضحاً فوق الخلفيات الكحلية (صفحة الدخول) والفاتحة معاً */
    width: 72px; height: 72px; padding: 5px; cursor: grab;
    background: #fff; border: 3px solid #059187; border-radius: 50%;
    touch-action: none; user-select: none; -webkit-user-select: none;
    filter: drop-shadow(0 8px 18px rgba(20,35,75,.35));
    transition: transform .25s ease;
}
.sg-bot:hover { transform: translateY(-3px) scale(1.04); }
.sg-bot:focus-visible { outline: 3px solid #f5a623; outline-offset: 4px; border-radius: 50%; }
.sg-bot svg { width: 100%; height: 100%; display: block; overflow: visible; animation: sgFloat 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes sgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── تميمة الجمعية: المشاعر (الإصدار 2) — الحاوية تحمل صنف المزاج mood-* ── */
.sg-m { overflow: visible; }
.sg-m .sg-head { transform-box: view-box; transform-origin: 50px 64px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.sg-m .sg-bodyg, .sg-m .sg-arms { transform-box: view-box; transform-origin: 50px 90px; animation: sgBreath 3.6s ease-in-out infinite; }
.sg-m .sg-armR { transform-box: view-box; transform-origin: 65px 71px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sg-m .sg-armL { transform-box: view-box; transform-origin: 35px 71px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sg-m .sg-look { transition: transform .18s ease-out; }
.sg-m .sg-eye { transform-box: fill-box; transform-origin: center; animation: sgBlink 5.2s infinite; }
.sg-m .sg-antenna { animation: sgGlow 2.4s ease-in-out infinite; }
.sg-m .sg-eyes-happy, .sg-m .sg-eyes-sleepy, .sg-m .sg-brows, .sg-m .sg-mouth-big, .sg-m .sg-mouth-o,
.sg-m .sg-mouth-worry, .sg-m .sg-fx-stars, .sg-m .sg-fx-z, .sg-m .sg-fx-q { display: none; }
.sg-m .sg-cheek { transition: opacity .3s; }

/* سعيد: عينان مقوّستان وضحكة */
#shiSign.mood-happy .sg-m .sg-eyes-open, #shiSign.mood-excited .sg-m .sg-eyes-open.sg-hideopen { display: none; }
#shiSign.mood-happy .sg-m .sg-eyes-happy { display: inline; }
#shiSign.mood-happy .sg-m .sg-mouth-smile, #shiSign.mood-excited .sg-m .sg-mouth-smile { display: none; }
#shiSign.mood-happy .sg-m .sg-mouth-big, #shiSign.mood-excited .sg-m .sg-mouth-big { display: inline; }
#shiSign.mood-happy .sg-m .sg-cheek, #shiSign.mood-excited .sg-m .sg-cheek { opacity: .85; }
#shiSign.mood-happy .sg-m .sg-head { transform: rotate(-4deg); }
#shiSign.mood-happy .sg-m .sg-armR { transform: rotate(-100deg); }

/* متحمس: يقفز ويرفع ذراعيه وتلمع النجوم */
#shiSign.mood-excited .sg-m .sg-fx-stars { display: inline; animation: sgTwinkle .9s ease-in-out infinite alternate; }
#shiSign.mood-excited .sg-m .sg-look { transform: scale(1.08); transform-box: fill-box; transform-origin: center; }
#shiSign.mood-excited .sg-m .sg-armR { transform: rotate(-130deg); animation: sgWaveR .5s ease-in-out infinite alternate; }
#shiSign.mood-excited .sg-m .sg-armL { transform: rotate(130deg); animation: sgWaveL .5s ease-in-out infinite alternate; }
#shiSign.mood-excited .sg-m .sg-antenna { animation: sgGlow .5s ease-in-out infinite; }
#shiSign.mood-excited .sg-m { animation: sgHop .55s ease-in-out infinite; }

/* فضولي: يميل رأسه ويرفع حاجبه ويستغرب */
#shiSign.mood-curious .sg-m .sg-head { transform: rotate(-10deg); }
#shiSign.mood-curious .sg-m .sg-brows, #shiSign.mood-curious .sg-m .sg-mouth-o, #shiSign.mood-curious .sg-m .sg-fx-q { display: inline; }
#shiSign.mood-curious .sg-m .sg-browR { transform: translateY(-2.5px); }
#shiSign.mood-curious .sg-m .sg-mouth-smile { display: none; }
#shiSign.mood-curious .sg-m .sg-fx-q { animation: sgPopIn .4s cubic-bezier(.34,1.56,.64,1); transform-box: fill-box; transform-origin: center; }
#shiSign.mood-curious .sg-m .sg-armL { transform: rotate(35deg); }

/* ناعس: عينان مغمضتان وزززز ورأس مائل وتنفس بطيء */
#shiSign.mood-sleepy .sg-m .sg-eyes-open { display: none; }
#shiSign.mood-sleepy .sg-m .sg-eyes-sleepy, #shiSign.mood-sleepy .sg-m .sg-fx-z { display: inline; }
#shiSign.mood-sleepy .sg-m .sg-fx-z text { animation: sgZ 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
#shiSign.mood-sleepy .sg-m .sg-fx-z .z2 { animation-delay: 1.3s; }
#shiSign.mood-sleepy .sg-m .sg-head { transform: rotate(7deg) translateY(1.5px); }
#shiSign.mood-sleepy .sg-m .sg-bodyg, #shiSign.mood-sleepy .sg-m .sg-arms { animation-duration: 6s; }
#shiSign.mood-sleepy .sg-m .sg-antenna { animation: none; opacity: .35; }
#shiSign.mood-sleepy .sg-m .sg-mouth-smile { display: none; }
#shiSign.mood-sleepy .sg-m .sg-mouth-o { display: inline; transform: scale(.55); transform-box: fill-box; transform-origin: center; }

/* قلِق (عند خطأ): حاجبان منكسران وفم متموّج — تعاطف لا لوم */
#shiSign.mood-concerned .sg-m .sg-brows, #shiSign.mood-concerned .sg-m .sg-mouth-worry { display: inline; }
#shiSign.mood-concerned .sg-m .sg-mouth-smile { display: none; }
#shiSign.mood-concerned .sg-m .sg-browL { transform: rotate(12deg); transform-box: fill-box; transform-origin: center; }
#shiSign.mood-concerned .sg-m .sg-browR { transform: rotate(-12deg); transform-box: fill-box; transform-origin: center; }
#shiSign.mood-concerned .sg-m .sg-head { transform: rotate(4deg); }

/* يفكّر: ينظر للأعلى وهوائيه يومض */
#shiSign.mood-thinking .sg-m .sg-look { transform: translate(-2px, -2.5px); }
#shiSign.mood-thinking .sg-m .sg-antenna { animation: sgGlow .7s ease-in-out infinite; }
#shiSign.mood-thinking .sg-m .sg-head { transform: rotate(5deg); }
#shiSign.mood-thinking .sg-m .sg-armL { transform: rotate(95deg); }

/* يتكلم: الفم يتحرك مع ظهور النص */
#shiSign.talking .sg-m .sg-mouth-smile { display: none; }
#shiSign.talking .sg-m .sg-mouth-big { display: inline; animation: sgTalk .22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }

@keyframes sgBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes sgBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes sgGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sg-m .sg-led { animation: sgGlow 1.8s ease-in-out infinite; }
@keyframes sgBeat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(1); } }
@keyframes sgHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes sgWaveR { from { transform: rotate(-115deg); } to { transform: rotate(-145deg); } }
@keyframes sgWaveL { from { transform: rotate(115deg); } to { transform: rotate(145deg); } }
@keyframes sgTwinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes sgPopIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sgZ { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px); } }
@keyframes sgTalk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* التلويح (قديم الاسم): الذراع تلوّح */
#shiSign.waving .sg-m .sg-armR { animation: sgWaveR .45s ease-in-out 5 alternate; }
#shiSign.waving .sg-bot { animation: sgHop .6s ease-in-out 2; }
@keyframes sgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* نثار الاحتفال */
.sg-bot { position: relative; }
.sg-confetti { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.sg-confetti i { position: absolute; width: 7px; height: 10px; border-radius: 2px; opacity: 0; animation: sgConfetti 1.2s ease-out forwards; }
@keyframes sgConfetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(260deg); } }

/* ── فقاعة الكلام ── */
.sg-bubble {
    display: none; max-width: 300px; background: #fff; color: var(--sg-navy);
    border-radius: 16px 16px 16px 4px; padding: 14px 16px 12px;
    box-shadow: 0 14px 36px rgba(20,35,75,.25); border: 1px solid rgba(5,145,135,.2);
    font-size: .92rem; line-height: 1.7; animation: sgPop .25s ease-out;
}
.sg-bubble.on { display: block; }
.sg-bubble b { display: block; font-size: 1rem; font-weight: 800; margin-bottom: 4px; }
.sg-bubble .sg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sg-btn {
    border: 0; border-radius: 10px; padding: 8px 14px; cursor: pointer;
    font-family: inherit; font-size: .88rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.sg-btn.primary { background: linear-gradient(to left, var(--sg-navy), var(--sg-teal)); color: #fff; }
.sg-btn.ghost { background: rgba(20,35,75,.06); color: var(--sg-navy); }
.sg-btn:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
.sg-btn svg { width: 18px; height: 18px; flex: none; }
.sg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 240px; }
.sg-list .sg-btn { justify-content: flex-start; width: 100%; text-align: right; line-height: 1.6; }
.sg-mute { display: block; margin-top: 8px; font-size: .75rem; color: #6b778c; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; text-decoration: underline; }

@keyframes sgPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── مشغّل الإشارة ── */
.sg-player {
    display: none; width: 340px; max-width: calc(100vw - 36px); background: #0d1628; color: #fff;
    border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45);
    animation: sgPop .25s ease-out;
}
.sg-player.on { display: block; }
.sg-player.big { width: 520px; }
.sg-player header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(to left, var(--sg-navy), #0b5c56); }
.sg-player header strong { flex: 1; font-size: .92rem; font-weight: 800; line-height: 1.5; }
.sg-player header button { background: rgba(255,255,255,.12); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 1rem; }
.sg-player header button:focus-visible { outline: 3px solid #f5a623; }
.sg-player video { width: 100%; display: block; background: #000; max-height: 60vh; }
.sg-player .sg-caption { padding: 10px 14px 12px; font-size: .9rem; line-height: 1.7; color: #e6edf5; }
.sg-player .sg-caption:empty { display: none; }

/* ── علامة «بالإشارة» بجانب الحقل ── */
.sg-badge {
    display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
    margin: 0 8px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(5,145,135,.35); background: rgba(5,145,135,.08); color: #04695f;
    font-family: 'Cairo', 'Segoe UI', sans-serif; font-size: .78rem; font-weight: 800; line-height: 1.6;
    transition: background .2s;
}
.sg-badge:hover { background: rgba(5,145,135,.16); }
.sg-badge:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
.sg-badge svg { width: 15px; height: 15px; }
.sg-flash { box-shadow: 0 0 0 4px rgba(245,166,35,.55) !important; border-radius: 10px; transition: box-shadow .3s; }

@media (max-width: 600px) {
    #shiSign { left: 10px; }
    .sg-bot { width: 60px; height: 60px; padding: 6px; }
    .sg-player, .sg-player.big { width: calc(100vw - 20px); }
    .sg-bubble { max-width: calc(100vw - 30px); }
}

@media (prefers-reduced-motion: reduce) {
    .sg-bot svg, .sg-bot svg *, #shiSign .sg-m, #shiSign.waving .sg-bot { animation: none !important; }
    #shiSign .sg-m .sg-head, #shiSign .sg-m .sg-armR, #shiSign .sg-m .sg-armL { transition: none; }
    .sg-bubble, .sg-player { animation: none; }
}