/* Music mixer card (vk-mixer.js): five layers with their own switch and volume, a mood row, tempo, and a little level meter */
.msg-mixer{ width:min(360px, 92%); gap:9px; }
.mx-head{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate-500); }
.mx-badge{ width:20px; height:20px; border-radius:6px; background:var(--teal-400); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.mx-badge .ico{ width:11px; height:11px; }
.mx-src{ flex:1; min-width:0; } .mx-src strong{ color:var(--slate-400); font-weight:700; }
.mx-time{ font-variant-numeric:tabular-nums; }
.mx-title-row{ display:flex; align-items:center; gap:10px; }
.mx-title{ flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--foam); line-height:1.35; overflow-wrap:anywhere; }
.mx-play{ all:unset; box-sizing:border-box; width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--teal-400); color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mx-play .ico{ width:18px; height:18px; }
.mx-play:focus-visible, .mx-chip:focus-visible, .mx-tog:focus-visible, .mx-new:focus-visible{ outline:2px solid var(--teal-300); outline-offset:2px; }
.mx-viz{ display:flex; align-items:flex-end; gap:3px; height:34px; }
.mx-viz i{ flex:1; height:100%; border-radius:2px; background:var(--teal-300); opacity:.8; transform-origin:50% 100%; transform:scaleY(.08); transition:transform .09s linear; }
.mx-moods{ display:flex; flex-wrap:wrap; gap:6px; }
.mx-chip{ all:unset; box-sizing:border-box; padding:4px 10px; border-radius:999px; font-size:12px; cursor:pointer; color:var(--slate-400); border:1px solid var(--navy-700); }
.mx-chip[aria-pressed="true"]{ color:#fff; background:var(--teal-400); border-color:var(--teal-400); }
.mx-layers{ display:flex; flex-direction:column; gap:6px; }
.mx-layer{ display:grid; grid-template-columns:76px 1fr 26px; align-items:center; gap:8px; }
.mx-layer.off input{ opacity:.4; }
.mx-tog{ all:unset; box-sizing:border-box; text-align:center; padding:4px 0; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--navy-700); color:var(--slate-500); }
.mx-tog[aria-pressed="true"]{ color:var(--foam); background:var(--navy-700); border-color:var(--teal-300); }
.mx-pct{ font-size:11.5px; text-align:right; color:var(--slate-500); font-variant-numeric:tabular-nums; }
.msg-mixer input[type="range"]{ width:100%; accent-color:var(--teal-300); margin:0; }
.mx-tempo{ display:grid; grid-template-columns:76px 1fr 26px; align-items:center; gap:8px; font-size:12.5px; color:var(--slate-400); }
.mx-tempo b{ font-size:11.5px; font-weight:600; text-align:right; color:var(--slate-500); font-variant-numeric:tabular-nums; }
.mx-bars{ display:flex; gap:4px; } .mx-bars i{ flex:1; height:3px; border-radius:2px; background:var(--navy-700); transition:background .15s; } .mx-bars i.on{ background:var(--teal-300); }
.mx-foot{ display:flex; align-items:flex-start; gap:10px; }
.mx-foot span{ flex:1; font-size:11px; line-height:1.35; color:var(--slate-500); }
.mx-new{ all:unset; box-sizing:border-box; flex-shrink:0; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer; color:var(--teal-300); border:1px solid var(--teal-300); }
@media (prefers-reduced-motion:reduce){ .mx-viz i, .mx-bars i{ transition:none; } }

/* ---- real-song (YouTube) cards, compressed: one slim player row instead of the big card ---- */
.msg-music:not(.msg-mixer){ width:min(300px, 84%); padding:7px 10px; gap:4px; }
.msg-music:not(.msg-mixer) .music-card-header{ display:none; }
.msg-music:not(.msg-mixer) .music-card-title{ font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-music:not(.msg-mixer) .music-card-title-row{ gap:6px; }
.msg-music:not(.msg-mixer) .music-card-play-overlay{ width:28px; height:28px; }
.msg-music:not(.msg-mixer) .music-card-play-overlay .ico{ width:12px; height:12px; }
.msg-music:not(.msg-mixer) .music-card-seek-row{ gap:6px; }
.msg-music:not(.msg-mixer) .music-card-time{ font-size:10.5px; }
.msg-music:not(.msg-mixer) .music-card-note{ font-size:11px; }