/* ============================================================
 * 热影排行 —— 应用内视图（#hotView）
 * 侧栏保留，主舞台原地切换：body.is-hot 时接管 #chatArea
 * 左右两栏排行（剧集 / 电影），各 10 张小卡片：序号 + 封面 + 名称 + 评分
 * 复用 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; }

/* ---------- 左右两栏：剧集排行 / 电影排行 ---------- */
.hot__cols {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左剧集、右电影 */
  gap: 22px;
  padding-top: 18px;
}

.hot__col-title {
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-soft);
}
.hot__col-title i {
  font-style: normal;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 12px; font-weight: 700;
}

/* ---------- 排行小卡片列表 ---------- */
.hot__list {
  display: flex; flex-direction: column; gap: 9px;
}

.hot-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 8px;
  background: var(--surface);
  border: none;
  border-radius: 5px;
  /* 常驻悬浮阴影 */
  box-shadow: 0 10px 22px -8px rgba(20, 20, 30, .22), 0 2px 6px rgba(20, 20, 30, .08);
  animation: card-in .45s cubic-bezier(.2, .8, .2, 1) both; /* 复用 vod.css 卡片入场 */
  animation-delay: var(--d, 0s);
}

/* 毛玻璃卡片：以自身海报放大模糊打底，上覆白色半透明层 */
.hot-card.has-bg {
  overflow: hidden;             /* 裁切模糊溢出的背景 */
}
.hot-card.has-bg::before {
  content: '';
  position: absolute; inset: -14px;
  background: #e9e7f2 var(--cardbg, none) center / cover no-repeat;
  filter: blur(16px) brightness(1.1) saturate(1.25);
  transform: scale(1.1);
}
.hot-card.has-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .66);
}
/* 内容抬到毛玻璃层之上 */
.hot-card.has-bg > * { position: relative; z-index: 1; }

/* 排行序号：前三名品牌紫加重 */
.hot-card__rank {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; font-style: italic;
  color: var(--text-mute);
}
.hot-card:nth-child(1) .hot-card__rank { color: var(--brand); }
.hot-card:nth-child(2) .hot-card__rank { color: var(--brand); opacity: .72; }
.hot-card:nth-child(3) .hot-card__rank { color: var(--brand); opacity: .5; }

/* 封面缩略 */
.hot-card__pic {
  flex-shrink: 0;
  width: 40px; height: 56px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--chip-bg);
  box-shadow: 0 4px 10px -3px rgba(20, 20, 30, .22);
}
.hot-card__pic img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* 无海报占位：首字 + 品牌渐变纹理（与影迷广场同款） */
.hot-card__ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(122, 90, 245, .28), transparent 55%),
    radial-gradient(110% 90% at 90% 100%, rgba(58, 108, 231, .22), transparent 50%),
    linear-gradient(160deg, #efeef6, #e6e4f2);
}
.hot-card__ph span {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: rgba(122, 90, 245, .55);
}

/* 名称 + 评分 */
.hot-card__meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.hot-card__name {
  margin: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 超长名称最多两行，超出省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hot-card__rate {
  align-self: flex-start;
  font-size: 11px; font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-soft);
  padding: 1px 7px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.hot-card__rate.is-none {
  color: var(--text-mute);
  background: var(--chip-bg);
  font-weight: 600;
}

/* ---------- 加载骨架屏：排行小卡片占位（数据可显示后才被真实卡片替换） ---------- */
.hot-skel {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 8px;
  border-radius: 5px;
  background: var(--surface);
  box-shadow: 0 10px 22px -8px rgba(20, 20, 30, .10), 0 2px 6px rgba(20, 20, 30, .04);
}
.hot-skel__rank { width: 20px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.hot-skel__pic { width: 40px; height: 56px; border-radius: 5px; flex-shrink: 0; }
.hot-skel__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.hot-skel__name { width: 82%; height: 11px; border-radius: 4px; }
.hot-skel__rate { width: 36px; height: 10px; border-radius: 99px; }

/* ============================================================
 * 移动端：保持左右两栏（左剧集、右电影）
 * ========================================================== */
@media (max-width: 640px) {
  .hot__scroll { padding: 0 12px 28px; }
  .hot__cols { padding-top: 14px; gap: 12px; }
  .hot__col-title { font-size: 13px; gap: 6px; margin-bottom: 10px; }
  .hot__col-title i { width: 19px; height: 19px; font-size: 11px; }
  .hot__list { gap: 7px; }
  .hot-card { padding: 5px 6px 5px 5px; gap: 6px; }
  .hot-card__rank { width: 15px; font-size: 12px; }
  .hot-card__pic { width: 32px; height: 45px; }
  .hot-card__name { font-size: 11px; }
  .hot-card__rate { font-size: 10px; padding: 1px 5px; }

  /* 骨架屏随卡片同步缩小 */
  .hot-skel { padding: 5px 6px 5px 5px; gap: 6px; }
  .hot-skel__rank { width: 15px; height: 11px; }
  .hot-skel__pic { width: 32px; height: 45px; }
  .hot-skel__meta { gap: 6px; }
  .hot-skel__name { width: 78%; height: 9px; }
  .hot-skel__rate { width: 30px; height: 8px; }
}