/**
 * KPro Chatbot Frontend CSS v9
 * Restructures the panel to match the 961Souq reference's visual
 * layout: two-tier header (name/status row + greeting + disclaimer),
 * a "timeline" second section (rail + dot, ready label, second
 * headline, cards), 2-column card grid with the last card spanning
 * full width, and a redesigned input area (label, textarea, icon
 * send button, helper line). Deliberately monochrome throughout --
 * see KPro-Chatbot-Upgrade-Scope-Plan.md, Section 5 Q4.
 */

/* ===============================
   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;
}

/* ===============================
   LAUNCHER BUTTON
================================ */
#kpro-chatbot #kpro-chat-toggle {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    height:56px !important;
    padding:8px 18px 8px 8px !important;
    border:none !important;
    border-radius:999px !important;
    background:#111 !important;
    cursor:pointer !important;
    box-shadow:0 5px 20px rgba(0,0,0,.25) !important;
}
#kpro-chatbot .kpro-launcher-badge {
    flex:0 0 auto !important;
    width:36px !important;
    height:36px !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#111 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:800 !important;
    font-size:14px !important;
}
#kpro-chatbot .kpro-launcher-copy {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    line-height:1.15 !important;
}
#kpro-chatbot .kpro-launcher-copy strong {
    font-size:13px !important;
    font-weight:700 !important;
    color:#fff !important;
}
#kpro-chatbot .kpro-launcher-copy span {
    font-size:11px !important;
    color:#aaa !important;
}
#kpro-chatbot .kpro-launcher-arrow {
    flex:0 0 auto !important;
    font-size:16px !important;
    color:#fff !important;
}
#kpro-chatbot.chat-open #kpro-chat-toggle {
    display:none !important;
}

/* ===============================
   CHAT WINDOW
================================ */
#kpro-chatbot #kpro-chat-window {
    position:fixed !important;
    right:24px !important;
    bottom:24px !important;
    width:430px !important;
    height:680px !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) !important;
    z-index:2147483646 !important;
}
#kpro-chatbot #kpro-chat-window.kpro-open {
    display:flex !important;
}

/* ===============================
   HEADER (name/status row + greeting + disclaimer)
================================ */
#kpro-chatbot #kpro-chat-header {
    flex:0 0 auto !important;
    background:#111 !important;
    padding:16px 20px 0 !important;
}
#kpro-chatbot #kpro-chat-header-top {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}
#kpro-chatbot #kpro-chat-title {
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    font-weight:700 !important;
    font-size:12px !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    color:#fff !important;
    overflow:hidden !important;
    white-space:nowrap !important;
}
#kpro-chatbot #kpro-chat-status-dot {
    flex:0 0 auto !important;
    width:6px !important;
    height:6px !important;
    border-radius:50% !important;
    background:#ccc !important;
}
#kpro-chatbot #kpro-chat-status-text {
    font-size:10px !important;
    font-weight:500 !important;
    text-transform:none !important;
    letter-spacing:normal !important;
    color:#999 !important;
}
#kpro-chatbot #kpro-chat-header-actions {
    display:flex !important;
    align-items:center !important;
    gap:2px !important;
    flex:0 0 auto !important;
}
#kpro-chatbot #kpro-chat-clear {
    border:none !important;
    background:#262626 !important;
    color:#ccc !important;
    font-size:11px !important;
    font-weight:500 !important;
    cursor:pointer !important;
    padding:6px 12px !important;
    border-radius:8px !important;
}
#kpro-chatbot #kpro-chat-clear:hover {
    color:#fff !important;
    background:#333 !important;
}
#kpro-chatbot #kpro-chat-close {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:30px !important;
    height:30px !important;
    border:none !important;
    background:#262626 !important;
    border-radius:8px !important;
    cursor:pointer !important;
    font-size:20px !important;
    line-height:1 !important;
    padding:0 !important;
    margin:0 !important;
    color:#fff !important;
}
#kpro-chatbot #kpro-chat-close:hover {
    background:#333 !important;
}
#kpro-chatbot #kpro-chat-greeting {
    margin:14px 0 6px !important;
    font-size:23px !important;
    font-weight:800 !important;
    color:#fff !important;
    line-height:1.2 !important;
}
#kpro-chatbot #kpro-chat-greeting-subtitle {
    margin:0 !important;
    font-size:13px !important;
    color:#999 !important;
    line-height:1.45 !important;
}
#kpro-chatbot #kpro-chat-disclaimer {
    margin-top:16px !important;
    padding:9px 0 !important;
    border-top:1px solid #292929 !important;
    color:#888 !important;
    font-size:10px !important;
    font-weight:500 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
    text-align:right !important;
}

