/* ============================================================
 * 热影排行 —— 应用内视图（#hotView）
 * 侧栏保留，主舞台原地切换：body.is-hot 时接管 #chatArea
 * 推荐流：1 张「编辑精选」大卡（背景图/Logo/评分/简介）+ 自适应网格推荐卡
 * （海报 + 排名角标 + 评分角标 + 片名 + 年份·类型·片长 + 类型标签 + 剧情简介）
 * 卡片信息全部来自 cache/nfo 下已入库的 TMDB 数据（api/hot.php）
 * PC 端多列网格 → 平板/移动端单列铺满
 * 复用 vod.css 中的顶栏（.vod__top）/ 加载 / 空状态样式与主站 CSS 变量
 * 依赖：style.css 中的 CSS 变量与基础样式、vod.css 的公共视图组件
 * ========================================================== */

/* ---------- 视图切换（body.is-hot 由 hot.js 控制） ---------- */
body.is-hot #welcome,
body.is-hot #messages,
body.is-hot #typing,
body.is-hot #btnScrollBottom,
body.is-hot #composerDock,
body.is-hot .panel__top { display: none !important; } /* 顶栏仅在任务模式存在 */

body.is-hot .stage {
  overflow: hidden;          /* 视图内部自带滚动区 */
  padding: 0;
  scroll-behavior: auto;
}

#hotView { display: none; }

body.is-hot #hotView {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  position: relative;
  animation: vod-in .32s cubic-bezier(.2, .8, .2, 1) both; /* 复用 vod.css 入场动画 */
}

/* ---------- 可滚动内容区 ---------- */
.hot__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 0 24px 40px;
}
.hot__scroll::-webkit-scrollbar { width: 6px; }
.hot__scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }

/* ---------- 推荐流：自适应网格（PC 多列 → 移动端单列） ---------- */
.hot__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
  padding-top: 18px;
}

/* ---------- 推荐卡：横版封面 + 排名/评分角标 + 片名 + 资料 + 简介 + 类型 ---------- */
.hot-card {
  position: relative;
  aspect-ratio: 16 / 9;            /* 横版卡片：宽高固定，网格行对齐 */
  border: none;                    /* 无边框线 */
  border-radius: 5px;              /* 卡片圆角 5px */
  overflow: hidden;                /* 裁切封面与底部遮罩 */
  background: var(--chip-bg);
  box-shadow: 0 8px 18px -10px rgba(20, 20, 30, .28), 0 2px 5px rgba(20, 20, 30, .06);
  animation: card-in .45s cubic-bezier(.2, .8, .2, 1) both; /* 复用 vod.css 卡片入场 */
  animation-delay: var(--d, 0s);
}

/* 整卡封面（nfo 的横版 backdrop / still 优先，回落竖版海报），绝对定位铺满卡片 */
.hot-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.hot-card:hover .hot-card__img { transform: scale(1.05); }
/* 竖版海报兜底：取画面中部以上，避免把标题区裁在中间 */
.hot-card__img.is-poster { object-position: center 22%; }

/* 排名角标：前三名品牌紫递减 */
.hot-card__rank {
  position: absolute; top: 8px; left: 8px;
  min-width: 22px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; font-style: italic;
  color: #fff; background: rgba(0, 0, 0, .45);
  border-radius: 4px;
}
.hot-card__rank.is-top1 { background: var(--brand); }
.hot-card__rank.is-top2 { background: var(--brand); opacity: .78; }
.hot-card__rank.is-top3 { background: var(--brand); opacity: .56; }

/* 评分角标（封面底部渐变条） */
.hot-card__score,
.hot-badge--score {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hot-card__score {
  position: absolute; top: 8px; right: 8px;
  height: 20px; padding: 0 7px;
  color: #fff; background: rgba(0, 0, 0, .45);
  border-radius: 4px;
}
.hot-card__score.is-none { font-weight: 600; opacity: .85; }
.hot-card__score svg, .hot-badge--score svg { width: 11px; height: 11px; flex: none; }

/* 无图占位：深色渐变，保证白色文字可读（卡片整宽） */
.hot-card__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #3a3550, #241f33);
}
.hot-card__ph span {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600;
  color: rgba(255, 255, 255, .5);
}

/* 底部文字区：压在图片底部，浮于遮罩之上 */
.hot-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 11px 11px;
}
.hot-card__name {
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1.35;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hot-card__meta {
  margin: 0;
  font-size: 11.5px; color: rgba(255, 255, 255, .85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.hot-card__desc {
  margin: 0;
  font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.hot-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hot-tag {
  font-size: 10px; font-weight: 600; line-height: 1.6;
  padding: 1px 6px; border-radius: var(--r-pill);
  color: #fff; background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 底部渐隐遮罩：衬托压底文字 */
.hot-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, .5) 74%,
    rgba(0, 0, 0, .85) 100%);
}

/* ---------- 精选大卡已移除：榜单统一网格排列，见上方 .hot-card 推荐卡 ---------- */

/* ---------- 加载骨架屏：与卡片一致（整卡 + 底部遮罩） ---------- */
.hot-skel {
  position: relative;
  aspect-ratio: 16 / 9;
  border: none; border-radius: 5px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 18px -10px rgba(20, 20, 30, .12), 0 2px 5px rgba(20, 20, 30, .04);
}
.hot-skel__pic { position: absolute; inset: 0; }
.hot-skel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .5) 100%);
}
.hot-skel__rank { position: absolute; top: 8px; left: 8px; width: 22px; height: 14px; border-radius: 4px; }
.hot-skel__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 6px; }
.hot-skel__name { width: 66%; height: 13px; border-radius: 4px; }
.hot-skel__meta { width: 42%; height: 10px; border-radius: 4px; }

