/* MUSIC FOLDER — player-in-playlist | исходник: 4656..4735 */

/* ═══ ПЛЕЕР КАК ЧАСТЬ КАРТОЧКИ ПЛЕЙЛИСТА ═══ */
/* Плейлист ВСЕГДА резервирует место под плеер — сдвига нет */
body.pl-open .pl-card{
padding-bottom:120px;
display:flex;flex-direction:column;
}
body.pl-open .pl-list{
flex:1;overflow-y:auto;max-height:none;min-height:0;
}
/* Плеер пристыкован к низу карточки, выглядит как её часть */
body.pl-open.od-open .od-panel{
position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(20px + env(safe-area-inset-bottom));
width:min(560px,calc(100% - 40px));
border-radius:16px;
border:1px solid rgba(255,255,255,.10);
background:linear-gradient(180deg,rgba(22,24,44,.98),rgba(12,13,26,.99));
box-shadow:0 16px 48px -12px rgba(0,0,0,.85),0 0 24px -8px color-mix(in srgb,var(--c1) 30%,transparent);
animation:odPlIn .35s cubic-bezier(.2,.9,.25,1.08);
z-index:320;
padding:12px 16px 12px;
}
@keyframes odPlIn{from{opacity:0;transform:translateX(-50%) translateY(24px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
body.pl-open.od-open .od-body{
display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto;
gap:6px 12px;align-items:center;padding:0;
}
body.pl-open.od-open .od-cover{grid-row:1;grid-column:1;width:44px;height:44px}
body.pl-open.od-open .od-meta{grid-row:1;grid-column:2}
body.pl-open.od-open .od-ctrls{grid-row:1;grid-column:3;display:flex;gap:6px}
body.pl-open.od-open .od-vol{display:none}
body.pl-open.od-open .od-extra{display:none}
body.pl-open.od-open .od-side{display:none}
body.pl-open.od-open .od-seekrow{padding:0 36px 0 0}
/* мобайл: карточка плейлиста; сам od-плеер — ЕДИНЫЙ стиль из zz-critical (§5),
   здесь больше не переопределяем: раньше отсюда росли скругления 0 и обложка 40px,
   из-за чего плеер в ЛК отличался от главной */
@media(max-width:640px){
body.pl-open .pl-card{
max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
border-radius:20px 20px 0 0;padding-bottom:110px;
}
}
.pl-meta{flex:1;min-width:0}
.pl-meta b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-dur{flex:none;font-size:11.5px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.pl-del{flex:none;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.05);color:var(--muted);
cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.pl-del:hover{background:rgba(255,68,68,.12);color:#ff6b6b;transform:scale(1.08)}
.pl-empty{text-align:center;padding:34px 12px}
.pl-empty-ico{font-size:40px;margin-bottom:12px}
.pl-empty b{display:block;font-family:var(--fd);font-size:17px;margin-bottom:8px}
.pl-empty p{font-size:13px;color:var(--muted);max-width:340px;margin:0 auto;line-height:1.5}
.pl-load{display:flex;justify-content:center;gap:7px;padding:26px 0}
.pl-load i{width:8px;height:8px;border-radius:50%;background:var(--c2);opacity:.5;animation:plLoad 1s ease-in-out infinite}
.pl-load i:nth-child(2){animation-delay:.15s}
.pl-load i:nth-child(3){animation-delay:.3s}
@keyframes plLoad{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}
@media (max-width:640px){
.install-btn span{display:none}
.install-btn{padding:8px 10px}
.auth-btn span{display:none}
.auth-btn{padding:8px 10px}
.user-name{display:none}
.user-chip{padding:5px}
.auth-card{padding:26px 18px 20px}
.pl-card{padding:0;border-radius:0;max-height:100dvh;height:100dvh;width:100%;border:none;box-shadow:none}
.app-card{padding:20px 16px}
.app-tiles{grid-template-columns:1fr}
}