/*
==========================================================================
ویجت چت دانیچَت

پالت از اپلیکیشن کلاد گرفته شده: کاغذ گرم در حالت روشن، مشکیِ گرم در
حالت تاریک، و یک نارنجی که تنها رنگِ صفحه است. هیچ عکس پس‌زمینه‌ای در
کار نیست — عکس پشتِ متنِ گفت‌وگو خواندن را سخت می‌کرد و چیزی اضافه
نمی‌کرد.

دو تصمیم ساختاری که بقیه‌ی فایل از آن‌ها پیروی می‌کند:

  ۱) پیام کاربر حباب دارد، پاسخ دستیار ندارد. در یک گفت‌وگوی دونفره
     همیشه معلوم است کدام طرف حرف می‌زند؛ حباب دور پاسخ‌های بلندِ
     دستیار فقط متن را در یک قوطی باریک می‌فشرد. پاسخ، متنِ صفحه است.

  ۲) تم انتخابِ بازدیدکننده نیست. آیکون ماه/خورشید حذف شد و data-theme
     از سایت میزبان (یا از تنظیمات افزونه) می‌آید.
==========================================================================
*/
/*
Vazirmatn به‌صورت variable همراه خود افزونه می‌آید. قبلاً اسمش در استک
بود ولی هیچ‌جا بارگذاری نمی‌شد، پس ویجت روی هر سایتی که قالبش این فونت
را نداشت می‌افتاد روی فونت پیش‌فرض سیستم — و روی ویندوز یعنی Tahoma،
که نیم‌فاصله و ارقام فارسی را بد نشان می‌دهد.

نام خانواده «Vazirmatn DC» است نه «Vazirmatn»: اگر قالب سایت خودش
Vazirmatn دارد، نسخه‌ی افزونه جایش را نمی‌گیرد و برعکس.
*/
@font-face {
    font-family: 'Vazirmatn DC';
    src: url('../fonts/Vazirmatn.ttf') format('truetype-variations'),
         url('../fonts/Vazirmatn.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

#ai-agent, #ai-agent * {
    box-sizing: border-box;
    font-family: 'Vazirmatn DC', "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*
انیمیشن روی همه‌چیز (transition: all) حذف شد: باعث می‌شد هر تغییر
ارتفاعِ فیلد متن و هر رندر دوباره‌ی استریم، به‌جای فوری بودن، پرش کند.
حالا فقط چیزهایی که واقعاً حرکت می‌کنند transition دارند.
*/
#ai-agent-button,
#ai-agent-window,
.ai-agent-icon-btn,
.ai-agent-chip,
.ai-agent-drawer,
.ai-agent-drawer-item,
#ai-agent-send,
#ai-agent-attach,
#ai-agent-voice {
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease,
                opacity 0.18s ease, box-shadow 0.18s ease;
}

/*
==========================================================================
متغیرهای رنگ

--ai-agent-color-light / -dark  : رنگ برند سایت (از تنظیمات افزونه)
--ai-agent-chat-bg-light / -dark: رنگ پس‌زمینه‌ی صفحه‌ی چت (از تنظیمات)
هر دو جفت به‌صورت inline از PHP تزریق می‌شوند؛ مقادیر زیر fallback‌اند.

بقیه‌ی متغیرها (سطح، متن، مرز) از پالت کلاد می‌آیند و قابل تنظیم
نیستند — یک پالت خوانا با کنتراست سنجیده، نه فهرستی از رنگ که هر کسی
بتواند به‌هم بریزد.
==========================================================================
*/
#ai-agent {
    --ai-agent-color-light: #D97757;
    --ai-agent-color-dark: #D97757;
    --ai-agent-color-light-rgb: 217, 119, 87;
    --ai-agent-color-dark-rgb: 217, 119, 87;
    --ai-agent-chat-bg-light: #FAF9F5;
    --ai-agent-chat-bg-dark: #1F1E1D;
}

/* ---- حالت روشن (پیش‌فرض) ---- */
#ai-agent[data-theme="light"],
#ai-agent:not([data-theme]) {
    --ai-agent-theme-color: var(--ai-agent-color-light);
    --ai-agent-theme-color-rgb: var(--ai-agent-color-light-rgb);

    --ai-chat-bg: var(--ai-agent-chat-bg-light);
    --ai-surface: #FFFFFF;
    --ai-surface-2: #F0EEE9;
    --ai-bubble: #EFEDE7;
    --ai-text: #262624;
    --ai-text-soft: #6F6E6A;
    --ai-text-faint: #96948E;
    --ai-border: #E5E2DA;
    --ai-shadow: 0 10px 40px rgba(31, 30, 29, 0.14);
}

/*
---- حالت تاریک ----
رنگ برند در حالت تاریک جداگانه انتخاب می‌شود. یک نارنجی که روی کاغذ
روشن درست است، روی مشکی یا می‌سوزد یا گم می‌شود؛ به همین دلیل هدر و
دکمه‌ها در این حالت رنگ dark را می‌گیرند و نه همان رنگ حالت روشن.
*/
#ai-agent[data-theme="dark"] {
    --ai-agent-theme-color: var(--ai-agent-color-dark);
    --ai-agent-theme-color-rgb: var(--ai-agent-color-dark-rgb);

    --ai-chat-bg: var(--ai-agent-chat-bg-dark);
    --ai-surface: #2A2926;
    --ai-surface-2: #35332F;
    --ai-bubble: #302F2C;
    --ai-text: #F5F4EE;
    --ai-text-soft: #B4B2AA;
    --ai-text-faint: #8B8981;
    --ai-border: #3A3835;
    --ai-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

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

