/* ═══════════ توأم الروح — النواة البصرية (تطبيق هاتف) ═══════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

:root{
  --bg0:#08050f; --bg1:#150b26; --bg2:#2a1247;
  --acc:#c9a2ff; --acc2:#ff8fc7;
  --ink:#f4efff; --dim:#a99cc4; --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.06);
  --me:#7de3d0; --you:#ff9ecd;
  --ok:#25d07a; --bad:#ff5c7a;
  --r:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;
  position:fixed;inset:0;width:100%;touch-action:manipulation}
body{
  font-family:'Tajawal','SF Arabic','Geeza Pro',system-ui,-apple-system,sans-serif;
  background:#05030a;color:var(--ink);-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
}
button,input,textarea{font-family:inherit;color:inherit;font-size:inherit}
svg.ic{display:block;flex:none}
::selection{background:var(--acc);color:#150b26}

/* ── إطار الهاتف ── */
#phone{
  position:relative;width:100%;max-width:440px;height:100dvh;max-height:100dvh;
  height:100svh;max-height:100svh;
  overflow:hidden;background:var(--bg0);isolation:isolate;
}
@media (min-width:520px) and (min-height:800px){
  #phone{height:min(920px,96dvh);border-radius:38px;
    box-shadow:0 40px 120px rgba(0,0,0,.75),0 0 0 10px #16121f,0 0 0 11px #2a2438}
}

#bgimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transform:scale(1.06);filter:saturate(1.05);transition:opacity .8s ease;opacity:0}
#bgimg.on{opacity:1}
#bg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
#veil{position:absolute;inset:0;z-index:2;pointer-events:none;transition:background .9s ease}

.screen{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;opacity:0;transition:opacity .45s}
.screen.on{display:flex;opacity:1}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:26px 20px calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;min-height:100%}

/* ── الدخول والربط ── */
.brand{text-align:center;margin-bottom:24px;animation:rise .7s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.brand h1{margin:16px 0 6px;font-size:32px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(100deg,#fff,var(--acc) 45%,var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .tag{margin:0;color:var(--dim);font-size:14.5px}
.brand-orb{width:84px;height:84px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  color:var(--acc2);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.26),rgba(165,107,255,.32) 45%,rgba(255,143,199,.2));
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 60px rgba(165,107,255,.5),inset 0 0 34px rgba(255,255,255,.12);
  animation:breathe 4.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.card{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:var(--r);padding:20px;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:rise .7s .06s backwards cubic-bezier(.2,.9,.3,1)}
.tabs{display:flex;gap:6px;background:rgba(0,0,0,.28);padding:5px;border-radius:14px;margin-bottom:16px}
.tab{flex:1;border:0;background:transparent;color:var(--dim);padding:11px;border-radius:10px;
  font-size:14px;font-weight:700;cursor:pointer;transition:.25s}
.tab.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;
  box-shadow:0 6px 20px rgba(165,107,255,.35)}
.pane{display:none;flex-direction:column;gap:12px}
.pane.on{display:flex}
label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--dim);font-weight:600}
input,textarea,select{background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;font-size:15px;outline:none;transition:.25s;width:100%}
input:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(165,107,255,.15);background:rgba(0,0,0,.44)}

.btn{border:0;border-radius:14px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;transition:.22s;
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;
  box-shadow:0 12px 30px rgba(165,107,255,.32)}
