/* فونت و ریست‌های پایه چت‌روم */
#ai-agent, #ai-agent * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* دکمه شناور دایره‌ای مدرن */
#ai-agent-button {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
    z-index: 999999;
}

#ai-agent-button:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
}

#ai-agent-button img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* پنجره هوشمند اصلی چت */
#ai-agent-window {
    position: fixed;
    right: 30px;
    bottom: 105px;
    width: 380px;
    height: 580px; /* ارتفاع ثابت پنجره */
    max-height: calc(100vh - 120px); /* برای گوشی‌ها و صفحات کوچک */
    background: #ffffff;
    
    /* تغییر مهم: نمایش همیشه رو حالت flex باقی می‌ماند تا ساختار نشکند */
    display: flex; 
    flex-direction: column; /* چیدمان ستونی برای تفکیک هدر، وسط و فوتر */
    justify-content: space-between; /* هل دادن هدر به بالا و فوتر به پایین */
    
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    z-index: 999999;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
    direction: rtl; /* اطمینان از راست‌چین بودن اصولی المان‌های فارسی */

    /* انیمیشن پاپ‌آپ و فید شدن بسیار نرم بدون آسیب به ساختار Flexbox */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

#ai-agent-window.ai-agent-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* هدر شیک و مینیمال چت */
#ai-agent-header {
    flex-shrink: 0; /* جلوگیری از تغییر اندازه */
    background: #2563eb;
    color: #ffffff;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.ai-agent-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}


.ai-agent-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

#ai-agent-new-chat,
#ai-agent-close {
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.2s;
}

#ai-agent-new-chat svg {
    width: 14px;
    height: 14px;
}

#ai-agent-new-chat:hover,
#ai-agent-close:hover {
    background: #ef4444;
    transform: rotate(90deg);
}

/* آیکون ماه/خورشید هدر: با کلیک، تم به‌صورت دستی بین دارک و لایت تغییر می‌کند */
.ai-theme-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
}

.ai-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ai-theme-icon {
    display: none;
    align-items: center;
    justify-content: center;
}

.ai-theme-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* پیش‌فرض: لایت‌مود -> خورشید نمایش داده می‌شود */
#ai-agent[data-theme="light"] .ai-theme-icon-sun,
#ai-agent:not([data-theme]) .ai-theme-icon-sun {
    display: flex;
    color: #fbbf24;
}

/* دارک‌مود -> ماه نمایش داده می‌شود */
#ai-agent[data-theme="dark"] .ai-theme-icon-moon {
    display: flex;
    color: #e2e8f0;
}

/* باکس اصلی لوپ چت‌ها */
#ai-agent-messages {
    flex: 1 1 auto; /* پر کردن تمام فضای خالی بین هدر و فوتر */
    overflow-y: auto; /* فعال کردن اسکرول برای کاربر */
    min-height: 0; /* فوق‌العاده حیاتی: به مرورگر اجازه می‌دهد ارتفاع این بخش را محدود کرده و اسکرول را فعال کند */
    padding: 20px;
    /* یک لایه‌ی نیمه‌شفاف روی عکس بک‌گراند تا حباب‌های پیام خوانا بمانند */
    background-image: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(248, 250, 252, 0.88)), var(--ai-agent-bg-light);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;

    /* مخفی‌سازی کامل اسکرول‌بار ناحیه‌ی پیام‌ها (اسکرول همچنان کار می‌کند، فقط نوار آن دیده نمی‌شود) */
    scrollbar-width: none;      /* فایرفاکس */
    -ms-overflow-style: none;   /* IE/Edge قدیمی */
}

#ai-agent[data-theme="dark"] #ai-agent-messages {
    background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)), var(--ai-agent-bg-dark);
}

#ai-agent-messages::-webkit-scrollbar {
    display: none;              /* کروم/سافاری/اج جدید */
}

