@magicfeedback/popup-sdk 1.5.0 → 1.6.0

package/dist/index.js

@@ -185,7 +185,1775 @@ var init_font = __esm({
 var style_default;
 var init_style = __esm({
   "src/assets/style.css"() {
-    style_default = '.magicfeedback-container {\n    width: 100%;\n}\n\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message,\n.magicfeedback-container{\n    animation-duration: 0.5s;\n    animation-name: animate-fade;\n    animation-delay: 0.25s;\n    animation-fill-mode: backwards;\n\n    font-style: normal;\n    text-align: justify;\n    font-weight: 400;\n    font-size: 1.2rem;\n    color: #475569;\n    line-height: 1.5;\n}\n\n@keyframes animate-fade {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n.magicfeedback-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n}\n.magicfeedback-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n}\n\n.magicfeedback-div {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    width: 100%;\n}\n\n.magicfeedback-label {\n    margin-bottom: 25px;\n    margin-top: 20px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 1.2rem;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n\n}\n\n.magicfeedback-checkbox {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.magicfeedback-checkbox-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-bottom: 5px;\n    margin-top: 5px;\n}\n\n/* Cualificado con `div`: @magicfeedback/native reutiliza la clase "magicfeedback-radio"\n   tambi\xE9n en el <input> de cada opci\xF3n (rating), y sin el tag este selector lo capturaba\n   tambi\xE9n, rompiendo su tama\xF1o (el input pasaba a display:flex; width:100%). */\ndiv.magicfeedback-radio {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n    margin-right: 5px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.magicfeedback-checkbox-container,\n.magicfeedback-radio-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 5px 0;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.deepdots-popup input::-webkit-outer-spin-button,\n.deepdots-popup input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n}\n\n.magicfeedback-checkbox input[type="checkbox"] {\n    margin-right: 5px;\n    margin-left: 5px;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n\n.magicfeedback-checkbox label,\n.magicfeedback-radio-container label {\n    margin-left: 5px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 16px;\n    color: #212529;\n    text-align: start;\n    width: 100%;\n}\n\n.deepdots-popup p {\n    margin-bottom: 0px;\n    font-size: 12px;\n}\n\n.deepdots-popup h2 {\n    line-height: 1.66;\n    margin: 0;\n    padding: 0;\n    font-weight: 900;\n    color: #222;\n    font-family: var(--deepdots-font, \'Montserrat\');\n    font-size: 18px;\n    text-transform: uppercase;\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n/* Los controles de formulario no heredan font-family por defecto: cuando hay\n   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */\n.deepdots-popup.deepdots-has-font button,\n.deepdots-popup.deepdots-has-font input,\n.deepdots-popup.deepdots-has-font textarea,\n.deepdots-popup.deepdots-has-font select {\n    font-family: var(--deepdots-font, inherit);\n}\n\n.deepdots-popup h6 {\n    margin-bottom: 1rem;\n}\n\n.deepdots-popup input[type="date"],\n.deepdots-popup input[type="text"],\n.deepdots-popup input[type="number"],\n.deepdots-popup input[type="email"],\n.deepdots-popup input[type="password"],\n.deepdots-popup textarea,\n.deepdots-popup select {\n    box-sizing: border-box;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100%;\n    border: 2px solid #ccc; /* Default border color - you can customize this */\n    border-radius: 5px;\n    font-size: 18px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    min-height: 50px;\n    font-family: inherit;\n    -webkit-appearance: none;\n}\n\n.deepdots-popup select {\n    background-image: linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n    background-position: calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n    background-size: 5px 5px,\n    5px 5px,\n    1px 1.5em;\n    background-repeat: no-repeat;\n}\n\n.magicfeedback-boolean-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-boolean-container label {\n    margin-left: 10px;\n    font-weight: 400;\n    font-size: 16px;\n    width: 100%;\n    padding-top: 5px;\n}\n\n.magicfeedback-boolean-option {\n    margin-right: 10px;\n    margin-left: 10px;\n    width: 100%;\n    height: 38px;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid #ced4da !important;\n}\n\n.magicfeedback-boolean-option label {\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: inherit;\n}\n\n.magicfeedback-boolean-option input[type=radio] + label:hover {\n    color: #007bff;\n}\n\n.magicfeedback-boolean-option input[type=radio]:checked + label {\n    color: #007bff;\n    background-color: #cadff8;\n}\n\n/* Tama\xF1o expl\xEDcito y sin padding: un radio nativo con `padding: 20px` y solo `width` (sin\n   `height`) se dibujaba enorme en WebKit, que s\xED aplica el padding al control. Se ve\xEDa en\n   iOS (WebView de React Native y Safari) y no en Chrome. `flex: 0 0 auto` evita que el\n   contenedor flex de la opci\xF3n lo estire. */\n.deepdots-popup input[type="radio"] {\n    padding: 0;\n    margin: 10px 0 10px 15px;\n    width: 20px;\n    height: 20px;\n    min-width: 20px;\n    flex: 0 0 auto;\n    background-color: #fff;\n    box-shadow: none;\n}\n\n/* Style for focused input/select */\n.deepdots-popup input:focus, .deepdots-popup select:focus {\n    border-color: #4CAF50; /* Highlight color when focused - you can customize this */\n}\n\n/* Style for invalid input (example: validation error) */\n.deepdots-popup input.error, .deepdots-popup select.error {\n    border-color: #ff3333; /* Red color for error state - you can customize this */\n}\n\n.magicfeedback-action-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    width: 100%;\n}\n\n.magicfeedback-action-container .magicfeedback-submit {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: #1E293B;\n    color: white;\n}\n\n.magicfeedback-action-container .magicfeedback-back {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border: 0;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: transparent;\n    color: #212529;\n}\n\n\n\n/* Rating styles */\n.magicfeedback-rating {\n    width: 100%;\n}\n\n.magicfeedback-rating-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    align-items: center;\n\n    margin: 15px 5px;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-placeholder-value,\n.magicfeedback-rating-placeholder{\n    text-align: center;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n}\n\n.magicfeedback-rating-option {\n    margin: 0 0.5rem;\n    padding: 0;\n}\n\n@media (max-width: 1024px) {\n    .magicfeedback-rating-option {\n        margin: 10px 0;\n        padding: 0;\n        width: 20%;\n        display: flex;\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-placeholder-value {\n        font-size: 0.75rem;\n        margin-bottom: 1px;\n    }\n    .magicfeedback-rating-placeholder{\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-container {\n        flex-wrap: wrap;\n        justify-content: flex-start;\n    }\n}\n\n\n.magicfeedback-rating-option-label-container {\n    display: flex;\n    flex-direction: column;\n}\n\n\n.magicfeedback-rating-option-label-container label {\n    display: inline-block;\n    text-align: center;\n    margin-bottom: 0;\n    font-weight: 600;\n    font-size: 18px;\n    color: #475569;\n}\n\n.magicfeedback-rating-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n/* IMAGE STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + img {\n    cursor: pointer;\n    height: 48px;\n    width: 48px;\n}\n\n/* LABEL STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n/* CHECKED STYLES */\n.magicfeedback-rating-option-label-container input[type=radio]:checked + img {\n    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;\n    border-radius: 50%;\n}\n\n.magicfeedback-rating-number {\n    width: 100%;\n}\n.magicfeedback-rating-container,\n.magicfeedback-rating-number-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    margin: 15px 0;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa\n   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */\n.magicfeedback-rating-number-container--with-placeholder {\n    flex-wrap: wrap;\n    align-items: flex-start;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {\n    width: 100%;\n    margin-bottom: 8px;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {\n    width: auto;\n    flex: 1;\n}\n\n.magicfeedback-rating-number-option {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    width: 100%;\n}\n\n.magicfeedback-rating-number-option-row{\n    max-width: 100% !important;\n}\n\n.magicfeedback-rating-number-top-placeholder,\n.magicfeedback-rating-number-bottom-placeholder{\n    text-align: center !important;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n\n    font-size: 15px;\n    color: #475569;\n\n    width: 100%;\n    margin: auto;\n}\n\n@media (min-width: 650px) {\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {\n        margin-left: 0;\n        width: calc(100% - 10px);\n    }\n\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {\n        margin-right: 0;\n        width: calc(100% - 10px);\n    }\n}\n\n\n.magicfeedback-rating-number-option-label-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n.magicfeedback-rating-number-option-label-container label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    min-height: 50px;\n    text-align: center;\n    padding: 0;\n    border-radius: 4px;\n    border: 1px solid #ced4da;\n    background-color: rgba(246, 246, 246, 0.3);\n    transition: background-color 0.15s ease-in-out;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,\n.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {\n    color: #007bff;\n    border: 1px solid #007bff;\n    background-color: rgba(86, 168, 253, 0.29);\n}\n\n.magicfeedback-rating-number-container-column{\n    align-items: flex-start !important;\n}\n\n@media (max-width: 650px) {\n    .magicfeedback-rating-number-container-ltr {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .magicfeedback-rating-number-container-rtl {\n        justify-content: center;\n        flex-wrap: wrap-reverse;\n    }\n\n    .magicfeedback-rating-number-option {\n        max-width: 100%;\n        height: 55px;\n        margin: 5px 0;\n    }\n}\n\n.magicfeedback-rating-star {\n    width: 100%;\n}\n\n.magicfeedback-rating-star-container {\n    display: flex !important;\n    flex-direction: row !important;\n    justify-content: center !important;\n    align-items: center !important;\n    flex-wrap: wrap;\n    margin: 15px 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star {\n    float: right;\n    width: 1em;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n    font-size: 30px;\n    color: #ccc;\n    margin: 0 10px;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {\n    color: #deb217 !important;\n}\n\n.magicfeedback-rating-star-selected {\n    color: #ffc700 !important;\n}\n\n\n/* Style for multiple choice image */\n.magicfeedback-image-option-label-container:hover {\n    cursor: pointer;\n    border: 0 !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio]:checked + img,\n.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {\n    border: 1px solid #007bff !important;\n    box-shadow: 0 0 3px #007bff !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio] + img,\n.magicfeedback-image-option-label-container input[type=checkbox] + img {\n    border: 1px solid transparent !important;\n}\n\n.magicfeedback-image-option-label-container{\n    margin: 10px !important;\n    height: calc(100% - 20px) !important;\n    width: calc(100% - 20px) !important;\n}\n\n.magicfeedback-multiple-choice-image-option {\n    display: flex;\n    height: auto !important;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.magicfeedback-multiple-choice-image-label {\n    font-size: 1rem;\n}\n\n.magicfeedback-consent-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-consent-container label {\n    margin-left: 10px;\n}\n\n.magicfeedback-start-message-container {\n    /* ... add your start message container styles here ... */\n}\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message {\n    margin: 35px 5px;\n}\n\n.magicfeedback-success-message p,\n.magicfeedback-info-message p,\n.magicfeedback-start-message p {\n    font-style: normal;\n    text-align: start;\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    line-height: 1.5;\n}\n\n.magicfeedback-success-message img,\n.magicfeedback-info-message img,\n.magicfeedback-start-message img {\n    width: 400px;\n    max-width: 80%;\n    height: auto;\n    margin: 10px auto;\n}\n\n.magicfeedback-counter,\n.magicfeedback-point-system-total {\n    margin: 10px 0 0 0 !important;\n    display: flex !important;\n    justify-content: right !important;\n    align-items: center !important;\n    width: 100%;\n}\n\n.magicfeedback-skip-container {\n    background-color: transparent !important;\n    border: 0 !important;\n    color: #999999FF !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    cursor: pointer !important;\n    font-size: 0.5em !important;\n    font-weight: 400 !important;\n    box-shadow: 0 0 0 !important;\n\n    &:hover {\n        color: #0066ff;\n    }\n}\n\n.magicfeedback-skip-container input[type=checkbox] {\n    border-color: #999999FF !important;\n    border: 0 !important;\n    cursor: pointer !important;\n\n}\n\n.magicfeedback-multi-question-matrix,\n.magicfeedback-point-system,\n.magicfeedback-priority-list {\n    width: 100% !important;\n}\n\n.magicfeedback-multi-question-matrix-container,\n.magicfeedback-point-system-container,\n.magicfeedback-priority-list-container {\n    width: 100% !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-point-system-list,\n.magicfeedback-priority-list-list,\n.magicfeedback-multi-question-matrix-table {\n    width: 100% !important;\n    padding: 0 !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-multi-question-matrix {\n    position: relative !important;\n}\n\n.magicfeedback-multi-question-matrix-container {\n    overflow: auto !important;\n    padding-bottom: 10px;\n}\n\n.magicfeedback-multi-question-matrix-label{\n    text-align: left !important;\n}\n.magicfeedback-priority-list-item {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0 10px 10px;\n\n    border: 1px solid #ced4da;\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-point-system-item {\n    height: 45px;\n    margin: 5px 0 !important;\n}\n\n.magicfeedback-point-system-item label,\n.magicfeedback-priority-list-item-label {\n    font-family: inherit;\n    font-size: 18px !important;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n    padding: 0 10px 0 0;\n}\n\n.magicfeedback-point-system-input-container {\n    padding: 0 10px 0 0;\n    border-radius: 5px;\n    font-size: 14px;\n    border: 1px solid #ced4da;\n    height: 42px;\n    margin: auto 0;\n}\n\n.magicfeedback-multi-question-matrix-table thead {\n    margin-bottom: 20px;\n}\n\n.magicfeedback-multi-question-matrix-table th{\n    text-align: center;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    padding: 0  10px !important;\n}\n\n.magicfeedback-multi-question-matrix-table th,\n.magicfeedback-multi-question-matrix-table td label,\n.magicfeedback-priority-list-arrow-up,\n.magicfeedback-priority-list-arrow-down {\n    font-style: normal !important;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    color: #475569 !important;\n    cursor: pointer !important;\n    margin: 0 !important;\n    line-height: inherit;\n}\n\n.magicfeedback-multi-question-matrix-table tr {\n    align-items: center;\n    margin: 5px 0;\n}\n\n.magicfeedback-multi-question-matrix-row-tr{\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {\n    background-color: #f1f6f6; /* Light gray background for odd rows */\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {\n    background-color: #ffffff; /* White background for even rows */\n}\n\n.magicfeedback-multi-question-matrix-row-label {\n    text-align: left !important;\n}\n\n.magicfeedback-point-system-item span {\n    color: #475569 !important;\n}\n\n.magicfeedback-point-system-item input {\n    padding: 0;\n    margin: 0 !important;\n    width: auto !important;\n    min-width: 100px !important;\n    height: auto !important;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center !important;\n}\n\n.magicfeedback-multi-question-matrix-table input {\n    margin: auto !important;\n    padding: 20px !important;\n    width: 100% !important;\n    height: 15px;\n    border: 1px solid #ced4da;\n    cursor: pointer;\n}\n\n.magicfeedback-image{\n    max-height: 400px !important;\n    height: auto !important;\n    max-width: 100% !important;\n    margin: 10px auto !important;\n}\n\n.magicfeedback-error{\n    margin-top: 5px;\n}';
+    style_default = `/**
+ * NO EDITAR A MANO \u2014 generado por scripts/vendor-survey-css.mjs
+ *
+ * Copia de @magicfeedback/native@2.2.8 \u2192 dist/styles/magicfeedback-default.css
+ * (la hoja can\xF3nica del paquete, la que apunta su campo "style"), con estos cambios locales:
+ *
+ *  1. Sin el @import de Google Fonts (Nunito): no queremos una petici\xF3n externa desde la
+ *     p\xE1gina del host, y la tipograf\xEDa la decide el popup.
+ *  2. .magicfeedback-container hereda la fuente del popup (var(--deepdots-font, inherit)).
+ *  3. Los selectores desnudos (h2, p, input, textarea, select, ::placeholder, .error) van
+ *     acotados a .deepdots-popup: este CSS se inyecta en el <head> del host y sin acotar
+ *     repintar\xEDa su web.
+ *  4. El grupo .magicfeedback-radio se cualifica como div.magicfeedback-radio (la clase acaba
+ *     tambi\xE9n en el <input> del boolean).
+ *  5. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
+ *     radio nativo).
+ *
+ * Las variables --mf-* se dejan en :root a prop\xF3sito: el modal del priority-list se portea a
+ * <body>, fuera de .deepdots-popup, y ah\xED las necesita.
+ *
+ * Para subir de versi\xF3n: npm i @magicfeedback/native@<v> && node scripts/vendor-survey-css.mjs
+ */
+
+/**
+ * @magicfeedback/native - Default Styles
+ * Clean, minimal, and elegant survey rendering
+ */
+
+/* @import de Google Fonts (Nunito) eliminado al vendorizar: la fuente la pone el popup. */
+
+/* ========================================
+   CSS VARIABLES - Design SYSTEM
+   ======================================== */
+:root {
+    /* Colors - Minimal Pastel */
+    /* --mf-primary is the one source of truth for brand/accent color \u2014
+       every token below derives from it via color-mix() (or references
+       it directly) so changing this single value, here or via a
+       per-integration override, keeps hover/light/border states in
+       sync automatically instead of going stale independently. Scoped
+       to genuinely interactive/accent surfaces (buttons, selected
+       chips, focus rings) \u2014 general body text stays on its own neutral
+       scale below, not tied to the brand color. */
+    --mf-primary: #5d7bad;
+    --mf-primary-hover: color-mix(in srgb, var(--mf-primary) 85%, black);
+    --mf-primary-light: color-mix(in srgb, var(--mf-primary) 15%, white);
+    /* a translucent tint \u2014 mixed with transparent (opacity), not white,
+       so it reads as a soft shadow of the brand color rather than a
+       pastel of it. */
+    --mf-primary-border: color-mix(in srgb, var(--mf-primary) 35%, transparent);
+
+    --mf-text-primary: #1E293B;
+    --mf-text-secondary: #475569;
+    --mf-text-muted: #94A3B8;
+
+    --mf-bg-primary: #F8FAFC;
+    --mf-bg-secondary: #FFFFFF;
+    --mf-bg-hover: #EEF2F6;
+
+    --mf-border: #E2E8F0;
+    --mf-border-focus: var(--mf-primary);
+
+    --mf-success: #16A34A;
+    --mf-error: #EF4444;
+    --mf-warning: #F59E0B;
+
+    --mf-surface: #FFFFFF;
+    --mf-surface-alt: #F1F5F9;
+    --mf-accent: #38BDF8;
+
+    /* Spacing */
+    --mf-space-xs: 0.25rem;
+    --mf-space-sm: 0.5rem;
+    --mf-space-md: 0.75rem;
+    --mf-space-lg: 1rem;
+    --mf-space-xl: 1.5rem;
+
+    /* Border Radius */
+    --mf-radius-sm: 0.5rem;
+    --mf-radius-md: 0.75rem;
+    --mf-radius-lg: 1.25rem;
+    --mf-radius-full: 9999px;
+
+    /* Shadows */
+    --mf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
+    --mf-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
+    --mf-shadow-lg: 0 16px 30px rgba(15, 23, 42, 0.12);
+    --mf-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.15);
+    --mf-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
+
+    /* Typography */
+    --mf-font-sans: "Nunito", "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;
+    --mf-font-size-sm: 0.875rem;
+    --mf-font-size-base: 1rem;
+    --mf-font-size-lg: 1.125rem;
+    --mf-font-size-xl: 1.25rem;
+    --mf-line-height: 1.6;
+
+    /* Font Weights */
+    --mf-font-weight-normal: 400;
+    --mf-font-weight-medium: 500;
+    --mf-font-weight-semibold: 600;
+    --mf-font-weight-bold: 700;
+    --mf-font-weight-extrabold: 800;
+
+    /* Transitions */
+    --mf-transition: all 0.2s ease;
+    --mf-transition-fast: all 0.15s ease;
+}
+
+/* ========================================
+   ANIMATIONS
+   ======================================== */
+@keyframes mf-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mf-slide-in {
+    from {
+        opacity: 0;
+        transform: translateX(-16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes mf-scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes mf-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+
+/* ========================================
+   BASE CONTAINER
+   ======================================== */
+.magicfeedback-container {
+    /* Local: hereda la fuente del popup; --deepdots-font viene de PopupStyle.font. */
+    font-family: var(--deepdots-font, inherit);
+    color: var(--mf-text-primary);
+    line-height: var(--mf-line-height);
+    animation: mf-fade-in 0.4s ease-out;
+    border-radius: var(--mf-radius-lg);
+}
+
+/* ========================================
+   MESSAGES
+   ======================================== */
+.magicfeedback-success-message,
+.magicfeedback-info-message,
+.magicfeedback-start-message {
+    padding: var(--mf-space-lg);
+    margin: var(--mf-space-lg) 0;
+    animation: mf-scale-in 0.3s ease-out;
+}
+
+/* .magicfeedback-info-message/-start-message are set via innerHTML (see
+   renderInfoPage.ts / questions.service.ts's renderStartMessage) \u2014 whatever
+   rich text a survey author writes lands here as real HTML, not just the
+   <p>/<img> pair this used to style. Covering the rest of what a rich-text
+   editor commonly outputs (headings, lists, links, emphasis, quotes, code,
+   rules) keeps that content on the same type scale and palette as the rest
+   of the widget instead of falling back to unstyled browser defaults. */
+.magicfeedback-success-message > :first-child,
+.magicfeedback-info-message > :first-child,
+.magicfeedback-start-message > :first-child {
+    margin-top: 0;
+}
+
+.magicfeedback-success-message > :last-child,
+.magicfeedback-info-message > :last-child,
+.magicfeedback-start-message > :last-child {
+    margin-bottom: 0;
+}
+
+.magicfeedback-success-message p,
+.magicfeedback-info-message p,
+.magicfeedback-start-message p {
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-secondary);
+    margin: 0 0 var(--mf-space-md);
+    line-height: var(--mf-line-height);
+}
+
+.magicfeedback-info-message h1,
+.magicfeedback-info-message h2,
+.magicfeedback-info-message h3,
+.magicfeedback-info-message h4,
+.magicfeedback-info-message h5,
+.magicfeedback-info-message h6,
+.magicfeedback-start-message h1,
+.magicfeedback-start-message h2,
+.magicfeedback-start-message h3,
+.magicfeedback-start-message h4,
+.magicfeedback-start-message h5,
+.magicfeedback-start-message h6 {
+    color: var(--mf-text-primary);
+    font-weight: var(--mf-font-weight-bold);
+    line-height: 1.3;
+    margin: var(--mf-space-lg) 0 var(--mf-space-sm);
+    text-align: left;
+}
+
+.magicfeedback-info-message h1, .magicfeedback-start-message h1 { font-size: var(--mf-font-size-xl); }
+.magicfeedback-info-message h2, .magicfeedback-start-message h2 { font-size: var(--mf-font-size-lg); }
+.magicfeedback-info-message h3,
+.magicfeedback-info-message h4,
+.magicfeedback-info-message h5,
+.magicfeedback-info-message h6,
+.magicfeedback-start-message h3,
+.magicfeedback-start-message h4,
+.magicfeedback-start-message h5,
+.magicfeedback-start-message h6 { font-size: var(--mf-font-size-base); }
+
+.magicfeedback-info-message strong,
+.magicfeedback-info-message b,
+.magicfeedback-start-message strong,
+.magicfeedback-start-message b {
+    font-weight: var(--mf-font-weight-bold);
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-info-message a,
+.magicfeedback-start-message a {
+    color: var(--mf-primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.magicfeedback-info-message a:hover,
+.magicfeedback-start-message a:hover {
+    color: var(--mf-primary-hover);
+}
+
+.magicfeedback-info-message ul,
+.magicfeedback-info-message ol,
+.magicfeedback-start-message ul,
+.magicfeedback-start-message ol {
+    margin: 0 0 var(--mf-space-md);
+    padding-left: var(--mf-space-xl);
+    color: var(--mf-text-secondary);
+    line-height: var(--mf-line-height);
+}
+
+.magicfeedback-info-message li + li,
+.magicfeedback-start-message li + li {
+    margin-top: var(--mf-space-xs);
+}
+
+.magicfeedback-info-message blockquote,
+.magicfeedback-start-message blockquote {
+    margin: 0 0 var(--mf-space-md);
+    padding: var(--mf-space-sm) var(--mf-space-md);
+    border-left: 3px solid var(--mf-primary-border);
+    color: var(--mf-text-secondary);
+    font-style: italic;
+}
+
+.magicfeedback-info-message code,
+.magicfeedback-start-message code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.9em;
+    background: var(--mf-bg-hover);
+    padding: 0.15em 0.4em;
+    border-radius: var(--mf-radius-sm);
+}
+
+.magicfeedback-info-message pre,
+.magicfeedback-start-message pre {
+    margin: 0 0 var(--mf-space-md);
+    padding: var(--mf-space-md);
+    background: var(--mf-bg-hover);
+    border-radius: var(--mf-radius-md);
+    overflow-x: auto;
+}
+
+.magicfeedback-info-message pre code,
+.magicfeedback-start-message pre code {
+    background: none;
+    padding: 0;
+}
+
+.magicfeedback-info-message hr,
+.magicfeedback-start-message hr {
+    border: none;
+    border-top: 1px solid var(--mf-border);
+    margin: var(--mf-space-lg) 0;
+}
+
+.magicfeedback-success-message img,
+.magicfeedback-info-message img,
+.magicfeedback-start-message img {
+    max-width: 100%;
+    height: auto;
+    margin: var(--mf-space-lg) auto;
+    display: block;
+    border-radius: var(--mf-radius-md);
+}
+
+.magicfeedback-image {
+    max-height: 400px;
+    height: auto;
+    max-width: 100%;
+    margin: var(--mf-space-lg) auto;
+    display: block;
+    border-radius: var(--mf-radius-md);
+}
+
+/* ========================================
+   FORM STRUCTURE
+   ======================================== */
+.magicfeedback-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-lg);
+    padding: clamp(16px, 2.5vw, 28px);
+}
+
+.magicfeedback-questions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-xl);
+    width: 100%;
+}
+
+.magicfeedback-div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-sm);
+    animation: mf-slide-in 0.3s ease-out;
+    background: var(--mf-bg-secondary);
+    border-radius: var(--mf-radius-md);
+}
+
+/* ========================================
+   LABELS & TYPOGRAPHY
+   ======================================== */
+.magicfeedback-label {
+    font-size: var(--mf-font-size-lg);
+    font-weight: var(--mf-font-weight-bold);
+    color: var(--mf-text-primary);
+    line-height: var(--mf-line-height);
+    text-align: left;
+    letter-spacing: -0.01em;
+}
+
+.magicfeedback-sublabel {
+    font-size: var(--mf-font-size-base);
+    font-weight: var(--mf-font-weight-normal);
+    color: var(--mf-text-secondary);
+    margin-bottom: var(--mf-space-sm);
+}
+
+.deepdots-popup h2 {
+    font-size: var(--mf-font-size-xl);
+    font-weight: 600;
+    color: var(--mf-text-primary);
+    margin: 0 0 var(--mf-space-xl) 0;
+    text-align: center;
+    letter-spacing: -0.01em;
+}
+
+.deepdots-popup p {
+    margin: 0;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-secondary);
+}
+
+/* ========================================
+   FORM INPUTS
+   ======================================== */
+.deepdots-popup input[type="date"],
+.deepdots-popup input[type="text"],
+.deepdots-popup input[type="number"],
+.deepdots-popup input[type="email"],
+.deepdots-popup input[type="password"],
+.deepdots-popup textarea,
+.deepdots-popup select {
+    padding: 0.75rem 0.9rem;
+    font-size: var(--mf-font-size-base);
+    font-family: inherit;
+    color: var(--mf-text-primary);
+    background-color: var(--mf-surface);
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    outline: none;
+    transition: var(--mf-transition);
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.deepdots-popup textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+.deepdots-popup input::placeholder,
+.deepdots-popup textarea::placeholder {
+    color: var(--mf-text-muted);
+}
+
+/* Remove number input spinners */
+.deepdots-popup input::-webkit-outer-spin-button,
+.deepdots-popup input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.deepdots-popup input[type="number"] {
+    /* -moz-appearance: textfield; removed for lint compatibility */
+}
+
+/* Custom Select Arrow */
+.deepdots-popup select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--mf-space-md) center;
+    padding-right: var(--mf-space-xl);
+}
+
+/* Error State */
+.deepdots-popup input.error,
+.deepdots-popup select.error,
+.deepdots-popup textarea.error {
+    border-color: var(--mf-error);
+}
+
+.magicfeedback-error {
+    margin-top: var(--mf-space-xs);
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-error);
+}
+
+/* ========================================
+   CHECKBOX & RADIO OPTIONS
+   ======================================== */
+.magicfeedback-checkbox,
+div.magicfeedback-radio {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-sm);
+    width: 100%;
+}
+
+.magicfeedback-checkbox-container,
+.magicfeedback-radio-container {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-sm);
+    padding: var(--mf-space-md);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-checkbox-container:hover,
+.magicfeedback-radio-container:hover {
+    background-color: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-checkbox-container:has(input:checked),
+.magicfeedback-radio-container:has(input:checked) {
+    background-color: var(--mf-primary-light);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-checkbox input[type="checkbox"],
+.magicfeedback-radio-container input[type="radio"] {
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+    accent-color: var(--mf-primary);
+}
+
+.magicfeedback-checkbox label,
+.magicfeedback-radio-container label {
+    font-size: var(--mf-font-size-base);
+    text-align: left;
+    color: var(--mf-text-primary);
+    cursor: pointer;
+    margin: 0;
+    flex: 1;
+}
+
+/* ========================================
+   BOOLEAN OPTIONS
+   ======================================== */
+.magicfeedback-boolean-container {
+    display: flex;
+    gap: var(--mf-space-md);
+    width: 100%;
+}
+
+.magicfeedback-boolean-option {
+    flex: 1;
+    position: relative;
+}
+
+.magicfeedback-boolean-option input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-boolean-option label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--mf-space-md);
+    font-size: var(--mf-font-size-base);
+    font-weight: 500;
+    color: var(--mf-text-secondary);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    margin: 0;
+    width: -webkit-fill-available;
+    height: inherit;
+}
+
+.magicfeedback-boolean-option label:hover {
+    background-color: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-boolean-option input[type="radio"]:checked + label {
+    color: var(--mf-primary);
+    background-color: var(--mf-primary-light);
+    border-color: var(--mf-primary);
+    font-weight: 600;
+}
+
+/* ========================================
+   RATING SYSTEMS
+   ======================================== */
+.magicfeedback-rating,
+.magicfeedback-rating-number,
+.magicfeedback-rating-star {
+    width: 100%;
+}
+
+.magicfeedback-rating-container,
+.magicfeedback-rating-number-container,
+.magicfeedback-rating-star-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mf-space-sm);
+    justify-content: center;
+    align-items: center;
+    padding: var(--mf-space-md) 0;
+    list-style: none;
+    margin: 0;
+}
+
+/* Caption line below the row \u2014 min on one side, max on the other (swapped
+   for order: "rtl") \u2014 same simple, non-responsive pattern as the
+   rating-number row caption. Used by rating-star and rating-emoji. */
+.magicfeedback-rating-placeholder {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--mf-space-md);
+    width: 100%;
+    margin-top: var(--mf-space-sm);
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-rating-placeholder-value {
+    overflow-wrap: anywhere;
+}
+
+.magicfeedback-rating-placeholder-value:last-child {
+    text-align: right;
+}
+
+/* Rating with Images */
+.magicfeedback-rating-option-label-container input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-rating-option-label-container img {
+    width: 56px;
+    height: 56px;
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    border-radius: var(--mf-radius-full);
+    border: 2px solid transparent;
+}
+
+.magicfeedback-rating-option-label-container img:hover {
+    transform: scale(1.1);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-rating-option-label-container input[type="radio"]:checked + img {
+    border-color: var(--mf-primary);
+    box-shadow: 0 0 0 3px var(--mf-primary-light);
+}
+
+.magicfeedback-rating-option-label-container label {
+    display: block;
+    text-align: center;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-secondary);
+    margin-top: var(--mf-space-xs);
+    cursor: pointer;
+}
+
+/* Rating Numbers \u2014 each option is its own outlined chip in the survey's
+   primary color, with a gap between them. Row and column use the same
+   chip; column additionally has room to show each option's own text
+   plainly next to its number. */
+
+/* Every size here is width:100%/flex:1 combined with the chip's own
+   padding and border. Without border-box, the browser's default
+   content-box adds that padding/border on TOP of the declared size, so
+   the chip quietly overflows past its flex slot \u2014 reading as "not quite
+   full width" or, worse, pushing into the next chip. */
+.magicfeedback-rating-number-container,
+.magicfeedback-rating-number-option,
+.magicfeedback-rating-number-option-label-container,
+.magicfeedback-rating-number-value {
+    box-sizing: border-box;
+}
+
+/* The shared rating-container rule (above, reused by star rating) sets
+   align-items:center for its row-of-chips layout \u2014 in a stacked column
+   that still nudges a 100%-wide chip inward instead of a true 0 offset.
+   Force stretch so every chip fills the exact same width, flush on
+   both sides. */
+.magicfeedback-rating-number-container-column,
+.magicfeedback-rating-number-container-column-reverse {
+    align-items: stretch;
+}
+
+/* Caption line below the row \u2014 the single place min/max labels live
+   for row mode, shared by mobile and desktop. */
+.magicfeedback-rating-number-scale-labels {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--mf-space-md);
+    margin-top: var(--mf-space-sm);
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-rating-number-scale-label {
+    overflow-wrap: anywhere;
+}
+
+.magicfeedback-rating-number-scale-label:last-child {
+    text-align: right;
+}
+
+/* Column, no per-option text: each row is its own separated chip, so
+   the min/max labels bookend the stack from outside it \u2014 one line
+   above the first chip, one below the last. Margin goes on whichever
+   side actually faces the list \u2014 the "before" label (always the first
+   child) gets space below it, the "after" one (always right after the
+   container, extra option row or not) gets space above it \u2014 so both
+   sit the same distance from the chips regardless of which one it is. */
+.magicfeedback-rating-number-scale-label-block {
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-secondary);
+    text-align: center;
+}
+
+.magicfeedback-rating-number-scale-label-block:first-child {
+    margin-bottom: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-container + .magicfeedback-rating-number-scale-label-block {
+    margin-top: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option {
+    display: flex;
+}
+
+.magicfeedback-rating-number-option-label-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    cursor: pointer;
+}
+
+.magicfeedback-rating-number-option-label-container input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-rating-number-value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    transition: var(--mf-transition-fast);
+    color: var(--mf-text-secondary);
+    font-weight: var(--mf-font-weight-semibold);
+}
+
+/* Row: individual outlined chips in the survey's own primary color \u2014
+   var(--mf-primary) so whatever brand color a given survey sets carries
+   through automatically, no color hardcoded here. */
+.magicfeedback-rating-number-container-row,
+.magicfeedback-rating-number-container-row-reverse {
+    flex-wrap: nowrap;
+    gap: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option-row,
+.magicfeedback-rating-number-option-row-reverse {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
+    min-height: 56px;
+    padding: var(--mf-space-sm);
+    border: 2px solid var(--mf-primary-border);
+    border-radius: var(--mf-radius-md);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-primary);
+    font-size: var(--mf-font-size-lg);
+    font-weight: var(--mf-font-weight-bold);
+}
+
+/* More than 6 options (e.g. a 0-10 NPS scale): still one row, never
+   wraps \u2014 but scaled down on purpose, so it reads as a compact chip
+   rather than the same 56px button stretched thin. */
+.magicfeedback-rating-number-container-row--dense .magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-container-row--dense .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
+    min-height: 36px;
+    padding: var(--mf-space-xs);
+    border-radius: var(--mf-radius-sm);
+    font-size: 0.8rem;
+}
+
+.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+    background: var(--mf-primary-light);
+}
+
+.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+/* Extra option: always its own row below the scale, and styled like every
+   other chip now \u2014 "doesn't apply" is still not a point on the 1..N
+   continuum, but it no longer needs a different border style to say so. */
+.magicfeedback-rating-number-extra-row {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option--extra {
+    flex: 0 1 auto;
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container {
+    width: auto;
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-value {
+    min-height: 36px;
+    padding: 0 var(--mf-space-md);
+    border: 2px solid var(--mf-primary-border);
+    border-radius: var(--mf-radius-md);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-primary);
+    font-size: var(--mf-font-size-sm);
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+    background: var(--mf-primary-light);
+}
+
+.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+/* Column: the same separated chips as row, just stacked \u2014 each option is
+   its own outlined chip with a gap between them, not one shared box. */
+.magicfeedback-rating-number-container-column,
+.magicfeedback-rating-number-container-column-reverse {
+    gap: var(--mf-space-sm);
+}
+
+.magicfeedback-rating-number-option-column,
+.magicfeedback-rating-number-option-column-reverse {
+    width: 100%;
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-value {
+    justify-content: flex-start;
+    gap: var(--mf-space-sm);
+    min-height: 48px;
+    padding: var(--mf-space-sm) var(--mf-space-md);
+    border: 2px solid var(--mf-primary-border);
+    border-radius: var(--mf-radius-md);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-primary);
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+    background: var(--mf-primary-light);
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-rating-number-value-num {
+    font-weight: var(--mf-font-weight-bold);
+}
+
+/* Column with per-option text: a min-width so "1".."9" and "10" line up,
+   with the label text starting at the same x. Skipped entirely when the
+   column has no per-option text at all (--bare below) \u2014 with nothing to
+   align against, the same left-shift bug from row mode would resurface. */
+.magicfeedback-rating-number-container-column:not(.magicfeedback-rating-number-container-column--bare) .magicfeedback-rating-number-value-num,
+.magicfeedback-rating-number-container-column-reverse:not(.magicfeedback-rating-number-container-column--bare) .magicfeedback-rating-number-value-num {
+    flex: none;
+    min-width: 1.4em;
+}
+
+/* Column, no per-option text at all (only min/max, or nothing): a bare
+   numbered list has nothing to left-align against, so center each
+   number instead of stranding it on the left with blank space beside it. */
+.magicfeedback-rating-number-container-column--bare .magicfeedback-rating-number-value {
+    justify-content: center;
+}
+
+.magicfeedback-rating-number-value-label {
+    font-weight: var(--mf-font-weight-medium);
+}
+
+.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
+.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
+    color: #fff;
+    background-color: var(--mf-primary);
+}
+
+/* Star Rating */
+.magicfeedback-rating-star-container {
+    justify-content: center;
+}
+
+.magicfeedback-rating-star-option:not(:checked) > .rating__star {
+    font-size: 40px;
+    color: var(--mf-border);
+    cursor: pointer;
+    margin: 0 var(--mf-space-xs);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
+.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
+    color: #fbbf24;
+    transform: scale(1.1);
+}
+
+.magicfeedback-rating-star-selected {
+    color: #fbbf24 !important;
+}
+
+/* ========================================
+   MULTIPLE CHOICE WITH IMAGES
+   ======================================== */
+.magicfeedback-multiple-choice-image-option {
+    display: flex;
+    border-radius: var(--mf-radius-md);
+    overflow: hidden;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-image-option-label-container {
+    cursor: pointer;
+    border-radius: var(--mf-radius-md);
+    overflow: hidden;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-image-option-label-container input[type="radio"],
+.magicfeedback-image-option-label-container input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-image-option-label-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-image-option-label-container:hover img {
+    border-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-image-option-label-container input:checked + img {
+    border-color: var(--mf-primary);
+    box-shadow: 0 0 0 3px var(--mf-primary-light);
+}
+
+/* ========================================
+   MATRIX QUESTIONS
+   ======================================== */
+.magicfeedback-multi-question-matrix-container {
+    width: 100%;
+    overflow-x: auto;
+    border-radius: var(--mf-radius-md);
+}
+
+.magicfeedback-multi-question-matrix-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 var(--mf-space-xs);
+}
+
+.magicfeedback-multi-question-matrix-table th {
+    padding: var(--mf-space-md);
+    text-align: center;
+    font-size: var(--mf-font-size-sm);
+    font-weight: 500;
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-multi-question-matrix-row-tr {
+    background-color: var(--mf-bg-primary);
+    border-radius: var(--mf-radius-md);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+    background-color: var(--mf-bg-secondary);
+}
+
+.magicfeedback-multi-question-matrix-row-tr:hover {
+    background-color: var(--mf-bg-hover);
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.magicfeedback-multi-question-matrix-table td {
+    padding: var(--mf-space-md);
+    text-align: center;
+}
+
+.magicfeedback-multi-question-matrix-label {
+    text-align: left;
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-multi-question-matrix-table input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    accent-color: var(--mf-primary);
+}
+
+/* ========================================
+   PRIORITY LIST
+   ======================================== */
+.magicfeedback-priority-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--mf-space-md);
+    margin: var(--mf-space-sm) 0;
+    background-color: var(--mf-bg-primary);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-priority-list-item:hover {
+    box-shadow: var(--mf-shadow-sm);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-priority-list-item-label {
+    flex: 1;
+    font-size: var(--mf-font-size-base);
+    text-align: left;
+    color: var(--mf-text-primary);
+    margin: 0;
+}
+
+.magicfeedback-priority-list-arrow-up,
+.magicfeedback-priority-list-arrow-down {
+    padding: var(--mf-space-xs);
+    font-size: var(--mf-font-size-lg);
+    color: var(--mf-text-secondary);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    user-select: none;
+}
+
+.magicfeedback-priority-list-arrow-up:hover,
+.magicfeedback-priority-list-arrow-down:hover {
+    color: var(--mf-primary);
+    transform: scale(1.2);
+}
+
+/* ========================================
+   POINT SYSTEM
+   ======================================== */
+.magicfeedback-point-system-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--mf-space-md);
+    margin: var(--mf-space-sm) 0;
+    background-color: var(--mf-bg-primary);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    min-height: 45px;
+}
+
+.magicfeedback-point-system-item label {
+    flex: 1;
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-primary);
+    margin: 0;
+}
+
+.magicfeedback-point-system-input-container {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-sm);
+}
+
+.magicfeedback-point-system-item input {
+    width: 80px;
+    min-width: 80px;
+    padding: var(--mf-space-sm);
+    text-align: center;
+    font-size: var(--mf-font-size-base);
+    border: 1.5px solid var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    margin: 0;
+}
+
+.magicfeedback-point-system-total {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--mf-space-md);
+    font-size: var(--mf-font-size-base);
+    font-weight: 600;
+    color: var(--mf-text-primary);
+}
+
+/* ========================================
+   CONSENT
+   ======================================== */
+.magicfeedback-consent-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--mf-space-sm);
+    padding: var(--mf-space-md);
+    background-color: var(--mf-bg-secondary);
+    border-radius: var(--mf-radius-md);
+    margin: var(--mf-space-md) 0;
+}
+
+.magicfeedback-consent-container input[type="checkbox"] {
+    margin-top: 2px;
+    flex-shrink: 0;
+    accent-color: var(--mf-primary);
+}
+
+.magicfeedback-consent-container label {
+    flex: 1;
+    font-size: var(--mf-font-size-sm);
+    text-align: left;
+    color: var(--mf-text-secondary);
+    line-height: var(--mf-line-height);
+    cursor: pointer;
+    margin-bottom: 0;
+}
+
+/* ========================================
+   ACTION BUTTONS
+   ======================================== */
+.magicfeedback-action-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mf-space-md);
+    margin-top: var(--mf-space-xl);
+    padding-top: var(--mf-space-lg);
+    border-top: 1px solid var(--mf-border);
+}
+
+.magicfeedback-submit {
+    padding: 0.8rem 1.6rem;
+    font-size: var(--mf-font-size-base);
+    font-weight: 800;
+    color: #FFFFFF;
+    background-color: var(--mf-primary);
+    border: 2px solid var(--mf-primary);
+    border-radius: var(--mf-radius-full);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-submit:hover {
+    background-color: var(--mf-primary-hover);
+    box-shadow: var(--mf-shadow-lg);
+    transform: translateY(-2px);
+}
+
+.magicfeedback-submit:active {
+    transform: translateY(0);
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.magicfeedback-submit:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.magicfeedback-back {
+    padding: 0.65rem 1rem;
+    font-size: var(--mf-font-size-base);
+    font-weight: 700;
+    color: var(--mf-primary);
+    background-color: var(--mf-bg-secondary);
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-full);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-back:hover {
+    border-color: var(--mf-primary);
+    background-color: var(--mf-bg-hover);
+}
+
+/* ========================================
+   SKIP & COUNTER
+   ======================================== */
+.magicfeedback-skip-container {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-xs);
+    padding: 0;
+    margin: 0;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-muted);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-skip-container:hover {
+    color: var(--mf-primary);
+}
+
+.magicfeedback-skip-container input[type="checkbox"] {
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--mf-primary);
+}
+
+.magicfeedback-counter {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--mf-space-md);
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-muted);
+}
+
+/* ========================================
+   MODAL STYLES
+   ======================================== */
+/* Modal backdrop */
+.magicfeedback-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.4);
+    display: none; /* toggled to flex when open */
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+/* Modal container */
+.magicfeedback-modal {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+    max-width: 520px;
+    width: 90%;
+    max-height: 80vh;
+    /* Flex column so the options list scrolls while the actions footer
+       (counter + confirm button) stays pinned and always visible. */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 16px;
+    position: relative;
+    /* Portalled to document.body (see renderPriorityList.ts) to escape the
+       host page's overflow/z-index \u2014 so it never inherits
+       .magicfeedback-container's neutral text color and instead inherits
+       whatever color the host page's own <body> happens to set. Needs its
+       own explicit baseline rather than relying on that inheritance. */
+    color: var(--mf-text-primary);
+}
+
+/* Modal actions */
+.magicfeedback-modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+    flex-shrink: 0;
+}
+
+.magicfeedback-modal-counter {
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: var(--mf-text-secondary);
+}
+
+/* Modal list */
+.magicfeedback-modal-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    /* Scrollable area; footer stays fixed below it. */
+    flex: 1 1 auto;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.magicfeedback-modal-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+}
+
+/* Priority list header */
+.magicfeedback-priority-list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.magicfeedback-priority-list-reorder {
+    margin-top: 8px;
+}
+
+.magicfeedback-priority-list-list {
+    padding: 0;
+    list-style: none;
+}
+
+.magicfeedback-priority-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px 0;
+}
+
+.magicfeedback-priority-list-item-label {
+    font-size: 15px;
+}
+
+.magicfeedback-priority-list-arrows {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Buttons */
+.magicfeedback-button {
+    appearance: none;
+    border: 2px solid var(--mf-border);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    color: var(--mf-text-primary);
+    padding: 0.6rem 1rem;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: var(--mf-shadow-sm);
+}
+
+.magicfeedback-button:hover {
+    background: var(--mf-bg-hover);
+    border-color: var(--mf-primary);
+}
+
+.magicfeedback-button:active {
+    transform: translateY(1px);
+}
+
+.magicfeedback-button-primary {
+    border-color: var(--mf-primary);
+    background: var(--mf-primary);
+    color: #fff;
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-button-primary:hover {
+    background: var(--mf-primary-hover);
+}
+
+.magicfeedback-button-primary:active {
+    background: var(--mf-primary-hover);
+}
+
+/* Warning flash */
+.magicfeedback-warning {
+    color: #C70039;
+}
+
+/* Start message button */
+.magicfeedback-start-message-button {
+    appearance: none;
+    border: 2px solid var(--mf-primary);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+    color: #fff;
+    padding: 0.8rem 1.4rem;
+    font-size: 15px;
+    font-weight: 800;
+    cursor: pointer;
+    box-shadow: var(--mf-shadow-md);
+}
+
+.magicfeedback-start-message-button:hover {
+    background: var(--mf-primary-hover);
+}
+
+/* ========================================
+   RESPONSIVE DESIGN
+   ======================================== */
+@media (max-width: 768px) {
+    :root {
+        --mf-space-lg: 1.25rem;
+        --mf-space-xl: 1.5rem;
+    }
+
+    .magicfeedback-container {
+        padding: 12px;
+        border-radius: var(--mf-radius-md);
+    }
+
+    .magicfeedback-form {
+        padding: 14px;
+        border-radius: var(--mf-radius-md);
+    }
+
+    .magicfeedback-div {
+        padding: 12px;
+        gap: var(--mf-space-lg)
+    }
+
+    .magicfeedback-label {
+        font-size: var(--mf-font-size-base);
+    }
+
+    .deepdots-popup input[type="date"],
+    .deepdots-popup input[type="text"],
+    .deepdots-popup input[type="number"],
+    .deepdots-popup input[type="email"],
+    .deepdots-popup input[type="password"],
+    .deepdots-popup textarea,
+    .deepdots-popup select {
+        padding: 0.85rem 0.95rem;
+        font-size: 1rem;
+        min-height: 46px;
+    }
+
+    /*
+    .magicfeedback-radio-container,
+    .magicfeedback-checkbox-container,
+    .magicfeedback-boolean-container,
+    .magicfeedback-consent-container {
+        width: 100%;
+    }
+    */
+
+    .magicfeedback-radio-container,
+    .magicfeedback-checkbox-container {
+        padding: 10px 12px;
+        border-radius: var(--mf-radius-md);
+        border: 1px solid var(--mf-border);
+        gap: 10px;
+    }
+
+    .magicfeedback-rating-container,
+    .magicfeedback-rating-number-container,
+    .magicfeedback-rating-star-container {
+        gap: 10px;
+    }
+
+    .magicfeedback-boolean-container {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .magicfeedback-rating-number-container-row,
+    .magicfeedback-rating-number-container-row-reverse {
+        gap: 6px;
+    }
+
+    .magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
+        min-height: 44px;
+        padding: var(--mf-space-xs);
+        font-size: 0.9rem;
+    }
+
+    .magicfeedback-action-container {
+        flex-direction: column-reverse;
+    }
+
+    .magicfeedback-submit,
+    .magicfeedback-back {
+        width: 100%;
+        text-align: center;
+        min-height: 48px;
+    }
+}
+
+/* ========================================
+   ACCESSIBILITY
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+.magicfeedback-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+.magicfeedback-modal-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: transparent;
+    border: none;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    color: #666;
+}
+
+.magicfeedback-modal-close:hover,
+.magicfeedback-modal-close:focus {
+    color: #000;
+    outline: none;
+}
+
+/* ========================================
+   FILE / IMAGE UPLOAD
+   ======================================== */
+.magicfeedback-upload {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-md);
+    width: 100%;
+    margin: 10px 0;
+}
+
+/* The native input is an invisible, focusable overlay covering the dropzone. */
+.magicfeedback-upload-native {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.magicfeedback-upload-dropzone {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mf-space-sm);
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 150px;
+    padding: var(--mf-space-xl);
+    text-align: center;
+    border: 2px dashed var(--mf-border);
+    border-radius: var(--mf-radius-md);
+    background-color: var(--mf-surface-alt);
+    cursor: pointer;
+    transition: var(--mf-transition);
+}
+
+.magicfeedback-upload-dropzone:hover {
+    border-color: var(--mf-primary);
+    background-color: var(--mf-bg-hover);
+}
+
+.magicfeedback-upload-dropzone:focus-within {
+    border-color: var(--mf-primary);
+    box-shadow: var(--mf-shadow-focus);
+}
+
+.magicfeedback-upload-dropzone.is-dragover {
+    border-color: var(--mf-primary);
+    border-style: solid;
+    background-color: var(--mf-primary-light);
+    box-shadow: var(--mf-shadow-focus);
+}
+
+.magicfeedback-upload-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 46px;
+    color: var(--mf-primary);
+    background-color: var(--mf-surface);
+    border-radius: var(--mf-radius-full);
+    box-shadow: var(--mf-shadow-sm);
+    pointer-events: none;
+}
+
+.magicfeedback-upload-icon svg {
+    width: 24px;
+    height: 24px;
+}
+
+.magicfeedback-upload-cta {
+    font-family: inherit;
+    font-weight: var(--mf-font-weight-semibold);
+    font-size: var(--mf-font-size-base);
+    color: var(--mf-text-primary);
+    pointer-events: none;
+}
+
+.magicfeedback-upload-hint {
+    font-family: inherit;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-text-muted);
+    pointer-events: none;
+}
+
+.magicfeedback-upload-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mf-space-sm);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.magicfeedback-upload-list:empty {
+    display: none;
+}
+
+.magicfeedback-upload-file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-md);
+    padding: var(--mf-space-sm) var(--mf-space-md);
+    background-color: var(--mf-surface);
+    border: 1px solid var(--mf-border);
+    border-radius: var(--mf-radius-sm);
+    box-shadow: var(--mf-shadow-sm);
+    animation: mf-scale-in 0.2s ease-out;
+}
+
+.magicfeedback-upload-thumb {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    color: var(--mf-text-secondary);
+    background-color: var(--mf-surface-alt);
+    border-radius: var(--mf-radius-sm);
+}
+
+.magicfeedback-upload-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.magicfeedback-upload-thumb svg {
+    width: 20px;
+    height: 20px;
+}
+
+.magicfeedback-upload-file-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-align: start;
+}
+
+.magicfeedback-upload-file-name {
+    font-family: inherit;
+    font-size: var(--mf-font-size-sm);
+    font-weight: var(--mf-font-weight-semibold);
+    color: var(--mf-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.magicfeedback-upload-file-size {
+    font-family: inherit;
+    font-size: 0.75rem;
+    color: var(--mf-text-muted);
+}
+
+.magicfeedback-upload-remove {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    color: var(--mf-text-muted);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--mf-radius-full);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+.magicfeedback-upload-remove:hover,
+.magicfeedback-upload-remove:focus-visible {
+    color: var(--mf-error);
+    background-color: var(--mf-primary-light);
+    outline: none;
+}
+
+.magicfeedback-upload-remove svg {
+    width: 16px;
+    height: 16px;
+}
+
+.magicfeedback-upload-error {
+    display: none;
+    font-family: inherit;
+    font-size: var(--mf-font-size-sm);
+    color: var(--mf-error);
+}
+
+.magicfeedback-upload-error.is-visible {
+    display: block;
+}
+
+/* ========================================
+   LOCAL \u2014 reglas del popup, no vienen del paquete
+   ======================================== */
+
+/* Los controles de formulario no heredan font-family: cuando el popup trae fuente propia
+   (clase deepdots-has-font), se les fuerza la del contenedor. */
+.deepdots-popup.deepdots-has-font button,
+.deepdots-popup.deepdots-has-font input,
+.deepdots-popup.deepdots-has-font textarea,
+.deepdots-popup.deepdots-has-font select {
+    font-family: var(--deepdots-font, inherit);
+}
+
+/* WebKit s\xED aplica el padding al radio nativo: con padding el control se dibuja enorme (se vio
+   en iOS, WebView de RN y Safari, no en Chrome). El paquete ya no lo pone, pero la regla es
+   barata y evita que vuelva. */
+.deepdots-popup input[type="radio"] {
+    padding: 0;
+}
+`;
   }
 });
 
@@ -210,6 +1978,47 @@ var init_logger = __esm({
   }
 });
 
+// src/ui/logo.ts
+function insertPopupLogo(parent, anchor, style, id) {
+  if (!style?.logo) return null;
+  if (parent.ownerDocument.getElementById(id)) return null;
+  const img = parent.ownerDocument.createElement("img");
+  img.id = id;
+  img.src = style.logo;
+  img.alt = "Logo";
+  img.style.cssText = BASE_CSS;
+  if (style.logoSize && MAX_HEIGHT[style.logoSize]) {
+    img.style.maxHeight = MAX_HEIGHT[style.logoSize];
+  }
+  switch (style.logoPosition) {
+    case "left":
+      img.style.margin = "12px 16px 0 0";
+      img.style.marginLeft = "0";
+      break;
+    case "right":
+      img.style.margin = "12px 0 0 16px";
+      img.style.marginLeft = "auto";
+      break;
+    case "center":
+      img.style.margin = "12px auto 0 auto";
+      break;
+  }
+  parent.insertBefore(img, anchor);
+  return img;
+}
+var BASE_CSS, MAX_HEIGHT;
+var init_logo = __esm({
+  "src/ui/logo.ts"() {
+    "use strict";
+    BASE_CSS = "max-height:40px; max-width:100%; object-fit:contain; display:block; margin:12px 0 0 0;";
+    MAX_HEIGHT = {
+      small: "30px",
+      medium: "50px",
+      large: "70px"
+    };
+  }
+});
+
 // node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
 var require_magicfeedback_sdk_browser = __commonJS({
   "node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js"(exports, module2) {
@@ -217,7 +2026,7 @@ var require_magicfeedback_sdk_browser = __commonJS({
     !(function(e, t) {
       "object" == typeof exports && "object" == typeof module2 ? module2.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.magicfeedback = t() : e.magicfeedback = t();
     })(self, (() => {
-      return e = { 945: function(e2, t2) {
+      return e = { 326: function(e2, t2) {
         var i = "undefined" != typeof self ? self : this, n = (function() {
           function e3() {
             this.fetch = false, this.DOMException = i.DOMException;
@@ -232,9 +2041,9 @@ var require_magicfeedback_sdk_browser = __commonJS({
               } catch (e4) {
                 return false;
               }
-            })(), s = "FormData" in e3, a = "ArrayBuffer" in e3;
-            if (a) var o = ["[object Int8Array]", "[object Uint8Array]", "[object Uint8ClampedArray]", "[object Int16Array]", "[object Uint16Array]", "[object Int32Array]", "[object Uint32Array]", "[object Float32Array]", "[object Float64Array]"], l = ArrayBuffer.isView || function(e4) {
-              return e4 && o.indexOf(Object.prototype.toString.call(e4)) > -1;
+            })(), s = "FormData" in e3, o = "ArrayBuffer" in e3;
+            if (o) var a = ["[object Int8Array]", "[object Uint8Array]", "[object Uint8ClampedArray]", "[object Int16Array]", "[object Uint16Array]", "[object Int32Array]", "[object Uint32Array]", "[object Float32Array]", "[object Float64Array]"], l = ArrayBuffer.isView || function(e4) {
+              return e4 && a.indexOf(Object.prototype.toString.call(e4)) > -1;
             };
             function d(e4) {
               if ("string" != typeof e4 && (e4 = String(e4)), /[^a-z0-9\-#$%&'*+.^_`|~]/i.test(e4)) throw new TypeError("Invalid character in header field name");
@@ -261,11 +2070,11 @@ var require_magicfeedback_sdk_browser = __commonJS({
                 this.append(t4, e4[t4]);
               }), this);
             }
-            function m(e4) {
+            function h(e4) {
               if (e4.bodyUsed) return Promise.reject(new TypeError("Already read"));
               e4.bodyUsed = true;
             }
-            function h(e4) {
+            function m(e4) {
               return new Promise((function(t4, i3) {
                 e4.onload = function() {
                   t4(e4.result);
@@ -275,31 +2084,31 @@ var require_magicfeedback_sdk_browser = __commonJS({
               }));
             }
             function f(e4) {
-              var t4 = new FileReader(), i3 = h(t4);
+              var t4 = new FileReader(), i3 = m(t4);
               return t4.readAsArrayBuffer(e4), i3;
             }
-            function v(e4) {
+            function g(e4) {
               if (e4.slice) return e4.slice(0);
               var t4 = new Uint8Array(e4.byteLength);
               return t4.set(new Uint8Array(e4)), t4.buffer;
             }
-            function g() {
+            function v() {
               return this.bodyUsed = false, this._initBody = function(e4) {
                 var t4;
-                this._bodyInit = e4, e4 ? "string" == typeof e4 ? this._bodyText = e4 : r2 && Blob.prototype.isPrototypeOf(e4) ? this._bodyBlob = e4 : s && FormData.prototype.isPrototypeOf(e4) ? this._bodyFormData = e4 : i2 && URLSearchParams.prototype.isPrototypeOf(e4) ? this._bodyText = e4.toString() : a && r2 && (t4 = e4) && DataView.prototype.isPrototypeOf(t4) ? (this._bodyArrayBuffer = v(e4.buffer), this._bodyInit = new Blob([this._bodyArrayBuffer])) : a && (ArrayBuffer.prototype.isPrototypeOf(e4) || l(e4)) ? this._bodyArrayBuffer = v(e4) : this._bodyText = e4 = Object.prototype.toString.call(e4) : this._bodyText = "", this.headers.get("content-type") || ("string" == typeof e4 ? this.headers.set("content-type", "text/plain;charset=UTF-8") : this._bodyBlob && this._bodyBlob.type ? this.headers.set("content-type", this._bodyBlob.type) : i2 && URLSearchParams.prototype.isPrototypeOf(e4) && this.headers.set("content-type", "application/x-www-form-urlencoded;charset=UTF-8"));
+                this._bodyInit = e4, e4 ? "string" == typeof e4 ? this._bodyText = e4 : r2 && Blob.prototype.isPrototypeOf(e4) ? this._bodyBlob = e4 : s && FormData.prototype.isPrototypeOf(e4) ? this._bodyFormData = e4 : i2 && URLSearchParams.prototype.isPrototypeOf(e4) ? this._bodyText = e4.toString() : o && r2 && (t4 = e4) && DataView.prototype.isPrototypeOf(t4) ? (this._bodyArrayBuffer = g(e4.buffer), this._bodyInit = new Blob([this._bodyArrayBuffer])) : o && (ArrayBuffer.prototype.isPrototypeOf(e4) || l(e4)) ? this._bodyArrayBuffer = g(e4) : this._bodyText = e4 = Object.prototype.toString.call(e4) : this._bodyText = "", this.headers.get("content-type") || ("string" == typeof e4 ? this.headers.set("content-type", "text/plain;charset=UTF-8") : this._bodyBlob && this._bodyBlob.type ? this.headers.set("content-type", this._bodyBlob.type) : i2 && URLSearchParams.prototype.isPrototypeOf(e4) && this.headers.set("content-type", "application/x-www-form-urlencoded;charset=UTF-8"));
               }, r2 && (this.blob = function() {
-                var e4 = m(this);
+                var e4 = h(this);
                 if (e4) return e4;
                 if (this._bodyBlob) return Promise.resolve(this._bodyBlob);
                 if (this._bodyArrayBuffer) return Promise.resolve(new Blob([this._bodyArrayBuffer]));
                 if (this._bodyFormData) throw new Error("could not read FormData body as blob");
                 return Promise.resolve(new Blob([this._bodyText]));
               }, this.arrayBuffer = function() {
-                return this._bodyArrayBuffer ? m(this) || Promise.resolve(this._bodyArrayBuffer) : this.blob().then(f);
+                return this._bodyArrayBuffer ? h(this) || Promise.resolve(this._bodyArrayBuffer) : this.blob().then(f);
               }), this.text = function() {
-                var e4, t4, i3, n3 = m(this);
+                var e4, t4, i3, n3 = h(this);
                 if (n3) return n3;
-                if (this._bodyBlob) return e4 = this._bodyBlob, i3 = h(t4 = new FileReader()), t4.readAsText(e4), i3;
+                if (this._bodyBlob) return e4 = this._bodyBlob, i3 = m(t4 = new FileReader()), t4.readAsText(e4), i3;
                 if (this._bodyArrayBuffer) return Promise.resolve((function(e5) {
                   for (var t5 = new Uint8Array(e5), i4 = new Array(t5.length), n4 = 0; n4 < t5.length; n4++) i4[n4] = String.fromCharCode(t5[n4]);
                   return i4.join("");
@@ -361,21 +2170,21 @@ var require_magicfeedback_sdk_browser = __commonJS({
                 }
               })), t4;
             }
-            function k(e4, t4) {
+            function A(e4, t4) {
               t4 || (t4 = {}), this.type = "default", this.status = void 0 === t4.status ? 200 : t4.status, this.ok = this.status >= 200 && this.status < 300, this.statusText = "statusText" in t4 ? t4.statusText : "OK", this.headers = new p(t4.headers), this.url = t4.url || "", this._initBody(e4);
             }
             b.prototype.clone = function() {
               return new b(this, { body: this._bodyInit });
-            }, g.call(b.prototype), g.call(k.prototype), k.prototype.clone = function() {
-              return new k(this._bodyInit, { status: this.status, statusText: this.statusText, headers: new p(this.headers), url: this.url });
-            }, k.error = function() {
-              var e4 = new k(null, { status: 0, statusText: "" });
+            }, v.call(b.prototype), v.call(A.prototype), A.prototype.clone = function() {
+              return new A(this._bodyInit, { status: this.status, statusText: this.statusText, headers: new p(this.headers), url: this.url });
+            }, A.error = function() {
+              var e4 = new A(null, { status: 0, statusText: "" });
               return e4.type = "error", e4;
             };
-            var A = [301, 302, 303, 307, 308];
-            k.redirect = function(e4, t4) {
-              if (-1 === A.indexOf(t4)) throw new RangeError("Invalid status code");
-              return new k(null, { status: t4, headers: { location: e4 } });
+            var k = [301, 302, 303, 307, 308];
+            A.redirect = function(e4, t4) {
+              if (-1 === k.indexOf(t4)) throw new RangeError("Invalid status code");
+              return new A(null, { status: t4, headers: { location: e4 } });
             }, t3.DOMException = e3.DOMException;
             try {
               new t3.DOMException();
@@ -388,37 +2197,37 @@ var require_magicfeedback_sdk_browser = __commonJS({
             }
             function C(e4, i3) {
               return new Promise((function(n3, s2) {
-                var a2 = new b(e4, i3);
-                if (a2.signal && a2.signal.aborted) return s2(new t3.DOMException("Aborted", "AbortError"));
-                var o2 = new XMLHttpRequest();
+                var o2 = new b(e4, i3);
+                if (o2.signal && o2.signal.aborted) return s2(new t3.DOMException("Aborted", "AbortError"));
+                var a2 = new XMLHttpRequest();
                 function l2() {
-                  o2.abort();
+                  a2.abort();
                 }
-                o2.onload = function() {
-                  var e5, t4, i4 = { status: o2.status, statusText: o2.statusText, headers: (e5 = o2.getAllResponseHeaders() || "", t4 = new p(), e5.replace(/\r?\n[\t ]+/g, " ").split(/\r?\n/).forEach((function(e6) {
+                a2.onload = function() {
+                  var e5, t4, i4 = { status: a2.status, statusText: a2.statusText, headers: (e5 = a2.getAllResponseHeaders() || "", t4 = new p(), e5.replace(/\r?\n[\t ]+/g, " ").split(/\r?\n/).forEach((function(e6) {
                     var i5 = e6.split(":"), n4 = i5.shift().trim();
                     if (n4) {
                       var r4 = i5.join(":").trim();
                       t4.append(n4, r4);
                     }
                   })), t4) };
-                  i4.url = "responseURL" in o2 ? o2.responseURL : i4.headers.get("X-Request-URL");
-                  var r3 = "response" in o2 ? o2.response : o2.responseText;
-                  n3(new k(r3, i4));
-                }, o2.onerror = function() {
+                  i4.url = "responseURL" in a2 ? a2.responseURL : i4.headers.get("X-Request-URL");
+                  var r3 = "response" in a2 ? a2.response : a2.responseText;
+                  n3(new A(r3, i4));
+                }, a2.onerror = function() {
                   s2(new TypeError("Network request failed"));
-                }, o2.ontimeout = function() {
+                }, a2.ontimeout = function() {
                   s2(new TypeError("Network request failed"));
-                }, o2.onabort = function() {
+                }, a2.onabort = function() {
                   s2(new t3.DOMException("Aborted", "AbortError"));
-                }, o2.open(a2.method, a2.url, true), "include" === a2.credentials ? o2.withCredentials = true : "omit" === a2.credentials && (o2.withCredentials = false), "responseType" in o2 && r2 && (o2.responseType = "blob"), a2.headers.forEach((function(e5, t4) {
-                  o2.setRequestHeader(t4, e5);
-                })), a2.signal && (a2.signal.addEventListener("abort", l2), o2.onreadystatechange = function() {
-                  4 === o2.readyState && a2.signal.removeEventListener("abort", l2);
-                }), o2.send(void 0 === a2._bodyInit ? null : a2._bodyInit);
+                }, a2.open(o2.method, o2.url, true), "include" === o2.credentials ? a2.withCredentials = true : "omit" === o2.credentials && (a2.withCredentials = false), "responseType" in a2 && r2 && (a2.responseType = "blob"), o2.headers.forEach((function(e5, t4) {
+                  a2.setRequestHeader(t4, e5);
+                })), o2.signal && (o2.signal.addEventListener("abort", l2), a2.onreadystatechange = function() {
+                  4 === a2.readyState && o2.signal.removeEventListener("abort", l2);
+                }), a2.send(void 0 === o2._bodyInit ? null : o2._bodyInit);
               }));
             }
-            C.polyfill = true, e3.fetch || (e3.fetch = C, e3.Headers = p, e3.Request = b, e3.Response = k), t3.Headers = p, t3.Request = b, t3.Response = k, t3.fetch = C, Object.defineProperty(t3, "__esModule", { value: true });
+            C.polyfill = true, e3.fetch || (e3.fetch = C, e3.Headers = p, e3.Request = b, e3.Response = A), t3.Headers = p, t3.Request = b, t3.Response = A, t3.fetch = C, Object.defineProperty(t3, "__esModule", { value: true });
           })({});
         })(n), n.fetch.ponyfill = true, delete n.fetch.polyfill;
         var r = n;
@@ -439,14 +2248,14 @@ var require_magicfeedback_sdk_browser = __commonJS({
         "use strict";
         var n = this && this.__awaiter || function(e3, t3, i2, n2) {
           return new (i2 || (i2 = Promise))((function(r2, s2) {
-            function a2(e4) {
+            function o2(e4) {
               try {
                 l2(n2.next(e4));
               } catch (e5) {
                 s2(e5);
               }
             }
-            function o2(e4) {
+            function a2(e4) {
               try {
                 l2(n2.throw(e4));
               } catch (e5) {
@@ -457,34 +2266,42 @@ var require_magicfeedback_sdk_browser = __commonJS({
               var t4;
               e4.done ? r2(e4.value) : (t4 = e4.value, t4 instanceof i2 ? t4 : new i2((function(e5) {
                 e5(t4);
-              }))).then(a2, o2);
+              }))).then(o2, a2);
             }
             l2((n2 = n2.apply(e3, t3 || [])).next());
           }));
         };
         Object.defineProperty(t2, "__esModule", { value: true });
-        const r = i(57), s = i(665), a = i(256), o = i(313), l = i(317);
+        const r = i(57), s = i(544), o = i(665), a = i(256), l = i(313), d = i(317);
         t2.default = function() {
-          const e3 = new s.Config();
+          const e3 = new o.Config();
           let t3 = new a.Log(e3);
           return { init: function(i2) {
-            "boolean" == typeof (null == i2 ? void 0 : i2.debug) && e3.set("debug", i2.debug), "boolean" == typeof (null == i2 ? void 0 : i2.dryRun) && e3.set("dryRun", i2.dryRun), e3.set("url", (null == i2 ? void 0 : i2.env) && "dev" === (null == i2 ? void 0 : i2.env) ? l.HOST_API_URL_DEV : l.HOST_API_URL), e3.set("env", null == i2 ? void 0 : i2.env), t3.log("Initialized Magicfeedback", e3);
-          }, send: function(i2, r2, s2, a2 = true, l2, d) {
+            "boolean" == typeof (null == i2 ? void 0 : i2.debug) && e3.set("debug", i2.debug), "boolean" == typeof (null == i2 ? void 0 : i2.dryRun) && e3.set("dryRun", i2.dryRun), e3.set("url", (null == i2 ? void 0 : i2.env) && "dev" === (null == i2 ? void 0 : i2.env) ? d.HOST_API_URL_DEV : d.HOST_API_URL), e3.set("env", null == i2 ? void 0 : i2.env), t3.log("Initialized Magicfeedback", e3);
+          }, send: function(i2, r2, s2, o2 = true, a2, d2) {
             return n(this, void 0, void 0, (function* () {
               i2 || t3.err("No appID provided"), r2 || t3.err("No publicKey provided"), s2 || t3.err("No feedback provided"), s2.answers || s2.profile || s2.metrics || s2.metadata || t3.err("No feedback data provided");
-              const n2 = e3.get("url"), c = { integration: i2, publicKey: r2, privateKey: d, completed: a2, id: l2, feedback: s2 };
+              const n2 = e3.get("url"), c = { integration: i2, publicKey: r2, privateKey: d2, completed: o2, id: a2, feedback: s2 };
               try {
                 if (e3.get("dryRun")) return t3.log("Dry run enabled: skipping native feedback submit"), `dry-run-${Date.now()}`;
-                const i3 = yield (0, o.sendFeedback)(n2, c, t3);
+                const i3 = yield (0, l.sendFeedback)(n2, c, t3);
                 return t3.log("sent native feedback"), i3;
               } catch (e4) {
                 return t3.err("error native feedback", e4), false;
               }
             }));
-          }, form: function(i2, n2, s2, a2) {
-            return i2 || t3.err("No appID provided"), n2 || t3.err("No publicKey provided"), new r.Form(e3, i2, n2, s2, a2);
+          }, form: function(i2, n2, s2, o2) {
+            return i2 || t3.err("No appID provided"), n2 || t3.err("No publicKey provided"), new r.Form(e3, i2, n2, s2, o2);
+          }, agentForm: function(i2, n2, r2) {
+            return i2 || t3.err("No integrationId provided"), n2 || t3.err("No publicKey provided"), new s.AgentForm(e3, i2, n2, r2);
           }, session: function(i2) {
             return i2 || t3.err("No sessionId provided"), new r.Form(e3, i2);
+          }, previewPage: function(i2, s2, o2) {
+            return n(this, void 0, void 0, (function* () {
+              i2 || t3.err("No selector provided"), s2 && s2.page || t3.err("No page provided for preview");
+              const n2 = (null == s2 ? void 0 : s2.appId) || `preview-${Date.now()}`, a2 = new r.Form(e3, n2);
+              return yield a2.previewPage(i2, s2, o2), a2;
+            }));
           } };
         };
       }, 79: (e2, t2) => {
@@ -493,29 +2310,266 @@ var require_magicfeedback_sdk_browser = __commonJS({
           constructor() {
             this.items = [];
           }
-          enqueue(e3) {
-            this.items.push(e3);
+          enqueue(e3) {
+            this.items.push(e3);
+          }
+          dequeue() {
+            return this.items.shift();
+          }
+          rollback() {
+            return this.items.pop();
+          }
+          front() {
+            return this.items[0];
+          }
+          back() {
+            return this.items[this.items.length - 1];
+          }
+          isEmpty() {
+            return 0 === this.items.length;
+          }
+          size() {
+            return this.items.length;
+          }
+          get(e3) {
+            return this.items[e3];
+          }
+        };
+      }, 544: function(e2, t2, i) {
+        "use strict";
+        var n = this && this.__awaiter || function(e3, t3, i2, n2) {
+          return new (i2 || (i2 = Promise))((function(r2, s2) {
+            function o2(e4) {
+              try {
+                l2(n2.next(e4));
+              } catch (e5) {
+                s2(e5);
+              }
+            }
+            function a2(e4) {
+              try {
+                l2(n2.throw(e4));
+              } catch (e5) {
+                s2(e5);
+              }
+            }
+            function l2(e4) {
+              var t4;
+              e4.done ? r2(e4.value) : (t4 = e4.value, t4 instanceof i2 ? t4 : new i2((function(e5) {
+                e5(t4);
+              }))).then(o2, a2);
+            }
+            l2((n2 = n2.apply(e3, t3 || [])).next());
+          }));
+        };
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.AgentForm = void 0;
+        const r = i(256), s = i(279), o = i(945), a = i(177), l = i(107), d = i(565), c = i(571), u = i(213);
+        t2.AgentForm = class {
+          constructor(e3, t3, i2, n2) {
+            this.config = e3, this.log = new r.Log(e3), this.url = e3.get("url"), this.integrationId = t3, this.publicKey = i2, this.privateKey = n2, this.formOptionsConfig = { addButton: true, sendButtonText: "Send", backButtonText: "Back", nextButtonText: "Next", addSuccessScreen: true, questionFormat: "standard", answerDelimiter: a.DEFAULT_ANSWER_DELIMITER, resume: true, allowBack: false, emptyAnswerText: "" }, this.selector = "", this.language = "en", this.product = { customIcons: false }, this.sessionId = "", this.conversation = [], this.askedRefs = [], this.currentTurn = 1, this.maxTurns = 0, this.currentQuestion = null, this.questionHistory = [], this.busy = false, this.rateLimitTimer = null, this.progress = 0, this.total = 0, this.completed = false, this.timeToCompleted = 0;
+          }
+          generate(e3, t3 = {}) {
+            var i2;
+            return n(this, void 0, void 0, (function* () {
+              this.formOptionsConfig = Object.assign(Object.assign({}, this.formOptionsConfig), t3), this.selector = e3, t3.lang && (this.language = t3.lang), t3.primaryColor && (this.primaryColor = t3.primaryColor), this.config.get("dryRun") && this.log.log("dryRun has no effect in agent mode: the server drives the conversation");
+              try {
+                const e4 = false !== this.formOptionsConfig.resume ? this.restore() : null;
+                if (e4) this.log.log(`Resuming agent session ${e4.sessionId} at turn ${e4.currentTurn}`), this.mountForm(), this.renderStep();
+                else {
+                  const e5 = yield this.startWithRetry();
+                  this.sessionId = e5.sessionId, this.maxTurns = e5.maxTurns, this.currentTurn = null !== (i2 = e5.currentTurn) && void 0 !== i2 ? i2 : 1, this.total = Math.max(this.maxTurns - 1, 0);
+                  const t4 = (0, a.toAgentStep)(e5, this.adapterContext());
+                  if (this.mountForm(), "END" === t4.kind) return yield this.renderEnd(t4), void (this.formOptionsConfig.onLoadedEvent && (yield this.formOptionsConfig.onLoadedEvent({ loading: false, progress: this.progress, total: this.total, sessionId: this.sessionId, completed: true })));
+                  this.acceptQuestion(t4), this.renderStep(), this.persist();
+                }
+                this.timeToCompleted = Date.now(), this.formOptionsConfig.onLoadedEvent && (yield this.formOptionsConfig.onLoadedEvent({ loading: false, progress: this.progress, total: this.total, sessionId: this.sessionId, formOptionsConfig: this.formOptionsConfig }));
+              } catch (e4) {
+                this.log.err(`Could not start the agent survey ${this.integrationId}:`, e4), this.renderFatal(e4), this.formOptionsConfig.onLoadedEvent && (yield this.formOptionsConfig.onLoadedEvent({ loading: false, error: e4 }));
+              }
+            }));
+          }
+          next() {
+            return n(this, void 0, void 0, (function* () {
+              return this.runTurn();
+            }));
+          }
+          answer() {
+            const e3 = document.getElementById(this.formId());
+            return e3 ? (0, l.scrapeInputs)(e3) : [];
+          }
+          getConversation() {
+            return [...this.conversation];
+          }
+          getSessionId() {
+            return this.sessionId;
+          }
+          reset() {
+            this.sessionId = "", this.conversation = [], this.askedRefs = [], this.currentTurn = 1, this.maxTurns = 0, this.currentQuestion = null, this.questionHistory = [], this.busy = false, this.completed = false, this.progress = 0, this.clearRateLimitTimer(), this.clearPersisted();
+          }
+          runTurn() {
+            var e3;
+            return n(this, void 0, void 0, (function* () {
+              if (this.busy || this.completed || !this.currentQuestion) return;
+              this.busy = true, this.setSubmitDisabled(true), this.clearError();
+              const t3 = this.currentQuestion;
+              try {
+                const i2 = document.getElementById(this.formId()), n2 = document.getElementById(this.questionsId());
+                if (!i2) throw new Error("Agent form not found");
+                yield (0, c.awaitUploadReady)(n2);
+                const r2 = (0, l.scrapeInputs)(i2);
+                let s2 = (0, a.encodeAnswer)(r2, t3, this.formOptionsConfig.answerDelimiter);
+                if ("" === s2) {
+                  if (t3.require) return void this.showError(this.formOptionsConfig.requiredMessage || "Please answer before continuing.");
+                  s2 = this.formOptionsConfig.emptyAnswerText || "";
+                }
+                this.formOptionsConfig.beforeSubmitEvent && (yield this.formOptionsConfig.beforeSubmitEvent({ loading: true, progress: this.progress, total: this.total }));
+                const d2 = { role: "user", content: s2, questionType: t3.type, questionRef: t3.ref }, u2 = this.currentTurn + 1, p = yield (0, o.nextAgentTurn)(this.url, { publicKey: this.publicKey, privateKey: this.privateKey, integrationId: this.integrationId, sessionId: this.sessionId, conversation: [...this.conversation], currentTurn: u2, lastAnswer: s2, lastQuestionRef: t3.ref, askedRefs: [...this.askedRefs] }, this.log);
+                this.conversation.push(d2), this.currentTurn = null !== (e3 = p.currentTurn) && void 0 !== e3 ? e3 : u2, p.maxTurns && (this.maxTurns = p.maxTurns), this.total = Math.max(this.maxTurns - 1, 0);
+                const h = (0, a.toAgentStep)(p, this.adapterContext());
+                if ("END" === h.kind) return void (yield this.renderEnd(h));
+                if (this.maxTurns > 0 && this.currentTurn > this.maxTurns + 1) return void (yield this.renderEnd({ kind: "END", reason: "MAX_TURNS", currentTurn: this.currentTurn, maxTurns: this.maxTurns }));
+                this.acceptQuestion(h), this.renderStep(), this.persist(), this.formOptionsConfig.onAgentTurnEvent && (yield this.formOptionsConfig.onAgentTurnEvent({ turn: this.currentTurn, maxTurns: this.maxTurns, question: h.question, isFromBase: h.isFromBase, topic: h.topic, coverageGaps: h.coverageGaps, coverageSummary: h.coverageSummary, conversation: this.getConversation() })), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ response: this.sessionId, loading: false, progress: this.progress, total: this.total, completed: false, error: null }));
+              } catch (e4) {
+                yield this.handleTurnError(e4);
+              } finally {
+                this.completed || (this.busy = false, this.rateLimitTimer || this.setSubmitDisabled(false));
+              }
+            }));
+          }
+          handleTurnError(e3) {
+            return n(this, void 0, void 0, (function* () {
+              this.log.err(`An error occurred during the agent turn ${this.integrationId}:`, e3), e3 instanceof s.AgentApiError && "RATE_LIMITED" === e3.kind ? this.startRateLimitCountdown(e3.retryAfterMs || 6e4) : this.showError(this.errorMessageFor(e3)), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ loading: false, progress: this.progress, total: this.total, completed: false, error: e3 }));
+            }));
+          }
+          acceptQuestion(e3) {
+            const t3 = e3.question;
+            e3.isFromBase && t3.ref && !this.askedRefs.includes(t3.ref) && this.askedRefs.push(t3.ref), this.conversation.push({ role: "agent", content: t3.title, questionType: t3.type, questionRef: t3.ref }), this.currentQuestion = t3, this.questionHistory.push(t3), this.progress = Math.max(this.currentTurn - 1, 0);
+          }
+          formId() {
+            return "magicfeedback-agent-" + this.integrationId;
+          }
+          questionsId() {
+            return "magicfeedback-agent-questions-" + this.integrationId;
+          }
+          mountForm() {
+            const e3 = (0, d.generateContainer)(this.selector, this.integrationId);
+            this.primaryColor && (0, d.applyPrimaryColor)(e3, this.primaryColor);
+            const t3 = document.createElement("form");
+            t3.classList.add("magicfeedback-form"), t3.classList.add("magicfeedback-agent-form"), t3.id = this.formId(), t3.addEventListener("submit", ((e4) => {
+              e4.preventDefault(), this.runTurn();
+            }));
+            const i2 = document.createElement("div");
+            i2.classList.add("magicfeedback-questions"), i2.id = this.questionsId(), t3.appendChild(i2), this.formOptionsConfig.addButton && t3.appendChild((0, u.renderActions)(this.formOptionsConfig.allowBack ? "MAGICSURVEY" : "MAGICFORM", (() => this.back()), this.formOptionsConfig.sendButtonText, this.formOptionsConfig.backButtonText, this.formOptionsConfig.nextButtonText)), e3.appendChild(t3);
+          }
+          renderStep() {
+            const e3 = document.getElementById(this.questionsId());
+            e3 && this.currentQuestion && (e3.innerHTML = "", (0, u.renderQuestions)([this.currentQuestion], this.formOptionsConfig.questionFormat, this.language, this.product, (() => this.runTurn())).forEach(((t3) => e3.appendChild(t3))));
+          }
+          renderEnd(e3) {
+            return n(this, void 0, void 0, (function* () {
+              this.completed = true, this.currentQuestion = null, this.busy = false, this.timeToCompleted = this.timeToCompleted ? Date.now() - this.timeToCompleted : 0, this.clearRateLimitTimer(), this.clearPersisted();
+              const t3 = document.getElementById("magicfeedback-container-" + this.integrationId);
+              if (t3 && false !== this.formOptionsConfig.addSuccessScreen) {
+                t3.innerHTML = "";
+                const i2 = "BLOCKED" === e3.reason ? this.formOptionsConfig.blockedMessage || "Thanks for your time \u2014 we'll end the conversation here." : this.formOptionsConfig.successMessage || "Thank you for your feedback!", n2 = (0, u.renderSuccess)(i2);
+                n2.classList.add("magicfeedback-success-message"), n2.classList.add("magicfeedback-agent-end"), "BLOCKED" === e3.reason && n2.classList.add("magicfeedback-agent-end--blocked"), t3.appendChild(n2);
+              }
+              this.formOptionsConfig.onFinishEvent && (yield this.formOptionsConfig.onFinishEvent({ sessionId: this.sessionId, reason: e3.reason, turns: this.currentTurn, maxTurns: this.maxTurns, conversation: this.getConversation(), coverageSummary: e3.coverageSummary, timeToCompleted: this.timeToCompleted })), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ response: this.sessionId, loading: false, progress: this.progress, total: this.total, completed: true, error: null }));
+            }));
+          }
+          back() {
+            return n(this, void 0, void 0, (function* () {
+              this.busy || this.completed || this.formOptionsConfig.allowBack && (this.questionHistory.length < 2 || (this.questionHistory.pop(), this.conversation.pop(), this.conversation.pop(), this.currentQuestion = this.questionHistory[this.questionHistory.length - 1], this.currentTurn = Math.max(this.currentTurn - 1, 1), this.progress = Math.max(this.currentTurn - 1, 0), this.clearError(), this.renderStep(), this.persist(), this.formOptionsConfig.onBackEvent && (yield this.formOptionsConfig.onBackEvent({ progress: this.progress, total: this.total }))));
+            }));
+          }
+          renderFatal(e3) {
+            try {
+              (0, d.generateContainer)(this.selector, this.integrationId).appendChild((0, u.renderError)(this.errorMessageFor(e3)));
+            } catch (e4) {
+            }
+          }
+          errorMessageFor(e3) {
+            if (!(e3 instanceof s.AgentApiError)) return "Something went wrong. Please try again.";
+            switch (e3.kind) {
+              case "AUTH":
+              case "NOT_FOUND":
+              case "BAD_CONFIG":
+                return "This survey is not available right now.";
+              case "AI_UNAVAILABLE":
+                return "We couldn't start the survey. Please try again in a moment.";
+              default:
+                return "Something went wrong. Please try again.";
+            }
+          }
+          adapterContext() {
+            return { integrationId: this.integrationId, sessionId: this.sessionId, language: this.language, log: this.log };
           }
-          dequeue() {
-            return this.items.shift();
+          startWithRetry() {
+            return n(this, void 0, void 0, (function* () {
+              const e3 = { publicKey: this.publicKey, privateKey: this.privateKey, integrationId: this.integrationId };
+              try {
+                return yield (0, o.startAgentSurvey)(this.url, e3, this.log);
+              } catch (t3) {
+                if (t3 instanceof s.AgentApiError && "AI_UNAVAILABLE" === t3.kind) return this.log.log("Retrying /start after a transient AI failure"), yield new Promise(((e4) => setTimeout(e4, 1500))), yield (0, o.startAgentSurvey)(this.url, e3, this.log);
+                throw t3;
+              }
+            }));
           }
-          rollback() {
-            return this.items.pop();
+          setSubmitDisabled(e3) {
+            const t3 = document.getElementById("magicfeedback-submit");
+            t3 && (t3.disabled = e3);
           }
-          front() {
-            return this.items[0];
+          clearError() {
+            const e3 = document.getElementById(this.questionsId());
+            null == e3 || e3.querySelectorAll(".magicfeedback-error").forEach(((e4) => e4.remove()));
           }
-          back() {
-            return this.items[this.items.length - 1];
+          showError(e3) {
+            const t3 = document.getElementById(this.questionsId());
+            t3 && (this.clearError(), t3.insertBefore((0, u.renderError)(e3), t3.firstChild));
           }
-          isEmpty() {
-            return 0 === this.items.length;
+          startRateLimitCountdown(e3) {
+            this.clearRateLimitTimer(), this.setSubmitDisabled(true);
+            let t3 = Math.ceil(e3 / 1e3);
+            const i2 = this.formOptionsConfig.rateLimitMessage || "Too many requests. Retrying in {seconds}s\u2026", n2 = () => {
+              if (t3 <= 0) return this.clearRateLimitTimer(), this.clearError(), void this.setSubmitDisabled(false);
+              this.showError(i2.replace("{seconds}", String(t3))), t3 -= 1;
+            };
+            n2(), this.rateLimitTimer = setInterval(n2, 1e3);
           }
-          size() {
-            return this.items.length;
+          clearRateLimitTimer() {
+            this.rateLimitTimer && (clearInterval(this.rateLimitTimer), this.rateLimitTimer = null);
           }
-          get(e3) {
-            return this.items[e3];
+          storageKey() {
+            return `magicfeedback-agent-${this.integrationId}`;
+          }
+          persist() {
+            if (false !== this.formOptionsConfig.resume) try {
+              const e3 = { sessionId: this.sessionId, conversation: this.conversation, currentTurn: this.currentTurn, maxTurns: this.maxTurns, askedRefs: this.askedRefs, questionHistory: this.questionHistory, savedAt: Date.now() };
+              localStorage.setItem(this.storageKey(), JSON.stringify(e3));
+            } catch (e3) {
+              this.log.log("Could not persist the agent session", e3);
+            }
+          }
+          restore() {
+            var e3;
+            try {
+              const t3 = localStorage.getItem(this.storageKey());
+              if (!t3) return null;
+              const i2 = JSON.parse(t3);
+              return (null == i2 ? void 0 : i2.sessionId) && (null === (e3 = i2.questionHistory) || void 0 === e3 ? void 0 : e3.length) ? Date.now() - (i2.savedAt || 0) > 18e5 ? (this.clearPersisted(), null) : (this.sessionId = i2.sessionId, this.conversation = i2.conversation || [], this.currentTurn = i2.currentTurn || 1, this.maxTurns = i2.maxTurns || 0, this.askedRefs = i2.askedRefs || [], this.questionHistory = i2.questionHistory, this.currentQuestion = this.questionHistory[this.questionHistory.length - 1], this.total = Math.max(this.maxTurns - 1, 0), this.progress = Math.max(this.currentTurn - 1, 0), i2) : null;
+            } catch (e4) {
+              return this.log.log("Could not restore the agent session", e4), null;
+            }
+          }
+          clearPersisted() {
+            try {
+              localStorage.removeItem(this.storageKey());
+            } catch (e3) {
+            }
+          }
+          applyIntegrationContext(e3) {
+            var t3, i2;
+            (null === (t3 = null == e3 ? void 0 : e3.lang) || void 0 === t3 ? void 0 : t3.length) && (this.language = e3.lang[0]), (null == e3 ? void 0 : e3.product) && (this.product = e3.product), (null === (i2 = null == e3 ? void 0 : e3.style) || void 0 === i2 ? void 0 : i2.primaryColor) && (this.primaryColor = e3.style.primaryColor);
           }
         };
       }, 665: (e2, t2) => {
@@ -535,14 +2589,14 @@ var require_magicfeedback_sdk_browser = __commonJS({
         "use strict";
         var n = this && this.__awaiter || function(e3, t3, i2, n2) {
           return new (i2 || (i2 = Promise))((function(r2, s2) {
-            function a2(e4) {
+            function o2(e4) {
               try {
                 l2(n2.next(e4));
               } catch (e5) {
                 s2(e5);
               }
             }
-            function o2(e4) {
+            function a2(e4) {
               try {
                 l2(n2.throw(e4));
               } catch (e5) {
@@ -553,33 +2607,48 @@ var require_magicfeedback_sdk_browser = __commonJS({
               var t4;
               e4.done ? r2(e4.value) : (t4 = e4.value, t4 instanceof i2 ? t4 : new i2((function(e5) {
                 e5(t4);
-              }))).then(a2, o2);
+              }))).then(o2, a2);
             }
             l2((n2 = n2.apply(e3, t3 || [])).next());
           }));
         };
         Object.defineProperty(t2, "__esModule", { value: true }), t2.Form = void 0;
-        const r = i(558), s = i(256), a = i(313), o = i(213), l = i(989), d = i(700), c = i(591), u = i(79), p = i(636);
+        const r = i(558), s = i(544), o = i(256), a = i(313), l = i(213), d = i(571), c = i(565), u = i(107), p = i(989), h = i(700), m = i(591), f = i(79), g = i(636);
         t2.Form = class {
           constructor(e3, t3, i2, n2, r2) {
-            this.config = e3, this.log = new s.Log(e3), this.formOptionsConfig = { addButton: true, sendButtonText: "Send", backButtonText: "Back", nextButtonText: "Next", addSuccessScreen: true, getMetaData: true, customMetaData: [], questionFormat: "standard" }, this.selector = "", this.appId = t3, this.publicKey = i2 || "", this.url = e3.get("url"), this.id = "", this.formData = null, this.feedback = { text: "", answers: [], profile: null != n2 ? n2 : [], metrics: [], metadata: null != r2 ? r2 : [] }, this.history = new u.History(), this.graph = new l.PageGraph([]), this.progress = 0, this.total = 0, this.completed = false, this.timeToCompleted = 0;
+            this.config = e3, this.log = new o.Log(e3), this.formOptionsConfig = { addButton: true, sendButtonText: "Send", backButtonText: "Back", nextButtonText: "Next", addSuccessScreen: true, getMetaData: true, customMetaData: [], questionFormat: "standard" }, this.selector = "", this.appId = t3, this.publicKey = i2 || "", this.url = e3.get("url"), this.id = "", this.formData = null, this.feedback = { text: "", answers: [], profile: null != n2 ? n2 : [], metrics: [], metadata: null != r2 ? r2 : [] }, this.history = new f.History(), this.agentForm = null, this.graph = new p.PageGraph([]), this.progress = 0, this.total = 0, this.completed = false, this.timeToCompleted = 0;
           }
           generate(e3, t3) {
-            var i2, r2, s2, o2, l2, d2, c2;
+            var i2, r2, o2, l2, d2, c2, u2;
             return n(this, void 0, void 0, (function* () {
               try {
                 this.formOptionsConfig = Object.assign(Object.assign({}, this.formOptionsConfig), t3), this.selector = e3;
                 let n2 = this.formData;
                 if (void 0 !== this.formData && this.formData || (n2 = "" !== this.publicKey ? yield (0, a.getForm)(this.url, this.appId, this.publicKey, this.log) : yield (0, a.getSessionForm)(this.url, this.appId, this.log)), void 0 === n2 || !n2) throw new Error(`No data for app ${this.appId}`);
                 if (null === (i2 = n2.error) || void 0 === i2 ? void 0 : i2.message) throw new Error(n2.error.message);
-                if (n2.questions = (null === (r2 = n2.questions) || void 0 === r2 ? void 0 : r2.filter(((e4) => "ACTIVE" === e4.status))) || [], n2.pages = (null === (s2 = n2.pages) || void 0 === s2 ? void 0 : s2.filter(((e4) => "ACTIVE" === e4.status))) || [], null === (o2 = n2.pages) || void 0 === o2 || o2.forEach(((e4) => {
+                if ("AGENT" === n2.mode) return this.agentForm = new s.AgentForm(this.config, this.appId, this.publicKey), this.agentForm.applyIntegrationContext(n2), void (yield this.agentForm.generate(e3, t3));
+                if (n2.questions = (null === (r2 = n2.questions) || void 0 === r2 ? void 0 : r2.filter(((e4) => "ACTIVE" === e4.status))) || [], n2.pages = (null === (o2 = n2.pages) || void 0 === o2 ? void 0 : o2.filter(((e4) => "ACTIVE" === e4.status))) || [], null === (l2 = n2.pages) || void 0 === l2 || l2.forEach(((e4) => {
                   var t4;
                   return e4.integrationQuestions = null === (t4 = e4.integrationQuestions) || void 0 === t4 ? void 0 : t4.filter(((e5) => "ACTIVE" === e5.status));
                 })), this.formData = n2, this.formData.savedAt || (this.formData.savedAt = /* @__PURE__ */ new Date(), localStorage.setItem(`magicfeedback-${this.appId}`, JSON.stringify(this.formData))), void 0 === this.formData.questions || !this.formData.questions) throw new Error(`No questions for app ${this.appId}`);
-                this.formData.pages && 0 !== (null === (l2 = this.formData.pages) || void 0 === l2 ? void 0 : l2.length) || this.formatPages(), null === (d2 = this.formData.questions) || void 0 === d2 || d2.sort(((e4, t4) => e4.position - t4.position)), this.formData.pages = this.formData.pages.filter(((e4) => {
+                this.formData.pages && 0 !== (null === (d2 = this.formData.pages) || void 0 === d2 ? void 0 : d2.length) || this.formatPages(), null === (c2 = this.formData.questions) || void 0 === c2 || c2.sort(((e4, t4) => e4.position - t4.position)), this.formData.pages = this.formData.pages.filter(((e4) => {
                   var t4;
                   return (null === (t4 = e4.integrationQuestions) || void 0 === t4 ? void 0 : t4.length) > 0;
-                })), this.formOptionsConfig.getMetaData && this.getMetaData(), (null === (c2 = this.formData.style) || void 0 === c2 ? void 0 : c2.startMessage) ? yield this.generateWelcomeMessage(this.formData.style.startMessage) : this.startForm();
+                })), this.formOptionsConfig.getMetaData && this.getMetaData(), (null === (u2 = this.formData.style) || void 0 === u2 ? void 0 : u2.startMessage) ? yield this.generateWelcomeMessage(this.formData.style.startMessage) : this.startForm();
+              } catch (e4) {
+                return this.log.err(e4), void (this.formOptionsConfig.onLoadedEvent && (yield this.formOptionsConfig.onLoadedEvent({ loading: false, error: e4 })));
+              }
+            }));
+          }
+          previewPage(e3, t3, i2 = {}) {
+            var r2, s2, o2, a2, l2, d2, c2, u2, p2;
+            return n(this, void 0, void 0, (function* () {
+              try {
+                if (!t3 || !t3.page) throw new Error("[MagicFeedback] No page provided for preview");
+                if (!t3.page.integrationQuestions || 0 === t3.page.integrationQuestions.length) throw new Error("[MagicFeedback] No questions provided for preview");
+                this.config.set("dryRun", true), this.formOptionsConfig = Object.assign(Object.assign(Object.assign({}, this.formOptionsConfig), { getMetaData: false }), i2), this.selector = e3;
+                const n2 = (t3.page.integrationQuestions || []).filter(((e4) => !e4.status || "ACTIVE" === e4.status)).sort(((e4, t4) => e4.position - t4.position)), m2 = new h.Page(null !== (r2 = t3.page.id) && void 0 !== r2 ? r2 : "1", null !== (s2 = t3.page.position) && void 0 !== s2 ? s2 : 1, null !== (o2 = t3.appId) && void 0 !== o2 ? o2 : this.appId, n2, null !== (a2 = t3.page.integrationPageRoutes) && void 0 !== a2 ? a2 : []);
+                this.formData = { id: null !== (l2 = t3.appId) && void 0 !== l2 ? l2 : this.appId, identity: null !== (d2 = t3.identity) && void 0 !== d2 ? d2 : "MAGICFORM", lang: [null !== (c2 = t3.lang) && void 0 !== c2 ? c2 : "en"], product: null !== (u2 = t3.product) && void 0 !== u2 ? u2 : { customIcons: false }, style: null !== (p2 = t3.style) && void 0 !== p2 ? p2 : {}, questions: n2, pages: [m2] }, yield this.generateForm();
               } catch (e4) {
                 return this.log.err(e4), void (this.formOptionsConfig.onLoadedEvent && (yield this.formOptionsConfig.onLoadedEvent({ loading: false, error: e4 })));
               }
@@ -591,35 +2660,35 @@ var require_magicfeedback_sdk_browser = __commonJS({
               case "MAGICSURVEY":
                 this.formData.pages = [], null === (e3 = this.formData.questions) || void 0 === e3 || e3.forEach(((e4) => {
                   var t4, i2;
-                  const n2 = new c.PageRoute(e4.id, e4.ref, c.OperatorType.NOEQUAL, [], c.TransitionType.PAGE, (e4.position + 1).toString(), e4.position.toString()), r2 = new d.Page(e4.position.toString(), e4.position, this.appId, [e4], [n2]);
+                  const n2 = new m.PageRoute(e4.id, e4.ref, m.OperatorType.NOEQUAL, [], m.TransitionType.PAGE, (e4.position + 1).toString(), e4.position.toString()), r2 = new h.Page(e4.position.toString(), e4.position, this.appId, [e4], [n2]);
                   null === (i2 = null === (t4 = this.formData) || void 0 === t4 ? void 0 : t4.pages) || void 0 === i2 || i2.push(r2);
                 }));
                 break;
               case "MAGICFORM":
-                const t3 = new d.Page("1", 1, this.appId, this.formData.questions, []);
+                const t3 = new h.Page("1", 1, this.appId, this.formData.questions, []);
                 this.formData.pages = [t3];
             }
           }
           generateContainer() {
-            let e3 = document.getElementById(this.selector);
-            if (!e3 && (e3 = document.getElementById("magicfeedback-container-" + this.appId), !e3)) throw new Error(`Element with ID '${this.selector}' not found.`);
-            return e3.classList.add("magicfeedback-container"), e3.id = "magicfeedback-container-" + this.appId, e3.innerHTML = "", e3;
+            var e3, t3;
+            const i2 = (0, c.generateContainer)(this.selector, this.appId), n2 = null === (t3 = null === (e3 = this.formData) || void 0 === e3 ? void 0 : e3.style) || void 0 === t3 ? void 0 : t3.primaryColor;
+            return n2 && (0, c.applyPrimaryColor)(i2, n2), i2;
           }
           generateForm() {
             var e3, t3, i2, r2;
             return n(this, void 0, void 0, (function* () {
               try {
                 if (!this.formData || !this.formData.pages || 0 === this.formData.pages.length) throw new Error("No form data");
-                this.graph = new l.PageGraph(this.formData.pages.sort(((e4, t4) => e4.position - t4.position)));
+                this.graph = new p.PageGraph(this.formData.pages.sort(((e4, t4) => e4.position - t4.position)));
                 let n2 = this.generateContainer();
                 const s2 = document.createElement("form");
                 s2.classList.add("magicfeedback-form"), s2.id = "magicfeedback-" + this.appId, s2.addEventListener("submit", ((e4) => e4.preventDefault()));
-                const a2 = document.createElement("div");
-                a2.classList.add("magicfeedback-questions"), a2.id = "magicfeedback-questions-" + this.appId;
-                const d2 = this.graph.getFirstPage();
-                if (!d2) throw new Error("No page found");
-                if (this.total = this.graph.findMaxDepth(), d2.elements = (0, o.renderQuestions)(d2.questions, this.formOptionsConfig.questionFormat, null === (e3 = this.formData) || void 0 === e3 ? void 0 : e3.lang[0], null === (t3 = this.formData) || void 0 === t3 ? void 0 : t3.product, (() => this.send())), null === (i2 = d2.elements) || void 0 === i2 || i2.forEach(((e4) => a2.appendChild(e4))), s2.appendChild(a2), this.history.enqueue(d2), n2.appendChild(s2), this.progress = this.total - this.graph.findMaxDepth(d2), this.formOptionsConfig.addButton) {
-                  const e4 = (0, o.renderActions)(null === (r2 = this.formData) || void 0 === r2 ? void 0 : r2.identity, (() => this.back()), this.formOptionsConfig.sendButtonText, this.formOptionsConfig.backButtonText, this.formOptionsConfig.nextButtonText);
+                const o2 = document.createElement("div");
+                o2.classList.add("magicfeedback-questions"), o2.id = "magicfeedback-questions-" + this.appId;
+                const a2 = this.graph.getFirstPage();
+                if (!a2) throw new Error("No page found");
+                if (this.total = this.graph.findMaxDepth(), a2.elements = (0, l.renderQuestions)(a2.questions, this.formOptionsConfig.questionFormat, null === (e3 = this.formData) || void 0 === e3 ? void 0 : e3.lang[0], null === (t3 = this.formData) || void 0 === t3 ? void 0 : t3.product, (() => this.send())), null === (i2 = a2.elements) || void 0 === i2 || i2.forEach(((e4) => o2.appendChild(e4))), s2.appendChild(o2), this.history.enqueue(a2), n2.appendChild(s2), this.progress = this.total - this.graph.findMaxDepth(a2), this.formOptionsConfig.addButton) {
+                  const e4 = (0, l.renderActions)(null === (r2 = this.formData) || void 0 === r2 ? void 0 : r2.identity, (() => this.back()), this.formOptionsConfig.sendButtonText, this.formOptionsConfig.backButtonText, this.formOptionsConfig.nextButtonText);
                   s2.appendChild(e4);
                 }
                 this.formOptionsConfig.addButton && s2.addEventListener("submit", ((e4) => {
@@ -636,7 +2705,7 @@ var require_magicfeedback_sdk_browser = __commonJS({
           generateWelcomeMessage(e3) {
             return n(this, void 0, void 0, (function* () {
               try {
-                const t3 = this.generateContainer(), i2 = (0, o.renderStartMessage)(e3, this.formOptionsConfig.addButton, this.formOptionsConfig.startButtonText, (() => this.startForm()));
+                const t3 = this.generateContainer(), i2 = (0, l.renderStartMessage)(e3, this.formOptionsConfig.addButton, this.formOptionsConfig.startButtonText, (() => this.startForm()));
                 t3.appendChild(i2), this.formOptionsConfig.onLoadedEvent && (yield this.formOptionsConfig.onLoadedEvent({ loading: false, formData: this.formData }));
               } catch (e4) {
                 return this.log.err(e4), void (this.formOptionsConfig.onLoadedEvent && this.formOptionsConfig.onLoadedEvent({ loading: false, error: e4 }));
@@ -651,14 +2720,21 @@ var require_magicfeedback_sdk_browser = __commonJS({
               i2.length > 0 && this.feedback.metadata.push({ key: `query-${t3}`, value: i2 });
             })), this.feedback.metadata.push({ key: "navigator-user", value: [navigator.userAgent] }), this.feedback.metadata.push({ key: "navigator-language", value: [navigator.language] }), this.feedback.metadata.push({ key: "navigator-platform", value: [navigator.platform] }), this.feedback.metadata.push({ key: "navigator-appVersion", value: [navigator.appVersion] }), this.feedback.metadata.push({ key: "navigator-appName", value: [navigator.appName] }), this.feedback.metadata.push({ key: "navigator-product", value: [navigator.product] }), this.feedback.metadata.push({ key: "screen-width", value: [window.screen.width.toString()] }), this.feedback.metadata.push({ key: "screen-height", value: [window.screen.height.toString()] }), this.appId && "" === this.publicKey && this.feedback.metadata.push({ key: "MAGICFEEDBACK_SESSION", value: [this.appId] });
           }
-          send(e3, t3, i2) {
+          send(e3, t3, i2, s2) {
             return n(this, void 0, void 0, (function* () {
+              if (this.agentForm) return this.agentForm.next();
               const n2 = document.getElementById("magicfeedback-questions-" + this.appId);
               try {
-                i2 && (this.feedback.profile = [...this.feedback.profile, ...i2]), t3 && (this.feedback.metrics = [...this.feedback.metrics, ...t3]), e3 && (this.feedback.metadata = [...this.feedback.metadata, ...e3]), this.answer(), this.formOptionsConfig.beforeSubmitEvent && (yield this.formOptionsConfig.beforeSubmitEvent({ loading: true, progress: this.progress, total: this.total }));
-                const s2 = this.history.back();
-                if (!s2) throw new Error("No page found");
-                for (const e4 of s2.questions.filter(((e5) => e5.require && ![r.FEEDBACKAPPANSWERTYPE.CONSENT, r.FEEDBACKAPPANSWERTYPE.INFO_PAGE].includes(e5.type)))) {
+                if (i2 && (this.feedback.profile = [...this.feedback.profile, ...i2]), t3 && (this.feedback.metrics = [...this.feedback.metrics, ...t3]), e3 && (this.feedback.metadata = [...this.feedback.metadata, ...e3]), s2) {
+                  this.feedback.answers = [...this.feedback.answers, ...s2], this.formOptionsConfig.beforeSubmitEvent && (yield this.formOptionsConfig.beforeSubmitEvent({ loading: true, progress: this.progress, total: this.total }));
+                  const e4 = yield this.pushAnswers(false);
+                  if (!e4) throw new Error("No response");
+                  return this.id = e4, void (this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ loading: false, progress: this.progress, total: this.total })));
+                }
+                yield (0, d.awaitUploadReady)(n2), this.answer(), this.formOptionsConfig.beforeSubmitEvent && (yield this.formOptionsConfig.beforeSubmitEvent({ loading: true, progress: this.progress, total: this.total }));
+                const o2 = this.history.back();
+                if (!o2) throw new Error("No page found");
+                for (const e4 of o2.questions.filter(((e5) => e5.require && ![r.FEEDBACKAPPANSWERTYPE.CONSENT, r.FEEDBACKAPPANSWERTYPE.INFO_PAGE].includes(e5.type)))) {
                   const t4 = e4.assets, i3 = this.feedback.answers.filter(((t5) => t5.key.includes(e4.ref) && !t5.key.includes("extra-option")));
                   if (0 === i3.length || i3.find(((e5) => 0 === e5.value.length))) throw this.log.err(`The question ${e4.ref} is required`), new Error("No response");
                   if (null == t4 ? void 0 : t4.minOptions) {
@@ -689,35 +2765,17 @@ var require_magicfeedback_sdk_browser = __commonJS({
             const e3 = document.getElementById("magicfeedback-" + this.appId);
             if (!e3) return this.log.err(`Form "${e3}" not found.`), this.feedback.answers = [], [];
             const t3 = this.history.back();
-            if (!t3) {
-              const t4 = e3.querySelectorAll(".magicfeedback-input"), i3 = [], n3 = {};
-              return t4.forEach(((e4) => {
-                var t5;
-                const r2 = e4, s3 = r2.name;
-                if (!s3) return;
-                const a2 = r2.type;
-                if (("radio" === a2 || "checkbox" === a2) && !r2.checked) return;
-                const o3 = r2.value, l3 = r2.classList[0];
-                if ((null == l3 ? void 0 : l3.includes("magicfeedback-priority-list")) || (null === (t5 = r2.id) || void 0 === t5 ? void 0 : t5.startsWith("priority-list-"))) return n3[s3] || (n3[s3] = []), void n3[s3].push(o3);
-                const d3 = "magicfeedback-consent" === l3 ? r2.checked.toString() : o3;
-                if (null == d3) return;
-                const c2 = { key: s3, value: [d3] };
-                i3.push(c2);
-              })), Object.entries(n3).forEach((([e4, t5]) => {
-                const n4 = t5.slice().sort(((e5, t6) => Number(e5.split(".")[0]) - Number(t6.split(".")[0])));
-                i3.push({ key: e4, value: n4 });
-              })), this.feedback.answers = i3, i3;
-            }
+            if (!t3) return this.feedback.answers = (0, u.scrapeInputs)(e3), this.feedback.answers;
             const i2 = [];
             let n2 = false;
-            const s2 = e3.querySelectorAll(".magicfeedback-input"), o2 = {}, l2 = {}, d2 = {};
+            const s2 = e3.querySelectorAll(".magicfeedback-input"), o2 = {}, l2 = {}, c2 = {};
             if (s2.forEach(((e4) => {
-              const s3 = e4, c2 = t3.questions.find(((e5) => {
+              const s3 = e4, u2 = t3.questions.find(((e5) => {
                 var t4;
                 return null === (t4 = s3.name) || void 0 === t4 ? void 0 : t4.includes(e5.ref);
-              })), u2 = s3.type, p2 = s3.classList[0], m = { key: s3.name, value: [] }, h = "magicfeedback-consent" === p2 ? s3.checked.toString() : s3.value;
-              if (m.key && "" !== m.key) if (m.key.startsWith("extra-option-")) "" !== h && (m.value.push(h), i2.push(m));
-              else switch (null == c2 ? void 0 : c2.type) {
+              })), p2 = s3.type, h2 = s3.classList[0], m2 = { key: s3.name, value: [] }, f2 = "magicfeedback-consent" === h2 ? s3.checked.toString() : s3.value;
+              if (m2.key && "" !== m2.key) if (m2.key.startsWith("extra-option-")) "" !== f2 && (m2.value.push(f2), i2.push(m2));
+              else switch (null == u2 ? void 0 : u2.type) {
                 case r.FEEDBACKAPPANSWERTYPE.EMAIL:
                 case r.FEEDBACKAPPANSWERTYPE.TEXT:
                 case r.FEEDBACKAPPANSWERTYPE.LONGTEXT:
@@ -725,44 +2783,49 @@ var require_magicfeedback_sdk_browser = __commonJS({
                 case r.FEEDBACKAPPANSWERTYPE.DATE:
                 case r.FEEDBACKAPPANSWERTYPE.CONTACT:
                 case r.FEEDBACKAPPANSWERTYPE.PASSWORD:
-                  "" !== h && ("email" === u2 ? (0, a.validateEmail)(h) ? (this.feedback.profile.push({ key: "email", value: [h] }), m.value.push(h), i2.push(m)) : (this.log.err("Invalid email"), n2 = true) : (m.value.push(h), i2.push(m)));
+                  "" !== f2 && ("email" === p2 ? (0, a.validateEmail)(f2) ? (this.feedback.profile.push({ key: "email", value: [f2] }), m2.value.push(f2), i2.push(m2)) : (this.log.err("Invalid email"), n2 = true) : (m2.value.push(f2), i2.push(m2)));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.RADIO:
-                  s3.checked && (m.value.push(h), i2.push(m));
+                  s3.checked && (m2.value.push(f2), i2.push(m2));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE:
                 case r.FEEDBACKAPPANSWERTYPE.MULTIPLECHOISE_IMAGE:
-                  s3.checked && (l2[m.key] || (l2[m.key] = []), l2[m.key].push(h));
+                  s3.checked && (l2[m2.key] || (l2[m2.key] = []), l2[m2.key].push(f2));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.BOOLEAN:
-                  s3.checked && (m.value.push(h), i2.push(m));
+                  s3.checked && (m2.value.push(f2), i2.push(m2));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.CONSENT:
-                  m.value.push(s3.checked.toString()), i2.push(m);
+                  m2.value.push(s3.checked.toString()), i2.push(m2);
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.RATING_EMOJI:
                 case r.FEEDBACKAPPANSWERTYPE.RATING_NUMBER:
                 case r.FEEDBACKAPPANSWERTYPE.RATING_STAR:
-                  s3.checked && (m.value.push(h), i2.push(m));
+                  s3.checked && (m2.value.push(f2), i2.push(m2));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.SELECT:
-                  "" !== h && (m.value.push(h), i2.push(m));
+                  "" !== f2 && (m2.value.push(f2), i2.push(m2));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.POINT_SYSTEM:
-                  "number" === u2 && s3.id && (d2[m.key] || (d2[m.key] = []), "" !== h && d2[m.key].push(`${s3.id}:${h}%`));
+                  "number" === p2 && s3.id && (c2[m2.key] || (c2[m2.key] = []), "" !== f2 && c2[m2.key].push(`${s3.id}:${f2}%`));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.PRIORITY_LIST:
-                  "hidden" === u2 && (o2[m.key] || (o2[m.key] = []), o2[m.key].push(h));
+                  "hidden" === p2 && (o2[m2.key] || (o2[m2.key] = []), o2[m2.key].push(f2));
                   break;
                 case r.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX:
-                  e4.checked && (m.value.push(h), i2.push(m));
+                  e4.checked && (m2.value.push(f2), i2.push(m2));
+                  break;
                 case r.FEEDBACKAPPANSWERTYPE.UPLOAD_IMAGE:
-                case r.FEEDBACKAPPANSWERTYPE.UPLOAD_FILE:
+                case r.FEEDBACKAPPANSWERTYPE.UPLOAD_FILE: {
+                  const e5 = (0, d.getUploadValues)(s3);
+                  e5.length && (m2.value.push(...e5), i2.push(m2));
+                  break;
+                }
               }
             })), n2) return [];
             Object.entries(l2).forEach((([e4, t4]) => {
               t4 && 0 !== t4.length && i2.push({ key: e4, value: t4 });
-            })), Object.entries(d2).forEach((([e4, t4]) => {
+            })), Object.entries(c2).forEach((([e4, t4]) => {
               t4 && 0 !== t4.length && i2.push({ key: e4, value: t4 });
             })), Object.entries(o2).forEach((([e4, t4]) => {
               if (!t4 || 0 === t4.length) return;
@@ -778,8 +2841,8 @@ var require_magicfeedback_sdk_browser = __commonJS({
                   const t5 = i2.findIndex(((t6) => t6.key === e5.key));
                   -1 !== t5 && i2.splice(t5, 1);
                 }
-                const a2 = i2.findIndex(((t5) => t5.key === e4.ref));
-                -1 !== a2 ? i2[a2] = s3 : i2.push(s3);
+                const o3 = i2.findIndex(((t5) => t5.key === e4.ref));
+                -1 !== o3 ? i2[o3] = s3 : i2.push(s3);
               }));
             } catch (e4) {
               this.log.err("Error agrupando MULTI_QUESTION_MATRIX", e4);
@@ -791,7 +2854,7 @@ var require_magicfeedback_sdk_browser = __commonJS({
               if (this.completed = true, this.timeToCompleted = Date.now() - this.timeToCompleted, this.feedback.metadata.push({ key: "time-to-complete", value: [this.timeToCompleted.toString()] }), this.formOptionsConfig.addSuccessScreen) {
                 const e3 = document.getElementById("magicfeedback-container-" + this.appId);
                 e3.childNodes.length > 0 && e3.removeChild(e3.childNodes[0]);
-                const t3 = (0, o.renderSuccess)(this.formOptionsConfig.successMessage || "Thank you for your feedback!");
+                const t3 = (0, l.renderSuccess)(this.formOptionsConfig.successMessage || "Thank you for your feedback!");
                 e3.appendChild(t3);
               }
               this.answer();
@@ -823,7 +2886,6 @@ var require_magicfeedback_sdk_browser = __commonJS({
             return n(this, void 0, void 0, (function* () {
               if (!(null == e3 ? void 0 : e3.followup)) return null;
               try {
-                if (this.config.get("dryRun")) return this.log.log(`Dry run enabled: skipping follow up API for question ${e3.ref}`), null;
                 if (0 === this.feedback.answers.length) throw new Error("No answers provided");
                 const i2 = this.config.get("url"), n2 = Object.assign(Object.assign(Object.assign({ answer: null === (t3 = this.feedback.answers.find(((t4) => t4.key === e3.ref))) || void 0 === t3 ? void 0 : t3.value[0] }, "" !== this.publicKey && { publicKey: this.publicKey }), "" === this.publicKey && { campaignSessionId: this.appId }), { sessionId: this.id, question: e3 });
                 return yield (0, a.getFollowUpQuestion)(i2, n2, this.log);
@@ -839,66 +2901,66 @@ var require_magicfeedback_sdk_browser = __commonJS({
               if (!n2) throw new Error("No page found");
               const s2 = n2.getFollowupQuestions();
               if (0 === (null == s2 ? void 0 : s2.length)) return void (yield this.renderNextQuestion(e3, n2));
-              const a2 = [];
+              const o2 = [];
               for (const e4 of s2) {
                 const t4 = n2.questions.find(((t5) => t5.ref === e4));
                 if (t4) {
                   const e5 = yield this.callFollowUpQuestion(t4);
-                  e5 && a2.push(e5);
+                  e5 && o2.push(e5);
                 }
               }
-              if (0 === a2.length) return void (yield this.renderNextQuestion(e3, n2));
-              const l2 = new d.Page(n2.id, n2.position, this.appId, a2, n2.edges), c2 = new p.PageNode(n2.id, n2.position, n2.edges, l2, a2, true);
-              c2.elements = (0, o.renderQuestions)(a2, this.formOptionsConfig.questionFormat, null === (t3 = this.formData) || void 0 === t3 ? void 0 : t3.lang[0], null === (i2 = this.formData) || void 0 === i2 ? void 0 : i2.product, (() => this.send())), this.history.enqueue(c2), this.progress += 0.5, e3.innerHTML = "", null === (r2 = c2.elements) || void 0 === r2 || r2.forEach(((t4) => e3.appendChild(t4))), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ response: this.id, loading: false, progress: this.progress, total: this.total, followup: c2.isFollowup, completed: this.completed, error: null }));
+              if (0 === o2.length) return void (yield this.renderNextQuestion(e3, n2));
+              const a2 = new h.Page(n2.id, n2.position, this.appId, o2, n2.edges), d2 = new g.PageNode(n2.id, n2.position, n2.edges, a2, o2, true);
+              d2.elements = (0, l.renderQuestions)(o2, this.formOptionsConfig.questionFormat, null === (t3 = this.formData) || void 0 === t3 ? void 0 : t3.lang[0], null === (i2 = this.formData) || void 0 === i2 ? void 0 : i2.product, (() => this.send())), this.history.enqueue(d2), this.progress += 0.5, e3.innerHTML = "", null === (r2 = d2.elements) || void 0 === r2 || r2.forEach(((t4) => e3.appendChild(t4))), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ response: this.id, loading: false, progress: this.progress, total: this.total, followup: d2.isFollowup, completed: this.completed, error: null }));
             }));
           }
           renderNextQuestion(e3, t3) {
-            var i2, s2, a2, l2, d2;
+            var i2, s2, o2, a2, d2;
             return n(this, void 0, void 0, (function* () {
               let n2 = this.graph.getNextPage(t3, this.feedback.answers);
               if (!n2) return void this.finish();
-              const u2 = n2.edges.filter(((e4) => "PRECONDITIONAL" === e4.typeCondition)).sort(((e4, t4) => e4.position < t4.position ? -1 : e4.position > t4.position ? 1 : 0));
-              if ((null == u2 ? void 0 : u2.length) > 0) {
-                const t4 = u2.some(((e4) => e4.transition === c.TransitionType.ALLOW));
-                let a3 = t4;
-                for (const t5 of u2) {
-                  let o2;
+              const c2 = n2.edges.filter(((e4) => "PRECONDITIONAL" === e4.typeCondition)).sort(((e4, t4) => e4.position < t4.position ? -1 : e4.position > t4.position ? 1 : 0));
+              if ((null == c2 ? void 0 : c2.length) > 0) {
+                const t4 = c2.some(((e4) => e4.transition === m.TransitionType.ALLOW));
+                let o3 = t4;
+                for (const t5 of c2) {
+                  let a3;
                   for (let e4 = this.history.size() - 1; e4 >= 0; e4--) {
                     const n3 = this.history.get(e4);
-                    if (n3 && (o2 = null === (i2 = n3.answers) || void 0 === i2 ? void 0 : i2.find(((e5) => e5.key === t5.questionRef)), o2)) break;
+                    if (n3 && (a3 = null === (i2 = n3.answers) || void 0 === i2 ? void 0 : i2.find(((e5) => e5.key === t5.questionRef)), a3)) break;
                   }
-                  let l3 = false;
-                  if (o2) {
-                    const e4 = null === (s2 = this.formData) || void 0 === s2 ? void 0 : s2.questions.find(((e5) => e5.ref === t5.questionRef)), i3 = Array.isArray(o2.value) ? o2.value : [o2.value], n3 = Array.isArray(t5.value) ? t5.value : [t5.value];
-                    if ((null == e4 ? void 0 : e4.type) === r.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX) l3 = this.evaluateMatrixPreconditional(t5, o2);
+                  let l2 = false;
+                  if (a3) {
+                    const e4 = null === (s2 = this.formData) || void 0 === s2 ? void 0 : s2.questions.find(((e5) => e5.ref === t5.questionRef)), i3 = Array.isArray(a3.value) ? a3.value : [a3.value], n3 = Array.isArray(t5.value) ? t5.value : [t5.value];
+                    if ((null == e4 ? void 0 : e4.type) === r.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX) l2 = this.evaluateMatrixPreconditional(t5, a3);
                     else switch (t5.typeOperator) {
                       case "EQUAL":
                       case "INQ":
-                        l3 = i3.some(((e5) => n3.includes(e5)));
+                        l2 = i3.some(((e5) => n3.includes(e5)));
                         break;
                       case "NOEQUAL":
                       case "NINQ":
-                        l3 = i3.every(((e5) => !n3.includes(e5)));
+                        l2 = i3.every(((e5) => !n3.includes(e5)));
                         break;
                       case "GREATER":
-                        l3 = i3.some(((e5) => Number(e5) > Number(n3[0])));
+                        l2 = i3.some(((e5) => Number(e5) > Number(n3[0])));
                         break;
                       case "LESS":
-                        l3 = i3.some(((e5) => Number(e5) < Number(n3[0])));
+                        l2 = i3.some(((e5) => Number(e5) < Number(n3[0])));
                         break;
                       case "GREATEREQUAL":
-                        l3 = i3.some(((e5) => Number(e5) >= Number(n3[0])));
+                        l2 = i3.some(((e5) => Number(e5) >= Number(n3[0])));
                         break;
                       case "LESSEQUAL":
-                        l3 = i3.some(((e5) => Number(e5) <= Number(n3[0])));
+                        l2 = i3.some(((e5) => Number(e5) <= Number(n3[0])));
                     }
                   }
-                  if (t5.transition === c.TransitionType.ALLOW) l3 || (a3 = false);
-                  else if (t5.transition === c.TransitionType.NEXT && l3) return this.feedback.answers = [], void (n2 && (yield this.renderNextQuestion(e3, n2)));
+                  if (t5.transition === m.TransitionType.ALLOW) l2 || (o3 = false);
+                  else if (t5.transition === m.TransitionType.NEXT && l2) return this.feedback.answers = [], void (n2 && (yield this.renderNextQuestion(e3, n2)));
                 }
-                if (t4 && !a3) return this.feedback.answers = [], void (n2 && (yield this.renderNextQuestion(e3, n2)));
+                if (t4 && !o3) return this.feedback.answers = [], void (n2 && (yield this.renderNextQuestion(e3, n2)));
               }
-              n2.elements = (0, o.renderQuestions)(n2.questions, this.formOptionsConfig.questionFormat, null === (a2 = this.formData) || void 0 === a2 ? void 0 : a2.lang[0], null === (l2 = this.formData) || void 0 === l2 ? void 0 : l2.product, (() => this.send())), e3.innerHTML = "", null === (d2 = n2.elements) || void 0 === d2 || d2.forEach(((t4) => e3.appendChild(t4))), this.history.enqueue(n2), this.progress = this.total - this.graph.findMaxDepth(n2), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ response: this.id, loading: false, progress: this.progress, total: this.total, followup: n2.isFollowup, completed: this.completed, error: null }));
+              n2.elements = (0, l.renderQuestions)(n2.questions, this.formOptionsConfig.questionFormat, null === (o2 = this.formData) || void 0 === o2 ? void 0 : o2.lang[0], null === (a2 = this.formData) || void 0 === a2 ? void 0 : a2.product, (() => this.send())), e3.innerHTML = "", null === (d2 = n2.elements) || void 0 === d2 || d2.forEach(((t4) => e3.appendChild(t4))), this.history.enqueue(n2), this.progress = this.total - this.graph.findMaxDepth(n2), this.formOptionsConfig.afterSubmitEvent && (yield this.formOptionsConfig.afterSubmitEvent({ response: this.id, loading: false, progress: this.progress, total: this.total, followup: n2.isFollowup, completed: this.completed, error: null }));
             }));
           }
           back() {
@@ -912,25 +2974,25 @@ var require_magicfeedback_sdk_browser = __commonJS({
             }));
           }
           previewQuestion(e3, t3, i2) {
-            var n2, r2;
-            const s2 = Array.isArray(t3) ? t3 : [t3];
-            if (!s2 || 0 === s2.length) throw new Error("[MagicFeedback] No question provided for preview");
+            var n2, r2, s2;
+            const o2 = Array.isArray(t3) ? t3 : [t3];
+            if (!o2 || 0 === o2.length) throw new Error("[MagicFeedback] No question provided for preview");
             const a2 = document.getElementById(e3);
             if (!a2) throw new Error(`[MagicFeedback] Element with ID '${e3}' not found.`);
-            const { format: l2 = this.formOptionsConfig.questionFormat || "standard", language: d2 = (null === (n2 = this.formData) || void 0 === n2 ? void 0 : n2.lang) && this.formData.lang[0] || "en", product: c2 = (null === (r2 = this.formData) || void 0 === r2 ? void 0 : r2.product) || { customIcons: false }, clearContainer: u2 = true, wrap: p2 = true } = i2 || {};
-            u2 && (a2.innerHTML = "");
-            let m = [];
+            const { format: d2 = this.formOptionsConfig.questionFormat || "standard", language: u2 = (null === (n2 = this.formData) || void 0 === n2 ? void 0 : n2.lang) && this.formData.lang[0] || "en", product: p2 = (null === (r2 = this.formData) || void 0 === r2 ? void 0 : r2.product) || { customIcons: false }, style: h2 = (null === (s2 = this.formData) || void 0 === s2 ? void 0 : s2.style) || {}, clearContainer: m2 = true, wrap: f2 = true } = i2 || {};
+            m2 && (a2.innerHTML = ""), (null == h2 ? void 0 : h2.primaryColor) && (0, c.applyPrimaryColor)(a2, h2.primaryColor);
+            let g2 = [];
             try {
-              m = (0, o.renderQuestions)(s2, l2, d2, c2);
+              g2 = (0, l.renderQuestions)(o2, d2, u2, p2);
             } catch (e4) {
               throw this.log.err(e4), e4;
             }
-            let h = a2;
-            if (p2) {
+            let v = a2;
+            if (f2) {
               const e4 = document.createElement("div");
-              e4.classList.add("magicfeedback-preview-question"), h.appendChild(e4), h = e4;
+              e4.classList.add("magicfeedback-preview-question"), v.appendChild(e4), v = e4;
             }
-            return m.forEach(((e4) => h.appendChild(e4))), a2;
+            return g2.forEach(((e4) => v.appendChild(e4))), a2;
           }
           parseMatrixAnswerPre(e3) {
             if (!e3 || !e3.value) return [];
@@ -1014,28 +3076,28 @@ var require_magicfeedback_sdk_browser = __commonJS({
             if (!e3) return;
             e3.edges.sort(((e4, t4) => "DIRECT" === e4.typeCondition ? 1 : "DIRECT" === t4.typeCondition ? -1 : 0));
             const n2 = e3.edges.find(((i3) => {
-              const n3 = e3.questions.find(((e4) => e4.ref === i3.questionRef)), a = null == t3 ? void 0 : t3.filter(((e4) => e4.key === i3.questionRef));
+              const n3 = e3.questions.find(((e4) => e4.ref === i3.questionRef)), o = null == t3 ? void 0 : t3.filter(((e4) => e4.key === i3.questionRef));
               if ("DIRECT" === i3.typeCondition) return true;
-              if (!a || 0 === a.length) return false;
-              if ((null == n3 ? void 0 : n3.type) === r.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX) return this.evaluateMatrixCondition(i3, a);
-              const o = Array.isArray(i3.value) ? i3.value : [i3.value];
+              if (!o || 0 === o.length) return false;
+              if ((null == n3 ? void 0 : n3.type) === r.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX) return this.evaluateMatrixCondition(i3, o);
+              const a = Array.isArray(i3.value) ? i3.value : [i3.value];
               switch (i3.typeOperator) {
                 case s.OperatorType.EQUAL:
-                  return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => o.includes(e5)))));
+                  return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => a.includes(e5)))));
                 case s.OperatorType.NOEQUAL:
-                  return a.every(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).every(((e5) => !o.includes(e5)))));
+                  return o.every(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).every(((e5) => !a.includes(e5)))));
                 case s.OperatorType.GREATER:
-                  return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => o.some(((t4) => Number(e5) > Number(t4)))))));
+                  return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => a.some(((t4) => Number(e5) > Number(t4)))))));
                 case s.OperatorType.LESS:
-                  return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => o.some(((t4) => Number(e5) < Number(t4)))))));
+                  return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => a.some(((t4) => Number(e5) < Number(t4)))))));
                 case s.OperatorType.GREATEREQUAL:
-                  return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => o.some(((t4) => Number(e5) >= Number(t4)))))));
+                  return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => a.some(((t4) => Number(e5) >= Number(t4)))))));
                 case s.OperatorType.LESSEQUAL:
-                  return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => o.some(((t4) => Number(e5) <= Number(t4)))))));
+                  return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => a.some(((t4) => Number(e5) <= Number(t4)))))));
                 case s.OperatorType.INQ:
-                  return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => o.includes(e5)))));
+                  return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => a.includes(e5)))));
                 case s.OperatorType.NINQ:
-                  return a.every(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).every(((e5) => !o.includes(e5)))));
+                  return o.every(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).every(((e5) => !a.includes(e5)))));
                 default:
                   return false;
               }
@@ -1072,17 +3134,17 @@ var require_magicfeedback_sdk_browser = __commonJS({
           DFSUtil(e3, t3, i2) {
             t3.add(e3);
             let n2 = i2;
-            const r2 = [...e3.edges.filter(((e4) => e4.typeCondition !== s.ConditionType.PRECONDITIONAL)) || []], a = this.getNextEdgeByDefault(e3);
-            if (a) {
-              const i3 = this.getNodeById(a);
+            const r2 = [...e3.edges.filter(((e4) => e4.typeCondition !== s.ConditionType.PRECONDITIONAL)) || []], o = this.getNextEdgeByDefault(e3);
+            if (o) {
+              const i3 = this.getNodeById(o);
               i3 && !t3.has(i3) && r2.push(new s.PageRoute(i3.id, "", s.OperatorType.DEFAULT, [""], s.TransitionType.PAGE, i3.id, e3.id));
             }
             for (const e4 of r2) {
               if (!e4.transitionDestiny) continue;
               const r3 = this.getNodeById(e4.transitionDestiny);
               if (r3 && !t3.has(r3)) {
-                const e5 = i2 + 1, s2 = new Set(t3), a2 = this.DFSUtil(r3, s2, e5);
-                n2 = Math.max(n2, a2);
+                const e5 = i2 + 1, s2 = new Set(t3), o2 = this.DFSUtil(r3, s2, e5);
+                n2 = Math.max(n2, o2);
               }
             }
             return n2;
@@ -1098,25 +3160,25 @@ var require_magicfeedback_sdk_browser = __commonJS({
             return Array.isArray(e3.value) && e3.value.length > 0 && "object" == typeof e3.value[0] && null !== e3.value[0] && "key" in e3.value[0] ? e3.value : [];
           }
           evaluateMatrixCondition(e3, t3) {
-            const i2 = Array.isArray(e3.value) ? e3.value : [e3.value], n2 = new Set(e3.option || []), r2 = t3[0], a = this.parseMatrixAnswer(r2);
-            if (!a.length) return false;
-            const o = n2.size > 0 ? a.filter(((e4) => n2.has(e4.key))) : a;
+            const i2 = Array.isArray(e3.value) ? e3.value : [e3.value], n2 = new Set(e3.option || []), r2 = t3[0], o = this.parseMatrixAnswer(r2);
             if (!o.length) return false;
+            const a = n2.size > 0 ? o.filter(((e4) => n2.has(e4.key))) : o;
+            if (!a.length) return false;
             switch (e3.typeOperator) {
               case s.OperatorType.EQUAL:
               case s.OperatorType.INQ:
-                return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.includes(e5)))));
+                return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.includes(e5)))));
               case s.OperatorType.NOEQUAL:
               case s.OperatorType.NINQ:
-                return o.every(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).every(((e5) => !i2.includes(e5)))));
+                return a.every(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).every(((e5) => !i2.includes(e5)))));
               case s.OperatorType.GREATER:
-                return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) > Number(t4)))))));
+                return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) > Number(t4)))))));
               case s.OperatorType.LESS:
-                return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) < Number(t4)))))));
+                return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) < Number(t4)))))));
               case s.OperatorType.GREATEREQUAL:
