/* Persistent mini audio player - f_scripts/fe/js/mini-player.js */
:root { --vsm-h: 48px; --vsm-accent: var(--primary-color, #06a2cb); }

#vs-mini-bar, #vs-mini-queue { display: none; }
html.vs-mini-on #vs-mini-bar { display: block; }
html.vs-mini-on:not(.vs-mini-shell) body { padding-bottom: var(--vsm-h) !important; }

/* shell: original document hidden, site browsed inside the frame */
html.vs-mini-shell, html.vs-mini-shell body { height: 100% !important; overflow: hidden !important; }
html.vs-mini-shell body { margin: 0 !important; padding: 0 !important; }
html.vs-mini-shell body > *:not(#vs-mini-bar):not(#vs-mini-frame):not(#vs-mini-queue) { display: none !important; }
#vs-mini-frame {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    border: 0; margin: 0; padding: 0; display: block; z-index: 2147482000; background: #fff;
}
html.vs-mini-on #vs-mini-frame { height: calc(100% - var(--vsm-h)); }
body.dark #vs-mini-frame { background: #121212; }

/* bar */
#vs-mini-bar {
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--vsm-h); z-index: 2147482001;
    background: #f2f2f2; border-top: 1px solid #cecece; color: #333;
    font: 12px/1.3 Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    box-sizing: border-box; user-select: none; -webkit-user-select: none;
}
#vs-mini-bar.vsm-dark { background: #1f1f1f; border-top-color: #333; color: #ddd; }
#vs-mini-bar *, #vs-mini-queue * { box-sizing: border-box; }
#vs-mini-bar .vsm-in { display: flex; align-items: center; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; gap: 14px; }

#vs-mini-bar button.vsm-b, #vs-mini-queue button.vsm-b {
    -webkit-appearance: none; appearance: none;
    background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important;
    min-width: 0 !important; width: 30px; height: 30px; border-radius: 50% !important; line-height: 0 !important;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    color: inherit; cursor: pointer; opacity: .85; transition: opacity .15s, color .15s;
}
#vs-mini-bar button.vsm-b:hover, #vs-mini-queue button.vsm-b:hover { opacity: 1; }
#vs-mini-bar button.vsm-b svg, #vs-mini-queue button.vsm-b svg { width: 22px; height: 22px; fill: currentColor; display: block; pointer-events: none; }
#vs-mini-bar button.vsm-b.vsm-on { color: var(--vsm-accent); opacity: 1; }
#vs-mini-bar button.vsm-b.vsm-busy { opacity: .4; pointer-events: none; }
#vs-mini-bar button.vsm-rep { position: relative; }
#vs-mini-bar button.vsm-rep.vsm-one::after {
    content: "1"; position: absolute; right: 1px; bottom: 2px; font-size: 9px; font-weight: 700; line-height: 1; color: var(--vsm-accent);
}

#vs-mini-bar .vsm-ctl { display: flex; align-items: center; gap: 6px; flex: none; }
#vs-mini-bar button.vsm-play { width: 34px; height: 34px; }
#vs-mini-bar button.vsm-play svg { width: 28px; height: 28px; }
#vs-mini-bar button.vsm-shuf svg, #vs-mini-bar button.vsm-rep svg { width: 19px; height: 19px; }

/* seek */
#vs-mini-bar .vsm-seek { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 120px; }
#vs-mini-bar .vsm-t { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .85; flex: none; min-width: 34px; }
#vs-mini-bar .vsm-cur { text-align: right; color: var(--vsm-accent); opacity: 1; }
#vs-mini-bar .vsm-track { position: relative; flex: 1; height: 16px; cursor: pointer; touch-action: none; }
#vs-mini-bar .vsm-track::before, #vs-mini-bar .vsm-buf, #vs-mini-bar .vsm-fill {
    content: ""; position: absolute; left: 0; top: 7px; height: 2px; border-radius: 1px;
}
#vs-mini-bar .vsm-track::before { right: 0; background: rgba(128,128,128,.35); }
#vs-mini-bar .vsm-buf { background: rgba(128,128,128,.35); width: 0; }
#vs-mini-bar .vsm-fill { background: var(--vsm-accent); width: 0; }
#vs-mini-bar .vsm-knob {
    position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--vsm-accent); opacity: 0; transition: opacity .15s;
}
#vs-mini-bar .vsm-track:hover .vsm-knob { opacity: 1; }

/* volume */
#vs-mini-bar .vsm-vol { position: relative; flex: none; display: flex; align-items: center; }
#vs-mini-bar .vsm-volpop {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    padding: 12px 10px; background: #f2f2f2; border: 1px solid #cecece; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); display: none;
}
#vs-mini-bar.vsm-dark .vsm-volpop { background: #1f1f1f; border-color: #333; }
#vs-mini-bar .vsm-vol:hover .vsm-volpop, #vs-mini-bar .vsm-vol:focus-within .vsm-volpop { display: block; }
#vs-mini-bar .vsm-vol::before { content: ""; position: absolute; left: -10px; right: -10px; bottom: 100%; height: 14px; }
#vs-mini-bar input.vsm-volr {
    -webkit-appearance: none !important; appearance: none !important; display: block;
    width: 110px !important; height: 3px !important; max-height: 3px !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important;
    background: linear-gradient(to right, var(--vsm-accent) var(--vsm-v, 50%), rgba(128,128,128,.35) var(--vsm-v, 50%)) !important;
    outline: none; cursor: pointer;
}
#vs-mini-bar input.vsm-volr::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--vsm-accent); border: 0; }
#vs-mini-bar input.vsm-volr::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--vsm-accent); border: 0; }
#vs-mini-bar input.vsm-volr::-moz-range-track { background: transparent; border: 0; }

