:root {
    --chat-primary-color: #007bff;
    --chat-secondary-color: #28a745;
}
.n8n-chat-floating-btn {
    position: fixed;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: var(--chat-primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    transition: transform 0.2s ease-in-out;
}
.n8n-chat-floating-btn:hover { transform: scale(1.1); }

#n8n-chat-toggle { bottom: 25px; }
#n8n-phone-toggle {
    bottom: 95px;
    background-color: var(--chat-secondary-color);
}

#n8n-chat-window {
    position: fixed; bottom: 100px; right: 25px; width: 370px;
    max-width: 90vw; height: 550px; max-height: 80vh;
    background-color: #F9F9FB; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); display: flex;
    flex-direction: column; z-index: 9999;
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s ease-out;
    transform: scale(0.8); opacity: 0; visibility: hidden;
}
#n8n-chat-window.active { transform: scale(1); opacity: 1; visibility: visible; }
.n8n-chat-header {
    background-color: var(--chat-primary-color);
    color: white; padding: 15px 20px; flex-shrink: 0;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.n8n-chat-header h3 { 
    margin: 0; font-size: 16px; font-weight: 600; 
    color: #E9ECEF;
}
.n8n-chat-close { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0; line-height: 1; }

.n8n-chat-content { flex-grow: 1; padding: 20px; display: flex; flex-direction: column; overflow: hidden; }
#n8n-chat-area { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.n8n-message-list { flex-grow: 1; overflow-y: auto; padding: 0 10px 10px 0; }
#n8n-chat-form { flex-shrink: 0; margin-top: 15px; position: relative; }
#n8n-pre-chat-form { padding: 10px; }
#n8n-pre-chat-form input { width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 15px; }
#n8n-pre-chat-form button { width: 100%; padding: 12px; border: none; border-radius: 10px; background-color: var(--chat-primary-color); color: white; font-size: 16px; cursor: pointer; }

.n8n-message-wrapper { display: flex; flex-direction: column; margin-bottom: 10px; }
.n8n-message-wrapper.user { align-items: flex-end; }
.n8n-message-wrapper.bot { align-items: flex-start; }
.n8n-chat-message { padding: 12px 18px; border-radius: 25px; max-width: 85%; line-height: 1.5; word-wrap: break-word; font-size: 15px; white-space: pre-wrap; }
.n8n-chat-message a { color: inherit; text-decoration: underline; }
.n8n-chat-message a:hover { opacity: 0.8; }
.n8n-chat-message.user { background-color: var(--chat-primary-color); color: white; border-bottom-right-radius: 8px; }
.n8n-chat-message.bot { background-color: #FFFFFF; color: #333333; border: 1px solid #eee; border-bottom-left-radius: 8px; }

.typing-indicator { align-self: flex-start; margin-bottom: 10px; padding: 12px 15px; background-color: #f1f1f1; border-radius: 25px; border-bottom-left-radius: 8px; }
.typing-indicator span { height: 8px; width: 8px; background-color: #999; border-radius: 50%; display: inline-block; margin: 0 1px; animation: bounce 1s infinite; }
.typing-indicator span:nth-of-type(2) { animation-delay: 0.1s; }
.typing-indicator span:nth-of-type(3) { animation-delay: 0.2s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

#n8n-chat-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 12px 50px 12px 20px;
    font-size: 16px;
}
#n8n-send-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--chat-primary-color);
    cursor: pointer;
    padding: 5px;
}
.hidden { display: none !important; }

/* Style untuk Footer Branding */
.n8n-chat-footer {
    background-color: #f7f7f7;
    padding: 8px 15px;
    text-align: center;
    border-top: 1px solid #e9e9e9;
    /* Ini memastikan sudut bawah footer juga membulat */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.n8n-chat-footer a {
    font-size: 12px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.n8n-chat-footer a:hover {
    color: #333;
}