/* yt-chrome.css — YouTube 浅色版 chrome 覆盖层(侧栏 / 顶栏搜索 / 筛选 chips)
 * 作用域:body.page-browse 全家族页(含 page-search/tags/categories/trending/models/history/channel...)
 *        + body.page-home 的 chip rail(sort-filter.js)。
 * 加载位置:必须是最后一个 <link>(在 cb-public.css 之后),否则打不赢既有 !important。
 * 规则:只写主题变量(--bg/--card/--panel-soft/--text-primary/--text-secondary/--brd/--pri/
 *        --accent/--accent-hover/--chip-hover/--card-hover/--shadow-md),不硬编码色值。
 * !important 仅用于对抗 cb-browse.css / cb-yt.css 里已有的 !important,其余靠后载入+同特异性取胜。
 */

/* ═══════════════════════════════════════════════════════════
   1. 侧栏 yt-mini-guide — FA 图标 + pill 行 + 分组小节标题
   对标 YT guide: 40px 行高 / 10px 圆角 / 24px 图标槽 / hover 灰 pill
   ═══════════════════════════════════════════════════════════ */
body.page-browse .yt-mini-guide .yt-guide-item {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 40px;
  width: 204px;
  max-width: 204px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: background-color .15s ease;
}

body.page-browse .yt-mini-guide .yt-guide-item > i {
  flex: 0 0 24px;
  width: 24px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: var(--text-primary);
  transition: color .15s ease;
}
body.page-browse .yt-mini-guide .yt-guide-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-browse .yt-mini-guide .yt-guide-item:hover {
  background: var(--panel-soft);
}

/* active:灰 pill + 加粗 + 品牌色图标 */
body.page-browse .yt-mini-guide .yt-guide-item.is-on {
  background: var(--panel-soft);
  font-weight: 500;
}
body.page-browse .yt-mini-guide .yt-guide-item.is-on > i {
  color: var(--pri);
}

/* 小节标题(你 / 探索)— 12px 次级色,对齐 YT「探索」分组头 */
body.page-browse .yt-mini-guide .yt-guide-heading {
  padding: 12px 12px 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .3px;
  color: var(--text-secondary);
}
body.page-browse .yt-mini-guide .yt-guide-heading .yt-guide-chevron {
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: var(--text-secondary);
}

/* 分组分隔线 */
body.page-browse .yt-mini-guide .g-gap {
  background: var(--brd);
}

/* 未登录 promo 文案 */
body.page-browse .yt-guide-promo {
  color: var(--text-primary);
}

/* 抽屉模式(窄屏 guide-open)用变量重涂 */
@media (max-width: 1100px) {
  body.page-browse.guide-open .yt-mini-guide {
    background: var(--card);
    box-shadow: var(--shadow-md);
  }
}

/* ═══════════════════════════════════════════════════════════
   2. 顶栏搜索 — YT 胶囊:输入左半 + 搜索按钮右半各自成弧
   !important 对抗 cb-browse.css 的表单级边框/裁剪
   ═══════════════════════════════════════════════════════════ */
body.page-browse header .header-search {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  /* overflow 可见:左/右两半各自带边框,且 .ac-dropdown 不再被裁剪 */
  overflow: visible !important;
}

body.page-browse header .header-search input {
  background: var(--card) !important;
  border: 1px solid var(--brd) !important;
  border-right: 0 !important;
  border-radius: 999px 0 0 999px !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  padding: 0 4px 0 16px !important;
}
/* 有清除按钮时右侧留位(cb-public 原规则会被上面 !important 压掉,这里补回) */
body.page-browse header .header-search input.has-clear {
  padding: 0 48px 0 16px !important;
}

/* 聚焦:品牌色边框,不加内阴影 */
body.page-browse header .header-search input:focus,
body.page-browse header .header-search input:focus-visible {
  border-color: var(--pri) !important;
  box-shadow: none !important;
  outline: none !important;
}

body.page-browse header .header-search button[type="submit"] {
  background: var(--panel-soft) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 0 999px 999px 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
body.page-browse header .header-search button[type="submit"]:hover {
  background: var(--chip-hover) !important;
}
body.page-browse header .header-search button[type="submit"] > i {
  font-size: 18px;
  line-height: 1;
  color: var(--text-primary);
}

/* 清除按钮(输入框内 ×) */
body.page-browse .yt-search-clear > i {
  font-size: 16px;
  line-height: 1;
  color: var(--text-primary);
}
body.page-browse .yt-search-clear:hover {
  background: var(--panel-soft);
}

/* 桌面端放开 header 裁剪,让 .ac-dropdown 下拉完整显示(仅 ≤700px 保留裁剪) */
@media (min-width: 701px) {
  body.page-browse header {
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════
   3. 顶栏登录 / 注册按钮 — 品牌色描边胶囊,hover .15s 过渡
   ═══════════════════════════════════════════════════════════ */
body.page-browse .nav-btn,
body.page-browse .nav-btn.primary,
body.page-browse .yt-guide-promo .nav-btn {
  border-radius: 18px;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--accent);
  transition: background-color .15s ease, border-color .15s ease;
}
body.page-browse .nav-btn:hover,
body.page-browse .nav-btn.primary:hover,
body.page-browse .yt-guide-promo .nav-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-hover);
}
body.page-browse .nav-btn svg {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   4. 筛选 chips — browse 家族页(趋势 .cb-chip / 历史 .cb-hist-type / 搜索 .qf-chip)
   全部统一 999px 胶囊:底 var(--panel-soft)、字 var(--text-primary)、
   active 反白(底 var(--text-primary)、字 var(--bg),浅色主题下即白字保证对比)
   ═══════════════════════════════════════════════════════════ */
body.page-browse .cb-chip,
body.page-browse .cb-hist-type,
body.page-search .qf-chip {
  height: auto;
  min-height: 32px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-primary);
  line-height: 20px;
}
body.page-browse .cb-chip:hover,
body.page-browse .cb-hist-type:hover,
body.page-search .qf-chip:hover {
  background: var(--chip-hover);
}
body.page-browse .cb-chip.is-on,
body.page-browse .cb-hist-type.is-on,
body.page-search .qf-chip.active {
  background: var(--text-primary);
  color: var(--bg);
}