#ai-agent-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--ai-agent-theme-color-rgb), 0.42);
}

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

/* پنجره‌ی چت */
#ai-agent-window {
    position: fixed;
    right: 30px;
    bottom: 105px;
    width: 400px;
    height: 620px;
    max-height: calc(100vh - 120px);
    background: var(--ai-chat-bg);

    display: flex;
    flex-direction: column;

    border-radius: 20px;
    box-shadow: var(--ai-shadow);
    z-index: 999999;
    overflow: hidden;
    border: 1px solid var(--ai-border);
    direction: rtl;
    color: var(--ai-text);

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}

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

/*
==========================================================================
هدر

سه دکمه‌ی هم‌اندازه در دو سر و نام مجموعه در وسط. قبلاً ضربدرِ بستن یک
کاراکتر متنی (✕) بود که کنار SVG‌ها بزرگ‌تر و ناهم‌تراز می‌نشست، و
hover هر دو دکمه را قرمز و ۹۰ درجه می‌چرخاند — حرکتی که برای «بستن»
هشدارآمیز بود و برای «چت تازه» بی‌معنی.
==========================================================================
*/
#ai-agent-header {
    flex-shrink: 0;
    background: var(--ai-agent-theme-color);
    color: #ffffff;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.ai-agent-header-title {
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.01em;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.ai-agent-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ai-agent-icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.ai-agent-icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

/*
==========================================================================
ناحیه‌ی پیام‌ها
==========================================================================
*/
#ai-agent-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 18px 16px 8px;
    background: var(--ai-chat-bg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

#ai-agent-messages::-webkit-scrollbar {
    display: none;
}

/*
حباب پیام کاربر — گرد از هر چهار طرف، بدون دم.

دمِ حباب وقتی معنا دارد که چند نفر هم‌زمان حرف بزنند و باید معلوم شود
حباب به چه کسی وصل است. این‌جا دو طرف بیشتر نیست و سمتِ حباب خودش
جواب می‌دهد؛ آن گوشه‌ی تیز فقط یک ناهمواری بود.

رنگش هم دیگر رنگ برند نیست. یک بلوک نارنجیِ پررنگ کنار متن سیاه،
سنگین‌ترین چیز روی صفحه می‌شد در حالی که فقط چیزی است که کاربر خودش
تایپ کرده.
*/
.user-message {
    background: var(--ai-bubble);
    color: var(--ai-text);
    border-radius: 18px;
    align-self: flex-start;
    text-align: right;
    max-width: 82%;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.75;
    word-break: break-word;
}

