/* VibeAgent · плеер урока — v1 */
.vp{position:absolute;inset:0;z-index:3}
.player video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.player.vp-on video::-webkit-media-controls{display:none!important}

.vp__hit{position:absolute;inset:0;cursor:pointer}
.vp__big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;
 background:rgba(255,255,255,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;color:#fff;cursor:pointer;
 transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .25s,background .18s;
 box-shadow:0 10px 40px rgba(0,0,0,.4)}
.vp__big:hover{background:rgba(255,255,255,.22);transform:translate(-50%,-50%) scale(1.07)}
.vp.play .vp__big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.35)}

.vp__ov{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 12px;
 background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 48%,transparent 100%);
 opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;pointer-events:none}
.vp.show .vp__ov{opacity:1;transform:none;pointer-events:auto}

.vp__sk{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px}
.vp__tr{position:relative;width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.22);overflow:visible;transition:height .15s}
.vp__sk:hover .vp__tr{height:7px}
.vp__buf{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.3);border-radius:99px}
.vp__pl{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#8B3DFF,#6200FF)}
.vp__kn{position:absolute;top:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;
 transform:translateY(-50%) scale(0);transition:transform .16s cubic-bezier(.34,1.56,.64,1);
 box-shadow:0 2px 8px rgba(0,0,0,.45)}
.vp__sk:hover .vp__kn,.vp.drag .vp__kn{transform:translateY(-50%) scale(1)}
.vp__cut{position:absolute;top:0;bottom:0;width:2px;background:#0B0B0D;opacity:.85}
.vp__tip{position:absolute;bottom:26px;transform:translateX(-50%);background:rgba(11,11,13,.94);
 border:1px solid rgba(255,255,255,.14);color:#fff;padding:6px 10px;border-radius:9px;font-size:12.5px;
 white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.vp__tip b{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#C9A7FF;margin-right:7px}
.vp__sk:hover .vp__tip{opacity:1}

.vp__row{display:flex;align-items:center;gap:5px}
.vp__b{width:36px;height:36px;flex:none;border:0;background:transparent;border-radius:10px;color:rgba(255,255,255,.88);
 cursor:pointer;display:grid;place-items:center;transition:.14s}
.vp__b:hover{background:rgba(255,255,255,.16);color:#fff}
.vp__b.w{width:auto;padding:0 11px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600}
.vp__t{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:rgba(255,255,255,.78);
 margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp__t i{color:rgba(255,255,255,.42);font-style:normal;margin:0 4px}
.vp__gap{flex:1}
.vp__ch{font-size:12.5px;color:rgba(255,255,255,.6);max-width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp__vol{display:flex;align-items:center;gap:6px}
.vp__vs{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:#8B3DFF;height:4px}
.vp__vol:hover .vp__vs{width:72px;opacity:1}
.vp__mn{position:absolute;left:0;right:0;top:0;padding:14px 18px;pointer-events:none;
 background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .22s;
 font-size:13.5px;color:rgba(255,255,255,.82)}
.vp.show .vp__mn{opacity:1}
.vp__sp{position:absolute;right:12px;bottom:64px;z-index:30;background:rgba(11,11,13,.96);border:1px solid rgba(255,255,255,.14);
 border-radius:13px;padding:5px;display:none;flex-direction:column;gap:2px;min-width:96px}
.vp__sp.on{display:flex}
.vp__sp button{height:32px;border:0;background:transparent;color:rgba(255,255,255,.82);border-radius:8px;
 font:inherit;font-size:13px;cursor:pointer;text-align:left;padding:0 11px}
.vp__sp button:hover{background:rgba(255,255,255,.13);color:#fff}
.vp__sp button.on{background:rgba(98,0,255,.35);color:#fff;font-weight:600}
.vp__fl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;opacity:0;
 background:rgba(0,0,0,.55);border-radius:50%;width:64px;height:64px;display:grid;place-items:center;pointer-events:none}
.vp__fl.go{animation:vpfl .5s ease-out}
@keyframes vpfl{0%{opacity:1;transform:translate(-50%,-50%) scale(.7)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@media(max-width:700px){.vp__ch,.vp__vs{display:none}.vp__big{width:64px;height:64px}}

/* кнопка «смотреть с этого места» в шаге практики */
.ps__go{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;margin-left:9px;
 border:1px solid #DDD6F3;background:var(--tint);color:var(--indigo-dark);border-radius:999px;
 font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;cursor:pointer;vertical-align:2px;transition:.15s}
.ps__go:hover{background:#EBE1FF;transform:translateY(-1px)}

/* мини-плеер: не наезжает на ассистента, кликается */
.mini__vid{position:relative}
.mini__tap{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;padding:0;
 display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.mini__tapi{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
 color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:.18s cubic-bezier(.34,1.56,.64,1)}
.mini__tap:hover .mini__tapi{opacity:1;transform:scale(1)}
.mini.paused .mini__tapi{opacity:1;transform:scale(1)}
.mini__pp{color:#fff!important;background:rgba(255,255,255,.16)!important}
.mini__pp:hover{background:rgba(255,255,255,.3)!important}
.mini__t{transition:color .15s}.mini__t:hover{color:#C9A7FF!important}
.vp__b.act{background:rgba(255,255,255,.22);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.player video::cue{background:rgba(11,11,13,.82);color:#fff;font-family:'Onest',system-ui,sans-serif;
 font-size:.92em;line-height:1.4;padding:2px 6px}

/* главы видео: кнопка и список (2026-10-20) */
.vp__chb{width:auto!important;padding:0 10px;gap:6px;font:600 13px/1 'Onest',system-ui,sans-serif;display:inline-flex;align-items:center}
.vp__cm{position:absolute;right:12px;bottom:64px;z-index:31;width:min(360px,calc(100% - 24px));max-height:min(62%,380px);overflow-y:auto;
  background:rgba(14,12,22,.97);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:6px;display:none;
  box-shadow:0 18px 48px rgba(0,0,0,.5);scrollbar-width:thin}
.vp__cm.on{display:block}
.vp__cmh{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:10px 10px 8px}
.vp__cm button{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:9px 10px;border:0;background:none;color:#fff;
  border-radius:9px;cursor:pointer;font:500 14px/1.35 'Onest',system-ui,sans-serif}
.vp__cm button:hover{background:rgba(255,255,255,.08)}
.vp__cm button.on{background:rgba(98,0,255,.38)}
.vp__cm button b{font:600 12px/1.55 'JetBrains Mono',monospace;color:#C9A7FF;flex:none;min-width:40px}
.vp__ch:hover{color:#fff}
@media(max-width:700px){.vp__chb span{display:none}.vp__chb{padding:0 8px}.vp__cm{bottom:56px;max-height:70%}}

/* загрузка видео после «плей» (2026-10-24): видно, что нажатие сработало */
.vp.load .vp__big{opacity:1!important;pointer-events:none;transform:translate(-50%,-50%)!important;background:rgba(0,0,0,.35)}
.vp.load .vp__big svg{display:none}
.vp.load .vp__big::after{content:"";width:34%;height:34%;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:vp-spin .8s linear infinite}
@keyframes vp-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vp.load .vp__big::after{animation-duration:2s}}