-                return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) >= Number(t4)))))));
+                return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) >= Number(t4)))))));
               case s.OperatorType.LESSEQUAL:
-                return o.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) <= Number(t4)))))));
+                return a.some(((e4) => (Array.isArray(e4.value) ? e4.value : [e4.value]).some(((e5) => i2.some(((t4) => Number(e5) <= Number(t4)))))));
               default:
                 return false;
             }
@@ -1146,17 +3208,26 @@ var require_magicfeedback_sdk_browser = __commonJS({
         })(i = t2.ConditionType || (t2.ConditionType = {})), (r = t2.OperatorType || (t2.OperatorType = {})).EQUAL = "EQUAL", r.NOEQUAL = "NOEQUAL", r.GREATER = "GREATER", r.LESS = "LESS", r.GREATEREQUAL = "GREATEREQUAL", r.LESSEQUAL = "LESSEQUAL", r.INQ = "INQ", r.NINQ = "NINQ", r.DEFAULT = "DEFAULT", (function(e3) {
           e3.ACTIVE = "ACTIVE", e3.DEPRECATED = "DEPRECATED", e3.DELETE = "DELETE";
         })(n = t2.StatusType || (t2.StatusType = {})), t2.PageRoute = class {
-          constructor(e3, t3, r2, s2, a, o, l, d, c, u) {
-            this.id = e3, this.questionRef = t3, this.typeCondition = d || i.LOGICAL, this.typeOperator = r2, this.value = s2 || [], this.transition = a, this.transitionDestiny = o, this.status = n.ACTIVE, this.generatedAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.integrationPageId = l, this.position = c || 0, this.option = u || [];
+          constructor(e3, t3, r2, s2, o, a, l, d, c, u) {
+            this.id = e3, this.questionRef = t3, this.typeCondition = d || i.LOGICAL, this.typeOperator = r2, this.value = s2 || [], this.transition = o, this.transitionDestiny = a, this.status = n.ACTIVE, this.generatedAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.integrationPageId = l, this.position = c || 0, this.option = u || [];
           }
         };
       }, 558: (e2, t2) => {
         "use strict";
         var i, n;
-        Object.defineProperty(t2, "__esModule", { value: true }), t2.QuestionType = t2.FEEDBACKAPPANSWERTYPE = void 0, (n = t2.FEEDBACKAPPANSWERTYPE || (t2.FEEDBACKAPPANSWERTYPE = {})).CONTACT = "CONTACT", n.MULTIPLECHOISE_IMAGE = "MULTIPLECHOISE_IMAGE", n.EMAIL = "EMAIL", n.RATING_STAR = "RATING_STAR", n.RADIO = "RADIO", n.MULTIPLECHOICE = "MULTIPLECHOICE", n.SELECT = "SELECT", n.TEXT = "TEXT", n.LONGTEXT = "LONGTEXT", n.NUMBER = "NUMBER", n.RATING_EMOJI = "RATING_EMOJI", n.RATING_NUMBER = "RATING_NUMBER", n.DATE = "DATE", n.BOOLEAN = "BOOLEAN", n.PASSWORD = "PASSWORD", n.CONSENT = "CONSENT", n.MULTI_QUESTION_MATRIX = "MULTI_QUESTION_MATRIX", n.POINT_SYSTEM = "POINT_SYSTEM", n.PRIORITY_LIST = "PRIORITY_LIST", n.INFO_PAGE = "INFO_PAGE", n.UPLOAD_FILE = "UPLOAD_FILE", n.UPLOAD_IMAGE = "UPLOAD_IMAGE", t2.QuestionType = class {
-        }, (function(e3) {
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.AGENT_ANSWER_TYPE_BLOCKED = t2.QuestionType = t2.FEEDBACKAPPANSWERTYPE = void 0, (n = t2.FEEDBACKAPPANSWERTYPE || (t2.FEEDBACKAPPANSWERTYPE = {})).CONTACT = "CONTACT", n.MULTIPLECHOISE_IMAGE = "MULTIPLECHOISE_IMAGE", n.EMAIL = "EMAIL", n.RATING_STAR = "RATING_STAR", n.RADIO = "RADIO", n.MULTIPLECHOICE = "MULTIPLECHOICE", n.SELECT = "SELECT", n.TEXT = "TEXT", n.LONGTEXT = "LONGTEXT", n.NUMBER = "NUMBER", n.RATING_EMOJI = "RATING_EMOJI", n.RATING_NUMBER = "RATING_NUMBER", n.DATE = "DATE", n.BOOLEAN = "BOOLEAN", n.PASSWORD = "PASSWORD", n.CONSENT = "CONSENT", n.MULTI_QUESTION_MATRIX = "MULTI_QUESTION_MATRIX", n.POINT_SYSTEM = "POINT_SYSTEM", n.PRIORITY_LIST = "PRIORITY_LIST", n.INFO_PAGE = "INFO_PAGE", n.UPLOAD_FILE = "UPLOAD_FILE", n.UPLOAD_IMAGE = "UPLOAD_IMAGE", t2.QuestionType = class {
+        }, t2.AGENT_ANSWER_TYPE_BLOCKED = "ABUSIVE_OR_OFFENSIVE", (function(e3) {
           e3.FORM = "form", e3.DIV = "div";
         })(i || (i = {}));
+      }, 565: (e2, t2) => {
+        "use strict";
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.applyPrimaryColor = t2.generateContainer = void 0, t2.generateContainer = function(e3, t3) {
+          let i = document.getElementById(e3);
+          if (!i && (i = document.getElementById("magicfeedback-container-" + t3), !i)) throw new Error(`Element with ID '${e3}' not found.`);
+          return i.classList.add("magicfeedback-container"), i.id = "magicfeedback-container-" + t3, i.innerHTML = "", i;
+        }, t2.applyPrimaryColor = function(e3, t3) {
+          e3.style.setProperty("--mf-primary", t3), e3.style.setProperty("--mf-primary-hover", `color-mix(in srgb, ${t3} 85%, black)`), e3.style.setProperty("--mf-primary-light", `color-mix(in srgb, ${t3} 15%, white)`), e3.style.setProperty("--mf-primary-border", `color-mix(in srgb, ${t3} 35%, transparent)`), e3.style.setProperty("--mf-border-focus", t3);
+        };
       }, 516: (e2, t2) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.getUrlParam = t2.getBooleanOptions = t2.parseTitle = void 0, t2.parseTitle = function(e3, t3) {
@@ -1204,81 +3275,106 @@ var require_magicfeedback_sdk_browser = __commonJS({
         };
       }, 559: (e2, t2) => {
         "use strict";
-        function i(e3, t3, i2, n, r = false, s = true, a = "ltr", o = "row") {
-          const l = document.createElement("div");
-          l.classList.add("magicfeedback-rating-placeholder"), l.style.display = "flex", l.style.flexDirection = o, l.style.alignItems = "center", l.style.justifyContent = "space-between", l.style.width = r ? `calc(100% - (100% / ${t3 + 1}))` : "100%", l.style.marginRight = "auto", s && window.innerWidth < 600 && (l.style.flexDirection = "column");
-          const d = document.createElement("span");
-          d.textContent = null != i2 ? i2 : null, d.classList.add("magicfeedback-rating-placeholder-value"), d.style.fontSize = "15px", d.style.display = "block", d.style.minWidth = "0", d.style.overflowWrap = "anywhere", d.style.wordBreak = "break-word", d.style.textAlign = "ltr" === a ? "left" : "right", d.style.width = "50%", (s && window.innerWidth < 600 || "column" === o) && (d.textContent = `${e3} = ${i2}`, d.style.width = "100%", d.style.textAlign = "left", d.style.marginBottom = "5px");
-          const c = document.createElement("span");
-          return c.textContent = null != n ? n : null, c.classList.add("magicfeedback-rating-placeholder-value"), c.style.fontSize = "15px", c.style.display = "block", c.style.minWidth = "0", c.style.overflowWrap = "anywhere", c.style.wordBreak = "break-word", c.style.textAlign = "ltr" === a ? "right" : "left", c.style.width = "50%", (s && window.innerWidth < 600 || "column" === o) && (c.textContent = `${t3} = ${n}`, c.style.width = "100%", c.style.textAlign = "left", c.style.marginBottom = "5px"), "ltr" === a ? (i2 && l.appendChild(d), n && l.appendChild(c)) : (n && l.appendChild(c), i2 && l.appendChild(d)), l;
+        function i(e3, t3, i2 = "ltr") {
+          const n = document.createElement("div");
+          n.classList.add("magicfeedback-rating-placeholder");
+          const r = document.createElement("span");
+          r.textContent = null != e3 ? e3 : "", r.classList.add("magicfeedback-rating-placeholder-value");
+          const s = document.createElement("span");
+          return s.textContent = null != t3 ? t3 : "", s.classList.add("magicfeedback-rating-placeholder-value"), "ltr" === i2 ? (e3 && n.appendChild(r), t3 && n.appendChild(s)) : (t3 && n.appendChild(s), e3 && n.appendChild(r)), n;
         }
         Object.defineProperty(t2, "__esModule", { value: true }), t2.createRatingNumberElement = t2.createStarRating = t2.createRatingPlaceholder = void 0, t2.createRatingPlaceholder = i, t2.createStarRating = function(e3, t3, n, r = () => {
         }, s) {
-          const a = "magicfeedback-rating-star-selected", o = document.createElement("div");
-          o.classList.add("magicfeedback-rating-star-container"), o.style.maxWidth = "300px", o.style.margin = "auto", o.dataset.originalSelection = "0";
+          const o = "magicfeedback-rating-star-selected", a = document.createElement("div");
+          a.classList.add("magicfeedback-rating-star-container"), a.style.maxWidth = "300px", a.style.margin = "auto", a.dataset.originalSelection = "0";
           for (let t4 = 1; t4 <= 5; t4++) {
             const i2 = document.createElement("label");
             i2.classList.add("magicfeedback-rating-star-option");
             const n2 = document.createElement("input");
             n2.id = `rating-${e3}-${t4}`, n2.type = "radio", n2.name = e3, n2.value = t4.toString(), n2.style.position = "absolute", n2.style.opacity = "0", n2.style.width = "0", n2.style.height = "0", n2.classList.add("magicfeedback-input"), s && s === n2.value && (n2.checked = true), n2.addEventListener("change", (() => {
-              const e4 = o.querySelectorAll(".rating__star");
-              for (let t5 = 0; t5 < e4.length; t5++) t5 + 1 <= Number(n2.value) ? e4[t5].classList.contains(a) || e4[t5].classList.add(a) : e4[t5].classList.contains(a) && e4[t5].classList.remove(a);
-              o.dataset.originalSelection = n2.value, r && r();
+              const e4 = a.querySelectorAll(".rating__star");
+              for (let t5 = 0; t5 < e4.length; t5++) t5 + 1 <= Number(n2.value) ? e4[t5].classList.contains(o) || e4[t5].classList.add(o) : e4[t5].classList.contains(o) && e4[t5].classList.remove(o);
+              a.dataset.originalSelection = n2.value, r && r();
             })), i2.appendChild(n2);
             const l2 = document.createElement("label");
             l2.htmlFor = `rating-${e3}-${t4}`, l2.classList.add("rating__star"), l2.textContent = "\u2605", l2.style.fontSize = "40px", l2.style.color = "#CCCCCC", l2.style.cursor = "pointer", l2.addEventListener("mouseenter", (() => {
-              const e4 = o.querySelectorAll(".rating__star"), i3 = t4 - 1;
+              const e4 = a.querySelectorAll(".rating__star"), i3 = t4 - 1;
               e4.forEach(((e5, t5) => {
-                t5 <= i3 ? e5.classList.contains(a) || e5.classList.add(a) : e5.classList.contains(a) && e5.classList.remove(a);
+                t5 <= i3 ? e5.classList.contains(o) || e5.classList.add(o) : e5.classList.contains(o) && e5.classList.remove(o);
               }));
             })), l2.addEventListener("mouseleave", (() => {
-              const e4 = Number(o.dataset.originalSelection || "0");
-              o.querySelectorAll(".rating__star").forEach(((t5, i3) => {
-                i3 < e4 ? t5.classList.contains(a) || t5.classList.add(a) : t5.classList.contains(a) && t5.classList.remove(a);
+              const e4 = Number(a.dataset.originalSelection || "0");
+              a.querySelectorAll(".rating__star").forEach(((t5, i3) => {
+                i3 < e4 ? t5.classList.contains(o) || t5.classList.add(o) : t5.classList.contains(o) && t5.classList.remove(o);
               }));
-            })), i2.appendChild(l2), o.appendChild(i2);
+            })), i2.appendChild(l2), a.appendChild(i2);
           }
-          const l = i(1, 5, t3, n, false, false);
-          return l.childElementCount > 0 && (o.classList.add("magicfeedback-rating-container--with-placeholder"), o.insertBefore(l, o.firstChild)), o;
-        }, t2.createRatingNumberElement = function(e3, t3, n, r, s, a, o, l) {
-          var d;
-          const c = document.createElement("div");
-          c.classList.add("magicfeedback-rating-number");
-          const u = "ltr" === n ? r : `${r}-reverse`, p = document.createElement("div");
-          p.classList.add("magicfeedback-rating-number-container"), p.classList.add(`magicfeedback-rating-number-container-${n}`), p.classList.add(`magicfeedback-rating-number-container-${r}`), p.style.display = "flex", p.style.flexDirection = u, p.setAttribute("role", "radiogroup"), p.setAttribute("aria-label", (null == t3 ? void 0 : t3.ariaLabel) || "Rating");
-          const m = (null == t3 ? void 0 : t3.max) ? Number(null == t3 ? void 0 : t3.max) : 10, h = (null == t3 ? void 0 : t3.min) ? Number(null == t3 ? void 0 : t3.min) : 0, f = (null == t3 ? void 0 : t3.numberPlaceholders) || null, v = !(s || "column" === r) && ((null == t3 ? void 0 : t3.minPlaceholder) || (null == t3 ? void 0 : t3.maxPlaceholder));
-          if (v) {
-            const e4 = i(h, m, null == t3 ? void 0 : t3.minPlaceholder, null == t3 ? void 0 : t3.maxPlaceholder, null !== (d = null == t3 ? void 0 : t3.extraOption) && void 0 !== d && d, false, n, "row");
-            e4.childElementCount > 0 && (p.classList.add("magicfeedback-rating-number-container--with-placeholder"), p.insertBefore(e4, p.firstChild));
+          const l = i(t3, n);
+          return l.childElementCount > 0 && a.appendChild(l), a;
+        }, t2.createRatingNumberElement = function(e3, t3, i2, n, r, s, o) {
+          var a, l;
+          const d = document.createElement("div");
+          d.classList.add("magicfeedback-rating-number");
+          const c = "column" === n, u = "ltr" === i2 ? n : `${n}-reverse`, p = document.createElement("div");
+          p.classList.add("magicfeedback-rating-number-container"), p.classList.add(`magicfeedback-rating-number-container-${i2}`), p.classList.add(`magicfeedback-rating-number-container-${n}`), p.style.display = "flex", p.style.flexDirection = u, p.setAttribute("role", "radiogroup"), p.setAttribute("aria-label", (null == t3 ? void 0 : t3.ariaLabel) || "Rating");
+          const h = (null == t3 ? void 0 : t3.max) ? Number(null == t3 ? void 0 : t3.max) : 10, m = (null == t3 ? void 0 : t3.min) ? Number(null == t3 ? void 0 : t3.min) : 0;
+          !c && h - m + 1 > 6 && p.classList.add("magicfeedback-rating-number-container-row--dense");
+          const f = (null == t3 ? void 0 : t3.numberPlaceholders) || null, g = !(!f || !Object.keys(f).length);
+          let v = null;
+          if (!c && ((null == t3 ? void 0 : t3.minPlaceholder) || (null == t3 ? void 0 : t3.maxPlaceholder))) {
+            v = document.createElement("div"), v.classList.add("magicfeedback-rating-number-scale-labels");
+            const e4 = document.createElement("span");
+            e4.classList.add("magicfeedback-rating-number-scale-label"), e4.textContent = null !== (a = null == t3 ? void 0 : t3.minPlaceholder) && void 0 !== a ? a : "";
+            const n2 = document.createElement("span");
+            n2.classList.add("magicfeedback-rating-number-scale-label"), n2.textContent = null !== (l = null == t3 ? void 0 : t3.maxPlaceholder) && void 0 !== l ? l : "", "ltr" === i2 ? (v.appendChild(e4), v.appendChild(n2)) : (v.appendChild(n2), v.appendChild(e4));
           }
-          for (let i2 = h; i2 <= m; i2++) {
-            const n2 = document.createElement("div");
-            n2.classList.add("magicfeedback-rating-number-option"), n2.classList.add(`magicfeedback-rating-number-option-${r}`);
-            const d2 = document.createElement("label");
-            d2.htmlFor = `rating-${e3}-${i2}`, d2.classList.add("magicfeedback-rating-number-option-label-container");
-            let c2 = i2.toString();
-            v ? f && f[i2] && !s && (d2.title = f[i2]) : f && f[i2] ? c2 += ` = ${f[i2]}` : i2 === h && (null == t3 ? void 0 : t3.minPlaceholder) ? c2 += ` = ${null == t3 ? void 0 : t3.minPlaceholder}` : i2 === m && (null == t3 ? void 0 : t3.maxPlaceholder) && (c2 += ` = ${null == t3 ? void 0 : t3.maxPlaceholder}`);
-            const u2 = document.createElement("input");
-            u2.id = `rating-${e3}-${i2}`, u2.type = "radio", u2.name = e3, u2.value = i2.toString(), u2.classList.add(a), u2.classList.add("magicfeedback-input"), u2.setAttribute("aria-label", `${i2}`), o && u2.addEventListener("change", (() => o())), l && l === u2.value && (u2.checked = true);
-            const g = document.createElement("label");
-            g.htmlFor = `rating-${e3}-${i2}`, g.textContent = c2, g.classList.add("magicfeedback-rating-number-value"), d2.appendChild(u2), d2.appendChild(g), n2.appendChild(d2), p.appendChild(n2);
+          let y = null;
+          if (c && !g && (p.classList.add("magicfeedback-rating-number-container-column--bare"), (null == t3 ? void 0 : t3.minPlaceholder) || (null == t3 ? void 0 : t3.maxPlaceholder))) {
+            const e4 = "ltr" === i2 ? null == t3 ? void 0 : t3.minPlaceholder : null == t3 ? void 0 : t3.maxPlaceholder, n2 = "ltr" === i2 ? null == t3 ? void 0 : t3.maxPlaceholder : null == t3 ? void 0 : t3.minPlaceholder;
+            if (e4) {
+              const t4 = document.createElement("div");
+              t4.classList.add("magicfeedback-rating-number-scale-label-block"), t4.textContent = e4, d.appendChild(t4);
+            }
+            n2 && (y = document.createElement("div"), y.classList.add("magicfeedback-rating-number-scale-label-block"), y.textContent = n2);
           }
-          if ((null == t3 ? void 0 : t3.extraOption) && (null == t3 ? void 0 : t3.extraOptionText)) {
-            const i2 = document.createElement("div");
-            i2.classList.add("magicfeedback-rating-number-option");
-            const r2 = document.createElement("label");
-            r2.htmlFor = `rating-${e3}-extra`, r2.classList.add("magicfeedback-rating-number-option-label-container");
-            const s2 = document.createElement("input");
-            s2.id = `rating-${e3}-extra`, s2.type = "radio", s2.name = e3, s2.value = "-", s2.classList.add(a), s2.classList.add("magicfeedback-input"), s2.setAttribute("aria-label", null == t3 ? void 0 : t3.extraOptionText), o && s2.addEventListener("change", (() => o()));
+          for (let i3 = m; i3 <= h; i3++) {
+            const a2 = document.createElement("div");
+            a2.classList.add("magicfeedback-rating-number-option"), a2.classList.add(`magicfeedback-rating-number-option-${n}`);
             const l2 = document.createElement("label");
-            l2.htmlFor = `rating-${e3}-extra`, l2.textContent = null == t3 ? void 0 : t3.extraOptionText, l2.classList.add("magicfeedback-rating-number-value"), r2.appendChild(s2), r2.appendChild(l2), i2.appendChild(r2), "ltr" === n ? p.appendChild(i2) : p.insertBefore(i2, p.firstChild);
+            l2.htmlFor = `rating-${e3}-${i3}`, l2.classList.add("magicfeedback-rating-number-option-label-container");
+            const d2 = g && (f[i3] || (i3 === m ? null == t3 ? void 0 : t3.minPlaceholder : void 0) || (i3 === h ? null == t3 ? void 0 : t3.maxPlaceholder : void 0)), u2 = document.createElement("input");
+            u2.id = `rating-${e3}-${i3}`, u2.type = "radio", u2.name = e3, u2.value = i3.toString(), u2.classList.add(r), u2.classList.add("magicfeedback-input"), u2.setAttribute("aria-label", d2 ? `${i3} \u2014 ${d2}` : `${i3}`), s && u2.addEventListener("change", (() => s())), o && o === u2.value && (u2.checked = true), l2.appendChild(u2);
+            const v2 = document.createElement("span");
+            v2.classList.add("magicfeedback-rating-number-value");
+            const y2 = document.createElement("span");
+            if (y2.textContent = i3.toString(), y2.classList.add("magicfeedback-rating-number-value-num"), v2.appendChild(y2), c) {
+              if (d2) {
+                const e4 = document.createElement("span");
+                e4.textContent = d2, e4.classList.add("magicfeedback-rating-number-value-label"), v2.appendChild(e4);
+              }
+            } else f && f[i3] && (l2.title = f[i3]);
+            l2.appendChild(v2), a2.appendChild(l2), p.appendChild(a2);
           }
-          return c.appendChild(p), c;
+          if (d.appendChild(p), v && d.appendChild(v), y && d.appendChild(y), (null == t3 ? void 0 : t3.extraOption) && (null == t3 ? void 0 : t3.extraOptionText)) {
+            const i3 = document.createElement("div");
+            i3.classList.add("magicfeedback-rating-number-extra-row");
+            const n2 = document.createElement("div");
+            n2.classList.add("magicfeedback-rating-number-option"), n2.classList.add("magicfeedback-rating-number-option--extra");
+            const o2 = document.createElement("label");
+            o2.htmlFor = `rating-${e3}-extra`, o2.classList.add("magicfeedback-rating-number-option-label-container");
+            const a2 = document.createElement("input");
+            a2.id = `rating-${e3}-extra`, a2.type = "radio", a2.name = e3, a2.value = "-", a2.classList.add(r), a2.classList.add("magicfeedback-input"), a2.setAttribute("aria-label", null == t3 ? void 0 : t3.extraOptionText), s && a2.addEventListener("change", (() => s()));
+            const l2 = document.createElement("span");
+            l2.classList.add("magicfeedback-rating-number-value");
+            const c2 = document.createElement("span");
+            c2.textContent = null == t3 ? void 0 : t3.extraOptionText, c2.classList.add("magicfeedback-rating-number-value-label"), l2.appendChild(c2), o2.appendChild(a2), o2.appendChild(l2), n2.appendChild(o2), i3.appendChild(n2), d.appendChild(i3);
+          }
+          return d;
         };
       }, 42: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.getQuestionRenderer = void 0;
-        const n = i(558), r = i(998), s = i(72), a = i(732), o = i(90), l = i(65), d = i(85), c = i(817), u = i(965), p = i(180), m = i(991), h = i(152), f = i(917), v = i(452), g = i(644), y = i(773), b = i(66), E = i(843), k = i(250), A = i(409), C = i(282), T = /* @__PURE__ */ new Map([[n.FEEDBACKAPPANSWERTYPE.TEXT, o.renderText], [n.FEEDBACKAPPANSWERTYPE.LONGTEXT, s.renderLongText], [n.FEEDBACKAPPANSWERTYPE.NUMBER, a.renderNumber], [n.FEEDBACKAPPANSWERTYPE.RADIO, r.renderChoice], [n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE, r.renderChoice], [n.FEEDBACKAPPANSWERTYPE.BOOLEAN, l.renderBoolean], [n.FEEDBACKAPPANSWERTYPE.SELECT, d.renderSelect], [n.FEEDBACKAPPANSWERTYPE.DATE, c.renderDate], [n.FEEDBACKAPPANSWERTYPE.EMAIL, u.renderEmail], [n.FEEDBACKAPPANSWERTYPE.PASSWORD, p.renderPassword], [n.FEEDBACKAPPANSWERTYPE.CONSENT, m.renderConsent], [n.FEEDBACKAPPANSWERTYPE.RATING_EMOJI, h.renderRatingEmoji], [n.FEEDBACKAPPANSWERTYPE.RATING_NUMBER, f.renderRatingNumber], [n.FEEDBACKAPPANSWERTYPE.RATING_STAR, v.renderRatingStar], [n.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX, g.renderMatrix], [n.FEEDBACKAPPANSWERTYPE.PRIORITY_LIST, y.renderPriorityList], [n.FEEDBACKAPPANSWERTYPE.POINT_SYSTEM, b.renderPointSystem], [n.FEEDBACKAPPANSWERTYPE.UPLOAD_IMAGE, E.renderUploadImage], [n.FEEDBACKAPPANSWERTYPE.UPLOAD_FILE, k.renderUploadFile], [n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOISE_IMAGE, A.renderMultipleChoiceImage], [n.FEEDBACKAPPANSWERTYPE.INFO_PAGE, C.renderInfoPage]]);
+        const n = i(558), r = i(998), s = i(72), o = i(732), a = i(90), l = i(65), d = i(85), c = i(817), u = i(965), p = i(180), h = i(991), m = i(152), f = i(917), g = i(452), v = i(644), y = i(773), b = i(66), E = i(843), A = i(250), k = i(409), C = i(282), T = /* @__PURE__ */ new Map([[n.FEEDBACKAPPANSWERTYPE.TEXT, a.renderText], [n.FEEDBACKAPPANSWERTYPE.LONGTEXT, s.renderLongText], [n.FEEDBACKAPPANSWERTYPE.NUMBER, o.renderNumber], [n.FEEDBACKAPPANSWERTYPE.RADIO, r.renderChoice], [n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE, r.renderChoice], [n.FEEDBACKAPPANSWERTYPE.BOOLEAN, l.renderBoolean], [n.FEEDBACKAPPANSWERTYPE.SELECT, d.renderSelect], [n.FEEDBACKAPPANSWERTYPE.DATE, c.renderDate], [n.FEEDBACKAPPANSWERTYPE.EMAIL, u.renderEmail], [n.FEEDBACKAPPANSWERTYPE.PASSWORD, p.renderPassword], [n.FEEDBACKAPPANSWERTYPE.CONSENT, h.renderConsent], [n.FEEDBACKAPPANSWERTYPE.RATING_EMOJI, m.renderRatingEmoji], [n.FEEDBACKAPPANSWERTYPE.RATING_NUMBER, f.renderRatingNumber], [n.FEEDBACKAPPANSWERTYPE.RATING_STAR, g.renderRatingStar], [n.FEEDBACKAPPANSWERTYPE.MULTI_QUESTION_MATRIX, v.renderMatrix], [n.FEEDBACKAPPANSWERTYPE.PRIORITY_LIST, y.renderPriorityList], [n.FEEDBACKAPPANSWERTYPE.POINT_SYSTEM, b.renderPointSystem], [n.FEEDBACKAPPANSWERTYPE.UPLOAD_IMAGE, E.renderUploadImage], [n.FEEDBACKAPPANSWERTYPE.UPLOAD_FILE, A.renderUploadFile], [n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOISE_IMAGE, k.renderMultipleChoiceImage], [n.FEEDBACKAPPANSWERTYPE.INFO_PAGE, C.renderInfoPage]]);
         t2.getQuestionRenderer = function(e3) {
           return T.get(e3);
         };
@@ -1287,59 +3383,59 @@ var require_magicfeedback_sdk_browser = __commonJS({
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderBoolean = void 0;
         const n = i(516);
         t2.renderBoolean = ({ question: e3, language: t3, urlParamValue: i2, send: r }) => {
-          const { ref: s, assets: a } = e3, o = document.createElement("div"), l = "magicfeedback-radio", d = document.createElement("div");
-          return d.classList.add("magicfeedback-boolean-container"), d.style.display = "flex", d.style.flexDirection = "row", d.style.justifyContent = "space-between", d.style.width = "70%", d.style.margin = "auto", ((null == a ? void 0 : a.addIcon) ? ["\u{1F44D}", "\u{1F44E}"] : (0, n.getBooleanOptions)(t3)).forEach(((e4, t4) => {
+          const { ref: s, assets: o } = e3, a = document.createElement("div"), l = "magicfeedback-radio", d = document.createElement("div");
+          return d.classList.add("magicfeedback-boolean-container"), d.style.display = "flex", d.style.flexDirection = "row", d.style.justifyContent = "space-between", d.style.width = "70%", d.style.margin = "auto", ((null == o ? void 0 : o.addIcon) ? ["\u{1F44D}", "\u{1F44E}"] : (0, n.getBooleanOptions)(t3)).forEach(((e4, t4) => {
             const n2 = document.createElement("label");
             n2.classList.add("magicfeedback-boolean-option"), n2.htmlFor = `rating-${s}-${t4}`, n2.style.cursor = "pointer", n2.style.display = "flex", n2.style.justifyContent = "center", n2.style.alignItems = "center", n2.style.margin = "auto", n2.style.padding = "0", n2.style.width = "45%", n2.style.height = "38px";
-            const a2 = document.createElement("label");
-            a2.htmlFor = `rating-${s}-${t4}`, a2.textContent = e4, a2.style.margin = "0", a2.style.padding = "0";
-            const o2 = document.createElement("input");
-            o2.id = `rating-${s}-${t4}`, o2.type = "radio", o2.name = s, o2.value = ["Yes", "No"][t4], o2.classList.add(l), o2.classList.add("magicfeedback-input"), o2.style.position = "absolute", o2.style.opacity = "0", o2.style.width = "0", o2.style.height = "0", o2.style.margin = "0", o2.addEventListener("change", (() => {
+            const o2 = document.createElement("label");
+            o2.htmlFor = `rating-${s}-${t4}`, o2.textContent = e4, o2.style.margin = "0", o2.style.padding = "0";
+            const a2 = document.createElement("input");
+            a2.id = `rating-${s}-${t4}`, a2.type = "radio", a2.name = s, a2.value = ["Yes", "No"][t4], a2.classList.add(l), a2.classList.add("magicfeedback-input"), a2.style.position = "absolute", a2.style.opacity = "0", a2.style.width = "0", a2.style.height = "0", a2.style.margin = "0", a2.addEventListener("change", (() => {
               r && r();
-            })), i2 && i2.toLowerCase() === o2.value.toLowerCase() && (o2.checked = true), n2.appendChild(o2), n2.appendChild(a2), d.appendChild(n2);
-          })), o.appendChild(d), { element: o, elementTypeClass: l };
+            })), i2 && i2.toLowerCase() === a2.value.toLowerCase() && (a2.checked = true), n2.appendChild(a2), n2.appendChild(o2), d.appendChild(n2);
+          })), a.appendChild(d), { element: a, elementTypeClass: l };
         };
       }, 998: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderChoice = void 0;
         const n = i(558), r = i(784);
-        t2.renderChoice = ({ question: e3, language: t3, urlParamValue: i2, randomPosition: s, send: a }) => {
-          const { type: o, ref: l, value: d, defaultValue: c, assets: u } = e3, p = document.createElement("div"), m = "magicfeedback-" + ("MULTIPLECHOICE" === o ? "checkbox" : "radio");
-          let h = d || [];
-          s && (h = h.sort((() => Math.random() - 0.5)));
+        t2.renderChoice = ({ question: e3, language: t3, urlParamValue: i2, randomPosition: s, send: o }) => {
+          const { type: a, ref: l, value: d, defaultValue: c, assets: u } = e3, p = document.createElement("div"), h = "magicfeedback-" + ("MULTIPLECHOICE" === a ? "checkbox" : "radio");
+          let m = d || [];
+          s && (m = m.sort((() => Math.random() - 0.5)));
           let f = (null == u ? void 0 : u.exclusiveAnswers) || [];
           (null == u ? void 0 : u.extraOption) && (f = f.filter(((e4) => e4 !== u.extraOptionText))), f.length > 0 && (null == f || f.forEach(((e4) => {
-            h.includes(e4) || h.push(e4);
+            m.includes(e4) || m.push(e4);
           })));
-          const v = null == u ? void 0 : u.extraOptionText;
-          return (null == u ? void 0 : u.extraOption) && v && !h.includes(v) && h.push(v), h.forEach(((e4, s2) => {
+          const g = null == u ? void 0 : u.extraOptionText;
+          return (null == u ? void 0 : u.extraOption) && g && !m.includes(g) && m.push(g), m.forEach(((e4, s2) => {
             const d2 = document.createElement("div");
-            d2.classList.add(`magicfeedback-${"MULTIPLECHOICE" === o ? "checkbox" : "radio"}-container`);
-            const v2 = document.createElement("label"), g = document.createElement("input");
-            if (g.id = `rating-${l}-${s2}`, g.type = "MULTIPLECHOICE" === o ? "checkbox" : "radio", g.name = l, g.value = e4, g.classList.add(m), g.classList.add("magicfeedback-input"), o === n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE && (null == u ? void 0 : u.maxOptions) && (null == u ? void 0 : u.maxOptions) > 0 && g.addEventListener("change", (() => {
-              document.querySelectorAll(`input[name="${l}"]:checked`).length > (null == u ? void 0 : u.maxOptions) && (g.checked = false);
-            })), o === n.FEEDBACKAPPANSWERTYPE.RADIO && a && (!(null == u ? void 0 : u.extraOptionText) || (null == u ? void 0 : u.extraOptionText) && e4 !== (null == u ? void 0 : u.extraOptionText)) && g.addEventListener("change", (() => {
-              a();
-            })), e4 !== c && e4 !== i2 || (g.checked = true), v2.textContent = e4, v2.htmlFor = `rating-${l}-${s2}`, g.addEventListener("change", ((t4) => {
+            d2.classList.add(`magicfeedback-${"MULTIPLECHOICE" === a ? "checkbox" : "radio"}-container`);
+            const g2 = document.createElement("label"), v = document.createElement("input");
+            if (v.id = `rating-${l}-${s2}`, v.type = "MULTIPLECHOICE" === a ? "checkbox" : "radio", v.name = l, v.value = e4, v.classList.add(h), v.classList.add("magicfeedback-input"), a === n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE && (null == u ? void 0 : u.maxOptions) && (null == u ? void 0 : u.maxOptions) > 0 && v.addEventListener("change", (() => {
+              document.querySelectorAll(`input[name="${l}"]:checked`).length > (null == u ? void 0 : u.maxOptions) && (v.checked = false);
+            })), a === n.FEEDBACKAPPANSWERTYPE.RADIO && o && (!(null == u ? void 0 : u.extraOptionText) || (null == u ? void 0 : u.extraOptionText) && e4 !== (null == u ? void 0 : u.extraOptionText)) && v.addEventListener("change", (() => {
+              o();
+            })), e4 !== c && e4 !== i2 || (v.checked = true), g2.textContent = e4, g2.htmlFor = `rating-${l}-${s2}`, v.addEventListener("change", ((t4) => {
               const i3 = document.getElementById(`extra-option-${l}`);
-              t4.target.checked && f.includes(e4) ? (h.forEach(((t5) => {
+              t4.target.checked && f.includes(e4) ? (m.forEach(((t5) => {
                 t5 !== e4 && (document.querySelector(`input[value="${t5}"]`).checked = false);
               })), i3 && (i3.style.display = "none")) : f.forEach(((t5) => {
                 t5 !== e4 && (document.querySelector(`input[value="${t5}"]`).checked = false);
               })), (null == u ? void 0 : u.extraOption) && e4 === (null == u ? void 0 : u.extraOptionText) && i3 && (i3.style.display = t4.target.checked ? "block" : "none");
-            })), d2.appendChild(g), d2.appendChild(v2), p.appendChild(d2), (null == u ? void 0 : u.extraOption) && e4 === (null == u ? void 0 : u.extraOptionText)) {
+            })), d2.appendChild(v), d2.appendChild(g2), p.appendChild(d2), (null == u ? void 0 : u.extraOption) && e4 === (null == u ? void 0 : u.extraOptionText)) {
               const e5 = document.createElement("input");
               e5.type = "text", e5.placeholder = (null == u ? void 0 : u.extraOptionPlaceholder) || r.placeholder.answer(t3 || "en"), e5.classList.add("magicfeedback-extra-option"), e5.classList.add("magicfeedback-input"), e5.id = `extra-option-${l}`, e5.name = `extra-option-${l}`, e5.style.display = "none", p.appendChild(e5);
             }
-          })), { element: p, elementTypeClass: m };
+          })), { element: p, elementTypeClass: h };
         };
       }, 991: (e2, t2) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderConsent = void 0, t2.renderConsent = ({ question: e3, urlParamValue: t3, send: i }) => {
-          const { id: n, ref: r, value: s, require: a } = e3, o = document.createElement("input");
-          return o.type = "checkbox", o.id = `magicfeedback-${n}`, o.name = r, o.value = "true", o.required = a, o.classList.add("magicfeedback-consent"), o.classList.add("magicfeedback-input"), t3 && s.includes(t3) && (o.checked = true), i && o.addEventListener("change", (() => {
+          const { id: n, ref: r, value: s, require: o } = e3, a = document.createElement("input");
+          return a.type = "checkbox", a.id = `magicfeedback-${n}`, a.name = r, a.value = "true", a.required = o, a.classList.add("magicfeedback-consent"), a.classList.add("magicfeedback-input"), t3 && s.includes(t3) && (a.checked = true), i && a.addEventListener("change", (() => {
             i();
-          })), { element: o, elementTypeClass: "magicfeedback-consent" };
+          })), { element: a, elementTypeClass: "magicfeedback-consent" };
         };
       }, 817: (e2, t2, i) => {
         "use strict";
@@ -1377,8 +3473,8 @@ var require_magicfeedback_sdk_browser = __commonJS({
       }, 644: (e2, t2) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderMatrix = void 0, t2.renderMatrix = ({ question: e3, isPhone: t3, randomPosition: i }) => {
-          const { ref: n, value: r, assets: s } = e3, a = document.createElement("div"), o = document.createElement("div");
-          o.classList.add("magicfeedback-multi-question-matrix-container");
+          const { ref: n, value: r, assets: s } = e3, o = document.createElement("div"), a = document.createElement("div");
+          a.classList.add("magicfeedback-multi-question-matrix-container");
           let l = (null == s ? void 0 : s.options) || [], d = [...r], c = [];
           if (i && (l = null == l ? void 0 : l.sort((() => Math.random() - 0.5)), d = [...d].sort((() => Math.random() - 0.5))), (null == s ? void 0 : s.exclusiveAnswers) && (c = null == s ? void 0 : s.exclusiveAnswers, null == c || c.forEach(((e4) => {
             d.includes(e4) || d.push(e4);
@@ -1391,10 +3487,10 @@ var require_magicfeedback_sdk_browser = __commonJS({
               r2.classList.add("magicfeedback-multi-question-matrix-label"), r2.style.paddingBottom = "10px", r2.textContent = t4, i2.appendChild(r2), d.forEach(((e5) => {
                 const r3 = document.createElement("div");
                 r3.classList.add("magicfeedback-radio-container"), r3.style.display = "flex", r3.style.alignItems = "center", r3.style.justifyContent = "flex-start", r3.style.width = "99%", r3.style.margin = "5px auto";
-                const s2 = document.createElement("label"), a2 = document.createElement("input");
-                a2.id = `${n}-${t4}-${e5}`, a2.type = "radio", a2.name = `${n}-${t4}`, a2.value = e5, a2.classList.add("magicfeedback-input"), s2.textContent = e5, s2.htmlFor = `${n}-${t4}-${e5}`, r3.appendChild(a2), r3.appendChild(s2), i2.appendChild(r3);
+                const s2 = document.createElement("label"), o2 = document.createElement("input");
+                o2.id = `${n}-${t4}-${e5}`, o2.type = "radio", o2.name = `${n}-${t4}`, o2.value = e5, o2.classList.add("magicfeedback-input"), s2.textContent = e5, s2.htmlFor = `${n}-${t4}-${e5}`, r3.appendChild(o2), r3.appendChild(s2), i2.appendChild(r3);
               })), e4.appendChild(i2);
-            })), o.appendChild(e4);
+            })), a.appendChild(e4);
           } else {
             const e4 = document.createElement("table");
             e4.classList.add("magicfeedback-multi-question-matrix-table");
@@ -1416,18 +3512,18 @@ var require_magicfeedback_sdk_browser = __commonJS({
                 const r4 = document.createElement("td"), s3 = document.createElement("input");
                 s3.type = "radio", s3.name = `${n}-${e5}`, s3.value = i4, s3.id = `${n}-${e5}-${i4}`, s3.classList.add("magicfeedback-input"), r4.appendChild(s3), t5.appendChild(r4);
               })), s2.appendChild(t5);
-            })), e4.appendChild(s2), o.appendChild(e4);
+            })), e4.appendChild(s2), a.appendChild(e4);
           }
-          return a.appendChild(o), { element: a, elementTypeClass: "magicfeedback-multi-question-matrix" };
+          return o.appendChild(a), { element: o, elementTypeClass: "magicfeedback-multi-question-matrix" };
         };
       }, 409: (e2, t2) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderMultipleChoiceImage = void 0, t2.renderMultipleChoiceImage = ({ question: e3, randomPosition: t3, urlParamValue: i, send: n }) => {
-          const r = document.createElement("div"), { ref: s, assets: a } = e3;
-          let o = [...e3.value];
+          const r = document.createElement("div"), { ref: s, assets: o } = e3;
+          let a = [...e3.value];
           const l = document.createElement("div");
           l.classList.add("magicfeedback-multiple-choice-image-container"), l.style.display = "flex", l.style.flexDirection = "row", l.style.flexWrap = "wrap", l.style.justifyContent = "center";
-          const d = o.length;
+          const d = a.length;
           let c = 1, u = 1;
           if (window.innerWidth < 600) c = 1, u = d;
           else switch (d) {
@@ -1449,38 +3545,38 @@ var require_magicfeedback_sdk_browser = __commonJS({
             default:
               u = 4, c = Math.ceil(d / u);
           }
-          const p = void 0 !== (null == a ? void 0 : a.addTitle) && (null == a ? void 0 : a.addTitle), m = void 0 !== (null == a ? void 0 : a.multiOption) && (null == a ? void 0 : a.multiOption), h = void 0 !== (null == a ? void 0 : a.extraOption) && (null == a ? void 0 : a.extraOption);
+          const p = void 0 !== (null == o ? void 0 : o.addTitle) && (null == o ? void 0 : o.addTitle), h = void 0 !== (null == o ? void 0 : o.multiOption) && (null == o ? void 0 : o.multiOption), m = void 0 !== (null == o ? void 0 : o.extraOption) && (null == o ? void 0 : o.extraOption);
           function f(e4) {
             try {
-              const { position: t4, url: r2, value: a2 } = e4, o2 = document.createElement("div");
-              o2.classList.add("magicfeedback-multiple-choice-image-option"), o2.style.width = `calc(100% / ${c} - 2px)`, o2.style.height = `calc(100% / ${u} - 2px)`, o2.style.padding = "8px", o2.style.margin = "0";
+              const { position: t4, url: r2, value: o2 } = e4, a2 = document.createElement("div");
+              a2.classList.add("magicfeedback-multiple-choice-image-option"), a2.style.width = `calc(100% / ${c} - 2px)`, a2.style.height = `calc(100% / ${u} - 2px)`, a2.style.padding = "8px", a2.style.margin = "0";
               const d2 = document.createElement("label");
               d2.classList.add("magicfeedback-image-option-label-container"), d2.htmlFor = `rating-${s}-${t4}`, d2.style.cursor = "pointer", d2.addEventListener("click", (() => {
                 d2.style.border = "2px solid #000";
               }));
-              const h2 = document.createElement("label");
-              h2.textContent = a2, h2.classList.add("magicfeedback-multiple-choice-image-label");
+              const m2 = document.createElement("label");
+              m2.textContent = o2, m2.classList.add("magicfeedback-multiple-choice-image-label");
               const f2 = document.createElement("input");
-              f2.id = `rating-${s}-${t4}`, f2.type = m ? "checkbox" : "radio", f2.name = s, f2.value = a2, f2.style.position = "absolute", f2.style.opacity = "0", f2.style.width = "0", f2.style.height = "0", f2.classList.add("magicfeedback-input"), i && i === f2.value && (f2.checked = true), !m && n && f2.addEventListener("change", (() => {
+              f2.id = `rating-${s}-${t4}`, f2.type = h ? "checkbox" : "radio", f2.name = s, f2.value = o2, f2.style.position = "absolute", f2.style.opacity = "0", f2.style.width = "0", f2.style.height = "0", f2.classList.add("magicfeedback-input"), i && i === f2.value && (f2.checked = true), !h && n && f2.addEventListener("change", (() => {
                 n();
               }));
-              const v = document.createElement("img");
-              v.classList.add("magicfeedback-multiple-choice-image-image"), v.src = r2, v.style.cursor = "pointer", v.style.backgroundSize = "cover", v.style.backgroundPosition = "center", v.style.width = "100%", v.style.height = "100%", v.style.objectFit = "cover", v.style.margin = "auto", d2.appendChild(f2), d2.appendChild(v), p && d2.appendChild(h2), o2.appendChild(d2), l.appendChild(o2);
+              const g = document.createElement("img");
+              g.classList.add("magicfeedback-multiple-choice-image-image"), g.src = r2, g.style.cursor = "pointer", g.style.backgroundSize = "cover", g.style.backgroundPosition = "center", g.style.width = "100%", g.style.height = "100%", g.style.objectFit = "cover", g.style.margin = "auto", d2.appendChild(f2), d2.appendChild(g), p && d2.appendChild(m2), a2.appendChild(d2), l.appendChild(a2);
             } catch (e5) {
               console.error(e5);
             }
           }
-          return t3 && (o = o.sort((() => Math.random() - 0.5))), o.forEach(((e4) => f(JSON.parse(e4)))), h && (null == a ? void 0 : a.extraOptionValue) && (null == a ? void 0 : a.extraOptionValue.length) > 0 && f(null == a ? void 0 : a.extraOptionValue[0]), r.appendChild(l), { element: r, elementTypeClass: "magicfeedback-multiple-choice-image" };
+          return t3 && (a = a.sort((() => Math.random() - 0.5))), a.forEach(((e4) => f(JSON.parse(e4)))), m && (null == o ? void 0 : o.extraOptionValue) && (null == o ? void 0 : o.extraOptionValue.length) > 0 && f(null == o ? void 0 : o.extraOptionValue[0]), r.appendChild(l), { element: r, elementTypeClass: "magicfeedback-multiple-choice-image" };
         };
       }, 732: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderNumber = void 0;
         const n = i(784), r = i(516);
         t2.renderNumber = ({ question: e3, format: t3, language: i2, urlParamValue: s }) => {
-          const a = document.createElement("input");
-          a.type = "number", a.placeholder = "slim" === t3 ? (0, r.parseTitle)(e3.title, i2) : n.placeholder.number(i2 || "en");
-          const { value: o } = e3;
-          return o.length && (o.sort(((e4, t4) => Number(e4) - Number(t4))), a.max = o[o.length - 1], a.min = o[0], a.value = o[0]), s && !isNaN(Number(s)) && (a.value = s), { element: a, elementTypeClass: "magicfeedback-number" };
+          const o = document.createElement("input");
+          o.type = "number", o.placeholder = "slim" === t3 ? (0, r.parseTitle)(e3.title, i2) : n.placeholder.number(i2 || "en");
+          const { value: a } = e3;
+          return a.length && (a.sort(((e4, t4) => Number(e4) - Number(t4))), o.max = a[a.length - 1], o.min = a[0], o.value = a[0]), s && !isNaN(Number(s)) && (o.value = s), { element: o, elementTypeClass: "magicfeedback-number" };
         };
       }, 180: (e2, t2, i) => {
         "use strict";
@@ -1495,10 +3591,10 @@ var require_magicfeedback_sdk_browser = __commonJS({
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderPointSystem = void 0;
         const n = i(784);
         t2.renderPointSystem = ({ question: e3, language: t3 }) => {
-          const { ref: i2, value: r } = e3, s = document.createElement("div"), a = document.createElement("div");
-          a.classList.add("magicfeedback-point-system-container");
-          const o = document.createElement("ul");
-          o.classList.add("magicfeedback-point-system-list"), o.style.padding = "0";
+          const { ref: i2, value: r } = e3, s = document.createElement("div"), o = document.createElement("div");
+          o.classList.add("magicfeedback-point-system-container");
+          const a = document.createElement("ul");
+          a.classList.add("magicfeedback-point-system-list"), a.style.padding = "0";
           const l = 100 / r.length, d = document.createElement("div");
           d.classList.add("magicfeedback-error"), d.textContent = n.placeholder.pointsystemerror(t3 || "en"), d.style.color = "#C70039", d.style.fontSize = "14px", d.style.textAlign = "right", d.style.width = "100%", d.style.display = "none";
           const c = document.createElement("div");
@@ -1509,108 +3605,108 @@ var require_magicfeedback_sdk_browser = __commonJS({
             r2.textContent = e4, r2.style.fontSize = "15px", n2.appendChild(r2);
             const s2 = document.createElement("span");
             s2.classList.add("magicfeedback-point-system-input-container");
-            const a2 = document.createElement("input");
-            a2.name = i2, a2.id = `${e4}`, a2.type = "number", a2.min = "0", a2.max = "100", a2.value = "0", a2.classList.add("magicfeedback-input"), a2.style.width = "40px", a2.style.border = "0", a2.style.textAlign = "center", a2.style.margin = "0 5px", a2.autofocus = 0 === t4;
+            const o2 = document.createElement("input");
+            o2.name = i2, o2.id = `${e4}`, o2.type = "number", o2.min = "0", o2.max = "100", o2.value = "0", o2.classList.add("magicfeedback-input"), o2.style.width = "40px", o2.style.border = "0", o2.style.textAlign = "center", o2.style.margin = "0 5px", o2.autofocus = 0 === t4;
             const u = document.createElement("span");
-            u.textContent = "%", u.style.color = "#000", a2.addEventListener("input", (() => {
-              const e5 = o.querySelectorAll("input");
+            u.textContent = "%", u.style.color = "#000", o2.addEventListener("input", (() => {
+              const e5 = a.querySelectorAll("input");
               let t5 = 0;
               e5.forEach(((e6) => {
                 t5 += Number(e6.value);
-              })), t5 > 100 && (a2.value = `${l}%`, t5 -= Number(a2.value));
+              })), t5 > 100 && (o2.value = `${l}%`, t5 -= Number(o2.value));
               const i3 = document.getElementById("magicfeedback-submit");
               i3 && (t5 < 100 ? (c.style.color = "orange", i3.setAttribute("disabled", "true")) : (d.style.display = "none", c.style.color = "green", i3.removeAttribute("disabled"))), c.textContent = `${t5} / 100 %`;
-            })), a2.addEventListener("focus", (() => {
+            })), o2.addEventListener("focus", (() => {
               const e5 = document.getElementById("magicfeedback-submit");
               e5 && (e5.setAttribute("disabled", "true"), e5.addEventListener("pointerover", (() => {
-                const e6 = o.querySelectorAll("input");
+                const e6 = a.querySelectorAll("input");
                 let t5 = 0;
                 e6.forEach(((e7) => {
                   t5 += Number(e7.value);
                 })), t5 < 100 && (d.style.display = "block");
               })));
-            })), s2.appendChild(a2), s2.appendChild(u), n2.appendChild(s2), o.appendChild(n2);
-          })), a.appendChild(o), a.appendChild(c), a.appendChild(d), s.appendChild(a), { element: s, elementTypeClass: "magicfeedback-point-system" };
+            })), s2.appendChild(o2), s2.appendChild(u), n2.appendChild(s2), a.appendChild(n2);
+          })), o.appendChild(a), o.appendChild(c), o.appendChild(d), s.appendChild(o), { element: s, elementTypeClass: "magicfeedback-point-system" };
         };
       }, 773: (e2, t2) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderPriorityList = void 0, t2.renderPriorityList = ({ question: e3, randomPosition: t3, language: i }) => {
           var n, r, s;
-          const a = document.createElement("div"), o = (function(e4) {
-            const { value: t4, ref: i2, randomPosition: n2 = false, limitPriority: r2 = false, maxPriority: s2 = 0, language: a2 = "en", placeholder: o2 = "" } = e4, l = (e5) => {
+          const o = document.createElement("div"), a = (function(e4) {
+            const { value: t4, ref: i2, randomPosition: n2 = false, limitPriority: r2 = false, maxPriority: s2 = 0, language: o2 = "en", placeholder: a2 = "" } = e4, l = (e5) => {
               const t5 = { en: { selectUpTo: "Select up to", options: "options", thenOrder: "and then order them", selectOptions: "Select options", cancel: "Cancel", confirm: "Confirm", selectOptionNumber: "Select option #", prioritized: "Prioritized", of: "of", instruction: "Your priority list can be seen below. If you wish, you can rearrange your choices using the arrows. Click 'Next' to confirm your selection and proceed." }, es: { selectUpTo: "Selecciona hasta", options: "opciones", thenOrder: "y luego ord\xE9nalas", selectOptions: "Seleccionar opciones", cancel: "Cancelar", confirm: "Confirmar", selectOptionNumber: "Selecciona la opci\xF3n #", prioritized: "Priorizadas", of: "de", instruction: 'Tu lista priorizada se muestra abajo. Si deseas, puedes reordenar las opciones con las flechas. Haz clic en "Siguiente" para confirmar y continuar.' }, pt: { selectUpTo: "Selecione at\xE9", options: "op\xE7\xF5es", thenOrder: "e depois ordene-as", selectOptions: "Selecionar op\xE7\xF5es", cancel: "Cancelar", confirm: "Confirmar", selectOptionNumber: "Selecione a op\xE7\xE3o #", prioritized: "Priorizadas", of: "de", instruction: 'Sua lista de prioridades pode ser vista abaixo. Se quiser, voc\xEA pode reorganizar suas escolhas usando as setas. Clique em "Pr\xF3ximo" para confirmar sua sele\xE7\xE3o e continuar.' }, fr: { selectUpTo: "S\xE9lectionnez jusqu'\xE0", options: "options", thenOrder: "puis classez-les", selectOptions: "S\xE9lectionner des options", cancel: "Annuler", confirm: "Confirmer", selectOptionNumber: "S\xE9lectionnez l'option #", prioritized: "Prioris\xE9es", of: "sur", instruction: `Votre liste de priorit\xE9s est affich\xE9e ci-dessous. Si vous le souhaitez, vous pouvez r\xE9organiser vos choix \xE0 l'aide des fl\xE8ches. Cliquez sur "Suivant" pour confirmer votre s\xE9lection et continuer.` }, de: { selectUpTo: "W\xE4hlen Sie bis zu", options: "Optionen", thenOrder: "und ordnen Sie sie dann", selectOptions: "Optionen ausw\xE4hlen", cancel: "Abbrechen", confirm: "Best\xE4tigen", selectOptionNumber: "W\xE4hlen Sie Option #", prioritized: "Priorisiert", of: "von", instruction: 'Ihre Priorit\xE4tenliste wird unten angezeigt. Wenn Sie m\xF6chten, k\xF6nnen Sie Ihre Auswahl mit den Pfeilen neu anordnen. Klicken Sie auf "Weiter", um Ihre Auswahl zu best\xE4tigen und fortzufahren.' }, it: { selectUpTo: "Seleziona fino a", options: "opzioni", thenOrder: "e poi ordinali", selectOptions: "Seleziona opzioni", cancel: "Annulla", confirm: "Conferma", selectOptionNumber: "Seleziona opzione #", prioritized: "Prioritizzate", of: "di", instruction: 'La tua lista di priorit\xE0 \xE8 mostrata qui sotto. Se vuoi, puoi riordinare le tue scelte usando le frecce. Clicca su "Avanti" per confermare la selezione e continuare.' }, nl: { selectUpTo: "Selecteer tot", options: "opties", thenOrder: "en rangschik ze vervolgens", selectOptions: "Selecteer opties", cancel: "Annuleren", confirm: "Bevestigen", selectOptionNumber: "Selecteer optie #", prioritized: "Geprioriteerd", of: "van", instruction: 'Je prioriteitenlijst wordt hieronder weergegeven. Als je wilt, kun je je keuzes herschikken met behulp van de pijlen. Klik op "Volgende" om je selectie te bevestigen en door te gaan.' }, pl: { selectUpTo: "Wybierz do", options: "opcje", thenOrder: "a nast\u0119pnie je uporz\u0105dkuj", selectOptions: "Wybierz opcje", cancel: "Anuluj", confirm: "Potwierd\u017A", selectOptionNumber: "Wybierz opcj\u0119 #", prioritized: "Priorytetowe", of: "z", instruction: 'Twoja lista priorytet\xF3w jest pokazana poni\u017Cej. Je\u015Bli chcesz, mo\u017Cesz zmieni\u0107 kolejno\u015B\u0107 swoich wybor\xF3w za pomoc\u0105 strza\u0142ek. Kliknij "Dalej", aby potwierdzi\u0107 wyb\xF3r i kontynuowa\u0107.' }, ru: { selectUpTo: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u043E", options: "\u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432", thenOrder: "\u0430 \u0437\u0430\u0442\u0435\u043C \u0443\u043F\u043E\u0440\u044F\u0434\u043E\u0447\u044C\u0442\u0435 \u0438\u0445", selectOptions: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B", cancel: "\u041E\u0442\u043C\u0435\u043D\u0430", confirm: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C", selectOptionNumber: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442 #", prioritized: "\u041F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442\u044B", of: "\u0438\u0437", instruction: '\u0412\u0430\u0448 \u0441\u043F\u0438\u0441\u043E\u043A \u043F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442\u043E\u0432 \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044F \u043D\u0438\u0436\u0435. \u0415\u0441\u043B\u0438 \u0445\u043E\u0442\u0438\u0442\u0435, \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u0441\u0442\u0440\u0435\u043B\u043E\u043A. \u041D\u0430\u0436\u043C\u0438\u0442\u0435 "\u0414\u0430\u043B\u0435\u0435", \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C \u0432\u044B\u0431\u043E\u0440 \u0438 \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C.' }, ja: { selectUpTo: "\u6700\u5927", options: "\u500B\u306E\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u9078\u629E", thenOrder: "\u305D\u306E\u5F8C\u4E26\u3079\u66FF\u3048\u3066\u304F\u3060\u3055\u3044", selectOptions: "\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u9078\u629E", cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB", confirm: "\u78BA\u8A8D", selectOptionNumber: "\u30AA\u30D7\u30B7\u30E7\u30F3 # \u3092\u9078\u629E", prioritized: "\u512A\u5148\u9806\u4F4D", of: "\u306E\u3046\u3061", instruction: "\u512A\u5148\u9806\u4F4D\u30EA\u30B9\u30C8\u306F\u4EE5\u4E0B\u306B\u8868\u793A\u3055\u308C\u307E\u3059\u3002\u5FC5\u8981\u306B\u5FDC\u3058\u3066\u3001\u77E2\u5370\u3092\u4F7F\u3063\u3066\u9078\u629E\u80A2\u3092\u4E26\u3079\u66FF\u3048\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002\u300C\u6B21\u3078\u300D\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u9078\u629E\u3092\u78BA\u5B9A\u3057\u3001\u7D9A\u884C\u3057\u3066\u304F\u3060\u3055\u3044\u3002" }, zh: { selectUpTo: "\u6700\u591A\u9009\u62E9", options: "\u4E2A\u9009\u9879", thenOrder: "\u7136\u540E\u6392\u5E8F\u5B83\u4EEC", selectOptions: "\u9009\u62E9\u9009\u9879", cancel: "\u53D6\u6D88", confirm: "\u786E\u8BA4", selectOptionNumber: "\u9009\u62E9\u9009\u9879 #", prioritized: "\u5DF2\u4F18\u5148", of: "\u5171", instruction: "\u4F60\u7684\u4F18\u5148\u5217\u8868\u5982\u4E0B\u6240\u793A\u3002\u5982\u6709\u9700\u8981\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7BAD\u5934\u91CD\u65B0\u6392\u5E8F\u9009\u9879\u3002\u70B9\u51FB\u201C\u4E0B\u4E00\u6B65\u201D\u786E\u8BA4\u9009\u62E9\u5E76\u7EE7\u7EED\u3002" }, ko: { selectUpTo: "\uCD5C\uB300", options: "\uAC1C\uC758 \uC635\uC158 \uC120\uD0DD", thenOrder: "\uADF8\uB7F0 \uB2E4\uC74C \uC815\uB82C\uD558\uC138\uC694", selectOptions: "\uC635\uC158 \uC120\uD0DD", cancel: "\uCDE8\uC18C", confirm: "\uD655\uC778", selectOptionNumber: "\uC635\uC158 # \uC120\uD0DD", prioritized: "\uC6B0\uC120\uC21C\uC704", of: "\uC911", instruction: '\uC6B0\uC120\uC21C\uC704 \uBAA9\uB85D\uC740 \uC544\uB798\uC5D0 \uD45C\uC2DC\uB429\uB2C8\uB2E4. \uC6D0\uD55C\uB2E4\uBA74 \uD654\uC0B4\uD45C\uB97C \uC0AC\uC6A9\uD574 \uC120\uD0DD \uD56D\uBAA9\uC744 \uC7AC\uC815\uB82C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. "\uB2E4\uC74C"\uC744 \uD074\uB9AD\uD558\uC5EC \uC120\uD0DD\uC744 \uD655\uC778\uD558\uACE0 \uACC4\uC18D\uD558\uC138\uC694.' }, ar: { selectUpTo: "\u0627\u062E\u062A\u0631 \u062D\u062A\u0649", options: "\u062E\u064A\u0627\u0631\u0627\u062A", thenOrder: "\u062B\u0645 \u0631\u062A\u0628\u0647\u0627", selectOptions: "\u0627\u062E\u062A\u0631 \u0627\u0644\u062E\u064A\u0627\u0631\u0627\u062A", cancel: "\u0625\u0644\u063A\u0627\u0621", confirm: "\u062A\u0623\u0643\u064A\u062F", selectOptionNumber: "\u0627\u062E\u062A\u0631 \u0627\u0644\u062E\u064A\u0627\u0631 #", prioritized: "\u062A\u0645 \u0627\u0644\u062A\u0631\u062A\u064A\u0628", of: "\u0645\u0646", instruction: '\u062A\u0638\u0647\u0631 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u0648\u0644\u0648\u064A\u0627\u062A \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0623\u062F\u0646\u0627\u0647. \u0625\u0630\u0627 \u0631\u063A\u0628\u062A\u060C \u064A\u0645\u0643\u0646\u0643 \u0625\u0639\u0627\u062F\u0629 \u062A\u0631\u062A\u064A\u0628 \u0627\u062E\u062A\u064A\u0627\u0631\u0627\u062A\u0643 \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0627\u0644\u0623\u0633\u0647\u0645. \u0627\u0646\u0642\u0631 \u0639\u0644\u0649 "\u0627\u0644\u062A\u0627\u0644\u064A" \u0644\u062A\u0623\u0643\u064A\u062F \u0627\u062E\u062A\u064A\u0627\u0631\u0643 \u0648\u0627\u0644\u0645\u062A\u0627\u0628\u0639\u0629.' }, bn: { selectUpTo: "\u09B8\u09B0\u09CD\u09AC\u09CB\u099A\u09CD\u099A \u09A8\u09BF\u09B0\u09CD\u09AC\u09BE\u099A\u09A8 \u0995\u09B0\u09C1\u09A8", options: "\u099F\u09BF \u09AC\u09BF\u0995\u09B2\u09CD\u09AA", thenOrder: "\u09A4\u09BE\u09B0\u09AA\u09B0 \u09B8\u09C7\u0997\u09C1\u09B2\u09CB \u09B8\u09BE\u099C\u09BE\u09A8", selectOptions: "\u09AC\u09BF\u0995\u09B2\u09CD\u09AA \u09A8\u09BF\u09B0\u09CD\u09AC\u09BE\u099A\u09A8 \u0995\u09B0\u09C1\u09A8", cancel: "\u09AC\u09BE\u09A4\u09BF\u09B2", confirm: "\u09A8\u09BF\u09B6\u09CD\u099A\u09BF\u09A4 \u0995\u09B0\u09C1\u09A8", selectOptionNumber: "\u09AC\u09BF\u0995\u09B2\u09CD\u09AA # \u09A8\u09BF\u09B0\u09CD\u09AC\u09BE\u099A\u09A8 \u0995\u09B0\u09C1\u09A8", prioritized: "\u0985\u0997\u09CD\u09B0\u09BE\u09A7\u09BF\u0995\u09BE\u09B0\u09AA\u09CD\u09B0\u09BE\u09AA\u09CD\u09A4", of: "\u098F\u09B0 \u09AE\u09A7\u09CD\u09AF\u09C7", instruction: "\u0986\u09AA\u09A8\u09BE\u09B0 \u0985\u0997\u09CD\u09B0\u09BE\u09A7\u09BF\u0995\u09BE\u09B0 \u09A4\u09BE\u09B2\u09BF\u0995\u09BE \u09A8\u09BF\u099A\u09C7 \u09A6\u09C7\u0996\u09BE\u09A8\u09CB \u09B9\u09AF\u09BC\u09C7\u099B\u09C7\u0964 \u099A\u09BE\u0987\u09B2\u09C7 \u09A4\u09C0\u09B0 \u099A\u09BF\u09B9\u09CD\u09A8 \u09AC\u09CD\u09AF\u09AC\u09B9\u09BE\u09B0 \u0995\u09B0\u09C7 \u0986\u09AA\u09A8\u09BE\u09B0 \u09AA\u099B\u09A8\u09CD\u09A6\u0997\u09C1\u09B2\u09CB \u09AA\u09C1\u09A8\u09B0\u09BE\u09AF\u09BC \u09B8\u09BE\u099C\u09BE\u09A4\u09C7 \u09AA\u09BE\u09B0\u09C7\u09A8\u0964 \u201C\u09AA\u09B0\u09AC\u09B0\u09CD\u09A4\u09C0\u201D \u0995\u09CD\u09B2\u09BF\u0995 \u0995\u09B0\u09C7 \u0986\u09AA\u09A8\u09BE\u09B0 \u09A8\u09BF\u09B0\u09CD\u09AC\u09BE\u099A\u09A8 \u09A8\u09BF\u09B6\u09CD\u099A\u09BF\u09A4 \u0995\u09B0\u09C1\u09A8 \u098F\u09AC\u0982 \u098F\u0997\u09BF\u09AF\u09BC\u09C7 \u09AF\u09BE\u09A8\u0964" }, da: { selectUpTo: "V\xE6lg op til", options: "muligheder", thenOrder: "og sorter dem derefter", selectOptions: "V\xE6lg muligheder", cancel: "Annuller", confirm: "Bekr\xE6ft", selectOptionNumber: "V\xE6lg mulighed #", prioritized: "Prioriteret", of: "af", instruction: 'Din prioritetsliste vises nedenfor. Hvis du \xF8nsker det, kan du omarrangere dine valg ved hj\xE6lp af pilene. Klik p\xE5 "N\xE6ste" for at bekr\xE6fte dit valg og forts\xE6tte.' }, fi: { selectUpTo: "Valitse enint\xE4\xE4n", options: "vaihtoehtoa", thenOrder: "ja j\xE4rjest\xE4 ne sitten", selectOptions: "Valitse vaihtoehdot", cancel: "Peruuta", confirm: "Vahvista", selectOptionNumber: "Valitse vaihtoehto #", prioritized: "Priorisoitu", of: " / ", instruction: 'Prioriteettilistasi n\xE4kyy alla. Voit halutessasi j\xE4rjest\xE4\xE4 valinnat uudelleen nuolien avulla. Napsauta "Seuraava" vahvistaaksesi valinnan ja jatkaaksesi.' }, sv: { selectUpTo: "V\xE4lj upp till", options: "alternativ", thenOrder: "och ordna dem sedan", selectOptions: "V\xE4lj alternativ", cancel: "Avbryt", confirm: "Bekr\xE4fta", selectOptionNumber: "V\xE4lj alternativ #", prioritized: "Prioriterat", of: "av", instruction: 'Din prioriteringslista visas nedan. Om du vill kan du ordna om dina val med hj\xE4lp av pilarna. Klicka p\xE5 "N\xE4sta" f\xF6r att bekr\xE4fta ditt val och forts\xE4tta.' }, no: { selectUpTo: "Velg opptil", options: "alternativer", thenOrder: "og ordne dem deretter", selectOptions: "Velg alternativer", cancel: "Avbryt", confirm: "Bekreft", selectOptionNumber: "Velg alternativ #", prioritized: "Prioritert", of: "av", instruction: 'Prioriteringslisten din vises nedenfor. Hvis du \xF8nsker det, kan du ordne valgene dine ved hjelp av pilene. Klikk p\xE5 "Neste" for \xE5 bekrefte valget ditt og fortsette.' } };
-              return t5[t5[a2] ? a2 : "en"][e5];
+              return t5[t5[o2] ? o2 : "en"][e5];
             }, d = document.createElement("div");
             if (d.classList.add("magicfeedback-priority-list-container"), r2 && s2 && s2 > 0) {
               const e5 = [], r3 = document.createElement("div");
               r3.classList.add("magicfeedback-priority-list-header");
-              const a3 = document.createElement("div");
-              a3.classList.add("magicfeedback-priority-list-instruction"), a3.textContent = "" !== o2 ? o2 : `${l("instruction")}`, a3.style.display = "none";
+              const o3 = document.createElement("div");
+              o3.classList.add("magicfeedback-priority-list-instruction"), o3.textContent = "" !== a2 ? a2 : `${l("instruction")}`, o3.style.display = "none";
               const c2 = document.createElement("button");
-              c2.type = "button", c2.textContent = l("selectOptions"), c2.classList.add("magicfeedback-button"), c2.classList.add("magicfeedback-priority-list-open-btn"), r3.appendChild(c2), r3.appendChild(a3);
+              c2.type = "button", c2.textContent = l("selectOptions"), c2.classList.add("magicfeedback-button"), c2.classList.add("magicfeedback-priority-list-open-btn"), r3.appendChild(c2), r3.appendChild(o3);
               const u2 = document.createElement("div");
               u2.classList.add("magicfeedback-priority-list-reorder");
               const p = document.createElement("ul");
               p.classList.add("magicfeedback-priority-list-list"), u2.appendChild(p);
-              const m = () => {
+              const h = () => {
                 p.innerHTML = "", e5.forEach(((t5, n3) => {
                   const r4 = document.createElement("li");
                   r4.classList.add("magicfeedback-priority-list-item");
                   const s3 = document.createElement("input");
                   s3.classList.add("magicfeedback-input-magicfeedback-priority-list"), s3.classList.add("magicfeedback-input"), s3.type = "hidden", s3.id = `priority-list-${i2}`, s3.name = i2, s3.value = `${n3 + 1}. ${t5}`, r4.appendChild(s3);
-                  const a4 = document.createElement("label");
-                  a4.classList.add("magicfeedback-priority-list-item-label"), a4.textContent = `${n3 + 1}. ${t5}`, r4.appendChild(a4);
-                  const o3 = document.createElement("div");
-                  o3.classList.add("magicfeedback-priority-list-arrows");
+                  const o4 = document.createElement("label");
+                  o4.classList.add("magicfeedback-priority-list-item-label"), o4.textContent = `${n3 + 1}. ${t5}`, r4.appendChild(o4);
+                  const a3 = document.createElement("div");
+                  a3.classList.add("magicfeedback-priority-list-arrows");
                   const l2 = document.createElement("img");
                   l2.classList.add("magicfeedback-priority-list-arrow-up"), l2.src = "https://magicfeedback-c6458-dev.web.app/assets/arrow.svg", l2.style.visibility = 0 === n3 ? "hidden" : "visible";
                   const d2 = document.createElement("img");
                   d2.classList.add("magicfeedback-priority-list-arrow-down"), d2.src = "https://magicfeedback-c6458-dev.web.app/assets/arrow.svg", d2.style.transform = "rotate(180deg)", d2.style.visibility = n3 === e5.length - 1 ? "hidden" : "visible", l2.addEventListener("click", (() => {
-                    var i3, n4, o4, c3;
+                    var i3, n4, a4, c3;
                     const u3 = r4.previousElementSibling;
                     if (u3) {
-                      const m2 = Number(null === (i3 = s3.value) || void 0 === i3 ? void 0 : i3.split(".")[0]) - 1;
-                      s3.value = `${m2}. ${t5}`, a4.textContent = `${m2}. ${t5}`, l2.style.visibility = 1 === m2 ? "hidden" : "visible", d2.style.visibility = m2 === e5.length ? "hidden" : "visible";
-                      const h2 = u3.querySelector(".magicfeedback-input-magicfeedback-priority-list"), f2 = u3.querySelector(".magicfeedback-priority-list-item-label"), v2 = u3.querySelector(".magicfeedback-priority-list-arrow-up"), g2 = u3.querySelector(".magicfeedback-priority-list-arrow-down");
-                      if (h2 && f2 && v2 && g2) {
-                        const t6 = Number(null === (n4 = h2.value) || void 0 === n4 ? void 0 : n4.split(".")[0]) + 1;
-                        h2.value = `${t6}.${null === (o4 = f2.textContent) || void 0 === o4 ? void 0 : o4.split(".")[1]}`, f2.textContent = `${t6}.${null === (c3 = f2.textContent) || void 0 === c3 ? void 0 : c3.split(".")[1]}`, v2.style.visibility = 1 === t6 ? "hidden" : "visible", g2.style.visibility = t6 === e5.length ? "hidden" : "visible";
+                      const h2 = Number(null === (i3 = s3.value) || void 0 === i3 ? void 0 : i3.split(".")[0]) - 1;
+                      s3.value = `${h2}. ${t5}`, o4.textContent = `${h2}. ${t5}`, l2.style.visibility = 1 === h2 ? "hidden" : "visible", d2.style.visibility = h2 === e5.length ? "hidden" : "visible";
+                      const m2 = u3.querySelector(".magicfeedback-input-magicfeedback-priority-list"), f2 = u3.querySelector(".magicfeedback-priority-list-item-label"), g2 = u3.querySelector(".magicfeedback-priority-list-arrow-up"), v2 = u3.querySelector(".magicfeedback-priority-list-arrow-down");
+                      if (m2 && f2 && g2 && v2) {
+                        const t6 = Number(null === (n4 = m2.value) || void 0 === n4 ? void 0 : n4.split(".")[0]) + 1;
+                        m2.value = `${t6}.${null === (a4 = f2.textContent) || void 0 === a4 ? void 0 : a4.split(".")[1]}`, f2.textContent = `${t6}.${null === (c3 = f2.textContent) || void 0 === c3 ? void 0 : c3.split(".")[1]}`, g2.style.visibility = 1 === t6 ? "hidden" : "visible", v2.style.visibility = t6 === e5.length ? "hidden" : "visible";
                       }
                       p.insertBefore(r4, u3);
                     }
                   })), d2.addEventListener("click", (() => {
-                    var i3, n4, o4;
+                    var i3, n4, a4;
                     const c3 = r4.nextElementSibling;
                     if (c3) {
                       const u3 = Number(null === (i3 = s3.value) || void 0 === i3 ? void 0 : i3.split(".")[0]) + 1;
-                      s3.value = `${u3}. ${t5}`, a4.textContent = `${u3}. ${t5}`, l2.style.visibility = 1 === u3 ? "hidden" : "visible", d2.style.visibility = u3 === e5.length ? "hidden" : "visible";
-                      const m2 = c3.querySelector(".magicfeedback-input-magicfeedback-priority-list"), h2 = c3.querySelector(".magicfeedback-priority-list-item-label"), f2 = c3.querySelector(".magicfeedback-priority-list-arrow-up"), v2 = c3.querySelector(".magicfeedback-priority-list-arrow-down");
-                      if (m2 && h2 && f2 && v2) {
-                        const t6 = Number(m2.value.split(".")[0]) - 1;
-                        m2.value = `${t6}.${null === (n4 = h2.textContent) || void 0 === n4 ? void 0 : n4.split(".")[1]}`, h2.textContent = `${t6}.${null === (o4 = h2.textContent) || void 0 === o4 ? void 0 : o4.split(".")[1]}`, f2.style.visibility = 1 === t6 ? "hidden" : "visible", v2.style.visibility = t6 === e5.length ? "hidden" : "visible";
+                      s3.value = `${u3}. ${t5}`, o4.textContent = `${u3}. ${t5}`, l2.style.visibility = 1 === u3 ? "hidden" : "visible", d2.style.visibility = u3 === e5.length ? "hidden" : "visible";
+                      const h2 = c3.querySelector(".magicfeedback-input-magicfeedback-priority-list"), m2 = c3.querySelector(".magicfeedback-priority-list-item-label"), f2 = c3.querySelector(".magicfeedback-priority-list-arrow-up"), g2 = c3.querySelector(".magicfeedback-priority-list-arrow-down");
+                      if (h2 && m2 && f2 && g2) {
+                        const t6 = Number(h2.value.split(".")[0]) - 1;
+                        h2.value = `${t6}.${null === (n4 = m2.textContent) || void 0 === n4 ? void 0 : n4.split(".")[1]}`, m2.textContent = `${t6}.${null === (a4 = m2.textContent) || void 0 === a4 ? void 0 : a4.split(".")[1]}`, f2.style.visibility = 1 === t6 ? "hidden" : "visible", g2.style.visibility = t6 === e5.length ? "hidden" : "visible";
                       }
                       p.insertBefore(c3, r4);
                     }
-                  })), o3.appendChild(l2), o3.appendChild(d2), r4.appendChild(o3), p.appendChild(r4);
+                  })), a3.appendChild(l2), a3.appendChild(d2), r4.appendChild(a3), p.appendChild(r4);
                 }));
-              }, h = document.createElement("div");
-              h.classList.add("magicfeedback-modal-backdrop"), h.style.position = "fixed", h.style.top = "0", h.style.left = "0", h.style.width = "100vw", h.style.height = "100vh", h.style.background = "rgba(0,0,0,0.4)", h.style.display = "none", h.style.alignItems = "center", h.style.justifyContent = "center", h.style.zIndex = "9999";
+              }, m = document.createElement("div");
+              m.classList.add("magicfeedback-modal-backdrop"), m.style.position = "fixed", m.style.top = "0", m.style.left = "0", m.style.width = "100vw", m.style.height = "100vh", m.style.background = "rgba(0,0,0,0.4)", m.style.display = "none", m.style.alignItems = "center", m.style.justifyContent = "center", m.style.zIndex = "9999";
               const f = document.createElement("div");
-              f.classList.add("magicfeedback-modal"), f.style.background = "#fff", f.style.borderRadius = "8px", f.style.boxShadow = "0 8px 24px rgba(0,0,0,0.2)", f.style.maxWidth = "520px", f.style.width = "90%", f.style.maxHeight = "80vh", f.style.overflow = "auto", f.style.padding = "16px", f.style.position = "relative";
-              const v = document.createElement("h5");
-              v.classList.add("magicfeedback-modal-title");
-              const g = () => Math.min(e5.length + 1, s2), y = () => {
-                v.textContent = `${l("selectOptionNumber")}${g()}`;
+              f.classList.add("magicfeedback-modal"), f.style.background = "#fff", f.style.borderRadius = "8px", f.style.boxShadow = "0 8px 24px rgba(0,0,0,0.2)", f.style.maxWidth = "520px", f.style.width = "90%", f.style.maxHeight = "80vh", f.style.display = "flex", f.style.flexDirection = "column", f.style.overflow = "hidden", f.style.padding = "16px", f.style.position = "relative";
+              const g = document.createElement("h5");
+              g.classList.add("magicfeedback-modal-title"), g.style.flexShrink = "0", g.style.marginTop = "0";
+              const v = () => Math.min(e5.length + 1, s2), y = () => {
+                g.textContent = `${l("selectOptionNumber")}${v()}`;
               };
               y();
               const b = document.createElement("div");
-              b.classList.add("magicfeedback-modal-list"), (n2 ? [...t4].sort((() => Math.random() - 0.5)) : [...t4]).forEach(((t5) => {
+              b.classList.add("magicfeedback-modal-list"), b.style.flex = "1 1 auto", b.style.overflowY = "auto", b.style.minHeight = "0", (n2 ? [...t4].sort((() => Math.random() - 0.5)) : [...t4]).forEach(((t5) => {
                 const n3 = document.createElement("label");
                 n3.classList.add("magicfeedback-modal-row");
                 const r4 = document.createElement("input");
                 r4.type = "checkbox", r4.classList.add("magicfeedback-input"), r4.name = `${i2}-selection`, r4.value = t5;
-                const a4 = document.createElement("span");
-                a4.textContent = t5, r4.addEventListener("change", (() => {
+                const o4 = document.createElement("span");
+                o4.textContent = t5, r4.addEventListener("change", (() => {
                   if (r4.checked) {
                     if (e5.length >= s2) return r4.checked = false, n3.classList.add("magicfeedback-warning"), void setTimeout((() => {
                       n3.classList.remove("magicfeedback-warning");
@@ -1620,30 +3716,36 @@ var require_magicfeedback_sdk_browser = __commonJS({
                     const i3 = e5.indexOf(t5);
                     -1 !== i3 && e5.splice(i3, 1);
                   }
-                  y(), A();
-                })), n3.appendChild(r4), n3.appendChild(a4), b.appendChild(n3);
+                  y(), k();
+                })), n3.appendChild(r4), n3.appendChild(o4), b.appendChild(n3);
               }));
               const E = document.createElement("div");
-              E.classList.add("magicfeedback-modal-actions");
-              const k = document.createElement("div");
-              k.classList.add("magicfeedback-modal-counter");
-              const A = () => {
+              E.classList.add("magicfeedback-modal-actions"), E.style.flexShrink = "0";
+              const A = document.createElement("div");
+              A.classList.add("magicfeedback-modal-counter");
+              const k = () => {
                 const t5 = l("of");
-                k.textContent = `${l("prioritized")} ${e5.length} ${t5} ${s2}`, a3.style.display = e5.length > 0 ? "block" : "none";
+                A.textContent = `${l("prioritized")} ${e5.length} ${t5} ${s2}`, o3.style.display = e5.length > 0 ? "block" : "none";
               };
-              A();
+              k();
               const C = document.createElement("button");
-              C.type = "button", C.classList.add("magicfeedback-modal-close"), C.setAttribute("aria-label", l("cancel")), C.title = l("cancel"), C.textContent = "\xD7", C.style.position = "absolute", C.style.top = "8px", C.style.right = "8px", C.style.border = "none", C.style.background = "transparent", C.style.fontSize = "24px", C.style.cursor = "pointer", C.addEventListener("click", (() => {
-                h.style.display = "none";
+              C.type = "button", C.classList.add("magicfeedback-modal-close"), C.setAttribute("aria-label", l("cancel")), C.title = l("cancel"), C.textContent = "\xD7", C.style.position = "absolute", C.style.top = "8px", C.style.right = "8px", C.style.border = "none", C.style.background = "transparent", C.style.fontSize = "24px", C.style.cursor = "pointer";
+              const T = () => {
+                document.body.appendChild(m), m.style.display = "flex", y(), k();
+              }, P = () => {
+                m.style.display = "none", d.appendChild(m);
+              };
+              C.addEventListener("click", (() => {
+                P();
               }));
-              const T = document.createElement("button");
-              return T.type = "button", T.textContent = l("confirm"), T.classList.add("magicfeedback-button"), T.classList.add("magicfeedback-button-primary"), T.addEventListener("click", (() => {
-                h.style.display = "none", m();
-              })), E.appendChild(k), E.appendChild(T), f.appendChild(C), f.appendChild(v), f.appendChild(b), f.appendChild(E), h.appendChild(f), c2.addEventListener("click", (() => {
-                h.style.display = "flex", y(), A();
-              })), h.addEventListener("click", ((e6) => {
-                e6.target === h && (h.style.display = "none");
-              })), d.appendChild(r3), d.appendChild(u2), d.appendChild(h), m(), d;
+              const O = document.createElement("button");
+              return O.type = "button", O.textContent = l("confirm"), O.classList.add("magicfeedback-button"), O.classList.add("magicfeedback-button-primary"), O.addEventListener("click", (() => {
+                P(), h();
+              })), E.appendChild(A), E.appendChild(O), f.appendChild(C), f.appendChild(g), f.appendChild(b), f.appendChild(E), m.appendChild(f), c2.addEventListener("click", (() => {
+                T();
+              })), m.addEventListener("click", ((e6) => {
+                e6.target === m && P();
+              })), d.appendChild(r3), d.appendChild(u2), d.appendChild(m), h(), d;
             }
             const c = document.createElement("ul");
             c.classList.add("magicfeedback-priority-list-list");
@@ -1655,108 +3757,107 @@ var require_magicfeedback_sdk_browser = __commonJS({
               r3.classList.add("magicfeedback-input-magicfeedback-priority-list"), r3.classList.add("magicfeedback-input"), r3.type = "hidden", r3.id = `priority-list-${i2}`, r3.name = i2, r3.value = `${t5 + 1}. ${e5}`, n3.appendChild(r3);
               const s3 = document.createElement("label");
               s3.classList.add("magicfeedback-priority-list-item-label"), s3.textContent = `${t5 + 1}. ${e5}`, n3.appendChild(s3);
-              const a3 = document.createElement("div");
-              a3.style.display = "flex", a3.style.alignItems = "center", a3.style.justifyContent = "space-between";
-              const o3 = document.createElement("img");
-              o3.classList.add("magicfeedback-priority-list-arrow-up"), o3.src = "https://magicfeedback-c6458-dev.web.app/assets/arrow.svg", o3.style.width = "20px", o3.style.height = "20px", o3.style.cursor = "pointer", o3.style.margin = "0 5px", o3.style.color = "#000", o3.style.visibility = 0 === t5 ? "hidden" : "visible", o3.addEventListener("click", (() => {
-                var t6, i3, a4, d2;
+              const o3 = document.createElement("div");
+              o3.style.display = "flex", o3.style.alignItems = "center", o3.style.justifyContent = "space-between";
+              const a3 = document.createElement("img");
+              a3.classList.add("magicfeedback-priority-list-arrow-up"), a3.src = "https://magicfeedback-c6458-dev.web.app/assets/arrow.svg", a3.style.width = "20px", a3.style.height = "20px", a3.style.cursor = "pointer", a3.style.margin = "0 5px", a3.style.color = "#000", a3.style.visibility = 0 === t5 ? "hidden" : "visible", a3.addEventListener("click", (() => {
+                var t6, i3, o4, d2;
                 const p = n3.previousElementSibling;
                 if (p) {
-                  const m = Number(null === (t6 = r3.value) || void 0 === t6 ? void 0 : t6.split(".")[0]) - 1;
-                  r3.value = `${m}. ${e5}`, s3.textContent = `${m}. ${e5}`, o3.style.visibility = 1 === m ? "hidden" : "visible", l2.style.visibility = m === u.length ? "hidden" : "visible";
-                  const h = p.querySelector(".magicfeedback-input-magicfeedback-priority-list"), f = p.querySelector(".magicfeedback-priority-list-item-label"), v = p.querySelector(".magicfeedback-priority-list-arrow-up"), g = p.querySelector(".magicfeedback-priority-list-arrow-down");
-                  if (h && f && v && g) {
-                    const e6 = Number(null === (i3 = h.value) || void 0 === i3 ? void 0 : i3.split(".")[0]) + 1;
-                    h.value = `${e6}.${null === (a4 = f.textContent) || void 0 === a4 ? void 0 : a4.split(".")[1]}`, f.textContent = `${e6}.${null === (d2 = f.textContent) || void 0 === d2 ? void 0 : d2.split(".")[1]}`, v.style.visibility = 1 === e6 ? "hidden" : "visible", g.style.visibility = e6 === u.length ? "hidden" : "visible";
+                  const h = Number(null === (t6 = r3.value) || void 0 === t6 ? void 0 : t6.split(".")[0]) - 1;
+                  r3.value = `${h}. ${e5}`, s3.textContent = `${h}. ${e5}`, a3.style.visibility = 1 === h ? "hidden" : "visible", l2.style.visibility = h === u.length ? "hidden" : "visible";
+                  const m = p.querySelector(".magicfeedback-input-magicfeedback-priority-list"), f = p.querySelector(".magicfeedback-priority-list-item-label"), g = p.querySelector(".magicfeedback-priority-list-arrow-up"), v = p.querySelector(".magicfeedback-priority-list-arrow-down");
+                  if (m && f && g && v) {
+                    const e6 = Number(null === (i3 = m.value) || void 0 === i3 ? void 0 : i3.split(".")[0]) + 1;
+                    m.value = `${e6}.${null === (o4 = f.textContent) || void 0 === o4 ? void 0 : o4.split(".")[1]}`, f.textContent = `${e6}.${null === (d2 = f.textContent) || void 0 === d2 ? void 0 : d2.split(".")[1]}`, g.style.visibility = 1 === e6 ? "hidden" : "visible", v.style.visibility = e6 === u.length ? "hidden" : "visible";
                   }
                   c.insertBefore(n3, p);
                 }
               }));
               const l2 = document.createElement("img");
               l2.classList.add("magicfeedback-priority-list-arrow-down"), l2.src = "https://magicfeedback-c6458-dev.web.app/assets/arrow.svg", l2.style.width = "20px", l2.style.height = "20px", l2.style.cursor = "pointer", l2.style.margin = "0 5px", l2.style.color = "#000", l2.style.transform = "rotate(180deg)", l2.style.visibility = t5 === u.length - 1 ? "hidden" : "visible", l2.addEventListener("click", (() => {
-                var t6, i3, a4;
+                var t6, i3, o4;
                 const d2 = n3.nextElementSibling;
                 if (d2) {
                   const p = Number(null === (t6 = r3.value) || void 0 === t6 ? void 0 : t6.split(".")[0]) + 1;
-                  r3.value = `${p}. ${e5}`, s3.textContent = `${p}. ${e5}`, o3.style.visibility = 1 === p ? "hidden" : "visible", l2.style.visibility = p === u.length ? "hidden" : "visible";
-                  const m = d2.querySelector(".magicfeedback-input-magicfeedback-priority-list"), h = d2.querySelector(".magicfeedback-priority-list-item-label"), f = d2.querySelector(".magicfeedback-priority-list-arrow-up"), v = d2.querySelector(".magicfeedback-priority-list-arrow-down");
-                  if (m && h && f && v) {
-                    const e6 = Number(m.value.split(".")[0]) - 1;
-                    m.value = `${e6}.${null === (i3 = h.textContent) || void 0 === i3 ? void 0 : i3.split(".")[1]}`, h.textContent = `${e6}.${null === (a4 = h.textContent) || void 0 === a4 ? void 0 : a4.split(".")[1]}`, f.style.visibility = 1 === e6 ? "hidden" : "visible", v.style.visibility = e6 === u.length ? "hidden" : "visible";
+                  r3.value = `${p}. ${e5}`, s3.textContent = `${p}. ${e5}`, a3.style.visibility = 1 === p ? "hidden" : "visible", l2.style.visibility = p === u.length ? "hidden" : "visible";
+                  const h = d2.querySelector(".magicfeedback-input-magicfeedback-priority-list"), m = d2.querySelector(".magicfeedback-priority-list-item-label"), f = d2.querySelector(".magicfeedback-priority-list-arrow-up"), g = d2.querySelector(".magicfeedback-priority-list-arrow-down");
+                  if (h && m && f && g) {
+                    const e6 = Number(h.value.split(".")[0]) - 1;
+                    h.value = `${e6}.${null === (i3 = m.textContent) || void 0 === i3 ? void 0 : i3.split(".")[1]}`, m.textContent = `${e6}.${null === (o4 = m.textContent) || void 0 === o4 ? void 0 : o4.split(".")[1]}`, f.style.visibility = 1 === e6 ? "hidden" : "visible", g.style.visibility = e6 === u.length ? "hidden" : "visible";
                   }
                   c.insertBefore(d2, n3);
                 }
-              })), a3.appendChild(o3), a3.appendChild(l2), n3.appendChild(a3), c.appendChild(n3);
+              })), o3.appendChild(a3), o3.appendChild(l2), n3.appendChild(o3), c.appendChild(n3);
             })), d.appendChild(c), d;
           })({ value: e3.value, ref: e3.ref, randomPosition: t3, limitPriority: (null === (n = e3.assets) || void 0 === n ? void 0 : n.limitPriority) || false, maxPriority: (null === (r = e3.assets) || void 0 === r ? void 0 : r.maxPriority) || 0, placeholder: (null === (s = e3.assets) || void 0 === s ? void 0 : s.placeholder) || "", language: i || "en" });
-          return a.appendChild(o), { element: a, elementTypeClass: "magicfeedback-priority-list" };
+          return o.appendChild(a), { element: o, elementTypeClass: "magicfeedback-priority-list" };
         };
       }, 152: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderRatingEmoji = void 0;
         const n = i(559), r = "https://survey-dev.magicfeedback.io/assets/emojis";
         t2.renderRatingEmoji = ({ question: e3, url: t3, send: i2, urlParamValue: s }) => {
-          var a;
-          const { ref: o, assets: l } = e3, d = document.createElement("div"), c = "magicfeedback-rating", u = document.createElement("div");
-          u.classList.add("magicfeedback-rating-container");
-          const p = (null == l ? void 0 : l.max) ? Number(null == l ? void 0 : l.max) : 5, m = (null == l ? void 0 : l.min) ? Number(null == l ? void 0 : l.min) : 1, h = (0, n.createRatingPlaceholder)(m, p, null == l ? void 0 : l.minPlaceholder, null == l ? void 0 : l.maxPlaceholder, null !== (a = null == l ? void 0 : l.extraOption) && void 0 !== a && a);
-          for (let e4 = m; e4 <= p; e4++) {
+          const { ref: o, assets: a } = e3, l = document.createElement("div"), d = "magicfeedback-rating", c = document.createElement("div");
+          c.classList.add("magicfeedback-rating-container");
+          const u = (null == a ? void 0 : a.max) ? Number(null == a ? void 0 : a.max) : 5, p = (null == a ? void 0 : a.min) ? Number(null == a ? void 0 : a.min) : 1, h = (0, n.createRatingPlaceholder)(null == a ? void 0 : a.minPlaceholder, null == a ? void 0 : a.maxPlaceholder);
+          for (let e4 = p; e4 <= u; e4++) {
             const n2 = document.createElement("div");
             n2.classList.add("magicfeedback-rating-option");
             const a2 = document.createElement("label");
             a2.htmlFor = `rating-${o}-${e4}`, a2.classList.add("magicfeedback-rating-option-label-container");
             const l2 = document.createElement("label");
             l2.htmlFor = `rating-${o}-${e4}`, l2.textContent = e4.toString();
-            const d2 = document.createElement("img");
-            if (d2.alt = `face-${o}-${e4}`, d2.className = `rating-image${e4}`, 0 === m && 10 === p) d2.src = `${t3}/${e4}.svg`, d2.onerror = () => d2.src = `${r}/${e4}.svg`;
-            else if (1 === m && 5 === p) switch (e4) {
+            const h2 = document.createElement("img");
+            if (h2.alt = `face-${o}-${e4}`, h2.className = `rating-image${e4}`, 0 === p && 10 === u) h2.src = `${t3}/${e4}.svg`, h2.onerror = () => h2.src = `${r}/${e4}.svg`;
+            else if (1 === p && 5 === u) switch (e4) {
               case 1:
-                d2.src = `${t3}/1.svg`, d2.onerror = () => d2.src = `${r}/1.svg`;
+                h2.src = `${t3}/1.svg`, h2.onerror = () => h2.src = `${r}/1.svg`;
                 break;
               case 2:
-                d2.src = `${t3}/2.svg`, d2.onerror = () => d2.src = `${r}/2.svg`;
+                h2.src = `${t3}/2.svg`, h2.onerror = () => h2.src = `${r}/2.svg`;
                 break;
               case 3:
-                d2.src = `${t3}/6.svg`, d2.onerror = () => d2.src = `${r}/6.svg`;
+                h2.src = `${t3}/6.svg`, h2.onerror = () => h2.src = `${r}/6.svg`;
                 break;
               case 4:
-                d2.src = `${t3}/9.svg`, d2.onerror = () => d2.src = `${r}/9.svg`;
+                h2.src = `${t3}/9.svg`, h2.onerror = () => h2.src = `${r}/9.svg`;
                 break;
               case 5:
-                d2.src = `${t3}/10.svg`, d2.onerror = () => d2.src = `${r}/10.svg`;
+                h2.src = `${t3}/10.svg`, h2.onerror = () => h2.src = `${r}/10.svg`;
             }
             else {
-              const i3 = Math.round(10 / (p - m) * (e4 - m));
-              d2.src = `${t3}/${i3}.svg`, d2.onerror = () => d2.src = `${r}/${i3}.svg`;
+              const i3 = Math.round(10 / (u - p) * (e4 - p));
+              h2.src = `${t3}/${i3}.svg`, h2.onerror = () => h2.src = `${r}/${i3}.svg`;
             }
-            const h2 = document.createElement("input");
-            h2.id = `rating-${o}-${e4}`, h2.type = "radio", h2.name = o, h2.value = e4.toString(), h2.classList.add(c), h2.classList.add("magicfeedback-input"), i2 && h2.addEventListener("change", (() => {
+            const m = document.createElement("input");
+            m.id = `rating-${o}-${e4}`, m.type = "radio", m.name = o, m.value = e4.toString(), m.classList.add(d), m.classList.add("magicfeedback-input"), i2 && m.addEventListener("change", (() => {
               i2();
-            })), s && s === h2.value && (h2.checked = true), a2.appendChild(h2), a2.appendChild(d2), a2.appendChild(l2), n2.appendChild(a2), u.appendChild(n2);
+            })), s && s === m.value && (m.checked = true), a2.appendChild(m), a2.appendChild(h2), a2.appendChild(l2), n2.appendChild(a2), c.appendChild(n2);
           }
-          if ((null == l ? void 0 : l.extraOption) && (null == l ? void 0 : l.extraOptionText)) {
+          if ((null == a ? void 0 : a.extraOption) && (null == a ? void 0 : a.extraOptionText)) {
             const e4 = document.createElement("div");
             e4.classList.add("magicfeedback-rating-option");
             const t4 = document.createElement("label");
             t4.htmlFor = `rating-${o}-extra`, t4.classList.add("magicfeedback-rating-option-label-container");
             const n2 = document.createElement("label");
-            n2.htmlFor = `rating-${o}-extra`, n2.textContent = null == l ? void 0 : l.extraOptionText;
+            n2.htmlFor = `rating-${o}-extra`, n2.textContent = null == a ? void 0 : a.extraOptionText;
             const r2 = document.createElement("img");
             r2.src = "https://magicfeedback-c6458-dev.web.app/assets/question.svg", r2.alt = `face-${o}-extra`, r2.className = "magicfeedback-rating-image-extra";
             const s2 = document.createElement("input");
-            s2.id = `rating-${o}-extra`, s2.type = "radio", s2.name = o, s2.value = "-", s2.classList.add(c), s2.classList.add("magicfeedback-input"), i2 && s2.addEventListener("change", (() => {
+            s2.id = `rating-${o}-extra`, s2.type = "radio", s2.name = o, s2.value = "-", s2.classList.add(d), s2.classList.add("magicfeedback-input"), i2 && s2.addEventListener("change", (() => {
               i2();
-            })), t4.appendChild(s2), t4.appendChild(r2), t4.appendChild(n2), e4.appendChild(t4), u.appendChild(e4);
+            })), t4.appendChild(s2), t4.appendChild(r2), t4.appendChild(n2), e4.appendChild(t4), c.appendChild(e4);
           }
-          return h.childElementCount > 0 && (u.classList.add("magicfeedback-rating-container--with-placeholder"), u.insertBefore(h, u.firstChild)), d.appendChild(u), { element: d, elementTypeClass: c };
+          return h.childElementCount > 0 && c.appendChild(h), l.appendChild(c), { element: l, elementTypeClass: d };
         };
       }, 917: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderRatingNumber = void 0;
         const n = i(559);
-        t2.renderRatingNumber = ({ question: e3, order: t3, direction: i2, isPhone: r, send: s, urlParamValue: a }) => {
+        t2.renderRatingNumber = ({ question: e3, order: t3, direction: i2, send: r, urlParamValue: s }) => {
           const o = "magicfeedback-rating-number";
-          return { element: (0, n.createRatingNumberElement)(e3.ref, e3.assets, t3, i2, r, o, s, a), elementTypeClass: o };
+          return { element: (0, n.createRatingNumberElement)(e3.ref, e3.assets, t3, i2, o, r, s), elementTypeClass: o };
         };
       }, 452: (e2, t2, i) => {
         "use strict";
@@ -1764,21 +3865,19 @@ var require_magicfeedback_sdk_browser = __commonJS({
         const n = i(559);
         t2.renderRatingStar = ({ question: e3, send: t3, urlParamValue: i2 }) => {
           var r, s;
-          const a = document.createElement("div"), o = (0, n.createStarRating)(e3.ref, null === (r = e3.assets) || void 0 === r ? void 0 : r.minPlaceholder, null === (s = e3.assets) || void 0 === s ? void 0 : s.maxPlaceholder, t3, i2);
-          return a.appendChild(o), { element: a, elementTypeClass: "magicfeedback-rating-star" };
+          const o = document.createElement("div"), a = (0, n.createStarRating)(e3.ref, null === (r = e3.assets) || void 0 === r ? void 0 : r.minPlaceholder, null === (s = e3.assets) || void 0 === s ? void 0 : s.maxPlaceholder, t3, i2);
+          return o.appendChild(a), { element: o, elementTypeClass: "magicfeedback-rating-star" };
         };
       }, 85: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderSelect = void 0;
         const n = i(516);
-        t2.renderSelect = ({ question: e3, format: t3, language: i2, urlParamValue: r, send: s }) => {
-          const { title: a, value: o, defaultValue: l } = e3, d = document.createElement("select"), c = document.createElement("option");
-          return c.value = "", c.text = "slim" === t3 ? (0, n.parseTitle)(a, i2) : l || "Select an option", c.disabled = true, c.selected = true, d.appendChild(c), o.forEach(((e4) => {
+        t2.renderSelect = ({ question: e3, format: t3, language: i2, urlParamValue: r }) => {
+          const { title: s, value: o, defaultValue: a } = e3, l = document.createElement("select"), d = document.createElement("option");
+          return d.value = "", d.text = "slim" === t3 ? (0, n.parseTitle)(s, i2) : a || "Select an option", d.disabled = true, d.selected = true, l.appendChild(d), o.forEach(((e4) => {
             const t4 = document.createElement("option");
-            t4.value = e4, t4.text = e4, d.appendChild(t4);
-          })), r && o.includes(r) && (d.value = r), s && d.addEventListener("change", (() => {
-            s();
-          })), { element: d, elementTypeClass: "magicfeedback-select" };
+            t4.value = e4, t4.text = e4, l.appendChild(t4);
+          })), r && o.includes(r) && (l.value = r), { element: l, elementTypeClass: "magicfeedback-select" };
         };
       }, 90: (e2, t2, i) => {
         "use strict";
@@ -1790,23 +3889,314 @@ var require_magicfeedback_sdk_browser = __commonJS({
             e4.preventDefault(), "Enter" === e4.key && r && r();
           })), { element: s, elementTypeClass: "magicfeedback-text" };
         };
-      }, 250: (e2, t2) => {
+      }, 250: (e2, t2, i) => {
+        "use strict";
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.renderUploadFile = void 0;
+        const n = i(571);
+        t2.renderUploadFile = ({ question: e3, language: t3 }) => (0, n.createUploadControl)(e3, t3, "file");
+      }, 843: (e2, t2, i) => {
+        "use strict";
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.renderUploadImage = void 0;
+        const n = i(571);
+        t2.renderUploadImage = ({ question: e3, language: t3 }) => (0, n.createUploadControl)(e3, t3, "image");
+      }, 571: function(e2, t2, i) {
+        "use strict";
+        var n = this && this.__awaiter || function(e3, t3, i2, n2) {
+          return new (i2 || (i2 = Promise))((function(r2, s2) {
+            function o2(e4) {
+              try {
+                l2(n2.next(e4));
+              } catch (e5) {
+                s2(e5);
+              }
+            }
+            function a2(e4) {
+              try {
+                l2(n2.throw(e4));
+              } catch (e5) {
+                s2(e5);
+              }
+            }
+            function l2(e4) {
+              var t4;
+              e4.done ? r2(e4.value) : (t4 = e4.value, t4 instanceof i2 ? t4 : new i2((function(e5) {
+                e5(t4);
+              }))).then(o2, a2);
+            }
+            l2((n2 = n2.apply(e3, t3 || [])).next());
+          }));
+        };
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.createUploadControl = t2.awaitUploadReady = t2.getUploadValues = t2.formatFileSize = void 0;
+        const r = i(784), s = i(516), o = "__mfUploadValues", a = "__mfUploadReady";
+        function l(e3) {
+          if ("number" != typeof e3 || isNaN(e3)) return "";
+          if (e3 < 1024) return `${e3} B`;
+          const t3 = e3 / 1024;
+          if (t3 < 1024) return `${t3 < 10 ? t3.toFixed(1) : Math.round(t3)} KB`;
+          const i2 = t3 / 1024;
+          return `${i2 < 10 ? i2.toFixed(1) : Math.round(i2)} MB`;
+        }
+        t2.formatFileSize = l, t2.getUploadValues = function(e3) {
+          const t3 = e3[o];
+          return Array.isArray(t3) ? t3 : [];
+        }, t2.awaitUploadReady = function(e3) {
+          return n(this, void 0, void 0, (function* () {
+            if (!e3) return;
+            const t3 = Array.from(e3.querySelectorAll(".magicfeedback-upload-native"));
+            yield Promise.all(t3.map(((e4) => e4[a])).filter(Boolean));
+          }));
+        }, t2.createUploadControl = function(e3, t3, i2) {
+          const { ref: n2, require: d, title: c, assets: u } = e3, p = "image" === i2 ? "magicfeedback-upload-image" : "magicfeedback-upload-file", h = (null == u ? void 0 : u.multiple) || false, m = h ? (null == u ? void 0 : u.maxFiles) || 0 : 1, f = Number(null == u ? void 0 : u.maxFileSize) > 0 ? Number(null == u ? void 0 : u.maxFileSize) : 0, g = 1024 * f * 1024, v = document.createElement("div");
+          v.classList.add("magicfeedback-upload");
+          const y = document.createElement("input");
+          y.type = "file", "image" === i2 && (y.accept = "image/*"), y.multiple = h, y.required = d, y.name = n2, y.id = `magicfeedback-upload-input-${n2}`, y.classList.add(p), y.classList.add("magicfeedback-input"), y.classList.add("magicfeedback-upload-native"), y[o] = [], y[a] = Promise.resolve();
+          const b = (0, s.parseTitle)(c, t3);
+          b && y.setAttribute("aria-label", b);
+          const E = document.createElement("div");
+          E.classList.add("magicfeedback-upload-dropzone");
+          const A = document.createElement("span");
+          A.classList.add("magicfeedback-upload-icon"), A.innerHTML = "image" === i2 ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>' : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 16l-4-4-4 4"/><path d="M12 12v9"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>';
+          const k = document.createElement("span");
+          k.classList.add("magicfeedback-upload-cta"), k.textContent = r.placeholder.upload.cta(t3);
+          const C = document.createElement("span");
+          C.classList.add("magicfeedback-upload-hint"), C.textContent = (function(e4, t4, i3, n3, s2) {
+            const o2 = [r.placeholder.upload.formats(e4, t4)];
+            return i3 && n3 > 0 && o2.push(r.placeholder.upload.maxFiles(e4, n3)), s2 > 0 && o2.push(r.placeholder.upload.maxSize(e4, s2)), o2.filter(Boolean).join(" \xB7 ");
+          })(t3, i2, h, m, f), E.appendChild(y), E.appendChild(A), E.appendChild(k), E.appendChild(C);
+          const T = document.createElement("div");
+          T.classList.add("magicfeedback-upload-error");
+          const P = document.createElement("ul");
+          P.classList.add("magicfeedback-upload-list"), v.appendChild(E), v.appendChild(T), v.appendChild(P);
+          const O = /* @__PURE__ */ new WeakMap(), x = (e4) => {
+            const t4 = O.get(e4);
+            return t4 ? Promise.resolve(t4) : new Promise(((t5) => {
+              const i3 = new FileReader(), n3 = (i4) => {
+                const n4 = JSON.stringify({ name: e4.name, type: e4.type, size: e4.size, content: i4 });
+                O.set(e4, n4), t5(n4);
+              };
+              i3.onload = () => n3("string" == typeof i3.result ? i3.result : ""), i3.onerror = () => n3(""), i3.readAsDataURL(e4);
+            }));
+          }, w = [], L = (e4) => {
+            try {
+              const t4 = m > 0 ? e4.slice(0, m) : e4, i3 = new DataTransfer();
+              t4.forEach(((e5) => i3.items.add(e5))), y.files = i3.files;
+            } catch (e5) {
+            }
+            !(function() {
+              w.forEach(((e6) => URL.revokeObjectURL(e6))), w.length = 0, P.innerHTML = "";
+              const e5 = Array.from(y.files || []);
+              v.classList.toggle("magicfeedback-upload--has-files", e5.length > 0), e5.forEach(((e6, n3) => {
+                const s2 = document.createElement("li");
+                s2.classList.add("magicfeedback-upload-file-item");
+                const o2 = document.createElement("span");
+                if (o2.classList.add("magicfeedback-upload-thumb"), "image" === i2 && e6.type.startsWith("image/")) {
+                  const t4 = URL.createObjectURL(e6);
+                  w.push(t4);
+                  const i3 = document.createElement("img");
+                  i3.src = t4, i3.alt = e6.name, o2.appendChild(i3);
+                } else o2.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>';
+                const a2 = document.createElement("span");
+                a2.classList.add("magicfeedback-upload-file-info");
+                const d2 = document.createElement("span");
+                d2.classList.add("magicfeedback-upload-file-name"), d2.textContent = e6.name, d2.title = e6.name;
+                const c2 = document.createElement("span");
+                c2.classList.add("magicfeedback-upload-file-size"), c2.textContent = l(e6.size), a2.appendChild(d2), a2.appendChild(c2);
+                const u2 = document.createElement("button");
+                u2.type = "button", u2.classList.add("magicfeedback-upload-remove"), u2.setAttribute("aria-label", `${r.placeholder.upload.remove(t3)}: ${e6.name}`), u2.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', u2.addEventListener("click", ((e7) => {
+                  e7.preventDefault(), e7.stopPropagation(), L(Array.from(y.files || []).filter(((e8, t4) => t4 !== n3)));
+                })), s2.appendChild(o2), s2.appendChild(a2), s2.appendChild(u2), P.appendChild(s2);
+              }));
+            })(), (() => {
+              const e5 = Array.from(y.files || []), t4 = Promise.all(e5.map(x)).then(((e6) => {
+                y[o] = e6;
+              }));
+              y[a] = t4;
+            })();
+          }, S = (e4) => {
+            if (!e4.length) return T.textContent = "", void T.classList.remove("is-visible");
+            const i3 = e4.map(((e5) => e5.name)).join(", ");
+            T.textContent = `${r.placeholder.upload.tooLarge(t3, f)}: ${i3}`, T.classList.add("is-visible");
+          }, N = (e4) => {
+            if (!g) return { accepted: e4, rejected: [] };
+            const t4 = [], i3 = [];
+            return e4.forEach(((e5) => (e5.size <= g ? t4 : i3).push(e5))), { accepted: t4, rejected: i3 };
+          };
+          y.addEventListener("change", (() => {
+            const { accepted: e4, rejected: t4 } = N(Array.from(y.files || []));
+            S(t4), L(e4);
+          }));
+          const I = (e4) => {
+            e4.preventDefault(), e4.stopPropagation();
+          };
+          return ["dragenter", "dragover"].forEach(((e4) => E.addEventListener(e4, ((e5) => {
+            I(e5), E.classList.add("is-dragover");
+          })))), ["dragleave", "dragend"].forEach(((e4) => E.addEventListener(e4, ((e5) => {
+            I(e5), E.classList.remove("is-dragover");
+          })))), E.addEventListener("drop", ((e4) => {
+            I(e4), E.classList.remove("is-dragover");
+            const t4 = e4.dataTransfer;
+            let n3 = t4 ? Array.from(t4.files) : [];
+            if ("image" === i2 && (n3 = n3.filter(((e5) => e5.type.startsWith("image/")))), !n3.length) return;
+            const { accepted: r2, rejected: s2 } = N(n3);
+            if (S(s2), !r2.length) return;
+            const o2 = h ? Array.from(y.files || []) : [];
+            L(o2.concat(r2));
+          })), { element: v, elementTypeClass: p };
+        };
+      }, 945: function(e2, t2, i) {
+        "use strict";
+        var n = this && this.__awaiter || function(e3, t3, i2, n2) {
+          return new (i2 || (i2 = Promise))((function(r2, s2) {
+            function o2(e4) {
+              try {
+                l2(n2.next(e4));
+              } catch (e5) {
+                s2(e5);
+              }
+            }
+            function a2(e4) {
+              try {
+                l2(n2.throw(e4));
+              } catch (e5) {
+                s2(e5);
+              }
+            }
+            function l2(e4) {
+              var t4;
+              e4.done ? r2(e4.value) : (t4 = e4.value, t4 instanceof i2 ? t4 : new i2((function(e5) {
+                e5(t4);
+              }))).then(o2, a2);
+            }
+            l2((n2 = n2.apply(e3, t3 || [])).next());
+          }));
+        }, r = this && this.__importDefault || function(e3) {
+          return e3 && e3.__esModule ? e3 : { default: e3 };
+        };
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.nextAgentTurn = t2.startAgentSurvey = void 0;
+        const s = r(i(326)), o = i(313), a = i(857), l = i(279);
+        function d(e3, t3, i2, r2, a2) {
+          var d2;
+          return n(this, void 0, void 0, (function* () {
+            let n2;
+            try {
+              n2 = yield (0, s.default)(e3 + t3, { method: "POST", headers: Object.assign({ "Content-Type": "application/json" }, o.header), body: JSON.stringify(i2) });
+            } catch (e4) {
+              throw r2.err(`[agentSurvey/${a2}] network error`, e4), new l.AgentApiError("NETWORK", (null == e4 ? void 0 : e4.message) || "Network error");
+            }
+            if (!n2.ok) {
+              let e4 = null;
+              try {
+                e4 = yield n2.json();
+              } catch (e5) {
+              }
+              const t4 = (0, l.mapAgentStatus)(n2.status, a2);
+              throw r2.err(`[agentSurvey/${a2}] ${n2.status}`, e4), new l.AgentApiError(t4, (null === (d2 = null == e4 ? void 0 : e4.error) || void 0 === d2 ? void 0 : d2.message) || (null == e4 ? void 0 : e4.message) || n2.statusText, n2.status, "RATE_LIMITED" === t4 ? (function(e5) {
+                var t5, i3;
+                const n3 = null === (i3 = null === (t5 = null == e5 ? void 0 : e5.headers) || void 0 === t5 ? void 0 : t5.get) || void 0 === i3 ? void 0 : i3.call(t5, "Retry-After"), r3 = n3 ? Number(n3) : NaN;
+                return Number.isFinite(r3) && r3 > 0 ? 1e3 * r3 : 6e4;
+              })(n2) : void 0, e4);
+            }
+            try {
+              const e4 = yield n2.json();
+              return r2.log(`[agentSurvey/${a2}] ok`, e4), e4;
+            } catch (e4) {
+              throw new l.AgentApiError("MALFORMED", "Unreadable response body", n2.status);
+            }
+          }));
+        }
+        t2.startAgentSurvey = function(e3, t3, i2) {
+          return d(e3, a.endpoints.sdk.agentSurveyStart, t3, i2, "start");
+        }, t2.nextAgentTurn = function(e3, t3, i2) {
+          return d(e3, a.endpoints.sdk.agentSurveyNext, t3, i2, "next");
+        };
+      }, 279: (e2, t2) => {
+        "use strict";
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.mapAgentStatus = t2.AgentApiError = void 0;
+        class i extends Error {
+          constructor(e3, t3, n, r, s) {
+            super(t3), this.kind = e3, this.status = n, this.retryAfterMs = r, this.body = s, this.name = "AgentApiError", Object.setPrototypeOf(this, i.prototype);
+          }
+          get retryable() {
+            return "RATE_LIMITED" === this.kind || "AI_UNAVAILABLE" === this.kind || "NETWORK" === this.kind;
+          }
+        }
+        t2.AgentApiError = i, t2.mapAgentStatus = function(e3, t3) {
+          return 429 === e3 ? "RATE_LIMITED" : 406 === e3 || 401 === e3 || 403 === e3 ? "AUTH" : 404 === e3 ? "NOT_FOUND" : 400 === e3 || 422 === e3 ? "BAD_CONFIG" : e3 >= 500 ? "start" === t3 ? "AI_UNAVAILABLE" : "NETWORK" : "MALFORMED";
+        };
+      }, 177: (e2, t2, i) => {
         "use strict";
-        Object.defineProperty(t2, "__esModule", { value: true }), t2.renderUploadFile = void 0, t2.renderUploadFile = ({ question: e3 }) => {
-          var t3, i;
-          const n = document.createElement("input");
-          return n.type = "file", n.required = e3.require, n.multiple = (null === (t3 = e3.assets) || void 0 === t3 ? void 0 : t3.multiple) || false, n.maxLength = (null === (i = e3.assets) || void 0 === i ? void 0 : i.maxFiles) || 1, { element: n, elementTypeClass: "magicfeedback-upload-file" };
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.encodeAnswer = t2.toAgentStep = t2.ratingBounds = t2.mapAgentType = t2.DEFAULT_ANSWER_DELIMITER = void 0;
+        const n = i(558), r = i(516);
+        t2.DEFAULT_ANSWER_DELIMITER = ", ";
+        const s = [n.FEEDBACKAPPANSWERTYPE.RADIO, n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOICE, n.FEEDBACKAPPANSWERTYPE.SELECT, n.FEEDBACKAPPANSWERTYPE.MULTIPLECHOISE_IMAGE], o = Object.values(n.FEEDBACKAPPANSWERTYPE);
+        function a(e3, t3, i2) {
+          var a2, l2, d2;
+          const c2 = String(e3 || "").trim().toUpperCase();
+          return "RATING" === c2 ? n.FEEDBACKAPPANSWERTYPE.RATING_NUMBER : c2 === n.FEEDBACKAPPANSWERTYPE.CONTACT ? (null === (a2 = i2.log) || void 0 === a2 || a2.log("[agentSurvey] CONTACT has no renderer, falling back to TEXT"), n.FEEDBACKAPPANSWERTYPE.TEXT) : o.includes(c2) ? s.includes(c2) && 0 === t3.length ? (null === (d2 = i2.log) || void 0 === d2 || d2.err(`[agentSurvey] ${c2} arrived with no options, falling back to TEXT`), n.FEEDBACKAPPANSWERTYPE.TEXT) : c2 !== n.FEEDBACKAPPANSWERTYPE.BOOLEAN || 2 !== t3.length || (function(e4, t4) {
+            if (2 !== e4.length) return false;
+            const i3 = e4.map(((e5) => String(e5).trim().toLowerCase())), n2 = (0, r.getBooleanOptions)(t4).map(((e5) => e5.toLowerCase())), s2 = ["yes", "no"];
+            return i3[0] === s2[0] && i3[1] === s2[1] || i3[0] === n2[0] && i3[1] === n2[1];
+          })(t3, i2.language) ? c2 : n.FEEDBACKAPPANSWERTYPE.RADIO : (null === (l2 = i2.log) || void 0 === l2 || l2.err(`[agentSurvey] unknown question type "${e3}", falling back to TEXT`), n.FEEDBACKAPPANSWERTYPE.TEXT);
+        }
+        function l(e3) {
+          const t3 = e3.map(Number).filter(((e4) => Number.isFinite(e4)));
+          return t3.length >= 2 ? { min: Math.min(...t3), max: Math.max(...t3) } : { min: 1, max: 5 };
+        }
+        function d(e3, t3, i2) {
+          const r2 = { randomPosition: false, direction: "row", order: "ltr" };
+          return e3 !== n.FEEDBACKAPPANSWERTYPE.RATING_NUMBER && e3 !== n.FEEDBACKAPPANSWERTYPE.RATING_EMOJI || Object.assign(r2, l(t3)), e3 === n.FEEDBACKAPPANSWERTYPE.LONGTEXT && (r2.maxCharacters = 0), Object.assign(Object.assign({}, r2), (null == i2 ? void 0 : i2.assets) || {});
+        }
+        function c(e3, t3, i2) {
+          var n2, r2, s2, o2;
+          const { full: l2, title: c2 } = t3, u = [...null !== (r2 = null !== (n2 = e3.questionValues) && void 0 !== n2 ? n2 : null == l2 ? void 0 : l2.value) && void 0 !== r2 ? r2 : []], p = a(null !== (s2 = null == l2 ? void 0 : l2.type) && void 0 !== s2 ? s2 : e3.questionType, u, i2), h = e3.questionRef || (null == l2 ? void 0 : l2.ref) || `agent-q-${e3.currentTurn}`;
+          return { id: (null == l2 ? void 0 : l2.id) || `agent-${i2.sessionId}-${e3.currentTurn}`, title: c2 || "", type: p, questionType: { conf: null }, ref: h, require: null === (o2 = null == l2 ? void 0 : l2.require) || void 0 === o2 || o2, external_id: (null == l2 ? void 0 : l2.external_id) || "", value: u, defaultValue: (null == l2 ? void 0 : l2.defaultValue) || "", followup: false, position: e3.currentTurn, assets: d(p, u, l2), refMetric: (null == l2 ? void 0 : l2.refMetric) || "", integrationId: i2.integrationId, integrationPageId: "", status: "ACTIVE" };
+        }
+        t2.mapAgentType = a, t2.ratingBounds = l, t2.toAgentStep = function(e3, t3) {
+          var i2, r2, s2;
+          const o2 = e3, a2 = e3.currentTurn, l2 = e3.maxTurns, d2 = o2.coverageSummary, u = (e4) => ({ kind: "END", reason: e4, currentTurn: a2, maxTurns: l2, coverageSummary: d2 });
+          if (o2.answerType === n.AGENT_ANSWER_TYPE_BLOCKED) return u("BLOCKED");
+          if (true === o2.shouldEnd) return u("SHOULD_END");
+          const p = (function(e4) {
+            const t4 = e4.question && "object" == typeof e4.question ? e4.question : e4.nextQuestion && "object" == typeof e4.nextQuestion ? e4.nextQuestion : null;
+            if (t4) {
+              const e5 = t4, i3 = e5.title;
+              return { full: e5, title: "string" == typeof i3 ? i3 : i3 ? JSON.stringify(i3) : null };
+            }
+            return { full: null, title: "string" == typeof e4.nextQuestion ? e4.nextQuestion : null };
+          })(e3);
+          return "NONE" === String(null !== (s2 = null !== (r2 = null === (i2 = p.full) || void 0 === i2 ? void 0 : i2.type) && void 0 !== r2 ? r2 : e3.questionType) && void 0 !== s2 ? s2 : "").trim().toUpperCase() ? u("TYPE_NONE") : p.title && p.title.trim() ? { kind: "QUESTION", question: c(e3, p, t3), isFromBase: true === e3.isFromBase, currentTurn: a2, maxTurns: l2, topic: o2.topic, coverageGaps: e3.coverageGaps, coverageSummary: d2 } : u("NO_QUESTION");
+        }, t2.encodeAnswer = function(e3, i2, n2 = t2.DEFAULT_ANSWER_DELIMITER) {
+          const r2 = i2.ref, s2 = (e4) => e4.flatMap(((e5) => Array.isArray(e5.value) ? e5.value : [e5.value])).map(((e5) => "string" == typeof e5 ? e5 : JSON.stringify(e5))).map(((e5) => (e5 || "").trim())).filter(((e5) => "" !== e5)), o2 = s2(e3.filter(((e4) => e4.key === r2))), a2 = s2(e3.filter(((e4) => e4.key === `extra-option-${r2}`)));
+          return [o2.filter(((e4, t3) => o2.indexOf(e4) === t3)).join(n2), a2.join(n2)].filter(((e4) => "" !== e4)).join(n2);
         };
-      }, 843: (e2, t2) => {
+      }, 107: (e2, t2, i) => {
         "use strict";
-        Object.defineProperty(t2, "__esModule", { value: true }), t2.renderUploadImage = void 0, t2.renderUploadImage = ({ question: e3 }) => {
-          var t3, i;
-          const n = document.createElement("input");
-          return n.type = "file", n.accept = "image/*", n.required = e3.require, n.multiple = (null === (t3 = e3.assets) || void 0 === t3 ? void 0 : t3.multiple) || false, n.maxLength = (null === (i = e3.assets) || void 0 === i ? void 0 : i.maxFiles) || 1, { element: n, elementTypeClass: "magicfeedback-upload-image" };
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.scrapeInputs = void 0;
+        const n = i(571);
+        t2.scrapeInputs = function(e3) {
+          const t3 = e3.querySelectorAll(".magicfeedback-input"), i2 = [], r = {};
+          return t3.forEach(((e4) => {
+            var t4;
+            const s = e4, o = s.name;
+            if (!o) return;
+            const a = s.type;
+            if (("radio" === a || "checkbox" === a) && !s.checked) return;
+            const l = s.value, d = s.classList[0];
+            if ((null == d ? void 0 : d.includes("magicfeedback-priority-list")) || (null === (t4 = s.id) || void 0 === t4 ? void 0 : t4.startsWith("priority-list-"))) return r[o] || (r[o] = []), void r[o].push(l);
+            if (null == d ? void 0 : d.includes("magicfeedback-upload")) {
+              const e5 = (0, n.getUploadValues)(s);
+              return void (e5.length && i2.push({ key: o, value: e5 }));
+            }
+            const c = "magicfeedback-consent" === d ? s.checked.toString() : l;
+            null != c && i2.push({ key: o, value: [c] });
+          })), Object.entries(r).forEach((([e4, t4]) => {
+            const n2 = t4.slice().sort(((e5, t5) => Number(e5.split(".")[0]) - Number(t5.split(".")[0])));
+            i2.push({ key: e4, value: n2 });
+          })), i2;
         };
       }, 857: (e2, t2) => {
         "use strict";
-        Object.defineProperty(t2, "__esModule", { value: true }), t2.endpoints = void 0, t2.endpoints = { sdk: { app: (e3, t3) => `sdk/app/${e3}/${t3}`, app_info: (e3, t3) => `sdk/app/${e3}/${t3}/info`, session: (e3) => `sdk/app/session/${e3}/info`, feedback: "sdk/feedback", followUpQuestion: "sdk/followUpQuestion" } };
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.endpoints = void 0, t2.endpoints = { sdk: { app: (e3, t3) => `sdk/app/${e3}/${t3}`, app_info: (e3, t3) => `sdk/app/${e3}/${t3}/info`, session: (e3) => `sdk/app/session/${e3}/info`, feedback: "sdk/feedback", followUpQuestion: "sdk/followUpQuestion", agentSurveyStart: "sdk/agentSurvey/start", agentSurveyNext: "sdk/agentSurvey/next" } };
       }, 784: (e2, t2) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.placeholder = void 0, t2.placeholder = { answer: (e3) => {
@@ -1929,44 +4319,175 @@ var require_magicfeedback_sdk_browser = __commonJS({
             case "bn":
               return "\u09AE\u09CB\u099F \u09AA\u09AF\u09BC\u09C7\u09A8\u09CD\u099F 100 % \u09B9\u09A4\u09C7 \u09B9\u09AC\u09C7";
           }
-        } };
+        }, upload: { cta: (e3) => {
+          switch (e3) {
+            case "es":
+              return "Arrastra y suelta o haz clic para subir";
+            case "da":
+              return "Tr\xE6k og slip eller klik for at uploade";
+            case "fi":
+              return "Ved\xE4 ja pudota tai napsauta ladataksesi";
+            case "sv":
+              return "Dra och sl\xE4pp eller klicka f\xF6r att ladda upp";
+            case "no":
+              return "Dra og slipp eller klikk for \xE5 laste opp";
+            case "ar":
+              return "\u0627\u0633\u062D\u0628 \u0648\u0623\u0641\u0644\u062A \u0623\u0648 \u0627\u0646\u0642\u0631 \u0644\u0644\u062A\u062D\u0645\u064A\u0644";
+            case "bn":
+              return "\u099F\u09C7\u09A8\u09C7 \u0986\u09A8\u09C1\u09A8 \u09AC\u09BE \u0986\u09AA\u09B2\u09CB\u09A1 \u0995\u09B0\u09A4\u09C7 \u0995\u09CD\u09B2\u09BF\u0995 \u0995\u09B0\u09C1\u09A8";
+            default:
+              return "Drag & drop or click to upload";
+          }
+        }, formats: (e3, t3) => {
+          if ("image" === t3) switch (e3) {
+            case "es":
+              return "Solo im\xE1genes";
+            case "da":
+              return "Kun billeder";
+            case "fi":
+              return "Vain kuvat";
+            case "sv":
+              return "Endast bilder";
+            case "no":
+              return "Kun bilder";
+            case "ar":
+              return "\u0627\u0644\u0635\u0648\u0631 \u0641\u0642\u0637";
+            case "bn":
+              return "\u09B6\u09C1\u09A7\u09C1\u09AE\u09BE\u09A4\u09CD\u09B0 \u099B\u09AC\u09BF";
+            default:
+              return "Images only";
+          }
+          switch (e3) {
+            case "es":
+              return "Cualquier tipo de archivo";
+            case "da":
+              return "Enhver filtype";
+            case "fi":
+              return "Mik\xE4 tahansa tiedostotyyppi";
+            case "sv":
+              return "Alla filtyper";
+            case "no":
+              return "Alle filtyper";
+            case "ar":
+              return "\u0623\u064A \u0646\u0648\u0639 \u0645\u0646 \u0627\u0644\u0645\u0644\u0641\u0627\u062A";
+            case "bn":
+              return "\u09AF\u09C7\u0995\u09CB\u09A8\u09CB \u09A7\u09B0\u09A8\u09C7\u09B0 \u09AB\u09BE\u0987\u09B2";
+            default:
+              return "Any file type";
+          }
+        }, maxFiles: (e3, t3) => {
+          switch (e3) {
+            case "es":
+              return `M\xE1x. ${t3} archivos`;
+            case "da":
+              return `Maks. ${t3} filer`;
+            case "fi":
+              return `Enint\xE4\xE4n ${t3} tiedostoa`;
+            case "sv":
+              return `Max ${t3} filer`;
+            case "no":
+              return `Maks ${t3} filer`;
+            case "ar":
+              return `${t3} \u0645\u0644\u0641\u0627\u062A \u0643\u062D\u062F \u0623\u0642\u0635\u0649`;
+            case "bn":
+              return `\u09B8\u09B0\u09CD\u09AC\u09CB\u099A\u09CD\u099A ${t3}\u099F\u09BF \u09AB\u09BE\u0987\u09B2`;
+            default:
+              return `Max ${t3} files`;
+          }
+        }, maxSize: (e3, t3) => {
+          switch (e3) {
+            case "es":
+              return `M\xE1x. ${t3} MB`;
+            case "da":
+              return `Maks. ${t3} MB`;
+            case "fi":
+              return `Enint\xE4\xE4n ${t3} MB`;
+            case "sv":
+            case "en":
+            default:
+              return `Max ${t3} MB`;
+            case "no":
+              return `Maks ${t3} MB`;
+            case "ar":
+              return `${t3} \u0645\u064A\u063A\u0627\u0628\u0627\u064A\u062A \u0643\u062D\u062F \u0623\u0642\u0635\u0649`;
+            case "bn":
+              return `\u09B8\u09B0\u09CD\u09AC\u09CB\u099A\u09CD\u099A ${t3} MB`;
+          }
+        }, tooLarge: (e3, t3) => {
+          switch (e3) {
+            case "es":
+              return `Archivo demasiado grande (m\xE1x. ${t3} MB)`;
+            case "da":
+              return `Filen er for stor (maks. ${t3} MB)`;
+            case "fi":
+              return `Tiedosto on liian suuri (enint\xE4\xE4n ${t3} MB)`;
+            case "sv":
+              return `Filen \xE4r f\xF6r stor (max ${t3} MB)`;
+            case "no":
+              return `Filen er for stor (maks ${t3} MB)`;
+            case "ar":
+              return `\u0627\u0644\u0645\u0644\u0641 \u0643\u0628\u064A\u0631 \u062C\u062F\u064B\u0627 (\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649 ${t3} \u0645\u064A\u063A\u0627\u0628\u0627\u064A\u062A)`;
+            case "bn":
+              return `\u09AB\u09BE\u0987\u09B2\u099F\u09BF \u0996\u09C1\u09AC \u09AC\u09A1\u09BC (\u09B8\u09B0\u09CD\u09AC\u09CB\u099A\u09CD\u099A ${t3} MB)`;
+            default:
+              return `File is too large (max ${t3} MB)`;
+          }
+        }, remove: (e3) => {
+          switch (e3) {
+            case "es":
+              return "Eliminar";
+            case "da":
+            case "no":
+              return "Fjern";
+            case "fi":
+              return "Poista";
+            case "sv":
+              return "Ta bort";
+            case "ar":
+              return "\u0625\u0632\u0627\u0644\u0629";
+            case "bn":
+              return "\u09B8\u09B0\u09BE\u09A8";
+            default:
+              return "Remove";
+          }
+        } } };
       }, 213: (e2, t2, i) => {
         "use strict";
         Object.defineProperty(t2, "__esModule", { value: true }), t2.renderStartMessage = t2.renderSuccess = t2.renderError = t2.renderActions = t2.renderQuestions = void 0;
         const n = i(42), r = i(516), s = { small: "1rem", medium: "1.2rem", large: "1.5rem" };
-        t2.renderQuestions = function e3(t3, i2 = "standard", a = "en", o = { customIcons: false }, l) {
+        t2.renderQuestions = function e3(t3, i2 = "standard", o = "en", a = { customIcons: false }, l) {
           if (!t3) throw new Error("[MagicFeedback] No questions provided");
-          const d = [], { customIcons: c, id: u } = o;
+          const d = [], { customIcons: c, id: u } = a;
           return t3.forEach(((p) => {
-            var m, h;
-            if ((null === (h = null === (m = null == p ? void 0 : p.questionType) || void 0 === m ? void 0 : m.conf) || void 0 === h ? void 0 : h.length) > 0) {
+            var h, m;
+            if ((null === (m = null === (h = null == p ? void 0 : p.questionType) || void 0 === h ? void 0 : h.conf) || void 0 === m ? void 0 : m.length) > 0) {
               let t4 = document.createElement("div");
               t4.classList.add("magicfeedback-div");
               const n2 = document.createElement("label");
-              n2.setAttribute("for", `magicfeedback-${p.id}`), n2.textContent = (0, r.parseTitle)(p.title, a), n2.classList.add("magicfeedback-label"), t4.appendChild(n2), p.questionType.conf.forEach(((e4) => {
+              n2.setAttribute("for", `magicfeedback-${p.id}`), n2.textContent = (0, r.parseTitle)(p.title, o), n2.classList.add("magicfeedback-label"), t4.appendChild(n2), p.questionType.conf.forEach(((e4) => {
                 e4.ref = p.ref, p.assets[e4.id] && (e4.assets = { placeholder: p.assets[e4.id] });
-              })), e3(p.questionType.conf, i2, a, o, l).forEach(((e4) => {
+              })), e3(p.questionType.conf, i2, o, a, l).forEach(((e4) => {
                 t4.appendChild(e4);
               })), d.push(t4);
             } else {
-              const e4 = (function(e5, t4, i3, a2, o2) {
+              const e4 = (function(e5, t4, i3, o2, a2) {
                 var l2, d2, c2;
-                let u2, p2, { id: m2, title: h2, type: f, ref: v, require: g, defaultValue: y, assets: b } = e5, E = document.createElement("div");
+                let u2, p2, { id: h2, title: m2, type: f, ref: g, require: v, defaultValue: y, assets: b } = e5, E = document.createElement("div");
                 E.classList.add("magicfeedback-div");
-                const k = window.innerWidth < 600, A = "slim" === t4 ? (0, r.parseTitle)(h2, i3) : null == b ? void 0 : b.placeholder, C = (0, r.getUrlParam)(v), T = (null == b ? void 0 : b.maxCharacters) || 0, P = void 0 !== (null == b ? void 0 : b.randomPosition) && (null == b ? void 0 : b.randomPosition), w = (null == b ? void 0 : b.direction) || "row", x = (null == b ? void 0 : b.order) || "ltr", O = (0, n.getQuestionRenderer)(f);
-                if (!O) return E;
+                const A = window.innerWidth < 600, k = "slim" === t4 ? (0, r.parseTitle)(m2, i3) : null == b ? void 0 : b.placeholder, C = (0, r.getUrlParam)(g), T = (null == b ? void 0 : b.maxCharacters) || 0, P = void 0 !== (null == b ? void 0 : b.randomPosition) && (null == b ? void 0 : b.randomPosition), O = (null == b ? void 0 : b.direction) || "row", x = (null == b ? void 0 : b.order) || "ltr", w = (0, n.getQuestionRenderer)(f);
+                if (!w) return E;
                 {
-                  const n2 = O({ question: e5, format: t4, language: i3, url: a2, send: o2, isPhone: k, urlParamValue: C, placeholderText: A, maxCharacters: T, randomPosition: P, direction: w, order: x });
+                  const n2 = w({ question: e5, format: t4, language: i3, url: o2, send: a2, isPhone: A, urlParamValue: C, placeholderText: k, maxCharacters: T, randomPosition: P, direction: O, order: x });
                   u2 = n2.element, p2 = n2.elementTypeClass;
                 }
-                u2.id = `magicfeedback-${m2}`, u2.setAttribute("name", v), u2.classList.add(p2), (void 0 !== y || null !== C) && (u2.value = C || y), ["RADIO", "MULTIPLECHOICE"].includes(f) || (u2.classList.add("magicfeedback-input"), u2.required = g);
+                u2.id = `magicfeedback-${h2}`, u2.setAttribute("name", g), u2.classList.add(p2), (void 0 !== y || null !== C) && (u2.value = C || y), ["RADIO", "MULTIPLECHOICE", "UPLOAD_IMAGE", "UPLOAD_FILE"].includes(f) || (u2.classList.add("magicfeedback-input"), u2.required = v);
                 const L = document.createElement("label");
-                L.setAttribute("for", `magicfeedback-${m2}`), L.textContent = (0, r.parseTitle)(h2, i3), L.classList.add("magicfeedback-label"), (function(e6, t5) {
+                L.setAttribute("for", `magicfeedback-${h2}`), L.textContent = (0, r.parseTitle)(m2, i3), L.classList.add("magicfeedback-label"), (function(e6, t5) {
                   if ("INFO_PAGE" !== t5.type) return;
                   const { assets: i4 } = t5, n2 = (function(e7) {
                     if (e7) return s[e7] || e7;
-                  })(null == i4 ? void 0 : i4.titleSize), r2 = (a3 = null == i4 ? void 0 : i4.titleStyle, Array.isArray(a3) ? a3 : a3 ? [a3] : []);
-                  var a3;
+                  })(null == i4 ? void 0 : i4.titleSize), r2 = (o3 = null == i4 ? void 0 : i4.titleStyle, Array.isArray(o3) ? o3 : o3 ? [o3] : []);
+                  var o3;
                   n2 && e6.style.setProperty("font-size", n2, "important"), (null == i4 ? void 0 : i4.titleAlign) && (e6.style.setProperty("width", "100%", "important"), e6.style.setProperty("align-self", "stretch", "important"), e6.style.setProperty("text-align", i4.titleAlign, "important")), r2.includes("italic") && e6.style.setProperty("font-style", "italic", "important"), r2.includes("bold") && e6.style.setProperty("font-weight", "bold", "important"), r2.includes("underline") && e6.style.setProperty("text-decoration", "underline", "important");
                 })(L, e5);
                 const S = document.createElement("label");
@@ -1984,28 +4505,28 @@ var require_magicfeedback_sdk_browser = __commonJS({
                       const e7 = document.createElement("div");
                       e7.classList.add("magicfeedback-skip-container"), e7.classList.add("magicfeedback-checkbox-container"), e7.style.display = "flex", e7.style.justifyContent = "flex-start";
                       const t5 = document.createElement("input");
-                      t5.classList.add("magicfeedback-skip"), t5.type = "checkbox", t5.id = `skip-${v}`, t5.name = v, t5.value = "-", t5.style.cursor = "pointer";
+                      t5.classList.add("magicfeedback-skip"), t5.type = "checkbox", t5.id = `skip-${g}`, t5.name = g, t5.value = "-", t5.style.cursor = "pointer";
                       const i4 = document.createElement("label");
-                      i4.htmlFor = `skip-${v}`, i4.textContent = null == b ? void 0 : b.extraOptionText, i4.style.fontSize = "15px", i4.style.cursor = "pointer", i4.style.margin = "0 5px", t5.addEventListener("click", (() => {
-                        u2.value = "-", o2 && o2();
+                      i4.htmlFor = `skip-${g}`, i4.textContent = null == b ? void 0 : b.extraOptionText, i4.style.fontSize = "15px", i4.style.cursor = "pointer", i4.style.margin = "0 5px", t5.addEventListener("click", (() => {
+                        u2.value = "-", a2 && a2();
                       })), e7.appendChild(t5), e7.appendChild(i4), E.appendChild(e7);
                     }
                   } else E.appendChild(u2);
                 }
                 return E;
-              })(p, i2, a, "https://survey-dev.magicfeedback.io/assets/emojis" + (c ? `/${u}` : ""), 1 === t3.length ? l : void 0);
+              })(p, i2, o, "https://survey-dev.magicfeedback.io/assets/emojis" + (c ? `/${u}` : ""), 1 === t3.length ? l : void 0);
               d.push(e4);
             }
           })), d;
         }, t2.renderActions = function(e3 = "", t3, i2 = "Submit", n2 = "Back", r2 = "Next") {
           const s2 = document.createElement("div");
           s2.classList.add("magicfeedback-action-container");
-          const a = document.createElement("button");
-          a.id = "magicfeedback-submit", a.type = "submit", a.classList.add("magicfeedback-submit"), a.textContent = "MAGICSURVEY" === e3 ? r2 || "Next" : i2 || "Submit";
           const o = document.createElement("button");
-          return o.id = "magicfeedback-back", o.type = "button", o.classList.add("magicfeedback-back"), o.textContent = n2 || "Back", o.addEventListener("click", t3), o.addEventListener("click", (() => {
-            a.removeAttribute("disabled");
-          })), "MAGICSURVEY" === e3 && s2.appendChild(o), s2.appendChild(a), s2;
+          o.id = "magicfeedback-submit", o.type = "submit", o.classList.add("magicfeedback-submit"), o.textContent = "MAGICSURVEY" === e3 ? r2 || "Next" : i2 || "Submit";
+          const a = document.createElement("button");
+          return a.id = "magicfeedback-back", a.type = "button", a.classList.add("magicfeedback-back"), a.textContent = n2 || "Back", a.addEventListener("click", t3), a.addEventListener("click", (() => {
+            o.removeAttribute("disabled");
+          })), "MAGICSURVEY" === e3 && s2.appendChild(a), s2.appendChild(o), s2;
         }, t2.renderError = function(e3) {
           const t3 = document.createElement("div");
           return t3.classList.add("magicfeedback-error"), t3.textContent = e3, t3;
@@ -2027,84 +4548,84 @@ var require_magicfeedback_sdk_browser = __commonJS({
         "use strict";
         var n = this && this.__awaiter || function(e3, t3, i2, n2) {
           return new (i2 || (i2 = Promise))((function(r2, s2) {
-            function a2(e4) {
+            function o2(e4) {
               try {
-                l2(n2.next(e4));
+                l(n2.next(e4));
               } catch (e5) {
                 s2(e5);
               }
             }
-            function o2(e4) {
+            function a2(e4) {
               try {
-                l2(n2.throw(e4));
+                l(n2.throw(e4));
               } catch (e5) {
                 s2(e5);
               }
             }
-            function l2(e4) {
+            function l(e4) {
               var t4;
               e4.done ? r2(e4.value) : (t4 = e4.value, t4 instanceof i2 ? t4 : new i2((function(e5) {
                 e5(t4);
-              }))).then(a2, o2);
+              }))).then(o2, a2);
             }
-            l2((n2 = n2.apply(e3, t3 || [])).next());
+            l((n2 = n2.apply(e3, t3 || [])).next());
           }));
         }, r = this && this.__importDefault || function(e3) {
           return e3 && e3.__esModule ? e3 : { default: e3 };
         };
-        Object.defineProperty(t2, "__esModule", { value: true }), t2.getFollowUpQuestion = t2.sendFeedback = t2.getQuestions = t2.getSessionForm = t2.getForm = t2.validateEmail = void 0;
-        const s = r(i(945)), a = r(i(330)), o = i(857), l = { Accept: "application/json", "Magicfeedback-Sdk-Version": a.default.version, "x-magicfeedback-parameters": window.location.search || "" };
-        t2.validateEmail = function(e3) {
+        Object.defineProperty(t2, "__esModule", { value: true }), t2.getFollowUpQuestion = t2.sendFeedback = t2.getQuestions = t2.getSessionForm = t2.getForm = t2.validateEmail = t2.header = void 0;
+        const s = r(i(326)), o = r(i(330)), a = i(857);
+        t2.header = { Accept: "application/json", "Magicfeedback-Sdk-Version": o.default.version, "x-magicfeedback-parameters": window.location.search || "" }, t2.validateEmail = function(e3) {
           return /\S+@\S+\.\S+/.test(e3);
-        }, t2.getForm = function(e3, t3, i2, r2) {
+        }, t2.getForm = function(e3, i2, r2, o2) {
           return n(this, void 0, void 0, (function* () {
             try {
-              const n2 = yield (0, s.default)(e3 + o.endpoints.sdk.app_info(t3, i2), { method: "GET", headers: l });
+              const n2 = yield (0, s.default)(e3 + a.endpoints.sdk.app_info(i2, r2), { method: "GET", headers: t2.header });
               return yield n2.json();
             } catch (e4) {
-              r2.err(e4);
+              o2.err(e4);
             }
           }));
-        }, t2.getSessionForm = function(e3, t3, i2) {
+        }, t2.getSessionForm = function(e3, i2, r2) {
           return n(this, void 0, void 0, (function* () {
             try {
-              const i3 = yield (0, s.default)(e3 + o.endpoints.sdk.session(t3), { method: "GET", headers: l });
-              return yield i3.json();
+              const n2 = yield (0, s.default)(e3 + a.endpoints.sdk.session(i2), { method: "GET", headers: t2.header });
+              return yield n2.json();
             } catch (e4) {
-              i2.err(e4);
+              r2.err(e4);
             }
           }));
-        }, t2.getQuestions = function(e3, t3, i2, r2) {
+        }, t2.getQuestions = function(e3, i2, r2, o2) {
           return n(this, void 0, void 0, (function* () {
             try {
-              const n2 = yield (0, s.default)(e3 + o.endpoints.sdk.app(t3, i2), { method: "GET", headers: l });
+              const n2 = yield (0, s.default)(e3 + a.endpoints.sdk.app(i2, r2), { method: "GET", headers: t2.header });
               if (n2.ok) {
                 const e4 = yield n2.json();
-                return r2.log(`Received questions for app ${t3}`, e4), e4;
+                return o2.log(`Received questions for app ${i2}`, e4), e4;
               }
-              throw r2.err(`Failed to get questions for app ${t3}:`, n2.status, n2.statusText), new Error("[MagicFeedback] Bad response from server");
+              throw o2.err(`Failed to get questions for app ${i2}:`, n2.status, n2.statusText), new Error("[MagicFeedback] Bad response from server");
             } catch (e4) {
-              return r2.err(e4), [];
+              return o2.err(e4), [];
             }
           }));
-        }, t2.sendFeedback = function(e3, t3, i2) {
+        }, t2.sendFeedback = function(e3, i2, r2) {
           return n(this, void 0, void 0, (function* () {
             try {
-              const n2 = yield (0, s.default)(e3 + o.endpoints.sdk.feedback, { method: "POST", headers: Object.assign({ "Content-Type": "application/json" }, l), body: JSON.stringify(t3) });
-              if (n2.ok) return i2.log(`Form ${t3.integration} submitted successfully!`), (yield n2.json()).sessionId;
-              throw i2.err(`Failed to submit form ${t3.integration}:`, n2.status, n2.statusText), new Error(n2.statusText);
+              const n2 = yield (0, s.default)(e3 + a.endpoints.sdk.feedback, { method: "POST", headers: Object.assign({ "Content-Type": "application/json" }, t2.header), body: JSON.stringify(i2) });
+              if (n2.ok) return r2.log(`Form ${i2.integration} submitted successfully!`), (yield n2.json()).sessionId;
+              throw r2.err(`Failed to submit form ${i2.integration}:`, n2.status, n2.statusText), new Error(n2.statusText);
             } catch (e4) {
-              return i2.err(e4), "";
+              return r2.err(e4), "";
             }
           }));
-        }, t2.getFollowUpQuestion = function(e3, t3, i2) {
+        }, t2.getFollowUpQuestion = function(e3, i2, r2) {
           return n(this, void 0, void 0, (function* () {
             try {
-              const n2 = yield (0, s.default)(e3 + o.endpoints.sdk.followUpQuestion, { method: "POST", headers: Object.assign({ "Content-Type": "application/json" }, l), body: JSON.stringify(t3) });
-              if (n2.ok) return i2.log(`Received follow up question for form ${t3.integration}`), (yield n2.json()) || "";
-              throw i2.err(`Failed to get follow up question for form ${t3.integration}:`, n2.status, n2.statusText), new Error(n2.statusText);
+              const n2 = yield (0, s.default)(e3 + a.endpoints.sdk.followUpQuestion, { method: "POST", headers: Object.assign({ "Content-Type": "application/json" }, t2.header), body: JSON.stringify(i2) });
+              if (n2.ok) return r2.log(`Received follow up question for form ${i2.integration}`), (yield n2.json()) || "";
+              throw r2.err(`Failed to get follow up question for form ${i2.integration}:`, n2.status, n2.statusText), new Error(n2.statusText);
             } catch (e4) {
-              return i2.err(e4), "";
+              return r2.err(e4), "";
             }
           }));
         };
@@ -2123,7 +4644,7 @@ var require_magicfeedback_sdk_browser = __commonJS({
         };
       }, 330: (e2) => {
         "use strict";
-        e2.exports = JSON.parse('{"name":"@magicfeedback/native","version":"2.2.1","main":"./dist/magicfeedback-sdk.node.js","browser":"./dist/magicfeedback-sdk.browser.js","types":"./dist/types/src/index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/MagicFeedback/magicfeedback-sdk.git"},"author":"farias@magicfeedback.io","license":"MIT","private":false,"scripts":{"dev":"vite","build":"webpack","build:watch":"webpack --watch --mode development","release":"npm publish --access public","release:beta":"npm publish --access public --tag beta","release:alpha":"npm publish --access public --tag alpha","test":"jest","test:watch":"jest --watchAll","coverage":"vitest run --coverage","publish:sdk":"bash publish.sh","publish:sdk:dry-run":"NPM_DRY_RUN=1 bash publish.sh"},"files":["dist"],"devDependencies":{"@babel/preset-typescript":"^7.22.5","@types/node":"^17.0.21","@types/webpack":"^5.28.0","@types/webpack-node-externals":"^2.5.3","c8":"^7.11.0","copy-webpack-plugin":"^11.0.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","jest-fetch-mock":"^3.0.3","nock":"^13.2.4","ts-jest":"^29.1.0","ts-loader":"^9.2.7","ts-node":"^10.7.0","typescript":"^4.6.2","vite":"^2.8.0","vite-plugin-dts":"^0.9.9","vitest":"^0.5.9","webpack":"^5.70.0","webpack-cli":"^4.9.2","webpack-node-externals":"^3.0.0"},"dependencies":{"cross-fetch":"^3.1.5","is-bundling-for-browser-or-node":"^1.1.1"},"description":"MagicFeedbackAI JavaScript Library for [MagicFeedback.io](https://magicfeedback.io/)","bugs":{"url":"https://github.com/MagicFeedback/magicfeedback-sdk/issues"},"homepage":"https://github.com/MagicFeedback/magicfeedback-sdk#readme","directories":{"example":"examples","test":"test"},"style":"./dist/styles/magicfeedback-default.css"}');
+        e2.exports = JSON.parse('{"name":"@magicfeedback/native","version":"2.2.8","main":"./dist/magicfeedback-sdk.node.js","browser":"./dist/magicfeedback-sdk.browser.js","types":"./dist/types/src/index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/MagicFeedback/magicfeedback-sdk.git"},"author":"farias@magicfeedback.io","license":"MIT","private":false,"scripts":{"dev":"vite","build":"webpack","build:watch":"webpack --watch --mode development","release":"npm publish --access public","release:beta":"npm publish --access public --tag beta","release:alpha":"npm publish --access public --tag alpha","test":"jest","test:watch":"jest --watchAll","coverage":"vitest run --coverage","publish:sdk":"bash publish.sh","publish:sdk:dry-run":"NPM_DRY_RUN=1 bash publish.sh"},"files":["dist"],"devDependencies":{"@babel/preset-typescript":"^7.22.5","@types/node":"^17.0.21","@types/webpack":"^5.28.0","@types/webpack-node-externals":"^2.5.3","c8":"^7.11.0","copy-webpack-plugin":"^11.0.0","jest":"^29.5.0","jest-environment-jsdom":"^29.5.0","jest-fetch-mock":"^3.0.3","nock":"^13.2.4","ts-jest":"^29.1.0","ts-loader":"^9.2.7","ts-node":"^10.7.0","typescript":"^4.6.2","vite":"^2.8.0","vite-plugin-dts":"^0.9.9","vitest":"^0.5.9","webpack":"^5.70.0","webpack-cli":"^4.9.2","webpack-node-externals":"^3.0.0"},"dependencies":{"cross-fetch":"^3.1.5","is-bundling-for-browser-or-node":"^1.1.1"},"description":"MagicFeedbackAI JavaScript Library for [MagicFeedback.io](https://magicfeedback.io/)","bugs":{"url":"https://github.com/MagicFeedback/magicfeedback-sdk/issues"},"homepage":"https://github.com/MagicFeedback/magicfeedback-sdk#readme","directories":{"example":"examples","test":"test"},"style":"./dist/styles/magicfeedback-default.css"}');
       } }, t = {}, (function i(n) {
         var r = t[n];
         if (void 0 !== r) return r.exports;
@@ -2241,7 +4762,6 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     // oscuros con texto blanco sobre el fondo claro del popup.
     colorScheme: isDark ? "dark" : "light",
     textPrimary: isDark ? "#f0f0f0" : "#111",
-    closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
     closeBtnHoverColor: isDark ? "#fff" : "#000000",
     textMuted: isDark ? "#9ca3af" : "#6b7280",
     progressTrack: isDark ? "#3f3f46" : "#e5e7eb"
@@ -2302,8 +4822,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close popup");
   closeBtn.innerHTML = `
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
       </svg>
     `;
   closeBtn.style.cssText = `
@@ -2318,17 +4838,15 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       cursor:pointer;
       color:${theme.textPrimary};
       padding:4px;
-      transition: color .15s ease, transform .15s ease, background .15s ease;
+      transition: color .15s ease, transform .15s ease;
       box-shadow: none !important;
     `;
   closeBtn.onmouseenter = () => {
     closeBtn.style.color = theme.closeBtnHoverColor;
-    closeBtn.style.background = theme.closeBtnHoverBg;
     closeBtn.style.transform = "scale(1.06)";
   };
   closeBtn.onmouseleave = () => {
     closeBtn.style.color = theme.textPrimary;
-    closeBtn.style.background = "transparent";
     closeBtn.style.transform = "scale(1)";
   };
   closeBtn.onclick = () => {
@@ -2718,47 +5236,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           backButton.style.color = s.buttonSecondaryColor;
           backButton.style.border = "none";
         }
-        if (s.logo) {
-          if (!document.getElementById("deepdots-popup-logo")) {
-            const logoImg = document.createElement("img");
-            logoImg.id = "deepdots-popup-logo";
-            logoImg.src = s.logo;
-            logoImg.alt = "Logo";
-            logoImg.style.cssText = "max-height:40px; max-width:100%; object-fit:contain;";
-            if (s.logoSize) {
-              switch (s.logoSize) {
-                case "small":
-                  logoImg.style.maxHeight = "30px";
-                  break;
-                case "medium":
-                  logoImg.style.maxHeight = "50px";
-                  break;
-                case "large":
-                  logoImg.style.maxHeight = "70px";
-                  break;
-              }
-            }
-            if (s.logoPosition) {
-              switch (s.logoPosition) {
-                case "left":
-                  logoImg.style.margin = "0 16px 42px 0";
-                  logoImg.style.display = "block";
-                  logoImg.style.marginLeft = "0";
-                  break;
-                case "right":
-                  logoImg.style.margin = "0 0 42px 16px";
-                  logoImg.style.display = "block";
-                  logoImg.style.marginLeft = "auto";
-                  break;
-                case "center":
-                  logoImg.style.margin = "0 auto 42px auto";
-                  logoImg.style.display = "block";
-                  break;
-              }
-            }
-            containerContent.insertBefore(logoImg, main);
-          }
-        }
+        insertPopupLogo(popup, progressEl, s, "deepdots-popup-logo");
         if (s.startMessage && s.startMessage !== "") {
           sdkLog(s.startMessage);
           onStartPage = true;
@@ -2829,6 +5307,7 @@ var init_renderPopup = __esm({
     "use strict";
     init_tracking_manager();
     init_font();
+    init_logo();
     init_logger();
     import_native = __toESM(require_magicfeedback_sdk_browser());
     init_style();
@@ -3069,7 +5548,7 @@ function jsonForScript(value) {
 }
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.4";
+  const version = opts.version ?? "2.2.8";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
   const sid = jsonForScript(opts.surveyId);
   const pid = jsonForScript(opts.productId);
@@ -3146,7 +5625,7 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
-#dd-logo{max-height:40px;max-width:100%;object-fit:contain}
+#dd-logo{max-height:40px;max-width:100%;object-fit:contain;display:block;margin:12px 0 0 0}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
 /* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
 .deepdots-success{display:none;width:100%;text-align:center;padding:24px 0;color:${textPrimary}}
@@ -3179,8 +5658,8 @@ ${customCss}
   <div class="deepdots-popup-header">
     <h2 id="dd-title" class="deepdots-popup-title" hidden></h2>
     <button type="button" id="dd-close" aria-label="Close popup">
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
       </svg>
     </button>
   </div>
@@ -3404,10 +5883,12 @@ ${customCss}
               if(s.logoSize==='small'){ logoImg.style.maxHeight='30px'; }
               else if(s.logoSize==='medium'){ logoImg.style.maxHeight='50px'; }
               else if(s.logoSize==='large'){ logoImg.style.maxHeight='70px'; }
-              if(s.logoPosition==='left'){ logoImg.style.margin='0 16px 20px 0'; logoImg.style.display='block'; logoImg.style.marginLeft='0'; }
-              else if(s.logoPosition==='right'){ logoImg.style.margin='0 0 20px 16px'; logoImg.style.display='block'; logoImg.style.marginLeft='auto'; }
-              else if(s.logoPosition==='center'){ logoImg.style.margin='0 auto 20px auto'; logoImg.style.display='block'; }
-              main.insertBefore(logoImg, document.getElementById('dd-form-wrapper'));
+              if(s.logoPosition==='left'){ logoImg.style.margin='12px 16px 0 0'; logoImg.style.marginLeft='0'; }
+              else if(s.logoPosition==='right'){ logoImg.style.margin='12px 0 0 16px'; logoImg.style.marginLeft='auto'; }
+              else if(s.logoPosition==='center'){ logoImg.style.margin='12px auto 0 auto'; }
+              // Encima de la barra de progreso, como hermano del header (espejo de ui/logo.ts en
+              // web). Fuera de #dd-main, as\xED el logo no se va con el scroll del formulario.
+              popup.insertBefore(logoImg, progressEl);
             }
             if(s.startMessage && s.startMessage!==''){ onStartPage=true; updateButtons('start'); }
             else { updateButtons('in_progress_first'); }