/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
/* --- START: DIRECTION ISOLATION --- */
/* This forces the chatbot to an LTR context, preventing it from inheriting RTL from the website theme. */
#chatbot-container, #chatbot-launcher {
    direction: ltr;
}

/* This resets the text alignment on key components inside to prevent inheritance from RTL themes */
#chatbot-header, #chatbot-footer, #chat-messages, .chatbot-info h3, #chatbot-status, #welcome-message-text {
    text-align: left;
}
/* --- END: DIRECTION ISOLATION --- */

/* أيقونة الدردشة العائمة */
#chatbot-icon {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 9998;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 3px solid #fff;
}

#chatbot-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

#chatbot-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* نافذة الدردشة */
#chatbot-container {
    position: fixed;
    bottom: 110px;
    right: 25px;
    width: 380px;
    height: 500px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background: white;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    font-family: 'Amiri', sans-serif !important;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

#chatbot-container.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#chatbot-header {
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
    color: white;
    flex-shrink: 0;
}


.chatbot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    border: 2px solid rgba(255,255,255,0.5);
}

.chatbot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chatbot-info {
    flex-grow: 1;
}

.chatbot-info h3 {
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: 500;
}

#chatbot-status {
    font-size: 13px;
    opacity: 0.9;
}

#welcome-message-text {
    /* Properties from the old rule (for font styling) */
    font-size: 14px;
    font-weight: normal;

    /* Properties from the new rule (to fix the height jump) */
    min-height: 2.8em; 
    display: flex;
    align-items: center; 
    justify-content: flex-start;
}

#chatbot-close {
    background: rgba(255,255,255,0.25);
    border: none;
    color: white;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

#chatbot-close:hover {
    background: rgba(255,255,255,0.4);
}

#chatbot-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#chat-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.message {
    width: 95%; /* <-- هذا هو التغيير المطلوب */
    margin-bottom: 12px;
    padding: 12px 15px;
    border-radius: 18px;
    line-height: 1.5;
    position: relative;
    animation: fadeIn 0.3s ease;
    font-weight: normal;
    word-wrap: break-word;
}

.message.rtl {
    direction: rtl;
    text-align: right;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ضع هاتين القاعدتين الجديدتين مكانهما */
.bot-message {
    align-self: flex-start;
    background: var(--chatbot-bot-msg-bg);
    color: var(--chatbot-bot-msg-font-color);
    font-size: var(--chatbot-bot-msg-font-size);
    font-family: var(--chatbot-bot-msg-font-family);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.user-message {
    align-self: flex-end;
    background: var(--chatbot-user-msg-bg);
    color: var(--chatbot-user-msg-font-color);
    font-size: var(--chatbot-user-msg-font-size);
    font-family: var(--chatbot-user-msg-font-family);
    border-radius: 18px 18px 4px 18px;
    
    /* --- START: NEW LINES --- */
    border: 1px solid rgba(0,0,0,0.02); /* إطار خفيف جدًا لتعزيز الظل */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* نفس الظل الموجود في ردود البوت */
    /* --- END: NEW LINES --- */
}

/* --- START: REMOVED OBSOLETE FAQ/QUICK REPLIES STYLES --- */
/* The CSS for #faq-toggle-container, #toggle-faq, #quick-replies, and #close-quick-replies has been removed. */
/* The generic .replies-container styles are kept for product choice buttons. */
/* --- END: REMOVED OBSOLETE FAQ/QUICK REPLIES STYLES --- */

.replies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.replies-container button {
    background: #f5f7ff;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    color: #4e8cff;
    border: 1px solid #e0e7ff;
    font-weight: normal;
}

.replies-container button:hover {
    background: var(--chatbot-gradient-start);
    color: var(--chatbot-text-color);
}

#chatbot-footer {
    display: flex;
    padding: 15px;
    border-top: 1px solid #eee;
    background: white;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

#chatbot-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 15px;
    transition: border 0.3s;
    font-weight: normal;
}

#chatbot-input:focus {
    border-color: #4e8cff;
    outline: none;
}

#chatbot-send, #chatbot-new-conversation {
    background: #f0f4f9;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.3s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
#chatbot-new-conversation {
    font-size: 20px;
}

#chatbot-send:hover, #chatbot-new-conversation:hover {
    background: #4e8cff;
    color: white;
    border-color: #4e8cff;
}

.language-switch {
    display: none !important;
}

.typing-indicator {
    display: inline-flex;
    align-items: center;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 2px;
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.typing-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: #333;
    margin-left: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- START: NEW STYLES FOR CONTACT METHODS --- */
#contact-toggle-container {
    padding: 10px 15px;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
}

#toggle-contact-methods {
    background: #f5f7ff;
    border: 1px solid #e0e7ff;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    color: #4e8cff;
    width: 100%;
}

#toggle-contact-methods:hover {
    background: #eef2ff;
}

