/* «المساحة» · الطبقة الحيّة (1.16) — التعليقات والتفاعلات المتحركة فوق الشريط السفلي (ui/space-live.js).
   الوعاء (#sp-live-host في شاشة المساحة) يبقى بلا ارتفاع في التخطيط: الطبقة كلها مرسومة فوق حافته العليا
   (bottom: 100%) — التعليقات في الثلث الأسفل على جهة البداية، والتفاعلات تطير من زرّها على جهة النهاية.
   الشاشة تدرّج أزرق داكن في السمتين، فالألوان هنا فاتحة على داكن في الحالتين. لا تمرير ولا مؤشّر: ما يتجاوز
   الحافة العليا يذوب فيها (mask)، والتعليقات وحدها تلتقط اللمس (الضغط المطوّل) — الفراغ بينها يمرّ إلى ما تحته. */

.spl-host { position: relative; z-index: 4; }
.spl { position: relative; --spl-fg: #fff; --spl-dim: rgba(255, 255, 255, .7); --spl-bubble: rgba(10, 22, 44, .74);
  --spl-mine: rgba(56, 96, 168, .78); --spl-gap: 6px; color: var(--spl-fg); }
.spl.is-ended .spl-stage { opacity: 0; transition: opacity var(--dur-3) ease; }

/* ── الظلّ: ما تحت الطبقة (المستمعون حين يُمرَّرون إليها) يخفت كي تُقرأ التعليقات — ما دام فيها شيء ── */
.spl-scrim { position: absolute; bottom: 0; inset-inline: 0; height: calc(min(28vh, 236px) + 110px); pointer-events: none;
  background: linear-gradient(to top, rgba(7, 15, 30, .9) 0%, rgba(7, 15, 30, .72) 48%, rgba(7, 15, 30, 0) 100%);
  opacity: 0; transition: opacity 420ms ease; }
.spl.has-items .spl-scrim { opacity: 1; }

/* ── المسرح: المثبّت فوق، ثم التعليقات ── */
.spl-stage { position: absolute; bottom: 100%; inset-inline-start: 0; width: min(80%, 420px);
  padding: 0 12px 8px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.spl-wrap { position: relative; height: min(28vh, 236px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 42%); }
.spl-feed { position: absolute; inset-inline: 0; bottom: 0; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spl-gap); will-change: transform; }

/* ── تعليق ── */
.spl-c { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 6px 12px; padding-inline: 6px 12px; border-radius: 18px; background: var(--spl-bubble); pointer-events: auto;
  transform-origin: bottom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; }
