/**
 * Estilos para el chatbot - Versión profesional
 *
 * Este archivo contiene los estilos específicos para el chatbot con un enfoque profesional.
 */

/* Variables de color de ejemplo (puedes definirlas aquí o en :root global) */
:root {
    --primary-color: #546e7a;
    --primary-dark: #37474f;
}
/* AÑADE ESTO AL FINAL DE TU ARCHIVO chatbot.css */

/* Estilo para cada elemento de la lista dentro de una burbuja de chat */
.message.bot .message-bubble .chat-list-item {
    padding: 12px 0; /* Espaciado vertical */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Línea divisoria sutil */
}

/* Eliminar la línea divisoria del último elemento para un acabado limpio */
.message.bot .message-bubble .chat-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Mejorar la legibilidad de los títulos y enlaces */
.message.bot .message-bubble strong {
    color: #333; /* Un color un poco más oscuro para los títulos */
}

.message.bot .message-bubble a {
    color: #0066cc; /* Color azul estándar para enlaces */
    text-decoration: none; /* Quitar subrayado por defecto */
    font-weight: 600;
}

.message.bot .message-bubble a:hover {
    text-decoration: underline; /* Subrayar al pasar el ratón */
}
/* Contenedor del chatbot */
.chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px;
    height: 500px;
    background: white; /* Fondo blanco para el contenedor cuando está maximizado */
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 9999;
    overflow: hidden; /* Importante para los border-radius de los hijos */
    border: none;
    transform-origin: bottom right; /* Punto de origen para la transformación */
}

/* Estado minimizado - diseño profesional optimizado */
.chatbot-container.minimized {
    width: 65px !important;
    height: 65px !important;
    border-radius: 50% !important;
    background: var(--primary-color) !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    /* transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; */ /* Ya está en .chatbot-container */
    border: 2px solid white !important;
    overflow: visible !important; /* Para que se muestre la notificación */
    /* transform-origin: bottom right !important; */ /* Ya está en .chatbot-container */
    animation: subtle-pulse 3s infinite ease-in-out;
}

/* Cabecera del chatbot (cuando está minimizado) */
.chatbot-container.minimized .chat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Título de la cabecera (cuando está minimizado) - contenedor del icono */
.chatbot-container.minimized .header-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* Icono del robot (cuando está minimizado) */
.chatbot-container.minimized .robot-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 28px !important;
    line-height: 1 !important; /* Línea de altura normalizada para mejor centrado */
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    fill: currentColor !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important; /* Pequeño ajuste visual para compensar la óptica del icono */
}

/* Ocultar elementos NO deseados en estado minimizado */
.chatbot-container.minimized .header-title span.header-text,
.chatbot-container.minimized .header-title span.assistant-text,
.chatbot-container.minimized .btn-minimize,
.chatbot-container.minimized .chat-messages,
.chatbot-container.minimized .chat-input {
    display: none !important;
}

/* Estilo para el indicador de nuevo mensaje */
.chatbot-container.minimized.new-message::after {
    content: '1'; /* Puedes cambiarlo o hacerlo dinámico con JS */
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background-color: #ff3b30; /* Rojo para notificaciones */
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10000; /* Encima de todo */
    font-size: 12px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
    pointer-events: none; /* Para que no interfiera con los clicks en el botón */
}

/* Cabecera del chatbot (estado normal/maximizado) */
.chat-header {
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border-radius: 12px 12px 0 0; /* Solo esquinas superiores redondeadas */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px; /* Altura fija para la cabecera */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    flex-shrink: 0; /* Para que no se encoja si el contenido es mucho */
}

/* Título de la cabecera (estado normal/maximizado) */
.header-title {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* Espacio entre el icono y el texto */
}

/* Ícono del robot (estado normal/maximizado) */
.header-title .robot-icon {
    width: 24px;
    height: 24px;
    font-size: 24px; /* Para FontAwesome */
    color: white;
    fill: currentColor; /* Para SVGs */
}

/* Texto del título (estado normal/maximizado) */
.header-title span.header-text { /* Ser más específico para el texto del header */
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: white;
}
.header-title span.assistant-text { /* Texto "Asistente Digital" se oculta por defecto */
    display: none;
}


