/* ==========================================================================
   xhsplayer.css · 视频播放器插件 · 极简播放器视觉
   设计语言：暗底 + 白色细控制条 + 品牌红点睛；玻璃质感控制区。
   ========================================================================== */
.xhspl{
  position:relative;
  width:100%;
  margin:0 auto 14px;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  line-height:0;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
}
/* 竖屏视频：限高居中（JS 设置 --xhspl-ar） */
.xhspl[data-vr="1"]{
  width:auto;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.xhspl video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
  outline:none;
}

/* ---- 中央播放键 ---- */
.xhspl-center{
  position:absolute;
  left:50%;top:50%;
  width:72px;height:72px;
  margin:-36px 0 0 -36px;
  border-radius:50%;
  border:0;
  background:rgba(20,20,24,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  cursor:pointer;
  z-index:6;
  transition:opacity .18s,transform .18s;
  display:flex;align-items:center;justify-content:center;
}
.xhspl-center::before{
  content:"";
  display:block;
  width:0;height:0;
  border-style:solid;
  border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent #fff;
  margin-left:5px;
}
.xhspl.is-playing .xhspl-center{opacity:0;transform:scale(.85);pointer-events:none}
.xhspl.is-playing:hover .xhspl-center{opacity:.9;transform:none;pointer-events:auto}
.xhspl-center:hover{transform:scale(1.06)}

/* ---- 底部控制条 ---- */
.xhspl-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  opacity:0;
  transition:opacity .2s;
  line-height:1;
  font-size:12px;
  color:#fff;
}
.xhspl:hover .xhspl-bar,
.xhspl.is-paused .xhspl-bar,
.xhspl.is-sending .xhspl-bar{opacity:1}
.xhspl-btn{
  border:0;background:none;color:#fff;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:.92;padding:0;
}
.xhspl-btn:hover{opacity:1}
.xhspl-btn svg{width:17px;height:17px;fill:currentColor}
.xhspl-time{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.85}
/* 进度条 */
.xhspl-prog{
  flex:1;
  height:16px;
  display:flex;align-items:center;
  cursor:pointer;
  position:relative;
}
.xhspl-prog-track{
  width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.25);
  position:relative;overflow:visible;
}
.xhspl-prog-buf{
  position:absolute;left:0;top:0;bottom:0;
  width:0;border-radius:2px;
  background:rgba(255,255,255,.38);
}
.xhspl-prog-played{
  position:absolute;left:0;top:0;bottom:0;
  width:0;border-radius:2px;
  background:var(--xhs-red,#FF2442);
}
.xhspl-prog-dot{
  position:absolute;top:50%;
  width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;
  left:0;border-radius:50%;
  background:var(--xhs-red,#FF2442);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:transform .12s;
}
.xhspl-prog:hover .xhspl-prog-track{height:6px}
.xhspl-prog:hover .xhspl-prog-dot{transform:scale(1.25)}
/* 弹幕开关 */
.xhspl-btn.dm{position:relative}
.xhspl-btn.dm::after{
  content:"";
  position:absolute;right:3px;bottom:3px;
  width:5px;height:5px;border-radius:50%;
  background:#8a8a92;
}
.xhspl-btn.dm.on::after{background:var(--xhs-red,#FF2442)}

/* ---- 弹幕层 ---- */
.xhspl-dm{
  position:absolute;
  left:0;right:0;top:0;
  height:62%;
  overflow:hidden;
  z-index:4;
  pointer-events:none;
}
.xhspl-dm-item{
  position:absolute;
  left:100%;
  white-space:nowrap;
  will-change:transform;
  font-size:15px;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.5);
  line-height:1.2;
}
/* ---- LOGO 水印 ---- */
.xhspl-logo{
  position:absolute;
  z-index:5;
  pointer-events:none;
}
.xhspl-logo img{width:100%;display:block}
.xhspl-logo[data-pos="lt"]{left:var(--xhspl-m);top:var(--xhspl-m)}
.xhspl-logo[data-pos="ct"]{left:50%;top:var(--xhspl-m);transform:translateX(-50%)}
.xhspl-logo[data-pos="rt"]{right:var(--xhspl-m);top:var(--xhspl-m)}
.xhspl-logo[data-pos="lc"]{left:var(--xhspl-m);top:50%;transform:translateY(-50%)}
.xhspl-logo[data-pos="c"]{left:50%;top:50%;transform:translate(-50%,-50%)}
.xhspl-logo[data-pos="rc"]{right:var(--xhspl-m);top:50%;transform:translateY(-50%)}
.xhspl-logo[data-pos="lb"]{left:var(--xhspl-m);bottom:52px}
.xhspl-logo[data-pos="cb"]{left:50%;bottom:52px;transform:translateX(-50%)}
.xhspl-logo[data-pos="rb"]{right:var(--xhspl-m);bottom:52px}

/* ---- 弹幕发送条 ---- */
.xhspl-send{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:8;
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:rgba(12,12,16,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.xhspl.is-sending .xhspl-send{display:flex}
.xhspl.is-sending .xhspl-bar{opacity:0;pointer-events:none}
.xhspl-send input[type=text]{
  flex:1;
  min-width:0;
  height:32px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:13px;
  outline:none;
}
.xhspl-send input[type=text]:focus{border-color:var(--xhs-red,#FF2442)}
.xhspl-send select{
  height:32px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:12px;
  outline:none;
  padding:0 8px;
}
.xhspl-send select option{color:#222}
.xhspl-send .xhspl-sendbtn{
  height:32px;
  padding:0 16px;
  border:0;border-radius:16px;
  background:var(--xhs-red,#FF2442);
  color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;
}
.xhspl-send .xhspl-sendbtn:disabled{opacity:.5}
.xhspl-send .xhspl-closebtn{
  border:0;background:none;color:#fff;
  width:28px;height:28px;cursor:pointer;opacity:.8;font-size:16px;
}
.xhspl-msg{
  position:absolute;
  left:50%;top:16%;
  transform:translateX(-50%);
  z-index:9;
  padding:7px 16px;
  border-radius:18px;
  background:rgba(12,12,16,.78);
  color:#fff;font-size:13px;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
  line-height:1.4;
  max-width:80%;
  text-align:center;
}
.xhspl-msg.show{opacity:1}

/* ---- 失败兜底层（视频源不可用 / 被浏览器拦截 / 解码失败） ---- */
.xhspl-fail{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  z-index:10;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10,10,14,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  line-height:1.5;
}
.xhspl.has-fail .xhspl-fail{display:flex}
.xhspl-fail-box{
  width:100%;
  max-width:340px;
  text-align:center;
  color:#fff;
}
.xhspl-fail-icon{
  width:38px;height:38px;
  margin:0 auto 10px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.08);
}
.xhspl-fail-msg{
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.9);
  word-break:break-word;
}
.xhspl-fail-acts{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.xhspl-fail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.xhspl-fail-btn.primary{
  background:var(--xhs-red,#FF2442);
  border-color:var(--xhs-red,#FF2442);
}
.xhspl-fail-btn:hover{opacity:.88}
.xhspl-fail-btn:active{transform:scale(.97)}

/* 降级为原生播放器时，隐藏自研 UI，露出浏览器控件 */
.xhspl.native-mode .xhspl-bar,
.xhspl.native-mode .xhspl-center,
.xhspl.native-mode .xhspl-dm{display:none!important}
.xhspl.native-mode video{pointer-events:auto}
/* 降级后仍保留一个轻量「重试」角标，可切回自研播放器 */
.xhspl.native-mode .xhspl-fail{
  display:block;
  left:auto;right:8px;top:8px;bottom:auto;
  padding:0;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.xhspl.native-mode .xhspl-fail-box{display:block;width:auto}
.xhspl.native-mode .xhspl-fail-icon,
.xhspl.native-mode .xhspl-fail-msg{display:none}
.xhspl.native-mode .xhspl-fail-acts{margin:0}
.xhspl.native-mode .xhspl-fail-btn:not(.xhspl-fail-retry){display:none}
.xhspl.native-mode .xhspl-fail-retry{
  height:26px;padding:0 10px;font-size:11.5px;
  background:rgba(12,12,16,.62);
  border-color:rgba(255,255,255,.25);
}

/* ---- 全屏态 ---- */
.xhspl:fullscreen{border-radius:0;width:100%}
.xhspl:fullscreen video{max-height:100vh}
.xhspl:-webkit-full-screen{border-radius:0}

@media (max-width:768px){
  .xhspl-center{width:56px;height:56px;margin:-28px 0 0 -28px}
  .xhspl-bar{padding:6px 10px;gap:7px}
  .xhspl-dm-item{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .xhspl *{transition:none!important}
}

/* ---- 静音状态标识（自动播放策略下静音起播的兜底提示） ---- */
.xhspl.is-muted .xhspl-time::after{
  content:"静音";
  display:inline-block;
  margin-left:6px;
  padding:1px 5px;
  border-radius:4px;
  font-size:10px;
  line-height:1.4;
  color:#fff;
  background:rgba(255,255,255,.22);
  vertical-align:middle;
}

/* ---- 被 App 内置浏览器接管时的提示样式 ---- */
.xhspl.is-hijacked .xhspl-fail-icon{
  border-color:var(--xhs-red,#FF2442);
  color:var(--xhs-red,#FF2442);
}
/* 被接管时隐藏自研播放键，避免用户点了没反应 */
.xhspl.is-hijacked .xhspl-center{display:none}

/* ---- CSS 伪全屏（WebView 无 Fullscreen API 时的兜底） ---- */
.xhspl[data-fs="1"]{
  position:fixed;
  left:0;top:0;right:0;bottom:0;
  z-index:99999;
  width:100vw;height:100vh;
  max-height:none!important;
  width:100vw!important;
  border-radius:0;
  background:#000;
}
.xhspl[data-fs="1"] video{width:100%;height:100%;object-fit:contain}
body.xhspl-fs-lock{overflow:hidden}