.spl-c:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 1px; }
.spl-c.is-mine { background: var(--spl-mine); }
.spl-av { flex: none; padding-top: 1px; }
.spl-av .av { --sz: 26px; font-size: 12px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22); }
.spl-cb { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.spl-cn { display: inline-flex; align-items: center; gap: 0; min-width: 0; font-size: var(--fz-xs); font-weight: 700;
  line-height: 1.35; color: var(--spl-dim); }
.spl-cn bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em; }
.spl-cn .vbadge { margin-inline-start: 3px; }
.spl-c.is-host .spl-cn { color: #ffd68a; }
.spl-c.is-cohost .spl-cn { color: #b9d3ff; }
.spl-tag { flex: none; margin-inline-start: 6px; padding: 0 6px; border-radius: var(--r-full); font-size: 10.5px;
  font-weight: 700; line-height: 16px; color: #0d1a3a; background: #b9d3ff; }
.spl-tag.host { background: #ffd68a; color: #3a2600; }
.spl-ct { font-size: var(--fz-sm); line-height: 1.45; color: var(--spl-fg); overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* سطر المساحة نفسها (فُتحت التعليقات، أُغلقت، منعك المضيف) */
.spl-sys { background: transparent; padding: 2px 0; pointer-events: none; }
.spl-sys-b { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full);
  font-size: var(--fz-xs); font-weight: 600; color: var(--spl-dim); background: rgba(255, 255, 255, .1); }
.spl-sys-b .icon-svg { width: 14px; height: 14px; }

/* ── التعليق المثبّت ── */
.spl-pin { display: flex; align-items: flex-start; gap: 6px; max-width: 100%; padding: 7px 8px; padding-inline: 10px 6px;
  border-radius: var(--r-md); background: rgba(24, 46, 86, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .28);
  pointer-events: auto; align-self: flex-start; }
.spl-pin[hidden] { display: none; }
.spl-pin-ic { flex: none; color: #ffd68a; padding-top: 2px; }
.spl-pin-ic .icon-svg { width: 15px; height: 15px; }
.spl-pin-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-user-select: none; user-select: none; }
.spl-pin-n { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fz-xs); font-weight: 700; color: var(--spl-dim); }
.spl-pin-n .av { --sz: 18px; font-size: 9px; }
.spl-pin-n bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.spl-pin-t { font-size: var(--fz-sm); line-height: 1.45; color: var(--spl-fg); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.spl-pin.is-open .spl-pin-t { -webkit-line-clamp: 8; line-clamp: 8; }
.spl-pin-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -3px 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--spl-dim); cursor: pointer; }
.spl-pin-x .icon-svg { width: 16px; height: 16px; }
.spl-pin-x:active { background: rgba(255, 255, 255, .14); }

/* ── التفاعلات الطائرة ── */
.spl-fx { position: absolute; inset-inline: 0; bottom: 0; height: 0; overflow: visible; pointer-events: none; }
.spl-fl { position: absolute; left: 0; top: 0; font-size: 26px; line-height: 1; pointer-events: none; opacity: 0;
  will-change: transform, opacity; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.spl-fl.big { font-size: 30px; }

/* ── الشريط الذاتي (حين لا تملك الشاشة شريطها) ── */
.spl-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + var(--safe-b, 0px)); }
.spl-form { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.spl-in { flex: 1; min-width: 0; height: 42px; padding-inline: 16px 44px; border: 0; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .14); color: var(--spl-fg); font: inherit; font-size: var(--fz-md); outline: none; }
.spl-in::placeholder { color: rgba(255, 255, 255, .6); }
.spl-in:focus { background: rgba(255, 255, 255, .2); }
.spl-in:disabled { opacity: .7; }
.spl-send { position: absolute; inset-inline-end: 4px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: #fff; color: #0d1a3a; cursor: pointer; }
.spl-send[hidden] { display: none; }
.spl-send .icon-svg { width: 18px; height: 18px; }
.spl-form.is-busy .spl-send { opacity: .5; }
.spl-rbtn { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #ff8fa3; cursor: pointer; }
.spl-rbtn .icon-svg { width: 22px; height: 22px; }
.spl-rbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .24); }
.spl-tray { position: absolute; bottom: calc(100% - 2px); inset-inline-end: 10px; display: flex; gap: 2px; padding: 5px;
  border-radius: var(--r-full); background: rgba(10, 18, 44, .86); box-shadow: 0 6px 22px rgba(0, 0, 0, .3); z-index: 2; }
.spl-tray[hidden] { display: none; }
.spl-tray button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; font-size: 24px;
  line-height: 1; cursor: pointer; }
.spl-tray button:active { background: rgba(255, 255, 255, .14); }
.spl-hint { position: absolute; bottom: calc(100% + 4px); inset-inline-start: 14px; max-width: calc(100% - 28px);
  padding: 6px 12px; border-radius: var(--r-full); font-size: var(--fz-xs); font-weight: 600; color: #fff;
  background: rgba(10, 18, 44, .82); z-index: 2; transition: opacity var(--dur-3) ease, transform var(--dur-3) ease; }
.spl-hint[hidden] { display: none; }
.spl-hint.is-out { opacity: 0; transform: translateY(4px); }
.spl.has-hint .spl-stage { padding-bottom: 46px; }

/* ── ورقة التعليق (الضغط المطوّل) ── */
.spl-sh-head { display: flex; align-items: flex-start; gap: 10px; padding: 4px 4px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--sep); }
.spl-sh-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spl-sh-n { display: inline-flex; align-items: center; font-weight: 700; font-size: var(--fz-sm); }
.spl-sh-t { font-size: var(--fz-sm); line-height: 1.5; color: var(--fg-2, inherit); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* ── تقليل الحركة: لا انزلاق ولا طيران (الكود يتخطّاهما؛ هذا لما بقي من انتقال) ── */
body.reduce-motion .spl-hint, body.reduce-motion .spl.is-ended .spl-stage, body.reduce-motion .spl-scrim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .spl-hint, .spl.is-ended .spl-stage, .spl-scrim { transition: none; }
}