/* ============================================================
   表情面板（步骤61，全站）：主题 jinsom_get_expression() 输出、jinsom_smile() 点开的 .jinsom-smile-form
   - 帖子评论框、楼层回复、发帖 / 编辑页编辑器、发动态 / 音乐 / 视频弹窗、转发、商品评价、直播间、私信窗口共用这一套外观：
     浮层底 + 12px 圆角（日间阴影勾边，夜间 1px 细描边），表情 10 个一行，每格 38px、表情图 28px，悬停浅底，最多 248px 高、超出滚动
   - 只改外观。打开的位置照主题原来的（各处按钮旁边，各自的 top / left），私信窗口里改成工具栏上方，见 im.css
   - 主题每一格悬停时有 1px 主题色边框（!important），这里压掉，改成悬停浅底
   规范：_优化补丁/前端设计基线.md 6.21
   ============================================================ */
html .jinsom-smile-form {
  box-sizing: border-box;
  width: 432px;
  min-height: 0;
  max-height: 248px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--qh-chrome-edge);
  border-radius: 12px;
  background: var(--qh-chrome-pop-solid);
  box-shadow: var(--qh-chrome-shadow);
  color: var(--qh-chrome-text-pop);
  font-family: var(--qh-font);                       /* 发动态、转发弹窗里面板插在图标字体的 <i> 里，字体要改回来 */
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  text-align: left;
  white-space: normal;
  cursor: default;
}

/* 表情分组标签（后台加了不止一组表情时才有） */
html .jinsom-smile-form .header { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; }
html .jinsom-smile-form .header li {
  margin: 0;
  padding: 5px 12px;
  border-radius: 8px;
  color: var(--qh-chrome-text);
  font-size: 14px;
  line-height: 20px;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
html .jinsom-smile-form .header li:hover { background: var(--qh-chrome-pop-hover); color: var(--qh-chrome-strong); }
html .jinsom-smile-form .header li.on { background: var(--qh-chrome-current); color: var(--qh-chrome-strong); }

/* 表情：10 个一行。分组切换靠主题脚本在 <ul> 上写行内 display:none，这里不加 !important */
html .jinsom-smile-form ul { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin: 0; padding: 0; }
html .jinsom-smile-form span.jinsom-smile-img {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  box-sizing: border-box;
  width: auto;
  height: 38px;
  margin: 0 !important;                              /* 主题每 14 个换行的 margin-right（:nth-child(14n) 带 !important） */
  padding: 0 !important;
  border: 0 !important;                              /* 压过主题悬停时的主题色 1px 边框（!important） */
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: background-color .15s;
}
html .jinsom-smile-form span.jinsom-smile-img:hover { background: var(--qh-chrome-pop-hover); }
html .jinsom-smile-form span.jinsom-smile-img img { display: block; width: 28px; height: 28px; max-width: none; margin: 0; }

/* 后台没配表情时的提示（主题是红字） */
html .jinsom-smile-form .tips { padding: 24px; color: var(--qh-chrome-muted); font-size: 14px; }
html .jinsom-smile-form .jinsom-empty-page { padding: 24px; color: var(--qh-chrome-muted); }

/* 滚动条：6px 细滚动条。全站有两条给滚动条轨道铺浅底的规则：主题的 ::-webkit-scrollbar-track-piece（#EDEDEF），
   后台「自定义 CSS」的 ::-webkit-scrollbar-track（#f6f6f6 + 内阴影），夜间是一条白边、滑块也看不见，轨道都改透明。
   滑块用 background 简写，顺带去掉后台给滑块加的主题色斜纹。
   新版 Chrome 认了标准的 scrollbar-width 以后就不再用 ::-webkit-scrollbar，所以标准写法只给 Firefox */
html .jinsom-smile-form::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
html .jinsom-smile-form::-webkit-scrollbar-track,
html .jinsom-smile-form::-webkit-scrollbar-track-piece { background: transparent; box-shadow: none; }
html .jinsom-smile-form::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(var(--qh-chrome-ink), .22); }
@supports not selector(::-webkit-scrollbar) {
  html .jinsom-smile-form { scrollbar-width: thin; scrollbar-color: rgba(var(--qh-chrome-ink), .22) transparent; }
}