@product7/feedback-sdk 1.5.4 → 1.5.8

package/dist/feedback-sdk.js

@@ -1695,7 +1695,7 @@
 				backgroundColor: options.backgroundColor || '#ffffff',
 				textColor: options.textColor || '#1F2937',
 				autoShow: false,
-				showBackdrop: true,
+				showBackdrop: false,
 				customStyles: {},
 				suppressAfterSubmission: true,
 				suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
@@ -2035,10 +2035,16 @@
 		_getPanelHTML() {
 			return `
       <div class="feedback-panel-content">
-        <div class="feedback-panel-header">
-          <h3>Send Feedback</h3>
-          <button class="sdk-close-btn" type="button" aria-label="Close">&times;</button>
-        </div>
+<div class="feedback-panel-header">
+  <h3>Send Feedback</h3>
+  <button class="sdk-close-btn" type="button" aria-label="Close">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+      <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>
+</div>
         <div class="feedback-panel-body">
           <form class="feedback-form">
             <div class="sdk-form-group">
@@ -2420,7 +2426,7 @@
 			this.modalElement.className = 'changelog-modal';
 			this.modalElement.innerHTML = `
 			<div class="changelog-modal-container">
-				<button class="changelog-modal-close" type="button" aria-label="Close">&times;</button>
+				<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>
 				<div class="changelog-modal-content">
 					<div class="changelog-loading">
 						<div class="sdk-spinner"></div>
@@ -2567,8 +2573,13 @@
 			<div class="changelog-list-modal-container">
 				<div class="changelog-list-modal-header">
 					<h2>${this.options.title || "What's New"} 🎉</h2>
-					<button class="changelog-list-modal-close" type="button" aria-label="Close">&times;</button>
-				</div>
+				<button class="changelog-list-modal-close" type="button" aria-label="Close">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+    <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></div>
 				<div class="changelog-list-modal-body">
 					<div class="changelog-loading">
 						<div class="sdk-spinner"></div>
@@ -4000,12 +4011,7 @@
 		}
 
 		_getMessagesIcon() {
-			return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
-			<circle cx="128" cy="128" r="12"/>
-			<circle cx="84" cy="128" r="12"/>
-			<circle cx="172" cy="128" r="12"/>
-			<path d="M79.93,211.11a96,96,0,1,0-35-35h0L32.42,213.46a8,8,0,0,0,10.12,10.12l37.39-12.47Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-		</svg>`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M71.58,144,32,176V48a8,8,0,0,1,8-8H168a8,8,0,0,1,8,8v88a8,8,0,0,1-8,8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M80,144v40a8,8,0,0,0,8,8h96.42L224,224V96a8,8,0,0,0-8-8H176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>`;
 		}
 
 		_getHelpIcon() {
@@ -4432,10 +4438,12 @@
 			<div class="messenger-compose-attachments-preview"></div>
 
 			<div class="messenger-chat-compose">
-				<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="16" height="16" fill="none"/><path d="M160,80,76.69,164.69a16,16,0,0,0,22.63,22.62L198.63,86.63a32,32,0,0,0-45.26-45.26L54.06,142.06a48,48,0,0,0,67.88,67.88L204,128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-				</button>
-				<div class="messenger-compose-input-wrapper">
+<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20">
+    <rect width="256" height="256" fill="none"/>
+    <path d="M160,80,76.69,164.69a16,16,0,0,0,22.63,22.62L198.63,86.63a32,32,0,0,0-45.26-45.26L54.06,142.06a48,48,0,0,0,67.88,67.88L204,128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+  </svg>
+</button>				<div class="messenger-compose-input-wrapper">
 					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
 				<button class="messenger-compose-send" aria-label="Send" disabled>
@@ -4962,11 +4970,13 @@
 			this.element.innerHTML = `
         <div class="messenger-conversations-header">
             <h2>Messages</h2>
-            <button class="sdk-close-btn" aria-label="Close">
-                <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>
+           <button class="sdk-close-btn" aria-label="Close">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+    <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>
         </div>
 
         <div class="messenger-conversations-body">
@@ -6728,6 +6738,25 @@
 				description: options.description || null,
 				lowLabel: options.lowLabel || null,
 				highLabel: options.highLabel || null,
+				ratingScale: options.ratingScale || options.scale || null,
+				showFeedbackInput:
+					typeof options.showFeedbackInput === 'boolean'
+						? options.showFeedbackInput
+						: null,
+				showSubmitButton:
+					typeof options.showSubmitButton === 'boolean'
+						? options.showSubmitButton
+						: null,
+				autoSubmitOnSelect:
+					typeof options.autoSubmitOnSelect === 'boolean'
+						? options.autoSubmitOnSelect
+						: null,
+				showTitle:
+					typeof options.showTitle === 'boolean' ? options.showTitle : null,
+				showDescription:
+					typeof options.showDescription === 'boolean'
+						? options.showDescription
+						: null,
 				customQuestions: options.customQuestions || [],
 				pages: Array.isArray(options.pages) ? options.pages : [],
 				respondentId: options.respondentId || null,
@@ -6742,6 +6771,7 @@
 				customAnswers: {},
 				pageAnswers: {},
 				currentPageIndex: 0,
+				isSubmitting: false,
 				isVisible: false,
 			};
 		}
@@ -6777,6 +6807,10 @@
 			const config = this._getSurveyConfig();
 			const isMultiPage = this._isMultiPageSurvey();
 			const isLastPage = this._isLastPage();
+			const showFeedbackInput = this._shouldShowFeedbackInput();
+			const showActions = this._shouldShowActions();
+			const showTitle = this._shouldShowTitle(config);
+			const showDescription = this._shouldShowDescription(config);
 			const pageProgress = isMultiPage
 				? `Page ${this.surveyState.currentPageIndex + 1} of ${this.surveyOptions.pages.length}`
 				: '';
@@ -6796,21 +6830,33 @@
 			}
 
 			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}${
+			showDescription && !showTitle
+				? ' feedback-survey-description-primary'
+				: ''
+		}`;
 
 			this.surveyElement.innerHTML = `
-			<button class="feedback-survey-close">&times;</button>
-			<h3 class="feedback-survey-title">${config.title}</h3>
-			<p class="feedback-survey-description">${config.description}</p>
+			<button class="feedback-survey-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>
+			${showTitle ? `<h3 class="feedback-survey-title">${config.title}</h3>` : ''}
+			${showDescription ? `<p class="feedback-survey-description">${config.description}</p>` : ''}
 			${isMultiPage ? `<div class="feedback-survey-progress">${pageProgress}</div>` : ''}
 			<div class="feedback-survey-content">${config.html}</div>
-			<div class="feedback-survey-feedback">
+			${
+				showFeedbackInput
+					? `<div class="feedback-survey-feedback">
 				<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)">${this.surveyState.feedback || ''}</textarea>
