/* assets/css/hmyt-ai-chatbot.css - نسخه نهایی با رفع کامل گلیچ انیمیشن موبایل */
:root {
    --chatbot-widget-color: #9b3df8; /* این متغیر از تنظیمات PHP مقداردهی می‌شود */
    --chatbot-primary: #8a35c9;
    --chatbot-secondary: #f0f2f5;
    --chatbot-border: #e0e0e0;
    --chatbot-shadow: rgba(0, 0, 0, 0.1);
    --chatbot-user-bg: #1f2029;
    --chatbot-user-color: #d8d9e0;
    --chatbot-model-bg: #CFD8DC;
    --chatbot-model-color: #54667a;
    --chatbot-fab-bottom-spacing: 25px;
    --chatbot-fab-side-spacing: 25px;
}

/* --- کانتینر اصلی ویجت --- */
#hmyt-chatbot-widget {
    position: fixed;
    z-index: 9999;
    bottom: var(--chatbot-fab-bottom-spacing);
    right: var(--chatbot-fab-side-spacing);
}
#hmyt-chatbot-widget.hmyt-chatbot-position-bottom_left {
    right: auto;
    left: var(--chatbot-fab-side-spacing);
}

/* --- دکمه شناور (FAB) --- */
.hmyt-chatbot-fab {
    width: 60px;
    height: 60px;
    background: var(--chatbot-widget-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.hmyt-chatbot-fab:hover {
    transform: scale(1.1);
}
.hmyt-chatbot-fab.hidden {
    transform: scale(0);
    opacity: 0;
}
.hmyt-chatbot-fab svg {
    width: 32px;
    height: 32px;
}

/* --- پنجره چت (منطق جدید انیمیشن) --- */
.hmyt-chatbot-window {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 80vh;
    max-height: 700px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 30px var(--chatbot-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: bottom right;
    transition: visibility 0s 0.3s, opacity 0.3s ease, transform 0.3s ease;
}
#hmyt-chatbot-widget.hmyt-chatbot-position-bottom_left .hmyt-chatbot-window {
    right: auto;
    left: 0;
    transform-origin: bottom left;
}
.hmyt-chatbot-window.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;
}

/* --- استایل‌های تمام‌صفحه موبایل (منطق جدید و اصلاح‌شده) --- */
@media (max-width: 768px) {
    /* کانتینر والد در حالت باز، بدون انیمیشن، تمام صفحه می‌شود */
    #hmyt-chatbot-widget.open {
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%;
        transition: none; 
    }

    /* رفع گلیچ پرش آیکن به بالای صفحه هنگام باز شدن */
    #hmyt-chatbot-widget.open .hmyt-chatbot-fab {
        transition: none;
        opacity: 0;
        visibility: hidden;
    }

    /* تعریف حالت‌های پنجره چت در موبایل برای انیمیشن نرم‌تر */
    .hmyt-chatbot-window {
        /* کلید حل مشکل: موقعیت ثابت نسبت به صفحه، نه نسبت به والد */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        transform-origin: bottom center; /* انیمیشن از پایین-وسط */
        
        /* حالت بسته (پیش‌فرض): کوچک، کمی پایین‌تر و نامرئی */
        transform: scale(0.95) translateY(20px);
        opacity: 0;
        visibility: hidden;
        /* تعریف ترنزیشن برای باز و بسته شدن */
        transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s 0.25s;
    }

    /* حالت باز: کاملاً مشخص و در جای خود */
    .hmyt-chatbot-window.open {
        opacity: 1;
        transform: scale(1) translateY(0);
        visibility: visible;
        transition-delay: 0s;
    }
}


