/* =============================================================================
   player-layout.min.css
   在原始 player.min.css 皮肤之上只做「布局重排」，复用原配色 / 频道项 / 分类 / 按钮。

   真实 DOM（运行时由 player.min.js 注入，body 直子元素）：
     .epg_log            <- EPG「加载日志」浮层（.epg_row + success/error 图标），不是节目单
     #playlist           <- 频道列表 + EPG 时间轴
     #vpPlayerWrap>#player
   #playlist 子元素顺序：.action-bar -> .timeline-header -> .timebar -> .group* -> .channel* -> .footer
   .channel 子元素：.logo + .name(>.ch-name) + .ch-btns + .epg-channel(>.epg-program>.epg-title)

   原始设计是「视口左侧 125px 悬浮窄栏，hover 展开到 420px」的桌面 hover 模型：
     - .action-bar / .timeline-header / .footer 均为 position:fixed，钉死在视口上下沿；
     - .epg-channel / .timeline / .shift-buttons 默认 visibility:hidden，仅 :hover 才显示；
     - EPG 横向时间轴靠 JS 改 --epg-shift（clip-path + margin-left 2s 过渡）平移。
   移动端没有 hover => EPG 永远不显示；fixed 头部也不跟随列表 => 必须重排。

   本文件的改造（PC / 移动端一致）：
     1. 头部（action-bar / timeline-header）与底部（footer）改 sticky，跟随列表而非钉视口；
     2. EPG 元素默认可见，不再依赖 hover；
     3. EPG 横向改为浏览器原生滚动（覆盖 clip-path / margin-left 平移）：
        PC 滚轮 / 拖滚动条、移动端手指滑动都自然可用，且各端行为一致；
     4. 频道行左侧（logo + name）sticky 横向固定，右侧时间轴滚动；
     5. .timebar（当前时刻游标）改 absolute 锚定在列表内容坐标系，随横向滚动同步。
   ============================================================================= */

:root {
  --vp-player-h: 54vh;   /* 播放区高度 */
  --vp-chan-w: 398px;    /* 频道行左侧固定列总宽 = logo126 + name240 + ch-btns32 */
  --vp-bar-h: 40px;      /* .action-bar 高 */
  --vp-time-h: 33px;     /* .timeline-header 高 */
}

/* 统一盒模型，避免 padding 撑大宽度导致移动端横向溢出 */
#vpPlayerWrap, #playlist, .epg_log,
#vpPlayerWrap #multi-container, #vpPlayerWrap #player { box-sizing: border-box !important; }

html, body { margin: 0; padding: 0; }
body { height: 100vh; overflow: hidden; background: #000; }

/* ---------------------------------------------------------------- 播放区 */
/* 外层包裹由我们完全掌控（jwplayer 只动 #player 内部），
   播放模式让外层 fixed+inset:0 贴满，避免被 jwplayer 内联样式破坏。 */
#vpPlayerWrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--vp-player-h) !important;
  z-index: 5 !important;
  background: #000;
}
#player, #player .jwplayer, #player .jw-wrapper,
#player .jw-media, #player video, #player .jw-video {
  width: 100% !important; height: 100% !important;
  margin: 0 !important; max-width: none !important;
}
/* jwplayer setup 时会把 #player 移入自建的 #multi-container；
   该容器默认无确定高度会让播放器回退到视口高度（撑满整屏、盖住列表），必须显式给高。 */
#vpPlayerWrap #multi-container, #vpPlayerWrap #player {
  width: 100% !important; height: 100% !important;
  margin: 0 !important; max-width: none !important; background: #000;
}

/* --------------------------------------------- EPG 加载日志（不是节目单） */
/* 恢复为浮在播放区右上角的轻量状态浮层，不再占据页面分区。 */
.epg_log {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  max-width: 60% !important;
  z-index: 40 !important;
}

/* ------------------------------------------------------------- 频道列表区 */
/* 原为 position:fixed;width:125px 的左侧窄栏 -> 改为页面下方整块 TV guide 区：
   纵向滚频道，横向滚 EPG 时间轴（原生滚动）。 */
#playlist, #playlist:hover {
  position: absolute !important;
  top: var(--vp-player-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: auto !important;          /* 纵向 + 横向原生滚动 */
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  z-index: 6 !important;
  background-color: rgba(12, 4, 88, .8) !important;
}

