/* ══ STICKER PICKER ══ */
.sticker-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:4500;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.5);
}
.sticker-overlay.show{display:flex;}
.sticker-box{
  background:#1c1c1e;width:100%;max-width:520px;
  border-radius:22px 22px 0 0;padding:0 0 36px;
  max-height:60vh;display:flex;flex-direction:column;
}
.sticker-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 8px;border-bottom:1px solid rgba(255,255,255,.08);
}
.sticker-hdr-title{color:#fff;font-weight:800;font-size:15px;}
.sticker-close{background:none;border:none;color:#888;font-size:20px;cursor:pointer;}
/* تابات الوضع: صور / إيموجي */
.sticker-mode-tabs{display:flex;padding:8px 12px 4px;gap:6px;border-bottom:1px solid rgba(255,255,255,.06);}
.sticker-mode-tab{
  flex:1;padding:7px;border-radius:10px;border:none;
  background:rgba(255,255,255,.06);color:#aaa;
  font-family:inherit;font-size:13px;cursor:pointer;font-weight:600;
  transition:all .2s;
}
.sticker-mode-tab.active{background:var(--grad);color:#fff;}
.sticker-tabs-wrap{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;}
.sticker-tab{
  padding:5px 14px;border-radius:16px;border:none;
  background:rgba(255,255,255,.08);color:#aaa;
  font-family:inherit;font-size:13px;cursor:pointer;
  white-space:nowrap;flex-shrink:0;
}
.sticker-tab.active{background:var(--grad);color:#fff;}
.sticker-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;padding:8px 12px;overflow-y:auto;flex:1;
}
.sitem{
  aspect-ratio:1;border-radius:12px;border:none;
  background:rgba(255,255,255,.06);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;transition:transform .12s;
}
.sitem:active{transform:scale(1.18);}
/* ستكر صورة */
.sitem-img{
  aspect-ratio:1;border-radius:12px;border:none;
  background:rgba(255,255,255,.04);cursor:pointer;
  overflow:hidden;padding:4px;transition:transform .12s;
}
.sitem-img img{width:100%;height:100%;object-fit:contain;border-radius:8px;}
.sitem-img:active{transform:scale(1.1);}

/* ══════════ AVATAR PICKER SHEET ══════════ */
#avatar-pick-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,0);display:none;
  align-items:flex-end;justify-content:center;
  transition:background .22s;
}
#avatar-pick-overlay.show{background:rgba(0,0,0,.55);}
#avatar-pick-box{
  background:#fff;width:100%;max-width:520px;
  border-radius:22px 22px 0 0;padding:10px 0 36px;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,1.6,.5,1);
}
#avatar-pick-overlay.show #avatar-pick-box{transform:translateY(0);}
.apick-handle{width:38px;height:4px;background:#e0e0e0;border-radius:2px;margin:8px auto 18px;}
.apick-title{text-align:center;font-size:15px;font-weight:800;color:#333;margin-bottom:14px;}
.apick-item{
  display:flex;align-items:center;gap:14px;
  padding:15px 24px;border:none;background:none;
  width:100%;font-family:inherit;font-size:16px;
  color:#222;cursor:pointer;transition:background .1s;
}
.apick-item:active{background:#f5f5f5;}
.apick-item-icon{
  width:44px;height:44px;border-radius:14px;
  background:#f5f5f5;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
}
.apick-cancel{
  margin:8px 18px 0;width:calc(100% - 36px);
  padding:14px;border:none;border-radius:14px;
  background:#f5f5f5;font-family:inherit;font-size:16px;
  font-weight:700;color:#888;cursor:pointer;
}

/* ══ MEDIA SOURCE PICKER (كاميرا / معرض) ══ */
#media-pick-overlay,#msg-pick-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,0);display:none;
  align-items:flex-end;justify-content:center;
  transition:background .22s;
}
#media-pick-overlay.show,#msg-pick-overlay.show{
  background:rgba(0,0,0,.55);display:flex;
}
#media-pick-box,#msg-pick-box{
  background:#fff;width:100%;max-width:520px;
  border-radius:22px 22px 0 0;padding:10px 0 36px;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,1.6,.5,1);
}
#media-pick-overlay.show #media-pick-box,
#msg-pick-overlay.show #msg-pick-box{transform:translateY(0);}

