ajaxter-chat 3.0.17 → 3.2.0

package/dist/components/ChatWidget.js

@@ -1,223 +1,327 @@
+"use strict";
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { loadLocalConfig } from '../config';
-import { mergeTheme } from '../utils/theme';
-import { useRemoteConfig } from '../hooks/useRemoteConfig';
-import { useChat } from '../hooks/useChat';
-import { useWebRTC } from '../hooks/useWebRTC';
-import { saveSession, loadSession } from '../utils/widgetSession';
-import { playMessageSound, getMessageSoundEnabled, setMessageSoundEnabled } from '../utils/messageSound';
-import { HomeScreen } from './HomeScreen';
-import { UserListScreen } from './UserListScreen';
-import { ChatScreen } from './ChatScreen';
-import { RecentChatsScreen } from './RecentChatsScreen';
-import { TicketScreen } from './TicketScreen';
-import { TicketDetailScreen } from './TicketDetailScreen';
-import { TicketFormScreen } from './TicketFormScreen';
-import { BlockListScreen } from './BlockList';
-import { CallScreen } from './CallScreen';
-import { MiniCallBar } from './MiniCallBar';
-import { MaintenanceView } from './MaintenanceView';
-import { BottomTabs } from './Tabs/BottomTabs';
-import { ViewerBlockedScreen } from './ViewerBlockedScreen';
-import { PermissionsGateScreen } from './PermissionsGateScreen';
-import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
-export const ChatWidget = ({ theme: localTheme, viewer }) => {
-    var _a, _b, _c, _d, _e;
-    /* SSR guard */
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => { setMounted(true); }, []);
-    /* Env config */
-    const { apiKey, widgetId } = loadLocalConfig();
-    /* Remote config */
-    const { data, loading: cfgLoading, error: cfgError } = useRemoteConfig(apiKey, widgetId);
-    /* Merged theme — remote config overrides defaults, local prop overrides both */
-    const theme = mergeTheme((data === null || data === void 0 ? void 0 : data.widget) ? { primaryColor: data.widget.primaryColor, buttonLabel: data.widget.buttonLabel, buttonPosition: data.widget.buttonPosition } : undefined, localTheme);
-    /* Drawer open state */
-    const [isOpen, setIsOpen] = useState(false);
-    const [closing, setClosing] = useState(false); // for slide-out animation
-    /** True when user hid the drawer during ringing/connected call; WebRTC session stays active. */
-    const [callMinimized, setCallMinimized] = useState(false);
-    /* Navigation */
-    const [activeTab, setActiveTab] = useState('home');
-    const [screen, setScreen] = useState('home');
-    const [userListCtx, setUserListCtx] = useState('support');
-    const [chatReturnCtx, setChatReturnCtx] = useState('conversation');
-    const [viewingTicketId, setViewingTicketId] = useState(null);
-    const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
-    /** Stagger list animation only when opening from home burger menu */
-    const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
-    /** Microphone, geolocation, and screen capture granted for this tab */
-    const [permissionsOk, setPermissionsOk] = useState(false);
-    /* App state */
-    const [tickets, setTickets] = useState((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
-    const [recentChats, setRecentChats] = useState([]);
-    const [blockedUids, setBlockedUids] = useState((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
-    /* Sync remote data into local state once loaded */
-    useEffect(() => {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWidget = void 0;
+const react_1 = __importStar(require("react"));
+const config_1 = require("../config");
+const theme_1 = require("../utils/theme");
+const useRemoteConfig_1 = require("../hooks/useRemoteConfig");
+const useChat_1 = require("../hooks/useChat");
+const useWebRTC_1 = require("../hooks/useWebRTC");
+const useSocket_1 = require("../hooks/useSocket");
+const widgetSession_1 = require("../utils/widgetSession");
+const messageSound_1 = require("../utils/messageSound");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const HomeScreen_1 = require("./HomeScreen");
+const UserListScreen_1 = require("./UserListScreen");
+const ChatScreen_1 = require("./ChatScreen");
+const RecentChatsScreen_1 = require("./RecentChatsScreen");
+const TicketScreen_1 = require("./TicketScreen");
+const TicketDetailScreen_1 = require("./TicketDetailScreen");
+const TicketFormScreen_1 = require("./TicketFormScreen");
+const BlockList_1 = require("./BlockList");
+const CallScreen_1 = require("./CallScreen");
+const MiniCallBar_1 = require("./MiniCallBar");
+const MaintenanceView_1 = require("./MaintenanceView");
+const BottomTabs_1 = require("./Tabs/BottomTabs");
+const ViewerBlockedScreen_1 = require("./ViewerBlockedScreen");
+const PermissionsGateScreen_1 = require("./PermissionsGateScreen");
+const widgetPermissions_1 = require("../utils/widgetPermissions");
+function getPanelGeometry(displayMode, buttonPosition, ajaxterMaximized) {
+    var _a, _b, _c, _d;
+    const w = (_b = (_a = ajaxterMaximized === null || ajaxterMaximized === void 0 ? void 0 : ajaxterMaximized.desktop) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 550;
+    const h = (_d = (_c = ajaxterMaximized === null || ajaxterMaximized === void 0 ? void 0 : ajaxterMaximized.desktop) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 600;
+    if (displayMode === 'popup') {
+        // Centered modal / popup
+        return {
+            panel: {
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: `min(${w}px, 96vw)`,
+                height: `min(${h}px, 94vh)`,
+                maxWidth: '100vw',
+                maxHeight: '100vh',
+                borderRadius: 16,
+                boxShadow: '0 24px 64px rgba(0,0,0,0.28)',
+                zIndex: 9998,
+                backgroundColor: '#fff',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+            },
+            enterClass: 'cw-popup-enter',
+            exitClass: 'cw-popup-exit',
+            backdrop: {
+                position: 'fixed', inset: 0, zIndex: 9997,
+                backgroundColor: 'rgba(0,0,0,0.45)',
+                backdropFilter: 'blur(2px)',
+            },
+        };
+    }
+    if (displayMode === 'inline') {
+        // Embedded — no fixed positioning, caller wraps it
+        return {
+            panel: {
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+                backgroundColor: '#fff',
+            },
+            enterClass: '',
+            exitClass: '',
+        };
+    }
+    // Default: slider (side drawer)
+    const isLeft = buttonPosition === 'bottom-left';
+    return {
+        panel: {
+            position: 'fixed',
+            top: 0, bottom: 0,
+            [isLeft ? 'left' : 'right']: 0,
+            width: 'min(380px, 100vw)',
+            maxWidth: '100vw',
+            borderTopLeftRadius: isLeft ? 0 : 16,
+            borderBottomLeftRadius: isLeft ? 0 : 16,
+            borderTopRightRadius: isLeft ? 16 : 0,
+            borderBottomRightRadius: isLeft ? 16 : 0,
+            boxShadow: isLeft ? '4px 0 40px rgba(0,0,0,0.18)' : '-4px 0 40px rgba(0,0,0,0.18)',
+            zIndex: 9998,
+            backgroundColor: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        },
+        enterClass: isLeft ? 'cw-slideInLeft' : 'cw-slideInRight',
+        exitClass: isLeft ? 'cw-slideOutLeft' : 'cw-slideOutRight',
+        backdrop: {
+            position: 'fixed', inset: 0, zIndex: 9997,
+            backgroundColor: 'rgba(0,0,0,0.35)',
+        },
+    };
+}
+// ─── ChatWidget ───────────────────────────────────────────────────────────────
+const ChatWidget = ({ theme: localTheme, viewer }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => { setMounted(true); }, []);
+    const { apiKey, widgetId, socketUrl } = (0, config_1.loadLocalConfig)();
+    const { data, loading: cfgLoading, error: cfgError } = (0, useRemoteConfig_1.useRemoteConfig)(apiKey, widgetId);
+    const theme = (0, theme_1.mergeTheme)((data === null || data === void 0 ? void 0 : data.widget) ? {
+        primaryColor: data.widget.primaryColor,
+        buttonLabel: data.widget.buttonLabel,
+        buttonPosition: data.widget.buttonPosition,
+    } : undefined, localTheme);
+    // Pull real colours from Ajaxter settings if available
+    const headerBg = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : theme.primaryColor;
+    const agentBg = (_h = (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings) === null || _e === void 0 ? void 0 : _e.theme) === null || _f === void 0 ? void 0 : _f.agent) === null || _g === void 0 ? void 0 : _g.messageBackground) !== null && _h !== void 0 ? _h : '#54aadd';
+    const visitorBg = (_m = (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings) === null || _j === void 0 ? void 0 : _j.theme) === null || _k === void 0 ? void 0 : _k.visitor) === null || _l === void 0 ? void 0 : _l.messageBackground) !== null && _m !== void 0 ? _m : '#e5e5e5';
+    const displayMode = (_o = data === null || data === void 0 ? void 0 : data.widget.displayMode) !== null && _o !== void 0 ? _o : 'slider';
+    const ajaxterSettings = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings;
+    // Minimized button style from Ajaxter settings
+    const minimizedDesktop = (_p = ajaxterSettings === null || ajaxterSettings === void 0 ? void 0 : ajaxterSettings.minimized) === null || _p === void 0 ? void 0 : _p.desktop;
+    const btnType = (_q = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.type) !== null && _q !== void 0 ? _q : 'slide';
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [closing, setClosing] = (0, react_1.useState)(false);
+    const [callMinimized, setCallMinimized] = (0, react_1.useState)(false);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('home');
+    const [screen, setScreen] = (0, react_1.useState)('home');
+    const [userListCtx, setUserListCtx] = (0, react_1.useState)('support');
+    const [chatReturnCtx, setChatReturnCtx] = (0, react_1.useState)('conversation');
+    const [viewingTicketId, setViewingTicketId] = (0, react_1.useState)(null);
+    const [messageSoundEnabled, setMessageSoundEnabledState] = (0, react_1.useState)(true);
+    const [listEntranceAnimation, setListEntranceAnimation] = (0, react_1.useState)(false);
+    const [permissionsOk, setPermissionsOk] = (0, react_1.useState)(false);
+    const [socketStatus, setSocketStatus] = (0, react_1.useState)('disconnected');
+    const [typingUsers, setTypingUsers] = (0, react_1.useState)(new Set());
+    const [tickets, setTickets] = (0, react_1.useState)([]);
+    const [recentChats, setRecentChats] = (0, react_1.useState)([]);
+    const [blockedUids, setBlockedUids] = (0, react_1.useState)([]);
+    // Sync remote data once loaded
+    (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
-        if (data) {
-            setTickets(data.sampleTickets);
-            setBlockedUids(data.blockedUsers);
-            const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
-            const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
-            const usr = pid ? ((_c = data.users) !== null && _c !== void 0 ? _c : []).filter(u => u.project === pid) : ((_d = data.users) !== null && _d !== void 0 ? _d : []);
-            const all = [...devs, ...usr];
-            const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
-                const user = all.find(u => u.uid === uid);
-                if (!user || msgs.length === 0)
-                    return null;
-                const last = msgs[msgs.length - 1];
-                return {
-                    id: `rc_${uid}`,
-                    user,
-                    lastMessage: last.text,
-                    lastTime: last.timestamp,
-                    unread: Math.floor(Math.random() * 3),
-                    isPaused: false,
-                };
-            }).filter(Boolean);
-            setRecentChats(recents);
-        }
+        if (!data)
+            return;
+        setTickets(data.sampleTickets);
+        setBlockedUids(data.blockedUsers);
+        const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
+        const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
+        const usr = pid ? ((_c = data.users) !== null && _c !== void 0 ? _c : []).filter(u => u.project === pid) : ((_d = data.users) !== null && _d !== void 0 ? _d : []);
+        const all = [...devs, ...usr];
+        const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
+            const user = all.find(u => u.uid === uid);
+            if (!user || msgs.length === 0)
+                return null;
+            const last = msgs[msgs.length - 1];
+            return { id: `rc_${uid}`, user, lastMessage: last.text, lastTime: last.timestamp, unread: 0, isPaused: false };
+        }).filter(Boolean);
+        setRecentChats(recents);
     }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
