/* موزیک پلیر سراسری (player.js): مینی‌پلیر شناور و جمع‌شونده.
   حالت بسته: فقط یک دکمه‌ی کوچک گوشه‌ی پایین راست. پنل با کلیک باز می‌شود و بعد از ۵ ثانیه بی‌تعاملی جمع می‌شود.
   رنگ‌ها از متغیرهای تم سایت می‌آیند؛ تم روشن و تیره خودکار هماهنگ است.
   جای دکمه را با --gp-gap (فاصله از لبه) و --gp-lift (بالاتر بردن، مثلاً اگر کنترل شناور دیگری آنجاست) می‌شود تنظیم کرد. */
:root { --gp-h: 0px; --gp-gap: 16px; --gp-lift: 0px; --gp-fab: 36px; }

/* خود #gp فقط هم‌اندازه‌ی دکمه است و جایی از صفحه نمی‌گیرد؛ لایه‌ی تمام‌صفحه ندارد */
.gp { position: fixed; z-index: 70; width: var(--gp-fab); height: var(--gp-fab); right: max(var(--gp-gap), env(safe-area-inset-right)); bottom: calc(max(var(--gp-gap), env(safe-area-inset-bottom)) + var(--gp-lift)); color: var(--fg); direction: rtl; }
.gp [hidden] { display: none !important; }

/* ---------- دکمه‌ی شناور ---------- */
.gp-fab { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--accent); box-shadow: var(--shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.gp-fab:active { transform: scale(.94); }
.gp-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-fab:focus-visible, .gp-btn:focus-visible, .gp-text:focus-visible, .gp-item-play:focus-visible, .gp-item-del:focus-visible, .gp-seek:focus-visible, .gp-volrange:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* وضعیت پخش: نت به سه میله‌ی ظریف تبدیل می‌شود */
.gp-eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.gp-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: gp-eq 1s ease-in-out infinite; }
.gp-eq i:nth-child(2) { animation-delay: -.35s; }
.gp-eq i:nth-child(3) { animation-delay: -.7s; }
.gp.is-playing .gp-fab { background: var(--accent); color: #fff; border-color: transparent; }
.gp.is-playing .gp-fab-note { display: none; }
.gp.is-playing .gp-eq { display: inline-flex; }
@keyframes gp-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- پنل ---------- */
/* absolute نسبت به دکمه: جریان صفحه را تغییر نمی‌دهد. در حالت بسته visibility:hidden و pointer-events:none دارد، پس نه کلیک می‌گیرد و نه فوکوس */
.gp-sheet { position: absolute; right: 0; bottom: calc(100% + 10px); box-sizing: border-box; width: min(320px, calc(100vw - var(--gp-gap) - var(--gp-gap))); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); display: flex; flex-direction: column; overflow: hidden; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(20px) scale(.97); transform-origin: 100% 100%;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s; }
.gp.is-open .gp-sheet { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.gp-top { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.gp-head { display: flex; align-items: center; gap: 8px; }
.gp-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: .95rem; }
.gp-time { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.gp-seek { width: 100%; margin: 0; accent-color: var(--accent); }
.gp-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.gp-vol { display: flex; align-items: center; gap: 6px; }
.gp-volrange { flex: 1; min-width: 0; accent-color: var(--accent); }

.gp-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); cursor: pointer; }
.gp-btn svg { width: 20px; height: 20px; fill: currentColor; }
.gp-main { background: var(--accent); color: #fff; border-color: transparent; }
.gp-small { width: 32px; height: 32px; }
.gp-small svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-text { width: auto; height: 36px; padding: 0 12px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; }
.gp-controls .gp-text { margin-inline-start: auto; }

/* ---------- فهرست داخل پنل: خودش اسکرول می‌خورد و اسکرولش به صفحه منتقل نمی‌شود ---------- */
.gp-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding: 10px 12px 12px; }
.gp-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gp-group { margin: 10px 0 4px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.gp-note { margin: 6px 0; color: var(--muted); font-size: .82rem; }
.gp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gp-item { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.gp-item.is-current { border-color: var(--accent); }
.gp-item-play { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: none; border: 0; color: var(--fg); font: inherit; text-align: start; cursor: pointer; }
.gp-item-title { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.gp-item-sub { color: var(--muted); font-size: .78rem; }
.gp-item-del { padding: 8px 10px; border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
.gp-empty, .gp-status { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }
.gp-status:empty { display: none; }

.is-navigating main { opacity: .55; transition: opacity .15s ease; }
@media (max-width: 640px) {
  :root { --gp-gap: 12px; --gp-fab: 34px; }
  .gp-sheet { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-navigating main { transition: none; }
  .gp-fab, .gp-sheet, .gp.is-open .gp-sheet { transition: none; }
  .gp-sheet { transform: none; }
  .gp-eq i { animation: none; }
  .gp-eq i:nth-child(1) { transform: scaleY(.55); }
  .gp-eq i:nth-child(2) { transform: scaleY(1); }
  .gp-eq i:nth-child(3) { transform: scaleY(.75); }
}
@media print { .gp { display: none; } }

/* ---------- افزوده‌های مرحله‌ی ۴: تکرار، تصادفی، ادامه‌ی پخش، صف و افزودن به صف ---------- */
.gp-modes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.gp-text[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
.gp-resume { border-color: var(--accent); color: var(--accent); }
.gp-item-add { padding: 8px 10px; border: 0; background: none; color: var(--accent); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.gp-item-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-item.is-current .gp-item-title { color: var(--accent); }

/* هدر پخش: دیسک، وضعیت، نام و زیرعنوان (از نسخه‌ی فعلی سایت حفظ شده) */
.gp { --gp-hue: 262; --gp-surface: var(--card, Canvas); --gp-muted: var(--muted, GrayText); --gp-accent: var(--accent, #7c5cff); }
/* هدر: دیسک، نام آهنگ، بستن */
.gp-now { display: flex; align-items: center; gap: 12px; }
.gp-disc { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: conic-gradient(from 20deg, hsl(var(--gp-hue) 78% 60%), hsl(calc(var(--gp-hue) + 55) 78% 52%), hsl(var(--gp-hue) 78% 60%)); box-shadow: 0 4px 14px hsl(var(--gp-hue) 78% 50% / .35); }
.gp-disc::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--gp-surface); opacity: .18; }
.gp-disc svg { position: relative; z-index: 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp.is-playing .gp-disc { animation: gp-spin 7s linear infinite; }
.gp.is-playing .gp-disc svg { animation: gp-spin 7s linear infinite reverse; }
@keyframes gp-spin { to { transform: rotate(360deg); } }
.gp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gp-kicker { font-size: .72rem; font-weight: 700; color: var(--gp-accent); }
.gp-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 1rem; line-height: 1.5; }
.gp-sub { min-height: 1.2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gp-muted); font-size: .78rem; }
.gp-close { align-self: flex-start; }

/* نوار پیشرفت و صدا (هر دو چپ‌به‌راست) */

/* مرحله ۵: پیوند رسمی Spotify */
.m-sp-embed:empty { display: none; }
.m-sp-embed iframe { display: block; width: 100%; border: 0; border-radius: 12px; margin-top: 8px; }