/* =============================================================================
   WhatsApp engine — RM <-> lead chat. In-SPA full-screen overlay (z above the
   app shell), ported from Helix-Integration-prototype/whatsapp-engine.html.
   Every selector is scoped under #whatsAppView and uses wa-* class names so the
   module's styling never leaks into — or collides with — the rest of the app.
   Loaded before module-shell.css. Reduced motion is respected at the bottom.
   ========================================================================== */
#whatsAppView{
  --wa-bg:#f6f7f9; --wa-surface:#ffffff;
  --wa-ink:#1b1b1f; --wa-ink-2:#3c3c43; --wa-muted:#6b6b76; --wa-faint:#9a9aa3;
  --wa-line:#e8e8ec; --wa-line-2:#f0f0f3;
  --wa-brand:#4f46e5; --wa-brand-weak:#eef0fe;
  --wa-green:#1da955; --wa-green-weak:#e7f6ee; --wa-green-ink:#147a3d;
  --wa-amber:#f0a823; --wa-amber-weak:#fdf3e0; --wa-amber-ink:#9a6b09;
  --wa-red:#e5484d;
  --wa-out:#dcf7e3; --wa-out-ink:#0e2a18; --wa-in:#ffffff;
  --wa-read:#34a4ff; --wa-chat-bg:#eef0f2;
  --wa-radius:16px; --wa-radius-sm:10px;
  --wa-shadow:0 1px 2px rgba(20,20,30,.05), 0 6px 20px rgba(20,20,30,.05);
  position:fixed; inset:0; z-index:1000; background:var(--wa-bg);
  color:var(--wa-ink); font-family:inherit; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
#whatsAppView[hidden]{ display:none; }
body.is-whatsapp-route{ overflow:hidden; }

#whatsAppView *{ box-sizing:border-box; }
#whatsAppView .wa-shell{
  max-width:1180px; width:100%; margin:0 auto; padding:16px 20px 20px;
  height:100%; display:flex; flex-direction:column; min-height:0;
}

/* top bar */
#whatsAppView .wa-topbar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
#whatsAppView .wa-back{
  appearance:none; border:1px solid var(--wa-line); background:var(--wa-surface);
  color:var(--wa-ink-2); border-radius:10px; height:38px; padding:0 12px;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; box-shadow:var(--wa-shadow); transition:background .12s;
}
#whatsAppView .wa-back:hover{ background:var(--wa-line-2); }
#whatsAppView .wa-back svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#whatsAppView .wa-brand{ display:flex; align-items:center; gap:11px; min-width:0; }
#whatsAppView .wa-ic{ width:38px; height:38px; border-radius:11px; background:var(--wa-green); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
#whatsAppView .wa-brand h1{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
#whatsAppView .wa-num{ font-size:12px; color:var(--wa-muted); margin-top:1px; display:flex; align-items:center; gap:6px; }
#whatsAppView .wa-dot-on{ color:var(--wa-green-ink); }
#whatsAppView .wa-dot-off{ color:var(--wa-amber-ink); }
#whatsAppView .wa-me{ margin-left:auto; display:flex; align-items:center; gap:9px; background:var(--wa-surface); border:1px solid var(--wa-line); border-radius:999px; padding:5px 12px 5px 6px; box-shadow:var(--wa-shadow); }
#whatsAppView .wa-me .wa-av{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; background:#0d9488; }
#whatsAppView .wa-me .wa-lbl{ font-size:12.5px; font-weight:600; }
#whatsAppView .wa-me .wa-role{ font-size:11px; color:var(--wa-muted); }

/* reconnect banner */
#whatsAppView .wa-reconnect{ display:none; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  color:var(--wa-amber-ink); background:var(--wa-amber-weak); border:1px solid #f3e2bf; border-radius:10px; padding:7px 12px; margin-bottom:10px; }
#whatsAppView.is-reconnecting .wa-reconnect{ display:flex; }
#whatsAppView .wa-reconnect .wa-spin{ width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:wa-spin .7s linear infinite; }