-    /* Chat hook */
-    const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages, } = useChat();
-    /* WebRTC hook */
-    const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
+    // ── Socket ────────────────────────────────────────────────────────────────
+    const viewerUidForSocket = ((_t = (_r = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _r !== void 0 ? _r : (_s = data === null || data === void 0 ? void 0 : data.widget) === null || _s === void 0 ? void 0 : _s.viewerUid) !== null && _t !== void 0 ? _t : '').trim();
+    const { joinRoom, leaveRoom, emitMessage, emitPauseToggle, emitReport, emitBlock, emitUnblock, emitTransfer, emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd, emitAddParticipant, emitPresence, emitTicketCreate, emitTicketUpdate, status: _socketStatus, } = (0, useSocket_1.useSocket)({
+        widgetId,
+        viewerUid: viewerUidForSocket,
+        serverUrl: socketUrl,
+        onMessage: (msg) => {
+            receiveMessage(msg);
+            if (messageSoundEnabled && msg.senderId !== 'me')
+                (0, messageSound_1.playMessageSound)();
+            setRecentChats(prev => prev.map(r => r.user.uid === msg.senderId || r.user.uid === msg.receiverId
+                ? Object.assign(Object.assign({}, r), { lastMessage: msg.text, lastTime: msg.timestamp, unread: r.unread + 1 }) : r));
+        },
+        onMessageAck: ({ messageId, status }) => { updateMessageStatus(messageId, status); },
+        onChatPaused: (_roomId, paused) => {
+            if (activeUser)
+                setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: paused }) : r));
+        },
+        onTypingStart: (roomId, userId) => {
+            setTypingUsers(prev => { const s = new Set(prev); s.add(userId); return s; });
+        },
+        onTypingStop: (_roomId, userId) => {
+            setTypingUsers(prev => { const s = new Set(prev); s.delete(userId); return s; });
+        },
+        onCallOffer: async (offer, fromUid, callId) => {
+            var _a, _b;
+            const allUsers = [...((_a = data === null || data === void 0 ? void 0 : data.developers) !== null && _a !== void 0 ? _a : []), ...((_b = data === null || data === void 0 ? void 0 : data.users) !== null && _b !== void 0 ? _b : [])];
+            const peer = allUsers.find(u => u.uid === fromUid);
+            if (peer) {
+                await acceptCall(offer, peer, callId);
+                setScreen('call');
+                setIsOpen(true);
+            }
+        },
+        onCallEnd: () => { _endCall(); },
+        onUserStatus: (uid, status) => {
+            setRecentChats(prev => prev.map(r => r.user.uid === uid ? Object.assign(Object.assign({}, r), { user: Object.assign(Object.assign({}, r.user), { status }) }) : r));
+        },
+        onTicketCreated: (t) => { if (t)
+            setTickets(prev => [t, ...prev]); },
+        onTicketUpdated: (t) => {
+            if (t)
+                setTickets(prev => prev.map(x => x.id === t.id ? t : x));
+        },
+        onError: (code, msg) => console.error('[ChatWidget] socket error:', code, msg),
+    });
+    (0, react_1.useEffect)(() => { setSocketStatus(_socketStatus); }, [_socketStatus]);
+    // ── Chat hook ─────────────────────────────────────────────────────────────
+    const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, receiveMessage, updateMessageStatus, togglePause: _togglePause, reportChat: _reportChat, clearChat, setMessages, } = (0, useChat_1.useChat)([], {
+        onEmitMessage: (msg) => emitMessage(msg),
+        onEmitPause: (roomId, targetUid, paused) => emitPauseToggle(roomId, targetUid, paused),
+        onEmitReport: (roomId) => emitReport(roomId),
+    });
+    // ── WebRTC hook ───────────────────────────────────────────────────────────
+    const { session: callSession, localVideoRef, remoteVideoRef, startCall: _startCall, acceptCall, addIceCandidate, endCall: _endCall, toggleMute, toggleCamera, } = (0, useWebRTC_1.useWebRTC)({
+        onOfferReady: (offer, toUid, callId) => emitCallOffer(offer, toUid, callId),
+        onAnswerReady: (answer, toUid, callId) => emitCallAnswer(answer, toUid, callId),
+        onIceCandidateReady: (candidate, toUid) => emitIceCandidate(candidate, toUid),
+        onCallEnded: (callId, toUid) => emitCallEnd(callId, toUid),
+    });
     const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