/* استایل مشترک حباب پیام‌ها */
.user-message, .ai-message, .admin-message {
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 85%;
    word-break: break-word;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* حباب پیام کاربر */
.user-message {
    background: #2563eb;
    color: #ffffff;
    border-radius: 16px 16px 16px 4px;
    align-self: flex-start;
    text-align: right;
}

/* حباب پیام هوش مصنوعی */
.ai-message {
    background: #ffffff;
    color: #1e293b;
    border-radius: 16px 16px 4px 16px;
    align-self: flex-end;
    text-align: right;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* آواتار دایره‌ای فاویکون، کنار پیام‌های ربات - بالا و سمت چپ پیام */
.ai-message::before {
    content: "";
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background-image: var(--ai-agent-favicon);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    order: 2;
}

/* محتوای پیام (متن + دکمه‌های فیدبک) کنار آواتار */
.ai-message-body {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}

/* پیام سیستمی «انتقال به پشتیبان انسانی» — از پیام‌های ai/user/admin جداست
   چون نه از طرف مدل نوشته شده و نه از طرف کارشناس؛ فقط یک اعلام سیستمی است */
.ai-escalate-message {
    align-self: center;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7ed;
    border: 1px dashed #fb923c;
    text-align: right;
}

#ai-agent[data-theme="dark"] .ai-escalate-message {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.5);
}

.ai-escalate-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.ai-escalate-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ai-escalate-title {
    font-size: 13px;
    font-weight: 700;
    color: #c2410c;
}

#ai-agent[data-theme="dark"] .ai-escalate-title {
    color: #fdba74;
}
#ai-agent[data-theme="dark"] .ai-message {
    background: #111827;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
}

#ai-agent[data-theme="dark"] .admin-message {
    background: #1e293b;
    color: #e2e8f0;
}
.ai-escalate-reason {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #7c2d12;
}

#ai-agent[data-theme="dark"] .ai-escalate-reason {
    color: #fed7aa;
}

/* پیام سیستمی «این گفتگو بسته شده است»
   از همان ساختار پیام escalate استفاده می‌کند ولی با رنگ قرمز
   تا حس «بسته‌شدن» را منتقل کند. */
.ai-closed-message {
    align-self: center;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fef2f2;
    border: 1px dashed #ef4444;
    text-align: right;
}

#ai-agent[data-theme="dark"] .ai-closed-message {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
}

.ai-closed-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.ai-closed-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
    line-height: 1.6;
}

#ai-agent[data-theme="dark"] .ai-closed-text {
    color: #fca5a5;
}

/* اندیکاتور «در حالت پشتیبانی» — پس از هر پیام کاربر در حالت
   pending_human / human نمایش داده می‌شود. از ساختار پیام escalate
   استفاده می‌کند با همان رنگ نارنجی (تا حس «در حال انتقال/پشتیبانی»
   حفظ شود) ولی متن متفاوت. */
.ai-support-mode-message {
    align-self: center;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 92%;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff7ed;
    border: 1px dashed #fb923c;
    text-align: right;
}

#ai-agent[data-theme="dark"] .ai-support-mode-message {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.5);
}

.ai-support-mode-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.ai-support-mode-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #c2410c;
    line-height: 1.6;
}

#ai-agent[data-theme="dark"] .ai-support-mode-text {
    color: #fdba74;
}

/* حباب پیام کارشناس واقعی سیستم */
.admin-message {
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 16px 16px 4px 16px;
    align-self: flex-end;
    text-align: right;
    border-right: 4px solid #10b981;
}

/* فوتر ورودی پیام */
#ai-agent-footer {
    flex-shrink: 0; /* جلوگیری از فشرده شدن توسط پیام‌ها */
    padding: 12px 16px;
    background: #ffffff;
    display: flex;
    flex-direction: column; /* چیدمان ستونی: عکس‌های پیوست بالا، ردیف دکمه‌ها+اینپوت پایین */
    align-items: stretch;
    gap: 8px;
    border-top: 1px solid #f1f5f9;
}

/* ردیف دکمه‌ها و تکست‌باکس: دکمه سنجاق + اینپوت + دکمه ارسال کنار هم */
.ai-agent-footer-row {
    display: flex;
    align-items: flex-end; /* دکمه ارسال هنگام رشد تکست‌باکس، پایین بماند */
    gap: 8px;
    width: 100%;
}

#ai-agent[data-theme="dark"] #ai-agent-footer {
    background: #111827;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* فیلد متن مدرن و بدون حاشیه زشت - ارتفاع کوچک با قابلیت رشد پویا تا سقف مشخص */
