/* ============================================================
   全站左下角「信息坞」——客服图标 + 公告对话气泡
   说明：
   1. 用一组变量统一定义左下角坐标，客服与公告共用，避免错位；
   2. 把公告原本的「右下角悬浮卡片」形态，改成客服图标右侧的对话气泡
      （尖角向左指向图标，气泡朝屏幕中间展开）；
   3. 客服面板展开时气泡自动隐藏，两者不再互相遮挡。
   依赖：由 js/navigation.js 全站注入，必须晚于 site-announcement.css 加载。
   ============================================================ */

:root {
    --dock-x: 20px;
    --dock-y: 24px;
    --dock-size: 54px;
    --dock-gap: 12px;
    --dock-radius: 14px;
}

/* ------------------------------------------------------------
   公告：由右下角卡片改为客服右侧的对话气泡
   ------------------------------------------------------------ */
.xhs-ann--corner {
    right: auto;
    left: calc(var(--dock-x) + var(--dock-size) + var(--dock-gap));
    bottom: var(--dock-y);
    width: min(272px, calc(100vw - var(--dock-x) - var(--dock-size) - var(--dock-gap) - 24px));
    padding: 13px 30px 13px 15px;
    border: 1px solid var(--xhs-line, #ececec);
    border-radius: var(--dock-radius);
    border-bottom-left-radius: 6px;
    background: #fff;
    color: var(--xhs-text, #1f1f1f);
    box-shadow: 0 10px 28px rgba(31, 31, 31, .13);
    animation: xhsAnnBubbleIn .3s cubic-bezier(.2, .8, .25, 1) both;
    transition: transform .2s ease, visibility .2s ease;
}

/* 指向客服图标的小尖角：外层描边色，内层白底 */
.xhs-ann--corner::before,
.xhs-ann--corner::after {
    content: '';
    position: absolute;
    left: -7px;
    bottom: 21px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-left: 0;
    border-right-color: var(--xhs-line, #ececec);
}

.xhs-ann--corner::after {
    left: -6px;
    border-right-color: #fff;
}

@keyframes xhsAnnBubbleIn {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 气泡内文字收紧，整体控制在三行以内 */
.xhs-ann--corner .xhs-ann-title {
    padding-left: 9px;
    font-size: 13px;
    line-height: 1.45;
}

.xhs-ann--corner .xhs-ann-title::before {
    height: 12px;
    margin-top: -6px;
}

.xhs-ann--corner .xhs-ann-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.55;
}

.xhs-ann--corner .xhs-ann-link {
    margin-top: 1px;
    font-size: 12px;
}

.xhs-ann--corner .xhs-ann-close {
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    line-height: 20px;
}

/* ------------------------------------------------------------
   客服面板展开时，气泡让位 —— 两者互斥，不再互相遮挡
   （不支持 :has() 的浏览器降级为并存，不影响可用性）
   ------------------------------------------------------------ */
body:has(.xhs-cs.is-open) .xhs-ann--corner {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

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

    .xhs-ann--corner {
        width: min(232px, calc(100vw - var(--dock-x) - var(--dock-size) - var(--dock-gap) - 20px));
        padding: 11px 28px 11px 13px;
    }
}