/* s4m-register.css */

/* 🛡️ فیلد هانی‌پات ضدربات — با موقعیت خارج از صفحه مخفی می‌شود (نه display:none)
   تا برای کاربر واقعی دیده نشود ولی خیلی از ربات‌های ساده که فقط input های
   قابل‌رویت را حساب نمی‌کنند، همچنان آن را پر کنند */
.s4m-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.s4m-form-group {
  margin-bottom: 16px !important;
  color: #121212 !important;
}

.s4m-form-group label {
  display: block !important;
  margin-bottom: 6px !important;

  font-family: var(--e-global-typography-primary-font-family) !important;
  font-size: var(--e-global-typography-primary-font-size) !important;
  font-weight: var(--e-global-typography-primary-font-weight) !important;
  color: var(--e-global-color-text, #333) !important;
}

.s4m-input {
  width: 100% !important;
  padding: 10px 12px !important;

  font-family: var(--e-global-typography-text-font-family) !important;
  font-size: var(--e-global-typography-text-font-size) !important;
  font-weight: var(--e-global-typography-text-font-weight) !important;

  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  background-color: var(--e-global-color-background, #fff) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.s4m-date-row {
  display: flex !important;
  gap: 8px !important;
}
.s4m-date-row .s4m-input {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.s4m-input:focus {
  border-color: var(--e-global-color-primary, #1E40AF) !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2) !important;
  outline: none !important;
}

.s4m-btn1 {
  display: inline-block !important;
  padding: 0.625rem 1.25rem !important;
  border: none !important;
  border-radius: 0.5rem !important;

  font-family: var(--e-global-typography-text-font-family) !important;
  font-size: var(--e-global-typography-text-font-size) !important;
  font-weight: var(--e-global-typography-text-font-weight) !important;

  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background-color: var(--e-global-color-primary, #1E40AF) !important;
  color: var(--e-global-color-text, #fff) !important;
}

.s4m-btn1:hover {
  background-color: var(--e-global-color-secondary, #111) !important;
  color: var(--e-global-color-text, #fff) !important;
  transform: translateY(2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

/* BTN 2 */
/* 🐛→✅ v9.6.9: مثلِ .s4m-tab قبلاً، این‌جا هم سلکتورِ تک‌کلاسه بدونِ
   !important بود، یعنی روی برخی قالب‌ها ممکن بود CSSِ پیش‌فرضِ دکمه/لینکِ
   قالب (پدینگ، بردر، رنگِ متن و...) روش override بشه — از جمله دکمه‌ی
   حیاتیِ «ذخیره‌ی پروفایل». حالا با سلکتورِ دوکلاسه‌ی قوی‌تر (اسکوپ‌شده به
   .s4m-form که این دکمه همیشه داخلش است) + !important قفل شد. */
.s4m-form .s4m-btn2 {
    display: inline-block !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    color: #fff !important;
    background: linear-gradient(
        135deg, 
        rgba(29, 185, 84, 0.7), 
        rgba(30, 215, 96, 0.7)
    ) !important;
    background: linear-gradient(
        135deg, 
        color-mix(in srgb, var(--e-global-color-primary, #1DB954) 70%, transparent),
        color-mix(in srgb, var(--e-global-color-accent, #1ed760) 70%, transparent)
    ) !important;
    border: none !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    text-decoration: none !important;
    user-select: none !important;
}

.s4m-form .s4m-btn2:hover {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

.s4m-form .s4m-btn2:active {
    transform: scale(0.97) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.s4m-form .s4m-btn2:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.4) !important;
}

/* ==========================================================
   ردیفِ لینک‌ها (فرمِ ویرایشِ پروفایل) — v9.5.2
   قبلاً با flex-wrap + flex-basisِ درصدی چیده می‌شد، که روی موبایل
   بسته به عرضِ دقیقِ صفحه گاهی دکمه‌ی × تنها/کج روی خطِ بعد می‌افتاد.
   🐛→✅ v9.5.2: دو اشتباهِ نسخه‌ی قبل (9.5.1) اصلاح شد:
     ۱) رویِ موبایل، فاویکن/دکمه‌ی حذف با align-self:stretch + height:auto
        در کلِ ارتفاعِ کارت «کش» می‌آمدند (همان بیضی/کِشِ زشتِ عکسی که
        فرستادی) — حذف شد؛ الان همیشه اندازه‌ی ثابتِ خودشان را دارند و
        دقیقاً وسطِ ارتفاعِ کارت (هم‌ردیف با آدرس/برچسب) می‌نشینند.
     ۲) دسکتاپ/صفحاتِ عریض دیگر برچسب را زیرِ آدرس نمی‌برد — دقیقاً مثلِ
        قبل از هرگونه تغییر، وقتی «نمایش برچسب دستی» روشن باشد، فیلدِ
        برچسب همان کنارِ فیلدِ آدرس (در همان یک خط، هم‌عرض با آن) ظاهر
        می‌شود. فقط زیرِ ۶۴۰px (موبایل) چیدمان به دو ردیفِ زیرِ همِ
        هم‌عرض (آدرس بالا/برچسب پایین) تغییر می‌کند — نه در دسکتاپ.
   ========================================================== */
.s4m-links-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.s4m-link-row {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    grid-template-areas: "favicon url remove";
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(127, 127, 127, 0.09);
    border: 1px solid rgba(127, 127, 127, 0.2);
    border-radius: 12px;
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease;
}

/* دسکتاپ/پیش‌فرض: وقتی برچسب روشن است، یک ستونِ دیگر (هم‌عرض با آدرس)
   کنارش باز می‌شود — همه در یک خط، دقیقاً مثلِ قبل. */
.s4m-link-row.has-label {
    grid-template-columns: 32px 1fr 1fr 32px;
    grid-template-areas: "favicon url label remove";
}

.s4m-link-row:focus-within {
    border-color: rgba(29, 185, 84, 0.45);
    background: rgba(29, 185, 84, 0.06);
}

.s4m-link-row .link-favicon {
    grid-area: favicon;
    display: block; /* بدونِ این، <img> به‌عنوانِ عنصرِ inline کمی فضای خالیِ
                        زیرِ خط‌پایه دارد که باعث می‌شد کمی از مرکز پایین‌تر بیفتد */
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 6px;
    justify-self: center;
    align-self: center;
    object-fit: cover;
}

.s4m-link-row .s4m-link-url {
    grid-area: url;
    width: 100%;
    min-width: 0; /* بدونِ این، ورودی داخلِ گرید سرریز می‌کند و باعثِ همان چیدمانِ نامنظمِ قبلی می‌شود */
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 13.5px;
    align-self: center;
}

.s4m-link-row .remove-link {
    grid-area: remove;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    border: 1px solid rgba(217, 73, 73, 0.35);
    border-radius: 50%;
    background: rgba(217, 73, 73, 0.12);
    color: #e05a5a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.s4m-link-row .remove-link:hover {
    background: rgba(217, 73, 73, 0.22);
}

.s4m-link-row .remove-link:active {
    transform: scale(0.93);
}

/* برچسبِ دستی: فقط وقتی .has-label رویِ ردیف باشد جا/فضا می‌گیرد؛ در غیرِ
   این صورت کاملاً از چیدمان حذف می‌شود (نه فقط نامرئی) تا فاصله‌ی اضافه
   ایجاد نکند. */
.s4m-link-label-wrap {
    display: none;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.s4m-link-row.has-label .s4m-link-label-wrap {
    grid-area: label;
    display: flex;
    align-self: center;
}

.s4m-link-label-icon {
    flex: 0 0 auto;
    font-size: 12.5px;
    line-height: 1;
    opacity: .7;
}

.s4m-link-row .link-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 13.5px;
}

/* 🆕 v9.5.3: فقط زیرِ ۶۴۰px — دسکتاپ/تبلتِ عریض همان چیدمانِ بالا (یک
   خط، آدرس+برچسب هم‌عرض کنارِ هم) را دارد و دست‌نخورده می‌ماند.
   اینجا (موبایل) به‌جای اینکه فاویکن/× را در ارتفاعِ هر دو ردیف پخش کنیم
   (که قبلاً باعثِ هم‌پوشانیِ زشتِ آیکن‌ها با لبه‌ی فیلدها می‌شد)، فقط
   ردیفِ دومِ برچسب دقیقاً زیرِ همان ستونِ وسطِ آدرس اضافه می‌شود — دو
   خانه‌ی کناریِ آن (زیرِ فاویکن/×) خالی می‌مانند. نتیجه: آدرس و برچسب
   همیشه دقیقاً هم‌عرض و زیرِ هم‌اند، بدونِ هیچ هم‌پوشانی یا کش‌آمدنِ
   آیکن‌ها؛ فاویکن/× فقط در ردیفِ اول (کنارِ آدرس) می‌مانند. */
@media (max-width: 640px) {
    .s4m-link-row.has-label {
        grid-template-columns: 32px 1fr 32px;
        grid-template-areas:
            "favicon url   remove"
            ".       label .";
        row-gap: 6px;
    }
}

@media (max-width: 380px) {
    /* روی خیلی موبایل‌های خیلی باریک، فاصله‌ها/فونت کمی جمع‌تر می‌شود
       تا آدرسِ لینک هنوز فضایِ کافی برای خوانده‌شدن داشته باشد */
    .s4m-link-row,
    .s4m-link-row.has-label { grid-template-columns: 28px 1fr 28px; gap: 6px; padding: 7px 8px; }
    .s4m-link-row .link-favicon { width: 28px; height: 28px; }
    .s4m-link-row .remove-link { width: 26px; height: 26px; min-width: 26px; font-size: 14px; }
    .s4m-link-row .s4m-link-url,
    .s4m-link-row .link-label { font-size: 13px; padding: 0.45rem 0.5rem; }
}

/* Edith Profile • فرم وویرایش پروفایل */
.s4m-form {
    width: 100%;
    max-width: 720px;
    /* 🆕 v9.1: فاصله‌ی بالا خیلی کم شد تا فرم به جعبه‌ی آمار (s4m-my-stats-box)
       که درست بالای آن رندر می‌شود نزدیک‌تر باشد؛ فاصله‌ی پایین حفظ شده */
    margin: 0.75rem auto 3rem;
    padding: 1.5rem;
    background-color: #191414;
    border-radius: 1rem;
    border: 1px solid #1DB954;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: #fff;
    transition: all 0.3s ease;
}

/* Input fields */
.s4m-form input,
.s4m-form textarea,
.s4m-form select {
    padding: 0.75rem 1rem;
    margin-bottom: 1.2rem;
    border: none;
    border-radius: 0.6rem;
    background-color: #282828;
    color: #fff;
    font-size: 1rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.s4m-form input:focus,
.s4m-form textarea:focus,
.s4m-form select:focus {
    background-color: #1DB954;
    color: #191414;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.4);
}

/* Labels */
.s4m-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #1DB954;
}

/* Button */
.s4m-form button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #1DB954;
    color: #191414;
    border: none;
    border-radius: 0.6rem;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.s4m-form button:hover {
    background-color: #17a74a;
    transform: scale(1.05);
}

/* ==========================================================
   دکمه‌ی «ذخیره اطلاعات» — چسبان به پایینِ صفحه هنگام اسکرول
   با اسکرول به پایین همراهِ کاربر می‌آید (position: sticky با bottom:0)،
   ولی چون این محدودیت به‌ازای هر باکسِ خودش (فرمِ داخلِ .s4m-form) اعمال
   می‌شود، وقتی به انتهای واقعیِ فرم می‌رسیم، دکمه در جریانِ عادیِ صفحه
   باقی می‌ماند و از آن پایین‌تر (روی محتوای بعد از فرم) نمی‌رود.
   ========================================================== */
#s4m-save-btn-wrap {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 0.85rem 1.5rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, #191414 65%, transparent);
    text-align: center;
}

#s4m-save-btn-wrap .s4m-btn2 {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 480px) {
    #s4m-save-btn-wrap {
        margin: 1.5rem -1rem -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================
   🆕 v10.3.0 — نوار اجتماعی پروفایل (فالو / پیام / بلاک / گزارش)
   طبقِ درخواستِ صریح دوباره برگردانده شد (در v10.1.2 حذف شده بود).
   توجه: برخلافِ نسخه‌ی قبل، دیگر پیشه/تعدادِ دنبال‌کننده اینجا رندر
   نمی‌شود — رجوع کنید به توضیحِ کاملِ این تصمیم در s4m-social.php.
   ========================================================== */
.s4m-social-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 6px auto;
    padding: 8px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.s4m-social-bar::-webkit-scrollbar { display: none; }

/* --- استایل پایه‌ی واحد: همه‌ی چیپ‌ها (ثابت یا تعاملی) دقیقاً یک شکل ---
   🩹 فیکس: این بخش (برخلاف بقیه‌ی فایل) !important نداشت، برای همین استایل
   پیش‌فرض دکمه‌ی قالب/المنتور (بوردر رنگی، پدینگ بزرگ‌تر، border-radius کمتر)
   روی تگ‌های <button> غالب می‌شد. حالا مثل بقیه‌ی فایل !important گرفته. */
.s4m-chip,
.s4m-social-bar > a,
.s4m-social-bar > button,
.s4m-social-bar > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    height: 34px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid #e3e3e8 !important;
    background: #f6f6f9 !important;
    color: #2c2c34 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* 🆕 v8.3: کادر جمع‌وجورِ پیشه — قبلاً فقط متنِ ساده بود (بدون استایل مستقل)
   و روی صفحه‌ی هنرمندان زیرخط‌دار/قدیمی به‌نظر می‌رسید. */
.s4m-profession-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #2b5fb8 !important;
    border: 1px solid #dbe7fb !important;
    text-decoration: none !important;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s4m-follow-counts strong { font-weight: 600; }

/* 🆕 v8.3: جعبه‌ی آمار شخصی («بازدید پروفایل»/«کلیک لینک») — قبلاً پدینگ/فاصله‌ی
   زیادی از بالا و پایین می‌گرفت؛ حالا جمع‌وجورتر است و یک سوییچِ بازه‌ی زمانی
   (۷ روز/این ماه/کل) دارد که بدون رفرش کامل صفحه (فقط یک AJAX سبک) عوض می‌شود. */
.s4m-my-stats-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    /* 🆕 v9.4.10: قبلاً max-width نداشت — روی کانتینرهای عریضِ دسکتاپ (که
       عرضِ خودشان را از صفحه می‌گیرند، نه از فرم) justify-content:space-between
       عددها را یک گوشه و دکمه‌های بازه‌ی زمانی را گوشه‌ی دیگر می‌فرستاد، با
       یک فاصله‌ی خیلی بزرگ وسط. حالا هم‌عرضِ خودِ .s4m-form (720px) و
       وسط‌چین است تا با فرمِ زیرش هم‌ردیف بماند.
       🆕 v9.0: فاصله‌ی بالا/پایین (به‌خصوص پایین) باز هم کمتر شد */
    max-width: 720px;
    margin: 4px auto;
    padding: 6px 14px;
    background: #f7f7f8;
    border-radius: 10px;
    transition: opacity .15s ease;
    line-height: 1.2;
    box-sizing: border-box;
}
.s4m-my-stats-box.s4m-my-stats-loading { transition: opacity .15s ease; }
.s4m-my-stats-numbers {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 20px;
}
.s4m-my-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.s4m-my-stat-num {
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 1;
}
.s4m-my-stat-label {
    color: #666;
    font-size: 0.78rem;
}
.s4m-my-stats-period {
    display: flex;
    gap: 4px;
}
/* 🆕 v9.5.4: قبلاً فقط .s4m-period-btn (یک کلاس، specificity کم) بود که
   استایلِ پایه/hover/غیرفعال با رنگِ برندِ قالب (بردرِ صورتی) رد می‌شد و
   override می‌کرد؛ فقط حالتِ active به‌طورِ اتفاقی سالم می‌موند. حالا هر
   ۴ حالت با سلکتورِ دو-کلاسه‌ی قوی‌تر + !important قفل می‌شوند تا هیچ
   CSSِ قالبی نتواند روشان بنشیند — دقیقاً همان الگویی که .s4m-chip-link
   قبلاً برای همین مشکل استفاده کرده بود. */
.s4m-my-stats-period .s4m-period-btn {
    background: transparent !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
    /* 🆕 v9.5.5: قبلاً 11.5px/3px 10px بود — کمی کوچیک بود، هم برای خوانایی
       هم برای اندازه‌ی راحتِ لمس روی موبایل بزرگ‌تر شد. */
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
    transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}
.s4m-my-stats-period .s4m-period-btn:hover:not(.is-active):not([disabled]) {
    background: #eef6fa !important;
    border-color: #b9d8e6 !important;
    color: #0073aa !important;
}
.s4m-my-stats-period .s4m-period-btn.is-active {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: #fff !important;
}
.s4m-my-stats-period .s4m-period-btn.is-active:hover:not([disabled]) {
    background: #005f8d !important;
    border-color: #005f8d !important;
}
.s4m-my-stats-period .s4m-period-btn:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 1px;
}
.s4m-my-stats-period .s4m-period-btn[disabled] {
    opacity: .55 !important;
    cursor: default !important;
}
.s4m-sep { color: #9a9aa2; padding: 0 2px; }
.s4m-chip-muted { color: #9a9aa2; }

/* 🆕 v9.5.4: انیمیشنِ کوتاهِ تغییرِ عدد موقعِ عوض‌شدنِ بازه (با خودِ متنِ عدد،
   در JS)، و اسکلتونِ پالس به‌جای کم‌رنگ‌شدنِ کلِ باکس حین لودینگ — حسِ
   به‌روزتر/سبک‌تری می‌ده. */
.s4m-my-stats-box.s4m-my-stats-loading .s4m-my-stat-num {
    position: relative;
    color: transparent !important;
    border-radius: 4px;
    background: linear-gradient(90deg, #e9e9ec 25%, #f4f4f6 37%, #e9e9ec 63%);
    background-size: 400% 100%;
    animation: s4m-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes s4m-skeleton-pulse {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* حالتِ خطا: یه لرزشِ ریز و قرمزِ کوتاه رو باکس، به‌جای سکوتِ کامل */
.s4m-my-stats-box.s4m-my-stats-error {
    animation: s4m-shake .3s ease;
}
@keyframes s4m-shake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* 🆕 v9.4.11: با ادغامِ آیتمِ «بهترین روز» (از S4M UX) به‌عنوانِ سومین
   عدد داخلِ همین باکس، روی موبایلِ باریک ممکن است سه عدد + دکمه‌های
   بازه‌ی زمانی جا نشوند؛ اینجا وسط‌چین/جمع‌وجورتر می‌شوند تا همچنان
   شکیل بمانند، به‌جای دو باکسِ جدا زیرِ هم. */
@media (max-width: 480px) {
    .s4m-my-stats-box {
        justify-content: center;
        gap: 8px;
        padding: 8px 10px;
    }
    .s4m-my-stats-numbers {
        justify-content: center;
        gap: 14px;
    }
    .s4m-my-stat-num { font-size: 1.05rem; }
    .s4m-my-stats-period {
        width: 100%;
        justify-content: center;
    }
}


/* دکمه‌های قابل‌کلیک: فقط با hover ظریف متمایز می‌شن، نه با رنگ پایه */
.s4m-chip-link {
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease !important;
}
.s4m-chip-link:hover  { background: #eeeef2 !important; border-color: #d2d2da !important; }
.s4m-chip-link:active { background: #e6e6ea !important; }

/* تنها استثنا: دکمه‌ی فالو در حالت فعال، برای تمایز وضعیت
   🩹 رنگ سبزِ برندِ سایت (همون #1DB954 که تو فرم ویرایش پروفایل، باکس تایید
   حساب و لینک «مشاهده صفحه من» استفاده شده) — چون این رنگ واقعاً جاهای
   دیگه‌ی سایت هم تکرار شده، برخلاف آبی/بنفشِ قبلی. */
.s4m-follow-btn.is-following {
    background: #1DB954 !important;
    border-color: #1DB954 !important;
    color: #fff !important;
}
.s4m-follow-btn.is-following:hover {
    background: #17a74a !important;
    border-color: #17a74a !important;
}
.s4m-follow-btn.is-following:active {
    background: #158f3f !important;
    border-color: #158f3f !important;
}

/* 🆕 v10.4.0: نسخه‌ی کوچکِ چیپ — برای فضاهای تنگ مثل ردیف‌های ویجت
   (کنار آواتار ۴۰px)، جایی که ارتفاعِ ۳۴px چیپِ معمولی زیادی بزرگ است. */
.s4m-chip-sm {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    gap: 3px !important;
}

/* 🆕 v10.4.0: دکمه‌ی «تبریک تولد» — رنگِ گرم/جشنی، جدا از فالو (که سبزِ
   برند است) تا دو اکشن با هم قاطی نشوند. */
.s4m-wish-btn {
    background: #fff4e5 !important;
    border-color: #ffdca8 !important;
    color: #a15c00 !important;
}
.s4m-wish-btn:hover {
    background: #ffe9c7 !important;
    border-color: #ffcd82 !important;
}
.s4m-wish-btn.is-wished {
    background: #f3f3f6 !important;
    border-color: #e3e3e8 !important;
    color: #8a8a92 !important;
    cursor: default !important;
}
.s4m-wish-btn:disabled {
    opacity: .85 !important;
    cursor: default !important;
}
.s4m-wish-count {
    opacity: .75;
    font-weight: 400 !important;
}

/* 🆕 v10.5.0: دکمه‌ی «یادم بنداز» — رنگِ خنثی/آبی، جدا از فالو (سبز) و
   تبریک (نارنجی/جشنی) تا سه اکشن با هم قاطی نشوند. */
.s4m-reminder-btn {
    background: #eef4ff !important;
    border-color: #cfe0ff !important;
    color: #2b5fd9 !important;
}
.s4m-reminder-btn:hover {
    background: #e0eaff !important;
    border-color: #b7cfff !important;
}
.s4m-reminder-btn.is-subscribed {
    background: #2b5fd9 !important;
    border-color: #2b5fd9 !important;
    color: #fff !important;
}
.s4m-reminder-btn:disabled {
    opacity: .7 !important;
    cursor: default !important;
}

/* دکمه ایمیل عمداً رنگ/سبک متفاوتی دارد تا از لینک‌های شبکه اجتماعی متمایز باشد */
.s4m-email-btn {
    background: #1e8e3e;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    font-size: 13px;
}
.s4m-unread-badge {
    background: #e0245e;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 7px;
    margin-inline-start: 4px;
}

/* ==========================================================
   v5.0 — دایرکتوری هنرمندان
   ========================================================== */
.s4m-directory-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
.s4m-directory-controls {
    margin-bottom: 20px;
}
#s4m-directory-search {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 14px;
}
.s4m-directory-tabs {
    display: flex;
    gap: 8px;
    /* 🆕 v9.5.4: قبلاً flex-wrap بود که رو موبایل تب‌های پیشه‌ها چند خط
       می‌شدند و جا اشغال می‌کردند؛ حالا در یک ردیف می‌مانند و در صورتِ
       جانشدن، به‌جای شکستنِ خط، افقی اسکرول می‌شوند (مثلِ چیپ‌های
       فیلترِ اینستاگرام/توییتر). رو دسکتاپ/آیپدپرو که همه جا می‌شوند،
       اسکرولی فعال نمی‌شود و دقیقاً همون ظاهرِ قبلی می‌ماند. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* مخفی‌کردنِ کاملِ اسکرول‌بار، طبقِ خواسته */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.s4m-directory-tabs::-webkit-scrollbar { display: none; }
/* 🆕 v9.5.4: قبلاً .s4m-tab (یک کلاس، specificity کم) بود که CSSِ قالب
   (بردرِ صورتی) روی حالتِ پیش‌فرض/غیرفعال می‌نشست و override می‌کرد؛
   حالا با سلکتورِ دوکلاسه‌ی قوی‌تر + !important قفل می‌شود — همون الگویی
   که برای .s4m-period-btn هم استفاده شد. */
.s4m-directory-tabs .s4m-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #eee !important;
    border: 1px solid transparent !important;
    color: #444 !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.s4m-directory-tabs .s4m-tab:hover:not(.is-active) {
    background: #e2e2e2 !important;
}
.s4m-directory-tabs .s4m-tab.is-active {
    background: #0073aa !important;
    border-color: #0073aa !important;
    color: #fff !important;
}
.s4m-directory-tabs .s4m-tab:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 1px;
}
/* 🆕 v9.6.6: نشونه‌ی اینکه ردیفِ تب‌ها قابلِ اسکروله — به‌جای محوشدگیِ قبلی،
   یه فلشِ خیلی ریزِ نیمه‌شفاف رو لبه‌ای که هنوز محتوای دیده‌نشده اونجاست.
   با JS (directory.js) کلاس‌های has-scroll-start/has-scroll-end فقط وقتی
   اضافه می‌شن که واقعاً اسکرولِ بیشتری مونده باشه؛ رو دسکتاپ/آیپدپرو که
   همه‌چی جا می‌شه، هیچ‌وقت دیده نمی‌شن. کلیک روی فلش، ردیف رو همون سمت
   نرم اسکرول می‌کنه؛ علاوه‌براین، ردیف خودش هم به‌طور خودکار و بی‌نهایت
   (رفت‌وبرگشتِ آروم) اسکرول می‌شه تا کاربر بفهمه قابلِ کشیدنه، و با
   هاور/لمسِ کاربر بلافاصله می‌ایسته (جزئیات در directory.js). */
.s4m-directory-tabs-wrap {
    position: relative;
}
/* 🐛→✅ v9.6.7: استایلِ دکمه‌های فلش توسطِ CSSِ پیش‌فرضِ دکمه در قالب
   override می‌شد (همون مشکلِ قبلیِ .s4m-tab) — با سلکتورِ دوکلاسه‌ی
   قوی‌تر + !important قفل شد. */
.s4m-directory-tabs-wrap .s4m-directory-tabs-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    outline: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .85) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15) !important;
    color: #666 !important;
    line-height: normal !important;
    font-size: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: opacity .2s ease, background .15s ease, color .15s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.s4m-directory-tabs-wrap .s4m-directory-tabs-arrow svg {
    width: 9px !important;
    height: 9px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.s4m-directory-tabs-wrap .s4m-directory-tabs-arrow:hover {
    background: #fff !important;
    color: #0073aa !important;
}
.s4m-directory-tabs-wrap .s4m-directory-tabs-arrow:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 1px;
}
/* 🐛→✅ v9.6.7: سایتِ راست‌چین است — فلشِ سمتِ راست باید رو به راست
   (به‌سمتِ ابتدای ردیف/تبِ «همه») و فلشِ سمتِ چپ باید رو به چپ (به‌سمتِ
   انتهای ردیف) اشاره کنه؛ جهتِ آیکن‌ها برعکس بود، حالا با هم مسیرِ
   جابه‌جایی هماهنگ‌اند. */
.s4m-directory-tabs-wrap .s4m-directory-tabs-arrow--start { right: -1px !important; left: auto !important; }
.s4m-directory-tabs-wrap .s4m-directory-tabs-arrow--end   { left: -1px !important; right: auto !important; }
.s4m-directory-tabs-wrap.has-scroll-start .s4m-directory-tabs-arrow--start,
.s4m-directory-tabs-wrap.has-scroll-end .s4m-directory-tabs-arrow--end {
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* رو موبایل، هدفِ لمسی رو کمی بزرگ‌تر می‌کنیم تا زدنش راحت باشه، بدون
   اینکه خودِ فلش بزرگ و مزاحم به‌نظر برسه (طبقِ خواسته: خیلی ریز) */
@media (max-width: 782px) {
    .s4m-directory-tabs-wrap .s4m-directory-tabs-arrow {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
    }
    .s4m-directory-tabs-wrap .s4m-directory-tabs-arrow svg {
        width: 10px !important;
        height: 10px !important;
    }
}
.s4m-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 🆕 v9.0: !important روی هر دو حالت عادی و hover — استایل تم (a:link/a:hover
   با !important) قبلاً روی این لینک زیرخط می‌گذاشت */
.s4m-directory-card a,
.s4m-directory-card a:hover,
.s4m-directory-card a:visited,
.s4m-directory-card a:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: inherit;
    padding: 14px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.03);
    transition: background .2s;
}
.s4m-directory-card a:hover {
    background: rgba(0,0,0,0.08);
}
.s4m-directory-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 8px;
}
/* 🆕 v8.3: نام و پیشه‌ی هنرمند به‌جای متنِ ساده‌ی زیرخط‌دار، حالا هرکدام
   داخل یک کادر جمع‌وجور و مدرن نمایش داده می‌شوند. */
.s4m-directory-card strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    text-decoration: none !important;
    max-width: 100%;
}
.s4m-directory-card strong,
.s4m-directory-card strong * {
    text-decoration: none !important;
}
/* 🐛→✅ v9.6.9: تک‌کلاسه بدونِ !important بود — طبقِ همون الگو محکم شد. */
.s4m-directory-wrap .s4m-load-more-btn {
    background: #0073aa !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}
.s4m-directory-empty {
    text-align: center;
    color: #888;
    margin-top: 20px;
}

/* ==========================================================
   v5.0 — پیام خصوصی
   ========================================================== */
.s4m-conversations {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.s4m-conversation-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.s4m-conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 6px;
    background: rgba(0,0,0,0.03);
}
.s4m-conversation-item:hover {
    background: rgba(0,0,0,0.08);
}
.s4m-conversation-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.s4m-conversation-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.s4m-conversation-preview {
    font-size: 12px;
    color: #888;
}
.s4m-thread {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.s4m-thread-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 16px;
}

/* موبایل: بلاک/گزارش یک خط بالا، عکس+اسم یک خط پایین */
@media (max-width: 480px) {
    .s4m-thread-header img,
    .s4m-thread-header .s4m-thread-name-link {
        order: 2;
    }
    .s4m-thread-header .s4m-mod-controls {
        order: 1;
        width: 100%;
        justify-content: flex-end;
    }
}

.s4m-thread-header img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}
.s4m-thread-name-link {
    color: inherit;
    text-decoration: none;
}
.s4m-thread-name-link:hover {
    text-decoration: underline;
}
.s4m-avatar-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    cursor: zoom-out;
    padding: 20px;
}
.s4m-avatar-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}
.s4m-lightbox-img-box {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.s4m-lightbox-download {
    position: absolute;
    /* روی خودِ عکس، گوشه‌ی پایین‌راست — فیزیکی و ثابت (نه جهت‌دار)، مثل اکثر
       اپ‌های پیام‌رسان، مستقل از راست‌چین/چپ‌چین بودن سایت */
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.s4m-lightbox-download:hover {
    background: rgba(0,0,0,0.75);
}
.s4m-thread-messages {
    height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 12px;
}
.s4m-msg {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
}
@media (max-width: 480px) {
    /* روی موبایل، ۷۰٪ عرض واقعاً کم است برای حباب پیام صوتی + عکس پروفایل؛
       این مقدار فقط برای صفحات کوچک بازتر می‌شود */
    .s4m-msg { max-width: 88%; }
}
.s4m-msg-mine {
    align-self: flex-end;
    background: #0073aa;
    color: #fff;
}
.s4m-msg-theirs {
    align-self: flex-start;
    background: #eee;
    color: #222;
}
.s4m-thread-form textarea {
    flex: 1 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    resize: none !important;
}

/* 🐛→✅ v9.6.10: قبلاً این دکمه هیچ !important و حتی هیچ استایل ظاهری
   (رنگ/پدینگ/بوردر) نداشت — یعنی کاملاً به استایل پیش‌فرض <button> تم
   وابسته بود. دقیقاً همون دکمه‌ای بود که تو اسکرین‌شات با شکل نامرتب/
   استایل تم (بوردر صورتی) دیده می‌شد. حالا هم ظاهر مشخص داره هم قفل شده. */
.s4m-thread-form button[type="submit"] {
    order: -1 !important;
    flex: 1 0 100% !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    background: #0073aa !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
}
.s4m-thread-form button[type="submit"]:hover {
    background: #005f8d !important;
}
.s4m-thread-form button[type="submit"]:active {
    background: #004c70 !important;
}
#s4m-voice-btn {
    order: 1 !important;
}
#s4m-thread-input {
    order: 2 !important;
}
#s4m-image-btn {
    order: 3 !important;
}

/* ==========================================================
   v5.1 — بلاک / گزارش / اعلان‌ها
   ========================================================== */
.s4m-mod-controls {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}
/* 🆕 v10.3.0: این span مستقیم فرزند .s4m-social-bar است، پس طبق قانون
   ".s4m-social-bar > span" یک ظاهر چیپ (ارتفاع/پدینگ/بوردر/پس‌زمینه) ناخواسته
   می‌گرفت و دور دکمه‌های بلاک/گزارش یک پوسته‌ی اضافه می‌ساخت. این قانون با
   specificity بالاتر همان استایل‌ها را خنثی می‌کند تا فقط دکمه‌های داخلش
   (که خودشان کلاس s4m-chip دارند) دیده شوند. */
.s4m-social-bar > span.s4m-mod-controls {
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* هم‌خانواده با بقیه‌ی چیپ‌ها (سایز/ارتفاع/فونت یکسان)، فقط رنگ هشدار دارد */
.s4m-chip-danger {
    color: #c02b4f !important;
    border-color: #f0d3da !important;
    background: #fdf3f5 !important;
}
.s4m-chip-danger:hover {
    background: #fbe6ea !important;
    border-color: #e0245e !important;
}
/* 🩹 فیکس: بدون این، دقیقاً لحظه‌ی کلیک (mousedown) رنگ به خاکستریِ خنثی
   عمومی (.s4m-chip-link:active) می‌پرید، چون تا حالا قانونی مخصوص حالت
   فعالِ دکمه‌های خطر وجود نداشت. */
.s4m-chip-danger:active {
    background: #f6ccd6 !important;
    border-color: #c02b4f !important;
}
.s4m-chip-danger.is-blocked {
    background: #e0245e !important;
    border-color: #e0245e !important;
    color: #fff !important;
}
.s4m-chip-danger.is-blocked:hover { filter: brightness(.95) !important; }
.s4m-chip-danger.is-blocked:active { filter: brightness(.85) !important; }

/* 🆕 مودال گزارش تخلف — جایگزین prompt() مرورگر (social.js). کلاس‌های این
   بخش کاملاً جدید و مستقل‌اند و جای دیگه‌ای در پلاگین استفاده نمی‌شوند. */
.s4m-report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}
.s4m-report-box {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.s4m-report-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #2c2c34;
}
.s4m-report-desc {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: #6b6b74;
}
.s4m-report-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    min-height: 90px !important;
    margin-bottom: 14px !important;
}
.s4m-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* 🐛→✅ v9.6.9: تک‌کلاسه بدونِ !important — محکم شد. */
.s4m-report-box .s4m-report-cancel-btn {
    background: transparent !important;
    border: 1px solid #d8d8de !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.1rem !important;
    color: #555 !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
}
.s4m-report-box .s4m-report-cancel-btn:hover { background: #f2f2f5 !important; }

/* 🆕 دکمه ارسال/تأیید داخل مودال‌ها (ارسال گزارش، تأیید مسدودسازی) — همان
   رنگ قرمز کمرنگ چیپ‌های خطر (.s4m-chip-danger) بالای همین فایل، تا با
   دکمه‌های «مسدود کردن» و «گزارش تخلف» بیرون مودال هم‌رنگ و هماهنگ باشد */
.s4m-report-box .s4m-report-submit-btn {
    background: #fdf3f5 !important;
    border: 1px solid #f0d3da !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.1rem !important;
    color: #c02b4f !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
}
.s4m-report-box .s4m-report-submit-btn:hover {
    background: #fbe6ea !important;
    border-color: #e0245e !important;
}
.s4m-report-box .s4m-report-submit-btn:active {
    background: #f6ccd6 !important;
    border-color: #c02b4f !important;
}
.s4m-report-box .s4m-report-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}

.s4m-notifications {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.s4m-notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.s4m-notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: rgba(0,0,0,0.03);
}
.s4m-notification-item.is-unread {
    background: rgba(0,115,170,0.1);
    border-inline-start: 3px solid #0073aa;
}
.s4m-notification-item img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.s4m-notification-text {
    font-size: 14px;
    line-height: 1.6;
}
.s4m-notification-time {
    display: block;
    font-size: 11px;
    color: #999;
}

/* ==========================================================
   v5.2 — حذف پیام + حریم خصوصی پیام
   ========================================================== */
.s4m-notice {
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #666;
    margin: 10px 0;
}
.s4m-msg {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    box-sizing: border-box;
}
/* 🆕 v6.8: عکس پروفایل کوچک کنار هر پیام */
.s4m-msg-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-end;
    /* 🐛 fix: قبلاً روی موبایل، وقتی حباب پیام صوتی به‌خاطر min-width ثابتش
       جا نمی‌شد، کل ردیف overflow می‌کرد و عکس پروفایل دقیقاً روی دکمه‌ی
       پخش می‌افتاد. با یک فاصله‌ی امنِ ثابت (که با فشرده‌شدن حباب کوچک
       نمی‌شود چون flex-shrink:0 دارد) این تداخل دیگر اتفاق نمی‌افتد. */
    margin: 0 4px;
}
.s4m-msg-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    box-sizing: border-box;
}
.s4m-msg-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.s4m-msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.s4m-msg-text a {
    color: #2b6cb0;
    text-decoration: underline;
}
.s4m-msg-mine .s4m-msg-text a {
    color: #d6e8ff;
}
.s4m-msg.is-deleted .s4m-msg-text {
    font-style: italic !important;
    opacity: 0.7 !important;
}
/* 🎵 v6.1 / 🔗 v6.2: پلیر embed یا پیش‌نمایش لینک داخل حباب پیام */
.s4m-msg-embed-wrap {
    /* حداکثر عرض معقول برای حباب چت؛ خودِ iframe/کارت داخلش 100% عرض همین ظرف است */
    max-width: 320px;
    width: 100%;
}
.s4m-msg-embed-wrap:empty {
    display: none; /* تا وقتی هیچ چیزی برای نمایش نساخته (یا در حال حذف شدن) جای خالی نگیرد */
}
.s4m-msg-embed-wrap iframe.s4m-embed {
    display: block;
    max-width: 100%;
    border: none;
}
/* یوتیوب/یوتیوب‌موزیک: نسبت تصویر ۱۶:۹ ریسپانسیو */
.s4m-embed-ratio-16x9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
}
.s4m-embed-ratio-16x9 iframe.s4m-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* پست تلگرام/اینستاگرام: ویجت رسمی خودشان iframe داخلی می‌سازد؛ فقط عرض را کنترل می‌کنیم */
.s4m-msg-embed-wrap iframe {
    max-width: 100%;
}
.s4m-msg-embed-wrap blockquote.instagram-media {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* 🔗 v6.2: کارت پیش‌نمایش عمومی لینک (عنوان + عکس صفحه)، شبیه تلگرام/دیسکورد */
.s4m-linkpreview {
    display: flex;
    align-items: stretch;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
    transition: background 0.15s ease;
}
.s4m-linkpreview:hover {
    background: rgba(0, 0, 0, 0.05);
}
.s4m-msg-mine .s4m-linkpreview {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}
.s4m-msg-mine .s4m-linkpreview:hover {
    background: rgba(255, 255, 255, 0.14);
}
.s4m-linkpreview-img {
    flex: 0 0 84px;
    width: 84px;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.06);
}
.s4m-linkpreview-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px 8px 0;
    min-width: 0;
}
.s4m-linkpreview-site {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s4m-linkpreview-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 🆕 v6.4: خط توضیح (og:description) — فقط اگر سایت مقصد داشته باشد */
.s4m-linkpreview-desc {
    font-size: 11.5px;
    opacity: 0.7;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* اسکلت لودینگ کوتاه‌مدت تا پاسخ AJAX پیش‌نمایش لینک برسد */
.s4m-linkpreview-skeleton {
    display: flex;
    gap: 10px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.03);
}
.s4m-linkpreview-skeleton-img {
    flex: 0 0 60px;
    height: 60px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.08);
    animation: s4m-skeleton-pulse 1.1s ease-in-out infinite;
}
.s4m-linkpreview-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.s4m-linkpreview-skeleton-lines span {
    display: block;
    height: 9px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.08);
    animation: s4m-skeleton-pulse 1.1s ease-in-out infinite;
}
.s4m-linkpreview-skeleton-lines span:first-child { width: 90%; }
.s4m-linkpreview-skeleton-lines span:last-child { width: 60%; }
@keyframes s4m-skeleton-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 🆕 v6.3: فاوآیکن سایت مقصد، کنار اسم سایت در کارت پیش‌نمایش عمومی */
.s4m-linkpreview-favicon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-inline-end: 5px;
    vertical-align: -2px;
    object-fit: cover;
}

.s4m-msg-embed-wrap {
    position: relative;
}

/* 🆕 v6.3: کارت click-to-load برای پلیرها/ویجت‌های شناخته‌شده (اسپاتیفای،
   اپل‌موزیک، ساندکلاود، یوتیوب، تلگرام، اینستاگرام) — تا کلیک نخورده، هیچ
   iframe/اسکریپت خارجی سنگینی لود نمی‌شود؛ فقط یک تامبنیل + دکمه‌ی پلی */
.s4m-embed-card {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    text-align: right;
    font: inherit;
    color: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}
.s4m-embed-card:hover {
    background: rgba(0, 0, 0, 0.05);
}
.s4m-embed-card:active {
    transform: scale(0.99);
}
.s4m-msg-mine .s4m-embed-card {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}
.s4m-msg-mine .s4m-embed-card:hover {
    background: rgba(255, 255, 255, 0.14);
}
.s4m-embed-card-thumb {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--s4m-accent, #888) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.s4m-embed-card-thumb-icon {
    width: 24px;
    height: 24px;
    color: var(--s4m-accent, #888);
    opacity: 0.85;
}
.s4m-embed-card-thumb-icon svg { width: 100%; height: 100%; }
.s4m-embed-card-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    backdrop-filter: blur(2px);
}
.s4m-embed-card-play svg {
    width: 13px;
    height: 13px;
    /* مثلث پلی کمی به مرکز نوری راست‌ترش می‌بریم تا بصری وسط دایره دیده شود */
    margin-inline-start: 1.5px;
}
.s4m-embed-card-badge {
    position: absolute;
    bottom: 5px;
    inset-inline-start: 5px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--s4m-accent, #888);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.s4m-embed-card-badge svg { width: 10px; height: 10px; }
.s4m-embed-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px 8px 0;
    min-width: 0;
}
.s4m-embed-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s4m-embed-card-sub {
    font-size: 11px;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* اسکلت لودینگ کوتاه‌مدت تا تامبنیل/عنوان برسد */
.s4m-embed-card--skeleton {
    background: rgba(0, 0, 0, 0.02);
}
.s4m-embed-card-thumb--skeleton {
    background: color-mix(in srgb, var(--s4m-accent, #888) 12%, transparent);
    animation: s4m-skeleton-pulse 1.1s ease-in-out infinite;
}
.s4m-skel-line {
    display: block;
    height: 9px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.08);
    animation: s4m-skeleton-pulse 1.1s ease-in-out infinite;
}
.s4m-skel-line + .s4m-skel-line {
    margin-top: 6px;
}
/* بعد از کلیک، تا لود کامل ویجت تلگرام/اینستاگرام (که async است) یک اسپینر ساده */
.s4m-embed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}
.s4m-embed-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    animation: s4m-spin 0.7s linear infinite;
}
@keyframes s4m-spin {
    to { transform: rotate(360deg); }
}

/* 🆕 v6.5: بج تعداد کلیک کنار لینک‌های پروفایل عمومی (فقط اگر خودِ آرتیست
   نمایشش را روشن کرده باشد) — طراحی خنثی تا با استایل هر ۵ قالب پروفایل جور شود */
.s4m-link-click-count {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    vertical-align: middle;
    white-space: nowrap;
}

/* 🐛→✅ v9.6.10: بدون !important، استایل پیش‌فرض <button> تم (پدینگ/بک‌گراند/
   بوردر) رو این دکمه سوار می‌شد — دقیقاً همون باکس بزرگ صورتی که به‌جای یک ×
   کوچک و کم‌رنگ، تو گوشه‌ی پیام صوتی دیده می‌شد. */
.s4m-msg-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    margin: 0 !important;
}
.s4m-msg-delete:hover {
    opacity: 1 !important;
}

