/* ============================================================================
 *  آرایه‌های خریدنی — حباب چت و تم پروفایل
 * ============================================================================
 *
 *  این فایل روی shop.codpedia.ir می‌نشیند ولی هم فروشگاه و هم خودِ سایتِ وب
 *  از همین یک نسخه می‌خوانند. دلیلش مهم است: هر وقت یک حباب یا تم تازه
 *  اضافه شود، فقط همین فایل عوض می‌شود و لازم نیست به هیچ فایلی در پوشه‌ی
 *  web دست بزنیم.
 *
 *  ---------------------------------------------------------------------------
 *   قانونِ سرعت
 *  ---------------------------------------------------------------------------
 *  یک چتِ شلوغ می‌تواند ۲۰۰ حباب هم‌زمان روی صفحه داشته باشد، پس:
 *    • هیچ backdrop-filter و هیچ box-shadow بزرگی روی خودِ حباب نیست
 *      (هر دو روی موبایل گران‌اند و باعث لگ اسکرول می‌شوند).
 *    • نقش‌ها و قاب‌ها همه SVG هستند که به شکل data-URI داخل background
 *      یا border-image می‌نشینند — یعنی صفر درخواستِ شبکه و صفر گرهِ DOM
 *      اضافه.
 *    • حرکت فقط روی transform/opacity است و فقط روی سه حبابِ ویژه؛
 *      بقیه کاملاً ساکن‌اند.
 *    • prefers-reduced-motion همه‌شان را خاموش می‌کند.
 *
 *  کلیدها با bb- شروع می‌شوند (حباب) و pft- (تمِ پروفایل) تا با هیچ کلاسِ
 *  موجودی در maxweb.css تداخل نکنند.
 * ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   بخش ۱ — حباب‌های چت
   ══════════════════════════════════════════════════════════════════════════
   ساختارِ موجودِ سایت که به آن سوار می‌شویم:
       .rm-chat-msg > .rm-chat-row > .rm-chat-bubble-col > .rm-chat-bubble
   ما فقط یک کلاسِ bb-* به خودِ .rm-chat-bubble اضافه می‌کنیم. هیچ عنصرِ
   تازه‌ای ساخته نمی‌شود؛ همه‌ی تزئین‌ها با ::before/::after است.
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   پایه‌ی مشترک
   ──────────────────────────────────────────────────────────────────────────
   انتخابگرها عمداً سه‌کلاسی‌اند (.rm-chat-msg .rm-chat-bubble.bb-*) تا با
   قانونِ پیامِ ادمین در maxweb.css هم‌وزن شوند؛ چون این فایل بعد از آن لود
   می‌شود، در تساوی برنده است و طرحِ خریداری‌شده کاملاً جایِ حبابِ پیش‌فرض
   را می‌گیرد — نه اینکه رویش بنشیند.

   قانونِ رنگ: هیچ حبابی نباید هم‌رنگِ پس‌زمینه‌ی تیره‌ی چت باشد، وگرنه فقط
   یک لکه‌ی محو می‌شود. هر طرح یا پرمایه و روشن‌تر از زمینه است، یا اصلاً
   روشن با متنِ تیره. رنگِ متن هم برای هر کدام جدا انتخاب شده تا خوانا بماند.
   ────────────────────────────────────────────────────────────────────────── */