/*
پاسخ دستیار — بدون حباب و بدون نشان/آواتار.

متنِ خود صفحه است، درست مثل پاسخ‌های کلاد: هیچ نشانی بالای آن نیست که
بگوید «این از طرف رباته» — رنگ و لحنِ متن خودش این را می‌گوید. راست‌چین،
چون پاسخ فارسی است و از سمت راست خوانده می‌شود.
*/
.ai-message {
    align-self: stretch;
    max-width: 100%;
    text-align: right;
    color: var(--ai-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.95;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-message-body {
    min-width: 0;
}

.ai-message-body strong {
    font-weight: 700;
}

.ai-message-body a {
    color: var(--ai-agent-theme-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* پیام کارشناس انسانی — حباب دارد، چون طرفِ سومِ گفت‌وگوست */
.admin-message {
    align-self: stretch;
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    color: var(--ai-text);
    border-radius: 18px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.8;
    word-break: break-word;
}

.user-message-prompt {
    white-space: pre-wrap;
}

/* پیام سیستمی «انتقال به پشتیبان انسانی» — از پیام‌های 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-escalate-bale-hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(194, 65, 12, 0.25);
    font-size: 12px;
    line-height: 1.7;
    color: #9a3412;
}

#ai-agent[data-theme="dark"] .ai-escalate-bale-hint {
    border-top-color: rgba(253, 186, 116, 0.25);
    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: var(--ai-agent-theme-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(var(--ai-agent-theme-color-rgb, 59, 130, 246), 0.2);
}

/*
فوکِس فیلد متن — به‌جای آبی ثابت قبلی، از رنگی که کاربر در
صفحه‌ی تنظیمات انتخاب کرده (رنگ همان حالت لایت/دارک) پیروی می‌کند.
*/
#ai-agent-input:focus {
    background: #ffffff;
    border-color: var(--ai-agent-theme-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--ai-agent-theme-color-rgb, 37, 99, 235), 0.1);
}

/*
دکمه‌ی ارسال، پایین‌تر در همین فایل تعریف می‌شود (دایره‌ی پرِ رنگ برند با
پیکان سفید).

قانون‌های قدیمیِ اینجا حذف شدند، نه بازنویسی: از دورانی مانده بودند که
دکمه یک <img> بی‌پس‌زمینه بود، و با `background: transparent !important`
پس‌زمینه‌ی نسخه‌ی جدید را می‌کشتند. نتیجه‌اش دقیقاً همان باگی بود که
دیده می‌شد — به‌محض تایپ‌کردن، رنگ متن دکمه سفید می‌شد ولی دایره‌ی
رنگی هیچ‌وقت نمی‌آمد، پس پیکانِ سفید روی فوترِ سفید عملاً ناپدید
می‌شد. قانون‌های img هم بی‌اثر بودند: دکمه دیگر img ندارد، svg دارد.
*/

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

وقتی گفتگو از سمت پشتیبان بسته می‌شود، فیلد متن، دکمه ارسال و دکمه
سنجاق باید غیرفعال و خاموش شوند تا کاربر نتواند پیام جدیدی ارسال کند.
کلاس 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-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: var(--ai-agent-theme-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: var(--ai-agent-theme-color, #2563eb);
    text-decoration: none;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    word-break: break-word;
}

/* متن عنوان لینک — فلکس ۱ تا فضای باقی‌مانده را پر کند و بَج به سمت چپ برود */
.ai-reference-link-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/*
   بَج خیلی کوچک content_type در سمت چپ هر لینک در لیست «موارد مرتبط».
   رنگ‌بندی عمداً neutral انتخاب شده تا تحت کنترل تم سایت باقی بماند؛
   هیچ استایل اختصاصی برای نوع‌های product/post/list/page تعریف نمی‌شود.
   فقط متن فارسیِ نوع داخل یک کادر کوچک کنار لینک نمایش داده می‌شود.
*/
.ai-reference-type-badge {
    flex: 0 0 auto;
    display: inline-block !important;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 8px;
    border-radius: 6px;
    color: inherit;
    background: rgba(127, 127, 127, 0.14);
    border: 1px solid rgba(127, 127, 127, 0.25);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.ai-reference-link:hover {
    background: rgba(var(--ai-agent-theme-color-rgb, 37, 99, 235), 0.08);
    border-color: rgba(var(--ai-agent-theme-color-rgb, 37, 99, 235), 0.35);
    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: var(--ai-agent-theme-color, #93c5fd);
}
#ai-agent[data-theme="dark"] .ai-references-arrow {
    color: #64748b;
}
#ai-agent[data-theme="dark"] .ai-reference-link {
    color: var(--ai-agent-theme-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(var(--ai-agent-theme-color-rgb, 147, 197, 253), 0.35);
}

/*
   بَج content_type در دارک‌مود — همان رنگ neutral اما با شفافیت متفاوت
   تا روی پس‌زمینه‌ی تیره هم خوانا باشد. هیچ رنگ اختصاصی برای نوع‌ها تعریف نشده.
*/
#ai-agent[data-theme="dark"] .ai-reference-type-badge {
    color: inherit;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
}
/* گالری عکس نگاره اصلی محصولات مرتبط، کنار هم و هایپرلینک به صفحه محصول */
.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: var(--ai-agent-theme-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);
}

/* حالت lazy-loading برای آیتم‌های گالری رفرنس که type=image هستند:
   همان ساختار placeholder گالری پیام کاربر را داراست (کلاس is-loading
   و یک فرزند .user-gallery-placeholder) اما در گالری رفرنس با ابعاد
   ۵۶x۵۶px. این قانون‌ها placeholder خاکستری با انیمیشن shimmer
   می‌سازند تا قبل از بارگذاری عکس از سرور، یک حالت loading
   مشاهظه‌پذیر داشته باشیم. */
.ai-references-gallery-wrap .ai-reference-gallery-item.is-loading {
    position: relative;
    background: #e5e7eb;
    cursor: default;
}
.ai-references-gallery-wrap .ai-reference-gallery-item .user-gallery-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.04) 30%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.04) 70%
    );
    background-size: 200% 100%;
    animation: ai-gallery-shimmer 1.4s linear infinite;
}
#ai-agent[data-theme="dark"] .ai-references-gallery-wrap .ai-reference-gallery-item.is-loading {
    background: rgba(255, 255, 255, 0.08);
}
#ai-agent[data-theme="dark"] .ai-references-gallery-wrap .ai-reference-gallery-item .user-gallery-placeholder {
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.04) 30%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 70%
    );
    background-size: 200% 100%;
    animation: ai-gallery-shimmer 1.4s linear infinite;
}
.ai-references-gallery-wrap .ai-reference-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;
}
.ai-references-gallery-wrap .ai-reference-gallery-item.is-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    cursor: default;
}

/* حالت کشیدن (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: var(--ai-agent-theme-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: var(--ai-agent-theme-color, #2563eb);
    background: #f1f5f9;
}

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

#ai-agent[data-theme="dark"] #ai-agent-attach:hover {
    color: var(--ai-agent-theme-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: var(--ai-agent-theme-color, #2563eb);
    background: #f1f5f9;
}

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

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

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

/*
جابه‌جایی آیکون: میکروفون تا وقتی ضبط شروع نشده، مربعِ توقف بعد از آن.
اینکه هر دو در HTML باشند و با CSS عوض شوند، یعنی هیچ لحظه‌ای دکمه
بدون آیکون نیست.
*/
#ai-agent-voice .ai-voice-icon-stop { display: none; }
#ai-agent-voice.is-recording .ai-voice-icon-mic { display: none; }
#ai-agent-voice.is-recording .ai-voice-icon-stop { display: block; }

/* حالت فعال (در حال ضبط): رنگ قرمز + انیمیشن پالس */
#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);
    }
}

/* وقتی مرورگر MediaRecorder یا میکروفون ندارد، دکمه مخفی می‌شود */
#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;
}

/* ============================================
   نوار ضبط صدا (Recording Bar)

   جای‌گزینِ textarea می‌شود تا کاملاً برای کاربر مشخص باشد در حال
   ضبطِ صدا (شبیه ارسال ویس) است: نقطه‌ی قرمز پالسی + موج صدا
   (equalizer) متحرک + شمارنده‌ی زمان + دکمه‌ی لغو ضبط.
   ============================================ */
