/* ==========================================================================
   宜宇 · 表情面板（20260923st1）
   面板本体 + 输入条上的表情按钮 + 消息气泡里的贴纸
   全部走站点 CSS 变量，跟随主题，不写死颜色
   ========================================================================== */

/* ---- 输入条上的表情按钮（.ct-bar__form 是 flex，按钮排在 textarea 左边）---- */
.ct-bar__emo {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  background: var(--bg-raise);
  color: var(--text-second);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ct-bar__emo:active { background: var(--brand-100); color: var(--brand-700); }
/* st3：手机上焦点会落到这个 button 上（touchstart 阶段就转移，拦不住），
   不去掉 focus 环的话点一下会闪一圈浏览器默认高亮。 */
.ct-bar__emo:focus,
.ct-bar__emo:focus-visible { outline: none; }
/* 面板内的按钮在手机上会拿到焦点（touchstart 阶段就转移，拦不住），
   不去掉 focus 环的话每次点分类都会闪一圈浏览器默认高亮。 */
.sk-tab:focus, .sk-cat:focus, .sk-pack:focus, .sk-e:focus, .sk-i:focus,
.sk-tab:focus-visible, .sk-cat:focus-visible, .sk-pack:focus-visible,
.sk-e:focus-visible, .sk-i:focus-visible { outline: none; }
.sk-e:active, .sk-i:active { transform: scale(.92); }

/* ---- 聊天列表底部占位（st3）----
   面板是 fixed 浮在页面上的，打开后会直接压住最新几条消息 —— 用户看到的就是
   「消息被截掉一截 / 排版乱了」。这里让列表底部跟着让出面板（或键盘）的高度。
   .rm-wrap = 群聊（/room），.ct-wrap = 私信（/chat）。
   ⚠️ --sk-h / --sk-kbd 都带 0px 兜底：变量缺失时整条 calc() 会失效，
      padding-bottom 回落成 0，比写死值安全。 */
body.sk-kbd .rm-wrap,
body.sk-kbd .ct-wrap {
  padding-bottom: calc(var(--sk-kbd, 0px) + 8px);
}

body.sk-open .rm-wrap,
body.sk-open .ct-wrap {
  padding-bottom: calc(var(--sk-h, 320px) + var(--sk-kbd, 0px) + 8px);
}

/* ---- 面板：底部抽屉 ----
   height 走 --sk-h：sticker.js 打开时会把它设成「记住的键盘高度」，于是面板和
   键盘等高，「键盘收起 + 面板升起」看着就是同一块区域换了内容，不跳。
   bottom 走 --sk-kbd：iOS 上 fixed 元素会被软键盘盖住（layout viewport 不缩），
   必须用 visualViewport 量出来的键盘高度把它顶上去；Android 上这个值是 0。 */
.sk-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--sk-kbd, 0px);
  height: var(--sk-h, 320px);
  z-index: calc(var(--z-hd) + 2);
  display: flex;
  flex-direction: column;
  background: var(--bg-raise);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
  transform: translateY(101%);
  transition: transform .2s var(--ease-out, ease-out);
}
.sk-panel.is-on { transform: translateY(0); }

/* ---- 输入条（.ct-bar 是 fixed，见 app2026.css）跟随键盘 / 面板 ----
   ⚠️ 所有 var() 都带兜底值：任一变量未定义，整条 calc() 会被判为无效值，
      bottom 直接回落成 auto，输入条会跳到页面底部被盖住。

   两条规则的优先级靠书写顺序保证（特异性相同，后写的赢）：
     1) body.sk-kbd  —— 键盘弹起、面板收起：输入条抬到键盘上方（iOS 必需，
        Android 上 --sk-kbd 为 0，加不加都一样）
     2) body.sk-open —— 面板打开：输入条抬到面板上方（若键盘还没收干净，
        两者叠加，面板本身也在键盘上方）
   --sk-kbd / --sk-h 都由 sticker.js 写到 body 上。 */
body.sk-kbd .ct-bar {
  bottom: calc(var(--sk-kbd, 0px) + var(--tb-h, 56px) + var(--safe-bot, 0px));
}

