/* ============================================================
   全站客服悬浮窗（左下角「信息坞」里的客服图标 + 客服卡片）
   2026-10-12：新增弹出/收回动效
   1. 面板从客服图标处「弹性放大 + 轻微上浮」弹入，收回时反向缩回；
      面板底部加一枚指向图标的小尖角，视觉上与按钮连成一体。
   2. 展开瞬间面板外扩一圈品牌色光晕（一次性，不常驻），
      配合客服图标的弹性抖动，把视线从页面中上部引到左下角。
   3. 二维码延迟一点点再弹入，形成两级节奏。
   4. 位置变量与 css/corner-dock.css 保持一致：left/bottom 20/24，
      小屏 14/14 —— 两处改动必须同步。
   依赖：由 js/navigation.js 全站注入；页面也可显式引入。
   ============================================================ */

.xhs-cs {
    position: fixed;
    z-index: 9999;
    left: 20px;
    bottom: 24px;
    font-family: inherit;
}

/* ------------------------------------------------------------
   客服图标：悬停微抬 + 展开时弹性抖动
   ------------------------------------------------------------ */
.xhs-cs-toggle {
    position: relative;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: #ff2442;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 8px 24px #ff244255;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.xhs-cs-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px #ff244266;
}

.xhs-cs-toggle:active {
    transform: translateY(0) scale(.94);
}

.xhs-cs-toggle.is-nudge {
    animation: xhsCsNudge .7s cubic-bezier(.3, 1.2, .5, 1);
}

@keyframes xhsCsNudge {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.16) rotate(-7deg); }
    45%  { transform: scale(.93) rotate(4deg); }
    70%  { transform: scale(1.06) rotate(-2deg); }
    100% { transform: scale(1); }
}

/* ------------------------------------------------------------
   客服卡片：默认隐藏（visibility + pointer-events，不占位、不进 Tab 序）
   展开时以图标为原点弹入，收回时反向缩回
   ------------------------------------------------------------ */
.xhs-cs-panel {
    position: absolute;
    left: 0;
    bottom: 68px;
    width: 260px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 12px 40px #0002;
    /* 缩放原点落在图标上方一点点，做出「从按钮里长出来」的感觉 */
    transform-origin: 27px calc(100% + 8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.82);
    /* 收起：先播完动画再真正隐藏（visibility 延迟到最后） */
    transition: opacity .18s ease,
                transform .38s cubic-bezier(.34, 1.46, .5, 1),
                visibility 0s linear .38s;
}

.xhs-cs.is-open .xhs-cs-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    /* 展开：visibility 立即生效，动画与过渡同时开始 */
    transition: opacity .14s ease,
                transform .42s cubic-bezier(.34, 1.46, .5, 1),
                visibility 0s;
    animation: xhsCsGlow .9s ease-out .06s;
}

/* 指向客服图标的小尖角（外层描边色由 border 表现，内层白底即面板底色） */
.xhs-cs-panel::after {
    content: '';
    position: absolute;
    left: 22px;
    bottom: -7px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    transform: rotate(45deg);
    border-radius: 0 0 3px 0;
}

/* 展开瞬间的一次性光晕：把视线引到左下角 */
@keyframes xhsCsGlow {
    0%   { box-shadow: 0 12px 40px #0002, 0 0 0 0 #ff24426b; }
    100% { box-shadow: 0 12px 40px #0002, 0 0 0 18px #ff244200; }
}

/* 二维码延迟弹入，形成两级节奏 */
.xhs-cs.is-open .xhs-cs-body img {
    animation: xhsCsImgIn .46s cubic-bezier(.34, 1.5, .5, 1) .1s both;
}

@keyframes xhsCsImgIn {
    from { opacity: 0; transform: scale(.9) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   卡片内容
   ------------------------------------------------------------ */
.xhs-cs-close {
    position: absolute;
    right: 10px;
    top: 8px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}

.xhs-cs-close:hover {
    color: #222;
    transform: rotate(90deg);
}

.xhs-cs h3 {
    margin: 0 24px 6px 0;
    color: #222;
}

.xhs-cs-sub,
.xhs-cs-body p {
    margin: 6px 0;
    color: #777;
    font-size: 13px;
}

.xhs-cs-body img {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin: 14px auto 10px;
}

.xhs-cs-wechat {
    font-weight: 700;
    color: #222 !important;
    text-align: center;
}

/* ------------------------------------------------------------
   无障碍：用户声明减少动效时，卡片直接显示/隐藏，不做缩放与抖动
   （.xhs-cs.is-open .xhs-cs-panel 优先级更高，必须一起覆盖）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .xhs-cs-toggle,
    .xhs-cs-panel,
    .xhs-cs.is-open .xhs-cs-panel {
        transition: none;
    }

    .xhs-cs-toggle.is-nudge,
    .xhs-cs.is-open .xhs-cs-panel,
    .xhs-cs.is-open .xhs-cs-body img {
        animation: none;
    }

    .xhs-cs-panel,
    .xhs-cs.is-open .xhs-cs-panel {
        transform: none;
    }
}

/* ------------------------------------------------------------
   小屏：与 css/corner-dock.css 的 --dock-x / --dock-y 保持同步
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    .xhs-cs {
        left: 14px;
        bottom: 14px;
    }

    .xhs-cs-panel {
        width: 240px;
    }
}