/* WhatsApp board — loads after the CRM sheets and borrows their tokens
   (--ink, --line, --card, --blue…). The one colour of its own is WhatsApp's
   green, which is used for the send affordances and nothing else, so a green
   control on this board always means "this puts a message on the wire". */
:root{
  --wa-green:#128C4A;      /* darkened from #25D366: 4.6:1 on white */
  --wa-green-ink:#0b6b38;
  --wa-wash:#e8f6ee;
}

/* ── health strip ──────────────────────────────────────────────────────── */
.wa-health{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:12px;
  background:var(--card,#fff);border:1px solid var(--line,#e3e6ef);border-radius:10px;
}
.wa-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;
}
.wa-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.wa-pill.is-ok { color:var(--wa-green-ink);background:var(--wa-wash) }
.wa-pill.is-bad{ color:#a1273f;background:#fdeaee }
.wa-stat{ font-size:12px;color:var(--ink-mute,#676879) }
.wa-stat b{ color:var(--ink,#1f2540);font-size:13px }
.wa-stat.is-bad b{ color:#bb3354 }

/* ── compose: message on the left, audience on the right ───────────────── */
.wa-compose{ display:grid;grid-template-columns:minmax(320px,4fr) 6fr;gap:14px;align-items:start }
.wa-col{ display:flex;flex-direction:column;gap:14px;min-width:0 }
.wa-pad{ padding:14px }
.wa-lbl{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--ink-mute,#676879);margin:12px 0 5px;
}
.wa-lbl:first-child{ margin-top:0 }
.wa-hint{ font-size:11.5px;color:var(--ink-mute,#676879);font-weight:500 }
.wa-lbl .wa-hint{ font-weight:500;text-transform:none;letter-spacing:0;margin-inline-start:6px }
.wa-pad input,.wa-pad select,.wa-pad textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line,#e3e6ef);border-radius:8px;
  font:inherit;font-size:13px;color:var(--ink,#1f2540);background:var(--card,#fff);
}
.wa-pad textarea{ resize:vertical;line-height:1.55;min-height:96px }
.wa-pad input:focus,.wa-pad select:focus,.wa-pad textarea:focus{
  outline:none;border-color:var(--blue,#0073ea);box-shadow:0 0 0 3px rgba(0,115,234,.13);
}

/* ── audience picker ───────────────────────────────────────────────────── */
.wa-chks{ display:flex;gap:8px;flex-wrap:wrap }
.wa-chk{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 12px;border:1px solid var(--line,#e3e6ef);border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--ink,#1f2540);
}
.wa-chk:has(input:checked){ border-color:var(--wa-green);background:var(--wa-wash);color:var(--wa-green-ink) }
.wa-chk input{ width:auto;margin:0;accent-color:var(--wa-green) }
.wa-chk em{ font-style:normal;color:var(--ink-mute,#676879);font-weight:500 }
.wa-filters{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px }
.wa-sel-actions{ display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap }
.wa-sel-btn{
  background:var(--card,#fff);border:1px solid var(--line,#e3e6ef);border-radius:6px;
  padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink,#1f2540);cursor:pointer;
  transition:all .15s ease;
}
.wa-sel-btn:hover{ background:var(--wa-wash,#e8f6ee);border-color:var(--wa-green,#128C4A);color:var(--wa-green-ink,#0b6b38) }
.wa-sel-status{ margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--ink-mute,#676879) }
.wa-count{
  margin-inline-start:auto;font-size:12px;font-weight:700;
  color:var(--wa-green-ink);background:var(--wa-wash);padding:2px 10px;border-radius:999px;
}
.wa-note{
  margin-top:10px;padding:8px 11px;border-radius:8px;
  background:#fff8e6;border:1px solid #f4e2b0;color:#6b5115;font-size:12px;font-weight:600;
}

/* ── preview bubble ────────────────────────────────────────────────────── */
.wa-bubble{
  background:var(--wa-wash);border:1px solid #cfe8db;border-radius:12px;
  border-start-start-radius:2px;                 /* the WhatsApp tail corner */
  padding:12px 14px;font-size:13.5px;line-height:1.6;color:#0f2a1c;
  white-space:normal;word-break:break-word;max-width:520px;
}
.wa-attachchip{
  display:inline-block;margin-top:9px;padding:6px 11px;border-radius:8px;
  background:#fff;border:1px solid #cfe8db;font-size:12px;font-weight:600;
}
.wa-optout{ margin-top:10px;padding-top:8px;border-top:1px solid #cfe8db;font-size:11.5px;color:#4a6558 }

/* ── the send bar ──────────────────────────────────────────────────────── */
.wa-send{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-radius:10px;
  background:var(--card,#fff);border:1px solid var(--line,#e3e6ef);
  font-size:13px;color:var(--ink-mute,#676879);
}
.wa-send b{ color:var(--ink,#1f2540);font-size:15px }
.wa-btn{
  border:0;border-radius:8px;padding:10px 18px;cursor:pointer;
  background:var(--wa-green);color:#fff;font:inherit;font-size:13px;font-weight:700;
}
.wa-btn:hover{ background:var(--wa-green-ink) }
.wa-btn:disabled{ background:#c4c9d4;cursor:not-allowed }
.wa-btn--ghost{
  background:transparent;color:var(--wa-green-ink);border:1px solid var(--wa-green);
}
.wa-btn--ghost:hover{ background:var(--wa-wash) }

/* ── "the two WhatsApp logins" ─────────────────────────────────────────────
   Receiving (wa_bridge's QR page) and sending (the OpenWA console) are two
   different pairings on two different URLs, and both are called "WhatsApp".
   Setting them side by side is the whole point of the panel. */
.wa-two__g{ display:grid;grid-template-columns:1fr 1fr;gap:0 }
.wa-two__c{ padding:2px 18px }
.wa-two__c + .wa-two__c{ border-inline-start:1px solid var(--line,#e3e6ef) }
.wa-two__c:first-child{ padding-inline-start:0 }
.wa-two__c h4{
  margin:0 0 6px;font-size:12.5px;font-weight:800;color:var(--ink,#1f2540);
}
.wa-two__c p{
  margin:0 0 12px;font-size:12.5px;line-height:1.65;color:var(--ink-mute,#676879);
}
.wa-two__c code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--wa-wash);color:var(--wa-green-ink);padding:1px 6px;border-radius:5px;
  unicode-bidi:plaintext;
}
@media (max-width:860px){
  .wa-two__g{ grid-template-columns:1fr }
  .wa-two__c{ padding-inline:0 }
  .wa-two__c + .wa-two__c{
    border-inline-start:0;border-top:1px solid var(--line,#e3e6ef);padding-top:14px;margin-top:4px;
  }
}

/* ── campaign progress ─────────────────────────────────────────────────── */
.wa-bar{ height:6px;border-radius:999px;background:var(--line,#e3e6ef);overflow:hidden;margin-bottom:4px }
.wa-bar i{ display:block;height:100%;background:var(--wa-green);border-radius:999px }
.wa-red{ color:#bb3354;font-weight:600 }

/* ── policy form ───────────────────────────────────────────────────────── */
.wa-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px }
.wa-f label{
  display:block;font-size:11.5px;font-weight:700;color:var(--ink-mute,#676879);margin-bottom:5px;
}
.wa-f input,.wa-f select{
  width:100%;padding:9px 11px;border:1px solid var(--line,#e3e6ef);border-radius:8px;
  font:inherit;font-size:13px;color:var(--ink,#1f2540);background:var(--card,#fff);
}
.wa-f .wa-hint{ margin-top:4px }

/* ── CRM quick-action tiles (dashboard board) ──────────────────────────── */
.wa-tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:14px }
.wa-tile{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 16px;border-radius:12px;color:#fff;border:0;text-align:start;
  font:inherit;width:100%;
}
.wa-tile:hover{ filter:brightness(1.06) }
.wa-tile__ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
}
.wa-tile__t{ font-size:13.5px;font-weight:700 }
.wa-tile__s{ font-size:11.5px;opacity:.9;font-weight:500 }

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .wa-compose{ grid-template-columns:1fr } }
@media (max-width:860px){
  .wa-health{ gap:8px }
  .wa-send{ position:sticky;bottom:0;z-index:2 }
  .wa-send .wa-btn{ flex:1 }
}