/* app: two panes */
#whatsAppView .wa-app{ flex:1; min-height:0; display:grid; grid-template-columns:340px 1fr;
  background:var(--wa-surface); border:1px solid var(--wa-line); border-radius:18px; box-shadow:var(--wa-shadow); overflow:hidden; }

/* conversation list */
#whatsAppView .wa-listpane{ border-right:1px solid var(--wa-line); display:flex; flex-direction:column; min-height:0; }
#whatsAppView .wa-list-head{ padding:14px 14px 10px; }
#whatsAppView .wa-search{ width:100%; font:inherit; font-size:13.5px; padding:9px 12px 9px 34px; border:1px solid var(--wa-line);
  border-radius:999px; outline:none; background:var(--wa-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" stroke="%239a9aa3" stroke-width="2" stroke-linecap="round"><circle cx="6.5" cy="6.5" r="4.5"/><path d="m11 11 3 3"/></svg>') 12px center no-repeat;
  transition:border-color .15s, box-shadow .15s; }
#whatsAppView .wa-search:focus{ border-color:var(--wa-brand); box-shadow:0 0 0 3px var(--wa-brand-weak); }
#whatsAppView .wa-convs{ flex:1; overflow:auto; padding:4px 6px 10px; }
#whatsAppView .wa-conv{ display:flex; gap:11px; align-items:center; padding:10px; border-radius:12px; cursor:pointer; transition:background .12s; }
#whatsAppView .wa-conv:hover{ background:var(--wa-line-2); }
#whatsAppView .wa-conv.active{ background:var(--wa-brand-weak); }
#whatsAppView .wa-conv:focus-visible{ outline:2px solid var(--wa-brand); outline-offset:-2px; }
#whatsAppView .wa-conv .wa-av{ position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; }
#whatsAppView .wa-conv .wa-win{ position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; border:2px solid #fff; }
#whatsAppView .wa-win.open{ background:var(--wa-green); } #whatsAppView .wa-win.closed{ background:var(--wa-amber); }
#whatsAppView .wa-conv .wa-mid{ flex:1; min-width:0; }
#whatsAppView .wa-conv .wa-nm{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#whatsAppView .wa-conv .wa-prev{ font-size:12.5px; color:var(--wa-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
#whatsAppView .wa-conv .wa-prev .wa-you{ color:var(--wa-faint); }
#whatsAppView .wa-conv .wa-right{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
#whatsAppView .wa-conv .wa-tm{ font-size:11px; color:var(--wa-faint); }
#whatsAppView .wa-conv .wa-badge{ min-width:19px; height:19px; padding:0 6px; border-radius:999px; background:var(--wa-green); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
#whatsAppView .wa-unassigned-tag{ font-size:10px; font-weight:700; color:var(--wa-amber-ink); background:var(--wa-amber-weak); border-radius:6px; padding:1px 6px; }

/* thread */
#whatsAppView .wa-thread{ display:flex; flex-direction:column; min-height:0; background:var(--wa-chat-bg); }
#whatsAppView .wa-t-head{ display:flex; align-items:center; gap:11px; padding:12px 16px; background:var(--wa-surface); border-bottom:1px solid var(--wa-line); }
#whatsAppView .wa-t-back{ display:none; appearance:none; background:none; border:none; cursor:pointer; color:var(--wa-ink-2); padding:4px; margin:-4px 2px -4px -4px; }
#whatsAppView .wa-t-head .wa-av{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; flex:0 0 auto; }
#whatsAppView .wa-t-head .wa-info{ flex:1; min-width:0; }
#whatsAppView .wa-t-head .wa-nm{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; }
#whatsAppView .wa-t-head .wa-sub{ font-size:12px; color:var(--wa-muted); margin-top:1px; }
#whatsAppView .wa-assigned{ font-size:11px; font-weight:600; color:var(--wa-green-ink); background:var(--wa-green-weak); border-radius:999px; padding:3px 9px; display:inline-flex; align-items:center; gap:5px; }
#whatsAppView .wa-assigned svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#whatsAppView .wa-win-chip{ font-size:11px; font-weight:600; border-radius:999px; padding:3px 9px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
#whatsAppView .wa-win-chip.open{ background:var(--wa-green-weak); color:var(--wa-green-ink); }
#whatsAppView .wa-win-chip.closed{ background:var(--wa-amber-weak); color:var(--wa-amber-ink); }