/* ===============================
   BODY (holds landing OR messages)
================================ */
#kpro-chatbot #kpro-chat-body {
    flex:1 1 auto !important;
    overflow-y:auto !important;
    background:#fff !important;
    display:flex !important;
    flex-direction:column !important;
}

/* ===============================
   LANDING VIEW -- timeline section
================================ */
#kpro-chatbot #kpro-chat-landing {
    display:block !important;
    padding:22px 20px 12px !important;
}
#kpro-chatbot.kpro-in-conversation #kpro-chat-landing {
    display:none !important;
}
#kpro-chatbot .kpro-timeline {
    display:flex !important;
    gap:14px !important;
}
#kpro-chatbot .kpro-timeline-rail {
    flex:0 0 auto !important;
    width:16px !important;
    position:relative !important;
    display:flex !important;
    justify-content:center !important;
}
#kpro-chatbot .kpro-timeline-rail::after {
    content:"" !important;
    position:absolute !important;
    top:16px !important;
    bottom:-22px !important;
    left:50% !important;
    width:1px !important;
    background:#eee !important;
}
#kpro-chatbot .kpro-timeline-dot {
    width:8px !important;
    height:8px !important;
    border-radius:50% !important;
    border:2px solid #111 !important;
    background:#fff !important;
    margin-top:4px !important;
}
#kpro-chatbot .kpro-timeline-content {
    flex:1 1 auto !important;
    min-width:0 !important;
}
#kpro-chatbot #kpro-chat-ready-label {
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:#999 !important;
    margin-bottom:6px !important;
}
#kpro-chatbot #kpro-chat-resolve-headline {
    margin:0 0 8px !important;
    font-size:19px !important;
    font-weight:800 !important;
    color:#111 !important;
    line-height:1.25 !important;
}
#kpro-chatbot #kpro-chat-resolve-subtitle {
    margin:0 0 14px !important;
    font-size:12.5px !important;
    color:#777 !important;
    line-height:1.45 !important;
}
#kpro-chatbot #kpro-chat-cards {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
}
#kpro-chatbot .kpro-quick-card {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    text-align:left !important;
    border:1px solid #eee !important;
    border-radius:12px !important;
    background:#f3f3f4 !important;
    padding:12px 14px !important;
    cursor:pointer !important;
    transition:border-color .15s ease, background-color .15s ease !important;
}
#kpro-chatbot .kpro-quick-card--wide {
    grid-column:1 / -1 !important;
}
#kpro-chatbot .kpro-quick-card:hover {
    border-color:#ddd !important;
    background:#ececed !important;
}
/* Loyalty program card -- deliberately monochrome (solid dark fill,
   not accent_color), so this stays business-agnostic and needs zero
   re-tuning on a future KPro deployment with a different brand color.
   Added 2026-09-12. */
