:root{
  /* ============================================================
     R-SPACE DESIGN SYSTEM — مصدر الحقيقة الوحيد لكل الألوان
     هوية بصرية واحدة (بنفسجي هادئ + خلفية شبه سوداء) بدل النيون
     المتعدد سابقاً (أخضر + بنفسجي في نفس الوقت). كل قيمة تحتها
     "قديم متوافق" هي مجرد اسم قديم يشاور لنفس التوكن الجديد،
     حتى ما نضطر نلمس كل استخدام بالملف (300+ مكان).
     ============================================================ */

  /* الألوان الأساسية للعلامة — Substack الحقيقية (نسخة الثيم الفاتح) */
  --primary:#FF6719;
  --primary-hover:#E65613;
  --primary-tint:rgba(255,103,25,.10);
  --primary-tint-strong:rgba(255,103,25,.18);

  /* الخلفيات — بيج دافئ فاتح بدل الأسود */
  --bg:#F3F1E9;
  --surface:#FFFFFF;
  --elevated:#F2F2F2;
  --border:#E6E6E6;
  --border-strong:#D4D4D4;

  /* أبعاد التخطيط ثلاثي الأعمدة (ديسكتوب) */
  --l-sidebar-w:275px;
  --r-sidebar-w:320px;
  --center-w:600px;

  /* النصوص — أساسي / ثانوي / خافت (أسود حبري بدل الأبيض) */
  --text:#1A1A1A;
  --text-secondary:#666666;
  --muted:#8A8A8A;

  /* ألوان دلالية مقصودة، تُستخدم فقط عند الحاجة (نجاح/تحذير/خطأ) */
  --success:#22C55E;
  --warning:#F59E0B;
  --error:#EF4444;
  --on-accent:#FFFFFF;

  /* ---- أسماء قديمة متوافقة: تشاور كلها على التوكنز الجديدة فوق ---- */
  --green:var(--primary);           --green2:var(--primary-hover);
  --green-tint:var(--primary-tint); --purple:var(--primary);
  --purple2:var(--primary-hover);   --purple-dark:#C24A0A;
  --purple-tint:var(--primary-tint); --purple-tint2:var(--primary-tint-strong);
  --danger:var(--error);            --surface-2:var(--elevated);
  --like-color:var(--error);        --like-tint:rgba(239,68,68,.12);
  --repost-color:var(--success);    --repost-tint:rgba(34,197,94,.12);
  --icon-hover-tint:rgba(0,0,0,.05);
  --btn-gradient:var(--primary);    /* لون واحد صريح بدل تدرّجات في كل زر */
  --post-bg:var(--surface);         --post-bg-hover:var(--elevated);
  --ring-admin:var(--primary);      --ring-creator:#D4A017;   --ring-trusted:var(--primary);
  --shadow-purple:0 10px 24px -8px rgba(255,103,25,.4);


  /* مقياس مسافات 4/8px — ثابت بكل الصفحات */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;

  /* مقياس زوايا موحّد */
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-full:100px;

  /* مقياس خطوط موحّد — هرمية أوضح للعناوين والنصوص */
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:14.5px;--fs-lg:15.5px;--fs-xl:17px;--fs-2xl:20px;--fs-3xl:24px;

  /* ظلال هادئة بدرجة واحدة من الشفافية — بدون توهج نيون */
  --shadow-sm:0 1px 3px rgba(0,0,0,.24);
  --shadow-md:0 6px 16px -6px rgba(0,0,0,.45);
  --shadow-lg:0 10px 24px -10px rgba(0,0,0,.55);
  --shadow-btn:0 3px 10px -3px rgba(255,103,25,.35);

  /* مدة انتقال موحّدة — سلسة وسريعة، بدون حركة زايدة */
  --dur:220ms;--ease:cubic-bezier(.2,.8,.2,1);

  /* مقياس ارتفاعات الأزرار الموحّد — 3 مستويات بس، كل الأزرار بالموقع تتبع أحدها */
  --btn-h-lg:48px;   /* أزرار رئيسية بعرض كامل: تسجيل دخول، نشر، حفظ الملف الشخصي */
  --btn-h-md:38px;   /* أزرار ثانوية بسياق: متابعة، إرسال تعليق، قبول/رفض */
  --btn-h-sm:32px;   /* أزرار مصغّرة داخل سطر: تعديل/حذف، إلغاء/حفظ التعليق */
  --btn-icon:38px;   /* أزرار أيقونة دائرية — حد أدنى آمن للمس */
  --press-lg:.98;--press-md:.96;--press-sm:.95;--press-icon:.90;

  /* بطاقة المنشور — نصف قطر موحّد */
  --r-card:20px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;}
body{font-family:'IBM Plex Sans Arabic','Cairo','Tajawal',sans-serif;font-weight:500;background:var(--bg);color:var(--text);padding-bottom:120px;line-height:1.6;-webkit-font-smoothing:antialiased;touch-action:manipulation;}
button,a{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;}
button{transition:transform 140ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease;}
button:active{transform:scale(.96);}
@media (hover:hover){
  button:hover{opacity:.94;}
}
button:disabled{cursor:default;opacity:.5;filter:saturate(.4);box-shadow:none!important;pointer-events:none;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}


header{
  padding:0 var(--sp-4);height:54px;position:sticky;top:0;background:rgba(243,241,233,.62);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  z-index:10;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
@media (min-width:1280px) and (pointer:fine){ header{display:none;} }
.brand{
  font-family:'Pacifico','Space Grotesk','IBM Plex Sans Arabic',sans-serif;
  font-size:24px;font-weight:400;letter-spacing:0;padding-inline-start:4px;
  background:linear-gradient(135deg,#FF9A5C 0%,var(--primary) 55%,var(--primary-hover) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-btn{background:var(--btn-gradient);border:none;color:var(--on-accent);font-family:inherit;font-size:var(--fs-sm);font-weight:800;height:var(--btn-h-md);padding:0 20px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-btn);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),filter var(--dur) var(--ease);}
.auth-btn:active{transform:scale(var(--press-md));opacity:.92;}
@media (hover:hover){.auth-btn:hover{filter:brightness(1.08);}}

/* From Uiverse.io by reglobby — نفس الألوان الأصلية، مقاسه مصغّر بنفس النسبة (0.745x) ليلبق بارتفاع الهيدر 54px بدل حجمه الأصلي 131×51 */
.user-profile {
  width: 98px;
  height: 38px;
  border-radius: 11px;
  cursor: pointer;
  transition: 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #2e8eff 0%,
    rgba(46, 142, 255, 0) 30%
  );
  background-color: rgba(46, 142, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-profile:hover,
.user-profile:focus {
  background-color: rgba(46, 142, 255, 0.7);
  box-shadow: 0 0 10px rgba(46, 142, 255, 0.5);
  outline: none;
}

.user-profile-inner {
  width: 95px;
  height: 35px;
  border-radius: 9px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  font-family: inherit;
}

.user-profile-inner p{margin:0;}

.user-profile-inner svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  flex-shrink: 0;
}
.bell-btn{position:relative;background:none;border:none;padding:6px;display:flex;align-items:center;justify-content:center;}
.nav-bell{position:relative;}
.notif-dot{position:absolute;top:2px;left:50%;margin-left:14px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--bg);}

.notif-body{overflow-y:auto;flex:1;padding:var(--sp-1) 0;}
.notif-section{font-size:var(--fs-base);font-weight:800;color:var(--text);padding:var(--sp-4) var(--sp-4) var(--sp-2);}
.notif-item{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);align-items:center;transition:background var(--dur) var(--ease);}
.notif-item.unread{background:var(--green-tint);}
.notif-item:active{background:var(--border);}
.notif-icon{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.notif-icon.approved{background:var(--green-tint);color:var(--green);}
.notif-icon.rejected{background:rgba(239,68,68,.16);color:var(--danger);}
.notif-icon.pending{background:rgba(245,158,11,.16);color:var(--warning);}
.notif-icon svg{width:19px;height:19px;}
.notif-icon .badge{
  position:absolute;bottom:-2px;left:-2px;width:17px;height:17px;border-radius:50%;
  background:var(--danger);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);
}
.notif-icon .badge svg{width:9px;height:9px;}
.notif-icon .badge.comment{background:var(--green);}
.notif-icon .badge.mention{background:var(--purple);}
.notif-icon .badge.message{background:var(--primary);}
.hashtag-link,.mention-link{color:var(--green2);text-decoration:none;font-weight:600;}
.hashtag-link:active,.mention-link:active{opacity:.7;}
.notif-icon .badge svg path{fill:#fff;stroke:#fff;}
.notif-text{flex:1;min-width:0;}
.notif-text p{font-size:var(--fs-base);line-height:1.5;}
.notif-text p b{font-weight:800;}
.notif-text .n-time{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;}
.notif-empty{text-align:center;padding:56px var(--sp-6);color:var(--muted);font-size:var(--fs-md);}

/* بطاقات لوحة البلاغات */
.report-card{border-bottom:1px solid var(--border);padding:var(--sp-4);}
.report-meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-2);}
.report-meta b{color:var(--text);font-weight:700;}
.report-count-pill{background:rgba(239,68,68,.16);color:var(--danger);font-weight:800;font-size:var(--fs-xs);padding:2px 9px;border-radius:var(--r-full);}
.report-reason-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-3);font-size:var(--fs-base);color:var(--text);margin-bottom:var(--sp-3);}
.report-reason-box .rr-label{color:var(--muted);font-size:var(--fs-xs);display:block;margin-bottom:2px;}
.report-post-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-3);pointer-events:none;opacity:.92;}
.report-post-deleted{text-align:center;padding:var(--sp-5);color:var(--muted);font-size:var(--fs-sm);background:var(--surface);border-radius:var(--r-md);margin-bottom:var(--sp-3);}
.report-actions{display:flex;gap:var(--sp-2);}
.report-actions button{flex:1;height:var(--btn-h-md);border-radius:var(--r-full);font-family:inherit;font-weight:800;font-size:var(--fs-base);border:none;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}
.report-actions button:active{transform:scale(var(--press-md));}
.report-dismiss-btn{background:var(--surface);color:var(--muted);border:1.5px solid var(--border)!important;}
.report-delete-btn{background:var(--danger);color:#fff;}

/* guest prompt — بأسلوب تيك توك */
.guest-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.guest-overlay.show{opacity:1;pointer-events:auto;}
.guest-sheet{
  width:100%;max-width:600px;background:var(--elevated);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--sp-7) var(--sp-6) calc(env(safe-area-inset-bottom,0px)+var(--sp-6));text-align:center;
  transform:translateY(20px);transition:transform var(--dur) var(--ease);box-shadow:0 -8px 32px rgba(0,0,0,.5);
  border-top:1px solid var(--border-strong);
}
.guest-overlay.show .guest-sheet{transform:translateY(0);}
.guest-icon{
  width:54px;height:54px;border-radius:50%;background:var(--green-tint);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4);
}
.guest-icon svg{width:24px;height:24px;}
.guest-sheet h3{font-size:var(--fs-xl);font-weight:900;margin-bottom:6px;}
.guest-sheet p{font-size:var(--fs-base);color:var(--muted);line-height:1.5;margin-bottom:var(--sp-5);}
.guest-actions{display:flex;flex-direction:column;gap:var(--sp-2);}
#confirmPromptInput{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 13px;color:var(--text);font-family:inherit;font-size:var(--fs-md);}
#confirmPromptInput:focus{outline:none;border-color:var(--green2);}

