ghostykit 0.2.1 → 0.3.1

package/dist/react/index.js

@@ -35,7 +35,7 @@ import {
   createPostStreamTransport,
   createSseTransport,
   readSse
-} from "../chunks/chunk-D6JXJWYM.js";
+} from "../chunks/chunk-XZHX2NZT.js";
 import {
   applyReferences,
   cleanUserText,
@@ -43,6 +43,9 @@ import {
   systemNoteOf
 } from "../chunks/chunk-6U545WJG.js";
 
+// src/react/Piloto.tsx
+import { AnimatePresence as AnimatePresence3 } from "motion/react";
+
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.mjs
 import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
 
@@ -262,8 +265,25 @@ function createLucideIcon(iconDataOrName, iconNode = [], aliases = []) {
   return Component;
 }
 
-// ../../node_modules/lucide-react/dist/esm/icons/app-window.mjs
+// ../../node_modules/lucide-react/dist/esm/icons/activity.mjs
 var __iconData = {
+  name: "activity",
+  size: 24,
+  node: [
+    [
+      "path",
+      {
+        d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+        key: "169zse"
+      }
+    ]
+  ]
+};
+__iconData.node;
+var Activity = createLucideIcon(__iconData);
+
+// ../../node_modules/lucide-react/dist/esm/icons/app-window.mjs
+var __iconData2 = {
   name: "app-window",
   size: 24,
   node: [
@@ -273,11 +293,11 @@ var __iconData = {
     ["path", { d: "M6 4v4", key: "1svtjw" }]
   ]
 };
-__iconData.node;
-var AppWindow = createLucideIcon(__iconData);
+__iconData2.node;
+var AppWindow = createLucideIcon(__iconData2);
 
 // ../../node_modules/lucide-react/dist/esm/icons/arrow-down.mjs
-var __iconData2 = {
+var __iconData3 = {
   name: "arrow-down",
   size: 24,
   node: [
@@ -285,11 +305,11 @@ var __iconData2 = {
     ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
   ]
 };
-__iconData2.node;
-var ArrowDown = createLucideIcon(__iconData2);
+__iconData3.node;
+var ArrowDown = createLucideIcon(__iconData3);
 
 // ../../node_modules/lucide-react/dist/esm/icons/arrow-up-right.mjs
-var __iconData3 = {
+var __iconData4 = {
   name: "arrow-up-right",
   size: 24,
   node: [
@@ -297,11 +317,11 @@ var __iconData3 = {
     ["path", { d: "M7 17 17 7", key: "1vkiza" }]
   ]
 };
-__iconData3.node;
-var ArrowUpRight = createLucideIcon(__iconData3);
+__iconData4.node;
+var ArrowUpRight = createLucideIcon(__iconData4);
 
 // ../../node_modules/lucide-react/dist/esm/icons/arrow-up.mjs
-var __iconData4 = {
+var __iconData5 = {
   name: "arrow-up",
   size: 24,
   node: [
@@ -309,20 +329,8 @@ var __iconData4 = {
     ["path", { d: "M12 19V5", key: "x0mq9r" }]
   ]
 };
-__iconData4.node;
-var ArrowUp = createLucideIcon(__iconData4);
-
-// ../../node_modules/lucide-react/dist/esm/icons/at-sign.mjs
-var __iconData5 = {
-  name: "at-sign",
-  size: 24,
-  node: [
-    ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
-    ["path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8", key: "7n84p3" }]
-  ]
-};
 __iconData5.node;
-var AtSign = createLucideIcon(__iconData5);
+var ArrowUp = createLucideIcon(__iconData5);
 
 // ../../node_modules/lucide-react/dist/esm/icons/book-open.mjs
 var __iconData6 = {
@@ -470,8 +478,23 @@ var __iconData16 = {
 __iconData16.node;
 var Cpu = createLucideIcon(__iconData16);
 
-// ../../node_modules/lucide-react/dist/esm/icons/external-link.mjs
+// ../../node_modules/lucide-react/dist/esm/icons/crosshair.mjs
 var __iconData17 = {
+  name: "crosshair",
+  size: 24,
+  node: [
+    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+    ["line", { x1: "22", x2: "18", y1: "12", y2: "12", key: "l9bcsi" }],
+    ["line", { x1: "6", x2: "2", y1: "12", y2: "12", key: "13hhkx" }],
+    ["line", { x1: "12", x2: "12", y1: "6", y2: "2", key: "10w3f3" }],
+    ["line", { x1: "12", x2: "12", y1: "22", y2: "18", key: "15g9kq" }]
+  ]
+};
+__iconData17.node;
+var Crosshair = createLucideIcon(__iconData17);
+
+// ../../node_modules/lucide-react/dist/esm/icons/external-link.mjs
+var __iconData18 = {
   name: "external-link",
   size: 24,
   node: [
@@ -480,11 +503,11 @@ var __iconData17 = {
     ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
   ]
 };
-__iconData17.node;
-var ExternalLink = createLucideIcon(__iconData17);
+__iconData18.node;
+var ExternalLink = createLucideIcon(__iconData18);
 
 // ../../node_modules/lucide-react/dist/esm/icons/file-pen-line.mjs
-var __iconData18 = {
+var __iconData19 = {
   name: "file-pen-line",
   size: 24,
   node: [
@@ -507,11 +530,11 @@ var __iconData18 = {
   ],
   aliases: ["file-signature"]
 };
-__iconData18.node;
-var FilePenLine = createLucideIcon(__iconData18);
+__iconData19.node;
+var FilePenLine = createLucideIcon(__iconData19);
 
 // ../../node_modules/lucide-react/dist/esm/icons/file-spreadsheet.mjs
-var __iconData19 = {
+var __iconData20 = {
   name: "file-spreadsheet",
   size: 24,
   node: [
@@ -529,11 +552,11 @@ var __iconData19 = {
     ["path", { d: "M14 17h2", key: "10kma7" }]
   ]
 };
-__iconData19.node;
-var FileSpreadsheet = createLucideIcon(__iconData19);
+__iconData20.node;
+var FileSpreadsheet = createLucideIcon(__iconData20);
 
 // ../../node_modules/lucide-react/dist/esm/icons/file-text.mjs
-var __iconData20 = {
+var __iconData21 = {
   name: "file-text",
   size: 24,
   node: [
@@ -550,11 +573,11 @@ var __iconData20 = {
     ["path", { d: "M16 17H8", key: "z1uh3a" }]
   ]
 };
-__iconData20.node;
-var FileText = createLucideIcon(__iconData20);
+__iconData21.node;
+var FileText = createLucideIcon(__iconData21);
 
 // ../../node_modules/lucide-react/dist/esm/icons/folder.mjs
-var __iconData21 = {
+var __iconData22 = {
   name: "folder",
   size: 24,
   node: [
@@ -567,11 +590,11 @@ var __iconData21 = {
     ]
   ]
 };
-__iconData21.node;
-var Folder = createLucideIcon(__iconData21);
+__iconData22.node;
+var Folder = createLucideIcon(__iconData22);
 
 // ../../node_modules/lucide-react/dist/esm/icons/gauge.mjs
-var __iconData22 = {
+var __iconData23 = {
   name: "gauge",
   size: 24,
   node: [
@@ -579,11 +602,11 @@ var __iconData22 = {
     ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
   ]
 };
-__iconData22.node;
-var Gauge = createLucideIcon(__iconData22);
+__iconData23.node;
+var Gauge = createLucideIcon(__iconData23);
 
 // ../../node_modules/lucide-react/dist/esm/icons/globe.mjs
-var __iconData23 = {
+var __iconData24 = {
   name: "globe",
   size: 24,
   node: [
@@ -592,11 +615,11 @@ var __iconData23 = {
     ["path", { d: "M2 12h20", key: "9i4pu4" }]
   ]
 };
-__iconData23.node;
-var Globe = createLucideIcon(__iconData23);
+__iconData24.node;
+var Globe = createLucideIcon(__iconData24);
 
 // ../../node_modules/lucide-react/dist/esm/icons/image.mjs
-var __iconData24 = {
+var __iconData25 = {
   name: "image",
   size: 24,
   node: [
@@ -605,11 +628,29 @@ var __iconData24 = {
     ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
   ]
 };
-__iconData24.node;
-var Image = createLucideIcon(__iconData24);
+__iconData25.node;
+var Image = createLucideIcon(__iconData25);
+
+// ../../node_modules/lucide-react/dist/esm/icons/inbox.mjs
+var __iconData26 = {
+  name: "inbox",
+  size: 24,
+  node: [
+    ["polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12", key: "o97t9d" }],
+    [
+      "path",
+      {
+        d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",
+        key: "oot6mr"
+      }
+    ]
+  ]
+};
+__iconData26.node;
+var Inbox = createLucideIcon(__iconData26);
 
 // ../../node_modules/lucide-react/dist/esm/icons/list-checks.mjs
-var __iconData25 = {
+var __iconData27 = {
   name: "list-checks",
   size: 24,
   node: [
@@ -620,21 +661,21 @@ var __iconData25 = {
     ["path", { d: "m3 7 2 2 4-4", key: "1obspn" }]
   ]
 };
-__iconData25.node;
-var ListChecks = createLucideIcon(__iconData25);
+__iconData27.node;
+var ListChecks = createLucideIcon(__iconData27);
 
 // ../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs
-var __iconData26 = {
+var __iconData28 = {
   name: "loader-circle",
   size: 24,
   node: [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]],
   aliases: ["loader-2"]
 };
-__iconData26.node;
-var LoaderCircle = createLucideIcon(__iconData26);
+__iconData28.node;
+var LoaderCircle = createLucideIcon(__iconData28);
 
 // ../../node_modules/lucide-react/dist/esm/icons/mic.mjs
-var __iconData27 = {
+var __iconData29 = {
   name: "mic",
   size: 24,
   node: [
@@ -643,11 +684,31 @@ var __iconData27 = {
     ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
   ]
 };
-__iconData27.node;
-var Mic = createLucideIcon(__iconData27);
+__iconData29.node;
+var Mic = createLucideIcon(__iconData29);
+
+// ../../node_modules/lucide-react/dist/esm/icons/octagon-x.mjs
+var __iconData30 = {
+  name: "octagon-x",
+  size: 24,
+  node: [
+    ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
+    [
+      "path",
+      {
+        d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z",
+        key: "2d38gg"
+      }
+    ],
+    ["path", { d: "m9 9 6 6", key: "z0biqf" }]
+  ],
+  aliases: ["x-octagon"]
+};
+__iconData30.node;
+var OctagonX = createLucideIcon(__iconData30);
 
 // ../../node_modules/lucide-react/dist/esm/icons/paperclip.mjs
-var __iconData28 = {
+var __iconData31 = {
   name: "paperclip",
   size: 24,
   node: [
@@ -660,11 +721,11 @@ var __iconData28 = {
     ]
   ]
 };
-__iconData28.node;
-var Paperclip = createLucideIcon(__iconData28);
+__iconData31.node;
+var Paperclip = createLucideIcon(__iconData31);
 
 // ../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.mjs
-var __iconData29 = {
+var __iconData32 = {
   name: "rotate-ccw",
   size: 24,
   node: [
@@ -672,11 +733,11 @@ var __iconData29 = {
     ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
   ]
 };
-__iconData29.node;
-var RotateCcw = createLucideIcon(__iconData29);
+__iconData32.node;
+var RotateCcw = createLucideIcon(__iconData32);
 
 // ../../node_modules/lucide-react/dist/esm/icons/search.mjs
-var __iconData30 = {
+var __iconData33 = {
   name: "search",
   size: 24,
   node: [
@@ -684,11 +745,11 @@ var __iconData30 = {
     ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
   ]
 };
-__iconData30.node;
-var Search = createLucideIcon(__iconData30);
+__iconData33.node;
+var Search = createLucideIcon(__iconData33);
 
 // ../../node_modules/lucide-react/dist/esm/icons/send.mjs
-var __iconData31 = {
+var __iconData34 = {
   name: "send",
   size: 24,
   node: [
@@ -702,11 +763,11 @@ var __iconData31 = {
     ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
   ]
 };
-__iconData31.node;
-var Send = createLucideIcon(__iconData31);
+__iconData34.node;
+var Send = createLucideIcon(__iconData34);
 
 // ../../node_modules/lucide-react/dist/esm/icons/shield-alert.mjs
-var __iconData32 = {
+var __iconData35 = {
   name: "shield-alert",
   size: 24,
   node: [
@@ -721,34 +782,20 @@ var __iconData32 = {
     ["path", { d: "M12 16h.01", key: "1drbdi" }]
   ]
 };
-__iconData32.node;
-var ShieldAlert = createLucideIcon(__iconData32);
-
-// ../../node_modules/lucide-react/dist/esm/icons/square-terminal.mjs
-var __iconData33 = {
-  name: "square-terminal",
-  size: 24,
-  node: [
-    ["path", { d: "m7 11 2-2-2-2", key: "1lz0vl" }],
-    ["path", { d: "M11 13h4", key: "1p7l4v" }],
-    ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }]
-  ],
-  aliases: ["terminal-square"]
-};
-__iconData33.node;
-var SquareTerminal = createLucideIcon(__iconData33);
+__iconData35.node;
+var ShieldAlert = createLucideIcon(__iconData35);
 
 // ../../node_modules/lucide-react/dist/esm/icons/square.mjs
-var __iconData34 = {
+var __iconData36 = {
   name: "square",
   size: 24,
   node: [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]]
 };
-__iconData34.node;
-var Square = createLucideIcon(__iconData34);
+__iconData36.node;
+var Square = createLucideIcon(__iconData36);
 
 // ../../node_modules/lucide-react/dist/esm/icons/users-round.mjs
-var __iconData35 = {
+var __iconData37 = {
   name: "users-round",
   size: 24,
   node: [
@@ -758,11 +805,11 @@ var __iconData35 = {
   ],
   aliases: ["users-2"]
 };
-__iconData35.node;
-var UsersRound = createLucideIcon(__iconData35);
+__iconData37.node;
+var UsersRound = createLucideIcon(__iconData37);
 
 // ../../node_modules/lucide-react/dist/esm/icons/x.mjs
-var __iconData36 = {
+var __iconData38 = {
   name: "x",
   size: 24,
   node: [
@@ -770,8 +817,8 @@ var __iconData36 = {
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
   ]
 };
-__iconData36.node;
-var X = createLucideIcon(__iconData36);
+__iconData38.node;
+var X = createLucideIcon(__iconData38);
 
 // src/react/Piloto.tsx
 import {
@@ -1173,7 +1220,7 @@ function useChunkRegistry() {
   return useMemo2(() => /* @__PURE__ */ new Map(), []);
 }
 var UNTOUCHED = /* @__PURE__ */ new Set(["pre", "code", "svg", "math", "script", "style"]);
-var STYLE = `piloto-chunk ${CHUNK_MS}ms linear both`;
+var STYLE = `gs-tramo ${CHUNK_MS}ms linear both`;
 function chunksPlugin(state) {
   return () => (tree) => {
     let total = 0;
@@ -1243,7 +1290,7 @@ var ChunkedBlock = memo(function ChunkedBlock2(props) {
 // src/react/Markdown.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function LinkSafetyModal({ isOpen, onClose, onConfirm, url }) {
-  const { strings: t, theme, skin } = usePiloto();
+  const { strings: t, skin } = usePiloto();
   const [copied, setCopied] = useState3(false);
   if (!isOpen) return null;
   const copy = async () => {
@@ -1256,37 +1303,37 @@ function LinkSafetyModal({ isOpen, onClose, onConfirm, url }) {
     window.open(url, "_blank", "noopener,noreferrer");
     onConfirm();
   };
-  return /* @__PURE__ */ jsx3("div", { ...rootProps(theme, skin), style: { display: "contents" }, children: /* @__PURE__ */ jsx3("div", { className: "piloto-overlay fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 px-4", onClick: onClose, role: "presentation", children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3("div", { ...rootProps("dark", skin), style: { display: "contents" }, children: /* @__PURE__ */ jsx3("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4", onClick: onClose, role: "presentation", children: /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: "piloto-dialog w-full max-w-md rounded-(--piloto-radius-card) border border-border-primary bg-background-primary p-6 text-text-primary shadow-(--piloto-shadow-card)",
+      className: "w-full max-w-md rounded-2xl border border-border-primary bg-background-primary p-6 shadow-2xl",
       onClick: (e) => e.stopPropagation(),
       role: "dialog",
       "aria-modal": "true",
       "aria-label": t.linkTitle,
       children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-4", children: [
-          /* @__PURE__ */ jsxs2("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [
+          /* @__PURE__ */ jsxs2("h2", { className: "flex items-center gap-2 text-base text-text-primary", children: [
             /* @__PURE__ */ jsx3(ExternalLink, { className: "h-4 w-4 text-text-secondary" }),
             t.linkTitle
           ] }),
           /* @__PURE__ */ jsx3("button", { type: "button", onClick: onClose, "aria-label": t.close, className: "text-text-secondary transition hover:text-text-primary", children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" }) })
         ] }),
-        /* @__PURE__ */ jsx3("p", { className: "mt-4 break-all rounded-(--piloto-radius-input) border border-border-primary bg-background-secondary px-3 py-2.5 font-mono text-xs", children: url }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-4 break-all rounded-xl border border-border-primary bg-background-secondary px-3 py-2.5 font-mono text-xs text-text-primary", children: url }),
         /* @__PURE__ */ jsxs2("div", { className: "mt-5 flex gap-2", children: [
           /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
               onClick: copy,
-              className: "flex flex-1 items-center justify-center gap-2 rounded-(--piloto-radius-button) border border-border-primary bg-background-secondary px-4 py-2 text-sm transition hover:border-text-tertiary",
+              className: "flex flex-1 items-center justify-center gap-2 rounded-xl border border-border-primary bg-background-secondary px-4 py-2 text-sm text-text-primary transition hover:border-text-tertiary",
               children: copied ? /* @__PURE__ */ jsxs2(Fragment, { children: [
                 /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4 text-text-success" }),
                 t.linkCopied
               ] }) : t.linkCopy
             }
           ),
-          /* @__PURE__ */ jsx3("button", { type: "button", onClick: open, className: "piloto-primary flex-1 rounded-(--piloto-radius-button) px-4 py-2 text-sm transition hover:opacity-90", children: t.linkOpen })
+          /* @__PURE__ */ jsx3("button", { type: "button", onClick: open, className: "flex-1 rounded-xl bg-text-primary px-4 py-2 text-sm text-text-inverse transition hover:opacity-90", children: t.linkOpen })
         ] })
       ]
     }
@@ -1307,11 +1354,19 @@ function Markdown({ children, animate = false, className }) {
   } : void 0;
   return (
     // `min-w-0 break-words` y el scroll interno en pre/tablas: una URL larga no ensancha el chat.
-    /* @__PURE__ */ jsx3("div", { onClickCapture: onClick, className: `piloto-md min-w-0 max-w-full break-words ${className ?? ""}`, children: animate ? /* @__PURE__ */ jsx3(ChunksContext.Provider, { value: { registry, part: 0 }, children: /* @__PURE__ */ jsx3(Streamdown, { BlockComponent: ChunkedBlock, linkSafety, children: text }) }) : /* @__PURE__ */ jsx3(Streamdown, { linkSafety, children: text }) })
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        onClickCapture: onClick,
+        className: `ghosty-md min-w-0 max-w-full break-words ${className ?? "text-text-primary"} [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto`,
+        children: animate ? /* @__PURE__ */ jsx3(ChunksContext.Provider, { value: { registry, part: 0 }, children: /* @__PURE__ */ jsx3(Streamdown, { BlockComponent: ChunkedBlock, linkSafety, children: text }) }) : /* @__PURE__ */ jsx3(Streamdown, { linkSafety, children: text })
+      }
+    )
   );
 }
 
 // src/react/Steps.tsx
+import { AnimatePresence, motion } from "motion/react";
 import { useState as useState4 } from "react";
 
 // src/react/InlineMarkdown.tsx
@@ -1347,22 +1402,32 @@ function InlineMarkdown({ children }) {
 // src/react/Steps.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function ClawIcon({ className }) {
-  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", className: `piloto-claw ${className ?? ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs3("g", { className: "piloto-claw-rig", children: [
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", className: `gs-garra ${className ?? ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs3("g", { className: "gs-garra-rig", children: [
     /* @__PURE__ */ jsx5("path", { d: "M12 2v4" }),
     /* @__PURE__ */ jsx5("rect", { x: "8.5", y: "6", width: "7", height: "3.5", rx: "1" }),
-    /* @__PURE__ */ jsx5("g", { className: "piloto-claw-l", children: /* @__PURE__ */ jsx5("path", { d: "M9.5 9.5 6 14l2 4.5" }) }),
-    /* @__PURE__ */ jsx5("g", { className: "piloto-claw-r", children: /* @__PURE__ */ jsx5("path", { d: "M14.5 9.5 18 14l-2 4.5" }) }),
+    /* @__PURE__ */ jsx5("g", { className: "gs-garra-l", children: /* @__PURE__ */ jsx5("path", { d: "M9.5 9.5 6 14l2 4.5" }) }),
+    /* @__PURE__ */ jsx5("g", { className: "gs-garra-r", children: /* @__PURE__ */ jsx5("path", { d: "M14.5 9.5 18 14l-2 4.5" }) }),
     /* @__PURE__ */ jsx5("path", { d: "M12 9.5v4" })
   ] }) });
 }
+function RobotArmIcon({ className }) {
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 512 512", fill: "currentColor", className, "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M301.4 51.96c-46.6.1-85.3 18.16-105.2 50.84c-13.2 21.8-16.8 49.4-9.2 78q3 11.4 8.4 23.1q1.65-1.95 3.6-3.9c7.8-7.8 16.8-13.6 26.4-17.5c-1.5-3.8-2.7-7.4-3.6-10.9c-5.5-20.7-2.7-37 5.2-50.1c15.9-26.16 57.6-42.41 114.7-28.49l8.6-34.98c-16.9-4.11-33.3-6.09-48.9-6.07M454 161.7l-35 8.6c13.9 57.1-2.3 98.8-28.5 114.7c-13.1 7.9-29.4 10.7-50.1 5.2c-3.5-.9-7.1-2.1-10.7-3.5c-3.9 9.6-9.8 18.6-17.6 26.4c-1.3 1.3-2.5 2.5-3.9 3.6c7.8 3.5 15.4 6.3 23 8.3c28.6 7.6 56.2 4 78-9.2c43.6-26.5 61.3-86.6 44.8-154.1m-198.4 32.8c-15.9 0-31.8 6-43.9 18.2c-24.3 24.3-24.2 63.4 0 87.7c24.3 24.2 63.4 24.2 87.7 0c24.3-24.3 24.2-63.4 0-87.7c-12.1-12.2-28-18.2-43.8-18.2m0 21.1c10.5 0 21 4 28.9 11.9c16 15.9 16 42.1.1 58c-16 16-42.1 15.9-58 0s-16-42 0-58c7.9-8 18.5-11.9 29-11.9m0 17.9c-5.9 0-11.7 2.3-16.3 6.8c-9.1 9-9.1 23.4 0 32.5c9 9 23.5 9 32.5 0c9.1-9.1 9.1-23.5 0-32.5c-4.5-4.5-10.3-6.8-16.2-6.8m-80 25.1l-54.5 54.5l43.7 43.7l34.2 34.1l54.4-54.5c-19.8-.5-39.4-8.3-54.4-23.3c-15.1-15.1-22.9-34.7-23.4-54.5M63.41 313.2l8.11 40.6l86.68 86.7l40.6 8.1l-8.1-40.6l-86.7-86.6zM18.1 358.5l8.13 40.7l86.57 86.6l40.7 8.1l-8.1-40.6l-86.59-86.7zm-.1 57.9v64.8l32.45-32.4zm45.2 45.2L30.8 494h64.78z" }) });
+}
+function ArcadeIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, className, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx5("path", { d: "M11 8.5L9.8 9l-7.448 3.386a.6.6 0 0 0-.352.546v.136a.6.6 0 0 0 .352.546l8.82 4.01a2 2 0 0 0 1.656 0l8.82-4.01a.6.6 0 0 0 .352-.546v-.136a.6.6 0 0 0-.352-.546L14.2 9L13 8.5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M22 13v4.112a.6.6 0 0 1-.354.547l-8.825 3.972a2 2 0 0 1-1.642 0l-8.825-3.972A.6.6 0 0 1 2 17.112V13" }),
+    /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8a3 3 0 1 1 0-6a3 3 0 0 1 0 6" }),
+    /* @__PURE__ */ jsx5("path", { d: "M11 8v5a1 1 0 1 0 2 0V8" }),
+    /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 13h1" })
+  ] });
+}
 var DEFAULT_TOOL_ICONS = {
   tool_search: Search,
-  bash: SquareTerminal,
-  shell: SquareTerminal,
-  terminal: SquareTerminal,
-  execute: SquareTerminal,
-  code: SquareTerminal,
-  script: SquareTerminal,
+  bash: RobotArmIcon,
+  shell: RobotArmIcon,
+  terminal: RobotArmIcon,
+  execute: RobotArmIcon,
   read: FileText,
   read_file: FileText,
   write: FilePenLine,
@@ -1374,19 +1439,26 @@ var DEFAULT_TOOL_ICONS = {
   search: Search,
   web_search: Globe,
   web_fetch: Globe,
-  fetch: Globe,
-  browser: Globe,
   site_publish: Globe,
   pdf: FileText,
+  connector: ArcadeIcon,
+  fetch: Globe,
+  browser: Globe,
   todo: ListChecks,
   list: ListChecks,
+  code: RobotArmIcon,
+  script: RobotArmIcon,
   folder: Folder,
+  mcp: ArcadeIcon,
   image: Image,
   delegate: UsersRound,
   guide: BookOpen,
   deliver: Send,
   sheet: FileSpreadsheet,
-  view: AppWindow
+  view: AppWindow,
+  collect: Inbox,
+  status: Activity,
+  stop: OctagonX
 };
 function iconFor(t, icons) {
   const name = toolName(t);
@@ -1396,39 +1468,47 @@ var VISIBLE = 5;
 function AgentSteps({ tools, live }) {
   const { strings: t, toolVerbs } = usePiloto();
   const [open, setOpen] = useState4(false);
-  const label = (x) => stepLabel(x, toolVerbs, t.step);
   const failed = tools.filter((x) => x.status === "failed").length;
-  const groups = groupSteps(tools, label);
+  const groups = groupSteps(tools, (x) => stepLabel(x, toolVerbs, t.step));
   const shown = groups.slice(-VISIBLE);
   const hidden = groups.length - shown.length;
-  return /* @__PURE__ */ jsxs3("div", { className: "piloto-steps mb-3 rounded-(--piloto-radius-card) px-3 py-2.5 transition-[background-color,border-color] duration-300", "data-live": live || void 0, children: [
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, title: open ? t.stepsCollapse : t.stepsExpand, className: "block w-full cursor-pointer text-left", children: open ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5 text-xs font-medium text-text-primary", children: [
-      /* @__PURE__ */ jsx5(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 rotate-90 text-text-tertiary" }),
-      /* @__PURE__ */ jsxs3("span", { className: "truncate", children: [
-        summarizeTools(tools, toolVerbs),
-        failed > 0 && /* @__PURE__ */ jsxs3("span", { className: "text-text-danger", children: [
-          ", ",
-          t.withProblems(failed)
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs3("ul", { className: "flex flex-col gap-1.5", children: [
-      hidden > 0 && /* @__PURE__ */ jsx5("li", { className: "text-[11px] font-medium text-text-tertiary", children: t.earlierSteps(hidden) }),
-      shown.map((g) => /* @__PURE__ */ jsx5(StepLine, { tool: g.tool, times: g.times, live }, g.tool.id))
-    ] }) }),
-    open && /* @__PURE__ */ jsx5("ul", { className: "mt-2 flex flex-col gap-1", children: tools.map((x) => /* @__PURE__ */ jsx5(ToolRow, { tool: x }, x.id)) })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `piloto-steps mb-3 rounded-2xl border px-3 py-2.5 transition-[background-color,border-color] duration-300 ${live ? "border-transparent bg-transparent" : "border-border-primary bg-background-primary hover:bg-background-secondary/60"}`,
+      children: [
+        /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, title: open ? t.stepsCollapse : t.stepsExpand, className: "block w-full cursor-pointer text-left", children: open ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5 text-xs font-medium text-text-primary", children: [
+          /* @__PURE__ */ jsx5(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 rotate-90 text-text-tertiary" }),
+          /* @__PURE__ */ jsxs3("span", { className: "truncate", children: [
+            summarizeTools(tools, toolVerbs),
+            failed > 0 && /* @__PURE__ */ jsxs3("span", { className: "text-text-danger", children: [
+              " \xB7 ",
+              t.withProblems(failed)
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs3("ul", { className: "flex flex-col gap-1.5", children: [
+          hidden > 0 && /* @__PURE__ */ jsx5("li", { className: "text-[11px] font-medium text-text-tertiary", children: t.earlierSteps(hidden) }),
+          shown.map((g) => /* @__PURE__ */ jsx5(StepLine, { tool: g.tool, times: g.times, live }, g.tool.id))
+        ] }) }),
+        open && /* @__PURE__ */ jsx5("div", { className: "mt-2", children: /* @__PURE__ */ jsx5("ul", { className: "flex flex-col gap-1", children: tools.map((x) => /* @__PURE__ */ jsx5(ToolRow, { tool: x }, x.id)) }) })
+      ]
+    }
+  );
 }
 function StepLine({ tool, times, live }) {
   const { strings: t, toolVerbs, toolIcons } = usePiloto();
-  const Icon2 = iconFor(tool, toolIcons);
+  const KindIcon = iconFor(tool, toolIcons);
   const spins = isRunning(tool) && live;
   const label = stepLabel(tool, toolVerbs, t.step);
-  return /* @__PURE__ */ jsxs3("li", { className: "piloto-step flex min-w-0 items-center gap-2 text-[13px] leading-6 text-text-secondary", children: [
+  return /* @__PURE__ */ jsxs3("li", { className: "gs-paso-in flex min-w-0 items-center gap-2 text-[13px] leading-6 text-text-secondary", children: [
     /* @__PURE__ */ jsx5("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", "aria-label": spins ? t.running : tool.status === "failed" ? t.failed : t.done, children: spins ? /* @__PURE__ */ jsx5(LoaderCircle, { className: "h-4 w-4 animate-spin text-text-info" }) : tool.status === "failed" ? /* @__PURE__ */ jsx5(CircleX, { className: "h-4 w-4 text-text-danger" }) : /* @__PURE__ */ jsx5(CircleCheck, { className: "h-4 w-4 text-text-success" }) }),
-    /* @__PURE__ */ jsx5(Icon2, { className: "h-[22px] w-[22px] shrink-0 text-text-secondary" }),
+    /* @__PURE__ */ jsx5(KindIcon, { className: "h-[22px] w-[22px] shrink-0 text-text-secondary" }),
     /* @__PURE__ */ jsxs3("span", { className: "min-w-0 truncate", children: [
       /* @__PURE__ */ jsx5("span", { className: spins ? "text-text-primary" : void 0, children: label }),
-      tool.detail && /* @__PURE__ */ jsx5("span", { className: "piloto-step-detail", children: tool.detail }),
+      tool.detail && /* @__PURE__ */ jsxs3("span", { className: "text-text-tertiary", children: [
+        " \xB7 ",
+        tool.detail
+      ] }),
       times > 1 && /* @__PURE__ */ jsxs3("span", { className: "ml-1 tabular-nums text-text-tertiary", children: [
         "\xD7",
         times
@@ -1445,45 +1525,47 @@ var STATUS = {
 function ToolRow({ tool }) {
   const { strings: t, toolVerbs, toolIcons } = usePiloto();
   const s = STATUS[tool.status ?? "pending"] ?? STATUS.pending;
+  const StatusIcon = s.Icon;
   const KindIcon = iconFor(tool, toolIcons);
-  return /* @__PURE__ */ jsxs3("li", { className: "piloto-tool-row flex items-start gap-2.5 rounded-(--piloto-radius-input) border border-border-secondary bg-background-secondary/50 px-3 py-2 transition-colors hover:border-border-primary hover:bg-background-secondary", children: [
+  return /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-2.5 rounded-lg border border-border-secondary bg-background-secondary/50 px-3 py-2 transition-colors hover:border-border-primary hover:bg-background-secondary", children: [
     /* @__PURE__ */ jsx5("span", { className: "mt-px flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-background-primary text-text-secondary shadow-sm", children: /* @__PURE__ */ jsx5(KindIcon, { className: "h-3.5 w-3.5" }) }),
     /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx5("span", { className: "block min-w-0 truncate text-xs font-medium text-text-primary", children: stepLabel(tool, toolVerbs, tool.id) }),
+      /* @__PURE__ */ jsx5("span", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsx5("span", { className: "min-w-0 truncate text-xs font-medium text-text-primary", children: stepLabel(tool, toolVerbs, tool.id) }) }),
       tool.detail && /* @__PURE__ */ jsx5("span", { className: "mt-0.5 block truncate text-[11px] text-text-tertiary", children: tool.detail }),
       tool.path && /* @__PURE__ */ jsx5("span", { className: "mt-0.5 block truncate font-mono text-[10px] text-text-tertiary", children: tool.path })
     ] }),
-    /* @__PURE__ */ jsx5("span", { className: "mt-0.5 shrink-0", title: t[s.key], "aria-label": t[s.key], children: /* @__PURE__ */ jsx5(s.Icon, { className: `h-3.5 w-3.5 ${s.className}` }) })
-  ] });
-}
-function Narration({ steps, children }) {
-  return /* @__PURE__ */ jsxs3("ul", { className: "piloto-narration mb-3 flex flex-col gap-1.5", children: [
-    steps.map((p, i) => /* @__PURE__ */ jsxs3("li", { className: "piloto-fade-up flex items-start gap-2 text-text-secondary", children: [
-      /* @__PURE__ */ jsx5("span", { className: "mt-[3px] grid size-4 shrink-0 place-items-center rounded-full bg-brand-500/15 text-brand-600", children: /* @__PURE__ */ jsx5(CheckMini, {}) }),
-      /* @__PURE__ */ jsx5("span", { className: "piloto-narration-text min-w-0", children: /* @__PURE__ */ jsx5(InlineMarkdown, { children: p }) })
-    ] }, i)),
-    children
+    /* @__PURE__ */ jsx5("span", { className: "mt-0.5 shrink-0", title: t[s.key], "aria-label": t[s.key], children: /* @__PURE__ */ jsx5(StatusIcon, { className: `h-3.5 w-3.5 ${s.className}` }) })
   ] });
 }
-function CheckMini() {
-  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" }) });
+function Narration({ steps }) {
+  return /* @__PURE__ */ jsx5("ul", { className: "gs-narracion mb-3 flex flex-col gap-1.5", children: /* @__PURE__ */ jsx5(AnimatePresence, { initial: false, children: steps.map((p, i) => /* @__PURE__ */ jsxs3(
+    motion.li,
+    {
+      initial: { opacity: 0, y: 4 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, ease: "easeOut" },
+      className: "flex items-start gap-2 text-text-secondary",
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: "mt-[3px] grid size-4 shrink-0 place-items-center rounded-full bg-brand-500/15 text-brand-500", children: /* @__PURE__ */ jsx5(Check, { size: 11, strokeWidth: 3 }) }),
+        /* @__PURE__ */ jsx5("span", { className: "piloto-narration-text min-w-0", children: /* @__PURE__ */ jsx5(InlineMarkdown, { children: p }) })
+      ]
+    },
+    i
+  )) }) });
 }
 
 // src/react/Bubble.tsx
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-async function copyText(text) {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
+function AnswerText({ text, live, whole = false }) {
+  const { visible, animate } = useTextAtPace(text, live, whole);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx6("div", { className: "gs-prosa", children: /* @__PURE__ */ jsx6(Markdown, { animate, children: visible }) });
 }
 function UserBubble({ turn }) {
   const { strings: t, formatUserText } = usePiloto();
   const note = systemNoteOf(turn.text);
   if (note) {
-    return /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs4("span", { className: "piloto-system-note max-w-[80%] truncate rounded-full bg-background-secondary px-3 py-1 text-[11px] text-text-tertiary", children: [
+    return /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs4("span", { className: "max-w-[80%] truncate rounded-full bg-background-secondary px-3 py-1 text-[11px] text-text-tertiary", children: [
       "\u23F0 ",
       note
     ] }) });
@@ -1492,16 +1574,26 @@ function UserBubble({ turn }) {
   const atts = turn.attachments ?? [];
   const inBubble = atts.filter((a) => a.mimeType.startsWith("image/") && (a.data || a.uri) || a.mimeType.startsWith("audio/") && a.uri);
   const docs = atts.filter((a) => !inBubble.includes(a));
-  return /* @__PURE__ */ jsxs4("div", { className: "piloto-user group/msg flex flex-col items-end gap-1", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "group/msg flex flex-col items-end gap-1", children: [
     turn.steer && /* @__PURE__ */ jsxs4("span", { className: "text-[11px] text-text-tertiary", children: [
       "\u21AA ",
       t.steered
     ] }),
-    docs.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mb-1 flex max-w-[75%] flex-wrap justify-end gap-2", children: docs.map((a, i) => /* @__PURE__ */ jsxs4("span", { className: "piloto-attachment-card inline-flex max-w-[16rem] items-center gap-1.5 rounded-(--piloto-radius-input) border border-border-primary bg-background-primary px-2.5 py-1.5 text-xs text-text-secondary", children: [
-      /* @__PURE__ */ jsx6(FileText, { className: "h-3.5 w-3.5 shrink-0" }),
-      a.uri ? /* @__PURE__ */ jsx6("a", { href: a.uri, target: "_blank", rel: "noopener noreferrer", className: "truncate hover:underline", children: a.name ?? a.mimeType }) : /* @__PURE__ */ jsx6("span", { className: "truncate", children: a.name ?? a.mimeType })
-    ] }, i)) }),
-    (inBubble.length > 0 || visible.trim()) && /* @__PURE__ */ jsxs4("div", { className: "piloto-bubble-user max-w-[75%] whitespace-pre-wrap break-words rounded-(--piloto-radius-bubble) px-4 py-3 text-[15px] leading-[22px]", children: [
+    docs.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mb-1 flex max-w-[75%] flex-wrap justify-end gap-2", children: docs.map((a, i) => /* @__PURE__ */ jsxs4(
+      "a",
+      {
+        href: a.uri,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex max-w-[16rem] items-center gap-1.5 rounded-lg border border-border-primary px-2 py-1 text-xs text-text-tertiary",
+        children: [
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\u{1F4C4}" }),
+          /* @__PURE__ */ jsx6("span", { className: "truncate", children: a.name ?? a.mimeType })
+        ]
+      },
+      i
+    )) }),
+    (inBubble.length > 0 || visible.trim()) && /* @__PURE__ */ jsxs4("div", { className: "gc-msg-user max-w-[75%] whitespace-pre-wrap break-words rounded-(--piloto-radius-bubble) bg-(--piloto-user-bubble) px-4 py-3 font-sans text-base leading-[22px] text-(--piloto-user-text)", children: [
       inBubble.length > 0 && /* @__PURE__ */ jsx6("div", { className: `flex flex-wrap justify-end gap-1.5 ${visible.trim() ? "mb-2" : ""}`, children: inBubble.map(
         (a, i) => a.mimeType.startsWith("image/") ? /* @__PURE__ */ jsx6("img", { src: a.data ? `data:${a.mimeType};base64,${a.data}` : a.uri, alt: "", className: "h-20 w-20 rounded-lg object-cover" }, i) : /* @__PURE__ */ jsx6("audio", { src: a.uri, controls: true, preload: "metadata", className: "h-9 max-w-[16rem]" }, i)
       ) }),
@@ -1518,33 +1610,30 @@ function CopyUserMessage({ text }) {
     {
       type: "button",
       onClick: async () => {
-        if (await copyText(text)) {
+        try {
+          await navigator.clipboard.writeText(text);
           setCopied(true);
           setTimeout(() => setCopied(false), 1500);
+        } catch {
         }
       },
       "aria-label": copied ? t.copied : t.copyMessage,
       title: copied ? t.copied : t.copy,
-      className: `piloto-copy-user grid h-7 w-7 place-items-center rounded-md text-text-tertiary transition-opacity hover:bg-background-secondary hover:text-text-primary focus-visible:opacity-100 [@media(hover:none)]:opacity-100 ${copied ? "opacity-100" : "opacity-0 group-hover/msg:opacity-100"}`,
+      className: `grid h-7 w-7 place-items-center rounded-md text-text-tertiary transition-opacity hover:bg-black/5 hover:text-text-primary focus-visible:opacity-100 [@media(hover:none)]:opacity-100 ${copied ? "opacity-100" : "opacity-0 group-hover/msg:opacity-100"}`,
       children: copied ? /* @__PURE__ */ jsx6(Check, { className: "h-3.5 w-3.5 text-text-success" }) : /* @__PURE__ */ jsx6(Copy, { className: "h-3.5 w-3.5" })
     }
   );
 }
-function AnswerText({ text, live, whole = false }) {
-  const { visible, animate } = useTextAtPace(text, live, whole);
-  if (!visible) return null;
-  return /* @__PURE__ */ jsx6(Markdown, { animate, children: visible });
-}
 function ReplyOptionButtons({ options, onPick }) {
   const { strings: t } = usePiloto();
-  return /* @__PURE__ */ jsx6("ul", { className: "piloto-options mt-3 flex flex-col gap-2", "aria-label": t.replyOptions, children: options.items.map((item, i) => {
+  return /* @__PURE__ */ jsx6("ul", { className: "mt-3 flex flex-col gap-2", "aria-label": t.replyOptions, children: options.items.map((item, i) => {
     const clean = cleanReplyOption(item);
-    return /* @__PURE__ */ jsx6("li", { className: "piloto-chunk-in", children: /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsx6("li", { style: { animation: "gs-tramo 400ms linear both" }, children: /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
         onClick: () => onPick(clean),
-        className: "piloto-option group flex w-full cursor-pointer items-center gap-3 rounded-(--piloto-radius-input) border border-border-primary bg-background-primary px-4 py-2.5 text-left text-sm text-text-primary transition-colors hover:border-brand-300 hover:bg-background-secondary",
+        className: "group flex w-full cursor-pointer items-center gap-3 rounded-xl border border-border-primary bg-background-primary px-4 py-2.5 text-left font-sans text-sm text-text-primary transition-colors hover:border-brand-300 hover:bg-background-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600",
         children: [
           options.numbered && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 tabular-nums text-text-tertiary", children: [
             i + 1,
@@ -1561,7 +1650,7 @@ function UsageStats({ used, size, cost }) {
   const { strings: t } = usePiloto();
   if (!used && !cost) return null;
   const pct = size > 0 ? Math.min(100, Math.round(used / size * 100)) : 0;
-  return /* @__PURE__ */ jsxs4("div", { className: "piloto-usage mt-2 flex items-center gap-4 text-[11px] text-text-tertiary", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex items-center gap-4 text-[11px] text-text-tertiary", children: [
     /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ jsx6(Gauge, { className: "h-3 w-3" }),
       used.toLocaleString(t.numberLocale),
@@ -1573,19 +1662,21 @@ function UsageStats({ used, size, cost }) {
     ] })
   ] });
 }
-function TurnFooter({ text, seconds, onRetry, showCopy = true }) {
+function TurnFooter({ text, seconds, onRetry, showCopy = true, showDuration = true }) {
   const { strings: t } = usePiloto();
   const [copied, setCopied] = useState5(false);
-  return /* @__PURE__ */ jsxs4("div", { className: "piloto-footer mt-2 flex items-center gap-3 text-xs text-text-tertiary", children: [
-    seconds ? /* @__PURE__ */ jsx6("span", { children: t.worked(seconds) }) : null,
+  return /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex items-center gap-3 text-xs text-text-tertiary", children: [
+    seconds && showDuration ? /* @__PURE__ */ jsx6("span", { children: t.worked(seconds) }) : null,
     showCopy && /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
         onClick: async () => {
-          if (await copyText(text)) {
+          try {
+            await navigator.clipboard.writeText(text);
             setCopied(true);
             setTimeout(() => setCopied(false), 1500);
+          } catch {
           }
         },
         className: "flex items-center gap-1 transition-colors hover:text-text-primary",
@@ -1604,18 +1695,18 @@ function TurnFooter({ text, seconds, onRetry, showCopy = true }) {
 function DeliveryChips({ deliveries }) {
   const shown = deliveries.filter((d) => !d.capture);
   if (!shown.length) return null;
-  return /* @__PURE__ */ jsx6("div", { className: "mt-2 flex flex-wrap gap-1.5", children: shown.map((d, i) => /* @__PURE__ */ jsxs4("span", { className: "piloto-delivery inline-flex max-w-[16rem] items-center gap-1.5 rounded-(--piloto-radius-input) border border-border-primary px-2 py-1 text-xs text-text-secondary", children: [
-    /* @__PURE__ */ jsx6(FileText, { className: "h-3.5 w-3.5 shrink-0" }),
+  return /* @__PURE__ */ jsx6("div", { className: "mt-2 flex flex-wrap gap-1.5", children: shown.map((d, i) => /* @__PURE__ */ jsxs4("span", { className: "inline-flex max-w-[16rem] items-center gap-1.5 rounded-lg border border-border-primary px-2 py-1 text-xs text-text-tertiary", children: [
+    /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\u{1F4C4}" }),
     /* @__PURE__ */ jsx6("span", { className: "truncate", children: d.name })
   ] }, i)) });
 }
-function AgentBubble({ turn, live, onRetry, onOption, showUsage = true, showCopy = true, renderDeliveries }) {
+function AgentBubble({ turn, live, onRetry, onOption, showUsage = true, showCopy = true, showDuration = true, renderDeliveries }) {
   const { strings: t } = usePiloto();
   const narrated = splitNarration(turn.text ?? "", turn.cuts);
   const visible = narrated.rest;
   const options = onOption && !live && visible ? extractReplyOptions(visible) : null;
-  return /* @__PURE__ */ jsxs4("div", { className: "piloto-agent min-w-0 max-w-[92%]", children: [
-    turn.thought && /* @__PURE__ */ jsxs4("details", { className: "piloto-thought mb-3 text-xs text-text-secondary", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "gc-msg-agent min-w-0 max-w-[90%]", children: [
+    turn.thought && /* @__PURE__ */ jsxs4("details", { className: "mb-3 text-xs text-text-secondary", children: [
       /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer select-none", children: t.thinking }),
       /* @__PURE__ */ jsx6("p", { className: "mt-2 whitespace-pre-wrap border-l-2 border-border-secondary pl-3", children: turn.thought })
     ] }),
@@ -1625,63 +1716,76 @@ function AgentBubble({ turn, live, onRetry, onOption, showUsage = true, showCopy
       options.before && /* @__PURE__ */ jsx6(AnswerText, { text: options.before, live }),
       /* @__PURE__ */ jsx6(ReplyOptionButtons, { options, onPick: onOption })
     ] }) : (
-      // Cada tramo nuevo tras una herramienta monta su propio ritmo (empieza de cero). Lo que llegó
-      // entero fuera de un turno se escribe al mismo ritmo; al recargar ya sale completo.
+      // Cada tramo nuevo tras una herramienta monta su propio ritmo (empieza de cero).
       visible && /* @__PURE__ */ jsx6(AnswerText, { text: visible, live: live || !!turn.arrived, whole: !!turn.arrived }, `r${narrated.steps.length}`)
     ),
     renderDeliveries ? renderDeliveries(turn, live) : turn.deliveries?.length ? /* @__PURE__ */ jsx6(DeliveryChips, { deliveries: turn.deliveries }) : null,
     turn.decisions?.length ? /* @__PURE__ */ jsx6(DecisionLines, { decisions: turn.decisions }) : null,
     showUsage && turn.usage && /* @__PURE__ */ jsx6(UsageStats, { ...turn.usage }),
-    turn.text && !live && /* @__PURE__ */ jsx6(TurnFooter, { text: turn.text, seconds: turn.seconds, onRetry, showCopy })
+    turn.text && !live && /* @__PURE__ */ jsx6(TurnFooter, { text: turn.text, seconds: turn.seconds, onRetry, showCopy, showDuration })
   ] });
 }
 
 // src/react/Chips.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function ReferenceChips({
-  references,
-  onRemove,
-  onActivate
-}) {
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ReferenceChips({ references, onRemove, onActivate }) {
   const { strings: t } = usePiloto();
   if (!references.length) return null;
-  return /* @__PURE__ */ jsx7("div", { className: "piloto-references flex flex-wrap gap-1.5", children: references.map((r) => /* @__PURE__ */ jsxs5("span", { className: "piloto-reference inline-flex max-w-full items-center gap-1.5 rounded-full border py-1 pl-2.5 pr-1 text-xs text-text-primary", children: [
-    /* @__PURE__ */ jsx7(AtSign, { className: "h-3 w-3 shrink-0 text-brand-600" }),
-    /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onActivate?.(r), className: "shrink-0 font-semibold underline-offset-2 hover:underline", children: r.label }),
-    r.hint && /* @__PURE__ */ jsxs5("span", { className: "truncate text-text-secondary", children: [
-      "\xAB",
-      r.hint,
-      "\xBB"
-    ] }),
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        onClick: () => onRemove(r.id),
-        "aria-label": t.removeReference,
-        className: "grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-text-tertiary hover:bg-background-secondary hover:text-text-primary",
-        children: /* @__PURE__ */ jsx7(X, { className: "h-3 w-3" })
-      }
-    )
-  ] }, r.id)) });
+  const pointed = references.filter((r) => r.prompt);
+  const plain = references.filter((r) => !r.prompt);
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    pointed.map((r) => /* @__PURE__ */ jsx7("div", { className: "mb-2 flex", children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-brand-500/40 bg-brand-500/10 py-1 pl-2.5 pr-1 text-xs text-text-primary", children: [
+      /* @__PURE__ */ jsx7(Crosshair, { size: 13, className: "shrink-0 text-brand-500" }),
+      /* @__PURE__ */ jsx7("span", { className: "shrink-0 font-semibold", children: r.label }),
+      r.hint && /* @__PURE__ */ jsxs5("span", { className: "truncate text-text-secondary", children: [
+        "\xAB",
+        r.hint,
+        "\xBB"
+      ] }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: () => onRemove(r.id),
+          "aria-label": t.removeReference,
+          className: "grid size-5 shrink-0 cursor-pointer place-items-center rounded-full text-text-tertiary hover:bg-background-secondary hover:text-text-primary",
+          children: /* @__PURE__ */ jsx7(X, { size: 12 })
+        }
+      )
+    ] }) }, r.id)),
+    plain.length > 0 && /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1.5", children: plain.map((r) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1 rounded-full border border-border-primary bg-background-secondary py-0.5 pl-2 pr-1 text-xs text-text-primary", children: [
+      /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onActivate?.(r), className: "underline-offset-2 hover:underline", children: r.label }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: () => onRemove(r.id),
+          "aria-label": t.removeReference,
+          className: "flex h-4 w-4 items-center justify-center rounded-full text-text-tertiary hover:bg-background-tertiary hover:text-text-primary",
+          children: /* @__PURE__ */ jsx7(X, { className: "h-3 w-3" })
+        }
+      )
+    ] }, r.id)) })
+  ] });
 }
-function Suggestions({ items, onPick, onPrefill }) {
+function Suggestions({ items, onPick, onPrefill, disabled }) {
   if (!items.length) return null;
-  return /* @__PURE__ */ jsx7("div", { className: "piloto-suggestions mt-3 flex flex-wrap justify-center gap-2", children: items.map((s, i) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx7("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: items.map((c) => /* @__PURE__ */ jsx7(
     "button",
     {
       type: "button",
-      onClick: () => onPrefill && /:\s*$/.test(s) ? onPrefill(s) : onPick(s),
-      className: "piloto-suggestion rounded-full border border-border-primary bg-background-primary px-3.5 py-1.5 text-sm text-text-secondary transition-colors hover:border-brand-300 hover:text-text-primary",
-      children: s
+      onClick: () => onPrefill && /:\s*$/.test(c) ? onPrefill(c) : onPick(c),
+      disabled,
+      className: "gc-chip rounded-full bg-irongray/10 px-3.5 py-1.5 text-xs font-medium text-metal transition-colors hover:bg-irongray/20 hover:text-dark disabled:opacity-40",
+      children: c
     },
-    i
+    c
   )) });
 }
 
 // src/react/Composer.tsx
 import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var MAX_HEIGHT = 240;
 var BY_EXTENSION = {
   png: "image/png",
@@ -1972,10 +2076,9 @@ function Composer({
     }
   };
   const canSend = Boolean(value.trim() || files.length > 0 || references.length > 0);
-  const iconButton = "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-background-secondary hover:text-text-primary disabled:opacity-30";
-  return /* @__PURE__ */ jsx8("div", { className: "piloto-composer rounded-(--piloto-radius-input)", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2 p-3", children: [
-    withFiles && dragging && /* @__PURE__ */ jsx8("div", { className: "piloto-drop pointer-events-none fixed inset-0 z-[1000] flex items-center justify-center p-6", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center gap-2 rounded-(--piloto-radius-card) border-2 border-dashed border-brand-500 bg-background-primary px-10 py-8 text-center shadow-(--piloto-shadow-card)", children: [
-      /* @__PURE__ */ jsx8(Paperclip, { className: "size-7 text-brand-600" }),
+  return /* @__PURE__ */ jsx8("div", { className: "gc-input rounded-(--piloto-radius-input) border-(length:--piloto-border-width) border-outlines bg-(--piloto-composer-bg) shadow-(--piloto-shadow-input) transition-colors focus-within:border-brand-300", children: /* @__PURE__ */ jsxs6("div", { className: `flex flex-col gap-2 p-3 transition-shadow ${withFiles && dragging ? "rounded-2xl bg-background-secondary/40 ring-2 ring-inset ring-ring-info" : ""}`, children: [
+    withFiles && dragging && /* @__PURE__ */ jsx8("div", { className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-background-primary/80 p-6 backdrop-blur-sm", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center gap-2 rounded-3xl border-2 border-dashed border-brand-500 bg-background-primary px-10 py-8 text-center shadow-lg", children: [
+      /* @__PURE__ */ jsx8(Paperclip, { className: "size-7 text-brand-500" }),
       /* @__PURE__ */ jsx8("p", { className: "text-base font-semibold text-text-primary", children: t.dropFiles }),
       /* @__PURE__ */ jsx8("p", { className: "text-xs text-text-secondary", children: t.dropHint })
     ] }) }),
@@ -1997,7 +2100,7 @@ function Composer({
       /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }),
       files.length > 1 ? t.uploadingN(files.length) : t.uploading
     ] }),
-    files.length > 0 && /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-2", children: files.map((a) => /* @__PURE__ */ jsxs6("div", { className: "relative h-16 w-16 overflow-hidden rounded-lg border border-border-primary bg-background-secondary", children: [
+    withFiles && files.length > 0 && /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-2", children: files.map((a) => /* @__PURE__ */ jsxs6("div", { className: "relative h-16 w-16 overflow-hidden rounded-lg border border-border-primary bg-background-secondary", children: [
       mimeOf(a.file).startsWith("image/") ? /* @__PURE__ */ jsx8("img", { src: a.url, alt: a.file.name, className: "h-full w-full object-cover" }) : (
         // Un PDF pintado con <img> es un recuadro roto: nombre, extensión y peso.
         /* @__PURE__ */ jsxs6("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 px-1 text-center", title: a.file.name, children: [
@@ -2012,7 +2115,7 @@ function Composer({
           type: "button",
           onClick: () => removeFile(a.id),
           "aria-label": t.removeAttachment,
-          className: "absolute right-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-background-inverse/80 text-text-inverse shadow-sm transition-colors hover:bg-background-inverse",
+          className: "absolute top-0.5 right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-background-inverse/80 text-text-inverse shadow-sm transition-colors hover:bg-background-inverse",
           children: /* @__PURE__ */ jsx8(X, { className: "h-3 w-3" })
         }
       )
@@ -2030,18 +2133,29 @@ function Composer({
               recRef.current?.stop();
             },
             "aria-label": t.cancelVoice,
+            title: t.cancelVoice,
             className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-text-secondary hover:bg-background-secondary hover:text-text-primary",
             children: /* @__PURE__ */ jsx8(X, { className: "h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ jsx8("span", { className: "piloto-rec-dot h-2 w-2 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsx8("span", { className: "h-2 w-2 shrink-0 animate-pulse rounded-full bg-red-500" }),
         /* @__PURE__ */ jsxs6("span", { className: "w-10 shrink-0 font-mono text-xs tabular-nums text-text-secondary", children: [
           Math.floor(seconds / 60),
           ":",
           String(seconds % 60).padStart(2, "0")
         ] }),
         /* @__PURE__ */ jsx8("div", { className: "flex h-6 min-w-0 flex-1 items-center gap-[2px] overflow-hidden", children: Array.from({ length: 60 }, (_, i) => wave[wave.length - 60 + i] ?? 0).map((v, i) => /* @__PURE__ */ jsx8("span", { className: "w-[3px] shrink-0 rounded-full bg-text-secondary/70", style: { height: `${Math.max(3, Math.round(v * 22))}px` } }, i)) }),
-        /* @__PURE__ */ jsx8("button", { type: "button", onClick: toggleRecording, "aria-label": t.stopAndSendVoice, className: "piloto-send flex h-8 w-8 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx8(ArrowUp, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            onClick: toggleRecording,
+            "aria-label": t.stopAndSendVoice,
+            title: t.send,
+            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500 text-white hover:bg-brand-600",
+            children: /* @__PURE__ */ jsx8(ArrowUp, { className: "h-4 w-4" })
+          }
+        )
       ] })
     ) : /* @__PURE__ */ jsx8(
       "textarea",
@@ -2060,12 +2174,12 @@ function Composer({
             onRemoveReference?.(references[references.length - 1].id);
           }
         },
-        className: "piloto-textarea max-h-60 min-h-[24px] w-full flex-none resize-none overflow-y-auto bg-transparent px-1 text-sm leading-6 text-text-primary outline-none placeholder:text-text-tertiary"
+        className: "max-h-60 min-h-[24px] w-full flex-none resize-none overflow-y-auto bg-transparent px-1 text-sm leading-6 text-text-primary outline-none placeholder:text-text-tertiary"
       }
     ),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: [
-        withFiles && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsxs6("div", { className: "@container flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: [
+        withFiles && /* @__PURE__ */ jsxs6(Fragment5, { children: [
           /* @__PURE__ */ jsx8(
             "button",
             {
@@ -2078,10 +2192,11 @@ function Composer({
               disabled: busy || !canSeeImages || files.length >= maxFiles,
               "aria-label": canSeeImages ? t.attachImage : t.noImages,
               title: canSeeImages ? t.attachImage : t.noImages,
-              className: iconButton,
+              className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-background-secondary hover:text-text-primary disabled:opacity-30",
               children: /* @__PURE__ */ jsx8(Image, { className: "h-4 w-4" })
             }
           ),
+          extras,
           /* @__PURE__ */ jsx8(
             "button",
             {
@@ -2094,16 +2209,27 @@ function Composer({
               disabled: busy || files.length >= maxFiles,
               "aria-label": t.attachFile,
               title: t.attachFile,
-              className: iconButton,
+              className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-background-secondary hover:text-text-primary disabled:opacity-40",
               children: /* @__PURE__ */ jsx8(Paperclip, { className: "h-4 w-4" })
             }
           )
         ] }),
-        extras,
+        !withFiles && extras,
         models.length > 0 && onModelChange && /* @__PURE__ */ jsx8(ModelPicker, { models, current: currentModel, onChange: onModelChange })
       ] }),
       /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-1.5", children: [
-        canRecord && !recording && /* @__PURE__ */ jsx8("button", { type: "button", onClick: toggleRecording, disabled: busy || transcribing, "aria-label": t.recordVoice, title: t.voiceNote, className: `${iconButton} h-8 w-8`, children: transcribing ? /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx8(Mic, { className: "h-4 w-4" }) }),
+        canRecord && !recording && /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            onClick: toggleRecording,
+            disabled: busy || transcribing,
+            "aria-label": t.recordVoice,
+            title: t.voiceNote,
+            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-background-secondary hover:text-text-primary disabled:opacity-40",
+            children: transcribing ? /* @__PURE__ */ jsx8("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent" }) : /* @__PURE__ */ jsx8(Mic, { className: "h-4 w-4" })
+          }
+        ),
         /* @__PURE__ */ jsx8(
           "button",
           {
@@ -2111,8 +2237,7 @@ function Composer({
             onClick: busy ? onStop : () => void submit(),
             disabled: !busy && !canSend || uploading,
             "aria-label": busy ? t.stop : uploading ? t.uploading : t.send,
-            "data-ready": busy || canSend || uploading || void 0,
-            className: "piloto-send flex h-8 w-8 items-center justify-center rounded-full transition-colors",
+            className: `gc-send flex h-8 w-8 items-center justify-center rounded-full transition-colors ${busy || canSend || uploading ? "bg-brand-500 text-white hover:bg-brand-600" : "bg-background-disabled text-text-disabled"}`,
             children: busy ? /* @__PURE__ */ jsx8(Square, { className: "h-3 w-3 fill-current" }) : uploading ? /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx8(ArrowUp, { className: "h-4 w-4" })
           }
         )
@@ -2137,7 +2262,7 @@ function ModelPicker({ models, current, onChange }) {
       document.removeEventListener("keydown", escape);
     };
   }, [open]);
-  if (!models.length) return null;
+  if (models.length === 0) return null;
   const active = models.find((m) => m.value === current) ?? null;
   return /* @__PURE__ */ jsxs6("div", { ref: box, className: "relative", children: [
     /* @__PURE__ */ jsxs6(
@@ -2146,7 +2271,7 @@ function ModelPicker({ models, current, onChange }) {
         type: "button",
         "aria-expanded": open,
         onClick: () => setOpen((v) => !v),
-        className: "flex max-w-56 items-center gap-1.5 rounded-full border border-border-primary px-2.5 py-1 text-xs text-text-secondary transition-colors hover:bg-background-secondary hover:text-text-primary",
+        className: "flex max-w-56 items-center gap-1.5 rounded-full border border-border-primary px-2.5 py-1 text-xs text-text-secondary transition-colors outline-none hover:bg-background-secondary hover:text-text-primary",
         children: [
           /* @__PURE__ */ jsx8(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
           /* @__PURE__ */ jsx8("span", { className: "truncate", children: active?.name ?? t.model }),
@@ -2154,7 +2279,8 @@ function ModelPicker({ models, current, onChange }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx8("div", { className: "piloto-menu absolute bottom-full left-0 z-20 mb-1 max-h-80 min-w-52 overflow-y-auto rounded-(--piloto-radius-input) border border-border-primary bg-background-primary py-1 shadow-(--piloto-shadow-card)", children: models.map((m) => /* @__PURE__ */ jsxs6(
+    open && // Hacia ARRIBA: el selector vive pegado al borde inferior del input.
+    /* @__PURE__ */ jsx8("div", { className: "absolute bottom-full left-0 z-20 mb-1 max-h-80 min-w-52 overflow-y-auto rounded-xl border border-border-primary bg-background-primary py-1 shadow-lg", children: models.map((m) => /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
@@ -2173,14 +2299,30 @@ function ModelPicker({ models, current, onChange }) {
   ] });
 }
 
+// src/react/connectingGate.ts
+var CONNECTING_DELAY_MS = 1200;
+var CONNECTING_MIN_MS = 700;
+var initialGate = (now, connected) => ({ shownAt: null, waitingSince: connected ? null : now });
+function stepGate(g, connected, now, delay = CONNECTING_DELAY_MS, min = CONNECTING_MIN_MS) {
+  const waitingSince = connected ? null : g.waitingSince ?? now;
+  let shownAt = g.shownAt;
+  if (shownAt === null && waitingSince !== null && now - waitingSince >= delay) shownAt = now;
+  if (shownAt !== null && connected && now - shownAt >= min) shownAt = null;
+  const gate = { shownAt, waitingSince };
+  let recheckAt = null;
+  if (shownAt === null && waitingSince !== null) recheckAt = waitingSince + delay;
+  else if (shownAt !== null && connected) recheckAt = shownAt + min;
+  return { gate, visible: shownAt !== null, recheckAt };
+}
+
 // src/react/Status.tsx
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
 import { useEffect as useEffect4, useState as useState7 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var WAKING_GIVEUP_S = 45;
 var STILL_WORKING_S = 90;
 function TypingDots() {
-  return /* @__PURE__ */ jsx9("div", { className: "piloto-typing", "aria-hidden": true, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx9("span", { className: "piloto-typing-dot" }, i)) });
+  return /* @__PURE__ */ jsx9("div", { className: "gc-typing flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx9("span", { className: "gc-typing-dot h-2 w-2 animate-bounce rounded-full", style: { "--i": i } }, i)) });
 }
 function WaitLabel({
   phase,
@@ -2198,20 +2340,31 @@ function WaitLabel({
   }, []);
   const seconds = Math.max(0, Math.floor((now - (since || mounted)) / 1e3));
   const phrases = t.thinkingPhrases;
-  const what = phase !== "session" ? t.waitPhase[phase] : phrases?.length ? (
-    // Frases propias de la app (el widget de un cliente): rotan cada 4 s.
-    elsewhere || seconds >= STILL_WORKING_S ? t.stillWorking : phrases[Math.floor(seconds / 4) % phrases.length]
-  ) : elsewhere ? t.stillWorking : t.howItGoes(seconds);
+  const what = phase !== "session" ? t.waitPhase[phase] : phrases?.length ? elsewhere || seconds >= STILL_WORKING_S ? t.stillWorking : phrases[Math.floor(seconds / 4) % phrases.length] : elsewhere ? t.stillWorking : t.howItGoes(seconds);
   const lost = phase === "waking" && seconds >= WAKING_GIVEUP_S;
-  return /* @__PURE__ */ jsx9("div", { className: "piloto-wait flex flex-col gap-0.5 text-sm text-text-secondary", children: lost ? /* @__PURE__ */ jsxs7("p", { className: "text-text-primary", children: [
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-0.5 text-sm text-text-secondary", children: lost ? /* @__PURE__ */ jsxs7("p", { className: "text-text-primary", children: [
     t.cantStart,
     " ",
     /* @__PURE__ */ jsx9("button", { type: "button", onClick: onLost, className: "cursor-pointer underline underline-offset-2", children: t.retry })
   ] }) : (
-    // La frase cambia con fundido (sale y entra): de golpe se leía brusco.
+    // La frase cambia con fundido (sale y entra), como en claude.ai.
     /* @__PURE__ */ jsxs7("p", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx9(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx9(motion.span, { className: "piloto-wait-text", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, children: what }, what) }),
-      showDuration && /* @__PURE__ */ jsx9("span", { className: "piloto-wait-time", children: formatDuration(seconds) })
+      /* @__PURE__ */ jsx9(AnimatePresence2, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx9(
+        motion2.span,
+        {
+          className: "gc-wait-text",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.3, ease: "easeInOut" },
+          children: what
+        },
+        what
+      ) }),
+      showDuration && /* @__PURE__ */ jsxs7("span", { className: "tabular-nums text-text-tertiary", children: [
+        "\xA0\xB7 ",
+        formatDuration(seconds)
+      ] })
     ] })
   ) });
 }
@@ -2219,48 +2372,74 @@ var PHASES = ["waking", "connecting", "session"];
 function ConnectingState({ phase, error, avatar, onRetry }) {
   const { strings: t } = usePiloto();
   const current = PHASES.indexOf(phase);
-  return /* @__PURE__ */ jsxs7(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, className: "piloto-connecting flex min-h-[40vh] flex-col items-center justify-center gap-8 text-center", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "relative flex h-20 w-20 items-center justify-center", children: [
-      !error && [0, 1].map((i) => /* @__PURE__ */ jsx9(
-        motion.span,
-        {
-          className: "absolute inset-0 rounded-full border border-border-primary",
-          initial: { scale: 0.6, opacity: 0.8 },
-          animate: { scale: 1.6, opacity: 0 },
-          transition: { duration: 2.2, repeat: Infinity, ease: "easeOut", delay: i * 1.1 }
-        },
-        i
-      )),
-      /* @__PURE__ */ jsx9(
-        motion.div,
-        {
-          className: "grid h-12 w-12 place-items-center",
-          animate: error ? { scale: 1, filter: "grayscale(1)" } : { scale: [1, 1.06, 1] },
-          transition: error ? { duration: 0.3 } : { duration: 2.2, repeat: Infinity, ease: "easeInOut" },
-          children: avatar ?? /* @__PURE__ */ jsx9("span", { className: "piloto-avatar-default" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx9("ol", { className: "flex flex-col gap-3 text-left", children: t.connectSteps.map((step, i) => {
-      const done = !error && i < current;
-      const active = !error && i === current;
-      const failed = !!error && i === current;
-      return /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx9("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: done ? /* @__PURE__ */ jsx9("span", { className: "piloto-pop flex h-5 w-5 items-center justify-center rounded-full bg-background-success", children: /* @__PURE__ */ jsx9(Check, { className: "h-3 w-3 text-text-inverse", strokeWidth: 3 }) }) : active ? /* @__PURE__ */ jsx9("span", { className: "piloto-pulse h-2.5 w-2.5 rounded-full bg-text-primary" }) : failed ? /* @__PURE__ */ jsx9("span", { className: "h-2.5 w-2.5 rounded-full bg-text-danger" }) : /* @__PURE__ */ jsx9("span", { className: "h-2 w-2 rounded-full bg-border-primary" }) }),
-        /* @__PURE__ */ jsxs7("div", { className: "leading-tight", children: [
-          /* @__PURE__ */ jsxs7("p", { className: `text-sm ${active || failed ? "text-text-primary" : done ? "text-text-secondary" : "text-text-tertiary"}`, children: [
-            step.label,
-            active && /* @__PURE__ */ jsx9("span", { className: "piloto-ellipsis inline-block w-4 text-left", children: "\u2026" })
-          ] }),
-          active && /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-tertiary", children: step.hint })
+  return /* @__PURE__ */ jsxs7(
+    motion2.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -8 },
+      transition: { duration: 0.3 },
+      className: "flex min-h-[50vh] flex-col items-center justify-center gap-8 text-center",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "relative flex h-20 w-20 items-center justify-center", children: [
+          !error && [0, 1].map((i) => /* @__PURE__ */ jsx9(
+            motion2.span,
+            {
+              className: "absolute inset-0 rounded-full border border-border-primary",
+              initial: { scale: 0.6, opacity: 0.8 },
+              animate: { scale: 1.6, opacity: 0 },
+              transition: { duration: 2.2, repeat: Infinity, ease: "easeOut", delay: i * 1.1 }
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx9(
+            motion2.div,
+            {
+              className: "grid h-12 w-12 place-items-center",
+              animate: error ? { scale: 1, filter: "grayscale(1)" } : { scale: [1, 1.06, 1] },
+              transition: error ? { duration: 0.3 } : { duration: 2.2, repeat: Infinity, ease: "easeInOut" },
+              children: avatar ?? /* @__PURE__ */ jsx9("span", { className: "h-12 w-12 rounded-full bg-brand-500" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9("ol", { className: "flex flex-col gap-3 text-left", children: t.connectSteps.map((step, i) => {
+          const done = !error && i < current;
+          const active = !error && i === current;
+          const failed = !!error && i === current;
+          return /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx9("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx9(AnimatePresence2, { mode: "wait", initial: false, children: done ? /* @__PURE__ */ jsx9(motion2.span, { initial: { scale: 0 }, animate: { scale: 1 }, className: "flex h-5 w-5 items-center justify-center rounded-full bg-background-success", children: /* @__PURE__ */ jsx9(Check, { className: "h-3 w-3 text-text-success", strokeWidth: 3 }) }, "done") : active ? /* @__PURE__ */ jsx9(
+              motion2.span,
+              {
+                className: "h-2.5 w-2.5 rounded-full bg-text-primary",
+                animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
+                transition: { duration: 1.1, repeat: Infinity, ease: "easeInOut" }
+              },
+              "active"
+            ) : failed ? /* @__PURE__ */ jsx9("span", { className: "h-2.5 w-2.5 rounded-full bg-text-danger" }, "failed") : /* @__PURE__ */ jsx9("span", { className: "h-2 w-2 rounded-full bg-border-primary" }, "idle") }) }),
+            /* @__PURE__ */ jsxs7("div", { className: "leading-tight", children: [
+              /* @__PURE__ */ jsxs7("p", { className: `text-sm ${active || failed ? "text-text-primary" : done ? "text-text-secondary" : "text-text-tertiary"}`, children: [
+                step.label,
+                active && /* @__PURE__ */ jsx9(
+                  motion2.span,
+                  {
+                    className: "inline-block w-4 text-left",
+                    animate: { opacity: [0, 1, 1, 0] },
+                    transition: { duration: 1.4, repeat: Infinity, times: [0, 0.2, 0.8, 1] },
+                    children: "\u2026"
+                  }
+                )
+              ] }),
+              active && /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-tertiary", children: step.hint })
+            ] })
+          ] }, i);
+        }) }),
+        error && /* @__PURE__ */ jsxs7(motion2.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, className: "flex max-w-md flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsx9("p", { className: "text-sm text-text-danger", children: error }),
+          onRetry && /* @__PURE__ */ jsx9("button", { type: "button", onClick: onRetry, className: "rounded-full border border-border-primary px-4 py-1.5 text-sm text-text-primary hover:bg-background-secondary", children: t.connectRetry })
         ] })
-      ] }, i);
-    }) }),
-    error && /* @__PURE__ */ jsxs7("div", { className: "flex max-w-md flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsx9("p", { className: "text-sm text-text-danger", children: error }),
-      onRetry && /* @__PURE__ */ jsx9("button", { type: "button", onClick: onRetry, className: "rounded-full border border-border-primary px-4 py-1.5 text-sm text-text-primary hover:bg-background-secondary", children: t.connectRetry })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 
 // src/react/usePilot.ts
@@ -2436,7 +2615,7 @@ function useSseTransport(base, opts) {
 }
 
 // src/react/Piloto.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var useIsoLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect;
 var ANCHOR_GAP = 24;
 var Piloto = forwardRef3(function Piloto2(props, handle) {
@@ -2603,59 +2782,78 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
   const pageInProgress = last?.role === "assistant" && (Boolean(last.planning) || (last.pages ?? []).some((p) => !p.error && (!p.readyAt || p.review?.status === "running")));
   const toolRunning = busy && last?.role === "assistant" && ((last.tools ?? []).some(isRunning) || pageInProgress);
   const empty = turns.length === 0 && !busy;
-  const placeholder = !connected ? t.placeholderConnecting : props.placeholder ?? (props.agentName ? t.placeholder(props.agentName) : t.placeholderDefault);
+  const perTurn = !external && transport?.stream === "per-turn";
+  const ready = connected || perTurn;
+  const placeholder = !ready ? t.placeholderConnecting : props.placeholder ?? (props.agentName ? t.placeholder(props.agentName) : t.placeholderDefault);
   const showFiles = features.attachments ?? Boolean(props.upload);
-  const [slowConnect, setSlowConnect] = useState9(false);
+  const gateRef = useRef5(initialGate(Date.now(), ready));
+  const [showConnecting, setShowConnecting] = useState9(false);
   useEffect6(() => {
-    if (connected) return setSlowConnect(false);
-    const id = setTimeout(() => setSlowConnect(true), 800);
+    let id;
+    const tick = () => {
+      const r = stepGate(gateRef.current, ready, Date.now());
+      gateRef.current = r.gate;
+      setShowConnecting(r.visible);
+      if (r.recheckAt !== null) id = setTimeout(tick, Math.max(0, r.recheckAt - Date.now()));
+    };
+    tick();
     return () => clearTimeout(id);
-  }, [connected]);
-  const composer = /* @__PURE__ */ jsx10("div", { ref: composerBox, children: /* @__PURE__ */ jsx10(
-    Composer,
-    {
-      initialValue: draft.text,
-      onSubmit: send,
-      onStop: pilot.stop,
-      busy,
-      canSteer: (external ? true : transport?.steer) !== false,
-      placeholder,
-      canSeeImages: state.canSeeImages,
-      attachments: showFiles,
-      upload: props.upload,
-      transcribe: props.transcribe,
-      voiceNoteText: props.voiceNoteText,
-      models: features.models === false ? [] : state.models,
-      currentModel: state.currentModel,
-      onModelChange: pilot.setModel,
-      references: refs,
-      onRemoveReference: (id) => setRefs(refsRef.current.filter((r) => r.id !== id)),
-      onActivateReference: props.onReferenceClick,
-      extras: slots.composerExtras
-    },
-    draft.n
-  ) });
+  }, [ready]);
+  const pointedRefs = refs.filter((r) => r.prompt);
+  const plainRefs = refs.filter((r) => !r.prompt);
+  const removeRef = (id) => setRefs(refsRef.current.filter((r) => r.id !== id));
+  const composer = /* @__PURE__ */ jsxs8("div", { ref: composerBox, children: [
+    /* @__PURE__ */ jsx10(ReferenceChips, { references: pointedRefs, onRemove: removeRef, onActivate: props.onReferenceClick }),
+    /* @__PURE__ */ jsx10(
+      Composer,
+      {
+        initialValue: draft.text,
+        onSubmit: send,
+        onStop: pilot.stop,
+        busy,
+        canSteer: (external ? true : transport?.steer) !== false,
+        placeholder,
+        canSeeImages: state.canSeeImages,
+        attachments: showFiles,
+        upload: props.upload,
+        transcribe: props.transcribe,
+        voiceNoteText: props.voiceNoteText,
+        models: features.models === false ? [] : state.models,
+        currentModel: state.currentModel,
+        onModelChange: pilot.setModel,
+        references: plainRefs,
+        onRemoveReference: removeRef,
+        onActivateReference: props.onReferenceClick,
+        extras: slots.composerExtras
+      },
+      draft.n
+    )
+  ] });
   const permissionCards = cards.map((p) => /* @__PURE__ */ jsx10(ConfirmCard, { request: p, onRespond: respond, onSettled: settle, onExpire: pilot.expirePermission }, p.id));
   return /* @__PURE__ */ jsx10(PilotoContext.Provider, { value: config, children: /* @__PURE__ */ jsx10("div", { ...rootProps(theme, props.skin), "data-busy": busy || void 0, className: `piloto ${props.className ?? ""}`, style: props.style, children: empty ? (
-    // Si no cabe (panel bajo, saludo largo), se desplaza en vez de recortarse: el centrado es con
-    // márgenes automáticos, que nunca empujan contenido fuera del contenedor.
-    /* @__PURE__ */ jsxs8("div", { className: "piloto-empty", children: [
+    // Un hilo vacío enseña lo mismo que la portada: la cara, el saludo, la caja y por dónde
+    // empezar. Si no cabe (panel bajo), se desplaza: `safe center` nunca empuja nada fuera.
+    /* @__PURE__ */ jsxs8("div", { className: "gs-scroll flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 pb-[10vh] [justify-content:safe_center]", children: [
       slots.headerActions && /* @__PURE__ */ jsx10("div", { className: "absolute right-4 top-3 flex gap-2", children: slots.headerActions }),
-      /* @__PURE__ */ jsxs8("div", { className: "piloto-empty-inner", children: [
-        !connected && slowConnect ? /* @__PURE__ */ jsx10(ConnectingState, { phase, error, avatar: props.avatar }) : slots.emptyState ?? /* @__PURE__ */ jsxs8("div", { className: "piloto-welcome mb-6 flex flex-col items-center gap-3 text-center", children: [
-          props.avatar,
-          props.welcome && // Un saludo largo (una explicación) va en letra de lectura; uno corto, en la de cartel.
-          /* @__PURE__ */ jsx10("div", { className: "piloto-welcome-text", "data-long": typeof props.welcome === "string" && props.welcome.length > 60 ? "" : void 0, children: props.welcome })
-        ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-3xl", children: [
-          slots.aboveComposer,
-          composer,
-          props.suggestions && /* @__PURE__ */ jsx10(Suggestions, { items: props.suggestions, onPick: (s) => send(s), onPrefill: (s) => setDraftState((d) => ({ text: s, n: d.n + 1 })) })
-        ] })
+      /* @__PURE__ */ jsx10(AnimatePresence3, { mode: "wait", initial: false, children: showConnecting ? /* @__PURE__ */ jsx10(ConnectingState, { phase, error, avatar: props.avatar }, "connecting") : /* @__PURE__ */ jsx10("div", { children: slots.emptyState ?? /* @__PURE__ */ jsxs8("div", { className: "mb-6 flex flex-col items-center", children: [
+        props.avatar && /* @__PURE__ */ jsx10("div", { className: "mb-3", children: props.avatar }),
+        props.welcome && // Un saludo largo (una explicación del copiloto) baja a letra de lectura.
+        /* @__PURE__ */ jsx10(
+          "h1",
+          {
+            className: typeof props.welcome === "string" && props.welcome.length > 60 ? "max-w-xl text-center text-base font-medium leading-6 text-metal" : "text-center text-3xl font-extrabold tracking-tight text-dark",
+            children: props.welcome
+          }
+        )
+      ] }) }, "welcome") }),
+      /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-3xl", children: [
+        slots.aboveComposer,
+        composer,
+        props.suggestions && /* @__PURE__ */ jsx10(Suggestions, { items: props.suggestions, onPick: (s) => send(s), onPrefill: (s) => setDraftState((d) => ({ text: s, n: d.n + 1 })) })
       ] })
     ] })
-  ) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    slots.headerActions && /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 justify-end gap-2 px-4 pt-3", children: slots.headerActions }),
+  ) : /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    slots.headerActions && /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 justify-end gap-2 px-4 pt-3 sm:px-6", children: slots.headerActions }),
     /* @__PURE__ */ jsxs8(
       "div",
       {
@@ -2670,9 +2868,9 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
           if (touchY.current != null && y != null && y > touchY.current + 4) release();
         },
         onKeyDown: (e) => ["ArrowUp", "PageUp", "Home"].includes(e.key) && release(),
-        className: "piloto-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+        className: "gs-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
         children: [
-          /* @__PURE__ */ jsxs8("div", { ref: column, className: "piloto-column mx-auto flex w-full flex-col gap-6 px-4 py-6", children: [
+          /* @__PURE__ */ jsxs8("div", { ref: column, className: "mx-auto flex w-full max-w-[784px] flex-col gap-6 px-4 py-8 sm:px-6", children: [
             turns.map((turn, i) => {
               const isLast = i === turns.length - 1;
               const live = busy && isLast;
@@ -2685,6 +2883,7 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
                   onOption: isLast && !busy && features.replyOptions !== false ? (text) => send(text) : void 0,
                   showUsage: features.usage !== false,
                   showCopy: features.copy !== false,
+                  showDuration: features.duration !== false,
                   renderDeliveries: slots.renderDeliveries
                 }
               ) }, i);
@@ -2694,26 +2893,26 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
               /* @__PURE__ */ jsx10(TypingDots, {}),
               /* @__PURE__ */ jsx10(WaitLabel, { phase, since: state.turnStartedAt, elsewhere: state.elsewhere, onLost: pilot.abandonAndRetry, showDuration: features.duration !== false })
             ] }),
-            interrupted && !busy && /* @__PURE__ */ jsxs8("p", { className: "piloto-interrupted text-sm text-text-secondary", children: [
+            interrupted && !busy && /* @__PURE__ */ jsxs8("p", { className: "text-sm text-text-secondary", children: [
               /me quedé a medias|i stopped halfway/i.test(last?.text ?? "") ? t.interruptedOurFault : t.interrupted(interrupted.reason),
               " ",
               /* @__PURE__ */ jsx10("button", { type: "button", onClick: pilot.resume, className: "cursor-pointer text-text-primary underline underline-offset-2", children: interrupted.canContinue ? t.continueTurn : t.resume })
             ] }),
-            notice && /* @__PURE__ */ jsx10("p", { className: "piloto-notice text-sm text-text-tertiary", children: notice }),
-            error && /* @__PURE__ */ jsx10("p", { className: "piloto-error text-sm text-text-danger", children: error })
+            notice && /* @__PURE__ */ jsx10("p", { className: "text-sm text-text-tertiary", children: notice }),
+            error && /* @__PURE__ */ jsx10("p", { className: "text-sm text-text-danger", children: error })
           ] }),
           /* @__PURE__ */ jsx10("div", { ref: spacer, "aria-hidden": true })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "piloto-dock relative mx-auto w-full px-4 pb-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "relative mx-auto w-full max-w-[784px] px-4 pb-4 sm:px-6 sm:pb-6", children: [
       !atBottom && /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
           onClick: toBottom,
           "aria-label": t.goToLatest,
-          className: "piloto-to-bottom absolute -top-12 left-1/2 z-10 flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full border border-border-primary bg-background-secondary text-text-secondary shadow-(--piloto-shadow-card) transition hover:text-text-primary",
+          className: "absolute -top-12 left-1/2 z-10 flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full border border-border-primary bg-background-secondary text-text-secondary shadow-lg transition hover:text-text-primary",
           children: /* @__PURE__ */ jsx10(ArrowDown, { className: "h-4 w-4" })
         }
       ),