/* 优化版QQ客服提示框 */
.qq-service-box {
    position: fixed;      /* 固定定位，不随页面滚动 */
    bottom: 120px;        /* 右侧中下部位置（可调整） */
    right: 30px;          /* 距离右侧30px */
    z-index: 9999;        /* 确保在最上层，不被遮挡 */
    width: 260px;         /* 提示框宽度 */
    background: #ffffff;  /* 白色背景 */
    border: 2px solid #0084ff; /* QQ蓝边框，增强辨识度 */
    border-radius: 10px;  /* 圆角优化，更美观 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 柔和阴影 */
    padding: 20px;
    transition: all 0.3s ease; /* 平滑过渡动画 */
    box-sizing: border-box;
}

/* 鼠标悬停效果 */
.qq-service-box:hover {
    transform: translateY(-6px); /* 向上浮起6px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 阴影加深 */
    border-color: #0073e6; /* 边框颜色加深 */
}

/* QQ图标容器 */
.qq-service-icon {
    text-align: center;
    margin-bottom: 15px;
}

.qq-service-icon img {
    width: 50px;          /* QQ图标大小 */
    height: 50px;
}

/* 咨询文字样式 */
.qq-service-text {
    text-align: center;
    margin-bottom: 18px;
}

.qq-service-text p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.qq-service-text p:first-child {
    font-size: 16px;      /* 引导文字字号 */
    color: #333333;       /* 深灰色，清晰醒目 */
    font-weight: 500;
}

/* QQ号展示样式（突出显示） */
.qq-service-number {
    text-align: center;
    padding: 12px;
    background: #f5f9ff; /* 浅蓝背景，区分区域 */
    border-radius: 6px;
    margin-bottom: 10px;
}

.qq-service-number span {
    font-size: 18px;      /* QQ号字号放大 */
    color: #0084ff;       /* QQ蓝，突出重点 */
    font-weight: bold;    /* 加粗，方便用户复制 */
    letter-spacing: 1px;  /* 字符间距，提升可读性 */
}

/* 底部提示文字 */
.qq-service-note {
    text-align: center;
    font-size: 13px;
    color: #666666;       /* 灰色，辅助说明 */
}