/* ===== MelaninVybe – MOBILE styles only ===== */

/* 1) Compact sticky player & layout (≤740px) */
@media (max-width: 740px) {
  .mv-left-rail { display: none; }

  .mv-popular-songs, .mv-artists { grid-template-columns: 1fr; }

  /* Hide player by default on mobile; show when body.mv-playing is present */
  .mv-sticky-player {
    position: fixed;
    left: 8px; right: 8px; bottom: 8px;
    width: auto;
    margin: 0;
    border-radius: 16px;
    padding: 10px 12px;
    background: var(--mv-panel);
    border-top: 1px solid var(--mv-border);
    z-index: 1000;

    display: grid;
    grid-template-columns: auto 1fr auto; /* poster | info | controls */
    grid-auto-rows: auto;
    column-gap: 10px;
    align-items: center;
    min-height: 60px;

    transform: translateY(120%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
  }
  body.mv-playing .mv-sticky-player { transform: translateY(0%); opacity: 1; }

  .mv-player-poster { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
  .mv-player-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .mv-player-title, .mv-player-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
  .mv-player-title { font-weight: 600; }

  .mv-player-controls { display: flex; align-items: center; gap: 8px; }
  .mv-player-controls button { width: 36px; height: 36px; border-radius: 10px; }
  .mv-prev, .mv-next, .mv-shuffle, .mv-repeat { display: none; }
  .mv-play-pause { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

  /* IO: keep slim / hidden */
  .mv-player-io { display: none; }
  .mv-current-time, .mv-duration { font-size: 12px; opacity: .85; }
  .mv-volume { display: none; }
  .mv-seek { flex: 1 1 auto; width: auto; }

  /* Dock & content clearance */
  .mv-dock { display: flex; padding-bottom: env(safe-area-inset-bottom); }
  body.mv-playing #mv-page-player { padding-bottom: 96px; }

  /* Micro toast positioning */
  .mv-mini-toast { left: 50%; right: auto; transform: translate(-50%, 8px); }
  .mv-mini-toast.active { transform: translate(-50%, 0); }
}

/* 2) FAB mini-player (mobile only) + slide-up sheet behavior */
@media (max-width: 740px) {
  /* Keep the sticky player offscreen until sheet is opened (optional future) */
  .mv-sticky-player { transform: translateY(105%); transition: transform 220ms ease; }
  body.mv-playing.mv-sheet-open .mv-sticky-player { transform: translateY(0%); }

  /* Floating Action Bar */
  .mv-fab-player {
    position: fixed;
    right: 16px;
    bottom: 84px; /* above dock */
    display: none;        /* toggled by body.mv-playing */
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15,21,32,.95);
    border: 1px solid var(--mv-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 1100;
  }
  body.mv-playing .mv-fab-player { display: flex; }

  .mv-fab-art { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
  .mv-fab-title {
    max-width: 180px;
    font-size: 13px; line-height: 1;
    color: var(--mv-text);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }

  .mv-fab-play,
  .mv-fab-stop {
    width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--mv-panel-2); color: var(--mv-text); font-size: 18px;
    display: grid; place-items: center; transition: transform .12s ease, box-shadow .2s ease;
  }
  .mv-fab-stop { background: #ef4444; color: #0b0f14; box-shadow: 0 0 0 2px rgba(239,68,68,.25) inset; }
  .mv-fab-play:hover, .mv-fab-stop:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
  .mv-fab-play:active, .mv-fab-stop:active { transform: scale(.96); }

  /* No art fallback */
  .mv-fab-player.no-art .mv-fab-art { display: none; }
  .mv-fab-player.no-art .mv-fab-title { max-width: 220px; }

  /* When sheet open, nudge FAB higher */
  body.mv-sheet-open .mv-fab-player { bottom: 140px; }
}

/* 3) “Mobile Polish v1.1” (≤640px) */
@media (max-width: 640px) {
  .mv-player-container .mv-sticky-player {
    --mv-bg:#0f1620; --mv-card:#121a26; --mv-text:#e8eef7; --mv-sub:#9fb2c7; --mv-accent:#2e90fa; --mv-gap:12px;
    position: sticky !important;
    bottom: 0 !important; z-index: 50 !important; width: 100% !important;
    background: var(--mv-bg) !important; color: var(--mv-text) !important;
    padding: 12px 14px !important; box-shadow: 0 -8px 24px rgba(0,0,0,.25) !important;
    display: grid !important; grid-template-columns: 64px 1fr !important;
    grid-template-areas: "poster info" "controls controls" "seek seek" "volume volume" !important;
    align-items: center !important; gap: var(--mv-gap) !important; border-radius: 16px !important;
  }
  .mv-player-container .mv-sticky-player .mv-player-poster { grid-area: poster !important; width:64px !important; height:64px !important; border-radius:12px !important; object-fit:cover !important; background:var(--mv-card) !important; display:block !important; }
  .mv-player-container .mv-sticky-player .mv-player-info { grid-area: info !important; min-width:0 !important; }
  .mv-player-container .mv-sticky-player .mv-player-title { display:block !important; font-weight:600 !important; font-size:16px !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; color:var(--mv-text) !important; }
  .mv-player-container .mv-sticky-player .mv-player-artist { display:block !important; margin-top:3px !important; font-size:13px !important; color:var(--mv-sub) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .mv-player-container .mv-sticky-player .mv-player-controls { grid-area: controls !important; display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; background:var(--mv-card) !important; padding:10px !important; border-radius:14px !important; }
  .mv-player-container .mv-sticky-player .mv-player-controls > button { width:44px !important; height:44px !important; border-radius:12px !important; border:1px solid rgba(255,255,255,.08) !important; background: transparent !important; color: var(--mv-text) !important; font-size:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
  .mv-player-container .mv-sticky-player .mv-player-controls > button:active { transform: scale(.97) !important; }
  .mv-player-container .mv-sticky-player .mv-prev::before       { content:"⏮"; font-size:18px; }
  .mv-player-container .mv-sticky-player .mv-play-pause::before { content:"▶";  font-size:20px; }
  .mv-player-container .mv-sticky-player .mv-next::before       { content:"⏭"; font-size:18px; }
  .mv-player-container .mv-sticky-player .mv-shuffle::before    { content:"🔀"; font-size:18px; }
  .mv-player-container .mv-sticky-player .mv-repeat::before     { content:"🔁"; font-size:18px; }
  .mv-player-container .mv-sticky-player .is-playing.mv-play-pause::before { content:"⏸"; }
  .mv-player-container .mv-sticky-player .mv-seek-bar { grid-area: seek !important; margin-top: 4px !important; display:grid !important; grid-template-columns:40px 1fr 40px !important; column-gap:10px !important; align-items:center !important; }
  .mv-player-container .mv-sticky-player .mv-current-time,
  .mv-player-container .mv-sticky-player .mv-duration { font-size:12px !important; color:var(--mv-sub) !important; }
  .mv-player-container .mv-sticky-player .mv-seek { -webkit-appearance:none; appearance:none; width:100% !important; height:6px !important; background:rgba(255,255,255,.18) !important; border-radius:999px !important; outline:none !important; }
  .mv-player-container .mv-sticky-player .mv-seek::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px !important; height:18px !important; border-radius:50% !important; background:var(--mv-accent) !important; border:0 !important; box-shadow:0 0 0 3px rgba(46,144,250,.25) !important; }
  .mv-player-container .mv-sticky-player .mv-volume { grid-area: volume !important; width:100% !important; margin-top:6px !important; -webkit-appearance:none; appearance:none; height:6px !important; border-radius:999px !important; background:rgba(255,255,255,.18) !important; outline:none !important; }
  .mv-player-container .mv-sticky-player .mv-volume::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px !important; height:16px !important; border-radius:50% !important; background:var(--mv-sub) !important; border:0 !important; }
}

/* 4) Mobile portrait tap-target normalization (≤640px) */
@media (max-width: 640px) and (orientation: portrait) {
  .mv-player-container .mv-sticky-player .mv-player-controls > button {
    font-size: 0 !important; line-height: 0 !important; background-image: none !important; position: relative !important;
  }
  .mv-player-container .mv-sticky-player .mv-player-controls > button > * { display: none !important; }
  .mv-player-container .mv-sticky-player .mv-play-pause.is-playing::before { content:"⏸"; }
}

/* 5) Narrow “stack” tweaks */
@media (max-width: 900px) {
  .mv-player-container { flex-direction: column; padding: 14px; }
  .mv-left-rail { flex: 1 1 auto; }
  .mv-sticky-player { position: sticky; bottom: auto; } /* desktop sticky fallback when collapsing */
}

@media (max-width: 800px) {
  .mv-artist-profile { flex-direction: column; align-items: flex-start; }
  .mv-artist-avatar { width: 80px; height: 80px; }
}

/* 6) Ensure FAB is not rendered on desktop even if markup exists */
@media (min-width: 741px) {
  .mv-fab-player { display: none !important; visibility: hidden !important; }
}

/* 7) Mobile tab row wrap (All / My Library / Music / Podcasts) */
@media (max-width: 640px) {
  .mv-tabs {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* 8) Mobile playlist header layout */
@media (max-width: 640px) {
  .mv-playlist-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 9) Re-enable playlist rail on mobile */
@media (max-width: 740px) {
  .mv-left-rail {
    display: block;
    margin-top: 16px;
  }
}