/* =============================================================================
   ui/social.css — feed + social profile, matched to the Android screens.
   Animation curves are the Compose ones:
     like     pop keyframes 0 → 1.25 (150ms) → 0.95 (300ms) → 1 (600ms)
     comment  tween 520ms FastOutSlowInEasing, scale 1 + .30·sin(πp)
     repost   tween 620ms, rotate 360°, scale 1 + .22·sin(πp)
     views    tween 420ms, scale 1 + .25·sin(πp)
   ========================================================================== */

/* ------------------------------------------------------------- post card --- */

.sx-post {
  background: var(--surface);
  border: 1px solid var(--outline-v);
  border-radius: var(--r-lg, 22px);
  padding: 14px 14px 8px;
  transition: background var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard);
}
.sx-post.tap { cursor: pointer; }
.sx-post.tap:active { transform: scale(.992); background: var(--surface-v); }

.sx-rp {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); margin: 0 0 8px 2px;
}
.sx-rp svg { width: 14px; height: 14px; }

.sx-row { display: flex; gap: 10px; align-items: flex-start; }
.sx-av { flex: none; cursor: pointer; }
.sx-body { flex: 1; min-width: 0; }

.sx-head { display: flex; align-items: center; gap: 6px; }
.sx-head b { font-size: 14.5px; cursor: pointer; }
.sx-time { font-size: 12px; color: var(--muted); }
.sx-sp { flex: 1; }

.sx-more {
  flex: none; width: 30px; height: 30px; border: 0; background: transparent;
  color: var(--muted); border-radius: var(--r-full); cursor: pointer;
  display: grid; place-items: center;
}
.sx-more:hover { background: var(--surface-v); color: var(--fg); }

.sx-replyto { font-size: 12px; color: var(--muted); margin: 4px 0 2px; }

.sx-text {
  margin: 6px 0 2px; font-size: 15px; line-height: 1.75;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ quote card --- */

.sx-quote {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--outline-v); border-radius: 14px;
  background: rgba(var(--on-surface-rgb) / .03);
}
.sx-quote-h { display: flex; align-items: center; gap: 8px; }
.sx-quote-h b { font-size: 13px; cursor: pointer; }
.sx-quote p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--on-surface-v); }

/* ---------------------------------------------------------------- media --- */

.sx-media {
  display: block; width: 100%; max-height: 320px; object-fit: cover;
  margin-top: 10px; border-radius: 16px; cursor: zoom-in;
  background: var(--surface-v);
}
.sx-video { margin-top: 10px; border-radius: 16px; overflow: hidden; background: #000; }
.sx-video video { display: block; width: 100%; max-height: 300px; }

.sx-music {
  margin-top: 10px; padding: 10px; border-radius: 16px;
  border: 1px solid var(--outline-v); background: var(--surface-v);
}
.sx-music-h { display: flex; align-items: center; gap: 10px; }
.sx-music-h img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.sx-music-i {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--primary-rgb) / .14); color: var(--primary);
}
.sx-music-h b { display: block; font-size: 13.5px; }
.sx-music-h span { font-size: 12px; color: var(--muted); }
.sx-music audio { width: 100%; margin-top: 8px; }

/* ----------------------------------------------------- achievement card --- */

.sx-ach {
  margin-top: 10px; padding: 12px 13px; border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--ac) 50%, transparent);
  background: color-mix(in srgb, var(--ac) 10%, transparent);
}
.sx-ach-h { display: flex; align-items: center; gap: 8px; }
.sx-ach-i {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; color: #fff; background: var(--ac);
}
.sx-ach-l { font-size: 13px; font-weight: 700; color: var(--ac); }
.sx-ach-s {
  margin-inline-start: auto; font-size: 13px; color: var(--ac);
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  padding: 2px 9px; border-radius: var(--r-full);
}
.sx-ach-v { margin-top: 8px; font-size: 19px; font-weight: 800; }
.sx-ach-b { margin-top: 4px; font-size: 13.5px; color: var(--on-surface-v); line-height: 1.7; }
.sx-ach-c { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.sx-cb-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-surface-v); }
.sx-cb-h b { font-weight: 700; }
.sx-cb-t {
  margin-top: 3px; height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--ac) 15%, transparent);
}
.sx-cb-t i { display: block; height: 100%; border-radius: 3px; background: var(--ac); }

