/* =========================================================
   Music FM — Floating Player Clean V2
   מבוסס על הנגן שעובד, עיצוב בלבד בלי לשבור JS
========================================================= */
:root{
    --mfp-blue:#147cff;
    --mfp-blue-dark:#005bea;
    --mfp-cyan:#59c7ff;
    --mfp-ink:#111827;
    --mfp-muted:#667085;
    --mfp-line:#dfe7f3;
    --mfp-soft:#f8fbff;
}

.mf-player-shell,
.mf-player-shell *{box-sizing:border-box}

.mf-player-shell{
    position:fixed !important;
    left:18px !important;
    right:auto !important;
    bottom:18px !important;
    z-index:999990 !important;
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    direction:rtl !important;
    font-family:"Heebo",Arial,sans-serif !important;
    color:var(--mfp-ink) !important;
}

.mf-player-shell.mf-player-position-bottom-left{
    left:18px !important;
    right:auto !important;
    bottom:18px !important;
    transform:none !important;
}

.mf-player-hidden,
.mf-youtube-frame{display:none !important}

.mf-player-shell button,
.mf-player-shell a{
    font-family:inherit !important;
    -webkit-tap-highlight-color:transparent !important;
}

/* MINI — קטן, ברור, שמאלי */
.mf-mini-toggle{
    width:286px !important;
    max-width:calc(100vw - 24px) !important;
    min-height:58px !important;
    display:grid !important;
    grid-template-columns:34px 34px minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;
    padding:9px 11px !important;
    border:1px solid rgba(223,231,243,.95) !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.96) !important;
    color:var(--mfp-ink) !important;
    cursor:pointer !important;
    box-shadow:0 14px 34px rgba(15,35,70,.12) !important;
    backdrop-filter:blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
    overflow:hidden !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.mf-mini-toggle:hover{
    transform:translateY(-2px) !important;
    border-color:rgba(20,124,255,.30) !important;
    box-shadow:0 18px 40px rgba(15,35,70,.16) !important;
}

.mf-player-shell.open .mf-mini-toggle{display:none !important}

.mf-mini-wave{
    width:34px !important;
    height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    border-radius:4px !important;
    background:#eef6ff !important;
    border:1px solid #dbeafe !important;
}

.mf-mini-wave i{
    width:3px !important;
    height:12px !important;
    border-radius:99px !important;
    background:var(--mfp-blue) !important;
    opacity:.75 !important;
    animation:mfpBars 1.05s infinite ease-in-out !important;
}
.mf-mini-wave i:nth-child(2){height:18px !important;animation-delay:.12s !important}
.mf-mini-wave i:nth-child(3){height:9px !important;animation-delay:.24s !important}
.mf-mini-wave i:nth-child(4){height:15px !important;animation-delay:.36s !important}

.mf-mini-icon{
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:4px !important;
    background:linear-gradient(135deg,var(--mfp-blue),var(--mfp-cyan)) !important;
    color:#fff !important;
    box-shadow:0 10px 20px rgba(20,124,255,.18) !important;
}
.mf-mini-icon i{font-size:15px !important;line-height:1 !important}

