/* ---------- музыка в звонке ---------- */
.mus-yt { position: fixed; left: -10000px; top: 0; width: 220px; height: 124px; opacity: 0; pointer-events: none; }

.mus-pill { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 4px; margin: 0 10px 8px; flex: none; padding: 10px 10px 6px; border-radius: 16px; background: linear-gradient(135deg, #141418, #0e0e11); box-shadow: inset 0 0 0 1px #24242a; animation: musIn .3s cubic-bezier(.2, .9, .3, 1.2); overflow: hidden; }
.mus-pill.out { animation: musOut .2s forwards; }
@keyframes musIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes musOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* пластинка: обложка трека, дырочка по центру, бороздки */
.mus-disc { --s: 46px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: var(--cover) center / cover no-repeat, #222; box-shadow: 0 0 0 2px #050506, 0 6px 16px rgba(0, 0, 0, .5); animation: musSpin 4.5s linear infinite; animation-play-state: paused; }
.mus-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0 3px, rgba(0, 0, 0, .18) 3px 4px), radial-gradient(circle, transparent 30%, rgba(0, 0, 0, .35) 72%); }
.mus-disc i { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bg-panel); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.mus-disc i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; }
.mus-disc.spin { animation-play-state: running; }
@keyframes musSpin { to { transform: rotate(360deg); } }

