* { box-sizing: border-box; }
body { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif; direction: rtl; background: #eef2f7; margin: 0; padding: 20px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: 'IBM Plex Sans Arabic', 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif; }
.hidden { display: none !important; }
/* منع ظهور صفحة تسجيل الأوردر أثناء استعادة آخر صفحة بعد Refresh */
#dashboard.session-restoring { visibility:hidden !important; }
#dashboard.session-restoring * { visibility:hidden !important; }
.card { background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(15,23,42,0.07); padding: 28px; margin-bottom: 20px; max-width: 1320px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; transition: box-shadow 0.2s ease; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #2563eb, #06b6d4, #16a34a); }
.btn { padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700; transition: all 0.18s ease; letter-spacing: .1px; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(37,99,235,0.25); }
.btn-primary:hover { background: #1d4ed8; box-shadow: 0 5px 14px rgba(37,99,235,0.35); }
.btn-success { background: #16a34a; color: #fff; box-shadow: 0 3px 10px rgba(22,163,74,0.25); }
.btn-success:hover { background: #15803d; box-shadow: 0 5px 14px rgba(22,163,74,0.35); }
.btn-danger { background: #dc2626; color: #fff; box-shadow: 0 3px 10px rgba(220,38,38,0.2); }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: #f59e0b; color: #fff; }
.btn-warning:hover { background: #d97706; }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-secondary:hover { background: #d1d5db; }
.btn-info { background: #06b6d4; color: #fff; }
.btn-info:hover { background: #0891b2; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.input { width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 15px; margin-bottom: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.label { display: block; margin-bottom: 6px; font-weight: 700; color: #374151; font-size: 14px; }
.order-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; margin: 2px; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-purple { background: #f3e8ff; color: #6b21a8; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-cyan { background: #cffafe; color: #155e75; }
.badge-gray { background: #f3f4f6; color: #374151; }
.badge-pink { background: #fce7f3; color: #9d174d; }
.header { text-align: center; margin-bottom: 24px; }
.header h1 { color: #1e293b; margin: 0; font-size: 30px; font-weight: 800; letter-spacing: .2px; }
.header p { color: #64748b; margin: 8px 0 0; font-size: 14.5px; }
.card h2 { font-size: 22px; font-weight: 800; letter-spacing: .2px; }
.card h3 { font-size: 17.5px; font-weight: 700; }
.modal-header h3 { font-size: 19px; font-weight: 800; }

/* ===== Top App Bar ===== */
.topbar { max-width: 1320px; margin: 0 auto 16px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #ffffff, #f8fafc); padding: 14px 20px; border-radius: 16px; box-shadow: 0 6px 22px rgba(15,23,42,0.09); position: sticky; top: 12px; z-index: 220; border: 1px solid rgba(15,23,42,0.04); }
.topbar-menu-btn { border: none; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; width: 42px; height: 42px; border-radius: 12px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(37,99,235,0.3); transition: transform 0.15s ease; }
.topbar-menu-btn:hover { transform: translateY(-1px) scale(1.03); }
.topbar-menu-icon { display: inline-block; transition: transform 0.2s ease; }
.topbar-title { font-weight: 800; font-size: 15px; color: #1e293b; }
.topbar-title .cur-tab-emoji { margin-left: 6px; }

/* ===== Off-canvas sidebar ===== */
html, body { overflow-x: hidden; }
#appShell { position: relative; transition: transform 0.32s cubic-bezier(.4,0,.2,1); }
#appShell.nav-shifted { transform: translateX(-300px); }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.28); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; z-index: 340; }
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
.sidebar-nav { position: fixed; top: 0; right: 0; height: 100vh; width: 300px; max-width: 85vw; background: #fff; z-index: 350; box-shadow: -10px 0 40px rgba(15,23,42,0.18); transform: translateX(100%); transition: transform 0.32s cubic-bezier(.4,0,.2,1); overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-nav.open { transform: translateX(0); }
.sidebar-header { display: flex; align-items: center; gap: 10px; padding: 18px 16px; background: linear-gradient(135deg, #1f1e22, #302f35); position: relative; overflow: hidden; flex-shrink: 0; }
.sidebar-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #d0a72e, #4a4950, #d0a72e); }
.sidebar-logo-img { height: 34px; width: auto; flex-shrink: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.sidebar-header-text { flex: 1; line-height: 1.3; }
.sidebar-header-title { color: #fff; font-weight: 800; font-size: 13.5px; }
.sidebar-header-sub { color: #b9b3a4; font-size: 10.5px; margin-top: 2px; font-weight: 600; }
.sidebar-close-btn { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 30px; height: 30px; border-radius: 9px; font-size: 18px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-close-btn:hover { background: rgba(255,255,255,0.22); }
.nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 24px; }
.nav-group { display: flex; flex-direction: column; margin: 6px 0; }
.nav-group:first-child { margin-top: 0; }
.nav-group-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: .5px; text-transform: uppercase; margin: 8px 4px 4px; border: none; background: transparent; cursor: pointer; width: 100%; padding: 6px 4px; border-radius: 8px; font-family: inherit; text-align: right; transition: background 0.15s ease; }
.nav-group-label:hover { background: #f8fafc; color: #64748b; }
.nav-group-label::after { content: ''; flex: 1; height: 1px; background: #eef2f7; }
.nav-group-caret { font-size: 10px; color: #94a3b8; transition: transform 0.2s ease; flex-shrink: 0; }
.nav-group.open .nav-group-caret { transform: rotate(180deg); }
.nav-group-body { display: flex; flex-direction: column; gap: 4px; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
.nav-group.open .nav-group-body { max-height: 1000px; }
.nav-btn { padding: 11px 14px; border-radius: 11px; border: 1px solid transparent; background: transparent; cursor: pointer; font-weight: 700; color: #475569; font-size: 13.5px; transition: all 0.16s ease; white-space: nowrap; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: right; }
.nav-btn:hover { background: #f1f5f9; }
.nav-btn.active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,0.32); }
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; margin-right: auto; }
.nav-btn.active .nav-count { background: rgba(255,255,255,0.28); }
.nav-divider { display: none; }
.nav-account-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid #eef2f7; }
.nav-btn.nav-btn-danger { color: #dc2626; }
.nav-btn.nav-btn-danger:hover { background: #fef2f2; }
@media (max-width: 600px) {
  #appShell.nav-shifted { transform: translateX(-82vw); }
  .sidebar-nav { width: 82vw; }
}


/* ===== Professional Dashboard UI v2 ===== */
:root{
  --ink:#172033;--muted:#718096;--line:#e8edf4;--surface:#fff;--bg:#f5f7fb;
  --navy:#172033;--gold:#c9a227;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--purple:#7c3aed;
}
body{background:radial-gradient(circle at 8% 0%,rgba(201,162,39,.07),transparent 28%),linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%);padding:18px;}
#appShell{min-height:100vh;}
.brand-bar{max-width:1440px!important;border-radius:20px!important;padding:15px 22px!important;background:linear-gradient(135deg,#111827,#202938)!important;box-shadow:0 14px 36px rgba(15,23,42,.16)!important;margin-bottom:12px!important;}
.brand-bar::before{height:2px!important;background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;}
.brand-bar-title{font-size:16px!important;letter-spacing:.2px}.brand-bar-sub{font-size:11px!important;color:#c7ccd5!important}
.topbar{max-width:1440px!important;margin:0 auto 18px!important;padding:10px 12px!important;border:1px solid #e7ebf1!important;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(14px);border-radius:16px!important;box-shadow:0 8px 28px rgba(15,23,42,.07)!important;}
.topbar-menu-btn{background:#172033!important;width:40px;height:40px;border-radius:11px;box-shadow:none!important}.topbar-title{font-size:14px!important;color:#172033!important;flex:1}
.topbar-title::before{content:'Workspace';display:block;font-size:10px;color:#9aa4b2;font-weight:600;margin-bottom:1px;letter-spacing:.4px}.topbar-title .cur-tab-emoji{margin-left:4px}
.prof-user-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1440px;margin:0 auto 18px;background:rgba(255,255,255,.96);border:1px solid #e7ebf1;border-radius:18px;padding:14px 18px;box-shadow:0 8px 28px rgba(15,23,42,.06);}
.prof-welcome{display:flex;align-items:center;gap:12px}.prof-welcome-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#172033,#2b364a);display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 7px 16px rgba(23,32,51,.18)}
.prof-welcome h3{margin:0;font-size:15px;color:#172033}.prof-welcome p{margin:2px 0 0;color:#8a95a5;font-size:11px}.prof-actions{display:flex;align-items:center;gap:8px}.prof-chip{border:1px solid #e7ebf1;background:#f8fafc;border-radius:10px;padding:7px 10px;color:#667085;font-size:11px;font-weight:700}
.home-wrap{max-width:1440px;margin:0 auto 24px}.home-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.home-kicker{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.8px}.home-title{margin:2px 0 4px;font-size:27px;line-height:1.25;color:#172033;font-weight:900}.home-subtitle{margin:0;color:#7b8798;font-size:12px}.home-date{background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 14px;color:#667085;font-size:11px;font-weight:700;box-shadow:0 5px 18px rgba(15,23,42,.05)}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.kpi-card{position:relative;overflow:hidden;background:#fff;border:1px solid #e8edf4;border-radius:16px;padding:16px;box-shadow:0 7px 22px rgba(15,23,42,.055);min-height:118px}.kpi-card::after{content:'';position:absolute;inset:auto -20px -34px auto;width:90px;height:90px;border-radius:50%;background:var(--accent,#2563eb);opacity:.07}.kpi-top{display:flex;align-items:center;justify-content:space-between;color:#7d8796;font-size:11px;font-weight:700}.kpi-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,#2563eb) 10%,white);color:var(--accent,#2563eb);font-size:16px}.kpi-value{font-size:27px;font-weight:900;color:#172033;margin-top:12px}.kpi-note{font-size:10px;color:#98a2b3;margin-top:2px}
.home-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:14px}.home-panel{background:#fff;border:1px solid #e8edf4;border-radius:18px;padding:18px;box-shadow:0 7px 22px rgba(15,23,42,.05)}.home-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.home-panel-head h3{margin:0;color:#172033;font-size:15px}.home-panel-head span{font-size:10px;color:#9aa4b2}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-action{border:1px solid #e8edf4;background:#f9fbfd;border-radius:13px;padding:13px;text-align:right;cursor:pointer;transition:.18s;font-family:inherit}.quick-action:hover{transform:translateY(-2px);border-color:#d6deea;box-shadow:0 8px 18px rgba(15,23,42,.06);background:#fff}.quick-action b{display:block;color:#253047;font-size:12px}.quick-action span{display:block;color:#98a2b3;font-size:10px;margin-top:3px}.status-list{display:flex;flex-direction:column;gap:9px}.status-row{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;background:#f8fafc;border-radius:11px}.status-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#475467}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--dot)}.status-num{font-size:13px;font-weight:900;color:#172033}.empty-mini{color:#98a2b3;font-size:11px;padding:10px 0}
.card{border-radius:17px;box-shadow:0 6px 24px rgba(15,23,42,.055);border:1px solid #e8edf4}.card::before{height:2px;background:linear-gradient(90deg,#172033,var(--gold),transparent)}
.sidebar-nav{width:320px;background:#111827;color:#fff;box-shadow:-18px 0 50px rgba(15,23,42,.28)}.sidebar-header{padding:20px 18px;background:linear-gradient(145deg,#0f172a,#1f2937);border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-header::before{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.nav{padding:15px 12px 24px}.nav-group{margin:4px 0 9px}.nav-group-label{color:#7f8ba0;font-size:10px;letter-spacing:.8px}.nav-group-label:hover{background:rgba(255,255,255,.05);color:#cbd5e1}.nav-group-label::after{background:rgba(255,255,255,.08)}.nav-btn{color:#b7c0cf;border-color:transparent;padding:11px 13px;border-radius:11px}.nav-btn:hover{background:rgba(255,255,255,.065);color:#fff}.nav-btn.active{background:linear-gradient(135deg,#263246,#1c2738);border-color:rgba(201,162,39,.24);box-shadow:inset 3px 0 0 var(--gold),0 8px 18px rgba(0,0,0,.16);color:#fff}.nav-count{background:#d33b4b}.nav-account-group{border-top-color:rgba(255,255,255,.08)}.nav-btn.nav-btn-danger{color:#f87171}.sidebar-close-btn{background:rgba(255,255,255,.08)}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.home-grid{grid-template-columns:1fr}}
@media(max-width:640px){body{padding:10px}.brand-bar{padding:12px 14px!important}.home-hero{align-items:flex-start;flex-direction:column}.home-title{font-size:22px}.home-date{width:100%}.kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi-card{min-height:105px;padding:13px}.kpi-value{font-size:23px}.prof-user-bar{padding:12px}.prof-actions{display:none}.quick-grid{grid-template-columns:1fr}.home-panel{padding:14px}}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; text-align: right; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
th { background: #f1f5f9; font-weight: 600; color: #475569; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 800px at 15% 10%, #3a3940 0%, transparent 55%), radial-gradient(900px 700px at 90% 90%, #2a2933 0%, transparent 55%), linear-gradient(135deg, #17171a 0%, #232226 45%, #1a1a1d 100%); padding: 20px; position: relative; overflow: hidden; }
.login-page::before { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 42px 42px; pointer-events:none; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none; animation: floatOrb 14s ease-in-out infinite; }
.login-orb.orb1 { width: 360px; height: 360px; background: radial-gradient(circle, #d0a72e 0%, transparent 70%); top: -120px; right: -100px; animation-delay: 0s; }
.login-orb.orb2 { width: 300px; height: 300px; background: radial-gradient(circle, #2563eb 0%, transparent 70%); bottom: -100px; left: -80px; animation-delay: 3s; }
.login-orb.orb3 { width: 220px; height: 220px; background: radial-gradient(circle, #16a34a 0%, transparent 70%); top: 50%; left: 8%; animation-delay: 6s; opacity: 0.2; }
@keyframes floatOrb { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-25px) scale(1.08); } }
.login-box { max-width: 340px; width: 100%; background: rgba(255,255,255,0.98); backdrop-filter: blur(6px); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); padding: 30px 26px 24px; position: relative; overflow: hidden; z-index:1; animation: loginBoxIn 0.5s cubic-bezier(.2,.7,.3,1); }
@keyframes loginBoxIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.login-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #d0a72e, #34333a, #d0a72e); background-size: 200% 100%; animation: shimmerBar 3.5s linear infinite; }
@keyframes shimmerBar { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.login-logo-wrap { display:flex; justify-content:center; margin-bottom: 16px; }
.login-logo-img { max-width: 160px; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18)); }
.login-title { text-align: center; margin-bottom: 6px; }
.login-title h1 { color: #1e293b; margin: 0; font-size: 19px; font-weight: 800; letter-spacing: .2px; }
.login-title p { color: #94836b; margin: 5px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; }
.login-input-group { margin-bottom: 13px; position: relative; }
.login-input-group .input { margin-bottom: 0; padding-right: 44px; border-color:#e5e0d5; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.login-input-group .input:focus { border-color: #d0a72e; box-shadow: 0 0 0 3px rgba(208,167,46,0.15); transform: translateY(-1px); }
.login-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #b8ac95; font-size: 18px; transition: color 0.15s ease; }
.login-input-group .input:focus ~ .login-icon { color: #d0a72e; }

.login-btn { width: 100%; padding: 12px; font-size: 14.5px; border-radius: 11px; margin-top: 6px; background: linear-gradient(135deg, #34333a, #17171a); box-shadow: 0 10px 24px rgba(23,23,26,0.3); position: relative; overflow: hidden; }
.login-btn:hover { background: linear-gradient(135deg, #45444c, #232226); box-shadow: 0 12px 28px rgba(23,23,26,0.4); transform: translateY(-1px); }
.login-footer { text-align: center; margin-top: 16px; color: #94a3b8; font-size: 10.5px; display:flex; align-items:center; justify-content:center; gap:6px; }

.brand-bar { max-width: 1320px; margin: 0 auto 14px; background: linear-gradient(135deg, #1f1e22, #302f35); border-radius: 16px; padding: 13px 22px; display: flex; align-items: center; gap: 14px; box-shadow: 0 10px 26px rgba(0,0,0,0.18); position: relative; overflow: hidden; }
.brand-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #d0a72e, #4a4950, #d0a72e); }
.brand-logo-img { height: 42px; width: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.brand-bar-text { line-height: 1.3; }
.brand-bar-title { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.brand-bar-sub { color: #b9b3a4; font-size: 11px; margin-top: 2px; font-weight: 600; letter-spacing: .2px; }
@media (max-width: 600px) { .brand-logo-img { height: 34px; } .brand-bar { padding: 11px 16px; } }
.login-loading { text-align: center; padding: 40px; color: #64748b; }
.login-loading .spinner { width: 40px; height: 40px; border: 3px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.user-avatar { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; margin-left: 12px; box-shadow: 0 4px 12px rgba(37,99,235,0.25); flex-shrink: 0; }
.user-info { display: flex; align-items: center; margin-bottom: 20px; }

/* ===== User dropdown menu ===== */
.user-bar-card { padding: 14px 18px; overflow: visible; }
.user-menu-wrap { position: relative; display: inline-block; }
.user-menu-trigger { margin-bottom: 0; cursor: pointer; padding: 6px 10px 6px 6px; border-radius: 14px; transition: background 0.15s ease; user-select: none; }
.user-menu-trigger:hover { background: #f1f5f9; }
.user-name-text { font-weight: 800; font-size: 16.5px; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.user-role-text { color: #2563eb; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; margin-top: 2px; background: #eff6ff; display: inline-block; padding: 1px 8px; border-radius: 6px; }
.user-menu-caret { margin-right: 6px; color: #94a3b8; font-size: 11px; transition: transform 0.2s ease; align-self: center; }
.user-menu-caret.open { transform: rotate(180deg); }
.user-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; background: #fff; border-radius: 14px; box-shadow: 0 14px 38px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.05); padding: 8px; z-index: 300; opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; }
.user-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.user-dropdown-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: none; background: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: #374151; text-align: right; transition: background 0.15s ease; }
.user-dropdown-item:hover { background: #f1f5f9; }
.user-dropdown-item.danger { color: #dc2626; }
.user-dropdown-item.danger:hover { background: #fef2f2; }
.udi-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.user-dropdown-divider { height: 1px; background: #eef2f7; margin: 6px 4px; }
.bulk-actions-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; justify-content: flex-end; }

/* ===== Avatar (custom picture / preset icon) ===== */
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit-badge { position: absolute; bottom: -2px; left: -2px; width: 18px; height: 18px; background: #16a34a; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0 18px; }
.avatar-option { width: 100%; aspect-ratio: 1/1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; border: 2px solid transparent; transition: all 0.15s ease; }
.avatar-option:hover { transform: translateY(-2px); }
.avatar-option.selected { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.avatar-upload-zone { border: 2px dashed #d1d5db; border-radius: 12px; padding: 18px; text-align: center; background: #f8fafc; color: #64748b; cursor: pointer; transition: all 0.2s; font-size: 13.5px; font-weight: 600; }
.avatar-upload-zone:hover { border-color: #2563eb; background: #eff6ff; color: #2563eb; }
.avatar-preview-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avatar-preview-big { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; overflow: hidden; flex-shrink: 0; }
.avatar-preview-big img { width: 100%; height: 100%; object-fit: cover; }
.radio-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.radio-item { display: flex; align-items: center; gap: 6px; background: #f1f5f9; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.radio-item input { cursor: pointer; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 12px; padding: 14px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.stat-number { font-size: 22px; font-weight: 700; color: #2563eb; }
.stat-label { color: #64748b; font-size: 11px; margin-top: 4px; }
.toast { position: fixed; top: 20px; right: 20px; background: #16a34a; color: #fff; padding: 14px 28px; border-radius: 10px; font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 1000; animation: slideDown 0.3s ease; }
.toast.error { background: #dc2626; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.user-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; background: #f8fafc; border-radius: 12px; margin-bottom: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* تعديل: تحسين الواجهة على المتصفح بالموبايل */
@media (max-width: 640px) {
  body { padding: 10px; }
  .card { padding: 16px; border-radius: 14px; margin-bottom: 14px; }
  .header h1 { font-size: 22px; }
  .header p { font-size: 13px; }
  .nav { padding: 10px; gap: 6px; border-radius: 14px; }
  .nav-btn { padding: 9px 12px; font-size: 12.5px; }
  .nav-group-label { font-size: 11px; margin: 8px 2px 2px; }
  .input, select.input, textarea.input { font-size: 16px; padding: 11px 14px; } /* 16px يمنع تكبير الشاشة تلقائياً في آيفون */
  .btn { padding: 11px 16px; font-size: 14px; width: 100%; }
  .btn-sm { width: auto; padding: 8px 14px; font-size: 13px; }
  .radio-group { gap: 8px; }
  .radio-item { padding: 8px 12px; font-size: 13px; }
  .user-info { flex-wrap: wrap; }
  .user-avatar { width: 38px; height: 38px; font-size: 14px; margin-left: 8px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 10px; }
  .stat-number { font-size: 18px; }
  .stat-label { font-size: 10px; }
  table { min-width: 640px; } /* يسمح بالتمرير الأفقي داخل .table-wrap بدل انضغاط الأعمدة */
  th, td { padding: 8px 6px; font-size: 12.5px; }
  .order-items-table th, .order-items-table td { font-size: 11.5px; padding: 6px; }
  .order-items-table input { width: 48px; padding: 5px; }
  .modal-overlay { padding: 12px; }
  .modal-content { padding: 18px; width: 100%; max-width: 100%; border-radius: 14px; }
  .filter-bar, .search-bar, .export-bar { gap: 6px; }
  .filter-btn { padding: 7px 12px; font-size: 12.5px; }
  .search-bar input { min-width: 0; width: 100%; }
  .user-row { padding: 12px; }
  .login-box { padding: 22px 18px; border-radius: 16px; max-width: 300px; }
  .toast { left: 14px; right: 14px; top: 14px; text-align: center; }
}
.loading { text-align: center; color: #64748b; padding: 40px; }
.empty-state { text-align: center; color: #94a3b8; padding: 30px; }
.delete-link { color: #dc2626; cursor: pointer; font-size: 13px; font-weight: 600; }
.edit-link { color: #2563eb; cursor: pointer; font-size: 13px; font-weight: 600; margin-left: 8px; }
.view-link { color: #06b6d4; cursor: pointer; font-size: 13px; font-weight: 600; margin-left: 8px; }
.archive-link { color: #7c3aed; cursor: pointer; font-size: 13px; font-weight: 600; margin-left: 8px; }
.restore-link { color: #16a34a; cursor: pointer; font-size: 13px; font-weight: 600; margin-left: 8px; }
.status-select { padding: 6px 12px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 13px; font-weight: 600; cursor: pointer; }
.status-pending { background: #fef9c3; color: #854d0e; }
.status-completed { background: #dcfce7; color: #166534; }
.status-outdelivery { background: #dbeafe; color: #1e40af; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-archived { background: #f3f4f6; color: #374151; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal-content { background: #fff; border-radius: 16px; padding: 28px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { margin: 0; color: #1e293b; }
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #64748b; }
.role-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.role-admin { background: #fee2e2; color: #991b1b; }
.role-manager { background: #dbeafe; color: #1e40af; }
.role-employee { background: #dcfce7; color: #166534; }
.role-appuser { background: #f3e8ff; color: #6b21a8; }
.search-wrap { position: relative; margin-bottom: 12px; }
.suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; max-height: 240px; overflow-y: auto; }
.suggestion-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.suggestion-item:hover, .suggestion-item.active { background: #eff6ff; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item .sug-code { font-weight: 700; color: #2563eb; font-size: 12px; }
.suggestion-item .sug-name { color: #374151; }
.suggestion-item .sug-extra { color: #64748b; font-size: 12px; }
.suggestion-add { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; background: #f0fdf4; color: #166534; font-weight: 700; text-align: center; }
.suggestion-add:hover { background: #dcfce7; }
.order-items-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.order-items-table th, .order-items-table td { padding: 8px; border: 1px solid #e2e8f0; text-align: center; font-size: 13px; }
.order-items-table th { background: #f8fafc; }
.order-items-table input { width: 60px; padding: 6px; border: 1px solid #d1d5db; border-radius: 6px; text-align: center; }
.urgent-row { background: #fef2f2 !important; }
.urgent-row td { border-bottom-color: #fecaca; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filter-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; color: #475569; }
.filter-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.drop-zone { border: 2px dashed #d1d5db; border-radius: 12px; padding: 40px 20px; text-align: center; background: #f8fafc; color: #64748b; cursor: pointer; transition: all 0.2s; margin-bottom: 16px; }
.drop-zone:hover, .drop-zone.dragover { border-color: #2563eb; background: #eff6ff; color: #2563eb; }
.drop-zone .icon { font-size: 36px; margin-bottom: 8px; }
.drop-zone .text { font-weight: 600; font-size: 15px; }
.drop-zone .sub { font-size: 12px; margin-top: 4px; }
.progress-bar { width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: 12px; }
.progress-fill { height: 100%; background: #16a34a; width: 0%; transition: width 0.3s; border-radius: 4px; }
.progress-text { text-align: center; font-size: 13px; color: #64748b; margin-top: 6px; }
.search-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar input { flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; }
.export-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

.cancel-reason-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.cancel-reason-box .label { color: #991b1b; }
.cancel-reason-display { background: #fef2f2; border-right: 4px solid #dc2626; padding: 10px 14px; border-radius: 8px; margin-top: 8px; color: #991b1b; font-size: 13px; }

/* ===== Premium Call Center UI ===== */
:root{--cc-navy:#101828;--cc-navy2:#172033;--cc-gold:#c9a227;--cc-bg:#f5f7fb;--cc-text:#172033;--cc-muted:#667085;--cc-border:#e4e7ec}
body{background:radial-gradient(circle at 15% 0%,rgba(201,162,39,.06),transparent 30%),linear-gradient(180deg,#f8fafc 0%,#f3f5f9 100%);color:var(--cc-text);letter-spacing:-.1px}
.card{border:1px solid rgba(16,24,40,.06);box-shadow:0 10px 35px rgba(16,24,40,.07);border-radius:20px}
.card::before{height:3px;background:linear-gradient(90deg,var(--cc-gold),#e6d28b,var(--cc-gold))}
.input,select.input,textarea.input{border:1px solid #dfe3ea;background:#fff;border-radius:12px;min-height:44px;transition:border-color .18s,box-shadow .18s}
.input:focus,select.input:focus,textarea.input:focus{border-color:#b99a2b;box-shadow:0 0 0 4px rgba(201,162,39,.10);outline:none}
.label{font-weight:600;color:#344054;margin-bottom:7px}
.btn{border-radius:11px;font-weight:700;box-shadow:none}
.btn-primary{background:linear-gradient(135deg,#172033,#0f172a)}
.btn-primary:hover{background:linear-gradient(135deg,#243047,#111827)}
.btn-success{background:linear-gradient(135deg,#159957,#0f7a45)}
.topbar{border:1px solid rgba(16,24,40,.07)!important;background:rgba(255,255,255,.92)!important;box-shadow:0 10px 30px rgba(16,24,40,.07)!important;min-height:60px}
.topbar-menu-btn{background:linear-gradient(145deg,#172033,#0f172a)!important;border:1px solid rgba(201,162,39,.25)!important}
.topbar-title{font-size:15px!important;font-weight:700!important}
.sidebar-nav{background:linear-gradient(180deg,#0d1422 0%,#111827 55%,#0b1220 100%)!important;border-left:1px solid rgba(255,255,255,.06)}
.sidebar-header{background:linear-gradient(145deg,#111827,#182234)!important;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-header-title{font-size:14px!important}.sidebar-header-sub{color:#d6bd68!important}
.nav-group-label{font-weight:700!important;color:#cbd5e1!important}
.nav-btn{border-radius:10px!important;margin:3px 8px!important;color:#cbd5e1!important;transition:.18s!important}
.nav-btn:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;transform:translateX(-2px)}
.nav-btn.active{background:linear-gradient(90deg,rgba(201,162,39,.20),rgba(201,162,39,.07))!important;color:#fff!important;border-right:3px solid var(--cc-gold)!important}
.home-hero{border:1px solid rgba(201,162,39,.18)!important;background:linear-gradient(135deg,#101828,#1b2638)!important;box-shadow:0 18px 45px rgba(16,24,40,.16)!important}
.home-hero h1,.home-hero p{color:#fff!important}.home-date{color:#d6bd68!important}
.kpi-card{border:1px solid var(--cc-border)!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(16,24,40,.055)!important}
.quick-action{border:1px solid var(--cc-border)!important;background:#fff!important;border-radius:16px!important;transition:.2s!important}
.quick-action:hover{border-color:rgba(201,162,39,.5)!important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,24,40,.08)!important}
table th{background:#f8fafc!important;color:#475467!important;font-weight:700!important}table td{border-bottom-color:#eef1f5!important}
@media(max-width:700px){body{padding:10px}.card{padding:18px;border-radius:16px}.topbar{border-radius:14px!important}.nav-btn{margin:2px 5px!important}}


.selected-items-list{display:grid;gap:8px;margin:10px 0 16px}.selected-items-empty{padding:12px 14px;border:1px dashed #d0d5dd;border-radius:11px;background:#fafbfc;color:#98a2b3;font-size:13px}.selected-shortage-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e4e7ec;background:#fff;border-radius:12px;box-shadow:0 3px 10px rgba(16,24,40,.04)}.selected-shortage-item>div{display:flex;align-items:center;gap:8px;min-width:0}.selected-item-index{width:24px;height:24px;border-radius:7px;background:#f5efd8;color:#8b6f13;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}.selected-item-code{font-size:12px;color:#667085;background:#f2f4f7;padding:3px 7px;border-radius:6px}.selected-item-remove{width:28px;height:28px;border:0;border-radius:8px;background:#fef3f2;color:#d92d20;font-size:20px;line-height:1;cursor:pointer}.selected-item-remove:hover{background:#fee4e2}


.branch-excel-section{margin-top:12px;width:100%;max-width:none}.branch-excel-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.branch-excel-meta{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin-bottom:14px;color:#475569;font-size:13px}.branch-excel-table-wrap{overflow:auto;max-height:78vh;width:100%;border:1px solid #e2e8f0;border-radius:12px}.branch-excel-table{border-collapse:separate;border-spacing:0;min-width:100%;width:max-content;font-size:13px}.branch-excel-table th,.branch-excel-table td{border-left:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:8px 10px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;vertical-align:top;background:#fff;min-width:110px;max-width:420px}.branch-excel-table th{position:sticky;top:0;z-index:2;background:#f1f5f9;font-weight:800;color:#334155;line-height:1.5}.branch-excel-table th.col-l,.branch-excel-table td.col-l{background:#fff7ed}.branch-excel-cell-input{width:100%;min-width:120px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:6px;padding:7px;background:#fff;white-space:normal}.branch-excel-empty{padding:30px;text-align:center;color:#64748b}.branch-excel-branch-badge{display:inline-flex;align-items:center;gap:5px;background:#f3e8ff;color:#6b21a8;padding:4px 9px;border-radius:999px;font-weight:800}.branch-excel-upload{display:none}.branch-phone-review-dropdown{border:1px solid #e2e8f0;border-radius:12px;background:#fff;margin-bottom:14px;overflow:hidden}.branch-phone-review-toggle{width:100%;border:0;background:#f8fafc;padding:12px 15px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:16px;font-weight:800;color:#1e293b}.branch-phone-review-content{padding:12px 14px;border-top:1px solid #e2e8f0}.branch-phone-review-content.hidden{display:none}.branch-phone-review-title{margin:0}.branch-phone-review-info{font-size:12px;color:#64748b;margin:4px 0 10px}.branch-phone-review-dropdown table{width:100%;border-collapse:collapse}.branch-phone-review-dropdown th,.branch-phone-review-dropdown td{padding:8px;border-bottom:1px solid #e2e8f0;text-align:right}
/* ===== Branch Excel Review: priority columns + collapsible remaining columns ===== */
.branch-excel-priority{background:#fffdf3!important}
.branch-excel-priority th{background:#fff8dc!important;color:#172033!important}
.branch-excel-notes-cell{min-width:280px!important;max-width:520px!important;white-space:normal!important;line-height:1.55}
.branch-excel-important-cell{font-weight:800!important}
.branch-excel-hidden-col{display:none!important}
.branch-excel-toggle{display:inline-flex;align-items:center;gap:6px}.branch-excel-column-filter{position:relative}.branch-excel-column-menu{position:absolute;z-index:20;top:calc(100% + 6px);right:0;min-width:300px;max-width:420px;max-height:360px;overflow:auto;background:#fff;border:1px solid #dbe3ef;border-radius:12px;padding:12px;box-shadow:0 14px 36px rgba(15,23,42,.18)}.branch-excel-column-menu.hidden{display:none}.branch-excel-column-option{display:flex;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid #f1f5f9;font-size:12px}
.branch-excel-search-info{font-size:11px;color:#667085;margin-top:-8px;margin-bottom:10px}
.branch-excel-table th,.branch-excel-table td{vertical-align:top}
@media(max-width:700px){.branch-excel-notes-cell{min-width:220px!important;max-width:340px!important}}


/* ===== Customer phone review / red match ===== */
.branch-phone-review{margin:14px 0;padding:14px;border:1px solid #fecaca;background:#fffafa;border-radius:14px}
.branch-phone-review-title{font-weight:900;color:#991b1b;margin-bottom:8px}
.branch-phone-review-info{font-size:12px;color:#7f1d1d;margin-top:7px}
.branch-phone-match{background:#fee2e2!important;color:#991b1b!important;font-weight:800!important}
.branch-phone-match td,.branch-phone-match input{background:#fee2e2!important;color:#991b1b!important}
.branch-phone-match td{border-bottom-color:#fca5a5!important}
.branch-phone-match-badge{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:800}

.elmujib-messages-grid{display:grid;grid-template-columns:330px minmax(0,1fr);flex:1 1 auto;min-height:0;margin-top:14px;border-top:1px solid #e2e8f0;overflow:hidden}
.elmujib-contacts-panel{border-left:1px solid #e2e8f0;padding:16px;background:#f8fafc;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.elmujib-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#1e293b;flex:0 0 auto}
.elmujib-panel-head span{background:#e2e8f0;border-radius:999px;padding:3px 9px;font-size:12px}
.elmujib-search-wrap{position:relative;flex:0 0 auto;margin:0 0 8px}
.elmujib-search-input{width:100%;height:40px;border:1px solid #dbe3ec;border-radius:12px;background:#fff;padding:0 38px 0 36px;font:inherit;font-size:13px;color:#0f172a;outline:none;transition:.18s ease}
.elmujib-search-input:focus{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.13)}
.elmujib-search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;color:#64748b;pointer-events:none}
.elmujib-search-clear{position:absolute;left:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#94a3b8;font-size:17px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:7px;display:none}
.elmujib-search-clear.show{display:block}
.elmujib-search-clear:hover{background:#f1f5f9;color:#475569}
.elmujib-filter-tabs{display:flex;gap:6px;flex:0 0 auto;margin-bottom:2px}
.elmujib-filter-tab{flex:1;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-weight:700;font-size:12.5px;padding:8px 6px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.elmujib-filter-tab:hover{background:#f1f5f9}
.elmujib-filter-tab.active{background:#2563eb;border-color:#2563eb;color:#fff}
.elmujib-filter-count{background:rgba(100,116,139,.15);color:#475569;border-radius:999px;padding:1px 7px;font-size:11px}
.elmujib-filter-tab.active .elmujib-filter-count{background:rgba(255,255,255,.25);color:#fff}
.elmujib-contact.is-done{opacity:.72}
.elmujib-contacts-list{margin-top:12px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto;min-height:0;overflow-y:auto}
.elmujib-contact{width:100%;text-align:right;border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:11px;cursor:pointer;transition:.15s;position:relative}
.elmujib-contact:hover,.elmujib-contact.active{border-color:#94a3b8;background:#f1f5f9}
.elmujib-contact-name{font-weight:700;color:#1e293b;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:34px}
.elmujib-contact-phone{font-size:12px;color:#64748b;display:block;margin-top:4px;direction:ltr;text-align:right}
.elmujib-contact-count{position:absolute;top:11px;left:11px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#16a34a;color:#fff;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
.elmujib-contact.unread .elmujib-contact-count{display:inline-flex}
.elmujib-chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;overflow:hidden}
.elmujib-chat-head{padding:16px 20px;border-bottom:1px solid #e2e8f0;min-height:70px;display:flex;align-items:center;flex:0 0 auto}
.elmujib-chat-head strong{display:block;color:#0f172a}
.elmujib-chat-head span{display:block;font-size:12px;color:#64748b;margin-top:4px;direction:ltr}
.elmujib-chat-empty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#64748b;text-align:center;padding:40px}
.elmujib-chat-empty h3{color:#334155;margin:12px 0 4px}
.elmujib-composer{margin-top:auto;flex:0 0 auto;padding:10px 14px;border-top:1px solid #e2e8f0;background:#f8fafc}
.elmujib-composer-row{display:flex;align-items:center;gap:8px;width:100%}
.elmujib-composer textarea{resize:none;min-height:46px!important;height:46px!important;max-height:46px!important;margin:0!important;padding:11px 14px!important;line-height:22px;overflow-y:auto;border-radius:14px;flex:1 1 auto}
.elmujib-composer .elmujib-composer-hint{display:none}
.elmujib-chat-thread{flex:1 1 auto;overflow-y:auto!important;min-height:0!important;padding:16px 20px}
.elmujib-contacts-list{overscroll-behavior:contain;scrollbar-gutter:stable}
#messages:not(.hidden) ~ #branchExcelSections{display:none!important}
.elmujib-empty{text-align:center;color:#94a3b8;padding:25px 10px;font-size:13px}
.elmujib-mic-btn{width:44px;height:44px;border-radius:12px;border:none;background:#e5e7eb;color:#374151;font-size:18px;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.elmujib-mic-btn:hover{background:#d1d5db}
.elmujib-mic-btn.recording{background:#dc2626;color:#fff;animation:elmujib-pulse 1.1s infinite}
@keyframes elmujib-pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}70%{box-shadow:0 0 0 10px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.elmujib-rec-indicator{font-size:12.5px;color:#dc2626;font-weight:700;display:flex;align-items:center;gap:6px}
.elmujib-voice-bubble{display:flex;align-items:center;gap:8px;min-width:220px}
.elmujib-voice-play{width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#0f172a;display:inline-grid;place-items:center;cursor:pointer;font-size:17px;box-shadow:0 1px 4px rgba(15,23,42,.14);flex:none}
.elmujib-voice-play.playing{background:#2563eb;color:#fff}
.elmujib-voice-wave{height:4px;flex:1;min-width:110px;border-radius:999px;background:linear-gradient(90deg,#94a3b8 0 55%,#cbd5e1 55% 100%);opacity:.9}
.elmujib-sender-tag{font-size:10.5px;font-weight:850;margin-bottom:4px;opacity:.88}
.elmujib-image-bubble img{display:block;max-width:min(360px,68vw);max-height:360px;border-radius:12px;object-fit:contain;background:#fff;cursor:zoom-in}
.elmujib-image-caption{margin-top:7px;white-space:pre-wrap;word-break:break-word}
.elmujib-image-input{display:none}
.elmujib-image-preview{display:none;align-items:center;gap:10px;margin-bottom:9px;padding:9px 10px;border:1px solid #dbe3ef;border-radius:14px;background:#fff}
.elmujib-image-preview.show{display:flex}
.elmujib-image-preview img,.elmujib-image-preview video{width:76px;height:76px;object-fit:cover;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc}
.elmujib-image-preview-meta{flex:1;min-width:0}
.elmujib-image-preview-meta strong{display:block;color:#0f172a;font-size:13px;margin-bottom:3px}
.elmujib-image-preview-meta span{display:block;color:#64748b;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elmujib-image-preview-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.elmujib-composer-tools{display:flex;align-items:center;gap:6px;position:relative}
.elmujib-tool-btn{width:40px;height:40px;border:1px solid #e2e8f0;border-radius:11px;background:#fff;display:inline-grid;place-items:center;cursor:pointer;font-size:18px;color:#334155}
.elmujib-tool-btn:hover{background:#f8fafc}
.elmujib-popover{position:absolute;bottom:48px;right:0;z-index:40;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:8px;min-width:250px;max-width:330px}
.elmujib-popover.hidden{display:none}
.elmujib-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.elmujib-emoji-btn{border:0;background:transparent;border-radius:8px;padding:6px;cursor:pointer;font-size:19px}
.elmujib-emoji-btn:hover{background:#f1f5f9}
.elmujib-slash-list{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
.elmujib-slash-item{border:0;background:#fff;text-align:right;border-radius:9px;padding:8px 10px;cursor:pointer;color:#1e293b}
.elmujib-slash-item:hover,.elmujib-slash-item.active{background:#eff6ff;color:#1d4ed8}
.elmujib-slash-item b{display:block;font-size:12px}.elmujib-slash-item span{display:block;font-size:11px;color:#64748b;margin-top:2px}

.elmujib-availability-switch{display:inline-flex;align-items:center;gap:9px;border:1px solid #dbe3ef;background:#fff;border-radius:999px;padding:5px 10px 5px 7px;font-weight:800;color:#475569;cursor:pointer;user-select:none}
.elmujib-availability-switch .track{width:46px;height:26px;border-radius:999px;background:#cbd5e1;position:relative;transition:.18s;box-shadow:inset 0 0 0 1px rgba(15,23,42,.05)}
.elmujib-availability-switch .thumb{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.25);transition:.18s}
.elmujib-availability-switch.is-online{color:#047857;border-color:#a7f3d0;background:#ecfdf5}
.elmujib-availability-switch.is-online .track{background:#22c55e}
.elmujib-availability-switch.is-online .thumb{transform:translateX(-20px)}
.elmujib-admin-agents{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid #e2e8f0;background:#fbfdff}
.elmujib-admin-agents.show{display:flex}
.elmujib-agent-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-size:12px;font-weight:800}
.elmujib-transfer-wrap{display:none;align-items:center;gap:6px}
.elmujib-transfer-wrap.show{display:flex}
.elmujib-transfer-wrap select{min-width:150px;padding:7px 9px;margin:0;font-size:12px}
@media(max-width:800px){.elmujib-messages-grid{grid-template-columns:1fr}.elmujib-contacts-panel{border-left:0;border-bottom:1px solid #e2e8f0;max-height:38vh}}


/* ===== Messages workspace v3: compact profile + wide professional layout ===== */
body.messages-mode{padding:10px 12px;overflow:hidden}
body.messages-mode .prof-user-bar{display:none!important}
body.messages-mode .brand-bar{max-width:none!important;margin:0 0 8px!important;padding:10px 18px!important;border-radius:16px!important}
body.messages-mode .brand-logo-img{height:34px!important}
body.messages-mode .topbar{max-width:none!important;margin:0 0 8px!important;min-height:48px;padding:7px 10px!important;border-radius:14px!important}
body.messages-mode #messages{width:100%;max-width:none;margin:0!important}
body.messages-mode .messages-wrap{height:calc(100vh - 130px);min-height:540px}
body.messages-mode .messages-panel{border-radius:16px!important;box-shadow:0 12px 34px rgba(15,23,42,.08)!important}
.messages-toolbar{padding:10px 14px!important;min-height:58px!important;background:linear-gradient(180deg,#fff,#fbfcfe)!important}
.messages-toolbar-title{gap:9px!important}
.messages-toolbar-title .messages-icon{width:36px!important;height:36px!important;border:1px solid #e8edf3;background:#f7f9fc!important}
.messages-toolbar-actions{gap:7px!important;flex-wrap:wrap;justify-content:flex-end}
.elmujib-messages-user{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 7px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.035);min-width:150px}
.elmujib-messages-user-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;overflow:hidden;flex:none}
.elmujib-messages-user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.elmujib-messages-user-meta{min-width:0;line-height:1.2;text-align:right}
.elmujib-messages-user-name{font-size:12.5px;font-weight:850;color:#172033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.elmujib-messages-user-role{font-size:10.5px;color:#7b8798;margin-top:3px;white-space:nowrap}
body.messages-mode #elmujibApiStatus{margin:8px 14px 0!important;padding:8px 11px!important}
body.messages-mode .elmujib-admin-agents{margin-top:6px!important;padding:7px 14px!important}
body.messages-mode .elmujib-messages-grid{margin-top:8px!important;grid-template-columns:360px minmax(0,1fr)}
body.messages-mode .elmujib-contacts-panel{padding:12px!important}
body.messages-mode .elmujib-chat-head{padding:10px 16px!important;min-height:58px!important}
body.messages-mode .elmujib-chat-body{padding:12px 16px!important}
@media(max-width:1000px){body.messages-mode .elmujib-messages-grid{grid-template-columns:320px minmax(0,1fr)}.elmujib-messages-user{min-width:auto}.elmujib-messages-user-role{display:none}}
@media(max-width:800px){body.messages-mode{overflow:auto}.elmujib-messages-user{display:none}body.messages-mode .messages-wrap{height:auto;min-height:calc(100vh - 130px)}}



/* =========================================================
   V3 — Professional UI polish
   ========================================================= */
:root{
  --ui-navy:#0f172a;
  --ui-navy-2:#172033;
  --ui-gold:#c9a227;
  --ui-bg:#f4f7fb;
  --ui-border:#e7ebf2;
  --ui-text:#182235;
  --ui-muted:#667085;
  --ui-radius:16px;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 10% 0%,rgba(201,162,39,.045),transparent 24%),
    linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%);
  color:var(--ui-text);
}

/* Sidebar */
.sidebar-nav{
  width:328px!important;
  background:linear-gradient(180deg,#0b1220 0%,#101827 52%,#0a111e 100%)!important;
  box-shadow:-24px 0 60px rgba(15,23,42,.30)!important;
}
.sidebar-header{
  padding:21px 19px!important;
  min-height:68px;
}
.sidebar-header-title{font-size:15px!important;letter-spacing:.15px}
.sidebar-header-sub{font-size:11.5px!important}
.nav{padding:17px 13px 28px!important}
.nav-group{margin:5px 0 12px!important}
.nav-group-label{
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.35px!important;
  padding:8px 7px!important;
  margin:8px 3px 5px!important;
  color:#94a3b8!important;
}
.nav-btn{
  min-height:45px!important;
  padding:11px 14px!important;
  border-radius:12px!important;
  font-size:14.5px!important;
  font-weight:700!important;
  line-height:1.45!important;
  color:#c4ccd8!important;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease!important;
}
.nav-btn:hover{
  transform:translateX(-2px);
  background:rgba(255,255,255,.065)!important;
  color:#fff!important;
}
.nav-btn.active{
  background:linear-gradient(135deg,rgba(201,162,39,.18),rgba(37,51,72,.92))!important;
  border-color:rgba(201,162,39,.25)!important;
  box-shadow:inset 3px 0 0 var(--ui-gold),0 8px 22px rgba(0,0,0,.18)!important;
}
.nav-count{
  min-width:22px;
  height:22px;
  border-radius:8px!important;
  font-size:11px!important;
  font-weight:800!important;
}
.nav-account-group{
  margin-top:12px!important;
  padding-top:12px!important;
}


/* Messages - embedded vendor console */
.messages-wrap{
  padding:0!important;
  height:calc(100vh - 138px);
  min-height:560px;
  overflow:hidden;
}
.messages-panel{
  height:100%;
  max-width:none!important;
  width:100%!important;
  display:flex;
  flex-direction:column;
  padding:0!important;
  overflow:hidden;
}
.messages-toolbar{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--ui-border);
  background:rgba(255,255,255,.92);
  flex:0 0 auto;
}
.messages-toolbar-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:850;
  color:#111827;
}
.messages-toolbar-title .messages-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#f4f6f8;
  font-size:19px;
}
.messages-toolbar-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.messages-frame{
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  display:block;
  background:#fff;
  flex:1 1 auto;
}
.messages-note{
  font-size:11px;
  color:#667085;
  margin:0;
}
@media(max-width:700px){
  .messages-wrap{height:calc(100vh - 135px);min-height:520px}
  .messages-toolbar{padding:10px 12px}
  .messages-note{display:none}
}

/* Main surface */
#dashboard{
  min-height:100vh;
}
.main-content{
  padding:22px!important;
}
.header{
  margin-bottom:18px!important;
}
.header h1{
  font-size:31px!important;
  letter-spacing:-.45px!important;
  color:#111827!important;
}
.header p{
  font-size:14px!important;
}

/* Cards / panels */
.card,.home-panel,.stat-card,.table-card{
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.055)!important;
}
.card:hover,.home-panel:hover{
  box-shadow:0 12px 32px rgba(15,23,42,.075)!important;
}
.stat-card{
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.stat-card:hover{
  transform:translateY(-2px);
}

/* Inputs */
.input,select,textarea{
  border-color:#dce2ea!important;
  border-radius:11px!important;
  min-height:42px;
  background:#fff!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
}
.input:focus,select:focus,textarea:focus{
  border-color:#b9a04a!important;
  box-shadow:0 0 0 3px rgba(201,162,39,.12)!important;
  outline:none!important;
}

/* Buttons */
.btn{
  border-radius:11px!important;
  font-weight:800!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
.btn:hover{
  transform:translateY(-1px);
}

/* Tables */
table thead th{
  background:#f7f9fc!important;
  color:#475467!important;
  font-weight:800!important;
  font-size:12px!important;
  border-bottom:1px solid #e5e9f0!important;
}
table tbody td{
  font-size:13px!important;
}
table tbody tr{
  transition:background .12s ease!important;
}
table tbody tr:hover{
  background:#fafbfc!important;
}

/* Badges */
.badge{
  border-radius:8px!important;
  font-weight:800!important;
  padding:5px 8px!important;
}

/* Home dashboard */
.home-panel{
  padding:20px!important;
}
.home-panel-head h3{
  font-size:16px!important;
  font-weight:850!important;
}
.quick-action{
  border-radius:14px!important;
  padding:15px!important;
  background:linear-gradient(180deg,#fff,#f9fbfd)!important;
}
.quick-action b{font-size:13px!important}
.quick-action span{font-size:10.5px!important}

/* Login */
.login-box{
  border-radius:24px!important;
  box-shadow:0 24px 70px rgba(15,23,42,.20)!important;
  border:1px solid rgba(255,255,255,.65)!important;
}
.login-title h1{
  letter-spacing:-.3px;
}
.login-input-group .input{
  min-height:46px!important;
}

/* Scrollbar */
*{
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* Mobile */
@media(max-width:700px){
  .sidebar-nav{width:min(88vw,340px)!important}
  .main-content{padding:14px!important}
  .header h1{font-size:24px!important}
  .nav-btn{font-size:14px!important}
}

/* ===== WhatsApp-like image thumbnail + fullscreen preview ===== */
.elmujib-chat-image{
  display:block;
  width:180px;
  max-width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:12px;
  cursor:zoom-in;
  margin:4px 0;
}
#elmujibImageLightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(0,0,0,.94);
  align-items:center;
  justify-content:center;
  padding:0;
}
#elmujibImageLightbox.open{display:flex;}
#elmujibImageLightbox img{
  width:100vw;
  height:100vh;
  object-fit:contain;
  border-radius:0;
}
#elmujibImageLightboxClose{
  position:fixed;
  top:16px;
  right:18px;
  z-index:1000000;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:28px;
  line-height:42px;
  cursor:pointer;
}


/* ===== Professional WhatsApp workspace V3 ===== */
body.messages-mode .messages-panel{background:#fff;border:1px solid #e6eaf0!important}
body.messages-mode .messages-toolbar{background:#fff!important;border-bottom:1px solid #edf0f4!important}
body.messages-mode .messages-toolbar-title>div:last-child>div{font-size:16px;font-weight:900;color:#182230}
body.messages-mode #elmujibApiStatus{display:inline-flex!important;width:auto!important;margin:7px 14px 0!important;padding:6px 10px!important;border:1px solid #d1fae5!important;border-radius:999px!important;font-size:11px!important;font-weight:800!important}
.elmujib-contacts-panel{background:#fff!important;border-left:1px solid #e8ecf1!important}
.elmujib-search-input{background:#f5f7fa!important;border-color:transparent!important;border-radius:12px!important;min-height:42px!important}
.elmujib-search-input:focus{background:#fff!important;border-color:#b8c7e6!important;box-shadow:0 0 0 3px rgba(37,99,235,.08)!important}
.elmujib-contact{border-radius:12px!important;margin:3px 0!important;border:1px solid transparent!important;padding:11px 10px!important}
.elmujib-contact:hover{background:#f7f9fc!important}
.elmujib-contact.active{background:#eef5ff!important;border-color:#d9e8ff!important}
.elmujib-contact.unread{background:#f4fbf7!important}
.elmujib-chat-panel{background:#f4f6f8!important}
.elmujib-chat-head{background:#fff!important;border-bottom:1px solid #e8ecf1!important}
.elmujib-chat-thread{background-color:#efeae2!important;background-image:radial-gradient(rgba(100,116,139,.07) .7px,transparent .7px)!important;background-size:13px 13px!important}
.elmujib-composer{background:#f5f6f6!important;border-top:1px solid #e1e5e9!important;padding:9px 12px!important}
.elmujib-composer-row{background:#fff!important;border:1px solid #dfe4e8!important;border-radius:15px!important;padding:5px 7px!important;box-shadow:0 2px 8px rgba(15,23,42,.04)!important}
#elmujibMessageText{border:0!important;box-shadow:none!important;background:transparent!important;min-height:40px!important;max-height:120px!important}
.elmujib-tool-btn,.elmujib-mic-btn{border-radius:10px!important}

/* ===== Admin user performance reports ===== */
.admin-reports-wrap{max-width:1500px;margin:0 auto 36px}
.reports-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:20px;background:linear-gradient(135deg,#111827,#1e3a5f);color:#fff;margin-bottom:16px;box-shadow:0 14px 35px rgba(15,23,42,.12)}
.reports-kicker{font-size:10px;letter-spacing:1.7px;font-weight:900;opacity:.68}.reports-hero h2{margin:5px 0 4px;font-size:24px}.reports-hero p{margin:0;color:#d5deea;font-size:13px}.reports-controls{display:flex;align-items:center;gap:8px}.reports-controls .input{min-width:160px;background:#fff}
.report-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.report-kpi{background:#fff;border:1px solid #e7ebf0;border-radius:16px;padding:17px 18px;box-shadow:0 6px 18px rgba(15,23,42,.035)}.report-kpi span{display:block;color:#667085;font-size:12px;font-weight:700}.report-kpi b{display:block;font-size:25px;color:#182230;margin:7px 0 3px}.report-kpi small{color:#98a2b3;font-size:11px}
.report-card{background:#fff;border:1px solid #e7ebf0;border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:0 7px 22px rgba(15,23,42,.035)}.report-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.report-card-head h3{margin:0 0 3px;font-size:16px;color:#182230}.report-card-head span{font-size:11px;color:#98a2b3}.report-legend{display:flex;gap:12px}.report-legend span{color:#667085}.report-legend .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:4px}.report-legend .dot.online{background:#16a34a}.report-legend .dot.offline{background:#94a3b8}
.report-table-wrap{overflow:auto;border:1px solid #edf0f3;border-radius:13px}.report-table{width:100%;border-collapse:collapse;min-width:1050px}.report-table th,.report-table td{padding:11px 12px;text-align:right;border-bottom:1px solid #edf0f3;white-space:nowrap}.report-table tbody tr:last-child td{border-bottom:0}.report-user{display:flex;align-items:center;gap:8px}.report-avatar{width:30px;height:30px;border-radius:9px;background:#edf3ff;color:#2457a6;display:grid;place-items:center;font-weight:900}.report-state{font-weight:850;font-size:11px}.report-state.online{color:#15803d}.report-state.offline{color:#64748b}
.detail-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:18px}.detail-kpis>div{padding:12px;border-radius:12px;background:#f8fafc;border:1px solid #eef1f4}.detail-kpis span{display:block;font-size:10px;color:#667085}.detail-kpis b{display:block;margin-top:5px;font-size:15px;color:#182230}.timeline-title{font-size:13px;color:#344054;margin:8px 0}.presence-timeline{display:grid;gap:7px}.timeline-row{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid #edf0f3;font-size:12px}.timeline-row.online{background:#f0fdf4}.timeline-row.offline{background:#f8fafc}.timeline-state{font-weight:900}.timeline-row.online .timeline-state{color:#15803d}.timeline-row.offline .timeline-state{color:#64748b}.report-loading{padding:18px;text-align:center;color:#667085}
@media(max-width:900px){.reports-hero{align-items:flex-start;flex-direction:column}.report-kpi-grid{grid-template-columns:repeat(2,1fr)}.detail-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.report-kpi-grid{grid-template-columns:1fr 1fr}.reports-controls{width:100%}.reports-controls .input{min-width:0;flex:1}.detail-kpis{grid-template-columns:repeat(2,1fr)}}
.elmujib-optimistic-wrap{display:flex;justify-content:flex-end;margin:8px 0;animation:msgIn .13s ease-out}.elmujib-optimistic-bubble{max-width:78%;padding:10px 14px;border-radius:14px;background:#dcfce7;color:#14532d;box-shadow:0 1px 2px rgba(15,23,42,.05)}.elmujib-pending-time{font-size:10px;color:#7c9b84;margin-top:5px}.elmujib-optimistic-wrap.failed .elmujib-optimistic-bubble{background:#fee2e2;color:#991b1b}.elmujib-optimistic-wrap.failed .elmujib-pending-time{color:#b91c1c}@keyframes msgIn{from{transform:translateY(5px);opacity:.45}to{transform:none;opacity:1}}
#elmujibSendBtn{min-width:78px;border-radius:11px!important;font-weight:900!important}

/* PRO V4: home performance + quick replies manager */
.home-performance-panel{margin-top:18px}.home-performance-panel>.home-panel-head{align-items:center}.home-performance-kpis{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;margin-bottom:14px}.home-performance-kpi{padding:12px;border:1px solid #e8edf3;border-radius:12px;background:#fff}.home-performance-kpi span{display:block;color:#64748b;font-size:12px}.home-performance-kpi b{display:block;margin-top:4px;font-size:20px;color:#0f172a}.home-performance-table{width:100%;border-collapse:collapse}.home-performance-table th,.home-performance-table td{padding:10px 8px;border-bottom:1px solid #edf1f5;text-align:right;font-size:13px;white-space:nowrap}.home-performance-table th{color:#64748b;background:#f8fafc}.home-performance-detail{margin-top:14px;border-top:1px solid #e8edf3;padding-top:14px}.quick-replies-manager{width:min(760px,94vw);max-height:90vh;overflow:auto}.quick-reply-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-reply-global{display:flex;align-items:center;gap:8px;padding:10px 0;font-weight:700}.quick-replies-list-head{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e5e7eb;padding-top:14px;margin-top:14px;color:#475569}.quick-replies-manager-list{display:grid;gap:8px;margin-top:10px}.quick-reply-manage-row{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa}.quick-reply-manage-row .qr-main{flex:1;min-width:0}.quick-reply-manage-row .qr-main b{display:block}.quick-reply-manage-row .qr-main span{display:block;color:#64748b;margin-top:3px;white-space:pre-wrap}.quick-reply-scope{font-size:11px;padding:3px 7px;border-radius:999px;background:#eef2ff;color:#3730a3}.quick-reply-scope.personal{background:#ecfdf5;color:#047857}@media(max-width:900px){.home-performance-kpis{grid-template-columns:repeat(2,1fr)}.quick-reply-form-grid{grid-template-columns:1fr}.home-performance-panel{overflow:hidden}.home-performance-table{min-width:760px}}

/* =========================================================
   V5 — WhatsApp-like Professional Chat Workspace
   ========================================================= */
body.messages-mode{padding:0!important;background:#f4f7fb!important;overflow:hidden!important}
body.messages-mode .brand-bar,body.messages-mode .topbar,body.messages-mode .prof-user-bar{display:none!important}
body.messages-mode #appShell{margin-left:250px;min-height:100vh;transition:none!important}
body.messages-mode .sidebar-nav{left:0!important;right:auto!important;transform:none!important;width:250px!important;max-width:none!important;box-shadow:none!important;z-index:200!important;border-left:0!important;border-right:1px solid rgba(255,255,255,.06)!important}
body.messages-mode .sidebar-backdrop{display:none!important}
body.messages-mode .sidebar-close-btn{display:none!important}
body.messages-mode #messages{display:block;width:100%;height:100vh;margin:0!important;max-width:none!important}
body.messages-mode .messages-wrap{height:100vh!important;min-height:0!important}
.cc-workspace-shell{height:100%;display:flex;flex-direction:column;background:#f7f9fc;direction:rtl}
.cc-workspace-topbar{height:64px;flex:0 0 64px;background:#fff;border-bottom:1px solid #e9edf3;display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:16px;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.cc-topbar-search{width:min(430px,42vw);height:40px;border:1px solid #dfe5ee;border-radius:10px;background:#fbfcfe;display:flex;align-items:center;gap:8px;padding:0 12px;direction:rtl}
.cc-topbar-search span{color:#64748b;font-size:18px}.cc-topbar-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:#172033;direction:rtl}.cc-topbar-search input::placeholder{color:#98a2b3}
.cc-topbar-user{display:flex;align-items:center;gap:10px}.cc-api-status{position:absolute;z-index:20;top:70px;right:18px;font-size:11px;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:5px 9px;max-width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-admin-agents{position:absolute;top:70px;left:268px;z-index:19;background:#fff!important;border:1px solid #e7ebf2!important;border-radius:12px;padding:6px 9px!important;box-shadow:0 8px 20px rgba(15,23,42,.06);max-width:55vw}.cc-agent-list{display:flex;gap:5px;flex-wrap:wrap}
.cc-chat-layout{direction:ltr;display:grid;grid-template-columns:315px minmax(460px,1fr) 280px;flex:1 1 auto;min-height:0;overflow:hidden;border-top:1px solid #edf0f4;background:#fff;margin-top:0}
.cc-chat-layout>*{direction:rtl}.cc-contacts-column{grid-column:1;border-left:0!important;border-right:1px solid #e7ebf2!important;background:#fff!important;padding:14px 10px 10px!important}.cc-chat-column{grid-column:2;border-right:0;background:#f1f4f8!important}.cc-customer-panel{grid-column:3;background:#fff;border-left:1px solid #e7ebf2;padding:12px;overflow-y:auto;min-width:0}
.cc-contacts-head{margin-bottom:10px!important}.cc-contacts-head>div strong{display:block;font-size:18px;color:#172033}.cc-contacts-head>div small{display:block;color:#98a2b3;font-size:10px;margin-top:2px}.cc-contacts-head>span{background:#eef4ff!important;color:#2563eb!important;font-weight:800}
.elmujib-search-input{background:#f8fafc!important;border-color:#e4e9f0!important}.elmujib-filter-tabs{background:#f8fafc;border-radius:10px;padding:3px}.elmujib-filter-tab{border:0!important;background:transparent!important;color:#667085!important;border-radius:8px!important}.elmujib-filter-tab.active{background:#2563eb!important;color:#fff!important;box-shadow:0 3px 9px rgba(37,99,235,.18)}
.elmujib-contacts-list{gap:0!important;margin-top:8px!important}.elmujib-contact{border:0!important;border-bottom:1px solid #eef1f5!important;border-radius:0!important;padding:12px 10px 12px 54px!important;background:#fff!important;min-height:72px}.elmujib-contact:hover{background:#f7faff!important}.elmujib-contact.active{background:#edf5ff!important;box-shadow:inset -3px 0 0 #2563eb}.elmujib-contact-name{padding-left:0!important;font-size:13px}.elmujib-contact-phone{font-size:10.5px!important;margin-top:2px!important}.elmujib-contact-count{left:10px!important;top:28px!important;background:#16a34a!important}.cc-contact-time{position:absolute;left:9px;top:8px;font-size:10px;color:#98a2b3}.cc-contact-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0ea85f,#159957);color:#fff;display:grid;place-items:center;font-weight:900;float:right;margin-left:9px;margin-top:3px}.cc-contact-main{overflow:hidden}.cc-contact-preview{display:block;margin-top:4px;font-size:11px;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-chat-head{background:#fff!important;border-bottom:1px solid #e6eaf0!important;min-height:66px!important;padding:9px 14px!important}.cc-chat-person{display:flex;align-items:center;gap:9px;min-width:0}.cc-chat-avatar,.cc-customer-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0ca85c,#14964f);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900;flex:none}.cc-chat-person strong{font-size:14px}.cc-chat-person span{direction:ltr!important;text-align:right;color:#667085!important;font-size:11px!important}.cc-chat-actions{margin-right:auto;display:flex;gap:6px;align-items:center}.cc-chat-actions .btn{height:36px;padding:0 11px;font-size:11px;border-radius:9px}.cc-chat-actions .btn-success{background:#16a34a!important}
.cc-chat-thread{background:radial-gradient(circle at 25% 20%,rgba(37,99,235,.025),transparent 30%),linear-gradient(180deg,#f4f7fb,#eef2f6)!important;padding:18px 16px!important;scroll-behavior:smooth}.cc-message-row{display:flex;margin:7px 0;position:relative;align-items:flex-end;gap:6px}.cc-message-row.inbound{justify-content:flex-start}.cc-message-row.outbound{justify-content:flex-end}.cc-message-bubble{max-width:min(72%,620px);padding:8px 10px;border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.06);position:relative;border:1px solid rgba(15,23,42,.04)}.cc-message-row.inbound .cc-message-bubble{background:#fff;color:#172033;border-top-right-radius:4px}.cc-message-row.outbound .cc-message-bubble{background:#dcfce7;color:#14532d;border-top-left-radius:4px}.cc-message-row.bot .cc-message-bubble{background:#dbeafe;color:#1e3a8a}.cc-message-meta{font-size:9.5px;color:#98a2b3;margin-top:4px;text-align:left}.cc-message-reply-btn{opacity:0;border:0;background:#fff;color:#64748b;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.12);transition:.15s}.cc-message-row:hover .cc-message-reply-btn{opacity:1}.cc-message-quote{border-right:3px solid #2563eb;background:rgba(255,255,255,.55);border-radius:7px;padding:6px 8px;margin-bottom:6px;font-size:11px;color:#475569;max-width:100%;overflow:hidden}.cc-message-quote strong{display:block;color:#2563eb;font-size:10px;margin-bottom:2px}.cc-message-quote span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-message-row.inbound .cc-message-quote{background:#f8fafc}.cc-message-row.outbound .cc-message-quote{background:rgba(255,255,255,.55)}
.cc-composer{background:#fff!important;border-top:1px solid #e6eaf0!important;padding:8px 10px!important}.cc-composer .elmujib-composer-row{gap:6px}.cc-composer textarea{background:#f8fafc!important;border-color:#e4e8ef!important;min-height:44px!important;height:44px!important;max-height:90px!important;border-radius:10px!important}.cc-quick-replies-btn{height:40px;border:1px solid #e1e6ed;background:#fff;border-radius:9px;padding:0 10px;font:inherit;font-size:11px;font-weight:800;color:#334155;cursor:pointer;white-space:nowrap}.cc-send-btn{height:42px!important;min-width:82px;background:#2563eb!important;border-radius:9px!important}.elmujib-tool-btn,.elmujib-mic-btn{width:38px!important;height:38px!important;border-radius:9px!important;background:#fff!important;border:1px solid #e3e8ef!important}.cc-reply-preview{display:flex;align-items:stretch;min-height:48px;border:1px solid #dce4ee;background:#f8fafc;border-radius:10px;margin-bottom:7px;overflow:hidden}.cc-reply-preview.hidden{display:none}.cc-reply-preview-accent{width:4px;background:#2563eb;flex:none}.cc-reply-preview-body{padding:6px 9px;min-width:0;flex:1}.cc-reply-preview-body strong{display:block;font-size:10px;color:#2563eb}.cc-reply-preview-body span{display:block;font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.cc-reply-preview-close{width:36px;border:0;background:transparent;color:#98a2b3;font-size:20px;cursor:pointer}
.cc-customer-tabs{display:flex;gap:4px;border-bottom:1px solid #e8edf3;margin:-2px -2px 12px;padding-bottom:8px}.cc-customer-tabs button{flex:1;border:0;background:transparent;color:#667085;font:inherit;font-size:10.5px;padding:7px 3px;border-radius:8px;cursor:pointer}.cc-customer-tabs button.active{color:#2563eb;background:#eff6ff;font-weight:800}.cc-customer-profile{display:flex;align-items:center;gap:9px;padding:10px 4px 13px;border-bottom:1px solid #edf0f4}.cc-customer-profile strong{display:block;font-size:13px;color:#172033}.cc-customer-profile span{display:block;font-size:10px;color:#667085;direction:ltr;text-align:right;margin-top:3px}.cc-customer-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:11px 0}.cc-customer-meta-grid>div{border:1px solid #e7ebf1;background:#fbfcfe;border-radius:9px;padding:8px}.cc-customer-meta-grid span{display:block;font-size:9.5px;color:#98a2b3}.cc-customer-meta-grid b{display:block;font-size:11px;color:#334155;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-customer-section{border-top:1px solid #edf0f4;padding-top:11px;margin-top:10px}.cc-customer-section h4{font-size:11px;margin:0 0 8px;color:#667085}.cc-customer-summary{font-size:11px;line-height:1.7;color:#475569;background:#f8fafc;border-radius:9px;padding:9px;min-height:54px}
.cc-chat-stats{flex:0 0 auto;min-height:78px;background:#fff;border-top:1px solid #e7ebf2;display:flex;align-items:stretch;gap:8px;padding:8px 12px;overflow-x:auto}.cc-chat-stat{min-width:150px;flex:1;border:1px solid #e7ebf2;border-radius:11px;background:#fff;display:flex;align-items:center;gap:9px;padding:9px 11px}.cc-chat-stat small{display:block;font-size:9.5px;color:#98a2b3}.cc-chat-stat b{display:block;font-size:16px;color:#172033;margin-top:2px}.cc-stat-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px}.cc-stat-icon.green{background:#ecfdf3}.cc-stat-icon.blue{background:#eff6ff}.cc-stat-icon.violet{background:#f5f3ff}.cc-stat-icon.amber{background:#fffbeb}.cc-stat-icon.cyan{background:#ecfeff}.cc-stat-icon.rose{background:#fff1f2}.cc-detailed-report-btn{border:0;background:#0f172a;color:#fff;border-radius:10px;padding:0 13px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;white-space:nowrap}.cc-user-mode .cc-admin-stat,.cc-user-mode .admin-only-customer{display:none!important}.cc-admin-mode .cc-admin-stat{display:flex}.cc-admin-mode .cc-detailed-report-btn{display:block}.cc-user-mode .cc-chat-stat{min-width:180px}
body.messages-mode .nav-btn.active{background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;border-color:transparent!important;box-shadow:none!important}body.messages-mode .sidebar-header{padding:18px 16px!important}.sidebar-header-title{text-transform:uppercase;font-size:13px!important}.sidebar-header-sub{color:#cbd5e1!important}.sidebar-nav .nav{padding-top:12px!important}.sidebar-nav .nav-btn{min-height:42px;font-size:12px!important}
@media(max-width:1250px){body.messages-mode #appShell{margin-left:220px}body.messages-mode .sidebar-nav{width:220px!important}.cc-chat-layout{grid-template-columns:285px minmax(420px,1fr) 245px}.cc-customer-panel{padding:9px}.cc-chat-stat{min-width:135px}}
@media(max-width:1050px){body.messages-mode #appShell{margin-left:0}body.messages-mode .sidebar-nav{transform:translateX(-100%)!important}.cc-chat-layout{grid-template-columns:300px minmax(0,1fr)}.cc-customer-panel{display:none}.cc-admin-agents{left:18px}.cc-chat-stats{min-height:72px}.cc-chat-stat{min-width:145px}}
@media(max-width:760px){body.messages-mode{overflow:auto!important}.cc-workspace-shell{height:auto;min-height:100vh}.cc-workspace-topbar{padding:0 8px}.cc-topbar-search{width:100%;max-width:none}.cc-topbar-user .elmujib-messages-user{display:none}.cc-chat-layout{display:block;overflow:visible}.cc-contacts-column{height:36vh;border-right:0!important;border-bottom:1px solid #e7ebf2!important}.cc-chat-column{height:58vh}.cc-chat-stats{position:sticky;bottom:0;z-index:15}.cc-chat-stat{min-width:145px}.cc-api-status,.cc-admin-agents{display:none!important}}
.admin-reports-wrap .report-kpi-grid{grid-template-columns:repeat(6,minmax(120px,1fr))}
@media(max-width:1200px){.admin-reports-wrap .report-kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.admin-reports-wrap .report-kpi-grid{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   V6 — Wells clean RTL workspace
   ========================================================= */
html,body{font-family:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif!important}
body.messages-mode #appShell{margin-left:0!important;margin-right:0!important;width:100%!important}
body.messages-mode .sidebar-nav{left:18px!important;right:auto!important;top:78px!important;height:calc(100vh - 96px)!important;width:300px!important;background:#fff!important;color:#0f172a!important;border:1px solid #e6ebf2!important;border-radius:18px!important;box-shadow:0 24px 60px rgba(15,23,42,.18)!important;transform:translateX(calc(-100% - 40px))!important;transition:transform .22s ease!important;z-index:700!important;overflow:auto!important}
body.messages-mode .sidebar-nav.open{transform:translateX(0)!important}
body.messages-mode .sidebar-header{background:#fff!important;border-bottom:1px solid #eef2f6!important;color:#0f172a!important}
body.messages-mode .sidebar-header-title,body.messages-mode .sidebar-header-sub{color:#0f172a!important}
body.messages-mode .nav-btn{color:#334155!important}
body.messages-mode .nav-btn:hover{background:#f1f5f9!important;color:#0f172a!important}
body.messages-mode .nav-btn.active{background:#eff6ff!important;color:#1d4ed8!important;border-color:#dbeafe!important;box-shadow:none!important}
body.messages-mode .sidebar-close-btn{display:flex!important;background:#f8fafc!important;color:#0f172a!important}
body.messages-mode .sidebar-backdrop{display:none!important}
body.messages-mode .sidebar-backdrop.open{display:block!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,.24)!important;z-index:650!important}

.cc-workspace-shell{background:#f4f7fb!important}
.cc-workspace-topbar{height:76px!important;flex:0 0 76px!important;padding:8px 18px!important;gap:14px!important;direction:ltr!important;box-shadow:0 1px 0 rgba(15,23,42,.05)!important}
.cc-workspace-topbar>*{direction:rtl}
.cc-topbar-brand{display:flex;align-items:center;gap:10px;min-width:220px;direction:ltr!important}
.cc-wells-logo{width:72px;height:52px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}
.cc-topbar-brand>div{line-height:1.15;direction:ltr!important}.cc-topbar-brand strong{display:block;color:#111827;font-size:13px;font-weight:900;letter-spacing:.15px}.cc-topbar-brand span{display:block;color:#64748b;font-size:10px;margin-top:5px}
.cc-topbar-search{margin-left:auto;width:min(330px,28vw)!important;order:3}
.cc-topbar-user{order:4;direction:rtl}
.cc-top-nav-btn{width:38px;height:38px;border:1px solid #e3e8ef;background:#fff;color:#334155;border-radius:10px;display:grid;place-items:center;font-size:16px;cursor:pointer;transition:.15s}.cc-top-nav-btn:hover{background:#f8fafc;color:#2563eb;border-color:#cbd5e1}
.cc-admin-top-kpis{display:grid;grid-template-columns:repeat(6,minmax(86px,1fr));gap:7px;flex:1;max-width:670px;direction:rtl!important}
.cc-admin-top-kpis.hidden{display:none!important}.cc-admin-top-kpis>div{background:#f8fafc;border:1px solid #e7ebf2;border-radius:12px;padding:7px 9px;min-width:0}.cc-admin-top-kpis span{display:block;font-size:9px;color:#7b8798;white-space:nowrap}.cc-admin-top-kpis b{display:block;font-size:16px;color:#111827;margin-top:1px;white-space:nowrap}
.cc-api-status{top:82px!important;right:372px!important;z-index:25!important}
.cc-admin-agents{top:82px!important;left:18px!important;z-index:25!important;max-width:44vw!important}

.cc-chat-layout{position:relative!important;direction:ltr!important;grid-template-columns:minmax(0,1fr) 350px!important;background:#fff!important}
.cc-chat-layout>*{direction:rtl!important}
.cc-contacts-column{grid-column:2!important;grid-row:1!important;border-right:1px solid #e7ebf2!important;border-left:0!important;padding:14px 12px 10px!important}
.cc-chat-column{grid-column:1!important;grid-row:1!important;background:#f2f6fa!important;min-width:0!important}
.cc-contacts-head>div strong::before{content:'العملاء';font-size:20px}.cc-contacts-head>div strong{font-size:0!important}.cc-contacts-head>div small{display:none!important}
.cc-customer-panel{position:absolute!important;left:14px!important;top:14px!important;bottom:14px!important;width:350px!important;z-index:510!important;background:#fff!important;border:1px solid #e5eaf1!important;border-radius:18px!important;padding:14px!important;box-shadow:0 24px 65px rgba(15,23,42,.18)!important;transform:translateX(calc(-100% - 35px))!important;opacity:0!important;pointer-events:none!important;transition:transform .24s ease,opacity .2s ease!important;overflow-y:auto!important}
.cc-customer-panel.open{transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important}
.cc-customer-drawer-backdrop{position:absolute;inset:0;z-index:500;background:rgba(15,23,42,.17);opacity:0;pointer-events:none;transition:.2s}.cc-customer-drawer-backdrop.open{opacity:1;pointer-events:auto}
.cc-customer-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:3px 2px 11px;border-bottom:1px solid #eef2f6;margin-bottom:10px}.cc-customer-drawer-head strong{font-size:17px;color:#111827}.cc-customer-drawer-head button{width:34px;height:34px;border:1px solid #e6eaf0;background:#f8fafc;border-radius:10px;font-size:20px;cursor:pointer;color:#475569}
.cc-info-btn{width:36px;height:36px;border-radius:50%;border:0;background:#2563eb;color:#fff;font-family:Georgia,serif;font-weight:800;font-size:17px;cursor:pointer;box-shadow:0 5px 14px rgba(37,99,235,.22)}
.cc-info-btn:hover{background:#1d4ed8;transform:translateY(-1px)}
.cc-chat-actions{margin-right:auto!important;margin-left:0!important}
.cc-chat-thread{padding:20px clamp(14px,2.6vw,42px)!important}
.cc-message-bubble{font-family:"Cairo",sans-serif!important;font-size:13px;line-height:1.75!important}
.elmujib-contact-name,.cc-chat-person strong,.cc-customer-profile strong{font-family:"Cairo",sans-serif!important;font-weight:700!important}
.cc-composer{padding:10px 14px!important}.elmujib-mic-btn{font-size:19px!important}.elmujib-mic-btn.recording{box-shadow:0 0 0 5px rgba(220,38,38,.11)!important}

/* user home: only the three personal KPIs */
.cc-user-mode #dashboardHome .home-hero,.cc-user-mode #dashboardHome #homeKpis,.cc-user-mode #dashboardHome .home-grid{display:none!important}
.cc-user-mode #dashboardHome .home-performance-panel{margin-top:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.cc-user-mode #dashboardHome .home-performance-panel>.home-panel-head{display:none!important}
.cc-user-home-kpis{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:14px;max-width:900px;margin:60px auto}.cc-user-home-kpis>div{background:#fff;border:1px solid #e7ebf2;border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.cc-user-home-kpis span{display:block;color:#64748b;font-size:13px}.cc-user-home-kpis b{display:block;color:#0f172a;font-size:28px;margin-top:8px}
.cc-user-mode .cc-customer-tabs{display:flex!important}.cc-user-mode .cc-customer-panel{width:310px!important}.cc-user-mode .cc-customer-meta-grid>div:nth-child(3),.cc-user-mode .cc-customer-meta-grid>div:nth-child(4){display:none!important}.cc-user-mode .cc-customer-section:not(.admin-only-customer){display:block!important}.cc-user-mode .cc-customer-profile{margin-top:8px!important}

@media(max-width:1250px){.cc-admin-top-kpis{grid-template-columns:repeat(3,minmax(78px,1fr));max-width:360px}.cc-workspace-topbar{height:88px!important;flex-basis:88px!important}.cc-api-status,.cc-admin-agents{top:94px!important}.cc-chat-layout{grid-template-columns:minmax(0,1fr) 320px!important}.cc-topbar-brand{min-width:180px}.cc-wells-logo{width:58px}}
@media(max-width:900px){.cc-admin-top-kpis{display:none!important}.cc-topbar-brand>div{display:none}.cc-topbar-brand{min-width:auto}.cc-wells-logo{width:58px}.cc-chat-layout{grid-template-columns:minmax(0,1fr) 290px!important}.cc-topbar-search{width:min(280px,34vw)!important}.cc-admin-agents,.cc-api-status{display:none!important}}
@media(max-width:720px){body.messages-mode{overflow:hidden!important}.cc-workspace-topbar{height:64px!important;flex-basis:64px!important;padding:6px 8px!important}.cc-topbar-brand{display:none}.cc-topbar-search{width:100%!important;order:1}.cc-topbar-user{order:2}.cc-topbar-user .elmujib-messages-user{display:none!important}.cc-top-nav-btn.cc-admin-stat{display:none!important}.cc-chat-layout{display:flex!important;flex-direction:column!important}.cc-contacts-column{height:33vh!important;order:1!important;border-bottom:1px solid #e7ebf2!important}.cc-chat-column{height:calc(67vh - 64px)!important;order:2!important}.cc-customer-panel{position:fixed!important;left:8px!important;right:8px!important;top:74px!important;bottom:8px!important;width:auto!important;transform:translateY(105%)!important}.cc-customer-panel.open{transform:translateY(0)!important}.cc-customer-drawer-backdrop{position:fixed!important;inset:64px 0 0!important}.cc-user-home-kpis{grid-template-columns:1fr;margin:20px auto}}


/* ===== V7 stability + header cleanup ===== */
.cc-api-status.cc-status-hidden{display:none!important}
/* Online agents now occupies a real row, never floats over chat content */
.cc-admin-agents{position:static!important;top:auto!important;left:auto!important;right:auto!important;z-index:auto!important;max-width:none!important;margin:7px 16px 5px!important;min-height:38px;display:none!important;align-items:center;gap:8px;box-shadow:none!important;background:#fff!important;border:1px solid #e8edf4!important}
.cc-admin-agents.show{display:flex!important}
.cc-admin-agents>strong{white-space:nowrap;font-size:12px;color:#334155}
.cc-admin-agents .cc-agent-list{display:flex;align-items:center;gap:6px;overflow-x:auto;flex-wrap:nowrap;min-width:0;padding-bottom:1px}
.elmujib-agent-chip{white-space:nowrap}
.cc-top-user-menu{position:relative;flex:none}
.cc-top-user-trigger{appearance:none;font:inherit;cursor:pointer;text-align:inherit}
.cc-user-caret{font-size:14px;color:#64748b;transition:transform .18s ease;margin-inline-start:3px}
.cc-top-user-menu.open .cc-user-caret{transform:rotate(180deg)}
.cc-top-user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 14px 38px rgba(15,23,42,.14);padding:6px;z-index:120;display:none}
.cc-top-user-menu.open .cc-top-user-dropdown{display:block}
.cc-top-user-dropdown button{width:100%;border:0;background:transparent;border-radius:9px;padding:10px 12px;text-align:right;font-family:inherit;font-size:13px;font-weight:700;color:#b91c1c;cursor:pointer}
.cc-top-user-dropdown button:hover{background:#fef2f2}
/* Preserve chat height after moving online row into normal flow */
.cc-workspace-shell:has(.cc-admin-agents.show) .cc-chat-layout{min-height:0}
@media(max-width:900px){.cc-admin-agents.show{display:none!important}}
\n\n/* ===== V8 multi-account + collision-proof workspace ===== */\n.cc-workspace-shell{display:flex!important;flex-direction:column!important;height:100vh!important;min-height:0!important;overflow:hidden!important}\n.cc-workspace-topbar{height:auto!important;min-height:78px!important;flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(210px,auto) minmax(280px,1fr) auto!important;grid-template-areas:"brand search user" "kpis kpis kpis"!important;align-items:center!important;gap:8px 14px!important;padding:8px 16px!important;background:#fff!important;overflow:visible!important}\n.cc-topbar-brand{grid-area:brand!important;min-width:0!important}.cc-topbar-search{grid-area:search!important;margin:0!important;width:100%!important;max-width:520px!important;justify-self:center!important;min-width:0!important}.cc-topbar-user{grid-area:user!important;min-width:0!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:7px!important}.cc-admin-top-kpis{grid-area:kpis!important;display:grid!important;grid-template-columns:repeat(6,minmax(92px,1fr))!important;max-width:none!important;width:100%!important;gap:7px!important}.cc-admin-top-kpis.hidden{display:none!important}\n.cc-admin-agents{flex:0 0 auto!important;margin:6px 14px!important;width:auto!important;overflow:hidden!important}.cc-admin-agents .cc-agent-list{max-width:100%!important}\n.cc-chat-layout{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important;grid-template-columns:minmax(0,1fr) minmax(300px,350px)!important}.cc-contacts-column,.cc-chat-column{min-height:0!important;overflow:hidden!important}.elmujib-contacts-list{min-height:0!important;overflow-y:auto!important}.cc-chat-thread{min-height:0!important;overflow-y:auto!important}.cc-composer{flex:0 0 auto!important}\n.cc-source-badge{display:inline-flex;align-items:center;max-width:105px;margin-inline-start:6px;padding:2px 6px;border-radius:999px;background:#eef6ff;color:#2563eb;font-size:9px;font-weight:800;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid #dbeafe}\n.cc-customer-panel{max-width:calc(100vw - 28px)!important}\n@media(max-width:1450px){.cc-workspace-topbar{grid-template-columns:minmax(160px,auto) minmax(220px,1fr) auto!important}.cc-admin-top-kpis{grid-template-columns:repeat(3,minmax(90px,1fr))!important}.cc-topbar-brand>div{display:none!important}.cc-topbar-brand{min-width:78px!important}.cc-wells-logo{width:70px!important}}\n@media(max-width:1050px){.cc-workspace-topbar{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"search user" "kpis kpis"!important}.cc-topbar-brand{display:none!important}.cc-admin-top-kpis{grid-template-columns:repeat(3,minmax(80px,1fr))!important}.cc-chat-layout{grid-template-columns:minmax(0,1fr) minmax(275px,310px)!important}}\n@media(max-width:760px){.cc-workspace-topbar{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"search user"!important;min-height:64px!important}.cc-admin-top-kpis{display:none!important}.cc-topbar-user .cc-top-nav-btn.cc-admin-stat{display:none!important}.cc-chat-layout{display:flex!important;flex-direction:column!important;overflow:hidden!important}.cc-contacts-column{height:35vh!important;flex:0 0 35vh!important}.cc-chat-column{height:auto!important;flex:1 1 auto!important}.cc-admin-agents{display:none!important}}\n

/* ===== V9 clean header: one search only + admin-only KPIs ===== */
.cc-workspace-topbar{
  grid-template-columns:minmax(210px,auto) minmax(0,1fr) auto!important;
  grid-template-areas:"brand kpis user"!important;
  align-items:center!important;
  min-height:78px!important;
}
.cc-admin-top-kpis{grid-area:kpis!important;min-width:0!important}
.cc-user-mode .cc-admin-top-kpis{display:none!important}
.cc-admin-mode .cc-admin-top-kpis:not(.hidden){display:grid!important}
.cc-topbar-search{display:none!important}
#elmujibApiStatus,.cc-api-status{display:none!important}
.cc-source-badge{max-width:150px!important;font-size:10px!important;padding:2px 7px!important}
.elmujib-contact-phone{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:wrap!important}
@media(max-width:1050px){
  .cc-workspace-topbar{grid-template-columns:minmax(120px,auto) minmax(0,1fr) auto!important;grid-template-areas:"brand kpis user"!important}
  .cc-admin-top-kpis{grid-template-columns:repeat(3,minmax(78px,1fr))!important}
}
@media(max-width:760px){
  .cc-workspace-topbar{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand user"!important}
  .cc-admin-top-kpis{display:none!important}
}


/* ===== V10: El Mujib source account inside every chat bubble ===== */
.cc-message-meta{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex-wrap:wrap!important}
.cc-message-account{display:inline-flex;align-items:center;max-width:170px;padding:1px 6px;border-radius:999px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.14);color:#2563eb;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-message-row.outbound .cc-message-account{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24);color:inherit}


/* ===== V11: El Mujib account label only beside customer name in the list ===== */
.elmujib-contact-title-row{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;direction:rtl!important}
.elmujib-contact-title-row .elmujib-contact-name{display:inline-block!important;flex:0 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.elmujib-contact-title-row .cc-source-badge{flex:0 0 auto!important;margin:0!important;max-width:145px!important}
.elmujib-contact-phone{display:block!important;direction:ltr!important;text-align:right!important}


/* ===== V15 close-chat + customer-info fixes ===== */
/* V14 inherited an older responsive rule that set the customer drawer to display:none below 1050px.
   The drawer is already off-canvas via opacity/transform/pointer-events, so it must remain rendered. */
.cc-customer-panel{display:block!important;}


/* ===== V18 customer DB binding + working info drawer + live elapsed time ===== */
.cc-chat-subline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:18px}
.cc-chat-subline #elmujibSelectedPhone{direction:ltr!important;text-align:right!important}
.cc-selected-elapsed,.cc-contact-elapsed{direction:rtl!important;unicode-bidi:isolate;display:inline-flex;align-items:center;white-space:nowrap;font-size:10px!important;font-weight:800!important;color:#64748b!important}
.cc-selected-elapsed::before,.cc-contact-elapsed::before{content:'•';margin:0 2px;color:#94a3b8;font-weight:900}
.elmujib-contact-phone{display:flex!important;align-items:center!important;gap:5px!important;direction:rtl!important;text-align:right!important;flex-wrap:wrap!important}
.elmujib-contact-phone>bdi{direction:ltr!important;unicode-bidi:isolate;color:#64748b}
/* Make the info drawer independent from chat-layout clipping. */
.cc-customer-panel{position:fixed!important;left:18px!important;right:auto!important;top:92px!important;bottom:18px!important;width:min(360px,calc(100vw - 36px))!important;z-index:1600!important;display:block!important;transform:translateX(calc(-100% - 45px))!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.cc-customer-panel.open{transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.cc-customer-drawer-backdrop{position:fixed!important;inset:0!important;z-index:1590!important;background:rgba(15,23,42,.28)!important}
.cc-info-btn{position:relative!important;z-index:20!important;pointer-events:auto!important}
@media(max-width:720px){
  .cc-customer-panel{left:8px!important;right:8px!important;top:72px!important;bottom:8px!important;width:auto!important;transform:translateY(110%)!important}
  .cc-customer-panel.open{transform:translateY(0)!important}
  .cc-customer-drawer-backdrop{inset:0!important}
}


/* ===== V19 customer code beside customer name ===== */
.cc-chat-name-row{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.cc-chat-name-row #elmujibSelectedName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-customer-code{display:inline-flex!important;align-items:center;flex:0 0 auto;padding:1px 6px;border-radius:6px;background:#f1f5f9;border:1px solid #dbe3ed;color:#475569;font-size:9.5px;font-weight:800;line-height:1.5;white-space:nowrap;direction:rtl;unicode-bidi:isolate}
.cc-customer-code.hidden{display:none!important}
.elmujib-contact-title-row .cc-customer-code{max-width:105px;overflow:hidden;text-overflow:ellipsis}
\n/* ===== V21: live unanswered-chat dashboard ===== */\n.home-waiting-panel{margin-bottom:18px;overflow:hidden}.home-waiting-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.home-waiting-kpi{padding:12px 14px;border:1px solid #e8edf3;border-radius:13px;background:#f8fafc}.home-waiting-kpi span{display:block;color:#64748b;font-size:11px;font-weight:700}.home-waiting-kpi b{display:block;margin-top:5px;font-size:22px;color:#0f172a}.home-waiting-kpi.danger{background:#fff7f7;border-color:#fecaca}.home-waiting-kpi.danger b{color:#b91c1c}.home-waiting-kpi.warning{background:#fffaf0;border-color:#fde68a}.home-waiting-kpi.warning b{color:#b45309}.home-waiting-table-wrap{overflow:auto;border:1px solid #edf1f5;border-radius:13px}.home-waiting-table{width:100%;border-collapse:collapse;min-width:820px}.home-waiting-table th,.home-waiting-table td{padding:10px 11px;border-bottom:1px solid #edf1f5;text-align:right;font-size:12px;vertical-align:middle}.home-waiting-table th{background:#f8fafc;color:#64748b;font-weight:800;position:sticky;top:0;z-index:1}.home-waiting-row{cursor:pointer;transition:.15s}.home-waiting-row:hover{background:#f8fbff}.home-waiting-row:last-child td{border-bottom:0}.home-waiting-customer{display:flex;align-items:center;gap:7px;min-width:150px}.home-waiting-customer b{color:#172033}.home-waiting-customer span{display:inline-flex;padding:2px 7px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:10px;font-weight:800}.home-waiting-agent{display:inline-flex;padding:4px 8px;border-radius:999px;background:#ecfdf5;color:#047857;font-weight:800;white-space:nowrap}.home-waiting-agent.unassigned{background:#fef2f2;color:#b91c1c}.home-waiting-age{color:#b45309;white-space:nowrap}.home-waiting-preview{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#475569}.home-waiting-empty{padding:20px;text-align:center;border:1px dashed #cbd5e1;border-radius:13px;color:#047857;background:#f0fdf4;font-weight:700}.cc-user-mode #dashboardHome .home-waiting-panel{margin-top:0}.cc-user-mode #dashboardHome .home-waiting-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-user-mode #dashboardHome .home-waiting-kpi.neutral{display:none}@media(max-width:700px){.home-waiting-kpis{grid-template-columns:1fr 1fr}.home-waiting-kpi.neutral{grid-column:1/-1}.home-waiting-panel{padding:12px}.home-waiting-preview{max-width:180px}}\n

/* ===== V23 admin-only plain current agent name in chat list ===== */
.cc-agent-name{display:block!important;max-width:100%!important;margin-top:1px!important;color:#344054!important;font-size:10.5px!important;font-weight:700!important;line-height:1.45!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:right!important;direction:rtl!important}
.cc-agent-name.unassigned{color:#b45309!important}
.cc-user-mode .cc-agent-name{display:none!important}
.cc-admin-mode .elmujib-contact{min-height:82px!important}

/* V24 archive search */
.cc-archive-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:10px;font-weight:800;white-space:nowrap;border:1px solid #cbd5e1;}
.elmujib-contact.is-done .cc-archive-badge{background:#f8fafc;color:#64748b;}

/* ===== V26 operations controls ===== */
.cc-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cc-chat-filter-row{padding:8px 10px 4px;border-top:1px solid #eef2f7}
.home-waiting-filters{margin:10px 0 4px}
.cc-compact-filter{min-width:135px;max-width:210px;margin:0;padding:7px 9px;font-size:12px;height:36px}
.elmujib-recording-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;min-width:44px;text-align:center;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:999px;padding:5px 8px;white-space:nowrap}
.cc-close-reason-modal{max-width:430px}
.cc-modal-note{color:#64748b;margin:0 0 14px}
.cc-close-reason-options{display:grid;gap:9px;margin:12px 0 18px}
.cc-close-reason-options label{display:flex;align-items:center;gap:10px;border:1px solid #e2e8f0;border-radius:10px;padding:12px;cursor:pointer;background:#fff;font-weight:700}
.cc-close-reason-options label:hover{border-color:#94a3b8;background:#f8fafc}
.cc-close-reason-options input{width:auto;margin:0}
.qr-admin-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.report-date-field{display:flex;align-items:center;gap:6px;color:#475569;font-size:12px;font-weight:700}
.report-date-field .input{margin:0;min-width:145px}
@media(max-width:720px){
  .cc-filter-row{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .cc-compact-filter{min-width:0;max-width:none;width:100%}
  .reports-controls{align-items:stretch}
  .report-date-field{width:100%;justify-content:space-between}
  .report-date-field .input{flex:1}
}


/* ===== V27 quote navigation + compact filters + close-reason report ===== */
.cc-chat-filter-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:center!important;flex-wrap:nowrap!important}
.cc-chat-filter-row .cc-compact-filter{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
.home-waiting-filters{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}
.home-waiting-filters .cc-compact-filter{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
.cc-message-quote-link{cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .16s ease;outline:none}
.cc-message-quote-link:hover,.cc-message-quote-link:focus{background:#eff6ff!important;box-shadow:0 0 0 2px rgba(37,99,235,.15);transform:translateY(-1px)}
.cc-message-quote-link:after{content:'↥ الأصل';display:inline-block;margin-top:3px;font-size:9px;font-weight:800;color:#2563eb;opacity:.78}
.cc-message-jump-highlight .cc-message-bubble{animation:ccMessageJumpFlash 2.1s ease}
@keyframes ccMessageJumpFlash{0%,100%{box-shadow:0 1px 2px rgba(15,23,42,.06)}12%,55%{box-shadow:0 0 0 4px rgba(37,99,235,.25),0 8px 22px rgba(37,99,235,.16);transform:scale(1.015)}}
.close-reason-report-card{margin-top:18px}.close-reason-kpis{margin:12px 0 16px}.close-report-note{font-size:12px;color:#64748b}
@media(max-width:420px){.cc-chat-filter-row,.home-waiting-filters{grid-template-columns:1fr 1fr!important;gap:6px!important}.cc-compact-filter{font-size:11px!important;padding-inline:6px!important}}

/* =========================================================
   V28 — Customer drawer orders + media history
   ========================================================= */
.cc-customer-tab-pane.hidden{display:none!important}
.cc-customer-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-inline-start:4px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:9px;font-weight:900;vertical-align:middle}
.cc-customer-tab-count.hidden{display:none!important}
.cc-customer-tab-head{padding:10px 2px 8px;border-bottom:1px solid #edf0f4;margin-bottom:10px}
.cc-customer-tab-head h4{margin:0;color:#334155;font-size:12px}
.cc-customer-tab-head span{display:block;margin-top:4px;color:#98a2b3;font-size:9.5px;line-height:1.55}
.cc-customer-tab-empty{padding:26px 12px;text-align:center;color:#94a3b8;background:#f8fafc;border:1px dashed #dbe3ec;border-radius:10px;font-size:10.5px;line-height:1.8}
.cc-customer-tab-empty.error{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.cc-customer-orders-list{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.cc-customer-order-card{border:1px solid #e5eaf1;border-radius:11px;background:#fff;padding:10px;box-shadow:0 2px 8px rgba(15,23,42,.035)}
.cc-customer-order-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.cc-customer-order-top strong{font-size:11.5px;color:#172033}.cc-customer-order-top span{font-size:9.5px;font-weight:800;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:3px 7px}
.cc-customer-order-meta{display:grid;grid-template-columns:1fr;gap:6px}.cc-customer-order-meta>div{display:flex;justify-content:space-between;gap:8px;font-size:9.5px}.cc-customer-order-meta b{color:#98a2b3;font-weight:700}.cc-customer-order-meta span{color:#475569;text-align:left;direction:rtl}
.cc-customer-media-grid{display:grid;grid-template-columns:1fr;gap:9px;padding-bottom:10px}
.cc-customer-media-card{border:1px solid #e5eaf1;border-radius:11px;background:#fff;padding:8px;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.035)}
.cc-customer-media-image-btn{display:block;width:100%;border:0;background:#f8fafc;padding:0;cursor:pointer;border-radius:8px;overflow:hidden}.cc-customer-media-image-btn img{display:block;width:100%;max-height:190px;object-fit:cover}
.cc-customer-media-card audio,.cc-customer-media-card video{display:block;width:100%;max-height:210px}.cc-customer-media-card video{background:#0f172a;border-radius:8px}
.cc-customer-media-file{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:8px;background:#eff6ff;color:#1d4ed8;text-decoration:none;font-size:11px;font-weight:800}
.cc-customer-media-placeholder{display:grid;place-items:center;min-height:62px;border-radius:8px;background:#f8fafc;color:#64748b;font-size:11px}
.cc-customer-media-caption{padding:7px 2px 2px;color:#334155;font-size:10.5px;line-height:1.6;word-break:break-word}.cc-customer-media-meta{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:6px;padding-top:6px;border-top:1px solid #f0f2f5;color:#98a2b3;font-size:8.5px}.cc-customer-media-meta span:last-child{margin-inline-start:auto}

/* V29 performance: keep the large conversations list isolated from the rest of the page. */
#elmujibContactsList{contain:layout paint style}
.elmujib-contact{contain:layout paint style}
.cc-chat-load-more{padding:10px;text-align:center;background:#fff;position:relative;z-index:1}
.cc-chat-load-more .btn{width:100%;justify-content:center}

/* ===== V34 Professional Login Workspace ===== */
.login-page{
  min-height:100vh;
  padding:clamp(18px,4vw,56px);
  background:
    radial-gradient(circle at 82% 12%,rgba(208,167,46,.16),transparent 28%),
    radial-gradient(circle at 12% 88%,rgba(77,92,121,.20),transparent 32%),
    linear-gradient(135deg,#111216 0%,#1b1c21 46%,#111216 100%);
}
.login-page::before{
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.18));
}
.login-orb{filter:blur(80px);opacity:.22;animation-duration:18s}
.login-shell{
  width:min(980px,100%);
  max-width:none;
  min-height:610px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  border-radius:30px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 38px 120px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.08);
}
.login-shell::before{display:none}
.login-brand-panel{
  position:relative;
  overflow:hidden;
  padding:42px 44px 38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  background:
    radial-gradient(circle at 85% 18%,rgba(208,167,46,.18),transparent 32%),
    linear-gradient(145deg,#17171b 0%,#28282e 58%,#17171a 100%);
}
.login-brand-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.035) 49% 50%,transparent 51% 100%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
}
.login-brand-panel::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border:1px solid rgba(208,167,46,.18);
  border-radius:50%;
  left:-115px;
  bottom:-135px;
  box-shadow:0 0 0 34px rgba(208,167,46,.035),0 0 0 72px rgba(208,167,46,.025);
}
.login-brand-lockup,.login-brand-message,.login-brand-features{position:relative;z-index:1}
.login-brand-lockup{display:flex;align-items:center;gap:16px}
.login-brand-lockup .login-logo-wrap{
  width:102px;
  height:76px;
  margin:0;
  padding:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.login-brand-lockup .login-logo-img{max-width:100%;max-height:100%;width:auto;filter:none;object-fit:contain}
.login-brand-copy{display:flex;flex-direction:column;gap:2px;text-align:right}
.login-brand-copy span{color:#d8bb66;font-size:10px;font-weight:800;letter-spacing:1.6px}
.login-brand-copy strong{font-size:14px;font-weight:700;color:#f7f7f8}
.login-brand-message{margin:50px 0 36px;max-width:460px}
.login-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#d7b95e;font-size:10px;font-weight:800;letter-spacing:1.8px;margin-bottom:16px}
.login-eyebrow::before{content:"";width:26px;height:2px;background:#d0a72e;border-radius:99px}
.login-brand-message h1{margin:0 0 18px;font-size:clamp(30px,4vw,46px);line-height:1.25;letter-spacing:-.8px;color:#fff;font-weight:900}
.login-brand-message p{margin:0;color:#c8c9cf;font-size:14px;line-height:1.95;max-width:430px}
.login-brand-features{display:flex;gap:10px;flex-wrap:wrap}
.login-brand-features span{padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);font-size:9.5px;font-weight:700;color:#d8d9de;letter-spacing:.35px}
.login-brand-features span::first-letter{color:#d0a72e}
.login-form-panel{
  padding:58px 48px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%);
  border-right:1px solid #ececf0;
}
.login-form-head{margin-bottom:30px}
.login-secure-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#f6f1e4;color:#947522;font-size:9px;font-weight:800;letter-spacing:.9px;margin-bottom:18px}
.login-title{text-align:right;margin:0}
.login-title h2{margin:0;color:#17171a;font-size:30px;line-height:1.3;font-weight:900;letter-spacing:-.35px}
.login-title p{margin:7px 0 0;color:#858895;font-size:12.5px;line-height:1.7;font-weight:600;letter-spacing:0}
.login-field-label{display:block;margin:0 2px 8px;color:#3d404a;font-size:12px;font-weight:800}
.login-input-group{margin-bottom:18px}
.login-input-group .input{
  height:50px;
  padding:0 46px 0 14px;
  margin:0;
  color:#18191d;
  background:#f8f8fa;
  border:1px solid #e2e3e8;
  border-radius:13px;
  font-size:14px;
  font-weight:600;
  box-shadow:none;
}
.login-input-group .input::placeholder{color:#b0b3bc;font-weight:500}
.login-input-group .input:focus{background:#fff;border-color:#c8a44a;box-shadow:0 0 0 4px rgba(208,167,46,.12);transform:none}
.login-icon{right:15px;font-size:16px;color:#9b9da5;filter:grayscale(1)}
.login-input-group .input:focus~.login-icon{color:#af8927;filter:none}
.login-btn{
  width:100%;
  min-height:50px;
  margin-top:5px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#24242a,#111114);
  box-shadow:0 12px 26px rgba(20,20,24,.22);
  font-size:14px;
  font-weight:800;
}
.login-btn b{font-size:18px;line-height:1;transition:transform .18s ease}
.login-btn:hover{background:linear-gradient(135deg,#33333b,#17171b);transform:translateY(-1px);box-shadow:0 16px 30px rgba(20,20,24,.28)}
.login-btn:hover b{transform:translateX(-3px)}
.login-btn:disabled{opacity:.7;cursor:wait;transform:none}
.login-btn.is-loading span::after{content:"…"}
.login-footer{margin-top:19px;padding-top:16px;border-top:1px solid #eceef2;color:#9a9da6;font-size:10.5px;gap:7px}
.login-loading{padding:34px 0;color:#7f828c;font-size:12px;font-weight:600}
.login-loading .spinner{width:34px;height:34px;border-width:3px;border-color:#ececf0;border-top-color:#c6a044;margin-bottom:12px}
@media(max-width:800px){
  .login-page{padding:16px}
  .login-shell{grid-template-columns:1fr;max-width:480px;min-height:auto;border-radius:24px}
  .login-brand-panel{padding:24px 24px 22px;min-height:220px}
  .login-brand-message{margin:28px 0 22px}
  .login-brand-message h1{font-size:29px}
  .login-brand-message p{font-size:12.5px;line-height:1.75}
  .login-brand-features{display:none}
  .login-form-panel{padding:32px 24px 28px;border-right:0;border-top:1px solid #ececf0}
  .login-title h2{font-size:25px}
}
@media(max-width:430px){
  .login-brand-panel{padding:20px}
  .login-brand-lockup .login-logo-wrap{width:88px;height:64px;border-radius:15px}
  .login-brand-message h1{font-size:25px}
  .login-form-panel{padding:28px 20px 24px}
}

/* ===== V37 Unified Professional Workspace: matches premium login language ===== */
:root{
  --v37-charcoal:#17171b;
  --v37-charcoal-2:#24242a;
  --v37-charcoal-3:#303039;
  --v37-gold:#d0a72e;
  --v37-gold-soft:#f6f1e4;
  --v37-paper:#f6f7f9;
  --v37-line:#e5e7eb;
  --v37-text:#1f2430;
  --v37-muted:#7d8390;
}
body:not(:has(.login-page:not(.hidden))){
  background:
    radial-gradient(circle at 88% 0%,rgba(208,167,46,.08),transparent 26%),
    linear-gradient(180deg,#eceff3 0%,#f7f8fa 55%,#eef1f5 100%);
}
#dashboard{max-width:1600px;margin:0 auto}
.brand-bar{
  background:linear-gradient(145deg,#17171b,#292a30)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 18px 44px rgba(17,18,22,.20)!important;
  min-height:76px;
}
.brand-bar::before{background:linear-gradient(90deg,transparent,#d0a72e,transparent)!important}
.brand-logo-img{background:#fff;border-radius:13px;padding:5px;max-height:46px!important;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.brand-bar-title{color:#fff!important;font-size:15px!important}.brand-bar-sub{color:#c9c9ce!important;letter-spacing:.8px}
.topbar{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(31,36,48,.06)!important;
  box-shadow:0 10px 32px rgba(31,36,48,.08)!important;
}
.topbar-menu-btn{background:linear-gradient(145deg,#2c2c32,#17171b)!important;box-shadow:0 7px 18px rgba(20,20,24,.20)!important}
.topbar-menu-btn:hover{background:linear-gradient(145deg,#393941,#202025)!important}
.topbar-title{color:#23252b!important;font-size:14px!important}
.prof-user-bar{display:none!important}
.sidebar-nav{
  background:linear-gradient(180deg,#17171b 0%,#202126 100%)!important;
  border-left:1px solid rgba(255,255,255,.07)!important;
  box-shadow:-22px 0 65px rgba(10,10,13,.32)!important;
}
.sidebar-header{background:transparent!important;padding:22px 17px!important;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-header::before{background:linear-gradient(90deg,transparent,#d0a72e,transparent)!important}
.sidebar-logo-img{background:#fff;border-radius:12px;padding:5px;height:42px!important}
.sidebar-header-title{font-size:14px!important}.sidebar-header-sub{color:#d2b75f!important;letter-spacing:.8px}
.sidebar-close-btn{background:rgba(255,255,255,.07)!important}
.nav{padding:16px 12px 24px!important}
.nav-group-label{color:#8e9098!important;letter-spacing:1px!important}.nav-group-label::after{background:rgba(255,255,255,.08)!important}
.nav-group-body{max-height:1000px!important}
.nav-btn{color:#d2d3d8!important;border-color:transparent!important;padding:12px 13px!important;border-radius:11px!important}
.nav-btn:hover{background:rgba(255,255,255,.065)!important;color:#fff!important}
.nav-btn.active{
  background:linear-gradient(135deg,rgba(208,167,46,.22),rgba(208,167,46,.08))!important;
  border:1px solid rgba(208,167,46,.32)!important;
  color:#f5e7b7!important;
  box-shadow:inset 3px 0 0 #d0a72e,0 8px 18px rgba(0,0,0,.10)!important;
}
.nav-icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:7px;background:rgba(255,255,255,.06);font-size:12px}
.nav-btn.active .nav-icon{background:rgba(208,167,46,.18);color:#f4d578}
.nav-account-group{border-top:1px solid rgba(255,255,255,.08)!important}.nav-btn.nav-btn-danger{color:#fca5a5!important}.nav-btn.nav-btn-danger:hover{background:rgba(239,68,68,.10)!important}
.sidebar-backdrop{background:rgba(10,10,13,.56)!important;backdrop-filter:blur(2px)}

.cc-workspace-shell,.reports-hero,.report-card,.home-panel,.users-panel{
  border:1px solid rgba(31,36,48,.07)!important;
  box-shadow:0 18px 48px rgba(31,36,48,.08)!important;
}
.cc-workspace-shell{border-radius:22px!important;overflow:hidden;background:#fff!important}
.cc-workspace-topbar{
  background:
    radial-gradient(circle at 82% 10%,rgba(208,167,46,.14),transparent 25%),
    linear-gradient(145deg,#18181c,#282930)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  min-height:74px!important;
}
.cc-workspace-topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#d0a72e,transparent);opacity:.75}
.cc-topbar-brand strong,.cc-topbar-brand span{color:#fff!important}.cc-topbar-brand span{color:#c6c6cb!important}
.cc-wells-logo{background:#fff!important;border-radius:11px!important;padding:4px!important;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.cc-admin-top-kpis>div{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
.cc-admin-top-kpis span{color:#aeb0b8!important}.cc-admin-top-kpis b{color:#f4d475!important}
.cc-top-nav-btn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.09)!important;color:#fff!important}.cc-top-nav-btn:hover{background:rgba(208,167,46,.14)!important;border-color:rgba(208,167,46,.30)!important}
.elmujib-availability-switch{border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.07)!important;color:#f1f1f3!important}
.cc-top-user-trigger{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.08)!important}.elmujib-messages-user-name{color:#fff!important}.elmujib-messages-user-role{color:#b8bac2!important}
.elmujib-messages-user-avatar{background:linear-gradient(145deg,#d8ba5e,#ac8420)!important;color:#19191d!important;box-shadow:0 5px 14px rgba(0,0,0,.20)}
.cc-admin-agents{background:#fbfbfc!important;border-bottom:1px solid #eceef2!important}
.cc-agent-list .agent-chip{border-radius:999px!important}
.cc-contacts-column{background:#fbfbfc!important;border-left:1px solid #eaedf1!important}
.cc-contacts-head{background:#fff!important;border-bottom:1px solid #edf0f3!important}
.cc-contacts-head strong{color:#22252c!important}.cc-contacts-head small{color:#8a8f99!important}
.elmujib-search-wrap{background:#fff!important;border:1px solid #e3e5e9!important;border-radius:12px!important;box-shadow:0 2px 10px rgba(31,36,48,.03)!important}
.elmujib-search-input{background:transparent!important}
.elmujib-filter-tab.active{background:#25262c!important;color:#fff!important;border-color:#25262c!important;box-shadow:0 5px 12px rgba(31,31,36,.12)!important}
.elmujib-contact{border-radius:13px!important;margin:5px 7px!important;border:1px solid transparent!important}
.elmujib-contact:hover{background:#fff!important;border-color:#e4e7eb!important;box-shadow:0 7px 20px rgba(31,36,48,.055)!important}
.elmujib-contact.active{background:#fff!important;border-color:rgba(208,167,46,.35)!important;box-shadow:0 8px 24px rgba(31,36,48,.08)!important;position:relative}
.elmujib-contact.active::before{content:"";position:absolute;right:0;top:12px;bottom:12px;width:3px;border-radius:99px;background:#d0a72e}
.cc-chat-head{background:#fff!important;border-bottom:1px solid #ebedf1!important}.cc-chat-avatar{background:#f3eedf!important;color:#8a6a18!important;border:1px solid #e6d9ad!important}
.cc-chat-thread{background:linear-gradient(180deg,#f3f4f6 0%,#f8f8f9 100%)!important}
.elmujib-message.outgoing .elmujib-bubble,.elmujib-msg.outgoing .elmujib-message-bubble{background:linear-gradient(145deg,#27282d,#1d1e22)!important;color:#fff!important}
.elmujib-compose{background:#fff!important;border-top:1px solid #e9ebef!important}
.elmujib-compose textarea{background:#f7f7f8!important;border:1px solid #e2e3e7!important;border-radius:13px!important}.elmujib-compose textarea:focus{border-color:#cba43c!important;box-shadow:0 0 0 4px rgba(208,167,46,.10)!important}

.reports-hero{
  background:radial-gradient(circle at 86% 16%,rgba(208,167,46,.16),transparent 28%),linear-gradient(145deg,#18181c,#292a31)!important;
  color:#fff!important;border-radius:22px!important;overflow:hidden;position:relative
}
.reports-hero h2,.reports-hero p{color:#fff!important}.reports-hero p{color:#c6c8ce!important}.reports-kicker{color:#d8bb66!important}
.report-card,.home-panel{border-radius:18px!important;background:#fff!important}.report-card-head h3{color:#24272e!important}
.report-kpi{border-radius:16px!important;border:1px solid #e8ebef!important;box-shadow:0 8px 24px rgba(31,36,48,.045)!important}.report-kpi b{color:#24262c!important}
.report-table thead th{background:#f5f5f7!important;color:#555a64!important;border-bottom:1px solid #e5e7eb!important}.report-table tbody tr:hover{background:#fbf8ef!important}

/* ===== V37 Users & permissions ===== */
.admin-users-wrap{max-width:1440px;margin:0 auto 30px}
.users-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 32px;margin-bottom:18px;border-radius:22px;color:#fff;background:radial-gradient(circle at 82% 18%,rgba(208,167,46,.16),transparent 30%),linear-gradient(145deg,#17171b,#2b2c33);box-shadow:0 20px 50px rgba(25,25,30,.18);border:1px solid rgba(255,255,255,.06)}
.users-kicker{display:block;color:#d8bb66;font-size:10px;font-weight:900;letter-spacing:1.7px;margin-bottom:7px}.users-hero h2{margin:0 0 7px;font-size:26px;line-height:1.3}.users-hero p{margin:0;color:#c9cbd1;font-size:12px;line-height:1.7}.users-hero-actions{display:flex;gap:9px;flex-wrap:wrap}.users-hero .btn-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)}.users-add-btn{background:linear-gradient(135deg,#d3ad42,#ad8422)!important;color:#17171b!important;box-shadow:0 10px 24px rgba(208,167,46,.18)!important}
.users-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.users-summary-card{background:#fff;border:1px solid #e7e9ed;border-radius:16px;padding:17px 18px;box-shadow:0 9px 26px rgba(31,36,48,.045);position:relative;overflow:hidden}.users-summary-card::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:#d0a72e}.users-summary-card span{display:block;color:#777d88;font-size:10.5px;font-weight:700}.users-summary-card b{display:block;color:#202329;font-size:27px;line-height:1.2;margin:6px 0 2px}.users-summary-card small{color:#a0a4ad;font-size:9.5px}
.users-panel{background:#fff;border-radius:20px;padding:20px}.users-panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:3px 2px 16px;border-bottom:1px solid #edf0f3;margin-bottom:16px}.users-panel-head h3{margin:0;color:#24272d;font-size:17px}.users-panel-head>div>span{display:block;color:#8e939d;font-size:10.5px;margin-top:4px}.users-panel-search{width:min(320px,100%);display:flex;align-items:center;gap:8px;background:#f7f8fa;border:1px solid #e4e6ea;border-radius:11px;padding:0 11px}.users-panel-search input{width:100%;border:0;outline:0;background:transparent;height:38px;font:inherit;font-size:12px;color:#292c33}.users-panel-search>span{color:#9da1aa}
.users-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.users-loading,.users-empty{grid-column:1/-1;padding:38px;text-align:center;border:1px dashed #dfe3e8;border-radius:14px;color:#8c919a;background:#fafbfc}.users-loading.error{color:#b42318;background:#fff7f6;border-color:#f4c7c3}
.admin-user-card{border:1px solid #e6e8ec;border-radius:16px;padding:15px;background:linear-gradient(180deg,#fff,#fcfcfd);box-shadow:0 7px 22px rgba(31,36,48,.04);transition:.18s ease}.admin-user-card:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(31,36,48,.08);border-color:#d9dce2}.admin-user-card.is-disabled{opacity:.72;background:#f7f7f8}.admin-user-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.admin-user-identity{display:flex;align-items:center;gap:10px}.admin-user-avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#2d2e34,#19191d);color:#e5c970;font-weight:900;box-shadow:0 6px 15px rgba(20,20,24,.16)}.admin-user-identity strong{display:block;color:#202329;font-size:13px}.admin-user-identity span{display:block;color:#91969f;font-size:9.5px;margin-top:2px}.admin-user-state{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:800}.admin-user-state i{width:6px;height:6px;border-radius:50%}.admin-user-state.online{color:#047857;background:#ecfdf5}.admin-user-state.online i{background:#10b981}.admin-user-state.offline{color:#667085;background:#f2f4f7}.admin-user-state.offline i{background:#98a2b3}.admin-user-state.disabled{color:#b42318;background:#fef3f2}.admin-user-state.disabled i{background:#ef4444}
.admin-user-permissions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0}.admin-user-permissions>div{padding:9px;border-radius:10px;background:#f7f8fa;border:1px solid #eef0f3}.admin-user-permissions>div.wide{grid-column:1/-1}.admin-user-permissions span{display:block;color:#969aa3;font-size:8.5px}.admin-user-permissions b{display:block;color:#3d4149;font-size:10px;margin-top:2px;line-height:1.5}.admin-user-card-actions{display:flex;gap:7px;padding-top:11px;border-top:1px solid #f0f1f3}.admin-user-card-actions .btn-primary{background:#28292f!important;box-shadow:none!important}.admin-user-card-actions .btn{font-size:10px!important;padding:7px 10px!important}
.admin-user-modal-box{width:min(680px,94vw)!important;max-height:88vh;overflow:auto;border-radius:22px!important;padding:0!important;background:#fff!important;box-shadow:0 32px 90px rgba(15,15,18,.34)!important}.admin-user-modal-head{padding:20px 22px!important;margin:0!important;background:radial-gradient(circle at 88% 0,rgba(208,167,46,.17),transparent 30%),linear-gradient(145deg,#18181c,#2b2c33);border-bottom:0!important}.admin-user-modal-head h3{margin:0;color:#fff!important;font-size:19px}.admin-user-modal-head .users-kicker{margin-bottom:3px}.admin-user-modal-head .modal-close{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}.admin-user-modal-box>div:not(.admin-user-modal-head),.admin-user-modal-box>label,.admin-user-modal-box>input{margin-left:22px;margin-right:22px}.admin-user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.admin-user-password-note{font-size:9px;color:#9da1aa;font-weight:500;margin-right:5px}.permission-block{padding:14px;margin-top:13px!important;border-radius:14px;background:#fafbfc;border:1px solid #e9ebef}.permission-block-head{margin:0 0 10px!important}.permission-block-head strong{display:block;color:#33363d;font-size:12px}.permission-block-head span{display:block;color:#999da6;font-size:9.5px;margin-top:3px}.permission-toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.permission-toggle-card{display:flex;align-items:center;gap:9px;padding:11px;background:#fff;border:1px solid #e8eaee;border-radius:11px;cursor:pointer}.permission-toggle-card>input{display:none}.permission-toggle-ui{width:34px;height:19px;border-radius:999px;background:#d4d7dc;position:relative;flex:0 0 auto;transition:.18s}.permission-toggle-ui::after{content:"";position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.20);transition:.18s}.permission-toggle-card>input:checked+.permission-toggle-ui{background:#c69d2b}.permission-toggle-card>input:checked+.permission-toggle-ui::after{right:18px}.permission-toggle-card b{display:block;color:#3b3e45;font-size:10.5px}.permission-toggle-card small{display:block;color:#9a9ea7;font-size:8.5px;line-height:1.5;margin-top:2px}.permission-all-row{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px;background:#f4f0e4;color:#725a18;font-size:10.5px;font-weight:800;margin:0 0 9px!important}.permission-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.permission-account-grid .radio-item{display:flex;align-items:center;gap:6px;padding:9px;background:#fff;border:1px solid #e7e9ed;border-radius:9px;color:#4b4f57;font-size:10px}.admin-user-status-box{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px!important;padding:10px 12px;background:#f6f7f9;border:1px solid #e7e9ed;border-radius:11px;color:#6d727c;font-size:10px}.admin-user-status-box b{color:#292c33}.admin-user-modal-actions{padding:16px 22px 20px;margin:0!important;border-top:1px solid #eef0f3}.admin-user-modal-actions .btn-primary{background:linear-gradient(145deg,#292a30,#18181c)!important}.admin-user-modal-actions .btn-danger{margin-right:auto}

@media(max-width:1100px){.users-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.users-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  body{padding:8px!important}.brand-bar{border-radius:15px!important;min-height:62px}.topbar{border-radius:13px!important}.cc-workspace-shell{border-radius:15px!important}
  .users-hero{align-items:flex-start;flex-direction:column;padding:22px;border-radius:17px}.users-hero h2{font-size:21px}.users-hero-actions{width:100%}.users-hero-actions .btn{flex:1}.users-summary-grid{grid-template-columns:1fr 1fr;gap:8px}.users-summary-card{padding:13px}.users-summary-card b{font-size:23px}.users-panel{padding:12px}.users-panel-head{align-items:stretch;flex-direction:column}.users-panel-search{width:100%}.users-grid{grid-template-columns:1fr}.admin-user-form-grid,.permission-toggle-row,.permission-account-grid{grid-template-columns:1fr}.admin-user-modal-box{width:96vw!important}.admin-user-modal-box>div:not(.admin-user-modal-head),.admin-user-modal-box>label,.admin-user-modal-box>input{margin-left:14px;margin-right:14px}.admin-user-modal-actions{padding:14px!important;flex-wrap:wrap}.admin-user-modal-actions .btn{flex:1}.admin-user-modal-actions .btn-danger{margin-right:0}
}

/* ===== V38 queue / permissions / close reasons ===== */
.elmujib-contacts-list{gap:6px!important;padding:2px 4px 8px!important}
.elmujib-contact{
  min-height:94px!important;margin:0!important;padding:11px 52px 10px 12px!important;
  border:1px solid #eceef1!important;border-radius:14px!important;background:#fff!important;
  box-shadow:0 3px 12px rgba(31,36,48,.025)!important;contain:layout paint style;
}
.elmujib-contact:hover{background:#fff!important;border-color:#dfe2e7!important;box-shadow:0 8px 22px rgba(31,36,48,.065)!important;transform:translateY(-1px)}
.elmujib-contact.active{background:#fffdf8!important;border-color:rgba(208,167,46,.42)!important;box-shadow:0 9px 24px rgba(31,36,48,.08)!important}
.elmujib-contact.active::before{right:0!important;top:11px!important;bottom:11px!important;background:#d0a72e!important}
.elmujib-contact.needs-reply{background:#f9fdfb!important;border-color:#dff0e7!important}
.elmujib-contact.is-done{opacity:.72;background:#fafafa!important}
.cc-contact-avatar{position:absolute!important;right:10px!important;top:13px!important;float:none!important;margin:0!important;width:34px!important;height:34px!important;font-size:12px!important}
.cc-contact-main{display:block!important;overflow:hidden!important;min-width:0!important;padding-left:45px!important}
.elmujib-contact-title-row{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;direction:rtl!important;padding-top:1px}
.elmujib-contact-name{font-size:13px!important;line-height:1.55!important;font-weight:800!important;color:#202329!important;padding-left:0!important;min-width:0!important}
.cc-customer-code{font-size:9.5px!important;font-weight:800!important;color:#586070!important;background:#f3f5f7!important;border:1px solid #e0e4e9!important;border-radius:7px!important;padding:2px 6px!important}
.cc-contact-meta-row{display:flex!important;align-items:center!important;gap:6px!important;min-height:18px!important;margin-top:3px!important;flex-wrap:wrap!important;direction:rtl!important}
.cc-source-name{display:inline-flex!important;align-items:center!important;font-size:10.5px!important;line-height:1.4!important;color:#111827!important;font-weight:900!important;letter-spacing:.05px!important}
.cc-agent-name{display:inline-flex!important;align-items:center!important;font-size:9px!important;font-weight:700!important;color:#6b7280!important;background:#f6f7f9!important;border:1px solid #e9ebef!important;border-radius:999px!important;padding:2px 6px!important}
.elmujib-contact-phone{display:flex!important;align-items:center!important;gap:5px!important;margin-top:2px!important;font-size:10.5px!important;color:#667085!important;direction:rtl!important;text-align:right!important;white-space:nowrap!important}
.elmujib-contact-phone bdi{direction:ltr!important;unicode-bidi:isolate!important;color:#667085!important;letter-spacing:.2px}
.cc-contact-preview{display:block!important;margin-top:5px!important;font-size:10.5px!important;color:#8a909a!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.45!important}
.cc-contact-time{position:absolute!important;left:9px!important;top:8px!important;font-size:9px!important;color:#98a0ac!important;white-space:nowrap!important}
.elmujib-contact-count{position:absolute!important;left:10px!important;top:31px!important;display:none!important;min-width:25px!important;height:25px!important;padding:0 7px!important;border-radius:999px!important;background:#0ea85f!important;color:#fff!important;font-size:10.5px!important;font-weight:900!important;box-shadow:0 4px 12px rgba(14,168,95,.18)!important}
.elmujib-contact.needs-reply .elmujib-contact-count{display:inline-flex!important}
.cc-new-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#10a65a;box-shadow:0 0 0 3px rgba(16,166,90,.09);vertical-align:middle;margin-inline-start:3px}

.close-report-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.close-report-actions .btn{white-space:nowrap}
.cc-close-reasons-manager{width:min(640px,94vw)!important}.cc-close-reason-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:14px 0 12px}.cc-close-reason-add input{width:100%;height:42px;border:1px solid #dde1e6;border-radius:10px;padding:0 12px;font:inherit;outline:0}.cc-close-reason-add input:focus{border-color:#c8a23c;box-shadow:0 0 0 3px rgba(208,167,46,.12)}
.cc-close-reasons-list{display:flex;flex-direction:column;gap:7px;max-height:48vh;overflow:auto;padding:2px}.cc-close-reason-manage-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #e8eaee;border-radius:11px;background:#fafbfc}.cc-close-reason-manage-row strong{font-size:11px;color:#333840}.cc-reason-locked{font-size:9px;font-weight:800;color:#8b6b12;background:#f7f0dc;border:1px solid #eadcae;border-radius:999px;padding:4px 7px}
.cc-waiting-report-card{margin-top:16px!important}
@media(max-width:720px){.elmujib-contact{min-height:90px!important;padding-right:50px!important}.cc-contact-main{padding-left:42px!important}.cc-close-reason-add{grid-template-columns:1fr}.close-report-actions{width:100%}}
.cc-close-reason-manage-row>div>span{display:block;margin-top:3px;font-size:9px;color:#9297a0}
\n\n/* ===== V40: permission-driven customer drawer ===== */\n.cc-user-mode .cc-customer-tabs{display:flex!important}\n.cc-user-mode .cc-customer-section:not(.hidden){display:block!important}\n.cc-user-mode .cc-customer-section.hidden{display:none!important}\n.cc-user-mode .cc-customer-meta-grid>div:nth-child(3),\n.cc-user-mode .cc-customer-meta-grid>div:nth-child(4){display:block!important}\n.quick-reply-owner{display:block;margin-top:5px;color:#94a3b8;font-size:10px;font-weight:700}\n
.quick-replies-sharing-note{margin:12px 0 4px;padding:10px 12px;border:1px solid #dbeafe;border-radius:10px;background:#eff6ff;color:#1e3a8a;font-size:11px;font-weight:800;line-height:1.7}

/* V41 — Admin-only Drain Mode: finish current chats without new assignments */
.admin-user-state.draining{color:#9a5b00;background:#fff7e6}.admin-user-state.draining i{background:#f59e0b}
.elmujib-agent-chip.is-draining{background:#fff7e6;color:#9a5b00;border-color:#f6d38b}
.elmujib-availability-switch.is-draining{color:#9a5b00!important;border-color:#f6d38b!important;background:#fff7e6!important;cursor:not-allowed;opacity:1}
.elmujib-availability-switch.is-draining .track{background:#f59e0b!important}
.elmujib-availability-switch:disabled{opacity:1}

/* ===== V42 bulk close chats ===== */
.cc-danger-menu-action{color:#b42318!important}
.cc-danger-menu-action:hover{background:#fff1f0!important;color:#8f1d14!important}
.cc-bulk-close-count{margin:12px 0;padding:11px 13px;border:1px solid #f1d0cd;background:#fff7f6;border-radius:10px;color:#7a271a;font-size:12px;font-weight:700}
.cc-bulk-close-count strong{font-size:17px;margin-inline-end:4px}

/* ===== V51 Dr.W brand lock ===== */
.login-logo-img,.brand-logo-img,.sidebar-logo-img,.cc-wells-logo{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  object-fit:contain!important;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.18))!important;
}
.login-logo-img{max-width:128px!important;max-height:128px!important}
.brand-logo-img{height:48px!important;width:48px!important}
.sidebar-logo-img{height:44px!important;width:44px!important}
.cc-wells-logo{width:58px!important;height:58px!important}


/* ===== V52: permission-driven customer Info / orders / media ===== */
/* Visibility of individual tabs is controlled by app.js + .hidden. Do not hide
   the entire customer drawer merely because the signed-in user is non-admin. */
.cc-user-mode .cc-customer-tabs{display:flex!important}
.cc-user-mode #ccCustomerTabInfo .cc-customer-section:not(.admin-only-customer){display:block!important}
.cc-user-mode .admin-only-customer{display:none!important}
.cc-customer-tabs>button.hidden{display:none!important}
#ccCustomerInfoBtn.hidden{display:none!important}

/* V8: close-reason review filters + detailed audit table */
.close-reason-review-controls{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr)) auto;gap:10px;align-items:end;padding:12px 0 16px}
.close-reason-review-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.close-reason-detail-head{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #e5e7eb}
.close-reason-detail-head h4{margin:0 0 3px;font-size:15px}.close-reason-detail-head span{font-size:12px;color:#64748b}
.close-reason-detail-table-wrap{max-height:430px;overflow:auto}.close-reason-detail-table{min-width:850px}.ltr-cell{direction:ltr;text-align:left}
@media(max-width:980px){.close-reason-review-controls{grid-template-columns:1fr 1fr}.close-reason-review-buttons{grid-column:1/-1}}
@media(max-width:620px){.close-reason-review-controls{grid-template-columns:1fr}.close-reason-review-buttons{grid-column:auto}}

/* ===== V12: full weekday/date/time metadata inside every message ===== */
.cc-message-meta{white-space:nowrap;direction:rtl;unicode-bidi:plaintext;font-variant-numeric:tabular-nums}


/* V17 WhatsApp-style delivery/read ticks. Read turns blue only from provider webhook proof. */
.cc-wa-ticks{display:inline-flex;align-items:center;direction:ltr;font-size:13px;font-weight:800;line-height:1;color:#8b98a9;min-width:12px;margin-inline-start:1px;vertical-align:middle}
.cc-wa-ticks i{font-style:normal;display:inline-block;line-height:1}
.cc-wa-ticks i+i{margin-left:-5px}
.cc-wa-ticks.delivered{color:#8b98a9;min-width:18px}
.cc-wa-ticks.read{color:#34b7f1;min-width:18px}
.cc-wa-ticks.failed{color:#dc2626;font-size:12px;min-width:8px}


/* V26 workflow extension: held chats, transfer approval, customer labels/notes */
.cc-held-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;font-size:10px;font-weight:800;margin-inline-start:5px}
.cc-held-badge.pending{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.cc-transfer-approval{display:inline-flex;align-items:center;gap:7px;padding:5px 7px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:12px;font-weight:800}
.cc-transfer-notice{position:sticky;top:0;z-index:5;margin:10px auto;padding:14px 18px;border-radius:12px;background:#ecfeff;border:2px solid #06b6d4;color:#0e7490;font-size:20px;font-weight:900;text-align:center;max-width:92%;box-shadow:0 4px 16px rgba(8,145,178,.12)}
.cc-transfer-notice.is-auto{background:#ecfdf5;border-color:#10b981;color:#047857;font-size:22px}
.cc-customer-labels-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.cc-customer-label-chip{padding:5px 9px;border-radius:999px;background:#e0f2fe;color:#075985;border:1px solid #bae6fd;font-size:12px;font-weight:800}.cc-meta-empty{color:#94a3b8;font-size:12px}.cc-customer-meta-edit{display:flex;gap:8px;align-items:center}.cc-customer-meta-edit .input{flex:1}.cc-customer-notes{width:100%;resize:vertical;min-height:90px}.cc-meta-audit{flex:1;color:#94a3b8;font-size:11px}.transfer-report-actions{display:flex;gap:6px;align-items:center;min-width:330px}.transfer-report-actions .input{min-width:140px}
@media(max-width:900px){.cc-transfer-notice{font-size:17px}.transfer-report-actions{min-width:260px;flex-wrap:wrap}.cc-customer-meta-edit{align-items:stretch;flex-direction:column}}

.cc-transfer-from{display:inline-flex;padding:2px 7px;border-radius:999px;background:#f3e8ff;color:#6b21a8;border:1px solid #e9d5ff;font-size:10px;font-weight:800}
.cc-customer-label-chip button{border:0;background:transparent;color:inherit;font-weight:900;cursor:pointer;margin-inline-start:5px;padding:0 2px}

/* ===== V26 workflow hotfix: agent held-transfer + authoritative close guard ===== */
.elmujib-transfer-wrap.show:not(.hidden){display:flex!important;align-items:center;gap:6px}
#elmujibMarkDoneBtn.cc-close-guard-blocked{opacity:.48;cursor:not-allowed;filter:grayscale(.15)}

/* ===== V26 clean media UX: voice controls, downloads, drag/drop, theme ===== */
.app-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #dfe4eb;background:#fff;color:#334155;border-radius:10px;min-height:38px;padding:0 11px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:.16s ease;white-space:nowrap}
.app-theme-toggle:hover{background:#f8fafc;border-color:#cbd5e1}.app-theme-toggle-icon{font-size:17px;line-height:1}.app-theme-toggle-compact{width:38px!important;height:38px!important;min-height:38px!important;padding:0!important}

.cc-chat-column{position:relative!important}
.elmujib-drop-overlay{position:absolute;inset:72px 14px 86px;z-index:120;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .14s ease,transform .14s ease,visibility .14s;border:2px dashed #2563eb;border-radius:18px;background:rgba(239,246,255,.94);backdrop-filter:blur(6px);color:#1e3a8a}
.elmujib-drop-overlay.show{opacity:1;visibility:visible;transform:scale(1)}
.elmujib-drop-overlay>div{text-align:center;padding:24px}.elmujib-drop-overlay strong{display:block;font-size:20px;margin-bottom:6px}.elmujib-drop-overlay span{font-size:12px;color:#64748b}

.elmujib-voice-bubble{display:flex;align-items:center;gap:8px;min-width:300px;max-width:100%;padding:2px 0}
.elmujib-voice-control{display:flex;flex:1 1 180px;min-width:130px;flex-direction:column;gap:3px}
.elmujib-voice-seek{width:100%;height:4px;margin:0;accent-color:#2563eb;cursor:pointer}
.elmujib-voice-times{display:flex;direction:ltr;justify-content:space-between;color:#64748b;font-size:9.5px;font-variant-numeric:tabular-nums;line-height:1.1}
.elmujib-voice-speed,.elmujib-media-download-btn{flex:0 0 auto;border:1px solid #dbe2ea;background:#fff;color:#334155;border-radius:9px;height:32px;min-width:34px;padding:0 7px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:.15s ease}
.elmujib-voice-speed:hover,.elmujib-media-download-btn:hover{border-color:#b8c4d2;background:#f8fafc;transform:translateY(-1px)}
.elmujib-voice-bubble audio{display:none}
.elmujib-image-bubble{position:relative}.elmujib-image-download{position:absolute;left:7px;top:7px;z-index:3;background:rgba(255,255,255,.94)}
.cc-customer-media-image-wrap{position:relative}.cc-customer-media-download{position:absolute;left:7px;top:7px;z-index:3}
.cc-customer-media-card .elmujib-voice-bubble{min-width:0;width:100%;padding:8px;border-radius:10px;background:#f8fafc;border:1px solid #edf0f4}

@media(max-width:640px){
  .elmujib-voice-bubble{min-width:230px;gap:5px}.elmujib-voice-play{width:34px;height:34px}.elmujib-voice-speed,.elmujib-media-download-btn{height:30px;min-width:30px;padding:0 5px}.elmujib-drop-overlay{inset:58px 8px 78px}.app-theme-toggle-label{display:none}
}

/* Dark mode is intentionally scoped to the application theme attribute so no legacy logic changes. */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:radial-gradient(circle at 8% 0%,rgba(201,162,39,.05),transparent 28%),linear-gradient(180deg,#0b1120 0%,#111827 100%)!important;color:#e5e7eb}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .prof-user-bar,html[data-theme="dark"] .card,html[data-theme="dark"] .home-panel,html[data-theme="dark"] .report-card,html[data-theme="dark"] .users-panel{background:#111827!important;border-color:#273244!important;color:#e5e7eb!important;box-shadow:0 8px 28px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .topbar-title,html[data-theme="dark"] .prof-welcome h3,html[data-theme="dark"] .home-title,html[data-theme="dark"] .home-panel-head h3,html[data-theme="dark"] .card h2,html[data-theme="dark"] .card h3{color:#f3f4f6!important}
html[data-theme="dark"] .topbar-title::before,html[data-theme="dark"] .prof-welcome p,html[data-theme="dark"] .home-subtitle,html[data-theme="dark"] .home-panel-head span,html[data-theme="dark"] .label{color:#94a3b8!important}
html[data-theme="dark"] .prof-chip,html[data-theme="dark"] .quick-action,html[data-theme="dark"] .status-row,html[data-theme="dark"] .order-card{background:#172033!important;border-color:#2b3547!important;color:#cbd5e1!important}
html[data-theme="dark"] .quick-action b,html[data-theme="dark"] .status-num{color:#e5e7eb!important}
html[data-theme="dark"] .input,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0f172a;color:#e5e7eb;border-color:#334155}
html[data-theme="dark"] .input::placeholder,html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#64748b}
html[data-theme="dark"] .btn-secondary{background:#263244;color:#e5e7eb}html[data-theme="dark"] .btn-secondary:hover{background:#334155}
html[data-theme="dark"] .app-theme-toggle{background:#172033;color:#e5e7eb;border-color:#334155}html[data-theme="dark"] .app-theme-toggle:hover{background:#1e293b}

html[data-theme="dark"] .cc-workspace-shell{background:#0f172a!important}
html[data-theme="dark"] .cc-workspace-topbar{background:#111827!important;border-color:#273244!important}
html[data-theme="dark"] .cc-chat-layout{background:#0b1120!important;border-color:#273244!important}
html[data-theme="dark"] .cc-contacts-column{background:#111827!important;border-color:#273244!important}
html[data-theme="dark"] .cc-chat-column{background:#0f172a!important}
html[data-theme="dark"] .cc-chat-thread{background:radial-gradient(circle at 25% 20%,rgba(59,130,246,.04),transparent 30%),linear-gradient(180deg,#0f172a,#111827)!important}
html[data-theme="dark"] .cc-composer{background:#111827!important;border-color:#273244!important}
html[data-theme="dark"] .cc-composer textarea{background:#0b1120!important;border-color:#334155!important;color:#f3f4f6!important}
html[data-theme="dark"] .cc-quick-replies-btn,html[data-theme="dark"] .elmujib-tool-btn,html[data-theme="dark"] .elmujib-mic-btn{background:#172033!important;border-color:#334155!important;color:#e5e7eb!important}
html[data-theme="dark"] .elmujib-panel-head,html[data-theme="dark"] .cc-chat-head{background:#111827!important;border-color:#273244!important;color:#e5e7eb!important}
html[data-theme="dark"] .elmujib-search-wrap,html[data-theme="dark"] .elmujib-filter-tabs{background:#111827!important;border-color:#273244!important}
html[data-theme="dark"] .elmujib-search-input{background:#0f172a!important;color:#e5e7eb!important}
html[data-theme="dark"] .elmujib-contact-item{background:#111827!important;border-color:#273244!important;color:#e5e7eb!important}
html[data-theme="dark"] .elmujib-contact-item:hover,html[data-theme="dark"] .elmujib-contact-item.active{background:#172033!important}
html[data-theme="dark"] .cc-message-row.inbound .cc-message-bubble{background:#1e293b;color:#f1f5f9;border-color:#334155}
html[data-theme="dark"] .cc-message-row.outbound .cc-message-bubble{background:#164e3b;color:#dcfce7;border-color:#166534}
html[data-theme="dark"] .cc-message-row.bot .cc-message-bubble{background:#1e3a5f;color:#dbeafe}
html[data-theme="dark"] .cc-message-quote,html[data-theme="dark"] .cc-message-row.inbound .cc-message-quote,html[data-theme="dark"] .cc-message-row.outbound .cc-message-quote{background:rgba(15,23,42,.72);color:#cbd5e1}
html[data-theme="dark"] .cc-message-reply-btn,html[data-theme="dark"] .elmujib-voice-play,html[data-theme="dark"] .elmujib-voice-speed,html[data-theme="dark"] .elmujib-media-download-btn{background:#172033;color:#e5e7eb;border-color:#334155}
html[data-theme="dark"] .elmujib-voice-play.playing{background:#2563eb;color:#fff}
html[data-theme="dark"] .elmujib-voice-times{color:#94a3b8}
html[data-theme="dark"] .cc-reply-preview{background:#172033;border-color:#334155}html[data-theme="dark"] .cc-reply-preview-body span{color:#94a3b8}
html[data-theme="dark"] .elmujib-drop-overlay{background:rgba(15,23,42,.94);border-color:#3b82f6;color:#dbeafe}html[data-theme="dark"] .elmujib-drop-overlay span{color:#94a3b8}

html[data-theme="dark"] .modal-box,html[data-theme="dark"] .modal-content,html[data-theme="dark"] .quick-replies-manager,html[data-theme="dark"] .admin-user-modal-box{background:#111827!important;color:#e5e7eb!important;border-color:#273244!important}
html[data-theme="dark"] .quick-reply-manage-row,html[data-theme="dark"] .permission-block,html[data-theme="dark"] .permission-toggle-card,html[data-theme="dark"] .admin-user-card,html[data-theme="dark"] .admin-user-permissions>div,html[data-theme="dark"] .admin-user-status-box{background:#172033!important;border-color:#2b3547!important;color:#e5e7eb!important}
html[data-theme="dark"] .quick-reply-manage-row .qr-main span,html[data-theme="dark"] .permission-toggle-card small,html[data-theme="dark"] .admin-user-permissions span{color:#94a3b8!important}
html[data-theme="dark"] .quick-reply-manage-row .qr-main b,html[data-theme="dark"] .permission-toggle-card b,html[data-theme="dark"] .admin-user-permissions b,html[data-theme="dark"] .admin-user-identity strong{color:#e5e7eb!important}
html[data-theme="dark"] .permission-block-head strong{color:#f3f4f6!important}html[data-theme="dark"] .permission-block-head span{color:#94a3b8!important}
html[data-theme="dark"] .cc-customer-panel{background:#111827!important;border-color:#273244!important;color:#e5e7eb!important}
html[data-theme="dark"] .cc-customer-media-card,html[data-theme="dark"] .cc-customer-order-card,html[data-theme="dark"] .cc-customer-media-card .elmujib-voice-bubble{background:#172033!important;border-color:#2b3547!important;color:#e5e7eb!important}
html[data-theme="dark"] .cc-customer-tabs,html[data-theme="dark"] .cc-customer-drawer-head{border-color:#273244!important}
html[data-theme="dark"] .cc-customer-tab-btn{color:#94a3b8!important}html[data-theme="dark"] .cc-customer-tab-btn.active{color:#e5e7eb!important;background:#1e293b!important}
html[data-theme="dark"] .home-performance-kpi,html[data-theme="dark"] .home-performance-table th{background:#172033!important;border-color:#2b3547!important;color:#e5e7eb!important}
html[data-theme="dark"] .home-performance-table td{border-color:#273244!important;color:#cbd5e1!important}
html[data-theme="dark"] .elmujib-filter-tab,html[data-theme="dark"] .cc-compact-filter,html[data-theme="dark"] .cc-top-user-dropdown,html[data-theme="dark"] .elmujib-popover{background:#172033!important;color:#cbd5e1!important;border-color:#334155!important}
html[data-theme="dark"] .elmujib-filter-tab.active{background:#1d4ed8!important;color:#fff!important;border-color:#2563eb!important}
html[data-theme="dark"] .cc-top-user-dropdown button{color:#e5e7eb!important}html[data-theme="dark"] .cc-top-user-dropdown button:hover{background:#1e293b!important}
html[data-theme="dark"] .elmujib-chat-empty,html[data-theme="dark"] .elmujib-empty{color:#94a3b8!important}
html[data-theme="dark"] .quick-replies-list-head,html[data-theme="dark"] .quick-replies-sharing-note{color:#94a3b8!important;border-color:#334155!important}
html[data-theme="dark"] .modal-overlay{background:rgba(2,6,23,.72)!important}


/* ===== V26 composer layout + explicit voice recording controls ===== */
/* Physical layout is LTR so the emoji stays at the far left and all actions stay grouped at the far right.
   The Arabic textarea itself remains RTL. */
.cc-composer .cc-composer-row-clean{
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  direction:ltr!important;
  width:100%!important;
}
.cc-composer .cc-composer-left-tools{
  direction:ltr!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
}
.cc-composer .cc-composer-left-tools .elmujib-popover{left:0!important;right:auto!important}
.cc-composer #elmujibMessageText{
  direction:rtl!important;
  text-align:right!important;
  min-width:0!important;
  width:100%!important;
}
.cc-composer #elmujibMessageText:disabled{opacity:.72;cursor:default}
.cc-composer .cc-composer-right-actions{
  direction:ltr!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
.cc-composer .cc-composer-popover-anchor{position:relative;display:inline-flex;align-items:center}
.cc-composer .cc-slash-popover{right:0!important;left:auto!important;direction:rtl!important;text-align:right!important}
.cc-composer .cc-icon-action{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:17px!important;
  border-radius:10px!important;
}
.cc-composer .cc-send-icon-btn{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  padding:0!important;
  border:0!important;
  border-radius:12px!important;
  display:inline-grid!important;
  place-items:center!important;
  background:#16a34a!important;
  color:#fff!important;
  font-size:21px!important;
  line-height:1!important;
  box-shadow:0 4px 12px rgba(22,163,74,.18)!important;
}
.cc-composer .cc-send-icon-btn:hover{background:#15803d!important;transform:translateY(-1px)}
.cc-composer .elmujib-mic-btn.recording{
  background:#dc2626!important;
  color:#fff!important;
  border-color:#dc2626!important;
  font-size:18px!important;
  cursor:default!important;
  animation:elmujib-pulse 1.1s infinite!important;
  box-shadow:0 0 0 4px rgba(220,38,38,.10)!important;
}
.cc-composer .elmujib-recording-actions{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.cc-composer .elmujib-recording-actions.hidden{display:none!important}
.cc-composer .cc-record-action{
  width:38px;
  height:38px;
  border-radius:10px;
  display:inline-grid;
  place-items:center;
  font:inherit;
  font-size:19px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}
.cc-composer .cc-record-cancel{background:#fff;border:1px solid #fecaca;color:#dc2626}
.cc-composer .cc-record-cancel:hover{background:#fef2f2;border-color:#fca5a5}
.cc-composer .cc-record-confirm{background:#16a34a;border:1px solid #16a34a;color:#fff}
.cc-composer .cc-record-confirm:hover{background:#15803d;border-color:#15803d}
.cc-composer .cc-record-action:disabled{opacity:.5;cursor:wait;transform:none}
.cc-composer-row-clean.is-recording .cc-hide-during-recording{display:none!important}
.cc-composer-row-clean.is-recording .elmujib-recording-timer{display:inline-flex!important;align-items:center;justify-content:center;height:32px;padding:0 8px}

html[data-theme="dark"] .cc-composer .cc-record-cancel{background:#172033;border-color:#7f1d1d;color:#fca5a5}
html[data-theme="dark"] .cc-composer .cc-record-cancel:hover{background:#2b1720}
html[data-theme="dark"] .cc-composer .cc-record-confirm{background:#16a34a;border-color:#16a34a;color:#fff}
html[data-theme="dark"] .cc-composer .elmujib-mic-btn.recording{background:#dc2626!important;border-color:#ef4444!important;color:#fff!important}
html[data-theme="dark"] .cc-composer .cc-send-icon-btn{background:#16a34a!important;color:#fff!important}

@media(max-width:760px){
  .cc-composer .cc-composer-row-clean{grid-template-columns:auto minmax(80px,1fr) auto!important;gap:4px!important}
  .cc-composer .cc-composer-right-actions{gap:3px!important}
  .cc-composer .cc-icon-action,.cc-composer .elmujib-tool-btn,.cc-composer .elmujib-mic-btn,.cc-composer .cc-record-action{width:34px!important;min-width:34px!important;height:34px!important;border-radius:9px!important}
  .cc-composer .cc-send-icon-btn{width:38px!important;min-width:38px!important;height:38px!important;border-radius:10px!important}
  .cc-composer-row-clean.is-recording #elmujibMessageText{min-width:60px!important}
  .cc-composer-row-clean.is-recording .elmujib-recording-timer{font-size:11px!important;min-width:38px!important;padding:0 5px!important}
}

/* ===== V26 quick-reply slash keyboard navigation ===== */
.cc-composer .elmujib-slash-list{scroll-behavior:smooth}
.cc-composer .elmujib-slash-item.active{
  background:#eaf2ff!important;
  color:#1d4ed8!important;
  box-shadow:inset 3px 0 0 #2563eb;
}
.cc-composer .elmujib-slash-item.active span{color:#475569!important}
.cc-composer .elmujib-slash-empty{padding:10px;color:#94a3b8;font-size:12px;text-align:center}
html[data-theme="dark"] .cc-composer .elmujib-slash-item{background:#172033!important;color:#e5e7eb!important}
html[data-theme="dark"] .cc-composer .elmujib-slash-item:hover,
html[data-theme="dark"] .cc-composer .elmujib-slash-item.active{
  background:#1e3a5f!important;
  color:#dbeafe!important;
  box-shadow:inset 3px 0 0 #60a5fa;
}
html[data-theme="dark"] .cc-composer .elmujib-slash-item span{color:#94a3b8!important}
html[data-theme="dark"] .cc-composer .elmujib-slash-item.active span{color:#bfdbfe!important}

/* ===== V27.1 full glossy-black dark theme ===== */
html[data-theme="dark"]{
  color-scheme:dark;
  --gloss-black:#030303;
  --gloss-panel:#090909;
  --gloss-raised:#101010;
  --gloss-hover:#191919;
  --gloss-border:rgba(255,255,255,.14);
  --gloss-border-soft:rgba(255,255,255,.08);
  --gloss-highlight:rgba(255,255,255,.07);
  --gloss-text:#fff;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 14% -8%,rgba(255,255,255,.12),transparent 25%),
    radial-gradient(circle at 88% 4%,rgba(255,255,255,.055),transparent 22%),
    linear-gradient(145deg,#000 0%,#080808 48%,#000 100%)!important;
  color:#fff!important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] body *:not(svg):not(path){color:#fff!important}
html[data-theme="dark"] body ::selection{background:#fff;color:#000}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .prof-user-bar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .home-panel,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .users-panel,
html[data-theme="dark"] .cc-workspace-topbar,
html[data-theme="dark"] .cc-contacts-column,
html[data-theme="dark"] .cc-chat-column,
html[data-theme="dark"] .cc-chat-head,
html[data-theme="dark"] .elmujib-panel-head,
html[data-theme="dark"] .cc-composer,
html[data-theme="dark"] .cc-customer-panel,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .quick-replies-manager,
html[data-theme="dark"] .admin-user-modal-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.018) 35%,rgba(255,255,255,0) 100%),
    #080808!important;
  border-color:var(--gloss-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 38px rgba(0,0,0,.62)!important;
}
html[data-theme="dark"] .cc-workspace-shell,
html[data-theme="dark"] .cc-chat-layout,
html[data-theme="dark"] .cc-chat-thread,
html[data-theme="dark"] .page,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] main{
  background:
    radial-gradient(circle at 30% 0,rgba(255,255,255,.045),transparent 31%),
    linear-gradient(150deg,#020202,#0a0a0a 52%,#000)!important;
  border-color:var(--gloss-border-soft)!important;
}
html[data-theme="dark"] .prof-chip,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .status-row,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .quick-reply-manage-row,
html[data-theme="dark"] .permission-block,
html[data-theme="dark"] .permission-toggle-card,
html[data-theme="dark"] .admin-user-card,
html[data-theme="dark"] .admin-user-permissions>div,
html[data-theme="dark"] .admin-user-status-box,
html[data-theme="dark"] .cc-customer-media-card,
html[data-theme="dark"] .cc-customer-order-card,
html[data-theme="dark"] .home-performance-kpi,
html[data-theme="dark"] .home-performance-table th,
html[data-theme="dark"] .report-kpi,
html[data-theme="dark"] .elmujib-contact-item,
html[data-theme="dark"] .elmujib-popover,
html[data-theme="dark"] .cc-top-user-dropdown,
html[data-theme="dark"] .cc-reply-preview{
  background:linear-gradient(180deg,#171717 0%,#0b0b0b 100%)!important;
  border-color:var(--gloss-border)!important;
  box-shadow:inset 0 1px 0 var(--gloss-highlight),0 7px 18px rgba(0,0,0,.38)!important;
}
html[data-theme="dark"] .elmujib-contact-item:hover,
html[data-theme="dark"] .elmujib-contact-item.active,
html[data-theme="dark"] .quick-action:hover,
html[data-theme="dark"] .cc-top-user-dropdown button:hover{
  background:linear-gradient(180deg,#252525,#121212)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(0,0,0,.48)!important;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .elmujib-search-input,
html[data-theme="dark"] .cc-composer textarea{
  background:linear-gradient(180deg,#030303,#0d0d0d)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.2)!important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .input::placeholder{color:#fff!important;opacity:.72}
html[data-theme="dark"] select option{background:#050505!important;color:#fff!important}

html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .app-theme-toggle,
html[data-theme="dark"] .elmujib-filter-tab,
html[data-theme="dark"] .cc-compact-filter,
html[data-theme="dark"] .cc-quick-replies-btn,
html[data-theme="dark"] .elmujib-tool-btn,
html[data-theme="dark"] .elmujib-mic-btn,
html[data-theme="dark"] .cc-message-reply-btn,
html[data-theme="dark"] .elmujib-voice-play,
html[data-theme="dark"] .elmujib-voice-speed,
html[data-theme="dark"] .elmujib-media-download-btn{
  color:#fff!important;
  border-color:rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 14px rgba(0,0,0,.45)!important;
}
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .app-theme-toggle,
html[data-theme="dark"] .elmujib-filter-tab,
html[data-theme="dark"] .cc-compact-filter,
html[data-theme="dark"] .cc-quick-replies-btn,
html[data-theme="dark"] .elmujib-tool-btn,
html[data-theme="dark"] .elmujib-mic-btn{
  background:linear-gradient(180deg,#202020,#090909)!important;
}
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .btn:hover{filter:brightness(1.22)}

html[data-theme="dark"] .cc-message-row.inbound .cc-message-bubble{
  background:linear-gradient(145deg,#1a1a1a,#090909)!important;
  color:#fff!important;border-color:rgba(255,255,255,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 5px 16px rgba(0,0,0,.44)!important;
}
html[data-theme="dark"] .cc-message-row.outbound .cc-message-bubble{
  background:linear-gradient(145deg,#173b2d,#07120e)!important;
  color:#fff!important;border-color:rgba(74,222,128,.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 16px rgba(0,0,0,.48)!important;
}
html[data-theme="dark"] .cc-message-row.bot .cc-message-bubble{
  background:linear-gradient(145deg,#17283d,#070b11)!important;color:#fff!important
}
html[data-theme="dark"] .cc-message-quote,
html[data-theme="dark"] .cc-message-row.inbound .cc-message-quote,
html[data-theme="dark"] .cc-message-row.outbound .cc-message-quote{
  background:rgba(0,0,0,.68)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important
}
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td{border-color:rgba(255,255,255,.13)!important;color:#fff!important}
html[data-theme="dark"] th{background:linear-gradient(180deg,#1a1a1a,#080808)!important}
html[data-theme="dark"] tbody tr:nth-child(even){background:rgba(255,255,255,.025)!important}
html[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.075)!important}
html[data-theme="dark"] hr{border-color:rgba(255,255,255,.14)!important}
html[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.86)!important;backdrop-filter:blur(9px)}
html[data-theme="dark"] img{filter:none}

/* ===== V27.2 exact dark fixes from live-screen review ===== */
html[data-theme="dark"] .cc-admin-agents,
html[data-theme="dark"] .elmujib-admin-agents,
html[data-theme="dark"] .cc-admin-agents.show{
  background:linear-gradient(180deg,#171717 0%,#050505 58%,#000 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 24px rgba(0,0,0,.62)!important;
}
html[data-theme="dark"] .cc-admin-agents>strong,
html[data-theme="dark"] .cc-admin-agents .cc-agent-list,
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip{
  color:#fff!important;
}
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip,
html[data-theme="dark"] .cc-agent-list .agent-chip{
  background:linear-gradient(180deg,#222,#080808)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.55)!important;
}
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip.is-draining{
  background:linear-gradient(180deg,#2b2110,#0b0803)!important;
  color:#fff!important;border-color:rgba(245,158,11,.45)!important
}

html[data-theme="dark"] .elmujib-contacts-list,
html[data-theme="dark"] .cc-contacts-column{
  background:linear-gradient(165deg,#0b0b0b 0%,#020202 55%,#000 100%)!important;
}
html[data-theme="dark"] .elmujib-contact,
html[data-theme="dark"] button.elmujib-contact,
html[data-theme="dark"] .elmujib-contact.is-done{
  background:linear-gradient(155deg,#1b1b1b 0%,#0a0a0a 50%,#030303 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.62)!important;
  opacity:1!important;
}
html[data-theme="dark"] .elmujib-contact:hover,
html[data-theme="dark"] .elmujib-contact.active{
  background:linear-gradient(155deg,#292929 0%,#111 48%,#050505 100%)!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 26px rgba(0,0,0,.72)!important;
}
html[data-theme="dark"] .elmujib-contact.active::before{background:#fff!important;box-shadow:0 0 10px rgba(255,255,255,.62)!important}
html[data-theme="dark"] .elmujib-contact-name,
html[data-theme="dark"] .elmujib-contact-phone,
html[data-theme="dark"] .cc-contact-time,
html[data-theme="dark"] .cc-contact-preview,
html[data-theme="dark"] .cc-contact-elapsed,
html[data-theme="dark"] .cc-source-name,
html[data-theme="dark"] .cc-agent-name{color:#fff!important;opacity:1!important}
html[data-theme="dark"] .cc-contact-avatar{
  background:linear-gradient(145deg,#252525,#050505)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 13px rgba(0,0,0,.65)!important
}

html[data-theme="dark"] .cc-composer,
html[data-theme="dark"] .elmujib-composer{
  background:linear-gradient(180deg,#101010,#000)!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
}
html[data-theme="dark"] .cc-composer .elmujib-composer-row,
html[data-theme="dark"] .cc-composer .cc-composer-row-clean,
html[data-theme="dark"] #elmujibComposerRow{
  background:linear-gradient(180deg,#171717 0%,#050505 100%)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 7px 20px rgba(0,0,0,.7)!important;
}
html[data-theme="dark"] .cc-composer #elmujibMessageText,
html[data-theme="dark"] #elmujibMessageText.input{
  background:#050505!important;
  color:#fff!important;
  caret-color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 2px 9px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)!important;
}
html[data-theme="dark"] #elmujibMessageText::placeholder{color:#fff!important;opacity:.78!important}
html[data-theme="dark"] .elmujib-search-wrap,
html[data-theme="dark"] .elmujib-filter-tabs,
html[data-theme="dark"] .cc-filter-row{
  background:#050505!important;border-color:rgba(255,255,255,.16)!important
}


/* ===== V28 targeted additions: reactions, locations, international chat UX ===== */
.cc-message-link{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cc-location-card{display:flex;gap:10px;align-items:center;min-width:230px;max-width:360px;padding:10px 12px;border-radius:12px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18);color:inherit;text-decoration:none}
.cc-location-card:hover{background:rgba(37,99,235,.13)}
.cc-location-pin{font-size:28px;line-height:1}.cc-location-card span:last-child{display:flex;flex-direction:column;gap:2px}.cc-location-card strong{font-size:14px}.cc-location-card small{font-size:11px;opacity:.75}.cc-location-card em{font-size:11px;font-style:normal;font-weight:700;text-decoration:underline}
.cc-message-react-btn{position:absolute;top:34px;width:28px;height:28px;border:1px solid #dbe2ea;border-radius:50%;background:#fff;cursor:pointer;opacity:0;transition:.15s;z-index:3}.cc-message-row:hover .cc-message-react-btn,.cc-message-react-btn:focus{opacity:1}.cc-message-row.inbound .cc-message-react-btn{right:-34px}.cc-message-row.outbound .cc-message-react-btn{left:-34px}
.cc-reaction-picker{position:absolute;top:66px;display:none;gap:3px;padding:5px;border-radius:18px;background:#fff;border:1px solid #dbe2ea;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:20;white-space:nowrap}.cc-reaction-picker.show{display:flex}.cc-message-row.inbound .cc-reaction-picker{right:-4px}.cc-message-row.outbound .cc-reaction-picker{left:-4px}.cc-reaction-picker button{width:31px;height:31px;border:0;border-radius:50%;background:transparent;font-size:18px;cursor:pointer}.cc-reaction-picker button:hover{background:#f1f5f9}.cc-reaction-picker button.remove{font-size:20px;color:#64748b}
.cc-message-reactions{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 -12px}.cc-message-reactions span{display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border-radius:12px;background:#fff;border:1px solid #dbe2ea;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.08)}.cc-message-reactions b{font-size:10px}
html[data-theme="dark"] .cc-location-card{background:rgba(37,99,235,.14);border-color:rgba(96,165,250,.35)}
html[data-theme="dark"] .cc-message-react-btn,html[data-theme="dark"] .cc-reaction-picker,html[data-theme="dark"] .cc-message-reactions span{background:#111;color:#fff;border-color:rgba(255,255,255,.2)}
html[data-theme="dark"] .cc-reaction-picker button{color:#fff}html[data-theme="dark"] .cc-reaction-picker button:hover{background:#242424}

/* ===== V38 dark polish: chat header + close reason dialog ===== */
html[data-theme="dark"] .cc-contacts-head > span,
html[data-theme="dark"] #elmujibContactCount{
  background:linear-gradient(180deg,#202020 0%,#080808 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.5)!important;
}

html[data-theme="dark"] .cc-chat-avatar,
html[data-theme="dark"] #elmujibSelectedAvatar{
  background:linear-gradient(145deg,#242424 0%,#070707 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.58)!important;
}

html[data-theme="dark"] .cc-info-btn,
html[data-theme="dark"] #ccCustomerInfoBtn{
  background:linear-gradient(180deg,#252525 0%,#090909 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 14px rgba(0,0,0,.52)!important;
}
html[data-theme="dark"] .cc-info-btn:hover,
html[data-theme="dark"] #ccCustomerInfoBtn:hover{
  background:linear-gradient(180deg,#333 0%,#111 100%)!important;
  border-color:rgba(255,255,255,.36)!important;
}

html[data-theme="dark"] #elmujibDoneStatusBadge{
  background:linear-gradient(180deg,#183426 0%,#09150f 100%)!important;
  color:#dcfce7!important;
  border:1px solid rgba(74,222,128,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 14px rgba(0,0,0,.46)!important;
}

html[data-theme="dark"] .elmujib-filter-count{
  background:linear-gradient(180deg,#242424,#0b0b0b)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .elmujib-filter-tab.active .elmujib-filter-count{
  background:rgba(0,0,0,.3)!important;
  border-color:rgba(255,255,255,.28)!important;
}

html[data-theme="dark"] .cc-close-reason-modal{
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.018) 34%,rgba(255,255,255,0) 100%),
    #080808!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 70px rgba(0,0,0,.72)!important;
}
html[data-theme="dark"] .cc-close-reason-modal .modal-header{
  padding-bottom:13px!important;
  margin-bottom:12px!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .cc-close-reason-modal .modal-header h3{
  color:#fff!important;
}
html[data-theme="dark"] .cc-close-reason-modal .close-btn{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#242424,#090909)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.42)!important;
}
html[data-theme="dark"] .cc-close-reason-modal .cc-modal-note{
  color:#cbd5e1!important;
}
html[data-theme="dark"] .cc-close-reason-options{
  gap:8px!important;
}
html[data-theme="dark"] .cc-close-reason-options label{
  min-height:46px!important;
  background:linear-gradient(180deg,#171717 0%,#080808 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:11px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.32)!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease!important;
}
html[data-theme="dark"] .cc-close-reason-options label:hover{
  background:linear-gradient(180deg,#252525 0%,#101010 100%)!important;
  border-color:rgba(255,255,255,.3)!important;
  transform:translateY(-1px)!important;
}
html[data-theme="dark"] .cc-close-reason-options label:has(input:checked){
  background:linear-gradient(180deg,#1f2d24 0%,#09110c 100%)!important;
  border-color:rgba(74,222,128,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 14px rgba(0,0,0,.4)!important;
}
html[data-theme="dark"] .cc-close-reason-options input[type="radio"]{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  margin:0!important;
  padding:0!important;
  accent-color:#22c55e!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .cc-close-reason-modal .modal-actions{
  padding-top:13px!important;
  border-top:1px solid rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .cc-bulk-close-count{
  background:linear-gradient(180deg,#201313,#0d0707)!important;
  color:#fff!important;
  border-color:rgba(248,113,113,.3)!important;
}

/* ===== V38 dark polish: customer Info + Media drawer ===== */
html[data-theme="dark"] .cc-customer-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.012) 24%,rgba(255,255,255,0) 100%),
    #070707!important;
  color:#f8fafc!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 65px rgba(0,0,0,.68)!important;
}
html[data-theme="dark"] .cc-customer-drawer-head{
  border-bottom-color:rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .cc-customer-drawer-head strong,
html[data-theme="dark"] .cc-customer-profile strong,
html[data-theme="dark"] .cc-customer-tab-head h4,
html[data-theme="dark"] .cc-customer-section h4,
html[data-theme="dark"] .cc-customer-meta-grid b,
html[data-theme="dark"] .cc-customer-media-caption,
html[data-theme="dark"] .cc-customer-order-top strong,
html[data-theme="dark"] .cc-customer-order-meta span{
  color:#fff!important;
}
html[data-theme="dark"] .cc-customer-drawer-head button{
  background:linear-gradient(180deg,#242424,#080808)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.45)!important;
}
html[data-theme="dark"] .cc-customer-drawer-head button:hover{
  background:linear-gradient(180deg,#333,#111)!important;
  border-color:rgba(255,255,255,.3)!important;
}
html[data-theme="dark"] .cc-customer-tabs{
  border-bottom-color:rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .cc-customer-tabs button{
  color:#aab4c3!important;
  background:transparent!important;
  border:1px solid transparent!important;
}
html[data-theme="dark"] .cc-customer-tabs button:hover{
  color:#fff!important;
  background:linear-gradient(180deg,#1d1d1d,#0b0b0b)!important;
  border-color:rgba(255,255,255,.11)!important;
}
html[data-theme="dark"] .cc-customer-tabs button.active{
  color:#fff!important;
  background:linear-gradient(180deg,#282828,#0d0d0d)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.36)!important;
}
html[data-theme="dark"] .cc-customer-tab-count{
  background:linear-gradient(180deg,#242424,#090909)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
}
html[data-theme="dark"] .cc-customer-profile{
  border-bottom-color:rgba(255,255,255,.09)!important;
}
html[data-theme="dark"] .cc-customer-avatar{
  background:linear-gradient(145deg,#252525,#070707)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.52)!important;
}
html[data-theme="dark"] .cc-customer-profile span,
html[data-theme="dark"] .cc-customer-meta-grid span,
html[data-theme="dark"] .cc-customer-tab-head span,
html[data-theme="dark"] .cc-customer-media-meta,
html[data-theme="dark"] .cc-customer-order-meta b,
html[data-theme="dark"] .cc-meta-empty,
html[data-theme="dark"] .cc-meta-audit{
  color:#9ca3af!important;
}
html[data-theme="dark"] .cc-customer-meta-grid>div,
html[data-theme="dark"] .cc-customer-summary,
html[data-theme="dark"] .cc-customer-tab-empty,
html[data-theme="dark"] .cc-customer-media-placeholder,
html[data-theme="dark"] .cc-customer-media-file,
html[data-theme="dark"] .cc-customer-media-card,
html[data-theme="dark"] .cc-customer-order-card,
html[data-theme="dark"] .cc-customer-media-card .elmujib-voice-bubble{
  background:linear-gradient(180deg,#171717 0%,#090909 100%)!important;
  color:#f3f4f6!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 6px 16px rgba(0,0,0,.36)!important;
}
html[data-theme="dark"] .cc-customer-summary{
  color:#d1d5db!important;
}
html[data-theme="dark"] .cc-customer-section{
  border-top-color:rgba(255,255,255,.09)!important;
}
html[data-theme="dark"] .cc-customer-tab-head{
  border-bottom-color:rgba(255,255,255,.09)!important;
}
html[data-theme="dark"] .cc-customer-tab-empty{
  border-style:dashed!important;
  color:#a7b0bf!important;
}
html[data-theme="dark"] .cc-customer-tab-empty.error{
  background:linear-gradient(180deg,#281010,#120707)!important;
  color:#fecaca!important;
  border-color:rgba(248,113,113,.35)!important;
}
html[data-theme="dark"] .cc-customer-label-chip{
  background:linear-gradient(180deg,#202020,#0b0b0b)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html[data-theme="dark"] .cc-customer-label-chip button{
  color:#fff!important;
  background:transparent!important;
  border:0!important;
}
html[data-theme="dark"] .cc-customer-meta-edit .input,
html[data-theme="dark"] .cc-customer-notes{
  background:linear-gradient(180deg,#030303,#0d0d0d)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.88),0 1px 0 rgba(255,255,255,.05)!important;
}
html[data-theme="dark"] .cc-customer-media-image-btn{
  background:#050505!important;
  border:1px solid rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .cc-customer-media-file{
  color:#f8fafc!important;
  text-decoration:none!important;
}
html[data-theme="dark"] .cc-customer-media-file:hover{
  background:linear-gradient(180deg,#252525,#101010)!important;
  border-color:rgba(255,255,255,.24)!important;
}
html[data-theme="dark"] .cc-customer-media-meta{
  border-top-color:rgba(255,255,255,.09)!important;
}
html[data-theme="dark"] .cc-customer-media-card video{
  background:#000!important;
  border:1px solid rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .cc-customer-order-top span{
  color:#dcfce7!important;
  background:linear-gradient(180deg,#183426,#09150f)!important;
  border-color:rgba(74,222,128,.3)!important;
}
html[data-theme="dark"] .cc-customer-panel::-webkit-scrollbar{
  width:8px;
}
html[data-theme="dark"] .cc-customer-panel::-webkit-scrollbar-track{
  background:#050505;
}
html[data-theme="dark"] .cc-customer-panel::-webkit-scrollbar-thumb{
  background:#2a2a2a;
  border:2px solid #050505;
  border-radius:999px;
}


/* V38: local-number copy action beside selected customer phone */
.cc-copy-phone-btn{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;padding:0;border:1px solid rgba(148,163,184,.35);border-radius:8px;background:rgba(255,255,255,.75);color:#334155;font-size:15px;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.cc-copy-phone-btn:hover{background:#fff;border-color:#94a3b8;transform:translateY(-1px)}
html[data-theme="dark"] .cc-copy-phone-btn{background:linear-gradient(180deg,rgba(30,30,30,.96),rgba(8,8,8,.96));border-color:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 5px 18px rgba(0,0,0,.22)}
html[data-theme="dark"] .cc-copy-phone-btn:hover{background:linear-gradient(180deg,rgba(45,45,45,.98),rgba(14,14,14,.98));border-color:rgba(255,255,255,.28)}

/* ===== V38: SLA + Break workflow (clean additive patch) ===== */
.elmujib-availability-switch.is-locked:disabled{opacity:1;cursor:default;filter:none}
.cc-break-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid #d9dee7;border-radius:11px;background:#fff;color:#334155;font:inherit;font-size:11px;font-weight:900;cursor:pointer;transition:.16s ease;white-space:nowrap}
.cc-break-btn:hover{transform:translateY(-1px);border-color:#c4cad5;box-shadow:0 5px 14px rgba(15,23,42,.08)}
.cc-break-btn:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}
.cc-break-btn.is-active{background:#fff1f2;border-color:#fecdd3;color:#be123c;box-shadow:inset 0 0 0 1px rgba(225,29,72,.04)}
.cc-self-drain-btn.is-active{background:#fff7e6;border-color:#f6d38b;color:#9a5b00;box-shadow:inset 0 0 0 1px rgba(245,158,11,.08)}
.cc-break-timer{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 10px;border:1px solid #fecaca;border-radius:11px;background:#fff5f5;color:#b91c1c;box-shadow:0 5px 16px rgba(185,28,28,.08)}
.cc-break-timer>div{display:flex;align-items:center;gap:7px}.cc-break-timer small{font-size:9px;font-weight:800;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-break-timer strong{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.cc-break-pulse{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.55);animation:ccBreakPulse 1.35s infinite}
@keyframes ccBreakPulse{70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.admin-user-state.break{color:#b91c1c;background:#fef2f2}.admin-user-state.break i{background:#ef4444}
.elmujib-agent-chip.is-break{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.cc-contact-elapsed.overdue,.cc-selected-elapsed.overdue,.home-waiting-age.overdue,#homeWaitingOldest.overdue{color:#ef4444!important;font-weight:950!important;text-shadow:0 0 10px rgba(239,68,68,.2)}
.cc-contact-elapsed.overdue::before,.cc-selected-elapsed.overdue::before{color:#ef4444!important}
.home-waiting-age.overdue,#homeWaitingOldest.overdue{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid rgba(239,68,68,.22);border-radius:999px;background:rgba(254,226,226,.58)}
.cc-break-reason-options{display:grid;gap:8px;margin:13px 0 4px}
.cc-break-reason-option{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e3e7ee;border-radius:12px;background:#fff;cursor:pointer;font-size:12px;font-weight:800;color:#334155;transition:.14s ease}
.cc-break-reason-option:hover{border-color:#fca5a5;background:#fffafa}.cc-break-reason-option:has(input:checked){border-color:#ef4444;background:#fff1f2;color:#991b1b;box-shadow:inset 0 0 0 1px rgba(239,68,68,.08)}
.cc-break-reason-option input{accent-color:#dc2626;width:16px;height:16px}
.cc-break-modal{max-width:470px}.cc-break-reasons-manager{max-width:590px}
.report-state.break{color:#b91c1c;background:#fef2f2;border-radius:999px;padding:4px 8px;font-weight:850;white-space:nowrap}
html[data-theme="dark"] .cc-break-btn{background:linear-gradient(180deg,#171a1f,#101216);border-color:#30343b;color:#f1f5f9;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 7px 18px rgba(0,0,0,.22)}
html[data-theme="dark"] .cc-break-btn.is-active{background:linear-gradient(180deg,#34161a,#231013);border-color:#6b252d;color:#ff9da6}
html[data-theme="dark"] .cc-self-drain-btn.is-active{background:linear-gradient(180deg,#33250c,#211706);border-color:#6b4b11;color:#ffd37a}
html[data-theme="dark"] .cc-break-timer{background:linear-gradient(180deg,#2d1418,#1a0e10);border-color:#68262d;color:#ff8792;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 7px 18px rgba(0,0,0,.24)}
html[data-theme="dark"] .admin-user-state.break,html[data-theme="dark"] .elmujib-agent-chip.is-break,html[data-theme="dark"] .report-state.break{background:#301519!important;color:#ff929d!important;border-color:#68262d!important}
html[data-theme="dark"] .cc-break-reason-option{background:#15181d;border-color:#30343b;color:#e7eaf0}
html[data-theme="dark"] .cc-break-reason-option:hover{background:#1e1719;border-color:#633039}html[data-theme="dark"] .cc-break-reason-option:has(input:checked){background:#2d1519;border-color:#7a303a;color:#ffadb4}
html[data-theme="dark"] .home-waiting-age.overdue,html[data-theme="dark"] #homeWaitingOldest.overdue{background:rgba(127,29,29,.2);border-color:rgba(248,113,113,.28);color:#ff7f89!important}
html[data-theme="dark"] .cc-contact-elapsed.overdue,html[data-theme="dark"] .cc-selected-elapsed.overdue{color:#ff7f89!important;text-shadow:0 0 12px rgba(248,113,113,.26)}
@media(max-width:700px){.cc-break-btn{padding:0 8px}.cc-break-timer{padding:4px 7px}.cc-break-timer small{display:none}}


/* V38: English message timestamps + first-unread boundary */
.cc-message-date-time{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-unread-divider{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 10px;color:#b91c1c;font-size:11px;font-weight:900;letter-spacing:.1px;direction:rtl;user-select:none}
.cc-unread-divider::before,.cc-unread-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(220,38,38,.62),transparent)}
.cc-unread-divider span{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border:1px solid rgba(220,38,38,.25);border-radius:999px;background:#fff1f2;color:#b91c1c;box-shadow:0 3px 12px rgba(185,28,28,.08);white-space:nowrap}
html[data-theme="dark"] .cc-unread-divider{color:#ff8b95}
html[data-theme="dark"] .cc-unread-divider::before,html[data-theme="dark"] .cc-unread-divider::after{background:linear-gradient(90deg,transparent,rgba(248,113,113,.65),transparent)}
html[data-theme="dark"] .cc-unread-divider span{background:linear-gradient(180deg,#301519,#1e0e11);border-color:rgba(248,113,113,.3);color:#ff9aa3;box-shadow:0 5px 16px rgba(0,0,0,.2)}


/* V38 manual-only customer phone linking: no automatic name matching. */
.cc-manual-customer-link-card{margin:0 0 24px;padding:18px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.cc-manual-customer-link-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.cc-manual-customer-link-head h3{margin:0;color:#374151;font-size:16px}.cc-manual-customer-link-head p{margin:6px 0 0;color:#64748b;font-size:12px;line-height:1.7;max-width:760px}
.cc-manual-customer-link-head>span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#475569;font-size:11px}.cc-manual-customer-link-head>span b{color:#0f172a}
.cc-manual-phone-link-input{min-width:190px!important;direction:ltr!important;text-align:left!important}
html[data-theme="dark"] .cc-manual-customer-link-card{background:linear-gradient(180deg,#151515,#090909);border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .cc-manual-customer-link-head h3{color:#f8fafc}html[data-theme="dark"] .cc-manual-customer-link-head p{color:#9ca3af}
html[data-theme="dark"] .cc-manual-customer-link-head>span{background:linear-gradient(180deg,#202020,#0b0b0b);border-color:rgba(255,255,255,.14);color:#cbd5e1}html[data-theme="dark"] .cc-manual-customer-link-head>span b{color:#fff}

/* ===== V38 chat scroll stability: instant bottom anchoring without send jitter ===== */
.cc-chat-thread,
.elmujib-chat-thread{
  scroll-behavior:auto!important;
  overflow-anchor:none!important;
}
.cc-chat-thread>.cc-message-row,
.cc-chat-thread>.elmujib-optimistic-wrap,
.cc-chat-thread>.cc-unread-divider{
  overflow-anchor:none;
}
.elmujib-optimistic-wrap.sent-waiting-sync .elmujib-pending-time{opacity:.78}


/* ===== V38 mobile browser chat navigation =====
   Mobile only: list -> conversation -> back to list. Desktop layout is untouched. */
.cc-mobile-chat-back{display:none}
@media (max-width:760px){
  body.messages-mode .cc-workspace-shell{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  body.messages-mode .cc-chat-layout{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
  }
  body.messages-mode .cc-contacts-column,
  body.messages-mode .cc-chat-column{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
  }
  body.messages-mode .cc-contacts-column{
    display:flex!important;
    flex-direction:column!important;
    padding:10px 8px 8px!important;
    border:0!important;
    background:var(--surface,#fff)!important;
    z-index:2!important;
  }
  body.messages-mode .cc-chat-column{
    display:none!important;
    flex-direction:column!important;
    border:0!important;
    z-index:3!important;
  }
  body.messages-mode .cc-chat-layout.cc-mobile-chat-open .cc-contacts-column{
    display:none!important;
  }
  body.messages-mode .cc-chat-layout.cc-mobile-chat-open .cc-chat-column{
    display:flex!important;
  }
  body.messages-mode .elmujib-contacts-list{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  body.messages-mode .cc-chat-head{
    flex:0 0 auto!important;
    min-height:64px!important;
    padding:7px 8px!important;
    gap:7px!important;
    flex-wrap:wrap!important;
    align-content:center!important;
  }
  .cc-mobile-chat-back{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    padding:0!important;
    border:1px solid rgba(148,163,184,.28)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.9)!important;
    color:#0f172a!important;
    font:900 23px/1 system-ui,sans-serif!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.messages-mode .cc-chat-person{
    flex:1 1 calc(100% - 50px)!important;
    min-width:0!important;
  }
  body.messages-mode .cc-chat-person>div:last-child{
    min-width:0!important;
  }
  body.messages-mode .cc-chat-name-row{
    flex-wrap:nowrap!important;
    min-width:0!important;
  }
  body.messages-mode .cc-chat-name-row>strong{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.messages-mode .cc-chat-actions{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:2px 0 1px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.messages-mode .cc-chat-actions::-webkit-scrollbar{display:none}
  body.messages-mode .cc-chat-actions>*{flex:0 0 auto!important}
  body.messages-mode .cc-chat-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:12px 9px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.messages-mode .cc-message-bubble{max-width:88%!important}
  body.messages-mode .cc-composer{
    flex:0 0 auto!important;
    padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
  }
  body.messages-mode .cc-composer-row-clean{gap:4px!important}
  body.messages-mode .cc-composer textarea{
    min-width:0!important;
    font-size:16px!important; /* prevents iOS browser zoom on focus */
  }
  body.messages-mode .cc-composer-right-actions{gap:3px!important}
  body.messages-mode .cc-quick-replies-btn,
  body.messages-mode .elmujib-tool-btn,
  body.messages-mode .elmujib-mic-btn,
  body.messages-mode .cc-send-btn{
    min-width:38px!important;
    width:38px!important;
    height:38px!important;
    padding:0!important;
  }
  html[data-theme="dark"] body.messages-mode .cc-contacts-column{
    background:linear-gradient(165deg,#0b0b0b 0%,#020202 55%,#000 100%)!important;
  }
  html[data-theme="dark"] .cc-mobile-chat-back{
    background:linear-gradient(180deg,#202020,#090909)!important;
    border-color:rgba(255,255,255,.16)!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
}


/* ===== V38 mobile browser full-height + compact admin/logout header =====
   Mobile-only hard override. Desktop and application logic are untouched. */
.cc-mobile-top-action{display:none}
@media (max-width:760px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  body.messages-mode{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.messages-mode #appShell{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    transform:none!important;
  }
  body.messages-mode #messages,
  body.messages-mode .messages-wrap,
  body.messages-mode .cc-workspace-shell{
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Mobile header: no KPI strip; keep only Admin (admins only) + Logout. */
  body.messages-mode .cc-workspace-topbar{
    display:flex!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:54px!important;
    margin:0!important;
    padding:calc(5px + env(safe-area-inset-top)) 8px 5px!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    overflow:visible!important;
  }
  body.messages-mode.cc-admin-mode .cc-admin-top-kpis:not(.hidden),
  body.messages-mode .cc-admin-top-kpis{display:none!important}
  body.messages-mode .cc-topbar-brand,
  body.messages-mode .cc-topbar-search,
  body.messages-mode .cc-api-status,
  body.messages-mode .cc-admin-agents{display:none!important}
  body.messages-mode .cc-topbar-user{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow:visible!important;
  }
  body.messages-mode .cc-topbar-user>:not(.cc-mobile-top-action){display:none!important}
  body.messages-mode .cc-mobile-top-action{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    min-height:38px!important;
    padding:0 12px!important;
    border:1px solid rgba(148,163,184,.32)!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#172033!important;
    font:inherit!important;
    font-size:12px!important;
    font-weight:800!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.messages-mode.cc-user-mode .cc-mobile-admin-action{display:none!important}
  body.messages-mode .cc-mobile-logout-action{color:#b42318!important}

  /* The chat/list area must own every remaining pixel.
     max-height:none fixes the inherited 38vh limit from the legacy mobile panel. */
  body.messages-mode .cc-chat-layout{
    position:relative!important;
    display:block!important;
    flex:1 1 0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
  }
  body.messages-mode .cc-contacts-column,
  body.messages-mode .cc-chat-column{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
  }
  body.messages-mode .cc-contacts-column{
    display:flex!important;
    flex-direction:column!important;
  }
  body.messages-mode .elmujib-contacts-list{
    flex:1 1 0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-top:8px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  body.messages-mode .cc-chat-layout.cc-mobile-chat-open .cc-contacts-column{display:none!important}
  body.messages-mode .cc-chat-layout.cc-mobile-chat-open .cc-chat-column{display:flex!important}

  html[data-theme="dark"] body.messages-mode .cc-mobile-top-action{
    background:linear-gradient(180deg,#202020,#090909)!important;
    border-color:rgba(255,255,255,.16)!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
  html[data-theme="dark"] body.messages-mode .cc-mobile-logout-action{color:#ff8c95!important}
}

/* V39 channel-scoped quick replies */
.quick-reply-channel-scope{margin-top:12px;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.quick-reply-channel-all{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:9px}.quick-reply-channel-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.quick-reply-channel-options label{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;font-size:12px}.quick-reply-channel-scope small{display:block;margin-top:9px;color:#64748b}.quick-reply-channels{display:block;margin-top:5px;color:#2563eb;font-size:10px;font-weight:800}@media(max-width:650px){.quick-reply-channel-options{grid-template-columns:1fr}}html[data-theme="dark"] .quick-reply-channel-scope{background:#172033;border-color:#334155}html[data-theme="dark"] .quick-reply-channel-options label{background:#111827;border-color:#334155;color:#e5e7eb}

/* V40 quick replies: explicit All vs One channel selector */
.quick-reply-scope-choice{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 10px}.quick-reply-scope-choice label{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #dbe3ee;border-radius:10px;background:#fff;font-weight:800;cursor:pointer}.quick-reply-one-channel-label{display:grid!important;grid-template-columns:auto minmax(180px,1fr);align-items:center;gap:10px!important}.quick-reply-one-channel-label .input{margin:0}html[data-theme="dark"] .quick-reply-scope-choice label{background:#111827;border-color:#334155;color:#e5e7eb}@media(max-width:650px){.quick-reply-scope-choice{display:grid;grid-template-columns:1fr 1fr}.quick-reply-one-channel-label{grid-template-columns:1fr!important}.quick-reply-one-channel-label .input{width:100%}}

/* V41 quick-reply multi-channel selector */
.quick-reply-channel-options .quick-reply-channel-check{cursor:pointer;user-select:none}.quick-reply-channel-options .quick-reply-channel-check:has(input:checked){border-color:#2563eb;background:#eff6ff}.quick-reply-channel-options .quick-reply-channel-check input{width:16px;height:16px;accent-color:#2563eb;flex:0 0 auto}html[data-theme="dark"] .quick-reply-channel-options .quick-reply-channel-check:has(input:checked){background:#172554;border-color:#3b82f6}

/* ===== V43 light channel identity + dark-safe login/admin agents ===== */
/* Channel badges fit the fixed-height metadata row without clipping. */
body .elmujib-contact .cc-source-name{
 width:auto!important;height:20px!important;min-width:0!important;max-width:130px!important;
 padding:0 7px!important;border-radius:6px!important;display:inline-flex!important;
 align-items:center!important;line-height:18px!important;font-size:10px!important;
 flex:0 0 auto!important;box-sizing:border-box!important;white-space:nowrap!important;
 overflow:hidden!important;text-overflow:ellipsis!important;box-shadow:none!important;
 border:1px solid #cbd5e1!important;background:#f1f5f9!important;color:#334155!important;
}
body .elmujib-contact .cc-source-name.channel-dr-wells{background:#eff6ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important}
body .elmujib-contact .cc-source-name.channel-wael-0100{background:#fef2f2!important;color:#b91c1c!important;border-color:#fecaca!important}
body .elmujib-contact .cc-source-name.channel-wael-012{background:#f0fdf4!important;color:#15803d!important;border-color:#bbf7d0!important}

html[data-theme="dark"] .login-page{background:radial-gradient(circle at 18% 12%,#1c2535 0,transparent 35%),linear-gradient(145deg,#05070b,#0b1018 55%,#020304)!important}
html[data-theme="dark"] .login-shell{background:#0b0f16!important;border:1px solid #283244!important;box-shadow:0 38px 120px rgba(0,0,0,.72)!important}
html[data-theme="dark"] .login-form-panel{background:linear-gradient(180deg,#111827,#080c12)!important;border-color:#283244!important;color:#e5e7eb!important}
html[data-theme="dark"] .login-title h2,html[data-theme="dark"] .login-field-label{color:#f8fafc!important}
html[data-theme="dark"] .login-title p,html[data-theme="dark"] .login-footer,html[data-theme="dark"] .login-loading{color:#94a3b8!important}
html[data-theme="dark"] .login-input-group .input{background:#0b1220!important;color:#f8fafc!important;border-color:#334155!important}
html[data-theme="dark"] .login-input-group .input::placeholder{color:#64748b!important}
html[data-theme="dark"] .login-input-group .input:focus{background:#101827!important;border-color:#d0a72e!important;box-shadow:0 0 0 4px rgba(208,167,46,.13)!important}
html[data-theme="dark"] .login-secure-badge{background:#272113!important;color:#e7c65e!important}
html[data-theme="dark"] .login-footer{border-color:#283244!important}
html[data-theme="dark"] .cc-admin-agents .cc-agent-name,
html[data-theme="dark"] .cc-admin-agents .agent-name,
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip span{color:#f8fafc!important;opacity:1!important}

/* ===== V43 image lightbox: isolated zoom controls, no chat navigation ===== */
body.elmujib-lightbox-open{overflow:hidden}
#elmujibImageLightbox{overflow:hidden;user-select:none}
#elmujibImageLightbox .elmujib-lightbox-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:64px 20px 20px}
#elmujibImageLightbox .elmujib-lightbox-image{width:auto;height:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 84px);object-fit:contain;transform-origin:center center;transition:transform .12s ease;will-change:transform;cursor:zoom-in}
#elmujibImageLightbox .elmujib-lightbox-toolbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000001;display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:999px;background:rgba(20,20,22,.76);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,.28)}
#elmujibImageLightbox .elmujib-lightbox-toolbar button,#elmujibImageLightboxClose{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:700 23px/1 Arial,sans-serif;cursor:pointer}
#elmujibImageLightbox .elmujib-lightbox-toolbar button:hover,#elmujibImageLightboxClose:hover{background:rgba(255,255,255,.24)}
#elmujibImageLightboxZoomValue{min-width:54px;text-align:center;color:#fff;font:700 12px/1.2 Arial,sans-serif}
@media(max-width:600px){#elmujibImageLightbox .elmujib-lightbox-stage{padding:62px 8px 8px}#elmujibImageLightbox .elmujib-lightbox-image{max-width:calc(100vw - 16px);max-height:calc(100vh - 70px)}#elmujibImageLightboxClose{top:14px;right:10px}}

/* ===== V43 dark mode completeness: admin + workspace surfaces ===== */
html[data-theme="dark"] body{background:#07090d!important;color:#e5e7eb!important}
html[data-theme="dark"] .card,html[data-theme="dark"] .topbar,html[data-theme="dark"] .home-date,html[data-theme="dark"] .kpi-card,html[data-theme="dark"] .home-panel,html[data-theme="dark"] .report-kpi,html[data-theme="dark"] .report-card,html[data-theme="dark"] .home-performance-kpi,html[data-theme="dark"] .quick-reply-manage-row,html[data-theme="dark"] .cc-workspace-topbar,html[data-theme="dark"] .cc-admin-agents,html[data-theme="dark"] .cc-customer-panel{background:#101318!important;border-color:#2a3039!important;color:#e5e7eb!important;box-shadow:none!important}
html[data-theme="dark"] .cc-chat-layout,html[data-theme="dark"] body.messages-mode .messages-panel,html[data-theme="dark"] body.messages-mode .messages-toolbar,html[data-theme="dark"] .elmujib-contacts-panel,html[data-theme="dark"] .cc-contacts-column,html[data-theme="dark"] .elmujib-chat-head{background:#0d1015!important;border-color:#252b34!important;color:#e5e7eb!important}
html[data-theme="dark"] .cc-chat-column{background:#090c10!important}
html[data-theme="dark"] .elmujib-contact{background:#0f1318!important;border-color:#232a33!important;color:#e5e7eb!important}
html[data-theme="dark"] .elmujib-contact:hover{background:#151a21!important}
html[data-theme="dark"] .elmujib-contact.active{background:#172131!important;box-shadow:inset -3px 0 0 #3b82f6!important}
html[data-theme="dark"] .elmujib-search-input,html[data-theme="dark"] .elmujib-search-input:focus,html[data-theme="dark"] .elmujib-composer-row,html[data-theme="dark"] .input,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#11161d!important;border-color:#303844!important;color:#f1f5f9!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#737d8c!important}
html[data-theme="dark"] .elmujib-filter-tabs,html[data-theme="dark"] .status-row,html[data-theme="dark"] .quick-action,html[data-theme="dark"] .home-performance-table th{background:#151a21!important;border-color:#2a313b!important;color:#cbd5e1!important}
html[data-theme="dark"] .quick-action:hover{background:#1a2029!important}
html[data-theme="dark"] .report-table-wrap{border-color:#2a3039!important}
html[data-theme="dark"] .report-table th,html[data-theme="dark"] .report-table td,html[data-theme="dark"] .home-performance-table th,html[data-theme="dark"] .home-performance-table td{border-color:#262d36!important;color:#d8dee8!important}
html[data-theme="dark"] .report-table tbody tr:hover{background:#141920!important}
html[data-theme="dark"] .home-title,html[data-theme="dark"] .kpi-value,html[data-theme="dark"] .home-panel-head h3,html[data-theme="dark"] .status-num,html[data-theme="dark"] .report-kpi b,html[data-theme="dark"] .report-card-head h3,html[data-theme="dark"] .home-performance-kpi b,html[data-theme="dark"] .quick-action b,html[data-theme="dark"] .quick-reply-manage-row .qr-main b{color:#f8fafc!important}
html[data-theme="dark"] .home-subtitle,html[data-theme="dark"] .kpi-top,html[data-theme="dark"] .kpi-note,html[data-theme="dark"] .quick-action span,html[data-theme="dark"] .status-label,html[data-theme="dark"] .report-kpi span,html[data-theme="dark"] .report-kpi small,html[data-theme="dark"] .report-card-head span,html[data-theme="dark"] .report-legend span,html[data-theme="dark"] .home-performance-kpi span,html[data-theme="dark"] .quick-replies-list-head,html[data-theme="dark"] .quick-reply-manage-row .qr-main span{color:#98a2b3!important}
html[data-theme="dark"] .quick-reply-scope{background:#172554!important;color:#bfdbfe!important}
html[data-theme="dark"] .quick-reply-scope.personal{background:#052e2b!important;color:#6ee7b7!important}
html[data-theme="dark"] .modal,html[data-theme="dark"] .modal-content,html[data-theme="dark"] .dialog,html[data-theme="dark"] [role="dialog"]{color:#e5e7eb}


/* ===== V43 close reason item detail ===== */
.cc-close-item-detail{margin-top:12px;padding:12px;border:1px solid #e3e6eb;border-radius:12px;background:#f8f9fb}
.cc-close-item-detail.hidden{display:none!important}
.cc-close-item-detail label{display:block;margin-bottom:7px;font-size:11px;font-weight:800;color:#343941}
.cc-close-item-detail .input{width:100%;min-height:42px}
body.dark-mode .cc-close-item-detail{background:#17191e!important;border-color:#343842!important}
body.dark-mode .cc-close-item-detail label{color:#f3f4f6!important}
body.dark-mode .cc-close-item-detail .input{background:#0f1115!important;color:#fff!important;border-color:#3a3f49!important}
body.dark-mode .cc-close-item-detail .input::placeholder{color:#858b96!important}

/* ===== V43 admin dark-mode audit + light chat-card fit ===== */
html[data-theme="dark"] #adminChannelsGrid>article{background:#11161d!important;border-color:#303844!important;color:#f8fafc!important}
html[data-theme="dark"] #adminChannelsGrid>article strong{color:#f8fafc!important}
html[data-theme="dark"] #adminChannelsGrid>article small{color:#aeb7c4!important}
html[data-theme="dark"] #adminChannelsGrid>article span[style*="box-shadow"]{box-shadow:0 0 0 5px rgba(255,255,255,.07)!important}
html[data-theme="dark"] .admin-user-card,html[data-theme="dark"] .admin-user-permissions,html[data-theme="dark"] .admin-user-permissions>div{background:#11161d!important;border-color:#303844!important;color:#e5e7eb!important}
html[data-theme="dark"] .admin-user-card strong,html[data-theme="dark"] .admin-user-permissions b{color:#f8fafc!important}
html[data-theme="dark"] .admin-user-card span,html[data-theme="dark"] .admin-user-permissions span{color:#aeb7c4!important}
html[data-theme="dark"] .admin-user-state,html[data-theme="dark"] .admin-user-state.online,html[data-theme="dark"] .admin-user-state.offline,html[data-theme="dark"] .admin-user-state.break,html[data-theme="dark"] .admin-user-state.draining,html[data-theme="dark"] .admin-user-state.disabled{background:#1a2029!important;border:1px solid #394250!important;color:#f1f5f9!important}
html[data-theme="dark"] .home-waiting-kpi,html[data-theme="dark"] .home-waiting-kpi.danger,html[data-theme="dark"] .home-waiting-kpi.warning,html[data-theme="dark"] .home-waiting-kpi.neutral{background:#11161d!important;border-color:#303844!important}
html[data-theme="dark"] .home-waiting-kpi span{color:#aeb7c4!important}html[data-theme="dark"] .home-waiting-kpi b{color:#f8fafc!important}
html[data-theme="dark"] .home-waiting-table-wrap{border-color:#303844!important;background:#0d1117!important}
html[data-theme="dark"] .home-waiting-table th{background:#151a21!important;color:#cbd5e1!important;border-color:#303844!important}
html[data-theme="dark"] .home-waiting-table td{background:#0f141a!important;color:#e5e7eb!important;border-color:#29313b!important}
html[data-theme="dark"] .home-waiting-row:hover td{background:#171d25!important}
html[data-theme="dark"] .home-waiting-customer b{color:#f8fafc!important}
html[data-theme="dark"] .home-waiting-customer span,html[data-theme="dark"] .home-waiting-agent{background:#17202a!important;color:#dbeafe!important;border:1px solid #334155!important}
html[data-theme="dark"] .home-waiting-agent.unassigned{background:#2a1719!important;color:#fecaca!important;border-color:#5b252a!important}
html[data-theme="dark"] .home-waiting-preview{color:#cbd5e1!important}
html[data-theme="dark"] .home-waiting-filters select,html[data-theme="dark"] .cc-compact-filter{background:#11161d!important;color:#f8fafc!important;border-color:#394250!important;color-scheme:dark}
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip{background:#171d25!important;border-color:#374151!important;color:#f8fafc!important}
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip *{color:inherit!important}
html[data-theme="dark"] .cc-source-name{background:#17202a!important;color:#f8fafc!important;border-color:#3b4655!important}

/* Light mode: let each conversation card use the space it needs; no covered customer text. */
html:not([data-theme="dark"]) .elmujib-contact{height:auto!important;min-height:86px!important;padding-top:12px!important;padding-bottom:12px!important;overflow:visible!important}
html:not([data-theme="dark"]) .cc-contact-main{min-width:0!important;overflow:visible!important;padding-left:48px!important}
html:not([data-theme="dark"]) .elmujib-contact-title-row{min-width:0!important;padding-left:0!important;align-items:flex-start!important;flex-wrap:wrap!important;row-gap:3px!important}
html:not([data-theme="dark"]) .elmujib-contact-title-row .elmujib-contact-name{max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word!important}
html:not([data-theme="dark"]) .cc-contact-preview{max-width:100%!important;padding-left:4px!important}
html:not([data-theme="dark"]) .elmujib-contact-phone{display:block!important;max-width:100%!important;overflow:visible!important;white-space:normal!important}

/* ===== V43 admin dark-mode audit + light chat-card fit ===== */
html[data-theme="dark"] #adminChannelsGrid>article{background:#11161d!important;border-color:#303844!important;color:#f8fafc!important}
html[data-theme="dark"] #adminChannelsGrid>article strong{color:#f8fafc!important} html[data-theme="dark"] #adminChannelsGrid>article small{color:#aeb7c4!important}
html[data-theme="dark"] #adminChannelsGrid>article span[style*="box-shadow"]{box-shadow:0 0 0 5px rgba(255,255,255,.07)!important}
html[data-theme="dark"] .admin-user-card,html[data-theme="dark"] .admin-user-permissions,html[data-theme="dark"] .admin-user-permissions>div{background:#11161d!important;border-color:#303844!important;color:#e5e7eb!important}
html[data-theme="dark"] .admin-user-card strong,html[data-theme="dark"] .admin-user-permissions b{color:#f8fafc!important} html[data-theme="dark"] .admin-user-card span,html[data-theme="dark"] .admin-user-permissions span{color:#aeb7c4!important}
html[data-theme="dark"] .admin-user-state,html[data-theme="dark"] .admin-user-state.online,html[data-theme="dark"] .admin-user-state.offline,html[data-theme="dark"] .admin-user-state.break,html[data-theme="dark"] .admin-user-state.draining,html[data-theme="dark"] .admin-user-state.disabled{background:#1a2029!important;border:1px solid #394250!important;color:#f1f5f9!important}
html[data-theme="dark"] .home-waiting-kpi,html[data-theme="dark"] .home-waiting-kpi.danger,html[data-theme="dark"] .home-waiting-kpi.warning,html[data-theme="dark"] .home-waiting-kpi.neutral{background:#11161d!important;border-color:#303844!important}
html[data-theme="dark"] .home-waiting-kpi span{color:#aeb7c4!important} html[data-theme="dark"] .home-waiting-kpi b{color:#f8fafc!important}
html[data-theme="dark"] .home-waiting-table-wrap{border-color:#303844!important;background:#0d1117!important} html[data-theme="dark"] .home-waiting-table th{background:#151a21!important;color:#cbd5e1!important;border-color:#303844!important} html[data-theme="dark"] .home-waiting-table td{background:#0f141a!important;color:#e5e7eb!important;border-color:#29313b!important} html[data-theme="dark"] .home-waiting-row:hover td{background:#171d25!important}
html[data-theme="dark"] .home-waiting-customer b{color:#f8fafc!important} html[data-theme="dark"] .home-waiting-customer span,html[data-theme="dark"] .home-waiting-agent{background:#17202a!important;color:#dbeafe!important;border:1px solid #334155!important} html[data-theme="dark"] .home-waiting-agent.unassigned{background:#2a1719!important;color:#fecaca!important;border-color:#5b252a!important} html[data-theme="dark"] .home-waiting-preview{color:#cbd5e1!important}
html[data-theme="dark"] .home-waiting-filters select,html[data-theme="dark"] .cc-compact-filter{background:#11161d!important;color:#f8fafc!important;border-color:#394250!important;color-scheme:dark} html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip{background:#171d25!important;border-color:#374151!important;color:#f8fafc!important} html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip *{color:inherit!important} html[data-theme="dark"] .cc-source-name{background:#17202a!important;color:#f8fafc!important;border-color:#3b4655!important}
html:not([data-theme="dark"]) .elmujib-contact{height:auto!important;min-height:86px!important;padding-top:12px!important;padding-bottom:12px!important;overflow:visible!important} html:not([data-theme="dark"]) .cc-contact-main{min-width:0!important;overflow:visible!important;padding-left:48px!important} html:not([data-theme="dark"]) .elmujib-contact-title-row{min-width:0!important;padding-left:0!important;align-items:flex-start!important;flex-wrap:wrap!important;row-gap:3px!important} html:not([data-theme="dark"]) .elmujib-contact-title-row .elmujib-contact-name{max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word!important} html:not([data-theme="dark"]) .cc-contact-preview{max-width:100%!important;padding-left:4px!important} html:not([data-theme="dark"]) .elmujib-contact-phone{display:block!important;max-width:100%!important;overflow:visible!important;white-space:normal!important}

/* ===== V43 admin dark mode hardening v2 ===== */
html[data-theme="dark"] #userManagement,
html[data-theme="dark"] #dashboardHome{color:#e5e7eb}
html[data-theme="dark"] #userManagement .users-summary-card,
html[data-theme="dark"] #userManagement .users-panel,
html[data-theme="dark"] #userManagement .admin-user-card,
html[data-theme="dark"] #userManagement .admin-user-permissions>div,
html[data-theme="dark"] #dashboardHome .home-waiting-kpi,
html[data-theme="dark"] #dashboardHome .home-waiting-table-wrap,
html[data-theme="dark"] #dashboardHome .home-performance-kpi{
  background:#11161d!important;background-image:none!important;border-color:#303844!important;color:#e5e7eb!important;box-shadow:none!important;
}
html[data-theme="dark"] #userManagement .users-summary-card span,
html[data-theme="dark"] #userManagement .users-summary-card small,
html[data-theme="dark"] #userManagement .users-panel-head span,
html[data-theme="dark"] #userManagement .admin-user-identity span,
html[data-theme="dark"] #userManagement .admin-user-permissions span{color:#9ca8b8!important}
html[data-theme="dark"] #userManagement .users-summary-card b,
html[data-theme="dark"] #userManagement .users-panel-head h3,
html[data-theme="dark"] #userManagement .admin-user-identity strong,
html[data-theme="dark"] #userManagement .admin-user-permissions b{color:#f8fafc!important}
html[data-theme="dark"] #userManagement .users-panel-search,
html[data-theme="dark"] #userManagement .users-panel-search input,
html[data-theme="dark"] #userManagement input,
html[data-theme="dark"] #userManagement select,
html[data-theme="dark"] #userManagement textarea,
html[data-theme="dark"] #dashboardHome input,
html[data-theme="dark"] #dashboardHome select{
  background:#0c1118!important;color:#f8fafc!important;border-color:#384352!important;box-shadow:none!important;color-scheme:dark!important;
}
html[data-theme="dark"] #userManagement .users-panel-search input::placeholder{color:#778395!important}
html[data-theme="dark"] #adminChannelsGrid>article{
  background:#121820!important;background-image:none!important;border-color:#35404d!important;color:#f8fafc!important;box-shadow:none!important;
}
html[data-theme="dark"] #adminChannelsGrid>article strong{color:#fff!important}
html[data-theme="dark"] #adminChannelsGrid>article small{color:#aeb8c6!important}
html[data-theme="dark"] #adminChannelsGrid>article .btn-secondary{background:#202731!important;color:#f8fafc!important;border-color:#3b4654!important}
html[data-theme="dark"] #adminChannelsGrid>article span[style*="box-shadow"]{box-shadow:0 0 0 5px rgba(255,255,255,.07)!important}
html[data-theme="dark"] #userManagement .admin-user-state,
html[data-theme="dark"] #userManagement .admin-user-state.online,
html[data-theme="dark"] #userManagement .admin-user-state.offline,
html[data-theme="dark"] #userManagement .admin-user-state.break,
html[data-theme="dark"] #userManagement .admin-user-state.draining,
html[data-theme="dark"] #userManagement .admin-user-state.disabled{
  background:#202731!important;color:#eef2f7!important;border:1px solid #3a4553!important;
}
html[data-theme="dark"] #dashboardHome .home-waiting-kpi.danger,
html[data-theme="dark"] #dashboardHome .home-waiting-kpi.warning,
html[data-theme="dark"] #dashboardHome .home-waiting-kpi.neutral{background:#121820!important;border-color:#35404d!important}
html[data-theme="dark"] #dashboardHome .home-waiting-kpi span{color:#9ca8b8!important}
html[data-theme="dark"] #dashboardHome .home-waiting-kpi b{color:#f8fafc!important;text-shadow:none!important}
html[data-theme="dark"] #dashboardHome .home-waiting-table th{background:#171e27!important;color:#cbd5e1!important;border-color:#303844!important}
html[data-theme="dark"] #dashboardHome .home-waiting-table td{background:#0e141b!important;color:#e5e7eb!important;border-color:#29323d!important}
html[data-theme="dark"] #dashboardHome .home-waiting-row:hover td{background:#18202a!important}
html[data-theme="dark"] #dashboardHome .home-waiting-agent,
html[data-theme="dark"] #dashboardHome .home-waiting-customer span{background:#1d2935!important;color:#e5edf7!important;border:1px solid #3a4655!important}
html[data-theme="dark"] #dashboardHome .home-waiting-preview{color:#c5cfdb!important}
html[data-theme="dark"] .cc-admin-agents,
html[data-theme="dark"] .elmujib-admin-agents{background:#10161e!important;background-image:none!important;border-color:#303a47!important;color:#f8fafc!important}
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip,
html[data-theme="dark"] .elmujib-admin-agents .elmujib-agent-chip{background:#1b232d!important;color:#f8fafc!important;border-color:#3a4655!important}
html[data-theme="dark"] .cc-admin-agents .elmujib-agent-chip *,
html[data-theme="dark"] .elmujib-admin-agents .elmujib-agent-chip *{color:#f8fafc!important}
html[data-theme="dark"] .cc-agent-name{background:#1b232d!important;color:#f8fafc!important;border-color:#3a4655!important}


/* ===== V43 stability/performance hardening =====
   Keep list/thread scrolling isolated from the page and avoid layout propagation during realtime updates. */
.elmujib-contacts-list,
.cc-chat-thread,
.elmujib-chat-thread{
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}
.elmujib-contact,
.cc-message-row{
  contain:layout style;
}


/* ===== V43 UI polish: info icon + selected channel + complete conversation cards ===== */
/* Customer Info: keep the familiar i-in-circle affordance, but make the glyph optically centered. */
.cc-info-btn{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  border-radius:50%!important;
  font-family:Arial,"Helvetica Neue",system-ui,sans-serif!important;
  font-size:16px!important;
  font-weight:900!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
}
.cc-info-btn:focus-visible{outline:3px solid rgba(37,99,235,.24)!important;outline-offset:2px!important}

/* Selected chat: show the source channel immediately beside the customer name. */
.cc-chat-channel{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:22px!important;
  margin:0!important;
  padding:2px 8px!important;
  border:1px solid #dbe5ef!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  color:#334155!important;
  direction:rtl!important;
  unicode-bidi:isolate!important;
  white-space:nowrap!important;
  font-family:"Cairo",sans-serif!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.45!important;
}
.cc-chat-channel.hidden{display:none!important}
.cc-chat-channel.channel-dr-wells{background:#eef6ff!important;border-color:#cfe3ff!important;color:#1d4ed8!important}
.cc-chat-channel.channel-wael-0100{background:#ecfdf5!important;border-color:#bbf7d0!important;color:#047857!important}
.cc-chat-channel.channel-wael-012{background:#fff7ed!important;border-color:#fed7aa!important;color:#c2410c!important}
html[data-theme="dark"] .cc-chat-channel{background:#17202a!important;border-color:#3b4655!important;color:#e5edf7!important}
html[data-theme="dark"] .cc-chat-channel.channel-dr-wells{background:#13233a!important;border-color:#284a78!important;color:#93c5fd!important}
html[data-theme="dark"] .cc-chat-channel.channel-wael-0100{background:#102a22!important;border-color:#235743!important;color:#86efac!important}
html[data-theme="dark"] .cc-chat-channel.channel-wael-012{background:#322015!important;border-color:#6a4226!important;color:#fdba74!important}

/* All / held / closed / archive-search rows use the same renderer. Let each card own its full content
   so names, badges, phone/meta and preview never escape below a fixed-height row. */
.elmujib-contact{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  height:auto!important;
  min-height:86px!important;
  padding:12px 54px 12px 10px!important;
  overflow:visible!important;
}
.elmujib-contact .cc-contact-avatar{
  float:none!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  margin:3px 0 0 0!important;
}
.elmujib-contact .cc-contact-main{
  display:block!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  padding-left:0!important;
  overflow:visible!important;
}
.elmujib-contact .elmujib-contact-title-row,
.elmujib-contact .cc-contact-meta-row{
  display:flex!important;
  align-items:flex-start!important;
  flex-wrap:wrap!important;
  gap:3px 5px!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
.elmujib-contact .elmujib-contact-name{
  display:inline!important;
  flex:1 1 130px!important;
  max-width:100%!important;
  padding-left:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.55!important;
}
.elmujib-contact .elmujib-contact-phone{
  width:100%!important;
  max-width:100%!important;
  margin-top:3px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
.elmujib-contact .cc-contact-preview{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin-top:4px!important;
  padding-left:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.55!important;
}
.elmujib-contact .cc-source-name,
.elmujib-contact .cc-agent-name,
.elmujib-contact .cc-held-badge,
.elmujib-contact .cc-archive-badge,
.elmujib-contact .cc-transfer-from,
.elmujib-contact .cc-customer-code{max-width:100%!important}

@media(max-width:760px){
  body.messages-mode .cc-chat-name-row{gap:5px!important}
  body.messages-mode .cc-chat-channel{max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.messages-mode .elmujib-contact{min-height:86px!important}
}

/* V43 workflow patch: archive cards and long template messages keep their full text. */
.elmujib-contact.is-done{flex-shrink:0!important}
.elmujib-contact.is-done .cc-agent-name,
.elmujib-contact.is-done .cc-source-name,
.elmujib-contact.is-done .cc-transfer-from,
.elmujib-contact.is-done .cc-customer-code{
  height:auto!important;white-space:normal!important;overflow:visible!important;
  text-overflow:clip!important;overflow-wrap:anywhere!important;line-height:1.6!important;
}
.cc-message-row{min-width:0;flex-shrink:0}
.cc-message-bubble{min-width:0;box-sizing:border-box}
.cc-message-text,.elmujib-image-caption{
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
  height:auto;max-height:none;line-height:1.8;
}

/* Report drill-downs share the existing report/table layout. */
.cc-report-drilldown{margin-top:18px;padding:16px;border:1px solid #dbe3ee;border-radius:14px;background:#f8fafc}
.cc-report-drilldown p{color:#64748b;font-size:12px;line-height:1.7}
.cc-report-drilldown small{display:block;overflow-wrap:anywhere}
.cc-report-search{display:block;max-width:600px;font-weight:700}
.cc-report-search input{display:block;width:100%;margin-top:6px}
.cc-report-message-preview{min-width:180px;max-width:360px;white-space:pre-wrap!important;overflow-wrap:anywhere}
.cc-report-pagination{display:flex;gap:8px;margin-top:12px}
.cc-response-review{padding:14px;margin-top:12px;border:1px solid #dbe3ee;border-radius:10px;background:#fff}
.cc-response-review dt{font-size:12px;font-weight:700;margin-top:10px}
.cc-response-review dd{margin:6px 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}
html[data-theme="dark"] .cc-report-drilldown,html[data-theme="dark"] .cc-response-review{background:#172033;border-color:#334155;color:#e5e7eb}
body.messages-mode .cc-chat-name-row{flex-wrap:wrap!important;align-items:center!important}
body.messages-mode #elmujibSelectedChannel{max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;flex:0 1 auto!important}
.cc-chat-channel.channel-dr-wael-012{background:#fff7ed!important;border-color:#fed7aa!important;color:#c2410c!important}

/* Uniform inbox cards; only the message preview is abbreviated, never stored text. */
body .elmujib-contacts-list .elmujib-contact{
  box-sizing:border-box!important;height:116px!important;min-height:116px!important;max-height:116px!important;
  flex:0 0 116px!important;overflow:hidden!important;
}
body .elmujib-contact .cc-contact-main{min-width:0!important;overflow:hidden!important}
body .elmujib-contact .elmujib-contact-title-row,
body .elmujib-contact .cc-contact-meta-row{flex-wrap:nowrap!important;max-height:23px!important;overflow:hidden!important}
body .elmujib-contact .elmujib-contact-name,
body .elmujib-contact .cc-agent-name,
body .elmujib-contact .cc-source-name,
body .elmujib-contact .cc-transfer-from,
body .elmujib-contact .cc-customer-code{
  min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body .elmujib-contact .cc-contact-preview{
  display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  height:18px!important;max-height:18px!important;line-height:18px!important;
}
.cc-thread-viewport{position:relative;display:flex;flex:1 1 0;min-height:0;min-width:0;overflow:hidden}
.cc-thread-viewport>.cc-chat-thread{height:100%!important;min-height:0!important;min-width:0;flex:1 1 0!important;box-sizing:border-box}
.cc-scroll-bottom{position:absolute;bottom:18px;inset-inline-end:18px;z-index:10;width:42px;height:42px;border:1px solid #d8e2de;border-radius:50%;background:#fff;color:#166b48;box-shadow:0 3px 12px #0002;font-size:27px;cursor:pointer;display:grid;place-items:center}
.cc-scroll-bottom.hidden{display:none!important}
.cc-scroll-bottom:focus-visible{outline:3px solid #22c55e;outline-offset:2px}
html[data-theme="dark"] .cc-scroll-bottom{background:#1e293b;color:#86efac;border-color:#475569}

/* Report panels preserve their controls and loaded data while switching tabs. */
.cc-report-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:8px;background:#eef2f6;border-radius:14px}
.cc-report-tabs [role="tab"]{border:0;border-radius:9px;padding:10px 16px;background:transparent;color:#475569;font:inherit;font-weight:700;cursor:pointer}
.cc-report-tabs [aria-selected="true"]{background:#fff;color:#0f172a;box-shadow:0 2px 6px #0f172a14}
.cc-report-tabs [role="tab"]:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.cc-report-panel[hidden]{display:none!important}
html[data-theme="dark"] .cc-report-tabs{background:#17202a}
html[data-theme="dark"] .cc-report-tabs [role="tab"]{color:#cbd5e1}
html[data-theme="dark"] .cc-report-tabs [aria-selected="true"]{background:#334155;color:#fff}
html[data-theme="dark"] body .elmujib-contact .cc-source-name{background:#17202a!important;color:#e2e8f0!important;border-color:#475569!important}

.cc-channel-actions{display:flex;gap:8px;flex-wrap:wrap}
.cc-meta-dialog{width:min(600px,90vw);max-height:85vh;overflow:auto;border:1px solid #cbd5e1;border-radius:16px;padding:20px;direction:rtl;background:#fff;color:#0f172a}.cc-meta-dialog::backdrop{background:#0008}.cc-meta-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.cc-meta-channel{padding:12px;margin:12px 0;border:1px solid #cbd5e1;border-radius:10px}.cc-meta-dialog label{display:block;margin:12px 0}.cc-meta-dialog p{line-height:1.8}html[data-theme="dark"] .cc-meta-dialog{background:#17202a;color:#f8fafc}

/* V43: manager attribution and persistent Arabic / English interface. */
body.cc-user-mode .elmujib-contact .cc-visible-agent-name,
.cc-user-mode .elmujib-contact .cc-visible-agent-name{display:inline-flex!important}
.cc-language-toggle{flex-shrink:0;border:1px solid #cbd5e1;border-radius:9px;padding:7px 10px;background:#fff;color:#172033;font:inherit;font-size:12px;cursor:pointer;min-height:36px}
.login-form-head>.cc-language-toggle{align-self:flex-end;margin-bottom:12px}
html[data-theme="dark"] .cc-language-toggle{background:#17202a;color:#f8fafc;border-color:#475569}
html[lang="en"] .cc-workspace-shell,html[lang="en"] .cc-workspace-topbar>*,html[lang="en"] .cc-chat-layout>*,html[lang="en"] .cc-admin-top-kpis,html[lang="en"] .cc-topbar-user,html[lang="en"] .cc-topbar-search,html[lang="en"] .cc-topbar-search input,html[lang="en"] .cc-unread-divider{direction:ltr!important}
html[lang="en"] .elmujib-contact,html[lang="en"] .elmujib-contact-phone,html[lang="en"] .elmujib-messages-user-meta,html[lang="en"] .cc-agent-name,html[lang="en"] .cc-top-user-dropdown button,html[lang="en"] .elmujib-slash-item,html[lang="en"] .report-table th,html[lang="en"] .report-table td{text-align:left!important;direction:ltr!important}
html[lang="en"] .cc-composer textarea{direction:ltr!important;text-align:left!important}
html[lang="en"] .cc-composer .cc-slash-popover{direction:ltr!important;text-align:left!important}
html[lang="en"] .cc-chat-actions{margin-left:auto!important;margin-right:0!important}
html[lang="en"] .cc-mobile-chat-back{transform:scaleX(-1)}
.cc-message-text,.elmujib-image-caption{unicode-bidi:plaintext}
@media(max-width:760px){.cc-language-toggle{padding:5px 7px;font-size:11px;min-height:32px}}

@media(max-width:760px){body.messages-mode .cc-topbar-user>.cc-language-toggle{display:inline-flex!important;align-items:center;justify-content:center}}

html[lang="en"] .cc-contacts-head>div strong::before{content:'Customers'}
html[lang="en"] .cc-message-quote-link:after{content:'↥ Original'}
@media(min-width:761px){
 html[lang="en"] .cc-chat-layout{direction:ltr!important;grid-template-columns:minmax(275px,350px) minmax(0,1fr)!important}
 html[lang="en"] .cc-contacts-column{grid-column:1!important}
 html[lang="en"] .cc-chat-column{grid-column:2!important}
}

.cc-workload-dialog{width:min(640px,94vw);max-height:85vh;overflow:auto;border:1px solid #cbd5e1;border-radius:16px;padding:18px;background:#fff;color:#172033}
.cc-workload-dialog::backdrop{background:rgba(15,23,42,.5)}
.cc-workload-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-workload-dialog .cc-workload-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e2e8f0;padding:12px 0}
.cc-workload-dialog .cc-workload-row span{min-width:0;overflow-wrap:anywhere}
html[data-theme="dark"] .cc-workload-dialog{background:#17202a;color:#f8fafc;border-color:#475569}

html[lang="en"] .cc-workload-dialog{direction:ltr!important;text-align:left!important}

/* Let English reports, menus and dialogs inherit the chosen reading direction. */
html[lang="en"] body{direction:ltr}
html[lang="en"] .cc-meta-dialog,
html[lang="en"] .modal-content,
html[lang="en"] .report-card,
html[lang="en"] .report-kpi,
html[lang="en"] .elmujib-contact-title-row,
html[lang="en"] .cc-selected-elapsed,
html[lang="en"] .cc-contact-elapsed{direction:ltr!important;text-align:start!important}
html[lang="en"] .login-title,
html[lang="en"] .login-field-label,
html[lang="en"] .cc-customer-panel,
html[lang="en"] .users-page,
html[lang="en"] .report-page{text-align:start}
[translate="no"],.cc-customer-value{unicode-bidi:plaintext}

.cc-platform-icon{display:inline-block;width:16px;height:16px;vertical-align:middle;object-fit:contain;margin-inline-end:4px;flex-shrink:0}