@skippr/live-agent-sdk 0.47.0 → 0.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
8
8
|
|
|
9
9
|
// src/components/LiveAgent.tsx
|
|
10
10
|
import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
|
|
11
|
-
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useRef as
|
|
11
|
+
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef16, useState as useState16 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/context/LiveAgentContext.tsx
|
|
14
14
|
import { createContext } from "react";
|
|
@@ -691,6 +691,27 @@ var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
|
691
691
|
var TEXT_MODE_TOPIC = "skippr.text-mode";
|
|
692
692
|
var NAME_MAX_CHARS = 80;
|
|
693
693
|
|
|
694
|
+
// src/lib/launcher.ts
|
|
695
|
+
var DEFAULT_LAUNCHER_BOTTOM_PX = 48;
|
|
696
|
+
var LAUNCHER_HEIGHT_PX = 50;
|
|
697
|
+
var SESSION_BAR_CLEARANCE_PX = 76;
|
|
698
|
+
var TRIGGER_HEIGHT_PX = 48;
|
|
699
|
+
var IDLE_TRIGGER_CLEARANCE_PX = TRIGGER_HEIGHT_PX + 16;
|
|
700
|
+
var TRIGGER_LAUNCHER_OFFSET_PX = 24;
|
|
701
|
+
var VIEWPORT_MARGIN_PX = 12;
|
|
702
|
+
function triggerBottomPx(launcherBottomPx, popsDown) {
|
|
703
|
+
if (popsDown)
|
|
704
|
+
return launcherBottomPx;
|
|
705
|
+
return Math.max(VIEWPORT_MARGIN_PX, launcherBottomPx - TRIGGER_LAUNCHER_OFFSET_PX);
|
|
706
|
+
}
|
|
707
|
+
function clampLauncherBottom(px) {
|
|
708
|
+
const maxBottom = window.innerHeight - LAUNCHER_HEIGHT_PX - VIEWPORT_MARGIN_PX;
|
|
709
|
+
return Math.round(Math.min(Math.max(px, VIEWPORT_MARGIN_PX), maxBottom));
|
|
710
|
+
}
|
|
711
|
+
function launcherPopsDown(bottomPx) {
|
|
712
|
+
return bottomPx + LAUNCHER_HEIGHT_PX / 2 > window.innerHeight / 2;
|
|
713
|
+
}
|
|
714
|
+
|
|
694
715
|
// src/lib/agentMode.ts
|
|
695
716
|
var AGENT_MODE = {
|
|
696
717
|
Standard: "standard",
|
|
@@ -1815,8 +1836,16 @@ var __iconNode10 = [
|
|
|
1815
1836
|
["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
|
|
1816
1837
|
];
|
|
1817
1838
|
var Mail = createLucideIcon("mail", __iconNode10);
|
|
1818
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/
|
|
1839
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/maximize-2.js
|
|
1819
1840
|
var __iconNode11 = [
|
|
1841
|
+
["path", { d: "M15 3h6v6", key: "1q9fwt" }],
|
|
1842
|
+
["path", { d: "m21 3-7 7", key: "1l2asr" }],
|
|
1843
|
+
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
1844
|
+
["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
|
|
1845
|
+
];
|
|
1846
|
+
var Maximize2 = createLucideIcon("maximize-2", __iconNode11);
|
|
1847
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
|
|
1848
|
+
var __iconNode12 = [
|
|
1820
1849
|
[
|
|
1821
1850
|
"path",
|
|
1822
1851
|
{
|
|
@@ -1825,9 +1854,9 @@ var __iconNode11 = [
|
|
|
1825
1854
|
}
|
|
1826
1855
|
]
|
|
1827
1856
|
];
|
|
1828
|
-
var MessageCircle = createLucideIcon("message-circle",
|
|
1857
|
+
var MessageCircle = createLucideIcon("message-circle", __iconNode12);
|
|
1829
1858
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-square.js
|
|
1830
|
-
var
|
|
1859
|
+
var __iconNode13 = [
|
|
1831
1860
|
[
|
|
1832
1861
|
"path",
|
|
1833
1862
|
{
|
|
@@ -1836,9 +1865,9 @@ var __iconNode12 = [
|
|
|
1836
1865
|
}
|
|
1837
1866
|
]
|
|
1838
1867
|
];
|
|
1839
|
-
var MessageSquare = createLucideIcon("message-square",
|
|
1868
|
+
var MessageSquare = createLucideIcon("message-square", __iconNode13);
|
|
1840
1869
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
|
|
1841
|
-
var
|
|
1870
|
+
var __iconNode14 = [
|
|
1842
1871
|
["path", { d: "M12 19v3", key: "npa21l" }],
|
|
1843
1872
|
["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
|
|
1844
1873
|
["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
|
|
@@ -1846,40 +1875,40 @@ var __iconNode13 = [
|
|
|
1846
1875
|
["path", { d: "m2 2 20 20", key: "1ooewy" }],
|
|
1847
1876
|
["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
|
|
1848
1877
|
];
|
|
1849
|
-
var MicOff = createLucideIcon("mic-off",
|
|
1878
|
+
var MicOff = createLucideIcon("mic-off", __iconNode14);
|
|
1850
1879
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
|
|
1851
|
-
var
|
|
1880
|
+
var __iconNode15 = [
|
|
1852
1881
|
["path", { d: "M12 19v3", key: "npa21l" }],
|
|
1853
1882
|
["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
|
|
1854
1883
|
["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
|
|
1855
1884
|
];
|
|
1856
|
-
var Mic = createLucideIcon("mic",
|
|
1885
|
+
var Mic = createLucideIcon("mic", __iconNode15);
|
|
1857
1886
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
|
|
1858
|
-
var
|
|
1887
|
+
var __iconNode16 = [
|
|
1859
1888
|
["path", { d: "m14 10 7-7", key: "oa77jy" }],
|
|
1860
1889
|
["path", { d: "M20 10h-6V4", key: "mjg0md" }],
|
|
1861
1890
|
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
1862
1891
|
["path", { d: "M4 14h6v6", key: "rmj7iw" }]
|
|
1863
1892
|
];
|
|
1864
|
-
var Minimize2 = createLucideIcon("minimize-2",
|
|
1893
|
+
var Minimize2 = createLucideIcon("minimize-2", __iconNode16);
|
|
1865
1894
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
|
|
1866
|
-
var
|
|
1895
|
+
var __iconNode17 = [
|
|
1867
1896
|
["path", { d: "M12 17v4", key: "1riwvh" }],
|
|
1868
1897
|
["path", { d: "M17 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.184-1.826", key: "cv7jms" }],
|
|
1869
1898
|
["path", { d: "m2 2 20 20", key: "1ooewy" }],
|
|
1870
1899
|
["path", { d: "M8 21h8", key: "1ev6f3" }],
|
|
1871
1900
|
["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v10a2 2 0 0 1-.293 1.042", key: "z8ni2w" }]
|
|
1872
1901
|
];
|
|
1873
|
-
var MonitorOff = createLucideIcon("monitor-off",
|
|
1902
|
+
var MonitorOff = createLucideIcon("monitor-off", __iconNode17);
|
|
1874
1903
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
|
|
1875
|
-
var
|
|
1904
|
+
var __iconNode18 = [
|
|
1876
1905
|
["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
|
|
1877
1906
|
["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
|
|
1878
1907
|
["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
|
|
1879
1908
|
];
|
|
1880
|
-
var Monitor = createLucideIcon("monitor",
|
|
1909
|
+
var Monitor = createLucideIcon("monitor", __iconNode18);
|
|
1881
1910
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.js
|
|
1882
|
-
var
|
|
1911
|
+
var __iconNode19 = [
|
|
1883
1912
|
[
|
|
1884
1913
|
"path",
|
|
1885
1914
|
{
|
|
@@ -1888,9 +1917,9 @@ var __iconNode18 = [
|
|
|
1888
1917
|
}
|
|
1889
1918
|
]
|
|
1890
1919
|
];
|
|
1891
|
-
var MousePointer2 = createLucideIcon("mouse-pointer-2",
|
|
1920
|
+
var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode19);
|
|
1892
1921
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
|
|
1893
|
-
var
|
|
1922
|
+
var __iconNode20 = [
|
|
1894
1923
|
[
|
|
1895
1924
|
"path",
|
|
1896
1925
|
{
|
|
@@ -1900,13 +1929,13 @@ var __iconNode19 = [
|
|
|
1900
1929
|
],
|
|
1901
1930
|
["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
|
|
1902
1931
|
];
|
|
1903
|
-
var Send = createLucideIcon("send",
|
|
1932
|
+
var Send = createLucideIcon("send", __iconNode20);
|
|
1904
1933
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1905
|
-
var
|
|
1934
|
+
var __iconNode21 = [
|
|
1906
1935
|
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1907
1936
|
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1908
1937
|
];
|
|
1909
|
-
var X = createLucideIcon("x",
|
|
1938
|
+
var X = createLucideIcon("x", __iconNode21);
|
|
1910
1939
|
// src/components/HighlightOverlay.tsx
|
|
1911
1940
|
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
|
|
1912
1941
|
|
|
@@ -2143,7 +2172,93 @@ function HighlightOverlay() {
|
|
|
2143
2172
|
}
|
|
2144
2173
|
|
|
2145
2174
|
// src/components/MinimizedBubble.tsx
|
|
2146
|
-
import { useContext as useContext2, useEffect as
|
|
2175
|
+
import { useContext as useContext2, useEffect as useEffect9, useRef as useRef6, useState as useState6 } from "react";
|
|
2176
|
+
|
|
2177
|
+
// src/hooks/useLauncherDrag.ts
|
|
2178
|
+
import { useEffect as useEffect8, useRef as useRef5 } from "react";
|
|
2179
|
+
import { flushSync } from "react-dom";
|
|
2180
|
+
var DRAG_THRESHOLD_PX = 5;
|
|
2181
|
+
function useLauncherDrag(containerRef, onDrop) {
|
|
2182
|
+
const wasDraggedRef = useRef5(false);
|
|
2183
|
+
const onDropRef = useRef5(onDrop);
|
|
2184
|
+
onDropRef.current = onDrop;
|
|
2185
|
+
useEffect8(() => {
|
|
2186
|
+
const el = containerRef.current;
|
|
2187
|
+
if (!el)
|
|
2188
|
+
return;
|
|
2189
|
+
let startX = 0;
|
|
2190
|
+
let startY = 0;
|
|
2191
|
+
let dragging = false;
|
|
2192
|
+
let activePointerId = null;
|
|
2193
|
+
const onPointerMove = (event) => {
|
|
2194
|
+
if (event.pointerId !== activePointerId)
|
|
2195
|
+
return;
|
|
2196
|
+
const dx = event.clientX - startX;
|
|
2197
|
+
const dy = event.clientY - startY;
|
|
2198
|
+
if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD_PX)
|
|
2199
|
+
return;
|
|
2200
|
+
if (!dragging) {
|
|
2201
|
+
try {
|
|
2202
|
+
el.setPointerCapture(event.pointerId);
|
|
2203
|
+
} catch {}
|
|
2204
|
+
}
|
|
2205
|
+
dragging = true;
|
|
2206
|
+
wasDraggedRef.current = true;
|
|
2207
|
+
el.style.transform = `translate(${dx}px, ${dy}px)`;
|
|
2208
|
+
};
|
|
2209
|
+
const onPointerUp = (event) => {
|
|
2210
|
+
if (event.pointerId !== activePointerId)
|
|
2211
|
+
return;
|
|
2212
|
+
if (dragging) {
|
|
2213
|
+
const side = event.clientX < window.innerWidth / 2 ? "left" : "right";
|
|
2214
|
+
const pointerBottom = window.innerHeight - event.clientY - LAUNCHER_HEIGHT_PX / 2;
|
|
2215
|
+
flushSync(() => onDropRef.current({ side, bottomPx: clampLauncherBottom(pointerBottom) }));
|
|
2216
|
+
}
|
|
2217
|
+
endDrag();
|
|
2218
|
+
};
|
|
2219
|
+
const onPointerCancel = (event) => {
|
|
2220
|
+
if (event.pointerId !== activePointerId)
|
|
2221
|
+
return;
|
|
2222
|
+
endDrag();
|
|
2223
|
+
};
|
|
2224
|
+
const endDrag = () => {
|
|
2225
|
+
activePointerId = null;
|
|
2226
|
+
el.removeEventListener("pointermove", onPointerMove);
|
|
2227
|
+
el.removeEventListener("pointerup", onPointerUp);
|
|
2228
|
+
el.removeEventListener("pointercancel", onPointerCancel);
|
|
2229
|
+
el.style.transform = "";
|
|
2230
|
+
setTimeout(() => {
|
|
2231
|
+
wasDraggedRef.current = false;
|
|
2232
|
+
}, 0);
|
|
2233
|
+
};
|
|
2234
|
+
const onPointerDown = (event) => {
|
|
2235
|
+
if (event.button !== 0)
|
|
2236
|
+
return;
|
|
2237
|
+
if (activePointerId !== null) {
|
|
2238
|
+
if (dragging)
|
|
2239
|
+
return;
|
|
2240
|
+
endDrag();
|
|
2241
|
+
}
|
|
2242
|
+
activePointerId = event.pointerId;
|
|
2243
|
+
startX = event.clientX;
|
|
2244
|
+
startY = event.clientY;
|
|
2245
|
+
dragging = false;
|
|
2246
|
+
wasDraggedRef.current = false;
|
|
2247
|
+
el.addEventListener("pointermove", onPointerMove);
|
|
2248
|
+
el.addEventListener("pointerup", onPointerUp);
|
|
2249
|
+
el.addEventListener("pointercancel", onPointerCancel);
|
|
2250
|
+
};
|
|
2251
|
+
el.addEventListener("pointerdown", onPointerDown);
|
|
2252
|
+
return () => {
|
|
2253
|
+
el.removeEventListener("pointerdown", onPointerDown);
|
|
2254
|
+
el.removeEventListener("pointermove", onPointerMove);
|
|
2255
|
+
el.removeEventListener("pointerup", onPointerUp);
|
|
2256
|
+
el.removeEventListener("pointercancel", onPointerCancel);
|
|
2257
|
+
el.style.transform = "";
|
|
2258
|
+
};
|
|
2259
|
+
}, [containerRef]);
|
|
2260
|
+
return { wasDraggedRef };
|
|
2261
|
+
}
|
|
2147
2262
|
|
|
2148
2263
|
// src/lib/utils.ts
|
|
2149
2264
|
import { clsx } from "clsx";
|
|
@@ -2280,21 +2395,23 @@ function IdleLauncher({ position, onClick }) {
|
|
|
2280
2395
|
function WelcomeBubble({
|
|
2281
2396
|
message,
|
|
2282
2397
|
position,
|
|
2283
|
-
|
|
2398
|
+
popsDown,
|
|
2399
|
+
onDismiss,
|
|
2400
|
+
onClick
|
|
2284
2401
|
}) {
|
|
2285
|
-
|
|
2402
|
+
useEffect9(() => {
|
|
2286
2403
|
const timer = setTimeout(onDismiss, 5000);
|
|
2287
2404
|
return () => clearTimeout(timer);
|
|
2288
2405
|
}, [onDismiss]);
|
|
2289
2406
|
return /* @__PURE__ */ jsxs4("button", {
|
|
2290
2407
|
type: "button",
|
|
2291
|
-
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
2292
|
-
onClick
|
|
2408
|
+
className: cn("skippr:absolute", popsDown ? "skippr:top-full skippr:mt-3" : "skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
2409
|
+
onClick,
|
|
2293
2410
|
"aria-label": "Dismiss",
|
|
2294
2411
|
children: [
|
|
2295
2412
|
message,
|
|
2296
2413
|
/* @__PURE__ */ jsx4("span", {
|
|
2297
|
-
className: cn("skippr:absolute skippr:
|
|
2414
|
+
className: cn("skippr:absolute skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", popsDown ? "skippr:bottom-full skippr:rotate-45 skippr:-mb-[5px]" : "skippr:top-full skippr:rotate-[225deg] skippr:-mt-[5px]", position === "right" ? "skippr:right-5" : "skippr:left-5")
|
|
2298
2415
|
})
|
|
2299
2416
|
]
|
|
2300
2417
|
});
|
|
@@ -2311,6 +2428,10 @@ function MinimizedBubble({
|
|
|
2311
2428
|
const {
|
|
2312
2429
|
isStarting,
|
|
2313
2430
|
position,
|
|
2431
|
+
setPosition,
|
|
2432
|
+
launcherBottomPx,
|
|
2433
|
+
setLauncherBottomPx,
|
|
2434
|
+
popsDown,
|
|
2314
2435
|
adoptionGoals,
|
|
2315
2436
|
startAdoptionSession,
|
|
2316
2437
|
hasModuleSelector,
|
|
@@ -2323,10 +2444,10 @@ function MinimizedBubble({
|
|
|
2323
2444
|
const [goalsAutoHidden, setGoalsAutoHidden] = useState6(false);
|
|
2324
2445
|
const [isLauncherHovered, setIsLauncherHovered] = useState6(false);
|
|
2325
2446
|
const [visitHref, setVisitHref] = useState6(() => window.location.href);
|
|
2326
|
-
const revealedHrefRef =
|
|
2327
|
-
const hoverContainerRef =
|
|
2328
|
-
|
|
2329
|
-
|
|
2447
|
+
const revealedHrefRef = useRef6(null);
|
|
2448
|
+
const hoverContainerRef = useRef6(null);
|
|
2449
|
+
useEffect9(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
2450
|
+
useEffect9(() => {
|
|
2330
2451
|
const el = hoverContainerRef.current;
|
|
2331
2452
|
if (!el)
|
|
2332
2453
|
return;
|
|
@@ -2339,6 +2460,10 @@ function MinimizedBubble({
|
|
|
2339
2460
|
el.removeEventListener("mouseleave", onLeave);
|
|
2340
2461
|
};
|
|
2341
2462
|
}, []);
|
|
2463
|
+
const { wasDraggedRef } = useLauncherDrag(hoverContainerRef, ({ side, bottomPx }) => {
|
|
2464
|
+
setPosition(side);
|
|
2465
|
+
setLauncherBottomPx(bottomPx);
|
|
2466
|
+
});
|
|
2342
2467
|
const actionableModules = hasModuleSelector ? availableModules.filter((module) => {
|
|
2343
2468
|
const state = getModuleSessionState(module.currentSession, module.mode);
|
|
2344
2469
|
return state !== "completed" && state !== "expired";
|
|
@@ -2348,7 +2473,7 @@ function MinimizedBubble({
|
|
|
2348
2473
|
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
2349
2474
|
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
2350
2475
|
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && (!hasModuleSelector || hasResolvedModules);
|
|
2351
|
-
|
|
2476
|
+
useEffect9(() => {
|
|
2352
2477
|
if (!goalsEligible)
|
|
2353
2478
|
return;
|
|
2354
2479
|
if (revealedHrefRef.current === visitHref) {
|
|
@@ -2363,7 +2488,7 @@ function MinimizedBubble({
|
|
|
2363
2488
|
const matchedGoals = goalsEligible ? adoptionGoals.slice(0, MAX_GOAL_BUBBLES) : [];
|
|
2364
2489
|
const goalsHidden = goalsAutoHidden && !isLauncherHovered;
|
|
2365
2490
|
const [goalsUnmounted, setGoalsUnmounted] = useState6(false);
|
|
2366
|
-
|
|
2491
|
+
useEffect9(() => {
|
|
2367
2492
|
if (!goalsHidden) {
|
|
2368
2493
|
setGoalsUnmounted(false);
|
|
2369
2494
|
return;
|
|
@@ -2374,7 +2499,7 @@ function MinimizedBubble({
|
|
|
2374
2499
|
}, [goalsHidden]);
|
|
2375
2500
|
const visibleGoals = goalsUnmounted ? [] : matchedGoals;
|
|
2376
2501
|
const launchDefaultSession = () => {
|
|
2377
|
-
if (isStarting)
|
|
2502
|
+
if (wasDraggedRef.current || isStarting)
|
|
2378
2503
|
return;
|
|
2379
2504
|
if (!hasModuleSelector || !isAuthenticated) {
|
|
2380
2505
|
expandPanel();
|
|
@@ -2389,28 +2514,40 @@ function MinimizedBubble({
|
|
|
2389
2514
|
};
|
|
2390
2515
|
return /* @__PURE__ */ jsxs4("div", {
|
|
2391
2516
|
ref: hoverContainerRef,
|
|
2392
|
-
|
|
2517
|
+
style: { bottom: launcherBottomPx, touchAction: "none" },
|
|
2518
|
+
className: cn("skippr:fixed skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
2393
2519
|
children: [
|
|
2394
2520
|
(modulePills.length > 0 || visibleGoals.length > 0) && /* @__PURE__ */ jsxs4("div", {
|
|
2395
|
-
className: cn("skippr:absolute skippr:
|
|
2521
|
+
className: cn("skippr:absolute skippr:gap-2", popsDown ? "skippr:top-full skippr:mt-3 skippr:flex skippr:flex-col-reverse" : "skippr:bottom-full skippr:mb-3 skippr:flex skippr:flex-col", position === "right" ? "skippr:right-0 skippr:items-end" : "skippr:left-0 skippr:items-start"),
|
|
2396
2522
|
children: [
|
|
2397
2523
|
visibleGoals.map((goal, index2) => /* @__PURE__ */ jsx4(AdoptionBubble, {
|
|
2398
2524
|
goal,
|
|
2399
|
-
onAttend:
|
|
2525
|
+
onAttend: (attended) => {
|
|
2526
|
+
if (!wasDraggedRef.current)
|
|
2527
|
+
startAdoptionSession(attended);
|
|
2528
|
+
},
|
|
2400
2529
|
appearDelayMs: (visibleGoals.length - 1 - index2) * GOAL_APPEAR_STAGGER_MS,
|
|
2401
2530
|
exitDelayMs: (visibleGoals.length - 1 - index2) * GOAL_EXIT_STAGGER_MS,
|
|
2402
2531
|
hidden: goalsHidden
|
|
2403
2532
|
}, goal.goalId)),
|
|
2404
2533
|
modulePills.map((module) => /* @__PURE__ */ jsx4(ModulePill, {
|
|
2405
2534
|
module,
|
|
2406
|
-
onSelect:
|
|
2535
|
+
onSelect: (id) => {
|
|
2536
|
+
if (!wasDraggedRef.current)
|
|
2537
|
+
selectModule(id);
|
|
2538
|
+
}
|
|
2407
2539
|
}, module.id))
|
|
2408
2540
|
]
|
|
2409
2541
|
}),
|
|
2410
2542
|
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */ jsx4(WelcomeBubble, {
|
|
2411
2543
|
message: welcomeMessage,
|
|
2412
2544
|
position,
|
|
2413
|
-
|
|
2545
|
+
popsDown,
|
|
2546
|
+
onDismiss: onDismissWelcome,
|
|
2547
|
+
onClick: () => {
|
|
2548
|
+
if (!wasDraggedRef.current)
|
|
2549
|
+
onDismissWelcome();
|
|
2550
|
+
}
|
|
2414
2551
|
}),
|
|
2415
2552
|
/* @__PURE__ */ jsx4(IdleLauncher, {
|
|
2416
2553
|
position,
|
|
@@ -2422,10 +2559,10 @@ function MinimizedBubble({
|
|
|
2422
2559
|
|
|
2423
2560
|
// src/components/PageActionHandler.tsx
|
|
2424
2561
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2425
|
-
import { useCallback as useCallback6, useEffect as
|
|
2562
|
+
import { useCallback as useCallback6, useEffect as useEffect11, useRef as useRef8, useState as useState8 } from "react";
|
|
2426
2563
|
|
|
2427
2564
|
// src/components/AgentActivityIndicator.tsx
|
|
2428
|
-
import { useEffect as
|
|
2565
|
+
import { useEffect as useEffect10, useRef as useRef7, useState as useState7 } from "react";
|
|
2429
2566
|
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2430
2567
|
var Z_INDEX2 = 2147483646;
|
|
2431
2568
|
function centerOf(element) {
|
|
@@ -2434,8 +2571,8 @@ function centerOf(element) {
|
|
|
2434
2571
|
}
|
|
2435
2572
|
function AgentActivityIndicator({ target }) {
|
|
2436
2573
|
const [position, setPosition] = useState7(null);
|
|
2437
|
-
const frameRef =
|
|
2438
|
-
|
|
2574
|
+
const frameRef = useRef7(null);
|
|
2575
|
+
useEffect10(() => {
|
|
2439
2576
|
if (!target || !target.element.isConnected) {
|
|
2440
2577
|
setPosition(null);
|
|
2441
2578
|
return;
|
|
@@ -2643,12 +2780,12 @@ function labelFor(action) {
|
|
|
2643
2780
|
}
|
|
2644
2781
|
function PageActionHandler() {
|
|
2645
2782
|
const [activity, setActivity] = useState8(null);
|
|
2646
|
-
const mountedRef =
|
|
2647
|
-
const queueRef =
|
|
2648
|
-
const drainingRef =
|
|
2649
|
-
const timersRef =
|
|
2650
|
-
const wakesRef =
|
|
2651
|
-
const indicatorTimerRef =
|
|
2783
|
+
const mountedRef = useRef8(true);
|
|
2784
|
+
const queueRef = useRef8([]);
|
|
2785
|
+
const drainingRef = useRef8(false);
|
|
2786
|
+
const timersRef = useRef8(new Set);
|
|
2787
|
+
const wakesRef = useRef8(new Set);
|
|
2788
|
+
const indicatorTimerRef = useRef8(null);
|
|
2652
2789
|
const sleep = useCallback6((ms) => {
|
|
2653
2790
|
return new Promise((resolve) => {
|
|
2654
2791
|
const wake = () => {
|
|
@@ -2726,7 +2863,7 @@ function PageActionHandler() {
|
|
|
2726
2863
|
queueRef.current.push(action);
|
|
2727
2864
|
drain();
|
|
2728
2865
|
}, [drain]);
|
|
2729
|
-
|
|
2866
|
+
useEffect11(() => {
|
|
2730
2867
|
mountedRef.current = true;
|
|
2731
2868
|
drainingRef.current = false;
|
|
2732
2869
|
return () => {
|
|
@@ -2782,6 +2919,11 @@ function useLiveAgent() {
|
|
|
2782
2919
|
hasResolvedModules,
|
|
2783
2920
|
adoptionGoals,
|
|
2784
2921
|
startAdoptionSession,
|
|
2922
|
+
launcherBottomPx,
|
|
2923
|
+
setLauncherBottomPx,
|
|
2924
|
+
popsDown,
|
|
2925
|
+
panelExpanded,
|
|
2926
|
+
togglePanelExpanded,
|
|
2785
2927
|
...publicValue
|
|
2786
2928
|
} = ctx;
|
|
2787
2929
|
return publicValue;
|
|
@@ -2819,7 +2961,7 @@ function useMediaControls() {
|
|
|
2819
2961
|
|
|
2820
2962
|
// src/hooks/useMicLevel.ts
|
|
2821
2963
|
import { useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
2822
|
-
import { useEffect as
|
|
2964
|
+
import { useEffect as useEffect12, useRef as useRef9, useState as useState9 } from "react";
|
|
2823
2965
|
var MIC_BARS = 5;
|
|
2824
2966
|
var IDLE_BAR_HEIGHT_PX = 5;
|
|
2825
2967
|
var MAX_BAR_GROWTH_PX = 17;
|
|
@@ -2828,10 +2970,10 @@ var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
|
2828
2970
|
var TALKING_HOLD_MS = 400;
|
|
2829
2971
|
function useMicLevel(enabled) {
|
|
2830
2972
|
const { microphoneTrack } = useLocalParticipant4();
|
|
2831
|
-
const barRefs =
|
|
2973
|
+
const barRefs = useRef9([]);
|
|
2832
2974
|
const [isTalking, setIsTalking] = useState9(false);
|
|
2833
2975
|
const mediaStreamTrack = microphoneTrack?.track?.mediaStreamTrack;
|
|
2834
|
-
|
|
2976
|
+
useEffect12(() => {
|
|
2835
2977
|
if (!enabled || !mediaStreamTrack) {
|
|
2836
2978
|
for (const bar of barRefs.current) {
|
|
2837
2979
|
if (bar)
|
|
@@ -2881,15 +3023,15 @@ function useMicLevel(enabled) {
|
|
|
2881
3023
|
}
|
|
2882
3024
|
|
|
2883
3025
|
// src/hooks/usePhaseUpdates.ts
|
|
2884
|
-
import { useCallback as useCallback8, useContext as useContext4, useEffect as
|
|
3026
|
+
import { useCallback as useCallback8, useContext as useContext4, useEffect as useEffect14 } from "react";
|
|
2885
3027
|
|
|
2886
3028
|
// src/hooks/useAgentState.ts
|
|
2887
3029
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2888
|
-
import { useEffect as
|
|
3030
|
+
import { useEffect as useEffect13, useState as useState10 } from "react";
|
|
2889
3031
|
function useAgentState(attributeKey, parse, initial) {
|
|
2890
3032
|
const [value, setValue] = useState10(initial);
|
|
2891
3033
|
const remoteParticipants = useRemoteParticipants();
|
|
2892
|
-
|
|
3034
|
+
useEffect13(() => {
|
|
2893
3035
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
2894
3036
|
if (agentParticipant) {
|
|
2895
3037
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -2938,7 +3080,7 @@ function usePhaseUpdates() {
|
|
|
2938
3080
|
const parse = useCallback8(parsePhases, []);
|
|
2939
3081
|
const livePhases = useAgentState("phases", parse, []);
|
|
2940
3082
|
const ctx = useContext4(LiveAgentContext);
|
|
2941
|
-
|
|
3083
|
+
useEffect14(() => {
|
|
2942
3084
|
if (livePhases.length > 0)
|
|
2943
3085
|
ctx?.setPhasesSnapshot(livePhases);
|
|
2944
3086
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -3030,7 +3172,10 @@ function SessionControlBar() {
|
|
|
3030
3172
|
activeModule,
|
|
3031
3173
|
position
|
|
3032
3174
|
} = useLiveAgent();
|
|
3033
|
-
const
|
|
3175
|
+
const internalCtx = useContext5(LiveAgentContext);
|
|
3176
|
+
const textMode = internalCtx?.textMode ?? false;
|
|
3177
|
+
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
3178
|
+
const popsDown = internalCtx?.popsDown ?? false;
|
|
3034
3179
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3035
3180
|
const { state } = useAgentVoiceState();
|
|
3036
3181
|
const { phases } = usePhaseUpdates();
|
|
@@ -3064,10 +3209,11 @@ function SessionControlBar() {
|
|
|
3064
3209
|
expandPanel();
|
|
3065
3210
|
};
|
|
3066
3211
|
return /* @__PURE__ */ jsxs6("div", {
|
|
3067
|
-
|
|
3212
|
+
style: { bottom: launcherBottomPx },
|
|
3213
|
+
className: cn("skippr:fixed skippr:z-[9999]", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
3068
3214
|
children: [
|
|
3069
3215
|
!isPanelOpen && agendaModule && agendaProgress && /* @__PURE__ */ jsx7("div", {
|
|
3070
|
-
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
3216
|
+
className: cn("skippr:absolute", popsDown ? "skippr:top-full skippr:mt-3" : "skippr:bottom-full skippr:mb-3", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
3071
3217
|
children: /* @__PURE__ */ jsx7(ModulePill, {
|
|
3072
3218
|
module: agendaModule,
|
|
3073
3219
|
onSelect: openAgenda,
|
|
@@ -3212,7 +3358,7 @@ function SessionControlBar() {
|
|
|
3212
3358
|
}
|
|
3213
3359
|
|
|
3214
3360
|
// src/components/ShadowHost.tsx
|
|
3215
|
-
import { useLayoutEffect, useRef as
|
|
3361
|
+
import { useLayoutEffect, useRef as useRef10, useState as useState11 } from "react";
|
|
3216
3362
|
import { createPortal } from "react-dom";
|
|
3217
3363
|
import { jsx as jsx8, Fragment } from "react/jsx-runtime";
|
|
3218
3364
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
@@ -3229,10 +3375,10 @@ function hoistTailwindProperties(css) {
|
|
|
3229
3375
|
return css.replace(PROPERTY_RULE, "");
|
|
3230
3376
|
}
|
|
3231
3377
|
function ShadowHost({ children }) {
|
|
3232
|
-
const hostRef =
|
|
3378
|
+
const hostRef = useRef10(null);
|
|
3233
3379
|
const [shadowRoot, setShadowRoot] = useState11(null);
|
|
3234
3380
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
3235
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-emerald-500:oklch(69.6% .17 162.48);--skippr-color-cyan-400:oklch(78.9% .154 211.53);--skippr-color-cyan-500:oklch(71.5% .143 215.221);--skippr-color-cyan-900:oklch(39.8% .07 227.392);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-tight:1.25;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:-top-2{top:calc(var(--skippr-spacing)*-2)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-4{top:calc(var(--skippr-spacing)*4)}.skippr\\:top-full{top:100%}.skippr\\:-right-2{right:calc(var(--skippr-spacing)*-2)}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:right-\\[-3px\\]{right:-3px}.skippr\\:right-\\[24px\\]{right:24px}.skippr\\:-bottom-2{bottom:calc(var(--skippr-spacing)*-2)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\\:bottom-12{bottom:calc(var(--skippr-spacing)*12)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-\\[88px\\]{bottom:88px}.skippr\\:bottom-\\[124px\\]{bottom:124px}.skippr\\:bottom-full{bottom:100%}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:left-\\[24px\\]{left:24px}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:flex{display:flex}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[6px\\]{width:6px;height:6px}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-2\\.5{height:calc(var(--skippr-spacing)*2.5)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-16{height:calc(var(--skippr-spacing)*16)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[50px\\]{height:50px}.skippr\\:h-\\[min\\(460px\\,calc\\(100vh-200px\\)\\)\\]{height:min(460px,100vh - 200px)}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3{width:calc(var(--skippr-spacing)*3)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-6{width:calc(var(--skippr-spacing)*6)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-12{width:calc(var(--skippr-spacing)*12)}.skippr\\:w-14{width:calc(var(--skippr-spacing)*14)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-pulse{animation:var(--skippr-animate-pulse)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-default{cursor:default}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-cyan-400{border-color:var(--skippr-color-cyan-400)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-cyan-400{background-color:var(--skippr-color-cyan-400)}.skippr\\:bg-cyan-500{background-color:var(--skippr-color-cyan-500)}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-emerald-500{background-color:var(--skippr-color-emerald-500)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-launcher{background-color:#2d2d3f}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-neutral-100{background-color:var(--skippr-color-neutral-100)}.skippr\\:bg-primary{background-color:#2d2b3d}.skippr\\:bg-primary-foreground\\/20{background-color:oklab(100% 0 5.96046e-8/.2)}.skippr\\:bg-primary\\/10{background-color:oklab(29.9244% .0107414 -.0305411/.1)}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white{background-color:var(--skippr-color-white)}.skippr\\:fill-brand{fill:#2bc0ae}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:stroke-black\\/15{stroke:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:stroke-black\\/15{stroke:color-mix(in oklab,var(--skippr-color-black)15%,transparent)}}.skippr\\:stroke-bubble{stroke:#2d2b3d}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-3{padding-top:calc(var(--skippr-spacing)*3)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-1{padding-bottom:calc(var(--skippr-spacing)*1)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black{color:var(--skippr-color-black)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-cyan-500{color:var(--skippr-color-cyan-500)}.skippr\\:text-cyan-900{color:var(--skippr-color-cyan-900)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white{color:var(--skippr-color-white)}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-40{opacity:.4}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[-6px_6px_22px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:-6px 6px 22px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-black\\/5{--tw-ring-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--skippr-color-black)5%,transparent)}}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 3px var(--tw-drop-shadow-color,#00000059));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted\\/70:hover{background-color:oklab(97% -.000282743 .000959196/.7)}.skippr\\:hover\\:bg-neutral-100:hover{background-color:var(--skippr-color-neutral-100)}.skippr\\:hover\\:bg-neutral-200:hover{background-color:var(--skippr-color-neutral-200)}.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\:text-red-300:hover{color:var(--skippr-color-red-300)}.skippr\\:hover\\:text-white\\/80:hover{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:text-white\\/80:hover{color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:opacity-100:focus-visible{opacity:1}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:animate-none{animation:none}}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #22d3ee73}50%{box-shadow:0 0 0 10px #22d3ee00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
3381
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-emerald-500:oklch(69.6% .17 162.48);--skippr-color-cyan-400:oklch(78.9% .154 211.53);--skippr-color-cyan-500:oklch(71.5% .143 215.221);--skippr-color-cyan-900:oklch(39.8% .07 227.392);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-tight:1.25;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:-top-2{top:calc(var(--skippr-spacing)*-2)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-4{top:calc(var(--skippr-spacing)*4)}.skippr\\:top-full{top:100%}.skippr\\:-right-2{right:calc(var(--skippr-spacing)*-2)}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:right-\\[-3px\\]{right:-3px}.skippr\\:right-\\[24px\\]{right:24px}.skippr\\:-bottom-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:left-\\[24px\\]{left:24px}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:-mb-\\[5px\\]{margin-bottom:-5px}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:flex{display:flex}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[6px\\]{width:6px;height:6px}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-2\\.5{height:calc(var(--skippr-spacing)*2.5)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-16{height:calc(var(--skippr-spacing)*16)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[50px\\]{height:50px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3{width:calc(var(--skippr-spacing)*3)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-6{width:calc(var(--skippr-spacing)*6)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-12{width:calc(var(--skippr-spacing)*12)}.skippr\\:w-14{width:calc(var(--skippr-spacing)*14)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-pulse{animation:var(--skippr-animate-pulse)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-default{cursor:default}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-cyan-400{border-color:var(--skippr-color-cyan-400)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-cyan-400{background-color:var(--skippr-color-cyan-400)}.skippr\\:bg-cyan-500{background-color:var(--skippr-color-cyan-500)}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-emerald-500{background-color:var(--skippr-color-emerald-500)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-launcher{background-color:#2d2d3f}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-neutral-100{background-color:var(--skippr-color-neutral-100)}.skippr\\:bg-primary{background-color:#2d2b3d}.skippr\\:bg-primary-foreground\\/20{background-color:oklab(100% 0 5.96046e-8/.2)}.skippr\\:bg-primary\\/10{background-color:oklab(29.9244% .0107414 -.0305411/.1)}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white{background-color:var(--skippr-color-white)}.skippr\\:fill-brand{fill:#2bc0ae}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:stroke-black\\/15{stroke:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:stroke-black\\/15{stroke:color-mix(in oklab,var(--skippr-color-black)15%,transparent)}}.skippr\\:stroke-bubble{stroke:#2d2b3d}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pt-2{padding-top:calc(var(--skippr-spacing)*2)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-0{padding-bottom:calc(var(--skippr-spacing)*0)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black{color:var(--skippr-color-black)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-cyan-500{color:var(--skippr-color-cyan-500)}.skippr\\:text-cyan-900{color:var(--skippr-color-cyan-900)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white{color:var(--skippr-color-white)}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-40{opacity:.4}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[-6px_6px_22px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:-6px 6px 22px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(0\\,0\\,0\\,0\\.3\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-black\\/5{--tw-ring-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--skippr-color-black)5%,transparent)}}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 3px var(--tw-drop-shadow-color,#00000059));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[opacity\\,transform\\,height\\]{transition-property:opacity,transform,height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted\\/70:hover{background-color:oklab(97% -.000282743 .000959196/.7)}.skippr\\:hover\\:bg-neutral-100:hover{background-color:var(--skippr-color-neutral-100)}.skippr\\:hover\\:bg-neutral-200:hover{background-color:var(--skippr-color-neutral-200)}.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\:text-red-300:hover{color:var(--skippr-color-red-300)}.skippr\\:hover\\:text-white\\/80:hover{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:text-white\\/80:hover{color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:opacity-100:focus-visible{opacity:1}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:animate-none{animation:none}}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #22d3ee73}50%{box-shadow:0 0 0 10px #22d3ee00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
3236
3382
|
useLayoutEffect(() => {
|
|
3237
3383
|
const host = hostRef.current;
|
|
3238
3384
|
if (!host || !css)
|
|
@@ -3257,7 +3403,7 @@ function ShadowHost({ children }) {
|
|
|
3257
3403
|
}
|
|
3258
3404
|
|
|
3259
3405
|
// src/components/Sidebar.tsx
|
|
3260
|
-
import { useContext as
|
|
3406
|
+
import { useContext as useContext9, useEffect as useEffect19 } from "react";
|
|
3261
3407
|
|
|
3262
3408
|
// src/hooks/useCombinedMessages.ts
|
|
3263
3409
|
import { useContext as useContext6, useMemo as useMemo5 } from "react";
|
|
@@ -3346,7 +3492,7 @@ function useCombinedMessages() {
|
|
|
3346
3492
|
}
|
|
3347
3493
|
|
|
3348
3494
|
// src/hooks/useSessionRemaining.ts
|
|
3349
|
-
import { useEffect as
|
|
3495
|
+
import { useEffect as useEffect15, useRef as useRef11, useState as useState12 } from "react";
|
|
3350
3496
|
|
|
3351
3497
|
// src/lib/format.ts
|
|
3352
3498
|
function formatTime(seconds) {
|
|
@@ -3362,9 +3508,9 @@ function parseNumber(s) {
|
|
|
3362
3508
|
// src/hooks/useSessionRemaining.ts
|
|
3363
3509
|
function useSessionRemaining() {
|
|
3364
3510
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
3365
|
-
const endTimeRef =
|
|
3511
|
+
const endTimeRef = useRef11(null);
|
|
3366
3512
|
const [remaining, setRemaining] = useState12(null);
|
|
3367
|
-
|
|
3513
|
+
useEffect15(() => {
|
|
3368
3514
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
3369
3515
|
return;
|
|
3370
3516
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -3382,7 +3528,7 @@ function useSessionRemaining() {
|
|
|
3382
3528
|
|
|
3383
3529
|
// src/hooks/useTextMode.ts
|
|
3384
3530
|
import { useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
|
|
3385
|
-
import { useCallback as useCallback9, useContext as useContext7, useRef as
|
|
3531
|
+
import { useCallback as useCallback9, useContext as useContext7, useRef as useRef12 } from "react";
|
|
3386
3532
|
var textEncoder3 = new TextEncoder;
|
|
3387
3533
|
function useTextMode() {
|
|
3388
3534
|
const ctx = useContext7(LiveAgentContext);
|
|
@@ -3391,7 +3537,7 @@ function useTextMode() {
|
|
|
3391
3537
|
}
|
|
3392
3538
|
const { textMode, setTextModeState, sidebarTab, setSidebarTab } = ctx;
|
|
3393
3539
|
const { localParticipant } = useLocalParticipant7();
|
|
3394
|
-
const confirmedTextModeRef =
|
|
3540
|
+
const confirmedTextModeRef = useRef12(false);
|
|
3395
3541
|
const toggleTextMode = useCallback9(async () => {
|
|
3396
3542
|
const next = !textMode;
|
|
3397
3543
|
setTextModeState(next);
|
|
@@ -3413,11 +3559,14 @@ function useTextMode() {
|
|
|
3413
3559
|
return { textMode, toggleTextMode };
|
|
3414
3560
|
}
|
|
3415
3561
|
|
|
3562
|
+
// src/components/ChatHeader.tsx
|
|
3563
|
+
import { useContext as useContext8 } from "react";
|
|
3564
|
+
|
|
3416
3565
|
// src/hooks/useElapsedSeconds.ts
|
|
3417
|
-
import { useEffect as
|
|
3566
|
+
import { useEffect as useEffect16, useState as useState13 } from "react";
|
|
3418
3567
|
function useElapsedSeconds(isRunning) {
|
|
3419
3568
|
const [elapsed, setElapsed] = useState13(0);
|
|
3420
|
-
|
|
3569
|
+
useEffect16(() => {
|
|
3421
3570
|
if (!isRunning) {
|
|
3422
3571
|
setElapsed(0);
|
|
3423
3572
|
return;
|
|
@@ -3435,7 +3584,10 @@ function useElapsedSeconds(isRunning) {
|
|
|
3435
3584
|
// src/components/ChatHeader.tsx
|
|
3436
3585
|
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
3437
3586
|
function ChatHeader() {
|
|
3438
|
-
const { isConnected,
|
|
3587
|
+
const { isConnected, variant } = useLiveAgent();
|
|
3588
|
+
const internalCtx = useContext8(LiveAgentContext);
|
|
3589
|
+
const panelExpanded = internalCtx?.panelExpanded ?? false;
|
|
3590
|
+
const togglePanelExpanded = internalCtx?.togglePanelExpanded ?? (() => {});
|
|
3439
3591
|
const elapsed = useElapsedSeconds(isConnected);
|
|
3440
3592
|
return /* @__PURE__ */ jsxs7("header", {
|
|
3441
3593
|
className: "skippr:sticky skippr:top-0 skippr:z-10 skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-between skippr:border-b skippr:border-border skippr:bg-primary skippr:px-4 skippr:py-3",
|
|
@@ -3471,12 +3623,15 @@ function ChatHeader() {
|
|
|
3471
3623
|
})
|
|
3472
3624
|
]
|
|
3473
3625
|
}),
|
|
3474
|
-
|
|
3626
|
+
variant === "floating" && /* @__PURE__ */ jsx9("button", {
|
|
3475
3627
|
type: "button",
|
|
3476
|
-
onClick:
|
|
3477
|
-
"aria-label": "
|
|
3628
|
+
onClick: togglePanelExpanded,
|
|
3629
|
+
"aria-label": panelExpanded ? "Collapse" : "Expand",
|
|
3630
|
+
title: panelExpanded ? "Collapse" : "Expand",
|
|
3478
3631
|
className: "skippr:flex skippr:size-6 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-md skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-primary-foreground/10 skippr:hover:text-primary-foreground",
|
|
3479
|
-
children: /* @__PURE__ */ jsx9(Minimize2, {
|
|
3632
|
+
children: panelExpanded ? /* @__PURE__ */ jsx9(Minimize2, {
|
|
3633
|
+
className: "skippr:size-3.5"
|
|
3634
|
+
}) : /* @__PURE__ */ jsx9(Maximize2, {
|
|
3480
3635
|
className: "skippr:size-3.5"
|
|
3481
3636
|
})
|
|
3482
3637
|
})
|
|
@@ -3515,7 +3670,7 @@ function LoadingDots({ label }) {
|
|
|
3515
3670
|
}
|
|
3516
3671
|
|
|
3517
3672
|
// src/components/LoginFlow.tsx
|
|
3518
|
-
import { useCallback as useCallback10, useEffect as
|
|
3673
|
+
import { useCallback as useCallback10, useEffect as useEffect17, useRef as useRef13, useState as useState14 } from "react";
|
|
3519
3674
|
|
|
3520
3675
|
// src/components/ui/button.tsx
|
|
3521
3676
|
import { forwardRef as forwardRef3 } from "react";
|
|
@@ -3643,16 +3798,16 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3643
3798
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
3644
3799
|
const [digits, setDigits] = useState14(Array(OTP_LENGTH).fill(""));
|
|
3645
3800
|
const [resendCooldown, setResendCooldown] = useState14(0);
|
|
3646
|
-
const inputRefs =
|
|
3647
|
-
const submittedRef =
|
|
3648
|
-
|
|
3801
|
+
const inputRefs = useRef13([]);
|
|
3802
|
+
const submittedRef = useRef13(false);
|
|
3803
|
+
useEffect17(() => {
|
|
3649
3804
|
inputRefs.current[0]?.focus();
|
|
3650
3805
|
}, []);
|
|
3651
|
-
|
|
3806
|
+
useEffect17(() => {
|
|
3652
3807
|
if (error)
|
|
3653
3808
|
submittedRef.current = false;
|
|
3654
3809
|
}, [error]);
|
|
3655
|
-
|
|
3810
|
+
useEffect17(() => {
|
|
3656
3811
|
if (resendCooldown <= 0)
|
|
3657
3812
|
return;
|
|
3658
3813
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
@@ -3793,17 +3948,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3793
3948
|
}
|
|
3794
3949
|
|
|
3795
3950
|
// src/components/MessageList.tsx
|
|
3796
|
-
import {
|
|
3951
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef15 } from "react";
|
|
3797
3952
|
|
|
3798
3953
|
// src/components/ChatInput.tsx
|
|
3799
|
-
import { useEffect as
|
|
3954
|
+
import { useEffect as useEffect18, useRef as useRef14, useState as useState15 } from "react";
|
|
3800
3955
|
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3801
3956
|
var MAX_INPUT_HEIGHT = 60;
|
|
3802
3957
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3803
3958
|
const [inputText, setInputText] = useState15("");
|
|
3804
|
-
const textareaRef =
|
|
3959
|
+
const textareaRef = useRef14(null);
|
|
3805
3960
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3806
|
-
|
|
3961
|
+
useEffect18(() => {
|
|
3807
3962
|
if (autoFocus)
|
|
3808
3963
|
textareaRef.current?.focus();
|
|
3809
3964
|
}, [autoFocus]);
|
|
@@ -3941,6 +4096,7 @@ function TypingIndicator() {
|
|
|
3941
4096
|
|
|
3942
4097
|
// src/components/MessageList.tsx
|
|
3943
4098
|
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4099
|
+
var NEAR_BOTTOM_THRESHOLD_PX = 80;
|
|
3944
4100
|
function MessageList({
|
|
3945
4101
|
messages,
|
|
3946
4102
|
isStreaming,
|
|
@@ -3948,16 +4104,32 @@ function MessageList({
|
|
|
3948
4104
|
isSendingChat,
|
|
3949
4105
|
autoFocus = false
|
|
3950
4106
|
}) {
|
|
3951
|
-
const
|
|
4107
|
+
const containerRef = useRef15(null);
|
|
4108
|
+
const isPinnedToBottomRef = useRef15(true);
|
|
3952
4109
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3953
|
-
|
|
3954
|
-
|
|
4110
|
+
const trackPinnedToBottom = () => {
|
|
4111
|
+
const container = containerRef.current;
|
|
4112
|
+
if (!container)
|
|
4113
|
+
return;
|
|
4114
|
+
const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
|
|
4115
|
+
isPinnedToBottomRef.current = distanceFromBottom < NEAR_BOTTOM_THRESHOLD_PX;
|
|
4116
|
+
};
|
|
4117
|
+
useLayoutEffect2(() => {
|
|
4118
|
+
const container = containerRef.current;
|
|
4119
|
+
if (!container)
|
|
4120
|
+
return;
|
|
4121
|
+
const userSentChat = lastMessage?.role === "user" && lastMessage.source === "chat";
|
|
4122
|
+
if (!isPinnedToBottomRef.current && !userSentChat)
|
|
4123
|
+
return;
|
|
4124
|
+
container.scrollTop = container.scrollHeight;
|
|
3955
4125
|
}, [messages.length, lastMessage?.content]);
|
|
3956
4126
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3957
4127
|
return /* @__PURE__ */ jsxs13("div", {
|
|
3958
4128
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3959
4129
|
children: [
|
|
3960
4130
|
/* @__PURE__ */ jsxs13("div", {
|
|
4131
|
+
ref: containerRef,
|
|
4132
|
+
onScroll: trackPinnedToBottom,
|
|
3961
4133
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3962
4134
|
children: [
|
|
3963
4135
|
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx16(LoadingDots, {
|
|
@@ -3966,10 +4138,7 @@ function MessageList({
|
|
|
3966
4138
|
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
3967
4139
|
message
|
|
3968
4140
|
}, message.id)),
|
|
3969
|
-
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {})
|
|
3970
|
-
/* @__PURE__ */ jsx16("div", {
|
|
3971
|
-
ref: scrollRef
|
|
3972
|
-
})
|
|
4141
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {})
|
|
3973
4142
|
]
|
|
3974
4143
|
}),
|
|
3975
4144
|
/* @__PURE__ */ jsx16(ChatInput, {
|
|
@@ -4096,6 +4265,9 @@ function StartSessionPrompt({
|
|
|
4096
4265
|
|
|
4097
4266
|
// src/components/Sidebar.tsx
|
|
4098
4267
|
import { jsx as jsx20, jsxs as jsxs16, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4268
|
+
var PANEL_GAP_PX = 12;
|
|
4269
|
+
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
4270
|
+
var PANEL_MAX_HEIGHT_PX = 460;
|
|
4099
4271
|
function Sidebar({
|
|
4100
4272
|
hideControls = false,
|
|
4101
4273
|
hideHeader = false,
|
|
@@ -4127,12 +4299,25 @@ function Sidebar({
|
|
|
4127
4299
|
agentMode,
|
|
4128
4300
|
agentControls
|
|
4129
4301
|
} = useLiveAgent();
|
|
4130
|
-
const internalCtx =
|
|
4302
|
+
const internalCtx = useContext9(LiveAgentContext);
|
|
4131
4303
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
4132
4304
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
4305
|
+
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
4306
|
+
const popsDown = internalCtx?.popsDown ?? false;
|
|
4307
|
+
const panelExpanded = internalCtx?.panelExpanded ?? false;
|
|
4133
4308
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
4134
4309
|
const isFloating = variant === "floating";
|
|
4135
4310
|
const isSidebar = variant === "sidebar";
|
|
4311
|
+
const inSession = isConnected || isStarting || isPausing;
|
|
4312
|
+
const floatingBottomPx = inSession ? launcherBottomPx + SESSION_BAR_CLEARANCE_PX : triggerBottomPx(launcherBottomPx, popsDown) + IDLE_TRIGGER_CLEARANCE_PX;
|
|
4313
|
+
let floatingStyle;
|
|
4314
|
+
if (isFloating) {
|
|
4315
|
+
const availableHeight = popsDown ? `${launcherBottomPx - PANEL_GAP_PX - PANEL_VIEWPORT_MARGIN_PX}px` : `calc(100vh - ${floatingBottomPx + PANEL_VIEWPORT_MARGIN_PX}px)`;
|
|
4316
|
+
floatingStyle = {
|
|
4317
|
+
...popsDown ? { top: `calc(100vh - ${launcherBottomPx - PANEL_GAP_PX}px)` } : { bottom: floatingBottomPx },
|
|
4318
|
+
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
4319
|
+
};
|
|
4320
|
+
}
|
|
4136
4321
|
useEffect19(() => {
|
|
4137
4322
|
if (!isSidebar)
|
|
4138
4323
|
return;
|
|
@@ -4148,8 +4333,8 @@ function Sidebar({
|
|
|
4148
4333
|
};
|
|
4149
4334
|
}, [isSidebar, isPanelOpen, position]);
|
|
4150
4335
|
return /* @__PURE__ */ jsxs16("div", {
|
|
4151
|
-
className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-card", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:border skippr:border-border skippr:
|
|
4152
|
-
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
4336
|
+
className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-card", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:border skippr:border-border skippr:rounded-2xl skippr:shadow-[0_8px_30px_rgba(0,0,0,0.16),0_4px_12px_rgba(0,0,0,0.08)]", isFloating && (position === "right" ? "skippr:right-6" : "skippr:left-6"), isFloating && "skippr:transition-[opacity,transform,height] skippr:duration-300 skippr:ease-in-out", isFloating && (popsDown ? position === "right" ? "skippr:origin-top-right" : "skippr:origin-top-left" : position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
|
|
4337
|
+
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
4153
4338
|
children: [
|
|
4154
4339
|
!hideHeader && /* @__PURE__ */ jsx20(ChatHeader, {}),
|
|
4155
4340
|
authFailed ? /* @__PURE__ */ jsx20(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx20(AuthenticatedContent, {
|
|
@@ -4217,11 +4402,11 @@ function AuthenticatedContent({
|
|
|
4217
4402
|
children: [
|
|
4218
4403
|
isConnected && /* @__PURE__ */ jsx20(ConnectedBanner, {}),
|
|
4219
4404
|
/* @__PURE__ */ jsxs16("div", {
|
|
4220
|
-
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-
|
|
4405
|
+
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-1",
|
|
4221
4406
|
children: [
|
|
4222
4407
|
/* @__PURE__ */ jsxs16("button", {
|
|
4223
4408
|
type: "button",
|
|
4224
|
-
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-
|
|
4409
|
+
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-1.5 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
4225
4410
|
onClick: () => onTabChange("chat"),
|
|
4226
4411
|
children: [
|
|
4227
4412
|
/* @__PURE__ */ jsx20(MessageCircle, {
|
|
@@ -4229,13 +4414,13 @@ function AuthenticatedContent({
|
|
|
4229
4414
|
}),
|
|
4230
4415
|
"Chat",
|
|
4231
4416
|
activeTab === "chat" && /* @__PURE__ */ jsx20("span", {
|
|
4232
|
-
className: "skippr:absolute skippr:-bottom-
|
|
4417
|
+
className: "skippr:absolute skippr:-bottom-1 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4233
4418
|
})
|
|
4234
4419
|
]
|
|
4235
4420
|
}),
|
|
4236
4421
|
showAgenda && /* @__PURE__ */ jsxs16("button", {
|
|
4237
4422
|
type: "button",
|
|
4238
|
-
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-
|
|
4423
|
+
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-1.5 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
4239
4424
|
onClick: () => onTabChange("agenda"),
|
|
4240
4425
|
children: [
|
|
4241
4426
|
/* @__PURE__ */ jsx20(Calendar, {
|
|
@@ -4243,7 +4428,7 @@ function AuthenticatedContent({
|
|
|
4243
4428
|
}),
|
|
4244
4429
|
"Agenda",
|
|
4245
4430
|
activeTab === "agenda" && /* @__PURE__ */ jsx20("span", {
|
|
4246
|
-
className: "skippr:absolute skippr:-bottom-
|
|
4431
|
+
className: "skippr:absolute skippr:-bottom-1 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4247
4432
|
})
|
|
4248
4433
|
]
|
|
4249
4434
|
})
|
|
@@ -4286,7 +4471,7 @@ function AuthenticatedContent({
|
|
|
4286
4471
|
children: [
|
|
4287
4472
|
isConnected && !isDisconnecting && /* @__PURE__ */ jsx20(ModeToggleRow, {}),
|
|
4288
4473
|
/* @__PURE__ */ jsx20("div", {
|
|
4289
|
-
className: "skippr:px-4 skippr:
|
|
4474
|
+
className: "skippr:px-4 skippr:pt-1.5 skippr:pb-2 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
4290
4475
|
children: "Powered by Skippr"
|
|
4291
4476
|
})
|
|
4292
4477
|
]
|
|
@@ -4297,11 +4482,11 @@ function AuthenticatedContent({
|
|
|
4297
4482
|
function ModeToggleRow() {
|
|
4298
4483
|
const { textMode, toggleTextMode } = useTextMode();
|
|
4299
4484
|
return /* @__PURE__ */ jsx20("div", {
|
|
4300
|
-
className: "skippr:flex skippr:justify-center skippr:px-3 skippr:pt-
|
|
4485
|
+
className: "skippr:flex skippr:justify-center skippr:px-3 skippr:pt-2 skippr:pb-0",
|
|
4301
4486
|
children: /* @__PURE__ */ jsx20("button", {
|
|
4302
4487
|
type: "button",
|
|
4303
4488
|
"aria-label": textMode ? "Switch to voice mode" : "Switch to text mode",
|
|
4304
|
-
className: "skippr:flex skippr:cursor-pointer skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-muted skippr:px-4 skippr:py-
|
|
4489
|
+
className: "skippr:flex skippr:cursor-pointer skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-muted skippr:px-4 skippr:py-1.5 skippr:text-sm skippr:font-medium skippr:text-foreground skippr:transition-colors skippr:hover:bg-muted/70",
|
|
4305
4490
|
onClick: () => void toggleTextMode(),
|
|
4306
4491
|
children: textMode ? /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4307
4492
|
children: [
|
|
@@ -4372,6 +4557,9 @@ function ConnectedBody({
|
|
|
4372
4557
|
}, "chat");
|
|
4373
4558
|
}
|
|
4374
4559
|
|
|
4560
|
+
// src/components/SidebarTrigger.tsx
|
|
4561
|
+
import { useContext as useContext10 } from "react";
|
|
4562
|
+
|
|
4375
4563
|
// src/components/Logo.tsx
|
|
4376
4564
|
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4377
4565
|
function Logo({ className }) {
|
|
@@ -4422,6 +4610,9 @@ function SidebarTrigger() {
|
|
|
4422
4610
|
isStarting,
|
|
4423
4611
|
isPausing
|
|
4424
4612
|
} = useLiveAgent();
|
|
4613
|
+
const internalCtx = useContext10(LiveAgentContext);
|
|
4614
|
+
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
4615
|
+
const popsDown = internalCtx?.popsDown ?? false;
|
|
4425
4616
|
if (isMinimized || isConnected || isStarting || isPausing)
|
|
4426
4617
|
return null;
|
|
4427
4618
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
@@ -4430,7 +4621,8 @@ function SidebarTrigger() {
|
|
|
4430
4621
|
onClick: handleClick,
|
|
4431
4622
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
4432
4623
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
4433
|
-
|
|
4624
|
+
style: { bottom: triggerBottomPx(launcherBottomPx, popsDown) },
|
|
4625
|
+
className: cn("skippr:fixed skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", isPanelOpen ? "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white" : "skippr:rounded-[10px] skippr:overflow-hidden", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
4434
4626
|
children: isPanelOpen ? /* @__PURE__ */ jsx22(ChevronDown, {
|
|
4435
4627
|
className: "skippr:size-5"
|
|
4436
4628
|
}) : /* @__PURE__ */ jsx22(Logo, {
|
|
@@ -4521,7 +4713,7 @@ function LiveAgent(props) {
|
|
|
4521
4713
|
onStartError: expandOnSessionStartError,
|
|
4522
4714
|
onDisconnect: minimizeOnSessionDisconnect
|
|
4523
4715
|
});
|
|
4524
|
-
const teardownInFlightRef =
|
|
4716
|
+
const teardownInFlightRef = useRef16(false);
|
|
4525
4717
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4526
4718
|
const handleRoomDisconnected = useCallback11(() => {
|
|
4527
4719
|
if (teardownInFlightRef.current)
|
|
@@ -4534,12 +4726,18 @@ function LiveAgent(props) {
|
|
|
4534
4726
|
const [sidebarTab, setSidebarTab] = useState16("agenda");
|
|
4535
4727
|
const [phasesSnapshot, setPhasesSnapshot] = useState16([]);
|
|
4536
4728
|
const [textMode, setTextMode] = useState16(false);
|
|
4729
|
+
const [panelExpanded, setPanelExpanded] = useState16(false);
|
|
4730
|
+
const togglePanelExpanded = useCallback11(() => setPanelExpanded((prev) => !prev), []);
|
|
4731
|
+
const setTextModeState = useCallback11((enabled) => {
|
|
4732
|
+
setTextMode(enabled);
|
|
4733
|
+
setPanelExpanded(enabled);
|
|
4734
|
+
}, []);
|
|
4537
4735
|
const isConnected = connection !== null;
|
|
4538
4736
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
4539
4737
|
useEffect20(() => {
|
|
4540
4738
|
if (!isConnected)
|
|
4541
|
-
|
|
4542
|
-
}, [isConnected]);
|
|
4739
|
+
setTextModeState(false);
|
|
4740
|
+
}, [isConnected, setTextModeState]);
|
|
4543
4741
|
const {
|
|
4544
4742
|
modules: availableModules,
|
|
4545
4743
|
isLoading: isLoadingModules,
|
|
@@ -4612,6 +4810,34 @@ function LiveAgent(props) {
|
|
|
4612
4810
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4613
4811
|
} catch {}
|
|
4614
4812
|
}, []);
|
|
4813
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState16(() => {
|
|
4814
|
+
try {
|
|
4815
|
+
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
4816
|
+
if (Number.isFinite(saved) && saved > 0)
|
|
4817
|
+
return clampLauncherBottom(saved);
|
|
4818
|
+
} catch {}
|
|
4819
|
+
return DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
4820
|
+
});
|
|
4821
|
+
const [popsDown, setPopsDown] = useState16(() => launcherPopsDown(launcherBottomPx));
|
|
4822
|
+
const setLauncherBottomPx = useCallback11((px) => {
|
|
4823
|
+
setLauncherBottomPxState(px);
|
|
4824
|
+
setPopsDown(launcherPopsDown(px));
|
|
4825
|
+
try {
|
|
4826
|
+
localStorage.setItem("skippr_widget_bottom", String(px));
|
|
4827
|
+
} catch {}
|
|
4828
|
+
}, []);
|
|
4829
|
+
const launcherBottomPxRef = useRef16(launcherBottomPx);
|
|
4830
|
+
launcherBottomPxRef.current = launcherBottomPx;
|
|
4831
|
+
useEffect20(() => {
|
|
4832
|
+
const syncToViewport = () => {
|
|
4833
|
+
const clamped = clampLauncherBottom(launcherBottomPxRef.current);
|
|
4834
|
+
setLauncherBottomPxState(clamped);
|
|
4835
|
+
setPopsDown(launcherPopsDown(clamped));
|
|
4836
|
+
};
|
|
4837
|
+
syncToViewport();
|
|
4838
|
+
window.addEventListener("resize", syncToViewport);
|
|
4839
|
+
return () => window.removeEventListener("resize", syncToViewport);
|
|
4840
|
+
}, []);
|
|
4615
4841
|
const openPanel = useCallback11(() => setIsPanelOpen(true), []);
|
|
4616
4842
|
const closePanel = useCallback11(() => setIsPanelOpen(false), []);
|
|
4617
4843
|
const togglePanel = useCallback11(() => setIsPanelOpen((prev) => !prev), []);
|
|
@@ -4655,6 +4881,11 @@ function LiveAgent(props) {
|
|
|
4655
4881
|
variant,
|
|
4656
4882
|
position: currentPosition,
|
|
4657
4883
|
setPosition: setPositionWithPersist,
|
|
4884
|
+
launcherBottomPx,
|
|
4885
|
+
setLauncherBottomPx,
|
|
4886
|
+
popsDown,
|
|
4887
|
+
panelExpanded,
|
|
4888
|
+
togglePanelExpanded,
|
|
4658
4889
|
minimizable,
|
|
4659
4890
|
isMinimized,
|
|
4660
4891
|
expandPanel,
|
|
@@ -4671,7 +4902,7 @@ function LiveAgent(props) {
|
|
|
4671
4902
|
sidebarTab,
|
|
4672
4903
|
setSidebarTab,
|
|
4673
4904
|
textMode,
|
|
4674
|
-
setTextModeState
|
|
4905
|
+
setTextModeState,
|
|
4675
4906
|
autoFocusChat,
|
|
4676
4907
|
captureMode,
|
|
4677
4908
|
agentId,
|
|
@@ -4711,6 +4942,11 @@ function LiveAgent(props) {
|
|
|
4711
4942
|
variant,
|
|
4712
4943
|
currentPosition,
|
|
4713
4944
|
setPositionWithPersist,
|
|
4945
|
+
launcherBottomPx,
|
|
4946
|
+
setLauncherBottomPx,
|
|
4947
|
+
popsDown,
|
|
4948
|
+
panelExpanded,
|
|
4949
|
+
togglePanelExpanded,
|
|
4714
4950
|
minimizable,
|
|
4715
4951
|
isMinimized,
|
|
4716
4952
|
expandPanel,
|
|
@@ -4726,6 +4962,7 @@ function LiveAgent(props) {
|
|
|
4726
4962
|
auth.isSubmitting,
|
|
4727
4963
|
sidebarTab,
|
|
4728
4964
|
textMode,
|
|
4965
|
+
setTextModeState,
|
|
4729
4966
|
autoFocusChat,
|
|
4730
4967
|
captureMode,
|
|
4731
4968
|
agentId,
|