body {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    color: #333;
                }

                .hero-section {
                    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://via.placeholder.com/1500x800.png?text=Imagem+de+Fundo+Impactante') no-repeat center center;
                    /* Substitua pela sua imagem de fundo */
                    background-size: cover;
                    color: #fff;
                    padding: 100px 0;
                    text-align: center;
                }

                .hero-section h1 {
                    font-size: 3.5rem;
                    font-weight: 700;
                    margin-bottom: 20px;
                }

                .hero-section p {
                    font-size: 1.25rem;
                    margin-bottom: 40px;
                }

                .feature-icon {
                    font-size: 3rem;
                    color: #007bff;
                    /* Cor primária do Bootstrap */
                    margin-bottom: 15px;
                }

                .cta-section {
                    background-color: #f8f9fa;
                    padding: 60px 0;
                    text-align: center;
                }

                .testimonial-card {
                    background-color: #fff;
                    border-radius: 10px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    padding: 30px;
                    margin-bottom: 30px;
                }

                /* Estilo do container principal do chatbot */
                .chat-widget-container {
                    position: fixed;
                    /* Fixa na tela */
                    bottom: 20px;
                    /* Distância do fundo */
                    right: 20px;
                    /* Distância da direita */
                    width: 380px;
                    /* Largura fixa do widget */
                    background-color: #fff;
                    border-radius: 12px;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                    /* Sombra mais suave */
                    overflow: hidden;
                    display: flex;
                    /* Para organizar header, body e input */
                    flex-direction: column;
                    z-index: 1000;
                    /* Garante que fique acima de outros elementos */
                    transform: scale(0);
                    /* Esconde o chat inicialmente */
                    opacity: 0;
                    transform-origin: bottom right;
                    /* Ponto de origem da transformação */
                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                    /* Animação suave */
                }

                .chat-widget-container.active {
                    transform: scale(1);
                    /* Mostra o chat */
                    opacity: 1;
                }

                .chat-header {
                    background-color: #007bff;
                    /* Azul vibrante */
                    color: #fff;
                    padding: 5px 5px;
                    font-size: 1.1em;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    border-top-left-radius: 12px;
                    border-top-right-radius: 12px;
                }

                .chat-header .icon {
                    margin-right: 10px;
                    font-size: 1.3em;
                }

                .chat-body {
                    padding: 15px 20px;
                    min-height: 250px;
                    /* Altura mínima para o corpo */
                    max-height: 400px;
                    /* Altura máxima para rolagem */
                    overflow-y: auto;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    /* Espaçamento entre as mensagens */
                    flex-grow: 1;
                    /* Permite que o corpo ocupe o espaço disponível */
                }

                .message {
                    padding: 10px 15px;
                    border-radius: 18px;
                    /* Cantos mais arredondados */
                    max-width: 85%;
                    word-wrap: break-word;
                    /* Quebra de texto */
                }

                .message.user {
                    background-color: #e0efff;
                    /* Azul claro para o usuário */
                    color: #333;
                    align-self: flex-end;
                    /* Alinha a mensagem do usuário à direita */
                    border-bottom-right-radius: 4px;
                    /* Canto inferior direito mais reto */
                }

                .message.bot {
                    background-color: #f1f1f1;
                    /* Cinza claro para o bot */
                    color: #333;
                    align-self: flex-start;
                    /* Alinha a mensagem do bot à esquerda */
                    border-bottom-left-radius: 4px;
                    /* Canto inferior esquerdo mais reto */
                }

                .chat-input {
                    padding: 15px 20px;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    /* Espaçamento entre o input e o botão */
                    border-top: 1px solid #eee;
                    background-color: #fff;
                }

                .chat-input input {
                    flex-grow: 1;
                    border: 1px solid #ddd;
                    border-radius: 25px;
                    /* Campo de input arredondado */
                    padding: 10px 15px;
                    font-size: 0.95em;
                    outline: none;
                    /* Remove borda de foco padrão */
                }

                .chat-input input:focus {
                    border-color: #007bff;
                    /* Borda azul ao focar */
                    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
                    /* Sombra suave */
                }

                .chat-input button {
                    background-color: #007bff;
                    border: none;
                    border-radius: 50%;
                    /* Botão circular */
                    width: 40px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    transition: background-color 0.2s ease;
                }

                .chat-input button:hover {
                    background-color: #0056b3;
                }

                .chat-input button i {
                    color: #fff;
                    font-size: 1.2em;
                }

                /* Estilo para o link/botão de ação dentro da mensagem do bot */
                .message.bot .action-link {
                    display: block;
                    /* Para quebrar a linha */
                    margin-top: 10px;
                    text-align: center;
                    padding: 8px 12px;
                    background-color: #007bff;
                    color: #fff;
                    border-radius: 20px;
                    /* Botão de link arredondado */
                    text-decoration: none;
                    font-size: 0.9em;
                    transition: background-color 0.2s ease;
                }

                .message.bot .action-link:hover {
                    background-color: #0056b3;
                    color: #fff;
                    /* Garante que a cor do texto não mude */
                }

                /* Botão flutuante para abrir o chat */
                .fab-chat-button {
                    position: fixed;
                    bottom: 70px;
                    right: 20px;
                    background-color: #007bff;
                    color: #fff;
                    border-radius: 50%;
                    width: 60px;
                    height: 60px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 2em;
                    cursor: pointer;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                    z-index: 1001;
                    /* Acima do widget do chat quando fechado */
                    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
                }

                .fab-chat-button.hidden {
                    opacity: 0;
                    transform: scale(0);
                }

                /* Botão de fechar o chat */
                .chat-close-button {
                    background: none;
                    border: none;
                    color: #fff;
                    font-size: 1.5em;
                    cursor: pointer;
                    margin-left: auto;
                    /* Alinha à direita */
                    padding: 0;
                    line-height: 1;
                    /* Evita espaçamento extra */
                }

                .chat-close-button:hover {
                    opacity: 0.8;
                }

                /* ----- ESTILOS PARA O BALÃO DE BOAS-VINDAS COM LOGO ----- */
                .welcome-bubble {
                    position: fixed;
                    bottom: 150px;
                    /* Acima do botão flutuante */
                    right: 20px;
                    background-color: #fff;
                    color: #333;
                    padding: 20px 5px;
                    border-radius: 25px;
                    /* Cantos bem arredondados */
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                    max-width: 320px;
                    /* Largura do balão */
                    display: flex;
                    align-items: flex-start;
                    /* Alinha a logo e o texto no topo */
                    gap: 15px;
                    /* Espaço entre a logo e o texto */
                    z-index: 999;
                    /* Abaixo do chat principal, mas acima do botão */
                    transform: scale(0);
                    /* Esconde inicialmente */
                    opacity: 0;
                    transform-origin: bottom right;
                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                }

                .welcome-bubble.active {
                    transform: scale(1);
                    opacity: 1;
                }

                .welcome-bubble .logo-container {
                    position: relative;
                    width: 50px;
                    /* Tamanho da área da logo */
                    height: 50px;
                    flex-shrink: 0;
                    /* Não encolhe a logo */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .welcome-bubble .logo-container img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    /* Garante que a imagem se ajuste sem cortar */
                }

                /* Triângulo/seta do balão */
                .welcome-bubble::after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    /* Posição da ponta do triângulo */
                    right: 20px;
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-top: 10px solid #fff;
                    /* Cor do triângulo (mesma do balão) */
                    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
                    /* Sombra para o triângulo */
                }

                .welcome-bubble .message-content {
                    flex-grow: 1;
                    font-size: 0.95em;
                    line-height: 1.4;
                }

                .welcome-bubble .close-bubble-button {
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    background: none;
                    border: none;
                    font-size: 1.1em;
                    color: #999;
                    cursor: pointer;
                    line-height: 1;
                }

                .welcome-bubble .close-bubble-button:hover {
                    color: #666;
                }

                /* ----- ESTILOS PARA O INDICADOR DE DIGITAÇÃO ----- */
                .typing-indicator {
                    display: flex;
                    /* Oculto por padrão */
                    align-self: flex-start;
                    /* Alinha como uma mensagem do bot */
                    background-color: #f1f1f1;
                    padding: 10px 15px;
                    border-radius: 18px;
                    max-width: 85px;
                    /* Largura para os 3 pontos */
                    margin-right: auto;
                    /* Alinha à esquerda */
                    margin-bottom: 10px;
                    /* Espaçamento com a próxima mensagem */
                }

                .typing-indicator span {
                    width: 8px;
                    height: 8px;
                    margin: 0 2px;
                    background-color: #999;
                    border-radius: 50%;
                    opacity: 0;
                    animation: bounce 1.4s infinite ease-in-out;
                }

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

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

                .typing-indicator span:nth-child(3) {
                    animation-delay: 0s;
                }

                @keyframes bounce {

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

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