#whatsAppView .wa-msgs{ flex:1; overflow:auto; padding:18px 18px 8px; display:flex; flex-direction:column; gap:3px; }
#whatsAppView .wa-daysep{ align-self:center; background:rgba(255,255,255,.8); color:var(--wa-muted); font-size:11px; font-weight:600; border-radius:999px; padding:4px 12px; margin:8px 0; }
#whatsAppView .wa-bubble{ max-width:74%; padding:8px 11px 6px; border-radius:12px; font-size:13.5px; line-height:1.4; position:relative; box-shadow:0 1px 1px rgba(20,20,30,.05); word-wrap:break-word; white-space:pre-wrap; animation:wa-pop .14s ease-out; }
#whatsAppView .wa-bubble .wa-meta{ display:flex; align-items:center; gap:4px; justify-content:flex-end; margin-top:3px; font-size:10.5px; color:var(--wa-faint); }
#whatsAppView .wa-bubble.in{ align-self:flex-start; background:var(--wa-in); border-top-left-radius:4px; }
#whatsAppView .wa-bubble.out{ align-self:flex-end; background:var(--wa-out); color:var(--wa-out-ink); border-top-right-radius:4px; }
#whatsAppView .wa-bubble.out .wa-meta{ color:#5a7a64; }
#whatsAppView .wa-bubble.tmpl{ border:1px dashed rgba(20,120,60,.3); }
#whatsAppView .wa-bubble.failed{ border:1px solid var(--wa-red); }
#whatsAppView .wa-who-sent{ font-size:10.5px; color:#5a7a64; font-weight:600; margin-bottom:2px; }
#whatsAppView .wa-tick{ display:inline-flex; }
#whatsAppView .wa-tick.read{ color:var(--wa-read); }
#whatsAppView .wa-tick svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#whatsAppView .wa-err{ color:var(--wa-red); font-weight:600; }

/* composer */
#whatsAppView .wa-composer{ padding:12px 16px; background:var(--wa-surface); border-top:1px solid var(--wa-line); }
#whatsAppView .wa-compose-row{ display:flex; gap:10px; align-items:flex-end; }
#whatsAppView .wa-compose-row textarea{ flex:1; font:inherit; font-size:14px; line-height:1.4; padding:10px 14px; border:1px solid var(--wa-line);
  border-radius:20px; outline:none; resize:none; max-height:120px; min-height:42px; transition:border-color .15s, box-shadow .15s; }
#whatsAppView .wa-compose-row textarea:focus{ border-color:var(--wa-green); box-shadow:0 0 0 3px var(--wa-green-weak); }
#whatsAppView .wa-send{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; background:var(--wa-green); color:#fff; display:grid; place-items:center; transition:filter .15s, transform .05s; }
#whatsAppView .wa-send svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#whatsAppView .wa-send:hover{ filter:brightness(1.06); } #whatsAppView .wa-send:active{ transform:scale(.96); }
#whatsAppView .wa-send:disabled{ opacity:.4; cursor:not-allowed; }
#whatsAppView .wa-closed-note{ background:var(--wa-amber-weak); border:1px solid #f3e2bf; border-radius:12px; padding:12px 14px; display:flex; gap:11px; align-items:center; }
#whatsAppView .wa-closed-note svg{ flex:0 0 auto; fill:none; stroke:#9a6b09; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#whatsAppView .wa-closed-note .wa-txt{ flex:1; font-size:12.5px; color:var(--wa-amber-ink); line-height:1.4; }
#whatsAppView .wa-closed-note .wa-txt b{ font-weight:700; }
#whatsAppView .wa-tmpl-btn{ appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
  background:var(--wa-green); color:#fff; border:none; border-radius:10px; padding:9px 14px; }
#whatsAppView .wa-tmpl-btn:hover{ filter:brightness(1.05); }

