@product7/feedback-sdk 1.6.6 → 1.6.8

package/dist/feedback-sdk.js

@@ -921,15 +921,19 @@
 					body: JSON.stringify(payload),
 					headers: { 'Content-Type': 'application/json' },
 				});
+				const initData = this._extractInitResponseData(response);
 
-				this.sessionToken = response.session_token;
-				this.sessionExpiry = new Date(Date.now() + response.expires_in * 1000);
+				this.sessionToken = initData.sessionToken;
+				this.sessionExpiry = new Date(Date.now() + initData.expiresIn * 1000);
 				this._storeSession();
 
 				return {
 					sessionToken: this.sessionToken,
-					config: response.config || {},
-					expiresIn: response.expires_in,
+					config: initData.config,
+					expiresIn: initData.expiresIn,
+					status: initData.status,
+					message: initData.message,
+					configVersion: initData.configVersion,
 				};
 			} catch (error) {
 				throw new APIError$1(
@@ -940,6 +944,34 @@
 			}
 		}
 
+		_extractInitResponseData(response) {
+			const payload =
+				response && typeof response.data === 'object' ? response.data : response || {};
+
+			const sessionToken = payload.session_token || payload.sessionToken;
+			const expiresIn = Number(payload.expires_in ?? payload.expiresIn);
+
+			if (!sessionToken) {
+				throw new APIError$1(500, 'Invalid init response: missing session_token');
+			}
+
+			if (!Number.isFinite(expiresIn) || expiresIn <= 0) {
+				throw new APIError$1(500, 'Invalid init response: missing expires_in');
+			}
+
+			return {
+				sessionToken,
+				expiresIn,
+				config:
+					payload.config && typeof payload.config === 'object'
+						? payload.config
+						: {},
+				configVersion: payload.config_version ?? payload.configVersion ?? null,
+				status: response?.status ?? payload?.status ?? true,
+				message: response?.message ?? payload?.message ?? null,
+			};
+		}
+
 		async _ensureSession() {
 			if (!this.isSessionValid()) {
 				await this.init();
@@ -1695,7 +1727,7 @@
 				backgroundColor: options.backgroundColor || '#ffffff',
 				textColor: options.textColor || '#1F2937',
 				autoShow: false,
-				showBackdrop: false,
+				showBackdrop: true,
 				customStyles: {},
 				suppressAfterSubmission: true,
 				suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
@@ -1725,6 +1757,15 @@
 		mount(container) {
 			if (this.mounted || this.destroyed) return this;
 
+			if (this.options.enabled === false) {
+				this.sdk.eventBus.emit('widget:suppressed', {
+					widget: this,
+					type: this.type,
+					reason: 'disabled',
+				});
+				return this;
+			}
+
 			if (this.options.suppressAfterSubmission && this._hasRecentlySubmitted()) {
 				this.sdk.eventBus.emit('widget:suppressed', {
 					widget: this,
@@ -1804,9 +1845,11 @@
 		_showLoadingModal() {
 			this.state.isLoading = true;
 
-			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'sdk-modal-backdrop';
-			document.body.appendChild(this.backdropElement);
+			if (this.options.showBackdrop) {
+				this.backdropElement = document.createElement('div');
+				this.backdropElement.className = 'sdk-modal-backdrop';
+				document.body.appendChild(this.backdropElement);
+			}
 
 			this.loadingElement = document.createElement('div');
 			this.loadingElement.className = 'feedback-loading-modal';
@@ -1816,7 +1859,9 @@
 			document.body.appendChild(this.loadingElement);
 
 			requestAnimationFrame(() => {
-				this.backdropElement.classList.add('show');
+				if (this.backdropElement) {
+					this.backdropElement.classList.add('show');
+				}
 				this.loadingElement.classList.add('show');
 			});
 		}
@@ -2011,16 +2056,17 @@
 					: 'feedback-panel';
 			const sizeClass = `size-${this.options.size}`;
 			this.panelElement = document.createElement('div');
-			this.panelElement.className = `${modeClass} ${sizeClass}`;
+			const themeClass = `theme-${this.options.theme || 'light'}`;
+			this.panelElement.className = `${modeClass} ${sizeClass} ${themeClass}`;
+			this.panelElement.style.setProperty('--color-primary', this.options.primaryColor);
 			this.panelElement.style.setProperty(
-				'--primary-color',
-				this.options.primaryColor
+				'--feedback-panel-bg',
+				this.options.backgroundColor
 			);
 			this.panelElement.style.setProperty(
-				'--bg-color',
-				this.options.backgroundColor
+				'--feedback-panel-text',
+				this.options.textColor
 			);
-			this.panelElement.style.setProperty('--text-color', this.options.textColor);
 			this.panelElement.innerHTML = this._getPanelHTML();
 
 			document.body.appendChild(this.panelElement);
@@ -2349,7 +2395,7 @@
 
 		_render() {
 			const trigger = document.createElement('div');
-			trigger.className = `changelog-widget position-${this.options.position}`;
+			trigger.className = `changelog-widget position-${this.options.position} changelog-theme-${this.options.theme || 'light'}`;
 			trigger.innerHTML = `
 			<button class="changelog-trigger-btn" type="button" aria-label="View Updates">
 				<svg class="changelog-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
@@ -2425,12 +2471,12 @@
 
 		_createModal() {
 			this.backdropElement = document.createElement('div');
-			this.backdropElement.className = 'changelog-modal-backdrop';
+			this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
 			document.body.appendChild(this.backdropElement);
 			this.backdropElement.addEventListener('click', () => this.closeModal());
 
 			this.modalElement = document.createElement('div');
-			this.modalElement.className = 'changelog-modal';
+			this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
 			this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
 				<button class="changelog-modal-close" type="button" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></button>
@@ -2568,14 +2614,14 @@
 
 		_createListModal() {
 			this.listModalBackdropElement = document.createElement('div');
-			this.listModalBackdropElement.className = 'changelog-list-modal-backdrop';
+			this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
 			document.body.appendChild(this.listModalBackdropElement);
 			this.listModalBackdropElement.addEventListener('click', () =>
 				this.closeSidebar()
 			);
 
 			this.listModalElement = document.createElement('div');
-			this.listModalElement.className = 'changelog-list-modal';
+			this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;
 			this.listModalElement.innerHTML = `
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">
@@ -3357,7 +3403,12 @@
 		}
 
 		const adjustColor = (hex, percent, alpha = 1) => {
-			const num = parseInt(hex.replace('#', ''), 16);
+			const normalized = String(hex || '').trim();
+			if (!/^#?[0-9a-fA-F]{6}$/.test(normalized)) {
+				return normalized || '#000000';
+			}
+
+			const num = parseInt(normalized.replace('#', ''), 16);
 			const r = Math.max(0, Math.min(255, (num >> 16) + percent));
 			const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00ff) + percent));
 			const b = Math.max(0, Math.min(255, (num & 0x0000ff) + percent));
@@ -3369,6 +3420,10 @@
 			return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
 		};
 
+		const darkSurface = adjustColor(backgroundColor, 12);
+		const darkSurfaceAlt = adjustColor(backgroundColor, 20);
+		const darkBorder = adjustColor(backgroundColor, 34);
+
 		styleElement.textContent = `
 		#product7-messenger-widget {
 			--color-primary: ${primaryColor} !important;
@@ -3430,6 +3485,77 @@
 		`
 				: ''
 		}
+
+		${
+			theme === 'dark'
+				? `
+		.messenger-widget.theme-dark .messenger-panel-content,
+		.messenger-widget.theme-dark .messenger-home-view,
+		.messenger-widget.theme-dark .messenger-nav,
+		.messenger-widget.theme-dark .messenger-chat-compose,
+		.messenger-widget.theme-dark .messenger-compose-attachments-preview,
+		.messenger-widget.theme-dark .messenger-home-featured,
+		.messenger-widget.theme-dark .messenger-chat-header {
+			background: ${backgroundColor} !important;
+			border-color: ${darkBorder} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-view,
+		.messenger-widget.theme-dark .messenger-chat-title,
+		.messenger-widget.theme-dark .messenger-home-greeting,
+		.messenger-widget.theme-dark .messenger-home-question,
+		.messenger-widget.theme-dark .messenger-home-featured-content h3,
+		.messenger-widget.theme-dark .messenger-home-featured-content p,
+		.messenger-widget.theme-dark .messenger-home-changelog-card-title,
+		.messenger-widget.theme-dark .messenger-home-changelog-card-desc,
+		.messenger-widget.theme-dark .messenger-conversation-title,
+		.messenger-widget.theme-dark .messenger-article-title,
+		.messenger-widget.theme-dark .messenger-compose-input,
+		.messenger-widget.theme-dark .messenger-message-sender,
+		.messenger-widget.theme-dark .messenger-message-time,
+		.messenger-widget.theme-dark .messenger-nav-label {
+			color: ${textColor} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-view {
+			background: linear-gradient(180deg, ${adjustColor(backgroundColor, 10)} 0%, ${backgroundColor} 55%) !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-view::before {
+			background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.12)} 0%, transparent 70%) !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-message-btn,
+		.messenger-widget.theme-dark .messenger-home-changelog-card,
+		.messenger-widget.theme-dark .messenger-compose-input-wrapper,
+		.messenger-widget.theme-dark .messenger-message-received .messenger-message-bubble,
+		.messenger-widget.theme-dark .messenger-message-file,
+		.messenger-widget.theme-dark .messenger-prechat-card,
+		.messenger-widget.theme-dark .messenger-list-item,
+		.messenger-widget.theme-dark .messenger-article-item {
+			background: ${darkSurface} !important;
+			border-color: ${darkBorder} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-home-message-btn:hover,
+		.messenger-widget.theme-dark .messenger-home-changelog-card:hover,
+		.messenger-widget.theme-dark .messenger-list-item:hover,
+		.messenger-widget.theme-dark .messenger-article-item:hover {
+			background: ${darkSurfaceAlt} !important;
+		}
+
+		.messenger-widget.theme-dark .messenger-message-own .messenger-message-bubble,
+		.messenger-widget.theme-dark .messenger-compose-send,
+		.messenger-widget.theme-dark .messenger-launcher-btn,
+		.messenger-widget.theme-dark .messenger-nav-badge,
+		.messenger-widget.theme-dark .messenger-launcher-badge,
+		.messenger-widget.theme-dark .messenger-home-changelog-cover-text,
+		.messenger-widget.theme-dark .messenger-attachment-remove {
+			color: #FFFFFF !important;
+		}
+		`
+				: ''
+		}
 	`;
 
 		console.log('✅ Custom messenger styles applied:', { primaryColor, theme });
@@ -5901,6 +6027,19 @@
 	class MessengerWidget extends BaseWidget {
 		constructor(options) {
 			super({ ...options, type: 'messenger' });
+			const resolvedTheme = options.theme || 'light';
+			const hasExplicitTextColor = Object.prototype.hasOwnProperty.call(
+				options,
+				'textColor'
+			);
+			const hasExplicitBackgroundColor = Object.prototype.hasOwnProperty.call(
+				options,
+				'backgroundColor'
+			);
+			const defaultTextColor =
+				resolvedTheme === 'dark' ? '#E2E8F0' : '#1d1d1f';
+			const defaultBackgroundColor =
+				resolvedTheme === 'dark' ? '#0F172A' : '#ffffff';
 
 			const resolvedEnableChangelog =
 				typeof options.enableChangelog === 'boolean'
@@ -5909,10 +6048,12 @@
 
 			this.messengerOptions = {
 				position: options.position || 'bottom-right',
-				theme: options.theme || 'light',
+				theme: resolvedTheme,
 				primaryColor: options.primaryColor || '#155EEF',
-				textColor: options.textColor || '#1d1d1f',
-				backgroundColor: options.backgroundColor || '#ffffff',
+				textColor: hasExplicitTextColor ? options.textColor : defaultTextColor,
+				backgroundColor: hasExplicitBackgroundColor
+					? options.backgroundColor
+					: defaultBackgroundColor,
 				logoUrl: options.logoUrl || 'https://product7.io/p7logo.svg',
 				teamName: options.teamName || 'Support',
 				teamAvatars: options.teamAvatars || [],
@@ -6824,6 +6965,9 @@
 				surveyId: options.surveyId || null,
 				surveyType: options.surveyType || 'nps',
 				position: options.position || 'bottom-right',
+				theme: options.theme || 'light',
+				enabled:
+					typeof options.enabled === 'boolean' ? options.enabled : undefined,
 				title: options.title || null,
 				description: options.description || null,
 				lowLabel: options.lowLabel || null,
@@ -6866,6 +7010,20 @@
 			};
 		}
 
+		static removeDanglingElements() {
+			if (typeof document === 'undefined') return;
+
+			document
+				.querySelectorAll(
+					'.feedback-survey, .feedback-survey-backdrop, .feedback-survey-success'
+				)
+				.forEach((el) => {
+					if (el && el.parentNode) {
+						el.parentNode.removeChild(el);
+					}
+				});
+		}
+
 		_render() {
 			const container = document.createElement('div');
 			container.className = 'feedback-survey-container';
@@ -6877,6 +7035,16 @@
 		}
 
 		show() {
+			if (this.options.enabled === false || this.surveyOptions.enabled === false) {
+				this.sdk.eventBus.emit('survey:suppressed', {
+					widget: this,
+					surveyId: this.surveyOptions.surveyId,
+					reason: 'disabled',
+				});
+				return this;
+			}
+
+			SurveyWidget.removeDanglingElements();
 			this._renderSurvey();
 			this.surveyState.isVisible = true;
 			this.sdk.eventBus.emit('survey:shown', {
@@ -6912,7 +7080,7 @@
 
 			if (this.surveyOptions.position === 'center') {
 				this.backdropElement = document.createElement('div');
-				this.backdropElement.className = 'feedback-survey-backdrop';
+				this.backdropElement.className = `feedback-survey-backdrop feedback-survey-backdrop-${this.surveyOptions.theme}`;
 				document.body.appendChild(this.backdropElement);
 				this.backdropElement.addEventListener('click', () =>
 					this._handleDismiss()
@@ -6920,7 +7088,7 @@
 			}
 
 			this.surveyElement = document.createElement('div');
-			this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position}${
+			this.surveyElement.className = `feedback-survey feedback-survey-${this.surveyOptions.position} feedback-survey-theme-${this.surveyOptions.theme}${
 			showDescription && !showTitle
 				? ' feedback-survey-description-primary'
 				: ''
@@ -7940,7 +8108,7 @@
 			}, 3000);
 		}
 
