/* 界面优化 · 电脑端（playerclub-pc-gadget-ui）
 *
 * 每个功能的样式都挂在 body:has(.pcui-flags[属性]) 下面：后端只给打开的功能写上属性，
 * 关掉的功能这里一行都不生效。标记由服务端拼进页面，本文件在 <head> 里，所以第一帧就是调整后的样子。
 */

/* ================= 页尾贴住浏览器底部 =================
 * 程序的电脑端页面：页头固定在顶上（body 留了页头高度的上内边距），内容区之后是页尾 .ls-footer，
 * 页面不够一屏时页尾跟着内容往上跑，下面空出一截。
 * 做法：body 至少一屏高；页尾 sticky + top:100vh —— 它想待在窗口下沿之外，但出不了 body，
 * 于是被挡在 body 的底边，也就是窗口底部。内容比一屏高时，页尾本来就在 body 底边，位置不变。
 * 不改页尾的结构和高度，也不用脚本；内容是后来加载的（帖子列表、无痕加载换页）也随时对。
 */
body:has(.pcui-flags[data-footer-bottom]) {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(.pcui-flags[data-footer-bottom]) > .ls-footer {
  position: sticky;
  top: 100vh;
  top: 100dvh;
}

/* ================= 帖子页面包屑导航 =================
 * 长文、动态、投票、语音详情页标题卡片上面那一张窄卡片。外观跟详情页的卡片一套：白底、细边、站点圆角；
 * 它排在详情页主栏里，主栏本来就是 16px 间距的竖排，所以不用自己留外边距。
 * 节点只有开关打开、帖子发在论坛里时才会出现，所以不用挂在 .pcui-flags 下面。
 */
.pcui-crumb {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 11px 20px;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: var(--ls-border-radius, 12px);
  background: var(--ls-card-bg, #fff);
  color: var(--ls-text-muted, #9ca3af);
  font-size: 13px;
  line-height: 22px;
}
.pcui-crumb-list {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcui-crumb-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  max-width: 260px;
}
/* 分隔：细箭头，跟着书写方向转 */
.pcui-crumb-item + .pcui-crumb-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 9px;
  border-top: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  opacity: .55;
  transform: rotate(45deg);
}
[dir="rtl"] .pcui-crumb-item + .pcui-crumb-item::before { transform: rotate(-45deg); }
.pcui-crumb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: -2px -7px;
  padding: 2px 7px;
  border-radius: 7px;
  color: var(--ls-text-secondary, #4b5563);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.pcui-crumb-link:hover {
  background: rgba(var(--ls-primary-rgb, 26, 115, 232), .08);
  color: var(--ls-primary, #1a73e8);
}
.pcui-crumb-link .remix-icon { font-size: 15px; line-height: 1; }
.pcui-crumb-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 当前这一帖：占满剩下的宽度，太长就省略 */
.pcui-crumb-current {
  flex: 1 1 auto;
  max-width: none;
  color: var(--ls-text-muted, #9ca3af);
}
[data-theme="dark"] .pcui-crumb { border-color: rgba(255, 255, 255, .06); }

/* ================= 发帖页面包屑导航 =================
 * 发布页根节点（.ls-publish-page，长文是 .ls-pa-page）的第一个孩子，宽度与发布卡片一样；
 * 边框、圆角跟着各发布页的卡片走。后台开了「标签左侧栏」时根节点是两栏网格，面包屑横跨两栏。
 * 卡片样式本身沿用上面的 .pcui-crumb。
 */
.ls-publish-page > .pcui-crumb-publish {
  margin-bottom: 16px;
  border-color: var(--ls-border, rgba(0, 0, 0, .06));
  border-radius: 16px;
}
.ls-publish-vote-page > .pcui-crumb-publish { border-radius: 8px; }
/* 长文页根节点没有上边距、卡片自带 20px 上边距：这里留出顶上 20px，再抵掉 4px，与卡片之间同样是 16px */
.ls-pa-page > .pcui-crumb-publish {
  margin: 20px 0 -4px;
  border-color: var(--ls-border, rgba(0, 0, 0, .06));
  border-radius: 10px;
}
.ls-tag-side-on > .pcui-crumb-publish { grid-column: 1 / -1; }
/* 论坛地址还没取到时只写名字：样子与链接一样，只是不能点 */
span.pcui-crumb-link { cursor: default; }
span.pcui-crumb-link:hover { background: none; color: var(--ls-text-secondary, #4b5563); }

/* ================= 顶部菜单悬停底色跟随主色 =================
 * 程序页头里，鼠标指上去的底色都是浅灰 var(--ls-bg-hover)（#f1f5f9）。
 * 打开后换成程序自己的浅主色 var(--ls-primary-light)：程序按后台「电脑端主颜色」算出来（主色 10% 透明度），
 * 「更多功能」这类导航下拉菜单项（.ls-hd-dropdown-item）悬停用的就是它，所以两边一模一样，换了主色跟着变。
 * 只换底色：文字颜色照程序的悬停色；选中的导航项本来就是浅主色底 + 主色字，悬停时不变。
 * 只在页头 .ls-header 里，逐条写悬停规则（不去改 --ls-bg-hover 变量本身，免得通知小标签、经验条底槽这类非悬停的地方也变色）。
 * 照程序原样的：未读消息（自带一道渐变）、通知分类里选中的那一个、退出登录（红）、已开通会员时金色的会员入口。
 */
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-nav-item > a:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-hd-dropdown-card:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-icon-btn:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-message-item:not(.unread):hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-tab:not(.active):hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-notify-list .lsnc-item:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-create-item:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-user-trigger:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-stat-box:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-asset-box:hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-vip-entry:not(.is-vip):hover,
body:has(.pcui-flags[data-header-hover-tint]) .ls-header .ls-menu-item:not(.logout):hover {
  background: var(--ls-primary-light, rgba(var(--ls-primary-rgb, 59, 130, 246), .1));
}