.ai-agent-recording-bar {
    display: none;
    position: relative;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.ai-agent-recording-bar.is-active {
    display: flex;
}

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

/* نقطه‌ی قرمز پالسی: نشانه‌ی «در حال ضبط» */
.ai-recording-dot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background: #ef4444;
    animation: ai-recording-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes ai-recording-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

/*
میله‌های فرکانسی.

ارتفاع هر میله را جاوااسکریپت از روی خودِ صدا ست می‌کند (AnalyserNode)،
نه یک انیمیشن CSS. تفاوتش این است که وقتی کاربر ساکت می‌شود میله‌ها هم
می‌خوابند — و همین تنها نشانه‌ای است که به او می‌گوید میکروفون واقعاً
صدایش را می‌شنود. یک موجِ تزئینی، حتی با میکروفونِ خاموش هم می‌رقصد.

نوار کل عرضِ باقی‌مانده را می‌گیرد، چون جای فیلد متن نشسته است.
*/
.ai-recording-waveform {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 22px;
    flex: 1 1 auto;
    min-width: 0;
    /* روی صفحه‌های خیلی باریک، میله‌های اضافی بی‌سروصدا بریده می‌شوند
       به‌جای اینکه شمارنده‌ی زمان را از نوار بیرون بیندازند. */
    overflow: hidden;
}

.ai-recording-waveform span {
    display: block;
    flex: 1 1 0;
    min-width: 2px;
    max-width: 4px;
    height: 15%;
    border-radius: 2px;
    background: var(--ai-agent-theme-color, #2563eb);
    /* ملایم‌ترین ترنزیشنی که هنوز روان دیده می‌شود: بلندتر از این،
       میله‌ها از صدا عقب می‌مانند و حس زنده‌بودن از بین می‌رود. */
    transition: height 60ms linear;
}

/*
هنگام تبدیل به متن، صدایی در کار نیست و میله‌ها یخ می‌زنند. اینجا
انیمیشن CSS درست است: چیزی برای نمایش‌دادن وجود ندارد جز اینکه کار
هنوز تمام نشده.
*/
.ai-agent-recording-bar.is-processing .ai-recording-waveform span,
.ai-agent-recording-bar.no-analyser .ai-recording-waveform span {
    animation: ai-recording-wave 0.9s ease-in-out infinite;
}

.ai-agent-recording-bar.is-processing .ai-recording-waveform span:nth-child(3n+1),
.ai-agent-recording-bar.no-analyser .ai-recording-waveform span:nth-child(3n+1) { animation-delay: 0s; }
.ai-agent-recording-bar.is-processing .ai-recording-waveform span:nth-child(3n+2),
.ai-agent-recording-bar.no-analyser .ai-recording-waveform span:nth-child(3n+2) { animation-delay: 0.15s; }
.ai-agent-recording-bar.is-processing .ai-recording-waveform span:nth-child(3n),
.ai-agent-recording-bar.no-analyser .ai-recording-waveform span:nth-child(3n)   { animation-delay: 0.3s; }

/* در حال پردازش، نقطه‌ی «ضبط» دیگر معنایی ندارد. */
.ai-agent-recording-bar.is-processing .ai-recording-dot {
    background: var(--ai-agent-theme-color, #2563eb);
}

@keyframes ai-recording-wave {
    0%, 100% { height: 20%; }
    50% { height: 80%; }
}

/* متن «در حال ضبط صدا...» */
/*
برچسب وضعیت («در حال ضبط…»، «در حال تبدیل به متن…») دیده نمی‌شود ولی
حذف هم نشده: نقطه‌ی قرمز و موج صدا خودشان می‌گویند چه خبر است و متن فقط
جای میله‌ها را می‌گرفت، اما کسی که با صفحه‌خوان کار می‌کند هیچ‌کدام از
آن دو را نمی‌بیند. پس از جریان چیدمان بیرون می‌رود تا موج تمام عرض نوار
را بگیرد، و همچنان خوانده می‌شود.
*/
.ai-recording-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* شمارنده‌ی زمان ضبط (mm:ss) */
.ai-recording-timer {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ef4444;
    direction: ltr;
    unicode-bidi: isolate;
}

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

/*
   حالت «در حال پردازش نهایی...» — بعد از کلیک روی توقف تا رسیدنِ
   نتیجه‌ی واقعیِ سرویس. موج صدا از حرکت می‌ایستد و نقطه‌ی قرمز
   کمی کندتر و کم‌رنگ‌تر پالس می‌زند تا حس «صبر کن، در حال تکمیل
   شدن است» منتقل شود (نه اینکه هنوز در حال ضبط صداست).
*/
.ai-agent-recording-bar.is-processing .ai-recording-waveform span {
    animation: none;
    height: 4px;
    opacity: 0.5;
}

.ai-agent-recording-bar.is-processing .ai-recording-dot {
    animation-duration: 2s;
    opacity: 0.5;
}

.ai-agent-recording-bar.is-processing .ai-recording-timer {
    opacity: 0.6;
}

/* روی موبایل، ارتفاع نوار ضبط با ارتفاع بزرگ‌تر textarea هماهنگ می‌شود */
@media (max-width: 768px) {
    .ai-agent-recording-bar {
        height: 44px;
    }
}

/* ============================================
   ناحیه پیش‌نمایش عکس‌های انتخاب‌شده (بالای فوتر)
   ============================================ */
#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;
        max-width: 100vw !important;

        /* ارتفاع: سه لایه به ترتیب اولویت (آخری در صورت پشتیبانی مرورگر برنده می‌شود)
           ۱) 100vh: fallback برای مرورگرهای خیلی قدیمی
           ۲) 100dvh: ارتفاع پویای واقعی ویوپورت — با ظاهر/پنهان شدن نوار سافاری هماهنگ می‌شود
           ۳) calc(--ai-agent-vh): محاسبه‌ی دقیق توسط JS از طریق visualViewport،
              برای پوشش رفتار سافاری هنگام باز شدن کیبورد و لحظه‌ی اول لود صفحه */
        height: 100vh !important;
        height: 100dvh !important;
        height: calc(var(--ai-agent-vh, 1vh) * 100) !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        max-height: calc(var(--ai-agent-vh, 1vh) * 100) !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;
    }

    /*
    دکمه‌های کامپوزر (به‌خصوص ارسال) روی ۳۴px با margin-bottom: 3px
    برای ارتفاع تک‌خطیِ دسکتاپ (~۴۱px) کالیبره شده‌اند (نگاه کنید به
    قانون اصلی #ai-agent-send و توضیح کنارش). این‌جا که تکست‌اریا به
    ۴۴px می‌رسد، همان فاصله‌ی ۳px دیگر دکمه را وسط نمی‌گذارد — دکمه
    نسبت به فیلد کمی پایین‌تر می‌نشیند. با تفاضل ۱۰px (۴۴ منهای ۳۴)،
    نصفش ۵px است.
    */
    #ai-agent-attach,
    #ai-agent-voice,
    #ai-agent-send {
        margin-bottom: 5px;
    }

    /* دکمه‌های هدر: نواحی لمسی بزرگ‌تر */
    #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;
    }
}

