/* ═══════════════════════════════════════════════════════════════════════════
 * 🎨 MODAL MODERN THEME (نسخه‌ی جدید مدال پخش)
 * ─────────────────────────────────────────────────────────────────────────────
 * تم بصری مدرن برای مدال پخش ایستگاه. همه‌ی selectorها تحت body.modal-modern
 * نمایه شده‌اند — یعنی فقط زمانی فعال می‌شوند که ادمین در تنظیمات،
 * گزینه‌ی "modal_layout = modern" را انتخاب کرده باشد. در غیر این صورت،
 * مدال با استایل کلاسیک قبلی (در map.css) رندر می‌شود.
 *
 * ⚠️ هیچ تغییری در ساختار JavaScript یا IDهای المنت‌ها نیاز نیست
 *    — این یک تم بصری pure-CSS است.
 *
 * طراحی این تم:
 *   • هیروی فشرده با gradient متناسب با theme ایستگاه؛ نام/زیرنویس/فالوور
 *     به‌صورت stack وسط در پایین hero
 *   • cover سمت راست (RTL) و اطلاعات آهنگ سمت چپ
 *   • progress bar مدرن باریک
 *   • دکمه play دایره‌ای مدرن با glow متناسب با تم ایستگاه
 *   • activity feed مینیمال در تب timeline
 *   • container با gradient ایستگاه (به‌جای پس‌زمینه‌ی مشکی یکنواخت)
 *   • چیدمان دو ستونه روی دسکتاپ پهن (≥1100px)
 *   • چیدمان تک‌ستونه روی موبایل/تبلت با کنترل‌ها روبه‌روی progress bar
 *     برای فضای بیشتر تایم‌لاین
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── tokens مخصوص تم مدرن ─────────────────────────────────────────────── */
body.modal-modern {
    --mm-bg-deep:        #08080f;
    --mm-bg-card:        rgba(15, 15, 24, .96);
    --mm-bg-card-soft:   rgba(255, 255, 255, .035);
    --mm-bg-card-hover:  rgba(255, 255, 255, .06);
    --mm-border:         rgba(255, 255, 255, .07);
    --mm-border-strong:  rgba(255, 255, 255, .12);
    --mm-text-primary:   #ffffff;
    --mm-text-secondary: rgba(255, 255, 255, .72);
    --mm-text-muted:     rgba(255, 255, 255, .48);
    --mm-shadow-card:    0 24px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
    --mm-radius-card:    24px;
    --mm-radius-inner:   16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 1) Container — پس‌زمینه‌ی gradient ایستگاه
 *    ─────────────────────────────────────────────────────────────────────
 *    JS مقادیر `--station-primary` و `--station-secondary` را روی
 *    .modal-container ست می‌کند (در _applyStationToModal). این فایل آن‌ها
 *    را به‌صورت radial-gradient ها به کار می‌گیرد تا کل مدال تم رنگی
 *    ایستگاه را داشته باشد، نه پس‌زمینه‌ی مشکی یکنواخت.
 *
 *    ⚠️ نکته: JS همچنین `container.style.background = bg_color` را وقتی
 *    ادمین رنگ پس‌زمینه‌ی صریح ست کرده باشد inline می‌گذارد. این inline
 *    style بر background ما (CSS) غلبه می‌کند. برای حفظ tint رنگ ایستگاه
 *    حتی در آن حالت، gradientها را به ::before منتقل می‌کنیم تا روی
 *    bg_color ادمین (یا مشکی پیش‌فرض) overlay شوند.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .station-modal {
    align-items: flex-end;
    justify-content: center;
}

