@syntrologie/adapt-chatbot 2.8.0-canary.43 → 2.8.0-canary.430

package/dist/chunk-HVGQJZMP.js

@@ -0,0 +1,1520 @@
+import {
+  renderMarkdown
+} from "./chunk-7WSMNAKW.js";
+
+// src/AdaptiveChatTrail.ts
+import { css, html, LitElement, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+var DEFAULT_VISIBLE = 3;
+var TRAIL_MAX_WIDTH = "88%";
+var OPACITY_STEP = 0.22;
+var OPACITY_FLOOR = 0.18;
+var Y_DRIFT_PX = -2;
+var TRAIL_BLUR_VEIL_PX = 72;
+var TRAIL_BLUR_MAX_PX = 5;
+var _AdaptiveChatTrail = class _AdaptiveChatTrail extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.messages = [];
+    this.tileReceipts = [];
+    this.inlineWidgets = [];
+    this.mountInlineWidget = void 0;
+    this.visibleCount = DEFAULT_VISIBLE;
+    this.expanded = false;
+    this.forceExpanded = false;
+    this.inFlight = false;
+    this.thinkingText = "";
+    this.introSuggestion = void 0;
+    /**
+     * Pre-conversation phantom assistant message. Rendered only when
+     * `messages` is empty. NOT injected into chatSession state — the
+     * greeting is configuration, not conversation, so it disappears
+     * automatically when the first real message arrives.
+     */
+    this.greeting = void 0;
+    // ── Anchor-scroll model (FEAT-1783535427, shared contract with
+    // <syntro-chat>) — applies to the SCROLLABLE modes (expanded /
+    // forceExpanded). The ambient peek strip keeps its bottom pin: it is
+    // overflow-hidden (not user-scrollable) and the pin is what keeps the
+    // latest line visible under the blur veil.
+    /** Follow the bottom on content growth. On by default (history
+     * browsing); off from a new user message until the visitor opts back in
+     * (pill tap or a user-gesture scroll that reaches the bottom). */
+    this._stickToBottom = true;
+    /** The user message the current turn is anchored to. */
+    this._anchorMsgId = null;
+    /** Whether a turn anchor is live (drives expand-mid-turn landing). */
+    this._anchorActive = false;
+    /** Keep enforcing chip-at-top on updates (late geometry, mode flips)
+     * until the user scrolls or opts into following. */
+    this._anchorHold = false;
+    /** Number of messages whose BOTTOM edge is still below the viewport —
+     * messages the visitor hasn't scrolled past yet. Drives the
+     * "⌄ N messages" pill and stays accurate as they scroll (one long
+     * streaming reply counts as 1 until its end has been read). Reactive. */
+    this._messagesBelow = 0;
+    /** Timestamp of the last user scroll gesture (wheel/touch): scroll
+     * events outside this window are programmatic (our own pin/anchor) and
+     * must not re-engage following — anchoring the newest message clamps AT
+     * the bottom in any longer conversation. */
+    this._lastUserScrollIntentTs = 0;
+    this._markUserScrollIntent = () => {
+      this._lastUserScrollIntentTs = Date.now();
+    };
+    this._onTrailScroll = () => {
+      const container = this._trailContainer();
+      if (!container) return;
+      const atBottom = this._isAtBottom(container);
+      this._messagesBelow = this._scrollable && !atBottom ? this._countMessagesBelow(container) : 0;
+      const isUserDriven = Date.now() - this._lastUserScrollIntentTs < _AdaptiveChatTrail._USER_SCROLL_INTENT_WINDOW_MS;
+      if (isUserDriven) {
+        this._anchorHold = false;
+        this._stickToBottom = atBottom;
+        if (atBottom) this._anchorActive = false;
+      }
+    };
+    /** Pill tap: jump to the newest content and follow for the rest of the turn. */
+    this._onScrollToRecent = () => {
+      this._stickToBottom = true;
+      this._anchorHold = false;
+      this._anchorActive = false;
+      requestAnimationFrame(() => {
+        const container = this._trailContainer();
+        if (!container) return;
+        container.scrollTop = container.scrollHeight;
+        this._syncContentBelow();
+      });
+    };
+    // No `createRenderRoot()` override → default open shadow root. CSS
+    // custom properties (--sc-tile-text-color, --sc-content-bubble-*,
+    // etc.) inherit through the shadow boundary, so canvas-level theming
+    // continues to cascade into the chips without the light-DOM hack.
+    // See the `static styles` block above for the in-shadow stylesheet.
+    this._onExpand = () => {
+      this.expanded = true;
+      this.dispatchEvent(new CustomEvent("trail-expand", { bubbles: true, composed: true }));
+    };
+    /**
+     * Approve a pending client tool call. The trail emits a generic
+     * event so the host can decide whether to forward to chatSession
+     * (the common path) or override. Keeps the trail itself free of
+     * direct chatSession coupling — it's a pure view component.
+     */
+    this._onToolCallClick = (tc) => {
+      if (tc.status !== "pending") return;
+      this.dispatchEvent(
+        new CustomEvent("trail-toolcall-approved", {
+          detail: { toolCallId: tc.id, approved: true },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._onCollapse = () => {
+      this.expanded = false;
+      this.dispatchEvent(new CustomEvent("trail-collapse", { bubbles: true, composed: true }));
+    };
+    /**
+     * instanceId → id of the message that was newest when the receipt first
+     * appeared. This is what makes a receipt read like a chat bubble: it renders
+     * inline right after its anchor message, so newer messages push it up into
+     * history instead of it staying pinned below everything. Assigned once per
+     * instanceId (in willUpdate, the only place that sees both `messages` and
+     * `tileReceipts` at the moment a tile mounts) and never re-homed — a
+     * dismiss/bring-back keeps the chip where it was created. `null` = the tile
+     * mounted before the first chat message (canvas replay); those fall to the
+     * tail strip (see render).
+     */
+    this._receiptAnchors = /* @__PURE__ */ new Map();
+    /**
+     * instanceId → anchor message id for inline widgets — same mechanism as
+     * `_receiptAnchors`. The inline carousel renders right after the message
+     * that was newest when it mounted, so it reads like a rich reply and
+     * drifts up into history as later messages append.
+     */
+    this._inlineAnchors = /* @__PURE__ */ new Map();
+    /**
+     * instanceId → the cached inline widget entry (render node + props target +
+     * optional registry cleanup). Cached so a prop patch (same instanceId, new
+     * props) updates the EXISTING element instead of tearing it down and
+     * re-creating it — which would reset the carousel's scroll position +
+     * internal state. Created lazily the first time we see the widget:
+     * `document.createElement(tag)` for a defined tag, or a registry mount for a
+     * widget-id. An unresolvable widget caches `null` so the fail-safe renders
+     * nothing without re-checking the registry.
+     */
+    this._inlineElements = /* @__PURE__ */ new Map();
+    this._onTileReceiptClick = (instanceId) => {
+      this.dispatchEvent(
+        new CustomEvent("tile-receipt-activate", {
+          detail: { instanceId },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._onAlertReceiptClick = (instanceId) => {
+      this.dispatchEvent(
+        new CustomEvent("alert-receipt-activate", {
+          detail: { instanceId },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this._onIntroSuggestionClick = () => {
+      const s = this.introSuggestion;
+      if (!s) return;
+      this.dispatchEvent(
+        new CustomEvent("trail-intro-suggestion", {
+          detail: { prompt: s.prompt },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    /**
+     * Visitor tapped a `suggest_replies` inline chip. Emit
+     * `trail-suggested-reply` carrying the chip text — the parent
+     * (AdaptiveChatBar) re-dispatches it as `chat-message-sent`, the
+     * SAME channel the input row uses, so the reply rides the existing
+     * send path (mountable → chatSession.send → transport). No fabricated
+     * AG-UI events; this is exactly what typing the text and hitting
+     * Enter would do. The chips clear on their own once the reply lands
+     * and a newer assistant message becomes the latest.
+     */
+    this._onSuggestedReplyClick = (text) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+      this.dispatchEvent(
+        new CustomEvent("trail-suggested-reply", {
+          detail: { text: trimmed },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  get _scrollable() {
+    return this.expanded || this.forceExpanded;
+  }
+  _trailContainer() {
+    return this.renderRoot.querySelector("[data-syntro-chat-trail]");
+  }
+  _isAtBottom(container) {
+    return container.scrollHeight - container.scrollTop - container.clientHeight <= _AdaptiveChatTrail._AT_BOTTOM_EPSILON_PX;
+  }
+  /** Count chips whose bottom edge hasn't entered the viewport yet. */
+  _countMessagesBelow(container) {
+    const viewportBottom = container.getBoundingClientRect().top + container.clientHeight;
+    let count = 0;
+    for (const chip of this.renderRoot.querySelectorAll("[data-trail-chip]")) {
+      if (chip.getBoundingClientRect().bottom > viewportBottom + 4) count += 1;
+    }
+    return count > 0 ? count : 1;
+  }
+  _syncContentBelow() {
+    const container = this._trailContainer();
+    if (!container) return;
+    this._messagesBelow = this._scrollable && !this._isAtBottom(container) ? this._countMessagesBelow(container) : 0;
+  }
+  /** Scroll so the anchored user chip sits at the top of the trail
+   * viewport. Idempotent — safe to re-apply on every update while the
+   * hold is live (content grows BELOW the anchor, so the target is
+   * stable; re-applying also covers late geometry, e.g. expanding
+   * mid-turn from the ambient strip). */
+  _applyAnchor() {
+    requestAnimationFrame(() => {
+      const container = this._trailContainer();
+      if (!container || this._anchorMsgId === null) return;
+      const chip = this.renderRoot.querySelector(
+        `[data-trail-chip-id="${String(this._anchorMsgId)}"]`
+      );
+      if (!chip) return;
+      const top = chip.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+      container.scrollTop = top;
+      this._syncContentBelow();
+    });
+  }
+  _pinToBottom() {
+    requestAnimationFrame(() => {
+      const container = this._trailContainer();
+      if (!container) return;
+      container.scrollTop = container.scrollHeight;
+      this._syncContentBelow();
+    });
+  }
+  /**
+   * Whether to render the thinking-dots chip after the last message.
+   * True iff a request is in flight AND the assistant hasn't started
+   * streaming a reply yet — once the first delta lands, the streaming
+   * chip's caret takes over and the thinking indicator hides so the
+   * visitor isn't shown both at once. Also hidden when the last
+   * message is an error/system message, because the request that
+   * "errored" is already over from the user's perspective.
+   */
+  _shouldShowThinking() {
+    if (!this.inFlight) return false;
+    const last = this.messages[this.messages.length - 1];
+    if (!last) return true;
+    if (last.role === "assistant" && last.status === "streaming") {
+      return (last.text ?? "").trim().length === 0;
+    }
+    if (last.role === "system" || last.status === "error") return false;
+    return true;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const entry of this._inlineElements.values()) {
+      entry?.cleanup?.();
+    }
+    this._inlineElements.clear();
+  }
+  /**
+   * The id of the newest message the render will actually PAINT — the only
+   * valid anchor target. Anchoring to the raw last message is wrong-by-
+   * construction for tool-call turns: mid-turn the newest message is often a
+   * whitespace-only assistant shell (some providers emit whitespace text
+   * deltas around tool calls) that the empty-bubble filter drops, so an
+   * anchor recorded on it can never be in the painted set and the receipt
+   * falls to the tail strip forever — resurrecting BUG-1783015943 (seen live
+   * on vela desktop, BUG-1783630187). `isSuggestionHost=false` here: a
+   * message whose ONLY content is reply chips is too ephemeral to anchor on
+   * (the chips clear when the visitor answers), so walk past it too.
+   */
+  _newestRenderableMessageId() {
+    for (let i = this.messages.length - 1; i >= 0; i--) {
+      const m = this.messages[i];
+      if (m.role !== "assistant" || assistantChipRendersContent(m, false)) return m.id;
+    }
+    return null;
+  }
+  willUpdate(changed) {
+    if (changed.has("messages")) {
+      const lastId = this._newestRenderableMessageId();
+      if (lastId !== null) {
+        for (const [key, anchor] of this._receiptAnchors) {
+          if (anchor === null) this._receiptAnchors.set(key, lastId);
+        }
+        for (const [key, anchor] of this._inlineAnchors) {
+          if (anchor === null) this._inlineAnchors.set(key, lastId);
+        }
+      }
+    }
+    if (changed.has("tileReceipts")) {
+      const lastId = this._newestRenderableMessageId();
+      const live = /* @__PURE__ */ new Set();
+      for (const r of this.tileReceipts) {
+        live.add(r.instanceId);
+        if (!this._receiptAnchors.has(r.instanceId)) {
+          this._receiptAnchors.set(r.instanceId, lastId);
+        }
+      }
+      for (const key of this._receiptAnchors.keys()) {
+        if (!live.has(key)) this._receiptAnchors.delete(key);
+      }
+    }
+    if (changed.has("inlineWidgets")) {
+      const lastId = this._newestRenderableMessageId();
+      const live = /* @__PURE__ */ new Set();
+      for (const w of this.inlineWidgets) {
+        live.add(w.instanceId);
+        if (!this._inlineAnchors.has(w.instanceId)) {
+          this._inlineAnchors.set(w.instanceId, lastId);
+        }
+        this._ensureInlineElement(w);
+      }
+      for (const key of this._inlineAnchors.keys()) {
+        if (!live.has(key)) this._inlineAnchors.delete(key);
+      }
+      for (const key of this._inlineElements.keys()) {
+        if (!live.has(key)) {
+          this._inlineElements.get(key)?.cleanup?.();
+          this._inlineElements.delete(key);
+        }
+      }
+    }
+  }
+  /**
+   * Create (once) or refresh the cached element for an inline widget.
+   *
+   * Two mount paths, both keeping the chat bundle free of any widget-package
+   * import:
+   *   - Direct tag (self-defining, server-mounted widgets like the reco
+   *     carousel whose declared `widget` IS its custom-element tag):
+   *     `document.createElement(tag)`.
+   *   - Widget-id (admin-template widgets like `adaptive-product:card` or
+   *     `adaptive-faq:accordion`, whose `widget` is a runtime widget-id, NOT a
+   *     valid custom-element tag): mount through the runtime widget registry
+   *     via {@link mountInlineWidget}, which resolves the id to its real
+   *     element exactly like the deck `SyntroTileCard` path. Without this,
+   *     `createElement('adaptive-product:card')` yields an inert unknown
+   *     element and the tile renders permanently blank (the "inline mode
+   *     shows nothing but the reco" bug).
+   *
+   * Fail-safe: an id that resolves to neither a defined tag nor a registered
+   * widget caches `null` and renders nothing (no broken box).
+   */
+  _ensureInlineElement(w) {
+    let entry = this._inlineElements.get(w.instanceId);
+    if (entry === void 0) {
+      if (customElements.get(w.tag)) {
+        const el = document.createElement(w.tag);
+        el.setAttribute("data-inline-widget-el", "");
+        entry = { node: el, propsTarget: el };
+      } else if (this.mountInlineWidget) {
+        const container = document.createElement("div");
+        container.setAttribute("data-inline-widget-el", "");
+        const mounted = this.mountInlineWidget(w.tag, container, w.props);
+        entry = mounted ? { node: container, propsTarget: mounted.element, cleanup: mounted.cleanup } : null;
+      } else {
+        entry = null;
+      }
+      this._inlineElements.set(w.instanceId, entry);
+    }
+    if (!entry) return;
+    entry.propsTarget.props = w.props;
+  }
+  updated(changed) {
+    if (!changed.has("expanded") && !changed.has("forceExpanded") && !changed.has("messages")) {
+      return;
+    }
+    if (changed.has("messages")) {
+      let lastUserIdx = -1;
+      for (let i = this.messages.length - 1; i >= 0; i--) {
+        if (this.messages[i].role === "user") {
+          lastUserIdx = i;
+          break;
+        }
+      }
+      const lastUser = lastUserIdx >= 0 ? this.messages[lastUserIdx] : void 0;
+      const isLiveTurn = lastUser !== void 0 && this.messages.slice(lastUserIdx + 1).every((m) => m.role !== "user" && m.status === "streaming");
+      if (lastUser && isLiveTurn && lastUser.id !== this._anchorMsgId) {
+        this._anchorMsgId = lastUser.id;
+        this._anchorActive = true;
+        this._anchorHold = true;
+        this._stickToBottom = false;
+      }
+    }
+    if (!this._scrollable) {
+      this._pinToBottom();
+      return;
+    }
+    if (this._anchorActive && this._anchorHold) {
+      this._applyAnchor();
+    } else if (this._stickToBottom) {
+      this._pinToBottom();
+    } else {
+      requestAnimationFrame(() => this._syncContentBelow());
+    }
+  }
+  /** Render a set of inline widgets (reco carousel etc.) as
+   *  `[data-trail-widget]` blocks, anchored to a message position like
+   *  receipts. Each block hosts the cached custom element for that
+   *  instanceId — a defined tag mounts inline; an undefined tag renders
+   *  nothing (fail-safe). Rendered at every trail site (inline per anchor,
+   *  tail, empty-state) so placement can't diverge. */
+  _renderInlineWidgetStrip(list) {
+    if (list.length === 0) return nothing;
+    const blocks = list.map((w) => {
+      const entry = this._inlineElements.get(w.instanceId);
+      if (!entry) return nothing;
+      return html`<div
+          data-trail-widget
+          data-instance-id=${w.instanceId}
+          style=${styleMap(inlineWidgetBlockStyles())}
+        >${entry.node}</div>`;
+    }).filter((b) => b !== nothing);
+    if (blocks.length === 0) return nothing;
+    return html`${blocks}`;
+  }
+  /** A row of receipt chips, used at every trail render site (inline per
+   *  anchor message, the tail fallback, and the empty-state branches) so the
+   *  markup + styling can never diverge. Returns `nothing` for an empty list. */
+  _renderReceiptStrip(list) {
+    if (list.length === 0) return nothing;
+    return html`<div data-trail-tile-receipts style=${styleMap(tileReceiptStripStyles())}>
+      ${list.map((tr) => this._renderReceiptChip(tr))}
+    </div>`;
+  }
+  /** One receipt chip — a single, unified, single-line design for both kinds
+   *  (nav "alert" + mounted "tile"). Same container/title/action style so they
+   *  read as one chip family; the icon + action label carry the kind. No
+   *  subtitle: the old "Brought up earlier" line was hardcoded (wrong for
+   *  same-turn mounts) and made the chip taller — dropping it is the "shorter"
+   *  chip. Rendered at every trail site so the kinds can't diverge. */
+  _renderReceiptChip(tr) {
+    if (tr.kind === "alert") {
+      return html`<button
+        type="button"
+        data-trail-alert-receipt
+        data-instance-id=${tr.instanceId}
+        @click=${() => this._onAlertReceiptClick(tr.instanceId)}
+        style=${styleMap(tileReceiptChipStyles())}
+      >
+        <span style=${styleMap(alertReceiptIconStyles())} aria-hidden="true">⚡</span>
+        <span style=${styleMap(receiptChipTitleStyles("alert"))}>${tr.title}</span>
+        <span style=${styleMap(tileReceiptActionStyles(false))}>Go →</span>
+      </button>`;
+    }
+    return html`<button
+      type="button"
+      data-trail-tile-receipt
+      data-instance-id=${tr.instanceId}
+      @click=${() => this._onTileReceiptClick(tr.instanceId)}
+      style=${styleMap(tileReceiptChipStyles())}
+    >
+      <span style=${styleMap(tileReceiptGlyphStyles())} aria-hidden="true"
+        ><i style=${styleMap(tileReceiptGlyphLayerStyles(0))}></i
+        ><i style=${styleMap(tileReceiptGlyphLayerStyles(1))}></i
+      ></span>
+      <span style=${styleMap(receiptChipTitleStyles("tile"))}>${tr.title}</span>
+      <span style=${styleMap(tileReceiptActionStyles(tr.dismissed))}
+        >${tr.dismissed ? "Bring back \u21BA" : "View \u25B8"}</span
+      >
+    </button>`;
+  }
+  render() {
+    if (this.messages.length === 0 && !this.greeting && !this.introSuggestion && this.tileReceipts.length === 0 && this.inlineWidgets.length === 0)
+      return nothing;
+    if (this.messages.length === 0 && (this.greeting || this.introSuggestion)) {
+      return html`<div data-syntro-chat-trail data-state="empty" style=${styleMap({
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        gap: "12px",
+        flex: "1 1 auto",
+        width: "100%",
+        padding: "24px 16px",
+        pointerEvents: "auto"
+      })}>
+        <div data-trail-empty-icon style=${styleMap(emptyIconStyles())} aria-hidden="true">✦</div>
+        ${this.greeting ? html`<h2
+                data-trail-empty-title
+                style=${styleMap(emptyTitleStyles())}
+              >${unsafeHTML(renderMarkdown(stripTrailingWhitespace(this.greeting)))}</h2>` : nothing}
+        ${this.introSuggestion ? html`<button
+                type="button"
+                data-trail-intro-suggestion
+                @click=${this._onIntroSuggestionClick}
+                style=${styleMap(introSuggestionStyles())}
+              >${this.introSuggestion.label}</button>` : nothing}
+        ${this._renderReceiptStrip(this.tileReceipts)}
+        ${this._renderInlineWidgetStrip(this.inlineWidgets)}
+      </div>`;
+    }
+    if (this.messages.length === 0 && (this.tileReceipts.length > 0 || this.inlineWidgets.length > 0)) {
+      return html`<div data-syntro-chat-trail data-state="empty" style=${styleMap({
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "6px",
+        width: "100%",
+        padding: "8px 0",
+        pointerEvents: "auto"
+      })}>
+        ${this._renderReceiptStrip(this.tileReceipts)}
+        ${this._renderInlineWidgetStrip(this.inlineWidgets)}
+      </div>`;
+    }
+    let suggestionHostId = null;
+    for (let i = this.messages.length - 1; i >= 0; i--) {
+      const m = this.messages[i];
+      if (m.role === "user") break;
+      if (m.role === "assistant" && extractSuggestedReplies(m.toolCalls).length > 0) {
+        suggestionHostId = m.id;
+        break;
+      }
+    }
+    const renderable = this.messages.filter(
+      (m) => m.role !== "assistant" || assistantChipRendersContent(m, m.id === suggestionHostId)
+    );
+    const visible = this.expanded || this.forceExpanded ? renderable : renderable.slice(-this.visibleCount);
+    const hidden = renderable.length - visible.length;
+    const visibleIds = new Set(visible.map((m) => m.id));
+    const receiptsByAnchor = /* @__PURE__ */ new Map();
+    const tailReceipts = [];
+    for (const r of this.tileReceipts) {
+      const anchor = this._receiptAnchors.get(r.instanceId) ?? null;
+      if (anchor !== null && visibleIds.has(anchor)) {
+        const list = receiptsByAnchor.get(anchor);
+        if (list) list.push(r);
+        else receiptsByAnchor.set(anchor, [r]);
+      } else {
+        tailReceipts.push(r);
+      }
+    }
+    const inlineByAnchor = /* @__PURE__ */ new Map();
+    const tailInlineWidgets = [];
+    for (const w of this.inlineWidgets) {
+      const anchor = this._inlineAnchors.get(w.instanceId) ?? null;
+      if (anchor !== null && visibleIds.has(anchor)) {
+        const list = inlineByAnchor.get(anchor);
+        if (list) list.push(w);
+        else inlineByAnchor.set(anchor, [w]);
+      } else {
+        tailInlineWidgets.push(w);
+      }
+    }
+    const baseStyles = {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px",
+      // NO `justifyContent: flex-end` here — combined with `overflow: auto`
+      // it's a known cross-browser bug: oversized flex children get
+      // pushed ABOVE the container without contributing to scrollHeight,
+      // so the scrollbar never appears. We rely on `:first-child {
+      // margin-top: auto }` (injected as global CSS) to push short
+      // content to the bottom of the box while leaving overflow handling
+      // to the native scroll container.
+      width: "100%",
+      // The trail itself has no chrome — chips sit on the host page bg.
+      padding: "0",
+      pointerEvents: "auto"
+    };
+    const modeStyles = this.forceExpanded ? {
+      // Full-screen host: fill all available vertical space and
+      // scroll the overflow. ``flex: 1 1 auto`` (basis AUTO, not 0) —
+      // in a DEFINITE-height parent (full-screen panel) grow:1 still
+      // fills all free space and margin-top:auto bottom-anchors, so
+      // fill behavior is unchanged; but basis auto also lets the trail
+      // report its CONTENT height as its natural size, so in an
+      // INDEFINITE-height parent (velvet's shrink-wrap bottom sheet)
+      // the trail contributes real content height instead of collapsing
+      // to 0 — which is what lets the sheet hug its content with no void.
+      // shrink:1 + min-height:0 still lets the trail shrink first when
+      // the parent runs out of room; the input row is absolute-pinned
+      // (never pushed off) and the header shrinks after the trail.
+      flex: "1 1 auto",
+      minHeight: "0",
+      overflowY: "auto",
+      // ``contain`` prevents scroll from bubbling out to the host
+      // page when the trail hits top or bottom. Required for the
+      // panel-scroll-leak regression test in
+      // SyntroBottomSheet.test.ts.
+      overscrollBehavior: "contain",
+      paddingTop: "8px",
+      borderTop: "var(--sc-content-bubble-border, 1px solid rgba(255, 255, 255, 0.18))",
+      scrollBehavior: "smooth",
+      scrollbarWidth: "thin"
+    } : this.expanded ? {
+      maxHeight: "min(320px, 40vh)",
+      overflowY: "auto",
+      paddingTop: "8px",
+      borderTop: "var(--sc-content-bubble-border, 1px solid rgba(255, 255, 255, 0.18))",
+      scrollBehavior: "smooth",
+      scrollbarWidth: "thin"
+    } : {
+      // Collapsed mode = ambient peek surface. Never a scrollbar:
+      // long messages slide up behind the blur veil instead of
+      // exposing a scrollbar. The "↑ N more · expand" affordance
+      // is the only entry into history; clicking it switches to
+      // expanded mode where scroll IS allowed.
+      // Height kept short so the trail reads as a peek strip above
+      // the chat bar, not a panel — long single replies fade into
+      // the blur veil at the top, user expands to read the rest.
+      maxHeight: "min(140px, 22vh)",
+      overflow: "hidden"
+    };
+    const containerStyles = { ...baseStyles, ...modeStyles };
+    const frameStyles = this.forceExpanded ? {
+      position: "relative",
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      // basis AUTO (see the scroller's modeStyles note): fills a definite
+      // parent, contributes content height in an indefinite one (velvet
+      // shrink-wrap). Every fill layer in the chain must be basis-auto or
+      // the min-content of a basis-0 layer collapses the whole chain to 0.
+      flex: "1 1 auto",
+      minHeight: "0"
+    } : {
+      position: "relative",
+      width: "100%"
+    };
+    return html`
+      ${// Single toggle button above the frame. Same DOM node morphs:
+    //   collapsed → "↑ N more · expand" / "↑ expand"  (calls _onExpand)
+    //   expanded  → "⌄ minimize"                       (calls _onCollapse)
+    // Lives OUTSIDE the frame so the absolute blur veil (top:0,
+    // z-index:2 inside the frame) doesn't cover it. Shown whenever
+    // there's anything in the trail — the user expects this affordance
+    // available regardless of how many chips are on screen.
+    // When ``forceExpanded`` is set by the host (full-screen panel,
+    // etc.), there's nowhere to collapse INTO and the affordance
+    // would just confuse the user — suppress it entirely.
+    this.messages.length === 0 || this.forceExpanded ? nothing : this.expanded ? html`<button
+                type="button"
+                data-trail-toggle
+                data-trail-collapse
+                @click=${this._onCollapse}
+                style=${styleMap(moreStyles())}
+              >⌄ minimize</button>` : html`<button
+                type="button"
+                data-trail-toggle
+                data-trail-more
+                @click=${this._onExpand}
+                style=${styleMap(moreStyles())}
+              >${hidden > 0 ? html`↑ ${hidden} more · expand` : html`↑ expand`}</button>`}
+      <div data-syntro-chat-trail-frame style=${styleMap(frameStyles)}>
+      <div
+        data-syntro-chat-trail
+        style=${styleMap(containerStyles)}
+        @scroll=${this._onTrailScroll}
+        @wheel=${this._markUserScrollIntent}
+        @touchmove=${this._markUserScrollIntent}
+      >
+        ${visible.map((m, i) => {
+      const pos = this.expanded || this.forceExpanded ? 0 : visible.length - 1 - i;
+      const state = chipVisualState(m);
+      const isStreaming = state.kind === "streaming";
+      const {
+        pendingToolCalls: toolCalls,
+        receipts,
+        replyChips
+      } = computeAssistantChipParts(m, m.id === suggestionHostId);
+      const renderedText = m.role === "assistant" ? (
+        // Never paint a degenerate serialized-response dump, even if the
+        // turn also carries a legit part (receipt/chip) that keeps it in
+        // the renderable set. Mirrors the filter's drop signal.
+        looksLikeSerializedModelResponse(m.text ?? "") ? nothing : html`${unsafeHTML(renderMarkdown(stripTrailingWhitespace(m.text)))}`
+      ) : html`${m.text}`;
+      const chipStyle = isStreaming ? {
+        ...chipStyles(state, pos),
+        animation: "syntro-trail-chip-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both"
+      } : chipStyles(state, pos);
+      return html`<div
+              data-trail-chip
+              data-trail-chip-id=${String(m.id)}
+              data-role=${m.role}
+              data-status=${m.status ?? "complete"}
+              style=${styleMap(chipStyle)}
+            >${renderedText}${isStreaming ? html`<span
+                    data-trail-caret
+                    aria-hidden="true"
+                    style=${styleMap(caretStyles())}
+                  ></span>` : nothing}${toolCalls.length > 0 ? html`<div data-trail-toolcalls style=${styleMap(toolCallStripStyles())}>
+                    ${toolCalls.map(
+        (tc) => html`<button
+                        type="button"
+                        data-trail-toolcall
+                        data-tool-id=${tc.id}
+                        data-tool-status=${tc.status}
+                        @click=${() => this._onToolCallClick(tc)}
+                        style=${styleMap(pendingToolCallChipStyles())}
+                        title="${tc.name} · ${tc.status}"
+                      >? ${tc.name}</button>`
+      )}
+                  </div>` : nothing}${receipts.length > 0 ? html`<div data-trail-receipts style=${styleMap(receiptStripStyles())}>
+                    ${receipts.map(
+        (r) => html`<div
+                        data-trail-receipt
+                        data-receipt-type=${r.type}
+                        style=${styleMap(receiptStyles())}
+                      ><span aria-hidden="true" style=${styleMap(receiptIconStyles())}>✓</span
+                        ><span>${receiptText(r)}</span></div>`
+      )}
+                  </div>` : nothing}${replyChips.length > 0 ? html`<div data-trail-reply-chips style=${styleMap(replyChipStripStyles())}>
+                    ${replyChips.map(
+        (reply) => html`<button
+                        type="button"
+                        data-trail-reply-chip
+                        @click=${() => this._onSuggestedReplyClick(reply)}
+                        style=${styleMap(replyChipStyles())}
+                      >${reply}</button>`
+      )}
+                  </div>` : nothing}</div>${// Receipt chips that mounted while THIS message was newest render
+      // inline right here, so they read as part of the flow and drift up
+      // as later messages append below them.
+      this._renderReceiptStrip(receiptsByAnchor.get(m.id) ?? [])}${// Inline widgets (reco carousel) anchored to this message render
+      // right here in the conversation flow — the whole point of the
+      // chat-inline slot: visible in the trail, not behind the panel.
+      this._renderInlineWidgetStrip(inlineByAnchor.get(m.id) ?? [])}`;
+    })}
+        ${// Thinking indicator — fills the gap between the user's
+    // most recent message and the assistant's first token.
+    // Shows when chatSession.inFlight is true AND the last
+    // message is NOT a streaming assistant message (the
+    // assistant's own caret takes over once tokens arrive).
+    // Styled as an assistant chip with three bouncing dots
+    // instead of text, so the thread reads naturally — the
+    // visitor sees an "assistant" bubble that's clearly busy.
+    this._shouldShowThinking() ? html`<div
+                data-trail-thinking
+                data-role="assistant"
+                data-status="thinking"
+                aria-label=${this.thinkingText ? `Assistant is thinking: ${this.thinkingText}` : "Assistant is thinking"}
+                style=${styleMap(thinkingSlotStyles())}
+              >
+                ${// When the backend has streamed reasoning narration into
+    // `thinkingText`, render the tail of it as a small italic
+    // line — the model's own intent ("Let me check what we have
+    // for student athletes…") narrates the gap better than
+    // silent dots. Falls back to the bouncing-dot pulse when
+    // no narration has arrived yet.
+    this.thinkingText ? html`<span
+                        data-trail-thinking-text
+                        style=${styleMap(thinkingTextStyles())}
+                        >${truncateThinkingTail(this.thinkingText)}</span
+                      >` : html`<span data-trail-thinking-dots style=${styleMap(thinkingDotsStyles())}>
+                        <span style=${styleMap(thinkingDotStyles(0))}></span>
+                        <span style=${styleMap(thinkingDotStyles(1))}></span>
+                        <span style=${styleMap(thinkingDotStyles(2))}></span>
+                      </span>`}
+              </div>` : nothing}
+        ${// Tail strip: receipts with no in-slice anchor (mounted pre-chat, or
+    // their anchor message scrolled out of the ambient view). Keeps them
+    // reachable at the bottom — the old always-pinned position — rather
+    // than dropping them. In expanded/maximized mode every message is
+    // painted, so this is usually empty and receipts sit inline instead.
+    this._renderReceiptStrip(tailReceipts)}
+        ${// Inline widgets with no in-slice anchor (mounted pre-chat, or their
+    // anchor scrolled out of the ambient view) render at the tail.
+    this._renderInlineWidgetStrip(tailInlineWidgets)}
+      </div>
+      ${// The blur veil only fires in collapsed (ambient) mode.
+    // Expanded = the user explicitly asked for history; blurring
+    // the top of the panel would hide content (including the
+    // minimize button just above the trail's top edge) the user
+    // came here to see.
+    this.expanded || this.forceExpanded ? nothing : html`<div
+              data-trail-blur-veil
+              aria-hidden="true"
+              style=${styleMap(blurVeilStyles())}
+            ></div>`}
+      ${// "Scroll to most recent" pill (FEAT-1783535427): shown only in
+    // the scrollable modes when content extends below the viewport —
+    // the visitor is reading the reply top-down and this is the
+    // one-tap opt-in back to the newest content. Absolute inside the
+    // positioning frame so it floats over the scroller's bottom edge.
+    this._scrollable && this._messagesBelow > 0 ? html`<button
+              type="button"
+              data-trail-scroll-recent
+              aria-label="Scroll to most recent — ${this._messagesBelow} ${this._messagesBelow === 1 ? "message" : "messages"} below"
+              @click=${this._onScrollToRecent}
+              style=${styleMap(scrollRecentPillStyles())}
+            ><span aria-hidden="true" style="font-size:11px;line-height:1;">⌄</span><span>${this._messagesBelow} ${this._messagesBelow === 1 ? "message" : "messages"}</span></button>` : nothing}
+      </div>
+    `;
+  }
+};
+// Trail-local styles. The chat-trail used to render into light DOM
+// (`createRenderRoot() { return this }`) and inject these rules into
+// `document.head` so chip + markdown styles could find their selectors.
+// That broke the moment the trail was hosted inside any shadow root
+// (sc-mount → custom-canvas → velvet-mobile → sc-mount → chat-bar →
+// chat-trail is the production chain): CSS animations require the
+// @keyframes rule to be in the SAME TreeScope as the element using
+// it, and document-level keyframes don't cross a shadow boundary.
+// Result was silent — `animation-name` parsed fine, the property got
+// the right resolved value, but the browser never instantiated an
+// Animation object because no matching keyframe was visible from
+// inside the shadow tree. `getAnimations()` returned `[]`, dots sat
+// frozen at base scale, the typing indicator looked dead.
+//
+// Shadow DOM with `static styles` is the right architecture here.
+// CSS custom properties (--sc-tile-text-color, --sc-content-bubble-*,
+// etc.) inherit through shadow boundaries by default, so the canvas
+// theme cascade still reaches the chips without the light-DOM
+// workaround. As a bonus the markdown reset rules can't leak out
+// onto the host page, and the keyframes are owned by the trail's
+// own tree scope where the chip + dot elements live.
+_AdaptiveChatTrail.styles = css`
+    [data-syntro-chat-trail] > :first-child {
+      margin-top: auto;
+    }
+    [data-trail-chip] > p:first-child {
+      margin-top: 0;
+    }
+    [data-trail-chip] > p:last-child {
+      margin-bottom: 0;
+    }
+    [data-trail-chip] p {
+      margin: 4px 0;
+    }
+    [data-trail-chip] br + br {
+      display: none;
+    }
+    [data-trail-chip] ul,
+    [data-trail-chip] ol {
+      margin: 4px 0;
+      padding-left: 1.1em;
+    }
+    [data-trail-chip] li {
+      margin: 0;
+    }
+    [data-trail-chip] li + li {
+      margin-top: 1px;
+    }
+    [data-trail-chip] pre {
+      margin: 6px 0;
+      padding: 6px 8px;
+      background: var(--sc-content-code-background-block, rgba(0, 0, 0, 0.35));
+      border-radius: 6px;
+      overflow-x: auto;
+      font-size: 11px;
+    }
+    [data-trail-chip] code {
+      font-family: ui-monospace, SF Mono, Menlo, monospace;
+      font-size: 11px;
+      background: var(--sc-content-code-background, rgba(0, 0, 0, 0.25));
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+    [data-trail-chip] pre code {
+      background: transparent;
+      padding: 0;
+    }
+    [data-trail-chip] a {
+      color: var(--sc-content-link-color, var(--sc-color-primary, #b72e2a));
+      text-decoration: underline;
+    }
+    [data-trail-chip] strong {
+      font-weight: 600;
+    }
+    /* Streaming-caret blink for in-progress assistant chips. */
+    @keyframes syntro-trail-caret {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    /* Thinking-dot scale + opacity pulse. The naked-dots redesign
+       relies entirely on this motion to signal "alive" — there's no
+       chip frame around the dots, so a subtle animation reads as
+       broken. 0.4 → 1.0 scale with 0.25 → 1.0 opacity gives an
+       unmistakable breathing cue.  */
+    @keyframes syntro-trail-thinking-pulse {
+      0%,
+      100% {
+        transform: scale(0.4);
+        opacity: 0.25;
+      }
+      45% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+    /* Chip entrance — fades a freshly-mounted chip up from below
+       so the thinking → first-streaming-chip handoff feels like one
+       continuous motion instead of an element swap. */
+    @keyframes syntro-trail-chip-enter {
+      from {
+        opacity: 0;
+        transform: translateY(6px) scale(0.97);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+  `;
+_AdaptiveChatTrail.properties = {
+  messages: { attribute: false },
+  visibleCount: { type: Number },
+  expanded: { type: Boolean },
+  greeting: { type: String },
+  /** When true: trail renders fully expanded AND the
+   *  expand/collapse affordance is hidden. Used by hosts that mount
+   *  the chat in a full-screen surface (the mobile panel) where
+   *  collapse makes no sense — there's nothing to collapse INTO. */
+  forceExpanded: { type: Boolean },
+  /**
+   * Mirrors `chatSession.inFlight` — true between `send()` and the
+   * assistant's first `receiveStart`/`receiveDelta`, OR while a
+   * stream is in progress. Drives the "thinking" indicator that
+   * fills the gap between the user's just-sent message and the
+   * first assistant token. Wired through AdaptiveChatBar (it owns
+   * the chatSession subscription and forwards inFlight as a prop).
+   */
+  inFlight: { type: Boolean },
+  /**
+   * Live reasoning narration streamed from the model via AG-UI
+   * `THINKING_TEXT_MESSAGE_CONTENT`. When non-empty, the thinking
+   * chip renders this in place of the bouncing dots so the visitor
+   * sees what the model is actually doing instead of staring at
+   * silent loading state during a tool-call gap.
+   */
+  thinkingText: { attribute: false },
+  /**
+   * Pre-conversation suggestion chip. When the visitor opens the
+   * chat and `messages` is empty, the trail renders this as a
+   * button beneath the greeting. Clicking it dispatches a
+   * `trail-intro-suggestion` event with the configured prompt —
+   * the parent (chat-bar) forwards that to chatSession.send().
+   * Disappears the moment the first message lands.
+   */
+  introSuggestion: { attribute: false },
+  /**
+   * Tappable tile-receipt chips rendered once at the end of the
+   * trail. Produced from the store by Task 3 (AdaptiveChatBar).
+   * Each chip emits `tile-receipt-activate` with its instanceId.
+   */
+  tileReceipts: { attribute: false },
+  /**
+   * Widgets rendered INLINE in the trail (reco carousel etc.),
+   * anchored to a message position like receipts. Sourced from the
+   * store's `chat-inline` slot mounts via AdaptiveChatBar.
+   */
+  inlineWidgets: { attribute: false },
+  /**
+   * Registry-backed mounter for inline widgets whose id is not their
+   * custom-element tag. Injected from the chat-bar mountable.
+   */
+  mountInlineWidget: { attribute: false },
+  _messagesBelow: { state: true }
+};
+_AdaptiveChatTrail._AT_BOTTOM_EPSILON_PX = 50;
+_AdaptiveChatTrail._USER_SCROLL_INTENT_WINDOW_MS = 1200;
+var AdaptiveChatTrail = _AdaptiveChatTrail;
+function scrollRecentPillStyles() {
+  return {
+    position: "absolute",
+    bottom: "8px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    display: "flex",
+    alignItems: "center",
+    gap: "5px",
+    height: "26px",
+    padding: "0 10px",
+    borderRadius: "9999px",
+    border: "var(--sc-content-bubble-border, 1px solid rgba(255, 255, 255, 0.18))",
+    background: "var(--sc-content-bubble-bg, rgba(20, 22, 28, 0.85))",
+    color: "var(--sc-tile-text-color, rgba(255, 255, 255, 0.92))",
+    fontSize: "12px",
+    fontWeight: "500",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.25)",
+    zIndex: "3"
+  };
+}
+function blurVeilStyles() {
+  const mask = "linear-gradient(to bottom, black 0%, black 40%, transparent 100%)";
+  return {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    height: `${TRAIL_BLUR_VEIL_PX}px`,
+    pointerEvents: "none",
+    backdropFilter: `blur(${TRAIL_BLUR_MAX_PX}px)`,
+    WebkitBackdropFilter: `blur(${TRAIL_BLUR_MAX_PX}px)`,
+    maskImage: mask,
+    WebkitMaskImage: mask,
+    zIndex: "2"
+  };
+}
+function chipVisualState(m) {
+  if (m.role === "system") {
+    return { kind: "notice", role: m.role };
+  }
+  if (m.role === "assistant" && m.status === "error") {
+    return { kind: "settled", role: m.role };
+  }
+  if (m.status === "error") {
+    return { kind: "notice", role: m.role };
+  }
+  if (m.role === "assistant" && m.status === "streaming") {
+    return { kind: "streaming" };
+  }
+  return { kind: "settled", role: m.role };
+}
+function chipStyles(state, pos) {
+  const opacity = Math.max(OPACITY_FLOOR, 1 - pos * OPACITY_STEP);
+  const yPx = pos * Y_DRIFT_PX;
+  let border;
+  let background;
+  let color;
+  let alignSelf;
+  switch (state.kind) {
+    case "settled":
+      if (state.role === "user") {
+        border = "var(--sc-content-bubble-border-user, 1px solid rgba(255, 255, 255, 0.28))";
+        background = "var(--sc-content-bubble-background-user, rgba(255, 255, 255, 0.10))";
+        alignSelf = "flex-end";
+      } else {
+        border = "var(--sc-content-bubble-border, 1px solid rgba(255, 255, 255, 0.18))";
+        background = "var(--sc-content-bubble-background, rgba(20, 22, 24, 0.35))";
+        alignSelf = "flex-start";
+      }
+      color = "var(--sc-tile-title-color, inherit)";
+      break;
+    case "streaming":
+    case "pending":
+      border = "var(--sc-content-bubble-border, 1px solid rgba(255, 255, 255, 0.18))";
+      background = "var(--sc-content-bubble-background, rgba(20, 22, 24, 0.35))";
+      color = "var(--sc-tile-title-color, inherit)";
+      alignSelf = "flex-start";
+      break;
+    case "notice":
+      border = "var(--sc-content-bubble-border-error, 1px solid rgba(255, 255, 255, 0.22))";
+      background = "var(--sc-content-bubble-background-error, rgba(20, 22, 24, 0.28))";
+      color = "var(--sc-content-bubble-text-error, rgba(255, 255, 255, 0.75))";
+      alignSelf = state.role === "user" ? "flex-end" : "flex-start";
+      break;
+  }
+  return {
+    alignSelf,
+    // Single shared width policy for EVERY bubble (user / assistant /
+    // streaming / pending / error). Short and long replies now read as a
+    // consistent column: `fit-content` sizes each bubble to its text, and
+    // `TRAIL_MAX_WIDTH` caps the wide ones at the same ceiling — no more
+    // per-role or per-path width drift (user feedback: chat tiles had
+    // differing widths).
+    maxWidth: TRAIL_MAX_WIDTH,
+    width: "fit-content",
+    // Bumped from 11px → 13px after the chat lid in production read as
+    // cramped at the smaller size — body chat copy needs to be visitor-
+    // legible on a phone without zoom, and 11px reads as a footnote
+    // rather than the primary conversation surface. Code blocks inside
+    // chip body scale proportionally (10px → 11px) below.
+    fontSize: "13px",
+    lineHeight: "1.45",
+    padding: "5px 11px",
+    borderRadius: "10px",
+    border,
+    background,
+    // Frosted-glass bubbles are OPT-IN via the `--sc-content-bubble-blur`
+    // knob (a host that wants glass sets e.g. `blur(8px)` deliberately); the
+    // DEFAULT is `none`. A backdrop-filter on the bubble composites its OWN
+    // text onto a GPU layer (grayscale AA + the blurred backdrop bleeding
+    // under thin glyphs) — the resting-state compositing contract's
+    // "backdrop-filter behind text" case: soft rasterization everywhere and
+    // fully BLANKED text on some Android GPUs. Glass-by-default shipped that
+    // hazard to every non-velvet surface, so the default flipped to `none`
+    // (GPU/compositing hazard audit, Fix 3). Gate:
+    // AdaptiveChatTrail.compositing.test.ts.
+    backdropFilter: "var(--sc-content-bubble-blur, none)",
+    WebkitBackdropFilter: "var(--sc-content-bubble-blur, none)",
+    color,
+    transition: "opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1)",
+    // Per-position opacity + y-drift falloff is still per-chip — those
+    // operate naturally per element. Blur is NOT per-chip anymore: it's
+    // applied via an absolute-positioned veil at the top of the scroll
+    // viewport (TRAIL_BLUR_VEIL_PX above), so a single long message
+    // doesn't get uniformly blurred across its full body.
+    opacity: String(toFixedTrim(opacity)),
+    transform: `translateY(${yPx}px)`,
+    // User messages render as raw text (`html` template); pre-wrap preserves
+    // newlines the visitor typed. Assistant messages render as markdown HTML
+    // (`<p>` tags from marked); pre-wrap there would make marked's inter-tag
+    // text nodes (the `\n` between/after `<p>` tags) visible, producing the
+    // trailing/inter-paragraph blank lines visitors reported. Markdown's own
+    // structure carries the paragraph breaks, so assistant chips use the
+    // default `normal` whitespace handling.
+    whiteSpace: (state.kind === "settled" || state.kind === "notice") && state.role === "user" ? "pre-wrap" : "normal",
+    wordBreak: "break-word"
+  };
+}
+function toolCallStripStyles() {
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "4px",
+    marginTop: "4px",
+    paddingTop: "4px",
+    borderTop: "1px dashed var(--sc-content-divider-color, rgba(255, 255, 255, 0.12))"
+  };
+}
+function pendingToolCallChipStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "2px 7px",
+    border: "var(--sc-content-bubble-border-user, 1px solid rgba(255, 255, 255, 0.28))",
+    background: "var(--sc-content-bubble-background-user, rgba(255, 255, 255, 0.10))",
+    color: "var(--sc-tile-text-color, inherit)",
+    borderRadius: "999px",
+    fontSize: "10px",
+    fontWeight: "500",
+    fontFamily: "ui-monospace, SF Mono, Menlo, monospace",
+    cursor: "pointer",
+    opacity: "1"
+  };
+}
+function deriveActivityReceipt(tc) {
+  if (tc.name !== "primary_response_action") return null;
+  const args = tc.args;
+  if (!args || typeof args !== "object") return null;
+  const templateId = typeof args.template_id === "string" ? args.template_id : "";
+  const content = args.content ?? null;
+  const title = content && typeof content.title === "string" && content.title.trim() ? content.title.trim() : "";
+  const id = templateId.toLowerCase();
+  let type;
+  if (id.includes("faq")) type = "FAQ";
+  else if (id.includes("chart") || id.includes("graph")) type = "chart";
+  else if (id.includes("card") || id.includes("product")) type = "card";
+  else if (id.includes("alert") || id.includes("navigation") || id.includes("nav")) type = "alert";
+  else type = "added to your view";
+  const label = title || templateId || "something";
+  return { type, label };
+}
+function receiptText(r) {
+  switch (r.type) {
+    case "FAQ":
+      return "Opened the FAQ for you";
+    case "chart":
+      return `Put together ${r.label} for you`;
+    case "card":
+      return "Pulled up the product for you";
+    case "alert":
+      return `Here's a shortcut: ${r.label}`;
+    default:
+      return `Pulled up ${r.label} for you`;
+  }
+}
+function extractSuggestedReplies(toolCalls) {
+  if (!toolCalls) return [];
+  for (const tc of toolCalls) {
+    if (tc.name !== "suggest_replies") continue;
+    const replies = tc.args?.replies;
+    if (!Array.isArray(replies)) return [];
+    return replies.filter((r) => typeof r === "string" && r.trim().length > 0).map((r) => r.trim()).slice(0, 4);
+  }
+  return [];
+}
+function computeAssistantChipParts(m, isSuggestionHost) {
+  const toolCalls = m.toolCalls ?? [];
+  return {
+    pendingToolCalls: toolCalls.filter((tc) => tc.status === "pending"),
+    receipts: toolCalls.map(deriveActivityReceipt).filter((r) => r !== null),
+    replyChips: isSuggestionHost ? extractSuggestedReplies(toolCalls) : []
+  };
+}
+function looksLikeSerializedModelResponse(text) {
+  const t = text.trimStart();
+  if (t.startsWith("(Empty response")) return true;
+  let hits = 0;
+  if (/['"]stop_reason['"]\s*:/.test(t)) hits++;
+  if (/['"]signature['"]\s*:/.test(t)) hits++;
+  if (/['"]type['"]\s*:\s*['"]thinking['"]/.test(t)) hits++;
+  if (/['"]content['"]\s*:\s*\[/.test(t)) hits++;
+  return hits >= 2;
+}
+function assistantChipRendersContent(m, isSuggestionHost) {
+  const text = (m.text ?? "").trim();
+  if (text.length > 0 && !looksLikeSerializedModelResponse(text)) return true;
+  const { pendingToolCalls, receipts, replyChips } = computeAssistantChipParts(m, isSuggestionHost);
+  return pendingToolCalls.length > 0 || receipts.length > 0 || replyChips.length > 0;
+}
+function inlineWidgetBlockStyles() {
+  return {
+    alignSelf: "stretch",
+    width: "100%",
+    minWidth: "0",
+    marginTop: "6px",
+    contain: "layout"
+  };
+}
+function receiptStripStyles() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginTop: "4px"
+  };
+}
+function receiptStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "5px",
+    alignSelf: "flex-start",
+    fontSize: "11px",
+    lineHeight: "1.3",
+    fontWeight: "500",
+    letterSpacing: "0.01em",
+    // Inherit the chip's OWN resolved text color (muted via opacity), so the
+    // receipt is legible on every theme by construction. The old
+    // `--sc-content-muted-color` fallback was rgba(255,255,255,…) — white —
+    // invisible on light canvases; a `--sc-tile-text-color` token can likewise
+    // be unset/mismatched on dark canvases. `currentColor` always matches the
+    // chip text the visitor is already reading.
+    color: "currentColor",
+    opacity: "0.7"
+  };
+}
+function receiptIconStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "14px",
+    height: "14px",
+    borderRadius: "50%",
+    fontSize: "9px",
+    fontWeight: "700",
+    color: "#fff",
+    background: "hsl(var(--sc-accent-color, 145 40% 45%) / 0.7)"
+  };
+}
+function replyChipStripStyles() {
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px",
+    marginTop: "6px",
+    alignSelf: "flex-start"
+  };
+}
+function tileReceiptStripStyles() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    marginTop: "6px",
+    width: "100%",
+    alignSelf: "stretch"
+  };
+}
+function replyChipStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "5px 12px",
+    border: "1px solid hsl(var(--sc-accent-color, 145 40% 45%) / 0.40)",
+    borderRadius: "9999px",
+    background: "hsl(var(--sc-accent-color, 145 40% 45%) / 0.12)",
+    color: "var(--sc-tile-text-color, currentColor)",
+    font: "inherit",
+    fontSize: "12px",
+    fontWeight: "500",
+    lineHeight: "1.2",
+    cursor: "pointer",
+    backdropFilter: "var(--sc-content-bubble-blur, none)",
+    WebkitBackdropFilter: "var(--sc-content-bubble-blur, none)",
+    transition: "background 150ms ease, transform 120ms ease"
+  };
+}
+function alertReceiptIconStyles() {
+  return {
+    flex: "0 0 auto",
+    width: "26px",
+    height: "26px",
+    borderRadius: "8px",
+    display: "grid",
+    placeItems: "center",
+    background: "hsl(var(--sc-accent-color))",
+    color: "var(--sc-accent-foreground, #fff)",
+    fontSize: "14px"
+  };
+}
+function tileReceiptChipStyles() {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    width: "100%",
+    textAlign: "left",
+    cursor: "pointer",
+    padding: "9px 10px 9px 11px",
+    borderRadius: "12px",
+    border: "1px solid hsl(var(--sc-accent-color) / 0.28)",
+    background: "hsl(var(--sc-accent-color) / 0.06)"
+  };
+}
+function tileReceiptGlyphStyles() {
+  return { position: "relative", flex: "0 0 auto", width: "28px", height: "28px" };
+}
+function tileReceiptGlyphLayerStyles(i) {
+  return {
+    position: "absolute",
+    inset: "0",
+    borderRadius: "7px",
+    background: "hsl(var(--sc-accent-color) / 0.22)",
+    boxShadow: "inset 0 0 0 1px hsl(var(--sc-accent-color) / 0.4)",
+    ...i === 0 ? { transform: "translate(3px,-3px) rotate(6deg)", opacity: "0.5" } : {}
+  };
+}
+function receiptChipTitleStyles(_kind) {
+  return {
+    // Grows to fill the space between the icon and the action pill, truncating
+    // long product names on one line (the chip is now single-line).
+    flex: "1",
+    minWidth: "0",
+    fontSize: "13px",
+    fontWeight: "650",
+    lineHeight: "1.2",
+    color: "var(--sc-content-text-color, #0f172a)",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  };
+}
+function tileReceiptActionStyles(dismissed) {
+  return {
+    flex: "0 0 auto",
+    fontSize: "11px",
+    fontWeight: "700",
+    borderRadius: "999px",
+    padding: "4px 10px",
+    ...dismissed ? { background: "hsl(var(--sc-accent-color) / 0.14)", color: "hsl(var(--sc-accent-color))" } : {
+      background: "hsl(var(--sc-accent-color) / 0.9)",
+      color: "var(--sc-accent-foreground, #fff)"
+    }
+  };
+}
+function caretStyles() {
+  return {
+    display: "inline-block",
+    width: "6px",
+    height: "12px",
+    marginLeft: "3px",
+    verticalAlign: "-1px",
+    background: "hsl(var(--sc-accent-color) / 0.85)",
+    borderRadius: "1px",
+    animation: "syntro-trail-caret 1s steps(2, end) infinite"
+  };
+}
+function thinkingSlotStyles() {
+  return {
+    alignSelf: "flex-start",
+    color: "var(--sc-tile-title-color, inherit)",
+    padding: "4px 4px",
+    animation: "syntro-trail-chip-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both"
+  };
+}
+function thinkingDotsStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    // Line height matches what a single-line text chip would compute
+    // to, so swapping out the slot for the streaming chip doesn't
+    // shift the next chip up or down by a couple of pixels.
+    lineHeight: "14px"
+  };
+}
+function thinkingDotStyles(index) {
+  return {
+    display: "inline-block",
+    width: "7px",
+    height: "7px",
+    borderRadius: "50%",
+    background: "currentColor",
+    // The dots are now the entire visual — no bubble framing them —
+    // so the pulse has to do all the work the chip used to do. Scale
+    // 0.4 → 1.0 with opacity 0.25 → 1.0 gives an unmistakable
+    // breathing motion: at the trough each dot reads like a faint
+    // ghost, at the peak like a solid dot. 940ms cycle is a touch
+    // faster than the original 1.05s; without the chip frame the
+    // shorter cycle feels purposeful instead of agitated. Stagger
+    // 130ms = clear rolling cadence across all three.
+    transformOrigin: "center",
+    animation: `syntro-trail-thinking-pulse 940ms cubic-bezier(0.4, 0, 0.6, 1) ${index * 0.13}s infinite both`
+  };
+}
+function moreStyles() {
+  return {
+    // Center horizontally regardless of the parent's display model.
+    // ``alignSelf: center`` only works when the parent is a flex/grid
+    // container with cross-axis alignment; the chat-bar's flex column
+    // stretches us full-width instead. ``display: block`` + auto inline
+    // margins centers the auto-sized button without needing the parent
+    // to opt in.
+    display: "block",
+    marginLeft: "auto",
+    marginRight: "auto",
+    marginBottom: "6px",
+    fontSize: "10px",
+    fontWeight: "500",
+    letterSpacing: "0.06em",
+    padding: "4px 10px",
+    border: "1px solid hsl(var(--sc-accent-color) / 0.32)",
+    borderRadius: "999px",
+    background: "hsl(var(--sc-accent-color) / 0.10)",
+    color: "var(--sc-tile-text-color, currentColor)",
+    cursor: "pointer",
+    opacity: "0.85",
+    backdropFilter: "var(--sc-content-bubble-blur, none)",
+    WebkitBackdropFilter: "var(--sc-content-bubble-blur, none)",
+    transition: "opacity 150ms ease, background 150ms ease"
+  };
+}
+function stripTrailingWhitespace(text) {
+  return text.replace(/[ \t]+$/gm, "").replace(/\n{3,}/g, "\n\n").trim();
+}
+function toFixedTrim(n) {
+  const s = n.toFixed(2);
+  return s.replace(/\.?0+$/, "") || "0";
+}
+var THINKING_TAIL_MAX = 120;
+function truncateThinkingTail(text) {
+  const flat = text.replace(/\s+/g, " ").trim();
+  if (flat.length <= THINKING_TAIL_MAX) return flat;
+  return `\u2026${flat.slice(-THINKING_TAIL_MAX)}`;
+}
+function thinkingTextStyles() {
+  return {
+    fontStyle: "italic",
+    opacity: "0.75",
+    fontSize: "13px",
+    lineHeight: "18px",
+    maxWidth: "32ch",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+}
+function introSuggestionStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    marginTop: "4px",
+    padding: "10px 18px",
+    borderRadius: "9999px",
+    border: "0",
+    background: "linear-gradient(135deg, var(--sc-color-primary, #5faf7d) 0%, var(--sc-color-primary-hover, #3d8a5e) 100%)",
+    color: "#fff",
+    cursor: "pointer",
+    font: "inherit",
+    fontSize: "14px",
+    fontWeight: "600",
+    transition: "transform 120ms ease, filter 160ms ease"
+  };
+}
+function emptyIconStyles() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "48px",
+    height: "48px",
+    borderRadius: "9999px",
+    background: "var(--sc-tile-icon-background, linear-gradient(135deg, var(--sc-color-primary, #5faf7d) 0%, var(--sc-color-primary-hover, #3d8a5e) 100%))",
+    color: "#fff",
+    fontSize: "22px"
+  };
+}
+function emptyTitleStyles() {
+  return {
+    margin: "0",
+    fontSize: "15px",
+    fontWeight: "600",
+    lineHeight: "1.35",
+    color: "var(--sc-content-text-color, inherit)",
+    maxWidth: "32ch"
+  };
+}
+if (!customElements.get("adaptive-chat-trail")) {
+  customElements.define("adaptive-chat-trail", AdaptiveChatTrail);
+}
+
+export {
+  AdaptiveChatTrail,
+  looksLikeSerializedModelResponse
+};
+//# sourceMappingURL=chunk-HVGQJZMP.js.map