/* ══════════════════════════════════════════════════════════════
   دردشة المجتمع — chat.css
   Paper/ink identity — tokens copied EXACTLY from dash-skin.css.
   RTL, mobile-first, no horizontal scroll at 375px.
   No backdrop-filter anywhere (jank on scrolling elements on this site).
   ══════════════════════════════════════════════════════════════ */
:root{
  --paper:#EFE8D8; --paper2:#FFFDF7; --ink:#141210; --ink2:#3f3a32;
  --red:#C4161F; --red2:#e8452e; --line:rgba(20,18,16,.13);
}

/* visually-hidden: clip pattern ONLY (left:-9999px breaks RTL mobile) */
.yakchat-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── floating button (sits ABOVE the support chat button) ──
   fix1a: physical LEFT always — same corner as the Telegram support
   button in BOTH languages (inset-inline-end flipped to the right on EN). */
.yakchat-fab{
  position:fixed;
  left:var(--yakchat-side,18px);
  bottom:var(--yakchat-bottom,84px); /* 18 + 54 + 12 فوق كبسة تليجرام */
  z-index:9990;
  width:54px;height:54px;border-radius:50%;padding:0;
  /* سماوي + حلقة ألوان بتلف (طلب نجم 2026-09-20): دائري، صغير عالموبايل، فخم */
  /* ⚠ كان ::after (ورق، inset:-1px) بيطلع فوق خلفية الزر نفسها — فالدايرة كانت تبين
     بلون الورق والرسمة البيضا تختفي. الآن: فيروزي جوّا + حدّ ورق 3px بيفصل عن الحلقة. */
  background:radial-gradient(circle at 35% 28%,#5ff0e0,#14c8c0 45%,#0e9fb5 100%);color:#fff;border:3px solid var(--paper,#EFE8D8);cursor:pointer;
  box-shadow:0 10px 26px rgba(14,159,181,.4),inset 0 -6px 14px rgba(0,60,80,.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.yakchat-fab::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:url(/img/fab-wheel-chat.png) center/100% 100% no-repeat;   /* صورة مش conic-gradient: الأخير بيترك خط رفيع عند 0deg وهي بتلف */
    animation:yakFabSpin 3.2s linear infinite;
}
/* لافتة بتطلع عاليمين وقت المرور — ورق وحبر (السودا «بتخزي» — نجم). النص من aria-label، بلا JS. */
.yakchat-fab::after{content:attr(aria-label);position:absolute;left:calc(100% + 16px);top:50%;
transform:translate(-6px,-50%) scale(.96);white-space:nowrap;
background:linear-gradient(180deg,#FFFDF7,#F3EDDD);color:#141210;border:1px solid rgba(20,18,16,.14);
font:800 .84rem/1 'Noto Kufi Arabic',sans-serif;padding:11px 16px;border-radius:14px;
box-shadow:0 10px 28px rgba(20,18,16,.18),inset 0 1px 0 #fff;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.yakchat-fab:hover::after,.yakchat-fab:focus-visible::after{opacity:1;transform:translate(0,-50%) scale(1)}
@media (hover:none){.yakchat-fab::after{display:none}}
/* ظهور سوا مع كبسة تليجرام: مخفية لحد ما body.yak-fabs (chat_widget.js بيحطها لما هالملف يوصل)، ومخفية وقت الانترو متلها */
.yakchat-fab{opacity:0}
body.yak-fabs .yakchat-fab{opacity:1}
body.intro .yakchat-fab{display:none}
@keyframes yakFabSpin{to{transform:rotate(360deg)}}
.yakchat-fab:hover{transform:translateY(-2px) scale(1.04)}
.yakchat-fab svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,50,70,.45))}
.yakchat-fab .yakchat-fab-n{position:absolute;top:-4px;right:-4px;background:#F23645;color:#fff;border-radius:10px;padding:1px 6px;font-size:.62rem;font-weight:800;min-width:16px;text-align:center;border:2px solid var(--paper,#EFE8D8)}
.yakchat-fab .yakchat-fab-n:empty{display:none}
@media (max-width:640px){.yakchat-fab{width:48px;height:48px;--yakchat-bottom:78px}.yakchat-fab svg{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){.yakchat-fab::before{animation:none}}

/* قائمة البند */
.yakchat-banmenu{position:absolute;bottom:calc(100% + 4px);inset-inline-end:0;z-index:20;min-width:150px;
  background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 14px 34px rgba(20,18,16,.2);display:flex;flex-direction:column;gap:2px}
.yakchat-banmenu-t{font-size:.68rem;font-weight:800;color:var(--ink2);padding:4px 8px 6px}
.yakchat-banmenu button{background:transparent;border:none;cursor:pointer;text-align:start;padding:7px 10px;border-radius:8px;
  font-family:'Almarai',sans-serif;font-size:.8rem;font-weight:700;color:var(--ink)}
.yakchat-banmenu button:hover{background:rgba(196,22,31,.08);color:var(--red)}
.yakchat-banmenu button.lift{border-top:1px solid var(--line);margin-top:3px;color:#089981}

/* صورة جاهزة للإرسال + تعليق */
.yakchat-stage{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:8px;border-radius:12px;
  background:rgba(30,94,255,.06);border:1px dashed rgba(30,94,255,.45)}
.yakchat-stage img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.yakchat-stage span{flex:1;font-size:.74rem;font-weight:700;color:var(--ink2)}
.yakchat-stage button{background:transparent;border:none;cursor:pointer;color:var(--red);font-size:1rem;font-weight:800}
.yakchat-cap{margin-top:6px}
.yakchat-panel.yakchat-dropping{outline:3px dashed #1e5eff;outline-offset:-6px}
.yakchat-panel.yakchat-dropping .yakchat-msgs{opacity:.5}

/* ── slide-in panel ── */
.yakchat-overlay{
  position:fixed;inset:0;z-index:9991;background:rgba(20,18,16,.35);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.yakchat-overlay.open{opacity:1;pointer-events:auto}
/* fix1a: drawer anchored to the physical LEFT edge in both languages,
   sliding in from the left — matches the always-left FAB. */
.yakchat-drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:9992;
  width:min(400px,100vw);max-width:100vw;
  background:var(--paper);
  border-right:1px solid var(--line);
  box-shadow:0 0 40px rgba(20,18,16,.2);
  transform:translateX(-100%);
  transition:transform .28s ease;
  display:flex;flex-direction:column;
}
.yakchat-drawer.open{transform:translateX(0)!important}

/* ── panel (also used embedded next to the live-video page) ──
   الاتجاه بيجي من خاصية dir عالعنصر نفسه (chat.js بيحطها حسب اللغة).
   ⚠ ممنوع ترجيع direction:rtl هون — بيقفل الوضع الإنجليزي. */
.yakchat-panel{
  display:flex;flex-direction:column;
  height:100%;min-height:0;
  background:var(--paper);color:var(--ink);
  font-family:'Almarai',sans-serif;
}
.yakchat-panel *,.yakchat-panel *::before,.yakchat-panel *::after{box-sizing:border-box}

.yakchat-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--paper2);
  border-bottom:1px solid var(--line);
}
.yakchat-head h2{
  margin:0;font-family:'Noto Kufi Arabic',sans-serif;
  font-size:.95rem;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* .hi = الكلمة الحمرا بالعنوان. كلمة وحدة بس، مش كل span */
.yakchat-head h2 .hi{color:var(--red)}
/* ⚠ display:flex تحت بيغلب [hidden] تبع المتصفح (خاصية الكلاس أقوى من
   قاعدة المتصفح الافتراضية) — فالعدّاد كان يبين «0 متصلين» بالإنجليزي
   كمان قبل ما يوصل أول ردّ. هالسطر لازم يضل فوق التعريف.
   (انكشف بالفحص الحي 2026-09-20) */
.yakchat-online[hidden]{display:none}

/* العنوان + العدّاد بعمود. min-width:0 ضروري وإلا العمود ما بينقص
   جوّا flex والعنوان بيزقّ زر الإغلاق برّا. */
.yakchat-head-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
/* عدّاد المتصلين — نقطة خضرا نابضة + رقم، تحت العنوان. */
.yakchat-online{
  display:flex;align-items:center;gap:5px;
  font-size:.66rem;font-weight:700;color:var(--ink2);white-space:nowrap;
}
.yakchat-online::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:#1b9e4b;box-shadow:0 0 0 0 rgba(27,158,75,.55);
  animation:yakchatPulse 2.4s ease-out infinite;
}
.yakchat-online b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.yakchat-online i{font-style:normal}
@keyframes yakchatPulse{
  0%{box-shadow:0 0 0 0 rgba(27,158,75,.55)}
  70%{box-shadow:0 0 0 7px rgba(27,158,75,0)}
  100%{box-shadow:0 0 0 0 rgba(27,158,75,0)}
}
@media (prefers-reduced-motion:reduce){.yakchat-online::before{animation:none}}
.yakchat-close{
  background:transparent;border:1px solid var(--line);border-radius:12px;
  width:34px;height:34px;color:var(--ink);cursor:pointer;font-size:16px;line-height:1;
}
.yakchat-close:hover{border-color:var(--red);color:var(--red)}
.yakchat-modtag{
  font-size:.7rem;font-weight:800;color:var(--red);
  background:rgba(196,22,31,.08);border:1px solid rgba(196,22,31,.3);
  border-radius:14px;padding:3px 10px;
}

/* ── messages area ── */
.yakchat-msgs{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:10px 10px 6px;
  overscroll-behavior:contain;
}
/* ⚠ عاللمس: contain بتوقف الصفحة تحت الإصبع لما الصندوق يخلص (أو
   يكون فاضي أصلاً). صندوق الدردشة بياخد نص الشاشة عالتليفون فالصفحة
   بتبيّن معلّقة. منرجّع التسلسل الطبيعي عالّلمس بس — عالماوس بتضل
   contain عشان العجلة ما تهرب من المحادثة وانت عم تقرا. (نجم 2026-09-21) */
@media (pointer:coarse),(max-width:900px){
  .yakchat-msgs{overscroll-behavior:auto}
}
.yakchat-day{
  text-align:center;margin:10px 0 8px;position:relative;
}
.yakchat-day span{
  display:inline-block;background:var(--paper2);border:1px solid var(--line);
  border-radius:12px;padding:2px 11px;font-size:.66rem;font-weight:700;color:var(--ink2);
}
/* ⚠ الفقاعة بتلبس المحتوى (fit-content) مش بتمدّد لعرض ثابت — «السلام
   عليكم» كانت تاخد 88% من العمود. الظل انشال والحشوة نحفت: الهدف
   محادثة مرتّبة مش كروت. (طلب نجم 2026-09-20) */
.yakchat-msg{
  width:fit-content;max-width:84%;margin:0 0 6px;padding:5px 10px 4px;
  background:var(--paper2);border:1px solid var(--line);
  border-radius:12px 12px 12px 3px;
  word-wrap:break-word;overflow-wrap:break-word;
}
.yakchat-msg.mine{
  margin-inline-start:auto;
  background:rgba(196,22,31,.06);border-color:rgba(196,22,31,.25);
  border-radius:12px 12px 3px 12px;
}
.yakchat-msg-top{display:flex;align-items:center;gap:6px;margin-bottom:2px}
/* صورة الكاتب — 22px حتى تضل الفقاعة صغيرة متل ما طلب نجم.
   flex:0 0 auto لأن الصورة ما بتنضغط لما الاسم يطول. */
.yakchat-av{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  object-fit:cover;background:var(--paper);border:1px solid var(--line);
}
.yakchat-av-txt{
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:800;color:var(--ink2);
  background:rgba(20,18,16,.06);
}
.yakchat-name{font-weight:800;font-size:.72rem;color:var(--red)}
.yakchat-msg.mine .yakchat-name{color:var(--ink2)}
/* صاحب الموقع — شارة صغيرة بدل اسم عادي */
.yakchat-name.owner{
  background:var(--red);color:#fff;border-radius:9px;padding:1px 7px;
  font-size:.64rem;letter-spacing:.3px;
}
.yakchat-msg.mine .yakchat-name.owner{color:#fff}
.yakchat-time{font-size:.62rem;color:var(--ink2);white-space:nowrap;opacity:.75}
.yakchat-body{font-size:.88rem;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.yakchat-msg img{
  max-width:100%;max-height:220px;border-radius:9px;
  border:1px solid var(--line);display:block;cursor:pointer;
}
.yakchat-msg audio{width:100%;max-width:230px;height:36px;display:block}
.yakchat-voicelen{font-size:.68rem;color:var(--ink2)}

/* mod / report row */
/* أزرار الإشراف بتبين بس لما تمرّ عالفقاعة — ما بدها تاخد سطر دايم */
.yakchat-acts{display:flex;gap:7px;margin-top:1px;justify-content:flex-end;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .15s}
.yakchat-msg:hover .yakchat-acts,.yakchat-msg:focus-within .yakchat-acts{opacity:1;max-height:24px}
@media (hover:none){.yakchat-acts{opacity:1;max-height:24px}}
.yakchat-acts button{
  background:transparent;border:none;cursor:pointer;padding:2px 4px;
  font-size:.68rem;font-weight:700;color:var(--ink2);font-family:'Almarai',sans-serif;
}
.yakchat-acts button:hover{color:var(--red)}
.yakchat-acts .yakchat-del{color:var(--red)}

/* ── composer ── */
.yakchat-compose{
  flex:0 0 auto;background:var(--paper2);border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
}
.yakchat-row{display:flex;align-items:flex-end;gap:8px}
.yakchat-input{
  flex:1 1 auto;min-width:0;resize:none;max-height:110px;
  background:rgba(255,255,255,.75);border:1.5px solid rgba(20,18,16,.2);
  color:var(--ink);border-radius:12px;padding:9px 12px;
  font-family:'Almarai',sans-serif;font-size:.92rem;line-height:1.6;
}
.yakchat-input:focus{border-color:var(--red);outline:none}
.yakchat-send{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--red);border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.yakchat-send:hover{background:#a91018}
.yakchat-send:disabled{background:rgba(20,18,16,.15);cursor:not-allowed}
.yakchat-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  background:transparent;border:1.5px solid var(--line);color:var(--ink2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.yakchat-icon:hover{border-color:var(--red);color:var(--red)}
.yakchat-icon.rec{background:var(--red);border-color:var(--red);color:#fff;animation:yakchat-pulse 1s infinite}
@keyframes yakchat-pulse{50%{opacity:.6}}
.yakchat-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.yakchat-send svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2}
/* العدّاد والجملة التحذيرية انشالوا من الواجهة (نجم 2026-09-20: «مش مهمين») — الفلتر بالسيرفر باقي */
.yakchat-count,.yakchat-hint{display:none!important}
.yakchat-count{font-size:.68rem;color:var(--ink2);text-align:start;margin-top:4px}
.yakchat-count.over{color:var(--red);font-weight:800}
.yakchat-hint{font-size:.72rem;color:var(--ink2);margin-top:5px}
.yakchat-hint b{color:var(--red)}

/* guest bar */
.yakchat-guest{
  text-align:center;font-size:.88rem;color:var(--ink2);padding:4px 0 2px;
}
.yakchat-guest a{
  display:inline-block;margin-inline-start:8px;background:var(--red);color:#fff;
  border-radius:24px;padding:7px 20px;font-weight:700;text-decoration:none;font-size:.85rem;
}
.yakchat-guest a:hover{background:#a91018}

/* mute countdown */
.yakchat-muted{
  background:rgba(196,22,31,.06);border:1px dashed rgba(196,22,31,.35);
  border-radius:12px;padding:10px 14px;text-align:center;
  font-size:.85rem;color:var(--ink);
}
.yakchat-muted b{color:var(--red);font-family:'Noto Kufi Arabic',sans-serif}

/* toast (violation / errors) */
.yakchat-toast{
  position:absolute;bottom:84px;inset-inline-start:12px;inset-inline-end:12px;
  background:var(--ink);color:var(--paper2);border-radius:12px;
  padding:10px 14px;font-size:.83rem;line-height:1.6;z-index:5;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.yakchat-toast.show{opacity:1}

/* mod panel (violations / reports) */
.yakchat-modview{
  position:absolute;inset:0;background:var(--paper);z-index:6;
  display:none;flex-direction:column;
}
.yakchat-modview.open{display:flex}
.yakchat-modview-list{flex:1 1 auto;overflow-y:auto;padding:12px}
.yakchat-vio{
  background:var(--paper2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin-bottom:10px;font-size:.8rem;line-height:1.7;
}
.yakchat-modh{font-family:'Noto Kufi Arabic',sans-serif;font-size:.9rem;margin:10px 2px 6px}
.yakchat-vio .r{color:var(--red);font-weight:800}
.yakchat-vio .s{color:var(--ink2);word-break:break-word}

/* status dot while loading */
.yakchat-empty{text-align:center;color:var(--ink2);font-size:.85rem;padding:30px 10px}

/* panel container needs relative for toast/modview */
.yakchat-panel{position:relative}

/* ── standalone page (chat.php) ── */
.yakchat-page{
  background:var(--paper);min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;font-family:'Almarai',sans-serif;
}
.yakchat-page .yakchat-panel{
  flex:1 1 auto;width:100%;max-width:760px;margin:0 auto;min-height:0;
  border-inline:1px solid var(--line);
}

/* mobile: full-bleed, no horizontal scroll at 375px */
@media(max-width:480px){
  .yakchat-drawer{width:100vw;border-right:none}
  .yakchat-page .yakchat-panel{border-inline:none}
  .yakchat-msg{max-width:90%}
}

/* ── التفاعلات (2026-09-20) ── */
.yakchat-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center;min-height:0}
.yakchat-react{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper2);font-size:.86rem;line-height:1.3;transition:transform .15s,background .15s,border-color .15s}
.yakchat-react b{font-size:.68rem;font-weight:800;color:var(--ink2)}
.yakchat-react:hover{transform:translateY(-1px);border-color:rgba(196,22,31,.4)}
.yakchat-react.on{background:rgba(196,22,31,.1);border-color:rgba(196,22,31,.55)}
.yakchat-react.on b{color:var(--red)}
.yakchat-msg.mine .yakchat-react{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.yakchat-msg.mine .yakchat-react b,.yakchat-msg.mine .yakchat-react-add{color:#fff}
.yakchat-msg.mine .yakchat-react.on{background:rgba(255,255,255,.3)}
.yakchat-react-add{display:inline-flex;align-items:center;gap:1px;padding:2px 6px;border-radius:14px;cursor:pointer;border:1px dashed var(--line);
  background:transparent;color:var(--ink2);opacity:0;transition:opacity .15s,border-color .15s;font-size:.7rem;font-weight:800}
.yakchat-react-add svg{width:16px;height:16px}
.yakchat-react-add i{font-style:normal}
.yakchat-msg:hover .yakchat-react-add,.yakchat-reacts.has .yakchat-react-add,.yakchat-react-add:focus{opacity:1}
@media (hover:none){.yakchat-react-add{opacity:.7}}
.yakchat-reactmenu{position:fixed;z-index:10050;display:flex;gap:2px;padding:5px;border-radius:22px;
  background:var(--paper2,#FFFDF7);border:1px solid var(--line,rgba(20,18,16,.13));box-shadow:0 14px 34px rgba(20,18,16,.22);animation:yakReactIn .15s ease-out}
@keyframes yakReactIn{from{opacity:0;transform:translateY(4px) scale(.95)}to{opacity:1;transform:none}}
.yakchat-reactmenu button{width:34px;height:34px;border:none;border-radius:50%;background:transparent;cursor:pointer;font-size:1.15rem;line-height:1;
  transition:transform .12s,background .12s}
.yakchat-reactmenu button:hover{transform:scale(1.3);background:rgba(20,18,16,.06)}
.yakchat-msg{position:relative}