/* PINGGO 首页 AI 选购对话式入口 2.9.42 轮播后、装置分类前；全宽区块（padding 52px 4% 64px，移动 42px 16px 48px）， 居中标题区 + 全宽聊天卡（min(1000px,100%)）。焦点环仅键盘模态（同 2.9.39 方案）。 */ .pinggo-chat-entry { background: #fff; padding: 52px 4% 0; color: #111; } .pinggo-chat-entry * { box-sizing: border-box; letter-spacing: 0; } .pinggo-chat-entry__inner { width: 100%; margin: auto; } .pinggo-chat-entry__intro { max-width: 640px; margin: 0 auto 28px; text-align: center; } .pinggo-chat-entry__eyebrow { margin: 0 0 10px; font-size: 16px; font-weight: 500; line-height: 1.5; color: #111; } .pinggo-chat-entry__intro h2, .pinggo-chat-entry__intro h1 { margin: 0 0 12px; font-size: 44px; font-weight: 600; line-height: 1.15; color: #111; } .pinggo-chat-entry__sub { margin: 0 auto; max-width: 56ch; font-size: 16px; line-height: 1.75; color: #555; } .pinggo-chat-entry__card { width: min(1000px, 100%); margin: 0 auto; background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 12px 32px rgba(17, 17, 17, .06); overflow: hidden; } .pinggo-chat-entry__cardhead { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid #f0f0f0; } .pinggo-chat-entry__spark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(64, 92, 245, .08); } .pinggo-chat-entry__titles h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: #111; } .pinggo-chat-entry__titles p { margin: 1px 0 0; font-size: 11px; line-height: 1.5; color: #999; } .pinggo-chat-entry__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 340px; overflow-y: auto; } .pinggo-chat-entry__bubble { margin: 0; max-width: 72%; padding: 11px 14px; font-size: 14px; line-height: 1.7; border-radius: 12px; } .pinggo-chat-entry__bubble--assistant { align-self: flex-start; background: #f2f3f7; color: #222; border-top-left-radius: 4px; } .pinggo-chat-entry__bubble--user { align-self: flex-end; background: #405cf5; color: #fff; border-top-right-radius: 4px; } .pinggo-chat-entry__bubble--typing { display: flex; gap: 5px; padding: 14px; } .pinggo-chat-entry__bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: #b9bdc9; animation: pinggo-chat-dot 1s infinite ease-in-out; } .pinggo-chat-entry__bubble--typing span:nth-child(2) { animation-delay: .15s; } .pinggo-chat-entry__bubble--typing span:nth-child(3) { animation-delay: .3s; } @keyframes pinggo-chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .pinggo-chat-entry__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .pinggo-chat-entry__chip { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; background: #fff; border: 1px solid #d9dce3; border-radius: 999px; color: #111 !important; font-size: 13px; line-height: 1.4; font-family: inherit; text-decoration: none !important; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .pinggo-chat-entry__chip:hover { border-color: #405cf5; } .pinggo-chat-entry__kbd .pinggo-chat-entry__chip:focus-visible, .pinggo-chat-entry__kbd .pinggo-chat-entry__cta:focus-visible { outline: 2px solid #405cf5; outline-offset: 2px; } .pinggo-chat-entry__cta { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 18px; background: #405cf5; border: 1px solid #405cf5; border-radius: 999px; color: #fff !important; font-size: 13px; font-weight: 500; line-height: 1.4; font-family: inherit; text-decoration: none !important; transition: background .2s ease; } .pinggo-chat-entry__cta:hover { background: #334bdb; } .pinggo-chat-entry__chips--actions { padding: 2px 0 6px; } /* 主题全局 a/button/input:focus-visible 带 !important 光圈（macOS 完整键盘取用下鼠标点击也命中）， 卡片内一律重置；键盘焦点环仅经 .pinggo-chat-entry__kbd 显示（与生产 2.9.39 同方案）。 */ html body.pinggo-storefront .pinggo-chat-entry a:focus, html body.pinggo-storefront .pinggo-chat-entry a:focus-visible, html body.pinggo-storefront .pinggo-chat-entry button:focus, html body.pinggo-storefront .pinggo-chat-entry button:focus-visible, html body.pinggo-storefront .pinggo-chat-entry input:focus, html body.pinggo-storefront .pinggo-chat-entry input:focus-visible { outline: 0 !important; box-shadow: none !important; } html body.pinggo-storefront .pinggo-chat-entry__kbd .pinggo-chat-entry__chip:focus-visible, html body.pinggo-storefront .pinggo-chat-entry__kbd .pinggo-chat-entry__cta:focus-visible { outline: 2px solid #405cf5 !important; outline-offset: 2px !important; box-shadow: none !important; } html body.pinggo-storefront .pinggo-chat-entry__kbd .pinggo-chat-entry__send:focus-visible { outline: 2px solid rgba(255, 255, 255, .9) !important; outline-offset: -2px !important; box-shadow: none !important; } .pinggo-chat-entry__inputrow { display: flex; align-items: center; gap: 10px; margin: 0 22px 8px; padding: 8px 8px 8px 16px; border: 1px solid transparent; border-radius: 999px; background: transparent; transition: border-color .2s ease, box-shadow .2s ease; } .pinggo-chat-entry__inputrow:focus-within { border-color: #405cf5; box-shadow: 0 0 0 3px rgba(64, 92, 245, .12); } /* Theme/WC global input borders leak through the snapshot; lock ours. */ html body.pinggo-storefront .pinggo-chat-entry__input { border: 0 !important; outline: 0 !important; box-shadow: none !important; } .pinggo-chat-entry__input { flex: 1 1 auto; min-width: 0; background: transparent; font-size: 14px; color: #111; padding: 4px 0; } .pinggo-chat-entry__input::placeholder { color: #a2a6b0; } .pinggo-chat-entry__send { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; background: #405cf5; border: 0; border-radius: 50%; cursor: pointer; transition: background .2s ease; } /* 2.9.56: voice input button — native Web Speech API */ .pinggo-chat-entry__mic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; background: transparent; border: 1px solid #d9dce3; border-radius: 50%; color: #59626e; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .pinggo-chat-entry__mic:hover { border-color: #b9bfca; color: #111; } .pinggo-chat-entry__mic:disabled { opacity: .45; cursor: not-allowed; } .pinggo-chat-entry__mic.is-listening { background: #2475ff; border-color: #2475ff; color: #fff; animation: pinggo-chat-mic-pulse 1.6s ease-out infinite; } @keyframes pinggo-chat-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(36,117,255,.38); } 70% { box-shadow: 0 0 0 12px rgba(36,117,255,0); } 100% { box-shadow: 0 0 0 0 rgba(36,117,255,0); } } .pinggo-chat-entry__mic-note { margin: 6px 22px 0; font-size: 11px; line-height: 1.6; color: #737d8b; text-align: center; } .pinggo-chat-entry__send:hover { background: #334bdb; } .pinggo-chat-entry__foot { margin: 0; padding: 0 22px 16px; font-size: 11px; line-height: 1.6; color: #9aa0ab; text-align: center; }@media (max-width: 750px) { .pinggo-chat-entry { padding: 42px 16px 0; } .pinggo-chat-entry__intro { margin-bottom: 20px; } .pinggo-chat-entry__intro h2, .pinggo-chat-entry__intro h1 { font-size: 26px; } .pinggo-chat-entry__sub { font-size: 14px; } .pinggo-chat-entry__card { border-radius: 14px; } .pinggo-chat-entry__body { padding: 16px; min-height: 180px; max-height: 300px; } .pinggo-chat-entry__bubble { max-width: 88%; } .pinggo-chat-entry__cardhead { padding: 12px 16px; } .pinggo-chat-entry__inputrow { margin: 0 16px 8px; } .pinggo-chat-entry__foot { padding: 0 16px 14px; } } /* 2.9.46: AI 回覆中的真實商品卡 */ .pinggo-chat-entry__prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 2px; } .pinggo-chat-entry__prod { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: #fff; border: 1px solid #e8eaf0; border-radius: 10px; color: #111 !important; text-decoration: none !important; } .pinggo-chat-entry__prod:hover { border-color: #405cf5; } .pinggo-chat-entry__prod strong { font-size: 13px; line-height: 1.5; } .pinggo-chat-entry__prod-price { font-size: 13px; font-weight: 600; } .pinggo-chat-entry__prod-atts { font-size: 11px; line-height: 1.6; color: #777; } .pinggo-chat-entry__prod-go { font-size: 12px; color: #405cf5; } @media (max-width: 750px) { .pinggo-chat-entry__prods { grid-template-columns: 1fr; } } /* Dedicated AI landing page: all presentation is scoped to this page. */ .pinggo-ai-page { --ai-ink:#14181e; --ai-muted:#646d79; color:var(--ai-ink); background:#fff; } .pinggo-ai-page * { box-sizing:border-box; } /* 2.9.48: immersive breadcrumb — breadcrumb strip transparent, hero background extends up behind it (breadcrumb keeps z-index:1 so its text stays on top). 2.9.49: darken crumb text over the light hero gradient for legibility. */ body.pinggo-page-ai-shopping .pinggo-breadcrumb { background:transparent; position:relative; z-index:1; } body.pinggo-page-ai-shopping .pinggo-breadcrumb__item>a { color:#3a4352; } body.pinggo-page-ai-shopping .pinggo-breadcrumb__item>a:hover, body.pinggo-page-ai-shopping .pinggo-breadcrumb__item>a:focus-visible { color:#111827; } body.pinggo-page-ai-shopping .pinggo-breadcrumb__separator { color:#7b8493; } body.pinggo-page-ai-shopping .pinggo-breadcrumb__current { color:#1f2937; } /* 2.9.50: the site header must not stick on the AI page — sticky top:0 makes its translucent white band float over the breadcrumb/hero on scroll and reads as "遮擋". position:relative scrolls it away while still anchoring the absolutely-positioned mega/search panels. */ body.pinggo-page-ai-shopping .pinggo-header { position:relative; } .pinggo-ai-page .pinggo-chat-entry { position:relative; isolation:isolate; padding:80px max(6.5%,24px) 0; background:transparent; } .pinggo-ai-page .pinggo-chat-entry::before { content:""; position:absolute; z-index:-1; inset:-46px 0 40px; background:linear-gradient(90deg,rgba(241,244,247,.8),rgba(241,244,247,0) 65%),url('../images/ai-shopping/hero.png') center 42% / cover; clip-path:polygon(0 0,100% 0,100% 100%,0 87%); } .pinggo-ai-page .pinggo-chat-entry__intro { max-width:570px; margin:0 0 42px; text-align:left; min-height:280px; } .pinggo-ai-page .pinggo-chat-entry__eyebrow { color:var(--ai-muted); font-size:14px; letter-spacing:.16em; margin-bottom:16px; } .pinggo-ai-page .pinggo-chat-entry__intro h1 { max-width:9em; font-size:clamp(36px,4.3vw,62px); line-height:1.25; font-weight:600; letter-spacing:-.035em; margin-bottom:22px; text-wrap:balance; } .pinggo-ai-page .pinggo-chat-entry__sub { max-width:470px; margin:0; font-size:17px; line-height:1.8; color:#59626e; } .pinggo-ai-page__start { display:inline-flex; gap:22px; align-items:center; margin-top:26px; border-radius:30px; background:#181d22; color:white!important; padding:12px 24px; font-size:14px; text-decoration:none!important; } .pinggo-ai-page__start:hover { background:#303741; } /* 移动端卡片玻璃层定位：桌面 min-width:1001px 块已有 position:relative+isolation， 移动端漏加 → ::before/::after（绝对定位）跑到 .pinggo-chat-entry 上，糊住整个首屏区， 输入行背后出现灰带（用户 Alook 截图）。补上后玻璃层限定在卡片内。 */ .pinggo-ai-page .pinggo-chat-entry__card { position:relative; isolation:isolate; max-width:790px; border-radius:24px; border-color:#e0e4ea; box-shadow:0 20px 48px #1c2b4312; background:rgba(255,255,255,.96); scroll-margin-top:110px; } .pinggo-ai-page .pinggo-chat-entry__cardhead { border:0; gap:18px; padding:22px 26px 10px; } .pinggo-ai-page .pinggo-chat-entry__spark { width:48px; height:48px; border-radius:50%; background:#e4ecff; flex-shrink:0; } .pinggo-ai-page .pinggo-chat-entry__spark::after { content:""; width:15px; height:15px; border-radius:50%; background:#2475ff; box-shadow:0 0 10px #3983ff6b; } /* 2.9.70: 蓝点呼吸 + 脉冲光环（用户指定 V1；纯 transform/opacity 合成器动画，杜绝重绘抖动； static 外观（尺寸/颜色/阴影）不变；reduced-motion 降级） */ .pinggo-ai-page .pinggo-chat-entry__spark { position:relative; } .pinggo-ai-page .pinggo-chat-entry__spark::after { animation: pinggo-spark-breathe 2.4s ease-in-out infinite; will-change: transform; } .pinggo-ai-page .pinggo-chat-entry__spark::before { content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid rgba(57,131,255,.55); animation: pinggo-spark-ring 1.8s ease-out infinite; will-change: transform, opacity; } @keyframes pinggo-spark-breathe { 0%, 100% { transform: scale(1) translateZ(0); } 50% { transform: scale(1.10) translateZ(0); } } @keyframes pinggo-spark-ring { 0% { transform: scale(.55); opacity:.95; } 100% { transform: scale(2.2); opacity:0; } } @media (prefers-reduced-motion: reduce) { .pinggo-ai-page .pinggo-chat-entry__spark::before, .pinggo-ai-page .pinggo-chat-entry__spark::after { animation: none; } } .pinggo-ai-page .pinggo-chat-entry__titles h2 { margin:0; font-size:22px; font-weight:600; line-height:1.3; } .pinggo-ai-page .pinggo-chat-entry__body { min-height:0; max-height:380px; padding:12px 26px 16px; gap:16px; overscroll-behavior:contain; } .pinggo-ai-page .pinggo-chat-entry__bubble { max-width:90%; font-size:14px; border-radius:16px; overflow-wrap:anywhere; white-space:pre-wrap; } .pinggo-ai-page .pinggo-chat-entry__bubble--assistant { background:#f0f2f5; } .pinggo-ai-page .pinggo-chat-entry__chip { min-height:44px; font-size:13px; padding:8px 17px; background:#fff!important; } /* 2.9.48: input baseline shows deep-blue line by default; focus adds light ring. */ .pinggo-ai-page .pinggo-chat-entry__inputrow { margin:0 26px 8px; padding:5px 5px 5px 18px; border-color:#405cf5; } .pinggo-ai-page .pinggo-chat-entry__inputrow:focus-within { border-color:#405cf5; box-shadow:0 0 0 3px rgba(64,92,245,.16); } .pinggo-ai-page .pinggo-chat-entry__send { background:#2475ff; width:42px; height:42px; flex-basis:42px; } .pinggo-ai-page .pinggo-chat-entry__send:disabled { opacity:.45; cursor:wait; } .pinggo-ai-page .pinggo-chat-entry__foot { font-size:11px; color:#737d8b; padding-bottom:16px; } .pinggo-ai-page__capabilities { max-width:1320px; padding:64px 6% 60px; margin:auto; } .pinggo-ai-page__sectionhead { text-align:center; margin-bottom:28px; } .pinggo-ai-page__sectionhead>p { font-size:12px; letter-spacing:.15em; color:var(--ai-muted); margin:0 0 10px; } .pinggo-ai-page__sectionhead h2 { font-size:34px; line-height:1.3; margin:0 0 8px; font-weight:600; } .pinggo-ai-page__sectionhead>span { font-size:16px; color:var(--ai-muted); } .pinggo-ai-page__tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .pinggo-ai-page__tile { display:block; padding:0; border:1px solid transparent; background:#f8f9fa!important; border-radius:8px; color:#111!important; text-align:left; white-space:normal; font:inherit; overflow:hidden; cursor:pointer; transition:transform .2s,border-color .2s; } .pinggo-ai-page__tile:hover { transform:translateY(-4px); border-color:#cbd1dc; } .pinggo-ai-page__tile img { display:block; width:100%; aspect-ratio:1.48; height:auto; object-fit:cover; } .pinggo-ai-page__tile-copy { display:block; position:relative; padding:18px 48px 22px 20px; } .pinggo-ai-page__tile strong { display:block; font-size:18px; margin-bottom:9px; } .pinggo-ai-page__tile-copy>span { display:block; font-size:14px; line-height:1.6; color:var(--ai-muted); } .pinggo-ai-page__tile i { display:grid; place-items:center; position:absolute; right:14px; bottom:24px; width:30px; height:30px; border:1px solid #dce0e6; border-radius:50%; font-style:normal; } .pinggo-ai-page__faq { padding:56px 24px 64px; background:linear-gradient(150deg,#f5f7f9 15%,#e8edf3 50%,#f6f8fa 80%); } .pinggo-ai-page__questions { max-width:920px; margin:auto; border:1px solid #dfe4eb; border-radius:14px; background:#ffffffed; overflow:hidden; } .pinggo-ai-page__questions details+details { border-top:1px solid #e4e7ed; } .pinggo-ai-page__questions summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:17px 26px; font-size:15px; list-style:none; } .pinggo-ai-page__questions summary::-webkit-details-marker { display:none; } .pinggo-ai-page__questions summary span { font-size:23px; line-height:1; font-weight:300; } .pinggo-ai-page__questions details[open] summary span { transform:rotate(45deg); } .pinggo-ai-page__questions details>p { padding:0 26px 22px; margin:0; max-width:80ch; font-size:14px; line-height:1.8; color:var(--ai-muted); } html body.pinggo-storefront .pinggo-chat-entry__kbd .pinggo-ai-page__start:focus-visible { outline:2px solid #2475ff!important; outline-offset:3px!important; } @media(max-width:900px) { .pinggo-ai-page .pinggo-chat-entry { padding:64px 24px 0; } .pinggo-ai-page .pinggo-chat-entry__intro { max-width:52%; } .pinggo-ai-page .pinggo-chat-entry__intro h1 { font-size:40px; } .pinggo-ai-page__tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:600px) { .pinggo-ai-page .pinggo-chat-entry { padding:44px 16px 0; } .pinggo-ai-page .pinggo-chat-entry::before { background:linear-gradient(180deg,#f0f3f6 0%,#f0f3f6e8 40%,#f0f3f626 80%),url('../images/ai-shopping/hero.png') 68% top / auto 520px no-repeat; clip-path:none; inset:-42px 0 90px; } .pinggo-ai-page .pinggo-chat-entry__intro { max-width:100%; min-height:310px; margin-bottom:26px; } .pinggo-ai-page .pinggo-chat-entry__intro h1 { font-size:36px; max-width:9em; } .pinggo-ai-page .pinggo-chat-entry__sub { font-size:15px; max-width:30em; } .pinggo-ai-page .pinggo-chat-entry__card { border-radius:20px; } .pinggo-ai-page .pinggo-chat-entry__cardhead { padding:18px 18px 8px; gap:12px; } .pinggo-ai-page .pinggo-chat-entry__titles h2 { font-size:20px; } .pinggo-ai-page .pinggo-chat-entry__body { padding:12px 16px; max-height:360px; } .pinggo-ai-page .pinggo-chat-entry__bubble { max-width:100%; font-size:13px; } .pinggo-ai-page .pinggo-chat-entry__chips { gap:7px; } .pinggo-ai-page .pinggo-chat-entry__chip { font-size:12px; padding:8px 12px; } .pinggo-ai-page .pinggo-chat-entry__inputrow { margin:0 12px 8px; } .pinggo-ai-page__capabilities { padding:46px 16px; } .pinggo-ai-page__sectionhead h2 { font-size:27px; } .pinggo-ai-page__sectionhead>span { font-size:14px; } .pinggo-ai-page__tiles { gap:12px; } .pinggo-ai-page__tile-copy { padding:14px 14px 46px; } .pinggo-ai-page__tile strong { font-size:16px; } .pinggo-ai-page__tile-copy>span { font-size:13px; } .pinggo-ai-page__tile i { right:12px; bottom:10px; } .pinggo-ai-page__faq { padding:40px 16px; } .pinggo-ai-page__questions summary { padding:15px 16px; font-size:14px; } .pinggo-ai-page__questions details>p { padding:0 16px 18px; } } @media(prefers-reduced-motion:reduce) { .pinggo-ai-page * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } } .pinggo-chat-entry__mic:active { transform:scale(.92); } /* 多轮对话滚动条：细、半透明、融入玻璃 */ .pinggo-chat-entry__body { scrollbar-width:thin; scrollbar-color:rgba(20,24,30,.32) transparent; } .pinggo-chat-entry__body::-webkit-scrollbar { width:6px; height:6px; } .pinggo-chat-entry__body::-webkit-scrollbar-track { background:transparent; } .pinggo-chat-entry__body::-webkit-scrollbar-thumb { background:rgba(20,24,30,.22); border-radius:999px; } .pinggo-chat-entry__body::-webkit-scrollbar-thumb:hover { background:rgba(20,24,30,.38); } /* Chromium backdrop-filter 子树重绘 bug 对策：按钮提升为独立合成层 */ .pinggo-chat-entry__mic, .pinggo-chat-entry__send { will-change:transform; transform:translateZ(0); } /* 悬浮态 = 纯黑（与站内黑色按钮统一，最稳方案） */ .pinggo-chat-entry__mic:hover { background:#181d22; border-color:#181d22; color:#fff; } .pinggo-ai-page .pinggo-chat-entry__mic:hover { background:#181d22; border-color:#181d22; color:#fff; } .pinggo-chat-entry__send:hover { background:#181d22 !important; border-color:#181d22 !important; } .pinggo-ai-page .pinggo-chat-entry__send:hover { background:#181d22 !important; border-color:#181d22 !important; } /* 发送钮：纯色圆，无描边无投影（去白圈/光晕） */ .pinggo-chat-entry__send { border:0 !important; box-shadow:none !important; } /* 语音状态 toast：绝对定位，不参与布局（对话区右下角胶囊） */ .pinggo-ai-page .pinggo-chat-entry__body { position:relative; } .pinggo-chat-entry__mic-note { position:absolute; right:16px; bottom:10px; margin:0; z-index:5; background:rgba(20,24,30,.78); color:#fff; font-size:11px; line-height:1.5; padding:6px 12px; border-radius:999px; text-align:center; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; } .pinggo-chat-entry__mic-note.is-visible { opacity:1; transform:translateY(0); } .pinggo-ai-page .pinggo-chat-entry__mic-note { position:absolute; right:26px; bottom:104px; } @media(max-width:1000px) { .pinggo-ai-page .pinggo-chat-entry__mic-note { right:12px; bottom:98px; } } /* ============================================================ 2.9.56: AI 页「对话优先」E 版设计（含玻璃/背景/FAQ/语音/兼容修复） 预览实现同源：prototypes/ai-conversation-first/glass-e.css ============================================================ */ /* ============================================================ 变体 D · 左右分栏 + 毛玻璃保留（设计原型，未上生产） 桌面：左栏标题垂直居中 / 右栏全高玻璃对话卡（背景图继续当舞台） 移动：沿用竖排玻璃版 ============================================================ */ body.pinggo-page-ai-shopping .pinggo-main { background:#fff; } /* 副标题/开始按钮删除（已确认不要，全宽度生效） */ .pinggo-ai-page .pinggo-chat-entry__sub, .pinggo-ai-page__start { display:none; } .pinggo-ai-page .pinggo-chat-entry { padding:0; } .pinggo-ai-page .pinggo-chat-entry::before { inset:-56px 0 96px; } .pinggo-ai-page .pinggo-chat-entry::before { background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)), linear-gradient(215deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.42) 22%, rgba(255,255,255,0) 46%), linear-gradient(120deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.22) 30%, rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,0) 58%, #ffffff 96%), url('../images/ai-shopping/hero-user-20260907.jpg') center 42% / cover; clip-path:none; } /* ---- 左右分栏（桌面） ---- */ @media(min-width:1001px) { .pinggo-ai-page .pinggo-chat-entry__inner { display:grid; grid-template-columns:minmax(0,34fr) minmax(0,66fr); gap:48px; max-width:1320px; margin:0 auto; padding:24px max(5%,24px) 44px; align-items:start; } .pinggo-ai-page .pinggo-chat-entry__intro { margin:0; text-align:left; min-height:0; max-width:none; } .pinggo-ai-page .pinggo-chat-entry__eyebrow { font-size:12px; letter-spacing:.12em; margin-bottom:14px; } .pinggo-ai-page .pinggo-chat-entry__intro h1 { font-size:clamp(32px,3vw,40px); line-height:1.26; max-width:420px; } /* 右栏：全高玻璃对话卡（靠左，保持 660 宽） */ .pinggo-ai-page .pinggo-chat-entry__card { justify-self:start; width:min(660px,100%); margin:0; display:flex; flex-direction:column; /* 2.9.178：卡高改成「視口高 − 228px」（下限 520 → 420）。 問題：卡片頂部固定佔 180px，舊值 260 的下限 520 在視口 < 700px 時兜不住 → 卡片底部被切 （實測視口 640 時底部溢出 60px），使用者感受是「有時整體、有時被切」＝取決於視窗高度。 現在：視口 ≥ 600px 都能完整顯示；視口 1080 仍為 760（上限不變）；卡內元素與樣式一律未動。 */ height:clamp(420px, calc(100dvh - 228px), 760px); background:transparent; position:relative; isolation:isolate; border:1px solid rgba(255,255,255,.65); border-radius:26px; box-shadow:0 16px 36px rgba(17,17,17,.10); } .pinggo-ai-page .pinggo-chat-entry__body { flex:1; min-height:0; max-height:none; padding:16px 26px 20px; } } /* ---- 移动端：竖排（标题→玻璃卡） ---- */ @media(max-width:1000px) { .pinggo-ai-page .pinggo-chat-entry { padding:44px 20px 0; } .pinggo-ai-page .pinggo-chat-entry__intro { margin:0 0 20px; min-height:0; text-align:left; } .pinggo-ai-page .pinggo-chat-entry__eyebrow { font-size:11px; margin-bottom:10px; } .pinggo-ai-page .pinggo-chat-entry__intro h1 { font-size:clamp(26px,7vw,30px); } .pinggo-ai-page .pinggo-chat-entry__card { background:transparent; border:1px solid rgba(255,255,255,.65); border-radius:22px; box-shadow:0 28px 60px rgba(17,17,17,.18); } .pinggo-ai-page .pinggo-chat-entry__body { min-height:280px; max-height:420px; padding:12px 16px; } .pinggo-ai-page .pinggo-chat-entry__inputrow { margin:0 12px 8px; } .pinggo-ai-page .pinggo-chat-entry__foot { padding-bottom:14px; } } @media(max-width:600px) { .pinggo-ai-page .pinggo-chat-entry { padding:24px 14px 0; } .pinggo-ai-page .pinggo-chat-entry__intro { margin-bottom:18px; } .pinggo-ai-page .pinggo-chat-entry::before { background: linear-gradient(180deg, rgba(255,255,255,0) 46%, #ffffff 88%), linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 46%, rgba(255,255,255,.40) 100%), url('../images/ai-shopping/hero-user-20260907.jpg') 80% 20% / auto 540px no-repeat; clip-path:none; inset:-42px 0 90px; } .pinggo-ai-page .pinggo-chat-entry__intro h1 { font-size:28px; } .pinggo-ai-page .pinggo-chat-entry__body { min-height:240px; max-height:360px; } } /* ---- 功能卡区删除 / FAQ 静默 ---- */ .pinggo-ai-page__capabilities { display:none; } .pinggo-ai-page__faq { padding:72px 24px 72px; background:linear-gradient(180deg,#ffffff 0%,#f4f6f8 100%); } .pinggo-ai-page__sectionhead h2 { font-size:24px; line-height:1.3; margin:0 0 8px; font-weight:600; } .pinggo-ai-page__sectionhead>p { font-size:12px; letter-spacing:.16em; color:#646d79; margin:0 0 10px; } .pinggo-ai-page__sectionhead>span { font-size:14px; color:#646d79; } .pinggo-ai-page__sectionhead { margin-bottom:30px; text-align:center; } .pinggo-ai-page__questions { max-width:820px; margin:auto; border:1px solid #e4e7ed; border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 14px 36px rgba(28,43,67,.07); } .pinggo-ai-page__questions details+details { border-top:1px solid #eceff3; } .pinggo-ai-page__questions summary { padding:17px 24px; font-size:15px; } .pinggo-ai-page__questions details>p { font-size:14px; padding:0 24px 18px; } @media(max-width:600px) { .pinggo-ai-page__faq { padding:56px 14px 44px; } } /* ============================================================ 液态玻璃输入行 + 发送按钮（Liquid Glass） ============================================================ */ .pinggo-ai-page .pinggo-chat-entry__inputrow { position:relative; isolation:isolate; background:linear-gradient(115deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.60) 55%, rgba(255,255,255,.78) 100%); border:1px solid rgba(255,255,255,.95); box-shadow: 0 6px 18px rgba(28,43,67,.10), inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(255,255,255,.28); } .pinggo-ai-page .pinggo-chat-entry__inputrow::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(130% 110% at 10% -10%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 42%); } .pinggo-ai-page .pinggo-chat-entry__input { position:relative; z-index:1; } .pinggo-ai-page .pinggo-chat-entry__send { position:relative; z-index:1; } .pinggo-ai-page .pinggo-chat-entry__inputrow:focus-within { border-color:rgba(111,155,255,.78); box-shadow: 0 14px 32px rgba(36,117,255,.24), 0 2px 10px rgba(28,43,67,.10), inset 0 1px 0 rgba(255,255,255,.95); } .pinggo-ai-page .pinggo-chat-entry__send { background:linear-gradient(135deg, rgb(88,132,255), rgb(36,117,255)); border:1px solid rgba(255,255,255,.48); box-shadow:0 4px 12px rgba(36,117,255,.38), inset 0 1px 1px rgba(255,255,255,.55); } /* ============================================================ 2.9.56: 语音输入 —— 完整按钮/提示规则（预览版补全） ============================================================ */ .pinggo-chat-entry__mic { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; padding:0; background:transparent; border:1px solid #d9dce3; border-radius:50%; color:#59626e; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; } .pinggo-chat-entry__mic:disabled { opacity:.45; cursor:not-allowed; } .pinggo-chat-entry__mic.is-listening { background:#2475ff; border-color:#2475ff; color:#fff; animation:pinggo-chat-mic-pulse 1.6s ease-out infinite; } @keyframes pinggo-chat-mic-pulse { 0% { box-shadow:0 0 0 0 rgba(36,117,255,.38); } 70% { box-shadow:0 0 0 12px rgba(36,117,255,0); } 100% { box-shadow:0 0 0 0 rgba(36,117,255,0); } } .pinggo-chat-entry__mic-note { margin:6px 22px 0; font-size:11px; line-height:1.6; color:#737d8b; text-align:center; } .pinggo-ai-page .pinggo-chat-entry__mic { width:42px; height:42px; flex-basis:42px; background:linear-gradient(115deg, rgba(255,255,255,.85), rgba(255,255,255,.55)); border:1px solid rgba(255,255,255,.9); color:#4c5666; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(28,43,67,.08); } .pinggo-chat-entry__mic:active { transform:scale(.92); } /* 移动端对齐（2026-09-08）： 1) FAQ 区不用 content-visibility:auto —— WKWebView（Alook/Samsung Internet 等）滚动中 占位/旧帧叠画，出现横线穿过首条 summary 的伪影（用户截图）；移除后无跳过渲染即无此伪影。 2) summary 默认 tap 高亮在 WKWebView 是灰色整条（用户反馈“点击有个灰色的背景”）： 关掉 tap-highlight，改用自定义浅灰 :active 反馈。 */ .pinggo-ai-page__questions, .pinggo-ai-page__questions summary, .pinggo-ai-page__questions details { -webkit-tap-highlight-color:transparent; } .pinggo-ai-page__questions summary { transition:background-color .15s ease; } .pinggo-ai-page__questions summary:active { background:#edf0f4; } /* 多轮对话滚动条：细、半透明、融入玻璃 */ .pinggo-chat-entry__body { scrollbar-width:thin; scrollbar-color:rgba(20,24,30,.32) transparent; } .pinggo-chat-entry__body::-webkit-scrollbar { width:6px; height:6px; } .pinggo-chat-entry__body::-webkit-scrollbar-track { background:transparent; } .pinggo-chat-entry__body::-webkit-scrollbar-thumb { background:rgba(20,24,30,.22); border-radius:999px; } .pinggo-chat-entry__body::-webkit-scrollbar-thumb:hover { background:rgba(20,24,30,.38); } /* 兜底：完全不支持 backdrop-filter 时，玻璃卡降级为近实白 */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .pinggo-ai-page .pinggo-chat-entry__card { background:rgba(255,255,255,.97); } } /* ------------------------------------------------------------ 玻璃 = 卡内自绘模糊层（替代 backdrop-filter，零合成依赖， 任何浏览器/软件渲染都不会出现白圈、空白或重绘错位） ------------------------------------------------------------ */ .pinggo-ai-page .pinggo-chat-entry__card::before { content:""; position:absolute; z-index:-2; inset:-2px; background:url('../images/ai-shopping/hero-v7.jpg') center 42% / cover; filter:blur(18px) saturate(1.12); transform:scale(1.06); } .pinggo-ai-page .pinggo-chat-entry__card::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background: radial-gradient(120% 100% at 8% -6%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 45%), linear-gradient(150deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.40) 60%, rgba(255,255,255,.52) 100%); } .pinggo-ai-page .pinggo-chat-entry__card > * { position:relative; z-index:1; } /* 悬浮态 = 纯黑（与站内黑色按钮统一，最稳方案） */ .pinggo-chat-entry__mic:hover { background:#181d22; border-color:#181d22; color:#fff; } .pinggo-ai-page .pinggo-chat-entry__mic:hover { background:#181d22; border-color:#181d22; color:#fff; } .pinggo-chat-entry__send:hover { background:#181d22 !important; border-color:#181d22 !important; } .pinggo-ai-page .pinggo-chat-entry__send:hover { background:#181d22 !important; border-color:#181d22 !important; } /* 发送钮：纯色圆，无描边无投影（去白圈/光晕） */ .pinggo-chat-entry__send { border:0 !important; box-shadow:none !important; } /* 语音状态 toast：绝对定位，不参与布局（对话区右下角胶囊） */ .pinggo-ai-page .pinggo-chat-entry__body { position:relative; } .pinggo-chat-entry__mic-note { position:absolute; right:16px; bottom:10px; margin:0; z-index:5; background:rgba(20,24,30,.78); color:#fff; font-size:11px; line-height:1.5; padding:6px 12px; border-radius:999px; text-align:center; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; } .pinggo-chat-entry__mic-note.is-visible { opacity:1; transform:translateY(0); } .pinggo-ai-page .pinggo-chat-entry__mic-note { position:absolute; right:26px; bottom:104px; } @media(max-width:1000px) { .pinggo-ai-page .pinggo-chat-entry__mic-note { right:12px; bottom:98px; } } /* 本页隐藏重复的蓝色悬浮客服入口（页尾联系方式保留）；如需恢复删除下一行 */ body.pinggo-page-ai-shopping .chaty-widget { display:none !important; } /* 2.9.62: 全宽白纱 — 卡下横向均匀入白（替代竖直渐隐，消除直条割裂；全兼容） */ .pinggo-ai-page .pinggo-chat-entry::after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:130px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%); pointer-events:none; }