#ai-agent-input {
    flex: 1;
    resize: none;
    height: 38px; /* ارتفاع پیش‌فرض کوچک‌تر، مثل صفحات چت مرسوم - این مقدار توسط JS هنگام تایپ به‌صورت داینامیک تغییر می‌کند */
    min-height: 38px !important; /* override قالب که min-height بزرگ‌تری (مثلاً 190px) روی همه‌ی textarea ها ست می‌کند */
    max-height: 90px !important; /* سقف ارتفاع؛ بعد از این حد اسکرول داخلی فعال می‌شود */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13.5px;
    line-height: 20px;
    outline: none;
    background: #f8fafc;
    overflow-y: hidden;
    /* مهم: height از ترنزیشن سراسری (#ai-agent *) مستثنی می‌شود تا JS بتواند بلافاصله
       بعد از پاک کردن متن، ارتفاع واقعی محتوا را بدون تأخیر انیمیشن اندازه بگیرد؛
       در غیر این‌صورت مقدار scrollHeight هنگام کوچک شدن به‌درستی محاسبه نمی‌شد. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

    /* مخفی‌سازی اسکرول‌بار تکست‌باکس هنگام تایپ پیام طولانی و رسیدن به سقف ارتفاع */
    scrollbar-width: none;      /* فایرفاکس */
    -ms-overflow-style: none;   /* IE/Edge قدیمی */
}

#ai-agent-input::-webkit-scrollbar {
    display: none;              /* کروم/سافاری/اج جدید */
}

#ai-agent[data-theme="dark"] #ai-agent-input {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

#ai-agent[data-theme="dark"] #ai-agent-input::placeholder {
    color: rgba(226, 232, 240, 0.5);
}

#ai-agent[data-theme="dark"] #ai-agent-input:focus {
    background: #1e293b;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

#ai-agent-input:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* دکمه ارسال: فقط خود SVG بدون هیچ بک‌گراند/حاشیه/سایه‌ای
   آیکون send.svg به‌عنوان خود دکمه عمل می‌کند. */
#ai-agent-send {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center; /* برای هم‌محور شدن با فوتر که align-items: flex-end داره */
}

#ai-agent-send:hover,
#ai-agent-send:active,
#ai-agent-send:focus {
    background: transparent !important;
    box-shadow: none !important;
}

#ai-agent-send img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

#ai-agent-send:hover img {
    transform: translateX(-3px) scale(1.12);   /* افکت حرکت به سمت چپ (جهت ارسال در RTL) */
}

#ai-agent-send:active img {
    transform: scale(.95);
}

/*
============================================
حالت غیرفعال فوتر (هنگام بسته شدن گفتگو)

وقتی گفتگو از سمت پشتیبان بسته می‌شود، فیلد متن، دکمه ارسال و دکمه
سنجاق باید غیرفعال و خاموش شوند تا کاربر نتواند پیام جدیدی ارسال کند.
کلاس is-disabled روی #ai-agent-footer اعمال می‌شود.
============================================
*/
#ai-agent-footer.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#ai-agent-footer.is-disabled .ai-agent-footer-row {
    pointer-events: none; /* جلوگیری از کلیک روی دکمه‌ها و فیلد */
}

#ai-agent-footer.is-disabled #ai-agent-input {
    cursor: not-allowed !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

#ai-agent-footer.is-disabled #ai-agent-input::placeholder {
    color: #94a3b8;
}

#ai-agent[data-theme="dark"] #ai-agent-footer.is-disabled #ai-agent-input {
    background: #1a2333 !important;
    color: #64748b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#ai-agent[data-theme="dark"] #ai-agent-footer.is-disabled #ai-agent-input::placeholder {
    color: #64748b;
}

#ai-agent-footer.is-disabled #ai-agent-send,
#ai-agent-footer.is-disabled #ai-agent-attach {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

#ai-agent-footer.is-disabled #ai-agent-send img {
    filter: grayscale(1);
    opacity: 0.6;
}

/* باکس رفرنس‌ها (محصولات/صفحات مرتبط) — انتهای پیام هوش مصنوعی */
.ai-references-box {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}

.ai-references-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

/* دکمه‌ی عنوان «موارد مرتبط» — قابل‌کلیک برای باز/بسته کردن لیست */
button.ai-references-title.ai-references-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 2px 0;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 0;
}