#kpro-chatbot .kpro-quick-card--dark {
    background:#111 !important;
    border-color:#111 !important;
}
#kpro-chatbot .kpro-quick-card--dark:hover {
    background:#222 !important;
    border-color:#222 !important;
}
#kpro-chatbot .kpro-quick-card--dark .kpro-quick-card-title {
    color:#fff !important;
}
#kpro-chatbot .kpro-quick-card--dark .kpro-quick-card-subtitle {
    color:#aaa !important;
}
#kpro-chatbot .kpro-quick-card--dark .kpro-quick-card-arrow {
    color:#fff !important;
}
#kpro-chatbot .kpro-quick-card-text {
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    min-width:0 !important;
}
#kpro-chatbot .kpro-quick-card-title {
    font-size:12.5px !important;
    font-weight:700 !important;
    color:#111 !important;
}
#kpro-chatbot .kpro-quick-card-subtitle {
    font-size:10.5px !important;
    color:#999 !important;
}
#kpro-chatbot .kpro-quick-card-arrow {
    flex:0 0 auto !important;
    font-size:14px !important;
    color:#aaa !important;
    margin-inline-start:8px !important;
}

/* ===============================
   MESSAGES (conversation view)
================================ */
#kpro-chatbot #kpro-chat-messages {
    display:none !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:16px !important;
}
#kpro-chatbot.kpro-in-conversation #kpro-chat-messages {
    display:flex !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:#111 !important;
    color:#fff !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;
}
#kpro-chatbot .kpro-message.kpro-bot strong {
    font-weight:700 !important;
}
#kpro-chatbot .kpro-message.kpro-bot ul {
    margin:6px 0 !important;
    padding-inline-start:18px !important;
    list-style:disc !important;
}
#kpro-chatbot .kpro-message.kpro-bot li {
    margin-bottom:3px !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;
    padding:12px 16px !important;
    border-top:1px solid #262626 !important;
    background:#111 !important;
}
#kpro-chatbot #kpro-chat-input-label {
    display:block !important;
    font-size:9.5px !important;
    font-weight:700 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:#777 !important;
    margin-bottom:6px !important;
}
#kpro-chatbot #kpro-chat-input-row {
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;
    gap:8px !important;
}
#kpro-chatbot #kpro-chat-input {
    flex:1 1 auto !important;
    border:1px solid #333 !important;
    border-radius:14px !important;
    padding:10px 14px !important;
    font-size:14px !important;
    font-family:inherit !important;
    outline:none !important;
    resize:none !important;
    max-height:96px !important;
    line-height:1.4 !important;
    background:#1c1c1c !important;
    color:#f0f0f0 !important;
}
#kpro-chatbot #kpro-chat-input::placeholder {
    color:#777 !important;
}
#kpro-chatbot #kpro-chat-send {
    flex:0 0 auto !important;
    width:38px !important;
    height:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:none !important;
    border-radius:50% !important;
    background:#2a2a2a !important;
    color:#f0f0f0 !important;
    cursor:pointer !important;
}
#kpro-chatbot #kpro-chat-send:hover {
    background:#333 !important;
}
#kpro-chatbot #kpro-chat-send svg {
    width:16px !important;
    height:16px !important;
}
#kpro-chatbot #kpro-chat-input-helper {
    margin-top:7px !important;
    font-size:10px !important;
    color:#666 !important;
    text-align:center !important;
}

/* ===============================
   WHATSAPP HANDOFF FOOTER
================================ */
#kpro-chatbot #kpro-chat-whatsapp-footer {
    flex:0 0 auto !important;
    display:flex !important;
    justify-content:center !important;
    padding:0 12px 14px !important;
    background:#111 !important;
}
#kpro-chatbot #kpro-chat-whatsapp-btn {
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    border:1px solid #333 !important;
    background:#1c1c1c !important;
    color:#ddd !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:#262626 !important;
    border-color:#444 !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-body {
        min-width:0 !important;
        max-width:100% !important;
    }
    #kpro-chatbot #kpro-chat-input {
        min-width:0 !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-send svg {
    transform:scaleX(-1) !important;
}
#kpro-chatbot.kpro-rtl #kpro-chat-messages {
    text-align:right !important;
}
#kpro-chatbot.kpro-rtl .kpro-message {
    text-align:right !important;
}
#kpro-chatbot.kpro-rtl #kpro-chat-landing {
    text-align:right !important;
}
#kpro-chatbot.kpro-rtl #kpro-chat-disclaimer {
    text-align:left !important;
}