/* --------------------------------------------------------- action strip --- */

.sx-acts {
  display: flex; align-items: center; gap: 2px;
  margin: 8px -6px 0; padding-top: 2px;
}
.sx-act {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); padding: 5px 8px; border-radius: var(--r-full);
  font: inherit; font-size: 12px;
  transition: color 280ms var(--e-standard), background var(--t-fast) var(--e-standard);
}
.sx-act:hover { background: var(--surface-v); }
.sx-ico { display: inline-flex; }
.sx-cnt { min-width: 8px; font-size: 12px; }

.sx-comment:hover { color: #38BDF8; }
.sx-repost:hover { color: #22C55E; }
.sx-repost.on { color: #22C55E; }

.sx-likewrap { display: inline-flex; align-items: center; gap: 0; padding: 0; }
.sx-heart {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  padding: 5px 6px 5px 8px; border-radius: var(--r-full);
  display: inline-flex; position: relative;
}
.sx-likers {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  font: inherit; font-size: 12px; padding: 5px 8px 5px 2px; border-radius: var(--r-full);
}
.sx-likewrap.on { color: #FF5B89; }
.sx-likewrap.on .sx-heart path { fill: #FF5B89; stroke: #FF5B89; }
.sx-heart:hover { color: #FF5B89; }

/* like: the Compose pop keyframes, plus the celebrate spark ring */
.sx-heart.pop .sx-ico { animation: sxPop 620ms var(--e-standard); }
@keyframes sxPop {
  0%   { transform: scale(1); }
  24%  { transform: scale(1.25); }
  48%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
.sx-sparks { position: absolute; inset: 0; pointer-events: none; }
.sx-sparks i {
  position: absolute; inset-inline-start: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px; border-radius: 50%;
  background: #FF5B89; opacity: 0;
}
.sx-heart.pop .sx-sparks i { animation: sxSpark 500ms linear; }
@keyframes sxSpark {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-15px) scale(1.1); }
}

/* comment: body pops, the three dots blink in sequence */
.sx-comment .sx-ico.pop { animation: sxCPop 540ms var(--e-standard); }
@keyframes sxCPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.30); }
}
.sx-comment .sx-ico.pop .d1 { animation: sxDot 540ms linear; }
.sx-comment .sx-ico.pop .d2 { animation: sxDot 540ms linear 60ms; }
.sx-comment .sx-ico.pop .d3 { animation: sxDot 540ms linear 120ms; }
@keyframes sxDot {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* repost: one full turn */
.sx-repost .sx-ico.spin { animation: sxSpin 640ms var(--e-standard); }
@keyframes sxSpin {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.22); }
  100% { transform: rotate(360deg) scale(1); }
}

/* views: a soft pulse */
.sx-views .sx-ico.pulse { animation: sxPulse 440ms var(--e-standard); }
@keyframes sxPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-heart.pop .sx-ico,
  .sx-heart.pop .sx-sparks i,
  .sx-comment .sx-ico.pop,
  .sx-repost .sx-ico.spin,
  .sx-views .sx-ico.pulse { animation: none !important; }
}

/* ----------------------------------------------------------- follow chip --- */

.sx-follow {
  flex: none; border: 1px solid var(--primary); background: var(--primary);
  color: var(--on-primary); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--r-full); cursor: pointer;
  transition: background var(--t-med) var(--e-standard), color var(--t-med) var(--e-standard);
}
.sx-follow.on { background: transparent; color: var(--primary); }
.sx-follow.sm { padding: 5px 11px; font-size: 12px; }
.sx-follow:active { transform: scale(.96); }

/* ---------------------------------------------------------- people rows --- */