.profile-display-name{
  font-size:21px;font-weight:800;color:#111;
  text-align:center;margin-bottom:2px;word-break:break-all;
}
.dn-edit-wrap{margin-top:8px;display:none;}
.dn-input{
  width:100%;border:1.5px solid #eee;border-radius:12px;
  padding:10px 14px;font-family:inherit;font-size:16px;
  outline:none;text-align:center;background:#f9f9f9;
  -webkit-user-select:text;user-select:text;
}
.dn-input:focus{border-color:#ff6b35;}
.dn-counter{font-size:11px;color:#bbb;text-align:center;margin-top:3px;}
.dn-emoji-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:6px 0;}
.dep{font-size:22px;cursor:pointer;padding:3px;border-radius:8px;transition:transform .12s;}
.dep:active{transform:scale(1.35);}

/* ══════════ NOTIFICATIONS PAGE ══════════ */
#page-notifs.active{padding-top:58px;}
.notif-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid #f2f2f2;
  cursor:pointer;transition:background .12s;position:relative;
}
.notif-item:active{background:#f8f8f8;}
.notif-item.unseen{background:linear-gradient(135deg,rgba(255,65,108,.04),rgba(255,107,53,.04));}
.notif-item.unseen::before{
  content:'';position:absolute;right:0;top:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,#ff416c,#ff6b35);border-radius:0 2px 2px 0;
}
.notif-av-wrap{position:relative;flex-shrink:0;}
.notif-type-icon{
  position:absolute;bottom:-3px;right:-3px;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;border:2px solid #fff;
}
.notif-type-like{background:linear-gradient(135deg,#ff416c,#ff6b35);}
.notif-type-follow{background:linear-gradient(135deg,#6c63ff,#a855f7);}
.notif-type-comment{background:linear-gradient(135deg,#06b6d4,#3b82f6);}
.notif-body{flex:1;min-width:0;}
.notif-actor{font-weight:700;font-size:14px;color:#111;}
.notif-action{font-size:14px;color:#555;}
.notif-time-small{font-size:11px;color:#bbb;margin-top:2px;}
.notif-post-thumb{
  width:48px;height:48px;border-radius:8px;
  object-fit:cover;flex-shrink:0;background:#eee;
}
.notif-empty{text-align:center;padding:60px 20px;color:#bbb;}
.notif-empty-icon{font-size:48px;margin-bottom:12px;}
#notif-badge-bell{
  position:absolute;
  top:-4px;right:-4px;
  transform:none;
  background:#fff;
  color:#e53935;
  font-size:10px;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;
  display:none;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
  border:2px solid #e53935;
  font-family:'Tajawal',sans-serif;
}
#notif-badge-bell.show{display:flex;}
  position:absolute;top:4px;right:calc(50% - 20px);
  min-width:16px;height:16px;border-radius:8px;
  background:linear-gradient(135deg,#ff416c,#ff6b35);
  color:#fff;font-size:10px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  padding:0 3px;border:2px solid rgba(255,255,255,.3);
}
#notif-badge2.show{display:flex;}


/* ══════════ CHAT INFO PAGE ══════════ */
#chat-info{
  position:fixed;inset:0;z-index:1500;
  background:#f2f2f7;display:none;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y; /* السكرول العمودي بس — يمنع السحب الأفقي يحرك الصفحة */
  width:100%;max-width:100vw;
}
#chat-info{display:none;}
#chat-info.show{display:flex;}
#chat-info > *{max-width:100%;box-sizing:border-box;}
.ci-header{
  background:#fff;
  padding:100px 16px 24px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;
}
.ci-back{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.06);border:none;
  color:#333;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ci-av{width:82px;height:82px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(0,0,0,.1);flex-shrink:0;}
.ci-av img{width:100%;height:100%;object-fit:cover;}
.ci-name{font-size:20px;font-weight:800;color:#111;text-shadow:none;}
.ci-status{font-size:13px;color:#888;}

.ci-actions{
  display:flex;justify-content:center;gap:20px;
  padding:16px 16px;background:#fff;
  border-bottom:1px solid #eee;
}
.ci-action-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;
  cursor:pointer;
  font-family:inherit;font-size:11px;color:#666;font-weight:600;
  transition:transform .1s;
  flex:1;max-width:70px;
}
.ci-action-btn:active{transform:scale(.92);}
.ci-action-icon{
  width:48px;height:48px;border-radius:50%;
  background:#f0f0f0;
  display:flex;align-items:center;justify-content:center;
}
.ci-action-icon svg { stroke:#555; }
.ci-action-btn-report .ci-action-icon{ background:rgba(229,57,53,.1); }
.ci-action-btn-report .ci-action-icon svg{ stroke:#e53935; }
.ci-action-btn-report{ color:#e53935; }

.ci-section{background:#fff;margin:10px 0;border-radius:0;}
.ci-section-title{
  font-size:12px;font-weight:700;color:#999;
  padding:12px 16px 6px;text-transform:uppercase;letter-spacing:.5px;
}
.ci-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-bottom:1px solid #f2f2f2;
  cursor:pointer;transition:background .12s;
}
.ci-row:last-child{border-bottom:none;}
.ci-row:active{background:#f5f5f5;}
.ci-row-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.ci-row-text{flex:1;}
.ci-row-label{font-size:15px;font-weight:600;color:#111;}
.ci-row-sub{font-size:12px;color:#999;margin-top:1px;}
.ci-row-arrow{color:#ccc;font-size:16px;}

/* زر الثيمات — دائري مثل باقي الأزرار */
.ci-section{display:flex;flex-direction:column;align-items:center;padding:12px 0 4px;background:#fff;margin:0;border-top:1px solid #eee;}
.ci-collapse-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;
  cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;
  color:#666;
  transition:transform .1s;
}
.ci-collapse-btn:active{transform:scale(.92);}
.ci-collapse-btn > div:first-child {
  width:48px;height:48px;border-radius:50%;
  background:#f0f0f0;
  display:flex;align-items:center;justify-content:center;
}
.ci-collapse-arrow{display:none;}
.ci-collapse-btn.open .ci-collapse-arrow{display:none;}
.ci-themes-collapsed{max-height:0!important;overflow:hidden!important;padding-top:0!important;padding-bottom:0!important;transition:max-height .3s ease,padding .3s ease;}
.ci-themes-collapsed.open{max-height:200px!important;overflow:hidden auto!important;}

/* زر بحث أحمر */
.ci-search-go{
  width:34px;height:34px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,#ff6b35,#ff416c);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .1s;
}
.ci-search-go:active{transform:scale(.92);}

/* بحث في المحادثة */
.ci-search-wrap{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.ci-search-wrap.open{max-height:400px;}
.ci-search-input{
  width:100%;border:1.5px solid #eee;border-radius:100px;
  padding:8px 14px;font-family:inherit;font-size:14px;
  outline:none;background:#f9f9f9;direction:rtl;box-sizing:border-box;
}
.ci-search-input:focus{border-color:#ff6b35;}
.ci-search-results{padding:4px 16px 10px;max-height:260px;overflow-y:auto;}
.ci-search-item{
  padding:9px 10px;border-radius:10px;font-size:13px;color:#333;
  border-bottom:1px solid #f2f2f2;cursor:pointer;transition:background .1s;
  direction:rtl;line-height:1.5;
}
.ci-search-item:last-child{border-bottom:none;}
.ci-search-item:active{background:#f5f5f5;}
.ci-search-item mark{background:rgba(255,107,53,.25);color:#e05a20;border-radius:3px;padding:0 2px;}
.ci-search-empty{text-align:center;padding:20px;color:#bbb;font-size:13px;}

/* ثيمات الشات — سكرول أفقي داخلي بدون ما يحرّك الصفحة */
.ci-themes{
  display:flex;gap:10px;padding:12px 16px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  /* اعزل اللمس: pan-x يخلي السحب الأفقي للـ themes فقط */
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  max-width:100%;box-sizing:border-box;
  width:100%;
  scroll-snap-type:x proximity;
}
.ci-themes::-webkit-scrollbar{display:none;}
.ci-themes .ci-theme-item{scroll-snap-align:start;}
.ci-theme-item{
  flex-shrink:0;width:60px;height:60px;border-radius:14px;
  cursor:pointer;border:3px solid transparent;transition:border .15s;
  position:relative;overflow:hidden;
}
.ci-theme-item.active{border-color:#ff6b35;}
.ci-theme-item img{width:100%;height:100%;object-fit:cover;}

/* معرض الوسائط المشتركة */
.ci-media-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:0;background:#f2f2f7;
}
.ci-media-thumb{
  aspect-ratio:1;overflow:hidden;background:#e8e8e8;
  cursor:pointer;position:relative;
}
.ci-media-thumb img,.ci-media-thumb video{
  width:100%;height:100%;object-fit:cover;display:block;
}