/* empty / loading / error states */
#whatsAppView .wa-empty{ flex:1; display:grid; place-items:center; text-align:center; color:var(--wa-muted); padding:30px; }
#whatsAppView .wa-empty .wa-big{ width:64px; height:64px; border-radius:20px; background:var(--wa-green-weak); color:var(--wa-green); display:grid; place-items:center; margin:0 auto 14px; }
#whatsAppView .wa-empty h3{ margin:0 0 6px; color:var(--wa-ink); font-size:16px; }
#whatsAppView .wa-empty p{ margin:0; font-size:13.5px; max-width:40ch; line-height:1.5; }
#whatsAppView .wa-empty .wa-retry{ margin-top:14px; appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:#fff; background:var(--wa-green); border:none; border-radius:10px; padding:9px 16px; }
#whatsAppView .wa-skel{ padding:10px; display:flex; gap:11px; align-items:center; }
#whatsAppView .wa-skel .wa-sq{ width:44px; height:44px; border-radius:13px; background:var(--wa-line-2); }
#whatsAppView .wa-skel .wa-ln{ height:11px; border-radius:6px; background:var(--wa-line-2); }
#whatsAppView .wa-skel-wrap .wa-sk-pulse{ animation:wa-pulse 1.1s ease-in-out infinite; }

/* template modal */
#whatsAppView .wa-scrim{ position:fixed; inset:0; background:rgba(24,24,32,.42); display:none; align-items:center; justify-content:center; padding:20px; z-index:1010; }
#whatsAppView .wa-scrim.open{ display:flex; }
#whatsAppView .wa-modal{ background:var(--wa-surface); border-radius:18px; box-shadow:0 20px 60px rgba(20,20,30,.28); width:100%; max-width:460px; overflow:hidden; }
#whatsAppView .wa-modal-head{ padding:16px 20px; border-bottom:1px solid var(--wa-line-2); display:flex; align-items:center; gap:10px; }
#whatsAppView .wa-modal-head h3{ margin:0; font-size:15.5px; font-weight:700; }
#whatsAppView .wa-modal-head p{ margin:2px 0 0; font-size:12px; color:var(--wa-muted); }
#whatsAppView .wa-modal-x{ margin-left:auto; appearance:none; cursor:pointer; background:none; border:none; color:var(--wa-faint); font-size:22px; width:30px; height:30px; border-radius:8px; }
#whatsAppView .wa-modal-x:hover{ background:var(--wa-line-2); color:var(--wa-ink); }
#whatsAppView .wa-modal-body{ padding:14px 16px 18px; max-height:60vh; overflow:auto; }
#whatsAppView .wa-tmpl-card{ text-align:left; width:100%; appearance:none; cursor:pointer; font:inherit; background:var(--wa-bg);
  border:1px solid var(--wa-line); border-radius:12px; padding:12px 14px; margin-bottom:9px; transition:border-color .15s, background .15s; }
#whatsAppView .wa-tmpl-card:hover{ border-color:var(--wa-green); background:var(--wa-green-weak); }
#whatsAppView .wa-tmpl-card .wa-tn{ font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#whatsAppView .wa-tmpl-card .wa-tag{ font-size:10.5px; font-weight:600; color:var(--wa-green-ink); background:var(--wa-green-weak); border-radius:999px; padding:2px 8px; }
#whatsAppView .wa-tmpl-card .wa-tb{ font-size:12.5px; color:var(--wa-ink-2); margin-top:6px; line-height:1.4; }

