/* ===== IDE Command Center — header stays, stage fills the rest ===== */ :root { --ai-header-h: 72px; --ai-ease: cubic-bezier(0.22, 1, 0.36, 1); --ai-bg: #f5f4f1; --ai-bg-soft: #faf8f6; --ai-surface: #ffffff; --ai-text: #121820; --ai-text-2: #3a4450; --ai-text-3: #66707d; --ai-border: #e0d9cc; --ai-border-soft: #ebe4d8; --ai-input-bg: #f0ebe3; --ai-radius: 16px; --ai-radius-lg: 22px; --ai-radius-sm: 12px; --ai-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); --ai-shadow-lift: 0 10px 28px rgba(15, 23, 42, 0.09); --ai-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.07); --ai-glass-edge: rgba(255, 255, 255, 0.94); --ai-glass-hairline: rgba(18, 24, 32, 0.08); --ai-glass-card: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 52%, rgba(255, 255, 255, 0.95) 100% ); --ai-glass-panel: linear-gradient(180deg, #ffffff 0%, var(--ai-bg-soft) 100%); --ai-glass-shadow: none; --ai-action: #054f74; --ai-action-hover: #054b6e; --ai-action-rgb: 5, 79, 116; --ai-sky: #2a9bb5; --ai-sky-hover: #238aa2; --ai-sky-rgb: 42, 155, 181; --ai-sky-soft: color-mix(in srgb, var(--ai-sky) 14%, #fff); --ai-gold: #c7923e; --ai-gold-hover: #b58232; --ai-gold-rgb: 199, 146, 62; --ai-gold-soft: color-mix(in srgb, var(--ai-gold) 16%, #fff); --ai-primary-soft: #e0edf2; --ai-primary-mid: color-mix(in srgb, var(--ai-action) 16%, #fff); --ai-primary-softer: color-mix(in srgb, var(--ai-action) 10%, #fff); --ai-navy-rgb: var(--kc-primary-rgb, 5, 79, 116); --ai-accent-rgb: var(--ai-action-rgb); --ai-canvas: var(--ai-bg); --ai-header-bg: color-mix(in srgb, var(--ai-bg) 94%, transparent); --ai-ink: var(--ai-text); --ai-muted: var(--ai-text-2); --ai-line: var(--ai-border); --ai-glass: var(--ai-surface); --ai-content-max: 1120px; --ai-guide-panel-w: 520px; --ai-acrylic-bg: rgba(255, 255, 255, 0.32); --ai-acrylic-bg-primary: color-mix(in srgb, var(--ai-gold-soft) 42%, rgba(255, 255, 255, 0.38)); } body.command-home { background: var(--ai-canvas); overflow: hidden; color: var(--ai-ink); } /* Slim header, original light chrome */ body.command-home #header.header, body.command-home #header.header.sticked { display: flex !important; padding: 10px 0; background: var(--ai-header-bg); backdrop-filter: blur(14px) saturate(165%); -webkit-backdrop-filter: blur(14px) saturate(165%); border-bottom: 1px solid color-mix(in srgb, var(--ai-border) 28%, transparent); box-shadow: none; } body.command-home #header .container-xl { position: relative; max-width: none; padding-left: 20px; padding-right: 20px; overflow: visible; } body.command-home #navbar > ul > li.site-nav-tools { display: flex; align-items: center; flex-shrink: 0; gap: 8px; } body.command-home .site-nav-dock { display: flex; flex-direction: column; } body.command-home #navbar .site-nav-dock a { display: inline-flex; align-items: center; } @media (max-width: 1279px) { body.command-home .site-nav-dock { display: contents; } } @media (min-width: 1280px) { body.command-home #navbar, body.command-home #navbar.navbar { position: static; display: flex; align-items: center; margin-left: auto; } body.command-home #navbar > ul { position: static; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } body.command-home .site-nav-dock { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); flex-direction: row; align-items: center; justify-content: center; gap: 20px; padding: 6px 12px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; } body.command-home #navbar li.site-nav-dock:hover > a, body.command-home #navbar .site-nav-dock:hover > a { color: var(--ai-text-2); } body.command-home #navbar .site-nav-dock a, body.command-home #navbar .site-nav-dock a:focus { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 16px; border: 1px solid transparent; color: var(--ai-text-2); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; background: transparent; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } body.command-home #navbar .site-nav-dock a:hover, body.command-home #navbar .site-nav-dock a.active, body.command-home #navbar .site-nav-dock a.active:focus { color: var(--ai-text); border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); transform: none; } body.command-home #navbar .site-nav-dock a.active, body.command-home #navbar .site-nav-dock a.active:focus { color: var(--ai-action); } body.command-home #navbar > ul > li.site-nav-tools { display: flex; align-items: center; flex-shrink: 0; gap: 8px; } body.command-home #navbar .language-toggle-link, body.command-home #navbar .language-toggle-link:focus { padding: 0 10px 0 8px; margin-left: 0; } } body.command-home #header .logo img { max-height: 48px; } body.command-home #header .logo h1, body.command-home #header .brand-lockup h1, body.command-home #header .brand-lockup .brand-name { color: var(--kc-primary, #054f74); font-size: 1.45rem; } body.command-home #header .brand-lockup .brand-fullname { color: var(--ai-text-3); } body.command-home .mobile-nav-show, body.command-home .mobile-nav-hide { color: var(--ai-text); } body.command-home #navbar a, body.command-home #navbar a:focus { color: var(--ai-text-2); } body.command-home #navbar a:hover, body.command-home #navbar a.active, body.command-home #navbar a.active:focus { color: var(--ai-action); } body.command-home #navbar .site-nav-dock a:hover, body.command-home #navbar .site-nav-dock a.active, body.command-home #navbar .site-nav-dock a.active:focus { color: var(--ai-text); } body.command-home #navbar .language-toggle-link, body.command-home #navbar .language-toggle-link:focus, body.command-home #navbar .language-toggle-link:hover, body.command-home #navbar .language-toggle-link.active, body.command-home #navbar .language-toggle-link.active:focus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: 32px; margin: 0; padding: 0 10px 0 8px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--ai-radius-sm); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); color: var(--ai-text-2); box-shadow: none; cursor: pointer; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } body.command-home .language-toggle-icon { font-size: 15px; line-height: 1; color: var(--ai-text-2); transition: transform 0.28s var(--ai-ease), color 0.2s var(--ai-ease); } body.command-home .language-toggle__next { min-width: 1.1em; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: var(--ai-action); } body.command-home #navbar .language-toggle-link:hover, body.command-home #navbar .language-toggle-link.active, body.command-home #navbar .language-toggle-link.active:focus { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); box-shadow: none; color: var(--ai-text); } body.command-home #navbar a.language-toggle-link:hover .language-toggle-icon { transform: rotate(180deg); color: var(--ai-action); } /* —— Stage under header —— */ #ai-advisor-shell { display: none; } body.command-home #ai-advisor-shell { display: block; position: fixed; top: var(--ai-header-h); left: 0; right: 0; bottom: 0; z-index: 10; overflow: hidden; } .ai-shell-bg { position: absolute; inset: -160px; overflow: visible; background: radial-gradient(ellipse 58% 48% at 18% 12%, rgba(var(--ai-sky-rgb), 0.055), transparent 68%), radial-gradient(ellipse 52% 44% at 86% 78%, rgba(var(--ai-gold-rgb), 0.04), transparent 70%), radial-gradient(ellipse 40% 36% at 72% 18%, rgba(var(--ai-action-rgb), 0.03), transparent 72%), var(--ai-bg); } .ai-shell-bg__veil { display: none; } /* 五区域氛围地图:左上欧盟 / 中间中国 / 右上美洲 / 左下东南亚 / 右下澳洲 */ .ai-stage-maps { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--ai-action); overflow: visible; } .ai-stage-map { position: absolute; overflow: visible; opacity: 0.22; pointer-events: none; transition: opacity 0.45s var(--ai-ease), filter 0.45s var(--ai-ease); } /* Europe: core crop inside panel, then position on stage */ .ai-stage-map--eu { position: absolute; z-index: 2; top: 46px; left: 0; right: auto; bottom: auto; width: min(50vw, 720px); height: min(58%, 760px); margin: 0; opacity: 0.24; overflow: hidden; transform: none; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); mask-image: linear-gradient(to right, #000 90%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } body.command-home .ai-stage-map--eu { position: absolute !important; top: 46px !important; left: 0 !important; right: auto !important; bottom: auto !important; width: min(50vw, 720px) !important; height: min(58%, 760px) !important; transform: none !important; } .ai-stage-map--am { top: calc(var(--ai-header-h) - 34px); right: 28px; width: min(58vw, 780px); height: min(54vh, 620px); opacity: 0.24; -webkit-mask-image: linear-gradient(to left, #000 92%, transparent 100%), linear-gradient(to bottom, #000 94%, transparent 100%); mask-image: linear-gradient(to left, #000 92%, transparent 100%), linear-gradient(to bottom, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ai-stage-map--cn { position: absolute; top: calc(52% + 50px); left: 50%; z-index: 1; width: min(96%, 680px); height: min(78%, 300px); opacity: 0.22; transform: translate(-50%, -54%); -webkit-mask-image: radial-gradient(ellipse 86% 82% at 50% 52%, #000 24%, transparent 78%); mask-image: radial-gradient(ellipse 86% 82% at 50% 52%, #000 24%, transparent 78%); } .ai-welcome-plane.is-map-active .ai-stage-map--cn { opacity: 0.46; } .ai-stage-map--sea { bottom: 6%; left: -6px; width: min(40vw, 460px); height: min(30vh, 280px); opacity: 0.22; -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%), linear-gradient(to top, #000 86%, transparent 100%); mask-image: linear-gradient(to right, #000 84%, transparent 100%), linear-gradient(to top, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ai-stage-map--au { bottom: 3%; right: -6px; width: min(38vw, 440px); height: min(30vh, 280px); opacity: 0.22; -webkit-mask-image: linear-gradient(to left, #000 84%, transparent 100%), linear-gradient(to top, #000 86%, transparent 100%); mask-image: linear-gradient(to left, #000 84%, transparent 100%), linear-gradient(to top, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ai-stage-maps.is-map-active .ai-stage-map { opacity: 0.58; } .ai-stage-maps.is-map-active .ai-stage-map.is-region-focus { opacity: 0.96; z-index: 3; filter: drop-shadow(0 14px 36px rgba(15, 23, 42, 0.12)); } .ai-stage-maps.is-map-active .ai-stage-map.is-region-dim { opacity: 0.18; } .ai-stage-map .ai-globe-map { display: block; width: 100%; height: 100%; } .ai-globe-map { display: block; width: 100%; height: 100%; overflow: visible; } .ai-globe-map__graticule { fill: none; stroke: color-mix(in srgb, currentColor 6%, var(--ai-border)); stroke-width: 0.35; vector-effect: non-scaling-stroke; opacity: 0.2; } .ai-globe-map__country { fill: color-mix(in srgb, currentColor 3.5%, transparent); stroke: color-mix(in srgb, currentColor 10%, var(--ai-text-3)); stroke-width: 0.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.42; } .ai-globe-map__label { fill: color-mix(in srgb, currentColor 65%, var(--ai-text-3)); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.8; } .ai-globe-map__label--hub { font-size: 10px; opacity: 0.9; } .ai-globe-map__hub-glow { fill: color-mix(in srgb, currentColor 12%, transparent); } .ai-globe-map__hub { fill: color-mix(in srgb, currentColor 75%, #fff); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; } .ai-globe-map__marker { opacity: 0.9; transition: opacity 0.25s var(--ai-ease); } .ai-globe-map__marker.is-dim { opacity: 0.26; } .ai-globe-map__marker.is-active { opacity: 1; } .ai-globe-map__marker-dot { fill: currentColor; stroke: #fff; stroke-width: 1.25; paint-order: stroke fill; } .ai-globe-map__marker-ripple { fill: color-mix(in srgb, currentColor 18%, transparent); stroke: color-mix(in srgb, currentColor 55%, #fff); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ai-marker-ripple 2.4s ease-out infinite; pointer-events: none; } .ai-globe-map__marker-ripple--b { animation-delay: 1.2s; } .ai-globe-map__marker.is-dim .ai-globe-map__marker-ripple { animation: none; opacity: 0; } .ai-globe-map__marker.is-active .ai-globe-map__marker-dot { transform-box: fill-box; transform-origin: center; transform: scale(1.25); } .ai-globe-map__marker.is-active .ai-globe-map__marker-ripple { animation-duration: 1.7s; stroke: currentColor; } .ai-globe-map__marker-label { fill: color-mix(in srgb, currentColor 78%, var(--ai-text)); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; paint-order: stroke; stroke: rgba(255, 255, 255, 0.94); stroke-width: 3.5px; vector-effect: non-scaling-stroke; } .ai-globe-map__marker.is-active .ai-globe-map__marker-label { fill: currentColor; font-size: 12px; stroke-width: 4px; } @keyframes ai-marker-ripple { 0% { transform: scale(0.35); opacity: 0.7; } 70% { opacity: 0.18; } 100% { transform: scale(3.4); opacity: 0; } } .ai-stage-maps.is-map-active .ai-globe-map__graticule { opacity: 0.35; } .ai-stage-maps.is-map-active .ai-globe-map__country { fill: color-mix(in srgb, currentColor 16%, transparent); stroke: color-mix(in srgb, currentColor 44%, var(--ai-text-3)); stroke-width: 0.7; opacity: 1; } .ai-stage-map.is-region-focus .ai-globe-map__country { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: color-mix(in srgb, currentColor 58%, var(--ai-text-3)); stroke-width: 0.85; } .ai-globe-map__country.is-dim { opacity: 0.22; } .ai-globe-map__country.is-focus { fill: color-mix(in srgb, currentColor 34%, transparent); stroke: currentColor; stroke-width: 1.35; opacity: 1; } /* iOS liquid glass — intent doors */ .ai-intent-door { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--ai-glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(255, 255, 255, 0.34), 0 0 0 1px var(--ai-glass-hairline); background: var(--ai-glass-card); backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%); transition: transform 0.22s var(--ai-ease), box-shadow 0.22s var(--ai-ease), border-color 0.22s var(--ai-ease); } .ai-intent-door::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 38%), radial-gradient(92% 72% at 10% -8%, rgba(255, 255, 255, 0.88), transparent 58%); mix-blend-mode: screen; opacity: 0.75; } .ai-intent-door::after { content: ''; position: absolute; width: 120%; height: 120%; top: -42%; right: -24%; z-index: 0; border-radius: 45% 55% 58% 42% / 48% 44% 56% 52%; pointer-events: none; background: radial-gradient(circle at 36% 36%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12) 46%, transparent 72%); filter: blur(10px); opacity: 0.65; animation: ai-ios-glass-blob 10s ease-in-out infinite; } .ai-intent-door > * { position: relative; z-index: 1; } @keyframes ai-ios-glass-blob { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 45% 55% 58% 42% / 48% 44% 56% 52%; } 50% { transform: translate(-6%, 4%) rotate(6deg) scale(1.08); border-radius: 54% 46% 48% 52% / 44% 56% 44% 56%; } } .ai-msg-row--assistant .ai-msg-bubble { position: relative; isolation: isolate; border: 1px solid var(--ai-border); background: var(--ai-glass-panel); backdrop-filter: blur(18px) saturate(175%); -webkit-backdrop-filter: blur(18px) saturate(175%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 0 0 1px var(--ai-glass-hairline); } .ai-composer { position: relative; isolation: isolate; overflow: hidden; min-height: 88px; padding: 16px 16px 16px 24px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease); } .ai-composer::before { display: none; } .ai-composer:focus-within { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); } .ai-msg-row--assistant .ai-msg-bubble:not(:has(.ai-card))::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 40%), radial-gradient(92% 72% at 10% -8%, rgba(255, 255, 255, 0.95), transparent 58%); mix-blend-mode: screen; opacity: 0.9; } .ai-composer > .ai-composer-form, .ai-msg-row--assistant .ai-msg-bubble > * { position: relative; z-index: 1; } .ai-card-opt, .ai-card-link { position: relative; isolation: isolate; border: 1px solid var(--ai-border); background: var(--ai-surface); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } .ai-card-opt::before, .ai-card-link::before { content: none; } /* 工具栏 / 快捷芯片 — 极简磨砂玻璃(与意图卡片、导航坞一致) */ .ai-sidebar-toggle, .ai-new-chat-ghost, .ai-new-chat-btn, .ai-followup-chip, .ai-history-item { position: relative; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } .ai-sidebar-toggle::before, .ai-new-chat-ghost::before, .ai-new-chat-btn::before, .ai-followup-chip::before, .ai-history-item::before { content: none; } .ai-advisor-layout { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; max-width: var(--ai-content-max); margin: 0 auto; padding: 8px 20px 0; box-sizing: border-box; } .ai-advisor-app { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: visible; } /* History is a drawer, never a second brand column */ .ai-stage-tools { position: absolute; top: 8px; left: 0; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; } .ai-sidebar-toggle, .ai-new-chat-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 14px; border: 1px solid transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ai-text-2); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .ai-sidebar-toggle { width: 34px; padding: 0; } .ai-sidebar-toggle i, .ai-new-chat-ghost i { font-size: 0.95rem; line-height: 1; color: var(--ai-text-3); transition: color 0.2s var(--ai-ease); } .ai-sidebar-toggle:hover, .ai-new-chat-ghost:hover { color: var(--ai-action); border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); } .ai-sidebar-toggle:hover i, .ai-new-chat-ghost:hover i { color: var(--ai-action); } .ai-history-sidebar { position: fixed; top: var(--ai-header-h); left: 0; bottom: 0; z-index: 20; width: min(280px, 86vw); display: flex; flex-direction: column; padding: 16px 12px 20px; border-right: 1px solid rgba(255, 255, 255, 0.55); background: color-mix(in srgb, var(--ai-bg) 90%, var(--ai-surface)); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; transform: translateX(-105%); transition: transform 0.28s var(--ai-ease); } .ai-history-sidebar > * { position: relative; z-index: 1; } #ai-advisor-shell.ai-history-open .ai-history-sidebar { transform: translateX(0); } .ai-history-backdrop { display: none; } #ai-advisor-shell.ai-history-open .ai-history-backdrop, #ai-advisor-shell.ai-guide-open .ai-history-backdrop { display: block; position: fixed; inset: 0; z-index: 19; border: none; background: color-mix(in srgb, var(--ai-bg) 42%, rgba(26, 46, 56, 0.08)); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); cursor: pointer; } .ai-guide-panel { position: fixed; top: var(--ai-header-h); right: 0; bottom: 0; z-index: 20; width: min(var(--ai-guide-panel-w), 92vw); display: flex; flex-direction: column; padding: 22px 20px 24px; border-left: 1px solid rgba(255, 255, 255, 0.55); background: color-mix(in srgb, var(--ai-bg) 90%, var(--ai-surface)); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; transform: translateX(105%); transition: transform 0.28s var(--ai-ease); overflow: hidden; } .ai-guide-panel::before { display: none; } .ai-guide-panel > * { position: relative; z-index: 1; } #ai-advisor-shell.ai-guide-open .ai-guide-panel { transform: translateX(0); } .ai-guide-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .ai-guide-panel__kicker { margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-gold); } .ai-guide-panel__title { margin: 0; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ai-ink); } .ai-guide-panel__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; color: var(--ai-text-2); cursor: pointer; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } .ai-guide-panel__close:hover { color: var(--ai-action); border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); } .ai-guide-panel__sub { margin: 0 0 14px; font-size: 0.86rem; line-height: 1.55; color: var(--ai-text-3); } .ai-guide-panel__cards { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 10px; padding-right: 0; scrollbar-width: none; -ms-overflow-style: none; } .ai-guide-panel__cards::-webkit-scrollbar { display: none; } .ai-guide-card { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; column-gap: 12px; min-height: 104px; padding: 18px 16px 18px 14px; border-radius: 20px; text-align: left; color: inherit; cursor: pointer; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } .ai-guide-card::before, .ai-guide-card::after { display: none; } .ai-guide-card:hover, .ai-guide-card:focus-visible { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); box-shadow: none; transform: none; } .ai-guide-card:hover .ai-guide-card__title, .ai-guide-card:focus-visible .ai-guide-card__title { color: var(--ai-action); } .ai-guide-card__icon { display: flex; align-items: flex-start; justify-content: center; width: 36px; margin-top: 2px; padding: 0; border: none; background: none; box-shadow: none; color: var(--ai-ink); } .ai-guide-card__icon .ai-icon { width: 32px; height: 32px; } .ai-guide-card__copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; min-height: calc(0.98rem * 1.35 + 6px + 0.82rem * 1.65 * 2); } .ai-guide-card__head { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: calc(0.98rem * 1.35); } .ai-guide-card__tag { flex-shrink: 0; display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.28); color: var(--ai-action); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; } .ai-guide-card__title { display: block; min-width: 0; margin: 0; font-size: 0.98rem; font-weight: 700; line-height: 1.35; color: var(--ai-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-guide-card__body { display: -webkit-box; margin: 0; min-height: calc(0.82rem * 1.65 * 2); font-size: 0.82rem; line-height: 1.65; color: var(--ai-muted); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .ai-history-sidebar__title { margin: 0 0 10px; padding: 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai-muted); } .ai-new-chat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 38px; margin-bottom: 12px; padding: 0 12px; border-radius: 14px; color: var(--ai-text-2); font-size: 0.84rem; font-weight: 600; cursor: pointer; } .ai-new-chat-btn i { font-size: 0.95rem; line-height: 1; color: var(--ai-text-3); transition: color 0.2s var(--ai-ease); } .ai-new-chat-btn:hover { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); color: var(--ai-action); } .ai-new-chat-btn:hover i { color: var(--ai-action); } .ai-history-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; -ms-overflow-style: none; } .ai-history-list::-webkit-scrollbar { display: none; } .ai-history-empty { margin: 12px 6px 0; font-size: 0.82rem; color: var(--ai-muted); } .ai-history-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; text-align: left; cursor: pointer; color: inherit; } .ai-history-item:hover, .ai-history-item.is-active { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); } .ai-history-item.is-active .ai-history-item__title { color: var(--ai-action); } .ai-history-item__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; color: var(--ai-text-3); font-size: 0.85rem; transition: color 0.2s var(--ai-ease); } .ai-history-item:hover .ai-history-item__icon, .ai-history-item.is-active .ai-history-item__icon { color: var(--ai-action); } .ai-history-item__title { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ai-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-history-item__time { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--ai-muted); } /* —— Welcome / command doors —— */ .ai-app-main { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0 16px; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .ai-app-main.is-scrolled, .ai-app-main.is-overflowing, .ai-app-main.is-scrolled.is-overflowing { -webkit-mask-image: none; mask-image: none; } .ai-app-main::-webkit-scrollbar { width: 0; height: 0; display: none; } .ai-welcome { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 0 0 16px; animation: ai-h5-rise-in 0.42s var(--ai-ease) both; } .ai-welcome.is-hidden { display: none; } @keyframes ai-h5-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ai-welcome__hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 8px 12px; isolation: isolate; } .ai-welcome__hero::before { content: ''; position: absolute; top: -8px; left: 50%; z-index: 0; width: min(920px, 108vw); height: clamp(220px, 34vh, 320px); transform: translateX(-50%); pointer-events: none; --ai-hero-grid-line: color-mix(in srgb, var(--ai-sky) 8%, var(--ai-border)); background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 47px, var(--ai-hero-grid-line) 47px, var(--ai-hero-grid-line) 48px ), repeating-linear-gradient( 90deg, transparent 0, transparent 47px, var(--ai-hero-grid-line) 47px, var(--ai-hero-grid-line) 48px ); opacity: 0.18; -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 46%, #000 0%, transparent 74%), linear-gradient(to bottom, #000 0%, #000 48%, transparent 92%); mask-image: radial-gradient(ellipse 70% 78% at 50% 46%, #000 0%, transparent 74%), linear-gradient(to bottom, #000 0%, #000 48%, transparent 92%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ai-welcome__hero::after { content: ''; position: absolute; top: -24px; left: 50%; z-index: 0; width: min(980px, 110vw); height: clamp(260px, 42vh, 420px); transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 46% 58% at 42% 48%, rgba(var(--ai-sky-rgb), 0.07), transparent 72%), radial-gradient(ellipse 38% 48% at 62% 56%, rgba(var(--ai-gold-rgb), 0.045), transparent 74%); opacity: 0.75; } .ai-welcome__stack { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; width: min(900px, 94vw); margin-top: -64px; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; overflow: visible; } .ai-welcome__deck { position: relative; z-index: 1; width: 100%; margin: 0; padding: 20px 22px 18px; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .ai-welcome__intro { text-align: center; } .ai-welcome-title { display: block; width: auto; max-width: 100%; margin: 0 auto 14px; font-size: clamp(1.12rem, 1.6vw + 0.6rem, 2.05rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.22; white-space: normal; text-align: center; color: var(--kc-primary, #054f74); } .ai-welcome-sub { margin: 0 auto 0; max-width: none; font-size: 0.92rem; line-height: 1.45; color: var(--ai-text-2); white-space: nowrap; } .ai-welcome-sub__accent { font-weight: 700; color: var(--ai-sky); } .ai-welcome__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ai-border) 70%, transparent); } .ai-welcome__command { padding: 0 4px 4px; border-top: none; background: transparent; } .ai-welcome__command .ai-intent-grid { gap: 10px 14px; margin-top: 4px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ai-border) 50%, transparent); } /* 首页意图卡片 — 极简磨砂玻璃 */ .ai-welcome__command .ai-intent-door { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 20px; padding: 14px 14px; background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease); } .ai-welcome__command .ai-intent-door::before, .ai-welcome__command .ai-intent-door::after { display: none; } .ai-welcome__command .ai-intent-door__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: none; background: transparent; box-shadow: none; } .ai-welcome__command .ai-intent-door.is-primary { position: relative; padding: 18px 16px 18px 18px; background: linear-gradient( 145deg, color-mix(in srgb, var(--ai-gold) 12%, rgba(255, 255, 255, 0.5)) 0%, var(--ai-acrylic-bg-primary) 48%, rgba(255, 255, 255, 0.36) 100% ); border-color: color-mix(in srgb, var(--ai-gold) 34%, rgba(255, 255, 255, 0.8)); box-shadow: 0 8px 24px rgba(var(--ai-gold-rgb), 0.08); } .ai-welcome__command .ai-intent-door.is-primary .ai-intent-door__icon { width: 52px; height: 52px; background: transparent; border: none; box-shadow: none; } .ai-welcome__command .ai-intent-door.is-primary .ai-icon--illus { width: 48px; height: 48px; } .ai-welcome__command .ai-intent-door.is-primary .ai-intent-door__title { color: var(--ai-action); } .ai-welcome__command .ai-intent-door:hover { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); box-shadow: none; transform: none; } .ai-welcome__command .ai-intent-door.is-primary:hover { background: linear-gradient( 145deg, color-mix(in srgb, var(--ai-gold) 16%, rgba(255, 255, 255, 0.55)) 0%, rgba(255, 255, 255, 0.5) 100% ); border-color: color-mix(in srgb, var(--ai-gold) 42%, rgba(255, 255, 255, 0.9)); box-shadow: 0 10px 28px rgba(var(--ai-gold-rgb), 0.12); } .ai-welcome__command .ai-intent-door__title { font-weight: 700; letter-spacing: -0.01em; } .ai-welcome__command .ai-intent-door__hint { color: var(--ai-text-2); } .ai-welcome-plane { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; margin: -18px 0 -8px; pointer-events: none; } .ai-welcome-plane img { position: relative; z-index: 2; width: min(820px, 96vw); height: auto; display: block; filter: drop-shadow(0 18px 42px rgba(var(--ai-sky-rgb), 0.14)); transform-origin: 50% 60%; animation: aiPlaneIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes aiPlaneIn { from { opacity: 0; transform: translate3d(-10%, 18%, 0) scale(0.72) rotate(-3deg); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } } .ai-welcome__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } .ai-welcome-cta { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 40px; padding: 0 22px; margin: 0; border-radius: 999px; background: var(--ai-action); color: #fff; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; box-shadow: 0 8px 22px rgba(var(--ai-action-rgb), 0.22); transition: background 0.2s var(--ai-ease), transform 0.15s var(--ai-ease), box-shadow 0.2s var(--ai-ease); } .ai-welcome-cta:hover { background: var(--ai-action-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--ai-action-rgb), 0.28); } .ai-welcome-human { display: inline-flex; align-items: center; justify-content: center; color: var(--ai-sky); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ai-ease); } .ai-welcome-human:hover { color: var(--ai-sky-hover); } .ai-welcome-stats { display: flex; align-items: center; justify-content: flex-start; flex: 1; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 0; } .ai-welcome-stats-block { flex: 1; min-width: 0; } .ai-welcome-stats-block.is-open .ai-welcome-stats__trigger { color: var(--ai-sky); } .ai-welcome-stats__trigger { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; padding: 2px 8px 4px; border: none; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } .ai-welcome-stats__trigger:hover, .ai-welcome-stats-block.is-open .ai-welcome-stats__trigger { background: color-mix(in srgb, var(--ai-sky-soft) 70%, transparent); color: var(--ai-sky); } .ai-welcome-stats__trigger .ai-welcome-stats__value, .ai-welcome-stats__trigger .ai-welcome-stats__meta, .ai-welcome-stats__trigger .ai-welcome-stats__label, .ai-welcome-stats__trigger .ai-welcome-stats__hint { pointer-events: none; } .ai-welcome-stats__meta { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; max-width: 100%; line-height: 1.25; } .ai-welcome-stats__hint { display: inline; font-size: 0.58rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: var(--ai-sky); opacity: 0.9; white-space: nowrap; } .ai-welcome-stats-block.is-open .ai-welcome-stats__hint { opacity: 0.55; } .ai-cover-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ai-border) 55%, transparent); } .ai-cover-panel__hint { margin: 0 0 10px; font-size: 0.66rem; font-weight: 600; line-height: 1.4; text-align: center; color: var(--ai-text-3); } .ai-cover-panel[hidden] { display: none; } .ai-cover-panel .ai-cover__chips, .ai-cover-panel .ai-cover__eu, .ai-cover-panel .ai-cover__sea-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ai-cover-panel .ai-cover__eu { margin-top: 8px; } .ai-cover-panel .ai-cover__eu[hidden] { display: none; } .ai-cover-panel .ai-cover__sea { margin-top: 8px; } .ai-cover-chip.is-map-active { color: var(--ai-action); background: var(--ai-primary-soft); border-color: color-mix(in srgb, var(--ai-action) 45%, var(--ai-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-action) 14%, transparent); } .ai-welcome-stats__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 0 8px; text-align: center; } .ai-welcome-stats__item + .ai-welcome-stats__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 26px; transform: translateY(-50%); background: color-mix(in srgb, var(--ai-border) 85%, transparent); } .ai-welcome-stats__value { font-size: clamp(0.95rem, 0.5vw + 0.75rem, 1.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--kc-primary, #054f74); } .ai-welcome-stats__label { font-size: 0.66rem; font-weight: 600; line-height: 1.25; color: var(--ai-text-3); white-space: nowrap; } .ai-intent-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; grid-template-rows: auto auto; gap: 8px; } .ai-intent-door.is-primary { grid-row: 1 / span 2; grid-column: 1; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 156px; padding: 18px 16px; } .ai-intent-door.is-primary .ai-intent-door__icon { width: 48px; } .ai-intent-door.is-primary .ai-intent-door__icon .ai-icon { width: 44px; height: 44px; } .ai-intent-door.is-primary .ai-intent-door__icon .ai-icon--illus { width: 48px; height: 48px; } .ai-intent-door.is-primary .ai-intent-door__hint { font-size: 0.82rem; } .ai-intent-door:nth-child(2) { grid-column: 2; grid-row: 1; } .ai-intent-door:nth-child(3) { grid-column: 3; grid-row: 1; } .ai-intent-door:nth-child(4) { grid-column: 2; grid-row: 2; } .ai-intent-door:nth-child(5) { grid-column: 3; grid-row: 2; } .ai-cover-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--ai-border); border-radius: 999px; background: var(--ai-input-bg); color: var(--ai-text-2); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease), box-shadow 0.2s var(--ai-ease); } .ai-cover-chip:hover { background: var(--ai-surface); border-color: color-mix(in srgb, var(--ai-action) 40%, var(--ai-border)); color: var(--ai-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-action) 14%, transparent); } .ai-cover-chip.is-eu[aria-expanded='true'] { color: var(--ai-action); background: var(--ai-primary-soft); border-color: color-mix(in srgb, var(--ai-action) 45%, var(--ai-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-action) 14%, transparent); } .ai-cover-chip:disabled { opacity: 0.5; cursor: not-allowed; } .ai-intent-door { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; min-height: 0; padding: 16px 16px 16px 14px; text-align: left; border-radius: var(--ai-radius); color: inherit; cursor: pointer; } .ai-intent-door.is-primary { background: linear-gradient( 145deg, color-mix(in srgb, var(--ai-gold) 14%, #fff) 0%, var(--ai-surface) 58% ); border-color: color-mix(in srgb, var(--ai-gold) 36%, var(--ai-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai-gold) 10%, transparent); } .ai-intent-door.is-primary .ai-intent-door__title { color: var(--ai-action); } .ai-intent-door.is-primary .ai-icon .ai-icon__accent, .ai-intent-door.is-primary .ai-icon .ai-icon__accent-fill { stroke: var(--ai-gold); fill: var(--ai-gold); } .ai-intent-door:hover { transform: translateY(-2px); border-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(255, 255, 255, 0.36), 0 0 0 1px var(--ai-glass-hairline), 0 12px 28px rgba(15, 23, 42, 0.08); } .ai-intent-door:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .ai-icon { width: 36px; height: 36px; display: block; overflow: visible; } .ai-icon:not(.ai-icon--illus) > * { fill: none; stroke: var(--ai-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ai-icon .ai-icon__accent { stroke: var(--ai-sky); } .ai-icon .ai-icon__accent-fill { fill: var(--ai-sky); stroke: none; } .ai-icon.ai-icon--illus { width: 44px; height: 44px; flex-shrink: 0; } .ai-intent-door__icon { display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; width: 44px; height: auto; padding: 0; border: none; background: none; box-shadow: none; color: var(--ai-ink); } .ai-intent-door__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; } .ai-intent-door__title { font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: var(--ai-text); } .ai-intent-door__hint { font-size: 0.8rem; line-height: 1.5; color: var(--ai-text-2); } /* —— Partner marquee (platforms + carriers) —— */ .ai-partner-marquee { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; } .ai-partner-marquee__tag { flex-shrink: 0; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ai-sky) 22%, rgba(255, 255, 255, 0.72)); background: color-mix(in srgb, var(--ai-sky-soft) 75%, rgba(255, 255, 255, 0.4)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ai-action); white-space: nowrap; } .ai-partner-marquee__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ai-partner-marquee__track { display: flex; align-items: center; gap: 10px; width: max-content; padding: 2px 0; animation: aiPartnerScroll 36s linear infinite; } .ai-partner-marquee:hover .ai-partner-marquee__track, .ai-partner-marquee:focus-within .ai-partner-marquee__track { animation-play-state: paused; } .ai-partner-chip { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); color: var(--ai-text); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), color 0.2s var(--ai-ease); } .ai-partner-chip__logo { width: 15px; height: 15px; flex-shrink: 0; display: block; object-fit: contain; } .ai-partner-chip__label { line-height: 1; } .ai-partner-chip--carrier { color: var(--ai-text-2); font-weight: 600; } .ai-partner-chip:hover, .ai-partner-chip:focus-visible { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); color: var(--ai-action); outline: none; } .ai-partner-chip:disabled { opacity: 0.55; cursor: not-allowed; } @keyframes aiPartnerScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .ai-partner-marquee__track { animation: none; flex-wrap: wrap; width: auto; max-width: 100%; } .ai-partner-marquee__viewport { mask-image: none; -webkit-mask-image: none; overflow: visible; } } /* —— Messages —— */ .ai-messages { display: none; flex-direction: column; gap: 18px; padding: 20px 0 12px; } .ai-messages.is-active { display: flex; } .ai-msg-row { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; animation: ai-msg-in 0.3s ease; } @keyframes ai-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ai-msg-row--user { flex-direction: row-reverse; align-self: flex-end; } .ai-msg-row--assistant { align-self: flex-start; } .ai-msg-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .ai-msg-row--assistant .ai-msg-avatar { background: var(--ai-primary-soft); color: var(--ai-action); } .ai-msg-row--user .ai-msg-avatar { background: rgba(var(--ai-navy-rgb), 0.08); color: var(--ai-ink); font-size: 0.72rem; font-weight: 700; } .ai-msg-bubble { max-width: min(680px, 90%); padding: 12px 16px; border-radius: 16px; font-size: 0.94rem; line-height: 1.6; } .ai-msg-row--user .ai-msg-bubble { background: var(--ai-action); color: #fff; border-bottom-right-radius: 6px; } .ai-msg-row--assistant .ai-msg-bubble { color: var(--ai-ink); border-bottom-left-radius: 6px; } .ai-msg-row--assistant .ai-msg-bubble:has(.ai-card) { padding: 0; background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; isolation: auto; } .ai-msg-row--assistant .ai-msg-bubble:has(.ai-card)::before { content: none; } .ai-msg-text { margin: 0; } .ai-msg-text + .ai-card { margin-top: 12px; } .ai-msg-row--typing .ai-msg-bubble { display: flex; gap: 5px; align-items: center; padding: 14px 18px; } .ai-msg-row--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-muted); animation: ai-typing 1.2s ease-in-out infinite; } .ai-msg-row--typing span:nth-child(2) { animation-delay: 0.15s; } .ai-msg-row--typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes ai-typing { 0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } /* Cards inside assistant replies — 极简磨砂玻璃 */ .ai-card { position: relative; isolation: isolate; overflow: hidden; padding: 18px 18px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: none; } .ai-card::before, .ai-card::after { display: none; } .ai-card > * { position: relative; z-index: 1; } .ai-card__kicker { margin: 0 0 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai-gold); } .ai-card__title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: var(--ai-ink); } .ai-card__metric { margin: 0 0 10px; font-size: 1.35rem; font-weight: 700; color: var(--ai-gold); } .ai-card__body, .ai-card li { color: var(--ai-text-2); font-size: 0.88rem; line-height: 1.55; } .ai-card ul { margin: 0 0 10px; padding: 0 0 0 16px; } .ai-card__list { display: grid; gap: 8px; margin: 0 0 12px; } .ai-card__item { padding: 10px 12px; border-radius: var(--ai-radius-sm); text-align: left; border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; box-shadow: none; } .ai-card__item strong { display: block; color: var(--ai-ink); font-size: 0.88rem; } .ai-card__item span { display: block; margin-top: 3px; color: var(--ai-text-3); font-size: 0.78rem; line-height: 1.45; } .ai-card__rows { display: grid; gap: 6px; margin: 0 0 12px; } .ai-card__row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; } .ai-card__row span { color: var(--ai-text-3); } .ai-card__row strong { color: var(--ai-ink); font-weight: 600; text-align: right; } .ai-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ai-card-opt, .ai-card-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 14px; color: var(--ai-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; } .ai-card-opt:hover, .ai-card-link:hover { border-color: color-mix(in srgb, var(--ai-action) 35%, var(--ai-border)); background: var(--ai-surface); color: var(--ai-text); } .ai-card-opt.is-primary, .ai-card-link.is-primary { border: none; background: var(--ai-action); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--ai-action) 26%, transparent); } .ai-card-opt.is-primary:hover, .ai-card-link.is-primary:hover { background: var(--ai-action-hover); color: #fff; } .ai-card--warn .ai-card__kicker { color: var(--ai-gold); } .ai-track-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; } .ai-track-steps span { padding: 4px 8px; border-radius: 999px; background: var(--ai-primary-soft); color: var(--ai-text-2); font-size: 0.72rem; } .ai-followup { flex-shrink: 0; display: none; gap: 8px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; } .ai-followup.is-visible { display: flex; } .ai-followup::-webkit-scrollbar { display: none; } .ai-followup-chip { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; color: var(--ai-text-2); font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .ai-followup-chip:hover { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.44); color: var(--ai-action); } .ai-followup-chip:disabled { opacity: 0.5; cursor: not-allowed; } .ai-welcome-compose { margin: 0; padding: 2px 2px 4px; } .ai-welcome-compose__lead { margin: 0 0 12px; padding: 0 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-align: left; text-transform: uppercase; color: var(--ai-text-3); } .ai-composer-wrap.is-welcome .ai-composer { min-height: 72px; padding: 12px 14px 12px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.72); background: var(--ai-acrylic-bg); box-shadow: none; } .ai-composer-wrap.is-welcome .ai-composer::before { display: none; } .ai-composer-dock { display: flex; flex-direction: column; flex-shrink: 0; overflow: visible; } .ai-composer-slot--welcome:empty, .ai-composer-slot--chat:empty { display: none; } /* Composer + trust strip */ .ai-composer-wrap { position: relative; flex-shrink: 0; } .ai-new-chat-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 6; display: inline-flex; align-items: center; max-width: min(92%, 360px); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.78); background: rgba(5, 79, 116, 0.92); color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; transform: translate(-50%, 6px); opacity: 0; box-shadow: 0 10px 28px rgba(5, 79, 116, 0.22); transition: opacity 0.28s var(--ai-ease), transform 0.28s var(--ai-ease); } .ai-new-chat-tip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin-left: -5px; background: rgba(5, 79, 116, 0.92); border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5); transform: rotate(45deg) translateY(-4px); } .ai-new-chat-tip[hidden] { display: none !important; } .ai-new-chat-tip.is-visible { opacity: 1; transform: translate(-50%, 0); } .ai-composer-wrap.has-new-chat-tip .ai-composer { animation: ai-composer-tip-pulse 1.1s var(--ai-ease) 2; } @keyframes ai-composer-tip-pulse { 0%, 100% { box-shadow: none; } 45% { box-shadow: 0 0 0 3px rgba(5, 79, 116, 0.18); } } .ai-composer-wrap.is-welcome { padding: 0; border-top: none; } .ai-composer-wrap.is-welcome .ai-composer { min-height: 72px; } .ai-composer-wrap.is-docked { padding: 10px 0 0; border-top: 1px solid color-mix(in srgb, var(--ai-border) 45%, transparent); } .ai-composer-wrap.is-docked .ai-composer { box-shadow: none; } .ai-composer__caustic, .ai-composer__sheen { display: none; } .ai-composer-form { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; } .ai-composer-input { flex: 1; min-height: 56px; max-height: 160px; padding: 14px 6px; border: none; background: transparent; color: var(--ai-ink); font-size: 1.02rem; line-height: 1.5; resize: none; } .ai-composer-input:focus { outline: none; } .ai-composer-input::placeholder { color: var(--ai-text-3); } .ai-composer-send { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--ai-action); color: #fff; font-size: 1.35rem; box-shadow: 0 0 0 4px var(--ai-bg); cursor: pointer; transition: background 0.2s var(--ai-ease), transform 0.15s var(--ai-ease); } .ai-composer-send i { font-size: 1.2rem; line-height: 1; } .ai-composer-send.is-empty { background: color-mix(in srgb, var(--ai-text-3) 18%, #e9edf0); color: color-mix(in srgb, var(--ai-text-3) 70%, #fff); cursor: default; transform: none; } .ai-composer-send.is-empty:hover { background: color-mix(in srgb, var(--ai-text-3) 18%, #e9edf0); transform: none; } .ai-composer-send:hover:not(:disabled):not(.is-empty) { background: var(--ai-action-hover); transform: translateY(-1px); } .ai-composer-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } @keyframes aiComposerSheen { 0%, 18% { transform: translateX(-70%) rotate(12deg); opacity: 0; } 38% { opacity: 0.95; } 72%, 100% { transform: translateX(340%) rotate(12deg); opacity: 0; } } @keyframes aiComposerCaustic { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; } 50% { transform: translate3d(-10%, -8%, 0) scale(1.12); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ai-composer__sheen, .ai-composer__caustic, .ai-intent-door::after, .ai-composer-wrap.has-new-chat-tip .ai-composer { animation: none; } .ai-new-chat-tip { transition: none; } } .ai-trust-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--ai-content-max) - 40px)) minmax(0, 1fr); align-items: center; column-gap: 16px; width: 100vw; max-width: 100vw; margin: 4px 0 0; margin-left: calc(50% - 50vw); padding: 10px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); box-sizing: border-box; border-top: 1px solid color-mix(in srgb, var(--ai-border) 55%, transparent); color: var(--ai-text-3); font-size: 0.72rem; } .ai-trust-bar a, .ai-trust-wechat { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--ai-text-3); text-decoration: none; } .ai-trust-bar a i, .ai-trust-wechat i { font-size: 0.92rem; line-height: 1; color: var(--ai-action); flex-shrink: 0; } .ai-trust-bar a:hover, .ai-trust-wechat:hover { color: var(--ai-text); } .ai-trust-bar a:hover i, .ai-trust-wechat:hover i { color: var(--ai-action); } .ai-trust-wechat { grid-column: 1; justify-self: start; margin: 0; padding: 0; border: none; background: none; font: inherit; cursor: pointer; white-space: nowrap; } .ai-trust-bar .ai-partner-marquee { grid-column: 2; width: 100%; max-width: 100%; min-width: 0; margin: 0; } .ai-trust-icp { grid-column: 3; justify-self: end; white-space: nowrap; } @media (max-height: 860px) { .ai-app-main { padding-top: 4px; } .ai-welcome-plane { margin-top: -28px; margin-bottom: -12px; } .ai-welcome__stack { margin-top: -76px; gap: 16px; } .ai-welcome__deck { padding-top: 12px; padding-bottom: 10px; } .ai-welcome__command .ai-intent-grid { padding-top: 12px; } .ai-partner-marquee { margin-top: 0; gap: 8px; } .ai-partner-marquee__tag { display: none; } .ai-partner-chip { min-height: 30px; padding: 0 12px; font-size: 0.76rem; } .ai-partner-marquee__track { animation-duration: 42s; } } @media (max-width: 860px) { .ai-stage-map--eu { top: 0; left: 0; width: min(54vw, 480px); height: min(46%, 480px); transform: none; opacity: 0.38; } .ai-stage-map--am { top: calc(var(--ai-header-h) - 10px); right: 64px; width: min(56vw, 460px); height: min(38vh, 360px); opacity: 0.38; } .ai-stage-map--cn { width: min(92%, 440px); height: min(70%, 200px); opacity: 0.22; } .ai-stage-map--sea, .ai-stage-map--au { width: min(42vw, 320px); height: min(24vh, 200px); opacity: 0.32; } .ai-intent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .ai-intent-door.is-primary, .ai-intent-door:nth-child(2), .ai-intent-door:nth-child(3), .ai-intent-door:nth-child(4), .ai-intent-door:nth-child(5) { grid-column: auto; grid-row: auto; min-height: 0; flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px 16px 16px 14px; } .ai-intent-door.is-primary .ai-intent-door__icon, .ai-intent-door.is-primary .ai-intent-door__icon .ai-icon { width: 40px; height: 40px; } .ai-intent-door.is-primary .ai-intent-door__icon .ai-icon--illus, .ai-welcome__command .ai-intent-door .ai-icon--illus { width: 40px; height: 40px; } .ai-welcome__command .ai-intent-door.is-primary { padding: 16px 14px; border-radius: 20px; } .ai-welcome__command .ai-intent-door { border-radius: 20px; } .ai-welcome-plane img { width: min(620px, 96vw); } .ai-welcome__hero::before { width: min(680px, 112vw); height: clamp(180px, 30vh, 260px); opacity: 0.3; background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 39px, var(--ai-hero-grid-line) 39px, var(--ai-hero-grid-line) 40px ), repeating-linear-gradient( 90deg, transparent 0, transparent 39px, var(--ai-hero-grid-line) 39px, var(--ai-hero-grid-line) 40px ); } } @media (max-width: 780px) { .ai-welcome__foot { flex-direction: column; align-items: stretch; gap: 12px; } .ai-welcome-stats { justify-content: center; } .ai-welcome__actions { align-items: center; width: 100%; } .ai-welcome-cta { width: 100%; } } @media (max-width: 640px) { .ai-advisor-layout { padding: 6px 14px 0; } .ai-welcome { min-height: 0; padding-top: 0; } .ai-welcome__hero { padding-bottom: 10px; } .ai-stage-map--sea, .ai-stage-map--au { display: none; } .ai-stage-map--eu { top: 0; left: 0; width: min(52vw, 320px); height: min(34%, 320px); transform: none; } .ai-stage-map--am { top: calc(var(--ai-header-h) + 8px); width: min(52vw, 300px); height: min(26vh, 220px); } .ai-stage-map--cn { width: min(94%, 360px); height: min(68%, 160px); } .ai-welcome__foot { flex-direction: column; align-items: stretch; } .ai-welcome-stats-block { width: 100%; } .ai-welcome__stack { margin-top: -48px; } .ai-partner-marquee { min-width: 0; } .ai-partner-marquee__tag { display: none; } .ai-partner-marquee__viewport { flex: 1 1 auto; } .ai-welcome__deck { padding: 14px 8px 12px; } .ai-welcome__command { padding: 0 0 4px; } .ai-welcome-title { font-size: clamp(1rem, 4.5vw, 1.4rem); } .ai-welcome-sub { font-size: 0.84rem; white-space: nowrap; overflow-x: auto; max-width: 94vw; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ai-welcome-sub::-webkit-scrollbar { display: none; } .ai-trust-bar { gap: 8px 14px; } .ai-new-chat-tip { max-width: min(94vw, 320px); white-space: normal; text-align: center; border-radius: 14px; } .ai-composer { min-height: 76px; padding: 12px 12px 12px 18px; border-radius: 26px; } .ai-composer-input { min-height: 48px; font-size: 1rem; } .ai-composer-send { width: 46px; height: 46px; } } /* 企业微信客服 — PC 扫码浮层 */ .ide-kf-modal { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 24px; } .ide-kf-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 18, 28, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ide-kf-modal__panel { position: relative; z-index: 1; width: min(100%, 360px); padding: 28px 24px 22px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ai-border) 80%, transparent); background: var(--ai-surface, #fff); box-shadow: 0 24px 64px rgba(12, 18, 28, 0.22); text-align: center; } .ide-kf-modal__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; margin: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--ai-text-3, #6b7280); cursor: pointer; } .ide-kf-modal__close:hover { color: var(--ai-text, #111); background: color-mix(in srgb, var(--ai-border) 40%, transparent); } .ide-kf-modal__kicker { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ai-text-3, #6b7280); } .ide-kf-modal__title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 650; color: var(--ai-text, #111); } .ide-kf-modal__hint { margin: 0 0 18px; font-size: 0.84rem; line-height: 1.5; color: var(--ai-text-2, #4b5563); } .ide-kf-modal__qr-wrap { display: grid; place-items: center; margin: 0 auto 16px; padding: 12px; width: fit-content; border-radius: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--ai-border) 70%, transparent); } .ide-kf-modal__qr { display: block; width: 220px; height: 220px; } .ide-kf-modal__qr-fallback { margin: 0; max-width: 220px; font-size: 0.8rem; line-height: 1.45; color: var(--ai-text-2, #4b5563); } .ide-kf-modal__open { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; color: var(--ai-action, #1d7281); text-decoration: none; } .ide-kf-modal__open:hover { text-decoration: underline; } button.ai-card-link { font: inherit; cursor: pointer; }