-			</div>
-			<div class="feedback-survey-actions">
+			</div>`
+					: ''
+			}
+			${
+				showActions
+					? `<div class="feedback-survey-actions">
 				${backButton}
 				<button class="feedback-survey-submit">${submitLabel}</button>
-			</div>
+			</div>`
+					: ''
+			}
 		`;
 
 			document.body.appendChild(this.surveyElement);
@@ -6830,37 +6876,62 @@
 				return this._getCurrentPageConfig();
 			}
 
+			const npsScale = this._getNPSScale();
+			const npsUsesSegmentedScale = npsScale.values.length <= 7;
+			const npsContainerClass = npsUsesSegmentedScale
+				? 'feedback-survey-ces feedback-survey-rating-scale'
+				: 'feedback-survey-nps';
+			const npsButtonClass = npsUsesSegmentedScale
+				? 'feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+				: 'feedback-survey-nps-btn';
+			const npsLowLabel =
+				this.surveyOptions.lowLabel ||
+				(npsScale.start === 0 ? 'Not likely' : 'Strongly Disagree');
+			const npsHighLabel =
+				this.surveyOptions.highLabel ||
+				(npsScale.start === 0 ? 'Very likely' : 'Strongly Agree');
+			const npsPrompt =
+				this.surveyOptions.description ||
+				this.surveyOptions.title ||
+				'How likely are you to recommend us?';
+			const csatPrompt =
+				this.surveyOptions.description ||
+				this.surveyOptions.title ||
+				'How satisfied are you?';
+			const cesPrompt =
+				this.surveyOptions.description ||
+				this.surveyOptions.title ||
+				'How easy was it?';
+
 			const configs = {
 				nps: {
-					title:
-						this.surveyOptions.title || 'How likely are you to recommend us?',
-					description:
-						this.surveyOptions.description ||
-						'On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?',
+					title: this.surveyOptions.title || '',
+					description: npsPrompt,
 					html: `
-					<div class="feedback-survey-nps">
-						${[...Array(11).keys()]
+					<div class="${npsContainerClass}">
+						${npsScale.values
 							.map(
 								(n) => `
-							<button class="feedback-survey-nps-btn" data-score="${n}">${n}</button>
+							<button class="${npsButtonClass}" data-score="${n}">${n}</button>
 						`
 							)
 							.join('')}
 					</div>
-					<div class="feedback-survey-labels">
-						<span>${this.surveyOptions.lowLabel || 'Not likely'}</span>
-						<span>${this.surveyOptions.highLabel || 'Very likely'}</span>
-					</div>
+					${this._renderScaleLabels(npsLowLabel, npsHighLabel)}
 				`,
 				},
 				csat: {
-					title: this.surveyOptions.title || 'How satisfied are you?',
-					description:
-						this.surveyOptions.description ||
-						'How would you rate your overall satisfaction with our product?',
+					title: this.surveyOptions.title || '',
+					description: csatPrompt,
 					html: `
 					<div class="feedback-survey-csat">
-						${['😞', '😕', '😐', '🙂', '😄']
+						${[
+							'\uD83D\uDE1E',
+							'\uD83D\uDE15',
+							'\uD83D\uDE10',
+							'\uD83D\uDE42',
+							'\uD83D\uDE04',
+						]
 							.map(
 								(emoji, i) => `
 							<button class="feedback-survey-csat-btn" data-score="${i + 1}">${emoji}</button>
@@ -6868,17 +6939,15 @@
 							)
 							.join('')}
 					</div>
-					<div class="feedback-survey-labels">
-						<span>${this.surveyOptions.lowLabel || 'Very dissatisfied'}</span>
-						<span>${this.surveyOptions.highLabel || 'Very satisfied'}</span>
-					</div>
+					${this._renderScaleLabels(
+						this.surveyOptions.lowLabel || 'Very dissatisfied',
+						this.surveyOptions.highLabel || 'Very satisfied'
+					)}
 				`,
 				},
 				ces: {
-					title: this.surveyOptions.title || 'How easy was it?',
-					description:
-						this.surveyOptions.description ||
-						'How easy was it to accomplish your task today?',
+					title: this.surveyOptions.title || '',
+					description: cesPrompt,
 					html: `
 					<div class="feedback-survey-ces">
 						${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy']
@@ -6903,6 +6972,91 @@
 			return configs[this.surveyOptions.surveyType] || configs.nps;
 		}
 
