/* 容器：贴右边，垂直居中 */
#kf-side {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 竖向主条*/
#kf-side .kf-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 46px;
    padding: 16px 0;
    background: linear-gradient(180deg, #12715f, #0b5a4c);
    color: #ffffff;
    border-radius: 12px 0 0 12px;
    box-shadow: -3px 3px 12px rgba(11,90,76,.30);
    text-decoration: none;
    user-select: none;
}
#kf-side .kf-tab .kf-tab-text {
    writing-mode: vertical-rl;        /* 竖排文字 */
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
}

/* 提示可交互 */
@keyframes kf-glow {
    0%   { box-shadow: -3px 3px 12px rgba(11,90,76,.30), 0 0 0 0 rgba(18,113,95,.35); }
    70%  { box-shadow: -3px 3px 12px rgba(11,90,76,.30), 0 0 0 10px rgba(18,113,95,0); }
    100% { box-shadow: -3px 3px 12px rgba(11,90,76,.30), 0 0 0 0 rgba(18,113,95,0); }
}
#kf-side .kf-tab { animation: kf-glow 3s infinite; }

/* 展开面板：白色，向左弹出 */
#kf-side .kf-panel {
    position: absolute;
    right: 54px;                       /* 主条宽46 + 间距8 */
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    width: 208px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(20,40,30,.16), 0 1px 4px rgba(20,40,30,.08);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
    pointer-events: none;
}
#kf-side .kf-panel::after {          /* 右侧小箭头指向主条 */
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #ffffff;
    border-right: none;
}
/* 悬停主条或面板时展开 */
#kf-side:hover .kf-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* 面板行 */
#kf-side .kf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease;
}
#kf-side .kf-row:hover { background: #f4faf6; }
#kf-side .kf-row .kf-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
#kf-side .kf-row-wx .kf-ico {
    background: linear-gradient(150deg, #1ec877, #0aa84f);
    color: #fff;
}
#kf-side .kf-row-wx .kf-label { color: #149a57; font-weight: 600; font-size: 14px; }

#kf-side .kf-row-tel .kf-ico {
    background: #f0f5f2;
    color: #12715f;
    border: 1px solid #e2ece7;
}
#kf-side .kf-row-tel .kf-label { color: #33413b; font-weight: 600; font-size: 14.5px; letter-spacing: .5px; }

/* 手机端：主条收窄，面板隐藏（点击主条直接聊天） */
@media (max-width: 768px) {
    #kf-side .kf-tab { width: 40px; padding: 13px 0; }
    #kf-side .kf-panel { display: none; }
}