-		_closeSurvey(resetState = true) {
+		_closeSurvey(resetState = true, immediate = false) {
 			if (this._escapeHandler) {
 				document.removeEventListener('keydown', this._escapeHandler);
 				this._escapeHandler = null;
@@ -7955,21 +8123,33 @@
 					this.surveyOptions.position === 'center'
 						? 'translate(-50%, -50%) scale(0.95)'
 						: 'translateY(20px)';
-				setTimeout(() => {
-					if (surveyEl && surveyEl.parentNode) {
+				if (immediate) {
+					if (surveyEl.parentNode) {
 						surveyEl.parentNode.removeChild(surveyEl);
 					}
-				}, 300);
+				} else {
+					setTimeout(() => {
+						if (surveyEl && surveyEl.parentNode) {
+							surveyEl.parentNode.removeChild(surveyEl);
+						}
+					}, 300);
+				}
 				this.surveyElement = null;
 			}
 
 			if (backdropEl) {
 				backdropEl.style.opacity = '0';
-				setTimeout(() => {
-					if (backdropEl && backdropEl.parentNode) {
+				if (immediate) {
+					if (backdropEl.parentNode) {
 						backdropEl.parentNode.removeChild(backdropEl);
 					}
-				}, 300);
+				} else {
+					setTimeout(() => {
+						if (backdropEl && backdropEl.parentNode) {
+							backdropEl.parentNode.removeChild(backdropEl);
+						}
+					}, 300);
+				}
 				this.backdropElement = null;
 			}
 
@@ -7987,7 +8167,7 @@
 		}
 
 		destroy() {
-			this._closeSurvey();
+			this._closeSurvey(true, true);
 			super.destroy();
 		}
 	}
@@ -8160,6 +8340,10 @@
 			const widgetId = generateId('widget');
 			const widgetConfig = this._getWidgetTypeConfig(type);
 			const explicitOptions = this._omitUndefined(options);
+			const widgetEnabled = this._isWidgetEnabled(type, {
+				...widgetConfig,
+				...explicitOptions,
+			});
 			const widgetOptions = {
 				id: widgetId,
 				sdk: this,
@@ -8167,6 +8351,7 @@
 				...this.config,
 				...widgetConfig,
 				...explicitOptions,
+				enabled: widgetEnabled,
 			};
 
 			try {
@@ -8257,6 +8442,7 @@
 					surveyConfig.showDescription ?? surveyConfig.show_description,
 				customQuestions: surveyConfig.customQuestions || surveyConfig.questions,
 				pages: surveyConfig.pages,
+				enabled: surveyConfig.enabled,
 				...displayOptions,
 			});
 		}
