/* ===== جمرة: التميمة الحية ومستشارة المحتوى ===== */
#jamra-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 35; pointer-events: none; }
.jp { position: absolute; left: 0; top: 0; width: var(--jpw, 110px); transform-origin: 50% 100%; pointer-events: auto; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; will-change: transform; outline: none; }
.jp.off { display: none; }
.jp-body { position: relative; transform-origin: 50% 90%; }
.jp-img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); transition: filter .25s; }   /* الظل الأرضي الحقيقي عنصر منفصل #jamra-shadow */
.jp.sway .jp-body { animation: jp-sway 2.2s ease-in-out infinite; }
@keyframes jp-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.jp-sink { will-change: transform; }
.jp-breath { transform-origin: 50% 100%; animation: jp-breathe 1.2s ease-in-out infinite alternate; }
@keyframes jp-breathe { from { transform: scaleY(.98); } to { transform: scaleY(1.03); } }
.jp.lean .jp-body { transform: rotate(4deg) translateY(1%); transition: transform .35s ease-out; }

/* فقاعة الكلام */
.jp-bubble { position: absolute; bottom: calc(100% + 4px); left: 50%; --bx: 0px; transform: translateX(calc(-50% + var(--bx))) scale(.9); min-width: 110px; width: max-content; max-width: min(250px, 66vw); padding: 8px 12px; border-radius: 14px; background: #fff7e0; color: #2a1a05; font: 600 .84rem/1.5 inherit; font-family: inherit; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3; }
.jp-bubble.on { opacity: 1; transform: translateX(calc(-50% + var(--bx))) scale(1); pointer-events: auto; cursor: pointer; }
.jp-bubble::after { content: ""; position: absolute; top: 100%; left: calc(50% - var(--bx)); margin-left: -7px; border: 7px solid transparent; border-top-color: #fff7e0; }

/* هالة الغضب: توهّج ناري نابض (تدرّج شعاعي + drop-shadow) وجمرات صاعدة؛ بلا أشكال ملصقة */
.jp-fire { position: absolute; inset: -14% -34% -6% -34%; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: -1; }
.jp-fire::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 58%, rgba(255, 166, 43, .55) 0%, rgba(255, 92, 20, .38) 34%, rgba(176, 24, 0, .18) 56%, rgba(120, 0, 0, 0) 72%); filter: blur(7px); animation: jp-aura .75s ease-in-out infinite alternate; }
@keyframes jp-aura { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }
.jp-fire i { position: absolute; bottom: 20%; left: calc(8% + var(--n) * 7.8%); width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff2b0 0%, #ff9a1f 55%, rgba(255, 60, 0, 0) 100%); animation: jp-ember 1.5s ease-out infinite; animation-delay: calc(var(--n) * -.16s); }
@keyframes jp-ember { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--n) - 5.5) * 5px), -95px) scale(.2); } }
.jp.angry .jp-fire { opacity: 1; }
/* أداء: التوهج ثابت (كان أنيميشن filter يُعاد رسمه كل إطار)، والحركة الوحيدة تحويلات خفيفة على المعالج الرسومي */
.jp.angry .jp-img, .jp.angry .jp-walk { filter: drop-shadow(0 0 4px rgba(255, 160, 50, .9)) drop-shadow(0 0 10px rgba(255, 70, 20, .55)); }
.jp.angry .jp-body { animation: jp-shake .1s linear infinite; will-change: transform; }
.jp.angry .jp-fire i { will-change: transform, opacity; }
@keyframes jp-shake { 0% { transform: translate(-2px, 0) rotate(-1.5deg); } 50% { transform: translate(2px, -1px) rotate(1.5deg); } 100% { transform: translate(-1px, 1px) rotate(-1deg); } }

