/* ==========================================================================
   表情（评论 / 论坛回复）—— 2026-09-24 新增，当前只在 demo 侧
   --------------------------------------------------------------------------
   这一层只做两件事：
     1) `.emoji`        正文里的行内表情；
     2) `.emoji-picker` 选择面板（玻璃卡片，沿用站点同一套令牌）。
   刻意不碰 style.css / aero.css 里任何既有规则，出问题删掉本文件的 <link> 即可整块回退。

   ── 为什么 `.emoji` 要同时定死 width + height ──────────────────────────────
   六套素材的真实像素尺寸只有四种：20x20（QQ 2003）、24x24（QQ 2007）、
   50x50（QQ 2015 / QQ NT / 贴吧新旧）、以及 QQ NT 里 1 张 50x49。
   如果只写 height:1.15em 让宽度自适应：混用多个包时，同一行里 20px 的会显得比
   50px 的小一圈、50x49 那张还会因为不是正方形而在行内多撑 1px、把整行的高度顶上去。
   **同时定死 width/height + object-fit:contain** 之后，无论素材多大都占同一个方形盒子，
   行高与基线完全不受素材尺寸影响 —— 这就是「不许错位」的具体做法。

   `vertical-align:-.22em`：`<img>` 的基线在它的底边上，默认对齐会让表情整体偏高、
   像上标。往下挪约 0.22em 才与文字视觉居中（同一量级：Twemoji 用 -0.1em、Slack 用 -0.15em，
   这里素材偏方形、取略大一点）。
   ========================================================================== */

.emoji{
  display:inline-block;
  width:1.15em;
  height:1.15em;            /* 13px 正文 → 约 15px，与文字同高 */
  object-fit:contain;       /* 非正方形素材等比放入，绝不拉伸 */
  vertical-align:-.22em;
  margin:0 1px;
}

/* --------------------------------------------------------------------------
   工具行：表情按钮 + 字数统计
   `position:relative` 是给选择面板当定位上下文用的，面板相对它绝对定位。
   -------------------------------------------------------------------------- */
.ef-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px;   /* 工具行在输入框上方：间距留在自己下方，与 textarea 隔开 */
}
.ef-count{
  margin-left:auto;
  font-size:12px;
  color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
}
.ef-count.over{color:#b8302a}

/* 选择面板：站点玻璃卡片（--g-panel / --edge / --bloom 与 .box 同一套）。
   渐变停靠点用 px —— 用百分比在高容器上会算错（aero.css 里踩过这个坑）。 */
.emoji-picker{
  position:absolute;
  z-index:70;
  bottom:calc(100% + 6px);   /* 2026-09-25 用户要求：从按钮上方弹出，不盖住正在打的字 */
  left:0;
  width:344px;
  max-width:calc(100vw - 28px);
  padding:8px;
  border-radius:9px;
  color:var(--ink);
  background-color:var(--g-panel);
  background-image:linear-gradient(180deg,rgba(255,255,255,.88) 0px,rgba(255,255,255,.42) 30px,
                   rgba(255,255,255,.12) 100%);
  box-shadow:var(--edge),var(--bloom);
}
.emoji-picker[hidden]{display:none}

/* ⚠ 只调 .emoji-picker 的 z-index 不够（2026-09-25 用户实测抓到：footer 盖住了候选框）。
   .container 是 position:relative + z-index:1 的层叠上下文，.footer 也是 z-index:1
   但 DOM 在后 → 画在整个 .container 子树之上；候选框的 70 只在 container 内部比大小，
   出不了这个上下文。这与「网页内全屏被页头页脚压住」是同一个坑（aero.css「实现注意」有记录）。
   修法沿用同一模式：候选框开着时把 .container 提起来 ——
   取 70：> 页脚 1、> sticky 页头 60（面板向上弹，会盖到页头区域，必须比页头高）；
   排除 page-fs：真进了网页内全屏，container 的 950 不能被这里的 70 反超。 */
body.has-emoji-picker:not(.page-fs) .container{z-index:70}

/* 分包标签页。六个包的名称直接用目录名（qq2003 / qq2007 / qq2015 / qqnt /
   tieba_new / tieba_old），不另外起名 —— 素材本身没有附带名称表，
   编名字就是自造信息。 */
.ep-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.ep-tab{
  font:inherit;font-size:11px;line-height:1.75;
  padding:1px 7px;border-radius:4px;cursor:pointer;
  color:var(--ink-soft);
  border:1px solid rgba(120,168,208,.5);
  background-color:rgba(255,255,255,.6);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0px,rgba(255,255,255,.12) 100%);
}
.ep-tab[aria-selected="true"]{
  color:#f2f9ff;
  border-color:rgba(16,64,120,.55);
  background-color:var(--a-blue);
  background-image:linear-gradient(180deg,rgba(255,255,255,.36) 0px,rgba(255,255,255,0) 55%,
                   rgba(4,26,54,.22) 100%);
}

