polymorph-sdk 0.2.0 → 0.2.3

package/src/WidgetPanel.tsx

@@ -1,71 +1,90 @@
-import { LiveKitRoom, RoomAudioRenderer, useRoomContext } from "@livekit/components-react";
-import { useCallback, useEffect, useState } from "react";
 import type { Room } from "livekit-client";
-import { type DataPacket_Kind, type Participant, ParticipantKind, RoomEvent, type TranscriptionSegment } from "livekit-client";
+import { useCallback, useRef, useState } from "react";
 import { ChatThread } from "./ChatThread";
 import styles from "./styles.module.css";
 import type { ChatMessage, SessionStatus, WidgetConfig } from "./types";
 import { VoiceOverlay } from "./VoiceOverlay";
 
-// Internal SVG icons (no @tabler dependency)
-function MicIcon() { return <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>; }
-function MicOffIcon() { return <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>; }
-function SendIcon() { return <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>; }
-function CloseIcon() { return <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>; }
-
-function RoomHandler({
-  setRoom,
-  addMessage,
-}: {
-  setRoom: (room: Room | null) => void;
-  addMessage: (role: "user" | "agent", text: string, source: "chat" | "voice") => void;
-}) {
-  const room = useRoomContext();
-
-  useEffect(() => {
-    setRoom(room);
-    return () => { setRoom(null); };
-  }, [room, setRoom]);
-
-  useEffect(() => {
-    const handleDataReceived = (
-      payload: Uint8Array,
-      _participant?: Participant,
-      _kind?: DataPacket_Kind,
-      topic?: string,
-    ) => {
-      if (topic === "chat_message") {
-        try {
-          const data = JSON.parse(new TextDecoder().decode(payload));
-          if (data.type === "chat_response") {
-            addMessage("agent", data.text, "chat");
-          }
-        } catch { /* ignore malformed */ }
-      }
-    };
-
-    const handleTranscription = (
-      segments: TranscriptionSegment[],
-      participant?: Participant,
-    ) => {
-      const finalSegments = segments.filter(s => s.final);
-      if (finalSegments.length > 0) {
-        const text = finalSegments.map(s => s.text).join(" ");
-        const isAgent = participant?.kind === ParticipantKind.AGENT ||
-                        participant?.identity?.includes("agent");
-        addMessage(isAgent ? "agent" : "user", text, "voice");
-      }
-    };
-
-    room.on(RoomEvent.DataReceived, handleDataReceived);
-    room.on(RoomEvent.TranscriptionReceived, handleTranscription);
-    return () => {
-      room.off(RoomEvent.DataReceived, handleDataReceived);
-      room.off(RoomEvent.TranscriptionReceived, handleTranscription);
-    };
-  }, [room, addMessage]);
-
-  return <RoomAudioRenderer />;
+function MicIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Microphone on</title>
+      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" x2="12" y1="19" y2="22" />
+    </svg>
+  );
+}
+function MicOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Microphone off</title>
+      <line x1="2" x2="22" y1="2" y2="22" />
+      <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+      <path d="M5 10v2a7 7 0 0 0 12 5" />
+      <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+      <line x1="12" x2="12" y1="19" y2="22" />
+    </svg>
+  );
+}
+function SendIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Send</title>
+      <path d="m22 2-7 20-4-9-9-4Z" />
+      <path d="M22 2 11 13" />
+    </svg>
+  );
+}
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Close</title>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
 }
 
 interface WidgetPanelProps {
@@ -79,91 +98,125 @@ interface WidgetPanelProps {
     error: string | null;
     connect: () => Promise<void>;
     disconnect: () => void;
-    addMessage: (role: "user" | "agent", text: string, source: "chat" | "voice") => void;
+    addMessage: (
+      role: "user" | "agent",
+      text: string,
+      source: "chat" | "voice",
+    ) => void;
     sendMessage: (text: string) => void;
     toggleMic: () => void;
     toggleVoice: () => void;
     setRoom: (room: Room | null) => void;
   };
   onClose: () => void;
+  hidden?: boolean;
 }
 
