/* ═══════════════════════════════════════════════════════════════════════════
 *  v391 · دنبال‌شده‌ها / دنبال‌کننده‌ها / دوستان — ظاهر صفحهٔ سه‌تبی (332-v391-people.js)
 *  سفید و تمام‌صفحه مثل تیک‌تاک، با پالت «مرکز من» (جوهر #1F2937، خاکستری #6B7280، خط موی کرم، آبی #2F63D8).
 *  سه صفحه در یک ظرف scroll-snap افقی (کشیدن انگشت = اسکرول خود مرورگر)؛ هر صفحه اسکرول عمودی خودش را دارد.
 *  حرکت: فقط یک لغزش ورود (transform)؛ انیمیشن همیشگی‌ای نیست.
 * ═══════════════════════════════════════════════════════════════════════════ */
#pp391{ --ink:#1F2937; --mute:#6B7280; --line:#ECE6DA; --blue:#2F63D8;
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; max-width:420px; margin:0 auto; color:var(--ink); background:#FFFFFF;
  padding-top:env(safe-area-inset-top); animation:in391 .22s cubic-bezier(.2,.8,.2,1) both }
#pp391[dir=rtl]{ animation-name:in391r }
#pp391.out{ transform:translateX(100%); transition:transform .18s ease-in }
#pp391[dir=rtl].out{ transform:translateX(-100%) }
@keyframes in391{ from{ transform:translateX(100%) } to{ transform:none } }
@keyframes in391r{ from{ transform:translateX(-100%) } to{ transform:none } }

/* سربرگ: برگشت · نام · افزودن دوست */
#pp391 .h391{ flex:none; display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:8px; height:52px; padding:0 8px }
#pp391 .h391 > b{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; font-size:16px; font-weight:900 }
#pp391 .i391{ display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:12px; background:none; color:var(--ink); cursor:pointer }
#pp391 .i391 svg{ width:24px; height:24px }
#pp391[dir=rtl] .i391[data-x=back] svg{ transform:scaleX(-1) }
#pp391 .i391:active{ background:#F3F4F6 }

/* تب‌ها: نام و شمار، خط زیر تب فعال */
#pp391 .tb391{ flex:none; display:flex; border-bottom:1px solid var(--line) }
#pp391 .tb391 > button{ position:relative; flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:44px; padding:0 4px; border:0; background:none;
  cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; color:var(--mute); white-space:nowrap }
#pp391 .tb391 > button em{ font-style:normal; font-weight:800; font-variant-numeric:tabular-nums }
#pp391 .tb391 > button.on{ color:var(--ink); font-weight:900 }
#pp391 .tb391 > button.on::after{ content:""; position:absolute; inset:auto 22% -1px; height:2.5px; border-radius:2px; background:var(--ink) }

/* صفحه‌ها: کشیدن افقی با scroll-snap */
#pp391 .pg391{ flex:1; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none }
#pp391 .pg391::-webkit-scrollbar{ display:none }
#pp391 .pp391{ flex:0 0 100%; min-width:0; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-align:start; scroll-snap-stop:always;
  padding:10px 16px calc(24px + env(safe-area-inset-bottom)) }

/* جست‌وجو */
#pp391 .q391{ display:flex; align-items:center; gap:8px; height:40px; margin:0 0 6px; padding:0 12px; border-radius:12px; background:#F3F4F6; color:#9CA3AF }
#pp391 .q391 svg{ flex:none; width:18px; height:18px }
#pp391 .q391 input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--ink) }
#pp391 .q391 input::placeholder{ color:#9CA3AF }
#pp391 .q391 input::-webkit-search-cancel-button{ -webkit-appearance:none }

/* ردیف: آواتار · نام و آیدی · دکمه */
#pp391 .r391{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 0; cursor:pointer }
#pp391 .r391[hidden]{ display:none }
#pp391 .a391{ width:52px; height:52px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#8DB4FF,#2F63D8); box-shadow:inset 0 0 0 1px rgba(31,41,55,.06) }
#pp391 .a391 img{ width:100%; height:100%; object-fit:cover; display:block }
#pp391 .a391 em{ display:grid; place-items:center; width:100%; height:100%; font-style:normal; font-size:20px; font-weight:900; color:#fff }
#pp391 .t391{ min-width:0; display:flex; flex-direction:column; gap:2px }
#pp391 .t391 b{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14.5px; font-weight:800; unicode-bidi:plaintext; text-align:start }
#pp391 .t391 small{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:600; color:var(--mute); text-align:start }
/* نام لاتین در صفحهٔ فارسی (plaintext) هم سمت شروع صفحه، هم‌لبه با آیدی */
#pp391[dir=rtl] .t391 b, #pp391[dir=rtl] .t391 small{ text-align:right }
#pp391[dir=ltr] .t391 b{ text-align:left }
#pp391 .b391{ min-width:96px; height:34px; padding:0 14px; border:0; border-radius:10px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; white-space:nowrap }
#pp391 .b391.p{ color:#fff; background:linear-gradient(135deg,#4A86FA,#2F63D8); box-shadow:0 6px 14px -8px rgba(47,99,216,.9) }
#pp391 .b391.s{ color:var(--ink); background:#F1F2F4 }
#pp391 .b391:active{ transform:scale(.96) }
#pp391 .b391:disabled{ opacity:.6 }

/* بارگذاری و خالی */
#pp391 .k391{ display:block; height:52px; margin:12px 0; border-radius:14px; background:linear-gradient(90deg,#F3F4F6,#F9FAFB,#F3F4F6) }
#pp391 .e391{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:56px 24px; text-align:center; color:var(--mute) }
#pp391 .e391 svg{ width:44px; height:44px; color:#C4C9D2 }
#pp391 .e391 b{ font-size:13.5px; font-weight:700; line-height:1.6 }

@media (max-width:340px){
  #pp391 .tb391 > button{ font-size:12.5px; gap:3px }
  #pp391 .b391{ min-width:84px; padding:0 10px; font-size:12px }
}