.ai-references-title-text {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.ai-references-arrow {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ai-references-toggle.is-open .ai-references-arrow {
    transform: rotate(180deg);
}

.ai-references-toggle:hover .ai-references-title-text {
    color: #2563eb;
}

.ai-references-list {
    margin-top: 6px;
}

.ai-references-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ai-reference-link {
    font-size: 12.5px;
    color: #2563eb;
    text-decoration: none;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: block;
    word-break: break-word;
}

.ai-reference-link:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    text-decoration: underline;
}

/* دارک‌مود */
#ai-agent[data-theme="dark"] .ai-references-box {
    border-top-color: rgba(255, 255, 255, 0.08);
}
#ai-agent[data-theme="dark"] .ai-references-title,
#ai-agent[data-theme="dark"] .ai-references-title-text {
    color: #94a3b8;
}
#ai-agent[data-theme="dark"] .ai-references-toggle:hover .ai-references-title-text {
    color: #93c5fd;
}
#ai-agent[data-theme="dark"] .ai-references-arrow {
    color: #64748b;
}
#ai-agent[data-theme="dark"] .ai-reference-link {
    color: #93c5fd;
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}
#ai-agent[data-theme="dark"] .ai-reference-link:hover {
    background: #24344d;
    border-color: rgba(147, 197, 253, 0.35);
}
/* گالری عکس نگاره اصلی محصولات مرتبط، کنار هم و هایپرلینک به صفحه محصول */
.ai-references-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
/* ----- گالری بالای پیام: ۲ عکس در دید + اسکرول افقی بدون نمایش اسکرول‌بار ----- */
.ai-references-gallery-wrap {
    margin-bottom: 10px;
}

.ai-references-gallery-wrap .ai-references-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;      /* فایرفاکس */
    -ms-overflow-style: none;   /* IE/Edge قدیمی */
}
.ai-references-gallery-wrap .ai-references-gallery::-webkit-scrollbar {
    display: none;              /* کروم/سافاری */
}

.ai-references-gallery-wrap .ai-reference-gallery-item {
    width: calc(50% - 4px);
    flex: 0 0 calc(50% - 4px);
    aspect-ratio: 1 / 1;
    height: auto;
    scroll-snap-align: start;
}

/* نقطه‌های گرد نشان‌دهنده‌ی اسکرول افقی */
.ai-gallery-dots {
    display: none;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
}
.ai-gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}
.ai-gallery-dot.active {
    background: #000000;
    transform: scale(1.25);
}

#ai-agent[data-theme="dark"] .ai-gallery-dot {
    background: rgba(255, 255, 255, 0.3);
}
#ai-agent[data-theme="dark"] .ai-gallery-dot.active {
    background: #e2e8f0;
}
.ai-reference-gallery-item {
    display: block;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ai-reference-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-reference-gallery-item:hover {
    border-color: #2563eb;
    transform: translateY(-2px) scale(1.03);
}

#ai-agent[data-theme="dark"] .ai-reference-gallery-item {
    border-color: rgba(255, 255, 255, 0.12);
}

/* حالت کشیدن (drag) گالری با موس: نشانگر دست و غیرفعال شدن انتخاب متن/عکس */
.ai-references-gallery-wrap .ai-references-gallery {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.ai-references-gallery-wrap .ai-references-gallery.ai-gallery-dragging {
    cursor: grabbing;
    scroll-behavior: auto; /* در حین کشیدن، اسکرول نرم اسموت غیرفعال شود تا حرکت با موس هم‌زمان و دقیق باشد */
}
.ai-references-gallery-wrap .ai-references-gallery.ai-gallery-dragging * {
    pointer-events: none; /* جلوگیری از فعال شدن لینک زیر انگشت هنگام کشیدن */
}
/* تکست باکس و دکمه پورتال اتصال به ادمین */
.ai-support-gate .ai-support-msg {
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    resize: none;
    outline: none;
}
.ai-support-gate .ai-support-msg:focus {
    border-color: #2563eb;
}
.ai-support-gate .ai-submit-support-btn {
    margin-top: 6px;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
}

/* ============================================
   انیمیشن‌های مدرن CSS
   ============================================ */

/* انیمیشن لودینگ سه‌نقطه الاکلنگی متحرک چت */
.typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 4px;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    background-color: #94a3b8;
    border-radius: 50%;
    display: inline-block;
    animation: bounceDots 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounceDots {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1.1) translateY(-6px); opacity: 1; background-color: #475569; }
}

/* انیمیشن پاپ‌آپ ورود حباب‌های پیام از پایین به بالا */
.fade-in-up {
    animation: fadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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



/* ============================================
   دکمه سنجاق (Attach) برای افزودن عکس به پیام
   ============================================ */
#ai-agent-attach {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    outline: none;
    background: transparent;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #64748b;
    align-self: center;
    transition: color 0.2s ease, background 0.2s ease;
}

#ai-agent-attach:hover {
    color: #2563eb;
    background: #f1f5f9;
}

#ai-agent[data-theme="dark"] #ai-agent-attach {
    color: #94a3b8;
}

#ai-agent[data-theme="dark"] #ai-agent-attach:hover {
    color: #93c5fd;
    background: rgba(255, 255, 255, 0.06);
}

