.siderbar{
    position: fixed;
    right: 12px;
    bottom: 40px;
    z-index: 999;
}
.mes-box{
    padding: 9px;
    margin-bottom: 12px;
}

.mes-box a{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
    color: #333;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.mes-text {
    font-size: 14px;
    right: 65px; /* 右侧距离 */
    line-height: 22px;
    max-width: 252px; /* 最大宽度 */
    padding: 15px;
    border-radius: 8px;
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%) scale(0.8); /* 初始状态为缩放0.8 */
    background-color: #fff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15);
    opacity: 0; /* 初始透明度为0 */
    transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.mes-box:hover .mes-text {
    opacity: 1; /* 鼠标悬停时透明度变为1 */
    transform: translateY(-50%) scale(1); /* 鼠标悬停时放大到正常大小 */
}


.mes-text::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px; /* 三角形的位置 */
    transform: translateY(-50%);
    border: 6px solid transparent; /* 边框透明 */
    border-left-color: #fff; /* 三角形的颜色 */
    z-index: 1; /* 确保三角形在阴影之上 */
}

.mes-text::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px; /* 阴影的位置与三角形相同 */
    transform: translateY(-50%);
    border: 6px solid transparent; /* 边框透明 */
    border-left-color: rgba(0, 0, 0, 0.15); /* 阴影颜色 */
    z-index: 0; /* 确保阴影在三角形之下 */
    filter: blur(4px); /* 添加模糊效果以增强阴影效果 */
}

.top-box{
    padding: 9px;
    /* margin-left: 50%; */
}
.back-top {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

.back-top:hover {
    transform: translateY(-5px); /* 鼠标移入时上移5px */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}