@product7/feedback-sdk 1.2.8 → 1.3.0

package/dist/feedback-sdk.js

@@ -4,91 +4,6 @@
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FeedbackSDK = {}));
 })(this, (function (exports) { 'use strict';
 
-	class SDKError extends Error {
-		constructor(message, cause) {
-			super(message);
-			this.name = 'SDKError';
-			this.cause = cause;
-
-			if (Error.captureStackTrace) {
-				Error.captureStackTrace(this, SDKError);
-			}
-		}
-	}
-
-	class APIError extends Error {
-		constructor(status, message, response) {
-			super(message);
-			this.name = 'APIError';
-			this.status = status;
-			this.response = response;
-
-			if (Error.captureStackTrace) {
-				Error.captureStackTrace(this, APIError);
-			}
-		}
-
-		isNetworkError() {
-			return this.status === 0;
-		}
-
-		isClientError() {
-			return this.status >= 400 && this.status < 500;
-		}
-
-		isServerError() {
-			return this.status >= 500 && this.status < 600;
-		}
-	}
-
-	class WidgetError extends Error {
-		constructor(message, widgetType, widgetId) {
-			super(message);
-			this.name = 'WidgetError';
-			this.widgetType = widgetType;
-			this.widgetId = widgetId;
-
-			if (Error.captureStackTrace) {
-				Error.captureStackTrace(this, WidgetError);
-			}
-		}
-	}
-
-	class ConfigError extends Error {
-		constructor(message, configKey) {
-			super(message);
-			this.name = 'ConfigError';
-			this.configKey = configKey;
-
-			if (Error.captureStackTrace) {
-				Error.captureStackTrace(this, ConfigError);
-			}
-		}
-	}
-
-	class ValidationError extends Error {
-		constructor(message, field, value) {
-			super(message);
-			this.name = 'ValidationError';
-			this.field = field;
-			this.value = value;
-
-			if (Error.captureStackTrace) {
-				Error.captureStackTrace(this, ValidationError);
-			}
-		}
-	}
-
-	const MOCK_CONFIG = {
-		primaryColor: '#21244A',
-		backgroundColor: '#ffffff',
-		textColor: '#1F2937',
-		boardId: 'feature-requests',
-		size: 'medium',
-		displayMode: 'modal',
-	};
-
-	// Mock changelogs for development
 	const MOCK_CHANGELOGS = [
 		{
 			id: 'changelog_1',
@@ -139,7 +54,6 @@
 		},
 	];
 
-	// Mock conversations for development
 	const MOCK_CONVERSATIONS = [
 		{
 			id: 'conv_1',
@@ -171,7 +85,6 @@
 		},
 	];
 
-	// Mock messages for development
 	const MOCK_MESSAGES = {
 		conv_1: [
 			{
@@ -218,7 +131,6 @@
 		],
 	};
 
-	// Mock help collections for development
 	const MOCK_HELP_COLLECTIONS = [
 		{
 			id: 'collection_1',
@@ -264,7 +176,6 @@
 		},
 	];
 
-	// Mock surveys for development
 	const MOCK_SURVEYS = [
 		{
 			id: 'mock_nps_survey',
@@ -296,110 +207,73 @@
 		},
 	];
 
-	// Environment URLs
-	const ENV_URLS = {
-		production: {
-			base: 'https://api.product7.io/api/v1',
-			withWorkspace: (workspace) => `https://${workspace}.api.product7.io/api/v1`,
-		},
-		staging: {
-			base: 'https://staging.api.product7.io/api/v1',
-			withWorkspace: (workspace) =>
-				`https://${workspace}.staging.api.product7.io/api/v1`,
-		},
-	};
+	const delay$1 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
-	class APIService {
-		constructor(config = {}) {
-			this.workspace = config.workspace;
-			this.sessionToken = null;
-			this.sessionExpiry = null;
-			this.userContext = config.userContext || null;
-			this.mock = config.mock || false;
-			this.env = config.env || 'production';
+	function getDeviceInfo() {
+		if (typeof navigator === 'undefined') {
+			return { device: null, browser: null, os: null };
+		}
 
-			if (config.apiUrl) {
-				this.baseURL = config.apiUrl;
-			} else {
-				const envConfig = ENV_URLS[this.env] || ENV_URLS.production;
-				this.baseURL = this.workspace
-					? envConfig.withWorkspace(this.workspace)
-					: envConfig.base;
-			}
+		const ua = navigator.userAgent;
 
-			this._loadStoredSession();
+		let device = 'desktop';
+		if (/Mobi|Android/i.test(ua)) {
+			device = /Tablet|iPad/i.test(ua) ? 'tablet' : 'mobile';
 		}
 
-		async init(userContext = null) {
-			if (userContext) {
-				this.userContext = userContext;
-			}
-
-			if (this.isSessionValid()) {
-				return { sessionToken: this.sessionToken };
-			}
+		let browser = 'unknown';
+		if (ua.includes('Firefox')) browser = 'firefox';
+		else if (ua.includes('Edg')) browser = 'edge';
+		else if (ua.includes('Chrome')) browser = 'chrome';
+		else if (ua.includes('Safari')) browser = 'safari';
+		else if (ua.includes('Opera') || ua.includes('OPR')) browser = 'opera';
 
-			if (!this.userContext || !this.workspace) {
-				const error = `Missing ${!this.workspace ? 'workspace' : 'user context'} for initialization`;
-				throw new APIError(400, error);
-			}
+		let os = 'unknown';
+		if (ua.includes('Windows')) os = 'windows';
+		else if (ua.includes('Mac')) os = 'macos';
+		else if (ua.includes('Linux')) os = 'linux';
+		else if (ua.includes('Android')) os = 'android';
+		else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'ios';
 
-			// Mock mode - return fake session
-			if (this.mock) {
-				this.sessionToken = 'mock_session_' + Date.now();
-				this.sessionExpiry = new Date(Date.now() + 3600 * 1000);
-				this._storeSession();
-				return {
-					sessionToken: this.sessionToken,
-					config: MOCK_CONFIG,
-					expiresIn: 3600,
-				};
-			}
+		return { device, browser, os };
+	}
 
-			const payload = {
-				workspace: this.workspace,
-				user: this.userContext,
-			};
+	class ChangelogService {
+		constructor(baseAPI) {
+			this.api = baseAPI;
+		}
 
-			try {
-				const response = await this._makeRequest('/widget/init', {
-					method: 'POST',
-					body: JSON.stringify(payload),
-					headers: {
-						'Content-Type': 'application/json',
-					},
-				});
+		async getChangelogs(options = {}) {
+			await this.api._ensureSession();
 
-				this.sessionToken = response.session_token;
-				this.sessionExpiry = new Date(Date.now() + response.expires_in * 1000);
-				this._storeSession();
+			if (this.api.mock) {
+				await delay$1(300);
+				return { success: true, data: MOCK_CHANGELOGS };
+			}
 
-				return {
-					sessionToken: this.sessionToken,
-					config: response.config || {},
-					expiresIn: response.expires_in,
-				};
-			} catch (error) {
-				throw new APIError(
-					error.status || 500,
-					`Failed to initialize widget: ${error.message}`,
-					error.response
+			return this.api._handleAuthRetry(async () => {
+				const endpoint = this.api._getEndpointWithParams(
+					'/widget/changelogs',
+					options
 				);
-			}
+				return await this.api._makeRequest(endpoint, {
+					method: 'GET',
+					headers: { Authorization: `Bearer ${this.api.sessionToken}` },
+				});
+			});
 		}
+	}
 
-		async submitFeedback(feedbackData) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+	class FeedbackService {
+		constructor(baseAPI) {
+			this.api = baseAPI;
+		}
 
-			if (!this.sessionToken) {
-				throw new APIError(401, 'No valid session token available');
-			}
+		async submitFeedback(feedbackData) {
+			await this.api._ensureSession();
 
-			// Mock mode - simulate success
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 500));
+			if (this.api.mock) {
+				await delay$1(500);
 				return {
 					success: true,
 					data: {
@@ -419,313 +293,98 @@
 				attachments: feedbackData.attachments || [],
 			};
 
-			try {
-				const response = await this._makeRequest('/widget/feedback', {
+			return this.api._handleAuthRetry(async () => {
+				const response = await this.api._makeRequest('/widget/feedback', {
 					method: 'POST',
 					body: JSON.stringify(payload),
 					headers: {
 						'Content-Type': 'application/json',
-						Authorization: `Bearer ${this.sessionToken}`,
+						Authorization: `Bearer ${this.api.sessionToken}`,
 					},
 				});
-
 				return response;
-			} catch (error) {
-				if (error.status === 401) {
-					this.sessionToken = null;
-					this.sessionExpiry = null;
-					await this.init();
-					return this.submitFeedback(feedbackData);
-				}
-
-				throw new APIError(
-					error.status || 500,
-					`Failed to submit feedback: ${error.message}`,
-					error.response
-				);
-			}
+			});
 		}
+	}
 
-		/**
-		 * Get active surveys for the current user/context
-		 * @param {Object} context - Optional context overrides for targeting
-		 * @param {string} context.url - Override current URL
-		 * @param {Object} context.userProperties - Additional user properties
-		 * @returns {Promise<Array>} Array of active surveys matching targeting rules
-		 */
-		async getActiveSurveys(context = {}) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+	class HelpService {
+		constructor(baseAPI) {
+			this.api = baseAPI;
+		}
 
-			if (!this.sessionToken) {
-				throw new APIError(401, 'No valid session token available');
-			}
+		async getHelpCollections(options = {}) {
+			await this.api._ensureSession();
 
-			// Mock mode - return mock surveys
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 200));
-				return {
-					success: true,
-					data: MOCK_SURVEYS,
-				};
+			if (this.api.mock) {
+				await delay$1(200);
+				return { status: true, data: MOCK_HELP_COLLECTIONS };
 			}
 
-			try {
-				const queryParams = new URLSearchParams();
-
-				// Auto-detect current URL or use provided override
-				const currentUrl =
-					context.url ||
-					(typeof window !== 'undefined' ? window.location.href : '');
-				if (currentUrl) {
-					queryParams.append('url', currentUrl);
-				}
-
-				// Auto-detect device info
-				const deviceInfo = this._getDeviceInfo();
-				if (deviceInfo.device) queryParams.append('device', deviceInfo.device);
-				if (deviceInfo.browser) queryParams.append('browser', deviceInfo.browser);
-				if (deviceInfo.os) queryParams.append('os', deviceInfo.os);
-
-				// Add user properties if provided
-				if (context.userProperties) {
-					queryParams.append(
-						'user_properties',
-						JSON.stringify(context.userProperties)
-					);
-				}
-
-				const endpoint = `/widget/surveys/active${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
-
-				const response = await this._makeRequest(endpoint, {
-					method: 'GET',
-					headers: {
-						Authorization: `Bearer ${this.sessionToken}`,
-					},
-				});
-
-				return response;
-			} catch (error) {
-				if (error.status === 401) {
-					this.sessionToken = null;
-					this.sessionExpiry = null;
-					await this.init();
-					return this.getActiveSurveys(context);
-				}
-
-				throw new APIError(
-					error.status || 500,
-					`Failed to get active surveys: ${error.message}`,
-					error.response
-				);
-			}
+			const endpoint = this.api._getEndpointWithParams(
+				'/widget/help/collections',
+				options
+			);
+			return this.api._makeRequest(endpoint, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.api.sessionToken}` },
+			});
 		}
 
-		/**
-		 * Auto-detect device, browser, and OS info
-		 * @returns {Object} Device info object
-		 */
-		_getDeviceInfo() {
-			if (typeof navigator === 'undefined') {
-				return { device: null, browser: null, os: null };
-			}
-
-			const ua = navigator.userAgent;
+		async searchHelpArticles(query, options = {}) {
+			await this.api._ensureSession();
 
-			// Detect device type
-			let device = 'desktop';
-			if (/Mobi|Android/i.test(ua)) {
-				device = /Tablet|iPad/i.test(ua) ? 'tablet' : 'mobile';
+			if (this.api.mock) {
+				await delay$1(200);
+				const filtered = MOCK_HELP_COLLECTIONS.filter(
+					(c) =>
+						c.title.toLowerCase().includes(query.toLowerCase()) ||
+						c.description.toLowerCase().includes(query.toLowerCase())
+				);
+				return { status: true, data: filtered };
 			}
 
-			// Detect browser
-			let browser = 'unknown';
-			if (ua.includes('Firefox')) browser = 'firefox';
-			else if (ua.includes('Edg')) browser = 'edge';
-			else if (ua.includes('Chrome')) browser = 'chrome';
-			else if (ua.includes('Safari')) browser = 'safari';
-			else if (ua.includes('Opera') || ua.includes('OPR')) browser = 'opera';
-
-			// Detect OS
-			let os = 'unknown';
-			if (ua.includes('Windows')) os = 'windows';
-			else if (ua.includes('Mac')) os = 'macos';
-			else if (ua.includes('Linux')) os = 'linux';
-			else if (ua.includes('Android')) os = 'android';
-			else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'ios';
-
-			return { device, browser, os };
+			const params = { q: query, ...options };
+			const endpoint = this.api._getEndpointWithParams(
+				'/widget/help/search',
+				params
+			);
+			return this.api._makeRequest(endpoint, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.api.sessionToken}` },
+			});
 		}
+	}
 
-		/**
-		 * Submit a survey response
-		 * @param {string} surveyId - The survey ID
-		 * @param {Object} responseData - The survey response data
-		 * @param {number|string} responseData.rating - The rating/score value
-		 * @param {string} responseData.feedback - Optional text feedback
-		 * @param {Object} responseData.answers - For custom surveys, key-value pairs
-		 * @returns {Promise<Object>} Submission result
-		 */
-		async submitSurveyResponse(surveyId, responseData) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
-
-			if (!this.sessionToken) {
-				throw new APIError(401, 'No valid session token available');
-			}
+	class MessengerService {
+		constructor(baseAPI) {
+			this.api = baseAPI;
+		}
 
-			if (!surveyId) {
-				throw new APIError(400, 'Survey ID is required');
-			}
+		async getMessengerSettings() {
+			await this.api._ensureSession();
 
-			// Mock mode - simulate success
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 300));
+			if (this.api.mock) {
 				return {
-					success: true,
+					status: true,
 					data: {
-						id: 'mock_response_' + Date.now(),
-						survey_id: surveyId,
-						...responseData,
+						enabled: true,
+						greeting_message: 'Hi there! How can we help you today?',
+						team_name: 'Support Team',
+						response_time: 'Usually replies within a few minutes',
 					},
-					message: 'Survey response submitted successfully!',
 				};
 			}
 
-			const payload = {
-				rating: responseData.rating,
-				feedback: responseData.feedback || '',
-				answers: responseData.answers || {},
-			};
-
-			try {
-				const response = await this._makeRequest(
-					`/widget/surveys/${surveyId}/responses`,
-					{
-						method: 'POST',
-						body: JSON.stringify(payload),
-						headers: {
-							'Content-Type': 'application/json',
-							Authorization: `Bearer ${this.sessionToken}`,
-						},
-					}
-				);
-
-				return response;
-			} catch (error) {
-				if (error.status === 401) {
-					this.sessionToken = null;
-					this.sessionExpiry = null;
-					await this.init();
-					return this.submitSurveyResponse(surveyId, responseData);
-				}
-
-				throw new APIError(
-					error.status || 500,
-					`Failed to submit survey response: ${error.message}`,
-					error.response
-				);
-			}
-		}
-
-		/**
-		 * Dismiss a survey (mark as seen but not completed)
-		 * @param {string} surveyId - The survey ID to dismiss
-		 * @returns {Promise<Object>} Dismissal result
-		 */
-		async dismissSurvey(surveyId) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
-
-			if (!this.sessionToken) {
-				throw new APIError(401, 'No valid session token available');
-			}
-
-			if (!surveyId) {
-				throw new APIError(400, 'Survey ID is required');
-			}
-
-			// Mock mode - simulate success
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 100));
-				return {
-					success: true,
-					message: 'Survey dismissed successfully',
-				};
-			}
-
-			try {
-				const response = await this._makeRequest(
-					`/widget/surveys/${surveyId}/dismiss`,
-					{
-						method: 'POST',
-						headers: {
-							Authorization: `Bearer ${this.sessionToken}`,
-						},
-					}
-				);
-
-				return response;
-			} catch (error) {
-				if (error.status === 401) {
-					this.sessionToken = null;
-					this.sessionExpiry = null;
-					await this.init();
-					return this.dismissSurvey(surveyId);
-				}
-
-				throw new APIError(
-					error.status || 500,
-					`Failed to dismiss survey: ${error.message}`,
-					error.response
-				);
-			}
-		}
-
-		// ==========================================
-		// MESSENGER / CHAT ENDPOINTS
-		// ==========================================
-
-		/**
-		 * Get messenger settings
-		 * @returns {Promise<Object>} Messenger settings
-		 */
-		async getMessengerSettings() {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
-
-			if (this.mock) {
-				return {
-					status: true,
-					data: {
-						enabled: true,
-						greeting_message: 'Hi there! How can we help you today?',
-						team_name: 'Support Team',
-						response_time: 'Usually replies within a few minutes',
-					},
-				};
-			}
-
-			return this._makeRequest('/widget/messenger/settings', {
+			return this.api._makeRequest('/widget/messenger/settings', {
 				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
+				headers: { Authorization: `Bearer ${this.api.sessionToken}` },
 			});
 		}
 
-		/**
-		 * Check if agents are online
-		 * @returns {Promise<Object>} Agent availability status
-		 */
 		async checkAgentsOnline() {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+			await this.api._ensureSession();
 
-			if (this.mock) {
+			if (this.api.mock) {
 				return {
 					status: true,
 					data: {
@@ -736,26 +395,17 @@
 				};
 			}
 
-			return this._makeRequest('/widget/messenger/agents/online', {
+			return this.api._makeRequest('/widget/messenger/agents/online', {
 				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
+				headers: { Authorization: `Bearer ${this.api.sessionToken}` },
 			});
 		}
 
-		/**
-		 * Get all conversations for the current contact
-		 * @param {Object} options - Query options
-		 * @param {number} options.page - Page number
-		 * @param {number} options.limit - Items per page
-		 * @returns {Promise<Object>} Conversations list
-		 */
 		async getConversations(options = {}) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+			await this.api._ensureSession();
 
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 300));
+			if (this.api.mock) {
+				await delay$1(300);
 				return {
 					status: true,
 					data: MOCK_CONVERSATIONS,
@@ -763,92 +413,42 @@
 				};
 			}
 
-			const params = new URLSearchParams();
-			if (options.page) params.append('page', options.page);
-			if (options.limit) params.append('limit', options.limit);
-
-			const endpoint = `/widget/messenger/conversations${params.toString() ? '?' + params.toString() : ''}`;
-			return this._makeRequest(endpoint, {
+			const endpoint = this.api._getEndpointWithParams(
+				'/widget/messenger/conversations',
+				options
+			);
+			return this.api._makeRequest(endpoint, {
 				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
+				headers: { Authorization: `Bearer ${this.api.sessionToken}` },
 			});
 		}
 
-		/**
-		 * Get a single conversation with messages
-		 * @param {string} conversationId - Conversation ID
-		 * @returns {Promise<Object>} Conversation with messages
-		 */
 		async getConversation(conversationId) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+			await this.api._ensureSession();
 
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 200));
+			if (this.api.mock) {
+				await delay$1(200);
 				const conv = MOCK_CONVERSATIONS.find((c) => c.id === conversationId);
 				return {
 					status: true,
-					data: {
-						...conv,
-						messages: MOCK_MESSAGES[conversationId] || [],
-					},
+					data: { ...conv, messages: MOCK_MESSAGES[conversationId] || [] },
 				};
 			}
 
-			return this._makeRequest(
+			return this.api._makeRequest(
 				`/widget/messenger/conversations/${conversationId}`,
 				{
 					method: 'GET',
-					headers: { Authorization: `Bearer ${this.sessionToken}` },
+					headers: { Authorization: `Bearer ${this.api.sessionToken}` },
 				}
 			);
 		}
 
-		/**
-		 * Get messages for a conversation
-		 * @param {string} conversationId - Conversation ID
-		 * @param {Object} options - Query options
-		 * @returns {Promise<Object>} Messages list
-		 */
-		async getMessages(conversationId, options = {}) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
-
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 200));
-				return {
-					status: true,
-					data: MOCK_MESSAGES[conversationId] || [],
-				};
-			}
-
-			const params = new URLSearchParams();
-			if (options.page) params.append('page', options.page);
-			if (options.limit) params.append('limit', options.limit);
-
-			const endpoint = `/widget/messenger/conversations/${conversationId}/messages${params.toString() ? '?' + params.toString() : ''}`;
-			return this._makeRequest(endpoint, {
-				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
-			});
-		}
-
-		/**
-		 * Start a new conversation
-		 * @param {Object} data - Conversation data
-		 * @param {string} data.message - Initial message content
-		 * @param {string} data.subject - Optional subject
-		 * @returns {Promise<Object>} Created conversation
-		 */
 		async startConversation(data) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+			await this.api._ensureSession();
 
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 300));
+			if (this.api.mock) {
+				await delay$1(300);
 				const newConv = {
 					id: 'conv_' + Date.now(),
 					subject: data.subject || 'New conversation',
@@ -869,11 +469,11 @@
 				return { status: true, data: newConv };
 			}
 
-			return this._makeRequest('/widget/messenger/conversations', {
+			return this.api._makeRequest('/widget/messenger/conversations', {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',
-					Authorization: `Bearer ${this.sessionToken}`,
+					Authorization: `Bearer ${this.api.sessionToken}`,
 				},
 				body: JSON.stringify({
 					message: data.message,
@@ -882,20 +482,11 @@
 			});
 		}
 
-		/**
-		 * Send a message in a conversation
-		 * @param {string} conversationId - Conversation ID
-		 * @param {Object} data - Message data
-		 * @param {string} data.content - Message content
-		 * @returns {Promise<Object>} Sent message
-		 */
 		async sendMessage(conversationId, data) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+			await this.api._ensureSession();
 
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 200));
+			if (this.api.mock) {
+				await delay$1(200);
 				const newMessage = {
 					id: 'msg_' + Date.now(),
 					content: data.content,
@@ -909,80 +500,23 @@
 				return { status: true, data: newMessage };
 			}
 
-			return this._makeRequest(
+			return this.api._makeRequest(
 				`/widget/messenger/conversations/${conversationId}/messages`,
 				{
 					method: 'POST',
 					headers: {
 						'Content-Type': 'application/json',
-						Authorization: `Bearer ${this.sessionToken}`,
+						Authorization: `Bearer ${this.api.sessionToken}`,
 					},
 					body: JSON.stringify({ content: data.content }),
 				}
 			);
 		}
 
-		/**
-		 * Send typing indicator
-		 * @param {string} conversationId - Conversation ID
-		 * @param {boolean} isTyping - Whether user is typing
-		 * @returns {Promise<Object>} Response
-		 */
-		async sendTypingIndicator(conversationId, isTyping) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
-
-			if (this.mock) {
-				return { status: true };
-			}
-
-			return this._makeRequest(
-				`/widget/messenger/conversations/${conversationId}/typing`,
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-						Authorization: `Bearer ${this.sessionToken}`,
-					},
-					body: JSON.stringify({ is_typing: isTyping }),
-				}
-			);
-		}
-
-		/**
-		 * Mark conversation as read
-		 * @param {string} conversationId - Conversation ID
-		 * @returns {Promise<Object>} Response
-		 */
-		async markConversationAsRead(conversationId) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
-
-			if (this.mock) {
-				return { status: true };
-			}
-
-			return this._makeRequest(
-				`/widget/messenger/conversations/${conversationId}/read`,
-				{
-					method: 'POST',
-					headers: { Authorization: `Bearer ${this.sessionToken}` },
-				}
-			);
-		}
-
-		/**
-		 * Get unread count
-		 * @returns {Promise<Object>} Unread count data
-		 */
 		async getUnreadCount() {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+			await this.api._ensureSession();
 
-			if (this.mock) {
+			if (this.api.mock) {
 				const count = MOCK_CONVERSATIONS.reduce(
 					(sum, c) => sum + (c.unread || 0),
 					0
@@ -993,187 +527,325 @@
 				};
 			}
 
-			return this._makeRequest('/widget/messenger/unread', {
+			return this.api._makeRequest('/widget/messenger/unread', {
 				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
+				headers: { Authorization: `Bearer ${this.api.sessionToken}` },
 			});
 		}
 
-		/**
-		 * Submit conversation rating
-		 * @param {string} conversationId - Conversation ID
-		 * @param {Object} data - Rating data
-		 * @param {number} data.rating - Rating (1-5 or thumbs up/down)
-		 * @param {string} data.comment - Optional comment
-		 * @returns {Promise<Object>} Response
-		 */
-		async submitRating(conversationId, data) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+		async markConversationAsRead(conversationId) {
+			await this.api._ensureSession();
 
-			if (this.mock) {
-				return { status: true, message: 'Thank you for your feedback!' };
+			if (this.api.mock) {
+				return { status: true };
 			}
 
-			return this._makeRequest(
-				`/widget/messenger/conversations/${conversationId}/rate`,
+			return this.api._makeRequest(
+				`/widget/messenger/conversations/${conversationId}/read`,
 				{
 					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-						Authorization: `Bearer ${this.sessionToken}`,
-					},
-					body: JSON.stringify({
-						rating: data.rating,
-						comment: data.comment || '',
-					}),
+					headers: { Authorization: `Bearer ${this.api.sessionToken}` },
 				}
 			);
 		}
+	}
 
-		/**
-		 * Identify contact (for logged-in users)
-		 * @param {Object} data - Contact data
-		 * @param {string} data.email - Email address
-		 * @param {string} data.name - Name
-		 * @returns {Promise<Object>} Response
-		 */
-		async identifyContact(data) {
-			if (!this.isSessionValid()) {
-				await this.init();
-			}
+	class SDKError extends Error {
+		constructor(message, cause) {
+			super(message);
+			this.name = 'SDKError';
+			this.cause = cause;
 
-			if (this.mock) {
-				return { status: true, message: 'Contact identified' };
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, SDKError);
 			}
-
-			return this._makeRequest('/widget/messenger/identify', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${this.sessionToken}`,
-				},
-				body: JSON.stringify(data),
-			});
 		}
+	}
 
-		// ==========================================
-		// HELP ARTICLES ENDPOINTS
-		// ==========================================
+	class APIError extends Error {
+		constructor(status, message, response) {
+			super(message);
+			this.name = 'APIError';
+			this.status = status;
+			this.response = response;
 
-		/**
-		 * Get help collections
-		 * @param {Object} options - Query options
-		 * @returns {Promise<Object>} Collections list
-		 */
-		async getHelpCollections(options = {}) {
-			if (!this.isSessionValid()) {
-				await this.init();
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, APIError);
 			}
+		}
 
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 200));
-				return { status: true, data: MOCK_HELP_COLLECTIONS };
-			}
+		isNetworkError() {
+			return this.status === 0;
+		}
 
-			const params = new URLSearchParams();
-			if (options.limit) params.append('limit', options.limit);
+		isClientError() {
+			return this.status >= 400 && this.status < 500;
+		}
 
-			const endpoint = `/widget/help/collections${params.toString() ? '?' + params.toString() : ''}`;
-			return this._makeRequest(endpoint, {
-				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
-			});
+		isServerError() {
+			return this.status >= 500 && this.status < 600;
 		}
+	}
 
-		/**
-		 * Search help articles
-		 * @param {string} query - Search query
-		 * @param {Object} options - Query options
-		 * @returns {Promise<Object>} Search results
-		 */
-		async searchHelpArticles(query, options = {}) {
-			if (!this.isSessionValid()) {
-				await this.init();
+	class WidgetError extends Error {
+		constructor(message, widgetType, widgetId) {
+			super(message);
+			this.name = 'WidgetError';
+			this.widgetType = widgetType;
+			this.widgetId = widgetId;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, WidgetError);
 			}
+		}
+	}
 
-			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 200));
-				const filtered = MOCK_HELP_COLLECTIONS.filter(
-					(c) =>
-						c.title.toLowerCase().includes(query.toLowerCase()) ||
-						c.description.toLowerCase().includes(query.toLowerCase())
+	class ConfigError extends Error {
+		constructor(message, configKey) {
+			super(message);
+			this.name = 'ConfigError';
+			this.configKey = configKey;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, ConfigError);
+			}
+		}
+	}
+
+	class ValidationError extends Error {
+		constructor(message, field, value) {
+			super(message);
+			this.name = 'ValidationError';
+			this.field = field;
+			this.value = value;
+
+			if (Error.captureStackTrace) {
+				Error.captureStackTrace(this, ValidationError);
+			}
+		}
+	}
+
+	class SurveyService {
+		constructor(baseAPI) {
+			this.api = baseAPI;
+		}
+
+		async getActiveSurveys(context = {}) {
+			await this.api._ensureSession();
+
+			if (this.api.mock) {
+				await delay$1(200);
+				return { success: true, data: MOCK_SURVEYS };
+			}
+
+			const params = {
+				url:
+					context.url ||
+					(typeof window !== 'undefined' ? window.location.href : ''),
+				...getDeviceInfo(),
+				...(context.userProperties && {
+					user_properties: context.userProperties,
+				}),
+			};
+
+			return this.api._handleAuthRetry(async () => {
+				const endpoint = this.api._getEndpointWithParams(
+					'/widget/surveys/active',
+					params
 				);
-				return { status: true, data: filtered };
+				return await this.api._makeRequest(endpoint, {
+					method: 'GET',
+					headers: { Authorization: `Bearer ${this.api.sessionToken}` },
+				});
+			});
+		}
+
+		async submitSurveyResponse(surveyId, responseData) {
+			if (!surveyId) throw new APIError(400, 'Survey ID is required');
+
+			await this.api._ensureSession();
+
+			if (this.api.mock) {
+				await delay$1(300);
+				return {
+					success: true,
+					data: {
+						id: 'mock_response_' + Date.now(),
+						survey_id: surveyId,
+						...responseData,
+					},
+					message: 'Survey response submitted successfully!',
+				};
 			}
 
-			const params = new URLSearchParams({ q: query });
-			if (options.limit) params.append('limit', options.limit);
+			const payload = {
+				rating: responseData.rating,
+				feedback: responseData.feedback || '',
+				answers: responseData.answers || {},
+			};
 
-			return this._makeRequest(`/widget/help/search?${params.toString()}`, {
-				method: 'GET',
-				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			return this.api._handleAuthRetry(async () => {
+				return await this.api._makeRequest(
+					`/widget/surveys/${surveyId}/responses`,
+					{
+						method: 'POST',
+						body: JSON.stringify(payload),
+						headers: {
+							'Content-Type': 'application/json',
+							Authorization: `Bearer ${this.api.sessionToken}`,
+						},
+					}
+				);
 			});
 		}
 
-		// ==========================================
-		// CHANGELOG ENDPOINTS
-		// ==========================================
+		async dismissSurvey(surveyId) {
+			if (!surveyId) throw new APIError(400, 'Survey ID is required');
 
-		/**
-		 * Get published changelogs
-		 * @param {Object} options - Optional query parameters
-		 * @param {number} options.limit - Number of changelogs to fetch
-		 * @param {number} options.offset - Offset for pagination
-		 * @returns {Promise<Object>} Changelogs response
-		 */
-		async getChangelogs(options = {}) {
-			if (!this.isSessionValid()) {
-				await this.init();
+			await this.api._ensureSession();
+
+			if (this.api.mock) {
+				await delay$1(100);
+				return { success: true, message: 'Survey dismissed successfully' };
 			}
 
-			if (!this.sessionToken) {
-				throw new APIError(401, 'No valid session token available');
+			return this.api._handleAuthRetry(async () => {
+				return await this.api._makeRequest(
+					`/widget/surveys/${surveyId}/dismiss`,
+					{
+						method: 'POST',
+						headers: { Authorization: `Bearer ${this.api.sessionToken}` },
+					}
+				);
+			});
+		}
+	}
+
+	class BaseAPIService {
+		constructor(config = {}) {
+			this.workspace = config.workspace;
+			this.sessionToken = null;
+			this.sessionExpiry = null;
+			this.userContext = config.userContext || null;
+			this.mock = config.mock || false;
+			this.env = config.env || 'production';
+			this.baseURL = this._getBaseURL(config);
+
+			this._loadStoredSession();
+		}
+
+		_getBaseURL(config) {
+			if (config.apiUrl) return config.apiUrl;
+
+			const ENV_URLS = {
+				production: {
+					base: 'https://api.product7.io/api/v1',
+					withWorkspace: (ws) => `https://${ws}.api.product7.io/api/v1`,
+				},
+				staging: {
+					base: 'https://staging.api.product7.io/api/v1',
+					withWorkspace: (ws) => `https://${ws}.staging.api.product7.io/api/v1`,
+				},
+			};
+
+			const envConfig = ENV_URLS[this.env] || ENV_URLS.production;
+			return this.workspace
+				? envConfig.withWorkspace(this.workspace)
+				: envConfig.base;
+		}
+
+		async init(userContext = null) {
+			if (userContext) {
+				this.userContext = userContext;
+			}
+
+			if (this.isSessionValid()) {
+				return { sessionToken: this.sessionToken };
+			}
+
+			if (!this.workspace || !this.userContext) {
+				throw new APIError(
+					400,
+					`Missing ${!this.workspace ? 'workspace' : 'user context'} for initialization`
+				);
 			}
 
-			// Mock mode - return mock changelogs
 			if (this.mock) {
-				await new Promise((resolve) => setTimeout(resolve, 300));
-				return {
-					success: true,
-					data: MOCK_CHANGELOGS,
-				};
+				return this._initMockSession();
 			}
 
-			try {
-				const queryParams = new URLSearchParams();
-				if (options.limit) queryParams.append('limit', options.limit);
-				if (options.offset) queryParams.append('offset', options.offset);
+			return this._initRealSession();
+		}
+
+		async _initMockSession() {
+			this.sessionToken = 'mock_session_' + Date.now();
+			this.sessionExpiry = new Date(Date.now() + 3600 * 1000);
+			this._storeSession();
+			return {
+				sessionToken: this.sessionToken,
+				config: {
+					primaryColor: '#21244A',
+					backgroundColor: '#ffffff',
+					textColor: '#1F2937',
+					boardId: 'feature-requests',
+					size: 'medium',
+					displayMode: 'modal',
+				},
+				expiresIn: 3600,
+			};
+		}
 
-				const endpoint = `/widget/changelogs${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+		async _initRealSession() {
+			const payload = {
+				workspace: this.workspace,
+				user: this.userContext,
+			};
 
-				const response = await this._makeRequest(endpoint, {
-					method: 'GET',
-					headers: {
-						Authorization: `Bearer ${this.sessionToken}`,
-					},
+			try {
+				const response = await this._makeRequest('/widget/init', {
+					method: 'POST',
+					body: JSON.stringify(payload),
+					headers: { 'Content-Type': 'application/json' },
 				});
 
-				return response;
+				this.sessionToken = response.session_token;
+				this.sessionExpiry = new Date(Date.now() + response.expires_in * 1000);
+				this._storeSession();
+
+				return {
+					sessionToken: this.sessionToken,
+					config: response.config || {},
+					expiresIn: response.expires_in,
+				};
+			} catch (error) {
+				throw new APIError(
+					error.status || 500,
+					`Failed to initialize widget: ${error.message}`,
+					error.response
+				);
+			}
+		}
+
+		async _ensureSession() {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+			if (!this.sessionToken) {
+				throw new APIError(401, 'No valid session token available');
+			}
+		}
+
+		async _handleAuthRetry(method, ...args) {
+			try {
+				return await method.apply(this, args);
 			} catch (error) {
 				if (error.status === 401) {
 					this.sessionToken = null;
 					this.sessionExpiry = null;
 					await this.init();
-					return this.getChangelogs(options);
+					return await method.apply(this, args);
 				}
-
-				throw new APIError(
-					error.status || 500,
-					`Failed to get changelogs: ${error.message}`,
-					error.response
-				);
+				throw error;
 			}
 		}
 
@@ -1185,12 +857,7 @@
 
 		setUserContext(userContext) {
 			this.userContext = userContext;
-			if (typeof localStorage !== 'undefined') {
-				localStorage.setItem(
-					'feedbackSDK_userContext',
-					JSON.stringify(userContext)
-				);
-			}
+			this._storeData('feedbackSDK_userContext', userContext);
 		}
 
 		getUserContext() {
@@ -1200,30 +867,26 @@
 		clearSession() {
 			this.sessionToken = null;
 			this.sessionExpiry = null;
-			if (typeof localStorage !== 'undefined') {
-				localStorage.removeItem('feedbackSDK_session');
-				localStorage.removeItem('feedbackSDK_userContext');
-			}
+			this._removeData('feedbackSDK_session');
+			this._removeData('feedbackSDK_userContext');
 		}
 
 		_storeSession() {
 			if (typeof localStorage === 'undefined') return;
-
 			try {
 				const sessionData = {
 					token: this.sessionToken,
 					expiry: this.sessionExpiry.toISOString(),
 					workspace: this.workspace,
 				};
-				localStorage.setItem('feedbackSDK_session', JSON.stringify(sessionData));
+				this._storeData('feedbackSDK_session', sessionData);
 			} catch (error) {
-				// Silently fail if localStorage is not available
+				// Silent fail
 			}
 		}
 
 		_loadStoredSession() {
 			if (typeof localStorage === 'undefined') return false;
-
 			try {
 				const stored = localStorage.getItem('feedbackSDK_session');
 				if (!stored) return false;
@@ -1238,6 +901,18 @@
 			}
 		}
 
+		_storeData(key, value) {
+			if (typeof localStorage !== 'undefined') {
+				localStorage.setItem(key, JSON.stringify(value));
+			}
+		}
+
+		_removeData(key) {
+			if (typeof localStorage !== 'undefined') {
+				localStorage.removeItem(key);
+			}
+		}
+
 		async _makeRequest(endpoint, options = {}) {
 			const url = `${this.baseURL}${endpoint}`;
 
@@ -1266,68 +941,172 @@
 
 				return await response.text();
 			} catch (error) {
-				if (error instanceof APIError) {
-					throw error;
-				}
+				if (error instanceof APIError) throw error;
 				throw new APIError(0, error.message, null);
 			}
 		}
-	}
 
-	class EventBus {
-		constructor() {
-			this.events = new Map();
+		_buildQueryParams(params) {
+			const queryParams = new URLSearchParams();
+			Object.entries(params).forEach(([key, value]) => {
+				if (value !== undefined && value !== null) {
+					queryParams.append(
+						key,
+						typeof value === 'object' ? JSON.stringify(value) : value
+					);
+				}
+			});
+			return queryParams.toString();
 		}
 
-		on(event, callback) {
-			if (!this.events.has(event)) {
-				this.events.set(event, []);
-			}
-			this.events.get(event).push(callback);
-
-			return () => this.off(event, callback);
+		_getEndpointWithParams(endpoint, params) {
+			const queryString = this._buildQueryParams(params);
+			return `${endpoint}${queryString ? '?' + queryString : ''}`;
 		}
+	}
 
-		off(event, callback) {
-			const callbacks = this.events.get(event);
-			if (callbacks) {
-				const index = callbacks.indexOf(callback);
-				if (index > -1) {
-					callbacks.splice(index, 1);
-				}
-			}
+	class APIService extends BaseAPIService {
+		constructor(config = {}) {
+			super(config);
+
+			this.feedback = new FeedbackService(this);
+			this.survey = new SurveyService(this);
+			this.messenger = new MessengerService(this);
+			this.help = new HelpService(this);
+			this.changelog = new ChangelogService(this);
 		}
 
-		emit(event, data) {
-			const callbacks = this.events.get(event);
-			if (callbacks) {
-				callbacks.forEach((callback) => {
-					try {
-						callback(data);
-					} catch (error) {
-						console.error('[FeedbackSDK] Event callback error:', error);
-					}
-				});
-			}
+		async submitFeedback(data) {
+			return this.feedback.submitFeedback(data);
 		}
 
-		once(event, callback) {
-			const unsubscribe = this.on(event, (data) => {
-				callback(data);
-				unsubscribe();
-			});
-			return unsubscribe;
+		async getActiveSurveys(context) {
+			return this.survey.getActiveSurveys(context);
 		}
 
-		clear() {
-			this.events.clear();
+		async submitSurveyResponse(surveyId, responseData) {
+			return this.survey.submitSurveyResponse(surveyId, responseData);
 		}
 
-		getListenerCount(event) {
-			const callbacks = this.events.get(event);
-			return callbacks ? callbacks.length : 0;
+		async dismissSurvey(surveyId) {
+			return this.survey.dismissSurvey(surveyId);
 		}
-	}
+
+		async getMessengerSettings() {
+			return this.messenger.getMessengerSettings();
+		}
+
+		async checkAgentsOnline() {
+			return this.messenger.checkAgentsOnline();
+		}
+
+		async getConversations(options) {
+			return this.messenger.getConversations(options);
+		}
+
+		async getConversation(conversationId) {
+			return this.messenger.getConversation(conversationId);
+		}
+
+		async getMessages(conversationId, options) {
+			return this.messenger.getMessages(conversationId, options);
+		}
+
+		async startConversation(data) {
+			return this.messenger.startConversation(data);
+		}
+
+		async sendMessage(conversationId, data) {
+			return this.messenger.sendMessage(conversationId, data);
+		}
+
+		async sendTypingIndicator(conversationId, isTyping) {
+			return this.messenger.sendTypingIndicator(conversationId, isTyping);
+		}
+
+		async markConversationAsRead(conversationId) {
+			return this.messenger.markConversationAsRead(conversationId);
+		}
+
+		async getUnreadCount() {
+			return this.messenger.getUnreadCount();
+		}
+
+		async submitRating(conversationId, data) {
+			return this.messenger.submitRating(conversationId, data);
+		}
+
+		async identifyContact(data) {
+			return this.messenger.identifyContact(data);
+		}
+
+		async getHelpCollections(options) {
+			return this.help.getHelpCollections(options);
+		}
+
+		async searchHelpArticles(query, options) {
+			return this.help.searchHelpArticles(query, options);
+		}
+
+		async getChangelogs(options) {
+			return this.changelog.getChangelogs(options);
+		}
+	}
+
+	class EventBus {
+		constructor() {
+			this.events = new Map();
+		}
+
+		on(event, callback) {
+			if (!this.events.has(event)) {
+				this.events.set(event, []);
+			}
+			this.events.get(event).push(callback);
+
+			return () => this.off(event, callback);
+		}
+
+		off(event, callback) {
+			const callbacks = this.events.get(event);
+			if (callbacks) {
+				const index = callbacks.indexOf(callback);
+				if (index > -1) {
+					callbacks.splice(index, 1);
+				}
+			}
+		}
+
+		emit(event, data) {
+			const callbacks = this.events.get(event);
+			if (callbacks) {
+				callbacks.forEach((callback) => {
+					try {
+						callback(data);
+					} catch (error) {
+						console.error('[FeedbackSDK] Event callback error:', error);
+					}
+				});
+			}
+		}
+
+		once(event, callback) {
+			const unsubscribe = this.on(event, (data) => {
+				callback(data);
+				unsubscribe();
+			});
+			return unsubscribe;
+		}
+
+		clear() {
+			this.events.clear();
+		}
+
+		getListenerCount(event) {
+			const callbacks = this.events.get(event);
+			return callbacks ? callbacks.length : 0;
+		}
+	}
 
 	function generateId(prefix = 'feedback') {
 		const timestamp = Date.now();
@@ -3503,15 +3282,12 @@
 		}
 	}
 
-	/**
-	 * MessengerLauncher - Floating trigger button for messenger
-	 */
 	class MessengerLauncher {
 		constructor(state, options = {}) {
 			this.state = state;
 			this.options = {
 				position: options.position || 'bottom-right',
-				primaryColor: options.primaryColor || '#1c1c1e',
+				primaryColor: options.primaryColor || '#155eff',
 				...options,
 			};
 			this.element = null;
@@ -3525,7 +3301,6 @@
 			this._updateContent();
 			this._attachEvents();
 
-			// Subscribe to state changes
 			this._unsubscribe = this.state.subscribe((type, data) => {
 				if (type === 'openChange') {
 					this._updateIcon();
@@ -3547,10 +3322,14 @@
 			this.element.innerHTML = `
 			<button class="messenger-launcher-btn" aria-label="Open messenger" style="background: ${this.options.primaryColor};">
 				<span class="messenger-launcher-icon messenger-launcher-icon-chat">
-					<i class="ph ph-chat-circle-dots" style="font-size: 24px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
+						<path d="M144,140a12,12,0,1,1-12-12A12,12,0,0,1,144,140Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,188,128Zm51.34,83.47a16,16,0,0,1-19.87,19.87l-24.71-7.27A80,80,0,0,1,86.43,183.42a79,79,0,0,1-25.19-7.35l-24.71,7.27a16,16,0,0,1-19.87-19.87l7.27-24.71A80,80,0,1,1,169.58,72.59a80,80,0,0,1,62.49,114.17ZM81.3,166.3a79.94,79.94,0,0,1,70.38-93.87A64,64,0,0,0,39.55,134.19a8,8,0,0,1,.63,6L32,168l27.76-8.17a8,8,0,0,1,6,.63A63.45,63.45,0,0,0,81.3,166.3Zm135.15,15.89a64,64,0,1,0-26.26,26.26,8,8,0,0,1,6-.63L224,216l-8.17-27.76A8,8,0,0,1,216.45,182.19Z"></path>
+					</svg>
 				</span>
 				<span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
-					<i class="ph ph-x" style="font-size: 24px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</span>
 				${badgeHtml}
 			</button>
@@ -3733,19 +3512,31 @@
 		}
 
 		_getHomeIcon() {
-			return `<i class="ph-duotone ph-house" style="font-size: 24px;"></i>`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M216,115.54V208a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.54a8,8,0,0,1,2.62-5.92l80-75.54a8,8,0,0,1,10.77,0l80,75.54A8,8,0,0,1,216,115.54Z" opacity="0.2"></path>
+		<path d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"></path>
+	</svg>`;
 		}
 
 		_getMessagesIcon() {
-			return `<i class="ph-duotone ph-chat" style="font-size: 24px;"></i>`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M224,64V192a8,8,0,0,1-8,8H82.5a8,8,0,0,0-5.15,1.88l-32.2,28.23A8,8,0,0,1,32,224V64a8,8,0,0,1,8-8H216A8,8,0,0,1,224,64Z" opacity="0.2"></path>
+		<path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,224V64H216Z"></path>
+	</svg>`;
 		}
 
 		_getHelpIcon() {
-			return `<i class="ph-duotone ph-question" style="font-size: 24px;"></i>`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path>
+		<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
+	</svg>`;
 		}
 
 		_getChangelogIcon() {
-			return `<i class="ph-duotone ph-megaphone" style="font-size: 24px;"></i>`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
+		<path d="M200,144a32,32,0,0,1-63.5,4.5L85.83,121.25a32.07,32.07,0,0,1-41.54-34l-24.15-21a8,8,0,0,1,10.25-12.29L54.55,75a32,32,0,0,1,59.16,2.5l50.63,27.25a31.88,31.88,0,0,1,35.66,7l26.46-23A8,8,0,1,1,236.71,101l-26.46,23A32,32,0,0,1,200,144Z" opacity="0.2"></path>
+		<path d="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
+	</svg>`;
 		}
 
 		destroy() {
@@ -3888,9 +3679,6 @@
 		}
 	}
 
-	/**
-	 * ChangelogView - Changelog and announcements
-	 */
 	class ChangelogView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -3905,7 +3693,6 @@
 
 			this._updateContent();
 
-			// Subscribe to state changes
 			this._unsubscribe = this.state.subscribe((type) => {
 				if (type === 'changelogUpdate') {
 					this._updateChangelogList();
@@ -3922,7 +3709,9 @@
 			<div class="messenger-changelog-header">
 				<h2>Changelog</h2>
 				<button class="messenger-close-btn" aria-label="Close">
-					<i class="ph ph-x" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</button>
 			</div>
 
@@ -3958,7 +3747,6 @@
 				.map((item) => this._renderChangelogCard(item))
 				.join('');
 
-			// Attach click events
 			this._attachChangelogEvents();
 		}
 
@@ -3989,7 +3777,9 @@
 					${item.description ? `<p class="messenger-changelog-description">${this._truncateText(item.description, 100)}</p>` : ''}
 					<div class="messenger-changelog-meta">
 						<span class="messenger-changelog-date">${dateStr}</span>
-						<i class="ph ph-caret-right messenger-changelog-arrow" style="font-size: 16px;"></i>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256" class="messenger-changelog-arrow">
+							<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
+						</svg>
 					</div>
 				</div>
 			</div>
@@ -4024,7 +3814,9 @@
 			return `
 			<div class="messenger-changelog-empty">
 				<div class="messenger-changelog-empty-icon">
-					<i class="ph ph-megaphone" style="font-size: 48px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+						<path d="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
+					</svg>
 				</div>
 				<h3>No changelog yet</h3>
 				<p>Check back later for updates</p>
@@ -4049,7 +3841,6 @@
 		}
 
 		_attachEvents() {
-			// Close button
 			this.element
 				.querySelector('.messenger-close-btn')
 				.addEventListener('click', () => {
@@ -4087,9 +3878,6 @@
 		}
 	}
 
-	/**
-	 * ChatView - Individual conversation chat
-	 */
 	class ChatView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -4107,7 +3895,6 @@
 
 			this._updateContent();
 
-			// Subscribe to state changes
 			this._unsubscribe = this.state.subscribe((type, data) => {
 				if (
 					type === 'messageAdded' &&
@@ -4158,14 +3945,18 @@
 			this.element.innerHTML = `
 			<div class="messenger-chat-header">
 				<button class="messenger-back-btn" aria-label="Back">
-					<i class="ph ph-caret-left" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
+					</svg>
 				</button>
 				<div class="messenger-chat-header-info">
 					${avatarHtml}
 					<span class="messenger-chat-title">${title}</span>
 				</div>
 				<button class="messenger-close-btn" aria-label="Close">
-					<i class="ph ph-x" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</button>
 			</div>
 
@@ -4184,7 +3975,9 @@
 					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
 				<button class="messenger-compose-send" aria-label="Send" disabled>
-					<i class="ph ph-paper-plane-tilt" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14L118.42,148.9l47.24-47.25a8,8,0,0,0-11.31-11.31L107.1,137.58,24,98.22l.14,0L216,40Z"></path>
+					</svg>
 				</button>
 			</div>
 		`;
@@ -4304,7 +4097,6 @@
 
 		_formatMessageContent(content) {
 			if (!content) return '';
-			// Basic HTML escaping and line breaks
 			return content
 				.replace(/&/g, '&amp;')
 				.replace(/</g, '&lt;')
@@ -4339,33 +4131,27 @@
 		}
 
 		_attachEvents() {
-			// Back button
 			this.element
 				.querySelector('.messenger-back-btn')
 				.addEventListener('click', () => {
 					this.state.setView('messages');
 				});
 
-			// Close button
 			this.element
 				.querySelector('.messenger-close-btn')
 				.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
 
-			// Compose input
 			const input = this.element.querySelector('.messenger-compose-input');
 			const sendBtn = this.element.querySelector('.messenger-compose-send');
 
 			input.addEventListener('input', () => {
-				// Auto-resize textarea
 				input.style.height = 'auto';
 				input.style.height = Math.min(input.scrollHeight, 120) + 'px';
 
-				// Enable/disable send button
 				sendBtn.disabled = !input.value.trim();
 
-				// Send typing indicator
 				if (input.value.trim()) {
 					this._startTyping();
 				}
@@ -4389,18 +4175,15 @@
 
 			if (!content) return;
 
-			// Stop typing indicator
 			this._stopTyping();
 
 			const isNewConversation = !this.state.activeConversationId;
 
 			if (isNewConversation) {
-				// Start a new conversation
 				if (this.options.onStartConversation) {
 					this.options.onStartConversation(content);
 				}
 			} else {
-				// Add message to existing conversation
 				const message = {
 					id: 'msg_' + Date.now(),
 					content: content,
@@ -4410,13 +4193,11 @@
 
 				this.state.addMessage(this.state.activeConversationId, message);
 
-				// Emit event for API integration
 				if (this.options.onSendMessage) {
 					this.options.onSendMessage(this.state.activeConversationId, message);
 				}
 			}
 
-			// Clear input
 			input.value = '';
 			input.style.height = 'auto';
 			this.element.querySelector('.messenger-compose-send').disabled = true;
@@ -4430,7 +4211,6 @@
 				}
 			}
 
-			// Reset typing timeout
 			if (this._typingTimeout) {
 				clearTimeout(this._typingTimeout);
 			}
@@ -4485,9 +4265,6 @@
 		}
 	}
 
-	/**
-	 * ConversationsView - Message thread list
-	 */
 	class ConversationsView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -4503,7 +4280,6 @@
 			this._updateContent();
 			this._attachEvents();
 
-			// Subscribe to state changes
 			this._unsubscribe = this.state.subscribe((type) => {
 				if (
 					type === 'conversationsUpdate' ||
@@ -4526,7 +4302,9 @@
 				conversationsHtml = `
 				<div class="messenger-conversations-empty">
 					<div class="messenger-conversations-empty-icon">
-						<i class="ph ph-chat" style="font-size: 48px;"></i>
+						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+							<path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,224V64H216Z"></path>
+						</svg>
 					</div>
 					<h3>No conversations yet</h3>
 					<p>Start a new conversation with our team</p>
@@ -4544,7 +4322,9 @@
 			<div class="messenger-conversations-header">
 				<h2>Messages</h2>
 				<button class="messenger-close-btn" aria-label="Close">
-					<i class="ph ph-x" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</button>
 			</div>
 
@@ -4556,7 +4336,9 @@
 				<button class="messenger-new-message-btn">
 					<div class="messenger-new-message-avatars">${avatarsHtml}</div>
 					<span>Send us a message</span>
-					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
+						<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
+					</svg>
 				</button>
 			</div>
 		`;
@@ -4655,7 +4437,6 @@
 		}
 
 		_attachEvents() {
-			// Close button
 			const closeBtn = this.element.querySelector('.messenger-close-btn');
 			if (closeBtn) {
 				closeBtn.addEventListener('click', () => {
@@ -4663,7 +4444,6 @@
 				});
 			}
 
-			// Conversation items
 			this.element
 				.querySelectorAll('.messenger-conversation-item')
 				.forEach((item) => {
@@ -4673,14 +4453,12 @@
 						this.state.markAsRead(convId);
 						this.state.setView('chat');
 
-						// Notify widget to fetch messages
 						if (this.options.onSelectConversation) {
 							this.options.onSelectConversation(convId);
 						}
 					});
 				});
 
-			// New message button
 			const newMsgBtn = this.element.querySelector('.messenger-new-message-btn');
 			if (newMsgBtn) {
 				newMsgBtn.addEventListener('click', () => {
@@ -4690,11 +4468,9 @@
 		}
 
 		_startNewConversation() {
-			// Set view to chat with no active conversation (new conversation mode)
 			this.state.setActiveConversation(null);
 			this.state.setView('chat');
 
-			// Notify widget to handle new conversation flow
 			if (this.options.onStartNewConversation) {
 				this.options.onStartNewConversation();
 			}
@@ -4710,9 +4486,6 @@
 		}
 	}
 
-	/**
-	 * HelpView - Help collections browse with Intercom-style design
-	 */
 	class HelpView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -4727,7 +4500,6 @@
 
 			this._updateContent();
 
-			// Subscribe to state changes
 			this._unsubscribe = this.state.subscribe((type) => {
 				if (type === 'helpArticlesUpdate' || type === 'helpSearchChange') {
 					this._updateCollectionsList();
@@ -4746,7 +4518,9 @@
 			<div class="messenger-help-header">
 				<h2>Help</h2>
 				<button class="messenger-close-btn" aria-label="Close">
-					<i class="ph ph-x" style="font-size: 20px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+					</svg>
 				</button>
 			</div>
 
@@ -4758,7 +4532,9 @@
 						placeholder="Search for help"
 						value="${searchQuery}"
 					/>
-					<i class="ph ph-magnifying-glass messenger-help-search-icon" style="font-size: 18px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256" class="messenger-help-search-icon">
+						<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
+					</svg>
 				</div>
 			</div>
 
@@ -4781,7 +4557,6 @@
 			const collections = this.state.helpArticles || [];
 			const searchQuery = (this.state.helpSearchQuery || '').toLowerCase();
 
-			// Filter collections by search
 			const filteredCollections = searchQuery
 				? collections.filter(
 						(c) =>
@@ -4790,7 +4565,6 @@
 					)
 				: collections;
 
-			// Update collection count
 			const headerEl = this.element.querySelector(
 				'.messenger-help-collections-header'
 			);
@@ -4807,7 +4581,6 @@
 				.map((collection) => this._renderCollectionItem(collection))
 				.join('');
 
-			// Attach click events
 			this._attachCollectionEvents();
 		}
 
@@ -4820,7 +4593,9 @@
 					<p class="messenger-help-collection-desc">${collection.description || ''}</p>
 					<span class="messenger-help-collection-count">${articleCount} articles</span>
 				</div>
-				<i class="ph ph-caret-right messenger-help-collection-arrow" style="font-size: 20px;"></i>
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256" class="messenger-help-collection-arrow">
+					<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
+				</svg>
 			</div>
 		`;
 		}
@@ -4832,7 +4607,9 @@
 				return `
 				<div class="messenger-help-empty">
 					<div class="messenger-help-empty-icon">
-						<i class="ph ph-magnifying-glass" style="font-size: 48px;"></i>
+						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+							<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
+						</svg>
 					</div>
 					<h3>No results found</h3>
 					<p>Try a different search term</p>
@@ -4843,7 +4620,9 @@
 			return `
 			<div class="messenger-help-empty">
 				<div class="messenger-help-empty-icon">
-					<i class="ph ph-question" style="font-size: 48px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#000000" viewBox="0 0 256 256">
+						<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
+					</svg>
 				</div>
 				<h3>Help collections</h3>
 				<p>No collections available yet</p>
@@ -4852,14 +4631,12 @@
 		}
 
 		_attachEvents() {
-			// Close button
 			this.element
 				.querySelector('.messenger-close-btn')
 				.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
 
-			// Search input
 			const searchInput = this.element.querySelector(
 				'.messenger-help-search-input'
 			);
@@ -4902,9 +4679,6 @@
 		}
 	}
 
-	/**
-	 * HomeView - Welcome screen with team info and quick actions
-	 */
 	class HomeView {
 		constructor(state, options = {}) {
 			this.state = state;
@@ -4919,7 +4693,6 @@
 
 			this._updateContent();
 
-			// Subscribe to state changes to re-render when data loads
 			this._unsubscribe = this.state.subscribe((type) => {
 				if (
 					type === 'homeChangelogUpdate' ||
@@ -4945,7 +4718,9 @@
 					</div>
 					<div class="messenger-home-avatars">${avatarsHtml}</div>
 					<button class="messenger-close-btn" aria-label="Close">
-						<i class="ph ph-x" style="font-size: 20px;"></i>
+						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+							<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+						</svg>
 					</button>
 				</div>
 				<div class="messenger-home-welcome">
@@ -4958,7 +4733,9 @@
 			<div class="messenger-home-body">
 				<button class="messenger-home-message-btn">
 					<span>Send us a message</span>
-					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
+						<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
+					</svg>
 				</button>
 
 				${this._renderFeaturedCard()}
@@ -4973,7 +4750,6 @@
 		_renderAvatarStack() {
 			const avatars = this.state.teamAvatars;
 			if (!avatars || avatars.length === 0) {
-				// Default avatars with initials
 				return `
 				<div class="messenger-avatar-stack">
 					<div class="messenger-avatar" style="background: #5856d6;">S</div>
@@ -5023,7 +4799,6 @@
 		}
 
 		_renderFeaturedCard() {
-			// Only show if there's featured content configured
 			if (!this.options.featuredContent) {
 				return '';
 			}
@@ -5044,7 +4819,6 @@
 		}
 
 		_renderRecentChangelog() {
-			// Show recent changelog preview as cards with images
 			const changelogItems = this.state.homeChangelogItems;
 			if (changelogItems.length === 0) {
 				return '';
@@ -5093,31 +4867,26 @@
 		}
 
 		_attachEvents() {
-			// Close button
 			this.element
 				.querySelector('.messenger-close-btn')
 				.addEventListener('click', () => {
 					this.state.setOpen(false);
 				});
 
-			// Send message button
 			this.element
 				.querySelector('.messenger-home-message-btn')
 				.addEventListener('click', () => {
 					this.state.setView('messages');
 				});
 
-			// Changelog items
 			this.element
 				.querySelectorAll('.messenger-home-changelog-item')
 				.forEach((item) => {
 					item.addEventListener('click', () => {
-						// Navigate to changelog view with specific item selected
 						this.state.setView('changelog');
 					});
 				});
 
-			// See all changelog
 			const seeAllBtn = this.element.querySelector(
 				'.messenger-home-changelog-all'
 			);
@@ -5127,7 +4896,6 @@
 				});
 			}
 
-			// Featured card action
 			const featuredBtn = this.element.querySelector(
 				'.messenger-home-featured-btn'
 			);
@@ -5170,7 +4938,7 @@
 				welcomeMessage: options.welcomeMessage || 'How can we help?',
 				enableHelp: options.enableHelp !== false,
 				enableChangelog: options.enableChangelog !== false,
-				logoUrl: options.logoUrl || 'https://feedback-sdk.product7.io/p7.png',
+				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				featuredContent: options.featuredContent || null,
 				primaryColor: options.primaryColor || '#1c1c1e',
 				// Callbacks
@@ -5735,7 +5503,6 @@
 		}
 
 		async _fetchChangelog() {
-			// Mock data for now - simulating changelog API response
 			if (this.apiService?.mock) {
 				return {
 					homeItems: [
@@ -6653,7 +6420,6 @@
 			try {
 				const initData = await this.apiService.init(this.config.userContext);
 
-				// Merge backend config as base, local config overrides
 				if (initData.config) {
 					this.config = deepMerge(initData.config, this.config);
 				}
@@ -6706,13 +6472,6 @@
 			return this.widgets.get(id);
 		}
 
-		/**
-		 * Fetch active surveys from the backend
-		 * @param {Object} context - Optional context for targeting
-		 * @param {string} context.page - Current page/route
-		 * @param {string} context.event - Event trigger name
-		 * @returns {Promise<Array>} Array of active survey configurations
-		 */
 		async getActiveSurveys(context = {}) {
 			if (!this.initialized) {
 				throw new SDKError(
@@ -6732,17 +6491,6 @@
 			}
 		}
 
-		/**
-		 * Show a survey by its backend ID
-		 * Fetches survey configuration from the backend and displays it
-		 * @param {string} surveyId - The backend survey ID
-		 * @param {Object} options - Additional display options
-		 * @param {string} options.position - Position override
-		 * @param {string} options.theme - Theme override
-		 * @param {Function} options.onSubmit - Callback when survey is submitted
-		 * @param {Function} options.onDismiss - Callback when survey is dismissed
-		 * @returns {Promise<SurveyWidget>} The survey widget instance
-		 */
 		async showSurveyById(surveyId, options = {}) {
 			if (!this.initialized) {
 				throw new SDKError(
@@ -6750,7 +6498,6 @@
 				);
 			}
 
-			// Fetch active surveys to find the one with matching ID
 			const surveys = await this.getActiveSurveys();
 			const surveyConfig = surveys.find((s) => s.id === surveyId);
 
@@ -6772,22 +6519,6 @@
 			});
 		}
 
-		/**
-		 * Show a survey widget (local/manual mode)
-		 * For backend-driven surveys, use showSurveyById() instead
-		 * @param {Object} options - Survey options
-		 * @param {string} options.surveyId - Backend survey ID (for API tracking)
-		 * @param {string} options.surveyType - Type of survey: 'nps', 'csat', 'ces', 'custom'
-		 * @param {string} options.position - Position: 'bottom-right', 'bottom-left', 'center', 'bottom'
-		 * @param {string} options.theme - Theme: 'light', 'dark'
-		 * @param {string} options.title - Custom title
-		 * @param {string} options.description - Custom description
-		 * @param {string} options.lowLabel - Low end label
-		 * @param {string} options.highLabel - High end label
-		 * @param {Function} options.onSubmit - Callback when survey is submitted
-		 * @param {Function} options.onDismiss - Callback when survey is dismissed
-		 * @returns {SurveyWidget} The survey widget instance
-		 */
 		showSurvey(options = {}) {
 			if (!this.initialized) {
 				throw new SDKError(
@@ -6815,20 +6546,6 @@
 			return surveyWidget;
 		}
 
-		/**
-		 * Show a changelog widget with sidebar
-		 * @param {Object} options - Changelog widget options
-		 * @param {string} options.position - Position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
-		 * @param {string} options.theme - Theme: 'light', 'dark'
-		 * @param {string} options.title - Sidebar title
-		 * @param {string} options.triggerText - Text on the trigger button
-		 * @param {boolean} options.showBadge - Show notification badge
-		 * @param {string} options.viewButtonText - Text for the view update button
-		 * @param {string} options.changelogBaseUrl - Base URL for changelog links
-		 * @param {boolean} options.openInNewTab - Open changelog links in new tab (default: true)
-		 * @param {Function} options.onViewUpdate - Callback when user clicks view update
-		 * @returns {ChangelogWidget} The changelog widget instance
-		 */
 		showChangelog(options = {}) {
 			if (!this.initialized) {
 				throw new SDKError(
@@ -6854,13 +6571,6 @@
 			return changelogWidget;
 		}
 
-		/**
-		 * Get changelogs from the backend
-		 * @param {Object} options - Optional query parameters
-		 * @param {number} options.limit - Number of changelogs to fetch
-		 * @param {number} options.offset - Offset for pagination
-		 * @returns {Promise<Array>} Array of changelog entries
-		 */
 		async getChangelogs(options = {}) {
 			if (!this.initialized) {
 				throw new SDKError(
@@ -6968,17 +6678,10 @@
 			this.eventBus.emit('sdk:destroyed');
 		}
 
-		/**
-		 * Check if feedback was recently submitted for this workspace
-		 * Uses backend tracking (preferred) with localStorage as fallback
-		 * @param {number} cooldownDays - Days to consider as "recently" (default: 30)
-		 * @returns {boolean} true if feedback was submitted within the cooldown period
-		 */
 		hasFeedbackBeenSubmitted(cooldownDays = 30) {
 			const cooldownMs = cooldownDays * 24 * 60 * 60 * 1000;
 			const now = Date.now();
 
-			// Check backend tracking first (from init response)
 			if (this.config.last_feedback_at) {
 				try {
 					const backendTimestamp = new Date(
@@ -6992,7 +6695,6 @@
 				}
 			}
 
-			// Fallback to localStorage
 			try {
 				const storageKey = `feedback_submitted_${this.config.workspace}`;
 				const stored = localStorage.getItem(storageKey);
@@ -7005,9 +6707,6 @@
 			}
 		}
 
-		/**
-		 * Clear the feedback submission tracking (allow showing widgets again)
-		 */
 		clearFeedbackSubmissionTracking() {
 			try {
 				const storageKey = `feedback_submitted_${this.config.workspace}`;
@@ -8893,7 +8592,7 @@
 }
 `;
 
-	const CSS_STYLES = `
+	const baseStyles = `
 .feedback-widget {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
   font-size: 14px;
@@ -8908,32 +8607,94 @@
   box-sizing: border-box;
 }
 
-.feedback-widget-button {
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes confettiFall {
+  0% {
+    opacity: 1;
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100vh) rotate(720deg) scale(0.5);
+  }
+}
+
+@keyframes changelogSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* Print */
+@media print {
+  .feedback-widget,
+  .feedback-panel,
+  .feedback-panel-backdrop,
+  .feedback-success-notification,
+  .changelog-widget,
+  .changelog-modal,
+  .changelog-modal-backdrop,
+  .changelog-list-modal,
+  .changelog-list-modal-backdrop {
+    display: none !important;
+  }
+}
+`;
+
+	const changelogStyles = `
+.changelog-widget {
   position: fixed;
   z-index: 999999;
 }
 
-.feedback-widget-button.position-bottom-right {
+.changelog-widget.position-bottom-right {
   bottom: 20px;
   right: 20px;
 }
 
-.feedback-widget-button.position-bottom-left {
+.changelog-widget.position-bottom-left {
   bottom: 20px;
   left: 20px;
 }
 
-.feedback-widget-button.position-top-right {
+.changelog-widget.position-top-right {
   top: 20px;
   right: 20px;
 }
 
-.feedback-widget-button.position-top-left {
+.changelog-widget.position-top-left {
   top: 20px;
   left: 20px;
 }
 
-.feedback-trigger-btn {
+.changelog-trigger-btn {
   position: relative;
   display: flex;
   align-items: center;
@@ -8955,1326 +8716,1234 @@
   width: fit-content;
 }
 
-.feedback-trigger-btn:hover:not(:disabled) {
+.changelog-trigger-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
-.feedback-trigger-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.feedback-trigger-btn:focus-visible {
+.changelog-trigger-btn:focus-visible {
   outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
-.feedback-icon {
+.changelog-icon {
   flex-shrink: 0;
 }
 
-.feedback-minimize-icon,
-.feedback-expand-icon {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  width: 24px;
-  height: 24px;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  border-radius: 50%;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.changelog-confetti-emoji {
+  font-size: 14px;
+  margin-left: 2px;
 }
 
-.feedback-minimize-icon svg,
-.feedback-expand-icon svg {
-  width: 16px;
-  height: 16px;
-  display: block;
-  fill: #155EEF;
-}
-
-/* Show minimize icon on hover when expanded */
-.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
-  opacity: 1;
-}
-
-/* Minimized state - just icon */
-.feedback-widget-button.minimized .feedback-trigger-btn {
-  padding: 12px;
-  width: 48px;
-  height: 48px;
-  justify-content: center;
-}
-
-.feedback-widget-button.minimized .feedback-text {
-  display: none;
-}
-
-.feedback-widget-button.minimized .feedback-minimize-icon {
-  display: none;
-}
-
-/* Show expand icon on hover when minimized */
-.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
-  opacity: 1;
+.changelog-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 12px;
+  height: 12px;
+  background: #EF4444;
+  border-radius: 50%;
+  border: 2px solid white;
 }
 
-/* Side Panel Styles */
-.feedback-panel {
+.changelog-confetti-container {
   position: fixed;
-  bottom: 80px;
-  right: 24px;
-  width: 420px;
-  max-height: 500px;
-  z-index: 1000000;
-  transform: translateX(calc(100% + 24px));
-  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  font-family: inherit;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1000001;
+  overflow: hidden;
 }
 
-.feedback-panel.open {
-  transform: translateX(0);
+.changelog-confetti {
+  position: absolute;
+  top: -20px;
+  opacity: 0;
+  animation: confettiFall 2s ease-out forwards;
 }
 
-.feedback-panel-backdrop {
+.changelog-modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
-  z-index: 999999;
+  z-index: 999998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.feedback-panel-backdrop.show {
+.changelog-modal-backdrop.show {
   opacity: 1;
   pointer-events: auto;
 }
 
-.feedback-panel-content {
-  background: white;
-  height: 100%;
+.changelog-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999;
   display: flex;
-  flex-direction: column;
-  border-radius: 16px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
-              0 10px 10px -5px rgba(0, 0, 0, 0.04),
-              0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-
-.feedback-panel.theme-dark .feedback-panel-content {
-  background: #1F2937;
-  color: white;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  pointer-events: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
 }
 
-.feedback-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px;
-  border-bottom: 1px solid #E5E7EB;
-  flex-shrink: 0;
+.changelog-modal.open {
+  pointer-events: auto;
 }
 
-.feedback-panel.theme-dark .feedback-panel-header {
-  border-bottom-color: #374151;
+.changelog-modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 580px;
+  max-height: 90vh;
+  background: #DBEAFE;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.feedback-panel-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #111827;
+.changelog-modal.open .changelog-modal-container {
+  transform: scale(1) translateY(0);
+  opacity: 1;
 }
 
-.feedback-panel.theme-dark .feedback-panel-header h3 {
-  color: white;
+.changelog-modal.theme-dark .changelog-modal-container {
+  background: #1E3A5F;
 }
 
-.feedback-panel-close {
-  background: none;
+.changelog-modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.9);
   border: none;
   font-size: 24px;
   cursor: pointer;
   color: #6B7280;
-  padding: 4px;
-  width: 32px;
-  height: 32px;
+  padding: 0;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  border-radius: 50%;
   transition: all 0.2s ease;
+  line-height: 1;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.feedback-panel-close:hover {
-  background: #F3F4F6;
+.changelog-modal-close:hover {
+  background: white;
   color: #111827;
+  transform: scale(1.05);
 }
 
-.feedback-panel-close:focus-visible {
-  outline: 2px solid #155EEF;
-  outline-offset: 2px;
-}
-
-.feedback-panel.theme-dark .feedback-panel-close {
-  color: #9CA3AF;
+.changelog-modal.theme-dark .changelog-modal-close {
+  background: rgba(55, 65, 81, 0.9);
+  color: #D1D5DB;
 }
 
-.feedback-panel.theme-dark .feedback-panel-close:hover {
+.changelog-modal.theme-dark .changelog-modal-close:hover {
   background: #374151;
   color: white;
 }
 
-.feedback-panel-body {
-  flex: 1;
+.changelog-modal-content {
   overflow-y: auto;
-  padding: 24px;
+  max-height: 90vh;
 }
 
-.feedback-form {
+.changelog-loading {
   display: flex;
-  flex-direction: column;
-  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
 }
 
-.feedback-form-group {
+.changelog-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #E5E7EB;
+  border-top-color: #155EEF;
+  border-radius: 50%;
+  animation: changelogSpin 0.8s linear infinite;
+}
+
+.changelog-empty {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-bottom: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
+  text-align: center;
+  color: #9CA3AF;
 }
 
-.feedback-form-group:last-child {
-  margin-bottom: 0;
+.changelog-empty svg {
+  margin-bottom: 16px;
+  stroke: #D1D5DB;
 }
 
-.feedback-form-group label {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.25;
-  color: #374151;
+.changelog-empty p {
+  margin: 0;
+  font-size: 15px;
 }
 
-.feedback-panel.theme-dark .feedback-form-group label {
-  color: #D1D5DB;
+.changelog-popup-item {
+  display: flex;
+  flex-direction: column;
 }
 
-.feedback-form-group input {
-  height: 44px;
+.changelog-popup-image {
   width: 100%;
-  border-radius: 8px;
-  border: 1px solid #D1D5DB;
-  padding: 10px 14px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #1F2937;
-  font-family: inherit;
-  outline: none;
-  transition: all 0.2s ease;
+  padding: 24px 24px 0;
 }
 
-.feedback-form-group input::placeholder {
-  font-size: 15px;
-  color: #9CA3AF;
+.changelog-popup-image img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 2px solid #155EEF;
+  box-shadow: 0 4px 20px rgba(21, 94, 239, 0.2);
 }
 
-.feedback-form-group input:focus {
-  border-color: #155EEF;
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+.changelog-popup-body {
+  padding: 24px 32px 32px;
+  text-align: center;
 }
 
-.feedback-form-group input:focus-visible {
-  outline: none;
+.changelog-popup-title {
+  margin: 0 0 16px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #111827;
 }
 
-.feedback-form-group textarea {
-  min-height: 200px;
-  width: 100%;
-  resize: vertical;
-  border-radius: 8px;
-  border: 1px solid #D1D5DB;
-  padding: 10px 14px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #1F2937;
-  font-family: inherit;
-  outline: none;
-  transition: all 0.2s ease;
-}
-
-.feedback-form-group textarea::placeholder {
-  font-size: 15px;
-  color: #9CA3AF;
-}
-
-.feedback-form-group textarea:focus {
-  border-color: #155EEF;
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-}
-
-.feedback-form-group textarea:focus-visible {
-  outline: none;
+.changelog-modal.theme-dark .changelog-popup-title {
+  color: white;
 }
 
-.feedback-panel.theme-dark .feedback-form-group input,
-.feedback-panel.theme-dark .feedback-form-group textarea {
-  background: #374151;
-  border-color: #4B5563;
-  color: white;
+.changelog-popup-description {
+  margin: 0 0 24px;
+  font-size: 17px;
+  line-height: 1.6;
+  color: #4B5563;
 }
 
-.feedback-panel.theme-dark .feedback-form-group input::placeholder,
-.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {
-  color: #6B7280;
+.changelog-modal.theme-dark .changelog-popup-description {
+  color: #D1D5DB;
 }
 
-.feedback-btn {
-  position: relative;
+.changelog-popup-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
-  border-radius: 8px;
+  padding: 14px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  background: #155EEF;
   border: none;
-  height: 44px;
-  padding: 10px 18px;
-  font-size: 15px;
-  font-weight: 500;
-  font-family: inherit;
+  border-radius: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
-.feedback-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+.changelog-popup-btn:hover {
+  background: #1249CA;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.3);
 }
 
-.feedback-btn:focus-visible {
+.changelog-popup-btn:focus-visible {
   outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
-.feedback-btn-submit {
-  background: #155EEF;
-  color: white;
-  width: 100%;
+.changelog-popup-footer {
+  padding: 0 32px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
 }
 
-.feedback-btn-submit:hover:not(:disabled) {
-  background: #4338ca;
+.changelog-popup-dots {
+  display: flex;
+  gap: 8px;
 }
 
-.feedback-btn-submit:active:not(:disabled) {
-  background: #3730a3;
+.changelog-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(21, 94, 239, 0.3);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.feedback-btn-cancel {
-  background: transparent;
-  color: #6B7280;
-  border: 1px solid #D1D5DB;
+.changelog-dot:hover {
+  background: rgba(21, 94, 239, 0.5);
 }
 
-.feedback-btn-cancel:hover:not(:disabled) {
-  background: #F9FAFB;
-  border-color: #9CA3AF;
-  color: #374151;
+.changelog-dot.active {
+  background: #155EEF;
+  transform: scale(1.2);
 }
 
-.feedback-panel.theme-dark .feedback-btn-cancel {
-  color: #D1D5DB;
-  border-color: #4B5563;
+.changelog-view-all-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: #155EEF;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
 }
 
-.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
-  background: #374151;
+.changelog-view-all-btn:hover {
+  background: rgba(21, 94, 239, 0.1);
 }
 
-.feedback-form-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: auto;
-  padding-top: 24px;
+.changelog-view-all-btn svg {
+  transition: transform 0.2s ease;
 }
 
-.feedback-error {
-  color: #DC2626;
-  font-size: 14px;
-  font-weight: 400;
-  margin-top: 8px;
-  padding: 12px;
-  background: #FEE2E2;
-  border: 1px solid #FECACA;
-  border-radius: 8px;
-  display: none;
+.changelog-view-all-btn:hover svg {
+  transform: translateX(3px);
 }
 
-.feedback-error.show {
-  display: block;
+.changelog-modal.theme-dark .changelog-view-all-btn {
+  color: #60A5FA;
 }
 
-.feedback-panel.theme-dark .feedback-error {
-  background: #7F1D1D;
-  border-color: #991B1B;
-  color: #FCA5A5;
+.changelog-modal.theme-dark .changelog-view-all-btn:hover {
+  background: rgba(96, 165, 250, 0.1);
 }
 
-.feedback-success-notification {
+.changelog-list-modal-backdrop {
   position: fixed;
-  top: 24px;
-  right: 24px;
-  z-index: 1000002;
-  background: white;
-  border: 1px solid #D1FAE5;
-  border-radius: 12px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  min-width: 320px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 999998;
 }
 
-.feedback-success-content {
-  display: flex;
-  align-items: center;
-  padding: 16px 20px;
-  gap: 12px;
+.changelog-list-modal-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-.feedback-success-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #10B981;
-  color: white;
+.changelog-list-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
+  padding: 20px;
+  pointer-events: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
 }
 
-.feedback-success-content span {
-  color: #065F46;
-  font-weight: 500;
-  font-size: 14px;
-  flex: 1;
+.changelog-list-modal.open {
+  pointer-events: auto;
 }
 
-.feedback-success-close {
-  background: none;
-  border: none;
-  color: #6B7280;
-  cursor: pointer;
-  font-size: 20px;
-  padding: 0;
-  width: 24px;
-  height: 24px;
+.changelog-list-modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 460px;
+  max-height: 85vh;
+  background: white;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  border-radius: 4px;
-  flex-shrink: 0;
+  flex-direction: column;
 }
 
-.feedback-success-close:hover {
-  background: #F3F4F6;
-  color: #374151;
+.changelog-list-modal.open .changelog-list-modal-container {
+  transform: scale(1) translateY(0);
+  opacity: 1;
 }
 
-.feedback-success-close:focus-visible {
-  outline: 2px solid #155EEF;
-  outline-offset: 2px;
+.changelog-list-modal.theme-dark .changelog-list-modal-container {
+  background: #1F2937;
+  color: white;
 }
 
-@keyframes slideInRight {
-  from {
-    transform: translateX(400px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+.changelog-list-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid #E5E7EB;
+  flex-shrink: 0;
+  background: white;
 }
 
-.feedback-panel-backdrop {
-  animation: fadeIn 0.3s ease;
+.changelog-list-modal.theme-dark .changelog-list-modal-header {
+  border-bottom-color: #374151;
+  background: #1F2937;
 }
 
-@media (max-width: 768px) {
-  .feedback-panel {
-    width: 100%;
-    top: auto;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    height: 85vh;
-    max-height: 85vh;
-    transform: translateY(100%);
-    border-radius: 20px 20px 0 0;
-  }
-  
-  .feedback-panel.open {
-    transform: translateY(0);
-  }
-  
-  .feedback-panel-content {
-    border-radius: 20px 20px 0 0;
-  }
-  
-  .feedback-panel-header {
-    padding: 20px;
-    position: relative;
-  }
-  
-  .feedback-panel-header::before {
-    content: '';
-    position: absolute;
-    top: 8px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 40px;
-    height: 4px;
-    background: #D1D5DB;
-    border-radius: 2px;
-  }
-  
-  .feedback-panel.theme-dark .feedback-panel-header::before {
-    background: #4B5563;
-  }
-  
-  .feedback-panel-body {
-    padding: 20px;
-  }
-  
-  .feedback-form-group textarea {
-    min-height: 150px;
-  }
-  
-  .feedback-widget-button {
-    bottom: 16px;
-    right: 16px;
-  }
-  
-  .feedback-widget-button.position-bottom-left {
-    left: 16px;
-  }
-  
-  .feedback-success-notification {
-    top: 16px;
-    right: 16px;
-    left: 16px;
-    min-width: auto;
-  }
-  
-  .feedback-minimize-icon,
-  .feedback-expand-icon {
-    top: -4px;
-    right: -4px;
-    width: 20px;
-    height: 20px;
-  }
-  
-  .feedback-minimize-icon svg,
-  .feedback-expand-icon svg {
-    width: 14px;
-    height: 14px;
-  }
+.changelog-list-modal-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .feedback-trigger-btn,
-  .feedback-btn,
-  .feedback-panel,
-  .feedback-panel-backdrop,
-  .feedback-success-notification,
-  .feedback-minimize-icon,
-  .feedback-expand-icon {
-    transition: none;
-    animation: none;
-  }
+.changelog-list-modal.theme-dark .changelog-list-modal-header h2 {
+  color: white;
 }
 
-@media print {
-  .feedback-widget,
-  .feedback-panel,
-  .feedback-panel-backdrop,
-  .feedback-success-notification {
-    display: none !important;
-  }
+.changelog-list-modal-close {
+  background: none;
+  border: none;
+  font-size: 22px;
+  cursor: pointer;
+  color: #6B7280;
+  padding: 4px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  line-height: 1;
 }
 
-/* Changelog Widget Styles */
-.changelog-widget {
-  position: fixed;
-  z-index: 999999;
+.changelog-list-modal-close:hover {
+  background: #F3F4F6;
+  color: #111827;
 }
 
-.changelog-widget.position-bottom-right {
-  bottom: 20px;
-  right: 20px;
+.changelog-list-modal.theme-dark .changelog-list-modal-close {
+  color: #9CA3AF;
 }
 
-.changelog-widget.position-bottom-left {
-  bottom: 20px;
-  left: 20px;
+.changelog-list-modal.theme-dark .changelog-list-modal-close:hover {
+  background: #374151;
+  color: white;
 }
 
-.changelog-widget.position-top-right {
-  top: 20px;
-  right: 20px;
+.changelog-list-modal-body {
+  flex: 1;
+  overflow-y: auto;
 }
 
-.changelog-widget.position-top-left {
-  top: 20px;
-  left: 20px;
+.changelog-list {
+  display: flex;
+  flex-direction: column;
 }
 
-.changelog-trigger-btn {
-  position: relative;
+.changelog-list-item {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 48px;
-  overflow: visible;
-  border-radius: 9999px;
-  border: none;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
+  padding: 12px 16px;
+  border-bottom: 1px solid #E5E7EB;
   cursor: pointer;
-  transition: all 0.3s ease;
-  color: white;
-  background: #155EEF;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: fit-content;
-}
-
-.changelog-trigger-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  transition: background-color 0.2s ease;
+  position: relative;
 }
 
-.changelog-trigger-btn:focus-visible {
-  outline: 2px solid #155EEF;
-  outline-offset: 2px;
+.changelog-list-item:hover {
+  background: #F9FAFB;
 }
 
-.changelog-icon {
-  flex-shrink: 0;
+.changelog-list-item:last-child {
+  border-bottom: none;
 }
 
-.changelog-confetti-emoji {
-  font-size: 14px;
-  margin-left: 2px;
+.changelog-list-modal.theme-dark .changelog-list-item {
+  border-bottom-color: #374151;
 }
 
-.changelog-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 12px;
-  height: 12px;
-  background: #EF4444;
-  border-radius: 50%;
-  border: 2px solid white;
+.changelog-list-modal.theme-dark .changelog-list-item:hover {
+  background: #374151;
 }
 
-/* Confetti Animation */
-.changelog-confetti-container {
-  position: fixed;
-  top: 0;
-  left: 0;
+.changelog-list-item-image {
   width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1000001;
+  margin-bottom: 8px;
+  border-radius: 6px;
   overflow: hidden;
+  border: 1px solid #E5E7EB;
 }
 
-.changelog-confetti {
-  position: absolute;
-  top: -20px;
-  opacity: 0;
-  animation: confettiFall 2s ease-out forwards;
-}
-
-@keyframes confettiFall {
-  0% {
-    opacity: 1;
-    transform: translateY(0) rotate(0deg) scale(1);
-  }
-  10% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(100vh) rotate(720deg) scale(0.5);
-  }
-}
-
-/* Changelog Modal */
-.changelog-modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-  z-index: 999998;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.changelog-list-item-image img {
+  width: 100%;
+  height: 100px;
+  display: block;
+  object-fit: cover;
 }
 
-.changelog-modal-backdrop.show {
-  opacity: 1;
-  pointer-events: auto;
+.changelog-list-item-main {
+  flex: 1;
+  min-width: 0;
 }
 
-.changelog-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999999;
+.changelog-list-item-content {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  pointer-events: none;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
-}
-
-.changelog-modal.open {
-  pointer-events: auto;
-}
-
-.changelog-modal-container {
-  position: relative;
-  width: 100%;
-  max-width: 580px;
-  max-height: 90vh;
-  background: #DBEAFE;
-  border-radius: 24px;
-  overflow: hidden;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  transform: scale(0.9) translateY(20px);
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-direction: column;
+  gap: 3px;
 }
 
-.changelog-modal.open .changelog-modal-container {
-  transform: scale(1) translateY(0);
-  opacity: 1;
+.changelog-list-item-date {
+  font-size: 11px;
+  color: #6B7280;
+  font-weight: 500;
 }
 
-.changelog-modal.theme-dark .changelog-modal-container {
-  background: #1E3A5F;
+.changelog-list-modal.theme-dark .changelog-list-item-date {
+  color: #9CA3AF;
 }
 
-.changelog-modal-close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #6B7280;
-  padding: 0;
-  width: 36px;
-  height: 36px;
+.changelog-list-item-labels {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  line-height: 1;
-  z-index: 10;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 1px;
 }
 
-.changelog-modal-close:hover {
-  background: white;
+.changelog-list-item-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
   color: #111827;
-  transform: scale(1.05);
 }
 
-.changelog-modal.theme-dark .changelog-modal-close {
-  background: rgba(55, 65, 81, 0.9);
-  color: #D1D5DB;
-}
-
-.changelog-modal.theme-dark .changelog-modal-close:hover {
-  background: #374151;
+.changelog-list-modal.theme-dark .changelog-list-item-title {
   color: white;
 }
 
-.changelog-modal-content {
-  overflow-y: auto;
-  max-height: 90vh;
-}
-
-/* Changelog Loading */
-.changelog-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 20px;
-}
-
-.changelog-loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #E5E7EB;
-  border-top-color: #155EEF;
-  border-radius: 50%;
-  animation: changelogSpin 0.8s linear infinite;
-}
-
-@keyframes changelogSpin {
-  to {
-    transform: rotate(360deg);
-  }
+.changelog-list-item-description {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #6B7280;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-/* Changelog Empty State */
-.changelog-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 20px;
-  text-align: center;
+.changelog-list-modal.theme-dark .changelog-list-item-description {
   color: #9CA3AF;
 }
 
-.changelog-empty svg {
-  margin-bottom: 16px;
-  stroke: #D1D5DB;
+.changelog-list-item-arrow {
+  flex-shrink: 0;
+  margin-left: 12px;
+  color: #9CA3AF;
+  transition: all 0.2s ease;
 }
 
-.changelog-empty p {
-  margin: 0;
-  font-size: 15px;
+.changelog-list-item:hover .changelog-list-item-arrow {
+  color: #155EEF;
+  transform: translateX(3px);
 }
 
-/* Changelog Popup Item */
-.changelog-popup-item {
-  display: flex;
-  flex-direction: column;
+.changelog-list-modal.theme-dark .changelog-list-item-arrow {
+  color: #6B7280;
 }
 
-.changelog-popup-image {
-  width: 100%;
-  padding: 24px 24px 0;
+.changelog-list-modal.theme-dark .changelog-list-item:hover .changelog-list-item-arrow {
+  color: #60A5FA;
 }
 
-.changelog-popup-image img {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: cover;
-  border-radius: 12px;
-  border: 2px solid #155EEF;
-  box-shadow: 0 4px 20px rgba(21, 94, 239, 0.2);
+/* ==================== MOBILE RESPONSIVE ==================== */
+@media (max-width: 768px) {
+  .changelog-widget {
+    bottom: 16px;
+    right: 16px;
+  }
+
+  .changelog-widget.position-bottom-left {
+    left: 16px;
+  }
+
+  .changelog-modal {
+    padding: 16px;
+  }
+
+  .changelog-modal-container {
+    max-width: 100%;
+    border-radius: 20px;
+  }
+
+  .changelog-popup-image {
+    padding: 20px 20px 0;
+  }
+
+  .changelog-popup-body {
+    padding: 20px 24px 24px;
+  }
+
+  .changelog-popup-title {
+    font-size: 22px;
+  }
+
+  .changelog-popup-description {
+    font-size: 15px;
+  }
+
+  .changelog-popup-btn {
+    padding: 12px 28px;
+    font-size: 15px;
+    width: 100%;
+  }
+
+  .changelog-popup-footer {
+    padding: 0 24px 20px;
+  }
+
+  .changelog-list-modal {
+    padding: 16px;
+  }
+
+  .changelog-list-modal-container {
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: 16px;
+  }
+
+  .changelog-list-item {
+    padding: 10px 14px;
+  }
+
+  .changelog-list-item-image img {
+    height: 80px;
+  }
+
+  .changelog-list-item-title {
+    font-size: 13px;
+  }
+
+  .changelog-list-item-description {
+    font-size: 11px;
+  }
 }
+`;
 
-.changelog-popup-body {
-  padding: 24px 32px 32px;
-  text-align: center;
+	const feedbackStyles = `
+.feedback-widget-button {
+  position: fixed;
+  z-index: 999999;
 }
 
-.changelog-popup-title {
-  margin: 0 0 16px;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.3;
-  color: #111827;
+.feedback-widget-button.position-bottom-right {
+  bottom: 20px;
+  right: 20px;
 }
 
-.changelog-modal.theme-dark .changelog-popup-title {
-  color: white;
+.feedback-widget-button.position-bottom-left {
+  bottom: 20px;
+  left: 20px;
 }
 
-.changelog-popup-description {
-  margin: 0 0 24px;
-  font-size: 17px;
-  line-height: 1.6;
-  color: #4B5563;
+.feedback-widget-button.position-top-right {
+  top: 20px;
+  right: 20px;
 }
 
-.changelog-modal.theme-dark .changelog-popup-description {
-  color: #D1D5DB;
+.feedback-widget-button.position-top-left {
+  top: 20px;
+  left: 20px;
 }
 
-.changelog-popup-btn {
-  display: inline-flex;
+.feedback-trigger-btn {
+  position: relative;
+  display: flex;
   align-items: center;
   justify-content: center;
-  padding: 14px 32px;
-  font-size: 16px;
-  font-weight: 600;
-  color: white;
-  background: #155EEF;
+  gap: 8px;
+  height: 48px;
+  overflow: visible;
+  border-radius: 9999px;
   border: none;
-  border-radius: 10px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  color: white;
+  background: #155EEF;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: fit-content;
 }
 
-.changelog-popup-btn:hover {
-  background: #1249CA;
+.feedback-trigger-btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.3);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
-.changelog-popup-btn:focus-visible {
+.feedback-trigger-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.feedback-trigger-btn:focus-visible {
   outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
-/* Popup Footer with Dots and View All */
-.changelog-popup-footer {
-  padding: 0 32px 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
+.feedback-icon {
+  flex-shrink: 0;
 }
 
-.changelog-popup-dots {
+.feedback-minimize-icon,
+.feedback-expand-icon {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
   display: flex;
-  gap: 8px;
-}
-
-.changelog-dot {
-  width: 10px;
-  height: 10px;
+  align-items: center;
+  justify-content: center;
+  background: white;
   border-radius: 50%;
-  background: rgba(21, 94, 239, 0.3);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   cursor: pointer;
-  transition: all 0.2s ease;
 }
 
-.changelog-dot:hover {
-  background: rgba(21, 94, 239, 0.5);
+.feedback-minimize-icon svg,
+.feedback-expand-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: #155EEF;
 }
 
-.changelog-dot.active {
-  background: #155EEF;
-  transform: scale(1.2);
+.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
+  opacity: 1;
 }
 
-.changelog-view-all-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: none;
-  border: none;
-  color: #155EEF;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 8px 12px;
-  border-radius: 6px;
-  transition: all 0.2s ease;
+.feedback-widget-button.minimized .feedback-trigger-btn {
+  padding: 12px;
+  width: 48px;
+  height: 48px;
+  justify-content: center;
 }
 
-.changelog-view-all-btn:hover {
-  background: rgba(21, 94, 239, 0.1);
+.feedback-widget-button.minimized .feedback-text {
+  display: none;
 }
 
-.changelog-view-all-btn svg {
-  transition: transform 0.2s ease;
+.feedback-widget-button.minimized .feedback-minimize-icon {
+  display: none;
 }
 
-.changelog-view-all-btn:hover svg {
-  transform: translateX(3px);
+.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
+  opacity: 1;
 }
 
-.changelog-modal.theme-dark .changelog-view-all-btn {
-  color: #60A5FA;
+.feedback-panel {
+  position: fixed;
+  bottom: 80px;
+  right: 24px;
+  width: 420px;
+  max-height: 500px;
+  z-index: 1000000;
+  transform: translateX(calc(100% + 24px));
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: inherit;
 }
 
-.changelog-modal.theme-dark .changelog-view-all-btn:hover {
-  background: rgba(96, 165, 250, 0.1);
+.feedback-panel.open {
+  transform: translateX(0);
 }
 
-/* ==================== CHANGELOG LIST MODAL ==================== */
-.changelog-list-modal-backdrop {
+.feedback-panel-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.1);
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
-  z-index: 999998;
-}
-
-.changelog-list-modal-backdrop.show {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.changelog-list-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   z-index: 999999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  pointer-events: none;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
+  animation: fadeIn 0.3s ease;
 }
 
-.changelog-list-modal.open {
+.feedback-panel-backdrop.show {
+  opacity: 1;
   pointer-events: auto;
 }
 
-.changelog-list-modal-container {
-  position: relative;
-  width: 100%;
-  max-width: 460px;
-  max-height: 85vh;
+.feedback-panel-content {
   background: white;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  transform: scale(0.9) translateY(20px);
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 100%;
   display: flex;
   flex-direction: column;
+  border-radius: 16px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
+              0 10px 10px -5px rgba(0, 0, 0, 0.04),
+              0 0 0 1px rgba(0, 0, 0, 0.05);
 }
 
-.changelog-list-modal.open .changelog-list-modal-container {
-  transform: scale(1) translateY(0);
-  opacity: 1;
-}
-
-.changelog-list-modal.theme-dark .changelog-list-modal-container {
+.feedback-panel.theme-dark .feedback-panel-content {
   background: #1F2937;
   color: white;
 }
 
-.changelog-list-modal-header {
+.feedback-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 20px;
+  padding: 24px;
   border-bottom: 1px solid #E5E7EB;
   flex-shrink: 0;
-  background: white;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-modal-header {
+.feedback-panel.theme-dark .feedback-panel-header {
   border-bottom-color: #374151;
-  background: #1F2937;
 }
 
-.changelog-list-modal-header h2 {
+.feedback-panel-header h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
   color: #111827;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-modal-header h2 {
+.feedback-panel.theme-dark .feedback-panel-header h3 {
   color: white;
 }
 
-.changelog-list-modal-close {
+.feedback-panel-close {
   background: none;
   border: none;
-  font-size: 22px;
+  font-size: 24px;
   cursor: pointer;
   color: #6B7280;
   padding: 4px;
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   transition: all 0.2s ease;
-  line-height: 1;
 }
 
-.changelog-list-modal-close:hover {
+.feedback-panel-close:hover {
   background: #F3F4F6;
   color: #111827;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-modal-close {
+.feedback-panel-close:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
+
+.feedback-panel.theme-dark .feedback-panel-close {
   color: #9CA3AF;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-modal-close:hover {
+.feedback-panel.theme-dark .feedback-panel-close:hover {
   background: #374151;
   color: white;
 }
 
-.changelog-list-modal-body {
+.feedback-panel-body {
   flex: 1;
   overflow-y: auto;
+  padding: 24px;
 }
 
-/* Changelog List */
-.changelog-list {
+.feedback-form {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
-.changelog-list-item {
+.feedback-form-group {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #E5E7EB;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  position: relative;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
 }
 
-.changelog-list-item:hover {
-  background: #F9FAFB;
+.feedback-form-group:last-child {
+  margin-bottom: 0;
 }
 
-.changelog-list-item:last-child {
-  border-bottom: none;
+.feedback-form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #374151;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item {
-  border-bottom-color: #374151;
+.feedback-panel.theme-dark .feedback-form-group label {
+  color: #D1D5DB;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item:hover {
-  background: #374151;
+.feedback-form-group input {
+  height: 44px;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid #D1D5DB;
+  padding: 10px 14px;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #1F2937;
+  font-family: inherit;
+  outline: none;
+  transition: all 0.2s ease;
 }
 
-.changelog-list-item-image {
+.feedback-form-group input::placeholder {
+  font-size: 15px;
+  color: #9CA3AF;
+}
+
+.feedback-form-group input:focus {
+  border-color: #155EEF;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.feedback-form-group input:focus-visible {
+  outline: none;
+}
+
+.feedback-form-group textarea {
+  min-height: 200px;
   width: 100%;
-  margin-bottom: 8px;
-  border-radius: 6px;
+  resize: vertical;
+  border-radius: 8px;
+  border: 1px solid #D1D5DB;
+  padding: 10px 14px;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #1F2937;
+  font-family: inherit;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.feedback-form-group textarea::placeholder {
+  font-size: 15px;
+  color: #9CA3AF;
+}
+
+.feedback-form-group textarea:focus {
+  border-color: #155EEF;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.feedback-form-group textarea:focus-visible {
+  outline: none;
+}
+
+.feedback-panel.theme-dark .feedback-form-group input,
+.feedback-panel.theme-dark .feedback-form-group textarea {
+  background: #374151;
+  border-color: #4B5563;
+  color: white;
+}
+
+.feedback-panel.theme-dark .feedback-form-group input::placeholder,
+.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {
+  color: #6B7280;
+}
+
+.feedback-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
-  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  border: none;
+  height: 44px;
+  padding: 10px 18px;
+  font-size: 15px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.changelog-list-item-image img {
+.feedback-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.feedback-btn:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
+
+.feedback-btn-submit {
+  background: #155EEF;
+  color: white;
   width: 100%;
-  height: 100px;
-  display: block;
-  object-fit: cover;
 }
 
-.changelog-list-item-main {
-  flex: 1;
-  min-width: 0;
+.feedback-btn-submit:hover:not(:disabled) {
+  background: #4338ca;
+}
+
+.feedback-btn-submit:active:not(:disabled) {
+  background: #3730a3;
 }
 
-.changelog-list-item-content {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
+.feedback-btn-cancel {
+  background: transparent;
+  color: #6B7280;
+  border: 1px solid #D1D5DB;
 }
 
-.changelog-list-item-date {
-  font-size: 11px;
-  color: #6B7280;
-  font-weight: 500;
+.feedback-btn-cancel:hover:not(:disabled) {
+  background: #F9FAFB;
+  border-color: #9CA3AF;
+  color: #374151;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item-date {
-  color: #9CA3AF;
+.feedback-panel.theme-dark .feedback-btn-cancel {
+  color: #D1D5DB;
+  border-color: #4B5563;
 }
 
-.changelog-list-item-labels {
+.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
+  background: #374151;
+}
+
+.feedback-form-actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 1px;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 24px;
 }
 
-.changelog-list-item-title {
-  margin: 0;
+.feedback-error {
+  color: #DC2626;
   font-size: 14px;
-  font-weight: 600;
-  line-height: 1.3;
-  color: #111827;
+  font-weight: 400;
+  margin-top: 8px;
+  padding: 12px;
+  background: #FEE2E2;
+  border: 1px solid #FECACA;
+  border-radius: 8px;
+  display: none;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item-title {
-  color: white;
+.feedback-error.show {
+  display: block;
 }
 
-.changelog-list-item-description {
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.4;
-  color: #6B7280;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.feedback-panel.theme-dark .feedback-error {
+  background: #7F1D1D;
+  border-color: #991B1B;
+  color: #FCA5A5;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item-description {
-  color: #9CA3AF;
+/* ==================== SUCCESS NOTIFICATION ==================== */
+.feedback-success-notification {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 1000002;
+  background: white;
+  border: 1px solid #D1FAE5;
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 320px;
 }
 
-.changelog-list-item-arrow {
+.feedback-success-content {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  gap: 12px;
+}
+
+.feedback-success-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #10B981;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
   flex-shrink: 0;
-  margin-left: 12px;
-  color: #9CA3AF;
-  transition: all 0.2s ease;
 }
 
-.changelog-list-item:hover .changelog-list-item-arrow {
-  color: #155EEF;
-  transform: translateX(3px);
+.feedback-success-content span {
+  color: #065F46;
+  font-weight: 500;
+  font-size: 14px;
+  flex: 1;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item-arrow {
+.feedback-success-close {
+  background: none;
+  border: none;
   color: #6B7280;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 
-.changelog-list-modal.theme-dark .changelog-list-item:hover .changelog-list-item-arrow {
-  color: #60A5FA;
+.feedback-success-close:hover {
+  background: #F3F4F6;
+  color: #374151;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-  .changelog-modal {
-    padding: 16px;
-  }
-
-  .changelog-modal-container {
-    max-width: 100%;
-    border-radius: 20px;
-  }
+.feedback-success-close:focus-visible {
+  outline: 2px solid #155EEF;
+  outline-offset: 2px;
+}
 
-  .changelog-widget {
+@media (max-width: 768px) {
+  .feedback-widget-button {
     bottom: 16px;
     right: 16px;
   }
-
-  .changelog-widget.position-bottom-left {
+  
+  .feedback-widget-button.position-bottom-left {
     left: 16px;
   }
-
-  .changelog-popup-image {
-    padding: 20px 20px 0;
-  }
-
-  .changelog-popup-body {
-    padding: 20px 24px 24px;
-  }
-
-  .changelog-popup-title {
-    font-size: 22px;
+  
+  .feedback-minimize-icon,
+  .feedback-expand-icon {
+    top: -4px;
+    right: -4px;
+    width: 20px;
+    height: 20px;
   }
-
-  .changelog-popup-description {
-    font-size: 15px;
+  
+  .feedback-minimize-icon svg,
+  .feedback-expand-icon svg {
+    width: 14px;
+    height: 14px;
   }
 
-  .changelog-popup-btn {
-    padding: 12px 28px;
-    font-size: 15px;
+  .feedback-panel {
     width: 100%;
+    top: auto;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: 85vh;
+    max-height: 85vh;
+    transform: translateY(100%);
+    border-radius: 20px 20px 0 0;
   }
-
-  .changelog-popup-footer {
-    padding: 0 24px 20px;
+  
+  .feedback-panel.open {
+    transform: translateY(0);
   }
-
-  /* List modal mobile */
-  .changelog-list-modal {
-    padding: 16px;
+  
+  .feedback-panel-content {
+    border-radius: 20px 20px 0 0;
   }
-
-  .changelog-list-modal-container {
-    max-width: 100%;
-    max-height: 90vh;
-    border-radius: 16px;
+  
+  .feedback-panel-header {
+    padding: 20px;
+    position: relative;
   }
-
-  .changelog-list-item {
-    padding: 10px 14px;
+  
+  .feedback-panel-header::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 4px;
+    background: #D1D5DB;
+    border-radius: 2px;
   }
-
-  .changelog-list-item-image img {
-    height: 80px;
+  
+  .feedback-panel.theme-dark .feedback-panel-header::before {
+    background: #4B5563;
   }
-
-  .changelog-list-item-title {
-    font-size: 13px;
+  
+  .feedback-panel-body {
+    padding: 20px;
   }
-
-  .changelog-list-item-description {
-    font-size: 11px;
+  
+  .feedback-form-group textarea {
+    min-height: 150px;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .changelog-modal,
-  .changelog-modal-container,
-  .changelog-modal-backdrop,
-  .changelog-list-modal,
-  .changelog-list-modal-container,
-  .changelog-list-modal-backdrop,
-  .changelog-trigger-btn,
-  .changelog-popup-btn,
-  .changelog-view-all-btn,
-  .changelog-loading-spinner,
-  .changelog-dot,
-  .changelog-list-item,
-  .changelog-list-item-arrow {
-    transition: none;
-    animation: none;
+  .feedback-success-notification {
+    top: 16px;
+    right: 16px;
+    left: 16px;
+    min-width: auto;
   }
 }
 `;
 
+	const CSS_STYLES = baseStyles + feedbackStyles + changelogStyles;
+
 	function injectStyles() {
 		if (
 			typeof document !== 'undefined' &&