/* ============================================================
   Rasid Editor V16 — Mobile-first visual editing upgrade
   Floating toolbar + draggable bottom sheet + compact topbar
   Loaded AFTER base-style; only additive overrides.
   ============================================================ */

/* ---------- Floating contextual toolbar ---------- */
#rasidFloatBar{
  position:fixed;z-index:80;display:none;align-items:center;gap:2px;
  background:#0B1424;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:5px 6px;box-shadow:0 14px 40px rgba(2,10,24,.45);
  max-width:calc(100vw - 16px);overflow-x:auto;-webkit-overflow-scrolling:touch;direction:rtl;
  scrollbar-width:none;
}
#rasidFloatBar::-webkit-scrollbar{display:none}
#rasidFloatBar.on{display:flex}
#rasidFloatBar button{
  flex:none;border:none;background:transparent;color:#E7EDF7;cursor:pointer;
  min-width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font:700 13px 'Tajawal',sans-serif;gap:4px;padding:0 8px;
}
#rasidFloatBar button:active,#rasidFloatBar button.on{background:#1368FF}
#rasidFloatBar .fb-sep{flex:none;width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 3px}
#rasidFloatBar .fb-swatch{width:18px;height:18px;border-radius:6px;box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
#rasidFloatBar .fb-lbl{font-size:11px;opacity:.85}
#rasidFloatBar input[type=color]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#rasidFloatBar.rasid-mobile-quick .fb-primary{background:#1368FF;color:#fff}

/* ---------- Instant color pop ---------- */
#rasidColorPop{
  position:fixed;z-index:85;background:#0B1424;border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:10px;box-shadow:0 16px 44px rgba(2,10,24,.5);
}
#rasidColorPop .cp-grid{display:grid;grid-template-columns:repeat(7,34px);gap:7px;align-items:center;justify-items:center}
#rasidColorPop .cp-sw{
  width:30px;height:30px;border-radius:9px;border:none;cursor:pointer;padding:0;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.28);
}
#rasidColorPop .cp-sw:active{transform:scale(.92)}
#rasidColorPop .cp-sw.on{box-shadow:0 0 0 2.5px #1368FF,0 0 0 5px rgba(19,104,255,.3)}
#rasidColorPop .cp-custom{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;background:conic-gradient(#E63946,#F77F00,#C9A227,#2A9D8F,#1368FF,#7B2CBF,#E63946);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.28);position:relative;overflow:hidden;
}
#rasidColorPop .cp-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ---------- Bottom sheet behaviour for props (mobile) ---------- */
/* NOTE: the base editor stylesheet already fixes .props at 860px/560px with
   !important rules (height:82vh, overflow-y:auto...). These selectors use
   html body prefix for higher specificity so V16 wins. */
@media(max-width:860px){
  html body .props{
    position:fixed!important;inset-inline:0!important;inset-block:auto 0!important;top:auto!important;bottom:0!important;
    width:100%!important;max-width:100%!important;
    height:52vh!important;min-height:0!important;
    border-radius:20px 20px 0 0!important;
    box-shadow:0 -14px 44px rgba(7,17,31,.28)!important;
    z-index:70!important;
    transform:translateY(105%);
    transition:transform .28s cubic-bezier(.22,.9,.3,1),height .22s ease;
    overflow:hidden!important;overflow-y:hidden!important;
    display:flex!important;flex-direction:column!important;
  }
  html body .props.sheet-open{transform:translateY(0)}
  html body .props.sheet-full{height:88vh!important}
  .props-body{flex:1;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:40px!important}
  /* grab handle */
  .props::before{
    content:'';display:block;flex:none;width:44px;height:5px;border-radius:99px;
    background:#D3DAE6;margin:9px auto 2px;
  }
  .props-head{position:relative;padding:8px 54px 10px 20px!important}
  #rasidSheetClose{
    position:absolute;top:4px;inset-inline-end:12px;width:34px;height:34px;border:none;
    background:#EEF2F7;border-radius:50%;font-size:15px;cursor:pointer;color:#3A4A61;
    display:flex;align-items:center;justify-content:center;
  }
  /* canvas gets breathing room so selected element isn't hidden under sheet */
  .canvas-wrap{padding-bottom:56vh!important}
  body.rasid-sheet-closed .canvas-wrap{padding-bottom:90px!important}
}
@media(min-width:861px){
  #rasidSheetClose{display:none}
}

