/* 文件路径: /assets/css/chat.css */

#zkChatBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color, #004098);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 64, 152, 0.4);
    cursor: pointer;
    z-index: 9999;
    user-select: none;
    touch-action: none; 
    transition: transform 0.2s;
}

#zkChatBtn:active { transform: scale(0.95); }

#zkChatWindow {
    display: none; position: fixed; bottom: 90px; right: 20px;
    width: 350px; height: 500px; background: #fff; border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15); z-index: 9999;
    flex-direction: column; overflow: hidden; animation: chatFadeIn 0.3s ease;
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-header { background: var(--primary-color, #004098); color: #fff; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.chat-header h3 { margin: 0; font-size: 16px; font-weight: 500; }
.close-chat { cursor: pointer; font-size: 24px; font-weight: bold; line-height: 1; transition: 0.2s; }
.close-chat:hover { opacity: 0.8; }

.chat-body { flex: 1; padding: 15px; overflow-y: auto; background: #f5f7fa; display: flex; flex-direction: column; gap: 15px; }
.msg-row { display: flex; width: 100%; }
.msg-row.user { justify-content: flex-end; }
.msg-row.admin { justify-content: flex-start; }
.msg-bubble { max-width: 75%; padding: 10px 15px; border-radius: 8px; font-size: 14px; word-break: break-all; line-height: 1.5; }
.msg-row.user .msg-bubble { background: var(--primary-color, #004098); color: #fff; border-bottom-right-radius: 0; }
.msg-row.admin .msg-bubble { background: #fff; color: #333; border: 1px solid #e2e8f0; border-bottom-left-radius: 0; }
.msg-bubble img { max-width: 100%; border-radius: 4px; margin-top: 5px; cursor: pointer; }
.msg-bubble a { color: inherit; text-decoration: underline; }

.chat-footer { border-top: 1px solid #edf2f7; padding: 10px 15px; background: #fff; }
.chat-tools { display: flex; gap: 12px; margin-bottom: 10px; }
.tool-btn { 
    background: none; border: none; cursor: pointer; color: #718096;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.tool-btn:hover { color: var(--primary-color, #004098); }
.chat-input-area { display: flex; gap: 10px; }
.chat-input-area textarea { flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px; resize: none; height: 40px; outline: none; font-family: inherit; transition: 0.2s; }
.chat-input-area textarea:focus { border-color: var(--primary-color, #004098); }
.send-btn { background: var(--primary-color, #004098); color: #fff; border: none; padding: 0 15px; border-radius: 6px; cursor: pointer; font-weight: 500; }

/* 隐藏的表情面板 (修复偏移并增加滚动) */
#emojiPicker {
    display: none; 
    position: absolute; 
    bottom: 105px; /* 精准定位，紧贴在输入工具栏上方 */
    left: 15px; 
    width: 270px; /* 固定宽度 */
    max-height: 180px; /* 固定最大高度，防止撑爆聊天框 */
    overflow-y: auto; /* 超出高度自动显示滚动条 */
    background: #fff;
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    padding: 10px; 
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1); /* 阴影向上投射 */
    grid-template-columns: repeat(7, 1fr); /* 调整为每行7个表情，更紧凑 */
    gap: 10px 5px; 
    z-index: 10000;
}

/* 美化表情面板的滚动条 */
#emojiPicker::-webkit-scrollbar {
    width: 4px;
}
#emojiPicker::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.emoji-item { 
    cursor: pointer; 
    font-size: 22px; 
    text-align: center; 
    user-select: none; 
    transition: transform 0.1s; 
}
.emoji-item:hover { 
    transform: scale(1.2); 
}

@media (max-width: 768px) {
    #zkChatWindow { width: 90%; right: 5%; bottom: 85px; height: 60vh; }
}