/* Chat Widget Styles for ConvertFlow AI */
#cfa-chat-widget { position: fixed; z-index: 2147483647; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.cfa-widget-bottom-right { bottom: 20px; right: 20px; }
.cfa-widget-bottom-left { bottom: 20px; left: 20px; }

#cfa-widget-button { padding: 12px 20px; border-radius: 50px; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#cfa-widget-button:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
#cfa-widget-button .dashicons { font-size: 24px; width: 24px; height: 24px; line-height: 24px; }
#cfa-widget-button .cfa-btn-text { font-weight: 700; font-size: 15px; }

/* Chat Container */
#cfa-chat-container { position: absolute; bottom: 80px; width: 350px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s; transform-origin: bottom right; }
.cfa-widget-bottom-right #cfa-chat-container { right: 0; }
.cfa-widget-bottom-left #cfa-chat-container { left: 0; transform-origin: bottom left; }

.cfa-chat-header { padding: 15px 20px; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.cfa-chat-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
#cfa-close-chat { cursor: pointer; font-size: 24px; font-weight: bold; line-height: 1; transition: opacity 0.2s; opacity: 0.8; }
#cfa-close-chat:hover { opacity: 1; }

.cfa-chat-body { padding: 20px; max-height: 420px; overflow-y: auto; background: #fafafa; }
#cfa-chat-registration p { margin: 0 0 15px; font-size: 14px; color: #666; line-height: 1.5; }
.cfa-input { 
    width: 100%; 
    margin-bottom: 12px; 
    padding: 10px 15px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    box-sizing: border-box; 
    font-size: 14px; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); 
    background: #fff;
    height: 46px;
    color: #333;
}
select.cfa-input { 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
    padding-right: 40px;
}
#cfa-reg-form button { width: 100%; padding: 14px; border: none; border-radius: 8px; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: opacity 0.2s; font-size: 15px; }
#cfa-reg-form button:hover { opacity: 0.9; }

/* Mobile Responsiveness */
@media screen and (max-width: 480px) {
    #cfa-chat-container {
        width: calc(100vw - 40px);
        max-width: none;
        bottom: 70px;
    }
}

/* Message List */
#cfa-message-list { display: flex; flex-direction: column; gap: 12px; padding: 5px 0; }
.cfa-msg { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; max-width: 85%; box-shadow: 0 1px 2px rgba(0,0,0,0.06); word-wrap: break-word; white-space: pre-wrap; }
.cfa-msg-user { align-self: flex-end; background: #2271b1; color: #fff; border-bottom-right-radius: 2px; }
.cfa-msg-assistant { align-self: flex-start; background: #fff; color: #333; border: 1px solid #eee; border-bottom-left-radius: 2px; }

/* Chat Input */
#cfa-chat-input { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; background: #fff; align-items: center; position: relative; z-index: 10; }
#cfa-chat-input input { flex-grow: 1; border: 1px solid #ddd; border-radius: 20px; padding: 10px 15px; font-size: 14px; box-shadow: none; outline: none; min-width: 0; }
#cfa-chat-input input:focus { border-color: #999; }
#cfa-chat-input button#cfa-send-btn { width: 42px; height: 42px; min-width: 42px; flex-shrink: 0; border: none; border-radius: 50%; color: #fff; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: auto; position: relative; z-index: 11; transition: opacity 0.2s, transform 0.15s; }
#cfa-chat-input button#cfa-send-btn:hover { opacity: 0.85; transform: scale(1.05); }
#cfa-chat-input button#cfa-send-btn:active { transform: scale(0.95); }
#cfa-chat-input button#cfa-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cfa-hidden { display: none !important; }
#cfa-typing-indicator { font-size: 12px; color: #999; margin: 10px 0; font-style: italic; }

/* Animations */
@keyframes cfa-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cfa-msg { animation: cfa-fade-in 0.3s ease-out forwards; }

/* ── Interactive Buttons inside Chat Bubbles ────────────────────────────── */
.cfa-msg-bubble .cfa-btn-wa,
.cfa-msg-bubble .cfa-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.25s ease;
    line-height: 1.3;
    border: none;
}
.cfa-msg-bubble .cfa-btn-wa svg,
.cfa-msg-bubble .cfa-btn-cta svg {
    flex-shrink: 0;
}

/* WhatsApp Button — Green */
.cfa-msg-bubble .cfa-btn-wa {
    background: linear-gradient(135deg, #25d366 0%, #128c46 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}
.cfa-msg-bubble .cfa-btn-wa:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);
    color: #fff !important;
    text-decoration: none;
}
.cfa-msg-bubble .cfa-btn-wa:active {
    transform: translateY(0);
}

/* Product/CTA Button — Theme Color */
.cfa-msg-bubble .cfa-btn-cta {
    background: linear-gradient(135deg, #2271b1 0%, #135e8c 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(34, 113, 177, 0.3);
}
.cfa-msg-bubble .cfa-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 113, 177, 0.45);
    color: #fff !important;
    text-decoration: none;
}
.cfa-msg-bubble .cfa-btn-cta:active {
    transform: translateY(0);
}