/* ============================================================
   WormGPT — Voice Mode v3 (تصميم محسّن)
   • كرة دموية لامعة + هالات ناعمة + موجات راقية
   • خلفية سودا نظيفة + توهج أحمر خفيف
   ============================================================ */
.wg-vm{
  position:fixed; inset:0; z-index:2147483000; display:none; flex-direction:column;
  background:#000; color:#fff; overflow:hidden;
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
.wg-vm.open{display:flex}
.wg-vm *{box-sizing:border-box}
/* توهج خلفي ناعم */
.wg-vm:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(closest-side at 50% 44%, rgba(190,0,40,.20), rgba(190,0,40,.06) 55%, transparent 78%);
}

/* ===== الشريط العلوي ===== */
.wg-vm-top{
  position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 16px 4px;
}
.wg-vm-circ{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:0;background:rgba(255,255,255,.10);color:#fff;backdrop-filter:blur(8px);
  transition:transform .15s, background .2s;
}
.wg-vm-circ:hover{background:rgba(255,255,255,.18)}
.wg-vm-circ:active{transform:scale(.93)}
.wg-vm-circ svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.wg-vm-circ.small{width:38px;height:38px}
.wg-vm-circ.small svg{width:17px;height:17px}

/* ===== المنطقة الوسطى ===== */
.wg-vm-stage{
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:4px 18px;
}

/* ===== محرّك الرسم (بدون كرة): أعمدة / موجة / حلقات ===== */
.wg-vm-vizwrap{
  position:relative; flex:0 0 auto; display:grid; place-items:center;
  width:min(88vw,560px); height:min(46vw,240px);
}
.wg-vm-viz{position:absolute; inset:0; width:100%; height:100%; display:block}
.wg-vm-glow{
  position:absolute; inset:6% 10%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(200,0,40,.30), rgba(200,0,40,.06) 62%, transparent 78%);
  filter:blur(10px); transition:opacity .3s;
}
.wg-vm-vizwrap.thinking .wg-vm-glow{background:radial-gradient(closest-side, rgba(255,150,20,.26), transparent 76%)}
.wg-vm-vizwrap.speaking .wg-vm-glow{background:radial-gradient(closest-side, rgba(40,200,110,.24), transparent 76%)}