#contact-methods-panel {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fdfdfd;
    display: none; /* Initially hidden */
}

.contact-methods-title {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin: 0 0 10px;
    font-weight: 500;
}

.contact-buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.chatbot-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s, transform 0.3s;
    border: none;
}

.chatbot-contact-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.chatbot-contact-icon {
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
}

.chatbot-contact-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Brand Colors */
.chatbot-contact-whatsapp { background-color: #25D366; }
.chatbot-contact-messenger { background-color: #0084FF; }
.chatbot-contact-telegram { background-color: #26A5E4; }
.chatbot-contact-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.chatbot-contact-phone { background-color: #34B7F1; }
.chatbot-contact-email { background-color: #777777; }

/* General button inside the bot for product links etc */
.chatbot-button {
    display: block;
    text-align: center;
    background: #f084e7;
    color: white !important;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 10px;
    transition: background-color 0.3s;
}
.chatbot-button:hover {
    background: var(--chatbot-gradient-end);
}
/* --- END: NEW STYLES FOR CONTACT METHODS --- */
/* --- START: MOBILE RESPONSIVE STYLES --- */
/* These styles will ONLY apply to screens 767px wide or less */

@media (max-width: 767px) {
    #chatbot-container {
        /* Make it almost full screen */
        width: auto;
        height: auto;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 95px; /* Leave space for the icon */
        
        /* Adjust positioning */
        border-radius: 15px; /* Keep the rounded corners */
        max-height: 90vh; /* Ensure it doesn't take the entire vertical space */
    }

    #chatbot-icon {
    /* Override old styles to remove the frame */
    background: transparent !important;
    border: none !important;
    
    /* Adjust size to fit non-circular avatars better */
    width: 100px; 
    height: 100px;
    
    /* Ensure the content (lottie/video) scales well */
    display: flex;
    align-items: center;
    justify-content: center;

    /* --- MODIFICATION: Generic pulsing glow animation --- */
    animation: pulse-glow 2.5s infinite;
}
}
/* --- END: MOBILE RESPONSIVE STYLES --- */
/* --- START: NEW VISUAL EFFECTS --- */

/* 1. Pulsing Glow for the floating icon */




/* 2. Sheen/Glossy Effect for the header */
#chatbot-header {
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    overflow: hidden; /* Important for sheen effect */
    /* --- MODIFICATION: Using CSS Variables for colors --- */
    background: linear-gradient(135deg, var(--chatbot-gradient-start), var(--chatbot-gradient-end));
    color: var(--chatbot-text-color);
}
#chatbot-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 70%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
    animation: sheen-effect 6s infinite;
    animation-delay: 2s;
}
@keyframes sheen-effect {
    0% { left: -150%; }
    100% { left: 150%; }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 5px 15px rgba(0,0,0,0.2), 0 0 0 0 rgba(0,0,0, 0.2); }
    50% { box-shadow: 0 5px 15px rgba(0,0,0,0.2), 0 0 0 15px rgba(0,0,0, 0); }
}

/* 3. Micro-interactions for buttons */
#chatbot-send, 
#chatbot-new-conversation, 
.replies-container button,
#toggle-contact-methods {
    transition: all 0.2s ease-in-out;
}

#chatbot-send:active, 
#chatbot-new-conversation:active, 
.replies-container button:active,
.chatbot-contact-button:active,
#toggle-contact-methods:active {
    transform: translateY(1px) scale(0.98);
    transition-duration: 0.1s;
}

/* Enhancing existing hover effects with a lift */
#chatbot-send:hover, 
#chatbot-new-conversation:hover {
    transform: translateY(-2px);
}
.replies-container button:hover,
#toggle-contact-methods:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
/* The .chatbot-contact-button already has a hover effect from the previous step */

/* --- END: NEW VISUAL EFFECTS --- */
/* --- START: Bubble Plan & Flexible Icon Styles --- */

/* 1. Main Launcher Container */
#chatbot-launcher {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* 2. Style the Teaser Bubble */
#chatbot-teaser-bubble {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 60px;
    margin-right: 90px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 14px;
    max-width: 200px;
    pointer-events: none; /* Make it unclickable */
    opacity: 0;
    animation: teaser-fade-in 0.5s forwards;
    animation-delay: 1s; /* Delay before it first appears */
    z-index: 10000;
}

@keyframes teaser-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* 3. Make the Icon Container Frameless */
#chatbot-icon {
    /* Override old styles to remove the frame */
    background: transparent !important;
    border: none !important;
    
    /* Adjust size to fit non-circular avatars better */
    width: 100px; 
    height: 100px;
    
    /* Ensure the content (lottie/video) scales well */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make sure the content inside fills the new frameless container */
#chatbot-icon > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 4. Adjust Mobile Styles for the new Launcher */
@media (max-width: 767px) {
    #chatbot-launcher {
        bottom: 15px;
        right: 15px;
    }

    #chatbot-icon {
        width: 80px;
        height: 80px;
    }
    
    #chatbot-container {
        bottom: 110px; /* Adjust chat window position to not overlap the new launcher */
    }
}

