/* Reset pequeño */


.cn8n-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}


/* Modal / ventana */
.cn8n-modal {
position: fixed;
bottom: 90px;
right: 25px;
width: 360px;
max-width: calc(100% - 40px);
height: 520px;
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(2,6,23,0.25);
overflow: hidden;
display: none;
z-index: 99999;
display: flex;
flex-direction: column;
}


.cn8n-modal.left { left: 25px; right: auto; }


.cn8n-modal.open { display: flex; }


.cn8n-header {
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: center;
}
.cn8n-header .title { font-weight: 700; font-size: 15px; }
.cn8n-header .close { margin-left: auto; cursor: pointer; font-size: 18px; }


.cn8n-body {
padding: 12px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
background: #f7f7f8;
}


.cn8n-footer {
padding: 10px;
display: flex;
gap: 8px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.cn8n-input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }
.cn8n-send { padding: 10px 12px; border-radius: 8px; background: #111; color: #fff; cursor: pointer; }


/* Burbujas */
.cn8n-msg { max-width: 78%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.35; }
.cn8n-msg.user { margin-left: auto; background: #e1f5fe; }
.cn8n-msg.bot { background: #fff; border: 1px solid #eee; }


.cn8n-typing { font-style: italic; opacity: 0.85; }


/* small screens */
@media (max-width: 480px) {
.cn8n-modal { width: calc(100% - 30px); right: 15px; left: 15px; bottom: 70px; height: 60vh; }
}