@product7/feedback-sdk 1.0.5 → 1.0.7

package/dist/feedback-sdk.js

@@ -591,12 +591,14 @@
 				theme: this.sdk.config.theme,
 				boardId: this.sdk.config.boardId,
 				autoShow: false,
+				showBackdrop: true,
 				customStyles: {},
 				...options,
 			};
 
 			this.element = null;
-			this.modalElement = null;
+			this.panelElement = null;
+			this.backdropElement = null;
 			this.mounted = false;
 			this.destroyed = false;
 
@@ -654,23 +656,47 @@
 			return this;
 		}
 
-		openModal() {
+		openPanel() {
 			this.state.isOpen = true;
-			this._renderModal();
+			this._renderPanel();
+			
+			requestAnimationFrame(() => {
+				if (this.panelElement) {
+					this.panelElement.classList.add('open');
+				}
+				if (this.backdropElement) {
+					this.backdropElement.classList.add('show');
+				}
+			});
 		}
 
-		closeModal() {
-			this.state.isOpen = false;
-			if (this.modalElement) {
-				this.modalElement.remove();
-				this.modalElement = null;
+		closePanel() {
+			if (this.panelElement) {
+				this.panelElement.classList.remove('open');
+			}
+			if (this.backdropElement) {
+				this.backdropElement.classList.remove('show');
 			}
-			this._resetForm();
+
+			setTimeout(() => {
+				this.state.isOpen = false;
+				if (this.panelElement && this.panelElement.parentNode) {
+					this.panelElement.parentNode.removeChild(this.panelElement);
+					this.panelElement = null;
+				}
+				if (this.backdropElement && this.backdropElement.parentNode) {
+					this.backdropElement.parentNode.removeChild(this.backdropElement);
+					this.backdropElement = null;
+				}
+				this._resetForm();
+			}, 300);
 		}
 
 		async submitFeedback() {
 			if (this.state.isSubmitting) return;
 
+			this._hideError();
+
 			try {
 				this.state.isSubmitting = true;
 				this._updateSubmitButton();
@@ -691,7 +717,7 @@
 				const response = await this.apiService.submitFeedback(payload);
 
 				this._showSuccessMessage();
-				this.closeModal();
+				this.closePanel();
 
 				this.sdk.eventBus.emit('feedback:submitted', {
 					widget: this,
@@ -717,7 +743,7 @@
 			if (this.destroyed) return;
 
 			this.onDestroy();
-			this.closeModal();
+			this.closePanel();
 
 			if (this.element && this.element.parentNode) {
 				this.element.parentNode.removeChild(this.element);
@@ -740,38 +766,46 @@
 		}
 
 		_bindMethods() {
-			this.openModal = this.openModal.bind(this);
-			this.closeModal = this.closeModal.bind(this);
+			this.openPanel = this.openPanel.bind(this);
+			this.closePanel = this.closePanel.bind(this);
 			this.submitFeedback = this.submitFeedback.bind(this);
 		}
 
-		_renderModal() {
-			if (this.modalElement) return;
+		_renderPanel() {
+			if (this.panelElement) return;
 
-			this.modalElement = document.createElement('div');
-			this.modalElement.className = `feedback-modal theme-${this.options.theme}`;
-			this.modalElement.innerHTML = this._getModalHTML();
+			if (this.options.showBackdrop) {
+				this.backdropElement = document.createElement('div');
+				this.backdropElement.className = 'feedback-panel-backdrop';
+				document.body.appendChild(this.backdropElement);
 
-			document.body.appendChild(this.modalElement);
-			this._attachModalEvents();
+				this.backdropElement.addEventListener('click', this.closePanel);
+			}
+
+			this.panelElement = document.createElement('div');
+			this.panelElement.className = `feedback-panel theme-${this.options.theme}`;
+			this.panelElement.innerHTML = this._getPanelHTML();
+
+			document.body.appendChild(this.panelElement);
+			this._attachPanelEvents();
 
-			const firstInput = this.modalElement.querySelector('input, textarea');
+			const firstInput = this.panelElement.querySelector('input, textarea');
 			if (firstInput) {
-				setTimeout(() => firstInput.focus(), 100);
+				setTimeout(() => firstInput.focus(), 350);
 			}
 		}
 
-		_getModalHTML() {
+		_getPanelHTML() {
 			return `
-      <div class="feedback-modal-overlay">
-        <div class="feedback-modal-content">
-          <div class="feedback-modal-header">
-            <h3>Send Feedback</h3>
-            <button class="feedback-modal-close" type="button">&times;</button>
-          </div>
+      <div class="feedback-panel-content">
+        <div class="feedback-panel-header">
+          <h3>Send Feedback</h3>
+          <button class="feedback-panel-close" type="button" aria-label="Close">&times;</button>
+        </div>
+        <div class="feedback-panel-body">
           <form class="feedback-form">
             <div class="feedback-form-group">
-              <label for="feedback-title-${this.id}">Title</label>
+              <label for="feedback-title-${this.id}">Title (optional)</label>
               <input 
                 type="text" 
                 id="feedback-title-${this.id}" 
@@ -785,62 +819,59 @@
               <textarea 
                 id="feedback-content-${this.id}" 
                 name="content" 
-                placeholder="Tell us more about your feedback..."
+                placeholder="Tell us what you think..."
                 required
               >${this.state.content}</textarea>
             </div>
+            <div class="feedback-error" role="alert"></div>
             <div class="feedback-form-actions">
-              <button type="button" class="feedback-btn feedback-btn-cancel">Cancel</button>
               <button type="submit" class="feedback-btn feedback-btn-submit">
                 ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
               </button>
             </div>
-            <div class="feedback-error" style="display: none;"></div>
           </form>
         </div>
       </div>
     `;
 		}
 
-		_attachModalEvents() {
-			const modal = this.modalElement;
-
-			modal
-				.querySelector('.feedback-modal-close')
-				.addEventListener('click', this.closeModal);
-			modal
-				.querySelector('.feedback-btn-cancel')
-				.addEventListener('click', this.closeModal);
-			modal
-				.querySelector('.feedback-modal-overlay')
-				.addEventListener('click', (e) => {
-					if (e.target === e.currentTarget) {
-						this.closeModal();
-					}
-				});
+		_attachPanelEvents() {
+			const panel = this.panelElement;
+
+			panel
+				.querySelector('.feedback-panel-close')
+				.addEventListener('click', this.closePanel);
 
-			const form = modal.querySelector('.feedback-form');
+			const form = panel.querySelector('.feedback-form');
 			form.addEventListener('submit', (e) => {
 				e.preventDefault();
 				this.submitFeedback();
 			});
 
-			modal
+			panel
 				.querySelector('input[name="title"]')
 				.addEventListener('input', (e) => {
 					this.state.title = e.target.value;
 				});
 
-			modal
+			panel
 				.querySelector('textarea[name="content"]')
 				.addEventListener('input', (e) => {
 					this.state.content = e.target.value;
 				});
+
+			const handleEscape = (e) => {
+				if (e.key === 'Escape') {
+					this.closePanel();
+					document.removeEventListener('keydown', handleEscape);
+				}
+			};
+			document.addEventListener('keydown', handleEscape);
 		}
 
 		_updateSubmitButton() {
-			if (this.modalElement) {
-				const submitBtn = this.modalElement.querySelector('.feedback-btn-submit');
+			if (this.panelElement) {
+				const submitBtn = this.panelElement.querySelector('.feedback-btn-submit');
 				if (submitBtn) {
 					submitBtn.textContent = this.state.isSubmitting
 						? 'Sending...'
@@ -851,15 +882,21 @@
 		}
 
 		_showError(message) {
-			if (this.modalElement) {
-				const errorElement = this.modalElement.querySelector('.feedback-error');
-				errorElement.textContent = message;
-				errorElement.style.display = 'block';
-				setTimeout(() => {
-					if (errorElement) {
-						errorElement.style.display = 'none';
-					}
-				}, 5000);
+			if (this.panelElement) {
+				const errorElement = this.panelElement.querySelector('.feedback-error');
+				if (errorElement) {
+					errorElement.textContent = message;
+					errorElement.classList.add('show');
+				}
+			}
+		}
+
+		_hideError() {
+			if (this.panelElement) {
+				const errorElement = this.panelElement.querySelector('.feedback-error');
+				if (errorElement) {
+					errorElement.classList.remove('show');
+				}
 			}
 		}
 
@@ -868,26 +905,29 @@
 			notification.className = 'feedback-success-notification';
 			notification.innerHTML = `
       <div class="feedback-success-content">
-        <span>✓ Feedback submitted successfully!</span>
-        <button class="feedback-success-close">&times;</button>
+        <div class="feedback-success-icon">✓</div>
+        <span>Feedback submitted successfully!</span>
+        <button class="feedback-success-close" aria-label="Close">&times;</button>
       </div>
     `;
 
 			document.body.appendChild(notification);
 
-			setTimeout(() => {
+			const closeBtn = notification.querySelector('.feedback-success-close');
+			const closeNotification = () => {
 				if (notification.parentNode) {
-					notification.parentNode.removeChild(notification);
+					notification.style.opacity = '0';
+					setTimeout(() => {
+						if (notification.parentNode) {
+							notification.parentNode.removeChild(notification);
+						}
+					}, 300);
 				}
-			}, 3000);
+			};
 
-			notification
-				.querySelector('.feedback-success-close')
-				.addEventListener('click', () => {
-					if (notification.parentNode) {
-						notification.parentNode.removeChild(notification);
-					}
-				});
+			closeBtn.addEventListener('click', closeNotification);
+
+			setTimeout(closeNotification, 4000);
 		}
 
 		_resetForm() {
@@ -904,13 +944,21 @@
 					`theme-${this.options.theme}`
 				);
 			}
-			if (this.modalElement) {
-				this.modalElement.className = this.modalElement.className.replace(
+			if (this.panelElement) {
+				this.panelElement.className = this.panelElement.className.replace(
 					/theme-\w+/,
 					`theme-${this.options.theme}`
 				);
 			}
 		}
+
+		openModal() {
+			this.openPanel();
+		}
+
+		closeModal() {
+			this.closePanel();
+		}
 	}
 
 	class ButtonWidget extends BaseWidget {
@@ -940,7 +988,7 @@
 
 		_attachEvents() {
 			const button = this.element.querySelector('.feedback-trigger-btn');
-			button.addEventListener('click', this.openModal);
+			button.addEventListener('click', this.openPanel);
 
 			button.addEventListener('mouseenter', () => {
 				if (!this.state.isSubmitting) {
@@ -1541,7 +1589,7 @@
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
-  transition: all 0.3s duration;
+  transition: all 0.3s ease;
   color: white;
   background: #155EEF;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
@@ -1562,109 +1610,133 @@
   outline-offset: 2px;
 }
 
-.feedback-modal {
+/* Side Panel Styles */
+.feedback-panel {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  bottom: 80px;
+  right: 24px;
+  width: 420px;
+  max-height: 500px;
   z-index: 1000000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  transform: translateX(calc(100% + 24px));
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: inherit;
 }
 
-.feedback-modal-overlay {
-  position: absolute;
+.feedback-panel.open {
+  transform: translateX(0);
+}
+
+.feedback-panel-backdrop {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  background: rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 999999;
 }
 
-.feedback-modal-content {
+.feedback-panel-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.feedback-panel-content {
   background: white;
-  border-radius: 8px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  min-width: 460px;
-  max-width: 500px;
-  width: 100%;
-  padding: 16px;
-  max-height: 85vh;
-  overflow-y: hidden;
-  position: relative;
+  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);
 }
 
-.feedback-modal.theme-dark .feedback-modal-content {
+.feedback-panel.theme-dark .feedback-panel-content {
   background: #1F2937;
   color: white;
 }
 
-.feedback-modal-header {
+.feedback-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid #D1D5DB;
+  padding: 24px;
+  border-bottom: 1px solid #E5E7EB;
   flex-shrink: 0;
 }
 
-.feedback-modal.theme-dark .feedback-modal-header {
+.feedback-panel.theme-dark .feedback-panel-header {
   border-bottom-color: #374151;
 }
 
-.feedback-modal-header h3 {
+.feedback-panel-header h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
+  color: #111827;
 }
 
-.feedback-modal-close {
+.feedback-panel.theme-dark .feedback-panel-header h3 {
+  color: white;
+}
+
+.feedback-panel-close {
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
   color: #6B7280;
-  padding: 0;
-  width: 24px;
-  height: 24px;
+  padding: 4px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  border-radius: 6px;
+  transition: all 0.2s ease;
 }
 
-.feedback-modal-close:hover {
-  color: #374151;
+.feedback-panel-close:hover {
+  background: #F3F4F6;
+  color: #111827;
 }
 
-.feedback-modal-close:focus-visible {
+.feedback-panel-close:focus-visible {
   outline: 2px solid #155EEF;
   outline-offset: 2px;
 }
 
-.feedback-modal.theme-dark .feedback-modal-close {
+.feedback-panel.theme-dark .feedback-panel-close {
   color: #9CA3AF;
 }
 
-.feedback-modal.theme-dark .feedback-modal-close:hover {
-  color: #D1D5DB;
+.feedback-panel.theme-dark .feedback-panel-close:hover {
+  background: #374151;
+  color: white;
+}
+
+.feedback-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
 }
 
 .feedback-form {
-  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .feedback-form-group {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 20px;
 }
 
 .feedback-form-group:last-child {
@@ -1678,19 +1750,19 @@
   color: #374151;
 }
 
-.feedback-modal.theme-dark .feedback-form-group label {
+.feedback-panel.theme-dark .feedback-form-group label {
   color: #D1D5DB;
 }
 
 .feedback-form-group input {
-  height: 40px;
+  height: 44px;
   width: 100%;
-  border-radius: 6px;
+  border-radius: 8px;
   border: 1px solid #D1D5DB;
-  padding: 2px 12px;
-  font-size: 14px;
+  padding: 10px 14px;
+  font-size: 15px;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.5;
   color: #1F2937;
   font-family: inherit;
   outline: none;
@@ -1698,13 +1770,13 @@
 }
 
 .feedback-form-group input::placeholder {
-  font-size: 14px;
-  color: #6B7280;
+  font-size: 15px;
+  color: #9CA3AF;
 }
 
 .feedback-form-group input:focus {
-  border-color: #84ADFF;
-  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(41, 112, 255, 0.2);
+  border-color: #155EEF;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
 }
 
 .feedback-form-group input:focus-visible {
@@ -1712,15 +1784,15 @@
 }
 
 .feedback-form-group textarea {
-  min-height: 100px;
+  min-height: 200px;
   width: 100%;
-  resize: both;
-  border-radius: 6px;
+  resize: vertical;
+  border-radius: 8px;
   border: 1px solid #D1D5DB;
-  padding: 2px 12px;
-  font-size: 14px;
+  padding: 10px 14px;
+  font-size: 15px;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.5;
   color: #1F2937;
   font-family: inherit;
   outline: none;
@@ -1728,37 +1800,42 @@
 }
 
 .feedback-form-group textarea::placeholder {
-  font-size: 14px;
-  color: #6B7280;
+  font-size: 15px;
+  color: #9CA3AF;
 }
 
 .feedback-form-group textarea:focus {
-  border-color: #84ADFF;
-  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(41, 112, 255, 0.2);
+  border-color: #155EEF;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
 }
 
 .feedback-form-group textarea:focus-visible {
   outline: none;
 }
 
-.feedback-modal.theme-dark .feedback-form-group input,
-.feedback-modal.theme-dark .feedback-form-group textarea {
+.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-radius: 6px;
+  border-radius: 8px;
   border: none;
-  height: 40px;
-  padding: 2px 16px;
-  font-size: 14px;
+  height: 44px;
+  padding: 10px 18px;
+  font-size: 15px;
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
@@ -1766,7 +1843,7 @@
 }
 
 .feedback-btn:disabled {
-  opacity: 0.7;
+  opacity: 0.6;
   cursor: not-allowed;
 }
 
@@ -1778,10 +1855,15 @@
 .feedback-btn-submit {
   background: #155EEF;
   color: white;
+  width: 100%;
 }
 
 .feedback-btn-submit:hover:not(:disabled) {
-  background: #004EEB;
+  background: #1A56DB;
+}
+
+.feedback-btn-submit:active:not(:disabled) {
+  background: #1E429F;
 }
 
 .feedback-btn-cancel {
@@ -1796,103 +1878,84 @@
   color: #374151;
 }
 
-.feedback-modal.theme-dark .feedback-btn-cancel {
+.feedback-panel.theme-dark .feedback-btn-cancel {
   color: #D1D5DB;
   border-color: #4B5563;
 }
 
-.feedback-modal.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
+.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {
   background: #374151;
 }
 
 .feedback-form-actions {
   display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 16px;
-  padding-top: 4px;
-}
-
-.feedback-loading {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  mask: radial-gradient(transparent 62%, white 65%);
-  -webkit-mask: radial-gradient(transparent 62%, white 65%);
-  animation: feedbackRotate 0.7s linear infinite;
-}
-
-.feedback-loading-white {
-  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.5), white);
-}
-
-.feedback-loading-blue {
-  background: conic-gradient(from 0deg, #004EEB, #eff4ff);
-}
-
-@keyframes feedbackRotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  flex-direction: column;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 24px;
 }
 
 .feedback-error {
-  color: #F04438;
+  color: #DC2626;
   font-size: 14px;
   font-weight: 400;
-  margin-top: 4px;
-  text-transform: capitalize;
-}
-
-.feedback-form-error {
-  color: #F04438;
-  font-size: 14px;
-  margin-top: 12px;
-  padding: 8px 12px;
+  margin-top: 8px;
+  padding: 12px;
   background: #FEE2E2;
   border: 1px solid #FECACA;
-  border-radius: 6px;
+  border-radius: 8px;
+  display: none;
+}
+
+.feedback-error.show {
+  display: block;
 }
 
-.feedback-modal.theme-dark .feedback-form-error {
+.feedback-panel.theme-dark .feedback-error {
   background: #7F1D1D;
   border-color: #991B1B;
   color: #FCA5A5;
 }
 
-.feedback-form-group.error input,
-.feedback-form-group.error textarea {
-  border-color: #FDA29B;
-}
-
-.feedback-form-group.error input:focus,
-.feedback-form-group.error textarea:focus {
-  border-color: #FDA29B;
-  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(253, 162, 155, 0.3);
-}
-
 .feedback-success-notification {
   position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000001;
+  top: 24px;
+  right: 24px;
+  z-index: 1000002;
   background: white;
   border: 1px solid #D1FAE5;
-  border-radius: 8px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  animation: slideInRight 0.3s ease-out;
+  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;
 }
 
 .feedback-success-content {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  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;
+}
+
 .feedback-success-content span {
-  color: #059669;
+  color: #065F46;
   font-weight: 500;
   font-size: 14px;
+  flex: 1;
 }
 
 .feedback-success-close {
@@ -1900,17 +1963,20 @@
   border: none;
   color: #6B7280;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 20px;
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 
 .feedback-success-close:hover {
+  background: #F3F4F6;
   color: #374151;
 }
 
@@ -1921,7 +1987,7 @@
 
 @keyframes slideInRight {
   from {
-    transform: translateX(100%);
+    transform: translateX(400px);
     opacity: 0;
   }
   to {
@@ -1935,56 +2001,58 @@
   to { opacity: 1; }
 }
 
-.feedback-modal {
-  animation: fadeIn 0.2s ease-out;
-}
-
-.feedback-modal-content {
-  animation: slideInUp 0.3s ease-out;
+.feedback-panel-backdrop {
+  animation: fadeIn 0.3s ease;
 }
 
-@keyframes slideInUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
+@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;
   }
-  to {
+  
+  .feedback-panel.open {
     transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@media (max-width: 640px) {
-  .feedback-modal {
-    padding: 8px;
   }
   
-  .feedback-modal-content {
-    min-width: 280px;
-    max-width: 100%;
-    max-height: 95vh;
+  .feedback-panel-content {
+    border-radius: 20px 20px 0 0;
   }
   
-  .feedback-form {
-    padding: 16px;
+  .feedback-panel-header {
+    padding: 20px;
+    position: relative;
   }
   
-  .feedback-modal-header {
-    padding: 16px;
+  .feedback-panel-header::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 4px;
+    background: #D1D5DB;
+    border-radius: 2px;
   }
   
-  .feedback-modal-header h3 {
-    font-size: 15px;
+  .feedback-panel.theme-dark .feedback-panel-header::before {
+    background: #4B5563;
   }
   
-  .feedback-form-actions {
-    flex-direction: column;
-    gap: 8px;
+  .feedback-panel-body {
+    padding: 20px;
   }
   
-  .feedback-btn {
-    width: 100%;
-    height: 40px;
+  .feedback-form-group textarea {
+    min-height: 150px;
   }
   
   .feedback-widget-button {
@@ -1996,48 +2064,29 @@
     left: 16px;
   }
   
-  .feedback-trigger-btn {
-    padding: 10px 16px;
-    font-size: 13px;
-  }
-  
   .feedback-success-notification {
-    top: 8px;
-    right: 8px;
-    left: 8px;
-    max-width: none;
-  }
-
-  .feedback-form-group input {
-    height: 40px;
-    padding: 2px 12px;
-  }
-  
-  .feedback-form-group textarea {
-    min-height: 80px;
-    padding: 2px 12px;
+    top: 16px;
+    right: 16px;
+    left: 16px;
+    min-width: auto;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .feedback-trigger-btn,
   .feedback-btn,
-  .feedback-modal,
-  .feedback-modal-content,
-  .feedback-success-notification,
-  .feedback-loading {
+  .feedback-panel,
+  .feedback-panel-backdrop,
+  .feedback-success-notification {
     transition: none;
     animation: none;
   }
-  
-  .feedback-trigger-btn:hover {
-    transform: none;
-  }
 }
 
 @media print {
   .feedback-widget,
-  .feedback-modal,
+  .feedback-panel,
+  .feedback-panel-backdrop,
   .feedback-success-notification {
     display: none !important;
   }