.sx-prow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 6px; border: 0; background: transparent; cursor: pointer;
  border-radius: 16px; text-align: start; font: inherit; color: inherit;
}
.sx-prow:hover { background: var(--surface-v); }
.sx-pbody { flex: 1; min-width: 0; }
.sx-pbody b { display: block; font-size: 14px; }
.sx-pbody span { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------- composer --- */

.sx-cquote {
  margin-bottom: 10px; padding: 8px 11px; border-radius: 14px;
  background: var(--surface-v); font-size: 12.5px; color: var(--on-surface-v);
}
.sx-crow { display: flex; gap: 10px; align-items: flex-start; }
.sx-ctext {
  flex: 1; width: 100%; border: 1px solid var(--outline-v); background: var(--surface-v);
  color: var(--fg); border-radius: 18px; padding: 12px 14px; font: inherit;
  font-size: 15px; line-height: 1.8; resize: vertical; min-height: 96px;
}
.sx-ctext:focus { outline: none; border-color: var(--primary); }
.sx-cprev { position: relative; margin-top: 10px; }
.sx-cprev img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; }
.sx-cprev span { display: inline-block; padding: 8px 12px; border-radius: 14px; background: var(--surface-v); font-size: 13px; }
.sx-prev-x {
  position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px;
  border: 0; border-radius: var(--r-full); background: rgba(0,0,0,.55); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.sx-cbar { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--surface-v); overflow: hidden; }
.sx-cbar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 120ms linear; }
.sx-cfoot { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.sx-attach {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--outline-v);
  background: transparent; color: var(--on-surface-v); font: inherit; font-size: 12.5px;
  padding: 7px 11px; border-radius: var(--r-full); cursor: pointer;
}
.sx-attach:hover { background: var(--surface-v); color: var(--fg); }
.sx-count { font-size: 12px; color: var(--muted); }
.sx-count.over { color: #EF4444; font-weight: 700; }
.sx-send {
  border: 0; background: var(--primary); color: var(--on-primary); font: inherit;
  font-weight: 700; font-size: 13.5px; padding: 9px 20px; border-radius: var(--r-full); cursor: pointer;
}
.sx-send:active { transform: scale(.97); }

/* --------------------------------------------------------- banner picker --- */

.sx-banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sx-bopt {
  height: 54px; border: 0; border-radius: 16px; cursor: pointer;
  display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 800;
}

/* ============================================================ feed home === */

.fd { max-width: 620px; margin: 0 auto; position: relative; }
.fd-search { position: relative; margin-bottom: 10px; }
.fd-search input {
  width: 100%; border: 1px solid var(--outline-v); background: var(--surface-v);
  color: var(--fg); border-radius: 20px; padding: 12px 42px 12px 14px; font: inherit; font-size: 14px;
}
.fd-search input:focus { outline: none; border-color: var(--primary); }
.fd-search .fd-si {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 14px;
  color: var(--muted); pointer-events: none; display: inline-flex;
}
.fd-tabs { margin-bottom: 12px; }
.fd-list { display: flex; flex-direction: column; gap: 12px; }
.fd-fab {
  /* در mounted() به body منتقل می‌شود، پس هیچ والدی مکانش را عوض نمی‌کند. */
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-b) + 22px);
  inset-inline-start: 18px;
  z-index: 44; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 700;
  padding: 13px 20px; box-shadow: var(--sh-lg);
}
.fd-fab:active { transform: scale(.96); }
.fd-refresh {
  height: 0; overflow: hidden; display: grid; place-items: center;
  transition: height var(--t-med) var(--e-standard); color: var(--muted); font-size: 12px;
}
.fd-refresh.on { height: 34px; }

/* the internal Home → Detail → Profile transition (AnimatedContent) */
.fd-page { animation: fdIn 240ms var(--e-decel); }
@keyframes fdIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fd-page { animation: none; } }

.fd-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  border: 0; background: transparent; color: var(--on-surface-v); font: inherit;
  font-size: 13.5px; cursor: pointer; padding: 6px 8px; border-radius: var(--r-full);
}
.fd-back:hover { background: var(--surface-v); }
.fd-hr { height: 1px; background: var(--outline-v); margin: 12px 0; border: 0; }

/* ======================================================= social profile === */

