/* ========================================================================== AI 助手插件 · 前台客服悬浮窗（买家侧） 设计权威：artifacts/ai-assistant-handoff-20260928/demo.html + states.html 作用域：.mall-ai-widget（根元素同时携带 .chat-win），全部规则限定根类内。 布局：PC 右下固定 392×618；手机（≤600px）底部 78dvh 弹层，PC/手机同一份 HTML。 深色：跟随 html[data-theme="dark"] 做变量覆盖（前台暂无该选择器在用，预写兼容）。 ========================================================================== */ .mall-ai-widget { /* ---- 作用域变量（仅本根内生效，不污染页面） ---- */ --aiw-accent: var(--store-accent, #2f63ff); --aiw-accent-deep: #1d4fd7; --aiw-grad: linear-gradient(135deg, #3d6bff 0%, #7a3df0 100%); --aiw-ink: #1c2333; --aiw-ink-2: #4a5468; --aiw-ink-3: #8a94a8; --aiw-line: #e6eaf2; --aiw-panel: #fff; --aiw-body: #f3f5fa; --aiw-field: #f2f4f9; --aiw-quote-bg: #f5f7ff; --aiw-green: #0da76a; --aiw-green-soft: #e7f8f1; --aiw-red: #e5453c; --aiw-red-soft: #fdeeed; --aiw-red-line: #f3c1be; --aiw-amber: #b06a00; --aiw-amber-soft: #fff4e5; --aiw-amber-line: #ffd9a3; --aiw-violet: #7c5cff; --aiw-violet-soft: #f1edff; --aiw-chip-line: #c9d6ff; --aiw-avatar-fallback: #c3ccdd; --aiw-typing-dot: #b9c2d8; position: fixed; right: 24px; bottom: 24px; z-index: 70; /* 高于前台悬浮工具栏(z60) */ width: 392px; height: 618px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; background: var(--aiw-panel); border: 1px solid var(--aiw-line); border-radius: 18px; box-shadow: 0 26px 70px rgba(15, 23, 55, .35); color: var(--aiw-ink); font-size: 13px; line-height: 1.5; } /* 宿主隔离：PC 前台 storefront.css 的 body > * 全局规则（position:relative;z-index:1）特异性 高于单类根选择器，会把根盖成相对定位落出视口；双类还原固定定位与层级，几何数值不变。 挂进原生商品 dialog 时同理：dialog 内 z-index 只需高于其吸底购买条（z30）。 */ .mall-ai-widget.chat-win { position: fixed; z-index: 70; } .mall-ai-widget[hidden], .mall-ai-widget [hidden] { display: none !important; } .mall-ai-widget *, .mall-ai-widget *::before, .mall-ai-widget *::after { box-sizing: border-box; } .mall-ai-widget svg { width: 16px; height: 16px; flex: none; } .mall-ai-widget button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; } .mall-ai-widget :focus-visible { outline: 2px solid var(--aiw-accent); outline-offset: 2px; } /* 最小化：JS 置 data-min="true"，只留头部 */ .mall-ai-widget[data-min="true"] { height: auto; } .mall-ai-widget[data-min="true"] :is(.cw-body, .cw-foot) { display: none; } /* 手机弹层拖动手柄（PC 隐藏） */ .mall-ai-widget .grab { display: none; width: 42px; height: 5px; border-radius: 3px; background: #d7dce8; margin: 8px auto 2px; flex: none; } /* ---- 头部 ---- */ .mall-ai-widget .cw-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--aiw-grad); color: #fff; } .mall-ai-widget .cw-head .face { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; } .mall-ai-widget .cw-head .face svg { width: 19px; height: 19px; } .mall-ai-widget .cw-head .who { flex: 1; min-width: 0; } .mall-ai-widget .cw-head .who b { display: block; font-size: 14px; } .mall-ai-widget .cw-head .who span { display: flex; align-items: center; gap: 5px; font-size: 11px; opacity: .9; } .mall-ai-widget .cw-head .who span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex: none; } .mall-ai-widget .cw-head .act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; opacity: .85; flex: none; } .mall-ai-widget .cw-head .act:hover { background: rgba(255, 255, 255, .14); opacity: 1; } /* ---- 消息区 ---- */ .mall-ai-widget .cw-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 13px 12px; background: var(--aiw-body); } .mall-ai-widget .sys { align-self: center; font-size: 11px; color: var(--aiw-ink-3); background: #e8ecf5; padding: 3px 12px; border-radius: 999px; max-width: 92%; text-align: center; } .mall-ai-widget .sys.hand { background: var(--aiw-amber-soft); color: var(--aiw-amber); border: 1px solid var(--aiw-amber-line); } .mall-ai-widget .sys.fuse { background: var(--aiw-red-soft); color: var(--aiw-red); border: 1px solid var(--aiw-red-line); } .mall-ai-widget .cw-closed { align-self: center; font-size: 11px; color: var(--aiw-ink-3); background: #e8ecf5; padding: 3px 12px; border-radius: 999px; } .mall-ai-widget .msg { display: flex; gap: 8px; max-width: 92%; } .mall-ai-widget .msg .av { width: 30px; height: 30px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: var(--aiw-avatar-fallback); } .mall-ai-widget .msg .av svg { width: 15px; height: 15px; } .mall-ai-widget .msg .bubble { padding: 8px 11px; border-radius: 4px 13px 13px 13px; font-size: 12.5px; line-height: 1.62; box-shadow: 0 1px 2px rgba(20, 30, 60, .06); overflow-wrap: anywhere; } .mall-ai-widget .msg.ai .av { background: var(--aiw-grad); } .mall-ai-widget .msg.ai .bubble { background: var(--aiw-panel); border: 1px solid var(--aiw-line); color: var(--aiw-ink); } .mall-ai-widget .msg.me { align-self: flex-end; flex-direction: row-reverse; } .mall-ai-widget .msg.me .bubble { background: var(--aiw-accent); color: #fff; border-radius: 13px 4px 13px 13px; } .mall-ai-widget .msg .ai-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--aiw-violet); background: var(--aiw-violet-soft); border-radius: 5px; padding: 1px 6px; margin-bottom: 5px; } .mall-ai-widget .msg .quote { display: block; margin-top: 6px; padding: 5px 9px; background: var(--aiw-quote-bg); border-left: 3px solid var(--aiw-accent); border-radius: 6px; font-size: 11px; color: var(--aiw-ink-2); } /* AI 输入中（加载态，不锁输入栏） */ .mall-ai-widget .msg.ai.typing .bubble { display: flex; gap: 5px; align-items: center; padding: 12px 14px; } .mall-ai-widget .msg.ai.typing .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--aiw-typing-dot); animation: aiw-tb 1.1s infinite; } .mall-ai-widget .msg.ai.typing .tdot:nth-child(2) { animation-delay: .18s; } .mall-ai-widget .msg.ai.typing .tdot:nth-child(3) { animation-delay: .36s; } @keyframes aiw-tb { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mall-ai-widget .msg.ai.typing .tdot { animation: none; } } /* 发送失败与重发（仅失败气泡，不清草稿） */ .mall-ai-widget .msg.me.failed .bubble { background: #8b95ab; opacity: .85; } .mall-ai-widget .msg-retry { align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--aiw-red); background: var(--aiw-red-soft); border: 1px solid var(--aiw-red-line); border-radius: 999px; padding: 3px 11px; } .mall-ai-widget .msg-retry svg { width: 12px; height: 12px; } /* AI 答复反馈按钮（仅 ai_active 态渲染） */ .mall-ai-widget .fb { display: flex; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--aiw-line); } .mall-ai-widget .fb button { font-size: 11px; font-weight: 600; border-radius: 7px; padding: 4px 11px; } .mall-ai-widget .fb .fb-ok { background: var(--aiw-green-soft); color: var(--aiw-green); } .mall-ai-widget .fb .fb-no { border: 1px solid var(--aiw-line); color: var(--aiw-ink-2); } .mall-ai-widget .fb .fb-no[aria-pressed="true"] { background: var(--aiw-red-soft); color: var(--aiw-red); border-color: var(--aiw-red-line); } .mall-ai-widget .fb .fb-ok[aria-pressed="true"] { outline: 1px solid var(--aiw-green); } /* 首次打开空态（AI 未启用时不渲染 AI 标识，由 JS 换人工留言文案） */ .mall-ai-widget .cw-empty { margin: auto; text-align: center; padding: 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .mall-ai-widget .cw-empty .e-face { width: 52px; height: 52px; border-radius: 16px; background: var(--aiw-grad); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; } .mall-ai-widget .cw-empty .e-face svg { width: 26px; height: 26px; } .mall-ai-widget .cw-empty b { font-size: 14px; } .mall-ai-widget .cw-empty p { margin: 0; font-size: 12px; color: var(--aiw-ink-3); line-height: 1.7; } .mall-ai-widget .cw-empty .e-qs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .mall-ai-widget .cw-empty .e-qs button { font-size: 11.5px; color: var(--aiw-accent-deep); background: var(--aiw-panel); border: 1px solid var(--aiw-chip-line); padding: 5px 11px; border-radius: 999px; } /* 游客登录引导 */ .mall-ai-widget .need-login { margin: auto; text-align: center; padding: 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 9px; } .mall-ai-widget .need-login .n-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--aiw-violet-soft); color: var(--aiw-violet); display: flex; align-items: center; justify-content: center; } .mall-ai-widget .need-login .n-ico svg { width: 22px; height: 22px; } .mall-ai-widget .need-login b { font-size: 13.5px; } .mall-ai-widget .need-login p { margin: 0; font-size: 12px; color: var(--aiw-ink-3); line-height: 1.7; } .mall-ai-widget .need-login .n-btn { background: var(--aiw-accent); color: #fff; font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 8px 26px; } /* ---- 底部：快捷短语 + 输入栏 ---- */ /* 宿主隔离：PC/mobile storefront 裸 footer 规则（display:flex; padding:28px 100px; 深色底浅色字） 与商品 dialog footer 规则（justify-content:flex-end）会命中本