/* ============================================================
   右侧悬浮工具栏（主题 footer.php 输出的 .jinsom-right-bar，按钮来自后台「右侧工具栏」设置；插件追加的按钮也在里面）
   - 只改外观：模板、按钮、点击行为都不动（主题 JS 用 .totop / .tobottom / .jinsom-right-bar-im .number 等）
   - 一张浮动卡片：12px 圆角，日间阴影勾边 + 柔和投影，夜间 1px 细描边 + 投影（浮起来的东西保留投影，基线 2.5）
   - 40px 图标按钮、22px 线条图标（阅读舒适优先，基线总原则 7），悬停下沉底；图标按按钮类型换成线条图标（mask，颜色跟文字），不认识的按钮保留后台填的图标
   - 悬停提示同页面浮层（日间浅色、夜间深色，13px），淡入并向按钮移 6px；「领金币」平时隐藏，悬停任务按钮时代替「任务」提示浮现
   规范：_优化补丁/前端设计基线.md 6.17（步骤54）；设计稿 _优化补丁/右侧工具栏设计稿.html
   ============================================================ */

/* ---- 卡片 ---- */
html .jinsom-right-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid var(--qh-s-edge);
  border-radius: var(--qh-r-card);
  background: var(--qh-s-card);
  box-shadow: var(--qh-s-shadow), 0 8px 24px -10px rgba(0, 0, 0, .22);
}
.theme-light .jinsom-right-bar { border-width: 0; }
.theme-dark .jinsom-right-bar { box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .6); }