@@ -8279,6 +8465,17 @@
 
 			const normalizedOptions = this._normalizeSurveyConfig(options);
 			const surveyConfigDefaults = this._getWidgetTypeConfig('survey');
+			const surveyEnabled = this._isWidgetEnabled('survey', normalizedOptions);
+
+			if (!surveyEnabled) {
+				this.eventBus.emit('survey:suppressed', {
+					surveyId:
+						normalizedOptions.surveyId || normalizedOptions.id || options.id || null,
+					reason: 'disabled',
+					survey: normalizedOptions,
+				});
+				return null;
+			}
 
 			const surveyWidget = this.createWidget('survey', {
 				surveyId: normalizedOptions.surveyId,
@@ -8310,6 +8507,7 @@
 				email: normalizedOptions.email,
 				onSubmit: normalizedOptions.onSubmit,
 				onDismiss: normalizedOptions.onDismiss,
+				enabled: surveyEnabled,
 			});
 
 			surveyWidget.mount();
@@ -8403,13 +8601,19 @@
 				: {};
 
 			const inferredType =
-				survey.type || this._inferSurveyTypeFromPage(firstPage) || 'nps';
+				survey.surveyType ||
+				survey.survey_type ||
+				survey.type ||
+				this._inferSurveyTypeFromPage(firstPage) ||
+				'nps';
 
 			return {
 				...survey,
-				surveyId: survey.surveyId || survey.id || null,
-				surveyType: survey.surveyType || inferredType,
-				type: survey.type || inferredType,
+				surveyId: survey.surveyId || survey.survey_id || survey.id || null,
+				surveyType: survey.surveyType || survey.survey_type || inferredType,
+				type: survey.type || survey.survey_type || inferredType,
+				enabled:
+					typeof survey.enabled === 'boolean' ? survey.enabled : undefined,
 				should_show:
 					survey.should_show ??
 					(survey.eligibility ? survey.eligibility.should_show : undefined),
@@ -8438,7 +8642,11 @@
 				showTitle: survey.showTitle ?? survey.show_title ?? null,
 				showDescription:
 					survey.showDescription ?? survey.show_description ?? null,
-				customQuestions: survey.customQuestions || survey.questions || [],
+				customQuestions:
+					survey.customQuestions ||
+					survey.custom_questions ||
+					survey.questions ||
+					[],
 				pages: this._normalizeSurveyPages(survey.pages || []),
 			};
 		}
