/**
 * 表情面板样式
 *
 * 本轮改动：
 *   - 表情选择器改用开源 emoji-mart（自带分类、搜索、肤色），
 *     其内部结构与样式由组件自身管理，这里只负责外框、头部与主题适配。
 *   - 删除旧的 .emoji-list / .emoji-item 规则（原来是手工维护的图片网格，
 *     对应的 55 个 GIF 在服务器上已因文件名编码损坏全部失效）。
 *   - 表情在消息与输入框中均以**原生字符**渲染，不再是 <img>，
 *     因此图片相关规则一并移除。
 */

.emoji-panel {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow: hidden;
}

.emoji-panel-header {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}

.emoji-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.emoji-close-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* 选择器容器：撑满面板剩余高度，由 emoji-mart 自己滚动 */
.emoji-picker-host {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.emoji-picker-host em-emoji-picker {
    flex: 1;
    min-height: 0;
    width: 100%;
    --border-radius: 0;
    --category-icon-size: 18px;
    --font-size: 14px;
    /* 让组件跟随站点的日夜主题（emoji-mart 用 CSS 变量控制配色） */
    --rgb-background: var(--emoji-picker-bg);
    --rgb-color: var(--emoji-picker-fg);
    --rgb-input: var(--emoji-picker-input);
}

.emoji-picker-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* =========================================
   消息与输入框中的表情
   -----------------------------------------
   两者都必须用**原生字符**渲染：
   输入框是"隐形 textarea + 可见渲染层"结构，用图片会让可见内容与
   实际文本的宽度不一致，光标定位随之错乱。
   ========================================= */

/* 消息气泡里的表情：略放大以贴合微信观感 */
.message-emoji-char {
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -0.15em;
}

/* 输入框可见层的表情：字号必须与 textarea 完全一致，否则会错位 */
.input-emoji-char {
    font-size: inherit;
    line-height: inherit;
}