/* ── 表情面板 ─────────────────────────────────────────── */

/* 触发按钮 */
.moe-smilies-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-family: inherit; font-weight: 500;
  color: var(--c-text-3); cursor: pointer;
  background: none; border: 1px solid var(--c-border);
  border-radius: 100px; padding: 4px 14px 4px 10px;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
  margin-bottom: 10px;
}
.moe-smilies-toggle:hover,
.moe-smilies-toggle.is-open {
  color: var(--c-primary); border-color: var(--c-primary);
  background: rgba(94,179,217,0.06);
}
.moe-smilies-toggle svg { flex-shrink: 0; }

/* 面板容器 */
.moe-smilies-wrap {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(94,179,217,0.08);
  overflow: hidden;
}
.moe-smilies-wrap.is-open {
  animation: moe-smilies-in 0.25s cubic-bezier(.22,.8,.36,1);
}
@keyframes moe-smilies-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tabs */
.moe-smilies-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--c-border);
  background: rgba(94,179,217,0.03);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.moe-smilies-tab {
  flex: 0 0 auto;
  font-size: 13px; font-family: inherit; font-weight: 500;
  color: var(--c-text-3); cursor: pointer;
  background: none; border: none;
  padding: 10px 18px;
  border-bottom: 2px solid transparent;
  transition: color var(--trans), border-color var(--trans);
  white-space: nowrap;
}
.moe-smilies-tab:hover { color: var(--c-primary); }
.moe-smilies-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* Panel grid */
.moe-smilies-panel {
  display: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  gap: 6px;
  flex-wrap: wrap;
}
.moe-smilies-panel.is-active {
  display: flex;
}

/* 自定义滚动条（面板内部） */
.moe-smilies-panel::-webkit-scrollbar { width: 4px; }
.moe-smilies-panel::-webkit-scrollbar-thumb {
  background: rgba(94,179,217,0.25); border-radius: 100px;
}

/* 表情项 — 通用 */
.moe-smilies-item {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 8px;
  transition: background var(--trans), transform 0.15s ease;
  user-select: none; -webkit-user-select: none;
}
.moe-smilies-item:hover {
  background: rgba(94,179,217,0.1);
  transform: scale(1.12);
}
.moe-smilies-item:active { transform: scale(0.95); }

/* 颜文字 */
.moe-smilies-item--text {
  font-size: 13px; padding: 5px 8px;
  color: var(--c-text-2);
}
.moe-smilies-item--text:hover { color: var(--c-primary); }

/* 图片表情 */
.moe-smilies-item--img {
  width: 48px; height: 48px; padding: 4px;
}
.moe-smilies-item--img img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none;
}

/* ── 评论/文章中的表情渲染 ── */
img.moe-sticker {
  display: inline-block;
  height: 2em; max-height: 2em;
  vertical-align: text-bottom;
  margin: 0 1px;
}

/* ── 暗色模式 ── */
[data-theme="dark"] .moe-smilies-wrap {
  background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .moe-smilies-tabs {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .moe-smilies-toggle {
  border-color: var(--c-border);
}
[data-theme="dark"] .moe-smilies-item:hover {
  background: rgba(255,255,255,0.08);
}

/* ── 移动端 ── */
@media (max-width: 600px) {
  .moe-smilies-item--img { width: 40px; height: 40px; }
  .moe-smilies-panel { max-height: 200px; }
  .moe-smilies-tab { padding: 8px 12px; font-size: 12px; }
}

/* ── 减弱动画 ── */
@media (prefers-reduced-motion: reduce) {
  .moe-smilies-wrap.is-open { animation: none; }
  .moe-smilies-item:hover { transform: none; }
}