.sp { max-width: 620px; margin: 0 auto; }
.sp-card {
  background: var(--surface); border: 1px solid var(--outline-v);
  border-radius: var(--r-lg, 22px); overflow: hidden;
}
.sp-banner { height: 110px; position: relative; }
.sp-bchip {
  position: absolute; inset-block-end: 8px; inset-inline-end: 10px;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: rgba(0,0,0,.42); color: #fff; font: inherit; font-size: 12px;
  padding: 6px 12px; backdrop-filter: blur(6px);
}
.sp-top { display: flex; align-items: flex-end; gap: 10px; padding: 0 14px; margin-top: -46px; }
.sp-av { border-radius: var(--r-full); box-shadow: 0 0 0 4px var(--surface); }
.sp-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; padding-bottom: 6px; }
.sp-dm {
  border: 1px solid var(--outline); background: transparent; color: var(--fg);
  font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: var(--r-full); cursor: pointer;
}
.sp-dm:hover { background: var(--surface-v); }
.sp-body { padding: 10px 16px 16px; }
.sp-name { display: flex; align-items: center; gap: 8px; }
.sp-name h1 { font-size: 19px; margin: 0; }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.sp-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sp-status { font-size: 14px; margin-top: 8px; line-height: 1.7; }
.sp-counts { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.sp-cnt {
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  padding: 2px 0; font-size: 13px; color: var(--muted);
}
.sp-cnt b { color: var(--fg); font-size: 14px; margin-inline-end: 4px; }
.sp-cnt:hover b { text-decoration: underline; }
.sp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 14px; padding: 12px; border-radius: 18px;
  border: 1px solid var(--outline-v); background: var(--surface-v);
}
.sp-stat { text-align: center; }
.sp-stat b { display: block; font-size: 17px; font-weight: 800; }
.sp-stat span { font-size: 11.5px; color: var(--muted); }
.sp-lock { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }
.sp-posts { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* --------------------------------------------- desktop / tablet comfort --- */

@media (min-width: 900px) {
  .fd, .sp { max-width: 640px; }
  .fd-fab { bottom: 24px; inset-inline-start: calc(50% - 320px - 78px); }
}

/* ============================================================================
   feed home — تکمیل مطابق FeedHome/PostDetailScreen در FeedScreen.kt
   در اندروید فید یک LazyColumn تخت با HorizontalDivider است، نه کارت‌های جدا؛
   پس درون فید، کارت پست بدون حاشیه و رادیوس رندر می‌شود.
   ========================================================================= */

.fd-top {
  position: sticky; top: 0; z-index: 20;
  padding: 6px 0 8px;
  background: var(--bg);
}
.fd-search { margin: 0 0 10px; }
.fd-search input { padding-inline: 42px 42px; }
.fd-sx {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 10px;
  width: 28px; height: 28px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.fd-sx:hover { background: var(--surface); color: var(--fg); }

/* لیست تخت + جداکننده مویی (HorizontalDivider outlineVariant ۰.۶) */
.fd-list { gap: 0; }
.fd-list .sx-post {
  background: transparent; border: 0; border-radius: 0;
  padding: 10px 4px 6px;
}
.fd-list .sx-post.tap:active { background: var(--surface-v); border-radius: 14px; }
.fd-div { height: 1px; background: var(--outline-v); opacity: .6; }

.fd-sect {
  padding: 10px 4px 6px; font-size: 13.5px; font-weight: 700;
}

/* ErrorState — ایکون شناور + دکمهٔ «تلاش دوباره» */
.fd-err { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 24px; }
.fd-err svg {
  color: var(--muted); background: var(--surface-v);
  width: 74px; height: 74px; padding: 20px; border-radius: var(--r-full);
  animation: fdFloat 1600ms var(--e-standard) infinite alternate;
}
.fd-err p { margin: 0; text-align: center; color: var(--on-surface-v); font-size: 14.5px; }
@keyframes fdFloat { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .fd-err svg { animation: none; } }

.fd-refresh svg { animation: fdSpin 900ms linear infinite; }
@keyframes fdSpin { to { transform: rotate(360deg); } }

/* هدر صفحهٔ پست (Surface shadowElevation 2dp) */
.fd-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  margin: 0 -4px 4px; padding: 8px 6px;
  background: var(--surface); box-shadow: 0 1px 0 var(--outline-v);
}
.fd-bar b { font-size: 15.5px; }
.fd-back {
  width: 38px; height: 38px; margin: 0; padding: 0;
  display: grid; place-items: center; color: var(--fg);
}

/* ردیف «پاسخت رو بنویس…» */
.fd-reply {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 14px 4px; text-align: start; color: var(--muted);
}
.fd-reply:hover { background: var(--surface-v); }
.fd-reply span { font-size: 14px; }

/* ============================================================================
   social profile — بازنویسی مطابق SocialProfileScreen (FeedScreen.kt ۷۶۵–۹۲۲)
   در اندروید پروفایل کارت جدا ندارد: بنر تمام‌عرض، محتوای مستقیم روی
   پس‌زمینه، و لیست تخت پست‌ها پایین یک divider.
   ========================================================================= */

.sp-card { background: none; border: 0; border-radius: 0; }

.sp-banner {
  height: 110px; position: relative;
  margin-inline: -4px;
}

/* TopStart در RTL = بالا‑راست ؛ Black.copy(alpha = .35f) */
.sp-bchip, .sp-bmore {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  inset-block-end: auto; inset-inline-end: auto;
  border: 0; cursor: pointer; font: inherit; color: #fff;
  background: rgba(0, 0, 0, .35); border-radius: var(--r-full);
  backdrop-filter: blur(4px);
  transition: background 160ms var(--e-standard), transform 160ms var(--e-standard);
}
.sp-bchip { font-size: 11.5px; font-weight: 600; padding: 5px 10px; }
.sp-bmore { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; }
.sp-bchip:active, .sp-bmore:active { transform: scale(.94); }
.sp-bchip:hover, .sp-bmore:hover { background: rgba(0, 0, 0, .5); }

.sp-head { padding-inline: 12px; }

/* Row(translationY = -46f) */
.sp-top {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 0; margin-top: 0; transform: translateY(-46px);
}
.sp-av {
  display: inline-flex; padding: 4px;
  background: var(--surface); border-radius: var(--r-full);
}
.sp-actions {
  display: flex; align-items: center; gap: 8px;
  margin-inline-start: auto; padding-bottom: 4px;
}
/* OutlinedButton «پیام 💬» */
.sp-dm {
  border: 1px solid var(--outline); background: transparent; color: var(--primary);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-full); cursor: pointer;
  transition: background 160ms var(--e-standard), transform 160ms var(--e-standard);
}
.sp-dm:hover { background: var(--surface-v); }
.sp-dm:active { transform: scale(.96); }

