/* v24.1 — المحادثة الخاصة بتصميم عصري */
body.in-chat .topbar,body.in-chat .points-pill{display:none!important}
body.in-chat .bottom-nav{display:none!important}
body.in-chat .chat-panel{height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.chat-panel.dm{background:radial-gradient(120% 60% at 100% 0%,#2A165055,transparent 60%),#0B0A1F}
.dm .chat-head{gap:10px;padding:10px 12px;background:#0F0D26e6;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff12}
.dm-back{width:40px;height:40px;border-radius:20px;display:grid;place-items:center;color:#fff}
.dm-av{position:relative;flex-shrink:0;cursor:pointer}
.dm-av img{width:42px;height:42px;border-radius:21px;object-fit:cover;display:block}
.on-dot{position:absolute;bottom:1px;left:1px;width:12px;height:12px;border-radius:6px;background:#22C55E;border:2px solid #0F0D26}
.dm-who{flex:1;min-width:0}
.dm-who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-status{font-size:12px!important;color:#ffffff99!important}
.dm-status.on{color:#4ADE80!important}
.dm-typing-t{color:#22D3EE;display:inline-flex;align-items:center;gap:2px}
.dm-typing-t i{width:4px;height:4px;border-radius:2px;background:currentColor;animation:dmDot 1.2s infinite}
.dm-typing-t i:nth-child(2){animation-delay:.15s}.dm-typing-t i:nth-child(3){animation-delay:.3s}
@keyframes dmDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.dm .call-btns{display:flex;gap:6px}
.dm .call-btns button{width:40px;height:40px;border-radius:20px;background:#ffffff14;color:#fff;display:grid;place-items:center;font-size:0;opacity:1}
.dm .call-btns button:active{background:#FF2D7A}
.dm .chat-body{scrollbar-width:none;gap:4px;padding:12px}
.dm .chat-body::-webkit-scrollbar{display:none}
.dm-day{align-self:center;margin:10px 0 6px}
.dm-day span{font-size:11px;font-weight:700;color:#ffffffb3;background:#ffffff12;padding:4px 12px;border-radius:12px}
.dm .bubble{position:relative;font-size:14px;padding:8px 12px 6px;border-radius:20px;box-shadow:0 2px 10px #0003}
.dm .bubble.me{background:linear-gradient(135deg,#FF2D7A,#8B5CF6);border-bottom-right-radius:6px}
.dm .bubble.them{background:#1C1A3A;border-bottom-left-radius:6px}
.dm .bubble time{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:10px;opacity:.75;margin-top:2px;direction:ltr}
.dm .bubble .tick{display:inline-flex;color:#ffffffb3;margin:0}
.dm .bubble .tick.read{color:#67E8F9}
.dm .bubble.has-rx{margin-bottom:14px}
.dm-rx{position:absolute;bottom:-14px;left:8px;display:flex;align-items:center;gap:2px;padding:2px 6px;border-radius:12px;background:#13112C;border:1px solid #ffffff1f;font-size:10px;font-weight:800}
.bubble.them .dm-rx{left:auto;right:8px}
.dm-rx i{width:18px;height:18px;display:block}
.dm-quote{border-inline-start:3px solid #ffffffb3;background:#00000026;border-radius:10px;padding:5px 9px;margin-bottom:5px;display:flex;flex-direction:column;font-size:12px}
.dm-quote b{font-size:11px;opacity:.9}.dm-quote span{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.dm-typing{display:flex;gap:4px;padding:12px 14px!important}
.dm-typing i{width:7px;height:7px;border-radius:4px;background:#ffffffaa;animation:dmDot 1.2s infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
.dm-reply{display:flex;align-items:center;gap:10px;margin:0 12px;padding:8px 12px;border-radius:14px 14px 0 0;background:#1C1A3A;border-inline-start:3px solid #FF2D7A}
.dm-reply div{flex:1;min-width:0;display:flex;flex-direction:column}
.dm-reply b{font-size:12px;color:#FF6BA6}.dm-reply span{font-size:12px;color:#ffffffb3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-reply-x{width:30px;height:30px;border-radius:15px;background:#ffffff14;color:#fff;display:grid;place-items:center}
.dm .dm-input{padding:8px 10px;border-top:0;gap:6px;align-items:center}
.dm .dm-input .search-input{height:46px;border-radius:23px;background:#ffffff0f;border:1px solid #ffffff1a}
.dm .dm-btn{width:46px;height:46px;font-size:0;color:#fff;background:#ffffff12}
.dm .dm-send{background:linear-gradient(135deg,#FF2D7A,#8B5CF6)}
.dm .dm-mic{background:#FF2D7A26;color:#FF6BA6}
.dm .dm-voice button{display:grid;place-items:center;font-size:0}
/* قائمة الضغط المطوّل */
.dm-menu{position:fixed;inset:0;z-index:95;background:#07061A99;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s;backdrop-filter:blur(3px)}
.dm-menu.show{opacity:1}
.dm-menu-in{width:min(420px,100%);margin:0 10px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;transform:translateY(20px);transition:transform .2s}
.dm-menu.show .dm-menu-in{transform:none}
.dm-rxbar{display:flex;justify-content:space-around;padding:10px;border-radius:40px;background:#1C1A3A;border:1px solid #ffffff1f}
.dm-rxbar button{width:44px;height:44px;transition:transform .15s}.dm-rxbar button:active{transform:scale(1.35)}
.dm-acts{display:flex;flex-direction:column;border-radius:20px;background:#1C1A3A;border:1px solid #ffffff1f;overflow:hidden}
.dm-acts button{display:flex;align-items:center;gap:12px;padding:14px 18px;color:#fff;font-size:15px;border-bottom:1px solid #ffffff0f}
.dm-acts button.danger{color:#FB7185}
/* إشعار رسالة جديدة */
.dm-banner{position:fixed;z-index:130;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:20px;background:#1C1A3Af2;border:1px solid #ffffff26;box-shadow:0 10px 30px #0008;color:#fff;text-align:right;transform:translateY(-130%);transition:transform .3s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(12px)}
.dm-banner.show{transform:none}
.dm-banner img{width:42px;height:42px;border-radius:21px;object-fit:cover}
.dm-banner div{flex:1;min-width:0;display:flex;flex-direction:column}
.dm-banner b{font-size:14px}.dm-banner span{font-size:13px;color:#ffffffcc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-banner em{font-style:normal;font-size:11px;color:#ffffff80}
/* رقم الرسائل على الزر */
.nav-badge{position:absolute;top:-4px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#FF2D7A;color:#fff;font:800 10px/18px Poppins,sans-serif;font-style:normal;text-align:center;border:2px solid #0B0A1F}
.nav-badge.pop{animation:nbPop .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes nbPop{from{transform:scale(.4)}}
.msg-av .on-dot{bottom:2px;left:2px}
.bottom-nav .nav-item{min-width:44px}
.ic-h{display:flex;align-items:center;gap:8px}.ic-h svg{color:#FF6BA6}
.ic-s{display:grid;place-items:center;width:40px;height:40px;border-radius:20px;background:#ffffff12;color:#FF6BA6}
.cl-call{display:grid;place-items:center;color:#fff}
.call-log-btn{display:inline-flex;align-items:center;gap:8px}
/* v24.2 — رسالة المكالمة الفائتة */
.dm-missed{display:flex;align-items:center;gap:10px;min-width:210px;padding:2px 0}
.dm-missed-ic{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;background:#FB71852e;color:#FB7185;flex-shrink:0}
.bubble.me .dm-missed-ic{background:#ffffff2e;color:#fff}
.dm-missed div{flex:1;display:flex;flex-direction:column}
.dm-missed b{font-size:14px}.dm-missed small{font-size:12px;opacity:.7}
.dm-callback{padding:7px 14px;border-radius:16px;background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;font-weight:800;font-size:13px}
.dm-voice button{color:#fff}
.dm-share span{display:grid;place-items:center}
.dm .chat-body{padding-bottom:22px}
/* v24.3 — صور وفيديوهات المحادثة بدون إطار (مثل تيك توك) والوقت فوق الصورة */
.dm .bubble.k-image,.dm .bubble.k-video{padding:0;background:none!important;box-shadow:none;border-radius:20px;overflow:visible}
.dm .bubble.k-image .dm-img,.dm .bubble.k-video .dm-vid{border-radius:20px;max-width:240px;max-height:340px;width:auto;box-shadow:0 4px 18px #0006}
.dm .bubble.k-image>time{position:absolute;bottom:8px;left:8px;margin:0;padding:3px 8px;border-radius:10px;background:#0009;backdrop-filter:blur(6px);opacity:1}
.dm .bubble.k-video>time{margin-top:4px;padding:0 6px}
.dm .bubble.k-image p,.dm .bubble.k-video p{margin:6px 4px 0;padding:8px 12px;border-radius:16px;background:#1C1A3A}
.dm .bubble.me.k-image p,.dm .bubble.me.k-video p{background:linear-gradient(135deg,#FF2D7A,#8B5CF6)}
.dm .bubble.k-image .dm-quote,.dm .bubble.k-video .dm-quote{background:#1C1A3A;margin-bottom:4px}
