/* 表情包 —— 两人共享的表情库(设计见 /tmp/mc_ui/sticker_plan.md)。
   用力只在一处:格子变大(4 列),带字梗图看得清;其余安静。全部吃皮肤变量(--surface/--ink/--accent…)。
   动森覆写用 html[data-theme="island"] 前缀,特异性压过 island.css 里旧的 [data-theme="island"] .sticker-* 规则。 */

/* ---------- 输入栏里的表情按钮 ---------- */
.sticker-btn {
  color: var(--ink-soft, #8E8E93);
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(142, 142, 147, 0.12);
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.sticker-btn:hover { background: rgba(142, 142, 147, 0.18); }
.sticker-btn:active { background: rgba(142, 142, 147, 0.28); }
.sticker-btn.active { color: var(--accent); }
html:not([data-theme="island"]) .sticker-btn.active { background: rgba(59, 91, 122, .10); }

/* ---------- 抽屉 ---------- */
.sticker-panel {
  --stk-tray: var(--app-bg, #F2F4F5);
  --stk-del: #D64545;
  --stk-soft: color-mix(in srgb, var(--ink, #1E2529) 70%, var(--surface, #FFFFFF));   /* 次要字 ≥4.5:1 */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--surface, #fff);
  color: var(--ink, #1E2529);
  border-top: 1px solid var(--surface-line, #E3E7EA);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 30px rgba(20, 30, 40, .08);
  padding: 0 14px 10px;
  z-index: 200;
  pointer-events: auto;
  animation: stkIn .24s cubic-bezier(.22, 1, .36, 1);
}
.sticker-panel.hidden { display: none; }
@keyframes stkIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.stk-grip { width: 36px; height: 4px; border-radius: 2px; margin: 8px auto 4px; background: var(--surface-line, #E3E7EA); }

.sticker-grid-wrap {
  max-height: min(400px, 46vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
  overscroll-behavior: contain;        /* 滚到头不带动整页 */
  touch-action: pan-y;
  padding: 2px 0 calc(env(safe-area-inset-bottom, 0px) + 6px);
  scrollbar-width: none;
}
.sticker-grid-wrap::-webkit-scrollbar { display: none; }

.stk-h {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink, #1E2529);
}
.stk-count { font-weight: 400; color: var(--ink-soft, #79838A); font-variant-numeric: tabular-nums; }

/* 刚用过:一行横滑,比库里的格子小一号 */
.stk-recent { padding: 6px 0 12px; border-bottom: 1px solid var(--surface-line, #E3E7EA); margin-bottom: 10px; }
.stk-recent[hidden] { display: none; }
.stk-recent .stk-h { margin-bottom: 8px; color: var(--ink-soft, #79838A); font-weight: 500; }
.stk-recent-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 6px; touch-action: pan-x; }   /* 上下留出格子阴影,不被分割线/滚动裁切 */
.stk-recent-row::-webkit-scrollbar { display: none; }
.stk-recent-row .sticker-cell { flex: none; width: 52px; }

.sticker-panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 2px 0 8px; }
.sticker-edit-btn {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 6px 2px 6px 12px; min-height: 36px;
}
.sticker-edit-btn[hidden] { display: none; }
.sticker-panel.is-editing .stk-title { color: var(--stk-soft); font-weight: 500; }

/* 库:4 列大格 */
/* 每格偏大(4 列≈84px,一屏看不了几个)→ 手机 5 列≈66px,宽屏 6 列(用户反馈) */
.sticker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
@media (min-width: 440px) { .sticker-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sticker-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  background: var(--surface, #FFFFFF);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--surface-line, #E3E7EA);
  border-radius: 14px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.sticker-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sticker-cell.pressing { transform: scale(.94); }
.sticker-cell.sent-pop { animation: stkPop .28s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes stkPop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.sticker-cell-img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 10px;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 添加:网格最后一格,虚线 */
.stk-add {
  flex-direction: column; gap: 2px;
  background: transparent;
  border: 1.5px dashed var(--surface-line, #D7DDE1);
  color: var(--stk-soft);
  font: inherit; font-size: 12px;
}
.stk-add:active { transform: scale(.94); }
.stk-uploading { cursor: default; }
.stk-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface-line, #E3E7EA); border-top-color: var(--accent); animation: stkSpin .8s linear infinite; }
@keyframes stkSpin { to { transform: rotate(360deg); } }

.stk-state {
  grid-column: 1 / -1; margin: 6px 0 4px;
  font-size: 13px; line-height: 1.6; color: var(--stk-soft);
  background: transparent; border: 0; text-align: left; padding: 0; font-family: inherit;
}
.stk-error { color: var(--ink, #1E2529); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 18px 0; }

/* 整理模式 */
.sticker-cell.editing { touch-action: pan-y; cursor: grab; box-shadow: inset 0 0 0 1px var(--surface-line, #E3E7EA);
  animation: stkWiggle .9s ease-in-out infinite alternate; }
.sticker-cell.editing:nth-child(2n) { animation-delay: -.45s; animation-duration: 1s; }
.sticker-cell.editing:nth-child(3n) { animation-delay: -.2s; }
.sticker-cell.editing.dragging, .sticker-cell.editing.pressing { animation: none; }
@keyframes stkWiggle { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
/* 编辑态给网格留出外角空间,× 放到格子外角不压贴图内容,也不被滚动容器裁掉 */
.sticker-panel.is-editing .sticker-grid { padding: 4px 2px; }
.sticker-cell-del {
  position: absolute; top: 4px; right: 4px;          /* 格子内右上角:不压到相邻格子 */
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 2px solid var(--surface, #fff);
  background: var(--stk-del); color: #fff; cursor: pointer; z-index: 2;
}
.sticker-cell-del::before { content: ''; position: absolute; inset: -11px; }   /* 点按区 44px,视觉仍是 22px */
.sticker-cell-del { box-shadow: 0 1px 3px rgba(20, 30, 40, .25); }
.sticker-cell.dragging {
  z-index: 10; cursor: grabbing;
  box-shadow: 0 0 0 2px var(--accent), 0 10px 24px rgba(20, 30, 40, .18);
  transition: none !important; animation: none !important;
}

/* 长按预览 */
.stk-peek {
  position: absolute; z-index: 20; width: 184px; height: 184px; padding: 10px;
  background: var(--surface, #fff); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--surface-line, #E3E7EA), 0 18px 40px rgba(20, 30, 40, .22);
  pointer-events: none;
  animation: stkPeek .18s cubic-bezier(.22, 1, .36, 1);
}
.stk-peek[hidden] { display: none; }
.stk-peek img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
@keyframes stkPeek { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }

/* 面板开着时藏起悬浮的花生(它在更高层叠上下文里,否则会压在表情格上) */
body.sticker-open .pet-float { visibility: hidden; }

/* ---------- 聊天里的表情消息:无气泡,像贴在对话里 ---------- */
.message-row.tail .sticker-bubble::before,
.message-row.tail .sticker-bubble::after { display: none; }
.message-bubble.sticker-bubble {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.message-bubble.sticker-bubble .message-sticker {
  width: 132px; height: 132px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(0 2px 6px rgba(20, 30, 40, .12));
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- 动森:奶油纸抽屉 + 托盘带 3D 底边 ---------- */
html[data-theme="island"] .sticker-panel {
  --stk-tray: #F3EBD3;
  --stk-del: #E8645A;
  background: #FBF7E6;
  border-top: 1.5px solid #E6D9B5;
  box-shadow: 0 -8px 0 -4px rgba(226, 213, 182, .5), 0 -10px 30px rgba(91, 70, 49, .10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: 'Nunito', 'PingFang SC', -apple-system, sans-serif;
}
html[data-theme="island"] .sticker-grid-wrap { background: transparent; }
html[data-theme="island"] .stk-grip { background: #E2D5B6; }
html[data-theme="island"] .sticker-cell {
  background: #FFFDF6;
  border: 1.5px solid #E6D9B5;
  border-radius: 16px;
  box-shadow: 0 3px 0 #E2D5B6;
}
html[data-theme="island"] .sticker-cell.pressing { transform: translateY(2px); box-shadow: 0 1px 0 #E2D5B6; }
html[data-theme="island"] .stk-add { background: transparent; box-shadow: none; border: 2px dashed #DCCDA6; color: #7A6548; }
html[data-theme="island"] .sticker-cell.editing { box-shadow: 0 3px 0 #E2D5B6; }
html[data-theme="island"] .sticker-cell.dragging { box-shadow: 0 0 0 2.5px #19C8B9, 0 10px 24px rgba(91, 70, 49, .2); }
html[data-theme="island"] .sticker-edit-btn { color: var(--accent-text, #0B7F75); font-weight: 800; }
html[data-theme="island"] .stk-h { font-weight: 800; }
html[data-theme="island"] .stk-peek { background: #FBF7E6; box-shadow: 0 0 0 2px #E6D9B5, 0 6px 0 #E2D5B6, 0 18px 40px rgba(91, 70, 49, .2); }
html[data-theme="island"] .message-bubble.sticker-bubble .message-sticker { filter: drop-shadow(0 3px 0 rgba(226, 213, 182, .9)); }

@media (prefers-reduced-motion: reduce) {
  .sticker-panel, .stk-peek, .sticker-cell.sent-pop, .sticker-cell.editing { animation: none; }
  .sticker-cell { transition: none; }
}

/* ===== craft 打磨(F #23)===== */
/* 标题层级:「我们的表情」应比右侧「整理」按钮更重 */
.stk-h .stk-title { font-size: 15px; font-weight: 700; }
.stk-h .stk-count { font-size: 13px; font-weight: 400; color: var(--ink-faint, var(--ink-soft, #79838A)); }
.sticker-edit-btn { font-weight: 500; }
html[data-theme="island"] .sticker-edit-btn { font-weight: 800; }   /* 动森保持粗体按钮语言 */
/* 网格底部不再被输入栏生硬切断:最后 16px 渐隐 */
.sticker-grid-wrap {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}