/* ============================================================================
   METATRIX MUSIC — sidebar playlist + YouTube-style corner mini-player.
   Saved favourites (YouTube / Spotify / direct audio / local files), background
   play, 432Hz / 528Hz frequency modes, minimize-to-corner player.
   Themed to the Metatrix sidebar (black / purple / green seam). Pure CSS.
   ========================================================================== */
#mtx-music, #mtx-music *, #mtx-player, #mtx-player * { box-sizing: border-box; }

/* ---- sidebar playlist panel ---- */
#mtx-music {
  margin: 2px 8px 8px; background: #0a0a0e; color: #ededf2;
  border: 1px solid rgba(166,108,255,0.25); border-top: 2px solid #29f19c;
  border-radius: 10px; overflow: hidden; font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
html.mtx-side-rail #mtx-side #mtx-music,
html.mtx-side-rail #mtx-side .mtx-seclabel-music { display: none; }

#mtx-music .mu-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: #000; cursor: pointer; user-select: none;
}
#mtx-music .mu-head .mu-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #5b5b66; flex: 0 0 8px;
  transition: background .2s ease, box-shadow .2s ease;
}
#mtx-music.mu-live .mu-head .mu-dot { background: #29f19c; box-shadow: 0 0 8px rgba(41,241,156,0.7); }
#mtx-music .mu-head .mu-title {
  font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 600;
  letter-spacing: .4px; color: #f4f2ff; flex: 1;
}
#mtx-music .mu-head .mu-caret { color: #a66cff; transition: transform .18s ease; display: grid; place-items: center; }
#mtx-music .mu-head .mu-caret svg { width: 15px; height: 15px; display: block; }
#mtx-music.mu-min .mu-head .mu-caret { transform: rotate(180deg); }
#mtx-music.mu-min .mu-body { display: none; }

#mtx-music .mu-body { padding: 8px 9px 9px; }
#mtx-music .mu-addrow { display: flex; gap: 5px; }
#mtx-music .mu-addrow input {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; font-size: 12px;
  border: 1px solid rgba(166,108,255,0.28); background: #111118; color: #ededf2; outline: none;
}
#mtx-music .mu-addrow input::placeholder { color: #6b6b76; }
#mtx-music .mu-addrow input:focus { border-color: #a66cff; }
#mtx-music .mu-addbtn {
  padding: 0 12px; border-radius: 8px; border: 1px solid rgba(41,241,156,0.35);
  background: rgba(41,241,156,0.08); color: #29f19c; font-size: 13px; cursor: pointer;
}
#mtx-music .mu-addbtn:hover { background: rgba(41,241,156,0.18); }
#mtx-music .mu-filebtn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 9px; border-radius: 8px; border: 1px dashed rgba(166,108,255,0.28);
  background: transparent; color: #8f7fc0; font-size: 11.5px; cursor: pointer; margin-top: 6px;
}
#mtx-music .mu-filebtn:hover { background: rgba(166,108,255,0.1); color: #c4b3ff; }

/* playlist */
#mtx-music .mu-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; max-height: 34vh; overflow-y: auto; }
#mtx-music .mu-list::-webkit-scrollbar { width: 8px; }
#mtx-music .mu-list::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 8px; }
#mtx-music .mu-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px;
  background: #111118; border: 1px solid rgba(166,108,255,0.16); cursor: pointer;
  transition: background .15s ease;
}
#mtx-music .mu-row:hover { background: rgba(166,108,255,0.14); }
#mtx-music .mu-row.mu-cur { border-color: rgba(41,241,156,0.45); }
#mtx-music .mu-row .mu-kind {
  flex: 0 0 auto; font-size: 9px; letter-spacing: .05em; padding: 2px 5px; border-radius: 5px;
  background: rgba(166,108,255,0.16); color: #c4b3ff;
}
#mtx-music .mu-row.mu-cur .mu-kind { background: rgba(41,241,156,0.16); color: #29f19c; }
#mtx-music .mu-row .mu-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ededf2; font-size: 12px; }
#mtx-music .mu-row .mu-x {
  border: 0; background: transparent; color: #7b7b86; cursor: pointer; font-size: 14px;
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 20px;
}
#mtx-music .mu-row .mu-x:hover { background: rgba(255,122,122,0.16); color: #ffb3b3; }
#mtx-music .mu-msg { color: #9a9aa6; font-size: 11px; line-height: 1.45; padding: 6px 1px 0; }
#mtx-music .mu-msg:empty { display: none; }
#mtx-music .mu-msg.err { color: #ff9c9c; }

/* ---- floating corner player (YouTube-miniplayer style) ---- */
#mtx-player {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147481400; width: 384px;
  background: #0a0a0e; color: #ededf2;
  border: 1px solid rgba(166,108,255,0.35); border-top: 2px solid #29f19c;
  border-radius: 12px; box-shadow: 0 16px 52px rgba(0,0,0,0.65); overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 13px; display: none;
}
#mtx-player.mp-on { display: block; }
#mtx-player.mp-big { width: min(840px, 92vw); }
@media (max-width: 480px) { #mtx-player { right: 8px; bottom: 8px; width: calc(100vw - 16px); } }

#mtx-player .mp-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #000; }
#mtx-player .mp-title {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: Georgia, "Times New Roman", serif; font-size: 13.5px; color: #f4f2ff;
}
#mtx-player .mp-fbtn {
  padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(166,108,255,0.3);
  background: transparent; color: #c4b3ff; font-size: 10.5px; cursor: pointer; flex: 0 0 auto;
}
#mtx-player .mp-fbtn:hover { background: rgba(166,108,255,0.18); }
#mtx-player .mp-fbtn.on { background: rgba(41,241,156,0.14); border-color: #29f19c; color: #29f19c; }
#mtx-player .mp-iconbtn {
  width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent;
  color: #b8b8c4; display: grid; place-items: center; cursor: pointer; flex: 0 0 26px;
}
#mtx-player .mp-iconbtn:hover { background: rgba(166,108,255,0.16); color: #c9b8ff; }
#mtx-player .mp-iconbtn svg { width: 15px; height: 15px; display: block; }

#mtx-player .mp-media { background: #000; }
#mtx-player .mp-media iframe.mp-yt { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
#mtx-player .mp-media iframe.mp-sp { width: 100%; border: 0; display: block; }
#mtx-player .mp-media audio { width: 100%; display: block; padding: 6px 8px; }
#mtx-player.mp-shade .mp-media, #mtx-player.mp-shade .mp-ctl, #mtx-player.mp-shade .mp-note { display: none; }

#mtx-player .mp-ctl { display: flex; align-items: center; gap: 6px; padding: 7px 10px 5px; }
#mtx-player .mp-ctl .mp-cbtn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(166,108,255,0.28);
  background: rgba(166,108,255,0.08); color: #c4b3ff; display: grid; place-items: center; cursor: pointer;
}
#mtx-player .mp-ctl .mp-cbtn:hover { background: rgba(166,108,255,0.2); color: #e9e0ff; }
#mtx-player .mp-ctl .mp-cbtn svg { width: 15px; height: 15px; display: block; }
#mtx-player .mp-ctl .mp-spacer { flex: 1; }
#mtx-player .mp-ctl .mp-count { color: #6b6b76; font-size: 11px; }
#mtx-player .mp-note { font-size: 10.5px; color: #9a9aa6; line-height: 1.45; padding: 2px 10px 9px; }
#mtx-player .mp-note:empty { display: none; }
#mtx-player .mp-note.ok { color: #29f19c; }