.btn.primary:active{transform:scale(.97)}
.btn.ghost{background:var(--glass);border:1px solid var(--line);color:var(--ink)}
.btn.danger{background:rgba(255,92,122,.16);border:1px solid rgba(255,92,122,.38);color:#ffb3c2}
.btn.tiny{padding:9px 13px;font-size:13px;border-radius:11px;min-height:38px}
.btn.wide{width:100%;margin-top:14px}
.err{color:#ff9db0;font-size:13px;min-height:18px;margin:12px 0 0;text-align:center}
.fine{text-align:center;color:var(--dim);font-size:12px;margin-top:16px;line-height:1.9}
.fine b{color:var(--acc)}

.mycode{display:flex;align-items:center;gap:10px;justify-content:center;padding:15px;
  background:rgba(0,0,0,.3);border-radius:16px;border:1px dashed rgba(201,162,255,.35)}
.mycode .lbl{color:var(--dim);font-size:12.5px}
.mycode b{font-size:25px;letter-spacing:5px;color:var(--acc);font-weight:800;flex:1;text-align:center}
.or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px;margin:15px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
#linkForm{display:flex;flex-direction:column;gap:12px}
.reqs{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.req{display:flex;align-items:center;gap:10px;background:rgba(165,107,255,.13);
  border:1px solid rgba(165,107,255,.3);padding:10px 12px;border-radius:15px;animation:rise .4s}
.req .rava{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:rgba(0,0,0,.3);color:var(--acc)}
.req .rava img{width:100%;height:100%;object-fit:cover}
.req .who{flex:1;min-width:0;font-size:13.5px;line-height:1.5}
.req .who small{display:block;color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.req button{border:0;border-radius:10px;padding:9px 12px;font-size:12.5px;cursor:pointer;font-weight:700}
.req .ok{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e}
.req .no{background:rgba(255,255,255,.09);color:var(--dim)}

/* ── الغرفة ── */
#room{display:none}
#room.on{display:flex}
/* ── ساعةُ الهاتف لا تغطّي شيئًا ──
   env(safe-area-inset-top) تُبلّغ صفرًا في بعض الأجهزة والأغلفة رغم أنّ
   شريط الحالة فوق المحتوى فعلًا. فنأخذ الأكبر بين ما يُبلّغه الجهاز
   وحدٍّ أدنى آمن — فلا يُقصّ الاسم في أيّ حال. */
.top{display:flex;align-items:center;gap:10px;padding:12px 14px;
  padding-top:max(calc(12px + env(safe-area-inset-top, 0px)), 44px);
  background:linear-gradient(180deg,rgba(8,5,15,.72),rgba(8,5,15,.25));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:6;flex:none}
.icon{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--glass);
  display:grid;place-items:center;cursor:pointer;transition:.2s;flex:none;color:var(--ink);padding:0}
.icon:active{transform:scale(.9)}
.avabtn{overflow:hidden;padding:0}
.avabtn .ava{width:100%;height:100%;display:grid;place-items:center;color:var(--acc)}
.avabtn .ava img{width:100%;height:100%;object-fit:cover}
.titles{flex:1;min-width:0}
.rname{font-weight:800;font-size:15.5px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsub{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stage{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;padding:8px 14px 4px;
  min-height:184px;position:relative;z-index:4}
.seats{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;gap:4px;
  padding-top:8px;overflow:visible}
.seat{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;max-width:140px;position:relative}
.discwrap{position:relative;width:clamp(78px,21vw,104px);aspect-ratio:1}
.seat .disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.3),rgba(255,255,255,.05) 55%,rgba(0,0,0,.4));
  border:1.5px solid rgba(255,255,255,.22);
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 0 26px rgba(255,255,255,.08);
  transform:scale(calc(1 + var(--lv,0)*.17));transition:transform .07s ease-out;z-index:3}
.seat .disc img{width:100%;height:100%;object-fit:cover}
.seat .face{display:grid;place-items:center;width:100%;height:100%;color:var(--c,#c9a2ff)}
.seat .face svg{width:52%;height:52%}
.seat.off .disc{filter:grayscale(.4) brightness(.82)}
.seat.onhold .disc{filter:grayscale(.6) brightness(.7);animation:holdpulse 1.8s ease-in-out infinite}
@keyframes holdpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,190,100,.5)}50%{box-shadow:0 0 0 10px rgba(255,190,100,0)}}
.badge{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#1b0f2e;border:1px solid var(--line);z-index:5;transition:.25s;color:var(--ink)}
.badge svg{width:14px;height:14px}
.badge.mic{bottom:-2px;inset-inline-start:-2px}
.badge.mic.muted{background:#3a1020;color:#ff8fa3;border-color:rgba(255,92,122,.4)}
.badge.mic.hide{opacity:0;transform:scale(.4)}
.badge.net{top:-2px;inset-inline-end:-2px;background:#3a2a10;color:#ffcf8f;border-color:rgba(255,190,100,.45);
  opacity:0;transform:scale(.4)}
.badge.net.on{opacity:1;transform:scale(1);animation:netpulse 1.6s ease-in-out infinite}
@keyframes netpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,190,100,.5)}50%{box-shadow:0 0 0 7px rgba(255,190,100,0)}}
.seat .nm{font-weight:700;font-size:13.5px;text-align:center;line-height:1.4;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .st{font-size:10.5px;color:var(--dim);text-align:center;min-height:14px}
.cord{flex:1;height:clamp(96px,26vw,132px);min-width:70px;position:relative;align-self:center;margin-bottom:34px}

.makeup{display:none;align-items:center;gap:10px;justify-content:space-between;
  background:rgba(120,140,170,.16);border:1px solid rgba(160,180,210,.3);
  border-radius:16px;padding:9px 12px;margin:6px 0;font-size:12.5px;color:#cfe0f0}
.makeup.on{display:flex;animation:rise .4s}
.makeup.waiting{border-color:var(--acc2);background:rgba(255,143,199,.16)}

.controls{display:flex;gap:6px;justify-content:center;padding:6px 0 2px;flex:none}
.ctl{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:6px 4px;
  transition:.22s;color:var(--ink);flex:1;min-height:44px;justify-content:center}
.ctl i{display:grid;place-items:center}
.ctl i svg{width:16px;height:16px}
.ctl span{font-size:9px;color:var(--dim);font-weight:700;letter-spacing:-.2px}
.ctl:active{transform:scale(.94)}
.ctl:disabled{opacity:.35}
.ctl.on{background:linear-gradient(135deg,rgba(165,107,255,.4),rgba(255,143,199,.3));
  border-color:rgba(201,162,255,.55)}
.ctl.join{background:linear-gradient(135deg,var(--ok),#12a35d);border-color:transparent;color:#fff}
.ctl.join span{color:rgba(255,255,255,.9)}
.ctl.join.leave{background:linear-gradient(135deg,var(--bad),#d3234a)}
.ctl.off{background:rgba(255,92,122,.16);border-color:rgba(255,92,122,.4)}
.ctl.heart{background:linear-gradient(135deg,rgba(255,143,199,.25),rgba(255,92,122,.16));
  border-color:rgba(255,143,199,.4);color:var(--acc2)}
.ctl.heart.hold{transform:scale(1.08);box-shadow:0 0 30px rgba(255,143,199,.55)}

/* وضع السينما: يُصغّر المسرح ليتّسع الفيلم */
#room.cinema-on .stage{min-height:0;padding:2px 14px;flex:0 0 auto}
#room.cinema-on .seats{gap:2px}
#room.cinema-on .discwrap{width:clamp(46px,13vw,62px)}
#room.cinema-on .cord{height:56px;margin-bottom:14px}
#room.cinema-on .seat .st{display:none}
#room.cinema-on .seat .nm{font-size:11.5px}
#room.cinema-on .controls{padding:6px 0 2px}
#room.cinema-on .ctl{min-height:46px;padding:6px 4px}
#room.cinema-on .ctl span{font-size:9.5px}
#mediaBar,#cinemaBar{flex:0 0 auto;z-index:5;position:relative}
#mediaBar:empty,#cinemaBar:empty{display:none}


/* ── الدردشة ── */
/* الشريط يظهر فأين يذهب مكانه؟ كانت min-height تمنع الدردشة من
   الانكماش، فيفيض العمود ويُزاح الرأس والمقعدان وحقلُ الكتابة.
   الآن: مقاسها المفضّل ٤٤٪ من الشاشة، وأدناها صفر — فتتنازل هي وحدها
   ويبقى كلُّ ما فوقها وتحتها في موضعه بالضبط. */
.chat{height:auto;min-height:0;flex-basis:44dvh;display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;
  border-top:1px solid var(--line);background:rgba(8,5,15,.6);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);z-index:5}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;
  font-size:11.5px;color:var(--dim);font-weight:700;border-bottom:1px solid var(--line);flex:none}
.typing{color:var(--acc2);font-weight:500;font-size:11px}
.msgs{flex:1 1 0;min-height:0;overflow-y:auto;padding:12px 12px;display:flex;flex-direction:column;gap:9px}
/* ولا ينكمش الرأس ولا المقعدان ولا الأزرار مهما ضاق المكان */
.top,.stage,#mediaBar,#cinemaBar,.chat-head,.composer{flex-shrink:0}
/* حدٌّ أدنى للدردشة كي لا تختفي تمامًا */
.chat{min-height:132px}
.msgs::-webkit-scrollbar{width:4px}
.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
.bubble{max-width:86%;padding:10px 14px;border-radius:19px;font-size:14.5px;line-height:1.65;
  position:relative;animation:pop .3s cubic-bezier(.2,.9,.3,1);word-break:break-word;cursor:pointer}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.bubble.mine{align-self:flex-start;background:linear-gradient(135deg,var(--acc),#8b4dff);color:#1a0b2e;
  border-bottom-right-radius:7px}
.bubble.theirs{align-self:flex-end;background:rgba(255,255,255,.09);border:1px solid var(--line);
  border-bottom-left-radius:7px}
.bubble .tm{font-size:9.5px;opacity:.6;margin-top:3px;display:block}
/* حالة التسليم: الفقاعة تظهر فور الضغط، وتُعلَن حالتها بصدق */
.bubble .mst{font-weight:700;margin-inline-end:5px;font-size:10px}
.bubble .mst.wait{letter-spacing:1px;animation:mstpulse 1.1s ease-in-out infinite}
.bubble .mst.bad{color:#ff5a6e;font-size:12px;opacity:1}
@keyframes mstpulse{0%,100%{opacity:.35}50%{opacity:.95}}
/* ── نقطة الحضور: أخضر إن كان معك، أحمر إن غادر ──
   تُوضع على حافة الصورة فتُقرأ بلمحة بلا قراءة نصّ. */
.pres{position:absolute;inset-inline-start:2px;bottom:2px;width:13px;height:13px;border-radius:50%;
  border:2.5px solid var(--bg0);background:#8f2a38;z-index:5;
  /* الغائب: أحمرُ باهتٌ ساكن — يُقرأ ولا يلفت */
  box-shadow:0 0 0 1px rgba(0,0,0,.5);opacity:.72;
  transition:background .35s,box-shadow .35s,opacity .35s}
.pres.on{background:#22e07a;opacity:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 12px rgba(34,224,122,.85)}
/* نبضةٌ هادئة حين يكون حاضرًا — كنبض الحياة */
.pres.on::after{content:'';position:absolute;inset:-2.5px;border-radius:50%;
  border:2px solid rgba(34,224,122,.6);animation:presPulse 2.2s ease-out infinite}
@keyframes presPulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.pres.on::after{animation:none}}

/* تبويب المؤثّرات: لكلّ صوتٍ مفتاحه وزرُّ تجربته */
.sfxrow{gap:8px}
.sfxrow .sfxtry{padding:6px 9px;min-width:0;flex:0 0 auto;border-radius:9px}
.vxsw.dim{opacity:.34;pointer-events:none}

/* مؤثّرٌ أرسلتَه: تراه مغلّفًا كما يراه، وفتحُه له وحده */
.fx-locked{position:relative}
.fx-locked::after{content:'';position:absolute;inset:0;z-index:9;cursor:default}
.fxwait{display:block;font-size:9.5px;opacity:.65;margin-top:6px;text-align:center;
  position:relative;z-index:10}
.bubble.pend{opacity:.72}
.bubble.failed{opacity:1;box-shadow:0 0 0 1.5px rgba(255,90,110,.6);cursor:pointer}
.bubble.failed:active{transform:scale(.97)}
.bubble .rx{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.12)}
.bubble .rx i{display:inline-flex;align-items:center;gap:4px;font-style:normal;
  padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.10)}
.bubble .rx i b{font-size:10.5px;font-weight:800;letter-spacing:-.1px;opacity:.92}
/* ملصقات المحادثة المتحركة */
.bubble.stk{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;max-width:none}
.bubble.stk img{height:auto;display:block;transform-origin:50% 85%}
.bubble.stk .tm{opacity:.5;text-align:center;margin-top:0}
.stkgal{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));max-height:320px}
.stkgal .g{background:rgba(255,255,255,.05);border-radius:16px;padding:6px}
.stkgal .g img{width:100%;height:100%;object-fit:contain}
.gal .g img{object-fit:contain}
.avaprev img,.disc img,.avabtn img{object-fit:contain}
/* دخول الملصق ثم حركته الدائمة */
@keyframes stk-in{0%{opacity:0;transform:scale(.72) rotate(-10deg)}55%{opacity:1;transform:scale(1.12) rotate(4deg)}
  75%{transform:scale(.97) rotate(-1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.bubble.stk img{animation:stk-in .55s cubic-bezier(.2,1.4,.4,1) forwards}
.bubble.stk img.anim-beat   {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-beat 1.5s .62s ease-in-out infinite}
.bubble.stk img.anim-squeeze{animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-squeeze 2.2s .62s ease-in-out infinite}
.bubble.stk img.anim-dance  {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-dance 1s .62s ease-in-out infinite}
.bubble.stk img.anim-sway   {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-sway 2.8s .62s ease-in-out infinite}
.bubble.stk img.anim-breathe{animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-breathe 3.2s .62s ease-in-out infinite}
.bubble.stk img.anim-float  {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-float 3s .62s ease-in-out infinite}
.bubble.stk img.anim-wiggle {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-wiggle 2s .62s ease-in-out infinite}
.bubble.stk img.anim-shake  {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-shake 2.4s .62s ease-in-out infinite}
.bubble.stk img.anim-wobble {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-wobble 2.4s .62s ease-in-out infinite}
.bubble.stk img.anim-pull   {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-pull 2.6s .62s ease-in-out infinite}
.bubble.stk img.anim-jump   {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-jump 1.5s .62s cubic-bezier(.3,0,.4,1) infinite}
.bubble.stk img.anim-spin   {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-spin 3.4s .62s ease-in-out infinite}
.bubble.stk img.anim-glow   {animation:stk-in .62s cubic-bezier(.2,1.5,.4,1) forwards, a-glow 2.2s .62s ease-in-out infinite}

@keyframes a-beat{0%,100%{transform:scale(1)}10%{transform:scale(1.12)}20%{transform:scale(1)}30%{transform:scale(1.07)}40%{transform:scale(1)}}
@keyframes a-squeeze{0%,100%{transform:scale(1,1)}45%{transform:scale(1.08,.92)}70%{transform:scale(.97,1.03)}}
@keyframes a-dance{0%,100%{transform:rotate(-6deg) translateY(0)}25%{transform:rotate(0) translateY(-6px)}50%{transform:rotate(6deg) translateY(0)}75%{transform:rotate(0) translateY(-4px)}}
@keyframes a-sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes a-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes a-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes a-wiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(9deg)}30%{transform:rotate(-7deg)}45%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}}
@keyframes a-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px) rotate(-3deg)}30%{transform:translateX(6px) rotate(3deg)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}}
@keyframes a-wobble{0%,100%{transform:skewX(0) scale(1)}30%{transform:skewX(7deg) scale(1.04)}60%{transform:skewX(-6deg) scale(.98)}}
@keyframes a-pull{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(7px) scale(1.05)}}
@keyframes a-jump{0%,55%,100%{transform:translateY(0) scaleY(1)}12%{transform:translateY(0) scaleY(.86)}
  32%{transform:translateY(-16px) scaleY(1.08)}50%{transform:translateY(0) scaleY(.94)}}
