@oyehello/chat 0.2.0 → 0.3.0

package/dist/index.js

@@ -160,7 +160,7 @@ function createChatClient(options) {
       seenTurnIds.add(ev.turnId);
       const m = streamingId ? messages.find((x) => x.id === streamingId) : void 0;
       if (m) {
-        m.text = ev.text;
+        m.text = ev.text || m.text;
         m.streaming = false;
         m.turnId = ev.turnId;
       } else {
@@ -405,132 +405,369 @@ function renderMarkdown(text) {
 // src/styles.ts
 var STYLES = `
   :host {
-    --oc-accent: #2563eb;
-    --oc-fg: #111827;
-    --oc-muted: #6b7280;
-    --oc-surface: #ffffff;
-    --oc-surface-2: #f3f4f6;
-    --oc-border: #e5e7eb;
-    --oc-radius: 16px;
-    position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
-    font-family: system-ui, -apple-system, sans-serif;
+    /* accent (consumer-overridable via --oc-accent) + its derivations */
+    --oc-ac: var(--oc-accent, #096DD9);
+    --oc-btn-rim: color-mix(in oklab, var(--oc-ac) 70%, black);
+    --oc-btn-edge: 0 6px 16px -10px color-mix(in oklab, var(--oc-ac) 55%, transparent);
+    --oc-danger: #D92D20;
+    --oc-ease: cubic-bezier(0.16,1,0.3,1);
+    --oc-bounce: cubic-bezier(0.18,0.89,0.32,1.13);
+    --oc-mono: 'Geist Mono', ui-monospace, monospace;
+    --oc-r-full: 999px;
+
+    /* light palette (base) */
+    --oc-bg: #FFFFFF; --oc-bg-sunk: #F6F8FB;
+    --oc-fg: #0A0D12; --oc-fg-muted: rgba(10,13,18,0.66); --oc-fg-dim: rgba(10,13,18,0.44);
+    --oc-border: rgba(9,13,20,0.10);
+    --oc-accent-text: color-mix(in oklab, var(--oc-ac) 88%, black);
+    --oc-tint-1: rgba(9,13,20,0.025); --oc-tint-2: rgba(9,13,20,0.04); --oc-tint-3: rgba(9,13,20,0.055);
+    --oc-field-bg: #FFFFFF; --oc-field-border: rgba(9,13,20,0.22);
+    --oc-glass-border: rgba(9,13,20,0.12);
+
+    position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
+    font-family: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host(:not([theme="light"])) {
+      --oc-bg: #000000; --oc-bg-sunk: #000000;
+      --oc-fg: #FFFFFF; --oc-fg-muted: rgba(255,255,255,0.68); --oc-fg-dim: rgba(255,255,255,0.42);
+      --oc-border: rgba(255,255,255,0.09);
+      --oc-accent-text: color-mix(in oklab, var(--oc-ac) 62%, white);
+      --oc-tint-1: rgba(255,255,255,0.03); --oc-tint-2: rgba(255,255,255,0.05); --oc-tint-3: rgba(255,255,255,0.07);
+      --oc-field-bg: rgba(255,255,255,0.045); --oc-field-border: rgba(255,255,255,0.20);
+      --oc-glass-border: rgba(255,255,255,0.12);
+    }
+  }
+  :host([theme="dark"]) {
+    --oc-bg: #000000; --oc-bg-sunk: #000000;
+    --oc-fg: #FFFFFF; --oc-fg-muted: rgba(255,255,255,0.68); --oc-fg-dim: rgba(255,255,255,0.42);
+    --oc-border: rgba(255,255,255,0.09);
+    --oc-accent-text: color-mix(in oklab, var(--oc-ac) 62%, white);
+    --oc-tint-1: rgba(255,255,255,0.03); --oc-tint-2: rgba(255,255,255,0.05); --oc-tint-3: rgba(255,255,255,0.07);
+    --oc-field-bg: rgba(255,255,255,0.045); --oc-field-border: rgba(255,255,255,0.20);
+    --oc-glass-border: rgba(255,255,255,0.12);
   }
   * { box-sizing: border-box; }
+  button { font-family: inherit; }
 
-  /* Launcher */
+  .oc { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
+
+  /* \u2500\u2500 Launcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .launcher {
-    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
-    background: var(--oc-accent); color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25);
-    display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease;
+    position: relative; flex: none; width: 46px; height: 46px; border-radius: var(--oc-r-full);
+    border: 1px solid var(--oc-btn-rim); background: var(--oc-ac);
+    box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--oc-ac) 70%, transparent), 0 18px 48px -18px rgba(0,0,0,0.6);
+    color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
+    transition: transform .26s var(--oc-bounce), filter .2s var(--oc-ease); align-self: flex-end;
   }
   .launcher:hover { transform: scale(1.06); }
-  .launcher svg { width: 28px; height: 28px; }
-  .launcher .badge {
-    position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
-    border-radius: 10px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
-    display: grid; place-items: center; border: 2px solid var(--oc-surface);
+  .launcher:active { transform: scale(0.93); }
+  .ring { pointer-events: none; position: absolute; inset: -1px; border-radius: var(--oc-r-full); border: 2px solid var(--oc-ac); opacity: 0; }
+  .oc.ring:not(.open) .ring { animation: w-ring 2.4s ease-out 1.1s 3; }
+  .ic-chat, .ic-close { position: absolute; display: flex; align-items: center; justify-content: center; transition: all .3s var(--oc-bounce); }
+  .ic-chat { width: 28px; height: 28px; opacity: 1; transform: rotate(0) scale(1); }
+  .ic-close { opacity: 0; transform: rotate(90deg) scale(0.6); }
+  .oc.open .ic-chat { opacity: 0; transform: rotate(-90deg) scale(0.6); }
+  .oc.open .ic-close { opacity: 1; transform: rotate(0) scale(1); }
+  .badge {
+    position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 5px;
+    border-radius: var(--oc-r-full); border: 2px solid var(--oc-bg-sunk); background: var(--oc-danger);
+    color: #fff; font-family: var(--oc-mono); font-size: 10px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.4);
+    transition: all .26s var(--oc-bounce);
+  }
+  .oc.unread:not(.open) .badge { opacity: 1; transform: scale(1); }
+
+  /* \u2500\u2500 Teaser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .teaser {
+    position: absolute; right: 0; bottom: 60px; display: none; align-items: center; gap: 11px;
+    opacity: 0; transform: translateY(8px) scale(0.94); pointer-events: none;
+    transition: opacity .3s var(--oc-ease), transform .38s var(--oc-bounce);
+  }
+  .oc.has-teaser .teaser { display: flex; }
+  .oc.teaser:not(.open) .teaser { opacity: 1; transform: none; pointer-events: auto; }
+  .teaser-btn {
+    max-width: 250px; display: flex; align-items: center; gap: 10px; padding: 11px 15px;
+    border-radius: 16px 16px 5px 16px; border: 1px solid var(--oc-glass-border); background: var(--oc-bg);
+    box-shadow: 0 10px 30px -14px rgba(0,0,0,0.5); color: var(--oc-fg); font-size: 13.5px; line-height: 1.45;
+    text-align: left; cursor: pointer; transition: transform .2s var(--oc-ease);
   }
+  .teaser-btn:hover { transform: translateY(-1px); }
+  .teaser-btn .logo { flex: none; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; color: var(--oc-ac); }
+  .teaser-x {
+    flex: none; width: 22px; height: 22px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border);
+    background: var(--oc-bg); color: var(--oc-fg-dim); display: flex; align-items: center; justify-content: center; cursor: pointer;
+  }
+  .teaser-x:hover { color: var(--oc-fg); }
 
-  /* Panel */
+  /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .panel {
-    position: absolute; right: 0; bottom: 74px; width: 384px; height: min(600px, calc(100vh - 120px));
-    background: var(--oc-surface); color: var(--oc-fg); border: 1px solid var(--oc-border);
-    border-radius: var(--oc-radius); box-shadow: 0 12px 48px rgba(0,0,0,.22);
-    display: flex; flex-direction: column; overflow: hidden;
-    transform-origin: bottom right; transition: transform .16s ease, opacity .16s ease;
-  }
-  .panel[hidden] { display: none; }
-  .panel.enter { opacity: 0; transform: translateY(8px) scale(.98); }
+    position: relative; width: min(384px, calc(100vw - 40px)); height: min(560px, calc(100vh - 108px));
+    display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--oc-glass-border);
+    background: var(--oc-bg); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.28), 0 40px 90px -30px rgba(0,0,0,0.55);
+    overflow: hidden; transform-origin: bottom right;
+    opacity: 0; transform: translateY(16px) scale(0.94); pointer-events: none; visibility: hidden;
+    transition: opacity .24s var(--oc-ease), transform .34s var(--oc-bounce), visibility .34s, width .3s var(--oc-ease), height .3s var(--oc-ease);
+  }
+  .oc.open .panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
+  .oc.max .panel { width: min(720px, calc(100vw - 40px)); height: calc(100vh - 108px); }
 
-  .hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--oc-border); }
-  .hd .title { font-weight: 700; font-size: 15px; flex: 1; }
-  .hd .close { background: none; border: none; cursor: pointer; color: var(--oc-muted); padding: 4px; border-radius: 6px; display: grid; place-items: center; }
-  .hd .close:hover { background: var(--oc-surface-2); }
-  .hd .close svg { width: 18px; height: 18px; }
+  .hd { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px 12px; background: var(--oc-ac); color: #fff; overflow: hidden; }
+  .hd-grid { pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,0.11) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,0.11) 1px, transparent 1px); background-size: 26px 26px; }
+  .hd .logo { position: relative; flex: none; width: 32px; height: 32px; border-radius: 7px; overflow: hidden; color: rgba(255,255,255,0.22); }
+  .hd-txt { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+  .hd-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .hd-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: 0.9; }
+  .hd-status .dot { width: 6px; height: 6px; border-radius: var(--oc-r-full); background: #7BE3A6; flex: none; }
+  .hd-status .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .hd-btn { position: relative; flex: none; width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(255,255,255,0.16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s var(--oc-ease); }
+  .hd-btn:hover { background: rgba(255,255,255,0.28); }
+  .hd-btn .i { position: absolute; display: flex; transition: opacity .2s var(--oc-ease); }
+  .i-expand { opacity: 1; } .i-shrink { opacity: 0; }
+  .oc.max .i-expand { opacity: 0; } .oc.max .i-shrink { opacity: 1; }
 
-  .status { padding: 6px 16px; font-size: 12px; color: var(--oc-muted); background: #f9fafb; border-bottom: 1px solid var(--oc-border); }
-  .err { padding: 8px 16px; font-size: 12px; color: #b91c1c; background: #fef2f2; border-bottom: 1px solid #fecaca; display: flex; align-items: center; gap: 8px; }
-  .err .retry { padding: 3px 10px; font-size: 11px; background: #b91c1c; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
+  .err { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: #fff; background: var(--oc-danger); }
+  .err .retry { padding: 3px 10px; font-size: 11px; background: rgba(255,255,255,0.2); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
 
-  /* Message list */
-  .body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
-  .b { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-break: break-word; }
-  .b.user { align-self: flex-end; background: var(--oc-accent); color: #fff; border-bottom-right-radius: 4px; }
-  .b.assistant { align-self: flex-start; background: var(--oc-surface-2); color: var(--oc-fg); border-bottom-left-radius: 4px; }
-  .b.human { align-self: flex-start; background: #dbeafe; color: var(--oc-fg); border-bottom-left-radius: 4px; }
-  .b.typing { font-style: italic; color: var(--oc-muted); }
+  /* \u2500\u2500 Message list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 26px; background: var(--oc-bg); scroll-behavior: smooth; }
+  .turn { display: flex; flex-direction: column; gap: 6px; animation: w-in .42s var(--oc-ease) both; }
+  .turn.bot { align-items: flex-start; } .turn.user { align-items: flex-end; }
+  .b { font-size: 13.5px; line-height: 1.55; text-wrap: pretty; word-break: break-word; }
+  .turn.bot .b { max-width: 86%; padding: 13px 15px; border-radius: 20px; background: var(--oc-tint-2); color: var(--oc-fg); }
+  .turn.user .b { max-width: 82%; padding: 11px 15px; border-radius: var(--oc-r-full); background: var(--oc-ac); color: #fff; }
+  .turn.human .b { max-width: 86%; padding: 13px 15px; border-radius: 20px; background: color-mix(in oklab, var(--oc-ac) 16%, transparent); color: var(--oc-fg); }
+  .src { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-tint-1); max-width: 100%; }
+  .src .t { min-width: 0; font-size: 11.5px; color: var(--oc-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .byline { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 11.5px; color: var(--oc-fg-dim); }
   .human-label { font-size: 11px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
 
-  /* Markdown inside a bubble */
-  .md > :first-child { margin-top: 0; }
-  .md > :last-child { margin-bottom: 0; }
-  .md p { margin: 0 0 8px; }
-  .md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
-  .md li { margin: 2px 0; }
-  .md a { color: inherit; text-decoration: underline; }
-  .b.assistant .md a, .b.human .md a { color: var(--oc-accent); }
-  .md code { font-family: ui-monospace, monospace; font-size: 12.5px; background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 5px; }
-  .md pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 0 0 8px; }
-  .md pre code { background: none; padding: 0; color: inherit; }
-  .md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--oc-border); color: var(--oc-muted); }
+  /* markdown inside a bot bubble */
+  .md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
+  .md p { margin: 0 0 8px; } .md ul, .md ol { margin: 0 0 8px; padding-left: 20px; } .md li { margin: 2px 0; }
+  .md a { color: var(--oc-accent-text); text-decoration: underline; text-underline-offset: 2px; }
+  .md code { font-family: var(--oc-mono); font-size: 12.5px; background: var(--oc-tint-3); padding: 1px 5px; border-radius: 5px; }
+  .md pre { background: color-mix(in oklab, var(--oc-fg) 10%, transparent); padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 0 0 8px; }
+  .md pre code { background: none; padding: 0; }
+  .md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--oc-border); color: var(--oc-fg-muted); }
   .md h1, .md h2, .md h3, .md h4 { margin: 8px 0 6px; font-size: 15px; }
   .md table { border-collapse: collapse; font-size: 13px; margin: 0 0 8px; display: block; overflow-x: auto; }
   .md th, .md td { border: 1px solid var(--oc-border); padding: 4px 8px; }
-  .md hr { border: none; border-top: 1px solid var(--oc-border); margin: 8px 0; }
-
-  .src-row { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; max-width: 85%; }
-  .src-chip { font-size: 11px; background: rgba(0,0,0,.06); color: #374151; border-radius: 6px; padding: 2px 8px; cursor: default; }
   .att-thumb { display: block; max-width: 180px; max-height: 180px; border-radius: 8px; margin-bottom: 6px; }
-  .att-chip { display: inline-block; font-size: 12px; background: rgba(0,0,0,.08); border-radius: 6px; padding: 2px 8px; margin: 0 0 6px; }
-  .b.user .att-chip { background: rgba(255,255,255,.25); }
+  .att-chip { display: inline-block; font-size: 12px; background: var(--oc-tint-3); border-radius: 6px; padding: 2px 8px; margin: 0 0 6px; }
+  .turn.user .att-chip { background: rgba(255,255,255,0.25); }
+
+  .typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 13px 16px; border-radius: 20px; background: var(--oc-tint-2); animation: w-in .3s var(--oc-ease) both; }
+  .typing span { width: 6px; height: 6px; border-radius: var(--oc-r-full); background: var(--oc-fg-muted); animation: w-dot 1.2s ease-in-out infinite; }
+  .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
+
+  .chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; animation: w-in .42s var(--oc-ease) both; animation-delay: .3s; }
+  .chip { padding: 8px 13px; border-radius: var(--oc-r-full); border: 1px solid color-mix(in oklab, var(--oc-ac) 34%, transparent); background: color-mix(in oklab, var(--oc-ac) 10%, transparent); color: var(--oc-accent-text); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .18s var(--oc-ease); }
+  .chip:hover { background: color-mix(in oklab, var(--oc-ac) 18%, transparent); }
 
-  /* New-messages pill */
-  .pill {
-    position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px;
-    background: var(--oc-accent); color: #fff; border: none; cursor: pointer;
-    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
-    box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; gap: 6px;
-  }
-  .pill[hidden] { display: none; }
-  .pill svg { width: 13px; height: 13px; }
+  /* \u2500\u2500 Jump to latest \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .jump-wrap { position: relative; flex: none; height: 0; z-index: 2; display: flex; justify-content: center; }
+  .jump { position: absolute; bottom: 8px; width: 34px; height: 34px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-bg); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5); color: var(--oc-fg-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(6px) scale(0.8); pointer-events: none; transition: all .22s var(--oc-ease); }
+  .oc.away .jump { opacity: 1; transform: none; pointer-events: auto; }
+  .jump:hover { color: var(--oc-fg); border-color: var(--oc-fg-dim); }
 
-  /* Composer */
-  form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--oc-border); align-items: flex-end; }
-  textarea {
-    flex: 1; resize: none; max-height: 120px; padding: 9px 11px; border-radius: 10px;
-    border: 1px solid #d1d5db; font: inherit; font-size: 14px; line-height: 1.4; outline: none;
-  }
-  textarea:focus { border-color: var(--oc-accent); }
-  .send { padding: 0 14px; height: 38px; border-radius: 10px; border: none; background: var(--oc-accent); color: #fff; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
-  .send:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
+  /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .composer { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 13px; background: var(--oc-bg); }
+  .field { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px 11px; border-radius: 18px; border: 1px solid var(--oc-field-border); background: var(--oc-field-bg); transition: border-color .18s var(--oc-ease); }
+  .oc.focus .field { border-color: var(--oc-ac); }
+  .input { width: 100%; border: none; background: transparent; color: var(--oc-fg); font-size: 13.5px; line-height: 1.4; outline: none; padding: 0; resize: none; max-height: 108px; font-family: inherit; }
+  .input::placeholder { color: var(--oc-fg-dim); }
+  .acts { display: flex; align-items: center; gap: 16px; }
+  .act { flex: none; display: flex; border: none; background: transparent; padding: 4px; margin: -4px; color: var(--oc-fg-dim); cursor: pointer; transition: color .18s var(--oc-ease); }
+  .act:hover { color: var(--oc-fg-muted); }
+  .oc.emoji .act.emoji-btn { color: var(--oc-accent-text); }
+  .send { flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-tint-3); color: var(--oc-fg-dim); box-shadow: none; display: flex; align-items: center; justify-content: center; cursor: default; transition: all .22s var(--oc-ease); }
+  .oc.ready .send { border-color: var(--oc-btn-rim); background: var(--oc-ac); color: #fff; box-shadow: var(--oc-btn-edge); cursor: pointer; }
+  .oc.ready .send:hover { filter: brightness(1.1); }
+  .send:active { transform: scale(0.92); }
+
+  .foot { position: relative; display: none; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--oc-fg-dim); }
+  .oc.has-privacy .foot { display: block; }
+  .foot .priv { color: var(--oc-fg-muted); text-decoration: underline; text-underline-offset: 2px; cursor: default; }
+  .foot .tip { position: absolute; left: 0; right: 0; bottom: 16px; padding-bottom: 8px; z-index: 7; display: flex; justify-content: flex-end; pointer-events: none; opacity: 0; transition: opacity .18s var(--oc-ease); }
+  .oc.max .foot .tip { right: 188px; }
+  .foot:hover .tip { opacity: 1; }
+  .foot .tip-card { max-width: 100%; width: 262px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--oc-border); background: var(--oc-bg); box-shadow: 0 8px 22px -12px rgba(0,0,0,0.32); text-align: left; font-size: 11.5px; line-height: 1.55; color: var(--oc-fg-muted); text-wrap: pretty; transform: translateY(6px); transition: transform .24s var(--oc-bounce); }
+  .foot:hover .tip-card { transform: none; }
+  .foot .tip-card a { color: var(--oc-fg); text-decoration: underline; text-underline-offset: 2px; }
+
+  /* \u2500\u2500 Emoji picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .emoji-scrim { position: absolute; inset: 0; z-index: 3; display: none; }
+  .oc.emoji .emoji-scrim { display: block; }
+  .emoji-panel { position: absolute; left: 10px; right: 10px; bottom: 96px; z-index: 4; max-height: min(340px, 58%); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--oc-border); background: var(--oc-bg); box-shadow: 0 18px 46px -18px rgba(0,0,0,0.6); overflow: hidden; opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: bottom center; pointer-events: none; visibility: hidden; transition: opacity .18s var(--oc-ease), transform .26s var(--oc-bounce), visibility .26s; }
+  .oc.emoji .emoji-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
+  .emoji-search { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--oc-border); color: var(--oc-fg-dim); }
+  .emoji-search input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--oc-fg); font-size: 14.5px; outline: none; font-family: inherit; }
+  .emoji-search input::placeholder { color: var(--oc-fg-dim); }
+  .emoji-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
+  .emoji-grp { display: flex; flex-direction: column; gap: 6px; }
+  .emoji-grp + .emoji-grp { padding-top: 8px; }
+  .emoji-grp-name { font-family: var(--oc-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--oc-fg-dim); }
+  .emoji-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px; }
+  .emoji-grid button { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; transition: background .14s var(--oc-ease); }
+  .emoji-grid button:hover { background: var(--oc-tint-3); }
+  .emoji-empty { display: none; flex-direction: column; align-items: center; gap: 5px; padding: 26px 10px; text-align: center; }
+  .emoji-empty .h { font-size: 14px; color: var(--oc-fg); } .emoji-empty .s { font-size: 12.5px; color: var(--oc-fg-dim); }
 
   @media (max-width: 480px) {
     :host { right: 0; bottom: 0; }
-    .panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; bottom: 0; }
-    .launcher { position: fixed; right: 16px; bottom: 16px; }
-    .pill { bottom: 82px; }
+    .oc { padding: 0 16px 16px; }
+    .panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
+    .oc.max .panel { width: 100vw; height: 100dvh; }
   }
   @media (prefers-reduced-motion: reduce) {
-    .launcher, .panel { transition: none; }
-    .body { scroll-behavior: auto; }
+    .launcher, .panel, .teaser, .turn, .jump, .emoji-panel { transition: none; animation: none; }
+    .ring { animation: none; } .body { scroll-behavior: auto; }
   }
+
+  @keyframes w-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
+  @keyframes w-dot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
+  @keyframes w-ring { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(1.7); opacity: 0; } }
 `;
 
+// src/icons.ts
+var logoMark = (rectFill) => `<svg viewBox="0 0 1032 1024" fill="none" style="display:block;width:100%;height:100%"><rect x="4" width="1024" height="1024" rx="150" fill="${rectFill}"></rect><path d="M430.924 831.644C270.203 859.983 138.14 760.606 111.329 608.551C84.5174 456.497 174.627 317.945 335.348 289.605C496.068 261.266 628.131 360.643 654.943 512.698C681.754 664.752 591.644 803.304 430.924 831.644ZM406.613 693.77C488.549 679.323 518.727 615.513 505.252 539.092C491.777 462.671 441.594 413.031 359.658 427.478C277.722 441.926 247.544 505.736 261.02 582.157C274.495 658.578 324.677 708.218 406.613 693.77ZM870.337 558.389L744.281 580.616C727.055 482.923 674.565 369.515 652.06 241.884L841.143 208.543C863.509 335.387 853.111 460.696 870.337 558.389ZM910.583 740.568L768.771 765.573L745.016 630.852L886.828 605.846L910.583 740.568Z" fill="#fff"></path></svg>`;
+var stroke = (w, path, size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${w}" stroke-linecap="round" stroke-linejoin="round" style="display:block;flex:none">${path}</svg>`;
+var ICON = {
+  close: (size = 19) => stroke(2.4, '<path d="M18 6 6 18M6 6l12 12"/>', size),
+  minus: stroke(2, '<path d="M6 12h12"/>', 15),
+  expand: stroke(2, '<path d="M15 4h5v5M20 4l-6.5 6.5M9 20H4v-5M4 20l6.5-6.5"/>', 15),
+  shrink: stroke(2, '<path d="M20 9h-5V4M15 9l5.5-5.5M4 15h5v5M9 15l-5.5 5.5"/>', 15),
+  chevronDown: stroke(2.1, '<path d="m6 9 6 6 6-6"/>', 16),
+  send: stroke(2.2, '<path d="M12 19V5M6 11l6-6 6 6"/>', 16),
+  paperclip: stroke(1.7, '<path d="M21 11.5 12.5 20a5.5 5.5 0 0 1-7.8-7.8l8.5-8.5a3.7 3.7 0 0 1 5.2 5.2l-8.5 8.5a1.8 1.8 0 0 1-2.6-2.6l7.9-7.8"/>', 17),
+  emoji: stroke(1.7, '<circle cx="12" cy="12" r="9"/><path d="M8.5 14.5a4.5 4.5 0 0 0 7 0M9 9.5h.01M15 9.5h.01"/>', 17),
+  mic: stroke(1.7, '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>', 17),
+  search: stroke(1.9, '<circle cx="11" cy="11" r="7.5"/><path d="m21 21-4.3-4.3"/>', 17),
+  clear: stroke(2.2, '<path d="M18 6 6 18M6 6l12 12"/>', 15),
+  // Two-page "source" glyph for citation chips.
+  book: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="display:block;flex:none;color:var(--oc-accent-text)"><path d="M3 5.5A2.5 2.5 0 0 1 5.5 3H11v18H5.5A2.5 2.5 0 0 1 3 18.5Z"/><path d="M21 5.5A2.5 2.5 0 0 0 18.5 3H13v18h5.5a2.5 2.5 0 0 0 2.5-2.5Z"/></svg>`,
+  teaserDismiss: stroke(2.4, '<path d="M18 6 6 18M6 6l12 12"/>', 12)
+};
+
+// src/emoji.ts
+var CATS = [
+  { name: "Frequently used", items: [
+    ["\u{1F44D}", "thumbs up"],
+    ["\u{1F64F}", "thanks"],
+    ["\u{1F44B}", "wave"],
+    ["\u2705", "done"],
+    ["\u{1F4DE}", "call"],
+    ["\u{1F60A}", "smile"],
+    ["\u2764\uFE0F", "heart"]
+  ] },
+  { name: "Smileys and emotion", items: [
+    ["\u{1F600}", "grinning"],
+    ["\u{1F603}", "smiley"],
+    ["\u{1F604}", "grin"],
+    ["\u{1F601}", "beaming"],
+    ["\u{1F606}", "squinting"],
+    ["\u{1F605}", "relief"],
+    ["\u{1F923}", "rolling"],
+    ["\u{1F602}", "tears of joy"],
+    ["\u{1F642}", "slightly smiling"],
+    ["\u{1F643}", "upside down"],
+    ["\u{1F609}", "wink"],
+    ["\u{1F607}", "halo"],
+    ["\u{1F970}", "smiling hearts"],
+    ["\u{1F60D}", "heart eyes"],
+    ["\u{1F618}", "kiss"],
+    ["\u{1F60B}", "yum"],
+    ["\u{1F914}", "thinking"],
+    ["\u{1F928}", "raised brow"],
+    ["\u{1F610}", "neutral"],
+    ["\u{1F644}", "eye roll"],
+    ["\u{1F62C}", "grimace"],
+    ["\u{1F625}", "sad"],
+    ["\u{1F622}", "crying"],
+    ["\u{1F62D}", "sobbing"],
+    ["\u{1F620}", "angry"],
+    ["\u{1F633}", "flushed"],
+    ["\u{1F929}", "star struck"],
+    ["\u{1F634}", "sleeping"]
+  ] },
+  { name: "Gestures", items: [
+    ["\u{1F44E}", "thumbs down"],
+    ["\u{1F44F}", "clap"],
+    ["\u{1F64C}", "raised hands"],
+    ["\u{1F91D}", "handshake"],
+    ["\u{1F44C}", "ok hand"],
+    ["\u270C\uFE0F", "victory"],
+    ["\u{1F4AA}", "strong"],
+    ["\u{1F440}", "eyes"],
+    ["\u{1F9E0}", "brain"],
+    ["\u{1F91F}", "love you"],
+    ["\u261D\uFE0F", "point up"],
+    ["\u{1F447}", "point down"],
+    ["\u{1F91A}", "raised back"],
+    ["\u{1F91E}", "fingers crossed"]
+  ] },
+  { name: "Work and travel", items: [
+    ["\u{1F4C5}", "calendar"],
+    ["\u{1F4C4}", "document"],
+    ["\u{1F4B0}", "money"],
+    ["\u{1F4CA}", "chart"],
+    ["\u{1F4E6}", "package"],
+    ["\u{1F3E5}", "hospital"],
+    ["\u{1F3E6}", "bank"],
+    ["\u{1F69A}", "truck"],
+    ["\u2708\uFE0F", "plane"],
+    ["\u{1F4F1}", "phone"],
+    ["\u{1F4BB}", "laptop"],
+    ["\u{1F50D}", "search"],
+    ["\u{1F4CC}", "pin"],
+    ["\u{1F514}", "bell"]
+  ] },
+  { name: "Symbols", items: [
+    ["\u{1F525}", "fire"],
+    ["\u2728", "sparkles"],
+    ["\u{1F389}", "celebrate"],
+    ["\u{1F4AF}", "hundred"],
+    ["\u26A0\uFE0F", "warning"],
+    ["\u274C", "cross"],
+    ["\u2B50", "star"],
+    ["\u{1F680}", "launch"],
+    ["\u{1F49A}", "green heart"],
+    ["\u{1F499}", "blue heart"],
+    ["\u{1F552}", "clock"],
+    ["\u{1F4A1}", "idea"],
+    ["\u{1F512}", "lock"],
+    ["\u{1F3AF}", "target"]
+  ] }
+];
+var toGroup = (name, items) => ({
+  name,
+  items: items.map(([ch, kw]) => ({ ch, name: kw }))
+});
+function emojiGroups(query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return CATS.map((c) => toGroup(c.name, c.items));
+  const hits = [];
+  for (const c of CATS) for (const e of c.items) {
+    if (e[1].indexOf(q) >= 0 && !hits.some((h) => h[0] === e[0])) hits.push(e);
+  }
+  if (!hits.length) return [];
+  return [toGroup(`${hits.length} result${hits.length === 1 ? "" : "s"}`, hits)];
+}
+
 // src/element.ts
-var HANDOFF_STATUS_TEXT = {
+var DEFAULT_STATUS = "Replies in a few seconds";
+var ATTACHMENT_ACCEPT = "image/*,application/pdf,text/plain,text/csv";
+var AWAY_THRESHOLD = 60;
+var HANDOFF_STATUS = {
   ai: null,
   awaiting_human: "Connecting you to a person\u2026",
   human: "You're chatting with a person"
 };
-var ATTACHMENT_ACCEPT = "image/*,application/pdf,text/plain,text/csv";
-var AGENT_TYPING_TEXT = "The agent is typing\u2026";
-var PIN_THRESHOLD = 48;
-var ICON_CHAT = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>';
-var ICON_CLOSE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
-var ICON_DOWN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
-var ICON_CLIP = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
 var OyehelloChatElement = class extends HTMLElement {
-  static observedAttributes = ["api-key", "agent-id", "base-url", "title"];
+  static observedAttributes = ["api-key", "agent-id", "base-url", "title", "theme"];
+  // ── live client state ──
   client = null;
   off = null;
   messages = [];
@@ -539,35 +776,36 @@ var OyehelloChatElement = class extends HTMLElement {
   handoffState = "ai";
   agentTyping = false;
   lastError = null;
-  // registerTools() may run before connectedCallback creates the client — buffer until it exists.
   pendingTools = {};
   pendingFiles = [];
   imagePreviewCache = /* @__PURE__ */ new Map();
   resolvedUrlCache = /* @__PURE__ */ new Map();
-  // Rendered-markdown cache for FINALIZED assistant/human messages (keyed by message id) so the whole
-  // history isn't re-parsed on every streamed token — only the live streaming message is re-rendered.
   mdCache = /* @__PURE__ */ new Map();
-  // Widget UI state.
-  open = false;
+  receivedAt = /* @__PURE__ */ new Map();
+  // ── widget UI state ──
+  uiOpen = false;
   started = false;
-  // lazy: the session opens on first panel open, not on page load
-  pinned = true;
-  // view is at/near the bottom
+  uiMax = false;
+  emojiOpen = false;
+  emojiQuery = "";
+  away = false;
+  // reader scrolled up
   unseen = 0;
-  // messages that arrived while scrolled-up or while closed
+  focused = false;
+  teaserActive = false;
   renderedCount = 0;
-  // message count at the last renderMessages()
-  // Shadow-DOM refs (assigned once in renderShell).
-  panelEl;
+  renderedBotFinal = 0;
+  timers = [];
+  // ── shadow refs ──
+  oc;
   bodyEl;
   textareaEl;
-  sendEl;
   fileEl;
-  pillEl;
-  badgeEl;
+  titleEl;
   statusEl;
   errEl;
-  titleEl;
+  emojiListEl;
+  emojiSearchEl;
   connectedCallback() {
     if (!this.shadowRoot) this.attachShadow({ mode: "open" });
     const apiKey = this.getAttribute("api-key");
@@ -584,18 +822,42 @@ var OyehelloChatElement = class extends HTMLElement {
     }
     this.off = this.client.on((e) => this.onClientEvent(e));
     this.renderShell();
-    this.updateTitle();
+    this.renderMessages();
+    this.updateHeader();
     this.updateStatus();
+    this.updateClasses();
     let wasOpen = false;
     try {
-      wasOpen = sessionStorage.getItem(this.openKey()) === "1";
+      wasOpen = sessionStorage.getItem(this.key("open")) === "1";
     } catch {
     }
-    if (wasOpen) this.openPanel();
+    if (wasOpen) {
+      this.openPanel();
+      return;
+    }
+    this.updateClasses(true);
+    this.timers.push(setTimeout(() => {
+      this.oc?.classList.remove("ring");
+    }, 6e3));
+    const teaserText = this.getAttribute("teaser");
+    let dismissed = false;
+    try {
+      dismissed = sessionStorage.getItem(this.key("teaser")) === "0";
+    } catch {
+    }
+    if (teaserText && !dismissed) {
+      this.timers.push(setTimeout(() => {
+        if (!this.uiOpen) {
+          this.teaserActive = true;
+          this.updateClasses();
+        }
+      }, 1400));
+    }
   }
   disconnectedCallback() {
     this.off?.();
     void this.client?.end();
+    for (const t of this.timers) clearTimeout(t);
     for (const url of this.imagePreviewCache.values()) {
       if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
     }
@@ -605,61 +867,121 @@ var OyehelloChatElement = class extends HTMLElement {
     if (this.client) this.client.registerTools(handlers);
     else Object.assign(this.pendingTools, handlers);
   }
-  openKey() {
-    return `oyehello-chat:open:${this.getAttribute("agent-id") ?? ""}`;
+  key(k) {
+    return `oyehello-chat:${k}:${this.getAttribute("agent-id") ?? ""}`;
+  }
+  get suggestions() {
+    return (this.getAttribute("suggestions") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
   }
   // ── Shell (built once) ─────────────────────────────────────────────────────────────────────────
   renderShell() {
     const root = this.shadowRoot;
+    const hasTeaser = !!this.getAttribute("teaser");
+    const hasPrivacy = !!this.getAttribute("privacy-url");
+    const teaserText = this.getAttribute("teaser") ?? "";
     root.innerHTML = `
       <style>${STYLES}</style>
-      <button class="launcher" part="launcher" aria-label="Open chat" aria-haspopup="dialog">
-        ${ICON_CHAT}<span class="badge" hidden></span>
-      </button>
-      <div class="panel" part="panel" role="dialog" aria-label="Chat" hidden>
-        <div class="hd"><span class="title">Chat</span><button class="close" aria-label="Close chat">${ICON_CLOSE}</button></div>
-        <div class="status" hidden></div>
-        <div class="err" hidden></div>
-        <div class="body"></div>
-        <button class="pill" type="button" hidden>${ICON_DOWN}<span class="pill-text">New messages</span></button>
-        <form>
-          <button type="button" class="attach" aria-label="Attach a file">${ICON_CLIP}</button>
-          <input type="file" accept="${ATTACHMENT_ACCEPT}" multiple hidden />
-          <textarea aria-label="message" rows="1" placeholder="Type a message\u2026"></textarea>
-          <button type="submit" class="send">Send</button>
-        </form>
+      <div class="oc${hasTeaser ? " has-teaser" : ""}${hasPrivacy ? " has-privacy" : ""}">
+        <div class="panel" role="dialog" aria-label="Chat">
+          <div class="hd">
+            <span class="hd-grid"></span>
+            <span class="logo">${logoMark("currentColor")}</span>
+            <span class="hd-txt"><span class="hd-title">Chat</span><span class="hd-status"><span class="dot"></span><span class="t"></span></span></span>
+            <button type="button" class="hd-btn max" aria-label="Expand"><span class="i i-expand">${ICON.expand}</span><span class="i i-shrink">${ICON.shrink}</span></button>
+            <button type="button" class="hd-btn min" aria-label="Minimise">${ICON.minus}</button>
+          </div>
+          <div class="err" hidden></div>
+          <div class="body"></div>
+          <span class="emoji-scrim"></span>
+          <div class="emoji-panel">
+            <div class="emoji-search">${ICON.search}<input type="text" placeholder="Search emoji\u2026" aria-label="Search emoji" /></div>
+            <div class="emoji-list"></div>
+          </div>
+          <div class="jump-wrap"><button type="button" class="jump" aria-label="Jump to latest">${ICON.chevronDown}</button></div>
+          <div class="composer">
+            <form class="field">
+              <textarea class="input" rows="1" aria-label="message" placeholder="Ask a question\u2026"></textarea>
+              <div class="acts">
+                <button type="button" class="act attach" aria-label="Attach a file">${ICON.paperclip}</button>
+                <input type="file" accept="${ATTACHMENT_ACCEPT}" multiple hidden />
+                <button type="button" class="act emoji-btn" aria-label="Insert emoji">${ICON.emoji}</button>
+                <button type="button" class="act mic" aria-label="Send a voice note">${ICON.mic}</button>
+                <button type="submit" class="send" aria-label="Send">${ICON.send}</button>
+              </div>
+            </form>
+            <div class="foot">
+              <span>By chatting with us, you agree to our </span><span class="priv">Privacy Policy</span>
+              <span class="tip"><span class="tip-card">By chatting with us, you agree to the monitoring and recording of this chat to deliver our services and processing of your personal data in accordance with our Privacy Policy. <a href="${this.escapeAttr(this.getAttribute("privacy-url") ?? "#")}" target="_blank" rel="noopener noreferrer">See our Privacy Policy</a>.</span></span>
+            </div>
+          </div>
+        </div>
+
+        <div class="teaser">
+          <button type="button" class="teaser-btn"><span class="logo">${logoMark("currentColor")}</span><span>${escapeHtml(teaserText)}</span></button>
+          <button type="button" class="teaser-x" aria-label="Dismiss">${ICON.teaserDismiss}</button>
+        </div>
+
+        <button type="button" class="launcher" aria-label="Open chat">
+          <span class="ring"></span>
+          <span class="ic-chat">${logoMark("var(--oc-ac)")}</span>
+          <span class="ic-close">${ICON.close(19)}</span>
+          <span class="badge"></span>
+        </button>
       </div>`;
-    this.panelEl = root.querySelector(".panel");
+    this.oc = root.querySelector(".oc");
     this.bodyEl = root.querySelector(".body");
-    this.textareaEl = root.querySelector("textarea");
-    this.sendEl = root.querySelector(".send");
+    this.textareaEl = root.querySelector("textarea.input");
     this.fileEl = root.querySelector('input[type="file"]');
-    this.pillEl = root.querySelector(".pill");
-    this.badgeEl = root.querySelector(".badge");
-    this.statusEl = root.querySelector(".status");
+    this.titleEl = root.querySelector(".hd-title");
+    this.statusEl = root.querySelector(".hd-status .t");
     this.errEl = root.querySelector(".err");
-    this.titleEl = root.querySelector(".title");
-    root.querySelector(".launcher").addEventListener("click", () => this.togglePanel());
-    root.querySelector(".close").addEventListener("click", () => this.closePanel());
+    this.emojiListEl = root.querySelector(".emoji-list");
+    this.emojiSearchEl = root.querySelector(".emoji-search input");
+    root.querySelector(".launcher").addEventListener("click", () => this.toggle());
+    root.querySelector(".hd-btn.min").addEventListener("click", () => this.closePanel());
+    root.querySelector(".hd-btn.max").addEventListener("click", () => {
+      this.uiMax = !this.uiMax;
+      this.updateClasses();
+    });
+    root.querySelector(".teaser-btn").addEventListener("click", () => this.openPanel());
+    root.querySelector(".teaser-x").addEventListener("click", () => this.dismissTeaser());
+    root.querySelector(".jump").addEventListener("click", () => this.scrollToBottom());
     root.querySelector(".attach").addEventListener("click", () => this.fileEl.click());
     this.fileEl.addEventListener("change", () => {
       this.pendingFiles = this.fileEl.files ? Array.from(this.fileEl.files) : [];
     });
-    this.pillEl.addEventListener("click", () => this.scrollToBottom());
-    this.bodyEl.addEventListener("scroll", () => this.onBodyScroll());
-    root.querySelector("form").addEventListener("submit", (e) => {
+    root.querySelector(".emoji-btn").addEventListener("click", () => this.toggleEmoji());
+    root.querySelector(".emoji-scrim").addEventListener("click", () => this.closeEmoji());
+    this.emojiSearchEl.addEventListener("input", () => {
+      this.emojiQuery = this.emojiSearchEl.value;
+      this.renderEmoji();
+    });
+    this.bodyEl.addEventListener("scroll", () => this.onScroll());
+    root.querySelector("form.field").addEventListener("submit", (e) => {
       e.preventDefault();
       this.doSend();
     });
-    this.textareaEl.addEventListener("input", () => this.autoGrow());
+    this.textareaEl.addEventListener("input", () => {
+      this.autoGrow();
+      this.updateClasses();
+    });
+    this.textareaEl.addEventListener("focus", () => {
+      this.focused = true;
+      this.updateClasses();
+    });
+    this.textareaEl.addEventListener("blur", () => {
+      this.focused = false;
+      this.updateClasses();
+    });
     this.textareaEl.addEventListener("keydown", (e) => {
       if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
         e.preventDefault();
         this.doSend();
       }
-    });
-    this.panelEl.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") this.closePanel();
+      if (e.key === "Escape") {
+        if (this.emojiOpen) this.closeEmoji();
+        else this.closePanel();
+      }
     });
   }
   renderError(msg) {
@@ -667,37 +989,62 @@ var OyehelloChatElement = class extends HTMLElement {
     console.error(msg);
     this.shadowRoot.innerHTML = `<div style="position:fixed;right:16px;bottom:16px;color:#b91c1c;font:12px system-ui;background:#fef2f2;border:1px solid #fecaca;padding:8px 12px;border-radius:8px">${escapeHtml(msg)}</div>`;
   }
+  // ── State-class sync ──────────────────────────────────────────────────────────────────────────
+  updateClasses(initialRing = false) {
+    if (!this.oc) return;
+    const c = this.oc.classList;
+    c.toggle("open", this.uiOpen);
+    c.toggle("max", this.uiMax);
+    c.toggle("emoji", this.emojiOpen);
+    c.toggle("teaser", this.teaserActive);
+    c.toggle("away", this.away);
+    c.toggle("focus", this.focused);
+    c.toggle("ready", (this.textareaEl?.value.trim().length ?? 0) > 0);
+    c.toggle("unread", this.unseen > 0);
+    if (initialRing) c.add("ring");
+    const badge = this.oc.querySelector(".badge");
+    if (badge) badge.textContent = this.unseen > 9 ? "9+" : String(this.unseen);
+    const launcher = this.oc.querySelector(".launcher");
+    if (launcher) launcher.setAttribute("aria-label", this.uiOpen ? "Close chat" : "Open chat");
+  }
   // ── Open / close ───────────────────────────────────────────────────────────────────────────────
-  togglePanel() {
-    this.open ? this.closePanel() : this.openPanel();
+  toggle() {
+    this.uiOpen ? this.closePanel() : this.openPanel();
   }
   openPanel() {
-    this.open = true;
+    this.uiOpen = true;
+    this.teaserActive = false;
+    this.unseen = 0;
     try {
-      sessionStorage.setItem(this.openKey(), "1");
+      sessionStorage.setItem(this.key("open"), "1");
     } catch {
     }
-    this.panelEl.hidden = false;
-    this.panelEl.classList.add("enter");
-    requestAnimationFrame(() => this.panelEl.classList.remove("enter"));
     if (!this.started && this.client) {
       this.started = true;
       void this.client.start();
     }
+    this.updateClasses();
     this.renderMessages();
-    this.pinned = true;
-    this.unseen = 0;
-    this.updateBadge();
     this.scrollToBottom();
-    if (!this.textareaEl.disabled) this.textareaEl.focus();
+    if (!this.textareaEl.disabled) setTimeout(() => this.textareaEl.focus(), 60);
   }
   closePanel() {
-    this.open = false;
+    this.uiOpen = false;
+    this.uiMax = false;
+    this.emojiOpen = false;
     try {
-      sessionStorage.setItem(this.openKey(), "0");
+      sessionStorage.setItem(this.key("open"), "0");
     } catch {
     }
-    this.panelEl.hidden = true;
+    this.updateClasses();
+  }
+  dismissTeaser() {
+    this.teaserActive = false;
+    try {
+      sessionStorage.setItem(this.key("teaser"), "0");
+    } catch {
+    }
+    this.updateClasses();
   }
   // ── Client events ─────────────────────────────────────────────────────────────────────────────
   onClientEvent(e) {
@@ -707,24 +1054,23 @@ var OyehelloChatElement = class extends HTMLElement {
       if (e.state === "ready" || e.state === "opening") this.lastError = null;
     } else if (e.type === "agent") {
       this.agentName = e.agent.name;
-      this.updateTitle();
+      this.updateHeader();
     } else if (e.type === "handoff") this.handoffState = e.state;
     else if (e.type === "agentTyping") this.agentTyping = e.active;
     else if (e.type === "error") this.lastError = e.error.message;
     this.updateStatus();
     this.renderMessages();
   }
-  updateTitle() {
+  updateHeader() {
     if (this.titleEl) this.titleEl.textContent = this.getAttribute("title") ?? this.agentName ?? "Chat";
   }
   updateStatus() {
     if (!this.textareaEl) return;
     const disabled = this.state !== "ready";
     this.textareaEl.disabled = disabled;
-    this.sendEl.disabled = disabled;
-    const st = this.state === "opening" ? "Connecting\u2026" : HANDOFF_STATUS_TEXT[this.handoffState];
-    this.statusEl.hidden = !st;
-    this.statusEl.textContent = st ?? "";
+    const handoff = HANDOFF_STATUS[this.handoffState];
+    const text = this.state === "opening" ? "Connecting\u2026" : handoff ?? (this.getAttribute("status") ?? DEFAULT_STATUS);
+    if (this.statusEl) this.statusEl.textContent = text;
     if (this.state === "error" && this.lastError) {
       this.errEl.hidden = false;
       this.errEl.innerHTML = `<span>Couldn't start chat: ${escapeHtml(this.lastError)}</span><button class="retry" type="button">Retry</button>`;
@@ -740,58 +1086,73 @@ var OyehelloChatElement = class extends HTMLElement {
   renderMessages() {
     if (!this.bodyEl) return;
     const body = this.bodyEl;
-    const atBottom = this.open && this.pinned;
     const prevTop = body.scrollTop;
     const added = this.messages.length - this.renderedCount;
-    const showTyping = this.agentTyping && (this.handoffState === "human" || this.handoffState === "awaiting_human");
-    let html = this.messages.map((m) => this.bubbleHtml(m)).join("");
-    if (showTyping) html += `<div class="b assistant typing">${escapeHtml(AGENT_TYPING_TEXT)}</div>`;
+    const botFinal = this.messages.filter((m) => m.role === "assistant" && !m.streaming).length;
+    const newBotFinal = botFinal > this.renderedBotFinal;
+    const now = Date.now();
+    for (const m of this.messages) if (!this.receivedAt.has(m.id)) this.receivedAt.set(m.id, now);
+    const lastBot = (() => {
+      for (let i = this.messages.length - 1; i >= 0; i--) if (this.messages[i]?.role === "assistant") return i;
+      return -1;
+    })();
+    let html = this.messages.map((m, i) => this.turnHtml(m, i === lastBot && !this.agentTyping)).join("");
+    if (this.agentTyping) html += '<span class="typing"><span></span><span></span><span></span></span>';
+    const sugg = this.suggestions;
+    if (sugg.length > 0 && !this.agentTyping && this.state === "ready") {
+      html += `<span class="chips">${sugg.map((s, i) => `<button type="button" class="chip" data-chip="${i}">${escapeHtml(s)}</button>`).join("")}</span>`;
+    }
     body.innerHTML = html;
     this.hydrateAttachmentImages();
+    this.bindChips();
     this.renderedCount = this.messages.length;
-    if (atBottom) this.scrollToBottom();
+    this.renderedBotFinal = botFinal;
+    if (!this.uiOpen) {
+      if (added > 0) this.unseen += added;
+      this.updateClasses();
+      return;
+    }
+    if (newBotFinal && !this.away) this.parkLastQuestion();
+    else if (!this.away) this.scrollToBottom();
     else {
-      if (this.open) body.scrollTop = prevTop;
+      body.scrollTop = prevTop;
       if (added > 0) this.unseen += added;
     }
-    this.updatePill();
-    this.updateBadge();
+    this.updateClasses();
+  }
+  // After a reply lands, float the question that prompted it to the top so the answer reads from its
+  // first line rather than its last (the design's behaviour).
+  parkLastQuestion() {
+    const users = this.bodyEl.querySelectorAll(".turn.user");
+    const last = users[users.length - 1];
+    if (!last) {
+      this.scrollToBottom();
+      return;
+    }
+    const top = Math.max(0, Math.min(last.offsetTop - 22, this.bodyEl.scrollHeight - this.bodyEl.clientHeight));
+    this.bodyEl.scrollTo({ top, behavior: "smooth" });
   }
-  onBodyScroll() {
+  onScroll() {
     const b = this.bodyEl;
-    const nearBottom = b.scrollHeight - b.scrollTop - b.clientHeight < PIN_THRESHOLD;
-    this.pinned = nearBottom;
-    if (nearBottom) {
-      this.unseen = 0;
-      this.updateBadge();
+    const away = b.scrollHeight - b.scrollTop - b.clientHeight > AWAY_THRESHOLD;
+    if (away !== this.away) {
+      this.away = away;
+      if (!away) this.unseen = 0;
+      this.updateClasses();
     }
-    this.updatePill();
   }
   scrollToBottom() {
     if (!this.bodyEl) return;
     this.bodyEl.scrollTop = this.bodyEl.scrollHeight;
-    this.pinned = true;
+    this.away = false;
     this.unseen = 0;
-    this.updatePill();
-    this.updateBadge();
-  }
-  updatePill() {
-    if (!this.pillEl) return;
-    this.pillEl.hidden = !(this.open && !this.pinned && this.unseen > 0);
-    const t = this.pillEl.querySelector(".pill-text");
-    if (t) t.textContent = this.unseen === 1 ? "1 new message" : `${this.unseen} new messages`;
-  }
-  updateBadge() {
-    if (!this.badgeEl) return;
-    const show = !this.open && this.unseen > 0;
-    this.badgeEl.hidden = !show;
-    this.badgeEl.textContent = this.unseen > 9 ? "9+" : String(this.unseen);
+    this.updateClasses();
   }
   // ── Composer ──────────────────────────────────────────────────────────────────────────────────
   autoGrow() {
     const ta = this.textareaEl;
     ta.style.height = "auto";
-    ta.style.height = `${Math.min(ta.scrollHeight, 120)}px`;
+    ta.style.height = `${Math.min(ta.scrollHeight, 108)}px`;
   }
   doSend() {
     const text = this.textareaEl.value;
@@ -804,15 +1165,63 @@ var OyehelloChatElement = class extends HTMLElement {
         this.imagePreviewCache.set(f.name, URL.createObjectURL(f));
       }
     }
-    this.pinned = true;
+    this.away = false;
+    this.emojiOpen = false;
     void this.client?.sendMessage(text, files.length > 0 ? files : void 0);
     this.textareaEl.value = "";
     this.textareaEl.style.height = "auto";
+    this.updateClasses();
+  }
+  sendChip(text) {
+    this.away = false;
+    this.emojiOpen = false;
+    void this.client?.sendMessage(text);
+    this.updateClasses();
+  }
+  bindChips() {
+    const sugg = this.suggestions;
+    this.bodyEl.querySelectorAll(".chip[data-chip]").forEach((btn) => {
+      const i = Number(btn.getAttribute("data-chip"));
+      const text = sugg[i];
+      if (text) btn.addEventListener("click", () => this.sendChip(text));
+    });
+  }
+  // ── Emoji ─────────────────────────────────────────────────────────────────────────────────────
+  toggleEmoji() {
+    this.emojiOpen = !this.emojiOpen;
+    this.emojiQuery = "";
+    this.emojiSearchEl.value = "";
+    this.renderEmoji();
+    this.updateClasses();
+    if (this.emojiOpen) setTimeout(() => this.emojiSearchEl.focus(), 60);
+  }
+  closeEmoji() {
+    this.emojiOpen = false;
+    this.emojiQuery = "";
+    this.updateClasses();
+  }
+  renderEmoji() {
+    const groups = emojiGroups(this.emojiQuery);
+    let html = groups.map((g) => `
+      <div class="emoji-grp"><span class="emoji-grp-name">${escapeHtml(g.name)}</span>
+        <div class="emoji-grid">${g.items.map((e) => `<button type="button" title="${this.escapeAttr(e.name)}" aria-label="${this.escapeAttr(e.name)}" data-ch="${this.escapeAttr(e.ch)}">${e.ch}</button>`).join("")}</div>
+      </div>`).join("");
+    if (groups.length === 0) html = '<span class="emoji-empty" style="display:flex"><span class="h">No emoji match that</span><span class="s">Try a shorter word, like smile or call.</span></span>';
+    this.emojiListEl.innerHTML = html;
+    this.emojiListEl.querySelectorAll("button[data-ch]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.textareaEl.value += btn.getAttribute("data-ch") ?? "";
+        this.emojiOpen = false;
+        this.autoGrow();
+        this.updateClasses();
+        this.textareaEl.focus();
+      });
+    });
   }
   // ── Bubble rendering ──────────────────────────────────────────────────────────────────────────
-  bubbleHtml(m) {
+  turnHtml(m, isLastBot) {
+    const role = m.role === "user" ? "user" : m.role === "human" ? "human" : "bot";
     const atts = (m.attachments ?? []).map((a) => this.renderAttachment(a)).join("");
-    const label = m.role === "human" ? '<div class="human-label">Support</div>' : "";
     let content;
     if (m.role === "assistant") {
       let rendered = m.streaming ? void 0 : this.mdCache.get(m.id);
@@ -820,30 +1229,32 @@ var OyehelloChatElement = class extends HTMLElement {
         rendered = renderMarkdown(m.text || "");
         if (!m.streaming) this.mdCache.set(m.id, rendered);
       }
-      content = `<div class="md">${rendered}</div>`;
+      content = `<span class="b">${atts}<span class="md">${rendered}</span></span>`;
     } else {
-      content = escapeHtml(m.text);
+      const label = m.role === "human" ? '<div class="human-label">Support</div>' : "";
+      content = `<span class="b">${label}${atts}${escapeHtml(m.text)}</span>`;
     }
-    const streamingDots = m.streaming ? '<span aria-hidden="true">\u2026</span>' : "";
-    const bubble = `<div class="b ${m.role}">${label}${atts}${content}${streamingDots}</div>`;
-    const sources = m.sources && m.sources.length > 0 ? `<div class="src-row">${m.sources.map((s) => this.renderSource(s)).join("")}</div>` : "";
-    return bubble + sources;
+    const src = m.sources && m.sources.length > 0 ? `<span class="src">${ICON.book}<span class="t">${escapeHtml("From " + (m.sources[0]?.title ?? ""))}</span></span>` : "";
+    const byline = role === "bot" && isLastBot ? `<span class="byline">${escapeHtml((this.agentName ?? "OyeHello") + " \xB7 AI agent \xB7 " + this.relTime(m.id))}</span>` : "";
+    return `<span class="turn ${role}">${content}${src}${byline}</span>`;
+  }
+  relTime(id) {
+    const t = this.receivedAt.get(id);
+    if (!t) return "just now";
+    const mins = Math.floor((Date.now() - t) / 6e4);
+    return mins <= 0 ? "just now" : `${mins} min ago`;
   }
   renderAttachment(a) {
     if (a.contentType.startsWith("image/")) {
       const cached = (a.name ? this.imagePreviewCache.get(a.name) : void 0) ?? this.resolvedUrlCache.get(a.storageRef);
       const srcAttr = cached ? ` src="${cached}"` : "";
-      return `<img class="att-thumb" data-oc-ref="${escapeHtml(a.storageRef)}"${srcAttr} alt="${escapeHtml(a.name ?? "image")}"/>`;
+      return `<img class="att-thumb" data-oc-ref="${this.escapeAttr(a.storageRef)}"${srcAttr} alt="${this.escapeAttr(a.name ?? "image")}"/>`;
     }
     return `<div class="att-chip">\u{1F4CE} ${escapeHtml(a.name ?? a.contentType)}</div>`;
   }
-  renderSource(s) {
-    return `<div class="src-chip" title="${escapeHtml(s.snippet)}">${escapeHtml(s.title)}</div>`;
-  }
   hydrateAttachmentImages() {
     if (!this.client) return;
-    const imgs = this.shadowRoot.querySelectorAll("img.att-thumb[data-oc-ref]");
-    imgs.forEach((img) => {
+    this.shadowRoot.querySelectorAll("img.att-thumb[data-oc-ref]").forEach((img) => {
       if (img.hasAttribute("src")) return;
       const ref = img.getAttribute("data-oc-ref");
       if (!ref) return;
@@ -854,6 +1265,9 @@ var OyehelloChatElement = class extends HTMLElement {
       });
     });
   }
+  escapeAttr(s) {
+    return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  }
 };
 function escapeHtml(s) {
   return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);