/*





* Estilos para el N8N Chatbot Widget





*/





:root {


    --n8n-chat-secondary: #f4f4f4;


    --n8n-chat-bg: #ffffff;


    --n8n-chat-text: #333333;


    --n8n-chat-bot-bg: #e9ecef;


    --n8n-chat-user-text: #ffffff;





}











#n8n-chat-widget {





    position: fixed;





    bottom: 20px;





    right: 20px;





    z-index: 995; /* Alto z-index para estar sobre otros elementos */





    font-family: Arial, sans-serif;





}











/* Botón flotante */





#n8n-chat-button {





    background-color: var(--primary-color);





    color: white;





    width: 60px;





    height: 60px;





    border-radius: 50%;





    display: flex;





    align-items: center;





    justify-content: center;





    cursor: pointer;





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





    transition: transform 0.2s ease, box-shadow 0.2s ease;





}











#n8n-chat-button:hover {





    transform: scale(1.1);





    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);





}











/* Ventana de chat */





#n8n-chat-window {





    width: 360px;





    max-width: 90vw;





    height: 520px;





    max-height: 75vh;





    background-color: var(--n8n-chat-bg);





    border-radius: 12px;





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





    display: flex;





    flex-direction: column;





    overflow: hidden;





    position: absolute;





    bottom: 80px; /* Encima del botón */





    right: 0;





    transform-origin: bottom right;





    transition: opacity 0.3s ease, transform 0.3s ease-out;





}











/* Cabecera */





#n8n-chat-header {





    background-color: var(--primary-color);





    padding: 15px 20px;





    font-weight: bold;





    font-size: 1.1em;





    color: #FFF;





    display: flex;





    justify-content: space-between;





    align-items: center;





    border-bottom: 1px solid #ddd;





}











#n8n-chat-close {





    font-size: 26px;





    font-weight: 300;





    color: #888;





    cursor: pointer;





    transition: color 0.2s;





}











#n8n-chat-close:hover {





    color: #000;





}











/* Área de mensajes */





#n8n-chat-messages {





    flex-grow: 1;





    padding: 20px;





    overflow-y: auto;





    display: flex;





    flex-direction: column;





    gap: 12px;





    background-color: var(--n8n-chat-bg);





    scrollbar-width: thin;





    scrollbar-color: #ccc #f0f0f0;





}











.n8n-chat-message {





    padding: 10px 16px;





    border-radius: 18px;





    max-width: 85%;





    line-height: 1.45;





    word-wrap: break-word;





    font-size: 0.95em;





}











/* Mensaje del Bot */





.n8n-bot {





    background-color: var(--n8n-chat-bot-bg);





    color: var(--n8n-chat-text);





    border-bottom-left-radius: 4px;





    align-self: flex-start;





}











/* Mensaje del Usuario */





.n8n-user {





    background-color: var(--primary-color);





    color: var(--n8n-chat-user-text);





    border-bottom-right-radius: 4px;





    align-self: flex-end;





}











/* Área de input */





#n8n-chat-input-area {





    display: flex;





    border-top: 1px solid #ddd;





    padding: 12px;





    background-color: var(--n8n-chat-secondary);





}











#n8n-chat-input {





    flex-grow: 1;





    border: 1px solid #ccc;





    border-radius: 20px;





    padding: 10px 15px;





    font-size: 14px;





    outline: none;





    transition: border-color 0.2s;





    margin-right: 8px;





}











#n8n-chat-input:focus {


    border-color: var(--primary-color);


}











#n8n-chat-send {


    background-color: var(--primary-color);





    border: none;





    color: white;





    cursor: pointer;





    border-radius: 50%;





    width: 40px;





    height: 40px;





    display: flex;





    align-items: center;





    justify-content: center;





    transition: background-color 0.2s;





    flex-shrink: 0;





}











#n8n-chat-send:hover {





    background-color: #0056b3;





}











#n8n-chat-send:disabled {





    background-color: #aaa;





    cursor: not-allowed;





}











/* Indicador "Typing..." */





#n8n-typing-indicator {





    padding: 14px 18px; /* Un poco más grande para los puntos */





}





.n8n-dot-flashing {





    position: relative;





    width: 8px;





    height: 8px;





    border-radius: 50%;





    background-color: #FFF;





    color: #FFF;





    animation: dotFlashing 1s infinite linear alternate;





    animation-delay: 0.5s;





}











.n8n-dot-flashing::before,





.n8n-dot-flashing::after {





    content: '';





    display: inline-block;





    position: absolute;





    top: 0;





    width: 8px;





    height: 8px;





    border-radius: 50%;





    background-color: #FFF;





    color: #FFF;


}











.n8n-dot-flashing::before {





    left: -12px;





    animation: dotFlashing 1s infinite alternate;





    animation-delay: 0s;





}











.n8n-dot-flashing::after {





    left: 12px;





    animation: dotFlashing 1s infinite alternate;





    animation-delay: 1s;





}











@keyframes dotFlashing {





    0% { background-color: #FFF; }





    50%, 100% { background-color: #ccc; }





}











/* Clases de utilidad */





.n8n-hidden {





    opacity: 0;





    transform: scale(0.8) translateY(20px);





    pointer-events: none;





}