/* فيوميل v4 — نظام تصميم فيوديكس: توكنز موحّدة، كثافة مريحة، حركة سلسة */
@import url("/assets/fonts/fonts.css");
:root{
  /* ── العلامة ── */
  --brand-dark:#2E1057;      /* الهيدر العلوي */
  --brand-primary:#5C08AD;   /* البنفسجي الأساسي */
  --brand-cta:#6800B5;       /* أزرار أساسية */
  --brand-accent:#9810FA;    /* hover */
  --accent:#F54900;          /* برتقالي: المجلد النشط، النجمة، التنبيه */
  --accent-tint:#FFF7ED;

  /* ── النص ── */
  --fg-1:#101828; --fg-2:#364153; --fg-3:#4A5565; --fg-4:#6A7282; --fg-5:#99A1AF;

  /* ── الأسطح ── */
  --bg-app:#F9FAFB; --bg-card:#FFFFFF;
  --border:#E5E7EB; --border-soft:#F3F4F6;

  /* ── الحالات ── */
  --success:#00A63E; --success-tint:#F0FDF4;
  --danger:#E7000B;  --danger-tint:#FEF2F2;
  --info:#155DFC;    --info-tint:#EFF6FF;
  --pink:#E60076;    --pink-tint:#FDF2F8;

  /* ── الشكل ── */
  --r-sm:10px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-pill:9999px;
  --shadow-xs:0 1px 2px -1px rgba(0,0,0,.1), 0 1px 3px 0 rgba(0,0,0,.1);
  --shadow-md:0 2px 4px -2px rgba(0,0,0,.1), 0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg:0 8px 10px -6px rgba(0,0,0,.1), 0 20px 25px -5px rgba(0,0,0,.1);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* ── أسماء موروثة: مربوطة بالتوكنز أعلاه ── */
  --purple:var(--brand-primary); --purple-2:var(--brand-accent);
  --orange:var(--accent); --orange-soft:var(--accent-tint);
  --ink:var(--fg-1); --mut:var(--fg-3); --faint:var(--fg-5);
  --bg:var(--bg-app); --card:var(--bg-card);
  --line:var(--border); --soft:var(--border-soft); --hover:var(--bg-app);
  --sel:var(--accent-tint); --unread-bg:var(--bg-card);
  --ok:var(--success); --bad:var(--danger);
  --r:var(--r-xl); --readw:720px;
  --sh1:var(--shadow-xs); --sh2:var(--shadow-md); --sh3:var(--shadow-lg);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Cairo,"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);
  font-size:14px;-webkit-font-smoothing:antialiased}
/* أرقام وعناوين بريد لاتينية — أرقام إنجليزية دائماً */
.date,.dt,.sz,.tcount,#bulkCount,.att .sz,.msg-head .nm small,#searchBox,
input[type=email],input[type=url],.chip span{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,textarea{font:inherit}
.spacer{flex:1}
.vsep{width:1px;height:22px;background:var(--line);margin:0 4px}
[hidden]{display:none!important}
::selection{background:var(--accent-tint)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--fg-5);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ═══ الترويسة ═══ */
#app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
#top{display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--brand-dark);color:#fff;
  flex:none;z-index:50;height:60px}
#top .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;letter-spacing:-.2px}
#top .brand svg{color:var(--accent);width:26px;height:26px}
#searchForm{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:var(--r-lg);
  padding:10px 16px;flex:0 1 640px;min-width:120px;transition:background .18s var(--ease), box-shadow .18s var(--ease);border:1px solid transparent}
#searchForm:focus-within{background:#fff;box-shadow:var(--sh2)}
#searchForm:focus-within svg{color:var(--purple)}
#searchForm:focus-within input{color:var(--ink)}
#searchForm:focus-within input::placeholder{color:var(--faint)}
#searchForm svg{opacity:.9;width:17px;height:17px}
#searchBox{flex:1;background:none;border:0;outline:0;color:#fff}
#searchBox::placeholder{color:rgba(255,255,255,.6)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  color:inherit;transition:background .15s}
#top .icon-btn:hover{background:rgba(255,255,255,.16)}
#who{display:flex;align-items:center;gap:8px;font-weight:600}
#whoPic{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.45)}

/* ═══ شريط فلاتر البحث ═══ */
#searchBar{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--bg-card);
  border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap}
.schip{position:relative;flex:none}
.schip > button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-card);
  color:var(--fg-2);font-size:13px;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.schip > button:hover{background:var(--border-soft)}
.schip > button:active{transform:scale(.98)}
.schip.on > button{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;font-weight:600}
.schip.on > button:hover{background:var(--brand-accent);border-color:var(--brand-accent)}
.schip svg{width:14px;height:14px}
.sel-chip{position:relative;display:inline-block;padding:0}
.sel-chip > svg{display:none}
.sel-chip select{height:34px;padding:0 30px 0 14px;font:inherit;font-size:13px;
  background:var(--bg-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A7282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat left 10px center;
  border:1px solid var(--border);border-radius:var(--r-pill);color:var(--fg-2);cursor:pointer;
  -webkit-appearance:none;appearance:none;outline:0;transition:background-color .13s var(--ease)}
.sel-chip select:hover{background-color:var(--border-soft)}
.sel-chip.on select{background-color:var(--brand-primary);border-color:var(--brand-primary);color:#fff;font-weight:600;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")}
.sel-chip.on select:hover{background-color:var(--brand-accent);border-color:var(--brand-accent)}
.spop{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:90;min-width:210px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:4px}
.spop input{border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;outline:0;font:inherit;font-size:13px}
.spop input:focus{border-color:var(--brand-primary)}
.spop button{text-align:start;padding:8px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--fg-2)}
.spop button:hover{background:var(--border-soft);color:var(--brand-primary)}
.spop button.on{color:var(--brand-primary);font-weight:600;background:var(--border-soft)}
.spop-go{width:100%;padding:8px 12px!important;background:var(--brand-cta)!important;color:#fff!important;
  border-radius:var(--r-sm);font-weight:600;margin-top:4px;text-align:center!important}
.spop-go:hover{background:var(--brand-accent)!important}
#sbClear{color:var(--fg-4);font-size:13px;padding:0 10px;height:34px;border-radius:var(--r-sm);flex:none}
#sbClear:hover{background:var(--danger-tint);color:var(--danger)}

/* ═══ التخطيط ═══ */
#main{display:grid;grid-template-columns:238px 1fr;grid-template-rows:minmax(0,1fr);
  flex:1;min-height:0;overflow:hidden}

/* ═══ الصناديق ═══ */
#boxes{padding:16px 12px;overflow:auto;display:flex;flex-direction:column;gap:4px;min-height:0;
  background:var(--bg-card);border-inline-end:1px solid var(--border)}
#btnCompose{display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--brand-cta);color:#fff;
  border-radius:14px;height:56px;padding:0 22px;
  font-weight:800;font-size:16px;letter-spacing:0.2px;
  margin-bottom:18px;
  box-shadow:0 4px 14px rgba(58,38,102,.20), 0 2px 4px rgba(58,38,102,.10);
  transition:background .16s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease)}
#btnCompose:hover{background:var(--brand-accent); box-shadow:0 6px 18px rgba(58,38,102,.28), 0 3px 6px rgba(58,38,102,.14); transform:translateY(-1px)}
#btnCompose:active{transform:scale(.98)}
#btnCompose svg{color:#fff;width:20px;height:20px;stroke-width:2.4}
.box{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border-radius:var(--r-md);
  color:var(--fg-2);font-weight:500;text-align:start;transition:background .13s var(--ease);font-size:14px}
.box:hover{background:var(--border-soft)}
.box.on{background:var(--accent-tint);color:var(--accent);font-weight:600}
.box.on svg{color:var(--accent)}
.box svg{color:var(--fg-4);width:18px;height:18px}
.box[data-id="__starred__"] svg{color:var(--accent);fill:var(--accent)}
.box .cnt{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--fg-4);
  background:var(--border-soft);border-radius:var(--r-pill);padding:2px 8px;min-width:22px;text-align:center}
.box.on .cnt{color:var(--accent);background:#fff}
.box-wrap{display:flex;align-items:center;position:relative}
.box-wrap .box{flex:1}
.box-del{display:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  color:var(--mut);flex:none;margin-inline-end:6px}
.box-del svg{width:14px;height:14px}
.box-del:hover{background:var(--bad);color:#fff}
.box-wrap:hover .box-del{display:flex}
#newFolder{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:var(--fg-4);font-size:14px;border-radius:var(--r-md)}
#newFolder:hover{background:var(--border-soft);color:var(--brand-primary)}
#newFolder svg{width:18px;height:18px}
#storageNote{margin-top:auto;padding:14px;font-size:12px;color:var(--fg-4);background:var(--bg-app);
  border:1px solid var(--border);border-radius:var(--r-md)}
#storageNote:empty{display:none}
.sn-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sn-top span{font-weight:600;color:var(--fg-2)}
.sn-top b{color:var(--accent);font-weight:700}
.sn-bar{height:6px;background:var(--border);border-radius:var(--r-pill);overflow:hidden}
.sn-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);
  transition:width .4s var(--ease)}
.sn-txt{margin-top:6px;color:var(--fg-5)}
#storageNote.full .sn-top b,#storageNote.full .sn-bar i{background:var(--danger);color:var(--danger)}
#storageNote.full .sn-top b{background:none}
/* نجمة ترويسة القراءة */
.star-btn.on{color:var(--accent)}
.star-btn.on svg{fill:var(--accent)}

/* ═══ القائمة ═══ */
#list{background:var(--bg-card);display:flex;flex-direction:column;min-width:0;overflow:hidden}
#listHead{display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);height:56px;flex:none}
#listHead h2{font-size:17px;color:var(--fg-1);font-weight:700;flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#listHead .icon-btn{width:34px;height:34px;color:var(--fg-4);border-radius:var(--r-sm)}
#listHead .icon-btn:hover{background:var(--border-soft);color:var(--brand-primary)}
#selAll{margin-inline-start:6px}
.ck{appearance:none;width:17px;height:17px;border:2px solid var(--fg-5);border-radius:5px;cursor:pointer;flex:none;
  display:inline-grid;place-content:center;transition:all .12s var(--ease);background:#fff}
.ck:hover{border-color:var(--brand-primary)}
.ck:checked{background:var(--brand-primary);border-color:var(--brand-primary)}
.ck:checked::before{content:"";width:9px;height:9px;background:#fff;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
#list.fu #qfilters,#list.fu #pageInfo,#list.fu #pagePrev,#list.fu #pageNext,#list.fu .caret{display:none}
/* حالة التحديد الجزئي — شرطة بدل علامة الصح */
.ck:indeterminate{background:var(--brand-primary);border-color:var(--brand-primary)}
.ck:indeterminate::before{content:"";width:9px;height:2px;background:#fff;clip-path:none;border-radius:1px}
#unreadBadge{flex:none;font-size:12px;font-weight:600;color:var(--accent);
  background:var(--accent-tint);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
/* ═══ تحديد متعدد + ترقيم الصفحات ═══ */
.selall{position:relative;display:flex;align-items:center;gap:2px;flex:none}
.caret{display:inline-flex;align-items:center;justify-content:center;width:20px;height:26px;
  border-radius:var(--r-sm);color:var(--fg-4)}
.caret:hover{background:var(--border-soft);color:var(--brand-primary)}
.caret svg{width:14px;height:14px}
.sel-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:80;min-width:168px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column}
.sel-menu button{text-align:start;padding:9px 12px;border-radius:var(--r-sm);font-size:13.5px;color:var(--fg-2)}
.sel-menu button:hover{background:var(--border-soft);color:var(--brand-primary)}
#pageInfo{font-size:12px;color:var(--fg-4);white-space:nowrap;flex:none;margin-inline-start:4px}
#pagePrev,#pageNext{width:32px;height:32px;color:var(--fg-4);border-radius:var(--r-sm);flex:none}
#pagePrev:hover:not(:disabled),#pageNext:hover:not(:disabled){background:var(--border-soft);color:var(--brand-primary)}
#pagePrev:disabled,#pageNext:disabled{opacity:.35;cursor:default}
#qfilters{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex:none;overflow-x:auto}
.qf{flex:none;height:32px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--bg-card);color:var(--fg-3);font-size:13px;font-weight:500;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease)}
.qf:hover{background:var(--border-soft);color:var(--fg-1)}
.qf:active{transform:scale(.98)}
.qf.on{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;font-weight:600}
.qf.on:hover{background:var(--brand-accent);border-color:var(--brand-accent);color:#fff}
#bulkBar{display:flex;align-items:center;gap:2px}
#bulkBar .icon-btn{width:34px;height:34px;color:var(--fg-4);border-radius:var(--r-sm)}
#bulkBar .icon-btn:hover{background:var(--border-soft);color:var(--brand-primary)}
#bulkCount{font-size:13px;color:var(--fg-3);font-weight:600;margin:0 8px}
/* ═══ الوارد الذكي — تبويبات (FDX_SMART_INBOX) ═══ */
#tabs{display:flex;gap:0;padding:0 4px;border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none;flex:none}
#tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:4px;padding:10px 5px 9px;color:var(--mut);font-weight:600;
  font-size:12.5px;border-bottom:3px solid transparent;white-space:nowrap;flex:1 1 auto;justify-content:center;
  transition:color .13s,background .13s}
.tab svg{width:15px;height:15px;color:var(--faint);flex:none}
.tab:hover{background:var(--hover);color:var(--purple)}
.tab.on{color:var(--orange);border-bottom-color:var(--orange);font-weight:800}
.tab.on svg{color:var(--orange)}
.tab .tcnt{font-style:normal;font-size:11.5px;font-weight:800;min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:var(--soft);color:var(--purple);display:grid;place-content:center}
.tab.on .tcnt{background:var(--orange);color:#fff}
@media(max-width:768px){.tab{padding:10px 13px;font-size:13.5px;min-height:44px}
  .tab svg{width:17px;height:17px}}
#rows{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px}
.dsep{padding:14px 8px 6px;font-size:12px;font-weight:600;color:var(--fg-5)}
.row{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:start;padding:12px;
  border-radius:var(--r-md);cursor:pointer;position:relative;transition:background .13s var(--ease);margin-bottom:2px}
.row:hover{background:var(--border-soft)}
.row.on{background:var(--accent-tint)}
.row.on::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:3px;
  border-radius:var(--r-pill);background:var(--accent)}
.row.picked{background:var(--info-tint)}
.row .ck{opacity:0;transition:opacity .12s var(--ease);margin-top:10px}
.row:hover .ck,.row.picked .ck,#rows.picking .ck{opacity:1}
.row .star{color:var(--fg-5);width:28px;height:28px;border-radius:var(--r-sm);display:inline-flex;
  align-items:center;justify-content:center;flex:none;align-self:center}
.row .star:hover{background:var(--border);color:var(--accent)}
.row .star.on{color:var(--accent)}
.row .star.on svg{fill:var(--accent);stroke:var(--accent)}
.row .star svg{width:17px;height:17px}
.avatar{width:38px;height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;flex:none;user-select:none}
.row .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
  transition:padding-inline-end .16s var(--ease)}
/* عند المرور يتزحزح المحتوى ليفسح لشريط الإجراءات بدل أن يُغطّى */
.row:hover .body{padding-inline-end:158px}
.row .l1{display:flex;align-items:baseline;gap:8px}
.row .from{font-weight:500;font-size:14px;color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.row .tcount{font-size:12px;color:var(--fg-4);font-weight:600}
.row .date{margin-inline-start:auto;font-size:12px;color:var(--fg-5);flex:none}
.row .l2{display:flex;align-items:center;gap:6px;min-width:0}
.row .subj{font-size:13px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:70%}
.row .prev{font-size:12px;color:var(--fg-5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snz-badge{font-size:11px;color:var(--accent);background:var(--accent-tint);
  padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;flex:none;font-weight:600}
.row .clip{width:15px;height:15px;color:var(--fg-4);flex:none}
.row.unread{background:var(--unread-bg)}
.row.unread .from,.row.unread .subj{font-weight:700;color:var(--fg-1)}
.row.unread .date{color:var(--brand-primary);font-weight:600}
.row.unread::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:3px;
  border-radius:var(--r-pill);background:var(--brand-primary)}
.qa{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%) translateX(6px);display:none;align-items:center;gap:2px;padding:6px;border-radius:14px;opacity:0;transition:opacity .18s cubic-bezier(.2,.8,.3,1), transform .22s cubic-bezier(.2,.8,.3,1);z-index:5}


.row:hover .qa{display:flex;opacity:1;transform:translateY(-50%) translateX(0)}



.qa svg{width:17px;height:17px}
#moreBtn{margin:12px auto;padding:9px 26px;border:1px solid var(--border);border-radius:var(--r-md);font-weight:600;color:var(--brand-primary)}
#moreBtn:hover{background:var(--border-soft)}
#emptyList{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--faint);gap:12px;padding:30px}
#emptyList svg{width:64px;height:64px;opacity:.3}
#emptyList p{font-weight:600}
.skel{height:64px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:12px;padding:0 16px}
.skel i{border-radius:50%;width:40px;height:40px;flex:none}
.skel b{height:11px;border-radius:6px;flex:1}
.skel i,.skel b{background:linear-gradient(90deg,var(--border-soft) 25%,var(--bg-app) 50%,var(--border-soft) 75%);background-size:200% 100%;
  animation:sk 1.2s infinite linear}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ═══ متابعة المعلَّقات ═══ */
#fuBtn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;border-radius:999px;
  color:var(--ink);font-weight:600;text-align:start;font-size:14.5px;transition:background .13s}