/* ---------- Compact topbar on mobile ---------- */
@media(max-width:640px){
  .topbar{flex-wrap:nowrap!important;height:54px!important;min-height:54px!important;padding:0 10px!important;gap:8px!important;overflow:visible}
  .topbar .sep{display:none}
  .topbar b small{display:none}
  .topbar b{font-size:14px;white-space:nowrap}
  .histbar button{width:32px;height:32px}
  .devices{display:none!important}
  #saveDraftBtn,#previewBtn,#editorLang,.topbar .back{display:none!important}
  #rasidDraftStatus{display:none!important}
  .btn-pub{padding:8px 12px!important;font-size:12.5px!important;white-space:nowrap;margin-inline-start:auto;max-width:136px;overflow:hidden;text-overflow:ellipsis}
  #rasidMoreBtn{display:flex!important}
}
#rasidMoreBtn{
  display:none;flex:none;width:36px;height:32px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:#fff;border-radius:8px;cursor:pointer;
  align-items:center;justify-content:center;font-size:18px;line-height:1;
}
#rasidMoreMenu{
  position:fixed;top:58px;inset-inline-end:8px;z-index:95;background:#fff;border-radius:14px;
  box-shadow:0 18px 50px rgba(7,17,31,.25);border:1px solid #E6EAF2;padding:6px;min-width:190px;display:none;
}
#rasidMoreMenu.on{display:block}
#rasidMoreMenu button{
  display:flex;width:100%;align-items:center;gap:10px;border:none;background:transparent;
  padding:11px 12px;border-radius:9px;font:600 13.5px 'Tajawal',sans-serif;color:#14243A;cursor:pointer;text-align:start;
}
#rasidMoreMenu button:active{background:#EEF2F7}

/* ---------- Touch-friendly template picker ---------- */
@media(max-width:560px){
  .picker{padding:22px 0 40px}
  .picker h1{font-size:20px}
  .tpick-use{padding:12px}
  .pagetab{padding:9px 16px;font-size:14px}
  .pageadd{padding:9px 16px;font-size:14px}
}

/* ---------- Larger tap targets in props panel on touch ---------- */
@media(pointer:coarse){
  .seg button{padding:11px 4px;font-size:14px}
  .addbtn{padding:13px;font-size:14px}
  .pg select,.pg input[type=text],.pg textarea{padding:12px 13px;font-size:15px}
  .wcp-g .c{min-width:26px}
  .emg button{font-size:20px}
  #cv [data-ed]{outline-offset:2px}
}