/* 顶部操作栏：跟随列表吸顶（原 position:fixed;top:0;width:125px） */
#playlist .action-bar,
#playlist:hover .action-bar,
#playlist.epg.epg-key-hold:hover .action-bar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;             /* 实际宽度由 player.html 同步为列表可视宽 */
  height: var(--vp-bar-h) !important;
  z-index: 5 !important;
  background-color: rgba(7, 1, 66, .96) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 10px !important;
  transition: none !important;        /* 覆盖原 transition:width 1s,top 1s，避免展开抖动 */
  overflow: visible !important;       /* 覆盖原 overflow:hidden，让子元素可超出 */
}
/* 「频道」标签：无任何作用且白占 126px 宽度，直接隐藏（不动 JS，仅 CSS 隐藏） */
#playlist .action-bar .search-title {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 搜索输入：覆盖原 visibility:hidden，强制默认可见；占中间弹性空间 */
#playlist .action-bar .search-input,
#playlist:hover .action-bar .search-input,
#playlist.epg.epg-key-hold:hover .action-bar .search-input {
  visibility: visible !important;
  position: relative !important;
  flex: 1 1 50% !important;            /* 与 shift-buttons 各占 action-bar 一半 */
  width: 50% !important;
  min-width: 50px !important;
  height: 32px !important;
  padding: 0 28px 0 28px !important;  /* 左侧给搜索图标，右侧给深度搜索按钮 */
  display: flex !important;
  align-items: center !important;
  background-color: rgba(7, 1, 66, .55) !important;
  border: 1px solid rgba(0, 18, 159, .6) !important;
  border-radius: 8px !important;
}
#playlist .action-bar .search-input .search-preicon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, .55) !important;
  pointer-events: none !important;
}
#playlist .action-bar .search-input input[type=text] {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#playlist .action-bar .search-input input[type=text]::placeholder {
  color: rgba(255, 255, 255, .45) !important;
  font-size: 13px !important;
}
#playlist .action-bar .search-input input[type=text]:focus {
  border: 0 !important;
}
#playlist .action-bar .search-input:focus-within {
  border-color: rgba(120, 100, 255, .9) !important;
  background-color: rgba(7, 1, 66, .85) !important;
}
#playlist .action-bar .search-input label {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;            /* 覆盖原 display:none */
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, .65) !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
#playlist .action-bar .search-input label input[type=checkbox] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 时间切换按钮常显（原 visibility:hidden 仅 hover 显示，移动端无法触发）；
   与搜索框各占 action-bar 一半宽度，箭头靠右对齐 */
#playlist .action-bar .shift-buttons {
  visibility: visible !important;
  flex: 1 1 50% !important;
  width: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding: 0 !important;
}
#playlist .action-bar .shift-buttons .fas {
  margin: 0 !important;
  width: 36px !important;             /* 固定宽高，外观统一 */
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, .85) !important;
  background-color: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color .15s, border-color .15s, color .15s !important;
}
#playlist .action-bar .shift-buttons .fas:hover {
  background-color: rgba(120, 100, 255, .35) !important;
  border-color: rgba(120, 100, 255, .8) !important;
  color: #fff !important;
}

/* 时间刻度头：跟随列表第二条吸顶（原 position:fixed;top:40px;width:125px） */
#playlist .timeline-header,
#playlist:hover .timeline-header,
#playlist.epg.epg-key-hold:hover .timeline-header {
  position: sticky !important;
  top: var(--vp-bar-h) !important;
  width: max-content !important;      /* 时间刻度需横向铺开，与 EPG 时间轴等长 */
  min-width: 100% !important;
  height: var(--vp-time-h) !important;
  z-index: 5 !important;
}
/* 左侧「当前时间 / 日期」横向滚动时固定，右侧时间刻度随之滚动 */
#playlist .timeline-header .current-time,
#playlist .timeline-header .current-date {
  position: sticky !important;
  z-index: 4 !important;
  background-color: rgba(7, 1, 66, .96) !important;
}
#playlist .timeline-header .current-time { left: 0 !important; }
#playlist .timeline-header .current-date { left: 126px !important; }
/* 时间刻度常显，并去掉原来的 clip-path/margin-left 平移（改用原生滚动） */
#playlist .timeline-header .timeline,
#playlist:hover.epg-key-hold .timeline {
  visibility: visible !important;
  margin-left: 0 !important;
  clip-path: none !important;
  transition: none !important;
}

