.chat-floating-icon {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 10;
     display: flex;
     align-items: center;
 }

 .chat-bubble-img {
     width: 50px;
     height: 50px;
     margin-right: 10px;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .chat-bubble-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

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

     50% {
         transform: scale(1.1);
     }

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

 .quick-quetions a {
     background-color: #383838A6;
     border-radius: 13.15px;
     font-size: 12px;
 }

 .chat-popup {
     display: none;
     position: fixed;
     bottom: 100px;
     right: 25px;
     width: 400px;
     max-height: 65vh;
     background-color: white;
     border-radius: 15px;
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     z-index: 1000;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.3s ease-out, transform 0.3s ease-out;
     pointer-events: none;
 }

 .chat-popup.show {
     display: flex;
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }


 .chat-header {
     background: linear-gradient(360deg, #F2C33C 0%, #FFC45E 104.05%);
     color: white;
     padding: 20px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .bot-info {
     display: flex;
     align-items: center;
 }

 .chat-header .avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     margin-right: 12px;
 }

 .bot-name {
     font-weight: bold;
     font-size: 1em;
 }

 .bot-status {
     font-size: 0.8em;
     display: flex;
     align-items: center;
 }

 .active-dot {
     width: 8px;
     height: 8px;
     background-color: #25D366;
     /* Verde */
     border-radius: 50%;
     margin-right: 5px;
 }

 .tooltip-icon {
     position: relative;
     cursor: pointer;
     width: 20px;
     height: 20px;
     color: white;
 }

 .tooltip-icon::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: 80%;
     left: 50%;
     transform: translateX(-50%);
     background-color: #333;
     color: #fff;
     padding: 5px 8px;
     border-radius: 4px;
     font-size: 0.75em;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease-in-out;
     z-index: 10;
 }

 .tooltip-icon::before {
     content: "";
     position: absolute;
     bottom: 115%;
     left: 50%;
     transform: translateX(-50%);
     border-width: 5px;
     border-style: solid;
     border-color: transparent transparent #333 transparent;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
     z-index: 9;
 }

 .tooltip-icon:hover::after,
 .tooltip-icon:hover::before {
     opacity: 1;
 }

 .chat-body {
     flex: 1;
     padding: 20px;
     overflow-y: auto;
     background-color: #f9f9f9;
     scrollbar-width: thin;
     scrollbar-color: #c1c1c1 transparent;
 }

 .chat-body::-webkit-scrollbar {
     width: 5px;
 }

 .chat-body::-webkit-scrollbar-track {
     background: transparent;
 }

 .chat-body::-webkit-scrollbar-thumb {
     background-color: #c1c1c1;
     border-radius: 10px;
 }

 .chat-body::-webkit-scrollbar-thumb:hover {
     background-color: #999;
 }

 .message-container {
     display: flex;
     align-items: flex-end;
     margin-bottom: 15px;
     max-width: 90%;
 }

 .message-avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     margin-right: 10px;
 }

 .message {
     padding: 12px 18px;
     border-radius: 18px;
     font-size: 0.9em;
     line-height: 1.4;
 }

 .message.bot {
     background: linear-gradient(360deg, #F2C33C 0%, #FFC45E 104.05%);
     color: white;
     border-bottom-left-radius: 5px;
 }

 .message-container.user-side {
     justify-content: flex-end;
     margin-left: auto;
 }

 .message-container .boat-side .message-avatar {
     margin-right: 0;
     margin-left: 10px;
     border-radius: 50%;
     background-color: var(--primary);
     padding: 5px;
 }

 .message-container.user-side .message-avatar {
     margin-right: 0;
     margin-left: 10px;
 }

 .message.user {
     background-color: #f1f1f1;
     color: black;
     border-bottom-right-radius: 5px;
 }

 .chat-footer {
     display: flex;
     align-items: center;
     padding: 10px 15px;
     border-top: 1px solid #e0e0e0;
 }

 .chat-footer input {
     flex-grow: 1;
     border: none;
     background-color: #f1f1f1;
     border-radius: 20px;
     padding: 12px 18px;
     font-size: 0.9em;
 }

 .chat-footer input:focus {
     outline: none;
 }

 .icon-btn {
     background: none;
     border: none;
     font-size: 1.2em;
     cursor: pointer;

     color: #555;
     padding: 8px 12px;
 }

 .send-btn {
     color: var(--primary);
 }

 @media (max-width:768px) {
     .chat-popup {
         bottom: 100px;
         right: 2%;
         width: 300px;
     }
 }