@@ -8513,6 +8721,23 @@
 			return this._toCamelCaseObject(mergedTypeConfig);
 		}
 
+		_isWidgetEnabled(type, options = {}) {
+			const typeConfig = this._getWidgetTypeConfig(type);
+			if (typeConfig.enabled === false) {
+				return false;
+			}
+
+			if (typeof options.enabled === 'boolean') {
+				return options.enabled;
+			}
+
+			if (typeof typeConfig.enabled === 'boolean') {
+				return typeConfig.enabled;
+			}
+
+			return true;
+		}
+
 		_isPlainObject(value) {
 			return Object.prototype.toString.call(value) === '[object Object]';
 		}
@@ -8566,11 +8791,21 @@
 
 			const configDefaults = this._getWidgetTypeConfig('changelog');
 			const explicitOptions = this._omitUndefined(options);
+			const changelogEnabled = this._isWidgetEnabled('changelog', explicitOptions);
+
+			if (!changelogEnabled) {
+				this.eventBus.emit('widget:suppressed', {
+					type: 'changelog',
+					reason: 'disabled',
+				});
+				return null;
+			}
 
 			const changelogWidget = this.createWidget('changelog', {
 				...defaults,
 				...configDefaults,
 				...explicitOptions,
+				enabled: changelogEnabled,
 			});
 
 			changelogWidget.mount();
