/* ============================================================
   چت زنده‌ی زیر جدول رده‌بندی — دکمه‌ی شناور + پاپ‌آپ شبیه پیام‌رسان.
   از همان متغیرهای رنگی fpp-* استفاده می‌کند تا با حالت روز/شب و
   شخصی‌سازی رنگ کارت‌ها هماهنگ بماند.
   ============================================================ */

.fpp-ranking-wrap{
    --fpp-chat-accent-1:#6C63FF;
    --fpp-chat-accent-2:#00D4AA;
    --fpp-chat-own-bg:linear-gradient(135deg,#6C63FF,#8B7CFF);
    --fpp-chat-own-text:#fff;
    --fpp-chat-other-bg:var(--fpp-surface);
    --fpp-chat-other-text:var(--fpp-text-strong);
    --fpp-chat-overlay:rgba(0,0,0,.05);
}

/* --- دکمه‌ی شناور زیر جدول --- */
.fpp-chat-launcher-wrap{margin-top:18px;display:flex;justify-content:center;}
.fpp-chat-launcher{
    position:relative;
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 22px;border:none;border-radius:999px;cursor:pointer;
    background:var(--fpp-chat-own-bg);color:#fff;font-weight:700;font-size:14.5px;
    box-shadow:0 8px 24px rgba(108,99,255,.35);
    transition:transform .15s ease,box-shadow .15s ease;
}
/* --- نشان تعداد پیام‌های نخوانده (قرمز) --- */
.fpp-chat-badge{
    position:absolute;top:-6px;left:-6px;
    min-width:20px;height:20px;padding:0 5px;border-radius:999px;
    background:#FF3B30;color:#fff;font-size:11px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px var(--fpp-modal-bg,#fff);
    line-height:1;
}
.fpp-chat-badge[hidden]{display:none;}
.fpp-chat-launcher:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(108,99,255,.45);}
.fpp-chat-launcher:active{transform:translateY(0);}
.fpp-chat-launcher-icon{font-size:18px;line-height:1;}
.fpp-live-dot{width:8px;height:8px;border-radius:50%;background:#00E68A;box-shadow:0 0 0 0 rgba(0,230,138,.6);animation:fpp-chat-pulse 1.8s infinite;}
@keyframes fpp-chat-pulse{
    0%{box-shadow:0 0 0 0 rgba(0,230,138,.6);}
    70%{box-shadow:0 0 0 8px rgba(0,230,138,0);}
    100%{box-shadow:0 0 0 0 rgba(0,230,138,0);}
}

/* --- پاپ‌آپ --- */
.fpp-chat-popup{
    /* نوار ناوبری ثابت پایین قالب (fpp-bottom-nav) با z-index:200000 روی صفحه
       می‌نشیند؛ چت باید همیشه بالاتر از آن باشد وگرنه نوار روی کادر تایپ
       می‌افتد و اجازه‌ی تایپ نمی‌دهد. */
    position:fixed;inset:0;z-index:999999;
    /* isolation:isolate یک بافت چیدمان (stacking context) جدید و سرتاسری
       برای پاپ‌آپ می‌سازد؛ بدون این، در برخی مرورگرهای دسکتاپ (به‌خصوص
       کروم/اج روی ویندوز) وقتی هدر سایت به‌خاطر backdrop-filter بافت
       چیدمان خودش را می‌سازد، لایه‌بندی GPU می‌تواند به‌اشتباه هدر را
       روی پاپ‌آپ چت (که z-index خیلی بالاتری دارد) نمایش دهد. isolate
       تضمین می‌کند این پاپ‌آپ همیشه در بالاترین لایه‌ی ممکن رندر شود. */
    isolation:isolate;
    display:flex;align-items:flex-end;justify-content:center;
    background:rgba(10,10,20,.45);backdrop-filter:blur(2px);
    padding:0;
    /* از پرش کشسانی (bounce) سافاری موقع کشیدن روی پس‌زمینه‌ی پاپ‌آپ جلوگیری می‌کند */
    overscroll-behavior:none;
}
/* علاوه بر بالاتر بودن z-index، خودِ نوار پایین را هم موقع باز بودن چت
   کاملاً مخفی می‌کنیم تا هیچ بخشی از آن روی کادر پیام یا لیست پیام‌ها نماند. */
body.fpp-chat-open .fpp-bottom-nav{display:none !important;}
.fpp-chat-popup[hidden]{display:none;}
.fpp-chat-panel{
    width:100%;max-width:420px;height:min(640px,92vh);
    margin:0 auto 0;
    background:var(--fpp-modal-bg,#fff);
    border-radius:20px 20px 0 0;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 -12px 40px rgba(0,0,0,.25);
    font-family:inherit;direction:rtl;
    animation:fpp-chat-slide-up .22s ease-out;
    overscroll-behavior:none;
}
@media (min-width:640px){
    .fpp-chat-popup{align-items:center;padding:20px;}
    .fpp-chat-panel{border-radius:20px;height:min(640px,86vh);}
}
@keyframes fpp-chat-slide-up{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.fpp-chat-header{
    display:flex;align-items:center;gap:8px;padding:14px 16px;
    background:var(--fpp-chat-own-bg);color:#fff;flex-shrink:0;
}
.fpp-chat-header-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;}
.fpp-chat-header .fpp-live-dot{background:#fff;}
.fpp-chat-header-note{margin-right:auto;font-size:11px;opacity:.85;font-weight:400;}
.fpp-chat-close{
    background:rgba(255,255,255,.18);border:none;color:#fff;width:28px;height:28px;
    border-radius:50%;cursor:pointer;font-size:14px;line-height:1;flex-shrink:0;
}
.fpp-chat-close:hover{background:rgba(255,255,255,.3);}

/* --- لیست پیام‌ها --- */
.fpp-chat-messages{
    flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:14px 12px;
    display:flex;flex-direction:column;gap:10px;
    background:var(--fpp-surface,#f4f5f7);
    /* اسکرول را کاملاً همین‌جا محدود می‌کند؛ با کشیدن تا ابتدا/انتهای لیست،
       دیگر صفحه‌ی پشتش پرش نمی‌خورد و چیزی جابه‌جا به‌نظر نمی‌رسد */
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* دکمه‌های پاسخ/حذف با position:absolute کمی بیرون از حباب پیام قرار می‌گیرند
       (left:-4px / right:-4px با translateX). چون overflow-y روی این عنصر auto است،
       مرورگر به‌صورت خودکار overflow-x را هم auto در نظر می‌گیرد و همین باعث می‌شد
       کل لیست پیام‌ها یک ناحیه‌ی اسکرول افقی پنهان داشته باشد؛ در نتیجه با کشیدن
       انگشت به چپ/راست، حباب‌ها و آواتارها جابه‌جا می‌شدند. overflow-x:hidden این
       اسکرول افقی پنهان را کاملاً می‌بندد و touch-action فقط اسکرول عمودی را
       به مرورگرهای موبایل اجازه می‌دهد. */
    touch-action:pan-y;
}
.fpp-chat-loading,.fpp-chat-empty{
    margin:auto;text-align:center;color:var(--fpp-text-muted);font-size:13.5px;padding:20px;
}

.fpp-chat-msg{
    display:flex;gap:8px;max-width:82%;align-items:flex-end;
    /* بدون این‌ها، سافاری آیفون با کشیدن روی حباب پیام یا آواتار، آن‌ها را
       با ژست بومی «درگ‌کردن عنصر» جابه‌جا می‌کند و از حالت طبیعی چیدمان
       خارج می‌شوند؛ چیزی که باعث می‌شود پیام‌ها «جابه‌جا» و «ناجفت» به‌نظر برسند. */
    -webkit-user-drag:none;user-drag:none;
    touch-action:pan-y;
}
.fpp-chat-msg.is-own{align-self:flex-start;flex-direction:row-reverse;}
.fpp-chat-msg.is-other{align-self:flex-end;}

.fpp-chat-avatar{
    position:relative;flex-shrink:0;width:44px;height:44px;border-radius:50%;overflow:hidden;display:block;
    -webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;
}
.fpp-chat-avatar img{
    width:44px;height:44px;border-radius:50%;display:block;object-fit:cover;
    -webkit-user-drag:none;user-drag:none;pointer-events:none;
}
/* بدجِ سطح کاربر روی گوشه‌ی عکس پروفایل در چت */
.fpp-chat-avatar-ring{flex-shrink:0;padding:3px;--fpp-avatar-badge-size:20px;}
.fpp-chat-avatar-ring .fpp-avatar-badge{inset-block-end:-2px;inset-inline-end:-2px;}
/* نشانگر آنلاین‌بودن دیگر روی خود عکس نیست؛ به‌صورت یک نقطه‌ی سبز
   ضربان‌دار کنار نام کاربر (داخل fpp-chat-name-row) نمایش داده می‌شود. */
.fpp-chat-name-row{display:inline-flex;align-items:center;gap:5px;min-width:0;}

/* --- نقطه‌ی آنلاین با ضربان (پالس) --- */
.fpp-online-dot{
    position:relative;display:inline-block;flex-shrink:0;
    width:7px;height:7px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#5CFFC0,#00E68A 70%);
    box-shadow:0 0 3px rgba(0,230,138,.8);
}
.fpp-online-dot::before{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    background:#00E68A;opacity:.5;
    animation:fppOnlinePulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes fppOnlinePulse{
    0%{transform:scale(.5);opacity:.55;}
    70%{transform:scale(1.8);opacity:0;}
    100%{transform:scale(1.8);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
    .fpp-online-dot::before{animation:none;opacity:0;}
}

.fpp-chat-bubble{
    position:relative;padding:8px 12px 7px;border-radius:14px;font-size:13.5px;line-height:1.6;
    background:var(--fpp-chat-other-bg);color:var(--fpp-chat-other-text);
    border:1px solid var(--fpp-surface-border);
    min-width:64px;
    -webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;
}
.fpp-chat-msg.is-own .fpp-chat-bubble{
    background:var(--fpp-chat-own-bg);color:var(--fpp-chat-own-text);border-color:transparent;
}
.fpp-chat-msg.is-own .fpp-chat-bubble .fpp-chat-name{color:rgba(255,255,255,.85);}
.fpp-chat-msg.is-own .fpp-chat-bubble .fpp-chat-time{color:rgba(255,255,255,.7);}

.fpp-chat-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.fpp-chat-name{font-weight:700;font-size:11.5px;color:var(--fpp-chat-accent-1);}
.fpp-chat-time{font-size:10px;color:var(--fpp-text-faint);margin-right:auto;}

.fpp-chat-text{word-break:break-word;white-space:pre-wrap;}

.fpp-chat-reply-ref{
    display:block;margin:2px 0 6px;padding:5px 8px;border-radius:8px;font-size:11.5px;
    background:var(--fpp-chat-overlay,rgba(0,0,0,.05));border-right:3px solid var(--fpp-chat-accent-1);cursor:pointer;
}
.fpp-chat-msg.is-own .fpp-chat-reply-ref{background:rgba(255,255,255,.15);border-right-color:#fff;}
.fpp-chat-reply-ref strong{display:block;color:var(--fpp-chat-accent-1);}
.fpp-chat-msg.is-own .fpp-chat-reply-ref strong{color:#fff;}
.fpp-chat-reply-ref span{display:block;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fpp-chat-reply-missing{opacity:.6;font-style:italic;}

.fpp-chat-reply-btn{
    position:absolute;top:6px;left:-4px;transform:translateX(-100%);
    background:var(--fpp-modal-bg,#fff);border:1px solid var(--fpp-surface-border);color:var(--fpp-text-muted);
    font-size:10.5px;padding:3px 7px;border-radius:8px;cursor:pointer;opacity:0;
    transition:opacity .15s ease;white-space:nowrap;
}
.fpp-chat-msg:hover .fpp-chat-reply-btn,.fpp-chat-reply-btn:focus{opacity:1;}
.fpp-chat-msg.is-own .fpp-chat-reply-btn{left:auto;right:-4px;transform:translateX(100%);}

/* --- دکمه‌ی حذف پیام (فقط برای مدیر) --- */
.fpp-chat-delete-btn{display:none;}
.fpp-chat-messages.is-admin-mode .fpp-chat-delete-btn{
    display:block;position:absolute;top:34px;left:-4px;transform:translateX(-100%);
    background:var(--fpp-modal-bg,#fff);border:1px solid rgba(255,59,48,.4);color:#FF3B30;
    font-size:10.5px;padding:3px 7px;border-radius:8px;cursor:pointer;opacity:0;
    transition:opacity .15s ease;white-space:nowrap;
}
.fpp-chat-messages.is-admin-mode .fpp-chat-msg:hover .fpp-chat-delete-btn,
.fpp-chat-messages.is-admin-mode .fpp-chat-delete-btn:focus{opacity:1;}
.fpp-chat-messages.is-admin-mode .fpp-chat-msg.is-own .fpp-chat-delete-btn{left:auto;right:-4px;transform:translateX(100%);}

/* --- پیام صوتی --- */
.fpp-chat-voice-row{display:flex;align-items:center;gap:8px;min-width:150px;padding-top:2px;}
.fpp-chat-voice-play{
    width:28px;height:28px;border-radius:50%;border:none;flex-shrink:0;cursor:pointer;
    background:var(--fpp-chat-overlay,rgba(0,0,0,.12));color:inherit;font-size:11px;display:flex;align-items:center;justify-content:center;
}
.fpp-chat-msg.is-own .fpp-chat-voice-play{background:rgba(255,255,255,.25);}
.fpp-chat-voice-bar{flex:1;height:4px;border-radius:2px;background:var(--fpp-chat-overlay,rgba(0,0,0,.12));position:relative;overflow:hidden;}
.fpp-chat-msg.is-own .fpp-chat-voice-bar{background:rgba(255,255,255,.3);}
.fpp-chat-voice-bar-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--fpp-chat-accent-1);}
.fpp-chat-msg.is-own .fpp-chat-voice-bar-fill{background:#fff;}
.fpp-chat-voice-duration{font-size:10.5px;flex-shrink:0;}

/* --- نوار پاسخ (بالای اینپوت) --- */
.fpp-chat-reply-bar{
    display:flex;align-items:center;gap:8px;padding:8px 12px;
    background:var(--fpp-surface);border-top:1px solid var(--fpp-surface-border);flex-shrink:0;
}
.fpp-chat-reply-bar[hidden]{display:none;}
.fpp-chat-reply-bar-info{flex:1;min-width:0;font-size:12px;}
.fpp-chat-reply-bar-info strong{display:block;color:var(--fpp-chat-accent-1);font-size:11.5px;}
.fpp-chat-reply-bar-info span{display:block;color:var(--fpp-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fpp-chat-reply-bar button{background:none;border:none;color:var(--fpp-text-muted);cursor:pointer;font-size:14px;flex-shrink:0;}

/* --- ردیف ورودی پیام --- */
.fpp-chat-input-row{
    display:flex;align-items:flex-end;gap:8px;padding:10px 12px;
    border-top:1px solid var(--fpp-surface-border);background:var(--fpp-modal-bg,#fff);flex-shrink:0;
}
.fpp-chat-input{
    flex:1;resize:none;max-height:110px;min-height:38px;padding:9px 12px;border-radius:18px;
    border:1px solid var(--fpp-surface-border);background:var(--fpp-input-bg);color:var(--fpp-text-strong);
    font-family:inherit;line-height:1.5;outline:none;
    /* روی موبایل، اگر فونت کادر ورودی کمتر از ۱۶ پیکسل باشد، سافاری آیفون با فوکوس روی
       آن کل صفحه را زوم می‌کند؛ چون پاپ‌آپ چت position:fixed است، این زوم باعث می‌شود
       دکمه‌ی ارسال از عرض صفحه بیرون بیفتد. برای همین حداقل ۱۶px نگه‌ داشته می‌شود. */
    font-size:16px;
}
@media (min-width:640px){
    .fpp-chat-input{font-size:13.5px;}
}
.fpp-chat-input:focus{border-color:var(--fpp-chat-accent-1);}
.fpp-chat-send-btn{
    flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:16px;
    background:var(--fpp-chat-own-bg);color:#fff;transition:transform .15s ease;
}
.fpp-chat-send-btn:disabled{opacity:.5;cursor:default;}
.fpp-chat-send-btn:active{transform:scale(.92);}

/* --- قفل اسکرول صفحه‌ی پشت چت ---
   خودِ overflow:hidden برای این‌که سافاری آیفون موقع فوکوس روی کادر تایپ
   پس‌زمینه را اسکرول نکند کافی نیست (این یک محدودیت شناخته‌شده‌ی سافاری
   است). قفل واقعی با position:fixed کردن body در جاوااسکریپت انجام می‌شود
   (بدون تحمیل height، برخلاف نسخه‌ی قبلی که چیدمان سایت را به‌هم می‌ریخت).
   این کلاس فقط برای مخفی‌کردن نوار پایین قالب نگه داشته شده. */
html.fpp-chat-open{overflow:hidden;}

/* --- اسکرول‌بار ظریف --- */
.fpp-chat-messages::-webkit-scrollbar{width:5px;}
.fpp-chat-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px;}

/* --- حالت شب --- */
html[data-theme="dark"] .fpp-chat-messages,body[data-theme="dark"] .fpp-chat-messages,
html.fpp-auto-dark .fpp-chat-messages,.dark-mode .fpp-chat-messages,.dark-theme .fpp-chat-messages{background:rgba(20,21,34,.9);}

html[data-theme="dark"] .fpp-ranking-wrap,body[data-theme="dark"] .fpp-ranking-wrap,
html.fpp-auto-dark .fpp-ranking-wrap,.dark-mode .fpp-ranking-wrap,.dark-theme .fpp-ranking-wrap{
    --fpp-chat-overlay:rgba(255,255,255,.08);
}
html[data-theme="dark"] .fpp-chat-messages::-webkit-scrollbar-thumb,body[data-theme="dark"] .fpp-chat-messages::-webkit-scrollbar-thumb,
html.fpp-auto-dark .fpp-chat-messages::-webkit-scrollbar-thumb,.dark-mode .fpp-chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);}