/* 当前时刻垂直游标：锚定在列表内容坐标系，随 EPG 横向滚动同步
   （原 position:fixed;top:40px;left:396px;height:100vh;visibility:hidden）
   层级须低于左侧 sticky 频道名列，否则游标会画在频道名之上。 */
#playlist.epg .timebar,
#playlist.epg.epg-key-hold:hover .timebar {
  position: absolute !important;
  top: calc(var(--vp-bar-h) + var(--vp-time-h)) !important;
  bottom: 0 !important;
  left: var(--vp-chan-w) !important;
  height: auto !important;
  margin-left: calc(var(--epg-timebar, 0) * 1px) !important;  /* 去掉 -(--epg-shift)：不再平移 */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#playlist.epg .timebar .timebar-bar { height: 100% !important; }

/* 分类标题：横向滚动时固定左侧 */
#playlist .group {
  position: sticky !important;
  left: 0 !important;
  min-width: var(--vp-chan-w) !important;
  z-index: 3 !important;
}

/* 频道行：左侧固定列 + 右侧 EPG 时间轴（原生横向滚动，不再 clip-path 平移） */
#playlist .channel {
  min-width: max-content !important;   /* 覆盖原 min-width:390px，让超宽时间轴撑开 */
  overflow: visible !important;
  height: 56px !important;
}
#playlist .channel .logo,
#playlist .channel .name,
#playlist .channel .ch-btns {
  position: sticky !important;
  z-index: 4 !important;                                      /* 高于 .timebar 与节目条 */
  background-color: rgba(12, 4, 88, .96) !important;  /* 遮住下方滚过的时间轴 */
}
#playlist .channel .logo     { left: 0 !important; }
#playlist .channel .name     { left: 126px !important; }
#playlist .channel .ch-btns  { left: 366px !important; }

/* EPG 节目条：默认可见（原 visibility:hidden 需 hover），去掉平移改用原生滚动 */
#playlist .channel .epg-channel,
#playlist:hover.epg-key-hold .epg-channel {
  visibility: visible !important;
  margin-left: 0 !important;
  clip-path: none !important;
  transition: none !important;
}

/* 底部徽章栏：跟随列表吸底（原 position:fixed;bottom:0;width:125px） */
#playlist .footer,
#playlist:hover .footer,
#playlist.epg.epg-key-hold:hover .footer {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  z-index: 5 !important;
  background-color: rgba(7, 1, 66, .96) !important;
}

/* ------------------------------------------------------------ 播放模式 */
body.vp-playing #vpPlayerWrap {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: auto !important;
  z-index: 50 !important;
}

