/* ===== 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: #e9ecf1; --ai-bg-soft: #f2f4f8; --ai-surface: #ffffff; --ai-text: #121820; --ai-text-2: #3a4450; --ai-text-3: #66707d; --ai-border: #d2d8e0; --ai-border-soft: #e2e7ee; --ai-input-bg: #e4e8ef; --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%, #f8fafc 100%); --ai-glass-shadow: none; --ai-action: #1d7281; --ai-action-hover: #186170; --ai-action-rgb: 29, 114, 129; --ai-primary-soft: #d2e9ec; --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, 0, 56, 96); --ai-accent-rgb: var(--ai-action-rgb); --ai-canvas: var(--ai-bg); --ai-ink: var(--ai-text); --ai-muted: var(--ai-text-2); --ai-line: var(--ai-border); --ai-glass: var(--ai-surface); --ai-gold: var(--ai-action); --ai-content-max: 1120px; --ai-guide-panel-w: 520px; } 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: color-mix(in srgb, var(--ai-surface) 98%, transparent); backdrop-filter: blur(14px) saturate(165%); -webkit-backdrop-filter: blur(14px) saturate(165%); border-bottom: 1px solid var(--ai-border); 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; } @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: flex-end; justify-content: center; gap: 2px; padding: 5px 6px 6px; border-radius: 22px; border: 1px solid var(--ai-border); background: var(--ai-surface); backdrop-filter: blur(14px) saturate(165%); -webkit-backdrop-filter: blur(14px) saturate(165%); box-shadow: var(--ai-shadow); } body.command-home #navbar li.site-nav-dock:hover > a, body.command-home #navbar .site-nav-dock:hover > a { color: var(--ai-text-2); background: transparent; } 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: 36px; padding: 0 16px; border-radius: 16px; color: var(--ai-text-2); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; background: transparent; transform-origin: 50% 100%; transition: background 0.18s var(--ai-ease), color 0.18s var(--ai-ease), transform 0.18s 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); background: var(--ai-primary-soft); } body.command-home #navbar .site-nav-dock a.active, body.command-home #navbar .site-nav-dock a.active:focus { padding-right: 22px; } body.command-home #navbar .site-nav-dock a:hover { transform: translateY(-3px) scale(1.06); } body.command-home #navbar .site-nav-dock a.active::after { content: ''; position: absolute; top: 50%; right: 8px; left: auto; bottom: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--ai-action); transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(var(--ai-action-rgb), 0.16); } 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, #003860); 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 var(--ai-border); border-radius: var(--ai-radius-sm); background: var(--ai-surface); color: var(--ai-text); box-shadow: none; cursor: pointer; transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease), box-shadow 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 { border-color: color-mix(in srgb, var(--ai-action) 35%, var(--ai-border)); background: var(--ai-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-action) 12%, transparent); 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: var(--ai-bg); } .ai-shell-bg__blobs, .ai-shell-bg__blobs::before, .ai-shell-bg__blobs::after { position: absolute; border-radius: 50%; filter: blur(68px); transform: translateZ(0); pointer-events: none; } .ai-shell-bg__blobs { width: min(88vw, 900px); height: min(72vh, 720px); top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.45) 50%, transparent 78%); animation: ai-bg-drift-a 20s ease-in-out infinite; } .ai-shell-bg__blobs::before { content: ''; width: min(64vw, 640px); height: min(64vw, 640px); top: 6%; right: -8%; left: auto; transform: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.28) 48%, transparent 78%); animation: ai-bg-drift-b 24s ease-in-out infinite; } .ai-shell-bg__blobs::after { content: ''; width: min(58vw, 580px); height: min(58vw, 580px); bottom: -6%; left: -2%; background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.24) 46%, transparent 78%); animation: ai-bg-drift-c 18s ease-in-out infinite; } .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.62; 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; } @keyframes ai-bg-drift-a { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(calc(-50% + 2%), calc(-50% + 3%)) scale(1.05); } } @keyframes ai-bg-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 4%) scale(1.1); } } @keyframes ai-bg-drift-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -5%) scale(1.06); } } /* iOS liquid glass — intent doors, reply cards */ .ai-intent-door, .ai-card { 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, .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.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, .ai-card::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 > *, .ai-card > * { 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-composer, .ai-msg-row--assistant .ai-msg-bubble, .ai-guide-panel, .ai-history-sidebar { 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 { overflow: hidden; } .ai-composer::before, .ai-msg-row--assistant .ai-msg-bubble:not(:has(.ai-card))::before, .ai-guide-panel::before, .ai-history-sidebar::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 > *, .ai-guide-panel > *, .ai-history-sidebar > * { position: relative; z-index: 1; } .ai-card-opt, .ai-card-link, .ai-followup-chip, .ai-sidebar-toggle, .ai-new-chat-ghost, .ai-new-chat-btn, .ai-guide-panel__close, .ai-card__item, .ai-history-item { 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, .ai-followup-chip::before, .ai-sidebar-toggle::before, .ai-new-chat-ghost::before, .ai-new-chat-btn::before, .ai-guide-panel__close::before, .ai-card__item::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: hidden; } /* History is a drawer, never a second brand column */ .ai-stage-tools { position: absolute; top: 8px; left: 0; z-index: 3; } .ai-sidebar-toggle, .ai-new-chat-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 12px; color: var(--ai-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .ai-sidebar-toggle { width: 34px; padding: 0; margin-right: 6px; } .ai-sidebar-toggle:hover, .ai-new-chat-ghost:hover { color: var(--ai-action); border-color: color-mix(in srgb, var(--ai-action) 35%, var(--ai-border)); background: var(--ai-primary-soft); } .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 var(--ai-border); transform: translateX(-105%); transition: transform 0.28s var(--ai-ease); } #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: rgba(14, 29, 52, 0.28); 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 var(--ai-border); transform: translateX(105%); transition: transform 0.28s var(--ai-ease); overflow: hidden; } #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: 10px; color: var(--ai-muted); cursor: pointer; } .ai-guide-panel__close:hover { color: var(--ai-action); border-color: color-mix(in srgb, var(--ai-action) 35%, var(--ai-border)); background: var(--ai-primary-soft); } .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: 8px; 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: 16px; text-align: left; color: inherit; cursor: pointer; border: 1px solid var(--ai-border-soft); background: var(--ai-surface); transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease); } .ai-guide-card:hover, .ai-guide-card:focus-visible { border-color: color-mix(in srgb, var(--ai-action) 28%, var(--ai-border-soft)); background: color-mix(in srgb, var(--ai-primary-soft) 18%, var(--ai-surface)); } .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; background: var(--ai-primary-soft); 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-ink); font-size: 0.84rem; font-weight: 600; cursor: pointer; } .ai-new-chat-btn i { color: var(--ai-gold); } .ai-new-chat-btn:hover { border-color: color-mix(in srgb, var(--ai-action) 35%, var(--ai-border)); background: var(--ai-primary-soft); color: var(--ai-action); } .ai-history-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; 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; border-radius: 14px; text-align: left; cursor: pointer; color: inherit; } .ai-history-item:hover, .ai-history-item.is-active { border-color: color-mix(in srgb, var(--ai-action) 35%, var(--ai-border)); background: var(--ai-primary-soft); } .ai-history-item__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ai-primary-soft); color: var(--ai-action); font-size: 0.85rem; } .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: 28px 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: center; min-height: 0; padding: 16px 0 24px; 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: 6px; padding: 4px 8px 16px; 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-action) 4%, 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.16; -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__stack { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; width: min(900px, 94vw); margin-top: -32px; 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, #003860); } .ai-welcome-sub { margin: 0 auto 0; max-width: 520px; font-size: 0.92rem; line-height: 1.55; color: var(--ai-text-2); } .ai-welcome-sub__accent { font-weight: 700; color: var(--ai-action); } .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: 6px 16px; 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 { border: 1px solid color-mix(in srgb, var(--ai-border) 82%, transparent); box-shadow: none; background: color-mix(in srgb, var(--ai-surface) 72%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 12px; padding: 12px 10px; transition: background 0.2s var(--ai-ease), border-color 0.2s var(--ai-ease), color 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.is-primary { background: color-mix(in srgb, var(--ai-primary-soft) 38%, transparent); box-shadow: none; border: 1px solid color-mix(in srgb, var(--ai-action) 32%, var(--ai-border)); border-left: 2px solid var(--ai-action); padding-left: 14px; border-radius: 12px; } .ai-welcome__command .ai-intent-door:hover { transform: none; border-color: color-mix(in srgb, var(--ai-action) 38%, var(--ai-border)); background: color-mix(in srgb, var(--ai-primary-soft) 55%, transparent); box-shadow: none; } .ai-welcome__command .ai-intent-door.is-primary:hover { border-color: color-mix(in srgb, var(--ai-action) 45%, var(--ai-border)); border-left-color: var(--ai-action); background: color-mix(in srgb, var(--ai-primary-soft) 65%, transparent); } .ai-welcome-plane { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; margin: 0; pointer-events: none; } .ai-welcome-plane img { position: relative; z-index: 2; width: min(640px, 82vw); height: auto; display: block; filter: drop-shadow(0 18px 42px rgba(15, 23, 42, 0.1)); 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-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-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-action); } .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-primary-soft) 55%, transparent); } .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-action); opacity: 0.82; 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, #003860); } .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: 40px; } .ai-intent-door.is-primary .ai-intent-door__icon .ai-icon { width: 40px; height: 40px; } .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 / span 2; 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-action) 10%, #fff) 0%, var(--ai-surface) 58% ); border-color: color-mix(in srgb, var(--ai-action) 32%, var(--ai-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai-action) 8%, 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-action); fill: var(--ai-action); } .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 > * { fill: none; stroke: var(--ai-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ai-icon .ai-icon__accent { stroke: var(--ai-gold); } .ai-icon .ai-icon__accent-fill { fill: var(--ai-gold); stroke: none; } .ai-intent-door__icon { display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; width: 36px; 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); } /* —— 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 { padding: 18px 18px 16px; border-radius: var(--ai-radius-lg); } .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-color: var(--ai-border-soft); background: var(--ai-primary-mid); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .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; background: var(--ai-primary-mid); border-color: color-mix(in srgb, var(--ai-action) 22%, var(--ai-border)); } .ai-followup-chip:hover { background: var(--ai-primary-soft); border-color: color-mix(in srgb, var(--ai-action) 45%, var(--ai-border)); 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: 14px; border: none; background: color-mix(in srgb, var(--ai-input-bg) 72%, transparent); box-shadow: none; } .ai-composer-wrap.is-welcome .ai-composer::before { display: none; } .ai-composer-dock { display: flex; flex-direction: column; flex-shrink: 0; } .ai-composer-slot--welcome:empty, .ai-composer-slot--chat:empty { display: none; } /* Composer + trust strip */ .ai-composer-wrap { flex-shrink: 0; } .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) 70%, transparent); } .ai-composer-wrap.is-docked .ai-composer { box-shadow: none; } .ai-composer { min-height: 88px; padding: 16px 16px 16px 24px; border-radius: var(--ai-radius-lg); transition: border-color 0.2s var(--ai-ease), box-shadow 0.2s var(--ai-ease); } .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-card::after, .ai-shell-bg__blobs, .ai-shell-bg__blobs::before, .ai-shell-bg__blobs::after { animation: none; } } .ai-trust-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; padding: 14px 4px 16px; 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__contacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; } .ai-trust-bar__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; text-align: center; } .ai-trust-bar a, .ai-trust-wechat { display: inline-flex; align-items: center; gap: 6px; 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 { margin: 0; padding: 0; border: none; background: none; font: inherit; cursor: pointer; } .ai-trust-bar__human { color: var(--ai-action) !important; font-weight: 600; text-decoration: none; } .ai-trust-bar__human:hover { color: var(--ai-action-hover) !important; } .ai-trust-address { display: inline-flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 0; max-width: min(100%, 560px); color: var(--ai-text-3); font-size: 0.72rem; line-height: 1.45; text-align: left; } .ai-trust-address i { margin-top: 2px; font-size: 0.88rem; line-height: 1; color: var(--ai-action); flex-shrink: 0; } @media (max-width: 860px) { .ai-stage-map--eu { top: 0; left: 0; width: min(54vw, 480px); height: min(46%, 480px); transform: none; opacity: 0.48; } .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) { 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: 36px; height: 36px; } .ai-welcome__command .ai-intent-door.is-primary { padding-left: 10px; border-radius: 12px; } .ai-welcome-plane img { width: min(480px, 90vw); } .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-cta { width: 100%; } .ai-welcome-stats { justify-content: center; } } @media (max-width: 640px) { .ai-advisor-layout { padding: 6px 14px 0; } .ai-welcome { min-height: 0; padding-top: 8px; } .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: -20px; } .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.9rem; } .ai-trust-bar__contacts { flex-direction: column; align-items: center; gap: 10px; } .ai-trust-bar__meta { flex-direction: column; gap: 8px; } .ai-trust-address { text-align: center; justify-content: center; } .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; } }