/*!
 * 评论表情包 —— 样式
 * 配套 /templates/default/js/comment-emoji.js
 */

/* ---------- 正文里的表情图 ---------- */
/* 尺寸说明：
   1) 面板里表情显示为 35px（插件 CSS .emoji_content ul li a img{max-height:35px}），
      正文原来用 20px 差了近一倍 -> 用户反馈"发布出来跟选择的不一样"。
      现统一到 28px：比 20px 清晰，动画细节能看出来，又不至于撑破行高。
   2) 不能同时写 width 和 max-width：固定 width 会把横排印章（加油/催更/收藏）
      压成方形。这里只写 height + max-width，宽度按原图比例自适应。
   3) 不要加 object-fit —— 它会创建新的绘制上下文，GIF 动画在部分浏览器上
      会被降级成静态首帧。 */
.cmt-emoji {
    height: 28px;
    max-width: 56px;
    vertical-align: middle;
    margin: 0 2px;
    border-radius: 3px;
}

/* ---------- 输入框旁的表情按钮 ---------- */
/* 绝对定位在输入框右下角（浮在 textarea 之上）。
   注意两个坑：
   1) 不能用 inline 布局 —— 外层 .part3 是 float:left 占 78%，
      按钮会被挤到剩余空间里变形。
   2) hui.css 里有全局 `a{display:flex; width:100%; height:50px;}`，
      会覆盖按钮的 width/display。所以这里用 a.cmt-emoji-btn 提高特异性，
      并显式写死 display/width/height/flex。 */
a.cmt-emoji-btn,
.cmt-emoji-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    flex: none;
    overflow: visible;
    line-height: 28px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

a.cmt-emoji-btn:hover,
a.cmt-emoji-btn:active,
.cmt-emoji-btn:hover,
.cmt-emoji-btn:active {
    background: #f2f2f2;
    color: #3b7fd4;
}

/* 按钮里的表情符号：用 CSS 画一个笑脸，避免依赖彩色 emoji 字体 */
.cmt-emoji-btn::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 9px;
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.cmt-emoji-btn::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 15px;
    width: 6px;
    height: 3px;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0 0 6px 6px;
}

/* 给输入框留出按钮位置，别挡住文字 */
.pinglun1 textarea,
textarea.pinglun1 {
    padding-right: 42px;
}

/* ---------- 已选表情预览条（浮在输入框上方） ----------
   注意：预览条必须用 position:fixed 浮在输入框上方，
   不能作为普通块级元素插在 textarea 前面 ——
   评论底栏 .btm_xuan 是 position:fixed，.part3 又是 float:left 占 78%，
   多一个块级元素会把底栏撑高、输入框被挤变形（用户反馈"切换页面样式出问题"）。
   位置由 JS 的 positionPreview() 按输入框的 getBoundingClientRect 计算。 */
.cmt-emoji-preview {
    display: none;
    position: fixed;
    z-index: 320;
    padding: 5px 6px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    max-height: 84px;
    max-width: calc(100vw - 16px);
    overflow-y: auto;
    line-height: 1;
}

.cmt-emoji-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    line-height: 0;
}

/* 预览条里的表情图单独缩小一点（预览条本身空间有限） */
.cmt-emoji-preview .cmt-emoji {
    height: 24px;
    max-width: 48px;
}

.cmt-emoji-chip img {
    height: 28px;
    max-width: 56px;
    display: block;
}

/* ---------- 表情面板适配移动端 ---------- */
/* 面板必须用 position:fixed —— 评论底栏 .btm_xuan 是 fixed，
   插件用 offset() 给面板定位会算成文档坐标，页面一长面板就跑到视口外，
   表现为「点击按钮没反应」。JS 里每次显示前用视口坐标重设 top/left。 */
.emoji_container {
    position: fixed !important;
    width: 340px;
    max-width: calc(100vw - 16px);
    border-radius: 8px;
    z-index: 300;
}

.emoji_content {
    height: 240px;
}

.emoji_content ul li {
    width: 46px;
    height: 46px;
}

.emoji_content ul li a {
    line-height: 46px;
}

.emoji_content ul li a img {
    max-width: 42px;
    max-height: 42px;
}

/* ---------- 动图标记 ----------
   全站 650 个表情里只有 107 个是真动图（都在 QQ 组），其余是静态 PNG。
   在真动图右上角画一个闪烁小圆点，让用户选之前就知道哪些会动。
   （JS 侧给 li 加 .cmt-anim class） */
.emoji_content ul li.cmt-anim {
    position: relative;
}

.emoji_content ul li.cmt-anim a::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
    animation: cmt-anim-blink 1.1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cmt-anim-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* 动图标记是给用户看的，hover 时给个文字提示 */
.emoji_content ul li.cmt-anim a {
    cursor: pointer;
}

/* 面板在窄屏时不要超出可视区 */
@media screen and (max-width: 560px) {
    .emoji_container {
        left: 8px !important;
        right: 8px;
        width: auto !important;
    }
}