-export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
+export function WidgetPanel({
+  config,
+  session,
+  onClose,
+  hidden,
+}: WidgetPanelProps) {
   const [inputValue, setInputValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const primaryColor = config.branding?.primaryColor || "#171717";
+  const isChatOnlyAgent = (config.agentName || "")
+    .toLowerCase()
+    .includes("chat-agent");
 
   const handleSend = useCallback(() => {
     if (!inputValue.trim()) return;
     session.sendMessage(inputValue);
     setInputValue("");
+    const el = textareaRef.current;
+    if (el) el.style.height = "auto";
   }, [inputValue, session]);
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }, [handleSend]);
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  const handleInput = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
 
   return (
-    <div className={styles.panel}>
-      {/* Header */}
+    <div
+      className={`${styles.panel} ${hidden ? styles.panelHidden : ""}`}
+      aria-hidden={hidden}
+    >
       <div className={styles.header}>
         <div>
-          <div style={{ fontWeight: 500, fontSize: 16 }}>{config.branding?.title || "Hi there"}</div>
+          <div style={{ fontWeight: 500, fontSize: 16 }}>
+            {config.branding?.title || "Hi there"}
+          </div>
           {config.branding?.subtitle && (
-            <div style={{ fontSize: 13, color: "#737373", marginTop: 2 }}>{config.branding.subtitle}</div>
+            <div
+              style={{
+                fontSize: 13,
+                color: "var(--mantine-color-dimmed)",
+                marginTop: 2,
+              }}
+            >
+              {config.branding.subtitle}
+            </div>
           )}
         </div>
-        <button type="button" className={styles.iconButton} onClick={onClose}><CloseIcon /></button>
+        <button type="button" className={styles.iconButton} onClick={onClose}>
+          <CloseIcon />
+        </button>
       </div>
-
-      {/* Chat Thread */}
-      <ChatThread messages={session.messages} primaryColor={primaryColor} />
-
-      {/* Voice Overlay */}
-      <VoiceOverlay
-        isVoiceEnabled={session.isVoiceEnabled}
-        isMicActive={session.isMicActive}
+      <ChatThread
+        messages={session.messages}
+        primaryColor={primaryColor}
         status={session.status}
-        onToggleVoice={session.toggleVoice}
       />
-
-      {/* Error */}
+      {!isChatOnlyAgent && (
+        <VoiceOverlay
+          isVoiceEnabled={session.isVoiceEnabled}
+          isMicActive={session.isMicActive}
+          status={session.status}
+          onToggleVoice={session.toggleVoice}
+        />
+      )}
       {session.error && <div className={styles.errorText}>{session.error}</div>}
-
-      {/* Connect button or Input bar */}
-      {session.status === "idle" || session.status === "error" ? (
+      <div className={styles.inputBar}>
+        <textarea
+          ref={textareaRef}
+          className={styles.inputField}
+          placeholder={
+            session.status === "connecting"
+              ? "Connecting..."
+              : "Type a message..."
+          }
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          disabled={session.status === "connecting"}
+          rows={1}
+        />
         <button
           type="button"
-          className={styles.connectButton}
-          style={{ backgroundColor: primaryColor }}
-          onClick={session.connect}
+          className={styles.iconButton}
+          onClick={handleSend}
+          disabled={!inputValue.trim() || session.status === "connecting"}
         >
-          Start conversation
-        </button>
-      ) : session.status === "connecting" ? (
-        <button type="button" className={styles.connectButton} style={{ backgroundColor: primaryColor }} disabled>
-          Connecting...
+          <SendIcon />
         </button>
-      ) : (
-        <div className={styles.inputBar}>
-          <input
-            className={styles.inputField}
-            placeholder="Type a message..."
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-          <button
-            type="button"
-            className={styles.iconButton}
-            onClick={handleSend}
-            disabled={!inputValue.trim()}
-          >
-            <SendIcon />
-          </button>
-          {session.isVoiceEnabled && (
+        {session.isVoiceEnabled &&
+          !isChatOnlyAgent &&
+          session.status === "connected" && (
             <button
               type="button"
               className={`${styles.iconButton} ${session.isMicActive ? styles.iconButtonActive : ""}`}
@@ -172,23 +225,7 @@ export function WidgetPanel({ config, session, onClose }: WidgetPanelProps) {
               {session.isMicActive ? <MicIcon /> : <MicOffIcon />}
             </button>
           )}
-        </div>
-      )}
-
-      {/* Hidden LiveKit Room */}
-      {session.roomConnection && (
-        <LiveKitRoom
-          token={session.roomConnection.token}
-          serverUrl={session.roomConnection.livekitUrl}
-          connect={true}
-          audio={session.isVoiceEnabled ? { echoCancellation: true, noiseSuppression: true, autoGainControl: true } : false}
-          video={false}
-          style={{ display: "none" }}
-          onDisconnected={session.disconnect}
-        >
-          <RoomHandler setRoom={session.setRoom} addMessage={session.addMessage} />
-        </LiveKitRoom>
-      )}
+      </div>
     </div>
   );
 }

package/src/__tests__/exports.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+
+describe("polymorph-sdk exports", () => {
+  it("exports PolymorphWidget component", async () => {
+    const mod = await import("../index");
+    expect(mod.PolymorphWidget).toBeDefined();
+  });
+
+  it("exports usePolymorphSession hook", async () => {
+    const mod = await import("../index");
+    expect(mod.usePolymorphSession).toBeDefined();
+  });
+});

package/src/index.ts

@@ -1,3 +1,8 @@
 export { PolymorphWidget } from "./PolymorphWidget";
+export type {
+  ChatMessage,
+  SessionStatus,
+  WidgetBranding,
+  WidgetConfig,
+} from "./types";
 export { usePolymorphSession } from "./usePolymorphSession";
-export type { ChatMessage, SessionStatus, WidgetBranding, WidgetConfig } from "./types";

package/src/styles.module.css

@@ -1,240 +1,41 @@
-.widgetRoot {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 12px;
-}
-
-.bottomRight {
-  bottom: 24px;
-  right: 24px;
-}
-
-.bottomLeft {
-  bottom: 24px;
-  left: 24px;
-  align-items: flex-start;
-}
-
-.fab {
-  width: 56px;
-  height: 56px;
-  border-radius: 28px;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transition: transform 150ms ease, box-shadow 150ms ease;
-  color: white;
-}
-
-.fab:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-}
-
-.panel {
-  width: 380px;
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-  border-radius: 16px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-  overflow: hidden;
-  background: white;
-  border: 1px solid #e5e5e5;
-}
-
-.header {
-  padding: 16px 16px 12px;
-  border-bottom: 1px solid #f0f0f0;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.chatThread {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 200px;
-  max-height: 400px;
-}
-
-.messageBubble {
-  max-width: 80%;
-  padding: 8px 12px;
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1.4;
-  word-wrap: break-word;
-}
-
-.agentMessage {
-  align-self: flex-start;
-  background: #f5f5f5;
-  color: #171717;
-}
-
-.userMessage {
-  align-self: flex-end;
-  color: white;
-}
-
-.voiceLabel {
-  font-size: 10px;
-  opacity: 0.6;
-  margin-top: 2px;
-}
-
-.voiceOverlay {
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #737373;
-  border-top: 1px solid #f0f0f0;
-}
-
-.voiceBars {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 16px;
-}
-
-.voiceBar {
-  width: 3px;
-  border-radius: 2px;
-  background: #22c55e;
-  animation: voiceBar 1.2s ease-in-out infinite;
-}
-
+.widgetRoot { position: fixed; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 12px; pointer-events: none; }
+.bottomRight { top: 24px; bottom: 24px; right: 24px; }
+.bottomLeft { top: 24px; bottom: 24px; left: 24px; align-items: flex-start; }
+.fab { width: 56px; height: 56px; border-radius: 28px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 150ms ease, box-shadow 150ms ease; color: white; pointer-events: auto; }
+.fab svg { transition: transform 200ms ease; }
+.fabOpen svg { transform: rotate(90deg); }
+.fab:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
+.panel { width: 380px; max-height: 600px; flex-shrink: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 12px 48px rgba(0, 0, 0, 0.12); overflow: hidden; background: var(--mantine-color-body); color: var(--mantine-color-text); pointer-events: auto; transition: opacity 200ms ease, transform 200ms ease; transform-origin: bottom right; }
+.panelHidden { opacity: 0; transform: scale(0.95) translateY(8px); pointer-events: none; }
+.header { padding: 16px 16px 12px; border-bottom: 1px solid var(--mantine-color-default-border); display: flex; justify-content: space-between; align-items: flex-start; }
+.chatThread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
+.messageBubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; word-wrap: break-word; animation: messageAppear 200ms ease; }
+@keyframes messageAppear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.agentMessage { align-self: flex-start; background: var(--mantine-color-gray-light); color: var(--mantine-color-text); }
+.userMessage { align-self: flex-end; color: white; }
+.voiceLabel { font-size: 10px; opacity: 0.6; margin-top: 2px; }
+.voiceOverlay { padding: 8px 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mantine-color-dimmed); border-top: 1px solid var(--mantine-color-default-border); }
+.voiceBars { display: flex; align-items: center; gap: 2px; height: 16px; }
+.voiceBar { width: 3px; border-radius: 2px; background: #22c55e; animation: voiceBar 1.2s ease-in-out infinite; }
 .voiceBar:nth-child(1) { height: 6px; animation-delay: 0s; }
 .voiceBar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
 .voiceBar:nth-child(3) { height: 8px; animation-delay: 0.4s; }
-
-@keyframes voiceBar {
-  0%, 100% { transform: scaleY(1); }
-  50% { transform: scaleY(0.4); }
-}
-
-.voiceToggle {
-  margin-left: auto;
-  width: 28px;
-  height: 28px;
-  border-radius: 14px;
-  border: 1px solid #e5e5e5;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f5f5f5;
-  color: #737373;
-  transition: all 150ms ease;
-}
-
-.voiceToggle:hover {
-  background: #e5e5e5;
-}
-
-.voiceToggleActive {
-  background: #dcfce7;
-  border-color: #bbf7d0;
-  color: #16a34a;
-}
-
-.voiceToggleActive:hover {
-  background: #bbf7d0;
-}
-
-.inputBar {
-  padding: 12px 16px;
-  border-top: 1px solid #f0f0f0;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.inputField {
-  flex: 1;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  outline: none;
-  font-family: inherit;
-}
-
-.inputField:focus {
-  border-color: #a3a3a3;
-}
-
-.iconButton {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  color: #737373;
-  transition: background 150ms ease, color 150ms ease;
-}
-
-.iconButton:hover {
-  background: #f5f5f5;
-}
-
-.iconButton:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.iconButtonActive {
-  color: #22c55e;
-}
-
-.connectButton {
-  margin: 16px;
-  padding: 10px 20px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: white;
-  transition: opacity 150ms ease;
-}
-
-.connectButton:hover {
-  opacity: 0.9;
-}
-
-.connectButton:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.statusBadge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-}
-
-.errorText {
-  color: #dc2626;
-  font-size: 13px;
-  padding: 0 16px;
-}
+@keyframes voiceBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } }
+.voiceToggle { margin-left: auto; width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--mantine-color-default-border); cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--mantine-color-gray-light); color: var(--mantine-color-dimmed); transition: all 150ms ease; }
+.voiceToggle:hover { background: var(--mantine-color-gray-light-hover); }
+.voiceToggleActive { background: light-dark(#dcfce7, #1a3a2a); border-color: light-dark(#bbf7d0, #2a5a3a); color: light-dark(#16a34a, #4ade80); }
+.voiceToggleActive:hover { background: light-dark(#bbf7d0, #2a5a3a); }
+.inputBar { padding: 12px 16px; border-top: 1px solid var(--mantine-color-default-border); display: flex; gap: 8px; align-items: flex-end; }
+.inputField { flex: 1; border: 1px solid var(--mantine-color-default-border); border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.4; outline: none; font-family: inherit; background: var(--mantine-color-body); color: var(--mantine-color-text); resize: none; overflow-y: auto; max-height: 120px; }
+.inputField:focus { border-color: var(--mantine-color-dimmed); }
+.iconButton { width: 36px; height: 36px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--mantine-color-dimmed); transition: background 150ms ease, color 150ms ease; flex-shrink: 0; }
+.iconButton:hover { background: var(--mantine-color-gray-light); }
+.iconButton:disabled { opacity: 0.4; cursor: default; }
+.iconButtonActive { color: #22c55e; }
+.statusBadge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
+.errorText { color: #dc2626; font-size: 13px; padding: 0 16px; }
+.thinkingDots { display: flex; gap: 4px; align-items: center; height: 20px; }
+.thinkingDots span { width: 6px; height: 6px; border-radius: 50%; background: var(--mantine-color-dimmed); animation: thinkingDot 1.4s ease-in-out infinite; }
+.thinkingDots span:nth-child(2) { animation-delay: 0.2s; }
+.thinkingDots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes thinkingDot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }