/* ============================================================
   مجتمع مُزان — واجهة دردشة
   الرسائل فقاعات متسلسلة، وصندوق الكتابة ملتصق بالأسفل،
   والوسائط تُعرض داخل المحادثة نفسها.
   ============================================================ */

/* width:100% ضروري — العنصر ابن لحاوية flex عمودية، و margin-inline:auto
   يُلغي التمدّد التلقائي فينكمش العرض إلى حجم المحتوى. */
.ch-wrap{max-width:820px;width:100%;margin-inline:auto}

/* ---------- قائمة الغرف ---------- */
.ch-rooms{display:flex;flex-direction:column;gap:10px}
.ch-room{
  display:flex;align-items:center;gap:14px;padding:14px;
  background:#fff;border:1px solid var(--line);border-radius:16px;color:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.ch-room:hover{border-color:var(--green-100);box-shadow:0 6px 18px rgba(43,77,52,.07)}
.ch-room .ic{
  width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;
  font-size:24px;background:linear-gradient(135deg,var(--green-50),#fff);border:1px solid var(--green-100);
}
.ch-room .body{flex:1;min-width:0}
.ch-room .row1{display:flex;align-items:center;gap:8px}
.ch-room h3{font-size:16px;margin:0;color:var(--green-dark)}
.ch-room .time{margin-inline-start:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.ch-room .preview{
  color:var(--muted);font-size:13.5px;margin:3px 0 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ch-badge{
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--green);
  color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;
}
.ch-lock{font-size:12px;color:var(--muted)}

/* ---------- رأس الغرفة ---------- */
.ch-head{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:10px 0;
}
.ch-head-in{display:flex;align-items:center;gap:12px}
.ch-head .ic{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;background:var(--green-50);border:1px solid var(--green-100);
}
.ch-head h1{font-size:17px;margin:0;color:var(--green-dark)}
.ch-head .sub{color:var(--muted);font-size:12.5px}
.ch-head .actions{margin-inline-start:auto;display:flex;gap:4px}
.ch-icon-btn{
  width:38px;height:38px;border-radius:10px;border:0;background:transparent;
  display:grid;place-items:center;font-size:17px;cursor:pointer;color:var(--muted);
}
.ch-icon-btn:hover{background:var(--surface);color:var(--green-700)}

/* ---------- الرسالة المثبّتة ---------- */
.ch-pinned{
  display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:10px 0 0;
  background:var(--green-50);border:1px solid var(--green-100);border-radius:12px;font-size:13.5px;
}
.ch-pinned b{color:var(--green-700);font-size:12px;display:block;margin-bottom:2px}
.ch-pinned .txt{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- تثبيت صفحة الغرفة ----------
   الصفحة نفسها لا تتحرك: الترويسة ثابتة، وصندوق الكتابة ثابت،
   والتمرير يحدث داخل مجرى الرسائل وحده — كتطبيقات الدردشة.        */
body.ch-room-page,
body:has(#chStream){
  height:100dvh;overflow:hidden;display:flex;flex-direction:column;
}
body.ch-room-page main,
body:has(#chStream) main{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
body.ch-room-page main > .section,
body:has(#chStream) main > .section{
  flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0;
}
body.ch-room-page main > .section > .container,
body:has(#chStream) main > .section > .container{
  flex:1;min-height:0;display:flex;flex-direction:column;
}
body.ch-room-page .site-footer, body.ch-room-page footer,
body:has(#chStream) .site-footer,
body:has(#chStream) footer{display:none}
body.ch-room-page .ch-head,
body:has(#chStream) .ch-head{position:static}

/* ---------- مجرى الرسائل ---------- */
.ch-stream{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;
  padding:16px 0 20px;
}
.ch-day{
  align-self:center;background:var(--surface);color:var(--muted);
  font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid var(--line);
}

.ch-msg{display:flex;gap:10px;align-items:flex-end;max-width:86%}
.ch-msg.mine{align-self:flex-start;flex-direction:row-reverse}   /* رسائلي في الجهة المقابلة */
.ch-msg.theirs{align-self:flex-end}

.ch-av{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100);
  font-weight:800;font-size:13px;
}
.ch-msg.same .ch-av{visibility:hidden}

.ch-bubble{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:9px 13px;box-shadow:0 1px 3px rgba(43,77,52,.05);min-width:76px;
}
.ch-msg.mine .ch-bubble{background:var(--green-50);border-color:var(--green-100)}
.ch-msg.theirs .ch-bubble{border-top-right-radius:6px}
.ch-msg.mine   .ch-bubble{border-top-left-radius:6px}

.ch-name{font-size:12.5px;font-weight:800;color:var(--green-700);margin-bottom:3px;display:flex;gap:6px;align-items:center}
.ch-name .tag{
  font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;
  background:#fdf6e6;color:#946b12;border:1px solid #f0e0bb;
}
.ch-text{font-size:15px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.ch-meta{
  display:flex;align-items:center;gap:6px;justify-content:flex-end;
  margin-top:3px;color:var(--muted);font-size:10.5px;
}
.ch-hidden-tag{color:var(--danger);font-size:11px;font-weight:700}

/* اقتباس الرد */
.ch-quote{
  display:block;color:inherit;
  border-inline-start:3px solid var(--green);background:rgba(29,175,76,.06);
  border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:12.5px;
}
.ch-quote b{color:var(--green-700);display:block;font-size:11.5px}
.ch-quote span{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* وسائط داخل الفقاعة */
.ch-media{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ch-media img{
  border-radius:12px;max-width:230px;max-height:230px;width:auto;height:auto;
  display:block;cursor:zoom-in;background:var(--surface);
}
.ch-file{
  display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;color:inherit;
}
.ch-file:hover{border-color:var(--green-100);background:#fff}
.ch-file .fic{font-size:20px}
.ch-file b{font-size:13px;display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-file small{color:var(--muted);font-size:11.5px}

/* أدوات الرسالة */
.ch-tools{display:flex;gap:2px;align-items:center;opacity:0;transition:opacity .15s}
.ch-msg:hover .ch-tools,.ch-tools:focus-within{opacity:1}
.ch-tool{
  border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:13px;padding:4px 6px;border-radius:8px;
}
.ch-tool:hover{background:var(--surface);color:var(--green-700)}
.ch-tool.danger:hover{color:var(--danger)}
.ch-tool.on{color:var(--green)}
.ch-msg form{display:inline}

/* ---------- صندوق الكتابة ---------- */
.ch-composer{
  flex:0 0 auto;background:#fff;
  border-top:1px solid var(--line);padding:10px 0 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.ch-composer-in{display:flex;gap:8px;align-items:flex-end}
.ch-composer textarea{
  flex:1;min-height:46px;max-height:150px;padding:12px 16px;border:1px solid var(--line);
  border-radius:22px;font:inherit;font-size:15px;line-height:1.6;resize:none;background:#fff;
}
.ch-composer textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.ch-send{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;background:var(--green);
  color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;
}
.ch-send:hover{background:var(--green-600)}
.ch-attach{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:19px;cursor:pointer;display:grid;place-items:center;
}
.ch-attach:hover{border-color:var(--green);color:var(--green-700)}
.ch-attach input{display:none}
.ch-files-preview{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 8px}
.ch-files-preview span{
  background:var(--green-50);color:var(--green-700);font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:999px;
}
.ch-reply-bar{
  display:none;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;
  background:var(--surface);border-inline-start:3px solid var(--green);border-radius:10px;font-size:13px;
}
.ch-reply-bar.on{display:flex}
.ch-reply-bar b{color:var(--green-700)}
.ch-reply-bar .x{margin-inline-start:auto;border:0;background:none;cursor:pointer;color:var(--muted);font-size:16px}

.ch-locked{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  color:var(--muted);font-size:13.5px;
}
.ch-locked .btn{margin-inline-start:auto}

.ch-empty{text-align:center;padding:50px 20px;color:var(--muted)}
.ch-empty .ic{font-size:42px;opacity:.35;margin-bottom:10px}

.ch-lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:300;
  display:grid;place-items:center;padding:20px;cursor:zoom-out;
}
.ch-lightbox img{max-width:100%;max-height:100%;border-radius:10px}

@media(max-width:600px){
  .ch-msg{max-width:92%}
  .ch-media img{max-width:190px;max-height:190px}
  .ch-tools{opacity:1}          /* لا يوجد hover على اللمس */
}

/* زر واتساب العائم يغطّي صندوق الكتابة في الدردشة — نخفيه هنا */
body.ch-room-page .wa-float,
body:has(.ch-composer) .wa-float{display:none}

/* ---------- صفحة معلومات الغرفة ---------- */
.ch-info-hero{
  background:linear-gradient(135deg,#1DAF4C,#13803A 55%,#2B4D34);
  border-radius:0 0 26px 26px;margin:0 0 0;padding:28px 20px 24px;text-align:center;color:#fff;
}
.ch-info-hero .ic{
  width:74px;height:74px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  font-size:32px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);
}
.ch-info-hero h1{font-size:22px;margin:0 0 6px;color:#fff}
.ch-info-hero p{color:rgba(255,255,255,.9);font-size:14px;margin:0 0 14px;line-height:1.6}
.ch-info-hero .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}

.ch-stats{display:flex;gap:10px;margin:-18px 0 20px;position:relative;z-index:2}
.ch-stat{
  flex:1;background:#fff;border-radius:16px;padding:14px 8px;text-align:center;
  box-shadow:0 4px 14px rgba(43,77,52,.08);border:1px solid var(--line);
}
.ch-stat b{display:block;font-size:18px;color:var(--green-dark)}
.ch-stat span{font-size:11.5px;color:var(--muted)}

.ch-dm-card{
  display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:20px;
  background:linear-gradient(135deg,#EFFAF3,#F8FCF9);border:1px solid var(--green-100);border-radius:16px;
}
.ch-dm-card .ic{
  width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:20px;flex:0 0 46px;
}
.ch-dm-card b{display:block;color:var(--green-dark);font-size:15px}
.ch-dm-card span{color:var(--muted);font-size:12.5px}

.ch-sec{font-size:16px;color:var(--green-dark);margin:22px 0 10px;display:flex;gap:6px;align-items:center}
.ch-sec span{color:var(--muted);font-weight:400;font-size:13px}
.ch-sub{font-size:13.5px;color:var(--muted);margin:14px 0 8px;font-weight:700}

.ch-mod{
  display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
}
.ch-mod .av{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-50);color:var(--green-700);font-weight:800;font-size:18px;
}
.ch-mod .av.on{background:var(--green);color:#fff}
.ch-mod .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-mod small{color:var(--muted);font-size:12.5px;display:block}

.ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.ch-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in;background:var(--surface)}

.ch-privacy{
  background:var(--green-50);color:var(--green-ink);font-size:12px;
  padding:8px 14px;border-bottom:1px solid var(--green-100);
}

/* ============================================================
   تخطيط لوحين لسطح المكتب
   ------------------------------------------------------------
   الجوال (افتراضي): لوح واحد — قائمة الغرف في /community،
   والدردشة وحدها داخل الغرفة. سطح المكتب (≥1024px): قائمة
   ثابتة يمين + دردشة، بلا تنقّل ذهاباً وإياباً.
   ============================================================ */

.ch-app{display:flex;flex-direction:column;flex:1;min-height:0}
.ch-main{display:flex;flex-direction:column;flex:1;min-height:0}
.ch-composer-wrap{max-width:100%}

/* --- الجوال --- */
.ch-app-room .ch-side{display:none}          /* داخل الغرفة: الدردشة وحدها */
.ch-welcome{display:none}                    /* لوح الترحيب لسطح المكتب فقط */
.ch-side-head,.ch-side-foot{display:none}    /* القائمة على الجوال بلا ترويسة مكرّرة */

.ch-side-list{display:flex;flex-direction:column;gap:10px}
.ch-side-room{
  display:flex;align-items:center;gap:13px;padding:13px 14px;
  background:#fff;border:1px solid var(--line);border-radius:16px;color:inherit;
  transition:border-color .2s,background .2s;
}
.ch-side-room:hover{border-color:var(--green-100)}
.ch-side-room .ic{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;
  display:grid;place-items:center;font-size:21px;background:var(--green-50);
}
.ch-side-room .body{min-width:0;flex:1;display:block}
.ch-side-room .row1{display:flex;align-items:baseline;gap:8px;line-height:1.6}
.ch-side-room .row1 b{
  font-size:15px;color:var(--green-dark);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ch-side-room .row1 time{margin-inline-start:auto;font-size:11.5px;color:var(--muted);flex:none}
.ch-side-room .preview{
  display:block;font-size:12.5px;line-height:1.7;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (min-width:1024px){
  /* الحاوية تتّسع، والصفحة تملأ الشاشة */
  .ch-wrap{max-width:1240px;width:100%}
  .ch-section{padding-top:0;padding-bottom:0}

  .ch-app{
    display:grid;grid-template-columns:330px minmax(0,1fr);
    gap:18px;padding:18px 0;
  }

  /* --- الشريط الجانبي --- */
  .ch-app .ch-side{
    display:flex;flex-direction:column;min-height:0;
    background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  }
  .ch-side-head{
    display:flex;align-items:center;gap:10px;
    padding:16px 16px 14px;border-bottom:1px solid var(--line);
  }
  .ch-side-brand{flex:1;min-width:0}
  .ch-side-brand h2{font-size:17px;margin:0;color:var(--green-dark);letter-spacing:-.3px}
  .ch-side-brand span{font-size:12px;color:var(--muted)}
  .ch-side-list{
    flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    gap:2px;padding:8px;
  }
  /* داخل الشريط: صفوف لا بطاقات — الحدود تُضيّق المساحة بلا فائدة */
  .ch-side-room{border:0;border-radius:14px;background:transparent;padding:12px;gap:12px}
  .ch-side-room:hover{background:var(--surface)}
  .ch-side-room.is-active{background:var(--green-50)}
  .ch-side-room.is-active .row1 b{color:var(--green-700)}
  .ch-side-foot{display:block;padding:12px;border-top:1px solid var(--line)}

  /* --- لوح الدردشة --- */
  .ch-app-room .ch-main{
    background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  }
  .ch-app-room .ch-head{padding:12px 20px;border-bottom:1px solid var(--line)}
  .ch-app-room .ch-stream{padding:18px 20px 20px}
  .ch-app-room .ch-composer{padding:12px 20px 14px;border-top:1px solid var(--line)}
  .ch-back{display:none}          /* لا حاجة لزر الرجوع والقائمة ظاهرة */

  /* --- لوح الترحيب --- */
  .ch-welcome{
    display:flex;flex-direction:column;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:22px;
    padding:40px 44px;text-align:center;
    overflow-y:auto;overscroll-behavior:contain;
  }
  /* فاصلان مرنان يوسّطان المحتوى رأسياً، وينكمشان إلى صفر حين يطول
     المحتوى — التوسيط بـ align-items يجعل الفائض العلوي غير قابل
     للوصول بالتمرير فيُقصّ أعلى اللوح. */
  .ch-welcome::before,
  .ch-welcome::after{content:"";display:block;flex:1 1 0;min-height:0}
  .ch-welcome-in{max-width:560px;width:100%;flex:0 0 auto}

  .ch-welcome-cta{margin-top:8px}
  .ch-welcome-cta .btn{min-width:220px}
  .ch-welcome-cta p{margin-top:12px;font-size:13px}
  .ch-welcome-mark{
    width:66px;height:66px;margin:0 auto 18px;border-radius:50%;
    display:grid;place-items:center;font-size:30px;background:var(--green-50);
  }
  .ch-welcome h1{font-size:27px;margin-bottom:12px;letter-spacing:-.6px;line-height:1.45}
  .ch-welcome p{color:var(--muted);font-size:14.5px;line-height:2;max-width:44ch;margin-inline:auto}
  .ch-welcome-stats{
    display:flex;justify-content:center;margin:30px 0;
    padding:20px 0;border-block:1px solid var(--line);
  }
  .ch-welcome-stats>div{padding:0 30px}
  .ch-welcome-stats>div+div{border-inline-start:1px solid var(--line)}
  .ch-welcome-stats b{display:block;font-size:25px;font-weight:800;color:var(--green-dark);line-height:1.3}
  .ch-welcome-stats span{font-size:12px;color:var(--muted);margin-top:2px;display:block}
  .ch-welcome-rooms{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:start}
  .ch-welcome-rooms a{
    display:block;padding:16px 18px 18px;border:1px solid var(--line);border-radius:18px;
    transition:border-color .2s,transform .2s;
  }
  .ch-welcome-rooms a:hover{border-color:var(--green-100);transform:translateY(-2px)}
  .ch-welcome-rooms .ic{font-size:20px;line-height:1}
  .ch-welcome-rooms b{display:block;font-size:15px;color:var(--green-dark);margin-top:10px;line-height:1.5}
  .ch-welcome-rooms small{display:block;font-size:12.5px;color:var(--muted);line-height:1.75;margin-top:5px}
  .ch-welcome-note{font-size:12.5px;line-height:1.9;margin-top:26px;max-width:46ch;margin-inline:auto}
  .ch-note-mobile{display:none}

  /* قائمة الغرف تملأ الشاشة أيضاً كي لا يبقى فراغ أسفلها */
  body:has(.ch-app-list){height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  body:has(.ch-app-list) main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body:has(.ch-app-list) main>.section{flex:1;min-height:0;display:flex;flex-direction:column}
  body:has(.ch-app-list) main>.section>.container{flex:1;min-height:0;display:flex;flex-direction:column}
  body:has(.ch-app-list) .site-footer{display:none}
}