/* زر المايك في النص */
.wg-vm-mic{
  position:relative; z-index:2; width:64px;height:64px;border-radius:50%;cursor:pointer;border:0;
  display:grid;place-items:center; color:#fff;
  background:rgba(255,255,255,.13); backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s, background .25s, box-shadow .3s;
}
.wg-vm-mic:hover{background:rgba(255,255,255,.2)}
.wg-vm-mic:active{transform:scale(.94)}
.wg-vm-mic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wg-vm-vizwrap.listening .wg-vm-mic{
  background:linear-gradient(135deg,#ff0033,#8b0019);
  box-shadow:0 14px 44px rgba(200,0,40,.6), 0 0 0 0 rgba(224,0,48,.45);
  animation:wgmicpulse 2.1s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes wgmicpulse{
  0%{box-shadow:0 14px 44px rgba(200,0,40,.55), 0 0 0 0 rgba(224,0,48,.45)}
  70%{box-shadow:0 14px 44px rgba(200,0,40,.55), 0 0 0 26px rgba(224,0,48,0)}
  100%{box-shadow:0 14px 44px rgba(200,0,40,.55), 0 0 0 0 rgba(224,0,48,0)}
}
.wg-vm-vizwrap.thinking .wg-vm-mic{background:linear-gradient(135deg,#ffb020,#a25c05);box-shadow:0 14px 44px rgba(180,110,10,.5)}
.wg-vm-vizwrap.speaking .wg-vm-mic{background:linear-gradient(135deg,#37d67a,#0f6b3a);box-shadow:0 14px 44px rgba(20,150,80,.5)}

/* الحالة */
.wg-vm-status{
  flex:0 0 auto; font-size:1.02rem; font-weight:800; color:#e6e6ea; text-align:center;
  min-height:30px; padding:8px 16px; border-radius:99px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07); backdrop-filter:blur(8px); letter-spacing:.01em;
}
.wg-vm-status .lvl{display:inline-block; margin-inline-start:8px; font-size:.76rem; color:#ff8fa3; opacity:.95}

/* ===== بطاقات النص ===== */
.wg-vm-panels{
  flex:0 1 auto; width:min(660px,100%); min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:2px;
  scrollbar-width:none;
}
.wg-vm-panels::-webkit-scrollbar{width:0}
.wg-vm-card{
  border-radius:20px; padding:13px 15px; border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.045); backdrop-filter:blur(10px);
  animation:wgvmfade .32s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes wgvmfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wg-vm-card.you{
  border-color:rgba(224,0,48,.32);
  background:linear-gradient(145deg, rgba(224,0,48,.17), rgba(224,0,48,.05));
}
.wg-vm-card.ai{border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.05)}
.wg-vm-card h5{
  margin:0 0 7px; font-size:.66rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:#9a9aa3; display:flex; align-items:center; gap:7px;
}
.wg-vm-card.you h5{color:#ff9fb0}
.wg-vm-card h5 svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wg-vm-txt{font-size:1.06rem;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;color:#fbfbfc;font-weight:600}
.wg-vm-card.ai .wg-vm-txt{font-size:.99rem;font-weight:500;color:#eaeaee}
.wg-vm-txt:empty:before{content:attr(data-ph);color:#6f6f79;font-weight:500}
.wg-vm-interim{color:#ff9fb0}

/* ===== الشريط السفلي ===== */
.wg-vm-bottom{
  position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:flex-end; gap:10px;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85) 40%);
}
.wg-vm-pill{
  flex:1 1 auto; min-width:0; display:flex; align-items:flex-end; gap:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); backdrop-filter:blur(14px);
  border-radius:28px; padding:7px 8px 7px 16px; transition:.18s;
}
.wg-vm-pill:focus-within{border-color:rgba(255,60,96,.6); background:rgba(255,255,255,.10)}
.wg-vm-pill textarea{
  flex:1 1 auto; min-width:0; min-height:28px; max-height:110px; resize:none; border:0; outline:0;
  background:transparent; color:#fff; font:inherit; font-size:16px; line-height:1.5; padding:6px 2px;
}
.wg-vm-pill textarea::placeholder{color:#8b8b95}
.wg-vm-action{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:0;
  background:rgba(255,255,255,.12); color:#fff; transition:transform .15s, background .2s, box-shadow .25s; flex:0 0 auto;
}
.wg-vm-action:hover{background:rgba(255,255,255,.2)}
.wg-vm-action:active{transform:scale(.93)}
.wg-vm-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wg-vm-action.send{background:linear-gradient(135deg,#ff0033,#8b0019);box-shadow:0 10px 28px rgba(200,0,40,.5)}
.wg-vm-action.rec{background:linear-gradient(135deg,#ff2a55,#c9002a);animation:wgvmrec 1.5s infinite}
@keyframes wgvmrec{0%{box-shadow:0 0 0 0 rgba(224,0,48,.5)}70%{box-shadow:0 0 0 16px rgba(224,0,48,0)}100%{box-shadow:0 0 0 0 rgba(224,0,48,0)}}
.wg-vm-bottom .wg-vm-circ{width:48px;height:48px;background:rgba(255,255,255,.12)}
.wg-vm-bottom .wg-vm-circ:first-child{background:#f4f4f5;color:#111}
.wg-vm-bottom .wg-vm-circ:first-child:hover{background:#fff}

/* ===== شيت الإعدادات ===== */
.wg-vm-sheet{
  position:absolute; inset:auto 0 0 0; z-index:8; display:none; flex-direction:column; gap:13px;
  padding:18px 16px calc(22px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.10); border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,#141418,#0a0a0d); box-shadow:0 -30px 90px rgba(0,0,0,.85); max-height:86vh; overflow:auto;
  animation:wgvmsheet .28s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes wgvmsheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.wg-vm-sheet.open{display:flex}
.wg-vm-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.wg-vm-sheet-head b{font-size:1.04rem}
.wg-vm-row{display:grid;gap:6px}
.wg-vm-row>label{font-size:.76rem;font-weight:900;color:#9a9aa3}
.wg-vm-row select,.wg-vm-row input[type=range]{
  width:100%;min-height:46px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:.87rem;
}
.wg-vm-row input[type=range]{padding:0;min-height:34px;accent-color:#ff0033}
.wg-vm-note{font-size:.74rem;color:#8b8b95;line-height:1.75}
.wg-vm-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(255,255,255,.045)}
.wg-vm-sw b{font-size:.86rem;font-weight:800}
.wg-vm-tag{font-size:.68rem;padding:5px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.16);color:#c4c4cc;font-weight:900;cursor:pointer}
.wg-vm-tag.on{background:rgba(255,0,51,.2);border-color:rgba(255,0,51,.5);color:#ffb0c0}

/* توست */
.wg-vm-toast{
  position:fixed;z-index:2147483001;bottom:120px;left:50%;transform:translateX(-50%);
  background:rgba(20,20,24,.97);border:1px solid rgba(255,255,255,.14);color:#f4f4f5;
  padding:12px 16px;border-radius:16px;font-size:.86rem;font-weight:800;
  box-shadow:0 20px 60px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .2s;
  max-width:min(90vw,460px);text-align:center;line-height:1.75;
}
.wg-vm-toast.show{opacity:1}

/* ============================================================
   زر الوضع الصوتي — التصميم المطلوب (دايرة حمرا + 4 شرائط بيضا متحركة)
   نفس تصميم المستخدم بالحرف (مقاس مصغّر ليناسب شريط الكتابة)
   ============================================================ */
#wgVmOpenBtn.wg-voice-mode-btn{
  width:36px!important;height:36px!important;min-width:36px!important;flex:0 0 36px!important;
  border-radius:50%!important;border:none!important;padding:0!important;
  background-color:#ff2a2a!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
  box-shadow:0 8px 20px rgba(255,42,42,.5)!important;
  transition:transform .2s ease, box-shadow .2s ease!important;
  cursor:pointer!important;
}
#wgVmOpenBtn.wg-voice-mode-btn:hover{box-shadow:0 10px 25px rgba(255,42,42,.8)!important}
#wgVmOpenBtn.wg-voice-mode-btn:active{transform:scale(.95)!important}
#wgVmOpenBtn.wg-voice-mode-btn svg{display:none!important}

/* الموجات جوه الزر */
#wgVmOpenBtn .wg-wf{
  display:flex;align-items:center;gap:2.5px;height:18px;
}
#wgVmOpenBtn .wg-wf span{
  display:block;width:2.5px;background:#ffffff;border-radius:10px;
  animation:wgWvBtn 1s ease-in-out infinite alternate;
}
#wgVmOpenBtn .wg-wf span:nth-child(1){height:7px;animation-delay:0s}
#wgVmOpenBtn .wg-wf span:nth-child(2){height:15px;animation-delay:.2s}
#wgVmOpenBtn .wg-wf span:nth-child(3){height:11px;animation-delay:.4s}
#wgVmOpenBtn .wg-wf span:nth-child(4){height:5px;animation-delay:.6s}
@keyframes wgWvBtn{
  0%{transform:scaleY(.6);opacity:.7}
  100%{transform:scaleY(1.2);opacity:1}
}

/* ===== نفس التصميم للزر الكبير في شاشة الوضع الصوتي ===== */
.wg-vm-mic .wg-wf{display:flex;align-items:center;gap:5px;height:34px}
.wg-vm-mic .wg-wf span{
  display:block;width:5px;background:#fff;border-radius:10px;
  animation:wgWvBtn 1s ease-in-out infinite alternate;
}
.wg-vm-mic .wg-wf span:nth-child(1){height:14px;animation-delay:0s}
.wg-vm-mic .wg-wf span:nth-child(2){height:30px;animation-delay:.2s}
.wg-vm-mic .wg-wf span:nth-child(3){height:22px;animation-delay:.4s}
.wg-vm-mic .wg-wf span:nth-child(4){height:10px;animation-delay:.6s}
.wg-vm-mic svg{display:none}
.wg-vm-mic{background-color:#ff2a2a!important;box-shadow:0 8px 20px rgba(255,42,42,.5)!important;border:none}
.wg-vm-mic:hover{box-shadow:0 10px 25px rgba(255,42,42,.8)!important}
.wg-vm-mic:active{transform:scale(.95)}

/* ===== الاستبدال: فاضي → صوت | فيه كتابة → إرسال | البوت بيرد → إيقاف فقط ===== */
body.wg-composer-replying #wgVmOpenBtn{display:none!important}
body.wg-composer-replying #sendBtn{display:flex!important}
/* أمان إضافي: لو الزر في وضع الإيقاف، اخفي أي زر صوت جوه نفس الحاوية */
.input-box #sendBtn.is-stop-mode + #wgVmOpenBtn,
.input-box #sendBtn.is-stop-mode ~ #wgVmOpenBtn{display:none!important}

body.wg-composer-empty #sendBtn:not(.is-stop-mode){display:none!important}
body.wg-composer-typing #wgVmOpenBtn{display:none!important}

@media(max-width:420px){
    .wg-vm-status{font-size:.94rem;padding:7px 13px}
  .wg-vm-txt{font-size:1rem}
  .wg-vm-action{width:42px;height:42px}
  .wg-vm-bottom .wg-vm-circ{width:46px;height:46px}
  #wgVmOpenBtn.wg-voice-mode-btn{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important}
  #wgVmOpenBtn .wg-wf{gap:2px;height:16px}
  #wgVmOpenBtn .wg-wf span{width:2.2px}
  #wgVmOpenBtn .wg-wf span:nth-child(1){height:6px}
  #wgVmOpenBtn .wg-wf span:nth-child(2){height:13px}
  #wgVmOpenBtn .wg-wf span:nth-child(3){height:9px}
  #wgVmOpenBtn .wg-wf span:nth-child(4){height:5px}
}
@media(max-height:620px){
    .wg-vm-stage{gap:11px;padding:2px 14px}
}

/* موجة الزر السفلي في شاشة الوضع الصوتي */
.wg-vm-action .wg-wf{display:flex;align-items:center;justify-content:center;gap:2.5px;height:18px}
.wg-vm-action .wg-wf span{display:block;width:2.5px;background:#fff;border-radius:10px;animation:wgWvBtn 1s ease-in-out infinite alternate}
.wg-vm-action .wg-wf span:nth-child(1){height:7px;animation-delay:0s}
.wg-vm-action .wg-wf span:nth-child(2){height:15px;animation-delay:.2s}
.wg-vm-action .wg-wf span:nth-child(3){height:11px;animation-delay:.4s}
.wg-vm-action .wg-wf span:nth-child(4){height:5px;animation-delay:.6s}
.wg-vm-action:has(.wg-wf){background-color:#ff2a2a!important;box-shadow:0 8px 20px rgba(255,42,42,.5)!important}
.wg-vm-action:has(.wg-wf):hover{box-shadow:0 10px 25px rgba(255,42,42,.8)!important}

/* مؤشر حالة المايك */
.wg-vm-status .wg-mic-badge{
  display:inline-block;margin-inline-start:8px;font-size:.72rem;font-weight:900;
  padding:3px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.14);
  color:#b9b9c1;background:rgba(255,255,255,.05);transition:.25s;
}
.wg-vm-status .wg-mic-badge[data-on="1"]{
  color:#ffb0c0;border-color:rgba(255,0,51,.45);background:rgba(255,0,51,.16);
}

/* ============================================================
   v5 — وجه بسيط: النص فوق (في النص) + زر X صغير في الأسفل
   ============================================================ */
.wg-vm.wg-vm-min{ background:#000 !important; }
.wg-vm.wg-vm-min:before{ display:none !important; }

/* نخفي كل حاجة ما عدا النص وزر الإنهاء */
.wg-vm.wg-vm-min .wg-vm-top,
.wg-vm.wg-vm-min .wg-vm-sheet,
.wg-vm.wg-vm-min .wg-vm-vizwrap,
.wg-vm.wg-vm-min .wg-vm-status,
.wg-vm.wg-vm-min .wg-vm-bottom{ display:none !important; }

/* منطقة النص (فوق الزر) */
.wg-vm.wg-vm-min .wg-vm-stage{
  flex:1 1 auto; align-items:center; justify-content:center;
  padding:calc(28px + env(safe-area-inset-top)) 22px 140px;
}
.wg-vm.wg-vm-min .wg-vm-panels{
  width:100%; max-width:680px; max-height:100%;
  gap:24px; overflow-y:auto; align-items:center;
}
.wg-vm.wg-vm-min .wg-vm-card{
  width:100%; background:transparent !important; border:0 !important;
  box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding:0 !important;
}
.wg-vm.wg-vm-min .wg-vm-card h5{ display:none !important; }
.wg-vm.wg-vm-min .wg-vm-txt{
  text-align:center; white-space:pre-wrap;
  font-size:1.45rem; line-height:1.7; font-weight:700; color:#fff; letter-spacing:0;
}
.wg-vm.wg-vm-min .wg-vm-card.ai .wg-vm-txt{ font-size:1.34rem; font-weight:600; color:#fff; }
.wg-vm.wg-vm-min .wg-vm-card.you .wg-vm-txt{ font-size:.98rem; font-weight:500; color:#8b8b95; }
.wg-vm.wg-vm-min .wg-vm-txt:empty:before{ content:"" !important; }

/* زر X صغير في الأسفل */
.wg-vm-min .wg-vm-x{
  position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom));
  top:auto; transform:translateX(-50%);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; border:0; cursor:pointer;
  background:#fff; color:#0a0a0a; z-index:9;
  box-shadow:0 10px 28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .16s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.wg-vm-min .wg-vm-x:hover{ box-shadow:0 12px 32px rgba(0,0,0,.7); }
.wg-vm-min .wg-vm-x:active{ transform:translateX(-50%) scale(.9); }
.wg-vm-min .wg-vm-x svg{
  width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.wg-vm-min .wg-vm-x:after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid rgba(255,42,85,.55); pointer-events:none;
  animation:wgVmFacePulse 2.2s ease-in-out infinite;
}
.wg-vm-min.fst-think .wg-vm-x:after{ border-color:rgba(255,176,32,.75); animation-duration:1.1s; }
.wg-vm-min.fst-speak .wg-vm-x:after{ border-color:rgba(55,214,122,.8); animation-duration:1.5s; }
.wg-vm-min.fst-listen .wg-vm-x:after{ border-color:rgba(255,42,85,.8); }
@keyframes wgVmFacePulse{
  0%,100%{ transform:scale(.9); opacity:.2; }
  50%{ transform:scale(1.12); opacity:.65; }
}
/* 🎚️ حلقة مستوى الصوت: بتكبر مع صوتك */
.wg-vm-min .wg-vm-x:before{
  content:""; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(255,255,255,.55);
  transform:scale(calc(.86 + var(--wg-lvl,0) * .5));
  opacity:calc(.12 + var(--wg-lvl,0) * .65);
  transition:transform .08s linear, opacity .08s linear;
}

/* Daily allowance: discreet timer on the otherwise empty live-voice screen. */
.wg-vm .wg-vm-quota{
  position:absolute;z-index:8;top:calc(16px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);max-width:calc(100vw - 32px);white-space:nowrap;
  font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.01em;
  color:#b4b4bd;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:7px 12px;text-align:center;pointer-events:none;
}