#fuBtn:hover{background:var(--border-soft)}
#fuBtn svg{color:var(--mut);width:19px;height:19px}
#fuBtn.hot svg{color:var(--orange)}
#fuBtn.on{background:var(--accent-tint);color:var(--accent);font-weight:700}
#fuBtn.on svg{color:var(--orange)}
#fuBtn .cnt{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-content:center}
#list.fu #selAll,#list.fu #bulkBar{display:none}

.fu-banner{display:flex;align-items:center;gap:10px;margin:10px 12px 4px;padding:11px 14px;
  background:var(--orange-soft);border:1px solid var(--accent);border-radius:var(--r-lg);color:var(--accent);font-size:13.5px}
.fu-banner svg{color:var(--orange);width:18px;height:18px}
.fu-banner b{font-weight:700}
.fu-banner #fuGo{padding:6px 16px;border-radius:999px;background:var(--orange);color:#fff;font-weight:700;font-size:13px}
.fu-banner #fuGo:hover{background:var(--brand-accent)}
.fu-banner .x{width:28px;height:28px;display:grid;place-content:center;border-radius:50%;color:var(--accent)}
.fu-banner .x:hover{background:var(--accent-tint)}
.fu-banner .x svg{width:15px;height:15px;color:inherit}

.fu-sec{padding:18px 18px 8px;display:flex;flex-direction:column;gap:2px}
.fu-sec h3{font-size:14px;font-weight:700;color:var(--purple);display:flex;align-items:center;gap:8px}
.fu-sec h3 .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--soft);
  color:var(--purple);font-size:11.5px;display:grid;place-content:center}
.fu-sec p{font-size:12px;color:var(--faint)}
.fu-card{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;margin:0 12px 10px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh1);
  transition:box-shadow .15s, transform .12s}
.fu-card:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.fu-card.unread{border-inline-start:3px solid var(--orange)}
.fu-card .avatar{flex:none}
.fu-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fu-l1{display:flex;align-items:center;gap:6px;min-width:0}
.fu-who{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-l1 small{color:var(--faint);font-size:11.5px;flex:none}
.fu-age{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-tint);
  padding:2px 9px;border-radius:999px;flex:none}
.fu-l2{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-l2 .tcount{font-size:12px;color:var(--mut);font-weight:600;margin-inline-start:5px}
.fu-l3{font-size:12.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.fu-acts button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);font-size:12.5px;font-weight:700;background:#fff;
  transition:background .13s, color .13s, border-color .13s}
.fu-acts button:hover{background:var(--soft);color:var(--brand-primary);border-color:var(--border)}
.fu-acts button svg{width:15px;height:15px}
.fu-acts button.p{background:var(--purple);border-color:var(--purple);color:#fff}
.fu-acts button.p:hover{background:var(--purple-2);color:#fff}
.fu-acts button:disabled{opacity:.5;cursor:default}
.fu-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:60px 24px;color:var(--faint);text-align:center}
.fu-done svg{width:56px;height:56px;opacity:.25}
.fu-done p{font-weight:700;color:var(--mut);font-size:15px}
.fu-done small{font-size:12.5px}

/* ═══ القراءة ═══ */
#list{grid-column:2;grid-row:1}
#reader{grid-column:2;grid-row:1;display:none;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--bg-app)}
#main.reading #list{display:none}
#main.reading #reader{display:flex}
#readHead{display:flex;align-items:center;gap:2px;padding:0 16px;height:54px;flex:none;
  border-bottom:1px solid var(--border);background:var(--bg-card)}
#readHead .icon-btn{width:36px;height:36px;color:var(--fg-4);border-radius:var(--r-sm)}
#readHead .icon-btn:hover{background:var(--border-soft);color:var(--brand-primary)}
#readHead .danger:hover{color:var(--danger);background:var(--danger-tint)}
#backList{display:inline-flex}
#readBody{flex:1;overflow:auto;padding:24px 22px 40px}
#threadSubject{font-size:22px;line-height:32px;font-weight:700;color:var(--fg-1);max-width:var(--readw);
  margin:0 auto 16px;padding:0 4px}
.msg-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);max-width:var(--readw);
  margin:0 auto 12px;overflow:hidden;transition:box-shadow .18s var(--ease)}
.msg-card.open{box-shadow:var(--shadow-xs)}
.msg-head{display:flex;gap:12px;align-items:center;padding:16px 20px;cursor:pointer}
.msg-head .avatar{width:44px;height:44px;font-size:17px}
.msg-head .who{min-width:0;flex:1}
.msg-head .nm{font-weight:700;font-size:15px;color:var(--fg-1)}
.msg-head .nm small{font-weight:400;color:var(--fg-5);margin-inline-start:6px;direction:ltr;unicode-bidi:embed}
.msg-head .to{font-size:12px;color:var(--fg-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-head .to .exp{color:var(--brand-primary);cursor:pointer}
.msg-head .snippet{font-size:13px;color:var(--fg-5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-head .dt{font-size:12px;color:var(--fg-5);flex:none;text-align:end}
.msg-head .mact{display:flex;gap:2px;flex:none}
.msg-head .mact button{width:34px;height:34px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--fg-4)}
.msg-head .mact button:hover{background:var(--border-soft);color:var(--brand-primary)}
.msg-head .mact svg{width:18px;height:18px}
.msg-inner{padding:0 20px 20px}
.msg-frame{width:100%;border:0;min-height:120px;display:block;overflow:hidden}
.msg-text{white-space:pre-wrap;font-size:15px;line-height:28px;color:var(--fg-2);padding:4px 2px;overflow-wrap:anywhere}
.atts-title{font-size:12px;font-weight:600;color:var(--fg-4);padding:16px 2px 10px;border-top:1px solid var(--border);margin-top:16px}
.atts{display:flex;flex-wrap:wrap;gap:12px}
.att{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  text-decoration:none;width:158px;transition:box-shadow .16s var(--ease), border-color .16s var(--ease);background:var(--bg-card)}
.att:hover{box-shadow:var(--shadow-md);border-color:var(--fg-5)}
.att .thumb{height:86px;display:flex;align-items:center;justify-content:center;background:var(--border-soft);overflow:hidden}
.att .thumb img{width:100%;height:100%;object-fit:cover}
.att .thumb svg{width:28px;height:28px;color:var(--brand-primary)}
.att .meta{padding:8px 10px}
.att .nm{font-size:12.5px;font-weight:600;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .sz{font-size:11px;color:var(--fg-5)}
.thread-zip{max-width:var(--readw);margin:0 auto 12px;text-align:center}
.thread-zip button{font-size:12.5px;color:var(--brand-primary);font-weight:600;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 18px}
.reply-strip{max-width:var(--readw);margin:16px auto 30px;display:flex;gap:10px}
.reply-strip button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg-card);
  border-radius:var(--r-md);padding:10px 22px;font-weight:600;font-size:14px;color:var(--fg-2);
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease)}
.reply-strip button:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.reply-strip button:active{transform:scale(.98)}
.reply-strip button.primary{background:var(--brand-cta);border-color:var(--brand-cta);color:#fff}
.reply-strip button.primary:hover{background:var(--brand-accent);border-color:var(--brand-accent);color:#fff}
.reply-strip svg{width:18px;height:18px}

/* ═══ الإنشاء — بطاقة عائمة ═══ */
#composeWrap{position:fixed;inset-inline-end:auto;inset-inline-start:16px;bottom:0;z-index:100;width:min(620px,calc(100vw - 32px))}
#compose{background:var(--card);border-radius:18px 18px 0 0;box-shadow:var(--sh3);display:flex;flex-direction:column;
  max-height:min(80vh,760px);border:1px solid var(--line);border-bottom:0}
#composeWrap.mini #compose>*:not(.cmp-head){display:none}
#composeWrap.mini{width:300px}
#composeWrap.expanded{inset:16px;width:auto;z-index:120}
#composeWrap.expanded #compose{max-height:100%;height:100%;border-radius:18px;border:1px solid var(--line)}
#composeWrap.expanded .cmp-head{border-radius:17px 17px 0 0}
#composeWrap.expanded #cmpBody{flex:1}
.cmp-head{display:flex;align-items:center;gap:4px;padding:11px 16px;background:var(--purple);color:#fff;
  border-radius:17px 17px 0 0;cursor:pointer}
.cmp-head strong{font-size:14px;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cmp-head .icon-btn{width:30px;height:30px}
.cmp-head .icon-btn:hover{background:rgba(255,255,255,.18)}
.cmp-head svg{width:15px;height:15px}
.cmp-row{display:flex;align-items:center;gap:10px;padding:7px 16px;border-bottom:1px solid var(--line);position:relative}
.cmp-row label{color:var(--faint);font-size:13px;flex:none}
.cmp-row input{flex:1;border:0;outline:0;padding:6px 0;background:none}
.chips{flex:1;display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--purple);
  border-radius:999px;padding:3px 6px 3px 10px;font-size:12.5px;font-weight:700;max-width:100%}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;unicode-bidi:embed}
.chip button{display:flex;color:var(--mut)}
.chip button:hover{color:var(--bad)}
.chip button svg{width:12px;height:12px}
.chips input{flex:1;min-width:120px;border:0;outline:0;padding:5px 0;background:none}
.mini-b{color:var(--mut);font-size:12.5px;padding:4px 9px;border-radius:8px;flex:none}
.mini-b:hover{background:var(--soft);color:var(--purple)}
.cc-btn{color:var(--mut);font-size:13px;font-weight:600;padding:2px 6px;flex:none;transition:.15s}
.cc-btn:hover{color:var(--purple);text-decoration:underline}
#sugg{position:absolute;top:100%;inset-inline-start:60px;z-index:20;background:#fff;border-radius:12px;
  box-shadow:var(--sh3);border:1px solid var(--line);min-width:300px;max-width:90%;overflow:hidden}
#sugg button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;text-align:start}
#sugg button:hover,#sugg button.hot{background:var(--soft)}
#sugg .avatar{width:30px;height:30px;font-size:12.5px}
#sugg .sn{font-weight:700;font-size:13px}
#sugg .se{font-size:12px;color:var(--faint);direction:ltr;unicode-bidi:embed}
.cmp-tools{display:flex;align-items:center;gap:2px;padding:6px 10px;border-top:1px solid var(--line);flex-wrap:wrap;background:var(--bg-app)}
.cmp-tools button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--fg-3)}
.cmp-tools button:hover{background:var(--border-soft);color:var(--brand-primary)}
.cmp-tools svg{width:15px;height:15px}
.cmp-tools select{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;
  background:var(--bg-card);color:var(--fg-2);outline:0;cursor:pointer;max-width:110px}
.cmp-tools select:hover{border-color:var(--brand-primary)}
.cmp-tools .vsep{width:1px;height:22px;background:var(--border);margin:0 4px}
.clr-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  color:var(--fg-3);cursor:pointer;position:relative}
.clr-btn:hover{background:var(--border-soft);color:var(--brand-primary)}
.clr-btn svg{width:15px;height:15px}
.clr-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0}
#uploadBar{display:none}
.att-upload{display:flex;align-items:center;gap:10px;background:var(--info-tint);border:1px solid var(--info);
  border-radius:10px;padding:8px 12px;margin:4px 0;min-width:200px}
.att-upload .au-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.att-upload .au-size{font-size:11px;color:var(--faint);white-space:nowrap}
.att-upload .au-bar{flex:1;height:6px;background:var(--border);border-radius:99px;overflow:hidden;min-width:60px}
.att-upload .au-fill{height:100%;background:var(--info);border-radius:99px;transition:width .2s}
.att-upload .au-x{color:var(--mut);flex:none;display:flex}
.att-upload .au-x:hover{color:var(--bad)}
.att-upload .au-x svg{width:14px;height:14px}
#cmpAtts{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
#cmpAtts:not(:empty){padding:10px 16px 0}
#cmpBody{min-height:190px;flex:1;overflow:auto;padding:14px 18px;outline:0;line-height:1.85;font-size:14.5px}
#cmpBody blockquote{border-inline-start:3px solid var(--line);margin:8px 0;padding:2px 12px;color:var(--mut)}
#cmpBody.dragging{outline:2px dashed var(--orange);outline-offset:-8px;background:var(--orange-soft)}
.cmp-foot{display:flex;align-items:center;gap:4px;padding:10px 14px;border-top:1px solid var(--line)}
.send-group{display:inline-flex;border-radius:999px;overflow:hidden;margin-inline-end:6px;
  box-shadow:0 2px 8px rgba(92,8,173,.25)}
.send-group button{border:0;cursor:pointer;font:inherit;color:#fff;background:var(--brand-cta);transition:.15s}
.send-group button:hover{filter:brightness(1.1)}
.send-group #cmpSend{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;font-weight:700;font-size:13.5px}
.send-group #cmpSend:disabled{opacity:.6;pointer-events:none}
.send-group #cmpSend svg{width:15px;height:15px}
.send-group #cmpSchedule{padding:9px 10px 9px 6px;border-inline-start:1px solid rgba(255,255,255,.3);display:flex;align-items:center}
.send-group #cmpSchedule svg{width:14px;height:14px}
.foot-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;
  color:var(--fg-4);transition:.15s}
.foot-btn:hover{background:var(--border-soft);color:var(--fg-1)}
.foot-btn svg{width:18px;height:18px}
.foot-btn span{font-size:14px;font-weight:700;line-height:1}
#cmpAa.on{background:var(--border-soft);color:var(--brand-primary)}
.btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;
  border-radius:999px;padding:10px 26px;font-weight:700;transition:.15s;text-decoration:none;box-shadow:0 3px 10px rgba(255,87,0,.35)}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 5px 16px rgba(255,87,0,.45)}
.btn-primary.big{font-size:16.5px;padding:13px 30px;justify-content:center}
.btn-primary:disabled{opacity:.6;pointer-events:none}
#cmpStatus{color:var(--mut);font-size:12.5px}
/* إيموجي */
#emojiPop{position:absolute;bottom:100%;inset-inline-start:0;background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--sh3);padding:10px;width:280px;max-height:220px;overflow:auto;z-index:30;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
#emojiPop button{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;cursor:pointer;border:0;background:none}
#emojiPop button:hover{background:var(--border-soft)}

/* ═══ نوافذ عامة ═══ */
.ovl{position:fixed;inset:0;background:rgba(23,17,38,.5);z-index:110;display:flex;align-items:center;justify-content:center;padding:16px;
  backdrop-filter:blur(2px)}
.dlg{background:var(--bg-card);border-radius:20px;width:min(640px,100%);max-height:92vh;display:flex;flex-direction:column;
  box-shadow:var(--sh3);overflow-y:auto;overflow-x:hidden;animation:pop .18s ease}
