:root { --ink:#13231d; --muted:#66756d; --paper:#f2f4ef; --white:#fff; --green:#153f31; --lime:#d8ed65; --amber:#a86217; --line:#dce3db; --soft:#eaf0e9; --shadow:0 20px 55px rgba(20,45,35,.10); }
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
button,select,textarea { font:inherit; }
button,select { min-height:44px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.topbar { min-height:72px; padding:10px max(18px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:5; border-bottom:1px solid var(--line); background:rgba(242,244,239,.94); backdrop-filter:blur(12px); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:11px; letter-spacing:.05em; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--green); color:var(--lime); font-weight:900; font-size:22px; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
select { max-width:150px; border:1px solid var(--line); border-radius:99px; padding:8px 32px 8px 13px; background:var(--white); color:var(--ink); }
main { width:min(1240px,calc(100% - 32px)); margin:auto; padding:clamp(32px,6vw,70px) 0 64px; }
.intro { max-width:780px; }
.eyebrow { margin:0 0 9px; color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; }
h1 { margin:0; font-size:clamp(38px,7vw,72px); line-height:1; letter-spacing:-.05em; }
.intro>p:last-child { color:var(--muted); line-height:1.6; font-size:clamp(16px,2vw,19px); }
.product-tabs { display:flex; gap:9px; margin:34px 0 16px; overflow-x:auto; scrollbar-width:thin; padding:0 0 5px; }
.product-tab { flex:0 0 auto; border:1px solid var(--line); border-radius:99px; padding:9px 19px; background:transparent; color:var(--muted); font-weight:750; cursor:pointer; }
.product-tab.active { background:var(--green); border-color:var(--green); color:var(--white); }
.layout { display:block; }
.product-panel,.chat-panel { background:var(--white); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); overflow:hidden; }
.product-panel { max-width:900px; }
.product-hero { padding:clamp(28px,5vw,52px); background:linear-gradient(135deg,#e5ece5,#f8f9f5); }
.reference-label { display:inline-block; margin-bottom:12px; border-radius:99px; padding:6px 10px; background:var(--green); color:var(--white); font-size:11px; font-weight:800; letter-spacing:.07em; }
.product-hero h2 { margin:0; font-size:clamp(44px,7vw,74px); letter-spacing:-.05em; overflow-wrap:anywhere; }
.product-hero p { max-width:600px; color:var(--muted); line-height:1.55; }
.facts { padding:26px clamp(22px,4vw,42px) 38px; }
.facts-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; }
.facts-header h3,.chat-heading h2 { margin:0; font-size:20px; }
.active-product-context { display:inline-flex; margin:9px 0 0; padding:5px 9px; border-radius:99px; background:var(--soft); color:var(--green); font-size:11px; font-weight:800; letter-spacing:.02em; }
.uncertainty { padding:6px 10px; border-radius:99px; background:#fff3df; color:var(--amber); font-size:11px; font-weight:800; white-space:nowrap; }
.fact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fact { min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; }
.fact.caution { border-style:dashed; background:#fffcf4; }
.fact-label { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:7px; }
.fact-value { font-weight:720; line-height:1.45; overflow-wrap:anywhere; }
.fact-note { display:block; margin-top:9px; color:var(--amber); font-size:11px; }
.source-button { border:0; padding:9px 0 0; min-height:36px; background:transparent; color:var(--green); text-decoration:underline; cursor:pointer; font-size:12px; }
.chat-panel { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:100px; z-index:20; width:min(410px,calc(100vw - 24px)); height:min(650px,calc(100dvh - 124px)); min-height:420px; padding:24px; display:flex; flex-direction:column; transform-origin:bottom right; animation:chat-in .2s ease-out; }
.chat-panel[hidden] { display:none; }
.chat-heading { display:flex; justify-content:space-between; align-items:flex-start; }
.chat-close { flex:0 0 44px; }
.demo-notice { margin-top:16px; padding:11px 13px; border:1px solid #eedbb5; border-radius:12px; background:#fff8e9; color:#735420; font-size:12px; line-height:1.45; }
.messages { flex:1; min-height:300px; max-height:470px; overflow-y:auto; padding:20px 1px; display:flex; flex-direction:column; gap:11px; }
.message { max-width:90%; padding:12px 14px; border-radius:17px; background:var(--soft); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; }
.message.user { align-self:flex-end; background:var(--green); color:var(--white); border-bottom-right-radius:4px; }
.message.context-event { align-self:center; max-width:100%; padding:6px 11px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--muted); font-size:11px; text-align:center; }
.message.processing { width:88%; background:#f0f4ef; }
.processing-label { display:block; min-height:42px; }
.indeterminate { position:relative; height:3px; margin-top:10px; overflow:hidden; border-radius:99px; background:#dce5dd; }
.indeterminate::after { content:""; position:absolute; inset:0 auto 0 -45%; width:45%; border-radius:inherit; background:linear-gradient(90deg,transparent,var(--green),var(--lime)); animation:progress-slide 1.35s ease-in-out infinite; }
.chat-form { display:flex; align-items:flex-end; gap:8px; padding:7px; border:1px solid var(--line); border-radius:17px; }
.chat-form textarea { min-width:0; flex:1; resize:none; border:0; outline:0; padding:9px; background:transparent; color:var(--ink); }
.chat-form button { border:0; border-radius:12px; padding:10px 16px; background:var(--lime); font-weight:850; cursor:pointer; }
.chat-form button:disabled,.chat-form textarea:disabled { cursor:not-allowed; opacity:.58; }
.chat-footnote { margin:9px 3px 0; color:var(--muted); font-size:10px; text-align:center; }
dialog { width:min(620px,calc(100% - 24px)); max-height:80vh; overflow:auto; border:0; border-radius:20px; padding:22px; box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(8,22,16,.55); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; }
.dialog-heading h3 { margin:0; }
.icon-button { width:44px; border:0; border-radius:50%; background:var(--soft); font-size:23px; }
.source-item { padding:12px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.source-item span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.loading { padding:50px; color:var(--muted); }
.assistant-dock { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:30; display:flex; align-items:flex-end; gap:12px; }
.assistant-orb { position:relative; width:64px; height:64px; min-height:64px; flex:0 0 64px; border:1px solid rgba(255,255,255,.72); border-radius:50%; padding:0; cursor:pointer; overflow:hidden; background:radial-gradient(circle at 35% 28%,#f2ffbb 0 8%,#68d8ae 24%,#387d94 48%,#243753 72%,#13251e 100%); box-shadow:0 10px 30px rgba(18,58,45,.28),0 0 0 6px rgba(216,237,101,.12); animation:orb-breathe 4s ease-in-out infinite; }
.assistant-orb::before,.assistant-orb::after,.orb-core { content:""; position:absolute; border-radius:50%; filter:blur(7px); }
.assistant-orb::before { width:46px; height:34px; left:-5px; top:20px; background:linear-gradient(110deg,rgba(216,237,101,.8),rgba(45,186,176,.15)); animation:orb-drift 5s ease-in-out infinite alternate; }
.assistant-orb::after { width:40px; height:46px; right:-7px; top:3px; background:linear-gradient(160deg,rgba(113,117,255,.62),rgba(255,120,181,.18)); animation:orb-drift 4.4s ease-in-out infinite alternate-reverse; }
.orb-core { width:28px; height:28px; left:18px; top:18px; background:rgba(255,255,255,.18); box-shadow:inset 0 0 13px rgba(255,255,255,.35); filter:blur(2px); }
.assistant-orb:hover { transform:translateY(-2px); }
.assistant-orb:focus-visible,.welcome-bubble button:focus-visible,.chat-close:focus-visible { outline:3px solid #315dff; outline-offset:3px; }
.assistant-orb.open { box-shadow:0 10px 30px rgba(18,58,45,.32),0 0 0 7px rgba(216,237,101,.35); }
.assistant-orb.open::after { filter:blur(4px); }
.assistant-orb.processing { animation:orb-processing 1.25s ease-in-out infinite; }
.assistant-orb.processing::before,.assistant-orb.processing::after { animation-duration:1.4s; }
.assistant-orb.error { animation:none; box-shadow:0 10px 30px rgba(18,58,45,.22),0 0 0 7px rgba(180,98,45,.18); }
.welcome-bubble { position:absolute; right:76px; bottom:7px; width:max-content; max-width:min(260px,calc(100vw - 112px)); padding:12px 42px 12px 15px; border:1px solid var(--line); border-radius:16px 16px 4px 16px; background:var(--white); box-shadow:var(--shadow); color:var(--ink); font-size:13px; font-weight:720; animation:bubble-in .25s ease-out; }
.welcome-bubble[hidden] { display:none; }
.welcome-bubble button { position:absolute; right:5px; top:4px; width:34px; height:34px; min-height:34px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }
@keyframes orb-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.045); } }
@keyframes orb-processing { 0%,100% { transform:scale(1); filter:saturate(1); } 50% { transform:scale(1.08); filter:saturate(1.3); } }
@keyframes orb-drift { from { transform:translate(-2px,-2px) rotate(0); } to { transform:translate(9px,6px) rotate(30deg); } }
@keyframes progress-slide { from { left:-45%; } to { left:105%; } }
@keyframes bubble-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes chat-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:860px) { .product-panel { max-width:none; } }
@media (max-width:560px) { main { width:calc(100% - 20px); padding-top:30px; padding-bottom:100px; } .topbar { padding-left:12px; padding-right:12px; } .brand small { display:none; } .fact-grid { grid-template-columns:1fr; } .facts-header { align-items:flex-start; flex-direction:column; } .product-tabs { margin-top:25px; } .product-panel { border-radius:21px; } .chat-panel { inset:auto 8px calc(82px + env(safe-area-inset-bottom)) 8px; width:auto; height:min(680px,calc(100dvh - 100px - env(safe-area-inset-bottom))); min-height:0; padding:18px; border-radius:21px; } .chat-form { align-items:stretch; } .chat-form button { padding-inline:14px; } .assistant-dock { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); } .assistant-orb { width:60px; height:60px; min-height:60px; flex-basis:60px; } .orb-core { left:16px; top:16px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } .assistant-orb { animation:none; } }