body.sk-open .ct-bar {
  bottom: calc(var(--sk-kbd, 0px) + var(--sk-h, 320px));
}

.sk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sk-body[hidden] { display: none; }

/* ---- 顶部 tab ---- */
.sk-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.sk-tab {
  border: 0;
  background: transparent;
  padding: 4px 2px;
  font-size: var(--fs-md);
  color: var(--text-third);
  cursor: pointer;
}
.sk-tab.is-on { color: var(--text-primary); font-weight: 600; }
.sk-set { margin-left: auto; font-size: var(--fs-sm); color: var(--brand-600); text-decoration: none; }

/* ---- 分类条 / 贴纸包条 ---- */
.sk-cats,
.sk-packs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.sk-cats::-webkit-scrollbar,
.sk-packs::-webkit-scrollbar { display: none; }
.sk-cat,
.sk-pack {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  color: var(--text-second);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.sk-cat.is-on { background: var(--brand-500); color: #fff; }
.sk-pack.is-on { background: var(--brand-100); color: var(--brand-700); }
.sk-pack img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.sk-pack span { font-size: 15px; }

/* ---- 表情 / 贴纸网格 ---- */
.sk-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px 8px 10px;
  align-content: start;
}
.sk-grid[data-g="stk"] { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk-e {
  border: 0;
  background: transparent;
  padding: 5px 0;
  font-size: 23px;
  line-height: 1.2;
  cursor: pointer;
  border-radius: var(--r-xs);
}
.sk-e:active { background: var(--bg-sunken); }
.sk-i {
  aspect-ratio: 1 / 1;
  border: 0;
  background: var(--bg-base);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  cursor: pointer;
  overflow: hidden;
  padding: 4px;
}
.sk-i:active { background: var(--bg-sunken); }
.sk-i img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk-empty { grid-column: 1 / -1; text-align: center; color: var(--text-third); font-size: var(--fs-sm); padding: 18px 0; }
.sk-more {
  display: block;
  text-align: center;
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--brand-600);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

/* ---- 消息气泡里的贴纸 ---- */
.ct-stk {
  display: inline-block;
  max-width: 130px;
  vertical-align: middle;
}
.ct-stk--emo { font-size: 42px; line-height: 1.25; }
/* 整条消息只有一张贴纸时，去掉气泡底色 —— 像微信那样「图就是消息」 */
.ct-bubble:has(> .ct-stk:only-child) {
  background: transparent;
  padding: 0;
}

/* ==========================================================================
   20260924ui6 · 柚子 IP + 表情面板换皮
   --------------------------------------------------------------------------
   颜色为什么不直接写 var(--g600)：这套令牌名是设计稿的，主站 :root 里叫
   --brand-700 / --text-second … 名字对不上。这里用「令牌优先、写死值兜底」，
   将来主站补上 --g600 就自动切换，没有也照样是设计稿那个青柚绿。
   ========================================================================== */

/* ---- 柚子 IP：四档尺寸，禁止任意缩放（48 网格，非整数倍描边会糊）---- */
.yz {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  fill: var(--g100, #E7F1EA);
  stroke: var(--g600, #3F7D5C);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yz.s  { width: 22px; height: 22px; }
.yz.m  { width: 40px; height: 40px; }
.yz.l  { width: 56px; height: 56px; }
.yz.xl { width: 76px; height: 76px; }

/* ---- 网格：表情 6 列（SVG 比字符占地）/ 贴纸 4 列 ---- */
.sk-grid { grid-template-columns: repeat(6, 1fr); gap: 2px; }
.sk-grid.g4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* ---- tab：2px 下划线。选中色用一级字色而不是品牌绿 ----
   面板里已经有一屏绿色表情，tab 再上绿会和它们撞。 */
.sk-tab { position: relative; }
.sk-tab.is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand-600, #12a054);
  border-radius: 2px;
}
.sk-set { display: inline-flex; align-items: center; gap: 2px; }
.sk-set svg { width: 14px; height: 14px; }

/* ---- 底部条：包切换 + 加包 + 删除 ----
   原来包条在顶部、和分类条两层横滑叠在一起，用户分不清哪个是分类哪个是包。 */
.sk-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  background: var(--bg-raise);
}
.sk-foot .sk-packs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border: 0;
  padding: 0;
  scrollbar-width: none;
}
.sk-foot .sk-packs::-webkit-scrollbar { display: none; }
.sk-pk__t { font-size: var(--fs-sm); white-space: nowrap; }
.sk-pack.is-on { background: var(--brand-100); color: var(--brand-700); }

.sk-add, .sk-del {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--bg-base);
  color: var(--text-second);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sk-add { width: 34px; height: 34px; }
.sk-del { width: 44px; height: 44px; }   /* 红线 6：删除键必须 44 */
.sk-add svg, .sk-del svg { width: 18px; height: 18px; display: block; }
.sk-add:active, .sk-del:active { background: var(--bg-sunken); }
.sk-add:focus, .sk-del:focus,
.sk-add:focus-visible, .sk-del:focus-visible { outline: none; }

/* ---- 表情格：整格 62（含 2px gap），里面是 .yz.m 40 ---- */
.sk-e {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0;      /* 清掉字符时代的字号，避免行高把格子撑高 */
}

/* ---- 消息里的柚子贴纸 ----
   混排 22px；整条消息只有这一张时提到 56px 并去掉气泡底色（沿用既有裁决）。 */
.ct-stk--yz { display: inline-block; vertical-align: middle; }
.ct-bubble:has(> .ct-stk--yz:only-child) .ct-stk--yz { width: 56px; height: 56px; }

/* ==========================================================================
   ui6-hotfix（20260924ui7）· 2026-09-24 10:05 巡检单 P1 / P2 / P3
   纯增量：整段删掉即完整回滚到 ui6 状态，上面一行未改。
   依据：ui整改.md 第 3 节红线 6（触控热区；双口径 = 盒子 >=44 且命中 >=42）、
        红线 2（阴影只 --sh / --sh2）、红线 1（无 emoji）；
        第 8 节 2026-09-24 10:05 单据「P1 触控热区」整改要求表 + P2 + P3。
   ========================================================================== */

/* ---- 红线 6：5 个亚 44 控件补命中区（视觉尺寸一律不动）---- */
.sk-add { position: relative; }                 /* 34x34 -> 44x44 */
.sk-add::before { content: ''; position: absolute; inset: -5px; }

.ct-bar__emo { position: relative; }            /* 38x38 -> 44x44 */
.ct-bar__emo::before { content: ''; position: absolute; inset: -3px; }

/* chip 行：横向已 >=44，按 23:45 裁决只补纵向 */
.sk-cat, .sk-tab, .sk-set { position: relative; }
.sk-cat::before, .sk-tab::before, .sk-set::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* ⚠️ 执行方偏离 1（请复核）：.sk-cats 是 overflow-x:auto 横滑容器，
   CSS 规范下 overflow-y 会被计算成 auto，伪元素纵向外扩会被裁到滚动视口高度。
   设计稿 .sk-cats 是 padding:8px 12px（内高 44，正好放得下 44 的 ::before）；
   生产是 padding:6px 8px（内高只有 37）→ 照搬会被裁到 37，命中口径不达标。
   故纵向 padding 6px -> 10px（内高 45），横向 8px 不变，视觉只是分类行高 +8px。 */
.sk-cats { padding: 10px 8px; }

/* ---- P2-2：第三档阴影 -> 令牌（面板已有 border-top + 背景区分）---- */
.sk-panel { box-shadow: var(--sh2, none); }

/* ---- P3-1：兜底色改登记值（主站已定义 --brand-600:#12a054，此处仅兜底生效）----
   ---- P3-2：下划线 bottom 与设计稿对齐 -8px ---- */
.sk-tab.is-on::after { bottom: -8px; background: var(--brand-600, #3F7D5C); }

/* ---- P2-1：尊重系统「减少动效」（搬自设计稿原句）---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}