.chat-demo{margin-top:var(--space-8);margin-inline:auto;width:100%;max-width:380px;position:relative;isolation:isolate}.chat-demo__shell{position:relative;width:100%;height:720px;display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:0 1px #ffffffe6 inset,0 2px 4px #141a2e0d,0 16px 40px #141a2e1a,0 32px 80px #2a43d91a;overflow:hidden}.chat-demo__shell:before{content:"";position:absolute;inset:4px;border-radius:calc(var(--radius-xl) - 4px);border:1px solid rgba(255,255,255,.6);pointer-events:none;z-index:1}.chat-demo__notch{position:absolute;top:8px;left:50%;transform:translate(-50%);width:80px;height:18px;background:var(--brand-navy);border-radius:var(--radius-pill);z-index:3}.chat-demo__statusbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-5);padding-top:10px;font-family:var(--font-sans);font-size:11px;font-weight:var(--weight-semibold);color:var(--ink);background:var(--surface-raised)}.chat-demo__statusbar-time{font-variant-numeric:tabular-nums}.chat-demo__statusbar-icons{display:inline-flex;align-items:center;gap:4px}.chat-demo__icon{display:inline-block;vertical-align:middle}.chat-demo__header{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--surface-raised);border-bottom:1px solid var(--border-hairline)}.chat-demo__header-avatar{position:relative;width:36px;height:36px;border-radius:var(--radius-pill);background:var(--gradient-brand);color:var(--ink-on-accent);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.chat-demo__header-avatar:after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--state-success);border:2px solid var(--surface-raised)}.chat-demo__header-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.chat-demo__header-name{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--ink);font-size:var(--text-sm);letter-spacing:var(--tracking-tight)}.chat-demo__header-presence{font-family:var(--font-sans);color:var(--ink-faint);font-size:11px;transition:color var(--duration-fast) var(--ease-out)}.chat-demo__header-presence[data-typing=true]{color:var(--state-success)}.chat-demo__chat{flex:1;min-height:0;overflow-y:auto;list-style:none;padding:var(--space-4) var(--space-4) var(--space-6);margin:0;display:flex;flex-direction:column;gap:6px;background:var(--surface-canvas);scrollbar-width:thin}.chat-demo__chat::-webkit-scrollbar{width:6px}.chat-demo__chat::-webkit-scrollbar-thumb{background:var(--pearl-200);border-radius:var(--radius-pill)}.chat-demo__byline{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-2);margin-top:var(--space-3);margin-bottom:2px;align-self:flex-start;max-width:80%}.chat-demo__byline-avatar{width:24px;height:24px;border-radius:var(--radius-pill);background:var(--gradient-brand);color:var(--ink-on-accent);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.chat-demo__byline-avatar[data-kyk=strategy-sage],.chat-demo__bubble-avatar[data-kyk=strategy-sage]{background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet))}.chat-demo__byline-avatar[data-kyk=social-star],.chat-demo__bubble-avatar[data-kyk=social-star]{background:linear-gradient(135deg,var(--brand-violet),var(--brand-gold))}.chat-demo__byline-avatar[data-kyk=finance-genius],.chat-demo__bubble-avatar[data-kyk=finance-genius]{background:linear-gradient(135deg,var(--brand-blue),var(--brand-gold))}.chat-demo__byline-avatar[data-kyk=support-hero],.chat-demo__bubble-avatar[data-kyk=support-hero]{background:linear-gradient(135deg,var(--brand-gold),var(--brand-blue))}.chat-demo__byline-avatar[data-kyk=code-queen],.chat-demo__bubble-avatar[data-kyk=code-queen]{background:linear-gradient(135deg,var(--brand-violet),var(--brand-blue))}.chat-demo__byline-avatar[data-kyk=build-boss],.chat-demo__bubble-avatar[data-kyk=build-boss]{background:linear-gradient(135deg,var(--brand-navy),var(--brand-blue))}.chat-demo__byline-text{display:inline-flex;align-items:baseline;gap:6px;min-width:0}.chat-demo__byline-name{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--ink);font-size:12px;letter-spacing:var(--tracking-tight)}.chat-demo__byline-role{font-family:var(--font-sans);color:var(--ink-faint);font-size:11px}.chat-demo__bubble{max-width:75%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.35;position:relative;word-wrap:break-word;animation:chat-demo-bubble-in .28s var(--ease-out) both;display:flex;flex-direction:column;gap:4px}.chat-demo__bubble--you{align-self:flex-end;background:#d5efc1;color:var(--ink-900);border-bottom-right-radius:var(--radius-xs)}.chat-demo__bubble--kyk{align-self:flex-start;background:var(--surface-raised);color:var(--ink);border:1px solid var(--border-hairline);border-bottom-left-radius:var(--radius-xs)}.chat-demo__bubble-text{display:block}.chat-demo__bubble-time{font-size:10px;color:var(--ink-faint);align-self:flex-end;font-variant-numeric:tabular-nums;letter-spacing:0}.chat-demo__bubble--you .chat-demo__bubble-time{color:#141a2e80}@keyframes chat-demo-bubble-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-demo__typing{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:10px 14px;background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-xs);animation:chat-demo-bubble-in .2s var(--ease-out) both}.chat-demo__typing-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--ink-faint);animation:chat-demo-typing-pulse 1.4s ease-in-out infinite}.chat-demo__typing-dot:nth-child(2){animation-delay:.2s}.chat-demo__typing-dot:nth-child(3){animation-delay:.4s}@keyframes chat-demo-typing-pulse{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}.chat-demo__control{position:absolute;bottom:12px;right:12px;z-index:4;width:36px;height:36px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);background:var(--surface-raised);color:var(--ink-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.chat-demo__control:hover{color:var(--ink);box-shadow:var(--shadow-md)}.chat-demo__control:focus-visible{outline:none;box-shadow:var(--shadow-sm),0 0 0 3px color-mix(in srgb,var(--focus-ring) 35%,transparent)}.chat-demo__control:active{transform:scale(.96)}.chat-demo__control svg{width:14px;height:14px;fill:currentColor}.chat-demo__sr-transcript{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}.chat-demo__chat[data-fading=true]{animation:chat-demo-fade-loop .6s var(--ease-in-out) both}@keyframes chat-demo-fade-loop{0%{opacity:1}50%{opacity:0}to{opacity:1}}@media(max-width:600px){.chat-demo{max-width:100%}.chat-demo__shell{height:640px}}@media(prefers-reduced-motion:reduce){.chat-demo__bubble,.chat-demo__typing,.chat-demo__chat,.chat-demo__control{animation:none!important;transition:none!important}}