@keyframes a-spin{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(8deg)}90%{transform:rotate(-8deg)}}
@keyframes a-glow{0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
  50%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 16px var(--acc2))}}

.bubble.sys{align-self:center;background:rgba(255,255,255,.05);color:var(--dim);font-size:11.5px;
  border-radius:12px;padding:6px 12px;cursor:default}

/* السحب للردّ + زر التفاعل + القلب الطائر */
.bubble{touch-action:pan-y}
.bubble::before{content:'';position:absolute;inset-inline-end:calc(100% + 10px);top:50%;
  width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--acc);opacity:0;
  transition:opacity .18s;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17l-6-5 6-5'/%3E%3Cpath d='M3 12h11a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E") center/18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17l-6-5 6-5'/%3E%3Cpath d='M3 12h11a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E") center/18px no-repeat}
.bubble.swipe-ready::before{opacity:1}
.rxbtn{position:absolute;top:-8px;inset-inline-end:-8px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:#1b0f2e;color:var(--dim);display:grid;place-items:center;
  cursor:pointer;padding:0;opacity:.45;transition:.2s;z-index:3}
.rxbtn:active{transform:scale(.88)}
.bubble:hover .rxbtn{opacity:1;color:var(--acc2)}
.flyh{position:absolute;z-index:62;color:var(--acc2);pointer-events:none;
  animation:flyh 1.1s cubic-bezier(.2,.9,.3,1) forwards;filter:drop-shadow(0 0 10px var(--acc2))}
