/* ==========================================================================
   KK: 前台右侧联系方式 —— 品牌色胶囊钮组 + 侧边联系面板（Contact Panel）
   --------------------------------------------------------------------------
   背景：厂商模板的 .right_nav li 只有收起态、没有任何事件绑定（悬停/点击都没反应），
        原本弹的那个白底灰边小卡片观感老旧。这里整套重做：
          · 悬浮按钮：贴边品牌色（电话红 / 邮箱深灰 / WhatsApp 绿），
            默认只露图标不占屏幕宽度，悬停才把渠道文字拉出来成为胶囊
          · 点按钮：直达对应应用（拨号 / 写邮件 / 打开 WhatsApp）
          · 右键（桌面）/ 长按（触屏）：从右侧滑出「联系面板」（移动端改为底部上滑面板）
   注意：厂商 style.css 里 .right_nav{overflow:hidden} 必须放开，
        否则胶囊文字和面板会被裁掉。
   ========================================================================== */

/* ==========================================================================
   1. 悬浮胶囊钮组（沿用厂商 .right_nav > li 结构，只改交互与视觉）
   --------------------------------------------------------------------------
   每个 li 一种品牌色，默认只露图标（不占屏幕宽度）；
   鼠标悬停 / 面板打开时，文字从贴边侧平滑"拉出来"成为胶囊 ——
   WhatsApp 绿是用户认知度最高的入口，一眼能认出来。
   ========================================================================== */