/* ==========================================================
   v5.3 — پیوست چت (عکس/ویس) + اعلان همگانی مدیر
   ========================================================== */
.s4m-thread-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.s4m-thread-form textarea {
    max-height: 140px !important;
    min-height: 40px !important;
    overflow-y: auto !important;
}
/* 🐛→✅ v9.6.10: سایز/بوردر قبلاً important بود ولی سنترینگ نداشت، برای همین
   ایموجی 🎤📷 داخل باکس ۴۰×۴۰ درست وسط نمی‌نشست و روی بعضی گوشی‌ها/وب‌ویوها
   ریز و کج به‌نظر می‌رسید. حالا با flex + line-height دقیقاً وسط قفل می‌شود. */
.s4m-thread .s4m-thread-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.s4m-thread .s4m-thread-icon-btn.is-recording {
    background: #e0245e !important;
    border-color: #e0245e !important;
    color: #fff !important;
    animation: s4m-pulse 1.2s infinite !important;
}
@keyframes s4m-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(224,36,94,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(224,36,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(224,36,94,0); }
}
/* 🆕 v9.3: قبلاً تنها بازخوردِ «در حال ضبط» یک انیمیشنِ نبض روی خودِ دکمه بود
   (که توی گوشی، بدونِ hover، خیلی واضح نیست) — حالا یک برچسبِ متنیِ قابلِ‌دیدن
   با تایمر هم کنارِ دکمه اضافه شده، مثلِ تلگرام: «🔴 در حال ضبط... ۰:۰۳» و بعد
   از رهاکردن «⏳ در حال ارسال...». */
