/* ==========================================================================
   أكاديمية الإنجاز: هيئة لوحة الرموز والملصقات
   تُقرأ في الموقع وفي لوحة التحكم معاً، والمتغيّرات مكتوبةٌ ببديلٍ احتياطي
   لأن اسم لون النص يختلف بين الملفّين (--text-secondary هنا، --text-2 هناك)
   ========================================================================== */

/* ---------- الزر الذي يفتح اللوحة ---------- */
.emo-btn{
  display:inline-grid;place-items:center;
  width:38px;height:38px;padding:0;
  border:1px solid var(--line-strong, var(--line-2, rgba(107,63,160,.34)));
  background:var(--panel,#fff);border-radius:10px;
  font-size:1.15rem;line-height:1;cursor:pointer;
  transition:background .22s var(--ease,ease), border-color .22s var(--ease,ease), transform .22s var(--ease,ease)}
.emo-btn:hover{background:rgba(107,63,160,.09);transform:translateY(-1px)}
.emo-btn[aria-expanded="true"]{
  background:var(--violet,#6B3FA0);border-color:var(--violet,#6B3FA0);color:#fff}

/* ---------- اللوحة ---------- */
.emo-pop{
  position:fixed;z-index:400;width:min(320px, calc(100vw - 16px));
  background:var(--panel,#fff);
  border:1px solid var(--line-strong, var(--line-2, rgba(107,63,160,.34)));
  border-radius:14px;overflow:hidden;
  box-shadow:0 18px 54px rgba(30,20,48,.26);
  opacity:0;transform:translateY(6px) scale(.98);
  transition:opacity .18s var(--ease,ease), transform .18s var(--ease,ease)}
.emo-pop.open{opacity:1;transform:translateY(0) scale(1)}

.emo-tabs{
  display:flex;gap:.1rem;padding:.35rem;overflow-x:auto;
  background:var(--panel-2,#F1EADF);
  border-bottom:1px solid var(--line,rgba(107,63,160,.14));
  scrollbar-width:none}
.emo-tabs::-webkit-scrollbar{display:none}
.emo-tabs button{
  flex:0 0 auto;width:34px;height:30px;padding:0;
  border:0;background:none;border-radius:8px;cursor:pointer;
  font-size:1rem;line-height:1;
  transition:background .2s var(--ease,ease)}
.emo-tabs button:hover{background:rgba(107,63,160,.12)}
.emo-tabs button.on{background:var(--violet,#6B3FA0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

.emo-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:.1rem;
  padding:.5rem;max-height:230px;overflow-y:auto;overscroll-behavior:contain}
.emo-grid.big{grid-template-columns:repeat(5,1fr);gap:.25rem;max-height:250px}
.emo-grid button{
  aspect-ratio:1;padding:0;border:0;background:none;border-radius:9px;
  font-size:1.32rem;line-height:1;cursor:pointer;
  transition:background .16s var(--ease,ease), transform .16s var(--ease,ease)}
.emo-grid button:hover{background:rgba(107,63,160,.12);transform:scale(1.16)}
.emo-grid button.big{font-size:2rem;border-radius:12px}
.emo-empty{
  grid-column:1/-1;margin:.9rem .4rem;font-size:.86rem;
  color:var(--text-secondary, var(--text-2,#5A4B6E))}

/* ---------- الملصق داخل النص ---------- */
.sticker{font-size:2.4rem;line-height:1.2;vertical-align:middle}

@media (prefers-reduced-motion: reduce){
  .emo-pop,.emo-grid button,.emo-btn{transition:none}
}

/* ---------- حزم الملصقات المصوّرة ---------- */
.emo-tabs button.has-img{padding:2px;line-height:0}
.emo-tabs button.has-img img{width:22px;height:22px;object-fit:contain;display:block}

.emo-grid.pack{
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:.35rem;align-content:start;
}
.emo-grid.pack button.pk{
  width:100%;aspect-ratio:1;padding:4px;border-radius:12px;border:none;
  background:none;cursor:pointer;line-height:0;
  transition:transform .18s var(--ease,ease),background .18s var(--ease,ease);
}
.emo-grid.pack button.pk img{width:100%;height:100%;object-fit:contain;display:block}
.emo-grid.pack button.pk:hover{transform:scale(1.08);background:rgba(107,63,160,.1)}
.emo-note{
  grid-column:1/-1;margin:.5rem 0 0;font-size:.72rem;text-align:center;opacity:.6;
}

/* الملصق المختار في صندوق المعاينة: بلا خلفية، فالشفافية جزءٌ منه */
.m-paste-i.is-pack{background:none;border-style:dashed}
.m-paste-i.is-pack img{max-height:130px;object-fit:contain}