@charset "utf-8";
/* AB模板网提供代码 www.adminbuy.cn */

/* ========== 电脑端样式（保持原有逻辑，无改动） ========== */
.toolbar{position: fixed;top: 50%;right: 1%;margin-top: -163px;z-index: 100;width: 80px;}
.toolbar dd{position: relative;float: left;width: 80px;height: 80px;background: #1685e8;margin: 2px 0 0 0;border-radius: 5px;color: #fff;font-size: 14px;line-height: 21px;text-align: center;cursor: pointer;transition: all .5s;}
.toolbar dd:first-child{margin-top: 0;}
.toolbar dd i{width: 100%;height: 30px;display: block;margin-top: 13px;background: url(../images/toolbar.png) no-repeat center 0;}
.toolbar dd.qq i{background-position-y: 0;}
.toolbar dd.tel i{background-position-y: -30px;}
.toolbar dd.code i{background-position-y: -60px;}
.toolbar dd.top i{background-position-y: -90px;}
.toolbar dd span{display: block;color: #fff; text-align:center}
.toolbar dd.tel .box{position: absolute;top: 0;width: 190px;right: -200px;height: 100%;margin-right: 10px;border-radius: 5px;background: #1685e8;opacity: 0;transition: all .5s; text-align:center}
.toolbar dd.tel .box p{font-size: 14px;margin: 15px auto 7px; text-align:center}
.toolbar dd.tel .box h3{font-size: 18px;font-weight: bold;text-align:center}
.toolbar dd.tel .box:after{display: block;content: " ";border-style: solid dashed dashed dashed;border-color: transparent  transparent transparent #1685e8;border-width: 9px;width: 0;height: 0;position: absolute;top: 50%;margin-top: -9px;right: -18px;margin-left: -12px;}
.toolbar dd.code .box{position: absolute;top: 0;width: 162px;right: -172px;height: 162px;margin-right: 10px;border-radius: 5px;background: #1685e8;opacity: 0;transition: all .5s;}
.toolbar dd.code .box img{width: 140px;height: 140px;padding: 11px;}
.toolbar dd.code .box:after{display: block;content: " ";border-style: solid dashed dashed dashed;border-color: transparent  transparent transparent #1685e8;border-width: 9px;width: 0;height: 0;position: absolute;top: 30px;right: -18px;margin-left: -12px;}
.toolbar dd:hover{background: #0e6bb8;}
.toolbar dd.tel:hover .box{opacity: 1;right: 80px;}
.toolbar dd.code:hover .box{opacity: 1;right: 80px;}

/* ========== 手机端：贴最底部+60px按钮+弹窗完美包裹内容 ========== */
@media (max-width: 768px) {
  /* 核心：强制贴最底部（适配安全区+最高优先级） */
  .toolbar{
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1685e8 !important;
    border: none !important;
    z-index: 99999 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    /* 适配全面屏底部安全区 */
    bottom: constant(safe-area-inset-bottom) !important;
    bottom: env(safe-area-inset-bottom) !important;
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  
  /* 60px大按钮，保证图标完整显示 */
  .toolbar dd{
    width: 60px !important;
    height: 60px !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    background: #1685e8 !important;
  }
  
  /* 图标放大，完整显示 */
  .toolbar dd i{
    height: 30px !important;
    margin-top: 10px !important;
    background-size: 30px auto !important;
  }
  
  /* 服务热线弹窗：完美包裹内容+居中对齐 */
  .toolbar dd.tel .box{
    position: absolute !important;
    top: -100px !important;
    right: 0 !important;
    left: 0 !important;
    width: 120px !important; /* 适配内容宽度 */
    height: auto !important; /* 高度自适应内容 */
    transform: none !important;
    margin: 0 auto !important; /* 居中 */
    background: #1685e8 !important;
    border-radius: 5px !important; /* 圆角和按钮一致 */
    padding: 10px 5px !important; /* 内边距，包裹内容 */
    box-sizing: border-box !important;
  }
  .toolbar dd.tel .box p{
    margin: 0 0 5px 0 !important; /* 调整间距 */
    font-size: 12px !important;
    line-height: 16px !important;
  }
  .toolbar dd.tel .box h3{
    margin: 0 !important; /* 取消多余间距 */
    font-size: 14px !important;
    line-height: 18px !important;
  }
  
  /* 微信咨询弹窗：完美包裹二维码 */
  .toolbar dd.code .box{
    position: absolute !important;
    top: -140px !important; /* 适配高度 */
    right: 0 !important;
    left: 0 !important;
    width: 120px !important; /* 适配二维码宽度 */
    height: 120px !important; /* 和二维码匹配 */
    transform: none !important;
    margin: 0 auto !important; /* 居中 */
    background: #1685e8 !important;
    border-radius: 5px !important;
    padding: 5px !important; /* 内边距，包裹二维码 */
    box-sizing: border-box !important;
  }
  .toolbar dd.code .box img{
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important; /* 取消多余padding */
    margin: 0 !important;
  }
  
  /* 弹窗箭头：居中指向按钮 */
  .toolbar dd.tel .box:after{
    border-color: #1685e8 transparent transparent transparent !important;
    top: auto !important;
    bottom: -18px !important;
    right: 50% !important;
    left: 50% !important;
    margin-left: -9px !important;
    margin-top: 0 !important;
  }
  .toolbar dd.code .box:after{
    border-color: #1685e8 transparent transparent transparent !important;
    top: auto !important;
    bottom: -18px !important;
    right: 50% !important;
    left: 50% !important;
    margin-left: -9px !important;
    margin-top: 0 !important;
  }
  
  /* 弹窗触发：正常显示 */
  .toolbar dd.tel:hover .box{
    opacity: 1 !important;
    right: 0 !important;
    left: 0 !important;
  }
  .toolbar dd.code:hover .box{
    opacity: 1 !important;
    right: 0 !important;
    left: 0 !important;
  }
}