.s4m-voice-status {
    font-size: 13px;
    color: #e0245e;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.s4m-thread-hint {
    font-size: 11px;
    color: #999;
    margin: 4px 0 0;
}
.s4m-attachment-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 8px;
}
.s4m-attachment-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}
.s4m-attachment-cancel {
    background: transparent;
    border: 1px solid #999;
    border-radius: 14px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
}
.s4m-msg-image {
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
}
.s4m-voice-player {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 🐛 fix: min-width ثابت ۲۰۰px قبلاً روی موبایل از عرض واقعی حباب پیام
       بیشتر می‌شد و کل ردیف پیام را overflow می‌کرد (همانی که باعث افتادن
       عکس پروفایل روی دکمه‌ی پخش می‌شد). حالا با clamp() یک عرض «حداقلِ
       واقع‌بینانه» روی موبایل و عرض دلخواه روی صفحه‌های بزرگ‌تر دارد. */
    width: clamp(150px, 60vw, 260px);
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 2px;
    /* دکمه پخش باید همیشه سمت چپ موج باشد، چه سایت راست‌چین باشد چه چپ‌چین */
    direction: ltr;
}
/* 🐛→✅ v9.6.9: تک‌کلاسه بدونِ !important — محکم شد. */
.s4m-voice-player .s4m-voice-play-btn {
    flex-shrink: 0 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0,115,170,0.12) !important;
    color: #0073AA !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
