/* 
         * ESTILOS DEL WIDGET (CSS)
         * Colores directos para evitar conflictos.
         */

        /* Reset básico para el componente */
        .ai-widget-wrapper * {
            box-sizing: border-box;
        }

        /* BOTÓN FLOTANTE (GLOBO) */
        .ai-widget-launcher {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: #ffffff;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 99999;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 3px solid #D4AF37;
            /* Primary */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .ai-widget-launcher:hover {
            transform: scale(1.1);
        }

        .ai-widget-launcher img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* VENTANA DEL CHAT */
        .ai-chat-window {
            position: fixed;
            bottom: 100px;
            /* Space above launcher */
            right: 20px;
            width: 380px;
            height: 600px;
            max-height: 80vh;
            background-color: #ffffff;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            z-index: 99998;
            border: 1px solid #e0e0e0;

            /* Animación de entrada/salida */
            opacity: 0;
            transform: translateY(20px) scale(0.95);
            pointer-events: none;
            /* No clickable when hidden */
            transition: all 0.3s ease-in-out;
            transform-origin: bottom right;
        }

        .ai-chat-window.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: all;
        }

        /* HEADER */
        .ai-chat-header {
            background: #fff;
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
            border-radius: 20px 20px 0 0;
        }

        .ai-chat-header h3 {
            color: #D4AF37;
            /* Primary */
            font-family: 'Droid Serif', serif;
            margin: 0;
            font-size: 1.2rem;
        }

        .ai-chat-header p {
            font-size: 0.8rem;
            color: #556B2F;
            /* Accent */
            margin: 3px 0 0 0;
        }

        .ai-close-mobile {
            display: none;
            /* Only show on mobile */
        }

        /* CHAT BOX (MESSAGES) */
        .ai-chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
            gap: 15px;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.95rem;
        }

        /* MENSAJES */
        .ai-message {
            max-width: 85%;
            padding: 12px 16px;
            border-radius: 15px;
            line-height: 1.5;
            word-wrap: break-word;
            animation: fadeIn 0.3s;
        }

        .ai-message.user {
            align-self: flex-end;
            background-color: #556B2F;
            /* Accent */
            color: #fff;
            border-bottom-right-radius: 2px;
        }

        .ai-message.bot {
            align-self: flex-start;
            background-color: #fff;
            color: #333;
            border: 1px solid #eee;
            border-bottom-left-radius: 2px;
        }

        /* ESTILOS INTERNOS DEL MENSAJE BOT */
        .ai-message.bot img {
            max-width: 120px;
            border-radius: 8px;
            margin-top: 8px;
            display: block;
        }

        .ai-message.bot a {
            color: #556B2F;
            /* Accent */
            font-weight: bold;
            text-decoration: none;
            border-bottom: 2px solid rgba(85, 107, 47, 0.3);
        }

        .ai-message.bot p {
            margin: 5px 0;
        }

        /* INPUT AREA */
        .ai-input-area {
            padding: 15px;
            background: #fff;
            border-top: 1px solid #eee;
            display: flex;
            gap: 8px;
            align-items: center;
            border-radius: 0 0 20px 20px;
        }

        .ai-input-area input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
            font-family: 'Open Sans', sans-serif;
        }

        .ai-input-area button {
            background-color: #D4AF37;
            /* Primary */
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.2s;
        }

        .ai-input-area button:hover {
            background-color: #bfa13f;
        }

        /* LOADING INDICATOR */
        .ai-typing {
            display: none;
            padding: 10px;
            background: #fff;
            border-radius: 12px;
            align-self: flex-start;
            margin-left: 15px;
            margin-bottom: 10px;
            border: 1px solid #eee;
        }

        .ai-dot {
            height: 6px;
            width: 6px;
            background: #ccc;
            border-radius: 50%;
            display: inline-block;
            margin: 0 2px;
            animation: bounce 1.4s infinite;
        }

        @keyframes bounce {

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

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

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

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

        /* RESPONSIVE MOBILE */
        @media (max-width: 600px) {
            .ai-widget-launcher {
                bottom: 110px;
                /* Raise above contact button */
            }

            .ai-chat-window {
                width: 100vw;
                height: 100dvh;
                /* Pantalla completa real */
                max-height: 100dvh;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 0;
                transform-origin: bottom right;
            }

            .ai-chat-header {
                border-radius: 0;
                padding-top: 20px;
                /* Safe area */
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 20px;
                padding-right: 20px;
            }

            .ai-input-area {
                border-radius: 0;
                padding-bottom: 25px;
                /* Safe area bottom */
            }

            .ai-close-mobile {
                display: block;
                background: none;
                border: none;
                font-size: 1.5rem;
                color: #666;
                cursor: pointer;
            }

            /* Ocultar launcher cuando está abierto en móvil */
            body.chat-open .ai-widget-launcher {
                display: none;
            }
        }