/* =====================================================================
   CORE: base
   Design tokens (:root), reset, login, app shell, left rail, top app bar. Shob page e load hoy.
   ===================================================================== */
:root{
  --blue-900:#1e3a8a; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-50:#eef4ff;
  --ink:#0f172a; --muted:#26303f; --faint:#46566c; --line:#e7ecf4; --bg:#eef2f8; --panel:#ffffff;
  --tint:#f5f8ff; --grad:linear-gradient(135deg,#1e3a8a,#2563eb);
  --sh-sm:0 1px 2px rgba(15,23,42,.06); --sh-md:0 6px 20px rgba(15,23,42,.10);
  --sh-lg:0 18px 50px rgba(15,23,42,.18);
  --sans:'Plus Jakarta Sans',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--sans)}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.grad{background:var(--grad)}
.hide{display:none!important}
.mono{font-family:var(--mono)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cfdaeb;border-radius:9px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#b6c5dc;background-clip:padding-box}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ============ LOGIN ============ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1100px 520px at 50% -8%, #d7e6ff 0%, var(--bg) 58%)}
.card{background:#fff;border-radius:22px;box-shadow:var(--sh-lg)}
.login{width:392px;max-width:100%;padding:38px}
/* ---- brand logo (super admin upload kore) ---- */
/* logo na thakle naam er prothom okkhor ta-i mark hisebe thake */
[data-brand-logo] img,.rail .r-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
[data-brand-logo].has-img{background:#fff;padding:3px;box-sizing:border-box;
  border:1px solid rgba(2,6,23,.08);box-shadow:0 4px 12px rgba(2,6,23,.14)}
body.dark [data-brand-logo].has-img{background:#0b141a;border-color:#2a3942}
.rail .r-logo.has-img{background:#fff;padding:3px;box-sizing:border-box;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand .logo{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.brand h1{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.brand h1 span{color:var(--ink)}
.login .tag{color:var(--muted);font-size:13.5px;margin:0 0 26px 54px}
label.lbl{font-size:12px;color:var(--muted);font-weight:600;display:block;margin:0 0 6px 2px}
input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;outline:none;background:#fff;transition:border .15s,box-shadow .15s;color:var(--ink)}
input::placeholder{color:#b3bfd0}
input:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.login input{margin-bottom:16px}
.login select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;outline:none;background:#fff;color:var(--ink);margin-bottom:16px}
.login select:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.btn{width:100%;padding:13px;border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s,transform .05s,box-shadow .15s;box-shadow:0 6px 16px rgba(37,99,235,.28)}
.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(1px)}
.err{color:#b91c1c;font-size:13px;margin-bottom:14px;background:#fef2f2;border:1px solid #fecaca;padding:9px 12px;border-radius:10px}

/* ============ APP SHELL ============ */
.app{position:relative;display:grid;grid-template-rows:60px 1fr;height:100vh;overflow:hidden;padding-left:60px}

/* ===== shared left navigation rail (all pages) ===== */
.rail{position:fixed;left:0;top:0;bottom:0;width:60px;background:var(--grad);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px;z-index:60}
.rail .r-logo{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;margin-bottom:10px;text-decoration:none}
.rail a.r-item{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:rgba(255,255,255,.78);text-decoration:none;transition:.15s;position:relative}
.rail a.r-item:hover{background:rgba(255,255,255,.16);color:#fff}
.rail a.r-item.active{background:rgba(255,255,255,.28);color:#fff}
.rail a.r-item svg{width:21px;height:21px}
.rail a.r-item .tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.12s;z-index:5}
.rail a.r-item:hover .tip{opacity:1}
.rail .r-sp{flex:1}
.rail .r-admin{display:none}
body.role-admin .rail .r-admin{display:grid}
.suggest-chips{display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px 0;align-items:center}
.suggest-chips .lbl{font-size:11px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.schip{border:1px solid var(--blue-50);background:var(--tint);color:var(--blue-700);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:18px;cursor:pointer;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.12s}
.schip:hover{background:var(--blue-50);border-color:var(--blue-500)}
body.dark .schip{background:#233138;border-color:#3b4a54;color:#9bc0ff}
@media (max-width:680px){ .rail{width:52px} .app{padding-left:52px} }
/* top app bar */
.appbar{display:flex;align-items:center;gap:16px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-sm);z-index:20}
.appbar .ab-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;width:252px}
.appbar .ab-brand .logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(37,99,235,.32)}
.appbar .ab-brand .wm{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.appbar .ab-brand .wm span{color:var(--ink)}
.gsearch{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;background:#eef2f8;border:1px solid transparent;border-radius:999px;padding:10px 18px;transition:.18s}
.gsearch:focus-within{background:#fff;border-color:#d6e0f0;box-shadow:0 4px 16px rgba(15,23,42,.08)}
.gsearch svg{color:var(--faint);flex:0 0 auto}
.gsearch input{border:none;background:transparent;padding:0;font-size:14px}
.gsearch input:focus{box-shadow:none}
.ab-right{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{background:#eef2f8;border:none;color:#41506a;padding:9px 13px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;gap:7px;align-items:center;transition:.15s}
.iconbtn:hover{background:#e2e9f4;color:var(--ink)}
.sound-toggle .ic-bell-off{display:none}
.sound-toggle.off .ic-bell{display:none}
.sound-toggle.off .ic-bell-off{display:block}
.sound-toggle.off{color:#94a3b8}
.snd-wrap{position:relative;width:0;height:0}
.wa-wrap{position:relative;width:0;height:0}
.wa-menu{right:-30px;width:280px}
/* shob thik thakle ekdom shanto — alada rong nai, shudhu ekta sobuj dot.
   kichhu down hole tokhon lal hoye chokhe pore. */
.wastat{padding:9px 11px}
.wa-ic{position:relative;display:inline-flex;align-items:center}
.wa-dot{position:absolute;right:-3px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:#16a34a;box-shadow:0 0 0 2px #eef2f8;transition:.15s}
.wastat:hover .wa-dot{box-shadow:0 0 0 2px #e2e9f4}
.wa-lbl{font-size:12px;font-weight:800;letter-spacing:-.01em}
.wastat.all-ok .wa-lbl{display:none}          /* sob thik -> kono lekha na */
.wastat.has-down{color:#b91c1c;background:#fee2e2}
.wastat.has-down:hover{background:#fecaca}
.wastat.has-down .wa-dot{background:#dc2626;box-shadow:0 0 0 2px #fee2e2;animation:wapulse 1.8s ease-out infinite}
.wastat.has-down:hover .wa-dot{box-shadow:0 0 0 2px #fecaca}
.wastat.is-unknown .wa-dot{background:#94a3b8;animation:none}
@keyframes wapulse{0%{transform:scale(1);opacity:1}55%{transform:scale(1.35);opacity:.55}100%{transform:scale(1);opacity:1}}
body.dark .wa-dot{box-shadow:0 0 0 2px #202c33}
body.dark .wastat:hover .wa-dot{box-shadow:0 0 0 2px #2a3942}
body.dark .wastat.has-down{color:#fca5a5;background:rgba(185,28,28,.22)}
body.dark .wastat.has-down .wa-dot{box-shadow:0 0 0 2px rgba(185,28,28,.22)}
.wastat-row{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:9px;
  border:none;background:none;text-align:left;cursor:default;font-size:13px;font-weight:600;color:var(--ink)}
.wastat-row.clickable{cursor:pointer}
.wastat-row.clickable:hover{background:var(--tint)}
.wastat-row .d{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.wastat-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wastat-row .st{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;flex:0 0 auto}
.wa-ok .d{background:#16a34a}    .wa-ok .st{background:#dcfce7;color:#15803d}
.wa-bad .d{background:#dc2626}   .wa-bad .st{background:#fee2e2;color:#b91c1c}
.wa-unk .d{background:#94a3b8}   .wa-unk .st{background:#eef2f8;color:#64748b}
.wa-note{font-size:11.5px;color:var(--faint);padding:6px 10px 8px;line-height:1.5}
.wa-modal{width:360px;max-width:100%}
.wa-qr-body{padding:20px;text-align:center}
.wa-qr-box{width:252px;height:252px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;display:grid;place-items:center;overflow:hidden}
.wa-qr-box img{width:236px;height:236px;object-fit:contain}
.wa-qr-msg{margin-top:14px;font-size:13.5px;font-weight:700}
.wa-qr-help{margin-top:8px;font-size:12px;color:var(--faint);line-height:1.55}
body.dark .wastat-row{color:var(--ink)}
body.dark .wastat-row.clickable:hover{background:#202c33}
body.dark .wa-ok .st{background:rgba(0,168,132,.2);color:#7fdfc4}
body.dark .wa-bad .st{background:rgba(185,28,28,.25);color:#fca5a5}
body.dark .wa-unk .st{background:#202c33;color:#8696a0}
.snd-menu{position:absolute;top:30px;right:-42px;width:238px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-lg);padding:7px;z-index:70;animation:fade .14s ease}
.snd-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:7px 10px 6px}
.snd-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;padding:9px 10px;border-radius:9px;font-size:13px;
  font-weight:600;color:var(--ink);transition:.12s}
.snd-item:hover{background:var(--tint)}
.snd-item.on{background:var(--blue-50);color:var(--blue-600)}
.snd-item.on::after{content:"✓";font-weight:800}
.snd-sep{height:1px;background:var(--line);margin:6px 4px}
.snd-item.snd-mute{color:#b91c1c}
.snd-item.snd-mute:hover{background:#fef2f2}
.ab-div{width:1px;height:26px;background:var(--line)}
.profile{display:flex;align-items:center;gap:9px}
.profile small{font-size:13px;font-weight:700}
.ghost{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:8px 10px;border-radius:9px}
.ghost:hover{background:#f1f5fb;color:var(--ink)}

.panes{display:grid;grid-template-columns:330px 1fr 296px;min-height:0;height:100%}
/* ISP account e Details e onek beshi data thake — column ta chowra kori.
   (1181px+ e-i shudhu, tar niche responsive rule gulo ager motoi chole) */
@media(min-width:1181px){
  body.biz-isp .panes{grid-template-columns:310px 1fr 280px}
}
@media(min-width:1181px) and (max-width:1420px){
  body.biz-isp .panes{grid-template-columns:290px 1fr 250px}
}
@media(min-width:1700px){
  body.biz-isp .panes{grid-template-columns:330px 1fr 308px}
}
.col{background:var(--panel);display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
.col.left{border-right:1px solid var(--line)}
.col.right{border-left:1px solid var(--line);background:#fbfcfe}

/* avatars */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto;text-transform:uppercase;letter-spacing:.02em}
.av.sm{width:44px;height:44px;font-size:15px}
.av.md{width:34px;height:34px;font-size:13px}
.av.lg{width:72px;height:72px;font-size:26px;box-shadow:0 8px 22px rgba(15,23,42,.16)}
.av.xs{width:30px;height:30px;font-size:12px}

/* segmented tabs */
.inbox-tabs{display:flex;gap:5px;padding:12px 14px 8px;background:#fff}
.inbox-tabs button{flex:1;border:none;cursor:pointer;background:#eef2f8;color:#5b6b86;font-weight:700;font-size:13px;padding:10px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;transition:.16s}
.inbox-tabs button:hover{background:#e3eaf5}
.inbox-tabs button.active{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.28)}
.inbox-tabs button:hover.active{filter:brightness(1.04)}
.inbox-tabs button .cnt{font-size:11px;font-weight:700;background:rgba(15,23,42,.10);padding:1px 8px;border-radius:20px;min-width:20px}
.inbox-tabs button.active .cnt{background:rgba(255,255,255,.26)}

/* conversation list */
.convs{overflow-y:auto;flex:1;padding:4px 8px 12px}
.conv{display:flex;gap:12px;padding:12px 12px;cursor:pointer;border-radius:14px;position:relative;transition:background .13s;margin-bottom:2px}
.conv:hover{background:var(--tint)}
.conv.active{background:var(--blue-50)}
.conv.active::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--grad)}
.conv .body{min-width:0;flex:1}
.conv .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.conv .name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.conv .time{font-size:11px;color:var(--faint);flex:0 0 auto;font-weight:600}
.conv .prev{font-size:12.5px;color:#14202e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;line-height:1.4}
.conv .meta{display:flex;align-items:center;gap:6px;margin-top:8px;min-width:0}
.conv .meta .chip{flex:0 0 auto}
.conv .meta .pgtag{flex:0 1 auto;min-width:0;max-width:none}
.chip{font-size:10.5px;padding:3px 10px 3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;font-weight:700;text-transform:capitalize}
.chip .d{width:6px;height:6px;border-radius:50%}
.c-messenger{background:#e6efff;color:#1d4ed8}.c-messenger .d{background:#1d4ed8}
.c-instagram{background:#fde6f1;color:#be185d}.c-instagram .d{background:#be185d}
.c-whatsapp{background:#dcfce7;color:#15803d}.c-whatsapp .d{background:#15803d}
/* WhatsApp group */
.c-group{background:#ede9fe;color:#6d28d9}.c-group .d{background:#6d28d9}
.gbadge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-right:5px;color:#6d28d9;vertical-align:-2px}
.gbadge svg{width:14px;height:14px}
.av.group{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;display:grid;place-items:center}
.av.group svg{width:54%;height:54%;stroke-width:2.1}
.conv.is-group .name{color:#5b21b6}
.cmt-chip{font-size:10.5px;font-weight:700;color:#2563eb;background:#dbe8ff;padding:3px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.post-ref{font-size:11px;color:#475569;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}