.mf-mini-text{min-width:0 !important;text-align:right !important;line-height:1.1 !important}
.mf-mini-text strong{
    display:block !important;
    color:var(--mfp-ink) !important;
    font-size:14px !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.mf-mini-text small{
    display:block !important;
    margin-top:4px !important;
    color:var(--mfp-muted) !important;
    font-size:11.5px !important;
    font-weight:850 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* hide old mobile mini x unless hidden mode is used */
.mf-mini-hide-btn{display:none !important}

/* OPEN CARD */
.mf-player-card{
    display:none !important;
    width:352px !important;
    max-width:calc(100vw - 24px) !important;
    overflow:hidden !important;
    border:1px solid rgba(223,231,243,.98) !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 22px 58px rgba(15,35,70,.18) !important;
    backdrop-filter:blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
}
.mf-player-shell.open .mf-player-card{
    display:block !important;
    animation:mfpOpen .22s cubic-bezier(.16,1,.3,1) both !important;
}

.mf-player-top{
    display:grid !important;
    grid-template-columns:74px minmax(0,1fr) 34px !important;
    gap:12px !important;
    align-items:center !important;
    padding:14px !important;
    background:linear-gradient(180deg,#fff 0%,#f8fbff 100%) !important;
    border-bottom:1px solid #edf2f8 !important;
}

.mf-player-cover{
    position:relative !important;
    width:74px !important;
    height:74px !important;
    border-radius:4px !important;
    overflow:hidden !important;
    background:#071832 !important;
    box-shadow:0 10px 22px rgba(15,35,70,.13) !important;
}
.mf-player-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:0 !important;
}
.mf-cover-signal{
    position:absolute !important;
    left:6px !important;
    bottom:6px !important;
    height:18px !important;
    min-width:28px !important;
    display:flex !important;
    align-items:end !important;
    justify-content:center !important;
    gap:2px !important;
    padding:4px !important;
    border-radius:3px !important;
    background:rgba(3,8,18,.52) !important;
}
.mf-cover-signal i{
    width:3px !important;
    border-radius:99px !important;
    background:#59c7ff !important;
    animation:mfpBars .95s infinite ease-in-out !important;
}
.mf-cover-signal i:nth-child(1){height:7px !important}
.mf-cover-signal i:nth-child(2){height:12px !important;animation-delay:.13s !important}
.mf-cover-signal i:nth-child(3){height:9px !important;animation-delay:.26s !important}

.mf-player-info{min-width:0 !important;text-align:right !important}
.mf-player-kicker{
    display:inline-flex !important;
    align-items:center !important;
    min-height:22px !important;
    padding:0 8px !important;
    border-radius:3px !important;
    background:#147cff !important;
    color:#fff !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:950 !important;
}
.mf-player-title{
    margin-top:8px !important;
    color:var(--mfp-ink) !important;
    font-size:17px !important;
    line-height:1.18 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.mf-player-meta{
    margin-top:4px !important;
    color:var(--mfp-muted) !important;
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.mf-player-icon-btn{
    width:32px !important;
    height:32px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #e4ebf5 !important;
    border-radius:4px !important;
    background:#fff !important;
    color:#475467 !important;
    cursor:pointer !important;
    transition:.18s ease !important;
}
.mf-player-icon-btn:hover{color:#147cff !important;border-color:#cfe4ff !important;background:#eef6ff !important}
.mf-player-icon-btn i{font-size:14px !important;line-height:1 !important}

/* PROGRESS */
.mf-player-progress-wrap{
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) 38px !important;
    gap:9px !important;
    align-items:center !important;
    padding:13px 14px 6px !important;
}
.mf-player-time{
    color:#667085 !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:850 !important;
    direction:ltr !important;
    text-align:center !important;
}
.mf-player-seek{
    position:relative !important;
    width:100% !important;
    height:5px !important;
    border-radius:999px !important;
    background:#dbe4f0 !important;
    cursor:pointer !important;
}
.mf-player-seek-fill{
    position:absolute !important;
    inset:0 auto 0 0 !important;
    width:0 !important;
    border-radius:inherit !important;
    background:linear-gradient(90deg,#59c7ff,#147cff) !important;
}
.mf-player-seek-thumb{
    position:absolute !important;
    top:50% !important;
    left:0 !important;
    width:13px !important;
    height:13px !important;
    border:2px solid #fff !important;
    border-radius:50% !important;
    background:#147cff !important;
    box-shadow:0 4px 10px rgba(20,124,255,.24) !important;
    transform:translate(-50%,-50%) !important;
    padding:0 !important;
}

/* CONTROLS */
.mf-player-controls{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:11px 14px 13px !important;
}
.mf-player-btn{
    width:38px !important;
    height:38px !important;
    display:inline-grid !important;
    place-items:center !important;
    border:1px solid #e4ebf5 !important;
    border-radius:4px !important;
    background:#fff !important;
    color:#111827 !important;
    cursor:pointer !important;
    transition:transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}
.mf-player-btn:hover{
    transform:translateY(-1px) !important;
    color:#147cff !important;
    border-color:#cfe4ff !important;
    background:#eef6ff !important;
}
.mf-player-btn.main{
    width:48px !important;
    height:48px !important;
    border-color:#147cff !important;
    background:#147cff !important;
    color:#fff !important;
    box-shadow:0 12px 24px rgba(20,124,255,.22) !important;
}
.mf-player-btn.main:hover{background:#005bea !important;color:#fff !important}
.mf-player-btn.text{
    width:auto !important;
    min-width:94px !important;
    padding:0 10px !important;
    grid-auto-flow:column !important;
    gap:7px !important;
    font-size:12px !important;
    font-weight:950 !important;
}
.mf-player-btn i,.mf-player-btn .mf-control-symbol{font-size:15px !important;line-height:1 !important}
.mf-player-btn.main i,.mf-player-btn.main .mf-control-symbol{font-size:17px !important}

/* YouTube note */
.mf-youtube-note{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    margin:0 14px 12px !important;
    min-height:32px !important;
    padding:0 10px !important;
    border:1px solid #edf2f8 !important;
    border-radius:4px !important;
    background:#fbfdff !important;
    color:#667085 !important;
    font-size:11.5px !important;
    line-height:1 !important;
    font-weight:850 !important;
}
.mf-youtube-icon{
    color:#ef4444 !important;
    display:grid !important;
    place-items:center !important;
}
.mf-youtube-icon i{font-size:13px !important}

/* unnecessary visual blocks */
.mf-player-volume-visual,
.mf-player-feature-row{display:none !important}

/* QUEUE PANEL */
.mf-player-panel{
    display:none !important;
    border-top:1px solid #edf2f8 !important;
    background:#fff !important;
    padding:12px 14px 14px !important;
    max-height:216px !important;
    overflow:auto !important;
}
.mf-player-shell.show-list .mf-player-panel{display:block !important}
.mf-player-panel-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:10px !important;
}
.mf-player-panel-head span{
    color:#111827 !important;
    font-size:13px !important;
    font-weight:950 !important;
}
.mf-player-panel-head small{
    color:#147cff !important;
    font-size:12px !important;
    font-weight:950 !important;
}
.mf-player-list{
    display:grid !important;
    gap:7px !important;
}
.mf-player-item{
    width:100% !important;
    min-height:48px !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 28px !important;
    align-items:center !important;
    gap:9px !important;
    padding:5px !important;
    border:1px solid #edf2f8 !important;
    border-radius:4px !important;
    background:#fbfdff !important;
    color:#111827 !important;
    cursor:pointer !important;
    text-align:right !important;
    transition:.16s ease !important;
}
.mf-player-item:hover,.mf-player-item.active{
    background:#eef6ff !important;
    border-color:#cfe4ff !important;
}
.mf-player-item img{
    width:38px !important;
    height:38px !important;
    object-fit:cover !important;
    border-radius:3px !important;
    background:#071832 !important;
}
.mf-player-item span{min-width:0 !important}
.mf-player-item strong{
    display:block !important;
    color:#111827 !important;
    font-size:13px !important;
    line-height:1.18 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.mf-player-item small{
    display:block !important;
    margin-top:3px !important;
    color:#667085 !important;
    font-size:11px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.mf-player-list-action{
    width:26px !important;
    height:26px !important;
    display:grid !important;
    place-items:center !important;
    color:#147cff !important;
    font-size:18px !important;
}

/* toast + restore */
.mf-player-toast{
    position:fixed !important;
    left:18px !important;
    bottom:88px !important;
    z-index:999991 !important;
    max-width:300px !important;
    padding:10px 13px !important;
    border:1px solid #dfe7f3 !important;
    border-radius:4px !important;
    background:#111827 !important;
    color:#fff !important;
    font-family:"Heebo",Arial,sans-serif !important;
    font-size:13px !important;
    font-weight:900 !important;
    box-shadow:0 14px 34px rgba(15,35,70,.20) !important;
    opacity:0 !important;
    transform:translateY(12px) !important;
    pointer-events:none !important;
    transition:.2s ease !important;
}
.mf-player-toast.show{opacity:1 !important;transform:translateY(0) !important}
.mf-player-restore{display:none !important}

/* Mobile */
@media(max-width:720px){
    .mf-player-shell{
        left:10px !important;
        right:10px !important;
        bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;
        max-width:none !important;
    }
    .mf-mini-toggle{
        width:100% !important;
        min-height:56px !important;
        grid-template-columns:32px 32px minmax(0,1fr) !important;
    }
    .mf-player-card{
        width:100% !important;
        max-width:none !important;
    }
    .mf-player-top{
        grid-template-columns:64px minmax(0,1fr) 32px !important;
        padding:12px !important;
    }
    .mf-player-cover{width:64px !important;height:64px !important}
    .mf-player-title{font-size:16px !important}
    .mf-player-controls{gap:7px !important;padding-inline:12px !important}
    .mf-player-btn{width:36px !important;height:36px !important}
    .mf-player-btn.main{width:46px !important;height:46px !important}
    .mf-player-btn.text{min-width:84px !important;font-size:11.5px !important}
    .mf-player-toast{left:10px !important;right:10px !important;bottom:calc(152px + env(safe-area-inset-bottom,0px)) !important;max-width:none !important}
}

@media(max-width:390px){
    .mf-player-btn.text span{display:none !important}
    .mf-player-btn.text{min-width:38px !important;width:38px !important;padding:0 !important}
    .mf-player-controls{gap:6px !important}
}

@keyframes mfpOpen{
    from{opacity:0; transform:translateY(10px) scale(.985); filter:blur(4px)}
    to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}
@keyframes mfpBars{
    0%,100%{transform:scaleY(.65);opacity:.55}
    50%{transform:scaleY(1);opacity:1}
}
@media(prefers-reduced-motion:reduce){
    .mf-player-shell *, .mf-player-shell *::before, .mf-player-shell *::after{
        animation:none !important; transition:none !important; transform:none !important;
    }
}

/* =========================================================
   Music FM V2 — Mobile Unified Bottom Player POC
   הנגן הופך לחלק מהתפריט התחתון במובייל בלבד
========================================================= */
@media(max-width:720px){
    body{
        padding-bottom:calc(86px + env(safe-area-inset-bottom,0px)) !important;
    }

    .mf-player-shell{
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100% !important;
        max-width:none !important;
        z-index:999992 !important;
        pointer-events:none !important;
    }

    .mf-player-shell .mf-mini-toggle{
        display:none !important;
    }

    .mf-player-shell.open::before{
        content:"" !important;
        position:fixed !important;
        inset:0 !important;
        background:rgba(2,8,18,.56) !important;
        backdrop-filter:blur(8px) !important;
        -webkit-backdrop-filter:blur(8px) !important;
        pointer-events:auto !important;
        animation:mfpMobileDim .18s ease both !important;
        z-index:-1 !important;
    }

    .mf-player-card{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
        width:100% !important;
        max-width:none !important;
        max-height:calc(100dvh - 118px) !important;
        overflow-y:auto !important;
        border-radius:10px 10px 0 0 !important;
        border:1px solid rgba(89,199,255,.16) !important;
        border-bottom:0 !important;
        background:
            radial-gradient(circle at 88% 0%,rgba(20,124,255,.20),transparent 28%),
            linear-gradient(180deg,#071832 0%,#050d1d 55%,#030713 100%) !important;
        color:#fff !important;
        box-shadow:0 -24px 58px rgba(0,0,0,.42) !important;
        pointer-events:auto !important;
        transform:translateY(108%) !important;
        opacity:0 !important;
    }

    .mf-player-shell.open .mf-player-card{
        display:block !important;
        opacity:1 !important;
        transform:translateY(0) !important;
        animation:mfpMobileSheet .26s cubic-bezier(.16,1,.3,1) both !important;
    }

    .mf-player-card::before{
        content:"" !important;
        display:block !important;
        width:42px !important;
        height:4px !important;
        margin:10px auto 2px !important;
        border-radius:999px !important;
        background:rgba(255,255,255,.28) !important;
    }

    .mf-player-top{
        grid-template-columns:64px minmax(0,1fr) 34px !important;
        padding:10px 14px 12px !important;
        background:transparent !important;
        border-bottom:1px solid rgba(255,255,255,.08) !important;
    }

    .mf-player-cover{
        width:64px !important;
        height:64px !important;
        border-radius:6px !important;
        background:#071832 !important;
        box-shadow:0 14px 28px rgba(0,0,0,.24) !important;
    }

    .mf-player-kicker{
        background:#147cff !important;
        border-radius:4px !important;
        color:#fff !important;
    }

    .mf-player-title,
    .mf-mini-text strong{
        color:#fff !important;
    }

    .mf-player-meta,
    .mf-player-time,
    .mf-youtube-note,
    .mf-player-feature-row small,
    .mf-player-feature-row b{
        color:rgba(226,237,255,.72) !important;
    }

    .mf-player-icon-btn,
    .mf-player-btn,
    .mf-player-list-action{
        border-color:rgba(255,255,255,.12) !important;
        background:rgba(255,255,255,.08) !important;
        color:#fff !important;
        border-radius:6px !important;
    }

    .mf-player-btn.main{
        background:linear-gradient(180deg,#147cff,#005bea) !important;
        color:#fff !important;
        box-shadow:0 16px 30px rgba(20,124,255,.28) !important;
    }

    .mf-player-seek{
        background:rgba(255,255,255,.13) !important;
    }

    .mf-player-seek-fill,
    .mf-player-seek-thumb{
        background:#59c7ff !important;
    }

    .mf-player-panel,
    .mf-player-list,
    .mf-player-item{
        border-color:rgba(255,255,255,.08) !important;
    }

    .mf-player-panel{
        background:rgba(255,255,255,.05) !important;
    }

    .mf-player-item{
        background:rgba(255,255,255,.06) !important;
        color:#fff !important;
        border-radius:6px !important;
    }

    .mf-player-item small{
        color:rgba(226,237,255,.68) !important;
    }

    .mf-player-toast{
        bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;
        border-radius:6px !important;
        background:#071832 !important;
        border-color:rgba(89,199,255,.18) !important;
    }
}

@keyframes mfpMobileSheet{
    from{opacity:0; transform:translateY(100%)}
    to{opacity:1; transform:translateY(0)}
}

@keyframes mfpMobileDim{
    from{opacity:0}
    to{opacity:1}
}