/* --- استایل‌های داخلی (بدون تغییر باقی می‌مانند) --- */
.hmyt-chatbot-window .chat-header { background-color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--chatbot-border); flex-shrink: 0; }
.chat-header .header-content { display: flex; align-items: center; gap: 10px; }
.chat-header .header-content .font-bold { font-weight: 700; display: flex; font-size: 1.0em; flex-direction: row; gap: 7px; align-items: center; }
.chat-header .header-actions { display: flex; align-items: center; gap: 5px; }
.chat-header a { color: #54667a; display: flex; text-decoration: none; opacity: 0.8; transition: opacity 0.2s; }
.chat-header a:hover { opacity: 1; }
#hmyt-close-chat-btn { background: transparent; border: none; cursor: pointer; padding: 5px; opacity: 0.6; transition: opacity 0.2s; line-height: 0; }
#hmyt-close-chat-btn:hover { opacity: 1; }
#hmyt-close-chat-btn svg { color: #333; width: 20px; height: 20px; }
.chat-header .label-in-title-chatbot-webpremium { font-weight: 500; font-size: 10px; padding: 3px 6px; color: #54667a; background: #ecf1fd; border-radius: 10px; display: flex; align-items: center; }
.chat-header .label-in-title-chatbot-webpremium span { margin-left: 5px; width: 5px; height: 5px; background-color: #46c864; border-radius: 50%; }
.hmyt-chatbot-window .chat-messages { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; scroll-behavior: smooth;}
.hmyt-chatbot-window .message-wrapper { display: flex; flex-direction: column; }
.hmyt-chatbot-window .message-wrapper.user { align-items: flex-end; }
.hmyt-chatbot-window .message-wrapper.model { align-items: flex-start; }
.hmyt-chatbot-window .message { max-width: 85%; width: fit-content; word-wrap: break-word; padding: 12px 18px; border-radius: 18px; font-size: 15px; line-height: 26px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.hmyt-chatbot-window .message.user { background: var(--chatbot-user-bg); color: var(--chatbot-user-color); }
.hmyt-chatbot-window .message.model { background: var(--chatbot-model-bg); color: var(--chatbot-model-color); }
.hmyt-chatbot-window .message-footer { position: relative; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6c757d; margin-top: 13px; }
.hmyt-chatbot-window .message-wrapper.user .message-footer { flex-direction: row-reverse; }
.hmyt-chatbot-window .typing-indicator { display: none; align-self: flex-start; background-color: var(--chatbot-model-bg); padding: 12px 18px; border-radius: 18px; width: fit-content; }
.hmyt-chatbot-window .typing-indicator span { display: inline-block; width: 8px; height: 8px; background-color: #999; border-radius: 50%; margin: 0 2px; animation: hmyt-dot-animation 1.2s infinite ease-in-out; }
.hmyt-chatbot-window .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.hmyt-chatbot-window .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hmyt-dot-animation { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
.hmyt-chatbot-window .chat-input { padding: 15px; border-top: 1px solid var(--chatbot-border); flex-shrink: 0; }
.hmyt-chatbot-window .chat-input form { display: flex; align-items: center; gap: 10px; }
.hmyt-chatbot-window .chat-input input[type="text"] { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--chatbot-border); border-radius: 10px; outline: none; font-size: 14px; transition: all 0.3s; }
.hmyt-chatbot-window .chat-input input[type="text"]:focus { border-color: var(--chatbot-widget-color); box-shadow: 0 0 0 2px rgba(138, 53, 201, 0.2); }
.hmyt-chatbot-window .chat-input button { background-color: var(--chatbot-widget-color); color: #fff; border: none; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; flex-shrink: 0; }
.hmyt-chatbot-window .chat-input button:hover { opacity: 0.85; }
.hmyt-chatbot-window .chat-input button:disabled { background-color: #ccc; cursor: not-allowed; }
.hmyt-chatbot-window .chat-messages::-webkit-scrollbar { width: 6px; }
.hmyt-chatbot-window .chat-messages::-webkit-scrollbar-track { background: transparent; }
.hmyt-chatbot-window .chat-messages::-webkit-scrollbar-thumb { background-color: #d6d6d6; border-radius: 20px; }
.hmyt-chatbot-window .chat-messages { scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent; }
.hmyt-chatbot-login-required { padding: 15px; background-color: rgba(255, 82, 82, 0.1); border-top: 1px solid rgba(255, 82, 82, 0.2); text-align: center; }
.hmyt-chatbot-login-required p { margin: 0 0 10px 0; color: #c0392b; font-size: 14px; }
.hmyt-chatbot-login-required .hmyt-chatbot-login-btn { display: inline-block; padding: 8px 16px; background-color: var(--chatbot-widget-color); color: #fff; text-decoration: none; border-radius: 8px; font-size: 14px; transition: opacity 0.2s; }
.hmyt-chatbot-login-required .hmyt-chatbot-login-btn:hover { opacity: 0.85; }
.hmyt-chatbot-suggestions { padding: 15px; display: flex; gap: 10px; cursor: grab; overflow-x: auto; white-space: nowrap; flex-shrink: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; scrollbar-width: thin; scrollbar-color: #e0e0e0 transparent; }
.hmyt-chatbot-suggestions::-webkit-scrollbar { height: 4px; }
.hmyt-chatbot-suggestions::-webkit-scrollbar-thumb { background-color: #e0e0e0; border-radius: 20px; }
.hmyt-suggestion-btn { background-color: #f0f2f5; border: 1px solid #dcdfe4; color: #3c434a; padding: 3px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.2s ease; }
.hmyt-suggestion-btn:hover { background-color: #e0e2e5; border-color: #b0b3b8; }
.hmyt-chatbot-window .message-footer.has-avatar { padding-right: 40px; }
.hmyt-chatbot-window .message-wrapper.user .message-footer.has-avatar { padding-right: 0; padding-left: 40px; }
.hmyt-chatbot-window .avatar-container { position: absolute; top: -5px; right: 0; width: 28px; height: 28px; }
.hmyt-chatbot-window .message-wrapper.user .avatar-container { right: auto; left: 0; }
.hmyt-chatbot-window .avatar-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hmyt-chatbot-window .avatar-container .check { position: absolute; bottom: -3px; right: -4px; width: 16px; height: 16px; color: #37e75b; background-color: #fff; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; }

.hmyt-chatbot-window .message.model > p a {
    color: #ff4f5d;
    font-weight:700;
}

/* ==========================================================================
   بخش انیمیشن‌های جدید برای پیام‌ها
   ========================================================================== */

/* * تعریف انیمیشن برای پیام‌های کاربر
 * این انیمیشن پیام را با کمی حرکت از پایین به بالا و بزرگ شدن، نمایش می‌دهد.
 */
 @keyframes hmyt-fade-in-up-user {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* * تعریف انیمیشن برای پیام‌های هوش مصنوعی
 * این انیمیشن کمی ظریف‌تر است و حس ظاهر شدن نرم را القا می‌کند.
 */
@keyframes hmyt-fade-in-model {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* * اعمال انیمیشن‌ها به کلاس‌های مربوطه
 * ما همچنین `transform-origin` را تنظیم می‌کنیم تا انیمیشن scale 
 * از نقطه درستی شروع شود (برای کاربر از گوشه پایین-راست و برای مدل از پایین-چپ).
 */
.hmyt-chatbot-window .message.user {
    transform-origin: bottom right;
    animation: hmyt-fade-in-up-user 0.3s ease-out forwards;
}

.hmyt-chatbot-window .message.model {
    transform-origin: bottom left;
    animation: hmyt-fade-in-model 0.4s ease-out forwards;
}