/** * KPro Chatbot Frontend CSS v7 * Extends v6 (window/header/close/toggle) with messages, input, * and product card styles needed by the real widget. */ /* =============================== BASE ================================ */ #kpro-chatbot, #kpro-chatbot * { box-sizing:border-box; } #kpro-chatbot { position:fixed !important; right:24px !important; bottom:24px !important; z-index:2147483647 !important; font-family:Arial,Helvetica,sans-serif; } /* =============================== CHAT BUTTON ================================ */ #kpro-chatbot #kpro-chat-toggle { width:62px !important; height:62px !important; border-radius:50% !important; border:none !important; background:var(--kpro-accent, #C1F377) !important; color:#111 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; cursor:pointer !important; box-shadow: 0 5px 20px rgba(0,0,0,.25); font-size:28px !important; line-height:1 !important; } #kpro-chatbot .kpro-chat-icon { display:flex !important; align-items:center !important; justify-content:center !important; pointer-events:none !important; } #kpro-chatbot .kpro-chat-icon img { width:28px !important; height:28px !important; } /* hide bubble while open */ #kpro-chatbot.chat-open #kpro-chat-toggle { display:none !important; } /* =============================== CHAT WINDOW ================================ */ #kpro-chatbot #kpro-chat-window { position:fixed !important; right:24px !important; bottom:100px !important; width:390px !important; height:600px !important; background:#fff !important; display:none !important; flex-direction:column !important; overflow:hidden !important; border-radius:18px !important; box-shadow: 0 15px 45px rgba(0,0,0,.30); z-index:2147483646 !important; } #kpro-chatbot #kpro-chat-window.kpro-open { display:flex !important; } /* =============================== HEADER ================================ */ #kpro-chatbot #kpro-chat-header { width:100% !important; height:64px !important; flex:0 0 auto !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; padding:0 15px 0 20px !important; background:var(--kpro-accent, #C1F377) !important; } #kpro-chatbot #kpro-chat-title { display:block !important; font-weight:700 !important; font-size:15px !important; color:#111 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* =============================== CLOSE BUTTON ================================ */ #kpro-chatbot #kpro-chat-close { display:flex !important; align-items:center !important; justify-content:center !important; width:42px !important; height:42px !important; border:none !important; background:transparent !important; cursor:pointer !important; font-size:28px !important; line-height:1 !important; padding:0 !important; margin:0 !important; color:#111 !important; } /* =============================== MESSAGES ================================ */ #kpro-chatbot #kpro-chat-messages { flex:1 1 auto !important; overflow-y:auto !important; padding:16px !important; display:flex !important; flex-direction:column !important; gap:10px !important; background:#f7f7f7 !important; } #kpro-chatbot .kpro-message { max-width:80% !important; padding:10px 14px !important; border-radius:14px !important; font-size:14px !important; line-height:1.4 !important; word-wrap:break-word !important; white-space:pre-wrap !important; } #kpro-chatbot .kpro-message.kpro-user { align-self:flex-end !important; background:var(--kpro-accent, #C1F377) !important; color:#111 !important; border-bottom-right-radius:4px !important; } #kpro-chatbot .kpro-message.kpro-bot { align-self:flex-start !important; background:#fff !important; color:#111 !important; border:1px solid #eee !important; border-bottom-left-radius:4px !important; } #kpro-chatbot .kpro-message.kpro-typing { color:#999 !important; font-style:italic !important; } /* =============================== PRODUCT CARDS ================================ */ #kpro-chatbot .kpro-product-cards { display:flex !important; flex-direction:column !important; gap:10px !important; } #kpro-chatbot .kpro-product-card { display:flex !important; align-items:center !important; gap:12px !important; padding:10px !important; border:1px solid #eee !important; border-radius:12px !important; background:#fff !important; text-decoration:none !important; color:#111 !important; } #kpro-chatbot .kpro-product-image { width:56px !important; height:56px !important; object-fit:cover !important; border-radius:8px !important; flex:0 0 auto !important; } #kpro-chatbot .kpro-product-info { display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important; } #kpro-chatbot .kpro-product-name { font-size:13px !important; font-weight:600 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #kpro-chatbot .kpro-product-price { font-size:13px !important; color:#333 !important; } #kpro-chatbot .kpro-product-stock { font-size:11px !important; color:#888 !important; } /* =============================== INPUT AREA ================================ */ #kpro-chatbot #kpro-chat-input-area { flex:0 0 auto !important; display:flex !important; flex-direction:row !important; gap:8px !important; padding:12px !important; border-top:1px solid #eee !important; background:#fff !important; } #kpro-chatbot #kpro-chat-input { flex:1 1 auto !important; border:1px solid #ddd !important; border-radius:20px !important; padding:10px 16px !important; font-size:14px !important; outline:none !important; } #kpro-chatbot #kpro-chat-send { flex:0 0 auto !important; border:none !important; border-radius:20px !important; padding:10px 18px !important; background:var(--kpro-accent, #C1F377) !important; color:#111 !important; font-weight:600 !important; font-size:13px !important; cursor:pointer !important; } /* =============================== WHATSAPP HANDOFF FOOTER ================================ */ #kpro-chatbot #kpro-chat-whatsapp-footer { flex:0 0 auto !important; display:flex !important; justify-content:center !important; padding:10px 12px 14px !important; background:#fff !important; border-top:1px solid #f2f2f2 !important; } #kpro-chatbot #kpro-chat-whatsapp-btn { display:flex !important; align-items:center !important; gap:6px !important; border:1px solid #ddd !important; background:#fff !important; color:#333 !important; font-size:12px !important; font-weight:600 !important; padding:8px 16px !important; border-radius:20px !important; cursor:pointer !important; transition:background-color .15s ease, border-color .15s ease !important; } #kpro-chatbot #kpro-chat-whatsapp-btn:hover { background:#f7f7f7 !important; border-color:#bbb !important; } #kpro-chatbot .kpro-whatsapp-icon { width:15px !important; height:15px !important; flex:0 0 auto !important; } /* =============================== MOBILE ================================ */ @media(max-width:768px){ #kpro-chatbot { right:20px !important; bottom:20px !important; } #kpro-chatbot #kpro-chat-window { top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:auto !important; height:auto !important; max-width:100vw !important; max-height:100vh !important; border-radius:0 !important; overflow:hidden !important; } #kpro-chatbot #kpro-chat-messages { min-width:0 !important; max-width:100% !important; } #kpro-chatbot #kpro-chat-input-area { min-width:0 !important; max-width:100% !important; } #kpro-chatbot #kpro-chat-input { min-width:0 !important; flex:1 1 auto !important; font-size:16px !important; } } /* =============================== RTL (Arabic) ================================ */ #kpro-chatbot.kpro-rtl { direction:rtl !important; } #kpro-chatbot.kpro-rtl #kpro-chat-input { text-align:right !important; } #kpro-chatbot.kpro-rtl #kpro-chat-messages { text-align:right !important; } #kpro-chatbot.kpro-rtl .kpro-message { text-align:right !important; }