/* 横向滚动 + 隐藏滚动条 */
body.page-browse .cb-chip-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.page-browse .cb-chip-row::-webkit-scrollbar {
  display: none;
  height: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. 首页 chip rail(sort-filter.js 渲染的 #sortFilterBar .sf-pill)
   cb-yt.css 用 !important 写死了 8px 圆角 + 硬编码色,这里
   同特异性 + 后加载 + !important 反杀成胶囊 + 变量化。
   ═══════════════════════════════════════════════════════════ */
body.page-home #sortFilterBar .sf-pill,
body.page-home .sort-filter-bar .sf-pill,
body.page-home #sfDurationPills .sf-pill {
  height: auto !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: var(--panel-soft) !important;
  color: var(--text-primary) !important;
  line-height: 20px !important;
  transition: background-color .15s ease !important;
}
body.page-home #sortFilterBar .sf-pill:hover,
body.page-home .sort-filter-bar .sf-pill:hover,
body.page-home #sfDurationPills .sf-pill:hover {
  background: var(--chip-hover) !important;
}
body.page-home #sortFilterBar .sf-pill.active,
body.page-home .sort-filter-bar .sf-pill.active,
body.page-home #sfDurationPills .sf-pill.active,
body.page-home #sortFilterBar .sf-pill[aria-pressed="true"] {
  background: var(--text-primary) !important;
  /* 反白 chip:前景取页面底色 var(--bg),浅色主题下即白字,保证对比度 */
  color: var(--bg) !important;
}
body.page-home #sortFilterBar .sf-pill.active:hover,
body.page-home .sort-filter-bar .sf-pill.active:hover,
body.page-home #sfDurationPills .sf-pill.active:hover {
  background: var(--text-primary) !important;
  color: var(--bg) !important;
}

/* ---------- 6. 首页内容优先(YouTube 对标): 砍营销 hero/双栏文案 ---------- */
/* hero-section 的今日热搜功能已由顶部 #trendingTagsBar(legacy/bootstrap)承载,不丢失 */
body.page-home .hero-section { display: none !important; }
body.page-home .intro-section { display: none !important; }
/* biz 联系段仅登录页/底部场景保留,首页也隐藏(footer 已有联系方式入口) */
body.page-home .biz-section { display: none !important; }

/* ---------- 7. Shorts 页(YouTube 竖屏全屏流) ---------- */
@keyframes shortsIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Shorts 页隐藏常规页滚动 */

/* ---------- 8. Shorts 页: 强制 mini 侧栏 + 清爽主体 ---------- */
/* mini guide: 侧栏收窄为图标栏 */
/* 主内容区让位 */


/* ---------- 9. YouTube 细节对齐: Chips 激活态黑底白字 ---------- */
.qf-chip.active,
.cb-chip.active,
.sf-pill.active,
.trending-tag-chip.active {
  background: #0f0f0f !important;
  color: #ffffff !important;
  border-color: #0f0f0f !important;
  font-weight: 500;
}
/* Chips 字号紧凑 + 胶囊 */
.qf-chip, .cb-chip, .sf-pill {
  font-size: 13px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-weight: 400;
  border: none !important;
  background: var(--panel-soft, #f2f2f2) !important;
  color: var(--text-primary, #0f0f0f) !important;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.qf-chip:hover, .cb-chip:hover, .sf-pill:hover {
  background: var(--brd, #e5e5e5) !important;
}
/* chips 容器横滚不换行 */
.qf-chip-bar, .sf-bar, [class*="chip-bar"], [class*="chip-rail"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  scrollbar-width: none;
  -webkit-scrollbar-display: none;
}
.qf-chip-bar::-webkit-scrollbar, .sf-bar::-webkit-scrollbar {
  display: none;
}

/* ---------- 10. Shorts 页: 正确的侧栏选择器 + 全屏体验 ---------- */
/* BrowseChrome 的侧栏是 #cbBrowseGuide.yt-mini-guide,不是 .cat-side-nav */
/* Shorts 主内容区约束宽度 */