/* online-service.css 【最终完美版】保留所有样式+动画+按钮图标 + 弹窗100%正常显示 v=20260117_final */
*{margin:0;padding:0;box-sizing:border-box;}
.online_Nav .animate__slideInRight{animation: slideInRight 0.5s ease forwards;}
@keyframes slideInRight {from{transform: translateX(100%);opacity:0;}to{transform: translateX(0);opacity:1;}}

/* ★ 保留：在线咨询按钮 呼吸式缩放动画 2秒/次 95%-105% 柔和无突兀 */
@keyframes breathScale {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ★ 保留：客服头像LOGO 波纹扩散动画 3秒/次 正中心扩散+渐隐消失 无偏移 */
@keyframes waveScale {
    0% {transform: scale(1);opacity: 0.6;}
    100% {transform: scale(2);opacity: 0;}
}

/* 整体下移52px 保持居中协调，和之前一致 */
.online_Nav {padding-top: 52px;}

/* ✅ 面板样式：上下纯直角 无圆角 宽度52px 白色背景 阴影不变 */
.service-panel{
    width: 52px;
    background: #ffffff;
    border-radius: 0px !important;
    box-shadow: 0 2px 8px rgba(0, 94, 255, 0.15);
    transition: all 0.3s ease;
    overflow: visible !important; /* 核心修复1：允许弹窗超出面板显示 之前overflow:hidden遮挡弹窗 */
}

/* ✅ 按钮容器：间距0 无缝排列 三个按钮紧凑贴合 不变 */
.service-buttons{
    display: flex;
    flex-direction: column;
    gap: 0px !important;
}

/* ✅ 基础按钮统一样式：52x52px 居中对齐 白底蓝字 悬浮浅蓝底 所有按钮样式统一 不变 */
.service-btn{
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0056ff;
    font-size: 24px;
    cursor: pointer;
    position: relative;
    border: 0;
    outline: 0;
    transition: background-color 0.2s ease;
    z-index: 2; /* 核心修复2：提高按钮层级 确保鼠标能触发hover */
}
/* 按钮悬浮效果 不变 */
.service-btn:hover{
    background-color: #f5faff !important;
    color: #0056ff !important;
}

/* ✅ 1. 客服按钮图标：样式不变、大小24px、纯静态对话图标 无改动 */
.icon-service { font-size: 24px; }

/* ✅ 2. 工单按钮图标：样式不变、大小22px、铅笔符号 无改动 */
.icon-work { font-size: 22px; }

/* ✅ 3. 二维码按钮：原图标+30px放大铺满+居中 样式不变 */
.icon-qrcode {
    font-size: 0; /* 清除默认字体间距 */
    width: 100%;
    height: 100%;
}
.qrcode-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    color: #0056ff;
}

/* ✅ ✅ ✅ 核心修复：弹窗悬浮显示逻辑 100%恢复正常 - 解决所有弹窗不显示问题 关键修改区 ✅ ✅ ✅ */
.service-item {
    position: relative;
    width: 52px;
    height: 52px;
    z-index: 1; /* 确保按钮容器能触发hover事件 */
}
/* 弹窗核心样式：修复定位+层级+显示逻辑，鼠标悬浮立即显示，无延迟无遮挡 */
.hoverWindow{
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 200px;
    max-width: 220px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    padding: 15px;
    z-index: 9999999 !important; /* 顶级层级 绝对不被遮挡 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    white-space: normal;
    pointer-events: auto; /* 允许点击弹窗内的链接 */
}
/* 鼠标悬浮按钮，弹窗立即显示 - 核心生效代码 */
.service-item:hover .hoverWindow{
    opacity: 1 !important;
    visibility: visible !important;
}

/* ✅ 三角箭头样式：指向按钮正中心 位置精准 不变 */
.onlineservice_triangle{
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #ffffff;
    z-index: 99999999;
    box-shadow: -1px 0 2px rgba(0,0,0,0.05);
}

/* 弹窗内部所有样式：客服/工单/二维码内容排版正常 无错乱 无改动 */
.onlineService_Body{width: 100%;}
.onlineservice_content{width:100%;margin-bottom:10px;}
.onlineservice_content:last-child{margin-bottom: 0;}
.onlineService_Title{
    display: flex;align-items: center;
    padding: 8px 0;border-bottom: 1px solid #f0f0f0;
    text-decoration: none;transition: all 0.2s ease;
}
.onlineService_Title:last-child{border-bottom: none;}
.onlineService_Title:hover{background: #f5faff;border-radius: 6px;padding-left: 4px;}
.onlineService_Title_Icon{
    width: 32px;height: 32px;border-radius: 8px;background: #f5faff;
    display: flex;align-items: center;justify-content: center;
    margin-right: 10px;color: #0056ff;font-size: 16px;
}
.onlineService_Title_Text{flex:1;}
.onlineServicetitle{font-size: 15px;color: #333;font-weight: 500;margin-bottom: 3px;}
.onlineServicedesc{font-size:12px;color:#999;line-height:1.4;}

/* 客服弹窗内部样式正常 */
.onlineService_kefu a{
    display: flex;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0;
    text-decoration:none;color:#333;transition:all 0.2s ease;
}
.onlineService_kefu a:last-child{border-bottom:none;}
.onlineService_kefu a:hover{background:#f5faff;border-radius:6px;padding-left:4px;}
.kefuInformation-status{
    position:relative;width:40px;height:40px;border-radius:8px;
    overflow:hidden;margin-right:10px;box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.online-indicator{
    position:absolute;bottom:2px;right:2px;width:10px;height:10px;
    background:#00d054;border-radius:50%;border:2px solid #ffffff;
}
.nicknameInformation .nickname{font-size:14px;color:#333;display:block;font-weight:500;}
.nicknameInformation .qq{font-size:12px;color:#999;}
.onlineService_Close{font-size:12px;color:#999;text-align:center;margin-top:8px;}

/* 二维码图片样式正常 无变形 */
.qrCode{width: 100%;height: auto;display:block;margin:0 auto;border-radius: 6px;}

/* ★ 保留：在线咨询按钮 呼吸动画绑定 不变 */
.online_Nav a.service-btn[href="/contact.html"] {
    animation: breathScale 2s linear infinite;
    animation-fill-mode: both;
}

/* ★ 保留：客服头像 正中心波纹扩散动画绑定 不变 无偏移 */
.online_Nav > div > div:first-child > div.service-btn {
    position: relative;
    overflow: visible !important;
}
.online_Nav > div > div:first-child > div.service-btn::after {
    content: "";
    position: absolute;
    top: 0;left:0;right:0;bottom:0;margin:auto;
    width: 100%;height:100%;border-radius:50%;
    border:2px solid #0056ff;
    transform-origin: center center;
    z-index: -1;
    animation: waveScale 3s ease-out infinite;
}