/* ============================================================
   css/chat/chat-emoji.css — 聊天页表情包面板内容样式
   面板容器动画由 chat-input.css 的 .bottom-panel 统一管理
   ============================================================ */

/* 表情页内容（在 .bottom-panel-page.emoji-page 内） */
.emoji-page { display: flex; flex-direction: column; }

.ep-group-bar {
    display:flex; gap:0; overflow-x:auto; padding:6px 8px;
    border-bottom:1px solid var(--border); flex-shrink:0; min-height:48px;
    -webkit-overflow-scrolling:touch;
}
.ep-group-bar::-webkit-scrollbar { display:none; }
.ep-group-icon {
    flex-shrink:0; width:38px; height:38px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.15s ease; margin-right:5px;
    background:var(--surface-solid); border:1.5px solid transparent;
    overflow:hidden; font-size:10px; color:var(--text-secondary);
}
.ep-group-icon img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
.ep-group-icon.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); }

/* 问题10：内容区固定高度 + 纵向滚动隐藏 */
.ep-content-area { flex:1; overflow:hidden; padding:0; display:flex; flex-direction:column; min-height:0; position:relative; }
.ep-content-area::-webkit-scrollbar { display:none; }
/* 问题8：横向滑动轨道 — 类似plus-panel */
.ep-swipe-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    scrollbar-width: none;
    touch-action: pan-x;  /* ★ 允许手指横向滑动翻组，不被父级 overflow:hidden 拦截 */
}
.ep-swipe-track::-webkit-scrollbar { display:none; }
.ep-swipe-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    overflow-y: auto;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
}
.ep-swipe-page::-webkit-scrollbar { display:none; }
.ep-group-title { font-size:10px; color:var(--text-muted); padding:4px 4px 2px; flex-shrink:0; }
/* 问题10：固定最小高度让面板切换分组时不跳来跳去。
   ★ 2027 甲方实锤：只有一行表情时，这一行会被 min-height 撑满 → 长按高亮灰块变成超大块；
   align-content:start 让行按内容自然排列（容器仍是 180px 高，面板不跳、灰块恢复正常大小）。 */
.ep-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; min-height:180px; align-content:start; }
.ep-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    cursor:pointer; padding:2px 1px; border-radius:6px; transition:background 0.12s ease;
}
.ep-item:hover { background:var(--accent-light); }
.ep-item:active { transform:scale(0.95); }
.ep-item img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:5px; max-width:56px; }
.ep-item .ep-img-jpg { border-radius:5px; }
.ep-item .ep-img-png { border-radius:0; }
.ep-item-name {
    font-size:9px; color:var(--text-muted); text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ★ 2028-10-01：图片文件真的取不到时的优雅占位（浏览器「碎图」图标换成一句安静的小字卡片）。
   为什么不用默认碎图：碎图看着像软件坏了，而她其实什么都没做错 —— 图片是被旧的 7 天清理删掉的。
   占位与图片同尺寸（56px 上限、1:1），面板布局/分组翻页位置都不会因为缺图而跳动。 */
.kstar-emoji-ph {
    width:100%; max-width:56px; aspect-ratio:1; border-radius:5px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-light); border:1px dashed rgba(0,0,0,0.10);
}
.kstar-emoji-ph-txt {
    font-size:10px; line-height:1.15; text-align:center; color:var(--text-muted);
    padding:0 2px; word-break:break-all;
}
.ep-lp-card .kstar-emoji-ph { width:76px; max-width:76px; }

/* 表情包预览气泡 */
.emoji-preview-overlay {
    position:fixed; inset:0; z-index:350; display:none;
    align-items:center; justify-content:center; background:rgba(0,0,0,0.4);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.emoji-preview-overlay.open { display:flex; }
.emoji-preview-bubble {
    background:var(--bubble-user); padding:12px 16px; border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.15); max-width:200px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
}

/* ===== 表情面板小图：长按 修改/删除 菜单（2027）===== */
/* 面板小图：禁系统长按「复制图片」（iOS touch-callout / 安卓 contextmenu 由 JS 拦截，双保险） */
.ep-grid .ep-item img {
    pointer-events:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
}
.ep-lp-overlay {
    position:absolute; inset:0; z-index:150;
    display:flex; align-items:flex-end; justify-content:center;
    background:rgba(30,26,22,0.45);
    opacity:0; transition:opacity 0.22s ease;
}
.ep-lp-overlay.show { opacity:1; }
.ep-lp-card {
    width:100%; max-width:480px;
    background:var(--surface-solid,#FCFAF6);
    border-radius:20px 20px 0 0;
    padding:8px 0 calc(12px + env(safe-area-inset-bottom,0px));
    transform:translateY(24px); opacity:0;
    transition:transform 0.28s cubic-bezier(.2,.8,.2,1), opacity 0.22s ease;
}
.ep-lp-overlay.show .ep-lp-card { transform:translateY(0); opacity:1; }
.ep-lp-head {
    display:flex; align-items:center; gap:12px;
    padding:10px 18px 12px; border-bottom:1px solid var(--border,rgba(196,168,106,0.2));
}
.ep-lp-img { width:42px; height:42px; border-radius:10px; object-fit:cover; flex-shrink:0; box-shadow:0 1px 4px rgba(30,28,26,0.12); }
.ep-lp-meta { flex:1; min-width:0; }
.ep-lp-name { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:0.2px; }
.ep-lp-sub { font-size:11px; color:var(--text-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-lp-row {
    display:flex; align-items:center; gap:10px;
    padding:13px 20px; font-size:15px; color:var(--text-primary);
    cursor:pointer; transition:background 0.15s ease;
}
.ep-lp-row:active { background:var(--accent-light,rgba(201,168,168,0.12)); }
.ep-lp-row svg { flex-shrink:0; color:var(--text-secondary); }
.ep-lp-edit svg { color:var(--rose,#C9A8A8); }
.ep-lp-del { color:var(--danger,#b5495b); }
.ep-lp-del svg { color:var(--danger,#b5495b); }
.ep-lp-cancel { justify-content:center; color:var(--text-muted); margin-top:4px; border-top:1px solid var(--border,rgba(196,168,106,0.14)); }