/*
==========================================================================
Widget refinements — 1.1.0
==========================================================================
*/

/*
Message text was 13.5px at weight 400 on a tinted bubble, which reads thin and
low-contrast on a phone in daylight. A slightly larger size with a medium
weight is legible without changing the bubble geometry.
*/
.user-message,
.ai-message,
.admin-message {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: -0.1px;
}

.ai-message {
    /* Darker than the previous #1e293b: the assistant bubble is white, so its
       text carries the whole contrast burden. */
    color: #111827;
}

/*
==========================================================================
بازطراحی — لایه‌ی نهایی

این بلوک عمداً انتهای فایل است تا قواعد قدیمی‌تر بالاتر را بازنویسی کند
بدون این‌که هزار خط پیش از خودش دست بخورد.
==========================================================================
*/

/* ---- فوتر و فیلد نوشتن ---- */
#ai-agent-footer {
    flex-shrink: 0;
    padding: 8px 12px 12px;
    background: var(--ai-chat-bg);
    border-top: 0;
}

/*
کل ردیفِ نوشتن یک کارت است، مثل کامپوزر کلاد: فیلد متن و دکمه‌ها داخل
یک سطح گرد می‌نشینند، نه سه المان جدا که هرکدام مرز خودشان را دارند.
*/
.ai-agent-footer-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 22px;
    padding: 6px;
}

.ai-agent-footer-row:focus-within {
    border-color: rgba(var(--ai-agent-theme-color-rgb), 0.55);
}

/* امضای کوچک دانیچَت زیر کامپوزر — معرفی، نه تبلیغ. */
#ai-agent-footer-credit {
    margin: 8px 0 0;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ai-text-faint);
}

#ai-agent-footer-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#ai-agent-footer-credit a:hover {
    color: var(--ai-agent-theme-color);
}

#ai-agent-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--ai-text) !important;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.7;
    padding: 8px 6px;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: none;
    direction: rtl;
}

#ai-agent-input::-webkit-scrollbar { display: none; }

#ai-agent-input::placeholder {
    color: var(--ai-text-faint);
    font-weight: 500;
}

/* سه دکمه‌ی کامپوزر: دایره‌ای و هم‌اندازه */
#ai-agent-attach,
#ai-agent-voice,
#ai-agent-send {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    /*
    ردیف با flex-end چیده شده تا وقتی متن چندخطی شد دکمه‌ها پایین بمانند،
    نه اینکه وسط یک فیلد بلند شناور شوند. اما تکست‌اریا در حالت تک‌خطی
    حدود ۴۱ پیکسل است و دکمه ۳۴؛ نتیجه این بود که دایره‌ها نسبت به متن
    پایین‌تر می‌نشستند. این فاصله همان اختلاف را نصف می‌کند تا در حالت
    عادی — که کاربر بیشترِ وقت می‌بیند — دقیقاً وسط باشند.
    */
    margin-bottom: 3px;
}

#ai-agent-attach,
#ai-agent-voice {
    background: var(--ai-surface-2);
    color: var(--ai-text-soft);
}

#ai-agent-attach:hover,
#ai-agent-voice:hover {
    color: var(--ai-text);
}

#ai-agent-attach svg,
#ai-agent-voice svg,
#ai-agent-send svg {
    width: 17px;
    height: 17px;
    display: block;
}