#ai-agent-attach svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* عداد روی دکمه سنجاق که تعداد عکس‌های انتخاب‌شده را نشان می‌دهد */
#ai-agent-attach .ai-attach-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    padding: 2px 5px;
    min-width: 14px;
    text-align: center;
    display: none;
}

#ai-agent-attach.has-attachments .ai-attach-badge {
    display: inline-block;
}

/* ============================================
   دکمه میکروفون (Voice Input) — Web Speech API

   این دکمه گفتار کاربر را به زبان فارسی (fa-IR) به متن تبدیل می‌کند
   و در لحظه داخل #ai-agent-input می‌نویسد. در مرورگرهای بدون پشتیبانی
   از SpeechRecognition، دکمه به‌صورت خودکار مخفی می‌شود (توسط JS).
   ============================================ */
#ai-agent-voice {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    outline: none;
    background: transparent;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #64748b;
    align-self: center;
    transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

#ai-agent-voice:hover {
    color: #2563eb;
    background: #f1f5f9;
}

#ai-agent[data-theme="dark"] #ai-agent-voice {
    color: #94a3b8;
}

#ai-agent[data-theme="dark"] #ai-agent-voice:hover {
    color: #93c5fd;
    background: rgba(255, 255, 255, 0.06);
}

#ai-agent-voice svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* حالت فعال (در حال ضبط): رنگ قرمز + انیمیشن پالس */
#ai-agent-voice.is-recording {
    color: #fff;
    background: #ef4444;
    animation: ai-agent-voice-pulse 1.4s ease-in-out infinite;
}

#ai-agent-voice.is-recording:hover {
    background: #dc2626;
    color: #fff;
}

#ai-agent[data-theme="dark"] #ai-agent-voice.is-recording {
    color: #fff;
    background: #ef4444;
}

#ai-agent[data-theme="dark"] #ai-agent-voice.is-recording:hover {
    background: #dc2626;
}

@keyframes ai-agent-voice-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* وقتی مرورگر از SpeechRecognition پشتیبانی نمی‌کند، دکمه مخفی می‌شود */
#ai-agent-voice.voice-not-supported {
    display: none !important;
}

/* حالت غیرفعال فوتر: دکمه میکروفون هم غیرفعال می‌شود */
#ai-agent-footer.is-disabled #ai-agent-voice {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ============================================
   ناحیه پیش‌نمایش عکس‌های انتخاب‌شده (بالای فوتر)
   ============================================ */
#ai-agent-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    width: 100%;
}

#ai-agent-attachments.has-items {
    display: flex;
}

.ai-attach-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
    animation: fadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ai-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ai-attach-thumb-remove {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;

    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    border-radius: 50% !important;
    background: rgba(15,23,42,.8) !important;

    color: #fff !important;
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    line-height: 1 !important;
    text-align: center !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 9999 !important;

    /* خنثی کردن استایل وودمارت */
    gap: 0 !important;
    text-transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
}

.ai-attach-thumb-remove:hover{
    background:#ef4444 !important;
    transform:scale(1.1);
}

#ai-agent[data-theme="dark"] .ai-attach-thumb {
    border-color: rgba(255, 255, 255, 0.12);
    background: #1e293b;
}

/* ============================================
   گالری عکس‌های ارسالی کاربر داخل حباب پیام کاربر
   عکس‌ها در یک گرید نمایش داده می‌شوند و پرامپت
   (متن پیام) زیر آن‌ها نوشته می‌شود.
   ============================================ */
.user-message-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    max-width: 240px;
}

.user-message-gallery .user-gallery-item {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
    display: block;
    position: relative;
}

.user-message-gallery .user-gallery-item:hover {
    transform: scale(1.05);
}

.user-message-gallery .user-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* placeholder خاکستری برای حالت lazy (is-loading) — انیمیشن shimmer */
.user-message-gallery .user-gallery-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.05) 70%
    );
    background-size: 200% 100%;
    animation: ai-gallery-shimmer 1.4s linear infinite;
}

@keyframes ai-gallery-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* overlay محو روی placeholder در حال loading */
.user-message-gallery .user-gallery-item.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* آیتم با خطا در دریافت عکس از سرور */
.user-message-gallery .user-gallery-item.is-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    cursor: default;
}

.user-message-gallery .user-gallery-error-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: rgba(239, 68, 68, 0.9);
    pointer-events: none;
}

