/* ===== اقتراح تكملة الإيميل (js/email-suggest.js) — قائمة تحت خانة الإيميل: شارة المزود + الإيميل (التكملة ملوّنة) + اسم المزود ===== */
#mbk-email-sug {
    box-sizing: border-box;
    position: fixed;
    z-index: 100000;
    padding: 6px;
    border-radius: 16px;
    background: rgba(15, 21, 38, .97);
    border: 1px solid rgba(0, 212, 255, .22);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 4px rgba(0, 212, 255, .05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    direction: ltr;
    font-family: inherit;
    animation: mesIn .16s cubic-bezier(.2, .8, .2, 1);
    transform-origin: top center;
}
#mbk-email-sug[hidden] { display: none; }
@keyframes mesIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

#mbk-email-sug .mes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    direction: rtl;
    padding: 5px 9px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    font-size: .76rem;
    font-weight: 800;
    color: #94a3b8;
}
#mbk-email-sug .mes-head em { font-style: normal; font-weight: 600; font-size: .7rem; color: #64748b; white-space: nowrap; }
#mbk-email-sug kbd {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    margin: 0 1px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, .3);
    border-bottom-width: 2px;
    font-family: inherit;
    font-size: .66rem;
    line-height: 15px;
    text-align: center;
    color: #cbd5e1;
}
#mbk-email-sug .mes-head.is-typo { color: #fbbf24; }
#mbk-email-sug .mes-head.is-typo s { font-size: .8rem; font-weight: 700; color: #f87171; text-decoration-thickness: 1.5px; opacity: .9; }

#mbk-email-sug .mes-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #e2e8f0;
    font-family: inherit;
    font-size: .93rem;
    line-height: 1.3;
    text-align: left;
    direction: ltr;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease;
    -webkit-tap-highlight-color: transparent;
}
#mbk-email-sug .mes-opt + .mes-opt { margin-top: 2px; }

/* شارة المزود */
#mbk-email-sug .mes-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #475569;
    color: #fff;
    font-style: normal;
    font-weight: 900;
    font-size: .9rem;
    font-family: Arial, sans-serif;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
#mbk-email-sug .mes-badge svg { width: 16px; height: 16px; fill: currentColor; }
#mbk-email-sug .mes-badge[data-p="gmail"] { background: #fff; color: #ea4335; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
#mbk-email-sug .mes-badge[data-p="yahoo"],
#mbk-email-sug .mes-badge[data-p="ymail"] { background: #6001d2; }
#mbk-email-sug .mes-badge[data-p="hotmail"] { background: #f25022; }
#mbk-email-sug .mes-badge[data-p="outlook"] { background: #0078d4; }
#mbk-email-sug .mes-badge[data-p="live"],
#mbk-email-sug .mes-badge[data-p="msn"] { background: #00a4ef; }
#mbk-email-sug .mes-badge[data-p="icloud"],
#mbk-email-sug .mes-badge[data-p="me"] { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
#mbk-email-sug .mes-badge[data-p="aol"] { background: #31459b; }
#mbk-email-sug .mes-badge[data-p="protonmail"] { background: #6d4aff; }

/* الإيميل: اللي العميل كتبه عادي والتكملة ملوّنة */
#mbk-email-sug .mes-addr { display: flex; min-width: 0; flex: 1; }
#mbk-email-sug .mes-local { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #f1f5f9; font-weight: 600; }
#mbk-email-sug .mes-at { flex-shrink: 0; color: #f1f5f9; font-weight: 600; }
#mbk-email-sug .mes-addr b { flex-shrink: 0; font-weight: 800; color: #00d4ff; }
#mbk-email-sug .mes-name { flex-shrink: 0; font-size: .72rem; font-weight: 700; color: #64748b; }
#mbk-email-sug .mes-go { width: 16px; height: 16px; flex-shrink: 0; fill: #00d4ff; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }

#mbk-email-sug .mes-opt:hover,
#mbk-email-sug .mes-opt.is-active { background: linear-gradient(90deg, rgba(0, 212, 255, .14), rgba(0, 212, 255, .05)); }
#mbk-email-sug .mes-opt:hover .mes-go,
#mbk-email-sug .mes-opt.is-active .mes-go { opacity: 1; transform: none; }
#mbk-email-sug .mes-opt:hover .mes-name,
#mbk-email-sug .mes-opt.is-active .mes-name { color: #94a3b8; }

/* موبايل: صفوف أعلى للمس */
@media (hover: none) {
    #mbk-email-sug .mes-opt { padding: 10px; }
}
/* شاشة ضيقة: اسم المزود بيتشال علشان الإيميل يبان كامل (الشارة كفاية) */
@media (max-width: 420px) {
    #mbk-email-sug .mes-name { display: none; }
}

/* الوضع الفاتح */
html[data-theme="light"] #mbk-email-sug { background: rgba(255, 255, 255, .98); border-color: rgba(8, 145, 178, .22); box-shadow: 0 18px 40px rgba(15, 23, 42, .16), 0 0 0 4px rgba(8, 145, 178, .06); }
html[data-theme="light"] #mbk-email-sug .mes-head { color: #64748b; border-bottom-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] #mbk-email-sug .mes-head em { color: #94a3b8; }
html[data-theme="light"] #mbk-email-sug kbd { color: #475569; border-color: rgba(15, 23, 42, .18); background: #f8fafc; }
html[data-theme="light"] #mbk-email-sug .mes-head.is-typo { color: #b45309; }
html[data-theme="light"] #mbk-email-sug .mes-head.is-typo s { color: #dc2626; }
html[data-theme="light"] #mbk-email-sug .mes-opt { color: #334155; }
html[data-theme="light"] #mbk-email-sug .mes-local,
html[data-theme="light"] #mbk-email-sug .mes-at { color: #0f172a; }
html[data-theme="light"] #mbk-email-sug .mes-addr b { color: #0e7490; }
html[data-theme="light"] #mbk-email-sug .mes-name { color: #94a3b8; }
html[data-theme="light"] #mbk-email-sug .mes-go { fill: #0891b2; }
html[data-theme="light"] #mbk-email-sug .mes-badge[data-p="gmail"] { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
html[data-theme="light"] #mbk-email-sug .mes-opt:hover,
html[data-theme="light"] #mbk-email-sug .mes-opt.is-active { background: linear-gradient(90deg, rgba(8, 145, 178, .1), rgba(8, 145, 178, .03)); }
html[data-theme="light"] #mbk-email-sug .mes-opt:hover .mes-name,
html[data-theme="light"] #mbk-email-sug .mes-opt.is-active .mes-name { color: #64748b; }

@media (prefers-reduced-motion: reduce) { #mbk-email-sug, #mbk-email-sug .mes-opt, #mbk-email-sug .mes-go { animation: none; transition: none; } }