/*
دکمه‌ی ارسالِ فعال: دایره‌ی تیره با پیکان سفید.

رنگ برند نیست، و این عمدی است. رنگ برند را صاحب سایت انتخاب می‌کند و
می‌تواند هر چیزی باشد — از جمله رنگی روشن که روی فوترِ روشن گم می‌شود.
دکمه‌ی ارسال تنها کنترلی است که کاربر باید بی‌مکث پیدایش کند، پس رنگش
از متنِ همان تم می‌آید: در حالت روشن تقریباً مشکی، در حالت تاریک روشن —
یعنی همیشه بیشترین کنتراست را با زمینه‌اش دارد، هر رنگ برندی که انتخاب
شده باشد.
*/
#ai-agent-send {
    background: var(--ai-text);
    color: var(--ai-surface);
}

#ai-agent-send:hover {
    filter: brightness(1.35);
}

#ai-agent[data-theme="dark"] #ai-agent-send:hover {
    filter: brightness(0.88);
}

/*
دکمه‌ی ارسالِ خالی محو می‌شود ولی سر جایش می‌ماند. حذفش باعث می‌شد
ردیف با هر کاراکتر تایپ‌شده جابه‌جا شود.
*/
#ai-agent-send.is-empty {
    background: var(--ai-surface-2);
    color: var(--ai-text-faint);
    cursor: default;
    pointer-events: none;
}

#ai-agent-attach .ai-attach-badge {
    position: absolute;
    top: -3px;
    left: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ai-agent-theme-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: none;
}

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

/*
==========================================================================
صفحه‌ی شروع

به‌جای «چطور می‌تونم کمکتون کنم؟» — جمله‌ای که کاربر را جلوی یک فیلد
خالی تنها می‌گذاشت — چند پیشنهاد قابل کلیک از روی داده‌های خود مدیر.
==========================================================================
*/
.ai-agent-intro {
    margin: auto 0;
    padding: 8px 4px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ai-agent-intro-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ai-text);
    line-height: 1.7;
    max-width: 20rem;
}

/*
سؤال‌های پیشنهادی زیر جمله‌ی شروع: لینک‌های ریز، نه دکمه‌های کادردار —
همان‌قدر قابل‌کلیک، بدون اینکه صفحه‌ی شروع را شلوغ کنند.
*/
.ai-agent-intro-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 20rem;
}

.ai-agent-intro-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-text);
    text-decoration: none;
    line-height: 1.6;
}

.ai-agent-intro-link:hover {
    color: var(--ai-agent-theme-color);
    text-decoration: none;
}

/*
==========================================================================
تراشه‌ها — هم برای پیشنهادهای شروع، هم برای ادامه‌ی گفت‌وگو
==========================================================================
*/
.ai-agent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: right;
    justify-content: space-between;
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    color: var(--ai-text);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    font-family: inherit;
}

.ai-agent-chip:hover {
    border-color: rgba(var(--ai-agent-theme-color-rgb), 0.6);
    background: var(--ai-surface-2);
}

.ai-agent-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--ai-text-faint);
}

/* پیشنهادهای ادامه — بالای کامپوزر، جمع‌وجورتر و در یک ردیف افقی */
.ai-agent-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 8px;
}

.ai-agent-suggestions .ai-agent-chip {
    width: auto;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
}

/*
==========================================================================
دکمه‌های تماس (دیپ‌لینک)

زیر پاسخی که درباره‌ی راه‌های ارتباطی حرف زده. خواندن یک شماره از متن
و تایپ کردنش در گوشی کاری است که کاربر نباید انجام دهد.
==========================================================================
*/
.ai-agent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.ai-agent-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--ai-agent-theme-color-rgb), 0.12);
    border: 1px solid rgba(var(--ai-agent-theme-color-rgb), 0.35);
    color: var(--ai-agent-theme-color);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}

.ai-agent-action:hover {
    background: rgba(var(--ai-agent-theme-color-rgb), 0.2);
}

.ai-agent-action svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/*
==========================================================================
نشانگر «در حال فکر کردن»

سه نقطه‌ی جهنده جای خود را به یک برچسبِ متنی با نبض ملایم داده — همان
کاری که کلاد می‌کند. نقطه‌ها می‌گفتند «چیزی دارد تایپ می‌شود» در حالی
که مدل ممکن است چند ثانیه در حال جست‌وجو در محتوای سایت باشد و هنوز
یک کلمه هم ننوشته باشد.
==========================================================================
*/
.ai-agent-thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ai-text-faint);
    font-size: 13.5px;
    font-weight: 600;
}

.ai-agent-thinking-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ai-agent-theme-color);
    animation: ai-agent-thinking-pulse 1.4s ease-in-out infinite;
}

.ai-agent-thinking-label {
    animation: ai-agent-thinking-fade 1.8s ease-in-out infinite;
}

@keyframes ai-agent-thinking-pulse {
    0%, 100% { transform: scale(0.7); opacity: 0.45; }
    50%      { transform: scale(1);   opacity: 1; }
}

@keyframes ai-agent-thinking-fade {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-agent-thinking-dot,
    .ai-agent-thinking-label {
        animation: none;
    }
}

/*
==========================================================================
کشوی گفت‌وگوهای پیشین

روی خود پنجره باز می‌شود، نه کنارش: در موبایل پنجره تمام‌صفحه است و
ستون دومی وجود ندارد.
==========================================================================
*/
.ai-agent-drawer {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--ai-chat-bg);
    display: flex;
    flex-direction: column;
}

.ai-agent-drawer[hidden] {
    display: none;
}

.ai-agent-drawer-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ai-agent-theme-color);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
}

.ai-agent-drawer-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: none;
}

.ai-agent-drawer-list::-webkit-scrollbar { display: none; }

.ai-agent-drawer-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    text-align: right;
    width: 100%;
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    padding: 11px 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ai-text);
}