+		_getNPSScale() {
+			const rawScale = Number(this.surveyOptions.ratingScale);
+			const scale = Number.isFinite(rawScale) && rawScale >= 2 ? rawScale : 5;
+			const start = scale === 11 ? 0 : 1;
+			return {
+				scale,
+				start,
+				values: Array.from({ length: scale }, (_, index) => start + index),
+			};
+		}
+
+		_renderScaleLabels(lowLabel, highLabel) {
+			const low = lowLabel || '';
+			const high = highLabel || '';
+			if (!low && !high) {
+				return '';
+			}
+			return `
+			<div class="feedback-survey-labels">
+				<span>${low}</span>
+				<span>${high}</span>
+			</div>
+		`;
+		}
+
+		_isRatingSurveyType(type = this.surveyOptions.surveyType) {
+			return type === 'nps' || type === 'csat' || type === 'ces';
+		}
+
+		_shouldShowTitle(config) {
+			if (!config || !config.title) {
+				return false;
+			}
+			if (typeof this.surveyOptions.showTitle === 'boolean') {
+				return this.surveyOptions.showTitle;
+			}
+			if (!this._isMultiPageSurvey() && this._isRatingSurveyType()) {
+				return !config.description;
+			}
+			return true;
+		}
+
+		_shouldShowDescription(config) {
+			if (typeof this.surveyOptions.showDescription === 'boolean') {
+				return this.surveyOptions.showDescription;
+			}
+			if (!this._isMultiPageSurvey() && this._isRatingSurveyType()) {
+				return Boolean(config && (config.description || config.title));
+			}
+			return Boolean(config && config.description);
+		}
+
+		_shouldShowFeedbackInput() {
+			if (this._isMultiPageSurvey()) {
+				return false;
+			}
+			if (typeof this.surveyOptions.showFeedbackInput === 'boolean') {
+				return this.surveyOptions.showFeedbackInput;
+			}
+			return false;
+		}
+
+		_shouldAutoSubmitOnSelect() {
+			if (typeof this.surveyOptions.autoSubmitOnSelect === 'boolean') {
+				return this.surveyOptions.autoSubmitOnSelect;
+			}
+			if (this._isMultiPageSurvey()) {
+				return false;
+			}
+			if (this.surveyOptions.showSubmitButton === true) {
+				return false;
+			}
+			return this._isRatingSurveyType() && !this._shouldShowFeedbackInput();
+		}
+
+		_shouldShowActions() {
+			if (this._isMultiPageSurvey()) {
+				return true;
+			}
+			if (typeof this.surveyOptions.showSubmitButton === 'boolean') {
+				return this.surveyOptions.showSubmitButton;
+			}
+			return !this._shouldAutoSubmitOnSelect();
+		}
+
 		_isMultiPageSurvey() {
 			return (
 				Array.isArray(this.surveyOptions.pages) &&
@@ -6917,7 +7071,9 @@
 
 		_isLastPage() {
 			if (!this._isMultiPageSurvey()) return true;
-			return this.surveyState.currentPageIndex >= this.surveyOptions.pages.length - 1;
+			return (
+				this.surveyState.currentPageIndex >= this.surveyOptions.pages.length - 1
+			);
 		}
 
 		_getCurrentPageConfig() {
@@ -6928,10 +7084,7 @@
 
 			return {
 				title: page.title || this.surveyOptions.title || 'Quick Feedback',
-				description:
-					page.description ||
-					this.surveyOptions.description ||
-					'Help us improve by answering this question.',
+				description: page.description || this.surveyOptions.description || '',
 				html: this._renderSurveyPage(page),
 			};
 		}
@@ -6939,9 +7092,7 @@
 		_getFallbackSurveyConfig() {
 			return {
 				title: this.surveyOptions.title || 'Quick Feedback',
-				description:
-					this.surveyOptions.description ||
-					'Help us improve by answering a few questions.',
+				description: this.surveyOptions.description || '',
 				html: this._renderCustomQuestions(),
 			};
 		}
@@ -6963,24 +7114,48 @@
 			const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
 			const config = page.ratingConfig || page.rating_config || {};
 			const scale = Number(config.scale) || 5;
-			const ratingType = config.survey_type || this.surveyOptions.surveyType || 'csat';
+			const ratingType =
+				config.survey_type || this.surveyOptions.surveyType || 'csat';
 			const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 			const currentRating = pageAnswer.rating;
-
-			const labels = `
-			<div class="feedback-survey-labels">
-				<span>${config.low_label || this.surveyOptions.lowLabel || ''}</span>
-				<span>${config.high_label || this.surveyOptions.highLabel || ''}</span>
-			</div>
-		`;
-
-			if (scale === 11 || ratingType === 'nps') {
+			const defaultLowLabel =
+				ratingType === 'nps'
+					? scale === 11
+						? 'Not likely'
+						: 'Strongly Disagree'
+					: '';
+			const defaultHighLabel =
+				ratingType === 'nps'
+					? scale === 11
+						? 'Very likely'
+						: 'Strongly Agree'
+					: '';
+			const lowLabel =
+				config.low_label || this.surveyOptions.lowLabel || defaultLowLabel;
+			const highLabel =
+				config.high_label || this.surveyOptions.highLabel || defaultHighLabel;
+			const labels = this._renderScaleLabels(lowLabel, highLabel);
+
+			if (ratingType === 'nps') {
+				const npsScale = Number.isFinite(scale) && scale >= 2 ? scale : 5;
+				const start = npsScale === 11 ? 0 : 1;
+				const values = Array.from(
+					{ length: npsScale },
+					(_, index) => start + index
+				);
+				const usesSegmentedScale = values.length <= 7;
+				const containerClass = usesSegmentedScale
+					? 'feedback-survey-ces feedback-survey-rating-scale'
+					: 'feedback-survey-nps';
+				const buttonClass = usesSegmentedScale
+					? 'feedback-survey-page-rating-btn feedback-survey-nps-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn'
+					: 'feedback-survey-page-rating-btn feedback-survey-nps-btn';
 				return `
-				<div class="feedback-survey-nps" data-page-id="${pageId}">
-					${[...Array(11).keys()]
+				<div class="${containerClass}" data-page-id="${pageId}">
+					${values
 						.map((n) => {
 							const selected = currentRating === n ? ' selected' : '';
-							return `<button class="feedback-survey-page-rating-btn feedback-survey-nps-btn${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
+							return `<button class="${buttonClass}${selected}" data-page-id="${pageId}" data-score="${n}">${n}</button>`;
 						})
 						.join('')}
 				</div>
@@ -7011,12 +7186,12 @@
 			}
 
 			return `
-			<div class="feedback-survey-ces" data-page-id="${pageId}">
+			<div class="feedback-survey-ces feedback-survey-rating-scale" data-page-id="${pageId}">
 				${[...Array(scale).keys()]
 					.map((i) => {
 						const score = i + 1;
 						const selected = currentRating === score ? ' selected' : '';
-						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
+						return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn feedback-survey-rating-scale-btn${selected}" data-page-id="${pageId}" data-score="${score}">${score}</button>`;
 					})
 					.join('')}
 			</div>
