/* ============================================================
   V3.17  QQ表情 + Lottie大表情 / 商品弹窗文字加深 / 区域块商品数
   ============================================================ */

/* 发送商品弹窗：名称/颜色规格文字加深，清晰可读 */
.cp-item .cp-mid{ color:var(--text); }
.cp-item .cp-mid b{ color:var(--text); font-size:13px; }
.cp-item .cp-mid small{ color:var(--text-2) !important; font-size:12px; }
.cp-item.cp-on .cp-mid small{ color:var(--text-2); }

/* ---------- 表情面板：一级模式切换 ---------- */
.emoji-modes{ display:flex; gap:5px; padding:10px 10px 4px; }
.emoji-mode{ flex:1; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-2);
  border-radius:10px; padding:6px 0; font-size:12.5px; cursor:pointer; transition:.16s; font-family:inherit; white-space:nowrap; }
.emoji-mode:hover{ color:var(--text); border-color:var(--blue); }
.emoji-mode.on{ background:linear-gradient(135deg,#0A84FF,#5E5CE6); color:#fff; border-color:transparent; font-weight:700; box-shadow:0 3px 10px rgba(10,132,255,.32); }

/* ---------- QQ 图片表情网格 ---------- */
.emoji-grid.qq{ grid-template-columns:repeat(7,1fr); gap:2px; padding:4px 10px 10px; align-content:start; }
.qq-sticker{ position:relative; border:none; background:transparent; border-radius:9px; padding:3px; cursor:pointer;
  transition:transform .12s,background .12s; display:flex; align-items:center; justify-content:center; }
.qq-sticker img{ width:100%; height:auto; display:block; }
.qq-sticker:hover{ background:color-mix(in srgb,var(--blue) 15%,transparent); transform:scale(1.14); z-index:2; }
.qq-sticker:active{ transform:scale(.9); }
.gif-tag{ position:absolute; right:1px; bottom:1px; font-style:normal; font-size:8px; background:#FF453A; color:#fff;
  border-radius:4px; padding:0 3px; line-height:1.5; font-weight:700; }

/* ---------- Lottie 大表情网格 ---------- */
.emoji-grid.lottie{ grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 10px 10px; align-content:start; }
.lot-sticker{ border:1px solid var(--input-border); background:var(--input-bg); border-radius:14px; padding:7px 4px;
  cursor:pointer; transition:transform .16s,box-shadow .16s,border-color .16s; display:flex; flex-direction:column; align-items:center; gap:4px; }
.lot-sticker:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 22%,transparent); }
.lot-sticker:active{ transform:scale(.94); }
.lot-ph{ width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 13%,transparent),transparent 72%); border-radius:11px; }
.lot-ph svg{ width:100%; height:100%; }
.lot-ph:empty::before{ content:'✨'; font-size:26px; opacity:.55; }
.lot-sticker small{ font-size:10.5px; color:var(--text-2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- 消息流内的贴纸 / 大表情 ---------- */
.msg-sticker{ width:96px; height:96px; object-fit:contain; display:block; animation:msgIn .26s ease both; }
.msg-lottie{ width:120px; height:120px; animation:msgIn .26s ease both; }
.msg-lottie svg{ width:100%; height:100%; }

/* ---------- 区域块上的商品数 ---------- */
.zb-pc{ color:#fff; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.35); }

/* ---------- 手机端 ---------- */
@media (max-width:760px){
  .emoji-grid.qq{ grid-template-columns:repeat(6,1fr); }
  .emoji-grid.lottie{ grid-template-columns:repeat(3,1fr); }
  .msg-sticker{ width:78px; height:78px; }
  .msg-lottie{ width:96px; height:96px; }
}