/* category-detail.css — Category detail screen: radio-item list, back button, listener badge */


/* ============================================================
   分类详情页（iHeartRadio 风格）
   ────────────────────────────────────────────────────────────
   - 取代旧的 popup-glass 居中弹窗
   - 纯 translateX 平移动画，GPU 合成一帧搞定，比 scale+opacity 弹窗轻
   - 用 contain 把列表项重绘隔离在该视图内，外部固定元素零开销
   - 显示在 tab-view (z:10) 上方，但低于 popup (1002) 与沉浸式播放器
   - 不需要遮罩，省一个图层
   ============================================================ */
.category-detail-view {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--main-bg);
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  /* [Perf v4] 移除永久 will-change: transform;
     该视图只在 openGroup/closeCategoryDetail 时短暂动画,
     translate3d 已经触发合成器, will-change 反而长期占用 GPU 内存. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint style;
  /* 关闭态：visibility 延迟到动画结束再隐藏，保留滑出过程 */
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.24, 1),
              visibility 0s linear 0.26s;
}
.category-detail-view.show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  /* 打开态：立即可见，再开始 transform */
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.24, 1),
              visibility 0s linear 0s;
}
/* 动画进行中按需提升合成层, 由 JS 加 .is-animating, 完成后立刻移除 */
.category-detail-view.is-animating { will-change: transform; }

/* [Perf v7] category-detail-view 性能分档 */
body.perf-lite .category-detail-view {
  transition: transform 0.20s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.20s;
}
body.perf-lite .category-detail-view.show {
  transition: transform 0.20s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s;
}
body.perf-min .category-detail-view {
  transition: transform 0.14s linear, visibility 0s linear 0.14s;
}
body.perf-min .category-detail-view.show {
  transition: transform 0.14s linear, visibility 0s linear 0s;
}

.category-detail-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 4px;
  /* 与下方 .category-detail-list 同样使用 var(--edge-pad), header 与 list 左右对齐 */
  padding: 6px var(--edge-pad) 6px var(--edge-pad);
  padding-top: calc(var(--safe-top, 0px) + 6px);
  flex-shrink: 0;
  background: var(--main-bg);
  position: relative;
  z-index: 2;
}

.category-detail-back {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0;
  /* [v5] 补偿热区视觉内缩：按钮 44×44 热区内的 SVG 只有 28×28，
     居中后图标视觉左缘距离按钮左缘 (44-28)/2 = 8px。
     在 padding 已经是 var(--edge-pad)=12px 的前提下，
     图标视觉位置实际上是 12+8=20px，与下方电台 logo 的 12px 左缘不对齐。
     用 margin-left: -8px 把按钮整体向左探出 8px，让 SVG 图标视觉左缘精确落在 12px 处。 */
  margin: 0 0 0 -8px;
  color: var(--text-dark);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.category-detail-back:active {
  background: rgba(0,0,0,0.08);
  transform: scale(0.92);
}
@media (prefers-color-scheme: dark) {
  .category-detail-back:active { background: rgba(255,255,255,0.1); }
}
.category-detail-back svg {
  width: 28px; height: 28px;
  display: block;
}

.category-detail-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.category-detail-spacer {
  width: 44px;
  height: 44px;
}

.category-detail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px var(--edge-pad);
  /* 留出固定播放器 + 底部导航栏 + iOS 安全区的高度 */
  padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.radio-item, .search-result-item {
  /* ★ [Refactor] 与 .favorites-grid .fav-card 用同一套尺寸/间距变量,保证视觉完全一致
       (favorites-grid 里也定义了同名 CSS 变量,这里给一份默认值兜底,
        防止 .radio-item 出现在 favorites-grid 之外时丢失尺寸) */
  --fav-logo-size: clamp(62px, 17vw, 74px);  /* 与首页 .station-card 的 width:17vw / min 62px / max 74px 完全对齐 */
  --fav-row-gap: 12px;
  --fav-row-pad-y: 8px;
  --fav-star-size: 20px;

  display: flex;
  align-items: center;
  gap: var(--fav-row-gap);
  padding: var(--fav-row-pad-y) 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text-dark);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}
/* 当前播放电台:用与收藏页 .fav-card.now-playing 一致的"红色文字"高亮,
   不再加卡片底色,保持极简的列表风格 */
.radio-item.selected, .search-result-item.selected {
  background: transparent;
}

/* 台标外框:复用 .station-card-img-wrap 的玻璃质感,只覆盖尺寸 */
.radio-item-img-wrap {
  flex-shrink: 0;
  width: var(--fav-logo-size);
  height: var(--fav-logo-size);
  aspect-ratio: unset;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-item-img-wrap .station-card-img-loading {
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  .radio-item-img-wrap .station-card-img-loading {
    background: rgba(255,255,255,0.04);
  }
}

/* 右侧信息区:垂直居中,三行(电台名 + 当前 + 下一)总高 ≈ 52px,
   与左侧 logo 上下边缘对齐 */
.radio-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.radio-item-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}
/* 播放中:电台名也变红,与节目当前行(.fav-card-prog-now)颜色统一 */
.radio-item.selected .radio-item-name {
  color: #ff3b30;
}
.radio-item.selected .fav-card-prog-now .fav-card-prog-time,
.radio-item.selected .fav-card-prog-now .fav-card-prog-title {
  color: #ff3b30;
  opacity: 1;
}

/* EPG 过期提示(无当前/下一节目时降级显示) */
.radio-item-epg-stale {
  font-size: 12px;
  line-height: 1.35;
  color: #ff9500;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧动作区:收藏星 + 多源切换按钮 */
.radio-item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.radio-item-fav-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #ffcc00;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.radio-item-fav-btn:hover { transform: scale(1.1); }
.radio-item-fav-btn:active { transform: scale(0.85); opacity: 0.7; }
.radio-item-fav-btn svg {
  width: var(--fav-star-size);
  height: var(--fav-star-size);
  display: block;
}

.radio-action-btn {
  width: 34px; height: 34px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dark);
  transition: transform 0.15s ease;
}
.radio-action-btn:hover { transform: scale(1.06); color: var(--primary); }

.listener-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 4px; border-radius: 4px; background: transparent;
  font-size: 11px; font-weight: 600; color: var(--text-dark); opacity: 0.6;
}
@media (prefers-color-scheme: dark) { .listener-badge { color: var(--text-light); } }
.listener-badge svg { width: 11px; height: 11px; }

.submit-label {
  display: block; font-size: 12px; color: var(--text-dark);
  opacity: 0.6; margin: 8px 0 4px 4px; text-align: left;
}
.input-base {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  font-size: 0.9rem; color: inherit; outline: none;
  border-radius: 0.75rem; height: 2.5rem;
  text-align: center; text-align-last: center;
}
.input-left { text-align: left !important; text-align-last: left !important; padding: 0 10px; }