.n8n-chat-wrapper { 
    position: fixed; 
    bottom: 30px; 
    z-index: 999999; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}
.n8n-chat-toggle { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    border: none; 
    cursor: pointer; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.2s ease; 
    z-index: 10; 
}
.n8n-chat-toggle:hover { 
    transform: scale(1.1); 
}
.n8n-chat-panel { 
    position: absolute; 
    bottom: 80px; 
    right: 0; 
    width: 380px; 
    height: 530px; 
    border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    border: 1px solid rgba(0,0,0,0.1); 
}
.n8n-chat-header { 
    background: var(--primary-color, #075E54); 
    padding: 15px; 
    color: #ffffff; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.n8n-chat-header-info { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.n8n-chat-avatar { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    overflow: hidden; 
}
.n8n-chat-title-text { 
    margin: 0; 
    font-size: 15px; 
    font-weight: 600; 
    color: #ffffff; 
}
.n8n-chat-status-indicator { 
    font-size: 11px; 
    opacity: 0.9; 
    display: block; 
}
.n8n-btn-clear { 
    background: none; 
	border: none; 
	cursor: pointer; 
	opacity: 0.7; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	transition: opacity 0.2s ease; 
}
.n8n-btn-clear:hover { 
    opacity: 1; 
}
.n8n-chat-messages { 
    flex: 1; 
    padding: 15px; 
    overflow-y: auto; 
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); 
    background-repeat: repeat; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}
.n8n-msg { 
    display: flex; 
    flex-direction: column; 
    max-width: 80%; 
}
.n8n-msg-bot { 
    align-self: flex-start; 
}
.n8n-msg-user { 
    align-self: flex-end; 
}
.n8n-bubble { 
    padding: 8px 12px; 
    border-radius: 8px; 
    font-size: 14px; 
    line-height: 1.4; 
    word-wrap: break-word; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.15); 
}
.n8n-msg-bot .n8n-bubble { 
    border-top-left-radius: 0; 
}
.n8n-msg-user .n8n-bubble { 
    border-top-right-radius: 0; 
}
.n8n-quick-replies-panel { 
    display: flex; 
    gap: 8px; 
    padding: 10px 15px; 
    overflow-x: auto; 
    background: rgba(255, 255, 255, 0.9); 
    border-top: 1px solid #ddd; 
}
.n8n-quick-reply-btn { 
    flex-shrink: 0; 
    background: #ffffff; 
    border: 1px solid var(--primary-color, #075E54); 
    color: var(--primary-color, #075E54); 
    padding: 6px 12px; 
    border-radius: 16px; 
    font-size: 12px; 
    cursor: pointer; 
    font-weight: 500; 
}
.n8n-quick-reply-btn:hover { 
    background: var(--primary-color, #075E54); 
    color: #ffffff; 
}
.n8n-chat-input-area { 
    display: flex; 
    align-items: center; 
    border-top: 1px solid #ddd; 
    background: #f0f0f0; 
    padding: 8px 12px; 
    gap: 8px; 
}
.n8n-chat-input-field { 
    flex: 1; 
    border: none; 
    outline: none; 
    font-size: 14px; 
    padding: 8px 12px; 
    border-radius: 20px; 
    background: #ffffff; 
}
.n8n-control-buttons { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.n8n-speech-input-btn { 
    border: none; 
    background: none; 
    font-size: 18px; 
    cursor: pointer; 
    color: #51585c; 
}
.n8n-chat-send-btn { 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    color: #fff; 
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-size: 16px; 
}
.n8n-lead-overlay { 
    position: absolute; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(255, 255, 255, 0.95); 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
}
.n8n-lead-card { 
    width: 100%; 
    background: #fff; 
    border-radius: 8px; 
    padding: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}
.n8n-lead-form input { 
    width: 100%; 
    padding: 10px; 
    margin-bottom: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
}
.n8n-lead-btn { 
    width: 100%; 
    padding: 10px; 
    color: #fff; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
}
.n8n-typing-indicator { 
    padding: 8px 15px; 
    background: rgba(255,255,255,0.8); 
    display: flex; 
    gap: 4px; 
    border-radius: 10px; 
    max-width: 60px; 
    margin-left: 15px; 
    margin-bottom: 10px; 
}
.n8n-typing-indicator span { 
    width: 6px; 
    height: 6px; 
    background: #929fa6; 
    border-radius: 50%; 
    animation: bounce 1.3s infinite; 
}
.n8n-typing-indicator span:nth-child(2) { 
    animation-delay: 0.15s; 
}
.n8n-typing-indicator span:nth-child(3) { 
    animation-delay: 0.3s; 
}
@keyframes bounce { 
    0%, 60%, 100% { transform: translateY(0); } 
    30% { transform: translateY(-4px); } 
}
.n8n-handoff-panel { 
    background: #fff3cd; 
    padding: 10px 15px; 
    text-align: center; 
    border-top: 1px solid #ffeeba; 
    font-size: 13px; 
}
.n8n-handoff-buttons { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 5px; 
}
.n8n-handoff-link { 
    background: #128C7E; 
    color: #fff; 
    text-decoration: none; 
    padding: 4px 10px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-weight: bold; 
}
@media (max-width: 480px) { 
    .n8n-chat-panel { width: 320px; height: 460px; right: -10px; } 
}