/* Column(translationY = -34f) */
.sp-body { padding: 0; transform: translateY(-34px); }
.sp-name {
  display: block; margin: 0;
  font-size: 21px; font-weight: 800; line-height: 1.5;
}
.sp-status {
  margin-top: 0; font-size: 14px; line-height: 1.7;
  color: var(--on-surface-v, var(--muted));
}
.sp-badge {
  display: inline-block; margin-top: 4px;
  background: var(--surface-v); border-radius: var(--r-full);
  padding: 3px 8px; font-size: 11.5px;
}

/* CountLabel ×۳ — Arrangement.spacedBy(16.dp) */
.sp-counts { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.sp-cnt-flat { cursor: default; }
.sp-cnt-flat:hover b { text-decoration: none; }

/* Surface(RoundedCornerShape(18.dp), surfaceVariant @ .5) — SpaceEvenly */
.sp-stats {
  display: flex; justify-content: space-evenly; gap: 10px;
  margin-top: 12px; padding: 12px 0; border: 0; border-radius: 18px;
  background: color-mix(in srgb, var(--surface-v) 50%, transparent);
}
.sp-stat b { color: var(--primary); font-size: 17px; font-weight: 800; }
.sp-stat span { color: var(--on-surface-v, var(--muted)); font-size: 11.5px; }

.sp-lock { margin-top: 6px; text-align: start; font-size: 11.5px; }

/* HorizontalDivider(outlineVariant) بین هدر و پست‌ها */
.sp-sep { opacity: 1; margin-top: -26px; margin-inline: -4px; }
.sp-posts { display: block; margin: 0; }


/* ============ profile identity: handle, bio, meta chips (added v26) ======= */

.sp-handle {
  font-size: 13px;
  opacity: .62;
  margin-top: 2px;
  direction: ltr;
  text-align: right;
}

.sp-bio {
  font-size: 14px;
  line-height: 1.85;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.sp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: rgba(var(--primary-rgb) / .10);
  color: rgb(var(--primary-rgb));
  border: 1px solid rgba(var(--primary-rgb) / .20);
}

.sp-chip-lock {
  background: rgba(127, 127, 127, .12);
  color: inherit;
  opacity: .72;
  border-color: rgba(127, 127, 127, .20);
}


/* ==================== edit profile form (.ep-, added v26) ================= */

.ep { max-width: 620px; margin: 0 auto; padding-bottom: 24px; }

.ep-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 16px;
  margin: 12px;
  border: 1px solid rgba(127, 127, 127, .12);
}