.mus-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mus-title { overflow: hidden; white-space: nowrap; font-size: 13px; line-height: 1.3; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mus-title:not(.marq) { mask-image: none; }
.mus-title b { display: inline-block; }
.mus-title span { display: inline-block; text-overflow: ellipsis; }
.mus-title.marq span { animation: musMarq 9s ease-in-out infinite alternate; }
@keyframes musMarq { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--mq, 0)); } }
.mus-sub { font-size: 11px; color: var(--muted, #a1a1aa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; min-height: 15px; }
.mus-sub .ic { flex: none; }
.mus-seek-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.mus-time { flex: none; font-size: 10px; font-weight: 700; color: var(--muted, #a1a1aa); font-variant-numeric: tabular-nums; }
.mus-seek { flex: 1; min-width: 0; height: 14px; margin: 0; }
.mus-pill input.mus-seek { height: 4px; }
.mus-pill input.mus-seek::-webkit-slider-thumb { width: 11px; height: 11px; box-shadow: none; opacity: 0; transition: opacity .15s; }
.mus-pill:hover input.mus-seek::-webkit-slider-thumb { opacity: 1; }
.mus-time { min-width: 28px; }
.mus-t1 { text-align: right; }
.mus-b.mus-vol { width: 24px; height: 24px; }

.mus-btns { flex: none; display: flex; align-items: center; gap: 2px; }
.mus-b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted, #a1a1aa); transition: background .15s, color .15s; }
.mus-b:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mus-b.mus-main { width: 32px; height: 32px; background: #fff; color: #000; }
.mus-b.mus-main:hover { background: #fff; transform: scale(1.06); }
.mus-b.mus-main .ic { fill: currentColor; }
.mus-pill.off .mus-b.mus-main { background: #26262c; color: #fff; }
.mus-pill.off .mus-b.mus-main .ic, .mus-pill.off .mus-sub .ic { fill: none; }
.mus-pill.off .mus-disc, .mus-pill.paused .mus-disc { filter: saturate(.4) brightness(.8); }

/* окна */
.mus-modal .modal-head { text-align: center; }
.mus-hero { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; animation: musSpin 6s linear infinite; }
.mus-now { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-hover); box-shadow: inset 0 0 0 1px #24242a; }
.mus-now div { display: flex; flex-direction: column; min-width: 0; }
.mus-now small { color: var(--muted, #a1a1aa); font-size: 11px; }
.mus-now b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.mq-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.mq-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--bg-hover); }
.mq-row:first-child { box-shadow: inset 0 0 0 1.5px #fff; }
.mq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mq-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-t small { font-size: 11px; color: var(--muted, #a1a1aa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-now { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: #fff; color: #000; font-size: 11px; font-weight: 800; }

/* плеер скрыт — на кнопке в шапке точка, нажатие возвращает плеер */
.hd-btn.has-hidden { position: relative; color: #fff; background: rgba(255, 255, 255, .08); }
.hd-btn.has-hidden::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0b0b0e; animation: ctlPulse 1.6s ease-in-out infinite; }

/* выбор: для всех / только для меня */
.mus-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mus-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--bg-hover); color: inherit; text-align: left; box-shadow: inset 0 0 0 1px #24242a; transition: box-shadow .15s, background .15s; }
.mus-opt .ic { width: 30px; height: 30px; padding: 6px; margin-bottom: 4px; border-radius: 9px; background: #1f1f25; color: var(--muted, #a1a1aa); transition: background .15s, color .15s; }
.mus-opt b { font-size: 13.5px; }
.mus-opt small { font-size: 11.5px; color: var(--muted, #a1a1aa); }
.mus-opt.on { background: var(--bg-active); box-shadow: inset 0 0 0 2px #fff; }
.mus-opt.on .ic { background: #fff; color: #000; }
.mus-opt:disabled { opacity: .45; cursor: not-allowed; }
.mus-me { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px; margin-right: 2px; border-radius: 999px; background: #fff; color: #000; font-style: normal; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.mus-pill.solo { box-shadow: inset 0 0 0 1px #3a3a42; }

/* ---------- список треков в окне ---------- */
.mus-ql { margin: 16px 0 8px; }
.mq-list.mq-in { max-height: 240px; }
.mq-row.now { box-shadow: inset 0 0 0 1.5px #fff; }
.mq-row { transition: opacity .18s, transform .18s; }
.mq-row.gone { opacity: 0; transform: translateX(14px); }
.mq-row .icon-btn:hover { color: #f87171; }
.mq-row.now .icon-btn:hover { color: #fff; }
.mus-plus { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px #26262c; font-size: 12.5px; color: var(--muted, #a1a1aa); }
.mus-plus .ic { flex: none; margin-top: 1px; color: #fff; }
.mus-plus b { color: #fff; }

/* ---------- тема в такт музыке (Plus) ---------- */
:root { --beat: 0; --lvl: 0; --bt-a: #a78bfa; --bt-b: #38bdf8; }
#beatGlow { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(60vw 60vh at 0% 100%, var(--bt-a), transparent 60%), radial-gradient(55vw 55vh at 100% 0%, var(--bt-b), transparent 60%);
  mix-blend-mode: screen; }
body.beat-on #beatGlow { opacity: calc(.06 + var(--lvl) * .14 + var(--beat) * .26); transition: none; }
body.beat-on.beat-idle #beatGlow { opacity: .05; transition: opacity .6s; }
body.beat-on .mus-pill { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bt-a) 60%, transparent), 0 0 calc(6px + var(--beat) * 26px) color-mix(in srgb, var(--bt-a) calc(25% + var(--beat) * 55%), transparent); }
body.beat-on .mus-pill .mus-disc { transform-origin: center; scale: calc(1 + var(--beat) * .07); }
body.beat-on .mus-pill input.mus-seek { accent-color: var(--bt-a); }
body.beat-on .voice-panel { border-color: color-mix(in srgb, var(--bt-a) calc(20% + var(--beat) * 60%), transparent) !important; box-shadow: 0 0 calc(var(--beat) * 22px) color-mix(in srgb, var(--bt-b) 45%, transparent); }
body.beat-on .ch.active::after, body.beat-on .rail .active-pill { background: var(--bt-a) !important; box-shadow: 0 0 calc(4px + var(--beat) * 14px) var(--bt-a) !important; }
body.beat-on .avatar.speaking, body.beat-on .speaking .avatar { box-shadow: 0 0 0 2px var(--bt-a), 0 0 calc(var(--beat) * 16px) var(--bt-a); }
@media (prefers-reduced-motion: reduce) { body.beat-on #beatGlow { opacity: .1; } body.beat-on .mus-pill .mus-disc { scale: 1; } }

.mus-plus-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; margin-left: 6px; border-radius: 999px; background: #fff; color: #000; font-size: 11px; font-weight: 900; vertical-align: 4px; letter-spacing: .02em; }
.mus-plus-chip .ic { width: 12px; height: 12px; }

/* кнопка музыки в панели «В эфире» */
.vp-btn.vp-music { position: relative; }
.vp-btn.vp-music.locked { color: var(--muted, #a1a1aa); }
.vp-lock { position: absolute; right: 4px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; box-shadow: 0 0 0 2px #0b0b0e; }
.vp-lock .ic { width: 9px; height: 9px; }
/* без Plus окно музыки видно, но нажать в нём ничего нельзя */
.mus-locked .modal-body { pointer-events: none; user-select: none; }
.mus-locked .modal-body .mus-mode, .mus-locked .modal-body .field, .mus-locked .modal-body #musNow { opacity: .45; filter: grayscale(1); }
.mus-locked .modal-body .mus-opt:disabled { opacity: 1; cursor: default; }
.mus-locked .mus-plus { opacity: 1; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: var(--text-2); }
.vp-btn.has-hidden, .up-btn.has-hidden { position: relative; color: #fff; }
.vp-btn.has-hidden::after, .up-btn.has-hidden::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0b0b0e; animation: ctlPulse 1.6s ease-in-out infinite; }
.mus-warn { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 700; color: #fca5a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-pill.warn { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .45); }
.mus-load { position: relative; display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 700; color: #fff; overflow: hidden; padding: 0 7px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.mus-load i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: rgba(255, 255, 255, .18); transition: width .5s; }
.mus-pill.loading .mus-disc { animation-play-state: running; animation-duration: 1.6s; filter: grayscale(.6); }

/* откуда можно брать музыку */
.mus-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 4px; }
.mus-src { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--bg-hover); box-shadow: inset 0 0 0 1px #24242a; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.mus-src i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, #fff); }
.mus-src.s-youtube { --sc: #ff3b3b; } .mus-src.s-yandex { --sc: #ffcc00; } .mus-src.s-vk { --sc: #0077ff; }
.mus-src.s-rutube { --sc: #00a3ff; } .mus-src.s-bandcamp { --sc: #1da0c3; } .mus-src.s-mixcloud { --sc: #5000ff; }
.mus-disc.nocover { background: radial-gradient(circle, #2a2a31 0 30%, #17171b 31% 100%); }