/* ---- 按钮：40×40，7px 圆角（和卡片圆角同心：12 − 5） ---- */
html .jinsom-right-bar > li {
  position: relative;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 7px;
  background: none;
  box-shadow: none;
  color: var(--qh-s-text2);
  font-size: 0;
  line-height: 40px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
html .jinsom-right-bar > li:hover { background: var(--qh-s-sunken); color: var(--qh-s-text); }
html .jinsom-right-bar > li:active { background: var(--qh-s-hover); }
/* 后台填的字体图标（不认识的按钮用它） */
html .jinsom-right-bar > li > i,
html .jinsom-right-bar > li > iconpark-icon { margin: 0; color: inherit; font-size: 21px; line-height: 40px; vertical-align: top; }

/* ---- 线条图标：认识的按钮把字体图标藏起来，用伪元素画（mask，颜色跟文字）；不认识的按钮保留后台填的图标 ---- */
html .jinsom-right-bar > li.totop > i,
html .jinsom-right-bar > li.tobottom > i,
html .jinsom-right-bar > li.task > i,
html .jinsom-right-bar > li.now > i,
html .jinsom-right-bar > li.jinsom-right-bar-im > i,
html .jinsom-right-bar > li[onclick*="ls_txk_shop"] > i,
html .jinsom-right-bar > li[onclick*="ls_tx_shop"] > i,
html .jinsom-right-bar > li[onclick*="jinsom_admin_credit_money_form"] > i,
html .jinsom-right-bar > li[onclick*="ls_tx_admin"] > i,
html .jinsom-right-bar > li[onclick*="ls_txk_admin"] > i { display: none; }
html .jinsom-right-bar > li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--qh-rb-i) center / contain no-repeat;
  mask: var(--qh-rb-i) center / contain no-repeat;
}
html .jinsom-right-bar > li:not(.totop):not(.tobottom):not(.task):not(.now):not(.jinsom-right-bar-im):not([onclick*="ls_txk_shop"]):not([onclick*="ls_tx_shop"]):not([onclick*="jinsom_admin_credit_money_form"]):not([onclick*="ls_tx_admin"]):not([onclick*="ls_txk_admin"])::before { content: none; }
/* 到顶部 */
html .jinsom-right-bar > li.totop { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4.5h12M12 19.5V9M7.5 13.5 12 9l4.5 4.5'/%3E%3C/svg%3E"); }
/* 到底部 */
html .jinsom-right-bar > li.tobottom { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19.5h12M12 4.5V15M7.5 10.5 12 15l4.5-4.5'/%3E%3C/svg%3E"); }
/* 任务（领金币）：金币，主题色 */
html .jinsom-right-bar > li.task { color: var(--qh-accent); --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 7.8l3 3.6 3-3.6M12 11.4v5.1M9.4 12.6h5.2M9.4 15h5.2'/%3E%3C/svg%3E"); }
html .jinsom-right-bar > li.task:hover { color: var(--qh-accent); }
/* 实时动态 */
html .jinsom-right-bar > li.now { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h3.8l2.2-5.5 4.2 11 2.2-5.5h4.6'/%3E%3C/svg%3E"); }
/* 聊天 */
html .jinsom-right-bar > li.jinsom-right-bar-im { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18.5V7.5A2.5 2.5 0 0 1 7.5 5h9A2.5 2.5 0 0 1 19 7.5v6a2.5 2.5 0 0 1-2.5 2.5H9.2Z'/%3E%3Cpath d='M9 10.5h.01M12 10.5h.01M15 10.5h.01' stroke-width='2.4'/%3E%3C/svg%3E"); }
/* 头像框商城 */
html .jinsom-right-bar > li[onclick*="ls_txk_shop"] { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='10.3' r='2.6'/%3E%3Cpath d='M7.2 17.8a5.6 5.6 0 0 1 9.6 0'/%3E%3C/svg%3E"); }
/* 头衔商城 */
html .jinsom-right-bar > li[onclick*="ls_tx_shop"] { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6V5.5A1.5 1.5 0 0 1 5.5 4h7.1L20 11.4 11.4 20z'/%3E%3Ccircle cx='8.4' cy='8.4' r='1.3'/%3E%3C/svg%3E"); }
/* 财务操作（管理员） */
html .jinsom-right-bar > li[onclick*="jinsom_admin_credit_money_form"] { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='M16 13h4.5M6 6.5 15.2 4l.8 2.5'/%3E%3C/svg%3E"); }
/* 头衔管理（管理员，头衔插件追加） */
html .jinsom-right-bar > li[onclick*="ls_tx_admin"] { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.6' cy='10.6' r='2'/%3E%3Cpath d='M5.6 16a3 3 0 0 1 6 0M14.5 10h3.5M14.5 13.5h2.5'/%3E%3C/svg%3E"); }
/* 头像框管理（管理员，头像框插件追加） */
html .jinsom-right-bar > li[onclick*="ls_txk_admin"] { --qh-rb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.5 0 2.1-1.1 1.5-2.3-.7-1.4.2-2.9 1.8-2.9H17a3.5 3.5 0 0 0 3.5-3.5c0-4.7-3.8-8.3-8.5-8.3z'/%3E%3Ccircle cx='7.8' cy='11.5' r='1' fill='%23fff'/%3E%3Ccircle cx='9.6' cy='7.8' r='1' fill='%23fff'/%3E%3Ccircle cx='14' cy='7.4' r='1' fill='%23fff'/%3E%3C/svg%3E"); }

/* ---- 繁简切换（后台「自定义 HTML」按钮里的 #StranLink，脚本把文字在「繁體中文 / 简体中文」之间换）：只露出第一个字 ---- */
html .jinsom-right-bar > li > #StranLink {
  display: block;
  width: 18px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  color: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 40px;
  white-space: nowrap;
  text-decoration: none;
}

/* ---- 悬停提示：同页面浮层，按钮左边 8px，13px 字；淡入并向按钮移 6px（基线五：浮层展开） ---- */
html .jinsom-right-bar > li > .title {
  position: absolute;
  top: 50%;
  right: calc(100% + 13px);   /* 让出卡片 5px 内边距 + 8px 间距 */
  left: auto;
  height: 32px;
  margin: -16px 0 0;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--qh-chrome-edge);
  border-radius: 7px;
  background: var(--qh-chrome-dialog-solid, var(--qh-chrome-dialog));
  box-shadow: var(--qh-chrome-shadow);
  color: var(--qh-chrome-strong);
  font-size: 13px;
  line-height: 30px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .16s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), visibility .16s;
  pointer-events: none;
}
html .jinsom-right-bar > li:hover > .title { opacity: 1; visibility: visible; transform: none; }
html .jinsom-right-bar > li > .title:empty { display: none; }

/* ---- 未读数：数字角标（基线 6.5），外圈是卡片底色 ---- */
html .jinsom-right-bar > li > .number,
html .jinsom-right-bar > li.jinsom-notice > span:not(.title) {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--qh-accent);
  box-shadow: 0 0 0 2px var(--qh-s-card);
  color: #fff;
  font-size: 11px !important;   /* 主题写了 font-size: xx-small !important */
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---- 「领金币」：style/diy.css 给任务按钮加的常驻渐变角标。改成平时隐藏，悬停任务按钮时代替「任务」提示浮现：
   和其他提示同一位置、同样的浮现动作，主题色实底白字（不要渐变、投影），站长要求 ---- */
html body .jinsom-right-bar > li.task::after {
  content: "领金币";
  position: absolute;
  top: 50%;
  right: calc(100% + 13px);
  left: auto;
  z-index: 2;
  width: auto;
  height: 32px;
  margin: -16px 0 0;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--qh-accent);
  background-image: none;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 32px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .16s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), visibility .16s;
  pointer-events: none;
}
html body .jinsom-right-bar > li.task:hover::after { opacity: 1; visibility: visible; transform: none; }
html .jinsom-right-bar > li.task > .title { display: none; }   /* 「领金币」代替「任务」提示 */