/* profile.css — صفحة الملف الشخصي بأسلوب TikTok (docs/LIVE_UI_SPEC_V7_PROFILE.md).
   طبقة مستقلّة تُحمَّل بعد shell.css: كلّ قواعدها محصورة داخل ‎.profile‎ فلا تتسرّب إلى أيّ شاشة أخرى.
   المنفَّذ هنا: §1 البنية العامّة · §2 الشريط العلوي. الأقسام 3–7 تُضاف كلٌّ في وقته. */

/* ================== §1 البنية العامّة ================== */

.profile {
  /* رموز المواصفة — مصدر واحد للألوان والمقاسات تستعمله كلّ الأقسام اللاحقة. */
  --pf-bg: #FFFFFF;      /* خلفية الصفحة */
  --pf-ink: #161823;     /* لون نصّ تيك توك — ليس أسود صافياً */
  --pf-line: #E3E3E4;    /* الفواصل والحدود */
  --pf-chip: #F1F1F2;    /* حبّات رماديّة: فقاعة الحالة، زرّ التعديل */
  --pf-cyan: #20D5EC;    /* زرّ المتابعة */
  --pf-red: #FE2C55;     /* شارات العدد */
  --pf-topbar-h: 52px;

  /* المواصفة تكتب ‎min-height:100dvh‎؛ هنا الملف يعيش داخل إطار ‎.phone‎ الذي ارتفاعه 100dvh
     أصلاً، و‎.screen‎ يحجز مساحة الشريط السفلي بحشوة سفليّة. فالمكافئ الصحيح ‎100%‎ —
     ‎100dvh‎ كانت ستضيف تمريراً زائداً بمقدار ‎--nav-h‎ في كلّ ملف. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--pf-bg);
  color: var(--pf-ink);
}

/* عقد البنية: مناطق §3 الرأس · §4 التبويبات · §6 الشبكة.
   تُعلَن الآن ليكون ترتيب المناطق وسلوك تمدّدها ثابتاً قبل تعبئتها في أقسامها. */
.profile > .pf-head,
.profile > .pf-tabs { flex: 0 0 auto; }
.profile > .pf-grid { flex: 1 1 auto; }

/* ‎.app-nav‎ (§7) = الشريط السفلي القائم ‎#tabbar‎ — خارج ‎.profile‎، يُعاد تصميمه في §7. */

/* جسر مؤقّت — يُحذف عند اكتمال §3/§4/§6.
   يستضيف تصميم الملف القديم داخل الغلاف الجديد ويعيد إليه خلفيّة التطبيق الداكنة،
   وإلّا لَظهر نصّ فاتح على خلفيّة بيضاء إلى أن تحلّ الأقسام التالية محلّه. */
.profile > .pf-legacy {
  flex: 1 1 auto;
  background: radial-gradient(130% 80% at 50% -10%, #3a1f7a 0%, var(--bg1) 42%, var(--bg0) 100%);
  color: var(--text);
}

/* ================== §2 الشريط العلوي ================== */

.pf-topbar {
  flex: 0 0 auto;
  height: var(--pf-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
  background: none;
}

/* مجموعة الأيقونات الثلاث (الجهة المقابلة لأيقونة «إضافة صديق») — فجوة 20px. */
.pf-topbar-grp {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pf-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pf-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pf-ico:active { opacity: .55; }

/* كلّ الأيقونات outline بسماكة 1.8 بلون ‎--pf-ink‎ (المواصفة §2). */
.pf-ico svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* سهم الرجوع يشير دائماً إلى جهة البداية — ينعكس مع اتّجاه الوثيقة. */
[dir="rtl"] .pf-ico.pf-back svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .pf-ico:active { opacity: 1; }
}

/* ================== §3 رأس الملف ================== */

.pf-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 0;
  text-align: center;
}

/* ---- §3ب فقاعة الحالة (اختياريّة) ---- */
.pf-status {
  position: relative;
  max-width: 78%;
  margin-bottom: 10px;
  padding: 8px 16px;
  border-radius: 18px;
  background: var(--pf-chip);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
/* ذيل مثلّث صغير أسفلها في المنتصف — تموضع فيزيائيّ فيصحّ في الاتّجاهين. */
.pf-status::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--pf-chip);
}

/* ---- §3أ الصورة + زرّ المتابعة ---- */
.pf-av {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}
.pf-av .avatar,
.profile .av-116 {
  width: 116px;
  height: 116px;
  font-size: 44px;
}
.pf-av .avatar {
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
.pf-av-self { cursor: pointer; }

/* دائرة 34px تطفو أسفل الصورة بمنتصفها — تختفي إن كان الزائر يتابع الحساب. */
.pf-follow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pf-cyan);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* ---- §3ج الاسم ---- */
.pf-name-row {
  position: relative;
  width: 100%;
  min-height: 34px;
  margin-top: 22px; /* يتجاوز نصف زرّ المتابعة الطافي (17px) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pf-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-ink);
  overflow-wrap: anywhere;
}
.pf-name .uname { font-weight: 700; }
.pf-caret {
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: rgba(22, 24, 35, .4);
  cursor: pointer;
}
/* زرّ التعديل: قلم داخل حبّة رماديّة 60×34 على الجهة المقابلة للاسم — لصاحب الملف فقط. */
.pf-edit {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--pf-chip);
  color: var(--pf-ink);
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
}
.pf-handle {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(22, 24, 35, .6);
}

/* حبّة الرتبة (ميزة Viora) — تحت ‎@username‎ مباشرةً بلون الرتبة.
   حبّة مضغوطة بخلفيّة شفّافة من لون الرتبة نفسه كي تبقى مقروءة على الأبيض. */
.pf-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pf-role-c) 45%, transparent);
  background: color-mix(in srgb, var(--pf-role-c) 12%, #fff);
  color: color-mix(in srgb, var(--pf-role-c) 78%, #000);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.pf-role-ic { font-size: 12px; line-height: 1; }
/* تراجع للمتصفّحات بلا ‎color-mix‎: لون الرتبة على خلفيّة رماديّة محايدة. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pf-role { background: var(--pf-chip); border-color: var(--pf-line); color: var(--pf-role-c); }
}

/* الإطار الزخرفيّ المُشترى يُرسم حول الصورة ولا يغيّر مقاسها (يبقى 116px). */
.pf-av .decor-frame { display: inline-block; line-height: 0; }
.pf-av .decor-frame-img,
.pf-av .decor-frame::before { pointer-events: none; }

/* ---- §3د صفّ الأرقام ---- */
.pf-stats {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.pf-stat b {
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-ink);
}
.pf-stat span {
  font-size: 13px;
  font-weight: 400;
  color: rgba(22, 24, 35, .6);
}
.pf-sep {
  flex: 0 0 1px;
  width: 1px;
  height: 26px;
  background: var(--pf-line);
}

/* ---- §3هـ النبذة ---- */
.pf-bio {
  max-width: 78%;
  margin: 12px auto 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--pf-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* تُقصّ إلى سطرين فقط حين تتجاوزهما فعلاً — وعندها يظهر ‎˅‎ بجانب الاسم. */
.pf-bio.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* سطر مستقلّ يظهر فقط أثناء البثّ ويفتح الغرفة. */
.pf-live {
  display: block;
  margin: 8px auto 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--pf-ink);
  cursor: pointer;
}
.pf-head-end { height: 12px; }

/* ================== §4 شريط التبويبات ================== */

.pf-tabs {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: stretch;
  border-bottom: 0.5px solid var(--pf-line);
}
.pf-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(22, 24, 35, .4);
  -webkit-tap-highlight-color: transparent;
}
.pf-tab svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-tab.active { color: var(--pf-ink); }
/* خطّ سفليّ 2px بعرض 32px تحت التبويب النشط. */
.pf-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--pf-ink);
}
/* ‎˅‎ صغيرة بجانب أيقونة الشبكة. */
.pf-tab-caret { font-size: 11px; line-height: 1; }

/* ---- ألواح التبويبات ---- */
.pf-panel { flex: 1 1 auto; }
.pf-panel[hidden],
.pf-legacy[hidden] { display: none; }

.pf-empty {
  padding: 48px 16px;
  text-align: center;
  font-size: 15px;
  color: rgba(22, 24, 35, .5);
}
.pf-empty-ic {
  display: block;
  font-size: 34px;
  margin-bottom: 10px;
  opacity: .55;
}