.chat-container {
     position: fixed;
     right: 10px;
     bottom: 110px;
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
     z-index: 1000;
     gap: 6px;
     animation: slideFadeIn 0.6s ease forwards;
 }

 @keyframes slideFadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .bpFab-teaser {
     background: #ffffff;
     color: #000;
     padding: 8px 14px;
     border-radius: 18px;
     font-family: 'Segoe UI', Tahoma, sans-serif;
     font-size: 12px;
     display: flex;
     align-items: center;
     text-align: center;
     max-width: 160px;
     cursor: pointer;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
     transition: transform 0.2s ease, box-shadow 0.3s ease;
 }

 .bpFab-teaser:hover {
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
 }

 .close-bubble {
     width: 24px;
     height: 24px;
     background: #ffffff;
     border-radius: 50%;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: bold;
     font-size: 14px;
     color: #999;
     cursor: pointer;
     transition: background 0.2s ease, transform 0.2s ease;
 }

 .close-bubble:hover {
     background: #f0f0f0;
     transform: scale(1.05);
 }

 /* Ocultar la burbuja de Botpress */
 .bpFab {
     display: none !important;
     /* width: 65px !important;  
        height: 65px !important;
        border-radius: 50% !important;
        background-size: cover !important;
        background-color: transparent !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        border: none !important;
        right: 20px !important;
        bottom: 20px !important;
        transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
        animation: pulse 1.0s infinite;*/
 }

 /* Simulación de burbuja personalizada con ícono */
 .custom-bubble {
     position: fixed;
     right: 10px;
     bottom: 20px;
     width: 65px;
     height: 65px;
     background-image: url('https://files.bpcontent.cloud/2024/10/22/16/20241022163241-ZUFSCESN.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-color: transparent;
     border: none;
     border-radius: 50%;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     animation: pulse 1.0s infinite;
     cursor: pointer;
     z-index: 999;
 }

 .custom-bubble:hover {
     animation: bounce 0.5s ease-in-out;
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
     transform: translateY(-5px);
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 @media (max-width: 768px) {
     .chat-container {
         right: 15px;
         bottom: 100px;
         gap: 5px;
     }

     .bpFab {
         width: 50px !important;
         height: 50px !important;
     }

     .bpFab-teaser {
         padding: 6px 12px;
         font-size: 12px;
     }

     .close-bubble {
         width: 20px;
         height: 20px;
         font-size: 12px;
     }

     .custom-bubble {
         width: 55px;
         height: 55px;
         right: 15px;
         bottom: 15px;
     }
 }

 @media (max-width: 480px) {
     .chat-container {
         right: 10px;
         bottom: 95px;
     }

     .bpFab-teaser {
         font-size: 11.5px;
         max-width: 200px;
     }

     .custom-bubble {
         width: 50px;
         height: 50px;
         right: 10px;
         bottom: 10px;
     }
 }