/* «صندوق المراسيل» (public/messengers-box.js): only theme tokens; the pieces are the app's own .st- rows and .sec-card. The root
   copies the .settings screen (own class, so the settings-page injectors in wa.js / mirsal.js / connect-wa.js skip it) */
.mb-scr{position:fixed;inset:0;z-index:55;background:var(--chrome);color:var(--text);display:flex;flex-direction:column;animation:fi .15s;padding-top:var(--st,env(safe-area-inset-top))}
.mb-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:6px var(--space-4) calc(var(--space-6) + var(--sb,0px));gap:var(--space-3);width:100%}
.mb-side{display:flex;flex-direction:column;gap:var(--space-3)}
.mb-main{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.mb-scr[data-view=list]:not(.has-cur) .mb-main,.mb-scr:not([data-view=list]) .mb-side,.mb-scr[data-view=list].has-cur .mb-main{display:none}
.mb-av{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;flex:none;background:var(--brand-soft);color:var(--brand);font-weight:var(--fw-bold)}
.mb-row .acc-tx{flex:1;min-width:0}.mb-row.on{background:var(--hover)}
.mb-hrow{display:flex;align-items:center;gap:var(--space-3)}.mb-hrow .acc-tx{flex:1;display:flex;flex-direction:column}
.mb-acts{display:flex;gap:var(--space-2);flex-wrap:wrap}
.mb-tabs{padding:0}
.mb-two{display:flex;flex-direction:column;gap:var(--space-3)}
.mb-two[data-tab=sup] .mb-chat[data-k=contact],.mb-two[data-tab=contact] .mb-chat[data-k=sup]{display:none}
.mb-chat{min-height:0}
.mb-feed{display:flex;flex-direction:column;gap:var(--space-2);max-height:58vh;overflow:auto;padding:2px}
.mb-b{max-width:86%;padding:8px 12px;border-radius:var(--r-bubble);font-size:var(--bubble-fs);line-height:var(--lh);overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
.mb-b.in{align-self:flex-start;background:var(--bubble-agent);color:var(--bubble-ink);border:.5px solid var(--stroke)}
.mb-b.out{align-self:flex-end;background:var(--brand-soft);color:var(--text)}
.mb-b.draft{border:1px dashed var(--brand)}
.mb-who{font-size:var(--fs-xxs);color:var(--text3)}.mb-meta{font-size:var(--fs-xxs);color:var(--text3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mb-tx{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mb-sys{align-self:center;font-size:var(--fs-xxs);color:var(--text3);background:var(--hover);border-radius:var(--radius-pill);padding:2px 10px}
.mb-col{flex-direction:column;align-items:stretch;gap:6px;text-align:start}.mb-ta{height:auto;min-height:72px;padding:8px 12px;resize:vertical}
.mb-lim{gap:var(--space-2)}.mb-lim label{flex:1;display:flex;flex-direction:column;gap:4px}
.mb-save{padding:var(--space-3) 0}
@media (min-width:900px){
  .mb-body{flex-direction:row;align-items:flex-start;max-width:1400px;width:100%;margin:0 auto}
  .mb-side{width:320px;flex:none;position:sticky;top:0}
  .mb-scr .mb-side{display:flex!important}.mb-scr .mb-main{display:flex!important;flex:1}
  .mb-scr .mb-tabs{display:none}
  .mb-two{flex-direction:row;align-items:stretch}.mb-two .mb-chat{display:flex!important;flex:1}
  .mb-scr[data-view=settings] .mb-main,.mb-scr[data-view=add] .mb-main{max-width:640px}
}
.mb-fab{position:absolute;bottom:calc(100% + 46px);right:12px;z-index:7;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:.5px solid var(--stroke);background:var(--elevated);color:var(--text3);box-shadow:var(--shadow-pill);cursor:pointer;padding:0}
.mb-fab svg{width:18px;height:18px}.side-panel .mb-fab{display:none}