/* ---------- Modal dialogs (replace prompt/confirm) ---------- */
.rasid-dlg{position:fixed;inset:0;z-index:9999;background:rgba(6,15,30,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.rasid-dlg .box{background:#fff;border-radius:18px;max-width:400px;width:100%;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.32);font-family:'Tajawal',sans-serif}
.rasid-dlg .box h4{margin:0 0 6px;font-size:16.5px;color:#111827;font-family:'IBM Plex Sans Arabic'}
.rasid-dlg .box p{margin:0 0 16px;font-size:13.5px;color:#6B7280;line-height:1.8}
.rasid-dlg .box input{width:100%;border:1.5px solid #E6EAF2;border-radius:11px;padding:12px 13px;font:inherit;font-size:15px;margin-bottom:16px;box-sizing:border-box}
.rasid-dlg .box input:focus{outline:none;border-color:#1368FF}
.rasid-dlg .row{display:flex;gap:10px}
.rasid-dlg .row button{flex:1;border:none;border-radius:11px;padding:12px;font:700 14px 'Tajawal',sans-serif;cursor:pointer}
.rasid-dlg .row .ok{background:#1368FF;color:#fff}
.rasid-dlg .row .ok.danger{background:#DC2626}
.rasid-dlg .row .no{background:#F3F4F6;color:#111827}

/* ---------- AI logo generator panel ---------- */
#rasidAiLogoBox{border:1.5px dashed #8B5CF6;border-radius:12px;padding:14px;margin-top:10px;background:rgba(139,92,246,.04)}
#rasidAiLogoBox label{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:#6D28D9}
#rasidAiLogoBox textarea{width:100%;border:1.5px solid #E6EAF2;border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;box-sizing:border-box;direction:rtl}
#rasidAiLogoBox .gen{width:100%;margin-top:10px;border:none;border-radius:10px;padding:12px;font:700 13.5px 'Tajawal',sans-serif;cursor:pointer;background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff}
#rasidAiLogoBox .gen:disabled{opacity:.55;cursor:wait}
#rasidAiLogoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
#rasidAiLogoGrid img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border:2px solid #E6EAF2;border-radius:10px;cursor:pointer}
#rasidAiLogoGrid img:active,#rasidAiLogoGrid img.picked{border-color:#8B5CF6}
#rasidAiLogoBox .hint{font-size:11.5px;color:#8A93A6;margin-top:8px;line-height:1.7}

/* ---------- AI element edit box (راصد AI: chat-edit any element) ---------- */
#rasidAiEditBox{border:1.5px dashed #8B5CF6;border-radius:12px;padding:14px;margin-top:10px;background:rgba(139,92,246,.04)}
#rasidAiEditBox label{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:#6D28D9}
#rasidAiEditBox textarea{width:100%;border:1.5px solid #E6EAF2;border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;box-sizing:border-box;direction:rtl}
#rasidAiEditBox .gen{width:100%;margin-top:10px;border:none;border-radius:10px;padding:12px;font:700 13.5px 'Tajawal',sans-serif;cursor:pointer;background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff}
#rasidAiEditBox .gen:disabled{opacity:.55;cursor:wait}
#rasidAiEditBox .hint{font-size:11.5px;color:#8A93A6;margin-top:8px;line-height:1.7}

/* selected element gets a clearer outline on touch */
#cv [data-ed].sel{outline-width:2.5px!important;outline-color:#1368FF!important}

/* ---------- V16.2: real template thumbnails + big live preview ---------- */
.tpick-img{position:relative;overflow:hidden}
.rasid-real-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:3;background:#fff;display:block}
.tpick-img .rasid-plan-chip{position:absolute;top:9px;inset-inline-start:9px;z-index:5}
.tpick .rasid-thumb-preview-btn{display:block;width:100%;margin-top:8px;background:#fff;color:#0b63f6;border:1.5px solid #0b63f6;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.tpick .rasid-thumb-preview-btn:active{background:#eef4ff}
#rasidTplPreviewOverlay{position:fixed;inset:0;z-index:100000;background:rgba(6,15,30,.72);display:flex;flex-direction:column;padding:0}
.rasid-tplprev-bar{display:flex;align-items:center;justify-content:space-between;background:#0e1526;color:#fff;padding:10px 16px;gap:12px;flex:0 0 auto}
.rasid-tplprev-bar b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif}
.rasid-tplprev-use{background:#0b63f6;color:#fff;border:0;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Tajawal',sans-serif}
.rasid-tplprev-close{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:10px;padding:9px 13px;font-size:14px;cursor:pointer}
.rasid-tplprev-frame{flex:1;width:100%;border:0;background:#fff}

/* ---------- V16.4: Word-style phone editing ---------- */
/* عند الجوال: اختيار العنصر لا يفتح اللوحة تلقائياً. يظهر شريط Word أفقي
   بأدوات فورية، و«المزيد» في نهايته هو وحده الذي يفتح لوحة الخصائص الكاملة. */
@media(max-width:860px){
  html body .props{height:46dvh!important}
  html body .props.sheet-full{height:calc(100dvh - 54px)!important}
  .props-body{padding:14px 16px 32px!important}
  .props-head{position:relative;min-height:52px;padding:8px 58px 10px 20px!important;background:#fff}
  .props-head h3{font-size:15px;line-height:1.35}
  .props-head p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #rasidSheetClose{top:6px;width:40px;height:40px;border-radius:12px;font-size:18px}
  .canvas-wrap{padding-bottom:96px!important}
  body:not(.rasid-sheet-closed) .canvas-wrap{padding-bottom:50dvh!important}
  #rasidFloatBar.rasid-mobile-quick{
    position:fixed!important;inset-inline:12px!important;bottom:14px!important;top:auto!important;left:auto!important;
    z-index:58;max-width:none!important;min-height:60px;justify-content:flex-start;gap:4px;
    padding:7px;background:rgba(11,20,36,.97);border-radius:16px;
    box-shadow:0 12px 34px rgba(2,10,24,.32);overflow-x:auto!important;overflow-y:hidden;
  }
  #rasidFloatBar.rasid-mobile-quick .fb-quick-label{display:none;flex:1;min-width:0;color:#D6E2F5;font:700 12px 'Tajawal',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:4px}
  #rasidFloatBar.rasid-mobile-quick button{min-width:42px;flex:none;height:46px;padding:0 10px;border-radius:11px;font-size:13px;white-space:nowrap}
  #rasidFloatBar.rasid-mobile-quick button:active{transform:scale(.97)}
  #rasidFloatBar.rasid-mobile-quick .fb-sep,#rasidFloatBar.rasid-mobile-quick input[type=color]{display:none}
  .props[data-rasid-mobile-mode="more"] .props-head h3::after{display:block;margin-top:2px;font-size:10px;font-weight:700;color:#6E8199;content:'إعدادات العنصر الكاملة'}
  .props[data-rasid-mobile-mode="more"] .props-head h3::after{content:'إعدادات العنصر الكاملة'}
}
@media(max-width:640px){
  .topbar .home-link,.topbar .sep,.histbar{display:none!important}
  .topbar .rasid-ai-draft-btn{display:none!important}
  .topbar b{font-size:13px;overflow:hidden;text-overflow:ellipsis;max-width:92px}
  .btn-pub{min-height:42px;padding:9px 12px!important;max-width:136px;overflow:hidden;text-overflow:ellipsis}
  #rasidMoreBtn{width:42px;height:42px}
}