/* ============================================================
   AI 智能客服挂件（替换右下角 WhatsApp 悬浮按钮）
   ============================================================ */

.cb-ai-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--color-secondary, #192a44);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    overflow: hidden;
    transition: padding .25s ease, box-shadow .25s ease;
    font: 600 15px/1 'Roboto', sans-serif;
}
.cb-ai-launcher__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-ai-launcher__label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .25s ease, opacity .2s ease, padding .25s ease;
}
.cb-ai-launcher:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, .32); }
.cb-ai-launcher:hover .cb-ai-launcher__label { max-width: 180px; opacity: 1; padding-right: 20px; }
@media (hover: none) {
    .cb-ai-launcher__label { max-width: 180px; opacity: 1; padding-right: 20px; }
}
.cb-ai-launcher.is-hidden { display: none; }

/* 与吸底购买条 / Cookie 横幅避让（沿用 WhatsApp 按钮的规则） */
body.cb-pp-has-stickybar .cb-ai-launcher { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) { body.cb-pp-has-stickybar .cb-ai-launcher { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1051px) { body.cb-pp-has-stickybar .cb-ai-launcher { bottom: 20px; } }
body.cb-cookie-open .cb-ai-launcher { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) { body.cb-cookie-open .cb-ai-launcher { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- 面板 ---------- */
.cb-ai-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px); /* 动态视口:排除移动端地址栏,避免底部输入框被顶出屏幕 */
    display: none;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
    font-family: 'Roboto', sans-serif;
}
.cb-ai-panel.is-open { display: flex; }

/* 放大态：面板变大并居中显示（桌面端） */
.cb-ai-panel.is-max {
    width: min(920px, calc(100vw - 48px));
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
}

.cb-ai-panel__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-secondary, #192a44);
    color: #fff;
}
.cb-ai-panel__title { font: 600 16px/1.2 'Roboto', sans-serif; margin: 0; }
.cb-ai-panel__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-ai-panel__logo { height: 26px; width: auto; max-width: 130px; display: block; flex: 0 0 auto; object-fit: contain; }
.cb-ai-panel__close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    opacity: .85;
}
.cb-ai-panel__close:hover { opacity: 1; }

/* 头部右侧操作按钮组（放大 / 关闭） */
.cb-ai-panel__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cb-ai-panel__expand {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
    opacity: .85;
    display: flex;
    align-items: center;
}
.cb-ai-panel__expand:hover { opacity: 1; }

.cb-ai-panel__body {
    flex: 1 1 auto;
    min-height: 0; /* 允许消息区在 flex 列中收缩,保证输入框(foot)始终可见 */
    overflow-y: auto;
    padding: 16px;
    background: var(--cb-paper, #f7f6f3);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cb-ai-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.cb-ai-msg--bot { align-self: flex-start; background: #fff; color: #1c2430; border: 1px solid #e7e4dd; border-bottom-left-radius: 4px; }
.cb-ai-msg--user { align-self: flex-end; background: var(--color-primary, #bc994b); color: #fff; border-bottom-right-radius: 4px; }
.cb-ai-msg--typing { color: #8a8a8a; font-style: italic; }

/* 机器人气泡内的富文本(受控 markdown) */
.cb-ai-msg--bot { white-space: normal; }
.cb-ai-msg--bot strong { font-weight: 700; color: var(--color-secondary, #192a44); }
.cb-ai-msg--bot em { font-style: italic; }
.cb-ai-msg--bot a { color: var(--color-primary, #bc994b); text-decoration: underline; word-break: break-word; }
.cb-ai-msg--bot ul { margin: 6px 0 2px; padding-left: 18px; }
.cb-ai-msg--bot li { margin: 3px 0; }

/* 商品推荐卡（图 + 名称 + 简介 + 价格） */
.cb-ai-products { align-self: flex-start; width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.cb-ai-product {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e7e4dd;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #1c2430;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cb-ai-product:hover { border-color: var(--color-primary, #bc994b); box-shadow: 0 6px 18px rgba(25, 42, 68, .10); transform: translateY(-1px); }
.cb-ai-product__img { width: 84px; align-self: stretch; object-fit: cover; flex: 0 0 auto; background: #f0ede6; }
.cb-ai-product__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.cb-ai-product__name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--color-secondary, #192a44); }
.cb-ai-product__desc {
    font-size: 12px; color: #6b6b6b; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cb-ai-product__bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
.cb-ai-product__price { font-size: 14px; font-weight: 700; color: var(--color-primary, #bc994b); white-space: nowrap; }
.cb-ai-product__go { font-size: 12px; font-weight: 600; color: var(--color-primary, #bc994b); white-space: nowrap; }

/* 转人工 */
.cb-ai-handoff { align-self: flex-start; max-width: 90%; display: flex; flex-wrap: wrap; gap: 8px; }
.cb-ai-handoff__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}
.cb-ai-handoff__btn--wa { background: #25D366; }
.cb-ai-handoff__btn--mail { background: var(--color-secondary, #192a44); }

.cb-ai-panel__foot {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e7e4dd;
    background: #fff;
}
.cb-ai-panel__input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid #d8d4cc;
    border-radius: 20px;
    padding: 10px 14px;
    font: 400 14px/1.4 'Roboto', sans-serif;
    max-height: 96px;
    outline: none;
}
.cb-ai-panel__input:focus { border-color: var(--color-primary, #bc994b); }
.cb-ai-panel__send {
    flex: 0 0 auto;
    align-self: flex-end;
    border: 0;
    border-radius: 20px;
    padding: 10px 16px;
    background: var(--color-primary, #bc994b);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.cb-ai-panel__send:disabled { opacity: .55; cursor: default; }

@media (max-width: 600px) {
    .cb-ai-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;            /* 老浏览器兜底 */
        height: 100dvh;          /* 动态视口:占满真实可见高度 */
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    /* 输入栏避让底部安全区(刘海/手势条) */
    .cb-ai-panel__foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    /* 手机端本就全屏,放大按钮无意义 */
    .cb-ai-panel__expand { display: none; }
    /* 手机端忽略放大态,保持全屏 */
    .cb-ai-panel.is-max { right: 0; bottom: 0; transform: none; width: 100vw; height: 100dvh; }
    .cb-ai-launcher { right: 14px; bottom: 14px; height: 52px; }
    .cb-ai-launcher__icon { width: 52px; height: 52px; }
}

/* ---------- 人工客服台：客服气泡 / 系统提示 / 登录 gate ---------- */
.cb-ai-msg--agent { border-color: var(--color-primary, #bc994b); }
.cb-ai-msg__who {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--color-primary, #bc994b);
    margin-bottom: 3px;
}
.cb-ai-msg__text { white-space: normal; }
.cb-ai-msg__text strong { font-weight: 700; color: var(--color-secondary, #192a44); }
.cb-ai-msg__text a { color: var(--color-primary, #bc994b); text-decoration: underline; word-break: break-word; }
.cb-ai-msg__text ul { margin: 6px 0 2px; padding-left: 18px; }

.cb-ai-system {
    align-self: center;
    max-width: 90%;
    text-align: center;
    font-size: 12px;
    color: #8a8378;
    background: #efece5;
    border-radius: 12px;
    padding: 5px 12px;
}

.cb-ai-gate {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px dashed var(--color-primary, #bc994b);
    border-radius: 14px;
    text-align: center;
}
.cb-ai-gate__text { font-size: 13px; color: #4a4a4a; line-height: 1.5; }
.cb-ai-gate__btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 20px;
    background: var(--color-secondary, #192a44);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.cb-ai-gate__btn:hover { background: var(--color-primary, #bc994b); }