@@ -9025,6 +9260,23 @@
   font-family: inherit;
 }
 
+.changelog-modal-backdrop,
+.changelog-list-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-slow);
+  z-index: var(--z-modal-backdrop);
+}
+
+.changelog-modal-backdrop.show,
+.changelog-list-modal-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .changelog-modal.open {
   pointer-events: auto;
 }
@@ -9288,6 +9540,53 @@
   opacity: 1;
 }
 
+.changelog-theme-dark.changelog-widget .changelog-trigger-btn {
+  background: #0F172A;
+  color: #E2E8F0;
+  border: 1px solid #334155;
+}
+
+.changelog-theme-dark.changelog-modal-backdrop,
+.changelog-theme-dark.changelog-list-modal-backdrop {
+  background: rgba(2, 6, 23, 0.72);
+}
+
+.changelog-theme-dark .changelog-modal-container,
+.changelog-theme-dark .changelog-list-modal-container {
+  background: #111827;
+  border: 1px solid #334155;
+}
+
+.changelog-theme-dark .changelog-list-modal-header {
+  background: #111827;
+  border-bottom-color: #334155;
+}
+
+.changelog-theme-dark .changelog-list-modal-header h2,
+.changelog-theme-dark .changelog-list-item-title,
+.changelog-theme-dark .changelog-popup-title,
+.changelog-theme-dark .changelog-view-all-btn {
+  color: #F3F4F6;
+}
+
+.changelog-theme-dark .changelog-list-item-description,
+.changelog-theme-dark .changelog-popup-description,
+.changelog-theme-dark .changelog-list-item-date {
+  color: #9CA3AF;
+}
+
+.changelog-theme-dark .changelog-list-item {
+  border-bottom-color: #334155;
+}
+
+.changelog-theme-dark .changelog-list-item:hover {
+  background: #1F2937;
+}
+
+.changelog-theme-dark .changelog-popup-btn {
+  color: #FFFFFF;
+}
+
 .changelog-list-modal-header {
   display: flex;
   align-items: center;
@@ -10258,8 +10557,26 @@
   transform: translateX(0);
 }
 