@@ -7026,9 +7201,11 @@
 
 		_renderMultipleChoicePage(page) {
 			const pageId = page.id || `page_${this.surveyState.currentPageIndex}`;
-			const config = page.multipleChoiceConfig || page.multiple_choice_config || {};
+			const config =
+				page.multipleChoiceConfig || page.multiple_choice_config || {};
 			const options = Array.isArray(config.options) ? config.options : [];
-			const allowMultiple = config.allow_multiple === true || config.multiple === true;
+			const allowMultiple =
+				config.allow_multiple === true || config.multiple === true;
 			const pageAnswer = this.surveyState.pageAnswers[pageId] || {};
 			const selectedValues = Array.isArray(pageAnswer.values)
 				? pageAnswer.values
@@ -7133,7 +7310,9 @@
 			const submitBtn = this.surveyElement.querySelector(
 				'.feedback-survey-submit'
 			);
-			submitBtn.addEventListener('click', () => this._handleSubmit());
+			if (submitBtn) {
+				submitBtn.addEventListener('click', () => this._handleSubmit());
+			}
 
 			const backBtn = this.surveyElement.querySelector('.feedback-survey-back');
 			if (backBtn) {
@@ -7143,9 +7322,11 @@
 			const textarea = this.surveyElement.querySelector(
 				'.feedback-survey-textarea'
 			);
-			textarea.addEventListener('input', (e) => {
-				this.surveyState.feedback = e.target.value;
-			});
+			if (textarea) {
+				textarea.addEventListener('input', (e) => {
+					this.surveyState.feedback = e.target.value;
+				});
+			}
 
 			this._attachTypeSpecificEvents();
 
@@ -7317,6 +7498,7 @@
 						btn.classList.remove('selected');
 					}
 				});
+			this._maybeAutoSubmit();
 		}
 
 		_selectCSAT(score) {
@@ -7331,6 +7513,7 @@
 						btn.classList.remove('selected');
 					}
 				});
+			this._maybeAutoSubmit();
 		}
 
 		_selectCES(score) {
@@ -7345,6 +7528,14 @@
 						btn.classList.remove('selected');
 					}
 				});
