/* ============================================================
   FB Space — in-platform social network (Twitter/Reddit-like)
   Distinct identity: blue→purple accent, smooth, clean.
   Reuses dashboard.css tokens (--bg-*, --text-*, --accent-*).
   ============================================================ */
:root{
  --sp-accent:#5B8CFF;
  --sp-accent-2:#A855F7;
  --sp-grad:linear-gradient(135deg,#5B8CFF 0%,#A855F7 100%);
  --sp-grad-soft:linear-gradient(135deg,rgba(91,140,255,.15) 0%,rgba(168,85,247,.15) 100%);
  --sp-ring:rgba(91,140,255,.35);
  --sp-radius:18px;
  --sp-radius-sm:12px;
}

/* ---- ForexBro Space + AI Shot sidebar links ----
   2026-06-09 (طلب المالك): أُزيل التمييز «الصندوق المتدرّج الممتلئ + النبض + النص
   المتدرّج» لأنه كان شذوذاً وتشوّهاً بصرياً يكسر إيقاع القائمة. الآن العنصران ينسجمان
   مع باقي القائمة تماماً (نفس مربّع الأيقونة المحايد ونفس حالة active/hover من القاعدة
   الموحّدة أدناه)، والتمييز الخفيف الوحيد = لون أيقونة مميّز + وسم «جديد» صغير نظيف. */

/* لون الأيقونة فقط — المربّع المحايد يأتي من القاعدة الموحّدة (أسفل) */
.sidebar-link.sp-nav svg{ color:var(--sp-accent-2,#A855F7); }
.sidebar-link.ais-nav svg{ color:#F59E0B; }
.sidebar-link.sp-nav.active svg, .sidebar-link.sp-nav:hover svg{ color:var(--sp-accent-2,#A855F7); }
.sidebar-link.ais-nav.active svg, .sidebar-link.ais-nav:hover svg{ color:#F59E0B; }

/* وسم «جديد» صغير وهادئ (بدل البيلة البيضاء الثقيلة) */
.sidebar-link .sp-new-badge,
.sidebar-link .ais-new-badge{
  margin-inline-start:8px; flex:0 0 auto;
  font-size:9px; font-weight:700; letter-spacing:.3px;
  line-height:1.5; padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,0.07); color:var(--text-muted,#9aa3b8);
  border:1px solid rgba(255,255,255,0.12);
}

/* شارة العدّ للسبيس — بنفسجي خفيف (شارة عدّ صغيرة، لا صندوق) */
#spNavBadge{ background:var(--sp-accent-2,#A855F7)!important; color:#fff!important; }

/* 2026-06-09 (طلب المالك): توحيد القائمة الجانبية بالكامل — كل الأيقونات (بما فيها
   AI Shot و ForexBro Space) داخل نفس المربّع المحايد بنفس المقاس وحالة active، فتصير
   القائمة متناسقة بلا أي صندوق شاذّ. (لون أيقونة AI Shot/Space مميّز عبر القاعدة أعلاه.) */
.sidebar-link svg{
  width:30px; height:30px; padding:6px; box-sizing:border-box;
  border-radius:9px; flex:0 0 30px;
  background:rgba(255,255,255,0.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  transition:background .15s, box-shadow .15s;
}
.sidebar-link:hover svg{ background:rgba(255,255,255,0.10); }
.sidebar-link.active svg{
  background:var(--accent-gold-dim,rgba(255,184,0,0.14));
  box-shadow:inset 0 0 0 1px rgba(255,184,0,0.32);
}

/* ---- layout ---- */
.sp-root{ animation:spFade .35s ease; }
@keyframes spFade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.sp-wrap{
  display:grid; grid-template-columns:minmax(0,600px) 320px; gap:22px; align-items:start;
  max-width:960px; margin:0 auto; justify-content:center;
}
@media (max-width:1100px){ .sp-wrap{ grid-template-columns:1fr; max-width:600px; } .sp-rail{ display:none!important; } }

.sp-main{ min-width:0; }
.sp-rail{ position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }

/* ---- tabs ---- */
.sp-tabs{
  display:flex; gap:4px; background:var(--bg-secondary);
  border:1px solid var(--border-subtle); border-radius:999px; padding:5px;
}
.sp-tab{
  flex:1; border:0; background:transparent; color:var(--text-secondary);
  font:600 13px/1 var(--font-body); padding:10px 8px; border-radius:999px;
  cursor:pointer; transition:all .18s ease; display:flex; align-items:center; justify-content:center; gap:6px;
}
.sp-tab:hover{ color:var(--text-primary); background:var(--bg-hover); }
.sp-tab.active{ color:#fff; background:var(--sp-grad); box-shadow:0 4px 14px -4px var(--sp-ring); }
.sp-bell-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#fff;color:#5B8CFF;
  font:700 11px/18px var(--font-mono); display:none;
}
.sp-tab.active .sp-bell-badge{ background:#fff;color:#5B8CFF; }

/* ---- feed mode toggle ---- */
.sp-feed-modes{ display:flex; gap:18px; padding:14px 6px 4px; }
.sp-feed-modes button{
  background:none;border:0;color:var(--text-muted);font:600 13px/1 var(--font-body);
  cursor:pointer;padding:6px 2px;position:relative;transition:color .15s;
}
.sp-feed-modes button.active{ color:var(--text-primary); }
.sp-feed-modes button.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:var(--sp-grad);
}

/* ---- cards / posts ---- */
.sp-card{
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--sp-radius); padding:16px;
}
.sp-card h4{ font:700 14px/1.2 var(--font-display); margin-bottom:12px; }

.sp-post{
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--sp-radius); padding:15px 16px; margin-top:12px;
  transition:border-color .18s ease, transform .18s ease;
}
.sp-post:hover{ border-color:var(--border-medium); }
.sp-post.sp-clickable{ cursor:pointer; }
.sp-repost-tag{ font:600 12px/1 var(--font-body); color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.sp-repost-tag svg{ width:14px;height:14px; }

.sp-post-head{ display:flex; gap:12px; align-items:flex-start; }
.sp-avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 44px;object-fit:cover;
  background:var(--sp-grad-soft); display:grid;place-items:center;
  color:var(--sp-accent);font:700 16px/1 var(--font-display); overflow:hidden;
  border:1px solid var(--border-subtle);
}
.sp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.sp-avatar.sp-av-sm{ width:34px;height:34px;flex-basis:34px;font-size:13px; }
.sp-id{ min-width:0; flex:1; }
.sp-name-row{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.sp-name{ font:700 14px/1.2 var(--font-display); color:var(--text-primary); }
.sp-handle{ color:var(--text-muted); font:400 13px/1.2 var(--font-body); }
.sp-dot{ color:var(--text-muted); }
.sp-time{ color:var(--text-muted); font:400 13px/1.2 var(--font-body); }
.sp-tick{ width:15px;height:15px;flex:0 0 15px; }
.sp-tick.official{ color:var(--accent-gold); }
.sp-tick.verified{ color:var(--sp-accent); }
.sp-plan-badge{
  font:700 9px/1 var(--font-mono); padding:3px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em;
}
.sp-plan-elite{ background:rgba(168,85,247,.18); color:#C99BFF; }
.sp-plan-gold{ background:var(--accent-gold-dim); color:var(--accent-gold); }
.sp-plan-forex{ background:var(--accent-green-dim); color:var(--accent-green); }
.sp-plan-indices{ background:var(--accent-blue-dim); color:var(--accent-blue); }
.sp-plan-options{ background:rgba(255,138,0,.16); color:#FF8A00; }

.sp-menu-btn{ margin-inline-start:auto; background:none;border:0;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:8px; }
.sp-menu-btn:hover{ background:var(--bg-hover);color:var(--text-primary); }

.sp-body{ margin:8px 0 0; color:var(--text-primary); font:400 15px/1.55 var(--font-body); white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.sp-body a.sp-link{ color:var(--sp-accent); text-decoration:none; }
.sp-body a.sp-link:hover{ text-decoration:underline; }
.sp-body .sp-cash{ color:var(--accent-gold); font-weight:600; cursor:pointer; }
.sp-body .sp-tag{ color:var(--sp-accent); cursor:pointer; }
.sp-body .sp-mention{ color:var(--sp-accent); cursor:pointer; font-weight:600; }

/* media */
.sp-media{ margin-top:10px; display:grid; gap:6px; border-radius:14px; overflow:hidden; }
.sp-media.n1{ grid-template-columns:1fr; }
.sp-media.n2{ grid-template-columns:1fr 1fr; }
.sp-media img{ width:100%; height:100%; max-height:420px; object-fit:cover; background:var(--bg-tertiary); cursor:zoom-in; display:block; }
/* 2026-06-03 (المالك): صورة المنشور الواحدة تظهر كاملة بأبعادها الطبيعية (بلا قصّ)
   فلا يحتاج العميل يضغط عليها. الشبكة (صورتان+) تبقى cover للتناسق. */
.sp-media.n1 img{ height:auto; max-height:680px; object-fit:contain; }

/* quoted */
.sp-quote{ margin-top:10px; border:1px solid var(--border-subtle); border-radius:14px; padding:12px; background:var(--bg-secondary); }

/* shared signal card */
.sp-signal{
  margin-top:10px; border:1px solid var(--sp-ring); border-radius:14px; padding:13px 14px;
  background:var(--sp-grad-soft); display:flex; align-items:center; gap:12px;
}
.sp-signal .sp-sig-ico{ width:34px;height:34px;border-radius:10px;background:var(--sp-grad);display:grid;place-items:center;color:#fff;flex:0 0 34px; }
.sp-signal .sp-sig-pair{ font:700 15px/1.1 var(--font-display); }
.sp-signal .sp-sig-meta{ color:var(--text-secondary); font:500 12px/1.3 var(--font-body); margin-top:2px; }
.sp-sig-res{ margin-inline-start:auto; font:700 13px/1 var(--font-mono); padding:5px 9px;border-radius:8px; }
.sp-sig-win{ background:var(--accent-green-dim); color:var(--accent-green); }
.sp-sig-loss{ background:var(--accent-red-dim); color:var(--accent-red); }
.sp-sig-open{ background:var(--accent-gold-dim); color:var(--accent-gold); }

/* poll */
.sp-poll{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.sp-poll-opt{
  position:relative; border:1px solid var(--border-medium); border-radius:10px; padding:10px 12px;
  cursor:pointer; overflow:hidden; transition:border-color .15s; font:500 14px/1 var(--font-body);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.sp-poll-opt:hover{ border-color:var(--sp-accent); }
.sp-poll-opt .sp-poll-fill{ position:absolute; inset:0; background:var(--sp-grad-soft); width:0; transition:width .5s ease; z-index:0; }
.sp-poll-opt.voted .sp-poll-fill{ background:var(--sp-grad-soft); }
.sp-poll-opt.mine{ border-color:var(--sp-accent); font-weight:700; }
.sp-poll-opt span{ position:relative; z-index:1; }
.sp-poll-meta{ color:var(--text-muted); font:500 12px/1 var(--font-body); margin-top:2px; }

/* actions bar */
.sp-actions{ display:flex; gap:6px; margin-top:12px; max-width:440px; }
.sp-act{
  flex:1; display:flex; align-items:center; gap:7px; justify-content:center;
  background:none; border:0; color:var(--text-muted); cursor:pointer;
  font:600 13px/1 var(--font-body); padding:8px; border-radius:10px; transition:all .15s ease;
}
.sp-act svg{ width:18px;height:18px; transition:transform .15s ease; }
.sp-act:hover{ background:var(--bg-hover); }
.sp-act.reply:hover{ color:var(--sp-accent); }
.sp-act.repost:hover,.sp-act.repost.on{ color:var(--accent-green); }
.sp-act.like:hover,.sp-act.like.on{ color:var(--accent-red); }
.sp-act.like.on svg{ fill:var(--accent-red); transform:scale(1.15); }
.sp-act.repost.on svg{ stroke:var(--accent-green); }
.sp-act.share:hover{ color:var(--sp-accent); }

/* composer */
.sp-composer{
  background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--sp-radius);
  padding:14px 16px; margin-top:14px;
}
.sp-composer.sp-focus{ box-shadow:0 0 0 1px var(--sp-ring); border-color:transparent; }
/* تنبيه القيود لغير المشترك أعلى المؤلّف */
.sp-ns-notice{ display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:9px 12px;
  border-radius:11px; background:rgba(255,184,0,0.06); border:1px solid rgba(255,184,0,0.2);
  color:var(--text-secondary); font-size:12.5px; line-height:1.55; }
.sp-ns-notice svg{ color:var(--accent-gold,#FFB800); }
/* هيكل انتظار المؤلّف حتى تصل الصلاحيات (يمنع وميض زر الصورة) */
.sp-comp-skeleton{ pointer-events:none; }
.sp-skel-av{ width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.06);flex:0 0 auto; }
.sp-skel-line{ height:34px;border-radius:8px;background:rgba(255,255,255,.05);margin-bottom:12px; }
.sp-skel-bar{ height:18px;width:60%;border-radius:7px;background:rgba(255,255,255,.04); }
.sp-comp-skeleton .sp-skel-av,.sp-comp-skeleton .sp-skel-line,.sp-comp-skeleton .sp-skel-bar{ animation:spSkel 1.1s ease-in-out infinite; }
@keyframes spSkel{ 0%,100%{opacity:.5} 50%{opacity:.9} }
/* بطاقة «وصلت حدّ اليوم» مكان أزرار النشر */
.sp-limit-card{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:12px;
  background:rgba(255,184,0,.06); border:1px solid rgba(255,184,0,.22); }
.sp-limit-ico{ width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--accent-gold,#FFB800); background:rgba(255,184,0,.1); border:1px solid rgba(255,184,0,.3); }
.sp-limit-title{ font-weight:800; font-size:14.5px; color:var(--text-primary,#fff); }
.sp-limit-sub{ font-size:12.5px; line-height:1.55; color:var(--text-secondary,#cbd5e1); margin-top:2px; }
.sp-comp-row{ display:flex; gap:12px; }
.sp-comp-area{ flex:1; min-width:0; }
.sp-comp-input{
  width:100%; background:transparent; border:0; resize:none; color:var(--text-primary);
  font:400 17px/1.5 var(--font-body); min-height:44px; outline:none;
  /* 2026-06-03 (المالك): حشو داخلي فلا يلتصق/يطلع النص من حدّ الخانة. */
  padding:6px 2px 2px; box-sizing:border-box;
}
.sp-comp-input::placeholder{ color:var(--text-muted); }
.sp-comp-preview{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.sp-comp-thumb{ position:relative; width:88px;height:88px;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle); }
.sp-comp-thumb img{ width:100%;height:100%;object-fit:cover; }
.sp-comp-thumb button{ position:absolute;top:4px;right:4px;background:rgba(0,0,0,.65);color:#fff;border:0;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:13px;line-height:1; }
.sp-comp-poll{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.sp-comp-poll input{ background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:10px;padding:9px 12px;color:var(--text-primary);font:400 14px/1 var(--font-body); }
.sp-comp-poll .sp-poll-dur{ display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:13px; }
.sp-comp-bar{ display:flex; align-items:center; gap:4px; margin-top:10px; border-top:1px solid var(--border-subtle); padding-top:10px; }
.sp-comp-tool{ background:none;border:0;color:var(--sp-accent);cursor:pointer;padding:8px;border-radius:50%;display:grid;place-items:center;transition:background .15s; }
.sp-comp-tool:hover{ background:var(--sp-grad-soft); }
.sp-comp-tool:disabled{ opacity:.4;cursor:not-allowed; }
.sp-comp-count{ margin-inline-start:auto; font:600 12px/1 var(--font-mono); color:var(--text-muted); }
.sp-comp-count.warn{ color:var(--accent-gold); }
.sp-comp-count.over{ color:var(--accent-red); }
.sp-btn{
  background:var(--sp-grad); color:#fff; border:0; border-radius:999px; padding:9px 20px;
  font:700 14px/1 var(--font-display); cursor:pointer; transition:opacity .15s, transform .1s;
}
.sp-btn:hover{ opacity:.92; }
.sp-btn:active{ transform:scale(.97); }
.sp-btn:disabled{ opacity:.45; cursor:not-allowed; }
.sp-btn-ghost{ background:transparent; border:1px solid var(--sp-ring); color:var(--sp-accent); }
.sp-btn-sm{ padding:7px 14px; font-size:13px; }

/* new-posts pill */
.sp-newpill{
  display:none; position:sticky; top:120px; z-index:6; margin:10px auto 0; width:fit-content;
  background:var(--sp-grad); color:#fff; border:0; border-radius:999px; padding:9px 18px;
  font:700 13px/1 var(--font-display); cursor:pointer; box-shadow:0 6px 20px -6px var(--sp-ring);
}

/* who-to-follow / trends rail */
.sp-suggest-item{ display:flex; align-items:center; gap:10px; padding:9px 0; }
.sp-suggest-item .sp-id{ overflow:hidden; }
.sp-suggest-item .sp-name{ font-size:13px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sp-suggest-item .sp-handle{ font-size:12px; }
.sp-search input{
  width:100%; background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:999px;
  padding:11px 16px; color:var(--text-primary); font:400 14px/1 var(--font-body); outline:none;
}
.sp-search input:focus{ border-color:var(--sp-accent); }
.sp-trend-item{ padding:8px 0; cursor:pointer; border-bottom:1px solid var(--border-subtle); }
.sp-trend-item:last-child{ border-bottom:0; }
.sp-trend-item .tg{ color:var(--text-muted); font-size:11px; }
.sp-trend-item .tt{ font:700 14px/1.2 var(--font-display); color:var(--sp-accent); }

/* follow button */
.sp-follow{
  margin-inline-start:auto; background:#fff; color:#0A0E1A; border:0; border-radius:999px;
  padding:7px 16px; font:700 13px/1 var(--font-display); cursor:pointer; transition:all .15s;
}
.sp-follow.on{ background:transparent; color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-strong); }
.sp-follow.on:hover{ color:var(--accent-red); box-shadow:inset 0 0 0 1px var(--accent-red); }

/* profile header */
.sp-prof-head{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--sp-radius); overflow:hidden; }
.sp-prof-cover{ height:120px; background:var(--sp-grad); opacity:.85; }
.sp-prof-body{ padding:0 18px 18px; }
.sp-prof-av{ width:84px;height:84px;border-radius:50%;margin-top:-42px;border:4px solid var(--bg-card);background:var(--bg-card);object-fit:cover;position:relative;z-index:3; }
/* letter (no-image) profile avatar also carries .sp-avatar, whose flex:0 0 44px
   was squashing the width → an egg shape. Force it square + bigger initials. */
.sp-prof-av.sp-avatar{ flex:0 0 84px; width:84px; height:84px; font-size:30px; background:var(--sp-grad); color:#fff; }
.sp-prof-stats{ display:flex; gap:20px; margin-top:12px; color:var(--text-secondary); font-size:13px; }
.sp-prof-stats b{ color:var(--text-primary); }
.sp-prof-bio{ margin-top:10px; color:var(--text-secondary); font-size:14px; line-height:1.5; }

/* notifications */
.sp-notif{ display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-radius:14px; background:var(--bg-card); border:1px solid var(--border-subtle); margin-top:10px; cursor:pointer; transition:border-color .15s; }
.sp-notif:hover{ border-color:var(--border-medium); }
.sp-notif.unread{ background:var(--sp-grad-soft); border-color:var(--sp-ring); }
.sp-notif-ico{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 34px; }
.sp-ni-follow{ background:var(--sp-grad-soft);color:var(--sp-accent); }
.sp-ni-like{ background:var(--accent-red-dim);color:var(--accent-red); }
.sp-ni-reply,.sp-ni-mention,.sp-ni-quote{ background:var(--accent-blue-dim);color:var(--accent-blue); }
.sp-ni-repost{ background:var(--accent-green-dim);color:var(--accent-green); }
.sp-notif .sp-ntext{ font-size:14px; color:var(--text-primary); }
.sp-notif .sp-nexc{ color:var(--text-muted); font-size:13px; margin-top:2px; }
.sp-notif .sp-time{ margin-inline-start:auto; }

/* onboarding */
.sp-onboard{ max-width:480px; margin:30px auto; }
.sp-ob-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:22px; padding:26px; text-align:center; }
.sp-ob-logo{ width:64px;height:64px;border-radius:18px;background:var(--sp-grad);display:grid;place-items:center;margin:0 auto 14px;color:#fff; }
.sp-ob-title{ font:800 22px/1.2 var(--font-display); }
.sp-ob-sub{ color:var(--text-secondary); margin:8px 0 20px; font-size:14px; }
.sp-ob-avwrap{ width:96px;height:96px;margin:0 auto 16px;position:relative;cursor:pointer; }
.sp-ob-av{ width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--sp-grad-soft);display:grid;place-items:center;color:var(--sp-accent);border:2px dashed var(--sp-ring); }
.sp-ob-av img{ width:100%;height:100%;border-radius:50%;object-fit:cover; }
.sp-ob-camera{ position:absolute;bottom:2px;inset-inline-end:2px;width:30px;height:30px;border-radius:50%;background:var(--sp-grad);display:grid;place-items:center;color:#fff;border:3px solid var(--bg-card); }
.sp-field{ text-align:start; margin-bottom:14px; }
.sp-field label{ display:block; font:600 12px/1 var(--font-body); color:var(--text-secondary); margin-bottom:6px; }
.sp-input{
  width:100%; background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:12px;
  padding:11px 14px; color:var(--text-primary); font:400 15px/1 var(--font-body); outline:none;
}
.sp-input:focus{ border-color:var(--sp-accent); }
.sp-input-prefix{ display:flex; align-items:center; background:var(--bg-tertiary); border:1px solid var(--border-subtle); border-radius:12px; padding-inline-start:12px; }
.sp-input-prefix span{ color:var(--text-muted); font:600 15px/1 var(--font-mono); }
.sp-input-prefix input{ border:0;background:transparent;flex:1;padding:11px 10px;color:var(--text-primary);font:400 15px/1 var(--font-body);outline:none; }
.sp-field-err{ color:var(--accent-red); font-size:12px; margin-top:5px; min-height:14px; }
.sp-field-ok{ color:var(--accent-green); }

/* states */
.sp-empty{ text-align:center; padding:50px 20px; color:var(--text-muted); }
.sp-empty svg{ width:52px;height:52px;margin-bottom:14px;opacity:.5; }
.sp-empty h3{ color:var(--text-secondary); font:700 16px/1.3 var(--font-display); margin-bottom:6px; }
.sp-skel{ height:120px;border-radius:var(--sp-radius);margin-top:12px;background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:spShimmer 1.3s infinite; }
@keyframes spShimmer{ from{background-position:200% 0} to{background-position:-200% 0} }
.sp-locked{ text-align:center; padding:40px 20px; }
.sp-locked .sp-lock-ico{ width:60px;height:60px;border-radius:50%;background:var(--sp-grad-soft);display:grid;place-items:center;margin:0 auto 16px;color:var(--sp-accent); }

/* toast */
.sp-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-medium);
  padding:11px 20px; border-radius:999px; font:600 13px/1 var(--font-body); z-index:9999; transition:all .3s ease; box-shadow:0 8px 30px -8px rgba(0,0,0,.6); }
.sp-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.sp-toast.err{ border-color:var(--accent-red); color:#FF8FA3; }

/* modal */
.sp-modal{ position:fixed; inset:0; z-index:9998; background:rgba(5,8,16,.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:18px; animation:spFade .2s ease; }
.sp-modal-box{ background:var(--bg-card); border:1px solid var(--border-medium); border-radius:20px; width:100%; max-width:560px; max-height:88vh; overflow:auto; padding:18px; }
.sp-modal-img{ background:transparent; border:0; max-width:96vw; max-height:92vh; }
.sp-modal-img img{ max-width:96vw; max-height:92vh; border-radius:12px; }

/* menu popover */
.sp-pop{ position:absolute; z-index:30; background:var(--bg-tertiary); border:1px solid var(--border-medium); border-radius:12px; padding:6px; min-width:170px; box-shadow:0 12px 34px -10px rgba(0,0,0,.6); }
.sp-pop button{ display:flex; width:100%; align-items:center; gap:9px; background:none; border:0; color:var(--text-primary); padding:9px 11px; border-radius:8px; cursor:pointer; font:500 13px/1 var(--font-body); text-align:start; }
.sp-pop button:hover{ background:var(--bg-hover); }
.sp-pop button.danger{ color:#FF8FA3; }

.sp-back{ display:inline-flex; align-items:center; gap:8px; background:none;border:0;color:var(--text-secondary);cursor:pointer;font:600 14px/1 var(--font-body);padding:10px 2px;margin-top:6px; }
.sp-back:hover{ color:var(--text-primary); }

/* ban banner (shown to a space-banned user) */
.sp-ban-banner{ display:flex; gap:12px; align-items:flex-start; margin-top:14px; padding:15px 16px; border-radius:var(--sp-radius); background:var(--accent-red-dim); border:1px solid rgba(255,59,92,.42); }
.sp-ban-ico{ width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:grid;place-items:center;background:rgba(255,59,92,.2);color:var(--accent-red); }
.sp-ban-title{ font:800 15px/1.3 var(--font-display); color:#FF8FA3; }
.sp-ban-sub{ color:var(--text-secondary); font-size:13px; margin-top:3px; line-height:1.5; }
.sp-ban-line{ color:var(--text-primary); font-size:13px; margin-top:6px; }
.sp-ban-line b{ color:var(--text-secondary); font-weight:600; }

/* mobile polish */
@media (max-width:640px){
  .sp-tabs{ gap:2px; padding:4px; }
  .sp-tab{ font-size:12px; padding:9px 4px; }
  .sp-post, .sp-card, .sp-composer{ border-radius:14px; }
  .sp-actions{ max-width:none; }
  .sp-prof-cover{ height:96px; }
  .sp-comp-input{ font-size:16px; }
}

/* sidebar section dividers — dashboard + admin (fb-space.css is loaded on both) */
.sidebar-section + .sidebar-section{ border-top:1px solid var(--border-subtle); margin-top:10px; padding-top:16px; }

/* reply vs post distinction */
.sp-reply-to{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted); margin:0 0 6px; padding-inline-start:54px; }
.sp-reply-to svg{ opacity:.7; }
.sp-reply-to span{ color:var(--sp-accent); cursor:pointer; font-weight:600; }
.sp-post.is-reply{ position:relative; }
.sp-post.is-reply::before{ content:""; position:absolute; inset-inline-start:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(var(--sp-accent), transparent); opacity:.55; }
html[dir="rtl"] .sp-post.is-reply::before{ border-radius:3px 0 0 3px; }

/* embedded dashboard-section deep-link card */
.sp-section-card{ margin-top:10px; display:flex; align-items:center; gap:12px; border:1px solid var(--sp-ring); border-radius:14px; padding:12px 14px; background:var(--sp-grad-soft); cursor:pointer; transition:border-color .15s, transform .1s; }
.sp-section-card:hover{ border-color:var(--sp-accent); }
.sp-section-card:active{ transform:scale(.99); }
.sp-sc-ico{ width:38px;height:38px;border-radius:10px;background:var(--sp-grad);display:grid;place-items:center;color:#fff;flex:0 0 38px; }
.sp-sc-ico svg{ width:20px;height:20px; }
.sp-sc-label{ font:700 14px/1.2 var(--font-display); color:var(--text-primary); }
.sp-sc-sub{ color:var(--text-secondary); font-size:12px; margin-top:2px; }
.sp-sc-arrow{ width:18px;height:18px;color:var(--sp-accent);flex:0 0 18px; }
html[dir="rtl"] .sp-sc-arrow{ transform:scaleX(-1); }

/* link preview (unfurl) card */
.sp-link-card{ margin-top:10px; display:block; border:1px solid var(--border-subtle); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s; }
.sp-link-card:hover{ border-color:var(--border-medium); }
.sp-lc-img{ width:100%; max-height:260px; overflow:hidden; background:var(--bg-tertiary); }
.sp-lc-img img{ width:100%; height:100%; max-height:260px; object-fit:cover; display:block; }
.sp-lc-body{ padding:12px 14px; }
.sp-lc-site{ color:var(--text-muted); font-size:12px; }
.sp-lc-title{ font:700 14px/1.35 var(--font-display); color:var(--text-primary); margin-top:2px; }
.sp-lc-desc{ color:var(--text-secondary); font-size:13px; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* date stays LTR so it never reorders in the RTL header */
.sp-time{ direction:ltr; unicode-bidi:isolate; }

/* community-rules card (sidebar, always visible) + welcome popup */
.sp-rules-card .sp-rules-list{ display:flex; flex-direction:column; gap:11px; margin-top:6px; }
.sp-rule{ display:flex; gap:9px; align-items:flex-start; }
.sp-rule-n{ flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--sp-grad); color:#fff; font:800 11px/20px var(--font-display); text-align:center; }
.sp-rule-tx{ flex:1; min-width:0; }
.sp-rule-tx b{ display:block; font:700 13px/1.3 var(--font-display); color:var(--text-primary); }
.sp-rule-tx span{ display:block; color:var(--text-secondary); font-size:12px; line-height:1.5; margin-top:1px; }

.sp-welcome{ text-align:center; }
.sp-wel-badge{ width:60px; height:60px; margin:2px auto 12px; border-radius:50%; background:var(--sp-grad); display:grid; place-items:center; color:#fff; box-shadow:0 10px 30px rgba(91,140,255,.4); }
.sp-wel-h{ font:800 22px/1.25 var(--font-display); color:var(--text-primary); margin-bottom:8px; }
.sp-wel-about{ color:var(--text-secondary); font-size:14px; line-height:1.65; margin-bottom:16px; }
.sp-wel-rules{ text-align:start; background:var(--bg-secondary); border:1px solid var(--border-subtle); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.sp-wel-rules-t{ font:800 14px/1 var(--font-display); color:var(--sp-accent); margin-bottom:3px; }
.sp-wel-foot{ color:var(--text-muted); font-size:12px; margin:12px 0 4px; }

/* ── In-space "compose post" floating button (replaces the live-chat bubble) ──
   Shown only while the dashboard is on the Space tab (body.fb-on-space, set by
   showPage). Sits exactly where the chat bubble was, same Space gradient, so
   customers clearly see where to write a post. Element + click handler are
   created in dash-space.js. 2026-06-03. */
#sp-compose-fab{ display:none; }
body.fb-on-space #sp-compose-fab{
  display:flex; align-items:center; justify-content:center;
  position:fixed; bottom:22px; inset-inline-end:22px;
  width:60px; height:60px; border:none; cursor:pointer; border-radius:50%;
  background:linear-gradient(135deg,#5B8CFF 0%,#A855F7 100%); color:#fff;
  box-shadow:0 10px 26px -6px rgba(91,140,255,.45), 0 4px 10px rgba(0,0,0,.28);
  z-index:99998; transition:transform .15s ease, box-shadow .15s ease;
}
body.fb-on-space #sp-compose-fab:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 14px 34px -6px rgba(91,140,255,.55), 0 6px 14px rgba(0,0,0,.32);
}
body.fb-on-space #sp-compose-fab:active{ transform:scale(.96); }
#sp-compose-fab svg{ width:26px; height:26px; pointer-events:none; }

/* ============================================================
   RTL additions 2026-06-04 — composer image thumbnail remove
   button was pinned to right:4px; mirror it to the inline-start
   corner so it stays in the correct corner in RTL mode. The FAB,
   menu button and post markers already use logical properties.
   ============================================================ */
html[dir="rtl"] .sp-comp-thumb button{ right:auto; left:4px; }