/* MeshMelo v85 — FHD-first compact desktop queue/player.
   Desktop FHD tuning plus mobile playlist-header persistence. */
@media (min-width:768px) {
  /* Reserve only the space the new 44px player actually needs. */
  body.mm-shell-v19.mm-player-active {
    --mm-player-space:60px;
  }
  body.mm-shell-v19.mm-player-active:not(.mm-ads-ready) {
    padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important;
  }
  body.mm-shell-v19.mm-player-active.mm-ads-ready {
    padding-bottom:calc(var(--mm-promo-height) + 60px + env(safe-area-inset-bottom)) !important;
  }

  /* Queue header: title + close in one row, 1–10 tabs in a single row. */
  body.mm-shell-v19 #mmQueueDrawer .mm-queue-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 30px !important;
    grid-template-areas:
      "title close"
      "tabs tabs"
      "growth growth" !important;
    align-items:center !important;
    column-gap:8px !important;
    row-gap:8px !important;
    padding:13px 14px 10px !important;
  }
  body.mm-shell-v19 #mmQueueDrawer .mm-queue-head h2 {
    grid-area:title;
    margin:0 !important;
    line-height:1.25;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmQueueClose {
    grid-area:close;
    justify-self:end;
    align-self:center;
    width:30px;
    height:30px;
    margin:0;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmPlaylistTabs {
    grid-area:tabs;
    display:grid !important;
    grid-template-columns:repeat(10,minmax(0,1fr)) !important;
    grid-template-rows:30px !important;
    gap:3px !important;
    width:100%;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmPlaylistTabs button {
    min-width:0;
    height:30px;
    padding:0 !important;
    font-size:11px;
    border-radius:7px;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmGrowthSummary {
    grid-area:growth;
    grid-column:auto !important;
    margin:0 !important;
  }


  /* v84 removes the redundant curved-arrow history bar from markup.
     This rule also hides it if an older cached fragment appears. */
  body.mm-shell-v19 #mmQueueDrawer #mmHistoryTab { display:none !important; }

  /* The numeric history count is intentionally removed from the UI. */
  body.mm-shell-v19 #mmQueueDrawer #mmHistoryCount { display:none !important; }

  /* Each visible track row is 2px tighter than before. */
  body.mm-shell-v19 #mmQueueDrawer .mm-queue-item {
    padding-top:9px !important;
    padding-bottom:9px !important;
    min-height:60px !important;
  }

  /* History-list + button: about 30% smaller than v83. */
  body.mm-shell-v19 #mmQueueDrawer .mm-history-add {
    flex:0 0 27px !important;
    flex-basis:27px !important;
    width:27px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:8px !important;
    font-size:20px !important;
    line-height:1 !important;
  }
  body.mm-shell-v19 #mmQueueDrawer.mm-show-history .mm-queue-item {
    grid-template-columns:minmax(0,1fr) 27px 26px !important;
  }

  /* Player: 74px -> 44px (about 40% shorter), with controls scaled to fit. */
  body.mm-shell-v19 #mmGlobalPlayer {
    height:44px !important;
    min-height:44px;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-inner {
    height:100%;
    padding:4px 12px !important;
    gap:9px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-cover {
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
    border-radius:9px;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-toggle {
    width:30px !important;
    height:30px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-plus,
  body.mm-shell-v19 #mmGlobalPlayer #mmPlayerQueueAdd {
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    margin-right:2px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-plus > span,
  body.mm-shell-v19 #mmGlobalPlayer #mmPlayerQueueAdd > span {
    font-size:24px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-icon-btn {
    width:26px !important;
    height:26px !important;
  }
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-volume-btn,
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-close {
    width:24px !important;
    height:24px !important;
  }

  /* Keep the compact player readable rather than squeezing metadata to nothing. */
  body.mm-shell-v19 #mmGlobalPlayer .mm-player-info {
    flex-basis:190px;
    width:clamp(110px,15vw,190px);
  }
}

/* On normal desktop/FHD widths, stop the player before the right drawer.
   It overlaps the drawer by only 10px, as requested. */
@media (min-width:1100px) {
  body.mm-shell-v19.mm-queue-open #mmGlobalPlayer {
    right:calc(var(--mm-queue-width) - 10px) !important;
  }
}


/* v85 mobile: playlist title / 1–10 tabs / growth line always remain at the top.
   Use one compact row for all 10 slots, matching the desktop information hierarchy. */
@media (max-width:767px) {
  body.mm-shell-v19 #mmQueueDrawer .mm-queue-head {
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 36px !important;
    grid-template-areas:
      "title close"
      "tabs tabs"
      "growth growth" !important;
    align-items:center !important;
    column-gap:6px !important;
    row-gap:6px !important;
    padding:9px 12px 8px !important;
    background:var(--mm-mobile-surface,var(--mm-site-surface,#fff)) !important;
    border-bottom:1px solid var(--mm-mobile-border,var(--mm-site-line,#d9dce3)) !important;
    box-shadow:0 3px 10px rgba(0,0,0,.035);
  }
  body.mm-shell-v19 #mmQueueDrawer .mm-queue-head h2 {
    grid-area:title !important;
    margin:0 !important;
    font-size:17px !important;
    line-height:1.25 !important;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmQueueClose {
    grid-area:close !important;
    justify-self:end !important;
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    font-size:23px !important;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmPlaylistTabs {
    grid-area:tabs !important;
    display:grid !important;
    grid-template-columns:repeat(10,minmax(0,1fr)) !important;
    grid-template-rows:32px !important;
    gap:3px !important;
    width:100% !important;
    min-width:0 !important;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmPlaylistTabs button {
    min-width:0 !important;
    width:auto !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    border-radius:7px !important;
    font-size:11px !important;
    line-height:1 !important;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmGrowthSummary {
    grid-area:growth !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  /* Carry the requested 30% smaller history-list + button into mobile too. */
  body.mm-shell-v19 #mmQueueDrawer .mm-history-add {
    flex:0 0 31px !important;
    flex-basis:31px !important;
    width:31px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 !important;
    border-radius:8px !important;
    font-size:20px !important;
    line-height:1 !important;
  }
  body.mm-shell-v19 #mmQueueDrawer.mm-show-history .mm-queue-item {
    grid-template-columns:minmax(0,1fr) 31px 28px !important;
    gap:5px !important;
  }
}

@media (max-width:360px) {
  body.mm-shell-v19 #mmQueueDrawer #mmPlaylistTabs {
    gap:2px !important;
    grid-template-rows:30px !important;
  }
  body.mm-shell-v19 #mmQueueDrawer #mmPlaylistTabs button {
    height:30px !important;
    min-height:30px !important;
    font-size:10px !important;
  }
}