/* ویجت چت هوشمند PMworks — طبق docs/widget-design.md (اندازه از رای‌چت، رنگ/فونت از برند سایت) */
#pmwchat-root {
--pmwchat-primary: #0766CB;
--pmwchat-accent: #13A37F;
--pmwchat-text: #444444;
--pmwchat-text-secondary: #666666;
--pmwchat-border: #dfdfdf;
--pmwchat-bg-subtle: #fafafa;
--pmwchat-surface: #ffffff;
--pmwchat-on-primary: #ffffff;
--pmwchat-offset-x: 24px;
--pmwchat-offset-y: 24px;
position: fixed;
z-index: 2147483000;
font-family: parastoo-fd, parastoo-bold-fd, Helvetica, Arial, sans-serif;
direction: rtl;
}
/* D-43 (باگ واقعی روی cmms.ir): ویجت Shadow DOM ندارد، پس بدون این ریست، CSS
خودِ قالب سایت (مثلاً استایل پیش‌فرض دکمه/اینپوت Enfold) روی عناصر ما هم اثر
می‌گذارد — دقیقاً همان چیزی که «دکمه‌ی ارسال خیلی بزرگ‌تر از باکس متن» را
ایجاد کرد. این بلوک همه‌چیز را از صفر و مستقل از استایل قالب می‌سازد.
D-50 (باگ واقعی روی سایت زنده cmms.ir — بعد از D-43 هم برگشت): بررسی مستقیم
روی خودِ production نشان داد قانون قالب Enfold دقیقاً همین است:
«#top input[type="text"], ...» — یعنی specificity آن (۱ ID + ۱ attribute + ۱ type)
از یک ID تنها مثل #pmwchat-input (۱ ID) *بالاتر* است، چون در تای دوم (attribute/class)
قالب عدد ۱ دارد و ما عدد ۰. یک ID به‌تنهایی هرگز تضمین‌کننده‌ی برد نیست. راه‌حل
قطعی و بدون‌ابهام برای ویجتی که در صفحه‌ی میزبان بدون Shadow DOM تزریق می‌شود:
!important روی خواص جعبه‌ای (box-model) حیاتی. */
#pmwchat-root, #pmwchat-root * {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
font-family: inherit;
line-height: normal;
text-align: right;
-webkit-appearance: none;
appearance: none;
background-image: none;
box-shadow: none;
text-transform: none;
letter-spacing: normal;
}
#pmwchat-root button {
font-size: inherit;
cursor: pointer;
}
#pmwchat-root.pmwchat-pos-bottom-right { bottom: var(--pmwchat-offset-y); right: var(--pmwchat-offset-x); }
#pmwchat-root.pmwchat-pos-bottom-left { bottom: var(--pmwchat-offset-y); left: var(--pmwchat-offset-x); }
#pmwchat-root.pmwchat-pos-top-right { top: var(--pmwchat-offset-y); right: var(--pmwchat-offset-x); }
#pmwchat-root.pmwchat-pos-top-left { top: var(--pmwchat-offset-y); left: var(--pmwchat-offset-x); }
/* دکمه‌ی شناور */
/* D-73/D-75 (باگ واقعی گزارش‌شده): قبلاً جعبه‌ی کلیک‌پذیر ۱۰۰×۱۰۰px بود در حالی‌که
دایره‌ی رنگی قابل‌مشاهده (::before پایین) فقط ۵۵×۵۵px است — یعنی حدود ۲۲px در
هر طرف دایره، ناحیه‌ی نامرئی ولی کلیک‌پذیر وجود داشت (کارفرما با کلیک روی فاصله‌ی
سفید اطراف آیکون هم چت‌باکس باز می‌شد را گزارش داد؛ با اندازه‌گیری مستقیم
getBoundingClientRect() روی production تأیید شد: launcher=100×100، دایره=۵۵×۵۵).
حالا جعبه فقط ۴px در هر طرف بزرگ‌تر از دایره است — همان منطق margin منفی
(برای اینکه اندازه‌ی واقعی در چیدمان صفحه هنوز با دایره یکی بماند)، فقط با
عدد معقول به‌جای بیش‌ازحد بزرگ. */
#pmwchat-launcher {
width: 63px;
height: 63px;
margin: -4px !important;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
#pmwchat-launcher::before {
content: "";
position: absolute;
width: 55px;
height: 55px;
border-radius: 16px;
background: var(--pmwchat-primary);
box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
}
#pmwchat-launcher svg {
position: relative;
color: var(--pmwchat-on-primary);
}
/* پنجره‌ی چت */
#pmwchat-panel {
position: absolute;
bottom: 76px;
right: 0;
width: 375px;
max-width: calc(100vw - 32px);
height: 714px;
max-height: min(714px, 80vh);
background: var(--pmwchat-surface);
border-radius: 14px;
box-shadow: 0 5px 40px rgba(0,0,0,.16);
display: flex;
flex-direction: column;
overflow: hidden;
transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}
#pmwchat-root.pmwchat-pos-bottom-left #pmwchat-panel,
#pmwchat-root.pmwchat-pos-top-left #pmwchat-panel { right: auto; left: 0; }
#pmwchat-root.pmwchat-pos-top-right #pmwchat-panel,
#pmwchat-root.pmwchat-pos-top-left #pmwchat-panel { bottom: auto; top: 76px; }
.pmwchat-hidden { display: none !important; }
/* D-43: انیمیشن با keyframe خالص CSS (نه فقط transition+حذف کلاس با JS) — چون
requestAnimationFrame در تب پس‌زمینه/غیرفعال گاهی اصلاً اجرا نمی‌شود و پنل با
حالت قبلی (فقط transition) برای همیشه opacity:0 و نامرئی می‌ماند. با animation +
forwards، نمایان‌شدن به‌طور کامل توسط خودِ مرورگر تضمین می‌شود، مستقل از JS. */
#pmwchat-panel.pmwchat-opening {
animation: pmwchat-fade-in .25s ease-in-out forwards;
}
@keyframes pmwchat-fade-in {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* D-59 (باگ واقعی روی موبایل cmms.ir، ریشه‌ی همان چیزی که به‌نظر D-58 می‌رسید):
ریست عمومی خط ۳۲ («#pmwchat-root, #pmwchat-root * { padding:0 !important }»)
بی‌سروصدا padding/margin هرجایی که خودمان هم عمداً گذاشته بودیم را صفر
می‌کرد — چون یک قانون بدون !important هرگز نمی‌تواند قانون !important دیگری
را (حتی اگر بعداً در فایل بیاید) خنثی کند. هدر، ناحیه‌ی پیام‌ها، حباب‌های
پیام، ردیف ورودی و کارت فرم لید همه از این باگ رنج می‌بردند — این دقیقاً
همان «ناهماهنگی فاصله‌گذاری» است که کارفرما بارها گزارش داد. تأیید اولیه‌ی
ظاهری من (D-54) با CSS تزریق‌شده‌ی دستی بود که خودش !important داشت، پس این
باگ را نمی‌دید. از این پس هر padding/margin عمدی باید صریحاً !important
بگیرد، وگرنه در برابر ریست عمومی خودمان هم بازنده است. */
#pmwchat-header {
height: 64px;
padding: 14px 12px !important;
background: var(--pmwchat-primary);
color: var(--pmwchat-on-primary);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
/* D-58 (باگ واقعی روی موبایل cmms.ir): #pmwchat-header-info به‌عنوان فرزند فلکس
هیچ محدودیت عرضی نداشت، پس با نام کارمند بلند (مثلاً «مسعود مددی») از عرض
واقعی هدر در صفحه‌ی باریک موبایل بیرون می‌زد و بریده می‌شد. min-width:0 اجازه
می‌دهد فرزند فلکس واقعاً کوچک‌تر از محتوای طبیعی‌اش شود؛ ellipsis هم به‌جای
بریدگی خام، سه‌نقطه‌ی تمیز نشان می‌دهد. */
#pmwchat-header-info { min-width: 0; overflow: hidden; }
#pmwchat-header-title, #pmwchat-header-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pmwchat-header-title { display: block; font-size: 16px; font-weight: 700; }
#pmwchat-header-subtitle { display: block; font-size: 12px; opacity: .85; }
#pmwchat-close { background: transparent; border: none; color: var(--pmwchat-on-primary); font-size: 16px; cursor: pointer; flex-shrink: 0; }
#pmwchat-messages {
flex: 1;
overflow-y: auto;
padding: 16px 12px !important;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* D-60 (بازخورد کارفرما: متن داخل حباب‌های پیام با کادر دورش نزدیک است): فاصله‌ی
داخلی از ۱۰px۱۴px به ۱۲px۱۶px افزایش یافت تا متن نفس بکشد، نه به لبه‌ی حباب بچسبد.
D-62 (همان درسِ D-59 دوباره، این‌بار روی خودِ production دیده شد با ابزار واقعی):
«.pmwchat-msg» یک کلاس است (specificity ۰,۱,۰)؛ ریست عمومی «#pmwchat-root *»
یک ID است (۱,۰,۰) — و ID همیشه از کلاس جلوتر است، صرف‌نظر از اینکه کدام‌یک
!important دارد یا کدام بعداً در فایل آمده. یعنی padding:0 ریست همیشه از
padding:12px16px این کلاس برنده می‌شد، حتی با !important. با اضافه‌کردن پیشوند
#pmwchat-root، specificity این قانون به (۱,۱,۰) رسید — از ریست عمومی جلوتر. */
#pmwchat-root .pmwchat-msg { max-width: 85%; line-height: 1.6; font-size: 14px; padding: 12px 16px !important; border-radius: 14px; white-space: pre-wrap; }
.pmwchat-msg-assistant { align-self: flex-start; background: var(--pmwchat-bg-subtle); color: var(--pmwchat-text); border: 1px solid var(--pmwchat-border); }
.pmwchat-msg-user { align-self: flex-end; background: var(--pmwchat-primary); color: var(--pmwchat-on-primary); }
.pmwchat-msg-error { align-self: center; color: #b3261e; font-size: 13px; }
/* D-65: برچسب فرستنده‌ی پیام — کارفرما گفت رنگ/چینش حباب به‌تنهایی کافی نیست. */
#pmwchat-root .pmwchat-msg-label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 4px !important; opacity: .75; }
.pmwchat-msg-user .pmwchat-msg-label { color: var(--pmwchat-on-primary); }
.pmwchat-msg-assistant .pmwchat-msg-label { color: var(--pmwchat-primary); }
/* D-66: دکمه‌ی واقعی «تکمیل اطلاعات تماس» — به‌جای باز شدن خودکار فرم، کاربر
خودش با کلیک، وقتی آماده است، فرم را باز می‌کند. */
#pmwchat-root .pmwchat-lead-cta {
align-self: flex-start;
background: var(--pmwchat-surface) !important;
color: var(--pmwchat-primary) !important;
border: 1.5px dashed var(--pmwchat-primary) !important;
border-radius: 20px !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 700;
cursor: pointer;
}
#pmwchat-root .pmwchat-lead-cta:hover { background: var(--pmwchat-bg-subtle) !important; }
/* D-67: لینک پیشنهادی مستقل به محتوای واقعی سایت — یک المان کلیک‌پذیر جدا زیر
پیام، نه فقط متن. آبی توپر (نه نقطه‌چین مثل CTA فرم) تا با آن اشتباه نشود. */
#pmwchat-root .pmwchat-suggested-link {
align-self: flex-start;
display: block;
background: var(--pmwchat-bg-subtle) !important;
color: var(--pmwchat-primary) !important;
border: 1px solid var(--pmwchat-border) !important;
border-radius: 10px !important;
padding: 8px 14px !important;
font-size: 13px !important;
text-decoration: none;
max-width: 85%;
}
#pmwchat-root .pmwchat-suggested-link:hover { text-decoration: underline; }
/* D-51 (رگرسیون خودم — از داخل همین D-50): «#pmwchat-lead-form» یک ID است، پس
display:flex !important روی آن از «.pmwchat-hidden { display:none !important }»
(یک کلاس، specificity پایین‌تر) قوی‌تر می‌شد — یعنی فرم لید حتی وقتی کلاس
pmwchat-hidden رویش بود، همیشه نمایان می‌ماند (همان چیزی که کارفرما در پیام
اول، بدون هیچ گفتگویی، دید). !important روی display/align-items فقط باید
مخصوص ردیف پیام باشد، نه خودِ فرم لید — فرم لید به این !important نیازی
نداشت، چون مشکل هم‌ارتفاعی مخصوص جفت اینپوت/دکمه‌ی همان یک ردیف بود. */
#pmwchat-input-row {
display: flex !important;
align-items: stretch !important;
gap: 8px;
padding: 12px !important;
border-top: 1px solid var(--pmwchat-border);
flex-shrink: 0;
}
/* D-69: طبق همان درسِ D-51 — چون #pmwchat-input-row با !important یک ID است،
.pmwchat-hidden به‌تنهایی (کلاس) نمی‌تواند مخفی‌اش کند؛ باید صریح و با
specificity بالاتر (ID+کلاس با هم) override شود، وگرنه فرم ورودی حتی با
کلاس مخفی هم نمایان می‌ماند — دقیقاً همان باگ فرم لید، این‌بار روی ردیف پیام. */
#pmwchat-input-row.pmwchat-hidden { display: none !important; }
/* D-54 (بازخورد کارفرما: «یک فرم معمولی بدون کادربندی مناسب یهو جلو طرح باز
می‌شود»): فرم لید حالا یک کارت جدا و واضح است — پس‌زمینه‌ی ملایم، حاشیه‌ی
کامل، گوشه‌ی گرد، و فاصله از لبه‌های پنل — نه یک ردیف معمولی چسبیده به بالا. */
#pmwchat-lead-form {
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px !important;
padding: 16px !important;
background: var(--pmwchat-bg-subtle);
border: 1px solid var(--pmwchat-border);
border-radius: 14px;
flex-shrink: 0;
}
#pmwchat-lead-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pmwchat-text-secondary); }
/* D-50 (باگ واقعی روی سایت زنده cmms.ir، بعد از D-43 هم برگشت): دو علت جدا:
(۱) padding/border/font-size اینجا !important دارند چون قانون‌های عمومی فرم
قالب سایت (مثلاً «#top input[type="text"]» در Enfold) specificity بالاتری از
یک ID تنها دارند و بدون !important همین‌ها را بی‌صدا override می‌کنند.
(۲) هم‌ارتفاع بودن دکمه‌ی ارسال و باکس ورودی را قبلاً به align-items:stretch
در فلکس‌باکس سپرده بودیم، ولی روی production واقعی معلوم شد (عنصر
جایگزین‌شونده با الگوریتم اندازه‌گیری خاص خودِ مرورگر) و