@keyframes flyh{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(.85)}}

/* الردّ على رسالة + التفاعلات */
.replybar{display:none;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);
  background:rgba(165,107,255,.12)}
.replybar.on{display:flex;animation:pop .25s}
.rtxt{flex:1;min-width:0;font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtxt small{display:block;color:var(--acc);font-size:10.5px;font-weight:700}
.ricon{width:34px;height:34px;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--glass);
  display:grid;place-items:center;cursor:pointer;color:var(--dim);padding:0}
.qref{display:block;border-inline-start:3px solid currentColor;padding:4px 9px;margin-bottom:6px;
  border-radius:8px;background:rgba(0,0,0,.22);font-size:11.5px;opacity:.85;line-height:1.5}
.qref small{display:block;font-weight:700;font-size:10px;opacity:.8}
.bubble .rx svg{width:13px;height:13px;flex:none}
.rxpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.rxb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;
  border:1px solid var(--line);background:var(--glass);cursor:pointer;color:var(--ink);min-height:62px;
  transition:.2s cubic-bezier(.2,.9,.3,1)}
.rxb:active{transform:scale(.9)}
.rxb small{font-size:9.5px;color:var(--dim);font-weight:700;white-space:nowrap}
.rxb.on{background:linear-gradient(135deg,rgba(165,107,255,.4),rgba(255,143,199,.3));border-color:var(--acc);color:var(--acc)}