.rm-chat-msg .rm-chat-bubble[class*="bb-"] {
  position: relative;
  isolation: isolate;
  padding: 8px 13px;
  border-radius: 14px 4px 14px 14px;
  font-weight: 600;
  background-clip: padding-box;
  box-shadow: 0 3px 16px -5px var(--bb-glow, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
.rm-chat-msg .rm-chat-bubble[class*="bb-"]::before,
.rm-chat-msg .rm-chat-bubble[class*="bb-"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* ── ۱ ── طلای ناب ── برنجِ روشن، متنِ کرم ─────────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bgold {
  background: linear-gradient(160deg, #8a6414 0%, #503808 55%, #6d4f10 100%);
  color: #fff6dd;
  border: 1.5px solid #e8c25a;
  --bb-glow: rgba(232, 194, 90, .75);
}
.rm-chat-msg .rm-chat-bubble.bb-_bgold::before {
  inset: -3px;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23ffe9a8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1 12V5a4 4 0 0 1 4-4h7'/%3E%3C/g%3E%3Ccircle cx='5.2' cy='5.2' r='1.8' fill='%23ffe9a8'/%3E%3C/svg%3E") left top no-repeat,
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23ffe9a8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M25 12V5a4 4 0 0 0-4-4h-7'/%3E%3C/g%3E%3Ccircle cx='20.8' cy='5.2' r='1.8' fill='%23ffe9a8'/%3E%3C/svg%3E") right top no-repeat,
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23ffe9a8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M1 14v7a4 4 0 0 0 4 4h7'/%3E%3C/g%3E%3Ccircle cx='5.2' cy='20.8' r='1.8' fill='%23ffe9a8'/%3E%3C/svg%3E") left bottom no-repeat,
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23ffe9a8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M25 14v7a4 4 0 0 1-4 4h-7'/%3E%3C/g%3E%3Ccircle cx='20.8' cy='20.8' r='1.8' fill='%23ffe9a8'/%3E%3C/svg%3E") right bottom no-repeat;
}

/* ── ۲ ── نئون ── ارغوانیِ پرمایه با لبه‌ی فیروزه‌ای ──────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bneon {
  background: linear-gradient(150deg, #a01585 0%, #5a1470 52%, #2b1050 100%);
  color: #ffffff;
  border: 1.5px solid #33f0ff;
  border-radius: 4px;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  text-shadow: 0 0 8px rgba(51, 240, 255, .8);
  --bb-glow: rgba(255, 47, 208, .9);
}
.rm-chat-msg .rm-chat-bubble.bb-_bneon::before {
  inset: 3px;
  border: 1px solid rgba(255, 130, 235, .85);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ── ۳ ── آتش ── نارنجیِ گداخته، متنِ کرم ─────────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bfire {
  background: linear-gradient(165deg, #e0590a 0%, #a32c04 48%, #5c1502 100%);
  color: #fff4e2;
  border: 1.5px solid #ffb02e;
  border-top: none;
  border-radius: 4px 4px 14px 14px;
  padding-top: 10px;
  --bb-glow: rgba(255, 106, 18, .95);
}
.rm-chat-msg .rm-chat-bubble.bb-_bfire::before {
  left: -1.5px; right: -1.5px; top: -7px; height: 9px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='9' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23e0590a'/%3E%3Cstop offset='.55' stop-color='%23ffb02e'/%3E%3Cstop offset='1' stop-color='%23fff3c4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M0 9h40V6.4c-2.6 0-3.4-4.2-5.6-4.2S31 6 28.4 6s-3.2-6-5.4-6-2.9 5.6-5.2 5.6S14.6 1 12.4 1 9.6 6.2 7 6.2 3.4 2.6 0 4.6z'/%3E%3C/svg%3E") repeat-x bottom / 40px 9px;
  animation: bbFireIdle 2.8s ease-in-out infinite;
}
@keyframes bbFireIdle { 0%, 100% { background-position-x: 0 } 50% { background-position-x: 20px } }

/* ── ۴ ── یخ ── حبابِ روشن با متنِ تیره؛ بیشترین کانتراست روی زمینه‌ی تیره */
.rm-chat-msg .rm-chat-bubble.bb-_bice {
  background: linear-gradient(150deg, #ffffff 0%, #c5e9fa 42%, #8dc4e2 100%);
  color: #0a2a3c;
  border: 1.5px solid #ffffff;
  border-radius: 4px;
  clip-path: polygon(0 7px, 7px 0, calc(100% - 11px) 0, 100% 9px, 100% calc(100% - 6px), calc(100% - 8px) 100%, 9px 100%, 0 calc(100% - 10px));
  --bb-glow: rgba(140, 220, 255, .95);
}
.rm-chat-msg .rm-chat-bubble.bb-_bice::before {
  inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='40'%3E%3Cg fill='none' stroke='%232f7ea3' stroke-opacity='.4' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M6 2l7 9-4 7M62 4l-8 7 5 8M20 38l6-8-3-6M48 36l-7-9 4-6'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .7;
}

/* ── ۵ ── زهر ── سبزِ سمیِ پرمایه ─────────────────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_btoxic {
  background: linear-gradient(160deg, #4aa312 0%, #2a6b0c 52%, #16400a 100%);
  color: #f2ffe0;
  border: 1.5px solid #a5f455;
  border-bottom: none;
  border-radius: 14px 4px 4px 4px;
  padding-bottom: 11px;
  --bb-glow: rgba(125, 255, 46, .85);
}
.rm-chat-msg .rm-chat-bubble.bb-_btoxic::before {
  left: -1.5px; right: -1.5px; bottom: -9px; height: 11px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='11'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a5f455'/%3E%3Cstop offset='1' stop-color='%234aa312'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23d)' d='M0 0h58v1.6H0z'/%3E%3Cg fill='url(%23d)'%3E%3Cpath d='M8 1c1.5 0 1.9 4.3 0 4.3S6.5 1 8 1z'/%3E%3Ccircle cx='8' cy='6' r='1.7'/%3E%3Cpath d='M27 1c1.1 0 1.4 2.4 0 2.4S25.9 1 27 1z'/%3E%3Ccircle cx='27' cy='4' r='1.2'/%3E%3Cpath d='M45 1c1.7 0 2.1 5.6 0 5.6S43.3 1 45 1z'/%3E%3Ccircle cx='45' cy='7.4' r='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x top / 58px 11px;
}

/* ── ۶ ── مدار ── فیروزه‌ای تیره با نقشِ برد ──────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bcircuit {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%2366f7ff' stroke-opacity='.45' stroke-width='1'%3E%3Cpath d='M0 14h14l6 6h16M56 40H42l-6-6H20M14 0v10l8 8M42 56V46l-8-8'/%3E%3C/g%3E%3Cg fill='%2366f7ff' fill-opacity='.75'%3E%3Ccircle cx='14' cy='14' r='1.9'/%3E%3Ccircle cx='42' cy='40' r='1.9'/%3E%3Ccircle cx='36' cy='20' r='1.4'/%3E%3Ccircle cx='20' cy='34' r='1.4'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #0f5566 0%, #0a3542 55%, #062028 100%);
  color: #e6feff;
  border: 1.5px solid #3ee0f0;
  border-radius: 6px;
  --bb-glow: rgba(0, 220, 255, .8);
}
.rm-chat-msg .rm-chat-bubble.bb-_bcircuit::before {
  inset: 3.5px;
  border-radius: 3px;
  border: 1px dashed rgba(102, 247, 255, .4);
}

/* ── ۷ ── خون ── قرمزِ عمیق با لبه‌ی پاره ─────────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bblood {
  background: linear-gradient(165deg, #b00c28 0%, #6d0517 50%, #3a020c 100%);
  color: #ffeaee;
  border: 1.5px solid #ff4d68;
  border-radius: 4px;
  padding-bottom: 15px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 88%, 78% 100%, 64% 86%, 50% 100%, 36% 87%, 22% 100%, 10% 88%, 0 99%);
  --bb-glow: rgba(224, 16, 48, .9);
}
.rm-chat-msg .rm-chat-bubble.bb-_bblood::before {
  inset: 0 0 auto 0; height: 2.5px;
  background: linear-gradient(90deg, transparent, #ff4d68, transparent);
}

/* ── ۸ ── کهکشان ── بنفشِ ستاره‌دار ───────────────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bcosmic {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='12' cy='10' r='1.1'/%3E%3Ccircle cx='46' cy='6' r='.8'/%3E%3Ccircle cx='74' cy='16' r='1'/%3E%3Ccircle cx='26' cy='34' r='.7'/%3E%3Ccircle cx='62' cy='42' r='1.1'/%3E%3Ccircle cx='86' cy='52' r='.8'/%3E%3Ccircle cx='8' cy='50' r='.9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(90% 130% at 18% 0%, #9b5cff 0%, transparent 62%),
    radial-gradient(80% 110% at 100% 100%, #2f9dff 0%, transparent 58%),
    linear-gradient(160deg, #4a2aa8 0%, #24135e 100%);
  color: #f6f1ff;
  border: 1.5px solid #c9a8ff;
  border-radius: 16px 4px 16px 16px;
  --bb-glow: rgba(160, 107, 255, .9);
}

/* ── ۹ ── هولوگرام ── روشن و شیشه‌ای با متنِ تیره ─────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bholo {
  background:
    repeating-linear-gradient(0deg, rgba(0, 40, 60, .10) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, #b8f4ff 0%, #ffd6f6 38%, #cbfbe4 70%, #b8f4ff 100%);
  background-size: auto, 220% 100%;
  color: #0d2b38;
  border: 1.5px solid #ffffff;
  border-radius: 4px;
  animation: bbHolo 5.5s linear infinite;
  --bb-glow: rgba(120, 235, 255, .9);
}
@keyframes bbHolo { 0% { background-position: 0 0, 0% 50% } 100% { background-position: 0 0, 200% 50% } }

/* ── ۱۰ ── کربن ── گرافیتِ روشن با دوختِ قرمز ─────────────────────────── */
.rm-chat-msg .rm-chat-bubble.bb-_bcarbon {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cg fill='%23ffffff' fill-opacity='.13'%3E%3Cpath d='M0 0h5v5H0zM5 5h5v5H5z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='.26'%3E%3Cpath d='M5 0h5v5H5zM0 5h5v5H0z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #4c545e 0%, #2a3039 60%, #1a1e24 100%);
  color: #ffffff;
  border: 1.5px solid #7d8794;
  border-radius: 6px;
  padding-bottom: 11px;
  --bb-glow: rgba(224, 67, 76, .6);
}
.rm-chat-msg .rm-chat-bubble.bb-_bcarbon::before {
  inset: auto 8px 4px 8px; height: 2px;
  background: repeating-linear-gradient(90deg, #ff5560 0 6px, transparent 6px 11px);
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   بخش ۲ — تم‌های پروفایل
   ══════════════════════════════════════════════════════════════════════════
   کارتِ پروفایل (.pf-card) ساختارش دست‌نخورده می‌ماند — همان کاور، همان
   آواتار، همان بج‌ها. فقط رنگ، قاب و بافت عوض می‌شود. برای همین همه چیز
   با چند متغیرِ CSS اداره می‌شود و هر تم فقط همان‌ها را بازنویسی می‌کند.
   ────────────────────────────────────────────────────────────────────────── */

.pf-card[class*="pft-"] {
  border-color: var(--pt-line, rgba(255, 201, 15, .35)) !important;
  background: var(--pt-bg, linear-gradient(165deg, rgba(28, 22, 10, .98), rgba(12, 10, 6, .99))) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px var(--pt-halo, rgba(255, 201, 15, .16)) !important;
}
.pf-card[class*="pft-"] .pf-cover {
  background: var(--pt-cover) !important;
  /* بدونِ این، نوارِ رنگیِ زیرِ کاور (::before با z-index: 3) از کاور بیرون
     می‌زند و درست از وسطِ آواتار رد می‌شود — همان خطی که روی عکسِ پروفایل
     دیده می‌شد. isolation کاور را به یک لایه‌ی مستقل تبدیل می‌کند تا
     فرزندانش نتوانند بالاتر از خودش بیایند. */
  isolation: isolate;
}
/* آواتار باید بالای کاور بنشیند. فقط ترتیبِ لایه‌ها را می‌گوییم و به
   پس‌زمینه‌اش دست نمی‌زنیم، چون قابِ خریداری‌شده همان‌جا می‌نشیند. */
.pf-card[class*="pft-"] .pf-avatar-wrap { position: relative; z-index: 4 }
/* آواتار عمداً دست‌نخورده می‌ماند.
   سایت وقتی قابی روی آواتار نشسته باشد، حلقه‌ی طلاییِ پیش‌فرض را خودش
   برمی‌دارد (.pf-avatar-wrap.af{background:none}). اگر تم دوباره روی همان
   عنصر پس‌زمینه بگذارد، دقیقاً روی قابِ خریداری‌شده می‌نشیند و خرابش
   می‌کند. پس تم فقط کارت را رنگ می‌کند: کاور، قاب، متن و بج‌ها.
   قابِ آواتار کالای جداگانه‌ای است و صاحبِ خودش را دارد. */
.pf-card[class*="pft-"] .pf-username { color: var(--pt-name) !important }
.pf-card[class*="pft-"] .pf-uid { color: var(--pt-muted) !important }
.pf-card[class*="pft-"] .pf-bio {
  color: var(--pt-name) !important;
  background: var(--pt-soft) !important;
  border-color: var(--pt-line) !important;
}
.pf-card[class*="pft-"] .pf-close {
  background: var(--pt-soft) !important;
  border-color: var(--pt-line) !important;
  color: var(--pt-name) !important;
}
/* هاله‌ی رنگیِ گوشه‌ها + نوارِ باریکِ امضا زیرِ کاور — هر دو در یک
   pseudo-element (::before).
   دلیلِ مهم: کاورِ پیش‌فرضِ سایت خودش یک انیمیشنِ «برقِ عبوری» دارد که از
   ::after همینِ عنصر استفاده می‌کند (قانونِ .pf-cover::after در
   maxweb.css). اگر تم هم روی همان ::after می‌نوشت — که نسخه‌ی قبلی همین
   فایل دقیقاً همین اشتباه را داشت — قوانینِ دوتا فایل با هم قاطی
   می‌شدند: پس‌زمینه از تمِ ما، ولی transform/animation همچنان از
   maxweb.css، و نتیجه یک مستطیلِ هاله‌ایِ کامل بود که به‌جای برقِ نازکِ
   مورّب، کجومعوج سر می‌خورد. برای همین جلوه‌ی خودمان را کاملاً روی
   ::before می‌بریم تا ::after دست‌نخورده بماند و همان برقِ اصلیِ سایت،
   دقیقاً مثلِ تمِ پیش‌فرض، روی هر تمِ خریداری‌شده هم درست کار کند. */
.pf-card[class*="pft-"] .pf-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--pt-accent) 0 3px, transparent 3px 100%),
    radial-gradient(70% 120% at 12% 100%, var(--pt-halo), transparent 62%),
    radial-gradient(60% 110% at 88% 0%, var(--pt-halo), transparent 60%);
  box-shadow: inset 0 -10px 16px -8px var(--pt-halo);
  z-index: 3;
  pointer-events: none;
}
.pf-card[class*="pft-"] .pf-username {
  text-shadow: 0 0 16px var(--pt-halo);
}

/* متغیرها روی خودِ کلاسِ تم تعریف می‌شوند تا هم کارتِ پروفایل و هم
   پیش‌نمایشِ کوچکِ فروشگاه/پنل از یک منبع رنگ بگیرند. */

/* ── ۱ ── ابسیدین ── شیشه‌ی سیاه و خطوطِ پلاتین */
.pft-_pobsidian {
  --pt-bg: linear-gradient(168deg, rgba(20, 22, 26, .99), rgba(8, 9, 11, .99));
  --pt-cover:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M0 27h20l7-7 7 7h20M27 0v14M27 40v14'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.28'%3E%3Ccircle cx='27' cy='27' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(115deg, #10131a, #4b545f 42%, #0c0f14);
  --pt-ring: conic-gradient(from 0deg, #e7edf5, #8e99a8, #ffffff, #6d7684, #e7edf5);
  --pt-line: rgba(206, 217, 231, .34);
  --pt-halo: rgba(206, 217, 231, .38);
  --pt-accent: linear-gradient(90deg, transparent, #dbe4ef, transparent);
  --pt-name: #f1f5fa;
  --pt-muted: #8e99a8;
  --pt-soft: rgba(206, 217, 231, .07);
  --pt-avatar-edge: #14171c;
}

/* ── ۲ ── سحابی ── ابرِ بنفشِ ستاره‌دار */
.pft-_pnebula {
  --pt-bg: linear-gradient(168deg, rgba(26, 17, 54, .99), rgba(10, 8, 24, .99));
  --pt-cover:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='86'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='14' cy='16' r='1.2'/%3E%3Ccircle cx='52' cy='9' r='.8'/%3E%3Ccircle cx='88' cy='22' r='1'/%3E%3Ccircle cx='108' cy='48' r='.9'/%3E%3Ccircle cx='30' cy='58' r='1.1'/%3E%3Ccircle cx='68' cy='70' r='.8'/%3E%3Ccircle cx='6' cy='74' r='.7'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(70% 130% at 25% 10%, #9a55ff, transparent 62%),
    radial-gradient(80% 140% at 90% 90%, #2ac0ff, transparent 60%),
    radial-gradient(50% 90% at 60% 60%, #ff6fd8, transparent 58%),
    linear-gradient(115deg, #2f1878, #0d0630);
  --pt-ring: conic-gradient(from 0deg, #a06bff, #ffd6f5, #31d6ff, #7b3fd6, #a06bff);
  --pt-line: rgba(160, 107, 255, .4);
  --pt-halo: rgba(160, 107, 255, .48);
  --pt-accent: linear-gradient(90deg, transparent, #c9a8ff, #31d6ff, transparent);
  --pt-name: #efe7ff;
  --pt-muted: #a394c6;
  --pt-soft: rgba(160, 107, 255, .1);
  --pt-avatar-edge: #150e30;
}

/* ── ۳ ── اخگر ── فلزِ گداخته */
.pft-_pember {
  --pt-bg: linear-gradient(168deg, rgba(38, 16, 8, .99), rgba(16, 8, 5, .99));
  --pt-cover:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23ffd08a' fill-opacity='.30'%3E%3Ccircle cx='8' cy='30' r='1.5'/%3E%3Ccircle cx='22' cy='18' r='1'/%3E%3Ccircle cx='33' cy='33' r='1.3'/%3E%3Ccircle cx='16' cy='7' r='.9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(62% 150% at 20% 100%, #ffab1f, transparent 60%),
    radial-gradient(52% 130% at 80% 100%, #ff3d05, transparent 58%),
    linear-gradient(115deg, #6b2105, #170803);
  --pt-ring: conic-gradient(from 0deg, #ffb52e, #fff3c4, #ff4d0a, #7a1a02, #ffb52e);
  --pt-line: rgba(255, 122, 26, .42);
  --pt-halo: rgba(255, 138, 26, .48);
  --pt-accent: linear-gradient(90deg, transparent, #ffb52e, #ff4d0a, transparent);
  --pt-name: #ffe8cd;
  --pt-muted: #c29271;
  --pt-soft: rgba(255, 122, 26, .1);
  --pt-avatar-edge: #1d0d06;
}

/* ── ۴ ── یشم ── سبزِ عمیق با زرکوب */
.pft-_pjade {
  --pt-bg: linear-gradient(168deg, rgba(6, 32, 25, .99), rgba(4, 14, 11, .99));
  --pt-cover:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23f0d68a' stroke-opacity='.45' stroke-width='1.2'%3E%3Cpath d='M22 2 34 22 22 42 10 22z'/%3E%3Cpath d='M22 9 29 22 22 35 15 22z'/%3E%3Cpath d='M0 22h8M36 22h8'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='2' fill='%23f0d68a' fill-opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(80% 130% at 50% 110%, #12a877, transparent 62%),
    linear-gradient(115deg, #0b6a4c, #04291e);
  --pt-ring: conic-gradient(from 0deg, #19d98a, #f0d68a, #7ff0c0, #065b40, #19d98a);
  --pt-line: rgba(25, 217, 138, .38);
  --pt-halo: rgba(25, 217, 138, .44);
  --pt-accent: linear-gradient(90deg, transparent, #f0d68a, #19d98a, transparent);
  --pt-name: #e4fff3;
  --pt-muted: #7fae9c;
  --pt-soft: rgba(25, 217, 138, .1);
  --pt-avatar-edge: #062018;
}

/* ── ۵ ── برفاب ── بلورِ روشن، تنها تمِ «روشن»ِ مجموعه */
.pft-_pfrost {
  --pt-bg: linear-gradient(168deg, rgba(22, 38, 50, .99), rgba(9, 16, 22, .99));
  --pt-cover:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M10 4l6 9-4 8M52 10l-7 8 4 9M28 44l7-9-4-7M4 34l8 4-2 8M40 2l-3 7 5 4'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.55'%3E%3Ccircle cx='30' cy='20' r='1.3'/%3E%3Ccircle cx='50' cy='44' r='1'/%3E%3Ccircle cx='14' cy='52' r='1.1'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(70% 130% at 30% 0%, #c8f0ff, transparent 60%),
    linear-gradient(115deg, #8fe3ff, #2a6f96 55%, #0b1c28);
  --pt-ring: conic-gradient(from 0deg, #ffffff, #bfeeff, #3ba7d8, #e7fbff, #ffffff);
  --pt-line: rgba(127, 220, 255, .45);
  --pt-halo: rgba(127, 220, 255, .5);
  --pt-accent: linear-gradient(90deg, transparent, #ffffff, #7fdcff, transparent);
  --pt-name: #eafaff;
  --pt-muted: #8fb3c6;
  --pt-soft: rgba(127, 220, 255, .1);
  --pt-avatar-edge: #0d1a24;
}

/* چیپِ پیش‌نمایشِ تمِ پروفایل در کارتِ محصول — یک مینیاتورِ کارتِ پروفایل
   با همان متغیرهای رنگیِ خودِ تم، تا خریدار دقیقاً همان چیزی را ببیند که
   می‌خرد. */
.sh-theme-chip{width:96px;height:76px;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid var(--pt-line,rgba(255,255,255,.2));background:var(--pt-bg,#1b1a1f)}
.sh-theme-chip::before{content:"";position:absolute;inset:0 0 auto 0;height:30px;background:var(--pt-cover)}
.sh-theme-chip::after{content:"";position:absolute;left:0;right:0;top:30px;height:2px;background:var(--pt-accent)}
.sh-theme-chip span{position:absolute;left:50%;top:19px;transform:translateX(-50%);width:26px;height:26px;
  border-radius:50%;background:var(--pt-ring);border:2px solid var(--pt-avatar-edge,#111)}

/* ══════════════════════════════════════════════════════════════════════════
   پیش‌نمایشِ قاب: آواتار داخل، قاب دورش
   ══════════════════════════════════════════════════════════════════════════
   در خودِ سایت، قاب روی لبه‌ی عکس می‌نشیند و کمی از آن را می‌پوشاند — این
   برای آواتارهای ریزِ لیست و چت درست است و دست‌نخورده می‌ماند.

   ولی در فروشگاه، خودِ قاب کالاست. اگر همان‌طور روی عکس بنشیند، خریدار
   نمی‌فهمد کجای آن قاب است و کجا عکس. پس فقط در پیش‌نمایش‌ها عکس را به
   اندازه‌ی دهانه‌ی داخلیِ حلقه کوچک می‌کنیم (۶۶٪ قطر، برابرِ شعاع ۳۸.۶ از
   ۵۸) تا قاب کاملاً *دورِ* آواتار بیفتد و هیچ بخشی از عکس زیرش نرود.
   ────────────────────────────────────────────────────────────────────────── */
.af-showcase { position: relative; isolation: isolate; display: block }
.af-showcase > img {
  position: absolute;
  top: 50%; left: 50%;
  width: 66%; height: 66%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.af-showcase .afx { position: absolute; inset: 0 }
.af-showcase .afx-back { z-index: 0 }
.af-showcase .afx-front { z-index: 2 }
.af-showcase .afx-svg { display: block; width: 100%; height: 100%; overflow: visible }

/* ══════════════════════════════════════════════════════════════════════════
   احترام به تنظیمِ «کاهش حرکت» سیستم‌عامل
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rm-chat-bubble[class*="bb-"],
  .rm-chat-bubble[class*="bb-"]::before,
  .rm-chat-bubble[class*="bb-"]::after,
  .pf-card[class*="pft-"] .pf-avatar-wrap { animation: none !important }
}


/* ══════════════════════════════════════════════════════════════════════════
   ترمزِ انیمیشن روی آواتارهای ریز
   ══════════════════════════════════════════════════════════════════════════
   قاب‌های فروشگاهی چند گروهِ متحرک دارند. روی کارتِ پروفایل یا صفحه‌ی
   «آیتم‌های من» که یکی‌دوتا آواتار هست، این حرکت‌ها همان چیزی‌اند که قاب را
   زنده نشان می‌دهند؛ ولی در لیستِ روم یا چت که ده‌ها آواتار هم‌زمان روی
   صفحه است، همان حرکت‌ها به کندیِ اسکرول تبدیل می‌شوند. موتورِ قاب برای
   آواتارهای خودکارِ داخلِ لیست‌ها کلاس .af-auto می‌گذارد، پس همان‌جا و فقط
   همان‌جا حرکت را خاموش می‌کنیم.
   ────────────────────────────────────────────────────────────────────────── */
.af-auto .afx-anim,
.rm-chat-avatar ~ .afx .afx-anim { animation: none !important }