/* ==========================================================================
   live-override.css — 直播内容配置覆盖层
   --------------------------------------------------------------------------
   原站把 直播标题 / 副标题 / 频道徽标 / 封面 / 开播时间 / 视频源 六项全部硬编码
   在构建产物 main-*.js 里（见 recon/src/app_module.js:175 倒计时目标、:310 文案），
   前端无法重编译，而且页面压根没有播放器。本层在运行时把这六项换成后台 /admin
   当前配置，并补上真实播放能力。

   本文件只负责两件事：
     1) 配置到手之前，遮住会被替换的写死文案 —— 避免闪现原站那套误导性内容
     2) 给覆盖层自建的状态卡 / 播放器上样式（原站没有这两个元素的样式）
   ========================================================================== */

/* --- 1. 配置到达前的遮挡 ---------------------------------------------------
   用 visibility 而不是 display：保留布局，配置一到直接显形，页面不跳。
   html[data-live] 由 live-override.js 在 app 挂载前就置为 pending。          */
html[data-live='pending'] .programme-copy h1,
html[data-live='pending'] .programme-copy > p,
html[data-live='pending'] .programme-copy .channel-name,
html[data-live='pending'] .studio-image,
html[data-live='pending'] section.countdown-card:not(#lv-card) {
  visibility: hidden;
}

/* --- 1b. 链接失效：整页内容不该再假装有直播 -------------------------------
   一条早就作废的链接如果照常显示标题封面，看起来就像「正在直播」。
   这里把内容区压暗并盖上说明卡；不 display:none —— 布局留着，不至于是白屏。 */
html[data-live='none'] .programme-copy,
html[data-live='none'] .studio-frame,
html[data-live='none'] section.countdown-card:not(#lv-card) {
  opacity: 0.12;
  filter: grayscale(1);
  pointer-events: none;
}

.lv-dead {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #f6e7c8;
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(2px);
}

.lv-dead strong { font-size: 20px; letter-spacing: 0.02em; }
.lv-dead span   { color: #cbbfa6; }
.lv-dead code   { font-size: 12px; color: #8f8778; word-break: break-all; }

/* --- 2. 永久隐藏原站自带倒计时卡 -------------------------------------------
   它在原站渲染的文案是「直播已结束 / 本场直播已结束」，却挂在 aria-label="直播倒计时"
   的卡上，语义自相矛盾。由 #lv-card 接管，不再显示。                        */
section.countdown-card:not(#lv-card) {
  display: none !important;
}

/* --- 3. 覆盖层状态卡 -------------------------------------------------------
   复用原站 .countdown-card 的排版语境，只补 chip 与数字层级。                */
#lv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#lv-card .lv-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #ffe6a8;
  background: rgba(232, 185, 98, 0.14);
  border: 1px solid rgba(232, 185, 98, 0.42);
  white-space: nowrap;
}

#lv-card .lv-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(26px, 7vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffe6a8;
  text-shadow: 0 0 22px rgba(232, 185, 98, 0.35);
  font-variant-numeric: tabular-nums;
}

#lv-card .lv-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* --- 4. 播放器 -------------------------------------------------------------
   原站没有播放器，这是覆盖层新增的。只在 status=live 且配了视频源时挂载。   */
.lv-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.lv-player-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* 播放失败提示（源失效 / 格式不支持 / CSP 拦掉）*/
.lv-player-wrap .lv-hint {
  position: absolute;
  inset: 0;
  z-index: 3;                             /* 压住角落徽标：源坏了就别再说「直播中」*/
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.82);
}

.lv-player-wrap[data-error='1'] .lv-hint {
  display: flex;
}

.lv-player-wrap[data-error='1'] video {
  visibility: hidden;
}

.lv-player-wrap .lv-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #ffe6a8;
  word-break: break-all;
}

/* --- 画面角落「直播中」（常驻状态位）--------------------------------------
   控件栏鼠标不动会淡出，但「正在播」必须一直看得见 —— 所以它独立于控件栏，
   固定右上角（左上角留给原站的频道名/标题）。绿色 = 直播中。
   它不拦点击：pointer-events:none，别把右上角抠出一个点不动的洞。        */
.lv-player-wrap .lv-corn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 2;                             /* 低于 .lv-hint：错误浮层要能盖住它 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  background: #16a34a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.lv-player-wrap .lv-corn i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: lv-live-dot 1.8s ease-out infinite;
}

@keyframes lv-live-dot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);  opacity: 0.55; }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);    opacity: 1; }
}

/* --- 直播控件栏 -------------------------------------------------------------
   直播不给时间轴：这里没有、也不会有任何滑块 / 进度元素（原生 controls 已关）。
   只有 播放·暂停 / 静音 / LIVE 徽标 / 全屏。                                    */