.composer{display:flex;gap:6px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);flex:none;align-items:center}
.composer input{border-radius:16px;padding:13px 15px;font-size:15px}
.cbtn{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:13px;cursor:pointer;
  background:var(--glass);color:var(--ink);display:grid;place-items:center;transition:.2s;padding:0}
.cbtn:active{transform:scale(.9)}
.cbtn svg{width:18px;height:18px}
.cbtn.send{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;border-color:transparent}

/* ── الشريط السفلي ── */
.dock{display:flex;gap:6px;overflow:hidden;padding:6px 12px calc(6px + env(safe-area-inset-bottom));
  background:rgba(8,5,15,.82);border-top:1px solid var(--line);flex:none;z-index:6}
.dock:empty{display:none}
.dock button{flex:1 1 0;min-width:0;background:transparent;border:0;color:var(--dim);display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:7px 1px;border-radius:12px;cursor:pointer;font-size:9.5px;font-weight:700;
  overflow:hidden;text-align:center;line-height:1.25;
  transition:.2s;min-height:46px}
.dock button svg{width:19px;height:19px}
.dock button:active{background:var(--glass);color:var(--acc)}

/* ── النوافذ ── */
.modal{position:absolute;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;
  background:rgba(5,2,12,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.on{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-height:88%;overflow-y:auto;background:linear-gradient(170deg,#1c1030,#120a20);
  border:1px solid var(--line);border-radius:26px 26px 0 0;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));animation:up .38s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet h3{margin:0 0 4px;font-size:18px}
.sheet .sub{color:var(--dim);font-size:12.5px;margin:0 0 16px;line-height:1.7}
.grab{width:40px;height:4px;background:rgba(255,255,255,.22);border-radius:9px;margin:0 auto 16px}
.row{display:flex;gap:10px;margin-top:14px}
.row .btn{flex:1}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{border-radius:17px;padding:12px;text-align:center;cursor:pointer;border:2px solid transparent;
  font-size:12.5px;font-weight:700;transition:.25s;position:relative;overflow:hidden;min-height:92px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);
  background-size:cover;background-position:center}
.tile.on{border-color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.5)}
.tile .tint{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.tile span{position:relative}
.modelist{display:flex;flex-direction:column;gap:8px}
.moderow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);transition:.22s cubic-bezier(.2,.9,.3,1);min-height:60px}
.moderow:active{transform:scale(.98)}
.moderow .mi{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(0,0,0,.3);color:var(--dim)}
.moderow .mtx{flex:1;min-width:0}
.moderow .mtx b{display:block;font-size:14.5px}
.moderow .mtx small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px;line-height:1.5}
.moderow.on{border-color:var(--acc);background:rgba(165,107,255,.18)}
.moderow.on .mi{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e}
.moderow.on .mtx b{color:var(--acc)}

/* ── مصباح القراءة (نمط الظلام) ── */
#lamp{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle var(--lr,190px) at var(--lx,50%) var(--ly,45%),
    rgba(255,214,150,.32) 0%, rgba(255,196,120,.14) 42%, rgba(0,0,0,0) 72%)}
#lamp.on{opacity:1}
#phone.m-dark #bgimg{filter:brightness(.09) saturate(.35)}
#phone.m-dark #bg{opacity:.25}
#phone.m-dark .top,#phone.m-dark .dock{background:rgba(2,1,4,.96)}
#phone.m-dark .chat{background:#010103}
#phone.m-dark .composer{background:#010103}
#phone.m-dark .composer input{background:#000;color:#3a3243}
#phone.m-dark .composer input::placeholder{color:#241f2c}
#phone.m-dark .seat .st,#phone.m-dark .rsub{opacity:.35}
#phone.m-dark .chat-head{opacity:.4}

/* المصباح اليدوي — الظلام دامس ولا يُقرأ إلا ما يمرّ عليه الضوء */
#torch{position:absolute;inset:0;z-index:8;display:none;pointer-events:none;
  background:radial-gradient(circle var(--trr,10px) at var(--tx,50%) var(--ty,50%),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%, rgba(2,1,4,.72) 68%, rgba(2,1,4,.995) 88%);
  transition:--trr .25s ease}
#torch.on{display:block;--trr:14px}
#torch.on.lit{--trr:165px}
@property --trr{syntax:'<length>';inherits:false;initial-value:14px}
/* ضوء دافئ صغير يتبع الإصبع فوق المصباح */
#torch.on.lit::after{content:'';position:absolute;left:var(--tx);top:var(--ty);width:330px;height:330px;
  margin:-165px 0 0 -165px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,140,.16),rgba(255,196,120,.05) 55%,transparent 72%)}
#phone.m-dark .lamp-soft{opacity:.35}
#phone.m-dark .msgs{cursor:crosshair}
#phone.m-dark .chat::after{content:'مرّر إصبعك لتقرأ';position:absolute;bottom:74px;left:0;right:0;
  text-align:center;font-size:11px;color:rgba(255,214,150,.4);z-index:9;pointer-events:none;
  animation:hintfade 4s ease-in-out infinite}
@keyframes hintfade{0%,100%{opacity:.25}50%{opacity:.7}}
.chat{position:relative}

/* ── سرّ: الرسالة تتلاشى بعد قراءتها ── */
#phone.m-secret .chat-head::after{content:'تختفي بعد القراءة';color:#b6ffd9;font-size:10px;
  margin-inline-start:8px;opacity:.8}
.bubble.burning{animation:burnfade 9s linear forwards}
@keyframes burnfade{0%,55%{opacity:1;filter:none}
  80%{opacity:.55;filter:blur(.4px)}100%{opacity:.22;filter:blur(1.4px)}}
.bubble.gone{animation:goneaway .45s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
@keyframes goneaway{to{opacity:0;transform:scale(.82) translateY(-8px);filter:blur(6px)}}

/* ── مطر ورعد ── */
#phone.m-rain::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(190,215,255,.1),transparent 40%);animation:thunder 11s infinite}
@keyframes thunder{0%,92%,100%{opacity:0}93%{opacity:.85}94%{opacity:.1}95.5%{opacity:.6}97%{opacity:0}}

/* ── ذكرى ── */
#phone.m-memory #bgimg{filter:sepia(.72) contrast(1.06) brightness(.8)}
#phone.m-memory .stage,#phone.m-memory .chat{filter:sepia(.28)}
#phone.m-memory::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.09;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);background-size:3px 3px;
  animation:grain .6s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-1px,1px)}66%{transform:translate(1px,-1px)}}

/* ── صمت ── */
#phone.m-silence #bg{opacity:.25}
#phone.m-silence *{animation-duration:0s!important}
#phone.m-silence .cord{opacity:.9}

/* ── فجر ── */
#phone.m-dawn #bgimg{animation:dawnrise 90s ease-in-out infinite alternate}
@keyframes dawnrise{0%{filter:brightness(.28) saturate(.7) hue-rotate(-12deg)}
  100%{filter:brightness(1.05) saturate(1.15) hue-rotate(8deg)}}

.avaprev{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  border:2px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.2),rgba(0,0,0,.35))}
.avaprev img{width:100%;height:100%;object-fit:cover}
.avaprev svg{width:46%;height:46%}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;margin-top:8px;
  max-height:220px;overflow-y:auto}
.gal .g{aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;border:2px solid transparent;
  background:rgba(255,255,255,.06);display:grid;place-items:center;transition:.2s;color:var(--acc)}
.gal .g img{width:100%;height:100%;object-fit:cover}
.gal .g svg{width:46%;height:46%}
.gal .g.on{border-color:var(--acc);background:rgba(165,107,255,.22)}
.colors{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.col{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s}
.col.on{border-color:#fff;transform:scale(1.15)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.stat{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}
.stat b{display:block;font-size:19px;background:linear-gradient(100deg,#fff,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:11px;color:var(--dim)}

#fxLayer{position:absolute;inset:0;pointer-events:none;z-index:60}
.pw{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  border:2px solid var(--acc2);animation:pw 1.5s cubic-bezier(.15,.75,.35,1) forwards}
@keyframes pw{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(7)}}
.bigheart{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:61;color:var(--acc2);
  animation:bh 1.5s cubic-bezier(.2,.9,.3,1) forwards;filter:drop-shadow(0 0 34px var(--acc2))}
.bigheart svg{width:110px;height:110px}
@keyframes bh{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  40%{transform:translate(-50%,-50%) scale(.98)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
.syncflash{position:absolute;inset:0;z-index:59;
  background:radial-gradient(circle at 50% 46%,rgba(255,143,199,.5),transparent 62%);
  animation:sf 1.8s ease-out forwards}
@keyframes sf{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.syncmsg{position:absolute;top:40%;left:50%;transform:translateX(-50%);z-index:62;text-align:center;
  font-size:21px;font-weight:800;white-space:nowrap;animation:bh 2.1s forwards;
  background:linear-gradient(100deg,#fff,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* فك الارتباط + صوت القبلة */
.ubox{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:8px}
.ubox small{color:var(--dim);font-size:11px;display:block;margin-bottom:6px}
.ubox p{margin:0;font-size:14px;line-height:1.85}
.ubox.warn{background:rgba(255,92,122,.1);border-color:rgba(255,92,122,.3)}
textarea{background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:13px;padding:12px 14px;
  font-size:14.5px;outline:none;width:100%;resize:none;line-height:1.8}
textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(165,107,255,.15)}
.krec{display:flex;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--line);
  border-radius:18px;padding:14px}
.kbtn{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;transition:.25s}
.kbtn.rec{background:linear-gradient(135deg,var(--bad),#d3234a);color:#fff;
  animation:recpulse 1.2s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,122,.55)}50%{box-shadow:0 0 0 14px rgba(255,92,122,0)}}
.kinfo b{display:block;font-size:15px}
.kinfo small{color:var(--dim);font-size:12px}
.vplay{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(0,0,0,.28);color:inherit;font-size:12px;font-weight:700;cursor:pointer}
.vplay.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;border-color:transparent}

/* استوديو الصوت */
.vxrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.vxrow b{display:block;font-size:14.5px;font-weight:700}
.vxrow small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px;line-height:1.5}
.vxsw{width:52px;height:30px;border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.35);
  position:relative;cursor:pointer;flex:none;transition:.25s;padding:0}
.vxsw span{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;
  background:var(--dim);transition:.25s}
.vxsw.on{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent}
.vxsw.on span{inset-inline-start:25px;background:#fff}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;padding:0;
  background:linear-gradient(90deg,var(--acc),var(--acc2));border:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer}

#toast{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%) translateY(-26px);z-index:99;background:rgba(28,16,48,.97);
  border:1px solid var(--line);border-radius:15px;padding:11px 18px;font-size:13px;opacity:0;
  transition:.35s;pointer-events:none;max-width:86%;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.55)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.05s!important}
}