+			this._maybeAutoSubmit();
+		}
+
+		_maybeAutoSubmit() {
+			if (!this._shouldAutoSubmitOnSelect()) {
+				return;
+			}
+			this._handleSubmit();
 		}
 
 		_selectFrequency(freq) {
@@ -7362,6 +7553,9 @@
 
 		async _handleSubmit() {
 			const type = this.surveyOptions.surveyType;
+			if (this.surveyState.isSubmitting) {
+				return;
+			}
 
 			if (this._isMultiPageSurvey()) {
 				if (!this._validateCurrentPage()) {
@@ -7369,7 +7563,10 @@
 				}
 
 				const nextPageIndex = this._getNextPageIndex();
-				if (nextPageIndex !== -1 && nextPageIndex !== this.surveyState.currentPageIndex) {
+				if (
+					nextPageIndex !== -1 &&
+					nextPageIndex !== this.surveyState.currentPageIndex
+				) {
 					this.surveyState.currentPageIndex = nextPageIndex;
 					this._renderSurvey();
 					return;
@@ -7385,6 +7582,8 @@
 				return;
 			}
 
+			this.surveyState.isSubmitting = true;
+
 			const respondent = this._getRespondentContext();
 			const normalizedPageAnswers = this._normalizePageAnswersForSubmit();
 			const mergedAnswers = {
@@ -7411,16 +7610,18 @@
 				timestamp: new Date().toISOString(),
 			};
 
-			if (this.surveyOptions.onSubmit) {
-				this.surveyOptions.onSubmit(response);
-			}
-
 			try {
+				if (this.surveyOptions.onSubmit) {
+					this.surveyOptions.onSubmit(response);
+				}
+
 				const surveyId =
 					this.surveyOptions.surveyId || `local_${type}_${Date.now()}`;
 				await this.apiService.submitSurveyResponse(surveyId, responseData);
 			} catch (error) {
 				console.error('[SurveyWidget] Failed to submit survey:', error);
+			} finally {
+				this.surveyState.isSubmitting = false;
 			}
 
 			this.sdk.eventBus.emit('survey:submitted', { widget: this, response });
@@ -7528,7 +7729,8 @@
 			}
 
 			for (const page of this.surveyOptions.pages) {
-				const pageId = page.id || `page_${this.surveyOptions.pages.indexOf(page)}`;
+				const pageId =
+					page.id || `page_${this.surveyOptions.pages.indexOf(page)}`;
 				const answer = this.surveyState.pageAnswers[pageId];
 				if (answer && typeof answer.rating === 'number') {
 					return answer.rating;
@@ -7540,7 +7742,9 @@
 
 		_normalizePageAnswersForSubmit() {
 			const output = {};
-			for (const [pageId, answer] of Object.entries(this.surveyState.pageAnswers)) {
+			for (const [pageId, answer] of Object.entries(
+				this.surveyState.pageAnswers
+			)) {
 				if (answer == null) continue;
 				if (Array.isArray(answer.values) && answer.values.length > 0) {
 					output[pageId] = answer.values;
@@ -7567,8 +7771,7 @@
 					? this.sdk.getUserContext() || {}
 					: {};
 			const apiUserContext =
-				this.apiService &&
-				typeof this.apiService.getUserContext === 'function'
+				this.apiService && typeof this.apiService.getUserContext === 'function'
 					? this.apiService.getUserContext() || {}
 					: {};
 			const localUserContext = this.options.userContext || {};
@@ -7616,7 +7819,15 @@
 			const submitBtn = this.surveyElement.querySelector(
 				'.feedback-survey-submit'
 			);
-			submitBtn.parentNode.insertBefore(error, submitBtn);
+			const actions = this.surveyElement.querySelector(
+				'.feedback-survey-actions'
+			);
+			const anchor = submitBtn || actions;
+			if (anchor && anchor.parentNode) {
+				anchor.parentNode.insertBefore(error, anchor);
+			} else {
+				this.surveyElement.appendChild(error);
+			}
 
 			setTimeout(() => error.remove(), 3000);
 		}
@@ -7679,6 +7890,7 @@
 					customAnswers: {},
 					pageAnswers: {},
 					currentPageIndex: 0,
+					isSubmitting: false,
 					isVisible: false,
 				};
 			}
@@ -7940,6 +8152,16 @@
 				description: surveyConfig.description,
 				lowLabel: surveyConfig.lowLabel || surveyConfig.low_label,
 				highLabel: surveyConfig.highLabel || surveyConfig.high_label,
+				ratingScale: surveyConfig.ratingScale ?? surveyConfig.rating_scale,
+				showFeedbackInput:
+					surveyConfig.showFeedbackInput ?? surveyConfig.show_feedback_input,
+				showSubmitButton:
+					surveyConfig.showSubmitButton ?? surveyConfig.show_submit_button,
+				autoSubmitOnSelect:
+					surveyConfig.autoSubmitOnSelect ?? surveyConfig.auto_submit_on_select,
+				showTitle: surveyConfig.showTitle ?? surveyConfig.show_title,
+				showDescription:
+					surveyConfig.showDescription ?? surveyConfig.show_description,
 				customQuestions: surveyConfig.customQuestions || surveyConfig.questions,
 				pages: surveyConfig.pages,
 				...displayOptions,
@@ -7966,13 +8188,20 @@
 
 			const surveyWidget = this.createWidget('survey', {
 				surveyId: normalizedOptions.surveyId,
-				surveyType: normalizedOptions.surveyType || normalizedOptions.type || 'nps',
+				surveyType:
+					normalizedOptions.surveyType || normalizedOptions.type || 'nps',
 				position: normalizedOptions.position || 'bottom-right',
 				theme: normalizedOptions.theme || this.config.theme || 'light',
 				title: normalizedOptions.title,
 				description: normalizedOptions.description,
 				lowLabel: normalizedOptions.lowLabel,
 				highLabel: normalizedOptions.highLabel,
+				ratingScale: normalizedOptions.ratingScale ?? normalizedOptions.scale,
+				showFeedbackInput: normalizedOptions.showFeedbackInput,
+				showSubmitButton: normalizedOptions.showSubmitButton,
+				autoSubmitOnSelect: normalizedOptions.autoSubmitOnSelect,
+				showTitle: normalizedOptions.showTitle,
+				showDescription: normalizedOptions.showDescription,
 				customQuestions: normalizedOptions.customQuestions,
 				pages: normalizedOptions.pages,
 				respondentId: normalizedOptions.respondentId,
@@ -7988,7 +8217,10 @@
 		}
 
 		_isSurveyEligible(survey = {}) {
-			const shouldShow = this._getSurveyField(survey, ['shouldShow', 'should_show']);
+			const shouldShow = this._getSurveyField(survey, [
+				'shouldShow',
+				'should_show',
+			]);
 			if (typeof shouldShow === 'boolean') {
 				return shouldShow;
 			}
@@ -8010,7 +8242,10 @@
 				return eligible;
 			}
 
-			const isAnswered = this._getSurveyField(survey, ['isAnswered', 'is_answered']);
+			const isAnswered = this._getSurveyField(survey, [
+				'isAnswered',
+				'is_answered',
+			]);
 			if (typeof isAnswered === 'boolean') {
 				return !isAnswered;
 			}
@@ -8045,7 +8280,10 @@
 				return eligibilityReason;
 			}
 
-			const isAnswered = this._getSurveyField(survey, ['isAnswered', 'is_answered']);
+			const isAnswered = this._getSurveyField(survey, [
+				'isAnswered',
+				'is_answered',
+			]);
 			if (isAnswered === true) {
 				return 'already_answered';
 			}
@@ -8054,17 +8292,16 @@
 		}
 
 		_normalizeSurveyConfig(survey = {}) {
-			const firstPage = Array.isArray(survey.pages) && survey.pages.length > 0
-				? survey.pages[0]
-				: null;
+			const firstPage =
+				Array.isArray(survey.pages) && survey.pages.length > 0
+					? survey.pages[0]
+					: null;
 			const ratingConfig = firstPage
 				? firstPage.rating_config || firstPage.ratingConfig || {}
 				: {};
 
 			const inferredType =
-				survey.type ||
-				this._inferSurveyTypeFromPage(firstPage) ||
-				'nps';
+				survey.type || this._inferSurveyTypeFromPage(firstPage) || 'nps';
 
 			return {
 				...survey,
@@ -8078,22 +8315,27 @@
 					survey.reason ||
 					(survey.eligibility ? survey.eligibility.reason : undefined),
 				title:
-					survey.title ||
-					survey.name ||
-					(firstPage ? firstPage.title : null),
+					survey.title || survey.name || (firstPage ? firstPage.title : null),
 				description:
-					survey.description ||
-					(firstPage ? firstPage.description : null),
+					survey.description || (firstPage ? firstPage.description : null),
 				lowLabel:
-					survey.lowLabel ||
-					survey.low_label ||
-					ratingConfig.low_label ||
-					null,
+					survey.lowLabel || survey.low_label || ratingConfig.low_label || null,
 				highLabel:
 					survey.highLabel ||
 					survey.high_label ||
 					ratingConfig.high_label ||
 					null,
+				ratingScale:
+					survey.ratingScale ?? survey.rating_scale ?? ratingConfig.scale ?? null,
+				showFeedbackInput:
+					survey.showFeedbackInput ?? survey.show_feedback_input ?? null,
+				showSubmitButton:
+					survey.showSubmitButton ?? survey.show_submit_button ?? null,
+				autoSubmitOnSelect:
+					survey.autoSubmitOnSelect ?? survey.auto_submit_on_select ?? null,
+				showTitle: survey.showTitle ?? survey.show_title ?? null,
+				showDescription:
+					survey.showDescription ?? survey.show_description ?? null,
 				customQuestions: survey.customQuestions || survey.questions || [],
 				pages: this._normalizeSurveyPages(survey.pages || []),
 			};
@@ -8106,17 +8348,17 @@
 
 			return pages
 				.map((page, index) => ({
-				id: page.id || `page_${index}`,
-				type: page.type || 'rating',
-				title: page.title || '',
-				description: page.description || '',
-				required: page.required !== false,
-				position: page.position ?? index,
-				ratingConfig: page.ratingConfig || page.rating_config || null,
-				multipleChoiceConfig:
-					page.multipleChoiceConfig || page.multiple_choice_config || null,
-				linkConfig: page.linkConfig || page.link_config || null,
-				afterThisPage: page.afterThisPage || page.after_this_page || null,
+					id: page.id || `page_${index}`,
+					type: page.type || 'rating',
+					title: page.title || '',
+					description: page.description || '',
+					required: page.required !== false,
+					position: page.position ?? index,
+					ratingConfig: page.ratingConfig || page.rating_config || null,
+					multipleChoiceConfig:
+						page.multipleChoiceConfig || page.multiple_choice_config || null,
+					linkConfig: page.linkConfig || page.link_config || null,
+					afterThisPage: page.afterThisPage || page.after_this_page || null,
 				}))
 				.sort((a, b) => a.position - b.position);
 		}
@@ -8632,8 +8874,8 @@
   width: 100%;
   max-width: 580px;
   max-height: 90vh;
-  background: #DBEAFE;
-  border-radius: var(--radius-4xl);
+  background: var(--color-primary-light);
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   transform: scale(0.95) translateY(20px);
@@ -8650,28 +8892,30 @@
   position: absolute;
   top: var(--spacing-4);
   right: var(--spacing-4);
-  background: rgba(255, 255, 255, 0.9);
+  background: none;
   border: none;
-  font-size: 24px;
   cursor: pointer;
   color: var(--color-neutral-500);
   padding: 0;
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-full);
+  border-radius: 8px;
   transition: all var(--transition-base);
   line-height: 1;
   z-index: 10;
-  box-shadow: var(--shadow-md);
 }
 
 .changelog-modal-close:hover {
-  background: var(--color-white);
+  background: var(--color-neutral-100);
   color: var(--color-neutral-900);
-  transform: scale(1.05);
+}
+
+.changelog-modal-close svg {
+  width: 18px;
+  height: 18px;
 }
 
 .changelog-modal-content {
@@ -8725,7 +8969,7 @@
   height: auto;
   display: block;
   object-fit: cover;
-  border-radius: var(--radius-xl);
+  border-radius: 8px;
   border: 2px solid var(--color-primary);
   box-shadow: 0 4px 20px rgba(21, 94, 239, 0.2);
 }
@@ -8738,7 +8982,7 @@
 .changelog-popup-title {
   margin: 0 0 var(--spacing-3);
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-snug);
   color: var(--color-neutral-900);
 }
@@ -8756,11 +9000,11 @@
   justify-content: center;
   padding: var(--spacing-3) var(--spacing-8);
   font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
   color: var(--color-white);
   background: var(--color-primary);
   border: 1px solid var(--color-primary);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   cursor: pointer;
   transition: all var(--transition-base);
   font-family: inherit;
@@ -8823,7 +9067,7 @@
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   padding: var(--spacing-2) var(--spacing-3);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
   font-family: inherit;
 }
@@ -8869,7 +9113,7 @@
   max-width: 460px;
   max-height: 85vh;
   background: var(--color-white);
-  border-radius: var(--radius-2xl);
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   transform: scale(0.95) translateY(20px);
@@ -8896,7 +9140,7 @@
 
 .changelog-list-modal-header h2 {
   margin: 0;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
 }
@@ -8906,16 +9150,21 @@
   border: none;
   cursor: pointer;
   color: var(--color-neutral-500);
-  padding: var(--spacing-1);
-  width: 28px;
-  height: 28px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
 }
 
