/* ==========================================================================
   WA-CLONE  —  نظام تصميم واتساب (المظهر الداكن، عربي RTL)
   ملف واحد: المتغيرات + المكوّنات. انسخه كما هو.
   ========================================================================== */
:root{
  /* الخلفيات */
  --wa-bg-app:#0b141a;        /* خلفية شاشة الدردشة */
  --wa-bg-panel:#111b21;      /* خلفية قائمة المحادثات */
  --wa-bg-header:#202c33;     /* الشريط العلوي والسفلي */
  --wa-bg-input:#2a3942;      /* حقل الكتابة والبحث */
  --wa-bg-elevated:#233138;   /* القوائم المنبثقة */
  --wa-chip:#182229;          /* شريحة التاريخ ورسائل النظام */
  /* الفقاعات */
  --wa-bubble-in:#202c33;     /* رسالة واردة */
  --wa-bubble-out:#005c4b;    /* رسالة صادرة */
  /* النصوص */
  --wa-text:#e9edef;
  --wa-text-2:#8696a0;
  --wa-icon:#aebac1;
  --wa-meta-out:rgba(233,237,239,.6);
  /* اللون المميز */
  --wa-accent:#00a884;
  --wa-accent-2:#25d366;
  --wa-tick:#53bdeb;          /* علامتا القراءة الزرقاء */
  --wa-divider:rgba(134,150,160,.15);
  /* قياسات */
  --wa-shadow:0 1px .5px rgba(11,20,26,.13);
  --wa-r-bubble:7.5px;
  --wa-header-h:59px;
  --wa-avatar:49px;
  --wa-row-h:72px;
  --wa-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Arabic","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--wa-font);background:var(--wa-bg-panel);color:var(--wa-text);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ic{width:24px;height:24px;fill:none;stroke:var(--wa-icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-f{fill:var(--wa-icon);stroke:none}

/* ===== الهيكل العام ===== */
.wa-app{position:relative;height:100dvh;display:flex;overflow:hidden;background:var(--wa-bg-panel)}
.wa-pane{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--wa-bg-panel);
  transition:transform .22s ease}
.wa-pane-chat{transform:translateX(-100%);background:var(--wa-bg-app);z-index:5}
.wa-app.chat-open .wa-pane-chat{transform:translateX(0)}
@media (min-width:1024px){
  .wa-pane{position:relative;inset:auto;transform:none!important}
  .wa-pane-list{flex:0 0 30%;min-width:340px;max-width:440px;border-inline-start:1px solid var(--wa-divider)}
  .wa-pane-chat{flex:1}
  .wa-fab{inset-block-end:24px!important}
  .wa-bottom-nav{display:none!important}
  .wa-back{display:none!important}
}

/* ===== الشريط العلوي ===== */
.wa-header{height:var(--wa-header-h);flex:none;display:flex;align-items:center;gap:12px;
  padding:0 8px 0 12px;background:var(--wa-bg-header);padding-top:env(safe-area-inset-top)}
.wa-header-title{font-size:21px;font-weight:700;letter-spacing:.2px;flex:1;padding-inline-start:8px}
.wa-hbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.wa-hbtn:active{background:rgba(134,150,160,.15)}

/* ===== البحث + الفلاتر ===== */
.wa-search-wrap{padding:8px 12px;background:var(--wa-bg-panel);flex:none}
.wa-search{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-radius:20px;
  background:var(--wa-bg-input);color:var(--wa-text-2);font-size:15px}
.wa-search .ic{width:20px;height:20px}
.wa-filters{display:flex;gap:8px;padding:0 12px 10px;flex:none;overflow-x:auto;scrollbar-width:none}
.wa-filters::-webkit-scrollbar{display:none}
.wa-pill{height:32px;padding:0 14px;border-radius:16px;background:var(--wa-bg-input);color:var(--wa-text-2);
  font-size:14px;display:flex;align-items:center;white-space:nowrap}
.wa-pill.is-active{background:rgba(0,168,132,.22);color:#21c063}

/* ===== قائمة المحادثات ===== */
.wa-list{flex:1;overflow-y:auto;overscroll-behavior:contain}
.wa-row{display:flex;align-items:center;gap:13px;height:var(--wa-row-h);padding-inline:14px;position:relative;width:100%;text-align:start}
.wa-row:active{background:var(--wa-bg-header)}
.wa-row.is-active{background:var(--wa-bg-input)}
.wa-row::after{content:"";position:absolute;inset-block-end:0;inset-inline:76px 0;height:1px;background:var(--wa-divider)}
.wa-row:last-child::after{display:none}
.wa-av{width:var(--wa-avatar);height:var(--wa-avatar);border-radius:50%;flex:none;object-fit:cover;background:#6a7175}
.wa-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wa-row-top{display:flex;align-items:baseline;gap:8px}
.wa-name{font-size:17px;color:var(--wa-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-time{font-size:12px;color:var(--wa-text-2);flex:none}
.wa-row.unread .wa-time{color:var(--wa-accent-2)}
.wa-row-bot{display:flex;align-items:center;gap:6px}
.wa-prev{font-size:14.5px;color:var(--wa-text-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
.wa-prev .ic{width:16px;height:16px;stroke-width:2}
.wa-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--wa-accent-2);
  color:#111b21;font-size:12px;font-weight:600;display:grid;place-items:center;flex:none}

/* ===== زر الإنشاء العائم ===== */
.wa-fab{position:absolute;inset-block-end:78px;inset-inline-end:16px;width:56px;height:56px;border-radius:17px;
  background:var(--wa-accent);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:3}
.wa-fab .ic{stroke:#111b21;stroke-width:2}

/* ===== الشريط السفلي ===== */
.wa-bottom-nav{flex:none;height:56px;display:flex;background:var(--wa-bg-panel);
  border-top:1px solid var(--wa-divider);padding-bottom:env(safe-area-inset-bottom)}
.wa-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--wa-text-2);font-size:11px}
.wa-nav-ic{width:52px;height:26px;border-radius:13px;display:grid;place-items:center}
.wa-nav-item.is-active{color:var(--wa-text)}
.wa-nav-item.is-active .wa-nav-ic{background:rgba(0,168,132,.22)}
.wa-nav-item.is-active .ic{stroke:#21c063}

/* ===== ترويسة الدردشة ===== */
.wa-chat-header{height:var(--wa-header-h);flex:none;display:flex;align-items:center;gap:10px;
  padding-inline:6px 8px;background:var(--wa-bg-header);padding-top:env(safe-area-inset-top)}
.wa-chat-header .wa-av{width:40px;height:40px}
.wa-ch-body{flex:1;min-width:0;display:flex;flex-direction:column}
.wa-ch-name{font-size:16px;color:var(--wa-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-ch-status{font-size:12.5px;color:var(--wa-text-2)}

/* ===== لوحة الرسائل ===== */
.wa-msgs{flex:1;overflow-y:auto;padding:12px 4% 8px;background:var(--wa-bg-app);
  background-image:var(--wa-wallpaper);background-size:412px;position:relative}
.wa-chip{margin:10px auto;width:fit-content;max-width:90%;background:var(--wa-chip);color:var(--wa-text-2);
  font-size:12.5px;padding:6px 12px;border-radius:7.5px;box-shadow:var(--wa-shadow);text-align:center;line-height:18px}
.wa-msg{display:flex;margin-bottom:2px}
.wa-msg.out{justify-content:flex-end}
.wa-msg.tail{margin-top:10px}
.wa-bubble{position:relative;max-width:85%;background:var(--wa-bubble-in);color:var(--wa-text);
  border-radius:var(--wa-r-bubble);padding:6px 9px 8px;box-shadow:var(--wa-shadow);
  font-size:14.2px;line-height:19px;word-wrap:break-word;overflow-wrap:anywhere}
.wa-msg.out .wa-bubble{background:var(--wa-bubble-out)}
@media (min-width:1024px){.wa-bubble{max-width:65%}}
/* الذيل: الوارد يمين، الصادر يسار (RTL) */
.wa-msg.in.tail .wa-bubble{border-start-end-radius:0}
.wa-msg.out.tail .wa-bubble{border-start-start-radius:0}
.wa-msg.tail .wa-bubble::after{content:"";position:absolute;top:0;width:8px;height:13px}
.wa-msg.in.tail .wa-bubble::after{right:-8px;background:var(--wa-bubble-in);clip-path:polygon(0 0,100% 0,0 100%)}
.wa-msg.out.tail .wa-bubble::after{left:-8px;background:var(--wa-bubble-out);clip-path:polygon(100% 0,0 0,100% 100%)}
/* الوقت والعلامات داخل الفقاعة */
.wa-spacer{display:inline-block;width:58px;height:1px}
.wa-meta{float:left;display:flex;align-items:center;gap:3px;height:15px;margin:5px -4px -4px 0;
  font-size:11px;color:var(--wa-text-2);white-space:nowrap}
.wa-msg.out .wa-meta{color:var(--wa-meta-out)}
.wa-meta .ic{width:16px;height:16px;stroke:currentColor;stroke-width:2.2}
.wa-meta .ic.read{stroke:var(--wa-tick)}
/* اسم المرسل داخل المجموعات */
.wa-sender{font-size:12.8px;font-weight:500;color:#53bdeb;margin-bottom:2px}
/* رد مقتبس */
.wa-quote{display:block;background:rgba(0,0,0,.22);border-inline-start:4px solid var(--wa-accent-2);
  border-radius:5px;padding:5px 8px;margin-bottom:4px;font-size:13px;line-height:17px}
.wa-quote b{display:block;color:var(--wa-accent-2);font-weight:500;font-size:12.8px}
.wa-quote span{color:var(--wa-text-2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== فقاعة صورة ===== */
.wa-bubble.media{padding:3px 3px 4px;max-width:75%}
.wa-bubble.media img{display:block;width:100%;border-radius:6px}
.wa-media-meta{position:absolute;inset-block-end:8px;inset-inline-start:10px;color:#fff;font-size:11px;
  display:flex;align-items:center;gap:3px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.wa-media-meta .ic{width:16px;height:16px;stroke:#fff;stroke-width:2.2}
.wa-caption{padding:4px 6px 0;font-size:14.2px;line-height:19px}

/* ===== فقاعة صوتية ===== */
.wa-voice{display:flex;align-items:center;gap:9px;min-width:230px;padding:2px 0}
.wa-play{width:34px;height:34px;display:grid;place-items:center;flex:none}
.wa-play .ic{width:26px;height:26px;stroke:var(--wa-text-2);fill:var(--wa-text-2)}
.wa-wave{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.wa-wave i{width:2px;border-radius:2px;background:rgba(134,150,160,.55);display:block}
.wa-wave i.on{background:var(--wa-accent-2)}
.wa-voice-av{position:relative;width:45px;height:45px;flex:none}
.wa-voice-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.wa-voice-av .mic{position:absolute;inset-block-end:-2px;inset-inline-end:-2px;width:18px;height:18px}
.wa-voice-av .mic .ic{width:18px;height:18px;stroke:var(--wa-accent-2);fill:var(--wa-accent-2)}
.wa-dur{font-size:11px;color:var(--wa-text-2);margin-top:-4px}

/* ===== فقاعة ملف ===== */
.wa-file{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.18);border-radius:6px;padding:11px 10px;min-width:240px}
.wa-file-ic{width:32px;height:38px;display:grid;place-items:center;flex:none}
.wa-file-ic .ic{width:30px;height:30px;stroke:#d1707b}
.wa-file-body{flex:1;min-width:0}
.wa-file-name{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-file-sub{font-size:11.5px;color:var(--wa-text-2);margin-top:3px;text-transform:uppercase}
.wa-dl{width:34px;height:34px;border-radius:50%;border:1px solid rgba(134,150,160,.4);display:grid;place-items:center;flex:none}

/* ===== مؤشر الكتابة ===== */
.wa-typing{display:flex;gap:4px;padding:4px 2px}
.wa-typing i{width:7px;height:7px;border-radius:50%;background:var(--wa-text-2);animation:wat 1.2s infinite}
.wa-typing i:nth-child(2){animation-delay:.2s}.wa-typing i:nth-child(3){animation-delay:.4s}
@keyframes wat{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ===== شريط الكتابة ===== */
.wa-composer{flex:none;display:flex;align-items:flex-end;gap:7px;padding:6px 8px;
  background:var(--wa-bg-app);padding-bottom:calc(6px + env(safe-area-inset-bottom))}
.wa-input-pill{flex:1;min-height:46px;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--wa-bg-input);border-radius:23px}
.wa-input{flex:1;border:0;outline:0;background:transparent;color:var(--wa-text);font:inherit;font-size:15.5px;
  resize:none;max-height:100px;padding:13px 0;line-height:20px}
.wa-input::placeholder{color:var(--wa-text-2)}
.wa-send{width:46px;height:46px;border-radius:50%;background:var(--wa-accent);display:grid;place-items:center;flex:none}
.wa-send .ic{stroke:#111b21;fill:#111b21}
/* حالة التسجيل */
.wa-rec{flex:1;min-height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--wa-bg-input);border-radius:23px;color:var(--wa-text-2);font-size:14px}
.wa-rec .dot{width:10px;height:10px;border-radius:50%;background:#f15c6d;animation:wab 1s infinite}
@keyframes wab{0%,100%{opacity:1}50%{opacity:.2}}
.wa-rec .t{color:var(--wa-text);font-variant-numeric:tabular-nums}

/* ===== لوحة المرفقات ===== */
.wa-sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.2s;z-index:8}
.wa-sheet{position:absolute;inset-inline:8px;inset-block-end:8px;background:var(--wa-bg-elevated);border-radius:16px;
  padding:20px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px 10px;z-index:9;
  transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s}
.wa-app.sheet-open .wa-sheet,.wa-app.sheet-open .wa-sheet-bg{opacity:1;pointer-events:auto;transform:none}
.wa-att{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;color:var(--wa-text)}
.wa-att .b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.wa-att .ic{stroke:#fff}