/* =========================================================
   极简「直达聊天卡片」客服挂件
   ========================================================= */

/* ── 外层容器（bottom/left/right 由 JS inline style 动态设置） ── */

#my-b2b-chat-widget {
    position: fixed;
    bottom: 20px;  /* JS inline style 会覆盖此默认值 */
    right: 20px;   /* JS inline style 会覆盖此默认值 */
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

#my-b2b-chat-widget .wgt-card,
#my-b2b-chat-widget .wgt-toggle {
    pointer-events: auto;
}

#my-b2b-chat-widget.wgt-pos-left {
    right: auto;
    left: 20px;   /* JS inline style 会覆盖此默认值 */
    align-items: flex-start;
}

/* ── 聊天卡片 ─────────────────────────────────────────────── */

.wgt-card {
    width: 290px;
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 10px 40px rgba( 0, 0, 0, .16 ),
        0 2px  10px rgba( 0, 0, 0, .08 );
    overflow: hidden;
    transform-origin: bottom right;
    animation: wgt-card-in .38s cubic-bezier( .34, 1.56, .64, 1 ) forwards;
    transition: opacity .22s ease, transform .22s ease;
}

#my-b2b-chat-widget.wgt-pos-left .wgt-card {
    transform-origin: bottom left;
}

@keyframes wgt-card-in {
    from {
        opacity: 0;
        transform: scale( .82 ) translateY( 20px );
    }
    to {
        opacity: 1;
        transform: scale( 1 ) translateY( 0 );
    }
}

/* 收起状态（点击 X 后） */
.wgt-card--hidden {
    opacity: 0 !important;
    transform: scale( .88 ) translateY( 10px ) !important;
    pointer-events: none !important;
}

/* ── 卡片头部（主题色背景） ─────────────────────────────────── */

.wgt-card-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 14px 15px;
    position: relative;
}

.wgt-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba( 255, 255, 255, .2 );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wgt-card-title {
    flex: 1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

.wgt-card-close {
    background: rgba( 255, 255, 255, .18 );
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .15s;
    outline: none;
}

.wgt-card-close:hover {
    background: rgba( 255, 255, 255, .34 );
}

/* ── 卡片正文 ─────────────────────────────────────────────── */

.wgt-card-body {
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.wgt-card-text {
    margin: 0 0 16px;
    font-size: 14px;
    color: #555;
    line-height: 1.65;
    word-break: break-word;
}

/* ── 多渠道图标行 ──────────────────────────────────────────── */

.wgt-channel-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
}

.wgt-channel-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 4px 4px;
    border-radius: 12px;
    transition: background .15s, transform .18s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 52px;
}

.wgt-channel-icon-btn:hover {
    background: rgba( 0, 0, 0, .04 );
    transform: translateY( -3px );
}

.wgt-channel-icon-btn:active {
    transform: scale( .91 );
}

.wgt-ch-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 2px 8px rgba( 0, 0, 0, .20 ),
        0 1px 3px rgba( 0, 0, 0, .10 );
    transition: box-shadow .18s, transform .18s;
}

.wgt-channel-icon-btn:hover .wgt-ch-icon-circle {
    box-shadow:
        0 5px 16px rgba( 0, 0, 0, .28 ),
        0 2px  6px rgba( 0, 0, 0, .14 );
    transform: scale( 1.06 );
}

.wgt-ch-icon-label {
    font-size: 10px;
    color: #666;
    text-align: center;
    line-height: 1.2;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: -.01em;
}

/* CTA 按钮（保留以备兼容，新版已移除） */
.wgt-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 11px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    box-sizing: border-box;
    transition: opacity .15s, transform .15s;
    outline: none;
}

.wgt-card-cta:hover {
    opacity: .88;
    transform: translateY( -2px );
}

.wgt-card-cta:active {
    transform: translateY( 0 );
    opacity: .95;
}

.wgt-cta-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .92;
}

.wgt-cta-label {
    flex: 1;
    text-align: left;
}

.wgt-cta-arrow {
    flex-shrink: 0;
    opacity: .8;
}

/* ── 圆形主控按钮 ─────────────────────────────────────────── */

.wgt-toggle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 20px rgba( 0, 0, 0, .28 ),
        0 1px  6px rgba( 0, 0, 0, .12 );
    flex-shrink: 0;
    outline: none;
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

.wgt-toggle:hover {
    transform: scale( 1.09 );
    box-shadow:
        0 7px 26px rgba( 0, 0, 0, .34 ),
        0 2px  8px rgba( 0, 0, 0, .14 );
}

.wgt-toggle:active {
    transform: scale( .94 );
}

/* ── 红点角标 ─────────────────────────────────────────────── */

.wgt-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 11px;
    height: 11px;
    background: #f44336;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: wgt-badge-pulse 2.2s ease-in-out infinite;
}

@keyframes wgt-badge-pulse {
    0%, 100% {
        transform: scale( 1 );
        box-shadow: 0 0 0 0 rgba( 244, 67, 54, .55 );
    }
    50% {
        transform: scale( 1.12 );
        box-shadow: 0 0 0 5px rgba( 244, 67, 54, 0 );
    }
}

/* ── 移动端适配 ────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    /* bottom/right/left 由 JS inline style 动态控制，此处仅设最大卡片宽 */
    .wgt-card {
        width: calc( 100vw - 28px );
        max-width: 310px;
    }

    .wgt-toggle {
        width: 52px;
        height: 52px;
    }

    .wgt-channel-icons {
        gap: 8px 6px;
    }

    .wgt-ch-icon-circle {
        width: 40px;
        height: 40px;
    }

    .wgt-ch-icon-label {
        font-size: 9.5px;
        max-width: 44px;
    }
}

/* =========================================================
   客服挂件 — 询盘构建器弹窗（Contact Us）
   z-index 高于 #my-b2b-chat-widget (999999)
   ========================================================= */

.my-b2b-crm-inquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.my-b2b-crm-inquiry-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, .55 );
    cursor: pointer;
}

.my-b2b-crm-inquiry-modal__dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: min( 90vh, 720px );
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba( 0, 0, 0, .28 );
    animation: mbi-modal-in .28s cubic-bezier( .34, 1.2, .64, 1 ) forwards;
}

@keyframes mbi-modal-in {
    from {
        opacity: 0;
        transform: translateY( 16px ) scale( .96 );
    }
    to {
        opacity: 1;
        transform: translateY( 0 ) scale( 1 );
    }
}

.my-b2b-crm-inquiry-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s, color .15s;
    z-index: 2;
}

.my-b2b-crm-inquiry-modal__close:hover {
    background: rgba( 0, 0, 0, .06 );
    color: #333;
}

.my-b2b-crm-inquiry-modal__title {
    margin: 0;
    padding: 22px 48px 12px 22px;
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
    flex-shrink: 0;
}

.my-b2b-crm-inquiry-modal__body {
    padding: 0 22px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media ( max-width: 480px ) {
    .my-b2b-crm-inquiry-modal__dialog {
        max-height: 85vh;
    }
}