@skippr/live-agent-sdk 0.47.0 → 0.49.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 +357 -109
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +152 -152
- package/dist/types/components/HighlightOverlay.d.ts +1 -0
- package/dist/types/context/LiveAgentContext.d.ts +5 -0
- package/dist/types/hooks/useLauncherDrag.d.ts +7 -0
- package/dist/types/lib/launcher.d.ts +8 -0
- package/package.json +1 -1
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
|
|
|
@@ -1984,6 +2013,7 @@ function getRectInTopViewport(el) {
|
|
|
1984
2013
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1985
2014
|
var Z_INDEX = 2147483646;
|
|
1986
2015
|
var HIGHLIGHT_PADDING = 6;
|
|
2016
|
+
var HIGHLIGHT_AUTO_CLEAR_MS = 1e4;
|
|
1987
2017
|
var textDecoder = new TextDecoder;
|
|
1988
2018
|
function parseHighlightMessage(payload) {
|
|
1989
2019
|
try {
|
|
@@ -2089,6 +2119,14 @@ function HighlightOverlay() {
|
|
|
2089
2119
|
scheduleRecompute();
|
|
2090
2120
|
});
|
|
2091
2121
|
mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
|
|
2122
|
+
const onClick = (event) => {
|
|
2123
|
+
const node = event.target;
|
|
2124
|
+
if (node && target.contains(node))
|
|
2125
|
+
clearOverlay();
|
|
2126
|
+
};
|
|
2127
|
+
const targetDoc = target.ownerDocument;
|
|
2128
|
+
targetDoc.addEventListener("click", onClick, { capture: true });
|
|
2129
|
+
const autoClearTimer = window.setTimeout(clearOverlay, HIGHLIGHT_AUTO_CLEAR_MS);
|
|
2092
2130
|
return () => {
|
|
2093
2131
|
for (const win of watchedWindows) {
|
|
2094
2132
|
win.removeEventListener("scroll", onScroll, { capture: true });
|
|
@@ -2096,6 +2134,8 @@ function HighlightOverlay() {
|
|
|
2096
2134
|
}
|
|
2097
2135
|
resizeObserver.disconnect();
|
|
2098
2136
|
mutationObserver.disconnect();
|
|
2137
|
+
targetDoc.removeEventListener("click", onClick, { capture: true });
|
|
2138
|
+
window.clearTimeout(autoClearTimer);
|
|
2099
2139
|
if (pendingFrameRef.current !== null) {
|
|
2100
2140
|
window.cancelAnimationFrame(pendingFrameRef.current);
|
|
2101
2141
|
pendingFrameRef.current = null;
|
|
@@ -2143,7 +2183,93 @@ function HighlightOverlay() {
|
|
|
2143
2183
|
}
|
|
2144
2184
|
|
|
2145
2185
|
// src/components/MinimizedBubble.tsx
|
|
2146
|
-
import { useContext as useContext2, useEffect as
|
|
2186
|
+
import { useContext as useContext2, useEffect as useEffect9, useRef as useRef6, useState as useState6 } from "react";
|
|
2187
|
+
|
|
2188
|
+
// src/hooks/useLauncherDrag.ts
|
|
2189
|
+
import { useEffect as useEffect8, useRef as useRef5 } from "react";
|
|
2190
|
+
import { flushSync } from "react-dom";
|
|
2191
|
+
var DRAG_THRESHOLD_PX = 5;
|
|
2192
|
+
function useLauncherDrag(containerRef, onDrop) {
|
|
2193
|
+
const wasDraggedRef = useRef5(false);
|
|
2194
|
+
const onDropRef = useRef5(onDrop);
|
|
2195
|
+
onDropRef.current = onDrop;
|
|
2196
|
+
useEffect8(() => {
|
|
2197
|
+
const el = containerRef.current;
|
|
2198
|
+
if (!el)
|
|
2199
|
+
return;
|
|
2200
|
+
let startX = 0;
|
|
2201
|
+
let startY = 0;
|
|
2202
|
+
let dragging = false;
|
|
2203
|
+
let activePointerId = null;
|
|
2204
|
+
const onPointerMove = (event) => {
|
|
2205
|
+
if (event.pointerId !== activePointerId)
|
|
2206
|
+
return;
|
|
2207
|
+
const dx = event.clientX - startX;
|
|
2208
|
+
const dy = event.clientY - startY;
|
|
2209
|
+
if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD_PX)
|
|
2210
|
+
return;
|
|
2211
|
+
if (!dragging) {
|
|
2212
|
+
try {
|
|
2213
|
+
el.setPointerCapture(event.pointerId);
|
|
2214
|
+
} catch {}
|
|
2215
|
+
}
|
|
2216
|
+
dragging = true;
|
|
2217
|
+
wasDraggedRef.current = true;
|
|
2218
|
+
el.style.transform = `translate(${dx}px, ${dy}px)`;
|
|
2219
|
+
};
|
|
2220
|
+
const onPointerUp = (event) => {
|
|
2221
|
+
if (event.pointerId !== activePointerId)
|
|
2222
|
+
return;
|
|
2223
|
+
if (dragging) {
|
|
2224
|
+
const side = event.clientX < window.innerWidth / 2 ? "left" : "right";
|
|
2225
|
+
const pointerBottom = window.innerHeight - event.clientY - LAUNCHER_HEIGHT_PX / 2;
|
|
2226
|
+
flushSync(() => onDropRef.current({ side, bottomPx: clampLauncherBottom(pointerBottom) }));
|
|
2227
|
+
}
|
|
2228
|
+
endDrag();
|
|
2229
|
+
};
|
|
2230
|
+
const onPointerCancel = (event) => {
|
|
2231
|
+
if (event.pointerId !== activePointerId)
|
|
2232
|
+
return;
|
|
2233
|
+
endDrag();
|
|
2234
|
+
};
|
|
2235
|
+
const endDrag = () => {
|
|
2236
|
+
activePointerId = null;
|
|
2237
|
+
el.removeEventListener("pointermove", onPointerMove);
|
|
2238
|
+
el.removeEventListener("pointerup", onPointerUp);
|
|
2239
|
+
el.removeEventListener("pointercancel", onPointerCancel);
|
|
2240
|
+
el.style.transform = "";
|
|
2241
|
+
setTimeout(() => {
|
|
2242
|
+
wasDraggedRef.current = false;
|
|
2243
|
+
}, 0);
|
|
2244
|
+
};
|
|
2245
|
+
const onPointerDown = (event) => {
|
|
2246
|
+
if (event.button !== 0)
|
|
2247
|
+
return;
|
|
2248
|
+
if (activePointerId !== null) {
|
|
2249
|
+
if (dragging)
|
|
2250
|
+
return;
|
|
2251
|
+
endDrag();
|
|
2252
|
+
}
|
|
2253
|
+
activePointerId = event.pointerId;
|
|
2254
|
+
startX = event.clientX;
|
|
2255
|
+
startY = event.clientY;
|
|
2256
|
+
dragging = false;
|
|
2257
|
+
wasDraggedRef.current = false;
|
|
2258
|
+
el.addEventListener("pointermove", onPointerMove);
|
|
2259
|
+
el.addEventListener("pointerup", onPointerUp);
|
|
2260
|
+
el.addEventListener("pointercancel", onPointerCancel);
|
|
2261
|
+
};
|
|
2262
|
+
el.addEventListener("pointerdown", onPointerDown);
|
|
2263
|
+
return () => {
|
|
2264
|
+
el.removeEventListener("pointerdown", onPointerDown);
|
|
2265
|
+
el.removeEventListener("pointermove", onPointerMove);
|
|
2266
|
+
el.removeEventListener("pointerup", onPointerUp);
|
|
2267
|
+
el.removeEventListener("pointercancel", onPointerCancel);
|
|
2268
|
+
el.style.transform = "";
|
|
2269
|
+
};
|
|
2270
|
+
}, [containerRef]);
|
|
2271
|
+
return { wasDraggedRef };
|
|
2272
|
+
}
|
|
2147
2273
|
|
|
2148
2274
|
// src/lib/utils.ts
|
|
2149
2275
|
import { clsx } from "clsx";
|
|
@@ -2280,21 +2406,23 @@ function IdleLauncher({ position, onClick }) {
|
|
|
2280
2406
|
function WelcomeBubble({
|
|
2281
2407
|
message,
|
|
2282
2408
|
position,
|
|
2283
|
-
|
|
2409
|
+
popsDown,
|
|
2410
|
+
onDismiss,
|
|
2411
|
+
onClick
|
|
2284
2412
|
}) {
|
|
2285
|
-
|
|
2413
|
+
useEffect9(() => {
|
|
2286
2414
|
const timer = setTimeout(onDismiss, 5000);
|
|
2287
2415
|
return () => clearTimeout(timer);
|
|
2288
2416
|
}, [onDismiss]);
|
|
2289
2417
|
return /* @__PURE__ */ jsxs4("button", {
|
|
2290
2418
|
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
|
|
2419
|
+
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"),
|
|
2420
|
+
onClick,
|
|
2293
2421
|
"aria-label": "Dismiss",
|
|
2294
2422
|
children: [
|
|
2295
2423
|
message,
|
|
2296
2424
|
/* @__PURE__ */ jsx4("span", {
|
|
2297
|
-
className: cn("skippr:absolute skippr:
|
|
2425
|
+
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
2426
|
})
|
|
2299
2427
|
]
|
|
2300
2428
|
});
|
|
@@ -2311,6 +2439,10 @@ function MinimizedBubble({
|
|
|
2311
2439
|
const {
|
|
2312
2440
|
isStarting,
|
|
2313
2441
|
position,
|
|
2442
|
+
setPosition,
|
|
2443
|
+
launcherBottomPx,
|
|
2444
|
+
setLauncherBottomPx,
|
|
2445
|
+
popsDown,
|
|
2314
2446
|
adoptionGoals,
|
|
2315
2447
|
startAdoptionSession,
|
|
2316
2448
|
hasModuleSelector,
|
|
@@ -2323,10 +2455,10 @@ function MinimizedBubble({
|
|
|
2323
2455
|
const [goalsAutoHidden, setGoalsAutoHidden] = useState6(false);
|
|
2324
2456
|
const [isLauncherHovered, setIsLauncherHovered] = useState6(false);
|
|
2325
2457
|
const [visitHref, setVisitHref] = useState6(() => window.location.href);
|
|
2326
|
-
const revealedHrefRef =
|
|
2327
|
-
const hoverContainerRef =
|
|
2328
|
-
|
|
2329
|
-
|
|
2458
|
+
const revealedHrefRef = useRef6(null);
|
|
2459
|
+
const hoverContainerRef = useRef6(null);
|
|
2460
|
+
useEffect9(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
2461
|
+
useEffect9(() => {
|
|
2330
2462
|
const el = hoverContainerRef.current;
|
|
2331
2463
|
if (!el)
|
|
2332
2464
|
return;
|
|
@@ -2339,6 +2471,10 @@ function MinimizedBubble({
|
|
|
2339
2471
|
el.removeEventListener("mouseleave", onLeave);
|
|
2340
2472
|
};
|
|
2341
2473
|
}, []);
|
|
2474
|
+
const { wasDraggedRef } = useLauncherDrag(hoverContainerRef, ({ side, bottomPx }) => {
|
|
2475
|
+
setPosition(side);
|
|
2476
|
+
setLauncherBottomPx(bottomPx);
|
|
2477
|
+
});
|
|
2342
2478
|
const actionableModules = hasModuleSelector ? availableModules.filter((module) => {
|
|
2343
2479
|
const state = getModuleSessionState(module.currentSession, module.mode);
|
|
2344
2480
|
return state !== "completed" && state !== "expired";
|
|
@@ -2348,7 +2484,7 @@ function MinimizedBubble({
|
|
|
2348
2484
|
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
2349
2485
|
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
2350
2486
|
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && (!hasModuleSelector || hasResolvedModules);
|
|
2351
|
-
|
|
2487
|
+
useEffect9(() => {
|
|
2352
2488
|
if (!goalsEligible)
|
|
2353
2489
|
return;
|
|
2354
2490
|
if (revealedHrefRef.current === visitHref) {
|
|
@@ -2363,7 +2499,7 @@ function MinimizedBubble({
|
|
|
2363
2499
|
const matchedGoals = goalsEligible ? adoptionGoals.slice(0, MAX_GOAL_BUBBLES) : [];
|
|
2364
2500
|
const goalsHidden = goalsAutoHidden && !isLauncherHovered;
|
|
2365
2501
|
const [goalsUnmounted, setGoalsUnmounted] = useState6(false);
|
|
2366
|
-
|
|
2502
|
+
useEffect9(() => {
|
|
2367
2503
|
if (!goalsHidden) {
|
|
2368
2504
|
setGoalsUnmounted(false);
|
|
2369
2505
|
return;
|
|
@@ -2374,7 +2510,7 @@ function MinimizedBubble({
|
|
|
2374
2510
|
}, [goalsHidden]);
|
|
2375
2511
|
const visibleGoals = goalsUnmounted ? [] : matchedGoals;
|
|
2376
2512
|
const launchDefaultSession = () => {
|
|
2377
|
-
if (isStarting)
|
|
2513
|
+
if (wasDraggedRef.current || isStarting)
|
|
2378
2514
|
return;
|
|
2379
2515
|
if (!hasModuleSelector || !isAuthenticated) {
|
|
2380
2516
|
expandPanel();
|
|
@@ -2389,28 +2525,40 @@ function MinimizedBubble({
|
|
|
2389
2525
|
};
|
|
2390
2526
|
return /* @__PURE__ */ jsxs4("div", {
|
|
2391
2527
|
ref: hoverContainerRef,
|
|
2392
|
-
|
|
2528
|
+
style: { bottom: launcherBottomPx, touchAction: "none" },
|
|
2529
|
+
className: cn("skippr:fixed skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
2393
2530
|
children: [
|
|
2394
2531
|
(modulePills.length > 0 || visibleGoals.length > 0) && /* @__PURE__ */ jsxs4("div", {
|
|
2395
|
-
className: cn("skippr:absolute skippr:
|
|
2532
|
+
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
2533
|
children: [
|
|
2397
2534
|
visibleGoals.map((goal, index2) => /* @__PURE__ */ jsx4(AdoptionBubble, {
|
|
2398
2535
|
goal,
|
|
2399
|
-
onAttend:
|
|
2536
|
+
onAttend: (attended) => {
|
|
2537
|
+
if (!wasDraggedRef.current)
|
|
2538
|
+
startAdoptionSession(attended);
|
|
2539
|
+
},
|
|
2400
2540
|
appearDelayMs: (visibleGoals.length - 1 - index2) * GOAL_APPEAR_STAGGER_MS,
|
|
2401
2541
|
exitDelayMs: (visibleGoals.length - 1 - index2) * GOAL_EXIT_STAGGER_MS,
|
|
2402
2542
|
hidden: goalsHidden
|
|
2403
2543
|
}, goal.goalId)),
|
|
2404
2544
|
modulePills.map((module) => /* @__PURE__ */ jsx4(ModulePill, {
|
|
2405
2545
|
module,
|
|
2406
|
-
onSelect:
|
|
2546
|
+
onSelect: (id) => {
|
|
2547
|
+
if (!wasDraggedRef.current)
|
|
2548
|
+
selectModule(id);
|
|
2549
|
+
}
|
|
2407
2550
|
}, module.id))
|
|
2408
2551
|
]
|
|
2409
2552
|
}),
|
|
2410
2553
|
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */ jsx4(WelcomeBubble, {
|
|
2411
2554
|
message: welcomeMessage,
|
|
2412
2555
|
position,
|
|
2413
|
-
|
|
2556
|
+
popsDown,
|
|
2557
|
+
onDismiss: onDismissWelcome,
|
|
2558
|
+
onClick: () => {
|
|
2559
|
+
if (!wasDraggedRef.current)
|
|
2560
|
+
onDismissWelcome();
|
|
2561
|
+
}
|
|
2414
2562
|
}),
|
|
2415
2563
|
/* @__PURE__ */ jsx4(IdleLauncher, {
|
|
2416
2564
|
position,
|
|
@@ -2422,10 +2570,10 @@ function MinimizedBubble({
|
|
|
2422
2570
|
|
|
2423
2571
|
// src/components/PageActionHandler.tsx
|
|
2424
2572
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2425
|
-
import { useCallback as useCallback6, useEffect as
|
|
2573
|
+
import { useCallback as useCallback6, useEffect as useEffect11, useRef as useRef8, useState as useState8 } from "react";
|
|
2426
2574
|
|
|
2427
2575
|
// src/components/AgentActivityIndicator.tsx
|
|
2428
|
-
import { useEffect as
|
|
2576
|
+
import { useEffect as useEffect10, useRef as useRef7, useState as useState7 } from "react";
|
|
2429
2577
|
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2430
2578
|
var Z_INDEX2 = 2147483646;
|
|
2431
2579
|
function centerOf(element) {
|
|
@@ -2434,8 +2582,8 @@ function centerOf(element) {
|
|
|
2434
2582
|
}
|
|
2435
2583
|
function AgentActivityIndicator({ target }) {
|
|
2436
2584
|
const [position, setPosition] = useState7(null);
|
|
2437
|
-
const frameRef =
|
|
2438
|
-
|
|
2585
|
+
const frameRef = useRef7(null);
|
|
2586
|
+
useEffect10(() => {
|
|
2439
2587
|
if (!target || !target.element.isConnected) {
|
|
2440
2588
|
setPosition(null);
|
|
2441
2589
|
return;
|
|
@@ -2643,12 +2791,12 @@ function labelFor(action) {
|
|
|
2643
2791
|
}
|
|
2644
2792
|
function PageActionHandler() {
|
|
2645
2793
|
const [activity, setActivity] = useState8(null);
|
|
2646
|
-
const mountedRef =
|
|
2647
|
-
const queueRef =
|
|
2648
|
-
const drainingRef =
|
|
2649
|
-
const timersRef =
|
|
2650
|
-
const wakesRef =
|
|
2651
|
-
const indicatorTimerRef =
|
|
2794
|
+
const mountedRef = useRef8(true);
|
|
2795
|
+
const queueRef = useRef8([]);
|
|
2796
|
+
const drainingRef = useRef8(false);
|
|
2797
|
+
const timersRef = useRef8(new Set);
|
|
2798
|
+
const wakesRef = useRef8(new Set);
|
|
2799
|
+
const indicatorTimerRef = useRef8(null);
|
|
2652
2800
|
const sleep = useCallback6((ms) => {
|
|
2653
2801
|
return new Promise((resolve) => {
|
|
2654
2802
|
const wake = () => {
|
|
@@ -2726,7 +2874,7 @@ function PageActionHandler() {
|
|
|
2726
2874
|
queueRef.current.push(action);
|
|
2727
2875
|
drain();
|
|
2728
2876
|
}, [drain]);
|
|
2729
|
-
|
|
2877
|
+
useEffect11(() => {
|
|
2730
2878
|
mountedRef.current = true;
|
|
2731
2879
|
drainingRef.current = false;
|
|
2732
2880
|
return () => {
|
|
@@ -2782,6 +2930,11 @@ function useLiveAgent() {
|
|
|
2782
2930
|
hasResolvedModules,
|
|
2783
2931
|
adoptionGoals,
|
|
2784
2932
|
startAdoptionSession,
|
|
2933
|
+
launcherBottomPx,
|
|
2934
|
+
setLauncherBottomPx,
|
|
2935
|
+
popsDown,
|
|
2936
|
+
panelExpanded,
|
|
2937
|
+
togglePanelExpanded,
|
|
2785
2938
|
...publicValue
|
|
2786
2939
|
} = ctx;
|
|
2787
2940
|
return publicValue;
|
|
@@ -2819,7 +2972,7 @@ function useMediaControls() {
|
|
|
2819
2972
|
|
|
2820
2973
|
// src/hooks/useMicLevel.ts
|
|
2821
2974
|
import { useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
2822
|
-
import { useEffect as
|
|
2975
|
+
import { useEffect as useEffect12, useRef as useRef9, useState as useState9 } from "react";
|
|
2823
2976
|
var MIC_BARS = 5;
|
|
2824
2977
|
var IDLE_BAR_HEIGHT_PX = 5;
|
|
2825
2978
|
var MAX_BAR_GROWTH_PX = 17;
|
|
@@ -2828,10 +2981,10 @@ var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
|
2828
2981
|
var TALKING_HOLD_MS = 400;
|
|
2829
2982
|
function useMicLevel(enabled) {
|
|
2830
2983
|
const { microphoneTrack } = useLocalParticipant4();
|
|
2831
|
-
const barRefs =
|
|
2984
|
+
const barRefs = useRef9([]);
|
|
2832
2985
|
const [isTalking, setIsTalking] = useState9(false);
|
|
2833
2986
|
const mediaStreamTrack = microphoneTrack?.track?.mediaStreamTrack;
|
|
2834
|
-
|
|
2987
|
+
useEffect12(() => {
|
|
2835
2988
|
if (!enabled || !mediaStreamTrack) {
|
|
2836
2989
|
for (const bar of barRefs.current) {
|
|
2837
2990
|
if (bar)
|
|
@@ -2881,15 +3034,15 @@ function useMicLevel(enabled) {
|
|
|
2881
3034
|
}
|
|
2882
3035
|
|
|
2883
3036
|
// src/hooks/usePhaseUpdates.ts
|
|
2884
|
-
import { useCallback as useCallback8, useContext as useContext4, useEffect as
|
|
3037
|
+
import { useCallback as useCallback8, useContext as useContext4, useEffect as useEffect14 } from "react";
|
|
2885
3038
|
|
|
2886
3039
|
// src/hooks/useAgentState.ts
|
|
2887
3040
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2888
|
-
import { useEffect as
|
|
3041
|
+
import { useEffect as useEffect13, useState as useState10 } from "react";
|
|
2889
3042
|
function useAgentState(attributeKey, parse, initial) {
|
|
2890
3043
|
const [value, setValue] = useState10(initial);
|
|
2891
3044
|
const remoteParticipants = useRemoteParticipants();
|
|
2892
|
-
|
|
3045
|
+
useEffect13(() => {
|
|
2893
3046
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
2894
3047
|
if (agentParticipant) {
|
|
2895
3048
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -2938,7 +3091,7 @@ function usePhaseUpdates() {
|
|
|
2938
3091
|
const parse = useCallback8(parsePhases, []);
|
|
2939
3092
|
const livePhases = useAgentState("phases", parse, []);
|
|
2940
3093
|
const ctx = useContext4(LiveAgentContext);
|
|
2941
|
-
|
|
3094
|
+
useEffect14(() => {
|
|
2942
3095
|
if (livePhases.length > 0)
|
|
2943
3096
|
ctx?.setPhasesSnapshot(livePhases);
|
|
2944
3097
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -3030,7 +3183,10 @@ function SessionControlBar() {
|
|
|
3030
3183
|
activeModule,
|
|
3031
3184
|
position
|
|
3032
3185
|
} = useLiveAgent();
|
|
3033
|
-
const
|
|
3186
|
+
const internalCtx = useContext5(LiveAgentContext);
|
|
3187
|
+
const textMode = internalCtx?.textMode ?? false;
|
|
3188
|
+
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
3189
|
+
const popsDown = internalCtx?.popsDown ?? false;
|
|
3034
3190
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3035
3191
|
const { state } = useAgentVoiceState();
|
|
3036
3192
|
const { phases } = usePhaseUpdates();
|
|
@@ -3064,10 +3220,11 @@ function SessionControlBar() {
|
|
|
3064
3220
|
expandPanel();
|
|
3065
3221
|
};
|
|
3066
3222
|
return /* @__PURE__ */ jsxs6("div", {
|
|
3067
|
-
|
|
3223
|
+
style: { bottom: launcherBottomPx },
|
|
3224
|
+
className: cn("skippr:fixed skippr:z-[9999]", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
3068
3225
|
children: [
|
|
3069
3226
|
!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"),
|
|
3227
|
+
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
3228
|
children: /* @__PURE__ */ jsx7(ModulePill, {
|
|
3072
3229
|
module: agendaModule,
|
|
3073
3230
|
onSelect: openAgenda,
|
|
@@ -3212,7 +3369,7 @@ function SessionControlBar() {
|
|
|
3212
3369
|
}
|
|
3213
3370
|
|
|
3214
3371
|
// src/components/ShadowHost.tsx
|
|
3215
|
-
import { useLayoutEffect, useRef as
|
|
3372
|
+
import { useLayoutEffect, useRef as useRef10, useState as useState11 } from "react";
|
|
3216
3373
|
import { createPortal } from "react-dom";
|
|
3217
3374
|
import { jsx as jsx8, Fragment } from "react/jsx-runtime";
|
|
3218
3375
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
@@ -3229,10 +3386,10 @@ function hoistTailwindProperties(css) {
|
|
|
3229
3386
|
return css.replace(PROPERTY_RULE, "");
|
|
3230
3387
|
}
|
|
3231
3388
|
function ShadowHost({ children }) {
|
|
3232
|
-
const hostRef =
|
|
3389
|
+
const hostRef = useRef10(null);
|
|
3233
3390
|
const [shadowRoot, setShadowRoot] = useState11(null);
|
|
3234
3391
|
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}}`;
|
|
3392
|
+
@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
3393
|
useLayoutEffect(() => {
|
|
3237
3394
|
const host = hostRef.current;
|
|
3238
3395
|
if (!host || !css)
|
|
@@ -3257,7 +3414,7 @@ function ShadowHost({ children }) {
|
|
|
3257
3414
|
}
|
|
3258
3415
|
|
|
3259
3416
|
// src/components/Sidebar.tsx
|
|
3260
|
-
import { useContext as
|
|
3417
|
+
import { useContext as useContext9, useEffect as useEffect19 } from "react";
|
|
3261
3418
|
|
|
3262
3419
|
// src/hooks/useCombinedMessages.ts
|
|
3263
3420
|
import { useContext as useContext6, useMemo as useMemo5 } from "react";
|
|
@@ -3346,7 +3503,7 @@ function useCombinedMessages() {
|
|
|
3346
3503
|
}
|
|
3347
3504
|
|
|
3348
3505
|
// src/hooks/useSessionRemaining.ts
|
|
3349
|
-
import { useEffect as
|
|
3506
|
+
import { useEffect as useEffect15, useRef as useRef11, useState as useState12 } from "react";
|
|
3350
3507
|
|
|
3351
3508
|
// src/lib/format.ts
|
|
3352
3509
|
function formatTime(seconds) {
|
|
@@ -3362,9 +3519,9 @@ function parseNumber(s) {
|
|
|
3362
3519
|
// src/hooks/useSessionRemaining.ts
|
|
3363
3520
|
function useSessionRemaining() {
|
|
3364
3521
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
3365
|
-
const endTimeRef =
|
|
3522
|
+
const endTimeRef = useRef11(null);
|
|
3366
3523
|
const [remaining, setRemaining] = useState12(null);
|
|
3367
|
-
|
|
3524
|
+
useEffect15(() => {
|
|
3368
3525
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
3369
3526
|
return;
|
|
3370
3527
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -3382,7 +3539,7 @@ function useSessionRemaining() {
|
|
|
3382
3539
|
|
|
3383
3540
|
// src/hooks/useTextMode.ts
|
|
3384
3541
|
import { useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
|
|
3385
|
-
import { useCallback as useCallback9, useContext as useContext7, useRef as
|
|
3542
|
+
import { useCallback as useCallback9, useContext as useContext7, useRef as useRef12 } from "react";
|
|
3386
3543
|
var textEncoder3 = new TextEncoder;
|
|
3387
3544
|
function useTextMode() {
|
|
3388
3545
|
const ctx = useContext7(LiveAgentContext);
|
|
@@ -3391,7 +3548,7 @@ function useTextMode() {
|
|
|
3391
3548
|
}
|
|
3392
3549
|
const { textMode, setTextModeState, sidebarTab, setSidebarTab } = ctx;
|
|
3393
3550
|
const { localParticipant } = useLocalParticipant7();
|
|
3394
|
-
const confirmedTextModeRef =
|
|
3551
|
+
const confirmedTextModeRef = useRef12(false);
|
|
3395
3552
|
const toggleTextMode = useCallback9(async () => {
|
|
3396
3553
|
const next = !textMode;
|
|
3397
3554
|
setTextModeState(next);
|
|
@@ -3413,11 +3570,14 @@ function useTextMode() {
|
|
|
3413
3570
|
return { textMode, toggleTextMode };
|
|
3414
3571
|
}
|
|
3415
3572
|
|
|
3573
|
+
// src/components/ChatHeader.tsx
|
|
3574
|
+
import { useContext as useContext8 } from "react";
|
|
3575
|
+
|
|
3416
3576
|
// src/hooks/useElapsedSeconds.ts
|
|
3417
|
-
import { useEffect as
|
|
3577
|
+
import { useEffect as useEffect16, useState as useState13 } from "react";
|
|
3418
3578
|
function useElapsedSeconds(isRunning) {
|
|
3419
3579
|
const [elapsed, setElapsed] = useState13(0);
|
|
3420
|
-
|
|
3580
|
+
useEffect16(() => {
|
|
3421
3581
|
if (!isRunning) {
|
|
3422
3582
|
setElapsed(0);
|
|
3423
3583
|
return;
|
|
@@ -3435,7 +3595,10 @@ function useElapsedSeconds(isRunning) {
|
|
|
3435
3595
|
// src/components/ChatHeader.tsx
|
|
3436
3596
|
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
3437
3597
|
function ChatHeader() {
|
|
3438
|
-
const { isConnected,
|
|
3598
|
+
const { isConnected, variant } = useLiveAgent();
|
|
3599
|
+
const internalCtx = useContext8(LiveAgentContext);
|
|
3600
|
+
const panelExpanded = internalCtx?.panelExpanded ?? false;
|
|
3601
|
+
const togglePanelExpanded = internalCtx?.togglePanelExpanded ?? (() => {});
|
|
3439
3602
|
const elapsed = useElapsedSeconds(isConnected);
|
|
3440
3603
|
return /* @__PURE__ */ jsxs7("header", {
|
|
3441
3604
|
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 +3634,15 @@ function ChatHeader() {
|
|
|
3471
3634
|
})
|
|
3472
3635
|
]
|
|
3473
3636
|
}),
|
|
3474
|
-
|
|
3637
|
+
variant === "floating" && /* @__PURE__ */ jsx9("button", {
|
|
3475
3638
|
type: "button",
|
|
3476
|
-
onClick:
|
|
3477
|
-
"aria-label": "
|
|
3639
|
+
onClick: togglePanelExpanded,
|
|
3640
|
+
"aria-label": panelExpanded ? "Collapse" : "Expand",
|
|
3641
|
+
title: panelExpanded ? "Collapse" : "Expand",
|
|
3478
3642
|
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, {
|
|
3643
|
+
children: panelExpanded ? /* @__PURE__ */ jsx9(Minimize2, {
|
|
3644
|
+
className: "skippr:size-3.5"
|
|
3645
|
+
}) : /* @__PURE__ */ jsx9(Maximize2, {
|
|
3480
3646
|
className: "skippr:size-3.5"
|
|
3481
3647
|
})
|
|
3482
3648
|
})
|
|
@@ -3515,7 +3681,7 @@ function LoadingDots({ label }) {
|
|
|
3515
3681
|
}
|
|
3516
3682
|
|
|
3517
3683
|
// src/components/LoginFlow.tsx
|
|
3518
|
-
import { useCallback as useCallback10, useEffect as
|
|
3684
|
+
import { useCallback as useCallback10, useEffect as useEffect17, useRef as useRef13, useState as useState14 } from "react";
|
|
3519
3685
|
|
|
3520
3686
|
// src/components/ui/button.tsx
|
|
3521
3687
|
import { forwardRef as forwardRef3 } from "react";
|
|
@@ -3643,16 +3809,16 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3643
3809
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
3644
3810
|
const [digits, setDigits] = useState14(Array(OTP_LENGTH).fill(""));
|
|
3645
3811
|
const [resendCooldown, setResendCooldown] = useState14(0);
|
|
3646
|
-
const inputRefs =
|
|
3647
|
-
const submittedRef =
|
|
3648
|
-
|
|
3812
|
+
const inputRefs = useRef13([]);
|
|
3813
|
+
const submittedRef = useRef13(false);
|
|
3814
|
+
useEffect17(() => {
|
|
3649
3815
|
inputRefs.current[0]?.focus();
|
|
3650
3816
|
}, []);
|
|
3651
|
-
|
|
3817
|
+
useEffect17(() => {
|
|
3652
3818
|
if (error)
|
|
3653
3819
|
submittedRef.current = false;
|
|
3654
3820
|
}, [error]);
|
|
3655
|
-
|
|
3821
|
+
useEffect17(() => {
|
|
3656
3822
|
if (resendCooldown <= 0)
|
|
3657
3823
|
return;
|
|
3658
3824
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
@@ -3793,17 +3959,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3793
3959
|
}
|
|
3794
3960
|
|
|
3795
3961
|
// src/components/MessageList.tsx
|
|
3796
|
-
import {
|
|
3962
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef15 } from "react";
|
|
3797
3963
|
|
|
3798
3964
|
// src/components/ChatInput.tsx
|
|
3799
|
-
import { useEffect as
|
|
3965
|
+
import { useEffect as useEffect18, useRef as useRef14, useState as useState15 } from "react";
|
|
3800
3966
|
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3801
3967
|
var MAX_INPUT_HEIGHT = 60;
|
|
3802
3968
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3803
3969
|
const [inputText, setInputText] = useState15("");
|
|
3804
|
-
const textareaRef =
|
|
3970
|
+
const textareaRef = useRef14(null);
|
|
3805
3971
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3806
|
-
|
|
3972
|
+
useEffect18(() => {
|
|
3807
3973
|
if (autoFocus)
|
|
3808
3974
|
textareaRef.current?.focus();
|
|
3809
3975
|
}, [autoFocus]);
|
|
@@ -3941,6 +4107,7 @@ function TypingIndicator() {
|
|
|
3941
4107
|
|
|
3942
4108
|
// src/components/MessageList.tsx
|
|
3943
4109
|
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4110
|
+
var NEAR_BOTTOM_THRESHOLD_PX = 80;
|
|
3944
4111
|
function MessageList({
|
|
3945
4112
|
messages,
|
|
3946
4113
|
isStreaming,
|
|
@@ -3948,16 +4115,32 @@ function MessageList({
|
|
|
3948
4115
|
isSendingChat,
|
|
3949
4116
|
autoFocus = false
|
|
3950
4117
|
}) {
|
|
3951
|
-
const
|
|
4118
|
+
const containerRef = useRef15(null);
|
|
4119
|
+
const isPinnedToBottomRef = useRef15(true);
|
|
3952
4120
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3953
|
-
|
|
3954
|
-
|
|
4121
|
+
const trackPinnedToBottom = () => {
|
|
4122
|
+
const container = containerRef.current;
|
|
4123
|
+
if (!container)
|
|
4124
|
+
return;
|
|
4125
|
+
const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
|
|
4126
|
+
isPinnedToBottomRef.current = distanceFromBottom < NEAR_BOTTOM_THRESHOLD_PX;
|
|
4127
|
+
};
|
|
4128
|
+
useLayoutEffect2(() => {
|
|
4129
|
+
const container = containerRef.current;
|
|
4130
|
+
if (!container)
|
|
4131
|
+
return;
|
|
4132
|
+
const userSentChat = lastMessage?.role === "user" && lastMessage.source === "chat";
|
|
4133
|
+
if (!isPinnedToBottomRef.current && !userSentChat)
|
|
4134
|
+
return;
|
|
4135
|
+
container.scrollTop = container.scrollHeight;
|
|
3955
4136
|
}, [messages.length, lastMessage?.content]);
|
|
3956
4137
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3957
4138
|
return /* @__PURE__ */ jsxs13("div", {
|
|
3958
4139
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3959
4140
|
children: [
|
|
3960
4141
|
/* @__PURE__ */ jsxs13("div", {
|
|
4142
|
+
ref: containerRef,
|
|
4143
|
+
onScroll: trackPinnedToBottom,
|
|
3961
4144
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3962
4145
|
children: [
|
|
3963
4146
|
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx16(LoadingDots, {
|
|
@@ -3966,10 +4149,7 @@ function MessageList({
|
|
|
3966
4149
|
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
3967
4150
|
message
|
|
3968
4151
|
}, message.id)),
|
|
3969
|
-
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {})
|
|
3970
|
-
/* @__PURE__ */ jsx16("div", {
|
|
3971
|
-
ref: scrollRef
|
|
3972
|
-
})
|
|
4152
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {})
|
|
3973
4153
|
]
|
|
3974
4154
|
}),
|
|
3975
4155
|
/* @__PURE__ */ jsx16(ChatInput, {
|
|
@@ -4096,6 +4276,9 @@ function StartSessionPrompt({
|
|
|
4096
4276
|
|
|
4097
4277
|
// src/components/Sidebar.tsx
|
|
4098
4278
|
import { jsx as jsx20, jsxs as jsxs16, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4279
|
+
var PANEL_GAP_PX = 12;
|
|
4280
|
+
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
4281
|
+
var PANEL_MAX_HEIGHT_PX = 460;
|
|
4099
4282
|
function Sidebar({
|
|
4100
4283
|
hideControls = false,
|
|
4101
4284
|
hideHeader = false,
|
|
@@ -4127,12 +4310,25 @@ function Sidebar({
|
|
|
4127
4310
|
agentMode,
|
|
4128
4311
|
agentControls
|
|
4129
4312
|
} = useLiveAgent();
|
|
4130
|
-
const internalCtx =
|
|
4313
|
+
const internalCtx = useContext9(LiveAgentContext);
|
|
4131
4314
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
4132
4315
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
4316
|
+
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
4317
|
+
const popsDown = internalCtx?.popsDown ?? false;
|
|
4318
|
+
const panelExpanded = internalCtx?.panelExpanded ?? false;
|
|
4133
4319
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
4134
4320
|
const isFloating = variant === "floating";
|
|
4135
4321
|
const isSidebar = variant === "sidebar";
|
|
4322
|
+
const inSession = isConnected || isStarting || isPausing;
|
|
4323
|
+
const floatingBottomPx = inSession ? launcherBottomPx + SESSION_BAR_CLEARANCE_PX : triggerBottomPx(launcherBottomPx, popsDown) + IDLE_TRIGGER_CLEARANCE_PX;
|
|
4324
|
+
let floatingStyle;
|
|
4325
|
+
if (isFloating) {
|
|
4326
|
+
const availableHeight = popsDown ? `${launcherBottomPx - PANEL_GAP_PX - PANEL_VIEWPORT_MARGIN_PX}px` : `calc(100vh - ${floatingBottomPx + PANEL_VIEWPORT_MARGIN_PX}px)`;
|
|
4327
|
+
floatingStyle = {
|
|
4328
|
+
...popsDown ? { top: `calc(100vh - ${launcherBottomPx - PANEL_GAP_PX}px)` } : { bottom: floatingBottomPx },
|
|
4329
|
+
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
4330
|
+
};
|
|
4331
|
+
}
|
|
4136
4332
|
useEffect19(() => {
|
|
4137
4333
|
if (!isSidebar)
|
|
4138
4334
|
return;
|
|
@@ -4148,8 +4344,8 @@ function Sidebar({
|
|
|
4148
4344
|
};
|
|
4149
4345
|
}, [isSidebar, isPanelOpen, position]);
|
|
4150
4346
|
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 },
|
|
4347
|
+
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"),
|
|
4348
|
+
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
4153
4349
|
children: [
|
|
4154
4350
|
!hideHeader && /* @__PURE__ */ jsx20(ChatHeader, {}),
|
|
4155
4351
|
authFailed ? /* @__PURE__ */ jsx20(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx20(AuthenticatedContent, {
|
|
@@ -4217,11 +4413,11 @@ function AuthenticatedContent({
|
|
|
4217
4413
|
children: [
|
|
4218
4414
|
isConnected && /* @__PURE__ */ jsx20(ConnectedBanner, {}),
|
|
4219
4415
|
/* @__PURE__ */ jsxs16("div", {
|
|
4220
|
-
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-
|
|
4416
|
+
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-1",
|
|
4221
4417
|
children: [
|
|
4222
4418
|
/* @__PURE__ */ jsxs16("button", {
|
|
4223
4419
|
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-
|
|
4420
|
+
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
4421
|
onClick: () => onTabChange("chat"),
|
|
4226
4422
|
children: [
|
|
4227
4423
|
/* @__PURE__ */ jsx20(MessageCircle, {
|
|
@@ -4229,13 +4425,13 @@ function AuthenticatedContent({
|
|
|
4229
4425
|
}),
|
|
4230
4426
|
"Chat",
|
|
4231
4427
|
activeTab === "chat" && /* @__PURE__ */ jsx20("span", {
|
|
4232
|
-
className: "skippr:absolute skippr:-bottom-
|
|
4428
|
+
className: "skippr:absolute skippr:-bottom-1 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4233
4429
|
})
|
|
4234
4430
|
]
|
|
4235
4431
|
}),
|
|
4236
4432
|
showAgenda && /* @__PURE__ */ jsxs16("button", {
|
|
4237
4433
|
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-
|
|
4434
|
+
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
4435
|
onClick: () => onTabChange("agenda"),
|
|
4240
4436
|
children: [
|
|
4241
4437
|
/* @__PURE__ */ jsx20(Calendar, {
|
|
@@ -4243,7 +4439,7 @@ function AuthenticatedContent({
|
|
|
4243
4439
|
}),
|
|
4244
4440
|
"Agenda",
|
|
4245
4441
|
activeTab === "agenda" && /* @__PURE__ */ jsx20("span", {
|
|
4246
|
-
className: "skippr:absolute skippr:-bottom-
|
|
4442
|
+
className: "skippr:absolute skippr:-bottom-1 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4247
4443
|
})
|
|
4248
4444
|
]
|
|
4249
4445
|
})
|
|
@@ -4286,7 +4482,7 @@ function AuthenticatedContent({
|
|
|
4286
4482
|
children: [
|
|
4287
4483
|
isConnected && !isDisconnecting && /* @__PURE__ */ jsx20(ModeToggleRow, {}),
|
|
4288
4484
|
/* @__PURE__ */ jsx20("div", {
|
|
4289
|
-
className: "skippr:px-4 skippr:
|
|
4485
|
+
className: "skippr:px-4 skippr:pt-1.5 skippr:pb-2 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
4290
4486
|
children: "Powered by Skippr"
|
|
4291
4487
|
})
|
|
4292
4488
|
]
|
|
@@ -4297,11 +4493,11 @@ function AuthenticatedContent({
|
|
|
4297
4493
|
function ModeToggleRow() {
|
|
4298
4494
|
const { textMode, toggleTextMode } = useTextMode();
|
|
4299
4495
|
return /* @__PURE__ */ jsx20("div", {
|
|
4300
|
-
className: "skippr:flex skippr:justify-center skippr:px-3 skippr:pt-
|
|
4496
|
+
className: "skippr:flex skippr:justify-center skippr:px-3 skippr:pt-2 skippr:pb-0",
|
|
4301
4497
|
children: /* @__PURE__ */ jsx20("button", {
|
|
4302
4498
|
type: "button",
|
|
4303
4499
|
"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-
|
|
4500
|
+
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
4501
|
onClick: () => void toggleTextMode(),
|
|
4306
4502
|
children: textMode ? /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4307
4503
|
children: [
|
|
@@ -4372,6 +4568,9 @@ function ConnectedBody({
|
|
|
4372
4568
|
}, "chat");
|
|
4373
4569
|
}
|
|
4374
4570
|
|
|
4571
|
+
// src/components/SidebarTrigger.tsx
|
|
4572
|
+
import { useContext as useContext10 } from "react";
|
|
4573
|
+
|
|
4375
4574
|
// src/components/Logo.tsx
|
|
4376
4575
|
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4377
4576
|
function Logo({ className }) {
|
|
@@ -4422,6 +4621,9 @@ function SidebarTrigger() {
|
|
|
4422
4621
|
isStarting,
|
|
4423
4622
|
isPausing
|
|
4424
4623
|
} = useLiveAgent();
|
|
4624
|
+
const internalCtx = useContext10(LiveAgentContext);
|
|
4625
|
+
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
4626
|
+
const popsDown = internalCtx?.popsDown ?? false;
|
|
4425
4627
|
if (isMinimized || isConnected || isStarting || isPausing)
|
|
4426
4628
|
return null;
|
|
4427
4629
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
@@ -4430,7 +4632,8 @@ function SidebarTrigger() {
|
|
|
4430
4632
|
onClick: handleClick,
|
|
4431
4633
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
4432
4634
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
4433
|
-
|
|
4635
|
+
style: { bottom: triggerBottomPx(launcherBottomPx, popsDown) },
|
|
4636
|
+
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
4637
|
children: isPanelOpen ? /* @__PURE__ */ jsx22(ChevronDown, {
|
|
4435
4638
|
className: "skippr:size-5"
|
|
4436
4639
|
}) : /* @__PURE__ */ jsx22(Logo, {
|
|
@@ -4521,7 +4724,7 @@ function LiveAgent(props) {
|
|
|
4521
4724
|
onStartError: expandOnSessionStartError,
|
|
4522
4725
|
onDisconnect: minimizeOnSessionDisconnect
|
|
4523
4726
|
});
|
|
4524
|
-
const teardownInFlightRef =
|
|
4727
|
+
const teardownInFlightRef = useRef16(false);
|
|
4525
4728
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4526
4729
|
const handleRoomDisconnected = useCallback11(() => {
|
|
4527
4730
|
if (teardownInFlightRef.current)
|
|
@@ -4534,12 +4737,18 @@ function LiveAgent(props) {
|
|
|
4534
4737
|
const [sidebarTab, setSidebarTab] = useState16("agenda");
|
|
4535
4738
|
const [phasesSnapshot, setPhasesSnapshot] = useState16([]);
|
|
4536
4739
|
const [textMode, setTextMode] = useState16(false);
|
|
4740
|
+
const [panelExpanded, setPanelExpanded] = useState16(false);
|
|
4741
|
+
const togglePanelExpanded = useCallback11(() => setPanelExpanded((prev) => !prev), []);
|
|
4742
|
+
const setTextModeState = useCallback11((enabled) => {
|
|
4743
|
+
setTextMode(enabled);
|
|
4744
|
+
setPanelExpanded(enabled);
|
|
4745
|
+
}, []);
|
|
4537
4746
|
const isConnected = connection !== null;
|
|
4538
4747
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
4539
4748
|
useEffect20(() => {
|
|
4540
4749
|
if (!isConnected)
|
|
4541
|
-
|
|
4542
|
-
}, [isConnected]);
|
|
4750
|
+
setTextModeState(false);
|
|
4751
|
+
}, [isConnected, setTextModeState]);
|
|
4543
4752
|
const {
|
|
4544
4753
|
modules: availableModules,
|
|
4545
4754
|
isLoading: isLoadingModules,
|
|
@@ -4612,6 +4821,34 @@ function LiveAgent(props) {
|
|
|
4612
4821
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4613
4822
|
} catch {}
|
|
4614
4823
|
}, []);
|
|
4824
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState16(() => {
|
|
4825
|
+
try {
|
|
4826
|
+
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
4827
|
+
if (Number.isFinite(saved) && saved > 0)
|
|
4828
|
+
return clampLauncherBottom(saved);
|
|
4829
|
+
} catch {}
|
|
4830
|
+
return DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
4831
|
+
});
|
|
4832
|
+
const [popsDown, setPopsDown] = useState16(() => launcherPopsDown(launcherBottomPx));
|
|
4833
|
+
const setLauncherBottomPx = useCallback11((px) => {
|
|
4834
|
+
setLauncherBottomPxState(px);
|
|
4835
|
+
setPopsDown(launcherPopsDown(px));
|
|
4836
|
+
try {
|
|
4837
|
+
localStorage.setItem("skippr_widget_bottom", String(px));
|
|
4838
|
+
} catch {}
|
|
4839
|
+
}, []);
|
|
4840
|
+
const launcherBottomPxRef = useRef16(launcherBottomPx);
|
|
4841
|
+
launcherBottomPxRef.current = launcherBottomPx;
|
|
4842
|
+
useEffect20(() => {
|
|
4843
|
+
const syncToViewport = () => {
|
|
4844
|
+
const clamped = clampLauncherBottom(launcherBottomPxRef.current);
|
|
4845
|
+
setLauncherBottomPxState(clamped);
|
|
4846
|
+
setPopsDown(launcherPopsDown(clamped));
|
|
4847
|
+
};
|
|
4848
|
+
syncToViewport();
|
|
4849
|
+
window.addEventListener("resize", syncToViewport);
|
|
4850
|
+
return () => window.removeEventListener("resize", syncToViewport);
|
|
4851
|
+
}, []);
|
|
4615
4852
|
const openPanel = useCallback11(() => setIsPanelOpen(true), []);
|
|
4616
4853
|
const closePanel = useCallback11(() => setIsPanelOpen(false), []);
|
|
4617
4854
|
const togglePanel = useCallback11(() => setIsPanelOpen((prev) => !prev), []);
|
|
@@ -4655,6 +4892,11 @@ function LiveAgent(props) {
|
|
|
4655
4892
|
variant,
|
|
4656
4893
|
position: currentPosition,
|
|
4657
4894
|
setPosition: setPositionWithPersist,
|
|
4895
|
+
launcherBottomPx,
|
|
4896
|
+
setLauncherBottomPx,
|
|
4897
|
+
popsDown,
|
|
4898
|
+
panelExpanded,
|
|
4899
|
+
togglePanelExpanded,
|
|
4658
4900
|
minimizable,
|
|
4659
4901
|
isMinimized,
|
|
4660
4902
|
expandPanel,
|
|
@@ -4671,7 +4913,7 @@ function LiveAgent(props) {
|
|
|
4671
4913
|
sidebarTab,
|
|
4672
4914
|
setSidebarTab,
|
|
4673
4915
|
textMode,
|
|
4674
|
-
setTextModeState
|
|
4916
|
+
setTextModeState,
|
|
4675
4917
|
autoFocusChat,
|
|
4676
4918
|
captureMode,
|
|
4677
4919
|
agentId,
|
|
@@ -4711,6 +4953,11 @@ function LiveAgent(props) {
|
|
|
4711
4953
|
variant,
|
|
4712
4954
|
currentPosition,
|
|
4713
4955
|
setPositionWithPersist,
|
|
4956
|
+
launcherBottomPx,
|
|
4957
|
+
setLauncherBottomPx,
|
|
4958
|
+
popsDown,
|
|
4959
|
+
panelExpanded,
|
|
4960
|
+
togglePanelExpanded,
|
|
4714
4961
|
minimizable,
|
|
4715
4962
|
isMinimized,
|
|
4716
4963
|
expandPanel,
|
|
@@ -4726,6 +4973,7 @@ function LiveAgent(props) {
|
|
|
4726
4973
|
auth.isSubmitting,
|
|
4727
4974
|
sidebarTab,
|
|
4728
4975
|
textMode,
|
|
4976
|
+
setTextModeState,
|
|
4729
4977
|
autoFocusChat,
|
|
4730
4978
|
captureMode,
|
|
4731
4979
|
agentId,
|