/* ── زر قوقل ── */
.gwrap{display:none}
.gwrap.on{display:block}
#gbtn{display:flex;justify-content:center}

/* ═══ محاذاة صارمة: أنا يمينًا دائمًا · هو يسارًا دائمًا ═══ */
.msgs{direction:ltr;align-items:stretch}
.bubble{direction:rtl;margin:0!important}
.bubble.side-r{align-self:flex-end!important}
.bubble.side-l{align-self:flex-start!important}
.bubble.sys{align-self:center!important}

/* صور الرسائل أوضح وأكبر */
/* الحجم النهائي مضمون: الحركة تبدأ من مقياس صغير لكن العنصر يبقى بحجمه */
.bubble.stk img{width:112px!important;height:auto;image-rendering:auto;
  animation-fill-mode:forwards!important;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.6)) saturate(1.08) contrast(1.04)}
@media (min-width:400px){.bubble.stk img{width:126px!important}}
/* إن تعطّلت الحركة لأي سبب يبقى الملصق بحجمه الكامل */
@media (prefers-reduced-motion:reduce){.bubble.stk img{transform:none!important}}

/* لوحة مستوى الصوت */
.volbig{text-align:center;padding:18px 0 10px}
.volnum{font-size:52px;font-weight:800;line-height:1;
  background:linear-gradient(100deg,#fff,var(--acc) 50%,var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.volnum small{font-size:22px}
.volwho{color:var(--dim);font-size:13px;margin-top:6px}
.volmarks{display:flex;justify-content:space-between;color:var(--dim);font-size:10.5px;margin-top:7px}

/* لوحة التحكم: لا تُزيح الصفحة */
.adm{width:100%!important;max-width:100%!important;left:0!important;right:0!important;overflow-x:hidden!important}

/* ═══ شريط الدخول العائم ═══ */
.entrybar{position:absolute;top:calc(58px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%) translateY(-14px);z-index:75;display:flex;align-items:center;gap:11px;
  padding:10px 18px 10px 14px;border-radius:20px;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,color-mix(in srgb,var(--e1) 26%,#140b22),color-mix(in srgb,var(--e2) 20%,#140b22));
  border:1px solid color-mix(in srgb,var(--e1) 45%,transparent);
  box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 26px color-mix(in srgb,var(--e1) 28%,transparent);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1);max-width:88%}
.entrybar.on{opacity:1;transform:translateX(-50%) translateY(0)}
.entrybar .ei{color:var(--e1);display:grid;place-items:center;flex:none;
  filter:drop-shadow(0 0 8px var(--e1));animation:entpulse 1.9s ease-in-out infinite}
@keyframes entpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.entrybar .et{min-width:0}
.entrybar .et b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrybar .et small{display:block;font-size:11px;color:var(--dim);margin-top:1px}

/* اختيار الدخولية */
.entgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.entc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border-radius:15px;
  border:1px solid var(--line);background:var(--glass);cursor:pointer;min-height:64px;justify-content:center;
  transition:.22s cubic-bezier(.2,.9,.3,1)}
.entc span{color:var(--e1);display:grid;place-items:center}
.entc small{font-size:10px;color:var(--dim);font-weight:700}
.entc.on{border-color:var(--e1);background:color-mix(in srgb,var(--e1) 16%,transparent)}
.entc.on small{color:var(--e1)}

/* شكل المحادثة */
.lanes{display:flex;flex-direction:column;gap:7px}
.lanec{padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);
  cursor:pointer;font-size:13px;transition:.22s;min-height:44px;display:flex;align-items:center}
.lanec.on{border-color:var(--acc);background:rgba(165,107,255,.16);color:var(--acc)}

/* ═══ حركة أهدأ في كل مكان ═══ */
.ctl:active{transform:scale(.975)}
.icon:active{transform:scale(.96)}
.cbtn:active{transform:scale(.96)}
.btn.primary:active{transform:scale(.99)}
.ctl.heart.hold{transform:scale(1.035);box-shadow:0 0 20px rgba(255,143,199,.42)}
.rxb:active{transform:scale(.97)}
.dock button:active{transform:scale(.97)}
@keyframes pw{0%{opacity:.5;transform:scale(.4)}100%{opacity:0;transform:scale(5)}}
@keyframes bh{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}

/* تبويبا مجموعتَي الملصقات */
.stktabs{margin-bottom:12px}
.stktabs .tab{font-size:13px;padding:9px}

/* تشخيص الصوت داخل «مستوى الصوت» */
.vdiag{margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--glass)}
.vdiag div{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;font-size:12.5px}
.vdiag div+div{border-top:1px solid var(--line)}
.vdiag span{color:var(--dim)}
.vdiag b{font-weight:700;color:var(--ink)}

/* زرّ إنقاذ: يظهر إن منع النظام تشغيل صوت الطرف الآخر */
.voicetap{position:absolute;left:14px;right:14px;bottom:88px;z-index:58;min-height:46px;
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  border:1px solid var(--acc);border-radius:15px;background:rgba(165,107,255,.22);
  color:var(--ink);font:inherit;font-size:13.5px;font-weight:800;
  backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.5);
  animation:vtIn .24s ease}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.voicetap{animation:none}}

/* لوحة التسجيل: مضغوطة كي يظهر زرّ التسجيل بلا تمرير */
.ksheet h3{margin:0 0 4px}
.ksheet .sub{margin:0 0 12px;font-size:12.5px;line-height:1.7}
.ksheet .krec{margin:0}
.ksheet .row{margin-top:12px}
.ksheet .fine{margin-top:10px;font-size:11.5px}

/* شريط تحذير المايك */
.micbar{position:relative;margin:0 10px 8px;flex:none;
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:14px;
  border:1px solid rgba(255,92,122,.45);background:rgba(60,12,26,.95);color:#ffd9e0;
  font-size:12px;font-weight:700;backdrop-filter:blur(10px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.micbar span{flex:1;min-width:0;line-height:1.5}
.micbar button{flex:none;border:0;border-radius:11px;padding:9px 13px;cursor:pointer;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;font:inherit;font-weight:800}

/* شرح المايك الصامت */
.mhelp{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.mhelp>div{border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:var(--glass)}
.mhelp b{display:block;font-size:13px;margin-bottom:4px}
.mhelp small{display:block;color:var(--dim);font-size:11.5px;line-height:1.85}
.mhelp small b{display:inline;color:var(--acc);font-size:11.5px;margin:0}

/* حلقةٌ نابضة حول صورته وهو يتكلّم */
.seat.talking .discwrap::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--acc);opacity:.85;animation:talkRing 1.1s ease-out infinite;pointer-events:none}
@keyframes talkRing{0%{transform:scale(.94);opacity:.85}100%{transform:scale(1.14);opacity:0}}
.seat.talking .st{color:var(--acc)}
@media (prefers-reduced-motion:reduce){.seat.talking .discwrap::after{animation:none;opacity:.6}}

/* بطاقة خلفيتهما الخاصة */
.tile.own{background-color:rgba(255,255,255,.05);border:1px dashed rgba(201,162,255,.5)}
.tile.own span{font-weight:800}

/* ── لوحة الصوت ── */
.sndtabs{margin-bottom:14px}
.sndtabs .tab{font-size:12.5px;padding:9px 4px}
.sndsec{animation:fade .22s}
.nrbox{border:1px solid var(--line);border-radius:16px;padding:12px 13px;margin:12px 0;background:var(--glass)}
.nrbox>b{display:block;font-size:13.5px;margin-bottom:3px}
.nrbox>small{display:block;color:var(--dim);font-size:11.5px;line-height:1.7;margin-bottom:10px}
.nrlvls{display:flex;gap:5px;margin-bottom:10px}
.nrl{flex:1;border:1px solid var(--line);border-radius:11px;padding:9px 2px;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--dim);font:inherit;font-size:11px;font-weight:800}
.nrl.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0b2e;border-color:transparent}
.nrl:active{transform:scale(.95)}
.nrmeter{height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:6px}
.nrmeter i{display:block;height:100%;width:0;border-radius:6px;transition:width .1s linear}
.nrbox #nrState{color:var(--dim);font-size:11px}

/* ── معرض الخلفيات ── */
.bgmine{margin-bottom:16px}
.bgmine>b,.bglbl{display:block;font-size:13px;margin:0 0 9px;color:var(--ink)}
.bglbl{margin-top:16px}
.tile{position:relative}
.tiledel{position:absolute;top:6px;inset-inline-end:6px;width:26px;height:26px;border-radius:9px;
  border:1px solid rgba(255,255,255,.2);background:rgba(20,8,30,.8);color:#ffb3c2;
  display:grid;place-items:center;cursor:pointer;padding:0;z-index:2}
.tiledel:active{transform:scale(.9)}


/* ── الحدُّ الآمن يسري على كلّ رأسٍ يعلو الشاشة ── */
.gm-top{padding-top:max(calc(12px + env(safe-area-inset-top, 0px)), 44px)}
#gmWin .box{padding-top:max(26px, calc(26px + env(safe-area-inset-top, 0px)))}
/* على الحاسوب حيث الإطار محدود، يكفي الهامش العاديّ */
@media (min-width:520px) and (min-height:800px){
  .top{padding-top:14px}
  .gm-top{padding-top:12px}
}