/* --- END: Bubble Plan & Flexible Icon Styles --- */

/* --- START: NEW STYLES FOR ACTION BUTTONS --- */
.bot-message .chatbot-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.chatbot-action-button {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    color: white !important; /* Use important to override theme link styles */
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.chatbot-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* --- END: NEW STYLES FOR ACTION BUTTONS --- */
/* --- START: Corrected Intro Animation Styles --- */

/* This class will be added to the launcher to trigger the animation */
#chatbot-launcher.chatbot-centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* This ensures perfect centering on all devices */
    flex-direction: column; /* Stack the icon and message vertically */
    align-items: center; /* Center them horizontally */
    gap: 15px;
    width: auto; /* Allow the container to fit its content */
}

/* Make the icon bigger when it's in the center */
#chatbot-launcher.chatbot-centered #chatbot-icon {
    width: 120px;
    height: 120px;
    position: static; /* Override the 'fixed' position to center correctly */
}

/* Add a smooth transition for all properties we are animating */
#chatbot-launcher {
    /* This cubic-bezier creates a professional "spring" effect */
    transition: all 0.9s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Styling for the new intro message */
#chatbot-intro-message {
    color: white; /* Changed text color to white for better contrast */
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    max-width: 280px;
    /* --- THE FIX: Changed background to semi-transparent black --- */
    background: rgba(0, 0, 0, 0.75);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s, transform 0.5s;
    line-height: 1.6;
}

/* A class to make the intro message visible */
#chatbot-intro-message.visible {
    opacity: 1;
    transform: translateY(0);
}
/* =============================================================== */
/* =============================================================== */
/* =============================================================== */
/* --- FINAL: ELEGANT VERTICAL PRODUCT LIST STYLES (V2) --- */
/* =============================================================== */

/* This makes the message bubble transparent when it contains a product list */
.bot-message:has(.product-list-container) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.product-list-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0; /* Removed margin to align with chat bubble edge */
}

/* ضع هاتين الكتلتين الجديدتين */
.product-item {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none; /* أزلنا الخط من هنا */
    padding: 15px 5px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative; /* خاصية ضرورية لعمل الخط الجديد */
}

/* هذا هو الكود الجديد الذي ينشئ الخط الغاطس (المجوف) */
.product-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -1px; /* يوضع في الأسفل تماماً */
    left: 0;
    right: 0;
    height: 2px;
    background: #f0f0f0; /* لون الخلفية لتعزيز التأثير */
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.15); /* هذا السطر هو الذي يعطي تأثير الحفر */
}

.product-item:last-child {
    border-bottom: none;
}

.product-item:hover {
    background-color: rgba(0, 0, 0, 0.02); /* Very subtle hover effect */
}

/* This rule handles the image position for RTL (Arabic) */
.product-item.rtl {
    flex-direction: row-reverse;
}

.product-item-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.product-item-info {
    flex-grow: 1;
    margin-left: 15px; /* Default margin for LTR */
}

/* This rule swaps the margin for RTL (Arabic) */
.product-item.rtl .product-item-info {
    margin-left: 0;
    margin-right: 15px;
}

.product-item-title {
    font-family: "Times New Roman", Times, serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    color: #333;
    margin: 0 0 5px;
    font-weight: 500;
}

.product-item-price {
    font-size: 15px;
    color: #C09578; /* Gold/Brown color from the image */
    font-weight: 600;
    margin: 0;
    font-family: sans-serif;
}
/* --- NEW STYLES FOR PRODUCT BRAND --- */

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
}

.product-item-brand {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    font-family: sans-serif;
}

/* Adjust margin on price to align correctly */
.product-item-price {
    margin: 0;
}
/* --- START: Teaser Bubble RTL Fix --- */



/* --- START: Unified Teaser Bubble RTL Fix --- */

html[dir="rtl"] #chatbot-teaser-bubble {
    /* Fixes text rendering and alignment for Arabic */
    direction: rtl;
    text-align: right;

    /* Forces the animation to run, overriding theme conflicts */
    animation: teaser-fade-in 0.5s forwards !important;
    animation-delay: 1s !important;
}
/* --- START: Order Details Container Fix --- */

/* This makes the main message bubble transparent when it holds our special container */
.bot-message:has(.order-details-container) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* This styles our new container to look like the original message bubble */
.order-details-container {
    background: var(--chatbot-bot-msg-bg);
    color: var(--chatbot-bot-msg-font-color);
    padding: 12px 15px;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.08);
}

/* This removes the extra top margin from the first paragraph inside our container */
.order-details-container p:first-child {
    margin-top: 0;
}

/* --- END: Order Details Container Fix --- */

/* --- END: Unified Fix --- */

/* --- END: Force Animation --- */