.ai-agent-drawer-item:hover {
    border-color: rgba(var(--ai-agent-theme-color-rgb), 0.6);
}

.ai-agent-drawer-item.is-current {
    border-color: var(--ai-agent-theme-color);
    background: rgba(var(--ai-agent-theme-color-rgb), 0.08);
}

.ai-agent-drawer-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.7;
}

.ai-agent-drawer-meta {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ai-text-faint);
}

.ai-agent-drawer-empty {
    text-align: center;
    color: var(--ai-text-faint);
    font-size: 13px;
    font-weight: 500;
    padding: 32px 12px;
    line-height: 2;
}

/*
==========================================================================
گالری عکس‌های پیوست — پیش‌نمایش کامپوزر
==========================================================================
*/
#ai-agent-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 8px;
}

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

.ai-attach-thumb {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ai-border);
    background: var(--ai-surface-2);
}

.ai-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-attach-thumb-remove {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* گالری عکس داخل حباب کاربر */
.user-message-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 8px;
    border-radius: 12px;
    overflow: hidden;
}

.user-message-gallery:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.user-message-gallery .user-gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ai-surface-2);
    cursor: zoom-in;
}

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

/* ---- موبایل: پنجره تمام‌صفحه ---- */
@media (max-width: 768px) {
    #ai-agent-window {
        border-radius: 0;
        border: 0;
    }

    .ai-agent-intro-title { font-size: 16px; }
}

/* ----------------------------------------------------------------------
   انتقال گفت‌وگو به تلگرام یا بله

   دیالوگ روی خودِ پنجره‌ی چت باز می‌شود، نه روی صفحه‌ی سایت میزبان: ویجت
   ممکن است هر جای صفحه باشد و یک لایه‌ی تمام‌صفحه روی سایت مشتری، چیزی
   است که هیچ‌کس از یک ویجت پشتیبانی انتظار ندارد.
   ---------------------------------------------------------------------- */

.ai-agent-modal {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.35);
}

.ai-agent-modal[hidden] { display: none; }

.ai-agent-modal-card {
    width: 100%;
    max-width: 340px;
    background: var(--ai-surface);
    color: var(--ai-text);
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.ai-agent-modal-card h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.ai-agent-modal-card p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 2;
    color: var(--ai-text-soft);
}

.ai-agent-transfer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.ai-agent-transfer-option {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--ai-border);
    border-radius: 10px;
    background: var(--ai-surface-2);
    color: var(--ai-text);
    font-size: 13px;
    text-decoration: none;
    text-align: center;
}

.ai-agent-transfer-option:hover {
    border-color: var(--ai-agent-theme-color);
    color: var(--ai-agent-theme-color);
}

.ai-agent-modal-actions {
    display: flex;
    gap: 8px;
}

.ai-agent-modal-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--ai-border);
    background: transparent;
    color: var(--ai-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ai-agent-modal-btn.is-primary {
    background: var(--ai-agent-theme-color);
    border-color: var(--ai-agent-theme-color);
    color: #fff;
}

.ai-agent-modal-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/*
جای فیلد پیام بعد از انتقال. هم‌ارتفاع با ردیف ورودی است تا پنجره
هنگام جابه‌جایی نپرد.
*/
.ai-agent-transferred-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px dashed var(--ai-border);
    border-radius: 14px;
    background: var(--ai-surface-2);
    color: var(--ai-text-soft);
    font-size: 12.5px;
    line-height: 1.9;
}

.ai-agent-transferred-bar[hidden] { display: none; }

/*
هنگام ضبط، فیلد متن پنهان می‌شود و نوار ضبط جایش را می‌گیرد.

با صفتِ hidden انجام می‌شود و نه یک کلاس، چون همان صفت برای صفحه‌خوان‌ها
هم معنا دارد: فیلدی که دیده نمی‌شود نباید در ترتیب فوکوس هم بماند. این
قانون فقط برای صراحت است — مرورگر خودش hidden را display:none می‌گیرد،
ولی هر قانون display بعدی می‌توانست بی‌سروصدا خنثی‌اش کند.
*/
#ai-agent-input[hidden] {
    display: none !important;
}

/*
نشان بله در هدر چت و در دیالوگ انتقال.

دکمه‌ی هدر یک SVG رنگی است نه آیکون تک‌رنگ، پس برخلاف بقیه‌ی آیکون‌های
هدر رنگش را از currentColor نمی‌گیرد و همان نشانِ خودِ بله می‌ماند —
هدفش هم همین است: کاربر باید از روی دکمه بفهمد قرار است کجا برود.
*/
#ai-agent-transfer img {
    width: 19px;
    height: 19px;
    display: block;
    pointer-events: none;
}

.ai-agent-bale-mark {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    margin-inline-end: 6px;
}

.ai-agent-modal-card h3 {
    display: flex;
    align-items: center;
}

/*
کد شش‌رقمی ادامه‌ی گفت‌وگو در بله، داخل حباب پاسخ دستیار.

چرا ظاهر جدا دارد: این عدد تنها چیزی است که کاربر باید از این
پنجره با خودش ببرد و در ربات وارد کند؛ وسط یک پاراگراف گم شدنش
یعنی یک مشتری از دست رفته. حاشیه‌چین و ارقام درشت و فاصله‌دار،
کد را شبیه همان چیزی می‌کند که در پیام‌رسان‌ها هم دیده است.
*/
.ai-agent-transfer-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px dashed var(--ai-border);
    border-radius: 10px;
    background: var(--ai-surface-2);
}