/* دوخة النجوم (الصفعة) */
.jp-stars { position: absolute; left: 50%; top: 6%; width: 0; height: 0; opacity: 0; pointer-events: none; z-index: 2; }   /* مركز المدار فوق الرأس (داخل .jp-body فيتبع ميلانه) */
.jp-stars i { position: absolute; left: 0; top: 0; font-style: normal; font-size: calc(var(--jpw, 110px) * .2); line-height: 1; filter: drop-shadow(0 0 4px #ffcf33); animation: jp-orbit-el 1.2s linear infinite; will-change: transform; }
.jp-stars i:nth-child(2) { animation-delay: -.4s; } .jp-stars i:nth-child(3) { animation-delay: -.8s; }
@keyframes jp-orbit-el {
  0% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.3200), calc(var(--jpw, 110px) * 0.0000)) scale(0.950); z-index: -1; opacity: 0.90; }
  6.25% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.2956), calc(var(--jpw, 110px) * 0.0287)) scale(1.034); z-index: 1; opacity: 0.94; }
  12.5% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.2263), calc(var(--jpw, 110px) * 0.0530)) scale(1.106); z-index: 1; opacity: 0.97; }
  18.75% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.1225), calc(var(--jpw, 110px) * 0.0693)) scale(1.153); z-index: 1; opacity: 0.99; }
  25% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.0000), calc(var(--jpw, 110px) * 0.0750)) scale(1.170); z-index: 1; opacity: 1.00; }
  31.25% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.1225), calc(var(--jpw, 110px) * 0.0693)) scale(1.153); z-index: 1; opacity: 0.99; }
  37.5% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.2263), calc(var(--jpw, 110px) * 0.0530)) scale(1.106); z-index: 1; opacity: 0.97; }
  43.75% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.2956), calc(var(--jpw, 110px) * 0.0287)) scale(1.034); z-index: 1; opacity: 0.94; }
  50% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.3200), calc(var(--jpw, 110px) * 0.0000)) scale(0.950); z-index: 1; opacity: 0.90; }
  56.25% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.2956), calc(var(--jpw, 110px) * -0.0287)) scale(0.866); z-index: -1; opacity: 0.86; }
  62.5% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.2263), calc(var(--jpw, 110px) * -0.0530)) scale(0.794); z-index: -1; opacity: 0.83; }
  68.75% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.1225), calc(var(--jpw, 110px) * -0.0693)) scale(0.747); z-index: -1; opacity: 0.81; }
  75% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * -0.0000), calc(var(--jpw, 110px) * -0.0750)) scale(0.730); z-index: -1; opacity: 0.80; }
  81.25% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.1225), calc(var(--jpw, 110px) * -0.0693)) scale(0.747); z-index: -1; opacity: 0.81; }
  87.5% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.2263), calc(var(--jpw, 110px) * -0.0530)) scale(0.794); z-index: -1; opacity: 0.83; }
  93.75% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.2956), calc(var(--jpw, 110px) * -0.0287)) scale(0.866); z-index: -1; opacity: 0.86; }
  100% { transform: translate(-50%, -50%) translate(calc(var(--jpw, 110px) * 0.3200), calc(var(--jpw, 110px) * -0.0000)) scale(0.950); z-index: -1; opacity: 0.90; }
}
.jp.dizzy .jp-stars, .jp.jamra-dizzy .jp-stars { opacity: 1; }

/* الدموع (البكاء) */
.jp-tears i { position: absolute; width: calc(var(--jpw, 110px) * .06); height: calc(var(--jpw, 110px) * .1); border-radius: 50% 50% 55% 55%; background: radial-gradient(circle at 35% 30%, #fff, #7cc8ff 55%, #2b8be0); opacity: 0; pointer-events: none; }
.jp-tears i:nth-child(1) { left: 31%; top: 33%; } .jp-tears i:nth-child(2) { left: 61%; top: 33%; animation-delay: .25s !important; } .jp-tears i:nth-child(3) { left: 31%; top: 33%; animation-delay: .55s !important; } .jp-tears i:nth-child(4) { left: 61%; top: 33%; animation-delay: .8s !important; }
.jp.cry .jp-tears i { animation: jp-tear 1.1s ease-in infinite; }
@keyframes jp-tear { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; transform: translateY(2px) scale(1); } 100% { opacity: 0; transform: translateY(calc(var(--jpw, 110px) * .42)) scale(.9); } }

/* جزيئات: قلوب، شرر ذهبي، فقاعة هواء */
.jp-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.jp-fx span { position: absolute; left: 50%; top: 40%; font-size: calc(var(--jpw, 110px) * .17); line-height: 1; pointer-events: none; animation: jp-fly var(--t, .9s) ease-out forwards; }
@keyframes jp-fly { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -60px)) scale(var(--s, 1)) rotate(var(--r, 0deg)); } }
.jp-fx span.spark { color: #ffd23f; text-shadow: 0 0 8px #ffb300; }
.jp-fx span.puff { width: calc(var(--jpw, 110px) * .16); height: calc(var(--jpw, 110px) * .16); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .55)); border: 1px solid rgba(255, 255, 255, .8); }

