/* LF Player: one now-playing strip, used site-wide. Prominent and docked. */

.lf-player{
  position:fixed;left:0;right:0;bottom:0;z-index:100000;
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem 1rem;
  background:#0F1830;color:#fff;
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#FF4D8D,#6A5AF9,#22D3EE) 1;
  box-shadow:0 -10px 30px rgba(0,0,0,.34);
  transform:translateY(110%);transition:transform .26s ease;
}
.lf-player.show{transform:translateY(0)}
.lf-player[hidden]{display:none}

.lf-pl-art{width:54px;height:54px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:rgba(255,255,255,.10)}
.lf-pl-meta{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:0 1 230px}
.lf-pl-title{font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-pl-artist{font-size:.82rem;color:rgba(255,255,255,.64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

.lf-pl-toggle{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;color:#fff;display:grid;place-items:center;background:linear-gradient(135deg,#FF4D8D,#6A5AF9);box-shadow:0 6px 16px rgba(106,90,249,.40);transition:filter .15s ease,transform .12s ease}
.lf-pl-toggle:hover{filter:brightness(1.08)}
.lf-pl-toggle:active{transform:scale(.96)}

.lf-pl-mid{flex:1 1 auto;min-width:0;max-width:640px}
.lf-pl-track{height:8px;border-radius:5px;background:rgba(255,255,255,.18);cursor:pointer;overflow:hidden}
.lf-pl-fill{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#FF4D8D,#6A5AF9)}
.lf-pl-time{display:flex;justify-content:space-between;align-items:center;margin-top:.38rem;font-size:.74rem;color:rgba(255,255,255,.64)}
.lf-pl-tag{letter-spacing:.08em;font-weight:600;color:rgba(255,255,255,.72)}

.lf-pl-close{flex:0 0 auto;background:transparent;border:none;color:rgba(255,255,255,.66);font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .3rem}
.lf-pl-close:hover{color:#fff}

@media (max-width:600px){
  .lf-player{gap:.6rem;padding:.6rem .7rem}
  .lf-pl-art{width:46px;height:46px;border-radius:8px}
  .lf-pl-meta{flex-basis:auto;max-width:34vw}
  .lf-pl-toggle{width:44px;height:44px}
  .lf-pl-tag{display:none}
  .lf-pl-mid{max-width:none}
}

/* Search-result Listen and YouTube row sits under the snippet. Full width on
   phones for easy tapping; compact and left aligned from tablet up so the two
   buttons do not stretch across the whole result. */
@media (min-width:768px){
  .lf-action-bar .lf-listen-row{justify-content:flex-start;width:100%;flex-wrap:wrap}
  .lf-action-bar .lf-listen-row .lf-btn{flex:0 0 auto;min-width:128px;justify-content:center;padding:9px 22px;font-size:13px;border-radius:8px}
  .lf-action-bar .lf-listen-row .lf-btn svg{width:16px;height:16px}
}