/* AI 选型助手 — 悬浮聊天窗口样式 * * 主题兼容性说明： * 1) 顶层重置：用 :where() 零特异性把所有后代样式回退到浏览器默认， * 抵消主题对 button / a / input / div 等元素的样式“污染”。 * 2) 关键可见属性（定位、背景、颜色、边框、层级等）统一加 !important， * 防止个别主题用 !important 覆盖导致图标不显示或错位。 * 3) 窗口显隐改用 visibility/opacity/pointer-events 切换，避免被 * 主题的 div { display: ... !important } 之类规则强制显示/隐藏。 * 4) 根节点使用超高 z-index + isolation 形成独立层叠上下文， * 配合 JS 将根节点挂载到（见 ai-assistant.js）， * 彻底脱离主题容器可能的 transform / overflow:hidden 裁剪。 */ /* 零特异性重置：抵消主题继承/元素样式污染 */ :where(#ssg-aia-root) :where(*, *::before, *::after) { all: revert; box-sizing: border-box !important; } /* 根容器：固定右下角 + 独立层叠上下文 */ #ssg-aia-root { position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 2147483646 !important; isolation: isolate; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important; line-height: 1.5 !important; } /* 抗主题覆盖兜底：部分主题/优化插件会用 button {display:none}、 [class*="chat"]{opacity:0}、visibility:hidden 等规则隐藏悬浮元素，这里对根节点与按钮的「可见性三要素」强制兜底，保证图标一定显示。 */ #ssg-aia-root, #ssg-aia-root.ssg-aia-left { display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; filter: none !important; clip: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; } #ssg-aia-fab { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; min-width: 44px !important; min-height: 44px !important; -webkit-appearance: none !important; appearance: none !important; } /* 左下角定位 */ #ssg-aia-root.ssg-aia-left { left: 20px !important; right: auto !important; } #ssg-aia-root.ssg-aia-left .ssg-aia-window { left: 0 !important; right: auto !important; } /* 悬浮按钮 */ #ssg-aia-fab { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 12px 18px !important; border: none !important; border-radius: 999px !important; background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap !important; cursor: pointer !important; outline: none !important; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important; transition: transform .15s ease, box-shadow .15s ease; } #ssg-aia-fab:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(79, 70, 229, 0.45) !important; } #ssg-aia-fab:active { transform: translateY(0) !important; } #ssg-aia-fab .ssg-aia-fab-icon { font-size: 18px !important; line-height: 1 !important; } #ssg-aia-fab .ssg-aia-fab-text { display: inline !important; } /* 聊天窗口（默认隐藏，用 visibility/opacity 切换，避免被 display 规则干扰） */ .ssg-aia-window { position: absolute !important; right: 0 !important; bottom: 70px !important; width: 420px !important; max-width: calc(100vw - 32px) !important; height: 600px !important; max-height: calc(100vh - 120px) !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } #ssg-aia-root.ssg-aia-open .ssg-aia-window { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .ssg-aia-window.expanded { width: 560px !important; height: 82vh !important; max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 120px) !important; } /* 头部 */ .ssg-aia-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; margin: 0 !important; background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #fff !important; } .ssg-aia-title { font-weight: 700 !important; font-size: 15px !important; color: #fff !important; } .ssg-aia-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; color: #fff !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; } .ssg-aia-header-actions { display: flex !important; align-items: center !important; gap: 2px !important; margin-left: auto !important; } .ssg-aia-icon-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 32px !important; height: 30px !important; margin: 0 !important; padding: 0 9px !important; background: rgba(255, 255, 255, 0.12) !important; border: none !important; color: #fff !important; font-size: 13px !important; line-height: 1 !important; border-radius: 8px !important; cursor: pointer !important; } .ssg-aia-icon-btn:hover { background: rgba(255, 255, 255, 0.28) !important; } /* 消息区 */ .ssg-aia-messages { flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 16px !important; margin: 0 !important; background: #f8fafc !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .ssg-aia-msg { max-width: 85% !important; margin: 0 !important; padding: 10px 13px !important; border-radius: 12px !important; font-size: 15px !important; line-height: 1.65 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: pre-wrap !important; } .ssg-aia-msg p { margin: 0 0 8px !important; padding: 0 !important; } .ssg-aia-msg p:last-child { margin-bottom: 0 !important; } .ssg-aia-msg ul, .ssg-aia-msg ol { margin: 6px 0 6px 18px !important; padding: 0 !important; } .ssg-aia-msg li { margin: 2px 0 !important; padding: 0 !important; } .ssg-aia-msg.user { align-self: flex-end !important; background: #4f46e5 !important; color: #fff !important; border: none !important; border-bottom-right-radius: 4px !important; } .ssg-aia-msg.bot { align-self: flex-start !important; background: #fff !important; color: #1f2937 !important; border: 1px solid #e5e7eb !important; border-bottom-left-radius: 4px !important; } .ssg-aia-msg.bot a { color: #4f46e5 !important; text-decoration: underline !important; } .ssg-aia-msg.bot strong { font-weight: 700 !important; } /* 推荐商品卡片（横向长方形：左缩略图，右名称+描述） */ .ssg-aia-cards { margin-top: 10px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .ssg-product-card { display: block !important; margin: 0 !important; border: 1px solid #e8ebf1 !important; background: #fff !important; border-radius: 12px !important; overflow: hidden !important; transition: box-shadow .15s ease, transform .15s ease; } .ssg-product-card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .12) !important; } .ssg-product-card > a { display: flex !important; align-items: stretch !important; text-decoration: none !important; color: inherit !important; } .ssg-product-card-thumb { flex: 0 0 100px !important; width: 100px !important; height: 100px !important; } .ssg-product-card-thumb img { width: 100px !important; height: 100px !important; object-fit: cover !important; display: block !important; } .ssg-product-card-body { flex: 1 1 auto !important; min-width: 0 !important; padding: 10px 12px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .ssg-product-card-title { font-size: 15px !important; font-weight: 700 !important; color: #1f2937 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ssg-product-card-desc { font-size: 13px !important; color: #6b7280 !important; line-height: 1.4 !important; margin-top: 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* 移动端缩略图 80x80 */ @media (max-width: 480px) { .ssg-product-card-thumb, .ssg-product-card-thumb img { flex-basis: 80px !important; width: 80px !important; height: 80px !important; } } /* 实体聚合页等无商品卡时的文本链接 */ .ssg-aia-textlink { display: inline-block !important; margin: 2px 0 !important; padding: 8px 12px !important; border: 1px solid #e8ebf1 !important; border-radius: 8px !important; background: #f8fafc !important; color: #2563eb !important; font-size: 13px !important; text-decoration: none !important; word-break: break-all !important; } .ssg-aia-textlink:hover { background: #eef2ff !important; } /* 加载状态 */ .ssg-aia-typing { align-self: flex-start !important; background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 10px 14px !important; margin: 0 !important; font-size: 13px !important; color: #9ca3af !important; } .ssg-aia-typing span { display: inline-block !important; animation: ssgAiaBlink 1.2s infinite both; } .ssg-aia-typing span:nth-child(2) { animation-delay: .2s; } .ssg-aia-typing span:nth-child(3) { animation-delay: .4s; } @keyframes ssgAiaBlink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } } /* 输入区 */ .ssg-aia-input { display: flex !important; gap: 8px !important; padding: 12px !important; margin: 0 !important; border-top: 1px solid #e5e7eb !important; background: #fff !important; } #ssg-aia-input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; resize: none !important; margin: 0 !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; padding: 9px 11px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.5 !important; color: #1f2937 !important; background: #fff !important; outline: none !important; box-shadow: none !important; } #ssg-aia-input:focus { border-color: #4f46e5 !important; } .ssg-aia-send { flex: 0 0 auto !important; border: none !important; cursor: pointer !important; background: #4f46e5 !important; color: #fff !important; border-radius: 10px !important; padding: 0 16px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; } .ssg-aia-send:hover { background: #4338ca !important; } .ssg-aia-send:disabled { opacity: .6 !important; cursor: default !important; } /* 底部报价按钮 */ .ssg-aia-footer { padding: 0 12px 12px !important; margin: 0 !important; background: #fff !important; } .ssg-aia-quote-btn { display: block !important; margin: 0 !important; text-align: center !important; background: #f59e0b !important; color: #fff !important; text-decoration: none !important; font-weight: 700 !important; font-size: 14px !important; padding: 10px !important; border-radius: 10px !important; } .ssg-aia-quote-btn:hover { background: #d97706 !important; } /* 快捷问题（产品/实体页个性化，窗口顶部） */ .ssg-aia-quick { display: none !important; flex-wrap: wrap !important; gap: 6px !important; padding: 10px 16px !important; margin: 0 !important; background: #f1f5f9 !important; border-bottom: 1px solid #e5e7eb !important; } .ssg-aia-quick-btn { display: inline-block !important; margin: 0 !important; border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #4338ca !important; border-radius: 999px !important; padding: 6px 12px !important; font-family: inherit !important; font-size: 12.5px !important; line-height: 1.4 !important; text-align: left !important; cursor: pointer !important; transition: background .15s ease; } .ssg-aia-quick-btn:hover { background: #e0e7ff !important; } /* 移动端自适应 */ @media (max-width: 480px) { #ssg-aia-root { right: 12px !important; bottom: 12px !important; } #ssg-aia-root.ssg-aia-left { left: 12px !important; right: auto !important; } #ssg-aia-fab .ssg-aia-fab-text { display: none !important; } .ssg-aia-window { position: fixed !important; right: 4% !important; left: 4% !important; margin: 0 auto !important; bottom: 0 !important; top: auto !important; width: 92% !important; max-width: 92% !important; height: 70vh !important; max-height: 70vh !important; border-radius: 16px 16px 0 0 !important; } .ssg-aia-window.expanded { right: 2% !important; left: 2% !important; width: 96% !important; max-width: 96% !important; height: 90vh !important; max-height: 90vh !important; } #ssg-aia-root.ssg-aia-left .ssg-aia-window { left: 4% !important; right: auto !important; } } /* 获客线索表单 */ .ssg-aia-lead { align-self: stretch !important; background: #fff !important; border: 1px solid #c7d2fe !important; border-radius: 12px !important; padding: 12px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .ssg-aia-lead-title { font-weight: 700 !important; color: #4338ca !important; font-size: 13.5px !important; margin: 0 0 2px !important; } .ssg-aia-lead-input { width: 100% !important; margin: 0 !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; padding: 8px 10px !important; font-family: inherit !important; font-size: 13px !important; line-height: 1.5 !important; color: #1f2937 !important; background: #fff !important; outline: none !important; resize: none !important; box-sizing: border-box !important; } .ssg-aia-lead-input:focus { border-color: #4f46e5 !important; } .ssg-aia-lead-submit { border: none !important; cursor: pointer !important; background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #fff !important; border-radius: 8px !important; padding: 9px !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 600 !important; text-transform: none !important; } .ssg-aia-lead-submit:hover { opacity: .92 !important; } .ssg-aia-lead-msg { font-size: 12.5px !important; color: #4b5563 !important; min-height: 16px !important; margin: 0 !important; } .ssg-aia-lead-msg.ssg-aia-error { color: #dc2626 !important; } .ssg-aia-lead-success { font-size: 13px !important; color: #15803d !important; font-weight: 600 !important; text-align: center !important; padding: 6px 0 !important; margin: 0 !important; } /* 用户反馈（有帮助 / 没帮助） */ .ssg-aia-feedback { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px dashed #e5e7eb !important; font-size: 12px !important; } .ssg-aia-fb-label { color: #6b7280 !important; margin-right: 2px !important; } .ssg-aia-fb-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; border: 1px solid #d1d5db !important; background: #f9fafb !important; color: #374151 !important; border-radius: 999px !important; padding: 4px 12px !important; font-size: 12px !important; line-height: 1.4 !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease; } .ssg-aia-fb-btn:hover { background: #eef2ff !important; border-color: #a5b4fc !important; } .ssg-aia-fb-form { display: flex !important; align-items: center; gap: 6px !important; width: 100% !important; margin-top: 6px !important; } .ssg-aia-fb-input { flex: 1 1 auto !important; min-width: 0 !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; padding: 6px 10px !important; font-size: 12px !important; font-family: inherit !important; } .ssg-aia-fb-submit { border: none !important; background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #fff !important; border-radius: 8px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; } .ssg-aia-fb-thanks { color: #047857 !important; font-weight: 600 !important; }