.s4m-msg-mine .s4m-voice-player .s4m-voice-play-btn {
    background: rgba(255,255,255,0.9) !important;
    color: #1a1a1a !important;
}
.s4m-voice-middle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.s4m-voice-wave {
    position: relative;
    flex: 1;
    height: 26px;
    cursor: pointer;
    /* موج پخش، مثل نوار پیشرفت ویدیو/صدا در واتساپ و تلگرام، همیشه باید مستقل از
       جهت متن سایت (راست‌چین/چپ‌چین) از چپ به راست پر شود؛ در غیر این صورت با
       تنظیم left:0 روی .s4m-voice-bars-fg در صفحات راست‌چین برعکس نمایش داده می‌شود */
    direction: ltr;
}
.s4m-voice-bars {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    direction: ltr;
}
.s4m-voice-bars-bg {
    width: 100%;
    opacity: 0.35;
}
.s4m-voice-bars-fg {
    width: 0%;
    color: #0073AA;
}
.s4m-msg-mine .s4m-voice-bars-fg { color: #ffffff; }
.s4m-voice-bars span {
    flex: 0 0 3px;
    width: 3px;
    min-height: 3px;
    border-radius: 2px;
    background: currentColor;
    align-self: center;
}
.s4m-voice-time {
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0.75;
    min-width: 30px;
}

.s4m-notification-broadcast {
    background: rgba(255,193,7,0.12);
}
.s4m-notification-mention-all-badge {
    display: inline-block; background: rgba(255,193,7,0.18); color: #9a7b00;
    border-radius: 5px; padding: 1px 6px; font-weight: bold; font-size: 12px;
}
.s4m-notification-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,193,7,0.2);
    border-radius: 50%;
}
.s4m-broadcast-text {
    margin: 4px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 🆕 v7.9: نشان تایید + نشان تولد کنار اسم پروفایل/کارت دایرکتوری */
.s4m-verified-badge {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 3px;
}
.s4m-birthday-badge {
    margin: 0 3px;
    font-size: 0.9em;
}

/* 🆕 v7.10: دکمه/فرم claim کردن پروفایل */
.s4m-claim-box { margin: 14px 0; }
/* 🐛→✅ v9.6.9: تک‌کلاسه بدونِ !important — محکم شد. */
.s4m-claim-box .s4m-claim-open-btn {
    background: transparent !important;
    border: 1px dashed #999 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    color: #666 !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
}
.s4m-claim-form {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
    max-width: 420px;
}

/* 🆕 v8.2.2: هماهنگ با تمِ تیره‌ی کارتِ s4m-form (پس‌زمینه‌ی روشن قبلی باعث
   می‌شد این بخش انگار جدا از بقیه‌ی صفحه و بدونِ استایل به‌نظر برسه). */
.s4m-verify-box {
    margin: 16px 0; padding: 14px 18px;
    background: #282828; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
}
.s4m-verify-box-head { display: flex; align-items: flex-start; gap: 10px; }
.s4m-verify-box-icon { font-size: 1.3rem; line-height: 1.4; flex: none; }
.s4m-verify-box strong { color: #1DB954; }
.s4m-verify-box-desc { margin: 4px 0 0; color: #b3b3b3; font-size: 0.85rem; }
/* 🐛→✅ v9.6.9: تک‌کلاسه بدونِ !important — محکم شد. */
.s4m-verify-box .s4m-verify-open-btn {
    margin-top: 10px !important;
    background: #1DB954 !important; border: none !important; color: #191414 !important;
    border-radius: 8px !important; padding: 7px 16px !important; font-size: 0.85rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
}
.s4m-verify-box .s4m-verify-open-btn:hover { background: #17a74a !important; }
.s4m-verify-box .s4m-verify-open-btn:disabled {
    background: #4a4a4a !important;
    color: #999 !important;
    cursor: not-allowed !important;
}
.s4m-verify-box .s4m-verify-open-btn:disabled:hover { background: #4a4a4a !important; }
.s4m-verify-form {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: #191414;
    max-width: 420px;
}
.s4m-verify-form .description {
    color: #b3b3b3;
    font-size: 0.8rem;
    margin: 0 0 10px;
}
.s4m-verify-form textarea.s4m-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    border: none !important;
    border-radius: 0.6rem !important;
    background-color: #282828 !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    resize: vertical !important;
}
.s4m-verify-form textarea.s4m-input:focus {
    background-color: #1DB954 !important;
    color: #191414 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.4) !important;
}
.s4m-verify-form textarea.s4m-input::placeholder { color: #888 !important; }
.s4m-verify-form .s4m-btn1 {
    margin-top: 10px !important;
    background: #1DB954 !important; border: none !important; color: #191414 !important;
    border-radius: 0.6rem !important; padding: 0.6rem 1.4rem !important; font-size: 0.9rem !important;
    font-weight: bold !important; cursor: pointer !important;
}
.s4m-verify-form .s4m-btn1:hover { background: #17a74a !important; }
.s4m-verify-notice {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    border: 1px solid transparent;
}
.s4m-verify-notice-success {
    background: rgba(29, 185, 84, 0.15);
    border-color: rgba(29, 185, 84, 0.4);
    color: #1DB954;
}
.s4m-verify-notice-error {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #f28b94;
}

/* 🆕 v8.2.2: لینکِ «مشاهده صفحه من» قبلاً کلاسِ پیش‌فرضِ button رو داشت که
   استایلِ دارک نداشت و انگار جزوِ صفحه نبود. حالا واضحه که یه لینکِ خروجی
   به صفحه‌ی عمومیه (آیکونِ فلش + باز شدن در تبِ جدید). */
.s4m-view-profile-wrap { margin: 4px 0 20px; }
.s4m-view-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1.1rem;
    border: 1px solid #1DB954;
    border-radius: 0.6rem;
    color: #1DB954;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.s4m-view-profile-link:hover {
    background: #1DB954;
    color: #191414;
}
.s4m-view-profile-arrow { font-size: 0.9rem; }