/* لوحة تسجيل الدخول عبر Google */
.login-panel-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;padding:var(--sp-4);
}
.login-panel-sheet{
  position:relative;width:100%;max-width:380px;background:var(--elevated);
  border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-6);text-align:center;
  border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);
}
.login-panel-close{
  position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.login-panel-close:active{transform:scale(.92);}
.login-google-btn{background:#fff;color:#1f1f1f;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.login-google-btn:active{transform:scale(var(--press-lg));}
.login-discord-btn{background:#5865F2;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,.3);margin-top:10px;}
.login-discord-btn:active{transform:scale(var(--press-lg));}

/* ===== شاشة التحميل المبدئية — From Uiverse.io by Praashoo7 ===== */
.app-splash{
  position:fixed;inset:0;z-index:9999;
  transition:opacity .5s ease, visibility .5s ease;
}
.app-splash.hide{opacity:0;visibility:hidden;pointer-events:none;}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;height:100%;
}

.loaders,
.loadersB {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: #e0e0e0;
}
.loader:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15em;
  height: 5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 5px 5px 15px #d3d2d2ab,
    inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to bottom,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loader::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.15em;
  height: 4.5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 5px 5px 15px #d3d2d2ab,
    inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to top,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loaderA {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: transparent;
}
.ball0,
.ball1,
.ball2,
.ball3,
.ball4,
.ball5,
.ball6,
.ball7,
.ball8,
.ball9 {
  width: 1.15em;
  height: 1.15em;
  box-shadow:
    rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px,
    0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);
  background-color: rgb(232, 232, 232, 1);
  animation: 3.63s move ease-in-out infinite;
}
.loader:nth-child(2) {
  transform: rotate(20deg);
}
.loader:nth-child(3) {
  transform: rotate(40deg);
}
.loader:nth-child(4) {
  transform: rotate(60deg);
}
.loader:nth-child(5) {
  transform: rotate(80deg);
}
.loader:nth-child(6) {
  transform: rotate(100deg);
}
.loader:nth-child(7) {
  transform: rotate(120deg);
}
.loader:nth-child(8) {
  transform: rotate(140deg);
}
.loader:nth-child(9) {
  transform: rotate(160deg);
}

.loaderA:nth-child(2) {
  transform: rotate(20deg);
}
.loaderA:nth-child(3) {
  transform: rotate(40deg);
}
.loaderA:nth-child(4) {
  transform: rotate(60deg);
}
.loaderA:nth-child(5) {
  transform: rotate(80deg);
}
.loaderA:nth-child(6) {
  transform: rotate(100deg);
}
.loaderA:nth-child(7) {
  transform: rotate(120deg);
}
.loaderA:nth-child(8) {
  transform: rotate(140deg);
}
.loaderA:nth-child(9) {
  transform: rotate(160deg);
}

.ball1 {
  animation-delay: 0.2s;
}
.ball2 {
  animation-delay: 0.4s;
}
.ball3 {
  animation-delay: 0.6s;
}
.ball4 {
  animation-delay: 0.8s;
}
.ball5 {
  animation-delay: 1s;
}
.ball6 {
  animation-delay: 1.2s;
}
.ball7 {
  animation-delay: 1.4s;
}
.ball8 {
  animation-delay: 1.6s;
}
.ball9 {
  animation-delay: 1.8s;
}

@keyframes move {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(12em);
  }
  100% {
    transform: translateY(0em);
  }
}

main{max-width:600px;margin:0 auto;}

.panel{padding:var(--sp-4);border-bottom:8px solid var(--green-tint);}
.panel input,.panel textarea{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 13px;color:var(--text);font-family:inherit;font-size:var(--fs-md);resize:none;margin-bottom:var(--sp-2);transition:border-color var(--dur) var(--ease);}
.panel input:focus,.panel textarea:focus{outline:none;border-color:var(--green2);}
.btn{width:100%;height:var(--btn-h-lg);display:flex;align-items:center;justify-content:center;background:var(--btn-gradient);color:var(--on-accent);font-weight:800;font-family:inherit;font-size:var(--fs-md);border:none;border-radius:var(--r-full);box-shadow:var(--shadow-btn);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),filter var(--dur) var(--ease);}
.btn:active{transform:scale(var(--press-lg));opacity:.92;}
@media (hover:hover){.btn:not(:disabled):hover{filter:brightness(1.06);}}
.btn.ghost{background:var(--surface);color:var(--green);border:1.5px solid var(--green);box-shadow:none;}
.msg{font-size:var(--fs-sm);color:var(--green2);min-height:14px;margin-top:6px;}


/* composer bar (X-style: avatar + input row) — PREMIUM */
.composer{display:none;padding:var(--sp-4);border-bottom:8px solid var(--green-tint);}
.composer-card{
  border:1.5px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);
  background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(0,0,0,.08));
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.composer-card.focused{border-color:var(--green2);box-shadow:0 0 0 4px rgba(255,103,25,.1);}
.composer-row{display:flex;gap:var(--sp-3);}
.avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:var(--fs-lg);
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 2px 8px -2px rgba(0,0,0,.5);
  background-size:cover;background-position:center;
}
.avatar.sm{width:33px;height:33px;font-size:var(--fs-sm);}
.profile-link{cursor:pointer;}
.composer-input{flex:1;}
.composer-input textarea{
  width:100%;border:none;font-family:inherit;font-size:16px;resize:none;
  min-height:24px;color:var(--text);line-height:1.5;
}
.composer-input textarea::placeholder{color:var(--muted);}
.composer-input textarea:focus{outline:none;}
.composer-bottom{display:flex;justify-content:flex-end;align-items:center;margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border);gap:var(--sp-3);}
.char-count{font-size:var(--fs-xs);color:var(--muted);font-family:monospace;margin-inline-end:auto;}
.char-count.warn{color:var(--warning);}
.char-count.max{color:var(--danger);}
.post-cta{
  background:var(--btn-gradient);color:var(--on-accent);border:none;font-family:inherit;font-weight:800;font-size:var(--fs-base);
  height:var(--btn-h-md);display:inline-flex;align-items:center;justify-content:center;padding:0 24px;border-radius:var(--r-full);
  box-shadow:var(--shadow-btn);transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-cta:disabled{background:var(--green-tint);color:var(--muted);box-shadow:none;}
.post-cta:not(:disabled):active{transform:scale(var(--press-md));}

/* الزر العائم — أصغر وأنيق، بزاوية ثابتة فوق البار السفلي بدل ما يغطي المحتوى بالنص، ومخفي بالديسكتوب (عنده زر نشر بالشريط الجانبي أصلاً) */
.fab{
  position:fixed;bottom:calc(74px + env(safe-area-inset-bottom,0px));left:16px;z-index:40;
  background:none;border:none;padding:0;
}
.fab::before{
  content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:50%;
  background:radial-gradient(circle 3px at 50% 0%, var(--primary-hover) 97%, transparent 100%);
  animation:orbitSpin 4.2s linear infinite;pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(124,58,237,.85));
}
.fab-icon{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -3px rgba(255,103,25,.5), 0 0 0 1px rgba(255,255,255,.05);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  animation:fabGlow 2.6s ease-in-out infinite;
}
@keyframes fabGlow{
  0%,100%{box-shadow:0 4px 14px -3px rgba(255,103,25,.5), 0 0 0 1px rgba(255,255,255,.05);}
  50%{box-shadow:0 4px 22px 0 rgba(255,103,25,.85), 0 0 0 1px rgba(255,255,255,.08);}
}
.fab-icon svg{width:19px;height:19px;}
.fab:active .fab-icon{transform:scale(.9);}
@media (hover:hover){
  .fab:hover .fab-icon{filter:brightness(1.08);box-shadow:0 4px 18px -1px rgba(255,103,25,.62), 0 0 0 1px rgba(255,255,255,.08);}
}
@media (min-width:1280px) and (pointer:fine){ .fab{display:none!important;} }
.fab-label{
  font-size:var(--fs-xs);font-weight:800;color:var(--green);
  background:var(--surface);padding:2px 10px;border-radius:var(--r-full);
  box-shadow:var(--shadow-sm);
}

/* صفحة النشر — شاشة كاملة */
.compose-page{
  position:fixed;top:0;bottom:0;left:50%;width:100%;max-width:600px;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translate(-50%,24px);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.22,.85,.32,1),opacity .28s ease;
}
.compose-page.open{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.compose-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:calc(env(safe-area-inset-top,0px)+14px) var(--sp-4) var(--sp-3);
  border-bottom:1px solid var(--border);
}
.compose-close{background:none;border:none;font-size:18px;color:var(--muted);width:var(--btn-icon);height:var(--btn-icon);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.compose-close:active{background:var(--green-tint);transform:scale(var(--press-icon));}
.compose-title{font-size:var(--fs-md);font-weight:800;color:var(--text);}
.compose-body{padding:var(--sp-5) var(--sp-4);flex:1;}
.compose-body .composer-row{display:flex;gap:var(--sp-3);}
.compose-body textarea{
  width:100%;border:none;font-family:inherit;font-size:20px;resize:none;
  min-height:120px;color:var(--text);line-height:1.4;background:transparent;
}
.compose-body textarea::placeholder{color:var(--muted);}
.compose-body textarea:focus{outline:none;}

/* صندوق الكتابة — زجاجي شفاف مدمج بالخلفية (Glassmorphism) */
.composer-input.glass{
  flex:1;border-radius:22px;padding:14px 16px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.composer-input.glass:focus-within{border-color:rgba(255,103,25,.4);box-shadow:0 0 0 4px rgba(255,103,25,.08);}
.composer-input.glass textarea{min-height:90px;font-size:18px;}

/* إرفاق صورة/فيديو — أيقونات نظيفة بدل الزر الملون الضخم */
.attach-row{display:none;} /* استُبدل بشريط الأدوات السفلي compose-toolbar */

.compose-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px var(--sp-4);padding-bottom:calc(env(safe-area-inset-bottom,0px)+12px);
  border-top:1px solid var(--border);
}
.compose-tools{display:flex;align-items:center;gap:2px;}
.tool-icon-btn{
  width:40px;height:40px;border-radius:50%;background:none;border:none;color:var(--green2);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tool-icon-btn svg{width:20px;height:20px;}
.tool-icon-btn:active{transform:scale(.88);background:rgba(255,103,25,.1);}
.tool-icon-btn:hover, .tool-icon-btn:focus-visible{
  background:rgba(255,103,25,.08);
  box-shadow:0 0 0 6px var(--primary-tint);
  outline:none;
}
.tool-icon-btn:disabled{opacity:.4;box-shadow:none;background:none;}
.compose-toolbar .char-count{margin-inline-start:8px;}

/* زر النشر — بزاوية شريط الأدوات، أسهل وصول باليد */
.post-cta-fab{
  background:var(--btn-gradient);color:var(--on-accent);border:none;font-family:inherit;font-weight:800;font-size:var(--fs-base);
  height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border-radius:var(--r-full);
  box-shadow:var(--shadow-btn);transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  flex-shrink:0;
}
.post-cta-fab:disabled{background:var(--green-tint);color:var(--muted);box-shadow:none;}
.post-cta-fab:not(:disabled):active{transform:scale(var(--press-md));}

/* تنبيه ذكي عابر لمدة الفيديو — بدل حجز مساحة دائمة */
.video-hint-toast{
  display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--green2);
  background:rgba(255,103,25,.08);border:1px solid rgba(255,103,25,.25);border-radius:var(--r-full);
  padding:6px 13px;margin-top:var(--sp-3);width:fit-content;
  animation:videoHintIn .25s ease both;
}
.video-hint-toast svg{width:13px;height:13px;flex-shrink:0;}
@keyframes videoHintIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* منتقي الإيموجي — بوب-أوفر بسيط فوق شريط الأدوات */
.emoji-picker{
  position:absolute;bottom:calc(100% + 8px);right:0;z-index:10;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5);padding:8px;
  display:none;grid-template-columns:repeat(6,1fr);gap:2px;width:230px;
}
.emoji-picker.show{display:grid;}
.emoji-picker button{
  font-size:20px;background:none;border:none;border-radius:8px;padding:4px;
  display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease);
}
.emoji-picker button:active{background:var(--green-tint);}

.profile-handle-row{display:flex;align-items:center;gap:6px;margin-top:2px;}
.profile-handle{font-size:var(--fs-md);color:var(--muted);}
.media-preview{position:relative;margin-top:var(--sp-3);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);max-width:260px;background:#000;aspect-ratio:1.2;}
.media-preview img{display:block;width:100%;height:100%;object-fit:cover;}
.media-preview video{display:block;width:100%;height:100%;object-fit:contain;background:#000;}
.media-preview-fallback-note{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;color:#aaa;font-size:12px;padding:var(--sp-3);}
.media-remove{
  position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:none;font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur) var(--ease);
}
.media-remove:active{transform:scale(var(--press-icon));}
.media-err{font-size:var(--fs-sm);color:var(--danger);margin-top:6px;}

/* الميديا داخل المنشورات بالفييد — أسلوب X: أبعاد طبيعية بحدود معقولة */
.post-media{margin-top:var(--sp-2);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:#000;aspect-ratio:1.4;}
.post-media img{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;}
.post-media video{display:block;width:100%;height:100%;object-fit:contain;background:#000;}

/* لايتبوكس لعرض الصورة كاملة داخل التطبيق */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-5);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-sm);transform:scale(.92);transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.lightbox.open img{transform:scale(1);}
.lightbox-close{position:fixed;top:calc(env(safe-area-inset-top,0px)+16px);left:16px;background:rgba(255,255,255,.15);color:#fff;border:none;width:var(--btn-icon);height:var(--btn-icon);border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform var(--dur) var(--ease);}
.lightbox-close:active{transform:scale(var(--press-icon));}

.compose-footer{
  padding:var(--sp-3) var(--sp-4);padding-bottom:calc(env(safe-area-inset-bottom,0px)+12px);
  border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px;
}
.compose-footer .char-count{font-family:monospace;font-size:var(--fs-sm);}

/* ============================================================
   نظام الرسائل الخاصة (DMs) — بأسلوب تويتر: لوحين، أسود خالص
   بحدود رفيعة جدًا. بالموبايل: لوح واحد بيتنقل (قائمة <-> دردشة).
   بالديسكتوب (>=1000px): لوحين جنب بعض بنفس صفحة الـ overlay.
   ============================================================ */
.dm-page{ max-width:600px; }
@media (min-width:1280px) and (pointer:fine){ .dm-page{ max-width:800px; } }

.dm-layout{ flex:1; display:flex; overflow:hidden; min-height:0; }

.dm-inbox{ width:100%; overflow-y:auto; flex-shrink:0; }
.dm-inbox-list{ display:flex; flex-direction:column; }

.dm-item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border);
  cursor:pointer; transition:background var(--dur) var(--ease); text-align:start;
}
.dm-item:active{ background:var(--border); }
@media (hover:hover){ .dm-item:hover{ background:var(--icon-hover-tint); } }
.dm-item.active{ background:var(--elevated); }
.dm-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dm-item-top{ display:flex; align-items:center; gap:6px; }
.dm-item-name{ font-weight:800; font-size:var(--fs-base); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-item-time{ font-size:var(--fs-xs); color:var(--muted); flex-shrink:0; margin-inline-start:auto; }
.dm-item-preview{ font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-item.unread .dm-item-preview{ color:var(--text); font-weight:600; }
.dm-item-dot{ width:9px; height:9px; border-radius:50%; background:#1d9bf0; flex-shrink:0; }
.dm-empty-inbox{ text-align:center; padding:56px var(--sp-6); color:var(--muted); font-size:var(--fs-md); }

.dm-chat{
  width:100%; display:none; flex-direction:column; flex-shrink:0;
  position:relative; min-height:0;
}
.dm-chat-header{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.dm-back-btn{
  background:none; border:none; color:var(--text); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0;
}
.dm-back-btn:active{ background:var(--icon-hover-tint); }
@media (min-width:1280px) and (pointer:fine){ .dm-back-btn{ display:none; } }
.dm-chat-name{ font-weight:800; font-size:var(--fs-md); color:var(--text); }

.dm-messages{
  flex:1; overflow-y:auto; padding:var(--sp-4); display:flex; flex-direction:column; gap:0;
  min-height:0;
}
.dm-bubble-row{ display:flex; width:100%; margin-top:14px; }
.dm-bubble-row:first-child{ margin-top:0; }
.dm-bubble-row.grouped{ margin-top:2px; } /* رسائل متتالية من نفس الشخص: مسافة شبه معدومة */
.dm-bubble-row.mine{ justify-content:flex-start; } /* RTL: رسائلي على اليمين بصريًا = flex-start بمنطق RTL */
.dm-bubble-row.theirs{ justify-content:flex-end; }
.dm-bubble{
  max-width:75%; padding:10px 16px; font-size:var(--fs-base); line-height:1.4; word-wrap:break-word;
  white-space:pre-wrap; border-radius:20px; /* استدارة موحّدة على كل الأطراف — بدون تدرّج زوايا */
}
/* لون X الأزرق الصلب للرسائل المُرسلة */
.dm-bubble.mine{ background:#1d9bf0; color:#fff; }
/* رمادي غامق أنيق للرسائل الواردة */
.dm-bubble.theirs{ background:#16181c; color:#e7e9ea; }

.dm-bubble-time-inline{ font-size:11px; margin-inline-start:6px; opacity:.7; white-space:nowrap; }
.dm-bubble.mine .dm-bubble-time-inline{ color:rgba(255,255,255,.75); }
.dm-bubble.theirs .dm-bubble-time-inline{ color:var(--muted); }

/* فقاعة فيها صورة/فيديو: الميديا تاخد كامل عرض الفقاعة بدون حشوة، والنص (إن وجد) يظل بحشوته العادية تحتها */
.dm-bubble.has-media{ padding:4px; overflow:hidden; }
.dm-bubble.has-media .dm-bubble-text{ padding:8px 10px 2px; }
.dm-bubble.has-media .dm-bubble-time-inline{ padding:0 10px 6px; display:inline-block; }
.dm-bubble-media{ display:block; max-width:100%; max-height:320px; width:100%; object-fit:cover; border-radius:16px; cursor:pointer; }
video.dm-bubble-media{ cursor:default; }

.dm-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); font-size:var(--fs-md); padding:0 var(--sp-6); text-align:center;
}
.dm-empty svg{ width:44px; height:44px; opacity:.5; }

.dm-input-row{
  display:flex; align-items:center; gap:6px; padding:var(--sp-3) var(--sp-4);
  padding-bottom:calc(env(safe-area-inset-bottom,0px)+12px);
  border-top:1px solid var(--border); flex-shrink:0;
}
/* كل أزرار التحكم (إرفاق/مايك/إرسال) مجمّعة جنب بعض بنفس جهة الإبهام، وخانة الكتابة تاخد المساحة المتبقية.
   هيك الزر يضل بمتناول اليد دايمًا، بدل ما ينزاح لطرف الشاشة البعيد. */
.dm-util-btn{
  width:34px; height:34px; border-radius:50%; background:none; border:none; color:var(--muted);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dm-util-btn svg{ width:20px; height:20px; }
.dm-util-btn:active{ transform:scale(var(--press-sm)); background:var(--icon-hover-tint); }
@media (hover:hover){ .dm-util-btn:hover{ background:var(--icon-hover-tint); } }
.dm-plus-btn{ border:1.5px solid var(--border); color:var(--text); }

.dm-send-btn{
  width:34px; height:34px; border-radius:50%; background:#1d9bf0; border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.dm-send-btn svg{ width:17px; height:17px; }
.dm-send-btn:active{ transform:scale(var(--press-sm)); }
.dm-send-btn:disabled{ opacity:.4; }

.dm-input-pill{
  flex:1; min-width:0; display:flex; align-items:center; gap:4px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-full);
  padding:4px 6px;
}
.dm-input-pill:focus-within{ border-color:#1d9bf0; }
.dm-input-pill input{
  flex:1; min-width:0; background:transparent; border:none; padding:9px 10px; color:var(--text);
  font-family:inherit; font-size:var(--fs-md);
}
.dm-input-pill input:focus{ outline:none; }

.dm-input-row.dm-locked input{ opacity:.5; pointer-events:none; }
.dm-input-row.dm-locked #dmSendBtn,
.dm-input-row.dm-locked .dm-util-btn{ opacity:.5; pointer-events:none; }
.dm-locked-notice{ text-align:center; font-size:13px; color:var(--muted); background:var(--elevated); border-radius:12px; padding:10px 16px; margin:0 16px 8px; }

.dm-media-preview-box:empty{ display:none; }
.dm-media-preview-box{ padding:0 var(--sp-4); }
.dm-media-preview-box .media-preview{ max-width:200px; margin-top:0; margin-bottom:var(--sp-3); }

.message-pill{
  background:var(--surface); color:var(--text); border:1.5px solid var(--border-strong);
  width:var(--btn-h-sm); height:var(--btn-h-sm); display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; flex-shrink:0; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.message-pill:active{ transform:scale(var(--press-sm)); background:var(--icon-hover-tint); }
@media (hover:hover){ .message-pill:hover{ background:var(--icon-hover-tint); } }

/* الوضع الافتراضي بالموبايل: القائمة تظهر، الدردشة مخفية حتى يفتح المستخدم محادثة */
.dm-inbox{ display:flex; flex-direction:column; }
.dm-page.chat-open .dm-inbox{ display:none; }
.dm-page.chat-open .dm-chat{ display:flex; }

/* بالديسكتوب: لوحين جنب بعض دايمًا، بغض النظر عن حالة chat-open */
@media (min-width:1280px) and (pointer:fine){
  .dm-inbox{
    display:flex !important; width:290px; flex-shrink:0; border-inline-end:1px solid var(--border);
  }
  .dm-chat{ display:flex !important; }
  .dm-item.active{ background:var(--elevated); }
}

/* profile page — PREMIUM */
.compose-header.transparent{
  position:absolute;top:0;left:0;right:0;z-index:2;border-bottom:none;
  pointer-events:none;
}
.compose-page.open .compose-header.transparent > *{ pointer-events:auto; }
.profile-header-actions{display:flex;align-items:center;gap:8px;}
.compose-close.on-cover, .logout-btn.on-cover{
  background:rgba(0,0,0,.28);color:#fff;border:none;border-radius:50%;
  width:var(--btn-icon);height:var(--btn-icon);display:flex;align-items:center;justify-content:center;font-size:15px;
  transition:transform var(--dur) var(--ease);
}
.compose-close.on-cover:active, .logout-btn.on-cover:active{transform:scale(var(--press-icon));}
.logout-btn.on-cover{width:auto;height:30px;border-radius:100px;padding:0 15px;font-size:var(--fs-sm);font-weight:700;}

/* From Uiverse.io by luigimiraglia — زر الإعدادات الجديد */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 36px;
  width: 120px;
  border: none;
  background: black;
  border-radius: 20px;
  cursor: pointer;
}

.lable {
  line-height: 20px;
  font-size: 17px;
  color: white;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button:hover {
  background: grey;
}

.button:hover .svg-icon {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.profile-body{overflow-y:auto;flex:1;padding-bottom:var(--sp-6);}
.profile-cover{
  height:180px;background:radial-gradient(130% 150% at 88% 0%,var(--primary) 0%,var(--purple-dark) 35%,var(--surface) 72%,var(--bg) 100%);
  position:relative;overflow:hidden;background-size:cover;background-position:center;
}
.img-edit-btn{
  position:absolute;background:rgba(0,0,0,.45);color:#fff;border:none;border-radius:50%;
  width:33px;height:33px;font-size:14px;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:transform var(--dur) var(--ease);z-index:3;
}
.img-edit-btn:active{transform:scale(var(--press-icon));}
.img-edit-btn svg{width:15px;height:15px;}
.avatar-edit svg{width:13px;height:13px;}
.cover-edit{bottom:8px;left:8px;}
.avatar-edit{bottom:-2px;left:-2px;width:29px;height:29px;font-size:12px;border:2px solid var(--bg);}
.img-upload-msg{text-align:center;font-size:var(--fs-sm);color:var(--green2);}
.img-upload-msg:empty{display:none;}

.profile-top{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:-50px;margin-bottom:var(--sp-2);padding:0 var(--sp-4);position:relative;z-index:1;pointer-events:none;}
.profile-top > *{ pointer-events:none; }
.compose-page.open .profile-top > *{ pointer-events:auto; }
.profile-top-row{display:flex;align-items:flex-end;justify-content:space-between;width:100%;}
.profile-actions-row{display:flex;align-items:center;gap:8px;padding-bottom:12px;}
.block-pill{background:var(--surface);color:var(--danger);border:1.5px solid var(--danger);font-family:inherit;font-weight:800;font-size:var(--fs-sm);height:var(--btn-h-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border-radius:var(--r-full);flex-shrink:0;transition:transform var(--dur) var(--ease);}
.block-pill:active{transform:scale(var(--press-sm));}
.avatar-ring{
  width:100px;height:100px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--primary-tint-strong);
  transition:box-shadow .25s ease,transform var(--dur) var(--ease);
}
.avatar-ring::after{
  content:"";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px;border-radius:50%;
  background:radial-gradient(circle 3.5px at 50% 0%, var(--primary-hover) 97%, transparent 100%);
  animation:orbitSpin 5s linear infinite;pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(124,58,237,.8));
}
.avatar-ring.trusted{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--ring-trusted);}
.avatar-ring.admin{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--ring-admin);}
.avatar-ring.creator{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--ring-creator);}
.avatar-ring .avatar{width:92px;height:92px;font-size:30px;}
.profile-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:var(--fs-xs);color:var(--muted);}
.meta-item{display:flex;align-items:center;gap:5px;}
.meta-item svg{width:11px;height:11px;flex-shrink:0;color:var(--muted);}
.meta-item a{color:var(--green2);text-decoration:none;}
.meta-item a:active{opacity:.7;}
.profile-meta-edit-row{display:flex;align-items:center;gap:6px;margin-top:8px;width:100%;}
.meta-edit-box{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;}
.meta-edit-box input{width:100%;font-family:inherit;font-size:var(--fs-sm);padding:8px 10px;border-radius:var(--r-md,10px);border:1px solid var(--border);background:var(--surface);color:var(--text);}
.meta-edit-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;}
.profile-name{font-size:22px;font-weight:800;margin-top:10px;display:flex;align-items:center;gap:5px;line-height:1.2;}
.profile-name .trust-badge{width:15px;height:15px;box-shadow:0 0 0 2px var(--bg);}
.profile-name .trust-badge svg{width:10px;height:10px;}
.profile-name-row{display:flex;align-items:center;gap:6px;}
.profile-handle-row{margin-top:1px;}
.edit-name-btn{
  background:var(--green-tint);color:var(--green2);border:none;border-radius:50%;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--dur) var(--ease);flex-shrink:0;
}
.edit-name-btn:active{transform:scale(var(--press-icon));}
.edit-name-btn svg{width:11px;height:11px;}
/* ===== صناديق تعديل الاسم / اليوزرنيم / النبذة — تصميم فخم موحّد =====
   ملاحظة: التصميم القديم ما كان محدد له background للـ input، فكان ياخذ خلفية
   بيضاء افتراضية من المتصفح مع لون نص أبيض (var(--text)) — يعني نص أبيض فوق
   خلفية بيضاء (غير مرئي تمامًا). هيدا التصميم الجديد بيصلح هالمشكلة وبيضيف
   مظهر بطاقة مرتفعة (elevated card) بحدود متوهجة بلون العلامة التجارية. */
.name-edit-box,.handle-edit-box,.bio-edit-box{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  width:100%;max-width:300px;margin:8px auto 0;box-sizing:border-box;
  background:linear-gradient(180deg,var(--elevated),var(--surface));
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);
  box-shadow:0 14px 32px -14px rgba(0,0,0,.6), 0 0 0 1px var(--primary-tint) inset;
  animation:editBoxIn .22s var(--ease);
}
@keyframes editBoxIn{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}

.name-edit-box input,.handle-edit-box input,.bio-edit-box textarea{
  width:100%;box-sizing:border-box;font-family:inherit;color:var(--text);background:var(--bg);
  border:1.5px solid var(--border-strong);border-radius:var(--r-md);padding:12px 14px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.name-edit-box input{text-align:center;font-size:var(--fs-xl);font-weight:800;}
.handle-edit-box input{font-family:monospace;direction:ltr;text-align:left;font-size:var(--fs-lg);font-weight:700;}
.bio-edit-box textarea{min-height:64px;font-size:var(--fs-sm);}
.name-edit-box input:focus,.handle-edit-box input:focus,.bio-edit-box textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);
}
.name-edit-box input::placeholder,.handle-edit-box input::placeholder,.bio-edit-box textarea::placeholder{color:var(--muted);}

.name-edit-actions{display:flex;gap:var(--sp-2);width:100%;}
.name-edit-actions button{
  flex:1;font-family:inherit;font-size:var(--fs-sm);font-weight:800;height:40px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full);
  border:none;transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.name-edit-actions button:active{transform:scale(var(--press-sm));}
.name-edit-actions .save-edit-btn{background:var(--btn-gradient);color:var(--on-accent);box-shadow:var(--shadow-btn);}
@media (hover:hover){.name-edit-actions .save-edit-btn:hover{filter:brightness(1.08);}}
.name-edit-actions .cancel-edit-btn{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border-strong);}
@media (hover:hover){.name-edit-actions .cancel-edit-btn:hover{background:var(--icon-hover-tint);}}
.name-edit-msg{font-size:var(--fs-xs);color:var(--danger);min-height:14px;text-align:center;font-weight:600;}
.profile-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:2px 10px;border-radius:var(--r-full);margin-top:7px;}
.profile-bio-row{display:flex;align-items:flex-start;gap:6px;margin-top:8px;width:100%;text-align:start;}
.profile-bio{font-size:var(--fs-md);color:var(--text);line-height:1.4;white-space:pre-wrap;word-break:break-word;}
.profile-bio.bio-placeholder{color:var(--muted);}
.bio-edit-box textarea{resize:none;}
.bio-edit-count{font-size:10.5px;color:var(--muted);align-self:flex-end;}
.profile-badge.trusted{background:var(--green-tint);color:var(--green);}
.profile-badge.new{background:rgba(245,158,11,.16);color:var(--warning);}
.profile-badge.admin{background:var(--primary-tint-strong);color:var(--purple2);}
.profile-badge.creator{background:rgba(212,160,23,.18);color:var(--ring-creator);}

.stats-row{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:20px;margin:var(--sp-2) var(--sp-4) 0;padding:0;}
.stat-item{display:flex;align-items:baseline;gap:5px;cursor:pointer;transition:opacity var(--dur) var(--ease);}
.stat-item:active{opacity:.6;}
.stat-num{font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;}
.stat-label{font-size:var(--fs-sm);font-weight:500;color:var(--muted);}
.stat-item:hover .stat-label{text-decoration:underline;}

.trust-card{
  background:var(--green-tint);border-radius:var(--r-lg);padding:var(--sp-3);margin:var(--sp-3) var(--sp-4) var(--sp-3);
  display:flex;align-items:center;gap:var(--sp-3);
}
.trust-ring-wrap{flex-shrink:0;position:relative;width:44px;height:44px;}
.trust-ring-wrap svg{width:44px;height:44px;transform:rotate(-90deg);}
.trust-ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:900;color:var(--green);}
.trust-card .tt{font-size:var(--fs-sm);font-weight:800;color:var(--green);margin-bottom:2px;}
.trust-card .ts{font-size:11px;color:var(--muted);line-height:1.5;}

.profile-section-label{font-size:var(--fs-base);font-weight:800;color:var(--muted);margin:0 var(--sp-4) 4px;padding-bottom:var(--sp-2);border-bottom:1px solid var(--border);}
#myPosts,#myComments,#myFavorites{padding:0 var(--sp-5);}

/* تبويبات الملف الشخصي — بأسلوب X: تحته خط بدل الحبة المدوّرة */
.profile-tabs{display:flex;margin:var(--sp-3) 0 0;background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:3;}
.ptab{
  flex:1;position:relative;font-family:inherit;font-size:var(--fs-md);font-weight:700;color:var(--muted);background:none;border:none;
  padding:14px 4px 13px;transition:color var(--dur) var(--ease);
}
.ptab:active{background:var(--green-tint);}
.ptab.active{color:var(--text);font-weight:800;}
.ptab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:52px;height:3px;border-radius:3px 3px 0 0;background:var(--green);}

/* تعليقاتي بالبروفايل */
.mc-parent{font-size:var(--fs-xs);color:var(--muted);margin-bottom:6px;line-height:1.5;}

/* زر حفظ/مفضلة داخل بطاقة المنشور */
.bookmark-btn{background:none;border:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform var(--dur) var(--ease);}
.bookmark-btn:active{transform:scale(var(--press-icon));}
.bookmark-btn.saved{color:var(--green);}
.bookmark-btn.saved svg path{fill:var(--green);}
.report-btn{background:none;border:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform var(--dur) var(--ease);}
.report-btn:active{transform:scale(var(--press-icon));color:var(--danger);}

/* أزرار تعديل/حذف منشورات المستخدم — أيقونات مضغوطة فاخرة بأسلوب X */
.mp-footer{display:flex;flex-direction:column;gap:10px;}
.mypost-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:0;}
.icon-btn{
  box-sizing:border-box;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:none;padding:0;line-height:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.icon-btn svg{display:block;flex-shrink:0;}
.icon-btn:active{transform:scale(var(--press-icon));opacity:.85;}
.edit-post-btn.icon-btn{background:var(--green-tint);color:var(--green2);}
.del-btn.icon-btn{background:rgba(239,68,68,.16);color:var(--danger);}
.mypost-edit textarea{
  width:100%;font-family:inherit;font-size:var(--fs-base);line-height:1.6;border:1.5px solid var(--green2);
  border-radius:var(--r-sm);padding:var(--sp-2);resize:none;margin-bottom:var(--sp-2);color:var(--text);
}
.mypost-edit-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;}
.mypost-edit-actions button{
  font-family:inherit;font-size:var(--fs-sm);font-weight:800;height:var(--btn-h-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 17px;border-radius:var(--r-full);border:none;transition:transform var(--dur) var(--ease);
}
.mypost-edit-actions button:active{transform:scale(var(--press-sm));}
.mypost-edit-actions .save-edit-btn{background:var(--btn-gradient);color:var(--on-accent);}
.mypost-edit-actions .cancel-edit-btn{background:var(--green-tint);color:var(--green2);}

/* أزرار تعديل/حذف التعليقات */
.comment-actions{display:flex;gap:var(--sp-2);margin-top:6px;}
.comment-actions button{
  font-family:inherit;font-size:var(--fs-xs);font-weight:700;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--surface);color:var(--green2);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.comment-actions button:active{transform:scale(var(--press-sm));background:var(--green-tint);}
.comment-actions .del-btn{color:var(--danger);}
.comment-edit-box textarea{
  width:100%;font-family:inherit;font-size:var(--fs-base);line-height:1.5;border:1.5px solid var(--green2);
  border-radius:var(--r-sm);padding:7px;resize:none;margin-bottom:6px;color:var(--text);
}
.comment-edit-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;}
.comment-edit-actions button{
  font-family:inherit;font-size:var(--fs-sm);font-weight:800;height:var(--btn-h-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border-radius:var(--r-full);border:none;transition:transform var(--dur) var(--ease);
}
.comment-edit-actions button:active{transform:scale(var(--press-sm));}
.comment-edit-actions .save-edit-btn{background:var(--btn-gradient);color:var(--on-accent);}
.comment-edit-actions .cancel-edit-btn{background:var(--green-tint);color:var(--green2);}
/* بطاقة المنشور في الملف الشخصي — حصراً لتبويب "منشورات" بالصفحة الشخصية */
#myPosts{display:flex;flex-direction:column;gap:0;padding-top:var(--sp-3);padding-bottom:var(--sp-3);}
.mypost{
  position:relative;padding:14px;margin-top:0;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow-sm);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mypost:last-child{margin-bottom:0;}
.mypost:active{background:var(--elevated);transform:scale(.995);}
@media (hover:hover){
  .mypost:hover{
    background:var(--elevated);
    border-color:var(--border-strong);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
  }
}
.mypost p{font-size:var(--fs-lg);line-height:1.5;margin:10px 0 0;white-space:pre-wrap;word-break:break-word;color:var(--text);}
.mp-meta{margin-top:10px;font-size:var(--fs-xs);color:var(--muted);}

/* زر الثلاث نقاط وقائمته المنسدلة */
.more-options-wrap{flex-shrink:0;margin-inline-start:auto;}
.more-options-btn{background:none;border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);}
.more-options-btn svg{width:18px;height:18px;}
.more-options-btn:active{background:var(--icon-hover-tint);transform:scale(var(--press-icon));color:var(--text);}
@media (hover:hover){ .more-options-btn:hover{background:var(--icon-hover-tint);color:var(--text);} }
.more-options-menu{position:absolute;z-index:500;display:none;flex-direction:column;background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);overflow:hidden;min-width:190px;}
.more-options-menu button{display:flex;align-items:center;gap:10px;background:none;border:none;text-align:right;padding:13px 15px;font-family:inherit;font-size:var(--fs-base);font-weight:700;color:var(--text);width:100%;}
.more-options-menu button:active{background:var(--icon-hover-tint);}
.more-options-menu button svg{width:16px;height:16px;flex-shrink:0;}
.more-options-menu button.danger{color:var(--danger);}

/* التايم لاين — صفوف مسطّحة تماماً بلا خلفية بطاقة، مفصولة بخط رفيع فقط (مطابق لـ X 2026) */
#feed{padding:0;}
.post{
  position:relative;display:block;margin:0;padding:14px 16px;
  background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;
  transition:background var(--dur) var(--ease);cursor:pointer;
}
.post:active{background:rgba(0,0,0,.025);}
@media (hover:hover){
  .post:hover{ background:rgba(0,0,0,.02); }
}
.report-post-wrap .post{margin:0;border-bottom:none;}
.post-body{flex:1;min-width:0;}

/* هيدر البطاقة — أفاتار + (اسم بسطر خاص فوق معرّف/وقت بسطر تحته) — الاسم دايماً ياخذ مساحته كاملة */
.post-header-row{display:flex;align-items:center;gap:var(--sp-2);}
.post-head-line{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;justify-content:center;}
.phl-top{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;}
.phl-top b{font-weight:800;font-size:var(--fs-lg);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex-shrink:1;}
.phl-sub{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;}
.post-handle{color:var(--muted);font-size:var(--fs-sm);font-weight:400;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.post-dot,.post-time{color:var(--muted);font-size:var(--fs-sm);font-weight:400;flex-shrink:0;}
.post-corner{flex-shrink:0;margin-inline-start:auto;display:flex;align-items:center;}

/* توافقاً مع أماكن أخرى قديمة قد تستخدم نفس الأسماء */
.post-name-line{flex:1;min-width:0;display:flex;align-items:center;gap:4px;font-size:var(--fs-lg);line-height:20px;overflow:hidden;}
.post-name-line b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.post-meta-line{display:flex;align-items:center;gap:4px;font-size:var(--fs-base);color:var(--muted);margin-top:1px;}
.post-top{flex:1;min-width:0;display:flex;align-items:center;gap:4px;font-size:var(--fs-lg);flex-wrap:wrap;line-height:20px;}
.post-top b{font-weight:800;}
.post-top .dim{color:var(--muted);font-size:var(--fs-lg);font-weight:400;}
.trust-badge{
  width:15px;height:15px;border-radius:50%;background:#000;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.trust-badge.admin{background:var(--primary);}
.trust-badge.creator{background:var(--ring-creator);}
.trust-badge svg{width:9px;height:9px;}
.post p{font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;font-size:15px;font-weight:600;color:var(--text);line-height:1.5;margin-top:8px;white-space:pre-wrap;word-break:break-word;}

.empty{text-align:center;padding:48px var(--sp-5);color:var(--muted);font-size:var(--fs-md);}

nav{position:fixed;bottom:8px;right:0;left:0;background:rgba(243,241,233,.62);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-top:1px solid var(--border);display:flex;padding:6px 8px calc(env(safe-area-inset-bottom,0px)+8px);max-width:600px;margin:0 auto;box-shadow:0 -1px 8px rgba(0,0,0,.15);z-index:50;}
@media (min-width:1280px) and (pointer:fine){ nav#navBar{display:none!important;} }
nav button{flex:1;background:none;border:none;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:10px 0;position:relative;min-height:44px;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);}
nav button.active{color:var(--text);}
nav button::before{content:'';position:absolute;inset:4px 14px;border-radius:var(--r-full);background:var(--primary-tint);opacity:0;transform:scale(.85);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:0;}
nav button.active::before{opacity:1;transform:scale(1);}
nav button:active{transform:scale(.9);}
nav button svg{width:24px;height:24px;position:relative;z-index:1;}
nav button .nav-icon-filled{display:none;}
nav button.active{color:var(--green);}
nav button.active .nav-icon-outline{display:none;}
nav button.active .nav-icon-filled{display:block;}
.nav-bell .notif-dot{position:absolute;top:8px;left:50%;margin-left:5px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--bg);z-index:2;}

/* صفحة البحث */
.search-header{padding:calc(env(safe-area-inset-top,0px)+14px) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--border);}
.search-input-row{display:flex;align-items:center;gap:var(--sp-2);}

/* From Uiverse.io by OnlyCodeChannel — نفس الألوان تمامًا، بس مقاسه مضبوط ليملأ عرض الصف ويتماشى مع ارتفاع زر الرجوع بدل حجم الكرت الصغير المعزول الأصلي (230px) */
.searchBox {
  display: flex;
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #2f3640;
  border-radius: 50px;
  position: relative;
}

.searchButton {
  color: white;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-2, linear-gradient(90deg, #2AF598 0%, #009EFD 100%));
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
}
.searchButton:hover {
  box-shadow: rgba(0, 0, 0, 0.5) 0 6px 14px;
  transform: translateY(-50%) translateY(-2px);
}
.searchButton:active {
  box-shadow: none;
  transform: translateY(-50%);
}

.searchInput {
  border: none;
  background: none;
  outline: none;
  color: white;
  font-family: inherit;
  font-size: var(--fs-md);
  width: 100%;
  min-width: 0;
  padding: 12px 52px 12px 18px;
}
.searchInput::placeholder{color:rgba(255,255,255,.55);}
.searchBox .search-clear{position:absolute;left:12px;top:50%;transform:translateY(-50%);}




.search-back{background:none;border:none;color:var(--text);width:var(--btn-icon);height:var(--btn-icon);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.search-back:active{background:var(--green-tint);transform:scale(var(--press-icon));}
.search-back svg{width:21px;height:21px;}
.search-input-wrap{flex:1;display:flex;align-items:center;gap:var(--sp-2);background:var(--green-tint);border-radius:var(--r-full);padding:10px 15px;border:1.5px solid transparent;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.search-input-wrap:focus-within{border-color:var(--green2);background:var(--surface);}
.search-input-wrap svg{width:17px;height:17px;color:var(--muted);flex-shrink:0;}
.search-input-wrap input{flex:1;border:none;background:none;font-family:inherit;font-size:var(--fs-md);color:var(--text);outline:none;min-width:0;}
.search-input-wrap input::placeholder{color:var(--muted);}
.search-clear{display:none;background:var(--muted);color:#fff;border:none;width:18px;height:18px;border-radius:50%;font-size:12px;align-items:center;justify-content:center;flex-shrink:0;opacity:.6;}
.search-clear.show{display:flex;}
.search-clear:active{opacity:.9;}
.search-tabs{display:flex;gap:6px;margin-top:var(--sp-3);background:var(--green-tint);padding:4px;border-radius:var(--r-full);}
.search-tab{flex:1;background:none;border:none;font-family:inherit;font-size:var(--fs-base);font-weight:800;color:var(--green2);padding:8px;border-radius:var(--r-full);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.search-tab.active{color:var(--on-accent);background:var(--btn-gradient);box-shadow:var(--shadow-sm);}
.search-body{overflow-y:auto;flex:1;padding:var(--sp-3) 0;}
.search-hint{text-align:center;padding:52px var(--sp-6);color:var(--muted);}
.search-hint svg{width:40px;height:40px;margin-bottom:var(--sp-3);opacity:.3;}
.search-hint .sh-title{display:block;color:var(--text);font-size:var(--fs-lg);font-weight:800;margin-bottom:4px;}
.search-hint .sh-sub{font-size:var(--fs-base);}
.person-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);transition:background var(--dur) var(--ease);}
.person-card:active{background:rgba(0,0,0,.04);}
.follow-btn{margin-inline-start:auto;background:var(--primary);color:var(--on-accent);border:none;font-family:inherit;font-weight:800;font-size:var(--fs-sm);height:var(--btn-h-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:var(--r-full);flex-shrink:0;box-shadow:var(--shadow-btn);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),filter var(--dur) var(--ease);}
.follow-btn:active{transform:scale(var(--press-sm));}
.follow-btn.following{background:var(--surface);color:var(--green);border:1.5px solid var(--green);box-shadow:none;}
.follow-btn.following:active{background:var(--green-tint);}
@media (hover:hover){
  .follow-btn:not(.following):hover{filter:brightness(1.08);}
  .follow-btn.following:hover{background:var(--green-tint);}
}
.post-follow{flex-shrink:0;white-space:nowrap;margin-top:1px;background:var(--primary);border:none;color:var(--on-accent);font-family:inherit;font-weight:800;font-size:var(--fs-sm);height:26px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:var(--r-full);box-shadow:var(--shadow-btn);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),filter var(--dur) var(--ease);}
.post-follow:active{transform:scale(var(--press-sm));}
.post-follow.following{background:none;color:var(--muted);border:1.5px solid var(--border);box-shadow:none;}
@media (hover:hover){
  .post-follow:not(.following):hover{filter:brightness(1.08);}
  .post-follow.following:hover{border-color:var(--border-strong);color:var(--text-secondary);}
}
.person-card .p-name{display:flex;align-items:center;gap:5px;font-size:var(--fs-md);font-weight:800;color:var(--text);}
.person-card .p-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;}

/* comments */
.reply-toggle{background:none;border:none;color:var(--muted);display:flex;align-items:center;min-height:34px;transition:transform var(--dur) var(--ease);}
.reply-toggle:active{transform:scale(var(--press-icon));}
.comments-box{margin-top:var(--sp-2);border-top:1px solid var(--border);padding-top:var(--sp-2);}
.comment{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2);align-items:flex-start;}
.comment .post-body p{font-size:var(--fs-md);line-height:18px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;margin:4px 0 0;}
.comment-composer{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);}
.comment-composer input{flex:1;background:var(--green-tint);border:1px solid var(--border);border-radius:var(--r-full);padding:9px 15px;font-family:inherit;font-size:var(--fs-md);color:var(--text);}
.comment-composer input:focus{outline:none;border-color:var(--green2);}
.comment-send{background:var(--btn-gradient);color:var(--on-accent);border:none;font-family:inherit;font-weight:700;font-size:var(--fs-base);height:var(--btn-h-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 17px;border-radius:var(--r-full);flex-shrink:0;transition:transform var(--dur) var(--ease);}
.comment-send:active{transform:scale(var(--press-sm));}

/* ===== الردود المتداخلة (Threaded Replies) — بالضبط متل تويتر/تيك توك:
   مستوى إزاحة واحد فقط وثابت مهما كان عمق الرد الفعلي (رد على رد على رد...)، كل الردود الفرعية تتصف مسطّحة
   جنب بعض بنفس المحاذاة، ومتوصل ببعضها بخط رفيع عمودي واحد (thread line) يمرّ بمحاذاة الأفاتارات.
   الإزاحة بتستخدم margin/padding-inline-start فبتنعكس تلقائيًا صح مع RTL (بتصير من جهة اليمين). ===== */
.comment-replies{
  box-sizing:border-box;
  width:100%;
  margin-top:10px;
  margin-inline-start:14px;
  padding-inline-start:14px;
  border-inline-start:1px solid #262626;
  display:flex;flex-direction:column;gap:14px;
  min-width:0;
}
/* أي ردود إضافية جوّا هالحاوية (نظريًا ما بتصير لأنو الشجرة صارت مسطّحة، بس تحسبًا) ما بتزيد أي إزاحة إضافية */
.comment-replies .comment-replies{
  margin-top:14px;margin-inline-start:0;padding-inline-start:0;border-inline-start:none;
}
.comment{min-width:0;width:100%;box-sizing:border-box;}
.comment .post-body{min-width:0;width:100%;box-sizing:border-box;}
.comment-replies .comment{gap:8px;}
.comment-replies .avatar.sm{width:28px;height:28px;}
.comment-actions{flex-wrap:wrap;}
.comment-actions .reply-btn{
  display:inline-flex;align-items:center;gap:5px;background:none;border:none;height:auto;padding:2px 2px;
  color:var(--muted);font-family:inherit;font-size:var(--fs-xs);font-weight:700;
  transition:color var(--dur) var(--ease),filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.comment-actions .reply-btn .ico{width:14px;height:14px;display:flex;flex-shrink:0;}
.comment-actions .reply-btn .ico svg{width:100%;height:100%;}
.comment-actions .reply-btn:active{transform:scale(var(--press-sm));}
@media (hover:hover){
  .comment-actions .reply-btn:hover{color:var(--primary);filter:drop-shadow(0 0 6px rgba(255,103,25,.7));}
}
.reply-compose-slot:empty{display:none;}
.reply-compose-box{display:flex;gap:8px;margin-top:8px;align-items:center;}
.reply-compose-box .avatar{width:26px;height:26px;font-size:11px;flex-shrink:0;}
.reply-compose-inner{flex:1;display:flex;gap:8px;}
.reply-compose-inner input{
  flex:1;min-width:0;background:var(--green-tint);border:1px solid var(--border);border-radius:var(--r-full);
  padding:8px 14px;font-family:inherit;font-size:var(--fs-sm);color:var(--text);
}
.reply-compose-inner input:focus{outline:none;border-color:var(--green2);}
.reply-compose-send{
  background:var(--btn-gradient);color:var(--on-accent);border:none;font-family:inherit;font-weight:700;
  font-size:var(--fs-xs);height:30px;padding:0 14px;border-radius:var(--r-full);flex-shrink:0;
  transition:transform var(--dur) var(--ease);
}
.reply-compose-send:active{transform:scale(var(--press-sm));}
.comments-empty{text-align:center;padding:22px 10px;color:var(--muted);font-size:12.5px;}

/* زر عرض/إخفاء الردود — بالضبط متل تويتر: خط رفيع قصير + سهم + نص، والردود مخفية افتراضيًا */
.toggle-replies-btn{
  display:inline-flex;align-items:center;gap:8px;background:none;border:none;
  margin-top:10px;padding:2px 0;cursor:pointer;
  color:var(--primary);font-family:inherit;font-size:var(--fs-xs);font-weight:800;
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.toggle-replies-btn .trb-line{width:18px;height:1px;background:rgba(0,0,0,.14);flex-shrink:0;}
.toggle-replies-btn .trb-chevron{width:13px;height:13px;display:flex;flex-shrink:0;transition:transform var(--dur) var(--ease);}
.toggle-replies-btn .trb-chevron svg{width:100%;height:100%;}
.toggle-replies-btn.open .trb-chevron{transform:rotate(180deg);}
.toggle-replies-btn:active{transform:scale(var(--press-sm));}
@media (hover:hover){
  .toggle-replies-btn:hover{filter:drop-shadow(0 0 6px rgba(255,103,25,.65));}
}

/* شارة "ردًا على" — تظهر فوق نص الرد وتحت اسم صاحبه، تشير لصاحب التعليق الأصلي */
.replying-to{display:flex;align-items:center;gap:4px;margin:1px 0 3px;color:var(--muted);font-size:var(--fs-xs);line-height:14px;flex-wrap:nowrap;width:100%;max-width:100%;min-width:0;overflow:hidden;}
.replying-to span:first-child{flex-shrink:0;white-space:nowrap;}
.replying-to .rt-arrow{width:10px;height:10px;display:flex;flex-shrink:0;opacity:.55;transform:scaleX(-1);}
.replying-to .rt-arrow svg{width:100%;height:100%;}
.replying-to .rt-user{flex:1 1 auto;color:#A78BFA;opacity:.85;font-weight:600;cursor:pointer;transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (hover:hover){
  .replying-to .rt-user:hover{opacity:1;text-decoration:underline;filter:drop-shadow(0 0 6px rgba(255,103,25,.55));}
}

/* شريط تفاعل سفلي بسيط — أيقونات رمادية موحّدة بلا خلفيات أو أزرار ضخمة، تتلوّن فقط عند التفاعل */
.post-actions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;}
.post-actions-start{display:flex;align-items:center;gap:24px;}
.post-actions-end{display:flex;align-items:center;gap:2px;}
.views-count{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-base);font-weight:400;line-height:1;}
.views-count svg{width:18px;height:18px;flex-shrink:0;display:block;}
.views-count span:not(.ico){display:inline-block;transform:translateY(.5px);font-variant-numeric:tabular-nums;}

/* حلقة خفيفة خلف كل أيقونة عند الضغط/التحويم — محايدة إلا للإعجاب وإعادة النشر */
.post-actions .ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-block:-7px;margin-inline:-7px -3px;border-radius:50%;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.post-actions .ico svg{width:18px;height:18px;position:relative;z-index:1;}
.post-actions .n{font-size:var(--fs-base);font-weight:400;line-height:1;font-variant-numeric:tabular-nums;}
.views-count .ico,.bookmark-btn .ico,.report-btn .ico{width:100%;height:100%;margin:0;}
.reply-toggle,.bookmark-btn,.report-btn,.views-count{color:var(--muted);}
.post-actions .ico{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.reply-toggle:active .ico{background:var(--icon-hover-tint);color:var(--text);}
.bookmark-btn:active .ico{background:var(--icon-hover-tint);}
.report-btn:active .ico{background:var(--like-tint);color:var(--like-color);}
@media (hover:hover){
  .reply-toggle:hover .ico{background:var(--icon-hover-tint);color:var(--primary);box-shadow:0 0 0 8px var(--primary-tint);}
  .bookmark-btn:hover .ico{background:var(--icon-hover-tint);color:var(--warning);box-shadow:0 0 10px 1px rgba(245,158,11,.35),0 0 0 8px rgba(245,158,11,.1);}
  .report-btn:hover .ico{background:var(--like-tint);color:var(--like-color);box-shadow:0 0 10px 1px rgba(239,68,68,.3),0 0 0 8px var(--like-tint);}
}
.like-btn{background:none;border:none;display:flex;align-items:center;gap:4px;color:var(--muted);font-family:inherit;font-size:var(--fs-base);font-weight:400;padding:6px 0;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);min-height:34px;}
.like-btn:active{transform:scale(var(--press-icon));color:var(--like-color);}
.like-btn:active .ico{background:var(--like-tint);}
.like-btn svg{width:18px;height:18px;transition:all var(--dur) var(--ease);}
.like-btn.liked{color:var(--like-color);}
.like-btn.liked svg path{fill:var(--like-color);stroke:var(--like-color);}
@media (hover:hover){
  .like-btn:hover{color:var(--like-color);}
  .like-btn:hover .ico{background:var(--like-tint);box-shadow:0 0 12px 1px rgba(239,68,68,.35),0 0 0 8px var(--like-tint);}
}

/* إعادة النشر / اقتباس */
.repost-btn{background:none;border:none;display:flex;align-items:center;gap:4px;color:var(--muted);font-family:inherit;font-size:var(--fs-base);font-weight:400;padding:6px 0;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);min-height:34px;position:relative;}
.repost-btn:active{transform:scale(var(--press-icon));color:var(--repost-color);}
.repost-btn:active .ico{background:var(--repost-tint);}
.repost-btn svg{width:18px;height:18px;transition:all var(--dur) var(--ease);}
.repost-btn.reposted{color:var(--repost-color);}
@media (hover:hover){
  .repost-btn:hover{color:var(--repost-color);}
  .repost-btn:hover .ico{background:var(--repost-tint);box-shadow:0 0 12px 1px rgba(34,197,94,.35),0 0 0 8px var(--repost-tint);}
}
.repost-menu{position:absolute;z-index:500;display:none;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 24px -6px rgba(0,0,0,.4);overflow:hidden;min-width:200px;}
.repost-menu button{display:flex;align-items:center;gap:10px;background:none;border:none;text-align:right;padding:14px 15px;font-family:inherit;font-size:var(--fs-base);font-weight:700;color:var(--text);width:100%;}
.repost-menu button+button{border-top:1px solid var(--border);}
.repost-menu button:active{background:var(--green-tint);}
@media (hover:hover){.repost-menu button:hover{background:var(--elevated);}}
.repost-menu button svg{width:18px;height:18px;flex-shrink:0;}
.repost-menu button.danger{color:var(--danger);}
.repost-menu-cancel{justify-content:center;text-align:center;color:var(--muted);font-weight:800;background:var(--elevated);}
.repost-menu-cancel:active{background:var(--border);}
.repost-banner{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-sm);font-weight:700;margin-bottom:6px;}
.repost-banner svg{width:14px;height:14px;flex-shrink:0;}
.repost-banner b{color:var(--muted);font-weight:700;}
.pinned-banner{display:flex;align-items:center;gap:6px;color:var(--accent, var(--muted));font-size:var(--fs-sm);font-weight:700;margin-bottom:6px;}
.pinned-banner svg{width:14px;height:14px;flex-shrink:0;}
.quoted-post-card{border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;margin-top:var(--sp-2);cursor:pointer;}
.quoted-post-card:active{background:rgba(0,0,0,.03);}
.quoted-post-card .qp-header{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);margin-bottom:4px;}
.quoted-post-card .qp-header .avatar{width:20px;height:20px;font-size:10px;}
.quoted-post-card .qp-header b{font-weight:800;}
.quoted-post-card p{font-size:var(--fs-sm);line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word;margin:0;}
.quoted-post-card .post-media{margin-top:6px;aspect-ratio:1.4;}

@keyframes postIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.post{animation:postIn .35s ease both;}

.empty{text-align:center;padding:52px var(--sp-6);color:var(--muted);}
.empty svg{width:44px;height:44px;margin-bottom:var(--sp-3);opacity:.35;}
.empty-title{display:block;color:var(--text);font-size:var(--fs-lg);font-weight:800;margin-bottom:4px;}
.empty-sub{font-size:var(--fs-sm);}

.skeleton{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);display:flex;gap:var(--sp-3);}
.skel-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:linear-gradient(90deg,var(--surface) 25%,var(--elevated) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;}
.skel-line{height:11px;border-radius:6px;margin-bottom:var(--sp-2);background:linear-gradient(90deg,var(--surface) 25%,var(--elevated) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skel-lines{flex:1;}
.skel-line.w60{width:60%;}
.skel-line.w90{width:90%;}
.skel-line.w40{width:40%;}

.composer-input textarea{caret-color:var(--green);}
.char-count{font-size:var(--fs-xs);color:var(--muted);align-self:center;margin-inline-end:auto;}

/* ============================================================
   تخطيط 3 أعمدة (ديسكتوب) — Sidebar يمين (تنقّل) + عمود مركزي
   + Sidebar يسار (ودجت السيرفر). بفضل dir="rtl" ترتيب الـDOM
   بينعكس بصرياً تلقائياً بدون أي تعقيد إضافي.
   على الموبايل: يرجع نفس التصميم الأصلي (هيدر + بار سفلي).
   ============================================================ */
.app-shell{display:block;}
@media (min-width:1280px) and (pointer:fine){
  body{padding-bottom:0;}
  .app-shell{
    display:grid;
    grid-template-columns:var(--l-sidebar-w) minmax(0,1fr) var(--r-sidebar-w);
    gap:0;max-width:1400px;margin:0 auto;min-height:100vh;
    align-items:start;
  }
  main{max-width:var(--center-w);margin-inline:auto;border-inline-start:1px solid var(--border);border-inline-end:1px solid var(--border);min-height:100vh;}
}

/* ===== Sidebar يمين: البراند + التنقّل + زر النشر + الحساب ===== */
.l-sidebar{display:none;}
@media (min-width:1280px) and (pointer:fine){
  .l-sidebar{
    display:flex;flex-direction:column;height:100vh;position:sticky;top:0;
    padding:8px 12px;justify-content:space-between;
  }
}
.l-top{display:flex;flex-direction:column;gap:2px;}
.l-brand{
  display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:4px;border-radius:50%;
  width:fit-content;transition:background var(--dur) var(--ease);
}
.l-brand .l-brand-mark{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FF9A5C 0%,var(--primary) 55%,var(--primary-hover) 100%);
  color:#fff;font-weight:900;font-size:16px;box-shadow:var(--shadow-btn);
}
.l-brand .l-brand-text{font-family:'Pacifico','Space Grotesk','IBM Plex Sans Arabic',sans-serif;font-size:25px;font-weight:400;letter-spacing:0;color:var(--text);}
@media (hover:hover){ .l-brand:hover{background:var(--primary-tint);} }

.l-link{
  display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:var(--r-full);
  color:var(--muted);font-size:18px;font-weight:600;width:fit-content;position:relative;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.l-link svg{width:24px;height:24px;flex-shrink:0;}
.l-link .l-dot{position:absolute;top:8px;left:30px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid var(--bg);}
@media (hover:hover){ .l-link:hover{background:var(--primary-tint);color:var(--primary);} }
.l-link:active{background:var(--primary-tint-strong);}
.l-link.active{font-weight:800;color:var(--primary);background:var(--primary-tint);}
.l-link.active .l-icon-outline{display:none;}
.l-link.active .l-icon-filled{display:block;}
.l-link .l-icon-filled{display:none;}

.l-post-btn{
  margin-top:14px;height:52px;border-radius:var(--r-full);background:var(--btn-gradient);color:var(--on-accent);
  border:none;font-family:inherit;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;
  gap:8px;box-shadow:var(--shadow-btn);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);width:100%;
}
.l-post-icon{width:19px;height:19px;flex-shrink:0;}
@media (hover:hover){ .l-post-btn:hover{filter:brightness(1.08);box-shadow:0 0 16px 2px var(--primary-tint-strong),var(--shadow-btn);} }
.l-post-btn:active{transform:scale(.97);}

.l-bottom{display:flex;flex-direction:column;gap:4px;}
.l-account{
  display:none;align-items:center;gap:10px;padding:8px;border-radius:var(--r-full);border:none;background:none;
  width:100%;text-align:right;transition:background var(--dur) var(--ease);
}
.l-account.on{display:flex;}
.l-account .avatar{width:38px;height:38px;flex-shrink:0;}
.l-account-text{flex:1;min-width:0;overflow:hidden;}
.l-account-text .l-name{display:block;font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l-account-text .l-handle{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (hover:hover){ .l-account:hover{background:var(--primary-tint);} }
/* From Uiverse.io by reglobby — نفس ألوان زر الهيدر، مقاسه ممدود ليملأ عرض الشريط الجانبي بدل الحجم الثابت الأصلي */
.l-login-btn{
  display:none;width:100%;height:var(--btn-h-lg);box-sizing:border-box;padding:3px;
  border-radius:16px;cursor:pointer;transition:.3s ease;
  background:linear-gradient(to bottom right,#2e8eff 0%,rgba(46,142,255,0) 30%);
  background-color:rgba(46,142,255,.2);
  align-items:center;justify-content:center;
}
.l-login-btn.on{display:flex;}
.l-login-btn:hover,.l-login-btn:focus{
  background-color:rgba(46,142,255,.7);box-shadow:0 0 10px rgba(46,142,255,.5);outline:none;
}
.l-login-btn-inner{
  width:100%;height:100%;border-radius:13px;background-color:#1a1a1a;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:#fff;font-weight:600;font-family:inherit;font-size:15px;
}
.l-login-btn-inner p{margin:0;}
.l-login-btn-inner svg{width:20px;height:20px;fill:#fff;flex-shrink:0;}

/* ===== Sidebar يمين: حاوية عامة قابلة لإضافة ودجتات مستقبلاً (شبيهة بتويتر) ===== */
.r-sidebar{display:none;}
@media (min-width:1280px) and (pointer:fine){
  .r-sidebar{display:block;padding:10px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;}
  /* لحد ما تنضاف ودجتات حقيقية (ترندات، اقتراحات متابعة...)، منخفيها بدل ما تضل عمود أسود فاضي */
  .r-sidebar:empty{display:none;}
  .app-shell:has(.r-sidebar:empty){grid-template-columns:var(--l-sidebar-w) minmax(0,1fr);}
}

.r-widget{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  margin-bottom:16px;overflow:hidden;
}
.r-widget-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;}
.r-widget-head h3{font-size:17px;font-weight:900;color:var(--text);}
/* ============================================================
   نظام الستوريات (Stories) — بأسلوب انستغرام
   ============================================================ */
.story-bar{
  display:flex;gap:14px;padding:14px var(--sp-4) 10px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;border-bottom:1px solid var(--border);
  background:var(--bg);
}
.story-bar::-webkit-scrollbar{display:none;}
.story-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:66px;
  cursor:pointer;-webkit-user-select:none;user-select:none;
}
.story-ring{
  width:60px;height:60px;border-radius:50%;padding:2.5px;flex-shrink:0;
  background:linear-gradient(135deg,#E6E6E6,#E6E6E6);
  display:flex;align-items:center;justify-content:center;transition:transform var(--dur) var(--ease);
}
.story-item:active .story-ring{transform:scale(.94);}
.story-ring.unseen{background:linear-gradient(135deg,#FEE140 0%,#FF6719 45%,#E65613 75%,#C24A0A 100%);}
.story-ring.seen{background:var(--border-strong);}
.story-ring.mine{background:linear-gradient(135deg,#FEE140 0%,#FF6719 45%,#E65613 75%,#C24A0A 100%);}
.story-ring-inner{
  width:100%;height:100%;border-radius:50%;background:var(--bg);padding:2.5px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.story-ring-inner .avatar{width:100%;height:100%;font-size:18px;}
.story-add-badge{
  position:absolute;bottom:-2px;left:-2px;width:19px;height:19px;border-radius:50%;
  background:var(--primary);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:900;line-height:1;box-shadow:var(--shadow-sm);
}
.story-item-label{font-size:11.5px;color:var(--text-secondary);max-width:66px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.story-item.mine .story-item-label{color:var(--text);font-weight:600;}

/* عارض الستوري ملء الشاشة */
.story-viewer{
  position:fixed;inset:0;background:#000;z-index:300;
  opacity:0;pointer-events:none;transform:scale(.97);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  display:flex;flex-direction:column;
}
.story-viewer.open{opacity:1;pointer-events:auto;transform:scale(1);}
.story-progress-row{
  display:flex;gap:4px;padding:10px 10px 0;padding-top:calc(env(safe-area-inset-top,0px) + 10px);
}
.story-progress-track{
  flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;
}
.story-progress-fill{
  height:100%;width:0%;background:#fff;border-radius:2px;
}
.story-progress-track.done .story-progress-fill{width:100%;}
.story-progress-track.active .story-progress-fill{transition:width linear;}
.story-viewer-header{
  display:flex;align-items:center;justify-content:space-between;padding:10px 14px;color:#fff;
}
.story-viewer-user{display:flex;align-items:center;gap:8px;min-width:0;}
.story-viewer-user .avatar{width:30px;height:30px;font-size:13px;flex-shrink:0;}
.story-viewer-name{font-size:14px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.story-viewer-time{font-size:12px;color:rgba(255,255,255,.65);flex-shrink:0;}
.story-viewer-actions{display:flex;align-items:center;gap:6px;}
.story-icon-btn{
  background:rgba(255,255,255,.12);border:none;color:#fff;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.story-icon-btn svg{width:17px;height:17px;}
.story-viewer-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.story-tap-zone{position:absolute;top:0;bottom:0;width:34%;z-index:2;}
.story-tap-prev{right:0;}
.story-tap-next{left:0;}
.story-media-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.story-media-wrap img,.story-media-wrap video{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;}
.story-media-wrap.loading::after{
  content:'';width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:storySpin .8s linear infinite;position:absolute;
}
@keyframes storySpin{to{transform:rotate(360deg);}}

/* شريط عدد المشاهدين — يظهر فقط لصاحب القصة */
.story-viewers-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;justify-content:center;
  padding-bottom:calc(env(safe-area-inset-bottom,0px)+16px);
  pointer-events:none;
}
.story-viewers-pill{
  display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:800;
  cursor:pointer;pointer-events:auto;background:rgba(20,20,20,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-full);
  padding:9px 16px;transition:transform 140ms ease,background var(--dur) var(--ease);
}
.story-viewers-pill:active{transform:scale(.95);background:rgba(20,20,20,.72);}
.story-viewers-pill svg{width:17px;height:17px;flex-shrink:0;}
.story-viewers-pill-chevron{width:13px!important;height:13px!important;opacity:.7;margin-inline-start:1px;}

/* شيت قائمة المشاهدين */
.story-viewers-overlay{
  position:fixed;inset:0;z-index:310;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.story-viewers-overlay.open{opacity:1;pointer-events:auto;}
.story-viewers-sheet{
  width:100%;max-width:600px;max-height:66vh;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.5);
  transform:translateY(24px);
  transition:transform var(--dur) var(--ease);display:flex;flex-direction:column;overflow:hidden;
}
.story-viewers-overlay.open .story-viewers-sheet{transform:translateY(0);}
.story-viewers-handle{
  width:36px;height:4px;border-radius:4px;background:var(--border-strong);
  margin:10px auto 2px;flex-shrink:0;
}
.story-viewers-sheet-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px 14px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.story-viewers-sheet-title{display:flex;align-items:center;gap:8px;font-weight:900;font-size:var(--fs-lg);color:var(--text);}
.story-viewers-sheet-title svg{width:19px;height:19px;color:var(--primary);flex-shrink:0;}
.story-viewers-count-pill{
  background:var(--primary-tint);color:var(--primary-hover);font-size:12.5px;font-weight:800;
  padding:2px 9px;border-radius:var(--r-full);min-width:20px;text-align:center;
}
.story-viewers-sheet-head button{
  background:var(--elevated);border:none;width:30px;height:30px;border-radius:50%;
  color:var(--text);font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.story-viewers-list{overflow-y:auto;padding:4px 16px calc(env(safe-area-inset-bottom,0px)+16px);}
.story-viewer-row{
  display:flex;align-items:center;gap:11px;padding:10px 4px;border-radius:var(--r-md);
  transition:background var(--dur) var(--ease);
}
.story-viewer-row:not(:last-child){border-bottom:1px solid var(--border);}
.story-viewer-row .avatar{width:40px;height:40px;font-size:15px;flex-shrink:0;box-shadow:0 0 0 1.5px var(--border);}
.story-viewer-row-name{flex:1;min-width:0;font-size:var(--fs-md);font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.story-viewer-row-time{font-size:12px;color:var(--muted);flex-shrink:0;}
.story-viewers-empty{
  padding:44px 20px;text-align:center;color:var(--muted);font-size:var(--fs-base);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.story-viewers-empty svg{width:34px;height:34px;color:var(--border-strong);}