/* owner: crm · contract: server/ADMIN-V2.md sec. 5.14, 3.4 (wa.css: Macy's WhatsApp conversations, 6.10)
   A conversation's line (the initial, the name and number, the last line, when, its chips) and its lines (Macy's bubbles in ink
   at the start, theirs on ground at the end, as everywhere in the admin), for the CRM's WhatsApp view and the menu's WhatsApp tab
   (both draw them with js/wa.js); 6.10: the composer that writes as Macy (the tab's pane and a lead's card); then the tab's own
   frame: the list and the open conversation side by side from 761 px (the conversation stays in view while the list scrolls, and
   scrolls its own lines), on phones the list, then the conversation with a way back. Cards, chips, buttons, notices and the
   surface inks are base.css. */

/* ---------- a conversation's line, and its lines (shared) ---------- */
:is(.view-crm .crm-thread, .view-whatsapp) .ic { font-size: 18px; font-weight: 500; background-color: var(--okSoft); color: var(--ink); }
:is(.view-crm, .view-whatsapp) .tmain { display: grid; gap: 2px; min-width: 0; }
:is(.view-crm, .view-whatsapp) .tmain b { overflow-wrap: anywhere; }
:is(.view-crm, .view-whatsapp) .tnum { font-size: 13px; font-weight: 400; color: var(--muted); }
:is(.view-crm, .view-whatsapp) .tmain .sum { font-size: 14px; color: var(--muted); }
:is(.view-crm, .view-whatsapp) .tfrom { font-weight: 500; color: var(--ink); }
:is(.view-crm, .view-whatsapp) .tmeta { display: grid; justify-items: end; gap: 6px; font-size: 13px; color: var(--muted); }
:is(.view-crm, .view-whatsapp) .tchips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
:is(.view-crm, .view-whatsapp) .tchips .chip { min-height: 22px; padding: 2px 8px; font-size: 12px; }
:is(.view-crm, .view-whatsapp) .tchev { color: var(--muted); transition: transform .2s; }

:is(.view-crm, .view-whatsapp) .crm-bubbles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
:is(.view-crm, .view-whatsapp) .crm-bubbles li {
  display: grid; gap: 2px; justify-self: start; max-width: 86%; padding: 10px 16px; border-radius: 20px;
  background-color: var(--ground); color: var(--ink); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
}
:is(.view-crm, .view-whatsapp) .crm-bubbles li[data-dir="out"] { justify-self: end; background-color: var(--deep); color: #fff; }
:is(.view-crm, .view-whatsapp) .crm-bubbles .btext { white-space: pre-line; }
:is(.view-crm, .view-whatsapp) .crm-bubbles li[data-by="owner"] { border: 1px solid var(--fgLine); background-color: var(--fgSoft); color: var(--fg); } /* coexistence (7.10): from the owner's app */
:is(.view-crm, .view-whatsapp) .crm-bubbles .bby { font-size: 12px; font-weight: 500; opacity: .75; }
:is(.view-crm, .view-whatsapp) .crm-bubbles time { font-size: 11px; opacity: .7; text-align: end; }
:is(.view-crm, .view-whatsapp) .crm-bubbles .bby { font-size: 11px; font-weight: 500; opacity: .75; } /* 6.10: "Sent by you" */

/* ---------- writing as Macy (6.10, shared: the tab's pane and a lead's card): the window's line, Macy's ready drafts, the box ---------- */
:is(.view-crm, .view-whatsapp) .wa-compose { display: grid; gap: 12px; min-width: 0; }
:is(.view-crm, .view-whatsapp) .wa-ctitle { font-size: 16px; font-weight: 500; }
:is(.view-crm, .view-whatsapp) .wa-window { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
:is(.view-crm, .view-whatsapp) .wa-compose[data-open="false"] .wa-window { color: var(--ink); }
:is(.view-crm, .view-whatsapp) .wa-asks { display: grid; gap: 8px; }
:is(.view-crm, .view-whatsapp) .wa-asklabel { font-size: 13px; font-weight: 500; color: var(--muted); }
:is(.view-crm, .view-whatsapp) .wa-presets { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.view-crm, .view-whatsapp) .wa-tell { display: flex; gap: 8px; }
:is(.view-crm, .view-whatsapp) .wa-tell .input { flex: 1; min-width: 0; min-height: 40px; padding: 0 16px; font-size: 15px; }
:is(.view-crm, .view-whatsapp) .wa-sendform .field { margin-top: 0; }
:is(.view-crm, .view-whatsapp) .wa-sendform .textarea { min-height: 84px; }
:is(.view-crm, .view-whatsapp) .wa-sendform .acts { align-items: center; margin-top: 10px; }
:is(.view-crm, .view-whatsapp) .wa-count { margin-inline-start: auto; font-size: 13px; color: var(--muted); }
/* the next automatic follow-up, and "Cancel follow-ups" */
:is(.view-crm, .view-whatsapp) .wa-fu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--muted); }
:is(.view-crm, .view-whatsapp) .wa-fu .btn { margin-inline-start: auto; }