@keyframes wa-spin{ to{ transform:rotate(360deg); } }
@keyframes wa-pop{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
@keyframes wa-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* mobile single-pane */
@media (max-width:780px){
  #whatsAppView .wa-shell{ padding:10px 10px 12px; }
  #whatsAppView .wa-app{ grid-template-columns:1fr; }
  #whatsAppView .wa-thread{ display:none; }
  #whatsAppView.viewing .wa-listpane{ display:none; }
  #whatsAppView.viewing .wa-thread{ display:flex; }
  #whatsAppView .wa-t-back{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  #whatsAppView *, #whatsAppView *::before, #whatsAppView *::after{ transition:none !important; animation:none !important; }
}

/* ===== Attachments (media send/receive) ===================================== */
.wa-attach{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:50%;background:transparent;color:var(--wa-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.wa-attach:hover{background:var(--wa-line-2);color:var(--wa-ink-2)}
.wa-attach[disabled]{opacity:.45;cursor:not-allowed}
.wa-compose-row{position:relative}
.wa-attach-menu{position:absolute;left:8px;bottom:54px;background:var(--wa-surface);border:1px solid var(--wa-line);border-radius:var(--wa-radius-sm);box-shadow:var(--wa-shadow);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:200px;z-index:30}
.wa-attach-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border:none;background:transparent;border-radius:8px;font-size:13.5px;color:var(--wa-ink-2);cursor:pointer;text-align:left}
.wa-attach-item:hover{background:var(--wa-brand-weak);color:var(--wa-brand)}
.wa-attach-item svg{flex:0 0 auto;color:var(--wa-brand)}

.wa-media{border-radius:var(--wa-radius-sm);overflow:hidden;min-width:180px;min-height:42px;background:var(--wa-line-2);color:var(--wa-muted);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.wa-media.loaded{background:transparent;display:block;min-height:0}
.wa-media img{display:block;max-width:280px;max-height:280px;border-radius:var(--wa-radius-sm);cursor:zoom-in}
.wa-media video{display:block;max-width:300px;max-height:260px;border-radius:var(--wa-radius-sm)}
.wa-media audio{width:240px;display:block}
.wa-media-cap{margin-top:4px;font-size:13.5px;white-space:pre-wrap}
.wa-media-missing{font-size:12.5px;color:var(--wa-muted);font-style:italic;padding:4px 2px}

.wa-doc-card{display:flex;align-items:center;gap:10px;min-width:210px;max-width:300px;padding:10px 12px;border:1px solid var(--wa-line);border-radius:var(--wa-radius-sm);background:var(--wa-surface);cursor:pointer;text-align:left}
.wa-doc-card:hover{border-color:var(--wa-brand);background:var(--wa-brand-weak)}
.wa-doc-card svg:first-child{color:var(--wa-brand)}
.wa-doc-card svg:last-child{color:var(--wa-muted);margin-left:auto}
.wa-doc-meta{display:flex;flex-direction:column;min-width:0}
.wa-doc-meta b{font-size:13px;color:var(--wa-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-doc-meta i{font-style:normal;font-size:11.5px;color:var(--wa-muted)}

.wa-contact-card{display:flex;align-items:center;gap:10px;min-width:190px;padding:9px 12px;border:1px solid var(--wa-line);border-radius:var(--wa-radius-sm);background:var(--wa-surface)}
.wa-contact-card svg{color:var(--wa-brand)}
.wa-contact-card span{display:flex;flex-direction:column}
.wa-contact-card b{font-size:13px;font-weight:600;color:var(--wa-ink)}
.wa-contact-card i{font-style:normal;font-size:12px;color:var(--wa-muted)}

.wa-loc-link{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--wa-line);border-radius:var(--wa-radius-sm);background:var(--wa-surface);color:var(--wa-brand);font-size:13px;font-weight:600;text-decoration:none}
.wa-loc-link:hover{background:var(--wa-brand-weak)}

.wa-attach-dialog{position:absolute;inset:0;background:rgba(20,20,30,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.wa-attach-form{background:var(--wa-surface);border-radius:var(--wa-radius);box-shadow:var(--wa-shadow);padding:20px;width:min(340px,calc(100% - 32px));display:flex;flex-direction:column;gap:12px}
.wa-attach-form h4{margin:0;font-size:15px;color:var(--wa-ink)}
.wa-attach-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--wa-muted)}
.wa-attach-form input{border:1px solid var(--wa-line);border-radius:8px;padding:9px 10px;font-size:13.5px;color:var(--wa-ink)}
.wa-attach-form input:focus{outline:none;border-color:var(--wa-brand)}
.wa-attach-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.wa-attach-cancel{border:1px solid var(--wa-line);background:transparent;border-radius:8px;padding:8px 14px;font-size:13px;color:var(--wa-ink-2);cursor:pointer}
.wa-attach-go{border:none;background:var(--wa-brand);color:#fff;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer}
.wa-attach-go:hover{filter:brightness(1.05)}