-    useEffect(() => {
-        if (!callInProgress)
-            setCallMinimized(false);
-    }, [callInProgress]);
-    /* ── Drawer open/close with slide animation ───────────────────────────── */
-    const openDrawer = () => {
-        setClosing(false);
-        setIsOpen(true);
-        setCallMinimized(false);
-    };
-    const persistWidgetState = useCallback(() => {
+    (0, react_1.useEffect)(() => { if (!callInProgress)
+        setCallMinimized(false); }, [callInProgress]);
+    // ── Drawer open / close ───────────────────────────────────────────────────
+    const openDrawer = () => { setClosing(false); setIsOpen(true); setCallMinimized(false); };
+    const persistWidgetState = (0, react_1.useCallback)(() => {
         var _a;
         const w = data === null || data === void 0 ? void 0 : data.widget;
         if (!w)
             return;
-        saveSession(w.id, {
-            screen,
-            activeTab,
-            userListCtx,
-            activeUserUid: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null,
-            messages,
-            viewingTicketId,
-            chatReturnCtx,
-        });
+        (0, widgetSession_1.saveSession)(w.id, { screen, activeTab, userListCtx, activeUserUid: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null, messages, viewingTicketId, chatReturnCtx });
     }, [data === null || data === void 0 ? void 0 : data.widget, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx]);
-    const closeDrawer = useCallback(() => {
+    const closeDrawer = (0, react_1.useCallback)(() => {
         persistWidgetState();
+        if (displayMode === 'inline')
+            return; // inline is always open
         setClosing(true);
-        setTimeout(() => {
-            setIsOpen(false);
-            setClosing(false);
-        }, 300);
-    }, [persistWidgetState]);
-    useEffect(() => {
+        setTimeout(() => { setIsOpen(false); setClosing(false); }, 300);
+    }, [persistWidgetState, displayMode]);
+    (0, react_1.useEffect)(() => {
         var _a;
         const id = (_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.id;
         if (!id)
             return;
-        setPermissionsOk(hasStoredPermissionsGrant(id));
-    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.id]);
-    const restoredRef = useRef(false);
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
+        setPermissionsOk((0, widgetPermissions_1.hasStoredPermissionsGrant)(id));
+    }, [(_u = data === null || data === void 0 ? void 0 : data.widget) === null || _u === void 0 ? void 0 : _u.id]);
+    // Session restore
+    const restoredRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
         if (!(data === null || data === void 0 ? void 0 : data.widget) || restoredRef.current)
             return;
         const w = data.widget;
-        setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
-        const uidForBlock = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
-        let viewerIsBlocked = w.viewerBlocked === true;
-        if (!viewerIsBlocked && uidForBlock) {
-            const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
-            viewerIsBlocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
-        }
-        if (viewerIsBlocked) {
-            clearChat();
-            setScreen('home');
-            setActiveTab('home');
-            setViewingTicketId(null);
-            restoredRef.current = true;
-            return;
-        }
-        const p = loadSession(w.id);
+        setMessageSoundEnabledState((0, messageSound_1.getMessageSoundEnabled)(w.id));
+        const p = (0, widgetSession_1.loadSession)(w.id);
         if (p) {
             setScreen(p.screen);
             setActiveTab(p.activeTab);
             setUserListCtx(p.userListCtx);
-            setViewingTicketId((_c = p.viewingTicketId) !== null && _c !== void 0 ? _c : null);
-            setChatReturnCtx((_d = p.chatReturnCtx) !== null && _d !== void 0 ? _d : 'conversation');
+            setViewingTicketId((_a = p.viewingTicketId) !== null && _a !== void 0 ? _a : null);
+            setChatReturnCtx((_b = p.chatReturnCtx) !== null && _b !== void 0 ? _b : 'conversation');
             if (p.activeUserUid) {
-                const pid = (_e = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _e === void 0 ? void 0 : _e.trim();
-                const pool = pid
-                    ? [...data.developers, ...data.users].filter(u => u.project === pid)
-                    : [...data.developers, ...data.users];
+                const pool = [...data.developers, ...data.users];
                 const u = pool.find(x => x.uid === p.activeUserUid);
                 if (u) {
-                    const hist = Array.isArray(p.messages) && p.messages.length
-                        ? p.messages
-                        : ((_f = data.sampleChats[u.uid]) !== null && _f !== void 0 ? _f : []);
+                    const hist = Array.isArray(p.messages) && p.messages.length ? p.messages : ((_c = data.sampleChats[u.uid]) !== null && _c !== void 0 ? _c : []);
                     selectUser(u, hist);
+                    const roomId = [u.uid, viewerUidForSocket].sort().join('_');
+                    joinRoom(roomId);
                 }
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid]);
-    useEffect(() => {
-        var _a, _b;
-        if (!(data === null || data === void 0 ? void 0 : data.widget))
-            return;
-        const w = data.widget;
-        const uid = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
-        let blocked = w.viewerBlocked === true;
-        if (!blocked && uid) {
-            const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
-            blocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
-        }
-        if (!blocked)
-            return;
-        clearChat();
-        setScreen('home');
-        setActiveTab('home');
-        setViewingTicketId(null);
-    }, [data === null || data === void 0 ? void 0 : data.widget, data === null || data === void 0 ? void 0 : data.developers, data === null || data === void 0 ? void 0 : data.users, viewer === null || viewer === void 0 ? void 0 : viewer.uid, clearChat]);
-    useEffect(() => {
+    }, [data, selectUser, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid, viewerUidForSocket, joinRoom]);
+    (0, react_1.useEffect)(() => {
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
         persistWidgetState();
-    }, [(_d = data === null || data === void 0 ? void 0 : data.widget) === null || _d === void 0 ? void 0 : _d.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
-    const incomingSoundRef = useRef(0);
-    useEffect(() => {
-        incomingSoundRef.current = messages.length;
-    }, [activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid]);
-    useEffect(() => {
-        if (!messageSoundEnabled || !activeUser || !(data === null || data === void 0 ? void 0 : data.widget))
-            return;
-        if (messages.length < incomingSoundRef.current) {
-            incomingSoundRef.current = messages.length;
-            return;
-        }
-        const added = messages.slice(incomingSoundRef.current);
-        incomingSoundRef.current = messages.length;
-        if (added.some(m => m.senderId !== 'me'))
-            playMessageSound();
-    }, [messages, messageSoundEnabled, activeUser, data === null || data === void 0 ? void 0 : data.widget]);
-    const toggleMessageSound = useCallback((enabled) => {
+    }, [(_v = data === null || data === void 0 ? void 0 : data.widget) === null || _v === void 0 ? void 0 : _v.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
+    const toggleMessageSound = (0, react_1.useCallback)((enabled) => {
         const w = data === null || data === void 0 ? void 0 : data.widget;
         if (!w)
             return;
-        setMessageSoundEnabled(w.id, enabled);
+        (0, messageSound_1.setMessageSoundEnabled)(w.id, enabled);
         setMessageSoundEnabledState(enabled);
     }, [data === null || data === void 0 ? void 0 : data.widget]);
-    /* ── Navigation ──────────────────────────────────────────────────────── */
-    const handleCardClick = useCallback((ctx, options) => {
+    // ── Navigation ────────────────────────────────────────────────────────────
+    const handleCardClick = (0, react_1.useCallback)((ctx, options) => {
         setListEntranceAnimation(!!(options === null || options === void 0 ? void 0 : options.fromMenu));
         if (ctx === 'ticket') {
             setActiveTab('tickets');
@@ -228,7 +332,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             setScreen('user-list');
         }
     }, []);
-    const handleNavFromMenu = useCallback((ctx) => {
+    const handleNavFromMenu = (0, react_1.useCallback)((ctx) => {
         setListEntranceAnimation(false);
         clearChat();
         if (ctx === 'ticket') {
@@ -240,100 +344,97 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             setScreen('user-list');
         }
     }, [clearChat]);
-    const listCtxForUser = useCallback((user, viewerIsDev) => {
+    const listCtxForUser = (0, react_1.useCallback)((user, viewerIsDev) => {
         if (viewerIsDev)
             return user.type === 'user' ? 'support' : 'conversation';
         return user.type === 'developer' ? 'support' : 'conversation';
     }, []);
-    const handleSelectUser = useCallback((user, returnCtxOverride) => {
+    const handleSelectUser = (0, react_1.useCallback)((user, returnCtxOverride) => {
         var _a;
         setListEntranceAnimation(false);
         setChatReturnCtx(returnCtxOverride !== null && returnCtxOverride !== void 0 ? returnCtxOverride : userListCtx);
         const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
         selectUser(user, history);
         setScreen('chat');
+        const roomId = [user.uid, viewerUidForSocket].sort().join('_');
+        joinRoom(roomId);
         setRecentChats(prev => {
             const exists = prev.find(r => r.user.uid === user.uid);
             if (exists)
-                return prev;
+                return prev.map(r => r.user.uid === user.uid ? Object.assign(Object.assign({}, r), { unread: 0 }) : r);
             return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
         });
-    }, [data, selectUser, userListCtx]);
-    const handleBackFromChat = useCallback(() => {
+    }, [data, selectUser, userListCtx, viewerUidForSocket, joinRoom]);
+    const handleBackFromChat = (0, react_1.useCallback)(() => {
         setListEntranceAnimation(false);
+        if (activeUser) {
+            const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+            leaveRoom(roomId);
+        }
         clearChat();
         setUserListCtx(chatReturnCtx);
         setScreen('user-list');
-    }, [clearChat, chatReturnCtx]);
-    const handleOpenTicket = useCallback((id) => {
+    }, [clearChat, chatReturnCtx, activeUser, viewerUidForSocket, leaveRoom]);
+    const handleOpenTicket = (0, react_1.useCallback)((id) => {
         setListEntranceAnimation(false);
         setViewingTicketId(id);
         setScreen('ticket-detail');
         setActiveTab('tickets');
     }, []);
-    const handleTabChange = useCallback((tab) => {
+    const handleTabChange = (0, react_1.useCallback)((tab) => {
         setListEntranceAnimation(false);
         setActiveTab(tab);
         setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
     }, []);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!listEntranceAnimation)
             return;
         const t = window.setTimeout(() => setListEntranceAnimation(false), 520);
         return () => window.clearTimeout(t);
     }, [listEntranceAnimation]);
-    /* ── Block/Unblock ───────────────────────────────────────────────────── */
-    const handleBlock = useCallback(() => {
+    // ── Block / Unblock ───────────────────────────────────────────────────────
+    const handleBlock = (0, react_1.useCallback)(() => {
         if (!activeUser)
             return;
         setBlockedUids(prev => [...prev, activeUser.uid]);
+        emitBlock(activeUser.uid);
         clearChat();
         setScreen('block-list');
         setActiveTab('home');
-    }, [activeUser, clearChat]);
-    const handleUnblock = useCallback((uid) => {
+    }, [activeUser, clearChat, emitBlock]);
+    const handleUnblock = (0, react_1.useCallback)((uid) => {
         setBlockedUids(prev => prev.filter(id => id !== uid));
-    }, []);
-    /* ── Tickets ─────────────────────────────────────────────────────────── */
-    const handleRaiseTicket = useCallback((title, desc, priority) => {
+        emitUnblock(uid);
+    }, [emitUnblock]);
+    // ── Tickets ───────────────────────────────────────────────────────────────
+    const handleRaiseTicket = (0, react_1.useCallback)((title, desc, priority) => {
         const t = {
-            id: `TKT-${String(Date.now()).slice(-4)}`,
-            title, description: desc, status: 'open', priority,
-            createdAt: new Date().toISOString(),
-            updatedAt: new Date().toISOString(),
-            assignedTo: null,
+            id: `TKT-${String(Date.now()).slice(-4)}`, title, description: desc, status: 'open', priority,
+            createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), assignedTo: null,
         };
         setTickets(prev => [...prev, t]);
         setViewingTicketId(t.id);
         setScreen('ticket-detail');
         setActiveTab('tickets');
-    }, []);
-    /* ── Pause sync back into recent chats ──────────────────────────────── */
-    const handleTogglePause = useCallback(() => {
-        togglePause();
-        if (activeUser) {
+        emitTicketCreate({ title, description: desc, priority, createdBy: viewerUidForSocket });
+    }, [emitTicketCreate, viewerUidForSocket]);
+    // ── Pause sync ────────────────────────────────────────────────────────────
+    const handleTogglePause = (0, react_1.useCallback)(() => {
+        _togglePause();
+        if (activeUser)
             setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: !isPaused }) : r));
-        }
-    }, [togglePause, activeUser, isPaused]);
-    /* ── Call ────────────────────────────────────────────────────────────── */
-    const handleStartCall = useCallback((withVideo) => {
+    }, [_togglePause, activeUser, isPaused]);
+    // ── Call ──────────────────────────────────────────────────────────────────
+    const handleStartCall = (0, react_1.useCallback)((withVideo) => {
         if (!activeUser)
             return;
-        startCall(activeUser, withVideo);
+        _startCall(activeUser, withVideo);
         setScreen('call');
-    }, [activeUser, startCall]);
-    const handleEndCall = useCallback(() => {
-        endCall();
-        setCallMinimized(false);
-        setScreen('chat');
-    }, [endCall]);
-    const minimizeCall = useCallback(() => {
-        setCallMinimized(true);
-        closeDrawer();
-    }, [closeDrawer]);
-    /* ── Derived ─────────────────────────────────────────────────────────── */
-    const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
-    const widgetConfig = useMemo(() => {
+    }, [activeUser, _startCall]);
+    const handleEndCall = (0, react_1.useCallback)(() => { _endCall(); setCallMinimized(false); setScreen('chat'); }, [_endCall]);
+    const minimizeCall = (0, react_1.useCallback)(() => { setCallMinimized(true); closeDrawer(); }, [closeDrawer]);
+    // ── Transfer ──────────────────────────────────────────────────────────────
+    const widgetConfig = (0, react_1.useMemo)(() => {
         var _a;
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return undefined;
@@ -347,9 +448,29 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         }
         return w;
     }, [data === null || data === void 0 ? void 0 : data.widget, viewer]);
-    const primaryColor = theme.primaryColor;
-    /** All developers are listed; only end-`user` rows are filtered by `viewer.projectId`. */
-    const allUsers = useMemo(() => {
+    const handleTransferToDeveloper = (0, react_1.useCallback)((dev) => {
+        var _a;
+        if (!activeUser || !widgetConfig)
+            return;
+        const agent = ((_a = widgetConfig.viewerName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Agent';
+        const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+        const transferNote = {
+            id: `tr_${Date.now()}`, senderId: 'me', receiverId: dev.uid,
+            text: `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
+            timestamp: new Date().toISOString(), type: 'text', status: 'sent',
+        };
+        emitTransfer(roomId, dev.uid, transferNote.text);
+        selectUser(dev, [...messages, transferNote]);
+    }, [activeUser, messages, selectUser, widgetConfig, viewerUidForSocket, emitTransfer]);
+    const handleAddParticipant = (0, react_1.useCallback)((uid) => {
+        if (!activeUser)
+            return;
+        emitAddParticipant([activeUser.uid, viewerUidForSocket].sort().join('_'), uid);
+    }, [activeUser, viewerUidForSocket, emitAddParticipant]);
+    // ── Derived ───────────────────────────────────────────────────────────────
+    const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
+    const primaryColor = headerBg;
+    const allUsers = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (!data)
             return [];
@@ -357,10 +478,9 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
         if (!pid)
             return [...devs, ...data.users];
-        const usersInProject = data.users.filter(u => u.project === pid);
-        return [...devs, ...usersInProject];
+        return [...devs, ...data.users.filter(u => u.project === pid)];
     }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
-    const effectiveViewerBlocked = useMemo(() => {
+    const effectiveViewerBlocked = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (!widgetConfig)
             return false;
@@ -376,146 +496,158 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     const viewerUid = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.viewerUid;
     const filteredUsers = screen === 'user-list'
         ? allUsers.filter(u => {
-            if (userListCtx === 'support') {
-                if (viewerIsDev)
-                    return u.type === 'user';
-                return u.type === 'developer';
-            }
-            if (viewerIsDev) {
+            if (userListCtx === 'support')
+                return viewerIsDev ? u.type === 'user' : u.type === 'developer';
+            if (viewerIsDev)
                 return u.type === 'developer' && u.uid !== viewerUid;
-            }
             return u.type === 'user';
         })
         : [];
-    const otherDevelopers = useMemo(() => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid), [allUsers, viewerUid]);
+    const otherDevelopers = (0, react_1.useMemo)(() => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid), [allUsers, viewerUid]);
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
-    const totalUnread = useMemo(() => recentChats.reduce((sum, c) => { var _a; return sum + Math.max(0, (_a = c.unread) !== null && _a !== void 0 ? _a : 0); }, 0), [recentChats]);
-    const handleTransferToDeveloper = useCallback((dev) => {
-        var _a;
-        if (!activeUser || !widgetConfig)
-            return;
-        const agent = ((_a = widgetConfig.viewerName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Agent';
-        const transferNote = {
-            id: `tr_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-            senderId: 'me',
-            receiverId: dev.uid,
-            text: `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
-            timestamp: new Date().toISOString(),
-            type: 'text',
-            status: 'sent',
-        };
-        selectUser(dev, [...messages, transferNote]);
-    }, [activeUser, messages, selectUser, widgetConfig]);
-    /* Position */
-    const posStyle = theme.buttonPosition === 'bottom-left'
-        ? { left: 24, right: 'auto' }
-        : { right: 24, left: 'auto' };
-    /* No radius on top-left / bottom-left; left-docked panel keeps inner TR/BR curve */
-    const drawerPosStyle = theme.buttonPosition === 'bottom-left'
-        ? {
-            left: 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderTopRightRadius: 16,
-            borderBottomRightRadius: 16,
+    const totalUnread = (0, react_1.useMemo)(() => recentChats.reduce((s, c) => { var _a; return s + Math.max(0, (_a = c.unread) !== null && _a !== void 0 ? _a : 0); }, 0), [recentChats]);
+    // ── Panel geometry from display mode ──────────────────────────────────────
+    const geo = (0, react_1.useMemo)(() => { var _a; return getPanelGeometry(displayMode, (_a = theme.buttonPosition) !== null && _a !== void 0 ? _a : 'bottom-right', ajaxterSettings === null || ajaxterSettings === void 0 ? void 0 : ajaxterSettings.maximized); }, [displayMode, theme.buttonPosition, ajaxterSettings === null || ajaxterSettings === void 0 ? void 0 : ajaxterSettings.maximized]);
+    // Button geometry from Ajaxter minimized config
+    const btnStyle = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const pos = theme.buttonPosition === 'bottom-left' ? { left: 24, right: 'auto' } : { right: 24, left: 'auto' };
+        if (btnType === 'round') {
+            return Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, pos), { width: 56, height: 56, borderRadius: '50%', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', cursor: 'pointer', boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)' });
         }
-        : {
-            right: 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-        };
-    /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
+        // 'slide' type (pill)
+        const w = (_a = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.width) !== null && _a !== void 0 ? _a : 126;
+        const h = (_b = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.height) !== null && _b !== void 0 ? _b : 40;
+        return Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, pos), { width: w, height: h, borderRadius: `${(_c = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusTop) !== null && _c !== void 0 ? _c : 150}px ${(_d = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusBottom) !== null && _d !== void 0 ? _d : 140}px ${(_e = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusBottom) !== null && _e !== void 0 ? _e : 140}px ${(_f = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusTop) !== null && _f !== void 0 ? _f : 150}px`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '0 16px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)' });
+    }, [btnType, theme, minimizedDesktop]);
+    const posStyle = theme.buttonPosition === 'bottom-left'
+        ? { left: 24, right: 'auto' } : { right: 24, left: 'auto' };
     if (!mounted)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
-        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-
-        .cw-root * { box-sizing: border-box; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
-
-        @keyframes cw-slideInRight  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        @keyframes cw-slideOutRight { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(100%); opacity: 0; } }
-        @keyframes cw-slideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        @keyframes cw-slideOutLeft  { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(-100%); opacity: 0; } }
-        @keyframes cw-fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes cw-slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
-        @keyframes cw-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
-        @keyframes cw-btnPop  { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-
-        .cw-scroll::-webkit-scrollbar        { width: 4px; }
-        .cw-scroll::-webkit-scrollbar-track  { background: transparent; }
-        .cw-scroll::-webkit-scrollbar-thumb  { background: #e0e0e0; border-radius: 4px; }
-
-        .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
-        .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
-
-        .cw-drawer-panel {
-          width: 30%;
-          max-width: 100vw;
-          min-width: 0;
-        }
-        @media (max-width: 1024px) {
-          .cw-drawer-panel { width: 100%; }
-        }
-      ` }), !isOpen && callMinimized && callInProgress && callSession.peer && (_jsx(MiniCallBar, { session: callSession, primaryColor: primaryColor, buttonPosition: theme.buttonPosition, onExpand: openDrawer, onEnd: handleEndCall })), !isOpen && (_jsxs("button", { className: "cw-root", type: "button", onClick: openDrawer, "aria-label": totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel, title: totalUnread > 0 ? `${totalUnread} unread message${totalUnread === 1 ? '' : 's'}` : theme.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, posStyle), { display: 'flex', alignItems: 'center', gap: 10, padding: '13px 22px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontSize: 15, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: e => {
-                    e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
-                    e.currentTarget.style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
-                }, onMouseLeave: e => {
-                    e.currentTarget.style.transform = 'scale(1)';
-                    e.currentTarget.style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
-                }, children: [_jsxs("span", { style: { position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), totalUnread > 0 && (_jsx("span", { style: {
-                                    position: 'absolute',
-                                    top: -8,
-                                    right: -10,
-                                    minWidth: 20,
-                                    height: 20,
-                                    padding: '0 5px',
-                                    borderRadius: 999,
-                                    background: '#ef4444',
-                                    color: '#fff',
-                                    fontSize: 11,
-                                    fontWeight: 800,
-                                    lineHeight: '20px',
-                                    textAlign: 'center',
-                                    border: '2px solid #fff',
-                                    boxSizing: 'border-box',
-                                }, children: totalUnread > 99 ? '99+' : totalUnread }))] }), _jsx("span", { children: theme.buttonLabel })] })), isOpen && (_jsx("div", { "aria-hidden": true, style: {
-                    position: 'fixed', inset: 0, zIndex: 9997,
-                    backgroundColor: 'rgba(0,0,0,0.35)',
-                    opacity: closing ? 0 : 1,
-                    transition: 'opacity 0.3s',
-                } })), isOpen && (_jsxs("div", { className: `cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ position: 'fixed', top: 0, bottom: 0 }, drawerPosStyle), { zIndex: 9998, backgroundColor: '#fff', boxShadow: theme.buttonPosition === 'bottom-left'
-                        ? '4px 0 40px rgba(0,0,0,0.18)'
-                        : '-4px 0 40px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }), children: [cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }, children: [_jsx("div", { style: {
-                                    width: 40, height: 40, borderRadius: '50%',
-                                    border: `3px solid ${primaryColor}30`,
-                                    borderTopColor: primaryColor,
-                                    animation: 'spin 0.8s linear infinite',
-                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { style: { fontSize: 14, color: '#7b8fa1' }, children: "Loading chat\u2026" })] })), cfgError && !cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\u26A0\uFE0F" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Could not load chat configuration" }), _jsx("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }, children: cfgError }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), !cfgLoading && !cfgError && widgetConfig && (_jsxs(_Fragment, { children: [screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (_jsx("div", { style: {
-                                    position: 'absolute', top: 12,
-                                    right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
-                                    left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
-                                    zIndex: 20, display: 'flex', gap: 6,
-                                }, children: _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) }) })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (_jsx(ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey, onClose: closeDrawer })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (_jsx(PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, apiKey: apiKey, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_e = widgetConfig.viewerType) !== null && _e !== void 0 ? _e : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer', animateEntrance: listEntranceAnimation })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor, onMinimize: minimizeCall })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => {
-                                            setListEntranceAnimation(false);
-                                            setViewingTicketId(id);
-                                            setScreen('ticket-detail');
-                                        }, animateEntrance: listEntranceAnimation })), screen === 'ticket-new' && (_jsx(TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })), screen === 'ticket-detail' && viewingTicketId && ((() => {
-                                        const t = tickets.find(x => x.id === viewingTicketId);
-                                        return t ? (_jsx(TicketDetailScreen, { ticket: t, config: widgetConfig, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
-                                    })()), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
-                                !effectiveViewerBlocked &&
-                                permissionsOk &&
-                                screen !== 'chat' &&
-                                screen !== 'call' &&
-                                screen !== 'user-list' &&
-                                screen !== 'block-list' &&
-                                screen !== 'ticket-detail' &&
-                                screen !== 'ticket-new' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor }))] }))] }))] }));
+    // Inline mode — always "open", no floating button
+    if (displayMode === 'inline') {
+        return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
+            react_1.default.createElement("style", null, GLOBAL_STYLES(agentBg, visitorBg, headerBg)),
+            widgetConfig && !cfgLoading && !cfgError && (react_1.default.createElement(WidgetContent, Object.assign({}, contentProps(), { widgetConfig: widgetConfig, primaryColor: primaryColor, agentBg: agentBg, visitorBg: visitorBg, panelStyle: geo.panel, isClosable: false })))));
+    }
+    // Helper to collect all props for WidgetContent
+    function contentProps() {
+        return {
+            screen, activeTab, userListCtx, viewingTicketId, listEntranceAnimation,
+            tickets, recentChats, blockedUsers, blockedUids, filteredUsers,
+            otherDevelopers, allUsers, messages, activeUser, isPaused, isReported,
+            isBlocked, callSession, localVideoRef, remoteVideoRef,
+            effectiveViewerBlocked, permissionsOk, messageSoundEnabled, typingUsers,
+            viewerIsDev, apiKey, totalUnread,
+            onClose: closeDrawer,
+            onTabChange: handleTabChange, onCardClick: handleCardClick,
+            onNavFromMenu: handleNavFromMenu, onSelectUser: handleSelectUser,
+            onBackFromChat: handleBackFromChat, onOpenTicket: handleOpenTicket,
+            onSend: sendMessage, onTogglePause: handleTogglePause, onReport: _reportChat,
+            onBlock: handleBlock, onUnblock: handleUnblock,
+            onStartCall: handleStartCall, onEndCall: handleEndCall, onMinimizeCall: minimizeCall,
+            onToggleMute: toggleMute, onToggleCamera: toggleCamera,
+            onRaiseTicket: handleRaiseTicket, onTransfer: handleTransferToDeveloper,
+            onAddParticipant: handleAddParticipant, onToggleMessageSound: toggleMessageSound,
+            setScreen, setActiveTab, setViewingTicketId, setListEntranceAnimation,
+            listCtxForUser,
+        };
+    }
+    return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
+        react_1.default.createElement("style", null, GLOBAL_STYLES(agentBg, visitorBg, headerBg)),
+        socketStatus !== 'connected' && socketStatus !== 'disconnected' && isOpen && (react_1.default.createElement("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: 80 }, posStyle), { zIndex: 9996, background: socketStatus === 'connecting' ? '#f59e0b' : '#ef4444', color: '#fff', fontSize: 11, fontWeight: 700, padding: '3px 10px', borderRadius: 20 }) }, socketStatus === 'connecting' ? '● Connecting…' : '● Offline')),
+        !isOpen && callMinimized && callInProgress && callSession.peer && (react_1.default.createElement(MiniCallBar_1.MiniCallBar, { session: callSession, primaryColor: primaryColor, buttonPosition: theme.buttonPosition, onExpand: openDrawer, onEnd: handleEndCall })),
+        !isOpen && (react_1.default.createElement("button", { className: "cw-root", type: "button", onClick: openDrawer, "aria-label": totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel, style: btnStyle, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)'; }, onMouseLeave: e => { e.currentTarget.style.transform = 'scale(1)'; } },
+            react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none" },
+                react_1.default.createElement("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
+            btnType !== 'round' && react_1.default.createElement("span", null, theme.buttonLabel),
+            totalUnread > 0 && (react_1.default.createElement("span", { style: { position: 'absolute', top: -6, right: -6,
+                    minWidth: 18, height: 18, padding: '0 4px', borderRadius: 999,
+                    background: '#ef4444', color: '#fff', fontSize: 10, fontWeight: 800,
+                    lineHeight: '18px', textAlign: 'center', border: '2px solid #fff' } }, totalUnread > 99 ? '99+' : totalUnread)))),
+        isOpen && geo.backdrop && (react_1.default.createElement("div", { "aria-hidden": true, style: Object.assign(Object.assign({}, geo.backdrop), { opacity: closing ? 0 : 1, transition: 'opacity 0.3s' }) })),
+        isOpen && (react_1.default.createElement("div", { className: `cw-root ${closing ? geo.exitClass : geo.enterClass}`, style: geo.panel },
+            cfgLoading && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 } },
+                react_1.default.createElement("div", { style: { width: 40, height: 40, borderRadius: '50%', border: `3px solid ${primaryColor}30`, borderTopColor: primaryColor, animation: 'spin 0.8s linear infinite' } }),
+                react_1.default.createElement("p", { style: { fontSize: 14, color: '#7b8fa1' } }, "Loading chat\u2026"))),
+            cfgError && !cfgLoading && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' } },
+                react_1.default.createElement("div", { style: { fontSize: 40 } }, "\u26A0\uFE0F"),
+                react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Could not load chat"),
+                react_1.default.createElement("p", { style: { fontSize: 13, color: '#7b8fa1' } }, cfgError),
+                react_1.default.createElement("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
+            !cfgLoading && !cfgError && widgetConfig && (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
+                react_1.default.createElement(WidgetContent, Object.assign({}, contentProps(), { widgetConfig: widgetConfig, primaryColor: primaryColor, agentBg: agentBg, visitorBg: visitorBg, panelStyle: {}, isClosable: true }))))))));
+};
+exports.ChatWidget = ChatWidget;
+exports.default = exports.ChatWidget;
+// ─── WidgetContent — extracted so inline mode can reuse ───────────────────────
+const WidgetContent = (props) => {
+    var _a;
+    const { screen, activeTab, userListCtx, viewingTicketId, listEntranceAnimation, tickets, recentChats, blockedUsers, filteredUsers, otherDevelopers, messages, activeUser, isPaused, isReported, isBlocked, callSession, localVideoRef, remoteVideoRef, effectiveViewerBlocked, permissionsOk, messageSoundEnabled, viewerIsDev, apiKey, widgetConfig, primaryColor, agentBg, visitorBg, isClosable, onClose, onTabChange, onCardClick, onNavFromMenu, onSelectUser, onBackFromChat, onOpenTicket, onSend, onTogglePause, onReport, onBlock, onUnblock, onStartCall, onEndCall, onMinimizeCall, onToggleMute, onToggleCamera, onRaiseTicket, onTransfer, onToggleMessageSound, setScreen, setActiveTab, setViewingTicketId, setListEntranceAnimation, listCtxForUser, } = props;
+    const config = widgetConfig;
+    const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isClosable && screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (react_1.default.createElement("div", { style: { position: 'absolute', top: 12, right: 12, zIndex: 20 } },
+            react_1.default.createElement("button", { onClick: onClose, title: "Close", style: {
+                    width: 26, height: 26, borderRadius: '50%', background: 'rgba(0,0,0,0.22)', border: 'none',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+                } },
+                react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" },
+                    react_1.default.createElement("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }))))),
+        config.status === 'MAINTENANCE' && react_1.default.createElement(MaintenanceView_1.MaintenanceView, { primaryColor: primaryColor }),
+        config.status === 'DISABLE' && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 } },
+            react_1.default.createElement("div", { style: { fontSize: 40 } }, "\uD83D\uDD12"),
+            react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Chat is disabled"),
+            isClosable && react_1.default.createElement("button", { onClick: onClose, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
+        config.status === 'ACTIVE' && effectiveViewerBlocked && (react_1.default.createElement(ViewerBlockedScreen_1.ViewerBlockedScreen, { config: config, apiKey: apiKey, onClose: onClose })),
+        config.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (react_1.default.createElement(PermissionsGateScreen_1.PermissionsGateScreen, { primaryColor: primaryColor, widgetId: config.id, onGranted: () => { } })),
+        config.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (react_1.default.createElement("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' } },
+            screen === 'home' && (react_1.default.createElement(HomeScreen_1.HomeScreen, { config: config, apiKey: apiKey, onNavigate: onCardClick, onOpenTicket: onOpenTicket, tickets: tickets })),
+            screen === 'user-list' && (react_1.default.createElement(UserListScreen_1.UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: onSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && config.viewerType !== 'developer', animateEntrance: listEntranceAnimation })),
+            screen === 'chat' && activeUser && (react_1.default.createElement(ChatScreen_1.ChatScreen, { activeUser: activeUser, messages: messages, config: config, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: onSend, onBack: onBackFromChat, onClose: onClose, onTogglePause: onTogglePause, onReport: onReport, onBlock: onBlock, onStartCall: onStartCall, onNavAction: onNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: onTransfer, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: onToggleMessageSound })),
+            screen === 'call' && callSession.peer && (react_1.default.createElement(CallScreen_1.CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: onEndCall, onToggleMute: onToggleMute, onToggleCamera: onToggleCamera, primaryColor: primaryColor, onMinimize: onMinimizeCall })),
+            screen === 'recent-chats' && (react_1.default.createElement(RecentChatsScreen_1.RecentChatsScreen, { chats: recentChats, config: config, onSelectChat: u => onSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })),
+            screen === 'tickets' && (react_1.default.createElement(TicketScreen_1.TicketScreen, { tickets: tickets, config: config, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => { setListEntranceAnimation(false); setViewingTicketId(id); setScreen('ticket-detail'); }, animateEntrance: listEntranceAnimation })),
+            screen === 'ticket-new' && (react_1.default.createElement(TicketFormScreen_1.TicketFormScreen, { config: config, onSubmit: onRaiseTicket, onCancel: () => setScreen('tickets') })),
+            screen === 'ticket-detail' && viewingTicketId && (() => {
+                const t = tickets.find(x => x.id === viewingTicketId);
+                return t ? (react_1.default.createElement(TicketDetailScreen_1.TicketDetailScreen, { ticket: t, config: config, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
+            })(),
+            screen === 'block-list' && (react_1.default.createElement(BlockList_1.BlockListScreen, { blockedUsers: blockedUsers, config: config, onUnblock: onUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } })))),
+        config.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk &&
+            !['chat', 'call', 'user-list', 'block-list', 'ticket-detail', 'ticket-new'].includes(screen) && (react_1.default.createElement(BottomTabs_1.BottomTabs, { active: activeTab, onChange: onTabChange, primaryColor: primaryColor }))));
 };
-export default ChatWidget;
-/* ── Tiny corner button ────────────────────────────────────────────────────── */
-const CornerBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: {
-        width: 26, height: 26, borderRadius: '50%',
-        background: 'rgba(0,0,0,0.25)', border: 'none',
-        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
-    }, children: children }));
+// ─── Global CSS ───────────────────────────────────────────────────────────────
+function GLOBAL_STYLES(agentBg, visitorBg, headerBg) {
+    return `
+    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+    .cw-root * { box-sizing:border-box; font-family:'DM Sans','Segoe UI',sans-serif; }
+    @keyframes spin          { to { transform: rotate(360deg); } }
+    @keyframes cw-btnPop     { from { transform:scale(0.8);opacity:0; } to { transform:scale(1);opacity:1; } }
+    @keyframes cw-fadeUp     { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
+    @keyframes cw-slideIn    { from { opacity:0;transform:translateX(18px); } to { opacity:1;transform:translateX(0); } }
+    @keyframes cw-pulse      { 0%,100%{opacity:1} 50%{opacity:0.4} }
+    @keyframes cw-slideInRight  { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
+    @keyframes cw-slideOutRight { from{transform:translateX(0);opacity:1}    to{transform:translateX(100%);opacity:0} }
+    @keyframes cw-slideInLeft   { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
+    @keyframes cw-slideOutLeft  { from{transform:translateX(0);opacity:1}    to{transform:translateX(-100%);opacity:0} }
+    @keyframes cw-popupEnter { from{transform:translate(-50%,-50%) scale(0.9);opacity:0} to{transform:translate(-50%,-50%) scale(1);opacity:1} }
+    @keyframes cw-popupExit  { from{transform:translate(-50%,-50%) scale(1);opacity:1}  to{transform:translate(-50%,-50%) scale(0.9);opacity:0} }
+    .cw-slideInRight  { animation:cw-slideInRight  0.32s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-slideOutRight { animation:cw-slideOutRight 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-slideInLeft   { animation:cw-slideInLeft   0.32s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-slideOutLeft  { animation:cw-slideOutLeft  0.28s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-popup-enter   { animation:cw-popupEnter    0.28s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-popup-exit    { animation:cw-popupExit     0.22s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-scroll::-webkit-scrollbar       { width:4px; }
+    .cw-scroll::-webkit-scrollbar-track { background:transparent; }
+    .cw-scroll::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
+    /* Ajaxter theme vars */
+    :root {
+      --cw-agent-bg:   ${agentBg};
+      --cw-visitor-bg: ${visitorBg};
+      --cw-header-bg:  ${headerBg};
+    }
+  `;
+}
+//# sourceMappingURL=ChatWidget.js.map