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

/* ---------- 正文里的表情图 ---------- */
.cmt-emoji {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 1px;
    border-radius: 3px;
    /* 横排印章（如"加油"）是宽幅的，固定 20x20 会把它压扁。
       改成只限高，宽度自适应。 */
    max-width: 20px;
    object-fit: contain;
}

/* ---------- 输入框旁的表情按钮 ---------- */
/* 绝对定位在输入框右下角（浮在 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;
}

/* ---------- 已选表情预览条（输入框上方） ---------- */
.cmt-emoji-preview {
    display: none;
    margin-bottom: 6px;
    padding: 5px 6px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
    max-height: 84px;
    overflow-y: auto;
}

.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-chip img {
    width: 22px;
    height: 22px;
    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;
}

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