/* Botón de minimizar (estado normal/maximizado) */
.btn-minimize {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.2s;
    z-index: 10; /* Asegurar que esté por encima si hay otros elementos */
}

.btn-minimize:hover {
    opacity: 1;
}
.btn-minimize i {
    font-size: 18px; /* Tamaño del icono de minimizar */
}

/* Animación de pulso mejorada para la notificación */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
    50% { transform: scale(1.1); box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
    100% { transform: scale(1); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
}

/* Animación sutil de pulso para el botón minimizado */
@keyframes subtle-pulse {
    0% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
    50% { transform: scale(1.05); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); }
    100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
}

/* Efecto hover en el botón minimizado */
.chatbot-container.minimized:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
    transform: translateY(-3px) !important; /* Ligero levantamiento */
    background: var(--primary-dark) !important;
    animation-play-state: paused; /* Pausar la animación al hacer hover */
}

/* Área de mensajes */
.chat-messages {
    flex: 1; /* Ocupa el espacio restante */
    overflow-y: auto; /* Scroll si los mensajes exceden el alto */
    padding: 1rem;
    background: #f5f7fa; /* Un fondo claro para los mensajes */
    border-left: 1px solid rgba(0,0,0,0.08); /* Bordes sutiles */
    border-right: 1px solid rgba(0,0,0,0.08);
}

/* Estilos de los mensajes */
.message {
    padding: 0.75rem 1rem;
    border-radius: 18px; /* Bordes redondeados para las burbujas */
    margin-bottom: 0.9rem;
    max-width: 85%; /* Para que no ocupen todo el ancho */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    word-wrap: break-word; /* Para palabras largas */
    overflow-wrap: break-word; /* Equivalente */
    line-height: 1.4;
}

.message-bubble { /* Contenedor interno para el texto del mensaje */
    display: inline-block; /* O block, según se necesite */
    width: 100%; /* Para que el texto se ajuste bien dentro del .message */
}

/* Mensaje del bot */
.message.bot {
    background: white; /* Fondo blanco para mensajes del bot */
    border-bottom-left-radius: 4px; /* Una esquina menos redondeada */
    margin-right: auto; /* Alineado a la izquierda */
    color: #444; /* Color de texto para el bot */
}

/* Mensaje del usuario */
.message.user {
    background: var(--primary-color); /* Color primario para mensajes del usuario */
    color: white;
    margin-left: auto; /* Alineado a la derecha */
    border-bottom-right-radius: 4px; /* Una esquina menos redondeada */
}

/* Área de entrada de texto */
.chat-input {
    padding: 15px;
    background: white; /* Fondo blanco para el área de input */
    border-radius: 0 0 12px 12px; /* Solo esquinas inferiores redondeadas */
    border-top: 1px solid #eaedf2; /* Separador superior */
    border-left: 1px solid rgba(0,0,0,0.08);
    border-right: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08); /* Borde inferior sutil */
    display: flex;
    gap: 10px; /* Espacio entre input y botón */
    flex-shrink: 0; /* Para que no se encoja */
}

/* Campo de entrada de texto */
.chat-input input {
    flex: 1; /* Ocupa el espacio disponible */
    padding: 12px 15px;
    border: 1px solid #e0e6ed;
    border-radius: 24px; /* Input redondeado */
    outline: none;
    font-size: 14px;
    background: #f5f7fa; /* Fondo ligero para el input */
    transition: all 0.2s ease;
}

.chat-input input:focus {
    border-color: #3a7bd5; /* Un color de acento al enfocar */
    background: white;
    box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.1); /* Sombra sutil al enfocar */
}

/* Botón de enviar */
.chat-input button {
    width: 42px;
    height: 42px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%; /* Botón circular */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.chat-input button:hover {
    transform: translateY(-2px); /* Efecto de levantamiento al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.chat-input button i {
    font-size: 1.2rem; /* Tamaño del icono de enviar */
}

/* Scrollbar personalizado (para WebKit como Chrome, Safari, Edge) */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f5f7fa; /* Fondo del track igual al de los mensajes */
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #cfd8e3; /* Color del thumb */
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #b0beca; /* Color del thumb al pasar el mouse */
}

