/* Sourgen · AI 视频讲课页样式 */

.video-view{ display:none; }
body[data-page="video"] .video-view{ display:block; padding:26px 0 60px; }
body[data-page="video"] main,
body[data-page="video"] .ai-fab{ display:none !important; }

.vd-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.vd-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.vd-head h1{ font-size:30px; }
.vd-head p{ color:var(--soft); font-size:14px; margin-top:6px; }
.vd-tag{ font-family:var(--mono); font-size:11.5px; color:var(--soft); border:1px solid var(--line-hard); border-radius:999px; padding:3px 10px; }

.vd-setup{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px; display:grid; gap:14px;
}
.vd-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.vd-field{ display:grid; gap:6px; }
.vd-field > span{ font-size:12.5px; color:var(--soft); font-family:var(--mono); }
.vd-field input, .vd-field select{
  background:var(--surface2); border:1px solid var(--line-hard); color:var(--ink);
  border-radius:10px; padding:11px 13px; font:inherit; min-width:150px;
}
.vd-field.grow{ flex:1 1 300px; }
.vd-field.grow input{ width:100%; }
.vd-hints{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--soft); }
.vd-hints button{
  border:1px solid var(--line-hard); border-radius:999px; padding:5px 12px;
  font-size:12.5px; color:var(--body);
}
.vd-hints button:hover{ border-color:var(--ink); color:var(--ink); }

.vd-msg{ font-size:13px; color:var(--soft); font-family:var(--mono); min-height:18px; }
.vd-msg.ok{ color:var(--ok); }
.vd-msg.err{ color:var(--no); }

.vd-stage{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
.vd-player{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; position:relative; }
#vd-canvas{ width:100%; height:auto; display:block; border-radius:10px; background:#05060A; }
.vd-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-top:12px; }
.vd-bar .sp{ flex:1; }
.vd-bar button{
  border:1px solid var(--line-hard); border-radius:10px; padding:8px 14px; font-size:13.5px;
  background:var(--surface2); color:var(--ink);
}
.vd-bar button:hover{ border-color:var(--ink); }
.vd-bar button#vd-play{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:700; }
.vd-bar select{ background:var(--surface2); border:1px solid var(--line-hard); color:var(--ink); border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; }
.vd-bar label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--soft); }
.vd-now{ font-family:var(--mono); font-size:12.5px; color:var(--soft); }

.vd-side{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; }
.vd-side h3{ font-size:14px; font-family:var(--mono); color:var(--soft); font-weight:600; margin-bottom:10px; }
.vd-side ol{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.vd-side li{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer;
  display:grid; gap:3px; background:var(--surface2);
}
.vd-side li:hover{ border-color:var(--line-hard); }
.vd-side li.on{ border-color:var(--py); background:rgba(76,125,255,.10); }
.vd-side li b{ font-size:13.5px; }
.vd-side li span{ font-size:12px; color:var(--soft); line-height:1.5; }
.vd-side .vd-title{ font-size:15px; font-weight:700; margin-bottom:4px; }

@media (max-width:900px){
  .vd-stage{ grid-template-columns:minmax(0,1fr); }
  .vd-side ol{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .vd-head h1{ font-size:24px; }
}

/* ---------- 弹幕 ---------- */
.vd-dm-layer{
  position:absolute; overflow:hidden; pointer-events:none; border-radius:10px;
  transition:opacity .18s ease; z-index:2;
}
.vd-dm{
  position:absolute; left:100%; top:0; white-space:nowrap; max-width:82%;
  overflow:hidden; text-overflow:ellipsis;
  padding:3px 12px; border-radius:999px;
  background:rgba(0,0,0,.58); color:#EAF0F7;
  font-size:14px; line-height:1.5; letter-spacing:.2px;
  font-family:var(--sans,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif);
  animation:vdmv linear forwards; will-change:transform;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.vd-dm b{ color:#8FB2FF; font-weight:600; margin-right:8px; font-size:13px; }
.vd-dm.emo{ font-size:19px; background:rgba(0,0,0,.44); }
.vd-dm.mine{ background:rgba(76,125,255,.72); }
.vd-dm.mine b{ color:#EAF0F7; }
@keyframes vdmv{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-1 * var(--dmw,1000px) - 100%)); }
}
.vd-dm-bar{ display:flex; gap:8px; align-items:center; padding-top:10px; border-top:1px solid var(--line); margin-top:12px; flex-wrap:wrap; }
.vd-dm-bar input{
  flex:1; min-width:160px; background:var(--surface2); border:1px solid var(--line-hard);
  color:var(--ink); border-radius:10px; padding:9px 12px; font:inherit; font-size:13px;
}
.vd-dm-bar input:focus{ outline:none; border-color:var(--py); }
.vd-dm-bar button{
  background:var(--surface2); border:1px solid var(--line-hard); color:var(--ink);
  border-radius:10px; padding:8px 13px; font:inherit; font-size:13px; cursor:pointer;
}
.vd-dm-bar button:hover{ border-color:var(--ink); }
#vd-dm-on{ min-width:58px; color:var(--soft); }
#vd-dm-on.on{ color:var(--ink); border-color:var(--py); background:rgba(76,125,255,.14); font-weight:600; }
.vd-emoji-panel{
  display:flex; flex-wrap:wrap; gap:6px; padding-top:10px;
}
.vd-emoji-panel button{
  background:var(--surface2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; min-width:40px; padding:6px 8px; font-size:15px; cursor:pointer; line-height:1.2;
}
.vd-emoji-panel button:hover{ border-color:var(--line-hard); background:rgba(76,125,255,.12); }

@media (max-width:640px){
  .vd-dm{ font-size:13px; }
  .vd-dm-bar input{ min-width:0; }
}