/* ===== 好友聊天斗图（friends.html）：😀 按钮 + 贴纸面板 + 贴纸气泡 ===== */
/* 面板样式与广场 list.css 的 sticker-panel/sticker-grid 保持一致 */
.btn-chat-sticker { background: #9f7aea; color: white; }
.chat-sticker-panel {
    display: none;
    padding: 10px;
    background: white;
    border-top: 1px solid #e2e8f0;
    max-height: 180px;
    overflow-y: auto;
}
.chat-sticker-panel.show { display: block; }
.chat-sticker-panel .sticker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}
.chat-sticker-panel .sticker-grid span {
    font-size: 28px;
    cursor: pointer;
    padding: 4px;
    text-align: center;
    border-radius: 6px;
    transition: background 0.15s;
}
.chat-sticker-panel .sticker-grid span:hover { background: #edf2f7; }

/* 贴纸消息：大号 emoji，无气泡底色（双方气泡一致；特异性压过 .chat-msg.mine 的底色规则） */
.chat-msg.mine .chat-msg-bubble.sticker,
.chat-msg:not(.mine) .chat-msg-bubble.sticker {
    background: transparent;
    box-shadow: none;
    padding: 2px 6px;
}
.chat-msg-bubble .sticker-content {
    font-size: 48px;
    line-height: 1.2;
    display: inline-block;
}
/* 透明底色下时间/已读改用灰色（默认白字会看不见） */
.chat-msg.mine .chat-msg-bubble.sticker .chat-msg-meta,
.chat-msg:not(.mine) .chat-msg-bubble.sticker .chat-msg-meta {
    color: #a0aec0;
}

@media (max-width: 768px) {
    .chat-sticker-panel .sticker-grid { grid-template-columns: repeat(6, 1fr); }
}