.dlg > *{min-width:0;max-width:100%}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.dlg-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--purple);font-size:16px;font-weight:700}
.dlg-head .icon-btn{color:var(--mut)}
.dlg-head .icon-btn:hover{background:var(--soft)}
.dlg h3{color:var(--purple);padding:18px 20px 6px;font-size:14.5px}
.dlg .hint{color:var(--mut);font-size:13px;padding:0 20px 8px;line-height:1.75}
.kv{display:flex;gap:10px;align-items:center;padding:5px 20px;font-size:13.5px}
.kv span{color:var(--mut);width:112px;flex:none}
.kv code{background:var(--soft);border-radius:8px;padding:3px 12px;direction:ltr;font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.row-line{display:flex;gap:10px;padding:10px 20px}
.row-line input,.row-line textarea{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;outline:0;transition:border .15s}
.row-line input:focus,.row-line textarea:focus{border-color:var(--purple)}
.row-line textarea{min-height:90px;resize:vertical}
#pwFresh{margin:6px 20px;background:var(--orange-soft);border:1.5px solid var(--orange);border-radius:14px;padding:14px 16px;font-size:13.5px}
#pwFresh code{font-size:17px;font-weight:700;direction:ltr;display:inline-block;margin-top:6px;user-select:all;letter-spacing:.5px}
.pwrow{display:flex;align-items:center;gap:10px;padding:8px 20px;font-size:13.5px;border-bottom:1px dashed var(--line)}
.pwrow .d{color:var(--faint);font-size:12px}
.pwrow button{color:var(--bad);font-size:12.5px;font-weight:700}
.btn-line{display:inline-flex;margin:6px 20px 18px;border:1.5px solid var(--line);border-radius:12px;padding:9px 18px;
  color:var(--bad);text-decoration:none;font-weight:700}
.btn-line:hover{border-color:var(--bad)}
.tgl{display:flex;align-items:center;gap:12px;padding:8px 20px;font-size:13.5px}
.tgl input{appearance:none;width:40px;height:22px;border-radius:var(--r-pill);background:var(--border);position:relative;cursor:pointer;transition:.2s;flex:none}
.tgl input::before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:2.5px;inset-inline-start:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl input:checked{background:var(--ok)}
.tgl input:checked::before{transform:translateX(-17px)}

/* قوائم منسدلة (نقل / تأجيل / قوالب) */
.menu{position:fixed;z-index:130;background:#fff;border-radius:14px;box-shadow:var(--sh3);border:1px solid var(--line);
  min-width:210px;padding:6px;max-height:60vh;overflow:auto}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;text-align:start;font-size:13.5px}
.menu button:hover{background:var(--soft)}
.menu button span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu button small{color:var(--faint);font-size:11.5px;flex:none}
.menu svg{width:16px;height:16px;color:var(--mut)}
.menu .mtitle{padding:8px 12px 6px;font-size:11.5px;font-weight:700;color:var(--faint);letter-spacing:.3px}
.menu .msep{height:1px;background:var(--line);margin:5px 8px}
.menu .mempty{padding:10px 12px;font-size:12.5px;color:var(--faint);line-height:1.6}
.when-menu button small{font-variant-numeric:tabular-nums}
.sel{border:1.5px solid var(--line);border-radius:10px;padding:7px 12px;font:inherit;outline:0;background:#fff;
  color:var(--ink);cursor:pointer;flex:none}
.sel:focus{border-color:var(--purple)}
#snack .sc{background:rgba(255,255,255,.16);border-radius:99px;min-width:26px;text-align:center;
  padding:2px 8px;font-weight:700;font-variant-numeric:tabular-nums}

/* ═══ سناك بار + توست ═══ */
#snack{position:fixed;bottom:22px;inset-inline-end:22px;z-index:140;background:var(--fg-1);color:#fff;border-radius:14px;
  padding:13px 18px;display:flex;align-items:center;gap:16px;box-shadow:var(--sh3);animation:pop .18s ease;font-size:13.5px}
#snack button{color:var(--accent);font-weight:700}
#toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%);z-index:200;
  background:var(--fg-1);color:#fff;border-radius:var(--r-pill);padding:11px 24px;font-weight:700;box-shadow:var(--sh3);animation:pop .18s ease}
#toast.err{background:var(--bad)}

/* ═══ الدخول ═══ */
#login{height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1000px 600px at 85% -10%,var(--brand-accent) 0%,transparent 55%),
             linear-gradient(150deg,var(--brand-primary) 0%,var(--brand-dark) 100%)}
.login-card{background:#fff;border-radius:26px;padding:46px 50px;text-align:center;max-width:410px;width:92%;box-shadow:var(--sh3)}
.login-logo{width:60px;height:60px;color:var(--orange);margin-bottom:12px}
.login-card h1{color:var(--purple);font-size:30px;margin-bottom:6px;font-weight:700}
.login-card p{color:var(--mut);margin-bottom:28px;line-height:1.8}

/* ═══ جوال — تجربة مخصصة بالكامل ═══ */
.only-mobile{display:none}
#mnav{display:none}
@media (max-width:1020px){
  #reader{position:fixed;inset:0;z-index:60;display:none}
  #reader.open{display:flex}
}
@media (max-width:700px){
  body{font-size:15px}
  #main{grid-template-columns:1fr}
  /* شريط فيوسويت المحقون (shadow host بلا صنف) يتجاوز ٣٧٥ ⇒ يوسّع نافذة التخطيط كلها.
     العلاج نمط فيودرايف: البحث بسطر مستقل، والشريط يتقلّص بجانب الشعار. */
  #top{min-height:54px;padding:8px 12px;gap:8px;flex-wrap:wrap;row-gap:6px;overflow:hidden}
  #top .brand span,#who{display:none}
  #btnSettings,#top .spacer{display:none}
  #searchForm{order:10;flex:1 0 100%;min-width:0;padding:8px 14px}
  #top > div:not(.brand):not(.spacer):not(#who){min-width:0;flex:1 1 auto;overflow:hidden}
  .only-mobile{display:inline-flex}
  #backBoxes{display:none}

  /* المجلدات = شيت سفلي */
  #boxes{position:fixed;inset:auto 0 0 0;z-index:90;display:none;background:var(--card);
    border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(31,26,51,.25);
    max-height:70dvh;padding:10px 14px calc(84px + env(safe-area-inset-bottom));overflow:auto}
  #boxes.open{display:flex}
  #boxes::before{content:"";position:sticky;top:0;display:block;width:44px;height:5px;border-radius:99px;
    background:var(--line);margin:2px auto 12px}
  #btnCompose{display:none}
  .box{padding:13px 16px;font-size:15.5px}
  #newFolder{padding:13px 16px}
  #fuBtn{padding:13px 16px;font-size:15.5px}

  /* متابعة المعلَّقات — بطاقات بلمس مريح */
  .fu-banner{margin:8px 10px 2px;padding:10px 12px;font-size:13px;flex-wrap:wrap}
  .fu-banner #fuGo{padding:8px 18px}
  .fu-card{margin:0 10px 10px;padding:12px 13px;gap:10px}
  .fu-card .avatar{width:38px;height:38px;font-size:15px}
  .fu-l3{display:none}
  .fu-acts{gap:8px;margin-top:11px}
  .fu-acts button{padding:10px 14px;font-size:13px;min-height:44px}
  .fu-sec{padding:16px 14px 8px}
  #boxSheetBg{position:fixed;inset:0;z-index:85;background:rgba(23,17,38,.45)}

  /* القائمة */
  #list{border-radius:0;margin:0;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  #listHead{min-height:48px;padding:6px 10px}
  #selAll{display:none}
  .row{height:74px;padding:0 14px;gap:12px;touch-action:pan-y;will-change:transform;background:var(--card)}
  .row .ck{display:none}
  .qa{display:none!important}
  .avatar{width:44px;height:44px;font-size:17px}
  .row .star{display:none}
  .row .from{max-width:55%;font-size:15px}
  .row .subj{font-size:14px}
  .row .prev{font-size:13.5px}
  .swipe-hint{position:absolute;inset:0;display:flex;align-items:center;z-index:-1;color:#fff;font-weight:700}
  .swipe-hint.arch{background:var(--ok);justify-content:flex-start;padding-inline-start:22px}
  .swipe-hint.del{background:var(--bad);justify-content:flex-end;padding-inline-end:22px}
  .swipe-hint svg{width:24px;height:24px}

  /* القراءة فوق الكل */
  #reader{inset:0;z-index:95;background:var(--bg)}
  #readHead{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0}
  #readBody{padding:0 10px calc(20px + env(safe-area-inset-bottom))}
  #threadSubject{font-size:18px}
  /* الترويسة رأسية: الاسم فوق، والتاريخ والأزرار بسطر تحته — التخطيط الأفقي يتراكب في ٣٧٥ */
  .msg-head{padding:12px;flex-wrap:wrap;row-gap:6px;align-items:flex-start}
  .msg-head .avatar{width:38px;height:38px;font-size:15px}
  .msg-head .who{flex:1 1 auto;min-width:0}
  .msg-head .nm{font-size:14px;line-height:1.45}
  .msg-head .nm small{display:block;margin:0;font-size:11.5px}
  .msg-head .dt{order:10;flex:1 1 100%;text-align:start;margin-inline-start:50px;font-size:11.5px}
  .msg-head .mact{order:9;margin-inline-start:auto}
  .msg-inner{padding:2px 12px 14px}
  .att{width:calc(50% - 5px)}
  .reply-strip{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 70%,transparent);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-bottom:0}
  .reply-strip button{flex:1;justify-content:center;padding:12px 8px;box-shadow:var(--sh1)}

  /* الإنشاء = شاشة كاملة */
  #composeWrap{inset:0;width:100vw;z-index:120}
  #composeWrap.mini{width:100vw}
  #compose{max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .cmp-head{border-radius:0;padding-top:max(11px, env(safe-area-inset-top))}
  #cmpMini{display:none}
  #cmpExpand{display:none}
  #cmpBody{min-height:120px}
  .cmp-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:2px}
  .cmp-tools{flex-wrap:wrap;gap:1px;padding:4px 8px}
  .cmp-tools select{font-size:11px;max-width:90px}
  .foot-btn{width:30px;height:30px}
  .foot-btn svg{width:16px;height:16px}

  /* الشريط السفلي + زر الإنشاء العائم */
  #mnav{display:flex;position:fixed;inset:auto 0 0 0;z-index:80;background:var(--card);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:center;box-shadow:0 -4px 20px rgba(31,26,51,.07)}
  #mnav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;
    font-weight:700;color:var(--faint);padding:4px 10px;border-radius:12px;min-width:58px}
  #mnav button svg{width:22px;height:22px}
  #mnav button.on{color:var(--orange)}
  #mnav .fab{background:var(--orange);color:#fff;width:56px;height:56px;border-radius:18px;
    justify-content:center;margin-top:-26px;box-shadow:0 8px 22px rgba(255,87,0,.45);min-width:56px}
  #mnav .fab svg{width:24px;height:24px}
  #mnav .fab span{display:none}
  #mnav .mbadge{position:absolute;transform:translate(-16px,-4px);background:var(--orange);color:#fff;
    font-size:10px;font-weight:700;border-radius:99px;padding:1px 6px}
  #snack{bottom:calc(76px + env(safe-area-inset-bottom));inset-inline-end:12px;inset-inline-start:12px;justify-content:center}
  #toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* Toast retry button */
.toast-retry{background:rgba(255,255,255,.25);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;
  padding:2px 10px;margin-inline-start:10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}