+.feedback-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.96);
+  width: min(460px, calc(100vw - (var(--spacing-5) * 2)));
+  max-height: min(560px, calc(100vh - (var(--spacing-6) * 2)));
+  z-index: var(--z-popover);
+  transition: transform var(--transition-slow);
+  font-family: inherit;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.feedback-modal.open {
+  transform: translate(-50%, -50%) scale(1);
+}
+
 .feedback-panel-content {
-  background: var(--color-white);
+  background: var(--feedback-panel-bg, var(--color-white));
+  color: var(--feedback-panel-text, var(--color-text-primary));
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -10279,7 +10596,7 @@
   margin: 0;
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
+  color: var(--feedback-panel-text, var(--color-text-primary));
 }
 
 .feedback-panel-body {
@@ -10318,6 +10635,51 @@
   display: block;
 }
 
+.feedback-panel.theme-dark .feedback-panel-content,
+.feedback-modal.theme-dark .feedback-panel-content {
+  background: #111827;
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .feedback-panel-header,
+.feedback-modal.theme-dark .feedback-panel-header {
+  border-bottom-color: #374151;
+}
+
+.feedback-panel.theme-dark .sdk-label,
+.feedback-panel.theme-dark .feedback-panel-header h3,
+.feedback-modal.theme-dark .sdk-label,
+.feedback-modal.theme-dark .feedback-panel-header h3 {
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .sdk-input,
+.feedback-panel.theme-dark .sdk-textarea,
+.feedback-modal.theme-dark .sdk-input,
+.feedback-modal.theme-dark .sdk-textarea {
+  background: #1F2937;
+  border-color: #374151;
+  color: #E2E8F0;
+}
+
+.feedback-panel.theme-dark .sdk-input::placeholder,
+.feedback-panel.theme-dark .sdk-textarea::placeholder,
+.feedback-modal.theme-dark .sdk-input::placeholder,
+.feedback-modal.theme-dark .sdk-textarea::placeholder {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .sdk-close-btn,
+.feedback-modal.theme-dark .sdk-close-btn {
+  color: #9CA3AF;
+}
+
+.feedback-panel.theme-dark .sdk-close-btn:hover,
+.feedback-modal.theme-dark .sdk-close-btn:hover {
+  background: #1F2937;
+  color: #E2E8F0;
+}
+
 @media (max-width: 768px) {
   .feedback-widget-button {
     bottom: var(--spacing-4);
@@ -12020,6 +12382,10 @@
   animation: fadeIn var(--transition-slow);
 }
 
+.feedback-survey-backdrop-dark {
+  background: rgba(2, 6, 23, 0.72);
+}
+
 /* ========================================
    SURVEY CARD
    ======================================== */
@@ -12037,6 +12403,79 @@
   font-family: inherit;
 }
 
+.feedback-survey-theme-dark {
+  background: #111827;
+  border-color: #374151;
+}
+
+.feedback-survey-theme-dark .feedback-survey-title,
+.feedback-survey-theme-dark .feedback-survey-description-primary .feedback-survey-description {
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-description,
+.feedback-survey-theme-dark .feedback-survey-labels,
+.feedback-survey-theme-dark .feedback-survey-progress {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-close {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-close:hover {
+  background: #1F2937;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale {
+  border-color: #374151;
+  background: #1F2937;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn {
+  background: #1F2937;
+  border-right-color: #374151;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-nps-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-ces-btn:hover,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn:hover {
+  background: #273549;
+}
+
+.feedback-survey-theme-dark .feedback-survey-nps-btn,
+.feedback-survey-theme-dark .feedback-survey-ces-btn,
+.feedback-survey-theme-dark .feedback-survey-freq-btn,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn {
+  background: #1F2937;
+  border-color: #374151;
+  color: #E5E7EB;
+}
+
+.feedback-survey-theme-dark .feedback-survey-page-textarea,
+.feedback-survey-theme-dark .feedback-survey-select,
+.feedback-survey-theme-dark .feedback-survey-input,
+.feedback-survey-theme-dark .feedback-survey-textarea {
+  background: #1F2937;
+  border-color: #374151;
+  color: #F3F4F6;
+}
+
+.feedback-survey-theme-dark .feedback-survey-page-textarea::placeholder,
+.feedback-survey-theme-dark .feedback-survey-input::placeholder,
+.feedback-survey-theme-dark .feedback-survey-textarea::placeholder {
+  color: #9CA3AF;
+}
+
+.feedback-survey-theme-dark .feedback-survey-back {
+  background: #111827;
+  border-color: #374151;
+  color: #E5E7EB;
+}
+
 .feedback-survey-bottom-right {
   bottom: var(--spacing-6);
   right: var(--spacing-6);