/* Estilos do Chat */
 .chat-float-button {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 50%;
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
     z-index: 1001;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     animation: pulse 2s infinite;
 }

 .chat-float-button:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
 }

 .chat-float-button i {
     color: white;
     font-size: 24px;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
     }

     50% {
         box-shadow: 0 4px 20px rgba(102, 126, 234, 0.8);
     }

     100% {
         box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
     }
 }

 .chat-container {
     position: fixed;
     bottom: 10px;
     right: 20px;
     width: 350px;
     height: 400px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     display: none;
     flex-direction: column;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .chat-container.show {
     display: flex;
     animation: slideUp 0.3s ease;
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 .chat-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .chat-header h5 {
     margin: 0;
     font-weight: 600;
 }

 .chat-close {
     background: none;
     border: none;
     color: white;
     font-size: 20px;
     cursor: pointer;
     padding: 0;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: background 0.3s ease;
 }

 .chat-close:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .chat-messages {
     flex: 1;
     padding: 15px;
     overflow-y: auto;
     background: #f8f9fa;
 }

 .message {
     margin-bottom: 15px;
     display: flex;
     align-items: flex-start;
 }

 .message.user {
     justify-content: flex-end;
 }

 .message-content {
     max-width: 80%;
     padding: 10px 15px;
     border-radius: 18px;
     font-size: 14px;
     line-height: 1.4;
 }

 .message.user .message-content {
     background: #667eea;
     color: white;
     border-bottom-right-radius: 5px;
 }

 .message.bot .message-content {
     background: white;
     color: #333;
     border: 1px solid #e0e0e0;
     border-bottom-left-radius: 5px;
 }

 .message-time {
     font-size: 11px;
     color: #999;
     margin-top: 5px;
     text-align: right;
 }

 .message.bot .message-time {
     text-align: left;
 }

 .chat-input-container {
     padding: 15px;
     background: white;
     border-top: 1px solid #e0e0e0;
     display: flex;
     gap: 10px;
 }

 .chat-input {
     flex: 1;
     padding: 10px 15px;
     border: 1px solid #ddd;
     border-radius: 25px;
     outline: none;
     font-size: 14px;
 }

 .chat-send-btn {
     background: #667eea;
     color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .chat-send-btn:hover {
     background: #5a6fd8;
 }

 .typing-indicator {
     display: none;
     padding: 10px 15px;
     font-style: italic;
     color: #666;
     font-size: 12px;
 }

 .typing-dots {
     display: inline-block;
 }

 .typing-dots span {
     display: inline-block;
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background-color: #999;
     margin: 0 1px;
     animation: typing 1.4s infinite ease-in-out;
 }

 .typing-dots span:nth-child(1) {
     animation-delay: -0.32s;
 }

 .typing-dots span:nth-child(2) {
     animation-delay: -0.16s;
 }

 @keyframes typing {

     0%,
     80%,
     100% {
         transform: scale(0);
     }

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

 @media (max-width: 768px) {
     .chat-container {
         width: calc(100% - 40px);
         height: 70vh;
         bottom: 90px;
         right: 20px;
         border-radius: 15px;
         max-width: 350px;
     }

     .chat-float-button {
         bottom: 20px;
         right: 20px;
     }
 }

 /* Badge de notificação */
 .chat-notification-badge {
     position: absolute;
     top: -5px;
     right: -5px;
     background: #ff4757;
     color: white;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     display: none;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: bold;
     animation: bounce 0.6s ease infinite alternate;
 }

 @keyframes bounce {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(1.2);
     }
 }

 /* Online indicator */
 .online-status {
     width: 8px;
     height: 8px;
     background: #4CAF50;
     border-radius: 50%;
     display: inline-block;
     margin-left: 5px;
 }