/* Container & Fonts */
#ekc-chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
    font-family: 'Cairo', system-ui, sans-serif;
    direction: rtl;
}

/* Toggle Button (Closed State) - Like "Zaki The Bot" */
#ekc-chatbot-toggle {
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    min-width: 200px;
}
#ekc-chatbot-container.ekc-closed #ekc-chatbot-toggle {
    transform: scale(1);
    opacity: 1;
}
#ekc-chatbot-container:not(.ekc-closed) #ekc-chatbot-toggle {
    display: none;
}

.ekc-toggle-content {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}
.ekc-toggle-avatar {
    font-size: 24px;
    background: #e3f2fd;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ekc-toggle-text { display: flex; flex-direction: column; }
.ekc-toggle-title { font-weight: bold; font-size: 14px; color: #18479e; }
.ekc-toggle-subtitle { font-size: 11px; color: #666; }
.ekc-toggle-close-icon { display: none; } /* Hidden in bubble mode */

/* Window (Open State) */
#ekc-chatbot-window {
    width: 360px;
    height: 600px;
    max-height: 85vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9) translateY(20px);
}
#ekc-chatbot-container:not(.ekc-closed) #ekc-chatbot-window {
    opacity: 1;
    pointer-events: all;
    transform: scale(1) translateY(0);
}

/* Views Management */
.ekc-view {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background: #f9f9f9;
}
.ekc-view.active { display: flex; }

/* --- HOME VIEW STYLE --- */
.ekc-home-header {
    background: #fff;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.ekc-home-avatar {
    width: 60px; height: 60px;
    background: #eee;
    border-radius: 50%;
    font-size: 30px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    border: 2px solid #f26522; /* Orange Border */
}
.ekc-home-header h3 {
    margin: 0;
    font-size: 18px;
    color: #18479e; /* Blue */
    line-height: 1.4;
}

.ekc-home-actions {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Send Message Card */
.ekc-action-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.ekc-action-card:hover { border-color: #f26522; }
.ekc-action-card .dashicons { font-size: 24px; color: #18479e; width: 24px; height: 24px;}
.ekc-action-text { flex: 1; }
.ekc-action-text strong { display: block; color: #18479e; font-size: 14px; }
.ekc-action-text small { color: #888; font-size: 11px; }
.ekc-arrow { color: #f26522; font-size: 12px; }

/* Search Wrapper */
.ekc-search-wrapper {
    position: relative;
    margin: 5px 0 15px;
}
.ekc-search-wrapper input {
    width: 100%;
    padding: 10px 15px 10px 35px;
    border-radius: 20px;
    box-sizing: border-box;
}
.ekc-search-wrapper .dashicons {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

/* FAQ List Items */
.ekc-faq-item {
    background: #fff;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #18479e;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
}
.ekc-faq-item:hover {
    border-color: #f26522;
    color: #f26522;
}

/* --- CHAT VIEW STYLE --- */
#ekc-chatbot-header {
    background: #18479e;
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ekc-header-left { display: flex; align-items: center; gap: 10px; }
.ekc-back-btn { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 0;}
.ekc-bot-name { font-weight: bold; font-size: 14px; }
.ekc-bot-status { font-size: 10px; opacity: 0.8; }
#ekc-chatbot-close-btn { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }

#ekc-chatbot-messages { flex: 1; padding: 15px; overflow-y: auto; background: #fff; }
.ekc-msg { margin-bottom: 10px; display: flex; }
.ekc-msg-user { justify-content: flex-end; }
.ekc-msg-bot { justify-content: flex-start; }
.ekc-msg-bubble { max-width: 80%; padding: 8px 12px; border-radius: 15px; font-size: 13px; line-height: 1.4; }
.ekc-msg-user .ekc-msg-bubble { background: #18479e; color: #fff; border-bottom-left-radius: 15px; border-bottom-right-radius: 2px; }
.ekc-msg-bot .ekc-msg-bubble { background: #f1f1f1; color: #333; border-bottom-left-radius: 2px; border-bottom-right-radius: 15px; }

/* Contact Form */
#ekc-chatbot-contact { background: #fff8e1; padding: 15px; border-top: 1px solid #ffe0b2; }
#ekc-contact-form input { width: 100%; margin-bottom: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box;}
#ekc-contact-form button { width: 100%; padding: 8px; background: #f26522; color: #fff; border: none; border-radius: 5px; cursor: pointer; }

/* Input Area */
#ekc-chatbot-input { padding: 10px; border-top: 1px solid #eee; display: flex; gap: 10px; background: #fff; }
#ekc-chatbot-text { flex: 1; padding: 8px 15px; border-radius: 20px; border: 1px solid #ddd; outline: none; }
#ekc-chatbot-send { background: #f26522; color: #fff; border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;}

/* Bottom Nav */
.ekc-bottom-nav {
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 8px 0;
}
.ekc-nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #999;
    cursor: pointer;
    font-size: 10px;
}
.ekc-nav-item .dashicons { font-size: 20px; width: 20px; height: 20px; }
.ekc-nav-item.active { color: #f26522; }

/* Responsive */
@media (max-width: 480px) {
    #ekc-chatbot-window { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    #ekc-chatbot-container { right: 0; bottom: 0; left: 0; }
}


/* تنسيق زر إغلاق نموذج التواصل */
#ekc-chatbot-contact {
    position: relative; /* ضروري عشان زر الإغلاق */
}
#ekc-contact-close {
    position: absolute;
    top: 5px;
    left: 10px; /* على اليسار لأن الموقع عربي */
    background: transparent;
    border: none;
    color: #c62828;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
#ekc-contact-close:hover {
    color: #ff0000;
}


.ekc-hidden {
    display: none !important;
}



.ekc-products-wrapper {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ekc-product-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.ekc-product-card a {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.ekc-product-image img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.ekc-product-info {
    padding: 8px 10px;
    flex: 1;
}

.ekc-product-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ekc-product-price {
    font-size: 12px;
    color: #18479e;
    margin-bottom: 4px;
}

.ekc-product-stock {
    font-size: 11px;
}

.ekc-product-stock.stock-in {
    color: #2e7d32;
}

.ekc-product-stock.stock-out {
    color: #c62828;
}

/* ===== تحسين عرض الشات على الموبايل ===== */
@media (max-width: 767px) {

    /* نتأكد إن الكونتينر ظاهر ودايمًا فوق كل حاجة */
    #ekc-chatbot-container {
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 999999;          /* أعلى من أي Bottom Bar للثيم */
        display: block !important;
    }

    /* نخلي الويندو تاخد عرض الشاشة وتبقى طالعة من تحت زي Bottom Sheet */
    #ekc-chatbot-window {
        position: fixed;          /* نفصله عن عناصر الصفحة */
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 60px);    /* لو فيه بار تحت خليه 60px تقريبًا */
        max-height: calc(100vh - 60px);
        border-radius: 18px 18px 0 0;  /* كورنر من فوق بس */
    }

    /* زرار التوجّل يفضل فوق برضه */
    #ekc-chatbot-toggle {
        position: fixed;
        right: 15px;
        bottom: 80px;  /* كان 15px – زوّدناها علشان يطلع فوق البار */
        z-index: 999999;
    }
}