.lv-player-wrap video { cursor: pointer; }

.lv-player-wrap .lv-ctl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0));
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.lv-player-wrap.lv-idle .lv-ctl {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.lv-player-wrap .lv-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 0.16s ease;
}

.lv-player-wrap .lv-btn:hover { background: rgba(255, 255, 255, 0.26); }
.lv-player-wrap .lv-btn:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
.lv-player-wrap .lv-btn svg { width: 18px; height: 18px; display: block; }

.lv-player-wrap .lv-b-live {
  margin-right: 2px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 7px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(229, 46, 46, 0.92);
}

.lv-player-wrap .lv-b-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: lv-pulse 1.6s ease-in-out infinite;
}

@keyframes lv-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }

.lv-player-wrap .lv-b-gap { flex: 1 1 auto; }

/* --- 5. 封面舞台（等开播 / 已收场）------------------------------------------
   播放器拆掉后，封面就是这页唯一的内容。原站把状态卡垂直居中摆在封面正中，
   不透明的卡直接糊住封面 —— 运营看到的就是「封面看不见」。
   这里把卡推到下方压角，并铺一段上透下黑的暗角：倒数照样一眼可读，
   封面上半部（画面主体一般在上方）完整露出来。
   .lv-cover 由 live-override.js 的 focusCover() 在「非直播态」时挂上。        */
.stage-shade.lv-cover {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.00) 26%,
    rgba(0, 0, 0, 0.18) 58%,
    rgba(0, 0, 0, 0.78) 100%);
}

/* 特异性是这里唯一的坑：原站和本文件都有 `#lv-card`（ID 级 = 1,0,0）的排版规则，
   而 `.stage-shade.lv-cover #lv-card` 只有 (0,2,1) —— 直接写会被 ID 规则压掉，
   上一版「卡退底部」就是这么静默失效的（卡仍停在封面正中 y=64..174）。
   挂 html 前缀把特异性抬到 (1,2,1) 才压得住。 */
html .stage-shade.lv-cover {
  position: relative;                     /* 给状态卡一个定位上下文 */
}

html .stage-shade.lv-cover #lv-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(26px + 8px);               /* 页脚 26px + 间距 8px，不盖掉品牌行 */
  width: min(366px, 92%);
  margin: 0;
  padding: 8px 16px;
  gap: 3px;
  border-radius: 12px;
  /* 半透明 + 背景模糊：即使这块压在封面上，封面也能从卡背后透出来。
     不透明卡把封面「糊掉」才是运营说「封面看不见」的根因。 */
  background: rgba(8, 12, 18, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 185, 98, 0.22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* 压扁：big 数字是卡片高度的大头，缩掉它才能把封面中段让出来 */
html .stage-shade.lv-cover #lv-card .lv-big {
  font-size: clamp(18px, 3.6vw, 26px);
  text-shadow: none;
}

html .stage-shade.lv-cover #lv-card .lv-chip {
  padding: 2px 10px;
  font-size: 11px;
}

html .stage-shade.lv-cover #lv-card .lv-sub {
  font-size: 12px;
}

/* 封面上别再叠任何东西；只留状态卡与顶/底两条信息带 */
.studio-frame.lv-cover .studio-image { filter: none; }

/* --- 6. 消息区闸门（只在直播中开）------------------------------------------
   等开播 / 已收场时没有直播可聊：输入框一律收起（.message-form 同时也被
   live-override.js 从文档摘掉，CSS 只是别让它闪一下），消息列表压暗并封掉
   指针与滚动，中间挂一句说明 —— 让人知道是「没开」，不是「坏了」。
   .live-room[data-chat="off"] 由 applyChat() 设置。                          */
.live-room[data-chat='off'] .interaction-bar {
  display: none !important;
}

.live-room[data-chat='off'] .message-form {
  display: none !important;
}

.live-room[data-chat='off'] .audience-feed {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.live-room[data-chat='off'] .audience-feed .feed-card {
  opacity: 0.42;
  filter: grayscale(0.5);
}

.live-room[data-chat='off'] .audience-feed::after {
  content: '直播开始后开启互动';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13px;
  color: #ffe6a8;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(232, 185, 98, 0.34);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* 已收场另给一句：等开播说「开始后」，收场说清楚是这一场完了 */
.live-room[data-chat='off'][data-chat-why='ended'] .audience-feed::after {
  content: '本场已结束，不再接受互动';
}

@media (prefers-reduced-motion: reduce) {
  .lv-player-wrap .lv-b-live i { animation: none; }
  .lv-player-wrap .lv-corn i { animation: none; }
  .lv-player-wrap .lv-ctl { transition: none; }
}