.play-btn {
     position: relative;
     overflow: hidden;
 }

 .play-btn.loading {
     pointer-events: none;
 }

 .play-loading {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.35);
     border-radius: 50%;
     z-index: 5;
 }

 .play-loading .spinner {
     width: 18px;
     height: 18px;
     border: 3px solid rgba(0, 0, 0, 0.2);
     border-top: 3px solid #000;
     border-radius: 50%;
     animation: spin .8s linear infinite;
 }


 /* ===============================
   Mini Player – Compatible with .app
================================= */

 /* ===============================
   Mini Player – Final Version
   Initial state: hidden
================================ */

 .mini-player {
     position: fixed;
     bottom: calc(60px + env(safe-area-inset-bottom));
     width: 390px;
     left: 50%;

     /* حالت پیش‌فرض (لود صفحه) */
     opacity: 0;
     pointer-events: none;
     transform: translate(-50%, 20%);

     background: #ffffff;
     border-top: 1px solid #eee;
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);

     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;

     padding: 10px 12px;
     border-radius: 14px 14px 0 0;

     z-index: 3000;

     transition:
         opacity .25s ease,
         transform .28s ease;
 }

 /* حالت نمایش */
 .mini-player.visible {
     opacity: 1 !important;
     pointer-events: auto !important;
     transform: translate(-50%, 0) !important;
 }


 /* حالت مخفی (اسلاید به پایین) */
 .mini-player.hidden {
     opacity: 0;
     pointer-events: none;
     transform: translate(-50%, 120%);
 }

 /* ===============================
   Left Section (Cover + Info)
================================ */
 .mini-left {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 120px;
 }

 .mini-left img {
     width: 46px;
     height: 46px;
     border-radius: 10px;
     object-fit: cover;
 }

 /* ===============================
   Song Info
================================ */
 .mini-info {
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .mini-title {
     font-size: 13px;
     font-weight: 700;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .mini-artist {
     font-size: 11px;
     color: #777;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* ===============================
   Seek Bar
================================ */
 .mini-center {
     flex: 1;
 }

 #mini-seek {
     width: 100%;
     appearance: none;
     height: 4px;
     background: #e1e1e1;
     border-radius: 3px;
     outline: none;
     /* transform: scaleX(-1); */
 }

 #mini-seek::-webkit-slider-thumb {
     appearance: none;
     width: 10px;
     height: 10px;
     background: #28a965;
     border-radius: 50%;
     cursor: pointer;
 }

 /* ===============================
   Controls
================================ */
 .mini-right {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .mini-btn {
     background: none;
     border: none;
     font-size: 18px;
     color: #28a965;
     padding: 6px;
     cursor: pointer;
 }

 .mini-btn:active {
     transform: scale(0.9);
 }

 /* مخصوص iOS PWA */
 body.ios-pwa .mini-player {
     bottom: 60px !important;
     /* دقیقا مثل اندروید */
 }


 .mini-time {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: #666;
     margin-top: 2px;
 }

 .content.player-open {
     padding-bottom: 130px;
     /* کمی بزرگتر از ارتفاع واقعی پلیر */
     transition: padding-bottom 0.25s ease;
 }