/* Profile Editor - Glass Mobile Modal */
.m-mobile-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(20,0,0,.32);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.m-mobile-modal.is-active{display:flex}

.m-mobile-modal__sheet{width:min(600px,100%);max-height:min(860px,calc(100vh - 28px));overflow:auto;-webkit-overflow-scrolling:touch;border-radius:24px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  box-shadow:0 28px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  position:relative;display:flex;flex-direction:column
}

.m-mobile-modal__sheet::before{content:'';position:absolute;inset:-160px auto auto -160px;width:320px;height:320px;
  background:radial-gradient(circle at 30% 30%, rgba(139,0,0,.55), transparent 70%);
  opacity:.32;transform:rotate(12deg)
}

.m-mobile-modal__header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-bottom:1px solid rgba(255,255,255,.14)
}
.m-mobile-modal__title{margin:0;font-family:'Cairo',sans-serif;font-weight:900;font-size:18px;color:#fff;display:flex;align-items:center;gap:10px;text-shadow:0 6px 22px rgba(0,0,0,.35)}
.m-mobile-modal__title i{color:#FFD700}
.m-mobile-modal__close{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-mobile-modal__close:hover{background:rgba(255,255,255,.16)}

.m-mobile-modal__body{position:relative;display:flex;flex-direction:column;padding:14px 14px 16px}

/* === ProfileEditor: أحجام أصغر ومرتبة === */
#profileEditor h3{font-size:18px !important; margin: 8px 0 14px !important;}
#profileEditor label{font-size:12px !important;}
#profileEditor input, #profileEditor select, #profileEditor textarea{padding:10px 12px !important; border-radius:12px !important;}
#profileEditor button[type="submit"]{padding:12px 14px !important; border-radius:14px !important; font-size:14px !important;}
#profileEditor .pe-tab-btn{padding:10px 12px !important; border-radius:14px !important; font-size:13px !important;}

/* Tabs - نفس روح قائمة الموبايل */
.pe-tabs{display:flex;gap:10px;align-items:center;overflow:auto;padding:10px;border-radius:18px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);margin-bottom:18px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.pe-tab-btn{flex:1;min-width:max-content;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);color:#ddd;font-family:'Cairo',sans-serif;font-weight:900;cursor:pointer;transition:.2s;white-space:nowrap}
.pe-tab-btn i{opacity:.95}
.pe-tab-btn:hover{background:rgba(139,0,0,.20);border-color:rgba(139,0,0,.35)}
.pe-tab-btn.is-active{background:rgba(255,215,0,.10);border-color:rgba(255,215,0,.35);color:#FFD700}

.pe-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:16px}
.pe-row{margin-bottom:14px}
.pe-label{display:flex;align-items:center;gap:10px;color:#FFD700;font-weight:800;margin-bottom:8px;font-size:13px;font-family:'Cairo',sans-serif}
.pe-value{background:rgba(0,0,0,.28);border:1px solid rgba(139,0,0,.25);border-radius:12px;padding:12px 14px;color:#fff;font-size:14px;word-break:break-word}

.pe-pin{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pe-pin code{color:#FFD700;font-weight:900;font-size:16px;letter-spacing:2px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}
.pe-btn{border:none;border-radius:12px;padding:12px 14px;font-family:'Cairo',sans-serif;font-weight:900;cursor:pointer;transition:.2s}
.pe-btn.secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff}
.pe-btn.primary{background:linear-gradient(135deg,#8B0000,#B22222);color:#fff}
.pe-btn.copy{background:rgba(139,0,0,.28);border:1px solid rgba(139,0,0,.5);color:#FFD700;padding:10px 12px;border-radius:10px;font-weight:800}
.pe-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

.pe-avatar{display:flex;justify-content:center;margin:6px 0 16px}
.pe-avatar__wrap{position:relative;display:flex;flex-direction:column;display:inline-block}
.pe-avatar__img{width:96px;height:96px;border-radius:50%;border:3px solid #FFD700;object-fit:cover;box-shadow:0 0 22px rgba(255,215,0,.28)}
.pe-avatar__badge{position:absolute;bottom:0;right:0;background:#8B0000;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;border:2px solid rgba(0,0,0,.9)}

.pe-note{background:rgba(255,215,0,.10);border:1px solid rgba(255,215,0,.22);border-radius:14px;padding:12px 12px;text-align:center;color:#FFD700;font-size:12.5px;line-height:1.7;margin:14px 0}

/* Fullscreen on phones */
@media (max-width: 768px){
  .m-mobile-modal{padding:0}
  .m-mobile-modal__sheet{width:100%;height:100%;max-height:none;border-radius:0}
  .m-mobile-modal__body{padding:12px 12px 12px}

  /* profileEditor: تقليل كل الهوامش لتقليل التمرير */
  #profileEditor .m-mobile-modal__header{padding:10px 12px !important;}
  #profileEditor .m-mobile-modal__title{font-size:16px !important; gap:8px !important;}
  #profileEditor .m-mobile-modal__close{width:34px !important; height:34px !important; border-radius:11px !important;}

  #profileEditor h3{font-size:16px !important; margin:6px 0 10px !important;}
  #profileEditor .pe-tabs{padding:8px !important; gap:8px !important; margin-bottom:12px !important; border-radius:16px !important;}
  #profileEditor .pe-tab-btn{flex:0 0 auto !important; padding:9px 10px !important; border-radius:13px !important; font-size:12px !important;}
  #profileEditor .pe-tab-btn i{font-size:13px !important;}

  #profileEditor #avatarContainer{width:72px !important; height:72px !important; margin-bottom:10px !important;}
  #profileEditor input, #profileEditor select, #profileEditor textarea{padding:9px 10px !important; border-radius:12px !important;}
  #profileEditor form > div{margin-bottom:10px !important;}
  #profileEditor button[type="submit"]{padding:11px 12px !important; border-radius:14px !important; font-size:13.5px !important; margin-bottom:10px !important;}

  /* اجعل التبويبات تظهر كاملة بدون سحب */
  #profileEditor .pe-tabs{flex-wrap:wrap !important; overflow:visible !important;}
  #profileEditor .pe-tab-btn{flex:1 1 calc(50% - 8px) !important; min-width:0 !important;}

  /* استغلال كامل الشاشة وتقليل الفراغات */
  #profileEditor .m-mobile-modal__body{padding:10px 12px 10px !important;}
  #profileEditor button[type="submit"]{position:sticky; bottom:0; z-index:3; margin-bottom:0 !important;}
}

/* Desktop refinement */
@media (min-width: 1024px){
  .m-mobile-modal__sheet{max-height:min(820px,calc(100vh - 60px))}
}

/* Prevent background scroll when modal open */
body.prevent-scroll{overflow:hidden !important;}

/* Hide floating buttons (زر الطائرة) أثناء فتح أي مودال */
body.prevent-scroll .global-fab-stack,
body.modal-open .global-fab-stack,
body.prevent-scroll .app-fab-stack,
body.modal-open .app-fab-stack{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:translateY(10px) !important;transition:.2s}

/* Hide floating bot/notification toggles أثناء فتح أي منبثق */
body.prevent-scroll #floatingToggle,
body.modal-open #floatingToggle,
body.prevent-scroll #notif-floating-toggle,
body.modal-open #notif-floating-toggle,
body.prevent-scroll .notif-floating-toggle,
body.modal-open .notif-floating-toggle{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:translateY(10px) !important;transition:.2s}

/* iOS safe areas */
@supports(padding: max(0px)){
  .m-mobile-modal__sheet{padding-bottom:max(0px, env(safe-area-inset-bottom));}
  /* في profileEditor الفل سكرين: لا نضيف padding إضافي على sheet */
  #profileEditor .m-mobile-modal__sheet{padding-bottom:0 !important;}
}

/* ===== Upgrade: اجعل profileEditor كامل الشاشة وزجاجي ===== */
#profileEditor.m-mobile-modal{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}

#profileEditor.m-mobile-modal .m-mobile-modal__sheet{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;

  /* لا نريد شكل "بوكس" */
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* اجعل الزجاج على الخلفية (المودال نفسه) بدل البوكس */
#profileEditor.m-mobile-modal{
  background:rgba(15,0,0,.25) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}

/* إلغاء تأثير الديكور الخاص بالـ sheet حتى لا يظهر كصندوق */
#profileEditor .m-mobile-modal__sheet::before{display:none !important;}

#profileEditor .m-mobile-modal__header{background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;}

/* تحويل عناصر الفورم لزجاجية حتى لو عليها inline style */
#profileEditor input,
#profileEditor select,
#profileEditor textarea{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
#profileEditor input::placeholder,
#profileEditor textarea::placeholder{color: rgba(255,255,255,.55) !important;}

#profileEditor button{
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* تحسين التمرير في iOS */
#profileEditor .m-mobile-modal__sheet{ -webkit-overflow-scrolling: touch !important; }