.ai-agent-transfer-code span {
    font-size: 12px;
    color: var(--ai-text-soft);
}

.ai-agent-transfer-code strong {
    font-size: 20px;
    letter-spacing: 0.35em;
    color: var(--ai-text);
    font-weight: 700;
}

/* دکمه‌ی «رفتن به ربات» بعد از کد، فاصله‌ی بالایش از کد جدا می‌شود. */
.ai-message-body .ai-agent-transfer-option {
    margin-top: 4px;
}

/*
==========================================================================
سؤال‌های پیشنهادی شروع گفت‌وگو (starter_questions)

صفحه‌ی شروع ویجت — بارگذاری اولیه و چت‌های جدید. سؤال‌ها در پنل
دانیچَت تعریف می‌شوند و به‌جای پیام خوش‌آمدگویی (وقتی وجود دارند)
نمایش داده می‌شوند. قالب پایه‌ی .ai-agent-intro / .ai-agent-intro-link
از قبل برای همین صفحه طراحی شده بود؛ این‌جا فقط حالت دکمه‌ایِ لینک‌ها
و آیکون فلش کامل می‌شود: لینک‌های ریز قابل‌کلیک، نه دکمه‌های کادردار.
==========================================================================
*/
.ai-agent-intro-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: right;
    background: var(--ai-surface);
    border: 1px solid var(--ai-border);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ai-text);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

.ai-agent-intro-link:hover {
    background: var(--ai-surface-2);
    border-color: rgba(var(--ai-agent-theme-color-rgb), 0.55);
    color: var(--ai-agent-theme-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--ai-agent-theme-color-rgb), 0.12);
}

.ai-agent-intro-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.05);
}

.ai-agent-intro-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--ai-text-faint);
    transition: color 0.2s ease, transform 0.2s ease;
}

.ai-agent-intro-link:hover svg {
    color: var(--ai-agent-theme-color);
    transform: translateX(-2px);
}

.ai-agent-intro-link:focus-visible {
    outline: 2px solid rgba(var(--ai-agent-theme-color-rgb), 0.45);
    outline-offset: 2px;
}

/*
==========================================================================
دکمه‌ی «تبدیل متن به ویس» (TTS)

زیر پیام‌های مدل و کارشناس می‌نشیند — ولی فقط وقتی سرویس TTS سایت در
پنل دانیچَت فعال باشد (tts_enabled)؛ در غیر این صورت هیچ ردیفی از
اصلی ساخته نمی‌شود. آیکون خاکستریِ کم‌جان است تا با متن رقابت نکند و
فقط با هاور زنده شود؛ برچسب «تبدیل متن به ویس» را title خود دکمه
نشان می‌دهد.
==========================================================================
*/
.ai-agent-tts-row {
    display: flex;
    justify-content: flex-start;
    line-height: 0;
}

/* داخل حباب کارشناس، فاصله‌ی بالا از متن پیام جدا می‌شود */
.admin-message .ai-agent-tts-row {
    margin-top: 8px;
}

.ai-agent-tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ai-text-faint);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ai-agent-tts-btn:hover {
    background: var(--ai-surface-2);
    color: var(--ai-agent-theme-color);
}

.ai-agent-tts-btn:focus-visible {
    outline: 2px solid rgba(var(--ai-agent-theme-color-rgb), 0.45);
    outline-offset: 1px;
}

.ai-agent-tts-btn svg {
    width: 15px;
    height: 15px;
}

/* در حال سنتز: کلیک‌های تازه بی‌اثرند و آیکون حالت لودینگ می‌گیرد */
.ai-agent-tts-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
    color: var(--ai-agent-theme-color);
    background: rgba(var(--ai-agent-theme-color-rgb), 0.10);
}

/*
انیمیشن مدرن برای حالت لودینگ: به‌جای چرخش، سه میله‌ی موج صوتی
پشت سر هم پالس می‌زنند. روی آیکون بلندگو اعمال می‌شود، ولی چون
بلندگو یک SVG ثابت است، با opacity و scale یک «نفس کشیدن» ظریف
ساخته می‌شود تا کاربر بفهمد در حال پردازش است، بدون اینکه چیزی
بچرخد.
*/
.ai-agent-tts-btn.is-loading svg {
    animation: ai-agent-tts-breathe 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ai-agent-tts-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* یک هاله‌ی لطیف و در حال اتساع هم زیر دکمه می‌نشیند */
.ai-agent-tts-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(var(--ai-agent-theme-color-rgb), 0.18);
    animation: ai-agent-tts-ring 1.6s ease-out infinite;
    pointer-events: none;
}

@keyframes ai-agent-tts-ring {
    0%   { transform: scale(0.85); opacity: 0.55; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* در حال پخش: رنگ برند + هاله‌ی لطیف؛ کلیک دوباره صدا را قطع می‌کند */
.ai-agent-tts-btn.is-playing {
    color: var(--ai-agent-theme-color);
    background: rgba(var(--ai-agent-theme-color-rgb), 0.10);
}

.ai-agent-tts-btn.is-playing svg {
    animation: ai-agent-tts-pulse 1.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ai-agent-tts-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.ai-agent-tts-btn.is-playing::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ai-agent-theme-color-rgb), 0.45);
    animation: ai-agent-tts-pulse-ring 1.4s ease-out infinite;
    pointer-events: none;
}

@keyframes ai-agent-tts-pulse-ring {
    0%   { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.45); opacity: 0; }
}