---
-tags: help, chat, agents, wip
+tags: help, chat, agents
properties: hidden
description: Chats - talking live with your AI agent beside any page: turning chats on, the 💬 floatie, starting a new chat, the panel, and ending it
…
```embedhtml
<style>
-.cv{--ink:#1d1d1b;--soft:#6b6a66;--line:#e4e1da;--card:#fff;--paper:#fbfaf7;--acc:#2f6fe4;--leaf:#2e8b57;--amb:#d99a2b;
- font:14px/1.4 system-ui,-apple-system,sans-serif;color:var(--ink);max-width:720px;margin:0 auto}
-@media (prefers-color-scheme:dark){.cv{--ink:#ecebe6;--soft:#a9a7a0;--line:#3a3935;--card:#1f1f1d;--paper:#161615}}
+.cv{--xi:var(--ink,#1d1d1b);--xs:var(--soft,#6b6a66);--xl:var(--line,#e4e1da);--xc:var(--card,#fff);--xp:var(--paper,#fbfaf7);--acc:#2f6fe4;--leaf:#2e8b57;
+ font:14px/1.4 system-ui,-apple-system,sans-serif;color:var(--xi);max-width:720px;margin:0 auto}
+.stage{position:relative;height:300px;border:1px solid var(--xl);border-radius:14px;background:var(--xp);overflow:hidden}
-.stage{position:relative;height:300px;border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden}
.pg{position:absolute;inset:14px 14px auto 14px;display:grid;gap:8px;opacity:.55}
+.pg i{display:block;height:10px;border-radius:5px;background:var(--xl)}.pg i:nth-child(1){width:40%;height:16px}.pg i:nth-child(3){width:85%}.pg i:nth-child(4){width:70%}
-.pg i{display:block;height:10px;border-radius:5px;background:var(--line)}.pg i:nth-child(1){width:40%;height:16px}.pg i:nth-child(3){width:85%}.pg i:nth-child(4){width:70%}
.sc{position:absolute;opacity:0;animation:18s infinite}
+.cap{position:absolute;left:14px;bottom:12px;font-weight:600;font-size:13px;background:var(--xc);border:1px solid var(--xl);border-radius:999px;padding:4px 12px;opacity:0;animation:18s infinite}
-.cap{position:absolute;left:14px;bottom:12px;font-weight:600;font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;opacity:0;animation:18s infinite}
/* 1 · turn chats on (0-3.5s) */
+.first{left:50%;top:70px;transform:translateX(-50%);width:300px;background:var(--xc);border:1px solid var(--xl);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.12);animation-name:s1}
+.first b{display:block;margin-bottom:4px}.first p{margin:0 0 10px;color:var(--xs);font-size:13px}
-.first{left:50%;top:70px;transform:translateX(-50%);width:300px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.12);animation-name:s1}
-.first b{display:block;margin-bottom:4px}.first p{margin:0 0 10px;color:var(--soft);font-size:13px}
-.btn{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--acc);color:#fff;font-weight:600;font-size:13px}.btn.q{background:none;color:var(--soft)}
+.btn{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--acc);color:#fff;font-weight:600;font-size:13px}.btn.q{background:none;color:var(--xs)}
.c1{animation-name:c1}
/* the floatie (from 3.5s), flashing, then tapped */
.fl{right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff;font-size:22px;animation-name:fl}
-.fl .dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:var(--leaf);border:2px solid var(--paper);opacity:0;animation:18s infinite dot}
+.fl .dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:var(--leaf);border:2px solid var(--xp);opacity:0;animation:18s infinite dot}
.c2{animation-name:c2}
/* 2 · the list, + New (6-8.5s) */
+.list{right:16px;bottom:72px;width:250px;background:var(--xc);border:1px solid var(--xl);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);animation-name:s2}
-.list{right:16px;bottom:72px;width:250px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);animation-name:s2}
+.lh{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--xl);font-weight:700}
-.lh{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);font-weight:700}
.new{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--acc);color:var(--acc);animation:18s infinite newp}
-.li{padding:8px 12px;color:var(--soft);font-size:13px}.pick{margin:0 12px 10px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--acc) 14%,transparent);font-size:13px;opacity:0;animation:18s infinite pk}
+.li{padding:8px 12px;color:var(--xs);font-size:13px}.pick{margin:0 12px 10px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--acc) 14%,transparent);font-size:13px;opacity:0;animation:18s infinite pk}
.c3{animation-name:c3}
/* 3 · the panel: send, picked up, answered (8.5-15s) */
-.panel{right:16px;bottom:72px;width:300px;height:200px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;animation-name:s3}
+.panel{right:16px;bottom:72px;width:300px;height:200px;background:var(--xc);border:1px solid var(--xl);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;animation-name:s3}
+.ph{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--xl);font-weight:700}.ph .live{width:8px;height:8px;border-radius:50%;background:var(--leaf)}.ph small{margin-left:auto;color:var(--xs);font-weight:400}
-.ph{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);font-weight:700}.ph .live{width:8px;height:8px;border-radius:50%;background:var(--leaf)}.ph small{margin-left:auto;color:var(--soft);font-weight:400}
.msgs{flex:1;padding:8px 10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.m{max-width:80%;padding:6px 10px;border-radius:12px;font-size:13px;opacity:0}
-.me{align-self:flex-end;background:color-mix(in srgb,var(--ink) 10%,transparent);border-right:3px solid transparent;animation:18s infinite me}
+.me{align-self:flex-end;background:color-mix(in srgb,var(--xi) 10%,transparent);border-right:3px solid transparent;animation:18s infinite me}
.ai{align-self:flex-start;background:color-mix(in srgb,var(--acc) 14%,transparent);animation:18s infinite ai}
-.work{font-size:12px;color:var(--soft);font-style:italic;opacity:0;animation:18s infinite wk}
-.inp{margin:0 10px 10px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--soft);font-size:13px}
+.work{font-size:12px;color:var(--xs);font-style:italic;opacity:0;animation:18s infinite wk}
+.inp{margin:0 10px 10px;border:1px solid var(--xl);border-radius:8px;padding:6px 8px;color:var(--xs);font-size:13px}
.c4{animation-name:c4}.c5{animation-name:c5}
@keyframes s1{0%,1%{opacity:0;transform:translate(-50%,8px)}3%,17%{opacity:1;transform:translate(-50%,0)}19%,100%{opacity:0}}
…