.right_nav{
    overflow: visible !important;
    z-index: 9000;
}
.right_nav li{
    right: 0 !important;                       /* 覆盖厂商的 right:-85px，按钮完整贴边 */
    /* 厂商的 li 是块级元素，width:auto 会跟着容器（position:fixed 的 shrink-to-fit）
       一起被撑开 —— 结果悬停一个按钮，三个一起变宽。这里把宽度改成只由自身内容决定，
       再用 margin-left:auto 让它始终贴住右边缘。 */
    width: max-content;
    margin: 4px 0 4px auto;                    /* 保留厂商的上下 4px 间距 */
    max-width: 220px;                          /* 安全上限 */
    height: 42px;
    padding: 0 14px;
    border-radius: 999px 0 0 999px;            /* 贴边左半圆，收起/展开都是这个形状 */
    box-shadow: 0 6px 16px rgba(15, 17, 21, .22);
    overflow: hidden;                          /* 收起的文字被裁掉 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: box-shadow .22s ease, filter .18s ease;
}
/* 渠道品牌色（data-kk-kind 由插件 JS 标注） */
.right_nav li[data-kk-kind="phone"]     { background: #e5011a; }
.right_nav li[data-kk-kind="email"]     { background: #1f2937; }
.right_nav li[data-kk-kind="whatsapp"]  { background: #25d366; }
.right_nav li[data-kk-kind="wechat"]    { background: #07c160; }
/* 面板打开时点亮对应胶囊、同时拉出文字（等于告诉用户"面板正在显示这一条"） */
.right_nav li.kk-open{
    filter: brightness(.88);
    box-shadow: 0 8px 22px rgba(15, 17, 21, .34);
}

/* 直达应用的链接（由 JS 把厂商的 .iconBox 包进来） */
.right_nav li .kk-go{
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* 图标：JS 已把厂商位图换成实底 SVG，白色、随胶囊底色 */
.right_nav li .iconBox{
    display: flex;
    align-items: center;
    justify-content: flex-start;               /* 覆盖厂商的 space-between */
    gap: 0;                                    /* 间距交给 h4 的 margin-left，收起时才不留空档 */
    min-width: 0;
}
.right_nav li .iconBox svg{
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: #fff;
    display: block;
}
.right_nav li .iconBox img.kk-keep-img{        /* 没有对应 SVG 的渠道退回厂商位图 */
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: block;
}

/* 渠道文字：默认收成 0 宽藏起来，悬停才滑出 */
.right_nav li .iconBox h4{
    margin: 0;
    padding: 0;
    max-width: 0;
    opacity: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .32s cubic-bezier(.32,.72,0,1),
                margin-left .32s cubic-bezier(.32,.72,0,1),
                opacity .18s ease;
}
/* 展开态（面板打开时，任何设备都拉出来） */
.right_nav li.kk-open .iconBox h4{
    max-width: 140px;
    opacity: 1;
    margin-left: 9px;
}
/* 展开态（悬停）：只在真指针设备上启用，触屏不粘 hover */
@media (hover: hover) and (pointer: fine){
    .right_nav li:hover{
        filter: brightness(.92);
        box-shadow: 0 8px 22px rgba(15, 17, 21, .30);
    }
    .right_nav li:hover .iconBox h4{
        max-width: 140px;
        opacity: 1;
        margin-left: 9px;
    }
}

/* 厂商原来的白底小卡片不再使用（信息都在面板里） */
.right_nav li .hideBox{ display: none !important; }

/* 首次进站的一次性轻提示：不弹气泡，只让胶囊"呼吸"一下 */
@keyframes kkAsideNudge{
    0%, 100%{ transform: none; }
    45%{ transform: translateX(-4px); }
}
.right_nav li.kk-nudge{ animation: kkAsideNudge 1.05s cubic-bezier(.4,0,.2,1) 2; }

@media (max-width: 640px){
    /* 触屏：默认只露圆形图标，文字永不展开（点图标直达、长按开面板） */
    .right_nav li{
        height: 42px;
        padding: 0;
        border-radius: 50%;
        width: 42px;
    }
    .right_nav li .kk-go{ justify-content: center; }
    .right_nav li .iconBox h4{ display: none; }
}

/* ==========================================================================
   2. 联系面板
   ========================================================================== */
.kk-cp-mask{
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99990;
    background: rgba(15,17,21,.44);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.kk-cp-mask.show{ opacity: 1; visibility: visible; }

.kk-cp{
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 99991;
    width: 384px; max-width: 92vw;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 18px 0 0 18px;
    box-shadow: -24px 0 64px rgba(15,17,21,.20), -2px 0 8px rgba(15,17,21,.06);
    transform: translateX(102%);
    transition: transform .44s cubic-bezier(.32,.72,0,1);
}
.kk-cp.show{ transform: none; }

/* ---- 头部 ---- */
.kk-cp-head{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid #eef0f3;
}
.kk-cp-logo{
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff3348 0%, #e5011a 65%);
    color: #fff; font-size: 18px; font-weight: 700; line-height: 42px; text-align: center;
    box-shadow: 0 6px 16px rgba(229,1,26,.28);
    letter-spacing: -.02em;
}
.kk-cp-head h3{
    margin: 1px 0 0; font-size: 15px; font-weight: 600; color: #14161a; letter-spacing: -.01em;
}
.kk-cp-head p{
    margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #7b828f;
}
.kk-cp-x{
    margin-left: auto; flex: 0 0 30px;
    width: 30px; height: 30px; border: 0; border-radius: 9px;
    background: #f4f5f7; color: #5b6270;
    font-size: 18px; line-height: 1; font-family: inherit; cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.kk-cp-x:hover{ background: #e8eaee; color: #14161a; }

/* ---- 渠道列表 ---- */
.kk-cp-body{
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px;
}
.kk-cp-item{
    position: relative;
    display: flex; align-items: center;
    padding: 0 12px 0 0;
    border-radius: 14px;
    transition: background .16s ease;
}
.kk-cp-item:hover{ background: #f7f8fa; }
.kk-cp-item + .kk-cp-item{ margin-top: 2px; }

.kk-cp-main{
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0 13px 12px;
    text-decoration: none; color: inherit; cursor: pointer;
}
.kk-cp-arrow{
    flex: 0 0 18px; color: #c3c8d2; font-size: 15px; line-height: 1;
    transition: transform .24s ease, color .24s ease;
}
.kk-cp-wechat.open .kk-cp-arrow{ transform: rotate(90deg); color: #e5011a; }

/* 从悬浮按钮进来时，对应渠道短暂高亮一下 */
@keyframes kkItemHl{
    0%{ background: #fdeef0; }
    72%{ background: #fdeef0; }
    100%{ background: transparent; }
}
.kk-cp-item.kk-hl{ animation: kkItemHl 1.5s ease 1; }

.kk-cp-ic{
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 12px; background: #fdeef0; color: #e5011a;
    display: flex; align-items: center; justify-content: center;
}
.kk-cp-ic svg{ width: 19px; height: 19px; display: block; }
/* 品牌图标（WhatsApp / 微信）viewBox 不是正方形，按高度自适应 */
.kk-cp-ic svg.kk-brand{ width: auto; height: 19px; }
.kk-cp-item:hover .kk-cp-ic{ background: #fce2e6; }

.kk-cp-txt{ min-width: 0; flex: 1; }
.kk-cp-txt b{
    display: block; font-size: 13.5px; font-weight: 600; color: #14161a; letter-spacing: -.005em;
}
.kk-cp-txt span{
    display: block; margin-top: 3px;
    font-size: 12.5px; color: #7b828f;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kk-cp-txt em{
    display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; color: #a7adb8;
}

/* 行尾复制按钮 */
.kk-cp-copy{
    flex: 0 0 34px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: transparent; color: #a7adb8;
    cursor: pointer; font-family: inherit;
    transition: background .16s ease, color .16s ease;
}
.kk-cp-copy svg{ width: 16px; height: 16px; display: block; }
.kk-cp-copy:hover{ background: #eef0f3; color: #14161a; }
.kk-cp-copy.done{ background: #e8f8ee; color: #12854a; }

/* 微信（预留）：点击展开二维码 */
.kk-cp-wechat{ display: block; }
.kk-cp-wechat .kk-cp-row{ display: flex; align-items: center; }
.kk-cp-wechat .kk-cp-qr{
    max-height: 0; overflow: hidden; margin-top: 0;
    transition: max-height .38s cubic-bezier(.32,.72,0,1), margin-top .3s ease;
}
.kk-cp-wechat.open .kk-cp-qr{ max-height: 280px; margin-top: 12px; }
.kk-cp-qr-in{
    display: flex; align-items: center; gap: 14px;
    padding: 14px; border-radius: 14px; background: #f7f8fa;
}
.kk-cp-qr-in img{
    width: 108px; height: 108px; flex: 0 0 108px;
    border-radius: 10px; background: #fff; padding: 5px; object-fit: contain;
    box-shadow: 0 2px 8px rgba(15,17,21,.08);
}
.kk-cp-qr-in .qr-txt{ font-size: 12.5px; line-height: 1.7; color: #5b6270; min-width: 0; }
.kk-cp-qr-in .qr-txt b{ display: block; font-size: 13px; color: #14161a; margin-bottom: 4px; }
.kk-cp-qr-in .qr-txt .qr-id{
    display: inline-block; margin-top: 6px; padding: 4px 9px; border-radius: 7px;
    background: #fff; border: 1px solid #e8eaee; font-size: 12px; color: #14161a;
    -webkit-user-select: all; user-select: all;
}
.kk-cp-qr-empty{
    padding: 14px; border-radius: 14px; background: #f7f8fa;
    font-size: 12.5px; line-height: 1.7; color: #7b828f;
}

/* ---- 底部 CTA ---- */
.kk-cp-foot{
    padding: 16px 20px 20px;
    border-top: 1px solid #eef0f3;
}
.kk-cp-cta{
    width: 100%; height: 46px; border: 0; border-radius: 13px;
    background: #e5011a; color: #fff;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
    box-shadow: 0 8px 20px rgba(229,1,26,.24);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.kk-cp-cta:hover{ background: #c40016; box-shadow: 0 10px 24px rgba(229,1,26,.30); }
.kk-cp-cta:active{ transform: scale(.985); }
.kk-cp-note{
    margin: 11px 0 0; text-align: center;
    font-size: 11.5px; color: #a7adb8;
}

/* ---- 复制成功后的浮层提示 ---- */
.kk-cp-toast{
    position: fixed; left: 50%; bottom: 34px; z-index: 99999;
    transform: translate(-50%, 14px);
    display: flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px;
    background: rgba(20,22,26,.93); color: #fff;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 14px 34px rgba(15,17,21,.30);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, transform .3s cubic-bezier(.34,1.3,.64,1), visibility .24s ease;
}
.kk-cp-toast.show{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kk-cp-toast svg{ width: 16px; height: 16px; flex: 0 0 16px; color: #4ade80; }

/* ---- 移动端：底部上滑面板 ---- */
@media (max-width: 640px){
    .kk-cp{
        top: auto; left: 0; right: 0; bottom: 0;
        width: auto; max-width: none;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(102%);
        box-shadow: 0 -20px 60px rgba(15,17,21,.26);
    }
    .kk-cp.show{ transform: none; }
    .kk-cp-head{ padding: 26px 18px 16px; }
    .kk-cp-body{ padding: 10px 10px 4px; }
    .kk-cp-foot{ padding: 14px 18px 18px; }
    .kk-cp-toast{ bottom: 24px; }
}

/* ==========================================================================
   3. 联系页正文图标板块（.page_icobox）：JS 把纯文本包成链接后的观感修正
      （默认 <a> 的蓝色+下划线会打破板块排版，这里让它平时安静、悬停可感知）
   ========================================================================== */
.page_icobox .fl-rich-text a{
    color: inherit;
    text-decoration: none;
    transition: color .16s ease;
}
.page_icobox .fl-rich-text a:hover{
    color: #e5011a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 无障碍：尊重系统"减少动效"设置 */
@media (prefers-reduced-motion: reduce){
    .kk-cp, .kk-cp-mask, .right_nav li, .right_nav li .iconBox h4,
    .kk-cp-wechat .kk-cp-qr, .kk-cp-toast{ transition-duration: .01ms !important; }
    .right_nav li.kk-nudge{ animation: none !important; }
}