/* ============================================================
 * 移动端：单列铺满、卡片收紧
 * ========================================================== */
@media (max-width: 900px) {
  .hot__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hot__scroll { padding: 0 12px 28px; }
  .hot__list { padding-top: 14px; gap: 11px; }

  .hot-card__name { font-size: 12.5px; }
  .hot-card__meta { font-size: 11px; }
  .hot-card__desc { font-size: 11px; -webkit-line-clamp: 2; }

  .hot-skel__info { padding: 8px 10px 10px; gap: 5px; }
}

/* ============================================================
 * 影视详情全屏无边框弹窗（iframe 加载 php/detail.php）
 * ========================================================== */
/* 卡片可点击：提示用户点开详情（悬停微抬 + 阴影加深 + 箭头右移） */
.hot-card {
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease;
}
.hot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(20, 20, 30, .3), 0 3px 8px rgba(20, 20, 30, .08);
}
.hot-card:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hot-card { animation: none; transition: none; }
  .hot-card:hover { transform: none; }
}

.detail-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: #0e0e10;
  display: flex; flex-direction: column;
}
.detail-modal[hidden] { display: none; }
.detail-modal__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: #0e0e10;
}
/* 关闭按钮由详情页自身渲染（顶部条左侧，位于“剧情”按钮左边），此处不再需要外层 × */

/* ---------- 详情页加载骨架屏：iframe 首帧绘制前占位，load 后淡出 ---------- */
.detail-skel {
  position: absolute; inset: 0; z-index: 2;
  background: #0d1117;
  overflow: hidden;
  transition: opacity .22s ease;
}
.detail-skel[hidden] { display: none; }
.detail-skel.is-out { opacity: 0; pointer-events: none; }
/* 详情为深色主题：覆盖全局 .sk 的浅色微光 */
.detail-skel .sk {
  background: linear-gradient(110deg, #191f27 42%, #272e39 50%, #191f27 58%);
  background-size: 220% 100%;
}

/* 加载期间的关闭按钮（样式对齐详情页顶部毛玻璃按钮，骨架淡出后随之隐藏） */
.detail-skel__close {
  position: absolute; top: 5px; left: 5px; z-index: 3;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 5px; cursor: pointer; color: #fff;
  background: rgb(255 255 255 / 25%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .15s;
}
.detail-skel__close:hover { background: rgba(0, 0, 0, .85); }

/* 头图 + 顶部导航占位 */
.detail-skel__hero {
  position: relative; height: 38vh; min-height: 260px;
  background: #151a21;
}
.detail-skel__hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0) 0%, rgba(13, 17, 23, .55) 60%, #0d1117 100%);
}
.detail-skel__topbar {
  position: absolute; top: 5px; left: 44px; right: 12px; z-index: 1;
  display: flex; align-items: center; gap: 8px; overflow: hidden;
}
.detail-skel__back { width: 34px; height: 34px; border-radius: 5px; flex: none; opacity: .4; }
.detail-skel__pill { height: 26px; border-radius: 5px; flex: none; }

/* 正文：海报 + 标题 / 资料芯片 / 简介 */
.detail-skel__body {
  position: relative; max-width: 1000px; margin: -80px auto 0;
  padding: 0 28px 40px;
}
.detail-skel__top { display: flex; align-items: flex-start; gap: 24px; }
.detail-skel__poster { width: 180px; aspect-ratio: 2 / 3; border-radius: 10px; flex: none; }
.detail-skel__info { flex: 1; min-width: 0; padding-top: 4px; }
.detail-skel__title { display: block; width: 58%; height: 26px; border-radius: 6px; }
.detail-skel__orig  { display: block; width: 38%; height: 14px; border-radius: 4px; margin-top: 10px; }
.detail-skel__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.detail-skel__chip  { height: 22px; border-radius: 6px; }
.detail-skel__line  { display: block; height: 12px; border-radius: 4px; margin-bottom: 9px; }

/* 演员横滑栏 + 图库栅格 */
.detail-skel__sec { margin-top: 26px; }
.detail-skel__sec-title { display: block; width: 96px; height: 16px; border-radius: 4px; }
.detail-skel__cast { display: flex; gap: 12px; margin-top: 14px; overflow: hidden; }
.detail-skel__person { width: 80px; flex: none; }
.detail-skel__avatar { display: block; width: 70px; height: 70px; border-radius: 6px; margin: 0 auto; }
.detail-skel__pname  { display: block; width: 82%; height: 11px; border-radius: 4px; margin: 6px auto 0; }
.detail-skel__prole  { display: block; width: 54%; height: 10px; border-radius: 4px; margin: 4px auto 0; }
.detail-skel__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 14px; }
.detail-skel__cell { display: block; aspect-ratio: 16 / 9; border-radius: 2px; }

@media (max-width: 640px) {
  .detail-skel__body { padding: 0 12px 28px; }
  .detail-skel__top { gap: 14px; }
  .detail-skel__poster { width: 110px; }
  .detail-skel__title { width: 76%; height: 22px; }
  .detail-skel__person { width: 70px; }
  .detail-skel__avatar { width: 60px; height: 60px; }
  .detail-skel__grid { grid-template-columns: repeat(2, 1fr); }
}