.ep-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

.ep-title svg { opacity: .7; }

.ep-row { margin-bottom: 16px; }

.ep-row > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  opacity: .8;
  margin-bottom: 7px;
}

.ep-in {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 13px;
  font: inherit;
  font-size: 14.5px;
  color: inherit;
  background: rgba(127, 127, 127, .08);
  border: 1.5px solid transparent;
  transition: border-color .18s ease, background .18s ease;
}

.ep-in:focus {
  outline: none;
  background: transparent;
  border-color: rgba(var(--primary-rgb) / .55);
}

.ep-in:disabled { opacity: .55; }

.ep-area { resize: vertical; line-height: 1.8; min-height: 84px; }

.ep-code { text-align: center; letter-spacing: 6px; font-size: 19px; }

.ep-hint { display: block; font-size: 11.5px; opacity: .6; margin-top: 6px; line-height: 1.7; }

.ep-warn { color: #FB923C; opacity: .95; }

.ep-count { display: block; font-size: 11.5px; opacity: .55; margin-top: 6px; text-align: left; }

.ep-cur {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 0 2px;
  letter-spacing: 1px;
}

.ep-stage { margin-bottom: 12px; }

.ep-stage > small {
  display: block;
  font-size: 11.5px;
  opacity: .55;
  margin-bottom: 7px;
}

.ep-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ep-chip {
  padding: 9px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  background: rgba(127, 127, 127, .09);
  border: 1.5px solid transparent;
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
}

.ep-chip:active { transform: scale(.94); }

.ep-chip.on {
  background: rgba(var(--primary-rgb) / .14);
  border-color: rgba(var(--primary-rgb) / .55);
  color: rgb(var(--primary-rgb));
}

.ep-hide { display: none; }

.ep-save {
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  border: none;
  border-radius: 14px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  color: #06110C;
  background: rgb(var(--primary-rgb));
  transition: transform .14s ease, opacity .18s ease;
}

.ep-save:active { transform: scale(.985); }

.ep-ghost {
  margin-top: 8px;
  color: inherit;
  background: rgba(127, 127, 127, .10);
}

/* overflow guards */
.sp-meta, .sp-chip { min-width: 0; max-width: 100%; }
.sp-bio, .sp-handle, .po-text { overflow-wrap: anywhere; word-break: break-word; }

/* ============ edit profile — modern redesign (overrides v26 block) ======== */
.ep { max-width: 640px; margin: 0 auto; padding-bottom: 40px; }
.ep .fd-bar { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--surface) 78%, transparent); }
@keyframes epRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes epShine { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
.ep-card {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 18px 16px 16px; margin: 14px 0;
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface-v) 82%, transparent), var(--surface));
  border: 1px solid var(--outline-v);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.55);
  animation: epRise .46s var(--e-decel, cubic-bezier(.16,1,.3,1)) both;
}
.ep-card:nth-of-type(2) { animation-delay: .07s; }
.ep-card:nth-of-type(3) { animation-delay: .14s; }
.ep-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb)), transparent); opacity: .5; }
.ep-title { display: flex; align-items: center; gap: 9px; font-size: .98rem; font-weight: 800; margin-bottom: 14px; }
.ep-title svg { opacity: 1; padding: 7px; border-radius: 12px; background: rgba(var(--primary-rgb) / .13); color: rgb(var(--primary-rgb)); box-sizing: content-box; }
.ep-row { margin-bottom: 18px; min-width: 0; }
.ep-row > label { display: block; font-size: .8rem; font-weight: 700; opacity: .8; margin-bottom: 7px; }
.ep-in {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 13px 14px; border-radius: 15px; font: inherit; color: inherit;
  background: color-mix(in srgb, var(--surface-v) 70%, transparent);
  border: 1.5px solid var(--outline-v); outline: 0;
  transition: border-color .18s ease, box-shadow .22s ease, background .18s ease, transform .18s ease;
}
.ep-in::placeholder { opacity: .45; }
.ep-in:hover:not(:disabled) { border-color: color-mix(in srgb, rgb(var(--primary-rgb)) 40%, var(--outline-v)); }
.ep-in:focus {
  border-color: rgb(var(--primary-rgb));
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb) / .16);
  background: var(--surface);
}
.ep-area { resize: vertical; line-height: 1.85; min-height: 96px; }
.ep-code { text-align: center; letter-spacing: 8px; font-size: 20px; font-weight: 800; }
.ep-count { display: block; font-size: 11.5px; opacity: .6; margin-top: 7px; text-align: left; font-variant-numeric: tabular-nums; }
.ep-cur { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 12px; border-radius: 14px; background: rgba(var(--primary-rgb) / .08); font-size: .85rem; }
.ep-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ep-chip {
  position: relative; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; color: inherit;
  background: var(--surface); border: 1.5px solid var(--outline-v);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), border-color .18s, background .18s, box-shadow .22s;
}
.ep-chip:hover { border-color: color-mix(in srgb, rgb(var(--primary-rgb)) 45%, var(--outline-v)); transform: translateY(-1px); }
.ep-chip:active { transform: scale(.93); }
.ep-chip.on {
  border-color: transparent; color: var(--on-primary-c, #06110C);
  background: linear-gradient(135deg, rgb(var(--primary-rgb)), color-mix(in srgb, rgb(var(--primary-rgb)) 65%, #38BDF8));
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb) / .75);
}
.ep-stage { margin-bottom: 14px; }
.ep-stage > small { display: block; font-size: .74rem; font-weight: 800; opacity: .55; margin-bottom: 8px; }
.ep-save, .ep-ghost {
  position: relative; overflow: hidden; width: 100%; margin-top: 4px;
  padding: 14px; border-radius: 16px; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 800;
  transition: transform .16s ease, box-shadow .24s ease, filter .18s ease;
}
.ep-save {
  color: var(--on-primary-c, #06110C);
  background: linear-gradient(135deg, rgb(var(--primary-rgb)), color-mix(in srgb, rgb(var(--primary-rgb)) 60%, #38BDF8));
  box-shadow: 0 12px 26px -14px rgba(var(--primary-rgb) / .8);
}
.ep-save::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
}
.ep-save:hover::after { animation: epShine .85s ease forwards; }
.ep-save:active { transform: scale(.98); filter: brightness(.97); }
.ep-save:disabled { opacity: .6; box-shadow: none; cursor: default; }
.ep-ghost { background: var(--surface-v); color: inherit; border: 1.5px solid var(--outline-v); }
.ep-ghost:active { transform: scale(.98); }
.ep-hint { display: block; font-size: 11.5px; opacity: .62; margin-top: 7px; line-height: 1.8; overflow-wrap: anywhere; }
.ep-warn { color: #FB923C; opacity: .95; }
.ep-hide { display: none; }
@media (prefers-reduced-motion: reduce) { .ep-card { animation: none; } .ep-save:hover::after { animation: none; } }