/* ═══════════════════════════════════════════════════════════════════
   الدعم الفني: فقاعة العميل داخل لوحة التحكم + شارة الوارد عند المدير.
   جلد SALES: اخضر #10b981، بطاقات بيضاء، حدود #e5e7eb.
   ═══════════════════════════════════════════════════════════════════ */

/* ── الزر العائم ── */
.sup-fab {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-start: 22px;
    z-index: 1200;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #10b981, #047857);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(6, 95, 70, .35);
    transition: transform .18s, box-shadow .18s, background .18s;
}
.sup-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px rgba(6, 95, 70, .42); }
.sup-fab.is-open { background: #0f172a; }

.sup-fab__dot {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-inline-size: 22px;
    block-size: 22px;
    padding-inline: .3rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font: 800 .72rem/22px 'Cairo', system-ui, sans-serif;
    text-align: center;
    border: 2px solid #fff;
}

/* ── اللوحة ── */
.sup-panel {
    position: fixed;
    inset-block-end: 88px;
    inset-inline-start: 22px;
    z-index: 1200;
    inline-size: min(380px, calc(100vw - 32px));
    block-size: min(560px, calc(100vh - 130px));
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Cairo', system-ui, sans-serif;
    animation: supIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes supIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.sup-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    background: linear-gradient(120deg, #047857, #10b981);
    color: #fff;
}
.sup-head__ic {
    inline-size: 38px; block-size: 38px; flex: none;
    border-radius: 12px; background: rgba(255, 255, 255, .18);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.sup-head__tx { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.sup-head__tx b { font-size: .95rem; font-weight: 800; }
.sup-head__tx small { font-size: .74rem; color: rgba(255, 255, 255, .85); }
.sup-head__x {
    inline-size: 30px; block-size: 30px; border: 0; border-radius: 8px;
    background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.sup-head__x:hover { background: rgba(255, 255, 255, .26); }

.sup-body {
    flex: 1; overflow-y: auto; padding: 1rem .9rem;
    background: #f8fafc; display: flex; flex-direction: column; gap: .65rem;
}
.sup-loading { margin: auto; color: #94a3b8; }

.sup-empty {
    margin: auto; text-align: center; display: flex; flex-direction: column; gap: .4rem;
    color: #64748b; padding: 1rem;
}
.sup-empty i { font-size: 2.2rem; color: #a7f3d0; }
.sup-empty b { color: #0f172a; font-size: .95rem; }
.sup-empty span { font-size: .8rem; line-height: 1.7; }

.sup-msg { display: flex; flex-direction: column; gap: .2rem; max-inline-size: 84%; }
.sup-msg--me { align-self: flex-end; align-items: flex-end; }
.sup-msg--admin { align-self: flex-start; align-items: flex-start; }
.sup-msg__who { font-size: .7rem; font-weight: 800; color: #047857; display: inline-flex; align-items: center; gap: .25rem; }
.sup-msg__at { font-size: .66rem; color: #94a3b8; font-variant-numeric: tabular-nums; }

.sup-bubble {
    padding: .55rem .8rem; border-radius: 14px; font-size: .86rem; line-height: 1.7;
    word-break: break-word;
}
.sup-msg--me .sup-bubble { background: #10b981; color: #fff; border-start-end-radius: 4px; }
.sup-msg--admin .sup-bubble { background: #fff; border: 1px solid #e5e7eb; color: #0f172a; border-start-start-radius: 4px; }
.sup-bubble p { margin: 0; }

.sup-foot {
    display: flex; gap: .5rem; align-items: flex-end;
    padding: .7rem .75rem; border-block-start: 1px solid #e5e7eb; background: #fff;
}
.sup-input {
    flex: 1; min-block-size: 42px; max-block-size: 110px;
    border: 1px solid #e5e7eb; border-radius: 12px; padding: .65rem .8rem;
    font: inherit; font-size: .86rem; resize: none; outline: none; font-family: inherit;
}
.sup-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .14); }
.sup-send {
    inline-size: 42px; block-size: 42px; flex: none; border: 0; border-radius: 12px;
    background: #10b981; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sup-send:hover:not(:disabled) { background: #059669; }
.sup-send:disabled { opacity: .5; cursor: not-allowed; }

/* ── شارة الوارد في قائمة مدير النظام ── */
.sa-unread {
    margin-inline-start: auto;
    min-inline-size: 20px; block-size: 20px; padding-inline: .3rem;
    border-radius: 999px; background: #ef4444; color: #fff;
    font: 800 .7rem/20px 'Cairo', system-ui, sans-serif; text-align: center;
}

/* ── الجوال ── */
@media (max-width: 520px) {
    .sup-panel {
        inset-inline: 10px; inset-block-end: 80px;
        inline-size: auto; block-size: min(70vh, 520px);
    }
    .sup-fab { inset-block-end: 16px; inset-inline-start: 16px; inline-size: 50px; block-size: 50px; }
}

/* المساعد العام والدعم لا يتراكبان: المساعد يمين والدعم يسار */
.sax-fab { inset-inline-end: 22px; }

/* ═══════════════════════════════════════════════════════════════════
   محادثة الموقع الموحّدة (مساعد + دعم بشري) — للزوار على الصفحة الرئيسية
   ═══════════════════════════════════════════════════════════════════ */
.pch-fab {
    position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 1300;
    inline-size: 56px; block-size: 56px; border-radius: 50%; border: 0;
    background: linear-gradient(135deg, #10b981, #047857); color: #fff; font-size: 1.35rem;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(6, 95, 70, .38); transition: transform .18s, box-shadow .18s, background .18s;
}
.pch-fab:hover { transform: translateY(-2px) scale(1.05); }
.pch-fab.is-open { background: #0f172a; }
.pch-fab__dot {
    position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
    min-inline-size: 22px; block-size: 22px; padding-inline: .3rem; border-radius: 999px;
    background: #ef4444; color: #fff; font: 800 .72rem/22px Cairo, system-ui, sans-serif;
    text-align: center; border: 2px solid #fff;
}

.pch {
    position: fixed; inset-block-end: 90px; inset-inline-end: 22px; z-index: 1300;
    inline-size: min(390px, calc(100vw - 32px)); block-size: min(580px, calc(100vh - 140px));
    background: #fff; border: 1px solid #e5e7eb; border-radius: 18px;
    box-shadow: 0 26px 64px rgba(15, 23, 42, .2);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: Cairo, system-ui, sans-serif; animation: supIn .22s cubic-bezier(.2, .8, .2, 1);
}

.pch-head { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; background: linear-gradient(120deg, #047857, #10b981); color: #fff; }
.pch-head__ic { inline-size: 38px; block-size: 38px; flex: none; border-radius: 12px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.pch-head__tx { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.pch-head__tx b { font-size: .95rem; font-weight: 800; }
.pch-head__tx small { font-size: .74rem; color: rgba(255,255,255,.88); display: inline-flex; align-items: center; gap: .35rem; }
.pch-live { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #bbf7d0; box-shadow: 0 0 0 3px rgba(187,247,208,.3); animation: pchPulse 1.6s infinite; }
@keyframes pchPulse { 50% { opacity: .45; } }
.pch-head__x { inline-size: 30px; block-size: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.pch-head__x:hover { background: rgba(255,255,255,.26); }

.pch-body { flex: 1; overflow-y: auto; padding: 1rem .9rem; background: #f8fafc; display: flex; flex-direction: column; gap: .7rem; }

.pch-m { display: flex; flex-direction: column; gap: .2rem; max-inline-size: 86%; }
.pch-m--me { align-self: flex-end; align-items: flex-end; }
.pch-m--bot, .pch-m--agent { align-self: flex-start; align-items: flex-start; }
.pch-m--system { align-self: center; max-inline-size: 100%; }
.pch-m__who { font-size: .7rem; font-weight: 800; color: #047857; display: inline-flex; align-items: center; gap: .25rem; }

.pch-b { padding: .6rem .85rem; border-radius: 14px; font-size: .86rem; line-height: 1.75; word-break: break-word; }
.pch-m--me .pch-b { background: #10b981; color: #fff; border-start-end-radius: 4px; }
.pch-m--bot .pch-b, .pch-m--agent .pch-b { background: #fff; border: 1px solid #e5e7eb; color: #0f172a; border-start-start-radius: 4px; }
.pch-m--agent .pch-b { border-color: #a7f3d0; background: #f0fdf9; }
.pch-m--system .pch-b { background: #ecfdf5; border: 1px dashed #a7f3d0; color: #047857; font-size: .78rem; text-align: center; border-radius: 10px; }
.pch-b p { margin: 0; }

.pch-cta { display: inline-flex; align-items: center; gap: .2rem; margin-top: .4rem; color: #059669; font-weight: 700; font-size: .8rem; text-decoration: none; }
.pch-cta:hover { text-decoration: underline; }
.pch-rel { margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed #e5e7eb; display: flex; flex-direction: column; gap: .2rem; }
.pch-rel span { font-size: .7rem; color: #94a3b8; font-weight: 700; }
.pch-rel a { font-size: .78rem; color: #059669; text-decoration: none; }
.pch-rel a:hover { text-decoration: underline; }

.pch-typing { display: inline-flex; gap: .25rem; align-items: center; }
.pch-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #94a3b8; animation: pchDot 1s infinite; }
.pch-typing i:nth-child(2) { animation-delay: .15s; }
.pch-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pchDot { 30% { transform: translateY(-4px); opacity: .6; } }

.pch-sugg { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.pch-sugg button { border: 1px solid #e5e7eb; background: #fff; color: #334155; border-radius: 999px; padding: .3rem .7rem; font: 600 .76rem/1.5 inherit; cursor: pointer; text-align: start; }
.pch-sugg button:hover { border-color: #10b981; color: #059669; background: #f0fdf9; }

.pch-form { background: #fff; border: 1px solid #a7f3d0; border-radius: 14px; padding: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.pch-form b { font-size: .86rem; color: #0f172a; display: inline-flex; align-items: center; gap: .35rem; }
.pch-form b i { color: #059669; }
.pch-form > span { font-size: .76rem; color: #64748b; line-height: 1.6; }
.pch-form input { block-size: 40px; border: 1px solid #e5e7eb; border-radius: 10px; padding-inline: .7rem; font: inherit; font-size: .84rem; outline: none; }
.pch-form input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.pch-form__row { display: flex; gap: .4rem; }
.pch-form__go { flex: 1; block-size: 40px; border: 0; border-radius: 10px; background: #10b981; color: #fff; font: 800 .84rem/1 inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.pch-form__go:hover:not(:disabled) { background: #059669; }
.pch-form__go:disabled { opacity: .6; cursor: not-allowed; }
.pch-form__no { block-size: 40px; padding-inline: .9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #64748b; font: 700 .82rem/1 inherit; cursor: pointer; }
.pch-form__no:hover { border-color: #cbd5e1; color: #334155; }

.pch-foot { border-block-start: 1px solid #e5e7eb; background: #fff; padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .5rem; }
.pch-agent { align-self: flex-start; border: 1px dashed #a7f3d0; background: #f0fdf9; color: #047857; border-radius: 999px; padding: .28rem .75rem; font: 700 .76rem/1.5 inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.pch-agent:hover { border-style: solid; background: #ecfdf5; }
.pch-send { display: flex; gap: .45rem; }
.pch-send input { flex: 1; block-size: 42px; border: 1px solid #e5e7eb; border-radius: 12px; padding-inline: .8rem; font: inherit; font-size: .86rem; outline: none; }
.pch-send input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.pch-send button { inline-size: 42px; block-size: 42px; flex: none; border: 0; border-radius: 12px; background: #10b981; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pch-send button:hover:not(:disabled) { background: #059669; }
.pch-send button:disabled { opacity: .5; cursor: not-allowed; }

/* شارة مصدر المحادثة في وارد المدير */
.sp-src { font-size: .66rem; font-weight: 800; border-radius: 999px; padding: .08rem .42rem; border: 1px solid; }
.sp-src--portal { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.sp-src--admin { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }

@media (max-width: 520px) {
    .pch { inset-inline: 10px; inset-block-end: 80px; inline-size: auto; block-size: min(76vh, 560px); }
    .pch-fab { inset-block-end: 16px; inset-inline-end: 16px; inline-size: 52px; block-size: 52px; }
}

/* ═══════════════ زر الدعم: دائري بنبض هادئ ═══════════════ */
.pch-fab {
    inline-size: 68px; block-size: 68px; border-radius: 50%;
    padding: 0; gap: 0;
    background: linear-gradient(140deg, #34d399 0%, #10b981 45%, #047857 100%);
    box-shadow: 0 14px 34px rgba(6, 95, 70, .40), 0 0 0 6px rgba(16, 185, 129, .10);
}
.pch-fab i { font-size: 1.85rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.pch-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 40px rgba(6,95,70,.48), 0 0 0 8px rgba(16,185,129,.14); }
.pch-fab.is-open { inline-size: 58px; block-size: 58px; background: #0f172a; box-shadow: 0 12px 28px rgba(15,23,42,.35); }
.pch-fab.is-open i { font-size: 1.15rem; }

/* حلقتان تتمددان بهدوء: تلفت النظر بلا ازعاج */
.pch-fab__ring {
    position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, .5);
    opacity: 0; pointer-events: none;
}
.pch-fab.is-pulse .pch-fab__ring { animation: pchHalo 2.8s cubic-bezier(.22,.61,.36,1) infinite; }
.pch-fab.is-pulse .pch-fab__ring--2 { animation-delay: 1.4s; }
@keyframes pchHalo {
    0%   { transform: scale(1);    opacity: .55; }
    60%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* تنفّس خفيف للزر نفسه */
.pch-fab.is-pulse { animation: pchBreathe 3.6s ease-in-out infinite; }
@keyframes pchBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* نقطة حضور خضراء تدل على وجود فريق */
.pch-fab::after {
    content: ""; position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
    inline-size: 12px; block-size: 12px; border-radius: 50%;
    background: #bbf7d0; border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(187, 247, 208, .7);
    animation: pchDotLive 2s ease-out infinite;
}
.pch-fab.is-open::after { display: none; }
@keyframes pchDotLive {
    0%   { box-shadow: 0 0 0 0 rgba(187,247,208,.75); }
    70%  { box-shadow: 0 0 0 9px rgba(187,247,208,0); }
    100% { box-shadow: 0 0 0 0 rgba(187,247,208,0); }
}

/* ── فقاعة التنبيه فوق الزر ── */
.pch-teaser {
    position: fixed; inset-block-end: 100px; inset-inline-end: 22px; z-index: 1299;
    inline-size: min(310px, calc(100vw - 40px));
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
    padding: .95rem 1rem .9rem; display: grid; gap: .55rem;
    grid-template-columns: 42px 1fr; align-items: start;
    font-family: Cairo, system-ui, sans-serif;
    animation: pchTeaser .45s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pchTeaser { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.pch-teaser::after {
    content: ""; position: absolute; inset-block-end: -7px; inset-inline-end: 34px;
    inline-size: 14px; block-size: 14px; background: #fff; transform: rotate(45deg);
    border-inline-end: 1px solid #e5e7eb; border-block-end: 1px solid #e5e7eb;
}
.pch-teaser__ic {
    inline-size: 42px; block-size: 42px; border-radius: 12px;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.pch-teaser__tx { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.pch-teaser__tx b { font-size: .92rem; color: #0f172a; font-weight: 800; }
.pch-teaser__tx span { font-size: .78rem; color: #64748b; line-height: 1.55; }
.pch-teaser__go {
    grid-column: 1 / -1; block-size: 38px; border: 0; border-radius: 10px;
    background: #10b981; color: #fff; font: 800 .84rem/1 inherit; cursor: pointer;
}
.pch-teaser__go:hover { background: #059669; }
.pch-teaser__x {
    position: absolute; inset-block-start: 6px; inset-inline-end: 8px;
    inline-size: 24px; block-size: 24px; border: 0; background: transparent;
    color: #94a3b8; cursor: pointer; font-size: 1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
}
.pch-teaser__x:hover { background: #f1f5f9; color: #0f172a; }

@media (prefers-reduced-motion: reduce) {
    .pch-fab.is-pulse, .pch-fab.is-pulse .pch-fab__ring { animation: none; }
}

@media (max-width: 520px) {
    /* على الجوال: دائرة لا كبسولة، كي لا تغطي ازرار الصفحة */
    .pch-fab { inline-size: 56px; block-size: 56px; padding: 0; gap: 0; }
    .pch-fab i { font-size: 1.3rem; }
    .pch-fab__label { display: none; }
    .pch-teaser { inset-block-end: 82px; inset-inline-end: 12px; }
}