/* پرامپت زیر گالری عکس‌های کاربر */
.user-message-prompt {
    font-size: 13.5px;
    line-height: 1.6;
    word-break: break-word;
}

/* وقتی فقط عکس ارسال شده و متنی نیست، فاصله اضافی زیر گالری نباشد */
.user-message-gallery:last-child {
    margin-bottom: 0;
}

/* ============================================
   لایت‌باکس نمایش عکس در اندازه کامل
   ============================================ */
.ai-image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    padding: 20px;
    cursor: zoom-out;
}

.ai-image-lightbox.is-open {
    display: flex;
    animation: fadeInUp 0.2s ease forwards;
}

.ai-image-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

/* ============================================
   حالت موبایل: ویجت چت تمام‌صفحه می‌شود

   در صفحه‌نمایش‌های کوچک (کمتر از ۷۶۸ پیکسل عرض)، پنجره‌ی چت
   به‌جای حالت شناور کوچک، کل صفحه را می‌پوشاند تا تجربه‌ی کاربری
   بهتری در دستگاه‌های لمسی فراهم شود.

   تغییرات:
     - عرض و ارتفاع پنجره به ۱۰۰vw / ۱۰۰vh
     - حذف گوشه‌های گرد و سایه (چون تمام صفحه است)
     - موقعیت از گوشه‌ی راست-پایین به inset:0
     - حداکثر ارتفاع برای پوشش کامل صفحه (شامل نوار آدرس مرورگر)
     - دکمه‌ی شناور همچنان در پایین قابل دسترسی است
   ============================================ */
@media (max-width: 768px) {
    #ai-agent-window {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    #ai-agent-window.ai-agent-open {
        transform: none;
    }

    /* هدر در حالت موبایل: ارتفاع کمی بیشتر برای لمس راحت‌تر */
    #ai-agent-header {
        padding: 14px 16px;
        padding-top: max(14px, env(safe-area-inset-top));
    }

    /* باکس ورودی پیام: ارتفاع کمی بیشتر برای لمس راحت‌تر */
    #ai-agent-input {
        min-height: 44px;
    }

    /* دکمه‌های هدر: نواحی لمسی بزرگ‌تر */
    #ai-agent-new-chat,
    #ai-agent-close {
        width: 32px;
        height: 32px;
    }

    #ai-agent-new-chat svg {
        width: 18px;
        height: 18px;
    }

    /* فوتر: پدینگ پایین برای iPhoneهای با نوار Home */
    #ai-agent-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* دکمه‌ی شناور: کمی کوچک‌تر و بالاتر در موبایل تا با نوارها تداخل نکند */
    #ai-agent-button {
        right: 20px;
        bottom: max(20px, env(safe-area-inset-bottom));
        width: 56px;
        height: 56px;
    }

    #ai-agent-button img {
        width: 28px;
        height: 28px;
    }

    /* حباب‌های پیام: عرض بیشتر برای استفاده‌ی بهتر از فضای صفحه */
    .ai-message-body,
    .user-message-body,
    .admin-message-body {
        max-width: 95%;
    }
}

/* صفحه‌های بسیار کوچک (کمتر از ۴۸۰px) — تنظیمات اضافی */
@media (max-width: 480px) {
    /* دکمه‌ی شناور کوچک‌تر */
    #ai-agent-button {
        width: 52px;
        height: 52px;
    }

    #ai-agent-button img {
        width: 26px;
        height: 26px;
    }

    /* هدر: فونت کمی کوچک‌تر */
    #ai-agent-header {
        font-size: 14px;
        padding: 12px 14px;
    }

    /* باکس ورودی: فونت ۱۶px برای جلوگیری از zoom مرورگر iOS */
    #ai-agent-input {
        font-size: 16px;
    }
}

/* ============================================
   قفل اسکرول بدنه هنگام باز بودن چت در موبایل

   کلاس ai-agent-chat-open به تگ <body> اضافه می‌شود وقتی چت
   باز است. این قانون فقط در موبایل اعمال می‌شود تا اسکرول
   پس‌زمینه قفل شود (در دسکتاپ نیازی نیست چون چت شناور است).
   نکته: جاوااسکریپت از position:fixed روی body استفاده می‌کند
   که خودش اسکرول را قفل می‌کند، اما این قانون اضافی برای
   پشتیبانی از مرورگرهای قدیمی و حفظ یکپارچگی است.
   ============================================ */
@media (max-width: 768px) {
    body.ai-agent-chat-open {
        overflow: hidden;
    }
}