/* نبقة — شخصية سدرة المرافقة
   الحالات: idle | wave | dance | celebrate | encourage | sleep | welcome
   الاستخدام: <div class="nabqa" data-state="idle">…</div> (انظر nabqa.js و demo.html) */

.nabqa {
  --nabqa-size: 140px;
  --nabqa-brown: #8C4A35;
  --nabqa-cream: #F7F1E5;
  --nabqa-sand: #D4B896;
  --nabqa-olive: #41483A;
  position: fixed;
  inset-inline-start: 16px; /* في الصفحات العربية: الزاوية اليمنى */
  bottom: 16px;
  z-index: 50;
  width: var(--nabqa-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  font-family: inherit;
}
.nabqa--inline { position: relative; inset: auto; }

.nabqa__body {
  position: relative;
  width: var(--nabqa-size);
  height: var(--nabqa-size);
  pointer-events: auto;
  cursor: pointer;
}
.nabqa__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}
/* ظل أرضي ثابت تحت الشخصية */
.nabqa__body::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: 1%;
  height: 7%;
  border-radius: 50%;
  background: rgba(65, 72, 58, .18);
  z-index: -1;
  transform-origin: center;
}

/* فقاعة الكلام */
.nabqa__bubble {
  order: -1;
  position: relative;
  z-index: 2;
  max-width: 220px;
  margin-bottom: calc(var(--nabqa-size) * .22); /* مساحة للقفز */
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--nabqa-cream);
  color: var(--nabqa-olive);
  border: 2px solid var(--nabqa-brown);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(6px) scale(.95);
  transition: opacity .2s ease, transform .2s ease;
}
.nabqa__bubble.is-visible { opacity: 1; transform: none; }

/* ===== الحركات ===== */

/* هادئة: تنفّس خفيف */
.nabqa[data-state="idle"] .nabqa__img { animation: nabqa-breathe 3s ease-in-out infinite; }
@keyframes nabqa-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.02, .98); }
}

/* تلويح */
.nabqa[data-state="wave"] .nabqa__img { animation: nabqa-wave 1.2s ease-in-out 2; }
@keyframes nabqa-wave {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}

/* رقص عند الإجابة الصحيحة */
.nabqa[data-state="dance"] .nabqa__img { animation: nabqa-dance .5s ease-in-out 3; }
.nabqa[data-state="dance"] .nabqa__body::after { animation: nabqa-shadow .5s ease-in-out 3; }
@keyframes nabqa-dance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-14%) rotate(-8deg); }
  50%      { transform: translateY(0) rotate(0) scale(1.05, .95); }
  75%      { transform: translateY(-14%) rotate(8deg); }
}

/* احتفال عند إتقان الدرس */
.nabqa[data-state="celebrate"] .nabqa__img { animation: nabqa-celebrate .7s cubic-bezier(.3,1.6,.5,1) 4; }
.nabqa[data-state="celebrate"] .nabqa__body::after { animation: nabqa-shadow .7s ease-in-out 4; }
@keyframes nabqa-celebrate {
  0%   { transform: translateY(0) scale(1.06, .92); }
  40%  { transform: translateY(-28%) scale(.96, 1.06); }
  70%  { transform: translateY(-28%) rotate(4deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes nabqa-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  40%      { transform: scaleX(.65); opacity: .5; }
}
/* قصاصات احتفال */
.nabqa__confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.nabqa__confetti i {
  position: absolute;
  top: 25%; left: 50%;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: nabqa-confetti 1.4s ease-out forwards;
}
@keyframes nabqa-confetti {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

/* تشجيع عند الخطأ: إيماءة واثقة، بلا حزن */
.nabqa[data-state="encourage"] .nabqa__img { animation: nabqa-nod .6s ease-in-out 2; }
@keyframes nabqa-nod {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%      { transform: translateY(3%) rotate(-3deg); }
  60%      { transform: translateY(-4%) rotate(2deg); }
}

/* نوم عند الغياب: تنفّس بطيء */
.nabqa[data-state="sleep"] .nabqa__img { animation: nabqa-sleep 4s ease-in-out infinite; }
@keyframes nabqa-sleep {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.03, .96); }
}

/* فرح بالعودة: قفزة مع اهتزاز */
.nabqa[data-state="welcome"] .nabqa__img { animation: nabqa-welcome .9s cubic-bezier(.3,1.5,.5,1) 2; }
@keyframes nabqa-welcome {
  0%   { transform: scale(.85); }
  45%  { transform: translateY(-18%) scale(1.08); }
  65%  { transform: translateY(0) rotate(-4deg); }
  85%  { transform: rotate(4deg); }
  100% { transform: none; }
}

/* دخول ناعم عند تبديل الحالة */
.nabqa__img.is-swapping { animation: nabqa-pop .25s ease-out !important; }
@keyframes nabqa-pop {
  from { transform: scale(.9); opacity: .4; }
  to   { transform: scale(1); opacity: 1; }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .nabqa .nabqa__img,
  .nabqa .nabqa__body::after,
  .nabqa__confetti i { animation: none !important; }
}

@media (max-width: 600px) {
  .nabqa { --nabqa-size: 96px; }
  .nabqa__bubble { font-size: 13px; max-width: 170px; }
}