body.modal-modern .modal-overlay {
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

body.modal-modern .modal-container {
    /* base color: اگر ادمین bg_color ست کرده باشد JS این را override می‌کند */
    background-color: var(--mm-bg-deep);
    border: 1px solid var(--mm-border-strong);
    border-bottom: none;
    border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0;
    box-shadow: var(--mm-shadow-card);
    overflow: hidden;
    isolation: isolate; /* stacking context برای ::before */
    /* position:relative از map.css به ارث می‌رسد */
}

/* gradient layer روی پس‌زمینه (اعم از bg_color یا مشکی پیش‌فرض)
   تا تم رنگی ایستگاه روی کل مدال احساس شود. */
body.modal-modern .modal-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 95% 55% at 50% -8%,
            color-mix(in srgb, var(--station-primary, #8b5cf6) 32%, transparent) 0%,
            transparent 60%),
        radial-gradient(ellipse 70% 45% at 85% 95%,
            color-mix(in srgb, var(--station-secondary, #06b6d4) 24%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 60% 40% at 12% 70%,
            color-mix(in srgb, var(--station-primary, #8b5cf6) 18%, transparent) 0%,
            transparent 70%);
}

/* fallback ساده برای مرورگرهای بدون color-mix() */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    body.modal-modern .modal-container::before {
        background:
            radial-gradient(ellipse 95% 55% at 50% -8%, rgba(139, 92, 246, .28) 0%, transparent 60%),
            radial-gradient(ellipse 70% 45% at 85% 95%, rgba(6, 182, 212, .20) 0%, transparent 65%),
            radial-gradient(ellipse 60% 40% at 12% 70%, rgba(139, 92, 246, .15) 0%, transparent 70%);
    }
}

/* فرزندان اصلی container باید بالای ::before قرار بگیرند.
   به‌صورت targeted روی ۴ section اصلی اعمال می‌شود تا close/min
   که با position:absolute و z-index بالا کار می‌کنند دست‌نخورده بمانند. */
body.modal-modern .modal-container > .modal-hero,
body.modal-modern .modal-container > .modal-player-section,
body.modal-modern .modal-container > .modal-tab-contents,
body.modal-modern .modal-container > .modal-tabs-fixed {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2) Hero — فشرده‌تر؛ نام/زیرنویس/فالوور به‌صورت stack وسط در پایین
 *    ───────────────────────────────────────────────────────────────────
 *    قبلاً نام در پایین-راست و meta در پایین-چپ بود → روی موبایل meta
 *    با دکمه‌های close/min در گوشه چپ تداخل پیدا می‌کرد.
 *    حالا همه پایین، centered، stack شده تا تداخلی نباشد.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .modal-hero {
    padding-top: 46%;          /* ~25% کوتاه‌تر از ۶۴٪ قبلی */
    margin: 10px 10px 0;
    border-radius: var(--mm-radius-inner);
    background:
        radial-gradient(ellipse 60% 50% at 78% 22%,
            color-mix(in srgb, var(--station-primary, #8b5cf6) 75%, transparent) 0%,
            transparent 55%),
        radial-gradient(ellipse 65% 55% at 25% 78%,
            color-mix(in srgb, var(--station-secondary, #06b6d4) 65%, transparent) 0%,
            transparent 55%),
        radial-gradient(ellipse 45% 38% at 60% 60%,
            rgba(244, 114, 182, .45) 0%,
            transparent 60%),
        linear-gradient(160deg, #14141f 0%, #08080f 100%);
    overflow: hidden;
}

/* fallback */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    body.modal-modern .modal-hero {
        background:
            radial-gradient(ellipse 60% 50% at 78% 22%, rgba(139, 92, 246, .65) 0%, transparent 55%),
            radial-gradient(ellipse 65% 55% at 25% 78%, rgba(6, 182, 212, .55) 0%, transparent 55%),
            radial-gradient(ellipse 45% 38% at 60% 60%, rgba(244, 114, 182, .45) 0%, transparent 60%),
            linear-gradient(160deg, #14141f 0%, #08080f 100%);
    }
}

body.modal-modern .modal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 40% 30% at 50% 40%, rgba(255, 255, 255, .08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
    animation: mmOrbDrift 16s ease-in-out infinite alternate;
}

body.modal-modern .modal-hero::after {
    display: none;
}

@keyframes mmOrbDrift {
    0%   { transform: translate(0, 0); opacity: .8; }
    100% { transform: translate(8%, -4%); opacity: 1; }
}

body.modal-modern .modal-hero-inner {
    inset: 0;
    padding: 12px 16px 14px;
    display: block;
    z-index: 1;
}

body.modal-modern .modal-hero-emoji {
    display: none;
}

/* نام ایستگاه — وسط، در stack بالای زیرنویس و meta
   🆕 [HERO-NAME-BG] برای خوانایی روی هر تصویر hero، یک قرص نیمه‌شفاف
   مثل دکمه‌ی فالو/badge فالوور — backdrop-filter blur برای رنگ‌خواندن
   پیش‌زمینه. */
body.modal-modern .modal-hero h2 {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 19px;        /* اندکی کوچک‌تر تا با padding pill متعادل شود */
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    margin: 0;
    max-width: calc(100% - 32px);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* قرص شیشه‌ای */
    background: rgba(0, 0, 0, .42);
    border: 1px solid var(--mm-border-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* زیرنویس (شهر/استان) — وسط، زیر نام
   🆕 قرص کوچک‌تر و محوتر برای hierarchy بصری */
body.modal-modern .modal-hero p {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: calc(100% - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* قرص محوتر از نام */
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 11px;
    border-radius: 999px;
}

/* meta (فالوور + دکمه فالو) — وسط، در پایین‌ترین لایه‌ی hero
   ـــ نه چپ نه راست تا با close/min در گوشه‌ی چپ تداخل نداشته باشد. */
body.modal-modern .modal-hero-meta {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    right: auto;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    max-width: calc(100% - 32px);
}

body.modal-modern .modal-stat-badge,
body.modal-modern .modal-follow-btn-compact {
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--mm-border-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 3) ❌ المنت‌های اضافه — همیشه مخفی در حالت modern
 *    • mm-live-badge ("بخش زنده" بالای hero) — حذف‌شده طبق درخواست
 *    • mm-menu-btn ("⋯" گوشه چپ بالای hero) — کاری انجام نمی‌داد، حذف
 * ═══════════════════════════════════════════════════════════════════════════ */

.mm-live-badge,
.mm-menu-btn,
body.modal-modern .mm-live-badge,
body.modal-modern .mm-menu-btn {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4) Close + Minimize — هردو سمت چپ، هم‌اندازه، هم‌سطح
 *    ─────────────────────────────────────────────────────────────────
 *    قبلاً close: 36-42px، min: 38-42px (ناهماهنگ روی موبایل/دسکتاپ).
 *    حالا هر دو دقیقاً 38×38 با همان top، فقط left فرق دارد.
 *    position و left از CSS کلاسیک یا inline JS می‌آید — override نمی‌شود.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .modal-close,
body.modal-modern #stationModalMinBtn {
    box-sizing: border-box !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: rgba(0, 0, 0, .55) !important;
    border: 1px solid var(--mm-border-strong) !important;
    box-shadow: none !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.modal-modern .modal-close {
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5) Player section — جمع‌وجور
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .modal-player-section {
    padding: 10px 12px 8px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * connection-bar در حالت مدرن
 * ═══════════════════════════════════════════════════════════════════════════
 * 🆕 [CONNECTION-BAR-MODERN-V2] طبق درخواست: مثل قالب پیش‌فرض عمل کن.
 *   ساختار: [● dot] [متصل] [👥 N]  — همه درون یک قرص شیشه‌ای centered،
 *   زیر hero و کاملاً جدا از ردیف فالو/فالوور (در hero). نقطه چشمک‌زن
 *   سبز هنگام اتصال. کلمه «متصل» داخل دکمه. روی موبایل هم pill باقی
 *   می‌ماند (نه دایره) چون متن داخلش عرض را حفظ می‌کند.
 */
body.modal-modern .connection-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 13px;
    margin: 6px auto 8px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 20px);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--station-primary, #8b5cf6) 22%, rgba(0,0,0,.35)) 0%,
            color-mix(in srgb, var(--station-secondary, #06b6d4) 18%, rgba(0,0,0,.35)) 100%);
    border: 1px solid color-mix(in srgb, var(--station-primary, #8b5cf6) 35%, rgba(255, 255, 255, .15));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    line-height: 1.4;
    min-height: 22px;
    white-space: nowrap;
    align-self: center;
}
@supports not (background: color-mix(in srgb, red, blue)) {
    body.modal-modern .connection-bar {
        background: rgba(168, 85, 247, .25);
        border-color: rgba(168, 85, 247, .45);
    }
}
@media (min-width: 1100px) {
    body.modal-modern .modal-player-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    body.modal-modern .modal-player-section > .connection-bar {
        align-self: center;
    }
}

/* status-dot — قابل دیدن در مدرن، چشمک‌زن سبز هنگام اتصال */
body.modal-modern .connection-bar #modalStatusDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(239, 68, 68, .6);
}
body.modal-modern .connection-bar #modalStatusDot.connecting {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, .8);
    animation: mm-status-blink 1s ease-in-out infinite;
}
body.modal-modern .connection-bar #modalStatusDot.connected {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, .9);
    animation: mm-status-pulse 1.4s ease-in-out infinite;
}
@keyframes mm-status-blink {
    0%, 100% { opacity: 1;   }
    50%      { opacity: .35; }
}
@keyframes mm-status-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 8px rgba(16, 185, 129, .9); }
    50%      { opacity: .55; transform: scale(.78); box-shadow: 0 0 4px rgba(16, 185, 129, .45); }
}

body.modal-modern .connection-bar #modalStatusText {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

body.modal-modern .connection-bar .listeners-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
body.modal-modern .connection-bar .listeners-badge::before {
    content: '·';
    color: rgba(255, 255, 255, .5);
    margin-right: 2px;
}
body.modal-modern .connection-bar .listeners-badge #modalListeners {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 14px;
    text-align: center;
}
@media (max-width: 480px) {
    body.modal-modern .connection-bar {
        font-size: 10.5px;
        padding: 4px 11px;
        gap: 6px;
    }
    body.modal-modern .connection-bar #modalStatusText,
    body.modal-modern .connection-bar .listeners-badge {
        font-size: 10.5px;
    }
}

/* now-playing card
   🆕 [NOW-SONG-BG] پس‌زمینه از تم خوانده می‌شود (var --station-now-bg).
   اگر تم این متغیر را نداده، fallback به gradient ملایم primary/secondary است. */
body.modal-modern .now-playing-section {
    /* fallback layered: اگر var تعریف نشده، gradient ملایم */
    background: rgba(255, 255, 255, .045);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--station-primary,   #8b5cf6) 14%, transparent) 0%,
            color-mix(in srgb, var(--station-secondary, #06b6d4)  8%, transparent) 100%);
    /* اگر --station-now-bg از admin set شده، اولویت دارد */
    background: var(--station-now-bg, linear-gradient(135deg,
            color-mix(in srgb, var(--station-primary,   #8b5cf6) 14%, transparent) 0%,
            color-mix(in srgb, var(--station-secondary, #06b6d4)  8%, transparent) 100%));
    border: 1px solid color-mix(in srgb, var(--station-primary, #8b5cf6) 18%, rgba(255, 255, 255, .08));
    border-radius: var(--mm-radius-inner);
    padding: 10px 12px;
    margin-bottom: 8px;
}

/* fallback explicit برای مرورگرهای بدون color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    body.modal-modern .now-playing-section {
        background: rgba(168, 85, 247, .12);
        border-color: rgba(168, 85, 247, .25);
    }
}

/* Cover سمت راست (RTL: col 1 = راست بصری) ، اطلاعات سمت چپ */
body.modal-modern .now-playing-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
}

body.modal-modern .np-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--station-primary, #f472b6), var(--station-secondary, #a855f7));
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .55);
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
}

body.modal-modern .np-info {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    min-width: 0;
}

body.modal-modern .np-label {
    font-size: 10.5px;
    color: var(--mm-text-muted);
    margin-bottom: 3px;
    /* default RTL flex: dot+text cluster at inline-start (راست بصری)؛
       np-eq با margin-inline-start:auto خوشه‌ی دکمه دانلود را به inline-end می‌فرستد. */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5b) Inline equalizer داخل np-label — مینیمال، چسبیده به دکمه دانلود
 *     ───────────────────────────────────────────────────────────────────
 *     - این المنت در index.html به‌عنوان فرزند جدید .np-label اضافه شده
 *       (بین متن و دکمه‌ی دانلودی که premium.js append می‌کند).
 *     - در حالت classic مخفی (display:none پیش‌فرض) — فقط در
 *       body.modal-modern نمایش داده می‌شود.
 *     - margin-inline-start:auto آن را به inline-end (چپ بصری در RTL)
 *       پرتاب می‌کند تا چسبیده به download-btn ظاهر شود؛ متن "در حال پخش"
 *       موقع تغییر برای اتصال جابه‌جایش نمی‌کند.
 *     - با :has(.np-cover.playing) فقط زمان پخش انیمیت می‌شود.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* در حالت classic مخفی */
.np-eq { display: none; }

body.modal-modern .np-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    flex-shrink: 0;
    margin-inline-start: auto;     /* چسبانده به inline-end */
    pointer-events: none;          /* تزئینی، تعامل ندارد */
}

body.modal-modern .np-eq span {
    width: 2px;
    background: var(--station-primary, #8b5cf6);
    border-radius: 1px;
    height: 3px;                   /* state پیش‌فرض: paused-look */
    animation: none;
}

/* رنگ متناوب (primary/secondary) برای کنتراست بصری */
body.modal-modern .np-eq span:nth-child(even) {
    background: var(--station-secondary, #06b6d4);
}

/* وقتی .np-cover کلاس .playing را دارد، انیمیشن فعال می‌شود.
   :has() در همه مرورگرهای مدرن پشتیبانی می‌شود (Chrome 105+, Safari 15.4+,
   Firefox 121+). در مرورگرهای قدیمی‌تر، اکولایزر در حالت paused-look ثابت
   می‌ماند — degradation قابل قبول. */
body.modal-modern .now-playing-row:has(.np-cover.playing) .np-eq span {
    animation: mmEq .55s ease infinite alternate;
}
body.modal-modern .now-playing-row:has(.np-cover.playing) .np-eq span:nth-child(1) { height: 5px;  animation-delay: 0s;  }
body.modal-modern .now-playing-row:has(.np-cover.playing) .np-eq span:nth-child(2) { height: 9px;  animation-delay: .12s; }
body.modal-modern .now-playing-row:has(.np-cover.playing) .np-eq span:nth-child(3) { height: 12px; animation-delay: .22s; }
body.modal-modern .now-playing-row:has(.np-cover.playing) .np-eq span:nth-child(4) { height: 7px;  animation-delay: .32s; }

@keyframes mmEq {
    to { height: 3px; }
}

/* در حالت modern، دکمه‌ی دانلود نباید margin-inline-start:auto داشته باشد
   (که از CSS اصلی پروژه می‌آید) ، چون np-eq خودش margin-inline-start:auto
   دارد و باید کلاسترِ [eq + download] در inline-end کنار هم بمانند. */
body.modal-modern .np-label #premiumDownloadBtn {
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
}

body.modal-modern .np-title {
    font-size: 15px;
    font-weight: 700;
    /* رنگ از تنظیمات تم ایستگاه (--station-text-color) ست می‌شود؛
       fallback به سفید پیش‌فرض. */
    color: var(--station-text-color, var(--mm-text-primary));
    margin-bottom: 2px;
    line-height: 1.3;
}

body.modal-modern .np-artist {
    font-size: 12px;
    color: var(--station-text-color, var(--mm-text-secondary));
    opacity: .82;  /* اندکی de-emphasis برای hierarchy بصری وقتی هم‌رنگ title است */
}

body.modal-modern .equalizer {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 6) Progress bar — باریک و مدرن
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .progress-section {
    padding: 0 4px;
    margin-bottom: 8px;
    margin-top: 4px;
}

body.modal-modern .progress-bar-wrap {
    height: 5px;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
    cursor: pointer;
    overflow: visible;
    position: relative;
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
}

body.modal-modern .progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--station-primary, #8b5cf6),
        var(--station-secondary, #06b6d4));
    background-image: linear-gradient(90deg,
        var(--station-primary, #8b5cf6),
        var(--station-secondary, #06b6d4));
    border-radius: 999px;
    transition: width .3s linear;
    box-shadow: 0 0 8px -1px color-mix(in srgb, var(--station-primary, #8b5cf6) 60%, transparent);
    position: relative;
}

body.modal-modern .progress-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .4),
        0 0 0 1px color-mix(in srgb, var(--station-primary, #8b5cf6) 60%, transparent);
    opacity: 0;
    transition: opacity .15s;
}

body.modal-modern .progress-bar-wrap:hover .progress-fill::after,
body.modal-modern .progress-bar-wrap:active .progress-fill::after {
    opacity: 1;
}

body.modal-modern .progress-times {
    font-size: 11px;
    color: var(--mm-text-secondary);
    margin-top: 6px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7) Player controls — دکمه play دایره‌ای مدرن
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .player-controls {
    gap: 14px;
    padding: 4px 0 6px;
}

body.modal-modern .ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mm-bg-card-soft);
    border: 1px solid var(--mm-border);
    transition: all .18s ease;
    font-size: 13px;
}

body.modal-modern .ctrl-btn:hover,
body.modal-modern .ctrl-btn:active {
    background: var(--mm-bg-card-hover);
    border-color: var(--mm-border-strong);
}

body.modal-modern .ctrl-btn.play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg,
        var(--station-primary, #8b5cf6),
        var(--station-secondary, #06b6d4));
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        inset 0 -2px 4px rgba(0, 0, 0, .25),
        0 8px 22px -6px color-mix(in srgb, var(--station-primary, #8b5cf6) 65%, transparent),
        0 0 0 4px color-mix(in srgb, var(--station-primary, #8b5cf6) 10%, transparent);
    transition: transform .15s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    body.modal-modern .ctrl-btn.play-btn {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .25),
            inset 0 -2px 4px rgba(0, 0, 0, .25),
            0 8px 22px -6px rgba(139, 92, 246, .55),
            0 0 0 4px rgba(139, 92, 246, .12);
    }
}

body.modal-modern .ctrl-btn.play-btn::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 35%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, .28) 0%,
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

body.modal-modern .ctrl-btn.play-btn > * {
    position: relative;
    z-index: 1;
}

body.modal-modern .ctrl-btn.play-btn:hover {
    transform: scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -2px 4px rgba(0, 0, 0, .25),
        0 12px 28px -6px color-mix(in srgb, var(--station-primary, #8b5cf6) 80%, transparent),
        0 0 0 6px color-mix(in srgb, var(--station-primary, #8b5cf6) 16%, transparent);
}

body.modal-modern .ctrl-btn.play-btn:active {
    transform: scale(.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 8) Bottom tabs
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .modal-tabs-fixed {
    background: rgba(8, 8, 14, .82); /* کمی شفاف‌تر تا tint container زیرش دیده شود */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--mm-border);
    /* 🆕 [PWA-TABS-SAFE-AREA] فقط در standalone، safe-area-bottom اعمال شود
       تا روی home indicator iOS نرود. در حالت browser، فقط 6px padding عادی. */
    padding: 6px 10px;
    gap: 4px;
}
/* در standalone: padding-bottom اضافه می‌شود (= safe-area-inset-bottom) */
body.pwa-standalone.modal-modern .modal-tabs-fixed,
html.pwa-standalone body.modal-modern .modal-tabs-fixed {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 🆕 [FLOATING-POPOVER-MODERN] override استایل پاپ‌اور برای تم مدرن
 * با gradient station-primary/secondary و glow ظریف، هماهنگ با تم ایستگاه.
 * ─────────────────────────────────────────────────────────────────────────── */
body.modal-modern .modal-tab-popover {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mm-container-bg, #0a0a14) 92%, transparent) 0%,
            color-mix(in srgb, var(--mm-container-bg, #0a0a14) 96%, var(--station-primary, #8b5cf6) 8%) 100%);
    border: 1px solid color-mix(in srgb, var(--station-primary, #8b5cf6) 28%, rgba(255, 255, 255, .1));
    border-radius: var(--mm-radius-card, 16px);
    box-shadow:
        0 -10px 36px rgba(0, 0, 0, .55),
        0 0 0 1px color-mix(in srgb, var(--station-primary, #8b5cf6) 12%, transparent) inset;
    padding: 14px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
    body.modal-modern .modal-tab-popover {
        background: rgba(20, 20, 36, .97);
        border-color: rgba(168, 85, 247, .35);
    }
}
body.modal-modern .popover-arrow {
    background:
        color-mix(in srgb, var(--mm-container-bg, #0a0a14) 96%, var(--station-primary, #8b5cf6) 6%);
    border-right: 1px solid color-mix(in srgb, var(--station-primary, #8b5cf6) 28%, rgba(255, 255, 255, .1));
    border-bottom: 1px solid color-mix(in srgb, var(--station-primary, #8b5cf6) 28%, rgba(255, 255, 255, .1));
}
body.modal-modern .popover-title {
    color: var(--mm-text, #fff);
}
body.modal-modern .popover-close {
    background: color-mix(in srgb, var(--station-primary, #8b5cf6) 14%, rgba(255, 255, 255, .06));
    border-color: color-mix(in srgb, var(--station-primary, #8b5cf6) 22%, rgba(255, 255, 255, .1));
}
body.modal-modern .modal-tab.popover-active {
    color: var(--station-primary, #a855f7);
    background: color-mix(in srgb, var(--station-primary, #8b5cf6) 18%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    body.modal-modern .modal-tab.popover-active {
        background: rgba(168, 85, 247, .18);
    }
}

body.modal-modern .modal-tab {
    border-radius: 12px;
    border-top: none;
    color: var(--mm-text-muted);
    font-size: 11px;
    padding: 6px 4px;
    transition: all .18s;
}

body.modal-modern .modal-tab.active {
    background: linear-gradient(135deg,
        rgba(139, 92, 246, .15),
        rgba(6, 182, 212, .08));
    color: var(--mm-text-primary);
    border-top: none;
}

body.modal-modern .modal-tab-icon {
    font-size: 16px;
    margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9) Tab contents
 *    ─────────────────────────────────────────────────────────────────
 *    کادر جداکننده میان قسمت کنترل پلیر و محتوای تب‌ها (تایم‌لاین، ری‌اکشن
 *    و …) — مشابه کارتِ now-playing. حاشیه‌ی بسیار کم تا فضای محتوا
 *    تقریباً بدون تغییر بماند (~۲px کاهش از هر طرف به‌خاطر border).
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .modal-tab-contents {
    margin: 4px 10px 8px;
    background: var(--mm-bg-card-soft);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-inner);
    /* flex:1; overflow-y:auto از CSS کلاسیک ارث‌بری می‌شود
       (تنها در 2-col mode به grid-area سوییچ می‌کند، در آن حالت
       overflow-y:auto در رول grid مجدداً ست می‌شود) */
}

body.modal-modern .tab-content {
    padding: 12px 14px 16px;
}

body.modal-modern #tab-timeline::before {
    content: 'فعالیت';
    display: block;
    font-size: 12px;
    color: var(--mm-text-muted);
    font-weight: 600;
    margin-bottom: 10px;
    padding-right: 4px;
}

body.modal-modern .timeline-list {
    gap: 10px;
}

body.modal-modern .timeline-item {
    /* 🆕 [NOW-SONG-BG] پس‌زمینه از همان متغیر تم خوانده می‌شود (هم‌رنگ
       با باکس آهنگ فعلی). در صورت عدم وجود، fallback به سفیدِ شفاف. */
    background: rgba(255, 255, 255, .04);
    background: var(--station-now-bg, rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 9px 11px;
    align-items: flex-start;
    gap: 12px;
}

body.modal-modern .timeline-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .06);  /* لغو override کلاسیک */
}

body.modal-modern .timeline-avatar {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, .08);
    background: linear-gradient(135deg,
        var(--station-primary, #8b5cf6),
        var(--station-secondary, #06b6d4));
    font-size: 14px;
}

body.modal-modern .timeline-body {
    font-size: 13px;
    color: var(--mm-text-secondary);
    line-height: 1.5;
}

body.modal-modern .timeline-body strong {
    color: var(--mm-text-primary);
    font-weight: 700;
}

body.modal-modern .timeline-time {
    font-size: 11px;
    color: var(--mm-text-muted);
    margin-top: 3px;
}

body.modal-modern .reactions-grid {
    gap: 8px;
}

body.modal-modern .reaction-btn {
    background: var(--mm-bg-card-soft);
    border: 1px solid var(--mm-border);
    border-radius: 14px;
    padding: 11px 4px;
    transition: all .18s;
}

body.modal-modern .reaction-btn:hover,
body.modal-modern .reaction-btn:active {
    background: var(--mm-bg-card-hover);
    border-color: var(--station-primary, #8b5cf6);
    transform: scale(1.06);
}

body.modal-modern .quick-msg-btn {
    background: var(--mm-bg-card-soft);
    border: 1px solid var(--mm-border);
    border-radius: 12px;
}

body.modal-modern .quick-msg-btn:hover,
body.modal-modern .quick-msg-btn:active {
    background: var(--mm-bg-card-hover);
    border-color: var(--station-primary, #8b5cf6);
}

body.modal-modern .coffee-option {
    background: var(--mm-bg-card-soft);
    border: 1px solid var(--mm-border);
    border-radius: 14px;
}

body.modal-modern .coffee-option:hover,
body.modal-modern .coffee-option:active {
    background: rgba(245, 158, 11, .08);
    border-color: #f59e0b;
}

body.modal-modern .donate-input {
    background: var(--mm-bg-card-soft);
    border: 1px solid var(--mm-border);
    border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9e) Inline emoji در پیام‌های آماده‌ی تایم‌لاین + آیکون پلی در popup-btn
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ایموجی پیام آماده وقتی کاربر آواتار دارد و ایکن avatar fallback نمی‌شود،
   باز هم در متن timeline-body ظاهر شود */
body.modal-modern .qm-inline-emoji {
    display: inline-block;
    font-size: 14px;
    margin: 0 2px;
    vertical-align: -1px;
    line-height: 1;
}

/* آیکون SVG کنار «مشاهده ایستگاه» در popup */
.popup-btn-play-icon {
    flex-shrink: 0;
    margin-inline-end: 6px;
    vertical-align: middle;
    transition: transform .18s ease;
}
.popup-btn:hover .popup-btn-play-icon {
    transform: scale(1.08);
}
/* popup-btn به flex تبدیل می‌شود تا svg و text کنار هم باشند */
.popup-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9d) تسری رنگ متن تم ایستگاه روی همه‌ی متن‌های تب‌ها
 *     ─────────────────────────────────────────────────────────────────
 *     ادمین کل سایت در ویرایش تم‌ها → text_color را عوض می‌کند →
 *     روی همه‌ی متن‌های ردیف‌های تایم‌لاین، پیام‌های آماده، و
 *     متن‌های تب حمایت اعمال می‌شود.
 *
 *     ⚠️ این بخش باید قبل از سکشن 9b (دکمه‌های accent ثابت) قرار
 *     بگیرد تا قواعد accent (طلایی، قرمز، …) با cascade برنده شوند.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* پایه: همه‌ی محتوای تب‌ها رنگ متن تم را به ارث می‌برد */
body.modal-modern .tab-content {
    color: var(--station-text-color, var(--mm-text-secondary));
}

/* paragraphها (شامل متن‌های inline-styled در tab-coffee) و متن‌های اصلی */
body.modal-modern .tab-content p,
body.modal-modern .timeline-body,
body.modal-modern .quick-msg-btn,
body.modal-modern .coffee-option .coffee-text {
    color: var(--station-text-color, inherit);
}

/* override رنگ inline-style های قدیمی (var(--text-primary)/--text-muted)
   که در صفحه‌ی ویرایش‌نشده‌ی index.html روی برخی <p>ها به‌صورت inline
   ست شده‌اند. selector با specificity 0,2,1 + خاصیت ‎color‎. */
body.modal-modern #tab-coffee p[style*="color"],
body.modal-modern .invite-section p[style*="color"] {
    color: var(--station-text-color, inherit) !important;
}

/* نام‌های پررنگ در تایم‌لاین (مثلاً نام کاربر) — همان رنگ ولی bold */
body.modal-modern .timeline-body strong {
    color: var(--station-text-color, var(--mm-text-primary));
    font-weight: 700;
}

/* زمان‌های تایم‌لاین (مثلاً "۵ روز پیش") — از همان رنگ متن ولی محو */
body.modal-modern .timeline-time {
    color: var(--station-text-color, var(--mm-text-muted));
    opacity: .58;
}

/* اعداد فارسی در زمان‌های تایم‌لاین تنظیم می‌شوند، اما اگر به هر دلیل
   لاتین رندر شد، تابع تایپ‌فیس عددی tabular-nums خوانایی را حفظ می‌کند */
body.modal-modern .timeline-time {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* اکسنت‌های ثابت که نباید با تم عوض شوند: */
body.modal-modern .quick-msg-btn .coin-cost {
    color: #fbbf24;  /* قیمت سکه پیام آماده — طلایی ثابت */
}

body.modal-modern .coffee-option .coffee-price {
    color: #fbbf24;  /* قیمت قهوه — طلایی ثابت */
    opacity: .9;
}

/* سکشن rating در تب حمایت — حفظ خوانایی متن */
body.modal-modern .rating-section p,
body.modal-modern .coffee-section p,
body.modal-modern .donate-section p {
    color: var(--station-text-color, inherit);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9b) دکمه‌های با پس‌زمینه‌ی ثابت — مستقل از تم ایستگاه
 *     ─────────────────────────────────────────────────────────────────
 *     این گروه از دکمه‌ها نباید رنگشان با تم ایستگاه عوض شود (چون مفهوم
 *     عملکردی دارند، نه برندینگ ایستگاه): دکمه‌ی دانلود، دکمه‌های لایک در
 *     تایم‌لاین، و دکمه‌های مقدار از پیش‌تعریف‌شده‌ی اهدای سکه.
 *
 *     پس‌زمینه‌ی ثابت تیره (var(--mm-btn-surface)) که با هر تم ایستگاه
 *     خوانا باقی می‌ماند و رنگ متن داخلش (طلایی برای دانلود، قرمز برای
 *     لایک، سفید برای پرست‌ها) با آن hi-contrast است.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern {
    --mm-btn-surface:        #1c1c28;  /* solid neutral، بدون تأثیر از تم */
    --mm-btn-surface-hover:  #26263a;
    --mm-btn-text:           rgba(255, 255, 255, .92);
}

/* پرست‌های اهدای سکه — قبلاً translucent بود و تم نشت می‌کرد. حالا solid. */
body.modal-modern .donate-preset {
    background: var(--mm-btn-surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: var(--mm-btn-text);
    transition: all .18s ease;
}

body.modal-modern .donate-preset:hover,
body.modal-modern .donate-preset:active {
    background: var(--mm-btn-surface-hover);
    border-color: rgba(245, 158, 11, .45);
    color: #f59e0b;
}

/* دکمه‌های لایک در تایم‌لاین (هر دو نوع class).
   حالت لایک‌شده ‎.liked‎ از طریق specificity بیشتر (دو کلاس) برنده می‌شود. */
body.modal-modern .tl-like-btn,
body.modal-modern .timeline-like-btn {
    background: var(--mm-btn-surface);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .65);
}

body.modal-modern .tl-like-btn:hover,
body.modal-modern .timeline-like-btn:hover {
    background: var(--mm-btn-surface-hover);
    border-color: rgba(231, 76, 60, .4);
    color: #e74c3c;
}

body.modal-modern .tl-like-btn.liked,
body.modal-modern .timeline-like-btn.liked {
    background: rgba(231, 76, 60, .14);
    border-color: rgba(231, 76, 60, .55);
    color: #e74c3c;
}

/* دکمه‌ی دانلود — gradient طلایی-بنفش قبلی translucent بود (rgba) و تم
   ایستگاه از پشتش نشت می‌کرد. اینجا surface را solid می‌کنیم و طلایی
   فقط برای رنگ متن و حاشیه و glow استفاده می‌شود (نه پس‌زمینه). */
body.modal-modern .premium-download-inline {
    background: var(--mm-btn-surface);
    border: 1.5px solid rgba(251, 191, 36, .55);
    color: #fbbf24;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

body.modal-modern .premium-download-inline:hover {
    background: var(--mm-btn-surface-hover);
    border-color: #fbbf24;
    color: #fff;
    box-shadow: 0 6px 14px rgba(251, 191, 36, .35);
}

/* وقتی کاربر premium دارد، حاشیه/متن سبز می‌شود */
body.modal-modern .premium-download-inline.has-premium {
    background: var(--mm-btn-surface);
    border-color: rgba(16, 185, 129, .55);
    color: #10b981;
}

body.modal-modern .premium-download-inline.has-premium:hover {
    background: var(--mm-btn-surface-hover);
    border-color: #10b981;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9c) باکس "آهنگ بعدی" — رنگ‌پذیر از تم ایستگاه
 *     ─────────────────────────────────────────────────────────────────
 *     ادمین کل می‌تواند برای هر تم رنگ پس‌زمینه و رنگ متن باکس آهنگ بعدی
 *     را در صفحه‌ی مدیریت تم‌ها مشخص کند. این مقادیر از طریق
 *     ‎--station-next-bg‎ و ‎--station-next-text‎ روی container ست می‌شوند
 *     (در map2.js → _applyStationToModal) و اینجا اعمال می‌شوند.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.modal-modern .next-song-row {
    background: var(--station-next-bg, rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .04);
    color: var(--station-next-text, var(--mm-text-secondary));
    /* padding/radius/font-size از CSS کلاسیک ارث می‌رسد */
}

body.modal-modern .next-song-row .next-label,
body.modal-modern .next-song-row .next-title,
body.modal-modern .next-song-row .next-artist {
    color: inherit;  /* همه‌ی فرزندان رنگ‌شان از --station-next-text می‌آید */
}

body.modal-modern .next-song-row .next-label,
body.modal-modern .next-song-row .next-artist {
    opacity: .75;  /* label و artist کمی محو نسبت به title */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 10) Responsive
 *
 *     • mobile (<768px):       bottom-sheet، تک‌ستونه. کنترل‌ها روبه‌روی bar.
 *     • tablet (768-1099px):   کارت وسط، تک‌ستونه. کنترل‌ها روبه‌روی bar.
 *     • desktop (≥1100px):     کارت دوستونه. کنترل‌ها زیر bar (قسمت پلیر باریک).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──── single-column layout (موبایل + تبلت): controls روبه‌روی progress bar ────
 *
 *  چیدمان grid داخل .modal-player-section در حالت تک‌ستونه:
 *
 *      ┌──────────────────────────────────────────┐
 *      │  Now playing (cover + info)              │  row 1 — full
 *      ├──────────────────────────────┬───────────┤
 *      │  ━━━━━ progress bar ━━━━━━     │ ▶  🔊      │  row 2
 *      │   (col 1, 1fr)                │ (col 2)   │
 *      ├──────────────────────────────┼───────────┤
 *      │  0:30          2:34          │           │  row 3 — times فقط col1
 *      └──────────────────────────────┴───────────┘
 *
 *  در RTL: col 1 = راست بصری (پروگرس) ، col 2 = چپ بصری (کنترل‌ها).
 *  این چیدمان فضای عمودی player-section را به ~۴۰٪ کاهش می‌دهد
 *  و فضای بیشتر برای تب timeline و reactions باز می‌شود.
 *
 *  ⚠️ تکنیک: روی .progress-section کلاس display:contents می‌گذاریم
 *  تا فرزندانش (bar wrap + times) مستقیماً عضو grid مادر شوند، بدون
 *  نیاز به تغییر HTML. سپس bar را با align-self:center با مرکز
 *  دکمه play هم‌سطح می‌کنیم.
 *
 *  flex-direction: row-reverse روی player-controls تا در RTL
 *  دکمه play (HTML #2) به‌جای mute (HTML #1) به‌سمت bar (یعنی راست
 *  این cell) قرار بگیرد — کنار bar.
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
    body.modal-modern .modal-player-section {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "connection  connection"
            "now-playing now-playing"
            "progress    controls"
            "times       .       ";
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
    }

    /* 🆕 [LIVE-LISTENERS-GRID-V2] connection-bar در ردیف اول grid قرار می‌گیرد
       و در مرکز قرار می‌گیرد (طبق درخواست کاربر). */
    body.modal-modern .connection-bar {
        grid-area: connection;
        justify-self: center;
    }

    body.modal-modern .now-playing-section {
        grid-area: now-playing;
        margin-bottom: 4px;
    }

    /* progress-section از layout flow حذف می‌شود تا فرزندانش
       مستقیم در grid قرار بگیرند */
    body.modal-modern .progress-section {
        display: contents;
    }

    body.modal-modern .progress-bar-wrap {
        grid-area: progress;
        align-self: center;
    }

    body.modal-modern .progress-times {
        grid-area: times;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }

    body.modal-modern .player-controls {
        grid-area: controls;
        padding: 0;
        gap: 8px;
        flex-direction: row-reverse;  /* play به‌سمت bar در RTL */
    }
}

/* ──── موبایل (<768px) ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.modal-modern .modal-container {
        max-width: 100%;
        height: 96vh;
        max-height: 96vh;
        border-radius: var(--mm-radius-card) var(--mm-radius-card) 0 0;
    }

    body.modal-modern .modal-hero {
        margin: 8px 8px 0;
        padding-top: 42%;
    }

    body.modal-modern .modal-hero h2 {
        font-size: 19px;
        bottom: 50px;
    }

    body.modal-modern .modal-hero p {
        font-size: 10.5px;
        bottom: 34px;
    }

    body.modal-modern .modal-hero-meta {
        bottom: 10px;
    }

    /* اندازه دکمه‌های پلیر روی موبایل کمی کوچک‌تر */
    body.modal-modern .ctrl-btn.play-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    body.modal-modern .ctrl-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    body.modal-modern .np-cover {
        width: 58px;
        height: 58px;
    }

    body.modal-modern .now-playing-row {
        grid-template-columns: 58px 1fr;
        gap: 10px;
    }

    body.modal-modern .np-title {
        font-size: 14px;
    }

    body.modal-modern .np-artist {
        font-size: 11.5px;
    }

    body.modal-modern .modal-player-section {
        padding: 8px 10px 6px;
    }

    body.modal-modern .now-playing-section {
        padding: 9px 10px;
        margin-bottom: 4px;
    }

    /* روی موبایل کادر tab-contents فشرده‌تر */
    body.modal-modern .modal-tab-contents {
        margin: 4px 8px 6px;
    }
}

/* ──── گوشی‌های خیلی کوچک ─────────────────────────────────────────────── */
@media (max-width: 380px) {
    body.modal-modern .modal-hero h2 {
        font-size: 17px;
    }
    body.modal-modern .modal-hero {
        padding-top: 40%;
    }
    body.modal-modern .player-controls {
        gap: 6px;
    }
}

/* ──── تبلت/دسکتاپ کوچک (768-1099px): کارت وسط، تک‌ستونه ──────────── */
@media (min-width: 768px) {
    body.modal-modern .station-modal {
        align-items: center;
        padding: 20px;
    }

    body.modal-modern .modal-container {
        max-width: 480px;
        height: min(700px, 92vh);
        max-height: 92vh;
        border-radius: var(--mm-radius-card);
        border-bottom: 1px solid var(--mm-border-strong);
        animation: mmModalFadeIn .3s ease;
    }

    body.modal-modern .modal-hero {
        padding-top: 42%;
    }

    body.modal-modern .modal-hero h2 {
        font-size: 24px;
        bottom: 56px;
    }

    body.modal-modern .modal-hero p {
        bottom: 38px;
    }
}

/* ──── دسکتاپ پهن (≥1100px): چیدمان دو ستونه ─────────────────────────
 *
 *      ┌─────────────────────────────────────┐
 *      │           HERO (full width)         │
 *      ├─────────────────────┬───────────────┤
 *      │ TAB CONTENTS        │ PLAYER        │
 *      │ (تایم‌لاین، ری‌اکشن) │  Now Playing  │
 *      │  (scrolls)          │  Progress     │
 *      │                     │  Controls     │
 *      ├─────────────────────┴───────────────┤
 *      │       BOTTOM TABS (full width)      │
 *      └─────────────────────────────────────┘
 *
 *  در RTL: ستون اول grid = راست بصری → playerSection
 *          ستون دوم grid = چپ بصری → sideContents
 *  در این حالت، کنترل‌ها زیر progress bar (نه روبه‌رو) ، چون ستون
 *  پلیر باریک است و افقی جا نمی‌گیرند.
 * ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    body.modal-modern .modal-container {
        max-width: 880px;
        height: min(720px, 90vh);
        max-height: 90vh;

        display: grid;
        grid-template-columns: minmax(310px, 360px) 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "playerHero    playerHero"
            "playerSection sideContents"
            "tabsFixed     tabsFixed";

        animation: mmModalFadeIn .3s ease;
    }

    body.modal-modern .modal-hero {
        grid-area: playerHero;
        padding-top: 24%;        /* کم‌عمق چون فول‌عرض است */
        margin: 12px 12px 0;
    }

    body.modal-modern .modal-hero h2 {
        font-size: 26px;
        bottom: 56px;
    }

    body.modal-modern .modal-hero p {
        bottom: 38px;
    }

    /* در حالت دو ستونه، layout داخل player-section به block برمی‌گردد
       (controls زیر progress) ، چون ستون پلیر باریک است */
    body.modal-modern .modal-player-section {
        grid-area: playerSection;
        display: block;
        overflow-y: auto;
        min-height: 0;
        padding: 14px 14px 10px;
        /* border-left حذف شد چون کادرِ tab-contents خودش جداکننده‌ی
           بصری بین دو ستون است — جلوی double-line گرفته می‌شود */
    }

    body.modal-modern .progress-section {
        display: block;
        margin-bottom: 8px;
    }

    body.modal-modern .player-controls {
        flex-direction: row;  /* کلاسیک: mute راست، play چپ (در RTL) */
        gap: 14px;
    }

    body.modal-modern .progress-times {
        margin-top: 6px;
    }

    /* now-playing روی دسکتاپ کمی بزرگ‌تر */
    body.modal-modern .now-playing-row {
        grid-template-columns: 72px 1fr;
        gap: 14px;
    }

    body.modal-modern .np-cover {
        width: 72px;
        height: 72px;
    }

    body.modal-modern .np-title {
        font-size: 16px;
    }

    body.modal-modern .modal-tab-contents {
        grid-area: sideContents;
        overflow-y: auto;
        min-height: 0;
        /* margin بازتنظیم برای 2-col: فاصله از hero بالا و tabs پایین،
           و از player section در سمت inline-end (راست بصری در RTL) */
        margin: 8px 10px 8px 0;
    }

    body.modal-modern .modal-tabs-fixed {
        grid-area: tabsFixed;
    }

    /* close+min در 2-col: روی hero فول‌عرض، گوشه چپ بالا */
}

@keyframes mmModalFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.modal-modern .modal-hero::before {
        animation: none;
    }
    body.modal-modern .np-eq span,
    body.modal-modern .now-playing-row:has(.np-cover.playing) .np-eq span {
        animation: none !important;
        height: 5px;
    }
}