/* track info */
#vs-mini-bar a.vsm-meta {
    display: flex; align-items: center; gap: 10px; flex: 0 1 260px; min-width: 0;
    color: inherit !important; text-decoration: none !important;
}
#vs-mini-bar .vsm-art { width: 32px; height: 32px; object-fit: cover; border-radius: 2px; flex: none; background: rgba(128,128,128,.25); }
#vs-mini-bar .vsm-txt { display: flex; flex-direction: column; min-width: 0; }
#vs-mini-bar .vsm-artist, #vs-mini-bar .vsm-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vs-mini-bar .vsm-artist { font-size: 11px; opacity: .65; }
#vs-mini-bar .vsm-title { font-size: 13px; font-weight: 500; }
#vs-mini-bar a.vsm-meta:hover .vsm-title { color: var(--vsm-accent); }

#vs-mini-bar .vsm-act { display: flex; align-items: center; gap: 4px; flex: none; }
#vs-mini-bar .vsm-act svg { width: 20px; height: 20px; }
#vs-mini-bar button.vsm-x svg { width: 18px; height: 18px; }

/* mobile progress line (top edge) */
#vs-mini-bar .vsm-mline { display: none; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(128,128,128,.3); }
#vs-mini-bar .vsm-mfill { height: 100%; width: 0; background: var(--vsm-accent); }

/* "Next up" panel */
html.vs-mini-on #vs-mini-queue.vsm-open { display: flex; }
#vs-mini-queue {
    position: fixed; right: 16px; bottom: calc(var(--vsm-h) + 8px); z-index: 2147482002;
    width: 360px; max-width: calc(100% - 16px); max-height: min(60vh, 480px); flex-direction: column;
    background: #fff; color: #333; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
    font: 13px/1.3 Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; overflow: hidden;
}
#vs-mini-queue.vsm-dark { background: #212121; color: #ddd; border-color: #333; }
#vs-mini-queue .vsm-q-h { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-bottom: 1px solid rgba(128,128,128,.25); }
#vs-mini-queue .vsm-q-ttl { font-weight: 600; font-size: 14px; flex: 1; }
#vs-mini-queue .vsm-q-auto { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; cursor: pointer; opacity: .85; }
#vs-mini-queue .vsm-q-auto input { margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; }
#vs-mini-queue .vsm-q-l { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
#vs-mini-queue .vsm-q-l li { display: flex; align-items: center; gap: 10px; padding: 6px 14px; cursor: pointer; }
#vs-mini-queue .vsm-q-l li:hover { background: rgba(128,128,128,.12); }
#vs-mini-queue .vsm-q-l li.vsm-q-cur { cursor: default; background: rgba(128,128,128,.12); }
#vs-mini-queue .vsm-q-l li.vsm-q-cur .vsm-q-t { color: var(--vsm-accent); font-weight: 600; }
#vs-mini-queue .vsm-q-l li.vsm-q-done { opacity: .5; }
#vs-mini-queue .vsm-q-l img, #vs-mini-queue .vsm-q-ph { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; flex: none; background: rgba(128,128,128,.25); }
#vs-mini-queue .vsm-q-t { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#vs-mini-queue .vsm-q-d { font-size: 11px; opacity: .65; flex: none; }
#vs-mini-queue .vsm-q-empty { opacity: .6; cursor: default !important; justify-content: center; padding: 16px !important; }

@media (max-width: 1024px) {
    #vs-mini-bar .vsm-vol, #vs-mini-bar button.vsm-follow { display: none !important; }
    #vs-mini-bar a.vsm-meta { flex-basis: 200px; }
}
@media (max-width: 768px) {
    :root { --vsm-h: 56px; }
    #vs-mini-bar .vsm-mline { display: block; }
    #vs-mini-bar .vsm-in { padding: 0 8px 0 10px; gap: 6px; }
    #vs-mini-bar .vsm-seek, #vs-mini-bar button.vsm-shuf, #vs-mini-bar button.vsm-rep, #vs-mini-bar button.vsm-like { display: none !important; }
    #vs-mini-bar a.vsm-meta { order: -1; flex: 1 1 auto; }
    #vs-mini-bar .vsm-art { width: 40px; height: 40px; }
    #vs-mini-bar .vsm-ctl { gap: 2px; }
    #vs-mini-bar .vsm-act { gap: 0; }
    #vs-mini-queue { right: 8px; left: 8px; width: auto; max-width: none; }
}
@media (max-width: 400px) {
    #vs-mini-bar button.vsm-prev { display: none !important; }
}