/* ---------- the WhatsApp tab: the list and the open conversation ---------- */
.view-whatsapp .wa-split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.view-whatsapp .wa-listpane { padding: 12px; }
.view-whatsapp .wa-search { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; color: var(--muted); }
.view-whatsapp .wa-search .input { flex: 1; min-width: 0; }
.view-whatsapp .wa-list { display: grid; gap: 2px; }
.view-whatsapp .wa-list > li + li .wa-row { border-top: 1px solid var(--line); }
.view-whatsapp .wa-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 72px;
  padding: 12px 8px; border-radius: 20px; color: var(--ink); text-decoration: none;
}
.view-whatsapp .wa-row:hover { background-color: var(--parch); }
.view-whatsapp .wa-row .sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one line a conversation in the list */
.view-whatsapp .wa-row[aria-current="true"] { background-color: var(--ground); border-top-color: transparent; }
.view-whatsapp .wa-row[aria-current="true"] .ic { background-color: #fff; }
.view-whatsapp .wa-none { padding: 24px 8px; }

.view-whatsapp .wa-pane {
  position: sticky; top: 16px; display: flex; flex-direction: column; min-height: 420px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden;
}
.view-whatsapp .wa-pick { display: grid; justify-items: center; align-content: center; gap: 10px; flex: 1; padding: 40px 24px; color: var(--muted); text-align: center; }
.view-whatsapp .wa-pick > .icon { width: 40px; height: 40px; }
.view-whatsapp .wa-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.view-whatsapp .wa-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.view-whatsapp .wa-who { display: grid; gap: 2px; min-width: 0; }
.view-whatsapp .wa-who h2 { font-size: 20px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.view-whatsapp .wa-back { display: none; }
.view-whatsapp .wa-lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; background-color: var(--parch); }
.view-whatsapp .wa-lines:focus-visible { outline-offset: -3px; }
.view-whatsapp .wa-thread > .tacts { margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.view-whatsapp .wa-thread > .wa-compose { flex: none; padding: 14px 20px 18px; border-top: 1px solid var(--line); } /* 6.10 */
.view-whatsapp .wa-pane > .empty { padding: 32px 20px; }

/* ---------- 760 and down: the list, then the conversation with a way back ---------- */
@media (max-width: 760px) {
  .view-whatsapp .wa-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .view-whatsapp .wa-split[data-open="true"] .wa-listpane, .view-whatsapp .wa-split[data-open="false"] .wa-pane { display: none; }
  .view-whatsapp .wa-listpane { padding: 4px 6px; }
  .view-whatsapp .wa-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding-inline: 4px; }
  .view-whatsapp .wa-row .tchev { display: none; }
  .view-whatsapp .wa-pane { position: static; max-height: none; min-height: 0; }
  .view-whatsapp .wa-head { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .view-whatsapp .wa-head .tchips { grid-column: 1 / -1; justify-content: flex-start; }
  .view-whatsapp .wa-back { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; width: max-content; min-height: 40px; color: var(--ink); font-weight: 500; text-decoration: none; }
  .view-whatsapp .wa-lines { overflow: visible; padding: 16px 12px; }
  .view-whatsapp .wa-thread > .tacts { padding: 14px 16px 18px; }
  .view-whatsapp .wa-thread > .wa-compose { padding: 14px 16px 18px; }
}

/* ---------- SaaS (SAAS-PLAN 4.C): an owner's own WhatsApp connection (js/saas/wa-connect.js), in settings and in the wizard ---------- */
.wa-connect { display: grid; gap: 16px; min-width: 0; }
.wa-connect .wa-what { display: grid; gap: 6px; margin-top: 10px; padding-inline-start: 1.2em; list-style: disc; font-size: 15px; }
.wa-connect .wa-what li { display: list-item; }
/* coexistence (7.10): the app users' way in, Macy's reply wait and what changes in the app, in the same list style */
.wa-connect :is(.wa-app-what, .wa-rules, .wa-app-changes ul) { display: grid; gap: 6px; margin-top: 10px; padding-inline-start: 1.2em; list-style: disc; font-size: 15px; }
.wa-connect :is(.wa-app-what, .wa-rules, .wa-app-changes ul) li { display: list-item; }
.wa-connect .wa-app-what { color: var(--muted); }
.wa-connect .wa-app-changes { margin-top: 12px; }
.wa-connect .wa-app-changes summary { cursor: pointer; font-weight: 500; }
.wa-connect :is(.wa-live, .wa-out):empty { display: none; }
.wa-connect :is(.wa-live, .wa-out)[data-tone="ok"] { color: var(--fg); font-weight: 500; }
.wa-connect :is(.wa-live, .wa-out)[data-tone="bad"] { color: var(--bad); font-weight: 500; }
.wa-connect .kv .num { white-space: normal; overflow-wrap: anywhere; }
.wa-connect .wa-tpl-list { display: grid; margin-top: 12px; }
.wa-connect .wa-tpl-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 10px; border-top: 1px solid var(--line); }
.wa-connect .wa-tpl-list li:first-child { border-top: 0; }
.wa-connect .wa-new { margin-top: 20px; }
/* Meta's JS SDK keeps its helper frames in #fb-root (its own styles are blocked by the page CSP): out of sight */
#fb-root { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }