/* ══════════ NEW POST MODAL (modern) ══════════ */
.np-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:3000;
  display:none;align-items:flex-end;justify-content:center;
}
.np-overlay.show{display:flex;}
.np-box{
  background:#fff;width:100%;max-width:520px;
  border-radius:24px 24px 0 0;padding:0 0 28px;
  max-height:94vh;overflow-y:auto;
  box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
.np-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  position:sticky;top:0;background:#fff;z-index:2;
  border-radius:24px 24px 0 0;
}
.np-hdr::after{
  content:'';position:absolute;
  left:50%;top:8px;transform:translateX(-50%);
  width:40px;height:4px;border-radius:4px;background:#e6e6e6;
}
.np-hdr-title{font-size:18px;font-weight:800;color:#111;margin-top:6px;}
.np-close{
  background:#f3f3f3;border:none;cursor:pointer;
  color:#666;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-top:6px;
  transition:background .15s;
}
.np-close:active{background:#e8e8e8;}

/* اختيار النوع — بطاقتان مضغوطتان */
.np-type-cards{display:flex;gap:10px;padding:8px 18px 4px;}
.np-type-card{
  flex:1;border:2px solid #eee;border-radius:14px;
  padding:13px 10px;display:flex;flex-direction:row;
  align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:#fafafa;transition:all .18s;
}
.np-type-card:active{transform:scale(.97);}
.np-type-card.active{border-color:#ff6b35;background:#fff5f0;box-shadow:0 2px 12px rgba(255,107,53,.18);}
.np-type-card-icon{font-size:0;line-height:1;display:flex;align-items:center;}
.np-type-card-icon svg{stroke:#bbb;transition:stroke .18s;}
.np-type-card.active .np-type-card-icon svg{stroke:#ff6b35;}
.np-type-card-label{font-size:14px;font-weight:700;color:#aaa;transition:color .18s;}
.np-type-card.active .np-type-card-label{color:#ff6b35;}

/* منطقة المحتوى */
.np-body{padding:14px 18px 0;position:relative;}
.np-caption-input{
  width:100%;border:1.5px solid #eee;border-radius:14px;
  padding:12px 14px;font-family:inherit;font-size:15px;
  outline:none;resize:none;min-height:80px;
  -webkit-user-select:text;user-select:text;
  background:#fafafa;transition:border-color .15s,background .15s;
}
.np-caption-input:focus{border-color:#ff6b35;background:#fff;}
.np-counter{
  position:absolute;bottom:6px;
  inset-inline-end:30px;
  font-size:11px;color:#aaa;font-weight:600;
  pointer-events:none;
}

/* منطقة الملف — بشكل modern */
.np-file-area{
  margin:14px 18px 0;
  border:2px dashed #e0e0e0;
  border-radius:20px;
  min-height:220px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  cursor:pointer;transition:all .2s;
  background:linear-gradient(135deg,#fafafa 0%,#f5f5f7 100%);
  position:relative;overflow:hidden;
}
.np-file-area:active{background:#f0f0f0;}
.np-file-area.has-media{
  border-style:solid;
  border-color:#ff6b35;
  background:#000;
  min-height:380px;
  padding:0;
}
.np-file-icon{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#fff5f0,#ffe8db);
  display:flex;align-items:center;justify-content:center;
  color:#ff6b35;
  box-shadow:inset 0 0 0 1px rgba(255,107,53,.15);
}
.np-file-icon svg{width:28px;height:28px;}
.np-file-label{
  font-size:14px;color:#888;font-weight:700;
  text-align:center;line-height:1.4;
}
.np-file-label small{display:block;font-weight:500;color:#bbb;font-size:12px;margin-top:3px;}
.np-img-preview{
  width:100%;display:none;border-radius:18px;
  object-fit:cover;max-height:380px;
}
.np-vid-preview-el{
  width:100%;display:none;
  max-height:380px;background:#000;
  border-radius:18px;
}

.np-post-btn{
  width:calc(100% - 36px);margin:18px 18px 0;
  background:var(--grad);color:#fff;border:none;border-radius:14px;
  font-weight:800;padding:16px;cursor:pointer;font-family:inherit;
  font-size:16px;transition:opacity .15s,transform .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 22px rgba(255,107,53,.35);
}
.np-post-btn:active{opacity:.9;transform:scale(.98);}
.np-post-btn:disabled{opacity:.55;cursor:not-allowed;}

/* ══════════ CONFIRM PUBLISH SHEET ══════════ */
.np-confirm{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:3100;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;transition:opacity .2s;
}
.np-confirm.show{display:flex;opacity:1;}
.np-confirm-box{
  background:#fff;border-radius:22px;
  width:100%;max-width:340px;
  padding:24px 22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transform:scale(.92);opacity:0;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s;
}
.np-confirm.show .np-confirm-box{transform:scale(1);opacity:1;}
.np-confirm-icon{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#ff416c,#ff6b35);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  box-shadow:0 8px 22px rgba(255,107,53,.4);
  color:#fff;
}
.np-confirm-title{font-size:18px;font-weight:800;color:#111;margin-bottom:6px;}
.np-confirm-sub{font-size:13.5px;color:#777;margin-bottom:20px;line-height:1.5;}
.np-confirm-actions{display:flex;gap:10px;}
.np-confirm-btn{
  flex:1;border:none;border-radius:14px;
  padding:13px;font-family:inherit;font-weight:700;font-size:15px;
  cursor:pointer;transition:transform .12s,opacity .15s;
}
.np-confirm-btn:active{transform:scale(.96);}
.np-confirm-cancel{
  background:#f3f3f3;color:#444;
}
.np-confirm-publish{
  background:var(--grad);color:#fff;
  box-shadow:0 6px 18px rgba(255,107,53,.35);
}

/* ══════════ REELS (vertical snap feed) ══════════ */
body.reels-mode .topbar{display:none !important;}
body.reels-mode .bottom-nav{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.08);
}
body.reels-mode .bottom-nav .nav-btn{color:#fff;}
body.reels-mode .bottom-nav .nav-lbl{color:#fff;}

#page-posts.active{
  background:#000;
  position:fixed;
  inset:0;
  top:0;bottom:0;left:0;right:0;
  z-index:30;
  padding:0;
}
#page-posts #feed-list{
  height:100dvh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:#000;
  padding-bottom:74px; /* مساحة للbottom nav */
}
#page-posts #feed-list::-webkit-scrollbar{display:none;}

.reel-card{
  position:relative;
  width:100%;
  height:calc(100dvh - 74px);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#000;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  contain:content;
}

/* الميديا */
.reel-media-wrap{
  position:absolute;inset:0;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.reel-img,
.reel-vid-poster,
.reel-vid-el{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}
.reel-vid-el{position:absolute;inset:0;}

/* زر التشغيل في النص */
.reel-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;z-index:5;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  transition:transform .15s,opacity .25s;
  -webkit-tap-highlight-color:transparent;
}
.reel-play svg{margin-inline-start:3px;}
.reel-play.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6);}

/* شارة الفيديو */
.reel-vid-badge{
  position:absolute;top:14px;
  inset-inline-start:14px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:8px;
  display:inline-flex;align-items:center;gap:4px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:none;z-index:6;
}

/* تدرّج أسود تحت + فوق للقراءة */
.reel-gradient{
  position:absolute;left:0;right:0;
  pointer-events:none;z-index:2;
}
.reel-gradient.top{
  top:0;height:120px;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 100%);
}
.reel-gradient.bottom{
  bottom:0;height:42%;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 55%,transparent 100%);
}

/* معلومات المستخدم — أسفل الـ reel */
.reel-info{
  position:absolute;left:14px;right:78px;bottom:16px;
  color:#fff;z-index:6;
  display:flex;flex-direction:column;gap:8px;
}
.reel-user-row{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
}
.reel-av{
  width:38px;height:38px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  border:2px solid rgba(255,255,255,.9);
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#fff;
}
.reel-av img{width:100%;height:100%;object-fit:cover;}
.reel-username{
  font-weight:800;font-size:14.5px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.reel-time{font-size:11px;color:rgba(255,255,255,.7);}
.reel-caption{
  font-size:14px;line-height:1.5;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  max-height:5.4em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}

/* عمود أزرار التفاعل — يمين الشاشة (في RTL = شمال؟ لا، ثابت في الشمال البصري) */
.reel-actions{
  position:absolute;
  inset-inline-end:8px;
  bottom:20px;z-index:6;
  display:flex;flex-direction:column;gap:14px;
  align-items:center;
}
.reel-act{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#fff;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s;
  padding:4px;
}
.reel-act:active{transform:scale(.88);}
.reel-act-icon{
  width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;
  border:1px solid rgba(255,255,255,.12);
  transition:background .15s,border-color .15s,transform .12s;
}
.reel-act.liked .reel-act-icon{
  background:linear-gradient(135deg,#ff416c,#ff6b35);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 4px 14px rgba(255,65,108,.5);
}

/* Pop animation للضغط السريع */
@keyframes heartPop{
  0%   { transform:scale(1); }
  40%  { transform:scale(1.35); }
  70%  { transform:scale(.92); }
  100% { transform:scale(1); }
}
.reel-act.pop .reel-act-icon{
  animation:heartPop .35s cubic-bezier(.34,1.56,.64,1);
}

/* ══ Post viewer: شارة الرجوع modern (يستعمل reel-* classes الباقية) ══ */
.pv-close-btn{
  position:absolute;top:14px;
  inset-inline-start:14px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  color:#1a1a1a;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s;
}
.pv-close-btn:active{transform:scale(.88);}

/* خلي pv-slide يستعمل نفس مظهر reel-card */
.pv-slide.reel-card{
  height:100dvh; /* full viewport في الـ viewer */
}
.reel-act.saved .reel-act-icon{
  background:rgba(247,151,30,.85);
  border-color:rgba(255,255,255,.3);
}
.reel-act-lbl{
  font-size:11px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  min-height:14px;
}

/* رياكشن بيكر — أعلى زر الإعجاب */
.reel-react-picker{
  position:absolute;
  inset-inline-end:64px;
  bottom:160px;z-index:7;
  background:rgba(40,40,40,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:30px;padding:8px 12px;
  display:none;gap:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.1);
}
.reel-react-picker.show{display:flex;}
.reel-react-picker .pr-emoji{
  font-size:26px;cursor:pointer;
  transition:transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.reel-react-picker .pr-emoji:active{transform:scale(1.4);}

/* عداد التفاعلات الصغير */
.reel-react-count{
  display:flex;align-items:center;gap:2px;
  font-size:11px;color:rgba(255,255,255,.85);
}

/* ══════════ EMPTY FEED ══════════ */
.empty-feed{text-align:center;padding:60px 20px;color:#999;}
.empty-feed div{font-size:48px;margin-bottom:12px;}
.empty-feed p{font-size:15px;}

/* ══════════ LOADING SPINNER ══════════ */
.feed-loading{text-align:center;padding:40px;color:#bbb;font-size:14px;}
.spinner{display:inline-block;width:28px;height:28px;border:3px solid #eee;border-top-color:#ff6b35;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══════════ GLOBAL LOADER OVERLAY ══════════ */
#global-loader{
  position:fixed;inset:0;z-index:99999;
  display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,0);
  transition:background .35s ease;
  pointer-events:none;
}
#global-loader.show{
  display:flex;
  background:rgba(255,255,255,0.55);
  pointer-events:none;
}
@keyframes loaderFadeIn{
  from{opacity:0;}to{opacity:1;}
}
.loader{
  height:54px;width:54px;position:relative;
  animation:loaderAnimation 1.5s infinite linear;
}
.loader-inner{
  position:absolute;height:100%;width:100%;left:0;top:0;
  background:var(--grad);
  border-radius:50%;
  animation:innerAnimation 1s infinite ease-in-out;
}
@keyframes loaderAnimation{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
@keyframes innerAnimation{
  0%{width:0;opacity:0;}
  50%{width:100%;opacity:1;}
  100%{width:0;opacity:0;}
}
.loader-label{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%);
  white-space:nowrap;font-size:14px;font-weight:700;
  color:#555;letter-spacing:.3px;
  animation:labelPulse 1.4s ease-in-out infinite;
}
@keyframes labelPulse{
  0%,100%{opacity:.5;}50%{opacity:1;}
}
.loader-wrap{position:relative;display:flex;align-items:center;justify-content:center;}