+.changelog-list-modal-close svg {
+  width: 18px;
+  height: 18px;
+}
+
 .changelog-list-modal-close:hover {
   background: var(--color-neutral-100);
   color: var(--color-neutral-900);
@@ -8955,7 +9204,7 @@
 .changelog-list-item-image {
   width: 100%;
   margin-bottom: var(--spacing-2);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--color-border);
 }
@@ -9042,7 +9291,7 @@
 
   .changelog-modal-container {
     max-width: 100%;
-    border-radius: var(--radius-3xl);
+    border-radius: 10px;
   }
 
   .changelog-popup-image {
@@ -9054,7 +9303,7 @@
   }
 
   .changelog-popup-title {
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-lg);
   }
 
   .changelog-popup-description {
@@ -9078,7 +9327,7 @@
   .changelog-list-modal-container {
     max-width: 100%;
     max-height: 90vh;
-    border-radius: var(--radius-2xl);
+    border-radius: 10px;
   }
 
   .changelog-list-item {
@@ -9097,7 +9346,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-2);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: none;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
@@ -9121,7 +9370,7 @@
   background: var(--color-primary);
   color: var(--color-white);
   border: 1px solid var(--color-primary);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   height: 44px;
@@ -9188,7 +9437,7 @@
   height: 36px;
   border: none;
   background: none;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   cursor: pointer;
   color: var(--color-text-secondary);
   transition: all var(--transition-base);
@@ -9203,7 +9452,7 @@
 .sdk-input {
   width: 100%;
   height: 44px;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
   padding: 10px 14px;
   font-size: var(--font-size-md);
@@ -9234,7 +9483,7 @@
   width: 100%;
   min-height: 120px;
   resize: vertical;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
   padding: 10px 14px;
   font-size: var(--font-size-md);
@@ -9259,7 +9508,7 @@
 .sdk-select {
   width: 100%;
   height: 44px;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
   padding: 10px 14px;
   font-size: var(--font-size-md);
@@ -9297,7 +9546,7 @@
 
 .sdk-card {
   background: var(--color-white);
-  border-radius: var(--radius-xl);
+  border-radius: 10px;
   box-shadow: var(--shadow-base);
   overflow: hidden;
 }
@@ -9358,7 +9607,7 @@
   max-width: 580px;
   max-height: 90vh;
   background: var(--color-white);
-  border-radius: var(--radius-4xl);
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: var(--shadow-2xl);
   transform: scale(0.95) translateY(20px);
@@ -9394,15 +9643,18 @@
 .sdk-close-btn {
   background: none;
   border: none;
-  padding: var(--spacing-2);
+  padding: 0;
   cursor: pointer;
   color: var(--color-neutral-500);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  width: 20px;
+  height: 20px;
+  border-radius: 8px;
   transition: all var(--transition-base);
   line-height: 1;
+  flex-shrink: 0;
 }
 
 .sdk-close-btn:hover {
@@ -9410,6 +9662,11 @@
   color: var(--color-neutral-900);
 }
 
+.sdk-close-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
 .sdk-avatar {
   display: flex;
   align-items: center;
@@ -9496,7 +9753,7 @@
   right: var(--spacing-6);
   z-index: var(--z-notification);
   background: var(--color-white);
-  border-radius: var(--radius-xl);
+  border-radius: 10px;
   box-shadow: var(--shadow-lg);
   min-width: 320px;
   animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -9586,7 +9843,7 @@
   
   .sdk-modal-container {
     max-width: 100%;
-    border-radius: var(--spacing-5);
+    border-radius: 10px;
   }
   
   .sdk-notification {
@@ -9846,7 +10103,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: var(--radius-2xl);
+  border-radius: 10px;
 }
 
 .feedback-panel-header {
@@ -10215,6 +10472,17 @@
   display: none;
 }
 
+.messenger-compose-attach {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+
+.messenger-compose-attach svg {
+  width: 20px;
+  height: 20px;
+}
+
 /* ========================================
    TYPING INDICATOR
    ======================================== */
@@ -10244,17 +10512,9 @@
   animation: messenger-typing-bounce 1.4s infinite ease-in-out;
 }
 
-.messenger-typing-dots span:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.messenger-typing-dots span:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.messenger-typing-dots span:nth-child(3) {
-  animation-delay: 0s;
-}
+.messenger-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.messenger-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+.messenger-typing-dots span:nth-child(3) { animation-delay: 0s; }
 
 .messenger-typing-text {
   font-size: var(--font-size-xs);
@@ -10272,12 +10532,12 @@
 
 .messenger-nav-tabs {
   display: flex;
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2) 0;
   gap: var(--spacing-1);
 }
 
 .messenger-nav-footer {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: 2px var(--spacing-2) var(--spacing-2);
   text-align: center;
 }
 
@@ -10309,12 +10569,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  padding: var(--spacing-2) var(--spacing-1);
+  gap: 2px;
+  padding: var(--spacing-1) var(--spacing-1);
   background: none;
   border: none;
   cursor: pointer;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
   position: relative;
 }
@@ -10326,10 +10586,21 @@
 .messenger-nav-icon {
   color: var(--color-text-secondary);
   transition: color var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.messenger-nav-icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
 }
 
 .messenger-nav-label {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   transition: color var(--transition-base);
@@ -10381,7 +10652,7 @@
 
 .messenger-prechat-card {
   background: var(--color-white);
-  border-radius: var(--radius-2xl);
+  border-radius: 10px;
   padding: var(--spacing-6);
   width: 100%;
   max-width: 360px;
@@ -11472,10 +11743,11 @@
 .feedback-survey {
   position: fixed;
   z-index: var(--z-modal);
-  background: var(--color-white);
-  border-radius: var(--radius-2xl);
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-  padding: var(--spacing-6);
+  background: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-8);
   min-width: 320px;
   max-width: 400px;
   font-family: inherit;
@@ -11495,56 +11767,77 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  width: min(680px, calc(100vw - 24px));
+  max-width: 680px;
 }
 
 .feedback-survey-bottom {
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  border-radius: 10px 10px 0 0;
   max-width: none;
 }
 
 .feedback-survey-close {
   position: absolute;
-  top: var(--spacing-3);
-  right: var(--spacing-3);
+  top: var(--spacing-4);
+  right: var(--spacing-4);
   background: none;
   border: none;
   cursor: pointer;
   color: var(--color-neutral-500);
   padding: 0;
-  width: 28px;
-  height: 28px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
 }
 
+.feedback-survey-close svg {
+  width: 18px;
+  height: 18px;
+}
+
 .feedback-survey-close:hover {
   background: var(--color-neutral-100);
   color: var(--color-neutral-900);
 }
 
+.feedback-survey-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
 .feedback-survey-title {
   margin: 0 0 var(--spacing-2) 0;
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
-  padding-right: var(--spacing-6);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  padding-right: var(--spacing-12);
   color: var(--color-text-primary);
 }
 
 .feedback-survey-description {
   color: var(--color-text-secondary);
-  margin: 0 0 var(--spacing-5) 0;
-  font-size: var(--font-size-base);
+  margin: 0 0 var(--spacing-4) 0;
+  font-size: var(--font-size-md);
   line-height: var(--line-height-relaxed);
 }
 
+.feedback-survey-description-primary .feedback-survey-description {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  padding-right: var(--spacing-12);
+}
+
 .feedback-survey-content {
-  margin-bottom: var(--spacing-4);
+  margin-bottom: var(--spacing-3);
 }
 
 /* ========================================
@@ -11561,7 +11854,7 @@
   width: 28px;
   height: 36px;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   background: var(--color-surface);
   cursor: pointer;
   font-size: var(--font-size-sm);
@@ -11572,8 +11865,8 @@
 }
 
 .feedback-survey-nps-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-white);
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
 }
 
 .feedback-survey-nps-btn.selected {
@@ -11596,7 +11889,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 36px;
+  font-size: 28px;
   transition: transform var(--transition-fast);
   padding: var(--spacing-2);
 }
@@ -11635,8 +11928,8 @@
 }
 
 .feedback-survey-ces-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-white);
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
 }
 
 .feedback-survey-ces-btn.selected {
@@ -11645,6 +11938,56 @@
   color: var(--color-white);
 }
 
+.feedback-survey-rating-scale {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-white);
+}
+
+.feedback-survey-rating-scale-btn {
+  flex: 1;
+  width: auto;
+  height: auto;
+  min-height: 64px;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--color-neutral-300);
+  border-radius: 0;
+  background: var(--color-white);
+  cursor: pointer;
+  font-size: clamp(16px, 3vw, 22px);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black);
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast);
+  position: relative;
+}
+
+.feedback-survey-rating-scale-btn:last-child {
+  border-right: none;
+}
+
+.feedback-survey-rating-scale-btn:hover {
+  background: var(--color-neutral-100);
+}
+
+.feedback-survey-rating-scale-btn:focus-visible {
+  outline: none;
+  z-index: 1;
+  box-shadow: inset 0 0 0 3px var(--color-primary);
+}
+
+.feedback-survey-rating-scale-btn.selected {
+  background: var(--color-primary-light);
+  color: var(--color-primary-active);
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+
 .feedback-survey-labels {
   display: flex;
   justify-content: space-between;
@@ -11653,6 +11996,14 @@
   color: var(--color-text-tertiary);
 }
 
+.feedback-survey-rating-scale + .feedback-survey-labels {
+  margin-top: var(--spacing-3);
+  padding: 0 var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-tertiary);
+}
+
 /* ========================================
    FREQUENCY
    ======================================== */
@@ -11677,8 +12028,8 @@
 }
 
 .feedback-survey-freq-btn:hover {
-  border-color: var(--color-primary);
-  background: var(--color-white);
+  background: var(--color-neutral-100);
+  border-color: var(--color-border);
 }
 
 .feedback-survey-freq-btn.selected {
@@ -11835,7 +12186,7 @@
   border: 1px solid var(--color-primary);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
   cursor: pointer;
   font-family: inherit;
   transition: all var(--transition-base);
@@ -11861,7 +12212,7 @@
   color: var(--color-white);
   padding: var(--spacing-3) var(--spacing-5);
   border-radius: var(--radius-xl);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   z-index: var(--z-notification);
   box-shadow: var(--shadow-lg);
@@ -11881,6 +12232,7 @@
 @media (max-width: 768px) {
   .feedback-survey {
     min-width: 300px;
+    padding: var(--spacing-6);
   }
 
   .feedback-survey-bottom {
@@ -11894,7 +12246,24 @@
   }
 
   .feedback-survey-csat-btn {
-    font-size: 32px;
+    font-size: 24px;
+  }
+
+  .feedback-survey-title {
+    font-size: var(--font-size-lg);
+  }
+
+  .feedback-survey-description-primary .feedback-survey-description {
+    font-size: var(--font-size-md);
+  }
+
+  .feedback-survey-rating-scale-btn {
+    min-height: 52px;
+    font-size: clamp(14px, 6vw, 18px);
+  }
+
+  .feedback-survey-rating-scale + .feedback-survey-labels {
+    font-size: var(--font-size-xs);
   }
 }
 `;