/**
 * ECHOX 表情面板样式（PC + 手机）
 * 与 assets/js/emoji-panel.js 配套，统一由页面 <link> 引入。
 */

/* ---------- 面板容器 ---------- */
.xcx-ep-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 9998; opacity: 0; transition: opacity .2s; display: none; }
.xcx-ep-overlay.show { display: block; opacity: 1; }

.xcx-ep { position: fixed; z-index: 9999; background: #fff; display: none; flex-direction: column; overflow: hidden; font-size: 14px; color: #333; text-align: left; }
.xcx-ep.open { display: flex; }
.xcx-ep--pc { width: 384px; height: 344px; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.xcx-ep--mobile { left: 0; right: 0; bottom: 0; height: 58vh; max-height: 520px; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.18); }

.xcx-ep-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; }
.xcx-ep--mobile .xcx-ep-body { padding-bottom: 60px; }
.xcx-ep-title { font-size: 12px; color: #9aa0a6; margin: 8px 0; }
.xcx-ep-sec { margin-bottom: 8px; }
.xcx-ep-empty { color: #bbb; font-size: 13px; text-align: center; padding: 36px 0; }

/* ---------- 表情网格（固定尺寸 + 居中） ---------- */
.xcx-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
.xcx-ep-i {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 46px; border: 0; padding: 0; border-radius: 9px;
    background: transparent; cursor: pointer; user-select: none;
    transition: background .12s, transform .12s;
}
.xcx-ep-i:hover { background: #f1f6f1; }
.xcx-ep-i:active { transform: scale(.9); }
.xcx-ep-i > img { width: 40px; height: 40px; object-fit: contain; display: block; pointer-events: none; }
.xcx-ep-i > span { font-size: 24px; line-height: 1; }
.xcx-ep-add { border: 1.5px dashed #cfd8cc; color: #4CAF50; font-size: 22px; background: #fafcf9; }

/* ---------- 底部 tab ---------- */
.xcx-ep-tabs { flex: 0 0 auto; height: 48px; border-top: 1px solid #f0f0f0; background: #fafafa; display: flex; align-items: center; gap: 4px; padding: 0 8px; overflow-x: auto; }
.xcx-ep-tabs::-webkit-scrollbar { height: 0; }
.xcx-ep-tab {
    flex: 0 0 auto; width: 38px; height: 38px; border: 0; padding: 0; background: transparent;
    border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #6b7280; transition: background .12s, color .12s;
}
.xcx-ep-tab:hover { background: #eef2ee; }
.xcx-ep-tab.active { background: #e8f5e9; color: #4CAF50; box-shadow: inset 0 -2px 0 #4CAF50; }
.xcx-ep-tab > img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; display: block; }

/* ---------- 搜索 ---------- */
.xcx-ep-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.xcx-ep-search i { color: #9aa0a6; }
.xcx-ep-search input { flex: 1; border: 1px solid #e5e7eb; border-radius: 18px; padding: 8px 14px; font-size: 13px; outline: none; }
.xcx-ep-search input:focus { border-color: #4CAF50; }

/* ---------- 手机端退格 ---------- */
.xcx-ep-backspace {
    position: absolute; right: 12px; bottom: 56px; z-index: 2;
    width: 44px; height: 34px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #f4f4f4; color: #666; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- 右键 / 长按菜单 ---------- */
.xcx-menu { position: fixed; z-index: 10000; min-width: 136px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.xcx-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: #333; font-size: 14px; text-align: left; cursor: pointer; }
.xcx-menu button:hover { background: #f1f6f1; }
.xcx-menu button i { width: 16px; color: #4CAF50; text-align: center; }
.xcx-menu button.danger i { color: #ff4444; }

/* ---------- 大图预览 ---------- */
.xcx-preview { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.72); }
.xcx-preview.show { display: flex; }
.xcx-preview img { max-width: 70vw; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #fff; }
.xcx-preview .xcx-preview-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font-size: 18px; cursor: pointer; }

/* ---------- 提示 ---------- */
.xcx-toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10002; padding: 10px 18px; background: rgba(0,0,0,.78); color: #fff; font-size: 14px; border-radius: 8px; }

/* ---------- 内容中的表情：固定尺寸（含 GIF） ---------- */
.xcx-emoji { width: 120px; height: 120px; object-fit: contain; vertical-align: middle; display: inline-block; }
.msg-content .xcx-emoji, .bubble-text .xcx-emoji { width: 130px; height: 130px; }
/* 富文本编辑器会丢弃 class，输入时预览按图片路径兜底固定尺寸 */
.ql-editor img[src*="/assets/emojis/"],
.ql-editor img[src*="/uploads/emojis/"] {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}
/* 帖子正文/回复/楼中楼里的表情：与主题正文图片同规则（52px 上限、保持比例），
   手机版一并统一，楼中楼不再单独放大 */
.post-body img[src*="/assets/emojis/"],
.post-body img[src*="/uploads/emojis/"],
.reply-body img[src*="/assets/emojis/"],
.reply-body img[src*="/uploads/emojis/"],
.sub-reply img[src*="/assets/emojis/"],
.sub-reply img[src*="/uploads/emojis/"],
.mobile-post-detail-content img[src*="/assets/emojis/"],
.mobile-post-detail-content img[src*="/uploads/emojis/"],
.mobile-reply-content img[src*="/assets/emojis/"],
.mobile-reply-content img[src*="/uploads/emojis/"],
.mobile-sub-reply-content img[src*="/assets/emojis/"],
.mobile-sub-reply-content img[src*="/uploads/emojis/"],
.mobile-nested-reply-content img[src*="/assets/emojis/"],
.mobile-nested-reply-content img[src*="/uploads/emojis/"] {
    width: auto !important;
    height: auto !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* ---------- 触发按钮 ---------- */
.xcx-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; color: #6b7280; font-size: 20px; cursor: pointer; }
.xcx-trigger:hover { color: #4CAF50; }

/* ---------- 富文本输入（手机端回帖，插入表情即预览） ---------- */
.xcx-editor {
    position: relative; min-height: 96px; max-height: 260px; overflow-y: auto;
    padding: 12px 14px; border: 1px solid #e8e8e8; border-radius: 10px;
    background: #fff; font-size: 15px; line-height: 1.6; color: #333; outline: none;
    word-break: break-word;
}
.xcx-editor:focus { border-color: #4CAF50; }
.xcx-editor:empty::before { content: attr(data-placeholder); color: #b3b3b3; pointer-events: none; }
.xcx-editor .xcx-emoji { width: 96px; height: 96px; }