npm - @multiplayer-app/session-recorder-browser - Versions diffs - 1.3.4 → 1.3.5 - Mend

@multiplayer-app/session-recorder-browser 1.3.4 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/browser/index.js CHANGED Viewed

@@ -24654,7 +24654,7 @@ const CONTINUOUS_DEBUGGING_TIMEOUT = 60000; // 1 minutes
 const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30; // TODO: move to shared config otel core
 const REMOTE_SESSION_RECORDING_START = 'remote-session-recording:start';
 const REMOTE_SESSION_RECORDING_STOP = 'remote-session-recording:stop';
-const PACKAGE_VERSION_EXPORT = "1.3.4" || 0;
+const PACKAGE_VERSION_EXPORT = "1.3.5" || 0;
 // Regex patterns for OpenTelemetry ignore URLs
 const OTEL_IGNORE_URLS = [
     // Traces endpoint
@@ -30774,7 +30774,7 @@ var UserType;
 /***/ ((module) => {
 "use strict";
-module.exports = "* {\n  font-family: \"PP Neue Montreal\", Montserrat, Roboto, Arial, sans-serif !important;\n  box-sizing: border-box;\n}\n\n.hidden {\n  display: none !important;\n}\n\ntextarea {\n  background: #ffffff;\n  color: #2d3748;\n}\n\n.mp-session-debugger-button {\n  cursor: pointer;\n  border-radius: 12px;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  z-index: 2247483003;\n  padding: 5px;\n  background-color: #ffffff;\n  border: solid 1px #bebfc1;\n  border-radius: 36px;\n  color: #718096;\n  transition: background 0.3s;\n  width: 42px;\n  height: 42px;\n  will-change: right, bottom;\n}\n.mp-session-debugger-button.is-started {\n  color: #493bff;\n}\n.mp-session-debugger-button.top-left {\n  top: 24px;\n  left: 24px;\n}\n.mp-session-debugger-button.top-right {\n  top: 24px;\n  right: 24px;\n}\n.mp-session-debugger-button.bottom-left {\n  bottom: 24px;\n  left: 24px;\n}\n.mp-session-debugger-button.bottom-right {\n  bottom: 24px;\n  right: 24px;\n}\n.mp-session-debugger-button.no-draggable {\n  position: static;\n}\n.mp-session-debugger-button.no-draggable::before {\n  transform: translateY(-18px) !important;\n  top: -10px !important;\n  left: 10px !important;\n}\n.mp-session-debugger-button.no-draggable:hover::before {\n  z-index: 1;\n  transform: translateY(-18px);\n  top: -10px;\n  left: 10px;\n  right: unset;\n}\n.mp-session-debugger-button.no-draggable.no-tooltip::before {\n  display: none;\n}\n.mp-session-debugger-button.mp-button-blue {\n  border: 1px rgba(0, 0, 0, 0.2);\n  background: #493bff;\n}\n.mp-session-debugger-button.mp-button-blue::before {\n  opacity: 1;\n  transform: translateX(0);\n}\n.mp-session-debugger-button:not([data-tooltip=\"\"]):before {\n  content: attr(data-tooltip);\n  position: absolute;\n  pointer-events: none;\n  height: 28px;\n  top: 6px;\n  padding: 6px 8px 6px 8px;\n  border-radius: 8px;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n  opacity: 0;\n  transition: all 0.3s;\n  background: #1a202c;\n  color: white;\n  white-space: nowrap;\n  box-sizing: border-box;\n  z-index: -1;\n  transform: translateX(-8px);\n  left: unset;\n  right: 100%;\n}\n.mp-session-debugger-button:not([data-tooltip=\"\"]).top-left:before, .mp-session-debugger-button:not([data-tooltip=\"\"]).bottom-left:before, .mp-session-debugger-button:not([data-tooltip=\"\"]).button-leftside:before {\n  transform: translateX(8px);\n  left: 100%;\n  right: unset;\n}\n.mp-session-debugger-button:not(.no-hover):hover {\n  color: #473cfb;\n  box-shadow: 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06);\n}\n.mp-session-debugger-button:not(.no-hover):hover:before {\n  opacity: 1;\n}\n.mp-session-debugger-button:not(.no-hover):hover:not(.no-draggable) .mp-drag-hint svg {\n  opacity: 1;\n}\n.mp-session-debugger-button svg {\n  transform: rotate(0deg);\n  transition: transform 0.3s linear;\n}\n.mp-session-debugger-button.rotate-on-hover:hover svg {\n  transform: rotate(-180deg);\n}\n.mp-session-debugger-button.animate-rotate svg {\n  animation: _rotateAnimation 3s linear infinite;\n}\n\n.animate-bounce {\n  animation: _bounceAnimation 1.6s infinite;\n  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);\n}\n\n.mp-drag-hint svg {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: -3px;\n  right: -9px;\n  opacity: 0;\n  transform: unset !important;\n  transition: opacity 0.1ms ease-in !important;\n  cursor: grab;\n}\n\n.mp-session-debugger-popover-textarea {\n  border: 1px solid #cbd5e0;\n  box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.0588235294), 0 6px 6px -3px rgba(0, 0, 0, 0.0588235294), 0 3px 3px -1.5px rgba(0, 0, 0, 0.0588235294), 0 1px 1px -0.5px rgba(0, 0, 0, 0.0588235294);\n  padding: 10px 13px 10px 13px;\n  border-radius: 12px;\n  font-family: Inter, serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #718096;\n  margin-bottom: 32px;\n  width: 100%;\n  height: 80px;\n  resize: none;\n}\n\n.mp-session-debugger-popover {\n  position: fixed;\n  bottom: 90px;\n  right: 24px;\n  width: 300px;\n  background: #ffffff;\n  border-radius: 24px;\n  overflow: hidden;\n  border: 1px solid rgb(245, 245, 245);\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n  z-index: 10000;\n}\n.mp-session-debugger-popover.hidden {\n  display: none;\n}\n.mp-session-debugger-popover-content {\n  position: relative;\n  padding: 65px 16px 16px;\n}\n.mp-session-debugger-popover-header {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  gap: 8px;\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%), linear-gradient(90deg, #d8f3fd 0%, #e3ecfd 100%);\n}\n.mp-session-debugger-popover-header a {\n  color: inherit;\n  margin-right: auto;\n  text-decoration: none;\n}\n.mp-session-debugger-popover-body h2 {\n  margin-bottom: 4px;\n  font-size: 18px;\n  font-weight: 600;\n  color: #2d3748;\n  font-family: \"PP Neue Montreal\", Montserrat, Roboto, Arial, sans-serif;\n}\n.mp-session-debugger-popover-body p {\n  font-family: \"PP Neue Montreal\", Montserrat, Roboto, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #718096;\n  margin-bottom: 32px;\n}\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-continuous-debugging-overlay {\n  display: flex;\n}\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-continuous-debugging ~ h2,\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-continuous-debugging ~ p {\n  display: none;\n}\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-popover-footer {\n  display: none;\n}\n.mp-session-debugger-popover-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.mp-session-debugger-popover-button {\n  cursor: pointer;\n  border-radius: 12px;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n  border: none;\n  color: #ffffff;\n  width: 100%;\n  position: relative;\n  padding: 12px 16px;\n  border-radius: 12px;\n  background: transparent;\n  overflow: hidden;\n  z-index: 1;\n}\n.mp-session-debugger-popover-button::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(180deg, #493bff 0%, #382be4 100%);\n  transition: opacity 0.3s linear;\n  z-index: -1;\n}\n.mp-session-debugger-popover-button::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(180deg, #160d9c 0%, #160d9c 100%);\n  transition: opacity 0.3s linear;\n  z-index: -1;\n  opacity: 0;\n}\n.mp-session-debugger-popover-button:hover::after {\n  opacity: 1;\n}\n.mp-session-debugger-popover-button:disabled, .mp-session-debugger-popover-button.disabled {\n  pointer-events: none;\n  opacity: 0.6;\n  cursor: not-allowed;\n  transition: opacity 0.2s ease;\n}\n.mp-session-debugger-popover-button:disabled:hover, .mp-session-debugger-popover-button:disabled:focus, .mp-session-debugger-popover-button.disabled:hover, .mp-session-debugger-popover-button.disabled:focus {\n  background-color: inherit;\n  box-shadow: none;\n}\n.mp-session-debugger-continuous-debugging {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 12px;\n  border-radius: 12px;\n  border: 1px solid #e1e8f1;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n  margin-bottom: 15px;\n}\n.mp-session-debugger-continuous-debugging-overlay {\n  /* Delete this block after it was fixed in the lib */\n  position: relative;\n  inset: unset;\n  padding: 0;\n  display: none;\n  border-radius: 12px;\n  backdrop-filter: blur(10px);\n  background: rgba(255, 255, 255, 0.5);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.mp-session-debugger-continuous-debugging-overlay-content {\n  padding: 12px;\n  background: #ffffff;\n  border-radius: 12px;\n  border: 1px solid #e1e8f1;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n}\n.mp-session-debugger-continuous-debugging-overlay-content h3 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: flex-start;\n  margin: 0;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n}\n.mp-session-debugger-continuous-debugging-overlay-content h3 svg {\n  width: 20px;\n  height: 20px;\n  animation: _bounceAnimation 1.6s infinite;\n  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);\n}\n.mp-session-debugger-continuous-debugging-overlay-content p {\n  margin: 0;\n}\n.mp-session-debugger-continuous-debugging-label {\n  gap: 8px;\n  display: flex;\n  font-size: 14px;\n  color: #2d3748;\n  font-weight: 500;\n}\n.mp-session-debugger-continuous-debugging-switch {\n  display: flex;\n  align-items: center;\n  width: 44px;\n  height: 24px;\n  padding: 2px;\n  cursor: pointer;\n  border-radius: 36px;\n  background: #e2e8f0;\n}\n.mp-session-debugger-continuous-debugging-switch:has(input:checked) {\n  background: #493bff;\n  justify-content: flex-end;\n}\n.mp-session-debugger-continuous-debugging-switch input {\n  display: none;\n}\n.mp-session-debugger-continuous-debugging-switch span {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  transition: transform 0.2s;\n}\n\n.mp-recording-overlay {\n  background: #5c5d5d;\n  color: #ffffff;\n  display: flex;\n  z-index: 2147483007;\n  left: 50%;\n  bottom: 20px;\n  position: fixed;\n  transform: translate(-50%, 0);\n  border: 0.5px solid #5c5d5d;\n  border-radius: 24px;\n  font-family: Arial, sans-serif;\n  flex-direction: row;\n  font-size: 14px;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.3);\n}\n.mp-recording-overlay.hidden {\n  display: none;\n}\n.mp-recording-status {\n  gap: 8px;\n  display: flex;\n  padding: 12px 12px;\n  flex-direction: row;\n  align-items: center;\n}\n.mp-recording-indicator {\n  width: 24px;\n  height: 24px;\n  animation: pulse 1.5s infinite;\n}\n.mp-recording-controls {\n  display: flex;\n}\n.mp-recording-btn {\n  border: none;\n  border-right: 0.5px solid #5c5d5d;\n  background: #414141;\n  padding: 6px 12px;\n  font-weight: bold;\n  cursor: pointer;\n  color: #ffffff;\n  gap: 8px;\n  height: 100%;\n}\n\n.mp-session-debugger-modal.hidden {\n  display: none;\n}\n\n.mp-session-debugger-popover-logo svg {\n  width: 30px;\n}\n\n.mp-session-debugger-dismiss-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 6px 16px;\n  background: white;\n  border: 1px solid #e1e8f1;\n  box-shadow: 0 3px 3px -1.5px rgba(0, 0, 0, 0.0588235294), 0 1px 1px -0.5px rgba(0, 0, 0, 0.0588235294);\n  border-radius: 12px;\n  font-size: 14px;\n  color: #2d3748;\n  font-weight: 500;\n}\n\n.mp-session-debugger-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 10003;\n}\n\n/* Modal content */\n.mp-session-debugger-modal-content {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  width: 80vw;\n  min-height: 70vh;\n  max-height: 90vh;\n  z-index: 10004;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Close button */\n.mp-session-debugger-modal-close {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: grey;\n  line-height: 1;\n}\n.mp-session-debugger-modal-close svg {\n  vertical-align: top;\n}\n\n/* Modal body */\n.mp-session-debugger-modal-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 20px 0;\n  height: 100%;\n  overflow: hidden;\n  background: white;\n}\n.mp-session-debugger-modal-body .rr-player {\n  border-radius: 4px;\n  border: 1px solid #c1c5ca;\n  box-shadow: unset;\n  overflow: hidden;\n}\n\n.mp-session-debugger-player-frame {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n.mp-session-debugger-player-frame .replayer-wrapper {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n\n/* Modal footer */\n.mp-session-debugger-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n/* Buttons */\n.mp-session-debugger-modal-button {\n  width: auto;\n}\n\n.mp-dismiss-recording,\n.mp-dismiss-recording:before,\n.mp-dismiss-recording:after {\n  background: white;\n  border: 1px solid #e1e8f1;\n  color: #2d3748;\n}\n\n@keyframes _rotateAnimation {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes _bounceAnimation {\n  0%, 100% {\n    padding: 3px;\n  }\n  50% {\n    padding: 0;\n  }\n}\n#mp-submission-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n#mp-submission-dialog.hidden {\n  display: none;\n}\n#mp-submission-dialog .mp-dialog-backdrop {\n  background: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  width: 100%;\n  height: 100%;\n}\n#mp-submission-dialog .mp-dialog-content {\n  top: 30%;\n  left: 40%;\n  position: absolute;\n  background: #ffffff;\n  border-radius: 24px;\n  padding: 24px;\n  width: 90%;\n  max-width: 450px;\n  z-index: 100000;\n  animation: fadeIn 0.3s ease-out;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n}\n#mp-submission-dialog .mp-dialog-actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n#mp-submission-dialog h3 {\n  margin-bottom: 16px;\n  font-size: 20px;\n  color: #2a374a;\n}\n#mp-submission-dialog .subtitle {\n  font-size: 12px;\n  color: #6d8198;\n  margin-bottom: 16px;\n}\n#mp-submission-dialog .form-group {\n  margin-bottom: 20px;\n}\n#mp-submission-dialog label {\n  display: block;\n  margin-bottom: 8px;\n  color: #555;\n  font-size: 14px;\n}\n#mp-submission-dialog textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  resize: vertical;\n  min-height: 100px;\n  max-height: 350px;\n  font-family: inherit;\n  font-size: 14px;\n  transition: border 0.2s;\n}\n#mp-submission-dialog textarea:focus {\n  outline: none;\n  border-color: #382be4;\n  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);\n}\n#mp-submission-dialog textarea::placeholder {\n  color: #6d8198;\n  opacity: 1;\n}\n#mp-submission-dialog button {\n  padding: 12px 16px;\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n  height: auto;\n}\n#mp-submission-dialog #mp-cancel-submission {\n  background: #f5f5f5;\n  border: 1px solid #e1e8f1;\n  color: #2d3748;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n}\n#mp-submission-dialog #mp-submit-recording {\n  background: linear-gradient(180deg, #493bff 0%, #382be4 100%);\n  border: none;\n  color: #ffffff;\n}\n#mp-submission-dialog #mp-submit-recording:hover {\n  background: linear-gradient(180deg, #493bff 0%, #160d9c 100%);\n}\n\n#mp-confirmation-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  font-size: 14px;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n#mp-confirmation-dialog .mp-dialog-content {\n  padding: 20px;\n  color: #2a374a;\n  max-width: 410px;\n  background: #ffffff;\n  border-radius: 24px;\n}\n#mp-confirmation-dialog .mp-dialog-buttons {\n  gap: 12px;\n  display: flex;\n  margin-top: 16px;\n  justify-content: flex-end;\n}\n#mp-confirmation-dialog button {\n  font-weight: 500;\n  cursor: pointer;\n  padding: 12px 16px;\n  border-radius: 12px;\n  transition: all 0.2s;\n}\n#mp-confirmation-dialog #mp-dialog-confirm {\n  background: #dd524c;\n  color: #ffffff;\n}\n#mp-confirmation-dialog #mp-dialog-confirm:hover {\n  background: #c53030;\n}\n#mp-confirmation-dialog #mp-dialog-cancel {\n  background: #f5f5f5;\n  border: 1px solid #e1e8f1;\n  color: #2d3748;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n}\n\n.mp-drag-handle {\n  padding: 12px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mp-toast {\n  left: 50%;\n  bottom: 40px;\n  position: fixed;\n  transform: translateX(-50%);\n  background: #535454;\n  z-index: 10001;\n  padding: 0;\n  border: none;\n  border-radius: 14px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);\n  display: flex;\n  font-size: 14px;\n  font-weight: 500;\n  animation: slideUpCenter 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mp-toast-error .mp-toast-icon {\n  color: #dd524c;\n}\n.mp-toast.hidden {\n  display: none;\n}\n.mp-toast-content {\n  padding: 0;\n  gap: 12px;\n  color: white;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n}\n.mp-toast-icon {\n  margin-left: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.mp-toast-icon svg {\n  width: 20px;\n  height: 20px;\n}\n.mp-toast-message {\n  flex: 1;\n  margin-right: 12px;\n  font-weight: 500;\n}\n.mp-toast-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-right-radius: 14px;\n  border-bottom-right-radius: 14px;\n  padding: 12px 16px !important;\n  background: #414141 !important;\n  font-weight: 500 !important;\n  border: 0.5px solid #5c5d5d;\n  cursor: pointer;\n  text-decoration: none !important;\n  transition: background 0.18s;\n}\n.mp-toast-button:hover, .mp-toast-button:focus {\n  background: rgba(255, 255, 255, 0.18);\n}\n\n@keyframes slideUpCenter {\n  from {\n    transform: translateX(-50%) translateY(40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n}";
+module.exports = "* {\n  font-family: \"PP Neue Montreal\", Montserrat, Roboto, Arial, sans-serif !important;\n  box-sizing: border-box;\n}\n\n.hidden {\n  display: none !important;\n}\n\ntextarea {\n  background: #ffffff;\n  color: #2d3748;\n}\n\na,\nbutton {\n  appearance: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n}\n\n.mp-session-debugger-button {\n  cursor: pointer;\n  border-radius: 12px;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  z-index: 2247483003;\n  padding: 5px;\n  background-color: #ffffff;\n  border: solid 1px #bebfc1;\n  border-radius: 36px;\n  color: #718096;\n  transition: background 0.3s;\n  width: 42px;\n  height: 42px;\n  will-change: right, bottom;\n}\n.mp-session-debugger-button.is-started {\n  color: #493bff;\n}\n.mp-session-debugger-button.top-left {\n  top: 24px;\n  left: 24px;\n}\n.mp-session-debugger-button.top-right {\n  top: 24px;\n  right: 24px;\n}\n.mp-session-debugger-button.bottom-left {\n  bottom: 24px;\n  left: 24px;\n}\n.mp-session-debugger-button.bottom-right {\n  bottom: 24px;\n  right: 24px;\n}\n.mp-session-debugger-button.no-draggable {\n  position: static;\n}\n.mp-session-debugger-button.no-draggable::before {\n  transform: translateY(-18px) !important;\n  top: -10px !important;\n  left: 10px !important;\n}\n.mp-session-debugger-button.no-draggable:hover::before {\n  z-index: 1;\n  transform: translateY(-18px);\n  top: -10px;\n  left: 10px;\n  right: unset;\n}\n.mp-session-debugger-button.no-draggable.no-tooltip::before {\n  display: none;\n}\n.mp-session-debugger-button.mp-button-blue {\n  border: 1px rgba(0, 0, 0, 0.2);\n  background: #493bff;\n}\n.mp-session-debugger-button.mp-button-blue::before {\n  opacity: 1;\n  transform: translateX(0);\n}\n.mp-session-debugger-button:not([data-tooltip=\"\"]):before {\n  content: attr(data-tooltip);\n  position: absolute;\n  pointer-events: none;\n  height: 28px;\n  top: 6px;\n  padding: 6px 8px 6px 8px;\n  border-radius: 8px;\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n  opacity: 0;\n  transition: all 0.3s;\n  background: #1a202c;\n  color: white;\n  white-space: nowrap;\n  box-sizing: border-box;\n  z-index: -1;\n  transform: translateX(-8px);\n  left: unset;\n  right: 100%;\n}\n.mp-session-debugger-button:not([data-tooltip=\"\"]).top-left:before, .mp-session-debugger-button:not([data-tooltip=\"\"]).bottom-left:before, .mp-session-debugger-button:not([data-tooltip=\"\"]).button-leftside:before {\n  transform: translateX(8px);\n  left: 100%;\n  right: unset;\n}\n.mp-session-debugger-button:not(.no-hover):hover {\n  color: #473cfb;\n  box-shadow: 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06);\n}\n.mp-session-debugger-button:not(.no-hover):hover:before {\n  opacity: 1;\n}\n.mp-session-debugger-button:not(.no-hover):hover:not(.no-draggable) .mp-drag-hint svg {\n  opacity: 1;\n}\n.mp-session-debugger-button svg {\n  transform: rotate(0deg);\n  transition: transform 0.3s linear;\n}\n.mp-session-debugger-button.rotate-on-hover:hover svg {\n  transform: rotate(-180deg);\n}\n.mp-session-debugger-button.animate-rotate svg {\n  animation: _rotateAnimation 3s linear infinite;\n}\n\n.animate-bounce {\n  animation: _bounceAnimation 1.6s infinite;\n  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);\n}\n\n.mp-drag-hint svg {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: -3px;\n  right: -9px;\n  opacity: 0;\n  transform: unset !important;\n  transition: opacity 0.1ms ease-in !important;\n  cursor: grab;\n}\n\n.mp-session-debugger-popover-textarea {\n  border: 1px solid #cbd5e0;\n  box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.0588235294), 0 6px 6px -3px rgba(0, 0, 0, 0.0588235294), 0 3px 3px -1.5px rgba(0, 0, 0, 0.0588235294), 0 1px 1px -0.5px rgba(0, 0, 0, 0.0588235294);\n  padding: 10px 13px 10px 13px;\n  border-radius: 12px;\n  font-family: Inter, serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #718096;\n  margin-bottom: 32px;\n  width: 100%;\n  height: 80px;\n  resize: none;\n}\n\n.mp-session-debugger-popover {\n  position: fixed;\n  bottom: 90px;\n  right: 24px;\n  width: 300px;\n  background: #ffffff;\n  border-radius: 24px;\n  overflow: hidden;\n  border: 1px solid rgb(245, 245, 245);\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n  z-index: 10000;\n}\n.mp-session-debugger-popover.hidden {\n  display: none;\n}\n.mp-session-debugger-popover-content {\n  position: relative;\n  padding: 65px 16px 16px;\n}\n.mp-session-debugger-popover-header {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  gap: 8px;\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%), linear-gradient(90deg, #d8f3fd 0%, #e3ecfd 100%);\n}\n.mp-session-debugger-popover-header a {\n  color: inherit;\n  margin-right: auto;\n  text-decoration: none;\n}\n.mp-session-debugger-popover-body h2 {\n  margin-bottom: 4px;\n  font-size: 18px;\n  font-weight: 600;\n  color: #2d3748;\n  font-family: \"PP Neue Montreal\", Montserrat, Roboto, Arial, sans-serif;\n}\n.mp-session-debugger-popover-body p {\n  font-family: \"PP Neue Montreal\", Montserrat, Roboto, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #718096;\n  margin-bottom: 32px;\n}\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-continuous-debugging-overlay {\n  display: flex;\n}\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-continuous-debugging ~ h2,\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-continuous-debugging ~ p {\n  display: none;\n}\n.mp-session-debugger-popover-body:has(#mp-session-debugger-continuous-debugging-checkbox:checked) .mp-session-debugger-popover-footer {\n  display: none;\n}\n.mp-session-debugger-popover-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.mp-session-debugger-popover-button {\n  cursor: pointer;\n  border-radius: 12px;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n  border: none;\n  color: #ffffff;\n  width: 100%;\n  position: relative;\n  padding: 12px 16px;\n  border-radius: 12px;\n  background: transparent;\n  overflow: hidden;\n  z-index: 1;\n}\n.mp-session-debugger-popover-button::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(180deg, #493bff 0%, #382be4 100%);\n  transition: opacity 0.3s linear;\n  z-index: -1;\n}\n.mp-session-debugger-popover-button::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(180deg, #160d9c 0%, #160d9c 100%);\n  transition: opacity 0.3s linear;\n  z-index: -1;\n  opacity: 0;\n}\n.mp-session-debugger-popover-button:hover::after {\n  opacity: 1;\n}\n.mp-session-debugger-popover-button:disabled, .mp-session-debugger-popover-button.disabled {\n  pointer-events: none;\n  opacity: 0.6;\n  cursor: not-allowed;\n  transition: opacity 0.2s ease;\n}\n.mp-session-debugger-popover-button:disabled:hover, .mp-session-debugger-popover-button:disabled:focus, .mp-session-debugger-popover-button.disabled:hover, .mp-session-debugger-popover-button.disabled:focus {\n  background-color: inherit;\n  box-shadow: none;\n}\n.mp-session-debugger-continuous-debugging {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 12px;\n  border-radius: 12px;\n  border: 1px solid #e1e8f1;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n  margin-bottom: 15px;\n}\n.mp-session-debugger-continuous-debugging-overlay {\n  /* Delete this block after it was fixed in the lib */\n  position: relative;\n  inset: unset;\n  padding: 0;\n  display: none;\n  border-radius: 12px;\n  backdrop-filter: blur(10px);\n  background: rgba(255, 255, 255, 0.5);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.mp-session-debugger-continuous-debugging-overlay-content {\n  padding: 12px;\n  background: #ffffff;\n  border-radius: 12px;\n  border: 1px solid #e1e8f1;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n}\n.mp-session-debugger-continuous-debugging-overlay-content h3 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: flex-start;\n  margin: 0;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n}\n.mp-session-debugger-continuous-debugging-overlay-content h3 svg {\n  width: 20px;\n  height: 20px;\n  animation: _bounceAnimation 1.6s infinite;\n  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);\n}\n.mp-session-debugger-continuous-debugging-overlay-content p {\n  margin: 0;\n}\n.mp-session-debugger-continuous-debugging-label {\n  gap: 8px;\n  display: flex;\n  font-size: 14px;\n  color: #2d3748;\n  font-weight: 500;\n}\n.mp-session-debugger-continuous-debugging-switch {\n  display: flex;\n  align-items: center;\n  width: 44px;\n  height: 24px;\n  padding: 2px;\n  cursor: pointer;\n  border-radius: 36px;\n  background: #e2e8f0;\n}\n.mp-session-debugger-continuous-debugging-switch:has(input:checked) {\n  background: #493bff;\n  justify-content: flex-end;\n}\n.mp-session-debugger-continuous-debugging-switch input {\n  display: none;\n}\n.mp-session-debugger-continuous-debugging-switch span {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  transition: transform 0.2s;\n}\n\n.mp-recording-overlay {\n  background: #5c5d5d;\n  color: #ffffff;\n  display: flex;\n  z-index: 2147483007;\n  left: 50%;\n  bottom: 20px;\n  position: fixed;\n  transform: translate(-50%, 0);\n  border: 0.5px solid #5c5d5d;\n  border-radius: 24px;\n  font-family: Arial, sans-serif;\n  flex-direction: row;\n  font-size: 14px;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.3);\n}\n.mp-recording-overlay.hidden {\n  display: none;\n}\n.mp-recording-status {\n  gap: 8px;\n  display: flex;\n  padding: 12px 12px;\n  flex-direction: row;\n  align-items: center;\n}\n.mp-recording-indicator {\n  width: 24px;\n  height: 24px;\n  animation: pulse 1.5s infinite;\n}\n.mp-recording-controls {\n  display: flex;\n}\n.mp-recording-btn {\n  border: none;\n  border-right: 0.5px solid #5c5d5d;\n  background: #414141;\n  padding: 6px 12px;\n  font-weight: bold;\n  cursor: pointer;\n  color: #ffffff;\n  gap: 8px;\n  height: 100%;\n}\n\n.mp-session-debugger-modal.hidden {\n  display: none;\n}\n\n.mp-session-debugger-popover-logo svg {\n  width: 30px;\n}\n\n.mp-session-debugger-dismiss-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 6px 16px;\n  background: white;\n  border: 1px solid #e1e8f1;\n  box-shadow: 0 3px 3px -1.5px rgba(0, 0, 0, 0.0588235294), 0 1px 1px -0.5px rgba(0, 0, 0, 0.0588235294);\n  border-radius: 12px;\n  font-size: 14px;\n  color: #2d3748;\n  font-weight: 500;\n}\n\n.mp-session-debugger-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 10003;\n}\n\n/* Modal content */\n.mp-session-debugger-modal-content {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  width: 80vw;\n  min-height: 70vh;\n  max-height: 90vh;\n  z-index: 10004;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Close button */\n.mp-session-debugger-modal-close {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: grey;\n  line-height: 1;\n}\n.mp-session-debugger-modal-close svg {\n  vertical-align: top;\n}\n\n/* Modal body */\n.mp-session-debugger-modal-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 20px 0;\n  height: 100%;\n  overflow: hidden;\n  background: white;\n}\n.mp-session-debugger-modal-body .rr-player {\n  border-radius: 4px;\n  border: 1px solid #c1c5ca;\n  box-shadow: unset;\n  overflow: hidden;\n}\n\n.mp-session-debugger-player-frame {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n.mp-session-debugger-player-frame .replayer-wrapper {\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n}\n\n/* Modal footer */\n.mp-session-debugger-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n/* Buttons */\n.mp-session-debugger-modal-button {\n  width: auto;\n}\n\n.mp-dismiss-recording,\n.mp-dismiss-recording:before,\n.mp-dismiss-recording:after {\n  background: white;\n  border: 1px solid #e1e8f1;\n  color: #2d3748;\n}\n\n@keyframes _rotateAnimation {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes _bounceAnimation {\n  0%, 100% {\n    padding: 3px;\n  }\n  50% {\n    padding: 0;\n  }\n}\n#mp-submission-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n#mp-submission-dialog.hidden {\n  display: none;\n}\n#mp-submission-dialog .mp-dialog-backdrop {\n  background: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  width: 100%;\n  height: 100%;\n}\n#mp-submission-dialog .mp-dialog-content {\n  top: 30%;\n  left: 40%;\n  position: absolute;\n  background: #ffffff;\n  border-radius: 24px;\n  padding: 24px;\n  width: 90%;\n  max-width: 450px;\n  z-index: 100000;\n  animation: fadeIn 0.3s ease-out;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n}\n#mp-submission-dialog .mp-dialog-actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n#mp-submission-dialog h3 {\n  margin-bottom: 16px;\n  font-size: 20px;\n  color: #2a374a;\n}\n#mp-submission-dialog .subtitle {\n  font-size: 12px;\n  color: #6d8198;\n  margin-bottom: 16px;\n}\n#mp-submission-dialog .form-group {\n  margin-bottom: 20px;\n}\n#mp-submission-dialog label {\n  display: block;\n  margin-bottom: 8px;\n  color: #555;\n  font-size: 14px;\n}\n#mp-submission-dialog textarea {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  resize: vertical;\n  min-height: 100px;\n  max-height: 350px;\n  font-family: inherit;\n  font-size: 14px;\n  transition: border 0.2s;\n}\n#mp-submission-dialog textarea:focus {\n  outline: none;\n  border-color: #382be4;\n  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);\n}\n#mp-submission-dialog textarea::placeholder {\n  color: #6d8198;\n  opacity: 1;\n}\n#mp-submission-dialog button {\n  padding: 12px 16px;\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n  height: auto;\n}\n#mp-submission-dialog #mp-cancel-submission {\n  background: #f5f5f5;\n  border: 1px solid #e1e8f1;\n  color: #2d3748;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n}\n#mp-submission-dialog #mp-submit-recording {\n  background: linear-gradient(180deg, #493bff 0%, #382be4 100%);\n  border: none;\n  color: #ffffff;\n}\n#mp-submission-dialog #mp-submit-recording:hover {\n  background: linear-gradient(180deg, #493bff 0%, #160d9c 100%);\n}\n\n#mp-confirmation-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  font-size: 14px;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n#mp-confirmation-dialog .mp-dialog-content {\n  padding: 20px;\n  color: #2a374a;\n  max-width: 410px;\n  background: #ffffff;\n  border-radius: 24px;\n}\n#mp-confirmation-dialog .mp-dialog-buttons {\n  gap: 12px;\n  display: flex;\n  margin-top: 16px;\n  justify-content: flex-end;\n}\n#mp-confirmation-dialog button {\n  font-weight: 500;\n  cursor: pointer;\n  padding: 12px 16px;\n  border-radius: 12px;\n  transition: all 0.2s;\n}\n#mp-confirmation-dialog #mp-dialog-confirm {\n  background: #dd524c;\n  color: #ffffff;\n}\n#mp-confirmation-dialog #mp-dialog-confirm:hover {\n  background: #c53030;\n}\n#mp-confirmation-dialog #mp-dialog-cancel {\n  background: #f5f5f5;\n  border: 1px solid #e1e8f1;\n  color: #2d3748;\n  box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);\n}\n\n.mp-drag-handle {\n  padding: 12px 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mp-toast {\n  left: 50%;\n  bottom: 40px;\n  position: fixed;\n  transform: translateX(-50%);\n  background: #535454;\n  z-index: 10001;\n  padding: 0;\n  border: none;\n  border-radius: 14px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);\n  display: flex;\n  font-size: 14px;\n  font-weight: 500;\n  animation: slideUpCenter 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mp-toast-error .mp-toast-icon {\n  color: #dd524c;\n}\n.mp-toast.hidden {\n  display: none;\n}\n.mp-toast-content {\n  padding: 0;\n  gap: 12px;\n  color: white;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n}\n.mp-toast-icon {\n  margin-left: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.mp-toast-icon svg {\n  width: 20px;\n  height: 20px;\n}\n.mp-toast-message {\n  flex: 1;\n  margin-right: 12px;\n  font-weight: 500;\n}\n.mp-toast-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-right-radius: 14px;\n  border-bottom-right-radius: 14px;\n  padding: 12px 16px !important;\n  background: #414141 !important;\n  font-weight: 500 !important;\n  border: 0.5px solid #5c5d5d;\n  cursor: pointer;\n  text-decoration: none !important;\n  transition: background 0.18s;\n  color: white;\n}\n.mp-toast-button:hover, .mp-toast-button:focus {\n  background: rgba(255, 255, 255, 0.18);\n}\n\n@keyframes slideUpCenter {\n  from {\n    transform: translateX(-50%) translateY(40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n}";
 /***/ }),