/* owner: crm · contract: server/ADMIN-V2.md sec. 5.14, 3.4 (wa.css: Maya's WhatsApp conversations, 6.10)
   A conversation's line (the initial, the name and number, the last line, when, its chips) and its lines (Maya'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); 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: end; 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: start; 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 time { font-size: 11px; opacity: .7; text-align: end; }

/* ---------- 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-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; }
}