.chat-style-slide {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background: white;
     /* border-radius: 0 !important; */
     box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
     z-index: 2;
     animation: slideFromRight 0.4s ease forwards;
 }

 .form-check.mb-4 {
     margin-bottom: unset !important;
 }

 @keyframes slideFromRight {
     from {
         right: -100%;
         opacity: 0.2;
     }

     to {
         right: 0;
         opacity: 1;
     }
 }

 @keyframes slideFromLeft {
     from {
         left: -100%;
         opacity: 0.2;
     }

     to {
         left: 0;
         opacity: 1;
     }
 }

 /* Per mobile mode, più stretto */
 .chat-preview-wrapper.mobile-mode .chat-style-slide {
     width: 100%;
 }

 /* Reset base */
 #chatPreviewBox {
     transition: all 0.3s ease;
     position: absolute;
 }

 /* Docked stile Messenger */
 .chat-style-docked {
     bottom: 20px;
     right: 20px;
     /* border-radius: 15px 15px 0 0; */
 }

 /* Popup al centro */
 .chat-style-popup {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 15px;
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
 }

 /* Slide da destra - SOLO per preview in modale Aspetto Chat */
 #chatPreviewBox.chat-style-slide {
     position: absolute;
     top: 0;
     right: 0;
     /* oppure left: 0 per slide da sinistra */
     width: 100%;
     /* o 80%, se vuoi margini */
     height: 100%;
     border-radius: 0;
     box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
     background: white;
     z-index: 2;
     /* inferiore a modale ma superiore ad altri elementi */
     animation: slideFromRight 0.4s ease forwards;
 }

 /* Slide da destra - per loader.js (widget reale nelle pagine) */
 body:not(#widget-html-body) .chat-style-slide {
     position: fixed !important;
     top: 0 !important;
     right: 0 !important;
     width: 350px !important;
     max-width: 100% !important;
     height: 100% !important;
     border-radius: 0 !important;
     box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
     background: white;
     z-index: 9999 !important;
     animation: slideFromRight 0.4s ease forwards;
 }

 /* Nascondi il widget quando lo slide è aperto - SOLO nel loader */
 body:not(#widget-html-body) .chat-style-slide[style*="display: flex"]~.chat-button,
 body:not(#widget-html-body) .chat-style-slide[style*="display: flex"]+.chat-button {
     display: none !important;
 }


 /* Slide animation */
 @keyframes slideIn {
     to {
         right: 0;
     }
 }

 #chatPreviewWrapperOuter.desktop-mode {
     max-width: 100%;
     margin: 0 auto;
 }

 #chatPreviewWrapperOuter.mobile-mode {
     width: 375px;
     margin: 0 auto;
     border: 1px solid #aaa;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .chat-preview-wrapper.desktop-mode {
     width: 100%;
     height: 600px;
 }


 .chat-preview-wrapper.mobile-mode {
     width: 375px;
     height: 667px;
     margin: 0 auto;
     border: 1px solid #aaa;
     /* border-radius: 10px; */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: center;
 }

 .chat-preview-wrapper .chat-box {
     width: 100%;
     height: 100%;
 }


 #chatPreviewContainer {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 600px;
     /* o qualsiasi altezza desiderata */
     padding: 20px;
     background-color: #e5e7eb;
     /* grigio sfondo modale */
 }

 #widgetScreenMockup.desktop-mode {
     width: 100%;
     max-width: 100%;
 }

 #widgetScreenMockup.mobile-mode {
     width: 375px;
     /* larghezza media iPhone */
     height: 667px;
     /* altezza media iPhone */
     margin: 0 auto;
     border: 1px solid #aaa;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 /* Mantieni browserButtons sempre visibile, anche in modalità mobile */
 #browserButtons {
     display: flex !important;
 }

 /* Quando widgetScreenMockup è in mobile-mode, adatta anche browserButtons */
 #widgetScreenMockup.mobile-mode {
     /* Il mockup ha già width: 375px */
 }

 /* Forza browserButtons ad adattarsi quando il mockup è mobile */
 body:has(#widgetScreenMockup.mobile-mode) #browserButtons,
 #widgetScreenMockup.mobile-mode+#browserButtons {
     width: 375px !important;
     margin: 0 auto;
     display: flex !important;
 }

 .btn.active-mode {
     background-color: #0d6efd !important;
     color: white !important;
 }


 .async-hide {
     opacity: 0 !important
 }


 /* bordo tratteggiato blu sulla sezione selezionata */
 .highlight-selection {
     outline: 2px dashed #0d6efd;
     outline-offset: -2px;
 }

 /* pannello contestuale */
 .edit-panel {
     position: absolute;
     top: 15px;
     left: 15px;
     background: #ffffff;
     border: 1px solid #ced4da;
     border-radius: 8px;
     width: 220px;
     padding: 12px;
     box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
     z-index: 99999;
     /* sopra la preview */
     font-size: 14px;
 }

 .edit-panel h6 {
     font-size: 14px;
     margin-bottom: .75rem;
 }

 .edit-panel .form-control,
 .edit-panel .form-control-color {
     height: 32px;
     padding: 4px 6px;
     font-size: 13px;
 }

 .edit-panel .btn-sm {
     font-size: 12px;
     padding: 3px 8px;
 }




 /* tratteggio grigio su hover per parti editabili */
 .editable-block {
     outline: 2px dashed transparent;
     outline-offset: -2px;
 }

 .editable-block:hover {
     outline-color: #9ca3af;
     cursor: pointer;
 }