/* ==========================================================================
   Skarn Klippe — EasyView 媒体组件扩展
   补齐 skarn 缺的 EasyView 核心组件:播放器外壳 / 控制条 / 时间轴 scrubber /
   日期导航 / 分段开关 / 全屏 / 加载错误遮罩 / 内联图标。
   风格遵循 Skarn 设计语言:绝对直角、令牌驱动、8px 节奏。
   ========================================================================== */

/* ---------------------------------------------------------------- 图标 */
.sk-ico {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  vertical-align: -0.15em;
  display: inline-block;
  flex: none;
}

/* ---------------------------------------------------------------- 播放器外壳 */
.sk-player {
  position: relative;
  background: #000;
  border: 1px solid var(--skarn-border);
}
.sk-player--fs,
.sk-player:fullscreen {
  border: none;   /* 全屏状态下不要边框 */
}
.sk-player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.sk-player__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sk-player__ov {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sk-player__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 控制条:底部渐变(多段平滑,不显生硬色阶)+ 悬停显示 */
.sk-player__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(0deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.5) 34%,
    rgba(0, 0, 0, 0.22) 66%,
    rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  color: #e4e5e8;
}
.sk-player:hover .sk-player__controls,
.sk-player:focus-within .sk-player__controls,
.sk-player__controls--show {
  opacity: 1;
}
.sk-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.05rem;
  border-radius: 0;
  flex: none;
}
.sk-player__btn:hover { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }
.sk-player__btn.is-active { color: #6796d1; }
/* 传输组(后退15/播放/前进15):在整个播放器宽度上绝对居中 */
.sk-player__transport {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
/* 音量:喇叭图标在容器内,容器 hover 加宽露出滑条并框住整条 */
.sk-player__volwrap {
  display: flex;
  align-items: center;
  width: 2.25rem;
  overflow: hidden;
  border: 1px solid transparent;
  transition: width 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  flex: none;
}
.sk-player__volwrap:hover {
  width: 6.75rem;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.sk-player__volwrap .sk-player__btn { flex: none; }
.sk-player__volwrap .sk-player__btn:hover { border-color: transparent; background: transparent; }
.sk-player__time {
  font: 12px/1 "JetBrains Mono", Consolas, monospace;
  color: rgba(228, 229, 232, 0.85);
  padding: 0 4px;
  white-space: nowrap;
  flex: none;
}
.sk-player__spacer { flex: 1 1 auto; }

/* 全屏态:视频填满视口,控制条加大 */
.sk-player--fs {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
}
.sk-player--fs .sk-player__frame {
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
}
.sk-player--fs .sk-player__btn { width: 3rem; height: 3rem; font-size: 1.4rem; }
.sk-player--fs .sk-player__time { font-size: 14px; }

/* ---------------------------------------------------------------- 分段开关(Live/回看) */
.sk-seg {
  display: inline-flex;
  border: 1px solid var(--skarn-border);
  background: var(--skarn-surface);
}
.sk-seg__item {
  padding: 6px 16px;
  border: 0;
  background: transparent;
  color: var(--skarn-text-muted);
  font: inherit;
  cursor: pointer;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sk-seg__item + .sk-seg__item { border-left: 1px solid var(--skarn-border); }
.sk-seg__item.is-active {
  background: var(--skarn-primary);
  color: var(--skarn-on-primary);
}
.sk-seg__item:hover:not(.is-active) { background: color-mix(in srgb, var(--skarn-primary) 8%, var(--skarn-surface)); }
.sk-seg--sm .sk-seg__item { padding: 3px 10px; font-size: 0.85rem; }
.sk-seg__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------- 日期导航 */
.sk-datenav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sk-datenav__label {
  font: 13px/1 "JetBrains Mono", Consolas, monospace;
  color: var(--skarn-text-main);
  padding: 0 6px;
  min-width: 88px;
  text-align: center;
}

/* ---------------------------------------------------------------- 时间轴 scrubber */
.sk-tl {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.sk-tl__mainwrap {
  position: relative;
  height: 58px;
  cursor: pointer;
  overflow: hidden;
  background: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
}
.sk-tl__miniwrap {
  position: relative;
  height: 34px;
  margin-top: 4px;
  cursor: pointer;
  overflow: hidden;
  background: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
}
.sk-tl__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;   /* 事件统一由 wrap 接收,整条时间轴任何位置都可拖 */
}
/* 播放头(实际位置);用文字色:亮色=黑、暗色=白,跟随主题 */
.sk-tl__pos {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--skarn-text-main);
  z-index: 3;
  pointer-events: none;
  display: none;
}
/* 定位头(橙,scrub 目标) */
.sk-tl__loc {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--skarn-warning);
  z-index: 2;
  pointer-events: none;
  display: none;
}
/* 「现在」线(直播锚点) */
.sk-tl__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--skarn-danger);
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
  display: none;
}
/* 光标/定位头上方的时间提示(HH:MM:SS) */
.sk-tl__tip {
  position: absolute;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  background: var(--skarn-surface);
  border: 1px solid var(--skarn-border);
  color: var(--skarn-text-main);
  font: 11px/1 "Inter TNUM", "JetBrains Mono", Consolas, monospace;
  padding: 3px 7px;
  pointer-events: none;
  z-index: 6;
  display: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  white-space: nowrap;
  box-shadow: var(--skarn-shadow, none);
}
/* 全天条上的视窗指示条 */
.sk-tl__viewwin {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid var(--skarn-primary);
  z-index: 2;
  display: none;
  cursor: grab;
}
.sk-tl__viewwin.dragging { cursor: grabbing; }

/* ---------------------------------------------------------------- 加载/错误遮罩 */
.sk-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--skarn-text-main);
  text-align: center;
  padding: 16px;
  opacity: 0;                    /* 显示/隐藏由 JS 控制 opacity,渐入渐出 */
  transition: opacity 0.25s ease;
  pointer-events: none;          /* 不挡点击(点视频开声音等穿透到下层) */
}
.sk-overlay--solid { background: var(--skarn-bg); }
.sk-overlay__text { color: var(--skarn-text-muted); font-size: 0.9rem; max-width: 80%; }

/* ---------------------------------------------------------------- 账号/通用小工具 */
.sk-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sk-mono { font-family: "JetBrains Mono", Consolas, monospace; }