/* --------------------------------------------------------------------------
   网格：固定列宽 + 固定格子 + 固定图片盒
   三层都定死，是为了让「素材尺寸」这件事在布局上完全不存在 ——
   20x20 与 50x50 放进同一个 30x30 格子、内部再等比缩到 24x24 盒子，
   网格线永远对齐。img 用 display:block 去掉 inline 元素基线留出的下沿空隙
   （那个空隙正是「图片比格子矮 3~5px、看起来没对齐」的常见原因）。
   -------------------------------------------------------------------------- */
.ep-grid{
  display:grid;
  position:relative;   /* 是格子的 offsetParent：loadVisible() 按 offsetTop 算「滚进视口」，必须定位 */
  grid-template-columns:repeat(auto-fill, 30px);
  gap:2px;
  justify-content:space-between;
  /* 固定高度，不要 max-height（2026-09-25 用户：切分类后面板高度跳、标签不在原位）——
     小包（贴吧旧版 34 张 ≈ 4 行）撑不满 212px，max-height 会让面板矮一截、
     整个面板包括上方的分类标签行跟着上移。固定后任何包高度一致，标签纹丝不动。 */
  height:212px;
  overflow-y:auto;
  padding:2px;
}
.ep-grid button{
  position:relative;   /* 转圈/失败标记的定位上下文 */
  width:30px;
  height:30px;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:4px;
  background:none;
  cursor:pointer;
}
.ep-grid button:hover{border-color:rgba(120,168,208,.85);background:rgba(255,255,255,.75)}
.ep-grid button:focus-visible{outline:2px solid var(--a-blue);outline-offset:1px}
.ep-grid img{
  display:block;
  width:24px;
  height:24px;
  object-fit:contain;
}

/* 加载中：格子中央一个小转圈，图 load/error 时由 JS 摘掉。
   图在加载完成前是全透明的，转圈放在格子中央正好从空图底下露出来；
   缓存命中的图 JS 会同步摘掉标记，不会闪。 */
.ep-grid button.is-loading::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  border:2px solid rgba(120,168,208,.28);
  border-top-color:var(--a-blue);
  animation:ep-spin .7s linear infinite;
}
@keyframes ep-spin{to{transform:rotate(360deg)}}

/* 加载失败（404 等）：格子中央一个 ×，不再转圈。这种格子里的 token 服务端
   校验也不会过（known() 同样查不到文件），插进去会按纯文字显示。 */
.ep-grid button.is-error::after{
  content:'×';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  height:auto;
  margin:0;
  border:0;
  color:var(--ink-mute);
  font-size:13px;
  line-height:1;
  text-align:center;
}
@media (prefers-reduced-motion:reduce){
  .ep-grid button.is-loading::after{animation:none}   /* 保留静态圆环，仍能看出「没加载完」 */
}

/* 面板底栏：条数提示 + 剩余可插数量 */
.ep-foot{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding-top:6px;
  font-size:11px;
  color:var(--ink-mute);
  border-top:1px solid rgba(120,168,208,.4);
}
.ep-tip{margin-left:auto;color:#b8302a}
.ep-tip[hidden]{display:none}

/* 实时预览：把输入框里的 token 按正文规则渲染出来，选表情时立刻能看到真实大小与基线 */
.ef-preview{
  margin:8px 0 0;
  padding:7px 9px;
  min-height:34px;
  border-radius:6px;
  font-size:13px;
  line-height:1.75;
  color:var(--ink-soft);
  background-color:rgba(255,255,255,.5);
  box-shadow:var(--edge);
  white-space:pre-wrap;
  word-break:break-word;
}
.ef-preview .ef-ph{color:var(--ink-mute)}

/* 窄屏：改成贴底的抽屉，左右各留 8px。
   不能只写 width:100% —— 那样面板只有「工具行」的宽度（手机上一行里还挤着「发表」按钮，
   实测只有 214px），六列格子挤在一起很难点。position:fixed 直接相对视口定位，
   真正用满屏宽；行内盒与格子尺寸同时放大一档，手指更好点。 */
@media (max-width:520px){
  .emoji-picker{
    position:fixed;
    top:auto;
    bottom:8px;
    left:8px;
    right:8px;
    width:auto;
    max-width:none;
  }
  .ep-grid{grid-template-columns:repeat(auto-fill, 34px);height:180px}
  .ep-grid button{width:34px;height:34px}
  .ep-grid img{width:28px;height:28px}
}