/* 播放区操作按钮组（左上角浮动）：全屏切换 + EPG 切换，控制栏隐藏时整体隐藏 */
.vp-fab-group {
  position: fixed !important;
  top: 12px !important; left: 12px !important;
  z-index: 60 !important;
  display: flex !important;
  gap: 8px !important;
}
.vp-fab {
  position: static !important;
  padding: 8px 14px !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: #fff !important;
  background: rgba(20, 20, 28, .82) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.vp-fab.active { background: rgba(123, 79, 196, .92) !important; border-color: #fff !important; }
/* 控制栏隐藏(.jw-flag-user-inactive) → 播放区操作按钮整体隐藏（含新增 EPG 按钮） */
body.vp-controls-hidden .vp-fab-group { display: none !important; }
/* 点击 EPG 按钮后常显标题（覆盖默认 display:none!important 及 user-inactive 隐藏）。
   pointer-events:auto：标题位于 .jw-display 显示层，该层默认 none（点击穿透到视频）；
   钉住态显式 auto，确保标题子树（含内部 ✕ 关闭按钮）可点击，PC 与移动端一致。 */
.jw-skin-extension.jwplayer.vp-epg-pinned .jw-title { display: flex !important; pointer-events: auto !important; visibility: visible !important; }
/* 手动点 ✕ 关闭后强制隐藏标题，直到切频道(play)或再次点 EPG；与 vp-epg-pinned 不同时存在，故无需担心优先级 */
.jw-skin-extension.jwplayer.vp-epg-closed .jw-title { display: none !important; }

/* PC 端(≥992px)：默认隐藏 EPG 信息面板(.jw-title)，仅两种情形显示——
   ① 点 EPG 按钮钉住(.vp-epg-pinned，见上)；② 切频道后短暂展示一次(.vp-epg-switch，由 player.html 在 play 后加约4s)。
   原因：jwplayer 默认「控制栏活跃(鼠标进入播放区)即显示标题」，而「收起」按钮在播放区右上角，
   鼠标移到它身上必然先经过播放区 → 唤醒标题 → EPG 面板误弹出，且非钉住态下 ✕ 关掉后活跃态又顶出来（像关不掉）。
   此规则仅 PC 生效；移动端(<992px)不应用，保留 jwplayer 默认活动即显示行为（移动端 ✕ 关闭已验证正常）。 */
@media (min-width: 992px) {
  .jw-skin-extension .jw-title { display: none !important; }
  .jw-skin-extension.jwplayer.vp-epg-switch .jw-title { display: flex !important; pointer-events: auto !important; visibility: visible !important; }
}

/* 关闭(✕)按钮：作为 .jw-title 的子元素（见 player.html 的 mountCloseBtn），
   用 position:absolute 锚定标题右下角(内偏5px)。钉住态 .jw-title 设 visibility:visible!important
   （见上方 .vp-epg-pinned 规则），故播放中控制栏隐藏(jw-display 被设 visibility:hidden)时
   ✕ 作为子元素仍可见可点，PC/移动端机制完全一致，无需顶层 fixed + JS 坐标定位。 */
.vp-epg-close {
  position: absolute !important;
  top: auto !important; left: auto !important;
  bottom: 5px !important; right: 5px !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  display: flex !important; /* 默认即常显，无需点击 EPG 才出现 */
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important; height: 34px !important;
  font-size: 20px !important; line-height: 1 !important;
  color: #fff !important;
  background: rgba(20, 20, 28, .82) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vp-epg-close:hover { background: rgba(123, 79, 196, .92) !important; border-color: #fff !important; }
.vp-epg-close:active { transform: scale(.94); }

/* =============================================================================
   移动端 / 窄屏（<992px）：播放区收窄，频道名列大幅压缩，
   把屏幕剩余宽度全部让给 EPG 时间轴（原生横向滚动 + 手指滑动）。
   ============================================================================= */
@media (max-width: 991px) {
  :root {
    --vp-player-h: 34vh;
    --vp-chan-w: 120px;      /* logo 44 + name 76（ch-btns 隐藏） */
  }

  #playlist .channel { height: 52px !important; }

  /* 压缩左侧固定列，给 EPG 留出行宽 */
  #playlist .channel .logo {
    width: 44px !important;
    height: 46px !important;
    font-size: 20px !important;
  }
  #playlist .channel .logo img { max-width: 40px !important; max-height: 32px !important; }
  #playlist .channel .name {
    left: 44px !important;
    width: 72px !important;
    height: 46px !important;
    max-height: 46px !important;
    padding-left: 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  #playlist .channel .ch-btns { display: none !important; }

  /* 时间刻度头同样压缩 */
  #playlist .timeline-header { font-size: 14px !important; }
  #playlist .timeline-header .current-time { width: 116px !important; font-size: 13px !important; }
  #playlist .timeline-header .current-date { left: 116px !important; width: auto !important; padding-left: 8px !important; font-size: 12px !important; }
  #playlist .timeline-header .timeline .timeline-block { width: 200px !important; font-size: 12px !important; }

  /* 节目条适配小屏 */
  #playlist .channel .epg-channel { height: 46px !important; }
  #playlist .channel .epg-channel .epg-program {
    height: 40px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }
  #playlist .channel .epg-channel .epg-program .epg-title { max-height: 40px !important; }

  /* 操作栏：紧凑布局，隐藏深度搜索按钮，gap 缩小 */
  #playlist .action-bar {
    gap: 6px !important;
    padding: 0 6px !important;
  }
  /* .search-title 已由基准规则 display:none 隐藏，此处不再覆盖 */
  /* 搜索输入：占满中间弹性空间，隐藏深度搜索按钮（PC 才用） */
  #playlist .action-bar .search-input {
    height: 30px !important;
    padding: 0 22px 0 24px !important;
    border-radius: 7px !important;
  }
  #playlist .action-bar .search-input .search-preicon {
    left: 8px !important;
    font-size: 12px !important;
  }
  #playlist .action-bar .search-input input[type=text] {
    font-size: 13px !important;
  }
  #playlist .action-bar .search-input input[type=text]::placeholder {
    font-size: 12px !important;
  }
  #playlist .action-bar .search-input label {
    display: none !important;          /* 移动端隐藏深度搜索按钮，腾出空间 */
  }
  /* shift-buttons 触控区稍大但仍紧凑，宽度继承基准的 50% */
  #playlist .action-bar .shift-buttons { gap: 3px !important; }
  #playlist .action-bar .shift-buttons .fas {
    width: 32px !important;
    height: 30px !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }

  #playlist .footer .badge-container { width: auto !important; }
  .vp-fab-group { top: 8px !important; left: 8px !important; gap: 6px !important; }
  .vp-fab { padding: 7px 12px !important; font-size: 13px !important; }
  .vp-epg-close { width: 28px !important; height: 28px !important; font-size: 16px !important; }

  /* jwplayer 标题在窄屏被 cqi/cqb 容器单位缩到约 0.32 倍→文字极小，且被
     margin-left:calc(50% - 560px) 推到屏幕外；移动端关掉缩放、改流式宽度、修正居中，
     让 20~25px 字号保持可读（PC 端基准规则在宽视口下 scale≈1，不受影响） */
  .jw-title {
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 54px 8px 8px !important;   /* 顶部留白避开左上角按钮组(.vp-fab-group) */
    padding: 12px !important;
  }
  .jw-skin-extension .jw-title { gap: 12px !important; }
  /* 移动端 EPG 标题细化（基于第一性原则，与 PC 视觉解耦、避免挤出/过大） */
  /* 节目名(jw-title-program)字号收紧到 1rem，原 25px/1.2rem 在窄屏仍过大 */
  .jw-skin-extension .jw-title .jw-title-program.jw-reset-text { font-size: 1rem !important; line-height: 1.5 !important; padding-bottom: 4px !important; }
  /* 左侧频道 logo/名称列在窄屏占 15% 且挤，直接隐藏让右侧信息占满 */
  .jw-skin-extension .jw-title .jw-title-left { display: none !important; }
  /* 左列隐藏后，jwplayer 默认的 .jw-title-right{width:85%} 会在右侧空出 15% 缝隙；
     这里把右列宽度补满 100%（仅移动端：左列已隐藏才安全，桌面端左列可见须保留 85% 否则溢出） */
  .jw-skin-extension .jw-title .jw-title-right { width: 100% !important; }
  /* 移动端 EPG 标题信息行(jw-title-information)整体允许换行、高度自适应，避免时间/进度/标签被挤出屏幕 */
  .jw-skin-extension .jw-title .jw-title-right .jw-title-information {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    height: auto !important;
    padding-bottom: 6px !important;
    align-items: center !important;
  }
  /* 进度条在窄屏自适应，避免硬宽 150px 把标签挤出去 */
  .jw-skin-extension .jw-title .jw-title-right .jw-title-information .jw-title-progress { flex: 1 1 100px !important; min-width: 80px !important; }
  .jw-skin-extension .jw-title .jw-title-right .jw-title-information .jw-title-progress progress { width: 100% !important; }
  /* 清晰度标签(jw-title-quality)在窄屏换行排布，标签本身缩小、间距收紧 */
  .jw-skin-extension .jw-title .jw-title-right .jw-title-information .jw-title-quality { flex-wrap: wrap !important; gap: 4px 6px !important; }
  .jw-skin-extension .jw-title .jw-title-right .jw-title-information .jw-title-quality .label {
    font-size: 11px !important;
    padding: 2px 5px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
  .jw-skin-extension .jw-title .jw-title-right .jw-title-information .jw-title-quality .label .fas {
    font-size: 13px !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
  }
  /* 移动端 EPG 描述字号收紧到 12px（原 18px 在窄屏过大） */
  .jw-skin-extension .jw-title .jw-title-right .jw-title-description { font-size: 12px !important; line-height: 1.4 !important; }
}