@blinq_ai/widget 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -31,7 +31,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   BlinqWidget: () => BlinqWidget,
+  EMBED_WIDGET_STYLES: () => EMBED_WIDGET_STYLES,
+  PageToolRegistry: () => PageToolRegistry,
+  WidgetEmbedShell: () => WidgetEmbedShell,
+  collectNormalizedPageContext: () => collectNormalizedPageContext,
   createBlinqWidget: () => createBlinqWidget,
+  detectNativeWebMcpSupport: () => detectNativeWebMcpSupport,
   init: () => init,
   initFromConfig: () => initFromConfig
 });
@@ -574,6 +579,12 @@ function collectNormalizedPageContext() {
 }
 
 // src/page-tools.ts
+var DEFAULT_ACTION_POLICY = {
+  actions_enabled: true,
+  action_mode: "execute_with_confirmation",
+  pointer_overlay_enabled: true
+};
+var GUIDANCE_SAFE_TOOL_NAMES = /* @__PURE__ */ new Set(["blinq.scroll_to_element"]);
 function isBrowser2() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
@@ -670,6 +681,12 @@ function findTarget(selector) {
   }
   return target;
 }
+function shouldRequestConfirmation(toolName, readOnly) {
+  if (readOnly) {
+    return false;
+  }
+  return !GUIDANCE_SAFE_TOOL_NAMES.has(toolName);
+}
 function isDuplicateNativeToolError(error) {
   if (!(error instanceof Error)) {
     return false;
@@ -831,6 +848,15 @@ function buildSemanticToolDefinition(descriptor) {
   }
   return null;
 }
+function selectorFromArguments(argumentsPayload) {
+  for (const key of ["selector", "field_selector", "submit_selector", "form_selector"]) {
+    const value = argumentsPayload[key];
+    if (typeof value === "string" && value.trim()) {
+      return value.trim();
+    }
+  }
+  return null;
+}
 function detectNativeWebMcpSupport() {
   if (!isBrowser2() || !window.isSecureContext) {
     return false;
@@ -846,10 +872,17 @@ var PageToolRegistry = class {
   nativeToolsActive = false;
   highlightLayer = null;
   highlightTimer = null;
+  actionPolicy = { ...DEFAULT_ACTION_POLICY };
   constructor(confirmationHandler) {
     this.confirmationHandler = confirmationHandler;
     this.refreshToolCatalog();
   }
+  setActionPolicy(nextPolicy) {
+    this.actionPolicy = {
+      ...DEFAULT_ACTION_POLICY,
+      ...nextPolicy
+    };
+  }
   buildBaseTools() {
     const tools = /* @__PURE__ */ new Map();
     tools.set("blinq.read_visible_page_context", {
@@ -1023,7 +1056,7 @@ var PageToolRegistry = class {
   }
   getToolCapabilities() {
     this.refreshToolCatalog();
-    return Array.from(this.tools.values()).map((tool) => tool.capability);
+    return Array.from(this.tools.values()).filter((tool) => this.isToolAllowed(tool)).map((tool) => tool.capability);
   }
   clearHighlights() {
     if (this.highlightTimer !== null) {
@@ -1049,13 +1082,52 @@ var PageToolRegistry = class {
     this.highlightLayer = layer;
     return layer;
   }
+  ensureHighlightStyle() {
+    if (document.getElementById("blinq-highlight-style")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "blinq-highlight-style";
+    style.textContent = `
+      @keyframes blinq-highlight-pulse {
+        0%, 100% { opacity: 0.55; transform: scale(1); }
+        50% { opacity: 1; transform: scale(1.02); }
+      }
+
+      @keyframes blinq-highlight-ripple {
+        0% { opacity: 0.36; transform: translate(-50%, -50%) scale(0.8); }
+        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
+      }
+
+      @keyframes blinq-pointer-bob {
+        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+        50% { transform: translate3d(0, -2px, 0) scale(1.03); }
+      }
+    `;
+    document.head.appendChild(style);
+  }
   highlightTargets(targets, options) {
     if (!isBrowser2() || targets.length === 0) {
       return false;
     }
     this.clearHighlights();
     const layer = this.ensureHighlightLayer();
+    this.ensureHighlightStyle();
     let highlightedCount = 0;
+    let primaryRect = null;
+    const backdrop = document.createElement("div");
+    Object.assign(backdrop.style, {
+      position: "fixed",
+      inset: "0",
+      background: "rgba(15, 23, 42, 0.08)",
+      backdropFilter: "blur(1.5px)",
+      opacity: "0",
+      transition: "opacity 180ms ease"
+    });
+    layer.appendChild(backdrop);
+    window.requestAnimationFrame(() => {
+      backdrop.style.opacity = "1";
+    });
     for (const target of targets) {
       if (!target.selector) {
         continue;
@@ -1069,21 +1141,30 @@ var PageToolRegistry = class {
       if (!element) {
         continue;
       }
+      if (!primaryRect) {
+        element.scrollIntoView({
+          block: "center",
+          inline: "nearest"
+        });
+      }
       const rect = element.getBoundingClientRect();
       if (rect.width <= 0 || rect.height <= 0) {
         continue;
       }
+      if (!primaryRect) {
+        primaryRect = rect;
+      }
       const frame = document.createElement("div");
       Object.assign(frame.style, {
         position: "fixed",
-        left: `${Math.max(rect.left - 6, 4)}px`,
-        top: `${Math.max(rect.top - 6, 4)}px`,
-        width: `${Math.max(rect.width + 12, 18)}px`,
-        height: `${Math.max(rect.height + 12, 18)}px`,
-        border: "2px solid rgba(17, 17, 17, 0.92)",
-        borderRadius: "16px",
-        background: "rgba(17, 17, 17, 0.05)",
-        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.85), 0 18px 38px rgba(17, 17, 17, 0.14)",
+        left: `${Math.max(rect.left - 8, 4)}px`,
+        top: `${Math.max(rect.top - 8, 4)}px`,
+        width: `${Math.max(rect.width + 16, 24)}px`,
+        height: `${Math.max(rect.height + 16, 24)}px`,
+        border: "3px solid rgba(17, 17, 17, 0.94)",
+        borderRadius: "18px",
+        background: "rgba(255, 255, 255, 0.16)",
+        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.9), 0 24px 48px rgba(15, 23, 42, 0.18)",
         opacity: "0",
         transform: "scale(0.985)",
         transition: "opacity 180ms ease, transform 180ms ease"
@@ -1091,9 +1172,9 @@ var PageToolRegistry = class {
       const glow = document.createElement("div");
       Object.assign(glow.style, {
         position: "absolute",
-        inset: "-8px",
-        borderRadius: "20px",
-        border: "1px solid rgba(17, 17, 17, 0.14)",
+        inset: "-10px",
+        borderRadius: "22px",
+        border: "1px solid rgba(37, 99, 235, 0.22)",
         animation: "blinq-highlight-pulse 1.2s ease-in-out infinite"
       });
       frame.appendChild(glow);
@@ -1102,15 +1183,15 @@ var PageToolRegistry = class {
         badge.textContent = target.label;
         Object.assign(badge.style, {
           position: "absolute",
-          top: "-14px",
+          top: "-16px",
           left: "10px",
-          maxWidth: "min(220px, 70vw)",
-          padding: "4px 10px",
+          maxWidth: "min(260px, 70vw)",
+          padding: "6px 12px",
           borderRadius: "999px",
           background: "#111111",
           color: "#ffffff",
           fontFamily: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-          fontSize: "11px",
+          fontSize: "12px",
           fontWeight: "600",
           lineHeight: "1.3",
           whiteSpace: "nowrap",
@@ -1127,16 +1208,57 @@ var PageToolRegistry = class {
       });
       highlightedCount += 1;
     }
-    if (!document.getElementById("blinq-highlight-style")) {
-      const style = document.createElement("style");
-      style.id = "blinq-highlight-style";
-      style.textContent = `
-        @keyframes blinq-highlight-pulse {
-          0%, 100% { opacity: 0.55; transform: scale(1); }
-          50% { opacity: 1; transform: scale(1.02); }
-        }
+    if (this.actionPolicy.pointer_overlay_enabled && primaryRect) {
+      const pointer = document.createElement("div");
+      pointer.setAttribute("data-blinq-pointer", options?.interaction ?? "explain");
+      pointer.innerHTML = `
+        <div style="position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,0.92);box-shadow:0 14px 28px rgba(15,23,42,0.18);"></div>
+        <svg viewBox="0 0 40 40" width="40" height="40" fill="none" aria-hidden="true" style="position:relative;z-index:1;">
+          <path d="M8 5L28 22H18.4L23.2 34.8L17.8 36.8L13 24H6.6L8 5Z" fill="#111111"/>
+          <path d="M8 5L28 22H18.4L23.2 34.8L17.8 36.8L13 24H6.6L8 5Z" stroke="#ffffff" stroke-width="1.4" stroke-linejoin="round"/>
+        </svg>
       `;
-      document.head.appendChild(style);
+      Object.assign(pointer.style, {
+        position: "fixed",
+        left: `${Math.max(primaryRect.left - 72, 12)}px`,
+        top: `${Math.max(primaryRect.bottom + 44, 12)}px`,
+        width: "40px",
+        height: "40px",
+        zIndex: "2147483647",
+        opacity: "0",
+        transform: "translate3d(0, 0, 0) scale(0.92)",
+        transition: "left 380ms cubic-bezier(.22,1,.36,1), top 380ms cubic-bezier(.22,1,.36,1), opacity 180ms ease, transform 380ms cubic-bezier(.22,1,.36,1)",
+        filter: "drop-shadow(0 16px 28px rgba(15, 23, 42, 0.2))",
+        animation: "blinq-pointer-bob 1.1s ease-in-out infinite"
+      });
+      layer.appendChild(pointer);
+      const pointerTargetLeft = Math.max(primaryRect.left + 14, 8);
+      const pointerTargetTop = Math.max(primaryRect.top + 14, 8);
+      window.requestAnimationFrame(() => {
+        pointer.style.opacity = "1";
+        pointer.style.left = `${pointerTargetLeft}px`;
+        pointer.style.top = `${pointerTargetTop}px`;
+        pointer.style.transform = "translate3d(0, 0, 0) scale(1)";
+      });
+      if (options?.interaction === "execute") {
+        const ripple = document.createElement("div");
+        Object.assign(ripple.style, {
+          position: "fixed",
+          left: `${primaryRect.left + Math.min(primaryRect.width, 32) / 2}px`,
+          top: `${primaryRect.top + Math.min(primaryRect.height, 32) / 2}px`,
+          width: "34px",
+          height: "34px",
+          borderRadius: "999px",
+          border: "3px solid rgba(17, 17, 17, 0.58)",
+          background: "rgba(17, 17, 17, 0.12)",
+          pointerEvents: "none",
+          opacity: "0",
+          transform: "translate(-50%, -50%) scale(0.8)",
+          animation: "blinq-highlight-ripple 560ms ease-out 1 forwards",
+          animationDelay: "320ms"
+        });
+        layer.appendChild(ripple);
+      }
     }
     if (highlightedCount === 0) {
       this.clearHighlights();
@@ -1147,8 +1269,38 @@ var PageToolRegistry = class {
     }, options?.durationMs ?? 2200);
     return true;
   }
+  isToolAllowed(tool) {
+    if (tool.capability.read_only) {
+      return true;
+    }
+    if (GUIDANCE_SAFE_TOOL_NAMES.has(tool.capability.name)) {
+      return this.actionPolicy.actions_enabled;
+    }
+    return this.actionPolicy.actions_enabled && this.actionPolicy.action_mode === "execute_with_confirmation";
+  }
+  async previewToolRequest(request, options) {
+    const selector = selectorFromArguments(request.arguments);
+    if (!selector) {
+      return false;
+    }
+    const label = (request.target_summary || request.display_name || "").trim() || void 0;
+    const highlighted = this.highlightTargets(
+      [{ selector, label }],
+      {
+        durationMs: options?.durationMs ?? (options?.interaction === "execute" ? 1600 : 2200),
+        interaction: options?.interaction ?? "explain"
+      }
+    );
+    if (!highlighted) {
+      return false;
+    }
+    await new Promise(
+      (resolve) => window.setTimeout(resolve, options?.interaction === "execute" ? 520 : 240)
+    );
+    return true;
+  }
   canExecuteWriteTools() {
-    return isBrowser2();
+    return isBrowser2() && this.actionPolicy.actions_enabled && this.actionPolicy.action_mode === "execute_with_confirmation";
   }
   async executeTool(request) {
     let tool = this.tools.get(request.tool_name);
@@ -1164,7 +1316,22 @@ var PageToolRegistry = class {
     }
     const displayName = request.display_name ?? tool.capability.name;
     const targetSummary = request.target_summary ?? tool.describeTarget?.(request.arguments) ?? tool.capability.description;
-    const requiresConfirmation = request.requires_confirmation ?? !tool.capability.read_only;
+    const requiresConfirmation = request.requires_confirmation ?? shouldRequestConfirmation(request.tool_name, tool.capability.read_only);
+    if (request.tool_name !== "blinq.highlight_element") {
+      await this.previewToolRequest(request, {
+        interaction: tool.capability.read_only ? "explain" : "execute"
+      });
+    }
+    if (!tool.capability.read_only && !this.isToolAllowed(tool)) {
+      return {
+        status: "success",
+        result: {
+          success: true,
+          guided: true,
+          preview_only: true
+        }
+      };
+    }
     if (!tool.capability.read_only && requiresConfirmation) {
       const confirmed = await this.confirmationHandler({
         displayName,
@@ -1206,6 +1373,9 @@ var PageToolRegistry = class {
     this.refreshToolCatalog();
     this.unregisterNativeTools();
     for (const [toolName, tool] of this.tools) {
+      if (!this.isToolAllowed(tool)) {
+        continue;
+      }
       const controller = new AbortController();
       try {
         modelContext.registerTool(
@@ -1248,6 +1418,7 @@ var PageToolRegistry = class {
 
 // src/embed-shell.tsx
 var React = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
 var import_react = require("@assistant-ui/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function cn(...values) {
@@ -1304,87 +1475,44 @@ function Badge({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn(badgeClassName(variant), className), ...props });
 }
 function LauncherIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
-      fill: "none",
-      "aria-hidden": "true",
-      className: "blinq-launcher-agent",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "blinq-agent-orbit", cx: "12", cy: "12", r: "9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "blinq-agent-spark", cx: "18.6", cy: "8.2", r: "1.2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            className: "blinq-agent-antenna",
-            d: "M12 4.8V6.8",
-            stroke: "currentColor",
-            strokeWidth: "1.6",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "blinq-agent-antenna-dot", cx: "12", cy: "4.1", r: "1.1", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "rect",
-          {
-            className: "blinq-agent-head",
-            x: "7",
-            y: "7.4",
-            width: "10",
-            height: "9.2",
-            rx: "3.2",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "blinq-agent-eye", cx: "10.2", cy: "11.3", r: "0.9", fill: "#111111" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "blinq-agent-eye", cx: "13.8", cy: "11.3", r: "0.9", fill: "#111111" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            className: "blinq-agent-mouth",
-            d: "M10 14.2c.7.55 1.38.82 2 .82s1.3-.27 2-.82",
-            stroke: "#111111",
-            strokeWidth: "1.3",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            className: "blinq-agent-neck",
-            d: "M10.2 17.1h3.6",
-            stroke: "currentColor",
-            strokeWidth: "1.4",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bot, { "aria-hidden": "true", className: "blinq-launcher-icon", size: 30, strokeWidth: 1.7 });
+}
+function AssistantAvatar({
+  avatarUrl,
+  assistantName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-avatar", "aria-hidden": "true", children: [
+    avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: avatarUrl, alt: "", className: "blinq-avatar-image" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bot, { className: "blinq-avatar-icon", size: 24, strokeWidth: 1.8 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blinq-avatar-status" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blinq-avatar-label", children: assistantName.slice(0, 1) })
+  ] });
 }
 function CollapseIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) });
 }
 function MicrophoneIcon({ listening }) {
   if (listening) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "7", y: "7", width: "10", height: "10", rx: "2.5", fill: "currentColor" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "8.25", stroke: "currentColor", strokeWidth: "1.65" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "9.1", y: "9.1", width: "5.8", height: "5.8", rx: "1.6", fill: "currentColor" })
+    ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
-        d: "M12 3.75a2.75 2.75 0 0 1 2.75 2.75v5.25a2.75 2.75 0 1 1-5.5 0V6.5A2.75 2.75 0 0 1 12 3.75Z",
-        fill: "currentColor"
+        d: "M12 4.35a3.05 3.05 0 0 1 3.05 3.05v4.7a3.05 3.05 0 1 1-6.1 0V7.4A3.05 3.05 0 0 1 12 4.35Z",
+        stroke: "currentColor",
+        strokeWidth: "1.7"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
-        d: "M7.5 10.5a.75.75 0 0 1 .75.75a3.75 3.75 0 1 0 7.5 0a.75.75 0 0 1 1.5 0A5.25 5.25 0 0 1 12.75 16.4V18.5H15a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1 0-1.5h2.25v-2.1A5.25 5.25 0 0 1 6.75 11.25a.75.75 0 0 1 .75-.75Z",
-        fill: "currentColor"
+        d: "M7.95 11.35a4.05 4.05 0 1 0 8.1 0M12 16.45v3.2M9.2 19.65h5.6",
+        stroke: "currentColor",
+        strokeWidth: "1.7",
+        strokeLinecap: "round"
       }
     )
   ] });
@@ -1393,7 +1521,7 @@ function SendIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "path",
     {
-      d: "M5.5 12h11M12.5 5l6.5 7-6.5 7",
+      d: "M5.5 18.5 18.5 5.5M8.25 5.5h10.25v10.25",
       stroke: "currentColor",
       strokeWidth: "1.8",
       strokeLinecap: "round",
@@ -1555,7 +1683,7 @@ function VoiceWaveform({
   const waveform = samples.length > 0 ? samples : [0.18];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-recording-input", role: "status", "aria-live": "polite", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-recording-time", children: formatRecordingDuration(durationMs) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-recording-waveform", "aria-hidden": "true", children: waveform.map((sample, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-recording-wave-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-recording-waveform", "aria-hidden": "true", children: waveform.map((sample, index) => {
       const scale = Math.max(0.16, Math.min(1, sample));
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
@@ -1565,9 +1693,21 @@ function VoiceWaveform({
         },
         `voice-wave-${index}`
       );
-    }) })
+    }) }) })
   ] });
 }
+function planStepStatusLabel(step, isCurrent) {
+  if (step.status === "completed") {
+    return "\u0413\u043E\u0442\u043E\u0432\u043E";
+  }
+  if (step.status === "failed") {
+    return "\u041E\u0448\u0438\u0431\u043A\u0430";
+  }
+  if (step.status === "cancelled") {
+    return "\u041E\u0442\u043C\u0435\u043D\u0435\u043D\u043E";
+  }
+  return isCurrent ? "\u0421\u0435\u0439\u0447\u0430\u0441" : "\u0414\u0430\u043B\u0435\u0435";
+}
 function ActionCard({
   item,
   accentColor,
@@ -1597,9 +1737,6 @@ function ActionCard({
               {
                 type: "button",
                 onClick: onApprove,
-                style: {
-                  background: accentColor
-                },
                 children: "\u0412\u044B\u043F\u043E\u043B\u043D\u0438\u0442\u044C"
               }
             )
@@ -1615,17 +1752,17 @@ function PlanCard({
   onDecline
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { className: "blinq-action-card blinq-plan-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-plan-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "\u041F\u043B\u0430\u043D" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: item.goal })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: item.status === "completed" ? "default" : item.status === "failed" ? "outline" : "soft", children: item.status === "completed" ? "\u0413\u043E\u0442\u043E\u0432\u043E" : item.status === "failed" ? "\u041E\u0448\u0438\u0431\u043A\u0430" : item.status === "awaiting_navigation" ? "\u041F\u0435\u0440\u0435\u0445\u043E\u0434" : "\u0412 \u0440\u0430\u0431\u043E\u0442\u0435" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, { className: "blinq-plan-content", children: [
       item.progressLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-action-state", children: item.progressLabel }) : null,
       item.statusReason ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-card-description", children: item.statusReason }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: item.steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-plan-steps", children: item.steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           className: "blinq-plan-step",
@@ -1634,7 +1771,10 @@ function PlanCard({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blinq-plan-step-index", children: index + 1 }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-plan-step-copy", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: step.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-plan-step-title-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-plan-step-title", children: step.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blinq-plan-step-status-pill", children: planStepStatusLabel(step, index === item.currentStepIndex) })
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-plan-step-meta", children: step.status === "completed" ? "\u0412\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u043E" : step.status === "failed" ? "\u041E\u0448\u0438\u0431\u043A\u0430" : step.status === "cancelled" ? "\u041E\u0442\u043C\u0435\u043D\u0435\u043D\u043E" : index === item.currentStepIndex ? "\u0422\u0435\u043A\u0443\u0449\u0438\u0439 \u0448\u0430\u0433" : "\u041E\u0436\u0438\u0434\u0430\u0435\u0442" })
             ] })
           ]
@@ -1648,6 +1788,53 @@ function PlanCard({
     ] })
   ] });
 }
+function GuideCard({
+  guide,
+  onStartGuide,
+  onAdvanceGuide,
+  onDismissGuide,
+  onCompleteGuide,
+  onRunGuideStep
+}) {
+  const currentStep = guide.steps[Math.min(guide.currentStepIndex, Math.max(guide.steps.length - 1, 0))] ?? null;
+  const isStarted = guide.state === "started";
+  const isCompleted = guide.state === "completed";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { className: "blinq-guide-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-plan-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Guide \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: guide.summary || "\u041F\u043E\u0448\u0430\u0433\u043E\u0432\u0430\u044F \u043F\u043E\u043C\u043E\u0449\u044C \u043F\u043E \u0442\u0435\u043A\u0443\u0449\u0435\u043C\u0443 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: guide.source === "live" ? "soft" : "accent", children: guide.source === "live" ? "Live" : "Published" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { className: "blinq-guide-content", children: !isStarted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-card-description", children: "\u0410\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442 \u0443\u0436\u0435 \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u0438\u043B guide \u0434\u043B\u044F \u044D\u0442\u043E\u0439 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B \u0438 \u043C\u043E\u0436\u0435\u0442 \u043F\u0440\u043E\u0432\u0435\u0441\u0442\u0438 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F \u043F\u043E \u0448\u0430\u0433\u0430\u043C." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", variant: "outline", onClick: onDismissGuide, children: "\u0421\u043A\u0440\u044B\u0442\u044C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", onClick: onStartGuide, children: "\u041D\u0430\u0447\u0430\u0442\u044C guide" })
+      ] })
+    ] }) : currentStep && !isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-guide-step-shell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-guide-step-meta", children: [
+          "\u0428\u0430\u0433 ",
+          Math.min(guide.currentStepIndex + 1, guide.totalSteps),
+          " \u0438\u0437 ",
+          guide.totalSteps
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-guide-step-title", children: currentStep.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-guide-step-copy", children: currentStep.body })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", variant: "outline", onClick: onDismissGuide, children: "\u0421\u043A\u0440\u044B\u0442\u044C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", variant: "outline", onClick: onRunGuideStep, children: currentStep.actionKind ? "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C / \u0432\u044B\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u0448\u0430\u0433" : "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435" }),
+        guide.currentStepIndex + 1 >= guide.totalSteps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", onClick: onCompleteGuide, children: "\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", onClick: onAdvanceGuide, children: "\u0414\u0430\u043B\u044C\u0448\u0435" })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-card-description", children: "Guide \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043D. \u041C\u043E\u0436\u043D\u043E \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C \u0440\u0430\u0431\u043E\u0442\u0443 \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u0441\u0430\u043C\u043E\u0441\u0442\u043E\u044F\u0442\u0435\u043B\u044C\u043D\u043E." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", onClick: onDismissGuide, children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C" }) })
+    ] }) })
+  ] });
+}
 function AssistantConversationThread({
   items,
   showThinkingIndicator,
@@ -1724,34 +1911,52 @@ function WidgetEmbedShell({
   onApproveAction,
   onDeclineAction,
   onApprovePlan,
-  onDeclinePlan
+  onDeclinePlan,
+  onStartGuide,
+  onAdvanceGuide,
+  onDismissGuide,
+  onCompleteGuide,
+  onRunGuideStep
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       className: "blinq-shell",
       "data-side": state.side,
+      "data-theme": state.themeVariant,
       style: { ["--blinq-accent"]: state.accentColor },
       children: [
         !state.minimized ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-panel", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-header-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-header-copy", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-heading", children: state.assistantName }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Button,
-                {
-                  type: "button",
-                  size: "icon-sm",
-                  variant: "ghost",
-                  "aria-label": "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u0432\u0438\u0434\u0436\u0435\u0442",
-                  title: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u0432\u0438\u0434\u0436\u0435\u0442",
-                  onClick: onCollapse,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapseIcon, {})
-                }
-              )
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-header-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssistantAvatar, { avatarUrl: state.avatarUrl, assistantName: state.assistantName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blinq-header-copy", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-heading", children: state.assistantName }),
+              state.statusText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-status-line", children: state.statusText }) : null
             ] }),
-            state.statusText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-status-line", children: state.statusText }) : null
-          ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Button,
+              {
+                type: "button",
+                size: "icon-sm",
+                variant: "ghost",
+                "aria-label": "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u0432\u0438\u0434\u0436\u0435\u0442",
+                title: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u0432\u0438\u0434\u0436\u0435\u0442",
+                onClick: onCollapse,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapseIcon, {})
+              }
+            )
+          ] }) }),
+          state.guide ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            GuideCard,
+            {
+              guide: state.guide,
+              onStartGuide,
+              onAdvanceGuide,
+              onDismissGuide,
+              onCompleteGuide,
+              onRunGuideStep
+            }
+          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             AssistantConversationThread,
             {
@@ -1797,7 +2002,7 @@ function WidgetEmbedShell({
                   Input,
                   {
                     value: state.inputValue,
-                    placeholder: "\u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440: \u043D\u0430\u0439\u0434\u0438 \u043D\u0443\u0436\u043D\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443 \u0438\u043B\u0438 \u0437\u0430\u043F\u043E\u043B\u043D\u0438 \u0444\u043E\u0440\u043C\u0443",
+                    placeholder: "Type a message...",
                     onChange: (event) => onInputChange(event.currentTarget.value),
                     disabled: state.isSending
                   }
@@ -1816,7 +2021,8 @@ function WidgetEmbedShell({
                 )
               ] }) })
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blinq-powered", children: "POWERED BY BLINQ" })
         ] }) : null,
         state.minimized ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           Button,
@@ -1827,7 +2033,7 @@ function WidgetEmbedShell({
             "aria-label": `\u041E\u0442\u043A\u0440\u044B\u0442\u044C ${state.assistantName}`,
             title: `\u041E\u0442\u043A\u0440\u044B\u0442\u044C ${state.assistantName}`,
             onClick: onOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blinq-launcher-badge", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LauncherIcon, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LauncherIcon, {})
           }
         ) : null
       ]
@@ -2237,6 +2443,41 @@ var SESSION_STORAGE_PREFIX = "blinq-widget-session";
 var MAX_STORED_HISTORY = 30;
 var MAX_HISTORY_FOR_REQUEST = 12;
 var DEFAULT_GREETING = "Blinq \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D. \u0421\u043F\u0440\u043E\u0441\u0438\u0442\u0435 \u043F\u0440\u043E \u0442\u0435\u043A\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443, \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0443 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B \u0438\u043B\u0438 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0448\u0430\u0433.";
+var PLAN_APPROVE_TEXTS = /* @__PURE__ */ new Set([
+  "\u0434\u0430",
+  "\u0430\u0433\u0430",
+  "\u043E\u043A",
+  "okay",
+  "\u043E\u043A\u0435\u0439",
+  "\u0445\u043E\u0440\u043E\u0448\u043E",
+  "\u043B\u0430\u0434\u043D\u043E",
+  "\u0434\u0435\u043B\u0430\u0439",
+  "\u0441\u0434\u0435\u043B\u0430\u0439",
+  "\u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044E",
+  "yes",
+  "ok",
+  "sure",
+  "go ahead",
+  "approve",
+  "\u0438\u04D9",
+  "\u0438\u044F",
+  "\u0438\u0441\u0442\u0435",
+  "\u0436\u0430\u0440\u0430\u0439\u0434\u044B",
+  "\u043C\u0430\u049B\u04B1\u043B"
+]);
+var PLAN_DECLINE_TEXTS = /* @__PURE__ */ new Set([
+  "\u043D\u0435\u0442",
+  "\u043D\u0435 \u043D\u0430\u0434\u043E",
+  "\u043D\u0435 \u043D\u0443\u0436\u043D\u043E",
+  "\u043E\u0442\u043C\u0435\u043D\u0430",
+  "\u043E\u0442\u043C\u0435\u043D\u0438",
+  "cancel",
+  "no",
+  "stop",
+  "\u0436\u043E\u049B",
+  "\u0442\u043E\u049B\u0442\u0430",
+  "\u043A\u0435\u0440\u0435\u043A \u0435\u043C\u0435\u0441"
+]);
 function isBrowser3() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
@@ -2270,9 +2511,9 @@ function getOrCreateFingerprint() {
 }
 function runtimeMessage(mode) {
   if (mode === "read-only-fallback") {
-    return "\u0413\u043E\u0442\u043E\u0432 \u043E\u0431\u044A\u044F\u0441\u043D\u0438\u0442\u044C \u0442\u0435\u043A\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 \u0438 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u0430\u0442\u044C \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0448\u0430\u0433.";
+    return "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B. \u042F \u043C\u043E\u0433\u0443 \u043E\u0431\u044A\u044F\u0441\u043D\u044F\u0442\u044C \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043E\u0442\u0432\u0435\u0447\u0430\u0442\u044C \u043F\u043E \u0431\u0430\u0437\u0435 \u0437\u043D\u0430\u043D\u0438\u0439.";
   }
-  return "\u0413\u043E\u0442\u043E\u0432 \u043F\u043E\u043C\u043E\u0447\u044C \u0441 \u043E\u043D\u0431\u043E\u0440\u0434\u0438\u043D\u0433\u043E\u043C \u0438 \u0432\u043E\u043F\u0440\u043E\u0441\u0430\u043C\u0438 \u043F\u043E \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0435.";
+  return "\u0413\u043E\u0442\u043E\u0432 \u043F\u043E\u043C\u043E\u0433\u0430\u0442\u044C \u0441 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043E\u043C, \u0437\u043D\u0430\u043D\u0438\u044F\u043C\u0438 \u0438 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u043C\u0438 \u0448\u0430\u0433\u0430\u043C\u0438.";
 }
 function normalizedRouteFromUrl(value) {
   try {
@@ -2349,7 +2590,7 @@ var BlinqWidget = class {
   minimized = false;
   isSending = false;
   inputValue = "";
-  statusText = "\u041F\u0440\u043E\u0432\u0435\u0440\u044F\u0435\u043C \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B.";
+  statusText = "";
   voiceSupported = false;
   voiceListening = false;
   voiceWaveform = [];
@@ -2359,6 +2600,7 @@ var BlinqWidget = class {
   confirmResolve = null;
   confirmItemId = null;
   activeRun = null;
+  activeGuide = null;
   pendingAssistantIndicator = false;
   executedToolCounts = /* @__PURE__ */ new Map();
   lastAutoResumeKey = null;
@@ -2388,12 +2630,34 @@ var BlinqWidget = class {
     },
     onDeclinePlan: () => {
       void this.respondToPlan(false);
+    },
+    onStartGuide: () => {
+      void this.startGuide();
+    },
+    onAdvanceGuide: () => {
+      void this.advanceGuide();
+    },
+    onDismissGuide: () => {
+      void this.dismissGuide();
+    },
+    onCompleteGuide: () => {
+      void this.completeGuide();
+    },
+    onRunGuideStep: () => {
+      void this.runGuideStep();
     }
   };
   constructor(options) {
     this.options = options;
     this.apiBaseUrl = options.apiBaseUrl ?? DEFAULT_API_BASE_URL;
   }
+  currentActionPolicy() {
+    return this.runtimeStatus?.action_policy ?? {
+      actions_enabled: this.widgetConfig?.actions_enabled ?? true,
+      action_mode: this.widgetConfig?.action_mode ?? "execute_with_confirmation",
+      pointer_overlay_enabled: this.widgetConfig?.pointer_overlay_enabled ?? true
+    };
+  }
   async init() {
     await this.startSession();
     if (isBrowser3()) {
@@ -2403,8 +2667,10 @@ var BlinqWidget = class {
       this.render();
       this.setupVoiceInput();
       this.registry = new PageToolRegistry(this.confirmToolExecution.bind(this));
+      this.registry.setActionPolicy(this.currentActionPolicy());
       const nativeRegistered = await this.registry.registerNativeTools();
       this.syncRuntimeStatus(nativeRegistered);
+      this.syncGuideHighlight();
       if (this.shouldAutoResumeActiveRun()) {
         window.setTimeout(() => {
           void this.continueActiveRun();
@@ -2429,18 +2695,21 @@ var BlinqWidget = class {
   currentState() {
     return {
       minimized: this.minimized,
-      assistantName: this.widgetConfig?.ai_persona_name ?? "Blinq \u0410\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442",
+      assistantName: this.widgetConfig?.name ?? "Blinq \u0410\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442",
+      avatarUrl: this.widgetConfig?.avatar_url ?? null,
       runtimeLabel: "webmcp://embedded",
       statusText: this.statusText,
       showThinkingIndicator: this.pendingAssistantIndicator,
       inputValue: this.inputValue,
-      accentColor: "#111111",
+      accentColor: this.widgetConfig?.theme_color ?? "#111111",
+      themeVariant: "light",
       side: this.widgetConfig?.position === "bottom-left" ? "left" : "right",
       isSending: this.isSending,
       voiceSupported: this.voiceSupported,
       voiceListening: this.voiceListening,
       voiceWaveform: this.voiceWaveform,
       voiceDurationMs: this.voiceDurationMs,
+      guide: this.activeGuide,
       items: this.items
     };
   }
@@ -2483,6 +2752,7 @@ var BlinqWidget = class {
     this.sessionToken = payload.session_token;
     this.widgetConfig = payload.widget_config;
     this.activeRun = payload.active_run ?? null;
+    this.activeGuide = this.normalizeGuidePayload(payload.active_guide ?? payload.guide_offer ?? null);
     this.runtimeStatus = {
       ...payload.runtime,
       message: runtimeMessage(payload.runtime.mode)
@@ -2726,6 +2996,62 @@ var BlinqWidget = class {
       this.upsertPlanItem(this.activeRun);
     }
   }
+  normalizeGuideStep(step) {
+    return {
+      id: step.id,
+      position: step.position,
+      title: step.title,
+      body: step.body,
+      targetSelector: step.target_selector ?? null,
+      targetLabel: step.target_label ?? null,
+      actionKind: step.action_kind ?? null,
+      actionPayload: step.action_payload ?? null,
+      expectedRoute: step.expected_route ?? null,
+      completionMode: step.completion_mode
+    };
+  }
+  normalizeGuidePayload(payload) {
+    if (!payload) {
+      return null;
+    }
+    const guide = payload.guide;
+    return {
+      id: guide.id,
+      state: payload.state,
+      source: guide.source,
+      route: guide.route,
+      summary: guide.summary ?? null,
+      currentStepIndex: payload.state === "started" ? Math.min(payload.current_step_index, Math.max(guide.steps.length - 1, 0)) : payload.state === "completed" ? guide.steps.length : 0,
+      totalSteps: guide.steps.length,
+      steps: guide.steps.map((step) => this.normalizeGuideStep(step))
+    };
+  }
+  setGuideState(payload, options) {
+    const normalized = this.normalizeGuidePayload(payload);
+    if (options?.clearIfFinished !== false && normalized && (normalized.state === "dismissed" || normalized.state === "completed")) {
+      this.activeGuide = null;
+    } else {
+      this.activeGuide = normalized;
+    }
+    this.renderReactApp();
+    this.syncGuideHighlight();
+  }
+  currentGuideStep() {
+    if (!this.activeGuide || this.activeGuide.state !== "started") {
+      return null;
+    }
+    return this.activeGuide.steps[Math.min(this.activeGuide.currentStepIndex, Math.max(this.activeGuide.steps.length - 1, 0))] ?? null;
+  }
+  syncGuideHighlight() {
+    const step = this.currentGuideStep();
+    if (!step?.targetSelector || !this.registry) {
+      return;
+    }
+    this.registry.highlightTargets(
+      [{ selector: step.targetSelector, label: step.targetLabel || step.title }],
+      { interaction: step.actionKind ? "execute" : "explain", durationMs: 2100 }
+    );
+  }
   updateActionState(id, state) {
     this.items = this.items.map(
       (item) => item.type === "action" && item.id === id ? { ...item, state } : item
@@ -2739,8 +3065,24 @@ var BlinqWidget = class {
     const existingPlanItem = this.items.find(
       (item) => item.type === "plan" && item.id === this.planItemId(run.id)
     );
-    if (this.activeRun?.id && this.activeRun.id !== run.id) {
+    const isNewActiveRun = Boolean(this.activeRun?.id && this.activeRun.id !== run.id);
+    if (isNewActiveRun) {
       this.executedToolCounts.clear();
+      this.items = this.items.map((item) => {
+        if (item.type !== "plan" || item.id === this.planItemId(run.id)) {
+          return item;
+        }
+        if (item.status === "completed" || item.status === "failed" || item.status === "abandoned") {
+          return item;
+        }
+        return {
+          ...item,
+          status: "abandoned",
+          approvalState: "declined",
+          progressLabel: item.progressLabel ?? "\u041F\u043B\u0430\u043D \u0437\u0430\u043C\u0435\u043D\u0451\u043D \u043D\u043E\u0432\u044B\u043C \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C.",
+          statusReason: item.statusReason ?? "\u041F\u043B\u0430\u043D \u0437\u0430\u043C\u0435\u043D\u0451\u043D \u043D\u043E\u0432\u044B\u043C \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C."
+        };
+      });
     }
     this.activeRun = {
       ...run,
@@ -2824,7 +3166,7 @@ var BlinqWidget = class {
     if (!this.runtimeStatus) {
       return;
     }
-    const mode = nativeRegistered ? "native-webmcp-active" : this.registry?.canExecuteWriteTools() ? "blinq-page-tools-active" : "read-only-fallback";
+    const mode = nativeRegistered ? "native-webmcp-active" : this.registry ? "blinq-page-tools-active" : "read-only-fallback";
     this.runtimeStatus = {
       ...this.runtimeStatus,
       mode,
@@ -2838,6 +3180,124 @@ var BlinqWidget = class {
     this.statusText = text;
     this.renderReactApp();
   }
+  async guideRequest(path, body) {
+    if (!this.sessionToken) {
+      throw new Error("\u0421\u0435\u0441\u0441\u0438\u044F \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0435\u0449\u0451 \u043D\u0435 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0438\u0440\u043E\u0432\u0430\u043D\u0430");
+    }
+    const response = await fetch(`${this.apiBaseUrl}${path}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.sessionToken}`
+      },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const payload = await response.json().catch(() => ({}));
+      throw new Error(payload.detail ?? "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435 guide");
+    }
+    return await response.json();
+  }
+  async startGuide() {
+    if (!this.sessionId || !this.activeGuide) {
+      return;
+    }
+    const payload = await this.guideRequest("/pub/guide/start", {
+      session_id: this.sessionId,
+      guide_id: this.activeGuide.source === "published" ? this.activeGuide.id : null
+    });
+    this.setGuideState(payload, { clearIfFinished: false });
+    this.setStatus("Guide \u0437\u0430\u043F\u0443\u0449\u0435\u043D.");
+  }
+  async advanceGuide() {
+    if (!this.sessionId) {
+      return;
+    }
+    const payload = await this.guideRequest("/pub/guide/advance", {
+      session_id: this.sessionId
+    });
+    this.setGuideState(payload);
+    this.setStatus(payload.state === "completed" ? "Guide \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043D." : "\u041F\u0435\u0440\u0435\u0445\u043E\u0434\u0438\u043C \u043A \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u043C\u0443 \u0448\u0430\u0433\u0443.");
+  }
+  async dismissGuide() {
+    if (!this.sessionId) {
+      return;
+    }
+    const payload = await this.guideRequest("/pub/guide/dismiss", {
+      session_id: this.sessionId
+    });
+    this.setGuideState(payload);
+    this.setStatus("Guide \u0441\u043A\u0440\u044B\u0442.");
+  }
+  async completeGuide() {
+    if (!this.sessionId) {
+      return;
+    }
+    const payload = await this.guideRequest("/pub/guide/complete", {
+      session_id: this.sessionId
+    });
+    this.setGuideState(payload);
+    this.setStatus("Guide \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043D.");
+  }
+  async runGuideStep() {
+    const step = this.currentGuideStep();
+    if (!step || !this.registry) {
+      return;
+    }
+    if (step.actionKind && step.actionPayload && this.currentActionPolicy().actions_enabled && this.currentActionPolicy().action_mode === "execute_with_confirmation") {
+      const outcome = await this.registry.executeTool({
+        tool_name: step.actionKind,
+        display_name: step.title,
+        target_summary: step.targetLabel || step.body,
+        arguments: step.actionPayload
+      });
+      if (outcome.status === "success") {
+        this.setStatus("\u0428\u0430\u0433 \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435.");
+        const deferredNavigationHref = outcome.result && typeof outcome.result.href === "string" && outcome.result.deferred_navigation ? outcome.result.href : null;
+        await this.advanceGuide();
+        if (deferredNavigationHref) {
+          window.location.assign(deferredNavigationHref);
+        }
+      } else if (outcome.status === "cancelled") {
+        this.setStatus("\u0412\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435 \u0448\u0430\u0433\u0430 \u043E\u0442\u043C\u0435\u043D\u0435\u043D\u043E.");
+      } else {
+        await this.healGuideStep();
+      }
+      return;
+    }
+    if (step.targetSelector) {
+      const highlighted = this.registry.highlightTargets(
+        [{ selector: step.targetSelector, label: step.targetLabel || step.title }],
+        { interaction: "explain", durationMs: 2200 }
+      );
+      if (highlighted) {
+        this.setStatus("\u041F\u043E\u043A\u0430\u0437\u0430\u043B, \u043A\u0443\u0434\u0430 \u043D\u0430\u0436\u0430\u0442\u044C \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435.");
+      } else {
+        await this.healGuideStep();
+      }
+    }
+  }
+  async healGuideStep() {
+    if (!this.sessionId || !this.activeGuide || !this.registry) {
+      return;
+    }
+    this.setStatus("\u041A\u0430\u0436\u0435\u0442\u0441\u044F \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u043F\u0435\u0440\u0435\u0435\u0445\u0430\u043B. \u0418\u0449\u0443 \u043D\u043E\u0432\u044B\u0435 \u0441\u043F\u043E\u0441\u043E\u0431\u044B \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u0418\u0418...");
+    const pageContext = this.registry.collectPageContext();
+    try {
+      const payload = await this.guideRequest("/pub/guide/heal", {
+        session_id: this.sessionId,
+        step_index: this.activeGuide.currentStepIndex,
+        page_context: pageContext
+      });
+      this.setGuideState(payload, { clearIfFinished: false });
+      this.setStatus("\u0421\u0446\u0435\u043D\u0430\u0440\u0438\u0439 \u043F\u0435\u0440\u0435\u0441\u0442\u0440\u043E\u0435\u043D. \u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0430\u044E...");
+      window.setTimeout(() => {
+        void this.runGuideStep();
+      }, 1500);
+    } catch (e) {
+      this.setStatus("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043F\u0435\u0440\u0435\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0448\u0430\u0433.");
+    }
+  }
   appendMessage(text, role, options) {
     const id = createConversationId("message");
     this.items = [
@@ -2898,6 +3358,19 @@ var BlinqWidget = class {
   currentRoute() {
     return normalizedRouteFromUrl(window.location.href);
   }
+  normalizedUserPlanDecision(message) {
+    const normalized = message.trim().toLowerCase();
+    if (!normalized || !this.activeRun?.requires_approval) {
+      return null;
+    }
+    if (PLAN_APPROVE_TEXTS.has(normalized)) {
+      return true;
+    }
+    if (PLAN_DECLINE_TEXTS.has(normalized)) {
+      return false;
+    }
+    return null;
+  }
   shouldAutoResumeActiveRun() {
     if (!this.activeRun || this.activeRun.status !== "awaiting_navigation") {
       return false;
@@ -2996,7 +3469,13 @@ var BlinqWidget = class {
       }
       if (event === "highlight") {
         const highlight = JSON.parse(data);
-        this.registry?.highlightTargets(highlight.targets ?? []);
+        this.registry?.highlightTargets(highlight.targets ?? [], { interaction: "explain" });
+      }
+      if (event === "guide") {
+        this.hideThinkingIndicator();
+        this.setGuideState(JSON.parse(data), {
+          clearIfFinished: false
+        });
       }
       if (event === "delta" && payload.text) {
         const normalizedChunk = normalizeAssistantStreamChunk(finalText, payload.text);
@@ -3078,6 +3557,18 @@ var BlinqWidget = class {
     let responseMessageId = null;
     try {
       this.appendMessage(message, "user");
+      const directPlanDecision = this.normalizedUserPlanDecision(message);
+      if (directPlanDecision !== null) {
+        const finalText2 = await this.respondToPlan(directPlanDecision, {
+          appendAssistantMessage: false,
+          manageSendingState: false
+        });
+        if (finalText2.trim()) {
+          this.finalizeAssistantMessage(finalText2, { persist: false });
+          this.rememberMessage({ role: "assistant", text: finalText2 });
+        }
+        return finalText2;
+      }
       const finalText = await this.streamChatStep(
         "/pub/chat",
         {
@@ -3138,16 +3629,19 @@ var BlinqWidget = class {
       this.renderReactApp();
     }
   }
-  async respondToPlan(approved) {
+  async respondToPlan(approved, options) {
     if (!this.sessionId || !this.sessionToken || !this.activeRun) {
-      return;
+      return "";
     }
-    if (this.isSending) {
-      return;
+    const manageSendingState = options?.manageSendingState ?? true;
+    if (manageSendingState && this.isSending) {
+      return "";
+    }
+    if (manageSendingState) {
+      this.isSending = true;
+      this.showThinkingIndicator();
+      this.renderReactApp();
     }
-    this.isSending = true;
-    this.showThinkingIndicator();
-    this.renderReactApp();
     try {
       const finalText = await this.streamChatStep(
         "/pub/plan/approve",
@@ -3159,14 +3653,17 @@ var BlinqWidget = class {
         },
         null
       );
-      if (finalText.trim()) {
+      if (options?.appendAssistantMessage !== false && finalText.trim()) {
         this.finalizeAssistantMessage(finalText, { persist: false });
         this.rememberMessage({ role: "assistant", text: finalText });
       }
+      return finalText;
     } finally {
-      this.hideThinkingIndicator();
-      this.isSending = false;
-      this.renderReactApp();
+      if (manageSendingState) {
+        this.hideThinkingIndicator();
+        this.isSending = false;
+        this.renderReactApp();
+      }
     }
   }
   async endSession() {
@@ -3197,10 +3694,1257 @@ async function initFromConfig(config) {
 async function createBlinqWidget(options) {
   return init(options);
 }
+
+// src/embed-styles.ts
+var EMBED_WIDGET_STYLES = `
+  :host {
+    all: initial;
+    display: block;
+    position: static;
+    color-scheme: light;
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  button,
+  input {
+    font: inherit;
+  }
+
+  .blinq-shell {
+    position: fixed;
+    bottom: 24px;
+    z-index: 2147483647;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 432px;
+    max-width: calc(100vw - 24px);
+    pointer-events: none;
+    font-family:
+      "SF Pro Display",
+      "SF Pro Text",
+      "Inter",
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      sans-serif;
+    --blinq-accent: #111111;
+    --blinq-text: rgba(18, 18, 20, 0.96);
+    --blinq-text-soft: rgba(32, 34, 38, 0.82);
+    --blinq-text-muted: rgba(56, 60, 66, 0.58);
+    --blinq-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 243, 248, 0.52));
+    --blinq-glass-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(245, 247, 250, 0.62));
+    --blinq-glass-fill-dense: linear-gradient(180deg, rgba(249, 250, 252, 0.92), rgba(231, 235, 241, 0.66));
+    --blinq-glass-stroke: rgba(255, 255, 255, 0.68);
+    --blinq-glass-stroke-soft: rgba(255, 255, 255, 0.5);
+    --blinq-glass-edge: rgba(100, 109, 123, 0.14);
+    --blinq-shadow:
+      0 28px 80px rgba(155, 164, 180, 0.22),
+      0 10px 30px rgba(174, 182, 193, 0.18);
+    --blinq-shadow-soft:
+      0 14px 40px rgba(170, 177, 189, 0.18),
+      0 4px 14px rgba(202, 208, 216, 0.18);
+    --blinq-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
+    --blinq-blur: blur(28px) saturate(170%);
+    --blinq-radius-panel: 32px;
+    --blinq-radius-pill: 999px;
+    --blinq-radius-bubble: 28px;
+    --blinq-radius-card: 30px;
+  }
+
+  .blinq-shell[data-side="left"] {
+    left: 24px;
+    align-items: flex-start;
+  }
+
+  .blinq-shell[data-side="right"] {
+    right: 24px;
+    align-items: flex-end;
+  }
+
+  .blinq-panel,
+  .blinq-launcher {
+    pointer-events: auto;
+  }
+
+  .blinq-shell {
+    width: 520px;
+  }
+
+  .blinq-panel {
+    position: relative;
+    width: 100%;
+    max-width: 432px;
+    overflow: hidden;
+    border-radius: var(--blinq-radius-panel);
+    border: 1px solid var(--blinq-glass-stroke);
+    background: var(--blinq-glass-fill);
+    box-shadow: var(--blinq-shadow);
+    backdrop-filter: var(--blinq-blur);
+    -webkit-backdrop-filter: var(--blinq-blur);
+  }
+
+  .blinq-panel::before,
+  .blinq-launcher::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--blinq-inner-highlight);
+  }
+
+  .blinq-launcher::after {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    pointer-events: none;
+    border-radius: inherit;
+    background:
+      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.82), transparent 32%),
+      linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent 55%);
+    opacity: 0.88;
+    transition:
+      opacity 180ms ease;
+  }
+
+  .blinq-panel::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    background:
+      radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 34%),
+      radial-gradient(circle at bottom center, rgba(255, 255, 255, 0.26), transparent 38%);
+    opacity: 0.95;
+  }
+
+  .blinq-header,
+  .blinq-thread,
+  .blinq-composer {
+    position: relative;
+    z-index: 1;
+  }
+
+  .blinq-header {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 18px 18px 10px;
+  }
+
+  .blinq-header-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .blinq-header-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .blinq-heading {
+    font-size: 17px;
+    line-height: 1.15;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: var(--blinq-text);
+  }
+
+  .blinq-status-line {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    max-width: fit-content;
+    min-height: 32px;
+    padding: 0 12px;
+    border-radius: var(--blinq-radius-pill);
+    border: 1px solid var(--blinq-glass-stroke-soft);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(242, 244, 248, 0.46));
+    color: var(--blinq-text-soft);
+    font-size: 12px;
+    line-height: 1.35;
+    box-shadow: var(--blinq-shadow-soft);
+    backdrop-filter: blur(22px) saturate(170%);
+    -webkit-backdrop-filter: blur(22px) saturate(170%);
+  }
+
+  .blinq-status-line::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: rgba(17, 17, 17, 0.74);
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.34);
+    flex: none;
+  }
+
+  .blinq-launcher {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 76px;
+    min-width: 76px;
+    height: 76px;
+    padding: 0;
+    border-radius: 999px;
+    border: 1px solid var(--blinq-glass-stroke);
+    background: var(--blinq-glass-fill-strong);
+    box-shadow: var(--blinq-shadow-soft);
+    backdrop-filter: blur(26px) saturate(175%);
+    -webkit-backdrop-filter: blur(26px) saturate(175%);
+    color: var(--blinq-text);
+    isolation: isolate;
+  }
+
+  .blinq-launcher:hover {
+    border-color: var(--blinq-glass-stroke);
+    box-shadow: var(--blinq-shadow-soft);
+  }
+
+  .blinq-launcher-icon-only {
+    border-radius: 999px;
+  }
+
+  .blinq-launcher-icon {
+    position: relative;
+    z-index: 1;
+    width: 30px;
+    height: 30px;
+    color: rgba(17, 17, 17, 0.96);
+    opacity: 1;
+    filter:
+      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.66))
+      drop-shadow(0 2px 6px rgba(17, 17, 17, 0.08));
+  }
+
+  .blinq-thread {
+    min-height: 0;
+  }
+
+  .blinq-thread-viewport {
+    width: 100%;
+  }
+
+  .blinq-scroll {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    max-height: 432px;
+    padding: 6px 18px 14px;
+    overflow-y: auto;
+  }
+
+  .blinq-scroll::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .blinq-scroll::-webkit-scrollbar-thumb {
+    background: rgba(144, 151, 162, 0.22);
+    border-radius: 999px;
+  }
+
+  .blinq-message {
+    position: relative;
+    max-width: 88%;
+    padding: 14px 16px;
+    border-radius: var(--blinq-radius-bubble);
+    border: 1px solid var(--blinq-glass-stroke-soft);
+    background: var(--blinq-glass-fill-strong);
+    color: var(--blinq-text);
+    font-size: 14px;
+    line-height: 1.55;
+    white-space: pre-wrap;
+    box-shadow: var(--blinq-shadow-soft);
+    backdrop-filter: blur(24px) saturate(170%);
+    -webkit-backdrop-filter: blur(24px) saturate(170%);
+  }
+
+  .blinq-message::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: var(--blinq-inner-highlight);
+  }
+
+  .blinq-message[data-role="assistant"] {
+    align-self: flex-start;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(241, 244, 249, 0.58));
+  }
+
+  .blinq-message[data-role="user"] {
+    align-self: flex-end;
+    background: linear-gradient(180deg, rgba(249, 250, 252, 0.94), rgba(227, 232, 238, 0.66));
+    border-color: rgba(255, 255, 255, 0.74);
+  }
+
+  .blinq-message[data-kind="artifact"] {
+    width: 100%;
+    max-width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .blinq-message[data-kind="artifact"]::before {
+    display: none;
+  }
+
+  .blinq-message-copy {
+    display: block;
+  }
+
+  .blinq-message-copy-reveal {
+    animation: blinq-copy-reveal 240ms cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: opacity, transform;
+  }
+
+  .blinq-thinking-card {
+    max-width: fit-content;
+    padding-right: 18px;
+  }
+
+  .blinq-thinking {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--blinq-text-soft);
+    font-size: 13px;
+  }
+
+  .blinq-thinking-dots {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .blinq-thinking-dots > span {
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(17, 17, 17, 0.74);
+    animation: blinq-thinking-pulse 1.2s ease-in-out infinite;
+  }
+
+  .blinq-thinking-dots > span:nth-child(2) {
+    animation-delay: 100ms;
+  }
+
+  .blinq-thinking-dots > span:nth-child(3) {
+    animation-delay: 200ms;
+  }
+
+  .blinq-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    border-radius: var(--blinq-radius-card);
+    border: 1px solid var(--blinq-glass-stroke-soft);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 243, 248, 0.52));
+    color: var(--blinq-text);
+    box-shadow: var(--blinq-shadow-soft);
+    backdrop-filter: blur(26px) saturate(170%);
+    -webkit-backdrop-filter: blur(26px) saturate(170%);
+  }
+
+  .blinq-card-header {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px 16px 0;
+  }
+
+  .blinq-card-title {
+    font-size: 15px;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--blinq-text);
+  }
+
+  .blinq-card-description {
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-card-content {
+    padding: 0 16px 16px;
+  }
+
+  .blinq-action-card,
+  .blinq-plan-card,
+  .blinq-guide-card {
+    align-self: stretch;
+  }
+
+  .blinq-guide-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .blinq-guide-step-shell {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px;
+    border-radius: 22px;
+    border: 1px solid rgba(255, 255, 255, 0.64);
+    background:
+      radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 42%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(242, 245, 249, 0.56));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.94),
+      0 10px 22px rgba(183, 191, 201, 0.13);
+  }
+
+  .blinq-guide-step-meta {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--blinq-text-soft);
+  }
+
+  .blinq-guide-step-title {
+    font-size: 14px;
+    line-height: 1.35;
+    font-weight: 600;
+    color: var(--blinq-text);
+  }
+
+  .blinq-guide-step-copy {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-plan-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 13px;
+    margin-top: 10px;
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.62);
+    background:
+      radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 38%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(238, 242, 247, 0.54));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.94),
+      0 8px 20px rgba(189, 196, 206, 0.12);
+  }
+
+  .blinq-plan-step:first-child {
+    margin-top: 0;
+  }
+
+  .blinq-plan-step-index {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 243, 247, 0.62));
+    color: rgba(17, 17, 17, 0.82);
+    font-size: 11px;
+    font-weight: 700;
+    flex: none;
+  }
+
+  .blinq-plan-step-copy {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    color: var(--blinq-text);
+    font-size: 13px;
+    flex: 1;
+  }
+
+  .blinq-plan-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .blinq-plan-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .blinq-plan-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .blinq-plan-step-title-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .blinq-plan-step-title {
+    min-width: 0;
+    font-size: 13px;
+    line-height: 1.4;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  .blinq-plan-step-status-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.58);
+    background: rgba(255, 255, 255, 0.58);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
+    color: var(--blinq-text-soft);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+  }
+
+  .blinq-plan-step-meta {
+    font-size: 12px;
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-plan-step[data-current="true"] {
+    background:
+      radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 40%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 246, 250, 0.64));
+    border-color: rgba(255, 255, 255, 0.74);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.96),
+      0 12px 26px rgba(183, 191, 201, 0.15);
+  }
+
+  .blinq-plan-step[data-current="true"] .blinq-plan-step-index {
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.48);
+  }
+
+  .blinq-plan-step[data-current="true"] .blinq-plan-step-status-pill {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 243, 247, 0.66));
+    color: var(--blinq-text);
+  }
+
+  .blinq-plan-step[data-status="completed"] .blinq-plan-step-index {
+    background: rgba(227, 232, 237, 0.88);
+  }
+
+  .blinq-plan-step[data-status="completed"] .blinq-plan-step-status-pill {
+    background: rgba(244, 246, 249, 0.78);
+  }
+
+  .blinq-plan-step[data-status="failed"],
+  .blinq-plan-step[data-status="cancelled"] {
+    opacity: 0.72;
+  }
+
+  .blinq-action-meta-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .blinq-action-details {
+    margin-top: 8px;
+  }
+
+  .blinq-action-details > summary {
+    display: inline-flex;
+    align-items: center;
+    min-height: 34px;
+    padding: 0 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.56);
+    background: rgba(255, 255, 255, 0.46);
+    color: var(--blinq-text-soft);
+    font-size: 12px;
+    font-weight: 600;
+    list-style: none;
+    cursor: pointer;
+  }
+
+  .blinq-action-details > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .blinq-code {
+    margin-top: 10px;
+    padding: 12px 14px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.56);
+    background: rgba(255, 255, 255, 0.52);
+    color: var(--blinq-text-soft);
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+
+  .blinq-action-state {
+    margin-top: 12px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-action-state[data-state="approved"] {
+    color: var(--blinq-text-soft);
+  }
+
+  .blinq-action-state[data-state="declined"] {
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 14px;
+  }
+
+  .blinq-actions > * {
+    flex: 1;
+  }
+
+  .blinq-badge-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 30px;
+    padding: 0 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.54);
+    background: rgba(255, 255, 255, 0.46);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--blinq-text-soft);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
+  }
+
+  .blinq-badge-pill-default {
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .blinq-badge-pill-outline {
+    background: rgba(247, 248, 250, 0.34);
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-badge-pill-soft {
+    background: rgba(255, 255, 255, 0.68);
+    color: var(--blinq-text-soft);
+  }
+
+  .blinq-badge-pill-accent {
+    background: rgba(243, 245, 249, 0.84);
+    color: var(--blinq-text);
+  }
+
+  .blinq-composer {
+    padding: 8px 18px 18px;
+  }
+
+  .blinq-composer-controls {
+    display: flex;
+  }
+
+  .blinq-input-shell {
+    position: relative;
+    width: 100%;
+  }
+
+  .blinq-input,
+  .blinq-recording-input {
+    width: 100%;
+    min-width: 0;
+    height: 58px;
+    padding: 0 54px 0 54px;
+    border-radius: 999px;
+    border: 1px solid var(--blinq-glass-stroke);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(239, 242, 247, 0.54));
+    color: var(--blinq-text);
+    box-shadow:
+      var(--blinq-inner-highlight),
+      0 10px 26px rgba(183, 189, 198, 0.16);
+    font-size: 13px;
+    outline: none;
+    backdrop-filter: blur(22px) saturate(170%);
+    -webkit-backdrop-filter: blur(22px) saturate(170%);
+  }
+
+  .blinq-input::placeholder {
+    color: var(--blinq-text-muted);
+  }
+
+  .blinq-recording-input {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .blinq-recording-time {
+    flex: none;
+    min-width: 42px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--blinq-text-soft);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .blinq-recording-wave-shell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 30px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.54);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(242, 245, 248, 0.34));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
+    overflow: hidden;
+  }
+
+  .blinq-recording-wave-shell::before {
+    content: "";
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    top: 50%;
+    height: 1px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.12), transparent);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .blinq-recording-waveform {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .blinq-recording-waveform-bar {
+    width: 4px;
+    min-width: 4px;
+    height: 62%;
+    border-radius: 999px;
+    background: linear-gradient(180deg, rgba(17, 17, 17, 0.14), rgba(17, 17, 17, 0.36));
+    transform-origin: center;
+    transition:
+      transform 120ms ease,
+      opacity 160ms ease;
+    opacity: 0.92;
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.26),
+      0 2px 8px rgba(17, 17, 17, 0.08);
+  }
+
+  .blinq-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    color: var(--blinq-text);
+    font-size: 14px;
+    font-weight: 600;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(236, 239, 244, 0.5));
+    box-shadow: var(--blinq-shadow-soft);
+    backdrop-filter: blur(20px) saturate(170%);
+    -webkit-backdrop-filter: blur(20px) saturate(170%);
+    transition:
+      transform 160ms ease,
+      box-shadow 180ms ease,
+      border-color 180ms ease,
+      background 180ms ease,
+      opacity 120ms ease;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .blinq-button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    border-color: rgba(255, 255, 255, 0.82);
+    box-shadow:
+      0 14px 28px rgba(175, 181, 191, 0.22),
+      0 4px 10px rgba(189, 195, 204, 0.16);
+  }
+
+  .blinq-input-mic:hover:not(:disabled),
+  .blinq-input-send:hover:not(:disabled) {
+    transform: translateY(-50%);
+    border-color: rgba(255, 255, 255, 0.82);
+    box-shadow:
+      0 14px 28px rgba(175, 181, 191, 0.16),
+      0 4px 10px rgba(189, 195, 204, 0.12);
+  }
+
+  .blinq-button:disabled {
+    opacity: 0.52;
+    cursor: not-allowed;
+  }
+
+  .blinq-button:focus-visible,
+  .blinq-input:focus-visible {
+    box-shadow:
+      0 0 0 3px rgba(255, 255, 255, 0.68),
+      0 0 0 6px rgba(17, 17, 17, 0.08);
+  }
+
+  .blinq-button-default {
+    border-color: rgba(255, 255, 255, 0.74);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(237, 241, 247, 0.66));
+    color: var(--blinq-text);
+  }
+
+  .blinq-button-outline,
+  .blinq-button-ghost {
+    border-color: rgba(255, 255, 255, 0.58);
+    background: rgba(255, 255, 255, 0.42);
+    color: var(--blinq-text-soft);
+  }
+
+  .blinq-button-destructive {
+    border-color: rgba(255, 255, 255, 0.58);
+    background: linear-gradient(180deg, rgba(248, 249, 251, 0.7), rgba(230, 233, 239, 0.54));
+    color: var(--blinq-text);
+  }
+
+  .blinq-button-md {
+    height: 44px;
+    padding: 0 16px;
+  }
+
+  .blinq-button-sm {
+    height: 38px;
+    padding: 0 13px;
+    font-size: 13px;
+  }
+
+  .blinq-button-icon {
+    width: 48px;
+    height: 48px;
+    padding: 0;
+  }
+
+  .blinq-button-icon-sm {
+    width: 38px;
+    height: 38px;
+    padding: 0;
+  }
+
+  .blinq-input-mic,
+  .blinq-input-send {
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    width: 42px;
+    height: 42px;
+    min-width: 42px;
+    transform: translateY(-50%);
+  }
+
+  .blinq-input-mic {
+    left: 8px;
+  }
+
+  .blinq-input-send {
+    right: 8px;
+  }
+
+  .blinq-panel {
+    display: flex;
+    flex-direction: column;
+    height: min(720px, calc(100vh - 64px));
+    max-width: 520px;
+    border: 1px solid rgba(226, 232, 240, 0.96);
+    border-radius: 30px;
+    background: #ffffff;
+    box-shadow:
+      0 28px 80px rgba(15, 23, 42, 0.14),
+      0 10px 28px rgba(15, 23, 42, 0.08);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .blinq-panel::before,
+  .blinq-panel::after,
+  .blinq-message::before,
+  .blinq-status-line::before {
+    display: none;
+  }
+
+  .blinq-header {
+    flex: none;
+    gap: 0;
+    padding: 22px 24px 18px;
+    border-bottom: 1px solid rgba(226, 232, 240, 0.86);
+    background: #ffffff;
+  }
+
+  .blinq-header-row {
+    align-items: center;
+    gap: 14px;
+  }
+
+  .blinq-header-copy {
+    gap: 5px;
+  }
+
+  .blinq-heading {
+    font-size: 22px;
+    line-height: 1.05;
+    font-weight: 700;
+    letter-spacing: -0.04em;
+    color: #111827;
+  }
+
+  .blinq-status-line {
+    display: block;
+    max-width: 100%;
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    color: #6b7280;
+    font-size: 13px;
+    line-height: 1.35;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .blinq-avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    min-width: 64px;
+    height: 64px;
+    overflow: visible;
+    border: 1px solid rgba(226, 232, 240, 0.95);
+    border-radius: 999px;
+    background:
+      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.86)),
+      #ffffff;
+    box-shadow:
+      0 14px 26px rgba(15, 23, 42, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    color: #111827;
+    flex: none;
+  }
+
+  .blinq-avatar-image {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+
+  .blinq-avatar-icon {
+    color: #111827;
+  }
+
+  .blinq-avatar-status {
+    position: absolute;
+    right: 5px;
+    bottom: 6px;
+    width: 11px;
+    height: 11px;
+    border: 2px solid #ffffff;
+    border-radius: 999px;
+    background: #21d262;
+    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04);
+  }
+
+  .blinq-avatar-label {
+    display: none;
+  }
+
+  .blinq-thread {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    background: #ffffff;
+  }
+
+  .blinq-thread-viewport {
+    flex: 1 1 auto;
+    height: 100%;
+  }
+
+  .blinq-scroll {
+    flex: 1 1 auto;
+    gap: 12px;
+    max-height: none;
+    min-height: 0;
+    padding: 30px 24px 20px;
+    background: #ffffff;
+  }
+
+  .blinq-message {
+    max-width: 82%;
+    padding: 10px 15px;
+    border: 1px solid rgba(226, 232, 240, 0.96);
+    border-radius: 18px;
+    background: #ffffff;
+    box-shadow: none;
+    color: #111827;
+    font-size: 15px;
+    line-height: 1.48;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .blinq-message[data-role="assistant"] {
+    background: #ffffff;
+  }
+
+  .blinq-message[data-role="user"] {
+    border-color: rgba(209, 213, 219, 0.96);
+    background: #f8fafc;
+  }
+
+  .blinq-card,
+  .blinq-guide-step-shell,
+  .blinq-plan-step {
+    border-color: rgba(226, 232, 240, 0.92);
+    background: #ffffff;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .blinq-composer {
+    flex: none;
+    padding: 18px 24px 8px;
+    border-top: 1px solid rgba(226, 232, 240, 0.86);
+    background: #ffffff;
+  }
+
+  .blinq-input,
+  .blinq-recording-input {
+    height: 56px;
+    padding: 0 60px 0 54px;
+    border: 1px solid rgba(209, 213, 219, 0.92);
+    border-radius: 999px;
+    background: #ffffff;
+    box-shadow: none;
+    color: #111827;
+    font-size: 15px;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .blinq-input::placeholder {
+    color: #9ca3af;
+  }
+
+  .blinq-input-mic {
+    left: 7px;
+    width: 42px;
+    min-width: 42px;
+    height: 42px;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    color: #6b7280;
+  }
+
+  .blinq-input-send {
+    right: 7px;
+    width: 42px;
+    min-width: 42px;
+    height: 42px;
+    border: 0;
+    background: #6b6f76;
+    box-shadow: none;
+    color: #ffffff;
+  }
+
+  .blinq-input-send:hover:not(:disabled) {
+    transform: translateY(-50%);
+    background: #4b5563;
+    box-shadow: none;
+  }
+
+  .blinq-button-ghost {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .blinq-powered {
+    flex: none;
+    padding: 0 24px 18px;
+    color: #c0c4ca;
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.16em;
+    line-height: 1;
+    text-align: center;
+  }
+
+  @keyframes blinq-thinking-pulse {
+    0%, 100% {
+      opacity: 0.28;
+      transform: translateY(0);
+    }
+
+    50% {
+      opacity: 1;
+      transform: translateY(-1.5px);
+    }
+  }
+
+  @keyframes blinq-copy-reveal {
+    0% {
+      opacity: 0;
+      transform: translateY(3px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes blinq-orbit-drift {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes blinq-orbit-pulse {
+    0%, 100% {
+      transform: scale(1);
+      opacity: 0.9;
+    }
+
+    50% {
+      transform: scale(1.16);
+      opacity: 1;
+    }
+  }
+
+  @keyframes blinq-core-breathe {
+    0%, 100% {
+      transform: scale(1);
+    }
+
+    50% {
+      transform: scale(1.04);
+    }
+  }
+
+  @media (max-width: 720px) {
+    .blinq-shell {
+      right: 12px;
+      left: 12px;
+      bottom: 12px;
+      width: auto;
+      max-width: none;
+      align-items: stretch;
+    }
+
+    .blinq-shell[data-side="left"],
+    .blinq-shell[data-side="right"] {
+      right: 12px;
+      left: 12px;
+      align-items: stretch;
+    }
+
+    .blinq-panel,
+    .blinq-launcher {
+      width: 100%;
+      max-width: none;
+    }
+
+    .blinq-launcher {
+      width: 76px;
+      min-width: 76px;
+      height: 76px;
+      align-self: flex-end;
+    }
+
+    .blinq-message {
+      max-width: 92%;
+    }
+
+    .blinq-actions {
+      flex-direction: column;
+    }
+
+    .blinq-input,
+    .blinq-recording-input {
+      height: 56px;
+    }
+
+    .blinq-panel {
+      height: min(700px, calc(100vh - 24px));
+    }
+  }
+`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BlinqWidget,
+  EMBED_WIDGET_STYLES,
+  PageToolRegistry,
+  WidgetEmbedShell,
+  collectNormalizedPageContext,
   createBlinqWidget,
+  detectNativeWebMcpSupport,
   init,
   initFromConfig
 });