/* Efecto de escritura (typing) */
.message.typing {
    background: transparent !important; /* Sin fondo de burbuja */
    box-shadow: none !important; /* Sin sombra de burbuja */
    padding: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 4px; /* Espacio entre los puntos */
}

.message.typing span {
    display: block;
    width: 8px;
    height: 8px;
    background: #aab7c4; /* Color de los puntos */
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
    margin: 0 1px; /* Pequeño margen si es necesario */
}

/* Retardos para escalonar el rebote de los puntos */
.message.typing span:nth-child(1) { animation-delay: 0s; }
.message.typing span:nth-child(2) { animation-delay: 0.2s; }
.message.typing span:nth-child(3) { animation-delay: 0.4s; }

/* Animación de "rebote" para los puntos de escritura */
@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); } /* Sube */
}

/* Soporte para enlaces en mensajes */
.message a {
    color: inherit; /* Hereda el color del mensaje por defecto */
    text-decoration: underline;
    font-weight: 500; /* Ligeramente más grueso */
}

.message.bot a {
    color: #3a7bd5; /* Color de enlace específico para el bot */
}

.message.user a {
    color: white; /* Color de enlace para el usuario (ya que el fondo es oscuro) */
    text-decoration-color: rgba(255, 255, 255, 0.7); /* Subrayado más sutil */
}


/* Responsive para dispositivos móviles */
@media (max-width: 576px) {
    .chatbot-container:not(.minimized) {
        width: calc(100% - 30px); /* Más ancho, con pequeños márgenes */
        height: calc(100% - 80px); /* Más alto, dejando espacio arriba y abajo */
        max-height: 500px; /* Pero no más alto que el original */
        bottom: 15px;
        right: 15px;
        left: auto; /* Asegurar que se mantenga a la derecha */
        /* transform-origin: bottom right; Ya está definido */
    }
    
    .chatbot-container.minimized {
        width: 54px !important; /* Botón minimizado un poco más pequeño */
        height: 54px !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
    }
    
    .chatbot-container.minimized .robot-icon {
        width: 30px !important; /* Icono un poco más pequeño */
        height: 30px !important;
        font-size: 26px !important;
        line-height: 1 !important;
        transform: translateY(-0.5px) !important; /* Ajuste más sutil en móvil */
    }
    
    .chatbot-container.minimized.new-message::after {
        top: -6px;
        right: -6px;
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .chat-header {
        height: 55px; /* Cabecera un poco más pequeña */
    }
    .header-title span.header-text {
        font-size: 15px; /* Texto del título un poco más pequeño */
    }
    .chat-input {
        padding: 10px; /* Padding del input un poco más pequeño */
    }
    .chat-input input {
        padding: 10px 12px;
        font-size: 13px;
    }
    .chat-input button {
        width: 38px;
        height: 38px;
    }
    .chat-input button i {
        font-size: 1rem;
    }
}

/* Estilos mejorados para enlaces en el chatbot */
.message.bot .message-bubble a,
.message.bot .message-bubble a.chat-link {
    color: #4299E1 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #4299E1;
    padding-bottom: 2px;
    transition: all 0.2s ease;
    display: inline;
}

.message.bot .message-bubble a:hover,
.message.bot .message-bubble a.chat-link:hover {
    color: #2B6CB0 !important;
    border-bottom-color: #2B6CB0;
    background-color: rgba(66, 153, 225, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Estilos para íconos en mensajes del bot */
.message.bot .message-bubble i.fas,
.message.bot .message-bubble i.far {
    margin-right: 6px;
    font-size: 0.95em;
}

/* Mejorar espaciado de párrafos en mensajes del bot */
.message.bot .message-bubble br + br {
    display: block;
    content: "";
    margin-top: 8px;
}

/* Estilo para strong (negritas) en mensajes del bot */
.message.bot .message-bubble strong {
    color: #2D3748;
    font-weight: 600;
}

/* Separador visual entre comercios recomendados */
.message.bot .message-bubble hr {
    border: none;
    border-top: 1px solid #E2E8F0;
    margin: 12px 0;
}

/* Estilo para listas en mensajes del bot */
.message.bot .message-bubble ul,
.message.bot .message-bubble ol {
    margin: 8px 0;
    padding-left: 20px;
}

.message.bot .message-bubble li {
    margin-bottom: 6px;
    line-height: 1.5;
}