/* الصندوق (البيت) وأزرار التحكم */
#jp-home { position: fixed !important; z-index: 24; bottom: 16px; left: 78px; width: calc(var(--jpw, 110px) * 1.12); }
.jp-box { position: relative; height: calc(var(--jpw, 110px) * .4); border-radius: 12px 12px 16px 16px; background: linear-gradient(#c58341, #8c5524); border: 2px solid #5a3510; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); display: grid; place-items: center; overflow: hidden; }
.jp-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; background: linear-gradient(#e0a050, #b8742f); border-bottom: 2px solid #5a3510; }
.jp-box b { position: relative; z-index: 1; font-size: .7rem; color: #ffe9b8; text-shadow: 0 1px 0 #3a2008; margin-top: 14%; }
.jp-ctl { position: absolute; z-index: 3; bottom: 0; inset-inline-start: calc(100% + 5px); display: flex; flex-direction: column; gap: 4px; opacity: .85; }
.jp-ctl button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2, #475569); background: rgba(17, 24, 39, .9); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.jp-ctl button:hover { border-color: var(--gold, #f59e0b); }
#jp-fab { position: fixed !important; z-index: 24; bottom: 16px; left: 16px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold, #f59e0b); background: rgba(17, 24, 39, .92); cursor: pointer; padding: 0; overflow: hidden; display: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
#jp-fab img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
body.jp-hidden #jp-home, body.jp-hidden #jamra-layer { display: none; }
body.jp-hidden #jp-fab { display: block; }

/* زر الإنشاء المقفول عقاباً */
.jp-locked { position: relative; filter: grayscale(.7) brightness(.8); cursor: not-allowed !important; }
.jp-locked::after { content: "🔒"; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; }

/* نافذة الدردشة */
#jp-chat { position: fixed; z-index: 36; left: 16px; bottom: calc(var(--jpw, 110px) * .55 + 24px); width: min(390px, calc(100vw - 24px)); height: min(480px, calc(100vh - var(--jph, 140px) - 120px)); display: none; flex-direction: column; background: var(--glass, rgba(17, 24, 39, .94)); backdrop-filter: blur(14px); border: 1px solid var(--line-2, #475569); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); overflow: hidden; }
#jp-chat.on { display: flex; animation: jp-pop .22s ease-out; }
@keyframes jp-pop { from { opacity: 0; } to { opacity: 1; } }   /* شفافية فقط: بلا إزاحة، فيبقى قياس الإطار ثابتاً لتجلس عليه جمرة بدقة */
.jpc-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg, rgba(245, 158, 11, .22), rgba(30, 95, 184, .22)); border-bottom: 1px solid var(--line, #334155); }
.jpc-head strong { flex: 1; font-size: .92rem; }
.jpc-head button { background: none; border: 0; color: inherit; font-size: 1.1rem; cursor: pointer; opacity: .7; }
.jpc-msgs { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.jpc-m { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .9rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.jpc-m.bot { align-self: flex-start; background: rgba(245, 158, 11, .13); border: 1px solid rgba(245, 158, 11, .3); border-end-start-radius: 4px; }
.jpc-m.me { align-self: flex-end; background: rgba(56, 189, 248, .16); border: 1px solid rgba(56, 189, 248, .3); border-end-end-radius: 4px; }
.jpc-m.dots::after { content: "●●●"; letter-spacing: 3px; opacity: .6; animation: jp-dots 1s steps(4) infinite; }
@keyframes jp-dots { 0% { opacity: .2; } 50% { opacity: .9; } 100% { opacity: .2; } }
.jpc-chips { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.jpc-chips button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .1); color: inherit; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.jpc-chips button:hover { background: rgba(245, 158, 11, .25); }
.jpc-foot { display: flex; align-items: flex-end; flex: none; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line, #334155); }
.jpc-foot textarea { flex: 1; resize: none; height: 42px !important; min-height: 42px !important; max-height: 42px; margin: 0; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: .9rem; background: rgba(148, 163, 184, .08); color: inherit; border: 1px solid var(--line-2, #475569); }
.jpc-foot button { width: 44px; height: 42px; flex: none; border-radius: 12px; border: 0; background: linear-gradient(135deg, var(--amber, #fbbf24), var(--gold, #f59e0b)); color: var(--ink, #1a1204); font-size: 1.1rem; cursor: pointer; }

/* الهاتف: الدردشة ورقة سفلية فوق الشريط السفلي، والصندوق صغير */
@media (max-width: 759px) {
  #jp-home { bottom: calc(84px + env(safe-area-inset-bottom)); left: 50px; width: calc(var(--jpw, 84px) * 1.1); }
  #jp-fab { bottom: calc(84px + env(safe-area-inset-bottom)); left: 8px; }
  #jp-chat { inset-inline: 8px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); height: min(62vh, calc(100vh - var(--jph, 120px) - 160px)); }
}
@media (max-width: 759px) { body.jp-typing #jp-home, body.jp-typing #jamra-layer, body.jp-typing #jp-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .jp.sway .jp-body, .jp-breath, .jp.angry .jp-body, .jp-stars i, .jp-fire i { animation: none !important; } }

/* الميكروفون */
.jpc-mic { width: 42px; height: 42px; flex: none; border-radius: 12px; border: 1px solid var(--line-2, #475569); background: rgba(148, 163, 184, .1); color: inherit; cursor: pointer; display: grid; place-items: center; padding: 0; }
.jpc-mic:hover { border-color: var(--gold, #f59e0b); }
.jpc-mic.on { background: #dc2626; border-color: #fca5a5; color: #fff; animation: jp-rec 1s ease-in-out infinite; }
@keyframes jp-rec { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); } 50% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); } }

/* ===== ظل أرضي ثابت + ورقة مشي 3/4 (8 إطارات) ===== */
#jamra-shadow { position: absolute; left: 0; top: 0; width: calc(var(--jpw, 110px) * .58); height: calc(var(--jpw, 110px) * .14); border-radius: 50%; background: #000; opacity: .25; filter: blur(1.5px); pointer-events: none; will-change: transform; transform-origin: 50% 50%; }
.jp-breath { position: relative; }
.jp-walk { position: absolute; inset: 0; display: none; background: url(/static/mascot/walk-sheet.webp) 0 0 / 800% 100% no-repeat; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.jp.sprite .jp-walk { display: block; }
.jp.sprite .jp-img { visibility: hidden; }
.jp.sprite:not(.run) .jp-walk { background-position: calc(var(--jpw, 110px) * -1) 0; }   /* إطار ثابت (منتصف الخطوة) للقفزات */
.jp.run .jp-walk { animation: jp-walk var(--walk-t, .64s) steps(8) infinite; }   /* 8 إطارات تتبدّل بخطوات منفصلة، بسرعة تطابق إزاحة المشي */
@keyframes jp-walk { from { background-position: 0 0; } to { background-position: calc(var(--jpw, 110px) * -8) 0; } }
@media (prefers-reduced-motion: reduce) { .jp.run .jp-walk { animation: none; } }

/* بطاقة تأكيد إنشاء الفيديو داخل المحادثة */
.jpc-m.card { background: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .4); }
.jpc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.jpc-actions button { flex: 1; min-width: 120px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-2, #475569); background: rgba(148, 163, 184, .12); color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.jpc-actions button[data-act=go] { background: linear-gradient(135deg, var(--amber, #fbbf24), var(--gold, #f59e0b)); color: var(--ink, #1a1204); border: 0; font-weight: 700; }

/* ===== إمساك وسحب، دوخة، شاي، انقطاع الإنترنت، وضعية المخرج ===== */
.jp.jamra-dragged { cursor: grabbing; }
.jp.jamra-dragged .jp-sink { transform: translateY(-9px); transition: transform .15s; }   /* تتدلّى وترفع قدميها */
.jp.jamra-dragged .jp-body { transform-origin: 50% 8%; }
.jp.jamra-dizzy .jp-body { animation: jp-dizzy .5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes jp-dizzy { 0% { transform: rotate(-11deg) translateX(-3%); } 50% { transform: rotate(11deg) translateX(3%); } 100% { transform: rotate(-11deg) translateX(-3%); } }
.jp.frozen .jp-breath, .jp.frozen .jp-walk, .jp.frozen .jp-body { animation-play-state: paused; }
.jp.frozen .jp-img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)) saturate(.55) brightness(1.05) hue-rotate(160deg); }   /* تتجمد وتبرد */
.jp-tea { position: absolute; left: 56%; bottom: 7%; width: calc(var(--jpw, 110px) * .22); height: calc(var(--jpw, 110px) * .26); display: none; pointer-events: none; z-index: 2; }
.jp.tea .jp-tea { display: block; }
.jp-tea::before { content: ""; position: absolute; left: 12%; right: 12%; top: 26%; bottom: 14%; border-radius: 8% 8% 46% 46% / 6% 6% 40% 40%; background: linear-gradient(#e9a43c 0%, #b4531a 100%); border: 1.5px solid rgba(255, 255, 255, .6); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.jp-tea::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: 3%; height: 14%; border-radius: 50%; background: #f4efe6; border: 1.5px solid #c9b79c; }
.jp-tea b { position: absolute; left: 36%; top: 0; width: 22%; height: 34%; border-radius: 50%; background: rgba(255, 255, 255, .6); filter: blur(2.5px); animation: jp-steam 1.7s ease-in infinite; }
@keyframes jp-steam { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateY(-14px) translateX(4px) scale(1.2); } }
.jp.jamra-director::after { content: "🎬"; position: absolute; right: -4%; bottom: 34%; font-size: calc(var(--jpw, 110px) * .26); animation: jp-clap 1.4s ease-in-out infinite; pointer-events: none; z-index: 3; }
@keyframes jp-clap { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) translateY(-3px); } }
/* أداء: النار والنجوم لا تُرسم ولا تتحرك إلا في حالتها (كانت 12 حركة لا نهائية تعمل مخفية في كل صفحة) */
.jp:not(.angry) .jp-fire, .jp:not(.dizzy):not(.jamra-dizzy) .jp-stars { display: none; }

/* ===== مناطق الأمان لبيت جمرة وزرها ودردشتها (قيم env تساوي 0 على الأجهزة بلا نوتش) ===== */
#jp-home { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: max(78px, calc(env(safe-area-inset-left, 0px) + 70px)); }
#jp-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px)); }
#jp-chat { left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px)); }
@media (max-width: 759px) {
  #jp-home { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); left: max(50px, calc(env(safe-area-inset-left, 0px) + 42px)); }   /* فوق الشريط السفلي */
  #jp-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); left: max(8px, env(safe-area-inset-left, 0px)); }
  #jp-chat { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
}
/* الهاتف الأفقي: الشريط السفلي مخفي، فينزل الصندوق والدردشة إلى القاع */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  #jp-home { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #jp-fab { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #jp-chat { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: min(300px, calc(100vh - 24px - env(safe-area-inset-bottom, 0px))); }
}

/* ===== ثبات جمرة وبيتها أثناء التمرير باللمس: تثبيت إلزامي + تسريع المعالج الرسومي + بلا أي transition على التموضع ===== */
#jp-home, #jp-fab { position: fixed !important; transition: none !important; will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#jamra-layer { will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: none !important; }
/* الهاتف: البيت وأزراره وجمرة في الزاوية السفلية اليسرى فوق شريط التنقل مباشرة (ارتفاعه ≈ 70px + منطقة الأمان) */
@media (max-width: 759px) {
  #jp-home { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #jp-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* هواتف ≤600px: أزرار التحكم والفقاعة والدردشة أصغر بنحو 15% */
@media (max-width: 600px) {
  .jp-ctl button { width: 22px; height: 22px; font-size: 11px; }
  .jp-bubble { font-size: .72rem; min-width: 94px; padding: 6px 10px; max-width: min(212px, 60vw); }
  #jp-chat { transform: scale(.85); -webkit-transform: scale(.85); transform-origin: bottom left; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  #jp-home { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #jp-fab { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
/* الهاتف: نص «بيت جمرة» كاملاً بلا قصّ: القاعدة أطول قليلاً والبيت أعلى من شريط التنقل */
@media (max-width: 759px) {
  #jp-home { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  #jp-fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .jp-box { height: calc(var(--jpw, 84px) * .5); }
  .jp-box b { margin-top: 12%; line-height: 1.2; font-size: .72rem; }
}

/* ذاكرة جمرة: ترس صغير في رأس النافذة + لوحة بسيطة فوق الرسائل */
.jpc-head .jpc-gear { font-size: .95rem; opacity: .55; padding: 2px 4px; line-height: 1; transition: opacity .15s, transform .25s; }
.jpc-head .jpc-gear:hover, .jpc-head .jpc-gear:focus-visible { opacity: 1; transform: rotate(40deg); }
.jpc-mem { position: absolute; z-index: 3; top: 46px; inset-inline: 10px; max-height: calc(100% - 60px); overflow: auto; padding: 12px 14px; border-radius: 14px; background: var(--glass, rgba(17, 24, 39, .97)); border: 1px solid var(--line-2, #475569); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-size: .84rem; line-height: 1.6; }
.jpc-mem[hidden] { display: none; }
.jpm-top { display: flex; align-items: center; gap: 8px; }
.jpm-top strong { flex: 1; font-size: .9rem; }
.jpm-top .jpm-x { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 1rem; }
.jpm-note { margin: 6px 0 8px; opacity: .8; font-size: .78rem; }
.jpm-sw { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px; }
.jpm-sw input { accent-color: var(--accent, #f59e0b); width: 16px; height: 16px; }
.jpm-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jpm-list li { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line, #334155); font-size: .78rem; }
.jpm-list .jpm-empty { background: none; border: 0; padding: 0; opacity: .6; }
.jpm-clear { background: none; border: 1px solid var(--line-2, #475569); color: inherit; border-radius: 10px; padding: 4px 12px; font-size: .78rem; cursor: pointer; opacity: .85; }
.jpm-clear:disabled { opacity: .35; cursor: default; }