/*
 * MeshMelo v198 — player cover play/pause overlay.
 * Scope: fixed global player only. No HTML, JS, playback or artist changes.
 * The ORIGINAL #mmPlayerToggle retains its listeners, keyboard behavior,
 * translated aria-label and is-playing state. Its negative margin (desktop)
 * or shared grid cell (mobile) overlays the ORIGINAL #mmPlayerCover.
 */

/* Slightly taller than the old 44px desktop player; do not change frosted glass. */
@media (min-width:768px) {
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player {
    height:50px !important;
    min-height:50px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player > .mm-player-inner {
    gap:9px !important;
    padding:5px 12px !important;
  }
  /* 38px toggle + (-47px) margin + 9px gap = zero net distance
     between button's left edge and the album cover's left edge. */
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle.mm-player-toggle {
    margin-right:-47px !important;
  }
  /* Keep playlist drawer above the player's new top edge. */
  body.mm-shell-v19.mm-player-active { --mm-player-space:66px !important; }
  body.mm-shell-v19.mm-player-active:not(.mm-ads-ready) {
    padding-bottom:calc(66px + env(safe-area-inset-bottom)) !important;
  }
  body.mm-shell-v19.mm-player-active.mm-ads-ready {
    padding-bottom:calc(var(--mm-promo-height,0px) + 66px + env(safe-area-inset-bottom)) !important;
  }
}

/* Make the existing player button itself the cover-sized translucent overlay. */
body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle.mm-player-toggle {
  position:relative !important;
  z-index:3 !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.26) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important;
  cursor:pointer;
}
body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle.mm-player-toggle:hover {
  background:rgba(0,0,0,.40) !important;
}
body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle.mm-player-toggle:focus-visible {
  outline:2px solid #fff !important;
  outline-offset:-3px !important;
  background:rgba(0,0,0,.43) !important;
}
body.mm-shell-v19 #mmGlobalPlayer.mm-global-player img#mmPlayerCover.mm-player-cover {
  position:relative !important;
  z-index:1 !important;
  box-sizing:border-box !important;
  display:block !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  flex:0 0 38px !important;
  object-fit:cover !important;
  border-radius:10px !important;
}
/* White icon remains visible whether the surrounding player is light/dark. */
body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle .mm-player-toggle-play {
  border-left-color:#fff !important;
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
}
body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle .mm-player-toggle-pause i {
  background:#fff !important;
}

/* On phones the old player used TWO separate grid columns (play + cover).
   Put them into ONE cell and return the freed column to the song title. */
@media (max-width:767px) {
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player {
    height:82px !important;
    min-height:82px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player > .mm-player-inner {
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) 28px 28px 28px !important;
    grid-template-rows:38px 12px !important;
    align-content:center !important;
    gap:5px 7px !important;
    padding:8px 11px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle.mm-player-toggle,
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player img#mmPlayerCover.mm-player-cover {
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player .mm-player-info {
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerQueueAdd { grid-column:3 !important; grid-row:1 !important; }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerShuffle { grid-column:4 !important; grid-row:1 !important; }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerQueueToggle { grid-column:5 !important; grid-row:1 !important; }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerSeek {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
  }
  body.mm-shell-v19.mm-player-active { --mm-player-space:98px !important; }
}

/* Landscape phones should still leave usable room for the queue. */
@media (max-width:767px) and (max-height:500px) {
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player { height:72px !important; min-height:72px !important; }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player > .mm-player-inner {
    grid-template-columns:36px minmax(0,1fr) 28px 28px 28px !important;
    grid-template-rows:36px 10px !important;
    padding:5px 10px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player #mmPlayerToggle.mm-player-toggle,
  body.mm-shell-v19 #mmGlobalPlayer.mm-global-player img#mmPlayerCover.mm-player-cover {
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    flex-basis:36px !important;
  }
  body.mm-shell-v19.mm-player-active { --mm-player-space:86px !important; }
}