/* =====================================================
   sticker.css —— 表情包面板 + 聊天加号菜单（一排三）
   ===================================================== */

/* ---------- 聊天加号菜单：一排三个大格子 ---------- */
.plus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 2px 12px;
}
.plus-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 6px 14px;
  border-radius: var(--r-lg, 18px);
  background: var(--bg-soft, #ffe9f0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out-soft, cubic-bezier(.22,.61,.36,1)), background .16s linear;
}
.plus-item:active { transform: scale(.95); background: color-mix(in srgb, var(--bg-soft, #ffe9f0) 72%, var(--muted, #a98a96)); }
.plus-ic {
  font-size: 30px;
  line-height: 1;
}
.plus-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #3a2c33);
}
/* 展开的「视频照片」子项 */
.plus-sub {
  border-top: 1px dashed color-mix(in srgb, var(--muted, #a98a96) 32%, transparent);
  padding-top: 6px;
  margin-bottom: 4px;
}
.plus-sub.hidden { display: none; }

/* ---------- 表情包面板（openSub 子页面） ---------- */
.sticker-panel { padding: 4px 2px 20px; }
.sticker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sticker-count { font-size: 13px; color: var(--muted, #a98a96); }
.sticker-manage {
  border: none;
  background: var(--bg-soft, #ffe9f0);
  color: var(--accent, #ff5c8a);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
}
.sticker-manage.on { background: var(--gradient, linear-gradient(135deg,#ff9ebb,#ff6f9c)); color: #fff; }
.sticker-hint { font-size: 12px; color: var(--muted, #a98a96); margin-bottom: 12px; }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sticker-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  background: var(--bg-soft, #ffe9f0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sticker-cell img,
.sticker-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sticker-cell:active { transform: scale(.95); }
.sticker-kind {
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-size: 14px;
  pointer-events: none;
}
.sticker-del {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  background: var(--danger, #ff5b5b);
  border-radius: 50%;
  z-index: 2;
}
.sticker-cell.managing .sticker-del { display: block; }
.sticker-cell.managing { box-shadow: 0 0 0 2px var(--danger, #ff5b5b) inset; }

/* 添加格子 */
.sticker-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px dashed color-mix(in srgb, var(--muted, #a98a96) 55%, transparent);
  background: transparent;
}
.sticker-add-plus { font-size: 26px; color: var(--muted, #a98a96); line-height: 1; }
.sticker-add-label { font-size: 12px; color: var(--muted, #a98a96); }
.sticker-add input { display: none; }