/* Sales showcase behind the chat panel: full strength while the conversation is empty,
   a faint backdrop once messages arrive so it never competes with the answer text. */
.main{position:relative;isolation:isolate}
.chat-showcase{
 --cs-a:var(--theme-accent,var(--accent,#8b5cf6));--cs-b:var(--theme-glow,#22d3ee);--cs-c:#f472b6;
 --cs-text:var(--theme-text,var(--text-primary,#f4f4f5));--cs-muted:var(--theme-muted,var(--text-secondary,#a1a1aa));
 position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none;
 transition:opacity .9s ease,filter .9s ease;
}
.main:has(#messagesContainer :is(.message.user,.message.agent)) .chat-showcase{opacity:.07;filter:saturate(.6)}
.main:has(#messagesContainer :is(.message.user,.message.agent)) .cs-stage{visibility:hidden}

/* Aurora */
.cs-blob{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.34;mix-blend-mode:screen;will-change:transform}
.cs-blob.a{background:radial-gradient(circle,var(--cs-a),transparent 62%);top:-28%;left:-12%;animation:cs-drift-a 26s ease-in-out infinite alternate}
.cs-blob.b{background:radial-gradient(circle,var(--cs-b),transparent 62%);bottom:-34%;right:-16%;animation:cs-drift-b 31s ease-in-out infinite alternate}
.cs-blob.c{background:radial-gradient(circle,var(--cs-c),transparent 60%);top:22%;left:38%;width:40vmax;height:40vmax;opacity:.2;animation:cs-drift-c 22s ease-in-out infinite alternate}
@keyframes cs-drift-a{to{transform:translate(18%,22%) scale(1.15)}}
@keyframes cs-drift-b{to{transform:translate(-20%,-14%) scale(1.1)}}
@keyframes cs-drift-c{to{transform:translate(-30%,18%) scale(.85)}}

/* Moving perspective grid */
.cs-grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:62%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
 background-image:linear-gradient(color-mix(in srgb,var(--cs-a) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--cs-a) 55%,transparent) 1px,transparent 1px);
 background-size:64px 64px;opacity:.22;animation:cs-grid 3.2s linear infinite;
 -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
@keyframes cs-grid{to{background-position:0 64px,0 0}}


/* Agent network orbit */
.cs-orbit{position:absolute;top:50%;left:50%;width:min(86vmin,760px);aspect-ratio:1;transform:translate(-50%,-56%);opacity:.75}
.cs-ring{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--cs-a) 30%,transparent);animation:cs-spin 48s linear infinite}
.cs-ring:nth-child(2){inset:14%;border-style:dashed;border-color:color-mix(in srgb,var(--cs-b) 34%,transparent);animation-duration:34s;animation-direction:reverse}
.cs-ring:nth-child(3){inset:29%;border-color:color-mix(in srgb,var(--cs-c) 26%,transparent);animation-duration:24s}
.cs-ring i{position:absolute;top:-6px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--cs-a);box-shadow:0 0 18px 4px color-mix(in srgb,var(--cs-a) 70%,transparent)}
.cs-ring:nth-child(2) i{background:var(--cs-b);box-shadow:0 0 18px 4px color-mix(in srgb,var(--cs-b) 70%,transparent)}
.cs-ring:nth-child(3) i{background:var(--cs-c);box-shadow:0 0 18px 4px color-mix(in srgb,var(--cs-c) 70%,transparent)}
.cs-ring i+i{top:auto;bottom:-6px}
@keyframes cs-spin{to{transform:rotate(360deg)}}
.cs-core{position:absolute;inset:42%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cs-a) 60%,transparent),transparent 70%);animation:cs-pulse 3.6s ease-in-out infinite}
@keyframes cs-pulse{50%{transform:scale(1.35);opacity:.55}}

/* Headline stage */
.cs-stage{position:absolute;inset:0 0 var(--composer-offset,150px);display:grid;place-items:center;padding:0 clamp(16px,6vw,96px);text-align:center}
.cs-slide{grid-area:1/1;width:100%;max-width:1100px;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .7s ease}
.cs-slide.on{opacity:1}
.cs-kicker{display:inline-flex;align-items:center;gap:10px;font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--cs-muted);
 padding:8px 16px;border:1px solid color-mix(in srgb,var(--cs-a) 40%,transparent);border-radius:999px;background:color-mix(in srgb,var(--cs-a) 10%,transparent);backdrop-filter:blur(6px)}
.cs-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cs-b);box-shadow:0 0 10px var(--cs-b);animation:cs-pulse 1.6s ease-in-out infinite}
.cs-title{margin:22px 0 .38em;text-wrap:balance;padding-bottom:.08em;font-size:clamp(38px,7.2vw,112px);font-weight:900;line-height:.98;letter-spacing:-.045em}
.cs-title span{display:inline-block;margin:0;background:linear-gradient(100deg,var(--cs-text) 10%,var(--cs-a) 45%,var(--cs-b) 70%,var(--cs-text) 95%);background-size:220% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(.45em) scale(.96);filter:blur(14px)}
.cs-slide.on .cs-title span{animation:cs-word .9s cubic-bezier(.2,.8,.2,1) forwards,cs-shine 6s linear infinite;animation-delay:calc(var(--i)*110ms),0s}
@keyframes cs-word{to{opacity:1;transform:none;filter:none}}
@keyframes cs-shine{to{background-position:-220% 0}}
.cs-slide .cs-sub{margin:0!important;max-width:760px;text-wrap:balance;font-size:clamp(15px,1.7vw,22px);line-height:1.55;color:var(--cs-muted);opacity:0;transform:translateY(12px)}
.cs-slide.on .cs-sub{animation:cs-word .8s ease forwards;animation-delay:.55s}
.cs-progress{position:absolute;left:50%;bottom:calc(var(--composer-offset,150px) + 18px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:var(--cs-muted)}
.cs-progress b{display:block;width:26px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--cs-text) 16%,transparent);overflow:hidden}
.cs-progress b.on::after{content:'';display:block;height:100%;background:linear-gradient(90deg,var(--cs-a),var(--cs-b));animation:cs-fill var(--cs-dwell,6.5s) linear forwards}
.cs-progress b.done{background:color-mix(in srgb,var(--cs-a) 60%,transparent)}
@keyframes cs-fill{from{width:0}to{width:100%}}

/* The empty-state card sits on the showcase instead of hiding it. */
.main:has(.chat-showcase) #emptyState{background:transparent}

html[data-theme-mode=light] .cs-blob,body.theme-light .cs-blob{mix-blend-mode:multiply;opacity:.22}
html[data-theme-mode=light] .cs-grid,body.theme-light .cs-grid{opacity:.14}

@media (max-width:768px){
 .cs-orbit{width:110vmin;opacity:.45}
 .cs-progress{display:none}
}
@media (prefers-reduced-motion:reduce){
 .chat-showcase *,.chat-showcase *::before,.chat-showcase *::after{animation:none!important}
 .cs-title span,.cs-sub{opacity:1;transform:none;filter:none}
}