/* ===== 在线客服组件样式 ===== */
/* 此文件包含在线客服入口、聊天弹窗、联系表单和隐私协议弹窗的样式 */

/* ===== 在线客服入口 ===== */
.online-service-wrap { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 9999999; margin: 10px; display: flex; align-items: center; }
.online-service-btn { width: 52px; height: 52px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; box-shadow: 0 4px 12px rgba(123,159,211,0.3); transition: transform 0.3s, box-shadow 0.3s; flex-shrink: 0; }
.online-service-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(123,159,211,0.45); }
.online-service-btn .fa-headset { font-size: 22px; color: white; }
.online-service-hover { width: 0; overflow: hidden; transition: width 0.3s ease; position: absolute; right: 58px; white-space: nowrap; }
.online-service-wrap:hover .online-service-hover { width: 90px; }
.online-service-hover .hover-box { height: 38px; background: white; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); padding: 10px 8px; display: flex; align-items: center; width: max-content; }
.online-service-hover .hover-text { font-size: 14px; color: var(--text-primary); white-space: nowrap; width: max-content; }
/* 未读红点 */
.online-unread { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--qt-orange); border-radius: 50%; border: 2px solid var(--primary-color); display: none; }

/* ===== 在线客服弹窗 ===== */
.chat-dialog { position: fixed; right: 80px; bottom: 80px; width: 380px; height: 660px; max-height: calc(100vh - 100px); background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); z-index: 9999998; display: none; flex-direction: column; overflow: hidden; animation: chatSlideIn 0.3s ease; }
.chat-dialog.open { display: flex; }
@keyframes chatSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* 弹窗头部 */
.chat-header { background: var(--gradient-primary); color: white; padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.chat-header .avatar { width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.chat-header .info { flex: 1; }
.chat-header .info h4 { font-size: 15px; margin-bottom: 2px; }
.chat-header .info p { font-size: 12px; opacity: 0.85; }
.chat-header .close-btn { width: 32px; height: 32px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; color: white; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.chat-header .close-btn:hover { background: rgba(255,255,255,0.3); }

/* 弹窗消息区 */
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-light); display: flex; flex-direction: column; gap: 12px; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-sm); }

.msg-row { display: flex; gap: 8px; max-width: 85%; }
.msg-row.bot { align-self: flex-start; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.msg-avatar.bot { background: var(--primary-color); color: white; }
.msg-avatar.user { background: var(--light-bg-color); color: var(--primary-color); }

.msg-bubble { padding: 10px 14px; border-radius: var(--radius-lg); font-size: 14px; line-height: 1.5; word-break: break-word; }
.msg-row.bot .msg-bubble { background: white; color: var(--text-primary); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.msg-row.user .msg-bubble { background: var(--primary-color); color: white; border-bottom-right-radius: 4px; }

.msg-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: center; }

/* 快速回复按钮 */
.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; background: var(--bg-light); }
.quick-reply-btn { padding: 6px 14px; background: white; border: 1px solid var(--border-light); border-radius: var(--radius-xl); font-size: 13px; color: var(--cool-gray-11); cursor: pointer; transition: all 0.2s; }
.quick-reply-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: var(--light-bg-color); }
.quick-reply-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--border-light); }

/* 输入区 */
.chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-light); background: white; flex-shrink: 0; }
.chat-input input { flex: 1; padding: 10px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-xl); font-size: 14px; outline: none; transition: border-color 0.3s; }
.chat-input input:focus { border-color: var(--primary-color); }
.chat-input input:disabled { background: var(--bg-light); cursor: not-allowed; }
.chat-input .send-btn { width: 38px; height: 38px; background: var(--primary-color); border: none; border-radius: 50%; color: white; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; flex-shrink: 0; }
.chat-input .send-btn:hover { background: var(--primary-hover); }
.chat-input .send-btn:disabled { background: var(--cool-gray-3); cursor: not-allowed; }

/* 转人工按钮 */
.transfer-area { padding: 8px 16px; background: var(--bg-light); text-align: center; flex-shrink: 0; }
.transfer-btn { padding: 6px 18px; background: transparent; border: 1px solid var(--primary-color); border-radius: var(--radius-xl); color: var(--primary-color); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.transfer-btn:hover { background: var(--light-bg-color); }
.transfer-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--cool-gray-3); color: var(--text-muted); }

/* 联系方式表单 */
.contact-form { display: none; padding: 16px; background: var(--bg-light); flex-shrink: 0; border-top: 1px solid var(--border-light); }
.contact-form.open { display: block; max-height: 320px; overflow-y: auto; animation: fadeIn 0.3s ease; }
.contact-form h4 { font-size: 14px; color: var(--text-primary); margin-bottom: 12px; text-align: center; }
.contact-form .form-group { margin-bottom: 10px; }
.contact-form .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.contact-form .form-group input, .contact-form .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); font-size: 13px; outline: none; box-sizing: border-box; transition: border-color 0.3s; }
.contact-form .form-group input:focus, .contact-form .form-group textarea:focus { border-color: var(--primary-color); }
.contact-form .form-group textarea { height: 60px; resize: none; }

/* 隐私协议复选框 */
.privacy-check { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.privacy-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; }
.privacy-check .privacy-link { color: var(--primary-color); text-decoration: underline; cursor: pointer; }
.privacy-check .privacy-link:hover { color: var(--primary-hover); }

.contact-form .submit-btn { width: 100%; padding: 10px; background: var(--primary-color); border: none; border-radius: var(--radius-md); color: white; font-size: 14px; cursor: pointer; transition: background 0.3s; margin-top: 4px; }
.contact-form .submit-btn:hover { background: var(--primary-hover); }
.contact-form .submit-btn:disabled { background: var(--cool-gray-3); cursor: not-allowed; }
.contact-form .form-tip { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; }
.contact-form .form-success { display: none; text-align: center; padding: 10px; background: rgba(82,196,26,0.1); border-radius: var(--radius-md); color: var(--success); font-size: 13px; margin-top: 8px; }
.contact-form .form-success.show { display: block; }
.contact-form .form-error { display: none; text-align: center; padding: 8px; background: rgba(231,76,60,0.1); border-radius: var(--radius-md); color: var(--error); font-size: 12px; margin-top: 8px; }
.contact-form .form-error.show { display: block; }

/* 转人工状态提示 */
.transfer-notice { padding: 6px 12px; background: rgba(255,184,0,0.15); border-radius: var(--radius-sm); font-size: 12px; color: var(--warning); text-align: center; margin: 4px 0; }

/* 隐私协议弹窗 */
.privacy-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000000; align-items: center; justify-content: center; }
.privacy-modal.open { display: flex; }
.privacy-modal-content { background: white; width: 90%; max-width: 600px; max-height: 80vh; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.privacy-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: space-between; }
.privacy-modal-header h3 { font-size: 16px; color: var(--text-primary); }
.privacy-modal-header .pm-close { width: 28px; height: 28px; background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; }
.privacy-modal-body { padding: 20px; overflow-y: auto; font-size: 13px; color: var(--cool-gray-11); line-height: 1.8; flex: 1; }

/* 响应式适配 */
@media (max-width: 768px) {
    .chat-dialog { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: calc(100vh - 80px); border-radius: var(--radius-lg); }
    .online-service-wrap { right: 4px; }
    .privacy-modal-content { width: 95%; max-height: 90vh; }
}