:root {

            --whatsapp-green: #25D366;

            --whatsapp-light: #DCF8C6;

            --whatsapp-dark: #075E54;

            --whatsapp-blue: #34B7F1;

            --bs-primary-rgb: 217, 255, 67;

            --bs-bg-opacity:1;

        }

  



        .chat-bubble {

            display: none; /* Inicialmente escondido */

            position: fixed;

            bottom: 80px; /* Posição acima do ícone */

            right: 10px;

            background-color: #6f42c1;

            color: white;

            padding: 10px;

            border-radius: 10px;

            font-size: 14px;

            z-index: 999;

            max-width: 250px;

            text-align: center;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            opacity: 0;

            transition: opacity 0.5s ease-in-out;

            transform: translateY(10px); /* Inicialmente um pouco abaixo */

        }



        .chat-bubble.show {

            display: block;

            opacity: 1;

            transform: translateY(0); /* Animação de aparecimento */

        }



        .chat-bubble .arrow {

            position: absolute;

            bottom: -10px;

            right: 15px;

            width: 0;

            height: 0;

            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            border-top: 10px solid #6f42c1; /* Cor da seta */

        }



        .close-btn {

            position: absolute;

            top: 5px;

            right: 5px;

            background: none;

            border: none;

            color: white;

            font-size: 18px;

            cursor: pointer;

        }



        .close-btn:hover {

            color: #f5f5f5;

        }

        

        .chatbot-icon {

            position: fixed;

            bottom: 10px;

            right: 10px;

            width: 400px;

            height: 70px;

            display: flex;

            justify-content: right;

            align-items: center;

            cursor: pointer;

            z-index: 1000;

            transition: all 0.3s ease;

        }

        .chatbot-icon:hover {

            transform: translateY(-10px);  

        }

        .chatbot-icon img {

            width: 17%;

            height: auto;

        }

        .chatbot-container {

            position: fixed;

            top: 20px; /* espaço superior para botão de fechar */

            bottom: 20px;

            right: 20px;

            left: 20px;

            width: auto; /* ocupa a largura disponível */

            height: auto; /* ocupa a altura entre top e bottom */

            border-radius: 15px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

            overflow: hidden;

            display: none;

            flex-direction: column;

            z-index: 1000;

            max-width: 420px; /* limite opcional para telas grandes */

            margin: auto;

            opacity: 0;

            transition: opacity 0.5s ease; /* Adiciona o efeito de fade */

        }

        .chatbot-container.show {

            display: flex;

            opacity: 1;

        }

        @media (max-width: 768px) {
            

            .chat-bubble {

                display: none; /* Inicialmente escondido */

                position: fixed;

                bottom: 85px; /* Posição acima do ícone */

                right: 10px;

                background-color: #6f42c1;

                color: white;

                padding: 10px;

                border-radius: 10px;

                font-size: 14px;

                z-index: 999;

                max-width: 250px;

                text-align: center;

                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                opacity: 0;

                transition: opacity 0.5s ease-in-out;

                transform: translateY(10px); /* Inicialmente um pouco abaixo */

            }

            .chatbot-icon img {

                width: 20%;

                height: auto;

            }

            .chatbot-container {

                top: 0;

                bottom: 0;

                left: 10px;

                right: 10px;

                width: auto;

                height: 97%;

                border-radius: 25px;

            }

        }

        .chatbot-header {

            background-color: var(--whatsapp-dark);

            color: white;

            padding: 15px;

            display: flex;

            align-items: center;

            gap: 10px;

        }

        .chatbot-header img {

            width: 40px;

            height: 40px;

            border-radius: 50%;

        }

        .chatbot-header h3 {

            margin: 0;

            font-size: 16px;

            color: white;

        }

        .chatbot-header p {

            margin: 0;

            font-size: 12px;

            opacity: 0.8;

        }

        .chatbot-messages {

            flex: 1;

            padding: 15px;

            overflow-y: auto;

            background-color: #e5ddd5;

            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");

        }

        .message {

            max-width: 80%;

            margin-bottom: 15px;

            padding: 10px 15px;

            border-radius: 7.5px;

            position: relative;

            word-wrap: break-word;

            color: black;

        }

        .bot-message {

            background-color: white;

            align-self: flex-start;

            margin-right: auto;

            border-top-left-radius: 0;

        }

        .user-message {

            background-color: var(--whatsapp-light);

            align-self: flex-end;

            margin-left: auto;

            border-top-right-radius: 0;

        }

        .options {

            display: flex;

            flex-direction: column;

            gap: 8px;

            margin-top: 10px;

        }

        .option-btn {

            background-color: white;

            border: 1px solid var(--whatsapp-green);

            border-radius: 20px;

            padding: 8px 15px;

            font-size: 14px;

            cursor: pointer;

            transition: all 0.2s ease;

            text-align: left;

        }

        .option-btn:hover {

            background-color: #6f42c1;

            color: white;

        }

        .chatbot-input {

            display: flex;

            padding: 10px;

            background-color: white;

            border-top: 1px solid #eee;

            position: relative;

        }

        .chatbot-input input {

            flex: 1;

            padding: 10px 15px 10px 35px;

            border: 1px solid #ddd;

            border-radius: 20px;

            outline: none;

            font-size: 16px;

        }

        .chatbot-input .currency-symbol {

            position: absolute;

            left: 25px;

            top: 50%;

            transform: translateY(-50%);

            color: #555;

            pointer-events: none;

        }

        .chatbot-input button {

            background-color: #6f42c1;

            color: white;

            border: none;

            border-radius: 50%;

            width: 40px;

            height: 40px;

            margin-left: 10px;

            cursor: pointer;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .card {

            background-color: white;

            border-radius: 10px;

            padding: 15px;

            margin-bottom: 15px;

            box-shadow: 0 2px 5px rgba(0,0,0,0.1);

        }

        .card-header {

            display: flex;

            align-items: center;

            margin-bottom: 10px;

        }

        .card-icon {

            width: 30px;

            height: 30px;

            margin-right: 10px;

        }

        .card-title {

            font-weight: bold;

            margin: 0;

            font-size: 16px;

            color: black;

        }

        .card-details {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;

            font-size: 14px;

            color: black;

        }

        .card-detail {

            margin: 5px 0;

            color: black;

        }

        .card-detail strong {

            display: block;

            color: var(--whatsapp-dark);

            font-size: 12px;

        }

        .expand-btn, .whatsapp-btn {

            background-color: var(--whatsapp-green);

            color: white;

            border: none;

            border-radius: 5px;

            padding: 8px 15px;

            margin-top: 10px;

            cursor: pointer;

            font-size: 14px;

            display: inline-block;

            margin-right: 10px;

        }

        .expand-btn {

            background-color: #a9b2b6;

        }

        .hidden-details {

            display: none;

            margin-top: 15px;

            padding-top: 15px;

            border-top: 1px dashed #ddd;

        }

        .typing-indicator {

            display: flex;

            padding: 10px 15px;

            background-color: white;

            border-radius: 7.5px;

            width: fit-content;

            margin-bottom: 15px;

            border-top-left-radius: 0;

        }

        .typing-dot {

            width: 8px;

            height: 8px;

            background-color: #999;

            border-radius: 50%;

            margin: 0 2px;

            animation: typingAnimation 1.4s infinite ease-in-out;

        }

        .typing-dot:nth-child(1) {

            animation-delay: 0s;

        }

        .typing-dot:nth-child(2) {

            animation-delay: 0.2s;

        }

        .typing-dot:nth-child(3) {

            animation-delay: 0.4s;

        }

        @keyframes typingAnimation {

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

            30% { transform: translateY(-5px); }

        }