/* Attachment retry button */
.att-fail{border-color:var(--danger)!important;background:var(--danger-tint)!important}
.au-retry{background:var(--danger);color:#fff;border:0;border-radius:6px;padding:3px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}

/* Email details panel */
.msg-details{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:6px 0 4px;font-size:13px;line-height:1.9;color:var(--mut)}
.msg-details b{color:var(--fg-1);margin-inline-end:4px}
.dtl-toggle{border:0;background:0;color:var(--mut);font-size:11px;cursor:pointer;padding:0 6px;vertical-align:middle}

/* Download all button */
.dl-all{border:0;background:var(--purple);color:#fff;border-radius:8px;padding:4px 14px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;margin-inline-start:12px}

/* All Mail folder icon */
.box[data-id="__allmail__"] svg{color:var(--mut)}

/* Signature editor */
.sig-modes{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;padding:10px 14px;background:var(--bg);border-radius:10px;border:1px solid var(--line)}
.sig-modes label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--fg-1);cursor:pointer}
.sig-modes input{accent-color:var(--purple);width:16px;height:16px}
.sig-logo-row{display:flex;align-items:center;gap:10px;margin:10px 0}
#sigLogoPreview{margin:8px 0;padding:12px;background:var(--bg);border:1.5px dashed var(--line);border-radius:12px;text-align:center}
#sigLogoPreview img{max-height:60px;max-width:200px}
.sig-editor-wrap{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;margin:10px 0;transition:border-color .2s}
.sig-editor-wrap:focus-within{border-color:var(--purple)}
.sig-toolbar{display:flex;gap:2px;padding:6px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.sig-toolbar button{border:0;background:0;width:32px;height:30px;border-radius:8px;
  cursor:pointer;color:var(--fg-1);display:flex;align-items:center;justify-content:center}
.sig-toolbar button:hover{background:rgba(58,38,102,.1)}
.sig-toolbar svg{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sig-toolbar .vsep{width:1px;background:var(--line);margin:2px 4px;align-self:stretch}
.sig-editor{min-height:90px;max-height:200px;overflow-y:auto;padding:14px 16px;font:inherit;font-size:14px;
  line-height:1.8;outline:0;color:var(--fg-1);direction:auto;background:var(--card)}
.sig-editor:empty::before{content:"اكتب توقيعك هنا…";color:var(--faint);pointer-events:none}
.sig-preview-wrap{margin:12px 0;border:1.5px solid var(--purple);border-radius:12px;overflow:hidden}
.sig-preview-label{padding:8px 14px;background:var(--purple);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px}
.sig-preview{padding:16px;font-size:14px;line-height:1.8;color:var(--fg-3);background:var(--bg-card)}
.sig-preview img{max-height:60px;max-width:200px;display:block;margin-bottom:8px}
#sigSuggest{border-style:dashed;color:var(--purple);font-weight:600}
/* Company signature */
.sub{color:var(--fg-4);font-size:12.5px;line-height:1.7}
.csig-body{margin:8px 0;padding:0 20px;min-width:0}
.csig-preview{padding:16px;border:1.5px solid var(--brand-primary);border-radius:var(--r-md);
  background:var(--bg-card);margin-bottom:12px;font-size:14px;line-height:1.7;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.csig-preview img{max-height:60px;max-width:200px}
.csig-preview table{max-width:100%}
.csig-fields{display:flex;flex-direction:column;gap:6px}
.csig-fields label{font-size:13px;font-weight:600;color:var(--fg-1);margin-top:4px}
.csig-fields input{padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:var(--card);color:var(--fg-1)}
.csig-fields input:focus{border-color:var(--purple);outline:none}
#companySigSection h3{color:var(--purple)}


/* ═══ FDX_FOLDER_GROUP — طيّ المجلدات المخصّصة تحت «مجلداتي» ═══ */
.folders-tgl{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;margin-top:4px;
  border-radius:var(--r-md,10px);color:var(--mut);font-weight:700;font-size:13.5px;text-align:start}
.folders-tgl:hover{background:var(--hover);color:var(--purple)}
.folders-tgl svg{width:18px;height:18px;flex:none}
.folders-tgl .chev{width:14px;height:14px;transition:transform .15s;color:var(--faint)}
.folders-tgl.open .chev{transform:rotate(-90deg)}
.folders-tgl span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.folders-tgl .cnt{background:var(--soft);color:var(--purple);border-radius:999px;padding:1px 7px;
  font-size:11.5px;font-weight:800}
#userFolders{display:flex;flex-direction:column;gap:1px;padding-inline-start:10px;
  margin-inline-start:8px;border-inline-start:1px solid var(--line)}
/* ═══ FDX_BRAND_LOCK v2 — لوحة فيودكس فقط (أمر أبوأحمد 2026-08-13) ═══
   يُلحق في آخر الملف عمداً فيغلب أي إعادة صياغة ألوان تأتي من نشرة أخرى،
   والحارس يعيد زرعه إن غاب. سببه: نشراتٌ متتالية حوّلت الواجهة إلى «أبيض مطلق».
   ⚠️ v2: **لا يمسّ التخطيط إطلاقاً** — أبوأحمد اعتمد ستايل العمودين، والقفل
   للألوان والتنسيقات اللطيفة وحدها (بنفسجي/برتقالي فيودكس + أسطح وردية خفيفة). */
:root{
  --brand-dark:#3A2666; --brand-primary:#3A2666; --brand-cta:#3A2666; --brand-accent:#4b3487;
  --accent:#FF5700; --accent-tint:#fff1ea;
  --fg-1:#1f1a33; --fg-2:#3b3550; --fg-3:#69647d; --fg-4:#8b869c; --fg-5:#9a95ab;
  --bg-app:#f6f5fa; --bg-card:#ffffff; --border:#e9e6f2; --border-soft:#f2effa;
  --success:#0a8f5b; --danger:#c0392b;
  --shadow-xs:0 1px 3px rgba(31,26,51,.08);
  --shadow-md:0 6px 24px rgba(31,26,51,.14);
  --shadow-lg:0 16px 48px rgba(31,26,51,.22);
  --purple:#3A2666; --purple-2:#4b3487; --orange:#FF5700; --orange-soft:#fff1ea;
  --ink:#1f1a33; --mut:#69647d; --faint:#9a95ab; --bg:#f6f5fa; --card:#fff;
  --line:#e9e6f2; --soft:#f2effa; --hover:#f7f5fc; --sel:#fdeee6; --unread-bg:#fff;
}

/* ═══ حزمة «سيطرة الوارد» ═══ */
.tab .tcnt.dim{background:transparent;color:var(--fg-4);font-weight:600}
#emptyHint{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
#emptyHint button{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line,#e9e6f2);font-weight:700;font-size:13.5px;color:var(--brand-primary,#3A2666);
  background:var(--card,#fff);transition:filter .15s}
#emptyHint button:hover{filter:brightness(.96)}
#emptyHint b{color:var(--brand-accent,#FF5700);font-weight:800}
#unsubBtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;
  margin-inline-start:8px;font-weight:700;font-size:13px;flex:none;
  color:#b23c00;background:#fff1ea;border:1px solid #ffd9c4;transition:filter .15s}
#unsubBtn:hover{filter:brightness(.96)}
#unsubBtn:disabled{opacity:.55;pointer-events:none}
#unsubBtn svg{width:16px;height:16px}
@media (max-width:700px){ #unsubBtn span{display:none} #unsubBtn{padding:0 10px} }

/* FDX_HIDE_SELCARET: إخفاء زرّ خيارات التحديد (القائمة المنسدلة) */
#selCaret, #selMenu { display: none !important; }

/* ═════════ FDX_SMART_REPLY — الردود المقترحة ومساعد الصياغة ═════════ */
.smart-strip{display:flex;align-items:center;gap:8px;padding:10px 14px 2px;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.smart-strip::-webkit-scrollbar{height:4px}
.smart-strip .sm-lbl{flex:0 0 auto;font-size:12px;color:var(--faint,#6b6580);font-weight:500}
.smart-strip .sm-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  max-width:260px;min-height:46px;padding:8px 14px;
  border:1px solid var(--line,#e3e0ea);
  border:1px solid color-mix(in srgb, var(--brand,#3A2666) 22%, transparent);
  border-radius:14px;
  background:var(--soft,#f4f2fa);
  background:color-mix(in srgb, var(--brand,#3A2666) 6%, var(--card,#fff));
  cursor:pointer;text-align:start;font-family:inherit;box-shadow:0 1px 2px rgba(58,38,102,.06);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.smart-strip .sm-chip:hover{border-color:var(--brand,#3A2666);
  background:var(--brand,#3A2666);box-shadow:0 4px 12px rgba(58,38,102,.22);transform:translateY(-1px)}
.smart-strip .sm-chip:hover .sm-tag{color:var(--accent,#FF5700)}
.smart-strip .sm-chip:hover .sm-txt{color:#fff}
.smart-strip .sm-tag{font-size:11.5px;font-weight:700;color:var(--brand,#3A2666)}
.smart-strip .sm-txt{font-size:12.5px;color:var(--ink,#2a2340);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:236px}
.smart-strip .sm-sk{flex:0 0 auto;width:150px;height:44px;border-radius:18px;
  background:linear-gradient(90deg,#efedf3 25%,#f7f6fa 50%,#efedf3 75%);
  background-size:200% 100%;animation:smsk 1.1s linear infinite}
@keyframes smsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.smart-strip.busy{opacity:.5}
.smart-strip .sm-refresh{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line,#e3e0ea);border-radius:50%;background:#fff;cursor:pointer;color:var(--faint,#6b6580)}
.smart-strip .sm-refresh svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.smart-strip .sm-refresh:hover{color:var(--brand,#3A2666);border-color:var(--brand,#3A2666)}
#cmpSmart.busy{opacity:.5;pointer-events:none}
#smartMenu{position:fixed;z-index:120}
@media(max-width:768px){
  .smart-strip{padding:8px 12px 2px;gap:6px}
  .smart-strip .sm-chip{max-width:210px;min-height:44px}
  .smart-strip .sm-txt{max-width:186px}
  .smart-strip .sm-sk{width:120px}
}

/* ═════════ FDX_SETTINGS_THEME_CARDS — كروت المظهر + المعاينة ═════════ */
.theme-cards{display:flex;gap:12px;margin:10px 0 6px;flex-wrap:wrap}
.theme-card{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 12px;border:1.5px solid var(--line,#e3e0ea);border-radius:14px;
  background:var(--soft,#f5f3fa);color:var(--ink,#2a2340);cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;transition:border-color .15s,box-shadow .15s,background .15s}
.theme-card svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.theme-card:hover{border-color:color-mix(in srgb,var(--brand,#5C08AD) 45%,transparent)}
.theme-card.on{border-color:var(--brand,#5C08AD);
  box-shadow:0 0 0 1.5px var(--brand,#5C08AD) inset,0 4px 14px rgba(92,8,173,.14)}
/* المعاينة تعكس اللون الفعلي — ألوان صريحة تتغيّر مع الوضع (والـ«حسب النظام» يُطبَّق فعلياً) */
.theme-preview{border:1px solid #e6e3ef;border-radius:14px;overflow:hidden;margin:10px 0 4px;background:#ffffff}
.theme-preview .tp-top{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid #eceaf2}
.theme-preview .tp-title{font-weight:700;color:#101828}
.theme-preview .tp-tools i{display:inline-block;width:13px;height:13px;border-radius:50%;
  background:#dcd8e6;margin-inline-start:6px;vertical-align:middle}
.theme-preview .tp-row{display:flex;align-items:center;gap:10px;padding:12px 16px}
.theme-preview .tp-dot{width:10px;height:10px;border-radius:50%;background:var(--accent,#FF5700);flex:0 0 auto}
.theme-preview .tp-bar{height:8px;border-radius:6px;background:#e7e4ee}
.theme-preview .tp-bar.w1{width:62%}
.theme-preview .tp-bar.w2{width:42%}
html[data-theme="dark"] .theme-preview{background:#1D1A28;border-color:#2a2637}
html[data-theme="dark"] .theme-preview .tp-top{border-bottom-color:#2a2637}
html[data-theme="dark"] .theme-preview .tp-title{color:#E6E6EA}
html[data-theme="dark"] .theme-preview .tp-tools i{background:#3a3550}
html[data-theme="dark"] .theme-preview .tp-bar{background:#2e2a3c}
@media(max-width:768px){ .theme-card{padding:16px 10px;min-width:96px} }


/* FDX_FILTERS — تنسيق قائمة الفلاتر ومحرّرها ضمن نظام الحوارات */
#filtersList{padding:6px 20px 16px}
#filtersList .filter-row{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;background:var(--soft)}
#filtersList .filter-title{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg,#111)}
#filtersList .filter-title b{font-weight:700}
#filtersList .filter-body{margin:8px 0;font-size:13px;color:var(--mut);line-height:1.7}
#filtersList .filter-body b{color:var(--fg,#111);font-weight:600}
#filtersList .filter-conds,#filtersList .filter-acts{margin:4px 0}
#filtersList .filter-ops{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
#filtersList .filter-ops .btn-line{margin:0;padding:6px 12px;font-size:12.5px}
#filterEditor .fed-lbl{display:block;color:var(--mut);font-size:12.5px;font-weight:600;padding:12px 20px 0}
#filterEditor .fed-acts-note{padding:0 20px 6px}
#filterEditor .row-line select.sel{flex:1}


/* FDX_FILTERS — تنسيق قائمة الفلاتر ومحرّرها ضمن نظام الحوارات */
#filtersList{padding:6px 20px 16px}
#filtersList .filter-row{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;background:var(--soft)}
#filtersList .filter-title{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg,#111)}
#filtersList .filter-title b{font-weight:700}
#filtersList .filter-body{margin:8px 0;font-size:13px;color:var(--mut);line-height:1.7}
#filtersList .filter-body b{color:var(--fg,#111);font-weight:600}
#filtersList .filter-conds,#filtersList .filter-acts{margin:4px 0}
#filtersList .filter-ops{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
#filtersList .filter-ops .btn-line{margin:0;padding:6px 12px;font-size:12.5px}
#filterEditor .fed-lbl{display:block;color:var(--mut);font-size:12.5px;font-weight:600;padding:12px 20px 0}
#filterEditor .fed-acts-note{padding:0 20px 6px}
#filterEditor .row-line select.sel{flex:1}


/* FDX_FILTERS_SIDEBAR — زر الفلاتر: نفس شكل «مجلد جديد» بلون بنفسجي دايم */
#sideFiltersBtn {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 8px); margin: 4px 4px 0;
  padding: 9px 14px; border-radius: 12px;
  background: var(--purple); color: #fff;
  font: inherit; font-weight: 700; font-size: 13.5px;
  border: 0; cursor: pointer;
  transition: background .15s, transform .1s;
}
#sideFiltersBtn:hover { background: var(--purple-2, #4b3487); transform: translateY(-1px); }
#sideFiltersBtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }

/* شريط انتهاء الجلسة — بديل إعادة التحميل القسرية التي تبتلع ما يُكتب */
#sessBar{position:fixed;inset-inline:0;bottom:0;z-index:300;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:12px 18px;background:var(--fg-1,#1f1a33);color:#fff;
  font-weight:700;font-size:13.5px;box-shadow:0 -8px 28px rgba(0,0,0,.22)}
#sessBar button{background:var(--brand-accent,#FF5700);color:#fff;border-radius:999px;padding:7px 18px;font-weight:800}


/* ═══════════ FDX_VACATION — الرد التلقائي بالإجازة ═══════════ */
.vac-dates{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}
.vac-dates label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);flex:1 1 150px}
.vac-dates input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;
  font-size:14px;background:var(--card);color:var(--text);min-height:40px}
.vac-lbl{display:block;margin:10px 0 4px;font-size:13px;color:var(--muted)}
#vacSubj,#vacBody{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14px;background:var(--card);color:var(--text);box-sizing:border-box}
#vacBody{resize:vertical;line-height:1.8;min-height:96px}
.vac-tpls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.vac-tpls .btn-line{min-height:34px}
#vacBanner{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#fff3e8;
  border-bottom:1px solid #ffd6b0;color:#8a3b00;font-size:13px;line-height:1.6}
#vacBanner svg{width:18px;height:18px;flex:none;fill:none;stroke:#FF5700;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
#vacBanner .vb-txt{flex:1;min-width:0}
#vacBanner button{border:1px solid #ffbe8a;background:#fff;color:#8a3b00;border-radius:7px;
  padding:5px 11px;font-family:inherit;font-size:13px;cursor:pointer;min-height:32px}
#vacBanner button:hover{background:#fff8f2}
@media(max-width:768px){
  #vacBanner{flex-wrap:wrap;padding:10px 12px}
  #vacBanner .vb-txt{flex:1 1 100%}
  #vacBanner button{min-height:44px;flex:1}
  .vac-dates label{flex:1 1 100%}
  .vac-dates input,#vacSubj,#vacBody{min-height:44px}
  .vac-tpls .btn-line{min-height:44px;flex:1 1 30%}
}
/* ═══════════ نهاية FDX_VACATION ═══════════ */

/* ══════════ FDX_FB_TASK — زر «حوّل إلى مهمة» وحواره ══════════ */
.reply-strip .fbtask-btn{color:var(--purple)}
.reply-strip .fbtask-btn svg{stroke:var(--purple)}
#fbTask .fed-lbl{display:block;color:var(--mut);font-size:12.5px;font-weight:600;padding:12px 20px 0}
#fbTask .row-line select.sel,#fbTask .row-line input,#fbTask .row-line textarea{flex:1}
#fbTask .row-line textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--soft);color:inherit;resize:vertical;min-height:52px}
#fbTask .btn-primary{min-height:44px}
@media (max-width:640px){
  #fbTask{width:100%;max-width:100%;border-radius:18px 18px 0 0}
  #fbTask .row-line select.sel,#fbTask .row-line input,#fbTask .row-line textarea{min-height:44px}
  .reply-strip .fbtask-btn{min-height:44px}
}
/* 375: «حوّل إلى مهمة» يلتفّ ثلاثة أسطر ويضخّم الشريط اللاصق — اختصره إلى «مهمة» */
@media (max-width:640px){ .reply-strip .fbtask-btn .fbt-long{display:none} }

/* ── FDX_TRACK: إيصال القراءة ── */
#cmpTrack.on { color: #FF5700; background: #FFF1E9; border-radius: 8px; }
.trk-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px;
  background: #F3F0FA; color: #3A2666; border: 1px solid #E3DCF3; width: fit-content;
}
.trk-chip.read { background: #FFF1E9; color: #B33D00; border-color: #FFD9C2; }
.trk-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.trk-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px;
  font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
  background: #FFF1E9; color: #B33D00; border: 1px solid #FFD9C2; white-space: nowrap;
}
.trk-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; }
@media (max-width: 640px) {
  .trk-chip { font-size: 11.5px; padding: 3px 8px; }
  .trk-badge { font-size: 11px; }
  #cmpTrack { min-width: 44px; min-height: 44px; }
}


/* FDX_MULTI_ACCT_UI — زر الأفاتار في الشريط الجانبي + القائمة المنسدلة */
.acc-btn {
  display:flex; align-items:center; gap:10px; width: calc(100% - 8px); margin: 6px 4px 4px;
  padding: 8px 12px; border-radius: 12px; background: var(--soft);
  border: 1.5px solid var(--line); color: var(--fg, #111);
  font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background .15s;
}
.acc-btn:hover { background: #ede9fe; border-color: var(--purple); }
.acc-btn .acc-av { width:32px; height:32px; border-radius:50%; background:#3A2666; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none; }
.acc-btn .acc-nm { flex:1; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-btn .acc-chev { color: var(--mut); flex: none; }

#accDrop {
  position: absolute; z-index: 200; top: 58px; inset-inline-start: 12px;
  width: 300px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  padding: 10px; overflow: hidden;
  animation: fdxDrop .15s ease;
}
@keyframes fdxDrop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.acc-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background:linear-gradient(135deg,#efeaff 0%,#fff 100%); border:1px solid #ede9fe; margin-bottom:8px; }
.acc-card .acc-av-lg { width:52px; height:52px; border-radius:50%; background:#3A2666; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; flex:none; }
.acc-card .acc-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.acc-card .acc-txt b { font-size:14.5px; color:var(--fg,#111); }
.acc-card .acc-txt span { font-size:12.5px; color:var(--mut); direction:ltr; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-sect { font-size:11.5px; color:var(--mut); font-weight:700; padding: 8px 12px 4px; }
.acc-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; text-decoration:none; color:var(--fg,#111); font-size:13.5px; cursor:pointer; border:0; background:transparent; width:100%; }
.acc-item:hover { background:var(--soft); }
.acc-item .acc-av-sm { width:34px; height:34px; border-radius:50%; background:#3A2666; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none; }
.acc-item .acc-txt { flex:1; min-width:0; text-align:start; display:flex; flex-direction:column; }
.acc-item .acc-txt b { font-size:13px; }
.acc-item .acc-txt span { font-size:11.5px; color:var(--mut); direction:ltr; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-item .acc-rm { color:var(--mut); font-weight:700; padding: 4px 8px; border-radius: 6px; flex: none; }
.acc-item .acc-rm:hover { background:#ffe0e0; color:#d32f2f; }
.acc-sep { height:1px; background:var(--line); margin: 8px 4px; }
.acc-add { font-weight:700; color:var(--purple); }
.acc-logout { color:var(--bad,#d32f2f); font-weight:600; }


/* FDX_MULTI_ACCT_HINT */
#accDrop .acc-hint {
  margin-top: 6px; padding: 8px 12px; font-size: 11px; color: var(--mut);
  background: var(--soft); border-radius: 8px; line-height: 1.6; text-align: center;
}


/* FDX_ACC_SCOPE — يوضح نطاق الحساب في زر الأفاتار */
.acc-btn .acc-nm { font-size: 12.5px; }

/* ══════════════════ FDX_LABELS — التسميات الملوّنة ══════════════════ */
.lbl-side{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.lbl-side-h{display:flex;align-items:center;gap:6px;padding:2px 12px 6px;font-size:11.5px;font-weight:700;color:var(--faint);letter-spacing:.3px}
.lbl-side-h span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbl-mng{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--mut)}
.lbl-mng:hover{background:var(--soft);color:var(--purple)}
.lbl-mng svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.lbl-side-empty{padding:2px 12px 8px;font-size:12px;color:var(--faint);line-height:1.7}
.lbl-dot{width:10px;height:10px;flex:none;border-radius:3px;display:inline-block}
.lbl-dot.big{width:14px;height:14px;border-radius:4px}
.box.lbl-b .lbl-dot{margin-inline-start:2px}
.lbl-chip{display:inline-block;flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle;margin-inline-end:6px;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;
  color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,#fff);border:1px solid color-mix(in srgb,var(--lc) 32%,#fff)}
.row .l2 .lbl-chip{margin-inline-start:2px}
.msg-lbls{display:flex;flex-wrap:wrap;gap:4px;padding:0 18px 10px}
.msg-lbls:empty{display:none}
.lbl-menu{min-width:236px;max-height:min(70vh,420px);overflow:auto}
.lbl-menu button i.lbl-dot{margin-inline-end:2px}
.lbl-menu .tick{width:15px;height:15px;flex:none;color:var(--orange);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lbl-dlg{width:min(560px,100%)}
.lbl-dlg-body{overflow:auto;padding:8px 24px 20px}
.lbl-sw{display:flex;flex-wrap:wrap;gap:8px}
.lbl-sw .sw{width:26px;height:26px;border-radius:8px;border:2px solid transparent;box-shadow:0 0 0 1px var(--line) inset}
.lbl-sw .sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
.lbl-sw.mini .sw{width:18px;height:18px;border-radius:6px;border-width:2px}
.lbl-mgr{padding:4px 20px 10px;display:flex;flex-direction:column;gap:10px}
.lbl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lbl-nm{flex:1 1 150px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.lbl-nm:focus{outline:none;border-color:var(--purple)}
.lbl-del{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--mut)}
.lbl-del:hover{background:#fdeaea;color:var(--bad)}
.lbl-del svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){
  .lbl-chip{max-width:110px;font-size:10.5px}
  .lbl-menu{min-width:min(280px,92vw);max-width:92vw}
  .lbl-mgr{padding:4px 14px 10px}
  .lbl-row{gap:8px}
  .lbl-nm{flex:1 1 100%;order:2;min-height:44px}
  .lbl-row .lbl-dot.big{order:1}
  .lbl-sw.mini{order:3;flex:1 1 auto;gap:10px}
  .lbl-sw.mini .sw{width:26px;height:26px}
  .lbl-del{order:4;width:44px;height:44px}
  .lbl-mng{width:44px;height:44px}
  .lbl-mng svg{width:18px;height:18px}
  .lbl-side-h{padding-inline-end:4px}
  .msg-lbls{padding:0 14px 10px}
}
/* ══════════════════ /FDX_LABELS ══════════════════ */

/* ══════════════════ FDX_SAVED_SEARCH — البحث المتقدّم والبحث المحفوظ (P2-١٣) ══════════════════ */
.sb-act{display:inline-flex;align-items:center;gap:6px;color:var(--fg-4);font-size:13px;padding:0 10px;
  height:34px;border-radius:var(--r-sm);flex:none;border:1px solid var(--line);background:transparent}
.sb-act:hover{border-color:var(--purple);color:var(--purple)}
.sb-act.on{border-color:var(--orange);color:var(--orange);background:rgba(255,87,0,.07)}
.ss-side{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ss-side-h{display:flex;align-items:center;gap:6px;padding:2px 12px 6px;font-size:11.5px;font-weight:700;
  color:var(--faint);letter-spacing:.3px}
.ss-side-h span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-mng{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--faint);flex:none}
.ss-mng:hover{background:var(--soft);color:var(--purple)}
.ss-mng svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.box.ss-b svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* حوار البحث المتقدّم */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.adv-row{display:flex;flex-direction:column;gap:5px;min-width:0}
.adv-row.wide{grid-column:1 / -1}
.adv-row label{font-size:12px;font-weight:600;color:var(--fg-4)}
.adv-row input[type=text],.adv-row input[type=date],.adv-row input[type=number],.adv-row select{
  width:100%;min-height:38px;border:1px solid var(--line);border-radius:10px;padding:0 10px;
  font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--bg-card)}
.adv-row input:focus,.adv-row select:focus{outline:none;border-color:var(--purple)}
.adv-tgls{grid-column:1 / -1}
.adv-chk{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;min-height:38px}
.adv-chk label.adv-ck{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);cursor:pointer}
.adv-chk label.adv-ck input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer;flex:none}
.adv-acts{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.adv-acts .btn-line{margin:0;padding:9px 16px}
.adv-acts .btn-line:hover{border-color:var(--purple);color:var(--purple)}
.adv-hint{font-size:12.5px;color:var(--faint);line-height:1.8;margin:8px 0 0}
/* إدارة عمليات البحث */
.ss-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ss-row .ss-nm{flex:0 0 200px;min-height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;
  font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--bg-card)}
.ss-row .ss-nm:focus{outline:none;border-color:var(--purple)}
.ss-row .ss-d{flex:1;min-width:0;font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-row .ss-del{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--faint);flex:none}
.ss-row .ss-del:hover{background:var(--danger-tint);color:var(--danger)}
@media (max-width:640px){
  .sb-act{min-height:44px;height:44px}
  .adv-grid{grid-template-columns:1fr}
  .adv-row input[type=text],.adv-row input[type=date],.adv-row input[type=number],.adv-row select{min-height:44px}
  .adv-chk{gap:12px 18px}
  .adv-chk label.adv-ck{min-height:44px}
  .adv-acts .btn-line,.adv-acts .btn-primary{min-height:44px;flex:1 1 auto;justify-content:center}
  .ss-mng{width:44px;height:44px}
  .ss-row .ss-nm{flex:1 1 100%;min-height:44px}
  .ss-row .ss-d{flex:1 1 auto;white-space:normal}
  .ss-row .ss-del{width:44px;height:44px}
}
/* ══════════════════ /FDX_SAVED_SEARCH ══════════════════ */

/* ══════════════ FDX_CONTACTS — دفتر عناوين حقيقي (P2-١٥) ══════════════ */
.cn-side { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line, #ece9f2); }
.cn-bar { display: flex; gap: 8px; align-items: center; padding: 12px 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #ece9f2); background: #fff; position: sticky; top: 0; z-index: 3; }
.cn-search { position: relative; flex: 1; min-width: 180px; display: flex; align-items: center; }
.cn-search svg { position: absolute; inset-inline-start: 10px; width: 17px; height: 17px; fill: none;
  stroke: #8b849c; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.cn-search input { width: 100%; height: 44px; border: 1px solid #e2dfe9; border-radius: 12px;
  padding: 0 36px 0 12px; font: inherit; font-size: 14px; background: #faf9fc; color: #1f1b2e; }
.cn-search input:focus { outline: none; border-color: #3A2666; background: #fff; }
.cn-primary, .cn-ghost { height: 44px; border-radius: 12px; font: inherit; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; cursor: pointer; }
.cn-primary { background: #3A2666; color: #fff; border: 0; }
.cn-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cn-primary:hover { background: #2c1c50; }
.cn-ghost { background: #fff; color: #3A2666; border: 1px solid #ded9e8; }
.cn-ghost:hover { border-color: #3A2666; }
.cn-ghost:disabled { opacity: .6; cursor: default; }
.cn-groups { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--line, #ece9f2); }
.cn-g { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e2dfe9;
  background: #fff; color: #4a4360; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cn-g span { background: #f1eff6; border-radius: 999px; padding: 0 6px; font-size: 11px; color: #6b6483; }
.cn-g.on { background: #3A2666; color: #fff; border-color: #3A2666; }
.cn-g.on span { background: rgba(255,255,255,.22); color: #fff; }
.cn-list { padding: 6px 0 28px; }
.cn-card { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #f3f1f7; cursor: pointer; }
.cn-card:hover { background: #faf9fc; }
.cn-av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #ece7f6; color: #3A2666;
  display: grid; place-items: center; font-weight: 700; font-size: 16px; font-style: normal; }
.cn-b { flex: 1; min-width: 0; }
.cn-l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cn-l1 b { font-size: 14.5px; color: #1f1b2e; }
.cn-org { font-size: 12.5px; color: #7a7391; }
.cn-l2 { font-size: 13px; color: #6b6483; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-ph { margin-inline-start: 10px; color: #8b849c; }
.cn-gs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.cn-gs span { font-size: 11px; background: #f1eff6; color: #5a5273; border-radius: 999px; padding: 2px 8px; }
.cn-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.cn-acts button { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: #7a7391; }
.cn-acts button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cn-acts button:hover { background: #f1eff6; color: #3A2666; }
.cn-acts button[data-ca="del"]:hover { color: #c0392b; }
.cn-empty { padding: 48px 28px; text-align: center; color: #6b6483; }
.cn-empty svg { width: 42px; height: 42px; fill: none; stroke: #cfc9dd; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cn-empty h3 { margin: 12px 0 6px; font-size: 16px; color: #1f1b2e; }
.cn-empty p { font-size: 13.5px; line-height: 1.9; max-width: 420px; margin: 0 auto; }
.cn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 6px 0 4px; }
.cn-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #6b6483; }
.cn-form .cn-wide, .cn-form .cn-hint, .cn-form .cn-form-acts { grid-column: 1 / -1; }
.cn-form input, .cn-form textarea { height: 44px; border: 1px solid #e2dfe9; border-radius: 10px;
  padding: 0 12px; font: inherit; font-size: 14px; color: #1f1b2e; background: #fff; }
.cn-form textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.7; }
.cn-form input:focus, .cn-form textarea:focus { outline: none; border-color: #3A2666; }
.cn-hint { font-size: 12px; color: #8b849c; line-height: 1.8; margin: 0; }
.cn-form-acts { display: flex; gap: 8px; padding-top: 4px; }
.cn-form-acts .btn-primary { height: 44px; padding: 0 22px; border: 0; border-radius: 12px;
  background: #FF5700; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.cn-form-acts .btn-primary:hover { background: #e64e00; }
.cn-form-acts .btn-primary:disabled { opacity: .6; cursor: default; }
.cn-form-acts .btn-line { height: 44px; padding: 0 18px; border-radius: 12px; }
#sugg .sg-g { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #ece7f6;
  display: grid; place-items: center; }
#sugg .sg-g svg { width: 17px; height: 17px; fill: none; stroke: #3A2666; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sugg .sg-o { font-size: 11px; color: #8b849c; margin-inline-start: 6px; }
@media (max-width: 640px) {
  .cn-bar { padding: 10px; gap: 6px; }
  .cn-search { flex: 1 1 100%; }
  .cn-primary, .cn-ghost { flex: 1; justify-content: center; font-size: 13px; padding: 0 10px; }
  .cn-card { padding: 10px; gap: 10px; }
  .cn-acts button { width: 44px; height: 44px; }
  .cn-form { grid-template-columns: 1fr; }
  .cn-form-acts .btn-primary, .cn-form-acts .btn-line { flex: 1; }
}
#list.cn #tabs, #list.cn #qfilters, #list.cn #unreadBadge, #list.cn #selall, #list.cn .fu-banner { display: none !important; }
#list.cn #rows { overflow-y: auto; }
/* ══════════════ /FDX_CONTACTS ══════════════ */


/* FDX_ACC_SETTINGS — بطاقات حسابات نظيفة داخل الإعدادات */
#accountsSection { padding: 0 20px 8px; }
#accountsSection .acc-loading { padding: 20px; text-align: center; color: var(--mut); font-size: 13px; }
#accountsSection .acc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#accountsSection .acc-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff;
  transition: border-color .15s;
}
#accountsSection .acc-card.on { border-color: var(--purple); background: linear-gradient(135deg, #efeaff 0%, #fff 100%); }
#accountsSection .acc-card-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: #3A2666; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; flex: none;
}
#accountsSection .acc-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#accountsSection .acc-card-name { font-size: 14px; font-weight: 700; color: var(--fg, #111); display: flex; align-items: center; gap: 8px; }
#accountsSection .acc-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--ok, #22a06b); color: #fff;
}
#accountsSection .acc-card-email {
  font-size: 12px; color: var(--mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start;
}
#accountsSection .acc-card-acts { display: flex; gap: 4px; flex: none; }
#accountsSection .acc-btn-switch, #accountsSection .acc-btn-remove {
  width: 32px; height: 32px; border: 1.5px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--purple); transition: all .15s;
}
#accountsSection .acc-btn-switch:hover { background: var(--soft); border-color: var(--purple); }
#accountsSection .acc-btn-remove { color: var(--bad, #d32f2f); }
#accountsSection .acc-btn-remove:hover { background: #ffecec; border-color: var(--bad, #d32f2f); }
#accountsSection .acc-btn-switch.busy { opacity: .5; }
#accountsSection .acc-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px;
  background: var(--soft); color: var(--purple);
  border: 1.5px dashed var(--purple);
  font-weight: 700; font-size: 13px; text-decoration: none;
  transition: all .15s;
}
#accountsSection .acc-add-btn:hover { background: var(--purple); color: #fff; border-style: solid; }


/* FDX_CONFIRM — dialog بديل عن browser confirm */
#fdxConfirmWrap { z-index: 500; }
#fdxConfirmWrap .fdx-confirm { max-width: 420px; width: min(420px, 92vw); padding: 20px 20px 16px; text-align: center; }
#fdxConfirmWrap .fdx-confirm-body { color: var(--fg, #1f1a33); font-size: 14.5px; line-height: 1.75; padding: 8px 4px 18px; }
#fdxConfirmWrap .fdx-confirm-body p { margin: 0; }
#fdxConfirmWrap .fdx-confirm-acts { display: flex; gap: 10px; justify-content: center; }
#fdxConfirmWrap .fdx-confirm-acts button { min-width: 96px; padding: 9px 18px; border-radius: 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; margin: 0; }
#fdxConfirmWrap .btn-line { border: 1.5px solid var(--line); background: #fff; color: var(--mut); }
#fdxConfirmWrap .btn-line:hover { border-color: var(--mut); }
#fdxConfirmWrap .btn-primary { border: 0; background: var(--purple); color: #fff; }
#fdxConfirmWrap .btn-primary:hover { background: var(--purple-2, #4b3487); }
#fdxConfirmWrap .btn-primary.danger { background: var(--bad, #d32f2f); }
#fdxConfirmWrap .btn-primary.danger:hover { background: #b02525; }


/* FDX_SETTINGS_TABS — تبويبات الإعدادات (نسخة نظيفة) */
#settings .set-tabs {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: 5;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
#settings .set-tabs::-webkit-scrollbar { display: none; }
#settings .set-tab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 0;
  min-height: 34px;
  line-height: 1;
  transition: color .15s, background .15s;
  text-align: center;
}
#settings .set-tab-btn:hover { color: var(--purple); background: var(--soft); }
#settings .set-tab-btn.on { color: #fff; background: var(--purple); }
#settings .set-tab-panel { display: none; }
#settings .set-tab-panel.on { display: block; }


/* FDX_PIC_IMG — يخلي img inside avatar يظهر بشكل دائري صحيح */
.acc-btn .acc-av, .acc-card .acc-av-lg, .acc-item .acc-av-sm,
#accountsSection .acc-card-av { overflow: hidden; padding: 0; }
.acc-btn .acc-av img, .acc-card .acc-av-lg img,
.acc-item .acc-av-sm img, #accountsSection .acc-card-av img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}


/* FDX_TGL_FIX — تصحيح شكل toggle في وضع LTR */
:root[dir="ltr"] .tgl input:checked::before { transform: translateX(17px); }


/* FDX_CN_FORM_POLISH — layout نظيف لنموذج جهة اتصال */
.cn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 4px 4px 8px; }
.cn-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--mut); font-weight: 700; }
.cn-form label.cn-wide { grid-column: 1 / -1; }
.cn-form input, .cn-form textarea {
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 13.5px; color: var(--fg, #111);
  background: #fff; outline: none; transition: border-color .15s;
}
.cn-form input:focus, .cn-form textarea:focus { border-color: var(--purple); }
.cn-form textarea { min-height: 60px; resize: vertical; font-family: inherit; }
.cn-form .cn-hint { grid-column: 1 / -1; font-size: 12px; color: var(--mut); margin: 0; padding: 6px 4px 0; line-height: 1.65; }
.cn-form .cn-form-acts { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; }
.cn-form .cn-form-acts button { min-width: 100px; padding: 9px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 700; margin: 0; }
@media (max-width: 620px) { .cn-form { grid-template-columns: 1fr; } }


/* FDX_CN_PADDING — extra horizontal padding for contact modal */
.lbl-dlg .dlg-head { padding: 16px 24px; }
.lbl-dlg-body .cn-form-acts { justify-content: flex-end; padding-top: 8px; gap: 10px; }


/* FDX_DARK_MODE — الوضع الليلي */
html[data-theme="dark"] {
  --brand-dark: #1B0A34;
  --fg-1: #E6E6EA; --fg-2: #C8C4D3; --fg-3: #A19DAF; --fg-4: #7F7B8C; --fg-5: #625E70;
  --bg-app: #14111C; --bg-card: #1D1A28;
  --border: #302B3E; --border-soft: #2A2537;
  --accent-tint: #2C1E4A;
  --ink: #E6E6EA; --mut: #A19DAF; --faint: #625E70;
  --bg: #14111C; --card: #1D1A28;
  --line: #302B3E; --soft: #2A2537; --hover: #24202E;
  --sel: #2C1E4A; --unread-bg: #24202E;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .msg-card, html[data-theme="dark"] .row.unread { background: var(--card); }
html[data-theme="dark"] .row:hover { background: var(--hover); }
/* FDX_DARK_ROWS: الصف المفتوح/المعلّم/الممرّر لا يطلع أبيض في الوضع الداكن (قاطع) */
html[data-theme="dark"]{ --info-tint:#20263f; }
html[data-theme="dark"] .row.on,
html[data-theme="dark"] .row.picked{ background:#241d38 !important; }
html[data-theme="dark"] .row.on:hover,
html[data-theme="dark"] .row.picked:hover{ background:#2e2547 !important; }
html[data-theme="dark"] .row:hover{ background:#24202E !important; }
html[data-theme="dark"] .row.unread{ background:#1D1A28 !important; }
/* FDX_DARK_ACC: قائمة الحساب في الوضع الداكن — نصوص فاتحة + hover غامق */
html[data-theme="dark"] .acc-txt b{ color:#F5F3FA !important; }
html[data-theme="dark"] .acc-txt span{ color:#BDB9CB !important; }
html[data-theme="dark"] .acc-item{ color:#E6E6EA; }
html[data-theme="dark"] .acc-item:hover{ background:#2A2537 !important; }
html[data-theme="dark"] .acc-add{ color:#C9B8FF !important; }
/* كارت الحساب في تبويب الحسابات (كلاسات مختلفة) */
html[data-theme="dark"] #accountsSection .acc-card-name{ color:#F5F3FA !important; }
html[data-theme="dark"] #accountsSection .acc-card-email{ color:#BDB9CB !important; }
html[data-theme="dark"] .acc-card .acc-txt b{ color:#F5F3FA !important; }
html[data-theme="dark"] .acc-card .acc-txt span{ color:#BDB9CB !important; }
html[data-theme="dark"] .dlg, html[data-theme="dark"] .lbl-dlg-body,
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .box.on { background: var(--sel); color: var(--purple); }
html[data-theme="dark"] .filter-row, html[data-theme="dark"] .acc-card, html[data-theme="dark"] .cn-card,
html[data-theme="dark"] .fu-sec { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .acc-card.on { background: linear-gradient(135deg, #251A3C 0%, var(--card) 100%); }
html[data-theme="dark"] .kv code, html[data-theme="dark"] .mp-toolbar { background: var(--soft); }
html[data-theme="dark"] .hint, html[data-theme="dark"] p.hint { color: var(--fg-3); }
html[data-theme="dark"] #searchBar { background: var(--bg-card); border-bottom-color: var(--line); }
html[data-theme="dark"] #boxes { background: var(--bg-card); border-inline-end-color: var(--line); }
html[data-theme="dark"] #readerBody { background: var(--bg); }
html[data-theme="dark"] .set-tab-btn { color: var(--fg-3); }
html[data-theme="dark"] .set-tab-btn:hover { background: var(--soft); color: var(--fg-1); }
html[data-theme="dark"] .set-tab-btn.on { background: var(--purple); color: #fff; }
html[data-theme="dark"] .ovl { background: rgba(0,0,0,.58); }


/* FDX_DARK_FIX_V2 */

/* 1) skeleton bars — الاسم الحقيقي .skel */
html[data-theme="dark"] .skel i,
html[data-theme="dark"] .skel b {
  background: linear-gradient(90deg, #24202E 25%, #302B3E 50%, #24202E 75%) !important;
  background-size: 200% 100% !important;
}
html[data-theme="dark"] .skel { border-bottom-color: #24202E; }

/* 2) نصوص أقل بريقاً (كانت أبيض ناصع مؤذي للعين) */
html[data-theme="dark"] {
  --ink: #D4D0DE;   /* بدل E6E6EA */
  --fg-1: #D4D0DE;
  --fg-2: #B8B4C5;
  --fg-3: #928EA0;  /* التواريخ ومعلومات ثانوية */
  --fg-4: #6E6A7C;
  --fg-5: #504C5E;
}
html[data-theme="dark"] .row .from,
html[data-theme="dark"] .row .subject,
html[data-theme="dark"] .row-title { color: #D4D0DE; }
html[data-theme="dark"] .row .preview,
html[data-theme="dark"] .row .snip { color: #928EA0; }
html[data-theme="dark"] .row .when,
html[data-theme="dark"] .row .date,
html[data-theme="dark"] .row .time { color: #A19DAF; font-weight: 500; }

/* 3) badges موحدة (الأعداد بجانب الوارد/المجلدات/بحاجة متابعة) */
html[data-theme="dark"] .cnt,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .box .cnt,
html[data-theme="dark"] .box-wrap .cnt,
html[data-theme="dark"] [data-count] {
  background: #3A2E5A !important;
  color: #F0E9FA !important;
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 600;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}
/* badge البرتقالي (بحاجة متابعة) — خليه ملوّن للتنبيه */
html[data-theme="dark"] .fu-count,
html[data-theme="dark"] [data-fu-badge] {
  background: #E27B2E !important;
  color: #fff !important;
}
/* badge على المجلد النشط */
html[data-theme="dark"] .box.on .cnt { background: var(--brand-accent) !important; color: #fff !important; }

/* 4) صف "بحاجة متابعة" في السايدبار */
html[data-theme="dark"] .fu-item,
html[data-theme="dark"] [data-role="fu-shortcut"],
html[data-theme="dark"] .sidebar-fu {
  color: #D4D0DE !important;
}

/* 5) صناديق السايدبار — الحالة الافتراضية */
html[data-theme="dark"] .box,
html[data-theme="dark"] button.box { color: #C8C4D3; }
html[data-theme="dark"] .box svg { color: #A19DAF; }
html[data-theme="dark"] .box:hover { background: #24202E; color: #E6E6EA; }
html[data-theme="dark"] .box:hover svg { color: var(--brand-accent); }

/* 6) الزر النشط (المجلد المفتوح حالياً) */
html[data-theme="dark"] .box.on {
  background: #2C1E4A !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .box.on svg { color: var(--brand-accent); }

/* 7) شريط "محادثات بحاجة متابعة اليوم" — الخلفية البرتقالية */
html[data-theme="dark"] .fu-banner,
html[data-theme="dark"] [data-fu-banner],
html[data-theme="dark"] .followup-banner {
  background: rgba(240, 140, 40, 0.12) !important;
  border: 1px solid rgba(240, 140, 40, 0.30) !important;
  color: #F5B778 !important;
}
html[data-theme="dark"] .fu-banner button,
html[data-theme="dark"] .followup-banner button {
  background: #E27B2E; color: #fff; border: 0;
}

/* 8) بطاقة الحساب في أعلى السايدبار */
html[data-theme="dark"] #accBtn,
html[data-theme="dark"] .acc-btn {
  background: #241E32 !important;
  color: #E6E6EA !important;
  border-color: #302B3E !important;
}
html[data-theme="dark"] #accBtn:hover { background: #2C1E4A !important; }

/* 9) زر "رسالة جديدة" — قلل التوهج */
html[data-theme="dark"] #btnCompose { box-shadow: 0 4px 14px rgba(88, 40, 160, .35); }

/* 10) قسم "مجلداتي/التسميات/جهات الاتصال" — العنوان */
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .sidebar-section > .title { color: #928EA0; }

/* 11) شريط التبويبات (أساسي/داخلي/تحديثات) */
html[data-theme="dark"] .cat-tab, html[data-theme="dark"] .tabs .tab { color: #928EA0; }
html[data-theme="dark"] .cat-tab.on, html[data-theme="dark"] .tabs .tab.on {
  color: #B47FEC !important;
  border-bottom-color: #B47FEC !important;
}

/* 12) صفوف الرسائل غير المقروءة */
html[data-theme="dark"] .row.unread { background: #1A1626; }
html[data-theme="dark"] .row.unread .from, html[data-theme="dark"] .row.unread .subject {
  color: #F0EDF7 !important;
  font-weight: 600;
}

/* 13) الصفوف المحددة */
html[data-theme="dark"] .row.sel, html[data-theme="dark"] .row.selected {
  background: #2C1E4A !important;
}


/* FDX_FU_FIX — إظهار نص "بحاجة متابعة" في السايدبار */
#fuBtn span:not(.cnt) {
  color: inherit !important;
  opacity: 1 !important;
  display: inline-block !important;
  flex: 1;
  text-align: start;
}
html[data-theme="dark"] #fuBtn {
  color: #D4D0DE !important;
}
html[data-theme="dark"] #fuBtn:hover { background: #24202E; }
html[data-theme="dark"] #fuBtn.on {
  background: #2C1E4A !important;
  color: #E6D9FA !important;
}
html[data-theme="dark"] #fuBtn.on svg,
html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B; }
html[data-theme="dark"] #fuBtn .cnt {
  background: #E27B2E !important;
  color: #fff !important;
}

/* FDX_FU_FIX — إظهار نص "بحاجة متابعة" في السايدبار */
#fuBtn span:not(.cnt) {
  color: inherit !important;
  opacity: 1 !important;
  display: inline-block !important;
  flex: 1;
  text-align: start;
}
html[data-theme="dark"] #fuBtn { color: #D4D0DE !important; }
html[data-theme="dark"] #fuBtn:hover { background: #24202E; }
html[data-theme="dark"] #fuBtn.on {
  background: #2C1E4A !important;
  color: #E6D9FA !important;
}
html[data-theme="dark"] #fuBtn.on svg,
html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B; }
html[data-theme="dark"] #fuBtn .cnt {
  background: #E27B2E !important;
  color: #fff !important;
}


/* FDX_FU_FIX — إظهار نص "بحاجة متابعة" في السايدبار */
#fuBtn span:not(.cnt) {
  color: inherit !important;
  opacity: 1 !important;
  display: inline-block !important;
  flex: 1;
  text-align: start;
}
html[data-theme="dark"] #fuBtn { color: #D4D0DE !important; }
html[data-theme="dark"] #fuBtn:hover { background: #24202E; }
html[data-theme="dark"] #fuBtn.on {
  background: #2C1E4A !important;
  color: #E6D9FA !important;
}
html[data-theme="dark"] #fuBtn.on svg,
html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B; }
html[data-theme="dark"] #fuBtn .cnt {
  background: #E27B2E !important;
  color: #fff !important;
}


/* FDX_CONFIRM_V2 — نافذة تأكيد محسّنة */
.fdx-confirm {
  max-width: 420px;
  padding: 26px 28px 22px;
  text-align: center;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(24,10,50,.30), 0 4px 12px rgba(24,10,50,.15);
}
.fdx-confirm-icon {
  width: 68px; height: 68px;
  margin: 4px auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F0EBFA;
  color: #5C08AD;
}
.fdx-confirm.is-danger .fdx-confirm-icon {
  background: #FEE7E7;
  color: #DC2626;
}
.fdx-confirm-title {
  font-size: 19px; font-weight: 800; color: var(--fg-1);
  margin-bottom: 8px; line-height: 1.35;
}
.fdx-confirm-body p {
  font-size: 14.5px; color: var(--fg-3);
  line-height: 1.6; margin: 0 0 22px;
}
.fdx-confirm-acts {
  display: flex; gap: 10px; justify-content: center;
  flex-direction: row-reverse; /* الأزرار: OK يمين / Cancel يسار في ltr، معكوس في rtl تلقائياً */
}
.fdx-confirm-acts button {
  min-width: 130px; padding: 11px 20px;
  border-radius: 12px; font-size: 14.5px; font-weight: 700;
  transition: transform .12s ease, background .14s ease;
}
.fdx-confirm-acts button:hover { transform: translateY(-1px); }
.fdx-confirm-acts .btn-primary.danger {
  background: #DC2626; color: #fff;
}
.fdx-confirm-acts .btn-primary.danger:hover { background: #B91C1C; }

/* Dark mode */
html[data-theme="dark"] .fdx-confirm { background: #1F1B2C; }
html[data-theme="dark"] .fdx-confirm-title { color: #E6E6EA; }
html[data-theme="dark"] .fdx-confirm-body p { color: #A19DAF; }
html[data-theme="dark"] .fdx-confirm-icon { background: #2C1E4A; color: #B47FEC; }
html[data-theme="dark"] .fdx-confirm.is-danger .fdx-confirm-icon {
  background: rgba(220, 38, 38, .18); color: #F87171;
}
html[data-theme="dark"] .fdx-confirm-acts .btn-line {
  background: #2A2537; color: #D4D0DE; border-color: #3D3550;
}
html[data-theme="dark"] .fdx-confirm-acts .btn-line:hover { background: #34304A; }


/* FDX_FU_FIX — نص "بحاجة متابعة" */
#fuBtn span:not(.cnt) { color: inherit !important; opacity: 1 !important; display: inline-block !important; flex: 1; text-align: start; }
html[data-theme="dark"] #fuBtn { color: #D4D0DE !important; }
html[data-theme="dark"] #fuBtn:hover { background: #24202E; }
html[data-theme="dark"] #fuBtn.on { background: #2C1E4A !important; color: #E6D9FA !important; }
html[data-theme="dark"] #fuBtn.on svg, html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B; }
html[data-theme="dark"] #fuBtn .cnt { background: #E27B2E !important; color: #fff !important; }


/* FDX_FU_FIX — "بحاجة متابعة" */
#fuBtn span:not(.cnt) { color: inherit !important; opacity: 1 !important; display: inline-block !important; flex: 1; text-align: start; }
html[data-theme="dark"] #fuBtn { color: #D4D0DE !important; }
html[data-theme="dark"] #fuBtn:hover { background: #24202E; }
html[data-theme="dark"] #fuBtn.on { background: #2C1E4A !important; color: #E6D9FA !important; }
html[data-theme="dark"] #fuBtn.on svg, html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B; }
html[data-theme="dark"] #fuBtn .cnt { background: #E27B2E !important; color: #fff !important; }


/* FDX_QA_FINAL — pill نظيف لكلا الوضعين */

/* شكل عام + أنيميشن */
.qa button {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background .14s ease, color .14s ease, transform .10s ease;
}
.qa svg { width: 18px; height: 18px; stroke-width: 2.2; }
@keyframes qaPop {
  0%   { opacity: 0; transform: translateY(-50%) translateX(6px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-50%) translateX(0) scale(1.03); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
.row:hover .qa { animation: qaPop .28s cubic-bezier(.2, .9, .3, 1.15) both; }
.row:hover .date, .row:hover .when, .row:hover .dt, .row:hover .time { visibility: hidden; }
.row:hover .body { padding-inline-end: 12px !important; }

/* ===== LIGHT MODE — خلفية رمادي فاتح ناعم (مش أبيض مبهر) ===== */
html:not([data-theme="dark"]) .qa {
  background: #F5F3F9 !important;                 /* off-white بميلة بنفسجية خفيفة */
  border: 1px solid #D8D3E3 !important;
  box-shadow: 0 8px 24px rgba(88,40,160,.14), 0 2px 6px rgba(88,40,160,.08) !important;
}
html:not([data-theme="dark"]) .qa button { color: #2E1057 !important; }         /* برنس داكن */
html:not([data-theme="dark"]) .qa button svg { color: #2E1057 !important; }
html:not([data-theme="dark"]) .qa button:hover { background: #E4DBF3 !important; color: #5C08AD !important; }
html:not([data-theme="dark"]) .qa button:hover svg { color: #5C08AD !important; }
html:not([data-theme="dark"]) .qa button.del:hover { background: #FEE2E2 !important; color: #B91C1C !important; }
html:not([data-theme="dark"]) .qa button.del:hover svg { color: #B91C1C !important; }

/* ===== DARK MODE — خلفية داكنة بأيقونات فاتحة واضحة ===== */
html[data-theme="dark"] .qa {
  background: #34304A !important;                 /* أفتح شوية عن الصف نفسه */
  border: 1px solid #4A4560 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.40) !important;
}
html[data-theme="dark"] .qa button { color: #F4F1F9 !important; }               /* أبيض ناعم واضح */
html[data-theme="dark"] .qa button svg { color: #F4F1F9 !important; stroke: #F4F1F9 !important; }
html[data-theme="dark"] .qa button:hover { background: #4C4368 !important; color: #FFFFFF !important; }
html[data-theme="dark"] .qa button:hover svg { color: #C4B0EE !important; stroke: #C4B0EE !important; }
html[data-theme="dark"] .qa button.del:hover { background: rgba(220,80,80,.32) !important; color: #FFB3B3 !important; }
html[data-theme="dark"] .qa button.del:hover svg { color: #FFB3B3 !important; stroke: #FFB3B3 !important; }

/* FDX_FU_FIX — "بحاجة متابعة" */
#fuBtn span:not(.cnt) { color: inherit !important; opacity: 1 !important; display: inline-block !important; flex: 1; text-align: start; }
html[data-theme="dark"] #fuBtn { color: #D4D0DE !important; }
html[data-theme="dark"] #fuBtn:hover { background: #24202E; }
html[data-theme="dark"] #fuBtn.on { background: #2C1E4A !important; color: #E6D9FA !important; }
html[data-theme="dark"] #fuBtn.on svg, html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B; }
html[data-theme="dark"] #fuBtn .cnt { background: #E27B2E !important; color: #fff !important; }


/* FDX_DARK_UNIFORM — dark mode متناسق عبر كل المكونات */

/* ===== 1) الديالوجات والـ overlays ===== */
html[data-theme="dark"] .ovl { background: rgba(0,0,0,.62); backdrop-filter: blur(2px); }
html[data-theme="dark"] .dlg {
  background: #1F1B2C !important;
  color: #E6E6EA !important;
  border: 1px solid #2E2938;
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.35);
}
html[data-theme="dark"] .dlg h2,
html[data-theme="dark"] .dlg h3,
html[data-theme="dark"] .dlg-title,
html[data-theme="dark"] .dlg > .head { color: #F4F1F9 !important; }
html[data-theme="dark"] .dlg .close,
html[data-theme="dark"] .dlg .x { color: #A19DAF; }
html[data-theme="dark"] .dlg .close:hover,
html[data-theme="dark"] .dlg .x:hover { background: #2A2537; color: #E6D9FA; }

/* ===== 2) أزرار موحّدة ===== */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] button.btn-primary {
  background: #5C08AD !important; color: #fff !important; border: 0;
}
html[data-theme="dark"] .btn-primary:hover { background: #7C1DD4 !important; }
html[data-theme="dark"] .btn-line,
html[data-theme="dark"] button.btn-line {
  background: #2A2537 !important; color: #D4D0DE !important;
  border: 1px solid #3D3550 !important;
}
html[data-theme="dark"] .btn-line:hover { background: #34304A !important; color: #F4F1F9 !important; }

/* ===== 3) حقول الإدخال ===== */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .sel,
html[data-theme="dark"] .inp {
  background: #1F1B2C !important;
  color: #E6E6EA !important;
  border: 1px solid #3D3550 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #7C1DD4 !important;
  box-shadow: 0 0 0 3px rgba(124,29,212,.20) !important;
}
html[data-theme="dark"] ::placeholder { color: #6E6A7C !important; }

/* ===== 4) القراءة (Reader) ===== */
html[data-theme="dark"] #reader,
html[data-theme="dark"] .reader,
html[data-theme="dark"] .msg-card {
  background: #1D1A28 !important;
  border-color: #2E2938 !important;
}
html[data-theme="dark"] .msg-head { border-bottom-color: #2E2938; }
html[data-theme="dark"] .msg-head .from,
html[data-theme="dark"] .msg-head .subj { color: #F4F1F9 !important; }
html[data-theme="dark"] .msg-head .to,
html[data-theme="dark"] .msg-head .cc,
html[data-theme="dark"] .msg-head .dt { color: #A19DAF !important; }
html[data-theme="dark"] .mact button { color: #C8C4D3; }
html[data-theme="dark"] .mact button:hover { background: #3E2E60; color: #E6D9FA; }

/* ===== 5) الـ compose ===== */
html[data-theme="dark"] #compose,
html[data-theme="dark"] .compose,
html[data-theme="dark"] .cmp {
  background: #1D1A28 !important;
  border-color: #2E2938 !important;
  color: #E6E6EA !important;
}
html[data-theme="dark"] .cmp-head { background: #14111C !important; color: #F4F1F9 !important; }
html[data-theme="dark"] .cmp-tools button { color: #A19DAF; }
html[data-theme="dark"] .cmp-tools button:hover { background: #2A2537; color: #E6D9FA; }
html[data-theme="dark"] .chip { background: #34304A; color: #F4F1F9; border: 1px solid #4A4560; }
html[data-theme="dark"] .chip .x { color: #A19DAF; }
html[data-theme="dark"] .chip .x:hover { color: #FF9090; }

/* ===== 6) القوائم المنسدلة ===== */
html[data-theme="dark"] .menu,
html[data-theme="dark"] .drop,
html[data-theme="dark"] .popover,
html[data-theme="dark"] #accDrop,
html[data-theme="dark"] .lbl-menu,
html[data-theme="dark"] .cat-menu,
html[data-theme="dark"] .move-menu {
  background: #24202E !important;
  color: #E6E6EA !important;
  border: 1px solid #3D3550 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .menu .item:hover,
html[data-theme="dark"] .drop .item:hover,
html[data-theme="dark"] .popover .item:hover { background: #2E2938; }

/* ===== 7) الفلاتر / التسميات / الحسابات cards ===== */
html[data-theme="dark"] .filter-row,
html[data-theme="dark"] .lbl-row,
html[data-theme="dark"] .acc-card,
html[data-theme="dark"] .cn-card,
html[data-theme="dark"] .fu-card,
html[data-theme="dark"] .fu-sec,
html[data-theme="dark"] .pwrow,
html[data-theme="dark"] .adv-row {
  background: #1F1B2C !important;
  border: 1px solid #2E2938 !important;
  color: #E6E6EA !important;
}
html[data-theme="dark"] .filter-row:hover,
html[data-theme="dark"] .lbl-row:hover,
html[data-theme="dark"] .cn-card:hover { background: #24202E !important; }

/* ===== 8) الـ toast ===== */
html[data-theme="dark"] .toast,
html[data-theme="dark"] #toast {
  background: #24202E !important;
  color: #F4F1F9 !important;
  border: 1px solid #3D3550 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
html[data-theme="dark"] .toast .undo,
html[data-theme="dark"] #toast .undo { color: #B47FEC !important; font-weight: 700; }
html[data-theme="dark"] .toast .undo:hover { color: #DCC0FF !important; }

/* ===== 9) شريط الأدوات الجماعي (Bulk bar) ===== */
html[data-theme="dark"] #bulkBar,
html[data-theme="dark"] .bulk-bar {
  background: #1F1B2C !important;
  border-bottom: 1px solid #2E2938 !important;
  color: #D4D0DE !important;
}
html[data-theme="dark"] #bulkBar button:hover,
html[data-theme="dark"] .bulk-bar button:hover { background: #34304A; color: #E6D9FA; }

/* ===== 10) الـ tabs (أساسي/داخلي/تحديثات) ===== */
html[data-theme="dark"] .cat-tab,
html[data-theme="dark"] .tabs .tab { color: #928EA0 !important; }
html[data-theme="dark"] .cat-tab:hover,
html[data-theme="dark"] .tabs .tab:hover { color: #D4D0DE !important; }
html[data-theme="dark"] .cat-tab.on,
html[data-theme="dark"] .tabs .tab.on { color: #B47FEC !important; border-bottom-color: #B47FEC !important; }

/* ===== 11) badges موحدة ===== */
html[data-theme="dark"] .cnt,
html[data-theme="dark"] .badge {
  background: #3A2E5A !important;
  color: #F0E9FA !important;
}
html[data-theme="dark"] .box.on .cnt { background: #7C1DD4 !important; color: #fff !important; }

/* ===== 12) hr / dividers ===== */
html[data-theme="dark"] hr,
html[data-theme="dark"] .sep,
html[data-theme="dark"] .divider { border-color: #2E2938 !important; background: #2E2938; }

/* ===== 13) الروابط ===== */
html[data-theme="dark"] a { color: #C4B0EE; }
html[data-theme="dark"] a:hover { color: #DCC0FF; }

/* ===== 14) نصوص hint ===== */
html[data-theme="dark"] .hint,
html[data-theme="dark"] p.hint,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .mut { color: #928EA0 !important; }

/* ===== 15) scrollbar ===== */
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #3D3550 !important;
  border: 2px solid transparent;
  background-clip: content-box;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #5A4E7A !important; background-clip: content-box; }

/* ===== 16) contact form ===== */
html[data-theme="dark"] .cn-form { background: #1D1A28 !important; }
html[data-theme="dark"] .cn-lbl { color: #B8B4C5 !important; }
html[data-theme="dark"] .cn-actions { border-top-color: #2E2938 !important; }

/* ===== 17) filter editor ===== */
html[data-theme="dark"] .filter-conds,
html[data-theme="dark"] .filter-acts { color: #C8C4D3 !important; }
html[data-theme="dark"] .filter-conds b,
html[data-theme="dark"] .filter-acts b { color: #F4F1F9 !important; }


/* FDX_SIDEBAR_UNIFORM — سلوك موحّد لكل صفوف السايدبار */

/* الحالة الأساسية — كل الصفوف */
html[data-theme="dark"] .box,
html[data-theme="dark"] #fuBtn,
html[data-theme="dark"] .folder-btn {
  color: #D4D0DE !important;
  border-radius: 999px;
  padding: 10px 16px;
  transition: background .16s ease, color .16s ease, transform .10s ease;
}

/* HOVER — نفس التأثير لكل الصفوف */
html[data-theme="dark"] .box:hover,
html[data-theme="dark"] #fuBtn:hover,
html[data-theme="dark"] .folder-btn:hover {
  background: #24202E !important;
  color: #F4F1F9 !important;
}
html[data-theme="dark"] .box:hover svg,
html[data-theme="dark"] #fuBtn:hover svg,
html[data-theme="dark"] .folder-btn:hover svg { color: #B47FEC !important; }

/* ACTIVE — الصف النشط بلون بنفسجي واضح لكل الأنواع */
html[data-theme="dark"] .box.on,
html[data-theme="dark"] #fuBtn.on,
html[data-theme="dark"] .folder-btn.on {
  background: #2C1E4A !important;
  color: #F4F1F9 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(180, 127, 236, .30);
}
html[data-theme="dark"] .box.on svg,
html[data-theme="dark"] #fuBtn.on svg,
html[data-theme="dark"] .folder-btn.on svg { color: #C4B0EE !important; }
/* استثناء: أيقونة المتابعة تفضّل تفضل بلون تنبيه دائماً */
html[data-theme="dark"] #fuBtn.on svg,
html[data-theme="dark"] #fuBtn.hot svg { color: #FF9A4B !important; }

/* Badges موحّدة (العدّاد بجانب كل صف) */
html[data-theme="dark"] .box .cnt,
html[data-theme="dark"] #fuBtn .cnt,
html[data-theme="dark"] .folder-btn .cnt {
  background: #3A2E5A !important;
  color: #F0E9FA !important;
  min-width: 22px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 600;
}
html[data-theme="dark"] .box.on .cnt,
html[data-theme="dark"] .folder-btn.on .cnt {
  background: #7C1DD4 !important;
  color: #fff !important;
}
/* استثناء: badge المتابعة برتقالي */
html[data-theme="dark"] #fuBtn .cnt { background: #E27B2E !important; color: #fff !important; }

/* Sub-folders تحت "مجلداتي" و "التسميات" — نفس النمط */
html[data-theme="dark"] #boxList > *,
html[data-theme="dark"] #labelList > * {
  color: #D4D0DE;
}
html[data-theme="dark"] #boxList .box,
html[data-theme="dark"] #labelList .label-item { padding-inline-start: 32px; }

/* عناوين المقاطع (مجلداتي، التسميات، جهات الاتصال) */
html[data-theme="dark"] .sec-toggle,
html[data-theme="dark"] .section-head {
  color: #928EA0 !important;
  font-weight: 700;
  font-size: 13px;
}
html[data-theme="dark"] .sec-toggle:hover,
html[data-theme="dark"] .section-head:hover { color: #D4D0DE !important; }

/* الحالة المسحوبة (drag over) */
html[data-theme="dark"] .box.drag-over,
html[data-theme="dark"] .folder-btn.drag-over {
  background: #3E2E60 !important;
  outline: 2px dashed #B47FEC !important;
  outline-offset: -3px;
}

/* Light Mode — نفس التماسك */
html:not([data-theme="dark"]) .box,
html:not([data-theme="dark"]) #fuBtn,
html:not([data-theme="dark"]) .folder-btn {
  transition: background .16s ease, color .16s ease;
}
html:not([data-theme="dark"]) .box.on,
html:not([data-theme="dark"]) #fuBtn.on,
html:not([data-theme="dark"]) .folder-btn.on {
  background: #EFE4FA !important;
  color: #5C08AD !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(92, 8, 173, .12);
}


/* FDX_DARK_PAGES — تباين مضبوط للـ Follow-up وجهات الاتصال في dark */

/* ========== Follow-up (بحاجة متابعة) ========== */
html[data-theme="dark"] .fu-sec { background: transparent !important; border: 0 !important; padding: 18px 18px 8px; }
html[data-theme="dark"] .fu-sec h3 { color: #F4F1F9 !important; font-weight: 700; }
html[data-theme="dark"] .fu-sec h3 .n { background: #3A2E5A !important; color: #F0E9FA !important; }
html[data-theme="dark"] .fu-sec p { color: #928EA0 !important; }

html[data-theme="dark"] .fu-card {
  background: #1F1B2C !important;
  border: 1px solid #2E2938 !important;
  border-radius: 14px;
}
html[data-theme="dark"] .fu-card:hover { background: #24202E !important; box-shadow: 0 6px 20px rgba(0,0,0,.45) !important; }
html[data-theme="dark"] .fu-card.unread { border-inline-start: 3px solid #E27B2E !important; }

html[data-theme="dark"] .fu-card .fu-who,
html[data-theme="dark"] .fu-l1 .fu-who,
html[data-theme="dark"] .fu-l1 > span:first-child { color: #F4F1F9 !important; font-weight: 700; }
html[data-theme="dark"] .fu-l2 { color: #D4D0DE !important; font-weight: 500; }
html[data-theme="dark"] .fu-l3 { color: #928EA0 !important; }
html[data-theme="dark"] .fu-age { color: #A19DAF !important; }

html[data-theme="dark"] .fu-acts { border-top: 1px solid #2E2938; padding-top: 10px; margin-top: 8px; }
html[data-theme="dark"] .fu-acts button {
  background: #24202E !important;
  color: #D4D0DE !important;
  border: 1px solid #3D3550 !important;
  border-radius: 999px;
  padding: 8px 16px;
}
html[data-theme="dark"] .fu-acts button:hover { background: #34304A !important; color: #F4F1F9 !important; border-color: #4A4560 !important; }
html[data-theme="dark"] .fu-acts button.p {
  background: #5C08AD !important; color: #fff !important; border-color: #5C08AD !important;
}
html[data-theme="dark"] .fu-acts button.p:hover { background: #7C1DD4 !important; }

/* Age chip (منذ 6 أيام) */
html[data-theme="dark"] .fu-age,
html[data-theme="dark"] .fu-card [class*="age"] {
  background: #2C1E4A !important;
  color: #C4B0EE !important;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* Header سطر التنبيه العلوي */
html[data-theme="dark"] .fu-banner,
html[data-theme="dark"] [data-fu-banner] {
  background: rgba(226, 123, 46, 0.14) !important;
  border: 1px solid rgba(226, 123, 46, 0.34) !important;
  color: #F5B778 !important;
}

/* ========== Contacts (جهات الاتصال) ========== */
html[data-theme="dark"] .cn-side { background: transparent; border-top-color: #2E2938 !important; }

html[data-theme="dark"] .cn-bar { background: transparent; }
html[data-theme="dark"] .cn-search input {
  background: #1F1B2C !important;
  color: #E6E6EA !important;
  border: 1px solid #3D3550 !important;
}
html[data-theme="dark"] .cn-search input:focus { border-color: #7C1DD4 !important; background: #24202E !important; }
html[data-theme="dark"] .cn-search svg { stroke: #928EA0; }

html[data-theme="dark"] .cn-primary { background: #5C08AD !important; color: #fff !important; }
html[data-theme="dark"] .cn-primary:hover { background: #7C1DD4 !important; }
html[data-theme="dark"] .cn-ghost {
  background: #24202E !important;
  color: #D4D0DE !important;
  border: 1px solid #3D3550 !important;
}
html[data-theme="dark"] .cn-ghost:hover { border-color: #7C1DD4 !important; color: #F4F1F9 !important; }

html[data-theme="dark"] .cn-groups { border-bottom-color: #2E2938 !important; }
html[data-theme="dark"] .cn-g {
  background: #1F1B2C !important;
  color: #D4D0DE !important;
  border: 1px solid #3D3550 !important;
}
html[data-theme="dark"] .cn-g:hover { background: #2A2537 !important; }
html[data-theme="dark"] .cn-g span { background: #34304A !important; color: #C8C4D3 !important; }
html[data-theme="dark"] .cn-g.on { background: #5C08AD !important; color: #fff !important; border-color: #5C08AD !important; }
html[data-theme="dark"] .cn-g.on span { background: rgba(255,255,255,.22) !important; color: #fff !important; }

html[data-theme="dark"] .cn-card {
  background: transparent !important;
  border-bottom: 1px solid #2A2537 !important;
  color: #E6E6EA !important;
}
html[data-theme="dark"] .cn-card:hover { background: #1F1B2C !important; }
html[data-theme="dark"] .cn-card b { color: #F4F1F9 !important; font-weight: 700; }
html[data-theme="dark"] .cn-l1 { color: #F4F1F9 !important; }
html[data-theme="dark"] .cn-l2 { color: #A19DAF !important; }
html[data-theme="dark"] .cn-org { color: #928EA0 !important; }
html[data-theme="dark"] .cn-ph { color: #928EA0 !important; }
html[data-theme="dark"] .cn-gs span {
  background: #2C1E4A !important;
  color: #C4B0EE !important;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

/* Contact avatar (letter circle) */
html[data-theme="dark"] .cn-av {
  background: #2C1E4A !important;
  color: #C4B0EE !important;
  border: 1px solid #3D3550;
}

/* أزرار الإجراءات على كل جهة (حذف/تعديل/إرسال) */
html[data-theme="dark"] .cn-acts button {
  background: transparent !important;
  color: #928EA0 !important;
  border-radius: 8px;
  transition: background .14s ease, color .14s ease;
}
html[data-theme="dark"] .cn-acts button:hover { background: #3E2E60 !important; color: #E6D9FA !important; }
html[data-theme="dark"] .cn-acts button[data-ca="del"]:hover { background: rgba(220,80,80,.24) !important; color: #FF9090 !important; }

/* Contact empty state */
html[data-theme="dark"] .cn-empty h3 { color: #F4F1F9; }
html[data-theme="dark"] .cn-empty p { color: #928EA0; }

/* عدد الكل / مراسلاتي في الأعلى */
html[data-theme="dark"] .cn-side .cn-count { color: #E6E6EA !important; }

/* ========== Contact Form Modal (تعديل/إضافة جهة) ========== */
html[data-theme="dark"] .cn-form label { color: #D4D0DE !important; }
html[data-theme="dark"] .cn-lbl { color: #B8B4C5 !important; }
html[data-theme="dark"] .cn-form input,
html[data-theme="dark"] .cn-form textarea {
  background: #14111C !important;
  color: #E6E6EA !important;
  border: 1px solid #3D3550 !important;
}
html[data-theme="dark"] .cn-form input:focus,
html[data-theme="dark"] .cn-form textarea:focus { border-color: #7C1DD4 !important; }
html[data-theme="dark"] .cn-form ::placeholder { color: #6E6A7C !important; }
html[data-theme="dark"] .cn-hint { color: #928EA0 !important; }
html[data-theme="dark"] .cn-form-acts { border-top-color: #2E2938 !important; }

/* All avatars — general uplift */
html[data-theme="dark"] .avatar { border: 1px solid rgba(255,255,255,.06); }


/* FDX_DRAFT_STATE — مؤشر حالة الحفظ في compose */
.cmp-draft-state {
  font-size: 12px;
  font-weight: 500;
  margin-inline-start: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cmp-draft-state:empty { display: none; }
.cmp-draft-state.typing { background: #FFF7ED; color: #C2410C; }
.cmp-draft-state.saving { background: #EFF6FF; color: #1D4ED8; }
.cmp-draft-state.saving::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor; border-inline-start-color: transparent;
  animation: draftSpin .7s linear infinite;
}
@keyframes draftSpin { to { transform: rotate(360deg); } }
.cmp-draft-state.saved { background: #ECFDF5; color: #047857; }
.cmp-draft-state.saved::before {
  content: "✓"; font-weight: 700; margin-inline-end: 2px;
}
.cmp-draft-state.error { background: #FEF2F2; color: #B91C1C; }

/* Dark mode */
html[data-theme="dark"] .cmp-draft-state.typing { background: rgba(226,123,46,.18); color: #FBBF77; }
html[data-theme="dark"] .cmp-draft-state.saving { background: rgba(96,150,255,.18); color: #93BFFF; }
html[data-theme="dark"] .cmp-draft-state.saved { background: rgba(52,211,153,.18); color: #6EE7B7; }
html[data-theme="dark"] .cmp-draft-state.error { background: rgba(220,80,80,.20); color: #FCA5A5; }

/* ══════════ FDX_MEET — زر «ابدأ اجتماع» وحواره (P3-20) ══════════ */
.reply-strip .meet-btn{color:var(--brand-accent)}
.reply-strip .meet-btn svg{stroke:var(--brand-accent)}
#meetDlg .fed-lbl{display:block;color:var(--mut);font-size:12.5px;font-weight:600;padding:12px 20px 0}
#meetDlg .row-line input,#meetDlg .row-line textarea,#meetDlg .row-line select.sel{flex:1}
#meetDlg .row-line textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--soft);color:inherit;resize:vertical;min-height:52px}
#meetDlg .mt-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-height:26px;align-items:center}
#meetDlg .mt-chip{background:var(--soft)}
#meetDlg .mt-when{display:flex;flex-wrap:wrap;gap:8px}
#meetDlg .mt-pill{border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;
  font-size:13px;color:var(--mut);background:none}
#meetDlg .mt-pill:hover{border-color:var(--purple);color:var(--purple)}
#meetDlg .mt-pill.on{border-color:var(--brand-cta);color:#fff;background:var(--brand-cta)}
#meetDlg .mt-chk{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
#meetDlg .mt-chk input{width:18px;height:18px;flex:none;accent-color:var(--brand-cta)}
#meetDlg .btn-primary{min-height:44px}
#meetDlg .mt-ok{padding:6px 20px 0}
#meetDlg .mt-ok-t{font-weight:800;font-size:15.5px}
#meetDlg .mt-ok-w{color:var(--mut);font-size:13px;margin-top:2px}
#meetDlg .mt-link{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--soft);
  border:1px solid var(--line);border-radius:12px;padding:8px 12px}
#meetDlg .mt-link span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;
  unicode-bidi:embed;font-size:13px}
#meetDlg .mt-link .btn-line{margin:0;padding:6px 12px;color:var(--purple);border-color:var(--line)}
#meetDlg .mt-link .btn-line:hover{border-color:var(--purple)}
#meetDlg .mt-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#meetDlg .mt-acts .btn-line{margin:0;color:var(--purple);border-color:var(--line)}
#meetDlg .mt-acts .btn-line:hover{border-color:var(--purple)}
@media (max-width:640px){
  #meetDlg{width:100%;max-width:100%;border-radius:18px 18px 0 0}
  #meetDlg .row-line input,#meetDlg .row-line textarea,#meetDlg .row-line select.sel{min-height:44px}
  #meetDlg .mt-pill{min-height:44px;flex:1 1 44%}
  #meetDlg .mt-acts .btn-line,#meetDlg .btn-primary{min-height:44px;flex:1 1 45%;justify-content:center}
  .reply-strip .meet-btn{min-height:44px}
  .reply-strip .meet-btn .fbt-long{display:none}
  /* 🐞 خمسة أزرار في شريطٍ nowrap على 375 تدفع الخامس خارج الشاشة (x=-42) ويلتفّ
     نصّ الباقي ثلاثة أسطر (104px). الشريط يلتفّ صفّين متساويين ونصوصه سطر واحد. */
  .reply-strip{flex-wrap:wrap;row-gap:8px}
  .reply-strip > button{flex:1 1 30%;min-height:44px;white-space:nowrap;padding:10px 8px}
}
/* ══════════ نهاية FDX_MEET ══════════ */

/* ══════════════════ FDX_TEAMBOX — صناديق الفريق المشتركة ══════════════════ */
#tbSec{margin:10px 0 4px;padding-top:8px;border-top:1px solid var(--line)}
#tbSec .tb-h{display:flex;align-items:center;gap:6px;padding:2px 12px 6px;color:var(--mut);font-size:12px;font-weight:700}
#tbSec .tb-h span{flex:1}
#tbSec .tb-add{width:24px;height:24px;border:0;background:transparent;color:var(--mut);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#tbSec .tb-add:hover{background:var(--soft);color:var(--purple)}
#tbSec .tb-b{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:0;background:transparent;border-radius:0 20px 20px 0;color:var(--txt);font:inherit;font-size:13.5px;cursor:pointer;text-align:start;min-height:38px}
#tbSec .tb-b:hover{background:var(--soft)}
#tbSec .tb-b.on{background:var(--soft);color:var(--purple);font-weight:700}
#tbSec .tb-b .tb-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbSec .tb-b .cnt{background:var(--soft);color:var(--mut);border-radius:10px;padding:1px 7px;font-size:11.5px;font-weight:700}
#tbSec .tb-b .cnt.hot{background:var(--orange);color:#fff}
#tbSec .tb-empty{padding:4px 12px 8px;color:var(--mut);font-size:12px;line-height:1.7}
.tb-fil{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line);overflow-x:auto}
.tb-c{border:1px solid var(--line);background:var(--bg-card);color:var(--txt);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;min-height:36px}
.tb-c:hover{border-color:var(--purple)}
.tb-c.on{background:var(--purple);border-color:var(--purple);color:#fff}
.tb-c i{font-style:normal;font-size:11.5px;opacity:.85}
.tb-card{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.tb-card:hover{background:var(--soft)}
.tb-card.unread .tb-l2{font-weight:800}
.tb-card.done{opacity:.62}
.tb-b2,.tb-card .tb-b{flex:1;min-width:0}
.tb-l1{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.tb-l1 .tb-who{color:var(--txt);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-l2{font-size:14.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-l3{font-size:13px;color:var(--mut);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-meta{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.tb-st{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;border:1px solid var(--line);color:var(--mut)}
.tb-st.s-new{background:rgba(255,87,0,.10);border-color:rgba(255,87,0,.35);color:var(--orange)}
.tb-st.s-open{background:rgba(58,38,102,.10);border-color:rgba(58,38,102,.30);color:var(--purple)}
.tb-st.s-closed{background:var(--soft)}
.tb-as{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.tb-take{border:1px solid var(--line);background:transparent;color:var(--purple);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;min-height:32px}
.tb-take:hover{background:var(--soft);border-color:var(--purple)}
.tb-nn{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mut)}
.tb-err{padding:28px 16px;text-align:center;color:var(--mut)}
.tb-th{padding:0 0 40px}
.tb-thh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.tb-back{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--purple);font:inherit;font-size:13.5px;cursor:pointer;min-height:40px;padding:0 4px}
.tb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.tb-bar-l{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mut);flex:1;min-width:140px}
.tb-un{color:var(--orange);font-weight:700}
.tb-bar-a{display:flex;gap:8px;flex-wrap:wrap}
.tb-bar-a button,.tb-reply-a button,.tb-nadd button{border:1px solid var(--line);background:var(--bg-card);color:var(--txt);border-radius:10px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;min-height:40px}
.tb-bar-a button:hover,.tb-reply-a button:hover,.tb-nadd button:hover{border-color:var(--purple);color:var(--purple)}
.tb-bar-a button.p,.tb-reply-a button.p{background:var(--purple);border-color:var(--purple);color:#fff}
.tb-bar-a button.p:hover,.tb-reply-a button.p:hover{filter:brightness(1.12);color:#fff}
.tb-msg{padding:16px}
.tb-msg-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.tb-msg-f{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px}
.tb-msg-f span{color:var(--mut);font-size:12.5px;direction:ltr}
.tb-msg-s{font-size:15px;font-weight:700;color:var(--purple);margin-top:3px}
.tb-age{color:var(--mut);font-size:12.5px;white-space:nowrap}
#tbFrame{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;min-height:120px}
.tb-att{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tb-att span{border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12.5px;color:var(--mut)}
.tb-reply{padding:0 16px 18px}
.tb-reply label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px}
.tb-reply textarea,.tb-nadd textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;font-size:14px;background:var(--bg-card);color:var(--txt);resize:vertical}
.tb-reply textarea:focus,.tb-nadd textarea:focus{outline:0;border-color:var(--purple)}
.tb-reply-a{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.tb-notes{margin:0 16px;padding:14px 16px;border:1px dashed var(--line);border-radius:16px;background:var(--soft)}
.tb-notes h4{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--purple);margin-bottom:10px}
.tb-notes h4 small{color:var(--mut);font-weight:400;font-size:12px}
.tb-note{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.tb-note:last-child{border-bottom:0}
.tb-note > div{flex:1;min-width:0}
.tb-note-h{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--mut)}
.tb-note-t{font-size:13.5px;line-height:1.8;margin-top:2px;word-break:break-word}
.tb-nx{border:0;background:transparent;color:var(--mut);font-size:19px;cursor:pointer;width:32px;height:32px;border-radius:8px}
.tb-nx:hover{background:var(--bg-card);color:var(--orange)}
.tb-nempty{color:var(--mut);font-size:12.5px;padding:4px 0 8px}
.tb-nadd{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.tb-nadd textarea{flex:1}
.tb-plist{display:flex;flex-direction:column;max-height:52vh;overflow:auto}
.tb-p{display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:11px 14px;font:inherit;font-size:14px;color:var(--txt);cursor:pointer;text-align:start;min-height:48px;border-radius:12px}
.tb-p:hover{background:var(--soft)}
.tb-p small{color:var(--mut);font-size:12px;direction:ltr;margin-inline-start:auto}
@media (max-width:640px){
  .tb-fil{padding:10px 12px;flex-wrap:nowrap}
  .tb-c{min-height:44px}
  .tb-card{padding:13px 12px}
  .tb-take,.tb-bar-a button,.tb-reply-a button,.tb-nadd button{min-height:44px}
  .tb-back{min-height:44px}
  .tb-notes{margin:0 12px;padding:12px}
  .tb-msg,.tb-reply{padding-inline:12px}
  .tb-bar-a{width:100%}
  .tb-bar-a button{flex:1}
}
html[data-theme="dark"] #tbFrame{background:#f7f7fa}
#list.tb #qfilters,#list.tb #tabs{display:none}


/* ═══════════ FDX_APPS_V1 — صقل + وضع التضمين ═══════════ */
/* ④ الهيكل العظمي بمقاس الصف الحقيقي فلا يقفز التخطيط عند أول رسم */
.skel{height:72px}
.skel b{height:10px}
/* ④ نقطة «غير مقروء»: شارة تُقرأ بلمحة، وتختفي بلا إزاحة (تحجز مكانها دائماً) */
.row .udot{flex:none;width:7px;height:7px;border-radius:50%;background:transparent;margin-inline-end:2px}
.row.unread .udot{background:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .row.unread .udot{transition:background .18s var(--ease)}
}
/* ⑥ التنقّل بين الرسائل داخل القارئ — بيد واحدة على الجوال */
#fdxNav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
#fdxNav button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:0;background:none;border-radius:50%;color:var(--mut);cursor:pointer;transition:background .15s var(--ease)}
#fdxNav button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
#fdxNav button:hover:not(:disabled){background:var(--border-soft);color:var(--ink)}
#fdxNav button:disabled{opacity:.3;cursor:default}
@media (max-width:760px){
  #fdxNav button{width:44px;height:44px}          /* منطقة لمس ≥ 44px */
}
#readBody{will-change:transform}

/* ⑦ وضع التضمين: بلا شريط تطبيق ولا مشغّل، حشوات مضغوطة، بلا تمرير أفقي */
html[data-fdx-embed="1"] #top{display:none}
html[data-fdx-embed="1"] #searchBar{padding:8px 12px}
html[data-fdx-embed="1"] #main{border-top:0}
html[data-fdx-embed="1"] body{overflow-x:hidden}
html[data-fdx-embed="1"] .fusuite-bar,
html[data-fdx-embed="1"] #fusuiteBar{display:none!important}